/* ==========================================================================
   Café Digisens — speelhal
   Zelfde bruine kroegsfeer als Eurokaarten, maar een eigen, lichtere opzet.
   ========================================================================== */
:root{
  --hout:#2b1a10;
  --hout-diep:#1b1007;
  --hout-licht:#402713;
  --goud:#e8bf63;
  --goud-diep:#b3821f;
  --room:#f3e6cf;
  --room-zacht:#cbb694;
  --rood:#c0392b;
  --groen:#2f6b4f;
  --rand:#c8963c;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --krijt:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  --schaduw:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,205,130,.16), transparent 60%),
    repeating-linear-gradient(90deg, #2e1c11 0 46px, #2a1a0f 46px 92px),
    var(--hout-diep);
  color:var(--room);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--goud)}
.wrap{max-width:1040px; margin:0 auto; padding:26px 18px 70px}

/* ------------------------------------------------------------ uithangbord */
.bord{
  max-width:560px; margin:10px auto 26px; text-align:center; position:relative;
}
.kettingen{display:flex; justify-content:space-between; padding:0 52px; height:16px}
.kettingen span{width:2px; background:linear-gradient(180deg,#8a6524,#3a2413)}
.bordplank{
  background:linear-gradient(180deg,#5c3a22,#2f1d10);
  border:3px solid var(--goud-diep); border-radius:13px;
  padding:16px 18px 14px; box-shadow:var(--schaduw), inset 0 0 40px #0009;
  transform:rotate(-.5deg);
}
.bordplank .boven{font-family:var(--krijt); font-size:20px; color:#e8d3a6; margin-bottom:2px}
.bordplank h1{
  font-family:var(--serif); font-weight:bold; letter-spacing:1.5px;
  font-size:clamp(26px,6vw,42px); margin:0; color:var(--goud);
  text-shadow:0 3px 0 #000, 0 0 26px rgba(232,191,99,.3);
}
.bordplank .onder{font-size:12.5px; letter-spacing:2.4px; color:#d9c7a3; text-transform:uppercase}

/* ---------------------------------------------------------------- panelen */
.paneel{
  background:linear-gradient(180deg, rgba(64,39,19,.92), rgba(35,21,11,.94));
  border:1px solid #c8963c55; border-radius:14px; padding:18px;
  box-shadow:var(--schaduw);
}
.paneel h2{
  font-family:var(--krijt); color:var(--goud); font-size:23px; margin:0 0 10px; font-weight:400;
}
.fijn{font-size:13px; color:var(--room-zacht)}

/* ---------------------------------------------------------------- inloggen */
.inlogrij{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start}
.inlogrij > *{flex:1 1 280px}
label{display:block; font-size:13.5px; color:#e6d4b3; margin:0 0 10px}
input[type=text],input[type=password]{
  width:100%; margin-top:4px; padding:9px 11px; font:inherit; font-size:15px;
  background:#fdf8ec; color:#2b1a10; border:1px solid #00000040; border-radius:8px;
}
input:focus-visible{outline:2px solid var(--goud); outline-offset:1px}
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; font:inherit; font-size:15px; cursor:pointer;
  border-radius:9px; border:1px solid var(--rand); color:var(--room);
  background:linear-gradient(180deg,#5a3a20,#37210f); transition:border-color .15s, transform .08s;
}
.knop:hover{border-color:var(--goud)}
.knop:active{transform:translateY(1px)}
.knop.groot{width:100%; padding:11px; font-size:16px}
.knop.hoofd{
  background:linear-gradient(180deg,#f0cf86,#d3a84e); color:#2b1a10; font-weight:bold;
  border-color:#f7e3b0;
}
.fout{color:#ffb4a8; font-size:14px; min-height:20px; margin:6px 0 0}

/* ------------------------------------------------------------------ tegels */
.tegels{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:22px}
.tegel{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:linear-gradient(180deg, rgba(64,39,19,.95), rgba(30,18,9,.96));
  border:1px solid #c8963c55; border-radius:16px; overflow:hidden;
  box-shadow:var(--schaduw); transition:transform .18s, border-color .18s, box-shadow .18s;
}
.tegel:hover,.tegel:focus-visible{
  transform:translateY(-4px); border-color:var(--goud);
  box-shadow:0 16px 38px rgba(0,0,0,.55), 0 0 0 1px #e8bf6355;
}
.tegel .plaat{display:block; width:100%; height:auto; aspect-ratio:20/9; object-fit:cover; background:#160d06}
.tegel .tekst{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.tegel h3{margin:0; font-size:21px; color:var(--goud); font-weight:bold; letter-spacing:.3px}
.tegel .soort{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--room-zacht);
}
.tegel p{margin:2px 0 0; font-size:14px; color:#e3d5ba; flex:1}
.tegel .voet{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding-top:10px; border-top:1px solid #ffffff14; font-size:13px;
}
.tegel .top{color:var(--room-zacht)}
.tegel .top b{color:var(--goud); font-variant-numeric:tabular-nums}
.tegel .speel{
  padding:6px 13px; border-radius:999px; font-size:13.5px; font-weight:bold;
  background:linear-gradient(180deg,#f0cf86,#d3a84e); color:#2b1a10;
}

/* ------------------------------------------------------------------- balk */
.balk{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:14px; font-size:14px;
}
.balk .wie{color:var(--room-zacht)}
.balk .wie b{color:var(--goud)}
.balk .rechts{display:flex; gap:8px; align-items:center}

.voet-info{margin-top:34px; text-align:center; font-size:12.5px; color:#a98f60}
.voet-info a{color:#d9b877}

@media (max-width:560px){
  .wrap{padding:16px 12px 50px}
  .paneel{padding:14px}
  .tegels{gap:14px}
}