* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: "Courier New", "Microsoft YaHei", monospace; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #140c08; }
body { display: grid; place-items: center; min-height: 100dvh; color: #fff2c7; }
button, a { font: inherit; }
button { touch-action: manipulation; }
.game-shell { position: relative; width: min(100vw, calc(100dvh * 0.553)); height: min(100dvh, calc(100vw * 1.81)); max-width: 560px; overflow: hidden; background: #342012; box-shadow: 0 0 80px #000; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.hud { position: absolute; z-index: 3; top: max(10px, env(safe-area-inset-top)); right: 10px; left: 64px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; pointer-events: none; }
.hud[hidden], .tool-row[hidden] { display: none; }
.hud > div { min-width: 0; padding: 7px 8px; border: 2px solid #2e170d; background: #ffe095; color: #3a1c0d; box-shadow: inset 0 0 0 2px #bd7430, 3px 3px 0 #140a05; }
.hud .score { text-align: center; }
.hud > div:last-child { text-align: right; }
.hud span { display: block; font-size: 9px; font-weight: 900; }
.hud strong { display: block; overflow: hidden; font-size: clamp(13px, 4vw, 20px); text-overflow: ellipsis; }
.tool-row { position: absolute; z-index: 4; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 8px; }
.tool-row button { position: relative; width: 50px; height: 50px; border: 2px solid #ffe095; border-radius: 4px; background: #5e2d19; color: #ffe095; box-shadow: 3px 3px 0 #140a05; cursor: pointer; }
.tool-row button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #140a05; }
.tool-row b { position: absolute; right: 2px; bottom: 1px; font-size: 11px; }
.overlay { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(26, 13, 7, .76); backdrop-filter: blur(3px); transition: opacity .28s ease; }
.overlay[hidden] { display: none; }
.overlay .panel { transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), opacity .28s ease; }
.overlay.is-entering { opacity: 0; }
.overlay.is-entering .panel { opacity: 0; transform: translateY(14px) scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .overlay, .overlay .panel, .tally-list li { transition: none !important; animation: none !important; }
}
.biome-tag { display: inline-block; margin: 0 0 4px; padding: 3px 10px; background: #43200f; color: #ffd98e; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.tally-list { display: grid; gap: 4px; margin: 12px 0; padding: 10px 12px; border-block: 2px dashed #c38a4b; list-style: none; max-height: 132px; overflow: auto; }
.tally-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 900; animation: tally-in .34s cubic-bezier(.3, 1.3, .6, 1) both; animation-delay: calc(var(--index, 0) * 70ms); }
.tally-list li b { color: #a23618; }
.tally-list.is-fail { text-align: left; }
@keyframes tally-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.panel { width: min(100%, 420px); max-height: 92%; overflow: auto; border: 3px solid #2d160b; border-radius: 4px; padding: 22px; background: #ffe4a1; color: #32190d; box-shadow: inset 0 0 0 3px #c67b32, 8px 8px 0 rgba(0, 0, 0, .48); }
.title-panel h1 { margin: 5px 0 10px; font-size: clamp(44px, 14vw, 72px); line-height: .9; letter-spacing: 0; text-transform: uppercase; text-shadow: 3px 3px 0 #d98a25; }
.title-panel h1 em { color: #c64c22; font-style: normal; }
.title-panel > p:not(.eyebrow) { line-height: 1.6; }
.eyebrow { margin: 0; color: #8a421e; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.danger { color: #c33120; }
.record { margin: 18px 0; padding: 10px 0; border-block: 2px dashed #c38a4b; font-weight: 900; line-height: 1.7; }
.primary { width: 100%; min-height: 48px; border: 3px solid #32190d; border-radius: 3px; background: #cf5426; color: #fff4c9; font-weight: 900; box-shadow: 4px 4px 0 #32190d; cursor: pointer; }
.primary:hover, .primary:focus-visible { background: #e66d30; outline: 3px solid #fff5c4; }
.primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #32190d; }
.compact-panel { text-align: center; }
/* 次要动作:视觉上明确弱于 .primary,避免误触"放弃" */
.ghost { width: 100%; min-height: 44px; margin-top: 10px; border: 2px solid #a4642f; border-radius: 3px; background: transparent; color: #7c3f18; font-weight: 900; cursor: pointer; }
.ghost:hover, .ghost:focus-visible { background: #f0c078; outline: 2px solid #fff5c4; }
.compact-panel h2, .shop-panel h2 { margin: 5px 0 14px; font-size: 28px; }
.big-number { margin: 18px 0; color: #bd421d; font-size: 40px; font-weight: 900; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.panel-heading > strong { padding: 7px 9px; background: #43200f; color: #ffe5a0; }
.shop-grid {
  /* 矿区商店沿用面板的暖黄纸感;网格由 .draft-grid 提供 */
  --draft-bg: #f4c979;
  --draft-bg-lit: #f8d99a;
  --draft-line: #7d411e;
  --draft-ink: #32190d;
  --draft-muted: #7c4a22;
  --draft-accent: #a23618;
  --draft-shadow: rgba(50, 25, 13, .4);
  /* 稀有度角标改用矿区色系,冷紫压在暖黄卡面上太跳 */
  --draft-rarity-rare: #8a5a2b;
  --draft-rarity-epic: #a23618;
  --draft-rarity-ink: #fff2c7;
  margin: 12px 0 18px;
}
@media (max-height: 620px) { .panel { padding: 16px; } }
@media (min-aspect-ratio: 4/5) and (max-width: 900px) { .game-shell { width: min(72vw, calc(100dvh * .553)); } }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .game-shell { width: min(96vw, calc(92dvh * 1.6)); height: min(92dvh, calc(96vw / 1.6)); max-width: none; border: 3px solid #4b2918; }
  .hud { left: 50%; right: auto; width: min(520px, 56%); transform: translateX(-50%); }
  .hud strong { font-size: clamp(15px, 1.6vw, 22px); }
  .panel { width: min(100%, 460px); }
  .shop-panel { width: min(100%, 650px); }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .title-panel h1 { font-size: 68px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }