/* 2048 Super — /instruction/ page styles. Tiles, cells, badges, cards and wedges
   are the game's own sprites (/assets/game). Depends on /theme.css. */

@layer components {

  /* ============================== the game's tiles and board ==============================
     board.webp and tile-<v>.webp are cut from the App Store screenshot (tools/export-board-sprites.py).
     Geometry of board.webp: rim margin 4.22%, cell 21.08%, gap 2.41%  ->  one cell step = 111.43% of a tile. */
  :root { --bm: 4.22%; --bc: 21.08%; --bs: 111.43%; }
  [data-v="2"]    { --sprite: url("/assets/game/tile-2.webp");    --tile-ink: #2b2018; }
  [data-v="4"]    { --sprite: url("/assets/game/tile-4.webp");    --tile-ink: #2b2018; }
  [data-v="8"]    { --sprite: url("/assets/game/tile-8.webp");    --tile-ink: #2b1a10; }
  [data-v="16"]   { --sprite: url("/assets/game/tile-16.webp");   --tile-ink: #2b1a10; }
  [data-v="32"]   { --sprite: url("/assets/game/tile-32.webp");   --tile-ink: #2b1a10; }
  [data-v="64"]   { --sprite: url("/assets/game/tile-64.webp");   --tile-ink: #fff4ee; }
  [data-v="128"]  { --sprite: url("/assets/game/tile-128.webp");  --tile-ink: #2b2010; }
  [data-v="256"]  { --sprite: url("/assets/game/tile-256.webp");  --tile-ink: #0d2a30; }
  [data-v="512"]  { --sprite: url("/assets/game/tile-512.webp");  --tile-ink: #f8f2ff; }
  [data-v="1024"] { --sprite: url("/assets/game/tile-1024.webp"); --tile-ink: #f8f2ff; }
  [data-v="2048"] { --sprite: url("/assets/game/tile-2048.webp"); --tile-ink: #2b2010; }
  [data-v="4096"] { --sprite: url("/assets/game/tile-4096.webp"); --tile-ink: #2b2010; }

  .tile > i, .mini i[data-v] {
    background: var(--sprite) center 54% / 118% 120% no-repeat;    /* the cube overhangs its cell a little, as in the game */
    color: var(--tile-ink);
    display: grid; place-items: center; font-style: normal; font-family: "Archivo Black", var(--font-display); font-weight: 400; line-height: 1;
    padding-bottom: 6%;                                            /* digits sit on the face, above the cube's lip */
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
  }
  .board, .mini {
    position: relative; aspect-ratio: 1; display: block; padding: 0;
    background: url("/assets/game/board.webp") center / 100% 100% no-repeat;
  }
  /* a locked tile: red glow and the game's padlock */
  .tile.locked, .mini i.locked { filter: drop-shadow(0 0 6px rgba(255, 106, 61, .95)) drop-shadow(0 0 2px rgba(255, 90, 60, .9)); }
  .tile.locked::after, .mini i.locked::after {
    content: ""; position: absolute; top: -14%; right: -12%; width: 42%; aspect-ratio: 256 / 345; z-index: 2;
    background: url("/assets/game/ic-lock.webp") center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7));
  }

  /* ============================== hero ============================== */
  .hero { position: relative; padding-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 6vw, 4.5rem); overflow: clip; }
  .hero .wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; }
  @media (min-width: 56rem) { .hero .wrap { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); } }
  .torch {
    position: absolute; top: -6rem; width: 44rem; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255, 170, 60, .34), rgba(255, 120, 40, .12) 35%, transparent 62%);
    animation: flicker 3.2s ease-in-out infinite alternate;
  }
  .torch-l { left: -22rem; } .torch-r { right: -22rem; animation-delay: -1.7s; }
  @keyframes flicker { from { opacity: .6; scale: .97; } to { opacity: 1; scale: 1.03; } }
  .sign-h1 { margin-block: .25rem 1rem; }
  .lead { font-size: var(--t-1); color: var(--ink); margin-top: 1rem; max-width: 34ch; line-height: 1.45; }
  .hint { margin-top: 1.1rem; color: var(--ink-2); font-size: var(--t--1); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; max-width: 40ch; }
  .hint img { width: 1.7rem; height: 1.7rem; opacity: .9; }
  .hint span { flex-basis: 100%; }
  .chapters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
  .chapters a {
    display: inline-flex; gap: .5rem; align-items: center; text-decoration: none;
    color: var(--ink); padding: .35rem .9rem .35rem .5rem; border-radius: 999px;
    background: rgba(0,0,0,.35); border: 1px solid var(--gold-3);
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em;
    transition: background .15s, color .15s;
  }
  .chapters a img { width: 1.6rem; height: auto; max-height: 1.9rem; object-fit: contain; }
  .chapters a:hover { color: var(--gold-2); background: rgba(240, 193, 79, .12); }

  /* ============================== the playable grid ============================== */
  .playground { container-type: inline-size; display: grid; gap: 1rem; justify-items: center; }
  .mega {
    --wall: clamp(8px, 2.6cqi, 16px);
    width: min(100%, 36rem); aspect-ratio: 1;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wall); padding: var(--wall);
    background: #1b1a21 url("/assets/game/floor.webp") center / 128px 128px; border-radius: 8px;
    box-shadow: 0 0 0 2px #0a0a0d, 0 0 0 3px #3a3540, 0 40px 80px -30px rgba(0,0,0,.95), inset 0 0 40px rgba(0,0,0,.6);
    touch-action: none; user-select: none; -webkit-user-select: none; position: relative; outline-offset: 6px;
  }
  .mega.nudge { animation: nudge .22s var(--ease-out); }
  @keyframes nudge { 35% { translate: calc(var(--nx) * 6px) calc(var(--ny) * 6px); } }

  .board { border-radius: 3px; transition: filter .45s var(--ease-out); }
  .board > i { display: none; }                                      /* the cells are part of board.webp */
  .board .tiles { position: absolute; inset: 0; }
  .board.moved { animation: flash .4s var(--ease-out); }
  @keyframes flash { from { box-shadow: 0 0 0 3px rgba(255, 224, 138, .8), 0 0 18px rgba(240, 193, 79, .6); } }
  .board.stone { filter: grayscale(1) brightness(.5); }
  .board.stone::after {
    content: ""; position: absolute; inset: 0; border-radius: 4px; z-index: 2; pointer-events: none;
    background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0,0,0,.3) 5px 7px);
  }

  .tile {
    position: absolute; top: var(--bm); left: var(--bm); z-index: 1;
    width: var(--bc); height: var(--bc);
    translate: calc(var(--c) * var(--bs)) calc(var(--r) * var(--bs));
    transition: translate .13s var(--ease-out);
  }
  .tile.gone { z-index: 0; }
  .tile > i { position: absolute; inset: 0; font-size: clamp(9px, 2.9cqi, 17px); }
  .tile > i[data-v="2048"], .tile > i[data-v="4096"] { box-shadow: 0 0 14px var(--gold-2); }
  .tile.new > i { animation: appear .16s var(--ease-out) both; }
  .tile.pop > i { animation: pop .22s var(--ease-spring); }
  @keyframes appear { from { scale: 0; opacity: 0; } }
  @keyframes pop { 0% { scale: .8; } 50% { scale: 1.18; } 100% { scale: 1; } }
  .tile.locked::after { top: -6%; right: 0; width: 34%; }

  .over {
    position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: .6rem;
    text-align: center; padding: 1rem; border-radius: 8px;
    background: rgba(10, 8, 14, .8); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: appear-over .3s var(--ease-out) both;
  }
  .over b { font: 800 var(--t-2) / 1.1 var(--font-display); color: var(--gold); text-shadow: var(--title-shadow); text-wrap: balance; }
  .over span { color: var(--ink-2); font-size: var(--t--1); max-width: 30ch; }
  @keyframes appear-over { from { opacity: 0; } }

  /* HUD: the navy score plate */
  .hud {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; width: min(100%, 36rem);
    padding: .7rem 1rem; border-radius: .5rem;
    background: linear-gradient(180deg, var(--navy-2), var(--navy));
    border: 2px solid var(--gold-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px -8px rgba(0,0,0,.8);
  }
  .stats { display: flex; gap: 1.5rem; margin-right: auto; }
  .stats div { display: grid; }
  .stats dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
  .stats dd { font: 800 1.45rem / 1 var(--font-display); color: var(--gold-2); text-shadow: 0 1px 0 var(--gold-4); font-variant-numeric: tabular-nums; }
  .stats dd small { font-size: .6em; color: var(--ink-3); font-weight: 600; }
  .dpad { display: grid; grid-template-columns: repeat(3, 2.2rem); grid-template-rows: repeat(2, 2.2rem); gap: 3px; }
  .dpad button {
    display: grid; place-items: center; border-radius: .4rem;
    background: rgba(0,0,0,.35); border: 1px solid var(--gold-3); box-shadow: 0 2px 0 rgba(0,0,0,.6);
    transition: background .1s, transform .06s;
  }
  .dpad button img { width: 1.3rem; height: 1.3rem; }
  .dpad button:hover { background: rgba(240, 193, 79, .18); }
  .dpad button:active { transform: translateY(2px); box-shadow: none; }
  .dpad [data-dir="up"] { grid-area: 1 / 2; }
  .dpad [data-dir="left"] { grid-area: 2 / 1; }
  .dpad [data-dir="down"] { grid-area: 2 / 2; }
  .dpad [data-dir="right"] { grid-area: 2 / 3; }
  .demo-status { width: min(100%, 36rem); color: var(--ink-2); font-size: var(--t--1); min-height: 1.6em; }

  /* ============================== chapters ============================== */
  .chapter { padding-block: clamp(3rem, 8vw, 6rem); }
  .chapter-head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
  .sub { color: var(--ink-2); font-size: var(--t-1); margin-top: .8rem; line-height: 1.45; max-width: 44rem; }
  .aside { margin-top: 1.5rem; color: var(--ink-2); font-size: var(--t--1); display: flex; align-items: center; gap: .75rem; }
  .aside img { width: 2.5rem; height: auto; }
  .aside b { color: var(--gold); font-family: var(--font-display); font-size: 1.15em; }

  /* ============================== mini boards (illustrations) ============================== */
  .mini i {
    position: absolute; top: var(--bm); left: var(--bm); width: var(--bc); height: var(--bc); z-index: 2;
    translate: calc(var(--c) * var(--bs)) calc(var(--r) * var(--bs));
  }
  .mini i.locked { z-index: 3; }
  .duo, .trio { display: grid; gap: 12px; padding: 10px; background: #1b1a21 url("/assets/game/floor.webp") center / 96px 96px; border-radius: 8px; box-shadow: 0 0 0 2px #0a0a0d, 0 0 0 3px #3a3540; position: relative; }
  .duo { grid-template-columns: 1fr 1fr; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  @keyframes slide {
    0%        { translate: calc(var(--c) * var(--bs)) calc(var(--r) * var(--bs)); opacity: 0; }
    4%        { opacity: 1; }
    30%       { translate: calc(var(--c) * var(--bs)) calc(var(--r) * var(--bs)); }
    46%, 92%  { translate: calc((var(--c) + var(--d)) * var(--bs)) calc(var(--r) * var(--bs)); opacity: 1; }
    97%, 100% { translate: calc((var(--c) + var(--d)) * var(--bs)) calc(var(--r) * var(--bs)); opacity: 0; }
  }
  .s1 { --d: 1; } .s2 { --d: 2; } .s3 { --d: 3; }

  .anim:not(.in-view), .anim:not(.in-view) *, .anim:not(.in-view)::before, .anim:not(.in-view)::after,
  .anim:not(.in-view) *::before, .anim:not(.in-view) *::after { animation-play-state: paused !important; }

  /* ============================== the laws ============================== */
  .laws { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
  .law { display: grid; gap: 1.5rem 2.5rem; align-items: center; padding: .5rem; }
  @media (min-width: 48rem) {
    .law { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: .75rem 1rem; }
    .law:nth-child(even) .law-art { order: 2; }
  }
  .law-art { container-type: inline-size; position: relative; display: grid; gap: 1rem; align-content: center; padding: .5rem; }
  .law-art .mini i { font-size: clamp(.55rem, 3cqi, 1rem); }
  .law-n { display: block; font: 800 clamp(3rem, 8vw, 5rem) / .8 var(--font-display); color: var(--gold); text-shadow: var(--title-shadow); opacity: .35; margin-bottom: .4rem; }
  .law-text h3 { font-size: var(--t-2); }
  .law-text p { color: var(--ink); margin-top: .6rem; max-width: 46ch; }

  .law:nth-child(1) .s1, .law:nth-child(1) .s2, .law:nth-child(1) .s3 { animation: slide 5s infinite; }
  .hand { position: absolute; top: 50%; left: 18%; width: 3.2rem; z-index: 4; margin-top: -1.6rem; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.8)); animation: hand 5s infinite; }
  @keyframes hand {
    0%, 22%   { opacity: 0; left: 18%; }
    27%       { opacity: 1; }
    30%       { left: 18%; }
    46%       { left: 74%; opacity: 1; }
    54%, 100% { left: 74%; opacity: 0; }
  }

  .law:nth-child(2) .push { animation: slide 5s infinite; }
  .law:nth-child(2) .jit { animation: jitter 5s infinite; }
  @keyframes jitter {
    0%, 42%   { translate: calc(var(--c) * var(--bs)) calc(var(--r) * var(--bs)); }
    45%       { translate: calc(var(--c) * var(--bs) + 3px) calc(var(--r) * var(--bs)); }
    48%       { translate: calc(var(--c) * var(--bs) - 3px) calc(var(--r) * var(--bs)); }
    51%, 100% { translate: calc(var(--c) * var(--bs)) calc(var(--r) * var(--bs)); }
  }
  .beam-fx {
    position: absolute; top: 41%; left: 30%; right: 30%; height: 3px; translate: 0 -50%; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, transparent, #ff9a7a 20%, #fff 50%, #ff9a7a 80%, transparent);
    filter: drop-shadow(0 0 6px var(--ember)); animation: beam-fx 5s infinite;
  }
  @keyframes beam-fx { 0%, 40% { opacity: .35; } 45%, 60% { opacity: 1; } 70%, 100% { opacity: .35; } }
  .lock-mark { position: absolute; top: 41%; left: 50%; width: 2.4rem; translate: -50% -50%; z-index: 2; filter: drop-shadow(0 0 8px var(--ember)) drop-shadow(0 3px 3px rgba(0,0,0,.8)); animation: lock-mark 5s infinite; }
  @keyframes lock-mark { 0%, 40% { scale: 1; } 46% { scale: 1.25; } 52%, 100% { scale: 1; } }

  .stonify { animation: stonify 6s infinite; width: min(100%, 15rem); margin-inline: auto; box-shadow: 0 0 0 6px #1b1a21, 0 0 0 8px #3a3540; }
  .stonify::after {
    content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
    background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0,0,0,.3) 5px 7px); animation: stonify-crack 6s infinite; z-index: 4;
  }
  @keyframes stonify { 0%, 28% { filter: none; } 42%, 88% { filter: grayscale(1) brightness(.5); } 100% { filter: none; } }
  @keyframes stonify-crack { 0%, 30% { opacity: 0; } 44%, 88% { opacity: 1; } 100% { opacity: 0; } }
  .tally { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--ink-2); font-size: var(--t--1); }
  .tally span { width: 1.1rem; aspect-ratio: 1; border-radius: 3px; background: var(--stone); border: 1px solid var(--gold-3); }
  .tally em { font-style: normal; margin-left: .35rem; }
  .tally span:nth-child(1) { animation: tally-1 6s infinite; }
  .tally span:nth-child(2) { animation: tally-2 6s infinite; }
  .tally span:nth-child(3) { animation: tally-3 6s infinite; }
  @keyframes tally-1 { 0%, 42% { background: var(--stone); } 46%, 92% { background: #8a8580; } 100% { background: var(--stone); } }
  @keyframes tally-2 { 0%, 58% { background: var(--stone); } 62%, 92% { background: #8a8580; } 100% { background: var(--stone); } }
  @keyframes tally-3 { 0%, 74% { background: var(--stone); } 78%, 92% { background: var(--red-2); } 100% { background: var(--stone); } }

  .badges { grid-template-columns: repeat(4, 1fr); gap: .6rem 1rem; align-items: end; padding: .75rem; }
  .badges img { width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.7)); animation: shine 4s infinite; animation-delay: calc(var(--i) * .5s); }
  @keyframes shine { 0%, 3% { scale: 1; } 8% { scale: 1.12; filter: drop-shadow(0 0 14px var(--gold)) drop-shadow(0 6px 8px rgba(0,0,0,.7)); } 18%, 100% { scale: 1; } }

  /* ============================== the powers: the store cards ============================== */
  .powers { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .power { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; padding: .4rem .6rem .4rem .2rem; transition: translate .2s var(--ease-out); }
  .power:hover { translate: 0 -4px; }
  .power .card { width: 100%; height: auto; margin-block: -1.6rem; filter: drop-shadow(0 12px 14px rgba(0,0,0,.75)); transition: transform .25s var(--ease-out); }
  .power:hover .card { transform: rotate(-3deg) scale(1.04); }
  .power h3 { font-size: var(--t-2); }
  .power p { color: var(--ink); font-size: var(--t--1); margin-top: .35rem; line-height: 1.5; }

  /* ============================== quests + wheel ============================== */
  .twin { display: grid; gap: 2rem; }
  @media (min-width: 56rem) { .twin { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } }
  .twin .panel { padding: .5rem .75rem; }
  .game-h2 { display: flex; align-items: center; gap: .6rem; font-size: var(--t-2); }
  .game-h2 img { width: 2.1rem; height: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
  .twin .sub { font-size: var(--t-0); margin-top: .5rem; }
  .run-label { margin-top: 1.25rem; font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-size: .9rem; }

  @property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
  .quests { margin-top: .4rem; }
  .quest {
    --p: 0; transition: --p 1.4s var(--ease-out);
    display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; align-items: center;
    padding: .75rem 0 .75rem 1.7rem; border-top: 1px solid rgba(255,255,255,.08); position: relative;
  }
  .quest::before { content: ""; position: absolute; left: 0; top: .9rem; width: 1.1rem; aspect-ratio: 96 / 149; background: url("/assets/game/diamond.webp") center / contain no-repeat; }
  .quests.in-view .quest { --p: var(--target); }
  .quest:nth-child(2) { transition-delay: .15s; } .quest:nth-child(3) { transition-delay: .3s; }
  .quest b { font-family: var(--font-display); font-weight: 700; font-size: var(--t-1); color: var(--gold); text-shadow: 0 1px 0 var(--gold-4); line-height: 1.1; }
  .quest b small { color: var(--ink); font-size: .85em; margin-left: .3em; }
  .quest .tag { grid-column: 2; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--green); white-space: nowrap; }
  .quest > span:not(.meter) { grid-column: 1 / -1; color: var(--ink); font-size: var(--t--1); }
  .quest .meter { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: rgba(0,0,0,.45); border: 1px solid rgba(0,0,0,.6); overflow: hidden; margin-top: .3rem; }
  .quest .fill { display: block; height: 100%; inline-size: calc(var(--p) * 100%); border-radius: 4px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); box-shadow: 0 0 8px rgba(240,193,79,.6); }
  .quest .count { grid-column: 2; grid-row: 1; font-style: normal; font-family: var(--font-display); font-weight: 800; color: #1a1308; background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: .15rem .55rem; border-radius: .3rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; scale: 0; transition: scale .5s var(--ease-spring) 1.1s; }
  .quest.done .tag { display: none; }
  .quests.in-view .count { scale: 1; }

  .wheel-panel { text-align: center; }
  .wheel-panel .game-h2 { justify-content: center; }
  .wheel-panel .sub { margin-inline: auto; text-align: left; }
  .wheel-stage { position: relative; width: min(100%, 20rem); aspect-ratio: 1; margin: 1.5rem auto 1rem; }
  .pointer {
    position: absolute; top: -.5rem; left: 50%; translate: -50% 0; z-index: 3; width: 0; height: 0;
    border: .7rem solid transparent; border-top: 1.5rem solid var(--gold); border-bottom: 0;
    filter: drop-shadow(0 0 1px var(--gold-4)) drop-shadow(0 3px 3px rgba(0,0,0,.8));
  }
  .wheel {
    --turn: 0deg; position: absolute; inset: 0; rotate: var(--turn);
    transition: rotate 4.6s cubic-bezier(.12, .78, .1, 1); border-radius: 50%;
    background: radial-gradient(circle, #241a12 0 44%, #4a3320 45% 47%, #2a1c12 48%);
    box-shadow: 0 0 0 5px #5b3f24, 0 0 0 8px #1d130b, 0 0 0 9px #6b4a2a, 0 14px 22px rgba(0,0,0,.8);
  }
  .wheel img {
    /* the wedge art is a truncated wedge: its true apex sits 40.8% below the image, so each one is
       rotated about that point — the narrow ends then leave the hub free and the wooden gaps show */
    position: absolute; top: 1.5%; left: 50%; width: 34.4%; height: 34.4%; translate: -50% 0;
    transform-origin: 50% 140.8%; rotate: calc(var(--i) * 45deg);
  }
  .hub {
    position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%; z-index: 2;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    background: radial-gradient(circle at 40% 32%, #4a4650, #1c1b21 70%);
    box-shadow: inset 0 4px 10px rgba(0,0,0,.7);
  }
  .hub::before { content: ""; position: absolute; inset: 22%; clip-path: inherit; background: #0f0e12; box-shadow: inset 0 3px 6px #000; }
  .spin { min-width: 12rem; }
  .parchment {
    display: grid; place-items: center; width: fit-content; margin: 1rem auto 0; padding: .8rem 1.8rem 1rem 3.6rem;   /* the sprite has an hourglass on its left */
    background: url("/assets/game/parchment.webp") center / 100% 100% no-repeat;
    color: #3a2510; font-family: var(--font-display); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem;
  }
  .wheel-out { color: var(--ink-2); font-size: var(--t--1); min-height: 1.6em; margin-top: .6rem; }
  .wheel-out b { color: var(--gold); font-family: var(--font-display); font-size: 1.2em; }

  /* ============================== motion preferences ============================== */
  @media (prefers-reduced-motion: reduce) {
    .anim, .anim *, .anim::before, .anim::after, .anim *::before, .anim *::after, .torch { animation: none !important; }
    .tile, .wheel, .quest, .count, .power, .power .card { transition: none !important; }
    .quests .quest { --p: var(--target); }
    .quests .count { scale: 1; }
  }
}


@layer components {
  /* ---- title block ---- */
  .page-head .chapters { justify-content: center; margin-top: 1.25rem; }

  /* ---- try it: grid + companion panel ---- */
  .hero .wrap.try { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; grid-template-columns: none; }
  @media (min-width: 60rem) { .hero .wrap.try { grid-template-columns: minmax(0, 13fr) minmax(0, 9fr); } }
  .try-panel { margin-top: 0; }
  .tips img.stone { filter: grayscale(1) brightness(.7) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
  .try-panel { padding: .5rem .75rem; }
  .try-panel .sub { font-size: var(--t-0); margin-top: .4rem; }
  .swipes {
    display: grid; grid-template-columns: repeat(3, 3.6rem); grid-template-rows: repeat(3, 3.6rem); gap: .25rem;
    justify-content: center; margin: 1.25rem auto .5rem;
  }
  .swipes img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); animation: swipe-hint 4s infinite; }
  .swipes .up { grid-area: 1 / 2; } .swipes .left { grid-area: 2 / 1; animation-delay: 1s; }
  .swipes .right { grid-area: 2 / 3; animation-delay: 3s; } .swipes .down { grid-area: 3 / 2; animation-delay: 2s; }
  @keyframes swipe-hint { 0%, 20%, 100% { opacity: .45; scale: .92; } 8% { opacity: 1; scale: 1.08; filter: drop-shadow(0 0 10px var(--gold)); } }
  .tips { display: grid; gap: .9rem; margin-top: 1rem; }
  .tips li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; align-items: center; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.08); }
  .tips img { width: 2.4rem; height: 2.4rem; object-fit: contain; justify-self: center; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
  .tips span { color: var(--ink-2); font-size: var(--t--1); line-height: 1.5; }
  .tips b { color: var(--gold); font-family: var(--font-display); font-size: 1.15em; letter-spacing: .02em; }

  /* ---- powers: the store's card row, four across ---- */
  .powers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  @media (min-width: 60rem) { .powers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .power { grid-template-columns: none; justify-items: center; text-align: center; align-content: start; gap: .6rem; padding: .6rem .5rem .75rem; }
  .power .card { width: min(100%, 8.5rem); margin-block: 0; }
  .power h3 { font-size: var(--t-1); }
  .power p { font-size: .9rem; }
  @media (max-width: 30rem) { .power p { font-size: .82rem; } .power .card { width: 6.5rem; } }

  .aside.panel { display: flex; align-items: center; gap: 1rem; width: fit-content; margin: 2rem auto 0; padding: .1rem .75rem; font-size: var(--t-0); }
  .aside.panel img { width: 3.2rem; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }

  /* ---- quests + wheel: same height, rewards fill the quest panel ---- */
  @media (min-width: 56rem) { .twin { align-items: stretch !important; } }
  .quest-panel { display: flex; flex-direction: column; }
  .rewards { margin-top: auto; padding-top: 1.25rem; text-align: center; }
  .reward-row { display: flex; justify-content: center; gap: 1rem; margin-top: .6rem; }
  .reward-row img { width: 3.6rem; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.7)); }
  .reward-note { color: var(--ink-2); font-size: var(--t--1); margin-top: .6rem; }
}

@layer components {
  /* phone: a slimmer gold frame so two power cards fit side by side */
  @media (max-width: 30rem) {
    .power.panel { border-width: 16px; border-image-width: 16px; padding: .4rem .2rem .5rem; }
    .powers { gap: 1rem .6rem; }
  }
}


@layer components {
  /* ---- the strip under the practice grid: stats first, one quiet line on how to move ----
     (replaces the old d-pad + big Reset button: the game has no reset, so it must not shout) */
  .hud {
    width: min(100%, 36rem); display: flex; justify-content: center; padding: 0; gap: 0;
    background: none; border: 0; box-shadow: none;
  }
  .stats {
    display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 0;
    background: linear-gradient(180deg, var(--navy-2), var(--navy));
    border: 2px solid var(--gold-3); border-radius: .6rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px -10px rgba(0,0,0,.85);
  }
  .stats div { display: grid; justify-items: center; gap: .15rem; padding: .7rem .5rem .8rem; }
  .stats div + div { border-left: 1px solid rgba(240, 193, 79, .22); }
  .stats dt { font-size: .7rem; letter-spacing: .16em; }
  .stats dd { font-size: 1.9rem; }
  .how-move { width: min(100%, 36rem); margin: .1rem 0 0; text-align: center; color: var(--ink-2); font-size: var(--t--1); }
  .how-move span { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; }
  .how-move img { width: 1.6rem; height: 1.6rem; margin-right: .3rem; }
  .how-move kbd {
    display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding-inline: .3rem;
    font: 700 .85rem/1 var(--font-body); color: var(--gold-2);
    background: rgba(0,0,0,.4); border: 1px solid var(--gold-3); border-bottom-width: 3px; border-radius: .35rem;
  }
  .how-move kbd:last-of-type { margin-right: .35rem; }
  .how-move .on-touch { display: none; }
  @media (hover: none) and (pointer: coarse) { .how-move .on-touch { display: inline-flex; } .how-move .on-mouse { display: none; } }
  .grid-foot { width: min(100%, 36rem); margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; align-items: baseline; }
  .grid-foot .demo-status { width: auto; min-height: 0; flex: 1 1 16rem; color: var(--ink-3); }
  .new-grid {
    font: 600 var(--t--1)/1.4 var(--font-body); color: var(--ink-3); text-decoration: underline; text-underline-offset: .2em;
    text-decoration-color: rgba(240,193,79,.35); background: none; border: 0; padding: 0; cursor: pointer;
  }
  .new-grid:hover { color: var(--gold-2); text-decoration-color: currentColor; }
  .dpad { display: none; }
}