/* heartstead-evening: the stage size and the Play screen before the tap (DESIGN.md 2.1, 7.2). The game's own overlay CSS
   (/try/game/game.css) loads after the tap. Logical properties; no scale, rotate or blur (S12). */
[data-demo="heartstead-evening"] { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; max-block-size: calc(100svh - 120px); min-block-size: 420px; overflow: hidden; background: #cfac53; }
@media (max-width: 699px) { [data-demo="heartstead-evening"] { aspect-ratio: auto; block-size: var(--stage-h, clamp(480px, calc(100svh - 96px), 780px)); max-block-size: none; } }
[data-demo="heartstead-evening"] .mqg { position: absolute; inset: 0; overflow: hidden; background: var(--stage-bg, #cfac53); outline: none; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* the Play card sits in the lower part of the stage so Hana, stepping out of the dorm in the still, stands clear above it */
[data-demo="heartstead-evening"] .mqg-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: end center; padding-block-end: clamp(12px, 4%, 32px); container-type: size; cursor: pointer; }
[data-demo="heartstead-evening"] .mqg-play[hidden] { display: none; }
/* the Play still is the game's own first view (review 2026-10-03: the old still drew the town at 1.5 to 2 x the game's
   scale and framed it otherwise, so the Play tap read as a zoom-out jump). media/play.webp is a 1280 x 720 desktop stage
   and media/play-phone.webp a 430 x 768 phone stage, rendered by the game itself 1.6 s into seeded play at grain
   resolution (one image px = one 0.5 u cell; _tools/probe-play.mjs --still-meta: the numbers in media/clip.json "still",
   handed to this CSS by try/game/ssr.mjs as --d* / --p* in image px). Each is placed exactly where the first frame draws
   the world: Hana's spawn where the camera frames her (the middle; 42 % down on a touch stage), clamped to the world's
   edges like the camera. The scale follows the game's pixel size (try/game/core/camera.js, this slice's camera.small):
   4 CSS px per u on a stage of 700 x 480 or more (2 per image px), 3 below it (1.5 per image px; phones start at the
   low tier, DPR cap 2, where that is exact). Container queries read the stage itself, as the game does. Without the
   still numbers (an older ssr.mjs) the desktop still sits at its desktop place. */
[data-demo="heartstead-evening"] .mqg-still { position: absolute; inset-inline-start: clamp(calc(100% - 2304px), calc(50% - 440px), 0px); inset-block-start: clamp(calc(100% - 1408px), calc(50% - 360px), 384px); inline-size: 1280px; block-size: 720px; margin: 0; image-rendering: pixelated; max-inline-size: none; }
[data-demo="heartstead-evening"] .mqg-still.mqg-still--game { inset-inline-start: clamp(calc(100% - var(--dr) * 2px), calc(50% - var(--dhx) * 2px), calc(var(--dl) * 2px)); inset-block-start: clamp(calc(100% - var(--db) * 2px), calc(50% - var(--dhy) * 2px), calc(var(--dt) * 2px)); inline-size: calc(var(--dw) * 2px); block-size: calc(var(--dh) * 2px); }
@container (max-height: 479px) { [data-demo="heartstead-evening"] .mqg-still.mqg-still--game { inset-inline-start: clamp(calc(100% - var(--dr) * 1.5px), calc(50% - var(--dhx) * 1.5px), calc(var(--dl) * 1.5px)); inset-block-start: clamp(calc(100% - var(--db) * 1.5px), calc(var(--fy, 50%) - var(--dhy) * 1.5px), calc(var(--dt) * 1.5px)); inline-size: calc(var(--dw) * 1.5px); block-size: calc(var(--dh) * 1.5px); } }
@media (any-pointer: coarse) and (not (any-pointer: fine)) { [data-demo="heartstead-evening"] .mqg-play { --fy: 42%; } }
@container (max-width: 699px) { [data-demo="heartstead-evening"] .mqg-still.mqg-still--game { inset-inline-start: clamp(calc(100% - var(--pr) * 1.5px), calc(50% - var(--phx) * 1.5px), calc(var(--pl) * 1.5px)); inset-block-start: clamp(calc(100% - var(--pb) * 1.5px), calc(42% - var(--phy) * 1.5px), calc(var(--pt) * 1.5px)); inline-size: calc(var(--pw) * 1.5px); block-size: calc(var(--ph) * 1.5px); } }
[data-demo="heartstead-evening"] .mqg-play__card { position: relative; display: grid; justify-items: center; gap: 12px; padding: 20px 24px; max-inline-size: min(92%, 420px); border-radius: 18px; background: rgba(255, 250, 240, .9); box-shadow: 0 10px 30px rgba(42, 37, 66, .25); text-align: center; }
[data-demo="heartstead-evening"] .mqg-play__title { margin: 0; font: 700 20px/1.2 "Baloo 2", system-ui, sans-serif; color: #2a2542; }
[data-demo="heartstead-evening"] .mqg-playbtn { min-inline-size: 180px; min-block-size: 56px; font-size: 22px; }
[data-demo="heartstead-evening"] .mqg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; font: 600 13px/1 "Baloo 2", system-ui, sans-serif; color: #4b4262; }
[data-demo="heartstead-evening"] .mqg-chips li { padding: 6px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(42, 37, 66, .15); }
[data-demo="heartstead-evening"] .mqg-asyou, [data-demo="heartstead-evening"] .mqg-turn { margin: 0; font: 600 14px/1.3 "Baloo 2", system-ui, sans-serif; color: #4b4262; }
[data-demo="heartstead-evening"] .mqg-loading, [data-demo="heartstead-evening"] .mqg-failed { display: none; margin: 0; align-items: center; gap: 8px; font: 600 14px/1.3 "Baloo 2", system-ui, sans-serif; color: #2a2542; }
[data-demo="heartstead-evening"] .is-loading .mqg-loading { display: flex; }
[data-demo="heartstead-evening"] .is-error .mqg-failed { display: block; }
[data-demo="heartstead-evening"] .mqg-strip { inline-size: 48px; block-size: 8px; background: repeating-linear-gradient(90deg, #2a2542 0 8px, #ffc95c 8px 16px); animation: mqg-strip .5s steps(2) infinite; }
@keyframes mqg-strip { to { background-position: 16px 0; } }
@media (prefers-reduced-motion: reduce) { [data-demo="heartstead-evening"] .mqg-strip { animation: none; } }