/* ─────────────────────────────────────
   eazy · תותח מילים — שכבת עיצוב
   ───────────────────────────────────── */

/* === colors_and_type.css === */
/* ==========================================================================
   eazy — colors & type foundations
   Hebrew-first, RTL. Brand built around the lowercase "eazy." wordmark
   and the orange "E" mark. Imagery is black & white; chrome is lavender + orange.
   ========================================================================== */

/* ---------- Web fonts -------------------------------------------------- */
@font-face {
  font-family: "Avigul";
  src: url("fonts/avigul-light-fm.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avigul";
  src: url("fonts/avigul-regular-fm.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avigul";
  src: url("fonts/avigul-bold-fm.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avigul Shadow";
  src: url("fonts/avigul-shadow-fm.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Almoni Neue Tzar";
  src: url("fonts/almoni-neue-tzar-aaa-light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Almoni Neue Tzar";
  src: url("fonts/almoni-neue-tzar-aaa-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FbTamlilCondensed";
  src: url("fonts/FbTamlilCondensedEng-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("fonts/Geomanist-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Color tokens ---------------------------------------------- */
:root {
  /* Brand primaries */
  --ez-orange:        #F37327;   /* CTA, the "E" mark, brand highlight */
  --ez-orange-deep:   #D55A12;   /* hover / pressed orange */
  --ez-orange-soft:   #FBD9C2;   /* soft orange tint, decorative dots */
  --ez-orange-tint:   #FFF1E7;   /* page tint behind orange content */

  /* Lavender — the "Z" pattern colour, large blocks behind imagery */
  --ez-lavender:      #A9A4EC;   /* hero shape, secondary CTAs */
  --ez-lavender-deep: #6E68C9;   /* hover, link colour, headline accent */
  --ez-lavender-soft: #D9D6F4;   /* softest hero block */
  --ez-lavender-tint: #EFEDFB;   /* surface tint */

  /* Indigo — heavy headlines (used on a few flyers) */
  --ez-indigo:        #3F4197;
  --ez-indigo-deep:   #292B6E;

  /* Neutrals — paper, ink, dividers */
  --ez-paper:         #FFFFFF;
  --ez-paper-warm:    #F4F2EE;   /* off-white background of most flyers */
  --ez-paper-cool:    #EFEFF2;   /* slate-tinted off-white */
  --ez-line:          #E2E2E6;   /* hairline */
  --ez-ink:           #1A1A1A;   /* body text */
  --ez-ink-soft:      #4A4A4A;   /* secondary text */
  --ez-ink-mute:      #8A8A8A;   /* tertiary, captions */

  /* Semantic */
  --ez-fg-1:          var(--ez-ink);
  --ez-fg-2:          var(--ez-ink-soft);
  --ez-fg-3:          var(--ez-ink-mute);
  --ez-fg-on-orange:  #FFFFFF;
  --ez-fg-on-lavender:#1A1A1A;

  --ez-bg-1:          var(--ez-paper);
  --ez-bg-2:          var(--ez-paper-warm);
  --ez-bg-3:          var(--ez-paper-cool);
  --ez-bg-accent:     var(--ez-lavender);
  --ez-bg-cta:        var(--ez-orange);

  --ez-link:          var(--ez-lavender-deep);
  --ez-link-hover:    var(--ez-orange-deep);

  --ez-success:       #2F8F5C;
  --ez-warning:       #E0A21A;
  --ez-danger:        #C8362A;

  /* Spacing scale (4-based) */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;   --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-7: 32px;   --sp-8: 40px;
  --sp-9: 56px;   --sp-10: 72px;  --sp-11: 96px;

  /* Radii — tight; eazy uses sharp corners with mild rounding on cards */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 20px; --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(20, 20, 35, 0.06);
  --shadow-2: 0 6px 20px rgba(40, 30, 80, 0.08);
  --shadow-3: 0 18px 48px rgba(40, 30, 80, 0.14);

  /* Type ramps */
  --font-display:  "Avigul", "Almoni Neue Tzar", "Heebo", "Assistant", system-ui, sans-serif;
  --font-body:     "Almoni Neue Tzar", "Avigul", "Heebo", "Assistant", system-ui, sans-serif;
  --font-mono:     "Geomanist", ui-monospace, "SF Mono", Menlo, monospace;
  --font-shadow:   "Avigul Shadow", "Avigul", sans-serif;        /* outlined display variant */
  --font-en-disp:  "FbTamlilCondensed", "Avigul", sans-serif;    /* condensed English headline */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-base:  1.45;
  --leading-loose: 1.7;
}

/* ---------- Element-level type ---------------------------------------- */
html { font-family: var(--font-body); color: var(--ez-fg-1); background: var(--ez-bg-2); }
body { direction: rtl; }   /* Hebrew default */

h1, .ez-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 88px);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--ez-lavender);     /* signature lavender headline */
  margin: 0;
}
h2, .ez-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: var(--leading-snug);
  color: var(--ez-fg-1);
  margin: 0;
}
h3, .ez-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--ez-fg-1);
  margin: 0;
}
h4, .ez-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}
p, .ez-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--leading-base);
  color: var(--ez-fg-2);
  margin: 0;
  text-wrap: pretty;
}
.ez-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ez-orange);
  text-transform: none;          /* Hebrew has no case */
}
.ez-tagline {
  /* "פשוט תצליחו." – the brand line. orange, bold, with the period. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ez-orange);
  letter-spacing: -0.005em;
}
.ez-caption {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ez-fg-3);
}
code, .ez-mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

a, .ez-link {
  color: var(--ez-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
a:hover, .ez-link:hover {
  color: var(--ez-link-hover);
  border-bottom-color: currentColor;
}


/* === game.css === */
/* eazy · MCQ shooter — LANDSCAPE layout
   Stage is a fixed 16:9 canvas that scales to fit the container.
*/

/* The eazy brand wordmark — always rendered in Aharoni CLM
   wherever the literal word "eazy" appears on-screen. The font is
   bundled locally so it works on the standalone server build too. */
@font-face {
  font-family: "Aharoni CLM";
  src: url("fonts/AharoniCLM-Book.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
.brand-eazy,
.brand-eazy span {
  font-family: "Aharoni CLM", var(--font-display), system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  text-transform: lowercase;
}

.gm-app {
  --gm-sky-top:   #C9C5EE;
  --gm-sky-mid:   #E1DEF6;
  --gm-sky-bot:   #F1EFFB;
  --gm-mtn-back:  #B6B1E0;
  --gm-mtn-front: #8E89C8;
  --gm-ground:    #1A1530;
  --gm-ground-2:  #2A2547;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: #0A0820;
  font-family: var(--font-display);
  color: var(--ez-ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* establishes a size container so the end-screen can adapt to actual device dimensions */
  container-type: size;
  container-name: gmapp;
}

/* fixed-design stage that scales via JS-controlled CSS var --gm-scale */
.gm-stage {
  position: absolute;
  width: 1600px; height: 900px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--gm-scale, 1));
  transform-origin: center center;
  background:
    linear-gradient(180deg, var(--gm-sky-top) 0%, var(--gm-sky-mid) 38%, var(--gm-sky-bot) 70%, #F4F2EE 100%);
  overflow: hidden;
}

/* ---------- sky shapes (lavender Z clouds) ---------- */
.gm-sky-z {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.gm-sky-z .z {
  position: absolute;
  height: 36px;
  transform: skew(-30deg);
  border-radius: 3px;
  opacity: .6;
}

/* ---------- horizon (kept above the word band) ---------- */
.gm-horizon { position: absolute; left: 0; right: 0; bottom: 26%; pointer-events: none; line-height: 0; }
.gm-horizon svg { display: block; width: 100%; height: auto; }

/* ---------- ground / word band (the big bottom HUD) ---------- */
.gm-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 20%;
  background:
    linear-gradient(180deg, #F4F2EE 0%, #ECE9E4 100%);
  border-top: 2px solid rgba(20,15,40,.08);
  box-shadow: 0 -20px 40px -22px rgba(20,15,40,.2);
  display: flex; align-items: center; justify-content: center;
}
.gm-ground::after {
  content: none;
}

/* ---------- HUD top ---------- */
.gm-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 24px 32px 12px;
}
.gm-hud-brand {
  position: absolute;
  top: 28px; left: 36px;
  display: flex; align-items: center; gap: 14px;
  z-index: 40;
  pointer-events: auto;
}
.gm-hud-brand img { width: 96px; height: 96px; }
.gm-hud-brand span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 60px; color: #1A1A1A;
  letter-spacing: -.01em;
}
.gm-hud .brand {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 20px 8px 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.gm-hud .brand img { width: 40px; height: 40px; }
.gm-hud .brand span { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ez-ink); }
.gm-hud .chip {
  background: #fff;
  border-radius: 999px;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 26px;
  color: var(--ez-ink);
  display: inline-flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  white-space: nowrap;
}
.gm-hud .chip .label { font-family: var(--font-body); font-weight: 400; color: var(--ez-fg-3); font-size: 26px; }
.gm-hud .chip.score { font-size: 48px; padding: 18px 32px; }
.gm-hud .hearts { display: flex; gap: 8px; align-items: center; padding: 12px 22px; }
.gm-hud .hearts svg { width: 42px; height: 42px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.gm-hud .hearts svg.lost path { fill: #DCDCE8; }
.gm-hud .spacer { flex: 1; }
.gm-hud .icon-btn {
  width: 48px; height: 48px;
  border: 0; border-radius: 999px;
  background: #fff; color: var(--ez-fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  cursor: pointer;
}
.gm-hud .icon-btn svg { width: 22px; height: 22px; }

/* ---------- word display (centered inside the bottom band) ---------- */
.gm-word {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 20;
  height: 20%;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px 40px 22px;
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.gm-word .en  {
  font-family: var(--font-display); font-weight: 700;
  font-size: 108px; line-height: .92; color: #2A2547;
  direction: ltr; letter-spacing: -.02em;
}
.gm-word-brand { display: none; }
.gm-word-brand img { width: 76px; height: 76px; }
.gm-word-brand span {
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
  color: var(--ez-ink);
  letter-spacing: -.01em;
}

/* ---------- first-question attention effect ---------- */
/* On the very first question we wrap the word in a soft orange highlight
   + a slow pulse + a floating label so first-time players notice WHERE the
   question is. */
.gm-word.is-first .en-wrap {
  position: relative;
  padding: 16px 36px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 0 0 3px var(--ez-orange),
    0 0 0 10px rgba(243,115,39,.22),
    0 18px 40px rgba(243,115,39,.35);
  animation: firstWordPulse 1.6s cubic-bezier(.4,.0,.2,1) infinite;
}
.gm-word.is-first .en {
  color: var(--ez-orange-deep, #B94A0C);
}
.gm-word.is-first .en-wrap::before {
  content: "זו המילה שצריך לפרש";
  position: absolute;
  left: 50%; top: -64px; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; color: #fff;
  background: var(--ez-orange);
  padding: 10px 22px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(243,115,39,.45);
  animation: firstWordLabelBob 1.6s cubic-bezier(.4,.0,.2,1) infinite;
  direction: rtl;
}
.gm-word.is-first .en-wrap::after {
  content: "";
  position: absolute;
  left: 50%; top: -16px; transform: translateX(-50%) rotate(45deg);
  width: 18px; height: 18px;
  background: var(--ez-orange);
  animation: firstWordLabelBob 1.6s cubic-bezier(.4,.0,.2,1) infinite;
}
@keyframes firstWordPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px var(--ez-orange),
      0 0 0 10px rgba(243,115,39,.22),
      0 18px 40px rgba(243,115,39,.35);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 4px var(--ez-orange),
      0 0 0 22px rgba(243,115,39,.0),
      0 22px 50px rgba(243,115,39,.45);
    transform: scale(1.03);
  }
}
@keyframes firstWordLabelBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* ---------- rockets fleet ---------- */
.gm-rockets {
  position: absolute;
  top: 130px; bottom: calc(20% + 30px);
  right: 40px; width: 720px;
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 15;
  pointer-events: none;
}
.gm-rocket-travel {
  width: 100%;
  animation: rocketTravel var(--rocket-duration, 22s) linear both;
  pointer-events: none;
}
.gm-rocket-travel.paused { animation-play-state: paused; }
@keyframes rocketTravel {
  from { transform: translateX(160px); }
  to   { transform: translateX(-980px); }
}
.gm-rocket {
  pointer-events: auto;
  position: relative;
  width: 510px; height: 119px;
  margin-right: var(--mr, 0px);
  cursor: pointer;
  filter: drop-shadow(0 12px 18px rgba(20,15,40,.28));
  transition: transform .2s cubic-bezier(.2,.7,.2,1), filter .2s;
}
.gm-rocket:hover { transform: translateX(-10px); }
.gm-rocket:active { transform: translateX(-4px) scale(.99); }
.gm-rocket svg.frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.gm-rocket .label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 90px 0 100px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1.1; color: #1A1530;
  z-index: 2;
  text-align: right;
}

/* states */
.gm-rocket.aiming   { transform: translateX(-14px); filter: drop-shadow(0 12px 22px rgba(243,115,39,.45)) drop-shadow(0 0 28px rgba(243,115,39,.4)); }
.gm-rocket.hit      { animation: rocketHit .65s cubic-bezier(.4,1.6,.4,1) forwards; }
.gm-rocket.hit .body-fill   { fill: url(#bodyG-hit); }
.gm-rocket.missed .body-fill { fill: url(#bodyG-miss); }
.gm-rocket.missed { opacity: .6; }
.gm-rocket.missed .label { color: #4A4368; }
.gm-rocket.correct-after .body-fill { fill: url(#bodyG-correct); }
.gm-rocket.correct-after { filter: drop-shadow(0 12px 22px rgba(31,123,72,.5)) drop-shadow(0 0 18px rgba(91,227,163,.45)); }
.gm-rocket.correct-after .label::after { content: " ✓"; color: #1f7b48; margin-right: 6px; }

/* Regular rockets are now rendered as an embedded PNG (<image class="rocket-img">),
   so the SVG body-fill state colors above only apply to the BOSS rocket.
   For the PNG variant we shift the bitmap via CSS filters so missed / hit
   states still read clearly. */
.gm-rocket.missed .rocket-img        { filter: grayscale(1) brightness(.92); }
.gm-rocket.hit    .rocket-img        { filter: brightness(1.08) saturate(1.5) drop-shadow(0 0 14px rgba(243,115,39,.6)); }
.gm-rocket.correct-after .rocket-img { filter: saturate(1.2) drop-shadow(0 0 12px rgba(91,227,163,.7)); }

/* keep the GREEN correct rocket visible above the jam overlay */
.gm-rocket-travel:has(.gm-rocket.correct-after) { position: relative; z-index: 80; }

@keyframes rocketHit {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  25%  { transform: translateX(-12px) scale(1.02); }
  100% { transform: translateX(80px) scale(.85) rotate(8deg); opacity: 0; }
}

/* explosion burst */
.gm-burst {
  position: absolute; left: -10px; top: 50%;
  width: 140px; height: 140px;
  transform: translateY(-50%) scale(0);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}
.gm-burst svg { width: 100%; height: 100%; display: block; }
.gm-rocket.hit .gm-burst { animation: burst .65s ease-out forwards; }
@keyframes burst {
  0%   { transform: translateY(-50%) scale(.2); opacity: 1; }
  60%  { transform: translateY(-50%) scale(1.2); opacity: 1; }
  100% { transform: translateY(-50%) scale(1.6); opacity: 0; }
}

/* ---------- cannon (bottom-LEFT, facing rockets on the right) ---------- */
.gm-cannon {
  position: absolute;
  left: 64px;
  bottom: calc(20% - 60px);
  width: 280px; height: 240px;
  z-index: 25;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.45));
  transition: transform .15s ease-out;
}
.gm-cannon.recoil { animation: cannonRecoil .5s cubic-bezier(.2,.7,.2,1); }
@keyframes cannonRecoil {
  0%   { transform: translateX(0) rotate(0); }
  18%  { transform: translateX(36px) rotate(-3deg); }
  35%  { transform: translateX(28px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0); }
}
.gm-cannon.recoil::after {
  content: "";
  position: absolute;
  /* puff at the barrel tip (the barrel points up-right from cannon center) */
  right: -10px; top: 30%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,220,225,.95) 0%, rgba(180,180,190,.55) 45%, rgba(140,140,150,0) 75%);
  animation: barrelPuff .55s ease-out forwards;
  pointer-events: none;
}
@keyframes barrelPuff {
  0%   { transform: scale(.3) translate(0, 0);    opacity: 0; }
  20%  { transform: scale(.9) translate(8px, -4px); opacity: 1; }
  100% { transform: scale(1.7) translate(40px, -22px); opacity: 0; }
}
.gm-cannon svg.base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gm-cannon .barrel-wrap {
  position: absolute;
  left: 50%; top: 56%;
  width: 1px; height: 1px;
}
.gm-cannon .barrel-wrap svg {
  position: absolute;
  width: 220px; height: 60px;
  top: -30px; left: -30px;
  transform-origin: 30px 30px;
  transform: rotate(var(--angle, -20deg));
  transition: transform .3s cubic-bezier(.4,1.6,.4,1);
  overflow: visible;
}

/* ---------- projectile ---------- */
.gm-shot {
  position: absolute;
  width: 18px; height: 18px;
  background: radial-gradient(circle, #FFE6CB 0%, #F37327 40%, #B94A0C 100%);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(243,115,39,.8), 0 0 48px rgba(243,115,39,.5);
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.gm-shot.active { opacity: 1; }
.gm-shot::before {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 80px; height: 4px;
  background: linear-gradient(90deg, rgba(243,115,39,0), rgba(255,180,90,.95));
  transform: translateY(-50%);
  border-radius: 2px;
  filter: blur(.5px);
}

/* ---------- bottom-bar overlay (sits inside the band, beside the word) ---------- */
.gm-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 32;
  padding: 0 24px 14px;
  display: flex; align-items: flex-end; justify-content: space-between;
  color: #fff;
  pointer-events: none;
}
.gm-bottom > * { pointer-events: auto; }
.gm-bottom .stat {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.85);
}
.gm-bottom .stat strong { font-family: var(--font-display); font-size: 17px; color: #fff; }
.gm-bottom .stat .dot { width: 8px; height: 8px; background: var(--ez-orange); border-radius: 999px; }
.gm-bottom .skip {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 9px 18px;
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.gm-bottom .skip:hover { background: rgba(255,255,255,.22); }
.gm-bottom .gm-next {
  background: var(--ez-orange);
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(243,115,39,.6);
  transition: background .15s, transform .12s;
}
.gm-bottom .gm-next:hover { background: var(--ez-orange-deep); }
.gm-bottom .gm-next:active { transform: translateY(1px); }

/* ---------- upload screen ---------- */
.gm-up-app {
  background:
    radial-gradient(110% 70% at 30% 20%, rgba(228,232,246,0) 0%, rgba(218,224,242,.55) 60%, rgba(150,168,220,.7) 100%),
    #fafbfc;
  display: flex; align-items: center; justify-content: center;
}
.gm-up-wrap { position: relative; z-index: 2; width: 100%; max-width: 640px; padding: 24px; }
.gm-up-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 32px 80px -28px rgba(40,30,80,.45), 0 4px 14px rgba(40,30,80,.08);
  padding: 36px 32px 28px;
  display: grid; gap: 14px;
}
.gm-up-eye {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  color: var(--ez-orange); text-transform: uppercase; letter-spacing: .12em;
}
.gm-up-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; line-height: 1.05; letter-spacing: -.01em;
  color: var(--ez-ink); margin: 0;
}
.gm-up-sub {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--ez-fg-2); margin: 0 0 8px;
}
.gm-dropzone {
  border: 2px dashed var(--ez-lavender);
  background: var(--ez-lavender-soft);
  border-radius: 16px;
  padding: 28px 22px;
  display: grid; gap: 6px; justify-items: center; text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.gm-dropzone:hover { background: #ECEAFA; border-color: var(--ez-lavender-deep); }
.gm-dropzone.drag { background: var(--ez-orange-soft); border-color: var(--ez-orange); transform: scale(1.01); }
.gm-dz-icon { width: 56px; height: 56px; background: #fff; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.gm-dz-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ez-ink); }
.gm-dz-sub   { font-family: var(--font-mono); font-size: 12px; color: var(--ez-fg-3); }
.gm-up-info { font-family: var(--font-body); font-size: 14px; color: var(--ez-fg-2); padding: 8px 0; text-align: center; }
.gm-up-err  { background: var(--ez-orange-soft); color: var(--ez-orange-deep); padding: 10px 14px; border-radius: 10px; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.gm-up-or   { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--ez-fg-3); padding: 4px 0; letter-spacing: .1em; }
.gm-up-btn {
  background: var(--ez-orange); color: #fff; border: 0;
  border-radius: 999px; padding: 14px 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  cursor: pointer;
  transition: background .15s;
}
.gm-up-btn:hover { background: var(--ez-orange-deep); }
.gm-up-btn-ghost {
  background: transparent; color: var(--ez-ink);
  border: 1.5px solid var(--ez-ink);
  border-radius: 999px; padding: 12px 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.gm-up-btn-ghost:hover { background: var(--ez-ink); color: #fff; }
.gm-up-format {
  margin-top: 10px;
  background: var(--ez-paper-warm);
  border: 1px solid var(--ez-line);
  border-radius: 12px;
  padding: 14px;
}
.gm-fmt-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ez-fg-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.gm-up-format table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 14px; }
.gm-up-format th { text-align: right; padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ez-fg-3); font-weight: 700; border-bottom: 1px solid var(--ez-line); }
.gm-up-format td { padding: 6px 8px; color: var(--ez-ink); border-bottom: 1px solid var(--ez-line); }
.gm-up-format tr:last-child td { border-bottom: 0; }
.gm-fmt-note { font-family: var(--font-body); font-size: 12px; color: var(--ez-fg-3); margin-top: 8px; }

/* ---------- footer action buttons ---------- */
.gm-foot-actions {
  position: absolute; right: 32px; bottom: 22px;
  display: flex; gap: 20px;
  z-index: 35;
}
.foot-btn {
  width: 106px; height: 106px;
  border: 1.5px solid rgba(42,37,71,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #2A2547;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s, transform .12s;
}
.foot-btn svg { width: 42px; height: 42px; }
.foot-btn:hover  { background: #fff; border-color: rgba(42,37,71,.35); }
.foot-btn:active { transform: translateY(1px); }

/* 50/50 lifeline button — matches the other foot-btns (neutral chrome) so it
   doesn't compete with the active question for attention. */
.foot-btn.lifeline {
  /* (intentionally inherits the default .foot-btn look) */
}
.foot-btn.lifeline.used {
  background: #ECE9E4;
  border-color: rgba(42,37,71,.18);
  color: rgba(42,37,71,.4);
  cursor: not-allowed;
  pointer-events: none;
}
.foot-btn.lifeline .fifty-text {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 25px; line-height: 1.05;
  letter-spacing: -.02em;
  text-align: center;
}

/* hide distractors knocked out by 50/50 */
.gm-rocket-travel.hidden5050 {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease-out;
}

/* ---------- first-aid kit (bonus item) ---------- */
.gm-kit-travel {
  position: absolute;
  top: 120px;
  right: -160px;
  z-index: 18;
  animation: kitTravel 9s linear forwards;
  pointer-events: none;
}
@keyframes kitTravel {
  from { transform: translateX(0); }
  to   { transform: translateX(-1880px); }
}
.gm-kit {
  pointer-events: auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 120px; height: 110px;
  filter: drop-shadow(0 12px 18px rgba(20,15,40,.32))
          drop-shadow(0 0 16px rgba(220,38,38,.45));
  animation: kitBob 1.2s ease-in-out infinite alternate;
  transition: transform .15s;
}
.gm-kit:hover { transform: scale(1.08); }
.gm-kit svg { width: 100%; height: 100%; display: block; }
.gm-kit-label {
  position: absolute;
  top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: #DC2626;
  background: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid #DC2626;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(220,38,38,.25);
}
@keyframes kitBob {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-8px) rotate(3deg); }
}

/* ---------- intro screen ---------- */
.gm-intro-stage { cursor: default; }

.gm-intro-cannon { filter: drop-shadow(0 16px 30px rgba(0,0,0,.45)); }

.gm-intro-text {
  position: absolute;
  right: 80px;
  top: 130px;
  width: 1100px;
  z-index: 20;
  text-align: right;
}
.gm-intro-eye {
  font-family: var(--font-display); font-weight: 700;
  font-size: 44px; letter-spacing: .08em;
  color: var(--ez-orange);
  margin-bottom: 12px;
}
.gm-intro-eye .en {
  /* Make the Latin x-height match Hebrew height: scale the lowercase
     glyphs up so the top of "e" lands at the top of "ת" and its baseline
     stays aligned with the Hebrew baseline. */
  font-size: 1.5em;
  line-height: 0;
  vertical-align: baseline;
  letter-spacing: 0;
  margin-inline-start: .14em;
}
.gm-intro-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 148px; line-height: .92;
  color: #1A1530;
  letter-spacing: -.025em;
  margin: 0 0 24px;
}
.gm-intro-title .dot { color: var(--ez-orange); }
.gm-intro-lead {
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; line-height: 1.18;
  color: #2A2547;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.gm-intro-body {
  font-family: var(--font-body); font-weight: 400;
  font-size: 44px; line-height: 1.35;
  color: #2A2547;
  margin: 0;
  text-wrap: pretty;
  max-width: 1100px;
}
.gm-intro-cta {
  position: absolute;
  bottom: calc(20% / 2);
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 40;
  display: inline-flex; align-items: center; gap: 18px;
  background: linear-gradient(180deg, #FF8C42 0%, #F37327 45%, #C9531A 100%);
  border: 0;
  border-radius: 999px;
  padding: 28px 56px;
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
  cursor: pointer;
  box-shadow:
    0 22px 44px -14px rgba(243,115,39,.7),
    inset 0 2.5px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.2);
  transition: transform .12s, filter .15s;
}
.gm-intro-cta:hover  { filter: brightness(1.05); }
.gm-intro-cta:active { transform: translate(-50%, 50%) translateY(2px); }

/* ---------- end-of-game screen — dark scoreboard ---------- */
.gm-end-app {
  background:
    radial-gradient(120% 90% at 30% 18%, #2A2547 0%, #1A1530 55%, #0A0820 100%);
  position: relative;
  color: #F4F2EE;
  font-family: var(--font-display);
  padding: clamp(16px, 4cqh, 28px) clamp(24px, 5cqw, 48px);
  box-sizing: border-box;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "hud    hud   hud"
    "score  rule  list";
  gap: 0 clamp(16px, 3cqw, 28px);
  align-items: stretch;
}

/* faint orange-dot motif in the top corner */
.gm-end-app::before {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 220px; height: 220px;
  background:
    radial-gradient(circle 10px at 60px 50px,  #F37327 0%, transparent 70%),
    radial-gradient(circle 16px at 90px 100px, #F37327 0%, transparent 70%),
    radial-gradient(circle 6px  at 140px 60px, #FBD9C2 0%, transparent 70%),
    radial-gradient(circle 8px  at 50px 130px, #FBD9C2 0%, transparent 70%);
  opacity: .22;
  pointer-events: none;
}

/* HUD row — home button (right in RTL) + brand (left in RTL) */
.gm-end-hud {
  grid-area: hud;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(4px, 1cqh, 10px);
  position: relative; z-index: 2;
}
.gm-end-brand {
  display: inline-flex; align-items: center; gap: 8px;
}
.gm-end-brand img {
  width: 36px; height: 36px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.gm-end-brand span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: #F4F2EE;
  letter-spacing: -.01em;
}
.gm-end-home {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(244,242,238,.22);
  color: #F4F2EE;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.gm-end-home svg { width: 20px; height: 20px; }
.gm-end-home:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(244,242,238,.5);
}
.gm-end-home:active { transform: translateY(1px); }

/* RIGHT column (RTL col 1): big "סוף סיבוב" heading + score line + leaderboard slot */
.gm-end-score {
  grid-area: score;
  display: flex; flex-direction: column;
  align-items: center;
  padding: clamp(6px, 1.5cqh, 16px) 0 0;
  min-height: 0;
}
.gm-end-score-text {
  /* heading + subline live in the upper portion, centered */
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  justify-content: center;
  gap: 6px;
  min-height: 0;
}
.gm-end-eye {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 12cqh, 64px);
  line-height: 1.02;
  color: #F4F2EE;
  letter-spacing: -.01em;
  text-align: center;
  margin: 0;
}
.gm-end-eye .dot { color: var(--ez-orange); }
.gm-end-line {
  display: inline-flex; align-items: baseline; justify-content: center;
  gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 3.6cqh, 22px);
  color: var(--ez-lavender);
  line-height: 1.2;
}
.gm-end-line .num {
  font-family: var(--font-en-disp), var(--font-display);
  font-weight: 900;
  /* "just a touch bigger than the surrounding text" */
  font-size: clamp(20px, 4.6cqh, 28px);
  line-height: 1;
  color: var(--ez-orange);
}

/* Leaderboard button — sits at the bottom of the score column */
.gm-end-lb-btn {
  margin-top: auto;
  align-self: center;
}

/* Vertical divider */
.gm-end-vrule {
  grid-area: rule;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(169,164,236,.35), transparent);
}

/* LEFT column (RTL col 3): missed-words list + big "next round" CTA at the bottom */
.gm-end-list-wrap {
  grid-area: list;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: clamp(6px, 1.5cqh, 14px) 0 0;
}
.gm-end-list-eye {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, 2.8cqh, 16px);
  color: var(--ez-lavender);
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.gm-end-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  align-content: start;
  overflow: hidden;
  min-height: 0;
  flex: 1;
}
.gm-end-row {
  /* Subgrid keeps every row's EN column aligned to the same x and every
     row's HE column aligned to its x — independent of word length. */
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: clamp(16px, 4cqw, 28px);
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid rgba(169,164,236,.18);
}
.gm-end-row:last-child {
  border-bottom: 1px solid rgba(169,164,236,.18);
}
.gm-end-en {
  font-family: var(--font-en-disp), var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 3.8cqh, 19px);
  color: var(--ez-orange);
  direction: ltr;
  letter-spacing: .06em;
  text-align: left;
  white-space: nowrap;
}
.gm-end-he {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 3.8cqh, 19px);
  color: #F4F2EE;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "no missed words" celebratory state — fills the list area */
.gm-end-no-miss {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 6px;
}
.gm-end-no-miss .hi {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 6cqh, 44px);
  color: #F4F2EE;
  line-height: 1.05;
}
.gm-end-no-miss .hi .dot { color: var(--ez-orange); }
.gm-end-no-miss .lo {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(14px, 3cqh, 18px);
  color: var(--ez-lavender);
}

/* Primary CTA — large pill, centered in the left column, sits at the bottom */
.gm-end-restart {
  margin-top: clamp(8px, 2cqh, 14px);
  align-self: center;
  padding: clamp(12px, 3cqh, 16px) clamp(22px, 4cqw, 34px);
  font-size: clamp(15px, 4cqh, 20px);
  gap: 12px;
}
.gm-end-restart .cta-arrow {
  font-size: 26px; line-height: .8; margin-bottom: 2px;
}

/* Shared CTA base */
.gm-end-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, #FF8C42 0%, #F37327 50%, #C9531A 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, 3cqh, 16px);
  cursor: pointer;
  box-shadow:
    0 10px 24px -6px rgba(243,115,39,.65),
    inset 0 1.5px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.18);
  transition: transform .12s, filter .15s, box-shadow .15s;
  white-space: nowrap;
  line-height: 1.1;
}
.gm-end-cta:hover  { filter: brightness(1.06); }
.gm-end-cta:active { transform: translateY(2px); }
.gm-end-cta.secondary {
  background: transparent;
  color: #F4F2EE;
  border: 1.5px solid rgba(244,242,238,.35);
  box-shadow: none;
}
.gm-end-cta.secondary svg { width: 18px; height: 18px; color: var(--ez-orange); }
.gm-end-cta.secondary:hover {
  background: rgba(244,242,238,.08);
  border-color: rgba(244,242,238,.6);
  filter: none;
}

/* ---------- leaderboard ---------- */
/* (old adjacency rules removed — grid handles spacing) */
.gm-lb-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,15,40,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: lbFade .2s ease-out;
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.gm-lb-modal-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 28px 28px 24px;
  width: 100%; max-width: 460px;
  box-shadow: 0 24px 60px -20px rgba(20,15,40,.55), 0 4px 14px rgba(40,30,80,.1);
  animation: lbPop .25s cubic-bezier(.2,.7,.2,1);
}
@keyframes lbPop { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.gm-lb-close {
  position: absolute; top: 12px; left: 14px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  font-size: 26px; line-height: 1;
  color: var(--ez-fg-3);
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.gm-lb-close:hover { background: rgba(20,15,40,.06); color: var(--ez-ink); }

.gm-lb-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px;
  color: var(--ez-orange);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 10px;
}
.gm-lb-title svg { width: 18px; height: 18px; }

.gm-lb-prompt {
  margin-top: auto;
  align-self: stretch;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.05);
  border: 1.5px dashed var(--ez-orange);
  border-radius: 12px;
}
.gm-lb-prompt-eye {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: #F4F2EE;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  text-align: center;
}
.gm-lb-prompt-eye svg { width: 16px; height: 16px; color: var(--ez-orange); }
.gm-lb-prompt-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  align-items: stretch;
}
.gm-lb-input {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px;
  color: #F4F2EE;
  border: 1.5px solid rgba(244,242,238,.25);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(0,0,0,.25);
  outline: none;
  min-width: 0;
  text-align: right;
  transition: border-color .15s, box-shadow .15s;
}
.gm-lb-input::placeholder { color: rgba(244,242,238,.5); }
.gm-lb-input:focus {
  border-color: var(--ez-orange);
  box-shadow: 0 0 0 3px rgba(243,115,39,.18);
}
.gm-lb-save {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #FF8C42 0%, #F37327 45%, #C9531A 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  cursor: pointer;
  box-shadow:
    0 6px 14px -6px rgba(243,115,39,.6),
    inset 0 1.5px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.18);
  transition: filter .15s, transform .12s;
}
.gm-lb-save:hover  { filter: brightness(1.05); }
.gm-lb-save:active { transform: translateY(1px); }

.gm-lb-empty {
  font-family: var(--font-body); font-size: 13px;
  color: var(--ez-fg-3);
  text-align: center;
  padding: 12px 0;
}

.gm-lb-list {
  list-style: none;            /* kill the default "1." "2." markers */
  margin: 0; padding: 0;
  display: grid; gap: 4px;
}
.gm-lb-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(20,15,40,.05);
}
.gm-lb-row .rank {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px;
  color: var(--ez-fg-3);
  text-align: center;
}
.gm-lb-row:nth-child(1) .rank { color: #C9A227; font-size: 18px; }   /* gold */
.gm-lb-row:nth-child(2) .rank { color: #8A8A8A; }                     /* silver */
.gm-lb-row:nth-child(3) .rank { color: #B66E2F; }                     /* bronze */
.gm-lb-row .name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px;
  color: var(--ez-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-lb-row .pts {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px;
  color: var(--ez-orange);
  padding-left: 4px;
}
.gm-lb-row.you {
  background: var(--ez-orange-soft);
  border-color: var(--ez-orange);
  box-shadow: 0 2px 8px -2px rgba(243,115,39,.35);
}
.gm-lb-row.you .name { color: var(--ez-orange-deep); }
.gm-lb-row.you .pts  { color: var(--ez-orange-deep); }

/* ---------- level-up overlay ---------- */
.gm-levelup {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(243,115,39,.35) 0%, rgba(20,15,40,.55) 50%, rgba(20,15,40,.7) 100%);
  animation: levelupBg .35s ease-out;
}
.gm-levelup-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 180px; line-height: 1;
  color: #fff;
  letter-spacing: -.02em;
  text-shadow: 0 6px 0 rgba(0,0,0,.3), 0 0 40px rgba(243,115,39,.7);
  animation: levelupPop .55s cubic-bezier(.4,1.6,.4,1);
}
.gm-levelup-sub {
  margin-top: 16px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; color: #FFA362;
  letter-spacing: .02em;
  animation: levelupSub .6s .15s both cubic-bezier(.2,.7,.2,1);
}
@keyframes levelupBg  { from { opacity: 0; } to { opacity: 1; } }
@keyframes levelupPop { from { opacity: 0; transform: scale(.4); } 60% { transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes levelupSub { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- miss FX: jam drip overlay (random per-drip growth) ---------- */
.gm-miss-jam {
  position: absolute; inset: 0;
  z-index: 70;
  pointer-events: none;
  animation: jamFinalFade 5.4s linear forwards;
}
.gm-miss-jam svg { width: 100%; height: 100%; display: block; }
@keyframes jamFinalFade {
  0%, 95% { opacity: 1; }
  100%    { opacity: 0; }
}
.jam-splat {
  /* full-opaque from the start; gives the constant "pour" feel at the top */
  animation: jamSplatGrow 0.6s ease-out forwards;
  transform: scaleY(0);
  transform-origin: top center;
  transform-box: fill-box;
}
@keyframes jamSplatGrow { to { transform: scaleY(1); } }
.jam-drip {
  /* deprecated — kept for back-compat in case other code uses it */
  transform: scaleY(0);
  transform-origin: top center;
  transform-box: fill-box;
  animation: jamDripGrow 1.6s cubic-bezier(.3,.7,.2,1) forwards;
}
.jam-curtain {
  /* wide overlapping panels that flow down — together they form one continuous curtain */
  transform: scaleY(0);
  transform-origin: top center;
  transform-box: fill-box;
  animation: jamDripGrow var(--curtain-dur, 2.5s) cubic-bezier(.42,.0,.58,1) forwards;
}
@keyframes jamDripGrow { to { transform: scaleY(1); } }

/* ---------- hide non-winner rockets after a miss ---------- */
.gm-rocket-travel { transition: opacity .35s ease-out; }
.gm-rockets:has(.gm-rocket.correct-after) .gm-rocket-travel:not(:has(.correct-after)) {
  opacity: 0;
  pointer-events: none;
}
/* lift the entire rockets container above the jam (z:70) when a correct-after rocket exists */
.gm-rockets:has(.gm-rocket.correct-after) { z-index: 85; }

/* ---------- toast feedback ---------- */
.gm-toast {
  position: absolute; left: 50%; top: 100px;
  z-index: 50;
  transform: translateX(-50%);
  background: #1A1530;
  color: #fff;
  border-radius: 999px;
  padding: 24px 48px;
  font-family: var(--font-display); font-weight: 700; font-size: 36px;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,.45);
  display: inline-flex; align-items: center; gap: 18px;
  animation: toastIn .25s cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
}
.gm-toast.win  { background: #1f7b48; }
.gm-toast.lose { background: var(--ez-orange-deep); }
.gm-toast .dot { width: 22px; height: 22px; border-radius: 999px; background: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px);} to {opacity:1; transform: translateX(-50%) translateY(0);} }


/* ============================================================
   Rotate-device prompt — shown on portrait mobile only
   ============================================================ */
.gm-rotate-prompt { display: none; }

/* Touch phones held in portrait: cover the game with a "rotate me" panel.
   pointer:coarse picks up phones/tablets without firing on desktop windows
   that happen to be portrait-shaped. */
@media (orientation: portrait) and (pointer: coarse) and (max-width: 900px) {
  .gm-rotate-prompt {
    display: flex;
    position: fixed; inset: 0;
    z-index: 9999;
    background: radial-gradient(120% 90% at 30% 18%, #2A2547 0%, #1A1530 55%, #0A0820 100%);
    color: #F4F2EE;
    align-items: center;
    justify-content: center;
    padding: 32px;
    font-family: var(--font-display);
    direction: rtl;
  }
  /* Hide the game underneath so it doesn't fight the prompt for the viewport */
  .gm-rotate-prompt ~ #root { visibility: hidden; }
}

.gm-rotate-card {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  max-width: 320px;
}
.gm-rotate-icon {
  width: 96px; height: 96px;
  color: var(--ez-orange);
  animation: rotateHint 2.4s cubic-bezier(.4,0,.2,1) infinite;
  transform-origin: 40px 40px;
}
.gm-rotate-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px;
  color: #F4F2EE;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.gm-rotate-title .dot { color: var(--ez-orange); }
.gm-rotate-sub {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px;
  color: var(--ez-lavender);
}
@keyframes rotateHint {
  0%, 35%, 100% { transform: rotate(0deg); }
  60%, 80%      { transform: rotate(-90deg); }
}


/* ============================================================
   BOSS-question banner + per-word audio button
   ============================================================ */

/* The word HUD now hosts both the English word and (after unlock) a speaker
   button. Wrap them as a row so the speaker can sit beside the word. */
.gm-word .en-wrap {
  display: inline-flex; align-items: center; gap: 18px;
  pointer-events: auto;
}

/* Speaker button — orange so it's clearly an actionable mute toggle for the
   word audio (not the game SFX). The "muted" state inverts to an outline. */
.gm-word .speak-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FF8C42 0%, #F37327 50%, #C9531A 100%);
  border: 0;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow:
    0 10px 22px -6px rgba(243,115,39,.65),
    inset 0 1.5px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.18);
  transition: background .15s, transform .12s, box-shadow .15s, color .15s;
  flex-shrink: 0;
}
.gm-word .speak-btn svg { width: 36px; height: 36px; }
.gm-word .speak-btn:hover  { filter: brightness(1.05); transform: translateY(-1px); }
.gm-word .speak-btn:active { transform: translateY(1px); }
.gm-word .speak-btn.muted {
  background: transparent;
  color: var(--ez-orange-deep);
  box-shadow: inset 0 0 0 2px var(--ez-orange);
}
.gm-word .speak-btn.muted:hover {
  filter: none;
  background: rgba(243,115,39,.08);
}

/* BOSS banner — pinned at the top-center of the stage during the boss question.
   Sits ABOVE the rockets' travel band (which starts at top: 130px) so it
   never collides with an oncoming rocket. */
.gm-boss-banner {
  position: absolute;
  left: 50%; top: 36px;
  transform: translateX(-50%);
  z-index: 55;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px;
  color: #fff;
  background: linear-gradient(180deg, #DC2626 0%, #B91C1C 100%);
  padding: 10px 28px;
  border-radius: 999px;
  letter-spacing: .18em;
  box-shadow:
    0 14px 32px -8px rgba(220,38,38,.65),
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -3px 0 rgba(0,0,0,.18);
  pointer-events: none;
  animation: bossBannerIn .45s cubic-bezier(.2,.7,.2,1) both, bossBannerPulse 1.8s ease-in-out 1s infinite;
  white-space: nowrap;
}
.gm-boss-banner svg {
  width: 26px; height: 26px;
  color: #FFE066;
  filter: drop-shadow(0 0 8px rgba(255,224,102,.7));
  animation: bossBolt 1.4s ease-in-out infinite;
}
.gm-boss-banner svg:last-child { animation-delay: .35s; }
@keyframes bossBannerIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);   }
}
@keyframes bossBannerPulse {
  0%, 100% { box-shadow: 0 14px 32px -8px rgba(220,38,38,.65), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.18); }
  50%      { box-shadow: 0 14px 32px -8px rgba(220,38,38,1.0), 0 0 32px 4px rgba(220,38,38,.45), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.18); }
}
@keyframes bossBolt {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: 1;  }
  50%      { transform: scale(1.15) rotate(-6deg); opacity: .8; }
}


/* ---------- level-up overlay — audio-unlock variant ---------- */
/* For the BOSS-unlock event the overlay persists until the user picks one of
   the two continue buttons so they can read the new ability properly. */
.gm-levelup.gm-levelup-audio { pointer-events: auto; }
.gm-levelup.gm-levelup-audio .gm-levelup-title { font-size: 170px; }
.gm-levelup.gm-levelup-audio .gm-levelup-sub {
  font-size: 60px;
  color: #fff;
  max-width: 1300px;
  line-height: 1.18;
  margin-top: 32px;
  text-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.gm-levelup-title .dot { color: var(--ez-orange); }

.gm-levelup-buttons {
  display: flex; gap: 22px;
  margin-top: 52px;
  flex-wrap: wrap;
  justify-content: center;
  animation: levelupSub .6s .35s both cubic-bezier(.2,.7,.2,1);
}

.gm-levelup-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #FF8C42 0%, #F37327 50%, #C9531A 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 28px 52px;
  font-family: var(--font-display); font-weight: 700; font-size: 38px;
  cursor: pointer;
  box-shadow:
    0 18px 38px -10px rgba(243,115,39,.7),
    inset 0 2.5px 0 rgba(255,255,255,.4),
    inset 0 -3px 0 rgba(0,0,0,.18);
  transition: transform .12s, filter .15s;
  pointer-events: auto;
  white-space: nowrap;
}
.gm-levelup-cta:hover  { filter: brightness(1.06); }
.gm-levelup-cta:active { transform: translateY(2px); }
.gm-levelup-cta.secondary {
  background: transparent;
  color: #fff;
  border: 2.5px solid rgba(255,255,255,.55);
  box-shadow: none;
}
.gm-levelup-cta.secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.85);
  filter: none;
}

.gm-levelup-note {
  margin-top: 32px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px;
  color: rgba(255,255,255,.8);
  letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  animation: levelupSub .6s .55s both cubic-bezier(.2,.7,.2,1);
}
.gm-levelup-note .star { color: var(--ez-orange); margin-left: 4px; }


/* ============================================================
   BOSS rocket — distinct visual: red body, gold-into-red tip,
   subtle scale-up and red glow. Falls back to the action-state
   gradients (hit / missed / correct-after) the moment one fires.
   ============================================================ */
.gm-rocket.boss:not(.hit):not(.missed):not(.correct-after) .body-fill { fill: url(#bodyG-boss); }
.gm-rocket.boss:not(.hit):not(.missed):not(.correct-after) .tip-fill  { fill: url(#tipG-boss); }
.gm-rocket.boss:not(.hit):not(.missed):not(.correct-after) {
  filter: drop-shadow(0 0 14px rgba(220,38,38,.55)) drop-shadow(0 8px 18px rgba(220,38,38,.32));
}
.gm-rocket.boss .label { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.gm-rocket.boss.aiming { filter: drop-shadow(0 12px 22px rgba(220,38,38,.55)) drop-shadow(0 0 28px rgba(220,38,38,.45)); }


/* ============================================================
   Intro screen — mobile fullscreen prompt
   ============================================================ */
.gm-intro-fs-prompt { display: none; }

/* Coarse pointer (phones/tablets) OR small viewport: surface a prominent
   button that doubles as a tap target for going fullscreen. */
@media (pointer: coarse), (max-width: 980px) {
  .gm-intro-fs-prompt {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    position: absolute;
    bottom: calc(20% / 2 + 160px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 21, 48, 0.88);
    border: 2.5px solid var(--ez-orange);
    border-radius: 999px;
    padding: 22px 44px;
    color: #fff;
    font-family: var(--font-display); font-weight: 700;
    font-size: 38px;
    cursor: pointer;
    box-shadow: 0 16px 32px -10px rgba(0,0,0,.4), 0 0 0 6px rgba(243,115,39,.18);
    z-index: 41;
    transition: transform .12s, filter .15s, background .15s;
    white-space: nowrap;
  }
  .gm-intro-fs-prompt:hover  { background: rgba(26,21,48,0.95); filter: brightness(1.05); }
  .gm-intro-fs-prompt:active { transform: translateX(-50%) translateY(2px); }
  .gm-intro-fs-prompt .gm-intro-fs-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    border-radius: 999px;
    background: var(--ez-orange);
    color: #fff;
    flex-shrink: 0;
  }
  .gm-intro-fs-prompt .gm-intro-fs-icon svg { width: 26px; height: 26px; }
}