@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&family=Bricolage+Grotesque:wght@400;600;700;800&display=swap');
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;outline:none}
:root{
  --bg:#020810;
  --card:#040E1A;
  --card2:#071524;
  --border:rgba(0,229,255,0.12);
  --border2:rgba(0,229,255,0.25);
  --text:#C8F0F8;
  --muted:#6BAEC8;
  --green:#00E5FF;
  --red:#e05252;
  --gold:#00FFD1;
  --blue:#00E5FF;
  --teal:#6BAEC8;
  --biolum:#00E5FF;
  --biolum2:#00FFD1;
  --biolum3:#0099CC;
  --scale:#1A4A6E;
  --abyss:#020810;
  --deep:#040E1A;
  --trench:#071524;
  --current:#0A1E30;
  --reef:#0D2640;
  --foam:#C8F0F8;
  --ghost:rgba(200,240,248,0.55);
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  padding-top:0; /* no header — HUD floats over game */
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) var(--delay,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.1}50%{opacity:.8}}

/* HEADER */
.header{
  display:none; /* replaced by #game-hud */
}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;letter-spacing:-1px;}
.logo span{color:var(--gold)}
.header-right{display:flex;align-items:center;gap:8px;}
.balance-badge{
  background:var(--card2);border:1px solid var(--border);
  padding:6px 14px;border-radius:20px;
  font-size:13px;font-weight:600;color:var(--gold);cursor:pointer;
}
.user-badge{
  background:var(--card2);border:1px solid var(--border);
  padding:6px 10px;border-radius:20px;
  font-size:12px;color:var(--muted);
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-decoration:none;
}

/* ── FLOATING GAME HUD ─────────────────────────────────────────────────── */
#game-hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  pointer-events: none;
  transition: opacity .3s ease;
}
#game-hud > * { pointer-events: auto; }
#game-hud-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
#hud-logo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--foam);
  text-shadow: 0 0 18px rgba(0,229,255,.7);
  white-space: nowrap;
  flex-shrink: 0;
}
#hud-logo span { color: var(--gold); }

/* shared pill style — matches existing SP badge */
.hud-pill {
  background: rgba(2,8,16,.6);
  border: 1px solid rgba(0,229,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--foam);
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
}
.hud-pill--green {
  border-color: rgba(0,255,180,.25);
  color: #00FFB2;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
}
.hud-pill--blue {
  border-color: rgba(0,229,255,.35);
  color: #00E5FF;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
  font-family: 'DM Sans', sans-serif;
}
.hud-pill--blue:active { box-shadow: 0 0 14px rgba(0,229,255,.5); }

/* SACA balance pop animation */
@keyframes hud-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); color: #00FFD1; }
  100% { transform: scale(1); }
}
.hud-pop { animation: hud-pop .35s ease; }

/* Coin fly particle */
.coin-fly {
  position: fixed;
  z-index: 9999;
  font-size: 14px;
  pointer-events: none;
  animation: coin-fly-anim .7s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes coin-fly-anim {
  0%   { opacity: 1; transform: scale(1) translate(0,0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(.5) translate(var(--fly-x), var(--fly-y)); }
}

.content{position:relative;z-index:5;padding:0 10px 140px}

/* Game canvas bleeds back up to sit under the HUD */
#swimmer-game-card {
  margin-top: -58px !important;
}

/* TOPUP BANNER */
.topup-banner{
  background:linear-gradient(135deg,rgba(0,255,209,.08),rgba(0,229,255,.03));
  border:1px solid rgba(0,255,209,.25);
  border-radius:14px;padding:12px 16px;
  align-items:center;justify-content:space-between;
  margin-bottom:14px;
  display:none;
}
.topup-banner.show{display:flex}
.topup-msg{font-size:13px;color:var(--gold);}
.topup-btn{
  background:var(--gold);color:#000;
  border:none;border-radius:10px;
  padding:7px 14px;font-size:12px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;white-space:nowrap;
}

.round-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:20px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.round-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(0,229,255,.07) 0%,transparent 70%);
  pointer-events:none;
}
.round-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.round-label{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--teal);text-transform:uppercase;}
.live-dot{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green);font-weight:600;}
.live-dot::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* COIN display */
.coin-symbol{font-family:'DM Mono',monospace;font-size:38px;font-weight:700;line-height:1;margin-bottom:8px;}
.coin-price{font-family:'DM Mono',monospace;font-size:20px;font-weight:700;}
.price-change{
  display:inline-block;font-size:13px;font-weight:700;
  padding:3px 10px;border-radius:10px;margin-left:8px;
}
.price-change.up{background:rgba(0,229,255,.15);color:var(--green)}
.price-change.down{background:rgba(255,23,68,.15);color:var(--red)}
.price-source{font-size:10px;color:var(--muted);text-align:center;margin-top:4px;}
.price-source.live{color:var(--green);}

.market-panel{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:14px;padding:10px;margin:10px 0 12px;}
.market-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-bottom:8px;}
.market-select{width:100%;background:var(--card2);border:1px solid var(--biolum);color:var(--text);border-radius:10px;padding:10px 12px;font-family:'DM Sans',sans-serif;font-weight:700;outline:none;}
.chart-wrap{height:180px;border-radius:14px;background:linear-gradient(180deg,#020810 0%,#040E1A 25%,#071524 55%,#020810 100%);border:1px solid rgba(0,229,255,0.25);overflow:hidden;position:relative;}
#price-chart{width:100%;height:100%;display:block;position:absolute;inset:0;}
.ocean-zone-label{position:absolute;left:8px;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;pointer-events:none;}



.band-overlay{
  position:absolute;inset:0;pointer-events:none;
  display:none;
}
.band-upper{position:absolute;left:0;right:0;height:1px;background:rgba(0,229,255,.5);}
.band-lower{position:absolute;left:0;right:0;height:1px;background:rgba(255,23,68,.5);}
.band-fill{position:absolute;left:0;right:0;background:rgba(0,229,255,.06);}
.band-tag{
  position:absolute;right:8px;transform:translateY(-50%);
  font-family:'DM Mono',monospace;font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:999px;background:rgba(8,11,16,.88);
  border:1px solid rgba(255,255,255,.08);line-height:1.1;
}
.band-tag.upper{color:var(--green)}
.band-tag.lower{color:var(--red)}

@keyframes pop-scale{
  0%{transform:scale(0);opacity:0}
  70%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
@keyframes ring-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.4)}
  50%{box-shadow:0 0 0 12px rgba(0,229,255,0)}
}









/* ── SCRATCH INLINE POPUP ──────────────────────────────────────────────────── */
/* popup is inline HTML with inline styles — no extra classes needed */

/* ── STREAK FIRE ─────────────────────────────────────────────────────────── */
.streak-fire-badge{
  display:none;align-items:center;gap:4px;
  background:rgba(255,100,0,.15);border:1px solid rgba(255,100,0,.4);
  border-radius:20px;padding:4px 10px;
  font-size:13px;font-weight:700;color:#ff6428;
}
.streak-fire-badge.show{display:flex;}
.streak-fire-num{font-family:'DM Mono',monospace;}

/* ── DAILY MISSIONS ──────────────────────────────────────────────────────── */
.missions-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:16px;margin-bottom:16px;position:relative;overflow:hidden;
}
.missions-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(0,229,255,.05) 0%,transparent 70%);
  pointer-events:none;
}
.missions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;cursor:pointer;user-select:none;}
.missions-title{font-size:11px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;font-weight:600;}
.missions-reset{font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;}
.mission-item{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;margin-bottom:8px;
  transition:border-color .2s ease;
}
.mission-item.done{border-color:rgba(0,229,255,.3);background:rgba(0,229,255,.05);}
.mission-item.done .mission-name{text-decoration:line-through;color:var(--muted);}
.mission-icon{font-size:22px;flex-shrink:0;}
.mission-copy{flex:1;min-width:0;}
.mission-name{font-size:13px;font-weight:600;margin-bottom:2px;}
.mission-progress{font-size:11px;color:var(--muted);}
.mission-reward{font-family:'DM Mono',monospace;font-size:12px;color:var(--gold);font-weight:700;white-space:nowrap;}
.mission-check{font-size:18px;flex-shrink:0;}
.missions-streak-bar{
  margin-top:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;
}
.streak-day-dots{display:flex;gap:4px;}
.streak-day-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--muted);}
.streak-day-dot.done{background:var(--gold);border-color:var(--gold);color:#000;}
.streak-day-dot.today{border-color:var(--gold);color:var(--gold);}

/* ── COUNTDOWN BANNER ────────────────────────────────────────────────────── */
.event-countdown-bar{
  background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(0,153,204,.06));
  border-bottom:1px solid rgba(0,229,255,.2);
  padding:7px 16px;display:flex;align-items:center;justify-content:space-between;
  font-size:12px;
}
.event-countdown-label{color:#00FFD1;font-weight:600;}
.event-countdown-timer{font-family:'DM Mono',monospace;color:var(--gold);font-weight:700;font-size:13px;}
.event-countdown-bar{cursor:pointer;transition:background .2s;}
.event-countdown-bar:hover{background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(0,153,204,.1));}
.event-countdown-bar.live-now{background:linear-gradient(135deg,rgba(0,255,209,.15),rgba(0,255,209,.07));border-bottom-color:rgba(0,255,209,.4);animation:bar-pulse 2s ease-in-out infinite;}
@keyframes bar-pulse{0%,100%{opacity:1}50%{opacity:.75}}
@keyframes lvl-bar-pulse{0%,100%{box-shadow:0 0 0px rgba(0,229,255,0)}50%{box-shadow:0 0 8px rgba(0,229,255,.9),0 0 16px rgba(0,255,209,.5)}}

/* ── Energy warning flash ── */
@keyframes energy-danger{0%,100%{opacity:1}50%{opacity:.3}}
.energy-danger-flash { animation:energy-danger .35s ease-in-out 3; }

/* ── Tap pulse on segment ── */
@keyframes seg-tap{0%{transform:scaleY(1)}40%{transform:scaleY(1.9)}100%{transform:scaleY(1)}}
.seg-tap-pulse { animation:seg-tap .18s ease-out; }

/* ── Energy dead-end overlay ── */
#energy-empty-overlay{
  display:none;position:fixed;inset:0;z-index:550;
  background:rgba(2,8,16,.88);align-items:center;justify-content:center;
}
#energy-empty-overlay.show{display:flex;}
#energy-empty-card{
  background:var(--card2);border:1px solid rgba(239,68,68,.35);
  border-radius:20px;padding:28px 24px;text-align:center;width:88%;max-width:340px;
}
#energy-empty-card .ee-icon{font-size:40px;margin-bottom:10px;}
#energy-empty-card .ee-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;}
#energy-empty-card .ee-timer{font-family:'DM Mono',monospace;font-size:24px;font-weight:700;color:var(--gold);margin:10px 0;}
#energy-empty-card .ee-sub{font-size:12px;color:var(--muted);margin-bottom:18px;line-height:1.6;}
#energy-empty-card .ee-refill-btn{
  width:100%;background:linear-gradient(135deg,#EF9F27,#c97d10);
  border:none;border-radius:12px;padding:13px;
  font-size:14px;font-weight:700;font-family:'DM Sans',sans-serif;
  color:#000;cursor:pointer;margin-bottom:8px;
}
#energy-empty-card .ee-wait-btn{
  width:100%;background:none;border:1px solid var(--border);
  border-radius:12px;padding:11px;font-size:13px;font-weight:600;
  font-family:'DM Sans',sans-serif;color:var(--muted);cursor:pointer;
}
/* Energy low pulse */
@keyframes energyPulse{0%,100%{opacity:1}50%{opacity:.4}}
#energy-bar-wrap.energy-low #energy-bar-fill{ animation:energyPulse 1s ease infinite; }

/* ── Header energy indicator ── */
.header-energy{
  display:flex;align-items:center;gap:4px;
  background:var(--card2);border:1px solid var(--border);
  padding:6px 10px;border-radius:20px;cursor:pointer;
  font-size:11px;font-weight:600;color:var(--muted);
  transition:border-color .2s;
}
.header-energy:hover{border-color:rgba(0,255,209,.4);}
.header-energy-dots{display:flex;gap:2px;align-items:center;}
.header-energy-dot{width:4px;height:4px;border-radius:1px;background:rgba(255,255,255,.12);transition:background .15s;}
.header-energy-dot.on{background:#ffd700;}
.header-energy-dot.warn{background:#ef4444;}

/* ── Session SACA counter ── */
#session-saca-counter{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 2px 0;font-size:10px;color:var(--muted);
}
#session-saca-counter .ssc-val{
  font-family:'DM Mono',monospace;font-size:11px;font-weight:700;color:#60a5fa;
}
.powerup-dock{
  margin-top:12px;
  padding:12px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:16px;
}
.powerup-dock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.powerup-dock-title{
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
}
.powerup-dock-note{
  font-size:10px;
  color:var(--muted);
}
.powerup-dock-list{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
.powerup-dock-list::-webkit-scrollbar{display:none}
.powerup-chip{
  min-width:92px;
  border-radius:14px;
  border:1px solid rgba(0,229,255,.24);
  background:linear-gradient(180deg, rgba(7,21,36,.96), rgba(4,14,26,.96));
  padding:10px 10px 9px;
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  cursor:pointer;
  flex-shrink:0;
}
.powerup-chip.active{
  border-color:rgba(29,158,117,.45);
  box-shadow:0 0 0 1px rgba(29,158,117,.12) inset;
}
.powerup-chip.ready{
  border-color:rgba(0,255,209,.4);
}
.powerup-chip.empty{
  min-width:100%;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:pointer;
}
.powerup-chip-emoji{
  font-size:18px;
  line-height:1;
}
.powerup-chip-name{
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}
.powerup-chip-meta{
  font-size:10px;
  color:var(--muted);
  line-height:1.2;
}

/* ── FLASH TOURNAMENT MODAL ─────────────────────────────────────────── */
#ft-overlay{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.88);align-items:flex-end;justify-content:center;}
#ft-overlay.open{display:flex;}
#ft-modal{
  background:var(--bg);border:1px solid var(--border);
  border-radius:24px 24px 0 0;width:100%;max-width:480px;
  max-height:92vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .35s cubic-bezier(.32,1.2,.42,1);
}
#ft-overlay.open #ft-modal{transform:translateY(0);}
.ft-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:10px auto 0;}
.ft-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 10px;}
.ft-title{font-size:15px;font-weight:700;color:var(--text);}
.ft-close{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--card2);color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;}
.ft-hero{background:var(--card);padding:16px 18px 14px;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.ft-live-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;margin-bottom:6px;}
.ft-live-dot{width:6px;height:6px;border-radius:50%;background:#00E5FF;animation:ldot 1.2s ease-in-out infinite;}
@keyframes ldot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.ft-event-title{font-size:21px;font-weight:800;color:var(--text);letter-spacing:-.5px;margin-bottom:3px;}
.ft-event-sub{font-size:12px;color:var(--muted);margin-bottom:13px;}
.ft-timer-row{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:11px;}
.ft-tbox{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:7px 11px;text-align:center;min-width:54px;}
.ft-tnum{font-size:20px;font-weight:700;color:var(--text);font-family:'DM Mono',monospace;line-height:1;}
.ft-tlbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px;}
.ft-tsep{font-size:18px;color:var(--muted);font-weight:700;}
.ft-players{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--muted);}
.ft-pdot{width:6px;height:6px;border-radius:50%;background:var(--green);}
.ft-section{padding:13px 16px;border-bottom:1px solid var(--border);}
.ft-section-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:9px;}
.ft-prizes{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.ft-prize-card{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:9px 11px;}
.ft-prize-place{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;}
.ft-prize-amt{font-size:14px;font-weight:800;color:var(--gold);}
.ft-prize-cur{font-size:10px;color:var(--muted);font-weight:600;}
.ft-prize-4to10{display:flex;align-items:center;justify-content:space-between;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:9px 13px;}
.ft-range-lbl{font-size:11px;font-weight:700;color:var(--muted);}
.ft-range-val{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:800;color:var(--gold);}
.ft-rank-card{background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid rgba(0,255,209,.28);border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;}
.ft-rank-num{font-size:26px;font-weight:800;color:var(--gold);}
.ft-rank-lbl{font-size:11px;color:var(--muted);}
.ft-rank-hint{font-size:11px;color:var(--muted);margin-top:1px;}
.ft-score-lbl{font-size:11px;color:var(--muted);}
.ft-score-val{font-size:17px;font-weight:700;color:var(--text);text-align:right;}
.ft-best-run{font-size:11px;color:var(--muted);margin-top:1px;}
.ft-lb-list{display:flex;flex-direction:column;gap:2px;}
.ft-lb-row{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:10px;}
.ft-lb-row.you{background:rgba(0,255,209,.06);border:1px solid rgba(0,255,209,.18);}
.ft-lb-rank{font-size:12px;color:var(--muted);min-width:26px;font-family:'DM Mono',monospace;font-weight:600;}
.ft-lb-name{flex:1;font-size:14px;color:var(--text);font-weight:500;}
.ft-lb-name.you{color:var(--gold);font-weight:700;}
.ft-lb-score{font-size:12px;color:var(--muted);font-family:'DM Mono',monospace;}
.ft-zone-badge{font-size:9px;background:rgba(0,255,209,.15);color:var(--gold);border-radius:4px;padding:2px 5px;font-weight:700;margin-left:4px;}
.ft-how-list{display:flex;flex-direction:column;gap:8px;}
.ft-how-item{display:flex;align-items:flex-start;gap:10px;}
.ft-how-icon{width:28px;height:28px;border-radius:8px;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px;}
.ft-how-text{font-size:12px;color:var(--muted);line-height:1.5;}
.ft-how-text b{color:var(--text);font-weight:600;}
.ft-upcoming-hero{text-align:center;padding:24px 18px;}
.ft-upcoming-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;}
.ft-upcoming-sub{font-size:13px;color:var(--muted);margin-bottom:16px;}
.ft-big-timer{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px;}
.ft-big-tbox{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 16px;text-align:center;min-width:68px;}
.ft-big-tnum{font-size:28px;font-weight:800;color:var(--text);font-family:'DM Mono',monospace;line-height:1;}
.ft-big-tlbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px;}
.ft-big-tsep{font-size:24px;color:var(--muted);font-weight:700;}

/* ── FIRST WIN OF DAY BANNER ─────────────────────────────────────────────── */
.first-win-banner{
  display:none;
  background:linear-gradient(135deg,rgba(0,255,209,.15),rgba(0,229,255,.08));
  border:1px solid rgba(0,255,209,.35);
  border-radius:14px;padding:10px 16px;
  align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.first-win-banner.show{display:flex;}
.first-win-msg{font-size:13px;color:var(--gold);font-weight:600;}
.first-win-badge{font-family:'DM Mono',monospace;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,#ff9800,#ffd600);border-radius:8px;padding:4px 10px;}
.chart-profit{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  text-align:center;pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.35);
  display:none;
}
.chart-profit.show{display:block}
.chart-profit-label{font-family:'DM Mono',monospace;font-size:15px;font-weight:700;color:var(--green)}
.chart-profit-value{font-size:10px;font-weight:600;color:rgba(232,240,254,.6);margin-top:2px}
.stats-live-pill{
  display:none;
}
.stats-live-pill.show{display:inline-flex}

.bet-size-panel{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin-top:8px;}
.bet-size-copy{min-width:0}
.bet-size-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.bet-size-value{font-family:'DM Mono',monospace;font-size:16px;font-weight:700;color:var(--gold)}
.bet-stepper{display:flex;align-items:center;gap:8px;flex-shrink:0}
.step-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-size:20px;line-height:1;font-weight:700;cursor:pointer;}
.reward-preview{font-size:11px;color:var(--muted);text-align:right;line-height:1.35;display:flex;flex-direction:column;align-items:flex-end;}
.reward-preview b{color:var(--teal);font-size:10px;letter-spacing:1px;text-transform:uppercase;}
#current-ticks-display{font-family:'DM Mono',monospace;font-size:18px;font-weight:700;color:var(--gold);}

/* GROWTH RATE SELECTOR */
.growth-section{margin:12px 0 10px;}
.growth-label{font-size:11px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:8px;text-align:center;}
.growth-row{display:flex;gap:6px;}
.growth-btn{
  flex:1;
  background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--muted);
  padding:9px 4px;border-radius:12px;font-size:14px;font-weight:700;
  font-family:'DM Mono',monospace;cursor:pointer;text-align:center;
  transition:transform .12s ease,border-color .12s ease,background .12s ease,color .12s ease;
}
.growth-btn.active{
  border-color:var(--teal);background:rgba(0,229,255,.15);color:var(--teal);
  transform:translateY(-1px);
}
.growth-btn:active{transform:scale(.97)}

/* danger zone flash */

/* TICK HISTORY GRID */
.stats-grid{
  background:rgba(255,255,255,.02);border:1px solid var(--border);
  border-radius:12px;padding:12px;margin:10px 0;
}
.stats-grid-header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin-bottom:10px;
  cursor:pointer;user-select:none;
}
.stats-toggle-arrow{
  font-size:14px;color:var(--muted);transition:transform .2s ease;line-height:1;
}
.stats-grid.expanded .stats-toggle-arrow{transform:rotate(180deg);}
.grid-cells{
  display:grid;grid-template-columns:repeat(10,1fr);gap:4px;
}
/* collapsed: only first row (10 cells) visible */
.grid-cells.collapsed .grid-cell:nth-child(n+11){display:none;}
.grid-cell{
  background:var(--card2);border-radius:6px;
  font-family:'DM Mono',monospace;font-size:11px;font-weight:700;
  text-align:center;padding:5px 2px;color:rgba(225,245,238,.72);
}
.grid-cell.active{
  color:var(--text);
}
.grid-cell.ghost{color:var(--muted);background:rgba(255,255,255,.03);opacity:.55;}

/* BUY / CASHOUT BUTTONS */
.accum-btn-row{margin-top:12px;}
.buy-btn{
  width:100%;
  background:#00E5FF;
  border:none;border-radius:16px;
  padding:16px;font-size:18px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  color:#020810;cursor:pointer;letter-spacing:.5px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 0 20px rgba(0,229,255,.3);
  transition:box-shadow .2s,transform .1s ease,opacity .1s ease;
  position:relative;overflow:hidden;
}
.buy-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  pointer-events:none;
}
.buy-btn:active{transform:scale(.97)}
.buy-btn:disabled{opacity:.5;cursor:not-allowed;}
.cashout-btn{
  width:100%;
  background:linear-gradient(135deg,#ffd600,#ff9800);
  border:none;border-radius:16px;
  padding:16px;font-size:18px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  color:#000;cursor:pointer;letter-spacing:.5px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .1s ease;
  animation:cashout-pulse 1.5s ease-in-out infinite;
}
@keyframes cashout-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,214,0,.4)}
  50%{box-shadow:0 0 0 10px rgba(255,214,0,0)}
}
.cashout-btn:active{transform:scale(.97)}

/* BURN CRYPTO → PLAY COINS */
.burn-card{
  background:linear-gradient(135deg,rgba(255,23,68,.08),rgba(255,152,0,.05));
  border:1px solid rgba(255,23,68,.3);
  border-radius:20px;padding:20px;margin-bottom:16px;position:relative;overflow:hidden;
}
.burn-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,23,68,.1) 0%,transparent 70%);
  pointer-events:none;
}
.burn-title{font-size:12px;letter-spacing:1.5px;color:#ff5252;text-transform:uppercase;font-weight:600;margin-bottom:4px;}
.burn-subtitle{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.5;}
.burn-coin-select{
  width:100%;background:var(--card2);border:1px solid var(--border);
  color:var(--text);border-radius:10px;padding:10px 12px;
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
  margin-bottom:10px;
}
.burn-slider-wrap{margin-bottom:10px;}
.burn-slider-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-bottom:6px;}
.burn-slider-label b{color:var(--text);font-family:'DM Mono',monospace;}
input[type=range].burn-slider{
  width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#ff1744 0%,#ff9800 100%);
  outline:none;border:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
input[type=range].burn-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--gold);border:2px solid #000;cursor:pointer;
}
.burn-preview-box{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;
}
.burn-preview-left{font-size:12px;color:var(--muted);}
.burn-preview-left b{font-family:'DM Mono',monospace;color:#ff5252;font-size:15px;}
.burn-preview-arrow{font-size:20px;color:var(--muted);}
.burn-preview-right{text-align:right;font-size:12px;color:var(--muted);}
.burn-preview-right b{font-family:'DM Mono',monospace;color:var(--gold);font-size:15px;}
.burn-rate{font-size:10px;color:var(--muted);text-align:center;margin-bottom:10px;}
.burn-btn{
  width:100%;background:linear-gradient(135deg,#c62828,#e53935);
  border:none;border-radius:14px;padding:14px;
  font-size:15px;font-weight:700;font-family:'DM Sans',sans-serif;
  color:#fff;cursor:pointer;letter-spacing:.5px;
  transition:transform .1s ease,opacity .1s ease;
}
.burn-btn:active{transform:scale(.97)}
.burn-btn:disabled{opacity:.4;cursor:not-allowed;}


/* ACHIEVEMENT CHECKLIST */
.achieve-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:20px;margin-bottom:16px;
}
.achieve-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.achieve-title{font-size:12px;letter-spacing:1.5px;color:var(--teal);text-transform:uppercase;font-weight:600;}
.achieve-progress{font-size:12px;color:var(--gold);font-weight:700;font-family:'DM Mono',monospace;}
.achieve-subtitle{font-size:11px;color:var(--muted);margin-bottom:14px;line-height:1.4;}
.achieve-tier{margin-bottom:14px;}
.achieve-tier-label{
  font-size:10px;letter-spacing:1.2px;font-weight:700;text-transform:uppercase;
  margin-bottom:6px;display:flex;align-items:center;gap:6px;
}
.achieve-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:10px;margin-bottom:4px;
  background:rgba(255,255,255,.025);border:1px solid transparent;
  font-size:12px;transition:border-color .2s ease,background .2s ease;
}
.achieve-item.done{
  background:rgba(0,229,255,.06);border-color:rgba(0,229,255,.2);
}
.achieve-item.done .achieve-check{color:var(--green);}
.achieve-check{font-size:14px;flex-shrink:0;color:var(--muted);}
.achieve-name{flex:1;color:var(--text);}
.achieve-name.done{color:var(--green);}
.achieve-hint{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;}



/* TICK PROGRESS BAR */
.tick-progress{
  height:4px;border-radius:2px;
  background:var(--border);margin:8px 0;overflow:hidden;
}
.tick-fill{
  height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--green));
  transition:width .2s ease;
}

/* danger zone when approaching bust */
.accum-display.danger .accum-payout{color:var(--red);animation:danger-flash .5s ease-in-out infinite;}
@keyframes danger-flash{0%,100%{opacity:1}50%{opacity:.5}}

/* chart breach flash overlay */
.chart-breach-flash{
  position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:rgba(255,23,68,0);transition:background .1s ease;
}
.chart-breach-flash.flash{background:rgba(255,23,68,.28);}

/* waiting/timer */
.timer-card{
  background:var(--card);border:1px solid rgba(0,229,255,.16);
  border-radius:18px;padding:18px 20px;margin-bottom:16px;
  text-align:center;position:relative;
}
.timer-title{font-size:12px;color:var(--muted);margin-bottom:10px;letter-spacing:1.4px;text-transform:uppercase}
.loader-ring{
  width:34px;height:34px;border-radius:50%;margin:0 auto 10px;
  border:3px solid rgba(255,255,255,.1);border-top-color:var(--teal);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.timer-sub{font-size:13px;color:var(--muted)}
.timer-sub b{color:var(--gold)}

.streak-bar{display:flex;gap:6px;justify-content:center;margin-top:16px;}
.streak-dot{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;border:2px solid var(--border);color:var(--muted);
}
.streak-dot.win{background:rgba(0,229,255,.2);border-color:var(--green);color:var(--green)}
.streak-dot.loss{background:rgba(255,23,68,.15);border-color:rgba(255,23,68,.3);color:#ff5252}
.streak-dot.pending{border-style:dashed;border-color:var(--gold)}

/* LEADERBOARD */
.leaderboard-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:16px;margin-bottom:16px;
}
.lb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.lb-title{font-size:12px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.lb-you{font-size:11px;color:var(--teal);}
.lb-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.lb-item:last-child{border-bottom:none}
.lb-rank{width:20px;text-align:center;font-weight:700;color:var(--muted);font-size:12px;}
.lb-rank.gold{color:var(--gold);}
.lb-rank.silver{color:#aaa;}
.lb-rank.bronze{color:#cd7f32;}
.lb-name{flex:1;color:var(--text);}
.lb-name.you{color:var(--teal);font-weight:600;}
.lb-score{font-family:'DM Mono',monospace;font-weight:700;color:var(--green);font-size:12px;}

.feed-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:16px;}
.feed-title{font-size:12px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.feed-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.feed-item:last-child{border-bottom:none}
.feed-user{color:var(--muted)}
.feed-user b{color:var(--text)}
.feed-win{color:var(--green);font-weight:700;font-family:'DM Mono',monospace}

/* result overlay CSS removed */

/* STATS BAR */
.stats-bar{display:flex;gap:12px;margin-bottom:16px;}
.stat-card{flex:1;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center;}
.stat-val{font-size:18px;font-weight:700;font-family:'DM Mono',monospace}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:2px}

.portfolio-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-bottom:16px;
}
.portfolio-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.portfolio-title{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;}
.title-icon{
  width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--gold);font-size:10px;font-weight:700;
}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.portfolio-metric{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:10px}
.portfolio-metric .label{font-size:10px;color:var(--muted);letter-spacing:1.1px;text-transform:uppercase}
.portfolio-metric .value{font-family:'DM Mono',monospace;font-size:16px;font-weight:700;margin-top:4px}

.toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:var(--card2);border:1px solid var(--border);
  padding:10px 20px;border-radius:20px;
  font-size:13px;font-weight:600;
  z-index:300;display:none;white-space:nowrap;color:var(--text);
}
.result-banner{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  width:calc(100% - 32px);max-width:420px;
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:14px 16px;
  z-index:300;display:none;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  animation:none;
}
.result-banner.show{display:block;animation:bannerSlideUp .25s ease forwards}
.result-banner.win-banner{border-color:rgba(0,229,255,.8);background:linear-gradient(135deg,#040E1A,#071524);}
.result-banner.loss-banner{border-color:rgba(255,23,68,.6);background:linear-gradient(135deg,#1e0d0d,#200f0f);}
@keyframes bannerSlideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.result-banner-row{display:flex;align-items:center;gap:10px;}
.result-banner-emoji{font-size:28px;flex-shrink:0;line-height:1;}
.result-banner-body{flex:1;min-width:0;}
.result-banner-title{font-size:14px;font-weight:700;line-height:1.2;}
.result-banner-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.result-banner-amount{font-family:'DM Mono',monospace;font-size:16px;font-weight:700;flex-shrink:0;text-align:right;}
.result-banner-detail{font-size:10px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--border);}

.sound-btn{
  background:none;border:1px solid var(--border);
  color:var(--muted);border-radius:50%;width:32px;height:32px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.sound-icon{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* MAX PAYOUT INFO */
.accum-limits{
  display:flex;justify-content:space-between;
  font-size:10px;color:var(--muted);margin-top:6px;
  padding:0 2px;
}

/* ── Watch Ad Button ──────────────────────────────────────────────────── */
.watch-ad-wrap{margin:10px 0 20px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.watch-ad-btn{
  width:100%;padding:13px 0;border-radius:14px;border:none;cursor:pointer;
  background:#00E5FF;
  color:#020810;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 0 20px rgba(0,229,255,.3);transition:box-shadow .2s,opacity .2s,transform .1s;
}
.watch-ad-btn:hover{box-shadow:0 0 30px rgba(0,229,255,.45),0 0 60px rgba(0,229,255,.15);}
.watch-ad-btn:active{transform:scale(.97);}
.watch-ad-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.ad-meta{font-size:12px;color:var(--muted);text-align:center;line-height:1.5;}
.ad-meta b{color:var(--gold);}
.ad-cooldown{color:var(--teal);font-size:12px;font-weight:600;}

/* Audit refresh */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top center, rgba(0,229,255,.16), transparent 34%),
    radial-gradient(circle at 20% 20%, rgba(0,255,209,.08), transparent 26%),
    linear-gradient(180deg, rgba(2,8,16,.98) 0%, rgba(2,8,16,.94) 42%, rgba(4,14,26,1) 100%);
  z-index:0;
}
.header{
  position:sticky;
  top:0;
  background:rgba(2,8,16,.82);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 32px rgba(0,0,0,.24);
}
.logo{font-size:24px;}
.event-countdown-bar{
  width:calc(100% - 12px);
  margin:6px auto 0;
  border:1px solid rgba(0,255,209,.16);
  border-radius:10px;
  padding:6px 10px;
  min-height:36px;
}
.tournament-main-card{
  margin:4px 0 8px;
  padding:8px 10px;
  border:1px solid rgba(0,255,209,.2);
  border-radius:14px;
  background:
    radial-gradient(circle at top right, rgba(0,255,209,.12), transparent 26%),
    radial-gradient(circle at top left, rgba(0,229,255,.12), transparent 24%),
    linear-gradient(180deg, rgba(7,21,36,.98), rgba(4,14,26,.98));
}
.tm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
  flex-wrap:nowrap;
}
.tm-kicker{
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:800;
  white-space:nowrap;
}
.tm-title{margin-top:4px;font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.4px;}
.tm-sub{margin-top:4px;font-size:11px;color:var(--muted);line-height:1.4;}
.tm-reset{flex-shrink:0;text-align:right;}
.tm-reset-label{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);}
.tm-reset-time{margin-top:4px;font-family:'DM Mono',monospace;font-size:18px;font-weight:800;color:var(--gold);}
.tm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px;}
.tm-stat{padding:10px 8px;border-radius:14px;border:1px solid rgba(0,229,255,.18);background:rgba(255,255,255,.03);}
.tm-stat-label{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);}
.tm-stat-value{margin-top:6px;font-family:'DM Mono',monospace;font-size:18px;font-weight:800;color:var(--text);}
/* card grid entries */
.tm-strip{
  display:flex;
  gap:5px;
  overflow-x:auto;
  scrollbar-width:none;
}
.tm-strip::-webkit-scrollbar{display:none}
.tm-entry{
  flex:1;
  min-width:0;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  display:flex;
  flex-direction:column;
  gap:1px;
}
.tm-entry.you{
  border-color:rgba(0,255,209,.38);
  background:rgba(0,255,209,.06);
}
.tm-entry-rank{
  font-size:9px;
  color:var(--muted);
  font-family:'DM Mono',monospace;
  font-weight:600;
}
.tm-entry-name{
  font-size:11px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tm-entry.you .tm-entry-name{ color:var(--gold); }
.tm-entry-score{
  font-family:'DM Mono',monospace;
  font-size:10px;
  font-weight:700;
  color:var(--gold);
}
.tm-footer{display:none;}
.tm-footer-copy{font-size:11px;color:var(--muted);}
.tm-footer-btn{flex-shrink:0;border:none;border-radius:999px;padding:9px 14px;background:linear-gradient(135deg,#EF9F27,#c97d10);color:#000;font-size:11px;font-weight:800;font-family:'DM Sans',sans-serif;cursor:pointer;}
.tm-know-more{font-size:10px;color:var(--muted);text-decoration:underline;cursor:pointer;letter-spacing:.3px;background:none;border:none;font-family:'DM Sans',sans-serif;padding:0;white-space:nowrap;flex-shrink:0;}
.content{
  max-width:none;
  width:100%;
  margin:0;
  padding:0 6px 140px;
}
.topup-banner,
.round-card,
.missions-card,
.leaderboard-card,
.feed-card,
.portfolio-card,
.achieve-card{
  border-radius:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.round-card,
.missions-card,
.leaderboard-card,
.feed-card,
.portfolio-card,
.achieve-card{
  background:linear-gradient(180deg, rgba(10,18,34,.96), rgba(8,14,28,.98));
}
.missions-card,
.leaderboard-card,
.feed-card{
  overflow:hidden;
}
/* ── GAME CANVAS — full-width immersive ──────────────────────────────────── */
#swimmer-game-card{
  padding:0 !important;
  margin: 0 -10px 14px; /* bleed to screen edges */
  overflow:visible;
  position:relative;
  border:none !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}
#swimmer-game-card::after{
  display:none;
}
#game-wrap{
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:none;
  box-shadow:none !important;
  line-height:0;
}
/* Canvas fills full width, taller on mobile */
#swimmer-canvas {
  width: 100% !important;
  height: 65vh !important;
  min-height: 300px;
  max-height: 520px;
  display: block;
  touch-action: none;
}
#game-overlay{
  border-radius:0 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(0,229,255,.14), transparent 28%),
    linear-gradient(180deg, rgba(2,8,16,.55), rgba(2,8,16,.82)) !important;
}
#fish-evo-panel{
  display:none !important;
}
#session-saca-counter{
  margin-top:2px;
  padding:0;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#session-saca-counter .session-chip{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,229,255,.16);
  background:rgba(255,255,255,.03);
}
#session-saca-counter .session-chip-label{
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
}
.mini-shop-btn{
  flex-shrink:0;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#EF9F27,#c97d10);
  color:#000;
  padding:9px 14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
}
.missions-header,
.lb-header{
  align-items:flex-start;
}
.lb-item,
.feed-item{
  padding:10px 0;
}
#shop-modal,
#ton-modal,
#roadmap-modal,
#transfer-notify-modal{
  backdrop-filter:blur(8px);
}
#shop-modal > div,
#ton-modal > div,
#roadmap-modal > div{
  width:min(100%, 520px) !important;
  max-height:min(88vh, 860px) !important;
  border-radius:28px 28px 0 0 !important;
  box-shadow:0 -18px 52px rgba(0,0,0,.5);
}
#shop-modal > div,
#ton-modal > div{
  padding:24px 18px 30px !important;
}
#roadmap-modal > div{
  padding:22px 18px 30px !important;
}
#shop-modal button,
#ton-modal button,
#roadmap-modal button{
  touch-action:manipulation;
}
.topup-banner,
.feed-card,
.achieve-card,
.burn-card{
  display:none !important;
}

.leaderboard-card{
  margin-bottom:0;
}
.missions-card{
  margin-bottom:10px;
}
.missions-card,
.leaderboard-card{
  padding:12px 12px;
  margin-bottom:12px;
  background:rgba(9,16,30,.82);
  box-shadow:none;
}
.missions-header,
.lb-header{
  margin-bottom:0;
}
.missions-title,
.lb-title,
.feed-title{
  letter-spacing:1.8px;
}
.missions-reset,
.lb-you{
  font-size:10px;
}

.portfolio-card{
  display:block !important;
}
.powerup-dock{
  margin-top:10px;
  padding:0;
  background:none;
  border:none;
  border-radius:0;
}
.powerup-dock-head{
  display:none;
}
.powerup-dock-list{
  gap:6px;
  overflow:visible;
  flex-wrap:wrap;
}
.powerup-chip{
  width:58px;
  min-width:58px;
  min-height:58px;
  border-radius:16px;
  padding:8px 6px;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:3px;
  background:rgba(255,255,255,.035);
}
.powerup-chip-emoji{
  font-size:16px;
}
.powerup-chip-name{
  font-size:9px;
  letter-spacing:.2px;
}
.powerup-chip-meta{
  font-size:8px;
  line-height:1.15;
}
.powerup-chip.empty{
  width:100%;
  min-height:auto;
  padding:10px 12px;
  border-style:dashed;
}
.powerup-chip.empty .powerup-chip-name,
.powerup-chip.empty .powerup-chip-meta{
  text-align:left;
  width:100%;
}
@media (max-width: 420px){
  .header{
    padding:14px 14px 10px;
  }
  .logo{
    font-size:22px;
  }
  .header-right{
    gap:6px;
  }
  .balance-badge,
  .user-badge,
  .header-energy{
    padding:6px 9px;
  }
  .content{
    padding:2px 4px 110px;
  }
  .round-card,
  .missions-card,
  .leaderboard-card,
  .feed-card,
  .portfolio-card,
  .achieve-card{
    border-radius:20px;
  }
  #swimmer-game-card{
    padding:0 !important;
  }
  .event-countdown-bar{
    width:calc(100% - 8px);
    margin-top:4px;
    padding:5px 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   GAME UI REDESIGN — immersive, no app chrome
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FLOATING ACTION DOCK ─────────────────────────────────────────────────── */
#action-dock {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(4,14,26,.88);
  border: 1px solid rgba(0,229,255,.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(0,229,255,.06) inset;
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.32,1.2,.42,1), opacity .25s ease;
}
.dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.dock-btn:active { transform: scale(.88); }
.dock-btn:hover  { background: rgba(0,229,255,.08); }
.dock-icon  { font-size: 20px; line-height: 1; display: block; }
.dock-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--muted);
  text-transform: uppercase;
}
.dock-btn--highlight .dock-label { color: #00E5FF; }
.dock-btn--highlight .dock-icon  { filter: drop-shadow(0 0 6px rgba(0,229,255,.7)); }

/* ── GAME CANVAS — full-width, no rounded card ───────────────────────────── */
#swimmer-game-card {
  padding: 0 !important;
  margin: 0 -10px 12px !important;
  overflow: visible;
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
#game-wrap {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none;
  box-shadow: none !important;
  line-height: 0;
}
#swimmer-canvas {
  width: 100% !important;
  height: 65vh !important;
  min-height: 300px;
  max-height: 520px;
  display: block;
  touch-action: none;
}
#game-overlay {
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(0,229,255,.12), transparent 30%),
    linear-gradient(180deg, rgba(2,8,16,.5), rgba(2,8,16,.8)) !important;
}

/* ── CARDS — atmospheric, less border-heavy ──────────────────────────────── */
.missions-card,
.leaderboard-card,
.feed-card,
.portfolio-card,
.achieve-card,
.round-card {
  background: rgba(6,13,26,.8) !important;
  border: 1px solid rgba(0,229,255,.07) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* tournament strip — keep gradient, tighten */
.tournament-main-card {
  margin: 4px 0 8px !important;
  border-radius: 14px !important;
}

/* level bar */
#player-level-bar-wrap { padding: 8px 10px 2px; }

/* x2 boost badge */
#x2-boost-badge { margin: 0 10px 4px !important; }

/* lift toast + result banner above dock */
.result-banner { bottom: 88px !important; }
.toast         { bottom: 96px !important; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  #game-hud    { padding: 8px 10px; }
  #hud-logo    { font-size: 15px; }
  #hud-vault   { font-size: 10px; padding: 4px 8px; }
  #hud-sp      { font-size: 11px; padding: 4px 10px; }
  #swimmer-canvas { height: 65vh !important; }
  .content     { padding: 54px 4px 140px; }
  #action-dock { padding: 6px 10px; gap: 2px; }
  .dock-btn    { padding: 5px 7px; }
  .dock-icon   { font-size: 18px; }
  .dock-label  { font-size: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ERA UNLOCK CEREMONY
   ══════════════════════════════════════════════════════════════════════════ */

#era-ceremony {
  background: #000;
}

/* Time warp ring around fish */
@keyframes era-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes era-ring-pulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}
#era-warp-ring::before,
#era-warp-ring::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--era-glow, #00E5FF);
  border-right-color: var(--era-glow, #00E5FF);
  animation: era-ring-spin 1.8s linear infinite;
}
#era-warp-ring::after {
  inset: -28px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: var(--era-glow, #00E5FF);
  border-left-color: var(--era-glow, #00E5FF);
  animation-duration: 2.6s;
  animation-direction: reverse;
  opacity: .4;
}

/* Badge pop-in */
@keyframes era-badge-pop {
  0%   { opacity: 0; transform: scale(.4) translateY(20px); }
  60%  { transform: scale(1.1) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.era-badge-visible {
  animation: era-badge-pop .6s cubic-bezier(.175,.885,.32,1.275) forwards !important;
}

/* Multiplier count-up flash */
@keyframes era-mult-flash {
  0%,100% { color: #00FFD1; }
  50%      { color: #fff; text-shadow: 0 0 30px #00FFD1; }
}
.era-mult-flash {
  animation: era-mult-flash .4s ease 3;
}

/* Particle burst */
@keyframes era-particle {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0); }
}
.era-particle {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9001;
  animation: era-particle .9s ease-out forwards;
}

/* Screen flash on unlock */
@keyframes era-screen-flash {
  0%   { opacity: 0; }
  15%  { opacity: .7; }
  100% { opacity: 0; }
}
.era-screen-flash {
  position: fixed;
  inset: 0;
  z-index: 8999;
  pointer-events: none;
  background: #fff;
  animation: era-screen-flash .6s ease forwards;
}

/* Shimmer on era name */
@keyframes era-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
#era-badge-name {
  background: linear-gradient(90deg, #fff 30%, var(--era-glow,#00E5FF) 50%, #fff 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: era-shimmer 2s linear infinite;
}

/* ── DEPTH SYSTEM UI ─────────────────────────────────────────────────────── */

/* Depth badge in level bar */
.depth-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,229,255,.1);
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 8px;
  padding: 2px 7px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #00E5FF;
}

/* Depth change indicator — shown after run */
.depth-up   { color: #00FFD1; }
.depth-down { color: #ff6060; }
.depth-hold { color: #6BAEC8; }

/* Era progress bar in level bar */
.era-progress-wrap {
  margin-top: 3px;
}
.era-progress-bar {
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.era-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .6s ease;
  opacity: .75;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ERA TIMELINE COMPONENT
   Replaces the old LV/XP bar — shows all 7 eras as a horizontal node timeline
   ══════════════════════════════════════════════════════════════════════════════ */

.era-timeline {
  background: rgba(4,14,26,0.95);
  border: 1px solid rgba(0,229,255,0.14);
  border-radius: 14px;
  padding: 10px 12px 9px;
}

/* Top row: story label + current era name */
.era-tl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.era-tl-label {
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #6BAEC8;
  font-weight: 600;
}
.era-tl-current-name {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Node row — all 7 eras in a flex row */
.era-tl-nodes {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-bottom: 2px;
}

/* Full-width track behind nodes */
.era-tl-track {
  position: absolute;
  top: 16px; /* vertically centered on the 34px nodes */
  left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 1px;
  z-index: 0;
  overflow: hidden;
}
.era-tl-track-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 0.6s ease;
}

/* Each era column */
.era-tl-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Node circle */
.era-tl-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  background: #020810;
  border: 2px solid rgba(255,255,255,0.07);
}
.era-tl-node-done {
  border-color: rgba(0,229,255,0.35);
  background: rgba(0,229,255,0.07);
}
.era-tl-node-current {
  border-color: #00E5FF;
  background: rgba(0,229,255,0.18);
  box-shadow: 0 0 12px rgba(0,229,255,0.5), 0 0 4px rgba(0,229,255,0.8);
  width: 36px;
  height: 36px;
  font-size: 17px;
  margin-top: -2px;
}
.era-tl-node-locked {
  opacity: 0.25;
}

/* Pulse ring on current node */
.era-tl-node-current::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,229,255,0.3);
  animation: era-node-pulse 2.2s ease-in-out infinite;
}
@keyframes era-node-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 0;   transform: scale(1.4); }
}

/* Era name label below node */
.era-tl-name {
  font-size: 7px;
  font-weight: 700;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
  transition: color 0.3s;
}
.era-tl-name-done   { color: rgba(0,229,255,0.5); }
.era-tl-name-current{ color: #00E5FF; font-size: 7.5px; }
.era-tl-name-locked { color: rgba(255,255,255,0.18); }

/* ── Progress section (below nodes) ── */
.era-tl-progress {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.era-tl-prog-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.era-tl-prog-left {
  font-size: 10px;
  color: #6BAEC8;
  font-weight: 600;
}
.era-tl-prog-right {
  font-size: 10px;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
}
.era-tl-prog-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The "unfilling" bar */
.era-tl-bar-bg {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
/* Consumed portion — dim, left side */
.era-tl-bar-consumed {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 3px;
  opacity: 0.22;
  transition: width 0.5s ease;
}
/* Remaining portion — bright, right side — this SHRINKS as you progress */
.era-tl-bar-remaining {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  border-radius: 3px;
  transition: width 0.5s ease;
}
/* SACA needed label */
.era-tl-bar-saca {
  font-size: 10px;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  white-space: nowrap;
  min-width: 34px;
  text-align: right;
}

/* Origin reached state */
.era-tl-origin {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #00FFD1;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   STORY SHEET — Sacabambaspis origin + era journey
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ss-hero {
  position: relative;
  padding: 20px 20px 4px;
  text-align: center;
  overflow: hidden;
}
.ss-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(0,229,255,0.07) 0%, rgba(0,153,204,0.04) 40%, transparent 70%);
  pointer-events: none;
}
/* Animated bubbles */
.ss-bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: rgba(0,229,255,0.1);
  animation: ss-bubble-rise var(--d,6s) var(--delay,0s) ease-in infinite;
}
@keyframes ss-bubble-rise {
  0%   { transform: translateY(0) scale(1);   opacity: 0.6; }
  100% { transform: translateY(-100px) scale(0.3); opacity: 0; }
}
/* Swimming fish */
.ss-fish-wrap {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-bottom: 14px;
  animation: ss-fish-swim 3s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(0,229,255,0.55)) drop-shadow(0 0 6px rgba(0,255,209,0.35));
}
@keyframes ss-fish-swim {
  0%,100% { transform: translateY(0)   rotate(-2deg); }
  50%     { transform: translateY(-7px) rotate(2deg); }
}
/* Hero tag */
.ss-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #00E5FF;
  margin-bottom: 10px;
}
.ss-hero-tag-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00E5FF;
  animation: ss-tag-pulse 1.5s ease-in-out infinite;
}
@keyframes ss-tag-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.4; transform:scale(0.7); }
}
.ss-hero-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #C8F0F8;
  line-height: 1.15;
  margin-bottom: 8px;
}
.ss-hero-title span { color: #00FFD1; }
.ss-hero-sub {
  font-size: 13px;
  color: #6BAEC8;
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Manifesto ── */
.ss-manifesto {
  margin: 0 16px 4px;
  background: linear-gradient(135deg, rgba(0,229,255,0.05), rgba(0,153,204,0.03));
  border: 1px solid rgba(0,229,255,0.13);
  border-radius: 16px;
  padding: 16px 18px;
}
.ss-manifesto-line {
  font-size: 13px;
  line-height: 1.75;
  color: #C8F0F8;
}
.ss-manifesto-line em {
  color: #00FFD1;
  font-style: normal;
  font-weight: 700;
}

/* ── Section headers ── */
.ss-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px 10px;
}
.ss-section-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.ss-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6BAEC8;
  white-space: nowrap;
}

/* ── Stats row ── */
.ss-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 16px 4px;
}
.ss-stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,229,255,0.1);
  border-radius: 12px;
  padding: 10px 8px 8px;
  text-align: center;
}
.ss-stat-val {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: #00E5FF;
  line-height: 1;
  margin-bottom: 4px;
}
.ss-stat-label {
  font-size: 9px;
  color: #6BAEC8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Era list ── */
.ss-era-list {
  padding: 0 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-era-card {
  border-radius: 14px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  overflow: hidden;
}
.ss-era-card.ss-era-unlocked {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,229,255,0.1);
}
.ss-era-card.ss-era-current {
  background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.32);
  box-shadow: 0 0 18px rgba(0,229,255,0.07);
}
.ss-era-card.ss-era-current::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 15% 50%, rgba(0,229,255,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.ss-era-card.ss-era-locked {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.05);
}
.ss-era-card.ss-era-origin {
  background: rgba(0,255,209,0.02);
  border: 1px solid rgba(0,255,209,0.08);
}
/* Icon circle */
.ss-era-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.ss-era-icon.ss-icon-unlocked { background: rgba(0,229,255,0.07); border: 1px solid rgba(0,229,255,0.18); }
.ss-era-icon.ss-icon-current  { background: rgba(0,229,255,0.14); border: 1px solid rgba(0,229,255,0.45); box-shadow: 0 0 10px rgba(0,229,255,0.25); }
.ss-era-icon.ss-icon-locked   { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); font-size:16px; color:rgba(255,255,255,0.2); }
.ss-era-icon.ss-icon-origin   { background: rgba(0,255,209,0.04); border: 1px solid rgba(0,255,209,0.15); }
/* Body */
.ss-era-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ss-era-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.ss-era-name { font-size: 13px; font-weight: 700; color: #C8F0F8; }
.ss-era-name.ss-name-locked  { color: rgba(255,255,255,0.2); }
.ss-era-name.ss-name-origin  { color: rgba(0,255,209,0.35); }
.ss-era-badge {
  font-size: 9px; font-weight: 700;
  background: rgba(0,229,255,0.14);
  border: 1px solid rgba(0,229,255,0.28);
  color: #00E5FF;
  border-radius: 5px; padding: 1px 6px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.ss-era-years { font-size: 10px; color: #6BAEC8; margin-bottom: 3px; }
.ss-era-years.ss-years-locked  { color: rgba(255,255,255,0.14); }
.ss-era-years.ss-years-origin  { color: rgba(0,255,209,0.22); }
.ss-era-vibe { font-size: 11px; color: #6BAEC8; line-height: 1.45; }
.ss-era-vibe.ss-vibe-locked  { color: rgba(255,255,255,0.15); }
.ss-era-vibe.ss-vibe-origin  { color: rgba(0,255,209,0.28); font-style: italic; }
/* Right side */
.ss-era-right { flex-shrink: 0; text-align: right; position: relative; z-index: 1; }
.ss-era-check { font-size: 17px; }
.ss-era-saca  { font-size: 9px; color: #6BAEC8; font-family: 'DM Mono', monospace; line-height: 1.5; }
.ss-era-saca b { color: rgba(255,255,255,0.3); font-size: 11px; display: block; }
.ss-era-mystery { font-size: 18px; color: rgba(255,255,255,0.1); letter-spacing: 4px; }

/* ── CTA ── */
.ss-cta {
  position: sticky;
  bottom: 0;
  background: linear-gradient(0deg, #020810 65%, transparent);
  padding: 16px 16px 28px;
}
.ss-cta-btn {
  width: 100%;
  background: linear-gradient(135deg, #00E5FF, #00FFD1);
  border: none;
  border-radius: 14px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: #020810;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: opacity 0.15s;
}
.ss-cta-btn:active { opacity: 0.85; }

/* ── Overlay tap prompt blink ── */
@keyframes tap-prompt-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}