/* Shared design tokens + reset, used by the landing page, the trading
   terminal, docs and admin. Identity: "chip & ledger" — a deep-ink trading
   terminal crossed with a casino-chip accent, built to read as a confident
   game mechanic (the jackpot) sitting inside a precise, verifiable market
   (the curve) rather than a generic neon crypto template. Gold marks the
   game/jackpot; teal marks live/verified/trust; indigo is a quiet secondary
   accent for supporting detail. Motion is deliberate and mostly
   interaction-triggered, not ambient, so the page reads as alive without
   feeling noisy. */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
--bg: #0a0b12;
--surface: #12141e;
--surface-alt: #191c29;
--border: #232637;
--border-strong: #34394f;

--text: #f2f4fa;
--text-dim: #9ba1b9;
--text-faint: #5b6178;

/* teal — live / buy / verified-on-chain */
--green: #2ee6b8;
--green-soft: #22c9a1;
/* gold — the jackpot, the game, the primary call to action */
--amber: #ffb020;
--amber-soft: #ffc861;
/* coral — sell / danger */
--red: #ff6b7a;
--red-soft: #ff8a96;
/* indigo — quiet secondary accent, "advanced"/informational detail */
--violet: #6d7bff;
--violet-dark: #5563e6;

--gradient: linear-gradient(135deg, #ffb020 0%, #ff8a52 42%, #2ee6b8 100%);
--gradient-soft: linear-gradient(135deg, rgba(255,176,32,0.10), rgba(46,230,184,0.10));

/* kept as an alias — app.js sets a couple of inline colors by this name */
--phosphor: var(--green);

--shadow-sm: 0 0 0 1px rgba(255,255,255,0.03), 0 1px 3px rgba(0,0,0,0.4);
--shadow-md: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03);
--shadow-lg: 0 20px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
--shadow-glow-green: 0 0 0 1px var(--green), 0 0 16px rgba(46,230,184,0.35);
--shadow-glow-red: 0 0 0 1px var(--red), 0 0 16px rgba(255,107,122,0.3);
--shadow-glow-amber: 0 0 0 1px var(--amber), 0 0 20px rgba(255,176,32,0.35);

/* Elevation scale — layered near+far shadows so cards read as physically
 * lifted off the background instead of just outlined. --elevate-1 is
 * resting depth, --elevate-2 is a hover/active "lift toward the camera". */
--shadow-elevate-1:
  0 1px 2px rgba(0,0,0,0.5),
  0 6px 16px -4px rgba(0,0,0,0.55),
  0 18px 40px -12px rgba(0,0,0,0.5),
  inset 0 1px 0 rgba(255,255,255,0.03);
--shadow-elevate-2:
  0 2px 4px rgba(0,0,0,0.55),
  0 12px 28px -6px rgba(0,0,0,0.6),
  0 32px 64px -16px rgba(0,0,0,0.55),
  inset 0 1px 0 rgba(255,255,255,0.05);

--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 26px;

--sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--display: "Unbounded", var(--sans);
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

/* Author stylesheets always beat the UA stylesheet's `[hidden]{display:none}`
 * regardless of specificity — so any element that's both `hidden` and has a
 * class setting `display` (e.g. `.btn{display:inline-flex}`,
 * `.winner-banner{display:flex}`) silently ignores `hidden` without this. */
[hidden] { display: none !important; }

html, body {
margin: 0;
padding: 0;
color: var(--text);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
position: relative;
}

body {
/* a faint, fixed dot grid reads as "instrument panel" — precise and
 * verifiable — instead of the soft gradient-blob look most token sites
 * reach for. Kept low-contrast enough to disappear under content. */
background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,0.055) 1px, transparent 0) 0 0/28px 28px,
  var(--bg);
}

/* ---------- Faint scanline texture — static, no flicker ---------- */

body::before {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background: repeating-linear-gradient(
  to bottom,
  rgba(255,255,255,0.015) 0px,
  rgba(255,255,255,0.015) 1px,
  transparent 2px,
  transparent 4px
);
mix-blend-mode: overlay;
opacity: 0.4;
}

/* ---------- Film-grain texture — cheap but effective tactile depth cue,
   the same trick used on a lot of premium dark-mode products. Static
   (no shimmer/flicker), just breaks up flat color fields. ---------- */

html::after {
content: "";
position: fixed;
inset: 0;
z-index: 9997;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

button {
font-family: var(--sans);
cursor: pointer;
}

::selection { background: rgba(46, 230, 184, 0.3); color: var(--text); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Shared buttons ---------- */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text);
padding: 11px 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2px;
border-radius: var(--radius-sm);
position: relative;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover {
border-color: var(--green);
color: var(--green);
box-shadow: var(--shadow-glow-green);
transform: translateY(-1px);
}

.btn:active { transform: translateY(0) scale(0.96); }

.btn-primary {
background: linear-gradient(135deg, var(--amber) 0%, var(--amber-soft) 100%);
border-color: transparent;
color: #221604;
font-weight: 700;
box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.4);
}

.btn-primary::after {
content: "";
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
transform: skewX(-20deg);
opacity: 0;
transition: opacity 0.2s ease;
}

.btn-primary:hover {
color: #221604;
transform: translateY(-2px);
box-shadow: var(--shadow-glow-amber), var(--shadow-lg);
}

.btn-primary:hover::after {
opacity: 1;
animation: btn-shine 1s ease-in-out;
}

@keyframes btn-shine {
0% { left: -60%; }
100% { left: 130%; }
}

.btn-sell {
background: var(--red);
border-color: var(--red);
color: #2a0a0f;
font-weight: 700;
}

.btn-sell:hover { background: var(--red-soft); border-color: var(--red-soft); color: #2a0a0f; box-shadow: var(--shadow-glow-red); }

.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
animation: none;
}

.btn-full { width: 100%; padding: 14px; font-size: 13.5px; }

/* ---------- Click ripple (see js/motion.js) ----------
   Injected on pointerdown for any .btn-family control site-wide; skipped
   entirely while reduced motion is in effect. Plain radial fade, not tied
   to any one accent color, so it reads right on green/amber/red buttons
   alike. */
.click-ripple {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%);
transform: scale(0);
pointer-events: none;
animation: click-ripple-spread 0.5s ease-out;
}

@keyframes click-ripple-spread {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}

/* ---------- Focus-visible: keyboard-navigation accessibility ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
border-radius: 4px;
}

[title] { cursor: help; }

/* ---------- Jackpot winner banner (shared by the terminal and landing page) ---------- */

.winner-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 22px;
padding: 16px 26px;
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
background: var(--surface);
font-size: 14.5px;
font-weight: 600;
text-align: center;
transition: border-color 0.3s ease, background 0.3s ease;
/* ticket-stub notch — the same cut used on the jackpot chip cards, so the
 * "game" motif carries through anywhere the jackpot is being talked about */
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
/* On the base rule, not just .won below — this used to only play for a
 * jackpot win, so the far more common .live/.no-game states (this banner
 * appearing/changing as a game starts or gets a leader) just popped
 * straight to visible the instant [hidden] came off, no animation at all.
 * An animation here (not a transition) is what makes that actually
 * replay every time — see the admin-panel-in comment in admin.css for why
 * a transition alone doesn't retrigger on repeated [hidden] toggles. */
animation: winner-pop 0.4s cubic-bezier(0.16,1,0.3,1);
}

.winner-banner[hidden] { display: none; }

.winner-banner-icon { font-size: 20px; line-height: 1; }

.winner-banner .addr { font-family: var(--mono); font-weight: 700; }

.winner-banner.live {
border-color: var(--green);
background: linear-gradient(135deg, rgba(46,230,184,0.1), rgba(46,230,184,0.02));
color: var(--text);
}

.winner-banner.live .addr { color: var(--green); }

/* No game currently running — distinct from .live/.won, calmer/neutral */
.winner-banner.no-game {
border-color: var(--border-strong);
background: var(--surface-alt);
color: var(--text-dim);
}

/* The one state this banner actually earns a bounce for: a completed
 * jackpot is the product's whole premise, so .won gets its own overshoot
 * entrance instead of the calm one every other state change uses above —
 * the difference is the point, not an inconsistency. */
.winner-banner.won {
border-color: var(--amber);
background: linear-gradient(135deg, rgba(255,176,32,0.16), rgba(46,230,184,0.05));
color: var(--text);
animation: winner-celebrate 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

.winner-banner.won .addr { color: var(--amber); }

/* extra celebratory flourish specifically when *you* are the one who won */
.winner-banner.won.you-won {
box-shadow: var(--shadow-glow-amber);
animation: winner-celebrate 0.5s cubic-bezier(0.34,1.56,0.64,1), winner-shimmer 2.2s ease-in-out 0.5s 2;
}

@keyframes winner-pop {
0% { transform: scale(0.96); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

@keyframes winner-celebrate {
0% { transform: scale(0.88) translateY(-4px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes winner-shimmer {
0%, 100% { box-shadow: var(--shadow-glow-amber); }
50% { box-shadow: 0 0 0 1px var(--amber), 0 0 28px rgba(255,176,32,0.55); }
}

@media (max-width: 640px) {
.winner-banner { font-size: 13px; padding: 13px 14px; }
}

/* ---------- Skeleton loading blocks (shared by landing + terminal) ----------
   A shimmering placeholder used anywhere content is still in flight —
   swapped out for the real thing once data actually arrives, instead of
   showing "--" or letting the real layout pop/flicker into place. */

@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

.skel {
display: block;
border-radius: 6px;
background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border-strong) 50%, var(--surface-alt) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* ---------- Shared brand mark (poker-chip coin, replaces the plain ◆) ---------- */

.chip-mark { display: inline-flex; flex: none; filter: drop-shadow(0 0 6px rgba(255,176,32,0.25)); }
.chip-mark circle { transition: transform 0.3s ease; }

/* ---------- Ambient music widget (shared by landing + terminal) ----------
   Desktop only — see music.js, which keeps this [hidden] on mobile UAs.
   A small "now playing" chip pinned to the bottom-left corner, styled like
   a mini game HUD element rather than a plain mute button. */

.music-widget {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 9px;
}

.music-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
  box-shadow: var(--shadow-elevate-1);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.music-toggle:hover { color: var(--green); transform: translateY(-1px); }

.music-toggle svg { width: 18px; height: 18px; flex: none; }

.music-icon-off { display: none; }
.music-widget.muted .music-icon-on { display: none; }
.music-widget.muted .music-icon-off { display: block; }

/* tiny 4-bar equalizer — bounces while a track is actually audible, sits
 * still (just three flat dashes) the moment it's muted or hasn't started */
.music-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.music-bars span {
  width: 2.5px;
  height: 4px;
  border-radius: 2px;
  background: var(--green);
  transition: background 0.2s ease;
}

.music-widget.muted .music-bars span { background: var(--text-faint); }

.music-widget.playing .music-toggle {
  border-color: var(--green);
  box-shadow: var(--shadow-glow-green), var(--shadow-elevate-1);
}

.music-widget.playing .music-bars span { animation: music-bounce 0.9s ease-in-out infinite; }
.music-widget.playing .music-bars span:nth-child(1) { animation-delay: -0.6s; }
.music-widget.playing .music-bars span:nth-child(2) { animation-delay: -0.3s; }
.music-widget.playing .music-bars span:nth-child(3) { animation-delay: -0.75s; }
.music-widget.playing .music-bars span:nth-child(4) { animation-delay: -0.15s; }

@keyframes music-bounce {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

.music-track-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 10px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.music-widget:hover .music-track-label { opacity: 1; transform: translateX(0); }

@media (max-width: 720px) {
  /* belt-and-braces: music.js already keeps this [hidden] on phone/tablet
   * UAs, but a narrow desktop window (or UA spoofing) shouldn't show a
   * corner widget fighting for space with the wallet gate / tour bubble. */
  .music-widget { display: none !important; }
}

/* ---------- Motion toggle (see js/motion.js) ----------
   OS-level prefers-reduced-motion is still respected by default (unchanged
   below); [data-motion] on <html> is the explicit in-app override —
   "reduce" forces animations off regardless of OS setting, "no-preference"
   forces them back on even if the OS asks for reduced motion. Absence of
   the attribute (a user who's never touched the toggle) falls through to
   the OS-only rule beneath it. */
:root[data-motion="reduce"] * { animation: none !important; transition: none !important; }
:root[data-motion="reduce"] body::before { display: none; }

@media (prefers-reduced-motion: reduce) {
:root:not([data-motion="no-preference"]) * { animation: none !important; transition: none !important; }
:root:not([data-motion="no-preference"]) body::before { display: none; }
}

/* ---------- Motion toggle widget ----------
   A small persistent pill, stacked directly above .music-widget on the
   same bottom-left corner (rather than bottom-right/top-right/top-left,
   all three of which the terminal page's own floating widgets already
   claim — see .widget-bar/.trade-widget/.chart-hud in terminal.css) — the
   explicit "way to disable them" the animations themselves need, since
   prefers-reduced-motion alone only covers users who already changed an OS
   setting. Same 76px offset regardless of whether music-widget is actually
   present on a given page (hidden on mobile, hidden until music.js
   unhides it) — simpler than conditionally repositioning, and harmless
   empty space when there's nothing below it to stack on. */
.motion-toggle {
position: fixed;
left: 16px;
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-dim);
box-shadow: var(--shadow-elevate-1);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.motion-toggle:hover { color: var(--green); transform: translateY(-1px); }
.motion-toggle:active { transform: scale(0.92); }
.motion-toggle svg { width: 18px; height: 18px; flex: none; }
.motion-toggle .motion-icon-off { display: none; }
.motion-toggle.reduced .motion-icon-on { display: none; }
.motion-toggle.reduced .motion-icon-off { display: block; }
.motion-toggle.reduced { color: var(--text-faint); }

@media (max-width: 640px) {
.motion-toggle { width: 44px; height: 44px; left: 12px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
.motion-toggle svg { width: 16px; height: 16px; }
}

/* ---------- Coming-soon addition ----------
 * This file is otherwise a verbatim copy of the real site's theme.css —
 * everything above stays in sync with it by hand. This one rule is the
 * only thing every page in this standalone copy needs that the real one
 * doesn't: the "Coming soon"/"Building" pill replacing Connect Wallet
 * buttons wherever this site has no backend/wallet flow behind them
 * (index.html's nav, news.html's nav, terminal.html's building-overlay
 * card). Lives here rather than in landing.css/terminal.css specifically
 * because it's shared across all three of those, and this is the one
 * stylesheet all of them load. */
.status-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  background: rgba(255,176,32,0.08);
  border-radius: 999px;
  padding: 7px 14px;
}