/* =========================================
   Tretuz – Neon Gold Gradient Theme
   ========================================= */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-primary:#080808;
  --bg-secondary:#0e0e0e;
  --bg-card:#121212;
  --bg-card-hover:#1a1a1a;
  --bg-input:#0a0a0a;
  --border:#1c1c1c;
  --border-light:#2a2a2a;
  --text:#f0ece4;
  --text-dim:#a09880;
  --text-muted:#605840;
  --accent:#d4a520;
  --accent-hover:#e8b828;
  --accent-dark:#b08818;
  --gold:#ffc107;
  --gold-dark:#e5a800;
  --gold-glow:rgba(255,193,7,.15);
  --red:#ff3d57;
  --blue:#2979ff;
  --green-felt:#1b5e20;
  --green-felt-light:#2e7d32;
  --purple:#7c4dff;
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:0 8px 48px rgba(0,0,0,.7);
  --font:'Segoe UI','Inter',system-ui,-apple-system,sans-serif;
  --transition:all .2s ease;
  --glow-gold:0 0 20px rgba(212,165,32,.15),0 0 40px rgba(212,165,32,.05);
  --gradient-gold:linear-gradient(135deg,#ffd54f,#ffb300,#ff8f00);
  --gradient-gold-subtle:linear-gradient(135deg,rgba(255,193,7,.12),rgba(212,165,32,.05));
}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-primary);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--accent-hover)}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}

/* SVG Icon helpers */
.svg-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:1}
.svg-icon svg{width:100%;height:100%}
.stat-svg-icon{color:currentColor;opacity:.85}
.stat-card.accent .stat-svg-icon{color:var(--accent)}
.stat-card.blue .stat-svg-icon{color:var(--blue)}
.stat-card.gold .stat-svg-icon{color:var(--gold)}
.stat-card.red .stat-svg-icon{color:var(--red)}
.stat-card.green .stat-svg-icon{color:#4ade80}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;transition:var(--transition);white-space:nowrap}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--gradient-gold);color:#111}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(255,193,7,.35);filter:brightness(1.1)}
.btn-gold{background:var(--gradient-gold);color:#111}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(255,193,7,.35)}
.btn-danger{background:linear-gradient(135deg,var(--red),#cc0022);color:#fff}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,61,87,.3)}
.btn-ghost{background:transparent;border:1px solid var(--border-light);color:var(--text-dim)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:6px 14px;font-size:.8rem;border-radius:6px}
.btn-lg{padding:14px 28px;font-size:1rem}
.btn-full{width:100%;justify-content:center}
.btn-pill{border-radius:50px;padding:10px 24px}
.btn-icon{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}

/* ---------- Form inputs ---------- */
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-size:.85rem;color:var(--text-dim);font-weight:500}
.form-input{width:100%;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.9rem;transition:var(--transition);outline:none}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,165,32,.12)}
.form-input::placeholder{color:var(--text-muted)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a09880' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:12px;font-size:.85rem;animation:fadeIn .3s ease}
.alert-error{background:rgba(255,61,87,.12);border:1px solid rgba(255,61,87,.25);color:var(--red)}
.alert-success{background:rgba(212,165,32,.12);border:1px solid rgba(212,165,32,.25);color:var(--accent)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;width:90%;max-width:480px;max-height:85vh;overflow-y:auto;transform:scale(.9);transition:transform .3s ease;box-shadow:var(--shadow-lg)}
.modal-overlay.active .modal{transform:scale(1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.modal-header h2{font-size:1.2rem;font-weight:700}
.modal-close{width:32px;height:32px;border-radius:50%;background:var(--bg-input);border:1px solid var(--border);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);font-size:1.2rem;line-height:1}
.modal-close:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* =========================================
   LOGIN PAGE
   ========================================= */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:-webkit-fill-available;background:var(--bg-primary);background-image:radial-gradient(ellipse at 50% 30%,rgba(212,165,32,.06) 0%,transparent 60%);padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 40px;width:100%;max-width:420px;box-shadow:var(--shadow-lg),var(--glow-gold)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo h1{font-size:2rem;font-weight:800;background:var(--gradient-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-logo p{color:var(--text-dim);font-size:.9rem;margin-top:4px}
.login-logo .logo-icon{width:64px;height:64px;margin:0 auto 16px;background:var(--gradient-gold);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:2rem;box-shadow:0 4px 20px rgba(255,193,7,.2)}
.auth-tabs{display:flex;gap:0;margin-bottom:20px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}
.auth-tab{flex:1;padding:10px;background:var(--bg-input);border:none;color:var(--text-dim);font-size:.9rem;font-weight:600;transition:var(--transition);cursor:pointer}
.auth-tab.active{background:var(--gradient-gold);color:#111}
.auth-tab:hover:not(.active){background:var(--bg-card-hover);color:var(--text)}

/* =========================================
   TOP NAVIGATION
   ========================================= */
.top-nav{position:sticky;top:0;z-index:100;background:rgba(8,8,8,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;width:100%}
/* Full-width nav wrapper to keep border full */
body:has(.top-nav){background:var(--bg-primary)}
.top-nav-wrap{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);background:rgba(8,8,8,.95);backdrop-filter:blur(12px)}
.nav-left{display:flex;align-items:center;gap:32px}
.nav-logo{font-size:1.3rem;font-weight:800;background:var(--gradient-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:8px;text-decoration:none}
.nav-logo svg{-webkit-text-fill-color:initial}
.nav-logo span{font-size:1.5rem}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:8px 16px;border-radius:var(--radius-sm);color:var(--text-dim);font-size:.9rem;font-weight:500;transition:var(--transition)}
.nav-links a:hover,.nav-links a.active{color:var(--gold);background:rgba(212,165,32,.08)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-balance{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;font-weight:600;font-size:.9rem;cursor:pointer;transition:var(--transition);text-decoration:none;color:var(--text)}
.nav-balance:hover{border-color:var(--accent);color:var(--text)}
.nav-balance .coin{color:var(--gold);font-size:1.1rem}
.nav-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 12px;border-radius:var(--radius-sm);transition:var(--transition);position:relative}
.nav-user:hover{background:var(--bg-card)}
.nav-avatar{width:36px;height:36px;border-radius:50%;background:var(--gradient-gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#111;flex-shrink:0}
.nav-username{font-size:.9rem;font-weight:500}
.nav-user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:8px;min-width:180px;box-shadow:var(--shadow-lg);z-index:200;display:none}
.nav-user-dropdown.open{display:block}
.nav-user-dropdown a,.nav-user-dropdown button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;border:none;background:none;color:var(--text-dim);font-size:.85rem;border-radius:6px;transition:var(--transition);text-align:left;cursor:pointer}
.nav-user-dropdown a:hover,.nav-user-dropdown button:hover{background:var(--bg-input);color:var(--gold)}

/* =========================================
   LOBBY PAGE
   ========================================= */
.lobby-layout{display:flex;min-height:calc(100vh - 60px);max-width:1400px;margin:0 auto}
.lobby-main{flex:1;padding:24px;overflow-y:auto}
.lobby-sidebar{width:320px;background:var(--bg-secondary);border-left:1px solid var(--border);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}

.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-header h1{font-size:1.5rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase}

/* Filter toggle button */
.filter-toggle-btn{margin-bottom:12px}
.filter-toggle-btn .filter-chevron{transition:transform .3s ease;flex-shrink:0}

/* Filters */
.filters-bar{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);align-items:flex-end;overflow:hidden;max-height:500px;transition:max-height .35s ease,padding .35s ease,margin .35s ease,opacity .35s ease,border .35s ease;opacity:1}
.filters-bar.filters-collapsed{max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;opacity:0;border-color:transparent}
.filter-group{display:flex;flex-direction:column;gap:6px}
.filter-group label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.filter-input-wrap{position:relative;display:flex;align-items:center}
.filter-input-wrap .search-icon{position:absolute;left:12px;color:var(--text-muted);pointer-events:none;display:flex}
.filter-input-wrap input{padding-left:36px}
.filter-input{padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.85rem;width:160px;outline:none;transition:var(--transition)}
.filter-input:focus{border-color:var(--accent)}
.filter-toggle{display:flex;gap:2px;background:var(--bg-input);border-radius:6px;padding:2px;border:1px solid var(--border)}
.filter-toggle button{padding:8px 14px;border:none;background:transparent;color:var(--text-dim);font-size:.8rem;border-radius:4px;transition:var(--transition);display:flex;align-items:center;gap:4px}
.filter-toggle button.active{background:var(--gradient-gold);color:#111}
.filter-toggle button:hover:not(.active){color:var(--text)}
.player-count-filter{display:flex;gap:2px;background:var(--bg-input);border-radius:6px;padding:2px;border:1px solid var(--border)}
.player-count-filter button{width:32px;height:32px;border:none;background:transparent;color:var(--text-dim);font-size:.8rem;font-weight:600;border-radius:4px;transition:var(--transition)}
.player-count-filter button.active{background:var(--gradient-gold);color:#111}
.player-count-filter button:hover:not(.active){color:var(--text)}
.clear-filters{display:flex;align-items:flex-end}
.clear-filters button{padding:10px 16px;border:1px solid var(--border);background:transparent;color:var(--text-muted);border-radius:6px;font-size:.8rem;transition:var(--transition);display:flex;align-items:center;gap:6px}
.clear-filters button:hover{border-color:var(--red);color:var(--red)}

/* Tables grid */
.tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.table-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);cursor:pointer;position:relative}
.table-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,165,32,.12)}
.table-card-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.table-card-header .table-uid{font-size:.75rem;color:var(--text-muted);font-family:monospace}
.table-card-header .table-bet{font-weight:700;color:var(--gold);font-size:.95rem}
.table-card-header .table-lock{color:var(--text-muted);display:flex;align-items:center}
.table-card-body{position:relative;padding:24px 20px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at center,rgba(212,165,32,.06),transparent 70%)}
.mini-table{width:200px;height:120px;background:radial-gradient(ellipse,#2a4a1a,#1a3510);border:3px solid #3a5a2a;border-radius:50%;position:relative;box-shadow:inset 0 0 20px rgba(0,0,0,.3),0 2px 12px rgba(0,0,0,.3)}
.mini-table-players{position:absolute;inset:-16px;pointer-events:none}
.mini-seat{position:absolute;width:28px;height:28px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:var(--text-muted);transition:var(--transition)}
.mini-seat.occupied{border-color:var(--accent);background:var(--gradient-gold);color:#111}
.mini-seat.s1{top:0;left:50%;transform:translateX(-50%)}
.mini-seat.s2{top:15%;right:0}
.mini-seat.s3{bottom:15%;right:0}
.mini-seat.s4{bottom:0;left:50%;transform:translateX(-50%)}
.mini-seat.s5{bottom:15%;left:0}
.mini-seat.s6{top:15%;left:0}
.mini-seat.s7{top:50%;right:-8px;transform:translateY(-50%)}
.table-card-bet-info{margin-top:12px;text-align:center}
.table-card-bet-info .bet-amount{font-size:1.2rem;font-weight:800;color:var(--gold)}
.table-card-bet-info .bet-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase}
.table-card-footer{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);font-size:.8rem}
.table-card-footer .player-count{display:flex;align-items:center;gap:4px;color:var(--text-dim)}
.table-card-footer .table-status{padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:600;text-transform:uppercase}
.table-status.waiting{background:rgba(212,165,32,.15);color:var(--accent)}
.table-status.playing{background:rgba(255,193,7,.15);color:var(--gold)}
.table-status.full{background:rgba(255,61,87,.15);color:var(--red)}

.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state h3{font-size:1.1rem;color:var(--text-dim);margin-bottom:8px}
.empty-state p{font-size:.85rem}

/* Sidebar sections */
.sidebar-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.sidebar-section-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.sidebar-section-header h3{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.sidebar-section-header .badge{background:var(--gradient-gold);color:#111;font-size:.7rem;padding:2px 8px;border-radius:50px;font-weight:600}
.sidebar-section-body{max-height:300px;overflow-y:auto}
.sidebar-tabs{display:flex;border-bottom:1px solid var(--border)}
.sidebar-tabs button{flex:1;padding:10px;border:none;background:transparent;color:var(--text-muted);font-size:.8rem;font-weight:600;transition:var(--transition);border-bottom:2px solid transparent}
.sidebar-tabs button.active{color:var(--gold);border-bottom-color:var(--gold)}
.sidebar-tabs button:hover:not(.active){color:var(--text-dim)}

.player-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);transition:var(--transition)}
.player-item:last-child{border-bottom:none}
.player-item:hover{background:var(--bg-card-hover)}
.player-avatar{width:32px;height:32px;border-radius:50%;background:var(--gradient-gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;color:#111;flex-shrink:0}
.player-info{flex:1;min-width:0}
.player-name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta{font-size:.75rem;color:var(--text-muted)}
.online-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.online-dot.on{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.online-dot.off{background:var(--text-muted)}

/* =========================================
   CREATE TABLE MODAL
   ========================================= */
.bet-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bet-presets button{padding:6px 14px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-dim);border-radius:6px;font-size:.8rem;font-weight:600;transition:var(--transition)}
.bet-presets button:hover,.bet-presets button.active{border-color:var(--accent);color:var(--gold);background:rgba(212,165,32,.08)}
.player-count-select{display:flex;gap:4px;margin-top:8px}
.player-count-select button{width:36px;height:36px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-dim);border-radius:6px;font-weight:700;transition:var(--transition)}
.player-count-select button.active{border-color:var(--accent);background:rgba(212,165,32,.15);color:var(--gold)}
.access-toggle{display:flex;gap:8px;margin-top:8px}
.access-toggle button{flex:1;padding:10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-dim);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.85rem;font-weight:500;transition:var(--transition)}
.access-toggle button.active{border-color:var(--accent);color:var(--gold);background:rgba(212,165,32,.08)}

/* =========================================
   GAME PAGE
   ========================================= */
.game-layout{display:flex;height:100vh;background:var(--bg-primary)}
.game-main{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}
.game-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(8,8,8,.9);border-bottom:1px solid var(--border);z-index:10;flex-shrink:0}
.game-header .game-info{display:flex;align-items:center;gap:16px}
.game-header .game-uid{font-family:monospace;color:var(--text-muted);font-size:.85rem}
.game-header .game-bet-info{display:flex;align-items:center;gap:8px;font-size:.85rem}
.game-header .game-bet-info .label{color:var(--text-muted)}
.game-header .game-bet-info .value{color:var(--gold);font-weight:700}

/* =========================================
   3D POKER TABLE — Neon Gold
   ========================================= */

/* Scene container — dark room */
.game-table-area{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:80px 24px 24px;position:relative;
  background:radial-gradient(ellipse at 50% 50%,#080c08 0%,#040706 30%,#020303 60%,#010101 100%);
  overflow:hidden;
  perspective:900px;
  perspective-origin:50% 38%
}
/* Ambient overhead glow on ceiling/walls */
.game-table-area::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:500px;height:100%;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,220,140,.04) 0%,rgba(255,200,100,.015) 25%,transparent 55%);
  pointer-events:none;z-index:0
}
/* Floor shadow beneath the table */
.game-table-area::after{
  content:'';position:absolute;bottom:4%;left:50%;transform:translateX(-50%);
  width:680px;height:130px;
  background:radial-gradient(ellipse,rgba(0,0,0,.65) 0%,rgba(0,0,0,.25) 40%,transparent 70%);
  border-radius:50%;pointer-events:none;z-index:0;filter:blur(20px)
}

/* Lamp & smoke removed — ambient overhead glow kept via ::before */

/* 3D scene wrapper — tilts everything */
.poker-table-scene{
  transform-style:preserve-3d;
  transform:rotateX(32deg);
  width:760px;height:440px;
  position:relative;z-index:1;
  transition:transform .6s ease
}

/* Table container */
.poker-table{
  width:100%;height:100%;
  position:relative;
  transform-style:preserve-3d
}

/* ---- 3D EXTRUDED EDGES ---- */
.table-edge{position:absolute;backface-visibility:hidden}
.table-edge-front{
  bottom:0;left:5%;right:5%;height:30px;
  transform-origin:bottom center;
  transform:rotateX(-90deg);
  background:linear-gradient(180deg,#4a3020 0%,#2e1a0e 40%,#1a0e06 100%);
  border-radius:0 0 50% 50%/0 0 14px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.7)
}
.table-edge-back{
  top:0;left:5%;right:5%;height:30px;
  transform-origin:top center;
  transform:rotateX(90deg);
  background:linear-gradient(0deg,#3a2418 0%,#1e1008 100%);
  border-radius:50% 50% 0 0/14px 14px 0 0
}
.table-edge-left{
  top:20%;bottom:20%;left:0;width:30px;
  transform-origin:left center;
  transform:rotateY(90deg);
  background:linear-gradient(90deg,#3a2418,#1e1008);
  border-radius:14px 0 0 14px/50% 0 0 50%
}
.table-edge-right{
  top:20%;bottom:20%;right:0;width:30px;
  transform-origin:right center;
  transform:rotateY(-90deg);
  background:linear-gradient(-90deg,#3a2418,#1e1008);
  border-radius:0 14px 14px 0/0 50% 50% 0
}

/* ---- Leather padded rail ---- */
.poker-table-rail{
  position:absolute;inset:-16px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 15%,rgba(255,235,200,.1),transparent 45%),
    linear-gradient(175deg,#55392c 0%,#42301e 12%,#321e10 35%,#1e1008 65%,#2a1a10 95%);
  box-shadow:
    0 20px 70px rgba(0,0,0,.8),
    0 8px 28px rgba(0,0,0,.6),
    inset 0 2px 5px rgba(255,235,200,.14),
    inset 0 -5px 12px rgba(0,0,0,.55),
    0 0 0 2px rgba(0,0,0,.7);
  transform:translateZ(0px);
  z-index:2
}
/* Leather grain texture */
.poker-table-rail::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='.4' fill='rgba(0,0,0,0.06)'/%3E%3Ccircle cx='2' cy='8' r='.3' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E");
  pointer-events:none
}
/* Gold trim */
.poker-table-rail::after{
  content:'';position:absolute;inset:13px;
  border-radius:50%;
  border:2px solid rgba(212,175,55,.2);
  box-shadow:0 0 10px rgba(212,175,55,.06),inset 0 0 10px rgba(212,175,55,.04);
  pointer-events:none
}
/* Ambient overhead specular on rail */
.rail-highlight{
  position:absolute;top:6%;left:20%;width:60%;height:20%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,235,190,.07),transparent 65%);
  pointer-events:none
}

/* ---- Green felt surface ---- */
.poker-table-felt{
  position:absolute;inset:0;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 40%,rgba(255,240,180,.06) 0%,transparent 35%),
    radial-gradient(ellipse,#1e8035 0%,#187530 18%,#126525 40%,#0c5520 58%,#084418 78%,#053010 100%);
  box-shadow:
    inset 0 10px 50px rgba(0,0,0,.5),
    inset 0 -8px 35px rgba(0,0,0,.3),
    inset 0 0 120px rgba(0,0,0,.15);
  overflow:hidden;
  transform:translateZ(1px);
  z-index:3
}
/* Cloth weave texture */
.poker-table-felt::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background-image:
    url("data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' fill='rgba(0,0,0,0.01)'/%3E%3Cline x1='0' y1='0' x2='10' y2='10' stroke='rgba(0,0,0,0.012)' stroke-width='.4'/%3E%3Cline x1='10' y1='0' x2='0' y2='10' stroke='rgba(255,255,255,0.005)' stroke-width='.4'/%3E%3Cline x1='5' y1='0' x2='5' y2='10' stroke='rgba(0,0,0,0.006)' stroke-width='.3'/%3E%3Cline x1='0' y1='5' x2='10' y2='5' stroke='rgba(0,0,0,0.006)' stroke-width='.3'/%3E%3C/svg%3E");
  opacity:1;pointer-events:none
}
/* Inner boundary line — subtle gold */
.poker-table-felt::after{
  content:'';position:absolute;inset:20px;
  border:1.5px solid rgba(212,175,55,.06);
  border-radius:50%;pointer-events:none
}

/* Ambient warm glow on felt center */
.poker-table-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:55%;height:65%;
  border-radius:50%;
  background:
    radial-gradient(ellipse,rgba(255,245,200,.07) 0%,rgba(255,235,180,.03) 30%,transparent 65%);
  pointer-events:none;z-index:2
}

/* SVG logo on felt */
.felt-logo{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-57%);
  width:100px;height:110px;
  pointer-events:none;z-index:1;
  opacity:.85;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.3))
}
.felt-logo svg{width:100%;height:100%}

/* Pot display — counter-rotated to face camera */
.pot-display{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotateX(-32deg);
  text-align:center;z-index:5
}
.pot-amount{
  font-size:2.2rem;font-weight:800;color:var(--gold);
  text-shadow:0 2px 16px rgba(0,0,0,.8),0 0 24px rgba(255,193,7,.15),0 0 4px rgba(255,193,7,.3)
}
.pot-label{
  font-size:.7rem;color:rgba(255,255,255,.35);
  text-transform:uppercase;letter-spacing:2px;margin-top:2px
}

/* ---- Seats — counter-rotated to face camera ---- */
.seat{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;
  z-index:8;transition:all .4s ease;
  transform:rotateX(-32deg);transform-origin:center center
}
.seat-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(145deg,#1a1a18,#252520);
  border:3px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--text-dim);font-size:.95rem;
  position:relative;transition:var(--transition);
  box-shadow:0 8px 24px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4)
}
.seat.occupied .seat-avatar{
  border-color:var(--accent);
  background:linear-gradient(145deg,#2a2410,#1e1a08);
  color:var(--text)
}
.seat.active-turn .seat-avatar{
  border-color:var(--gold);
  box-shadow:0 0 28px rgba(255,193,7,.55),0 0 56px rgba(255,193,7,.2),0 8px 24px rgba(0,0,0,.6);
  animation:turnPulse 1.5s ease-in-out infinite
}
.seat.folded{opacity:.35}
.seat.folded .seat-avatar{border-color:var(--text-muted);filter:grayscale(.7)}
@keyframes turnPulse{
  0%,100%{box-shadow:0 0 28px rgba(255,193,7,.55),0 0 56px rgba(255,193,7,.2),0 8px 24px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 36px rgba(255,193,7,.75),0 0 72px rgba(255,193,7,.3),0 8px 24px rgba(0,0,0,.6)}
}

/* Timer ring */
.seat.active-turn .seat-avatar::after{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  border:2.5px solid transparent;border-top-color:var(--gold);
  animation:timerSpin 2s linear infinite
}
@keyframes timerSpin{to{transform:rotate(360deg)}}

.seat-name{
  font-size:.75rem;font-weight:600;color:var(--text);
  text-align:center;max-width:82px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 8px rgba(0,0,0,.95)
}
.seat-bet{
  font-size:.72rem;color:var(--gold);font-weight:700;
  display:flex;align-items:center;gap:3px;
  background:rgba(0,0,0,.6);padding:2px 10px;border-radius:10px;
  backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(0,0,0,.4)
}
.seat-balance{font-size:.65rem;color:var(--text-muted)}
.seat-empty .seat-avatar{border-style:dashed;opacity:.18;border-color:var(--text-muted)}
.seat-empty .seat-avatar:hover{opacity:.4;border-color:var(--accent)}

/* Seat positions — around the 3D tilted oval */
.seat.pos-1{top:-58px;left:50%;transform:translateX(-50%) rotateX(-32deg)}
.seat.pos-2{top:5%;right:-68px;transform:rotateX(-32deg)}
.seat.pos-3{bottom:5%;right:-68px;transform:rotateX(-32deg)}
.seat.pos-4{bottom:-68px;right:25%;transform:rotateX(-32deg)}
.seat.pos-5{bottom:-68px;left:25%;transform:rotateX(-32deg)}
.seat.pos-6{bottom:5%;left:-68px;transform:rotateX(-32deg)}
.seat.pos-7{top:5%;left:-68px;transform:rotateX(-32deg)}

.seat-cards{display:flex;gap:2px;position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);z-index:2}

.my-cards{display:flex;justify-content:center;gap:12px;padding:16px 0}
.card{width:76px;height:106px;border-radius:10px;background:linear-gradient(135deg,#fff 0%,#f8f8f8 100%);border:1px solid #ddd;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .2s ease;position:relative;user-select:none}
.card:hover{transform:translateY(-10px)}
.card.red{color:#e53935}
.card.black{color:#222}
.card .card-rank{font-size:1.4rem;line-height:1}
.card .card-suit{font-size:1.6rem;line-height:1;margin-top:2px}
.card .card-corner{position:absolute;top:4px;left:6px;font-size:.6rem;line-height:1.1;display:flex;flex-direction:column;align-items:center}
.card .card-corner-br{position:absolute;bottom:4px;right:6px;font-size:.6rem;line-height:1.1;display:flex;flex-direction:column;align-items:center;transform:rotate(180deg)}
.card-back{background:linear-gradient(135deg,#2a1f08,#4a3510);border-color:#6a4a20}
.card-back::after{content:'';display:block;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='rgba(255,255,255,0.12)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6 8 2 12 2 15.5 2 18 4 20 6.5 20c1.8 0 3.3-1 4-2.5-.2 2-.7 3.5-1.5 4.5h6c-.8-1-1.3-2.5-1.5-4.5.7 1.5 2.2 2.5 4 2.5C20 20 22 18 22 15.5 22 12 18 8 12 2z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}
.card-small{width:24px;height:34px;border-radius:3px;font-size:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.card-small .card-rank{font-size:.55rem}
.card-small .card-suit{font-size:.6rem;margin-top:0}

.hand-value-badge{position:absolute;top:-10px;right:-10px;background:var(--gold);color:#111;min-width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.4)}

.game-actions{padding:16px 24px;background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:12px;z-index:10;flex-shrink:0}
.game-actions .btn{min-width:120px;justify-content:center;font-size:.95rem;padding:12px 24px}
.raise-input{width:100px;padding:10px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);text-align:center;font-weight:600;font-size:.9rem;outline:none}
.raise-input:focus{border-color:var(--gold)}

/* Game Chat */
.game-chat{width:300px;background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column}
.chat-header{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}
.chat-messages{flex:1;overflow-y:auto;padding:12px}
.chat-msg{margin-bottom:10px}
.chat-msg .chat-author{font-size:.75rem;font-weight:600;color:var(--accent);margin-bottom:2px}
.chat-msg .chat-text{font-size:.8rem;color:var(--text-dim);line-height:1.4;word-break:break-word}
.chat-msg .chat-time{font-size:.65rem;color:var(--text-muted);margin-top:2px}
.chat-input-area{padding:12px;border-top:1px solid var(--border);display:flex;gap:8px}
.chat-input{flex:1;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.85rem;outline:none}
.chat-input:focus{border-color:var(--accent)}
.chat-send{width:40px;height:40px;border:none;background:var(--gradient-gold);color:#111;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}
.chat-send:hover{background:var(--accent-hover);filter:brightness(1.1)}

/* Winner overlay */
.winner-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .5s ease}
.winner-overlay.active{opacity:1;pointer-events:all}
.winner-card{background:linear-gradient(135deg,var(--bg-card),#1a1808);border:2px solid var(--gold);border-radius:var(--radius-lg);padding:44px 56px;text-align:center;transform:scale(.8);transition:transform .5s ease;box-shadow:0 0 80px rgba(255,193,7,.12),0 0 0 1px rgba(255,193,7,.1)}
.winner-overlay.active .winner-card{transform:scale(1)}
.winner-card .winner-crown{margin-bottom:12px;color:var(--gold)}
.winner-card .winner-name{font-size:1.5rem;font-weight:800;margin-bottom:6px;background:linear-gradient(135deg,var(--gold),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.winner-card .winner-hand{font-size:1rem;color:var(--text-dim);margin-bottom:14px}
.winner-card .winner-cards{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.winner-card .winner-pot{font-size:2.2rem;font-weight:800;color:var(--gold);text-shadow:0 2px 12px rgba(255,193,7,.3)}
.winner-card .winner-pot-label{font-size:.8rem;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:1px}

/* =========================================
   ADMIN/CASHIER PANELS
   ========================================= */
.panel-layout{display:flex;min-height:100vh}
.panel-sidebar{width:240px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50}
.panel-sidebar-header{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel-sidebar-header .logo-sm{font-size:1.2rem;font-weight:800;color:var(--accent)}
.panel-sidebar-header .role-badge{padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:600;text-transform:uppercase}
.role-badge.admin{background:rgba(255,61,87,.15);color:var(--red)}
.role-badge.cashier{background:rgba(41,121,255,.15);color:var(--blue)}
.panel-nav{flex:1;padding:12px;overflow-y:auto}
.panel-nav a{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-sm);color:var(--text-dim);font-size:.85rem;font-weight:500;transition:var(--transition);margin-bottom:2px;cursor:pointer}
.panel-nav a:hover,.panel-nav a.active{background:var(--bg-card);color:var(--text)}
.panel-nav a.active{color:var(--gold)}
.panel-nav-footer{padding:12px;border-top:1px solid var(--border)}
.panel-nav-footer a{display:flex;align-items:center;gap:10px;padding:12px 16px;color:var(--text-dim);font-size:.85rem;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition)}
.panel-nav-footer a:hover{color:var(--text);background:var(--bg-card)}
.panel-main{flex:1;margin-left:240px;padding:24px;overflow-y:auto;max-width:1200px}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:var(--transition)}
.stat-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.stat-card .stat-icon{font-size:1.4rem;margin-bottom:8px}
.stat-card .stat-value{font-size:1.8rem;font-weight:800;margin-bottom:4px}
.stat-card .stat-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.stat-card.accent .stat-value{color:var(--accent)}
.stat-card.gold .stat-value{color:var(--gold)}
.stat-card.blue .stat-value{color:var(--blue)}
.stat-card.red .stat-value{color:var(--red)}
.stat-card.green .stat-value{color:#4ade80}

.data-table-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.data-table-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.data-table-header h2{font-size:1rem;font-weight:700}
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:12px 16px;text-align:left;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;border-bottom:1px solid var(--border);background:var(--bg-secondary)}
.data-table td{padding:12px 16px;font-size:.85rem;border-bottom:1px solid var(--border)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--bg-card-hover)}
.data-table .status{padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:600}
.data-table .actions{display:flex;gap:6px}
.panel-section{display:none}
.panel-section.active{display:block}

/* Credentials display */
.credentials-display{background:var(--bg-input);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:16px;margin-top:12px}
.credentials-display .cred-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.credentials-display .cred-label{font-size:.8rem;color:var(--text-muted)}
.credentials-display .cred-value{font-family:monospace;font-weight:700;font-size:.95rem;color:var(--gold)}

/* =========================================
   FOOTER
   ========================================= */
.site-footer{
  background: linear-gradient(to bottom, var(--bg-secondary), #060606);
  border-top:1px solid var(--border);
  padding:0;
  margin-top:0;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.footer-glow{
  position:absolute;top:-80px;left:50%;transform:translateX(-50%);
  width:600px;height:160px;
  background:radial-gradient(ellipse, rgba(212,165,32,0.06) 0%, transparent 70%);
  pointer-events:none;
}
.footer-suits-bg{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0.03;
}
.footer-suits-bg .suit-float{
  position:absolute;font-size:2.5rem;color:var(--accent);
  animation:floatSuit 20s linear infinite;
}
.footer-suits-bg .suit-float:nth-child(1){left:5%;top:20%;animation-delay:0s;animation-duration:22s}
.footer-suits-bg .suit-float:nth-child(2){left:15%;top:60%;animation-delay:3s;animation-duration:18s}
.footer-suits-bg .suit-float:nth-child(3){left:30%;top:10%;animation-delay:1s;animation-duration:25s}
.footer-suits-bg .suit-float:nth-child(4){left:50%;top:50%;animation-delay:5s;animation-duration:20s}
.footer-suits-bg .suit-float:nth-child(5){left:65%;top:30%;animation-delay:2s;animation-duration:23s}
.footer-suits-bg .suit-float:nth-child(6){left:80%;top:70%;animation-delay:4s;animation-duration:19s}
.footer-suits-bg .suit-float:nth-child(7){left:92%;top:15%;animation-delay:7s;animation-duration:21s}
.footer-suits-bg .suit-float:nth-child(8){left:40%;top:80%;animation-delay:6s;animation-duration:24s}
@keyframes floatSuit{
  0%{transform:translateY(0) rotate(0deg);opacity:0.5}
  50%{opacity:1}
  100%{transform:translateY(-60px) rotate(360deg);opacity:0.5}
}
.footer-content{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  padding:48px 32px 32px;
  position:relative;z-index:1;
}
.footer-brand{min-width:0}
.footer-brand .footer-logo{
  display:flex;align-items:center;gap:10px;
  font-size:1.3rem;font-weight:900;color:var(--accent);margin-bottom:12px;
  letter-spacing:0.05em;
}
.footer-brand .footer-logo svg{width:28px;height:28px;color:var(--accent);flex-shrink:0}
.footer-brand p{font-size:.82rem;color:var(--text-dim);line-height:1.7;max-width:320px}
.footer-brand .footer-suits-row{
  display:flex;gap:12px;margin-top:16px;
}
.footer-brand .footer-suits-row span{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:1px solid var(--border);border-radius:8px;
  font-size:1.1rem;transition:all .3s;cursor:default;
}
.footer-brand .footer-suits-row span:hover{
  border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(212,165,32,0.15);
}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links h4{
  font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;
  margin-bottom:4px;color:var(--accent);
}
.footer-links a{
  color:var(--text-dim);font-size:.83rem;transition:all .25s;
  display:flex;align-items:center;gap:6px;
  text-decoration:none;
}
.footer-links a::before{
  content:'';display:inline-block;width:4px;height:4px;
  border-radius:50%;background:var(--border-light);transition:all .25s;flex-shrink:0;
}
.footer-links a:hover{color:var(--accent);transform:translateX(4px)}
.footer-links a:hover::before{background:var(--accent)}
.footer-socials{display:flex;gap:10px;margin-top:16px}
.footer-socials a{
  width:38px;height:38px;border-radius:10px;
  background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);transition:all .3s;
}
.footer-socials a svg{width:18px;height:18px}
.footer-socials a:hover{
  border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 16px rgba(212,165,32,0.15);transform:translateY(-2px);
}
.footer-divider{
  max-width:1200px;margin:0 auto;height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--accent-dark) 50%, var(--border) 80%, transparent 100%);
  opacity:0.4;position:relative;z-index:1;
}
.footer-bottom{
  max-width:1200px;margin:0 auto;
  padding:20px 32px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:.78rem;color:var(--text-muted);
  position:relative;z-index:1;
}
.footer-bottom-cards{
  display:flex;gap:6px;
}
.footer-bottom-cards .mini-card{
  width:24px;height:34px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:.65rem;transition:all .3s;
}
.footer-bottom-cards .mini-card:hover{
  border-color:var(--accent);transform:translateY(-2px) rotate(-3deg);
}
.footer-bottom-cards .mini-card.red{color:#ff3d57}
.footer-bottom-cards .mini-card.black{color:var(--text)}

/* =========================================
   CARD THEME EFFECTS
   ========================================= */
/* Floating card suits background for lobby */
.lobby-bg-effects{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.lobby-bg-effects .bg-suit{
  position:absolute;font-size:1.8rem;opacity:0.025;color:var(--accent);
  animation:driftSuit 30s linear infinite;
}
@keyframes driftSuit{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(30px,-40px) rotate(90deg)}
  50%{transform:translate(-20px,-80px) rotate(180deg)}
  75%{transform:translate(40px,-120px) rotate(270deg)}
  100%{transform:translate(0,-160vh) rotate(360deg)}
}
/* Sparkle line under top nav */
.top-nav-wrap::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-dark), var(--gold), var(--accent-dark), transparent);
  opacity:0.3;
}
.top-nav-wrap{position:relative}
/* Gold accent pulse on nav logo */
.nav-logo svg{
  filter:drop-shadow(0 0 4px rgba(212,165,32,0.3));
  transition:filter .3s;
}
.nav-logo:hover svg{
  filter:drop-shadow(0 0 8px rgba(212,165,32,0.6));
}
/* Table card hover lift with gold glow */
.table-card{
  transition:transform .25s, box-shadow .25s;
}
.table-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,0.4), 0 0 20px rgba(212,165,32,0.08);
}
/* Chip/coin shimmer on balance */
.nav-balance{
  position:relative;overflow:hidden;
}
.nav-balance::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,193,7,0.1), transparent);
  animation:shimmer 3s ease-in-out infinite;
}
@keyframes shimmer{
  0%{left:-100%}
  50%{left:150%}
  100%{left:150%}
}
/* Modal card entrance */
.modal-overlay.active .modal{
  animation:modalCardFlip .35s ease-out;
}
@keyframes modalCardFlip{
  0%{opacity:0;transform:perspective(600px) rotateY(-15deg) scale(0.9)}
  100%{opacity:1;transform:perspective(600px) rotateY(0) scale(1)}
}
/* Sidebar section subtle card border */
.sidebar-section{
  position:relative;
}
.sidebar-section::before{
  content:'';position:absolute;top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg, transparent, var(--border-light), transparent);
}
.sidebar-section:first-child::before{display:none}
/* Stat card glow on hover */
.stat-card{transition:transform .25s, box-shadow .25s}
.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
/* Pulsing online dot */
.online-dot.on{
  animation:onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)}
  50%{box-shadow:0 0 0 4px rgba(34,197,94,0)}
}

/* =========================================
   MOBILE HAMBURGER TOGGLE
   ========================================= */
.mobile-menu-btn{
  display:none;position:fixed;top:12px;left:12px;z-index:200;
  width:44px;height:44px;border-radius:10px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  transition:var(--transition)
}
.mobile-menu-btn:hover{border-color:var(--accent);color:var(--accent)}
.mobile-menu-btn svg{width:22px;height:22px}
.panel-overlay{
  display:none;position:fixed;inset:0;z-index:40;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px)
}

/* Mobile nav hamburger for lobby */
.mobile-nav-btn{
  display:none;width:40px;height:40px;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  align-items:center;justify-content:center;
  transition:var(--transition);flex-shrink:0
}
.mobile-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.mobile-nav-btn svg{width:20px;height:20px}

/* Mobile bottom nav for lobby */
.mobile-bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:var(--bg-secondary);border-top:1px solid var(--border);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
}
.mobile-bottom-nav-inner{
  display:flex;justify-content:space-around;align-items:center;
  max-width:500px;margin:0 auto
}
.mobile-bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--text-muted);font-size:.65rem;font-weight:600;
  padding:4px 12px;border-radius:8px;transition:var(--transition);
  text-decoration:none;cursor:pointer
}
.mobile-bottom-nav a.active,.mobile-bottom-nav a:hover{color:var(--gold)}
.mobile-bottom-nav a svg{width:20px;height:20px}

/* =========================================
   RESPONSIVE
   ========================================= */

/* ---------- Desktop large ---------- */
@media(max-width:1200px){
  .footer-content{grid-template-columns:1.5fr 1fr 1fr;gap:32px}
}

/* ---------- Tablet landscape ---------- */
@media(max-width:1024px){
  .lobby-sidebar{width:280px}
  .game-chat{width:260px}
  .poker-table-scene{width:600px;height:350px}
  .table-edge-front,.table-edge-back{height:24px}
  .table-edge-left,.table-edge-right{width:24px}
  .footer-content{grid-template-columns:1fr 1fr;gap:32px}
  .data-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table{min-width:600px}
}

/* ---------- Tablet portrait / small ---------- */
@media(max-width:768px){
  /* --- Panel sidebar → mobile overlay --- */
  .mobile-menu-btn{display:flex}
  .panel-sidebar{
    transform:translateX(-100%);
    transition:transform .3s ease;
    z-index:60;width:260px
  }
  .panel-sidebar.open{transform:translateX(0)}
  .panel-overlay.open{display:block}
  .panel-main{margin-left:0;padding:72px 16px 24px}
  .panel-sidebar-header .logo-sm{font-size:1rem}
  .panel-nav a span{display:inline!important}

  /* --- Stats --- */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:14px}
  .stat-card .stat-value{font-size:1.4rem}
  .stat-card .stat-label{font-size:.7rem}

  /* --- Tables --- */
  .data-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:16px}
  .data-table{min-width:560px}
  .data-table th,.data-table td{padding:10px 12px;font-size:.78rem}
  .data-table-header{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .data-table-header h2{font-size:.9rem}

  /* --- Lobby --- */
  .lobby-layout{flex-direction:column}
  .lobby-main{padding:16px}
  .lobby-sidebar{width:100%;border-left:none;border-top:1px solid var(--border);padding:16px}

  /* Nav */
  .nav-links{display:none}
  .mobile-nav-btn{display:flex}
  .top-nav{padding:0 16px;height:56px}
  .nav-logo{font-size:1.1rem}
  .nav-username{display:none}
  .nav-balance{padding:6px 12px;font-size:.82rem}

  /* Lobby filters */
  .filters-bar{flex-direction:column;gap:10px;padding:14px}
  .filter-input{width:100%}
  .filter-toggle{flex-wrap:wrap}
  .player-count-filter{flex-wrap:wrap}
  .section-header{flex-direction:column;align-items:flex-start;gap:12px}
  .section-header h1{font-size:1.2rem}

  /* Lobby tables grid */
  .tables-grid{grid-template-columns:1fr}

  /* Game layout (old — used in style.css) */
  .game-layout{flex-direction:column}
  .game-chat{width:100%;height:200px;border-left:none;border-top:1px solid var(--border)}
  .poker-table-scene{width:95%;max-width:440px;height:270px;transform:rotateX(24deg)}
  .poker-table-rail{inset:-10px}
  .table-edge-front,.table-edge-back{height:18px}
  .table-edge-left,.table-edge-right{width:18px}
  .seat{transform:rotateX(-24deg)!important}
  .pot-display{transform:translate(-50%,-50%) rotateX(-24deg)}
  .seat-avatar{width:44px;height:44px;font-size:.75rem}
  .seat.pos-1{top:-38px}
  .seat.pos-2,.seat.pos-3{right:-44px}
  .seat.pos-4,.seat.pos-5{bottom:-50px}
  .seat.pos-6,.seat.pos-7{left:-44px}
  .felt-logo{width:70px;height:80px}
  .game-table-area::after{width:420px;height:80px}
  .game-table-area{padding:60px 16px 16px}
  .game-header{padding:0 16px;height:48px}
  .game-actions{padding:12px 16px;gap:8px;flex-wrap:wrap}
  .game-actions .btn{min-width:100px;padding:10px 16px;font-size:.85rem}

  /* Footer */
  .footer-content{grid-template-columns:1fr;gap:24px;padding:32px 20px 24px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center;padding:16px 20px}

  /* Modals */
  .modal{padding:24px 20px;width:95%;max-width:400px}
  .modal-header h2{font-size:1.05rem}
  .form-group label{font-size:.8rem}
  .form-input{padding:10px 14px;font-size:.85rem}

  /* Winner overlay */
  .winner-card{padding:32px 28px}
  .winner-card .winner-name{font-size:1.2rem}
  .winner-card .winner-pot{font-size:1.6rem}

  /* Mobile bottom nav visible on lobby/profile */
  .mobile-bottom-nav{display:block}
  .site-footer{padding-bottom:70px}
  .whatsapp-fab{bottom:80px!important}
}

/* ---------- Mobile small ---------- */
@media(max-width:480px){
  /* Login */
  .login-card{margin:16px;padding:28px 20px}
  .login-logo h1{font-size:1.6rem}
  .login-logo .logo-icon{width:52px;height:52px;border-radius:12px}

  /* Stats */
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:12px}
  .stat-card .stat-value{font-size:1.2rem}
  .stat-card .stat-icon{font-size:1.1rem;margin-bottom:4px}

  /* Tables */
  .data-table{min-width:480px}
  .data-table th,.data-table td{padding:8px 10px;font-size:.72rem;white-space:nowrap}

  /* Panel */
  .panel-main{padding:64px 12px 24px}

  /* Lobby */
  .lobby-main{padding:12px}
  .tables-grid{gap:12px}
  .table-card-body{padding:16px 14px}
  .mini-table{width:160px;height:95px}

  /* Game cards */
  .card{width:56px;height:80px}
  .card .card-rank{font-size:1rem}
  .card .card-suit{font-size:1.1rem}

  /* Nav */
  .top-nav{height:50px;padding:0 12px}
  .nav-logo{font-size:1rem;gap:6px}
  .nav-logo svg{width:18px!important;height:18px!important}
  .nav-balance{padding:5px 10px;font-size:.78rem;gap:4px}
  .nav-avatar{width:32px;height:32px;font-size:.75rem}

  /* Footer on login */
  .site-footer .footer-bottom{padding:12px 16px;font-size:.7rem}

  /* Help */
  .help-page{padding:24px 16px 60px}
  .help-title{font-size:1.5rem}
  .help-section{padding:20px 16px}
  .help-section h2{font-size:1.05rem}
  .help-cards-demo{gap:8px}
  .help-card{width:48px;height:68px;font-size:.9rem}
}

/* ---------- Very small phones ---------- */
@media(max-width:360px){
  .login-card{margin:8px;padding:24px 16px}
  .login-logo h1{font-size:1.3rem}
  .stats-grid{grid-template-columns:1fr}
  .top-nav{padding:0 8px}
  .nav-balance{display:none}
  .panel-main{padding:56px 8px 16px}
  .filters-bar{padding:10px}
  .table-card-body{padding:12px 10px}
  .mini-table{width:140px;height:84px}
  .section-header h1{font-size:1rem}
}

/* ---------- Landscape phone (game page optimization) ---------- */
@media(max-height:500px) and (orientation:landscape){
  .game-table-area{padding:40px 16px 8px}
  .game-header{height:40px}
  .game-actions{padding:6px 12px}
  .game-actions .btn{padding:8px 12px;font-size:.8rem;min-width:80px}
}

/* ---------- Notch / safe area support ---------- */
@supports(padding:max(0px)){
  .top-nav{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .panel-sidebar{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .game-actions{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .login-page{padding-bottom:max(16px,env(safe-area-inset-bottom));padding-top:max(16px,env(safe-area-inset-top))}
  .mobile-bottom-nav{padding-bottom:max(0px,env(safe-area-inset-bottom))}
}

/* ---------- Touch device improvements ---------- */
@media(hover:none){
  .table-card:hover{transform:none;box-shadow:none}
  .stat-card:hover{transform:none;box-shadow:none}
  .btn-primary:hover{transform:none}
  .table-card:active{transform:scale(.98)}
  .stat-card:active{transform:scale(.98)}
  /* Larger touch targets for mobile */
  .btn{min-height:44px}
  .btn-sm{min-height:36px}
  .form-input{min-height:48px;font-size:16px!important}
  .data-table td,.data-table th{padding:12px}
}

/* ---------- iOS specific fixes ---------- */
/* Prevent iOS zoom on input focus (font-size must be >= 16px) */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:768px){
  input,select,textarea{font-size:16px!important}
  .form-input{font-size:16px!important}
}

/* Full-height fix for iOS Safari */
html{height:-webkit-fill-available}
body{min-height:100vh;min-height:-webkit-fill-available}

/* iOS momentum scrolling */
.data-table-wrap,.panel-main,.gt-chat-body,.rules-box{-webkit-overflow-scrolling:touch}

/* Fix iOS input styling */
input,textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-sm)}

/* Prevent iOS text size adjust */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardDeal{from{opacity:0;transform:translateY(-40px) rotate(-10deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
.anim-slide-up{animation:slideUp .4s ease forwards}
.anim-card-deal{animation:cardDeal .3s ease forwards}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Status badges */
.status-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.status-badge.active{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.25)}
.status-badge.used{background:rgba(156,163,175,0.15);color:#9ca3af;border:1px solid rgba(156,163,175,0.25)}

/* =========================================
   IPHONE / MOBILE DEEP FIXES
   ========================================= */

/* ---------- iPhone 375px (iPhone 6/7/8/SE2/12mini/13mini) ---------- */
@media(max-width:414px){
  /* Lobby */
  .tables-grid{grid-template-columns:1fr!important;gap:12px}
  .table-card-body{padding:14px 12px}
  .mini-table{width:100%;max-width:200px;height:100px;margin:0 auto}
  .lobby-main{padding:12px 8px}
  .section-header{gap:8px}
  .section-header h1{font-size:1.1rem}
  .section-header .btn{font-size:.8rem;padding:8px 14px}
  .filter-group{width:100%}
  .filter-group .filter-input{width:100%!important}
  .filter-toggle button{padding:6px 10px;font-size:.72rem}
  .player-count-filter button{padding:5px 8px;font-size:.72rem;min-width:28px}

  /* Login */
  .login-card{margin:12px;padding:24px 18px}
  .login-logo h1{font-size:1.4rem}

  /* Nav balance visible (don't hide) */
  .nav-balance{display:flex;padding:4px 8px;font-size:.72rem;gap:3px}

  /* Cards in game */
  .card{width:50px;height:72px}
  .card .card-rank{font-size:.9rem}

  /* Modals */
  .modal{width:calc(100% - 24px);padding:20px 16px}
  .modal-header h2{font-size:1rem}

  /* Lobby sidebar on mobile */
  .lobby-sidebar{padding:12px}

  /* Panel pages */
  .panel-main{padding:60px 10px 20px}
  .stats-grid{gap:6px}
  .stat-card{padding:10px}
  .stat-card .stat-value{font-size:1.1rem}

  /* Winner overlay */
  .winner-card{padding:24px 20px}
  .winner-card .winner-name{font-size:1.05rem}
  .winner-card .winner-pot{font-size:1.3rem}
}

/* ---------- Mobile bottom nav improvements ---------- */
@media(max-width:768px){
  .mobile-bottom-nav{
    display:flex;
    justify-content:space-around;
    align-items:center;
    position:fixed;
    bottom:0;left:0;right:0;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:6px 0;
    z-index:100;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .mobile-bottom-nav a{
    display:flex;flex-direction:column;align-items:center;
    gap:2px;font-size:.65rem;color:var(--text-muted);
    text-decoration:none;padding:6px 4px;min-width:56px;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-bottom-nav a:active{opacity:.7}
  .mobile-bottom-nav a svg{width:22px;height:22px}

  /* Push content above fixed bottom nav */
  .lobby-layout{padding-bottom:72px}
  .panel-main{padding-bottom:80px!important}
  body.profile-page{padding-bottom:72px}

  /* Login page footer fix */
  .login-page .site-footer{position:relative;bottom:auto}
  .login-page{padding-bottom:16px}
}

/* ---------- Fix login footer overlap ---------- */
.login-page{display:flex;flex-direction:column;min-height:100vh;min-height:-webkit-fill-available}
.login-page .login-container{flex:1;display:flex;align-items:center;justify-content:center}
.login-page .site-footer{flex-shrink:0}

/* ======= LANG SWITCHER ======= */
.lang-switcher{display:inline-flex;gap:4px;align-items:center}
.panel-sidebar-header .lang-switcher{width:100%}
.lang-btn{
  padding:4px 10px;border-radius:6px;font-size:.72rem;font-weight:700;
  color:var(--text-muted);background:transparent;border:1px solid var(--border);
  cursor:pointer;transition:all .2s;line-height:1.4;
}
.lang-btn:hover{color:var(--text);border-color:var(--border-light)}
.lang-btn.active{color:var(--accent);border-color:var(--accent);background:rgba(212,165,32,.08)}