*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --bg:#07160d;
  --felt:#17502c;
  --felt2:#1e6337;
  --gold:#c9a227;
  --gold2:#f0d060;
  --text:#f5e6c8;
  --dim:#8a7050;
  --red:#c03030;
  --blue:#2244aa;
  --green:#2a7a44;
  --border:#5a4010;
  --card:#faf6e8;
  --card2:#f0ece0;
}
html,body{height:100%;overflow:hidden;}
body{
  background:var(--bg);
  font-family:Georgia,'Book Antiqua',Palatino,serif;
  color:var(--text);
  display:flex;justify-content:center;align-items:flex-start;
}
#root{
  width:100%;max-width:480px;height:100vh;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}

/* ── SCROLLABLE PAGE ── */
.page{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.page-inner{padding:20px;min-height:100%;}

/* ── MENU ── */
.menu-bg{
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, var(--felt) 0%, var(--bg) 70%);
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:40px 24px;
}
.logo-icon{font-size:72px;line-height:1;margin-bottom:4px;
  filter:drop-shadow(0 4px 16px rgba(201,162,39,.5));}
.logo-title{
  font-size:42px;letter-spacing:3px;
  color:var(--gold);
  text-shadow:0 2px 12px rgba(201,162,39,.4);
  margin-bottom:4px;
}
.logo-sub{font-size:13px;color:var(--dim);font-style:italic;margin-bottom:48px;}

/* ── BUTTONS ── */
.btn{
  display:block;width:100%;padding:14px 20px;
  border:none;border-radius:9px;
  font-family:Georgia,serif;font-size:16px;
  cursor:pointer;transition:.15s ease;
  font-weight:bold;text-align:center;
}
.btn+.btn{margin-top:10px;}
.btn:active{transform:scale(.97);}
.btn-gold{
  background:linear-gradient(135deg,#b8901f,var(--gold2));
  color:#1a0f00;
  box-shadow:0 4px 16px rgba(201,162,39,.35);
  border:1px solid var(--gold2);
}
.btn-green{background:#1e6332;color:var(--text);border:1px solid #2a8a44;}
.btn-red{background:#7a1e1e;color:var(--text);border:1px solid #aa3030;}
.btn-blue{background:#1e2e7a;color:var(--text);border:1px solid #3355aa;}
.btn-ghost{background:transparent;color:var(--dim);border:1px solid var(--border);}
.btn-sm{padding:10px 14px;font-size:13px;}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important;}

/* ── HEADER ── */
.header{
  background:#0c2218;
  border-bottom:1px solid var(--border);
  padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.header-left{font-size:12px;color:var(--dim);}
.header-pot{font-size:20px;font-weight:bold;color:var(--gold);}
.phase-tag{
  font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  background:var(--felt);color:var(--gold2);
  padding:2px 7px;border-radius:4px;margin-top:2px;display:inline-block;
}

/* ── PHASE DOTS ── */
.phases{
  display:flex;justify-content:center;align-items:center;
  gap:5px;padding:7px 0;background:#0a1c10;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.pdot{
  width:7px;height:7px;border-radius:50%;
  background:var(--border);transition:.3s;
}
.pdot.done{background:var(--gold2);}
.pdot.cur{
  background:var(--gold);width:10px;height:10px;
  box-shadow:0 0 8px var(--gold);
}
.blind-info{
  font-size:10px;color:var(--dim);margin-left:10px;
  letter-spacing:.5px;
}

/* ── QUESTION CARD ── */
.qcard{
  background:var(--card);color:#1a1a1a;
  border-radius:12px;padding:18px;
  border:2px solid var(--gold);
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  margin-bottom:14px;
}
.qlabel{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:#888;margin-bottom:8px;
}
.qtext{font-size:15px;line-height:1.55;font-weight:bold;color:#111;}
.hint{
  background:#ecf5e8;border-left:3px solid #3a9a50;
  padding:9px 12px;margin-top:10px;border-radius:0 6px 6px 0;
}
.hint-lbl{font-size:9px;color:#3a7a40;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;}
.hint p{font-size:13px;color:#222;line-height:1.5;}
.answer{
  background:#fff8e0;border-left:3px solid var(--gold);
  padding:9px 12px;margin-top:10px;border-radius:0 6px 6px 0;
}
.answer-lbl{font-size:9px;color:#8a6000;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;}
.answer-val{font-size:28px;font-weight:bold;color:#5a3a00;}

/* ── GUESS ── */
.guess-wrap{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:24px;text-align:center;
  background:radial-gradient(ellipse 70% 50% at 50% 60%,var(--felt) 0%,var(--bg) 75%);
}
.avatar{
  width:68px;height:68px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a0f00;font-size:28px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  box-shadow:0 4px 16px rgba(201,162,39,.4);
}
.guess-wrap h3{font-size:20px;margin-bottom:6px;}
.guess-wrap .sub{color:var(--dim);font-size:13px;font-style:italic;margin-bottom:28px;}
.num-input{
  background:#1a3322;border:2px solid var(--border);
  color:var(--text);padding:14px;border-radius:9px;
  font-size:32px;font-family:Georgia,serif;text-align:center;
  width:100%;max-width:220px;margin-bottom:16px;
  -webkit-appearance:none;
}
.num-input:focus{outline:none;border-color:var(--gold);}

/* ── PLAYERS LIST ── */
.players{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.prow{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:#0d2218;
  border-radius:8px;border:1px solid var(--border);
  transition:.2s;
}
.prow.active{
  border-color:var(--gold);background:#162e1e;
  box-shadow:0 0 14px rgba(201,162,39,.2);
}
.prow.folded{opacity:.35;}
.prow.me{border-left:3px solid var(--gold2);}
.pos-badge{
  width:22px;height:22px;border-radius:50%;
  font-size:8px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pos-d{background:var(--gold);color:#1a0f00;}
.pos-sb{background:#2a7a30;color:#fff;}
.pos-bb{background:#7a2a20;color:#fff;}
.pos-none{background:transparent;border:1px solid var(--border);color:var(--dim);}
.pname{flex:1;font-size:14px;}
.pchips{font-size:13px;color:var(--gold);}
.pbet{font-size:11px;color:var(--dim);}

/* ── BET CONTROLS ── */
.bet-panel{
  background:#0d2218;border-radius:10px;
  padding:14px;border:1px solid var(--border);
}
.bet-panel h4{
  font-size:11px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--dim);margin-bottom:12px;
}
.bet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.raise-row{display:flex;gap:8px;align-items:center;}
.raise-input{
  flex:1;background:#1a3322;border:1px solid var(--border);
  color:var(--text);padding:10px;border-radius:7px;
  font-family:Georgia,serif;font-size:15px;text-align:center;
  -webkit-appearance:none;
}
.raise-input:focus{outline:none;border-color:var(--gold);}

/* ── SHOWDOWN ── */
.win-banner{
  background:linear-gradient(135deg,#1a5a28,#0a3018);
  border-radius:12px;padding:20px;text-align:center;
  border:2px solid var(--gold);margin-bottom:16px;
}
.win-banner .trophy{font-size:48px;margin-bottom:8px;}
.win-banner h3{color:var(--gold);font-size:22px;}
.win-banner p{color:var(--dim);font-size:13px;margin-top:4px;}
.win-banner .pot-win{color:var(--gold2);font-size:16px;margin-top:6px;font-weight:bold;}
.rcard{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:#0d2218;
  border-radius:9px;border:1px solid var(--border);
  margin-bottom:8px;
}
.rcard.win{border-color:var(--gold);background:#152e1c;box-shadow:0 0 14px rgba(201,162,39,.25);}
.rank-num{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.rank-win{background:var(--gold);color:#1a0f00;}
.rank-other{background:#1a3322;color:var(--dim);}
.rname{flex:1;font-size:14px;}
.rguess{font-size:22px;font-weight:bold;color:var(--gold2);}
.rdiff{font-size:11px;color:var(--dim);}
.rchips{font-size:13px;color:#90ee90;}

/* ── SETUP / LOBBY ── */
.field-label{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;}
.text-input{
  width:100%;background:#122018;border:1px solid var(--border);
  color:var(--text);padding:11px 14px;border-radius:8px;
  font-family:Georgia,serif;font-size:15px;margin-bottom:10px;
}
.text-input:focus{outline:none;border-color:var(--gold);}
.select-input{
  width:100%;background:#122018;border:1px solid var(--border);
  color:var(--text);padding:11px 14px;border-radius:8px;
  font-family:Georgia,serif;font-size:15px;margin-bottom:10px;
  -webkit-appearance:none;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='%238a7050' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.select-input:focus{outline:none;border-color:var(--gold);}
.player-row-setup{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.pnum{
  width:28px;height:28px;border-radius:50%;
  background:var(--gold);color:#1a0f00;font-size:12px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.divider{height:1px;background:var(--border);margin:18px 0;}
.chips-row{
  display:flex;align-items:center;gap:12px;
  background:#122018;border-radius:9px;padding:14px;
  border:1px solid var(--border);margin-bottom:14px;
}
.chips-row label{color:var(--dim);font-size:13px;flex:1;}
.chips-input{
  width:90px;background:#1a3322;border:1px solid var(--border);
  color:var(--text);padding:9px;border-radius:6px;
  font-family:Georgia,serif;font-size:16px;text-align:center;
  -webkit-appearance:none;
}
.chips-input:focus{outline:none;border-color:var(--gold);}

/* ── ROOM CODE ── */
.room-code{
  font-size:48px;font-weight:bold;letter-spacing:8px;
  color:var(--gold);text-align:center;
  text-shadow:0 2px 12px rgba(201,162,39,.4);
  margin:16px 0;
}
.room-code-label{
  font-size:11px;color:var(--dim);text-transform:uppercase;
  letter-spacing:1px;text-align:center;
}

/* ── LOBBY PLAYER LIST ── */
.lobby-player{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:#0d2218;
  border-radius:8px;border:1px solid var(--border);
  margin-bottom:6px;
}
.lobby-player .avatar-sm{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a0f00;font-size:14px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.lobby-player .lp-name{flex:1;font-size:15px;}
.lobby-player .lp-host{
  font-size:10px;background:var(--gold);color:#1a0f00;
  padding:2px 6px;border-radius:4px;font-weight:bold;
}
.lobby-player.disconnected{opacity:.4;}

/* ── PROGRESS BAR ── */
.progress-bar{
  background:#1a3322;border-radius:6px;height:8px;
  margin:12px 0;overflow:hidden;
}
.progress-fill{
  height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:6px;transition:width .3s ease;
}

/* ── RULES ── */
.rules-item{
  background:#0d2218;border-radius:9px;padding:14px;
  border:1px solid var(--border);margin-bottom:10px;
  display:flex;gap:12px;align-items:flex-start;
}
.rules-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--gold);color:#1a0f00;font-size:14px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.rules-text h4{font-size:14px;color:var(--gold2);margin-bottom:4px;}
.rules-text p{font-size:13px;color:var(--dim);line-height:1.5;}

/* ── UTILS ── */
.fade{animation:fadeUp .25s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.mt12{margin-top:12px;}
.tc{text-align:center;}
.gold{color:var(--gold);}
.dim{color:var(--dim);}
.badge{
  display:inline-block;padding:2px 7px;border-radius:4px;
  font-size:10px;background:var(--felt);color:var(--gold2);
}
h2.screen-title{
  color:var(--gold);font-size:22px;text-align:center;margin-bottom:24px;
  letter-spacing:1px;
}

/* ── ERROR MESSAGE ── */
.error-msg{
  background:#7a1e1e;color:var(--text);
  padding:10px 14px;border-radius:8px;
  margin-bottom:12px;font-size:13px;text-align:center;
  border:1px solid #aa3030;
}

/* ── WAITING SPINNER ── */
.waiting{
  text-align:center;padding:20px;color:var(--dim);
}
.waiting .icon{font-size:28px;margin-bottom:8px;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ── DISCONNECT BANNER ── */
.disconnect-banner{
  background:#7a1e1e;color:var(--text);
  padding:10px 14px;text-align:center;
  font-size:13px;font-weight:bold;
  border-bottom:1px solid #aa3030;
  animation:pulse 1.5s infinite;
  flex-shrink:0;
}

/* ── CELEBRATION TABLE SCENE ── */
.celebration-scene{
  position:relative;width:100%;max-width:440px;
  height:280px;margin:0 auto 20px;
}
.poker-table-oval{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:60%;height:50%;
  background:radial-gradient(ellipse,var(--felt2) 0%,var(--felt) 70%,#0f3a1e 100%);
  border-radius:50%;
  border:3px solid var(--gold);
  box-shadow:0 0 30px rgba(201,162,39,.3),inset 0 0 40px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
}
.poker-table-oval .table-label{
  font-size:13px;color:rgba(201,162,39,.25);
  letter-spacing:3px;text-transform:uppercase;
}
.table-player{
  position:absolute;transform:translate(-50%,-50%);
  text-align:center;z-index:2;
  opacity:0;animation:playerAppear .4s ease forwards;
}
.table-player .tp-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a0f00;font-size:13px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 3px;
  border:2px solid transparent;
}
.table-player.winner .tp-avatar{
  border-color:var(--gold2);
  box-shadow:0 0 16px var(--gold),0 0 32px rgba(201,162,39,.4);
  animation:winnerPulse 1.2s ease infinite;
}
.table-player.loser .tp-avatar{
  background:#1a3322;border:2px solid var(--border);
  color:var(--dim);opacity:.7;
}
.table-player .tp-name{
  font-size:10px;color:var(--text);white-space:nowrap;
  max-width:64px;overflow:hidden;text-overflow:ellipsis;
}
.table-player .tp-chips{font-size:9px;color:var(--dim);}
.table-player .tp-chips.gold{color:var(--gold2);font-weight:bold;}
.table-player .crown{
  position:absolute;top:-16px;left:50%;
  transform:translateX(-50%);font-size:18px;
  opacity:0;animation:crownBounce .5s ease .6s forwards;
}
.flying-chip{
  position:absolute;width:14px;height:14px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border:1.5px solid #a07810;
  z-index:3;opacity:0;
  animation:flyChip .7s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:var(--delay,0s);
}
.flying-chip:nth-child(odd){width:10px;height:10px;}

@keyframes playerAppear{
  from{opacity:0;transform:translate(-50%,-50%) scale(.3);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
@keyframes winnerPulse{
  0%,100%{box-shadow:0 0 16px var(--gold),0 0 32px rgba(201,162,39,.4);}
  50%{box-shadow:0 0 24px var(--gold2),0 0 48px rgba(201,162,39,.6);}
}
@keyframes crownBounce{
  0%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(0);}
  60%{transform:translateX(-50%) translateY(3px) scale(1.2);}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
@keyframes flyChip{
  0%{left:var(--fx);top:var(--fy);opacity:1;transform:scale(1);}
  50%{opacity:1;transform:scale(1.4);}
  100%{left:var(--tx);top:var(--ty);opacity:0;transform:scale(.4);}
}

/* ── BOT MODE BADGE ── */
.bot-mode-badge{
  display:inline-block;background:#1a3a5a;color:#80c0ff;
  padding:1px 6px;border-radius:4px;font-size:9px;
  margin-left:6px;letter-spacing:.5px;vertical-align:middle;
}

/* ── MY ESTIMATE (read-only in betting) ── */
.my-estimate{
  background:rgba(201,162,39,.08);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;margin-bottom:10px;
  font-size:13px;color:var(--dim);text-align:center;
}
.my-estimate b{color:var(--gold);font-size:15px;}

/* ── ACTION TIMELINE ── */
.action-timeline{
  background:#0a1c10;border-radius:8px;
  padding:8px 10px;margin-bottom:12px;
  border:1px solid var(--border);
}
.at-label{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;}
.at-items{display:flex;align-items:center;gap:4px;overflow-x:auto;padding-bottom:2px;}
.action-chip{
  display:flex;align-items:center;gap:3px;
  padding:4px 8px;border-radius:6px;
  font-size:11px;white-space:nowrap;
  background:#122018;border:1px solid var(--border);
}
.act-check{border-color:#2a7a44;color:#90ee90;}
.act-call{border-color:var(--gold);color:var(--gold2);}
.act-raise{border-color:#2a7a44;color:#60d060;}
.act-fold{border-color:var(--red);color:#ff8080;opacity:.6;}
.at-icon{font-size:12px;}
.at-name{font-weight:bold;}
.at-amt{color:var(--dim);font-size:10px;}
.at-arrow{color:var(--border);font-size:10px;flex-shrink:0;}

/* ── MULTIPLIER BUTTONS ── */
.multiplier-row{
  display:flex;gap:8px;justify-content:center;margin-bottom:12px;
}
.mult-btn{
  padding:6px 14px!important;font-size:12px!important;
  letter-spacing:1px;min-width:auto!important;width:auto!important;
}

/* ── BOT STYLES ── */
.bot-avatar{
  background:linear-gradient(135deg,#3a6a8a,#5a9aba)!important;
  color:#fff!important;font-size:16px!important;
}
.bot-badge{
  display:inline-block;padding:1px 5px;border-radius:3px;
  font-size:9px;font-weight:bold;letter-spacing:.3px;
  margin-left:4px;
}
.bot-easy{background:#2a7a44;color:#c0f0c0;}
.bot-medium{background:#7a6a1a;color:#f0e0a0;}
.bot-hard{background:#7a2a2a;color:#f0a0a0;}
.bot-remove{
  background:none;border:none;color:var(--red);
  font-size:18px;cursor:pointer;padding:0 4px;
  line-height:1;opacity:.6;
}
.bot-remove:hover{opacity:1;}
.bot-add-row{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;
  margin-top:10px;
}
.bot-add-row .btn{font-size:11px;padding:8px 4px;}
.prow.bot{border-left:3px solid #5a9aba;}
/* ── SIDE POT ── */
.side-pot-info{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;background:#0d2218;
  border-radius:6px;border:1px solid var(--border);
  margin-bottom:4px;font-size:13px;
}
.side-pot-label{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.side-pot-amount{color:var(--gold);font-weight:bold;}

.lobby-player.bot .avatar-sm{
  background:linear-gradient(135deg,#3a6a8a,#5a9aba)!important;
  color:#fff!important;font-size:14px!important;
}