/* ───────── base ───────── */
:root{
  --ink:#2c3a36;
  --ink-soft:#5a6b66;
  --paper:#f7f5ef;
  --paper-shade:#ecebe3;
  --green:#9bc9a8;
  --green-deep:#6ea284;
  --green-pin:#7aa78a;
  --pink:#ff7ab8;
  --pink-soft:#ffd8ec;
  --land-fill:#cfe1d4;
  --land-stroke:#a3bdac;
  --bg:#f4f1ea;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  font-family:'Patrick Hand',cursive;
  color:var(--ink);
  font-size:18px;
  background:var(--bg);
  display:flex;flex-direction:column;
}
button{font-family:inherit;cursor:pointer}

/* ───────── topbar ───────── */
.topbar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:18px;padding:10px 24px;
  border-bottom:1.5px solid #d6d2c6;
  background:var(--paper);
  flex:0 0 auto;z-index:5;
}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand-mascot{width:64px;height:64px;object-fit:contain;display:block}
.brand-text{font-size:28px;font-weight:700;letter-spacing:.3px}
.tagline{font-size:18px;color:#6b766f;text-align:center;font-family:'Caveat',cursive}

.header-actions{display:flex;align-items:center;gap:10px}
.x-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:#fff;border:1.5px solid var(--ink);color:var(--ink);
  text-decoration:none;
  box-shadow:2px 3px 0 rgba(0,0,0,.08);
  transition:transform .15s, box-shadow .15s;
}
.x-btn:hover{transform:translateY(-1px);box-shadow:3px 4px 0 rgba(0,0,0,.1)}

.gvd-ticker{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  background:#fff;border:1.5px solid var(--green-deep);border-radius:14px;
  padding:6px 14px;
  box-shadow:2px 3px 0 rgba(110,162,132,.18);
  transition:transform .15s ease, box-shadow .15s ease;
}
.gvd-ticker:hover{transform:translateY(-1px);box-shadow:3px 5px 0 rgba(110,162,132,.22)}
.gvd-symbol{font-family:'Patrick Hand',cursive;font-size:22px;font-weight:700;letter-spacing:.5px;color:var(--green-deep)}
.gvd-status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Caveat',cursive;font-size:15px;color:#7c8782;
  padding-left:10px;border-left:1.5px dashed #d8d3c5;
}
.gvd-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(155,201,168,.6);
  animation:gvd-pulse 1.6s infinite;
}
@keyframes gvd-pulse{
  0%{box-shadow:0 0 0 0 rgba(155,201,168,.6)}
  70%{box-shadow:0 0 0 8px rgba(155,201,168,0)}
  100%{box-shadow:0 0 0 0 rgba(155,201,168,0)}
}

/* floating mascot pointing at map */
.floating-mascot{
  position:fixed;left:18px;bottom:24px;
  width:340px;height:auto;z-index:8;pointer-events:none;
  filter:drop-shadow(4px 8px 0 rgba(0,0,0,.07));
  animation:mascot-bob 3.4s ease-in-out infinite;
  transition:opacity .3s ease;
}
.floating-bubble{
  position:fixed;left:355px;bottom:285px;z-index:8;
  font-family:'Caveat',cursive;font-size:28px;font-weight:700;color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:22px;
  padding:10px 22px;
  pointer-events:none;
  transition:opacity .3s ease;
  box-shadow:3px 4px 0 rgba(0,0,0,.06);
}
.floating-bubble::after{
  content:"";position:absolute;left:-12px;top:60%;transform:translateY(-50%);
  width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;
  border-right:13px solid var(--ink);
}
.floating-bubble::before{
  content:"";position:absolute;left:-9px;top:60%;transform:translateY(-50%);
  width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-right:11px solid #fff;z-index:1;
}
@keyframes mascot-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
body.modal-open .floating-mascot,
body.modal-open .floating-bubble{opacity:0}

/* ───────── stage / map ───────── */
.stage{
  flex:1 1 auto;min-height:0;
  display:block;position:relative;
  background:var(--bg);
  overflow:hidden;
}
#mapZoom{
  width:100%;height:100%;display:block;position:relative;
  transform-origin:50% 50%;will-change:transform;
}
#mapHost,#pinLayer{
  position:absolute;inset:0;width:100%;height:100%;
}
#mapHost{
  background-image:url('assets/virusmap.png');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
#pinLayer{pointer-events:none}
#pinLayer .pin{pointer-events:auto;cursor:pointer}

/* pin markers (banner-style green drop) */
.pin .drop{
  fill:var(--green-pin);
  stroke:#3d5448;stroke-width:1.8;
  filter:drop-shadow(0 2px 1.5px rgba(40,60,50,.2));
  transition:fill .18s ease;
}
.pin .dot{ fill:#fff }
.pin .label{
  font-family:'Patrick Hand',cursive;font-size:14px;fill:var(--ink);
  text-anchor:middle;
  paint-order:stroke;stroke:#f7f5ef;stroke-width:3;stroke-linejoin:round;
  opacity:.95;
}
.virus-icon .spike{stroke:#fff;stroke-width:1.4;stroke-linecap:round}
.virus-icon .spike-tip{fill:#fff}
.virus-icon .virus-body{fill:#fff;stroke:#3d5448;stroke-width:0.8}
.virus-icon .virus-eye{fill:#3d5448}
.pin{transform-box:fill-box;transform-origin:center bottom;
  animation:pin-bob 2.6s ease-in-out infinite;
  transition:transform .2s ease;
}
.pin:hover{transform:scale(1.18)}
.pin:hover .drop{fill:#5e8c70}
.pin:hover .virus-icon .virus-body{fill:#fff7d6}
@keyframes pin-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.5px)}
}

/* fade-in entrance for the whole map */
.stage{animation:stage-fade .6s ease both}
@keyframes stage-fade{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ─── INTRO ─── */
.intro{
  position:fixed;inset:0;z-index:200;
  background:radial-gradient(circle at 50% 50%,#fffefa 0%,var(--bg) 75%);
  perspective:1200px;overflow:hidden;
}
.intro.hide{animation:intro-fade .55s ease forwards}
@keyframes intro-fade{to{opacity:0;visibility:hidden}}

/* Dr. Cure walks toward the camera, then fades out as the card appears */
.intro-mascot{
  position:absolute;top:50%;left:50%;
  width:440px;height:auto;
  transform:translate(-50%,-50%);
  animation:mascot-approach 1.8s cubic-bezier(.4,0,.2,1) both;
  pointer-events:none;
}
@keyframes mascot-approach{
  0%   {transform:translate(-50%,-50%) scale(.7); opacity:0}
  45%  {transform:translate(-50%,-50%) scale(.95);opacity:1}
  70%  {transform:translate(-50%,-50%) scale(1);  opacity:1}
  100% {transform:translate(-50%,-50%) scale(1.06);opacity:0}
}

/* card: centered, appears as the mascot fades out */
.intro-card{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.94);
  width:min(540px,90vw);
  text-align:center;padding:30px 36px 24px;
  background:#fff;border:1.5px solid var(--ink);border-radius:22px;
  box-shadow:0 24px 60px rgba(40,60,50,.12), 4px 6px 0 rgba(0,0,0,.05);
  opacity:0;
  animation:card-rise .65s cubic-bezier(.2,1.2,.4,1) 1.5s forwards;
}
@keyframes card-rise{
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.intro-card h1{
  font-family:'Caveat',cursive;font-size:42px;margin:0 0 12px;color:var(--ink);
  letter-spacing:.5px;
}
.intro-card p{font-size:17px;color:#3a4642;margin:8px 0;line-height:1.5;font-family:'Patrick Hand',cursive}
.intro-card button{
  margin-top:18px;
  background:var(--green);border:1.5px solid var(--green-deep);
  font-family:inherit;font-size:17px;font-weight:700;color:#1f3128;
  padding:11px 28px;border-radius:14px;cursor:pointer;
  box-shadow:3px 4px 0 rgba(0,0,0,.08);
  transition:transform .15s, box-shadow .15s;
}
.intro-card button:hover{transform:translateY(-1px);box-shadow:4px 6px 0 rgba(0,0,0,.1)}
.intro-skip{margin-top:12px;font-family:'Caveat',cursive;font-size:14px;color:#7c8782}
.intro-skip kbd{
  background:#eee;border:1px solid #ccc;border-radius:4px;padding:0 6px;font-family:inherit;
}

/* footer */
.footer-hint{
  flex:0 0 auto;text-align:center;padding:6px;font-size:14px;color:#7c8782;
  background:var(--paper);border-top:1.5px solid #d6d2c6;
}

/* ───────── modal ───────── */
.modal{
  position:fixed;inset:0;
  background:rgba(244,241,234,.55);
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  display:none;align-items:center;justify-content:center;z-index:50;padding:20px;gap:0;
  will-change:opacity;
}
.modal.open{display:flex;animation:modal-fade .4s ease both}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}

.modal-mascot{
  width:300px;height:auto;display:block;margin-right:-50px;
  transform:translateY(30px);
  filter:drop-shadow(3px 6px 0 rgba(0,0,0,.1));
  animation:mascot-pop .55s cubic-bezier(.2,1.4,.4,1) both;
  pointer-events:none;z-index:51;
}
@keyframes mascot-pop{
  from{opacity:0;transform:translate(-50px,60px) scale(.6)}
  to{opacity:1;transform:translateY(30px) scale(1)}
}

.modal-card{
  width:min(560px,90vw);max-height:84vh;overflow:auto;
  background:var(--paper);padding:24px 28px;
  border:1.5px solid #c8c4b6;border-radius:22px;position:relative;
  box-shadow:4px 8px 24px rgba(0,0,0,.08);
  animation:card-pop .4s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes card-pop{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}
.modal-card .close{
  position:absolute;top:10px;right:14px;background:transparent;border:none;
  font-size:24px;cursor:pointer;font-family:inherit;color:var(--ink-soft);
}
.m-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.m-emoji{
  font-size:40px;width:72px;height:72px;display:grid;place-items:center;
  background:#e8efe9;border:1.5px solid #b8c8bc;border-radius:16px;
}
.modal-card h2{margin:0;font-size:30px;font-family:'Caveat',cursive;color:var(--ink)}
.m-sub{font-size:16px;color:#6b766f}
.m-desc{font-size:17px;line-height:1.45;margin:14px 0;color:#3a4642}

.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 14px}
.stat{
  background:#fff;border:1.5px solid #d8d3c5;border-radius:12px;padding:8px 10px;text-align:center;
}
.stat .l{font-size:13px;color:#7c8782;text-transform:uppercase;letter-spacing:.5px}
.stat .v{font-size:18px;font-weight:700;color:var(--ink)}
.m-title{font-size:22px;margin:18px 0 8px;font-family:'Caveat',cursive;font-weight:700;color:var(--green-deep);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.m-title-tag{
  font-family:'Patrick Hand',cursive;font-size:12px;font-weight:400;
  background:#e8efe9;border:1px solid #b8c8bc;color:var(--green-deep);
  padding:2px 8px;border-radius:8px;letter-spacing:.3px;
}
.m-coins{display:flex;flex-direction:column;gap:8px}
.coin-chip{
  display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;
  padding:10px 14px;background:#fff;font-size:16px;
  border:1.5px solid #d8d3c5;border-radius:14px;
  text-decoration:none;color:inherit;
  transition:border-color .15s, transform .15s;
}
.coin-chip:hover{border-color:var(--green-deep);transform:translateY(-1px)}
.coin-chip .pic{
  width:38px;height:38px;border-radius:50%;border:1.5px solid #b8c8bc;
  display:grid;place-items:center;font-size:20px;background:#e8efe9;
}
.coin-chip .ticker{font-weight:700;color:var(--ink)}
.coin-chip .desc{font-size:13px;color:#7c8782;display:block}
.coin-chip .raised{font-size:14px;color:var(--green-deep);font-weight:700}
.coin-chip .donate{
  background:var(--green);border:1.5px solid var(--green-deep);border-radius:10px;
  padding:5px 14px;font-family:inherit;font-size:14px;cursor:pointer;color:#2c3a36;font-weight:700;
}
.m-link{display:inline-block;margin-top:14px;color:var(--green-deep);font-size:16px;text-decoration:underline;text-decoration-style:dotted}

/* ───────── responsive ───────── */
@media (max-width:1200px){
  .floating-mascot{width:240px}
  .floating-bubble{left:255px;bottom:200px;font-size:22px;padding:8px 16px}
}
@media (max-width:900px){
  .modal-mascot{display:none}
  .floating-mascot{width:170px}
  .floating-bubble{left:180px;bottom:140px;font-size:18px}
}
@media (max-width:1100px){
  .gvd-status{display:none}
  .gvd-ticker{padding:6px 10px}
}
@media (max-width:760px){
  .tagline{display:none}
  .topbar{grid-template-columns:auto auto;gap:10px}
  .topbar-spacer{display:none}
  .brand-text{font-size:22px}
  .floating-mascot{width:90px;left:8px;bottom:8px}
  .floating-bubble{display:none}
}