/* Hot Seconds als partyspel uit de doos: een bijna zwart aubergine bord, een slingerend pad van groene, oranje en rode
   tegels met lijntekeningetjes, een dikke ronde titel, een handgeschreven regel en platte schijfjes als pionnen. */
@font-face {
  font-family: "Lilita One";
  src: url(fonts/lilita-one.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Kaushan Script";
  src: url(fonts/kaushan-script.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Nunito;
  src: url(fonts/nunito.woff2) format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --grond: #1c0f1e;
  --grond-2: #2a1630;
  --rand: #43264b;
  --zacht: #c9b7c8;
  --creme: #fff4e2;
  --creme-lijn: #e6d4ba;
  --roze: #ff3d8b;
  --roze-d: #c41d63;
  --groen: #2fbf71;
  --groen-d: #188a4c;
  --oranje: #ff8a1f;
  --oranje-d: #b85c00;
  --rood: #ef3340;
  --rood-d: #a3111e;
  --kop: "Lilita One", system-ui, sans-serif;
  --hand: "Kaushan Script", cursive;
  --tekst: Nunito, system-ui, sans-serif;
  --gutter: max(18px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(120% 70% at 50% 25%, var(--grond-2), var(--grond) 70%) fixed var(--grond);
  color: var(--creme);
  font-family: var(--tekst);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.scherm {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: env(safe-area-inset-top, 0px) 0 calc(24px + env(safe-area-inset-bottom, 0px));
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---------- Knoppen ---------- */

.knop {
  display: block;
  font-family: var(--kop);
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 15px 22px 17px;
  color: var(--creme);
  background: var(--roze);
  box-shadow: inset 0 -5px 0 var(--roze-d), 0 4px 0 #0006;
  text-align: center;
  transition: transform .08s;
}
.knop:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--roze-d), 0 1px 0 #0006; }
.knop.licht { background: transparent; box-shadow: inset 0 0 0 3px var(--rand); }
.knop.licht:active { background: var(--grond-2); }
.knop.groen { background: var(--groen); box-shadow: inset 0 -5px 0 var(--groen-d), 0 4px 0 #0006; }
.knop.klein { font-size: 17px; padding: 10px 18px 12px; }
.knop:disabled { opacity: .45; }

.knoppen { display: grid; gap: 12px; padding: 34px 32px 0; position: relative; z-index: 1; }
.knoppen.smal { padding: 18px var(--gutter) 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px var(--gutter) 0; }

/* ---------- Start ---------- */

.balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter) 0;
}
.alle-spellen { display: flex; align-items: center; gap: 8px; color: var(--zacht); text-decoration: none; font-size: 14px; }
.leeftijd { font-family: var(--kop); font-size: 15px; background: var(--roze); color: var(--creme); border-radius: 999px; padding: 3px 10px 4px; }

.logo { text-align: center; padding-top: 6vh; }
.ballon { width: 92px; height: 80px; display: block; margin: 0 auto 6px; transform: rotate(-6deg); }
.naam {
  font-family: var(--kop);
  font-weight: 400;
  font-size: 68px;
  line-height: .9;
  color: var(--creme);
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 5px 0 #0007;
}
.naam span { color: var(--roze); display: block; }
.tagline { font-family: var(--hand); color: var(--oranje); font-size: 26px; margin: 12px 0 0; transform: rotate(-3deg); }
.lijntjes {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  color: #7d5d82; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 900; margin: 16px 0 0;
}
.lijntjes::before, .lijntjes::after { content: ""; height: 2px; width: 46px; background: currentColor; }

/* Kaartjes die onderaan over de rand liggen */
.stapel { position: relative; margin-top: auto; height: 120px; pointer-events: none; overflow: hidden; }
.stapel i {
  position: absolute; bottom: -40px; width: 24%; max-width: 104px; aspect-ratio: 3 / 4;
  border-radius: 10px; background: var(--creme); box-shadow: 0 4px 10px #0007;
}
.stapel i::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; border-radius: 10px 10px 0 0; background: var(--c); }
.stapel i::after { content: ""; position: absolute; left: 12%; right: 18%; top: 32%; height: 30%; background: repeating-linear-gradient(#0000 0 8px, var(--creme-lijn) 8px 11px); }

/* ---------- Setup ---------- */

.kopbalk { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter) 6px; }
.kopbalk .klein { font-family: var(--kop); font-size: 21px; text-transform: uppercase; }
.kopbalk .klein span { color: var(--roze); }
.stap { color: var(--zacht); font-size: 14px; margin: 0; }
.menu-knop {
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--grond-2); box-shadow: inset 0 0 0 2px var(--rand);
  display: grid; place-items: center;
}
.menu-knop path { stroke: var(--creme); stroke-width: 2.4; stroke-linecap: round; }

.vel { padding: 8px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.kop { font-family: var(--kop); font-weight: 400; font-size: 36px; line-height: 1; text-transform: uppercase; margin: 6px 0 0; }
.hand-noot { font-family: var(--hand); color: var(--oranje); font-size: 21px; margin: -6px 0 0; transform: rotate(-2deg); transform-origin: left; }
.noot { color: var(--zacht); font-size: 14px; margin: 0; text-align: center; padding: 0 var(--gutter); }
.vel .noot { padding: 0; text-align: left; }

.stellen { display: grid; gap: 10px; }
.stel { background: var(--creme); color: var(--grond); border-radius: 18px; padding: 10px 12px 12px; position: relative; box-shadow: 0 4px 0 #0006; }
.stel-label { font-family: var(--kop); font-size: 15px; text-transform: uppercase; color: var(--roze-d); }
.weg { position: absolute; top: 4px; right: 6px; width: 34px; height: 34px; border: 0; background: none; font-size: 24px; color: #9b7f96; }
.speler { display: flex; gap: 8px; margin-top: 8px; }
.speler input {
  flex: 1; min-width: 0; font: inherit; font-size: 18px; font-weight: 800; color: var(--grond);
  border: 0; border-radius: 12px; padding: 10px 12px; background: #f1e3cb;
}
.speler input:focus { outline: 3px solid var(--roze); }
.mv { display: flex; gap: 4px; }
.mv button {
  width: 44px; border: 0; border-radius: 12px; background: #f1e3cb; color: #9b7f96;
  font-family: var(--kop); font-size: 18px;
}
.mv button[aria-pressed="true"] { background: var(--grond); color: var(--creme); }
.toevoegen { display: flex; gap: 10px; }
.toevoegen .knop { flex: 1; }

.vraag { display: grid; gap: 8px; }
.vraag-kop { font-family: var(--kop); font-size: 20px; text-transform: uppercase; margin: 6px 0 0; }
.keuzes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.keuzes button {
  border: 0; border-radius: 16px; padding: 10px 8px 12px; background: var(--grond-2); box-shadow: inset 0 0 0 2px var(--rand);
  font-family: var(--kop); font-size: 20px; text-transform: uppercase; display: grid; gap: 2px;
}
.keuzes button small { font-family: var(--tekst); text-transform: none; font-size: 12px; font-weight: 700; color: var(--zacht); }
.keuzes button[aria-pressed="true"] { background: var(--roze); box-shadow: inset 0 -4px 0 var(--roze-d); }
.keuzes button[aria-pressed="true"] small { color: var(--creme); }
.vel > .knop { margin-top: 10px; }

/* ---------- Bord ---------- */

.bord-wrap { position: relative; margin: 4px var(--gutter) 0; }
.bord {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 10px;
  border-radius: 20px;
  background: #0007;
  box-shadow: inset 0 0 0 2px var(--rand);
}
.tegel {
  aspect-ratio: 1;
  border-radius: 22%;
  background: var(--c);
  box-shadow: inset 0 -3px 0 #0003;
  display: grid;
  place-items: center;
  color: var(--d);
}
.tegel svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tegel.spec { background: var(--creme); color: var(--c); box-shadow: inset 0 0 0 3px var(--c), inset 0 -3px 0 #0002; }
.tegel.spec svg { stroke-width: 2.5; width: 64%; height: 64%; }
.tegel.start { background: var(--grond-2); color: var(--creme); box-shadow: inset 0 0 0 2px var(--rand); font-family: var(--kop); font-size: 11px; }
.legenda { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--zacht); font-size: 13px; }
.legenda span { display: flex; align-items: center; gap: 5px; }
.legenda svg { width: 18px; height: 18px; fill: none; stroke: var(--creme); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tegel.bed { background: var(--roze); color: var(--creme); box-shadow: inset 0 -3px 0 var(--roze-d); }
.tegel.bed svg { stroke-width: 2.4; }
.midden {
  display: grid; place-items: center; text-align: center;
  font-family: var(--hand); color: var(--roze); font-size: 20px; transform: rotate(-4deg);
}

.pionnen { position: absolute; inset: 0; pointer-events: none; }
.pion {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--p);
  box-shadow: inset 0 0 0 3px #0002, inset 0 -3px 0 #0003, 0 2px 0 #000a;
  font: 14px var(--kop);
  color: var(--grond);
  display: grid; place-items: center;
  transition: left .2s ease-out, top .2s ease-out;
}
.pion.hup { animation: hup .2s ease-out; }
@keyframes hup { 50% { transform: translateY(-9px) scale(1.1); } }
.pion.aan { outline: 3px solid var(--creme); outline-offset: 2px; z-index: 2; }

.beurt-info { margin: 14px var(--gutter) 0; display: flex; align-items: center; gap: 12px; }
.schijf {
  width: 50px; height: 50px; border-radius: 50%; background: var(--p); flex: none;
  box-shadow: inset 0 0 0 4px #0002, inset 0 -4px 0 #0003, 0 3px 0 #000a;
  display: grid; place-items: center; font: 24px var(--kop); color: var(--grond);
}
.beurt-info b { font-family: var(--kop); font-weight: 400; font-size: 24px; line-height: 1.05; display: block; text-transform: uppercase; }
.beurt-info span { color: var(--zacht); font-size: 15px; }
.extra {
  margin: 12px var(--gutter) 0; padding: 10px 14px; border-radius: 16px;
  background: var(--creme); color: var(--grond); font-weight: 900; font-size: 16px; line-height: 1.25;
  display: flex; gap: 12px; align-items: center; box-shadow: 0 4px 0 #0006;
}
.extra svg { width: 30px; height: 30px; fill: none; stroke: var(--roze); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.extra b { color: var(--roze-d); font-weight: 900; }

.stand { list-style: none; margin: 20px var(--gutter) 0; padding: 0; display: grid; gap: 6px; }
.stand li { display: flex; align-items: center; gap: 10px; color: var(--zacht); font-size: 15px; }
.stand li i { width: 18px; height: 18px; border-radius: 50%; background: var(--p); flex: none; box-shadow: inset 0 -2px 0 #0003; }
.stand li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand li b { font-family: var(--kop); font-weight: 400; color: var(--creme); }

/* ---------- Kaartje ---------- */

.kaartje {
  margin: 8vh var(--gutter) 0;
  border-radius: 22px;
  background: var(--creme);
  color: var(--grond);
  overflow: hidden;
  box-shadow: 0 8px 0 #0006;
  transform: rotate(-1.5deg);
}
.kaartje.schuin { margin-top: 22px; transform: rotate(1deg); }
.kaartje .band {
  background: var(--c, var(--roze)); color: var(--creme);
  font-family: var(--kop); text-transform: uppercase; font-size: 16px; letter-spacing: .04em;
  padding: 10px 16px; display: flex; justify-content: space-between; gap: 12px;
}
.kaartje .woord {
  font-family: var(--kop); font-size: clamp(30px, 11vw, 48px); line-height: 1; text-transform: uppercase;
  padding: 34px 18px 38px; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.kaartje .regel { border-top: 2px dashed var(--creme-lijn); padding: 10px 16px; font-weight: 800; font-size: 14px; color: #8b6f86; text-align: center; }
.kaartje .regel.mimen { color: var(--roze-d); font-weight: 900; }
.opdracht { font-weight: 900; font-size: 26px; line-height: 1.2; padding: 24px 20px 28px; margin: 0; text-wrap: pretty; }
.opdracht b { color: var(--roze-d); font-weight: 900; }
.woord.tik { animation: tik .18s ease-out; }
@keyframes tik { from { transform: translateX(14px) rotate(2deg); } }

/* De klok als schijf: de roze rand loopt leeg */
.klok {
  width: 124px; height: 124px; margin: 28px auto 0; border-radius: 50%; position: relative;
  display: grid; place-items: center;
  background: conic-gradient(var(--roze) calc(var(--v, 1) * 1turn), #3a2140 0);
  box-shadow: 0 5px 0 #0007;
}
.klok::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--grond); }
.klok span { position: relative; font: 54px var(--kop); }
.klok.bijna { animation: bons .5s ease-in-out infinite; --roze: var(--rood); }
@keyframes bons { 50% { transform: scale(1.06); } }

.score { text-align: center; margin: 16px var(--gutter) 0; font-weight: 800; color: var(--zacht); font-size: 14px; }
.score b { font-family: var(--kop); font-weight: 400; color: var(--creme); font-size: 20px; }
.pauze { margin: 18px auto 0; }

/* ---------- Tijd om, vakje, einde ---------- */

.vakkop { text-align: center; padding-top: 6vh; }
.vakkop .icoon {
  width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 14px; background: var(--creme);
  display: grid; place-items: center; box-shadow: inset 0 0 0 5px var(--c, var(--roze)), 0 5px 0 #0007; transform: rotate(4deg);
}
.vakkop .icoon svg { width: 46px; height: 46px; fill: none; stroke: var(--c, var(--roze)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vakkop h2 { font: 42px var(--kop); text-transform: uppercase; margin: 0; line-height: 1; }
.vakkop p { font-family: var(--hand); color: var(--oranje); font-size: 22px; margin: 8px var(--gutter) 0; }

.steel { display: grid; gap: 8px; }
.steel .knop { font-size: 18px; padding: 12px 16px 14px; background: var(--p); color: var(--grond); box-shadow: inset 0 -5px 0 #0003, 0 4px 0 #0006; }

.klokje { margin: 18px auto 0; }
.prijzen { list-style: none; margin: 0; padding: 14px 20px 18px; display: grid; gap: 12px; font-weight: 900; font-size: 19px; line-height: 1.25; }
.prijzen small { display: block; font-family: var(--kop); font-weight: 400; font-size: 14px; color: var(--rood-d); text-transform: uppercase; }
.prijzen b { color: var(--roze-d); }

/* ---------- Bladen ---------- */

.blad {
  border: 0; border-radius: 26px 26px 0 0; padding: 22px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  margin: auto auto 0; width: 100%; max-width: 480px; max-height: 88dvh;
  background: var(--grond-2); color: var(--creme); box-shadow: 0 -2px 0 var(--rand);
}
.blad[open] { display: grid; gap: 10px; }
.blad::backdrop { background: #000a; }
.regels ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.4; color: #eadbe8; }
.regels b { color: var(--creme); }
.tg { color: var(--groen) !important; }
.to { color: var(--oranje) !important; }
.tr { color: var(--rood) !important; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  background: var(--creme); color: var(--grond); font-weight: 900; padding: 12px 18px; border-radius: 16px;
  box-shadow: 0 5px 0 #0007; z-index: 10; text-align: center;
}

/* ---------- Groter scherm: tablet krijgt meer lucht, desktop zet het bord naast de beurt ---------- */

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .scherm { max-width: 760px; }
  .knoppen, .knoppen.smal, .duo { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
  .knop.klein.pauze, .klokje { width: auto; }

  .logo { padding-top: 4vh; }
  .ballon { width: 120px; height: 104px; }
  .naam { font-size: 112px; }
  .tagline { font-size: 34px; }
  .lijntjes { font-size: 14px; }
  .stapel { height: 150px; flex: none; }
  .knoppen { padding-bottom: 28px; }
  .stapel i { max-width: 150px; }

  .kop { font-size: 48px; }
  /* Bord, beurt en knop moeten samen in beeld passen */
  .bord-wrap { width: min(calc(100% - 2 * var(--gutter)), calc((100dvh - 330px) / 1.3)); margin: 4px auto 0; }
  #bord-scherm .beurt-info, #bord-scherm .extra { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
  #bord-scherm .stand { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
  .stellen { grid-template-columns: 1fr 1fr; }
  .vel > .knop { justify-self: center; min-width: 360px; }

  .kaartje { width: calc(100% - 2 * var(--gutter)); max-width: 620px; margin-left: auto; margin-right: auto; }
  .kaartje .band { font-size: 18px; padding: 12px 20px; }
  .kaartje .woord { font-size: 64px; padding: 54px 28px 58px; }
  .opdracht { font-size: 32px; padding: 32px 30px 36px; }
  .klok { width: 150px; height: 150px; }
  .klok span { font-size: 64px; }
  .score { font-size: 16px; }
  .vakkop h2 { font-size: 60px; }
  .vakkop p { font-size: 28px; }
  .vakkop .icoon { width: 104px; height: 104px; }
  .vakkop .icoon svg { width: 58px; height: 58px; }
  .prijzen { font-size: 23px; padding: 20px 28px 24px; }

  .blad { border-radius: 26px; margin: auto; max-width: 600px; padding-bottom: 24px; }
  .regels ol { font-size: 16px; }
}

@media (min-width: 1024px) {
  #bord-scherm {
    max-width: 1140px;
    display: grid;
    grid-template-columns: auto minmax(320px, 420px);
    grid-template-rows: auto auto auto auto 1fr;
    justify-content: center;
    column-gap: 56px;
    align-content: start;
  }
  #bord-scherm .kopbalk { grid-column: 1 / -1; }
  /* Het bord is ongeveer 1,3 keer zo hoog als breed: zo past het altijd in beeld */
  .bord-wrap { grid-column: 1; grid-row: 2 / span 4; width: min(620px, calc((100dvh - 110px) / 1.3)); margin: 4px 0 0; }
  #bord-scherm .beurt-info { grid-column: 2; margin: 28px 0 0; }
  #bord-scherm .extra { grid-column: 2; margin: 16px 0 0; }
  #bord-scherm .knoppen { grid-column: 2; margin: 22px 0 0; max-width: none; }
  #bord-scherm .stand { grid-column: 2; margin: 26px 0 0; align-self: start; gap: 10px; }
  .beurt-info b { font-size: 32px; }
  .beurt-info span { font-size: 17px; }
  .schijf { width: 64px; height: 64px; font-size: 30px; }
  .extra { font-size: 18px; padding: 14px 18px; }
  .stand li { font-size: 17px; }
  .midden { font-size: 30px; }
  .legenda { font-size: 15px; }
  .legenda svg { width: 22px; height: 22px; }
  .pion { width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 18px; }
  .tegel.start { font-size: 14px; }
  .kaartje .woord { font-size: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .pion, .knop { transition: none; }
  .pion.hup, .klok.bijna, .woord.tik { animation: none; }
}