/* ════════════════════════════════════════
   PALETTE
   bg-page    #0e0e18
   bg-panel   #16161f
   bg-card    #1f1f2e
   bg-hover   #28283c
   border     #32324a
   border-hi  #4a4a6a
   text-hi    #f0f0fa
   text-mid   #a0a0c0
   text-low   #606088
   accent-b   #5588ee
   accent-g   #44bb77
   accent-o   #dd9944
   accent-r   #ee5555
   accent-p   #9966ee
   ════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, sans-serif; }
html { overflow: hidden; }
body { background: #0e0e18; color: #f0f0fa; }

#root {
  display: flex;
  flex-direction: column;
  background: #0e0e18;
  color: #f0f0fa;
  width: 724px;
  height: 580px;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
}

/* ── NAV ── */
#nav {
  display: flex;
  background: #16161f;
  border-bottom: 1px solid #32324a;
  flex-shrink: 0;
}
.nav-btn {
  flex: 1;
  padding: 9px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #606088;
  cursor: pointer;
  border-right: 1px solid #32324a;
  transition: all .15s;
  user-select: none;
}
.nav-btn:last-child { border-right: none; }
.nav-btn.active { color: #f0f0fa; background: #1f1f2e; border-bottom: 2px solid #5588ee; }
.nav-btn.locked { color: #32324a; cursor: not-allowed; }
.nav-btn:hover:not(.active):not(.locked) { color: #a0a0c0; background: #1c1c2a; }

/* ── SCREENS ── */
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; }

/* ── HUD shared ── */
.hud-bar {
  display: grid;
  background: #16161f;
  border-bottom: 1px solid #32324a;
  flex-shrink: 0;
}
.hc { padding: 6px 10px; border-right: 1px solid #32324a; }
.hc:last-child { border-right: none; }
.hl { font-size: 9px; color: #606088; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.hv { font-size: 14px; font-weight: 700; color: #f0f0fa; line-height: 1; }
.hr { font-size: 9px; color: #606088; margin-top: 3px; }
.rdot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; vertical-align:middle; }

/* ── RUN HUD ── */
#run-hud { grid-template-columns: repeat(4, 1fr) 130px; }
#timer-col { padding: 6px 10px; }
#timer-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
#timer-label { font-size: 9px; color: #606088; letter-spacing: .08em; text-transform: uppercase; }
#timer-val { font-size: 16px; font-weight: 700; color: #f0f0fa; }
#tbar-wrap { background: #0a0a12; border-radius: 3px; height: 6px; overflow: hidden; border: 1px solid #32324a; }
#tbar { height: 100%; border-radius: 2px; transition: width .1s, background .4s; }

/* ── ARENA ── */
#mid { display: flex; height: 390px; }

#aw {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #06060e;
  cursor: crosshair;
}
#aw canvas { position: absolute; left: 0; top: 0; }
#floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.ft {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  animation: fa .85s ease forwards;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
@keyframes fa {
  0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-38px); }
}
.ft.big { font-size: 15px; font-weight: 800; animation: faBig .9s ease forwards; }
@keyframes faBig {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-48px) scale(.85); }
}


/* ── RUN SIDEBAR ── */
#run-side {
  width: 176px;
  background: #16161f;
  border-left: 1px solid #32324a;
  display: flex;
  flex-direction: column;
}
.rs-head {
  padding: 8px 10px;
  border-bottom: 1px solid #32324a;
  font-size: 9px;
  font-weight: 600;
  color: #606088;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.rs-body { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #1f1f2e;
}
.stat-row:last-of-type { border-bottom: none; }
.stat-lbl { font-size: 10px; color: #a0a0c0; }
.stat-val { font-size: 11px; font-weight: 700; color: #f0f0fa; }
.stat-val.blue { color: #5588ee; }
.wave-block { margin-top: 6px; padding: 7px 8px; background: #1f1f2e; border-radius: 6px; border: 1px solid #32324a; }
.wave-lbl { font-size: 9px; color: #606088; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.wave-bar-wrap { background: #0a0a12; border-radius: 2px; height: 5px; overflow: hidden; }
.wave-bar { height: 100%; border-radius: 2px; background: #44bb77; transition: width .2s; }

/* ── SIDEBAR TABS ── */
.rs-tabs { display:flex; border-bottom:1px solid #32324a; flex-shrink:0; }
.rs-tab { flex:1; padding:5px 4px; text-align:center; font-size:9px; font-weight:600; color:#606088; cursor:pointer; text-transform:uppercase; letter-spacing:.06em; transition:all .12s; user-select:none; }
.rs-tab.active { color:#f0f0fa; border-bottom:2px solid #5588ee; }
.rs-tab:hover:not(.active) { color:#a0a0c0; }

/* ── TUNE PANEL ── */
#rs-tune-body { flex:1; overflow-y:auto; padding:8px 10px; }
.tune-section { font-size:8px; font-weight:700; color:#606088; text-transform:uppercase; letter-spacing:.08em; padding:8px 0 3px; }
.tune-section:first-child { padding-top:2px; }
details[open] > summary.tune-section { color:#a0a0c0; }
details > summary.tune-section::before { content:'▸ '; }
details[open] > summary.tune-section::before { content:'▾ '; }
.dev-tool-link { display:block; font-size:9px; font-weight:700; color:#5588ee; text-decoration:none; padding:2px 0; transition:color .12s; }
.dev-tool-link:hover { color:#88aaff; }
.dev-tool-link span { font-weight:400; color:#606088; margin-left:4px; }
.tune-row { padding:4px 0; border-bottom:1px solid #1f1f2e; }
.tune-row:last-of-type { border-bottom:none; }
.tune-lbl { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px; }
.tune-name { font-size:9px; color:#a0a0c0; }
.tune-val { font-size:10px; color:#5588ee; font-weight:700; min-width:28px; text-align:right; }
.tune-slider { width:100%; accent-color:#5588ee; cursor:pointer; margin:0; }
.tune-reset { margin-top:8px; font-size:9px; padding:4px 0; width:100%; background:#1f1f2e; border:1px solid #32324a; color:#606088; border-radius:4px; cursor:pointer; transition:all .12s; }
.tune-reset:hover { color:#a0a0c0; border-color:#4a4a6a; }
.tune-toggle-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #32324a; margin-bottom:2px; }
.tune-toggle-lbl { font-size:9px; color:#a0a0c0; }
.tune-toggle-btn { font-size:9px; font-weight:700; padding:2px 8px; border-radius:3px; border:1px solid #32324a; background:#1f1f2e; color:#606088; cursor:pointer; transition:all .12s; }
.tune-toggle-btn.on { background:#1a3a20; border-color:#2a6a30; color:#44bb77; }

/* ── BOT BAR ── */
#bot {
  background: #16161f;
  border-top: 1px solid #32324a;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 32px;
}
#hint-t { font-size: 10px; color: #606088; flex: 1; text-align: right; }

/* ── OVERLAYS ── */
.arena-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 14, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  z-index: 30;
  cursor: default;
}
.arena-overlay.hide { display: none; }
.ov-title { font-size: 20px; font-weight: 700; color: #f0f0fa; }
.ov-sub {
  font-size: 12px;
  color: #a0a0c0;
  text-align: center;
  max-width: 270px;
  line-height: 1.7;
}
.ov-sub b { color: #f0f0fa; }
.eo-bruts { display:flex; flex-direction:column; gap:3px; min-width:210px; }
.eo-brut-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.eo-brut-row.sep { margin-top:8px; }
.eo-brut-l { font-size:14px; font-weight:700; }
.eo-brut-r { font-size:10px; color:#404060; }
.eo-brut-r.beaten { color:#dd9944; font-weight:700; }
.nb-badge { display:inline-block; background:#dd9944; color:#0e0e18; font-size:8px; font-weight:800; padding:1px 5px; border-radius:3px; letter-spacing:.06em; vertical-align:middle; margin-left:4px; position:relative; top:-1px; animation:nb-pop .25s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes nb-pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .12s;
  letter-spacing: .02em;
  user-select: none;
}
.btn-primary { background: #5588ee; color: #f0f0fa; }
.btn-primary:hover { background: #6699ff; }
.btn-secondary { background: #1f1f2e; color: #a0a0c0; border: 1px solid #4a4a6a; }
.btn-secondary:hover { background: #28283c; color: #f0f0fa; border-color: #7070a0; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ── BASE SCREEN ── */
#base-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 90% 105%, rgba(80,30,150,.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 5% -5%, rgba(20,50,130,.2) 0%, transparent 55%),
    #07070f;
}
#base-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 8% 12%, rgba(210,220,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 6%, rgba(200,215,255,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 18%, rgba(220,230,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 9%, rgba(200,210,255,.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 22%, rgba(235,240,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 7%, rgba(200,210,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 38%, rgba(200,210,255,.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 32%, rgba(215,225,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 45%, rgba(200,210,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 52%, rgba(210,220,255,.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 58%, rgba(225,235,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 67%, rgba(200,215,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 72%, rgba(210,220,255,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 3% 85%, rgba(215,225,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 88%, rgba(200,210,255,.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 80%, rgba(225,235,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 93%, rgba(200,210,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 95%, rgba(215,225,255,.7) 0%, transparent 100%);
}
#base-screen::after {
  content: ''; position: absolute;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #1d1040 0%, #0b0620 60%, transparent 100%);
  box-shadow: 0 0 60px rgba(80,30,160,.3);
  bottom: -80px; right: -60px; z-index: 0; pointer-events: none;
}
#base-hud, #base-body { position: relative; z-index: 1; }
#base-hud { grid-template-columns: repeat(4, 1fr); }
#base-screen { flex: 1; overflow: hidden; min-height: 0; }
#base-body { display: flex; overflow: hidden; flex: 1; height: 0; }

/* skill tree panel */
#tree-panel {
  flex: 1;
  overflow: hidden;
  padding: 0;
  background: transparent;
  cursor: grab;
}
#tree-panel.dragging { cursor: grabbing; }
.tree-cv { position: relative; transform-origin: 0 0; will-change: transform; }
.branch-lbl { position:absolute; font-size:8px; font-weight:700; color:#303048; text-transform:uppercase; letter-spacing:.1em; pointer-events:none; }
.tree-svg { position:absolute; left:0; top:0; pointer-events:none; overflow:visible; }

/* nodes — 42×42 icon tiles */
.node { border-radius: 2px; transition: border-color .1s, box-shadow .1s; position: absolute; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.node-ico { font-size: 20px; line-height: 1; }
.node-lv-badge { position: absolute; bottom: 2px; right: 2px; font-size: 7px; font-weight: 700; color: #606088; line-height: 1; }
.node.maxed .node-lv-badge { color: #44bb77; }
.node-prog { position: absolute; bottom: 0; left: 0; height: 2px; background: #5588ee; }

.node.buyable { background: #1f1f2e; border: 1px solid #5588ee; cursor: pointer; box-shadow: 0 0 6px rgba(85,136,238,.25); }
.node.buyable:hover { border-color: #88aaff; box-shadow: 0 0 10px rgba(85,136,238,.5); }
.node.costly { background: #111118; border: 1px solid #1e1e2c; }
.node.maxed { background: #0e1a10; border: 1px solid #2a5a3a; }
.node.myst1 { background: #14141e; border: 1px dashed #2a2a44; cursor: default; }
.node.myst2 { background: #0e0e18; border: 1px dashed #191926; opacity: .35; }
.node.wip-node { background: repeating-linear-gradient(135deg,#0d0d16,#0d0d16 5px,#111120 5px,#111120 10px); border: 1px dashed #2d2d50; opacity: .6; cursor: default; }
.node.wip-node .node-ico { filter: grayscale(.7); }

.node.module-node.buyable { background: #1e1810; border-color: #dd9944; cursor: pointer; box-shadow: 0 0 6px rgba(221,153,68,.3); }
.node.module-node.buyable:hover { border-color: #ffbb55; box-shadow: 0 0 12px rgba(221,153,68,.5); }
.node.module-node.maxed { background: #0a1a0c; border-color: #44aa55; }

@keyframes new-node-ring { 0%,100% { box-shadow: 0 0 0 2px rgba(221,153,68,.4); } 50% { box-shadow: 0 0 0 2px rgba(221,153,68,.95), 0 0 10px rgba(221,153,68,.3); } }
.node.node-new { animation: new-node-ring 1.2s ease-in-out infinite; }
.node.node-new:hover { animation: none; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* tooltip */
#tt { display: none; position: fixed; z-index: 999; background: #16161f; border: 1px solid #4a4a6a; border-radius: 5px; padding: 10px 13px; max-width: 240px; min-width: 170px; pointer-events: none; box-shadow: 0 4px 18px rgba(0,0,0,.7); }
.tt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tt-ico { font-size: 22px; line-height: 1; }
.tt-name { font-size: 12px; font-weight: 700; color: #f0f0fa; }
.tt-lv { font-size: 10px; color: #606088; margin-top: 1px; }
.tt-desc { font-size: 11px; color: #a0a0c0; line-height: 1.5; margin-bottom: 5px; }
.tt-bonus { font-size: 11px; color: #5588ee; font-weight: 600; margin-bottom: 2px; }
.tt-req { font-size: 10px; color: #606080; margin-top: 4px; }
.tt-cost { margin-top:6px; }
.tt-cost.done { font-size:11px; font-weight:600; color:#44bb77; }
.tt-chips { display:flex; flex-wrap:wrap; gap:4px; }
.tt-chip { display:inline-block; border-radius:3px; padding:2px 6px; font-size:10px; font-weight:600; background:#0a0a14; white-space:nowrap; }

/* right panel */
#right-panel {
  width: 196px;
  background: #16161f;
  border-left: 1px solid #32324a;
  display: flex;
  flex-direction: column;
}
.rp-sec { padding: 10px 12px; border-bottom: 1px solid #32324a; }
.rp-sec:last-child { border-bottom: none; }
.rp-title { font-size: 9px; font-weight: 600; color: #606088; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }

/* craft buttons */
.craft-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cbtn {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid #4a4a6a;
  background: #1f1f2e;
  color: #a0a0c0;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  min-width: 50px;
  text-align: center;
}
.cbtn:hover:not(:disabled) { background: #28283c; color: #f0f0fa; border-color: #6688cc; }
.cbtn:disabled { background: #13131c; color: #32324a; border-color: #1f1f2e; cursor: not-allowed; }
.craft-lbl { font-size: 9px; color: #606088; flex: 1; line-height: 1.4; }
.craft-lbl b { color: #a0a0c0; }

.ref-tabs { display:flex; gap:1px; background:#12121c; border-radius:4px; padding:2px; }
.ref-tab { flex:1; padding:2px 0; font-size:9px; border:none; background:rgba(112,128,184,0.10); color:#9090b8; border-radius:3px; cursor:pointer; transition:background .1s,color .1s; }
.ref-tab:hover { background:rgba(112,128,184,0.18); color:#b0b0d0; }
.ref-tab.active-tab { background:#242438; color:#c0c0d8; }
.ref-tab:disabled { opacity:0.3; cursor:default; }
.ref-tab.empty { background:none; color:#505070; pointer-events:none; }
.ref-tab.empty:hover { background:none; color:#505070; }
@keyframes ref-blink { 0%,100% { box-shadow:inset 0 0 0 2px rgba(221,153,68,.45); } 50% { box-shadow:inset 0 0 0 2px rgba(221,153,68,.95), inset 0 0 14px rgba(221,153,68,.18); } }
.ref-highlight { animation: ref-blink 1s ease-in-out infinite; }
@keyframes tab-hint { 0%,100% { background:rgba(112,128,184,0.10); color:#9090b8; } 50% { background:rgba(221,153,68,0.18); color:#dd9944; } }
.tab-hint { animation: tab-hint 1.2s ease-in-out infinite; }
#ref-core-grp { transition: filter 0.18s ease-out; }
@keyframes hex-stroke { 0%,100% { stroke:#705090; stroke-opacity:.6; } 50% { stroke:#cc88ff; stroke-opacity:1; } }
@keyframes hex-halo { 0%,100% { filter:drop-shadow(0 0 5px rgba(160,80,220,.3)); } 50% { filter:drop-shadow(0 0 16px rgba(200,120,255,.9)); } }
@keyframes ce-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ce-spin { animation: ce-spin 3s linear infinite; transform-origin: 45px 45px; }
.ce-spin-rev { animation: ce-spin 2s linear infinite reverse; transform-origin: 45px 45px; }
#ref-hex { transition: stroke .15s, stroke-opacity .15s; }
#ref-hex.can-act { animation: hex-stroke 1.8s ease-in-out infinite; }
#ref-reactor.interactive { animation: hex-halo 1.8s ease-in-out infinite; }
#ref-reactor.interactive:hover { animation: none; filter:drop-shadow(0 0 14px rgba(180,100,255,.85)); }
#ref-reactor.interactive:hover #ref-hex { stroke:#aa77ee; stroke-opacity:1; animation:none; }
#ref-tuto-overlay { position:absolute; inset:0; z-index:50; background:rgba(7,7,15,.55); }
#ref-tuto-card { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#1f1f2e; border:1px solid #dd9944; border-radius:8px; padding:18px 20px; max-width:260px; cursor:pointer; text-align:center; box-shadow:0 0 18px rgba(221,153,68,.35); }
#ref-ratios-card { position:absolute; bottom:90px; right:16px; background:#1f1f2e; border:1px solid #dd9944; border-radius:8px; padding:10px 12px; cursor:pointer; box-shadow:0 0 18px rgba(221,153,68,.35); max-width:175px; }
.bsb-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 10px;
  border-bottom: 1px solid #1f1f2e;
}
.bsb-row:last-child { border-bottom: none; }
.bsb-l { color: #606088; }
.bsb-v { color: #a0a0c0; font-weight: 600; }