:root {
  --neon-pink:    #ff2bd6;
  --neon-yellow:  #ffe600;
  --neon-cyan:    #00f0ff;
  --neon-purple:  #7a00ff;
  --neon-orange:  #ff7a00;
  --bg-deep:      #0a0014;
  --bg-mid:       #14002b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* iOS Safari/Chrome: 100vh includes the URL bar; svh/dvh don't. Both fall back gracefully. */
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 43, 214, 0.30), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(0, 240, 255, 0.25), transparent 55%),
    radial-gradient(ellipse at 60% 30%, rgba(255, 230, 0, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 50%, var(--bg-deep) 100%);
  color: #fff;
  font-family: 'Bungee', system-ui, sans-serif;
  overflow-x: hidden;
  text-align: center;
  /* Stops elastic horizontal overscroll on iOS exposing the gradient seams. */
  overscroll-behavior-x: none;
  /* Crisper text on iOS retina. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kill the grey iOS tap highlight; we have our own :active styles. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Respect users who prefer reduced motion — kill the heavy animations
   (marquee scrolling, hue rotate, blink, slide-in) but keep static layout
   so the design still reads. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* iOS auto-zooms inputs whose font-size is < 16px. Force >=16px on every input
   while preserving the existing visual look. The override is scoped to form
   controls so the rest of the design (10–14px display labels) is unaffected. */
input, select, textarea, button {
  font-size: 16px;
}

/* Long-press text selection on touch UI is rarely useful and produces selection
   handles that overlap the neon glow. Keep selection on actual text/inputs only. */
.title, .badge, .tagline, .slide-kind, .slide-title,
.countdown, .slideshow-title, .rego-title, .evrego-title,
.reveal-banner, .board-title, .podium-banner,
.marquee, .slide-nav, .slide-dot, .cap-pill,
.evrego-add, .rego-submit, .board-tab,
.admin-phases button, .admin-resets button,
.podium-block, .team-card-name {
  -webkit-user-select: none;
  user-select: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.03) 0 1px, transparent 1px 80px);
  z-index: 0;
}

/* CRT scanlines */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
  z-index: 9999;
}

/* Subtle film grain */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  z-index: 9998;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* ------- Marquees ------- */
.marquee {
  position: fixed;
  left: 0; right: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  letter-spacing: 0.15em;
  padding: 10px 0;
  z-index: 5;
  border-top: 3px solid var(--neon-pink);
  border-bottom: 3px solid var(--neon-pink);
}
.marquee.top {
  top: 0;
  background: var(--neon-yellow);
  color: #000;
  /* Respect iPhone notch / Dynamic Island. */
  padding-top: max(10px, env(safe-area-inset-top));
}
.marquee.bottom {
  bottom: 0;
  background: var(--neon-cyan);
  color: #000;
  border-color: var(--neon-purple);
  /* Respect iPhone home-indicator area. */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
@media (max-width: 540px) {
  .marquee { font-size: 11px; padding-top: 6px; padding-bottom: 6px; }
  .marquee.top    { padding-top: max(6px, env(safe-area-inset-top)); }
  .marquee.bottom { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}
.marquee span {
  display: inline-block;
  padding-right: 1em;
  animation: scroll 30s linear infinite;
}
.marquee.bottom span { animation: scroll-rev 30s linear infinite; }
@keyframes scroll      { 0% { transform: translateX(0); }    100% { transform: translateX(-100%); } }
@keyframes scroll-rev  { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }

/* ------- Stage ------- */
.stage {
  position: relative;
  z-index: 10;
  padding:
    calc(100px + env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    calc(110px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 540px) {
  .stage {
    padding-top:    calc(76px + env(safe-area-inset-top));
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
    padding-left:   max(12px, env(safe-area-inset-left));
    padding-right:  max(12px, env(safe-area-inset-right));
  }
}

.badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #000;
  background: var(--neon-yellow);
  border: 3px solid #000;
  box-shadow: 6px 6px 0 var(--neon-pink);
  transform: rotate(-2deg);
  animation: wobble 4s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* ------- Title ------- */
.title {
  font-family: 'Monoton', 'Bungee', sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 12vw, 180px);
  line-height: 0.95;
  margin: 10px 0 8px;
  letter-spacing: 0.02em;
  color: var(--neon-yellow);
  text-shadow:
    0 0 8px var(--neon-yellow),
    0 0 24px var(--neon-pink),
    6px 6px 0 var(--neon-pink),
    12px 12px 0 var(--neon-purple);
  animation: hue 8s linear infinite;
  /* The title is the secret admin trigger — give it a clear-enough cursor on devices
     that can show one, while keeping it neutral on touch screens. */
  cursor: default;
}
.title .word { display: block; }
.title .word:nth-child(2) {
  color: var(--neon-cyan);
  text-shadow:
    0 0 8px var(--neon-cyan),
    0 0 24px var(--neon-purple),
    6px 6px 0 var(--neon-purple),
    12px 12px 0 var(--neon-pink);
}
.title .word:nth-child(3) {
  color: var(--neon-pink);
  text-shadow:
    0 0 8px var(--neon-pink),
    0 0 24px var(--neon-yellow),
    6px 6px 0 var(--neon-yellow),
    12px 12px 0 var(--neon-cyan);
}
@keyframes hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

.tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.6vw, 16px);
  letter-spacing: 0.25em;
  color: #fff;
  margin: 14px 0 50px;
  text-shadow: 0 0 8px var(--neon-cyan);
}

/* ------- Countdown ------- */
.countdown-wrap {
  margin: 40px auto 0;
  max-width: 900px;
}

.countdown-label {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(12px, 2vw, 22px);
  letter-spacing: 0.18em;
  margin-bottom: 26px;
  color: var(--neon-yellow);
  text-shadow: 0 0 10px var(--neon-yellow), 0 0 24px var(--neon-orange);
  animation: blink 1.6s steps(2, end) infinite;
}
@keyframes blink {
  0%, 70% { opacity: 1; }
  71%, 100% { opacity: 0.55; }
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

.countdown .unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;             /* equal distribution on narrow screens */
  min-width: 0;            /* allow shrinking below 72px on phones */
  max-width: 160px;
  padding: 18px 14px;
  background: #000;
  border: 4px solid var(--neon-pink);
  border-radius: 8px;
  box-shadow:
    inset 0 0 18px rgba(255, 43, 214, 0.45),
    0 0 16px rgba(255, 43, 214, 0.45),
    8px 8px 0 var(--neon-purple);
}

.countdown .num {
  font-family: 'Bungee Shade', 'Bungee', monospace;
  font-size: clamp(38px, 9vw, 96px);
  line-height: 1;
  color: var(--neon-yellow);
  text-shadow:
    0 0 6px var(--neon-yellow),
    0 0 14px var(--neon-orange);
  font-variant-numeric: tabular-nums;
}

.countdown .lbl {
  margin-top: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  color: var(--neon-cyan);
}

.countdown .sep {
  font-family: 'Bungee Shade', monospace;
  font-size: clamp(38px, 9vw, 96px);
  color: var(--neon-pink);
  align-self: center;
  animation: blink 1.2s steps(2, end) infinite;
  flex: 0 0 auto;
}
@media (max-width: 540px) {
  .countdown        { gap: 4px; }
  .countdown .unit  { padding: 10px 4px; border-width: 3px; box-shadow: 4px 4px 0 var(--neon-purple); }
  .countdown .sep   { font-size: 28px; }
  .countdown .num   { font-size: clamp(26px, 11vw, 44px); }
  .countdown .lbl   { font-size: 8px; letter-spacing: 0.1em; margin-top: 6px; }
}

.status {
  margin-top: 28px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--neon-cyan);
  opacity: 0.75;
  min-height: 14px;
}
.status.error { color: var(--neon-pink); }

/* ------- Slideshow (Phase 2) ------- */
.slideshow {
  margin: 80px auto 0;
  max-width: 1000px;
  text-align: left;
}

.slideshow-header {
  text-align: center;
  margin-bottom: 28px;
}

.slideshow-title {
  font-family: 'Monoton', 'Bungee', sans-serif;
  font-size: clamp(36px, 7vw, 84px);
  margin: 0;
  letter-spacing: 0.05em;
  color: var(--neon-cyan);
  text-shadow:
    0 0 8px var(--neon-cyan),
    6px 6px 0 var(--neon-purple),
    12px 12px 0 var(--neon-pink);
}

.slideshow-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 1.2vw, 12px);
  letter-spacing: 0.18em;
  color: var(--neon-yellow);
  margin-top: 14px;
}

.slide-stage {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.slide-frame {
  flex: 1;
  min-height: 460px;
  background: #000;
  border: 4px solid var(--neon-yellow);
  border-radius: 10px;
  box-shadow:
    inset 0 0 22px rgba(255, 230, 0, 0.30),
    0 0 18px rgba(255, 230, 0, 0.35),
    10px 10px 0 var(--neon-pink);
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
  outline: none;
}
.slide-frame:focus-visible {
  box-shadow:
    inset 0 0 22px rgba(0, 240, 255, 0.5),
    0 0 22px rgba(0, 240, 255, 0.6),
    10px 10px 0 var(--neon-pink);
  border-color: var(--neon-cyan);
}

.slide-nav {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  font-family: 'Bungee Shade', monospace;
  font-size: 28px;
  background: var(--neon-pink);
  color: #000;
  border: 3px solid #000;
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--neon-yellow);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.slide-nav:hover    { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--neon-yellow); }
.slide-nav:active   { transform: translate(2px, 2px);   box-shadow: 2px 2px 0 var(--neon-yellow); }
.slide-nav:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: 4px 4px 0 var(--neon-purple); }

.slide {
  animation: slidein 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes slidein {
  from { opacity: 0; transform: translateX(28px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}

.slide-kind {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 6px 12px;
  margin-bottom: 14px;
  background: var(--neon-cyan);
  color: #000;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--neon-purple);
}
.slide-kind.ceremony { background: var(--neon-orange); }

.slide-title {
  font-family: 'Bungee', sans-serif;
  font-size: clamp(28px, 4.5vw, 52px);
  margin: 4px 0 6px;
  color: var(--neon-yellow);
  text-shadow: 0 0 8px var(--neon-yellow), 4px 4px 0 var(--neon-pink);
  letter-spacing: 0.02em;
}

.slide-tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 0.15em;
  color: var(--neon-cyan);
  margin: 0 0 18px;
}

.slide-description {
  font-family: 'Bungee', sans-serif;
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.5;
  color: #fff;
  margin: 0 0 16px;
}

.slide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.slide-stat {
  background: rgba(122, 0, 255, 0.25);
  border: 2px solid var(--neon-purple);
  padding: 10px 12px;
}
.slide-stat .k {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--neon-cyan);
  margin-bottom: 6px;
}
.slide-stat .v {
  font-family: 'Bungee', sans-serif;
  font-size: 16px;
  color: #fff;
}

.slide-section-heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--neon-pink);
  margin: 18px 0 10px;
  text-shadow: 0 0 6px var(--neon-pink);
}

.slide-rules,
.slide-rounds {
  margin: 0 0 14px;
  padding-left: 22px;
}
.slide-rules li,
.slide-rounds li {
  font-family: 'Bungee', sans-serif;
  font-size: clamp(12px, 1.4vw, 15px);
  line-height: 1.45;
  margin-bottom: 6px;
  color: #fff;
}
.slide-rules li::marker  { color: var(--neon-yellow); }
.slide-rounds li::marker { color: var(--neon-cyan); }

.slide-rounds .round-pts {
  color: var(--neon-yellow);
  font-weight: 700;
}

.slide-scoring {
  margin-top: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--neon-orange);
  padding: 10px 12px;
  background: rgba(255, 122, 0, 0.10);
  border-left: 4px solid var(--neon-orange);
  line-height: 1.6;
}

.slide-loading {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--neon-cyan);
  text-align: center;
  padding: 60px 0;
  animation: blink 1.2s steps(2, end) infinite;
}

.slide-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.slide-dot {
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px solid var(--neon-yellow);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.slide-dot:hover  { transform: scale(1.2); }
.slide-dot.active {
  background: var(--neon-pink);
  border-color: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink);
  transform: scale(1.15);
}

.slide-hint {
  text-align: center;
  margin-top: 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #fff;
  opacity: 0.55;
}

.slideshow.playing .slide-hint::before {
  content: "▶ AUTO-PLAY · ";
  color: var(--neon-yellow);
}

@media (max-width: 640px) {
  .slide-frame  { min-height: 360px; padding: 16px 14px; }
  .slideshow    { margin-top: 60px; }

  /* Stack: frame on top, arrows below in a row. Frees frame to use full width. */
  .slide-stage  { flex-direction: column; gap: 12px; }
  .slide-nav    {
    width: 64px;          /* >= Apple HIG 44px touch target */
    height: 44px;
    font-size: 22px;
    order: 2;             /* sit below the frame */
  }
  .slide-frame  { order: 1; width: 100%; }
  /* Wrap both buttons in their natural source order (prev, then next) but layout side-by-side. */
  .slide-stage::after {
    content: "";
  }
  .slide-prev { margin-right: auto; }
  .slide-next { margin-left:  auto; }
  /* Force arrows onto the same row even though they're separate siblings. */
  .slide-stage  { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "frame frame" "prev next"; gap: 12px; }
  .slide-frame  { grid-area: frame; }
  #slide-prev   { grid-area: prev; width: 100%; }
  #slide-next   { grid-area: next; width: 100%; }
}

/* ------- Team registration (Phase 3) ------- */
.rego {
  margin: 100px auto 0;
  max-width: 760px;
  text-align: left;
}

.rego-header {
  text-align: center;
  margin-bottom: 36px;
}

.rego-title {
  font-family: 'Monoton', 'Bungee', sans-serif;
  font-size: clamp(34px, 6.5vw, 72px);
  margin: 0;
  letter-spacing: 0.05em;
  color: var(--neon-pink);
  text-shadow:
    0 0 10px var(--neon-pink),
    5px 5px 0 var(--neon-purple),
    10px 10px 0 var(--neon-cyan);
}

.rego-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 1.1vw, 12px);
  letter-spacing: 0.18em;
  color: var(--neon-yellow);
  margin-top: 14px;
}

.rego-form {
  background: #000;
  border: 4px solid var(--neon-cyan);
  border-radius: 10px;
  padding: 26px 28px;
  box-shadow:
    inset 0 0 22px rgba(0, 240, 255, 0.20),
    10px 10px 0 var(--neon-pink);
}

.field {
  display: block;
  margin-bottom: 24px;
}

.field-label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--neon-cyan);
  margin-bottom: 10px;
  text-shadow: 0 0 6px var(--neon-cyan);
}

.rego-form input[type="text"] {
  width: 100%;
  background: rgba(0, 240, 255, 0.06);
  border: 2px solid var(--neon-purple);
  color: #fff;
  font-family: 'Bungee', sans-serif;
  font-size: 18px;
  min-height: 48px;            /* generous touch target */
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.rego-form input[type="text"]:focus {
  border-color: var(--neon-yellow);
  background: rgba(255, 230, 0, 0.08);
  box-shadow: 0 0 12px rgba(255, 230, 0, 0.45);
}
.rego-form input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Bungee', sans-serif;
}

.members-set {
  border: none;
  padding: 0;
  margin: 0 0 22px;
}

.member-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

.member-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cap-pill {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bungee', sans-serif;
  font-size: 18px;
  color: #fff;
  background: transparent;
  border: 2px solid var(--neon-purple);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.cap-pill:hover {
  border-color: var(--neon-yellow);
  color: var(--neon-yellow);
}
input[type="radio"]:checked + .cap-pill {
  background: var(--neon-yellow);
  border-color: var(--neon-yellow);
  color: #000;
  box-shadow: 0 0 10px var(--neon-yellow);
}
input[type="radio"]:focus-visible + .cap-pill {
  outline: 2px dashed var(--neon-cyan);
  outline-offset: 3px;
}

.member-row .member-name {
  flex: 1 1 auto;
}

.member-remove {
  flex: 0 0 auto;
  width: 44px;
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  background: transparent;
  color: var(--neon-pink);
  border: 2px solid var(--neon-pink);
  cursor: pointer;
  transition: all 0.12s ease;
}
.member-remove:hover {
  background: var(--neon-pink);
  color: #000;
}
.member-remove[hidden] { display: none; }

.rego-error,
.rego-success {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.6;
  padding: 12px 14px;
  margin: 0 0 18px;
  border: 2px solid;
}
.rego-error {
  color: var(--neon-pink);
  border-color: var(--neon-pink);
  background: rgba(255, 0, 200, 0.10);
}
.rego-success {
  color: #b4ff39;
  border-color: #b4ff39;
  background: rgba(180, 255, 57, 0.10);
}

.rego-submit {
  display: block;
  width: 100%;
  font-family: 'Bungee Shade', monospace;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 0.1em;
  background: var(--neon-yellow);
  color: #000;
  border: 4px solid #000;
  padding: 16px 20px;
  cursor: pointer;
  box-shadow: 8px 8px 0 var(--neon-pink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.rego-submit:hover    { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 var(--neon-pink); }
.rego-submit:active   { transform: translate(3px, 3px);   box-shadow: 4px 4px 0 var(--neon-pink); }
.rego-submit:disabled { opacity: 0.5; cursor: progress;   box-shadow: 4px 4px 0 var(--neon-purple); }

.teams-list-wrap {
  margin-top: 48px;
}

.teams-list-heading {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(12px, 1.5vw, 16px);
  letter-spacing: 0.2em;
  color: var(--neon-yellow);
  text-align: center;
  margin: 0 0 22px;
  text-shadow: 0 0 8px var(--neon-yellow);
}

.teams-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  counter-reset: team;
}

.teams-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
  padding: 24px;
}

.team-card {
  counter-increment: team;
  position: relative;
  background: #000;
  border: 3px solid var(--neon-purple);
  padding: 16px 18px 16px 44px;
  box-shadow: 5px 5px 0 var(--neon-cyan);
  animation: slidein 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.team-card::before {
  content: counter(team, decimal-leading-zero);
  position: absolute;
  top: 12px;
  left: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--neon-yellow);
}

.team-card-name {
  font-family: 'Bungee', sans-serif;
  font-size: 20px;
  color: var(--neon-pink);
  margin: 0 0 10px;
  word-break: break-word;
}

.team-card-members {
  list-style: none;
  padding: 0;
  margin: 0;
}
.team-card-members li {
  font-family: 'Bungee', sans-serif;
  font-size: 14px;
  color: #fff;
  padding: 3px 0;
}
.team-card-members li.captain::after {
  content: " ★ CAP";
  color: var(--neon-yellow);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  margin-left: 6px;
}

@media (max-width: 640px) {
  .rego          { margin-top: 70px; }
  .rego-form     { padding: 18px 18px; }
  .cap-pill,
  .member-remove { width: 44px; min-height: 44px; }     /* Apple HIG minimum */
}

/* Tighten vertical rhythm on small screens so users don't have to scroll a marathon
   between sections during the party. */
@media (max-width: 540px) {
  .evrego, .reveal, .board, .podium { margin-top: 64px; }
  .reveal-grid    { gap: 18px; }
  .reveal-block   { padding: 16px 14px; box-shadow: 5px 5px 0 var(--neon-cyan); }
  .teams-list     { grid-template-columns: 1fr; gap: 12px; }
  .evrego-list    { grid-template-columns: 1fr; gap: 14px; }
  .evrego-card    { padding: 14px 14px; box-shadow: 4px 4px 0 var(--neon-pink); }
  .reveal-banner  { line-height: 0.9; }
}

/* ------- Event registration (Phase 4) ------- */
.evrego {
  margin: 100px auto 0;
  max-width: 1100px;
  text-align: left;
}
.evrego-header {
  text-align: center;
  margin-bottom: 36px;
}
.evrego-title {
  font-family: 'Monoton', sans-serif;
  font-size: clamp(34px, 6.5vw, 72px);
  margin: 0;
  letter-spacing: 0.05em;
  color: var(--neon-orange);
  text-shadow: 0 0 10px var(--neon-orange), 5px 5px 0 var(--neon-purple), 10px 10px 0 var(--neon-cyan);
}
.evrego-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 1.1vw, 12px);
  letter-spacing: 0.18em;
  color: var(--neon-yellow);
  margin-top: 14px;
}
.evrego-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}
.evrego-loading {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--neon-cyan);
  padding: 30px 0;
}
.evrego-card {
  background: #000;
  border: 3px solid var(--neon-cyan);
  padding: 18px 20px;
  box-shadow: 6px 6px 0 var(--neon-pink);
}
.evrego-card.full       { border-color: var(--neon-pink); }
.evrego-card.no-rego    { border-color: var(--neon-purple); opacity: 0.7; }

.evrego-card-title {
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  color: var(--neon-yellow);
  margin: 0 0 4px;
  text-shadow: 0 0 6px var(--neon-yellow);
}
.evrego-card-meta {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--neon-cyan);
  margin: 0 0 14px;
}
.evrego-card-meta .fill {
  color: var(--neon-pink);
  margin-left: 8px;
}

.evrego-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.evrego-controls select,
.evrego-controls input {
  font-family: 'Bungee', sans-serif;
  background: rgba(0, 240, 255, 0.05);
  color: #fff;
  border: 2px solid var(--neon-purple);
  padding: 10px 12px;
  min-height: 44px;
  font-size: 16px;            /* iOS no-zoom threshold */
  flex: 1 1 130px;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.evrego-controls select:focus,
.evrego-controls input:focus {
  outline: none;
  border-color: var(--neon-yellow);
  background: rgba(255, 230, 0, 0.08);
}

.evrego-add {
  width: 100%;
  margin-top: 4px;
  font-family: 'Bungee', sans-serif;
  background: var(--neon-yellow);
  color: #000;
  border: 3px solid #000;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--neon-pink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.evrego-add:hover    { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--neon-pink); }
.evrego-add:active   { transform: translate(2px,2px);   box-shadow: 2px 2px 0 var(--neon-pink); }
.evrego-add:disabled { opacity: 0.5; cursor: not-allowed; }

.evrego-entrants {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.evrego-entrants li {
  font-family: 'Bungee', sans-serif;
  font-size: 12px;
  background: rgba(122, 0, 255, 0.25);
  border: 1px solid var(--neon-purple);
  color: #fff;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.evrego-entrants .rd {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--neon-yellow);
}
.evrego-entrants .x {
  background: transparent;
  color: var(--neon-pink);
  border: none;
  cursor: pointer;
  font-family: 'Bungee', sans-serif;
  font-size: 18px;
  padding: 0 6px;
  min-width: 28px;             /* a bit more thumb space */
  line-height: 1;
}
.evrego-entrants .x:hover { color: var(--neon-yellow); }

.evrego-error {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--neon-pink);
  margin: 8px 0 0;
  letter-spacing: 0.1em;
}

.evrego-empty-state {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  padding: 24px;
}

/* ------- Phase 5 Reveal ------- */
.reveal {
  margin: 100px auto 0;
  max-width: 1100px;
  text-align: center;
}
.reveal-banner {
  font-family: 'Bungee Shade', sans-serif;
  font-size: clamp(40px, 9vw, 110px);
  letter-spacing: 0.04em;
  color: var(--neon-yellow);
  text-shadow: 0 0 12px var(--neon-yellow), 6px 6px 0 var(--neon-pink), 12px 12px 0 var(--neon-cyan);
  margin: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }
.reveal-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.5vw, 14px);
  letter-spacing: 0.2em;
  color: var(--neon-cyan);
  margin: 18px 0 50px;
}
.reveal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  text-align: left;
}
@media (max-width: 720px) {
  .reveal-grid { grid-template-columns: 1fr; }
}
.reveal-block {
  background: #000;
  border: 4px solid var(--neon-pink);
  padding: 22px 24px;
  box-shadow: 8px 8px 0 var(--neon-cyan);
}
.reveal-heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
  margin: 0 0 16px;
  text-align: center;
}
.reveal-teams { display: grid; gap: 10px; }
.reveal-team {
  background: rgba(255, 0, 200, 0.08);
  border-left: 4px solid var(--neon-pink);
  padding: 8px 12px;
}
.reveal-team .nm {
  font-family: 'Bungee', sans-serif;
  font-size: 18px;
  color: var(--neon-cyan);
}
.reveal-team .members {
  font-family: 'Bungee', sans-serif;
  font-size: 13px;
  color: #fff;
  opacity: 0.85;
  margin-top: 2px;
}
.reveal-events { list-style: none; padding: 0; margin: 0; counter-reset: ev; }
.reveal-events li {
  font-family: 'Bungee', sans-serif;
  font-size: 16px;
  color: #fff;
  padding: 8px 0 8px 34px;
  border-bottom: 1px dashed rgba(0,240,255,0.3);
  position: relative;
  counter-increment: ev;
}
.reveal-events li::before {
  content: counter(ev, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--neon-yellow);
}
.reveal-events li:last-child { border-bottom: none; }
.reveal-events .ev-meta {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--neon-purple);
  margin-top: 2px;
}

/* ------- Phase 6 Leaderboard ------- */
.board {
  margin: 100px auto 0;
  max-width: 880px;
  text-align: left;
}
.board-header { text-align: center; margin-bottom: 24px; }
.board-title {
  font-family: 'Monoton', sans-serif;
  font-size: clamp(40px, 8vw, 90px);
  margin: 0;
  color: var(--neon-yellow);
  text-shadow: 0 0 10px var(--neon-yellow), 6px 6px 0 var(--neon-pink), 12px 12px 0 var(--neon-cyan);
  letter-spacing: 0.05em;
}
.board-tabs {
  display: inline-flex;
  margin-top: 18px;
  gap: 0;
}
.board-tab {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  padding: 10px 18px;
  background: transparent;
  color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan);
  cursor: pointer;
  transition: all 0.15s;
}
.board-tab + .board-tab { border-left: none; }
.board-tab.active {
  background: var(--neon-cyan);
  color: #000;
  box-shadow: 0 0 14px var(--neon-cyan);
}
.board-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: rank;
}
.board-list li {
  counter-increment: rank;
  background: #000;
  border: 3px solid var(--neon-purple);
  margin-bottom: 10px;
  padding: 14px 18px 14px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  box-shadow: 5px 5px 0 var(--neon-cyan);
}
@media (max-width: 540px) {
  .board-list li  { padding: 12px 12px 12px 52px; }
  .board-list li::before { font-size: 22px; left: 10px; }
  .board-list .nm  { font-size: 16px; }
  .board-list .pts { font-size: 26px; }
}
.board-list li::before {
  content: counter(rank, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bungee Shade', sans-serif;
  font-size: 26px;
  color: var(--neon-yellow);
}
.board-list li.rank-1 { border-color: var(--neon-yellow); box-shadow: 5px 5px 0 var(--neon-yellow); }
.board-list li.rank-2 { border-color: var(--neon-cyan);   }
.board-list li.rank-3 { border-color: var(--neon-pink);   }
.board-list .nm {
  font-family: 'Bungee', sans-serif;
  font-size: 20px;
  color: #fff;
}
.board-list .sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--neon-cyan);
  margin-top: 4px;
  display: block;
}
.board-list .pts {
  font-family: 'Bungee Shade', sans-serif;
  font-size: 32px;
  color: var(--neon-pink);
  text-shadow: 0 0 10px var(--neon-pink);
}
.board-updated {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
  margin-top: 18px;
}

/* ------- Phase 7 Podium ------- */
.podium {
  margin: 100px auto 0;
  max-width: 1100px;
  text-align: center;
}
.podium-banner {
  font-family: 'Bungee Shade', sans-serif;
  font-size: clamp(44px, 10vw, 130px);
  letter-spacing: 0.04em;
  color: var(--neon-yellow);
  text-shadow: 0 0 16px var(--neon-yellow), 8px 8px 0 var(--neon-pink), 16px 16px 0 var(--neon-cyan);
  margin: 0 0 50px;
  animation: pulse 2s ease-in-out infinite;
}
.podium-section {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(12px, 1.6vw, 16px);
  letter-spacing: 0.2em;
  color: var(--neon-cyan);
  margin: 50px 0 26px;
  text-shadow: 0 0 6px var(--neon-cyan);
}
.podium-stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.podium-block {
  background: #000;
  border: 4px solid var(--neon-purple);
  padding: 22px 18px 28px;
  min-width: 200px;
  text-align: center;
  box-shadow: 8px 8px 0 var(--neon-cyan);
}
.podium-block.p1 {
  border-color: var(--neon-yellow);
  box-shadow: 10px 10px 0 var(--neon-yellow);
  transform: translateY(-30px);
  min-height: 280px;
}
.podium-block.p2 {
  border-color: var(--neon-cyan);
  min-height: 220px;
}
.podium-block.p3 {
  border-color: var(--neon-pink);
  min-height: 180px;
}
.podium-block .place {
  font-family: 'Bungee Shade', sans-serif;
  font-size: 60px;
  color: var(--neon-yellow);
  line-height: 1;
}
.podium-block.p2 .place { color: var(--neon-cyan); }
.podium-block.p3 .place { color: var(--neon-pink); }
.podium-block .nm {
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  color: #fff;
  margin: 8px 0 4px;
  word-break: break-word;
}
.podium-block .sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--neon-cyan);
}
.podium-block .pts {
  font-family: 'Bungee', sans-serif;
  font-size: 28px;
  color: var(--neon-yellow);
  margin-top: 10px;
}
.podium-empty {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  padding: 30px;
}
@media (max-width: 720px) {
  /* On phones the wrapped podium loses its silhouette; render as a vertical
     list with the winner up top to keep the dramatic reveal. */
  .podium-stage { flex-direction: column; align-items: stretch; gap: 14px; }
  .podium-block,
  .podium-block.p1, .podium-block.p2, .podium-block.p3 {
    transform: none;
    min-height: 0;
    padding: 16px 14px 20px;
    min-width: 0;
  }
  .podium-block .place { font-size: 42px; }
  /* Source order is 2,1,3 (for the centered triptych). On mobile we want 1 first. */
  .podium-stage { display: grid; grid-template-areas: "p1" "p2" "p3"; }
  .podium-stage .podium-block.p1 { grid-area: p1; }
  .podium-stage .podium-block.p2 { grid-area: p2; }
  .podium-stage .podium-block.p3 { grid-area: p3; }
}
.podium-foot {
  margin-top: 60px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--neon-orange);
  opacity: 0.8;
}

/* ------- Admin panel ------- */
.admin {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;          /* use dynamic vh on mobile so iOS URL bar doesn't crop it */
  background: #050008;
  border-left: 4px solid var(--neon-pink);
  box-shadow: -10px 0 30px rgba(255, 0, 200, 0.4);
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(18px + env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    calc(30px + env(safe-area-inset-bottom))
    20px;
  font-family: 'Bungee', sans-serif;
  animation: drawerSlide 0.3s ease;
}
@media (max-width: 540px) {
  .admin { width: 100vw; border-left: none; border-top: 4px solid var(--neon-pink); }
}
@keyframes drawerSlide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.admin[hidden] { display: none; }

.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--neon-yellow);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.admin-head strong {
  font-family: 'Bungee Shade', sans-serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: var(--neon-yellow);
}
.admin-close {
  background: transparent;
  color: var(--neon-pink);
  border: none;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

.admin-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(0,240,255,0.2);
}
.admin-section:last-of-type { border-bottom: none; }

.admin-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--neon-cyan);
  margin: 0 0 8px;
}

.admin input[type="text"],
.admin input[type="password"],
.admin input[type="number"],
.admin select,
.admin textarea {
  width: 100%;
  background: rgba(0,240,255,0.08);
  border: 2px solid var(--neon-purple);
  color: #fff;
  padding: 10px 12px;          /* taller for finger taps */
  font-family: 'Bungee', sans-serif;
  font-size: 16px;             /* iOS: < 16px triggers zoom-on-focus */
  margin-bottom: 8px;
  box-sizing: border-box;
  /* Remove iOS chrome on date/number inputs */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.admin .admin-close { min-width: 44px; min-height: 44px; }
.admin button { min-height: 44px; }
.admin select { background-image: linear-gradient(transparent, transparent); }
.admin input:focus, .admin select:focus {
  outline: none;
  border-color: var(--neon-yellow);
}

.admin-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  margin: 4px 0 0;
}
.admin-hint.ok  { color: #b4ff39; }
.admin-hint.bad { color: var(--neon-pink); }

.admin-phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.admin-phases button {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 10px 6px;
  background: transparent;
  color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan);
  cursor: pointer;
  transition: all 0.12s;
}
.admin-phases button:hover  { background: rgba(0,240,255,0.15); }
.admin-phases button.active {
  background: var(--neon-yellow);
  color: #000;
  border-color: var(--neon-yellow);
  box-shadow: 0 0 8px var(--neon-yellow);
}

.admin-row { display: flex; gap: 6px; }
.admin-row > * { flex: 1; }

.admin-award button[type="submit"] {
  width: 100%;
  font-family: 'Bungee', sans-serif;
  font-size: 16px;
  background: var(--neon-yellow);
  color: #000;
  border: 3px solid #000;
  padding: 10px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--neon-pink);
}
.admin-award button[type="submit"]:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--neon-pink); }
.admin-award button[type="submit"]:disabled { opacity: 0.5; }

.admin-feedback {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 8px 10px;
  margin: 8px 0 0;
  border: 2px solid;
}
.admin-feedback.ok  { color: #b4ff39; border-color: #b4ff39; background: rgba(180,255,57,0.1); }
.admin-feedback.bad { color: var(--neon-pink); border-color: var(--neon-pink); background: rgba(255,0,200,0.1); }

.admin-awards-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
}
.admin-awards-list li {
  font-size: 12px;
  background: rgba(122,0,255,0.15);
  border-left: 3px solid var(--neon-purple);
  padding: 6px 8px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}
.admin-awards-list .who   { color: #fff; flex: 1; min-width: 0; word-break: break-word; }
.admin-awards-list .pts   { color: var(--neon-yellow); font-family: 'Bungee Shade', sans-serif; font-size: 16px; flex: 0 0 auto; }
.admin-awards-list .pts.neg { color: var(--neon-pink); }
.admin-awards-list .undo {
  background: transparent;
  color: var(--neon-pink);
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  flex: 0 0 auto;
}
.admin-awards-list .undo:hover { color: var(--neon-yellow); }
.admin-empty {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  padding: 12px;
}

.admin-resets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.admin-resets button {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 10px 6px;
  background: transparent;
  color: var(--neon-orange);
  border: 2px solid var(--neon-orange);
  cursor: pointer;
}
.admin-resets button:hover { background: rgba(255,122,0,0.15); }
.admin-resets button.danger {
  grid-column: 1 / -1;
  color: var(--neon-pink);
  border-color: var(--neon-pink);
}
.admin-resets button.danger:hover { background: rgba(255,0,200,0.15); }

.admin-foot {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  margin-top: 12px;
}

/* ------- Olympic rings (drifting decorations) ------- */
.rings {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.ring {
  position: absolute;
  font-size: 120px;
  opacity: 0.18;
  animation: drift 26s linear infinite;
  text-shadow: 0 0 20px currentColor;
}
.ring.r1 { top: 18%; left: -10%;  color: var(--neon-yellow); animation-delay: 0s; }
.ring.r2 { top: 70%; left: -20%;  color: var(--neon-cyan);   animation-delay: -6s; }
.ring.r3 { top: 38%; left: -30%;  color: var(--neon-pink);   animation-delay: -12s; }
.ring.r4 { top: 80%; left: -40%;  color: var(--neon-purple); animation-delay: -18s; font-size: 180px; }
.ring.r5 { top: 10%; left: -50%;  color: var(--neon-orange); animation-delay: -22s; font-size: 90px; }
@keyframes drift {
  0%   { transform: translateX(0)    rotate(0deg); }
  100% { transform: translateX(160vw) rotate(720deg); }
}

/* ------- Mobile tweaks ------- */
@media (max-width: 640px) {
  .countdown { gap: 4px; }
  .countdown .unit { min-width: 64px; padding: 12px 8px; }
  .countdown .sep  { display: none; }
  .stage { padding: 90px 12px 100px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee span, .badge, .title, .ring, .countdown-label, .countdown .sep {
    animation: none !important;
  }
}