/* Culinair Casino – gedeelde huisstijl (zwart & goud, naar het logo) */
:root{
  --zwart:#070605; --nacht:#100e0b; --kaart:#17140f; --lijn:#3a3020;
  --goud:#e2b457; --goud-licht:#f8e2a0; --goud-donker:#9c7128;
  --creme:#f4ead3; --grijs:#b3a88f;
  --goudverloop:linear-gradient(180deg,#fbe7a6 0%,#e7bb5c 45%,#b98a33 70%,#f1cf7a 100%);
  /* antwoordkleuren: gelijk op groot scherm en telefoon */
  --s1:#0f5a43; --s2:#8e1b2c; --s3:#b8862b; --s4:#1d3f73;
  --r:14px;
}
*{box-sizing:border-box}
html{background:var(--zwart)}
body{margin:0;background:var(--zwart);color:var(--creme);font:400 1.05rem/1.6 "Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.cinzel{font-family:"Cinzel",Georgia,serif;font-weight:700;letter-spacing:.02em;line-height:1.15;margin:0}
a{color:var(--goud)}
img{max-width:100%;height:auto;display:block}
.goud{background:var(--goudverloop);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{font-family:"Cinzel",serif;letter-spacing:.35em;text-transform:uppercase;font-size:.8rem;color:var(--goud)}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:700 1.05rem "Manrope",sans-serif;
  padding:.95em 1.7em;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.knop-goud{background:var(--goudverloop);color:#1c1406;box-shadow:0 6px 24px -8px rgba(226,180,87,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.knop-goud:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(226,180,87,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.knop-rand{background:transparent;color:var(--goud-licht);box-shadow:inset 0 0 0 1.5px var(--goud-donker)}
.knop-rand:hover{box-shadow:inset 0 0 0 1.5px var(--goud);background:rgba(226,180,87,.06)}
.knop:disabled{opacity:.6;cursor:wait;transform:none}
:focus-visible{outline:3px solid var(--goud-licht);outline-offset:3px}

/* invoer */
.veld{width:100%;font:600 1.25rem "Manrope",sans-serif;color:var(--creme);background:#0c0a07;border:1.5px solid var(--lijn);
  border-radius:var(--r);padding:.9em 1em;transition:border-color .15s}
.veld::placeholder{color:#6f6553}
.veld:focus{outline:0;border-color:var(--goud)}
.veld-pin{font-family:"Cinzel",serif;font-size:2rem;text-align:center;letter-spacing:.35em;padding:.55em .5em .55em .85em}
label{display:block;font-size:.85rem;color:var(--grijs);margin:0 0 .4rem .2rem;letter-spacing:.04em}

/* goudomrande kaart */
.paneel{background:linear-gradient(180deg,#1a160f,#0f0d09);border:1px solid var(--lijn);border-radius:20px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(248,226,160,.08),0 30px 60px -30px rgba(0,0,0,.9)}

/* antwoordtegels met kaartsymbool (vorm + kleur, niet alleen kleur) */
.tegel{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:var(--r);
  color:#fff;font-weight:700;border:1.5px solid rgba(248,226,160,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -10px #000;padding:1rem 1rem 1rem 3.2rem}
.tegel::before{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1.8em;line-height:1;color:rgba(255,255,255,.9)}
.t1{background:linear-gradient(160deg,#157a5b,var(--s1))}.t1::before{content:"♠"}
.t2{background:linear-gradient(160deg,#b1263b,var(--s2))}.t2::before{content:"♥"}
.t3{background:linear-gradient(160deg,#d6a444,var(--s3));color:#1c1406}.t3::before{content:"♦";color:rgba(28,20,6,.85)}
.t4{background:linear-gradient(160deg,#2a5898,var(--s4))}.t4::before{content:"♣"}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}