:root {
  --bg: #0f1512;
  --panel: #f8f1df;
  --panel-strong: #fff8e8;
  --ink: #18211d;
  --muted: #627068;
  --line: rgba(24, 33, 29, .16);
  --green: #2f8f68;
  --blue: #2e6da8;
  --yellow: #f5c24b;
  --red: #d84b45;
  --shadow: rgba(8, 18, 14, .28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
  padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom);
  background: var(--bg);
}

.roadBackdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(142, 197, 219, .92), rgba(247, 206, 103, .72) 48%, rgba(40, 98, 72, .88) 49%),
    linear-gradient(100deg, transparent 0 34%, rgba(34, 41, 39, .88) 35% 65%, transparent 66%);
}

.roadBackdrop::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10svh;
  width: min(580px, 92vw);
  height: 78svh;
  transform: translateX(-50%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(180deg, transparent 0 54px, rgba(255,255,255,.84) 55px 92px, transparent 93px 150px),
    #2b302f;
  box-shadow: 0 -18px 70px rgba(0,0,0,.18);
}

main {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0;
}

.panel {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 8px;
  box-shadow: 0 18px 42px var(--shadow);
  padding: 18px;
}

h1, h2, p, figure, fieldset { margin: 0; }
h1 { font-size: clamp(34px, 10vw, 58px); line-height: .95; letter-spacing: 0; }
h2 { font-size: clamp(24px, 7vw, 34px); line-height: 1.05; letter-spacing: 0; }
p { color: var(--muted); line-height: 1.4; }

.setupHeader {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 18px;
}

.badge, .roundPill, .trophy {
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: #231a05;
  font-weight: 950;
  border: 2px solid rgba(0,0,0,.1);
}

.badge {
  width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: rotate(7deg);
}

.setupForm, fieldset, label, .playerList {
  display: grid;
  gap: 10px;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255,255,255,.38);
}

legend, label, .eyebrow {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}

input, button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 15px 16px;
  font: inherit;
  font-weight: 850;
}

input {
  color: var(--ink);
  background: #fffdf5;
  border: 1px solid var(--line);
}

button {
  color: #fff;
  background: var(--green);
  cursor: pointer;
  min-height: 56px;
  box-shadow: 0 7px 0 #1c5c42;
}

button:active {
  transform: translateY(3px);
  box-shadow: 0 4px 0 #1c5c42;
}

button.secondary {
  color: var(--ink);
  background: #e8dfcb;
  box-shadow: 0 7px 0 #b4aa95;
}

button.secondary:active { box-shadow: 0 4px 0 #b4aa95; }

.setupActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.small {
  min-height: 20px;
  color: var(--red);
  font-size: 14px;
  font-weight: 750;
}

.scoreStrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.scoreBox {
  min-height: 76px;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--panel-strong);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.scoreBox.active { border-color: var(--yellow); }
.scoreName { color: var(--muted); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.scoreValue { font-size: 32px; font-weight: 950; line-height: 1; }

.turnHeader {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.roundPill {
  min-width: 62px;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
}

.itemCard {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.itemCard img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 8px;
  background: #f3ead4;
  border: 1px solid var(--line);
  padding: 10px;
}

.itemCard figcaption {
  font-size: clamp(28px, 8vw, 46px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

.answerGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.answerGrid button:first-child {
  background: var(--blue);
  box-shadow: 0 7px 0 #18486f;
}

.answerGrid button:first-child:active { box-shadow: 0 4px 0 #18486f; }

.resultPanel {
  display: grid;
  gap: 12px;
  text-align: center;
}

.resultMark {
  width: 80px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 46px;
  font-weight: 950;
}

.resultMark.correct { background: var(--green); }
.resultMark.wrong { background: var(--red); }
.resultMark.equal { background: var(--yellow); color: var(--ink); }

.fact {
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.55);
  color: var(--ink);
  font-weight: 750;
}

.winnerPanel {
  display: grid;
  gap: 14px;
  text-align: center;
}

.trophy {
  width: 108px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 48px;
}

.hidden { display: none !important; }

@media (max-width: 440px) {
  body { padding-left: 10px; padding-right: 10px; }
  .panel { padding: 14px; }
  .setupHeader, .turnHeader { grid-template-columns: 1fr; }
  .badge { width: 58px; justify-self: end; }
  .answerGrid, .setupActions { grid-template-columns: 1fr; }
}