/* Tafelrace — bouwt voort op klastools.css. Eerst het startscherm, daarna de twee helften van de race. */

/* ---------- startscherm ---------- */
.tr-setup {
  width: min(880px, 100%); display: grid; gap: 18px; padding: clamp(16px, 3vw, 28px);
  background: var(--panel); border-radius: 26px; box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.tr-setup h1 { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 4vw, 38px); line-height: 1.1; text-wrap: balance; }
.tr-row { display: grid; gap: 8px; min-width: 0; }
.lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 15px; color: var(--muted); }
.tr-all { border: 0; border-radius: 99px; padding: 5px 12px; background: rgba(255,255,255,.12); font-weight: 800; font-size: 14px; }
.tr-all:hover { background: rgba(255,255,255,.2); }
.tr-names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-names input {
  width: 100%; min-width: 0; padding: 10px 14px; border-radius: 14px; border: 3px solid var(--tc); background: #120f30; color: var(--tc);
  font: 800 22px/1.2 var(--font-display);
}
.tr-names input::placeholder { color: var(--tc); opacity: .55; }
.tr-tafels { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.tr-tafels button {
  height: 56px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); color: var(--muted);
  font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1;
}
.tr-tafels button:hover { background: rgba(255,255,255,.16); }
.tr-tafels button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.tr-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.tr-setup .seg button { flex: 1; min-width: 0; padding: 12px 8px; font-size: 19px; }
.tr-start { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tr-start .go { font-size: 32px; padding: 14px 48px; }
.tr-msg { margin: 0; min-height: 1.4em; color: var(--muted); font-weight: 700; }
.tr-help { text-align: center; line-height: 1.45; text-wrap: balance; }

/* ---------- de race: twee helften naast elkaar ---------- */
body.racing .app { max-width: none; height: 100vh; height: 100dvh; min-height: 0; }
body.racing .stage { min-height: 0; }
.tr-race {
  width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.6vw, 22px);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.side {
  position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 14px);
  padding: clamp(8px, 1.4vw, 18px); border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 4px var(--tc);
  transition: background .2s;
}
.side-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; font-family: var(--font-display); font-weight: 800; line-height: 1.1; }
.side-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tc); font-size: clamp(18px, 3.6vh, 36px); }
.side-head .score { white-space: nowrap; font-size: clamp(16px, 3vh, 30px); font-variant-numeric: tabular-nums; }

.track {
  --th: clamp(30px, min(8vh, 6vw), 84px);
  position: relative; flex: none; height: var(--th); border-radius: 14px; background: #3a3850; overflow: hidden;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.25);
}
.track::before { content: ""; position: absolute; left: 10px; right: 20px; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 16px, transparent 16px 32px); }
.finish { position: absolute; right: 0; top: 0; bottom: 0; width: 16px; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 8px 8px; }
.car {
  position: absolute; top: 50%; width: calc(var(--th) * 1.5); color: var(--tc);
  left: calc(4px + var(--p, 0) * (100% - var(--th) * 1.5 - 8px));
  transform: translateY(-50%); transition: left .45s cubic-bezier(.3,1.35,.5,1);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.4));
}
.car svg { display: block; width: 100%; height: auto; }

.sum-box {
  position: relative; flex: none; display: grid; justify-items: center; gap: clamp(4px, 1vh, 10px); padding: clamp(6px, 1.4vh, 14px) 8px;
  border-radius: 18px; background: rgba(0,0,0,.25);
}
.sum { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, min(11vh, 9vw), 128px); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ans {
  min-width: 2.6ch; padding: .02em .35em 0; border-radius: 14px; background: #fff; color: #1a1640; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, min(8vh, 7vw), 92px); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ans.blank { color: #c0bce0; }
.cross { display: none; position: absolute; top: 4px; right: 10px; color: #ff3b4e; font-weight: 800; font-size: clamp(28px, 7vh, 72px); line-height: 1; }

.pad { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(6px, 1.2vh, 12px); }
.pad button {
  min-height: 40px; border: 0; border-radius: 16px; background: #fff; color: #1a1640; touch-action: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, min(6.4vh, 4.6vw), 66px); line-height: 1;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.14);
}
.pad .zero { grid-column: span 2; }
.pad .del { background: rgba(255,255,255,.16); color: #fff; }
.pad button.down { animation: press .16s ease; }
@keyframes press { 0% { background: var(--tc); color: #fff; transform: translateY(3px) scale(.96); } 100% { transform: none; } }

/* goed: korte groene flits */
.side.good .sum-box { animation: good .35s ease; }
@keyframes good { 0% { background: #2fb36b; } 100% { background: rgba(0,0,0,.25); } }

/* fout: rood, even stilstaan en het goede antwoord laten zien */
.side.wrong { background: #5c1428; box-shadow: inset 0 0 0 6px #ff3b4e; animation: shake .4s ease; }
.side.wrong .ans { background: var(--gold); color: var(--gold-ink); }
.side.wrong .cross { display: block; }
.side.wrong .pad { opacity: .3; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.side.winner { box-shadow: inset 0 0 0 6px var(--gold), 0 0 40px rgba(255,212,59,.6); }

/* ---------- aftellen ---------- */
.tr-count { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(10,8,30,.62); pointer-events: none; }
.tr-count span { font-family: var(--font-display); font-weight: 800; font-size: min(42vh, 60vw); line-height: 1; color: var(--gold); text-shadow: 0 10px 0 rgba(0,0,0,.3); animation: popin .45s cubic-bezier(.3,1.5,.5,1); }
.tr-count span.word { font-size: min(24vh, 22vw); color: #fff; }

/* ---------- uitslag en overzicht ---------- */
.tr-score { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 6vw, 60px); line-height: 1.1; }
.tr-score small { font-size: 22px; color: var(--muted); }
.tr-review .result-card { width: min(1000px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; }
.tr-tip { margin: -6px 0 0; font-weight: 800; font-size: clamp(18px, 2.4vw, 24px); }
.rev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.rev-col { min-width: 0; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.22); box-shadow: inset 0 5px 0 var(--tc); }
.rev-col h3 { margin: 4px 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--tc); font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.rev-col h3 small { flex: none; color: var(--ink); font-size: 18px; }
.rev-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rev-col li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.8vw, 30px); }
.rev-col li small { flex: none; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: #ffb3bd; }
.rev-col .none { margin: 0; font-weight: 800; font-size: 20px; color: var(--muted); }

@media (max-width: 760px) {
  .tr-tafels { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tr-two { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tr-names { grid-template-columns: 1fr; }
  .tr-names input { font-size: 19px; }
  .tr-setup .seg button { font-size: 16px; padding: 10px 4px; }
  .tr-start .go { font-size: 26px; padding: 12px 30px; }
  .rev-cols { grid-template-columns: 1fr; }
  .side { border-radius: 18px; }
  .pad button { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .car, .side { transition: none; }
  .side.wrong, .side.good .sum-box, .pad button.down, .tr-count span { animation: none; }
}