/* App-stijlen in de WordWinner-merkstijl "Bordspel".
   Tokens komen uit styles/tokens.css (geladen vóór dit bestand);
   fonts uit styles/fonts.css. Diepte = harde onderrand, geen blur. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ww-zand);
  background-image: var(--ww-nerf);
  color: var(--ww-inkt);
  font-family: var(--ww-tekst);
  overflow-x: hidden;
}

.app { max-width: var(--ww-max); margin: 0 auto; padding: var(--ww-u5) var(--ww-u3) var(--ww-u3); }

/* ---- kop: alleen merk + hoofdnavigatie ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--ww-perkament);
  border-bottom: 1.5px solid var(--ww-lijn);
  padding: 10px var(--ww-u5);
}
.topbar-row {
  max-width: var(--ww-max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--ww-u4); flex-wrap: wrap;
}

.brand-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-merk {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  background: var(--ww-accent); color: var(--ww-accent-op);
  box-shadow: 0 3px 0 var(--ww-accent-diep);
  transform: rotate(-4deg);
  display: flex; align-items: flex-start; justify-content: center;
  font-family: var(--ww-display); font-weight: 700; line-height: 38px;
}
.logo-merk .groot { font-size: 22px; }
.logo-merk .klein { font-size: 11px; opacity: .85; margin-left: 1px; line-height: 31px; }
.brand {
  font-family: var(--ww-display); font-size: 21px; letter-spacing: -.3px;
  margin: 0; font-weight: 700; color: var(--ww-inkt);
}
.hoofdnav { display: flex; align-items: center; gap: var(--ww-u1); flex-wrap: wrap; margin-left: auto; }
.hoofdnav a {
  font-family: var(--ww-display); font-weight: 600; font-size: 15px;
  color: var(--ww-sepia); text-decoration: none;
  padding: 7px 12px; border-radius: 11px;
}
.hoofdnav a:hover { color: var(--ww-inkt); background: var(--ww-zacht-zand); }
.hoofdnav a[aria-current='page'] { color: var(--ww-accent-diep); background: var(--ww-accent-vlak); }

/* ---- paginatitel boven het bord ---- */
.paginatitel {
  font-family: var(--ww-display); font-weight: 700; font-size: 28px;
  letter-spacing: -.3px; color: var(--ww-inkt); margin: 0 0 var(--ww-u4);
}

.dict-info { color: var(--ww-vervaagd); font-size: var(--ww-fs-meta); margin: var(--ww-u2) 2px var(--ww-u4); }

/* ---- spelbeheer: zwevende knoppenbalk boven het bord ---- */
.games-bar {
  display: flex; align-items: center; gap: var(--ww-u2); flex-wrap: wrap;
  background: var(--ww-perkament); border-radius: var(--ww-radius-kaart);
  padding: 10px var(--ww-u3);
  box-shadow: var(--ww-rand), var(--ww-omgeving);
}
.game-select {
  flex: 1 1 180px; min-width: 140px; max-width: 320px;
  padding: 9px 11px; font-size: 15px; font-weight: 700;
  font-family: var(--ww-tekst);
  background: var(--ww-zacht-zand); color: var(--ww-inkt);
  border: 1.5px solid var(--ww-lijn); border-radius: 12px;
}
.game-select:focus { outline: none; border-color: var(--ww-accent); box-shadow: 0 0 0 3px rgba(31, 111, 92, .18); }
.icon-btn {
  padding: 8px 12px; border: none; cursor: pointer; white-space: nowrap;
  font-family: var(--ww-display); font-size: 14px; font-weight: 600;
  background: var(--ww-zacht-zand); color: var(--ww-inkt);
  border-radius: 11px; box-shadow: var(--ww-rand-klein);
}
.icon-btn:hover { filter: brightness(1.03); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ww-lijn-diep); }
.show-archived { color: var(--ww-vervaagd); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
@media (max-width: 560px) {
  .game-select { flex: 1 1 100%; max-width: none; }
  .games-bar .icon-btn { padding: 7px 9px; font-size: 13px; }
  .paginatitel { font-size: 23px; }
}

/* ---- indeling: mobiel één kolom, breed twee ---- */
.layout { display: flex; flex-direction: column; gap: var(--ww-u4); }
.board-area { width: 100%; max-width: 560px; margin: 0 auto; }
.panel { width: 100%; display: flex; flex-direction: column; gap: var(--ww-gutter); }

@media (min-width: 880px) {
  .layout { flex-direction: row; align-items: flex-start; gap: var(--ww-gutter); }
  .board-area { margin: 0; flex: 0 0 520px; width: 520px; max-width: 520px; }
  .panel { flex: 1 1 320px; min-width: 300px; max-width: var(--ww-rail); }
}

/* ---- bord ---- */
/* onzichtbaar veld dat het mobiele toetsenbord oproept */
.board-key {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; border: 0; padding: 0; margin: 0;
  font-size: 16px; /* >=16px voorkomt iOS-autozoom */
  caret-color: transparent; background: transparent; color: transparent;
  pointer-events: none; z-index: -1;
}

.board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: var(--ww-tegelgat);
  background: var(--ww-linnen);
  padding: 7px;
  border-radius: var(--ww-radius-kaart);
  box-shadow: var(--ww-rand), var(--ww-omgeving);
  width: 100%;
  aspect-ratio: 1 / 1;
  user-select: none;
}
.cell {
  position: relative;
  background: var(--ww-tegel-leeg);
  box-shadow: inset 0 0 0 1.5px var(--ww-tegel-rand);
  border-radius: var(--ww-radius-tegel);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ww-display);
  font-size: clamp(8px, 1.4vw, var(--ww-tegel-font));
  font-weight: 600;
  color: var(--ww-vervaagd);
  cursor: pointer;
  overflow: hidden;
}
.cell.bonus-TW { background: var(--ww-tw); box-shadow: none; color: #FFF3E6; }
.cell.bonus-TL { background: var(--ww-tl); box-shadow: none; color: #FFF3E6; }
.cell.bonus-DW { background: var(--ww-dw); box-shadow: none; color: var(--ww-inkt); }
.cell.bonus-DL { background: var(--ww-dl); box-shadow: none; color: #FFF3E6; }
.cell.bonus-ST { background: var(--ww-ster); box-shadow: none; color: var(--ww-honing); }
.cell.bonus-ST .star { font-size: 1.4em; }

.cell .blabel { opacity: .95; pointer-events: none; }

/* gelegde stenen */
.cell.has-tile {
  background: var(--ww-steen);
  color: var(--ww-inkt);
  box-shadow: inset 0 -2px 0 var(--ww-steen-diep);
}
.cell.has-tile .letter { font-size: 1.6em; line-height: 1; text-transform: uppercase; }
.cell .val {
  position: absolute; right: 2px; bottom: 1px;
  font-family: var(--ww-tekst);
  font-size: .7em; font-weight: 800; opacity: .75;
}
.cell.is-blank { color: var(--ww-goud-diep); }
.cell.is-blank .val { display: none; }

/* voorgestelde zet (topzet = honing) */
.cell.preview {
  background: var(--ww-honing);
  color: var(--ww-inkt);
  box-shadow: inset 0 0 0 2px var(--ww-goud);
}
.cell.in-word.has-tile { box-shadow: inset 0 0 0 2px var(--ww-goud), inset 0 -2px 0 var(--ww-steen-diep); }

/* selectie = 3px ring in inkt */
.cell.selected { outline: 3px solid var(--ww-inkt); outline-offset: -3px; z-index: 2; }

/* ---- knoppen ---- */
.board-actions { display: flex; gap: var(--ww-u2); margin-top: var(--ww-u3); flex-wrap: wrap; }
.board-actions .btn { flex: 1 1 auto; white-space: nowrap; text-align: center; }
#play-word { flex-basis: 100%; }
.btn {
  padding: 9px 13px; border: none; cursor: pointer;
  font-family: var(--ww-display); font-size: 14px; font-weight: 600;
  background: var(--ww-perkament); color: var(--ww-inkt);
  border-radius: var(--ww-radius-knop); box-shadow: var(--ww-rand-klein);
  transition: transform .06s ease-out;
}
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ww-lijn-diep); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary {
  background: var(--ww-accent); color: var(--ww-accent-op);
  box-shadow: var(--ww-rand-accent);
  width: 100%; font-size: var(--ww-fs-knop); padding: var(--ww-knop-pad); margin-top: 10px;
}
.btn.primary:active { box-shadow: 0 2px 0 var(--ww-accent-diep); }
.btn.play {
  background: var(--ww-cta); color: #FFF3E6;
  box-shadow: var(--ww-rand-cta); font-weight: 700;
}
.btn.play:active { box-shadow: 0 2px 0 var(--ww-cta-diep); }

.hint { color: var(--ww-vervaagd); font-size: 13px; margin: 10px 2px 0; min-height: 18px; max-width: none; }

/* ---- letterrek ---- */
.rack-block {
  background: var(--ww-perkament); border-radius: var(--ww-radius-kaart);
  padding: var(--ww-kaart-pad); box-shadow: var(--ww-rand), var(--ww-omgeving);
}
.rack-block label { display: block; font-size: var(--ww-fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ww-vervaagd); margin-bottom: 8px; }
.rack-block code { background: var(--ww-zacht-zand); padding: 1px 5px; border-radius: 4px; color: var(--ww-inkt); text-transform: none; letter-spacing: 0; }
#rack {
  width: 100%; padding: 11px; font-size: 22px; letter-spacing: 6px; text-transform: uppercase;
  font-family: var(--ww-display); font-weight: 600;
  background: var(--ww-perkament); border: 1.5px solid var(--ww-lijn); border-radius: var(--ww-radius-veld);
  color: var(--ww-inkt); text-align: center;
}
#rack:focus { outline: none; border-color: var(--ww-accent); box-shadow: 0 0 0 3px rgba(31, 111, 92, .18); }
.rack-tiles { display: flex; gap: 5px; flex-wrap: wrap; min-height: 8px; margin-top: 10px; }
.rack-tiles .rt {
  width: 34px; height: 34px; background: var(--ww-steen); color: var(--ww-inkt);
  border-radius: 6px; box-shadow: 0 3px 0 var(--ww-steen-diep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ww-display); font-weight: 700; position: relative; font-size: 18px;
}
.rack-tiles .rt .v { position: absolute; right: 2px; bottom: 0; font-family: var(--ww-tekst); font-size: 9px; font-weight: 800; opacity: .7; }
.rack-tiles .rt.blank { background: var(--ww-honing); color: var(--ww-goud-diep); }

/* ---- resultaten ---- */
.results-block {
  background: var(--ww-perkament); border-radius: var(--ww-radius-kaart);
  padding: var(--ww-kaart-pad); box-shadow: var(--ww-rand), var(--ww-omgeving);
}
.results-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ww-u2); flex-wrap: wrap; }
.results-head h2 { font-family: var(--ww-display); font-size: var(--ww-titel); font-weight: 700; margin: 0 0 8px; color: var(--ww-inkt); }
.results-meta { color: var(--ww-vervaagd); font-size: var(--ww-fs-meta); }
/* geen geneste scroll — de pagina scrolt zelf (minder buggy op mobiel) */
.results { list-style: none; margin: 0; padding: 0; }
.results li {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--ww-u2);
  padding: var(--ww-rij-pad); border-radius: 10px; cursor: pointer;
  border: 1.5px solid transparent;
}
.results li > div:first-child { margin-right: auto; min-width: 0; }
.results li:nth-child(odd) { background: var(--ww-zacht-zand); }
.results li:hover { border-color: var(--ww-accent); }
.results li.active { border-color: var(--ww-goud); background: var(--ww-honing); }
.results .word {
  font-family: var(--ww-display); font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ww-inkt);
}
.results .meta { color: var(--ww-vervaagd); font-size: var(--ww-fs-meta); }
.results .score {
  font-family: var(--ww-display); font-weight: 700; font-size: var(--ww-fs-waarde);
  color: var(--ww-accent-diep); min-width: 42px; text-align: right;
}
.results .empty { color: var(--ww-vervaagd); padding: 8px; cursor: default; justify-content: flex-start; }
.results .empty:hover { border-color: transparent; }

/* woord melden dat niet bestaat */
.flag-btn {
  flex: 0 0 auto;
  background: transparent; border: none; color: var(--ww-vervaagd);
  border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 5px 6px; opacity: .5;
}
.flag-btn:hover, .flag-btn:focus-visible { opacity: 1; color: var(--ww-gevaar); background: var(--ww-gevaar-vlak); }
.results li.active .flag-btn { opacity: .85; }

/* ---- laden ---- */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(243, 233, 215, .94);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.loading-overlay.hidden { display: none; }
.loading-box { text-align: center; color: var(--ww-inkt); font-family: var(--ww-display); font-weight: 600; }
.spinner {
  width: 42px; height: 42px; border: 4px solid var(--ww-lijn);
  border-top-color: var(--ww-accent); border-radius: 50%; margin: 0 auto 14px;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Mislukt het laden van het woordenboek, dan mag het scherm niet blijven hangen:
   de spinner verdwijnt en er komen twee knoppen voor in de plaats. */
.loading-overlay.is-fout .spinner { display: none; }
.loading-actions { display: flex; flex-wrap: wrap; gap: var(--ww-u2); justify-content: center; margin-top: var(--ww-u4); }
.loading-actions[hidden] { display: none; }

/* ---- toetsenbordbediening ----
   Wie zonder muis werkt moet altijd kunnen zien waar de focus staat. Deze regels
   staan bewust apart, zodat ze niet per ongeluk sneuvelen bij een stijlwijziging. */
.board:focus-visible,
.results li:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.link-btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--ww-accent);
  outline-offset: 2px;
  border-radius: var(--ww-u1);
}
.results li { cursor: pointer; }
/* Het geselecteerde vakje is de plek waar getypt wordt; dat moet opvallen,
   ook als de focus technisch op het verborgen invoerveld staat. */
.board:focus-within .cell.selected {
  outline: 3px solid var(--ww-accent);
  outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- opslagstatus ---- */
.sync-status {
  font-family: var(--ww-tekst); font-size: var(--ww-fs-klein, 13px);
  color: var(--ww-vervaagd); margin-left: auto; white-space: nowrap;
}
.sync-status.saving { color: var(--ww-vervaagd); }
.sync-status.saved { color: var(--ww-accent); }
.sync-status.offline { color: var(--ww-cta); }
.sync-status.scratch { color: var(--ww-vervaagd); }

/* ---- uitleg- en FAQ-blok onder de app (server-gerenderd, voor bezoekers én zoekmachines) ---- */
.uitleg-blok {
  max-width: 60rem; margin: var(--ww-u12) auto var(--ww-u8); padding: 0 var(--ww-u4);
  font-family: var(--ww-tekst); color: var(--ww-sepia); line-height: 1.65;
}
.uitleg-blok h2 {
  font-family: var(--ww-display); color: var(--ww-inkt);
  margin: var(--ww-u8) 0 var(--ww-u3); font-size: 1.5rem;
}
.uitleg-blok h3 {
  font-family: var(--ww-display); color: var(--ww-inkt);
  margin: var(--ww-u6) 0 var(--ww-u2); font-size: 1.1rem;
}
.uitleg-blok p { margin: 0 0 var(--ww-u3); }
.uitleg-blok a { color: var(--ww-accent); }
.uitleg-blok code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--ww-zacht-zand); border: 1px solid var(--ww-lijn);
  border-radius: 4px; padding: 1px 5px;
}
.uitleg-blok .stappen { margin: 0 0 var(--ww-u4); padding-left: var(--ww-u5); }
.uitleg-blok .stappen li { margin-bottom: var(--ww-u2); }
.uitleg-blok .tool-links { list-style: none; margin: 0; padding: 0; }
.uitleg-blok .tool-links li {
  background: var(--ww-perkament); border: 1px solid var(--ww-lijn);
  border-bottom: 3px solid var(--ww-lijn-diep); border-radius: var(--ww-u2);
  padding: var(--ww-u3) var(--ww-u4); margin-bottom: var(--ww-u2);
}

/* ---- advertentieplekken (blijven leeg zolang ze uit staan) ---- */
.ad-slot { margin: var(--ww-u3) 0; }
.ad-slot[hidden] { display: none; }

/* ---- voettekst ---- */
.site-footer {
  max-width: var(--ww-max); margin: var(--ww-u6) auto 0; padding: var(--ww-u4) var(--ww-u3) var(--ww-u7);
  border-top: 1.5px solid var(--ww-lijn); color: var(--ww-vervaagd); font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.footer-links { display: flex; align-items: center; gap: var(--ww-u2); flex-wrap: wrap; justify-content: center; }
.site-footer a { color: var(--ww-sepia); text-decoration: none; }
.site-footer a:hover { color: var(--ww-accent-diep); text-decoration: underline; }
.footer-note { margin: 0; font-size: var(--ww-fs-meta); }
.link-btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--ww-sepia); font: inherit; text-decoration: none;
}
.link-btn:hover { color: var(--ww-accent-diep); text-decoration: underline; }

/* ---- meldingen (toasts) ---- */
.toasts {
  position: fixed; left: 50%; bottom: 18px; z-index: 200;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--ww-u2);
  width: min(420px, calc(100vw - 24px)); pointer-events: none;
}
.toast {
  background: var(--ww-perkament); color: var(--ww-inkt);
  border-left: 4px solid var(--ww-accent);
  border-radius: 12px; padding: 10px 14px; font-size: 14px; width: 100%;
  box-shadow: var(--ww-rand), var(--ww-omgeving);
  animation: toast-in .18s ease-out;
}
.toast.out { opacity: 0; transition: opacity .28s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- modals ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(59, 42, 22, .45);
  display: flex; align-items: center; justify-content: center; padding: var(--ww-u4);
}
.modal {
  background: var(--ww-perkament); color: var(--ww-inkt);
  border-radius: var(--ww-radius-kaart); padding: var(--ww-u5); width: min(460px, 100%);
  max-height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: var(--ww-rand), 0 18px 44px rgba(90, 62, 30, .28);
}
.modal-title { margin: 0 0 8px; font-family: var(--ww-display); font-size: 19px; font-weight: 700; }
.modal-desc { margin: 0 0 14px; color: var(--ww-sepia); font-size: 14px; line-height: 1.5; }
.modal-label { display: block; font-size: var(--ww-fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ww-vervaagd); margin: 10px 0 5px; }
.modal-input {
  width: 100%; padding: 10px 13px; font-size: 15px; font-family: var(--ww-tekst);
  background: var(--ww-perkament); border: 1.5px solid var(--ww-lijn);
  border-radius: var(--ww-radius-veld); color: var(--ww-inkt); resize: vertical;
}
.modal-input:focus { outline: none; border-color: var(--ww-accent); box-shadow: 0 0 0 3px rgba(31, 111, 92, .18); }
.modal-error { margin: 8px 0 0; color: var(--ww-gevaar); font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--ww-u2); margin-top: var(--ww-u4); }
.modal-actions .btn { flex: 0 0 auto; width: auto; margin: 0; font-size: 14px; padding: 9px 14px; }
.btn.danger { background: var(--ww-gevaar-vlak); color: var(--ww-gevaar); box-shadow: 0 3px 0 var(--ww-gevaar-rand); }

/* verborgen veld voor de kopieer-terugval */
.offscreen-copy { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

/* ---- popover om een woord te melden ---- */
.popover {
  position: fixed; z-index: 250; width: min(280px, calc(100vw - 24px));
  background: var(--ww-perkament); border-radius: var(--ww-radius-kaart);
  padding: var(--ww-u3); box-shadow: var(--ww-rand), var(--ww-omgeving);
}
.popover-title { font-family: var(--ww-display); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.popover-hint { font-size: var(--ww-fs-meta); color: var(--ww-sepia); margin-bottom: 10px; line-height: 1.45; }
.popover-words { display: flex; flex-wrap: wrap; gap: 6px; }
.popover-word {
  background: var(--ww-zacht-zand); color: var(--ww-inkt); border: none;
  border-radius: 8px; padding: 7px 11px; cursor: pointer;
  font-family: var(--ww-display); font-size: 13px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; box-shadow: 0 2px 0 var(--ww-lijn-diep);
}
.popover-word:hover, .popover-word:focus-visible { color: #FFF3E6; background: var(--ww-gevaar); box-shadow: 0 2px 0 var(--ww-tw-diep); }
.popover-close {
  margin-top: 10px; background: none; border: 0; color: var(--ww-vervaagd);
  font-size: var(--ww-fs-meta); cursor: pointer; padding: 2px 0;
}
.popover-close:hover { color: var(--ww-inkt); text-decoration: underline; }