/* ==========================================================================
   JOTARI - Scouting Boxtel huisstijl
   Kleuren en fonts overgenomen van scoutingboxtel.nl
   ========================================================================== */

:root {
  --groen:        #8DB600;   /* primair scouting-groen */
  --groen-donker: #6f9000;
  --lime:         #C1D72E;   /* accent / achtergrond */
  --lime-licht:   #e8f0b0;
  --blauw:        #CDDEEE;   /* zacht blauw */
  --blauw-diep:   #2b6cb0;
  --zwart:        #131313;
  --grijs:        #757575;
  --grijs-licht:  #eef0f2;
  --wit:          #ffffff;
  --geel:         #ffd23f;   /* accent (tent-logo) */

  --radius:       18px;
  --radius-s:     12px;
  --schaduw:      0 8px 24px rgba(19,19,19,.12);
  --schaduw-lg:   0 14px 40px rgba(19,19,19,.20);
  --font-kop:     'Montserrat', 'Raleway', system-ui, sans-serif;
  --font-tekst:   'Raleway', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-tekst);
  color: var(--zwart);
  background:
    radial-gradient(circle at 15% -10%, rgba(193,215,46,.35), transparent 45%),
    radial-gradient(circle at 90% 110%, rgba(205,222,238,.55), transparent 45%),
    #f6f8f2;
  -webkit-text-size-adjust: 100%;
}

#app {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-kop); line-height: 1.1; margin: 0 0 .4em; }
h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; color: var(--groen-donker); }
h2 { font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { line-height: 1.55; }
.subtitel { color: var(--grijs); font-size: 1.05rem; margin-top: -.2em; }

/* --- Header met logo ----------------------------------------------------- */
.kop {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.kop img { height: 56px; width: auto; }
.kop .titel { font-family: var(--font-kop); font-weight: 800; font-size: 1.1rem; color: var(--zwart); }
.kop .titel small { display: block; font-weight: 600; color: var(--groen-donker); letter-spacing: .04em; }
.kop .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* --- Knoppen ------------------------------------------------------------- */
.btn {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.05rem;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  background: var(--groen);
  color: var(--wit);
  box-shadow: 0 6px 0 var(--groen-donker);
  min-height: 52px;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--groen-donker); }
.btn.groot  { font-size: 1.3rem; padding: 18px 40px; }
.btn.secundair { background: var(--wit); color: var(--zwart); box-shadow: 0 6px 0 var(--blauw); }
.btn.secundair:active { box-shadow: 0 3px 0 var(--blauw); }
.btn.spook  { background: transparent; color: var(--grijs); box-shadow: none; font-weight: 600; }
.btn.spook:hover { color: var(--zwart); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* --- Kaart --------------------------------------------------------------- */
.kaart {
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: clamp(20px, 4vw, 36px);
}

/* --- Startscherm --------------------------------------------------------- */
.hero { text-align: center; }
.hero .badge {
  display: inline-block;
  background: var(--lime);
  color: var(--zwart);
  font-family: var(--font-kop);
  font-weight: 800;
  letter-spacing: .12em;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .8rem;
  margin-bottom: 18px;
}
.hero h1 { margin-bottom: .1em; }
.hero .signaal { font-size: 2.4rem; letter-spacing: .3em; color: var(--groen); margin: 6px 0 4px; }

.naam-invoer { max-width: 420px; margin: 26px auto 0; }
.naam-invoer label { display: block; font-weight: 700; margin-bottom: 8px; }
.naam-invoer input {
  width: 100%;
  font-size: 1.2rem;
  padding: 14px 18px;
  border: 3px solid var(--blauw);
  border-radius: var(--radius-s);
  font-family: var(--font-tekst);
  text-align: center;
}
.naam-invoer input:focus { outline: none; border-color: var(--groen); }
.naam-invoer label:not(:first-child) { margin-top: 18px; }

.keuze-veld {
  width: 100%;
  font-size: 1.15rem;
  padding: 13px 16px;
  border: 3px solid var(--blauw);
  border-radius: var(--radius-s);
  font-family: var(--font-tekst);
  background: var(--wit);
  color: var(--zwart);
  text-align: center;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238DB600' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.keuze-veld:focus { outline: none; border-color: var(--groen); }
.keuze-veld.klein { width: auto; font-size: .95rem; padding: 8px 34px 8px 14px; border-width: 2px; text-align: left; box-shadow: var(--schaduw); background-position: right 12px center; }

/* --- Niveaukeuze: hexagon-kaarten --------------------------------------- */
.niveaus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 20px;
  margin-top: 8px;
  justify-content: center;
}
@media (min-width: 900px) {
  .niveaus { grid-template-columns: repeat(4, minmax(0, 220px)); }
}
@media (max-width: 470px) {
  .niveaus { grid-template-columns: minmax(0, 280px); }
}
.niveau-kaart {
  position: relative;
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 26px 22px 24px;
  cursor: pointer;
  text-align: center;
  border: 3px solid transparent;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: hidden;
}
.niveau-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw-lg); border-color: var(--accent, var(--lime)); }
.speltak-badge { width: 104px; height: 104px; object-fit: contain; margin: 0 auto 12px; display: block; }
.speltak-badge.groot { width: 132px; height: 132px; margin-bottom: 14px; }
.niveau-kaart .hex {
  width: 88px; height: 100px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--wit);
  font-size: 2.6rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.niveau-kaart .nr {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--grijs);
}
.niveau-kaart h3 { margin: 2px 0 4px; font-size: 1.35rem; }
.niveau-kaart .leeftijd {
  display: inline-block;
  background: var(--grijs-licht);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--zwart);
  margin-bottom: 10px;
}
.niveau-kaart .beschrijving { font-size: .92rem; color: var(--grijs); min-height: 3.2em; }
.niveau-kaart .sterren { color: var(--geel); font-size: 1rem; margin-top: 10px; letter-spacing: 2px; }

/* --- Voortgangsbalk ------------------------------------------------------ */
.voortgang {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.voortgang .stappen { display: flex; gap: 8px; flex: 1; }
.voortgang .stap {
  flex: 1; min-width: 10px; height: 14px; border-radius: 999px; background: var(--grijs-licht);
  cursor: pointer; transition: transform .1s ease;
}
.voortgang .stap:hover { transform: scaleY(1.35); }
.voortgang .stap.klaar { background: var(--groen); }
.voortgang .stap.fout  { background: #e08585; }
.voortgang .stap.nu    { box-shadow: 0 0 0 3px var(--zwart); }

.opgelost-doos {
  background: var(--lime-licht); border: 3px solid var(--groen);
  border-radius: var(--radius-s); padding: 16px 18px; margin-bottom: 12px;
  font-family: var(--font-kop); font-weight: 800; color: var(--groen-donker);
}
.voortgang .tijd, .voortgang .score {
  font-family: var(--font-kop); font-weight: 800; font-size: 1.05rem;
  background: var(--wit); border-radius: 999px; padding: 6px 14px; box-shadow: var(--schaduw);
  white-space: nowrap;
}
.voortgang .tijd::before  { content: "\23F1  "; }
.voortgang .score::before { content: "\2B50  "; }

/* --- Puzzel-scherm ------------------------------------------------------- */
.puzzel .opdracht { font-size: 1.15rem; margin-bottom: 18px; }
.puzzel .werkgebied { margin: 18px 0; }
.puzzel .voetregel { display: flex; gap: 12px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.puzzel .voetregel .btn { flex: 0 0 auto; }
.puzzel .hint-doos {
  background: var(--blauw);
  border-radius: var(--radius-s);
  padding: 14px 18px;
  margin-top: 16px;
  font-size: .98rem;
}
.puzzel .feedback { font-family: var(--font-kop); font-weight: 800; font-size: 1.2rem; min-height: 1.4em; }
.feedback.goed { color: var(--groen-donker); }
.feedback.fout { color: #d64545; }

/* antwoordveld */
.antwoord-veld {
  font-size: 1.6rem; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 14px; width: 100%; max-width: 420px;
  border: 3px solid var(--blauw); border-radius: var(--radius-s);
  font-family: var(--font-kop); font-weight: 700;
}
.antwoord-veld:focus { outline: none; border-color: var(--groen); }

/* keuze-tegels (tap) */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.tegel {
  background: var(--wit); border: 3px solid var(--grijs-licht); border-radius: var(--radius);
  min-height: 120px; font-size: 3rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .1s ease, border-color .12s ease;
  box-shadow: var(--schaduw);
}
.tegel .label { font-size: 1rem; font-family: var(--font-kop); font-weight: 700; }
.tegel:hover { transform: translateY(-3px); border-color: var(--lime); }
.tegel.goed  { border-color: var(--groen); background: var(--lime-licht); }
.tegel.fout  { border-color: #d64545; animation: schud .3s; }
@keyframes schud { 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* grote luister/afspeel-knop */
.speel-knop {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--geel); color: var(--zwart);
  border: none; border-radius: 999px; padding: 16px 30px;
  font-family: var(--font-kop); font-weight: 800; font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 6px 0 #d9a900;
}
.speel-knop:active { transform: translateY(3px); box-shadow: 0 3px 0 #d9a900; }
.speel-knop .icoon { font-size: 1.5rem; }

/* referentie-kaarten (morse/nato tabellen) */
.ref-tabel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px; margin-top: 8px;
}
.ref-tabel .cel {
  background: var(--grijs-licht); border-radius: 8px; padding: 6px 4px; text-align: center;
  font-size: .8rem;
}
.ref-tabel .cel b { display: block; font-family: var(--font-kop); font-size: 1rem; color: var(--groen-donker); }
.ref-tabel .cel .code { font-family: 'Courier New', monospace; letter-spacing: 1px; }

details.hulpkaart { margin-top: 14px; }
details.hulpkaart summary {
  cursor: pointer; font-weight: 700; color: var(--blauw-diep); padding: 6px 0;
}

/* pigpen / symbool weergave */
.symbolen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.symbolen svg { width: 46px; height: 46px; }
.morse-groot { font-family: 'Courier New', monospace; font-size: 2rem; letter-spacing: 3px; word-spacing: 18px; color: var(--zwart); }

/* --- Scorebord ----------------------------------------------------------- */
.scorebord table { width: 100%; border-collapse: collapse; }
.scorebord th, .scorebord td { padding: 10px 12px; text-align: left; }
.scorebord th { font-family: var(--font-kop); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs); border-bottom: 2px solid var(--grijs-licht); }
.scorebord tr td { border-bottom: 1px solid var(--grijs-licht); }
.scorebord tr.ik td { background: var(--lime-licht); font-weight: 700; }
.scorebord .rang { font-family: var(--font-kop); font-weight: 800; width: 40px; }
.scorebord .rang.top1 { color: #d4a017; }
.scorebord .rang.top2 { color: #9aa0a6; }
.scorebord .rang.top3 { color: #b06a2c; }
.scorebord .num { text-align: right; font-variant-numeric: tabular-nums; }
.scorebord .leeg { text-align: center; color: var(--grijs); padding: 30px; }

.filter-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.filter-knoppen .chip {
  border: none; background: var(--wit); box-shadow: var(--schaduw);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 700; font-family: var(--font-kop);
}
.filter-knoppen .chip.actief { background: var(--groen); color: var(--wit); }

/* --- Finale -------------------------------------------------------------- */
.finale { text-align: center; }
.finale .medaille { font-size: 5rem; }
.finale .grote-score { font-family: var(--font-kop); font-weight: 800; font-size: 3rem; color: var(--groen-donker); }
.finale .stats { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.finale .stat { background: var(--wit); border-radius: var(--radius); padding: 16px 24px; box-shadow: var(--schaduw); }
.finale .stat b { display: block; font-size: 1.6rem; font-family: var(--font-kop); color: var(--zwart); }
.finale .stat span { color: var(--grijs); font-size: .85rem; }

/* --- Confetti / algemeen ------------------------------------------------- */
.midden { text-align: center; }
.knoppenrij { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.voetnoot { text-align: center; color: var(--grijs); font-size: .8rem; margin-top: auto; padding-top: 30px; }

.groot-emoji { font-size: 3rem; }

/* Groot doel-plaatje/teken voor de jongste groep (visueel, geen geluid) */
.groot-doel {
  font-size: 4.5rem;
  line-height: 1.1;
  margin: 6px auto 22px;
  padding: 18px 30px;
  background: var(--lime-licht);
  border: 4px dashed var(--groen);
  border-radius: var(--radius);
  display: block;
  width: fit-content;
  letter-spacing: .1em;
}

/* --- Verzamelde-code balk (escape-room) ---------------------------------- */
.code-balk {
  display: flex; align-items: center; gap: 12px;
  background: var(--wit); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 10px 16px; margin-bottom: 18px;
}
.code-balk .code-label { font-family: var(--font-kop); font-weight: 800; color: var(--grijs); font-size: .8rem; letter-spacing: .1em; }
.code-tegels, .slot-letters { display: flex; gap: 8px; flex-wrap: wrap; }
.slot-letters { justify-content: center; margin: 16px 0; }
.code-tegel {
  width: 34px; height: 40px; border-radius: 8px; background: var(--grijs-licht);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-kop); font-weight: 800; font-size: 1.1rem; color: var(--grijs);
}
.code-tegel.vol { background: var(--lime); color: var(--zwart); }
.slot-letters .code-tegel { width: 44px; height: 52px; font-size: 1.5rem; }

/* --- Slot-scherm --------------------------------------------------------- */
.slot-icoon { font-size: 3.4rem; margin-bottom: 4px; }

/* --- Zelf seinen (tikMorse) ---------------------------------------------- */
.sein-knoppen { display: flex; gap: 12px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }

/* --- Seinvlaggen (semafoor) ---------------------------------------------- */
.symbolen svg.sem-groot { width: 60px; height: 80px; }
.sem-key-item { text-align: center; width: 58px; }
.sem-key-item svg { width: 44px; height: 60px; }

/* --- Radio afstemmen ----------------------------------------------------- */
.freq-slider { width: 100%; max-width: 440px; margin: 6px auto; display: block; accent-color: var(--groen); height: 30px; }
.signaal-balk { height: 18px; border-radius: 9px; background: var(--grijs-licht); max-width: 440px; margin: 8px auto 0; overflow: hidden; }
.signaal-vul { height: 100%; width: 0; background: linear-gradient(90deg, var(--lime), var(--groen)); transition: width .08s linear; }

/* --- Land / contact ------------------------------------------------------ */
.land-doos {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--blauw); border-radius: var(--radius); padding: 16px 22px;
  margin: 16px auto; max-width: 420px; line-height: 1.35;
}
.land-doos .vlag { font-size: 3rem; }

/* --- Confetti ------------------------------------------------------------ */
.confetti-laag { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999; }
.confetti-stuk {
  position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 2px;
  animation-name: confetti-val; animation-timing-function: linear; animation-iteration-count: 1;
}
@keyframes confetti-val {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(102vh) rotate(720deg); opacity: .9; }
}

@media (max-width: 520px) {
  .kop img { height: 44px; }
  .btn { font-size: 1rem; }
}

/* --- JOTARI merk-logo + Arie mascotte ------------------------------------ */
.kop .merk-logo { height: 50px; width: auto; }
.voet-logo { height: 16px; width: auto; vertical-align: middle; margin-right: 6px; opacity: .85; }

.arie-blok {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 18px; text-align: left;
}
.arie-fig { width: 78px; height: auto; flex: 0 0 auto; align-self: flex-end; }
.arie-blok.groot .arie-fig { width: 120px; }

.tekstballon {
  position: relative; flex: 1;
  background: var(--wit); border: 3px solid var(--blauw); border-radius: 16px;
  padding: 14px 18px; font-size: 1.08rem; line-height: 1.45;
  box-shadow: var(--schaduw); min-height: 1.4em;
}
.tekstballon::before {
  content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-right-color: var(--blauw);
}
.tekstballon::after {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-right-color: var(--wit);
}
.tekstballon .cursor {
  display: inline-block; margin-left: 1px; color: var(--groen); font-weight: 700;
  animation: knipper 1s steps(1) infinite;
}
.tekstballon.af .cursor { display: none; }
@keyframes knipper { 50% { opacity: 0; } }

@media (max-width: 520px) {
  .arie-fig { width: 58px; }
  .arie-blok.groot .arie-fig { width: 82px; }
  .tekstballon { font-size: 1rem; padding: 11px 14px; }
  .kop .merk-logo { height: 40px; }
}

/* --- Bevers: extra visueel (grote tegels, tik-cue, pulserend doel) ------- */
.tegels.groot-tegels { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; }
.tegels.groot-tegels .tegel { min-height: 150px; font-size: 4.2rem; }
.tegels.groot-tegels .tegel .label { font-size: 3rem; }
.tik-cue { font-size: 2.4rem; margin: 2px 0 10px; animation: cue-stuiter 1s ease-in-out infinite; }
@keyframes cue-stuiter { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.groot-doel.pulse { animation: doel-pulse 1.4s ease-in-out infinite; }
@keyframes doel-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* --- Uitleg-paneel (hoe werkt het) --------------------------------------- */
.uitleg-paneel {
  background: var(--grijs-licht); border-radius: var(--radius); padding: 16px 18px;
  margin: 4px auto 6px; max-width: 560px; text-align: left;
}
.uitleg-titel { font-family: var(--font-kop); font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); margin-bottom: 8px; }
.uitleg-stap { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; line-height: 1.4; }
.uitleg-icoon { font-size: 1.6rem; flex: 0 0 auto; width: 34px; text-align: center; }

/* --- Overlay (uitleg tijdens spelen) ------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  background: rgba(19,19,19,.55); padding: 20px;
}
.overlay-kaart {
  background: var(--wit); border-radius: var(--radius); box-shadow: var(--schaduw-lg);
  padding: clamp(20px, 4vw, 34px); max-width: 620px; width: 100%; text-align: center;
}

/* --- Kabels verbinden (telefooncentrale) --------------------------------- */
.verbind {
  position: relative; display: flex; justify-content: space-between;
  gap: clamp(40px, 12vw, 110px); max-width: 560px; margin: 8px auto 4px;
}
.verbind-svg { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.verbind-kol { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.verbind-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--wit); border: 3px solid var(--grijs-licht); border-radius: 12px;
  padding: 10px 14px; box-shadow: var(--schaduw);
  font-family: var(--font-kop); font-weight: 800; font-size: 1.15rem;
  transition: border-color .12s ease, transform .08s ease; user-select: none;
}
.verbind-kol.links .verbind-item { justify-content: flex-end; text-align: right; }
.verbind-item:hover { transform: translateY(-1px); }
.verbind-item.actief { border-color: var(--groen); box-shadow: 0 0 0 3px rgba(141,182,0,.25), var(--schaduw); }
.verbind .plug {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--grijs-licht); border: 3px solid var(--grijs); flex: 0 0 auto;
}
.verbind-label.emoji { font-size: 1.9rem; }
.verbind-label.morse-mini { font-family: 'Courier New', monospace; letter-spacing: 2px; font-size: 1.2rem; }
.verbind-label .sem-mini { width: 34px; height: 46px; display: block; }

/* --- Seinlamp (knipperend licht) ----------------------------------------- */
.seinlamp {
  width: 120px; height: 120px; border-radius: 50%; margin: 12px auto;
  background: #2b2b2b; box-shadow: inset 0 0 22px rgba(0,0,0,.7);
  transition: background .04s linear, box-shadow .04s linear;
}
.seinlamp.aan {
  background: #ffe066;
  box-shadow: 0 0 44px 12px rgba(255,210,63,.85), inset 0 0 22px rgba(255,255,255,.6);
}

/* --- Decodeerschijf (cipher wheel) --------------------------------------- */
.schijf { display: flex; justify-content: center; margin: 8px 0; }
.schijf-svg { width: 240px; height: 240px; }
.schijf-svg .ring-lijn { fill: none; stroke: var(--grijs-licht); stroke-width: 2; }
.schijf-svg .ring-buiten text { font-family: var(--font-kop); font-weight: 800; font-size: 15px; fill: var(--zwart); }
.schijf-svg .ring-binnen text { font-family: var(--font-kop); font-weight: 800; font-size: 15px; fill: var(--groen-donker); }
.schijf-svg .ring-binnen { transition: transform .18s ease; }
.schijf-svg .ring-pijl { fill: var(--geel); stroke: var(--zwart); stroke-width: 1.5; }
.schijf-uitkomst {
  font-family: var(--font-kop); font-weight: 800; font-size: 1.8rem; letter-spacing: .1em;
  text-align: center; color: var(--groen-donker); min-height: 1.4em; margin: 6px 0 10px;
}

/* --- Zelf seinvlaggen zetten (sender) ------------------------------------ */
.zetvlag-voortgang { font-family: var(--font-kop); font-weight: 800; font-size: 1.7rem; letter-spacing: .18em; text-align: center; margin: 6px 0 2px; }
.zetvlag-voortgang span { color: var(--grijs); }
.zetvlag-voortgang .af { color: var(--groen); }
.zetvlag-voortgang .nu { color: var(--zwart); border-bottom: 3px solid var(--geel); }
.zetvlag-figuur { display: flex; justify-content: center; }
.zetvlag-svg { width: 120px; height: 160px; }
.richting-knoppen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.richting-knop { min-width: 54px; font-size: 1.4rem; padding: 10px 12px; min-height: 46px; }
.richting-knop.actief { background: var(--groen); color: var(--wit); box-shadow: 0 6px 0 var(--groen-donker); }

/* --- Live semafoor: letterteller --------------------------------------- */
.sem-teller { text-align: center; font-size: 1.8rem; letter-spacing: 8px; color: var(--grijs-licht); min-height: 1.4em; margin-bottom: 2px; }
.sem-teller .nu { color: var(--geel); }

/* --- Bits-hulpkaart (A-Z in binair): goed leesbaar ----------------------- */
.bits-tabel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.bits-cel { display: flex; align-items: center; gap: 10px; background: var(--grijs-licht); border-radius: 10px; padding: 8px 12px; }
.bits-cel b { font-family: var(--font-kop); font-size: 1.35rem; color: var(--groen-donker); min-width: 1.1em; text-align: center; }
.bits-cel .bits { font-family: 'Courier New', monospace; font-weight: 700; font-size: 1.05rem; letter-spacing: 1px; color: var(--zwart); }
.bits-code { word-spacing: .35em; }

/* --- Bonus-multiplier pill (zichtbaar tijdens spelen) -------------------- */
.voortgang .bonus {
  font-family: var(--font-kop); font-weight: 800; font-size: .95rem;
  background: var(--geel); color: var(--zwart); border-radius: 999px;
  padding: 6px 14px; box-shadow: var(--schaduw); white-space: nowrap;
}
.voortgang .bonus #bonuspil { font-size: 1.05rem; }

/* Antenne richten */
.antenne-svg { width: 240px; max-width: 80vw; height: auto; display: block; margin: 6px auto 2px; }
.ant-ring { fill: none; stroke: var(--grijs-licht); stroke-width: 4; }
.ant-tick { stroke: var(--grijs); stroke-width: 2; }
.ant-arm { stroke: var(--groen); stroke-width: 5; stroke-linecap: round; }
.ant-schotel { fill: var(--lime); stroke: var(--groen); stroke-width: 3; }
.ant-hub { fill: var(--donker); }
.ant-arm, .ant-schotel { transition: none; }

/* Signaal uit de ruis */
.ontruis-scherm {
  font-family: var(--mono, monospace); font-weight: 700; letter-spacing: .18em;
  font-size: 2.1rem; text-align: center; background: var(--donker); color: #7d8a72;
  border-radius: 12px; padding: 18px 12px; margin: 8px auto 0; max-width: 440px;
  min-height: 1.6em; user-select: none; overflow: hidden; box-shadow: inset 0 0 22px rgba(0,0,0,.5);
}
.ontruis-teken { display: inline-block; min-width: .7em; }
.ontruis-teken.helder { color: var(--lime); text-shadow: 0 0 10px rgba(193,215,46,.7); }

/* --- JOTARI-startscherm, niveau-knop en activiteiten ---------------------- */
.kop .merk {
  display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0;
}
.niveau-knop {
  display: flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  background: var(--wit); border: 3px solid var(--accent, var(--lime)); border-radius: 999px;
  padding: 4px 12px 4px 4px; box-shadow: var(--schaduw); color: var(--zwart);
}
.niveau-knop:hover { transform: translateY(-2px); }
.kop .niveau-knop img { height: 38px; width: 38px; object-fit: contain; }
.niveau-knop span { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-kop); font-weight: 800; font-size: .95rem; text-align: left; }
.niveau-knop small { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
.niveau-knop .pijl { color: var(--grijs); font-size: .8rem; }

.kaart + .kaart { margin-top: 20px; }
.sectie-kop { margin: 26px 0 12px; text-align: center; font-family: var(--font-kop); }
.kaart > .sectie-kop:first-child { margin-top: 0; }

.niveau-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.niveau-mini {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit;
  background: var(--wit); border: 3px solid var(--grijs-licht); border-radius: var(--radius-s);
  padding: 12px 6px; color: var(--zwart); transition: transform .12s ease, border-color .15s ease;
}
.niveau-mini:hover { transform: translateY(-3px); border-color: var(--accent); }
.niveau-mini.actief { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, white); box-shadow: var(--schaduw); }
.niveau-mini img { width: 64px; height: 64px; object-fit: contain; }
.niveau-mini b { font-family: var(--font-kop); font-size: 1.05rem; }
.niveau-mini span { font-size: .8rem; color: var(--grijs); }

.activiteiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.activiteit-kaart {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer; font: inherit;
  text-align: left; background: var(--wit); color: var(--zwart); border: 3px solid var(--grijs-licht);
  border-radius: var(--radius-s); padding: 18px; transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.activiteit-kaart:hover { transform: translateY(-3px); border-color: var(--lime); box-shadow: var(--schaduw); }
.activiteit-kaart .icoon { font-size: 2.4rem; line-height: 1; }
.activiteit-kaart b { font-family: var(--font-kop); font-size: 1.1rem; }
.activiteit-kaart span:last-child { color: var(--grijs); font-size: .95rem; line-height: 1.4; }

.activiteit-uitleg { text-align: center; }
.activiteit-icoon { font-size: 3.4rem; line-height: 1; }
.stappen-lijst { text-align: left; max-width: 620px; margin: 18px auto; padding-left: 1.4em; line-height: 1.55; }
.stappen-lijst li { margin: 8px 0; padding-left: 4px; }
.regels-doos { text-align: left; max-width: 620px; margin: 0 auto 18px; background: #fff6d6; border-radius: var(--radius-s); padding: 14px 18px; }
.regels-doos ul { margin: 4px 0 0; padding-left: 1.2em; line-height: 1.5; }
a.btn { text-decoration: none; display: inline-block; }

@media (max-width: 620px) {
  .niveau-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .kop { gap: 8px; }
  .kop .titel { display: none; }
  .kop .niveau-knop img { height: 32px; width: 32px; }
}
.subtitel.link-noot { margin-top: 18px; font-size: .95rem; }

/* --- Vriendenboekje ------------------------------------------------------ */
.vb-form { max-width: 620px; margin: 10px auto 0; }
.vb-sectie { border: 0; margin: 22px 0 0; padding: 0; }
.vb-sectie legend { font-family: var(--font-kop); font-weight: 800; font-size: 1.15rem; padding: 0; margin-bottom: 4px; }
.vb-sectie .subtitel { font-size: .95rem; margin: 0 0 8px; }
.vb-veld { display: block; margin: 12px 0; }
.vb-veld > span { display: block; font-weight: 700; margin-bottom: 6px; }
.vb-veld input {
  width: 100%; font-size: 1.1rem; padding: 12px 16px; border: 3px solid var(--blauw);
  border-radius: var(--radius-s); font-family: var(--font-tekst); background: var(--wit); color: var(--zwart);
}
.vb-veld .keuze-veld { text-align: left; font-size: 1.1rem; padding: 12px 40px 12px 16px; }
.vb-veld input:focus { outline: none; border-color: var(--groen); }
.vb-veld input.vb-fout { border-color: #d64545; }
.vb-verplicht { color: #d64545; }
.vb-tip { display: block; color: var(--grijs); margin-top: 4px; line-height: 1.4; }
.vb-dilemma { display: flex; gap: 10px; align-items: stretch; margin: 10px 0; }
.vb-dilemma-nr { flex: 0 0 28px; font-family: var(--font-kop); font-weight: 800; color: var(--grijs); padding-top: 14px; text-align: center; }
.vb-dilemma-knoppen { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vb-keuze {
  font: inherit; text-align: left; cursor: pointer; background: var(--wit); color: var(--zwart);
  border: 3px solid var(--grijs-licht); border-radius: var(--radius-s); padding: 10px 12px; line-height: 1.35;
}
.vb-keuze b { font-family: var(--font-kop); color: var(--groen-donker); margin-right: 4px; }
.vb-keuze:hover { border-color: var(--lime); }
.vb-keuze.actief { border-color: var(--groen); background: var(--lime-licht); }
.vb-val { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 520px) {
  .vb-dilemma-knoppen { grid-template-columns: 1fr; }
}

/* --- Wereldkaart + plaats zoeken ----------------------------------------- */
.vb-kaart { margin: 16px 0 6px; padding: 14px; border-radius: var(--radius-s); background: #eef5fb; }
.vb-kaart-kop { display: block; font-family: var(--font-kop); font-weight: 800; margin-bottom: 6px; }
.loc-zoeker { margin-top: 8px; }
.loc-rij { display: flex; gap: 8px; }
.loc-rij input {
  flex: 1; min-width: 0; font-size: 1.05rem; padding: 12px 14px; border: 3px solid var(--blauw);
  border-radius: var(--radius-s); font-family: var(--font-tekst); background: var(--wit);
}
.loc-rij input:focus { outline: none; border-color: var(--groen); }
.loc-rij .btn { min-height: 0; padding: 10px 18px; box-shadow: 0 4px 0 var(--blauw); }
.loc-status { margin-top: 8px; color: var(--grijs); font-size: .95rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.loc-gekozen { color: var(--groen-donker); font-weight: 700; }
.loc-status .btn { min-height: 0; padding: 4px 8px; font-size: .9rem; }
.loc-lijst { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.loc-lijst:empty { display: none; }
.loc-optie {
  font: inherit; text-align: left; cursor: pointer; background: var(--wit); color: var(--zwart);
  border: 2px solid var(--grijs-licht); border-radius: var(--radius-s); padding: 10px 12px;
}
.loc-optie:hover { border-color: var(--groen); background: var(--lime-licht); }
.wk-frame { width: 100%; height: max(440px, min(78vh, 720px)); border: 0; border-radius: var(--radius-s); margin-top: 12px; background: #eef5fb; }
.wk-soorten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wk-soorten .vb-keuze { text-align: center; }
@media (max-width: 520px) { .wk-soorten { grid-template-columns: 1fr 1fr; } }
.vb-veld select.vb-fout { border-color: #d64545; }
@media (max-width: 420px) {
  .loc-rij { flex-wrap: wrap; }
  .loc-rij input { flex-basis: 100%; }
}

/* voortgangsbalk op een telefoon: stippen op een eigen regel, bonus/score/tijd eronder
   (anders werd de hele pagina breder dan het scherm) */
@media (max-width: 620px) {
  .voortgang { flex-wrap: wrap; row-gap: 10px; }
  .voortgang .stappen { flex: 1 1 100%; gap: 4px; }
  .voortgang .stap { min-width: 6px; }
}

/* --- Externe site binnen de app (programmeren) --------------------------- */
.extern-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.extern-titel { font-family: var(--font-kop); font-weight: 800; font-size: 1.2rem; }
.extern-knoppen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.extern-knoppen .btn { min-height: 0; padding: 8px 14px; font-size: .9rem; box-shadow: 0 4px 0 var(--blauw); }
.extern-knoppen .btn.spook { box-shadow: none; }
.extern-uitleg { margin-bottom: 12px; }
.extern-uitleg .stappen-lijst { margin: 0; }
.extern-wrap { position: relative; border-radius: var(--radius-s); overflow: hidden; box-shadow: var(--schaduw); background: var(--wit); }
.extern-laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--grijs); }
/* hoogte wordt in toonExternSpel precies tot onderaan het scherm gezet; dit is alleen de startwaarde */
.extern-frame { position: relative; display: block; width: 100%; height: calc(100vh - 180px); min-height: 360px; border: 0; background: transparent; }
.extern-arie-plek { display: flex; align-items: center; }
/* volledig scherm: knoppenbalk + Arie bovenaan, het spel vult de rest */
.extern-scherm:fullscreen { display: flex; flex-direction: column; padding: 10px 14px 14px; box-sizing: border-box;
  background: #f6f8f2; overflow: auto; }
.extern-scherm:fullscreen .extern-wrap { flex: 1; display: flex; min-height: 0; }
.extern-scherm:fullscreen .extern-frame { flex: 1; height: auto !important; min-height: 0; }
@media (max-width: 520px) { .extern-knoppen { margin-left: 0; } }

/* --- Lampjes (binair met licht) ---------------------------------------- */
.lampjes-rij { display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; margin: 12px auto; }
.lampje-kol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lampje { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #555; background: #3a3a3a; cursor: pointer;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.45); transition: background .15s, box-shadow .15s; padding: 0; }
.lampje.aan { background: #ffd23f; border-color: #e0a800; box-shadow: 0 0 22px 6px rgba(255,210,63,.75), inset 0 -4px 8px rgba(0,0,0,.15); }
.lampje:disabled { cursor: default; }
.lampjes-rij.voorbeeld .lampje { width: 40px; height: 40px; cursor: default; }
.lampje-label { font-family: var(--font-kop); font-weight: 800; color: var(--grijs); }
.lampjes-som { font-family: var(--font-kop); font-weight: 800; font-size: 1.3rem; min-height: 1.5em; }
@media (max-width: 520px) {
  .lampje { width: 34px; height: 34px; } .lampjes-rij { gap: 5px; }
  .lampje-kol { min-width: 0; } .lampje-label { font-size: .75rem; }
}
@media (max-width: 400px) { .lampje { width: 30px; height: 30px; } .lampjes-rij { gap: 3px; } }

/* --- Morsesleutel -------------------------------------------------------- */
.seinlamp.klein { width: 90px; height: 90px; margin: 8px auto; }
.sleutel-bezig { min-height: 1.4em; letter-spacing: .15em; }
.sleutel-knop { display: block; margin: 10px auto; width: min(260px, 90%); padding: 26px 10px; border-radius: 22px; border: 0;
  background: #2b3a4a; color: #fff; font: 800 1.5rem var(--font-kop); box-shadow: 0 8px 0 #151e27; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sleutel-knop.ingedrukt { transform: translateY(6px); box-shadow: 0 2px 0 #151e27; background: #3b4f63; }
.sleutel-knop:disabled { opacity: .5; }
.sleutel-uit { font: 800 1.8rem var(--font-kop); letter-spacing: .3em; margin: 8px 0; }
.sleutel-uit .goed { color: var(--groen-donker); }
.sleutel-uit .fout { color: #d64545; }

/* --- Volgorde (radiogesprek) ---------------------------------------------- */
.volgorde-lijst { max-width: 560px; margin: 10px auto; padding-left: 1.6em; min-height: 1em; line-height: 1.5; }
.volgorde-lijst li { background: var(--lime-licht); border-radius: var(--radius-s); padding: 8px 12px; margin: 6px 0; }
.volgorde-tegels { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 8px auto; }
.volgorde-tegel { font: inherit; text-align: left; cursor: pointer; background: var(--wit); border: 3px solid var(--grijs-licht);
  border-radius: var(--radius-s); padding: 10px 14px; color: var(--zwart); }
.volgorde-tegel:hover { border-color: var(--lime); }
.volgorde-tegel.gebruikt { opacity: .35; }
.volgorde-tegel.fout { border-color: #d64545; animation: schud .3s; }

/* Bevers: tel-antwoorden met grote lampjes + groot cijfer */
.tegels.tel-tegels .tegel { min-height: 130px; }
.tegels.tel-tegels .label { font-size: 2rem; line-height: 1.25; }
@media (max-width: 520px) { .tegels.tel-tegels .label { font-size: 1.5rem; } }

/* --- Tetris ----------------------------------------------------------------- */
.tetris { display: flex; gap: 18px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.tetris-veld { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tetris-naam, .tetris-tegen-naam { font-family: var(--font-kop); font-weight: 800; }
.tetris-doek, .tetris-tegen { display: block; border-radius: 10px; box-shadow: var(--schaduw); }
.tetris-zij { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.tetris-label { font-family: var(--font-kop); font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); margin-top: 6px; }
.tetris-volgende { background: #1b2430; border-radius: 8px; }
.tetris-stand { font-size: 1rem; line-height: 1.4; }
.tetris-stand b { font-family: var(--font-kop); font-size: 1.4rem; color: var(--groen-donker); }
.tetris-stand.klein { font-size: .85rem; color: var(--grijs); }
.tetris-status { font-weight: 700; color: #d64545; min-height: 1.4em; font-size: .9rem; max-width: 180px; }
.tetris-knoppen { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.tetris-knop { width: 64px; height: 64px; border-radius: 16px; border: 0; background: #2b3a4a; color: #fff; font-size: 1.6rem;
  box-shadow: 0 5px 0 #151e27; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.tetris-knop:active { transform: translateY(4px); box-shadow: 0 1px 0 #151e27; }
.tetris-einde { position: absolute; inset: 28px 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); border-radius: 10px; text-align: center; padding: 16px; }
.tetris-einde-groot { font-family: var(--font-kop); font-weight: 800; font-size: 2rem; }
.tetris-einde .knoppenrij .btn { min-height: 0; padding: 10px 18px; }
.tetris-wacht .tetris-zoek { font-size: 3.4rem; animation: tetris-puls 1.4s ease-in-out infinite; }
@keyframes tetris-puls { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .6; } }
@media (max-width: 620px) { .tetris-zij { flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; } .tetris-knop { width: 56px; height: 56px; } }

/* --- Tetris: startscherm en banner -------------------------------------- */
.tetris-lobby { max-width: 760px; margin: 0 auto; }
.tetris-held { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 6px; }
.tetris-mini-veld { display: grid; grid-template-columns: repeat(5, 14px); grid-auto-rows: 14px; gap: 2px; padding: 6px;
  background: #1b2430; border-radius: 10px; box-shadow: var(--schaduw); }
.tetris-mini-veld i { border-radius: 3px; }
.tetris-mini-veld.links { transform: rotate(-5deg); }
.tetris-mini-veld.rechts { transform: rotate(5deg); }
.tetris-vs { font-family: var(--font-kop); font-weight: 800; font-size: 1.6rem; color: #fff; background: #d64545;
  border-radius: 50%; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 #a83232; transform: rotate(-8deg); }
.tetris-vs.klein { width: 40px; height: 40px; font-size: 1rem; box-shadow: 0 4px 0 #a83232; flex: 0 0 auto; }
.tetris-slogan { text-align: center; font-size: 1.1rem; line-height: 1.5; margin: 4px 0 14px; }
.tetris-stappen { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 620px; display: grid; gap: 8px; }
.tetris-stappen li { display: flex; gap: 12px; align-items: flex-start; background: var(--grijs-licht); border-radius: var(--radius-s); padding: 10px 14px; line-height: 1.45; }
.tetris-stap-icoon { font-size: 1.5rem; line-height: 1.1; }
.tetris-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; max-width: 620px; margin: 0 auto; }
.tetris-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; margin: 12px auto 4px; }
.tetris-keuze { font: inherit; cursor: pointer; text-align: center; border: 3px solid transparent; border-radius: var(--radius);
  padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--zwart);
  box-shadow: var(--schaduw); transition: transform .12s ease, border-color .15s ease; }
.tetris-keuze:hover { transform: translateY(-3px); }
.tetris-keuze.mens { background: linear-gradient(160deg, #eaf6c7, #fff); border-color: var(--groen); }
.tetris-keuze.pc { background: linear-gradient(160deg, #e3ecf7, #fff); border-color: var(--blauw); }
.tetris-keuze b { font-family: var(--font-kop); font-size: 1.15rem; }
.tetris-keuze span:last-child { color: var(--grijs); font-size: .92rem; line-height: 1.4; }
.tetris-keuze-icoon { font-size: 2.4rem; line-height: 1; }
.tetris-toetsen { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 14px; color: var(--grijs); font-size: .9rem; }
.tetris-toetsen kbd { display: inline-block; min-width: 26px; padding: 2px 6px; margin-right: 3px; border-radius: 6px; background: #fff;
  border: 1px solid #ccd; box-shadow: 0 2px 0 #ccd; font: 700 .85rem var(--font-kop); color: var(--zwart); text-align: center; }
.tetris-toetsen kbd.breed { min-width: 60px; }
.tetris-banner { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 14px; max-width: 640px;
  background: #1b2430; color: #fff; border-radius: 999px; padding: 8px 18px; box-shadow: var(--schaduw); }
.tetris-speler { font-family: var(--font-kop); font-weight: 800; font-size: 1.05rem; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.tetris-speler small { font: 600 .72rem var(--font-tekst); color: #c1d72e; }
@media (max-width: 620px) {
  .tetris-form, .tetris-keuzes { grid-template-columns: 1fr; }
  .tetris-toetsen .tablet { display: block; width: 100%; text-align: center; }
}
.scorebord-tabs { justify-content: center; margin-bottom: 4px; }
.chip.groot { font-size: 1rem; padding: 10px 18px; }
/* scoreborden op een smal scherm: tabel mag horizontaal schuiven, en compacter */
.kaart.scorebord { overflow-x: auto; }
@media (max-width: 620px) {
  .kaart.scorebord { padding: 12px 8px; }
  .scorebord table { font-size: .85rem; }
  .scorebord th, .scorebord td { padding: 8px 6px; }
  .scorebord th { font-size: .7rem; }
}

/* --- Tetris: drie kolommen naast elkaar (jij | volgende+knoppen | tegenstander) --- */
.tetris { display: grid; justify-content: center; align-items: start; gap: 8px 18px;
  grid-template-columns: auto auto auto; grid-template-areas: "ik mid tegen" "ik knop tegen"; }
.tetris-veld.ik { grid-area: ik; }
.tetris-midden { grid-area: mid; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; }
.tetris-veld.tegen { grid-area: tegen; }
.tetris-knoppen { grid-area: knop; display: grid; grid-template-columns: repeat(3, 56px); gap: 8px; justify-content: center;
  align-content: start; margin-top: 4px; }
.tetris-knoppen .tetris-knop { width: 56px; height: 56px; font-size: 1.4rem; }
.tetris-knoppen .tetris-stoppen { grid-column: 1 / -1; min-height: 0; padding: 6px; margin-top: 4px; }
.tetris-midden .tetris-stand { text-align: center; }
.tetris-veld.tegen .tetris-stand { text-align: center; }
.tetris-veld.tegen .tetris-tegen-naam { max-width: 180px; text-align: center; font-size: .9rem; }
/* smal scherm: jij links; rechts tegenstander + volgende; knoppen eronder over de hele breedte */
@media (max-width: 619px) {
  .tetris { grid-template-columns: auto auto; gap: 8px 12px; grid-template-areas: "ik tegen" "ik mid" "knop knop"; }
  .tetris-midden { min-width: 0; }
  .tetris-knoppen { grid-template-columns: repeat(5, 54px); margin-top: 10px; }
  .tetris-knoppen .tetris-knop { width: 54px; height: 54px; }
}
.tetris-banner .extern-arie-plek { margin-left: 6px; }
.tetris-banner .arie-hoek.gedockt { margin-top: 10px; }
/* Tetris: spatie = draaien, duidelijk in beeld */
.tetris-toetsen .hoofd { flex-basis: 100%; text-align: center; font-size: 1.15rem; color: var(--zwart); font-weight: 700; }
.tetris-toetsen .hoofd kbd, .tetris-legenda .hoofd kbd { background: var(--geel); border-color: #e0a800; box-shadow: 0 2px 0 #e0a800; }
.tetris-legenda { font-size: .82rem; color: var(--grijs); display: flex; flex-direction: column; gap: 5px; align-items: center; margin-top: 4px; }
.tetris-legenda .hoofd { font-weight: 800; color: var(--zwart); font-size: .95rem; }
.tetris-legenda kbd { display: inline-block; min-width: 22px; padding: 1px 5px; margin-right: 2px; border-radius: 5px; background: #fff;
  border: 1px solid #ccd; box-shadow: 0 2px 0 #ccd; font: 700 .78rem var(--font-kop); color: var(--zwart); text-align: center; }
.tetris-legenda kbd.breed { min-width: 58px; }
@media (hover: none) { .tetris-legenda { display: none; } }   /* tablet/telefoon: geen toetsenbord, dan knoppen */

/* --- Teken & Raad ----------------------------------------------------------- */
.tk-held { font-size: 3.4rem; text-align: center; line-height: 1; }
.tk-kamer { display: grid; gap: 10px 14px; grid-template-columns: 170px minmax(0, 1fr) 250px;
  grid-template-areas: "balk balk balk" "spelers midden chat"; max-width: 1150px; margin: 0 auto; }
.tk-balk { grid-area: balk; display: flex; align-items: center; gap: 14px; background: #1b2430; color: #fff; border-radius: 999px; padding: 6px 10px 6px 18px; }
.tk-tijd { font: 800 1.2rem var(--font-kop); min-width: 70px; }
.tk-tijd.bijna { color: #ff8a8a; animation: tetris-puls 1s ease-in-out infinite; }
.tk-status { flex: 1; text-align: center; font-size: 1.1rem; }
.tk-status small { opacity: .75; }
.tk-hint { font: 800 1.5rem var(--font-kop); letter-spacing: .12em; }
.tk-woord { font-family: var(--font-kop); font-size: 1.3rem; color: #c1d72e; text-transform: uppercase; letter-spacing: .05em; }
.tk-spelers { grid-area: spelers; display: flex; flex-direction: column; gap: 6px; }
.tk-speler { display: flex; align-items: center; gap: 8px; background: var(--wit); border-radius: var(--radius-s); padding: 8px 10px; box-shadow: var(--schaduw); }
.tk-speler.ik { outline: 3px solid var(--lime); }
.tk-speler.geraden { background: var(--lime-licht); }
.tk-plek { font: 800 .85rem var(--font-kop); color: var(--grijs); }
.tk-naam { flex: 1; display: flex; flex-direction: column; font-weight: 700; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.tk-naam small { font-weight: 500; color: var(--grijs); font-size: .75rem; }
.tk-punten { font: 800 1rem var(--font-kop); color: var(--groen-donker); }
.tk-midden { grid-area: midden; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tk-vel { position: relative; }
.tk-doek { width: 100%; height: auto; aspect-ratio: 4 / 3; display: block; background: #fff; border-radius: var(--radius-s); box-shadow: var(--schaduw); touch-action: none; }
.tk-doek.tekent { cursor: crosshair; outline: 3px solid var(--lime); }
.tk-keuzes { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px;
  background: rgba(27,36,48,.85); border-radius: var(--radius-s); padding: 16px; }
.tk-keuzes[hidden] { display: none; }
.tk-keuze-titel { flex-basis: 100%; text-align: center; color: #fff; font: 800 1.2rem var(--font-kop); }
.tk-gereedschap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.tk-gereedschap[hidden] { display: none; }
.tk-kleur { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #ccd; cursor: pointer; padding: 0; }
.tk-kleur.actief { border-color: var(--zwart); transform: scale(1.12); }
.tk-dikte { width: 36px; height: 36px; border-radius: 10px; border: 3px solid #ccd; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tk-dikte i { background: var(--zwart); border-radius: 50%; display: block; }
.tk-dikte.actief { border-color: var(--zwart); }
.tk-knop { min-height: 0; padding: 6px 12px; font-size: .85rem; box-shadow: 0 3px 0 var(--blauw); }
/* contain:size = de chat bepaalt de rijhoogte niet; hij rekt mee met het tekenvel en scrolt van binnen (nieuwste onderaan) */
.tk-chat { grid-area: chat; position: relative; display: flex; flex-direction: column; background: var(--wit); border-radius: var(--radius-s); box-shadow: var(--schaduw); contain: size; min-height: 300px; }
.tk-berichten { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px; font-size: .92rem; line-height: 1.4; display: flex; flex-direction: column; gap: 4px; }
.tk-bericht.systeem { color: var(--grijs); font-style: italic; }
.tk-bericht.goed { color: var(--groen-donker); font-weight: 800; }
.tk-bericht.letop { color: #b35900; font-weight: 700; background: #fff3e6; border-radius: 8px; padding: 4px 8px; }
.tk-bericht.leiding { color: #fff; background: #d64545; font-weight: 700; border-radius: 8px; padding: 6px 10px; }
.tk-invoer:disabled { background: #f3f3f3; cursor: not-allowed; }
.tk-leiding-popup .overlay-kaart { border-top: 8px solid #d64545; text-align: center; }
.tk-leiding-popup p { font-size: 1.25rem; margin: 10px 0 0; }
.tk-leiding-icoon { font-size: 3rem; line-height: 1; }
.tk-bericht.bijna { color: #e67e22; font-weight: 700; }
.tk-nieuw { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); border: 0; border-radius: 999px; padding: 6px 14px;
  background: var(--groen-donker); color: #fff; font: 700 .85rem var(--font-tekst); cursor: pointer; box-shadow: var(--schaduw); white-space: nowrap; }
.tk-nieuw[hidden] { display: none; }
.tk-invoer { border: 0; border-top: 2px solid var(--grijs-licht); padding: 12px; font: inherit; font-size: 1rem; border-radius: 0 0 var(--radius-s) var(--radius-s); }
.tk-invoer:focus { outline: none; background: #fafdf0; }
@media (max-width: 900px) {
  .tk-kamer { grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "balk balk" "midden chat" "spelers spelers"; }
  .tk-spelers { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .tk-kamer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "balk" "midden" "chat" "spelers"; }
  .tk-chat { min-height: 0; height: 300px; }
  .tk-balk { border-radius: var(--radius-s); flex-wrap: wrap; }
  .tk-status { font-size: .95rem; }
}
/* laptop/computer (muis + toetsenbord): spelen met toetsen, dus geen schermknoppen (ruimte!); tablet/telefoon: wel knoppen */
@media (hover: hover) and (pointer: fine) { .tetris-knoppen .tetris-knop { display: none; } }