/* Julespill: a Christmas game show broadcast from the living room.
   A navy Marius sweater with its red and white band, gold marquee lights, falling snow. */
:root {
  --navy: #0E1A3A;
  --navy-2: #17264D;
  --navy-deep: #0A1330;
  --snow: #F4F1EA;
  --muted: #B9C0D3;
  --line: rgba(244, 241, 234, 0.3);
  --red: #C42A1C;
  --gold: #F2B630;
  --gold-hot: #FFE08A;
  --pine: #2E6B52;
  --ink: #101426;
  --display: Anton, Impact, 'Arial Narrow Bold', sans-serif;
  --font: Archivo, 'Arial Narrow', system-ui, sans-serif;

  /* Motion: everything enters on the same decelerating curve, leaves on the accelerating one,
     and only things that land (stamps, ticks) get a small overshoot. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-land: cubic-bezier(0.34, 1.36, 0.64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  position: relative;
  background: var(--navy);
  color: var(--snow);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.95; margin: 0; }
.icon { width: 1.2em; height: 1.2em; flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The sweater: knitted body, the band on top, snow in front of the wool ---------- */
.sweater { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; }
.snowfall { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.band { position: relative; z-index: 2; flex: none; height: var(--band-h, 64px); background-repeat: repeat-x; box-shadow: 0 0.2rem 0.6rem rgba(5, 9, 26, 0.5); }

/* ---------- Marquee: a photo frame lined with bulbs, with snow piled on top ---------- */
.marquee { position: relative; padding: var(--bulb-pad, 1.24rem); background: var(--navy-deep); box-shadow: inset 0 0 0 2px rgba(242, 182, 48, 0.12); }
.marquee::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: -0.6rem;
  right: -0.6rem;
  top: -1.05rem;
  height: 1.9rem;
  background: url(/img/snowcap.svg) no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.bulbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bulbs i {
  position: absolute;
  width: 0.46rem;
  height: 0.46rem;
  margin: -0.23rem 0 0 -0.23rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0.35rem rgba(242, 182, 48, 0.55);
  animation: twinkle 2.4s ease-in-out infinite;
  animation-delay: calc(var(--k) * -0.8s);
  transition: opacity 0.6s, background 0.6s, box-shadow 0.6s;
}
.marquee.lit .bulbs i { animation: chase 0.75s linear infinite; animation-delay: calc(var(--k) * -0.25s); }
.marquee.off .bulbs i { animation: none; opacity: 0.18; background: var(--muted); box-shadow: none; }
@keyframes twinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes chase {
  0%, 30% { opacity: 1; background: var(--gold-hot); box-shadow: 0 0 0.6rem 0.1rem rgba(255, 224, 138, 0.85); }
  34%, 100% { opacity: 0.35; background: var(--gold); box-shadow: none; }
}

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  min-height: 44px;
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 0.55em 1.1em;
  background: transparent;
  color: var(--snow);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), opacity 0.2s, border-color 0.2s, background 0.2s;
  user-select: none;
}
.btn:hover { border-color: var(--snow); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .plate:focus-visible, .choice:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn.primary {
  border: 0;
  background: var(--red);
  color: var(--snow);
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 0.45rem 0 var(--gold);
}
.btn.primary:hover { transform: translateY(-0.1rem); box-shadow: 0 0.55rem 0 var(--gold); }
.btn.primary:active { transform: translateY(0.3rem); box-shadow: 0 0.15rem 0 var(--gold); transition-duration: 0.06s; }
.btn.icon-only { padding: 0; width: 3rem; height: 3rem; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.muted { color: var(--muted); }

/* ---------- Avatars ---------- */
.avatar {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--snow);
}
.avatar[data-swatch='gold'] { background: var(--gold); color: var(--ink); }
.avatar[data-swatch='snow'] { background: var(--snow); color: var(--ink); }
.avatar[data-swatch='pine'] { background: var(--pine); color: var(--snow); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar span { font-family: var(--display); font-size: calc(var(--size) * 0.46); line-height: 1; }

/* ---------- Banners ---------- */
.offline {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  background: var(--gold);
  color: var(--ink);
  font-weight: 800;
  padding: 0.6em 1.2em;
  transition: transform 0.35s var(--ease-out);
  z-index: 50;
  white-space: nowrap;
}
.offline.show { transform: translate(-50%, 0); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 300%);
  background: var(--snow);
  color: var(--ink);
  padding: 0.7em 1.2em;
  font-weight: 700;
  transition: transform 0.4s var(--ease-out);
  z-index: 60;
  max-width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 0.3rem 0 var(--red);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- The knitted curtain between scenes ---------- */
.curtain { position: fixed; inset: 0; z-index: 45; overflow: hidden; }
.curtain canvas { position: absolute; left: 0; top: 0; display: block; clip-path: inset(100% 0 0 0); }
.curtain.knitting canvas { animation: knit-up 0.56s steps(var(--rows, 80)) forwards; }
.curtain.unravel canvas { clip-path: inset(0); animation: unravel 0.52s steps(var(--rows, 80)) forwards; }
.curtain.fade-in canvas { clip-path: inset(0); animation: fade-in 0.2s both; }
.curtain.fade-out { animation: fade-out 0.2s both; }
.curtain.fade-out canvas { clip-path: inset(0); }
@keyframes knit-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes unravel { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
.curtain-title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--band-top) - 2rem);
  transform: translateY(-100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  pointer-events: none;
}
.curtain-title > * { opacity: 0; transform: translateY(1.2rem); transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out); }
.curtain-title > :nth-child(2) { transition-delay: 0.08s; }
.curtain.titled .curtain-title > * { opacity: 1; transform: none; }
.curtain.unravel .curtain-title > * { transition-duration: 0.2s; transition-timing-function: var(--ease-in); }
.c-kicker { font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--gold); }
.c-kicker small { font-size: 0.62em; color: var(--muted); }
.c-title { font-family: var(--display); font-size: 7.5rem; line-height: 0.9; text-transform: uppercase; color: var(--snow); text-shadow: 0 0.3rem 0 rgba(5, 9, 26, 0.6); }
.c-star { width: 6rem; height: 6rem; }

/* ---------- Shared motion ---------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(0.9rem); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-1.2rem) scale(0.96); } }
@keyframes leave { to { opacity: 0; transform: scale(0.94); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes land { from { opacity: 0; transform: scale(0.4); } }
@keyframes tick { from { transform: scale(1.28); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.2) rotate(-24deg); }
  70% { opacity: 1; transform: scale(0.94) rotate(14deg); }
  100% { opacity: 1; transform: scale(1) rotate(12deg); }
}
@keyframes thud { 40% { transform: translateY(0.25rem); } }
.leave { animation: leave 0.26s var(--ease-in) forwards; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .bulbs i { animation: none !important; opacity: 0.8; }
}