/* ═══════════════════════════════════════════════════════════════
   EvoRealm UO – Web Poker  (Dark Fantasy Theme)
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset & Variables (mirrors main site) ─────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0d0d1a;--bg-alt:#12122a;--bg-card:#1a1a3a;--bg-card-alt:#1e1e40;
  --surface:#24244a;--border:#2e2e5e;--border-glow:#4a3aff33;
  --text:#e0dff0;--text-dim:#9594b0;--text-bright:#fff;
  --accent:#7c5cff;--accent-glow:#7c5cff55;--accent-light:#a98dff;
  --gold:#ffd700;--gold-dim:#b8960044;
  --success:#34d399;--danger:#f87171;--info:#60a5fa;
  --radius:12px;--radius-sm:8px;--ease:cubic-bezier(.25,.8,.25,1);
  --felt:#1a5c2a;--felt-dark:#0f3d1a;--felt-border:#2a7a3a;
  --card-white:#f5f0e8;--card-shadow:0 4px 16px rgba(0,0,0,.5);
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* ── Top Bar ───────────────────────────────────────────────── */
.poker-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.5rem;background:var(--bg-alt);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.poker-topbar .logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text-bright);font-family:'Cinzel',serif;font-weight:700;font-size:1.1rem}
.poker-topbar .logo .accent{color:var(--accent)}
.poker-topbar .back-link{color:var(--accent-light);text-decoration:none;font-size:.85rem;transition:color .2s}
.poker-topbar .back-link:hover{color:var(--gold)}
.poker-topbar .chip-count{display:flex;align-items:center;gap:.4rem;background:var(--surface);padding:.4rem .8rem;border-radius:var(--radius-sm);font-weight:600;color:var(--gold);font-size:.9rem}

/* ── Lobby Screen ──────────────────────────────────────────── */
.lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 56px);padding:2rem;text-align:center}
.lobby h1{font-family:'Cinzel',serif;font-size:2.5rem;color:var(--text-bright);margin-bottom:.5rem}
.lobby h1 .accent{color:var(--accent)}
.lobby .subtitle{color:var(--text-dim);margin-bottom:2rem;font-size:1.05rem}

.lobby-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;max-width:800px;width:100%}
.lobby-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:border-color .3s var(--ease),transform .2s var(--ease);cursor:pointer}
.lobby-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.lobby-card h3{font-family:'Cinzel',serif;font-size:1.2rem;margin-bottom:.5rem;color:var(--text-bright)}
.lobby-card p{color:var(--text-dim);font-size:.9rem;margin-bottom:1rem;line-height:1.5}
.lobby-card .detail{display:flex;justify-content:space-between;font-size:.8rem;padding:.3rem 0;border-top:1px solid var(--border)}
.lobby-card .detail span:last-child{color:var(--accent-light);font-weight:600}

/* ── Leaderboard ───────────────────────────────────────────── */
.leaderboard-panel{margin-top:2rem;max-width:600px;width:100%;text-align:left}
.leaderboard-panel h3{font-family:'Cinzel',serif;color:var(--gold);font-size:1.1rem;margin-bottom:.75rem;text-align:center}
.leaderboard-table{width:100%;border-collapse:collapse;font-size:.8rem}
.leaderboard-table th{color:var(--text-dim);text-transform:uppercase;font-size:.65rem;letter-spacing:.5px;padding:.4rem .5rem;border-bottom:1px solid var(--border);text-align:left}
.leaderboard-table td{padding:.35rem .5rem;border-bottom:1px solid var(--border);color:var(--text)}
.leaderboard-table td.positive{color:var(--success)}
.leaderboard-table td.negative{color:var(--danger)}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.2rem;border:none;border-radius:var(--radius-sm);font-weight:600;
  font-size:.9rem;cursor:pointer;transition:all .25s var(--ease);text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-light);transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent-light)}
.btn-outline:hover{background:var(--accent);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#ef4444}
.btn-success{background:var(--success);color:#0d0d1a}
.btn-success:hover{background:#2dd38a}
.btn-gold{background:var(--gold);color:#0d0d1a;font-weight:700}
.btn-gold:hover{background:#ffe44d}
.btn-sm{padding:.4rem .8rem;font-size:.8rem}
.btn-lg{padding:.8rem 1.6rem;font-size:1rem}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}

/* ── Game Container ────────────────────────────────────────── */
.game-container{display:flex;flex-direction:column;height:calc(100vh - 56px);overflow:hidden}

/* ── Poker Table ───────────────────────────────────────────── */
.table-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:1rem;overflow:hidden;
  background:radial-gradient(ellipse at center,#0f1a2a 0%,var(--bg) 100%)}

.poker-table{
  position:relative;width:min(900px,90vw);aspect-ratio:1.8/1;
  background:radial-gradient(ellipse at 50% 50%,var(--felt) 0%,var(--felt-dark) 100%);
  border-radius:50%;border:6px solid #3a2a1a;
  box-shadow:0 0 0 8px #1a1206,0 0 40px rgba(26,92,42,.3),inset 0 0 60px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
}

/* ── Community Cards ───────────────────────────────────────── */
.community-cards{display:flex;gap:.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* ── Pot Display ───────────────────────────────────────────── */
.pot-display{position:absolute;top:32%;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.5);padding:.3rem .8rem;border-radius:var(--radius-sm);
  font-size:.85rem;color:var(--gold);font-weight:600;white-space:nowrap}

/* ── Player Seats ──────────────────────────────────────────── */
.seat{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  transition:all .3s var(--ease);
}

/* Seat positions around the ellipse (8 max) */
.seat[data-seat="0"]{bottom:-12%;left:50%;transform:translateX(-50%)}
.seat[data-seat="1"]{bottom:0;left:12%}
.seat[data-seat="2"]{top:20%;left:-2%}
.seat[data-seat="3"]{top:-8%;left:20%}
.seat[data-seat="4"]{top:-8%;right:20%}
.seat[data-seat="5"]{top:20%;right:-2%}
.seat[data-seat="6"]{bottom:0;right:12%}
.seat[data-seat="7"]{bottom:-12%;right:30%}

.seat-info{
  background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-sm);
  padding:.35rem .6rem;text-align:center;min-width:90px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.seat-info.active-turn{border-color:var(--gold);box-shadow:0 0 12px var(--gold-dim);animation:seatPulse 1.2s ease-in-out infinite}
.seat-info.folded{opacity:.4}
.seat-info.hero{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.seat-info.hero.active-turn{animation:seatPulseHero 1.2s ease-in-out infinite}

@keyframes seatPulse{0%,100%{box-shadow:0 0 8px var(--gold-dim)}50%{box-shadow:0 0 20px rgba(255,215,0,.35)}}
@keyframes seatPulseHero{0%,100%{box-shadow:0 0 8px var(--accent-glow)}50%{box-shadow:0 0 20px rgba(124,92,255,.4)}}

.seat-name{font-size:.75rem;font-weight:600;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.seat-avatar{font-size:1.5rem;line-height:1;margin-bottom:.15rem}
.seat-chips{font-size:.7rem;color:var(--gold)}
.seat-action{font-size:.65rem;color:var(--accent-light);font-weight:500;min-height:1em}
.seat-bet{
  position:absolute;font-size:.7rem;color:var(--gold);background:rgba(0,0,0,.5);
  padding:.15rem .4rem;border-radius:4px;white-space:nowrap;
}
.seat-cards{display:flex;gap:2px}

/* Dealer button */
.dealer-btn{
  position:absolute;width:22px;height:22px;background:var(--gold);color:#0d0d1a;
  border-radius:50%;font-size:.6rem;font-weight:900;display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5);z-index:2;
  border:2px solid #b89600;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card{
  width:48px;height:68px;border-radius:5px;font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  box-shadow:var(--card-shadow);transition:transform .3s var(--ease);
  position:relative;line-height:1;
}
.card-front{background:var(--card-white);color:#1a1a1a;border:1px solid #ccc}
.card-back{background:linear-gradient(135deg,#2a1a6a,#4a2a8a);border:1px solid #5a3a9a;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.03) 4px,rgba(255,255,255,.03) 8px)}
.card .rank{font-size:.85rem}
.card .suit{font-size:.9rem;line-height:1}
.card.red{color:#c0392b}
.card.black{color:#1a1a1a}

/* Larger cards for hero hand */
.hero-cards .card{width:64px;height:92px;font-size:1rem}
.hero-cards .card .rank{font-size:1.15rem}
.hero-cards .card .suit{font-size:1.2rem}

/* Tiny seat cards */
.seat-cards .card{width:28px;height:40px;font-size:.55rem}
.seat-cards .card .rank{font-size:.55rem}
.seat-cards .card .suit{font-size:.6rem}

/* Card deal animation */
@keyframes dealCard{from{opacity:0;transform:translateY(-40px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
.card-deal{animation:dealCard .4s var(--ease) both}

/* Community card reveal */
/* 3D Card flip animations */
@keyframes revealCard{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}
.card-reveal{animation:revealCard .4s var(--ease) both}

.card-3d-container{perspective:600px;display:inline-block}
.card-3d{position:relative;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.card-3d.flipped{transform:rotateY(180deg)}
.card-3d .card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:var(--radius-sm)}
.card-3d .card-face.card-front{transform:rotateY(180deg)}
.card-3d .card-face.card-back{transform:rotateY(0)}

/* Showdown stagger */
.showdown-flip{animation:showdownFlip .6s var(--ease) both}
@keyframes showdownFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}

/* Winner highlight */
.card.winner-card{box-shadow:0 0 12px var(--gold),0 0 24px rgba(255,215,0,.3);border-color:var(--gold)!important}
@keyframes winGlow{0%,100%{box-shadow:0 0 8px var(--gold)}50%{box-shadow:0 0 20px rgba(255,215,0,.5)}}
.card.winner-card{animation:winGlow 1.5s ease-in-out infinite}

/* ── Hero Hand Area ────────────────────────────────────────── */
.hero-area{
  position:absolute;bottom:4%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.hero-cards{display:flex;gap:.4rem}
.hero-hand-rank{font-size:.75rem;color:var(--accent-light);font-weight:600;
  background:rgba(0,0,0,.5);padding:.2rem .6rem;border-radius:4px}

/* ── Controls Panel ────────────────────────────────────────── */
.controls{
  background:var(--bg-alt);border-top:1px solid var(--border);
  padding:.6rem 1rem;display:flex;align-items:center;justify-content:center;
  gap:.5rem;flex-wrap:wrap;flex-direction:column;
}

.timer-bar{width:100%;max-width:600px;height:4px;background:var(--surface);border-radius:2px;overflow:hidden;margin-bottom:.3rem}
.timer-fill{height:100%;width:100%;background:var(--accent);border-radius:2px;transition:width .1s linear}
.timer-fill.urgent{background:var(--danger)}
.timer-fill.warning{background:var(--gold)}

.action-buttons{display:flex;gap:.4rem;align-items:center}

.raise-group{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.raise-group input[type="range"]{width:120px;accent-color:var(--accent)}
.raise-group .raise-val{min-width:50px;text-align:center;font-size:.85rem;color:var(--gold);font-weight:600}

.bet-presets{display:flex;gap:.25rem}
.bet-presets .preset{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);padding:.3rem .5rem;font-size:.7rem}
.bet-presets .preset:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── Log / Chat ────────────────────────────────────────────── */
.game-log{
  position:absolute;top:56px;right:0;width:260px;max-height:calc(100vh - 112px);
  background:var(--bg-alt);border-left:1px solid var(--border);
  overflow-y:auto;padding:.5rem;font-size:.75rem;color:var(--text-dim);
  display:flex;flex-direction:column;gap:.2rem;z-index:50;
  transition:transform .3s var(--ease);
}
.game-log.hidden{transform:translateX(100%)}
.game-log .log-entry{padding:.2rem .4rem;border-radius:4px}
.game-log .log-entry.action{color:var(--text)}
.game-log .log-entry.win{color:var(--gold)}
.game-log .log-entry.fold{color:var(--text-dim)}
.game-log .log-entry.system{color:var(--info)}

.toggle-log{position:absolute;top:64px;right:8px;z-index:51;background:var(--surface);border:1px solid var(--border);
  color:var(--text-dim);padding:.3rem .5rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.75rem}
.toggle-log:hover{color:var(--text-bright)}

.toggle-history{position:absolute;top:86px;right:8px;z-index:51;background:var(--surface);border:1px solid var(--border);
  color:var(--text-dim);padding:.3rem .5rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.75rem}
.toggle-history:hover{color:var(--text-bright)}

/* ── Hand History ──────────────────────────────────────────── */
.hand-history{
  position:absolute;top:56px;right:0;width:280px;max-height:calc(100vh - 112px);
  background:var(--bg-alt);border-left:1px solid var(--border);
  overflow-y:auto;padding:.5rem;z-index:49;transition:transform .3s var(--ease);
}
.hand-history.hidden{transform:translateX(100%)}
.hand-history h4{font-family:'Cinzel',serif;color:var(--text-bright);font-size:.85rem;margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:1px solid var(--border)}
.history-entry{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .5rem;margin-bottom:.4rem;font-size:.7rem}
.history-entry .h-header{display:flex;justify-content:space-between;color:var(--text-dim);margin-bottom:.2rem}
.history-entry .h-board{color:var(--accent-light);margin-bottom:.2rem}
.history-entry .h-winner{color:var(--gold);font-weight:600}
.history-entry .h-player{color:var(--text-dim)}

/* ── Stats Bar ─────────────────────────────────────────────── */
.stats-bar{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:1rem;background:rgba(0,0,0,.5);padding:.3rem 1rem;border-radius:var(--radius-sm);
  z-index:10;
}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:1px}
.stat-label{font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
.stat-val{font-size:.75rem;font-weight:600;color:var(--text-bright)}
.stat-val.positive{color:var(--success)}
.stat-val.negative{color:var(--danger)}

/* ── Tournament Info Bar ───────────────────────────────────── */
.tourney-info{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:1rem;background:rgba(0,0,0,.6);border:1px solid var(--gold-dim);
  padding:.3rem 1rem;border-radius:var(--radius-sm);z-index:10;font-size:.75rem;color:var(--text-dim);
}
.tourney-info.hidden{display:none}
.tourney-info strong{color:var(--gold)}
.tournament-card{border-color:var(--gold-dim)!important}
.tournament-card:hover{border-color:var(--gold)!important}

/* ── Result Overlay ────────────────────────────────────────── */
.result-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:200;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.result-overlay.show{opacity:1;pointer-events:auto}
.result-box{
  background:var(--bg-card);border:2px solid var(--gold);border-radius:var(--radius);
  padding:2rem 3rem;text-align:center;box-shadow:0 0 40px rgba(255,215,0,.15);
  transform:scale(.9);transition:transform .3s var(--ease);
}
.result-overlay.show .result-box{transform:scale(1)}
.result-box h2{font-family:'Cinzel',serif;color:var(--gold);font-size:1.5rem;margin-bottom:.5rem}
.result-box .result-detail{color:var(--text-dim);font-size:.9rem;margin-bottom:.3rem}
.result-box .result-amount{font-size:1.2rem;font-weight:700;margin:.5rem 0}
.result-box .result-amount.win{color:var(--success)}
.result-box .result-amount.lose{color:var(--danger)}
.result-box .btn{margin-top:1rem}

/* ── Settings Modal ────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  z-index:300;opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 2rem;
  max-width:400px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.modal h3{font-family:'Cinzel',serif;color:var(--text-bright);margin-bottom:1rem}
.modal label{display:block;font-size:.85rem;color:var(--text-dim);margin-bottom:.25rem;margin-top:.75rem}
.modal input,.modal select{width:100%;padding:.5rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font-size:.9rem}
.modal input:focus,.modal select:focus{outline:none;border-color:var(--accent)}
.modal .modal-actions{display:flex;gap:.5rem;margin-top:1.25rem;justify-content:flex-end}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:768px){
  .poker-table{width:95vw}
  .card{width:36px;height:52px;font-size:.65rem}
  .card .rank{font-size:.65rem}.card .suit{font-size:.7rem}
  .hero-cards .card{width:52px;height:74px;font-size:.85rem}
  .hero-cards .card .rank{font-size:.9rem}.hero-cards .card .suit{font-size:.95rem}
  .seat-info{min-width:70px;padding:.25rem .4rem}
  .seat-name{font-size:.65rem;max-width:70px}
  .seat-chips{font-size:.6rem}
  .game-log{width:200px}
  .controls{padding:.4rem .5rem}
  .raise-group input[type="range"]{width:80px}
  .lobby h1{font-size:1.8rem}
}

@media(max-width:480px){
  .poker-table{aspect-ratio:1.4/1}
  .seat-cards .card{width:22px;height:32px;font-size:.45rem}
  .seat-cards .card .rank{font-size:.45rem}.seat-cards .card .suit{font-size:.5rem}
  .hero-cards .card{width:44px;height:64px}
  .lobby-options{grid-template-columns:1fr}
}