:root {
  color-scheme: dark;
  --bg: #070912;
  --panel: rgba(12, 15, 28, .92);
  --ink: #f4f7ff;
  --muted: #8b93ad;
  --cyan: #62f2ff;
  --violet: #9d72ff;
  --pink: #ff4f8b;
  --amber: #ffca62;
  --line: rgba(139, 147, 173, .22);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#game-shell { position: fixed; inset: 0; min-height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 45%, #111632 0, var(--bg) 62%); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.panel-screen { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(25,31,67,.48), rgba(7,9,18,.86) 60%); }
.panel-screen.active { display: flex; }
.panel-screen::before { content:""; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: linear-gradient(rgba(98,242,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(98,242,255,.14) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle, #000, transparent 68%); }
.brand { position: relative; margin-bottom: clamp(22px, 3.5vh, 42px); }
.eyebrow, .modal-kicker { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .24em; }
h1 { margin: 10px 0 8px; font-size: clamp(47px, 9vw, 104px); line-height: .9; letter-spacing: -.08em; font-weight: 900; text-shadow: 0 0 36px rgba(98,242,255,.18); }
h1 span { color: var(--cyan); font-weight: 300; }
.brand p { margin: 0; color: var(--muted); font-size: clamp(14px, 2vw, 18px); letter-spacing: .03em; }
.menu-actions { position: relative; width: min(720px, 94vw); display: grid; gap: 10px; }
.stage-browser { display: grid; gap: 7px; min-width: 0; }
.stage-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 48px; padding: 8px 12px; border: 1px solid rgba(139,147,173,.18); border-radius: 5px; background: rgba(9,13,25,.78); text-align: left; }
.stage-summary > i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--stage); border-radius: 50%; color: var(--stage); font-style: normal; }
.stage-summary b,.stage-summary small { display: block; }
.stage-summary b { margin-bottom: 2px; font-size: 10px; letter-spacing: .09em; }
.stage-summary small { color: var(--muted); font-size: 8px; }
.stage-summary em { color: var(--stage); font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .1em; }
.stage-select { display: grid; grid-template-rows: repeat(2,54px); grid-auto-flow: column; grid-auto-columns: 105px; gap: 6px; margin-bottom: 2px; padding: 2px 2px 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-color: rgba(98,242,255,.35) transparent; scrollbar-width: thin; }
.stage-card { position: relative; display: grid; grid-template-columns: 25px 1fr; gap: 7px; align-items: center; min-height: 54px; padding: 7px; overflow: hidden; text-align: left; letter-spacing: normal; scroll-snap-align: center; }
.stage-card::after { content:""; position: absolute; inset: auto 0 0; height: 2px; opacity: 0; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); transition: opacity .2s; }
.stage-card.active { border-color: rgba(98,242,255,.72); background: rgba(21,33,53,.94); box-shadow: inset 0 0 24px rgba(98,242,255,.06),0 0 20px rgba(98,242,255,.08); }
.stage-card.active::after { opacity: 1; }
.stage-card:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.7); }
.stage-card.concealed b { margin: 0; color: #a2aac0; letter-spacing: .18em; }
.stage-card:disabled:hover { transform: none; background: rgba(18,22,40,.76); border-color: var(--line); }
.stage-card > i { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; color: var(--stage); font-style: normal; font-size: 10px; box-shadow: 0 0 18px color-mix(in srgb,var(--stage) 18%,transparent); }
.stage-card b,.stage-card small,.stage-card em { display: block; }
.stage-card b { margin-bottom: 2px; font-size: 8px; letter-spacing: .05em; white-space: nowrap; }
.stage-card small { color: var(--muted); font-size: 7px; font-weight: 700; line-height: 1.2; }
.stage-card em { position: absolute; right: 4px; top: 3px; color: var(--stage); font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: .05em; }
button { min-height: 52px; padding: 0 20px; border: 1px solid var(--line); border-radius: 5px; background: rgba(18,22,40,.76); cursor: pointer; transition: transform .13s, background .13s, border-color .13s; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
button:hover { transform: translateY(-2px); background: rgba(30,36,62,.94); border-color: rgba(98,242,255,.5); }
button:active { transform: translateY(0) scale(.99); }
button.primary { color: #061014; background: linear-gradient(115deg, var(--cyan), #9df8d3); border: 0; box-shadow: 0 8px 32px rgba(98,242,255,.16); }
button.primary:hover { background: linear-gradient(115deg, #9af7ff, #bdffe5); }
#start-btn { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding-inline: 26px; font-size: 14px; }
.enemy-info-btn { display: flex; align-items: center; justify-content: space-between; min-height: 40px; color: #c9d1e8; }
.enemy-info-btn em { display: grid; place-items: center; min-width: 25px; height: 21px; padding: 0 6px; border: 1px solid rgba(255,79,139,.35); border-radius: 11px; color: var(--pink); font-size: 8px; font-style: normal; }
.intel-row .enemy-info-btn { justify-content: space-between; }
kbd { padding: 5px 8px; border: 1px solid rgba(6,16,20,.28); border-radius: 3px; font: 700 9px/1 system-ui; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.button-row button { display: flex; align-items: center; justify-content: center; gap: 10px; }
.button-row em { color: var(--amber); font-style: normal; font-size: 10px; }
.button-row.compact button { min-height: 38px; color: var(--muted); font-size: 9px; }
footer { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); color: #646c85; font-size: 10px; letter-spacing: .16em; }
footer b { color: #aeb5ca; } footer i { margin: 0 10px; font-style: normal; }
.hidden { display: none !important; }

#hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: max(15px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(15px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 18px; }
.hud-block { width: min(260px, 28vw); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.hud-block b { display: block; margin-top: 4px; color: var(--ink); font-size: 11px; }
.gear-status { display: block; min-height: 10px; margin-top: 3px; color: var(--amber); font-size: 7px; letter-spacing: .08em; }
.score-block { justify-self: end; text-align: right; }
.score-block > b { margin: -2px 0 0; font-size: 24px; letter-spacing: -.04em; }
.score-block small { color: var(--muted); } .score-block i { color: var(--amber); font-style: normal; }
.meter { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.1); }
.meter i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--pink), #ff8f8f); box-shadow: 0 0 12px var(--pink); transform-origin: left; }
.timer-wrap { text-align: center; }
.timer-wrap small { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.timer-wrap b { font-size: 24px; letter-spacing: .05em; }
.xp-row { display: flex; align-items: center; gap: 10px; width: min(560px, 60vw); margin: 10px auto; color: var(--cyan); font-size: 9px; font-weight: 900; }
.xp-meter { flex: 1; margin: 0; }
.xp-meter i { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px var(--cyan); }
.heat-wrap { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: min(300px, 35vw); transform: translateX(-50%); transition: width .28s ease; }
.heat-wrap.has-cryo { width: min(420px,49vw); }
.heat-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.heat-label b { color: var(--cyan); }
.heat-meter { position: relative; height: 7px; overflow: hidden; }
.heat-meter i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg,#39a9ff,var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width .12s linear; }
#heat-reserve-fill { display: none; width: 0; background: linear-gradient(90deg,#ffca62,#ff9f43); box-shadow: 0 0 13px var(--amber); }
.heat-wrap.has-cryo #heat-reserve-fill { display: block; }
.icon-btn { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: none; width: 42px; min-height: 42px; padding: 0; pointer-events: auto; }
#overclock-btn { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: none; width: 74px; height: 74px; min-height: 0; padding: 0; border: 1px solid rgba(98,242,255,.45); border-radius: 50%; background: rgba(10,18,31,.76); pointer-events: auto; touch-action: none; box-shadow: inset 0 0 25px rgba(98,242,255,.08), 0 0 20px rgba(98,242,255,.1); }
#overclock-btn span { display: block; color: var(--muted); font-size: 7px; letter-spacing: .13em; }
#overclock-btn b { color: var(--cyan); font-size: 24px; }
#overclock-btn.active { background: rgba(45,29,53,.9); border-color: var(--pink); box-shadow: 0 0 24px rgba(255,79,139,.34); }
#use-gear-btn { position: absolute; left: max(22px,env(safe-area-inset-left)); bottom: max(22px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 8px; width: 116px; min-height: 54px; padding: 8px 11px; border-color: rgba(255,202,98,.42); background: rgba(18,17,31,.86); pointer-events: auto; color: var(--amber); text-align: left; box-shadow: inset 0 0 22px rgba(255,202,98,.05),0 0 18px rgba(255,202,98,.08); }
#use-gear-btn span { grid-column: 1; color: #aeb5ca; font-size: 7px; letter-spacing: .1em; }
#use-gear-btn b { grid-column: 2; grid-row: 1/3; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(255,202,98,.42); border-radius: 4px; font-size: 11px; }
#use-gear-btn em { grid-column: 1; color: var(--amber); font-size: 10px; font-style: normal; }
#use-gear-btn:disabled { opacity: .42; cursor: default; transform: none; }
#use-gear-btn.spent { border-color: rgba(139,147,173,.18); color: #707993; box-shadow: none; }
#move-joystick { position: absolute; left: max(22px,env(safe-area-inset-left)); bottom: max(22px,env(safe-area-inset-bottom)); display: none; place-items: center; width: 116px; height: 116px; border: 1px solid rgba(98,242,255,.3); border-radius: 50%; background: radial-gradient(circle,rgba(98,242,255,.1),rgba(8,13,25,.72) 68%); pointer-events: auto; touch-action: none; box-shadow: inset 0 0 30px rgba(98,242,255,.07),0 0 22px rgba(98,242,255,.09); }
#move-joystick::before { content:""; position: absolute; inset: 17px; border: 1px dashed rgba(98,242,255,.2); border-radius: 50%; background: linear-gradient(90deg,transparent calc(50% - .5px),rgba(98,242,255,.13) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),rgba(98,242,255,.13) 50%,transparent calc(50% + .5px)); pointer-events: none; }
#move-stick { position: relative; display: block; width: 48px; height: 48px; border: 1px solid rgba(98,242,255,.68); border-radius: 50%; background: radial-gradient(circle at 38% 35%,rgba(180,250,255,.35),rgba(31,67,87,.94)); box-shadow: inset 0 0 16px rgba(98,242,255,.14),0 0 16px rgba(98,242,255,.2); transform: translate3d(0,0,0); transition: transform .08s ease-out; pointer-events: none; }
#move-joystick.active { border-color: rgba(98,242,255,.58); box-shadow: inset 0 0 32px rgba(98,242,255,.11),0 0 26px rgba(98,242,255,.18); }
#move-joystick.active #move-stick { transition: none; box-shadow: inset 0 0 18px rgba(98,242,255,.24),0 0 22px rgba(98,242,255,.35); }

.modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(3,5,12,.74); backdrop-filter: blur(10px); }
.modal-card { position: relative; width: min(430px, 94vw); max-height: 92dvh; overflow: auto; padding: 34px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(155deg, rgba(20,25,46,.98), rgba(9,12,23,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.03); text-align: center; }
.modal-card.wide { width: min(910px, 96vw); }
.modal-card h2 { margin: 8px 0 26px; font-size: clamp(24px, 5vw, 40px); letter-spacing: -.04em; }
.modal-card > button:not(.close-btn) { width: 100%; margin-top: 9px; }
.danger { color: #ff8bac; }
.close-btn { position: absolute; top: 12px; right: 12px; width: 38px !important; min-height: 38px; padding: 0; color: var(--muted); font-size: 22px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.upgrade-card { min-height: 226px; padding: 22px 18px; text-align: left; }
.upgrade-card .icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 30px; border: 1px solid currentColor; border-radius: 50%; color: var(--cyan); font-size: 22px; box-shadow: 0 0 20px rgba(98,242,255,.08); }
.upgrade-card h3 { margin: 0 0 7px; font-size: 14px; letter-spacing: .04em; }
.upgrade-card p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: normal; }
.upgrade-card small { position: absolute; right: 15px; top: 15px; color: #6f7891; font-size: 8px; }
.spark-wallet { display: inline-flex; gap: 10px; align-items: center; margin: -12px 0 18px; padding: 8px 13px; border: 1px solid rgba(255,202,98,.2); border-radius: 20px; background: rgba(255,202,98,.05); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.spark-wallet b { color: var(--amber); font-size: 12px; }
.skill-tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.skill-branch { position: relative; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: rgba(8,12,24,.64); overflow: visible; }
.branch-title { position: relative; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--branch); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.branch-title i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
button.skill-node { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 68px; margin-top: 8px; padding: 10px; border-color: rgba(139,147,173,.2); background: rgba(15,19,35,.96); text-align: left; letter-spacing: normal; }
.skill-node .node-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--branch); border-radius: 50%; color: var(--branch); font-size: 15px; background: #0c1020; z-index: 1; }
.skill-node h3 { margin: 0 0 3px; font-size: 10px; letter-spacing: .05em; }
.skill-node p { margin: 0; color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.35; }
.skill-node .rank { align-self: start; color: #687089; font-size: 8px; font-weight: 900; }
.skill-node.available { border-color: var(--branch); box-shadow: inset 0 0 18px rgba(98,242,255,.05); }
.skill-node.maxed { border-color: rgba(98,242,255,.38); }
.skill-node.locked { opacity: .38; filter: grayscale(.7); }
.skill-node:disabled { cursor: not-allowed; }
.skill-node:disabled:hover { transform: none; background: rgba(15,19,35,.96); }
.systems-card { width: calc(100vw - 24px); height: calc(100dvh - 24px); max-height: none; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; padding: 0; background: #080b16; text-align: left; }
.systems-card .close-btn { z-index: 8; top: 10px; right: 10px; background: rgba(11,15,29,.86); }
.systems-head { position: relative; z-index: 5; min-height: 92px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 22px; padding: 14px 66px 12px 22px; border-bottom: 1px solid var(--line); background: rgba(11,14,27,.94); box-shadow: 0 10px 35px rgba(0,0,0,.25); }
.systems-head h2 { margin: 2px 0 0; font-size: 25px; }
.systems-head .wallet { margin: 0; border: 1px solid rgba(255,202,98,.16); border-radius: 5px; }
.systems-head .tree-note { margin: 0; text-align: right; }
.meta-viewport { position: relative; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; background-color: #060913; background-image: radial-gradient(circle at 50% 50%, rgba(157,114,255,.08), transparent 38%), radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 1.5px); background-size: 100% 100%, 42px 42px; }
.meta-viewport.dragging { cursor: grabbing; }
.meta-viewport::after { content:""; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 100px #03050b; }
.talent-world { position: absolute; left: 0; top: 0; width: 4800px; height: 4800px; transform-origin: 0 0; will-change: transform; background-color: #060913; background-image: radial-gradient(circle at 50% 50%, rgba(157,114,255,.12) 0 2%, transparent 7%), linear-gradient(rgba(98,242,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(98,242,255,.025) 1px, transparent 1px), repeating-radial-gradient(circle at 50% 50%, transparent 0 159px, rgba(139,147,173,.025) 160px, transparent 161px); background-size: 100% 100%, 80px 80px, 80px 80px, 100% 100%; }
.talent-world.camera-anim { transition: transform .72s cubic-bezier(.22,.82,.21,1); }
.talent-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.talent-links path { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.circuit-underlay { stroke: var(--branch); stroke-width: 9; opacity: .055; }
.circuit-trace { stroke: var(--branch); stroke-width: 2.2; opacity: .68; filter: drop-shadow(0 0 7px var(--branch)); }
.circuit-trace.newly-powered { stroke-width: 3.2; opacity: 1; }
.circuit-trace.trace-grow,.circuit-underlay.underlay-grow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lineGrow var(--grow) var(--delay) linear forwards; }
.circuit-via { fill: #080c18; stroke: var(--branch); stroke-width: 2; opacity: .76; filter: drop-shadow(0 0 5px var(--branch)); }
.circuit-via.via-grow { opacity: 0; animation: viaPower .22s var(--via-delay) ease-out forwards; }
.world-ring { fill: none; stroke: rgba(157,114,255,.12); stroke-width: 1.5; stroke-dasharray: 3 13; }
.world-ring.outer { stroke: rgba(255,202,98,.08); stroke-dasharray: 2 18; }
.matrix-root { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 164px; height: 164px; padding: 18px; border: 1px solid rgba(205,186,255,.66); border-radius: 50%; background: radial-gradient(circle,#1b2042,#0c1020 72%); color: #e3d9ff; transform: translate(-50%,-50%); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-align: center; box-shadow: 0 0 0 18px rgba(157,114,255,.035),0 0 65px rgba(157,114,255,.28); }
.matrix-root i { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; color: var(--amber); font-style: normal; font-size: 20px; }
.matrix-root small { color: #737c97; font-size: 8px; }
.sector-label { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; justify-items: center; gap: 5px; color: var(--branch); transform: translate(-50%,-50%); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 0 14px var(--branch); }
.sector-label i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; background: #090d1a; }
.talent-node { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 218px; transform: translate(-50%,-50%); }
.talent-node button.skill-node { min-height: 84px; margin: 0; border-color: color-mix(in srgb,var(--branch) 45%,transparent); background: rgba(10,14,28,.96); box-shadow: 0 0 0 5px rgba(5,8,17,.88),0 0 28px rgba(0,0,0,.5); }
.talent-node .skill-node.available { box-shadow: 0 0 0 5px rgba(5,8,17,.88),0 0 24px color-mix(in srgb,var(--branch) 24%,transparent),inset 0 0 22px color-mix(in srgb,var(--branch) 7%,transparent); }
.talent-node .skill-node.maxed { border-color: var(--branch); }
.talent-node.node-reveal { opacity: 0; animation: nodeBloom .72s .48s cubic-bezier(.17,.84,.28,1.25) forwards; }
.unlock-flare { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 38px; height: 38px; border: 2px solid var(--branch); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; animation: unlockFlare 1.1s ease-out forwards; box-shadow: 0 0 22px var(--branch); }
.unlock-burst { position: absolute; left: var(--x); top: var(--y); z-index: 7; width: 1px; height: 1px; pointer-events: none; }
.unlock-burst i { position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0; background: var(--branch); box-shadow: 0 0 10px var(--branch); transform: rotate(var(--a)) translateX(0); animation: sparkBurst .9s var(--delay) cubic-bezier(.15,.65,.25,1) forwards; }
.systems-tools { position: relative; z-index: 6; min-height: 48px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding: 6px 12px 6px 18px; border-top: 1px solid var(--line); background: rgba(10,13,25,.96); color: #68718a; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.systems-tools button { width: auto !important; min-height: 34px !important; margin: 0 !important; padding: 0 13px; font-size: 8px; }
#tree-progress { color: var(--cyan); }
#tree-drag-hint::before { content:"✥"; margin-right: 8px; color: var(--violet); }
@keyframes lineGrow { to { stroke-dashoffset: 0; } }
@keyframes viaPower { 0% { opacity:0;r:1px } 70% { opacity:1;r:8px } 100% { opacity:.76;r:5px } }
@keyframes nodeBloom { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3);filter:blur(8px) } 65% { opacity:1;transform:translate(-50%,-50%) scale(1.09);filter:blur(0) } 100% { opacity:1;transform:translate(-50%,-50%) scale(1) } }
@keyframes unlockFlare { 0% { opacity:1;transform:translate(-50%,-50%) scale(.4) } 100% { opacity:0;transform:translate(-50%,-50%) scale(8) } }
@keyframes sparkBurst { 0% { opacity:0;transform:rotate(var(--a)) translateX(0) scale(1.8) } 20% { opacity:1 } 100% { opacity:0;transform:rotate(var(--a)) translateX(var(--r)) scale(.2) } }
.result-score { padding: 18px; border-block: 1px solid var(--line); }
.result-stage { margin: -18px 0 16px; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.result-score span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.result-score b { display: block; font-size: 44px; letter-spacing: -.04em; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 14px 0; background: var(--line); }
.result-grid div { padding: 14px; background: #0d1120; }
.result-grid span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.result-grid b { font-size: 16px; }
.manual-grid { display: grid; gap: 12px; text-align: left; }
.manual-grid div { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 13px; border: 1px solid var(--line); }
.manual-grid b { color: var(--cyan); font-size: 10px; }
.manual-grid p { margin: 0; color: #bec5d8; font-size: 12px; line-height: 1.5; }
.enemy-info-card { width: min(980px,96vw); }
.enemy-info-card h2 { margin-bottom: 18px; }
.enemy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; text-align: left; }
.enemy-entry { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 10px; min-height: 105px; padding: 12px; border: 1px solid rgba(139,147,173,.18); border-radius: 5px; background: rgba(8,12,24,.78); overflow: hidden; }
.enemy-entry::after { content:""; position: absolute; inset: auto 0 0; height: 1px; opacity: .7; background: var(--enemy); box-shadow: 0 0 12px var(--enemy); }
.enemy-entry > i { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--enemy); border-radius: 50%; color: var(--enemy); font-style: normal; font-size: 15px; box-shadow: inset 0 0 12px color-mix(in srgb,var(--enemy) 9%,transparent); }
.enemy-entry h3 { margin: 1px 0 3px; font-size: 10px; letter-spacing: .06em; }
.enemy-entry p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.42; }
.enemy-entry footer { position: static; display: flex; justify-content: space-between; margin-top: 7px; color: #68718a; font-size: 7px; letter-spacing: .08em; }
.enemy-entry footer b { color: var(--enemy); font-size: 7px; }
.enemy-unknown { --enemy:#3f465b; min-height: 105px; opacity: .52; background: repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 6px,transparent 6px 12px),rgba(8,12,24,.78); }
.enemy-unknown > i { border-style: dashed; color: #778099; font-size: 18px; box-shadow: none; }
.enemy-unknown h3 { margin-top: 8px; color: #8b93ad; letter-spacing: .18em; }
.enemy-unknown p { color: #4f576e; letter-spacing: .16em; }
.consumable-card { width: min(960px,96vw); }
.consumable-card h2 { margin-bottom: 10px; }
.gear-balance { margin: 0 0 14px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.gear-balance b { margin-left: 8px; color: var(--amber); font-size: 13px; }
.gear-rule { margin: -5px 0 14px; color: #7f88a3; font-size: 8px; line-height: 1.45; letter-spacing: .06em; }
.run-gear-card { width: min(900px,96vw); }
.run-gear-card h2 { margin-bottom: 12px; }
.consumable-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; text-align: left; }
.gear-entry { --gear:#62f2ff; display: grid; grid-template-columns: 45px 1fr auto; gap: 10px; align-items: center; min-height: 112px; padding: 12px; border: 1px solid rgba(139,147,173,.2); border-radius: 5px; background: rgba(8,12,24,.82); }
.gear-entry.equipped { border-color: var(--gear); box-shadow: inset 0 0 24px color-mix(in srgb,var(--gear) 8%,transparent),0 0 14px color-mix(in srgb,var(--gear) 10%,transparent); }
.gear-entry > i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--gear); border-radius: 50%; color: var(--gear); font-style: normal; font-size: 17px; }
.gear-entry h3 { margin: 0 0 4px; font-size: 10px; letter-spacing: .06em; }
.gear-entry p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.gear-entry small { display: block; margin-top: 6px; color: #707993; font-size: 7px; }
.gear-actions { display: grid; gap: 5px; min-width: 84px; }
.gear-actions button { min-height: 30px; padding: 0 8px; color: var(--gear); font-size: 7px; letter-spacing: .06em; }
.gear-actions button:disabled { opacity: .4; cursor: default; transform: none; }
.run-gear-card .gear-entry { min-height: 94px; }
.run-gear-card .gear-actions button { min-width: 92px; color: #081016; background: linear-gradient(115deg,var(--gear),#d8ffe9); border: 0; }
.wallet { padding: 12px; background: rgba(255,202,98,.06); color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.wallet b { margin-left: 8px; color: var(--amber); font-size: 14px; }
.tree-note { margin: -4px 0 14px; color: var(--muted); font-size: 9px; }
.meta-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 9px; padding: 14px; border: 1px solid var(--line); text-align: left; }
.meta-row h3 { margin: 0 0 4px; font-size: 12px; }
.meta-row p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.meta-row button { min-width: 108px; min-height: 42px; padding: 0 12px; color: var(--amber); font-size: 9px; }
.meta-row button:disabled { opacity: .38; cursor: not-allowed; }
.text-btn { min-height: 32px !important; border: 0; background: transparent; color: #646c85; font-size: 8px; }
#toast { position: absolute; left: 50%; bottom: 13%; z-index: 20; padding: 10px 16px; border: 1px solid rgba(98,242,255,.35); border-radius: 4px; opacity: 0; background: rgba(8,12,23,.9); color: var(--cyan); transform: translate(-50%, 12px); transition: .2s; pointer-events: none; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#rotate-hint { display: none; }

@media (pointer: coarse), (max-width: 850px) {
  #overclock-btn, .icon-btn { display: block; }
  .score-block { margin-right: 42px; }
  .heat-wrap { bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  #move-joystick { display: grid; }
  #use-gear-btn { bottom: max(150px,calc(env(safe-area-inset-bottom) + 150px)); }
}
html.touch-preview #move-joystick { display: grid; }
html.touch-preview #use-gear-btn { bottom: max(150px,calc(env(safe-area-inset-bottom) + 150px)); }
html.touch-preview #overclock-btn,html.touch-preview .icon-btn { display: block; }
@media (max-width: 640px) {
  .panel-screen { justify-content: space-between; padding-top: 14vh; padding-bottom: 10vh; }
  .brand { margin: 0; }
  h1 { font-size: clamp(43px, 16vw, 68px); }
  .brand p { font-size: 12px; }
  .menu-actions { width: min(430px, 96vw); }
  .stage-select { grid-auto-columns: 96px; }
  .stage-summary { min-height: 44px; }
  footer { display: none; }
  .hud-top { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .hud-block { width: 26vw; }
  .score-block > b { font-size: 17px; }
  .timer-wrap b { font-size: 18px; }
  .xp-row { width: 78vw; }
  .heat-wrap { width: 42vw; left: 26%; }
  .upgrade-grid { grid-template-columns: 1fr; }
  .upgrade-card { min-height: 100px; padding: 15px 15px 15px 76px; }
  .upgrade-card .icon { position: absolute; left: 14px; top: 22px; margin: 0; }
  .skill-tree { grid-template-columns: repeat(3, 230px); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .skill-branch { scroll-snap-align: center; }
  .modal-card.wide { max-height: 96dvh; padding: 24px 16px; }
  .modal-card.wide h2 { margin-bottom: 12px; }
  .enemy-grid { grid-template-columns: 1fr; }
  .enemy-entry { min-height: 88px; }
  .consumable-grid { grid-template-columns: 1fr; }
  .gear-entry { min-height: 100px; }
  .systems-card { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .systems-head { min-height: 72px; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 54px 8px 12px; }
  .systems-head h2 { font-size: 19px; }
  .systems-head .tree-note { display: none; }
  .systems-head .wallet { padding: 8px; font-size: 7px; }
  .systems-tools { grid-template-columns: auto 1fr auto; gap: 8px; padding-left: 10px; }
  #tree-drag-hint { display: none; }
  #reset-save { display: none; }
}
@media (orientation: portrait) and (max-width: 480px) {
  #rotate-hint { position: absolute; left: 50%; bottom: 7px; z-index: 7; display: flex; gap: 6px; align-items: center; color: #545d76; transform: translateX(-50%); font-size: 8px; letter-spacing: .1em; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }