/* ═══════════════════════════════════════════════════════════
   ASTRO VAULT — DESIGN SYSTEM
   "The Celestial Terminal" — Bloomberg meets Mass Effect
   Fonts: Space Grotesk (display) · Manrope (body) · Space Mono (numbers)
   ═══════════════════════════════════════════════════════════ */

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

/* ── TOKENS ── */
:root {
  /* Void surfaces */
  --void:       #000000;
  --surface:    #0d0d19;
  --s-low:      #121220;
  --s-mid:      #1e1e2f;
  --s-high:     #2a2a3e;
  --s-bright:   #242436;

  /* Brand neons */
  --primary:    #6cb2ff;
  --primary-d:  #4ba4fd;
  --secondary:  #ad89ff;
  --gain:       #cdff5a;
  --gain-d:     #b1e23c;
  --loss:       #ff716c;
  --loss-d:     #d7383b;
  --warn:       #ffd234;

  /* Text */
  --text-0:     #e9e6f8;
  --text-1:     #aba9ba;
  --text-2:     #757484;
  --text-3:     #474655;

  /* Ghost border */
  --ghost:      rgba(71,70,85,0.25);
  --ghost-2:    rgba(108,178,255,0.15);
  --ghost-3:    rgba(108,178,255,0.3);

  /* Fonts */
  --f-display:  'Space Grotesk', sans-serif;
  --f-body:     'Manrope', sans-serif;
  --f-mono:     'Space Mono', monospace;

  /* Radii */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-pill:999px;

  /* Glow shadows */
  --glow-primary: 0 0 20px rgba(108,178,255,0.2);
  --glow-gain:    0 0 20px rgba(205,255,90,0.2);
  --glow-loss:    0 0 20px rgba(255,113,108,0.2);
  --shadow-card:  0 20px 40px rgba(0,0,0,0.4), 0 0 15px rgba(108,178,255,0.05);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--surface);
  color: var(--text-0);
  font-family: var(--f-body);
  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(--f-body); border:none; outline:none; background:none; }
input, select, textarea { font-family:var(--f-body); outline:none; color:var(--text-0); }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--s-high); border-radius:3px; }

/* ── STARFIELD BACKGROUND ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108,178,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(173,137,255,0.03) 0%, transparent 50%),
    var(--surface);
}
#starfield {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.star {
  position:absolute; border-radius:50%;
  background:var(--text-0); opacity:0;
  animation:starTwinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ── APP SHELL ── */
#app { display:flex; height:100vh; width:100vw; overflow:hidden; position:relative; z-index:1; }

/* ── SIDEBAR ── */
#sidebar {
  width:240px; flex-shrink:0;
  background: rgba(13,13,25,0.9);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--ghost);
  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(--primary),transparent);
  opacity:.2;
}

.logo-wrap {
  padding:20px 18px 16px;
  border-bottom: 1px solid var(--ghost);
}
.logo-name {
  font-family:var(--f-display);
  font-size:20px; font-weight:700; letter-spacing:2px;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.logo-vessel { font-size:9px; color:var(--text-2); font-family:var(--f-mono); letter-spacing:2px; margin-top:2px; }
.logo-status { display:flex; align-items:center; gap:5px; margin-top:6px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--gain); animation:statusPulse 2s ease infinite; }

.pilot-card {
  padding:14px 16px;
  border-bottom: 1px solid var(--ghost);
}
.pilot-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pilot-avatar {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--s-high), var(--s-mid));
  border:1px solid var(--ghost-2);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.pilot-name { font-family:var(--f-display); font-size:14px; font-weight:600; color:var(--text-0); }
.pilot-rank { font-size:9px; color:var(--primary); font-family:var(--f-mono); letter-spacing:1px; margin-top:1px; }

.xp-row { display:flex; justify-content:space-between; font-size:9px; color:var(--text-3); font-family:var(--f-mono); margin-bottom:5px; }
.xp-track { height:4px; background:var(--s-high); border-radius:999px; overflow:hidden; }
.xp-fill {
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  transition:width 1.2s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.xp-fill::after {
  content:''; position:absolute; right:0; top:-1px; bottom:-1px; width:3px;
  background:white; border-radius:999px; box-shadow:0 0 6px white;
}

.credits-display {
  margin-top:10px; display:flex; align-items:baseline; gap:5px;
}
.credits-val { font-family:var(--f-mono); font-size:18px; font-weight:700; color:var(--gain); }
.credits-label { font-size:9px; color:var(--text-3); font-family:var(--f-mono); letter-spacing: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:500;
  margin-bottom:2px; cursor:pointer;
  transition:all .2s; position:relative;
  font-family:var(--f-display); letter-spacing:.5px;
}
.nav-item:hover { background:var(--s-mid); color:var(--text-1); }
.nav-item.active {
  background:linear-gradient(135deg, rgba(108,178,255,0.12), rgba(173,137,255,0.08));
  color:var(--primary);
  box-shadow: inset 0 0 0 1px var(--ghost-2);
}
.nav-item.active::before {
  content:'';
  position:absolute; left:0; top:20%; bottom:20%;
  width:2px; background:var(--primary); border-radius:0 2px 2px 0;
  box-shadow:0 0 8px var(--primary);
}
.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(--f-mono);
  background:rgba(255,113,108,.15); color:var(--loss);
}
.nav-badge.live { background:rgba(205,255,90,.12); color:var(--gain); animation:statusPulse 2s infinite; }

.sidebar-footer { padding:12px 14px; border-top:1px solid var(--ghost); }
.upgrade-btn {
  width:100%; padding:10px 16px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--primary), var(--primary-d));
  color:#000; font-weight:700; font-size:11px; font-family:var(--f-display);
  cursor:pointer; transition:all .2s; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow: 0 4px 16px rgba(108,178,255,0.3);
}
.upgrade-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(108,178,255,0.45); }

/* ── MAIN ── */
#main {
  flex:1; overflow-y:auto; position:relative;
  background:var(--void);
}
.page-wrap { position:relative; z-index:1; padding:24px 28px; }
.screen { display:none; }
.screen.active { display:block; animation:pageIn .4s ease both; }

/* ── TICKER TAPE ── */
.ticker-tape {
  overflow:hidden; padding:7px 0;
  background:var(--void);
  border-bottom:1px solid var(--ghost);
  margin:-24px -28px 24px;
  position:relative;
}
.ticker-tape::before, .ticker-tape::after {
  content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.ticker-tape::before { left:0; background:linear-gradient(90deg,var(--void),transparent); }
.ticker-tape::after  { right:0; background:linear-gradient(270deg,var(--void),transparent); }
.ticker-inner { display:flex; gap:28px; animation:tickerScroll 25s linear infinite; white-space:nowrap; }
.ticker-tape:hover .ticker-inner { animation-play-state:paused; }
.ticker-item { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; }
.t-sym { font-family:var(--f-mono); font-size:11px; font-weight:700; color:var(--primary); }
.t-price { font-family:var(--f-mono); font-size:11px; color:var(--text-0); }
.t-chg { font-family:var(--f-mono); font-size:11px; font-weight:700; }
.t-chg.up { color:var(--gain); }
.t-chg.dn { color:var(--loss); }
.t-sep { color:var(--text-3); opacity:.5; }

/* ── TOPBAR ── */
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.topbar-title { font-family:var(--f-display); font-size:28px; font-weight:700; letter-spacing:.5px; line-height:1; }
.topbar-sub { font-size:10px; color:var(--text-2); margin-bottom:4px; font-family:var(--f-mono); letter-spacing:1.5px; }

/* ── GLASS CARDS ── */
.card {
  background:var(--s-low); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  position:relative; overflow:hidden;
  border:1px solid var(--ghost);
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,178,255,.3),transparent);
}
.card-glow { box-shadow:var(--shadow-card), var(--glow-primary); }
.glass {
  background:rgba(30,30,47,0.6);
  backdrop-filter:blur(16px);
  border:1px solid var(--ghost);
  border-radius:var(--r-lg);
}

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 20px; border-radius:var(--r-md); font-weight:600; font-size:12px; transition:all .18s; font-family:var(--f-display); letter-spacing:.5px; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-d)); color:#000; font-weight:700; box-shadow:0 4px 16px rgba(108,178,255,.3); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(108,178,255,.5); }
.btn-gain { background:linear-gradient(135deg,var(--gain-d),var(--gain)); color:#000; font-weight:700; box-shadow:0 4px 14px rgba(205,255,90,.25); }
.btn-gain:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(205,255,90,.4); }
.btn-loss { background:linear-gradient(135deg,var(--loss-d),var(--loss)); color:#fff; box-shadow:0 4px 14px rgba(255,113,108,.25); }
.btn-ghost { background:transparent; color:var(--primary); border:1px solid var(--ghost-2); }
.btn-ghost:hover { background:rgba(108,178,255,.08); border-color:var(--primary); }
.btn-sm { padding:6px 14px; font-size:11px; border-radius:var(--r-sm); }
.btn-lg { padding:14px 32px; font-size:14px; }
.btn-warn { background:linear-gradient(135deg,#b8860b,var(--warn)); color:#000; font-weight:700; }

/* ── INPUTS ── */
.input {
  width:100%; background:var(--s-mid); border:1px solid var(--ghost);
  border-radius:var(--r-md); padding:10px 14px; color:var(--text-0); font-size:13px;
  transition:border-color .2s;
}
.input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,178,255,.1); }
.input::placeholder { color:var(--text-3); }

/* ── PROGRESS BARS ── */
.track { background:var(--s-high); border-radius:999px; overflow:hidden; }
.fill { height:100%; border-radius:999px; transition:width .8s cubic-bezier(.34,1.56,.64,1); position:relative; }
.fill::after { content:''; position:absolute; right:0; top:-1px; bottom:-1px; width:2px; background:rgba(255,255,255,.8); border-radius:999px; box-shadow:0 0 6px white; }
.fill-primary { background:linear-gradient(90deg,var(--primary-d),var(--primary)); }
.fill-gain    { background:linear-gradient(90deg,var(--gain-d),var(--gain)); }
.fill-loss    { background:linear-gradient(90deg,var(--loss-d),var(--loss)); }
.fill-secondary { background:linear-gradient(90deg,#7b5cb8,var(--secondary)); }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.85); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; animation:fadeIn .2s ease;
}
.modal-box {
  background:var(--s-low); border:1px solid var(--ghost-2);
  border-radius:var(--r-xl); width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto;
  box-shadow:var(--shadow-card), var(--glow-primary);
  position:relative; animation:modalUp .35s cubic-bezier(.34,1.56,.64,1);
}
.modal-stripe { height:2px; border-radius:var(--r-xl) var(--r-xl) 0 0; }

/* ── TOAST ── */
.toast {
  position:fixed; top:24px; right:24px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:var(--r-md);
  background:var(--s-mid); border:1px solid var(--ghost-2);
  font-size:13px; font-weight:600; font-family:var(--f-display);
  animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);
  max-width:340px; box-shadow:var(--shadow-card);
}
.toast-gain   { border-color:var(--gain); color:var(--gain); box-shadow:0 8px 24px rgba(205,255,90,.15); }
.toast-loss   { border-color:var(--loss); color:var(--loss); }
.toast-primary{ border-color:var(--primary); color:var(--primary); }
.toast-warn   { border-color:var(--warn); color:var(--warn); }

/* ── LEVEL UP OVERLAY ── */
.levelup-overlay {
  position:fixed; inset:0; z-index:5000;
  background:rgba(0,0,0,.95); backdrop-filter:blur(20px);
  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(--s-mid) 0%, var(--surface) 70%);
  border:1px solid var(--ghost-2); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card), 0 0 80px rgba(108,178,255,.2);
  animation:levelUpBox .5s cubic-bezier(.34,1.56,.64,1);
}

/* ── CRASH OVERLAY ── */
.crash-overlay {
  position:fixed; inset:0; z-index:4000;
  animation:fadeIn .2s ease;
  display:flex; align-items:center; justify-content:flex-end;
  padding:40px;
}
.crash-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(180,20,20,.15), rgba(0,0,0,.97));
  animation:crashPulse 1s ease-in-out infinite;
}
.crash-border {
  position:absolute; inset:0;
  border:3px solid rgba(255,113,108,.4);
  animation:crashBorder 1s ease-in-out infinite;
  pointer-events:none;
}

/* ── HYPERSPACE OVERLAY ── */
.hyperspace-overlay {
  position:fixed; inset:0; z-index:3000;
  background:var(--void);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .3s ease;
  overflow:hidden;
}
.warp-line {
  position:absolute;
  background:linear-gradient(90deg, transparent, rgba(108,178,255,.6), transparent);
  height:1px; transform-origin:left center;
  animation:warpSpeed var(--dur,0.8s) linear infinite;
  animation-delay:var(--delay,0s);
}

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

/* ── TRADE TABLE ── */
.trade-row {
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border-radius:var(--r-md);
  background:var(--s-mid); margin-bottom:6px;
  transition:all .2s; cursor:pointer;
  border:1px solid transparent;
}
.trade-row:hover { border-color:var(--ghost-2); background:var(--s-high); }
.trade-symbol { font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--primary); width:70px; }
.trade-name   { flex:1; font-size:12px; color:var(--text-1); }
.trade-price  { font-family:var(--f-mono); font-size:13px; font-weight:700; width:90px; text-align:right; }
.trade-change { font-family:var(--f-mono); font-size:11px; font-weight:700; width:60px; text-align:right; }
.trade-change.up { color:var(--gain); }
.trade-change.dn { color:var(--loss); }

/* ── PLANET NODE (galaxy map) ── */
.planet-node {
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; transition:all .25s; position:relative;
}
.planet-node:hover:not(.locked) .planet-orb { transform:scale(1.1); }
.planet-orb {
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:28px; transition:all .25s; position:relative;
  border:2px solid transparent;
}
.planet-orb.glow-blue   { box-shadow:0 0 30px rgba(108,178,255,.5); border-color:rgba(108,178,255,.4); }
.planet-orb.glow-red    { box-shadow:0 0 30px rgba(255,113,108,.5); border-color:rgba(255,113,108,.4); }
.planet-orb.glow-yellow { box-shadow:0 0 30px rgba(255,210,52,.5);  border-color:rgba(255,210,52,.4); }
.planet-orb.glow-purple { box-shadow:0 0 30px rgba(173,137,255,.5); border-color:rgba(173,137,255,.4); }
.planet-orb.glow-green  { box-shadow:0 0 30px rgba(205,255,90,.5);  border-color:rgba(205,255,90,.4); }
.planet-orb.locked-orb  { opacity:.4; filter:grayscale(.8); cursor:not-allowed; }
.planet-label { font-family:var(--f-display); font-size:11px; font-weight:700; letter-spacing:1px; margin-top:8px; text-align:center; }
.planet-status { font-family:var(--f-mono); font-size:9px; letter-spacing:1px; margin-top:2px; text-align:center; }

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

/* ── GRIDS ── */
.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; }

/* ── P&L DISPLAY ── */
.pnl { font-family:var(--f-mono); font-size:28px; font-weight:700; line-height:1; transition:color .3s; }
.pnl.pos { color:var(--gain); text-shadow:0 0 20px rgba(205,255,90,.4); }
.pnl.neg { color:var(--loss); text-shadow:0 0 20px rgba(255,113,108,.4); }

/* ── SPARKLINE CANVAS ── */
canvas.spark { display:block; }

/* ── PRICE FLASH ── */
.price-flash-up { animation:flashGain .5s ease; }
.price-flash-dn { animation:flashLoss .5s ease; }

/* ── QUIZ TIMER RING ── */
.timer-ring { position:relative; width:64px; height:64px; }
.timer-ring svg { transform:rotate(-90deg); }
.timer-ring .track-circle { fill:none; stroke:var(--s-high); stroke-width:4; }
.timer-ring .fill-circle  { fill:none; stroke:var(--primary); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset .1s linear; }
.timer-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:16px; font-weight:700; color:var(--primary); }

/* ── DONUT CHART ── */
.donut-wrap { position:relative; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* ── MOBILE ── */
@media (max-width:900px) {
  #sidebar { width:52px; }
  .pilot-card, .nav-item span:not(.nav-icon), .nav-badge, .sidebar-footer, .logo-vessel, .logo-status { display:none; }
  .logo-name { font-size:10px; letter-spacing:1px; }
  .nav-item { justify-content:center; padding:12px; }
  .nav-item.active::before { display:none; }
  .page-wrap { padding:14px 12px; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .ticker-tape { margin:-14px -12px 14px; }
}

/* ══════════════════════════════════
   ANIMATIONS
══════════════════════════════════ */
@keyframes pageIn       { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes fadeIn       { from{opacity:0} to{opacity:1} }
@keyframes modalUp      { from{opacity:0;transform:translateY(24px) scale(.96)} to{opacity:1;transform:none} }
@keyframes toastIn      { from{opacity:0;transform:translateX(100%) scale(.9)} to{opacity:1;transform:none} }
@keyframes levelUpBox   { from{transform:scale(.4) rotate(-8deg);opacity:0} to{transform:none;opacity:1} }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes statusPulse  { 0%,100%{opacity:1;box-shadow:0 0 0 rgba(205,255,90,0)} 50%{opacity:.7;box-shadow:0 0 8px rgba(205,255,90,.5)} }
@keyframes starTwinkle  { 0%,100%{opacity:0} 50%{opacity:.8} }
@keyframes crashPulse   { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes crashBorder  { 0%,100%{border-color:rgba(255,113,108,.4)} 50%{border-color:rgba(255,113,108,.8)} }
@keyframes warpSpeed    { from{transform:scaleX(0) translateX(0);opacity:1} to{transform:scaleX(20) translateX(100vw);opacity:0} }
@keyframes float        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse        { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes flashGain    { 0%{background:rgba(205,255,90,.25)} 100%{background:transparent} }
@keyframes flashLoss    { 0%{background:rgba(255,113,108,.25)} 100%{background:transparent} }
@keyframes rotate       { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes coinFloat    { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-100px) scale(1.4)} }
@keyframes scanline     { from{transform:translateY(-100%)} to{transform:translateY(100vh)} }

.anim-up    { animation:pageIn .35s ease both; }
.anim-float { animation:float 4s ease-in-out infinite; }