/* ============================================================
   Skip-Bo Online - donker thema
   Alle stijl zit in dit bestand. Geen Tailwind-CDN meer: die draaide
   een JIT-compiler + MutationObserver in de browser die bij elke
   DOM-wijziging (dus elke poll/zet) opnieuw scande - merkbaar gehakkel
   tijdens het spelen. De handvol utility-classes staan nu hieronder
   gewoon als CSS.
   ============================================================ */

/* --- mini-reset (verving Tailwind Preflight) --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ line-height:1.5; -webkit-text-size-adjust:100%; }
body{ margin:0; }
h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }
h1,h2,h3,h4,h5,h6{ font-size:inherit; font-weight:inherit; }
ol,ul{ margin:0; padding:0; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }

/* --- utilities (subset, exact de classes die de HTML gebruikt) --- */
.block{ display:block; }
.flex{ display:flex; }
.grid{ display:grid; }
.hidden{ display:none; }
.flex-col{ flex-direction:column; }
.items-center{ align-items:center; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.relative{ position:relative; }
.z-10{ z-index:10; }
.shrink-0{ flex-shrink:0; }
.min-w-0{ min-width:0; }
.w-full{ width:100%; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.overflow-hidden{ overflow:hidden; }
.antialiased{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.min-h-screen{ min-height:100vh; }
.h-\[100dvh\]{ height:100vh; height:100dvh; }
.min-h-\[1\.25rem\]{ min-height:1.25rem; }
.max-w-sm{ max-width:24rem; }
.max-w-md{ max-width:28rem; }
.max-w-4xl{ max-width:56rem; }
.bg-\[\#0b1020\]{ background-color:#0b1020; }

.p-6{ padding:1.5rem; }
.p-8{ padding:2rem; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.py-10{ padding-top:2.5rem; padding-bottom:2.5rem; }
.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-5{ gap:1.25rem; }
.gap-6{ gap:1.5rem; }
.mr-1{ margin-right:.25rem; }
.mb-1{ margin-bottom:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:.75rem; }
.mb-4{ margin-bottom:1rem; }
.mb-5{ margin-bottom:1.25rem; }
.mb-6{ margin-bottom:1.5rem; }
.mb-10{ margin-bottom:2.5rem; }
.mt-3{ margin-top:.75rem; }
.mt-4{ margin-top:1rem; }
.mt-5{ margin-top:1.25rem; }
.mt-10{ margin-top:2.5rem; }
.space-y-1\.5 > * + *{ margin-top:.375rem; }
.space-y-2 > * + *{ margin-top:.5rem; }
.space-y-4 > * + *{ margin-top:1rem; }

.font-normal{ font-weight:400; }
.font-bold{ font-weight:700; }
.font-black{ font-weight:900; }
.leading-relaxed{ line-height:1.625; }
.tracking-tight{ letter-spacing:-.025em; }
.tracking-normal{ letter-spacing:0; }
.normal-case{ text-transform:none; }
.list-decimal{ list-style-type:decimal; }
.list-inside{ list-style-position:inside; }

.text-xs{ font-size:.75rem; line-height:1rem; }
.text-sm{ font-size:.875rem; line-height:1.25rem; }
.text-lg{ font-size:1.125rem; line-height:1.75rem; }
.text-xl{ font-size:1.25rem; line-height:1.75rem; }
.text-2xl{ font-size:1.5rem; line-height:2rem; }
.text-5xl{ font-size:3rem; line-height:1; }
.text-6xl{ font-size:3.75rem; line-height:1; }

.text-white{ color:#fff; }
.text-slate-200{ color:#e2e8f0; }
.text-slate-300{ color:#cbd5e1; }
.text-slate-400{ color:#94a3b8; }
.text-slate-500{ color:#64748b; }
.text-slate-600{ color:#475569; }
.text-rose-400{ color:#fb7185; }
.text-indigo-400{ color:#818cf8; }
.text-amber-300{ color:#fcd34d; }

.transition{
  transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:150ms;
}

.hover\:text-rose-400:hover{ color:#fb7185; }
.group:hover .group-hover\:text-white{ color:#fff; }
.marker\:text-indigo-400 *::marker,
.marker\:text-indigo-400::marker{ color:#818cf8; }

@media (min-width:640px){
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:text-6xl{ font-size:3.75rem; line-height:1; }
}
@media (min-width:768px){
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

:root{
  --bg:#0b1020;
  --panel:#141a2e;
  --panel-2:#1b2238;
  --line:#2a3352;
  --ink:#e2e8f0;
  --muted:#94a3b8;
  --indigo:#6366f1;
  --indigo-2:#818cf8;
  --gold:#fbbf24;

  --card-w:64px;
  --card-h:91px;
  --radius:10px;

  /* Eén set overgangen voor het hele bord: kort en met dezelfde curve,
     zodat alles hetzelfde aanvoelt. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.15s;
}

/* Grotere schermen krijgen ruimere kaarten - op een pc was alles te klein */
@media (min-width:820px){
  :root{ --card-w:74px; --card-h:105px; }
}
@media (min-width:1200px){
  :root{ --card-w:84px; --card-h:119px; }
}
@media (max-width:768px){
  :root{ --card-w:56px; --card-h:80px; }
}
@media (max-width:400px){
  :root{ --card-w:48px; --card-h:68px; }
}

*{ -webkit-tap-highlight-color:transparent; }

body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(1200px 700px at 15% -10%, #1e2a55 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, #2b1b4d 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.5;
}

/* ---------------------------------------------------- bouwstenen */

.panel{
  background:linear-gradient(180deg,rgba(27,34,56,.92),rgba(20,26,46,.92));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
}

.label{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;
}

.field{
  width:100%; padding:.7rem .9rem;
  background:#0f1424; color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  font-size:.95rem; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field::placeholder{ color:#64748b; }
.field:focus{ border-color:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,.22); }
.field-code{
  text-transform:uppercase; letter-spacing:.4em; font-weight:800;
  font-size:1.3rem; text-align:center;
}

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.1rem; border-radius:10px; font-weight:700; font-size:.92rem;
  border:1px solid transparent; cursor:pointer; overflow:hidden;
  transition:transform .12s, filter .15s, background .15s, border-color .15s;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-primary{
  background:linear-gradient(135deg,var(--indigo),#8b5cf6);
  color:#fff; box-shadow:0 10px 26px -10px rgba(99,102,241,.85);
}
.btn-primary:hover:not([disabled]){ filter:brightness(1.12); }
.btn-ghost{
  background:rgba(255,255,255,.05); color:var(--ink); border-color:var(--line);
}
.btn-ghost:hover:not([disabled]){ background:rgba(255,255,255,.1); }
.btn.is-busy .btn-label{ opacity:.35; }
.btn.is-busy::after{
  content:""; position:absolute; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn-icon{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--ink);
  font-size:1rem; cursor:pointer; transition:background .15s, color .15s;
}
.btn-icon:hover{ background:rgba(255,255,255,.12); }

.brand-gradient{
  background:linear-gradient(120deg,#818cf8 0%,#c084fc 45%,#fbbf24 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 24px rgba(129,140,248,.35));
}

.rule-h{ font-weight:800; color:#fff; font-size:.95rem; margin-bottom:.35rem; }

/* ------------------------------------------------ startscherm logo */

.logo-cards{ perspective:600px; }
.mini-card{
  width:44px; height:62px; border-radius:8px;
  display:grid; place-items:center; font-weight:900; font-size:1.05rem;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 24px -12px rgba(0,0,0,.9);
  /* de kaartjes staan iets gekanteld (transform) en dobberen op en neer
     (translate) - twee losse eigenschappen, dus ze bijten elkaar niet */
  animation:bob 4s ease-in-out infinite;
}
.mini-card--a{ background:linear-gradient(160deg,#1e293b,#0f172a); color:#5eead4; transform:rotate(-9deg); }
.mini-card--b{ background:linear-gradient(160deg,#1e293b,#0f172a); color:#7dd3fc; transform:rotate(4deg);  animation-delay:.3s; }
.mini-card--c{ background:linear-gradient(160deg,#1e293b,#0f172a); color:#c4b5fd; transform:rotate(10deg); animation-delay:.9s; }
.mini-card--wild{
  background:linear-gradient(160deg,#f59e0b,#b45309); color:#1f1300;
  transform:rotate(-3deg); animation-delay:.6s;
}
@keyframes bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -9px; } }

/* ==================================================== spelbord ==== */

.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.55rem .85rem;
  border-bottom:1px solid var(--line);
  background:rgba(11,16,32,.92);
}
.brand-mini{
  font-weight:900; letter-spacing:.06em; font-size:.85rem;
  background:linear-gradient(120deg,#818cf8,#c084fc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.code-chip{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8rem; font-weight:800; letter-spacing:.15em;
  padding:.3rem .6rem; border-radius:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--ink); cursor:pointer; transition:background .15s;
}
.code-chip:hover{ background:rgba(255,255,255,.11); }

.turn-banner{
  flex:1 1 auto; text-align:center; min-width:0;
  font-size:.85rem; font-weight:700; color:var(--muted);
  padding:.35rem .6rem; border-radius:999px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.turn-banner.is-you{
  color:#052e16; background:linear-gradient(135deg,#4ade80,#22c55e);
  box-shadow:0 0 22px -2px rgba(34,197,94,.7);
}

/* ------------------------------------------------ tegenstanders */

.opponents{
  flex:0 0 auto;
  display:flex; gap:.6rem; padding:.6rem .8rem;
  overflow-x:auto; scrollbar-width:thin;
}
.opponent{
  flex:0 0 auto; min-width:172px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(20,26,46,.7); padding:.5rem .6rem;
  transition:border-color .2s var(--ease);
}
.opponent.is-turn{
  border-color:#22c55e;
  box-shadow:0 0 0 1px rgba(34,197,94,.4), 0 0 22px -6px rgba(34,197,94,.6);
}
.opponent-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.4rem; margin-bottom:.45rem;
}
.opponent-name{
  font-weight:700; font-size:.82rem; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.dot--on{ background:#22c55e; box-shadow:0 0 8px #22c55e; }
.dot--off{ background:#64748b; }
.opponent-body{ display:flex; gap:.7rem; align-items:flex-end; justify-content:space-between; }
.opponent-stat{ font-size:.62rem; color:var(--muted); text-align:center; }
.stat-caption{
  margin-top:.3rem; font-size:.58rem; letter-spacing:.06em;
  text-transform:uppercase; color:#64748b;
}
.mini-stack{ display:flex; gap:.22rem; align-items:flex-end; }

/* Kaartformaten van een tegenstander - op een groot scherm flink groter,
   want je moet kunnen zien wat de ander open heeft liggen. */
.opponent{ --card-w:30px; --card-h:43px; }
.opp-card{ position:relative; }
.opp-card--stock{ --card-w:44px; --card-h:63px; }
.opp-card--hand{ --card-w:30px; --card-h:43px; }
.hand-count{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  background:#0f1424; border:1px solid var(--line); color:var(--ink);
  font-size:.6rem; font-weight:800; border-radius:999px; padding:0 5px;
}

@media (min-width:820px){
  .opponent{ --card-w:38px; --card-h:54px; min-width:250px; }
  .opp-card--stock{ --card-w:58px; --card-h:83px; }
  .opp-card--hand{ --card-w:38px; --card-h:54px; }
  .opponent-name{ font-size:.95rem; }
  .opponent-stat{ font-size:.68rem; }
}
@media (min-width:1200px){
  .opponent{ --card-w:44px; --card-h:63px; min-width:290px; }
  .opp-card--stock{ --card-w:68px; --card-h:97px; }
  .opp-card--hand{ --card-w:44px; --card-h:63px; }
}

/* ------------------------------------------- aflegstapel als waaier */

/* De stapel wordt naar boven uitgewaaierd: de bovenste (speelbare) kaart
   ligt vooraan, de kaarten eronder steken er net bovenuit zodat je hun
   hoekcijfer ziet. Zo weet je wat er onder ligt zonder te klikken. */
/* Standaard zie je alleen de bovenste kaart, zodat de balk onderin niet
   groter wordt. De kaarten eronder waaieren pas uit bij hover (pc) of na
   een tik (mobiel, .is-open). De containerhoogte blijft gelijk - het bord
   springt dus niet. */
.discard-fan{
  --layers:1;
  --fan-step:calc(var(--card-h) * .24);
  position:relative;
  width:var(--card-w);
  height:var(--card-h);
}
.discard-fan--small{ --fan-step:calc(var(--card-h) * .28); }
.fan-card{
  position:absolute; left:0; bottom:0;
  z-index:calc(var(--i) + 1);
  transition:transform .18s var(--ease);
}

/* uitgewaaierd - alleen na hover of tik. We schuiven met transform i.p.v.
   'bottom', zodat het op de compositor loopt en niet hapert. */
.discard-fan.is-open{ z-index:30; }
.discard-fan.is-open .fan-card{
  transform:translateY(calc((var(--layers) - 1 - var(--i)) * var(--fan-step) * -1));
}
@media (hover:hover){
  .discard-fan:hover{ z-index:30; }
  .discard-fan:hover .fan-card{
    transform:translateY(calc((var(--layers) - 1 - var(--i)) * var(--fan-step) * -1));
  }
}
/* "+N" hoort bij de kaarten die onderop liggen, dus onderaan - boven zou het
   over het kopje van de zone heen vallen. */
.fan-more{
  position:absolute; bottom:-7px; left:-5px;
  z-index:20; font-size:.58rem; font-weight:800;
  background:#0f1424; border:1px solid var(--line); color:#cbd5e1;
  border-radius:999px; padding:0 5px; white-space:nowrap;
}
.pile-count{
  position:absolute; bottom:-7px; right:-6px; z-index:21;
  font-size:.6rem; font-weight:800; color:var(--ink);
  background:#0f1424; border:1px solid var(--line);
  border-radius:999px; padding:0 5px;
}

/* --------------------------------------------------- speeltafel */

.table-area{
  flex:1 1 auto; display:grid; place-items:center;
  padding:.6rem; min-height:0;
}
.table-felt{
  display:flex; align-items:center; justify-content:center; gap:clamp(.5rem,2vw,1.6rem);
  padding:clamp(.7rem,2vw,1.5rem) clamp(.8rem,3vw,2rem);
  border-radius:22px;
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(99,102,241,.14), transparent 70%),
    linear-gradient(180deg, rgba(15,42,35,.85), rgba(9,26,22,.9));
  border:1px solid rgba(52,211,153,.16);
  box-shadow:inset 0 2px 30px rgba(0,0,0,.55), 0 30px 60px -30px #000;
  max-width:100%;
}

.build-piles{ display:flex; gap:clamp(.4rem,1.6vw,.9rem); }

.deck-zone{ display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.deck-label{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.deck-stack{ position:relative; }
.deck-count{
  position:absolute; bottom:-6px; right:-6px;
  background:#0f1424; border:1px solid var(--line); border-radius:999px;
  font-size:.65rem; font-weight:800; padding:1px 6px; color:var(--ink);
}

/* ------------------------------------------------------- kaarten */

/* Elk getal heeft zijn eigen kleur (--h = hue, 30 graden per getal).
   Je herkent een kaart daardoor aan de kleur nog voor je het cijfer leest. */
.card{
  --h:220;
  position:relative;
  width:var(--card-w); height:var(--card-h);
  border-radius:calc(var(--card-w) * .14);
  display:grid; place-items:center;
  user-select:none; overflow:hidden;
  background:linear-gradient(158deg,#fff 0%,#f8fafc 46%,#e5eaf1 100%);
  border:1px solid rgba(15,23,42,.3);
  box-shadow:
    0 6px 14px -6px rgba(0,0,0,.75),
    0 1px 2px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* Gekleurd binnenkader, zoals de rand op een echte speelkaart */
.card::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
  inset:calc(var(--card-w) * .06);
  border-radius:calc(var(--card-w) * .09);
  border:2px solid hsl(var(--h) 62% 52% / .5);
}

.card-face{
  position:relative; z-index:2;
  font-size:calc(var(--card-h) * .44);
  font-weight:900; line-height:1; letter-spacing:-.03em;
  color:hsl(var(--h) 72% 33%);
  text-shadow:0 1px 0 rgba(255,255,255,.95);
}

/* Hoekcijfers: blijven zichtbaar als kaarten elkaar overlappen */
.card .pip{
  position:absolute; z-index:3;
  font-size:calc(var(--card-h) * .16);
  font-weight:800; line-height:1;
  color:hsl(var(--h) 68% 38%);
}
.card .pip--tl{ top:7%; left:9%; }
.card .pip--br{ bottom:7%; right:9%; transform:rotate(180deg); }

/* ---- Skip-Bo joker */
.card--wild{
  --h:38;
  background:linear-gradient(155deg,#fef3c7 0%,#fcd34d 38%,#f59e0b 72%,#d97706 100%);
  border-color:rgba(120,53,15,.6);
}
.card--wild::before{ border-color:rgba(120,53,15,.4); }
.card--wild .card-face{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:calc(var(--card-h) * .2);
  letter-spacing:.06em;
  color:#5c2a00; text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.wild-line{ display:block; line-height:1.02; }
.card--wild .pip{ color:#7c2d12; font-size:calc(var(--card-h) * .14); }
.card--wild::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,
    rgba(255,255,255,.5) 0%,
    rgba(255,255,255,.12) 20%,
    transparent 42%,
    transparent 100%);
}

/* Joker die als getal op een bouwstapel ligt */
.wild-badge{
  position:absolute; z-index:4; top:6%; right:7%;
  font-size:calc(var(--card-h) * .14); font-weight:900;
  padding:0 .3em; border-radius:4px;
  background:linear-gradient(135deg,#fcd34d,#d97706);
  color:#3b2000; box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.card--played-wild .pip--tl{ display:none; }

/* ---- gesloten kaart, voltooid, leeg */
.card--back{
  background:
    repeating-linear-gradient(45deg,#312e81 0 7px,#4338ca 7px 14px);
  border-color:#4c1d95;
}
.card--back::before{ border-color:rgba(199,210,254,.4); }
.card-back-mark{
  position:relative; z-index:2;
  font-size:calc(var(--card-h) * .26); font-weight:900;
  color:#c7d2fe; letter-spacing:.06em;
}
.card--done{
  background:linear-gradient(160deg,#1f2937,#111827);
  border-color:#374151; color:#4ade80;
  font-size:calc(var(--card-h) * .34); font-weight:900;
}
.card--done::before{ border-color:rgba(74,222,128,.32); }
.card--empty{
  background:rgba(255,255,255,.035);
  border:1px dashed rgba(255,255,255,.24);
  box-shadow:none;
}
.card--empty::before{ display:none; }
.card-empty-text{
  font-size:calc(var(--card-h) * .3); font-weight:800;
  color:rgba(255,255,255,.3);
}

/* -------------------------------------------------- bouwstapels */

.build-pile{
  position:relative; cursor:default;
  border-radius:var(--radius);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.build-pile .build-count{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  font-size:.6rem; font-weight:800; color:var(--muted);
  background:#0f1424; border:1px solid var(--line);
  border-radius:999px; padding:0 6px; white-space:nowrap;
}
/* Groen = hier past je kaart op. Duidelijk zichtbaar, met een vlaggetje
   dat het benodigde getal noemt. */
.build-pile.is-target{ cursor:pointer; }
/* Vaste groene gloed (geen puls - dat leidt af). Fadet één keer kort in
   zodra de stapel speelbaar wordt. */
.build-pile.is-target::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:3;
  pointer-events:none;
  box-shadow:0 0 0 2px #34d399, 0 0 20px -2px rgba(52,211,153,.6);
  animation:glowIn .2s var(--ease) both;
}
@keyframes glowIn{
  from{ opacity:0; transform:scale(.95); }
  to  { opacity:1; transform:scale(1); }
}
.build-pile.is-target:hover{ transform:translateY(-7px) scale(1.03); }
.build-pile.drop-hover{ transform:translateY(-9px) scale(1.05); }

/* Stapels waar je kaart niet op past raken op de achtergrond */
.build-pile.no-target{ opacity:.4; }

/* Geen tekstlabels op de stapels: de gloed zegt genoeg, de rest denk je zelf. */

/* --------------------------------------------------- eigen zone */

.me-area{
  flex:0 0 auto;
  border-top:1px solid var(--line);
  background:#121829;
  box-shadow:0 -12px 30px -12px rgba(0,0,0,.7);
  padding:.6rem .8rem calc(.8rem + env(safe-area-inset-bottom));
}
.me-inner{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(.5rem,2vw,1.5rem); flex-wrap:nowrap;
}
.zone-label{
  display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-bottom:.3rem; text-align:center;
}
.stock-zone,.discard-zone{ flex:0 0 auto; }
.hand-zone{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; }

.stock-pile{ position:relative; }
.stock-count{
  position:absolute; z-index:22; bottom:-7px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--indigo),#8b5cf6); color:#fff;
  font-size:.68rem; font-weight:900; border-radius:999px; padding:1px 8px;
  box-shadow:0 4px 12px -4px rgba(99,102,241,.9);
}

.hand{
  display:flex; justify-content:center; align-items:flex-end;
  min-height:calc(var(--card-h) + 14px);
  padding-top:12px;
}
/* Lichte overlap zodat de hand een waaier blijft, maar elke kaart nog
   goed leesbaar is. Bij een volle hand van 5 past dit ruim. */
.hand .card-slot{ margin-left:calc(var(--card-w) * -0.12); }
.hand .card-slot:first-child{ margin-left:0; }

.discards{ display:flex; gap:.4rem; align-items:flex-end; }

/* interactieve kaarten */
.card-slot{ position:relative; transition:transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.hand .card-slot{ will-change:transform; }
.card-slot.playable{ cursor:pointer; }
.card-slot.playable:hover{ transform:translateY(-10px); z-index:5; }

/* De aangeklikte kaart komt omhoog en krijgt een gouden rand met een vinkje.
   Bewust NIET vergroten: dan lijkt de kaart een uitklappende doos. */
.card-slot.selected{ transform:translateY(-16px); z-index:9; }
.card-slot.selected .card{
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 30px -2px rgba(251,191,36,.95),
    0 18px 34px -12px rgba(0,0,0,.95);
}
.card-slot.selected::after{
  content:"✓"; position:absolute; z-index:25;
  top:-10px; left:50%; transform:translateX(-50%);
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.7rem; font-weight:900;
  background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#3b2000;
  box-shadow:0 3px 10px -2px rgba(251,191,36,.95);
}
.card-slot.dragging{ opacity:.35; }

.discard-slot{
  position:relative; border-radius:var(--radius);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
  cursor:pointer;
}
.discard-slot.is-target{
  border-radius:calc(var(--card-w) * .14);
}
.discard-slot.is-target::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:3;
  pointer-events:none;
  box-shadow:0 0 0 2px var(--gold), 0 0 20px -3px rgba(251,191,36,.7);
  animation:glowIn .2s var(--ease) both;
}
.discard-slot.is-target:hover, .discard-slot.drop-hover{ transform:translateY(-7px); }
.discard-slot.no-target{ opacity:.55; }
/* De eigen aflegstapel waar je de bovenste kaart van hebt opgepakt */
.discard-slot.selected .fan-card--top .card{
  box-shadow:0 0 0 3px var(--gold), 0 0 26px -4px rgba(251,191,36,.95);
}
.discard-slot.selected{ transform:translateY(-8px); }

/* Alleen ruimte voor een knop als je die echt nodig hebt (beurt doorgeven).
   Verder geen uitleg: de gloed op de stapels wijst de weg. */
.hint{ margin-top:.5rem; text-align:center; min-height:0; }
.hint:empty{ margin-top:0; }

/* Segment-knoppen (lengte van het potje in de wachtkamer) */
.seg{ display:flex; gap:.3rem; flex-wrap:wrap; }
.seg-btn{
  flex:1 1 auto; min-width:44px;
  padding:.45rem .5rem; border-radius:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--ink); font-weight:700; font-size:.85rem; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.seg-btn:hover:not(:disabled){ background:rgba(255,255,255,.12); }
.seg-btn.is-on{
  background:linear-gradient(135deg,var(--indigo),#8b5cf6);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 16px -8px rgba(99,102,241,.9);
}
.seg-btn:disabled{ cursor:default; opacity:.75; }


/* ------------------------------------------------------ zijpaneel */

.log-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(340px,86vw);
  background:linear-gradient(180deg,#141a2e,#0d1222);
  border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:40; display:flex; flex-direction:column;
}
.log-panel.open{ transform:none; }
.log-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; border-bottom:1px solid var(--line);
}
.log-list{ flex:1; overflow-y:auto; padding:.75rem 1rem; }
.log-list li{
  font-size:.8rem; color:#cbd5e1; padding:.4rem 0;
  border-bottom:1px solid rgba(255,255,255,.05); line-height:1.4;
}
.log-list li .time{ color:#64748b; font-size:.68rem; margin-right:.4rem; }
.log-list li.hl{ color:#fcd34d; font-weight:600; }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:35; }

/* ------------------------------------------------------- overlays */

/* De donkere laag zelf is meteen volledig dekkend: het bord mag er nooit
   doorheen schemeren, ook niet als een animatie hapert of uit staat.
   Alleen het paneel erin komt met een klein animatietje binnen. */
.overlay{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center; padding:1rem;
  background:rgba(6,9,20,.96);
}
/* Alleen transform animeren, geen opacity: hapert de animatie, dan staat het
   paneel hooguit een paar pixels verkeerd - het verdwijnt nooit. */
.overlay > .panel{ animation:panelIn .22s ease-out both; }
@keyframes panelIn{
  from{ transform:translateY(12px) scale(.97); }
  to  { transform:none; }
}
.overlay.hidden,.hidden{ display:none !important; }

.lobby-player{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.avatar{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:.75rem; font-weight:900; color:#fff;
}

.toast{
  position:fixed; left:50%; bottom:calc(var(--card-h) + 90px);
  transform:translate(-50%,20px); z-index:60;
  padding:.6rem 1rem; border-radius:10px; font-size:.85rem; font-weight:600;
  background:#1e1b3a; border:1px solid var(--line); color:#fff;
  box-shadow:0 16px 40px -16px #000;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast.err{ background:#3b1220; border-color:#7f1d3a; color:#fecdd3; }

/* vliegende kaart bij een zet */
.fly-layer{ position:fixed; inset:0; z-index:45; pointer-events:none; }
.fly-card{
  position:fixed; margin:0; will-change:transform, opacity;
}

/* confetti bij winst */
.confetti{
  position:fixed; top:-12px; width:9px; height:14px; z-index:55;
  pointer-events:none; border-radius:2px;
  animation:fall linear forwards;
}
@keyframes fall{
  to{ transform:translateY(105vh) rotate(760deg); opacity:.15; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  #bg-canvas{ display:none; }
}

/* ---------------------------------------------------------- mobiel ---- */
@media (max-width:640px){
  /* De beurtbalk krijgt een eigen regel, anders verdringt hij de spelcode */
  .topbar{ flex-wrap:wrap; padding:.4rem .55rem; }
  .turn-banner{ order:3; flex-basis:100%; margin-top:.3rem; font-size:.8rem; padding:.3rem .5rem; }

  .opponent{ min-width:142px; }
  .opponents{ padding:.45rem .7rem; }

  /* Speeltafel: trekstapel en voltooid op één regel, de vier bouwstapels
     groot daaronder. Alles op één regel proppen maakt de kaarten piepklein
     en op smallere toestellen breekt de rij lelijk af. */
  .table-area{ padding:.2rem .3rem; }
  .table-felt{
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:.6rem;
    padding:1.1rem 1rem 1.2rem;
    width:100%;
    border-radius:18px;
  }
  #build-piles{
    order:2;
    flex-basis:100%;
    justify-content:space-between;
    gap:.4rem;
    margin-top:.6rem;
    --card-w:clamp(52px, 17.5vw, 68px);
    --card-h:calc(var(--card-w) * 1.42);
  }
  /* deck + voltooid iets kleiner - de vier bouwstapels zijn de hoofdzaak */
  .table-felt .deck-zone{ --card-w:50px; --card-h:71px; }

  /* Eigen zone: de hand vlak onder het speelveld (daar kijk je het meest
     naar), voorraad en aflegstapels op de onderste regel. Die laatste zijn
     klein en de aflegwaaier klapt tóch naar boven open, dus die mogen tegen
     de onderrand aan. */
  .me-area{ padding:.5rem .7rem calc(.6rem + env(safe-area-inset-bottom)); }
  .me-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "hand  hand"
      "stock discards";
    gap:.35rem .7rem;
    align-items:end;
  }
  .hand-zone{ grid-area:hand; }
  .stock-zone{ grid-area:stock; align-self:end; }
  .discard-zone{ grid-area:discards; justify-self:end; align-self:end; }
  .hand-zone .zone-label{ margin-bottom:.15rem; }
  .discards{ gap:.3rem; }

  /* Eigen regel over de volle breedte: de kaarten mogen uit elkaar,
     nauwelijks overlap, goed leesbaar. */
  .hand{ padding-top:16px; min-height:calc(var(--card-h) + 18px); }
  .hand .card-slot{ margin-left:calc(var(--card-w) * -0.1); }
  .hand .card-slot:first-child{ margin-left:0; }

  .toast{ bottom:auto; top:110px; }
}