:root{
      --bg0:#021b14;
      --bg1:#042f2e;
      --panel:#020617;
      --panel2:#0b1223;
      --border:#334155;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --accent:#22c55e;
      --danger:#ef4444;
      --warn:#f59e0b;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 50% 30%, rgba(34,197,94,.18), transparent 60%),
        radial-gradient(900px 500px at 20% 80%, rgba(245,158,11,.10), transparent 55%),
        radial-gradient(900px 500px at 80% 80%, rgba(59,130,246,.10), transparent 55%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
      min-height:100vh;
      padding-bottom:140px; /* Platz für Actions + MyCards */
    }

    /* ---------- Statusbar ---------- */
    #status-bar{
      position:sticky;
      top:0;
      z-index:50;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 14px;
      background:rgba(2,6,23,.92);
      border-bottom:1px solid rgba(51,65,85,.8);
      backdrop-filter: blur(8px);
    }
    #status-left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:240px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border:1px solid rgba(51,65,85,.8);
      background:rgba(11,18,35,.8);
      border-radius:999px;
      font-size:13px;
      color:var(--muted);
      white-space:nowrap;
    }
    .dot{
      width:9px;height:9px;border-radius:99px;display:inline-block;
      background:var(--danger);
      box-shadow:0 0 0 3px rgba(239,68,68,.15);
    }
    .dot.on{
      background:var(--accent);
      box-shadow:0 0 0 3px rgba(34,197,94,.15);
    }
    #room-pill strong{color:var(--text);font-weight:650}
    #status-right{
      display:flex;
      align-items:center;
      gap:10px;
    }
    button, input{
      font:inherit;
    }
    button{
      padding:8px 12px;
      border-radius:10px;
      border:1px solid rgba(51,65,85,.85);
      background:rgba(11,18,35,.85);
      color:var(--text);
      cursor:pointer;
      transition:.15s transform, .15s opacity;
    }
    button:hover{transform: translateY(-1px)}
    button:active{transform: translateY(0px); opacity:.9}
    button.primary{
      border-color: rgba(34,197,94,.7);
      background: rgba(34,197,94,.15);
    }
    button.danger{
      border-color: rgba(239,68,68,.7);
      background: rgba(239,68,68,.12);
    }
    button:disabled{
      opacity:.45;
      cursor:not-allowed;
      transform:none;
    }

    /* ---------- Layout ---------- */
    #container{
      display:flex;
      justify-content:center;
      padding:18px 14px;
      width: 100%;
    }

    #table-grid{
        width:100%;
        display:grid;

        grid-template-columns: 1fr;
        grid-template-rows: auto;

        gap:14px;
        align-items:start;
    }

    .panel{
      background:rgba(2,6,23,.72);
      border:1px solid rgba(51,65,85,.75);
      border-radius:14px;
      padding:12px;
      box-shadow: 0 18px 40px rgba(0,0,0,.25);
      min-width: 300px;
    }
    .panel h3{
      margin:0 0 10px 0;
      font-size:14px;
      letter-spacing:.3px;
      color:var(--muted);
      font-weight:650;
      text-transform:uppercase;
    }

    /* ---------- Lobby ---------- */
    #lobby{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      margin-bottom:14px;
    }
    #lobby input{
      width:100%;
      padding:9px 10px;
      border-radius:10px;
      border:1px solid rgba(51,65,85,.85);
      background:rgba(11,18,35,.75);
      color:var(--text);
      margin-bottom:8px;
    }
    .row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }

    /* ---------- Players list ---------- */
    #players-list .player{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(51,65,85,.55);
      background:rgba(11,18,35,.55);
      margin-bottom:8px;
      font-size:14px;
    }
    #players-list .left{
      display:flex;
      gap:8px;
      align-items:center;
      min-width:0;
    }
    .badge{
      font-size:12px;
      padding:2px 8px;
      border-radius:999px;
      border:1px solid rgba(51,65,85,.7);
      color:var(--muted);
      background:rgba(2,6,23,.3);
      white-space:nowrap;
    }
    .badge.folded{border-color: rgba(239,68,68,.65); color:#fecaca; background: rgba(239,68,68,.08);}
    .badge.allin{border-color: rgba(245,158,11,.65); color:#fde68a; background: rgba(245,158,11,.08);}
    .badge.turn{border-color: rgba(34,197,94,.75); color:#bbf7d0; background: rgba(34,197,94,.10);}

    .name{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      max-width:140px;
      font-weight:650;
    }
    .stack{
      color:var(--text);
      font-variant-numeric: tabular-nums;
      font-weight:700;
    }

    /* ---------- Table center ---------- */
    #turn-info{
      text-align:center;
      margin-bottom:10px;
      font-size:18px;
      font-weight:750;
    }
    #turn-info small{
      display:block;
      margin-top:4px;
      font-size:13px;
      color:var(--muted);
      font-weight:600;
    }

    #community-area{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      padding:10px 0;
      min-height:140px;
    }

    .cards{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
    }

    #pot-box{
      min-width:140px;
      text-align:center;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(51,65,85,.75);
      background:rgba(11,18,35,.55);
      margin-top:90px;
    }
    #pot-box .label{
      color:var(--muted);
      font-size:12px;
      letter-spacing:.3px;
      text-transform:uppercase;
      font-weight:650;
    }
    #pot-box .value{
      font-size:26px;
      font-weight:800;
      margin-top:3px;
      font-variant-numeric: tabular-nums;
    }

    /* ---------- My stack (left-top) ---------- */
    #my-stack-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(51,65,85,.8);
      background:rgba(11,18,35,.8);
      font-size:13px;
      color:var(--muted);
    }
    #my-stack-pill strong{
      color:var(--text);
      font-weight:800;
      font-variant-numeric: tabular-nums;
    }

    /* ---------- My cards (bottom center) ---------- */
    #my-cards{
      position:fixed;
      left:0; right:0;
      bottom:74px;
      display:flex;
      justify-content:center;
      pointer-events:none;
      z-index:40;
    }
    #my-cards .panel{
      pointer-events:auto;
      padding:10px 12px;
      background:rgba(2,6,23,.55);
    }

    /* ---------- Actions (bottom) ---------- */
    #actions-panel{
      position:fixed;
      left:0; right:0;
      bottom:12px;
      display:flex;
      justify-content:center;
      z-index:45;
    }
    #actions-panel .panel{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      background:rgba(2,6,23,.82);
    }
    #not-your-turn{
      color:var(--muted);
      font-weight:650;
      padding:4px 8px;
    }
    #raiseAmount{
      width:120px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid rgba(51,65,85,.85);
      background:rgba(11,18,35,.75);
      color:var(--text);
    }

    /* ---------- Log (collapsible) ---------- */
    #log-panel{
      position:fixed;
      left:12px;
      bottom:12px;
      z-index:46;
      width:min(420px, calc(100vw - 24px));
    }
    #log-toggle{
      width:100%;
      text-align:left;
      border-radius:14px;
      background:rgba(2,6,23,.86);
    }
    #log{
      margin-top:8px;
      display:none;
      max-height:220px;
      overflow:auto;
      background:rgba(2,6,23,.86);
      border:1px solid rgba(51,65,85,.75);
      border-radius:14px;
      padding:10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size:12px;
      line-height:1.35;
    }
    .logline{opacity:.95}
    .logmeta{opacity:.6}

    /* ---------- Winner popup ---------- */
    #winner-popup{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.68);
      z-index:60;
      padding:18px;
    }
    #winner-popup .modal{
      width:min(520px, 100%);
      background:rgba(2,6,23,.95);
      border:1px solid rgba(51,65,85,.85);
      border-radius:18px;
      padding:16px;
      box-shadow: 0 25px 70px rgba(0,0,0,.45);
      text-align:center;
    }
    #winner-popup h2{
      margin:0 0 8px 0;
      font-size:20px;
    }
    #winner-popup p{
      margin:0 0 14px 0;
      color:var(--muted);
      font-weight:650;
    }

    #table {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  width: 100%;
}

#table::before {
  content: "";
  position: absolute;
  inset: -20px;
  background:
    radial-gradient(ellipse at center,
      rgba(16,185,129,0.35) 0%,
      rgba(6,78,59,0.85) 65%,
      rgba(2,6,23,0.95) 100%
    );
  border-radius: 50%;
  z-index: 0;
}

#table > * {
  position: relative;
  z-index: 2;
}

#table-seats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;

  background: rgba(2,6,23,.9);
  border: 1px solid rgba(51,65,85,.7);
  border-radius: 10px;
  padding: 10px 14px;

  font-size: 14px;
  min-width: 120px;
}

.seat-name { font-weight: 700; }
.seat-stack { color: var(--muted); }

.seat-badges {
  margin-top: 4px;
  display: flex;
  gap: 4px;
  justify-content: center;
}

    /* ---------- Card sprites ---------- */
    .card{
      border-radius:6px;
      box-shadow:0 10px 25px rgba(0,0,0,0.4);
      background-color:white;
      overflow:hidden;
    }

    #community-cards .card {
        width: 54px;        /* vorher ~90px */
        height: auto;
    }

    .table-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    #community-area {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        min-height: 120px;
    }

    #game {
        width: 100%;
    }

    /* Responsive */
    @media (max-width: 900px){
      #table-grid{
        grid-template-columns: 1fr;
      }
      #players-list{order:2}
      #table{order:1}
      #right-col{order:3}
      #my-stack-pill{display:none}
    }

    /* ================= KOSMETIK: Panels verkleinern ================= */

/* Mitspieler & Status schmaler halten */
#players-panel,
#right-col {
  max-width: 350px;
  min-width: 260px;      /* verhindert „Zusammenfallen“ */
}

/* Inhalte etwas kompakter */
#players-panel .panel,
#right-col .panel {
  padding: 10px;
}

/* Überschriften minimal ruhiger */
#players-panel h3,
#right-col h3 {
  font-size: 13px;
  margin-bottom: 8px;
}

/* Player-Zeilen etwas enger */
#players-list .player {
  padding: 6px 8px;
  font-size: 13px;
}

/* Badges kompakter */
#players-list .badge,
#right-col .badge {
  font-size: 11px;
  padding: 2px 6px;
}

.seat-badges{
  margin-top:4px;
  display:flex;
  gap:4px;
  justify-content:center;
}
.seat-badges .badge{
  font-size:10px;
  padding:1px 6px;
}

#table {
  position: relative;   /* WICHTIG: Referenz für absolute Kinder */
}

#table-seats {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


#table {
  position: relative;
  overflow: visible; /* 🔑 erlaubt Seats außerhalb */
}

#table-seats {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 160%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#right-col {
  position: fixed;
  top: 72px;          /* unterhalb der Status-Bar */
  right: 16px;
  z-index: 48;

  max-width: 350px;
}

/* ================= Blind Tokens ================= */

.blind-token {
  position: absolute;
  top: -12px;
  right: -12px;

  width: 26px;
  height: 26px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;

  box-shadow: 0 4px 10px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.25);
  z-index: 50;
}

.blind-token.sb {
  background: linear-gradient(145deg, #3b82f6, #2563eb);
  color: #fff;
}

.blind-token.bb {
  background: linear-gradient(145deg, #facc15, #eab308);
  color: #111;
}

/* ================= Active Player Highlight ================= */

.seat.active {
  box-shadow:
    0 0 0 2px rgba(34,197,94,.8),
    0 0 18px rgba(34,197,94,.6);
  animation: seatPulse 1.6s ease-in-out infinite;
  z-index: 10;
}

@keyframes seatPulse {
  0% {
    box-shadow:
      0 0 0 2px rgba(34,197,94,.9),
      0 0 14px rgba(34,197,94,.6);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(34,197,94,.35),
      0 0 28px rgba(34,197,94,.9);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(34,197,94,.9),
      0 0 14px rgba(34,197,94,.6);
  }
}

.seat.placeholder {
  opacity: 0.35;
  background: rgba(2,6,23,.45);
  border-style: dashed;
}

.seat.placeholder .seat-name {
  font-style: italic;
  color: var(--muted);
}

/* Aktiver Spieler */
.seat.active {
  animation: seatPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(34,197,94,.55),
              0 0 18px rgba(34,197,94,.35);
}

@keyframes seatPulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.community-slot {
  width: 80px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.last-action {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 2px;
  color: #ddd;
}

/* =========================================================
   GLOBAL VISIBILITY GATE
   ========================================================= */

#container {
  display: none;
}

/* sobald verbunden */
body.ws-connected #container {
  display: block;
}