:root {
  color-scheme: dark;
  --ink: #edf8f7;
  --muted: #91a8ad;
  --panel: rgba(5, 12, 18, 0.78);
  --panel-strong: rgba(4, 10, 15, 0.92);
  --line: rgba(166, 214, 219, 0.2);
  --bid: #52e6ee;
  --bid-warm: #f4c760;
  --ask: #ff625f;
  --ask-hot: #ff997c;
  --whale: #c6a6ff;
  --safe-top: max(0.75rem, env(safe-area-inset-top));
  --safe-bottom: max(0.75rem, env(safe-area-inset-bottom));
  font-family: "Avenir Next Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050b10; color: var(--ink); }
body { min-width: 20rem; font-size: 1rem; }
button { font: inherit; }
button:focus-visible { outline: 2px solid white; outline-offset: 3px; }

#battlefield { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; background: #050b10; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .24;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .18) 3px 4px);
  mix-blend-mode: overlay;
}

.topbar { position: fixed; z-index: 20; top: var(--safe-top); left: .75rem; right: .75rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; }
.brand { min-height: 3rem; min-width: 3rem; display: inline-flex; align-items: center; gap: .65rem; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.brand img { width: 2.7rem; height: 2.7rem; object-fit: contain; filter: drop-shadow(0 0 1rem rgba(99, 229, 238, .3)); }
.brand strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; letter-spacing: .14em; }
.brand small { display: none; margin-top: .12rem; color: var(--muted); font-size: .7rem; letter-spacing: .12em; }

.market-tabs { grid-column: 1 / -1; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.market-tabs::-webkit-scrollbar { display: none; }
.market-tab, .dock-button { min-width: 3.3rem; min-height: 2.75rem; border: 1px solid var(--line); border-radius: .35rem; padding: .7rem .85rem; color: var(--muted); background: var(--panel); backdrop-filter: blur(.8rem); letter-spacing: .12em; font-size: .8rem; font-weight: 800; cursor: pointer; }
.market-tab[aria-pressed="true"] { border-color: var(--bid); color: var(--ink); background: linear-gradient(135deg, rgba(82, 230, 238, .2), rgba(244, 199, 96, .08)); box-shadow: inset 0 0 1.5rem rgba(82, 230, 238, .08); }
.feed-pill { justify-self: end; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--panel); color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #a7b1b4; box-shadow: 0 0 .75rem currentColor; }
.feed-pill[data-mode="live"] { color: var(--bid); border-color: rgba(82, 230, 238, .45); }
.feed-pill[data-mode="sim"] { color: var(--bid-warm); border-color: rgba(244, 199, 96, .45); }

.price-stage { position: fixed; z-index: 10; top: 21%; left: 50%; width: min(90vw, 36rem); transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 .2rem 1.6rem #000; }
.eyebrow, .panel-kicker { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.price-stage h1 { margin: .1rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 11vw, 5.7rem); line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.change { margin: .55rem 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.change.up { color: var(--bid); } .change.down { color: var(--ask); } .change.neutral { color: var(--muted); }
.front-call { margin: .4rem 0 0; color: var(--ink); font-size: .76rem; font-weight: 900; letter-spacing: .16em; }

.intel-panel { position: fixed; z-index: 12; top: 50%; width: 9.6rem; min-height: 5.15rem; padding: .8rem; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), rgba(5,12,18,.55)); backdrop-filter: blur(.7rem); pointer-events: none; }
.faction-portrait { position: absolute; right: -.15rem; bottom: -.45rem; width: 4.5rem; height: 4.5rem; object-fit: contain; opacity: .26; filter: saturate(1.2) drop-shadow(0 0 .5rem currentColor); }
.ask-panel .faction-portrait { right: auto; left: -.15rem; transform: scaleX(-1); }
.intel-panel strong { display: block; margin-top: .25rem; font-family: Georgia, serif; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.intel-panel span { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.bid-panel { left: .75rem; border-left: 2px solid var(--bid); }
.ask-panel { right: .75rem; text-align: right; border-right: 2px solid var(--ask); }
.bid-panel strong { color: var(--bid); } .ask-panel strong { color: var(--ask); }

.tape { position: fixed; z-index: 12; left: .75rem; right: .75rem; bottom: calc(5.1rem + var(--safe-bottom)); height: 6.9rem; overflow: hidden; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(.7rem); }
.tape-head { display: flex; justify-content: space-between; padding: .55rem .7rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.tape ol { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .8rem; margin: .5rem .7rem; padding: 0; list-style: none; }
.tape li { display: flex; justify-content: space-between; gap: .5rem; min-width: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .7rem; }
.tape li.buy { color: var(--bid); } .tape li.sell { color: var(--ask); }
.tape li span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.command-dock { position: fixed; z-index: 22; left: 50%; bottom: var(--safe-bottom); display: flex; gap: .5rem; transform: translateX(-50%); }
.dock-button { min-width: 5.4rem; color: var(--ink); }
.dock-button[aria-pressed="true"] { border-color: var(--bid-warm); color: var(--bid-warm); }

.inspect-card { position: fixed; z-index: 30; min-width: 10rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--panel-strong); box-shadow: 0 1rem 2rem rgba(0,0,0,.35); pointer-events: none; font-size: .82rem; }
.inspect-card strong, .inspect-card span { display: block; }
.inspect-card span { margin-top: .2rem; color: var(--muted); }

.welcome { width: min(92vw, 34rem); padding: 1.2rem; border: 1px solid rgba(160, 220, 226, .34); border-radius: .55rem; color: var(--ink); background: linear-gradient(160deg, rgba(8, 20, 28, .98), rgba(4, 9, 14, .97)); box-shadow: 0 2rem 8rem #000; }
.welcome::backdrop { background: rgba(1, 4, 7, .82); backdrop-filter: blur(.65rem); }
.welcome-art { display: flex; justify-content: center; }
.welcome-art img { width: 5.5rem; height: 5.5rem; object-fit: contain; }
.welcome h2 { margin: .35rem 0 .6rem; font-family: Georgia, serif; font-size: clamp(2rem, 9vw, 3.3rem); line-height: .96; }
.welcome p { line-height: 1.55; }
.welcome ul { margin: 1rem 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.7; }
.enter-button { width: 100%; min-height: 3.25rem; border: 1px solid var(--bid); border-radius: .35rem; color: #031012; background: linear-gradient(135deg, var(--bid), #a8f5ef); font-weight: 900; letter-spacing: .12em; cursor: pointer; }
.welcome small { display: block; margin-top: .8rem; color: var(--muted); line-height: 1.4; }
.dev { position: fixed; z-index: 50; left: .5rem; top: 8.5rem; padding: .45rem .6rem; background: #00130e; color: #63ffc8; font: .75rem ui-monospace, monospace; }

@media (min-width: 48rem) {
  .topbar { grid-template-columns: minmax(14rem, 1fr) auto minmax(14rem, 1fr); }
  .brand small { display: block; }
  .market-tabs { grid-column: 2; grid-row: 1; justify-content: center; }
  .feed-pill { grid-column: 3; grid-row: 1; }
  .price-stage { top: 14%; }
  .intel-panel { top: 28%; width: 12rem; }
  .tape { left: 50%; right: auto; width: min(42rem, 58vw); transform: translateX(-50%); }
  .tape ol { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 47.99rem) {
  .intel-panel { top: 43%; width: 6rem; min-height: 4.35rem; padding: .55rem; }
  .faction-portrait { width: 3.6rem; height: 3.6rem; opacity: .2; }
  .intel-panel .panel-kicker { font-size: .61rem; letter-spacing: .14em; }
  .intel-panel strong { font-size: 1.25rem; }
  .intel-panel span { display: none; }
  .price-stage { top: 23%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::after { display: none; }
}

@media (forced-colors: active) {
  .market-tab[aria-pressed="true"], .feed-pill, .dock-button, .intel-panel { border: 2px solid CanvasText; }
}