/* reskin.css — Stock Miners → THE VEIN
   Terminal-modern palette (deep black + phosphor-green + amber accents),
   monospace typography (JetBrains Mono / IBM Plex Mono), no pixel drop-shadows.
   Every rule is an override of the base <style> block. */

/* ── keyframes ─────────────────────────────────────────────── */
@keyframes tv-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes tv-scan  { 0%{background-position:0 0, 50% 0} 100%{background-position:0 6px, 50% 0} }
@keyframes tv-marq  { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes tv-rec   { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ── design tokens (override) ──────────────────────────────── */
:root{
  --arcade:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  --pix:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  --ui:"Inter","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  --read:ui-monospace,"JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace !important;

  --void:#050705 !important;
  --bg:#080D0A !important;
  --panel:#0D1310 !important;
  --raise:#141C17 !important;
  --sunk:#020504 !important;
  --ink:#CFEFDA !important;
  --dim:#4A6B58 !important;
  --line:#1B2A21 !important;
  --ember:#24E070 !important;   /* phosphor primary (was orange) */
  --hot:#5CF798 !important;
  --ore:#94B368 !important;     /* cold olive — no amber, no gold */
  --term:#6DD3FF !important;
  --up:#24E070 !important;
  --down:#FF6A5E !important;
}
html[data-theme="dark"]{ background:var(--void); }

/* ── kill pixel drop-shadows across the identity ───────────── */
.mark, .brand, .beta, section h2 em, .clock b, .chip b, h1, h2, h3,
.mark::after, .brand::after { text-shadow: none !important; }

/* subtle phosphor glow instead */
.mark b, .brand b { color: var(--ember) !important; }

/* ── typography ────────────────────────────────────────────── */
body{
  font-family: var(--pix) !important;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--void) !important;
  color: var(--ink) !important;
}
h1, h2, h3{
  font-family: var(--arcade) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}
.arc{
  font-family: var(--arcade) !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-weight: 500 !important;
}
.lbl{
  font-family: var(--arcade) !important;
  color: var(--dim) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
p, li, .prose{ font-family: var(--pix) !important; font-size: 15px; line-height: 1.65; }
a{ color: var(--ember) !important; }
a:hover{ color: var(--hot) !important; }

/* ── logo / brand: prompt-style ────────────────────────────── */
.mark, .brand{
  font-family: var(--arcade) !important;
  color: var(--ember) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.mark i, .brand i{
  width: 12px !important; height: 10px !important;
  background: var(--ember) !important;
  box-shadow: 0 0 6px rgba(36,224,112,.85) !important;
  transform: skewX(-30deg);   /* the "vein" glyph — a diagonal slash */
}
.mark::after, .brand::after{ content: none !important; }

/* ── header bars ───────────────────────────────────────────── */
header.bar, header.top{
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line) !important;
  padding-top: 10px !important; padding-bottom: 10px !important;
}

/* ── buttons: [ LABEL ] terminal-command look ─────────────── */
.btn{
  border: 1px solid var(--ember) !important;
  background: transparent !important;
  color: var(--ember) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  font-family: var(--arcade) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: .04em !important;
  transition: background .12s, color .12s, box-shadow .12s;
}
.btn::before,
.btn::after{ content: none; }
.btn:hover{
  background: rgba(36,224,112,.12) !important;
  color: var(--hot) !important;
  box-shadow: 0 0 16px rgba(36,224,112,.28), inset 0 0 14px rgba(36,224,112,.08) !important;
  transform: none !important;
}
.btn:active{
  background: rgba(36,224,112,.22) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}
.btn.sm{ padding: 6px 12px !important; font-size: 11px !important; }
.btn.ghost{ color: var(--dim) !important; border-color: var(--line) !important; }
.btn.ghost:hover{
  color: var(--ink) !important; border-color: var(--dim) !important;
  background: transparent !important; box-shadow: none !important;
}

/* ── ticker-tape as a terminal log line ────────────────────── */
.tape{
  background: var(--sunk) !important;
  border-bottom: 1px solid var(--line) !important;
  font-family: var(--arcade) !important;
  font-size: 11px !important;
  color: var(--dim) !important;
  padding: 6px 0 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
}
header.bar + .tape{ top: 48px !important; }
.tape .tick{ display: inline-flex; gap: 6px; align-items: baseline; }
.tape .tick b{ font-weight: 500 !important; color: var(--ink) !important; }
.tape .tick.up b{ color: var(--up) !important; }
.tape .tick.down b{ color: var(--down) !important; }
.tape .tick .arw{ font-size: 9px !important; }
.tape .sep{ color: var(--line) !important; }
.tape-track{ animation: tv-marq 42s linear infinite; }
.tape:hover .tape-track{ animation-play-state: paused; }

/* ── section bands: quieter, still atmospheric ─────────────── */
section.band{
  background: #030706 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* ── section H2 emphasis ───────────────────────────────────── */
section h2 em{
  color: var(--ember) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  text-shadow: 0 0 10px rgba(36,224,112,.35) !important;
}

/* ── hero H1: terminal prompt ──────────────────────────────── */
.hero-grid h1{
  font-size: clamp(28px, 5.6vw, 52px) !important;
  line-height: 1.15 !important;
}
.hero-grid h1::before{ content:"$ "; color: var(--dim) !important; font-weight: 500 !important; }
.hero-grid h1::after{ content: none !important; }
.hero-grid h1 em{
  color: var(--ember) !important;
  font-style: normal !important;
  text-shadow: 0 0 8px rgba(36,224,112,.35);
}

/* ── /play chips ───────────────────────────────────────────── */
.chip{
  border: 1px solid var(--line) !important;
  background: var(--sunk) !important;
}
.chip span{ color: var(--dim) !important; font-family: var(--arcade) !important; }
.chip b{ color: var(--ink) !important; font-family: var(--arcade) !important; }
.beta{
  background: transparent !important;
  color: var(--ember) !important;
  border: 1px solid var(--ember) !important;
  text-shadow: none !important;
  font-family: var(--arcade) !important;
  padding: 3px 8px 3px 16px !important;
  font-size: 9px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  position: relative;
}
.beta::before{
  content:""; position:absolute; left:6px; top:50%;
  width:6px; height:6px; margin-top:-3px;
  background: var(--down); box-shadow: 0 0 6px rgba(255,106,94,.9);
  animation: tv-rec 1.3s ease-in-out infinite;
}
.wallet{
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--dim) !important;
  font-family: var(--arcade) !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: .03em !important;
}
.wallet::after{ color: var(--ember) !important; }
.clock{
  background: transparent !important;
  border: 1px solid var(--line) !important;
}
.clock b{
  color: var(--ore) !important;
  font-family: var(--arcade) !important;
  text-shadow: 0 0 8px rgba(245,183,90,.55) !important;
}
.xlink{
  border: 1px solid var(--line) !important; color: var(--dim) !important;
  font-family: var(--arcade) !important;
}
.xlink:hover{ color: var(--ember) !important; border-color: var(--ember) !important; }
.regchip{ border-color: var(--ember) !important; }
.regchip b{ color: var(--ember) !important; }

/* ── rail / side buttons feel ──────────────────────────────── */
.rail button, .side button{
  transition: background .12s, color .12s, box-shadow .12s !important;
  color: var(--dim) !important;
}
.rail button:hover, .side button:hover{
  background: rgba(36,224,112,.06) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
.rail button:active, .side button:active{ transform: translateY(1px); }

/* ── atmosphere: quieter, greener scanline ─────────────────── */
.air{
  background:
    repeating-linear-gradient(180deg, rgba(36,224,112,.014) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%, transparent 42%, rgba(0,0,0,.65) 100%) !important;
  animation: tv-scan 6s linear infinite;
}

/* ── focus ring ────────────────────────────────────────────── */
:where(a,button,input):focus-visible{
  outline: 2px solid var(--ember) !important;
  outline-offset: 2px !important;
}

/* ═════════════════════════════════════════════════════════════
   /play/ — override the dense HUD to feel like a terminal
   ═════════════════════════════════════════════════════════════ */

/* stage canvas — recolor its outer frame */
.stage{ background: var(--void) !important; }
.stage canvas{ background: transparent !important; }

/* left rail: strip pill background, use phosphor outline hover */
.rail{
  background: var(--panel) !important;
  border-right: 1px solid var(--line) !important;
}
.rail .tool{
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--dim) !important;
  border-radius: 0 !important;
  transition: color .12s, border-color .12s, background .12s !important;
}
.rail .tool:hover:not(:disabled){
  border-color: var(--ember) !important;
  background: rgba(36,224,112,.06) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.rail .tool.on{
  border-color: var(--ore) !important;
  color: var(--ore) !important;
  background: rgba(245,183,90,.05) !important;
}
.rail .tool small{
  font-family: var(--arcade) !important;
  color: inherit !important;
  letter-spacing: .02em !important;
}
.rail .tool .cost{
  color: var(--ember) !important;
  font-family: var(--arcade) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  padding: 1px 4px !important;
}
.rail .tool .qm{
  color: var(--dim) !important;
  text-shadow: none !important;
  font-family: var(--arcade) !important;
}

/* side panel: flat phosphor slabs, no pixel drop-shadow */
.side{
  background: var(--panel) !important;
  border-left: 1px solid var(--line) !important;
}
.side .slab{
  border: 1px solid var(--line) !important;
  background: var(--sunk) !important;
  box-shadow: none !important;
}
.side .slab-h{
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--dim) !important;
}
.side .slab-h .lbl{ color: var(--dim) !important; }
.side .band{
  background: var(--raise) !important;
  color: var(--ember) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  font-family: var(--arcade) !important;
  letter-spacing: .04em !important;
  padding: 4px 8px !important;
}
.side .note{
  color: var(--dim) !important;
  font-family: var(--pix) !important;
  font-size: 12px !important;
}
.side .note b{ color: var(--ink) !important; font-weight: 500 !important; }
.side .floors button{
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--dim) !important;
  font-family: var(--arcade) !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: .03em !important;
}
.side .floors button.on{
  border-color: var(--ember) !important;
  color: var(--ember) !important;
  background: rgba(36,224,112,.08) !important;
}
.side .floors button.queued{
  color: var(--ore) !important;
  border: 1px dashed var(--ore) !important;
  background: transparent !important;
}
.side .regbar{
  background: var(--sunk) !important;
  border: 1px solid var(--line) !important;
}
.side .regbar i{
  background: var(--ember) !important;
  box-shadow: 0 0 6px rgba(36,224,112,.5);
}

/* header chips: terminal status-line look */
header.top{
  gap: 6px 12px !important;
  padding: 8px 12px !important;
}
.chip{
  padding: 3px 10px !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
}
.chip b{
  color: var(--ink) !important;
  font-family: var(--arcade) !important;
  font-size: 13px !important;
}
.chip span{
  color: var(--dim) !important;
  font-family: var(--arcade) !important;
  font-size: 9px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.regchip b{ color: var(--ore) !important; }

/* footer HUD: dividers, mono, phosphor */
.hud{
  background: var(--panel) !important;
  border-top: 1px solid var(--line) !important;
  gap: 0 !important;
}
.hud .cell{
  border-right: 1px solid var(--line) !important;
  padding: 8px 14px !important;
  background: transparent !important;
}
.hud .cell b{
  font-family: var(--arcade) !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  text-shadow: none !important;
}
.hud .cell b.ore, .hud .cell b[style*="color:var(--ore)"]{
  color: var(--ore) !important;
  text-shadow: 0 0 8px rgba(245,183,90,.4) !important;
}
.hud .cell span{
  color: var(--dim) !important;
  font-family: var(--arcade) !important;
  letter-spacing: .06em !important;
}
.hud .go{
  background: transparent !important;
  color: var(--ember) !important;
  border: 1px solid var(--ember) !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--arcade) !important;
  text-transform: none !important;
  letter-spacing: .04em !important;
}
.hud .go:hover{
  background: rgba(36,224,112,.14) !important;
  color: var(--hot) !important;
  box-shadow: 0 0 18px rgba(36,224,112,.3) !important;
}
.hud .go.deep{
  color: var(--dim) !important;
  border-color: var(--line) !important;
}
.hud .go.deep:hover{
  color: var(--ink) !important;
  border-color: var(--dim) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hud .cashbtn{
  background: transparent !important;
  color: var(--ore) !important;
  border: 1px solid var(--ore) !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  font-family: var(--arcade) !important;
}

/* clock highlight (top-left of play) */
.clock{ border-color: var(--ore) !important; }

/* market listings and modal veils */
.veil{ background: rgba(3,7,6,.85) !important; }
.sheet{
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.sheet-h{ border-bottom: 1px solid var(--line) !important; }
.filters button{
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--dim) !important;
  font-family: var(--arcade) !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}
.filters button.on{
  background: var(--ember) !important;
  color: var(--sunk) !important;
  border-color: var(--ember) !important;
}
.mktbar button{
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--dim) !important;
  font-family: var(--arcade) !important;
  border-radius: 0 !important;
}
.mktbar button:hover{ border-color: var(--ember) !important; color: var(--ember) !important; }
.lst{ border-color: var(--line) !important; }
.lst .ask b{ color: var(--ore) !important; }
.tag.rare{ color: var(--ore) !important; border-color: var(--ore) !important; }

/* alerts: no pixel drop shadow */
.alert{
  background: var(--sunk) !important;
  border: 1px solid var(--down) !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  border-radius: 0 !important;
}
.alert.warn{ border-color: var(--hot) !important; }
.alert.warn b{ color: var(--hot) !important; }

/* rules screen headings — no orange drop shadow */
ol.how b, ol.how li::marker{ color: var(--ember) !important; text-shadow: none !important; }

/* ── reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .air, .mark::after, .brand::after, .hero-grid h1::after,
  .tape-track, .beta::before, .clock b { animation: none !important; }
}