@charset "UTF-8";
:root { color-scheme: dark; --bg:#0c120f; --surface:#18201a; --panel:#20291f; --line:#46503b; --text:#e0e3cf; --muted:#a0a78d; --gold:#d3b16e; --green:#a4be77; --red:#d5906e; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 50% 0%,#2a3122 0%,#121a14 45%,#090f0c 100%); color:var(--text); font-family:Bahnschrift,"Microsoft YaHei","Segoe UI",sans-serif; user-select:none; -webkit-user-select:none; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px); }
button,input,select { font:inherit; }
button { cursor:pointer; border:1px solid #586347; background:#293425; color:var(--text); border-radius:2px; transition:background .14s,border-color .14s,transform .14s; }
button:hover { background:#38432d; border-color:#9f9a69; }
button:active { transform:translateY(1px); }
button:focus-visible { outline:2px solid #e1c17e; outline-offset:3px; }
button:disabled { cursor:default; opacity:.42; transform:none; }
button.primary { background:#c6ab6a; border-color:#e2c68b; color:#172219; font-weight:600; }
button.primary:hover { background:#e1c68b; }
button.quiet { background:transparent; border-color:#43503a; padding:7px 12px; font-size:12px; }
button.danger { color:#edbb9f; border-color:#846347; }
.hidden { display:none!important; }
#app { max-width:min(1300px,calc((100dvh - 172px) * 1.77778 + 84px)); margin:0 auto; padding:24px 42px 20px; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:17px; }
.wordmark { display:flex; align-items:center; gap:12px; letter-spacing:2px; font-size:18px; line-height:1; }
.wordmark b { color:#d6b77a; font-weight:600; }
.wordmark small { display:block; font-size:10px; color:var(--muted); letter-spacing:2.4px; margin-top:8px; }
.emblem { width:38px; height:38px; border:1px solid #9a9461; display:grid; place-items:center; color:var(--gold); font-size:28px; font-weight:700; clip-path:polygon(12% 0,100% 0,100% 85%,88% 100%,0 100%,0 15%); background:#242e22; }
.top-actions { display:flex; align-items:center; gap:8px; }
.signal { font:10px Consolas,monospace; color:#8c9f79; letter-spacing:.9px; margin-right:14px; }
.signal i { display:inline-block; width:5px; height:5px; background:#9ebc72; margin-right:8px; box-shadow:0 0 8px #9ebc7244; }
.game-shell { position:relative; width:100%; aspect-ratio:16/9; border:1px solid #657151; background:#101912; box-shadow:0 20px 90px #0008,0 0 0 5px #172018,0 0 0 6px #303b2b; overflow:hidden; }
.game-shell::after { content:""; position:absolute; inset:0; border:4px solid #060c0866; pointer-events:none; z-index:4; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; outline:none; touch-action:none; cursor:none; }
canvas:focus-visible { outline:none; }
.hud { position:absolute; inset:0; pointer-events:none; }
.hud button { pointer-events:auto; }
.hud-top { position:absolute; top:2.1%; left:2.4%; right:2.4%; height:10%; display:flex; align-items:flex-start; gap:2%; }
.vitals { width:25%; padding:5px 9px 6px; background:#111c17f2; border:1px solid #52614a; clip-path:polygon(0 0,100% 0,100% 80%,95% 100%,0 100%); }
.vital-row { display:flex; align-items:center; gap:7px; height:21px; }
.vital-row>span { width:16px; font-weight:600; font-size:20px; line-height:1; }
.health-symbol { color:#d7a285; }.shield-symbol { color:#8bc8c6; }
.meter { background:#0a1510; flex:1; height:9px; box-shadow:0 1px 0 #56604b66; }
.meter>div { height:100%; transition:width .12s; }
.health-fill { background:linear-gradient(90deg,#9d6f4e,#d2a575); }.shield-fill { background:linear-gradient(90deg,#51777a,#94c4b7); }
.vital-row strong { font:14px Consolas,monospace; min-width:27px; text-align:right; color:#ecdfbf; }
.sector-info { padding-top:7px; width:24%; }.sector-info>span { display:block; color:#dfdcb6; font-size:12px; letter-spacing:1.5px; }.sector-info small { display:flex; gap:16px; margin-top:7px; font:11px Consolas,monospace; color:#acb592; }.scrap-count { color:#d4bc7c; }
.mini-map { margin-left:auto; width:14%; padding:7px; background:#111d18f0; border-color:#607050; }.mini-map small { display:block; margin-top:5px; font-size:10px; color:#c3cba8; }
#map-nodes { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }#map-nodes i { height:8px; background:#3f5039; }#map-nodes i.past { background:#90a36c; }#map-nodes i.current { background:#e1bd74; box-shadow:0 0 6px #e1bd7466; }#map-nodes i.boss { background:#815441; }
.boss-hud { position:absolute; left:29%; top:2px; width:48%; text-align:center; padding:4px 12px; background:#132018ed; border:1px solid #7b7750; }.boss-hud>span { display:block; font-size:12px; letter-spacing:2px; }.boss-meter { margin-top:5px; height:8px; position:relative; background:#251b14; }.boss-meter>div { height:100%; background:linear-gradient(90deg,#a37846,#ddb473); }.boss-meter i { position:absolute; left:50%; top:0; height:100%; width:2px; background:#2c2f1e; }.boss-hud small { display:block; margin-top:3px; font:9px Consolas,monospace; color:#b5b793; }
.room-banner { position:absolute; left:50%; top:29%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; padding:13px 35px 14px; background:#101b16ed; border-top:1px solid #8e9360; border-bottom:1px solid #8e9360; min-width:260px; transition:opacity .5s; text-align:center; }.room-banner>span { font:10px Consolas,monospace; letter-spacing:3px; color:#beb37a; }.room-banner strong { font-size:24px; font-weight:500; letter-spacing:5px; margin-top:7px; }.room-banner small { font-size:11px; color:#aab395; margin-top:8px; white-space:nowrap; }.room-banner.faded { opacity:0; }
.tutorial { position:absolute; left:50%; transform:translateX(-50%); bottom:20%; font-size:12px; padding:8px 15px; border-left:2px solid #acb679; background:#152017d9; color:#d1d7b5; white-space:nowrap; }
.tutorial:empty { display:none; }
.hud-bottom { position:absolute; bottom:2.1%; left:2.4%; right:2.4%; display:flex; justify-content:space-between; align-items:flex-end; gap:14px; }
.weapon-slots { display:flex; gap:6px; width:35%; }
.weapon-slot { position:relative; width:49%; min-height:54px; background:#172119ec; border:1px solid #4c6045; padding:5px 7px; text-align:left; }.weapon-slot.selected { border-color:#d1bb78; background:#303522f5; box-shadow:inset 0 0 0 1px #9f915055; }.weapon-slot.empty { opacity:.55; }.weapon-slot svg { height:18px; width:45px; color:#d7d8b5; vertical-align:middle; }.weapon-slot .weapon-name { display:block; font-size:10px; color:#c6cdae; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.weapon-slot .ammo { float:right; font:12px Consolas,monospace; color:#e2d5a3; }.weapon-slot .slot-index { position:absolute; right:5px; bottom:5px; font:9px Consolas,monospace; color:#b6bb95; }.weapon-slot .reload-line { position:absolute; left:0; bottom:0; height:2px; background:#dcc286; }
.bottom-center { text-align:center; min-width:170px; }.bottom-center>span { display:block; font-size:11px; color:#c6c4a0; margin-bottom:6px; }.bottom-center button { padding:7px 12px; font-size:11px; background:#202d1efa; border-color:#929566; }.bottom-center button:disabled { display:none; }
.equipment-slots { display:flex; gap:5px; width:23%; justify-content:flex-end; }.equipment-slots button { position:relative; min-width:50px; height:54px; background:#142019ed; border:1px solid #596c4e; padding:4px 6px; }.equipment-slots svg { display:block; width:22px; height:22px; margin:0 auto; }.equipment-slots small { display:block; font:10px Consolas,monospace; color:#c2c9a5; margin-top:4px; }.equipment-slots .key-badge { position:absolute; top:2px; right:3px; font:9px Consolas,monospace; color:#d9bf7d; }.equipment-slots .cooldown { position:absolute; inset:0; display:grid; place-items:center; font:15px Consolas,monospace; background:#102017ba; }
.controls-strip { display:flex; justify-content:center; gap:18px; padding:19px 0 10px; color:#a9b392; font-size:11px; flex-wrap:wrap; }.controls-strip span { display:flex; align-items:center; gap:6px; }.controls-strip label { font-size:11px; }kbd { font:10px Consolas,monospace; border:1px solid #667154; background:#222e20; color:#d8d9b2; padding:2px 5px; border-radius:2px; }
.below-game { display:flex; justify-content:space-between; color:#829070; font:10px Consolas,"Microsoft YaHei",monospace; letter-spacing:1px; margin-top:6px; }
.corner-mark { position:absolute; bottom:1%; left:47%; font:9px Consolas,monospace; color:#a0aa7b55; pointer-events:none; }
.overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:22px; background:#09120bcc; backdrop-filter:blur(3px); overflow-y:auto; }
.overlay:empty { display:none; }
.overlay.menu-overlay { padding:0; background:linear-gradient(90deg,#0c160ff5 0%,#101a11dd 40%,#10190d11 85%),url('./assets/concept.png') center/cover; backdrop-filter:none; align-items:stretch; }
.main-menu { width:59%; display:flex; flex-direction:column; justify-content:center; padding:5% 6%; background:linear-gradient(90deg,#121d12c0,#18211433); }
.eyebrow { font:10px Consolas,monospace; color:#d0bd7d; letter-spacing:3px; display:flex; align-items:center; gap:9px; }.eyebrow::before { content:""; display:inline-block; width:22px; height:2px; background:#b9a269; }
.main-menu h1 { font-size:clamp(30px,4.6vw,64px); letter-spacing:1px; line-height:.96; font-weight:700; margin:24px 0 12px; color:#e5dcb2; text-shadow:3px 3px 0 #34442a; }.main-menu h1 span { display:block; color:#c0ab70; }.cn-title { font-size:19px; letter-spacing:8px; font-weight:400; margin-top:8px; }.menu-description { font-size:12px; line-height:1.8; color:#bec7a4; max-width:280px; margin:15px 0 22px; }
.menu-buttons { display:flex; flex-direction:column; gap:8px; width:min(260px,100%); }.menu-buttons button { text-align:left; padding:12px 16px; font-size:14px; letter-spacing:1px; }.menu-buttons button small { float:right; font:10px Consolas,monospace; opacity:.65; }.menu-loadout { display:flex; gap:7px; margin:13px 0 4px; align-items:center; font-size:11px; color:#b2bc99; }.menu-loadout select { max-width:155px; border:1px solid #65754b; color:#d8dabc; background:#27331f; padding:4px 7px; font-size:11px; }
.menu-foot { margin-top:17px; font:10px Consolas,"Microsoft YaHei",monospace; color:#97a57b; line-height:1.6; }.menu-side-label { position:absolute; right:5%; bottom:9%; color:#e4d6a4; text-align:right; text-shadow:0 2px 3px #000; }.menu-side-label b { display:block; font:11px Consolas,monospace; letter-spacing:3px; }.menu-side-label span { font-size:20px; letter-spacing:4px; display:block; margin-top:9px; }.menu-side-label small { display:block; font:9px Consolas,monospace; color:#cac29d; margin-top:7px; }
.dialog { background:linear-gradient(120deg,#252f22f7,#15221af7); border:1px solid #75805b; box-shadow:0 16px 60px #0009; width:min(690px,100%); max-height:100%; overflow-y:auto; padding:24px; position:relative; }.dialog.wide { width:min(840px,100%); }.dialog.compact { width:430px; }.dialog .dialog-label { font:10px Consolas,monospace; letter-spacing:2px; color:#bebc88; margin-bottom:9px; }.dialog h2 { margin:0 0 9px; font-size:24px; font-weight:500; letter-spacing:3px; }.dialog p { font-size:12px; color:#bac5a7; line-height:1.7; margin:8px 0 16px; }.dialog .dialog-top { display:flex; justify-content:space-between; align-items:center; }.dialog .close { width:29px; height:29px; background:transparent; color:#c5cfad; border-color:#657853; font-size:20px; }.dialog .dialog-actions { display:flex; gap:9px; margin-top:20px; flex-wrap:wrap; }.dialog-actions button { padding:10px 17px; font-size:12px; flex:1; }
.item-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }.item-card { min-width:0; position:relative; padding:16px 14px; background:#1b281ceb; border:1px solid #536747; display:flex; flex-direction:column; text-align:left; min-height:190px; }.item-card:hover { background:#303b24; border-color:#c6b26e; }.item-card .item-type { font:9px Consolas,"Microsoft YaHei",monospace; letter-spacing:1.2px; color:#aabb90; }.item-card svg { height:40px; width:75px; margin:15px 0; color:#c6c7a0; }.item-card strong { font-size:15px; color:#e1d9af; font-weight:500; }.item-card .item-description { font-size:11px; color:#b5c19d; line-height:1.6; margin-top:10px; display:block; flex:1; }.item-card .item-stats { font:10px Consolas,monospace; color:#cabc81; margin:10px 0 0; }.item-card .item-tier { position:absolute; right:10px; top:11px; font-size:10px; color:#ccb777; }.item-card .cost { font:14px Consolas,monospace; color:#dec28a; margin-top:11px; }.item-card.bought { opacity:.45; }
.selection-list { display:flex; flex-direction:column; gap:9px; }.selection-list button { padding:12px; text-align:left; font-size:13px; }.selection-list small { display:block; font-size:11px; color:#b7c6a7; margin-top:6px; line-height:1.5; }
.map-route { display:flex; align-items:stretch; gap:5px; margin-top:20px; }.route-column { flex:1; min-width:0; text-align:center; }.route-column>small { font:10px Consolas,monospace; color:#a6b594; }.route-node { display:block; background:#263b27; border:1px solid #526c44; padding:12px 3px; margin-top:8px; min-height:58px; font-size:10px; color:#b6c5a0; line-height:1.5; }.route-node.selected { background:#555c32; border-color:#c3b16a; color:#e6d9a0; }.route-node.past { opacity:.58; }.route-node.risk { border-color:#9f8553; color:#d7b67c; }.route-node.blocked { opacity:.38; }.route-icon { display:block; font-size:16px; margin-bottom:4px; }
.route-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:9px; }.route-options .item-card { min-height:106px; padding:10px 14px; }.route-card-icon { font-size:22px; margin:7px 0; color:#c5b178; }.route-options .item-description { margin-top:5px; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.shop-grid .item-card { min-height:165px; padding:12px; }.shop-grid .item-card svg { margin:8px 0; height:30px; }.shop-grid .item-card strong { font-size:13px; }.shop-grid .item-card .item-description { font-size:10px; }
.inventory-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.inventory-weapon { background:#18271be6; border:1px solid #556e44; padding:13px; }.inventory-weapon h3 { margin:0 0 10px; font-size:14px; font-weight:500; color:#d9d3a2; }.inventory-weapon .mod-slot { display:flex; justify-content:space-between; align-items:center; background:#263622; border:1px dashed #6b7c4e; padding:8px; margin-top:7px; font-size:11px; }.mod-slot small { display:block; color:#acba92; font-size:9px; margin-bottom:4px; }.mod-slot button { padding:3px 6px; font-size:10px; }.spare-list,.relic-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }.spare-item,.relic-chip { padding:7px 9px; border:1px solid #526c44; background:#233920; font-size:11px; color:#c5cba4; }.spare-item button { padding:2px 6px; font-size:10px; margin-left:5px; }.section-label { margin:17px 0 7px; font-size:11px; color:#c3bc83; letter-spacing:1px; }
.inventory-weapon h3 svg { width:52px; height:30px; vertical-align:middle; margin-right:4px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #50633e55; font-size:12px; }.setting-row input[type="range"] { width:170px; accent-color:#c4b16d; }.setting-row input[type="checkbox"] { accent-color:#c4b16d; }.bindings { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:13px; }.binding { display:flex; justify-content:space-between; align-items:center; border:1px solid #536946; padding:6px 9px; font-size:10px; }.binding button { font:10px Consolas,monospace; padding:4px 6px; }.binding button.waiting { background:#897c47; color:#fff1c1; }
.result-number { font:44px Bahnschrift,Consolas,monospace; color:#ddc17d; }.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }.result-grid div { background:#20331f; padding:14px; border-top:1px solid #778852; }.result-grid small { display:block; font-size:10px; color:#aebc96; margin-bottom:7px; }.result-grid strong { font:24px Consolas,monospace; color:#e1d6a4; }.archive-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #53694666; }.archive-row svg { width:65px; height:30px; color:#d0d6ae; }.archive-row>span { flex:1; }.archive-row b { display:block; font-size:13px; font-weight:500; }.archive-row small { display:block; color:#b5c49f; font-size:10px; margin-top:5px; }.archive-row button { padding:8px 12px; font-size:11px; }
.toast { position:absolute; left:50%; transform:translateX(-50%); bottom:17%; max-width:82%; padding:10px 17px; background:#182719f2; border:1px solid #849368; color:#e0dab4; font-size:12px; line-height:1.5; z-index:8; text-align:center; pointer-events:none; }
@media (min-width:1400px) { #app { padding-top:32px; } }
@media (max-width:900px) { #app { padding:17px 18px; }.signal { display:none; }.masthead { margin-bottom:12px; }.wordmark { font-size:15px; }.wordmark small { font-size:9px; }.controls-strip { gap:11px; }.main-menu h1 { margin:15px 0 8px; }.menu-description { font-size:11px; margin:12px 0 15px; }.menu-buttons button { padding:9px 12px; }.menu-foot { margin-top:11px; font-size:9px; }.dialog { padding:18px; }.item-card { min-height:170px; padding:12px; }.item-card svg { height:30px; margin:10px 0; }.hud-bottom { gap:8px; }.weapon-slot { min-height:48px; padding:4px; }.equipment-slots button { min-width:43px; height:48px; }.sector-info { padding-top:5px; }.sector-info>span { font-size:10px; }.sector-info small { font-size:10px; }.vital-row { height:18px; }.vital-row strong { font-size:12px; }.vital-row>span { font-size:16px; }.vitals { padding:4px 6px; }.mini-map { padding:5px; }.mini-map small { font-size:9px; }.bottom-center { min-width:140px; }.bottom-center button { padding:5px 8px; font-size:10px; }.bottom-center>span { font-size:10px; }.weapon-slot .weapon-name { font-size:9px; }.weapon-slot .ammo { font-size:10px; }.weapon-slot svg { width:33px; height:15px; } }
@media (max-width:600px) { #app { padding:8px 10px; max-width:100%; }.masthead { margin-bottom:7px; }.wordmark { font-size:12px; }.wordmark small { display:none; }.emblem { width:26px; height:26px; font-size:21px; }.top-actions { gap:5px; }.top-actions button { font-size:10px; padding:4px 7px; }.controls-strip { padding-top:12px; gap:8px; }.below-game { margin-top:0; font-size:9px; }.overlay { padding:12px; }.main-menu { padding:4% 5%; width:61%; }.main-menu h1 { font-size:30px; margin-top:12px; }.cn-title { font-size:14px; letter-spacing:5px; }.eyebrow { font-size:8px; }.menu-description { margin:8px 0 10px; font-size:10px; }.menu-foot,.menu-side-label { display:none; }.menu-buttons button { padding:7px 10px; font-size:12px; }.menu-loadout { font-size:9px; }.menu-loadout select { font-size:10px; }.dialog { padding:12px; }.dialog h2 { font-size:19px; }.dialog p { margin:6px 0 10px; font-size:11px; }.item-grid { gap:7px; }.item-card { min-height:140px; padding:9px; }.item-card strong { font-size:12px; }.item-card .item-description { font-size:10px; margin-top:6px; }.item-card svg { height:23px; width:52px; margin:9px 0; }.dialog .dialog-actions { margin-top:12px; }.dialog-actions button { padding:7px 10px; }.tutorial { font-size:10px; padding:5px 10px; }.room-banner { min-width:200px; padding:9px 18px; }.room-banner strong { font-size:19px; }.room-banner small { font-size:10px; }.sector-info { display:none; }.vitals { width:30%; }.boss-hud { left:32%; width:46%; }.boss-hud>span { font-size:10px; }.boss-hud small { font-size:8px; }.boss-hud { padding:3px 7px; }.vital-row { height:15px; }.vital-row strong { font-size:10px; }.meter { height:6px; }.mini-map small { font-size:8px; }#map-nodes { gap:2px; }#map-nodes i { height:5px; }.mini-map { width:16%; padding:4px; }.weapon-slots { width:34%; }.weapon-slot { min-height:40px; }.weapon-slot .weapon-name { font-size:8px; }.weapon-slot .ammo { font-size:9px; }.weapon-slot svg { width:26px; height:12px; }.weapon-slot .slot-index { display:none; }.equipment-slots { width:26%; gap:3px; }.equipment-slots button { height:39px; min-width:32px; padding:3px; }.equipment-slots svg { width:17px; height:17px; }.equipment-slots small { font-size:8px; margin-top:3px; }.bottom-center { min-width:120px; }.bottom-center>span { font-size:9px; }.bottom-center button { font-size:9px; padding:4px 6px; }.route-node { padding:7px 2px; font-size:9px; min-height:42px; }.route-icon { font-size:13px; }.shop-grid .item-card { min-height:120px; }.inventory-grid { gap:7px; }.bindings { grid-template-columns:repeat(2,1fr); } }
@media (max-height:650px) { #app { max-width:min(1100px,calc((100dvh - 100px) * 1.77778 + 20px)); padding:8px 10px; }.masthead { margin-bottom:8px; }.emblem { width:26px; height:26px; font-size:21px; }.wordmark { font-size:13px; }.wordmark small,.below-game,.signal { display:none; }.controls-strip { padding:11px 0 3px; gap:9px; }.controls-strip label { font-size:10px; }.top-actions button { padding:4px 8px; }.dialog { padding:14px; }.dialog h2 { font-size:20px; }.dialog p { margin-bottom:10px; }.map-route { margin-top:9px; }.route-node { padding:7px 2px; min-height:43px; }.route-icon { font-size:13px; margin-bottom:2px; }.section-label { margin-top:11px; }.dialog .dialog-actions { margin-top:11px; }.route-options .item-card { min-height:90px; }.route-card-icon { font-size:17px; margin:4px 0; } }
@media (max-height:650px) and (min-width:601px) { .main-menu { padding:12px 5%; }.main-menu h1 { font-size:32px; margin:12px 0 8px; }.main-menu .cn-title { font-size:16px; margin-top:4px; }.main-menu .eyebrow { font-size:9px; }.menu-description { font-size:11px; line-height:1.6; margin:10px 0 14px; }.menu-buttons button { padding:8px 14px; font-size:12px; }.menu-foot { display:none; }.menu-loadout { margin-top:8px; } }
@media (max-width:520px) { .menu-description { display:none; }.main-menu h1 { font-size:24px; margin:9px 0 6px; }.main-menu .cn-title { font-size:12px; margin-top:3px; letter-spacing:4px; }.main-menu .eyebrow { font-size:7px; letter-spacing:1px; }.menu-buttons { margin-top:10px; gap:5px; }.menu-buttons button { padding:6px 9px; font-size:10px; }.menu-buttons button small { font-size:8px; }.menu-loadout { margin-top:8px; font-size:8px; }.menu-loadout select { font-size:9px; padding:3px; }.controls-strip { gap:7px; }.controls-strip label { font-size:9px; } }
@media (max-width:520px) { .main-menu { padding:2% 4%; }.main-menu h1 { font-size:20px; margin:7px 0 4px; }.main-menu .cn-title { font-size:10px; margin-top:3px; }.menu-buttons { margin-top:7px; }.menu-buttons button { padding:5px 8px; }.menu-loadout { margin-top:5px; }.menu-loadout select { padding:2px; } }

/* Controls stay outside the arena so thumbs never cover enemies or warnings. */
button,select { touch-action:manipulation; }
#input-mode,.setting-row select { color:var(--text); background:#1b291d; border:1px solid #64744e; border-radius:2px; padding:6px 8px; font-size:11px; }
.play-layout { display:grid; grid-template-areas:"game" "deck"; gap:14px; }
.game-shell { grid-area:game; min-width:0; }
.input-deck { grid-area:deck; display:none; }
.input-actions { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; }
.input-actions button { min-height:46px; padding:5px 7px; font-size:12px; background:#233322; border-color:#64754d; touch-action:none; }
.input-actions button span { display:block; }.input-actions button small { display:block; font-size:10px; color:#b9c99e; line-height:1.3; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.input-actions button[aria-pressed="true"] { border-color:#d7b878; background:#465234; box-shadow:inset 0 0 0 1px #9eac6770; }
.input-deck.inactive .virtual-stick { opacity:.35; }.input-deck.inactive { cursor:default; }
.stick-wrap { display:none; align-self:center; text-align:center; color:#bccca1; font-size:11px; }
.stick-wrap>span { display:block; margin-top:8px; letter-spacing:1px; }
.virtual-stick { width:102px; height:102px; margin:0 auto; position:relative; border:1px solid #71835a; border-radius:50%; background:radial-gradient(circle,#314a30 0 15%,#1d2d20 55%,#152119 70%); box-shadow:inset 0 0 0 10px #9cb47708,0 2px 15px #0004; touch-action:none; cursor:grab; }
.virtual-stick::after { content:""; position:absolute; inset:15px; border:1px dashed #64795088; border-radius:50%; pointer-events:none; }
.stick-knob { position:absolute; left:50%; top:50%; width:42px; height:42px; margin:-21px; border:1px solid #a3b780; border-radius:50%; background:linear-gradient(135deg,#6e8152,#354a35); box-shadow:0 3px 8px #0008; transform:translate(var(--stick-x,0px),var(--stick-y,0px)); pointer-events:none; }
.stick-cross { position:absolute; left:0; right:0; top:38px; font:22px Consolas,monospace; color:#d1d9b3; transform:translate(var(--stick-x,0px),var(--stick-y,0px)); pointer-events:none; }
.virtual-stick.engaged { border-color:#e3c47c; cursor:grabbing; }.virtual-stick.engaged .stick-knob { border-color:#e5cf90; }
.input-help { display:none; font-size:11px; color:#b1bf98; text-align:center; line-height:1.6; margin:13px 0 4px; }
.guide-row>span:last-child { max-width:66%; color:#d5d4ac; text-align:right; line-height:1.6; }
.menu-tools { display:none; gap:6px; margin-top:10px; }.menu-tools button { flex:1; min-width:0; font-size:11px; padding:7px; }
body[data-input="mouse"] #app { max-width:min(1300px,calc((100dvh - 235px) * 1.77778 + 84px)); }
body[data-input="mouse"] .input-deck,body[data-input="touch"] .input-deck { display:block; }
body[data-input="mouse"] .input-help,body[data-input="touch"] .input-help { display:block; }
body[data-input="mouse"] .controls-strip,body[data-input="touch"] .controls-strip { display:none; }
body[data-input="mouse"] .tutorial,body[data-input="touch"] .tutorial { display:none; }
body[data-input="mouse"] canvas { cursor:crosshair; }
body[data-input="mouse"] .main-menu { padding:12px 5%; }
body[data-input="mouse"] .main-menu h1 { font-size:32px; margin:12px 0 8px; }
body[data-input="mouse"] .main-menu .cn-title { font-size:16px; margin-top:4px; }
body[data-input="mouse"] .main-menu .eyebrow { font-size:9px; }
body[data-input="mouse"] .menu-description { font-size:11px; line-height:1.6; margin:10px 0 14px; }
body[data-input="mouse"] .menu-buttons button { padding:8px 14px; font-size:12px; }
body[data-input="mouse"] .menu-foot { display:none; }
body[data-input="mouse"] .menu-loadout { margin-top:8px; }
body[data-input="touch"] #app { padding: max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); max-width:1100px; }
body[data-input="touch"] .input-deck { display:grid; grid-template-columns:106px minmax(0,1fr) 106px; gap:8px; align-items:center; }
body[data-input="touch"] .stick-wrap { display:block; }
body[data-input="touch"] .input-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
body[data-input="touch"] .stop-action { display:none; }
body[data-input="touch"] .input-actions [data-input-action="fullscreen"] { grid-column:auto; }
body[data-input="touch"] .masthead { gap:8px; margin-bottom:12px; }
body[data-input="touch"] .top-actions button,body[data-input="touch"] #input-mode { min-height:44px; min-width:44px; }
body[data-input="touch"] .top-actions { gap:5px; }
body[data-input="touch"] .wordmark { font-size:12px; letter-spacing:1px; }.signal { flex-shrink:0; }
body[data-input="touch"] .signal,body[data-input="touch"] .wordmark small,body[data-input="touch"] .below-game { display:none; }
body[data-input="touch"] .hud-bottom { gap:6px; }
body[data-input="touch"] .equipment-slots { width:auto; }
body[data-input="touch"] .equipment-slots button:not(#inventory-button) { display:none; }
body[data-input="touch"] #inventory-button { width:44px; height:44px; }
body[data-input="touch"] .weapon-slot { min-height:44px; }
body[data-input="touch"] .bottom-center { min-width:105px; }
body[data-input="touch"] .bottom-center button { min-height:44px; font-size:11px; }
body[data-input="touch"] .bottom-center kbd,body[data-input="touch"] .weapon-slot .slot-index { display:none; }
body[data-input="touch"] .hud-bottom .bottom-center>span { font-size:10px; }
body[data-input="touch"] .mini-map { min-height:44px; min-width:52px; }
body[data-input="touch"] .overlay { position:fixed; inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); z-index:30; padding:14px; overflow:auto; }
body[data-input="touch"] .dialog { max-height:100%; padding:20px; }
body[data-input="touch"] .dialog .close { min-width:44px; min-height:44px; }
body[data-input="touch"] .dialog button,body[data-input="touch"] .dialog select { min-height:44px; }
body[data-input="touch"] .main-menu { width:65%; padding:24px 6%; }
body[data-input="touch"] .main-menu h1 { font-size:44px; margin:20px 0 15px; }
body[data-input="touch"] .main-menu .cn-title { font-size:18px; }
body[data-input="touch"] .menu-buttons button { min-height:48px; padding:10px 14px; font-size:14px; }
body[data-input="touch"] .menu-loadout { font-size:11px; margin-top:18px; }
body[data-input="touch"] .menu-loadout select { min-height:44px; font-size:12px; }
body[data-input="touch"] .menu-tools { display:flex; }.menu-tools button { min-height:44px; }
body[data-input="touch"] .tutorial { max-width:90%; white-space:normal; text-align:center; bottom:24%; }
@media (max-width:600px) {
  #input-mode { max-width:92px; padding:5px; font-size:10px; }
  .wordmark { gap:7px; }.wordmark .emblem { display:none; }
  body[data-input="mouse"] #app { max-width:100%; }
  body[data-input="mouse"] .main-menu { padding:8px 4%; }
  body[data-input="mouse"] .main-menu h1 { font-size:20px; margin:7px 0 4px; }
  body[data-input="mouse"] .main-menu .cn-title { font-size:10px; margin-top:3px; }
  body[data-input="mouse"] .main-menu .eyebrow { font-size:7px; letter-spacing:1px; }
  body[data-input="mouse"] .menu-description { display:none; }
  body[data-input="mouse"] .menu-buttons { gap:5px; margin-top:7px; }
  body[data-input="mouse"] .menu-buttons button { padding:5px 8px; font-size:10px; }
  body[data-input="mouse"] .menu-loadout { margin-top:5px; }
  body[data-input="mouse"] .input-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body[data-input="touch"] .input-deck { grid-template-columns:90px minmax(0,1fr) 90px; gap:5px; }
  body[data-input="touch"] .virtual-stick { width:86px; height:86px; }.stick-cross { top:30px; }
  body[data-input="touch"] .input-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  body[data-input="touch"] .input-actions button { padding:4px; font-size:11px; min-height:44px; }
  body[data-input="touch"] .input-actions button small { font-size:9px; }
  body[data-input="touch"] .top-actions { flex-wrap:wrap; justify-content:flex-end; }
  body[data-input="touch"] .top-actions #archive-button { display:none; }
  body[data-input="touch"] .main-menu { width:90%; }
  body[data-input="touch"] .item-grid,body[data-input="touch"] .shop-grid { grid-template-columns:1fr; }
  body[data-input="touch"] .item-card { min-height:132px; padding:14px; }
  body[data-input="touch"] .item-card strong { font-size:16px; }
  body[data-input="touch"] .item-card .item-description { font-size:12px; }
  body[data-input="touch"] .map-route { overflow-x:auto; padding-bottom:10px; }.route-column { min-width:54px; }
  body[data-input="touch"] .inventory-grid { grid-template-columns:1fr; }
  body[data-input="touch"] .dialog-actions button { flex-basis:40%; }
}
@media (orientation:landscape) and (max-height:650px) {
  body[data-input="mouse"] #app { max-width:min(1200px,calc((100dvh - 164px) * 1.77778 + 20px)); }
  body[data-input="touch"] #app { max-width:min(1300px,calc((100dvh - 134px) * 1.77778 + 240px)); }
  body[data-input="touch"] .play-layout { grid-template-columns:102px minmax(0,1fr) 102px; grid-template-areas:"left game right" "actions actions actions"; gap:10px; }
  body[data-input="touch"] .input-deck { display:contents; }
  body[data-input="touch"] .move-wrap { grid-area:left; }body[data-input="touch"] .aim-wrap { grid-area:right; }
  body[data-input="touch"] .input-actions { grid-area:actions; grid-template-columns:repeat(7,minmax(0,1fr)); }
  body[data-input="touch"] .masthead { margin-bottom:8px; }.input-help { margin-top:6px; font-size:10px; }
  body[data-input="touch"] .main-menu { padding:14px 5%; }.main-menu .menu-loadout { margin-top:10px; }
  body[data-input="touch"] .main-menu h1 { font-size:28px; margin:8px 0; }
  body[data-input="touch"] .main-menu .cn-title { font-size:14px; margin-top:0; }
  body[data-input="touch"] .main-menu .menu-description { display:none; }
  body[data-input="touch"] .main-menu .menu-input { margin-top:8px; }
  body[data-input="touch"] .menu-buttons { gap:5px; }
  body[data-input="touch"] .menu-buttons button { min-height:44px; padding:7px 12px; }
  body[data-input="touch"] .input-help { display:none; }
}