/* Speler voor de begeleide sessies (web/rust-speler.js). Kleuren uit app.css. Op de telefoon vult hij het hele
   scherm en krijgt het beeld alle ruimte die over is; op een groter scherm is het een kaart in het midden. */
dialog.speler-dlg { padding: 0; border: 0; background: transparent; color: var(--ink); width: min(420px, calc(100% - 32px));
  max-width: 100%; max-height: calc(100dvh - 32px); margin: auto; }
dialog.speler-dlg::backdrop { background: rgba(8, 11, 16, .6); }
html:has(dialog.speler-dlg[open]) { overflow: hidden; }  /* de pagina erachter scrolt niet mee */
.speler-dlg [hidden] { display: none !important; }
.speler-sheet { background: var(--surface); border-radius: 18px; padding: 14px 16px 18px; display: grid; gap: 12px;
  max-height: calc(100dvh - 32px); overflow-y: auto; }
.speler-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.speler-beeld { position: relative; height: min(340px, 38dvh); border-radius: 14px; overflow: hidden; background: var(--sunk); }
.speler-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.speler-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.speler-kop h2 { font-size: 32px; text-transform: none; letter-spacing: 0; }
.speler-duur { font: 500 13px var(--f-mono); color: var(--muted); }
.speler-deel { display: grid; gap: 10px; }

/* de vraag vooraf en achteraf: vijf grote knoppen */
.speler-vraag { font-size: 17px; font-weight: 600; }
.speler-schaal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.speler-cijfer { min-height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 20px var(--f-mono); cursor: pointer; }
.speler-cijfer:hover { border-color: var(--accent); background: var(--accent-wash); }
.speler-cijfer:disabled { opacity: .55; cursor: default; }
.speler-uitleg { display: flex; justify-content: space-between; gap: 12px; font: 12.5px var(--f-mono); color: var(--muted); }
.speler-cijfer:focus-visible, .speler-speel:focus-visible, .speler-sprong:focus-visible, .speler-pos:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* spelen: voortgang (sleepbaar), tijd en de knoppen */
.speler-balk { display: grid; gap: 2px; }
.speler-pos { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.speler-pos::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--sunk) var(--p, 0%)); }
.speler-pos::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.speler-pos::-moz-range-track { height: 6px; border-radius: 3px; background: var(--sunk); }
.speler-pos::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.speler-pos::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); }
.speler-tijd { display: flex; justify-content: space-between; font: 500 12.5px var(--f-mono); color: var(--muted);
  font-variant-numeric: tabular-nums; }
.speler-knoppen { display: flex; justify-content: center; align-items: center; gap: 28px; padding: 2px 0; }
.speler-speel { width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; cursor: pointer; }
.speler-speel svg { width: 30px; height: 30px; }
.speler-sprong { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: 600 14px var(--f-mono); cursor: pointer; }
.speler-sprong:hover { border-color: var(--accent); }
.speler-status { font-size: 15px; max-width: 60ch; }
.speler-status:empty { display: none; }

@media (max-width: 520px) {
  /* telefoon: het hele scherm, het beeld rekt mee met wat er over is */
  dialog.speler-dlg { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; }
  .speler-sheet { height: 100%; max-height: none; border-radius: 0; grid-template-rows: auto minmax(120px, 1fr); grid-auto-rows: auto;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .speler-beeld { height: auto; min-height: 0; }
  .speler-kop h2 { font-size: 30px; }
}