/* heartstone-colossus: the stage size, the Play screen before the tap, and the boss HUD (the bar, the cast plate, the
   ribbon line, the intro banner, Skip). The game's own overlay CSS (/try/game/game.css) loads after the tap. Logical
   properties; no scale, rotate or blur (S12); moves in held steps; calm mode holds still. */
[data-demo="heartstone-colossus"] { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; max-block-size: calc(100svh - 120px); min-block-size: 420px; overflow: hidden; background: #2a2542; }
@media (max-width: 699px) { [data-demo="heartstone-colossus"] { aspect-ratio: auto; block-size: var(--stage-h, clamp(480px, calc(100svh - 96px), 780px)); max-block-size: none; } }
/* a phone held sideways (short viewport): the stage fits under the site bar once scrolled to (or goes Fullscreen) */
@media (max-height: 480px) and (min-width: 700px) { [data-demo="heartstone-colossus"] { aspect-ratio: auto; block-size: var(--stage-h, calc(100svh - 64px)); min-block-size: 280px; max-block-size: none; } }
[data-demo="heartstone-colossus"] .mqg { position: absolute; inset: 0; overflow: hidden; background: var(--stage-bg, #2a2542); outline: none; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[data-demo="heartstone-colossus"] .mqg-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; cursor: pointer; }
[data-demo="heartstone-colossus"] .mqg-play[hidden] { display: none; }
[data-demo="heartstone-colossus"] .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="heartstone-colossus"] .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, .92); box-shadow: 0 10px 30px rgba(42, 37, 66, .35); text-align: center; }
[data-demo="heartstone-colossus"] .mqg-play__title { margin: 0; font: 700 20px/1.2 "Baloo 2", system-ui, sans-serif; color: #2a2542; }
[data-demo="heartstone-colossus"] .mqg-playbtn { min-inline-size: 180px; min-block-size: 56px; font-size: 22px; }
[data-demo="heartstone-colossus"] .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="heartstone-colossus"] .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="heartstone-colossus"] .mqg-asyou, [data-demo="heartstone-colossus"] .mqg-turn { margin: 0; font: 600 14px/1.3 "Baloo 2", system-ui, sans-serif; color: #4b4262; }
[data-demo="heartstone-colossus"] .mqg-turn { display: none; }
@media (orientation: portrait) and (max-width: 699px) { [data-demo="heartstone-colossus"] .mqg-turn { display: block; } }
[data-demo="heartstone-colossus"] .mqg-loading, [data-demo="heartstone-colossus"] .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="heartstone-colossus"] .is-loading .mqg-loading { display: flex; }
[data-demo="heartstone-colossus"] .is-error .mqg-failed { display: block; }
[data-demo="heartstone-colossus"] .mqg-strip { inline-size: 48px; block-size: 8px; background: repeating-linear-gradient(90deg, #2a2542 0 8px, #20b5fa 8px 16px); animation: mqb-strip .5s steps(2) infinite; }
@keyframes mqb-strip { to { background-position: 16px 0; } }
@media (prefers-reduced-motion: reduce) { [data-demo="heartstone-colossus"] .mqg-strip { animation: none; } }
@media (max-height: 480px) { [data-demo="heartstone-colossus"] .mqg-still { inline-size: 960px; block-size: 600px; margin-inline-start: -480px; margin-block-start: -300px; } }
/* the Play still at the GAME's scale (media/play.webp + play-phone.webp, probe-play.mjs --still-meta with the slice's
   ?still=1 beat: the fight framing, the first Heavy Palm raised over Hana; numbers from try/game/ssr.mjs): one image px is
   one 0.5 u grain cell, centred: 2 CSS px per px on desktop frames (c = 4), 1 on a short landscape frame (c = 2) and on
   phones (the portrait still, the world's full height). object-fit keeps any other still's shape. */
[data-demo="heartstone-colossus"] .mqg-still { object-fit: cover; }
[data-demo="heartstone-colossus"] .mqg-still--game { inline-size: calc(var(--dw) * 2px); block-size: calc(var(--dh) * 2px); margin-inline-start: calc(var(--dw) * -1px); margin-block-start: calc(var(--dh) * -1px); }
@media (max-height: 479px) and (min-width: 700px) { [data-demo="heartstone-colossus"] .mqg-still--game { inline-size: calc(var(--dw) * 1px); block-size: calc(var(--dh) * 1px); margin-inline-start: calc(var(--dw) * -.5px); margin-block-start: calc(var(--dh) * -.5px); } }
/* phones: the portrait still hangs from the stage's top (the face, the raised palm and Hana under it stay in view) and
   the Play card sits low, over the floor's south edge and the trees, never over Hana */
@media (max-width: 699px) {
  [data-demo="heartstone-colossus"] .mqg-still--game { inset-block-start: 0; inline-size: calc(var(--pw) * 1px); block-size: calc(var(--ph) * 1px); margin-inline-start: calc(var(--pw) * -.5px); margin-block-start: 0; }
  [data-demo="heartstone-colossus"] .mqg-play:has(.mqg-still--game) { place-items: end center; padding-block-end: 16px; }
}
/* ---------------------------------------------------------------- the boss HUD (inside .mqg-ui after the tap)
   Desktop frames: the bar sits at the BOTTOM centre, under Hana's floor (review 2026-10-03: at the top it covered the
   Colossus's eyes in most tower frames; the face is always north of Hana, so the bottom never covers it; keyboard
   players have no thumbs there). Touch frames keep it on top, clear of the thumbs (the touch band holds Hana higher). */
[data-demo="heartstone-colossus"] .mqb { position: absolute; inset-block-end: 12px; inset-inline-start: 50%; translate: -50% 0; inline-size: min(40%, 420px); display: grid; gap: 4px; padding: 6px 10px 7px; color: #fffaf0; background: rgba(42, 37, 66, .84); box-shadow: 0 0 0 2px #2a2542, inset 0 0 0 1px rgba(255, 250, 240, .25); border-radius: 2px; }
[data-demo="heartstone-colossus"] .mqg-ui.has-touch .mqb { inset-block-start: 8px; inset-block-end: auto; }
/* Hana under the bar (hud.anchor): the bar fades to a ghost, so it never hides her (held, no transition) */
[data-demo="heartstone-colossus"] .mqb.is-ghost { opacity: .28; }
[data-demo="heartstone-colossus"] .mqb[hidden], [data-demo="heartstone-colossus"] .mqb-line[hidden], [data-demo="heartstone-colossus"] .mqb-banner[hidden], [data-demo="heartstone-colossus"] .mqb-skip[hidden], [data-demo="heartstone-colossus"] .mqb-cast[hidden] { display: none; }
[data-demo="heartstone-colossus"] .mqb-head { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1; white-space: nowrap; }
[data-demo="heartstone-colossus"] .mqb-gem { inline-size: 16px; block-size: 16px; color: #20b5fa; }
[data-demo="heartstone-colossus"] .mqb.is-p2 .mqb-gem { color: #db84a1; }
[data-demo="heartstone-colossus"] .mqb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
[data-demo="heartstone-colossus"] .mqb-pips { display: flex; gap: 3px; }
[data-demo="heartstone-colossus"] .mqb-pip { inline-size: 7px; block-size: 7px; background: #4b4262; box-shadow: 0 0 0 1px #fffaf0; }
[data-demo="heartstone-colossus"] .mqb-pip.is-on { background: #ffc95c; }
[data-demo="heartstone-colossus"] .mqb-track { position: relative; block-size: 10px; background: #1f2a33; box-shadow: 0 0 0 2px #141821; }
[data-demo="heartstone-colossus"] .mqb-fill, [data-demo="heartstone-colossus"] .mqb-chip { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--v, 1) * 100%); }
[data-demo="heartstone-colossus"] .mqb-chip { background: #fff6c2; }
[data-demo="heartstone-colossus"] .mqb-fill { background: #20b5fa; box-shadow: inset 0 3px 0 #6ac2f3, inset 0 -2px 0 #0679dd; }
[data-demo="heartstone-colossus"] .mqb.is-p2 .mqb-fill { background: #c4668c; box-shadow: inset 0 3px 0 #e6a3af, inset 0 -2px 0 #85347a; }
[data-demo="heartstone-colossus"] .mqb-notch { position: absolute; inset-block: -3px; inset-inline-start: calc(50% - 1px); inline-size: 2px; background: #fffaf0; box-shadow: 0 0 0 1px #141821; }
[data-demo="heartstone-colossus"] .mqb-cast { margin: 0; padding: 2px 6px; font-size: 12px; line-height: 1; color: #2a2542; background: #fff6c2; box-shadow: 0 0 0 1px #2a2542; border-radius: 2px; white-space: nowrap; }
[data-demo="heartstone-colossus"] .mqb-line { position: absolute; inset-block-start: 84px; inset-inline-start: 8px; margin: 0; padding: 6px 14px; font-size: 17px; color: #2a2542; background: #fff6c2; box-shadow: 0 0 0 2px #2a2542, 0 0 0 4px #ffc95c; border-radius: 2px; white-space: nowrap; }
[data-demo="heartstone-colossus"] .mqb-line[data-tone="rose"] { background: #f7b6c6; box-shadow: 0 0 0 2px #2a2542, 0 0 0 4px #dc4f58; }
[data-demo="heartstone-colossus"] .mqb-line[data-tone="royal"] { color: #fffaf0; background: #3f2b8f; box-shadow: 0 0 0 2px #2a2542, 0 0 0 4px #8f93e0; }
[data-demo="heartstone-colossus"] .mqb-banner { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 4px; padding: 10px 26px 12px; color: #fffaf0; background: rgba(20, 24, 33, .88); box-shadow: 0 0 0 3px #141821, 0 0 0 5px #20b5fa; border-radius: 2px; white-space: nowrap; }
[data-demo="heartstone-colossus"] .mqb-banner b { font-size: 26px; font-weight: 400; }
[data-demo="heartstone-colossus"] .mqb-banner span { font-size: 15px; color: #8cdbf0; }
[data-demo="heartstone-colossus"] .mqb-skip { position: absolute; inset-block-start: 64px; inset-inline-end: 12px; min-inline-size: 72px; min-block-size: 44px; pointer-events: auto; }
/* the sample question sits low on the floor's corner, never over the Colossus (it towers in the top half of the frame);
   on frames under 1000 px it rides above the bottom boss bar */
[data-demo="heartstone-colossus"] .mqg-ui .mqg-quiz, [data-demo="heartstone-colossus"] .mqg-ui .mqg-qchip { inset-block-start: auto; inset-block-end: 12px; }
@container mqg (max-width: 999px) { [data-demo="heartstone-colossus"] .mqg-ui .mqg-quiz, [data-demo="heartstone-colossus"] .mqg-ui .mqg-qchip { inset-block-end: 76px; } }
/* the sample question on touch frames and on every frame 560 px wide or less (review 2026-10-03: on a phone it spanned
   the lower half and hid Hana, the stick and every button, the binding "never blocks play" rule): a compact card in the
   top END corner under the HUD row, 40 % wide at most, over neither the stick half nor the thumbs; it folds to the
   "!" chip after 10 s. Selectors at (0,4,0) and up: game.css loads after this file. */
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-quiz { inset-block-start: 96px; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: 8px; inline-size: min(40%, 240px); max-block-size: calc(100% - 96px - 236px); overflow-y: auto; gap: 5px; padding: 7px 8px 8px; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-quiz__kick { font-size: 11px; gap: 5px; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-bang { inline-size: 14px; block-size: 14px; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-quiz__q { font-size: 13px; line-height: 1.2; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-quiz__opts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-opt { justify-content: center; min-block-size: 40px; padding: 2px 6px; text-align: center; font-size: 14px; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-opt kbd { display: none; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-quiz__why { font-size: 12px; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui.has-touch .mqg-qchip { inset-block-start: 96px; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: 8px; }
/* touch frames ask FOLDED (index.js askQuiz): the chip says "! Sample question" and bobs gently until tapped */
[data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-qchip--label { inline-size: auto; block-size: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 4px; font-size: 13px; line-height: 1; white-space: nowrap; animation: mqb-chip 1.2s steps(2, jump-none) infinite alternate; }
[data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-qchip__bang { display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; font-size: 20px; color: var(--paper, #fffaf0); background: var(--ink, #2a2542); border-radius: 2px; }
@keyframes mqb-chip { from { translate: 0 0; } to { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-qchip--label { animation: none; } }
[data-demo="heartstone-colossus"]:where(html.still *) .mqg .mqg-ui .mqg-qchip--label { animation: none; }
@container mqg (max-width: 560px) {
  /* phones: a slim bar under the sound / fullscreen / pause row, BESIDE the HP / MP / Energy box (review 2026-10-03: a
     full-width bar at 58 px hid the Energy row, the quiz's meter), so the face keeps its place under it */
  [data-demo="heartstone-colossus"] .mqb, [data-demo="heartstone-colossus"] .mqg-ui.has-touch .mqb { inset-block-start: 58px; inset-block-end: auto; inset-inline-start: 118px; inset-inline-end: 8px; translate: none; inline-size: auto; gap: 3px; padding: 3px 8px 4px; }
  [data-demo="heartstone-colossus"] .mqb-head { font-size: 12px; }
  [data-demo="heartstone-colossus"] .mqb-gem { inline-size: 12px; block-size: 12px; }
  [data-demo="heartstone-colossus"] .mqb-track { block-size: 6px; }
  /* the ribbon line rides ABOVE Hana's head and her keycap (hud.anchor sets her feet's y; review 2026-10-03: at a
     fixed 204 px from the bottom it covered her during the roar and the victory), never higher than under the bar */
  [data-demo="heartstone-colossus"] .mqb-line { inset-block-start: max(96px, calc(var(--mqb-feet, 560px) - 132px)); inset-block-end: auto; inset-inline-start: 50%; translate: -50% 0; font-size: 15px; }
  /* while the visitor has the question open (end corner), the line moves to the start side beside it */
  [data-demo="heartstone-colossus"] .mqg-ui:has(.mqg-quiz:not([hidden])) .mqb-line { inset-inline-start: 8px; translate: none; max-inline-size: calc(58% - 20px); }
  [data-demo="heartstone-colossus"] .mqb-banner { inset-block-start: 42%; }
  [data-demo="heartstone-colossus"] .mqb-banner b { font-size: 20px; }
  [data-demo="heartstone-colossus"] .mqb-skip { inset-block-start: auto; inset-block-end: 196px; }
}
@container mqg (max-height: 480px) {
  /* landscape phones: a slim bar (the face is just under it) and the line low between the thumbs */
  [data-demo="heartstone-colossus"] .mqb { gap: 3px; padding: 3px 8px 4px; }
  [data-demo="heartstone-colossus"] .mqb-head { font-size: 12px; }
  [data-demo="heartstone-colossus"] .mqb-gem { inline-size: 12px; block-size: 12px; }
  [data-demo="heartstone-colossus"] .mqb-track { block-size: 6px; }
  [data-demo="heartstone-colossus"] .mqb-line { inset-block-start: auto; inset-block-end: 12px; inset-inline-start: 50%; translate: -50% 0; font-size: 15px; }
}
@container mqg (max-width: 560px) {
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-quiz { inset-block-start: 96px; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: 8px; inline-size: min(40%, 240px); max-block-size: calc(100% - 96px - 236px); overflow-y: auto; gap: 5px; padding: 7px 8px 8px; }
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-quiz__kick { font-size: 11px; gap: 5px; }
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-bang { inline-size: 14px; block-size: 14px; }
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-quiz__q { font-size: 13px; line-height: 1.2; }
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-quiz__opts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-opt { justify-content: center; min-block-size: 40px; padding: 2px 6px; text-align: center; font-size: 14px; }
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-opt kbd { display: none; }
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-quiz__why { font-size: 12px; }
  [data-demo="heartstone-colossus"] .mqg .mqg-ui .mqg-qchip { inset-block-start: 96px; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: 8px; }
}