:root {
  font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #dedbcf;
  background: #11130f;
  font-synthesis: none;
  --bg: #11130f;
  --panel: #181a16;
  --panel-2: #20221d;
  --line: #4b4a3e;
  --line-soft: #34352d;
  --text: #dedbcf;
  --muted: #8c8d82;
  --accent: #d4a64e;
  --accent-dark: #765b29;
  --danger: #ad4437;
  --good: #71885d;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { user-select: none; }
button, select { font: inherit; }
#game-container { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; }
.hidden { display: none !important; }

.screen-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: .11;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
}

.overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: 28px; background: rgba(9, 10, 8, .82);
}

.terminal-shell {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(20, 22, 18, .965);
  box-shadow: 14px 14px 0 rgba(0,0,0,.26);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.terminal-shell::before,
.terminal-shell::after {
  content: ""; position: absolute; pointer-events: none; background: var(--accent);
}
.terminal-shell::before { width: 58px; height: 3px; top: -1px; right: 30px; }
.terminal-shell::after { width: 3px; height: 42px; left: -1px; bottom: 28px; }

.menu-shell {
  width: min(1040px, calc(100vw - 48px)); min-height: 570px;
  display: grid; grid-template-columns: 1.1fr .9fr;
}
.menu-identity { padding: 64px 58px; border-right: 1px solid var(--line-soft); position: relative; }
.menu-identity::after {
  content: "RESTRICTED AREA / 05"; position: absolute; left: 58px; bottom: 28px;
  color: #55564d; letter-spacing: .18em; font-size: 11px;
}
.menu-actions { padding: 64px 46px 42px; display: flex; flex-direction: column; justify-content: center; }
.eyebrow, .section-label { color: var(--accent); font-size: 12px; letter-spacing: .18em; font-weight: 700; }
.section-label { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
.menu-identity h1 { margin: 18px 0 22px; line-height: .83; font-size: clamp(64px, 8vw, 112px); letter-spacing: -.045em; }
.menu-identity h1 span { display: block; }
.menu-identity h1 span:last-child { color: var(--accent); }
.mission-copy { max-width: 560px; color: #aaa99e; font-size: 15px; line-height: 1.8; border-left: 2px solid var(--accent-dark); padding-left: 16px; }
.record-strip { display: flex; gap: 34px; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.record-strip b { display: block; color: var(--text); font-size: 20px; letter-spacing: .03em; margin-top: 5px; }

.command {
  width: 100%; min-height: 58px; margin: 7px 0 0; padding: 0;
  border: 1px solid var(--line-soft); border-radius: 0; background: #1b1d19; color: var(--text);
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; text-align: left; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.command > span { height: 100%; display: grid; place-items: center; border-right: 1px solid var(--line-soft); color: #69695f; font-family: Consolas, monospace; }
.command > b { padding-left: 16px; letter-spacing: .08em; font-size: 13px; }
.command > em { padding-right: 16px; color: var(--muted); font-style: normal; font-size: 12px; }
.command:hover { border-color: var(--accent); background: #23241d; transform: translateX(3px); }
.command.primary { background: var(--accent); color: #17150f; border-color: var(--accent); }
.command.primary > span { color: #4e3a18; border-right-color: rgba(40,31,14,.35); }
.command.primary > em { color: #54401c; }
.command.primary:hover { background: #e0b45c; }
.control-note { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 7px 13px; color: #64655d; font-family: Consolas, monospace; font-size: 10px; }

.modal-shell { width: min(620px, calc(100vw - 34px)); padding: 38px; }
.compact-shell { width: min(470px, calc(100vw - 34px)); }
.modal-shell h2, .upgrade-shell h2 { margin: 8px 0 24px; font-size: 38px; letter-spacing: -.02em; }

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: Consolas, "Microsoft YaHei", monospace; }
.hud-block { position: absolute; top: 18px; min-width: 285px; padding: 11px 13px 12px; background: rgba(18,20,16,.82); border-top: 2px solid var(--accent); border-bottom: 1px solid rgba(212,166,78,.25); }
.hud-left { left: 18px; }
.hud-right { right: 18px; text-align: right; border-top-color: #777468; }
.hud-kicker { color: #74756b; font-size: 9px; letter-spacing: .16em; margin-bottom: 8px; }
.hp-line, .exp-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
.hud-code { color: var(--accent); font-weight: 800; }
.meter { height: 7px; background: #303129; overflow: hidden; position: relative; }
.meter::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 16px, rgba(17,19,15,.75) 16px 18px); }
.meter-fill { height: 100%; width: 100%; transition: width .12s linear; }
.meter-fill.hp { background: #a7483a; }
.meter-fill.exp { background: #b38a40; }
.hud-metrics { display: flex; gap: 18px; margin-top: 9px; color: #7f8076; font-size: 10px; }
.hud-metrics b { color: #d2d0c5; font-size: 13px; }
.sector-line { display:flex; justify-content:space-between; gap:28px; font-size:11px; color:#85867b; }
.sector-line b { color: var(--text); letter-spacing:.08em; }
.objective-text { margin-top: 10px; color: #c7c5bb; font-size: 12px; letter-spacing: .04em; }

.hud-bottom { position:absolute; bottom:17px; left:50%; transform:translateX(-50%); width:min(650px,68vw); }
.exp-line { padding: 8px 10px; background: rgba(18,20,16,.77); border-bottom: 2px solid var(--accent-dark); color:#88897f; font-size:10px; }
.exp-meter { height: 5px; }
.skills-line { margin-top:5px; text-align:center; color:#77786f; font-size:10px; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.boss-hud { position:absolute; top:17px; left:50%; transform:translateX(-50%); width:min(560px,48vw); }
.boss-caption { display:flex; justify-content:space-between; align-items:end; margin-bottom:6px; font-size:9px; color:#8b776f; letter-spacing:.15em; }
.boss-caption b { color:#c15a48; font-size:14px; letter-spacing:.24em; }
.boss-meter { height:10px; background:#2e2420; border:1px solid #5b3831; }
.boss-meter-fill { width:100%; height:100%; background:#9d3d32; transition:width .12s linear; }

#toast { position:absolute; left:50%; top:86px; transform:translateX(-50%); padding:8px 13px; background:#d4a64e; color:#1c180f; font-weight:800; font-size:11px; letter-spacing:.13em; opacity:0; transition:opacity .18s ease; }
#toast.show { opacity:1; }
#crosshair { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; }

.enemy-indicator { position:absolute; left:50%; bottom:82px; transform:translateX(-50%); display:flex; gap:10px; align-items:center; padding:7px 11px; color:#b8a277; border:1px solid #675936; background:rgba(22,20,15,.78); }
.enemy-indicator b, .enemy-indicator small { display:block; }
.enemy-indicator b { font-size:10px; letter-spacing:.14em; }
.enemy-indicator small { color:#777266; font-size:9px; margin-top:2px; }
.enemy-arrow { display:block; color:var(--accent); font-size:17px; transform-origin:center; }

.upgrade-shell { width:min(1000px, calc(100vw - 42px)); padding:38px; }
.upgrade-heading { display:flex; justify-content:space-between; gap:24px; align-items:start; border-bottom:1px solid var(--line-soft); margin-bottom:22px; }
.upgrade-heading h2 { margin-bottom:18px; }
.upgrade-stamp { border:1px solid var(--line); padding:8px 10px; color:#76766d; font:11px Consolas,monospace; letter-spacing:.12em; }
.upgrade-stamp span { color:var(--accent); font-size:18px; margin-left:6px; }
.upgrade-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line-soft); }
.upgrade-card { min-height:245px; margin:0; padding:22px; border:0; border-right:1px solid var(--line-soft); background:#191b17; color:var(--text); text-align:left; cursor:pointer; display:flex; flex-direction:column; align-items:stretch; position:relative; }
.upgrade-card:last-child { border-right:0; }
.upgrade-card:hover { background:#22231d; }
.upgrade-card .module-index { color:var(--accent); font:12px Consolas,monospace; letter-spacing:.1em; }
.upgrade-card strong { margin-top:30px; font-size:21px; letter-spacing:.02em; }
.upgrade-card p { color:#a09f94; line-height:1.6; min-height:52px; }
.upgrade-card small { margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); color:#696a62; font:10px Consolas,monospace; letter-spacing:.06em; }

.result-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-soft); margin:20px 0; }
.result-grid div { padding:16px 12px; border-right:1px solid var(--line-soft); }
.result-grid div:last-child { border-right:0; }
.result-grid span, .result-grid b { display:block; }
.result-grid span { color:#73746b; font:9px Consolas,monospace; letter-spacing:.13em; }
.result-grid b { color:var(--text); font:22px Consolas,monospace; margin-top:7px; }
.modal-content { color:#aaa99e; line-height:1.75; text-align:left; max-height:55vh; overflow:auto; padding-right:8px; }
.modal-content h3 { color:#d3d0c4; margin-bottom:5px; }
.modal-content ul { margin-top:5px; padding-left:20px; }
.system-select { width:100%; padding:12px; background:#151713; color:var(--text); border:1px solid var(--line); border-radius:0; }

@media (max-width: 820px) {
  .overlay { padding: 14px; }
  .menu-shell { grid-template-columns:1fr; min-height:auto; max-height:94vh; overflow:auto; }
  .menu-identity { padding:36px 30px 58px; border-right:0; border-bottom:1px solid var(--line-soft); }
  .menu-actions { padding:30px; }
  .menu-identity h1 { font-size:clamp(58px,17vw,92px); }
  .menu-identity::after { left:30px; }
  .hud-block { min-width:220px; }
  .hud-left { left:8px; top:8px; }
  .hud-right { right:8px; top:8px; min-width:175px; }
  .boss-hud { top:100px; width:72vw; }
  .hud-bottom { width:90vw; }
  .upgrade-grid { grid-template-columns:1fr; max-height:62vh; overflow:auto; }
  .upgrade-card { min-height:155px; border-right:0; border-bottom:1px solid var(--line-soft); }
  .upgrade-card:last-child { border-bottom:0; }
  .result-grid { grid-template-columns:repeat(2,1fr); }
  .result-grid div:nth-child(2) { border-right:0; }
  .result-grid div:nth-child(-n+2) { border-bottom:1px solid var(--line-soft); }
}