/* Lord of the Lands: pagina's van de groep dobbelhol, eenvoudig en compact. @author Ferhat Remory */

/* ---------- Overzicht: elke tafel een rij ---------- */
.dh-intro { margin: 0; padding: 8px 1rem 2px; font: italic 500 14.5px/1.3 var(--font-kop); color: var(--color-muted); }
.dh-lijst { display: grid; padding: 0 1rem; }
.dh-rij { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink); }
.dh-lijst > li:last-child .dh-rij { border-bottom: 0; }
.dh-ico { display: grid; place-items: center; width: 36px; height: 42px; border: 1px solid var(--color-line); border-radius: 999px 999px 3px 3px; background: #fffdf8; color: var(--color-ink); }
.dh-rij-tekst { min-width: 0; }
.dh-rij-tekst > b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 16px/1.15 var(--font-kop); }
.dh-rij-tekst > b .badge { font-family: var(--font-sans); }
.dh-rij-tekst small { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-size: 11.5px; color: var(--color-muted); }
.dh-rij-tekst small > span { display: inline-flex; align-items: center; gap: 3px; }
.dh-geld { font: 600 13px/1.2 var(--font-kop); color: var(--color-ink); }
.dh-rij:hover .dh-rij-tekst > b { text-decoration: underline; text-underline-offset: 2px; }
.dh-rij:hover .dh-rij-knop { background: var(--color-ink); color: var(--color-card); }
.dh-rij-knop { min-height: 28px; padding: 0 12px; font-size: 9px; }
.dh-pijl { display: grid; place-items: center; width: 28px; color: var(--color-muted); }

/* ---------- Kop van een tafel ---------- */
.dossier-tabs:has(+ .dh-kop) { gap: 16px; padding: 0 1rem; }
.dossier-tabs:has(+ .dh-kop) .dossier-tab .icon { display: none; }
.dh-kop { padding: 0 1rem; }
.dh-kop .dh-intro { padding: 8px 0 6px; }
.dh-feiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 7px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
/* De eigenaarsrij (lotl-bezit.css) hier zonder eigen kader: de strook heeft al haarlijnen. */
.dh-feiten .bz-eigenaar { flex: 1 1 26rem; min-width: 0; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 0; border: 0; border-radius: 0; }
.dh-feiten .bz-beeld, .dh-feiten .bz-ico { width: 32px; height: 32px; }
.dh-grens { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 12px; }
.dh-grens b { font: 600 15px/1 var(--font-kop); color: var(--color-ink); }

/* ---------- Tafel: spel en eventueel een uitbetalingslijst ernaast ---------- */
.dh-tafel { display: grid; gap: 12px; }
@media (min-width: 1024px) {
  .dh-tafel { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  .dh-tafel-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dh-tafel > .card + .card { border-left: 1px solid var(--color-line); }
}
.dh-form { display: grid; gap: 10px; padding: 10px 1rem 4px; }
.dh-form-deel { display: grid; gap: 10px; }
.dh-form-deel[hidden], .dh-bj-knoppen[hidden] { display: none; }
.dh-voet { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--color-faint); }
.card > .dh-voet { padding: 8px 1rem 0; }
.dh-leeg { padding: 14px 1rem; text-align: center; font: italic 500 15px/1.3 var(--font-kop); color: var(--color-muted); }

/* Het speelveld: een licht vlak met een haarlijn, geen vilt. */
.dh-veld-spel { padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: color-mix(in oklab, var(--color-card-deep) 55%, transparent); color: var(--color-ink); }
.dh-duel { display: flex; align-items: center; justify-content: center; gap: 28px; }
.dh-kant { display: grid; justify-items: center; gap: 8px; }
.dh-kant .kap { color: var(--color-muted); }
.dh-vs { font: italic 500 18px/1 var(--font-kop); color: var(--color-faint); }
.dh-getal { font: 600 26px/1 var(--font-kop); font-variant-numeric: lining-nums tabular-nums; }
.dh-getal-klein { font: 600 16px/1 var(--font-kop); }

/* ---------- Inzet: bedrag, fiches en de speelknop op één regel ---------- */
.dh-inzet { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--color-line); }
.dh-inzet-bedrag { flex: 1 1 18rem; min-width: 0; }
.dh-inzet-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dh-veld { position: relative; flex: 0 0 9.5rem; }
.dh-veld img { position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.dh-veld .field { height: 34px; padding-left: 32px; font: 600 17px/1 var(--font-kop); }
.dh-fiches { display: flex; flex-wrap: wrap; gap: 4px; }
.dh-go { flex: 0 0 auto; min-height: 36px; padding: 0 20px; }
.dh-go-breed { flex: 1 1 100%; }
.dh-klein { min-height: 26px; padding: 0 8px; font-size: 9px; }

/* Fiches: kleine omlijnde waarden, de gekozen in inkt. */
.casino-chip { display: inline-grid; place-items: center; width: auto; min-width: 2.5rem; height: 26px; padding: 0 8px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-ui); background: #fffdf8; box-shadow: none; color: var(--color-ink); font: 600 13.5px/1 var(--font-kop); transition: background-color .15s, color .15s, border-color .15s; }
.casino-chip:hover { transform: none; border-color: var(--color-ink); }
.casino-chip-max { background: transparent; box-shadow: none; border-color: var(--color-ink); font: 700 9px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.casino-chip:has(:checked) { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-card); }
.casino-chip:has(:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* De beeldcode: plat, zoals de rest. */
.dh-form .captcha-card { padding: 8px 10px; border-radius: var(--radius-ui); background: transparent; }

/* ---------- Gokkast ---------- */
.slot-cabinet { max-width: 26rem; width: 100%; padding: 10px 12px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: #fffdf8; box-shadow: inset 0 0 0 3px #fffdf8, inset 0 0 0 4px var(--color-line); }
.slot-marquee { margin-bottom: 8px; font: 600 9.5px/1 var(--font-sans); letter-spacing: .2em; color: var(--color-accent); text-shadow: none; }
.slot-marquee span { animation: none; }
.slot-window { gap: 6px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.slot-reel { height: 5rem; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); box-shadow: inset 0 9px 9px -9px rgb(29 27 24 / .22), inset 0 -9px 9px -9px rgb(29 27 24 / .22); }
.slot-symbol { height: 5rem; font-size: 2.6rem; }
.slot-payline { left: -4px; right: -4px; height: 1px; background: var(--color-accent); opacity: .55; box-shadow: none; }
.slot-window.is-win { animation: dh-winst .5s ease-in-out 3; }
@keyframes dh-winst { 50% { box-shadow: 0 0 0 2px var(--color-money); } }
.slot-lever { right: -1.25rem; top: 2rem; width: 4px; height: 4.25rem; border-radius: 2px; background: var(--color-ink); }
.slot-lever-knob { top: -.7rem; width: 1rem; height: 1rem; margin-left: -.5rem; background: var(--color-accent); box-shadow: none; }
@media (max-width: 640px) {
  .slot-reel, .slot-symbol { height: 4.25rem; }
  .slot-symbol { font-size: 2.2rem; }
}

/* ---------- Dobbelstenen: ivoor met inkten ogen ---------- */
.die { width: 4rem; height: 4rem; }
.die-face { padding: .45rem; border-radius: 7px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--color-ink); }
.die-face i { width: .68rem; height: .68rem; background: var(--color-ink); }
.die-face-1 i { width: .95rem; height: .95rem; background: var(--color-accent); }
.die-face-1 { transform: translateZ(2rem); }
.die-face-6 { transform: rotateY(180deg) translateZ(2rem); }
.die-face-2 { transform: rotateY(90deg) translateZ(2rem); }
.die-face-5 { transform: rotateY(-90deg) translateZ(2rem); }
.die-face-3 { transform: rotateX(90deg) translateZ(2rem); }
.die-face-4 { transform: rotateX(-90deg) translateZ(2rem); }

/* ---------- Speelkaarten, zoals .speelkaart van Lord of the Lands ---------- */
.pcard { width: 3.4rem; height: 4.75rem; border: 1px solid var(--color-ink); border-radius: var(--radius-ui); background: #fffdf8; box-shadow: none; color: var(--color-ink); font-family: var(--font-kop); }
.pcard.is-red { color: var(--color-accent); }
.pcard-corner { left: .3rem; top: .2rem; font-size: 15px; font-weight: 600; }
.pcard-pip { font-size: 1.8rem; }
.pcard.is-back { background: repeating-linear-gradient(45deg, var(--color-ink) 0 5px, #3a352d 5px 10px); box-shadow: inset 0 0 0 2px #fffdf8; }
.pcard-lg { width: 4.4rem; height: 6.2rem; }
.pcard-lg .pcard-corner { font-size: 18px; }
.pcard-lg .pcard-pip { font-size: 2.6rem; }
.pcard-slot.is-winner .pcard { box-shadow: 0 0 0 2px #fffdf8, 0 0 0 3px var(--color-money); }

/* ---------- Eenentwintig ---------- */
.bj-table { gap: 10px; }
.bj-row { gap: 6px; }
.bj-label { font: 600 9.5px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.bj-score { min-width: 1.6rem; margin-left: 6px; padding: 3px 5px; border-radius: var(--radius-ui); background: var(--color-ink); color: var(--color-card); font: 600 14px/1 var(--font-kop); letter-spacing: 0; }
.bj-cards { min-height: 4.75rem; }
.bj-cards .pcard + .pcard { margin-left: -1.1rem; }
.bj-rule { padding: 5px; border-block: 1px solid var(--color-line); font: italic 500 13.5px/1.3 var(--font-kop); color: var(--color-muted); }
.bj-bet { font-size: 12px; color: var(--color-muted); }
.bj-bet span { font: 600 15px/1 var(--font-kop); color: var(--color-ink); }
.dh-bj-knoppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-line); }
.dh-bj-knoppen .btn { min-height: 36px; }

/* ---------- Paardenrennen: banen zoals .baan van Lord of the Lands ---------- */
.track { gap: 3px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.track-lane { grid-template-columns: 12rem minmax(0, 1fr); gap: 8px; min-height: 28px; padding: 0 8px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: #fffdf8; }
.track-lane:nth-child(odd) { background: color-mix(in oklab, var(--color-card-deep) 50%, transparent); }
.track-lane:hover { border-color: var(--color-line-strong); }
.track-lane:has(:checked) { border-color: var(--color-ink); background: color-mix(in oklab, var(--color-accent) 7%, #fffdf8); box-shadow: inset 0 0 0 1px var(--color-ink); }
.track-lane:has(:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.track-info { min-width: 0; gap: 7px; color: var(--color-ink); font-size: 13px; }
.track-silk { flex: none; width: 18px; height: 18px; border-radius: 2px; background: color-mix(in oklab, var(--silk) 72%, #8b8273); box-shadow: inset 0 0 0 1px rgb(29 27 24 / .3); color: #fffdf8; font: 700 10px/1 var(--font-sans); text-shadow: 0 0 2px rgb(29 27 24 / .6); }
.track-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px/1 var(--font-kop); }
.track-kans { flex: none; margin-left: auto; font: 600 13px/1 var(--font-kop); color: var(--color-muted); }
.track-run { height: 24px; border-right: 2px dashed var(--color-ink); border-image: none; }
.track-horse { width: 1.7rem; height: 1.7rem; background: radial-gradient(circle at 50% 80%, color-mix(in oklab, var(--silk) 45%, transparent) 0 30%, transparent 32%); }
.track-horse-icon { font-size: 1.1rem; filter: none; }
.track-place { right: 2.4rem; font: 700 9px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
@media (max-width: 640px) {
  .track-lane { grid-template-columns: 10.5rem minmax(0, 1fr); padding: 0 6px; }
  .track-naam { font-size: 13.5px; }
}

/* ---------- Koningsrad ---------- */
.dh-rad { display: grid; gap: 14px; align-items: center; }
@media (min-width: 1024px) { .dh-rad { grid-template-columns: 12rem minmax(0, 1fr); } }
.dh-rad-links { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dh-rad-rechts { display: grid; gap: 8px; min-width: 0; }
.dh-bord-scroll { overflow-x: auto; margin: 0 -2px; padding: 2px 2px 4px; }
.dh-laatste { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.roulette-wheel { width: 12rem; height: 12rem; }
.roulette-rotor { filter: none; }
.roulette-pointer { top: -.3rem; border-width: .45rem; border-top-width: .7rem; border-top-color: var(--color-ink); }
.roulette-ball { top: .65rem; width: .7rem; height: .7rem; margin-left: -.35rem; border: 1px solid var(--color-ink); background: #fffdf8; box-shadow: none; transform-origin: .35rem 5.35rem; }
.roulette-board { grid-template-columns: 2.2rem repeat(12, minmax(1.7rem, 1fr)) 2.4rem; grid-template-rows: repeat(5, 2.1rem); gap: 2px; min-width: 31rem; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.rl-cell { border: 0; border-radius: 2px; color: #fffdf8; font: 600 15px/1 var(--font-kop); transition: box-shadow .15s, background-color .15s; }
.rl-cell:hover { filter: none; box-shadow: inset 0 0 0 2px rgb(255 253 248 / .55); }
.rl-red, .rl-out.rl-red { background: var(--color-accent); }
.rl-black, .rl-out.rl-black { background: var(--color-ink); }
.rl-green { background: var(--color-money); }
.rl-out { border: 1px solid var(--color-line); background: #fffdf8; color: var(--color-ink); font: 700 9.5px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.rl-out:hover { box-shadow: none; border-color: var(--color-ink); }
.rl-out.rl-red, .rl-out.rl-black { border: 0; }
.rl-diamond { width: .8rem; height: .8rem; }
.rl-red .rl-diamond, .rl-black .rl-diamond { color: #fffdf8; }
.rl-cell[data-amount]::after { min-width: 1.4rem; height: 1.4rem; border: 1px solid var(--color-ink); background: #fffdf8; box-shadow: none; color: var(--color-ink); font: 700 9px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.rl-cell.is-hit { outline: 2px solid var(--color-brass); outline-offset: 1px; box-shadow: none; }
.rl-hist { min-width: 1.5rem; height: 1.5rem; border-radius: 2px; font: 600 13px/1 var(--font-kop); color: #fffdf8; }
.rl-hist[style*="179, 38, 46"], .rl-hist[style*="b3262e"] { background: var(--color-accent) !important; }
.rl-hist[style*="21, 25, 27"], .rl-hist[style*="15191b"] { background: var(--color-ink) !important; }
.rl-hist[style*="31, 122, 77"], .rl-hist[style*="1f7a4d"] { background: var(--color-money) !important; }
.dh-penningen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dh-totaal { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 6px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.dh-totaal b { font: 600 17px/1 var(--font-kop); color: var(--color-ink); }

/* ---------- Runenworp ---------- */
.keno-grid { gap: 3px; }
.keno-cell span { height: 30px; aspect-ratio: auto; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: #fffdf8; font: 600 15px/1 var(--font-kop); transition: background-color .15s, border-color .15s; }
.keno-cell span:hover { transform: none; border-color: var(--color-ink); }
.keno-cell input:checked + span { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-card); }
.keno-cell.is-drawn span { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 9%, #fffdf8); box-shadow: none; color: var(--color-accent); }
.keno-cell.is-hit span { border-color: var(--color-money); background: var(--color-money); box-shadow: none; color: var(--color-card); }
.keno-tray { gap: 4px; min-height: 36px; padding: 4px; border: 1px dashed var(--color-line-strong); border-radius: var(--radius-ui); background: transparent; box-shadow: none; }
.keno-ball { width: 26px; height: 26px; border: 1px solid var(--color-ink); border-radius: var(--radius-ui); background: #fffdf8; box-shadow: none; color: var(--color-ink); font: 600 14px/1 var(--font-kop); }
.keno-ball.is-hit { border-color: var(--color-money); background: var(--color-money); color: var(--color-card); }
[data-keno-pays] li.is-current { margin: 0 -6px; padding-inline: 6px; background: color-mix(in oklab, var(--color-accent) 9%, transparent); }

/* ---------- Uitbetalingslijst ---------- */
.dh-tabel { display: grid; padding: 0 1rem; font-size: 13px; }
.dh-tabel > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--color-line); }
.dh-tabel > li:last-child { border-bottom: 0; }
.dh-tabel small { display: block; font-size: 10px; line-height: 1.1; color: var(--color-faint); }
.dh-symbolen { font-size: 15px; letter-spacing: .08em; }
.dh-maal { font: 600 15px/1.1 var(--font-kop); color: var(--color-money); }

/* ---------- Loterij ---------- */
.lottery-pot { padding: 12px 1rem 4px; background: none; text-align: center; }
.dh-pot { margin: 6px 0 4px; font: 700 34px/1.05 var(--font-kop); color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.dh-prijzen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); }
.dh-prijzen > div { padding: 8px 6px; }
.dh-prijzen > div + div { border-left: 1px solid var(--color-line); }
.dh-prijzen b { display: block; margin-top: 4px; font: 600 15px/1.1 var(--font-kop); color: var(--color-money); }
.dh-form-lot { padding-top: 10px; }
.lottery-ticket { max-width: 16rem; padding: 10px; border: 1px dashed var(--color-ink); border-radius: var(--radius-ui); background: #fffdf8; box-shadow: none; color: var(--color-ink); -webkit-mask: none; mask: none; }
.lottery-ticket b { font: 600 19px/1.1 var(--font-kop); }
.dh-plaats { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-ui); font: 600 14px/1 var(--font-kop); }
.dh-plaats.is-eerste { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-card); }

/* ---------- Gsm ---------- */
@media (max-width: 640px) {
  .dh-intro { font-size: 14px; }
  .dh-rij { gap: 10px; }
  .dh-rij-knop { padding: 0 9px; }
  .dh-duel { gap: 18px; }
  .dh-veld-spel { padding: 10px; }
  .dh-inzet-bedrag { flex-basis: 100%; }
  .dh-veld { flex: 1 1 100%; }
  .dh-go { flex: 1 1 100%; }
  .dh-feiten .bz-eigenaar { flex-basis: 100%; grid-template-columns: 32px minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .dh-rij { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .dh-ico { width: 32px; height: 38px; }
  .dh-rij-knop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slot-window.is-win { animation: none; }
}