/* ─────────────────────────────────────────────────────────
   Time-Stack Monoliths — Production CSS
   Aesthetic: Cyber-industrial command centre. Dark, precise,
   glowing. Rajdhani headlines. Exo 2 body. Share Tech Mono data.
───────────────────────────────────────────────────────── */

:root {
  --bg:        #000308;
  --surface:   #020610;
  --surface2:  #040c1a;
  --border:    rgba(0, 180, 255, 0.12);
  --border2:   rgba(0, 180, 255, 0.28);
  --fg:        #cde4ff;
  --fg2:       #6a8aaa;
  --cyan:      #00d4ff;
  --cyan-dim:  rgba(0, 212, 255, 0.18);
  --violet:    #a855f7;
  --violet-dim:rgba(168, 85, 247, 0.18);
  --magenta:   #f0abfc;
  --green:     #22d3a5;
  --amber:     #fbbf24;
  --red:       #f87171;
  --glow-c:    0 0 20px rgba(0,212,255,.35);
  --glow-v:    0 0 20px rgba(168,85,247,.35);
  --font-disp: 'Rajdhani', sans-serif;
  --font-body: 'Exo 2', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --hud-h:     64px;
  --foot-h:    36px;
}

/* ── Reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: var(--font-disp); border: none; outline: none; background: none; }

/* ── App shell ────────────────────────────────────── */
#app { height: 100%; display: flex; flex-direction: column; }

/* ══════════════════════════════════════════════════════
   HUD — top bar
══════════════════════════════════════════════════════ */
.hud {
  height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(180deg,
    rgba(0,3,12,.98) 0%,
    rgba(0,3,12,.82) 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}

/* top accent rule */
.hud::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cyan) 20%,
    var(--violet) 60%,
    transparent 100%);
  opacity: .55;
}
/* bottom inner glow */
.hud::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,212,255,.18) 40%,
    transparent 100%);
}

/* ── Brand ────────────────────────────────────────── */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}

.logo-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.logo-gem {
  width: 38px; height: 38px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 35% 35%, rgba(0,212,255,.95) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 65%, rgba(168,85,247,.90) 0%, transparent 55%),
    linear-gradient(135deg, #040c22 0%, #010208 100%);
  border: 1px solid rgba(0,212,255,.35);
  box-shadow:
    0 0 12px rgba(0,212,255,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.logo-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 1px solid rgba(0,212,255,.20);
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%       { opacity: .8; transform: scale(1.06); }
}

.brand-text { user-select: none; }
.brand-sub {
  font-family: var(--font-disp);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--fg2);
  text-transform: uppercase;
}
.brand-name {
  font-family: var(--font-disp);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg);
  line-height: 1.1;
}
.brand-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .10em;
  color: var(--cyan);
  opacity: .70;
  text-transform: lowercase;
  margin-top: 1px;
}

/* ── Stats rail ───────────────────────────────────── */
.stats-rail {
  display: flex;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}

.stat-card {
  flex: 1;
  min-width: 0;
  padding: 6px 12px 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: border-color .25s, box-shadow .25s;
}
.stat-card:hover {
  border-color: var(--border2);
  box-shadow: var(--glow-c);
}
.stat-card.narrow { flex: 0 0 76px; }
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.stat-card:hover::before { opacity: .5; }

.stat-label {
  font-family: var(--font-disp);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--fg2);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.stat-value {
  font-family: var(--font-disp);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  background: linear-gradient(135deg, #e8f6ff 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-value.mono {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
}

.stat-bar {
  margin-top: 4px;
  height: 2px;
  background: rgba(255,255,255,.05);
  border-radius: 2px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), rgba(0,212,255,.4));
  border-radius: 2px;
  width: 0%;
  transition: width .8s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 6px var(--cyan);
}
.stat-bar-fill.accent2 {
  background: linear-gradient(90deg, var(--violet), rgba(168,85,247,.4));
  box-shadow: 0 0 6px var(--violet);
}

.stat-indicator {
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: indPulse 2s ease-in-out infinite;
}
.stat-indicator.accent3 {
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
}
@keyframes indPulse {
  0%,100% { opacity: .4; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.4); }
}

/* ── Controls ─────────────────────────────────────── */
.hud-controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--fg2);
  cursor: pointer;
  transition: all .2s;
  min-width: 52px;
}
.ctrl-btn:hover {
  color: var(--fg);
  border-color: var(--border2);
  background: rgba(0,212,255,.06);
  box-shadow: var(--glow-c);
}
.ctrl-btn:active { transform: translateY(1px); }
.ctrl-icon {
  font-size: 16px;
  line-height: 1;
}
.ctrl-label {
  font-family: var(--font-disp);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15em;
}

/* ══════════════════════════════════════════════════════
   Stage
══════════════════════════════════════════════════════ */
.stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

#c {
  width: 100%;
  height: 100%;
  display: block;
}

/* CRT scanlines */
.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.03) 0px,
    rgba(0,0,0,.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 5;
}

/* Vignette */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 80% at 50% 50%,
    transparent 55%,
    rgba(0,0,8,.75) 100%
  );
  pointer-events: none;
  z-index: 4;
}

/* ── Status cluster ───────────────────────────────── */
.status-cluster {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 10;
  pointer-events: none;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0,3,12,.80);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  white-space: nowrap;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg2);
  flex-shrink: 0;
  transition: background .4s, box-shadow .4s;
}
.status-dot.live {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: dotPulse 2s ease-in-out infinite;
}
.status-dot.warn {
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
}
@keyframes dotPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .4; }
}

.hint-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(106,138,170,.55);
  letter-spacing: .04em;
}

/* ── Epoch badge ──────────────────────────────────── */
.epoch-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 8px 14px;
  background: rgba(0,3,12,.75);
  border: 1px solid rgba(168,85,247,.25);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  z-index: 10;
  text-align: right;
}
.epoch-label {
  font-family: var(--font-disp);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--violet);
  text-transform: uppercase;
}
.epoch-value {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--fg);
  line-height: 1.2;
}

/* ── Legend ───────────────────────────────────────── */
.legend {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
  pointer-events: none;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-disp);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--fg2);
  text-transform: uppercase;
}
.legend-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot.cyan    { background: var(--cyan);    box-shadow: 0 0 8px var(--cyan); }
.legend-dot.violet  { background: var(--violet);  box-shadow: 0 0 8px var(--violet); }
.legend-dot.magenta { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

/* ══════════════════════════════════════════════════════
   Footer
══════════════════════════════════════════════════════ */
.footer {
  height: var(--foot-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(0,3,12,.90);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}
.footer-live {
  font-family: var(--font-disp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--cyan);
  animation: dotPulse 2.5s ease-in-out infinite;
  margin-right: 10px;
}
.footer-caption {
  font-family: var(--font-disp);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--fg2);
}
.footer-center {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(106,138,170,.55);
  letter-spacing: .06em;
}
.footer-right {
  font-family: var(--font-disp);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(106,138,170,.50);
}

/* ── Mono helper ──────────────────────────────────── */
.mono { font-family: var(--font-mono) !important; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .brand-name { font-size: 14px; }
  .stat-value { font-size: 18px; }
  .stat-card  { padding: 5px 8px 6px; }
  .stat-card.narrow { flex: 0 0 62px; }
  .legend, .epoch-badge { display: none; }
}
@media (max-width: 640px) {
  .hud { gap: 8px; padding: 0 10px; }
  .brand { padding-right: 10px; }
  .stats-rail { gap: 5px; }
  #cardRewards { display: none; }
  .footer-center, .footer-right { display: none; }
}

/* ══════════════════════════════════════════════════════
   Music Player — Multi-track
══════════════════════════════════════════════════════ */
.music-player {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: rgba(0,3,12,.88);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(22px);
  z-index: 10;
  pointer-events: all;
  min-width: 240px;
  max-width: 300px;
  box-shadow: 0 12px 40px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.music-player:hover { border-color: var(--border2); box-shadow: 0 12px 50px rgba(0,0,0,.7), var(--glow-c); }

.music-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
}

.music-vis {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  flex-shrink: 0;
}
.music-vis span {
  display: block;
  width: 3px;
  background: var(--cyan);
  border-radius: 2px;
  height: 3px;
  transition: height .15s;
}
.music-vis.playing span:nth-child(1){animation:mb1 .70s ease-in-out infinite;}
.music-vis.playing span:nth-child(2){animation:mb2 .85s ease-in-out infinite .10s;}
.music-vis.playing span:nth-child(3){animation:mb3 .60s ease-in-out infinite .05s;}
.music-vis.playing span:nth-child(4){animation:mb2 .95s ease-in-out infinite .20s;}
.music-vis.playing span:nth-child(5){animation:mb1 .75s ease-in-out infinite .15s;}
.music-vis.playing span:nth-child(6){animation:mb3 .82s ease-in-out infinite .08s;}
.music-vis.playing span:nth-child(7){animation:mb2 .68s ease-in-out infinite .25s;}
@keyframes mb1{0%,100%{height:3px}50%{height:14px}}
@keyframes mb2{0%,100%{height:5px}50%{height:19px}}
@keyframes mb3{0%,100%{height:8px}50%{height:13px}}

.music-info { flex:1; min-width:0; }
.music-title {
  font-family: var(--font-disp);
  font-size: 12px; font-weight: 700;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .04em;
}
.music-sub {
  font-family: var(--font-mono);
  font-size: 9px; color: var(--fg2);
  letter-spacing: .04em; margin-top: 2px;
  white-space: nowrap;
}

.music-controls {
  display: flex; align-items: center; gap: 5px;
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--border);
}
.music-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--fg2); cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.music-btn:hover { background: rgba(0,212,255,.12); border-color: var(--border2); color: var(--cyan); box-shadow: var(--glow-c); }
/* Play/pause is slightly bigger */
#musicPlayPause { width: 30px; height: 30px; font-size: 12px; color: var(--cyan); border-color: var(--border2); }
#musicPlayPause:hover { background: rgba(0,212,255,.20); }
.music-btn-sm { width: 22px; height: 22px; font-size: 9px; }
/* Shuffle active glow */
#musicShuffle.active { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.music-vol {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--surface2); outline: none; cursor: pointer; margin-left: 2px;
}
.music-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan); cursor: pointer;
}
.music-vol::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan); cursor: pointer;
  border: none;
}

/* Playlist */
.music-playlist {
  max-height: 120px;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,255,.2) transparent;
}
.music-playlist::-webkit-scrollbar { width: 3px; }
.music-playlist::-webkit-scrollbar-thumb { background: rgba(0,212,255,.2); border-radius: 2px; }
.pl-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background .15s;
}
.pl-item:hover { background: rgba(0,212,255,.06); }
.pl-item.active { background: rgba(0,212,255,.10); }
.pl-item.active .pl-title { color: var(--cyan); }
.pl-num {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--fg2); flex-shrink: 0; width: 16px;
}
.pl-title {
  font-family: var(--font-disp); font-size: 11px;
  color: var(--fg2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: color .15s;
}

/* Music button active state (HUD) */
.ctrl-btn.music-active {
  color: var(--cyan);
  border-color: var(--border2);
  background: rgba(0,212,255,.08);
  box-shadow: var(--glow-c);
}

/* ── District legend additions ───────────────── */
.legend-dot.teal    { background:#00ccaa; box-shadow:0 0 8px #00ccaa; }
.legend-dot.amber   { background:#ff7700; box-shadow:0 0 8px #ff7700; }
.legend-dot.rose    { background:#ff0055; box-shadow:0 0 8px #ff0055; }
.legend-dot.green2  { background:#00ffcc; box-shadow:0 0 8px #00ffcc; }
.legend-title {
  font-family:var(--font-disp); font-size:9px; font-weight:700;
  letter-spacing:.18em; color:var(--fg2); text-transform:uppercase;
  margin-bottom:2px;
}

/* ── Cinematic intro title ───────────────────────────────────────── */
.intro-title{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:60;
  pointer-events:none;
  opacity:0;
  text-align:center;
  filter: drop-shadow(0 0 24px rgba(120, 220, 255, .25));
}
.intro-title.play{
  animation:introTitle 9s ease 0s 1 both;
}
.intro-line{
  font-family:var(--font-disp);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:.82;
  font-size:clamp(160px, 28vw, 560px);
  position:relative;
  padding:0 .08em;
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(180,245,255,.96) 35%, rgba(160,140,255,.90) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 24px rgba(0, 212, 255, .12));
}
.intro-line + .intro-line{ margin-top:10px; }

/* chromatic + glitch layers */
.intro-line::before,
.intro-line::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  -webkit-text-fill-color:transparent;
  background:inherit;
  -webkit-background-clip:text;
  background-clip:text;
  opacity:.55;
  pointer-events:none;
  mix-blend-mode:screen;
}
.intro-line::before{ transform:translateX(-2px); filter: drop-shadow(0 0 10px rgba(0,255,255,.25)); }
.intro-line::after { transform:translateX( 2px); filter: drop-shadow(0 0 10px rgba(255,0,160,.22)); }

.intro-title.play .intro-line{
  animation:introFlicker 9s ease 0s 1 both;
}
.intro-title.play .intro-line::before{
  animation:introGlitchL 9s ease 0s 1 both;
}
.intro-title.play .intro-line::after{
  animation:introGlitchR 9s ease 0s 1 both;
}

@keyframes introTitle{
  0%   { opacity:0; transform:scale(.94) translateY(28px); filter:blur(18px) drop-shadow(0 0 60px rgba(0,212,255,.10)); }
  12%  { opacity:0; filter:blur(14px); }
  28%  { opacity:1; transform:scale(1) translateY(0);   filter:blur(0) drop-shadow(0 0 80px rgba(0,212,255,.40)); }
  65%  { opacity:1; transform:scale(1) translateY(0); filter:blur(0) drop-shadow(0 0 60px rgba(120,90,255,.30)); }
  82%  { opacity:.95; }
  100% { opacity:0; transform:scale(1.02) translateY(-20px); filter:blur(12px) drop-shadow(0 0 30px rgba(120,90,255,.15)); }
}

@keyframes introFlicker{
  0%, 10% { opacity:0; }
  18%  { opacity:.05; }
  20%  { opacity:.9; }
  22%  { opacity:.6; }
  25%  { opacity:1; }
  45%  { opacity:.97; }
  52%  { opacity:1; }
  78%  { opacity:.98; }
  84%  { opacity:1; }
  92%  { opacity:.95; }
  100% { opacity:0; }
}

@keyframes introGlitchL{
  0%, 15% { transform:translateX(-2px); opacity:0; }
  20% { opacity:.60; }
  28% { transform:translateX(-7px) skewX(-5deg); }
  32% { transform:translateX(-2px) skewX(0deg); }
  68% { transform:translateX(-2px); opacity:.55; }
  75% { transform:translateX(-9px) skewX(-7deg); opacity:.30; }
  100%{ transform:translateX(-2px); opacity:0; }
}

@keyframes introGlitchR{
  0%, 15% { transform:translateX(2px); opacity:0; }
  20% { opacity:.60; }
  28% { transform:translateX(8px) skewX(6deg); }
  32% { transform:translateX(2px) skewX(0deg); }
  68% { transform:translateX(2px); opacity:.55; }
  75% { transform:translateX(10px) skewX(8deg); opacity:.30; }
  100%{ transform:translateX(2px); opacity:0; }
}

/* ══════════════════════════════════════════════════════
   Click-to-Enter Overlay
══════════════════════════════════════════════════════ */
.enter-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse 130% 120% at 50% 50%,
    #000820 0%, #000208 60%, #000000 100%);
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1), filter 1.2s;
  cursor:pointer;
}
.enter-overlay.hiding{
  opacity:0;
  filter:blur(8px);
  pointer-events:none;
}

.enter-scanlines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.045) 0px, rgba(0,0,0,.045) 1px,
    transparent 1px, transparent 2px
  );
  pointer-events:none;
  z-index:1;
}
.enter-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,.85) 100%);
  pointer-events:none; z-index:1;
}

.enter-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  animation:enterReveal 2s ease 0.3s both;
}

@keyframes enterReveal{
  from{ opacity:0; transform:translateY(20px); filter:blur(6px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0); }
}

.enter-gem{
  width:56px; height:56px;
  border-radius:14px;
  background:
    radial-gradient(ellipse at 35% 35%, rgba(0,212,255,.95) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 65%, rgba(168,85,247,.90) 0%, transparent 55%),
    linear-gradient(135deg, #040c22 0%, #010208 100%);
  border:1px solid rgba(0,212,255,.40);
  box-shadow:
    0 0 30px rgba(0,212,255,.35),
    0 0 60px rgba(168,85,247,.20),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation:gemPulse 3.5s ease-in-out infinite;
  margin-bottom:8px;
}
@keyframes gemPulse{
  0%,100%{ box-shadow:0 0 30px rgba(0,212,255,.35),0 0 60px rgba(168,85,247,.20),inset 0 1px 0 rgba(255,255,255,.06); }
  50%    { box-shadow:0 0 55px rgba(0,212,255,.60),0 0 90px rgba(168,85,247,.35),inset 0 1px 0 rgba(255,255,255,.08); }
}

.enter-brand{
  font-family:var(--font-disp);
  font-size:11px; font-weight:600;
  letter-spacing:.28em;
  color:var(--fg2);
  text-transform:uppercase;
}

.enter-title{
  font-family:var(--font-disp);
  font-size:clamp(56px,10vw,120px);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(180,245,255,.95) 40%, rgba(160,140,255,.88) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 28px rgba(0,212,255,.30));
}
.enter-title span{
  display:block;
}

.enter-subtitle{
  font-family:var(--font-disp);
  font-size:13px; font-weight:500;
  letter-spacing:.32em;
  color:rgba(100,160,200,.65);
  text-transform:uppercase;
  margin-top:4px;
}

.enter-btn{
  display:flex; align-items:center; gap:10px;
  margin-top:28px;
  padding:14px 36px;
  border-radius:999px;
  background:rgba(0,212,255,.08);
  border:1px solid rgba(0,212,255,.45);
  color:var(--cyan);
  cursor:pointer;
  font-family:var(--font-disp);
  font-size:15px; font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
  transition:all .25s;
  box-shadow:0 0 20px rgba(0,212,255,.15),inset 0 1px 0 rgba(255,255,255,.05);
  animation:btnPulse 3s ease-in-out infinite 1s;
}
.enter-btn:hover{
  background:rgba(0,212,255,.18);
  border-color:rgba(0,212,255,.85);
  box-shadow:0 0 40px rgba(0,212,255,.40),inset 0 1px 0 rgba(255,255,255,.08);
  transform:scale(1.04);
}
.enter-btn:active{ transform:scale(.98); }
.enter-btn-icon{ font-size:12px; opacity:.8; }
.enter-btn-text{ letter-spacing:.22em; }
@keyframes btnPulse{
  0%,100%{ box-shadow:0 0 20px rgba(0,212,255,.15),inset 0 1px 0 rgba(255,255,255,.05); }
  50%    { box-shadow:0 0 35px rgba(0,212,255,.32),inset 0 1px 0 rgba(255,255,255,.07); }
}

.enter-hint{
  font-family:var(--font-mono);
  font-size:10px;
  color:rgba(106,138,170,.40);
  letter-spacing:.08em;
  margin-top:4px;
  animation:hintBlink 4s ease-in-out infinite 2s;
}
@keyframes hintBlink{
  0%,80%,100%{ opacity:1; }
  40%{ opacity:.35; }
}


/* Range filter links (footer) */
.range-links{
  display:inline-flex;
  gap:6px;
  margin-left:10px;
  vertical-align:middle;
}
.range-link{
  font-family: var(--font-disp);
  font-size: 10px;
  letter-spacing: .10em;
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 10px;
  border: 1px solid rgba(120,160,190,.28);
  color: rgba(150,190,220,.75);
  transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.range-link:hover{
  transform: translateY(-1px);
  border-color: rgba(0,220,255,.55);
  color: rgba(220,250,255,.92);
  background: rgba(0,220,255,.06);
}
.range-link.active{
  border-color: rgba(0,220,255,.75);
  color: rgba(0,220,255,.95);
  background: rgba(0,220,255,.10);
}
@media (max-width: 520px){
  .range-links{ gap:4px; margin-left:6px; }
  .range-link{ padding: 3px 5px; font-size: 9px; }
}

/* ══════════════════════════════════════════════════════
   Tower Hover Tooltip
══════════════════════════════════════════════════════ */
.tower-tooltip {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  min-width: 192px;
  padding: 0;
  background: linear-gradient(160deg, rgba(0,8,28,.97) 0%, rgba(0,4,18,.99) 100%);
  border: 1px solid rgba(0,212,255,.38);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(0,212,255,.08),
    0 8px 32px rgba(0,0,0,.65),
    0 0 24px rgba(0,180,255,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  transform: translate(-50%, -108%);
  opacity: 0;
  transition: opacity .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
  will-change: opacity, transform;
}
.tower-tooltip.tt-visible {
  opacity: 1;
  transform: translate(-50%, -112%);
}
.tower-tooltip.tt-new {
  animation: ttPop .22s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ttPop {
  from { opacity:0; transform: translate(-50%, -104%) scale(.90); }
  to   { opacity:1; transform: translate(-50%, -112%) scale(1); }
}

.tt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(0,212,255,.12);
  background: rgba(0,212,255,.05);
}
.tt-icon {
  font-size: 11px;
  color: var(--cyan);
  opacity: .8;
}
.tt-title {
  font-family: var(--font-disp);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--fg2);
  text-transform: uppercase;
  flex: 1;
}
.tt-idx {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(0,212,255,.55);
}

.tt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 12px;
}
.tt-row:first-of-type { padding-top: 7px; }
.tt-label {
  font-family: var(--font-disp);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--fg2);
  text-transform: uppercase;
  flex-shrink: 0;
}
.tt-val {
  font-family: var(--font-disp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #e8f6ff 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: right;
}
.tt-val.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
}
.tt-tps .tt-val {
  font-size: 22px;
  background: linear-gradient(135deg, #a0f0ff 0%, #00d4ff 40%, #9966ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.tt-time {
  font-size: 9px !important;
  color: var(--fg2);
  background: none !important;
  -webkit-text-fill-color: var(--fg2);
}

.tt-bar-wrap {
  height: 2px;
  background: rgba(255,255,255,.05);
  margin: 6px 12px 8px;
  border-radius: 2px;
  overflow: hidden;
}
.tt-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 8px var(--cyan);
  width: 0%;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}