:root {
  --pink: #ff2aa1;
  --hot-pink: #ff5fbd;
  --teal: #24d9ff;
  --cyan: #7ef7ff;
  --green: #36ff93;
  --leaf: #8aff55;
  --ink: #f6fdff;
  --muted: #a9c4cc;
  --panel: rgba(6, 14, 28, 0.72);
  --panel-strong: rgba(9, 21, 41, 0.9);
  --line: rgba(126, 247, 255, 0.24);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38), 0 0 36px rgba(36, 217, 255, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: #040712;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 86%);
}

button,
input,
select {
  font: inherit;
}

button,
.primary-button {
  border: 1px solid rgba(126, 247, 255, 0.44);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  color: #04121d;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 0 24px rgba(36, 217, 255, 0.24);
  font-weight: 900;
  cursor: pointer;
}

button:hover,
.primary-button:hover {
  filter: brightness(1.08);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 42, 161, 0.28), transparent 28rem),
    radial-gradient(circle at 82% 20%, rgba(36, 217, 255, 0.26), transparent 30rem),
    radial-gradient(circle at 48% 95%, rgba(54, 255, 147, 0.18), transparent 34rem),
    #040712;
}

.video-bg::before,
.video-bg::after,
.video-bg span {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0.66;
  background-repeat: repeat;
  will-change: transform;
}

.video-bg::before {
  background-image:
    linear-gradient(115deg, transparent 0 47%, rgba(126, 247, 255, 0.22) 48% 49%, transparent 50% 100%),
    linear-gradient(65deg, transparent 0 49%, rgba(255, 42, 161, 0.16) 50% 51%, transparent 52% 100%);
  background-size: 150px 150px, 190px 190px;
  animation: cyberDrift 18s linear infinite;
}

.video-bg::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px);
  opacity: 0.12;
  animation: scanlines 1.6s linear infinite;
}

.video-bg span:nth-child(1) {
  background: radial-gradient(circle, rgba(36, 217, 255, 0.5) 0 2px, transparent 3px);
  background-size: 92px 92px;
  animation: cyberDrift 24s linear infinite reverse;
}

.video-bg span:nth-child(2) {
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(255, 42, 161, 0.24) 31%, transparent 32% 100%),
    linear-gradient(0deg, transparent 0 54%, rgba(54, 255, 147, 0.18) 55%, transparent 56% 100%);
  background-size: 260px 220px;
  filter: blur(1px);
  animation: cyberSlide 13s ease-in-out infinite alternate;
}

.video-bg span:nth-child(3) {
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(126, 247, 255, 0.16), transparent);
  transform: translateX(-70%);
  animation: lightSweep 7s ease-in-out infinite;
}

.screen {
  min-height: 100vh;
  overflow: hidden;
}

.stage {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 1rem;
  padding: 1.6rem;
}

.stage-header,
.admin-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stage-header h1,
.admin-header h1,
.stage-header p,
.admin-header p {
  margin: 0;
}

.stage-header h1,
.admin-header h1 {
  text-shadow: 0 0 24px rgba(36, 217, 255, 0.24);
}

.brand-mark {
  width: 90px;
  height: 90px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 8px;
  padding: 0.35rem;
  box-shadow: var(--shadow);
}

.status-stack {
  margin-left: auto;
  min-width: 190px;
  display: grid;
  justify-items: end;
  gap: 0.25rem;
  color: var(--cyan);
  font-size: 1.25rem;
}

.status-stack strong {
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255, 42, 161, 0.48);
}

.question-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: stretch;
}

.question-band > div:first-child,
.join-panel,
.feed-panel,
.admin-panel,
.phone-shell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(7, 18, 36, 0.9), rgba(8, 28, 45, 0.72));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.question-band > div:first-child::before,
.join-panel::before,
.feed-panel::before,
.admin-panel::before,
.phone-shell::before,
.answer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(126, 247, 255, 0.18), transparent 34%, rgba(255, 42, 161, 0.1));
}

.question-band > div:first-child {
  padding: 1.35rem 1.6rem;
}

.eyebrow {
  display: inline-block;
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.question-band h2 {
  margin: 0.35rem 0 0;
  max-width: 100%;
  font-size: clamp(2.35rem, 4.2vw, 4.8rem);
  line-height: 1;
  text-wrap: balance;
}

.join-panel {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 0.65rem;
  width: min(100%, 520px);
  justify-self: center;
  padding: 1.25rem 1.45rem;
  text-align: center;
}

.join-panel img {
  width: clamp(240px, 18vw, 360px);
  height: clamp(240px, 18vw, 360px);
  border: 12px solid white;
  border-radius: 8px;
  background: white;
}

.join-panel strong {
  color: var(--pink);
  font-size: clamp(1.55rem, 1.7vw, 2.35rem);
}

.qr-note {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.45vw, 2rem);
  font-weight: 900;
  text-align: center;
}

.join-panel span {
  display: none;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.answer-card {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  display: grid;
  align-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(126, 247, 255, 0.2);
  border-radius: 8px;
  background: linear-gradient(140deg, rgba(5, 14, 31, 0.92), rgba(8, 36, 51, 0.76));
  box-shadow: var(--shadow);
  transition: transform 280ms ease, border-color 280ms ease, opacity 280ms ease;
}

.answer-card > * {
  position: relative;
  z-index: 1;
}

.answer-card.correct {
  border-color: rgba(54, 255, 147, 0.95);
  animation: correctPulse 950ms ease both;
}

.answer-topline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1.35rem, 2.2vw, 2.3rem);
}

.answer-letter {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: radial-gradient(circle at 30% 25%, var(--hot-pink), var(--pink));
  box-shadow: 0 0 24px rgba(255, 42, 161, 0.44);
  font-weight: 900;
}

.bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(126, 247, 255, 0.12);
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--teal), var(--pink));
  box-shadow: 0 0 20px rgba(36, 217, 255, 0.34);
  transition: width 450ms ease;
}

.answer-meta {
  color: var(--muted);
  font-weight: 800;
}

.feed-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1rem;
}

.feed-panel ul,
.submissions,
.admin-options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feed-panel ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.feed-panel li,
.submissions li,
.admin-options li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(126, 247, 255, 0.16);
  border-radius: 8px;
  background: rgba(126, 247, 255, 0.08);
  font-weight: 800;
}

.feed-panel li span,
.submissions li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-animation {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.2rem;
  background:
    radial-gradient(circle at center, rgba(36, 217, 255, 0.18), transparent 30rem),
    rgba(4, 7, 18, 0.96);
  pointer-events: none;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 450ms ease, transform 450ms ease;
}

.brand-animation img {
  width: min(46vw, 430px);
  height: auto;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 80px rgba(36, 217, 255, 0.3), 0 0 90px rgba(255, 42, 161, 0.2);
  animation: logoFloat 2.7s ease-in-out infinite, neonReveal 1.2s ease both;
}

.brand-animation h1 {
  margin: 0;
  color: var(--pink);
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  text-shadow: 0 0 28px rgba(255, 42, 161, 0.5);
}

body[data-phase="intro"] .intro-panel,
body[data-phase="outro"] .outro-panel {
  opacity: 1;
  transform: scale(1);
}

body[data-phase="revealed"] .answer-card:not(.correct) {
  display: none;
}

body[data-phase="revealed"] .video-bg {
  background:
    radial-gradient(circle at 50% 40%, rgba(54, 255, 147, 0.44), transparent 28rem),
    radial-gradient(circle at 18% 20%, rgba(138, 255, 85, 0.34), transparent 28rem),
    radial-gradient(circle at 86% 70%, rgba(36, 217, 255, 0.18), transparent 30rem),
    #03140b;
  animation: answerBackdrop 1.6s ease-out 1 both;
}

body[data-phase="revealed"] .video-bg::after,
body[data-phase="revealed"] .video-bg span:nth-child(3) {
  animation: none;
  opacity: 0.06;
}

body[data-phase="revealed"] .answer-grid {
  grid-template-columns: minmax(360px, 760px);
  justify-content: center;
  align-content: center;
  min-height: 280px;
}

body[data-phase="revealed"] .answer-card.correct {
  min-height: 240px;
  border-color: rgba(168, 255, 105, 0.36);
  background:
    radial-gradient(circle at 18% 20%, rgba(168, 255, 105, 0.28), transparent 22rem),
    linear-gradient(140deg, rgba(3, 47, 24, 0.96), rgba(4, 85, 47, 0.88));
  transform-origin: center;
  animation: finalAnswerEntrance 1.15s cubic-bezier(0.18, 0.82, 0.24, 1) 1 both;
}

body[data-phase="revealed"] .answer-card.correct::after {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: 0;
  border-radius: inherit;
  padding: 28px;
  pointer-events: none;
  opacity: 0.9;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 185deg,
    rgba(122, 255, 118, 0.04) 215deg,
    rgba(178, 255, 145, 0.28) 248deg,
    rgba(78, 255, 139, 0.86) 278deg,
    rgba(203, 255, 184, 0.34) 306deg,
    rgba(122, 255, 118, 0.05) 335deg,
    transparent 360deg
  );
  filter: blur(18px);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  mix-blend-mode: screen;
  animation: softLensOrbit 4.8s linear infinite reverse;
}

body[data-phase="revealed"] .answer-card.correct .answer-topline {
  grid-template-columns: auto 1fr;
  font-size: clamp(2rem, 4vw, 4.2rem);
}

body[data-phase="revealed"] .answer-card.correct .answer-topline > span:last-child,
body[data-phase="revealed"] .answer-card.correct .bar-track,
body[data-phase="revealed"] .answer-card.correct .answer-meta {
  display: none;
}

body[data-phase="revealed"] .answer-card.correct .answer-letter {
  width: 82px;
  height: 82px;
  color: #042011;
  background: radial-gradient(circle at 30% 25%, white, var(--green));
}

body[data-phase="revealed"] .join-panel,
body[data-phase="revealed"] .feed-panel {
  display: none;
}

.join-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.phone-shell {
  width: min(100%, 490px);
  padding: 1.3rem;
}

.mobile-logo {
  width: 150px;
  display: block;
  margin: 0 auto 1rem;
  padding: 0.35rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}

.mobile-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.phase-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(126, 247, 255, 0.3);
  border-radius: 999px;
  color: var(--green);
  background: rgba(54, 255, 147, 0.08);
  font-size: 0.78rem;
}

.phone-shell h1 {
  margin: 0.35rem 0;
  font-size: 1.65rem;
  line-height: 1.16;
}

.muted {
  color: var(--muted);
}

.vote-form {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.field-label {
  color: var(--cyan);
  font-weight: 900;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(126, 247, 255, 0.28);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  background: rgba(1, 8, 18, 0.64);
  color: var(--ink);
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(36, 217, 255, 0.12);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.choice-list {
  display: grid;
  gap: 0.65rem;
}

.choice-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid rgba(126, 247, 255, 0.2);
  border-radius: 8px;
  background: rgba(126, 247, 255, 0.07);
  cursor: pointer;
}

.choice-row:has(input:checked) {
  border-color: var(--green);
  background: rgba(54, 255, 147, 0.12);
  box-shadow: 0 0 24px rgba(54, 255, 147, 0.14);
}

.choice-row input {
  width: auto;
  accent-color: var(--pink);
}

.choice-row span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: radial-gradient(circle at 30% 25%, var(--hot-pink), var(--pink));
  box-shadow: 0 0 18px rgba(255, 42, 161, 0.32);
  font-weight: 900;
}

.message {
  min-height: 1.5rem;
  font-weight: 800;
}

.message.success {
  color: var(--green);
}

.message.error {
  color: var(--pink);
}

.admin-screen {
  min-height: 100vh;
  padding: 1.5rem;
}

.admin-shell {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1rem;
}

.cms-sidebar {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  background: linear-gradient(150deg, rgba(7, 18, 36, 0.94), rgba(8, 28, 45, 0.78));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.cms-sidebar .brand-mark {
  width: 112px;
  height: 112px;
}

.cms-sidebar p,
.cms-sidebar h1 {
  margin: 0;
}

.cms-nav {
  display: grid;
  gap: 0.55rem;
}

.cms-nav button {
  width: 100%;
  color: var(--ink);
  background: rgba(126, 247, 255, 0.08);
  border-color: rgba(126, 247, 255, 0.18);
  text-align: left;
}

.cms-nav button.active {
  color: #04121d;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.admin-workspace {
  display: grid;
  gap: 1rem;
}

.admin-header {
  justify-content: space-between;
}

.host-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(126, 247, 255, 0.34);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(126, 247, 255, 0.08);
  font-weight: 900;
  text-decoration: none;
}

.admin-tab {
  display: none;
}

.admin-tab.active {
  display: grid;
}

.admin-panel {
  padding: 1.2rem;
}

.admin-panel h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
}

.admin-panel h2 {
  margin: 0 0 1rem;
}

.panel-heading {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px);
  gap: 1rem;
  align-items: end;
}

.question-editor {
  display: grid;
  gap: 1rem;
}

.hosting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.helper-text {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.update-box {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(126, 247, 255, 0.18);
  border-radius: 8px;
  background: rgba(126, 247, 255, 0.06);
}

.update-box h3 {
  margin: 0;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.question-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.question-buttons button:nth-child(2) {
  background: linear-gradient(135deg, var(--green), var(--cyan));
}

.question-buttons button:nth-child(3) {
  color: white;
  background: linear-gradient(135deg, #ff4276, var(--pink));
}

.admin-options {
  display: grid;
  gap: 0.65rem;
}

.admin-options li {
  align-items: center;
}

.admin-options li span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #04121d;
  background: var(--cyan);
}

.admin-options li.correct span {
  background: var(--green);
}

.controls {
  display: grid;
  gap: 1rem;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.button-grid button:nth-child(4),
.button-grid button:nth-child(5) {
  color: white;
  background: linear-gradient(135deg, var(--pink), #8c2eff);
}

.submissions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

@keyframes cyberDrift {
  from {
    transform: translate3d(0, 0, 0) rotate(0.001deg);
  }
  to {
    transform: translate3d(180px, 120px, 0) rotate(0.001deg);
  }
}

@keyframes cyberSlide {
  from {
    transform: translate3d(-5%, -3%, 0) scale(1);
  }
  to {
    transform: translate3d(7%, 4%, 0) scale(1.06);
  }
}

@keyframes lightSweep {
  0%, 40% {
    transform: translateX(-80%) skewX(-15deg);
  }
  75%, 100% {
    transform: translateX(85%) skewX(-15deg);
  }
}

@keyframes scanlines {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(14px);
  }
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.025);
  }
}

@keyframes neonReveal {
  0% {
    filter: brightness(0.4) saturate(0.5);
    clip-path: inset(0 50% 0 50%);
  }
  100% {
    filter: brightness(1) saturate(1);
    clip-path: inset(0);
  }
}

@keyframes correctPulse {
  0% {
    transform: scale(1);
    box-shadow: var(--shadow);
  }
  45% {
    transform: scale(1.035);
    box-shadow: 0 0 0 10px rgba(54, 255, 147, 0.18), 0 0 70px rgba(54, 255, 147, 0.34), var(--shadow);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(54, 255, 147, 0.14), 0 0 50px rgba(54, 255, 147, 0.24), var(--shadow);
  }
}

@keyframes answerBackdrop {
  0% {
    filter: brightness(0.78) saturate(0.9);
  }
  100% {
    filter: brightness(1) saturate(1.05);
  }
}

@keyframes finalAnswerEntrance {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.92);
    box-shadow: 0 0 0 rgba(54, 255, 147, 0);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.018);
    box-shadow: 0 0 0 10px rgba(54, 255, 147, 0.12), 0 0 70px rgba(54, 255, 147, 0.34), var(--shadow);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 5px rgba(54, 255, 147, 0.1), 0 0 52px rgba(54, 255, 147, 0.24), var(--shadow);
  }
}

@keyframes softLensOrbit {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .stage {
    padding: 1rem;
  }

  .question-band,
  .answer-grid,
  .join-panel,
  .feed-panel,
  .feed-panel ul,
  .admin-shell,
  .hosting-grid,
  .panel-heading,
  .option-grid,
  .button-grid,
  .submissions {
    grid-template-columns: 1fr;
  }

  .join-panel {
    justify-items: center;
    text-align: center;
  }

  .cms-sidebar {
    position: static;
  }

  .stage-header {
    align-items: flex-start;
  }

  .status-stack {
    min-width: auto;
    font-size: 1rem;
  }

  .question-band h2 {
    max-width: none;
    font-size: clamp(2rem, 11vw, 3.6rem);
  }
}