/* Gedeelde stijl voor de klantpagina's en het beheerscherm, in de huisstijl van Bedenkr
   (kleuren, woordmerk en regenboogstreep zoals in etsy/merk.py van de uitnodigingen). */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fredoka-latin.woff2") format("woff2");
}
:root {
  --rood: #ff4d4d; --oranje: #ff9a2e; --geel: #ffd23b; --groen: #4cc96b; --blauw: #3fa3ff; --paars: #a066e6;
  /* Huisstijl Bedenkr */
  --roze: #ff5c8a; --roze-donker: #d63f6c; --zon: #ffc93c; --mint: #1fb5ac; --lila: #9b6bff; --creme: #fff8ef;
  --streep: linear-gradient(90deg, #ff5c8a, #ff9a5c, #ffc93c, #1fb5ac, #5b9bff, #9b6bff);
  --ink: #2b1b4a;
  --muted: #6b6185;
  --card: #ffffff;
  --rand: #ece3f2;
  --fout: #c62828;
  --fout-bg: #ffe8e8;
  --ok: #2e8b57;
  --font: "Fredoka", "Segoe UI Rounded", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  /* Confetti langs de randen, links en rechts gespiegeld (zoals op de Etsy-banner) */
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='720'><circle cx='42' cy='70' r='9' fill='%23ff5c8a'/><rect x='96' y='140' width='28' height='11' rx='5' fill='%23ffc93c' transform='rotate(-32 110 145)'/><circle cx='132' cy='250' r='7' fill='%231fb5ac'/><rect x='30' y='310' width='26' height='11' rx='5' fill='%239b6bff' transform='rotate(36 43 315)'/><circle cx='96' cy='420' r='8' fill='%23ffc93c'/><rect x='40' y='520' width='26' height='11' rx='5' fill='%23ff5c8a' transform='rotate(-18 53 525)'/><circle cx='128' cy='610' r='9' fill='%239b6bff'/><rect x='22' y='665' width='24' height='10' rx='5' fill='%231fb5ac' transform='rotate(28 34 670)'/></svg>") left top / 170px 720px repeat-y,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='720'><circle cx='128' cy='70' r='9' fill='%23ff5c8a'/><rect x='46' y='140' width='28' height='11' rx='5' fill='%23ffc93c' transform='rotate(32 60 145)'/><circle cx='38' cy='250' r='7' fill='%231fb5ac'/><rect x='114' y='310' width='26' height='11' rx='5' fill='%239b6bff' transform='rotate(-36 127 315)'/><circle cx='74' cy='420' r='8' fill='%23ffc93c'/><rect x='104' y='520' width='26' height='11' rx='5' fill='%23ff5c8a' transform='rotate(18 117 525)'/><circle cx='42' cy='610' r='9' fill='%239b6bff'/><rect x='124' y='665' width='24' height='10' rx='5' fill='%231fb5ac' transform='rotate(-28 136 670)'/></svg>") right top / 170px 720px repeat-y,
    var(--creme);
  background-color: var(--creme);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
/* Op smalle schermen is er geen rand over: dan geen confetti achter de tekst */
@media (max-width: 600px) { body { background: var(--creme); } }
a { color: #6a3fd1; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Kopbalk met het woordmerk en de regenboogstreep eronder */
.balk { position: relative; width: 100%; max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.balk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 6px; background: var(--streep); }
.merk { font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -.5px; color: var(--ink); white-space: nowrap; }
.merk .punt { color: var(--roze); }
.merk .sub { margin-left: 8px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.talen { display: flex; gap: 4px; background: rgba(255,255,255,.7); padding: 4px; border-radius: 999px; }
.talen button { border: none; background: none; border-radius: 999px; padding: 6px 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.talen button[aria-pressed="true"] { background: var(--ink); color: #fff; }

main { width: 100%; max-width: 760px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding-block: 24px; }
.kaart {
  width: 100%; max-width: 520px; background: var(--card); border-radius: 28px;
  padding: clamp(22px, 5vw, 36px); box-shadow: 0 16px 40px rgba(30,60,100,.12);
  display: flex; flex-direction: column; gap: 16px; text-align: center;
}
.kaart.breed { max-width: 760px; text-align: left; }
.emo { font-size: 3.4rem; line-height: 1; }
h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; text-wrap: balance; }
h2 { margin: 0; font-size: 1.4rem; }
p { margin: 0; text-wrap: pretty; }
.klein { font-size: .95rem; color: var(--muted); }

.code-veld {
  width: 100%; text-align: center; font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 700; letter-spacing: .12em;
  padding: 14px 12px; border-radius: 16px; border: 3px solid var(--rand); background: #f7fbff; text-transform: uppercase;
}
.code-veld:focus-visible, .veld:focus-visible { outline: 3px solid var(--lila); outline-offset: 2px; }
.knop {
  border: none; border-radius: 999px; padding: 14px 32px; font-size: 1.25rem; font-weight: 700; cursor: pointer;
  background: var(--roze); color: #fff; box-shadow: 0 5px 0 var(--roze-donker); transition: transform .08s;
}
.knop:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--roze-donker); }
.knop:disabled { opacity: .5; cursor: default; }
.knop.licht { background: #f4eefa; color: var(--ink); box-shadow: 0 4px 0 var(--rand); }
.knop.klein { font-size: 1rem; padding: 8px 16px; }
.melding { border-radius: 14px; padding: 12px 14px; font-weight: 600; text-align: left; }
.melding.fout { background: var(--fout-bg); color: var(--fout); }
.melding.info { background: #e8f4ff; color: #1f5fa8; }
.melding[hidden] { display: none; }

.spellen { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.spelkaart {
  background: var(--card); border-radius: 24px; padding: 22px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 28px rgba(30,60,100,.12);
  border-bottom: 8px solid var(--c, var(--blauw)); transition: transform .1s;
}
.spelkaart:active { transform: scale(.98); }
.spelkaart .emo { font-size: 2.8rem; }
.spelkaart h2 { font-size: 1.35rem; }
.spelkaart .speel { margin-top: auto; align-self: flex-start; background: var(--c, var(--blauw)); color: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 700; }

.voet { width: 100%; max-width: 760px; text-align: center; font-size: .85rem; color: var(--muted); padding-top: 8px; }
.voet a { color: inherit; }