:root {
  --night: #0b1d3a;
  --red: #d62828;
  --green: #2a9d4b;
  --gold: #ffd23f;
  --ink: #111a2e;
  --paper: #fff8e7;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  color: var(--ink);
  background: radial-gradient(circle at 80% 8%, #fff7c2 0 22px, transparent 24px),
              linear-gradient(#0b1d3a, #1d3f72 70%, #2c5a94);
  background-attachment: fixed;
  overflow-x: hidden;
}

#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* blinking light chain */
.garland {
  position: fixed; top: 0; left: 0; right: 0; height: 22px; z-index: 4;
  background:
    radial-gradient(circle at 10px 8px, var(--red) 0 5px, transparent 6px),
    radial-gradient(circle at 30px 12px, var(--gold) 0 5px, transparent 6px),
    radial-gradient(circle at 50px 8px, var(--green) 0 5px, transparent 6px),
    radial-gradient(circle at 70px 12px, #4cc9f0 0 5px, transparent 6px);
  background-size: 80px 22px;
  animation: blink 1.2s steps(2) infinite;
  filter: drop-shadow(0 0 4px #fff8);
}
@keyframes blink { 50% { opacity: .45; } }

main { position: relative; z-index: 3; max-width: 480px; margin: 0 auto; padding: 32px 16px 140px; }

header { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-bottom: 12px; }
h1 { margin: 0; font-size: 2.4rem; line-height: .95; text-transform: uppercase; letter-spacing: 2px; }
h1 span { display: block; color: #fff; text-shadow: 3px 3px 0 var(--red), 6px 6px 0 var(--ink); animation: bob 2s ease-in-out infinite; }
h1 span + span { color: var(--gold); text-shadow: 3px 3px 0 var(--green), 6px 6px 0 var(--ink); animation-delay: -1s; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }

.santa { width: 120px; flex: none; overflow: visible; animation: hop 2.4s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-4px); } }
.santa .wave { transform-origin: 82px 92px; animation: wave .7s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-12deg); } to { transform: rotate(28deg); } }
.santa .pompom { animation: sway 1.4s ease-in-out infinite alternate; transform-origin: 74px 30px; }
@keyframes sway { to { transform: translate(3px, 3px); } }
.santa .eyes { animation: eyes 4s infinite; transform-origin: 55px 50px; }
@keyframes eyes { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

/* pixel-style cards */
.card {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 0 0 4px var(--gold), 8px 8px 0 4px rgba(0, 0, 0, .45);
  padding: 18px 16px;
  margin: 12px 4px 18px;
  animation: pop .35s steps(5);
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.card h2 { margin: 0 0 6px; font-size: 1.3rem; }
.card p { margin: 6px 0 12px; }
.hint small { opacity: .65; }

input[type=password], input[type=text] {
  width: 100%; font: inherit; padding: 12px; margin-bottom: 12px;
  border: 4px solid var(--ink); border-radius: 4px; background: #fff;
}
input:focus-visible { outline: 4px solid var(--gold); }

.btn {
  display: block; width: 100%; font: inherit; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;
  padding: 14px; color: #fff; background: var(--green);
  border: 4px solid var(--ink); border-radius: 4px; cursor: pointer;
  box-shadow: 0 6px 0 #14602b, 0 6px 0 4px var(--ink);
  transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 0 0 4px var(--ink); }
.btn:disabled { background: #8a9099; box-shadow: 0 6px 0 #5a6068, 0 6px 0 4px var(--ink); cursor: not-allowed; }
.btn.ghost { background: var(--red); box-shadow: 0 6px 0 #8c1515, 0 6px 0 4px var(--ink); margin: 24px 4px 0; width: calc(100% - 8px); }
.btn:not(:disabled):hover { filter: brightness(1.1); }
.row { display: flex; gap: 12px; }
.row .btn.ghost { margin: 0; width: auto; flex: 1; }
.row .btn { flex: 1; }

.err { color: var(--red); min-height: 1.2em; margin: 8px 0 0 !important; }
.ok { color: var(--green); min-height: 1.2em; margin: 10px 0 0 !important; text-align: center; }

/* HUD bar */
.hud { display: flex; justify-content: space-between; }
.bar { height: 22px; margin: 8px 0 10px; border: 4px solid var(--ink); background: #fff; overflow: hidden; }
.bar i {
  display: block; height: 100%; width: 0; transition: width .6s steps(8);
  background: repeating-linear-gradient(45deg, var(--red) 0 10px, #fff 10px 20px);
  animation: stripes 1s linear infinite; background-size: 28px 28px;
}
@keyframes stripes { to { background-position: 28px 0; } }

/* radio list */
ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
li label {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: #fff; border: 4px solid var(--ink); border-radius: 4px; cursor: pointer;
  transition: transform .1s; -webkit-tap-highlight-color: transparent;
}
li label:active { transform: scale(.97); }
li .av { font-size: 1.7rem; width: 2rem; text-align: center; }
li .nm { flex: 1; font-size: 1.15rem; }
li input { appearance: none; width: 28px; height: 28px; margin: 0; border: 4px solid var(--ink); border-radius: 50%; background: #fff; }
li label:has(input:checked) { background: #e4ffe9; border-color: var(--green); box-shadow: 0 0 0 4px var(--gold); transform: translateX(4px); }
li input:checked { background: radial-gradient(var(--red) 0 45%, #fff 50%); border-color: var(--green); }
li input:focus-visible { outline: 4px solid var(--gold); }

/* reveal */
.card.big { text-align: center; margin-top: 24px; }
.name {
  font-size: 3rem; margin: 14px 0; color: var(--red); text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--gold), 6px 6px 0 var(--ink); animation: bob 1s ease-in-out infinite;
  overflow-wrap: anywhere;
}

.modal {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 10, 25, .8);
}
.modal .card { width: 100%; max-width: 440px; margin: 0; }

/* snowy ground */
.hills {
  position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120px 60px at 15% 100%, #fff 98%, transparent),
    radial-gradient(160px 80px at 55% 100%, #e8f1ff 98%, transparent),
    radial-gradient(130px 56px at 90% 100%, #fff 98%, transparent);
}
.hills::before, .hills::after { position: absolute; bottom: 18px; font-size: 2.2rem; animation: hop 3s ease-in-out infinite; }
.hills::before { content: "🎄"; left: 8%; }
.hills::after { content: "⛄"; right: 10%; animation-delay: -1.2s; }

@media (min-width: 560px) { h1 { font-size: 3.2rem; } .santa { width: 150px; } }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }