:root {
  --ink: #162635;
  --ink-soft: #274056;
  --paper: #eae4d7;
  --signal: #f04f3d;
  --spark: #f5c94c;
  --mint: #78d9c2;
  --line: rgba(22, 38, 53, .16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  color: var(--ink);
  font-family: "Noto Sans SC", sans-serif;
  background-color: #d8d0c0;
  background-image: radial-gradient(rgba(22,38,53,.18) .7px, transparent .7px), linear-gradient(120deg, rgba(255,255,255,.25), transparent 50%);
  background-size: 8px 8px, auto;
}

button { font: inherit; cursor: pointer; }
.page-shell { width: min(100%, 790px); margin: 0 auto; padding: 18px 14px 28px; }
.cabinet { overflow: hidden; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 8px 8px 0 var(--ink), 0 16px 34px rgba(22,38,53,.22); }
.cabinet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 88px; padding: 16px 20px 13px; background: var(--spark); border-bottom: 2px solid var(--ink); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid var(--ink); background: var(--signal); color: var(--paper); font: 28px/1 "Archivo Black", sans-serif; box-shadow: 3px 3px 0 var(--ink); }
.eyebrow, .overlay-kicker, .dialog-kicker { margin: 0 0 3px; color: var(--ink-soft); font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .08em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 900 clamp(22px, 7vw, 32px)/1 "Noto Sans SC", sans-serif; letter-spacing: -.08em; }
.sound-toggle { border: 1.5px solid var(--ink); padding: 7px 8px; color: var(--ink); background: transparent; font: 500 10px "DM Mono", monospace; }
.sound-toggle[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.status-rail { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 62px; padding: 8px 20px; border-bottom: 2px solid var(--ink); background: #f8f3e8; }
.score-block, .level-block { display: flex; align-items: baseline; gap: 8px; font-family: "DM Mono", monospace; }
.score-block span, .level-block span { font-size: 10px; color: var(--ink-soft); }
.score-block strong, .level-block strong { font-size: 18px; }
.level-block { justify-content: flex-end; }
.mission-block { font-size: 12px; font-weight: 700; text-align: center; }
.indicator { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--signal); animation: blink 1.5s infinite; }
.game-stage { position: relative; margin: 15px; aspect-ratio: 720 / 920; overflow: hidden; border: 2px solid var(--ink); background: #152b3b; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; }
.game-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(21,43,59,.58); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.game-overlay.visible { opacity: 1; pointer-events: auto; }
.overlay-card { width: min(100%, 380px); padding: 26px 22px 18px; border: 2px solid var(--ink); color: var(--ink); text-align: center; background: var(--paper); box-shadow: 6px 6px 0 var(--spark); }
.overlay-card h2 { margin: 8px 0; font-size: clamp(24px, 7vw, 36px); letter-spacing: -.08em; }
.overlay-card > p:not(.overlay-kicker) { margin-bottom: 20px; font-size: 14px; }
.primary-button { width: 100%; border: 2px solid var(--ink); padding: 13px 16px; color: var(--paper); background: var(--signal); box-shadow: 3px 3px 0 var(--ink); font-weight: 900; }
.primary-button:hover, .purchase-button:hover, .wechat-button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.primary-button span { margin-left: 7px; font-size: 18px; }
.control-hint { margin: 15px 0 0 !important; color: var(--ink-soft); font: 10px "DM Mono", monospace; }
.control-deck { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; padding: 0 15px 16px; }
.energy-panel { padding: 14px; border: 1.5px solid var(--ink); background: #f8f3e8; }
.energy-heading { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.info-button { width: 18px; height: 18px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: transparent; font: 12px "DM Mono", monospace; }
.energy-readout { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; }
.bolt { color: var(--signal); font: 900 26px/1 "Archivo Black", sans-serif; }
.energy-readout strong { font: 500 24px/1 "DM Mono", monospace; letter-spacing: -.08em; }
.energy-label { color: var(--ink-soft); font: 9px "DM Mono", monospace; }
.energy-gauge { height: 7px; margin: 11px 0 7px; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); }
.energy-gauge span { display: block; height: 100%; width: 100%; background: var(--mint); transition: width .3s ease; }
#reset-caption { margin: 0; color: var(--ink-soft); font-size: 10px; }
.purchase-button { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 128px; padding: 15px 42px 15px 15px; border: 2px solid var(--ink); color: var(--ink); text-align: left; background: var(--spark); box-shadow: 3px 3px 0 var(--ink); transition: .15s ease; }
.purchase-tag { margin-bottom: 7px; font: 10px "DM Mono", monospace; }
.purchase-button strong { font-size: 17px; letter-spacing: -.04em; }
.purchase-arrow { position: absolute; right: 14px; font: 26px/1 "DM Mono", monospace; }
.footer-note { margin: 22px 15px 0; color: var(--ink-soft); text-align: center; font-size: 11px; }
.payment-dialog { width: min(calc(100% - 30px), 420px); border: 2px solid var(--ink); padding: 0; color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); }
.payment-dialog::backdrop { background: rgba(13,27,38,.72); backdrop-filter: blur(3px); }
.payment-dialog > :not(.dialog-close) { margin-left: 26px; margin-right: 26px; }
.dialog-close { position: absolute; top: 12px; right: 13px; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; font-size: 23px; line-height: 1; }
.receipt-head { display: flex; justify-content: space-between; margin: 0 !important; padding: 13px 26px; border-bottom: 2px dashed var(--ink); font: 10px "DM Mono", monospace; }
.pass-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 30px !important; margin-bottom: 18px !important; border: 2px solid var(--ink); border-radius: 50%; background: var(--spark); box-shadow: 3px 3px 0 var(--ink); font: 45px/1 "Archivo Black", sans-serif; }
.payment-dialog h2 { margin-bottom: 9px; font-size: 29px; letter-spacing: -.08em; }
.dialog-description { margin-bottom: 23px; font-size: 14px; line-height: 1.7; }
.price-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.price-row strong { font: 500 25px "DM Mono", monospace; }
.wechat-button { width: calc(100% - 52px); margin-top: 18px; margin-bottom: 14px; border: 2px solid #0e563d; padding: 14px; color: white; background: #08a66c; box-shadow: 3px 3px 0 #0e563d; font-weight: 900; }
.wechat-icon { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 5px; border-radius: 5px; background: white; color: #08a66c; font-size: 11px; }
.secure-note { margin-bottom: 25px; color: var(--ink-soft); text-align: center; font-size: 10px; }
.toast { position: fixed; z-index: 3; left: 50%; bottom: 24px; max-width: calc(100% - 34px); transform: translate(-50%, 90px); padding: 11px 15px; border: 1.5px solid var(--ink); color: var(--ink); background: var(--spark); box-shadow: 3px 3px 0 var(--ink); font-size: 13px; font-weight: 700; opacity: 0; transition: .25s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 480px) { .page-shell { padding: 8px 8px 22px; } .cabinet { border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); } .cabinet-head { min-height: 72px; padding: 12px; } .brand-mark { width: 36px; height: 36px; font-size: 23px; } .eyebrow { font-size: 8px; } h1 { font-size: 24px; } .status-rail { padding: 7px 12px; } .mission-block { font-size: 10px; } .game-stage { margin: 10px; } .control-deck { grid-template-columns: 1fr; gap: 9px; padding: 0 10px 11px; } .purchase-button { min-height: 82px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }