:root {
  color-scheme: dark;
  font-family: "Instrument Sans", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #f6f5e9;
  background: #161b18;
  --accent: #d7fb70;
  --border: #424b3f;
  --muted: #b4bdb1;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.shell { max-width: 1330px; padding: 0 30px; margin: auto; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 78px; }
.brand { display: inline-flex; align-items: center; color: #f6f5e9; text-decoration: none; font: 900 23px/1 "Archivo Black", Arial, sans-serif; letter-spacing: -.065em; }
.brand span { color: var(--accent); }
.brand i { width: 21px; height: 21px; background: var(--accent); border-radius: 4px; border: 3px solid #253023; outline: 1px solid var(--accent); margin: 0 11px 0 2px; transform: rotate(-9deg); box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px #253023; }
.toolbar { display: flex; align-items: center; gap: 12px; }
.tool { background: transparent; border: 0; padding: 7px 10px; border-radius: 5px; white-space: nowrap; font-size: 13px; color: var(--muted); }
.tool span:first-child { margin-right: 4px; }
.tool:not(:disabled):hover { color: #fff; background: #343e34; }
.tool:disabled { opacity: .38; }
.cabinet { overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: #222a22; }
.game-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; height: 37px; padding: 0 17px; border-bottom: 1px solid var(--border); color: #cbd4c7; font: 700 11px/1.2 "IBM Plex Mono", Consolas, monospace; letter-spacing: .12em; }
.game-top div, .auto { display: flex; align-items: center; gap: 9px; }
.signal { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px #d7fb7060; }
#viewport { position: relative; isolation: isolate; outline: none; background: #23352d; min-height: 300px; }
canvas { display: block; width: 100%; height: auto; min-height: inherit; object-fit: fill; }
body[data-skin="pixel"] canvas { image-rendering: pixelated; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, #101c17f5 0%, #13251dd6 30%, #16261c45 65%, transparent 86%); }
.overlay[data-mode]:not([data-mode="ready"]) { background: linear-gradient(90deg, #101b17f7, #12201c95 65%, #131c1855); }
.overlay[data-mode="ready"] { align-items: flex-end; justify-content: center; background: linear-gradient(0deg,#111c1ccc,transparent 22%); }
.overlay[data-mode="ready"] .overlay-content { margin: 0 0 2.4%; max-width: 95%; text-align: center; }
.overlay[data-mode="ready"] .eyebrow,.overlay[data-mode="ready"] #overlay-description { display:none; }
.overlay[data-mode="ready"] h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.overlay[data-mode="ready"] .actions { justify-content:center; }
.overlay-content { margin: 3% 0 2% 5%; max-width: 56%; }
.eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .10em; font-size: clamp(10px, 1.2vw, 14px); }
.eyebrow span { margin: 0 .35em; }
h1 { font-size: clamp(30px, 6.25vw, 94px); line-height: .99; margin: 14px 0 12px; font-weight: 950; letter-spacing: -.065em; text-shadow: 0 4px #0b1c16; }
.overlay[data-mode]:not([data-mode="ready"]) h1 { font-size: clamp(32px, 5vw, 76px); }
.overlay p { max-width: 39ch; margin: 0 0 20px; color: #e1e9da; font-size: clamp(12px, 1.23vw, 16px); line-height: 1.65; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.primary, .retry { border-radius: 6px; font-weight: 850; padding: 11px 15px; display: inline-flex; align-items: center; gap: 25px; border: 1px solid #a6ce50; color: #172015; background: var(--accent); box-shadow: 0 4px #6d8e32; }
.primary:not(:disabled):hover { background: #e9ffac; }
.primary:disabled { opacity: .65; }
.primary:active, .retry:active { transform: translateY(2px); }
.retry { color: #fff; background: #1e2920; border-color: #57644c; box-shadow: 0 4px #121811; }
.results { display: flex; gap: 18px; margin: -6px 0 16px; font-size: 13px; color: var(--muted); }
.results b { color: #fff; margin-left: 4px; }
.controls { display: grid; grid-template-columns: 1fr repeat(4, minmax(0, .72fr)); border-top: 1px solid var(--border); }
.auto { padding: 12px 17px; color: #cbd4c7; font-size: 13px; white-space: nowrap; }
.controls button { display: flex; min-height: 58px; align-items: center; justify-content: center; gap: 8px; border: 0; border-left: 1px solid var(--border); background: #252d24; touch-action: none; }
.controls button:disabled { opacity: .82; }
.controls button[data-down], .controls button:not(:disabled):hover { background: #394a2e; }
.controls button span { font-weight: 760; white-space: nowrap; }
kbd { display: inline-grid; place-items: center; width: 27px; height: 26px; background: #161d16; color: var(--accent); border: 1px solid #526047; border-bottom: 3px solid #526047; border-radius: 5px; font: 700 16px/1 Consolas, monospace; }
.controls small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.controls button[data-cooling] kbd { color: var(--muted); }
.controls small[data-timer] { color: #b3eaff; font-variant-numeric: tabular-nums; }
.missions { padding-top: 23px; }
.missions h2 { margin: 0 0 11px; font-size: 17px; letter-spacing: .025em; }
.mission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mission { display: flex; align-items: center; text-align: left; gap: 14px; width: 100%; min-height: 86px; padding: 7px 15px 7px 7px; background: #202721; border: 1px solid var(--border); border-radius: 9px; }
.mission:hover { background: #2a332a; }
.mission[aria-pressed="true"] { border-color: #a1bd61; background: #293329; }
.mission-image { width: 107px; align-self: stretch; flex-shrink: 0; border-radius: 4px; background-size: cover; background-position: center; }
.silicon { background-image: url("assets/silicon-pixel.png"); image-rendering: pixelated; }
.dc { background-image: url("assets/dc-pixel.png"); image-rendering: pixelated; }
.mission-text { display: grid; gap: 5px; flex: 1 1 auto; }
.mission-text strong { font-size: clamp(13px, 1.7vw, 18px); }
.mission-text small { color: var(--muted); font-size: 12px; }
.mission-meta { display: flex; gap: 10px; align-items: center; color: var(--accent); white-space: nowrap; }
.mission-meta b { padding: 3px 6px; border-radius: 4px; color: #e4efcd; background: #3f5031; font-size: 11px; }
[data-level="1"] .mission-meta b { background: #4c3140; color: #ffb1ca; }
footer { margin: 20px 0 18px; color: #a6afa1; font-size: 11px; letter-spacing: .07em; }
.hud { position: absolute; top: 12px; left: 13px; right: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; pointer-events: none; font-size: 12px; font-weight: 800; }
.hud-left, .meter, #time, .cue { color: #fff6dc; background: #16211df0; border: 1px solid #b7cab071; border-radius: 6px; box-shadow: 0 3px #111b1590; }
.hud-left { padding: 7px 10px; display: grid; gap: 3px; }
#hearts { display: flex; gap: 4px; }
#ally-status { color: #f2bfe3; font-size: 10px; }
.heart { width: 17px; height: 16px; background: #fc6c77; clip-path: polygon(0 19%, 17% 0, 35% 0, 50% 16%, 65% 0, 83% 0, 100% 19%, 100% 46%, 50% 100%, 0 46%); }
.heart.empty { background: #4a4949; }
.meter { display: flex; align-items: center; gap: 8px; padding: 7px 9px; }
.meter div { width: clamp(55px, 19vw, 260px); height: 7px; overflow: hidden; border-radius: 4px; background: #3b473f; }
.meter i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.boss-bar i { background: #ff6d97; }
#time { padding: 7px 9px; font-variant-numeric: tabular-nums; }
.cue { position: absolute; top: 28%; left: 50%; transform: translateX(-50%); min-width: max-content; padding: 7px 11px; display: flex; align-items: center; gap: 7px; font-size: 13px; pointer-events: none; }
.cue b { color: #ffd274; font-size: 17px; line-height: 1; }
.cue[data-tone="open"] b, .cue[data-tone="open"] { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (max-width: 850px) {
  .shell { padding: 0 16px; }
  .controls small { display: none; }
  .controls small[data-timer] { display: inline; }
  .mission-image { width: 78px; }
}
@media (max-width: 560px) {
  .shell { padding: 0 10px; }
  .masthead { min-height: 58px; gap: 4px; }
  .toolbar { gap: 3px; }
  .brand { font-size: 16px; }
  .brand i { width: 15px; height: 15px; margin-right: 6px; border-width: 1px; }
  .tool { padding: 6px; font-size: 11px; }
  .tool span:first-child { display: none; }
  #viewport { min-height: 220px; }
  .overlay-content { max-width: 69%; }
  .overlay p { margin-bottom: 12px; }
  h1 { margin: 9px 0; }
  .primary, .retry { font-size: 13px; padding: 8px 11px; gap: 12px; }
  .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .controls button { display: grid; grid-template-columns: 20px max-content; grid-template-rows: 25px 11px; min-height: 48px; gap: 0 4px; padding: 4px 2px; font-size: 12px; }
  .controls kbd { width: 20px; }
  .controls small[data-timer] { grid-column: 1 / -1; font-size: 9px; }
  .auto { display: none; }
  .missions { padding-top: 15px; }
  .mission-grid { gap: 6px; }
  .mission { gap: 7px; min-height: 65px; padding-right: 7px; }
  .mission-image { width: 36px; }
  .mission-meta span { display: none; }
  .mission-text small { font-size: 10px; }
  .hud { top: 6px; left: 5px; right: 5px; font-size: 10px; }
  .heart { width: 12px; height: 11px; }
  .meter { gap: 4px; padding: 6px; }
  .cue { top: 25%; padding: 5px 7px; font-size: 11px; }
}