:root {
  --green: #198754;
  --red: #7a0000;
  --ink: #1f2937;
  --muted: #5f6b7a;
  --card: rgba(255, 250, 240, .82);
  --border: rgba(255, 255, 255, .65);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 2rem;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,202,212,.75), transparent 30%),
    radial-gradient(circle at 85% 18%, rgba(196,225,255,.75), transparent 32%),
    radial-gradient(circle at 20% 85%, rgba(214,255,224,.75), transparent 34%),
    radial-gradient(circle at 82% 82%, rgba(255,238,180,.72), transparent 32%),
    linear-gradient(135deg, #ffe8f1, #e8f0ff 35%, #eafff2 68%, #fff6d8);
}

.snowfall { position: fixed; inset: 0; pointer-events: none;
            overflow: hidden; z-index: 0; aria-hidden: true; }

.snowflake {
  position: absolute;
  top: -12vh;
  color: rgba(255,255,255,.88);
  text-shadow: 0 0 12px rgba(255,255,255,.75);
  font-size: var(--size);
  left: var(--left);
  animation: fall var(--duration) linear infinite;
  animation-delay: var(--delay);
  opacity: var(--opacity);
}
@keyframes fall {
  0% { transform: translate3d(0,-12vh,0) rotate(0deg); }
  100% { transform: translate3d(var(--drift),115vh,0) rotate(360deg); }
}

main {
  position: relative; z-index: 1;
  width: min(100%, 620px);
  background: var(--card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(64,55,85,.16);
  padding: 2rem;
}
.eyebrow { font-size:.82rem; font-weight:700; letter-spacing:.03em; margin-bottom:1rem;}
h1{margin:0 0 .5rem;font-size:clamp(2rem,5vw,3rem);line-height:1.05;}
p{color:var(--muted);font-size:1.05rem;line-height:1.55;margin:0 0 1.5rem;}
label{display:block;font-weight:700;margin-bottom:.4rem;}
input{
  width:100%;border:1px solid rgba(160,150,135,.45);
  border-radius:12px;padding:.9rem 1rem;
  font-size:1rem;margin-bottom:.8rem;background:rgba(255,255,255,.82);}
button{width:100%;border:0;border-radius:12px;background:var(--green);
  color:#fff;font-weight:800;font-size:1rem;padding:.9rem 1rem;cursor:pointer;}
button:hover{filter:brightness(.95);} button:disabled{opacity:.7;cursor:wait;}
.hint{font-size:.82rem;color:var(--muted);margin-top:.45rem;}

.meter{
  height:10px;background:rgba(239,230,211,.8);
  border-radius:999px;overflow:hidden;margin:1.5rem 0 1rem;
  display:none;}
.meter>div{width:0;height:100%;background:var(--red);transition:width .25s ease;}

.status{min-height:1.5rem;color:var(--muted);
        margin-top:.75rem;text-align:center;}
.result{
  min-height:3rem;font-size:clamp(1.4rem,4vw,2.1rem);
  font-weight:900;text-align:center;margin-top:1rem;
}
.nice{color:var(--green);} .naughty{color:var(--red);}

.suggestion{
  font-size:1rem;color:var(--muted);margin-top:.4rem;
  font-weight: bold;
  padding: 5px 0 0 0;
  text-align:center;}

footer{
  border-top:1px solid rgba(160,150,135,.25);
  color:var(--muted);font-size:.85rem;margin-top:2rem;padding-top:1rem;
  line-height:1.5;}
@media (prefers-reduced-motion: reduce){
  .snowflake{animation:none;display:none;}
}