:root{
  --deep:#053a5c;
  --sea1:#0aa3c2;
  --sea2:#0b6e9c;
  --sun:#ffd166;
  --coral:#ff8360;
  --foam:#eafaff;
  --card:rgba(4,42,68,.55);
  --line:rgba(255,255,255,.22);
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}

body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--foam);
  background:linear-gradient(180deg,#e8894a 0%,#e0687f 22%,#5f5cc4 48%,#145a8c 72%,#042b45 100%);
  min-height:100svh;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  -webkit-text-size-adjust:100%;
}

/* --- background --- */
.sky{
  position:fixed;inset:0;
  background:radial-gradient(120% 60% at 50% 10%,rgba(255,236,179,.3),transparent 60%);
  pointer-events:none;
}
.sun{
  position:fixed;left:50%;top:16vh;
  width:44vmin;height:44vmin;margin-left:-22vmin;
  border-radius:50%;
  background:radial-gradient(circle,var(--sun) 40%,rgba(255,177,102,.45) 70%,transparent 72%);
  filter:blur(2px);
  opacity:.7;
  animation:bob 9s ease-in-out infinite;
  pointer-events:none;
}
.sea{
  position:fixed;left:0;right:0;bottom:0;height:34svh;
  background:
    radial-gradient(100% 60% at 20% 0%,rgba(255,255,255,.16),transparent 60%),
    linear-gradient(180deg,var(--sea1),var(--sea2) 55%,var(--deep));
  border-radius:46% 46% 0 0/12% 12% 0 0;
  pointer-events:none;
}
@keyframes bob{50%{transform:translateY(-14px)}}

/* --- layout --- */
main{
  position:relative;z-index:1;
  width:100%;max-width:44rem;
  margin:0 auto;
  padding:max(1.4rem,env(safe-area-inset-top)) 1rem max(1.6rem,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:1rem;
  flex:1;
}

.head{text-align:center;margin-top:.5rem}
.kicker{
  font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:.95;
  text-shadow:0 2px 10px rgba(4,42,68,.7);
}
h1{
  font-size:clamp(3rem,17vw,6.5rem);
  line-height:.95;
  letter-spacing:.06em;
  font-weight:900;
  background:linear-gradient(180deg,#fff,var(--sun));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 6px 30px rgba(255,209,102,.35);
  margin:.15em 0;
}
.when{
  font-size:1rem;font-weight:700;
  text-shadow:0 2px 10px rgba(4,42,68,.7);
}

/* --- cards --- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:1.25rem;
  backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 10px 30px rgba(3,30,50,.45),inset 0 1px 0 rgba(255,255,255,.14);
}

.hero{padding:1rem .6rem}
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.3rem;
}
.unit{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.num{
  font-size:clamp(1.7rem,10vw,3.4rem);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  line-height:1;
  color:#fff;
  text-shadow:0 2px 12px rgba(3,30,50,.85);
}
.lbl{
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.92;text-align:center;
  text-shadow:0 1px 6px rgba(3,30,50,.8);
}

.row{display:grid;grid-template-columns:1fr;gap:.7rem}
.mini{
  padding:.9rem 1rem;
  display:flex;align-items:center;gap:.7rem;
}
.big{
  font-size:1.9rem;font-weight:900;font-variant-numeric:tabular-nums;
  color:var(--sun);
  text-shadow:0 2px 12px rgba(3,30,50,.8);
}
.mini .lbl{flex:1;text-align:left;font-size:.7rem}
.emoji{font-size:1.5rem}

.hype{
  text-align:center;
  font-size:1.05rem;font-weight:700;
  padding:.9rem 1rem;
  border-radius:1rem;
  background:linear-gradient(90deg,rgba(180,58,30,.55),rgba(150,90,20,.55));
  border:1px solid var(--line);
  text-shadow:0 2px 10px rgba(3,30,50,.8);
  min-height:3.2rem;
  display:flex;align-items:center;justify-content:center;
}

footer{
  margin-top:auto;
  text-align:center;
  font-size:.85rem;font-style:italic;
  opacity:.95;padding-top:1rem;
  text-shadow:0 2px 10px rgba(3,30,50,.8);
}

/* --- party mode --- */
body.party{animation:flash 2s ease-in-out infinite}
@keyframes flash{50%{filter:saturate(1.4) brightness(1.08)}}

/* --- tablet / desktop --- */
@media (min-width:600px){
  .row{grid-template-columns:repeat(3,1fr)}
  .mini{flex-direction:column;text-align:center;padding:1.2rem 1rem}
  .mini .lbl{text-align:center}
  .big{font-size:2.4rem}
  .hero{padding:1.6rem 1rem}
  .lbl{font-size:.7rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}