:root {
  --vilt: #0b5136; --vilt-diep: #073624; --goud: #d8b45a; --goud-licht: #f0d894;
  --room: #f7f3e8; --rood: #b3202a; --zwart: #1b1b1b; --wit: #fbfaf6;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--vilt);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06), transparent 60%);
  color: var(--room);
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem; gap: .75rem;
}
h1 { font-size: 1.15rem; margin: 0; color: var(--goud-licht); font-weight: 600; letter-spacing: .02em; }

.tafel { width: 100%; max-width: 32rem; display: flex; flex-direction: column; gap: .6rem; }

.zone { background: rgba(0,0,0,.2); border: 1px solid rgba(216,180,90,.28); border-radius: 10px; padding: .7rem .8rem; }
.zone h2 { font-size: .78rem; margin: 0 0 .45rem; color: rgba(247,243,232,.72); font-weight: 500; text-transform: none; letter-spacing: .04em; }
.zone h2 .score { color: var(--goud-licht); font-variant-numeric: tabular-nums; }

.kaarten { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 4.4rem; }
.kaart {
  width: 3rem; height: 4.25rem; border-radius: 6px; background: var(--wit); color: var(--zwart);
  display: flex; flex-direction: column; justify-content: space-between; padding: .25rem .3rem;
  font: 600 .95rem/1 system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  animation: deel .18s ease-out;
}
.kaart.rood { color: var(--rood); }
.kaart .teken { align-self: flex-end; font-size: 1.15rem; line-height: 1; }
.kaart.dicht { background: repeating-linear-gradient(45deg, #7d1d22, #7d1d22 5px, #93262c 5px, #93262c 10px); }
@keyframes deel { from { transform: translateY(-8px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }

.knoppen { display: flex; flex-wrap: wrap; gap: .45rem; }
button {
  flex: 1 1 auto; min-width: 5.2rem; padding: .62rem .7rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--goud); background: transparent; color: var(--goud-licht);
  font: 600 .92rem system-ui, sans-serif;
}
button:hover:not(:disabled) { background: rgba(216,180,90,.16); }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { opacity: .35; cursor: not-allowed; }
button.primair { background: var(--goud); color: var(--vilt-diep); }
button.primair:hover:not(:disabled) { background: var(--goud-licht); }

.balk { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .88rem; flex-wrap: wrap; }
.balk b { color: var(--goud-licht); font-variant-numeric: tabular-nums; }

.melding { min-height: 1.5rem; text-align: center; font-weight: 600; color: var(--goud-licht); font-size: .95rem; }
.melding.win { color: #7fd6a2; }
.melding.verlies { color: #f0908f; }

.inzet { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.inzet button { flex: 0 0 auto; min-width: 3.2rem; }

.uitleg { max-width: 32rem; font-size: .8rem; color: rgba(247,243,232,.6); text-align: center; margin: .25rem 0 0; }
.uitleg a { color: rgba(240,216,148,.8); }

@media (max-width: 22rem) {
  .kaart { width: 2.6rem; height: 3.7rem; font-size: .85rem; }
  button { min-width: 4.4rem; font-size: .85rem; }
}