:root {
  --bg: #0b0806;
  --ink: #f3e6cf;
  --muted: #a8977c;
  --gold: linear-gradient(135deg, #fff3c4 0%, #f0c060 22%, #b9811f 48%, #f6d27c 70%, #8f5c12 100%);
  --gold-flat: #e2aa48;
  --glow: rgba(240, 170, 70, .45);
  --serif: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 30%, #2a1c10 0%, #120c08 55%, var(--bg) 100%) fixed;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Kopbalk */
.top { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem .3rem; }
.top-logo { width: 2.3rem; height: 2.3rem; border-radius: .6rem; }
.top-title { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--gold-flat); white-space: nowrap; }
.top-title b { font-style: normal; font-weight: 400; font-family: var(--sans); font-size: .95rem; color: var(--ink); }
.top-btns { margin-left: auto; display: flex; gap: .4rem; }
.chip {
  min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem;
  border-radius: 1.2rem; border: 1px solid rgba(226, 170, 72, .45);
  background: rgba(0, 0, 0, .35); color: var(--gold-flat); font-size: .9rem;
}
.chip:active { transform: scale(.94); }
@media (max-width: 23rem) { .top-title { display: none; } }

/* Speelbord */
/* De vakken krimpen mee met de ruimte die overblijft (ook met de klok- en veegbalk van een iPhone). */
.board {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch;
  padding: .4rem 1rem;
  gap: .8rem;
}
@media (orientation: landscape) and (min-width: 40rem) {
  .board { flex-direction: row; gap: 2rem; }
}
.slot { flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.die-box { flex: 1 1 0; min-height: 0; width: 100%; container-type: size; display: grid; place-items: center; }

/* Dobbelsteen */
.die {
  --s: min(28vh, 70vw, 20rem);
  --s: min(100cqh, 100cqw, 20rem);
  width: var(--s); height: var(--s);
  padding: calc(var(--s) * .022);
  border-radius: 22%;
  background: var(--gold);
  box-shadow: 0 0 calc(var(--s) * .12) rgba(240, 170, 70, .18), 0 calc(var(--s) * .05) calc(var(--s) * .1) rgba(0, 0, 0, .7);
  transition: box-shadow .4s;
}
@media (orientation: landscape) and (min-width: 40rem) {
  .die { --s: min(100cqh, 100cqw, 22rem); }
}
.die-in {
  width: 100%; height: 100%;
  border-radius: 20.5%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .07), transparent 45%),
    radial-gradient(circle at 50% 60%, #1d1712 0%, #0a0807 75%);
  box-shadow: inset 0 0 calc(var(--s) * .08) rgba(0, 0, 0, .9), inset 0 2px 3px rgba(255, 220, 150, .12);
  overflow: hidden;
}
.die.landed { box-shadow: 0 0 calc(var(--s) * .28) var(--glow), 0 calc(var(--s) * .05) calc(var(--s) * .1) rgba(0, 0, 0, .7); }

/* Gouden symbool: het plaatje is een masker, de kleur komt uit --gold */
.sym {
  width: 74%; height: 74%;
  background: var(--gold);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  filter: drop-shadow(0 0 0 transparent);
}
.sym.empty { display: none; }
.sym:not(.empty) + .q { display: none; }
.die.landed .sym { animation: shine 1.2s ease-out; }
@keyframes shine {
  0% { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}
.num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(var(--s) * .44);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -.02em;
}
.num.small { font-size: calc(var(--s) * .36); }
.die.landed .num { animation: shine 1.2s ease-out; }

.label { margin: 0; text-align: center; height: 3.1rem; overflow: hidden; line-height: 1.3; flex: none; }
.roll { flex: none; }
.label strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--gold-flat); letter-spacing: .02em; }
.label span { display: block; color: var(--muted); font-size: .92rem; }

.roll {
  min-width: 13rem; padding: .85rem 1.6rem;
  border: 0; border-radius: 2rem;
  background: var(--gold);
  color: #24160a; font-weight: 700; font-size: 1.05rem; letter-spacing: .03em;
  box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .1s, opacity .2s;
}
.roll:active { transform: scale(.96); }
.roll:disabled { opacity: .55; }

.foot { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; padding: .3rem 1rem .7rem; font-size: .75rem; color: var(--muted); text-align: center; }
.foot a { color: var(--gold-flat); text-decoration: none; }

@media (max-height: 40rem) and (orientation: portrait) {
  .label { height: 2.7rem; }
  .label strong { font-size: 1.15rem; }
  .roll { padding: .65rem 1.4rem; }
  .foot { display: none; }
}

/* Startscherm */
.start {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: 1rem;
  background: radial-gradient(ellipse at 50% 30%, #2a1c10 0%, #0b0806 70%);
  overflow-y: auto;
}
.start-box { width: min(26rem, 100%); text-align: center; }
.start-logo { width: min(17rem, 62vw, 40dvh); height: auto; border-radius: 22%; box-shadow: 0 0 3rem rgba(240, 170, 70, .25); }
.start-intro { color: var(--ink); margin: 1rem 0 .4rem; }
.start-q { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-flat); margin: 1rem 0 .7rem; }
.start-choice { display: flex; gap: .8rem; justify-content: center; }
.pick {
  flex: 1; max-width: 11rem;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 1rem .5rem;
  border-radius: 1.2rem;
  border: 2px solid transparent;
  background: linear-gradient(#140e0a, #140e0a) padding-box, var(--gold) border-box;
  font-size: 1.15rem; font-weight: 600;
}
.pick-ico { font-size: 2rem; line-height: 1; color: var(--gold-flat); }
.pick:active { transform: scale(.96); }
.start-18 { color: var(--muted); font-size: .82rem; margin: 1.2rem 0 .6rem; }
.start-lang { background: none; border: 0; color: var(--gold-flat); text-decoration: underline; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .die.landed .sym, .die.landed .num { animation: none; }
}

.label-num { display: flex; align-items: center; justify-content: center; }

/* Koffiescherm */
.pay {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: rgba(8, 5, 3, .88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.pay-box {
  width: min(24rem, 100%);
  text-align: center;
  padding: 1.6rem 1.3rem 1.2rem;
  border-radius: 1.6rem;
  border: 2px solid transparent;
  background: radial-gradient(circle at 50% 0%, #2a1c10, #120c08 70%) padding-box, var(--gold) border-box;
  box-shadow: 0 0 3rem rgba(240, 170, 70, .2);
}
.cup { width: 6.5rem; height: 6.5rem; }
.steam { animation: steam 2.4s ease-in-out infinite; opacity: .8; }
.steam.s2 { animation-delay: .5s; }
.steam.s3 { animation-delay: 1s; }
@keyframes steam { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.pay h2 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--gold-flat); margin: .4rem 0 .7rem; line-height: 1.2; }
.pay p { margin: 0 0 .7rem; line-height: 1.45; }
.pay-buy { display: inline-block; margin: .5rem 0 .8rem; text-decoration: none; }
.pay-login { display: block; color: var(--gold-flat); font-weight: 600; margin-bottom: .9rem; }
.pay .pay-note { color: var(--muted); font-size: .82rem; }
.pay-later { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: .9rem; padding: .4rem; }
.thanks {
  position: fixed; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 30; padding: .8rem 1.2rem; border-radius: 1rem;
  background: var(--gold); color: #24160a; font-weight: 700; text-align: center;
  width: max-content; max-width: calc(100% - 2rem);
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .6);
}
@media (prefers-reduced-motion: reduce) { .steam { animation: none; } }