:root {
  --achtergrond: #f6f0e4;
  --vlak: #fffaf1;
  --rand: #e2d5bd;
  --tekst: #3b2a1a;
  --zacht: #7a6650;
  --accent: #8a4b1f;
  --accent-donker: #6b3814;
  --groen: #4f7a3a;
  --aanleg: #d9c9a8;
  --schaduw: 0 2px 8px rgb(59 42 26 / 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --achtergrond: #1d1712;
    --vlak: #2a221a;
    --rand: #43372a;
    --tekst: #f1e6d4;
    --zacht: #b8a58c;
    --accent: #b86f35;
    --accent-donker: #cf8446;
    --groen: #8cbf6e;
    --aanleg: #4d4033;
    --schaduw: 0 2px 8px rgb(0 0 0 / 0.3);
  }
}

* { box-sizing: border-box; }

/* Verborgen blijft verborgen, ook als een klasse `display` zet. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

#spel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.laden, .leeg { text-align: center; color: var(--zacht); }

img { display: block; max-width: 100%; height: auto; }

h2, h3 { margin: 0; }
.sub { margin: 0 0 6px; color: var(--zacht); font-size: 0.9rem; }

/* Kop */
.kop {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
}


/* Kerncijfers bovenaan */
.cijfers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: var(--schaduw);
}
.cijfer { display: grid; justify-items: end; }
.cijfer dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zacht);
}
.cijfer dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cijfer.kas dd { color: var(--accent); font-size: 1.15rem; }
@media (max-width: 640px) {
  .cijfers { width: 100%; justify-content: space-between; }
  .cijfer { justify-items: start; }
}

/* Trainers */
.trainer-regel { margin: 0 0 6px; font-size: 0.85rem; color: var(--groen); font-weight: 600; }
.trainer-regel:empty { display: none; }
.niveau-balk { margin: 4px 0 0; font-weight: 700; color: var(--accent); }
/* Aan/uit-schakelaar: tekst links, schuifje rechts */
.schakelaar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}
.schakelaar + .schakelaar { border-top: 1px solid var(--rand); }
.schakelaar-tekst small {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--zacht);
}
.schakelaar-tekst small:empty { display: none; }
.schakelaar input {
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 99px;
  background: var(--rand);
  cursor: pointer;
  transition: background 0.2s;
}
.schakelaar input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  transition: transform 0.2s;
}
.schakelaar input:checked { background: var(--groen); }
.schakelaar input:checked::before { transform: translateX(16px); }
.schakelaar input:disabled { opacity: 0.4; cursor: not-allowed; }
.schakelaar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.status-rij { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.knop-klein { flex: 0 0 auto; padding: 4px 10px; font-size: 0.8rem; }
.plan { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Actierijen op de paardenkaart: "Training [discipline] [knop]" */
.rij-actie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rij-label {
  flex: 0 0 100%;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--zacht);
}

/* Verzorging */
.verzorging {
  display: grid;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--achtergrond);
}
.disc-niveau.conditie-vulling { background: var(--groen); }
.disc-niveau.conditie-vulling.laag { background: #c0563b; }
.iedereen { max-width: 560px; margin: 8px 0; }

/* Verzorgingstaken op de paardenkaart */
.taken { display: grid; gap: 2px; }
.taak { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: var(--zacht); min-height: 26px; }
.taak.binnenkort { color: var(--tekst); }
.taak.te-laat, .log li.te-laat { color: #c0563b; font-weight: 600; }
.buffer { max-width: 260px; margin: 8px 0 14px; }

/* Inkomsten */
.inkomsten {
  display: grid;
  gap: 1px;
  margin: 0;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: 12px;
  overflow: hidden;
}
.inkomst {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: var(--vlak);
}
.inkomst dt { font-weight: 700; }
.inkomst dt small { display: block; font-weight: 400; color: var(--zacht); font-size: 0.85rem; }
.inkomst dd { margin: 0; font-weight: 700; color: var(--groen); text-align: right; font-variant-numeric: tabular-nums; }

.melding {
  position: sticky;
  top: 8px;
  z-index: 5;
  background: var(--vlak);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 16px;
  box-shadow: var(--schaduw);
}

/* Aanmelden */
.aanmelden {
  max-width: 420px;
  margin: 8vh auto 0;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--schaduw);
}
.aanmelden .titel { margin-bottom: 8px; }
.aanmelden-vorm { display: grid; gap: 12px; margin-top: 12px; }
.aanmelden-vorm .knoppen { justify-content: flex-end; }
.fout { margin: 0; min-height: 1.2em; color: #c0563b; font-weight: 600; }
.fout:empty { display: none; }
.voet { flex-wrap: wrap; gap: 8px; }
.account { color: var(--zacht); }

/* Venster "Welkom terug" */
.venster-achtergrond {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / 0.45);
}
.venster {
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--vlak);
  color: var(--tekst);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.35);
}
.venster h2 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; }
.venster h3 { margin: 14px 0 6px; font-size: 1rem; }
.welkom-lijst { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.welkom-lijst .let-op { font-weight: 700; color: var(--accent); }
.venster > .knop { width: 100%; }

/* Wat is er nieuw (onder de voet) */
.nieuws {
  margin-top: 12px;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 4px 16px 12px;
}
.nieuws h3 { margin: 12px 0 4px; font-size: 0.95rem; }
.nieuws ul { margin: 0; padding-left: 20px; color: var(--zacht); font-size: 0.9rem; }

/* Opdrachten */
.opdrachten {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  box-shadow: var(--schaduw);
}
.opdrachten-kop {
  margin: 0 0 6px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zacht);
}
.opdrachten-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.opdracht {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}
.opdracht-tekst { flex: 1; min-width: 0; }
.opdracht > :last-child { flex: 0 0 auto; max-width: 48%; text-align: right; }
.opdracht-tekst::before { content: '○ '; color: var(--zacht); }
.opdracht.klaar .opdracht-tekst { font-weight: 700; }
.opdracht.klaar .opdracht-tekst::before { content: '✓ '; color: var(--groen); }
.opdracht-beloning { color: var(--zacht); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* Vandaag en opdrachten naast elkaar op een breed scherm */
.bovenaan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0 16px;
  align-items: start;
}
.vandaag { border-left-color: var(--groen); }
.opdracht.bonus { border-top: 1px dashed var(--rand); padding-top: 4px; }

/* Reeks van zeven dagen */
.reeks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}
.reeks-dag {
  display: grid;
  gap: 2px;
  text-align: center;
  padding: 6px 2px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--zacht);
}
.reeks-nummer { font-weight: 700; }
.reeks-dag { min-width: 0; overflow: hidden; }
.reeks-beloning { overflow-wrap: anywhere; }
.reeks-dag.verrassing .reeks-beloning { font-size: 1rem; font-weight: 700; }
.reeks-dag.gedaan { background: var(--groen); border-color: var(--groen); color: #fff; }
.reeks-dag.vandaag:not(.gedaan) { border: 2px solid var(--accent); color: var(--tekst); }
.vandaag > .knop { width: 100%; }

/* Tabbladen */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--rand);
  margin-bottom: 16px;
  overflow-x: auto;
}
.tab {
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--zacht);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { background: var(--rand); }
.tab.actief { background: var(--accent); color: #fff; }

/* Stal */
.stal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--schaduw);
}
.stal img { border-radius: 10px; width: 100%; }

.balk {
  height: 10px;
  background: var(--rand);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 12px;
}
.balk-vulling {
  height: 100%;
  width: 0;
  background: var(--groen);
  transition: width 0.3s;
}

@media (max-width: 640px) {
  .stal { grid-template-columns: 1fr; }
}

/* Kaarten */
.rooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--schaduw);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kaart h3 { margin-top: 8px; }
/* Knoppen in een kaart groeien niet mee in de hoogte en staan onderaan:
   zo zijn alle kaarten in een rij gelijk, hoe lang de tekst ook is. */
.kaart > .knop { flex: 0 0 auto; }
.kaart > .knop:last-child { margin-top: auto; }

.beeld-vak { position: relative; }
.beeld-vak img { border-radius: 10px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--groen);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
}
.badge.pensioen { background: var(--zacht); }
.badge.blessure { background: #c0563b; }
.badge.drachtig { background: #8e5aa8; }
.status.blessure { color: #c0563b; }

.ouders { margin: 0; font-size: 0.85rem; color: var(--zacht); }
.ouders p { margin: 0; }
.ouders strong { font-weight: 600; }
.stamboom-meer summary { cursor: pointer; color: var(--accent); }
.ouders:empty { display: none; }
.palmares { margin: 0 0 6px; font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.palmares:empty { display: none; }
.waarschuwing {
  margin: 4px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgb(192 86 59 / 0.12);
  color: #c0563b;
  font-weight: 600;
  font-size: 0.9rem;
}
.waarschuwing:empty { display: none; }
.status { margin: 4px 0; font-weight: 600; color: var(--groen); font-variant-numeric: tabular-nums; }
.status.bezig { color: var(--accent); }
.feiten { margin: 6px 0; font-size: 0.85rem; color: var(--zacht); }
.reden { margin: 0; min-height: 1.2em; font-size: 0.85rem; color: var(--zacht); }

/* Disciplines */
.disciplines { display: grid; gap: 3px; margin: 6px 0; }
.disc {
  display: grid;
  grid-template-columns: 7.5em 1fr 4.2em;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
  border-radius: 4px;
}
.disc.uitgelicht { font-weight: 700; }
.disc-naam { display: flex; gap: 6px; align-items: center; }
.disc-naam img { width: 18px; height: 18px; }
.disc-balk {
  position: relative;
  height: 8px;
  background: var(--rand);
  border-radius: 99px;
  overflow: hidden;
}
.disc-niveau {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.3s;
}
.disc-niveau.als-talent { background: var(--aanleg); }
.disc-getal { text-align: right; font-variant-numeric: tabular-nums; color: var(--zacht); }

/* Disciplines: naam · balk (niveau 0–100) · getal · talent in sterren · (richting) */
.disciplines .disc { grid-template-columns: 7.2em 1fr 2em auto; }
.disciplines.met-richting .disc { grid-template-columns: 7.2em 1fr 2em auto 1.6em; }
.disc-talent { color: #c9962b; font-size: 0.75rem; letter-spacing: -1px; white-space: nowrap; }
.richting-knop {
  font: inherit;
  width: 1.6em;
  height: 1.6em;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--zacht);
  cursor: pointer;
  line-height: 1;
}
.richting-knop[aria-pressed="true"] { color: var(--groen); font-weight: 700; }
.richting-knop:hover { background: var(--rand); }
.punten { display: grid; gap: 3px; margin: 2px 0 4px; font-size: 0.85rem; font-weight: 600; }
.punten .disc-niveau { background: var(--groen); }

/* Bediening */
.bediening { display: grid; gap: 6px; margin-top: auto; }
.knoppen { display: flex; flex-wrap: wrap; gap: 6px; }

.keuze, .knop {
  font: inherit;
  font-size: 0.9rem;
  border-radius: 8px;
  padding: 7px 10px;
}
.keuze {
  flex: 1 1 7em;
  border: 1px solid var(--rand);
  background: var(--achtergrond);
  color: var(--tekst);
}

.knop {
  flex: 1 1 auto;
  font-weight: 600;
  border: 1px solid var(--accent-donker);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.knop:hover:not(:disabled) { background: var(--accent-donker); }
.knop:disabled { opacity: 0.45; cursor: not-allowed; }

.knop-rustig {
  background: transparent;
  color: var(--accent);
  border-color: var(--rand);
}
.knop-rustig:hover:not(:disabled) { background: var(--rand); }

/* Fokken */
.fokken { display: grid; gap: 12px; max-width: 560px; }
.fok-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.veld { display: grid; gap: 4px; font-weight: 600; }
@media (max-width: 480px) {
  .fok-keuzes { grid-template-columns: 1fr; }
}

/* Ranglijst */
.stalnaam { max-width: 520px; margin-bottom: 12px; }
.stalnaam .knoppen { align-items: flex-end; }
.stalnaam .veld { flex: 1 1 240px; }
.soorten { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.ranglijst {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 12px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.ranglijst th, .ranglijst td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--rand); }
.ranglijst th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); }
.ranglijst .rang { width: 3em; color: var(--zacht); }
.ranglijst .getal { text-align: right; font-weight: 700; }
.ranglijst tr.jij td { background: rgb(79 122 58 / 0.12); font-weight: 700; }
.ranglijst tr:last-child td { border-bottom: none; }

/* Logboek */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.log li {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 8px 12px;
}
.log time { color: var(--zacht); font-variant-numeric: tabular-nums; margin-right: 10px; }

.link {
  font: inherit;
  background: none;
  border: none;
  color: var(--zacht);
  text-decoration: underline;
  cursor: pointer;
}

.voet {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  color: var(--zacht);
  font-size: 0.85rem;
}

/* Financiën: winst en verlies per dag */
.dagafrekening, .dagen { display: grid; gap: 8px; margin-bottom: 16px; }
.dag { background: var(--vlak); border: 1px solid var(--rand); border-radius: 10px; box-shadow: var(--schaduw); }
.dag summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; font-weight: 600; }
.dag[open] summary { border-bottom: 1px solid var(--rand); }
.dag .sub { padding: 0 14px 10px; margin: 0; }
.dag-regels { list-style: none; margin: 0; padding: 8px 14px; display: grid; gap: 4px; }
.dag-regels li { display: flex; justify-content: space-between; gap: 12px; }
.winst { color: var(--groen); }
.verlies { color: #b3452c; }
@media (prefers-color-scheme: dark) { .verlies { color: #e0876c; } }

/* Prestaties: kampioenschappen, prijzenkast, fokdoelen, seizoen, erfgoed */
.kampioenschappen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 16px; }
.kampioenschap h3, .nieuwe-start h3 { margin: 0 0 4px; }
.kampioenschap .knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kampioenschap .keuze { flex: 1 1 120px; min-width: 0; }
.prijzenkast li { font-size: 0.95rem; }
.doelen { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.doel { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 10px; padding: 8px 12px; }
.doel.klaar { border-color: var(--groen); }
.doel-stand { color: var(--zacht); font-size: 0.9rem; white-space: nowrap; }
.nieuwe-start { margin-bottom: 24px; }
.nieuwe-start .veld { margin: 8px 0; }
.bevestig { margin-top: 8px; }
.groep-kop { margin: 12px 0 6px; font-size: 1rem; color: var(--zacht); }

/* Compacte paardenkaart; alles in een venster */
.kaart.klikbaar { cursor: pointer; }
.kaart.klikbaar:hover { border-color: var(--accent); }
.samenvatting { margin: 4px 0 8px; font-size: 0.9rem; }
.paard-venster { width: min(720px, 94vw); max-height: 90vh; padding: 0; border: 1px solid var(--rand); border-radius: 14px;
  background: var(--vlak); color: var(--tekst); box-shadow: var(--schaduw); }
.paard-venster::backdrop { background: rgb(0 0 0 / 0.5); }
.venster-kop { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--vlak); border-bottom: 1px solid var(--rand); }
.venster-kop h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; }
.venster-inhoud { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.venster-kop .knop { flex: 0 0 auto; }
.detail-kop { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.detail-beeld { width: 180px; max-width: 40%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.detail-tekst { min-width: 0; }
.detail-tekst p { margin: 0 0 4px; }
/* Knoppen in een kaart: altijd één regel, dus overal even hoog. Past de tekst
   echt niet, dan krimpt ze een beetje in plaats van naar een tweede regel te gaan. */
.kaart > .knop { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 38px; }
/* Het element net boven de knoppen vult de vrije ruimte: zo staan alle knoppen
   van een kaart samen onderaan, op dezelfde hoogte als in de buurkaarten. */
.kaart > :not(.knop):has(+ .knop) { flex-grow: 1; }

/* Minispel: zelf het parcours rijden */
.parcours-balk { position: relative; height: 34px; margin: 16px 0 8px; border-radius: 17px; background: var(--aanleg); overflow: hidden; cursor: pointer; touch-action: manipulation; }
.parcours-groen { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--groen) 55%, transparent); }
.parcours-perfect { position: absolute; top: 0; bottom: 0; background: var(--groen); }
.parcours-streep { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--tekst); }
.parcours-melding { min-height: 1.5em; margin: 4px 0; font-weight: 700; font-size: 1.1rem; }
.parcours-melding.perfect, .parcours-sprong.perfect, .parcours-sprong.goed { color: var(--groen); }
.parcours-melding.fout, .parcours-sprong.fout { color: #c0563b; }
.parcours-sprongen { display: flex; flex-wrap: wrap; gap: 6px; font-size: 1.2rem; min-height: 1.5em; }
.minispel .venster-inhoud { user-select: none; }

/* Bugmeldingen en moderatie */
.melden textarea.keuze { width: 100%; min-height: 110px; resize: vertical; font: inherit; }
.melden .veld { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.mod-lijst { display: grid; gap: 8px; margin-bottom: 16px; }
.mod-kaart { gap: 6px; }
.mod-kop { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--zacht); }
.mod-tekst { margin: 0; white-space: pre-wrap; }
.mod-kaart .knoppen, .doel .keuze { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-kaart .keuze, .doel .keuze { flex: 1 1 140px; min-width: 0; }

/* Plafond in het niveaubalkje: zo hoog kan het paard in deze discipline komen */
.disc-balk { position: relative; }
.disc-plafond { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--tekst); opacity: 0.55; }
.disc-getal.vol { color: var(--groen); font-weight: 700; }
.badge.toppaard { background: #b8860b; }
.fokmerries { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 16px; }

/* Regels: bedrijfsleider en handelsmanager */
.regel-blok { margin-bottom: 16px; }
.regels { display: grid; gap: 6px; }
.regel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 10px; padding: 8px 12px; }
.regel.uit .regel-tekst { color: var(--zacht); text-decoration: line-through; }
.regel-tekst { flex: 1 1 220px; min-width: 0; }
.regel .knoppen { flex: 0 0 auto; }
.regel-vorm { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.regel-veld { display: flex; flex-direction: column; gap: 4px; }
.regel-veld[hidden] { display: none; }
.voorwaarden { display: grid; gap: 6px; }
.voorwaarde-rij { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.voorwaarde-rij .keuze { flex: 1 1 110px; min-width: 0; }
.voorwaarde-rij .keuze[hidden] { display: none; }
.regel-vorm > .knop { align-self: flex-start; }
.regel-voorbeeld { margin: 4px 0; font-style: italic; color: var(--zacht); }
.slot-regel { margin: 4px 0 0; }
.regel-veld .keuze { flex: 0 0 auto; }
.voorwaarde-rij .knop { flex: 0 0 auto; }

/* Trainers per discipline: eigen trainers en kandidaten in één rooster */
.rooster-deel { display: contents; }
.trainer-sprong { margin: 4px 0 8px; }
.kaart.te-huur { border-style: dashed; }
/* */ .badge.te-huur { background: var(--accent); }
.regel-vorm.bewerken { border-color: var(--accent); }
.handel-oordeel { margin: 4px 0; font-size: 0.9rem; color: var(--zacht); }
.handel-oordeel.koopt { color: var(--groen); font-weight: 600; }
.disc-talent { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Veiling */
.veiling-kaart { border-color: #b8860b; }
.veiling-stand { margin: 6px 0 2px; font-weight: 700; }
.veiling-stand.jij { color: var(--groen); }
.veiling-bod .keuze { flex: 1 1 120px; min-width: 0; }

/* Bovenbalk (zoals Petrol Empire): logo + stalnaam, kerncijfers, 🎁 en ☰, tabbladen eronder */
.bovenbalk {
  margin: -16px -16px 16px;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
  box-shadow: var(--schaduw);
}
@media (min-width: 800px) {
  .bovenbalk { position: sticky; top: 0; z-index: 30; }
}
.topbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 10px 16px; }
.merk { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.merk img { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.merk-tekst { display: grid; line-height: 1.15; min-width: 0; }
.merk-naam { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }
.merk-stal { font-size: 0.8rem; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbalk .cijfers { background: none; border: 0; box-shadow: none; padding: 0; gap: 4px 22px; }
.cijfer.winst dd.plus { color: var(--groen); }
.cijfer.winst dd.min { color: #c0563b; }
.kop-knoppen { position: relative; display: flex; gap: 6px; }
.kop-knop {
  position: relative; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--rand); background: var(--achtergrond); color: var(--tekst);
  font-size: 1.1rem; cursor: pointer;
}
.kop-knop:hover { border-color: var(--accent); }
.kop-teller {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: #c0563b; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 18px;
}
.kop-menu {
  position: absolute; right: 0; top: 46px; z-index: 40; display: grid; min-width: 220px; padding: 6px;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 10px; box-shadow: var(--schaduw);
}
.kop-menu-item {
  text-align: left; padding: 8px 10px; background: none; border: 0; border-radius: 6px;
  color: var(--tekst); font: inherit; cursor: pointer;
}
.kop-menu-item:hover { background: var(--rand); }
.bovenbalk .tabs { margin: 0; padding: 0 8px; gap: 2px; border-bottom: 0; border-top: 1px solid var(--rand); }
.bovenbalk .tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-radius: 0; background: none; border-bottom: 3px solid transparent;
}
.bovenbalk .tab:hover { background: color-mix(in srgb, var(--rand) 60%, transparent); }
.bovenbalk .tab.actief {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); border-bottom-color: var(--accent);
}
.tab-icoon { font-size: 1rem; line-height: 1; }
@media (max-width: 640px) {
  .topbalk { gap: 8px 12px; }
  .topbalk .cijfers { order: 3; width: 100%; justify-content: space-between; gap: 4px 10px; }
  .topbalk .cijfer dt { font-size: 0.6rem; }
  .topbalk .cijfer dd { font-size: 0.85rem; }
  .bovenbalk .tab { padding: 8px 10px; }
}
/* Tabbladen: passen op een breed scherm op één rij; anders veeg je ze opzij (zonder lelijke schuifbalk). */
.bovenbalk .tabs { gap: 0; scrollbar-width: none; }
.bovenbalk .tabs::-webkit-scrollbar { display: none; }
.bovenbalk .tab { padding: 10px 11px; }
@media (max-width: 640px) {
  .topbalk .cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
  .topbalk .cijfer.klok { grid-column: span 2; }
}
/* Past niet alles op één rij (bv. "Mijn stal (113)"): compacter, en de rest op een tweede rij
   in plaats van onzichtbaar achter de rand. Op de gsm blijft het vegen. */
@media (min-width: 641px) {
  .bovenbalk .tabs { flex-wrap: wrap; overflow: visible; }
  .bovenbalk .tab { padding: 9px 10px; font-size: 0.95rem; gap: 5px; }
}
@media (min-width: 641px) {
  .bovenbalk .tab { padding: 9px 8px; gap: 4px; }
}
/* Bovenbalk over de volle breedte van het scherm (zoals Petrol Empire). */
.bovenbalk { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.topbalk, .bovenbalk .tabs { padding-left: max(16px, calc(50vw - 700px)); padding-right: max(16px, calc(50vw - 700px)); }
.tab-teller {
  font-size: 0.72rem; font-weight: 700; padding: 1px 6px; border-radius: 9px;
  background: color-mix(in srgb, var(--zacht) 25%, transparent); color: var(--tekst);
}
.tab.actief .tab-teller { background: var(--accent); color: #fff; }
@media (min-width: 641px) {
  .bovenbalk .tab { padding: 9px 7px; font-size: 0.9rem; }
}
/* ☰-menu zoals Petrol Empire */
.kop-menu { min-width: 280px; padding: 16px; gap: 10px; border-radius: 14px; }
.kop-menu-titel { margin: 0; font-size: 1.4rem; }
.kop-menu-wie { margin: 0 0 4px; font-size: 0.85rem; color: var(--zacht); }
.kop-menu-wie strong { color: var(--tekst); }
.kop-menu-item {
  text-align: center; font-weight: 700; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--rand) 55%, transparent); border: 1px solid var(--rand);
}
.kop-menu-item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--rand) 80%, transparent); }
.kop-menu-item.gevaar { background: color-mix(in srgb, #c0563b 22%, transparent); border-color: color-mix(in srgb, #c0563b 45%, transparent); color: #e89a86; }
.kop-menu-item.sluiten { background: var(--accent); border-color: var(--accent); color: #fff; }
.kop-menu-item.sluiten:hover { background: var(--accent-donker); }
.kop-menu-item.gevaar { color: #a8402a; }
@media (prefers-color-scheme: dark) { .kop-menu-item.gevaar { color: #e89a86; } }
@media (min-width: 641px) {
  .bovenbalk .tab { padding: 9px 6px; }
}
/* 100vw telt de schuifbalk mee: niet horizontaal laten schuiven (clip houdt 'sticky' werkend). */
html, body { overflow-x: clip; }
/* Terug naar de breedte van het spel (niet meer over het hele scherm). */
.bovenbalk { margin-left: -16px; margin-right: -16px; }
.topbalk, .bovenbalk .tabs { padding-left: 16px; padding-right: 16px; }
/* Tabbladen in twee gelijke rijen (op de gsm: één rij om opzij te vegen). */
@media (min-width: 641px) {
  .bovenbalk .tabs { display: grid; grid-template-columns: repeat(var(--kolommen, 7), minmax(0, 1fr)); gap: 0; overflow: visible; }
  .bovenbalk .tab { justify-content: center; padding: 9px 8px; font-size: 0.95rem; gap: 6px; min-width: 0; }
  .bovenbalk .tab > span:not(.tab-icoon):not(.tab-teller) { overflow: hidden; text-overflow: ellipsis; }
}
/* ☰-menu als venster in het midden */
dialog.kop-menu {
  position: fixed; inset: 0; margin: auto; top: 0; right: 0;
  width: min(340px, 90vw); height: fit-content; padding: 22px 22px 20px;
  display: none; gap: 10px;
  background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: 16px; box-shadow: 0 20px 60px rgb(0 0 0 / 0.5);
}
dialog.kop-menu[open] { display: grid; }
dialog.kop-menu::backdrop { background: rgb(0 0 0 / 0.55); }
/* Definitief: bovenbalk over het volle scherm (zoals Petrol Empire), tabbladen op één rij. */
.bovenbalk { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.topbalk, .bovenbalk .tabs { padding-left: 20px; padding-right: 20px; }
@media (min-width: 641px) {
  .bovenbalk .tabs { display: flex; flex-wrap: wrap; gap: 0; overflow: visible; }
  .bovenbalk .tab { justify-content: flex-start; padding: 9px 7px; font-size: 0.92rem; gap: 5px; }
}
@media (min-width: 641px) {
  .bovenbalk .tab { padding: 9px 6px; font-size: 0.9rem; gap: 4px; }
}
/* Meer ruimte tussen de tabbladen naarmate het scherm breder is. */
@media (min-width: 1400px) { .bovenbalk .tab { padding: 10px 12px; font-size: 0.95rem; gap: 6px; } }
@media (min-width: 1650px) { .bovenbalk .tab { padding: 10px 18px; } }
@media (min-width: 1900px) { .bovenbalk .tab { padding: 10px 22px; } }
/* Uitgerekend zodat alle 13 tabbladen op één rij blijven passen (± 1150 px tekst + 26 × opvulling). */
@media (min-width: 1400px) { .bovenbalk .tab { padding: 10px 8px; } }
@media (min-width: 1550px) { .bovenbalk .tab { padding: 10px 13px; } }
@media (min-width: 1650px) { .bovenbalk .tab { padding: 10px 16px; } }
@media (min-width: 1800px) { .bovenbalk .tab { padding: 10px 22px; } }
@media (min-width: 1900px) { .bovenbalk .tab { padding: 10px 26px; } }
/* Uit eigen fok: label rechtsboven op de foto en een streepje voor de naam */
.badge.eigen-fok { left: auto; right: 8px; background: #3f7d5a; }
.eigen-fok-naam::before { content: '🏡 '; }
/* Onderaan op de foto: botst niet met lange labels bovenaan (bv. "Drachtig · nog …") */
.badge.eigen-fok { top: auto; bottom: 8px; left: 8px; right: auto; }

/* Filter in de stal */
.stal-filter { margin-bottom: 12px; gap: 8px; }
.filter-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.filter-veld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-veld .keuze { width: 100%; min-width: 0; }
.filter-onder { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.filter-teller { margin: 0; }
.filter-veld .keuze { flex: 0 0 auto; }
.stal-filter > .filter-rij { flex-grow: 0; }
.filter-veld .rij-label { flex: 0 0 auto; }

/* Fokken: subtabbladen en twee kolommen */
.fokken { max-width: none; }
.sub-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.sub-tab {
  font: inherit; font-weight: 600; padding: 7px 14px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--rand); background: var(--vlak); color: var(--zacht);
}
.sub-tab:hover { border-color: var(--accent); }
.sub-tab.actief { background: var(--accent); border-color: var(--accent); color: #fff; }
.niet-gekozen { display: none !important; }
.fok-dekken { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.fok-keuze { gap: 10px; }
.fok-knoppen .knop { flex: 1 1 200px; }
.fok-uitleg summary { cursor: pointer; color: var(--zacht); font-size: 0.9rem; }
.fok-uitleg[open] summary { margin-bottom: 6px; }
.dracht-rooster { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dracht-rooster .kaart p { margin: 0 0 4px; }
.dracht-balk { height: 6px; border-radius: 3px; background: var(--rand); overflow: hidden; margin: 2px 0 6px; }
.dracht-vulling { height: 100%; background: #8e5aa8; }
.fok-keuze .fok-keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fok-keuzes .keuze { width: 100%; min-width: 0; }
@media (max-width: 480px) { .fok-keuze .fok-keuzes { grid-template-columns: 1fr; } }
.dracht-rooster .mod-kop { font-size: 1rem; color: var(--tekst); }

/* Embryotransfer-lijst */
.embryo-vak { display: grid; gap: 8px; }
.embryo-kandidaten { display: grid; gap: 6px; }
.embryo-rij .doel-tekst { flex: 1 1 320px; }
/* Stalnaam in de bovenbalk: genoeg hoogte voor g, j, p, q, y (niet afsnijden). */
.merk-tekst { line-height: 1.3; }
.merk-stal { line-height: 1.35; padding-bottom: 1px; }

/* Prestaties: subtabbladen; lange lijsten in kolommen */
.prestatie-vak { display: grid; gap: 8px; }
.doelen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.prijzenkast { columns: 2 320px; column-gap: 24px; }
.prijzenkast li { break-inside: avoid; }
.log.prijzenkast { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 24px; columns: auto; }
.log.prijzenkast { gap: 6px 16px; }
/* Kampioenschap: ingeschreven paarden uitklapbaar */
.ingeschreven-vak summary { cursor: pointer; font-weight: 600; color: var(--groen); margin: 4px 0; }
.ingeschreven-vak[open] summary { margin-bottom: 6px; }

/* ---------- accountinstellingen en wachtwoordherstel ---------- */

/* Een knop die als tekst leest. Voor "Wachtwoord vergeten?": het is een
   uitweg, geen keuze die naast "Aanmelden" hoort te staan. Wel een echte
   <button> en geen <a>, want er is geen adres om heen te gaan. */
.knop-tekst {
  align-self: flex-start;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--zacht);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.knop-tekst:hover:not(:disabled) { color: var(--accent); }
.knop-tekst:disabled { opacity: 0.45; cursor: not-allowed; }

/* Het accountvenster is langer dan het menu: twee formulieren onder elkaar. */
.account-venster { max-width: 420px; }
.account-venster .aanmelden-vorm { margin-top: 4px; }
.titel-klein { margin: 10px 0 0; font-size: 1rem; font-weight: 700; }
.scheiding { margin: 18px 0 4px; border: 0; border-top: 1px solid var(--rand); }

/* ---------- winkel ---------- */
.winkel-kop { margin-bottom: 10px; }
.winkel-saldo { margin: 6px 0 2px; font-size: 1.05rem; }

/* De testmodusbalk. Opvallend met opzet: wie in een proefopstelling zit, hoort
   dat te weten voor hij op een prijs klikt. */
.winkel-proef {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 8px;
  background: #fdf3d8; border: 1px solid #e6cf92; color: #6b5420;
  font-size: 0.86rem; font-weight: 600;
}

/* Zes pakketten naast elkaar waar het past, en netjes inzakken op een telefoon.
   auto-fit met een minimum: geen mediaquery nodig en geen kolom die halverwege
   leeg blijft. */
.winkel-raster {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.winkel-kaart {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  align-items: center; text-align: center;
  padding: 16px 12px 12px; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--vlak, #fff);
}
.winkel-kaart .knop { width: 100%; margin-top: 6px; }
.winkel-icoon { font-size: 1.6rem; line-height: 1; }
.winkel-aantal { font-size: 1.25rem; font-weight: 700; }
.winkel-naam { color: var(--zacht); font-size: 0.9rem; }
.winkel-bonus { min-height: 1.1em; font-size: 0.82rem; font-weight: 700; color: var(--accent); }

/* Het beste pakket krijgt een rand en een lintje - dat is de enige plek waar
   dit blad iets aanprijst. */
.winkel-best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.winkel-lint {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700;
}

.winkel-geschiedenis { margin-top: 18px; }
.winkel-tabel { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.winkel-tabel td { padding: 5px 4px; border-top: 1px solid var(--rand); }
.winkel-tabel td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Het antwoord op een bugmelding.
   .doel is een flexrij die mag omslaan, geen raster - vandaar flex-basis 100%
   en niet grid-column: zo nemen deze twee een eigen regel onder de melding, in
   plaats van in de statuskolom te gaan dringen. Het bericht is een zin, geen
   label. */
.doel-bericht, .doel-beloning { flex: 0 0 100%; font-size: 0.9rem; }
.doel-bericht {
  line-height: 1.45;
  color: var(--zacht);
  border-left: 2px solid var(--rand);
  padding-left: 8px;
  margin-top: 4px;
}
.doel-beloning { font-weight: 600; margin-top: 2px; }

/* ---------------------------------------- diamanten in de kopbalk + winkel */

/* Het vak is het anker voor de uitgerekte knop hieronder. */
.cijfer.diamanten { position: relative; }

/* Ziet eruit als de andere tellerwaarden - geen omlijnd knopje tussen vier
   getallen, want dat trekt het hele oog van de balk naar zich toe. Dat het
   klikbaar is, zegt de kleur en de aanwijzer. */
.cijfer-knop {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
  cursor: pointer;
}
.cijfer-knop:hover { text-decoration: underline; }

/* Het HELE vak klikbaar, niet alleen de vier tekens van het getal: op een
   telefoon is dat net te klein om te raken. */
.cijfer-knop::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
/* De focusrand hoort om het hele vak te staan, niet om de tekst - anders zie je
   bij toetsenbordgebruik een randje om vier tekens midden in de balk. */
.cijfer-knop:focus-visible { outline: none; }
.cijfer-knop:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Het winkelvenster. Breder dan het menu: er staan zes pakketten in een raster
   naast elkaar. Smaller wordt het vanzelf - dat raster slaat zelf om. */
/* `dialog.` en niet alleen `.winkel-venster`: hiernaast staat
   `dialog.kop-menu { width: min(340px, 90vw) }`, en dat is een element PLUS een
   klasse. Een losse klasse verliest daarvan, hoe ver achteraan hij ook staat -
   specificiteit gaat voor volgorde. Zo zijn ze gelijk en wint deze, als laatste. */
dialog.winkel-venster {
  width: min(900px, 94vw);
  max-height: 88vh;
  overflow: auto;
}
dialog.winkel-venster .winkel-paneel { display: block; }

/* Een VAST aantal kolommen, geen auto-fit.
   ---------------------------------------------------------------------------
   Auto-fit betekent "zoveel kolommen als er passen", en daar zit het probleem:
   dat hangt af van het toestel. Op 375px kwamen er twee, maar op een smallere
   telefoon past 2x140px plus tussenruimte niet meer en viel het terug naar EEN
   pakket per rij - dan moet je scrollen om prijzen te vergelijken, en dat is
   precies wat je in een winkel niet wil.

   Twee op een telefoon, drie op een breed scherm. Zes deelt door allebei, dus
   geen rij blijft half leeg.

   `1fr` en geen `minmax(140px, 1fr)`: een kolom met een ondergrens van 140px
   kan niet krimpen en loopt op een smal toestel buiten het venster. */
dialog.winkel-venster .winkel-raster { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) {
  dialog.winkel-venster .winkel-raster { grid-template-columns: repeat(3, 1fr); }
}
/* De kaart moet mee kunnen krimpen. Zonder dit houdt de inhoud (een lange
   pakketnaam, de prijsknop) de kolom breder dan de ruimte die er is, en schuift
   het venster alsnog zijwaarts. */
dialog.winkel-venster .winkel-kaart { min-width: 0; }
dialog.winkel-venster .winkel-kaart > * { max-width: 100%; }

/* ----------------------------------------- een naam in de ranglijst + kaart */

/* Ziet eruit als de naam ernaast - geen omlijnd knopje in elke rij, want dan
   wordt de tabel een muur van knoppen. Dat er iets achter zit, zegt de kleur en
   de aanwijzer. Zelfde afweging als bij de diamantenteller. */
.naam-knop {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  /* Verticale ruimte voor de DUIM. Zonder dit is het doel precies zo hoog als
     de tekst (23px), en in een tabel met dicht op elkaar staande rijen betekent
     een misser dat je de kaart van iemand anders opent. */
  padding: 7px 0;
  margin: -7px 0;
}
.naam-knop:hover { text-decoration: underline; }
.naam-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* `dialog.` en niet alleen de klasse: dialog.kop-menu zet hiernaast een breedte
   met een hogere specificiteit. Zie de uitleg bij het winkelvenster. */
dialog.speler-venster { width: min(420px, 94vw); }