/* MEESHWAVE overlay theme — stock terminal × Y2K game HUD.
   Derived from the SPX6900 brand assets: matrix ticker background, holographic
   chrome wordmark, Melee HUD tags, XP error dialog, red Azumanga cat hat. */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* terminal */
  --green: #39ff5c;        /* phosphor bright */
  --green-dim: #00d26a;    /* spx green */
  --green-dark: #0a3d1c;
  --black: #050705;
  --bg: #050705;
  --accent-rgb: 57, 255, 92; /* rgba(var(--accent-rgb), x) = theme-aware washes */
  --panel: rgba(5, 10, 6, 0.93);
  --panel-border: rgba(57, 255, 92, 0.35);
  /* holographic chrome (the wordmark) */
  --chrome-a: #7ff7ff;
  --chrome-b: #a8ffce;
  --chrome-c: #c9a7ff;
  /* Azumanga hat red — reserved for live/urgent */
  --red: #e8143c;
  /* Melee LIMIT gauge */
  --gauge-navy: #14146e;
  --gauge-pink: #ffb3f1;
  /* text */
  --text: #eafeef;
  --muted: #6fae83;
  /* faces */
  --font-crt: 'VT323', 'Consolas', monospace;
  --font-hud: 'Press Start 2P', 'Consolas', monospace;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ---- site theme variants (html[data-theme], persisted in localStorage) ----
   PHOSPHOR is the :root default above. Pages opt in by using the tokens. */

html[data-theme="aeon"] {
  /* Aeon Terminal: pastel sunrise OS — peaceful life over greed */
  --green: #e4739e;
  --green-dim: #c95f8a;
  --green-dark: #fbe3ec;
  --black: #fdf6ee;
  --bg: linear-gradient(160deg, #c3e2f5 0%, #f6e6d4 48%, #f8d6e0 100%) fixed;
  --accent-rgb: 228, 115, 158;
  --panel: rgba(255, 252, 248, 0.88);
  --panel-border: rgba(228, 115, 158, 0.4);
  --chrome-a: #9fd2f2;
  --chrome-b: #f8cfd9;
  --chrome-c: #d9b8f0;
  --text: #55424c;
  --muted: #97808c;
}


* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--text);
}

.chrome-text {
  background: linear-gradient(100deg, var(--chrome-a) 0%, #ffffff 22%, var(--chrome-b) 45%, var(--chrome-c) 72%, var(--chrome-a) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(127,247,255,0.25));
}

/* the market tape — old-school news-station stock ticker */
.tape {
  overflow: hidden;
  background: var(--black);
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  font-family: var(--font-crt);
  white-space: nowrap;
}
.tape .tape-track {
  display: inline-block;
  padding: 4px 0 5px;
  animation: tape-roll 60s linear infinite;
  will-change: transform;
}
@keyframes tape-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tp-item { display: inline-flex; align-items: baseline; gap: 0.55em; margin-right: 3.2em; }
/* symbol stays neutral — direction is told by price + change, so a red ticker
   never wears a green label */
.tp-label { color: #e8ece9; letter-spacing: 1px; }
.tp-price { color: #fff; }
.tp-up   .tp-chg { color: var(--green); text-shadow: 0 0 8px rgba(57,255,92,0.55); }
.tp-down .tp-chg { color: #ff5c7a; text-shadow: 0 0 8px rgba(232,20,60,0.55); }
.tp-up   .tp-price { color: #c9ffd6; }
.tp-down .tp-price { color: #ffd6de; }
.tp-special .tp-label,
.tp-special .tp-price,
.tp-special .tp-chg {
  background: linear-gradient(100deg, var(--chrome-a), #fff, var(--chrome-b), var(--chrome-c), var(--chrome-a));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tp-shimmer 2.6s linear infinite;
  filter: drop-shadow(0 0 10px rgba(127,247,255,0.45));
}
@keyframes tp-shimmer {
  from { background-position: 0% 0; }
  to   { background-position: 300% 0; }
}

/* alt tape palettes (body.tape-flat / tape-mono / tape-amber) */
body.tape-flat .tp-up .tp-label, body.tape-flat .tp-up .tp-price { color: var(--green); }
body.tape-flat .tp-down .tp-label, body.tape-flat .tp-down .tp-price { color: #ff5c7a; }
body.tape-mono .tp-label, body.tape-mono .tp-price { color: #e8ece9; }
body.tape-mono .tp-up .tp-price, body.tape-mono .tp-down .tp-price { color: #e8ece9; }
body.tape-amber .tp-label, body.tape-amber .tp-price,
body.tape-amber .tp-up .tp-chg, body.tape-amber .tp-down .tp-chg {
  color: #ffb454; text-shadow: 0 0 9px rgba(255,180,84,0.45);
}

/* quoted tweet — nested mini-card */
.tweet-card .tc-quote {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(57,255,92,0.22);
  border-radius: 8px;
  background: rgba(57,255,92,0.04);
}
.tweet-card .tc-quote .tc-qhead {
  font-size: 12.5px; font-weight: 600; margin-bottom: 4px;
}
.tweet-card .tc-quote .tc-qhead .tc-qhandle {
  font-family: var(--font-crt); font-weight: 400;
  color: var(--green-dim); font-size: 14px; margin-left: 5px;
}
.tweet-card .tc-quote .tc-qtext {
  font-size: 13px; line-height: 1.45; color: #cfe8d6;
  white-space: pre-wrap; word-wrap: break-word;
}
.tweet-card .tc-quote .tc-qmedia {
  margin-top: 7px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(57,255,92,0.15);
}
.tweet-card .tc-quote .tc-qmedia img {
  width: 100%; max-height: 140px; object-fit: cover; display: block;
}

/* ---------- tweet card (ticker + reaction overlay + dashboard) ---------- */
.tweet-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--green-dim);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(0, 210, 106, 0.04);
  overflow: hidden;
}
.tweet-card .tc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tweet-card .tc-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: var(--green-dark);
  flex: none;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-crt); font-size: 22px; color: var(--green);
}
.tweet-card .tc-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tweet-card .tc-handle {
  font-family: var(--font-crt);
  color: var(--green-dim);
  font-size: 16px;
  letter-spacing: 0.5px;
}
.tweet-card .tc-text {
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tweet-card .tc-text a { color: var(--green); text-decoration: none; }
.tweet-card .tc-media {
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid rgba(57,255,92,0.2);
  overflow: hidden;
  position: relative;
}
.tweet-card .tc-media img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.tweet-card .tc-media .tc-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  background: rgba(0,0,0,0.25);
  text-shadow: 0 0 18px rgba(0,0,0,0.8);
}
.tweet-card .tc-time {
  margin-top: 8px;
  font-family: var(--font-crt);
  font-size: 15px;
  color: var(--muted);
}