/* ========== Reset & Base ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg-deep:#050812;--bg-mid:#0a0f1c;--ocean:#080f1e;--land:#141e30;--land-stroke:#1a2640;--visited:#d4a030;--visited-glow:rgba(212,160,48,0.4);--home:#d44;--home-glow:rgba(212,68,68,0.5);--text:#dce2ee;--text-dim:#7c8ca5;--text-faint:#4a5a70;--text-muted:#2e3d52;--panel-bg:rgba(8,12,24,0.85);--panel-border:rgba(124,140,165,0.08);--accent:#d4a030;--accent-dim:rgba(212,160,48,0.1);--card-bg:rgba(8,12,24,0.55);--card-border:rgba(124,140,165,0.06);--card-hover-bg:rgba(8,12,24,0.75);--card-hover-border:rgba(212,160,48,0.2);--glow-gold:0 0 20px rgba(212,160,48,0.08)}
html{scroll-behavior:smooth}
body{width:100%;min-height:100vh;background:var(--bg-deep);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ========== Starry Background ========== */
.stars-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 20% 50%,#0e1628 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,#120e24 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,#061018 0%,transparent 50%),var(--bg-deep)}
.stars-bg::before,.stars-bg::after{content:'';position:absolute;inset:0;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,0.45),transparent),radial-gradient(1px 1px at 30% 70%,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 50% 30%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,0.2),transparent),radial-gradient(1px 1px at 90% 40%,rgba(255,255,255,0.35),transparent),radial-gradient(1.5px 1.5px at 15% 85%,rgba(255,255,255,0.55),transparent),radial-gradient(1.5px 1.5px at 85% 15%,rgba(255,255,255,0.45),transparent),radial-gradient(1px 1px at 45% 55%,rgba(255,255,255,0.2),transparent),radial-gradient(1px 1px at 65% 25%,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 25% 45%,rgba(255,255,255,0.2),transparent);background-size:100% 100%;animation:twinkle 8s ease-in-out infinite alternate}
.stars-bg::after{background-image:radial-gradient(1px 1px at 5% 60%,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 35% 15%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 55% 75%,rgba(255,255,255,0.2),transparent),radial-gradient(1px 1px at 75% 45%,rgba(255,255,255,0.45),transparent),radial-gradient(1px 1px at 95% 85%,rgba(255,255,255,0.3),transparent),radial-gradient(2px 2px at 50% 10%,rgba(255,255,255,0.6),transparent),radial-gradient(1.5px 1.5px at 20% 90%,rgba(255,255,255,0.35),transparent);animation-delay:-4s}
@keyframes twinkle{0%{opacity:0.35}100%{opacity:0.85}}

/* ==================================================================
   FLOATING COUNTDOWN (top-right)
   ================================================================== */
.countdown-float{position:fixed;top:1.5rem;right:1.5rem;z-index:200;background:rgba(8,12,24,0.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(124,140,165,0.07);border-radius:14px;padding:.85rem 1.1rem;box-shadow:0 12px 56px rgba(0,0,0,.6),0 0 0 1px rgba(124,140,165,0.03) inset,var(--glow-gold);min-width:280px}
.cf-display{display:flex;flex-direction:column;gap:.3rem}
.cf-row{display:flex;align-items:center;justify-content:center}
.cf-row-main{gap:.35rem}
.cf-block{display:flex;flex-direction:column;align-items:center;min-width:2.2rem}
.cf-num{font-size:1.2rem;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:.03em;line-height:1.2;color:var(--text);background:linear-gradient(180deg,#eef2fc 0%,var(--text-dim) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cf-label{font-size:.5rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-top:.15rem}
.cf-sep{font-size:1rem;font-weight:200;color:var(--text-muted);line-height:1;margin-top:-.15em;animation:cf-sep-pulse 1.5s ease-in-out infinite}
@keyframes cf-sep-pulse{0%,100%{opacity:.4}50%{opacity:.08}}
.cf-row-total{gap:.3rem;margin-top:.2rem;padding-top:.3rem;border-top:1px solid rgba(124,140,165,0.06)}
.cf-total-label{font-size:.5rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.cf-total-num{font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:.02em}

/* ---- Life Progress Bar ---- */
.cf-life-bar{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;padding-top:.35rem;border-top:1px solid rgba(124,140,165,0.06)}
.cf-life-bar-track{flex:1;height:3px;background:rgba(124,140,165,0.1);border-radius:2px;overflow:hidden}
.cf-life-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#dbb850);border-radius:2px;transition:width 1s ease;box-shadow:0 0 6px rgba(212,160,48,0.3)}
.cf-life-pct{font-size:.55rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--accent);min-width:2.8em;text-align:right;letter-spacing:.02em}

/* ==================================================================
   GATE ENTRIES
   ================================================================== */
.gate-section{max-width:800px;margin:0 auto;padding:0 1.5rem 5rem}
.gate-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.75rem}
.gate-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem .5rem;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;text-decoration:none;color:var(--text);transition:all .3s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
.gate-card:hover{background:var(--card-hover-bg);border-color:var(--card-hover-border);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.4),var(--glow-gold)}
.gate-num{font-size:1.6rem;font-weight:300;font-variant-numeric:tabular-nums;color:var(--text-dim);letter-spacing:.05em;transition:color .3s ease}
.gate-card:hover .gate-num{color:var(--accent)}
.gate-hint{font-size:.7rem;color:var(--text-muted);letter-spacing:.1em}

/* ==================================================================
   MAP SECTION
   ================================================================== */
.map-section{max-width:1100px;margin:0 auto;padding:0 1.5rem 3rem}
.map-header{text-align:center;margin-bottom:2rem}
.map-title{font-size:1.6rem;font-weight:300;letter-spacing:.08em;color:var(--text)}
.map-subtitle{margin-top:.4rem;font-size:.85rem;color:var(--text-dim)}
.map-subtitle strong{color:var(--accent);font-weight:600}
.map-container{position:relative}
#world-map{width:100%;height:auto;display:block;filter:drop-shadow(0 0 40px rgba(212,160,48,0.06))}

/* ---- Country map styles ---- */
.country{stroke:var(--land-stroke);stroke-width:.4;stroke-linejoin:round;cursor:default;transition:fill .3s ease,stroke-width .2s ease,filter .3s ease}
.country.land{fill:var(--land)}
.country.visited{fill:var(--visited);stroke:rgba(255,220,150,0.5);stroke-width:.6;cursor:pointer;animation:visited-pulse 3s ease-in-out infinite}
.country.visited:hover{fill:#dbb850;stroke-width:1.2;filter:drop-shadow(0 0 10px var(--visited-glow))}
.country.home{fill:var(--home);stroke:rgba(255,180,180,0.7);stroke-width:.8;cursor:pointer;animation:home-pulse 2.5s ease-in-out infinite}
.country.home:hover{fill:#e06060;stroke-width:1.4;filter:drop-shadow(0 0 12px var(--home-glow))}
@keyframes visited-pulse{0%,100%{filter:drop-shadow(0 0 3px var(--visited-glow))}50%{filter:drop-shadow(0 0 10px var(--visited-glow))}}
@keyframes home-pulse{0%,100%{filter:drop-shadow(0 0 4px var(--home-glow))}50%{filter:drop-shadow(0 0 14px var(--home-glow))}}
.dot-core{transition:transform .2s ease;transform-origin:center;transform-box:fill-box}
.dot-core:hover{transform:scale(1.4)}
.dot-glow{animation:dot-pulse 2.5s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes dot-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(2.2);opacity:.1}}

/* ---- Tooltip ---- */
.tooltip{position:fixed;pointer-events:none;background:var(--panel-bg);backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:8px;padding:.6rem .9rem;font-size:.85rem;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.5);opacity:0;transform:translate(-50%,-130%);transition:opacity .15s ease;z-index:100;white-space:nowrap}
.tooltip.visible{opacity:1}
.tooltip-name{font-weight:600}
.tooltip-tag{display:inline-block;margin-top:.2rem;font-size:.7rem;padding:.1rem .5rem;border-radius:4px;font-weight:500}
.tooltip-tag.home{background:rgba(212,68,68,0.15);color:#e08080}
.tooltip-tag.visited{background:rgba(212,160,48,0.15);color:#dbb850}

/* ---- Country Panel ---- */
.country-panel{margin-top:2rem;padding:1.5rem 1.5rem 2rem;background:var(--panel-bg);backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:16px}
.country-panel h3{font-size:.85rem;font-weight:500;color:var(--text-faint);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.country-list{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.country-list li{padding:.35rem .8rem;border-radius:20px;font-size:.82rem;background:rgba(212,160,48,0.06);border:1px solid rgba(212,160,48,0.15);color:#dbb850;transition:all .2s ease;cursor:pointer}
.country-list li:hover{background:rgba(212,160,48,0.15);transform:translateY(-1px)}
.country-list li.home-tag{background:rgba(212,68,68,0.08);border-color:rgba(212,68,68,0.25);color:#e08080}
.country-list li.home-tag:hover{background:rgba(212,68,68,0.15)}

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer{text-align:center;padding:2.5rem 1rem 3rem;color:var(--text-faint);font-size:.75rem;letter-spacing:.05em}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media(max-width:768px){
.countdown-float{top:.75rem;right:.75rem;padding:.65rem .85rem;min-width:auto}
.cf-block{min-width:1.6rem}
.cf-num{font-size:.9rem}
.cf-label{font-size:.45rem}
.cf-sep{font-size:.8rem}
.cf-life-pct{font-size:.5rem;min-width:2.2em}
.cf-life-bar-track{height:2px}
.cf-total-num{font-size:.85rem}
.gate-grid{grid-template-columns:repeat(4,1fr)}
.gate-card{padding:1.2rem .4rem}
.gate-num{font-size:1.3rem}
.map-section{padding:0 1rem 2rem}
.country-panel{padding:1rem}
.country-list li{font-size:.75rem;padding:.25rem .6rem}
}
@media(max-width:480px){
.gate-grid{grid-template-columns:repeat(3,1fr)}
.countdown-float{top:.5rem;right:.5rem;padding:.5rem .65rem}
.cf-block{min-width:1.3rem}
.cf-num{font-size:.75rem}
.cf-label{font-size:.4rem}
.cf-sep{font-size:.65rem}
.cf-life-pct{font-size:.5rem;min-width:2.2em}
.cf-life-bar-track{height:2px}
}