/* ============================================================
   QUIZORIA - gameplay screen
   Layout (16:9 TV):  HUD across the top,
   question + answers in the main column, prize ladder on the rail.
   ============================================================ */
.game {
  display: grid;
  grid-template-columns: 1fr calc(var(--u) * 17);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "hud    hud"
    "main   ladder"
    "tools  ladder";
  gap: var(--sp-3) var(--sp-4);
}

/* ---------------- HUD ---------------- */
.hud {
  grid-area: hud;
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline);
}
.hud__player { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hud__avatar {
  width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-fill); color: #17120a;
  font-weight: 800; font-size: var(--fs-lead);
  box-shadow: var(--glow-gold);
  flex: 0 0 auto;
}
.hud__name { font-size: var(--fs-h2); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud__spacer { flex: 1 1 auto; }
.hud__meta { display: flex; gap: var(--sp-2); align-items: center; }

/* Timer ring */
.timer { position: relative; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); flex: 0 0 auto; }
.timer svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.timer__track { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 6; }
.timer__bar {
  fill: none; stroke: var(--c-gold); stroke-width: 6; stroke-linecap: round;
  filter: drop-shadow(0 0 .4rem rgba(243,200,96,.7));
  transition: stroke-dashoffset 1s linear, stroke var(--t-base);
}
.timer__value {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-body); font-weight: 700;
}
.timer.is-urgent .timer__bar { stroke: var(--c-danger); filter: drop-shadow(0 0 .6rem rgba(255,77,94,.8)); }
.timer.is-urgent { animation: urgentPulse .9s var(--ease-in-out) infinite; }
@keyframes urgentPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.09) } }

/* ---------------- Main column ---------------- */
.main { grid-area: main; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); min-height: 0; }

/* Question plate */
.question {
  position: relative;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(28,38,104,.75), rgba(8,11,30,.9));
  border: 1px solid var(--hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1.6rem 3.6rem rgba(0,0,0,.55);
  text-align: center;
  /* Hidden until the director reveals it, so the plate never flashes up
     before the room has dimmed. */
  opacity: 0;
}
.question.is-shown { animation: questionReveal 760ms var(--ease-out) both; }
.question::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px;
  background: var(--gold-line); opacity: .8;
}
.question__text {
  font-size: calc(var(--u) * 2.05);
  font-weight: 600;
  line-height: 1.28;
  text-wrap: balance;
}
/* Long questions stay readable rather than overflowing */
.question--long .question__text { font-size: calc(var(--u) * 1.65); }
.question--xlong .question__text { font-size: calc(var(--u) * 1.4); }

@keyframes questionReveal {
  0%   { opacity: 0; transform: translateY(calc(var(--u) * 1.2)) rotateX(14deg) scale(.97); filter: blur(10px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* Answer grid */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.answer {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: calc(var(--u) * 5.2);
  text-align: start;
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, rgba(26,34,92,.7), rgba(9,12,32,.86));
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform 170ms var(--ease-out), box-shadow var(--t-base),
              border-color var(--t-base), background var(--t-base), opacity var(--t-base);
  animation: answerIn 520ms var(--ease-out) both;
}
/* No nth-child delays: the answers are appended one at a time by the show
   director, so the stagger follows the pacing of the language being played. */
@keyframes answerIn {
  0%   { opacity: 0; transform: translateY(calc(var(--u) * .9)) scale(.96); }
  100% { opacity: 1; transform: none; }
}

.answer__letter {
  flex: 0 0 auto;
  width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6);
  display: grid; place-items: center;
  border-radius: calc(var(--u) * .5);
  transform: rotate(45deg);
  border: 1px solid rgba(243,200,96,.5);
  background: rgba(243,200,96,.10);
  color: var(--c-gold);
  font-weight: 800; font-size: var(--fs-body);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.answer__letter span { transform: rotate(-45deg); }
.answer__text { font-size: calc(var(--u) * 1.5); font-weight: 500; line-height: 1.22; }
.answers--long .answer__text { font-size: calc(var(--u) * 1.22); }
.answers--xlong .answer__text { font-size: calc(var(--u) * 1.05); }

/* -- focus -- */
.answer.is-focused {
  transform: translateY(calc(var(--u) * -.18)) scale(1.022);
  border-color: rgba(243,200,96,.85);
  background: linear-gradient(160deg, rgba(70,52,168,.85), rgba(22,26,70,.92));
  box-shadow: var(--glow-violet), 0 1.2rem 2.6rem rgba(0,0,0,.5), inset 0 0 calc(var(--u) * 2) rgba(243,200,96,.18);
}
.answer.is-focused .answer__letter { background: var(--gold-fill); color: #17120a; box-shadow: var(--glow-gold); }

/* -- locked in (final answer) -- */
.answer.is-locked {
  border-color: var(--c-gold);
  background: linear-gradient(160deg, rgba(120,86,20,.7), rgba(40,28,8,.9));
  animation: lockPulse 1.05s var(--ease-in-out) infinite;
}
.answer.is-locked .answer__letter { background: var(--gold-fill); color: #17120a; }
@keyframes lockPulse {
  0%,100% { box-shadow: 0 0 0 rgba(243,200,96,.1), inset 0 0 calc(var(--u)*1) rgba(243,200,96,.2); }
  50%     { box-shadow: var(--glow-gold), inset 0 0 calc(var(--u)*2.6) rgba(243,200,96,.42); }
}

/* -- reveal -- */
.answer.is-correct {
  border-color: var(--c-success);
  background: linear-gradient(160deg, rgba(22,140,92,.85), rgba(6,44,32,.92));
  box-shadow: var(--glow-success);
  animation: correctPop 620ms var(--ease-pop) both;
}
.answer.is-correct .answer__letter { background: linear-gradient(135deg,#c8ffe4,var(--c-success)); border-color: var(--c-success); color: #04261a; }
@keyframes correctPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1.02); }
}
.answer.is-wrong {
  border-color: var(--c-danger);
  background: linear-gradient(160deg, rgba(150,26,44,.85), rgba(52,6,16,.92));
  box-shadow: var(--glow-danger);
  animation: wrongShake 520ms var(--ease-in-out) both;
}
.answer.is-wrong .answer__letter { background: linear-gradient(135deg,#ffd2d7,var(--c-danger)); border-color: var(--c-danger); color: #2e0308; }
@keyframes wrongShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(calc(var(--u) * -.5)); }
  40% { transform: translateX(calc(var(--u) * .45)); }
  60% { transform: translateX(calc(var(--u) * -.3)); }
  80% { transform: translateX(calc(var(--u) * .18)); }
}
/* removed by 50:50 */
.answer.is-void { opacity: .18; filter: grayscale(1); pointer-events: none; }
.answer.is-void .answer__text, .answer.is-void .answer__letter { visibility: hidden; }
.answer.is-dimmed { opacity: .45; }

/* ---------------- Tools row (lifelines) ---------------- */
.tools { grid-area: tools; display: flex; align-items: center; gap: var(--sp-3); }
.lifeline {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: calc(var(--u) * .5) var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(122,79,224,.16);
  border: 1px solid rgba(150,120,255,.42);
  font-size: var(--fs-body); font-weight: 600;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base),
              background var(--t-base), color var(--t-base), border-color var(--t-base), opacity var(--t-base);
}
.lifeline__glyph { font-weight: 800; letter-spacing: .04em; color: var(--c-cyan); }
.lifeline.is-focused {
  transform: translateY(calc(var(--u) * -.16)) scale(1.06);
  background: var(--gold-fill); color: #17120a; border-color: var(--c-gold);
  box-shadow: var(--glow-gold);
}
.lifeline.is-focused .lifeline__glyph { color: #17120a; }
.lifeline.is-used { opacity: .32; text-decoration: line-through; }
.lifeline.is-used.is-focused { background: rgba(255,255,255,.08); color: var(--c-text-dim); box-shadow: none; border-color: var(--hairline-strong); }
.lifeline.is-firing { animation: lifelineFire 700ms var(--ease-out); }
@keyframes lifelineFire {
  0% { box-shadow: 0 0 0 rgba(53,208,255,.0); }
  30% { box-shadow: 0 0 3rem rgba(53,208,255,.9); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 rgba(53,208,255,0); transform: scale(1); }
}
.tools__spacer { flex: 1 1 auto; }

/* ---------------- Prize ladder rail ---------------- */
.ladder {
  grid-area: ladder;
  display: flex; flex-direction: column-reverse; justify-content: center; gap: calc(var(--u) * .22);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(14,18,48,.72), rgba(6,8,22,.85));
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.rung {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: calc(var(--u) * .28) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: calc(var(--u) * 1.02);
  color: var(--c-text-dim);
  border: 1px solid transparent;
  transition: all var(--t-base) var(--ease-out);
}
.rung__no { width: calc(var(--u) * 1.7); text-align: end; font-size: var(--fs-micro); color: var(--c-text-faint); flex: 0 0 auto; }
.rung__amount { font-weight: 700; letter-spacing: .01em; }
.rung--safe { color: var(--c-gold-pale); }
.rung--safe .rung__no::after { content: "*"; color: var(--c-gold); }
.rung--passed { color: rgba(243,200,96,.62); }
.rung--current {
  background: var(--gold-fill);
  color: #17120a;
  border-color: var(--c-gold);
  box-shadow: var(--glow-gold);
  transform: scale(1.06);
}
.rung--current .rung__no { color: rgba(23,18,10,.7); }
.rung--current .rung__amount { font-weight: 800; }
.ladder__title { text-align: center; font-size: var(--fs-micro); color: var(--c-text-faint); letter-spacing: .2em; text-transform: uppercase; margin-bottom: var(--sp-1); }
:root[dir="rtl"] .ladder__title { letter-spacing: 0; text-transform: none; }

/* ---------------- Verdict / explanation panel ---------------- */
.verdict {
  /* Sits over the main column only, so the prize ladder stays readable while
     the explanation is up. Logical insets keep the rail on the correct side
     when the layout mirrors for Arabic. */
  position: absolute;
  inset-block: auto var(--safe-y);
  inset-inline-start: var(--safe-x);
  inset-inline-end: calc(var(--safe-x) + var(--u) * 18.4);
  z-index: var(--z-overlay);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(16,22,58,.96), rgba(6,8,22,.98));
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 -1rem 4rem rgba(0,0,0,.7);
  animation: verdictIn 480ms var(--ease-pop) both;
}
@keyframes verdictIn {
  from { opacity: 0; transform: translateY(60%); }
  to   { opacity: 1; transform: none; }
}
.verdict--ok { border-color: rgba(47,224,138,.6); box-shadow: 0 0 4rem rgba(47,224,138,.25), 0 -1rem 4rem rgba(0,0,0,.7); }
.verdict--ko { border-color: rgba(255,77,94,.55); box-shadow: 0 0 4rem rgba(255,77,94,.22), 0 -1rem 4rem rgba(0,0,0,.7); }
.verdict__badge {
  flex: 0 0 auto;
  width: calc(var(--u) * 5); height: calc(var(--u) * 5);
  border-radius: 50%; display: grid; place-items: center;
  font-size: calc(var(--u) * 2.4);
}
.verdict--ok .verdict__badge { background: rgba(47,224,138,.16); border: 1px solid var(--c-success); box-shadow: var(--glow-success); }
.verdict--ko .verdict__badge { background: rgba(255,77,94,.14); border: 1px solid var(--c-danger); box-shadow: var(--glow-danger); }
.verdict__body { flex: 1 1 auto; min-width: 0; }
.verdict__title { font-size: var(--fs-h1); font-weight: 800; margin-bottom: var(--sp-1); }
.verdict--ok .verdict__title { color: #b6ffdc; }
.verdict--ko .verdict__title { color: #ffc4ca; }
.verdict__explain { font-size: calc(var(--u) * 1.25); color: var(--c-text); opacity: .92; line-height: 1.34; }
.verdict__cta { flex: 0 0 auto; }

/* ---------------- Level-up curtain ---------------- */
.levelup {
  position: absolute; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center;
  /* An opaque scrim over the gold wash: the curtain must read as a beat of
     its own, not as text floating on top of the question. */
  background:
    radial-gradient(58% 58% at 50% 50%, rgba(243,200,96,.22), transparent 70%),
    rgba(4,5,14,.93);
  animation: screenIn 320ms var(--ease-out) both;
  text-align: center;
}
.levelup__amount {
  font-size: calc(var(--u) * 6.2); font-weight: 800;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: prizePop 700ms var(--ease-pop) both;
}
.levelup__label { text-align: center; font-size: var(--fs-h2); color: var(--c-gold-pale); }

/* ---------------- Small-screen / non-TV fallback ---------------- */
@media (max-aspect-ratio: 1/1), (max-width: 780px) {
  .game {
    grid-template-columns: 1fr;
    grid-template-areas: "hud" "main" "tools" "ladder";
    grid-template-rows: auto 1fr auto auto;
  }
  .ladder {
    flex-direction: row; overflow-x: auto; gap: var(--sp-2);
    /* `center` would push the first rungs into unreachable overflow on the
       left, so the strip starts flush and scrolls to the current rung. */
    justify-content: flex-start;
    scrollbar-width: none;              /* the rail scrolls itself to the
                                           current rung; a raw scrollbar would
                                           only add clutter */
  }
  .ladder::-webkit-scrollbar { display: none; }
  .ladder__title { display: none; }
  .rung { flex: 0 0 auto; }
  .answers { grid-template-columns: 1fr; }
  .langGrid, .diffGrid { grid-template-columns: 1fr 1fr; }
  .catGrid { grid-template-columns: 1fr 1fr; }
  .results__stats { grid-template-columns: 1fr 1fr; }
  .results__review { grid-template-columns: 1fr; }
}

/* On narrow/portrait screens the ladder moves below the main column, so the
   verdict can use the full width again. */
@media (max-aspect-ratio: 1/1), (max-width: 780px) {
  .verdict {
    inset-inline-end: var(--safe-x);
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }
}