/* ==========================================================================
   Eurokaarten - Café Digisens
   Bruine kroeg: eikenhout, koperen lamp, groen laken, bierviltjes, krijtbord.
   ========================================================================== */

:root{
  --wood-1:#3a2416; --wood-2:#2b1a10; --wood-3:#4a2f1c; --wood-4:#1c1109;
  --brass:#c8963c; --brass-2:#8a6524; --brass-hi:#f0d089;
  --felt:#1f5137; --felt-2:#173d29; --felt-hi:#2a6b48;
  --cream:#f3e6cf; --ink:#241609; --paper:#faf3e2;
  --red:#b3251f; --gold:#e8bf63;
  --shadow:0 18px 40px rgba(0,0,0,.55);
  --serif:'Lora',"Iowan Old Style",Georgia,serif;
  --slab:'Alfa Slab One',"Rockwell",Georgia,serif;
  --chalk:'Caveat',"Bradley Hand",cursive;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--cream); font-family:var(--serif); font-size:16px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,200,110,.16), transparent 60%),
    repeating-linear-gradient(93deg, rgba(0,0,0,.16) 0 2px, rgba(255,255,255,.015) 2px 5px, rgba(0,0,0,0) 5px 26px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, rgba(0,0,0,0) 1px 118px),
    linear-gradient(160deg, var(--wood-3), var(--wood-1) 45%, var(--wood-4));
  background-attachment:fixed;
  overflow-x:hidden;
}
body::after{ /* vignette */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(90% 70% at 50% 30%, transparent 40%, rgba(0,0,0,.55) 100%);
}
.lamp{
  position:fixed; top:-190px; left:50%; transform:translateX(-50%); width:520px; height:420px;
  pointer-events:none; z-index:0;
  background:radial-gradient(50% 55% at 50% 45%, rgba(255,214,140,.35), rgba(255,190,110,.10) 55%, transparent 70%);
  filter:blur(2px);
}
.smoke{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(40% 30% at 20% 15%, rgba(255,255,255,.05), transparent 70%),
             radial-gradient(35% 25% at 85% 25%, rgba(255,255,255,.04), transparent 70%);
}

/* -------------------------------------------------------------- schermen */
.screen{display:none; position:relative; z-index:2; min-height:100%}
.screen.active{display:block}

/* ------------------------------------------------------------------ bar */
.bar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  justify-content:space-between; padding:10px 16px;
  background:linear-gradient(180deg, rgba(58,36,22,.96), rgba(31,19,11,.92));
  border-bottom:2px solid var(--brass-2); box-shadow:0 6px 18px rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
}
.bar-title{font-family:var(--slab); font-size:20px; color:var(--gold); letter-spacing:.5px; text-shadow:0 2px 0 #000}
.bar-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.whoami{font-style:italic; opacity:.85}
.code{font-family:var(--slab); color:var(--cream); background:#000a; padding:2px 10px; border-radius:6px; border:1px solid var(--brass-2); letter-spacing:3px}
.pill{background:#0006; border:1px solid var(--brass-2); border-radius:999px; padding:3px 12px; font-size:14px}

/* --------------------------------------------------------------- knoppen */
.btn{
  font-family:var(--serif); font-weight:600; font-size:15px; cursor:pointer;
  color:#2a1a0c; padding:9px 16px; border-radius:8px;
  border:1px solid #00000055; border-bottom-width:3px;
  background:linear-gradient(180deg,#e6cfa4,#c9a56f);
  box-shadow:0 3px 0 #00000040, inset 0 1px 0 #fff6;
  transition:transform .08s, filter .15s;
}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:active:not(:disabled){transform:translateY(2px); border-bottom-width:1px}
.btn:disabled{opacity:.4; cursor:default; filter:grayscale(.4)}
.btn-primary{background:linear-gradient(180deg,#f0c96e,#c8963c); color:#3a2208}
.btn-knock{background:linear-gradient(180deg,#d9564a,#a3271d); color:#ffeede; text-shadow:0 1px 0 #0006}
.btn-ghost{background:#ffffff14; color:var(--cream); border:1px solid var(--brass-2); box-shadow:none; border-bottom-width:1px}
.btn-small{padding:6px 10px; font-size:14px}
.btn.big{width:100%; font-size:18px; padding:13px}

/* --------------------------------------------------------------- panelen */
.panel{
  background:linear-gradient(180deg, rgba(74,47,28,.96), rgba(40,25,15,.96));
  border:1px solid #00000066; border-radius:14px; padding:18px;
  box-shadow:var(--shadow), inset 0 1px 0 #ffffff14;
  position:relative;
}
.panel::before{
  content:""; position:absolute; inset:6px; border:1px solid #c8963c33; border-radius:9px; pointer-events:none;
}
.panel h2{font-family:var(--slab); font-size:20px; color:var(--gold); margin:0 0 12px; text-shadow:0 2px 0 #0008}
.panel h3{font-family:var(--slab); font-size:15px; color:#e6cfa4; margin:18px 0 8px; letter-spacing:.4px}
label{display:block; margin:10px 0; font-size:14px; color:#e9d9bd}
label.cb{display:flex; align-items:center; gap:8px}
input[type=text],input[type=password],input[type=email],input[type=number],select{
  width:100%; margin-top:5px; padding:10px 12px; font-family:var(--serif); font-size:16px;
  color:#2a1a0c; background:linear-gradient(180deg,#fdf6e6,#e8dcc2);
  border:1px solid #00000055; border-radius:7px; box-shadow:inset 0 2px 5px #00000030;
}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--brass)}
.err{color:#ffb3ab; min-height:1.2em; margin:8px 0 0; font-size:14px}
.muted{opacity:.7}
.fineprint{font-size:12px; opacity:.6; margin-top:10px; line-height:1.5}

/* ------------------------------------------------------------ pub sign */
.pubsign{max-width:520px; margin:36px auto 6px; text-align:center; position:relative}
.pubsign-chains{display:flex; justify-content:space-between; width:64%; margin:0 auto -6px; height:34px}
.pubsign-chains span{width:3px; background:repeating-linear-gradient(180deg,var(--brass) 0 4px, #6b4a18 4px 8px)}
.pubsign-board{
  background:linear-gradient(180deg,#5c3a22,#2f1d10); border:3px solid var(--brass-2); border-radius:12px;
  padding:20px 18px 18px; box-shadow:var(--shadow), inset 0 0 40px #0009;
  transform:rotate(-.5deg);
}
.pubsign-top{font-family:var(--chalk); font-size:22px; color:#e8d3a6}
.pubsign-board h1{font-family:var(--slab); font-size:clamp(34px,9vw,54px); margin:2px 0 4px; color:var(--gold);
  text-shadow:0 3px 0 #000, 0 0 26px rgba(232,191,99,.35); letter-spacing:1px}
.pubsign-sub{font-size:13px; letter-spacing:2px; color:#d9c7a3; text-transform:uppercase}
/* het logo op het uithangbord */
.logo-h1{margin:4px 0 2px; line-height:0}
.logo-img{
  display:block; width:100%; max-width:520px; height:auto; margin:0 auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
@media (max-width:520px){ .logo-img{max-width:100%} }
/* discreet merkje over de tafel */
.merkje{
  position:absolute; right:10px; bottom:6px; z-index:11; pointer-events:none;
  font-family:var(--serif); font-size:11px; letter-spacing:.6px;
  color:#e8bf63; opacity:.34; text-shadow:0 1px 2px #000c;
}
@media (orientation:landscape){ .merkje{right:calc(10px + env(safe-area-inset-right))} }
@media (max-height:480px){ .merkje{font-size:9.5px; bottom:3px} }
.auth-panel{max-width:420px; margin:22px auto 60px}
.tabs{display:flex; gap:6px; margin-bottom:6px}
.tab{flex:1; padding:9px; cursor:pointer; font-family:var(--serif); font-size:15px; color:#e6d4b3;
  background:#00000040; border:1px solid #c8963c44; border-radius:8px 8px 0 0}
.tab.active{background:#c8963c22; color:var(--gold); border-bottom-color:transparent}
.tabpane{display:none} .tabpane.active{display:block}

/* ------------------------------------------------------------ foyer */
.home-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:18px; padding:18px; max-width:1200px; margin:0 auto}
@media(max-width:900px){.home-grid{grid-template-columns:minmax(0,1fr)}}
.joinrow{display:flex; gap:8px; margin-top:12px}
.codeinput{text-transform:uppercase; letter-spacing:6px; text-align:center; font-family:var(--slab); max-width:150px}
.roomlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.roomlist li{background:#0000004d; border:1px solid #c8963c33; border-radius:9px; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px}
.roomlist .rc{font-family:var(--slab); color:var(--gold); letter-spacing:2px}

/* krijtbord */
.chalkboard{
  background:linear-gradient(180deg,#22292b,#161b1c);
  border:10px solid #4a2f1c; box-shadow:var(--shadow), inset 0 0 60px #0008;
}
.chalkboard::before{border-color:#ffffff12}
.chalkboard h2{font-family:var(--chalk); font-size:30px; color:#fff; text-shadow:0 0 8px #fff3; letter-spacing:1px}
.chalkboard .fineprint{font-family:var(--chalk); font-size:15px; opacity:.75}
.table-scroll{overflow-x:auto}
.scores{width:100%; border-collapse:collapse; font-family:var(--chalk); font-size:19px; color:#f4f7f5; white-space:nowrap}
.scores th{text-align:left; font-weight:400; opacity:.7; border-bottom:1px dashed #ffffff44; padding:5px 8px}
.scores td{padding:5px 8px; border-bottom:1px dotted #ffffff22}
.scores tr:nth-child(1) td{color:#ffe9a8}

/* ------------------------------------------------------------ lobby */
.lobby{display:none; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; padding:18px; max-width:1100px; margin:0 auto}
.lobby.on{display:grid}
@media(max-width:820px){.lobby.on{grid-template-columns:minmax(0,1fr)}}
.seatlist{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:8px}
.seatlist li{display:flex; align-items:center; gap:10px; background:#00000044; border:1px solid #c8963c33;
  border-radius:10px; padding:8px 10px}
.seatlist .nm{flex:1; font-weight:600}
.seatlist .tagbot{font-size:12px; background:#0008; border:1px solid #c8963c55; padding:2px 7px; border-radius:999px; opacity:.85}
.howto{margin:0; padding-left:22px; line-height:1.65; font-size:15px}
.howto b{color:#f0d89d}
.coinword{color:var(--gold)}
.settings{border-top:1px dashed #c8963c44; border-bottom:1px dashed #c8963c44; padding:6px 0 14px; margin:12px 0}

/* ------------------------------------------------------------ spel */
.game{display:none; padding:10px 12px 30px; max-width:1250px; margin:0 auto}
.game.on{display:block}

/* tegenstanders met karakters */
.opponents{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:6px 0 2px}
.opp{
  position:relative; width:132px; padding:8px 8px 6px; border-radius:12px;
  background:linear-gradient(180deg,#00000055,#00000022); border:1px solid #ffffff10;
  transition:box-shadow .3s, transform .3s;
}
.opp.turn{box-shadow:0 0 0 2px var(--brass), 0 0 26px rgba(232,191,99,.4); transform:translateY(-3px);
  background:linear-gradient(180deg,#c8963c22,#00000033)}
.opp.dead{opacity:.42; filter:grayscale(.85)}
.opp .char{display:block; width:100%; height:auto}
.opp .oname{text-align:center; font-size:13px; font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.opp .ometa{display:flex; align-items:center; justify-content:center; gap:5px; font-size:12px; opacity:.9}
.opp .minifan{display:flex; justify-content:center; height:34px; margin-top:-6px}
.opp .minifan .mc{
  width:20px; height:29px; margin:0 -6px; border-radius:3px;
  background:repeating-linear-gradient(45deg,#7d1f1a 0 3px,#5d1512 3px 6px); border:1px solid #2a0b09;
  box-shadow:0 2px 3px #0007;
}
.bubble{
  position:absolute; left:50%; top:-8px; transform:translate(-50%,-100%); z-index:20;
  background:var(--paper); color:#2a1a0c; font-size:13px; padding:6px 10px; border-radius:10px;
  box-shadow:0 6px 14px #0008; max-width:190px; text-align:center; animation:pop .25s ease-out;
}
.bubble::after{content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--paper); border-bottom:0}
@keyframes pop{from{transform:translate(-50%,-90%) scale(.8); opacity:0}}

/* laken */
.felt{
  margin:12px auto; padding:14px; border-radius:200px/60px;
  background:linear-gradient(180deg,#5c3a22,#3a2416); border:1px solid #0008;
  box-shadow:var(--shadow), inset 0 1px 0 #ffffff18;
}
.felt-inner{
  position:relative; border-radius:180px/54px; padding:18px 16px 22px; min-height:250px;
  background:
    radial-gradient(70% 60% at 50% 20%, rgba(255,225,160,.14), transparent 60%),
    radial-gradient(120% 90% at 50% 50%, var(--felt-hi), var(--felt) 45%, var(--felt-2) 100%);
  box-shadow:inset 0 0 60px #00000088, inset 0 2px 0 #ffffff10;
}
.piles{display:flex; gap:26px; justify-content:center; align-items:flex-start}
.pile{text-align:center}
.pilelabel{font-family:var(--chalk); font-size:16px; opacity:.65; margin-bottom:2px}
.stock{position:relative; cursor:pointer}
.stock .count{position:absolute; bottom:-6px; right:-8px; background:#000c; border:1px solid var(--brass-2);
  border-radius:999px; font-size:12px; padding:1px 7px}
.stock:hover .card.back{transform:translateY(-4px)}
.stock.hot .card.back{box-shadow:0 0 0 3px var(--gold), 0 10px 18px #0008}
.beermat{
  padding:10px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #e7dcc0, #cbbb95 70%, #a3906c);
  box-shadow:0 6px 14px #0007, inset 0 0 0 4px #ffffff40, inset 0 0 0 5px #00000018;
}
.discard{min-width:78px; min-height:110px; display:flex; align-items:center; justify-content:center; cursor:pointer}
.discard.hot .card{box-shadow:0 0 0 3px var(--gold), 0 10px 18px #0008}

.melds{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:16px; min-height:20px}
.meld{
  background:#00000038; border:1px dashed #ffffff2e; border-radius:10px; padding:6px 8px 4px;
  transition:box-shadow .2s;
}
.meld.can{border-color:var(--gold); box-shadow:0 0 12px #e8bf6355; cursor:pointer}
.meld .mrow{display:flex}
.meld .mrow .card{margin-right:-26px; transform:scale(.72); transform-origin:left center}
.meld .mrow .card:last-child{margin-right:0}
.meld .mown{font-family:var(--chalk); font-size:14px; opacity:.7; text-align:center; margin-top:-2px}
.turnbanner{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%); font-family:var(--chalk);
  font-size:19px; color:#ffeec4; text-shadow:0 2px 6px #000; white-space:nowrap;
}

/* -------------------------------------------------------------- kaarten */
.card{
  position:relative; width:78px; height:110px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(160deg,#fffdf6,#efe6d2);
  border:1px solid #00000055; box-shadow:0 6px 12px #0006, inset 0 1px 0 #fff;
  color:#1a1a1a; font-family:"Iowan Old Style",Georgia,serif; user-select:none;
}
.card .ci{position:absolute; font-weight:700; line-height:1; letter-spacing:-.5px}
.card .ci.tl{top:5px; left:6px; font-size:19px}
.card .ci.br{bottom:5px; right:6px; font-size:19px; transform:rotate(180deg)}
.card .cs{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:38px; opacity:.92}
.card.red{color:var(--red)}
.card.back{
  background:
    radial-gradient(circle at 50% 50%, #a8342b 0 18%, transparent 19%),
    repeating-linear-gradient(45deg,#7d1f1a 0 6px,#5d1512 6px 12px);
  border:1px solid #2a0b09; box-shadow:0 6px 12px #0007, inset 0 0 0 3px #e8bf6344;
  transition:transform .15s;
}

/* mijn hand: gefanned, alsof je ze vasthoudt */
.myarea{margin-top:6px}
.myinfo{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:0 6px 2px}
.myname{font-family:var(--slab); font-size:17px; color:var(--gold)}
.myhint{font-family:var(--chalk); font-size:17px; color:#ffeec4; text-align:right}
.hand-wrap{
  position:relative; height:190px; display:flex; align-items:flex-end; justify-content:center;
  margin:0 auto; max-width:760px;
}
.thumb{ /* duim/hand-silhouet achter de kaarten */
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  width:250px; height:96px; border-radius:120px 120px 40px 40px;
  background:linear-gradient(180deg,#c98f63,#9a6641); box-shadow:0 -6px 18px #0007, inset 0 3px 8px #ffffff30;
  z-index:1;
}
.thumb::after{
  content:""; position:absolute; right:-14px; top:14px; width:52px; height:74px; border-radius:30px;
  background:linear-gradient(140deg,#d59a6c,#a06a44); transform:rotate(18deg); box-shadow:0 4px 10px #0006;
}
.hand{position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:center; height:100%; width:100%}
.hand .card{
  position:absolute; bottom:8px; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .18s;
  transform-origin:50% 130%;
}
.hand .card:hover{filter:brightness(1.04)}
.hand .card.sel{box-shadow:0 0 0 3px var(--gold), 0 14px 22px #0009}
.hand .card.just{animation:dealin .45s ease-out}
@keyframes dealin{from{transform:translateY(60px) rotate(20deg) scale(.8); opacity:0}}

.actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px}

/* vliegende kaart */
.flyer{position:fixed; z-index:60; pointer-events:none; transition:transform .55s cubic-bezier(.35,.05,.3,1), opacity .3s}

/* munten */
.coins{display:inline-flex; gap:3px; vertical-align:middle}
.coin{
  width:19px; height:19px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; color:#5a3c10; font-weight:700;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #d9a441 60%, #a67a26);
  box-shadow:0 2px 3px #0007, inset 0 -1px 2px #00000040;
}
.coin.spent{background:#00000055; color:#ffffff30; box-shadow:inset 0 1px 2px #000}
.coin.bok{background:radial-gradient(circle at 35% 30%,#f3d9b0,#b98a4e 60%,#7a5628); font-size:12px}

/* zijbalk */
.sidebar{
  position:fixed; right:0; top:52px; bottom:0; width:300px; z-index:40; transform:translateX(101%);
  transition:transform .25s; display:flex; flex-direction:column;
  background:linear-gradient(180deg,rgba(40,25,15,.98),rgba(24,15,9,.98));
  border-left:2px solid var(--brass-2); box-shadow:-10px 0 30px #0008;
}
.sidebar.on{transform:none}
.sidetabs{display:flex}
.stab{flex:1; padding:10px; background:#00000055; color:#e6d4b3; border:0; border-bottom:1px solid var(--brass-2);
  font-family:var(--serif); font-size:15px; cursor:pointer}
.stab.active{background:#c8963c22; color:var(--gold)}
.sidepane{display:none; flex:1; overflow-y:auto; padding:10px 12px}
.sidepane.active{display:flex; flex-direction:column}
.sidepane ul{list-style:none; margin:0; padding:0; font-size:14px; line-height:1.5}
.sidepane li{padding:5px 0; border-bottom:1px dotted #ffffff18; opacity:.9}
#side-chat{justify-content:space-between}
#chatform{display:flex; gap:6px; padding-top:8px}
#chatform input{flex:1}
.sidetoggle{
  position:fixed; right:12px; bottom:14px; z-index:45; width:46px; height:46px; border-radius:50%;
  font-size:20px; color:#2a1a0c; border:1px solid #0007; cursor:pointer;
  background:linear-gradient(180deg,#e6cfa4,#c9a56f); box-shadow:0 6px 14px #0008;
}

/* ------------------------------------------------------------ overlays */
.overlay{
  position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:16px;
  background:radial-gradient(70% 60% at 50% 40%, rgba(0,0,0,.6), rgba(0,0,0,.86));
  backdrop-filter:blur(2px);
}
.overlay.on{display:flex}
.overlay-card{
  width:min(700px,96vw); max-height:92vh; overflow-y:auto; padding:22px;
  background:linear-gradient(180deg,#5c3a22,#2b1a10); border:2px solid var(--brass-2); border-radius:16px;
  box-shadow:var(--shadow); animation:rise .3s ease-out;
}
@keyframes rise{from{transform:translateY(18px) scale(.97); opacity:0}}
.overlay-card h2{font-family:var(--slab); color:var(--gold); margin:0 0 6px; font-size:24px; text-shadow:0 2px 0 #0008}
.ov-sub{font-family:var(--chalk); font-size:20px; color:#ffeec4; margin:0 0 14px}
.ov-actions{display:flex; gap:10px; align-items:center; margin-top:16px; flex-wrap:wrap}
.results{display:flex; flex-direction:column; gap:8px}
.rrow{display:flex; align-items:center; gap:10px; background:#00000044; border:1px solid #ffffff14;
  border-radius:10px; padding:8px 10px; flex-wrap:wrap}
.rrow.lost{border-color:#d9564a88; background:#d9564a1a}
.rrow.best{border-color:#e8bf6388; background:#e8bf631a}
.rrow .rn{font-weight:600; min-width:120px}
.rrow .rp{font-family:var(--slab); color:var(--gold); min-width:64px}
.rrow .rh{display:flex; gap:3px; flex-wrap:wrap; flex:1}
.rrow .rmini{
  display:inline-block; min-width:30px; text-align:center; font-style:normal;
  font-size:13px; font-weight:700; color:#1a1a1a; padding:2px 4px; border-radius:4px;
  background:linear-gradient(180deg,#fffdf5,#eee3c9); border:1px solid #00000040;
}
.rrow .rmini.rood{color:var(--red)}
.rrow .rmini.joker{background:linear-gradient(180deg,#f6e2c2,#dcbf92); color:#7a2f28}
.rrow .rt{font-family:var(--chalk); font-size:17px; opacity:.9; white-space:nowrap}
.trophy{font-size:52px; text-align:center}
.rules-body{font-size:15px; line-height:1.65}
.rules-body h3{font-family:var(--slab); font-size:16px; color:#f0d89d; margin:16px 0 6px}
.rules-body ul{margin:0; padding-left:20px}
.rules-body b{color:#f5e2b8}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:90; opacity:0;
  background:var(--paper); color:#2a1a0c; padding:10px 16px; border-radius:10px; font-size:15px;
  box-shadow:0 10px 24px #0009; transition:opacity .2s, transform .2s; pointer-events:none; max-width:90vw;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ------------------------------------------------------------ mobiel */
@media(max-width:720px){
  .card{width:62px; height:88px}
  .card .ci.tl,.card .ci.br{font-size:15px}
  .card .cs{font-size:30px}
  .hand-wrap{height:158px}
  .thumb{width:190px; height:76px}
  .opp{width:104px}
  .felt-inner{padding:12px 8px 20px; min-height:210px}
  .piles{gap:16px}
  .sidebar{width:88vw}
  .bar-title{font-size:17px}
  .btn{padding:8px 12px; font-size:14px}
}

/* ==========================================================================
   3D-tafel, wachtkamer, beurtmelding, mail-meldingen
   ========================================================================== */

.ok{color:#bfe6b0; min-height:1.2em; margin:8px 0 0; font-size:14px}

.banner{
  display:none; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:10px 16px 0; padding:10px 14px; border-radius:10px; font-size:14px;
  background:linear-gradient(180deg,#7a5c2e,#4a3618); border:1px solid var(--brass-2);
}
.banner.on{display:flex}

.watchpill{background:#3d5a4533; border-color:#7fbf9a55}
.watchlist{list-style:none; margin:0; padding:0; font-size:14px}
.watchlist li{padding:3px 0; border-bottom:1px dotted #ffffff18}

/* foyer: tafellijst */
.roomlist li{flex-wrap:wrap}
.rl-main{display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:0}
.rl-who{font-weight:600}
.rl-meta{font-size:13px}

/* wachtkamer */
.seatlist li.empty{border-style:dashed; opacity:.6}
.charmini{width:34px; height:34px; display:block; flex:0 0 auto; border-radius:6px; overflow:hidden}
.charmini svg{width:100%; height:100%; display:block}

/* speelveld */
.stage-wrap{position:relative; border-radius:16px; overflow:hidden;
  border:1px solid #00000066; box-shadow:var(--shadow), inset 0 1px 0 #ffffff14;
  background:#140c06;
  height:min(62vh, 560px); min-height:280px}
.stage3d{position:absolute; inset:0}
.stage3d canvas{display:block; width:100%; height:100%}
.stage-fallback{position:absolute; inset:0; overflow:auto; padding:8px}
.stage-fallback .felt{margin:6px auto}

.hud-top{position:absolute; left:0; right:0; top:0; display:flex; justify-content:center; pointer-events:none}
.hud-turn{
  margin-top:8px; padding:6px 16px; border-radius:999px; font-size:15px;
  background:rgba(15,9,4,.72); border:1px solid #c8963c66; color:#ffeec4;
  box-shadow:0 4px 14px #0008; max-width:92%; text-align:center;
}
.hud-turn b{color:var(--gold)}
.hud-piles{position:absolute; left:0; right:0; bottom:8px; display:flex; gap:10px; justify-content:center}
.hud-piles .btn{box-shadow:0 4px 12px #0008}
.hud-piles .btn.reddish span{color:#a3271d}

.turnalert{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .25s;
}
.turnalert.on{opacity:1}
.turnalert span{
  font-family:var(--slab); font-size:clamp(22px,5vw,44px); color:#fff3d0;
  padding:14px 30px; border-radius:14px; letter-spacing:1px;
  background:radial-gradient(circle at 50% 40%, rgba(200,150,60,.95), rgba(120,80,20,.9));
  border:2px solid #ffe7ab; box-shadow:0 0 50px rgba(255,200,110,.6), 0 12px 30px #000a;
  animation:tstamp .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes tstamp{from{transform:scale(.55) rotate(-7deg); opacity:0}}

.infofab{
  position:fixed; left:12px; bottom:14px; z-index:45; width:44px; height:44px; border-radius:50%;
  font-size:22px; color:#2a1a0c; border:1px solid #0007; cursor:pointer;
  background:linear-gradient(180deg,#e6cfa4,#c9a56f); box-shadow:0 6px 14px #0008;
}
.myarea.watching .hand-wrap,.myarea.watching .thumb{opacity:.35}

/* draai je toestel */
.rotate-hint{
  position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#3a2416,#1c1109); text-align:center; padding:24px;
}
.rotate-inner .phone{font-size:64px; animation:tilt 1.6s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
.rotate-hint h2{font-family:var(--slab); color:var(--gold); margin:12px 0 6px}
/* Alleen tijdens het spelen dringt de draaihint aan; inloggen en de wachtkamer
   mogen rechtop. */
@media (max-width:900px) and (orientation:portrait){
  body.spelen .rotate-hint{display:flex}
}

/* liggend op mobiel: compacter */
@media (max-height:520px){
  .bar{padding:5px 10px}
  .bar-title{font-size:15px}
  .stage-wrap{height:min(52vh,320px); min-height:180px}
  .hand-wrap{height:118px}
  .thumb{width:150px; height:58px}
  .card{width:52px; height:74px}
  .card .ci.tl,.card .ci.br{font-size:12px}
  .card .cs{font-size:24px}
  .myinfo{padding:0 4px}
  .myname{font-size:14px}
  .myhint{font-size:14px}
  .actions{margin-top:6px; gap:6px}
  .btn{padding:6px 10px; font-size:13px}
  .hud-turn{font-size:13px; margin-top:4px; padding:4px 12px}
  .infofab,.sidetoggle{width:38px; height:38px; font-size:18px; bottom:8px}
}

/* met 3D-tafel: de eigen kaarten zitten in de scène, dus geen platte hand */
body.has3d .hand-wrap{display:none}
body.has3d .stage-wrap{height:min(76vh,760px)}
body.has3d .myinfo{padding:6px 8px 0}
@media (max-height:520px){
  body.has3d .stage-wrap{height:min(74vh,420px)}
}

/* gereedschap boven de tafel */
.hud-tools{position:absolute; right:8px; top:8px; display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.hud-tools .btn{box-shadow:0 4px 12px #0008}

/* venster: wat ligt er op tafel */
.tablepiles{display:flex; gap:22px; flex-wrap:wrap; align-items:flex-end; margin-bottom:6px}
.tp{text-align:center}
.tplabel{font-family:var(--chalk); font-size:16px; opacity:.75; margin-bottom:4px}
.tpmeta{font-size:12px; opacity:.7; margin-top:4px}
.tsec{font-family:var(--slab); font-size:15px; color:#e6cfa4; margin:16px 0 8px}
.tablemelds{display:flex; flex-direction:column; gap:12px}
.tgroup{background:#00000038; border:1px solid #ffffff14; border-radius:10px; padding:8px 10px}
.tgname{font-family:var(--chalk); font-size:18px; color:#ffeec4; margin-bottom:4px}
.tmeld{display:inline-block; margin:4px 10px 4px 0; padding:6px; border-radius:9px;
  border:1px dashed #ffffff26; transition:box-shadow .2s, border-color .2s}
.tmeld.can{border-color:var(--gold); box-shadow:0 0 14px #e8bf6355; cursor:pointer; background:#e8bf631a}
.tmcards{display:flex}
.tmcards .card{margin-right:-30px; transform:scale(.8); transform-origin:left center}
.tmcards .card:last-child{margin-right:0}
.tmtype{font-size:12px; opacity:.75; margin-top:2px}
@media (max-height:520px){
  .hud-tools .btn{padding:4px 8px; font-size:12px}
}

/* gereedschap voor je eigen hand */
.handtools{display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:8px}
.htlabel{font-family:var(--chalk); font-size:16px; opacity:.75}
@media (max-height:520px){
  .handtools{margin-top:4px; gap:4px}
  .handtools .btn{padding:4px 8px; font-size:12px}
  .htlabel{font-size:13px}
}

/* ==========================================================================
   Lay-out die altijd past: tafel vult de ruimte, balk onderaan blijft staan
   ========================================================================== */
.game.on{
  display:flex; flex-direction:column; gap:6px;
  height:calc(100vh - 58px); height:calc(100dvh - 58px);
  padding:6px 10px 8px; max-width:1400px; margin:0 auto;
}
.stage-wrap{flex:1 1 auto; min-height:0; height:auto}
body.has3d .stage-wrap{height:auto}
.myarea{flex:0 0 auto; margin-top:0}
body.has3d .myarea{display:flex; flex-direction:column; gap:2px}
.myarea .actions{margin-top:6px}
#game-err{margin:0; font-size:13px; text-align:center}
@media (max-height:520px){
  .game.on{height:calc(100vh - var(--barh)); height:calc(100dvh - var(--barh)); padding:4px 6px 6px; gap:3px}
}

/* beurtklok */
.hud-clock{
  position:absolute; left:10px; top:10px; transform:none;
  display:flex; align-items:center; gap:8px; padding:3px 10px; border-radius:999px;
  background:rgba(15,9,4,.7); border:1px solid #c8963c44; font-size:13px; color:#e9d9bd;
  min-width:160px; pointer-events:none;
}
.hud-clock.mine{border-color:var(--gold); box-shadow:0 0 16px rgba(232,191,99,.35)}
.hud-clock .clockbar{
  height:6px; flex:1; border-radius:3px; background:linear-gradient(90deg,#8fbf7a,#e8bf63);
  transition:width .6s linear;
}
.hud-clock .clockbar.urgent{background:linear-gradient(90deg,#d9564a,#ffb03a)}

/* open gaan-venster */
.knockhand{display:flex; gap:2px; margin:10px 0 14px; flex-wrap:wrap}
.knockhand .card{transform:scale(.8); transform-origin:left center; margin-right:-14px}

/* ==========================================================================
   Lage schermen (telefoon liggend): knoppen over de tafel, tafel vult alles
   ========================================================================== */
@media (max-height:560px){
  .game.on{display:block; position:relative; padding:4px 6px 4px}
  .stage-wrap{position:absolute; inset:4px 6px}
  body.has3d .stage-wrap{height:auto}
  .myarea{
    position:absolute; left:6px; right:6px; bottom:4px; z-index:20; margin:0;
    background:linear-gradient(180deg, rgba(20,12,6,0), rgba(20,12,6,.72) 40%);
    border-radius:0 0 14px 14px; padding:2px 6px 4px; pointer-events:none;
  }
  .myarea .actions,.myarea .handtools,.myarea .myinfo{pointer-events:auto}
  .myinfo{padding:0 2px}
  .myname{font-size:13px}
  .myhint{font-size:13px}
  .handtools{margin-top:2px}
  .actions{margin-top:3px}
  .hud-piles{left:6px; right:auto; top:34px; bottom:auto; flex-direction:column; align-items:flex-start}
  .hud-tools{top:6px; right:6px}
  #game-err{display:none}
  .sidetoggle{bottom:6px; right:6px}
  .infofab{bottom:6px; left:6px}
}

/* combinatiepaneel */
.meldlist{display:flex; flex-direction:column; gap:5px; max-height:min(52vh,340px); overflow-y:auto}
/* Compacte keuzelijst: één regel per combinatie. */
.meldlist .mopt{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:7px 11px; border-radius:9px; font:inherit; color:#f3e6cf;
  background:rgba(15,9,4,.55); border:1px solid #c8963c44;
  transition:border-color .15s, background .15s;
}
.meldlist .mopt:hover,.meldlist .mopt:focus-visible{border-color:var(--gold); background:rgba(80,55,15,.7)}
.meldlist .mocards{display:flex; gap:3px; flex:1; flex-wrap:wrap}
.meldlist .momini{
  display:inline-block; min-width:30px; text-align:center; font-style:normal;
  font-size:14px; font-weight:700; color:#1a1a1a; padding:2px 5px; border-radius:4px;
  background:linear-gradient(180deg,#fffdf5,#eee3c9); border:1px solid #00000040;
}
.meldlist .momini.rood{color:var(--red)}
.meldlist .momini.joker{background:linear-gradient(180deg,#f6e2c2,#dcbf92); color:#7a2f28}
.meldlist .motype{font-family:var(--chalk); font-size:16px; opacity:.85; white-space:nowrap}
.meldlist .mopts{
  font-family:var(--slab); font-size:15px; color:var(--gold); min-width:42px; text-align:right;
  font-variant-numeric:tabular-nums;
}
@media (max-height:560px){
  .meldlist{max-height:44vh; gap:4px}
  .meldlist .mopt{padding:4px 8px; gap:7px}
  .meldlist .momini{min-width:25px; font-size:12px; padding:1px 3px}
  .meldlist .motype{font-size:14px}
}
.mopt{display:flex; align-items:center; gap:14px; padding:8px 10px; border-radius:10px; cursor:pointer;
  background:#00000038; border:1px solid #ffffff1c; transition:box-shadow .15s, border-color .15s}
.mopt:hover{border-color:var(--gold); box-shadow:0 0 14px #e8bf6344; background:#e8bf6316}
.mocards{display:flex}
.mocards .card{margin-right:-26px; transform:scale(.72); transform-origin:left center}
.mocards .card:last-child{margin-right:0}
.motype{font-family:var(--chalk); font-size:17px; opacity:.85}

/* ==========================================================================
   Vaste handstrook onderaan: alle kaarten altijd leesbaar in één overzicht
   ========================================================================== */
body.has3d .hand-wrap{display:flex}
body.has3d .thumb{display:none}
.hand-wrap{height:auto; min-height:104px; max-width:100%; padding-top:6px}
.hand{height:104px}
.hand .card.strip{
  position:absolute; bottom:0; height:104px; cursor:grab;
  transition:transform .14s cubic-bezier(.2,.9,.3,1.2), box-shadow .14s;
  transform-origin:50% 100%;
  box-shadow:0 6px 14px #0008, inset 0 1px 0 #fff;
}
.hand .card.strip.sel{box-shadow:0 0 0 3px var(--gold), 0 14px 22px #0009}
.hand .card.strip.dragging{cursor:grabbing; z-index:99 !important; box-shadow:0 14px 26px #000a}
.hand .card.strip .ci.tl{font-size:17px; top:4px; left:5px}
.hand .card.strip .ci.br{font-size:17px; bottom:4px; right:5px}
.hand .card.strip .cs{font-size:34px}
@media (max-width:780px){
  .hand-wrap{min-height:82px}
  .hand{height:82px}
  .hand .card.strip{height:82px}
  .hand .card.strip .ci.tl,.hand .card.strip .ci.br{font-size:13px}
  .hand .card.strip .cs{font-size:26px}
}
@media (max-height:560px){
  .hand-wrap{min-height:74px; padding-top:2px}
  .hand{height:74px}
  .hand .card.strip{height:74px}
}

/* slepen naar de tafel */
.hand.overtable .card.dragging{box-shadow:0 0 0 3px var(--gold), 0 18px 30px #000b}
.hand .card.dragging{transition:none}

/* plek aangeven tijdens slepen */
.hand .card.strip.shifted{box-shadow:0 0 0 3px #8fbf7a, 0 8px 16px #0009; filter:brightness(1.08)}
.hand{touch-action:none}

/* volledig scherm: geen marges verspillen */
:fullscreen .bar{padding:4px 10px}
:fullscreen .game.on{height:100vh; height:100dvh}
.rotate-inner .btn{margin-top:14px}

/* compacte uitslag met vaste knop onderaan */
#ov-round .overlay-card{padding:16px 18px 0; display:flex; flex-direction:column}
#ov-round .results{gap:5px}
#ov-round .rrow{padding:4px 8px; gap:8px}
#ov-round .rrow .rn{min-width:110px; font-size:14px}
#ov-round .rrow .rp{min-width:52px; font-size:15px}
#ov-round .rrow .rh{gap:3px}
#ov-round .rrow .rt{font-size:15px}
#ov-round .ov-sub{font-size:17px; margin-bottom:8px}
#ov-round h2{font-size:20px}
#ov-round .ov-actions{
  position:sticky; bottom:0; margin:10px -18px 0; padding:10px 18px;
  background:linear-gradient(180deg, rgba(43,26,16,0), rgba(43,26,16,.96) 40%);
  border-radius:0 0 14px 14px;
}

/* strook met de combinaties die op tafel liggen */
.hud-melds{
  position:absolute; left:8px; top:66px; display:flex; flex-direction:column; gap:5px;
  max-height:calc(100% - 140px); overflow-y:auto; z-index:12; max-width:44%;
}
.hmeld{
  display:flex; align-items:center; gap:6px; padding:3px 7px; border-radius:8px; cursor:pointer;
  background:rgba(15,9,4,.72); border:1px solid #c8963c40; transition:box-shadow .2s, border-color .2s;
}
.hmeld.can{border-color:var(--gold); box-shadow:0 0 12px #e8bf6366; background:rgba(80,55,15,.8)}
.hmeld.aangewezen{
  border-color:#ffe7ab; background:rgba(120,85,25,.92);
  box-shadow:0 0 0 2px #ffe7ab88, 0 0 20px #e8bf6399;
  animation:meldWijs .45s ease-out 2;
}
@keyframes meldWijs{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
.hmeld .hmc{display:flex; gap:2px}
.hmeld .mini{
  display:inline-block; min-width:26px; text-align:center; font-size:12px; font-weight:700;
  color:#1a1a1a; background:linear-gradient(180deg,#fffdf5,#eee3c9); border-radius:3px; padding:2px 3px;
  border:1px solid #00000040;
}
.hmeld .mini.red{color:var(--red)}
.hmeld .hmo{font-family:var(--chalk); font-size:14px; opacity:.8; white-space:nowrap}
@media (max-height:560px){
  /* Lager beginnen dan de naamplaatjes: die horen bovenaan te blijven staan,
     ook als er kaarten op tafel komen. */
  .hud-melds{top:104px; left:calc(6px + env(safe-area-inset-left)); max-width:36%}
  .hmeld{padding:2px 5px}
  .hmeld .mini{min-width:22px; font-size:11px}
  .hmeld .hmo{display:none}
}

/* kaartrug in 2D gelijk aan de 3D-tafel (groen met gouden euro) */
.card.back{
  background:
    radial-gradient(circle at 50% 50%, #f3ead2 0 17%, transparent 18%),
    repeating-linear-gradient(45deg,#2f6b4f 0 6px,#3f8763 6px 12px);
  border:1px solid #1d4433;
  box-shadow:0 6px 12px #0007, inset 0 0 0 3px #fdf8ec;
}
.opp .minifan .mc{
  background:repeating-linear-gradient(45deg,#2f6b4f 0 3px,#3f8763 3px 6px);
  border-color:#1d4433;
}

/* ==========================================================================
   Scherpe namen en labels over de 3D-tafel (geprojecteerd, nooit onleesbaar)
   ========================================================================== */
.labels3d{position:absolute; inset:0; pointer-events:none; z-index:14; overflow:hidden}
.labels3d .lb{
  position:absolute; left:0; top:0; white-space:nowrap; transform-origin:50% 100%;
  font-family:var(--serif); color:#f6ead2; text-shadow:0 2px 4px #000;
}
.labels3d .lb-seat{
  display:flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;
  background:linear-gradient(180deg, rgba(38,24,12,.94), rgba(20,12,6,.94));
  border:1px solid #c8963c66; box-shadow:0 4px 12px #0009;
  font-size:15px; margin-top:-6px;
}
.labels3d .lb-seat b{font-weight:600; letter-spacing:.2px}
.labels3d .lb-seat.turn{border-color:var(--gold); box-shadow:0 0 16px rgba(232,191,99,.5), 0 4px 12px #0009}
.labels3d .lb-seat.dead{opacity:.45; filter:grayscale(1)}
.labels3d .lbcoins{display:inline-flex; gap:2px}
.labels3d .lbc{
  width:15px; height:15px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-style:normal; color:#5a3c10; font-weight:700;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #d9a441 60%, #a67a26);
  box-shadow:0 1px 2px #0008;
}
.labels3d .lbc.bok{background:radial-gradient(circle at 35% 30%,#f3d9b0,#b98a4e 60%,#7a5628); font-size:10px}
.labels3d .lbcards{
  font-family:var(--chalk); font-size:15px; opacity:.75; border-left:1px solid #ffffff2e; padding-left:7px;
}
.labels3d .lb-pile,.labels3d .lb-meld{
  padding:2px 9px; border-radius:7px; font-family:var(--chalk); font-size:16px;
  background:rgba(16,10,5,.7); border:1px solid #c8963c40;
}
.labels3d .lb-meld{font-size:15px; color:#ffeec4}
@media (max-height:560px){
  .labels3d .lb-seat{font-size:13px; padding:2px 8px; gap:5px}
  .labels3d .lbcards{font-size:13px}
  .labels3d .lb-pile,.labels3d .lb-meld{font-size:13px; padding:1px 7px}
}

/* naamkaartje op tafel: iets compacter en met kaartteller als badge */
.labels3d .lb-seat{margin-top:0; padding:3px 10px; font-size:14px}
.labels3d .lb-seat .lbcards{
  border-left:none; padding-left:0; min-width:18px; text-align:center;
  background:#00000055; border:1px solid #ffffff26; border-radius:6px; font-size:13px; padding:0 5px;
}

/* banner: als app op het beginscherm zetten */
.banner-install{background:linear-gradient(180deg,#3d5a45,#24361f); border-color:#7fbf9a55}
.banner-install .btn-ghost{color:#dff0e2}

/* beurtmelding en gereedschap altijd vóór de geprojecteerde labels */
.hud-top{z-index:22}
.hud-turn{position:relative; z-index:22}
.hud-tools{z-index:22}
.hud-piles{z-index:22}
.labels3d{z-index:14}

/* de grote beurtmelding hoort vóór alles op de tafel */
.turnalert{z-index:40}
.turnalert.on ~ .labels3d,.labels3d{transition:opacity .2s}

/* complete combinaties: van tafel, alleen nog in het overzicht */
.hmeld.vol{opacity:.55}
.hmeld.vol .volbadge{
  font-family:var(--serif); font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  background:#00000066; border:1px solid #ffffff26; border-radius:4px; padding:0 4px; margin-left:3px;
}

/* uitlegblok op het inlogscherm (ook voor zoekmachines) */
.intro{max-width:640px; margin:0 auto 60px}
.intro p{font-size:15px; line-height:1.7; margin:0 0 12px}
.intro a{color:var(--gold)}

/* ==========================================================================
   Speelveld schermvullend: de tafel vult het beeld en de knoppen liggen erin
   ========================================================================== */
:root{ --ctrlh:214px; }

.game.on{
  display:block; position:relative; margin:0; padding:0; max-width:none;
  /* rekenen met de gemeten balkhoogte: bij een smal venster wordt die hoger
     en zouden de knoppen anders onder het scherm vallen */
  height:calc(100vh - var(--barh)); height:calc(100dvh - var(--barh));
  overflow:hidden;
}
.stage-wrap,body.has3d .stage-wrap{
  position:absolute; inset:0; height:auto; min-height:0;
  border:0; border-radius:0; box-shadow:none; background:#140c06;
}
.stage3d canvas{width:100%; height:100%}

/* bedieningslaag over de onderkant van de tafel */
.myarea,body.has3d .myarea{
  position:absolute; left:0; right:0; bottom:0; z-index:26; margin:0;
  padding:4px 14px 8px; display:flex; flex-direction:column; gap:2px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(16,10,4,0), rgba(16,10,4,.42) 34%, rgba(16,10,4,.86));
}
.myarea .myinfo,.myarea .hand-wrap,.myarea .handtools,.myarea .actions,.myarea .err{pointer-events:auto}
.myinfo{padding:0 4px}
.myname,.myhint{text-shadow:0 2px 6px #000}
.handtools{margin-top:2px}
.actions{margin-top:4px}
#game-err{margin:0; text-align:center; font-size:13px}

/* pak-knoppen net boven je hand */
.hud-piles{bottom:calc(var(--ctrlh) + 4px)}
.hud-melds{max-height:calc(100% - var(--ctrlh) - 70px)}
.sidetoggle,.infofab{bottom:calc(var(--ctrlh) + 6px)}

/* op grote schermen mogen de kaarten flink groter */
@media (min-width:1500px){
  :root{ --ctrlh:238px; }
  .hand-wrap{min-height:126px}
  .hand{height:126px}
  .hand .card.strip{height:126px}
  .hand .card.strip .ci.tl,.hand .card.strip .ci.br{font-size:20px}
  .hand .card.strip .cs{font-size:42px}
  .myname{font-size:19px}
  .myhint{font-size:19px}
  .btn{font-size:16px}
}

/* telefoon liggend: compacter, knoppen blijven in beeld */
@media (max-height:560px){
  :root{ --ctrlh:158px; }
  .game.on{height:calc(100vh - var(--barh)); height:calc(100dvh - var(--barh))}
  .myarea,body.has3d .myarea{padding:2px 8px 4px}
  .hud-melds{max-height:calc(100% - var(--ctrlh) - 40px)}
}

/* ronde knopjes naar de onderhoeken, naamregel er netjes tussen */
.sidetoggle,.infofab{bottom:10px; z-index:30}
.infofab{left:12px}
.sidetoggle{right:12px}
.myinfo{padding:0 66px}
@media (max-height:560px){
  .sidetoggle,.infofab{bottom:6px; width:34px; height:34px; font-size:16px}
  .myinfo{padding:0 46px}
}

/* telefoon liggend: pak-knoppen weer gewoon boven je hand, klok compact */
@media (max-height:560px){
  .hud-piles{
    left:0; right:0; top:auto; bottom:calc(var(--ctrlh) + 2px);
    flex-direction:row; align-items:center; justify-content:center;
  }
  .hud-clock{min-width:120px; font-size:12px; padding:2px 8px; top:6px;
             left:calc(6px + env(safe-area-inset-left))}
  .hud-clock .clockbar{height:5px}
}

/* chatknop met teller */
.chatfab{
  position:fixed; right:66px; bottom:10px; z-index:30; width:44px; height:44px; border-radius:50%;
  font-size:20px; color:#2a1a0c; border:1px solid #0007; cursor:pointer;
  background:linear-gradient(180deg,#e6cfa4,#c9a56f); box-shadow:0 6px 14px #0008;
}
.chatbadge{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; border-radius:999px;
  background:#c0392b; color:#fff; font-size:11px; font-family:var(--serif); font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:1px solid #00000055; box-shadow:0 2px 5px #0007;
}
.chatnote{
  margin:4px 0 0; font-size:13px; color:#ffcf9a; background:#00000055;
  border:1px solid #c8963c44; border-radius:8px; padding:5px 8px;
}
#chatform input:disabled{opacity:.5}
@media (max-height:560px){
  .chatfab{right:46px; bottom:6px; width:34px; height:34px; font-size:16px}
}

/* hint naar de chatknop */
.chathint{
  position:fixed; right:112px; bottom:16px; z-index:31; pointer-events:none;
  background:linear-gradient(180deg,#3d5a45,#24361f); color:#e9f5ec;
  border:1px solid #7fbf9a66; border-radius:999px; padding:5px 12px;
  font-size:14px; white-space:nowrap; box-shadow:0 6px 16px #0009;
  animation:hintin .4s ease-out;
}
.chathint .pijl{display:inline-block; margin-left:4px; animation:wijs 1.1s ease-in-out infinite}
@keyframes hintin{from{opacity:0; transform:translateX(10px)}}
@keyframes wijs{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (max-height:560px){
  .chathint{right:86px; bottom:10px; font-size:12px; padding:3px 9px}
}

/* gedeactiveerd account: duidelijk zichtbaar */
.banner.urgent{background:linear-gradient(180deg,#7a2f28,#4a1a16); border-color:#d9564a88}

/* emote-knoppen */
/* Reactieknoppen zitten achter één rond knopje, zodat ze de kaarten op tafel
   niet bedekken. */
.emotefab{
  position:absolute; left:8px; bottom:calc(var(--ctrlh) + 6px); z-index:25;
  width:38px; height:38px; border-radius:50%; font-size:19px; line-height:1; cursor:pointer;
  background:rgba(20,12,6,.72); border:1px solid #c8963c55; color:#fff; box-shadow:0 4px 10px #0008;
}
.emotefab:hover{border-color:var(--gold)}
.emotefab.aan{background:#c8963c44; border-color:var(--gold)}
.emotes{
  position:absolute; left:52px; bottom:calc(var(--ctrlh) + 6px); z-index:24;
  display:none; flex-direction:row; gap:5px;
}
.emotes.open{display:flex}
.emobtn{
  width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer; line-height:1;
  background:rgba(20,12,6,.72); border:1px solid #c8963c55; color:#fff;
  box-shadow:0 4px 10px #0008; transition:transform .12s, box-shadow .12s;
}
.emobtn:hover{transform:scale(1.1); border-color:var(--gold)}
.emobtn.gebruikt{transform:scale(.85); box-shadow:0 0 14px #e8bf63aa}

/* Echte tekstballon boven het naamkaartje: goed te zien, maar hij verdwijnt
   vanzelf en je kunt er niet mee spammen (server laat er één per vier seconden door). */
.labels3d .lbzeg{
  position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%);
  white-space:nowrap; max-width:min(260px, 42vw); overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(180deg,#fffaf0,#efe0c0); color:#2b1a10;
  font-family:var(--chalk); font-size:17px; line-height:1.15;
  padding:5px 12px; border-radius:13px;
  border:1px solid #00000033; box-shadow:0 5px 14px #000a;
  animation:zegPop .3s cubic-bezier(.2,1.55,.4,1) both;
  pointer-events:none;
}
.labels3d .lbzeg::after{
  content:''; position:absolute; left:50%; top:100%; margin-left:-7px;
  border:7px solid transparent; border-top-color:#efe0c0;
  filter:drop-shadow(0 2px 1px #0006);
}
@keyframes zegPop{
  0%{opacity:0; transform:translateX(-50%) translateY(8px) scale(.7)}
  70%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.04)}
  100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
}
@media (max-height:560px){
  .emotes{left:calc(6px + env(safe-area-inset-left)); bottom:calc(var(--ctrlh) + 34px); gap:3px}
  .emobtn{width:30px; height:30px; font-size:15px}
  .labels3d .lbzeg{font-size:14px; padding:3px 9px}
}

/* verborgen is verborgen (classes met display: overschrijven [hidden] anders) */
[hidden]{display:none !important}

/* ==========================================================================
   Passend op de telefoon: geen scrollen aan tafel, compact inlogscherm
   ========================================================================== */
:root{ --barh:52px; }

body.aan-tafel{ overflow:hidden; height:100vh; height:100dvh }
.game.on{ height:calc(100vh - var(--barh)); height:calc(100dvh - var(--barh)) }

/* veilige zones (notch / homebalk) */
.bar{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)) }
.myarea,body.has3d .myarea{ padding-bottom:max(8px, env(safe-area-inset-bottom)) }
.infofab{ left:max(12px, env(safe-area-inset-left)) }
.sidetoggle{ right:max(12px, env(safe-area-inset-right)) }

/* knoppen op het inlogscherm */
.authknoppen{display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap}

/* uitlegblok: op de telefoon ingeklapt achter een knop */
@media (max-width:820px){
  .intro{display:none}
  .intro.open{display:block}
}

/* compacte balk op smalle schermen: nooit meer afbreken */
@media (max-width:820px){
  .bar{padding-top:6px; padding-bottom:6px; gap:6px; flex-wrap:nowrap}
  .bar-title{font-size:15px; white-space:nowrap}
  .bar-right{gap:5px; flex-wrap:nowrap}
  .bar .btn{padding:5px 8px; font-size:13px; white-space:nowrap}
  .code{padding:1px 7px; letter-spacing:2px}
  .pill{padding:2px 8px; font-size:12px}
  #t-round{display:none}
}

/* inlogscherm past op één telefoonscherm */
@media (max-height:760px){
  .pubsign{margin:14px auto 2px}
  .pubsign-chains{height:18px}
  .pubsign-board{padding:12px 14px 12px}
  .pubsign-top{font-size:17px}
  .pubsign-board h1{font-size:clamp(26px,7vw,38px)}
  .pubsign-sub{font-size:11px; letter-spacing:1px}
  .auth-panel{margin:12px auto 24px; padding:14px}
  .auth-panel label{margin:7px 0; font-size:13px}
  .auth-panel input{padding:8px 10px; font-size:15px}
  .auth-panel .btn.big{padding:10px; font-size:16px}
  .tab{padding:7px; font-size:14px}
  .fineprint{font-size:11px; margin-top:7px}
}
@media (max-height:520px){
  .pubsign{margin:8px auto 0}
  .pubsign-chains{display:none}
  .pubsign-board h1{font-size:26px}
  .pubsign-top{font-size:14px}
  .pubsign-sub{display:none}
  .auth-panel{margin:8px auto 16px; padding:10px 12px}
  .auth-panel label{margin:5px 0}
  .auth-panel .fineprint{display:none}
}


/* ------------------------------------------------- wachtkamer op de telefoon */
/* In de wachtkamer mag de pagina gewoon schuiven; alleen aan tafel staat alles vast. */
body.aan-tafel:not(.spelen){overflow:auto; height:auto}
.lobbypanel{display:flex; flex-direction:column; min-height:0}
.lobby-scroll{flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch}
body.aan-tafel #lobby.on{align-content:start; padding-bottom:calc(18px + env(safe-area-inset-bottom))}
/* Liggend op een telefoon is er weinig hoogte: dan schuift alleen het middenstuk
   en blijft 'Delen maar!' altijd in beeld. */
@media (max-height:620px){
  body.aan-tafel #lobby.on{
    height:calc(100dvh - var(--barh));
    overflow:hidden; grid-template-columns:minmax(0,1fr); gap:8px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  #lobby .lobby-scroll{overflow-y:auto}
  #lobby .uitlegpanel{display:none}
  #lobby .lobbypanel{max-height:100%; padding:10px 12px}
  #lobby h2{font-size:19px; margin:0 0 3px}
  #lobby h3{font-size:14px; margin:6px 0 2px}
  #lobby .muted{font-size:12px; margin:0 0 6px}
  #lobby .seatlist{gap:5px; margin-bottom:6px}
  #lobby .seatlist li{padding:4px 8px; font-size:13px}
  #lobby .settings label{margin:4px 0; font-size:12px}
  #lobby .settings select{padding:4px 6px; font-size:13px}
  #lobby #btn-start{padding:9px; font-size:16px; margin-top:8px}
  #lobby #btn-rules3{padding:7px; font-size:13px; margin-top:5px}
}
@media (max-width:820px){
  body.aan-tafel #lobby.on{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------- wie is er online */
.onlinelist{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px;
  max-height:190px; overflow-y:auto}
.onlinelist li{display:flex; align-items:center; gap:8px; background:#00000038;
  border:1px solid #c8963c26; border-radius:9px; padding:5px 9px; font-size:14px}
.onlinelist .nm{font-weight:600}
.onlinelist .rl-meta{margin-left:auto; font-size:12px}
.onlinelist .btn-small{margin-left:6px}
.onlinelist .tagbot{margin-left:6px}
.onlinelist .charmini{flex:0 0 auto}
.banner-invite{background:linear-gradient(180deg,#3d2f14,#241a09); border-color:#e0b955aa}
.banner-invite b{color:#ffe6a6}
@media (max-height:620px){
  #lobby .onlinelist{max-height:120px}
  #lobby .onlinelist li{padding:3px 7px; font-size:12px}
}


/* --------------------------------------- installatietip onderaan (mobiel) */
.installbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px calc(12px + env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom))
          calc(12px + env(safe-area-inset-left));
  background:linear-gradient(180deg,#3a2a12f2,#1d1407f7); border-top:1px solid #d8ae5b66;
  color:#f3e6cc; font-size:13.5px; box-shadow:0 -6px 18px #0007;
}
.installbar.on{display:flex}
.installbar .ib-icon{font-size:20px; line-height:1}
.installbar span#install-text{flex:1; min-width:150px; line-height:1.35}
.installbar .btn-small{white-space:nowrap}
body.spelen .installbar{display:none}

/* ------------------------------------------------------ vriendensterren */
.sterbtn{background:none; border:0; color:#c8963c88; font-size:19px; line-height:1; cursor:pointer;
  padding:2px 4px; margin-left:4px}
.sterbtn.aan{color:#ffd76a; text-shadow:0 0 6px #ffcf5f66}
.sterbtn:hover{color:#ffe6a6}
.onlinelist.lang{max-height:none}
.onlinelist li.uit{opacity:.55}
#ov-online .overlay-card{max-width:560px}
#ov-online h3{margin:12px 0 6px; font-size:16px}
#btn-invite-all{margin:0 0 8px}

/* ---------------------------- inlogscherm rechtop op een telefoon */
@media (max-width:560px){
  .pubsign{margin:8px auto 0}
  .pubsign-chains{height:12px}
  .pubsign-board{padding:9px 12px 9px}
  .pubsign-top{font-size:14px}
  .pubsign-board h1{font-size:clamp(22px,8vw,32px)}
  .pubsign-sub{font-size:10px; letter-spacing:1px}
  .auth-panel{margin:10px auto 10px; padding:11px 12px}
  .auth-panel label{margin:6px 0; font-size:13px}
  .auth-panel input{padding:8px 10px; font-size:15px}
  .auth-panel .btn.big{padding:10px; font-size:16px}
  .tab{padding:7px 6px; font-size:13.5px}
  .authknoppen{margin-top:8px}
  .authknoppen .btn{font-size:12.5px; padding:6px 9px}
  .auth-panel .fineprint{font-size:11px; margin-top:6px}
  body.tipaan:not(.spelen) .screen{padding-bottom:var(--tiph,62px); min-height:calc(100% - var(--tiph,62px))}
  .installbar{font-size:12.5px; padding-top:7px}
  .installbar span#install-text{min-width:120px}
  .installbar .btn-small{padding:5px 8px; font-size:12px}
}

/* ------------------------------- foyer op een smalle telefoon (rechtop) */
@media (max-width:560px){
  #scr-home .bar{flex-wrap:wrap; row-gap:5px}
  #scr-home .bar .whoami{display:none}
  #scr-home .bar #btn-install{display:none}     /* de tipbalk onderaan doet dit al */
  #scr-home .bar-right{flex:1 1 auto; justify-content:flex-end}
  #scr-home .bar .btn{font-size:12.5px; padding:5px 8px}
  .home-grid{padding:10px; gap:10px}
  .home-grid .panel{padding:12px}
  .joinrow{flex-wrap:wrap}
  .codeinput{flex:1 1 120px; min-width:0}
  .scores{font-size:15px}
  .scores th,.scores td{padding:4px 5px}
  .banner{flex-wrap:wrap; font-size:13px; padding:9px 10px}
  .roomlist li{flex-wrap:wrap}
}


/* rasters mogen nooit breder worden dan het scherm */
.home-grid > *, .lobby > *{min-width:0}
.table-scroll{min-width:0; max-width:100%}

/* de tipbalk mag de wachtkamer nooit bedekken */
@media (max-height:620px){
  body.tipaan.aan-tafel #lobby.on{height:calc(100dvh - var(--barh) - var(--tiph,52px))}
}

/* een open venster (regels, tafel, uitleg) mag niet achter de tipbalk vallen */
body:has(.overlay.on) .installbar{display:none}

/* vraag bij dubbel inloggen */
.sessievraag{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
  margin-top:6px; font-size:13.5px; color:#f0d89d; text-align:center}
.sessievraag span{flex:1 1 100%}

/* ---------------------------------------- sluitkruisjes en veilige zone */
.overlay-card{position:relative}
.ovclose{
  position:absolute; top:8px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:#00000055; border:1px solid var(--brass-2); color:#f0d89d; font-size:15px; line-height:1;
}
.ovclose:hover{background:#c8963c33; color:#fff}
.overlay-card h2{padding-right:40px}
.sideclose{
  flex:0 0 auto; width:44px; background:#00000055; border:0; border-bottom:1px solid var(--brass-2);
  color:#f0d89d; font-size:15px; cursor:pointer;
}
.sideclose:hover{background:#c8963c33; color:#fff}

/* iPhone met eiland: balk en knoppen onder de inkeping houden */
.bar{padding-top:calc(8px + env(safe-area-inset-top))}
.sidebar{top:calc(52px + env(safe-area-inset-top))}
@media (orientation:portrait){
  .bar{padding-top:calc(10px + env(safe-area-inset-top))}
  .pubsign{margin-top:calc(8px + env(safe-area-inset-top))}
  .installbar{padding-bottom:calc(9px + env(safe-area-inset-bottom))}
}
@media (orientation:landscape){
  /* liggend zit het eiland (iPhone) aan de zijkant: alles wat links of rechts
     tegen de rand staat schuift mee, zodat er niets achter verdwijnt. */
  .bar{padding-left:calc(12px + env(safe-area-inset-left)); padding-right:calc(12px + env(safe-area-inset-right))}
  .hud-tools,.sidetoggle,.infofab,.chatfab{margin-right:env(safe-area-inset-right)}
  #emotes,.emotefab{margin-left:env(safe-area-inset-left)}
  .hud-melds{left:calc(8px + env(safe-area-inset-left))}
  .hud-clock{left:calc(8px + env(safe-area-inset-left))}
  .labels3d{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
}

/* telefoon liggend: kleinere handkaarten, meer tafel in beeld */
@media (max-height:480px){
  .hand-wrap{min-height:62px; padding-top:2px}
  .hand{height:62px}
  .hand .card.strip{height:62px}
  .hand .card.strip .ci.tl,.hand .card.strip .ci.br{font-size:11px}
  .hand .card.strip .cs{font-size:21px}
  .handtools{margin-top:2px; gap:3px}
  .handtools .btn{padding:3px 6px; font-size:11px}
  .htlabel{display:none}
  .actions{margin-top:4px; gap:5px}
  .actions .btn{padding:5px 9px; font-size:12.5px}
  .myinfo{font-size:12px}
  .bar{padding-top:calc(4px + env(safe-area-inset-top)); padding-bottom:4px}
  .bar-title{font-size:13px}
  .bar .btn{padding:4px 7px; font-size:12px}
}

/* liggend op een kleine telefoon: bedieningslaag echt laag houden */
@media (max-height:480px){
  :root{ --ctrlh:128px; }
  .game.on{height:calc(100vh - var(--barh)); height:calc(100dvh - var(--barh))}
  .myarea,body.has3d .myarea{padding:1px 6px 3px}
  .hud-melds{max-height:calc(100% - var(--ctrlh) - 32px)}
  .sidetoggle,.infofab,.chatfab{bottom:4px; width:30px; height:30px; font-size:14px}
  .chatfab{width:34px; height:34px}
  .myinfo{padding:0 40px; font-size:11.5px}
}

/* tafels waar iemand wacht vallen op */
.roomlist li.wacht{border-color:#e0b95588; background:#3a2a1244; box-shadow:0 0 0 1px #e0b95533}
.wachtlabel{display:inline-block; font-size:11.5px; color:#ffe6a6; background:#00000055;
  border:1px solid #c8963c66; border-radius:999px; padding:1px 8px; margin-left:6px; white-space:nowrap}


/* de rij reacties op kleine schermen iets kleiner */
@media (max-height:480px){
  .emotefab{width:30px; height:30px; font-size:15px; bottom:calc(var(--ctrlh) + 4px)}
  .emotes{left:calc(42px + env(safe-area-inset-left)); bottom:calc(var(--ctrlh) + 4px); gap:4px}
  .emobtn{width:30px; height:30px; font-size:15px}
}

/* de stapels op de platte tafel zijn zelf de knop */
.stock,.discard{cursor:pointer}
.stock.hot,.discard.hot{box-shadow:0 0 0 3px var(--gold), 0 10px 18px #0008}

/* ==========================================================================
   Vasthouden zonder tekstselectie
   Lang op een kaart drukken mocht op de telefoon geen tekst selecteren en geen
   iOS-menu (kopiëren/delen) openen. Alles wat je vastpakt staat daarom op
   user-select:none; alleen echte tekstvelden en leesbare vensters blijven
   selecteerbaar.
   ========================================================================== */
.card,.hand,.hand-wrap,.myarea,.myinfo,.stage-wrap,.stage3d,.stage3d canvas,
.labels3d,.turnalert,.emotes,.emotefab,.emobtn,.hud-tools,.hud-piles,.hud-melds,
.bar,.bar-title,.bar-right,.coins,.coin,.opp,.piles,.stock,.discard,.meld,
.btn,.tab,.stab,.chatfab,.sidetoggle,.infofab,.seatlist,.onlinelist,.roomlist{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.card,.hand .card,.hand .card.strip,.stage3d canvas{
  touch-action:none; -webkit-user-drag:none;
}
.card img,.card span{pointer-events:none}

/* tekst die je wél moet kunnen selecteren */
input,textarea,select,.rules-body,.overlay-card p,.overlay-card li,.overlay-card h2,.overlay-card h3,
.sidepane,#loglist,#chatlist,.intro,.scores,.fineprint,.code{
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
}

/* jokerkaart */
.card.joker{
  color:#7a2f28;
  background:linear-gradient(160deg,#fffdf6,#f6e7c9);
  box-shadow:0 6px 12px #0006, inset 0 0 0 2px #c8963c55, inset 0 1px 0 #fff;
}
.card.joker .cs{font-size:34px; opacity:1}
.card.joker .jokerwoord{
  position:absolute; left:0; right:0; bottom:16%; text-align:center;
  font-family:var(--chalk); font-size:13px; letter-spacing:1px; color:#7a2f28;
}
.hand .card.strip.joker .cs{font-size:30px}
@media (max-height:480px){ .card.joker .jokerwoord{display:none} }

/* tafel delen */
.deelrij{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 10px}
.btn-wa{background:linear-gradient(180deg,#3ea55f,#256b3d); border-color:#7ddaa0aa; color:#fff;
  text-decoration:none; display:inline-flex; align-items:center}
.btn-wa:hover{background:linear-gradient(180deg,#49b96c,#2c7b47)}

/* ===================== nieuwe onderdelen: gast, poppetje, lijsten ======= */
.proefrij{margin:14px auto 0; max-width:420px; text-align:center}
.proefrij .btn.big{width:100%}
.proefrij .fineprint{margin-top:6px}
.banner-gast{background:linear-gradient(180deg,#2f3f2a,#1b2418); border-color:#8fbf7a88}


/* poppetje kiezen */
.poprij{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.popvoor{flex:0 0 128px; width:128px; border-radius:12px; overflow:hidden;
  border:1px solid var(--brass-2); background:#1b120a}
.popvoor svg{display:block; width:100%; height:auto}
.popknoppen{flex:1 1 200px; display:flex; flex-direction:column; gap:5px}
.popkeuze{display:flex; align-items:center; gap:6px; font-size:14px}
.popkeuze span{flex:1; color:#e6d4b3}
.popgeslacht .gknop{min-width:62px; opacity:.62}
.popgeslacht .gknop.actief{
  opacity:1; border-color:var(--gold); color:#2b1a10;
  background:linear-gradient(180deg,#f0cf86,#d3a84e); font-weight:700;
}
#pop-bewaar{margin-top:10px}

/* week/altijd-tabs op het bord */
.lijsttabs{display:flex; gap:6px; margin:0 0 8px}
.ltab{flex:0 0 auto; padding:5px 12px; border-radius:999px; cursor:pointer;
  background:#00000055; border:1px solid #ffffff22; color:#e6d4b3;
  font-family:var(--chalk); font-size:17px}
.ltab.active{background:#c8963c33; border-color:var(--gold); color:#fff}
.scores .titel{display:inline-block; margin-left:6px; font-family:var(--chalk); font-size:14px;
  color:#ffe6a6; opacity:.9}

/* jukeboxknop */
.bar .btn.actief{background:#c8963c44; border-color:var(--gold); color:#fff}

/* bokje-melding */
.turnalert.bokje span{background:linear-gradient(180deg,#4a3a12,#2a1e08); border-color:#ffd76a}

/* lange namen: het pillenlabel boven het hoofd blijft hanteerbaar */
.labels3d .lb-seat b{
  max-width:min(300px, 34vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:820px){ .labels3d .lb-seat b{max-width:min(190px, 40vw)} }
.scores td:nth-child(2){max-width:260px; overflow:hidden; text-overflow:ellipsis}


/* ==========================================================================
   Oefenpotje: uitleg die meeloopt met wat je doet
   ========================================================================== */
.btn-oefen{
  width:100%; margin-top:8px;
  background:linear-gradient(180deg,#2f5a3d,#1d3b28); border-color:#5f9c72;
  color:#e9f5e9;
}
.btn-oefen:hover{border-color:#8fd0a0; box-shadow:0 0 14px #5f9c7255}
.oefenrij{margin-top:10px}

.coach{
  /* net boven de eigen kaarten, zodat de uitleg de hand niet bedekt */
  position:fixed; z-index:70; left:50%; bottom:calc(var(--ctrlh, 214px) + 10px);
  transform:translateX(-50%);
  width:min(560px, calc(100vw - 24px));
  background:linear-gradient(180deg, rgba(46,29,16,.97), rgba(28,17,9,.97));
  border:1px solid var(--gold); border-radius:14px; padding:12px 15px 11px;
  box-shadow:0 10px 34px #000c, 0 0 0 1px #00000060;
  padding-bottom:calc(11px + env(safe-area-inset-bottom));
}
.coach-kop{
  font-family:var(--chalk); font-size:16px; color:var(--gold);
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
.coach-stap{
  font-family:var(--serif); font-size:12px; color:#2b1a10; font-weight:700;
  background:var(--gold); border-radius:999px; padding:1px 8px;
}
.coach-tekst{margin:0 0 9px; font-size:14.5px; line-height:1.42; color:#f3e6cf}
.coach-knoppen{display:flex; gap:8px; justify-content:flex-end}

/* het onderdeel waar de uitleg over gaat licht op */
.oefenwijs{
  position:relative; border-color:#ffe7ab !important;
  box-shadow:0 0 0 2px #ffe7ab, 0 0 22px #e8bf63aa !important;
  animation:oefenPols 1.3s ease-in-out infinite;
}
@keyframes oefenPols{
  0%,100%{box-shadow:0 0 0 2px #ffe7ab, 0 0 14px #e8bf6377}
  50%{box-shadow:0 0 0 3px #ffe7ab, 0 0 26px #e8bf63cc}
}
@media (max-height:560px){
  .coach{bottom:calc(var(--ctrlh, 158px) + 6px); padding:7px 11px;
         width:min(560px, calc(100vw - 16px))}
  .coach-tekst{font-size:13px; margin-bottom:6px}
  .coach-kop{font-size:14px; margin-bottom:2px}
  /* Op een laag scherm staat de uitleg altijd bovenaan: de hele tafel en de
     eigen kaarten blijven vrij, zodat je kunt tikken én slepen. */
  body.oefent .coach{
    top:calc(var(--barh) + 4px); bottom:auto;
    width:min(620px, calc(100vw - 12px));
  }
  body.oefent .hud-turn{display:none}
}
/* Het venster zelf vangt geen tikken op; alleen de knoppen erin. Zo kun je
   altijd de tafel eronder gebruiken. */
.coach{pointer-events:none}
.coach-knoppen{pointer-events:auto}
.coach-knoppen .btn{pointer-events:auto}


/* Zachte donkere randen om het speelveld: geeft diepte en houdt de blik in
   het midden, waar de kaarten liggen. */
.stage-wrap::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:10;
  background:radial-gradient(ellipse at 50% 46%,
    rgba(0,0,0,0) 40%, rgba(0,0,0,.18) 74%, rgba(0,0,0,.42) 100%);
}


/* Server even niet bereikbaar: dat laten we rustig zien in plaats van de
   pagina te herladen (dat gaf een wit scherm). */
.drukte{
  position:fixed; z-index:80; left:50%; transform:translateX(-50%);
  top:calc(6px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:9px;
  background:linear-gradient(180deg, rgba(96,50,18,.97), rgba(58,30,10,.97));
  border:1px solid #d9954a; border-radius:999px; padding:7px 15px;
  color:#ffe9c9; font-size:13.5px; box-shadow:0 6px 20px #000a;
  max-width:calc(100vw - 24px);
}
.drukte-punt{
  width:9px; height:9px; border-radius:50%; background:#ffb03a; flex:0 0 auto;
  animation:druktePols 1.1s ease-in-out infinite;
}
@keyframes druktePols{0%,100%{opacity:.35}50%{opacity:1}}

/* installatiebalk: twee keuzes naast elkaar */
.installbar .btn-store{
  background:linear-gradient(180deg,#2f5a3d,#1d3b28); border-color:#5f9c72; color:#e9f5e9;
}
.installbar .btn-store:hover{border-color:#8fd0a0}
.installbar .ib-note{font-size:11.5px; opacity:.72; font-style:italic}
@media (max-width:520px){
  .installbar{flex-wrap:wrap; row-gap:5px}
  .installbar .ib-note{flex-basis:100%; text-align:center}
}


/* Uitslag van de ronde: alles in één oogopslag, ook op een telefoon liggend. */
@media (max-height:620px){
  #ov-round .overlay-card{padding:9px 12px 0}
  #ov-round h2{font-size:16px; margin:0 0 2px}
  #ov-round .ov-sub{font-size:13px; margin-bottom:5px}
  #ov-round .results{gap:3px}
  #ov-round .rrow{padding:2px 6px; gap:6px}
  #ov-round .rrow .rn{min-width:82px; font-size:12.5px}
  #ov-round .rrow .rp{min-width:30px; font-size:13px}
  #ov-round .rrow .rmini{min-width:25px; font-size:11px; padding:1px 3px}
  #ov-round .rrow .rt{font-size:12.5px}
  #ov-round .ov-actions{padding:6px 12px; margin:5px -12px 0}
  #ov-round .ov-actions .btn{padding:5px 12px; font-size:13px}
}
@media (max-height:430px){
  #ov-round .rrow .rn{min-width:70px; font-size:11.5px}
  #ov-round .rrow .rmini{min-width:22px; font-size:10px}
  #ov-round .rrow .rt{font-size:11.5px}
  #ov-round h2{font-size:15px}
  #ov-round .ov-sub{font-size:12px; margin-bottom:3px}
}

.privacyregel{text-align:center; margin-top:10px; opacity:.75}
.privacyregel a{color:#e0c184}


/* De knoppen in de bovenbalk zijn op een telefoon net te klein om zeker te
   raken. Groter tikvlak, en rechts extra ruimte voor de afgeronde hoek en de
   veilige zone van het toestel. */
@media (pointer:coarse){
  .bar .btn{min-height:38px; padding-left:12px; padding-right:12px}
  #btn-leave{min-width:96px; font-weight:600}
  .bar-right{gap:7px}
}
@media (pointer:coarse) and (orientation:landscape){
  .bar{padding-right:calc(16px + env(safe-area-inset-right))}
  #btn-leave{margin-right:2px}
}
@media (pointer:coarse) and (max-height:480px){
  .bar .btn{min-height:34px; padding-top:5px; padding-bottom:5px}
  #btn-leave{min-width:88px}
}