/* Shell Shot. The play surface is the canvas (render.mjs: the pond in the mark's cells); 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 keys under the board are keys in Keystone's manner: a solid top over a darker band, pressed down when
 * held. The board is 5:4 everywhere: the pond is drawn whole and centred, its ground carried on to the canvas's edges. */
.turtle-page{--tt-ground:#181818;--tt-plate:#222222;--tt-key:#2b2b2b;--tt-key-band:#1f1f1f;--tt-ink:#ededed;--tt-muted:#a3a3a3}

/* The board: the shared frame round the canvas. Presses on it are the game's; a finger aims while down, so the page
   scrolls from outside it. */
.turtle-page .turtle-board{position:relative;touch-action:none;container:tt-board / size;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:crosshair}
.turtle-page .turtle-board:is([data-card],[data-mode=lost]){cursor:default;touch-action:pinch-zoom}
.turtle-canvas{display:block;width:100%;height:100%;border-radius:10px;background:var(--tt-ground)}
.turtle-page .turtle-board:focus{outline:none}
.turtle-page .turtle-board:focus-visible{outline:2px solid #d6d6d6;outline-offset:2px}

/* Cards over the board: the level chooser, a pause, a clear, a loss. */
.tt-card{position:absolute;left:50%;top:50%;z-index:4;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;width:min(380px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:22px 18px 20px;border-radius:16px;background:var(--tt-plate);box-shadow:0 4px 12px #00000047;color:var(--tt-ink);text-align:center;transform:translate(-50%,-50%);scrollbar-width:none;cursor:default}
.tt-card[hidden]{display:none}
.tt-card::-webkit-scrollbar{display:none}
.tt-card.is-entering{animation:tt-card-in 240ms cubic-bezier(.2,.8,.2,1) both}
@keyframes tt-card-in{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}
.tt-card-eyebrow{margin:0 0 6px;font-size:14px;line-height:1.4;color:var(--tt-muted)}
.tt-card h2{margin:0;font-size:26px;line-height:1.2;font-weight:400;letter-spacing:-.02em}
.tt-card-detail{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--tt-muted)}
.tt-levels{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:18px 0 0}
.tt-levels[hidden]{display:none}
.tt-level{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:11px;background:var(--tt-key);box-shadow:inset 0 -3px 0 var(--tt-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}
.tt-level:hover:enabled{background:#333333}
.tt-level:active:enabled{transform:translateY(1px)}
.tt-level[aria-pressed=true]{background:var(--tt-ink);box-shadow:inset 0 -3px 0 #cecece;color:#181818}
.tt-level[data-state=cleared]::after{content:'';position:absolute;bottom:8px;width:4px;height:4px;border-radius:1px;background:currentColor;opacity:.55}
.tt-level:disabled{background:#1e1e1e;box-shadow:none;color:#5e5e5e;cursor:default}
.tt-card-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;width:100%}
.tt-card-actions .tt-button{flex:1 1 0;min-width:0}
.tt-card-actions .tt-button.is-primary{flex-basis:100%}
.tt-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(--tt-key);box-shadow:inset 0 -3px 0 var(--tt-key-band);color:#dcdcdc;font:450 14px/1 var(--sans);cursor:pointer;transition:background-color 180ms,transform 70ms}
.tt-button:hover{background:#333333}
.tt-button:active{transform:translateY(1px)}
.tt-button.is-primary{background:var(--tt-ink);box-shadow:inset 0 -3px 0 #c4c4c4;color:#1c1c1c}
.tt-button.is-primary:hover{background:#ffffff}

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

/* Under the board: the live status, then the keys: 换珠 (with the two marbles it trades), 暂停 and 选关. */
.turtle-page .game-status{font-size:14px;line-height:1.4;color:var(--tt-muted)}
.tt-keys{display:flex;align-items:center;gap:8px;min-width:0}
.tt-key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:64px;height:44px;padding:0 14px;border:0;border-radius:11px;background:var(--tt-key);box-shadow:inset 0 -3px 0 var(--tt-key-band);color:#d6d6d6;font:450 14px/1 var(--sans);white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color 180ms,transform 70ms}
.tt-key:hover{background:#333333}
.tt-key:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 var(--tt-key-band)}
.tt-key[aria-disabled=true]{color:#6e6e6e}
.tt-key:focus-visible,.tt-card button:focus-visible{outline:2px solid #d6d6d6;outline-offset:3px}
/* The two marbles on the swap key: the one in the mouth, then the smaller one on the shell. */
.tt-dots{display:inline-flex;align-items:center;gap:4px}
.tt-dots i{display:block;width:12px;height:12px;border-radius:4px;transition:background-color 180ms}
.tt-dots i+i{width:8px;height:8px;border-radius:3px}
.tt-key[aria-disabled=true] .tt-dots{opacity:.45}
/* A short board (a small phone, a phone on its side): the card tightens round the same keys. */
@container tt-board (max-height:360px){
  .tt-card{padding:14px 14px 14px}
  .tt-card h2{font-size:22px}
  .tt-card-eyebrow{margin-bottom:2px}
  .tt-card-detail{margin-top:4px}
  .tt-levels{margin-top:10px}
  .tt-card-actions{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.tt-level,.tt-button,.tt-key,.tt-dots i{transition:none}.tt-key:active,.tt-button:active,.tt-level:active:enabled{transform:none}.tt-card.is-entering{animation:none}}
@media (forced-colors:active){
  .turtle-page .turtle-board{outline:1px solid CanvasText}
  .tt-key,.tt-button,.tt-level{outline:1px solid CanvasText}
  .tt-card{border:1px solid CanvasText}
  .tt-dots i{forced-color-adjust:none}
}

/* ── Desktop and tablets: the board beside the rail, 5:4, as tall as the window allows; the column
   beside it holds the numbers, the words and the keys ─────────────────────────────────────────── */
@media (min-width:761px) and (min-height:501px), (min-width:1001px) {
  .turtle-page .play-layout{--tt-ratio:1.25;--tt-squarest:1.25;--tt-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(--tt-room) / var(--tt-squarest))));--play-width:min(var(--tt-room),calc(var(--play-height) * var(--tt-ratio)))}
  .turtle-page .game-panel{grid-template-rows:100px auto minmax(0,1fr) auto}
  .turtle-page .game-intro h1{font-size:26px;line-height:1.15}
  .turtle-page .stats-row{gap:16px}
  .turtle-page .stat-label{font-size:14px;line-height:18px}
  .turtle-page .stat-value{font-size:28px}
  .turtle-page .game-panel-bottom>.game-status{font-size:14px;line-height:1.4;color:var(--tt-muted)}
  .turtle-page .tt-keys{flex-direction:column;align-items:stretch}
  .turtle-page .tt-key{width:100%}
}
@media (min-width:761px) and (min-height:501px) and (max-height:650px), (min-width:1001px) and (max-height:650px) {
  .turtle-page .game-panel{grid-template-rows:84px auto minmax(0,1fr) auto}
  .turtle-page .stat-value{font-size:22px}
}

/* ── Phones: the board on top at 5:4, the status on its own line, the keys on the line under it ─────────────────── */
@media (max-width:760px), (max-width:1000px) and (max-height:500px) {
  .turtle-page .game-panel.turtle-panel{display:flex;flex-direction:column}
  .turtle-page .stats-row{display:flex;justify-content:flex-start;align-items:center;gap:14px;min-height:32px}
  .turtle-page .stats-row>div{display:flex;align-items:center;gap:6px;min-width:0}
  .turtle-page .stats-row .stat-label{font-size:14px;line-height:1.2;color:var(--tt-muted)}
  .turtle-page .stats-row .stat-value{font-size:20px;line-height:1.2}
  .turtle-page .board-container.turtle-board{width:100%;margin:6px 0 0;aspect-ratio:5 / 4;max-height:calc(100dvh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .turtle-page .game-panel-bottom{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:8px}
  .turtle-page .game-panel-bottom>.game-status{min-height:20px}
  .turtle-page .tt-keys .tt-key{flex:1 1 0}
}
/* Landscape phones: the board between the side columns at 5:4; the words and keys sit beside it. */
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape) {
  .turtle-page .play-layout.turtle-layout{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto 1fr;align-items:start;column-gap:14px;row-gap:6px;max-width:none;margin:0}
  .turtle-page .turtle-layout :is(.play-column,.game-panel){display:contents}
  .turtle-page .turtle-layout .game-intro{grid-column:1;grid-row:1;display:flex;align-items:center;gap:4px;margin:0;padding:0}
  .turtle-page .turtle-layout .game-intro h1{font-size:18px;line-height:1.2;white-space:nowrap}
  .turtle-page .turtle-layout .game-intro .game-help{flex:none;margin:0}
  .turtle-page .turtle-layout .stats-row{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;gap:4px}
  .turtle-page .turtle-layout .game-panel-bottom{grid-column:3;grid-row:1 / -1;margin:0}
  .turtle-page .turtle-layout .tt-keys{flex-direction:column;align-items:flex-end}
  .turtle-page .turtle-layout .board-container.turtle-board{grid-column:2;grid-row:1 / -1;--tt-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.25));width:calc(var(--tt-h) * 1.25);height:var(--tt-h);max-height:none;aspect-ratio:auto;margin:0}
}

/* ── 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 at 5:4; the numbers, the words and the keys are one 56px row inside the window, above the board. */
body.game-aside-beside[data-game=turtle]>[data-game-stage]{margin:0;padding:0 0 0 24px}
body.game-aside-beside[data-game=turtle]>[data-game-stage]>main{padding:0 0 24px}
body.game-aside-beside .turtle-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);
  --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.25));
  width:calc(var(--play-width) + 12px);height:auto;margin:0 auto}
body.game-aside-beside .turtle-layout .play-column{height:auto}
body.game-aside-beside .turtle-layout .game-panel{grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-rows:var(--hud-h) var(--play-height);gap:0 20px;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 .turtle-layout .board-container{grid-column:1 / -1;grid-row:2;box-shadow:none}
body.game-aside-beside .turtle-layout .stats-row{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:16px;padding:0 0 0 14px}
body.game-aside-beside .turtle-layout .stats-row>div{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;min-width:0}
body.game-aside-beside .turtle-layout .stat-label{font-size:14px;line-height:20px}
body.game-aside-beside .turtle-layout .stat-value{display:flex;align-items:center;height:28px;font-size:22px;line-height:28px}
body.game-aside-beside .turtle-layout .game-panel-bottom{grid-column:2;grid-row:1;flex-direction:row;align-items:center;justify-content:flex-end;align-self:center;gap:14px;width:auto;min-width:0;padding:0 4px 0 0}
body.game-aside-beside .turtle-layout .game-panel-bottom>.game-status{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-aside-beside .turtle-layout .tt-keys{flex:none;flex-direction:row;gap:8px}
body.game-aside-beside .turtle-layout .tt-key{width:auto}
/* 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 .turtle-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 .turtle-layout .game-intro>h1,
body.game-aside-beside .turtle-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 .turtle-layout .game-help{margin:0}
body.game-aside-beside .turtle-layout .game-help:not([open])>summary:focus-visible{min-height:36px;padding:0 12px;border-radius:10px;background:var(--tt-plate);color:var(--tt-ink)}
body.game-aside-beside .turtle-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(--tt-plate);box-shadow:0 4px 12px #00000047}
@media (forced-colors:active){
  body.game-aside-beside .turtle-layout :is(.game-help[open],.game-help:not([open])>summary:focus-visible){border:1px solid CanvasText}
}
/* Phones: the game keeps the whole screen and the frame's cards begin below it. */
@media (max-width:760px), (max-width:1000px) and (max-height:500px) {
  body.game-framed[data-game=turtle]>[data-game-stage]{min-height:100dvh}
}