/* Pixel Quest. The play surface is the canvas; around it the page keeps solid graphite tones, readable words
 * (14px and up) and the shared tempos: 70ms presses, 180ms state changes, 240ms entrances. The touch keys are keys
 * in the mark's own shape: a lit top over a darker band, pressed down when held. */
.quest-page{--quest-sky:#181818;--quest-plate:#222222;--quest-key:#2b2b2b;--quest-key-band:#1f1f1f;--quest-ink:#ededed;--quest-muted:#a3a3a3}

/* The board: the shared frame around a rounded canvas, as Flappy Key's. */
.quest-page .quest-board{position:relative;touch-action:pinch-zoom}
.quest-canvas{display:block;width:100%;height:100%;border-radius:10px;background:var(--quest-sky)}
/* The board takes focus only so keys reach the game; the hero shows where play is (graphite.css). */
.quest-page .quest-board:focus,.quest-page .quest-board:focus-visible{outline:none}

/* Hearts in the stats: three small pixel hearts. */
.quest-hearts{display:inline-flex;align-items:center;gap:5px;min-height:1em}
.quest-hearts i{display:block;line-height:0}
.quest-hearts svg{display:block;width:21px;height:18px}
.quest-coins{display:inline-flex;align-items:center;gap:7px}
.quest-coin{display:block;line-height:0}
.quest-coin svg{display:block;width:auto;height:14px}

/* Cards over the board: the level chooser, the pause, a clear, the last heart. */
.quest-card{position:absolute;left:50%;top:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:0;box-sizing:border-box;width:min(360px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:22px 18px 20px;border-radius:16px;background:var(--quest-plate);box-shadow:0 4px 12px #00000047;color:var(--quest-ink);text-align:center;transform:translate(-50%,-50%);scrollbar-width:none}
.quest-card::-webkit-scrollbar{display:none}
.quest-card.is-entering{animation:quest-card-in 240ms cubic-bezier(.2,.8,.2,1) both}
@keyframes quest-card-in{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}
.quest-card-eyebrow{margin:0 0 6px;font-size:14px;line-height:1.4;color:var(--quest-muted)}
.quest-card h2{margin:0;font-size:26px;line-height:1.2;font-weight:400;letter-spacing:-.02em}
.quest-card-detail{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--quest-muted)}
/* Six keys in one row down to the narrowest card (6 × 44 + 5 × 7 = 299px). */
.quest-levels{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:18px 0 0}
.quest-level{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:11px;background:var(--quest-key);box-shadow:inset 0 -3px 0 var(--quest-key-band);color:#d8d8d8;font:500 16px/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color 180ms,color 180ms,transform 70ms}
.quest-level:hover:enabled{background:#333333}
.quest-level:active:enabled{transform:translateY(1px)}
.quest-level[aria-pressed=true]{background:var(--quest-ink);box-shadow:inset 0 -3px 0 #cecece;color:#181818}
.quest-level[data-state=cleared]::after{content:'';position:absolute;bottom:8px;width:4px;height:4px;border-radius:1px;background:currentColor;opacity:.55}
.quest-level:disabled{background:#1e1e1e;box-shadow:none;color:#5e5e5e;cursor:default}
.quest-card-metrics{display:flex;justify-content:center;gap:28px;margin:16px 0 0}
.quest-card-metrics div{display:flex;flex-direction:column;align-items:center;gap:2px}
.quest-card-metrics dt{font-size:14px;color:var(--quest-muted)}
.quest-card-metrics dd{margin:0;font-size:26px;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.quest-card-metrics small{display:block;margin-top:2px;font-size:14px;letter-spacing:0;color:#cfcfcf}
/* The main action takes the first row; the others share the row below it. */
.quest-card-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;width:100%}
.quest-card-actions .quest-button{flex:1 1 0;min-width:0}
.quest-card-actions .quest-button.is-primary{flex-basis:100%}
.quest-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:88px;height:44px;padding:0 16px;border:0;border-radius:11px;background:var(--quest-key);box-shadow:inset 0 -3px 0 var(--quest-key-band);color:#dcdcdc;font:450 14px/1 var(--sans);cursor:pointer;transition:background-color 180ms,transform 70ms}
.quest-button:hover{background:#333333}
.quest-button:active{transform:translateY(1px)}
.quest-button.is-primary{background:var(--quest-ink);box-shadow:inset 0 -3px 0 #c4c4c4;color:#1c1c1c}
.quest-button.is-primary:hover{background:#ffffff}
.quest-button svg{width:16px;height:16px;fill:currentColor}
.quest-card :is(button):focus-visible,.quest-pad .quest-key:focus-visible,.quest-action:focus-visible{outline:2px solid #d6d6d6;outline-offset:3px}

/* How to play: words at reading size on every screen. */
.quest-page .game-help>summary,.quest-page .game-help .rules-list li,.quest-page .game-help .rules-list li span{font-size:14px}

/* The pause key in the panel: a quiet key, not the light call to action the other games use. */
.quest-page .game-panel-bottom .quest-action{justify-content:center;background:var(--quest-key);box-shadow:inset 0 -3px 0 var(--quest-key-band);color:#d6d6d6}
.quest-page .game-panel-bottom .quest-action:active{transform:translateY(1px)}
.quest-page .game-status{font-size:14px;line-height:1.4;color:var(--quest-muted)}

/* Touch keys: hidden for a mouse and keyboard, shown wherever a finger plays. */
.quest-pad{display:none}
.quest-key{position:relative;display:grid;place-items:center;padding:0;border:0;border-radius:18px;background:var(--quest-key);box-shadow:inset 0 -5px 0 var(--quest-key-band);color:#d2d2d2;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:transform 70ms ease-out,box-shadow 70ms ease-out,background-color 70ms}
.quest-key svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.quest-key[data-held=true]{transform:translateY(3px);box-shadow:inset 0 -2px 0 var(--quest-key-band);background:#353535;color:#f2f2f2}
.quest-jump{background:var(--quest-ink);box-shadow:inset 0 -6px 0 #c4c4c4;color:#1c1c1c}
.quest-jump[data-held=true]{background:#ffffff;box-shadow:inset 0 -2px 0 #c4c4c4;color:#000000}
@media (prefers-reduced-motion:reduce){.quest-key,.quest-level,.quest-button{transition:none}.quest-key[data-held=true]{transform:none}.quest-card.is-entering{animation:none}}

/* ── Desktop and tablets: the board beside the rail, 16:10 where the height allows and down to 5:4 where the width
   runs out, so a narrow window still gets a tall board (the renderer shows the same rows at any shape) ─────────── */
@media (min-width:761px) and (min-height:501px), (min-width:1001px) {
  .quest-page .play-layout{--quest-ratio:1.6;--quest-squarest:1.25;--quest-room:calc(100vw - var(--site-nav-offset,0px) - var(--game-aside-space,0px) - 232px);--play-height:max(300px,min(var(--desktop-game-height),calc(var(--quest-room) / var(--quest-squarest))));--play-width:min(var(--quest-room),calc(var(--play-height) * var(--quest-ratio)))}
  .quest-page .game-panel{grid-template-rows:100px auto minmax(0,1fr) 66px}
  .quest-page .game-intro h1{font-size:26px;line-height:1.15}
  .quest-page .stats-row{gap:16px}
  .quest-page .stat-label{font-size:14px;line-height:18px}
  .quest-page .stat-value{font-size:28px}
  .quest-page .quest-hearts{height:30px}
  .quest-page .game-panel-bottom > .game-status{font-size:14px;line-height:1.4;color:var(--quest-muted)}
  .quest-page .game-panel-bottom .solid-button.quest-action{background:var(--quest-key);box-shadow:inset 0 -3px 0 var(--quest-key-band);color:#d6d6d6;font-size:14px}
}
@media (min-width:761px) and (min-height:501px) and (max-height:650px), (min-width:1001px) and (max-height:650px) {
  .quest-page .game-panel{grid-template-rows:84px auto minmax(0,1fr) 66px}
  .quest-page .stat-label{font-size:14px}
  .quest-page .stat-value{font-size:22px}
}
/* An upright screen (a tablet held portrait): a squarer board uses the height. */
@media (min-width:761px) and (min-height:501px) and (orientation:portrait), (min-width:1001px) and (orientation:portrait) {
  .quest-page .play-layout{--quest-ratio:1.25}
}
/* A tablet held in both hands: the keys sit under the board, never over it. */
@media (any-pointer:coarse) and (min-width:761px) and (min-height:501px) {
  .quest-page .play-layout{--play-height:max(260px,min(calc(var(--desktop-game-height) - 132px),calc(var(--quest-room) / var(--quest-squarest))))}
  .quest-pad{position:absolute;top:calc(100% + 16px);left:0;display:flex;justify-content:space-between;align-items:flex-end;width:var(--play-width)}
  .quest-pad-move{display:flex;gap:12px}
  .quest-pad .quest-key{width:84px;height:84px}
  .quest-pad .quest-jump{width:112px;height:96px;border-radius:22px}
}

/* ── Phones: the board on top, the keys under the thumbs ─────────────────────────────────────────────────────── */
@media (max-width:760px), (max-width:1000px) and (max-height:500px) {
  body.quest-page{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
  .quest-page .game-panel.quest-panel{display:flex;flex-direction:column}
  .quest-page .stats-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:32px}
  .quest-page .stats-row>div{display:flex;align-items:center;gap:6px}
  .quest-page .stats-row .stat-label{font-size:14px;line-height:1.2;color:var(--quest-muted)}
  .quest-page .stats-row .stat-value{font-size:20px;line-height:1.2}
  .quest-page .stats-row>div:nth-child(n+2) .stat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .quest-page .quest-hearts svg{width:17px;height:15px}
  .quest-page .board-container.quest-board{width:100%;margin:6px 0 0;aspect-ratio:6 / 7;max-height:calc(100dvh - 330px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .quest-page .game-panel-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;margin-top:6px}
  .quest-page .game-panel-bottom .quest-action{min-width:88px;min-height:44px;padding:0 14px;font-size:14px;border-radius:11px}
  .quest-pad{position:fixed;left:0;right:0;bottom:0;z-index:16;display:flex;justify-content:space-between;align-items:flex-end;padding:0 max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));pointer-events:none}
  .quest-pad>*{pointer-events:auto}
  .quest-pad-move{display:flex;gap:10px}
  .quest-pad .quest-key{width:76px;height:76px}
  .quest-pad .quest-jump{width:104px;height:92px;border-radius:22px}
}
@media (max-width:360px) {
  .quest-pad .quest-key{width:68px;height:68px}
  .quest-pad .quest-jump{width:92px;height:84px}
}
/* Landscape phones: the board between the thumbs, as tall as the screen allows; the words sit in the side columns. */
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape) {
  body.quest-page{padding-bottom:0}
  .quest-page .play-layout.quest-layout{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-items:start;column-gap:14px;row-gap:2px;max-width:none;margin:0}
  .quest-page .quest-layout :is(.play-column,.game-panel,.stats-row){display:contents}
  .quest-page .quest-layout .game-intro{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:flex-start;gap:4px;margin:0;padding:0}
  .quest-page .quest-layout .game-intro h1{font-size:18px;line-height:1.2;white-space:nowrap}
  .quest-page .quest-layout .game-intro .game-help{flex:none;margin:0}
  .quest-page .quest-layout .game-intro .game-help>summary{white-space:nowrap}
  .quest-page .quest-layout .stats-row>div{display:flex;align-items:center;gap:8px;min-height:30px}
  .quest-page .quest-layout .stats-row>div:nth-child(1){grid-column:1;grid-row:2;justify-self:start}
  .quest-page .quest-layout .stats-row>div:nth-child(2){grid-column:1;grid-row:3;justify-self:start}
  .quest-page .quest-layout .stats-row>div:nth-child(3){grid-column:3;grid-row:2;justify-self:end}
  .quest-page .quest-layout .stats-row>div:nth-child(4){grid-column:3;grid-row:3;justify-self:end}
  .quest-page .quest-layout .stats-row>div:nth-child(n+2) .stat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .quest-page .quest-layout .game-panel-bottom{grid-column:3;grid-row:1;flex-direction:row;justify-content:flex-end;justify-self:end;margin:0;min-height:44px}
  .quest-page .quest-layout .game-panel-bottom .game-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .quest-page .quest-layout .board-container.quest-board{grid-column:2;grid-row:1 / -1;--quest-h:min(calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc((100vw - 320px - env(safe-area-inset-left) - env(safe-area-inset-right)) / 1.6));width:calc(var(--quest-h) * 1.6);height:var(--quest-h);max-height:none;aspect-ratio:auto;margin:0}
  .quest-pad{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .quest-pad .quest-key{width:62px;height:72px}
  .quest-pad .quest-jump{width:96px;height:88px}
}

/* ── Beside the frame's aside (game-frame.css, body.game-aside-beside) ───────────────────────────────────────────
   The aside names the game and says how to play, so the page's own title and 玩法 step out of sight; the site's "…"
   still presses 玩法, which then opens as a card in the board's corner. The board takes the stage: as wide as the column
   (24px from the panel and from the aside), as tall as the window allows below the frame's bar, from 16:10 down to 5:4
   so a narrow column still gets a tall board. Board, numbers and keys are one window: the numbers, the words and the key
   along its top, inside it, and the board under them. */
body.game-aside-beside[data-game=quest]>[data-game-stage]{margin:0;padding:0 0 0 24px}
body.game-aside-beside[data-game=quest]>[data-game-stage]>main{padding:0 0 24px}
body.game-aside-beside .quest-layout{
  --stage-w:calc(100vw - var(--site-nav-offset,0px) - var(--game-aside-space,0px) - 24px);
  --stage-h:calc(100dvh - var(--site-header-h,60px) - 24px - var(--quest-pad-room,0px));
  --hud-h:56px;--hud-gap:6px;
  --play-height:max(280px,min(calc(var(--stage-h) - var(--hud-h) - var(--hud-gap)),calc((var(--stage-w) - 12px) / 1.25)));
  --play-width:min(calc(var(--stage-w) - 12px),calc(var(--play-height) * 1.6));
  width:calc(var(--play-width) + 12px);height:auto;margin:0 auto}
body.game-aside-beside .quest-layout .play-column{height:auto}
body.game-aside-beside .quest-layout .game-panel{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--hud-h) var(--play-height);gap:0 24px;height:auto;padding:0 6px var(--hud-gap);border-radius:22px;background:#1b1b1b;box-shadow:inset 0 2px 5px #00000050,inset 0 -1px 2px #ffffff04}
body.game-aside-beside .quest-layout .board-container{grid-column:1 / -1;grid-row:2;box-shadow:none}
body.game-aside-beside .quest-layout .stats-row{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:24px;padding:0 0 0 14px}
body.game-aside-beside .quest-layout .stats-row>div{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
body.game-aside-beside .quest-layout .stat-label{font-size:14px;line-height:20px}
body.game-aside-beside .quest-layout .stat-value{display:flex;align-items:center;height:28px;font-size:22px;line-height:28px}
body.game-aside-beside .quest-layout .quest-hearts{height:28px}
body.game-aside-beside .quest-layout .game-panel-bottom{grid-column:2;grid-row:1;flex-direction:row;align-items:center;justify-content:flex-end;align-self:center;gap:16px;width:auto;min-width:0;padding:0 4px 0 0}
body.game-aside-beside .quest-layout .game-panel-bottom>.game-status{min-width:0;max-width:320px;font-size:14px;line-height:20px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-aside-beside .quest-layout .game-panel-bottom .solid-button.quest-action{min-height:40px;height:40px}
body.game-aside-beside .quest-layout .game-panel-bottom .solid-button.quest-action{width:auto;min-width:96px}
/* The page's own title and 玩法: out of sight, still in the page; opened by the site's "…", 玩法 is a card in the corner. */
body.game-aside-beside .quest-layout .game-intro{top:calc(var(--hud-h) + 12px);right:18px;z-index:30;width:auto;max-width:calc(var(--play-width) - 24px)}
body.game-aside-beside .quest-layout .game-intro>h1,
body.game-aside-beside .quest-layout .game-help:not([open])>summary:not(:focus-visible){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.game-aside-beside .quest-layout .game-help{margin:0}
body.game-aside-beside .quest-layout .game-help:not([open])>summary:focus-visible{min-height:36px;padding:0 12px;border-radius:10px;background:var(--quest-plate);color:var(--quest-ink)}
body.game-aside-beside .quest-layout .game-help[open]{position:static;width:min(340px,calc(var(--play-width) - 24px));max-height:calc(var(--play-height) - 24px);padding:12px 18px 14px;border-radius:14px;background:var(--quest-plate);box-shadow:0 4px 12px #00000047}
@media (forced-colors:active){
  body.game-aside-beside .quest-layout :is(.game-help[open],.game-help:not([open])>summary:focus-visible){border:1px solid CanvasText}
}
@media (any-pointer:coarse){
  body.game-aside-beside .quest-layout{--quest-pad-room:112px}
  body.game-aside-beside .quest-layout .quest-pad{top:calc(100% + 16px)}
}
/* Phones: the game keeps the whole screen and the frame's cards begin below it; the touch keys stand at the foot of
   the game's own screen rather than over whatever follows it. */
@media (max-width:760px), (max-width:1000px) and (max-height:500px) {
  body.game-framed.quest-page>[data-game-stage]{min-height:100dvh}
  body.game-framed.quest-page .quest-pad{position:absolute}
}