/* slime-rush: 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="slime-rush"] { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; max-block-size: calc(100svh - 120px); min-block-size: 420px; overflow: hidden; background: #cbe07c; }
@media (max-width: 699px) { [data-demo="slime-rush"] { aspect-ratio: auto; block-size: var(--stage-h, clamp(480px, calc(100svh - 96px), 780px)); max-block-size: none; } }
/* only a RUNNING game owns touch and the wheel: before the Play tap (and paused or finished, game.css) a swipe or the
   wheel over the stage scrolls the page, so a phone visitor can still read on (the stage is most of the screen) */
[data-demo="slime-rush"] .mqg { position: absolute; inset: 0; overflow: hidden; background: var(--stage-bg, #cbe07c); outline: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[data-demo="slime-rush"][data-game-state="playing"] .mqg { touch-action: none; overscroll-behavior: contain; }
[data-demo="slime-rush"] .mqg-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: end center; padding-block-end: clamp(16px, 7%, 56px); cursor: pointer; }
/* the card sits low so Hana, mid-swing in the middle of the still, stays in view above it */
[data-demo="slime-rush"] .mqg-play[hidden] { display: none; }
[data-demo="slime-rush"] .mqg-still { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 1440px; block-size: 900px; margin-inline-start: -720px; margin-block-start: -450px; image-rendering: pixelated; max-inline-size: none; }
[data-demo="slime-rush"] .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="slime-rush"] .mqg-play__title { margin: 0; font: 700 20px/1.2 "Baloo 2", system-ui, sans-serif; color: #2a2542; }
[data-demo="slime-rush"] .mqg-playbtn { min-inline-size: 180px; min-block-size: 56px; font-size: 22px; }
[data-demo="slime-rush"] .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="slime-rush"] .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="slime-rush"] .mqg-asyou, [data-demo="slime-rush"] .mqg-turn { margin: 0; font: 600 14px/1.3 "Baloo 2", system-ui, sans-serif; color: #4b4262; }
[data-demo="slime-rush"] .mqg-loading, [data-demo="slime-rush"] .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="slime-rush"] .is-loading .mqg-loading { display: flex; }
[data-demo="slime-rush"] .is-error .mqg-failed { display: block; }
[data-demo="slime-rush"] .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="slime-rush"] .mqg-strip { animation: none; } }
@media (max-height: 480px) { [data-demo="slime-rush"] .mqg-still { inline-size: 960px; block-size: 600px; margin-inline-start: -480px; margin-block-start: -300px; } }
/* the still at the GAME's scale (review 2026-10-02: the old still drew 6 CSS px per u, the game 4, so the tap shrank the
   world): the image is the game's own frame (probe-play.mjs --still-meta; numbers from try/game/ssr.mjs), one image px
   = one 0.5 u grain cell, placed exactly where the first frame draws the world: Hana's spawn at the camera's framing
   (desktop: the middle; touch: 42 % down), clamped to the world's edges like the camera. Desktop frames: 2 CSS px per
   px (c = 4); phones: 1 (c = 2, the portrait still); a short landscape frame: the desktop still at 1 (c = 2). */
[data-demo="slime-rush"] .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); margin: 0; }
@media (max-height: 479px) and (min-width: 700px) { [data-demo="slime-rush"] .mqg-still--game { inset-inline-start: clamp(calc(100% - var(--dr) * 1px), calc(50% - var(--dhx) * 1px), calc(var(--dl) * 1px)); inset-block-start: clamp(calc(100% - var(--db) * 1px), calc(42% - var(--dhy) * 1px), calc(var(--dt) * 1px)); inline-size: calc(var(--dw) * 1px); block-size: calc(var(--dh) * 1px); } }
@media (max-width: 699px) { [data-demo="slime-rush"] .mqg-still--game { inset-inline-start: clamp(calc(100% - var(--pr) * 1px), calc(50% - var(--phx) * 1px), calc(var(--pl) * 1px)); inset-block-start: clamp(calc(100% - var(--pb) * 1px), calc(42% - var(--phy) * 1px), calc(var(--pt) * 1px)); inline-size: calc(var(--pw) * 1px); block-size: calc(var(--ph) * 1px); } }
/* the skill dock (keyboard players; touch players get the big buttons): a row of pixel slots with a keycap tab and a
   16-step cooldown wedge (GAME-FEEL 11), drawn by the slice (try/game/slices/slime-rush/dock.js) inside the overlay */
[data-demo="slime-rush"] .mqg-dock { position: absolute; inset-block-end: 14px; inset-inline-start: 50%; translate: -50% 0; display: flex; gap: 8px; padding: 10px 8px 6px; background: rgba(42, 37, 66, .78); box-shadow: 0 0 0 2px #2a2542, inset 0 0 0 1px rgba(255, 250, 240, .25); border-radius: 2px; pointer-events: none; }
[data-demo="slime-rush"] .mqg-dock[hidden] { display: none; }
[data-demo="slime-rush"] .mqg-slot { position: relative; inline-size: 44px; block-size: 44px; display: grid; place-items: center; color: #fffaf0; background: #4b4262; box-shadow: 0 0 0 2px #2a2542, inset 0 -3px 0 rgba(0, 0, 0, .25); }
[data-demo="slime-rush"] .mqg-slot__ico { display: block; inline-size: 27px; block-size: 27px; }
[data-demo="slime-rush"] .mqg-slot__cd { position: absolute; inset: 0; background: conic-gradient(rgba(20, 16, 36, .74) calc(var(--cd, 0) * 1turn), transparent 0); }
[data-demo="slime-rush"] .mqg-slot__key { position: absolute; inset-block-start: -9px; inset-inline-start: -6px; padding: 1px 4px; font: 400 12px/1.2 "Pipette", "Baloo 2", system-ui, sans-serif; color: #2a2542; background: #fff6c2; box-shadow: 0 0 0 2px #2a2542; border-radius: 2px; white-space: nowrap; }
[data-demo="slime-rush"] .mqg-slot.is-cool .mqg-slot__ico { opacity: .5; }
[data-demo="slime-rush"] .mqg-slot.is-locked { opacity: .3; }
[data-demo="slime-rush"] .mqg-slot--gold { color: #ffc95c; }
[data-demo="slime-rush"] .mqg-slot--gold.is-charged { color: #2a2542; background: #ffc95c; box-shadow: 0 0 0 2px #2a2542, 0 0 0 4px #fff6c2, inset 0 -3px 0 rgba(0, 0, 0, .2); }
[data-demo="slime-rush"] .mqg-slot.is-new { animation: mqsr-new .5s steps(3) 3; }
@keyframes mqsr-new { 50% { background: #fff6c2; color: #2a2542; } }
@media (max-height: 520px) { [data-demo="slime-rush"] .mqg-dock { inset-block-end: 6px; } [data-demo="slime-rush"] .mqg-slot { inline-size: 36px; block-size: 36px; } }
@media (prefers-reduced-motion: reduce) { [data-demo="slime-rush"] .mqg-slot.is-new { animation: none; } }