/* vegassidequest — mobile-first, no framework, no external fonts or CDNs.
   Palette: vegasfinalboss neon base + a warm gløgg layer (mulled red, cinnamon,
   almond). */

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

:root {
  /* neon base, inherited from vegasfinalboss */
  --bg: #08001a;
  --bg-2: #110026;
  --bg-3: #1a0033;
  --fg: #fff5e8;
  --muted: #9c8fb8;
  --gold: #ffcc33;
  --neon-pink: #ff2bd6;
  --neon-cyan: #00e5ff;
  --neon-green: #39ff14;
  --line: #2b1750;
  /* gløgg layer */
  --mulled: #8c1126;
  --mulled-2: #c3182f;
  --cinnamon: #a9601f;
  --almond: #e8d2a8;
  --steam: rgba(232, 210, 168, 0.55);
}

/* clip, not hidden — `hidden` kills position: sticky */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(ellipse at top right, rgba(255, 43, 214, 0.12), transparent 45%),
    radial-gradient(ellipse at bottom left, rgba(195, 24, 47, 0.14), transparent 50%),
    var(--bg);
  color: var(--fg);
  line-height: 1.55;
  font-size: 16px;
  min-height: 100vh;
  padding-bottom: 3rem;
}

a { color: var(--neon-cyan); text-decoration: none; }

/* [hidden] must come before any display rule that would override it */
[hidden] { display: none !important; }

h1, h2, h3 { line-height: 1.15; }

/* ========= 1 · HERO ========= */
.hero {
  position: relative;
  padding: 2.2rem 1rem 1.8rem;
  text-align: center;
  background:
    radial-gradient(ellipse at center top, rgba(195, 24, 47, 0.35), transparent 70%),
    #050010;
  border-bottom: 1px solid rgba(255, 43, 214, 0.4);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 72px, rgba(255, 204, 51, 0.05) 72px 73px);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 720px; margin: 0 auto; }
.hero-kicker {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 0.7rem;
}
.hero-title {
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--fg);
  text-shadow: 0 0 22px rgba(255, 43, 214, 0.7);
}
.hero-title-2 {
  display: block;
  color: var(--neon-cyan);
  text-shadow: 0 0 22px rgba(0, 229, 255, 0.7);
}
.hero-sub { margin-top: 0.8rem; color: var(--almond); font-size: 1rem; }
.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
.strip-cell {
  flex: 1 1 140px;
  background: rgba(10, 4, 26, 0.75);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.6rem;
}
.strip-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-weight: 800;
}
.strip-value {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold);
}
.hero-note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--muted); }

/* ========= sections ========= */
.sect { max-width: 720px; margin: 0 auto; padding: 2rem 1rem 0.5rem; }
.sect-head { margin-bottom: 1.1rem; }
.sect-num {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: var(--neon-pink);
  border: 1px solid rgba(255, 43, 214, 0.45);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  margin-bottom: 0.6rem;
}
.sect-head h2 { font-size: 1.5rem; font-weight: 900; }
.sect-sub { margin-top: 0.5rem; color: var(--muted); font-size: 0.92rem; }
.sect-sub strong { color: var(--almond); }

.card {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.card-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 0.7rem;
}

/* ========= 2 · NAME PILLS ========= */
.name-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.name-pill {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 120px;
  text-align: left;
  background: rgba(8, 0, 26, 0.8);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pill, var(--neon-pink));
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  color: var(--fg);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
}
.name-pill.active {
  border-color: var(--pill);
  background: rgba(255, 43, 214, 0.12);
  box-shadow: 0 0 14px rgba(255, 43, 214, 0.3);
}
.pill-name { display: block; font-weight: 800; }
.pill-role { display: block; font-size: 0.72rem; color: var(--muted); }
.name-hint { margin-top: 0.7rem; font-size: 0.82rem; color: var(--muted); }

/* ========= 2 · DATE GRID ========= */
.date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.date-card {
  position: relative;
  text-align: left;
  background: rgba(8, 0, 26, 0.8);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.6rem 0.65rem 0.65rem;
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  min-height: 92px;
}
.date-card.picked {
  border-color: var(--neon-green);
  background: rgba(57, 255, 20, 0.12);
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.22);
}
.date-card.winner {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255, 204, 51, 0.5), 0 0 18px rgba(255, 204, 51, 0.3);
}
.date-weekday {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.date-label { display: block; font-weight: 800; font-size: 1.02rem; margin-top: 0.1rem; }
.date-count { display: block; font-size: 0.76rem; color: var(--almond); margin-top: 0.15rem; }
.date-check {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  font-size: 0.95rem;
  color: var(--neon-green);
  opacity: 0;
  transition: opacity 0.15s;
}
.date-card.picked .date-check { opacity: 1; }

.badge {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  margin-top: 0.3rem;
}
.badge-pre {
  background: rgba(169, 96, 31, 0.3);
  border: 1px solid var(--cinnamon);
  color: var(--almond);
}
.badge-est {
  background: rgba(255, 204, 51, 0.18);
  border: 1px solid var(--gold);
  color: var(--gold);
}

.ballot-actions { margin-top: 0.9rem; }
.btn {
  width: 100%;
  font-family: inherit;
  font-size: 1rem; /* iOS zooms below 16px */
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  border: 1px solid var(--line);
  background: rgba(8, 0, 26, 0.9);
  color: var(--fg);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-done { border-color: rgba(57, 255, 20, 0.5); color: var(--neon-green); }
.btn-done.active { background: rgba(57, 255, 20, 0.16); }
.ballot-status { margin-top: 0.6rem; font-size: 0.84rem; color: var(--muted); }

/* ========= 2 · RESULT ========= */
.result-card { border-color: rgba(255, 204, 51, 0.35); }
.winner-box {
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
}
.winner-box.has-winner {
  border-style: solid;
  border-color: var(--gold);
  background: rgba(255, 204, 51, 0.1);
  box-shadow: 0 0 20px rgba(255, 204, 51, 0.22);
}
.winner-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  font-weight: 800;
  color: var(--gold);
}
.winner-date {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.25rem;
  font-weight: 900;
}
.tally-list { display: flex; flex-direction: column; gap: 0.3rem; }
.tally-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; }
.tally-date { flex: 0 0 5.6rem; color: var(--muted); }
.tally-bar {
  flex: 1 1 auto;
  height: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.tally-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mulled-2), var(--neon-pink));
  border-radius: 999px;
  transition: width 0.3s;
}
.tally-row.winner .tally-date { color: var(--gold); font-weight: 800; }
.tally-row.winner .tally-fill { background: linear-gradient(90deg, var(--cinnamon), var(--gold)); }
.tally-num { flex: 0 0 1.3rem; text-align: right; font-weight: 800; }

.who-box { margin-top: 1.1rem; }
.who-box h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.who-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.who-chip {
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  background: rgba(8, 0, 26, 0.8);
}
.who-done { border-color: rgba(57, 255, 20, 0.6); color: var(--neon-green); }
.who-voting { border-color: rgba(255, 204, 51, 0.6); color: var(--gold); }
.who-none { border-color: rgba(156, 143, 184, 0.5); color: var(--muted); }

.reset-row { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.btn-reset { border-color: rgba(255, 42, 69, 0.5); color: #ff6b7d; }
.reset-note { display: block; margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted); }

/* ========= 3 · GLØGG ========= */
.gloegg-card {
  border-color: rgba(195, 24, 47, 0.5);
  background: linear-gradient(160deg, #1d0511, #2a0713);
}
.fact-list { display: flex; flex-direction: column; gap: 0.8rem; }
.fact dt {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--cinnamon);
}
.fact dd { margin-top: 0.15rem; font-size: 0.94rem; }
.src { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--muted); }
.estimate-card { border-color: rgba(255, 204, 51, 0.4); }
.estimate-list { display: flex; flex-direction: column; gap: 0.9rem; }
.est-head { font-weight: 800; font-size: 0.92rem; }
.est-value { font-size: 0.94rem; color: var(--almond); }
.est-note { margin-top: 0.2rem; font-size: 0.76rem; color: var(--muted); }
.tone-card { border-color: rgba(169, 96, 31, 0.45); }
.tone-line { font-size: 0.95rem; color: var(--almond); }

/* ========= 4 · AGENDA ========= */
.agenda-list { display: flex; flex-direction: column; gap: 0.6rem; }
.agenda-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem;
}
.agenda-emoji { font-size: 1.3rem; line-height: 1.2; }
.agenda-item h3 { font-size: 0.98rem; }
.agenda-item p { font-size: 0.86rem; color: var(--muted); margin-top: 0.15rem; }

.big-link {
  display: block;
  margin-top: 1rem;
  border: 1px solid rgba(0, 229, 255, 0.5);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(0, 229, 255, 0.07);
}
.big-link-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: var(--neon-cyan);
}
.big-link-title { display: block; margin-top: 0.25rem; font-size: 1.05rem; font-weight: 900; color: var(--fg); }
.big-link-sub { display: block; margin-top: 0.25rem; font-size: 0.82rem; color: var(--muted); }

/* ========= 5 · MACHINES ========= */
.machine-card { border-color: rgba(255, 43, 214, 0.35); }
.machine-sub { font-size: 0.86rem; color: var(--muted); margin-bottom: 0.9rem; }
.wheel-stage { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.wheel { position: relative; width: 250px; height: 250px; max-width: 100%; }
.wheel-svg { width: 100%; height: 100%; display: block; }
.wheel-rim { fill: #0a0410; stroke: var(--gold); stroke-width: 4; }
.wheel-rotating {
  transform-origin: 0 0;
  transition: transform 4.2s cubic-bezier(0.17, 0.84, 0.34, 1);
}
.wheel-sector { stroke: rgba(0, 0, 0, 0.55); stroke-width: 1.5; opacity: 0.85; }
.wheel-sector.winner { opacity: 1; stroke: var(--fg); stroke-width: 2.5; }
.wheel-label { font-size: 11px; font-weight: 800; fill: #0a0410; letter-spacing: 0.05em; }
.wheel-label.winner { fill: #fff; }
.wheel-hub { fill: #140526; stroke: var(--gold); stroke-width: 3; }
.wheel-hub-text { font-size: 18px; }
.wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid var(--gold);
  z-index: 3;
}
.wheel.spinning .wheel-pointer { animation: ptrTick 0.12s steps(2) infinite; }
@keyframes ptrTick {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(-9deg); }
}
.wheel-readout, .slot-readout { text-align: center; }
.readout-name { display: block; font-weight: 900; font-size: 1.05rem; color: var(--gold); }
.readout-sub { display: block; font-size: 0.84rem; color: var(--muted); margin-top: 0.2rem; }
.btn-spin {
  margin-top: 1rem;
  border-color: rgba(255, 43, 214, 0.6);
  background: rgba(255, 43, 214, 0.14);
  color: var(--fg);
}
.btn-spin-slot { border-color: rgba(169, 96, 31, 0.7); background: rgba(169, 96, 31, 0.2); }

.payer-tally { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.payer-tally h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.payer-list { display: flex; flex-direction: column; gap: 0.3rem; }
.payer-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.payer-row[data-top="1"] .payer-name { color: var(--gold); font-weight: 800; }
.payer-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto; }
.payer-name { flex: 1 1 auto; }
.payer-num { font-weight: 800; }
.payer-empty { font-size: 0.84rem; color: var(--muted); }

.slot-stage { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.reels { display: flex; gap: 0.5rem; }
.reel {
  width: 4.2rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gold);
  border-radius: 10px;
  background: linear-gradient(180deg, #1d0511, #0a0410);
  font-size: 2rem;
}
.reel.spinning { filter: blur(1px); border-color: var(--neon-pink); }
.reel.landed { box-shadow: 0 0 16px rgba(255, 204, 51, 0.5); }

/* ========= FOOTER ========= */
.foot {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 1.2rem 1rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.foot-sub { margin-top: 0.4rem; font-size: 0.72rem; }

/* ========= wider screens ========= */
@media (min-width: 560px) {
  .hero-title { font-size: 2.8rem; }
  .date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wheel { width: 300px; height: 300px; }
}
@media (min-width: 760px) {
  .date-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-rotating { transition: none; }
  .wheel.spinning .wheel-pointer { animation: none; }
  .tally-fill { transition: none; }
}