/* =========================================================
   Koalitionspoker – style.css (clean)
   - Kartenklasse: .p-card
   - Mini-Preview nur bei Hover, nebeneinander über dem Stapel
   - Deutsches UI, moderner Look
   ========================================================= */

/* ---------- Grund-Variablen ---------- */
:root{
  --felt:       #0b6b3e;
  --felt-dark:  #063a22;
  --wood:       #5a3322;

  --ring:       #ffd166;      /* Akzent (gelb) */
  --hint:       #22c55e;      /* Grün (legale Ziele) */
  --steal:      #3b82f6;      /* Blau (Stehlen) */
  --danger:     #ef4444;

  --stack-overlap: -24px;     /* Versatz je Karte im Stapel */
  --card-w: 86px;             /* Stapelkarten-Breite */
  --card-h: calc(var(--card-w) * 1.4);
  --mini-scale: .42;

  --hand-card-w: clamp(70px, 7.2vw, 92px); /* Handkartengröße */
}

/* ---------- Hintergrund / Tisch ---------- */
.bg-wood { 
  background: url('/assets/img/table-wood.jpg') center/cover fixed; 
  min-height:100vh; 
}

.table-wrap { 
  min-height: calc(100vh - 20px); 
  display:flex; align-items:center; justify-content:center; 
  padding:10px;
}

.felt{ 
  position:relative; 
  width: min(1400px, 95vw); 
  height:min(820px, 90vh);
  background:
    radial-gradient(140% 90% at 50% -10%, rgba(255,255,255,.06), transparent 35%),
    radial-gradient(70% 70% at 50% 40%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--felt) 0%, var(--felt-dark) 100%);
  border:20px solid var(--wood);
  border-radius:30px;
  box-shadow:
    inset 0 20px 80px rgba(0,0,0,.55),
    inset 0 -10px 30px rgba(0,0,0,.35),
    0 20px 40px rgba(0,0,0,.45);
}

/* ---------- Zentrale Ablage (ziehen/ablage/parkplatz) ---------- */
.center-area{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.deck-area{ display:flex; gap:18px; align-items:center; justify-content:center; }

.pile{ 
  width:var(--card-w); height:var(--card-h); 
  border-radius:12px; position:relative;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 8px 20px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.45);
}
.pile.parking{ outline:3px dashed var(--ring); }

/* Chips mit Zähler */
.pile-count{
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  min-width:34px; height:26px; padding:0 8px;
  background: radial-gradient(120% 150% at 50% 10%, #6f402c, #412518);
  color:#ffe9d2; font-weight:800; font-size:14px; line-height:26px; text-align:center;
  border-radius:999px; border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.15);
}

/* ---------- Spielerbereiche / Slots ---------- */
.players-area{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.player-zone{ position:absolute; width:42%; height:32%; pointer-events:auto; overflow:visible; }
.player-zone.me{ outline: 2px solid rgba(255,255,255,.08); border-radius:16px; }
.player-zone.me.is-turn{
  outline-color: rgba(34,197,94,.35);
  box-shadow: 0 0 0 6px rgba(34,197,94,.10);
  animation: pulseTurn 1.7s ease-in-out infinite;
}
@keyframes pulseTurn{
  0%,100%{ box-shadow:0 0 0 6px rgba(34,197,94,.10); }
  50%{    box-shadow:0 0 0 10px rgba(34,197,94,.18); }
}

.player-name{ 
  position:absolute; top:-34px; left:0; right:0; text-align:center; 
  color:#fff; font-weight:800; letter-spacing:.2px;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.slot-row{ display:flex; gap:18px; justify-content:center; align-items:flex-end; margin-top:24px; }

.stack{
  position:relative;
  width:var(--card-w); height:var(--card-h);
  border-radius:12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.stack.empty{
  background: rgba(255,255,255,.03);
  border: 2px dashed rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 6px 16px rgba(0,0,0,.28);
}

/* ---------- Karten (Stapel) ---------- */
.stack .p-card{ position:absolute; bottom:0; left:0; }
.stack .p-card:not(:first-child){ transform: translateY(var(--stack-overlap)); }

/* ---------- Karten (Allgemein) ---------- */
.p-card{
  width:var(--card-w); height:var(--card-h);
  border-radius:12px; background:#fff; 
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08);
  user-select:none; overflow:hidden; border:1px solid rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.p-card.face-down{ background-image:url('/assets/cards/render.php?c=BACK'); background-size:cover; }
.p-card.dynamic{ background-image:none; }
.p-card.dynamic img{ width:100%; height:100%; display:block; border-radius:12px; }

/* ---------- Mini-Preview: nur bei Hover sichtbar ---------- */
.mini-stack{
  position:absolute; left:50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  display:none; z-index:1000; gap:6px; padding:6px 8px;
  border-radius:10px; background: rgba(0,0,0,.55);
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
  pointer-events:none;
}
.stack:hover .mini-stack{ display:flex; }

/* Minis nebeneinander (nicht stapeln) */
.mini-stack .p-card{
  position: relative !important;
  transform: none !important;
  width:  calc(var(--card-w) * var(--mini-scale));
  height: calc(var(--card-h) * var(--mini-scale));
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}

/* ---------- Hand ---------- */
.hand-area{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:10px; z-index:1; }
.hand-area .p-card{
  width: var(--hand-card-w);
  height: calc(var(--hand-card-w) * 1.4);
  transform: translateY(0) rotate(var(--rot,0deg));
}
.hand-area .p-card:hover{ transform: translateY(-8px) rotate(var(--rot,0deg)); box-shadow: 0 14px 24px rgba(0,0,0,.55); }
.hand-area .p-card:nth-child(1){ --rot:-2deg; }
.hand-area .p-card:nth-child(2){ --rot:-1deg; }
.hand-area .p-card:nth-child(3){ --rot:-.5deg; }
.hand-area .p-card:nth-child(4){ --rot:.0deg; }
.hand-area .p-card:nth-child(5){ --rot:.5deg; }
.hand-area .p-card:nth-child(6){ --rot:1deg; }
.hand-area .p-card:nth-child(7){ --rot:2deg; }

/* dezentes „Tray“ unter der Hand */
.hand-area::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%); bottom:6px;
  width:min(1100px, 94%); height: calc(var(--hand-card-w) * 1.55);
  border-radius:24px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 8px 22px rgba(255,255,255,.06);
  z-index:-1; pointer-events:none;
}

/* ---------- Hinweise / Overlays ---------- */
.turn-banner{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.52));
  color:#fff; font-weight:700; letter-spacing:.5px;
  padding: 10px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.wait-overlay::after{
  content: attr(data-waitmsg);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.65); color:#fff; padding:18px 24px; border-radius:12px;
  font-weight:700; letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 8px 22px rgba(255,255,255,.05);
}

/* legale Ziele */
.hint-target{
  outline: 4px solid var(--ring);
  box-shadow: 0 0 0 4px rgba(255,209,102,.25);
  animation: hintpulse 1s ease-in-out infinite alternate;
}
.hint-target.steal{
  outline-color: var(--steal);
  box-shadow: 0 0 0 4px rgba(59,130,246,.25);
}
@keyframes hintpulse{
  from{ outline-color:#ffd166; }
  to  { outline-color:#ffb703; }
}

/* Drag & Drop */
.drop-target{ outline:3px dashed rgba(255,255,255,.7); }

/* ---------- Aktionen / Buttons ---------- */
.actions{ position:absolute; right:18px; bottom:18px; display:flex; gap:10px; align-items:center; }
.actions .btn{
  border-radius:999px; padding:.6rem 1.1rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.btn-end-pulse{ animation: endpulse 1.3s ease-in-out infinite; }
@keyframes endpulse{
  0%,100%{ transform:scale(1); box-shadow:0 6px 14px rgba(0,0,0,.35); }
  50%{    transform:scale(1.03); box-shadow:0 10px 22px rgba(0,0,0,.45); }
}

/* ---------- Wartelobby-Overlay (falls genutzt) ---------- */
.lobby-pane{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  :root{ --card-w: 78px; --stack-overlap: -20px; }
  .hand-area::before{ height: calc(var(--hand-card-w) * 1.65); }
}
@media (max-width: 800px){
  :root{ --card-w: 72px; --hand-card-w: 66px; }
}


/* ===== Mini-Karten besser lesbar ===== */

/* Etwas größer: vorher ~0.42 → jetzt 0.54 */
:root{ --mini-scale: .88; }

/* Auf kleineren Screens nicht zu wuchtig */
@media (max-width: 980px){ :root{ --mini-scale: .50; } }
@media (max-width: 780px){ :root{ --mini-scale: .46; } }

/* Mehr Abstand & dezente Umrandung für Kontrast */
.mini-stack{ gap: 8px; padding: 8px 10px; }
.mini-stack .p-card{
  position: relative !important;
  transform: none !important;
  width:  calc(var(--card-w) * var(--mini-scale));
  height: calc(var(--card-h) * var(--mini-scale));
  background:#fff;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
  transform-origin: bottom center !important;
}

/* Beim Überfahren einzelne Mini noch ein bisschen „lupe“ */
.mini-stack .p-card:hover{
  transform: scale(1.14) !important;
  z-index: 2;
}

/* Damit die Vorschau nie abgeschnitten wird */
.players-area, .player-zone{ overflow: visible; }

/* statt ... fixed; */
.bg-wood { background: url('/assets/img/table-wood.jpg') center/cover no-repeat; min-height:100vh; }


/* Karten-IMG universell füllen (auch ohne .dynamic) */
.p-card img{
  width:100%; height:100%; display:block; border-radius:12px;
}

/* Braune/ blaue "Kartenrückseite" in der Mitte */
.pile .pile-back{
  position:absolute; inset:3px; border-radius:12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08);
}
.pile .pile-back.back-brown{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08)),
    radial-gradient(90% 120% at 20% 10%, #7a4b33, #4b2d1f);
  border:1px solid rgba(255,255,255,.15);
}
.pile .pile-back.back-blue{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.10)),
    radial-gradient(90% 120% at 20% 10%, #2e62c9, #1b3d82);
  border:1px solid rgba(255,255,255,.18);
}

/* Nur echte Slots sind Droptargets – optisch sauber */
#drawPile.drop-target, #discardPile.drop-target { outline: none !important; }


/* braune Rückseite = Ziehstapel, blaue = Ablage (Fallback-Farben inklusive) */
#drawPile{
  background: url('/assets/cards/render.php?c=BACK_BROWN') center/cover, #6b3f2b !important;
}
#discardPile{
  background: url('/assets/cards/render.php?c=BACK_BLUE') center/cover, #2c4da6 !important;
}
#parkingPile.parking{ outline:3px dashed #ffd166; }
#parkingPile .card img{ cursor:grab; }