:root {
  --bg-primary: #050505;
  --bg-secondary: #0a0a0a;
  --bg-card: #111;
  --bg-card-hover: #181818;
  --text-primary: #fff;
  --text-secondary: #888;
  --text-muted: #555;
  --accent-green: #00ff88;
  --accent-green-dim: rgba(0,255,136,0.12);
  --accent-red: #ff3366;
  --accent-red-dim: rgba(255,51,102,0.12);
  --accent-yellow: #ffcc00;
  --border-color: rgba(255,255,255,0.07);
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --panel-w: 300px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-heading);background:#000;color:var(--text-primary);overflow:hidden;height:100vh;height:100dvh}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
button{font-family:var(--font-heading);cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#222;border-radius:99px}
::selection{background:var(--accent-green-dim);color:var(--accent-green)}

/* =========== LAYOUT =========== */

.game-layout{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}

/* =========== EARTH PANEL =========== */

.earth-panel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 45% 45%,#0a0e18 0%,#020204 100%);
  overflow:hidden;
}

/* Starfield via pseudo-elements */
.earth-panel::before,.earth-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
}
.earth-panel::before{
  background-image:
    radial-gradient(1px 1px at 5% 12%,rgba(255,255,255,0.3),transparent),
    radial-gradient(1px 1px at 12% 67%,rgba(255,255,255,0.2),transparent),
    radial-gradient(1px 1px at 18% 35%,rgba(255,255,255,0.15),transparent),
    radial-gradient(1px 1px at 25% 82%,rgba(255,255,255,0.18),transparent),
    radial-gradient(1px 1px at 32% 8%,rgba(255,255,255,0.12),transparent),
    radial-gradient(1px 1px at 40% 55%,rgba(255,255,255,0.22),transparent),
    radial-gradient(1px 1px at 48% 92%,rgba(255,255,255,0.14),transparent),
    radial-gradient(1px 1px at 55% 18%,rgba(255,255,255,0.25),transparent),
    radial-gradient(1px 1px at 62% 72%,rgba(255,255,255,0.16),transparent),
    radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,0.2),transparent),
    radial-gradient(1px 1px at 78% 88%,rgba(255,255,255,0.12),transparent),
    radial-gradient(1px 1px at 85% 25%,rgba(255,255,255,0.18),transparent),
    radial-gradient(1px 1px at 92% 60%,rgba(255,255,255,0.15),transparent),
    radial-gradient(1px 1px at 97% 5%,rgba(255,255,255,0.22),transparent);
}
.earth-panel::after{
  background-image:
    radial-gradient(1px 1px at 8% 45%,rgba(255,255,255,0.1),transparent),
    radial-gradient(1px 1px at 15% 20%,rgba(255,255,255,0.08),transparent),
    radial-gradient(1.5px 1.5px at 22% 75%,rgba(200,220,255,0.15),transparent),
    radial-gradient(1px 1px at 35% 30%,rgba(255,255,255,0.12),transparent),
    radial-gradient(1px 1px at 42% 62%,rgba(255,255,255,0.08),transparent),
    radial-gradient(1.5px 1.5px at 58% 48%,rgba(200,210,255,0.12),transparent),
    radial-gradient(1px 1px at 65% 15%,rgba(255,255,255,0.1),transparent),
    radial-gradient(1px 1px at 72% 82%,rgba(255,255,255,0.14),transparent),
    radial-gradient(1.5px 1.5px at 82% 52%,rgba(180,200,255,0.1),transparent),
    radial-gradient(1px 1px at 88% 38%,rgba(255,255,255,0.08),transparent),
    radial-gradient(1px 1px at 95% 78%,rgba(255,255,255,0.12),transparent);
}

/* GDP floating over Earth */
.ep-gdp{position:absolute;top:24px;left:50%;transform:translateX(-50%);text-align:center;z-index:2}
.ep-gdp-label{font-size:10px;text-transform:uppercase;letter-spacing:0.15em;color:var(--text-muted);display:block}
.ep-gdp-value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(28px,4vw,42px);font-weight:700;color:var(--accent-green);
  letter-spacing:-0.03em;line-height:1.1;
  animation:gdpPulse 4s ease-in-out infinite;white-space:nowrap;
}

/* Earth container */
#earth-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;cursor:grab;touch-action:none}
#earth-canvas:active{cursor:grabbing}
#d3-globe-svg{display:block;width:100%;height:100%;overflow:visible}
.d3-country{transition:fill 1s ease,opacity 0.8s ease}

/* Feed state changes */
.twt-desperate .twt-text{color:rgba(255,150,150,0.9)}
.twt-glitch{animation:twtGlitch 3s infinite}
@keyframes twtGlitch{0%,95%,100%{opacity:1;transform:none}96%{opacity:0.6;transform:translateX(-2px)}97%{opacity:0.8;transform:translateX(2px)}}
.feed-glitch{position:relative}
.feed-glitch::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,0,0,0.03) 3px,rgba(255,0,0,0.03) 4px);
  animation:feedStatic 0.5s steps(4) infinite}
@keyframes feedStatic{0%{background-position:0 0}100%{background-position:0 8px}}

/* Floating emojis from globe reactions */
.d3-float-emoji{
  position:absolute;z-index:12;pointer-events:none;
  font-size:18px;
  animation:d3EmojiFloat 2s ease-out forwards;
}
@keyframes d3EmojiFloat{
  0%{opacity:1;transform:translateY(0) scale(1)}
  30%{opacity:1;transform:translateY(-30px) scale(1.1)}
  100%{opacity:0;transform:translateY(-90px) translateX(var(--drift,0px)) scale(0.4)}
}
/* Country shake */
@keyframes countryShake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-3px,1px)}
  20%{transform:translate(3px,-1px)}
  30%{transform:translate(-2px,-1px)}
  40%{transform:translate(2px,1px)}
  50%{transform:translate(-1px,0)}
  60%{transform:translate(1px,0)}
}
.earth-container{display:none}
.earth-glow,.earth-void,.earth-feature,.earth-land{display:none}

.earth-status{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:13px;color:rgba(100,160,255,0.4);text-align:center;white-space:nowrap;
  transition:color 0.6s ease;z-index:4;
}

/* =========== DELETION INFO TOAST =========== */

.deletion-info{
  position:absolute;bottom:20px;left:50%;z-index:10;
  transform:translateX(-50%) translateY(20px);
  width:90%;max-width:460px;
  background:rgba(12,12,12,0.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-color);border-radius:16px;
  padding:16px 20px;
  opacity:0;pointer-events:none;
  transition:transform 0.4s var(--ease-out),opacity 0.35s ease;
}
.deletion-info.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

.di-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.di-emoji{font-size:36px;line-height:1}
.di-name{font-size:16px;font-weight:700;letter-spacing:-0.02em}
.di-label{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--accent-red)}
.di-gdp{margin-left:auto;font-size:20px;font-weight:700;color:var(--accent-red);white-space:nowrap}

.di-consequence{font-size:14px;color:var(--text-primary);font-style:italic;margin-bottom:6px;line-height:1.4}
.di-chain{font-size:12px;color:var(--text-muted);line-height:1.4}

/* =========== ITEMS PANEL =========== */

/* =========== FLOATING ITEMS PANEL =========== */

.items-panel{
  position:fixed !important;
  top:10px !important;
  right:10px !important;
  left:auto !important;
  bottom:10px !important;
  z-index:9000;
  width:310px;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(12,16,28,0.96) 0%,rgba(8,11,20,0.98) 100%);
  border:2px solid rgba(60,100,160,0.2);
  border-top:3px solid rgba(80,130,200,0.3);
  border-radius:4px;overflow:hidden;
  box-shadow:0 0 30px rgba(0,0,0,0.6),inset 0 1px 0 rgba(80,130,200,0.1),inset 0 -1px 0 rgba(0,0,0,0.3),0 0 60px rgba(20,40,80,0.15);
  transition:transform 0.35s var(--ease-out),opacity 0.3s ease;
}
.items-panel.minimized{transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none}
.items-panel.intro-locked{pointer-events:none;opacity:0.4;filter:grayscale(0.6) brightness(0.7);transition:opacity 0.6s ease,filter 0.6s ease}

/* Console titlebar — spaceship style */
.fp-titlebar{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:linear-gradient(180deg,rgba(25,35,55,0.9) 0%,rgba(15,22,38,0.95) 100%);
  border-bottom:2px solid rgba(60,100,160,0.15);
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  user-select:none;-webkit-user-select:none;
}
.fp-dot{width:6px;height:6px;border-radius:50%;box-shadow:0 0 4px currentColor}
.fp-dot-r{background:#ff3b30;color:#ff3b30}
.fp-dot-y{background:#ffcc00;color:#ffcc00}
.fp-dot-g{background:#00ff88;color:#00ff88}
.fp-title{flex:1;font-size:9px;letter-spacing:0.18em;color:rgba(80,140,220,0.5);font-weight:700;text-align:center;text-transform:uppercase}
.fp-minimize{background:none;border:1px solid rgba(80,120,180,0.15);border-radius:3px;color:rgba(80,140,220,0.4);font-size:12px;cursor:pointer;padding:2px 6px}
.fp-minimize:hover{color:rgba(80,140,220,0.8);border-color:rgba(80,120,180,0.3)}

/* Restore button (when minimized) */
.fp-restore{
  position:fixed;top:14px;right:14px;z-index:9000;
  padding:8px 16px;
  background:rgba(8,12,20,0.85);border:1px solid rgba(80,120,180,0.15);border-radius:8px;
  font-size:11px;font-weight:600;letter-spacing:0.06em;color:var(--accent-green);
  cursor:pointer;display:flex;align-items:center;gap:6px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:all 0.2s ease;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.fp-restore:hover{background:rgba(0,255,136,0.08);border-color:rgba(0,255,136,0.25)}
.fp-restore.hidden{display:none}

.panel-head{padding:10px 12px 8px;border-bottom:2px solid rgba(60,100,160,0.1);background:rgba(10,15,25,0.5)}
.panel-logo{font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:10px}
.panel-logo span{margin-left:4px}

.panel-stats{display:flex;gap:3px}
.ps-row{flex:1;background:rgba(15,22,35,0.8);border:1px solid rgba(60,100,160,0.1);border-radius:3px;padding:5px 8px;display:flex;flex-direction:column;gap:1px}
.ps-label{font-size:8px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(80,140,220,0.4);font-weight:600}
.ps-val{font-size:14px;font-weight:700;color:rgba(80,200,255,0.9);text-shadow:0 0 8px rgba(80,200,255,0.2)}

.panel-tiers{flex:1;overflow-y:auto;padding:10px 10px 10px;scrollbar-width:thin;scrollbar-color:rgba(60,100,160,0.2) transparent}

.panel-foot{padding:8px 12px;border-top:2px solid rgba(60,100,160,0.1);background:rgba(10,15,25,0.5)}
.pf-text{font-size:10px;color:rgba(80,140,220,0.4);display:block;margin-bottom:4px;letter-spacing:0.05em;font-weight:600}
.pf-text strong{color:var(--accent-red);font-family:var(--font-mono);text-shadow:0 0 6px rgba(255,51,102,0.3)}
.pf-bar-track{height:4px;background:rgba(15,22,35,0.8);border:1px solid rgba(60,100,160,0.08);border-radius:2px;overflow:hidden}
.pf-bar{height:100%;width:0%;background:linear-gradient(90deg,#ff3366,#ff6644);border-radius:2px;transition:width 0.6s var(--ease-out);box-shadow:0 0 8px rgba(255,51,102,0.3)}

/* =========== TIERS =========== */

.tier-section{margin-bottom:16px}
.tier-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;padding:4px 6px;background:rgba(15,22,35,0.6);border:1px solid rgba(60,100,160,0.08);border-radius:3px}
.tier-label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:rgba(200,220,255,0.8)}
.tier-emoji{font-size:14px;line-height:1}
.tier-count{font-size:10px;color:rgba(80,140,220,0.4);font-family:var(--font-mono)}
.tier-progress{height:3px;background:rgba(15,22,35,0.8);border-radius:2px;overflow:hidden;margin-bottom:8px;border:1px solid rgba(60,100,160,0.06)}
.tier-progress-fill{height:100%;border-radius:2px;transition:width 0.6s var(--ease-out)}

/* =========== ITEM CARDS =========== */

.items-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}

.item-card{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  background:linear-gradient(180deg,rgba(20,28,42,0.9) 0%,rgba(14,20,32,0.95) 100%);
  border:1px solid rgba(60,100,160,0.12);border-radius:4px;
  cursor:pointer;
  transition:all 0.2s ease;
  user-select:none;-webkit-user-select:none;
  box-shadow:inset 0 1px 0 rgba(80,130,200,0.06);
}
.item-card:hover{background:linear-gradient(180deg,rgba(25,35,55,0.95) 0%,rgba(18,25,40,1) 100%);border-color:rgba(80,140,220,0.25);transform:scale(1.02);box-shadow:0 0 12px var(--card-glow,rgba(80,140,220,0.1)),inset 0 1px 0 rgba(80,130,200,0.1)}
.item-card:active{transform:scale(0.97);transition-duration:0.08s}

.card-emoji{font-size:22px;line-height:1;flex-shrink:0;transition:transform 0.3s ease}
.item-card:hover .card-emoji{animation:emojiBounce 0.4s var(--ease-bounce)}
.card-info{display:flex;flex-direction:column;min-width:0}
.card-name{font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-gdp{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}

.item-card[data-tier="1"]{--card-glow:rgba(0,255,136,0.08)}
.item-card[data-tier="2"]{--card-glow:rgba(255,204,0,0.08)}
.item-card[data-tier="3"]{--card-glow:rgba(51,136,255,0.08)}
.item-card[data-tier="4"]{--card-glow:rgba(255,136,68,0.08)}
.item-card[data-tier="5"]{--card-glow:rgba(68,221,255,0.08)}
.item-card[data-tier="6"]{--card-glow:rgba(204,68,255,0.08)}

.item-card.deleted{cursor:default;opacity:0.25;border-color:transparent;background:rgba(255,51,102,0.03);pointer-events:none}
.item-card.deleted:hover{transform:none;box-shadow:none}
.item-card.deleted .card-emoji{filter:grayscale(1) brightness(0.5)}
.item-card.deleted .card-name{text-decoration:line-through;text-decoration-color:var(--accent-red);color:var(--text-muted)}

/* Locked tier with XP bar */
.tier-locked{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px;border:1px dashed rgba(60,100,160,0.12);border-radius:4px;text-align:center;background:rgba(10,15,25,0.4)}
.lock-badge{font-size:20px;color:var(--text-muted);opacity:0.5}
.tier-locked .lock-name{font-size:12px;font-weight:600;color:var(--text-muted)}
.lock-xp{width:100%;height:6px;background:#1a1a1a;border-radius:99px;overflow:hidden}
.lock-xp-fill{height:100%;border-radius:99px;transition:width 0.6s var(--ease-out);box-shadow:0 0 8px rgba(0,255,136,0.2)}
.tier-locked .lock-req{font-size:10px;color:var(--text-muted);opacity:0.6;font-family:var(--font-mono)}

/* =========== EFFECTS =========== */

/* =========== GDP HANGING HUD =========== */

.gdp-hud{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:12;
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;
}
/* Wire hanging from ceiling */
.gdp-hud-wire{
  width:2px;height:18px;
  background:linear-gradient(180deg,rgba(80,120,180,0.25),rgba(0,255,136,0.15));
  box-shadow:0 0 4px rgba(0,255,136,0.1);
}
/* Main GDP screen */
.gdp-hud-screen{
  text-align:center;
  padding:10px 28px 8px;
  background:rgba(6,10,18,0.85);
  border:1px solid rgba(0,255,136,0.12);
  border-top:none;
  border-radius:0 0 14px 14px;
  box-shadow:
    0 4px 30px rgba(0,255,136,0.06),
    0 8px 40px rgba(0,0,0,0.4),
    inset 0 0 20px rgba(0,255,136,0.03),
    0 0 1px rgba(0,255,136,0.2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.gdp-hud-label{
  font-size:8px;text-transform:uppercase;letter-spacing:0.16em;
  color:rgba(0,255,136,0.4);display:block;margin-bottom:2px;
}
.gdp-hud-value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(22px,3.5vw,38px);font-weight:700;
  color:var(--accent-green);letter-spacing:-0.02em;white-space:nowrap;
  animation:gdpPulse 4s ease-in-out infinite;
  text-shadow:0 0 20px rgba(0,255,136,0.25),0 0 60px rgba(0,255,136,0.08);
}
/* Stats row below */
.gdp-hud-stats{
  display:flex;gap:2px;margin-top:2px;
}
.gdp-hud-stat{
  padding:4px 10px;text-align:center;
  background:rgba(6,10,18,0.8);
  border:1px solid rgba(80,120,180,0.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.gdp-hud-stat:first-child{border-radius:0 0 0 8px}
.gdp-hud-stat:last-child{border-radius:0 0 8px 0}
.gdp-hs-label{font-size:7px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(100,160,255,0.3);display:block}
.gdp-hs-val{font-size:13px;font-weight:700;color:var(--text-primary);display:block}

/* =========== COCKPIT =========== */

/* Vignette */
.ck-vignette{position:absolute;inset:0;z-index:10;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.5) 100%)}

/* Scanlines */
.ck-scanlines{position:absolute;inset:0;z-index:11;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px)}

/* Top hull / ceiling */
.ck-hull-top{
  position:absolute;top:0;left:0;right:0;height:12%;z-index:5;
  background:linear-gradient(180deg,#0c1018 0%,#141c28 50%,#1a2436 80%,transparent 100%);
  clip-path:polygon(0 0,100% 0,100% 55%,75% 100%,62% 55%,50% 40%,38% 55%,25% 100%,0 55%);
}
.ck-rivet{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#3a4a60 0%,#1a2436 100%);border:1px solid rgba(80,120,180,0.1)}

/* Window frame (the metallic border) */
.ck-window-frame{
  position:absolute;z-index:4;pointer-events:none;
  top:10%;left:12%;right:12%;bottom:30%;
  border:4px solid #1e2a3a;
  border-radius:20px 20px 8px 8px;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.5),
    inset 0 2px 0 rgba(80,120,180,0.08),
    0 0 0 1px rgba(80,120,180,0.06),
    0 0 0 8px #0e141e,
    0 0 0 9px rgba(80,120,180,0.04),
    0 0 60px rgba(40,100,200,0.04);
}
/* Glass reflection (diagonal shine) */
.ck-glass-reflect{
  position:absolute;inset:0;border-radius:16px 16px 4px 4px;
  background:linear-gradient(135deg,rgba(255,255,255,0.03) 0%,transparent 40%,transparent 60%,rgba(255,255,255,0.01) 100%);
  pointer-events:none;
}
/* Glass depth (inner shadow on all edges) */
.ck-glass-depth{
  position:absolute;inset:0;border-radius:16px 16px 4px 4px;
  box-shadow:inset 0 4px 20px rgba(0,0,0,0.4),inset 0 -4px 15px rgba(0,0,0,0.3),inset 4px 0 15px rgba(0,0,0,0.2),inset -4px 0 15px rgba(0,0,0,0.2);
}

/* Side wall panels */
.ck-wall{position:absolute;top:10%;bottom:30%;z-index:5;width:11%;background:linear-gradient(90deg,#0e141e,#161e2c)}
.ck-wall-l{left:0;border-right:1px solid rgba(80,120,180,0.08)}
.ck-wall-r{right:0;border-left:1px solid rgba(80,120,180,0.08);background:linear-gradient(270deg,#0e141e,#161e2c)}
.ck-wall-detail{position:absolute;left:20%;right:20%;top:25%;height:1px;background:rgba(80,120,180,0.06)}

/* LEDs */
.ck-led{position:absolute;width:5px;height:5px;border-radius:50%;animation:ledPulse 3s ease-in-out infinite}
.ck-led-g{background:var(--accent-green);box-shadow:0 0 6px rgba(0,255,136,0.4)}
.ck-led-r{background:var(--accent-red);box-shadow:0 0 6px rgba(255,51,102,0.4);animation-duration:1.5s}
.ck-led-b{background:#3388ff;box-shadow:0 0 6px rgba(51,136,255,0.4);animation-duration:4s}

/* =========== BOTTOM CONSOLE =========== */

.ck-console{
  position:absolute;bottom:0;left:0;right:0;height:28%;z-index:6;
  display:flex;align-items:stretch;
  background:linear-gradient(0deg,#0a0f18 0%,#111a26 50%,#161e2c 80%,rgba(22,30,44,0.95) 100%);
  border-top:2px solid rgba(80,120,180,0.08);
  box-shadow:inset 0 2px 20px rgba(0,0,0,0.3);
}

.ck-con-section{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px 14px;justify-content:center}
.ck-con-l{align-items:flex-start}
.ck-con-r{align-items:flex-end}

/* Mini screens */
.ck-screen{
  width:90px;height:48px;background:#060a12;
  border:1px solid rgba(80,120,180,0.12);border-radius:4px;
  display:flex;align-items:flex-end;justify-content:center;gap:3px;
  padding:5px;overflow:hidden;position:relative;
}
.ck-scr-green{box-shadow:inset 0 0 12px rgba(0,255,136,0.04),0 0 10px rgba(0,255,136,0.02)}
.ck-scr-blue{box-shadow:inset 0 0 12px rgba(60,140,255,0.04)}

.ck-bar{width:10px;border-radius:2px 2px 0 0;background:rgba(0,255,136,0.3);animation:barFlicker 2s ease-in-out infinite alternate}

/* Radar */
.ck-radar{width:34px;height:34px;border-radius:50%;border:1px solid rgba(60,140,255,0.2);position:relative;margin:auto}
.ck-radar-sweep{position:absolute;top:50%;left:50%;width:15px;height:1px;background:rgba(60,140,255,0.5);transform-origin:left;animation:radarSweep 3s linear infinite}
.ck-radar-dot{position:absolute;top:10px;left:20px;width:4px;height:4px;border-radius:50%;background:rgba(0,255,136,0.6);box-shadow:0 0 4px rgba(0,255,136,0.4)}

.ck-mini-row{display:flex;gap:6px;margin-top:4px}

/* Center GDP holographic display */
.ck-con-center{flex:1}

/* =========== TUITER FEED =========== */

.tuiter-feed{
  position:absolute;top:10%;bottom:28%;left:14px;z-index:9;
  width:300px;display:flex;flex-direction:column;
  background:rgba(8,12,18,0.92);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

.tuiter-header{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.tuiter-logo{font-size:14px;font-weight:700;color:#fff}
.tuiter-title{font-size:13px;font-weight:700;color:#fff;flex:1}
.tuiter-live{font-size:8px;letter-spacing:0.1em;color:var(--accent-red);font-weight:700;padding:2px 6px;border:1px solid rgba(255,51,102,0.3);border-radius:4px}

.tuiter-body{
  padding:4px 0;
  flex:1;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  pointer-events:auto;
}

/* =========== STAMINA & MENTAL HEALTH HUD =========== */
.stamina-hud{
  position:absolute;bottom:2%;left:14px;z-index:9;
  width:200px;
  background:linear-gradient(180deg,rgba(20,28,40,0.95) 0%,rgba(12,18,28,0.98) 100%);
  border:2px solid rgba(50,80,120,0.2);
  border-radius:3px;
  padding:10px 12px 8px;
  box-shadow:0 4px 20px rgba(0,0,0,0.5),inset 0 1px 0 rgba(80,130,200,0.08);
  display:flex;flex-direction:column;gap:5px;
}
/* Screws/bolts on corners */
.stamina-hud::before,.stamina-hud::after{
  content:'';position:absolute;width:8px;height:8px;
  background:radial-gradient(circle,rgba(100,130,170,0.4) 30%,rgba(60,80,110,0.6) 50%,rgba(40,55,80,0.3) 70%,transparent 71%);
  border-radius:50%;border:1px solid rgba(80,120,180,0.15);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);
}
.stamina-hud::before{top:4px;left:4px;box-shadow:0 0 3px rgba(0,0,0,0.4)}
.stamina-hud::after{top:4px;right:4px;box-shadow:188px 0 0 0 transparent}
/* Bottom screws via extra shadows on the bars container */
.stam-row:last-child::after{
  content:'';position:absolute;bottom:-6px;right:-8px;width:8px;height:8px;
  background:radial-gradient(circle,rgba(100,130,170,0.4) 30%,rgba(60,80,110,0.6) 50%,rgba(40,55,80,0.3) 70%,transparent 71%);
  border-radius:50%;border:1px solid rgba(80,120,180,0.15);
}
.stam-row{position:relative}
.stam-row{display:flex;align-items:center;gap:6px}
.stam-icon{font-size:12px;line-height:1}
.stam-label{font-size:8px;letter-spacing:0.1em;color:rgba(255,255,255,0.85);font-weight:700;width:48px;flex-shrink:0}
.stam-bar-track{flex:1;height:8px;background:rgba(15,22,35,0.8);border:1px solid rgba(60,100,160,0.08);border-radius:3px;overflow:hidden}
.stam-bar-fill{height:100%;border-radius:2px;transition:width 0.3s ease;width:100%}
.stam-fill-energy{background:linear-gradient(90deg,#ff8800,#ffcc00);box-shadow:0 0 10px rgba(255,170,0,0.5),0 0 20px rgba(255,200,0,0.2)}
.stam-fill-mental{background:linear-gradient(90deg,#6644ff,#aa66ff);box-shadow:0 0 10px rgba(120,80,255,0.5),0 0 20px rgba(160,100,255,0.2)}
/* Low state pulse */
.stam-fill-energy.low{animation:stamPulse 0.6s ease infinite;background:linear-gradient(90deg,#ff4400,#ff8800)}
.stam-fill-mental.low{animation:stamPulse 0.6s ease infinite;background:linear-gradient(90deg,#4400ff,#6644ff)}
@keyframes stamPulse{0%,100%{opacity:1}50%{opacity:0.5}}

/* Stamina low toast */
.stam-warning{
  position:absolute;bottom:14%;left:14px;z-index:10;
  display:flex;align-items:center;gap:6px;
  background:rgba(255,100,0,0.15);
  border:1px solid rgba(255,140,0,0.3);
  border-radius:4px;padding:6px 10px;
  animation:stamPulse 0.8s ease infinite;
  width:200px;flex-wrap:wrap;
}
.stam-warning.hidden{display:none}
.stam-warn-icon{font-size:14px}
.stam-warn-text{font-size:9px;font-weight:700;color:#ff8800;letter-spacing:0.05em}
.stam-warn-timer{font-size:11px;font-weight:800;color:#ffcc00;font-family:var(--font-mono)}
.stam-warn-bar{width:100%;height:3px;background:rgba(30,30,30,0.8);border-radius:2px;overflow:hidden;margin-top:2px}
.stam-warn-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff8800,#ffcc00);border-radius:2px;transition:width 0.1s linear}
/* Alert glow on stamina HUD */
.stam-alert{border-color:rgba(255,140,0,0.5)!important;box-shadow:0 0 15px rgba(255,100,0,0.3),0 0 30px rgba(255,100,0,0.1)!important;animation:stamPulse 0.6s ease infinite}

/* Individual tweet */
.twt{
  display:flex;gap:8px;padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  animation:twtSlideIn 0.35s var(--ease-out) both;
}
.twt.twt-out{opacity:0;transition:opacity 0.3s ease}
.twt.twt-meta{border-left:2px solid rgba(255,51,102,0.3);background:rgba(255,51,102,0.03)}

.twt-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;
  background:rgba(255,255,255,0.06);
}

.twt-content{flex:1;min-width:0}
.twt-top{display:flex;align-items:center;gap:4px;margin-bottom:2px}
.twt-name{font-size:11px;font-weight:700;color:#fff}
.twt-handle{font-size:10px;color:var(--text-muted)}
.twt-text{font-size:11px;color:rgba(255,255,255,0.8);line-height:1.35}

.twt-actions{display:flex;gap:14px;margin-top:4px}
.twt-like{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:4px;transition:all 0.15s ease;font-family:inherit;pointer-events:auto}
.twt-like:hover{color:rgba(255,51,102,0.8);background:rgba(255,51,102,0.08)}
.twt-like i{font-size:12px;transition:transform 0.2s var(--ease-bounce)}
.twt-like:hover i{transform:scale(1.2)}
.twt-like.liked{color:#ff3366}
.twt-like.liked i{transform:scale(1.3)}
.twt-comment{display:flex;align-items:center;gap:3px;font-size:9px;color:rgba(60,140,255,0.4)}
.twt-comment i{font-size:11px}

/* =========== NARRATOR TOAST =========== */

.narrator-toast{
  position:absolute;top:18%;left:50%;transform:translateX(-50%) translateY(10px);
  z-index:9;pointer-events:none;
  font-size:13px;font-style:italic;color:rgba(255,255,255,0.65);
  padding:8px 18px;
  background:rgba(6,10,18,0.8);
  border:1px solid rgba(80,120,180,0.08);
  border-radius:8px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity 0.4s ease,transform 0.4s var(--ease-out);
  white-space:nowrap;max-width:80%;text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.narrator-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* =========== SPEECH BUBBLES =========== */

.speech-bubble{
  position:absolute;z-index:8;pointer-events:none;
  font-size:12px;font-weight:600;color:#fff;
  padding:4px 10px;
  background:rgba(6,10,18,0.8);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  animation:bubbleFloat 2.5s ease-out both;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

/* =========== ACHIEVEMENT POPUP =========== */

.achievement-popup{
  position:fixed;bottom:80px;left:20px;
  z-index:9500;
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;
  background:rgba(6,10,18,0.92);
  border:1px solid rgba(255,204,0,0.25);
  border-radius:12px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 0 30px rgba(255,204,0,0.1),0 8px 30px rgba(0,0,0,0.4);
  transform:translateX(-30px);
  opacity:0;transition:opacity 0.4s ease,transform 0.4s var(--ease-out);
  pointer-events:none;
}
.achievement-popup.visible{opacity:1;transform:translateX(0)}
.ach-icon{font-size:28px}
.ach-title{font-size:14px;font-weight:700;color:var(--accent-yellow);letter-spacing:0.04em}
.ach-desc{font-size:11px;color:var(--text-muted);margin-top:2px}

/* =========== KARENS COUNTER =========== */

.karens-counter{
  position:absolute;top:14px;left:70px;z-index:12;
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;
  background:rgba(6,10,18,0.7);
  border:1px solid rgba(80,120,180,0.08);
  border-radius:8px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
.karens-icon{font-size:14px}
.karens-label{font-size:8px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted)}
.karens-val{font-size:13px;font-weight:700;color:var(--accent-red)}

/* =========== EXTERMINATION PROGRESS =========== */

.ext-progress{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:13;
  width:min(60%,360px);pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.ext-bar{
  width:100%;height:6px;background:rgba(0,0,0,0.5);border-radius:99px;overflow:hidden;
  border:1px solid rgba(0,255,136,0.15);
  box-shadow:0 0 12px rgba(0,255,136,0.06);
}
.ext-fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#00ff88,#00cc66);
  box-shadow:0 0 10px rgba(0,255,136,0.4),0 0 30px rgba(0,255,136,0.15);
  transition:none;
}
.ext-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  color:var(--accent-green);
  text-shadow:0 0 8px rgba(0,255,136,0.3);
}

/* =========== CHARACTERS =========== */

/* 3D Ship floor — perspective grid, bottom half only */
.ck-floor-plate{
  position:absolute;bottom:0;left:0;right:0;height:16%;z-index:6;
  background:linear-gradient(180deg,#1e2535 0%,#151b28 30%,#0e131d 70%,#080b12 100%);
  border-top:1px solid rgba(100,140,200,0.12);
  box-shadow:0 -2px 12px rgba(80,120,180,0.06),inset 0 3px 15px rgba(0,0,0,0.4);
  overflow:hidden;
}
/* Horizontal grid lines fading with depth */
.ck-floor-plate::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(180deg,
      transparent, transparent 16px,
      rgba(80,130,200,0.06) 16px, rgba(80,130,200,0.06) 17px
    );
  mask-image:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.15) 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.15) 100%);
}
/* Vertical perspective lines radiating from center */
.ck-floor-plate::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    linear-gradient(100deg, transparent 9%, rgba(60,100,160,0.04) 9.3%, transparent 9.6%),
    linear-gradient(95deg, transparent 19%, rgba(60,100,160,0.035) 19.3%, transparent 19.6%),
    linear-gradient(92deg, transparent 29%, rgba(60,100,160,0.03) 29.3%, transparent 29.6%),
    linear-gradient(90.5deg, transparent 39%, rgba(60,100,160,0.025) 39.3%, transparent 39.6%),
    linear-gradient(90deg, transparent 49.6%, rgba(80,130,200,0.05) 49.8%, rgba(80,130,200,0.05) 50.2%, transparent 50.4%),
    linear-gradient(89.5deg, transparent 60.4%, rgba(60,100,160,0.025) 60.7%, transparent 61%),
    linear-gradient(88deg, transparent 70.4%, rgba(60,100,160,0.03) 70.7%, transparent 71%),
    linear-gradient(85deg, transparent 80.4%, rgba(60,100,160,0.035) 80.7%, transparent 81%),
    linear-gradient(80deg, transparent 90.4%, rgba(60,100,160,0.04) 90.7%, transparent 91%);
}
/* Space rug on the floor */
.ck-rug{
  position:absolute;bottom:18%;left:50%;transform:translateX(-50%);
  width:32%;height:6%;z-index:6;
  border-radius:4px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(80,30,30,0.35) 0%, rgba(60,20,20,0.25) 40%, rgba(40,15,15,0.15) 70%, transparent 100%);
  border:1px solid rgba(120,50,50,0.12);
  box-shadow:0 0 20px 4px rgba(80,30,30,0.08), inset 0 0 30px rgba(100,40,40,0.1);
  /* Subtle pattern overlay */
  background-image:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(100,40,40,0.06) 31%, transparent 32%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(100,40,40,0.05) 56%, transparent 57%),
    radial-gradient(ellipse at 50% 50%, transparent 75%, rgba(100,40,40,0.04) 76%, transparent 77%),
    radial-gradient(ellipse at 50% 50%, rgba(80,30,30,0.35) 0%, rgba(60,20,20,0.25) 40%, rgba(40,15,15,0.15) 70%, transparent 100%);
  pointer-events:none;
}

/* Railing — space station fence along floor edge */
.ck-railing{
  position:absolute;bottom:16%;left:0;right:0;height:60px;z-index:9;
  pointer-events:none;
  /* Horizontal bars — thicker */
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(35,50,75,0.95) 5%, rgba(55,80,115,0.7) 9%, rgba(35,50,75,0.95) 13%,
      transparent 16%,
      transparent 42%,
      rgba(35,50,75,0.85) 45%, rgba(50,70,100,0.5) 48%, rgba(35,50,75,0.85) 51%,
      transparent 54%,
      transparent 82%,
      rgba(35,50,75,0.95) 85%, rgba(55,80,115,0.7) 89%, rgba(35,50,75,0.95) 93%,
      transparent 96%
    );
  border-top:3px solid rgba(80,120,180,0.25);
  border-bottom:2px solid rgba(40,60,90,0.4);
}
/* Vertical posts — thicker */
.ck-railing::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,
      transparent, transparent 70px,
      rgba(45,65,95,0.9) 70px, rgba(60,85,115,0.6) 73px, rgba(45,65,95,0.9) 76px,
      transparent 76px
    );
}
/* Glow on top edge */
.ck-railing::after{
  content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 5%,rgba(80,150,255,0.15) 20%,rgba(80,150,255,0.25) 50%,rgba(80,150,255,0.15) 80%,transparent 95%);
  box-shadow:0 0 8px rgba(80,150,255,0.1);
}

/* Glow strip at floor edge */
.ck-floor-void{
  position:absolute;bottom:16%;left:8%;right:8%;height:1px;z-index:7;
  background:linear-gradient(90deg,transparent,rgba(80,140,220,0.15) 30%,rgba(80,140,220,0.2) 50%,rgba(80,140,220,0.15) 70%,transparent);
  box-shadow:0 0 14px 3px rgba(80,140,220,0.08);
}

/* =========== NEWS TICKER (CHYRON) =========== */

.news-ticker{
  position:absolute;
  bottom:calc(30% + 4px);left:calc(12% + 4px);right:calc(12% + 4px);
  height:40px;
  z-index:5;
  border-radius:0 0 6px 6px;
  display:flex;align-items:stretch;
  border-top:1px solid rgba(255,215,0,0.4);
  overflow:hidden;
  pointer-events:none;
}

.ticker-label{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;
  background:rgba(160,0,0,0.98);
  color:#fff;
  font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
  font-size:14px;font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  white-space:nowrap;
  animation:tickerBlink 1s step-end infinite;
  text-shadow:0 0 8px rgba(255,100,100,0.6);
  z-index:1;
  border-right:2px solid rgba(255,255,255,0.15);
}

.ticker-scroll{
  flex:1;
  display:flex;align-items:center;
  background:rgba(204,0,0,0.85);
  overflow:hidden;
  position:relative;
}

.ticker-text{
  display:inline-block;
  white-space:nowrap;
  color:#fff;
  font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
  font-size:15px;font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-shadow:1px 1px 3px rgba(0,0,0,0.7);
  padding-left:100%;
  animation:tickerScroll 30s linear infinite;
}

@keyframes tickerScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}

@keyframes tickerBlink{
  0%,100%{opacity:1}
  50%{opacity:0.3}
}

/* Tier 5+: scanline/static effect */
.news-ticker.ticker-glitch{
  border-top-color:rgba(255,50,50,0.6);
}
.news-ticker.ticker-glitch .ticker-scroll::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 2px,
    rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px
  );
  pointer-events:none;
  animation:tickerStatic 0.1s steps(3) infinite;
}
@keyframes tickerStatic{
  0%{opacity:0.4}
  50%{opacity:0.7}
  100%{opacity:0.4}
}

/* Tier 6: heavy corruption */
.news-ticker.ticker-corrupt{
  border-top-color:rgba(255,0,0,0.8);
}
.news-ticker.ticker-corrupt .ticker-scroll{
  background:rgba(180,0,0,0.9);
}
.news-ticker.ticker-corrupt .ticker-text{
  animation-duration:20s;
}
.news-ticker.ticker-corrupt .ticker-scroll::after{
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 1px,
    rgba(0,0,0,0.25) 1px,rgba(0,0,0,0.25) 3px
  );
  animation:tickerStatic 0.05s steps(5) infinite;
}

/* Mobile */
@media(max-width:768px){
  .news-ticker{height:30px}
  .ticker-label{font-size:11px;padding:0 10px}
  .ticker-text{font-size:12px}
}

.ck-characters{
  position:absolute;bottom:16%;left:50%;transform:translateX(-50%);
  z-index:8;pointer-events:none;
  width:min(18%,180px);height:auto;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,0.8)) drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

.ck-characters.hidden{display:none!important}
.ck-characters.char-react{animation:charReact 0.4s var(--ease-bounce)}
.ck-video{object-fit:contain;background:transparent}
.ck-video.hidden{display:none!important}

/* =========== COMPANION SPEECH BUBBLE =========== */

.companion-bubble{
  position:fixed;
  bottom:46%;
  left:50%;transform:translate(-50%,0);
  z-index:9980;
  background:#fff;color:#111;
  padding:5px 12px;
  border-radius:12px 12px 12px 4px;
  font-family:var(--font-body);font-size:12px;font-weight:500;
  line-height:1.3;
  max-width:420px;width:auto;display:inline-block;
  box-shadow:0 4px 20px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.1);
  animation:bubblePopIn 0.3s var(--ease-bounce) both;
  pointer-events:none;
}
.companion-bubble.hidden{display:none!important}
.companion-bubble .cb-text{min-height:0}
.companion-bubble .cb-text::after{
  content:'▍';
  animation:blink 0.6s step-end infinite;
  color:#999;font-weight:400;
  margin-left:1px;
}
.companion-bubble.done .cb-text::after{display:none}
.cb-tail{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:10px solid #fff;
}

/* =========== EARTH STATUS =========== */

.earth-status{
  position:absolute;bottom:17%;left:50%;transform:translateX(-50%);
  z-index:8;pointer-events:none;
  font-size:12px;font-family:var(--font-mono);
  color:rgba(100,160,255,0.35);text-align:center;white-space:nowrap;
  transition:color 0.6s ease;
  text-shadow:0 0 8px rgba(100,160,255,0.1);
}

/* World reaction floating text */
.world-reaction{
  position:absolute;top:45%;left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(16px,2.5vw,22px);font-weight:700;
  color:rgba(255,255,255,0.8);
  pointer-events:none;z-index:5;
  animation:worldReactionFloat 2.8s ease-out both;
  text-shadow:0 0 24px rgba(0,255,136,0.3),0 2px 8px rgba(0,0,0,0.5);
  white-space:nowrap;
  letter-spacing:-0.01em;
}

#screen-flash{position:fixed;inset:0;z-index:190;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,51,102,0.3) 0%,rgba(255,20,60,0.08) 60%,transparent 80%);opacity:0;transition:opacity 0.5s ease-out}

.soul-fly{position:fixed;font-size:28px;pointer-events:none;z-index:300;animation:soulFlyToEarth 0.6s var(--ease-out) both}
.card-particle{position:fixed;width:5px;height:5px;border-radius:2px;background:rgba(255,255,255,0.6);pointer-events:none;z-index:300;animation:particleScatter 0.6s var(--ease-out) both}
.card-particle.red{background:rgba(255,51,102,0.5)}
.soul-float{position:fixed;font-size:28px;pointer-events:none;z-index:300;animation:soulFloat 1.2s ease-out both}

/* =========== TIER REVEAL =========== */

.tier-reveal{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(4,4,4,0.94);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);opacity:0;pointer-events:none;transition:opacity 0.5s ease}
.tier-reveal::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.1) 2px,rgba(0,0,0,0.1) 4px);animation:scanDrift 0.4s linear infinite;pointer-events:none;opacity:0.5}
.tier-reveal.active{opacity:1;pointer-events:auto}
.tier-reveal.fading{opacity:0;transition:opacity 0.6s ease}
.tier-reveal-bg{position:absolute;font-size:min(40vw,260px);line-height:1;opacity:0.06;animation:tierEmojiPulse 3s ease-in-out infinite;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.tier-reveal-label{font-size:13px;text-transform:uppercase;letter-spacing:0.25em;color:var(--text-muted);margin-bottom:8px;animation:tierLabelIn 0.5s var(--ease-out) both;animation-delay:0.2s}
.tier-reveal-name{font-size:clamp(32px,10vw,72px);font-weight:700;letter-spacing:-0.04em;text-align:center;padding:0 20px;animation:tierTextIn 0.6s var(--ease-out) both;animation-delay:0.3s}
.tier-reveal-name.glitch{animation:tierTextIn 0.6s var(--ease-out) both,glitchText 0.12s ease 0.85s 3;animation-delay:0.3s}

/* =========== TOAST =========== */

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:160;padding:12px 24px;background:rgba(17,17,17,0.95);border:1px solid var(--border-color);border-radius:12px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:all 0.4s var(--ease-out);white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,0.5);backdrop-filter:blur(16px)}
.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.hidden{opacity:0;pointer-events:none}
.toast-emoji{margin-right:6px}

/* =========== ENDGAME =========== */

.endgame{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 3s ease;overflow-y:auto}
.endgame.hidden{display:none}
.endgame.active{opacity:1;pointer-events:auto}
.endgame.fading{opacity:0;transition:opacity 0.8s ease}
.endgame-content{display:flex;flex-direction:column;align-items:center;padding:40px 24px 60px;max-width:600px;width:100%;min-height:100vh;min-height:100dvh;justify-content:center}
.endgame-line{text-align:center;min-height:1.2em;opacity:0}
.endgame-big{font-size:clamp(22px,5vw,38px);font-weight:700;letter-spacing:-0.03em;color:var(--text-primary);margin-bottom:12px}
.endgame-big.typing,.endgame-big:not(:empty){opacity:1}
.endgame-big.typing::after{content:'|';animation:blink 0.6s step-end infinite;color:var(--accent-green);margin-left:2px}
.endgame-small{font-size:15px;color:var(--text-muted);margin-bottom:28px;transition:opacity 0.6s ease}
.endgame-small.eg-visible{opacity:1}
.endgame-stats{width:100%;display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,0.04);border-radius:12px;overflow:hidden;margin-bottom:20px}
.es-row{display:flex;justify-content:space-between;padding:10px 16px;background:#0a0a0a;font-size:13px}
.es-label{color:var(--text-muted)}.es-val{color:var(--text-primary);font-weight:600}
.endgame-title{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px;text-align:center}
.et-label{font-size:9px;text-transform:uppercase;letter-spacing:0.2em;color:var(--text-muted)}
.et-name{font-size:clamp(20px,5vw,30px);font-weight:700;color:var(--accent-green);text-shadow:0 0 30px rgba(0,255,136,0.25)}
.et-desc{font-size:13px;color:var(--text-secondary);font-style:italic}
.endgame-best{font-size:12px;color:var(--text-muted);margin-bottom:20px;font-family:var(--font-mono)}
.endgame-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.btn-eg{display:flex;align-items:center;gap:5px;padding:10px 16px;background:rgba(255,255,255,0.06);border:1px solid var(--border-color);border-radius:10px;font-size:13px;font-weight:600;color:var(--text-primary);transition:all 0.2s ease}
.btn-eg:hover{background:rgba(255,255,255,0.1);transform:translateY(-1px)}
.btn-eg i{font-size:16px}
.btn-eg.btn-replay{background:rgba(0,255,136,0.08);border-color:rgba(0,255,136,0.2);color:var(--accent-green)}
.btn-eg.btn-replay:hover{background:rgba(0,255,136,0.14);box-shadow:0 0 20px rgba(0,255,136,0.1)}
.eg-hidden{opacity:0;transform:translateY(10px);transition:opacity 0.6s ease,transform 0.6s var(--ease-out)}
.eg-visible{opacity:1;transform:translateY(0)}

/* =========== PROFILE BUTTON (top-left icon) =========== */

.profile-btn{
  position:fixed;top:14px;left:14px;z-index:20;
  width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:rgba(10,15,25,0.7);border:1px solid rgba(80,120,180,0.15);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;padding:0;transition:all 0.25s ease;
  box-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.profile-btn:hover{transform:scale(1.1);border-color:rgba(0,255,136,0.3);box-shadow:0 0 16px rgba(0,255,136,0.1)}
.profile-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* =========== PROFILE PANEL (overlay, slides in from left) =========== */

.profile-panel{
  position:fixed;top:0;left:0;z-index:25;
  width:220px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:50px 14px 20px;gap:12px;
  background:rgba(8,12,20,0.95);
  border-right:1px solid rgba(80,120,180,0.1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  overflow-y:auto;
  transform:translateX(0);transition:transform 0.35s var(--ease-out),opacity 0.3s ease;
}
.profile-panel.hidden{transform:translateX(-100%);opacity:0;pointer-events:none}

.pp-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:4px}
.pp-close:hover{color:var(--text-primary)}

.pp-avatar{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none}
.pp-avatar-emoji{font-size:52px;line-height:1;display:block;transition:transform 0.2s var(--ease-bounce);position:relative;z-index:1}
.pp-avatar:hover .pp-avatar-emoji{transform:scale(1.1)}
.pp-avatar:active .pp-avatar-emoji{transform:scale(0.9)}
.pp-avatar-glow{position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,var(--avatar-color,rgba(255,51,102,0.15)) 0%,transparent 70%);pointer-events:none;transition:background 0.4s ease}

.pp-name-wrap{display:flex;align-items:center;gap:4px}
.pp-name{font-size:13px;font-weight:700;letter-spacing:0.06em;color:var(--text-primary);text-align:center;outline:none;border-bottom:1px dashed rgba(255,255,255,0.15);padding:2px 4px;max-width:160px;min-width:40px}
.pp-name:focus{border-bottom-color:var(--accent-green);color:var(--accent-green)}
.pp-name-icon{font-size:11px;color:var(--text-muted);opacity:0.5}

.pp-title{font-size:10px;color:var(--accent-green);text-transform:uppercase;letter-spacing:0.1em;text-align:center;text-shadow:0 0 12px rgba(0,255,136,0.2)}

.pp-stats{display:flex;gap:4px;width:100%}
.pp-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;background:var(--bg-card);border-radius:8px;border:1px solid var(--border-color)}
.pp-stat-label{font-size:8px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)}
.pp-stat-val{font-size:16px;font-weight:700;color:var(--text-primary)}

.pp-threat{width:100%;display:flex;flex-direction:column;align-items:center;gap:3px}
.pp-threat-label{font-size:8px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted)}
.pp-threat-bar{width:100%;height:4px;background:#1a1a1a;border-radius:99px;overflow:hidden}
.pp-threat-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--accent-green),var(--accent-yellow),var(--accent-red));transition:width 0.6s var(--ease-out)}
.pp-threat-val{font-size:9px;font-weight:700;letter-spacing:0.08em;color:var(--accent-green);transition:color 0.4s ease}

.pp-divider{width:80%;height:1px;background:var(--border-color)}

.pp-controls{display:flex;flex-direction:column;gap:4px;width:100%}
.pp-toggle{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-card);border-radius:8px;border:1px solid var(--border-color);transition:all 0.2s ease;width:100%}
.pp-toggle:hover{background:var(--bg-card-hover);color:var(--text-secondary)}
.pp-toggle i{font-size:14px}
.pp-toggle-dot{width:8px;height:8px;border-radius:50%;margin-left:auto;transition:background 0.2s ease}
.pp-toggle-dot.on{background:var(--accent-green);box-shadow:0 0 6px rgba(0,255,136,0.3)}
.pp-toggle-dot.off{background:#333}

.pp-brand{margin-top:auto;font-size:9px;font-weight:700;letter-spacing:0.08em;color:var(--text-muted);opacity:0.3;text-align:center;line-height:1.4}
.pp-brand span{font-size:14px}

/* =========== TEA EASTER EGG (Karen Alert) =========== */

/* Tobacco Easter Egg */
.tobacco-warning{position:fixed;inset:0;z-index:9984;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.tobacco-warning.hidden{display:none}
.tobacco-content{text-align:center;max-width:400px;padding:32px}
.tobacco-emoji{font-size:64px;margin-bottom:12px}
.tobacco-title{font-size:22px;font-weight:700;color:#aaa;margin-bottom:8px}
.tobacco-text{font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:4px}
.tobacco-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:20px}
.tobacco-actions{display:flex;flex-direction:column;gap:10px}
.tobacco-btn{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:transform 0.2s}
.tobacco-btn:hover{transform:scale(1.03)}
.tobacco-btn-yes{background:#666;color:#fff}
.tobacco-btn-no{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.1)}

/* Smoke overlay */
.tobacco-smoke{position:fixed;inset:0;z-index:9983;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,rgba(180,180,180,0.6) 0%,rgba(120,120,120,0.4) 30%,rgba(60,60,60,0.2) 60%,transparent 80%);
  animation:smokeIn 3s ease-in-out forwards;
}
.tobacco-smoke.clearing{animation:smokeOut 3s ease-in-out forwards}
.tobacco-smoke.hidden{display:none}
@keyframes smokeIn{
  0%{opacity:0;filter:blur(0)}
  30%{opacity:0.5;filter:blur(4px)}
  60%{opacity:0.85;filter:blur(8px)}
  100%{opacity:0.95;filter:blur(12px)}
}
@keyframes smokeOut{
  0%{opacity:0.95;filter:blur(12px)}
  40%{opacity:0.5;filter:blur(6px)}
  100%{opacity:0;filter:blur(0)}
}

.tea-warning{position:fixed;inset:0;z-index:9984;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.tea-warning.hidden{display:none}
.tea-content{text-align:center;max-width:440px;padding:40px 30px}
.tea-siren{font-size:56px;animation:sirenPulse 0.4s ease-in-out infinite alternate}
.tea-title{font-size:24px;font-weight:700;color:var(--accent-red);letter-spacing:0.06em;margin:12px 0;text-shadow:0 0 20px rgba(255,51,102,0.4);animation:sirenPulse 0.4s ease-in-out infinite alternate}
.tea-count{font-size:12px;text-transform:uppercase;letter-spacing:0.15em;color:var(--text-muted);margin-bottom:4px}
.tea-number{font-family:var(--font-mono);font-size:clamp(32px,6vw,52px);font-weight:700;color:var(--accent-red);text-shadow:0 0 30px rgba(255,51,102,0.3);letter-spacing:0.02em;margin-bottom:4px}
.tea-label{font-size:14px;font-weight:700;letter-spacing:0.1em;color:var(--accent-red);margin-bottom:16px}
.tea-sub{font-size:13px;color:var(--text-secondary);font-style:italic;margin-bottom:24px}
.tea-actions{display:flex;flex-direction:column;gap:10px}
.tea-btn{padding:14px 24px;border-radius:12px;font-size:14px;font-weight:700;transition:all 0.2s ease}
.tea-btn-yes{background:var(--accent-red);color:#fff;letter-spacing:0.04em}
.tea-btn-yes:hover{background:#ff1a4a;box-shadow:0 0 24px rgba(255,51,102,0.4);transform:scale(1.02)}
.tea-btn-no{background:rgba(255,255,255,0.06);color:var(--text-secondary)}
.tea-btn-no:hover{background:rgba(255,255,255,0.1);color:var(--text-primary)}

/* =========== BEER EASTER EGG =========== */

.beer-warning{position:fixed;inset:0;z-index:9985;background:rgba(0,0,0,0.88);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.beer-warning.hidden{display:none}
.beer-content{text-align:center;max-width:400px;padding:40px 30px}
.beer-emoji{font-size:72px;margin-bottom:12px}
.beer-title{font-size:28px;font-weight:700;color:var(--accent-yellow);margin-bottom:12px}
.beer-text{font-size:15px;color:var(--text-primary);margin-bottom:6px}
.beer-sub{font-size:14px;color:var(--text-secondary);margin-bottom:24px}
.beer-actions{display:flex;flex-direction:column;gap:10px}
.beer-btn{padding:14px 24px;border-radius:12px;font-size:15px;font-weight:700;transition:all 0.2s ease}
.beer-btn-yes{background:var(--accent-yellow);color:#000}
.beer-btn-yes:hover{background:#ffe033;transform:scale(1.03);box-shadow:0 0 20px rgba(255,204,0,0.3)}
.beer-btn-no{background:rgba(255,255,255,0.06);color:var(--text-secondary)}
.beer-btn-no:hover{background:rgba(255,255,255,0.1);color:var(--text-primary)}

.beer-drunk{position:fixed;inset:0;z-index:9986;pointer-events:none}
.beer-drunk.hidden{display:none}

.beer-blackout{position:fixed;inset:0;z-index:9987;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.beer-blackout.hidden{display:none}
.beer-bl-emoji{font-size:48px}
.beer-bl-text{font-size:clamp(16px,3vw,22px);color:var(--accent-yellow);font-weight:600;text-align:center}
.beer-bl-sub{font-size:13px;color:var(--text-muted);font-style:italic}
.beer-bl-btn{margin-top:16px;padding:10px 28px;background:transparent;border:1px solid var(--accent-yellow);color:var(--accent-yellow);font-family:'Courier New',monospace;font-size:14px;border-radius:4px;letter-spacing:0.1em;transition:all 0.2s ease}
.beer-bl-btn:hover{background:rgba(255,204,0,0.1);box-shadow:0 0 16px rgba(255,204,0,0.15)}

/* =========== ELECTRICITY EASTER EGG =========== */

.elec-overlay{
  position:fixed;inset:0;z-index:9980;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.15s ease;
}
.elec-text{
  font-family:'Courier New',monospace;
  font-size:clamp(18px,4vw,32px);
  color:var(--accent-green);
  text-shadow:0 0 20px rgba(0,255,136,0.4);
  letter-spacing:0.04em;
  opacity:0;
  transition:opacity 0.5s ease;
}

/* =========== TECH EASTER EGG =========== */

.tech-warning{position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tech-warning.hidden{display:none}
.tw-content{text-align:center;max-width:440px;padding:40px 30px}
.tw-icon{font-size:64px;margin-bottom:16px;animation:shake 0.4s ease infinite}
.tw-title{font-size:22px;font-weight:700;color:var(--accent-red);letter-spacing:0.04em;margin-bottom:16px;text-shadow:0 0 20px rgba(255,51,102,0.3)}
.tw-text{font-size:15px;color:var(--text-primary);margin-bottom:8px}
.tw-text2{font-size:14px;color:var(--text-secondary);margin-bottom:16px}
.tw-sub{font-size:13px;color:var(--accent-red);font-weight:600;margin-bottom:24px;animation:blink 1.5s ease-in-out infinite}
.tw-actions{display:flex;gap:12px;justify-content:center}
.tw-btn{padding:12px 24px;border-radius:10px;font-size:14px;font-weight:700;letter-spacing:0.02em;transition:all 0.2s ease}
.tw-cancel{background:rgba(255,255,255,0.08);color:var(--text-secondary)}
.tw-cancel:hover{background:rgba(255,255,255,0.14)}
.tw-confirm{background:var(--accent-red);color:#fff}
.tw-confirm:hover{background:#ff1a4a;box-shadow:0 0 24px rgba(255,51,102,0.4)}

.tech-blackout{position:fixed;inset:0;z-index:9991;background:#000;display:flex;align-items:center;justify-content:center}
.tech-blackout.hidden{display:none}
.tech-blackout.crt-off{animation:crtOff 0.4s ease-in both}

.tech-joke{position:fixed;inset:0;z-index:9992;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.tech-joke.hidden{display:none}
.tj-text{font-family:'Courier New',monospace;font-size:clamp(18px,4vw,28px);color:var(--accent-green);text-shadow:0 0 12px rgba(0,255,136,0.4);letter-spacing:0.02em}
.tj-sub{font-size:13px;color:var(--text-muted);font-style:italic}
.tj-btn{padding:10px 28px;background:transparent;border:1px solid var(--accent-green);color:var(--accent-green);font-family:'Courier New',monospace;font-size:14px;border-radius:4px;letter-spacing:0.1em;transition:all 0.2s ease;margin-top:12px}
.tj-btn:hover{background:rgba(0,255,136,0.1);box-shadow:0 0 16px rgba(0,255,136,0.2)}

/* =========== MOBILE =========== */

@media(max-width:768px){
  .items-panel{width:calc(100vw - 20px);right:10px;top:10px;max-height:50vh}
  .earth-container{width:min(55vh,80vw);height:min(55vh,80vw);max-width:400px;max-height:400px}
  .ep-gdp{top:12px}
  .ep-gdp-value{font-size:24px}
  .earth-status{bottom:60px;font-size:12px}
  .deletion-info{bottom:10px;padding:12px 14px;border-radius:12px}
  .di-emoji{font-size:28px}.di-name{font-size:14px}.di-gdp{font-size:16px}
  .items-grid{grid-template-columns:repeat(2,1fr);gap:5px}
  .item-card{padding:7px 8px;gap:6px}
  .card-emoji{font-size:18px}.card-name{font-size:11px}
  .panel-head{padding:10px 12px 8px}
  .panel-tiers{padding:8px}
  .panel-foot{padding:8px 12px}
}

@media(max-width:400px){
  .items-grid{grid-template-columns:repeat(2,1fr)}
  .card-gdp{display:none}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}