/* Gold Miner (黄金矿工): a 4:3 board whose whole surface drops the claw. The field is drawn on the canvas (render.mjs);
   the page adds only the start hint, the shop between levels, the pause card and the result card over it, and the
   dynamite key beside the status. Solid fills, compact shadows, the 70/180/240ms tempos; reduced motion drops every
   entrance. Keys are keys after the mark: a lit top over a darker band, pressed down onto it. */
.goldminer-page{--gm-plate:#262626;--gm-key:#2b2b2b;--gm-key-band:#1f1f1f;--gm-ink:#ededed;--gm-muted:#b3b3b3;--gm-gold:#f2c14e}
.goldminer-board{position:relative;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.goldminer-board:focus{outline:none}
.goldminer-board:is([data-flow=shop],[data-flow=result]){cursor:default}
.goldminer-canvas{display:block;width:100%;height:100%;border-radius:10px;background:#181818}

/* The numbers: the clock brightens in its last ten seconds, the money once it has reached the goal. */
.goldminer-page .stat-value{font-variant-numeric:tabular-nums;transition:color 180ms}
.goldminer-page #time[data-hurry=true]{color:#ffffff;animation:gm-hurry 1s steps(2,jump-none) infinite}
.goldminer-page #money[data-reached=true]{color:var(--gm-gold)}
@keyframes gm-hurry{50%{color:#9d9d9d}}

/* The hint and a new level's goal: one quiet chip low in the field, clear of the winch and the claw's first drop. */
.goldminer-hint{position:absolute;z-index:6;left:50%;bottom:8%;margin:0;padding:7px 14px;border-radius:999px;background:#202020;color:#c4c4c4;font-size:14px;line-height:20px;letter-spacing:.01em;white-space:nowrap;pointer-events:none;transform:translateX(-50%);box-shadow:0 1px 2px #00000080,inset 0 1px 0 #ffffff0a;animation:gm-chip-in 240ms cubic-bezier(.22,1,.36,1) both}
.goldminer-hint[data-kind=banner]{background:#2a2a2a;color:var(--gm-ink)}
.goldminer-hint[hidden]{display:none}

/* The dynamite key: a quiet key with the stick's picture and how many are left; lit only while something is reeled. */
.goldminer-dynamite{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border:0;border-radius:11px;background:var(--gm-key);box-shadow:inset 0 -3px 0 var(--gm-key-band);color:#dcdcdc;font:450 14px/1 var(--sans,inherit);cursor:pointer;transition:background-color 180ms,color 180ms,transform 70ms}
.goldminer-dynamite[hidden]{display:none}
.goldminer-dynamite:hover:enabled{background:#333333}
.goldminer-dynamite:active:enabled{transform:translateY(1px);box-shadow:inset 0 -1px 0 var(--gm-key-band)}
.goldminer-dynamite:disabled{background:#202020;box-shadow:none;color:#7a7a7a;cursor:default}
.goldminer-dynamite:disabled .goldminer-dynamite-icon{opacity:.45}
.goldminer-dynamite-icon{display:block;line-height:0}
.goldminer-dynamite-icon svg{display:block;width:21px;height:21px}
.goldminer-count{min-width:1.2em;padding:3px 6px;border-radius:7px;background:#1b1b1b;font-variant-numeric:tabular-nums;text-align:center}
.goldminer-dynamite:focus-visible,.goldminer-card button:focus-visible{outline:2px solid #d6d6d6;outline-offset:3px}

/* The shop between levels: a card in the middle of the field, its goods as keys. */
.goldminer-card{position:absolute;left:50%;top:50%;z-index:8;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;width:min(400px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:20px 18px 18px;border-radius:15px;background:var(--gm-plate);box-shadow:0 10px 24px #00000066,inset 0 1px 0 #ffffff0d;color:var(--gm-ink);text-align:center;transform:translate(-50%,-50%);cursor:default;scrollbar-width:none;animation:gm-shop-in 240ms cubic-bezier(.22,1,.36,1) both}
.goldminer-card::-webkit-scrollbar{display:none}
.goldminer-card[hidden]{display:none}
.goldminer-eyebrow{margin:0 0 4px;font-size:14px;line-height:1.4;color:var(--gm-gold);font-variant-numeric:tabular-nums}
.goldminer-card h2{margin:0;font-size:26px;line-height:1.2;font-weight:400;letter-spacing:-.02em}
.goldminer-detail{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--gm-muted)}
.goldminer-offers{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.goldminer-offer{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px 8px 10px;border:0;border-radius:12px;background:#303030;box-shadow:inset 0 -3px 0 #232323;color:var(--gm-ink);font:inherit;text-align:left;cursor:pointer;transition:background-color 180ms,transform 70ms}
.goldminer-offer:hover:enabled{background:#383838}
.goldminer-offer:active:enabled{transform:translateY(1px);box-shadow:inset 0 -1px 0 #232323}
.goldminer-offer:disabled{background:#2a2a2a;box-shadow:none;color:#8a8a8a;cursor:default}
.goldminer-offer:disabled .goldminer-offer-art{opacity:.5}
.goldminer-offer[data-good]:disabled .goldminer-offer-price{color:#8a8a8a}
.goldminer-offer-art{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#1f1f1f;line-height:0}
.goldminer-offer-art svg{display:block;width:28px;height:28px}
.goldminer-offer-words{display:flex;flex-direction:column;gap:2px;min-width:0}
.goldminer-offer-words b{font-size:15px;line-height:20px;font-weight:500}
.goldminer-offer-words small{font-size:14px;line-height:18px;color:var(--gm-muted)}
.goldminer-offer-price{font-size:15px;font-variant-numeric:tabular-nums;color:var(--gm-gold);white-space:nowrap}
.goldminer-next{align-self:center;min-width:148px;justify-content:center;gap:12px;margin-top:18px}

/* Paused: the field stays visible under a scrim, so the claw is where it was. */
.goldminer-board .game-overlay{z-index:7;inset:0;padding:24px;gap:6px;border-radius:inherit;background:#161616c4;backdrop-filter:none;box-shadow:none;animation:gm-scrim-in 180ms cubic-bezier(.2,.8,.2,1) both}
.goldminer-board[data-flow=paused] .game-overlay h2{margin:0;font-size:28px;font-weight:350;letter-spacing:-.03em;color:#e4e4e4}
.goldminer-board[data-flow=paused] .game-overlay p{margin:0 0 18px;font-size:14px;line-height:1.6;color:#b3b3b3}
.goldminer-board[data-flow=paused] .game-overlay .solid-button{min-width:132px;justify-content:center;gap:12px}

/* Over: the result card settles in the middle of the field. */
.goldminer-board[data-flow=result] .game-overlay{justify-content:flex-end;padding:12px;background:none;pointer-events:none;animation:none}
body[data-game=goldminer] .goldminer-board[data-flow=result] .game-overlay.game-result-panel{position:absolute;inset:50% 12px auto;translate:0 -50%;width:auto;max-width:380px;min-height:0;max-height:calc(100% - 24px);margin:0 auto;padding:20px;border:0;border-radius:15px;background:var(--gm-plate);box-shadow:0 10px 24px #00000066,inset 0 1px 0 #ffffff0d;overflow:auto;animation:gm-result-in 240ms cubic-bezier(.22,1,.36,1) both}
body[data-game=goldminer] .game-result-panel .game-result-emblem{display:grid;place-items:center}
body[data-game=goldminer] .game-result-panel .game-result-emblem svg{width:52px;height:44px}

@keyframes gm-chip-in{from{opacity:0;transform:translate(-50%,4px)}}
@keyframes gm-scrim-in{from{opacity:0}}
@keyframes gm-result-in{from{opacity:0;translate:0 calc(-50% + 8px)}}
@keyframes gm-shop-in{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}}

/* Desktop: the board is four thirds as wide as it is tall, beside the usual rail. */
@media (min-width:761px) and (min-height:501px),(min-width:1001px){
 .desktop-play-page .goldminer-layout{--play-height:max(300px,min(var(--desktop-game-height),calc((100vw - var(--site-nav-offset,0px) - var(--game-aside-space,0px) - 232px) * .75)));--play-width:calc(var(--play-height) * 4 / 3)}
 .goldminer-page .stats-row{gap:16px}
 .goldminer-page .stat-value{font-size:24px}
}
/* Phones: the board as wide as the screen, 4:3; the numbers in one row above it. */
@media (max-width:760px),(max-width:1000px) and (max-height:500px){
 .goldminer-page .stats-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:32px}
 .goldminer-page .stats-row>div{display:flex;flex-direction:column;align-items:flex-start;gap:0}
 .goldminer-page .stats-row .stat-label{font-size:14px;line-height:1.2}
 .goldminer-page .stats-row .stat-value{font-size:20px;line-height:1.2}
 .goldminer-board{width:100%;height:auto;aspect-ratio:4 / 3;max-height:calc(100svh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:6px auto 0;padding:5px}
 .goldminer-canvas{border-radius:8px}
 .goldminer-page .game-panel-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;margin-top:6px}
 .goldminer-page .game-panel-bottom>.game-status{flex:1;min-width:0;font-size:14px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .goldminer-card{padding:16px 14px 14px}
 .goldminer-card h2{font-size:22px}
 .goldminer-offers{margin-top:12px;gap:6px}
 .goldminer-offer{min-height:48px;padding:6px 12px 6px 8px}
 .goldminer-offer-words small{display:none}
 .goldminer-next{margin-top:12px}
}
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .goldminer-board{width:auto;height:calc(100svh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:none;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
 .goldminer-hint,.goldminer-card,.goldminer-board .game-overlay,body[data-game=goldminer] .goldminer-board .game-overlay.game-result-panel{animation:none!important}
 .goldminer-page #time[data-hurry=true]{animation:none}
 .goldminer-dynamite,.goldminer-offer{transition:none}
}
@media (forced-colors:active){
 .goldminer-canvas,.goldminer-hint,.goldminer-card,.goldminer-offer,.goldminer-dynamite{border:1px solid CanvasText}
}

/* 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 opens as a card in the board's
   corner). The 4:3 board is as large as the column and the window allow below the frame's bar, centred in the stage.
   Board, numbers and keys are one window: the numbers, the words and the keys along its top, inside it, and the board
   under them. */
body.game-aside-beside[data-game=goldminer]>[data-game-stage]{margin:0;padding:0 0 0 24px}
body.game-aside-beside[data-game=goldminer]>[data-game-stage]>main{padding:0 0 24px}
body.game-aside-beside .goldminer-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(300px,min(calc(var(--stage-h) - var(--hud-h) - var(--hud-gap)),calc((var(--stage-w) - 12px) * .75)));
  --play-width:calc(var(--play-height) * 4 / 3);
  width:calc(var(--play-width) + 12px);height:auto;margin:0 auto}
body.game-aside-beside .goldminer-layout .play-column{height:auto}
body.game-aside-beside .goldminer-layout .game-panel{grid-template-columns: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 .goldminer-layout .board-container{grid-column:1 / -1;grid-row:2;box-shadow:none}
body.game-aside-beside .goldminer-layout .stats-row{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:22px;padding:0 0 0 14px}
body.game-aside-beside .goldminer-layout .stats-row>div{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px}
body.game-aside-beside .goldminer-layout .stat-label{font-size:14px;line-height:20px}
body.game-aside-beside .goldminer-layout .stat-value{font-size:22px;line-height:28px}
body.game-aside-beside .goldminer-layout .game-panel-bottom{grid-column:2;grid-row:1;flex-direction:row;align-items:center;justify-content:flex-end;align-self:center;gap:12px;width:auto;min-width:0;padding:0 4px 0 0}
body.game-aside-beside .goldminer-layout .game-panel-bottom>.game-status{min-width:0;font-size:14px;line-height:20px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-aside-beside .goldminer-layout .game-panel-bottom .goldminer-dynamite{flex:none;min-height:40px;height:40px}
body.game-aside-beside .goldminer-layout .game-panel-bottom .solid-button{flex:none;width:auto;min-width:96px;min-height:40px;height:40px;gap:12px;font-size:14px;background:#2a2a2a;box-shadow:inset 0 -3px 0 #1f1f1f;color:#dcdcdc}
/* 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 .goldminer-layout .game-intro{top:calc(var(--hud-h) + 14px);right:20px;z-index:30;width:auto;max-width:calc(var(--play-width) - 28px)}
body.game-aside-beside .goldminer-layout .game-intro>h1,
body.game-aside-beside .goldminer-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 .goldminer-layout .game-help{margin:0}
body.game-aside-beside .goldminer-layout .game-help:not([open])>summary:focus-visible{min-height:36px;padding:0 12px;border-radius:10px;background:var(--gm-plate);color:var(--gm-ink)}
body.game-aside-beside .goldminer-layout .game-help[open]{position:static;width:min(340px,calc(var(--play-width) - 28px));max-height:calc(var(--play-height) - 28px);padding:12px 18px 14px;border-radius:14px;background:var(--gm-plate);box-shadow:0 1px 2px #00000080,inset 0 1px 0 #ffffff0a}
body.game-aside-beside .goldminer-layout .game-help[open] :is(summary,.rules-list li,.rules-list li span){font-size:14px}
@media (forced-colors:active){
 body.game-aside-beside .goldminer-layout :is(.game-help[open],.game-help:not([open])>summary:focus-visible){border:1px solid CanvasText}
}
/* Phones: the game keeps the whole screen; the frame's cards begin below it. */
@media (max-width:760px),(max-width:1000px) and (max-height:500px){
 body.game-framed[data-game=goldminer]>[data-game-stage]{min-height:100dvh}
}