/* ── game.css — Pesten thema & spellay-out ─────────────────── */

/* ── CSS variabelen (override framework) ─────────────────── */
:root {
  --felt:   #0e1a2e;
  --felt2:  #091020;
  --gold:   #e8c840;
  --gold2:  #f8e060;
  --cream:  #f4eedc;
  --red:    #c0392b;
  --dark:   #060c1a;
  --accent: #e74c3c;
  --card-w: 62px;
  --card-h: 93px;
}

/* ── Spelgrid ──────────────────────────────────────────────── */
.ps-game {
  display:flex; flex-direction:column; height:100%;
  overflow:hidden; position:relative; z-index:1;
}

/* ── Header ────────────────────────────────────────────────── */
.ps-header {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px 4px; flex-shrink:0; z-index:10; position:relative;
}
.ps-dir {
  font-family:'Fraunces',serif; font-size:22px; color:var(--gold); font-weight:900;
}
.ps-draws-badge {
  background:#c0392b; color:#fff; border-radius:20px; padding:3px 10px;
  font-size:13px; font-weight:700; animation:ps-pulse 1s ease-in-out infinite;
}
@keyframes ps-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(192,57,43,.5); }
  50%      { box-shadow:0 0 0 8px rgba(192,57,43,0); }
}
.ps-menu-btn {
  margin-left:auto; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:5px 12px; color:#9ab0a0; font-size:13px; cursor:pointer;
}

/* ── Tegenstanders ─────────────────────────────────────────── */
.ps-opps {
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  padding:4px 10px 2px; flex-shrink:0; z-index:10; position:relative;
}
.ps-opp {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:rgba(0,0,0,.45); border:1.5px solid rgba(255,255,255,.1);
  border-radius:14px; padding:6px 10px 5px; min-width:64px;
  transition:transform .25s, border-color .25s, background .25s;
}
.ps-opp.beurt {
  border-color:var(--gold); background:rgba(212,168,32,.2);
  transform:scale(1.08); animation:opp-puls 1.3s ease-in-out infinite;
}
@keyframes opp-puls {
  0%,100% { box-shadow:0 0 10px rgba(212,168,32,.4); }
  50%     { box-shadow:0 0 26px rgba(212,168,32,.9), 0 0 50px rgba(212,168,32,.15); }
}
.ps-opp-av     { font-size:26px; line-height:1; }
.ps-opp-nm     { font-size:10px; font-weight:700; color:var(--cream); text-align:center; }
.ps-opp-count  { font-size:11px; color:var(--gold); font-weight:600; }
.ps-opp-lbl    { font-size:9px; color:#e8c84088; margin-top:1px; }
.ps-opp-ks     { display:flex; gap:2px; margin-top:2px; flex-wrap:wrap; justify-content:center; }
.ps-mk {
  width:9px; height:14px; border-radius:2px;
  background:linear-gradient(145deg,#ede5d4,#c8bfad);
  border:1px solid rgba(0,0,0,.25);
  box-shadow:1px 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ── Speeltafel ────────────────────────────────────────────── */
.ps-table {
  display:flex; justify-content:center; align-items:center; gap:24px;
  flex:1; min-height:0; z-index:10; position:relative; padding:8px;
}
.ps-discard-area, .ps-deck-area {
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.ps-pile-lbl {
  font-size:10px; color:#6a8a70; text-transform:uppercase; letter-spacing:1.5px;
}
.ps-empty-slot {
  width:var(--card-w); height:var(--card-h); border-radius:8px;
  border:2px dashed rgba(255,255,255,.2); display:flex;
  align-items:center; justify-content:center; color:rgba(255,255,255,.3);
  font-size:24px;
}
.ps-deck {
  width:var(--card-w); height:var(--card-h); position:relative; cursor:default;
}
.ps-deck-back {
  width:100%; height:100%; border-radius:8px; position:absolute;
  background:linear-gradient(145deg,#1c55a8 0%,#0d3068 50%,#091e46 100%);
  border:1.5px solid rgba(255,255,255,.25);
  box-shadow:0 4px 14px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,.07);
}
.ps-deck-back::after {
  content:''; position:absolute; inset:5px;
  border:1.5px solid rgba(255,255,255,.25); border-radius:5px;
}
.ps-deck-count {
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  font-size:11px; color:#6a8a70; white-space:nowrap;
}
.ps-wish-indicator {
  font-size:13px; color:var(--cream); text-align:center;
  background:rgba(0,0,0,.45); border-radius:8px; padding:3px 10px;
}
.ps-wish-suit { font-size:16px; font-weight:900; }
.ps-wish-suit.rood { color:#c41a00; }

/* ── Status boodschap ──────────────────────────────────────── */
.ps-status {
  font-size:13px; color:#9ab0a0; text-align:center;
  background:rgba(0,0,0,.3); border-radius:20px; padding:5px 14px;
  margin:2px 12px; flex-shrink:0; z-index:10; position:relative;
}
.ps-status.urgent {
  background:rgba(212,168,32,.18); border:1px solid rgba(212,168,32,.5);
  color:var(--cream); font-weight:600;
  animation:keuze-pulse 1.4s ease-in-out infinite;
}
@keyframes keuze-pulse {
  0%,100% { box-shadow:0 0 0px rgba(212,168,32,0); }
  50%      { box-shadow:0 0 16px rgba(212,168,32,.4); }
}

/* ── Spelershand ───────────────────────────────────────────── */
.ps-player-area {
  flex-shrink:0; padding:6px 10px 4px; z-index:10; position:relative;
}
.ps-hand {
  display:flex; justify-content:center; gap:8px; flex-wrap:nowrap; overflow-x:auto;
  padding:2px 4px;
}

/* ── Actieknoppen ──────────────────────────────────────────── */
.ps-actions {
  display:flex; gap:8px; padding:6px 12px;
  padding-bottom:max(10px, env(safe-area-inset-bottom));
  flex-shrink:0; z-index:10; position:relative;
  flex-wrap:wrap;
}
.ps-btn-draw {
  flex:1; padding:14px 8px; border-radius:12px; border:none;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.15);
  color:#9ab0a0; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600;
  cursor:pointer; transition:all .15s; text-align:center; touch-action:manipulation;
}
.ps-btn-draw:active { transform:scale(.96); }
.ps-btn-draw.ps-btn-warn {
  background:rgba(192,57,43,.25); border-color:#c0392b; color:#ff8888;
  animation:keuze-pulse 1.4s ease-in-out infinite;
}
.ps-wish-knoppen {
  display:flex; gap:10px; width:100%; justify-content:center;
}
.ps-wish-btn {
  width:64px; height:64px; border-radius:12px; border:2px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:var(--cream); font-size:28px;
  cursor:pointer; transition:all .15s; touch-action:manipulation;
  display:flex; align-items:center; justify-content:center;
}
.ps-wish-btn:active { transform:scale(.94); background:rgba(255,255,255,.2); }
.ps-wish-btn.rood { color:#c41a00; border-color:rgba(196,26,0,.5); }

/* ── Game ended scherm ─────────────────────────────────────── */
.ps-ended {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; padding:32px 24px; gap:16px; text-align:center;
}
.ps-ended-icon  { font-size:64px; }
.ps-ended-title {
  font-family:'Fraunces',serif; font-size:32px; font-weight:900; color:var(--cream);
}
.ps-ended-title.win { color:var(--gold); }
.ps-ended-sub   { font-size:14px; color:#6a8a70; }
.ps-ended-scores {
  width:100%; max-width:320px; background:rgba(0,0,0,.3);
  border-radius:14px; padding:12px 16px;
}
.ps-score-rij {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px;
}
.ps-score-rij:last-child { border-bottom:none; }
.ps-btn-primary {
  padding:14px 22px; border-radius:12px; border:none;
  background:var(--gold); color:#0a0800; font-family:'Fraunces',serif;
  font-size:17px; font-weight:900; cursor:pointer;
}
.ps-btn-primary:active { background:var(--gold2); }
.ps-btn-ghost {
  padding:14px 18px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#9ab0a0; font-family:'DM Sans',sans-serif; font-size:14px;
  font-weight:600; cursor:pointer;
}

/* ── Kaarten ───────────────────────────────────────────────── */
.kaart {
  width:var(--card-w); height:var(--card-h);
  background:linear-gradient(160deg, #fffef8 0%, #fff6e8 100%);
  border-radius:8px;
  box-shadow:0 5px 16px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.35),
             inset 0 0 0 1px rgba(0,0,0,.07);
  border:1px solid rgba(200,180,140,.35);
  cursor:pointer; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .15s, box-shadow .15s;
  flex-shrink:0; position:relative; overflow:hidden;
}
.kaart::after {
  content:''; position:absolute; inset:4px;
  border:1px solid rgba(0,0,0,.07); border-radius:5px; pointer-events:none;
}
.c-tl, .c-br {
  position:absolute; display:flex; flex-direction:column;
  align-items:center; line-height:1.05;
}
.c-tl { top:4px; left:5px; }
.c-br { bottom:4px; right:5px; transform:rotate(180deg); }
.c-rk { font-family:'Fraunces',serif; font-size:14px; font-weight:900; }
.c-st { font-size:11px; line-height:1; }
.c-ctr {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.c-ctr-rk { font-family:'Fraunces',serif; font-size:24px; font-weight:900; line-height:1; }
.c-ctr-st  { font-size:20px; line-height:1; }
.face-svg {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-53%); overflow:visible; width:62%; height:auto;
}
.kaart.tafel-k .face-svg { width:54%; }
.kaart.rood  { color:#c41a00; }
.kaart.zwart { color:#111; }
.kaart.dimmed { opacity:0.32; pointer-events:none; cursor:default; }
.kaart.tafel-k {
  width:calc(var(--card-w) * .9); height:calc(var(--card-h) * .9); cursor:default;
}
.kaart.tafel-k .c-rk     { font-size:calc(var(--card-w) * .9 * .20); }
.kaart.tafel-k .c-ctr-rk { font-size:calc(var(--card-w) * .9 * .34); }
.kaart.tafel-k .c-ctr-st { font-size:calc(var(--card-w) * .9 * .28); }

/* Speciale kaarten krijgen subtiele glow */
.ps-special.rood  { box-shadow:0 5px 16px rgba(0,0,0,.6), 0 0 12px rgba(196,26,0,.35); }
.ps-special.zwart { box-shadow:0 5px 16px rgba(0,0,0,.6), 0 0 12px rgba(212,168,32,.2); }

/* Joker kaart */
.kaart.joker {
  color: #e8c840;
  background: linear-gradient(160deg, #1a1040 0%, #0c0828 100%);
  border: 1.5px solid rgba(232,200,64,.5);
  box-shadow: 0 5px 16px rgba(0,0,0,.7), 0 0 18px rgba(232,200,64,.3);
}

/* Hint tekst */
.ps-hint { font-size:12px; color:#6a6a9a; text-align:center; padding:4px 0; }

/* ── Responsief ──────────────────────────────────────────── */
@media (min-width:520px) {
  :root { --card-w:78px; --card-h:117px; }
  .c-rk { font-size:17px; } .c-st { font-size:13px; }
  .c-ctr-rk { font-size:30px; } .c-ctr-st { font-size:25px; }
}
@media (min-width:820px) {
  :root { --card-w:92px; --card-h:138px; }
  .ps-hand { gap:12px; }
}
@media (max-height:680px) {
  .ps-header  { padding:5px 14px 2px; }
  .ps-opps    { gap:4px; padding:3px 8px 1px; }
  .ps-opp     { padding:4px 8px 3px; min-width:56px; }
  .ps-opp-av  { font-size:20px; }
  .ps-table   { gap:16px; }
  .ps-status  { padding:4px 12px; }
  .ps-btn-draw { padding:11px 6px; font-size:14px; }
}

/* ── Kaartanimaties ──────────────────────────────────────── */
@keyframes k-deal {
  0%   { transform:translateY(-100px) rotate(-10deg) scale(.5); opacity:0; }
  100% { transform:translateY(0) rotate(0deg) scale(1); opacity:1; }
}
@keyframes k-speel {
  0%   { transform:translateY(60px) scale(.85); opacity:0; }
  65%  { transform:translateY(-6px) scale(1.05); opacity:1; }
  100% { transform:translateY(0) scale(1); opacity:1; }
}
.anim-deal  { animation:k-deal  .5s ease-out both; }
.anim-speel { animation:k-speel .4s cubic-bezier(.22,.68,0,1.28) both; }

/* ── Variant editor regels ───────────────────────────────── */
.ve-categorie    { margin-bottom: 4px; }
.ve-cat-label    { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#6a6a9a; margin-bottom:8px; display:block; }
.ve-regel-item   { display:flex; align-items:flex-start; gap:12px; padding:10px 14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; margin-bottom:6px; }
.ve-regel-toggle { flex-shrink:0; margin-top:3px; cursor:pointer; accent-color:var(--gold); width:18px; height:18px; }
.ve-regel-naam   { font-size:14px; font-weight:600; color:var(--cream); margin-bottom:2px; }
.ve-regel-omschr { font-size:12px; color:#9a9ab0; line-height:1.4; }

/* ── Variant beheer lijst ─────────────────────────────────── */
.vb-variant-item { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:12px 14px; cursor:pointer; transition:all .15s; }
.vb-variant-item.actief { border-color:var(--gold); background:rgba(232,200,64,.1); }
.vb-variant-item:active { background:rgba(255,255,255,.12); }
.vb-variant-naam  { flex:1; font-size:15px; font-weight:600; color:var(--cream); }
.vb-variant-sub   { font-size:11px; color:#6a6a9a; }
.vb-actief-badge  { font-size:10px; background:var(--gold); color:#060600; border-radius:20px; padding:2px 8px; font-weight:700; white-space:nowrap; }
.vb-icon-btn      { background:none; border:none; font-size:18px; color:#6a6a9a; cursor:pointer; padding:4px; line-height:1; flex-shrink:0; }
.vb-icon-btn:active { color:var(--cream); }

/* ── Spelregels overlay ──────────────────────────────────── */
#psRulesOverlay {
  position:fixed; inset:0; background:rgba(0,0,0,.88);
  display:none; align-items:center; justify-content:center;
  z-index:400; padding:20px;
}
#psRulesOverlay.on { display:flex; }
.ps-rules-blok {
  background:#0e1a2e; border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:24px 20px; width:100%; max-width:360px;
  max-height:90vh; overflow-y:auto;
}
.ps-rules-titel {
  font-family:'Fraunces',serif; font-size:22px; font-weight:900;
  color:var(--gold); margin-bottom:16px; text-align:center;
}
.ps-rules-rij {
  display:flex; align-items:flex-start; gap:12px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13px; line-height:1.5; color:#c8d8c0;
}
.ps-rules-rij:last-of-type { border-bottom:none; }
.ps-rules-kaart {
  font-family:'Fraunces',serif; font-size:18px; font-weight:900;
  color:var(--gold); min-width:26px; text-align:center;
}