:root {
  --bg: #f4f8fb;
  --card: rgba(255, 255, 255, 0.94);
  --text: #111111;
  --navy: #063082;
  --navy-2: #0b49a0;
  --muted: #5d6470;
  --orange: #ffac2a;
  --orange-2: #ff9500;
  --green: #7bbf9b;
  --green-dark: #278f62;
  --red: #c84630;
  --border: rgba(4, 38, 88, 0.15);
  --radius: 20px;
  --radius-small: 14px;
  --max-width: 620px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image: url("bg.png");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1400px auto;
  color: var(--text);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 28px;
}

.main { width: 100%; max-width: var(--max-width); }
.admin-main { max-width: 720px; }

.logo {
  width: 150px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 16px 38px rgba(4, 38, 88, 0.08);
  backdrop-filter: blur(3px);
}

.card + .card { margin-top: 14px; }

.h1, .h2 {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.03em;
}
.h1 { font-size: 34px; line-height: 1.08; margin: 0 0 12px; }
.h2 { font-size: 25px; line-height: 1.12; margin: 0 0 12px; }
.small-h2 { font-size: 22px; margin-top: 20px; }
.question-title { margin-top: 8px; }

.p { margin: 0 0 12px; line-height: 1.5; font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; color: var(--muted); }
.strong { font-weight: 800; }
.centered { text-align: center; }

.pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(11, 73, 160, 0.1);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.accent-line {
  width: 54px;
  height: 3px;
  background: var(--orange);
  border-radius: 99px;
  margin: 0 auto 16px;
}

.hero-icon {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 18px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(123, 191, 155, 0.3), rgba(11, 73, 160, 0.08));
  color: var(--navy);
  font-size: 48px;
  font-weight: 800;
}
.hero-icon.trophy { color: var(--green-dark); }

.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: #fff;
  font-size: 16px;
  margin-top: 8px;
}
.input:focus { outline: 3px solid rgba(123, 191, 155, 0.25); outline-offset: 2px; }

.answer-grid, .pressure-list, .cta-stack {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.answer-btn, .pressure-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 13px 14px;
  border-radius: var(--radius-small);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-align: left;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.answer-letter {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2f5f8;
  color: var(--navy);
  font-weight: 800;
  margin-right: 12px;
}
.answer-btn.selected {
  border-color: var(--navy-2);
  background: var(--navy-2);
  color: #fff;
  box-shadow: 0 8px 18px rgba(11, 73, 160, 0.22);
}
.answer-btn.selected .answer-letter { background: #fff; color: var(--navy-2); }
.answer-btn:active, .btn:active, .pressure-option:active { transform: translateY(1px); }

.btn {
  width: 100%;
  display: inline-flex;
  gap: 9px;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 14px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange), var(--orange-2));
  color: #111;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}
.btn-blue { background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; }
.btn-green { background: linear-gradient(180deg, #35a873, #238458); color: #fff; }
.btn.secondary { background: #e3f2ea; color: #102b20; }
.btn.danger { background: #ffd6cc; color: #451106; }
.btn.dark { background: #102756; color: #fff; }
.btn.outline {
  background: rgba(255, 255, 255, 0.72);
  color: var(--navy);
  border: 1px solid rgba(6, 48, 130, 0.3);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.status {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-small);
  background: #f0f4f8;
  color: var(--muted);
  font-size: 14px;
}
.status.success { background: #e3f2ea; color: #164b35; }
.status.error { background: #ffd6cc; color: #6d1e12; }

.admin-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.state-chip {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f0f4f8;
  color: var(--navy);
  font-weight: 800;
  font-size: 12px;
}
.state-waiting { background: #eef4ff; }
.state-open { background: #e3f2ea; color: #164b35; }
.state-winner { background: #fff1da; color: #6b4100; }

.admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.winner {
  background: #fff1da;
  border: 1px solid rgba(255,172,42,0.45);
}
.winner-name {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 26px;
  margin: 4px 0 0;
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.result-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: #fff;
}
.result-row.correct { background: #e3f2ea; }
.result-row.wrong { background: #f7f7f7; }
.badge {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--orange);
  font-weight: 800;
  font-size: 13px;
}
.name { font-weight: 800; }
.answer { font-size: 13px; color: var(--muted); margin-top: 2px; }
.time { font-size: 12px; color: var(--muted); white-space: nowrap; }

.winner-overlay-card {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 35%, #223a85 0%, #071330 48%, #020611 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: -18px;
  padding: 24px;
}
.winner-content { position: relative; z-index: 2; width: 100%; }
.winner-pretitle {
  color: #ffd66d;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.winner-big-name {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(48px, 13vw, 86px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 12px;
  text-shadow: 0 0 15px rgba(255,255,255,0.55), 0 0 35px rgba(77,145,255,0.75);
}
.winner-congrats {
  font-size: 28px;
  color: #ffd66d;
  font-weight: 800;
  margin: 0 0 22px;
}
.countdown-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.1);
  text-transform: uppercase;
}
.countdown-box span { font-family: "Poppins", system-ui, sans-serif; font-size: 30px; font-weight: 800; line-height: 1; }
.countdown-box small { font-size: 12px; font-weight: 800; }

.fireworks span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ffd66d;
  box-shadow:
    0 -70px #ffcf33, 50px -50px #ff7a7a, 70px 0 #7dd3ff, 50px 50px #ffffff,
    0 70px #ff9f1c, -50px 50px #c18cff, -70px 0 #45e0a5, -50px -50px #ffffff;
  animation: firework 1.4s infinite ease-out;
  opacity: 0;
}
.fireworks span:nth-child(1) { top: 24%; left: 28%; animation-delay: 0s; }
.fireworks span:nth-child(2) { top: 20%; right: 24%; animation-delay: .35s; background: #ff7a7a; }
.fireworks span:nth-child(3) { bottom: 22%; left: 30%; animation-delay: .7s; background: #7dd3ff; }
.fireworks span:nth-child(4) { bottom: 24%; right: 28%; animation-delay: 1.05s; background: #c18cff; }
.fireworks span:nth-child(5) { top: 50%; left: 15%; animation-delay: .2s; background: #45e0a5; }
.fireworks span:nth-child(6) { top: 52%; right: 16%; animation-delay: .9s; background: #ff9f1c; }
@keyframes firework {
  0% { transform: scale(0.15); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.pressure-option { background: rgba(255,255,255,0.88); }
.pressure-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  margin-right: 12px;
  font-size: 24px;
}
.privacy-note {
  color: var(--navy);
  font-size: 13px;
  margin-top: 18px;
}
.insight-box {
  padding: 15px;
  border-radius: var(--radius-small);
  background: rgba(11, 73, 160, 0.09);
  color: var(--navy);
  line-height: 1.45;
  margin: 18px 0;
}
.back-btn {
  border: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 800;
  font-size: 16px;
  padding: 0;
  margin: 0 0 16px;
  cursor: pointer;
}

.link-row { text-align: center; margin-top: 14px; }
.link-row a { color: #111; font-weight: 700; }

@media (max-width: 500px) {
  body { background-size: 1000px auto; }
  .app-shell { padding: 14px 12px 24px; }
  .logo { width: 132px; }
  .h1 { font-size: 31px; }
  .h2 { font-size: 23px; }
  .card { padding: 16px; }
  .winner-overlay-card { margin: -16px; min-height: 530px; }
  .admin-actions { grid-template-columns: 1fr; }
  .result-row { grid-template-columns: 30px 1fr; }
  .time { grid-column: 2; }
}

.player-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(123, 191, 155, 0.16);
  border: 1px solid rgba(123, 191, 155, 0.35);
  color: #12305f;
  font-size: 0.95rem;
}

.player-chip button {
  border: none;
  background: transparent;
  color: #f6a623;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Submission Check maze */
.maze-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 320px;
  margin: 18px auto 14px;
  border-radius: 22px;
  border: 2px solid rgba(6, 48, 130, 0.18);
  background:
    linear-gradient(90deg, rgba(6,48,130,0.05) 1px, transparent 1px),
    linear-gradient(rgba(6,48,130,0.05) 1px, transparent 1px),
    rgba(255,255,255,0.86);
  background-size: 28px 28px;
  overflow: hidden;
  touch-action: none;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.45);
}
.maze-wrap.maze-hit {
  animation: mazeShake .22s linear;
  border-color: rgba(200, 70, 48, 0.65);
}
@keyframes mazeShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.maze-start,
.maze-finish {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 52px;
  border-radius: 16px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  z-index: 1;
}
.maze-start {
  left: 12px;
  bottom: 18px;
  background: rgba(123,191,155,0.28);
  color: #164b35;
}
.maze-finish {
  right: 12px;
  top: 18px;
  background: rgba(255,172,42,0.34);
  color: #6b4100;
}
.maze-wall {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(6,48,130,0.92), rgba(11,73,160,0.78));
  box-shadow: 0 8px 14px rgba(6,48,130,0.14);
}
.wall-1 { left: 96px; bottom: 0; width: 26px; height: 238px; }
.wall-2 { left: 96px; top: 66px; width: 176px; height: 24px; }
.wall-3 { right: 88px; top: 66px; width: 24px; height: 166px; }
.wall-5 { left: 200px; bottom: 30px; width: 24px; height: 118px; }
.maze-dot {
  position: absolute;
  left: 26px;
  top: 236px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffcf68 20%, var(--orange-2) 68%);
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(255,149,0,0.35), 0 0 0 2px rgba(6,48,130,0.13);
  cursor: grab;
  z-index: 4;
  touch-action: none;
}
.maze-dot:active { cursor: grabbing; transform: scale(1.03); }
.tiny-skip {
  width: auto;
  min-height: 36px;
  padding: 8px 14px;
  margin: 8px auto 0;
  font-size: 12px;
  display: flex;
}
.waiting-dots span::after {
  content: "";
  animation: waitingDots 1.2s infinite steps(4, end);
}
@keyframes waitingDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}


.leaderboard-details {
  margin-top: 16px;
}
.leaderboard-details summary {
  cursor: pointer;
  list-style: none;
  border: 1px solid rgba(6,48,130,0.22);
  border-radius: 999px;
  padding: 12px 16px;
  text-align: center;
  color: var(--navy);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 900;
  background: rgba(255,255,255,0.78);
}
.leaderboard-details summary::-webkit-details-marker { display: none; }
.leaderboard-details summary::after {
  content: " ↓";
  font-weight: 900;
}
.leaderboard-details[open] summary::after { content: " ↑"; }
.leaderboard-card.compact {
  margin-top: 10px;
  max-height: 340px;
  overflow: auto;
}

/* Participant leaderboard */
.leaderboard-card {
  margin: 18px 0;
  padding: 14px;
  border-radius: var(--radius-small);
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--border);
}
.leader-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.leader-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(6, 48, 130, 0.1);
}
.leader-row.leader-winner {
  background: #fff1da;
  border-color: rgba(255,172,42,0.45);
}
.leader-place { font-weight: 900; color: var(--navy); }
.leader-name { font-weight: 900; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-answer { font-size: 12px; font-weight: 800; color: var(--muted); }

@media (max-width: 500px) {
  .maze-wrap { height: 300px; max-width: 336px; }
  .wall-1 { left: 88px; height: 222px; }
  .wall-2 { left: 88px; width: 164px; }
  .wall-3 { right: 78px; height: 154px; }
  .wall-5 { left: 190px; height: 108px; }
  .leader-row { grid-template-columns: 36px 1fr; }
  .leader-answer { grid-column: 2; }
}
.version-label {
  position: fixed;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  z-index: 9999;
  pointer-events: none;
}