:root {
  --kang: #102f68;
  --kang-light: #2d67c8;
  --kodos: #741421;
  --kodos-light: #c82d42;
  --dark: #0b0d13;
  --paper: #fff8e5;
  --white: #ffffff;
  --strip-height: clamp(68px, 13vh, 96px);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--dark); }
body { color: var(--white); }
button { font: inherit; }

.app-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background-image: url('background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--dark);
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.14) 44%, rgba(0,0,0,.1)),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,.24) 100%);
}

.candidate-half {
  display: none;
}

.candidate-half--kang {
  top: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(91, 205, 80, .42), transparent 14%),
    radial-gradient(circle at 75% 24%, rgba(255, 221, 73, .22), transparent 17%),
    linear-gradient(160deg, #173f89 0%, #151c52 54%, #0e1530 100%);
}

.candidate-half--kodos {
  bottom: 0;
  background:
    radial-gradient(circle at 72% 66%, rgba(91, 205, 80, .36), transparent 14%),
    radial-gradient(circle at 25% 74%, rgba(255, 221, 73, .18), transparent 19%),
    linear-gradient(25deg, #42111a 0%, #7a1827 48%, #24080d 100%);
}

.candidate-half::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 12px);
  opacity: .55;
}

.alien-orb {
  position: absolute;
  width: clamp(180px, 66vw, 390px);
  aspect-ratio: 1;
  border-radius: 48% 52% 45% 55%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.18);
  font-size: clamp(2.4rem, 13vw, 6rem);
  font-weight: 950;
  letter-spacing: -.08em;
  text-shadow: 0 8px 20px rgba(0,0,0,.22);
  filter: blur(.2px);
  transform: rotate(-8deg);
}
.alien-orb--kang { top: 3vh; background: radial-gradient(circle at 45% 32%, #8ad96e, #2c963d 58%, #12571f); }
.alien-orb--kodos { bottom: 3vh; background: radial-gradient(circle at 55% 36%, #91dd74, #2b9038 58%, #114e1a); transform: rotate(8deg); }

.title-lockup {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0,0,0,.55);
}
.title-lockup .eyebrow { margin: 0 0 .1rem; font-size: .68rem; letter-spacing: .22em; opacity: .9; }
.title-lockup h1 { margin: 0; font-size: clamp(1.55rem, 8vw, 4rem); line-height: .9; letter-spacing: -.06em; }
.title-lockup h1 span { font-size: .72em; opacity: .84; }

.vote-strip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(96vw, 760px);
  min-height: var(--strip-height);
  display: grid;
  grid-template-columns: 1fr 1fr .86fr 1fr 1fr;
  gap: clamp(5px, 1.4vw, 14px);
  align-items: center;
  padding: clamp(5px, 1.2vw, 10px);
  border-radius: 999px;
  background: rgba(5, 7, 12, .58);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 60px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
}

.nav-button {
  min-height: clamp(44px, 8.5vh, 62px);
  border: 0;
  border-radius: 12px;
  color: var(--white);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(.58rem, 2.55vw, .95rem);
  letter-spacing: .03em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.28), 0 5px 13px rgba(0,0,0,.3);
  cursor: pointer;
}
.nav-button--kang { background: linear-gradient(180deg, var(--kang-light), var(--kang)); }
.nav-button--kodos { background: linear-gradient(180deg, var(--kodos-light), var(--kodos)); }
.nav-button:active, .rosette-button:active { transform: translateY(2px) scale(.98); }

.rosette-button {
  position: relative;
  justify-self: center;
  width: clamp(56px, 15vw, 84px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--dark);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.42), inset 0 0 0 7px #f1f1f1, inset 0 0 0 12px #151515;
}
.rosette-button::before {
  content: "";
  position: absolute;
  inset: -9px;
  background: conic-gradient(from 0deg, #fff 0 10deg, #dcdcdc 10deg 20deg, #fff 20deg 30deg, #dcdcdc 30deg 40deg, #fff 40deg 50deg, #dcdcdc 50deg 60deg, #fff 60deg 70deg, #dcdcdc 70deg 80deg, #fff 80deg 90deg, #dcdcdc 90deg 100deg, #fff 100deg 110deg, #dcdcdc 110deg 120deg, #fff 120deg 130deg, #dcdcdc 130deg 140deg, #fff 140deg 150deg, #dcdcdc 150deg 160deg, #fff 160deg 170deg, #dcdcdc 170deg 180deg, #fff 180deg 190deg, #dcdcdc 190deg 200deg, #fff 200deg 210deg, #dcdcdc 210deg 220deg, #fff 220deg 230deg, #dcdcdc 230deg 240deg, #fff 240deg 250deg, #dcdcdc 250deg 260deg, #fff 260deg 270deg, #dcdcdc 270deg 280deg, #fff 280deg 290deg, #dcdcdc 290deg 300deg, #fff 300deg 310deg, #dcdcdc 310deg 320deg, #fff 320deg 330deg, #dcdcdc 330deg 340deg, #fff 340deg 350deg, #dcdcdc 350deg 360deg);
  clip-path: polygon(50% 0%, 58% 15%, 75% 7%, 76% 25%, 93% 25%, 85% 42%, 100% 50%, 85% 58%, 93% 75%, 76% 75%, 75% 93%, 58% 85%, 50% 100%, 42% 85%, 25% 93%, 24% 75%, 7% 75%, 15% 58%, 0% 50%, 15% 42%, 7% 25%, 24% 25%, 25% 7%, 42% 15%);
  z-index: -1;
}
.rosette-core { font-size: clamp(1.4rem, 7vw, 2.6rem); font-weight: 950; line-height: 1; }

.bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(34px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  place-items: center;
  background: rgba(3, 4, 7, .91);
  border-top: 1px solid rgba(255,255,255,.11);
}
.bottom-bar button {
  width: 100%; height: 100%; border: 0; background: transparent; color: var(--white);
  text-transform: uppercase; font-weight: 850; letter-spacing: .16em; font-size: .72rem; cursor: pointer;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  color: var(--white);
}
.modal[aria-hidden="false"] { display: block; }
.modal--kang { background: var(--kang); }
.modal--kodos { background: var(--kodos); }
.modal--results { background: #07080d; }
.modal__content {
  height: 100dvh;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 28px) 22px calc(env(safe-area-inset-bottom) + 34px);
  max-width: 760px;
  margin: 0 auto;
}
.modal__close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(0,0,0,.3);
  color: var(--white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.modal h2 { margin: 0 0 1rem; font-size: clamp(2.2rem, 12vw, 5rem); text-transform: uppercase; letter-spacing: -.07em; line-height: .88; }
.modal h3 { margin-top: 1.6rem; text-transform: uppercase; letter-spacing: .08em; }
.modal p, .modal li { font-size: 1.05rem; line-height: 1.5; }
.manifesto-lede { font-size: 1.25rem !important; font-weight: 750; }

.modal__content--results { display: grid; align-content: center; gap: 1.2rem; text-align: center; }
.results-chart {
  width: min(68vw, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto;
  background: conic-gradient(var(--kang) 0deg, var(--kang) 120deg, var(--kodos) 120deg, var(--kodos) 240deg, #eee 240deg, #eee 360deg);
  position: relative;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.results-chart::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: #07080d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.results-list { display: grid; gap: .55rem; width: min(86vw, 410px); margin: 0 auto; }
.result-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: 14px; background: rgba(255,255,255,.08); text-transform: uppercase; font-weight: 850; }
.result-row span:last-child { font-variant-numeric: tabular-nums; }
.results-note { opacity: .75; margin: 0; font-size: .9rem !important; }

.doom-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.9);
  text-align: center;
}
.doom-overlay[aria-hidden="false"] { display: grid; animation: doomIn .18s ease-out; }
.doom-overlay p {
  max-width: 720px;
  margin: 0;
  font-size: clamp(2rem, 11vw, 5.5rem);
  font-weight: 950;
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.07em;
}
@keyframes doomIn { from { opacity: 0; } to { opacity: 1; } }

.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  opacity: .96;
  animation: confettiFall 1.25s linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); }
  100% { transform: translateY(112dvh) rotate(760deg); opacity: 0; }
}

@media (max-width: 380px) {
  .vote-strip { width: 98vw; gap: 4px; }
  .nav-button { border-radius: 10px; font-size: .52rem; }
  .rosette-button { width: 52px; }
}