:root {
  --bg: #071319;
  --panel: rgba(8, 24, 29, .94);
  --panel-2: rgba(12, 35, 39, .92);
  --line: rgba(142, 226, 194, .24);
  --text: #e8fff5;
  --muted: #93b9ad;
  --accent: #75f2ba;
  --accent-2: #8fcfff;
  --warning: #ffd47a;
  --danger: #ff7d87;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --ui-scale: 1;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #03090c; color: var(--text); }
body { user-select: none; -webkit-user-select: none; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.hidden { display: none !important; }
#app { position: relative; width: 100vw; height: 100vh; overflow: hidden; overflow: clip; background: radial-gradient(circle at 50% 45%, #12323a 0, #071319 48%, #03080b 100%); }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; cursor: crosshair; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 44%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.58) 100%); }
#grain { position: absolute; inset: -30%; pointer-events: none; opacity: .065; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); animation: grain 9s steps(8) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(3%,-4%)} 50%{transform:translate(-4%,2%)} 75%{transform:translate(2%,5%)} 100%{transform:translate(0,0)} }
.boot-screen { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; background: #061116; letter-spacing: .18em; transition: opacity .7s ease; }
.boot-screen h1 { margin: 26px 0 8px; font-size: clamp(30px, 4vw, 62px); font-weight: 300; }
.boot-screen p { margin: 0 0 28px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.boot-mark { width: 86px; height: 86px; position: relative; border: 1px solid var(--line); border-radius: 50%; animation: spin 8s linear infinite; }
.boot-mark:before, .boot-mark:after { content:""; position:absolute; inset: 13px; border: 1px dashed rgba(117,242,186,.45); border-radius:50%; }
.boot-mark:after { inset: 30px; background: var(--accent); box-shadow: 0 0 28px var(--accent); }
.boot-mark span { position:absolute; left:50%; top:-5px; width:1px; height:96px; background:linear-gradient(transparent,var(--accent),transparent); transform-origin:50% 48px; }
.boot-mark span:nth-child(2){transform:rotate(120deg)} .boot-mark span:nth-child(3){transform:rotate(240deg)}
@keyframes spin { to{transform:rotate(360deg)} }
.boot-bar { width: 260px; height: 2px; background: rgba(255,255,255,.09); overflow:hidden; }
.boot-bar i { display:block; height:100%; width:0; background:var(--accent); box-shadow:0 0 12px var(--accent); transition:width .4s ease; }
.menu-layer { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 3vh 3vw; transform: scale(var(--ui-scale)); transform-origin: center; }
.screen { width: min(530px, 94vw); max-height: 94vh; overflow-y:auto; overflow-x:hidden; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.panel { padding: clamp(24px, 4vw, 50px); background: linear-gradient(145deg, var(--panel), rgba(5,15,19,.92)); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 0 45px rgba(117,242,186,.025); backdrop-filter: blur(16px); position: relative; }
.panel:before, .panel:after { content:""; position:absolute; width:36px; height:36px; border-color:var(--accent); opacity:.55; pointer-events:none; }
.panel:before { left:-1px; top:-1px; border-left:2px solid; border-top:2px solid; }
.panel:after { right:-1px; bottom:-1px; border-right:2px solid; border-bottom:2px solid; }
.wide-panel { width: min(1050px, 95vw); }
.main-menu { min-height: min(780px, 92vh); display:flex; flex-direction:column; justify-content:center; }
.title-lockup { margin-bottom: 34px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.title-lockup h1 { margin: 8px 0 0; font-size: clamp(48px, 6vw, 82px); font-weight: 250; letter-spacing:.06em; line-height:.9; }
.title-lockup h1 span { font-weight:800; }
.title-lockup p { margin:12px 0 0; color:var(--muted); letter-spacing:.28em; font-size:11px; }
.menu-actions { display:flex; flex-direction:column; gap:8px; }
button { cursor:pointer; border:1px solid rgba(149,221,201,.21); background:rgba(14,40,43,.72); min-height:48px; padding:12px 17px; text-align:left; letter-spacing:.1em; font-size:12px; font-weight:700; transition:background .16s, border-color .16s, transform .16s, color .16s; }
button:hover:not(:disabled) { background:rgba(33,75,70,.82); border-color:rgba(117,242,186,.65); transform:translateX(3px); }
button.primary { background:linear-gradient(90deg, rgba(67,177,132,.35), rgba(27,104,90,.34)); border-color:rgba(117,242,186,.7); color:#effff8; }
button.primary:hover { background:linear-gradient(90deg, rgba(84,214,158,.5), rgba(33,129,109,.5)); }
button:disabled { opacity:.38; cursor:not-allowed; }
button small { float:right; color:var(--muted); font-size:9px; line-height:1.4; }
button.wide { width:100%; text-align:center; margin-top:25px; }
button.danger { border-color:rgba(255,125,135,.36); color:#ffc0c5; }
button.danger:hover { background:rgba(130,35,45,.4); border-color:var(--danger); }
.menu-footer { margin-top:auto; padding-top:25px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.screen header { display:flex; align-items:center; gap:18px; margin-bottom:30px; }
.screen header h2 { margin:4px 0 0; font-size:32px; font-weight:350; }
.icon-button { min-width:46px; width:46px; padding:0; text-align:center; font-size:23px; }
.currency { margin-left:auto; text-align:right; }
.currency span { display:block; color:var(--muted); font-size:9px; letter-spacing:.14em; }
.currency strong { font-size:30px; color:var(--warning); }
.difficulty-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.difficulty-card { min-height:170px; display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.difficulty-card strong { font-size:16px; color:var(--accent); }
.difficulty-card span { color:var(--muted); line-height:1.45; font-weight:400; letter-spacing:0; font-size:12px; }
.difficulty-card em { margin-top:auto; font-size:9px; color:var(--accent-2); font-style:normal; }
.difficulty-card.selected { border-color:var(--accent); background:rgba(29,90,75,.42); }
.seed-row { margin-top:18px; display:flex; align-items:center; gap:14px; }
.seed-row label { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.seed-row label span { opacity:.65; }
.seed-row input { flex:1; background:rgba(0,0,0,.25); border:1px solid var(--line); padding:12px; color:var(--text); text-transform:uppercase; letter-spacing:.1em; }
.setup-summary { margin-top:15px; padding:14px; color:var(--muted); border-left:2px solid var(--accent); background:rgba(117,242,186,.04); line-height:1.5; font-size:12px; }
.archive-layout { display:grid; grid-template-columns:1.7fr 1fr; gap:32px; }
h3 { font-weight:500; letter-spacing:.05em; }
.muted { color:var(--muted); line-height:1.6; font-size:13px; }
.meta-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.meta-card { min-height:150px; position:relative; display:flex; flex-direction:column; }
.meta-card strong { font-size:14px; color:var(--accent); }
.meta-card p { color:var(--muted); line-height:1.4; letter-spacing:0; font-weight:400; font-size:11px; }
.meta-card footer { display:flex; justify-content:space-between; margin-top:auto; color:var(--warning); font-size:10px; }
.meta-card.maxed { border-color:rgba(117,242,186,.65); }
.stat-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:24px; }
.stat-list div { padding:10px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.stat-list span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.stat-list strong { font-size:18px; }
.achievement-list { display:flex; flex-direction:column; gap:6px; }
.achievement { padding:10px; border:1px solid rgba(255,255,255,.08); opacity:.45; }
.achievement.unlocked { opacity:1; border-color:rgba(117,242,186,.35); }
.achievement strong { display:block; font-size:11px; letter-spacing:.08em; color:var(--accent-2); }
.achievement span { display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }
.manual-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.manual-grid article { padding:15px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.manual-grid article b { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--accent); border-radius:50%; color:var(--accent); }
.manual-grid h3 { margin:13px 0 8px; font-size:14px; }
.manual-grid p { color:var(--muted); font-size:11px; line-height:1.55; }
kbd { border:1px solid var(--line); background:rgba(0,0,0,.3); padding:1px 5px; color:var(--text); }
.controls-grid { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.controls-grid div { padding:10px; border-left:2px solid var(--accent-2); background:rgba(143,207,255,.04); }
.controls-grid span, .controls-grid small { display:block; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.controls-grid strong { display:block; margin:4px 0; font-size:11px; }
.manual-note { color:var(--muted); font-size:11px; margin:18px 0 0; }
.settings-panel { width:min(900px,95vw); }
.settings-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
fieldset { border:1px solid var(--line); padding:15px; min-width:0; }
legend { padding:0 7px; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:10px; }
fieldset label:not(.toggle) { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:17px; }
fieldset output { float:right; color:var(--text); }
input[type=range] { display:block; width:100%; margin-top:9px; accent-color:var(--accent); }
select { display:block; width:100%; margin-top:8px; padding:9px; color:var(--text); background:#0a1b20; border:1px solid var(--line); }
.toggle { display:flex; align-items:center; gap:9px; margin:13px 0; color:var(--muted); font-size:11px; cursor:pointer; }
.toggle input { position:absolute; opacity:0; pointer-events:none; }
.toggle span { width:35px; height:19px; border-radius:19px; background:rgba(255,255,255,.12); border:1px solid var(--line); position:relative; }
.toggle span:after { content:""; position:absolute; left:2px; top:2px; width:13px; height:13px; border-radius:50%; background:var(--muted); transition:.16s; }
.toggle input:checked + span { background:rgba(117,242,186,.24); border-color:var(--accent); }
.toggle input:checked + span:after { transform:translateX(16px); background:var(--accent); }
.settings-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.settings-actions button { flex:1; min-width:150px; text-align:center; }
.credits-panel { width:min(650px,95vw); text-align:center; }
.credits-panel header { text-align:left; }
.credits-scroll { max-width:480px; margin:auto; }
.credit-mark { font-size:42px; font-weight:800; letter-spacing:.16em; color:var(--accent); margin-top:20px; }
.credits-scroll h3 { color:var(--muted); letter-spacing:.24em; font-size:10px; }
.credits-scroll p { color:var(--muted); line-height:1.8; }
.credits-scroll dl { display:grid; grid-template-columns:1fr 1fr; gap:9px; text-align:left; margin:30px 0; }
.credits-scroll dt { color:var(--muted); font-size:10px; text-transform:uppercase; }
.credits-scroll dd { margin:0; font-size:11px; }
.credits-scroll .quote { color:var(--text); font-size:17px; font-style:italic; }
.upgrade-panel { text-align:center; }
.upgrade-panel h2 { font-size:36px; margin:9px 0; }
.upgrade-panel > p { color:var(--muted); }
.upgrade-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:28px; }
.upgrade-card { min-height:280px; padding:22px; text-align:left; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.upgrade-card:after { content:""; position:absolute; width:130px; height:130px; right:-50px; top:-50px; border:1px solid var(--line); border-radius:50%; }
.upgrade-card .upgrade-icon { font-size:42px; color:var(--accent); font-weight:200; }
.upgrade-card h3 { font-size:16px; margin:20px 0 8px; color:var(--text); }
.upgrade-card p { color:var(--muted); line-height:1.5; font-size:11px; letter-spacing:0; font-weight:400; }
.upgrade-card footer { margin-top:auto; color:var(--accent-2); font-size:9px; }
.run-summary { margin-top:20px; color:var(--muted); font-size:11px; }
.result-panel { text-align:center; width:min(640px,94vw); }
.result-symbol { width:90px; height:90px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; font-size:55px; font-weight:200; }
.result-symbol.failed { border:1px solid var(--danger); color:var(--danger); box-shadow:0 0 35px rgba(255,125,135,.16); }
.result-symbol.success { border:1px solid var(--accent); color:var(--accent); box-shadow:0 0 35px rgba(117,242,186,.25); }
.result-panel h2 { font-size:40px; font-weight:300; margin:9px 0 20px; }
.result-panel > p { color:var(--muted); line-height:1.7; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0; }
.result-stats div { padding:13px; border:1px solid var(--line); }
.result-stats span { display:block; color:var(--muted); font-size:9px; letter-spacing:.1em; }
.result-stats strong { display:block; margin-top:4px; font-size:22px; }
.result-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.result-actions button { text-align:center; min-width:150px; }
.pause-panel { text-align:center; }
.pause-panel h2 { font-size:45px; margin:10px 0 25px; }
.compact { max-width:380px; margin:auto; }
.modal { width:min(500px,92vw); text-align:center; z-index:50; }
.modal p { color:var(--muted); line-height:1.6; }
.hud { position:absolute; inset:0; z-index:4; pointer-events:none; padding:20px 24px; display:flex; flex-direction:column; justify-content:space-between; text-shadow:0 2px 4px #000; }
.hud-top, .hud-bottom { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; gap:15px; }
.hud-label { display:flex; justify-content:space-between; width:min(360px,100%); font-size:10px; letter-spacing:.1em; }
.hud-label span { color:var(--muted); }
.bar { width:min(360px,100%); height:13px; margin-top:6px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.45); position:relative; }
.bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#56d69a,#91ffd1); transition:width .16s; }
.bar b { position:absolute; inset:0 auto 0 0; width:0; background:rgba(143,207,255,.6); }
.sector-block { text-align:center; }
.sector-block span, .resource-block span, .beacon-progress span, .ability span { display:block; color:var(--accent); font-size:9px; letter-spacing:.16em; }
.sector-block strong { display:block; font-size:15px; letter-spacing:.08em; margin-top:3px; }
.sector-block small { color:var(--muted); }
.resource-block { text-align:right; }
.resource-block strong { display:block; font-size:32px; line-height:1; color:var(--warning); }
.resource-block small { color:var(--muted); }
.hud-bottom { align-items:end; }
.module-strip { display:flex; gap:5px; flex-wrap:wrap; }
.module-chip { padding:6px 9px; border:1px solid var(--line); background:rgba(5,15,19,.6); font-size:8px; letter-spacing:.06em; }
.module-chip b { color:var(--accent); }
.beacon-progress { text-align:center; }
#beaconPips { display:flex; justify-content:center; gap:10px; margin-top:7px; }
#beaconPips i { width:15px; height:15px; border:1px solid var(--accent); transform:rotate(45deg); background:rgba(0,0,0,.4); }
#beaconPips i.active { background:var(--accent); box-shadow:0 0 14px var(--accent); }
.ability { text-align:right; justify-self:end; width:160px; }
.cooldown { height:6px; margin-top:7px; background:rgba(0,0,0,.5); border:1px solid var(--line); }
.cooldown i { display:block; width:100%; height:100%; background:var(--accent-2); }
.ability small { font-size:8px; color:var(--muted); }
.boss-hud { position:absolute; z-index:5; left:50%; top:86px; transform:translateX(-50%); width:min(580px,70vw); text-align:center; pointer-events:none; }
.boss-hud > div:first-child { display:flex; justify-content:space-between; align-items:end; }
.boss-hud span { letter-spacing:.16em; font-size:12px; }
.boss-hud small { color:var(--danger); letter-spacing:.12em; }
.boss-bar { height:12px; border:1px solid rgba(255,255,255,.28); margin-top:5px; background:rgba(0,0,0,.6); }
.boss-bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#bf455d,#ff8796); transition:width .15s; }
.interaction-prompt { position:absolute; z-index:6; left:50%; bottom:110px; transform:translateX(-50%); min-width:230px; padding:12px 16px; background:rgba(5,18,22,.9); border:1px solid var(--accent); text-align:center; pointer-events:none; }
.interaction-prompt strong { display:inline-grid; place-items:center; width:28px; height:28px; border:1px solid var(--accent); margin-right:9px; color:var(--accent); }
.interaction-prompt span { font-size:10px; letter-spacing:.12em; }
.interaction-prompt > div { height:4px; margin-top:8px; background:rgba(255,255,255,.12); }
.interaction-prompt i { display:block; height:100%; width:0; background:var(--accent); }
.objective-toast { position:absolute; z-index:7; top:150px; left:50%; transform:translateX(-50%); padding:13px 26px; min-width:320px; text-align:center; background:rgba(5,18,22,.92); border-top:1px solid var(--accent); border-bottom:1px solid var(--accent); pointer-events:none; animation:toastIn .4s ease; }
.objective-toast small { display:block; color:var(--accent); font-size:8px; letter-spacing:.2em; }
.objective-toast strong { display:block; margin-top:4px; font-size:13px; letter-spacing:.06em; }
.toast { position:absolute; z-index:30; right:24px; top:96px; bottom:auto; max-width:380px; padding:14px 18px; border:1px solid var(--line); background:rgba(5,18,22,.96); box-shadow:var(--shadow); color:var(--text); font-size:12px; }
.sound-caption { position:absolute; z-index:8; left:50%; bottom:42px; transform:translateX(-50%); color:#fff; background:rgba(0,0,0,.75); padding:5px 10px; font-size:11px; }
.gamepad-notice { position:absolute; z-index:8; left:24px; bottom:24px; padding:8px 12px; border:1px solid var(--line); background:rgba(5,18,22,.9); color:var(--accent); font-size:10px; }
.fatal-error { position:absolute; z-index:100; inset:0; display:grid; place-content:center; text-align:center; background:#12080a; padding:30px; }
.fatal-error p { max-width:600px; color:#ffc1c6; }
.fatal-error button { text-align:center; }
@keyframes toastIn { from{opacity:0; transform:translate(-50%,-10px)} to{opacity:1; transform:translate(-50%,0)} }
body.reduced-motion #grain { animation:none; }
body.reduced-motion *, body.reduced-motion *:before, body.reduced-motion *:after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
body.high-contrast { --line:rgba(255,255,255,.48); --muted:#c6ddd6; }
body.large-prompts .interaction-prompt { transform:translateX(-50%) scale(1.22); bottom:130px; }
@media (max-width: 820px), (max-height: 800px) {
  .panel { padding:22px; }
  .main-menu { min-height:auto; }
  .title-lockup { margin-bottom:18px; }
  .title-lockup h1 { font-size:46px; }
  .menu-actions { display:grid; grid-template-columns:1fr 1fr; }
  .menu-footer { margin-top:18px; }
  .difficulty-grid, .upgrade-grid { grid-template-columns:1fr; }
  .difficulty-card { min-height:110px; }
  .upgrade-card { min-height:180px; }
  .archive-layout { grid-template-columns:1fr; }
  .manual-grid { grid-template-columns:1fr 1fr; }
  .settings-columns { grid-template-columns:1fr; }
  .screen { max-height:96vh; }
}
@media (max-width: 560px) {
  .menu-actions, .controls-grid, .result-stats, .meta-grid { grid-template-columns:1fr; }
  .manual-grid { grid-template-columns:1fr; }
  .hud { padding:10px; }
  .hud-top { grid-template-columns:1fr 1fr; }
  .sector-block { grid-column:1/3; grid-row:1; }
  .resource-block { grid-column:2; }
  .hud-bottom { grid-template-columns:1fr 1fr; }
  .module-strip { display:none; }
}

/* Resonance Update */
.sector-block em { display:block; margin-top:5px; color:var(--warning); font-size:8px; font-style:normal; letter-spacing:.13em; text-transform:uppercase; opacity:.92; }
.upgrade-tools { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
.upgrade-tools button { min-width:220px; text-align:center; }
.upgrade-tools small { max-width:290px; color:var(--muted); text-align:left; font-size:9px; line-height:1.45; }
.upgrade-card.recommended { border-color:rgba(255,212,122,.7); box-shadow:inset 0 0 35px rgba(255,212,122,.06), 0 8px 30px rgba(0,0,0,.28); }
.upgrade-card.recommended:before { content:"RESONANT FIT"; position:absolute; top:11px; right:13px; color:var(--warning); font-size:8px; letter-spacing:.12em; }
.upgrade-card .rank-pips { display:flex; gap:4px; margin-top:12px; }
.upgrade-card .rank-pips i { width:12px; height:3px; background:rgba(255,255,255,.12); }
.upgrade-card .rank-pips i.active { background:var(--accent); box-shadow:0 0 7px var(--accent); }
.ability-rack { justify-self:end; display:flex; gap:9px; align-items:end; }
.ability-rack .ability { width:142px; }
.ability-rack .ability.resonance { width:178px; }
.resonance-meter i { background:linear-gradient(90deg,var(--accent-2),var(--warning)); width:0; }
.ability.resonance.ready span, .ability.resonance.ready small { color:var(--warning); text-shadow:0 0 10px rgba(255,212,122,.55); }
.ability.resonance.ready .cooldown { border-color:var(--warning); box-shadow:0 0 15px rgba(255,212,122,.18); }
.combo-hud { position:absolute; z-index:6; right:25px; top:144px; width:132px; padding:10px 12px; text-align:right; border-right:2px solid var(--accent-2); background:linear-gradient(90deg,transparent,rgba(4,14,18,.72)); pointer-events:none; transform-origin:right center; }
.combo-hud span { display:block; color:var(--muted); font-size:8px; letter-spacing:.18em; }
.combo-hud strong { display:block; color:var(--accent-2); font-size:25px; line-height:1.05; }
.combo-hud > div { height:3px; margin:5px 0 3px; background:rgba(255,255,255,.12); }
.combo-hud > div i { display:block; height:100%; width:100%; background:var(--accent-2); box-shadow:0 0 8px var(--accent-2); }
.combo-hud small { color:var(--muted); font-size:8px; letter-spacing:.08em; }
.combo-hud.hot { border-color:var(--warning); animation:comboPulse .35s ease; }
.combo-hud.hot strong, .combo-hud.hot > div i { color:var(--warning); background:var(--warning); box-shadow:0 0 12px var(--warning); }
@keyframes comboPulse { 0%{transform:scale(.92)} 55%{transform:scale(1.08)} 100%{transform:scale(1)} }
.tutorial-card { position:absolute; z-index:12; left:24px; top:105px; bottom:auto; transform:none; width:min(410px,calc(100vw - 48px)); padding:14px 18px; text-align:left; border:1px solid rgba(143,207,255,.6); background:rgba(4,15,20,.94); box-shadow:0 18px 55px rgba(0,0,0,.45), inset 0 0 32px rgba(143,207,255,.05); pointer-events:none; }
.tutorial-card small { display:block; color:var(--accent-2); font-size:8px; letter-spacing:.2em; }
.tutorial-card strong { display:block; margin-top:4px; font-size:15px; letter-spacing:.08em; }
.tutorial-card p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.tutorial-card.interaction-step { top:105px; bottom:auto; }
.combat-flash { position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; background:rgba(255,255,255,.16); mix-blend-mode:screen; transition:opacity .06s linear; }
.low-hull { position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; box-shadow:inset 0 0 110px 34px rgba(255,46,78,.48); transition:opacity .18s linear; }
body.reduced-motion .combo-hud.hot { animation:none; }
@media (max-width: 820px), (max-height: 800px) {
  .ability-rack .ability { width:108px; }
  .ability-rack .ability.resonance { width:132px; }
  .combo-hud { top:125px; right:12px; }
  .tutorial-card { left:16px; top:96px; bottom:auto; width:min(390px,calc(100vw - 32px)); }
  .tutorial-card.interaction-step { top:96px; bottom:auto; }
  .upgrade-tools { flex-direction:column; }
  .upgrade-tools small { text-align:center; }
}
@media (max-width: 560px) {
  .ability-rack { gap:5px; }
  .ability-rack .ability { width:90px; }
  .ability-rack .ability.resonance { width:110px; }
  .combo-hud { display:none !important; }
  .sector-block em { display:none; }
}

/* Resonance Update identity */
.update-badge { display:inline-flex; align-items:center; gap:.65rem; margin:.45rem 0 .2rem; padding:.35rem .55rem; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); letter-spacing:.1em; font-size:.66rem; }
.update-badge b { color:var(--accent); font-weight:800; }
.update-badge span { color:var(--muted); border-left:1px solid var(--line); padding-left:.65rem; }
@media (max-width:720px) { .update-badge { font-size:.58rem; gap:.45rem; } }
.main-menu { scrollbar-width:none; }
.main-menu::-webkit-scrollbar { width:0; height:0; }

/* Shattered Paths Update */
.setup-panel { width:min(1120px,96vw); }
.setup-panel header { margin-bottom:18px; }
.setup-heading { margin:17px 0 10px; color:var(--accent-2); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.weapon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.weapon-card { min-height:142px; display:flex; flex-direction:column; gap:7px; padding:15px; }
.weapon-card > b { color:var(--accent-2); font-size:28px; line-height:1; }
.weapon-card strong { color:var(--text); font-size:12px; letter-spacing:.08em; }
.weapon-card span { color:var(--muted); font-size:10px; line-height:1.4; letter-spacing:0; font-weight:400; }
.weapon-card em { margin-top:auto; color:var(--accent); font-size:8px; font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.weapon-card.selected { border-color:var(--accent-2); background:rgba(61,113,142,.27); box-shadow:inset 0 0 28px rgba(143,207,255,.06); }
.weapon-card:hover:not(:disabled) { transform:translateY(-2px); }
.sector-block i { display:block; margin-top:3px; color:var(--accent-2); font-size:8px; font-style:normal; letter-spacing:.13em; text-transform:uppercase; }
.resource-block .weapon-readout { color:var(--accent-2); font-size:8px; letter-spacing:.11em; text-transform:uppercase; }
.danger-text { color:var(--danger); }

.evolution-panel, .route-panel, .shop-panel, .bargain-panel { text-align:center; }
.evolution-panel h2, .route-panel h2, .shop-panel h2, .bargain-panel h2 { margin:8px 0; font-size:35px; font-weight:350; }
.evolution-panel > p, .route-panel > p, .shop-panel > p, .bargain-panel > p { color:var(--muted); margin:0 auto; max-width:720px; line-height:1.55; font-size:12px; }
.evolution-grid, .shop-grid, .bargain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:26px; }
.evolution-card, .shop-card, .bargain-card { min-height:250px; padding:21px; text-align:left; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.evolution-card:after, .bargain-card:after { content:""; position:absolute; width:120px; height:120px; right:-48px; top:-48px; border:1px solid var(--line); border-radius:50%; opacity:.8; }
.evolution-card .choice-icon, .shop-card .choice-icon, .bargain-card .choice-icon { display:block; color:var(--accent); font-size:39px; line-height:1; }
.evolution-card h3, .shop-card h3, .bargain-card h3 { margin:18px 0 8px; font-size:16px; color:var(--text); }
.evolution-card p, .shop-card p, .bargain-card p { color:var(--muted); line-height:1.55; font-size:11px; letter-spacing:0; font-weight:400; }
.evolution-card footer, .shop-card footer, .bargain-card footer { margin-top:auto; padding-top:14px; color:var(--accent-2); font-size:9px; line-height:1.4; }
.bargain-card { border-color:rgba(255,125,135,.3); background:linear-gradient(145deg,rgba(68,18,35,.42),rgba(9,25,30,.8)); }
.bargain-card .choice-icon, .bargain-card footer { color:var(--danger); }
.bargain-card:hover:not(:disabled) { border-color:var(--danger); background:rgba(92,27,45,.48); }
.shop-card footer { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--warning); }
.shop-card footer em { color:var(--muted); font-size:8px; font-style:normal; text-align:right; }
.shop-card:disabled footer, .shop-card:disabled footer em { color:var(--danger); }
.bargain-card > div { margin-top:auto; padding-top:14px; display:flex; flex-direction:column; gap:6px; border-top:1px solid rgba(255,125,135,.18); }
.bargain-card > div strong { color:var(--accent); font-size:10px; }
.bargain-card > div em { color:var(--danger); font-size:9px; font-style:normal; }

.route-map { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:30px; padding:28px 10px 12px; }
.route-map:before { content:""; position:absolute; left:10%; right:10%; top:50%; height:1px; background:linear-gradient(90deg,transparent,var(--line),var(--line),transparent); z-index:0; }
.route-card { min-height:260px; position:relative; z-index:1; padding:22px; text-align:center; display:flex; flex-direction:column; align-items:center; background:linear-gradient(155deg,rgba(12,37,42,.96),rgba(5,16,20,.96)); }
.route-index { position:absolute; left:13px; top:11px; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.route-card:before { content:""; position:absolute; top:-15px; left:50%; width:28px; height:28px; transform:translateX(-50%) rotate(45deg); background:#0c252a; border:1px solid var(--accent-2); box-shadow:0 0 18px rgba(143,207,255,.18); }
.route-card .route-icon { display:grid; place-items:center; width:74px; height:74px; margin:8px auto 9px; border:1px solid var(--line); border-radius:50%; color:var(--accent-2); font-size:34px; background:rgba(143,207,255,.035); }
.route-card h3 { margin:9px 0 7px; font-size:16px; }
.route-card p { color:var(--muted); font-size:11px; line-height:1.55; letter-spacing:0; font-weight:400; }
.route-card footer { margin-top:auto; padding-top:13px; display:flex; width:100%; justify-content:space-between; gap:8px; color:var(--warning); font-size:8px; letter-spacing:.08em; }
.route-card.risk-high { border-color:rgba(255,125,135,.36); }
.route-card.risk-high .route-icon { color:var(--danger); border-color:rgba(255,125,135,.45); }
.route-card.risk-low { border-color:rgba(117,242,186,.38); }
.route-card.risk-low .route-icon { color:var(--accent); border-color:rgba(117,242,186,.45); }
.route-history { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:12px; color:var(--muted); font-size:8px; letter-spacing:.08em; }
.route-history i { width:9px; height:9px; border:1px solid var(--line); transform:rotate(45deg); }
.route-history i.complete { background:var(--accent-2); border-color:var(--accent-2); }

.event-panel { width:min(700px,94vw); text-align:center; }
.event-symbol { display:grid; place-items:center; width:92px; height:92px; margin:5px auto 17px; border:1px solid var(--accent-2); border-radius:50%; color:var(--accent-2); font-size:46px; box-shadow:0 0 38px rgba(143,207,255,.13); }
.event-panel h2 { margin:7px 0 12px; font-size:34px; font-weight:350; }
.event-panel > p { max-width:570px; margin:0 auto; color:var(--muted); line-height:1.7; font-size:13px; }
.decision-list { display:flex; flex-direction:column; gap:9px; margin-top:24px; }
.decision-button { min-height:72px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; text-align:left; }
.decision-button strong { display:block; color:var(--text); font-size:12px; }
.decision-button span { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.35; letter-spacing:0; font-weight:400; }
.decision-button em { color:var(--warning); font-size:9px; font-style:normal; text-align:right; }
.decision-button.danger-choice em { color:var(--danger); }

.weapon-chip, .evolution-chip { border-color:rgba(143,207,255,.42); color:var(--accent-2); }
.contract-chip { border-color:rgba(255,125,135,.4); color:#ffc0c5; }
.perfect-dodge-toast { color:var(--critical); }

@media (max-width: 920px), (max-height: 760px) {
  .setup-panel { padding:20px; }
  .weapon-grid { grid-template-columns:repeat(2,1fr); }
  .weapon-card { min-height:110px; }
  .weapon-card > b { font-size:22px; }
  .route-map { gap:12px; margin-top:20px; padding-top:20px; }
  .route-card { min-height:220px; padding:16px; }
  .route-card .route-icon { width:56px; height:56px; font-size:26px; }
  .evolution-card, .shop-card, .bargain-card { min-height:215px; padding:16px; }
}
@media (max-width: 680px) {
  .weapon-grid, .evolution-grid, .shop-grid, .bargain-grid, .route-map { grid-template-columns:1fr; }
  .route-map:before { display:none; }
  .route-card, .evolution-card, .shop-card, .bargain-card { min-height:165px; }
  .route-card:before { display:none; }
  .sector-block i, .resource-block .weapon-readout { display:none; }
}


/* Living Weapons Update */
.secondary-objective { display:block; max-width:620px; margin:4px auto 0; color:var(--accent-2) !important; font-size:7px !important; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; opacity:.88; }
.secondary-objective.complete { color:var(--accent) !important; text-shadow:0 0 9px color-mix(in srgb,var(--accent) 55%,transparent); }
.secondary-objective.failed { color:var(--danger) !important; opacity:.72; }
.ability-rack .ability.armament-action { width:180px; }
.action-meter i { width:0; background:linear-gradient(90deg,var(--accent),var(--critical,#ffd47a)); }
.ability.armament-action.ready span, .ability.armament-action.ready small { color:var(--accent-2); text-shadow:0 0 10px color-mix(in srgb,var(--accent-2) 50%,transparent); }
.ability.armament-action.ready .cooldown { border-color:var(--accent-2); box-shadow:0 0 13px color-mix(in srgb,var(--accent-2) 20%,transparent); }
.rarity-badge { position:absolute; top:11px; left:13px; padding:3px 6px; border:1px solid var(--line); color:var(--muted); font-size:7px; letter-spacing:.14em; }
.upgrade-card .rarity-badge + .upgrade-icon { margin-top:18px; }
.upgrade-card.rarity-rare, .shop-card.rarity-rare { border-color:rgba(112,190,255,.62); box-shadow:inset 0 0 35px rgba(112,190,255,.045); }
.upgrade-card.rarity-legendary, .shop-card.rarity-legendary { border-color:rgba(255,212,122,.82); box-shadow:inset 0 0 45px rgba(255,212,122,.075),0 0 24px rgba(255,212,122,.08); }
.upgrade-card.rarity-corrupted, .shop-card.rarity-corrupted { border-color:rgba(255,91,126,.72); box-shadow:inset 0 0 42px rgba(255,65,107,.07); }
.upgrade-card.rarity-living, .shop-card.rarity-living { border-color:rgba(124,255,184,.72); box-shadow:inset 0 0 42px rgba(84,255,166,.07); }
.rarity-rare .rarity-badge { color:#8fd3ff; border-color:rgba(112,190,255,.45); }
.rarity-legendary .rarity-badge { color:var(--warning); border-color:rgba(255,212,122,.55); }
.rarity-corrupted .rarity-badge { color:var(--danger); border-color:rgba(255,91,126,.55); }
.rarity-living .rarity-badge { color:var(--accent); border-color:rgba(124,255,184,.55); }
.module-chip.rarity-rare { border-color:rgba(112,190,255,.52); color:#bde7ff; }
.module-chip.rarity-legendary { border-color:rgba(255,212,122,.62); color:var(--warning); }
.module-chip.rarity-corrupted { border-color:rgba(255,91,126,.58); color:#ff9ab1; }
.module-chip.rarity-living { border-color:rgba(124,255,184,.58); color:var(--accent); }
.module-chip.rarity-living.awakened { box-shadow:0 0 13px rgba(124,255,184,.22); background:rgba(32,91,65,.28); }
.result-stats .report-wide { grid-column:1/-1; text-align:left; }
.result-stats .report-wide strong { font-size:12px; line-height:1.55; font-weight:500; }
.result-stats .report-highlight { border-color:rgba(255,212,122,.5); background:rgba(255,212,122,.035); }
@media (max-width:1050px) { .ability-rack .ability.armament-action { width:135px; } .ability-rack .ability { width:100px; } .ability-rack .ability.resonance { width:130px; } }
@media (max-width:760px), (max-height:680px) { .ability-rack .ability.armament-action { width:105px; } .secondary-objective { display:none; } }

/* Warden Link Update */
:root { --hud-opacity:.9; }
.setup-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 9px; font-size:12px; color:var(--text); text-transform:uppercase; letter-spacing:.13em; }
.setup-heading small { color:var(--muted); font-size:8px; font-weight:500; letter-spacing:.08em; }
.warden-grid, .familiar-grid, .fracture-grid { display:grid; gap:9px; }
.warden-grid { grid-template-columns:repeat(2,1fr); }
.familiar-grid, .fracture-grid { grid-template-columns:repeat(3,1fr); }
.warden-card, .familiar-card, .fracture-card { min-height:112px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:13px; }
.warden-card > b, .familiar-card > b, .fracture-card > b { color:var(--accent-2); font-size:20px; line-height:1; font-weight:400; }
.warden-card strong, .familiar-card strong, .fracture-card strong { color:var(--accent); font-size:11px; }
.warden-card span, .familiar-card span, .fracture-card span { color:var(--muted); font-size:9px; line-height:1.4; letter-spacing:0; font-weight:400; }
.warden-card em, .familiar-card em, .fracture-card em { margin-top:auto; color:var(--accent-2); font-size:8px; font-style:normal; }
.warden-card.selected, .familiar-card.selected { border-color:var(--accent); background:rgba(29,90,75,.42); box-shadow:inset 0 0 25px rgba(117,242,186,.055); }
.fracture-card.selected { border-color:var(--danger); background:rgba(109,27,48,.32); box-shadow:inset 0 0 28px rgba(255,91,126,.05); }
.fracture-card.selected > b, .fracture-card.selected em { color:var(--danger); }
.fracture-card.limit-blocked:not(.selected) { opacity:.38; }
.heat-summary { margin:10px 0 2px; min-height:46px; padding:9px 13px; display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:12px; border:1px solid rgba(255,125,135,.24); background:linear-gradient(90deg,rgba(92,25,42,.2),rgba(8,24,29,.72)); }
.heat-summary span { color:var(--muted); font-size:8px; letter-spacing:.14em; }
.heat-summary strong { color:var(--danger); font-size:24px; }
.heat-summary em { justify-self:end; color:var(--warning); font-size:9px; font-style:normal; letter-spacing:.09em; }
.archive-hub-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:22px; }
.archive-hub-card { min-height:112px; padding:13px; border:1px solid var(--line); background:rgba(255,255,255,.02); position:relative; }
.archive-hub-card span { display:block; color:var(--muted); font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.archive-hub-card strong { display:block; margin-top:6px; color:var(--accent); font-size:14px; }
.archive-hub-card p { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.archive-hub-card em { position:absolute; right:10px; top:10px; color:var(--accent-2); font-size:20px; font-style:normal; }

.focus-hud { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:var(--hud-opacity); text-shadow:0 2px 5px #000; }
.focus-context { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:min(660px,72vw); min-height:53px; padding:7px 18px 8px; text-align:center; border:1px solid rgba(142,226,194,.2); border-top-color:rgba(117,242,186,.62); background:linear-gradient(180deg,rgba(5,18,22,.87),rgba(5,18,22,.58)); box-shadow:0 10px 26px rgba(0,0,0,.25); }
.focus-context > span { display:block; color:var(--accent); font-size:7px; letter-spacing:.19em; }
.focus-context > strong { display:block; margin-top:2px; font-size:12px; letter-spacing:.08em; }
.focus-context > small { display:block; margin-top:2px; color:var(--text); font-size:9px; letter-spacing:.04em; }
.focus-context > em { display:block; margin-top:2px; color:var(--warning); font-size:7px; font-style:normal; letter-spacing:.11em; }
.focus-dock { position:absolute; left:50%; bottom:7px; transform:translateX(-50%); width:min(930px,calc(100vw - 28px)); height:82px; display:grid; grid-template-columns:minmax(235px,1.05fr) minmax(188px,.82fr) minmax(350px,1.48fr); gap:10px; padding:9px 11px; border:1px solid rgba(142,226,194,.24); border-bottom-color:rgba(117,242,186,.6); background:linear-gradient(180deg,rgba(5,18,22,.72),rgba(4,13,17,.94)); box-shadow:0 -8px 34px rgba(0,0,0,.34),inset 0 0 28px rgba(117,242,186,.025); backdrop-filter:blur(7px); }
.focus-dock section { min-width:0; }
.focus-vitals { display:grid; grid-template-rows:auto 14px 1fr; align-content:start; padding-right:10px; border-right:1px solid var(--line); }
.focus-vitals header, .focus-ability header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.focus-vitals header span, .focus-ability header span, .focus-core span { color:var(--muted); font-size:7px; letter-spacing:.13em; }
.focus-vitals header strong { color:var(--text); font-size:11px; }
.focus-hp-bar { position:relative; height:12px; margin-top:4px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.58); overflow:hidden; }
.focus-hp-bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#52d593,#95ffd3); transition:width .12s; }
.focus-hp-bar b { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,rgba(143,207,255,.65),rgba(185,230,255,.78)); mix-blend-mode:screen; }
.focus-flow { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:7px; margin-top:5px; min-height:20px; opacity:.42; transition:opacity .15s; }
.focus-flow.active { opacity:1; }
.focus-flow span { color:var(--accent-2); font-size:7px; letter-spacing:.14em; }
.focus-flow strong { color:var(--accent-2); font-size:13px; }
.focus-flow > div { height:3px; background:rgba(255,255,255,.12); }
.focus-flow > div i { display:block; width:0; height:100%; background:var(--accent-2); box-shadow:0 0 8px var(--accent-2); }
.focus-core { display:grid; grid-template-columns:.72fr .9fr 1.25fr; align-items:center; gap:9px; padding-right:10px; border-right:1px solid var(--line); }
.focus-resource { text-align:center; }
.focus-resource strong { display:block; color:var(--warning); font-size:25px; line-height:1; }
.focus-resource small { display:block; color:var(--muted); font-size:6px; margin-top:3px; white-space:nowrap; }
.focus-beacons { text-align:center; }
#focusBeaconPips { display:flex; justify-content:center; gap:6px; margin-top:7px; }
#focusBeaconPips i { width:10px; height:10px; transform:rotate(45deg); border:1px solid var(--accent); background:rgba(0,0,0,.45); }
#focusBeaconPips i.active { background:var(--accent); box-shadow:0 0 10px var(--accent); }
.focus-link { text-align:center; }
.focus-link > span { display:block; color:var(--accent-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.focus-link > div { height:4px; margin:7px 0 4px; border:1px solid var(--line); background:rgba(0,0,0,.5); }
.focus-link > div i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.focus-link small { color:var(--muted); font-size:7px; }
.focus-abilities { display:grid; grid-template-columns:.78fr 1.15fr 1.17fr; gap:8px; align-items:center; }
.focus-ability { min-width:0; }
.focus-ability header span { color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.focus-ability header small { color:var(--muted); font-size:7px; white-space:nowrap; }
.focus-ability > div { height:7px; margin-top:7px; border:1px solid var(--line); background:rgba(0,0,0,.55); }
.focus-ability > div i { display:block; width:100%; height:100%; background:var(--accent-2); }
.focus-ability:nth-child(2) > div i { background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.focus-ability.resonance > div i { width:0; background:linear-gradient(90deg,var(--accent-2),var(--warning)); }
.focus-ability.resonance.ready header span, .focus-ability.resonance.ready header small { color:var(--warning); text-shadow:0 0 9px rgba(255,212,122,.6); }
.focus-ability.resonance.ready > div { border-color:var(--warning); box-shadow:0 0 10px rgba(255,212,122,.2); }
.focus-secondary { position:absolute; left:50%; bottom:95px; transform:translateX(-50%); max-width:min(720px,80vw); padding:5px 12px; color:var(--accent-2); border-left:1px solid var(--accent-2); border-right:1px solid var(--accent-2); background:rgba(5,18,22,.72); font-size:7px; letter-spacing:.08em; text-align:center; }
.focus-secondary.complete { color:var(--accent); border-color:var(--accent); }
.focus-secondary.failed { color:var(--danger); border-color:var(--danger); }
.focus-fracture { position:absolute; left:calc(50% + 480px); bottom:65px; padding:5px 8px; color:var(--danger); border:1px solid rgba(255,125,135,.38); background:rgba(52,12,24,.75); font-size:7px; letter-spacing:.12em; }
body.hud-classic .focus-hud { display:none !important; }
body.hud-focused .hud, body.hud-minimal .hud { display:none !important; }
body.hud-minimal .focus-context, body.hud-minimal .focus-core, body.hud-minimal .focus-secondary, body.hud-minimal .focus-fracture { display:none !important; }
body.hud-minimal .focus-dock { width:min(620px,calc(100vw - 28px)); grid-template-columns:1fr 1.45fr; }
body.hud-minimal .focus-abilities { border:0; }
body.hud-minimal .focus-vitals { border-right:1px solid var(--line); }
body.hud-minimal .focus-core { display:none; }
body.hud-focused .combo-hud, body.hud-minimal .combo-hud { display:none !important; }
body.hud-focused .boss-hud, body.hud-minimal .boss-hud { top:72px; }
body.hud-focused .interaction-prompt, body.hud-minimal .interaction-prompt { bottom:108px; }

@media (max-width:980px), (max-height:690px) {
  .focus-dock { width:min(850px,calc(100vw - 18px)); grid-template-columns:220px 175px 1fr; height:76px; padding:7px 9px; }
  .focus-context { top:7px; min-height:48px; }
  .focus-context > em { display:none; }
  .focus-secondary { bottom:88px; }
  .focus-fracture { display:none; }
  .focus-resource strong { font-size:21px; }
  .focus-ability header span, .focus-ability header small { font-size:6px; }
}
@media (max-width:760px) {
  .warden-grid, .familiar-grid, .fracture-grid { grid-template-columns:1fr; }
  .warden-card, .familiar-card, .fracture-card { min-height:86px; }
  .focus-context { width:86vw; }
  .focus-dock { grid-template-columns:1fr 1.35fr; height:82px; }
  .focus-core { display:none; }
  .focus-vitals { border-right:1px solid var(--line); }
  .focus-secondary { display:none; }
  .archive-hub-grid { grid-template-columns:1fr; }
}

/* Version 1.6 — Arsenal Paths */
.tree-preview-panel {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid rgba(117,242,186,.25);
  border-top-color: rgba(117,242,186,.68);
  background: linear-gradient(180deg,rgba(7,28,31,.88),rgba(4,16,20,.74));
  box-shadow: inset 0 0 26px rgba(117,242,186,.025), 0 10px 30px rgba(0,0,0,.18);
}
.tree-preview-heading { display:grid; grid-template-columns:auto 1fr; align-items:end; gap:3px 14px; margin-bottom:11px; }
.tree-preview-heading > span { color:var(--accent-2); font-size:7px; letter-spacing:.18em; }
.tree-preview-heading > strong { color:var(--text); font-size:15px; letter-spacing:.08em; text-align:right; }
.tree-preview-heading > small { grid-column:1/-1; color:var(--muted); font-size:8px; letter-spacing:.04em; line-height:1.45; }
.weapon-tree { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.tree-branch { min-width:0; padding:9px; border:1px solid rgba(143,207,255,.18); background:rgba(3,13,17,.6); }
.tree-branch header { min-height:48px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:8px; padding-bottom:7px; }
.tree-branch header strong { display:block; color:var(--accent); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.tree-branch header small { display:block; margin-top:4px; color:var(--muted); font-size:7px; line-height:1.35; }
.tree-nodes { display:grid; grid-template-columns:1fr; gap:3px; }
.tree-link { display:block; width:1px; height:8px; margin:0 auto; background:linear-gradient(var(--line),var(--accent-2)); opacity:.6; }
.tree-node { position:relative; min-height:45px; display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:7px; padding:7px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.28); }
.tree-node b { display:grid; place-items:center; width:24px; height:24px; color:var(--accent-2); border:1px solid currentColor; font-size:13px; }
.tree-node span { min-width:0; color:var(--text); font-size:8px; line-height:1.25; }
.tree-node em { color:var(--muted); font-size:6px; font-style:normal; letter-spacing:.08em; white-space:nowrap; }
.tree-node.available { border-color:rgba(117,242,186,.34); }
.tree-node.available b { color:var(--accent); box-shadow:0 0 10px rgba(117,242,186,.12); }
.tree-node.active { border-color:var(--accent-2); background:linear-gradient(90deg,rgba(143,207,255,.13),rgba(0,0,0,.24)); }
.tree-node.active b,.tree-node.maxed b { color:var(--accent-2); box-shadow:0 0 12px rgba(143,207,255,.2); }
.tree-node.maxed { border-color:var(--warning); background:linear-gradient(90deg,rgba(255,212,122,.13),rgba(0,0,0,.24)); }
.tree-node.maxed b,.tree-node.maxed em { color:var(--warning); }
.tree-node.locked { opacity:.43; filter:saturate(.45); }
.weapon-tree.compact .tree-branch { padding:7px; }
.weapon-tree.compact .tree-branch header { min-height:39px; }
.weapon-tree.compact .tree-node { min-height:36px; padding:5px; grid-template-columns:20px 1fr auto; }
.weapon-tree.compact .tree-node b { width:19px; height:19px; font-size:10px; }
.total-random-row { display:grid; grid-template-columns:minmax(230px,auto) 1fr; gap:12px; align-items:center; margin:14px 0 4px; padding:12px; border:1px solid rgba(255,212,122,.26); background:rgba(38,30,12,.2); }
.total-random-row button { min-height:46px; color:var(--warning); border-color:rgba(255,212,122,.5); background:linear-gradient(135deg,rgba(255,212,122,.1),rgba(143,207,255,.05)); letter-spacing:.1em; }
.total-random-row button b { display:inline-block; margin-right:8px; font-size:17px; transition:transform .25s; }
.total-random-row button:hover b,.total-random-row button.active b { transform:rotate(180deg); }
.total-random-row button.active { color:#091719; background:var(--warning); box-shadow:0 0 20px rgba(255,212,122,.22); }
.total-random-row small { color:var(--muted); font-size:8px; line-height:1.5; }
.upgrade-card.weapon-tree-choice { border-top-color:var(--accent); background:linear-gradient(180deg,rgba(117,242,186,.08),rgba(4,15,18,.9)); }
.upgrade-card.universal-relic-choice { border-top-color:var(--warning); background:linear-gradient(180deg,rgba(255,212,122,.07),rgba(4,15,18,.9)); }
.upgrade-category { display:block; min-height:17px; margin:2px 0 7px; color:var(--accent-2); font-size:6px; line-height:1.35; letter-spacing:.1em; text-transform:uppercase; }
.universal-relic-choice .upgrade-category { color:var(--warning); }
.upgrade-prerequisite { display:block; margin-top:7px; color:var(--muted); font-size:7px; line-height:1.35; }
.evolution-card .upgrade-category,.shop-card .upgrade-category { min-height:auto; margin:0 0 8px; }
#setupScreen .panel-scroll,#upgradeScreen .panel-scroll { overflow-y:auto; }

@media (max-width:900px) {
  .weapon-tree { grid-template-columns:1fr; }
  .tree-branch { display:grid; grid-template-columns:minmax(150px,.55fr) 1fr; gap:10px; }
  .tree-branch header { min-height:0; margin:0; padding:2px 9px 2px 0; border:0; border-right:1px solid rgba(255,255,255,.08); }
  .tree-nodes { grid-template-columns:1fr 8px 1fr 8px 1fr; align-items:center; }
  .tree-link { width:8px; height:1px; margin:auto; background:linear-gradient(90deg,var(--line),var(--accent-2)); }
  .tree-node { min-height:50px; grid-template-columns:20px 1fr; }
  .tree-node em { grid-column:2; }
}
@media (max-width:620px) {
  .tree-preview-heading { grid-template-columns:1fr; }
  .tree-preview-heading > strong { text-align:left; }
  .tree-preview-heading > small { grid-column:auto; }
  .tree-branch { display:block; }
  .tree-branch header { margin-bottom:7px; padding:0 0 7px; border:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .tree-nodes { grid-template-columns:1fr; }
  .tree-link { width:1px; height:7px; background:linear-gradient(var(--line),var(--accent-2)); }
  .total-random-row { grid-template-columns:1fr; }
}
.weapon-tree.compact { max-width:none; margin:0; }
@media (min-width:821px) and (max-height:800px) {
  .upgrade-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
  .upgrade-card { min-height:210px; padding:16px; }
  .upgrade-card .upgrade-icon { font-size:32px; }
  .upgrade-card h3 { margin:12px 0 7px; }
}
.upgrade-card .upgrade-category { margin-top:25px; min-height:18px; }

/* Version 1.8 — Living Archive */
.route-card { min-height: 348px; }
.route-intel {
  width: 100%;
  margin: 12px 0 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border: 1px solid rgba(143,207,255,.2);
  background: linear-gradient(180deg,rgba(143,207,255,.045),rgba(0,0,0,.16));
  text-align: left;
}
.route-intel span,
.route-intel b,
.route-intel em,
.route-intel small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-intel span { color:var(--accent); font-size:8px; letter-spacing:.12em; }
.route-intel b { color:var(--warning); font-size:9px; font-weight:600; letter-spacing:.07em; }
.route-intel em { color:var(--accent-2); font-size:8px; font-style:normal; letter-spacing:.06em; }
.route-intel small { margin-top:3px; padding-top:5px; border-top:1px solid rgba(143,207,255,.14); color:var(--muted); font-size:7px; letter-spacing:.08em; }
.route-card.risk-high .route-intel { border-color:rgba(255,125,135,.25); }
.route-card.risk-low .route-intel { border-color:rgba(117,242,186,.25); }
.vanguard-codex { min-height:145px; }
.vanguard-codex p { padding-right:20px; font-size:8px; line-height:1.65; letter-spacing:.035em; }
.warden-card[data-warden="seeker"] > b { color:var(--warning); }
.warden-card[data-warden="gardener"] > b { color:var(--accent); }
.warden-card[data-warden="seeker"].selected { border-color:var(--warning); background:rgba(100,75,22,.25); }
.warden-card[data-warden="gardener"].selected { border-color:#a8ff9c; background:rgba(39,90,48,.28); }
@media (max-width:980px), (max-height:690px) {
  .route-card { min-height:300px; }
  .route-intel { margin:7px 0; padding:7px; }
}
@media (max-width:760px) {
  .route-card { min-height:270px; }
  .vanguard-codex { min-height:120px; }
}


/* Version 1.8 — Living Archive */
.ability-rack .ability.signature { width:150px; }
.ability.signature.ready span, .ability.signature.ready small { color:var(--accent-2); text-shadow:0 0 9px rgba(143,207,255,.55); }
.signature-meter i { background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.focus-abilities { grid-template-columns:.68fr .92fr 1.05fr 1.08fr; }
.focus-ability.signature > div i { background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.focus-ability.signature.ready header span, .focus-ability.signature.ready header small { color:var(--accent-2); text-shadow:0 0 9px rgba(143,207,255,.55); }
#beaconPips i.unused, #focusBeaconPips i.unused { display:none; }
.archive-chronicle { display:grid; gap:7px; margin-bottom:20px; }
.chronicle-entry { padding:9px 10px; border:1px solid var(--line); background:rgba(5,16,20,.68); display:grid; grid-template-columns:1fr auto; gap:3px 10px; }
.chronicle-entry strong { color:var(--text); font-size:10px; letter-spacing:.08em; }
.chronicle-entry span { color:var(--accent); font-size:9px; }
.chronicle-entry small { color:var(--muted); font-size:8px; grid-column:1 / -1; }
.chronicle-empty { color:var(--muted); padding:10px; border:1px dashed var(--line); font-size:10px; }
.protocol-badge { color:var(--accent-2); }
@media (max-width:1050px) { .ability-rack .ability.signature { width:118px; } .focus-dock { width:min(1030px,calc(100vw - 20px)); grid-template-columns:minmax(220px,.95fr) minmax(175px,.72fr) minmax(430px,1.65fr); } }
@media (max-width:760px), (max-height:680px) { .ability-rack .ability.signature { width:95px; } .focus-abilities { gap:5px; } }

/* Version 1.9 — Broken Atlas */
.operation-section {
  margin: 2px 0 18px;
  padding: 13px;
  border: 1px solid rgba(255,191,117,.26);
  background:
    linear-gradient(135deg,rgba(255,191,117,.055),transparent 55%),
    rgba(4,13,18,.62);
}
.operation-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.operation-card {
  position:relative;
  min-height:142px;
  padding:13px 12px 12px;
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:auto 1fr auto;
  gap:5px 8px;
  text-align:left;
  border:1px solid rgba(143,207,255,.18);
  background:linear-gradient(155deg,rgba(9,28,35,.95),rgba(5,13,18,.86));
}
.operation-card > b {
  grid-row:1 / 4;
  color:var(--warning);
  font-size:22px;
  line-height:1;
  text-align:center;
  filter:drop-shadow(0 0 8px rgba(255,191,117,.28));
}
.operation-card > strong { color:var(--text); font-size:10px; letter-spacing:.11em; }
.operation-card > span { color:var(--muted); font-size:8px; line-height:1.48; }
.operation-card > em { color:var(--accent-2); font-size:7px; font-style:normal; letter-spacing:.08em; }
.operation-card:hover { border-color:rgba(255,191,117,.55); transform:translateY(-1px); }
.operation-card.selected {
  border-color:var(--warning);
  box-shadow:0 0 0 1px rgba(255,191,117,.16), inset 0 0 22px rgba(255,191,117,.08);
  background:linear-gradient(155deg,rgba(62,43,20,.72),rgba(5,18,22,.93));
}
.operation-card.selected::after {
  content:'MAPPED'; position:absolute; right:7px; top:7px; color:var(--warning);
  font-size:6px; letter-spacing:.12em;
}
.route-controls {
  margin:13px auto 0;
  width:min(760px,100%);
  padding:10px 12px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  border:1px solid rgba(255,191,117,.22);
  background:linear-gradient(90deg,rgba(255,191,117,.06),rgba(4,14,18,.72));
}
.route-controls button {
  min-width:190px;
  border-color:rgba(255,191,117,.34);
  color:var(--muted);
}
.route-controls button.available {
  color:var(--warning);
  border-color:var(--warning);
  box-shadow:inset 0 0 18px rgba(255,191,117,.07),0 0 14px rgba(255,191,117,.08);
}
.route-controls button:disabled { opacity:.38; filter:saturate(.35); }
.route-controls small { color:var(--muted); font-size:8px; line-height:1.45; text-align:left; }
.route-intel .operation-intel { color:var(--warning); border-top:0; padding-top:1px; margin-top:0; }
.archive-hub-card.atlas-codex { min-height:145px; border-color:rgba(255,191,117,.22); }
.atlas-codex > strong { color:var(--warning); }
.atlas-codex > em { color:var(--warning); }
.atlas-codex p { padding-right:20px; font-size:8px; line-height:1.65; letter-spacing:.035em; }
#operationsButton { border-color:rgba(255,191,117,.34); }
#operationsButton small { color:var(--warning); }
@media (max-width:1050px) {
  .operation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operation-card { min-height:118px; }
}
@media (max-width:680px) {
  .operation-grid { grid-template-columns:1fr; }
  .operation-card { min-height:96px; }
  .route-controls { grid-template-columns:1fr; }
  .route-controls button { width:100%; }
}