/* NULLSECTOR — cyberdeck theme. Self-contained, no external fonts/assets. */
:root{
  --bg:#080b12; --bg2:#0a0e15; --panel:#0e1524; --panel2:#111a2b;
  --line:#1b2740; --line2:#26365a;
  --you:#22d3ee; --enemy:#f472b6; --mine:#ff5468; --amber:#f0b429; --lime:#a3e635;
  --text:#cfdcec; --dim:#7f93ad; --dim2:#54657f;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px; --glow:0 0 0 1px var(--line), 0 8px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 600px at 15% -10%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(244,114,182,.07), transparent 55%),
    var(--bg);
  color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
body::before{ /* scanline sheen */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.5;
}
h2{font-size:16px; margin:0 0 8px; letter-spacing:.02em}
h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--dim); margin:18px 0 8px}
p{margin:0 0 10px} code{font-family:var(--mono); color:var(--you); background:rgba(34,211,238,.08); padding:1px 5px; border-radius:5px; font-size:12.5px}
.muted{color:var(--dim)} .small{font-size:12px} .accent{color:var(--enemy)}

/* ---- top bar ---- */
.topbar{display:flex; align-items:center; gap:18px; padding:10px 16px; height:56px;
  border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(17,26,43,.7),rgba(10,14,21,.4)); backdrop-filter:blur(6px); position:relative; z-index:10}
.brand{display:flex; flex-direction:column; line-height:1.05}
.logo{font-family:var(--mono); font-weight:700; font-size:20px; letter-spacing:.06em; color:var(--you);
  text-shadow:0 0 18px rgba(34,211,238,.5)}
.sub{font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim2)}
.tabs{display:flex; gap:6px; margin-left:8px}
.tabs button{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--dim);
  background:transparent; border:1px solid transparent; padding:7px 14px; border-radius:9px; cursor:pointer; transition:.15s}
.tabs button:hover{color:var(--text); background:rgba(255,255,255,.03)}
.tabs button.active{color:var(--you); border-color:var(--line2); background:rgba(34,211,238,.08); box-shadow:0 0 18px rgba(34,211,238,.15) inset}
.icon-btn{margin-left:auto; background:transparent; border:1px solid var(--line); color:var(--text);
  width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:16px}
.icon-btn:hover{border-color:var(--line2)}

/* ---- deck layout ---- */
.deck{display:grid; grid-template-columns:minmax(320px,1fr) minmax(360px,1.15fr) minmax(300px,.95fr);
  gap:14px; padding:14px; height:calc(100vh - 56px); }
.pane{background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--glow); display:flex; flex-direction:column; min-height:0; overflow:hidden}
.pane.context, .pane.editor{padding:14px}
.pane.context{overflow-y:auto}

/* ---- editor ---- */
.editor-head{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.wname{flex:1; font-family:var(--mono); font-size:14px; color:var(--lime); background:var(--bg);
  border:1px solid var(--line); border-radius:9px; padding:8px 11px; letter-spacing:.03em}
.wname:focus{outline:none; border-color:var(--line2); box-shadow:0 0 0 3px rgba(163,230,53,.12)}
.editor-btns{display:flex; gap:6px}
.code-wrap{flex:1; display:flex; min-height:0; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; overflow:hidden; position:relative}
.gutter{padding:12px 8px 12px 0; text-align:right; color:var(--dim2); font-family:var(--mono);
  font-size:12.5px; line-height:1.65; user-select:none; overflow:hidden; min-width:38px;
  background:rgba(255,255,255,.015); border-right:1px solid var(--line)}
.gutter div{height:calc(1.65em)}
.code{flex:1; resize:none; border:none; outline:none; background:transparent; color:var(--text);
  font-family:var(--mono); font-size:12.5px; line-height:1.65; padding:12px; white-space:pre; overflow:auto; caret-color:var(--you)}
.status{margin-top:9px; font-family:var(--mono); font-size:12px; padding:6px 10px; border-radius:8px}
.status.ok{color:var(--lime); background:rgba(163,230,53,.08)}
.status.err{color:var(--mine); background:rgba(255,84,104,.09)}
.errors{margin-top:8px; overflow-y:auto; max-height:120px}
.err-row{display:flex; gap:9px; font-family:var(--mono); font-size:12px; padding:4px 8px; border-radius:6px; cursor:pointer}
.err-row:hover{background:rgba(255,84,104,.08)}
.err-line{color:var(--mine); font-weight:700} .err-msg{color:var(--dim)}

/* ---- buttons ---- */
.btn{font-family:var(--mono); font-size:12px; letter-spacing:.05em; padding:8px 13px; border-radius:9px;
  border:1px solid var(--line2); background:var(--panel2); color:var(--text); cursor:pointer; transition:.15s}
.btn:hover{border-color:var(--you); box-shadow:0 0 16px rgba(34,211,238,.15)}
.btn.ghost{background:transparent; border-color:var(--line)}
.btn.primary{background:linear-gradient(180deg,rgba(34,211,238,.22),rgba(34,211,238,.08));
  border-color:var(--you); color:#eafcff; text-shadow:0 0 10px rgba(34,211,238,.5)}
.btn.primary:hover{box-shadow:0 0 26px rgba(34,211,238,.3)}
.btn.wide{width:100%; padding:12px; font-size:13px; margin-top:6px}
.btn.small{padding:6px 12px; margin-top:8px}
.btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:none; border-color:var(--line)}
.menu-wrap{position:relative}
.menu{position:absolute; top:calc(100% + 6px); left:0; z-index:20; min-width:230px; max-height:340px; overflow-y:auto;
  background:var(--panel2); border:1px solid var(--line2); border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.6); padding:6px}
.menu-item{font-family:var(--mono); font-size:12px; padding:7px 10px; border-radius:7px; cursor:pointer; color:var(--dim)}
.menu-item:hover{background:rgba(34,211,238,.1); color:var(--text)}
.menu-sep{height:1px; background:var(--line); margin:5px 4px}

/* ---- sector ---- */
.sector-pane{padding:14px; align-items:center; gap:12px}
.sector-frame{position:relative; width:100%; aspect-ratio:1/1; max-height:56vh; display:flex}
.sector{width:100%; height:100%; border-radius:10px; border:1px solid var(--line2);
  background:var(--bg); box-shadow:0 0 40px rgba(0,0,0,.5), 0 0 0 1px rgba(34,211,238,.05) inset}
.banner{position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:5;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; padding:9px 18px; border-radius:10px; white-space:nowrap;
  background:rgba(8,11,18,.86); border:1px solid var(--line2); backdrop-filter:blur(4px)}
.banner.win{color:var(--lime); border-color:var(--lime); box-shadow:0 0 30px rgba(163,230,53,.35)}
.banner.lose{color:var(--mine); border-color:var(--mine); box-shadow:0 0 30px rgba(255,84,104,.35)}
.banner.tie{color:var(--amber); border-color:var(--amber)}
.transport{display:flex; align-items:center; gap:9px; width:100%}
.t-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--line2); background:var(--panel2);
  color:var(--text); font-size:15px; cursor:pointer; transition:.15s}
.t-btn:hover{border-color:var(--you); color:var(--you)}
.t-btn.play{background:linear-gradient(180deg,rgba(34,211,238,.2),rgba(34,211,238,.05)); border-color:var(--you); color:#eafcff}
.scrub{flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:6px; background:var(--line); cursor:pointer}
.scrub::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--you); box-shadow:0 0 12px var(--you); cursor:pointer}
.scrub::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--you);box-shadow:0 0 12px var(--you)}
.cyc{font-family:var(--mono); font-size:12px; color:var(--dim); min-width:74px; text-align:right}
.speeds{display:flex; align-items:center; gap:6px; width:100%}
.speeds .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); margin-right:4px}
.chip{font-family:var(--mono); font-size:11.5px; padding:5px 11px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer}
.chip:hover{color:var(--text)} .chip.active{color:var(--you); border-color:var(--line2); background:rgba(34,211,238,.08)}

/* ---- HUD ---- */
.hud{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%}
.hud-card{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 11px}
.hud-card.you{border-color:rgba(34,211,238,.35)} .hud-card.enemy{border-color:rgba(244,114,182,.35)}
.hud-name{font-family:var(--mono); font-size:11px; letter-spacing:.16em; margin-bottom:6px}
.hud-card.you .hud-name{color:var(--you)} .hud-card.enemy .hud-name{color:var(--enemy)}
.regs{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px}
.reg{font-family:var(--mono); font-size:11px; color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:6px; padding:2px 6px}
.reg b{color:var(--dim); margin-right:5px; font-weight:600}
.reg.found b{color:var(--amber)}
.act{font-family:var(--mono); font-size:11.5px; color:var(--dim); min-height:1.4em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- context panels ---- */
.rule{background:rgba(255,84,104,.07); border-left:3px solid var(--mine); padding:9px 12px; border-radius:0 8px 8px 0; color:#ffd7dd}
.mine-t{color:var(--mine); font-weight:700} .void-t{color:var(--dim2); font-weight:700}
.isa{display:flex; flex-direction:column; gap:2px}
.isa-row{display:grid; grid-template-columns:150px 1fr; gap:10px; padding:6px 8px; border-radius:7px; align-items:start}
.isa-row:hover{background:rgba(255,255,255,.02)}
.isa-op{font-family:var(--mono); font-size:11.5px; color:var(--lime); white-space:nowrap}
.isa-doc{font-size:11.5px; color:var(--dim)}
.strat{margin:0; padding-left:18px} .strat li{margin-bottom:6px; color:var(--dim)}
.strat b{color:var(--text)}
.fld{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:6px 0 12px}
.input{font-family:var(--mono); font-size:13px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:9px 11px; text-transform:none; letter-spacing:normal}
.input:focus{outline:none; border-color:var(--line2); box-shadow:0 0 0 3px rgba(34,211,238,.1)}
.blurb{font-size:12.5px; color:var(--dim); font-style:italic; min-height:2.6em}
.record{font-family:var(--mono); font-size:12.5px; margin-top:12px; color:var(--dim); line-height:1.7}
.record .w{color:var(--lime)} .record .l{color:var(--mine)} .record .t{color:var(--amber)}

/* gauntlet */
.gauntlet-list{display:flex; flex-direction:column; gap:9px}
.foe{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px 12px}
.foe.done{border-color:rgba(163,230,53,.4)}
.foe.locked{opacity:.5}
.foe-head{display:flex; justify-content:space-between; align-items:center}
.foe-name{font-family:var(--mono); font-size:13px; color:var(--text); letter-spacing:.04em}
.foe-badge{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--dim)}
.foe.done .foe-badge{color:var(--lime)}
.foe-tag{font-size:11.5px; color:var(--dim); font-style:italic; margin-top:4px}

/* ladder */
.ladder{margin-top:14px}
.ltable{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px}
.ltable th{text-align:left; color:var(--dim2); font-weight:600; font-size:10px; letter-spacing:.12em; padding:6px 8px; border-bottom:1px solid var(--line)}
.ltable td{padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.03); cursor:pointer}
.ltable tr:hover td{background:rgba(34,211,238,.05)}
.ltable tr.me td{background:rgba(163,230,53,.08)}
.ltable .dn{color:var(--text)} .ltable .elo{color:var(--you); font-weight:700} .ltable .wlt{color:var(--dim)}

/* toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:50;
  background:var(--panel2); border:1px solid var(--line2); color:var(--text); font-family:var(--mono); font-size:12.5px;
  padding:11px 18px; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:.25s}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* responsive */
@media (max-width:1100px){
  body{overflow:auto}
  .deck{grid-template-columns:1fr; height:auto; }
  .pane{min-height:320px} .sector-frame{max-height:none}
  .tabs button{padding:7px 10px}
}
@media (max-width:560px){
  .topbar{flex-wrap:wrap; height:auto; gap:10px} .sub{display:none}
}