@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   عالم صلصال — اختبر معلوماتك وذكائك
   Portrait-first, RTL, no framework, no build step.

   Layout strategy
   ───────────────
   The two boards are the load-bearing elements. Each is locked to the exact
   aspect ratio of its artwork and placed in a flexible slot:

       .board-slot { flex: 1; }          ← hands the board whatever height is left
       .board      { height: 100%; width: auto; max-width: 100%; aspect-ratio: … }

   So on a tall phone the board is height-limited, on a narrow one it is
   width-limited, and the artwork never stretches either way. Everything inside
   a board is sized in `cqw` (1% of that board's width) via a size container, so
   the whole composition scales as one piece from a 320 px phone upward with no
   breakpoints and no scrollbars.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────── fonts ── */
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/baloo-ar.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/baloo-la.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/tajawal-400-ar.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/tajawal-400-la.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/tajawal-700-ar.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/tajawal-700-la.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../assets/fonts/tajawal-800-ar.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../assets/fonts/tajawal-800-la.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}

/* ────────────────────────────────────────────────────────── tokens ── */
:root {
  --red:        #E8202A;
  --red-deep:   #A8121A;
  --yellow:     #FFC709;
  --yellow-deep:#E0A800;
  --green:      #5BB947;
  --green-deep: #3B8A2C;
  --cream:      #F7EFDC;
  --orange:     #F2650A;
  --ink:        #2C2A26;
  --white:      #FFFFFF;

  --card-ar:    1.4316;   /* every card image is exactly this wide ÷ tall */
  --board-t-ar: 1.0943;   /* assets/img/ui/board-top.webp    (952 × 870)  */
  --board-b-ar: 1.0949;   /* assets/img/ui/board-bottom.webp (958 × 875)  */

  --t-flip:  480ms;
  --t-pop:   700ms;
  --t-shake: 520ms;
  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft:     cubic-bezier(.22, .61, .36, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --font-display: 'Baloo Bhaijaan 2', 'Tajawal', system-ui, sans-serif;
  --font-ui: 'Tajawal', system-ui, 'Segoe UI', sans-serif;
}

/* ───────────────────────────────────────────────────────────── base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;                 /* the game must never scroll */
  overscroll-behavior: none;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--yellow);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; cursor: pointer; }

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

:where(button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────── screens ── */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.screen.is-active { display: flex; }
.screen[hidden] { display: none; }

.screen--loading { background: var(--red); align-items: center; justify-content: center; }
.screen--start   { background-image: url('../assets/img/bg/cover.webp'); background-color: var(--red); }
.screen--end     { background-image: url('../assets/img/bg/red.webp');   background-color: var(--red); }

.screen--game { background-color: var(--yellow); transition: background-color .5s ease; }
.screen--game[data-bg='yellow'] { background-image: url('../assets/img/bg/yellow.webp'); }
.screen--game[data-bg='green']  { background-image: url('../assets/img/bg/green.webp');  background-color: var(--green); }
.screen--game[data-bg='red']    { background-image: url('../assets/img/bg/red.webp');    background-color: var(--red); }

/* fade between screens */
.screen.is-entering { animation: screenIn .45s var(--ease-soft) both; }
@keyframes screenIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────────────── loader ── */
.loader { text-align: center; padding: 2rem; width: min(340px, 82vw); }
.loader__logo { width: min(230px, 56vw); height: auto; margin: 0 auto 2rem; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }

.loader__track {
  height: 14px; border-radius: 99px; overflow: hidden;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
}
.loader__fill {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--yellow), #FFE47A);
  transition: width .25s var(--ease-soft);
}
.loader__pct  { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--white); margin: .7rem 0 0; }
.loader__hint { font-size: .95rem; color: rgba(255, 255, 255, .8); margin: .1rem 0 0; }

/* ═══════════════════════════════════════════════════════ start screen ══ */
.screen--start {
  padding: calc(var(--safe-t) + .6rem) calc(var(--safe-r) + .8rem)
           calc(var(--safe-b) + .6rem) calc(var(--safe-l) + .8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* the sound button is the only live control up here; push it to the left edge so
   it clears the logo that bg/cover.webp already paints on the right */
.start__top { display: flex; align-items: flex-start; flex: 0 0 auto; min-height: 2.6rem; }
.start__top .icon-btn { margin-inline-start: auto; }

/* The cover artwork puts the three boys in the lower ~45% of the frame, so the
   form is anchored to the top rather than centred — otherwise it sits on their
   faces. Element widths follow the supplied mockup, where the beans span only
   about half the canvas; sizing them at ~96% buried the illustration. */
.start__body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.3rem, 1.1vh, .7rem);
  width: min(400px, 100%);
  margin-inline: auto;
  padding-block: clamp(.2rem, 1vh, .7rem) 0;
}

.start__title { width: 38%; min-width: 128px; height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28)); animation: titleIn .8s var(--ease-out-back) both; }
@keyframes titleIn { from { opacity: 0; transform: scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }

.start__intro { width: 72%; min-width: 230px; height: auto; }

.start__form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(.1rem, .5vh, .3rem); }

/* the bean artwork is the field background; a bare input sits on its dark inset */
.field { position: relative; width: 58%; min-width: 208px; line-height: 0; animation: beanIn .6s var(--ease-out-back) both; }
.field--name  { animation-delay: .10s; }
.field--phone { animation-delay: .18s; }
@keyframes beanIn { from { opacity: 0; transform: translateX(28px) scale(.92); } to { opacity: 1; transform: none; } }

.field__bg { width: 100%; height: auto; }

.field__input {
  position: absolute;
  background: none;
  border: 0;
  padding: 0 3%;
  margin: 0;
  width: auto;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(.72rem, 3.2vw, .95rem);
  line-height: 1.1;
  color: var(--white);
  text-align: right;
  direction: rtl;
}
.field__input::placeholder { color: rgba(255, 255, 255, .45); font-weight: 400; }
.field__input:focus { outline: none; }
.field__input:focus-visible { outline: 2px dashed rgba(255, 255, 255, .8); outline-offset: 2px; border-radius: 99px; }

/* Measured off the artwork (tools/build-assets.py exports these unchanged):
   the recessed pill on each bean sits at a different height, because the two
   beans are drawn at different angles. Centring the caret on the pill needs
   per-bean values — sharing one rule left the name text riding high. */
.field--name  .field__input { inset-inline-start: 40%; inset-inline-end: 11%; top: 38.3%; height: 34%; }
.field--phone .field__input { inset-inline-start: 42%; inset-inline-end: 10%; top: 32.3%; height: 34%; }

.field.is-invalid .field__bg { animation: shake var(--t-shake) both; }
.field__error {
  margin: 0; min-height: .95em; font-size: .74rem; font-weight: 700;
  color: #FFE99A; text-align: center; width: 80%;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.start__play { background: none; border: 0; padding: 0; width: 38%; min-width: 136px; animation: beanIn .6s var(--ease-out-back) .26s both; }
.start__play img { width: 100%; height: auto; transition: transform .18s var(--ease-out-back); }
.start__play:hover img { transform: scale(1.05) rotate(-1.5deg); }
.start__play:active img { transform: scale(.95); }
.start__play[disabled] { opacity: .6; pointer-events: none; }

/* ══════════════════════════════════════════════════════════ game HUD ══ */
.screen--game {
  padding: calc(var(--safe-t) + .35rem) calc(var(--safe-r) + .5rem)
           calc(var(--safe-b) + .25rem) calc(var(--safe-l) + .5rem);
  gap: .25rem;
}

.hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: .4rem;
}
.hud__side { display: flex; gap: .35rem; align-items: flex-start; }
.hud__side--end { justify-content: flex-end; }
.hud__brand { width: clamp(62px, 17vw, 96px); height: auto; }

.icon-btn {
  background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: transform .16s var(--ease-out-back);
}
.icon-btn img { width: clamp(34px, 9.5vw, 48px); height: auto; }
.icon-btn:active { transform: scale(.88); }
.icon-btn[aria-pressed='true'] img { filter: grayscale(.85) opacity(.55); }
/* btn-help.webp carries its own "تعليمات" caption, so it is a touch taller */
.icon-btn--labelled img { width: clamp(38px, 10.5vw, 53px); }

.hud__center { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding-top: 2px; }

.round-pill, .score-pill {
  margin: 0;
  display: inline-flex; align-items: center; gap: .38em;
  padding: .18em .8em;
  border-radius: 99px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.66rem, 3vw, .88rem);
  white-space: nowrap;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.round-pill i { width: 4px; height: 4px; border-radius: 99px; background: var(--orange); }
.score-pill { background: rgba(0, 0, 0, .22); color: var(--white); font-size: clamp(.6rem, 2.7vw, .8rem); }
.score-pill b { font-size: 1.15em; }
.score-pill.is-bumping { animation: scoreBump .45s var(--ease-out-back); }
@keyframes scoreBump { 50% { transform: scale(1.22); background: var(--green); } }

/* ═════════════════════════════════════════════════════════════ stage ══ */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(.2rem, .9vh, .55rem);
}

.board-slot {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;             /* lets the board read the slot's height */
  container-name: slot;
}

/* Fit a fixed-ratio box inside the slot honouring BOTH axes.
   `height:100% + aspect-ratio + max-width` is not enough: once max-width clamps
   the width the height stays definite and the artwork stretches. Deriving the
   width from min(slot width, slot height × ratio) is exact in both directions.
   96.5cqw, not 100cqw: the countdown badge hangs 2.5cqw past the board's start
   edge and swells another 9 % during the is-danger pulse, so a board that filled
   the slot would shove the ring off the side of the screen on a tall phone
   (375 × 812 and up), where html{overflow:hidden} shears it away. */
.board {
  position: relative;
  width: min(96.5cqw, 100cqh * var(--ar));
  height: auto;
  aspect-ratio: var(--ar);
  container-type: size;             /* everything inside is sized in cqw */
  container-name: board;
}
.board--top    { --ar: var(--board-t-ar); }
.board--bottom { --ar: var(--board-b-ar); }

.board__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* captions */
.board__caption--pick {
  position: absolute;
  top: 9.5cqw; left: 50%; transform: translateX(-50%);
  width: 34cqw; height: auto;
  z-index: 2;
}
.board__caption--match {
  position: absolute;
  bottom: 10.5cqw; left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 6.4cqw;
  color: var(--ink);
  z-index: 2;
}

/* ══ grids ══ */
.grid {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6cqw;
  z-index: 2;
}
.grid--top    { inset-inline: 6cqw;   top: 20cqw; }
.grid--bottom { inset-inline: 5.5cqw; top: 6.5cqw; }

/* ══ cards ══ */
.card {
  position: relative;
  aspect-ratio: var(--card-ar);
  background: none;
  border: 0;
  padding: 0;
  perspective: 900px;
  animation: dealIn .42s var(--ease-out-back) both;
  animation-delay: var(--d, 0ms);
}
@keyframes dealIn {
  from { opacity: 0; transform: translateY(14px) scale(.82); }
  to   { opacity: 1; transform: none; }
}

.card__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--t-flip) var(--ease-soft);
  border-radius: 9%/13%;
}
.card__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 9%/13%;
  overflow: hidden;
}
.card__face img { width: 100%; height: 100%; object-fit: contain; }
.card__face--front { transform: rotateY(180deg); }

.card.is-flipped .card__inner { transform: rotateY(180deg); }

/* a face-down card that can still be picked */
.card--top:not(.is-flipped):not(.is-done) .card__inner { transition: transform var(--t-flip) var(--ease-soft), scale .16s; }
.card--top:not(.is-flipped):not(.is-done):hover .card__inner { scale: 1.05; }
.card--top:not(.is-flipped):not(.is-done):active .card__inner { scale: .95; }

.card--bottom:not(.is-done):hover .card__inner { transform: translateY(-4px) scale(1.04); }
.card--bottom:not(.is-done):active .card__inner { transform: scale(.94); }

/* states */
.card.is-done { pointer-events: none; }
.card.is-done .card__inner { opacity: .38; filter: saturate(.35); transform: scale(.9) rotateY(var(--done-rot, 0deg)); }
.card--top.is-done .card__inner { --done-rot: 180deg; }

.card.is-correct .card__face--front,
.card--bottom.is-correct .card__face { box-shadow: 0 0 0 .8cqw var(--green), 0 0 5cqw rgba(91, 185, 71, .9); }
.card.is-correct { animation: pop var(--t-pop) var(--ease-out-back); z-index: 5; }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }

.card.is-wrong .card__face { box-shadow: 0 0 0 .8cqw var(--red), 0 0 4cqw rgba(232, 32, 42, .8); }
.card.is-wrong { animation: shake var(--t-shake); z-index: 5; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7%) rotate(-2.5deg); }
  30% { transform: translateX(6%) rotate(2deg); }
  45% { transform: translateX(-5%) rotate(-1.5deg); }
  60% { transform: translateX(4%) rotate(1deg); }
  80% { transform: translateX(-2%); }
}

/* gently nudge the player toward the answer board once a clue is up */
.grid--bottom.is-armed .card:not(.is-done) { animation: armGlow 2.2s ease-in-out infinite; }
@keyframes armGlow { 0%, 100% { filter: none; } 50% { filter: brightness(1.06); } }

/* ══ timer ══ */
.timer {
  position: absolute;
  top: -2cqw;
  inset-inline-start: -1cqw;        /* RTL start = right edge, as in the mockup */
  width: 21cqw;
  aspect-ratio: 1;
  z-index: 6;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3));
}
.timer__badge { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.timer__ring  { position: absolute; inset: -1.5cqw; width: calc(100% + 3cqw); height: calc(100% + 3cqw); transform: rotate(-90deg); }
.timer__ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.timer__ring-bg { stroke: rgba(255, 255, 255, .55); }
.timer__ring-fg {
  stroke: var(--green);
  stroke-dasharray: 282.74;         /* 2πr, r = 45 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .12s linear, stroke .3s;
}
.timer__num {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 800;
  font-size: 8.6cqw; line-height: 1; color: var(--white);
  transform: translateY(-.5cqw);
}
.timer__unit {
  position: absolute; bottom: 4.4cqw; left: 0; right: 0;
  text-align: center; font-size: 3.3cqw; font-weight: 700; color: var(--white);
}
.timer.is-warn   .timer__ring-fg { stroke: var(--yellow); }
.timer.is-danger .timer__ring-fg { stroke: #FF3B30; }
.timer.is-danger { animation: timerPulse .7s ease-in-out infinite; }
@keyframes timerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.timer.is-idle { opacity: .55; }

/* ══════════════════════════════════════════ no container queries (legacy) ══ */
/* Chrome < 105, Safari < 16 and Firefox < 110 know neither `container-type` nor
   `cq*` lengths. There `.board`'s `width: min(100cqw, 100cqh * var(--ar))` holds
   a var(), so it survives parsing and dies at computed-value time — it falls
   back to `width: auto`, and because every child of the board is absolutely
   positioned that is a 0 × 0 box. The result is a game screen with the HUD and
   hearts but no boards, no cards and no timer, and no error anywhere. Safari 16
   needs iOS 16, so this is terminal for the iPhone 6s/7/SE1 and iPad Air 2.

   Fall back to the height-driven strategy described at the top of this file and
   restate every `Ncqw` as its exact percentage twin: the board is `position:
   relative` with a known `--ar`, so horizontal lengths are `N%` of its width and
   vertical ones `calc(N% * var(--ar))` of its height. Only the three cq font
   sizes have no percentage equivalent; they reuse the vw clamps used elsewhere.
   Verified identical to the container-query layout at 320 × 568, 375 × 812 and
   430 × 932 — every card lands on the same pixel. The one concession is the note
   at the top of the file: a slot taller than `--ar` (a very narrow, very tall
   window — no phone or tablet in the affected set) stretches the artwork. */
@supports not (container-type: size) {
  .board { width: auto; height: 100%; max-width: 100%; }

  .board__caption--pick  { top: calc(9.5% * var(--ar)); width: 34%; }
  .board__caption--match { bottom: calc(10.5% * var(--ar)); font-size: clamp(.9rem, 5.6vw, 1.85rem); }

  /* The grid is always 3 × 3 (CONFIG.gridCols / gridRows). Giving it a definite
     height is what lets the percentage row-gap resolve — against `auto` it
     collapses to 0 and the three rows sit flush. */
  .grid--top    { inset-inline: 6%;   top: calc(20% * var(--ar));
                  height: calc(63.03% * var(--ar)); column-gap: 2.955%; row-gap: 4.125%; }
  .grid--bottom { inset-inline: 5.5%; top: calc(6.5% * var(--ar));
                  height: calc(63.73% * var(--ar)); column-gap: 2.921%; row-gap: 4.08%; }

  .timer       { top: calc(-2% * var(--ar)); inset-inline-start: -1%; width: 21%; }
  .timer__ring { inset: -7.14%; width: 114.29%; height: 114.29%; }
  .timer__num  { font-size: clamp(1.15rem, 7.5vw, 2.5rem); transform: translateY(-.058em); }
  .timer__unit { bottom: 20.95%; font-size: clamp(.45rem, 2.9vw, .95rem); }

  .card.is-correct .card__face--front,
  .card--bottom.is-correct .card__face { box-shadow: 0 0 0 3px var(--green), 0 0 18px rgba(91, 185, 71, .9); }
  .card.is-wrong .card__face           { box-shadow: 0 0 0 3px var(--red), 0 0 15px rgba(232, 32, 42, .8); }
}

/* ═════════════════════════════════════════════════════════════ hearts ══ */
.hearts {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding-block: .1rem .15rem;
}
.hearts__wrap { position: relative; width: clamp(140px, 40vw, 190px); }
.hearts__art { width: 100%; height: auto; }

/* the green pill's interior, measured off hearts-bar.webp (420 × 214) */
.hearts__slots {
  position: absolute;
  left: 8.6%; right: 8.6%;
  top: 8.9%; height: 51.4%;
  display: flex; align-items: center; justify-content: center;
  gap: 5%;
}
.hearts__slots .heart {
  width: 20%; height: auto;
  transform-origin: center;
  transition: opacity .3s;
}
.hearts__slots .heart.is-lost { animation: heartLoss .6s var(--ease-out-back) forwards; }
@keyframes heartLoss {
  0%   { transform: scale(1); opacity: 1; }
  35%  { transform: scale(1.45); opacity: 1; filter: brightness(.75) sepia(1) hue-rotate(-40deg) saturate(4); }
  100% { transform: scale(.3) translateY(-18px) rotate(25deg); opacity: .16; }
}
.hearts__slots.is-empty { animation: shake .5s; }

/* ═════════════════════════════════════════════════ round transition ══ */
.round-card {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn .3s both;
}
.round-card[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.round-card.is-leaving { animation: fadeOut .35s both; }
@keyframes fadeOut { to { opacity: 0; } }

.round-card__inner {
  text-align: center; color: var(--white);
  padding: 2rem 2.6rem;
  animation: rcIn .6s var(--ease-out-back) both;
}
@keyframes rcIn { from { opacity: 0; transform: scale(.6) rotate(-5deg); } to { opacity: 1; transform: none; } }
.round-card__kicker { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: .04em; color: var(--yellow); }
.round-card__title  { margin: .15em 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 11vw, 3.4rem); line-height: 1.15; text-shadow: 0 5px 0 rgba(0, 0, 0, .25); }
.round-card__sub    { margin: .35em 0 0; font-size: clamp(.9rem, 4vw, 1.1rem); opacity: .92; }
.round-card__timer  { margin: 1.1em 0 0; font-weight: 700; font-size: .95rem; color: var(--yellow); }

.round-card--fail .round-card__title { color: #FFD5D5; }
.round-card--win  .round-card__title { color: var(--yellow); }

/* ════════════════════════════════════════════════════════════ modal ══ */
.modal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 1.2rem;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn .25s both;
}
.modal[hidden] { display: none; }
.modal__box {
  width: min(430px, 100%);
  max-height: 86dvh; overflow-y: auto;
  background: var(--cream);
  border: 4px solid var(--yellow);
  border-radius: 26px;
  padding: 1.5rem 1.4rem 1.2rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
  animation: rcIn .45s var(--ease-out-back) both;
}
.modal__title { margin: 0 0 .7em; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--red); text-align: center; }
.modal__list { margin: 0; padding-inline-start: 1.25em; display: grid; gap: .55em; font-size: .95rem; line-height: 1.55; }
.modal__list li::marker { color: var(--orange); font-weight: 700; }
.modal__close {
  margin: 1.3rem auto 0; display: block;
  background: var(--green); color: var(--white);
  border: 3px solid var(--white); border-radius: 99px;
  padding: .55em 1.9em;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--green-deep);
  transition: transform .15s;
}
.modal__close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-deep); }

/* ══════════════════════════════════════════════════════════════ end ══ */
.screen--end {
  padding: calc(var(--safe-t) + 1rem) calc(var(--safe-r) + 1rem)
           calc(var(--safe-b) + 1rem) calc(var(--safe-l) + 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* sits above the confetti canvas (z-index 55) so falling paper never makes the
   score or the leaderboard unreadable */
.end__panel {
  position: relative;
  z-index: 56;
  margin: auto;
  width: min(430px, 100%);
  text-align: center;
  color: var(--white);
  animation: rcIn .7s var(--ease-out-back) both;
}
.end__brand { width: 128px; height: auto; margin: 0 auto .6rem; }
.end__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 7.5vw, 2.2rem); text-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
.end__name  { margin: .25em 0 0; font-size: 1rem; opacity: .9; }

.end__score { margin: .7rem 0 .2rem; display: flex; align-items: baseline; justify-content: center; gap: .3em; }
.end__score-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 17vw, 4.6rem); line-height: 1; color: var(--yellow); text-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.end__score-cap { font-weight: 700; font-size: 1.05rem; }

.end__stats {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem;
}
.end__stats li {
  background: rgba(0, 0, 0, .24); border-radius: 14px; padding: .5rem .2rem;
  display: flex; flex-direction: column; gap: 1px;
}
.end__stats b    { font-family: var(--font-display); font-size: clamp(.85rem, 4vw, 1.1rem); }
.end__stats span { font-size: .66rem; opacity: .82; }

.end__note {
  margin: .9rem 0 0;
  font-size: .82rem; font-weight: 700; line-height: 1.5;
  color: #FFE99A;
  background: rgba(0, 0, 0, .22);
  border-radius: 12px;
  padding: .5rem .8rem;
}
.end__note[hidden] { display: none; }

.board-lb { margin-top: 1.1rem; background: rgba(0, 0, 0, .24); border-radius: 20px; padding: .9rem 1rem 1rem; }
.board-lb[hidden] { display: none; }
.board-lb__title { margin: 0 0 .55em; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--yellow); }
.board-lb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; counter-reset: lb; }
.board-lb__list li {
  counter-increment: lb;
  display: grid; grid-template-columns: 1.7em 1fr auto; align-items: center; gap: .5em;
  background: rgba(255, 255, 255, .1); border-radius: 11px; padding: .4em .7em;
  font-size: .9rem;
}
.board-lb__list li::before {
  content: counter(lb); font-family: var(--font-display); font-weight: 800; color: var(--yellow);
}
.board-lb__list li:nth-child(1) { background: rgba(255, 199, 9, .3); }
.board-lb__list li b { font-weight: 700; text-align: start; }
.board-lb__list li span { font-family: var(--font-display); font-weight: 800; }
.board-lb__list li.is-you { outline: 2px solid var(--yellow); }

.btn-bean { position: relative; background: none; border: 0; padding: 0; margin: .9rem auto 0; width: 168px; display: block; }
.btn-bean img { width: 100%; height: auto; transition: transform .18s var(--ease-out-back); }
.btn-bean:hover img { transform: scale(1.05) rotate(-1.5deg); }
.btn-bean:active img { transform: scale(.94); }
.end__replay-hint {
  margin: -.15rem 0 0;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  color: var(--white); opacity: .9;
}

/* ═════════════════════════════════════════════════════════ confetti ══ */
.confetti { position: fixed; inset: 0; z-index: 55; pointer-events: none; width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════ rotate hint ══ */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 540px) {
  .rotate-hint {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center;
    background: var(--red);
    color: var(--white); text-align: center; padding: 2rem;
  }
  .rotate-hint__icon { font-size: 3.4rem; display: block; animation: rotateNudge 2s ease-in-out infinite; }
  @keyframes rotateNudge { 0%, 100% { transform: rotate(-90deg); } 50% { transform: rotate(0deg); } }
  .rotate-hint p { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 1.6rem 0 0; }
}

/* ═══════════════════════════════════════════════════ short screens ══ */
/* claw back vertical room on small phones so the boards stay generous */
@media (max-height: 700px) {
  .hud__brand { width: clamp(54px, 14vw, 74px); }
  .score-pill { display: none; }
  .hearts__wrap { width: clamp(120px, 34vw, 158px); }
}
@media (max-height: 600px) {
  .round-pill { font-size: .62rem; padding: .12em .6em; }
  .icon-btn img,
  .icon-btn--labelled img { width: 32px; }
}

/* ════════════════════════════════════════════════ reduced motion ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card__inner { transition: none; }
  .confetti { display: none; }
}