/*
  Houten UI, standaard aan. ?stijl=strak in de URL zet hem uit.
  Texturen: Poly Haven (CC0), "Dark Wood" en "Oak Veneer 01".
  Koppen: Fraunces (Google Fonts, OFL), warm en zacht, als ingebrand in het hout.
*/

html.hout {
  --donker: url("assets/hout/donker.jpg");
  --eiken: url("assets/hout/eiken.jpg");
  --brand: #3b1f10;
  --slab: "Fraunces", Georgia, serif;
  --muted: #d1b79a;
  --line: rgba(0, 0, 0, 0.45);
}

/* Donker hout als ondergrond, met een zachte rand alsof het een plank is */
.hout .sheet,
.hout .menu,
.hout #toast {
  background:
    linear-gradient(rgba(20, 9, 4, 0.55), rgba(20, 9, 4, 0.7)),
    var(--donker) center / 520px;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}
.hout .sheet {
  border-right: 3px solid #1a0b05;
  box-shadow:
    inset -1px 0 0 rgba(255, 220, 180, 0.12),
    6px 0 24px rgba(0, 0, 0, 0.45);
}
.hout .menu, .hout #toast { border: 1px solid #1a0b05; }

/*
  Koppen uit eikenhout gezaagd: de textuur vult de letters (background-clip: text).
  text-shadow zou over de vulling heen vallen, dus de freesrand komt van drop-shadow.
*/
.hout .wordmark,
.hout .splash-name,
.hout .step-title {
  font-family: var(--slab);
  font-weight: 800;
  font-stretch: normal;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  letter-spacing: -0.01em;
  color: #f1d6ad;
  background:
    linear-gradient(rgba(255, 236, 205, 0.25), rgba(120, 60, 20, 0.15)),
    var(--eiken) 0 0 / 260px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.75))
    drop-shadow(0 1px 0 rgba(255, 225, 185, 0.22))
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}
.hout .wordmark { font-size: 42px; text-transform: none; }
.hout .splash-name { font-size: 30px; text-transform: none; }
/* "Swing" in gebeitst hout: dezelfde nerf, oranje getint */
.hout .swing {
  background:
    var(--eiken) 0 0 / 260px,
    linear-gradient(#f0a050, #d2752a);
  background-blend-mode: overlay;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
  Ingebrand op licht hout: donkere inkt met multiply, zodat de nerf door de letters
  heen blijft lopen, en een zachte rand alsof het hout rond de letter verschroeid is.
*/
.hout .choice-num,
.hout .playcard.groen .playcard-text,
.hout .playcard.oranje .playcard-text {
  mix-blend-mode: multiply;
  text-shadow: 0 0 1px rgba(70, 30, 8, 0.55), 0 0 6px rgba(120, 55, 15, 0.25);
}
.hout .choice-num {
  font-family: var(--slab);
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-stretch: normal;
  color: #4a2210;
}
.hout .section-label { color: #e0c39f; }

/* Keuzes als echte blokken: eiken plank met gekleurde kopse kanten */
.hout .choices { border-top: 0; gap: 12px; }
.hout .choice {
  padding: 18px 20px 18px 26px;
  border: 0;
  border-radius: 6px;
  color: var(--brand);
  background:
    linear-gradient(rgba(255, 240, 215, 0.42), rgba(255, 232, 200, 0.3)),
    var(--eiken) center / 420px;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.55),
    inset 0 -3px 0 rgba(80, 40, 12, 0.35),
    0 3px 0 #2a1408,
    0 8px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.hout .choice::before,
.hout .choice::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--groen);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.hout .choice::before { left: 0; border-radius: 6px 0 0 6px; }
.hout .choice::after { right: 0; border-radius: 0 6px 6px 0; background: var(--rood); }
.hout .choice:hover, .hout .choice:focus-visible { background: linear-gradient(rgba(255, 240, 215, 0.5), rgba(255, 232, 200, 0.38)), var(--eiken) center / 420px; transform: translateY(-1px); }
.hout .choice:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, 0.55), inset 0 -3px 0 rgba(80, 40, 12, 0.35), 0 1px 0 #2a1408, 0 3px 8px rgba(0, 0, 0, 0.4);
}
.hout .choice-body strong { color: #1f0f07; }
.hout .choice-body > span:not(.people) { color: #3a2213; font-weight: 500; }
.hout .people i { background: var(--brand); opacity: 0.6; }
.hout .people em { color: #3a2213; }
.hout .choice-arrow { border-color: #6b3414; }
.hout .choice:hover .choice-arrow { border-color: var(--brand); }

/* Knoppen ook als blokje */
.hout .primary {
  color: var(--brand);
  background:
    linear-gradient(rgba(255, 236, 205, 0.2), rgba(90, 45, 15, 0.1)),
    var(--eiken) center / 300px;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, 0.55), 0 3px 0 #2a1408, 0 6px 14px rgba(0, 0, 0, 0.4);
}
.hout .primary:hover { background: var(--eiken) center / 300px; }
.hout .primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a1408; }

/* Tweede knop: donker hout, zelfde blokvorm als de eiken knop */
.hout .secondary {
  border: 0;
  border-radius: 5px;
  color: #f1d6ad;
  background:
    linear-gradient(rgba(255, 220, 180, 0.08), rgba(0, 0, 0, 0.15)),
    var(--donker) center / 300px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.2), 0 3px 0 #140802, 0 6px 14px rgba(0, 0, 0, 0.4);
}
.hout .secondary:hover { background: var(--donker) center / 300px; }
.hout .secondary:active { transform: translateY(2px); box-shadow: 0 1px 0 #140802; }

/* Namen in uitgefreesde groeven */
.hout .name-list li {
  border: 0;
  margin-bottom: 8px;
  padding: 0 8px 0 14px;
  border-radius: 5px;
  background: rgba(10, 4, 1, 0.45);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 220, 180, 0.1);
}

/* Opdrachtkaart als gebeitst plankje: de kleur trekt in de nerf */
.hout .playcard {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.12)),
    var(--eiken) center / 380px,
    var(--c);
  background-blend-mode: normal, soft-light, normal;
  border-radius: 8px;
  outline-color: color-mix(in srgb, var(--t) 30%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -4px 0 rgba(0, 0, 0, 0.25),
    0 18px 40px rgba(0, 0, 0, 0.55);
}
.hout .playcard-text { font-family: var(--slab); font-weight: 700; font-stretch: normal; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: 29px; line-height: 1.12; }
.hout .playcard.groen, .hout .playcard.oranje { --t: #23120a; }
.hout .boete-card .playcard-text { font-size: 25px; }
.hout .done { border-radius: 5px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }

/* Laadscherm op donker hout */
.hout .splash {
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(40, 18, 8, 0.35) 0%, rgba(10, 5, 3, 0.92) 75%),
    var(--donker) center / 600px;
}
.hout .loader .layer.side {
  background:
    linear-gradient(rgba(255, 236, 205, 0.15), rgba(90, 45, 15, 0.2)),
    var(--eiken) center / 200px;
}

/* Toren om: het beeldmerk in hout, de telling als ingebrande cijfers in een plank */
.hout .tb.side {
  background:
    linear-gradient(rgba(255, 236, 205, 0.15), rgba(90, 45, 15, 0.2)),
    var(--eiken) center / 160px;
}
.hout .fallen .wordmark { font-size: 68px; }
.hout .tally {
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(rgba(255, 240, 215, 0.42), rgba(255, 232, 200, 0.3)),
    var(--eiken) center / 420px;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.55),
    inset 0 -3px 0 rgba(80, 40, 12, 0.35),
    0 3px 0 #2a1408,
    0 8px 18px rgba(0, 0, 0, 0.45);
}
.hout .tally li { align-items: center; padding: 14px 0 12px; }
.hout .tally li + li { padding-left: 0; border-left: 1px solid rgba(80, 40, 12, 0.25); }
.hout .tally strong {
  font-family: var(--slab);
  font-weight: 900;
  font-stretch: normal;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-size: 32px;
  color: #3a1c0c;
  mix-blend-mode: multiply;
}
.hout .tally li.g strong { color: #2f6e3b; }
.hout .tally li.o strong { color: #a2520f; }
.hout .tally li.r strong { color: #8e1f19; }
.hout .tally span { color: #3a2213; font-weight: 600; }
.hout .fallen .actions { margin-top: 24px; }

/* Overzicht: elke opdracht als een eiken blokje met gekleurde kop */
.hout .deck-tabs {
  background: rgba(10, 4, 1, 0.45);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 220, 180, 0.1);
}
.hout .deck-tabs button[aria-selected="true"] {
  color: var(--brand);
  background:
    linear-gradient(rgba(255, 240, 215, 0.42), rgba(255, 232, 200, 0.3)),
    var(--eiken) center / 300px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, 0.55), 0 2px 0 #2a1408;
}
.hout .deck-color { color: #f1d6ad; }
.hout .deck-section {
  border-top: 0;
  box-shadow: inset 0 2px 3px -2px rgba(0, 0, 0, 0.7), inset 0 3px 0 -2px rgba(255, 220, 180, 0.1);
  font-family: var(--slab);
  font-weight: 800;
  font-stretch: normal;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  color: #f1d6ad;
}
.hout .deck-section span { font-family: var(--font); color: var(--muted); }
.hout .deck-color span { color: var(--muted); }
.hout .deck-cards li {
  color: #1f0f07;
  background:
    linear-gradient(rgba(255, 240, 215, 0.45), rgba(255, 232, 200, 0.32)),
    var(--eiken) center / 420px;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.5),
    inset 0 -2px 0 rgba(80, 40, 12, 0.3),
    0 2px 0 #2a1408;
}
.hout .deck-cards li:nth-child(odd) { background-position: 40% 70%; }

/* Tegels als kleine eiken blokjes met een ingebrand pictogram */
.hout .tile {
  color: #1f0f07;
  background:
    linear-gradient(rgba(255, 240, 215, 0.42), rgba(255, 232, 200, 0.3)),
    var(--eiken) center / 360px;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.55),
    inset 0 -3px 0 rgba(80, 40, 12, 0.35),
    0 3px 0 #2a1408,
    0 8px 18px rgba(0, 0, 0, 0.45);
}
.hout .tile + .tile { background-position: 30% 60%; }
.hout .tile:hover {
  background:
    linear-gradient(rgba(255, 240, 215, 0.5), rgba(255, 232, 200, 0.38)),
    var(--eiken) center / 360px;
  transform: translateY(-1px);
}
.hout .tile:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, 0.55), 0 1px 0 #2a1408, 0 3px 8px rgba(0, 0, 0, 0.4);
}
.hout .tile svg { fill: #6b3414; mix-blend-mode: multiply; }
.hout .tile strong { font-family: var(--slab); font-weight: 800; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: 17px; }
.hout .tile small { color: #3a2213; font-weight: 500; }

/* Telefoon: de pane zelf wordt de houten plank */
.hout .sheet-pane .pane {
  background:
    linear-gradient(rgba(20, 9, 4, 0.55), rgba(20, 9, 4, 0.7)),
    var(--donker) center / 520px;
  border: 0;
  /* Dunne lichte rand waar het licht op de plank valt, daarachter een zachte schaduw die uitloopt */
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.22),
    0 -1px 2px rgba(0, 0, 0, 0.3),
    0 -10px 30px rgba(0, 0, 0, 0.22);
}
.hout .sheet-pane { --cupertino-pane-move-background: rgba(0, 0, 0, 0.55); }
.hout .sheet.in-pane { background: none; border: 0; box-shadow: none; }

@media (max-width: 640px) {
  .hout .sheet {
    border-right: 0;
    border-top: 3px solid #1a0b05;
    box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.14), 0 -6px 24px rgba(0, 0, 0, 0.45);
  }
  .hout .sheet::before { background: rgba(0, 0, 0, 0.55); box-shadow: 0 1px 0 rgba(255, 220, 180, 0.15); }
  .hout .wordmark { font-size: 34px; }
  .hout .fallen .wordmark { font-size: 52px; }
  .hout .playcard-text { font-size: 25px; }
}