/* ==========================================================================
   ACT 2. oyna. Beat: gerilim, resolving to zafer or to yeniden.
   A real round, playable in the page: five anchor cards face up on a timeline,
   one mystery card whose face is a live QR, six drop slots between them, and
   the two special cards of the box set down to either side of it.
   Flow section. No pin, no pan, no scrub.

   Every card here is the same object: a square of stock at four sizes.
   Namespace: .game-*  /  #game-*
   ========================================================================== */

.game {
  /* One shape, four sizes. Each size tracks the shorter of the two viewport
     axes, so the act can sit inside a single screen at 1440x900 and at 390x844
     without the row overflowing or the stock going unreadable. The plain-vw
     declaration is the floor for a browser without svh. */
  --game-card-ar: 1;

  --game-my-w:   clamp(7.5rem, 12vw, 11.5rem);
  --game-my-w:   clamp(7.5rem, min(12vw, 20svh), 11.5rem);
  --game-pc-w:   clamp(5.5rem, 9vw, 8.6rem);
  --game-pc-w:   clamp(5.5rem, min(9vw, 15svh), 8.6rem);
  --game-card-w: clamp(6.5rem, 8.6vw, 9.5rem);
  --game-card-w: clamp(6.5rem, min(8.6vw, 14.4svh), 9.5rem);
  --game-slot-w: clamp(2.75rem, 3vw, 3.4rem);

  /* how far the row parts to make room for the card. Transform only. */
  --game-open-max: clamp(0.9rem, 1.8vw, 1.75rem);

  --game-ink:      var(--sc-ink);
  --game-ink-soft: var(--sc-ink-soft);

  /* The act is one screen: the exhibit is centred in the frame rather than
     hung off the top of a section that runs past the fold. min-block-size,
     not block-size, so a short window lets it grow instead of clipping. */
  display: grid;
  align-content: center;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding-block: clamp(3.2rem, 7vh, 6rem) clamp(2.6rem, 6vh, 5rem);
  scroll-margin-block-start: 4.5rem;
}

.game-wrap {
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 4vh, 3rem);
}

/* ----------------------------------------------------------------- head -- */

.game-head { max-inline-size: 46rem; justify-items: center; text-align: center; }
.game-title {
  color: var(--sc-ink);
  /* the display floor is tuned for a tall window; a 900px one needs a rung down
     or the heading alone eats a fifth of the act */
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  font-size: clamp(2.1rem, min(5.2vw, 7.4svh), 4.2rem);
}
.game-lede {
  color: color-mix(in oklab, var(--sc-ink) 84%, var(--sc-canvas));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- board -- */

.game-board {
  position: relative;              /* the confetti canvas is pinned to this box */
  display: grid;
  gap: clamp(0.9rem, 2.2vh, 1.9rem);
  justify-items: center;
  inline-size: 100%;
}

/* --- confetti ------------------------------------------------------------
   Hand rolled, one canvas, no library. It is only painted while a correct
   verdict settles; the rest of the time it holds nothing and costs nothing.
   Under reduced motion the script never starts it, and the gold outline plus
   the verdict line carry the result on their own. */
.game-confetti {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 30;
  pointer-events: none;
}

/* ============================================================ the deck ==== */

/* Centred in the frame: the card you are holding is the middle of the act,
   not a column of copy with a picture beside it. */
.game-deck {
  display: grid;
  justify-items: center;
  gap: clamp(0.55rem, 1.4vh, 1rem);
  inline-size: 100%;
}

/* The hand: challenge to the left of the song, joker to the right, exactly
   where they sit on a table when you are holding all three. */
.game-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.7vw, 1.4rem);
  inline-size: 100%;
}

/* The slot keeps its box while the card is in flight or already on the row,
   so nothing beside it jumps. */
.game-deck__slot {
  position: relative;
  flex: 0 0 auto;
  inline-size: var(--game-my-w);
  aspect-ratio: var(--game-card-ar);
}
.game-deck__slot::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px dashed var(--tt-line);
  border-radius: 4px;
  opacity: 0;
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.game-deck__slot[data-empty="true"]::before { opacity: 1; }

/* --- challenge and joker -------------------------------------------------- */
/* Same stock, same marks and the same two rules as the kurallar act prints.
   Angles are variables so a breakpoint can soften them without restating the
   transform, and so hover and the spent state can ride the same declaration. */

.game-pc {
  --game-pc-rot: 0deg;
  --game-pc-lift: 0px;
  flex: 0 0 auto;
  inline-size: var(--game-pc-w);
  aspect-ratio: var(--game-card-ar);
  padding: clamp(0.45rem, 0.85vw, 0.8rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.25rem;
  text-align: start;
  border: 0;
  font: inherit;
  color: var(--tt-paper-ink);
  transform: rotate(var(--game-pc-rot)) translateY(var(--game-pc-lift));
  transition: transform 180ms var(--sc-ease-out), opacity 200ms linear,
              box-shadow 180ms var(--sc-ease-out);
}
/* lift the print above .tt-card's raking-light sheen, or the small rule text
   falls to 2.6:1 in the bright corner */
.game-pc > * { position: relative; z-index: 1; }

.game-pc--ch { --game-pc-rot: -3.5deg; }
.game-pc--jk { --game-pc-rot: 3deg; }

.game-pc__mark {
  color: var(--tt-accent-deep);   /* 5.39:1 on the stock */
  inline-size: clamp(1.05rem, 1.9vw, 1.65rem);
  block-size: auto;
  display: block;
  align-self: start;
}
.game-pc__name {
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 800, "wdth" 94;
  font-size: clamp(0.72rem, 1vw, 0.95rem);
  letter-spacing: -0.01em;
  line-height: 1;
  align-self: end;
  margin: 0;
}
.game-pc__rule {
  font-family: var(--sc-font-text);
  font-size: clamp(0.6rem, 0.74vw, 0.76rem);
  line-height: 1.34;
  color: var(--tt-paper-soft);    /* 5.13:1 on the stock */
  margin: 0;
  text-wrap: pretty;
}

/* the joker is the one of the two you can actually play here */
.game-joker {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .game-joker:hover:not(:disabled) { --game-pc-lift: -5px; --game-pc-rot: 1.5deg; }
}
.game-joker:active:not(:disabled) { --game-pc-lift: 1px; }
.game-joker:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.game-joker:disabled { cursor: default; }

/* spent: the card is played out of the hand, not greyed out like a dead
   control. It lifts, turns, and stays turned until the next round deals. */
.game-joker.is-spent { --game-pc-rot: 9deg; --game-pc-lift: -6px; opacity: 0.4; }

/* --- the mystery card ---------------------------------------------------- */

.game-mystery {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 0.55rem 0.58rem 0.48rem;
  border: 0;
  font: inherit;
  text-align: start;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--sc-d-base) var(--sc-ease-out),
              opacity var(--sc-d-fast) linear,
              box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.game-mystery:active { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
  .game-mystery:hover { transform: translate3d(0, -3px, 0); }
}
.game-mystery:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.game-mystery[aria-disabled="true"] { cursor: default; }

/* in flight: fixed to the viewport, driven by transform only. */
.game-mystery.is-flying {
  position: fixed;
  inset: auto;
  margin: 0;
  transform-origin: 0 0;
  z-index: 40;
  cursor: grabbing;
  transition: none;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.5) inset,
    0 26px 60px -18px hsl(var(--sc-shadow-color) / 0.95);
}
.game-mystery.is-landing {
  transition: transform 380ms var(--sc-ease-out);
}
.game-mystery.is-gone { opacity: 0; pointer-events: none; }

/* the miss: a red edge on the card you got wrong, and one short shake.
   The edge outlives the shake, so the verdict is still legible once it is
   still again. `translate` rather than `transform`, because the card's own
   transform is the drag and the hover lift. */
.game-mystery.is-wrong {
  box-shadow:
    0 0 0 2px var(--sc-accent),
    0 1px 2px hsl(var(--sc-shadow-color) / 0.5),
    0 18px 40px -22px hsl(var(--sc-shadow-color) / 0.95);
  animation: game-shake 460ms var(--sc-ease-out) both;
}
@keyframes game-shake {
  0%, 100% { translate: 0 0; }
  12%  { translate: -8px 0; }
  28%  { translate:  7px 0; }
  44%  { translate: -5px 0; }
  60%  { translate:  4px 0; }
  76%  { translate: -2px 0; }
  88%  { translate:  1px 0; }
}

/* The printed face. It fills whatever the square leaves under the footer, so
   the QR is always the largest thing on the card. No album art here, ever:
   the whole point of the sixth card is that you do not know what it is. */
.game-mystery__face {
  position: relative;
  z-index: 1;             /* above the card's raking light: the QR must stay scannable */
  flex: 1 1 auto;
  min-block-size: 0;
  inline-size: 100%;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--tt-paper) 88%, #fff);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tt-paper-ink) 12%, transparent);
  overflow: hidden;
}

.game-qr {
  position: absolute;
  inset: 6%;
  display: grid;
  place-items: center;
  transition: opacity 200ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.game-qr svg { inline-size: 100%; block-size: 100%; }
.game-qr__alt {
  font-family: var(--sc-font-text);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--tt-paper-soft);
  text-align: center;
  padding: 0.4rem;
}

/* --- the level indicator ------------------------------------------------- */

.game-meter {
  position: absolute;
  inset: 12% 8%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 220ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.game-meter__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 68%;
}
.game-meter__bar {
  flex: 1 1 0;
  min-inline-size: 0;
  block-size: 100%;
  background: var(--tt-paper-ink);
  border-radius: 1px;
  transform: scaleY(0.07);
  transform-origin: 50% 100%;
  will-change: transform;
}
.game-meter__track {
  position: relative;
  block-size: 2px;
  background: color-mix(in oklab, var(--tt-paper-ink) 18%, transparent);
  overflow: hidden;
}
.game-meter__t {
  position: absolute; inset: 0;
  background: var(--tt-accent-deep);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* while a track is playing the QR face steps back and the level takes over */
.game-board[data-audio="playing"] .game-qr { opacity: 0; transform: scale(0.97); }
.game-board[data-audio="playing"] .game-meter { opacity: 1; transform: none; }

/* The footer of the card: the mark on one side, the year slot on the other,
   holding a question mark instead of a number. */
.game-mystery__foot {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.game-mystery__mark {
  color: var(--tt-paper-soft);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  line-height: 1.1;
}
.game-year--q .tt-num {
  display: block;
  font-variation-settings: "wght" 820, "wdth" 76;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 0.9;
  color: color-mix(in oklab, var(--tt-paper-ink) 40%, var(--tt-paper));
}

/* --- the copy under the hand ---------------------------------------------- */

.game-deck__aside {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  text-align: center;
}

.game-note {
  font-family: var(--sc-font-text);
  font-size: clamp(0.86rem, 0.98vw, 0.98rem);
  line-height: 1.5;
  max-inline-size: 52ch;
  color: color-mix(in oklab, var(--sc-ink) 78%, var(--sc-canvas));
  margin: 0;
}

.game-controls { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }

.game-play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-block-size: 2.75rem;
  padding: 0.6rem 1.05rem 0.6rem 0.85rem;
  background: transparent;
  color: var(--sc-ink);
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--tt-line-strong);
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 640, "wdth" 100;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms linear,
              background-color 140ms linear, color 140ms linear;
}
.game-play__ico { inline-size: 1.15rem; block-size: 1.15rem; flex: 0 0 auto; }
.game-play__pause { display: none; }
.game-board[data-audio="playing"] .game-play__tri { display: none; }
.game-board[data-audio="playing"] .game-play__pause { display: block; }
.game-board[data-audio="playing"] .game-play {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  box-shadow: inset 0 0 0 1px var(--sc-accent);
}
@media (hover: hover) and (pointer: fine) {
  .game-play:hover { box-shadow: inset 0 0 0 1px var(--sc-accent); transform: translateY(-1px); }
  .game-board[data-audio="playing"] .game-play:hover {
    background: color-mix(in oklab, var(--sc-accent) 88%, #fff);
  }
}
.game-play:active { transform: translateY(1px); }
.game-play:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.game-play[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.game-play[aria-disabled="true"]:active { transform: none; }

.game-hint,
.game-alt {
  font-family: var(--sc-font-text);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--sc-ink-soft);
  max-inline-size: 52ch;
  margin: 0;
}
.game-alt { color: color-mix(in oklab, var(--sc-accent) 62%, var(--sc-ink)); }

/* ======================================================== the timeline ==== */

/* Full bleed scroll region at every width. Six square cards do not fit a phone
   and the row must stay reachable rather than clip: a native overflow-x region
   is the sanctioned fallback, and it is the same code path the desktop row
   already used when a sixth card widened it. The block padding is headroom for
   the answer marker and the card shadows. */
.game-tlwrap {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: clamp(1.2rem, 3vh, 2.4rem) var(--sc-gutter) clamp(0.9rem, 2vh, 1.6rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.game-timeline {
  --game-open: 0px;
  display: flex;
  /* not stretch: a stretched flex item ignores its aspect-ratio, and every
     card on this row is square by contract. The slots opt back in themselves. */
  align-items: flex-end;
  inline-size: max-content;
  max-inline-size: none;
  margin-inline: auto;
  gap: 0;
  min-block-size: var(--game-card-w);
}
.game-timeline[data-armed] { --game-open: var(--game-open-max); }

.game-boot { color: var(--sc-ink-soft); align-self: center; }

/* --- an anchor card ------------------------------------------------------ */
/* Square. The cover stays square inside it and the year sits beside the cover
   rather than under it, which is what keeps a 104px card readable on a phone. */

.game-card {
  position: relative;
  flex: 0 0 auto;
  inline-size: var(--game-card-w);
  aspect-ratio: var(--game-card-ar);
  transform: translate3d(calc(var(--game-shift, 0) * var(--game-open, 0px)), 0, 0);
  transition: transform 260ms var(--sc-ease-out);
}

.game-card__inner {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.28rem 0.42rem;
  padding: 0.46rem 0.5rem 0.44rem;
  overflow: hidden;
}
.game-card__art {
  grid-area: 1 / 1 / 2 / 2;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
  background: color-mix(in oklab, var(--tt-paper-ink) 10%, var(--tt-paper));
}
.game-card__body {
  grid-area: 2 / 1 / 3 / 3;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  overflow: hidden;
}
.game-card__artist,
.game-card__track,
.game-card__album {
  font-family: var(--sc-font-text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-card__artist {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tt-paper-soft);
}
.game-card__track {
  font-size: 0.76rem;
  line-height: 1.22;
  font-weight: 600;
  color: var(--tt-paper-ink);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.game-card__album {
  font-size: 0.62rem;
  line-height: 1.28;
  color: var(--tt-paper-soft);
}

.game-year { grid-area: 1 / 2 / 2 / 3; align-self: end; margin: 0; }
.game-year .tt-num {
  display: block;
  font-size: clamp(1.05rem, 1.5vw, 1.42rem);
  line-height: 0.9;
  font-variation-settings: "wght" 820, "wdth" 76;
  color: var(--tt-paper-ink);
}

/* --- a drop slot --------------------------------------------------------- */

.game-slot {
  position: relative;
  z-index: 2;             /* above a card that has slid to make room */
  flex: 0 0 auto;
  align-self: stretch;
  inline-size: var(--game-slot-w);
  min-block-size: 2.75rem;
  padding: 0.5rem 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.game-slot::before {
  /* the seam between two cards: a hairline that thickens into a live edge */
  content: "";
  position: absolute;
  inset-block: 8%;
  inset-inline-start: 50%;
  inline-size: 2px;
  margin-inline-start: -1px;
  background: var(--tt-line);
  transform: scaleY(0.55);
  transform-origin: 50% 50%;
  transition: transform 200ms var(--sc-ease-out), background-color 200ms linear;
}
.game-slot__label {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--sc-font-text);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink-soft);
  background: var(--sc-canvas);
  padding-block: 0.45rem;
  transition: color 180ms linear;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .game-slot:hover::before { background: var(--sc-accent); transform: scaleY(0.9); }
  .game-slot:hover .game-slot__label { color: var(--sc-ink); }
}
.game-slot:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 2px; }
.game-slot:focus-visible::before,
.game-slot.is-armed::before { background: var(--sc-accent); transform: scaleY(1); }
.game-slot:focus-visible .game-slot__label,
.game-slot.is-armed .game-slot__label { color: var(--sc-ink); }
.game-slot.is-answer::before { background: var(--tt-gold); transform: scaleY(1); }
.game-slot.is-answer .game-slot__label { color: var(--tt-gold); }
.game-slot[aria-disabled="true"] { cursor: default; }

/* the honest reveal after a wrong drop: the real year, in the real gap */
.game-slot__truth {
  position: absolute;
  inset-block-end: calc(100% + 0.35rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 0.25rem 0.5rem;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 780, "wdth" 88;
  font-size: 0.86rem;
  line-height: 1.1;
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out);
  pointer-events: none;
}
.game-slot.is-answer .game-slot__truth { opacity: 1; transform: none; }

/* --- the placed card: the one that flips ---------------------------------- */

.game-card--placed { perspective: 900px; }
.game-card--placed.is-hidden { opacity: 0; }

.game-flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 640ms var(--sc-ease-out);
}
.game-flip[data-face="front"] { transform: rotateY(180deg); }
.game-flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.game-flip__face--front { transform: rotateY(180deg); }

.game-flip__back {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.46rem 0.5rem 0.44rem;
}
.game-flip__qr {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-block-size: 0;
  inline-size: 100%;
  display: grid;
  place-items: center;
  padding: 6%;
  background: color-mix(in oklab, var(--tt-paper) 88%, #fff);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tt-paper-ink) 12%, transparent);
}
.game-flip__qr svg { inline-size: 100%; block-size: 100%; }

/* the correct year: gold needs a dark field. On paper it measures 1.5:1, on
   the groove plaque it measures 8.2:1. */
.game-year--gold {
  padding: 0.22rem 0.4rem 0.26rem;
  background: var(--tt-groove);
  border-radius: 2px;
  justify-self: start;
}
.game-year--gold .tt-num { color: var(--tt-gold); }

.game-card--placed.is-correct { outline: 2px solid var(--tt-gold); outline-offset: 3px; border-radius: 4px; }

/* ========================================================== the verdict ==== */

.game-foot {
  display: grid;
  gap: clamp(0.8rem, 2vh, 1.6rem);
  justify-items: center;
  text-align: center;
  inline-size: 100%;
}

.game-verdict {
  min-block-size: clamp(4.4rem, 9vh, 6.5rem);
  display: grid;
  gap: 0.45rem;
  align-content: start;
  justify-items: center;
}
.game-verdict__head {
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 820, "wdth" 108;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--sc-ink);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.game-verdict__line {
  font-family: var(--sc-font-text);
  font-size: clamp(0.88rem, 1.05vw, 1rem);
  line-height: 1.5;
  max-inline-size: 46ch;
  margin: 0;
  color: var(--sc-ink-soft);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 260ms 60ms var(--sc-ease-out), transform 260ms 60ms var(--sc-ease-out);
}
.game-verdict.is-on .game-verdict__head,
.game-verdict.is-on .game-verdict__line { opacity: 1; transform: none; }
.game-verdict__year { color: var(--tt-gold); font-variant-numeric: tabular-nums; }
.game-verdict__miss { color: color-mix(in oklab, var(--sc-accent) 70%, var(--sc-ink)); }

.game-board[data-state="correct"] .game-verdict__head { color: var(--sc-ink); }

.game-actions { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ======================================================== 1080 and down ==== */

@media (max-width: 1080px) {
  .game-card__album { display: none; }
}

/* ========================================================= 620 and down ==== */
/* The layout does not change shape: the row is already a scroll region and the
   cards are already square. What changes is what fits on the printed stock at
   88px, and the flanking rules move to the accessibility tree rather than
   being deleted, so the joker's meaning survives. */

@media (max-width: 620px) {
  .game { --game-slot-w: 2.75rem; }

  .game-hand { gap: 0.5rem; }
  .game-pc { gap: 0.2rem; }
  .game-pc__rule {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .game-mystery { padding: 0.45rem 0.48rem 0.4rem; }
  .game-mystery__mark { font-size: 0.5rem; letter-spacing: 0.14em; }

  .game-card__inner { padding: 0.4rem 0.42rem 0.38rem; gap: 0.22rem 0.34rem; }
  .game-card__artist { font-size: 0.58rem; letter-spacing: 0.06em; }
  .game-card__track { font-size: 0.7rem; -webkit-line-clamp: 1; }

  .game-slot__label { font-size: 0.6rem; letter-spacing: 0.06em; }

  .game-note { font-size: 0.82rem; }
  .game-hint { font-size: 0.76rem; }

  .game-controls > .game-play { flex: 1 1 auto; justify-content: center; max-inline-size: 20rem; }
  .game-actions .tt-cta { flex: 1 1 auto; justify-content: center; max-inline-size: 20rem; }
}

/* ====================================================== reduced motion ==== */
/* Fewer and gentler, not zero. Every verdict keeps a still, non flashing form:
   correct keeps the gold outline and the flip becomes a cross fade, wrong keeps
   the red edge and loses the shake. The confetti is never started. */

@media (prefers-reduced-motion: reduce) {
  .game { --game-open-max: 0px; }

  .game-mystery,
  .game-mystery.is-landing,
  .game-card { transition: opacity 200ms linear; }
  @media (hover: hover) and (pointer: fine) {
    .game-mystery:hover { transform: none; }
  }

  .game-mystery.is-wrong { animation: none; }

  /* the two side cards lie flat, so nothing reads as mid-motion */
  .game-pc { --game-pc-rot: 0deg; --game-pc-lift: 0px; transition: opacity 200ms linear; }
  @media (hover: hover) and (pointer: fine) {
    .game-joker:hover:not(:disabled) { --game-pc-rot: 0deg; --game-pc-lift: 0px; }
  }
  .game-joker.is-spent { --game-pc-rot: 0deg; --game-pc-lift: 0px; }

  /* No flip rotation. The two faces cross fade in place instead. */
  .game-flip { transform: none !important; transition: none; }
  .game-flip__face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity 240ms var(--sc-ease-out);
  }
  .game-flip__face--front { transform: none; opacity: 0; }
  .game-flip[data-face="front"] .game-flip__face--front { opacity: 1; }
  .game-flip[data-face="front"] .game-flip__face--back { opacity: 0; }

  .game-verdict__head,
  .game-verdict__line { transform: none; transition: opacity 240ms var(--sc-ease-out); }
  .game-slot__truth { transform: none; transition: opacity 200ms var(--sc-ease-out); }
  .game-meter { transform: none; }
  .game-qr { transition: opacity 200ms linear; }
}