/* =====================================================================
 * Brainrot: Rise of the Meme — style.css
 * Bright, cartoon, social-app-inspired UI with glitch accents.
 * All-local (system font stack) so it runs fully offline.
 * =================================================================== */

:root {
  /* === VAPORWAVE / Y2K palette (magenta · cyan · purple over deep indigo) === */
  --bg0:#0a0618; --bg1:#1a0f36; --panel:#1e1246; --panel2:#2a1860;
  --line:#4a2c80; --line2:#7040b8;
  --txt:#fdf2ff; --dim:#cba8ef; --dim2:#9070c0;
  --vir:#ff5cc8; --lime:#5ffbe0; --violet:#b57bff; --coral:#ff5c8a;
  --gold:#ffcf6b; --teal:#4be7ff; --blue:#5cc8ff; --pink:#ff4bd8;
  --good:#5ffbe0; --bad:#ff5c8a; --chaos:#ff35ec; --info:#5cc8ff;
  --font: 'Segoe UI', 'SF Pro Display', system-ui, -apple-system, Roboto, sans-serif;

  /* --- design tokens: gradients, glow, glass, geometry --- */
  --grad-brand:linear-gradient(100deg,#ff4bd8 0%,#b57bff 50%,#4be7ff 100%);
  --grad-vir:linear-gradient(120deg,#ff4bd8,#a15cff);
  --grad-go:linear-gradient(120deg,#4be7ff,#5ffbe0);
  --grad-sun:linear-gradient(180deg,#ffd66b 0%,#ff6bd6 45%,#a15cff 100%);
  --glass:linear-gradient(180deg,rgba(255,120,230,.06),rgba(120,80,255,0) 42%),var(--panel);
  --glass2:linear-gradient(180deg,rgba(120,220,255,.08),rgba(255,120,230,0) 48%),var(--panel2);
  --hair:inset 0 1px 0 rgba(255,255,255,.08);
  --glow-vir:0 0 20px rgba(255,92,200,.5);
  --glow-lime:0 0 18px rgba(75,231,255,.45);
  --sh-lg:0 24px 70px rgba(20,0,40,.7);
  --sh-md:0 10px 30px rgba(20,0,40,.5);
  --r-lg:16px; --r-md:12px; --r-sm:9px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--font);
  color:var(--txt);
  /* vaporwave sunset: magenta glow up top, cyan wash at the horizon */
  background:
    radial-gradient(900px 560px at 78% -14%, rgba(255,75,216,.28), transparent 60%),
    radial-gradient(820px 520px at 20% 112%, rgba(75,231,255,.20), transparent 62%),
    linear-gradient(180deg, #1a0f36 0%, #0c0720 55%, var(--bg0) 100%);
  overflow:hidden;
  display:flex; flex-direction:column;
  height:100vh; user-select:none;
}
/* VHS scanlines over the whole app — STATIC (no blend-mode / animation) so it
 * doesn't force a full-screen recomposite every frame while the map repaints. */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.5;
}
/* neon perspective-grid horizon glowing behind everything (below the map) */
body::after{
  content:""; position:fixed; left:-20%; right:-20%; bottom:0; height:44vh; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,75,216,.22) 38px 40px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(75,231,255,.18) 38px 40px);
  transform:perspective(340px) rotateX(64deg); transform-origin:bottom center;
  mask-image:linear-gradient(180deg, transparent, #000 70%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 70%);
  opacity:.5;
}

/* ---- Crash banner --------------------------------------------------- */
#crashBanner{
  display:none; position:fixed; top:0; left:0; right:0; z-index:9999;
  background:#c0271f; color:#fff; font-weight:700; padding:10px 16px;
  font-family:monospace; box-shadow:0 4px 20px rgba(0,0,0,.5);
}

/* ===== TOP BAR ======================================================= */
#topbar{
  display:flex; align-items:center; gap:16px;
  padding:9px 16px;
  background:linear-gradient(180deg,rgba(32,20,64,.97),rgba(18,12,40,.97));
  border-bottom:1px solid var(--line); box-shadow:0 6px 22px rgba(20,0,40,.4), var(--hair);
  flex:0 0 auto; z-index:20;
}
.brand{ display:flex; align-items:center; gap:9px; padding-right:12px; position:relative; }
.brand::after{ content:""; position:absolute; right:0; top:14%; height:72%; width:1px; background:var(--line2); opacity:.7; }
.brand-emoji{ font-size:27px; filter:drop-shadow(0 0 10px #c07cffaa); animation:brandPulse 3.2s ease-in-out infinite; }
@keyframes brandPulse{ 50%{ filter:drop-shadow(0 0 16px #ff4bb0cc); transform:rotate(-4deg) scale(1.04);} }
.brand-txt{
  font-weight:900; letter-spacing:1.5px; font-size:21px;
  background:linear-gradient(180deg,#ffffff 0%,#ffd6f5 30%,#ff4bd8 52%,#a15cff 68%,#6bdcff 100%);
  background-size:100% 200%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 #7a1f6e) drop-shadow(0 0 12px rgba(255,75,216,.55));
  animation:brandSlide 6s linear infinite;
}
@keyframes brandSlide{ to{ background-position:0 -200%;} }
@keyframes hueSlide{ to{ filter:hue-rotate(360deg);} }
.brand-sub{ color:var(--dim2); font-size:11px; font-style:italic; }

.chips{ display:flex; gap:8px; flex:1; overflow:hidden; }
.chip{
  display:flex; flex-direction:column; justify-content:center;
  background:var(--glass2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:6px 13px 6px 12px; min-width:98px; position:relative;
  box-shadow:var(--hair); transition:border-color .15s, transform .15s;
}
.chip:hover{ border-color:var(--line2); }
.chip-wide{ min-width:150px; flex:1; max-width:230px; }
.chip-ico{ position:absolute; right:9px; top:7px; font-size:15px; opacity:.9; }
.chip-val{ font-weight:800; font-size:16px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.chip-lbl{ font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
.chip-vir{ border-color:#6a44a8; background:linear-gradient(165deg,#2f2154,#1d1636); box-shadow:var(--hair),var(--glow-vir); }
.chip-vir .chip-val{ color:var(--vir); text-shadow:0 0 12px rgba(192,124,255,.5); }
.chip.flash{ animation:chipFlash .5s ease; }
@keyframes chipFlash{ 0%{ background:#3a2f55; transform:scale(1.05);} 100%{} }

.topctrl{ display:flex; align-items:center; gap:10px; }
.speeds{ display:flex; background:var(--glass2); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--hair); }
.speeds button{
  background:transparent; border:none; color:var(--dim); font-size:14px;
  padding:6px 10px; cursor:pointer; transition:.15s;
}
.speeds button:hover{ color:var(--txt); background:#262b4d; }
.speeds button.on{ background:var(--grad-vir); color:#fff; box-shadow:0 0 14px rgba(176,108,240,.5); }
.menu-btn{
  background:var(--glass2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; width:38px; height:34px; font-size:18px; cursor:pointer; box-shadow:var(--hair);
}
.menu-btn:hover{ background:#262b4d; border-color:var(--line2); }

/* ===== GRID ========================================================== */
#grid{
  flex:1; display:grid; grid-template-columns:308px 1fr 300px;
  gap:10px; padding:10px; min-height:0;
}
.panel{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  box-shadow:var(--sh-md), var(--hair);
}

/* ---- Meters --------------------------------------------------------- */
#meters{ padding:12px 12px 6px; display:flex; flex-direction:column; gap:9px; border-bottom:1px solid var(--line); }
.meter{ font-size:11px; }
.meter-top{ display:flex; justify-content:space-between; margin-bottom:3px; }
.meter-name{ color:var(--dim); text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.meter-val{ font-weight:800; }
.meter-bar{ height:8px; background:#0d0f1f; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.meter-fill{ height:100%; border-radius:6px; transition:width .3s ease; }
.m-attn .meter-fill{ background:linear-gradient(90deg,#4ea1ff,#43c6ac); }
.m-cringe .meter-fill{ background:linear-gradient(90deg,#f2c94c,#ff6b6b); }
.m-chaos .meter-fill{ background:linear-gradient(90deg,#b06cf0,#ff00e6); }
.m-detox .meter-fill{ background:linear-gradient(90deg,#43c6ac,#ff5a5a); }
.m-hidden{ display:none; }

/* ---- Tabs ----------------------------------------------------------- */
.tabs{ display:flex; gap:4px; padding:8px 8px 0; }
.tab{
  flex:1; background:var(--panel2); border:1px solid var(--line); border-bottom:none;
  color:var(--dim); font-weight:700; font-size:12px; padding:7px 4px; cursor:pointer;
  border-radius:9px 9px 0 0;
}
.tab.on{ background:var(--panel); color:var(--txt); border-color:var(--line2); }
.tabbody{ flex:1; min-height:0; overflow-y:auto; padding:8px; }
.tabpane{ display:none; }
.tabpane.on{ display:block; }

/* ---- Evolution tree ------------------------------------------------- */
.evo-cat{ margin-bottom:12px; }
.evo-cat-h{
  display:flex; align-items:center; gap:6px; font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.6px; margin:2px 2px 6px;
  padding-bottom:4px; border-bottom:1px dashed var(--line2);
}
.evo-grid{ display:flex; flex-direction:column; gap:5px; }
.node{
  display:flex; align-items:center; gap:9px; padding:7px 9px;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; position:relative; transition:.12s;
}
.node:hover{ border-color:var(--line2); transform:translateX(2px); }
.node-ico{ font-size:20px; width:24px; text-align:center; }
.node-main{ flex:1; min-width:0; }
.node-name{ font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node-desc{ font-size:10.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node-cost{ font-weight:800; font-size:12px; color:var(--vir); white-space:nowrap; }
.node.locked{ opacity:.42; cursor:not-allowed; filter:grayscale(.6); }
.node.locked:hover{ transform:none; }
.node.affordable{ border-color:var(--lime); box-shadow:0 0 0 1px #a8d93a44, 0 0 14px #a8d93a22; }
.node.affordable .node-cost{ color:var(--lime); }
.node.owned{ background:linear-gradient(180deg,#1c2b1e,#152318); border-color:#3a5a2e; cursor:default; }
.node.owned .node-cost{ color:var(--lime); }
.node.owned:hover{ transform:none; }
.node .owned-tick{ display:none; color:var(--lime); font-weight:900; }
.node.owned .owned-tick{ display:inline; }
.node.owned .node-cost{ display:none; }

/* ---- Stats / awards ------------------------------------------------- */
.stat-row{ display:flex; justify-content:space-between; padding:6px 8px; border-bottom:1px solid var(--line); font-size:12.5px; }
.stat-row b{ color:var(--lime); }
.stat-block-h{ font-weight:800; font-size:12px; text-transform:uppercase; color:var(--dim); letter-spacing:.6px; margin:12px 4px 6px; }
.ach-grid{ display:flex; flex-direction:column; gap:6px; }
.ach{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px; opacity:.5;
}
.ach.got{ opacity:1; border-color:var(--gold); background:linear-gradient(180deg,#2a2617,#1d1a2e); }
.ach-ico{ font-size:22px; filter:grayscale(1); }
.ach.got .ach-ico{ filter:none; }
.ach-name{ font-weight:800; font-size:12.5px; }
.ach-desc{ font-size:10.5px; color:var(--dim); }

/* ===== CENTER MAP ==================================================== */
#center{ min-height:0; }
#mapWrap{
  position:relative; width:100%; height:100%;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#0d1020;
}
#mapCanvas,#fxCanvas{ position:absolute; inset:0; width:100%; height:100%; }
#mapCanvas{ cursor:crosshair; }
#fxCanvas{ pointer-events:none; }
#mapHint{
  position:absolute; left:0; right:0; bottom:8px; text-align:center;
  font-size:11px; color:var(--dim2); pointer-events:none; text-shadow:0 1px 3px #000;
}

/* ===== RIGHT PANEL =================================================== */
.section-h{ font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); padding:10px 12px 4px; }
#countryPanel{ padding:12px; border-bottom:1px solid var(--line); }
.cp-empty{ color:var(--dim2); font-size:12px; text-align:center; padding:20px 8px; }
.cp-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cp-emoji{ font-size:30px; }
.cp-name{ font-weight:800; font-size:16px; }
.cp-stage{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; display:inline-block; margin-top:2px; }
.cp-flavor{ font-size:11px; color:var(--dim); font-style:italic; margin:6px 0 10px; }
.cp-stat{ font-size:11px; margin-bottom:6px; }
.cp-stat-top{ display:flex; justify-content:space-between; margin-bottom:2px; }
.cp-stat-bar{ height:6px; background:#0d0f1f; border-radius:4px; overflow:hidden; }
.cp-stat-fill{ height:100%; border-radius:4px; }

#recentEvents,#timeline{ padding:4px 10px 10px; overflow-y:auto; }
#recentEvents{ max-height:170px; }
.re{ display:flex; gap:8px; font-size:11.5px; padding:5px 6px; border-radius:8px; margin-bottom:3px; background:var(--panel2); }
.re-ico{ flex:0 0 auto; }
.re-msg{ color:var(--txt); }
.re.good{ border-left:3px solid var(--good); }
.re.bad{ border-left:3px solid var(--bad); }
.re.chaos{ border-left:3px solid var(--chaos); }
.re.info{ border-left:3px solid var(--info); }
.tl{ display:flex; gap:8px; font-size:11px; padding:4px 6px; color:var(--dim); }
.tl b{ color:var(--txt); }

/* ===== BOTTOM LOG =================================================== */
#logbar{
  flex:0 0 auto; height:34px; background:#0e1020; border-top:1px solid var(--line);
  overflow:hidden; display:flex; align-items:center;
}
#eventLog{ display:flex; gap:26px; padding:0 14px; white-space:nowrap; font-size:12px; }
.le{ color:var(--dim); }
.le b{ color:var(--txt); }
.le.good b{ color:var(--good);} .le.bad b{ color:var(--bad);} .le.chaos b{ color:var(--chaos);} .le.info b{ color:var(--info);}

/* ===== TOASTS ======================================================== */
/* Above the HUD (30) but BELOW modals (400) — a transient toast should never
   cover the evolve tree, stats, or a news bulletin you're reading. */
#toasts{ position:fixed; top:64px; right:16px; z-index:350; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast{
  background:var(--panel2); border:1px solid var(--line2); border-radius:12px;
  padding:9px 14px; font-size:12.5px; font-weight:600; color:var(--txt);
  box-shadow:0 8px 26px rgba(0,0,0,.5); display:flex; gap:9px; align-items:center;
  max-width:340px; animation:toastIn .28s cubic-bezier(.2,1.4,.4,1);
}
.toast .t-ico{ font-size:18px; }
.toast.good{ border-color:var(--good);} .toast.bad{ border-color:var(--bad);}
.toast.chaos{ border-color:var(--chaos);} .toast.info{ border-color:var(--info);}
.toast.ach{ border-color:var(--gold); background:linear-gradient(180deg,#2a2617,#1d1a2e); }
.toast.leaving{ animation:toastOut .3s ease forwards; }
@keyframes toastIn{ from{ transform:translateX(60px) scale(.9); opacity:0;} }
@keyframes toastOut{ to{ transform:translateX(60px) scale(.9); opacity:0;} }

/* ===== MODALS ======================================================== */
.modal{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center;
  background:rgba(6,7,16,.72); backdrop-filter:blur(4px);
}
.modal.on{ display:flex; }
.modal-card{
  background:linear-gradient(180deg,var(--panel),#12142a);
  border:1px solid var(--line2); border-radius:18px; padding:22px;
  width:min(560px,92vw); max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.modal-head h3{ font-size:18px; }
.x{ background:none; border:none; color:var(--dim); font-size:18px; cursor:pointer; }
.x:hover{ color:var(--txt); }

.start-card{ text-align:center; }
.start-hero{ font-size:44px; letter-spacing:8px; margin-bottom:2px; animation:glitchShift 3s infinite; }
@keyframes glitchShift{ 0%,90%,100%{ transform:none; } 92%{ transform:translateX(-3px) skewX(-4deg);} 94%{ transform:translateX(3px);} 96%{ transform:translateX(-2px) skewX(3deg);} }
.start-card h1{
  font-size:56px; font-weight:900; letter-spacing:4px; line-height:1;
  /* chrome / holographic vaporwave title */
  background:linear-gradient(180deg,#ffffff 0%,#ffe3fb 15%,#ff8fe0 36%,#ff4bd8 50%,#a15cff 62%,#6bdcff 83%,#ffffff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 #7a1f6e) drop-shadow(0 5px 10px rgba(20,0,40,.55)) drop-shadow(0 0 20px rgba(255,75,216,.6));
}
.start-card h2{ font-size:17px; color:var(--dim); font-weight:600; margin-top:2px; }
.tag{ color:var(--dim); font-size:13px; margin:10px 0 14px; }
.how{ text-align:left; display:flex; flex-direction:column; gap:7px; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:12.5px; color:var(--dim); }
.how b{ color:var(--txt); }
.start-btns{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.big-btn{
  background:linear-gradient(90deg,var(--violet),var(--pink)); border:none; color:#fff;
  font-weight:800; font-size:16px; padding:12px 26px; border-radius:12px; cursor:pointer;
  box-shadow:0 8px 24px #8a7ff055; transition:.15s;
}
.big-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px #8a7ff077; }
.ghost-btn{ background:var(--panel2); border:1px solid var(--line2); color:var(--txt); font-weight:700; padding:12px 20px; border-radius:12px; cursor:pointer; }
.ghost-btn:hover{ background:#262b4d; }
.ghost-btn.full{ width:100%; margin-bottom:8px; }
.fs-hint{ display:none; font-size:11px; line-height:1.4; color:var(--dim); background:var(--panel2);
  border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-bottom:8px; }
.fs-hint b{ color:var(--txt); }
.ghost-btn:disabled{ opacity:.4; cursor:not-allowed; }
.credit{ color:var(--dim2); font-size:10.5px; margin-top:14px; }

.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.slot{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.slot-info{ flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:7px 10px; font-size:12px; }
.slot-info .slot-empty{ color:var(--dim2); }
.slot button{ background:var(--panel2); border:1px solid var(--line2); color:var(--txt); border-radius:8px; padding:6px 9px; font-size:11px; cursor:pointer; font-weight:700; }
.slot button:hover{ background:#262b4d; }
.setting{ display:flex; justify-content:space-between; align-items:center; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:8px; font-size:13px; cursor:pointer; }
.setting input{ width:18px; height:18px; accent-color:var(--violet); }

.end-card{ text-align:center; }
.end-emoji{ font-size:56px; }
.end-card h1{ font-size:32px; font-weight:900; margin:6px 0; }
.end-card.win h1{ color:var(--lime); }
.end-card.lose h1{ color:var(--coral); }
#endMsg{ color:var(--dim); font-size:14px; margin-bottom:14px; }
.end-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.end-stat{ background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px; }
.end-stat .es-val{ font-weight:900; font-size:20px; color:var(--violet); }
.end-stat .es-lbl{ font-size:11px; color:var(--dim); }

/* ===== responsive-ish ================================================ */
@media (max-width:1100px){
  #grid{ grid-template-columns:260px 1fr 250px; }
}
@media (max-width:860px){
  #grid{ grid-template-columns:1fr; grid-template-rows:auto 320px auto; }
  #left,#right{ max-height:280px; }
  .chips .chip-wide{ display:none; }
}

/* ===== v2 additions ================================================= */
/* Cure bar strip — humanity's threat meter, front and centre */
#curebar{ flex:0 0 auto; padding:7px 16px 9px; background:linear-gradient(180deg,#12152b,#0e1124); border-bottom:1px solid var(--line); box-shadow:var(--hair); position:relative; }
.cure-head{ display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; color:var(--dim); margin-bottom:5px; letter-spacing:.3px; }
.cure-head b{ color:var(--txt); }
.race-read{ font-size:11px; font-weight:700; color:var(--dim2); letter-spacing:.2px; margin-left:auto; margin-right:10px; }
.race-read b{ color:var(--txt); }
.race-read .rr-tag{ padding:1px 7px; border-radius:20px; font-size:10px; }
.rr-tag.rr-good{ background:#5ffbe022; color:#5ffbe0; } .rr-tag.rr-mid{ background:#f2c94c22; color:#f2c94c; } .rr-tag.rr-bad{ background:#ff6b8a22; color:#ff6b8a; }
#cureVal{ font-variant-numeric:tabular-nums; font-weight:800; color:var(--txt); }
.cure-track{ height:11px; background:#0a0c1a; border:1px solid var(--line); border-radius:7px; overflow:hidden; position:relative; }
/* faint tick marks so progress reads at a glance */
.cure-track::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); }
.cure-fill{ height:100%; width:0; border-radius:6px; transition:width .3s ease, background .5s, box-shadow .5s; box-shadow:0 0 12px currentColor; position:relative; }
/* animated sheen sweeping across the cure fill when it's advancing */
.cure-fill::after{ content:""; position:absolute; inset:0; border-radius:6px;
  background:linear-gradient(90deg,transparent, rgba(255,255,255,.28), transparent);
  background-size:200% 100%; animation:cureSheen 2.4s linear infinite; }
@keyframes cureSheen{ to{ background-position:-200% 0; } }
#curebar.danger{ animation:cureDanger 1.1s ease-in-out infinite; }
@keyframes cureDanger{ 50%{ box-shadow:inset 0 0 26px rgba(255,95,109,.28), var(--hair);} }

/* meter fill hues (vaporwave) */
.m-inf .meter-fill{ background:linear-gradient(90deg,#4be7ff,#5ffbe0); }
.m-sev .meter-fill{ background:linear-gradient(90deg,#ffcf6b,#ff5c8a); }
.m-let .meter-fill{ background:linear-gradient(90deg,#ff4bd8,#b57bff); }
.m-aware .meter-fill{ background:linear-gradient(90deg,#5cc8ff,#b57bff); }

/* Trend Heat meter — momentum you ride for extra income */
.m-heat .meter-fill{ background:linear-gradient(90deg,#ffd24a,#ff7a1a,#ff2d6f); box-shadow:0 0 8px rgba(255,120,30,.5); }
.m-heat .meter-name{ color:#ffb86b; }
.m-heat.hot .meter-name{ color:#ff9e4a; text-shadow:0 0 10px rgba(255,120,30,.6); }
.m-heat.hot .meter-fill{ animation:heatGlow .9s ease-in-out infinite; }
@keyframes heatGlow{ 50%{ box-shadow:0 0 16px rgba(255,80,40,.85); filter:brightness(1.12);} }
.m-heat.spike .meter-val{ animation:heatSpike .5s ease; }
@keyframes heatSpike{ 0%{ transform:scale(1.35); color:#fff; text-shadow:0 0 12px #ff7a1a;} 100%{} }
.m-heat .meter-val{ color:#ffb86b; font-weight:800; display:inline-block; }

/* tree blurb + effect badges + de-evolve */
.tree-blurb{ font-size:10.5px; color:var(--dim); background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:7px 9px; margin-bottom:8px; line-height:1.35; }
.node-fx{ display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.bdg{ font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:20px; background:#0e1120; border:1px solid var(--line); white-space:nowrap; }
.bdg.good{ color:var(--lime); border-color:#3a5a2e; }
.bdg.gold{ color:var(--gold); border-color:#5a4d1e; }
.bdg.bad{ color:var(--coral); border-color:#5a2e2e; }
.bdg.warn{ color:#c99bf5; border-color:#4a2e5a; }
.bdg.neut{ color:var(--dim); }
.node-right{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.node.combo{ border-style:dashed; }
.node.combo .node-name::after{ content:' ★'; color:var(--gold); }
.deevo{ display:none; background:#3a1f1f; border:1px solid #5a2e2e; color:var(--coral); width:20px; height:20px; border-radius:6px; font-size:11px; cursor:pointer; line-height:1; }
.node.owned .deevo{ display:block; }
.node.owned .deevo:hover{ background:#5a2e2e; color:#fff; }

/* difficulty picker */
.diff-head,.diff-head2{ font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); margin:14px 0 8px; }
.diffs{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (min-width:520px){ .diffs{ grid-template-columns:repeat(4,1fr); } }
.diff{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px 8px; cursor:pointer; text-align:center; transition:.15s; }
.diff:hover{ border-color:var(--line2); }
.diff.on{ border-color:var(--violet); background:linear-gradient(180deg,#251f45,#1a1730); box-shadow:0 0 0 1px #8a7ff055; }
.diff-emo{ font-size:24px; }
.diff-name{ font-weight:800; font-size:13px; margin:2px 0; }
.diff-blurb{ font-size:10px; color:var(--dim); line-height:1.3; }

/* pros / cons + release */
.pc{ margin:8px 0; }
.pc-h{ font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.5px; margin:8px 0 4px; }
.pc-h.good{ color:var(--good); } .pc-h.bad{ color:var(--bad); }
.pc-row{ font-size:11.5px; padding:2px 0; color:var(--dim); }
.pc-row.good{ color:#bfe89a; } .pc-row.bad{ color:#f3a6a6; }
.release-btn{ width:100%; margin-top:10px; background:linear-gradient(90deg,#8a7ff0,#ff3ea5); border:none; color:#fff; font-weight:800; font-size:14px; padding:11px; border-radius:11px; cursor:pointer; box-shadow:0 6px 18px #8a7ff055; }
.release-btn:hover{ transform:translateY(-1px); }

/* country play-panel */
.cp-pop{ font-size:11px; color:var(--dim); margin:6px 0 8px; }
.cp-pop .det{ color:var(--coral); font-weight:700; }
.seg{ height:14px; border-radius:7px; overflow:hidden; background:#233; display:flex; border:1px solid var(--line); background:#1f6b4a22; }
.seg{ background:#20402f; }
.seg-fill{ height:100%; }
.seg-fill.inf{ background:linear-gradient(90deg,#ff6bd6,#ff2d6f); }
.seg-fill.nec{ background:linear-gradient(90deg,#c86bff,#7a3fd0); }
.seg-key{ display:flex; flex-wrap:wrap; gap:8px; font-size:10px; margin:5px 0 8px; }
.k-inf{ color:#ff6bd6; } .k-nec{ color:#c86bff; } .k-hea{ color:var(--dim); }
.links{ display:flex; gap:8px; font-size:10.5px; margin-bottom:10px; }
.links .open{ color:var(--good); } .links .shut{ color:var(--coral); }

/* left footer mini buttons + select banner */
.left-foot{ display:flex; gap:6px; padding:8px; border-top:1px solid var(--line); }
.mini-btn{ flex:1; background:var(--panel2); border:1px solid var(--line2); color:var(--txt); font-weight:700; font-size:11px; padding:7px; border-radius:9px; cursor:pointer; }
.mini-btn:hover{ background:#262b4d; }
#selectBanner{ position:absolute; top:12px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,#8a7ff0,#ff3ea5); color:#fff; font-weight:800; font-size:13px; padding:8px 18px; border-radius:24px; box-shadow:0 6px 20px rgba(0,0,0,.5); display:none; z-index:5; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateX(-50%) translateY(-3px);} }

/* ===== v3: Plague-style tech tree + status bar ===================== */
/* v9: branching tidy-tree — nodes are absolutely positioned inside a
 * relative stage; connector branches drawn on the canvas behind them. */
.tree-scroll{ overflow-x:auto; overflow-y:visible; padding-bottom:4px; }
.tree-stage{ position:relative; margin:6px auto 12px; }
.tree-lines{ position:absolute; left:0; top:0; z-index:0; pointer-events:none; }
/* HEXAGONAL nodes (Plague-Inc honeycomb). Owned reads as a filled hex; state
 * glows use filter drop-shadow (box-shadow is clipped by clip-path). */
.tnode{
  position:absolute;
  width:64px; height:58px; border:none; border-radius:0; padding:0;
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:linear-gradient(160deg, #3a2568, #201040);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  cursor:pointer; transition:transform .12s, filter .2s, background .2s;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.tnode:hover{ transform:translateY(-2px) scale(1.05); filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)) brightness(1.12); }
.tn-ico{ font-size:22px; line-height:1; margin-top:2px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.tn-cost{ font-size:8.5px; font-weight:800; color:#e6c9ff; line-height:1.1; }
.tn-tick{ display:none; }
.tnode.locked{ opacity:.4; filter:grayscale(.8) drop-shadow(0 2px 2px rgba(0,0,0,.4)); cursor:not-allowed; }
.tnode.locked:hover{ transform:none; }
.tnode.affordable{ background:linear-gradient(160deg, #2b5a6e, #163a4a); filter:drop-shadow(0 0 7px rgba(95,251,224,.85)); animation:hexPulse 1.6s ease-in-out infinite; }
@keyframes hexPulse{ 50%{ filter:drop-shadow(0 0 13px rgba(95,251,224,1)); } }
.tnode.affordable .tn-cost{ color:#5ffbe0; }
.tnode.combo{ background:linear-gradient(160deg, #6a5320, #3e3010); }
.tnode.combo::before{ content:"★"; position:absolute; top:2px; left:50%; transform:translateX(-50%); font-size:9px; color:var(--gold); z-index:2; text-shadow:0 0 5px rgba(255,210,74,.9); }
/* owned wins: a bright cyan-filled hex, like the original's coloured-in cells */
.tnode.owned{ background:linear-gradient(160deg, #3fb0e0, #1c6a94); }
.tnode.owned .tn-ico{ filter:drop-shadow(0 0 5px rgba(255,255,255,.7)); }
.tnode.owned .tn-cost{ display:none; }
.tnode.sel{ filter:drop-shadow(0 0 9px rgba(181,123,255,1)); z-index:3; }

#nodeDetail{ border-top:1px solid var(--line); padding:10px 12px; min-height:96px; background:var(--panel2); }
.nd-empty{ color:var(--dim2); font-size:11.5px; padding:14px 4px; text-align:center; }
/* live disease vitals shown in the detail panel when nothing is selected */
.nd-vitals{ padding:2px 2px 4px; }
.nd-vitals-h{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--dim); margin:2px 2px 10px; display:flex; align-items:center; gap:6px; }
.nd-vitals-h::after{ content:""; flex:1; height:1px; background:var(--line2); opacity:.6; }
.ndv{ margin-bottom:11px; }
.ndv-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; margin-bottom:4px; }
.ndv-name{ color:var(--dim); font-weight:700; }
.ndv-val{ font-weight:900; font-variant-numeric:tabular-nums; font-size:13px; }
.ndv-track{ height:7px; background:#0b0d1c; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.ndv-track div{ height:100%; border-radius:5px; transition:width .3s ease; }
.ndv.inf .ndv-val{ color:var(--teal);} .ndv.inf .ndv-track div{ background:linear-gradient(90deg,#3fe0bd,#b6ef3f); }
.ndv.sev .ndv-val{ color:var(--gold);} .ndv.sev .ndv-track div{ background:linear-gradient(90deg,#ffd24a,#ff5f6d); }
.ndv.let .ndv-val{ color:var(--vir);} .ndv.let .ndv-track div{ background:linear-gradient(90deg,#c07cff,#ff35ec); }
.ndv.cure .ndv-val{ color:var(--blue);} .ndv.cure .ndv-track div{ background:linear-gradient(90deg,#5ab0ff,#ff5f6d); }
.nd-tip{ margin-top:12px; padding:9px 11px; background:linear-gradient(165deg,#241d40,#191533); border:1px solid var(--line2); border-radius:10px; font-size:11px; color:var(--txt); line-height:1.4; }
.nd-tip b{ color:var(--gold); }
.nd-head{ display:flex; align-items:center; gap:9px; margin-bottom:5px; }
.nd-ico{ font-size:24px; }
.nd-name{ font-weight:800; font-size:13px; }
.nd-combo{ color:var(--gold); font-size:9px; }
.nd-tree{ font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; }
.nd-desc{ font-size:11px; color:var(--dim); margin-bottom:6px; line-height:1.35; }
.nd-fx{ display:flex; flex-wrap:wrap; gap:3px; margin-bottom:8px; }
.nd-btn{ width:100%; background:linear-gradient(90deg,var(--violet),var(--pink)); border:none; color:#fff; font-weight:800; font-size:12.5px; padding:9px; border-radius:9px; cursor:pointer; }
.nd-btn:hover{ filter:brightness(1.08); }
.nd-btn.dis{ background:var(--panel); color:var(--dim2); border:1px solid var(--line); cursor:not-allowed; }
.nd-btn.de{ background:#3a1f1f; border:1px solid #5a2e2e; color:var(--coral); }
.nd-owned{ text-align:center; color:var(--lime); font-weight:800; font-size:12px; padding:6px; }
.nd-lock{ text-align:center; color:var(--dim2); font-size:11px; padding:6px; }

/* Bottom status bar (Plague-style infected/terminal + world population bar) */
#statusbar{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:6px 14px; background:#0e1122; border-top:1px solid var(--line); }
.sb-counts{ display:flex; gap:14px; font-size:11.5px; color:var(--dim); white-space:nowrap; }
.sb-c b{ font-variant-numeric:tabular-nums; }
.sb-inf b{ color:#ff6bd6; } .sb-nec b{ color:#c86bff; } .sb-hea b{ color:#5ffbe0; }
.worldbar{ flex:1; height:12px; background:#2a1a54; border-radius:6px; overflow:hidden; display:flex; border:1px solid var(--line); }
.wb-nec{ background:linear-gradient(90deg,#c86bff,#7a3fd0); height:100%; order:0; transition:width .3s; }
.wb-inf{ background:linear-gradient(90deg,#ff6bd6,#ff2d6f); height:100%; order:1; transition:width .3s; }
.sb-time{ font-size:11.5px; color:var(--dim); white-space:nowrap; }
.sb-time b{ color:var(--txt); font-variant-numeric:tabular-nums; }
@media (max-width:860px){ .sb-counts .sb-hea{ display:none; } }

/* ===== v4: on-map region popup + disease/leaderboard panel ========= */
#countryPopup{
  position:absolute; z-index:6; width:190px; display:none;
  background:rgba(16,19,38,0.97); border:1px solid var(--line2); border-radius:12px;
  padding:9px 11px; box-shadow:0 10px 30px rgba(0,0,0,.6);
}
#countryPopup.show{ display:block; animation:popIn .14s ease; }
@keyframes popIn{ from{ transform:scale(.94); opacity:0; } }
.cpop-head{ display:flex; align-items:center; gap:7px; }
.cpop-emo{ font-size:19px; }
.cpop-name{ font-weight:800; font-size:13px; flex:1; }
.cpop-x{ background:none; border:none; color:var(--dim); font-size:14px; cursor:pointer; padding:0 2px; }
.cpop-x:hover{ color:var(--txt); }
.cpop-stage{ font-size:10.5px; font-weight:700; margin:1px 0 6px; }
#countryPopup .seg{ height:12px; margin-bottom:5px; }
.cpop-row{ display:flex; gap:8px; font-size:10px; margin-bottom:5px; }
.cpop-pop{ font-size:10px; color:var(--dim2); margin-bottom:5px; }
.cpop-links{ display:flex; gap:8px; font-size:11px; }
.cpop-links .open{ opacity:1; } .cpop-links .shut{ opacity:.45; filter:grayscale(1); color:var(--coral); }
.cpop-read{ margin-top:7px; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); font-size:10px; line-height:1.35; }
.cpop-read .cr-why{ display:block; font-weight:700; color:var(--txt); }
.cpop-read .cr-fix{ display:block; margin-top:3px; color:var(--dim); }
.cpop-read.t-blocked{ border-color:#ff6b8a55; background:#ff6b8a12; }
.cpop-read.t-slow{ border-color:#f2c94c55; background:#f2c94c10; }
.cpop-read.t-ready{ border-color:#5ffbe044; background:#5ffbe00e; }
.cpop-read.t-ripping{ border-color:#ff4bd855; background:#ff4bd812; }
.cpop-read.t-done{ opacity:.7; }
.cp-verdict{ display:inline-block; margin-left:6px; font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px; vertical-align:middle; }
.cp-verdict.v-good{ background:#5ffbe022; color:#5ffbe0; } .cp-verdict.v-mid{ background:#f2c94c22; color:#f2c94c; } .cp-verdict.v-bad{ background:#ff6b8a22; color:#ff6b8a; }

.dp-stats{ display:flex; justify-content:space-between; gap:6px; font-size:11px; color:var(--dim); background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.dp-stats b{ font-variant-numeric:tabular-nums; }
.dp-inf b{ color:#ff6bd6; } .dp-nec b{ color:#c86bff; } .dp-hea b{ color:#5ffbe0; }
.mi-list{ display:flex; flex-direction:column; gap:4px; }
.mi-row{ display:flex; align-items:center; gap:7px; font-size:11px; }
.mi-emo{ font-size:14px; width:18px; text-align:center; }
.mi-name{ width:72px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dim); }
.mi-bar{ flex:1; height:7px; background:#0d0f1f; border-radius:4px; overflow:hidden; }
.mi-bar span{ display:block; height:100%; border-radius:4px; transition:width .3s; }
.mi-pct{ width:40px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }

/* ===== v5: rotting brain + evolve overlay + news popups ============ */
.left-foot{ margin-top:auto; }
#brainWrap{ position:relative; height:152px; border-bottom:1px solid var(--line); background:radial-gradient(130px 90px at 50% 45%, #3a1a5e, #1a0f36); }
#brainCanvas{ display:block; width:100%; height:152px; }
#brainLabel{ position:absolute; left:0; right:0; bottom:6px; text-align:center; line-height:1; pointer-events:none; }
#brainLabel b{ display:block; font-size:20px; font-weight:900; color:#ffb6f0; text-shadow:0 0 10px rgba(255,75,216,.7), 0 1px 4px #000; font-variant-numeric:tabular-nums; }
#brainLabel span{ font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:1px; }
#btnEvolve{
  margin:10px 10px 4px; padding:12px; border:none; border-radius:12px; cursor:pointer;
  font-weight:900; font-size:15px; letter-spacing:.5px; color:#fff;
  background:linear-gradient(90deg,var(--lime),var(--teal)); color:#0c1a06;
  box-shadow:0 6px 18px #a8d93a44; transition:.15s;
}
#btnEvolve:hover{ transform:translateY(-2px); box-shadow:0 10px 24px #a8d93a66; }

/* Evolution overlay */
#evoModal .evo-card{
  background:linear-gradient(180deg,#141733,#0f1226); border:1px solid var(--line2); border-radius:16px;
  width:min(1140px,96vw); height:min(780px,94vh); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
}
.evo-top{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); }
.evo-title{ font-weight:900; font-size:17px; flex:1; }
.evo-paused{ font-size:11px; color:var(--gold); border:1px solid #5a4d1e; border-radius:20px; padding:2px 9px; margin-left:8px; }
.evo-vir{ font-weight:800; color:var(--vir); font-size:15px; }
.evo-vir b{ font-variant-numeric:tabular-nums; }
.evo-back{ background:linear-gradient(90deg,var(--violet),var(--pink)); border:none; color:#fff; font-weight:800; font-size:14px; padding:9px 16px; border-radius:10px; cursor:pointer; }
.evo-back:hover{ filter:brightness(1.08); }
.evo-tabs{ display:flex; gap:4px; padding:8px 12px 0; border-bottom:1px solid var(--line); }
.etab{ background:var(--panel2); border:1px solid var(--line); border-bottom:none; color:var(--dim); font-weight:800; font-size:13px; padding:9px 16px; border-radius:10px 10px 0 0; cursor:pointer; }
.etab.on{ background:var(--panel); color:var(--txt); border-color:var(--line2); }
.evo-main{ flex:1; min-height:0; display:flex; }
.evo-panes{ flex:1; min-width:0; overflow:auto; padding:14px; }

/* Bottom stat bars (Plague-Inc style: DNA + Infectivity/Severity/Lethality) */
.evo-statbar{ flex:0 0 auto; display:flex; align-items:center; gap:18px; padding:9px 16px;
  background:linear-gradient(180deg,#160c33,#0e0824); border-top:1px solid var(--line2); box-shadow:var(--hair); }
.esb{ display:flex; align-items:center; gap:8px; }
.esb-dna{ font-weight:900; color:var(--vir); }
.esb-dna .esb-ico{ font-size:16px; }
.esb-dna b{ font-size:15px; font-variant-numeric:tabular-nums; text-shadow:0 0 10px rgba(255,92,200,.5); }
.esb .esb-lbl{ font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--dim); }
.esb:not(.esb-dna){ flex:1; max-width:280px; }
.esb-bar{ flex:1; height:11px; background:#0a0618; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.esb-bar div{ height:100%; border-radius:5px; transition:width .3s ease; box-shadow:0 0 8px currentColor; }
.esb-bar.inf div{ background:linear-gradient(90deg,#ff8fe0,#ff2d8f); color:#ff2d8f; }
.esb-bar.sev div{ background:linear-gradient(90deg,#ffe08a,#ffb020); color:#ffb020; }
.esb-bar.let div{ background:linear-gradient(90deg,#c89bff,#8a3fe0); color:#8a3fe0; }
.esb b{ font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--txt); min-width:22px; text-align:right; }
@media (max-width:760px){ .evo-statbar{ gap:10px; } .esb .esb-lbl{ display:none; } }
.etabpane{ display:none; }
.etabpane.on{ display:block; }
#evoModal #nodeDetail{ width:280px; flex:0 0 280px; border-left:1px solid var(--line); border-top:none; background:var(--panel); overflow-y:auto; padding:0; }
/* spinning meme-pathogen panel at the top of the detail column */
#pathogenPanel{ position:relative; height:150px; border-bottom:1px solid var(--line2); overflow:hidden;
  background:radial-gradient(130px 100px at 50% 42%, #3a1560, #150a30 72%); }
#pathogenCanvas{ display:block; width:100%; height:150px; }
.pathogen-lbl{ position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:9px; font-weight:900; letter-spacing:1.6px; color:var(--dim); text-shadow:0 1px 3px #000; pointer-events:none; }
#nodeDetailBody{ padding:10px 12px; }
/* trees get more room inside the overlay */
.evo-panes .tnode{ width:66px; height:60px; }
.evo-panes .tn-ico{ font-size:23px; }
.evo-panes .tn-ico{ font-size:24px; }

/* Overview tab */
.ov-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.ov-card{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.ov-k{ font-size:11px; color:var(--dim); }
.ov-v{ font-size:22px; font-weight:900; margin-top:3px; font-variant-numeric:tabular-nums; }
.ov-bars{ display:flex; flex-direction:column; gap:9px; max-width:520px; }
.ov-bar-top{ display:flex; justify-content:space-between; font-size:12px; color:var(--dim); margin-bottom:3px; }
.ov-track{ height:9px; background:#0d0f1f; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ov-track div{ height:100%; border-radius:6px; }
.ov-tip{ margin:14px 0 4px; padding:10px 12px; background:var(--panel2); border:1px solid var(--line2); border-radius:10px; font-size:12.5px; color:var(--txt); max-width:640px; }

/* News popup — light backdrop so the world stays visible behind the bulletin */
#newsModal{ background:rgba(6,7,16,0.34); align-items:flex-end; padding-bottom:56px; }
#newsModal .news-card{
  display:flex; align-items:center; gap:14px; width:min(560px,92vw);
  background:linear-gradient(180deg,#191d3a,#12152b); border:1px solid var(--line2); border-left:5px solid var(--info);
  border-radius:14px; padding:16px 18px; box-shadow:0 20px 60px rgba(0,0,0,.6); animation:popIn .18s ease;
}
#newsModal .news-card.good{ border-left-color:var(--good); }
#newsModal .news-card.bad{ border-left-color:var(--bad); }
#newsModal .news-card.chaos{ border-left-color:var(--chaos); }
.news-emoji{ font-size:38px; flex:0 0 auto; }
.news-mid{ flex:1; }
.news-head{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--dim); }
.news-msg{ font-size:14px; font-weight:600; margin-top:3px; line-height:1.35; }
.news-ok{ background:linear-gradient(90deg,var(--violet),var(--pink)); border:none; color:#fff; font-weight:800; font-size:14px; padding:10px 20px; border-radius:10px; cursor:pointer; flex:0 0 auto; }
.news-ok:hover{ filter:brightness(1.08); }

/* thin scrollbars */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:6px; }
::-webkit-scrollbar-track{ background:transparent; }

/* =====================================================================
 * v7: PLAGUE-INC LAYOUT — full-screen world map with the whole HUD as
 * translucent panels/round buttons floating over it. These rules are
 * appended last so they win the cascade over the earlier dashboard layout.
 * =================================================================== */
:root{ --hud-top:56px; --hud-cure:46px; --hud-bottom:64px; }
body{ display:block; height:100vh; }

/* Base layer: the map fills the entire viewport, floating over the scene. */
#mapWrap{
  position:fixed; inset:0; z-index:2;
  border:none; border-radius:0; overflow:hidden;
  background:transparent;
}
#mapCanvas,#fxCanvas{ position:absolute; inset:0; width:100%; height:100%; }

/* Top HUD bar floats over the map. */
#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--hud-top); z-index:30;
  border-bottom:1px solid rgba(60,66,112,.6);
}
/* Cure bar floats directly beneath the top HUD. */
#curebar{
  position:fixed; top:var(--hud-top); left:0; right:0; z-index:29;
  min-height:var(--hud-cure);
  background:linear-gradient(180deg,rgba(20,14,48,.97),rgba(14,10,34,.97));
  border-bottom:1px solid rgba(60,66,112,.5);
}

/* Shared floating-panel look — translucent glass + retro Y2K window chrome. */
.hud-card{
  position:fixed; z-index:20; width:238px;
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:linear-gradient(180deg,rgba(40,23,84,.97),rgba(19,12,42,.97));
  border:1px solid rgba(120,70,200,.7); border-radius:12px;
  box-shadow:0 16px 40px rgba(20,0,40,.55),
    inset 1px 1px 0 rgba(255,255,255,.28), inset -1px -1px 0 rgba(120,40,180,.5);
}
/* retro title bar */
.hud-card::before{
  content:attr(data-title); flex:0 0 auto; display:block;
  padding:5px 10px; font-size:10px; font-weight:900; letter-spacing:1px;
  color:#fff; text-shadow:0 1px 2px rgba(90,0,90,.8);
  background:linear-gradient(90deg,#ff4bd8,#a15cff 70%,#6bdcff);
  border-bottom:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
#left{ left:12px; top:calc(var(--hud-top) + var(--hud-cure) + 12px); max-height:calc(100vh - var(--hud-top) - var(--hud-cure) - 210px); }
#right{ right:12px; top:calc(var(--hud-top) + var(--hud-cure) + 12px); width:274px; max-height:calc(100vh - var(--hud-top) - var(--hud-cure) - 92px); overflow-y:auto; }

/* Big round biohazard EVOLVE button — the signature Plague-Inc control. */
#btnEvolve{
  position:fixed; left:20px; bottom:calc(var(--hud-bottom) + 16px); z-index:25;
  width:104px; height:104px; margin:0; padding:0; border:none; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  /* holographic chrome orb */
  background:radial-gradient(circle at 42% 30%, #ffd0f4 0%, #ff5cc8 26%, #a15cff 58%, #3a1a6e 100%);
  color:#fff; cursor:pointer;
  box-shadow:0 0 0 2px rgba(255,120,230,.7), 0 0 34px rgba(255,92,200,.6), 0 0 60px rgba(75,231,255,.25), 0 12px 30px rgba(20,0,40,.6);
  transition:transform .15s, box-shadow .2s;
}
#btnEvolve:hover{ transform:scale(1.06); box-shadow:0 0 0 2px rgba(120,220,255,.9), 0 0 50px rgba(255,92,200,.85), 0 0 80px rgba(75,231,255,.4), 0 14px 34px rgba(20,0,40,.65); }
#btnEvolve:active{ transform:scale(.98); }
.evo-btn-ring{ position:absolute; inset:5px; border-radius:50%; border:2px dashed rgba(255,255,255,.6); animation:evoSpin 9s linear infinite; }
@keyframes evoSpin{ to{ transform:rotate(360deg); } }
.evo-btn-ico{ font-size:34px; line-height:1; filter:drop-shadow(0 0 8px rgba(255,255,255,.9)); }
.evo-btn-lbl{ font-size:11px; font-weight:900; letter-spacing:1.5px; color:#fff; text-shadow:0 1px 3px rgba(90,0,90,.9); }
/* pulse ring to draw the eye when you can afford something (toggled by JS via .can-evolve) */
#btnEvolve.can-evolve{ animation:evoReady 1.4s ease-in-out infinite; }
@keyframes evoReady{ 50%{ box-shadow:0 0 0 2px rgba(95,251,224,.95), 0 0 46px rgba(75,231,255,.7), 0 0 70px rgba(255,92,200,.4), 0 12px 30px rgba(20,0,40,.6); } }

/* Bottom HUD: news ticker (logbar) sits above the population/status bar. */
#logbar{
  position:fixed; left:0; right:0; bottom:var(--hud-bottom); z-index:22; height:30px;
  background:linear-gradient(180deg,rgba(16,11,38,.97),rgba(10,7,26,.98));
  border-top:1px solid rgba(60,66,112,.5); border-bottom:none;
  display:flex; align-items:center; gap:0;
}
.log-tag{
  flex:0 0 auto; align-self:stretch; display:flex; align-items:center; gap:6px;
  padding:0 12px; font-size:10px; font-weight:900; letter-spacing:.8px; color:#0c0e1c;
  background:linear-gradient(90deg,var(--gold),#ff9e4a); text-transform:uppercase;
}
#statusbar{
  position:fixed; left:0; right:0; bottom:0; z-index:23; height:var(--hud-bottom);
  background:linear-gradient(180deg,rgba(18,12,44,.98),rgba(10,7,26,.99));
  border-top:1px solid rgba(60,66,112,.6);
}
.sb-btns{ display:flex; gap:8px; }
.round-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line2);
  background:var(--glass2); color:var(--txt); font-size:18px; cursor:pointer;
  box-shadow:var(--hair); transition:transform .12s, border-color .15s, background .15s;
}
.round-btn:hover{ transform:translateY(-2px); border-color:var(--violet); background:#262b4d; }

/* Map hint sits above the bottom HUD so it isn't hidden. */
#mapHint{ bottom:calc(var(--hud-bottom) + 34px); }

/* meters lose the hard border inside the translucent card */
#meters{ border-bottom:none; }

/* ===== VAPORWAVE SCENE — sits BEHIND the (translucent) map, so it glows
 * through the ocean without ever blocking the continents. Cranked up. ====== */
#vwScene{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
/* big banded chrome sunset sun on the horizon */
.vw-sun{
  position:absolute; top:4vh; left:50%; transform:translateX(-50%);
  width:min(760px,88vw); height:min(760px,88vw); border-radius:50%;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(8,4,20,.85) 30px 40px),
    radial-gradient(circle at 50% 46%, #fff2c0 0%, #ffd66b 20%, #ff8fd6 42%, #ff4bd8 60%, rgba(161,92,255,.4) 78%, transparent 86%);
  opacity:.85;
  mask-image:radial-gradient(circle at 50% 46%, #000 62%, transparent 82%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 62%, transparent 82%);
}
/* prominent neon wireframe grid floor receding to a horizon */
.vw-grid{
  position:absolute; left:-40%; right:-40%; bottom:0; height:52vh;
  background:
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255,75,216,.85) 52px 55px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(75,231,255,.7) 46px 49px);
  transform:perspective(260px) rotateX(72deg); transform-origin:bottom center;
  mask-image:linear-gradient(180deg, transparent 4%, #000 70%);
  -webkit-mask-image:linear-gradient(180deg, transparent 4%, #000 70%);
  opacity:.55;
}
/* a soft sunset wash so the whole backdrop reads as a vaporwave sky */
#vwScene::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 70% at 50% 6%, rgba(255,75,216,.32), transparent 55%),
    linear-gradient(180deg, #2a1156 0%, #180a38 46%, #0a0618 100%);
}
.vw-spark{ position:absolute; color:#fff; text-shadow:0 0 8px #ff4bd8, 0 0 16px #4be7ff; opacity:.85; animation:vwTwinkle 3.4s ease-in-out infinite; z-index:1; }
.vw-spark.s1{ top:13%; left:16%; font-size:18px; } .vw-spark.s2{ top:22%; left:80%; font-size:24px; animation-delay:.7s; }
.vw-spark.s3{ top:58%; left:9%; font-size:15px; animation-delay:1.4s; } .vw-spark.s4{ top:66%; left:88%; font-size:22px; animation-delay:2s; }
.vw-spark.s5{ top:34%; left:52%; font-size:14px; animation-delay:1s; }
@keyframes vwTwinkle{ 0%,100%{ opacity:.15; transform:scale(.6) rotate(0deg);} 50%{ opacity:1; transform:scale(1.2) rotate(25deg);} }

/* Small screens: let the floating cards shrink and the map still show. */
@media (max-width:900px){
  .hud-card{ width:200px; }
  #right{ width:210px; }
  #btnEvolve{ width:86px; height:86px; }
}
/* (phones no longer hide the panels — they become bottom sheets, see the
 *  mobile block at the end of this file. Hiding them stranded the Release
 *  button and the whole HUD.) */

/* ===== RETRO Y2K WINDOW CHROME on modals ================================= */
/* chrome bevel + magenta border on every popup card */
.modal-card, #evoModal .evo-card, #newsModal .news-card{
  border:1px solid rgba(140,80,220,.8) !important;
  box-shadow:0 26px 70px rgba(20,0,40,.72),
    inset 1px 1px 0 rgba(255,255,255,.32), inset -2px -2px 0 rgba(110,40,170,.55) !important;
}
/* retro gradient title bar shared look */
.win-bar, .modal-head, .evo-top{
  background:linear-gradient(90deg,#ff4bd8,#a15cff 68%,#6bdcff) !important;
  color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 rgba(120,40,180,.6);
  text-shadow:0 1px 2px rgba(90,0,90,.85);
}
/* menu / stats / awards already have .modal-head — make it a real title bar */
.modal-head{
  margin:-22px -22px 16px !important; padding:8px 12px !important;
  border-radius:18px 18px 0 0; align-items:center;
}
.modal-head h3{ font-size:14px !important; letter-spacing:.6px; text-transform:uppercase; color:#fff; }
.x{
  background:rgba(255,255,255,.22) !important; border:1px solid rgba(255,255,255,.55) !important;
  color:#fff !important; width:22px; height:22px; border-radius:4px; font-size:13px !important;
  line-height:1; box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
}
.x:hover{ background:#ff5c8a !important; }
/* intro + end cards get a fake .exe title bar */
.start-card::before, .end-card::before{
  content:"◼ BRAINROT.EXE"; display:block; text-align:left;
  margin:-22px -22px 18px; padding:8px 12px; border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,#ff4bd8,#a15cff 68%,#6bdcff);
  color:#fff; font-size:12px; font-weight:900; letter-spacing:1.2px;
  text-shadow:0 1px 2px rgba(90,0,90,.85); box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.end-card::before{ content:"◼ GAME_OVER.EXE"; }
/* evolve overlay top bar → retro title bar */
.evo-top{ border-radius:16px 16px 0 0; }
.evo-title{ color:#fff !important; text-shadow:0 1px 2px rgba(90,0,90,.85); }
/* news bulletin gets a retro tag stripe */
#newsModal .news-card{ padding-top:26px !important; position:relative; }
#newsModal .news-card::before{
  content:"◼ BREAKING.LOG"; position:absolute; top:0; left:0; right:0;
  padding:4px 10px; font-size:10px; font-weight:900; letter-spacing:1px; color:#fff;
  background:linear-gradient(90deg,#ff4bd8,#a15cff 68%,#6bdcff);
  border-radius:14px 14px 0 0; text-shadow:0 1px 2px rgba(90,0,90,.85);
}


/* ===== vector sprite icons (sprites.js) ===== */
img.spr { display: inline-block; vertical-align: middle; image-rendering: auto; }
.chip-ico img.spr, .mtr-ic img.spr, .esb-ico img.spr, .inl-spr img.spr, .t-ico img.spr,
.sb-c img.spr, .sb-time img.spr, .sb-btns img.spr, .log-tag img.spr, .etab img.spr,
.speeds button img.spr, .menu-btn img.spr, .brand-emoji img.spr, .pathogen-lbl img.spr,
.cure-head img.spr, .mi-emo img.spr, .cp-emoji img.spr, .cpop-emo img.spr { vertical-align: middle; }
.speeds button img.spr, .menu-btn img.spr, .round-btn img.spr { pointer-events: none; }
.tn-ico img.spr { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.tn-cost img.spr { vertical-align: -1px; margin-right: 1px; }

/* =====================================================================
 * MOBILE / PHONE LAYOUT  (appended last so it wins the cascade)
 * The desktop layout floats two side panels over a full-screen map. On a
 * phone those panels covered the map — and hiding them stranded the whole
 * HUD *and the Release button*, so the game couldn't even be started. Here
 * the panels become bottom sheets you toggle, the top HUD compacts to the
 * essentials, and the evolve overlay reflows to a single column.
 * =================================================================== */
.mob-only{ display:none; }

/* Map zoom controls (touch): hidden on desktop (wheel zoom there). Positioned
   per-orientation inside the phone blocks below. Also stop the browser from
   hijacking touch pans/pinches on the map canvases. */
#zoomCtl{ display:none; position:fixed; z-index:24; flex-direction:column; gap:8px; }
#zoomCtl button{ width:44px; height:44px; border-radius:12px; border:1px solid var(--line2);
  background:var(--glass2); color:var(--txt); font-size:24px; font-weight:800; line-height:1;
  cursor:pointer; box-shadow:var(--hair); -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:center; }
#zoomCtl button:active{ background:#262b4d; transform:scale(.94); }
#mapWrap, #mapCanvas, #fxCanvas{ touch-action:none; }

/* Use the *dynamic* viewport height so mobile browser chrome doesn't crop us. */
@supports (height:100dvh){ body{ height:100dvh; } }

/* ---------- shared PHONE rules (portrait phone OR landscape phone) ----------
 * A phone is a narrow portrait screen OR a SHORT landscape screen. Tablets and
 * desktop (which have room for the side panels) are excluded by both tests. */
@media (orientation:portrait) and (max-width:600px),
       (orientation:landscape) and (max-height:600px){
  /* compact top HUD: brand mark + essential chips + controls */
  #topbar{ padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); gap:6px; }
  .brand{ padding-right:8px; } .brand-txt{ display:none; }
  .chips{ gap:6px; flex:1; min-width:0; }
  .chip{ display:none; min-width:0; padding:4px 8px 4px 10px; }
  .chip-vir,#chipVir{ display:flex; }
  .chips .chip:nth-child(4){ display:flex; }                 /* Global % */
  .chip-lbl{ display:none; } .chip-ico{ position:static; margin-right:4px; }
  .chip-val{ font-size:13px; }
  .topctrl{ gap:6px; flex:0 0 auto; }
  .speeds button{ width:30px; height:30px; } .menu-btn{ width:34px; height:34px; }
  /* thin cure bar */
  #curebar{ padding:5px 12px 7px; }
  .cure-head{ font-size:11px; } .race-read{ margin-right:6px; }
  /* toasts kept off the map: narrow, compact, message clamped to 2 lines so a
     burst of events can't blanket the screen (capped to 2 + shorter life in JS) */
  #toasts{ top:calc(var(--hud-top) + var(--hud-cure) + 6px); right:6px; left:auto; max-width:64vw; gap:5px; }
  .toast{ font-size:11px; padding:6px 9px; gap:7px; line-height:1.25; border-radius:10px; align-items:flex-start; }
  .toast .t-ico{ font-size:14px; margin-top:1px; }
  .toast .t-msg{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* declutter */
  #logbar{ display:none; } #mapHint{ display:none; }
  /* bottom status bar */
  #statusbar{ gap:8px; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
  .sb-counts{ gap:8px; } .sb-counts .sb-hea{ display:none; }
  .worldbar{ min-width:38px; } .round-btn{ width:36px; height:36px; font-size:15px; }
  /* country popup fits the viewport */
  #countryPopup{ width:min(76vw,240px) !important; }
  /* zoom controls visible on phones */
  #zoomCtl{ display:flex; }
  /* shared scrim for modal drawers */
  #sheetScrim{ position:fixed; inset:0; z-index:40; background:rgba(6,4,16,.55);
    opacity:0; pointer-events:none; transition:opacity .25s; }
  body.sh-modal #sheetScrim{ opacity:1; pointer-events:auto; }
  /* modals fit the screen */
  .modal-card{ width:94vw !important; max-height:88dvh; overflow-y:auto; }
  /* during country-select the World panel is a picker — hide the (empty)
     news/timeline so the Release button isn't pushed off the bottom */
  body.sh-select #right > .section-h,
  body.sh-select #right > #recentEvents,
  body.sh-select #right > #timeline{ display:none; }
  /* keep Release reachable no matter how the pros/cons wrap */
  #right .release-btn{ position:sticky; bottom:4px; z-index:3; box-shadow:0 6px 18px #8a7ff099, 0 0 0 4px var(--panel); }
  /* EVOLVE overlay fills the screen on any phone */
  #evoModal .evo-card{ width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .evo-top{ padding:8px 12px; gap:8px; padding-top:max(8px,env(safe-area-inset-top)); }
  .evo-title{ font-size:14px; } .evo-paused{ display:none; }
  .evo-back{ font-size:12px; padding:8px 12px; }
  .evo-tabs{ padding:6px 8px 0; gap:3px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .evo-tabs::-webkit-scrollbar{ display:none; }
  .etab{ font-size:12px; padding:8px 11px; white-space:nowrap; flex:0 0 auto; }
  .evo-statbar{ padding:7px 10px calc(7px + env(safe-area-inset-bottom)); gap:8px; }
}

/* ---------- PORTRAIT phone: panels are bottom sheets you toggle ---------- */
@media (orientation:portrait) and (max-width:600px){
  :root{ --hud-top:52px; --hud-cure:42px; --hud-bottom:56px; }
  .mob-only{ display:flex; }
  #statusbar{ z-index:43; }                 /* toggles stay tappable over the sheet */
  .hud-card{
    left:0 !important; right:0 !important; top:auto !important; bottom:var(--hud-bottom);
    width:auto !important; max-width:none; max-height:60vh !important; overflow-y:auto;
    border-radius:16px 16px 0 0;
    transform:translateY(130%); transition:transform .28s cubic-bezier(.4,0,.2,1); z-index:41;
  }
  body.sh-path #left{ transform:translateY(0); }
  body.sh-world #right{ transform:translateY(0); }
  body.sh-select #right{ transform:translateY(0); max-height:52vh !important; }
  #btnEvolve{ width:72px; height:72px; left:12px; bottom:calc(var(--hud-bottom) + 10px); }
  .evo-btn-ico{ font-size:24px; } .evo-btn-lbl{ font-size:9px; }
  /* zoom buttons: bottom-right, clear of the evolve button (bottom-left) */
  #zoomCtl{ right:10px; bottom:calc(var(--hud-bottom) + 14px); }
  /* evolve overlay: single column (tree over detail) */
  .evo-main{ flex-direction:column; }
  .evo-panes{ flex:1 1 auto; padding:10px; -webkit-overflow-scrolling:touch; }
  #evoModal #nodeDetail{ width:auto; flex:0 0 auto; max-height:34vh; overflow-y:auto;
    border-left:none; border-top:1px solid var(--line2); }
  #evoModal #pathogenPanel{ display:none; }
  .start-card h1{ font-size:44px; letter-spacing:2px; }
}
@media (orientation:portrait) and (max-width:380px){
  .chips .chip:nth-child(4){ display:none; }
  .start-card h1{ font-size:38px; letter-spacing:1px; }
}

/* ---------- LANDSCAPE phone: narrow always-on side panels, map between ----------
 * A short landscape screen has no room for tall bottom sheets, so we keep the
 * desktop side-panel arrangement but slim it down. The map projects into the
 * gap between the panels (via _mapInsets), so it's never covered. */
@media (orientation:landscape) and (max-height:600px){
  :root{ --hud-top:44px; --hud-cure:32px; --hud-bottom:46px; }
  .mob-only{ display:none; }                /* panels always visible; no toggles */
  #rotateGate{ display:none !important; }   /* already landscape — never nag */
  .sh-select #right, .sh-world #right, .sh-path #left{ transform:none; }   /* classes are no-ops here */
  /* keep a couple more chips — there's width for them */
  .chips .chip:nth-child(2), .chips .chip:nth-child(3){ display:flex; }
  /* slim, docked side panels spanning the height between the thin chrome */
  .hud-card{
    transform:none !important; transition:none;
    top:calc(var(--hud-top) + var(--hud-cure) + 6px) !important;
    bottom:calc(var(--hud-bottom) + 6px); max-height:none !important;
    border-radius:12px; z-index:20;
  }
  #left{ left:8px !important; width:154px !important; bottom:calc(var(--hud-bottom) + 66px); overflow-y:auto; }
  #right{ right:8px !important; width:178px !important; overflow-y:auto; }
  #brainWrap{ height:84px; overflow:hidden; } #brainCanvas{ height:84px; }   /* shrink the decorative brain */
  /* evolve button tucked in the bottom-left corner under the (shortened) left panel */
  #btnEvolve{ width:56px; height:56px; left:10px; bottom:calc(var(--hud-bottom) + 6px); }
  .evo-btn-ico{ font-size:19px; } .evo-btn-lbl{ display:none; }
  /* zoom buttons sit just left of the right panel, stacked bottom-right of map */
  #zoomCtl{ right:194px; bottom:calc(var(--hud-bottom) + 8px); gap:6px; }
  #zoomCtl button{ width:40px; height:40px; font-size:22px; }
  /* evolve overlay keeps the two-column layout (uses width, not scarce height) */
  #evoModal #nodeDetail{ width:206px; flex:0 0 206px; }
  #evoModal #pathogenPanel{ height:92px; }
}

/* ===== FIRST-RUN COACH ==============================================
 * A single low-profile strip above the bottom HUD. Never blocks input and
 * never covers the map centre — it teaches in place, then goes away. */
#coach{
  position:fixed; left:50%; transform:translateX(-50%) translateY(14px);
  bottom:calc(var(--hud-bottom) + 12px); z-index:355;
  max-width:min(560px, 92vw); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.3,.4,1);
}
#coach.on{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.coach-card{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,rgba(46,26,96,.97),rgba(26,14,58,.97));
  border:1px solid #6bdcff; border-radius:13px; padding:10px 12px;
  box-shadow:0 10px 34px rgba(20,0,40,.6), 0 0 22px rgba(107,220,255,.28);
}
.coach-msg{ font-size:13px; line-height:1.45; color:var(--txt); flex:1; }
.coach-msg b{ color:#6bdcff; }
.coach-x{
  flex:0 0 auto; background:rgba(255,255,255,.07); border:1px solid var(--line2);
  color:var(--dim); font-size:11px; font-weight:700; padding:6px 10px;
  border-radius:16px; cursor:pointer; white-space:nowrap;
}
.coach-x:hover{ color:var(--txt); border-color:#6bdcff; }
@media (orientation:portrait) and (max-width:600px){
  #coach{ bottom:calc(var(--hud-bottom) + 8px); max-width:94vw; }
  .coach-msg{ font-size:12px; }
  .coach-card{ padding:8px 10px; gap:9px; }
}
/* Landscape phone: sit in the gap between the evolve button (left) and the
   zoom controls (right) rather than centring across the whole width. */
@media (orientation:landscape) and (max-height:600px){
  #coach{ left:86px; right:246px; transform:translateY(14px);
    max-width:none; width:auto; bottom:calc(var(--hud-bottom) + 8px); }
  #coach.on{ transform:translateY(0); }
  .coach-msg{ font-size:12px; }
  .coach-card{ padding:8px 10px; gap:9px; }
}
body.reduce-motion #coach{ transition:opacity .2s linear; }

/* ===== ACCESSIBILITY ================================================ */

/* Visually hidden but readable by screen readers. */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Visible keyboard focus. Only for keyboard users (:focus-visible), so mouse
   and touch don't get rings on every tap. */
:where(button, input, [tabindex]):focus-visible{
  outline:3px solid #6bdcff; outline-offset:2px; border-radius:6px;
}
.tnode:focus-visible{ outline:3px solid #6bdcff; outline-offset:3px; z-index:5; }

/* Reduced motion: stop the decorative loops and flashing. Gameplay unaffected —
   the sim, spread and bubbles all still run normally. */
body.reduce-motion .vw-spark,
body.reduce-motion .evo-btn-ring,
body.reduce-motion .cure-fill::after,
body.reduce-motion .rg-phone{ animation:none !important; }
body.reduce-motion #curebar.danger,
body.reduce-motion #curebar.endgame,
body.reduce-motion #btnEvolve.can-evolve,
body.reduce-motion .m-heat.hot .meter-fill,
body.reduce-motion #endgameBanner{ animation:none !important; }
body.reduce-motion.win-flash::after{ animation:none !important; opacity:0 !important; }
body.reduce-motion .toast{ animation:none !important; }
body.reduce-motion .vw-grid{ opacity:.28; }
@media (prefers-reduced-motion: reduce){
  .vw-spark, .evo-btn-ring, .cure-fill::after{ animation:none !important; }
}

/* Bigger text: scales the type-heavy readouts without breaking the canvas HUD. */
body.big-text{ font-size:112%; }
body.big-text .chip-val{ font-size:15px; }
body.big-text .help-step, body.big-text .help-sec p{ font-size:14px; }
body.big-text .cpop-read{ font-size:11.5px; }
body.big-text .re, body.big-text .tl{ font-size:12px; }
body.big-text .toast{ font-size:13px; }
body.big-text .ach-name{ font-size:14px; } body.big-text .ach-desc{ font-size:12px; }
body.big-text .node-name, body.big-text .nd-name{ font-size:14px; }
body.big-text .setting span{ font-size:13px; }

/* ===== COLOUR-BLIND PALETTE =========================================
 * Okabe-Ito hues: distinguishable under every common colour-vision
 * deficiency, and they vary in lightness so they read in greyscale too.
 * The canvas/map side is swapped in JS (BR.setPalette); these rules cover
 * the CSS-driven HUD bits that JS doesn't paint. ================== */
body.cb-palette{
  --good:#009E73; --bad:#D55E00; --info:#56B4E9; --chaos:#CC79A7;
  --lime:#009E73; --coral:#D55E00; --teal:#56B4E9; --blue:#0072B2;
}
body.cb-palette .dp-inf b{ color:#0072B2; }
body.cb-palette .dp-nec b{ color:#D55E00; }
body.cb-palette .dp-hea b{ color:#009E73; }
body.cb-palette .wb-inf{ background:linear-gradient(90deg,#56B4E9,#0072B2); }
body.cb-palette .wb-nec{ background:linear-gradient(90deg,#E69F00,#D55E00); }
body.cb-palette .sb-inf b{ color:#0072B2; }
body.cb-palette .sb-nec b{ color:#D55E00; }
body.cb-palette .sb-hea b{ color:#009E73; }
body.cb-palette .cure-fill{ background:linear-gradient(90deg,#CC79A7,#D55E00) !important; }
body.cb-palette .m-inf .meter-fill{ background:linear-gradient(90deg,#56B4E9,#0072B2); }
body.cb-palette .m-sev .meter-fill{ background:linear-gradient(90deg,#F0E442,#E69F00); }
body.cb-palette .m-let .meter-fill{ background:linear-gradient(90deg,#E69F00,#D55E00); }
body.cb-palette .m-aware .meter-fill{ background:linear-gradient(90deg,#56B4E9,#CC79A7); }
body.cb-palette .rr-tag.rr-good{ background:#009E7322; color:#009E73; }
body.cb-palette .rr-tag.rr-bad{ background:#D55E0022; color:#D55E00; }

/* ===== HOW TO PLAY ================================================== */
.help-body{ display:flex; flex-direction:column; gap:12px; }
.help-sec{ background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:10px 12px; }
.help-h{ font-size:12px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; color:var(--violet); margin-bottom:6px; }
.help-sec p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--dim); }
.help-step{ font-size:12.5px; line-height:1.5; color:var(--dim); padding:3px 0; }
.help-step b, .help-sec p b{ color:var(--txt); }

/* ===== WIN FLASH — a warm bloom washes the screen the moment you win ===== */
body.win-flash::after{
  content:""; position:fixed; inset:0; z-index:390; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, rgba(255,216,92,.55), rgba(255,75,216,.25) 45%, transparent 72%);
  animation:winFlash .9s ease-out forwards;
}
@keyframes winFlash{ 0%{ opacity:0; } 12%{ opacity:1; } 100%{ opacity:0; } }

/* ===== ROTATE-TO-LANDSCAPE GATE ===================================== */
#rotateGate{ display:none; position:fixed; inset:0; z-index:600;
  background:radial-gradient(120% 90% at 50% 0%, #2a1156, #120833 55%, #0a0618);
  align-items:center; justify-content:center; text-align:center; padding:28px;
  padding-top:max(28px, env(safe-area-inset-top)); padding-bottom:max(28px, env(safe-area-inset-bottom)); }
.rg-inner{ max-width:340px; }
.rg-phone{ font-size:66px; display:inline-block; transform-origin:center;
  animation:rgRock 2.4s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(255,75,216,.6)); }
@keyframes rgRock{ 0%,30%{ transform:rotate(0);} 55%,82%{ transform:rotate(-90deg);} 100%{ transform:rotate(0);} }
.rg-title{ font-size:23px; font-weight:900; color:#fff; margin:16px 0 8px; letter-spacing:.5px;
  text-shadow:0 0 14px rgba(255,75,216,.5); }
.rg-sub{ font-size:14px; color:var(--dim); line-height:1.45; } .rg-sub b{ color:#6bdcff; }
.rg-skip{ margin-top:24px; background:rgba(255,255,255,.06); border:1px solid var(--line2);
  color:var(--dim); font-size:12px; font-weight:700; padding:9px 16px; border-radius:20px; cursor:pointer; }
.rg-skip:hover{ color:var(--txt); border-color:var(--violet); }
/* Only phones in portrait see the gate; rotating to landscape hides it live.
   Capped at 600px so tablets (which read fine in portrait) never get a
   "rotate your phone" message. */
@media (max-width:600px) and (orientation:portrait){
  #rotateGate{ display:flex; }
  body.rg-dismissed #rotateGate{ display:none; }
}

/* ===== cure endgame phase ===== */
#endgameBanner {
  position: fixed; top: 96px; left: 50%; transform: translateX(-50%) translateY(-14px);
  z-index: 60; display: none; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(90deg, rgba(60,6,26,.92), rgba(90,10,40,.92));
  border: 1px solid rgba(255,45,111,.7); box-shadow: 0 6px 26px rgba(255,45,111,.35), 0 0 0 1px rgba(255,45,111,.2) inset;
  color: #ffd7e6; font: 800 13px/1 Inter, system-ui, sans-serif; letter-spacing: .04em;
  opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap;
  animation: ebpulse 1.4s ease-in-out infinite;
}
#endgameBanner.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
#endgameBanner .eb-val { color: #ff5c8a; }
#endgameBanner .eb-sub { font-weight: 600; font-size: 10.5px; opacity: .8; letter-spacing: .02em; border-left: 1px solid rgba(255,140,170,.35); padding-left: 9px; }
@keyframes ebpulse { 0%,100% { box-shadow: 0 6px 26px rgba(255,45,111,.3); } 50% { box-shadow: 0 6px 34px rgba(255,45,111,.6); } }
#curebar.endgame { animation: curethrob 1.1s ease-in-out infinite; }
@keyframes curethrob { 0%,100% { box-shadow: 0 0 0 0 rgba(255,45,111,0); } 50% { box-shadow: 0 0 22px 2px rgba(255,45,111,.5); } }

/* ===== name-your-plague input ===== */
.plague-name {
  width: 100%; box-sizing: border-box; margin: 2px 0 4px; padding: 10px 14px;
  background: rgba(20,10,40,.7); border: 1px solid rgba(255,120,230,.4); border-radius: 10px;
  color: #fbe9ff; font: 700 15px Inter, system-ui, sans-serif; text-align: center; letter-spacing: .02em;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.plague-name::placeholder { color: rgba(230,200,255,.4); font-weight: 500; }
.plague-name:focus { border-color: #ff6bd6; box-shadow: 0 0 0 3px rgba(255,107,214,.18); }

/* ===== end-screen letter grade ===== */
.end-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 22px; font: 900 60px/1 Inter, system-ui, sans-serif;
  border: 3px solid currentColor; box-shadow: 0 0 30px currentColor, 0 0 0 1px rgba(255,255,255,.1) inset;
  text-shadow: 0 0 18px currentColor;
}
.grade-s { color: #ffd34e; } .grade-a { color: #5ffbe0; } .grade-b { color: #8fb2ff; }
.grade-c { color: #ff9bd6; } .grade-d { color: #ff7a9c; } .grade-f { color: #ff4b6b; }
.end-verdict { margin-top: 10px; font-size: 12.5px; font-weight: 600; opacity: .82; font-style: italic; }

/* ===== stats charts ===== */
.stat-chart { width: 100%; height: 132px; display: block; margin: 2px 0 6px; background: rgba(16,8,34,.5); border: 1px solid rgba(150,110,220,.22); border-radius: 10px; }
/* shorter charts on short screens (landscape phones) so more fits per scroll */
@media (max-height:600px){ .stat-chart{ height: 96px; } }

/* achievements progress summary */
.ach-prog{ background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-bottom:10px; }
.ach-prog-top{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--dim); margin-bottom:6px; }
.ach-prog-top b{ color:var(--txt); font-variant-numeric:tabular-nums; }
.ach-prog-pct{ font-weight:900; color:var(--gold); }
.ach-prog-bar{ height:8px; background:#0a0618; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ach-prog-bar span{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#ffd85c,#ff8be6); box-shadow:0 0 10px rgba(255,216,92,.5); transition:width .4s ease; }
.chart-legend { display: flex; gap: 14px; justify-content: center; margin: -2px 0 8px; font: 600 11px Inter, system-ui, sans-serif; color: #cdbaf0; }
.cl-item { display: inline-flex; align-items: center; gap: 5px; }
.cl-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin-bottom: 6px; }
.stat-grid .stat-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 9px; background: rgba(20,10,40,.4); border-radius: 7px; font-size: 12px; }
.stat-grid .stat-row span { color: #c8b6ea; display: inline-flex; align-items: center; gap: 5px; }
.stat-grid .stat-row b { color: #fbe9ff; }

/* ===== Rot Genes (intro meta-progression) ===== */
.gene-head { display: flex; align-items: center; justify-content: space-between; }
.gene-slots { font-size: 11px; font-weight: 600; color: #b79ae0; letter-spacing: .02em; }
.genes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 2px 0 6px; }
.gene {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(22,12,44,.6); border: 1px solid rgba(150,110,220,.28); color: #eadcff;
  transition: border-color .15s, background .15s, transform .1s;
}
.gene:hover { border-color: rgba(255,120,230,.55); transform: translateY(-1px); }
.gene.on { background: linear-gradient(135deg, rgba(120,40,150,.5), rgba(60,20,90,.5)); border-color: #ff6bd6; box-shadow: 0 0 0 1px rgba(255,107,214,.4), 0 4px 16px rgba(255,75,216,.2); }
.gene.locked { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }
.gene.locked:hover { transform: none; border-color: rgba(150,110,220,.28); }
.gene-ic { grid-row: 1 / span 2; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.gene-nm { font: 800 12.5px Inter, system-ui, sans-serif; }
.gene-dz { font-size: 10px; color: #b8a4dd; line-height: 1.25; }
.gene.on .gene-nm { color: #fff; }

/* HD-icons toggle on the intro screen */
.intro-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 2px 0 6px; padding: 8px 12px; border-radius: 10px;
  background: rgba(22,12,44,.55); border: 1px solid rgba(150,110,220,.25);
  font: 600 12px Inter, system-ui, sans-serif; color: #d9c8f5; cursor: pointer;
}
.intro-setting small { opacity: .6; font-weight: 500; }