/* Reset + page chrome. All values come from variables.css. */
* { box-sizing: border-box; margin: 0; }

html, body { min-height: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--c-ink);
  line-height: 1.55;
  background-color: var(--c-bg);
  /* generated asset: playful polka-dot paper, no image files */
  background-image: radial-gradient(var(--c-bg-dots) 2.5px, transparent 2.5px);
  background-size: 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-bottom: 4rem;
}

/* generated decoration: big soft color blobs in the corners */
body::before, body::after {
  content: '';
  position: fixed;
  width: 60vmin; height: 60vmin;
  border-radius: 50%;
  z-index: -1;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
}
body::before {
  top: -25vmin; left: -20vmin;
  background: radial-gradient(circle, var(--c-teal), transparent 70%);
}
body::after {
  bottom: -25vmin; right: -20vmin;
  background: radial-gradient(circle, var(--c-pink), transparent 70%);
}

h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.15; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--c-accent); color: var(--c-ink); }

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  width: 100%;
  max-width: var(--maxw-wide);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem var(--pad);
}
.topbar .logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  text-decoration: none;
  color: var(--c-ink);
  transform: rotate(-2deg);
}
.topbar .logo span { color: var(--c-primary); }
.topbar .logo img { width: 2rem; height: 2rem; object-fit: contain; vertical-align: -0.42rem; margin-right: 0.22rem; }
.topbar .spacer { flex: 1; }

/* ── screens ─────────────────────────────────────────────── */
main {
  width: 100%;
  max-width: var(--maxw);
  padding: 0 var(--pad);
}
main.wide { max-width: var(--maxw-wide); }

.screen { display: none; }
.screen.active { display: block; animation: screen-in var(--t-slow) var(--bounce) both; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ── overlays ────────────────────────────────────────────── */
#fx {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
}

#toast-zone {
  position: fixed;
  bottom: 1.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: 60;
  width: min(92vw, 420px);
}

#countdown {
  position: fixed;
  top: 0.9rem; right: 1rem;
  z-index: 40;
  display: none;
}
#countdown.show { display: block; }

/* ── chronicle (live event feed, fills the left rail) ────── */
#chronicle {
  position: fixed;
  left: 1rem; top: 5.5rem;
  width: 250px;
  max-height: 72vh;
  overflow: hidden;
  display: none;
  z-index: 10;
}
@media (min-width: 1240px) {
  body.in-room #chronicle { display: block; }
}
#chronicle h4 { font-family: var(--font-display); font-size: var(--fs-sm); margin-bottom: 0.5rem; }
.chron-item {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-ink-soft);
  padding: 0.3rem 0.55rem;
  margin-bottom: 0.3rem;
  border-left: 3px solid var(--c-line);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--c-surface) 65%, transparent);
  animation: screen-in var(--t-med) var(--bounce) both;
}
.chron-item:first-child { border-left-color: var(--c-accent); color: var(--c-ink); }

/* ── splash overlay (round intros, genre shifts) ─────────── */
#splash {
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  z-index: 70;
  pointer-events: none;
}
#splash.show { display: grid; }
#splash .splash-card {
  background: var(--c-accent);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 1.2rem 2.6rem;
  text-align: center;
  animation: splash-pop 1.7s var(--bounce) both;
}
#splash .big { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; }
#splash .small { font-weight: 700; font-size: var(--fs-lg); }
@keyframes splash-pop {
  0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  12% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  22% { transform: scale(1) rotate(0); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.06); }
}

/* ── modal ───────────────────────────────────────────────── */
#modal {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--c-ink) 45%, transparent);
  display: none;
  place-items: center;
  z-index: 80;
  padding: 1rem;
}
#modal.show { display: grid; }
.modal-card {
  position: relative;
  max-width: 540px; width: 100%;
  max-height: 85vh; overflow: auto;
  animation: screen-in var(--t-med) var(--bounce) both;
}
.modal-close { position: absolute; top: 0.7rem; right: 0.7rem; }

.site-footer { margin-top: auto; padding: 1.5rem var(--pad) 0; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.site-footer a, .link-button { color: inherit; font: inherit; text-decoration: underline; }
.link-button { border: 0; background: transparent; padding: 0; margin-left: 0.9rem; }

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}