/* living-meadow: 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="living-meadow"] { 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="living-meadow"] { aspect-ratio: auto; block-size: var(--stage-h, clamp(480px, calc(100svh - 96px), 780px)); max-block-size: none; } }
[data-demo="living-meadow"] .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; }
/* only a RUNNING game owns touch and the wheel: before the Play tap, paused and finished, a swipe or the wheel over the
   stage scrolls the page (a visitor from a link reads on, and reaches the page's finish beat) */
[data-demo="living-meadow"][data-game-state="playing"] .mqg { touch-action: none; overscroll-behavior: contain; }
/* the Play screen (DS 12.2): the card docks low and centred; the still puts Hana's focal point at about 38 % of the
   stage height, above the card, while it always covers the stage (the still is framed on her, image px 417 of 900) */
[data-demo="living-meadow"] .mqg-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: end center; padding: 0 16px 28px; cursor: pointer; }
[data-demo="living-meadow"] .mqg-play[hidden] { display: none; }
[data-demo="living-meadow"] .mqg-still { position: absolute; inset-inline-start: 50%; inset-block-start: clamp(calc(100% - 450px), calc(38% + 33px), 450px); inline-size: 1440px; block-size: 900px; margin-inline-start: -720px; margin-block-start: -450px; image-rendering: pixelated; max-inline-size: none; }
[data-demo="living-meadow"] .mqg-play__card { position: relative; display: grid; justify-items: center; gap: 14px; padding: 20px 26px 18px; max-inline-size: min(100%, 440px); border-radius: 20px; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 30px rgba(42, 37, 66, .25); text-align: center; }
[data-demo="living-meadow"] .mqg-play__title { margin: 0; font: 400 30px/1.05 var(--display, "Baloo 2", system-ui, sans-serif); color: #2a2542; text-wrap: balance; }
[data-demo="living-meadow"] .mqg-playbtn { min-inline-size: 180px; min-block-size: 56px; font-size: 22px; }
[data-demo="living-meadow"] .mqg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; font: 600 12.5px/1 var(--font, system-ui, sans-serif); color: #4b4262; }
[data-demo="living-meadow"] .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="living-meadow"] .mqg-asyou, [data-demo="living-meadow"] .mqg-turn { margin: 0; font: 500 13.5px/1.4 var(--font, system-ui, sans-serif); color: #4b4262; }
[data-demo="living-meadow"] .mqg-loading, [data-demo="living-meadow"] .mqg-failed { display: none; margin: 0; align-items: center; gap: 8px; font: 500 13.5px/1.4 var(--font, system-ui, sans-serif); color: #2a2542; }
[data-demo="living-meadow"] .is-loading .mqg-loading { display: flex; }
[data-demo="living-meadow"] .is-error .mqg-failed { display: block; }
[data-demo="living-meadow"] .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="living-meadow"] .mqg-strip { animation: none; } }
@media (max-width: 699px) { [data-demo="living-meadow"] .mqg-play { padding-block-end: 20px; } [data-demo="living-meadow"] .mqg-play__title { font-size: 24px; } }
@media (max-height: 480px) { [data-demo="living-meadow"] .mqg-still { inset-block-start: clamp(calc(100% - 300px), calc(38% + 22px), 300px); inline-size: 960px; block-size: 600px; margin-inline-start: -480px; margin-block-start: -300px; } }
/* the six meadow marks in the HUD (pixel glyphs; the label is i18n): dim until found, gold when lit, cream while the
   gift ring shows them, a 1 px pop when one lights (12 fps steps, none in calm motion) */
[data-demo="living-meadow"] .mqg-marks { display: flex; gap: 5px; align-self: center; padding: 6px 9px; background: rgba(42, 37, 66, .78); box-shadow: 0 0 0 2px #2a2542; border-radius: 2px; }
[data-demo="living-meadow"] .mqg-mark { display: block; inline-size: 18px; block-size: 18px; color: #908d99; }
[data-demo="living-meadow"] .mqg-mark.is-on { color: #ffc95c; }
[data-demo="living-meadow"] .mqg-mark.is-blink { color: #fff6c2; }
[data-demo="living-meadow"] .mqg-mark.is-pop { color: #fffaf0; translate: 0 -2px; }
@container mqg (max-width: 560px) {
  [data-demo="living-meadow"] .mqg-marks { position: absolute; inset-block-start: 58px; inset-inline-start: 50%; translate: -50% 0; gap: 4px; padding: 5px 7px; }
  [data-demo="living-meadow"] .mqg-mark { inline-size: 14px; block-size: 14px; }
}
/* the finish card on a phone-wide stage: the keys wrap and the portrait sits over the stats, so nothing leaves the
   stage (the shared card keeps both side by side from 561 px; reported to the runtime for every slice) */
@container mqg (max-width: 560px) {
  [data-demo="living-meadow"] .mqg-card--finish { inline-size: calc(100% - 16px); }
  [data-demo="living-meadow"] .mqg-card--finish .mqg-row { flex-wrap: wrap; }
  [data-demo="living-meadow"] .mqg-card--finish .mqg-finish { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  [data-demo="living-meadow"] .mqg-card--finish .mqg-stats { inline-size: 100%; }
}