/* bierkuhles/game.css — Bowling gegen Spilker. Mobile-first, portrait landscape. */

html, body {
  margin: 0;
  padding: 0;
  background: #060400;
  color: #FFF3D0;
  font-family: 'DM Mono', monospace;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ─── BACK LINK ─────────────────────────────────────────────────────────── */
#back-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 50;
  padding: 0.45rem 0.85rem;
  background: rgba(6, 4, 0, 0.72);
  border: 1px solid rgba(245, 176, 48, 0.32);
  border-radius: 999px;
  color: #F5B030;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.15s ease;
}
#back-link:active {
  transform: scale(0.95);
}
body.game-active #back-link {
  padding: 0.35rem 0.5rem;
  font-size: 0.68rem;
}

/* ─── INTRO SCREEN ──────────────────────────────────────────────────────── */
#screen-intro {
  padding: 3rem 1.25rem 2rem;
  background: radial-gradient(ellipse at top, rgba(212, 146, 10, 0.18) 0%, #060400 60%);
  overflow-y: auto;
}
.intro-logo {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 10vw, 3.8rem);
  letter-spacing: 0.06em;
  color: #F5B030;
  text-align: center;
  line-height: 0.95;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 24px rgba(245, 176, 48, 0.4);
}
.intro-logo span {
  display: block;
  color: #FFF3D0;
  font-size: 0.48em;
  letter-spacing: 0.18em;
  margin-top: 0.25rem;
}
.intro-sub {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: rgba(255, 243, 208, 0.7);
  text-align: center;
  margin: 0 0 1.4rem 0;
}

.rival-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 auto 1.1rem;
}
.rival-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid #F5B030;
  box-shadow: 0 0 24px rgba(245, 176, 48, 0.45);
}
.rival-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: rgba(245, 176, 48, 0.7);
}
.rival-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: #FFF3D0;
}
.rival-taunt {
  font-size: 0.75rem;
  color: rgba(255, 243, 208, 0.85);
  text-align: center;
  max-width: 280px;
  font-style: italic;
  min-height: 2.2em;
  margin-top: 0.2rem;
}

.best-box {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(255, 243, 208, 0.7);
  margin-bottom: 1.1rem;
}
.best-box b {
  color: #F5B030;
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
}

/* ─── DIFFICULTY SLIDER (copied from pils-gewinnt-vs-brauni pattern) ──── */
.difficulty-slider {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin: 0 auto 0.4rem;
  padding: 0.35rem;
  background: rgba(245, 176, 48, 0.08);
  border: 1px solid rgba(245, 176, 48, 0.18);
  border-radius: 999px;
  max-width: 320px;
}
.difficulty-btn {
  flex: 1;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: rgba(255, 243, 208, 0.55);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.difficulty-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.difficulty-btn.selected {
  background: rgba(245, 176, 48, 0.25);
  color: #F5B030;
  box-shadow: inset 0 0 0 1px rgba(245, 176, 48, 0.45);
}
.difficulty-emoji {
  font-size: 1.05em;
}
.difficulty-hint {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(255, 243, 208, 0.5);
  text-align: center;
  margin-bottom: 1.2rem;
}

.btn-primary {
  display: block;
  padding: 0.95rem 1.8rem;
  margin: 0.2rem auto;
  min-height: var(--pfb-tap-target-min, 44px);
  min-width: var(--pfb-tap-target-min, 44px);
  background: var(--pfb-gold-dark, #D4920A);
  color: var(--pfb-bg, #060400);
  border: 2px solid var(--pfb-text, #FFF3D0);
  border-radius: var(--pfb-radius-md, 8px);
  font-family: var(--pfb-font-display, 'Anton', sans-serif);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 0 28px var(--pfb-gold-glow, rgba(245, 176, 48, 0.45));
  transition: background var(--pfb-dur-fast, .12s) ease-out, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: var(--pfb-gold, #F5B030);
}
.btn-primary:active {
  transform: scale(0.96);
}
.btn-ghost {
  display: block;
  padding: 0.7rem 1.3rem;
  margin: 0.4rem auto;
  min-height: var(--pfb-tap-target-min, 44px);
  background: transparent;
  color: var(--pfb-text-dim, rgba(255, 243, 208, 0.75));
  border: 1px solid var(--pfb-border, rgba(245, 176, 48, 0.35));
  border-radius: var(--pfb-radius-md, 8px);
  font-family: var(--pfb-font-mono, 'DM Mono', monospace);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background var(--pfb-dur-fast, .12s) ease-out, color var(--pfb-dur-fast, .12s) ease-out, border-color var(--pfb-dur-fast, .12s) ease-out;
}
.btn-ghost:hover {
  background: var(--pfb-gold-subtle, rgba(245, 176, 48, 0.12));
  color: var(--pfb-text, #FFF3D0);
  border-color: var(--pfb-gold, #F5B030);
}

.intro-hints {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.1rem;
  font-size: 0.7rem;
  color: rgba(255, 243, 208, 0.7);
  flex-wrap: wrap;
}
.hint {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(245, 176, 48, 0.06);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
}

/* ─── GAME SCREEN ───────────────────────────────────────────────────────── */
#screen-game {
  background: #060400;
}
#c {
  display: block;
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  touch-action: none;
}
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 0.9rem 0.6rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 4, 0, 0.85) 0%, rgba(6, 4, 0, 0) 100%);
}
.hud-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
  padding: 0.35rem 0.55rem;
  background: rgba(6, 4, 0, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(245, 176, 48, 0.18);
}
.hud-side.active-turn {
  border-color: rgba(245, 176, 48, 0.75);
  box-shadow: 0 0 18px rgba(245, 176, 48, 0.28);
}
.hud-label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: rgba(255, 243, 208, 0.55);
}
.hud-name {
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #FFF3D0;
  margin-top: 0.05rem;
}
.hud-score {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  color: #F5B030;
  line-height: 1;
  margin-top: 0.15rem;
}
.hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: rgba(255, 243, 208, 0.7);
}
.hud-frame {
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  color: #F5B030;
  letter-spacing: 0.08em;
}

/* ─── FRAMES STRIP ──────────────────────────────────────────────────────── */
#frames-strip {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  z-index: 10;
  pointer-events: none;
  background: rgba(6, 4, 0, 0.6);
  padding: 4px 6px;
  border-radius: 8px;
}
.frame-cell {
  display: flex;
  flex-direction: column;
  width: 44px;
  border: 1px solid rgba(245, 176, 48, 0.28);
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  color: #FFF3D0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.frame-cell.final-frame {
  width: 56px;
}
.frame-cell.current {
  border-color: #F5B030;
  box-shadow: 0 0 10px rgba(245, 176, 48, 0.35);
}
.frame-throws {
  display: flex;
  justify-content: space-around;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(255, 243, 208, 0.75);
  padding: 2px 0;
  min-height: 12px;
}
.frame-total {
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  color: #F5B030;
  text-align: center;
  background: rgba(245, 176, 48, 0.1);
  min-height: 14px;
}

/* ─── TAUNT-BUBBLE ──────────────────────────────────────────────────────── */
#taunt {
  position: absolute;
  top: 8.2rem;
  right: 0.8rem;
  max-width: 60%;
  z-index: 15;
  padding: 0.6rem 0.9rem;
  background: rgba(6, 4, 0, 0.9);
  border: 1px solid rgba(245, 176, 48, 0.4);
  border-radius: 12px;
  font-size: 0.78rem;
  color: #FFF3D0;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  font-style: italic;
}
#taunt.visible {
  opacity: 1;
  transform: translateY(0);
}
#taunt::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 1.5rem;
  width: 12px;
  height: 12px;
  background: rgba(6, 4, 0, 0.9);
  border-left: 1px solid rgba(245, 176, 48, 0.4);
  border-top: 1px solid rgba(245, 176, 48, 0.4);
  transform: rotate(45deg);
}

/* ─── AIM PANEL (bottom) ────────────────────────────────────────────────── */
#aim-panel {
  position: absolute;
  bottom: 2.4rem;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  pointer-events: none;
}
#aim-panel.hidden {
  display: none;
}
.aim-hint {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: rgba(245, 176, 48, 0.85);
  background: rgba(6, 4, 0, 0.72);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 176, 48, 0.3);
}
.aim-hint.tiny {
  font-size: 0.65rem;
  color: rgba(255, 243, 208, 0.6);
  border: none;
  background: transparent;
}

/* ─── HANDOVER CARD ─────────────────────────────────────────────────────── */
#handover {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 0, 0.82);
  backdrop-filter: blur(4px);
}
#handover.visible {
  display: flex;
}
.handover-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.6rem 2.2rem;
  background: linear-gradient(135deg, rgba(245, 176, 48, 0.15), rgba(6, 4, 0, 0.92));
  border: 1px solid rgba(245, 176, 48, 0.35);
  border-radius: 14px;
  max-width: 320px;
  text-align: center;
  animation: handoverIn 0.35s ease;
}
@keyframes handoverIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.handover-title {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: #F5B030;
}
.handover-sub {
  font-size: 0.78rem;
  color: rgba(255, 243, 208, 0.8);
  min-height: 2.6em;
  font-style: italic;
}
.handover-meta {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(255, 243, 208, 0.6);
}

/* ─── COUNTDOWN ─────────────────────────────────────────────────────────── */
#countdown {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 0, 0.7);
  pointer-events: none;
}
#countdown.visible {
  display: flex;
}
.cd-num {
  font-family: 'Anton', sans-serif;
  font-size: 8rem;
  color: #F5B030;
  text-shadow: 0 0 40px rgba(245, 176, 48, 0.75);
  animation: cdPulse 0.7s ease forwards;
}
@keyframes cdPulse {
  0%   { transform: scale(0.4); opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}

/* ─── RESULT SCREEN ─────────────────────────────────────────────────────── */
#screen-result {
  padding: 3rem 1.25rem 1.5rem;
  overflow-y: auto;
  background: radial-gradient(ellipse at center, rgba(212, 146, 10, 0.15) 0%, #060400 70%);
}
.res-title {
  font-family: 'Anton', sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.08em;
  color: #F5B030;
  text-align: center;
  margin-bottom: 0.25rem;
}
.res-title.loss { color: #E86B4A; }
.res-score-box {
  background: rgba(245, 176, 48, 0.08);
  border: 1px solid rgba(245, 176, 48, 0.25);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin: 0 auto 1rem;
  max-width: 340px;
  text-align: center;
}
.res-score-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.3rem 0;
}
.res-score-row .name {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: rgba(255, 243, 208, 0.85);
}
.res-score-row .val {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  color: #FFF3D0;
}
.res-score-row.win .val { color: #F5B030; }
.res-vs {
  font-family: 'Anton', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: rgba(255, 243, 208, 0.4);
  text-align: center;
  margin: 0.2rem 0;
}
.res-best {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(255, 243, 208, 0.55);
  margin-top: 0.4rem;
}
.res-new-record {
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  color: #F5B030;
  letter-spacing: 0.16em;
  margin-top: 0.4rem;
  display: none;
}
.res-new-record.visible { display: block; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.res-spilker-quote {
  max-width: 340px;
  margin: 0 auto 1.2rem;
  padding: 0.9rem 1rem;
  background: rgba(6, 4, 0, 0.65);
  border: 1px solid rgba(245, 176, 48, 0.25);
  border-radius: 12px;
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.spilker-mini-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(245, 176, 48, 0.5);
  flex-shrink: 0;
}
.spilker-quote-text {
  font-size: 0.8rem;
  color: #FFF3D0;
  font-style: italic;
  line-height: 1.3;
}
.res-btns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 320px;
  margin: 0 auto;
}