/* ============================================================================
   $TMC ARCADE — het blok waarmee je je score signt en opslaat.
   Zelfde sticker-stijl als het leaderboard; verschijnt pas als een potje af is.
   ========================================================================== */

.tmc-hs {
  display: none;
  max-width: 760px;
  margin: 22px auto 0;
  background: var(--card);
  border: 4px solid #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
}
.tmc-hs.is-open { display: block; animation: tmcHsIn .28s ease-out both; }
@keyframes tmcHsIn { from { opacity: 0; transform: translateY(10px); } }

.tmc-hs-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 13px 18px;
  background: linear-gradient(180deg, #33104f, #2a0a44);
  border-bottom: 3px dashed rgba(255,255,255,0.18);
}
.tmc-hs-titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 2.1vw, 21px);
  color: var(--pink-ink);
  letter-spacing: .4px;
}
.tmc-hs-score { font-size: 15px; color: var(--ink-soft); }
.tmc-hs-score b { color: var(--ink); font-size: 19px; font-variant-numeric: tabular-nums; }

.tmc-hs-body { padding: 16px 18px 18px; text-align: center; }

.tmc-hs-knop {
  display: inline-block;
  min-width: 220px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 1.9vw, 19px);
  letter-spacing: .5px;
  padding: 12px 26px;
  border-radius: var(--radius-pill, 999px);
  border: 3px solid #fff;
  background: var(--pink-strong);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-tight);
  transition: transform .12s ease, filter .12s ease;
}
.tmc-hs-knop:hover  { transform: translateY(-2px); filter: brightness(1.05); }
.tmc-hs-knop:active { transform: translateY(0); }

.tmc-hs-label {
  display: block;
  margin: 14px 0 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tmc-hs-invoer {
  display: block;
  width: min(320px, 100%);
  margin: 0 auto 14px;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--well);
  border: 3px solid rgba(255,255,255,0.24);
  border-radius: 16px;
  outline: none;
}
.tmc-hs-invoer:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(228,64,159,.28); }

.tmc-hs-adres {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--ink-soft);
  background: rgba(125,252,75,0.12);
  border: 2px solid rgba(125,252,75,0.35);
  border-radius: 999px;
  padding: 5px 14px;
}
.tmc-hs-adres code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.tmc-hs-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--mint-ink); flex: none; }

.tmc-hs-uitleg { margin: 4px 0; font-size: 15px; line-height: 1.7; color: var(--ink); }
.tmc-hs-klein  { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }

.tmc-hs-bezig {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 15px; color: var(--ink-soft);
  padding: 8px 0;
}
.tmc-hs-spinner {
  width: 18px; height: 18px; flex: none;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--pink-strong);
  border-radius: 50%;
  animation: tmcHsDraai .8s linear infinite;
}
@keyframes tmcHsDraai { to { transform: rotate(360deg); } }

.tmc-hs-klaar {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 15px; color: var(--ink);
}
.tmc-hs-klaar b { font-family: var(--font-display); font-size: 22px; color: var(--mint-ink); }
.tmc-hs-vink { font-size: 34px; line-height: 1; }

.tmc-hs-fout {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 12px;
  font-size: 14.5px; color: var(--ink-soft);
}
.tmc-hs-fout b { font-family: var(--font-display); font-size: 18px; color: var(--coral-ink); }

@media (prefers-reduced-motion: reduce) {
  .tmc-hs.is-open, .tmc-hs-spinner { animation: none; }
}

/* ---------------------------------------------------------------------------
   De keuze na een potje.

   Standaard als overlay midden over het speelveld: daar kijkt de speler op dat
   moment, dus daar kan hij hem niet missen. Lukt uitlijnen niet, dan valt hij
   terug op een vaste balk onderaan (.onderaan).

   Bewust géén invoerveld hierin: naam en wallet vullen gebeurt in het blok
   eronder, want een invoerveld in een overlay verdwijnt op mobiel achter het
   toetsenbord.
   --------------------------------------------------------------------------- */
.tmc-keuze {
  position: absolute;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-family: var(--font-body);
  animation: tmcKeuzeIn .24s ease-out both;
}
.tmc-keuze.over-spel {
  border-radius: inherit;
  background: rgba(23, 4, 53, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.tmc-keuze.onderaan {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: auto; height: auto;
}
@keyframes tmcKeuzeIn { from { opacity: 0; } }

.tmc-keuze-kaart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  max-width: min(92%, 340px);
  max-height: 100%;
  overflow: auto;
  padding: 16px 18px;
  background: var(--card);
  border: 4px solid #fff;
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
  text-align: center;
  animation: tmcKaartIn .26s ease-out both;
}
@keyframes tmcKaartIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.tmc-keuze.onderaan .tmc-keuze-kaart { flex-direction: row; flex-wrap: wrap; max-width: min(94vw, 680px); }

.tmc-keuze-kop {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tmc-keuze-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tmc-keuze.onderaan .tmc-keuze-score { font-size: 22px; }

.tmc-keuze-knop {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14px, 1.8vw, 17px);
  letter-spacing: .4px;
  padding: 11px 20px;
  border-radius: var(--radius-pill, 999px);
  border: 3px solid #fff;
  cursor: pointer;
  box-shadow: var(--shadow-tight);
  transition: transform .12s ease, filter .12s ease;
  white-space: nowrap;
}
.tmc-keuze.onderaan .tmc-keuze-knop { width: auto; }
.tmc-keuze-knop:hover  { transform: translateY(-2px); filter: brightness(1.05); }
.tmc-keuze-knop:active { transform: translateY(0); }
.tmc-keuze-knop.is-bewaar  { background: var(--pink-strong); color: #fff; }
.tmc-keuze-knop.is-opnieuw { background: rgba(255,255,255,0.10); color: var(--ink); border-color: rgba(255,255,255,0.30); }

/* Op een klein speelveld moet de kaart passen zonder te wringen. */
@media (max-height: 420px) {
  .tmc-keuze-kaart { padding: 10px 14px; gap: 6px; }
  .tmc-keuze-score { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tmc-keuze, .tmc-keuze-kaart { animation: none; }
}