:root{
--gold:#ffd166;
--done:#2a9d8f;
--bg1:#0b1023;
--bg2:#1c2f57;
}

#santaTracker { position: relative; width:100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color:#eef2ff; }
#santaTracker, .countdownOverlay {
  overflow-x: hidden;
}


/* Globe container */
.globeWrap{
position: relative; width:100%;
height: min(70vh, 720px); min-height: 480px;
border-radius:16px; overflow:hidden;
background:
  radial-gradient(1200px 600px at 70% 10%, #1c2a57 0%, transparent 70%),
  linear-gradient(to bottom, var(--bg1), var(--bg2));
box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
@supports (height: 100dvh) { .globeWrap{ height: min(70dvh, 720px); } }
#globe{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }

/* HUD */
.hud{
	position:absolute; z-index:10; top:12px; left:12px; width:min(480px,92vw);
	background: rgba(8,12,28,.55); backdrop-filter: blur(6px);
	border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:12px 14px;
	display:grid; gap:8px;
}
.hud h1{ margin:0; font-size:1.05rem; }
.row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chip{ font-size:.85rem; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.2); }
.chip.gold{ background:gold; color:#261a00; border-color:#ffd16680; margin-left:20px;}
.chip.red{ background:#e6394620; border-color:#e6394630; }
.chip.green{ background:#2a9d8f20; border-color:#2a9d8f30; }


/* Countdown overlay inspiré de ta PJ */
.countdownOverlay{
position:absolute; inset:0; z-index:12; display:grid; place-items:center;
background: linear-gradient(to bottom, rgba(11,16,35,.60), rgba(20,37,74,.60));
}
.countdownOverlay.hidden{ display:none; }
.cd-card{
width:min(1100px,84vw);
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:18px; box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.cd-title{ text-align:center; font-weight:800; font-size:clamp(1.4rem,1vw+1.4rem,2.2rem); margin-bottom:6px; }
.cd-sub{ text-align:center; color:#d8e0ff; opacity:.9; margin-bottom:14px; }
.cd-grid{
display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;
}
.cd-cell{
background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.08));
border:1px solid rgba(255,255,255,.2);
border-radius:14px; padding:14px 10px; text-align:center;
box-shadow: inset 0 8px 24px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.25);
}
.cd-num{ font-variant-numeric: tabular-nums; font-weight:800; font-size:clamp(1.6rem,1.5vw+1.6rem,3rem); }
.cd-label{ letter-spacing:.12em; margin-top:6px; font-size:.78rem; opacity:.9; }
.actions{ margin-top:12px; display:flex; justify-content:center; }
.cta{
appearance:none; border:0; border-radius:999px; padding:12px 18px;
background: linear-gradient(180deg, #e11d48, #9f1239); color:#fff; font-weight:700;
box-shadow: 0 8px 20px rgba(225,29,72,.35);
cursor:pointer;
}
.cta:active{ transform: translateY(1px); }

/* Neige décorative */
#santaTracker .snow, #santaTracker .snow::before, #santaTracker .snow::after{
position:absolute; inset:-50px; pointer-events:none; z-index:5;
background-image:
  radial-gradient(2px 2px at 20px 30px, #fff, transparent 40%),
  radial-gradient(3px 3px at 130px 80px, #fff, transparent 40%),
  radial-gradient(2px 2px at 80px 120px, #fff, transparent 40%),
  radial-gradient(3px 3px at 200px 50px, #fff, transparent 40%),
  radial-gradient(2px 2px at 250px 10px, #fff, transparent 40%),
  radial-gradient(3px 3px at 300px 100px, #fff, transparent 40%);
background-size:350px 200px; animation:snowfall 18s linear infinite; opacity:.6;
}
#santaTracker .snow::before{ content:""; animation-duration:28s; opacity:.4; filter: blur(1px); }
#santaTracker .snow::after{ content:""; animation-duration:38s; opacity:.8; filter: blur(2px); }
@keyframes snowfall{ to{ transform: translateY(200px); } }

/* Icône traîneau (HTML overlay du globe) */
.santa3d{ transform: translate(-50%, -50%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.santa3d img{ width:80px; height:80px; display:block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.santa3d svg{ width:42px; height:42px; display:block; }

.widget_evolve button.ctaPereNono{
padding:.8rem 1.3rem;
border-radius:999px;
border:2px solid gold;
font:600 1rem system-ui;
color:#fff;
background:linear-gradient(135deg,#c91a1a,#8d0f0f);
cursor:pointer;
transition:.2s;
}
.widget_evolve button.ctaPereNono:hover{ transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,.3); }
.widget_evolve button.ctaPereNono:active{ transform:translateY(1px); }

@media (max-width: 640px){
  .cd-grid{ grid-template-columns: repeat(2, 1fr); }
}