/* ═══════════════════════════════════════════════════════════════
   MONEYQUEST — DESIGN SYSTEM v4
   Theme: Dark Amber × Ink — FULLY GAMIFIED
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ink-0:      #0a0806;
  --ink-1:      #110e08;
  --ink-2:      #181309;
  --ink-3:      #201a0e;
  --ink-4:      #2a2212;
  --ink-5:      #352b18;
  --amber:      #c8861e;
  --amber-b:    #f0a830;
  --amber-g:    #ffc85a;
  --amber-p:    rgba(240,168,48,0.08);
  --lime:       #a8d832;
  --lime-d:     #6a8a1a;
  --lime-p:     rgba(168,216,50,0.08);
  --crimson:    #d63c3c;
  --crimson-d:  #8a2020;
  --crimson-p:  rgba(214,60,60,0.08);
  --sky:        #5ab4d4;
  --sky-p:      rgba(90,180,212,0.08);
  --sage:       #7ab888;
  --text-0:     #f5ead8;
  --text-1:     #d4c4a0;
  --text-2:     #8a7a5a;
  --text-3:     #4a4030;
  --border:     rgba(200,134,30,0.12);
  --border-2:   rgba(200,134,30,0.28);
  --border-3:   rgba(200,134,30,0.5);
  --font-d:     'Bebas Neue', sans-serif;
  --font-b:     'DM Sans', sans-serif;
  --font-m:     'JetBrains Mono', monospace;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink-0); color: var(--text-0);
  font-family: var(--font-b); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-b); border: none; outline: none; background: none; }
input, select { font-family: var(--font-b); outline: none; color: var(--text-0); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 3px; }

/* ── NOISE GRAIN ── */
body::after {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px;
}

/* ── TYPOGRAPHY ── */
.display-xl { font-family:var(--font-d); font-size:clamp(48px,6vw,80px); line-height:.95; letter-spacing:2px; color:var(--amber-g); }
.display-lg { font-family:var(--font-d); font-size:clamp(32px,4vw,52px); line-height:1; letter-spacing:1px; }
.display-md { font-family:var(--font-d); font-size:28px; letter-spacing:1px; }
.label-caps { font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--text-2); font-family:var(--font-m); }
.mono { font-family:var(--font-m); }

/* ── CARDS ── */
.card { background:var(--ink-2); border:1px solid var(--border); border-radius:var(--r-lg); position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(200,134,30,0.4),transparent); }
.card-raised {
  background:var(--ink-2); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 8px 32px rgba(0,0,0,0.5); position:relative; overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.card-raised::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(200,134,30,0.3),transparent); }

/* ── GAME CARD (glowing, hoverable) ── */
.game-card {
  background:var(--ink-2); border:1px solid var(--border); border-radius:var(--r-lg);
  position:relative; overflow:hidden; cursor:pointer;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.game-card:hover { transform:translateY(-4px) scale(1.01); border-color:var(--border-3); box-shadow:0 12px 40px rgba(200,134,30,0.15); }
.game-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--amber),transparent); opacity:.5; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 22px; border-radius:var(--r-md); font-weight:700; font-size:13px; transition:all .18s; letter-spacing:.3px; }
.btn-amber { background:linear-gradient(135deg,var(--amber),var(--amber-b)); color:#0a0806; font-weight:800; box-shadow:0 4px 20px rgba(200,134,30,0.35); }
.btn-amber:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(200,134,30,0.55); }
.btn-lime { background:linear-gradient(135deg,var(--lime-d),var(--lime)); color:#0a0806; font-weight:800; box-shadow:0 4px 18px rgba(168,216,50,0.3); }
.btn-lime:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(168,216,50,0.5); }
.btn-crimson { background:linear-gradient(135deg,var(--crimson-d),var(--crimson)); color:#fff; box-shadow:0 4px 18px rgba(214,60,60,0.3); }
.btn-crimson:hover { transform:translateY(-2px); }
.btn-ghost { background:var(--ink-3); color:var(--text-1); border:1px solid var(--border-2); }
.btn-ghost:hover { border-color:var(--amber); color:var(--amber-b); }
.btn-sm { padding:7px 14px; font-size:11px; border-radius:var(--r-sm); }
.btn-lg { padding:15px 36px; font-size:15px; }
.btn-icon { width:42px; height:42px; padding:0; border-radius:var(--r-md); }
.btn-danger { background:var(--crimson); color:#fff; }

/* ── PILL ── */
.pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--r-pill); font-size:10px; font-weight:700; font-family:var(--font-m); border:1px solid transparent; }
.pill-amber  { background:var(--amber-p); color:var(--amber-b); border-color:var(--border-2); }
.pill-lime   { background:var(--lime-p);  color:var(--lime);    border-color:rgba(168,216,50,.2); }
.pill-crimson{ background:var(--crimson-p);color:var(--crimson); border-color:rgba(214,60,60,.2); }
.pill-sky    { background:var(--sky-p);   color:var(--sky);     border-color:rgba(90,180,212,.2); }
.pill-sage   { background:rgba(122,184,136,.1); color:var(--sage); border-color:rgba(122,184,136,.2); }

/* ── INPUT ── */
.input { width:100%; background:var(--ink-1); border:1px solid var(--border-2); border-radius:var(--r-md); padding:11px 14px; color:var(--text-0); font-size:14px; transition:border-color .2s; }
.input:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(200,134,30,.1); }
.input::placeholder { color:var(--text-3); }

/* ── PROGRESS ── */
.track { background:var(--ink-4); border-radius:var(--r-pill); overflow:hidden; }
.fill { height:100%; border-radius:var(--r-pill); transition:width .8s cubic-bezier(.34,1.56,.64,1); }
.fill-amber  { background:linear-gradient(90deg,var(--amber),var(--amber-g)); }
.fill-lime   { background:linear-gradient(90deg,var(--lime-d),var(--lime)); }
.fill-crimson{ background:linear-gradient(90deg,var(--crimson-d),var(--crimson)); }
.fill-sky    { background:linear-gradient(90deg,#2a6a84,var(--sky)); }

/* ── XP BAR ── */
.xp-track { height:5px; background:var(--ink-4); border-radius:var(--r-pill); overflow:hidden; }
.xp-fill { height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--amber),var(--amber-g)); transition:width 1.2s cubic-bezier(.34,1.56,.64,1); position:relative; }
.xp-fill::after { content:''; position:absolute; right:0; top:0; bottom:0; width:24px; background:linear-gradient(90deg,transparent,rgba(255,200,90,.7)); animation:shimmerMove 1.5s ease infinite; }

/* ── LAYOUT ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* ── COIN CHIP ── */
.coin-chip { display:inline-flex; align-items:center; gap:6px; background:var(--amber-p); border:1px solid var(--border-2); border-radius:var(--r-pill); padding:5px 14px; }
.coin-chip .icon { font-size:15px; display:inline-block; animation:coinFlip 3s ease infinite; }
.coin-chip .val { font-family:var(--font-m); font-weight:700; color:var(--amber-g); font-size:14px; }

/* ── STREAK CHIP ── */
.streak-chip { display:inline-flex; align-items:center; gap:6px; background:rgba(214,60,60,.1); border:1px solid rgba(214,60,60,.25); border-radius:var(--r-pill); padding:5px 14px; animation:streakPulse 2s ease infinite; }
.streak-chip .flame { animation:flameWobble .7s ease-in-out infinite; }
.streak-chip .num { font-family:var(--font-m); font-weight:700; color:#ff6b4a; font-size:14px; }
.streak-chip .lbl { font-size:10px; color:var(--text-2); }

/* ── TOASTS ── */
.toast { position:fixed; top:24px; right:24px; z-index:9000; display:flex; align-items:center; gap:10px; padding:13px 20px; border-radius:var(--r-md); background:var(--ink-3); border:1px solid var(--border-2); font-size:13px; font-weight:600; animation:toastIn .3s cubic-bezier(.34,1.56,.64,1); max-width:320px; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.toast-amber  { border-color:var(--amber); color:var(--amber-g); }
.toast-lime   { border-color:var(--lime);  color:var(--lime); }
.toast-crimson{ border-color:var(--crimson);color:var(--crimson); }
.toast-sky    { border-color:var(--sky);   color:var(--sky); }

/* ── LEVEL UP OVERLAY ── */
.levelup-overlay {
  position:fixed; inset:0; z-index:8000;
  background:rgba(0,0,0,.9); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .3s ease;
}
.levelup-box {
  text-align:center; padding:60px 80px;
  background:radial-gradient(ellipse at center, var(--ink-3) 0%, var(--ink-1) 70%);
  border:1px solid var(--border-2); border-radius:var(--r-xl);
  box-shadow:0 0 80px rgba(200,134,30,.3);
  animation:levelUpBox .5s cubic-bezier(.34,1.56,.64,1);
}

/* ── COIN BURST ── */
.coin-burst { position:fixed; pointer-events:none; z-index:7000; font-size:20px; }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.8); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .2s ease; }
.modal-box { background:var(--ink-2); border:1px solid var(--border-2); border-radius:var(--r-xl); width:100%; max-width:540px; max-height:88vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 40px rgba(200,134,30,.1); position:relative; animation:modalUp .3s cubic-bezier(.34,1.56,.64,1); }
.modal-stripe { height:3px; border-radius:var(--r-xl) var(--r-xl) 0 0; }

/* ── APP SHELL ── */
#app { display:flex; height:100vh; width:100vw; overflow:hidden; position:relative; z-index:1; }
#sidebar { width:230px; flex-shrink:0; background:var(--ink-1); border-right:1px solid var(--border); display:flex; flex-direction:column; position:relative; z-index:10; }
#sidebar::after { content:''; position:absolute; top:0; right:0; width:1px; height:100%; background:linear-gradient(180deg,transparent,var(--amber),transparent); opacity:.25; }
#main { flex:1; overflow-y:auto; position:relative; background:radial-gradient(ellipse 50% 35% at 50% 0%,rgba(200,134,30,.05) 0%,transparent 70%),var(--ink-0); }
#main::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(200,134,30,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(200,134,30,.025) 1px,transparent 1px); background-size:40px 40px; }
.page-wrap { position:relative; z-index:1; padding:28px 32px; }
.screen { display:none; }
.screen.active { display:block; animation:pageIn .3s ease both; }

/* ── SIDEBAR COMPONENTS ── */
.logo-wrap { padding:20px 18px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.logo-mark { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--amber),var(--amber-b)); display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 4px 16px rgba(200,134,30,.35); flex-shrink:0; }
.logo-name { font-family:var(--font-d); font-size:22px; letter-spacing:2px; color:var(--amber-g); line-height:1; }
.logo-tagline { font-size:8px; color:var(--text-2); letter-spacing:2px; margin-top:2px; font-family:var(--font-m); }
.user-section { padding:14px 16px; border-bottom:1px solid var(--border); }
.user-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.user-avatar { width:38px; height:38px; border-radius:10px; flex-shrink:0; background:linear-gradient(135deg,var(--amber),var(--ink-5)); border:2px solid var(--border-2); display:flex; align-items:center; justify-content:center; font-size:18px; }
.user-name { font-family:var(--font-d); font-size:16px; letter-spacing:1px; color:var(--text-0); }
.user-rank { font-size:9px; color:var(--amber); font-family:var(--font-m); letter-spacing:1px; margin-top:1px; }
.xp-row { display:flex; justify-content:space-between; font-size:9px; color:var(--text-3); font-family:var(--font-m); margin-bottom:4px; }
.stats-row { display:flex; gap:6px; margin-top:10px; }
.stat-chip { flex:1; background:var(--ink-3); border:1px solid var(--border); border-radius:var(--r-sm); padding:6px 8px; text-align:center; }
.stat-chip .v { font-family:var(--font-m); font-size:12px; font-weight:700; }
.stat-chip .l { font-size:7px; color:var(--text-3); letter-spacing:1px; text-transform:uppercase; margin-top:1px; }
nav { flex:1; padding:10px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md); color:var(--text-2); font-size:12px; font-weight:600; margin-bottom:2px; cursor:pointer; transition:all .15s; border:1px solid transparent; position:relative; }
.nav-item:hover { background:var(--ink-3); color:var(--text-1); }
.nav-item.active { background:var(--amber-p); color:var(--amber-b); border-color:var(--border-2); }
.nav-item.active::before { content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px; background:var(--amber); border-radius:0 2px 2px 0; }
.nav-icon { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; font-size:8px; padding:2px 6px; border-radius:var(--r-pill); font-weight:700; font-family:var(--font-m); }
.sidebar-footer { padding:12px 14px; border-top:1px solid var(--border); }
.pro-btn { width:100%; padding:10px 16px; border-radius:var(--r-md); background:linear-gradient(135deg,rgba(200,134,30,.15),rgba(240,168,48,.1)); border:1px solid var(--border-2); color:var(--amber-b); font-weight:700; font-size:12px; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-b); letter-spacing:.5px; }
.pro-btn:hover { background:linear-gradient(135deg,rgba(200,134,30,.25),rgba(240,168,48,.2)); border-color:var(--amber); }

/* ── TOPBAR ── */
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.topbar-title { font-family:var(--font-d); font-size:32px; letter-spacing:2px; line-height:1; }
.topbar-sub { font-size:11px; color:var(--text-2); margin-bottom:3px; font-family:var(--font-m); letter-spacing:1px; }

/* ── STAT CARD ── */
.stat-card { background:var(--ink-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; position:relative; overflow:hidden; transition:all .2s; }
.stat-card:hover { border-color:var(--border-2); transform:translateY(-2px); }
.stat-card .label { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-family:var(--font-m); margin-bottom:10px; }
.stat-card .value { font-family:var(--font-d); font-size:32px; letter-spacing:1px; line-height:1; margin-bottom:4px; }
.stat-card .sub { font-size:11px; color:var(--text-2); }
.stat-card .icon-bg { position:absolute; right:16px; top:14px; font-size:28px; opacity:.12; }

/* ── LEVEL CARD ── */
.level-card { background:var(--ink-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; cursor:pointer; transition:all .2s; position:relative; overflow:hidden; }
.level-card:hover:not(.locked) { border-color:var(--border-2); transform:translateY(-2px); }
.level-card.locked { opacity:.5; cursor:not-allowed; }
.level-card.done { border-color:rgba(168,216,50,.3); }

/* ── TX ITEM ── */
.tx-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md); background:var(--ink-3); border:1px solid var(--border); margin-bottom:7px; transition:all .2s; }
.tx-item:hover { border-color:var(--border-2); transform:translateX(3px); }

/* ── CHAT ── */
.chat-user { display:flex; justify-content:flex-end; margin-bottom:14px; }
.chat-user .bubble { background:linear-gradient(135deg,var(--amber),var(--amber-b)); color:#0a0806; font-weight:500; border-radius:16px 4px 16px 16px; padding:11px 16px; max-width:75%; font-size:13.5px; line-height:1.55; }
.chat-ai { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.chat-ai .avatar { width:32px; height:32px; border-radius:9px; flex-shrink:0; background:linear-gradient(135deg,var(--amber),var(--ink-5)); border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; font-size:15px; margin-top:2px; }
.chat-ai .bubble { background:var(--ink-3); border:1px solid var(--border); border-radius:4px 16px 16px 16px; padding:12px 16px; max-width:88%; font-size:13.5px; line-height:1.65; }
.typing-dot { width:6px; height:6px; border-radius:50%; background:var(--amber); display:inline-block; animation:typingPulse 1.2s ease infinite; }

/* ── BADGE CARD ── */
.badge-card { background:var(--ink-3); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 10px; text-align:center; transition:all .2s; }
.badge-card.earned { background:var(--ink-2); }
.badge-card.earned:hover { transform:scale(1.05); }
.badge-card.locked { opacity:.25; }

/* ── JAR ── */
.jar-card { background:var(--ink-2); border-radius:var(--r-lg); padding:18px; cursor:pointer; transition:all .25s; border:1px solid var(--border); }
.jar-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }

/* ── STOCK TICKER ── */
.ticker-wrap { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:8px 0; background:var(--ink-1); margin:-28px -32px 24px; position:relative; }
.ticker-track { display:flex; gap:32px; animation:tickerScroll 30s linear infinite; white-space:nowrap; }
.ticker-wrap:hover .ticker-track { animation-play-state:paused; }
.ticker-item { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-m); font-size:12px; flex-shrink:0; }
.ticker-sym { color:var(--amber-b); font-weight:700; }
.ticker-price { color:var(--text-0); }
.ticker-change { font-weight:700; }
.ticker-change.up { color:var(--lime); }
.ticker-change.down { color:var(--crimson); }

/* ── STOCK PRICE FLASH ── */
.flash-up { animation:flashGreen .4s ease; }
.flash-down { animation:flashRed .4s ease; }

/* ── VAULT (bank balance visual) ── */
.vault-container { position:relative; width:100%; height:120px; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-3); border:1px solid rgba(168,216,50,.2); }
.vault-liquid { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg,rgba(168,216,50,.3),rgba(168,216,50,.1)); transition:height 1.5s cubic-bezier(.34,1.56,.64,1); }
.vault-liquid::before { content:''; position:absolute; top:-6px; left:-10%; right:-10%; height:12px; background:rgba(168,216,50,.2); border-radius:50%; animation:waveRipple 2s ease-in-out infinite; }
.vault-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* ── CHART (sparkline) ── */
.sparkline-canvas { width:100%; height:60px; }
.pnl-display { font-family:var(--font-d); font-size:48px; letter-spacing:2px; line-height:1; transition:color .3s; }
.pnl-display.positive { color:var(--lime); text-shadow:0 0 30px rgba(168,216,50,.4); }
.pnl-display.negative { color:var(--crimson); text-shadow:0 0 30px rgba(214,60,60,.4); }

/* ── STOCK CARD ── */
.stock-card { background:var(--ink-2); border:1px solid var(--border); border-radius:var(--r-md); padding:14px; cursor:pointer; transition:all .2s; position:relative; overflow:hidden; }
.stock-card:hover { border-color:var(--amber); transform:translateY(-2px); background:var(--ink-3); }
.stock-card .price { font-family:var(--font-m); font-weight:700; font-size:15px; transition:all .3s; }

/* ── QUEST BOSS (level completion drama) ── */
.boss-defeat { position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.95); animation:fadeIn .2s ease; }
.boss-defeat-inner { text-align:center; animation:bossReveal .6s cubic-bezier(.34,1.56,.64,1); }

/* ── MOBILE ── */
@media (max-width:900px) {
  #sidebar { width:56px; }
  .logo-name,.logo-tagline,.user-section,.nav-item span:not(.nav-icon),.nav-badge,.sidebar-footer { display:none; }
  .nav-item { justify-content:center; padding:12px; }
  .nav-item.active::before { display:none; }
  .page-wrap { padding:16px 14px; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .ticker-wrap { margin:-16px -14px 16px; }
}

/* ── ANIMATIONS ── */
@keyframes pageIn       { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes fadeIn       { from{opacity:0} to{opacity:1} }
@keyframes modalUp      { from{opacity:0;transform:translateY(30px) scale(.96)} to{opacity:1;transform:none} }
@keyframes toastIn      { from{opacity:0;transform:translateX(100%) scale(.8)} to{opacity:1;transform:none} }
@keyframes coinFlip     { 0%,100%{transform:rotateY(0)} 50%{transform:rotateY(180deg)} }
@keyframes flameWobble  { 0%,100%{transform:scaleY(1) rotate(-3deg)} 50%{transform:scaleY(1.1) rotate(3deg)} }
@keyframes typingPulse  { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)} }
@keyframes fadeUp       { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes shimmerMove  { from{opacity:0} 50%{opacity:1} to{opacity:0} }
@keyframes float        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes streakPulse  { 0%,100%{box-shadow:0 0 0 rgba(214,60,60,0)} 50%{box-shadow:0 0 18px rgba(214,60,60,.3)} }
@keyframes levelUpBox   { from{transform:scale(.5) rotate(-5deg);opacity:0} to{transform:none;opacity:1} }
@keyframes bossReveal   { from{transform:scale(.3) rotate(-10deg);opacity:0} to{transform:none;opacity:1} }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes flashGreen   { 0%{background:rgba(168,216,50,.3)} 100%{background:transparent} }
@keyframes flashRed     { 0%{background:rgba(214,60,60,.3)} 100%{background:transparent} }
@keyframes waveRipple   { 0%,100%{transform:scaleX(1) translateY(0)} 50%{transform:scaleX(1.05) translateY(-2px)} }
@keyframes coinFloat    { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-120px) scale(1.5)} }
@keyframes numberTick   { from{transform:translateY(10px);opacity:0} to{transform:none;opacity:1} }
@keyframes priceUp      { 0%{color:var(--text-0)} 50%{color:var(--lime);text-shadow:0 0 10px rgba(168,216,50,.6)} 100%{color:var(--text-0)} }
@keyframes priceDown    { 0%{color:var(--text-0)} 50%{color:var(--crimson);text-shadow:0 0 10px rgba(214,60,60,.6)} 100%{color:var(--text-0)} }

.anim-up    { animation:fadeUp .35s ease both; }
.anim-float { animation:float 3s ease-in-out infinite; }
.anim-tick  { animation:numberTick .2s ease; }