/* Colours, type and radii from the TUMLE design system. */
:root {
  --mauve: #a57ca5;
  --mauve-wash: rgba(165, 124, 165, 0.14);
  --plum: #635063;
  --lavender: #e6e6fa;
  --ink: #121212;
  --ink-soft: rgba(18, 18, 18, 0.75);
  --ink-muted: rgba(18, 18, 18, 0.6);
  --line: rgba(18, 18, 18, 0.15);
  --track: rgba(18, 18, 18, 0.08);
  --white: #ffffff;
  --ship-green: #137333;
  --stock-green: #1f9d6b;
  --orange: #ef8240;
  --orange-bright: #f4831b;
  --red: #b91f1c;
  --heading: Poppins, system-ui, sans-serif;
  --body: Montserrat, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--lavender);
  transition: background-color 0.4s;
}
body.bg-white { background: var(--white); }
body.bg-green { background: var(--ship-green); color: var(--white); }
body.bg-miss { background: var(--plum); color: var(--white); }

.screen {
  max-width: 560px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.home-grid { display: flex; flex-direction: column; gap: 20px; }

h1, h2, h3 { font-family: var(--heading); font-weight: 700; letter-spacing: 0.6px; line-height: 1.3; margin: 0; }
h1 { font-size: 30px; }
h2 { font-size: 20px; }

.logo { font-family: var(--heading); font-weight: 700; font-size: 56px; line-height: 1.1; color: var(--mauve); letter-spacing: 0.6px; }
.center { text-align: center; }
.muted { color: var(--ink-muted); font-size: 13px; }
.grow { flex-grow: 1; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.card { background: var(--white); color: var(--ink); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }

label { font-size: 13px; font-weight: 600; }
input {
  height: 52px; width: 100%;
  border: 2px solid var(--line); border-radius: 20px;
  padding: 0 18px;
  font: 500 16px var(--body); color: var(--ink); background: var(--white);
}
input:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: transparent; }
.code-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.code-box {
  height: 72px; padding: 0; text-align: center;
  font-family: var(--heading); font-weight: 700; font-size: 34px;
  text-transform: uppercase; caret-color: var(--mauve);
}
.code-box:focus { outline: 0; border-color: var(--mauve); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--mauve); }
@media (min-width: 750px) { .code-box { height: 84px; font-size: 40px; } }

button { font-family: var(--body); cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn {
  min-height: 56px; width: 100%;
  border: 0; border-radius: 24px;
  background: var(--mauve); color: var(--white);
  font-size: 17px; font-weight: 700; letter-spacing: 1px;
  transition: filter 0.15s, transform 0.1s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { filter: brightness(0.95); }
.btn:active { transform: scale(0.98); }
.btn:disabled { background: var(--track); color: var(--ink-muted); cursor: default; filter: none; transform: none; }
.btn.ghost { background: var(--white); color: var(--ink); border: 2px solid var(--ink); }
.btn.light { background: var(--white); color: var(--ink); }

.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-btn {
  min-width: 56px; height: 44px; padding: 0 16px;
  border-radius: 40px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 600;
}
.pill-btn[aria-pressed='true'] { border-color: transparent; background: var(--mauve-wash); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--mauve); font-weight: 700; }

.chip { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--mauve-wash); animation: pop 0.35s ease-out; }
.chip:nth-child(4n+2) { background: var(--lavender); }
.chip:nth-child(4n+3) { background: rgba(239, 130, 64, 0.18); }
.chip:nth-child(4n+4) { background: rgba(31, 157, 107, 0.16); }
.chip.off { opacity: 0.45; }
.chip.locked { background: var(--mauve); color: var(--white); }
.chip.win { background: var(--white); color: var(--ship-green); }

.codebox { background: var(--mauve); color: var(--white); border-radius: 16px; padding: 20px; text-align: center; }
.codebox .label { font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.codebox .code { font-family: var(--heading); font-size: 56px; letter-spacing: 12px; line-height: 1.1; }

.progress { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.progress > div { height: 100%; border-radius: 999px; background: var(--mauve); transition: width 0.4s; }

.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--stock-green); display: inline-block; animation: pulse 2s infinite; }

/* Answer tiles: each colour differs in lightness too, so they read without hue. */
.answers { display: flex; flex-direction: column; gap: 10px; }
.answer {
  min-height: 64px; border: 0; border-radius: 16px; padding: 12px 18px;
  text-align: left; display: flex; flex-direction: row; align-items: center; gap: 16px;
  font-size: 17px; font-weight: 700; line-height: 1.3;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.3s;
}
.answer .letter { font-family: var(--heading); font-size: 22px; width: 24px; flex-shrink: 0; }
.answer .label { flex-grow: 1; }
.answer.c0 { background: var(--plum); color: var(--white); }
.answer.c1 { background: var(--orange); color: var(--ink); }
.answer.c2 { background: var(--ship-green); color: var(--white); }
.answer.c3 { background: var(--lavender); color: var(--ink); }
body.bg-lav .answer.c3 { background: var(--white); }
.answer:not(:disabled):hover { transform: translateX(4px); }
.answer.picked { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--ink); }
.answer.dim { opacity: 0.35; }
.answer.right { box-shadow: 0 0 0 3px var(--white), 0 0 0 7px var(--stock-green); animation: bounce 0.6s; }
.answer:disabled { cursor: default; }
.answer .tally { font-size: 13px; font-weight: 600; }

.big-result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 24px; }
.big-result .badge { width: 96px; height: 96px; border-radius: 999px; background: var(--white); display: flex; align-items: center; justify-content: center; animation: bounce 0.7s; }
.big-result .title { font-family: var(--heading); font-size: 48px; line-height: 1.15; letter-spacing: 0.6px; margin-top: 10px; }
.big-result .sub { font-family: var(--heading); font-size: 24px; }

.question-text { font-size: 26px; }

/* Desktop: 750px is the design system's one breakpoint. */
@media (min-width: 750px) {
  .screen { max-width: 1100px; padding: 48px 50px; gap: 28px; }
  .screen.narrow { max-width: 680px; }
  .screen.home { max-width: 600px; }
  h1 { font-size: 40px; }
  h2 { font-size: 24px; }
  .logo { font-size: 88px; }
  .card { padding: 28px; }


  /* Main actions stay a comfortable width instead of spanning the page. */
  .screen > .btn { max-width: 440px; width: 100%; align-self: center; }

  .codebox { padding: 32px; }
  .codebox .code { font-size: 96px; letter-spacing: 20px; }

  .question-text { font-size: 40px; text-align: center; }
  .answers { gap: 14px; width: 100%; max-width: 900px; align-self: center; }
  .answer { min-height: 76px; padding: 14px 24px; font-size: 22px; }
  .answer .letter { font-size: 30px; }

  .big-result .badge { width: 128px; height: 128px; }
  .big-result .badge svg { width: 68px; height: 68px; }
  .big-result .title { font-size: 72px; }
  .big-result .sub { font-size: 30px; }

  .podium { min-height: 340px; gap: 16px; }
  .podium .spot { width: 160px; font-size: 18px; }
  .podium .p1 .block { height: 220px; }
  .podium .p2 .block { height: 160px; }
  .podium .p3 .block { height: 120px; }
}

/* Large screens, like a TV the host shares. */
@media (min-width: 1300px) {
  .screen:not(.narrow):not(.home) { max-width: 1300px; }
  .question-text { font-size: 52px; }
  .answer { min-height: 92px; font-size: 28px; }
}

/* Podium */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; min-height: 260px; }
.podium .spot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; text-align: center; }
.podium .name { font-weight: 700; overflow-wrap: anywhere; }
.podium .block { width: 100%; border-radius: 16px 16px 0 0; display: flex; justify-content: center; padding-top: 10px; font-family: var(--heading); font-size: 30px; animation: rise 0.8s ease-out both; }
.podium .p1 .block { height: 170px; background: var(--mauve); color: var(--white); animation-delay: 0.6s; }
.podium .p2 .block { height: 120px; background: var(--plum); color: var(--white); animation-delay: 0.3s; }
.podium .p3 .block { height: 90px; background: var(--orange); color: var(--ink); }
.ranks { background: var(--white); border-radius: 16px; padding: 4px 16px; }
.ranks .between { padding: 12px 0; border-bottom: 1px solid var(--track); }
.ranks .between:last-child { border-bottom: 0; }
.ranks .me { font-weight: 700; color: var(--plum); }

.error { background: var(--red); color: var(--white); border-radius: 12px; padding: 10px 14px; font-size: 14px; }

/* Confetti */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
#confetti i { position: absolute; top: -20px; display: block; border-radius: 3px; animation: fall linear forwards; }

@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bounce { 0% { transform: scale(0.7); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes rise { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.shake { animation: shake 0.4s 2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #confetti { display: none; }
}

.fact { background: var(--mauve-wash); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
@media (min-width: 750px) { .fact { font-size: 16px; } }