/* Advanced style updates: improved accessibility, tighter spacing and responsive tweaks */
/* Full CSS with PRĀSTA animations and particle canvas support */
/* Enhanced visibility for overlays: larger, centered, dim backdrop-friendly styles for Halloween theme */
:root{
  --bg-dark:#0a0f1a;
  --bg-mid:#141b2d;
  --accent-orange:#1e3a8a;
  --accent-pumpkin:#1e40af;
  --muted:#d7dbe0;
  --card-bg:#fff7ee;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 10px 30px rgba(0,0,0,0.6);
  --tap-size: 48px;
  --turn-green: #32d74b;
  --overlay-z: 99999;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--muted);background:
  radial-gradient(800px 400px at 10% 10%, rgba(30,58,138,0.15), transparent 6%),
  linear-gradient(180deg,var(--bg-dark),var(--bg-mid));
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.wrap{ display:grid; grid-template-columns:320px 1fr; gap:18px; padding:28px; align-items:start; min-height:100vh; }
.sidebar{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05)); padding:18px; border-radius:12px; box-shadow:var(--shadow); border:1px solid rgba(30,58,138,0.2); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--accent-orange); }
.brand::before{ content:'😉'; font-size:22px; }
.panel{ margin-top:12px; background:var(--glass); padding:12px; border-radius:8px; }
.field{ display:block; font-size:14px; margin-bottom:8px; }
input[type=text], select { width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.18); color:var(--muted); font-size:15px; }
.inline{ display:flex; align-items:center; gap:8px; }
.btn{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--muted); cursor:pointer; font-weight:700; min-height:var(--tap-size); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn.large{ padding:12px 14px; font-size:15px; }
.btn.primary{ background: linear-gradient(90deg,#1e3a8a,#1e40af); color:#fff; border:0; box-shadow: 0 8px 26px rgba(30,58,138,0.3); }
.btn.ghost{ border-style:dashed; background:transparent; }
.topbar{ display:flex; gap:12px; align-items:center; color:var(--muted); font-size:14px; }
.flex-spacer{ flex:1; }
.poker-wrap{ display:flex; justify-content:center; align-items:center; }
.poker-table{ width:720px; height:420px; border-radius:50%; background: radial-gradient(circle at 50% 30%, rgba(20,10,10,0.75), rgba(10,6,6,0.9)); position:relative; box-shadow: 0 20px 60px rgba(0,0,0,0.7); border:6px solid rgba(30,58,138,0.2); overflow:visible; touch-action:none; }
.table-area{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:380px; height:220px; display:flex; gap:12px; align-items:center; justify-content:center; pointer-events:auto; }
.seat{ position:absolute; width:150px; height:96px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:700; background: rgba(0,0,0,0.12); border-radius:10px; border:1px solid rgba(255,255,255,0.02); box-shadow:0 8px 18px rgba(0,0,0,0.5); padding:8px; text-align:center; font-size:14px; flex-direction:column; gap:6px; }
.seat.empty{ opacity:0.55; font-style:italic; color:rgba(255,255,255,0.7); height:72px; }
.seat.seat-0{ left:50%; top:6%; transform:translate(-50%,-50%); }
.seat.seat-1{ right:6%; top:50%; transform:translate(50%,-50%); }
.seat.seat-2{ left:50%; bottom:6%; transform:translate(-50%,50%); }
.seat.seat-3{ left:6%; top:50%; transform:translate(-50%,-50%); }
/* seat-4 and seat-5 removed to keep tables to 4 seats maximum */
.card, .build { width:86px; height:118px; border-radius:12px; background: linear-gradient(180deg,#fff7ee,#ffefdc); color:#1e140f; display:flex; flex-direction:column; justify-content:space-between; padding:8px; box-shadow: 0 12px 30px rgba(15,6,6,0.45); user-select:none; touch-action:manipulation; }
.card.selected{ outline: 4px solid rgba(30,58,138,0.5); transform: translateY(-6px); box-shadow: 0 20px 46px rgba(30,58,138,0.3); }
.build { background: linear-gradient(180deg,#fff4e8,#ffe7d2); border: 1px dashed rgba(0,0,0,0.06); }
.hand-area{ display:flex; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-radius:12px; min-height:132px; align-items:center; overflow:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.hand-area .card{ scroll-snap-align:center; min-width:86px; }
.collected-area{ display:flex; gap:8px; flex-wrap:wrap; min-height:40px; padding-top:6px; }
.players-list{ display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
.player-entry{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.02); padding:8px; border-radius:8px; justify-content:space-between; }
.player-entry .turn-dot { width:10px; height:10px; border-radius:50%; background: rgba(0,0,0,0.12); display:inline-block; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.16); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.player-entry .turn-dot.active { background: linear-gradient(90deg, var(--turn-green), #28c84d); box-shadow: 0 6px 18px rgba(50,215,75,0.14); transform: scale(1.15); }
.player-entry .player-name { display:inline-block; vertical-align:middle; }

 /* New: seat-level turn indicator */
.seat .turn-dot { width:12px; height:12px; border-radius:50%; background: rgba(0,0,0,0.12); display:inline-block; margin-right:8px; vertical-align:middle; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.16); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.seat .turn-dot.active { background: linear-gradient(90deg, var(--turn-green), #28c84d); box-shadow: 0 8px 20px rgba(50,215,75,0.16); transform: scale(1.12); }
.seat.turn-active { border-color: rgba(50,215,75,0.12); box-shadow: 0 12px 36px rgba(50,215,75,0.04); }

/* seat avatar updated — larger and centered above name */
.seat .seat-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; margin:0 auto; border:2px solid rgba(255,255,255,0.04); background:rgba(255,255,255,0.02); font-size:22px; line-height:56px; text-align:center; }

/* top avatar placeholder */
#topAvatar { width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.04); }

/* ... rest unchanged ... */

.log{ margin-top:10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:10px; border-radius:8px; max-height:160px; overflow:auto; font-size:13px; color:#ffd; }
.chat-panel { margin-top:12px; }
.chat-log { max-height:180px; overflow:auto; background:rgba(0,0,0,0.06); padding:8px; border-radius:8px; font-size:13px; }
.chat-line { margin-bottom:6px; }
.chat-line .who { font-weight:700; margin-right:6px; color:#ffd; }
.chat-line .msg { color: #fff; opacity:0.9; }
.toast-area{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:100001; }
.toast{ min-width:240px; max-width:420px; padding:12px 14px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.5); color:#fff; background:linear-gradient(90deg,#1e3a8a,#1e40af); font-weight:800; animation:toastIn .28s ease forwards; font-size:15px; }
@keyframes toastIn{ from{opacity:0;transform:translateY(8px) scale(.98)} to{opacity:1;transform:none} }
.winner-modal{ position:fixed; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.7); z-index:100020; }
.winner-card{ background:linear-gradient(180deg, #fffdfa, #fff3e6); color:#140a00; padding:28px; border-radius:18px; min-width:360px; box-shadow: 0 30px 80px rgba(0,0,0,0.75); text-align:center; }

/* PRĀSTA overlay (more visible) */
.prasta-overlay{
  position: fixed;
  left:50%;
  top:35%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:100002;
  pointer-events:none;
  color:#fff9ee;
  background: linear-gradient(90deg, rgba(50,20,40,0.92), rgba(40,10,40,0.85));
  border:3px solid rgba(255,140,43,0.28);
  padding:22px 30px;
  border-radius:18px;
  box-shadow:0 28px 80px rgba(0,0,0,0.85);
  font-size:46px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:16px;
  opacity:0;
  transform-origin:center center;
  transition: transform 420ms cubic-bezier(.2,.9,.3,1), opacity 300ms ease;
  text-shadow: 0 12px 36px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.5);
}
.prasta-overlay.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  animation:prastaPulse 1000ms cubic-bezier(.2,.9,.3,1);
}
.prasta-overlay.penalty { background: linear-gradient(90deg, rgba(90,20,20,0.98), rgba(30,0,0,0.9)); border-color: rgba(255,70,70,0.42); color: #ffecec; }
@keyframes prastaPulse {
  0% { transform: translate(-50%,-50%) scale(.9); opacity:0; filter: blur(1px); }
  30% { transform: translate(-50%,-50%) scale(1.18); }
  60% { transform: translate(-50%,-50%) scale(0.98); }
  100% { transform: translate(-50%,-50%) scale(1); opacity:1; }
}

/* Collect overlay for special card collection (♦10 and ♣2) - larger and centered with icon */
.collect-overlay{
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translate(-50%,-50%) scale(.96);
  z-index:100002;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 22px;
  border-radius:14px;
  font-weight:900;
  font-size:20px;
  opacity:0;
  transition: transform 320ms ease, opacity 240ms ease;
  box-shadow: 0 22px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.collect-overlay.show{ opacity:1; transform: translate(-50%,-50%) scale(1); animation:collectPulse 920ms cubic-bezier(.2,.9,.3,1); }
.collect-overlay.diamond{
  background: linear-gradient(90deg, rgba(255,180,60,0.14), rgba(40,10,45,0.12));
  border: 2px solid rgba(255,200,80,0.12);
  color: #fff7df;
  box-shadow: 0 12px 40px rgba(255,140,43,0.08), 0 30px 40px rgba(80,20,80,0.12) inset;
}
.collect-overlay.club{
  background: linear-gradient(90deg, rgba(60,160,80,0.08), rgba(20,30,20,0.06));
  border: 2px solid rgba(40,180,90,0.12);
  color: #e8fff0;
  box-shadow: 0 12px 40px rgba(40,180,90,0.04), 0 30px 40px rgba(20,30,20,0.12) inset;
}
.collect-overlay .card-mark{ font-size:40px; margin-right:10px; font-weight:900; }
@keyframes collectPulse{
  0% { transform: translate(-50%,-50%) scale(.9); opacity:0; filter: hue-rotate(-10deg); }
  35% { transform: translate(-50%,-50%) scale(1.12); opacity:1; filter: hue-rotate(0deg) drop-shadow(0 12px 28px rgba(0,0,0,0.6)); }
  75% { transform: translate(-50%,-50%) scale(0.98); }
  100% { transform: translate(-50%,-50%) scale(1); }
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablets and below (≤ 1024px) */
@media (max-width: 1024px) {
  .wrap {
    grid-template-columns: 280px 1fr;
    gap: 12px;
    padding: 16px;
  }
  
  .poker-table {
    width: 600px;
    height: 350px;
  }
  
  .table-area {
    width: 320px;
    height: 180px;
  }
  
  .seat {
    width: 120px;
    height: 80px;
    font-size: 12px;
  }
  
  .seat .seat-avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
    line-height: 48px;
  }
}

/* Mobile landscape and small tablets (≤ 768px) */
@media (max-width: 768px) {
  .wrap {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
  
  .sidebar {
    padding: 12px;
    border-radius: 8px;
  }
  
  .poker-table {
    width: 100%;
    max-width: 500px;
    height: 300px;
  }
  
  .table-area {
    width: 280px;
    height: 160px;
    gap: 8px;
  }
  
  .seat {
    width: 100px;
    height: 72px;
    font-size: 11px;
    padding: 6px;
  }
  
  .seat.empty {
    height: 60px;
  }
  
  .seat .seat-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
  }
  
  .card, .build {
    width: 72px;
    height: 98px;
    padding: 6px;
  }
  
  .hand-area {
    gap: 8px;
    padding: 8px;
    min-height: 108px;
  }
  
  .hand-area .card {
    min-width: 72px;
  }
  
  .btn {
    padding: 8px 10px;
    font-size: 13px;
    min-height: 44px;
  }
  
  .btn.large {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
  }
  
  .panel {
    padding: 10px;
  }
  
  /* User panel mobile */
  .user-panel {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px !important;
  }
  
  .user-avatar {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Admin panel mobile */
  .admin-panel {
    padding: 8px !important;
  }
  
  .admin-player-item {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
  
  .admin-actions {
    flex-direction: row !important;
    justify-content: stretch;
  }
  
  .admin-actions .btn {
    flex: 1;
  }
}

/* Mobile portrait (≤ 480px) */
@media (max-width: 480px) {
  .wrap {
    padding: 8px;
    gap: 8px;
  }
  
  .sidebar {
    padding: 10px;
  }
  
  .brand::before {
    font-size: 18px;
  }
  
  .poker-table {
    width: 100%;
    max-width: 100%;
    height: 240px;
    border-width: 3px;
  }
  
  .table-area {
    width: 200px;
    height: 120px;
    gap: 6px;
  }
  
  .seat {
    width: 80px;
    height: 60px;
    font-size: 10px;
    padding: 4px;
    border-radius: 6px;
  }
  
  .seat.empty {
    height: 50px;
  }
  
  .seat .seat-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    border-width: 1px;
  }
  
  .seat .turn-dot {
    width: 8px;
    height: 8px;
    margin-right: 4px;
  }
  
  .card, .build {
    width: 60px;
    height: 82px;
    padding: 4px;
    border-radius: 8px;
  }
  
  .hand-area {
    gap: 6px;
    padding: 6px;
    min-height: 90px;
  }
  
  .hand-area .card {
    min-width: 60px;
  }
  
  input[type=text], select {
    padding: 8px 10px;
    font-size: 14px;
  }
  
  .btn {
    padding: 8px;
    font-size: 12px;
    min-height: 42px;
  }
  
  .btn.large {
    padding: 9px 10px;
    font-size: 13px;
  }
  
  .btn.small {
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-height: 36px;
  }
  
  .panel {
    padding: 8px;
    margin-top: 8px;
  }
  
  .field {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .topbar {
    font-size: 12px;
  }
  
  .row {
    flex-direction: column;
    gap: 8px;
  }
  
  .row .btn {
    width: 100%;
  }
  
  .actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .actions .btn {
    width: 100%;
  }
  
  /* User panel mobile portrait */
  .user-panel {
    padding: 8px !important;
  }
  
  #topAvatar, .user-avatar {
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Admin panel mobile portrait */
  .admin-panel .panel {
    padding: 8px;
  }
  
  .admin-player-name {
    font-size: 13px;
  }
  
  .admin-player-meta {
    font-size: 11px !important;
  }
  
  /* Theme customization mobile */
  .color-btn {
    height: 36px !important;
  }
  
  /* Toast mobile */
  .toast-area {
    right: 8px;
    bottom: 8px;
    max-width: calc(100vw - 16px);
  }
  
  .toast {
    min-width: auto;
    max-width: 100%;
    font-size: 13px;
    padding: 10px 12px;
  }
  
  /* Winner modal mobile */
  .winner-card {
    min-width: auto;
    max-width: calc(100vw - 32px);
    padding: 20px;
  }
  
  /* PRASTA overlay mobile */
  .prasta-overlay {
    font-size: 32px;
    padding: 16px 20px;
    top: 30%;
  }
  
  /* Collect overlay mobile */
  .collect-overlay {
    font-size: 26px;
    padding: 16px 20px;
  }
  
  .collect-overlay .card-mark {
    font-size: 30px;
  }
  
  /* Log and chat mobile */
  .log {
    max-height: 120px;
    font-size: 12px;
    padding: 8px;
  }
  
  .chat-log {
    max-height: 140px;
    font-size: 12px;
    padding: 6px;
  }
  
  /* Players list mobile */
  .players-list {
    max-height: 200px;
  }
  
  .player-entry {
    padding: 6px;
    font-size: 12px;
  }
  
  /* Collected area mobile */
  .collected-area {
    gap: 6px;
  }
}

/* Extra small mobile (≤ 360px) */
@media (max-width: 360px) {
  .poker-table {
    height: 200px;
  }
  
  .table-area {
    width: 160px;
    height: 100px;
    gap: 4px;
  }
  
  .seat {
    width: 70px;
    height: 52px;
    font-size: 9px;
    padding: 3px;
  }
  
  .seat.empty {
    height: 44px;
  }
  
  .seat .seat-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
  }
  
  .card, .build {
    width: 50px;
    height: 68px;
    padding: 3px;
    border-radius: 6px;
  }
  
  .hand-area {
    gap: 4px;
    padding: 4px;
    min-height: 76px;
  }
  
  .hand-area .card {
    min-width: 50px;
  }
  
  .btn {
    font-size: 11px;
    padding: 6px;
  }
  
  .btn.small {
    font-size: 10px !important;
    padding: 5px 6px !important;
  }
  
  .prasta-overlay {
    font-size: 24px;
    padding: 12px 16px;
  }
  
  .collect-overlay {
    font-size: 20px;
    padding: 12px 16px;
  }
  
  .winner-card {
    padding: 16px;
    font-size: 14px;
  }
}

/* Landscape orientation optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  .wrap {
    grid-template-columns: 240px 1fr;
    padding: 8px;
  }
  
  .poker-table {
    height: 250px;
  }
  
  .sidebar {
    max-height: calc(100vh - 16px);
    overflow-y: auto;
  }
  
  .panel {
    margin-top: 8px;
  }
  
  .log, .chat-log {
    max-height: 100px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  
  .card:active {
    transform: scale(0.98);
  }
  
  /* Increase tap targets */
  .btn {
    min-height: 48px;
    min-width: 48px;
  }
  
  .btn.small {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Better scrolling for touch */
  .hand-area {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  .log, .chat-log, .players-list {
    -webkit-overflow-scrolling: touch;
  }
}

/* ... remaining CSS (unchanged) ... */