/* ─── Level Up: Euronics × Boulanger ──────────────────────────────────────
   Tokens and artwork come from the campaign Figma files, not from a guess:

     EURONICS_YELLOW  #F1C400      LEC_BLUE   #050019
     EURONICS_BLUE    #1D428A      LEC_ORANGE #FF5117
     Typeface         Nexa (Heavy / Regular / ExtraLight)

   Artwork in assets/brand/ is exported from EURONICS_S1_FAN_HUB:
     cta-btn.svg      diamond-capped button, used as a 9-slice border-image
     panel-frame.svg  ornate gold panel frame, 9-slice
     nameplate.svg    chevron-capped blue plate, 9-slice
     bg-kv.svg        gold arc key visual that frames the stage
     swirls.jpg       the blue smoke plate, flattened onto LEC_BLUE
   ------------------------------------------------------------------------ */

@font-face {
  font-family: Nexa;
  src: url("../assets/fonts/Nexa-Heavy.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: Nexa;
  src: url("../assets/fonts/Nexa-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Figma variables */
  --gold:   #F1C400;
  --blue:   #1D428A;
  --navy:   #050019;
  --orange: #FF5117;
  --white:  #FFFFFF;

  /* Reading tints derived from the Fan Hub body copy. */
  --body:   #D8E2F0;
  --muted:  #8B9BB4;
  --panel:  #0A1024;
  --panel-2:#111A33;

  --gutter: 1.4rem;
  /* Sized for a kiosk touchscreen: comfortably thumb-sized, not mouse-sized. */
  --slot:   5.2rem;

  --font: Nexa, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Everything downstream is expressed in rem, so this single fluid root scales
   the entire interface with the screen. It blends width and height so a tall
   portrait kiosk gets large type instead of a tiny column in a sea of navy. */
html { font-size: clamp(16px, calc(0.7vw + 1.12vh), 34px); }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--navy);
  color: var(--body);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Blue bloom and vignette. */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60vmax 45vmax at 50% 4%, rgba(29, 66, 138, 0.34), transparent 72%),
    radial-gradient(50vmax 40vmax at 88% 66%, rgba(29, 66, 138, 0.22), transparent 74%),
    radial-gradient(130vmax 110vmax at 50% 45%, transparent 42%, rgba(2, 0, 12, 0.72) 100%);
}

/* The campaign's smoke plate, placed twice at different scales and angles so a
   tall screen is filled rather than skirted along the bottom.
   The plate is flattened onto LEC_BLUE, so each copy is blended with `screen`:
   near-black navy contributes nothing and the rectangular edges disappear. */
.wisp {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/brand/swirls.jpg") center / contain no-repeat;
  mix-blend-mode: screen;
}
.wisp.is-a {                      /* main sweep, lower third */
  bottom: -4%;
  left: -12%;
  width: 128vmax;
  height: 73vmax;
  opacity: 0.95;
}
.wisp.is-b {                      /* mirrored, upper right */
  top: -14%;
  right: -20%;
  width: 96vmax;
  height: 55vmax;
  transform: scaleX(-1) rotate(6deg);
  opacity: 0.6;
}

main { position: relative; z-index: 1; flex: 1; display: flex; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Top bar ─────────────────────────────────────────────────────────── */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--gutter) 0.4rem;
}

/* Sizes are measured, not eyeballed: the Euronics wordmark fills 71% of its
   SVG box and Boulanger only 53%, so Boulanger needs a 1.33× taller box for
   the two lettering bodies to match optically. */
.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.3rem, 3vw);
  max-width: 100%;
}
.lockup-logo { display: block; width: auto; }
.lockup-logo.is-euronics { height: min(1.55rem, 4.4vw); }
.lockup-logo.is-partner  { height: min(2.07rem, 5.9vw); }

.lockup-rule {
  width: 1px;
  height: 1.85rem;
  background: linear-gradient(180deg, transparent, rgba(241, 196, 0, 0.5), transparent);
}

.topbar-tools {
  position: absolute;
  top: 0.7rem;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* FR / EN switch. Active language in gold, the other quiet. */
.langswitch { display: flex; align-items: center; gap: 0.15rem; }

.lang {
  padding: 0.45rem 0.5rem;
  border: 0;
  background: none;
  color: var(--muted);
  font: 900 0.72rem/1 var(--font);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color .15s;
}
.lang + .lang { border-left: 1px solid rgba(216, 226, 240, 0.2); }
.lang[aria-pressed="true"] { color: var(--gold); }
.lang:hover { color: var(--white); }
.lang:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.icon-btn {
  width: 2rem; height: 2rem;
  border: 0;
  background: rgba(29, 66, 138, 0.35);
  color: var(--gold);
  font-size: 0.9rem;
  cursor: pointer;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: filter .15s, color .15s;
}
.icon-btn[aria-pressed="false"] { color: var(--muted); }
.icon-btn:hover { filter: brightness(1.4); }

/* ─── Screens ─────────────────────────────────────────────────────────── */

.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.6rem var(--gutter);
  text-align: center;
}
.screen.is-active { display: flex; }

.eyebrow,
.section-tag {
  margin: 0;
  color: var(--gold);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero {
  margin: 0 0 1.1rem;
  color: var(--white);
  font-weight: 900;
  font-size: 4.3rem;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-shadow: 0 0 70px rgba(29, 66, 138, 0.7);
}
.hero.small { font-size: 3.6rem; }


.lede {
  max-width: 32rem;
  margin: 0 0 1.9rem;
  font-size: 1.2rem;
  line-height: 1.55;
}
.lede strong { color: var(--gold); font-weight: 900; }

/* ─── How to play ─────────────────────────────────────────────────────── */

.steps {
  display: grid;
  width: 100%;
  max-width: 30rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  text-align: left;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  line-height: 1.45;
  font-size: 1rem;
  line-height: 1.4;
}
.steps li + li { border-top: 1px solid rgba(216, 226, 240, 0.1); }

/* Gold diamond: the campaign's list marker, and the only fill in the block. */
.badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  background: var(--gold);
  color: var(--navy);
  font-weight: 900;
  font-size: 0.7rem;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}


.meta {
  max-width: 27rem;
  margin: 1.1rem 0 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Quiet secondary action: the diamond artwork is reserved for the one CTA. */
.linkbtn {
  margin-top: 0.4rem;
  padding: 0.9rem 1.2rem;
  border: 0;
  background: none;
  color: var(--gold);
  font: 900 0.82rem/1 var(--font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-underline-offset: 5px;
  text-decoration: underline;
  text-decoration-color: rgba(241, 196, 0, 0.45);
  cursor: pointer;
  transition: text-decoration-color .15s, color .15s;
}
.linkbtn:hover { text-decoration-color: var(--gold); }
.linkbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─── Buttons: the real CTA artwork as a 9-slice ──────────────────────── */

.start-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 28rem;
}

#player-name {
  flex: 1 1 14rem;
  min-width: 0;
  height: 3.4rem;
  padding: 0 1rem;
  background: rgba(10, 16, 36, 0.9);
  border: 0;
  border-bottom: 2px solid rgba(216, 226, 240, 0.28);
  color: var(--white);
  font: 900 0.92rem/1 var(--font);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color .15s;
}
#player-name::placeholder {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
#player-name:focus { outline: none; border-bottom-color: var(--gold); }

/* The artwork carries the diamond caps and the gold body, so the button
   itself only supplies the label. Height is fixed at the artwork's 44px so
   the caps never distort. */
.btn {
  height: 3.4rem;
  padding: 0 1.6rem;
  border: 0 solid transparent;
  border-left-width: 2rem;
  border-right-width: 2rem;
  border-image: url("../assets/brand/cta-btn.svg") 0 26 fill / 0 2rem / 0 stretch;
  background: transparent;
  color: var(--navy);
  font: 900 0.92rem/3.4rem var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.12); }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }



/* ─── Game screen ─────────────────────────────────────────────────────── */

#screen-game { justify-content: flex-start; gap: 1rem; }

.game-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}

.hud {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 33rem;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(241, 196, 0, 0.22);
  border-bottom: 1px solid rgba(241, 196, 0, 0.22);
}
.hud-cell { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.hud-cell + .hud-cell { box-shadow: inset 1px 0 0 rgba(216, 226, 240, 0.12); }
.hud-label {
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hud-value {
  color: var(--gold);
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.timerbar {
  width: 100%;
  height: 4px;
  margin-top: 0.35rem;
  background: rgba(10, 16, 36, 0.95);
  overflow: hidden;
}
.timerbar-fill {
  height: 100%;
  width: 100%;
  background: var(--gold);
  transition: width .2s linear, background .2s;
}
.timerbar-fill.is-low { background: var(--orange); }
.hud-value.is-low { color: var(--orange); }

/* ─── Stage: gold arc key visual frames the item and its recipe ───────── */

.board { display: flex; flex-direction: column; align-items: center; width: 100%; }
#screen-game .board { flex: 1; justify-content: center; }

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0;
}
/* The arc key visual is a hero ornament: it frames the tall title block on the
   start screen at its own aspect ratio. Stretching it around a wide, short
   round of play distorted it and cut through the artwork, so it lives on the
   start screen only. */
#screen-start { position: relative; }

.start-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 34rem;
}

/* The arcs frame the title and its standfirst, centred on that block.
   The artwork is not centred inside its own SVG: its ink sits 3.46% left and
   2.01% below the file's centre, so the transform cancels that out. Without it
   the arcs read as visibly off-centre against the text. */
.titleblock { position: relative; }

.titleblock::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(31rem, 118%);
  aspect-ratio: 911 / 722;
  transform: translate(calc(-50% + 3.46%), calc(-50% - 2.01%));
  background: url("../assets/brand/bg-kv.svg") center / contain no-repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}



.target { position: relative; display: flex; align-items: center; gap: 1.05rem; }

/* Legendary frame: gold hairline, warm inner light, clipped corners, halo. */
.target-icon {
  display: grid;
  place-items: center;
  width: calc(var(--slot) * 1.2);
  height: calc(var(--slot) * 1.2);
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(241, 196, 0, 0.2), transparent 70%),
    linear-gradient(160deg, rgba(29, 66, 138, 0.5), var(--panel));
  box-shadow:
    inset 0 0 0 1.5px rgba(241, 196, 0, 0.85),
    inset 0 0 22px rgba(241, 196, 0, 0.1),
    0 0 42px rgba(241, 196, 0, 0.18);
}
.target-icon img { width: 76%; height: 76%; }

.target-meta { text-align: left; }
.target-meta h2 {
  margin: 0;
  color: var(--white);
  font-weight: 900;
  font-size: 1.85rem;
  line-height: 1.08;
  text-transform: uppercase;
}
.target-gold {
  margin: 0.3rem 0 0;
  color: var(--gold);
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tree { position: relative; width: 62%; max-width: 22rem; height: 1.5rem; }
/* Width is set per round in game.js to match the component row. */
.tree-stem {
  position: absolute; left: 50%; top: 0;
  width: 1px; height: 0.8rem;
  background: linear-gradient(180deg, rgba(241, 196, 0, 0.6), rgba(216, 226, 240, 0.18));
}
.tree-bar {
  position: absolute; left: 0; right: 0; top: 0.8rem;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(241, 196, 0, 0.32) 12%, rgba(241, 196, 0, 0.32) 88%, transparent);
}

.recipe {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--slot);
  height: var(--slot);
  background: linear-gradient(160deg, rgba(29, 66, 138, 0.42), rgba(10, 16, 36, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(216, 226, 240, 0.1),
    inset 0 0 18px rgba(0, 0, 0, 0.55);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.slot img { width: 76%; height: 76%; }

/* Empty slot: gold corner brackets, the Fan Hub's panel-corner motif. */
.slot.is-empty {
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(241, 196, 0, 0.16), transparent 72%),
    linear-gradient(160deg, rgba(29, 66, 138, 0.3), rgba(10, 16, 36, 0.6));
  color: var(--gold);
  font-weight: 900;
  font-size: 1.6rem;
  clip-path: none;
  transition: background .15s, box-shadow .15s;
}
.slot.is-empty::before,
.slot.is-empty::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gold);
}
.slot.is-empty::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.slot.is-empty::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.slot.is-empty.is-over {
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(241, 196, 0, 0.38), transparent 72%),
    linear-gradient(160deg, rgba(29, 66, 138, 0.45), rgba(10, 16, 36, 0.7));
  box-shadow: 0 0 28px rgba(241, 196, 0, 0.4);
}
.slot.is-correct {
  box-shadow: inset 0 0 0 1px rgba(241, 196, 0, 0.85), 0 0 26px rgba(241, 196, 0, 0.3);
  animation: pop .32s ease;
}
.slot.is-wrong {
  box-shadow: inset 0 0 0 1px var(--orange), 0 0 24px rgba(255, 81, 23, 0.32);
  animation: shake .32s ease;
}

/* ─── Speed meter ─────────────────────────────────────────────────────── */

.speedmeter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(20rem, 74%);
  margin-top: 0.9rem;
}
.speedmeter-label {
  flex: none;
  color: var(--muted);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.speedbar { flex: 1; height: 3px; background: rgba(10, 16, 36, 0.95); overflow: hidden; }
.speedbar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(241, 196, 0, 0.3), var(--gold));
  transition: width .1s linear;
}

/* Prompt sits on the chevron-capped plate from the Fan Hub. */
.prompt {
  display: inline-block;
  height: 3rem;
  margin: 0.9rem 0 1rem;
  padding: 0 1.3rem;
  border: 0 solid transparent;
  border-left-width: 2.2rem;
  border-right-width: 2.2rem;
  border-image: url("../assets/brand/nameplate.svg") 0 40 fill / 0 2.2rem / 0 stretch;
  color: var(--body);
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Choices ─────────────────────────────────────────────────────────── */

.choices {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 8.4rem;
  padding: 1.1rem 0.6rem 1.2rem;
  background: linear-gradient(180deg, rgba(29, 66, 138, 0.42), rgba(10, 16, 36, 0.94));
  box-shadow: inset 0 1px 0 rgba(216, 226, 240, 0.1);
  cursor: grab;
  touch-action: none;
  user-select: none;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: transform .13s, background .15s, opacity .15s;
}
.choice::after {
  content: "";
  position: absolute;
  left: 0; right: 9px; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: transform .18s ease;
}
.choice:hover,
.choice:focus-visible {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(29, 66, 138, 0.62), rgba(14, 22, 46, 0.96));
  outline: none;
}
.choice:hover::after,
.choice:focus-visible::after { transform: scaleX(1); }
.choice:focus-visible { box-shadow: inset 0 0 0 1px rgba(241, 196, 0, 0.65); }
.choice.is-dragging { opacity: 0.28; cursor: grabbing; }
.choice.is-spent { opacity: 0.2; pointer-events: none; }

.choice img {
  width: calc(var(--slot) * 0.6);
  height: calc(var(--slot) * 0.6);
  background: rgba(5, 0, 25, 0.6);
  box-shadow: inset 0 0 0 1px rgba(216, 226, 240, 0.14);
  pointer-events: none;
}
.choice-name {
  width: 100%;
  color: var(--body);
  font-weight: 900;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.drag-ghost {
  position: fixed;
  z-index: 50;
  width: var(--slot);
  height: var(--slot);
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(29, 66, 138, 0.7), var(--panel));
  box-shadow:
    inset 0 0 0 1px rgba(241, 196, 0, 0.9),
    0 14px 34px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(241, 196, 0, 0.28);
  pointer-events: none;
  transform: translate(-50%, -50%);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.drag-ghost img { width: 76%; height: 76%; }

/* ─── Flash feedback ──────────────────────────────────────────────────── */

.flash {
  min-height: 3rem;
  margin-top: 0.9rem;
  font-weight: 900;
  font-size: 1.5rem;
  opacity: 0;
}
.flash.is-good { color: var(--gold); animation: rise .9s ease; opacity: 1; }
.flash.is-bad  { color: var(--orange); animation: rise .9s ease; opacity: 1; }
.flash small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── Game over ───────────────────────────────────────────────────────── */

.scorecard { width: 100%; max-width: 33rem; }

/* The ornate Fan Hub frame, scaled down from its 130px corners. */
.score-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.9rem 0.8rem;
  border: 2.4rem solid transparent;
  border-image: url("../assets/brand/panel-frame.svg") 120 fill / 2.4rem / 0 stretch;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(241, 196, 0, 0.12), transparent 72%),
    linear-gradient(170deg, rgba(29, 66, 138, 0.3), rgba(10, 16, 36, 0.92));
  background-origin: border-box;
}
.score-big span {
  color: var(--gold);
  font-weight: 900;
  font-size: 4.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(241, 196, 0, 0.35);
}
.score-big small {
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.score-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.45rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}
.score-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0.4rem 0.7rem;
  background: linear-gradient(180deg, rgba(29, 66, 138, 0.42), rgba(10, 16, 36, 0.85));
  box-shadow: inset 0 1px 0 rgba(216, 226, 240, 0.1);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.score-stats span {
  color: var(--gold);
  font-weight: 900;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.score-stats small {
  color: var(--muted);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

.rank-line {
  margin: 1.3rem 0 1.4rem;
  color: var(--body);
  font-size: 1rem;
}
.rank-line strong { color: var(--gold); font-weight: 900; }

.over-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
}
/* The quiet leaderboard link drops onto its own row under the two actions. */
.over-actions .linkbtn { flex-basis: 100%; }

/* ─── Leaderboard ─────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(3, 0, 16, 0.9);
  backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }

.modal-card {
  width: 100%;
  max-width: 27rem;
  max-height: 88vh;
  padding: 0.7rem;
  border: 2.6rem solid transparent;
  border-image: url("../assets/brand/panel-frame.svg") 120 fill / 2.6rem / 0 stretch;
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(29, 66, 138, 0.42), transparent 70%),
    linear-gradient(175deg, rgba(17, 26, 51, 0.97), rgba(10, 16, 36, 0.97));
  background-origin: border-box;
  text-align: center;
}
.modal-card h2 {
  margin: 0.25rem 0 0;
  color: var(--white);
  font-weight: 900;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.board-list {
  max-height: 40vh;
  overflow-y: auto;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  text-align: left;
}
.board-list li {
  display: grid;
  grid-template-columns: 1.8rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.4rem;
  font-size: 0.88rem;
}
.board-list li + li { border-top: 1px solid rgba(216, 226, 240, 0.1); }
.board-list .rank { color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; }
.board-list .who  { color: var(--body); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .pts  { color: var(--white); font-weight: 900; font-variant-numeric: tabular-nums; }
.board-list li.is-me {
  background: linear-gradient(90deg, rgba(241, 196, 0, 0.18), transparent);
  box-shadow: inset 3px 0 0 var(--gold);
}
.board-list .empty { display: block; color: var(--muted); text-align: center; padding: 1rem 0; }

.board-note { margin: 0 0 1rem; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.06em; }

/* ─── Footer ──────────────────────────────────────────────────────────── */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.9rem var(--gutter) 1.2rem;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(216, 226, 240, 0.35);
}
.footer a:hover { color: var(--gold); text-decoration-color: var(--gold); }
/* Items are separated by a hairline rule rather than a punctuation character. */
.footer > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.8em;
  margin-right: 0.65rem;
  vertical-align: -0.05em;
  background: currentColor;
  opacity: 0.35;
}

/* ─── Motion ──────────────────────────────────────────────────────────── */

@keyframes pop   { 0% { transform: scale(0.72); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes rise  { 0% { opacity: 0; transform: translateY(10px); } 25% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 26rem) {
  .target { flex-direction: column; gap: 0.55rem; }
  .target-meta { text-align: center; }
  .choice { width: 5.2rem; }
  .stage { padding: 0.5rem 0; }
  .score-big  { padding: 0.5rem 0.4rem; }
  .modal-card { padding: 0.4rem; }
}


/* ─── Touch input ─────────────────────────────────────────────────────────
   On a kiosk there is no hover, so any state that only appears on hover is
   invisible. The choice cards show their gold edge at rest instead, and press
   feedback replaces the hover lift.
   ---------------------------------------------------------------------- */
@media (hover: none) {
  .choice::after { transform: scaleX(1); }
  .choice:active {
    transform: translateY(-3px);
    background: linear-gradient(180deg, rgba(29, 66, 138, 0.62), rgba(14, 22, 46, 0.96));
  }
  .btn:active { filter: brightness(1.12); }
}

/* ─── Long-form document pages (contest rules) ────────────────────────── */

body.doc { min-height: 100vh; }

.doc-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 3rem;
}

.doc-body { text-align: left; }

.doc-body h1 {
  margin: 0.4rem 0 0.8rem;
  color: var(--white);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  text-transform: uppercase;
}

.doc-body h2 {
  margin: 1.9rem 0 0.5rem;
  color: var(--gold);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-body p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.65;
}
.doc-body strong { color: var(--white); font-weight: 900; }

.doc-lede {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(216, 226, 240, 0.14);
  color: var(--body);
  font-size: 1.05rem !important;
}

.doc-list {
  margin: 0 0 0.9rem;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.65;
}
.doc-list li { margin-bottom: 0.3rem; }
.doc-list li::marker { color: var(--gold); font-weight: 900; }


.doc-back { margin-top: 2rem; }
.doc-back a {
  color: var(--gold);
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 4px;
}