@import url('https://fonts.googleapis.com/css2?family=Rye&family=Bitter:wght@600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* Deliberately distinct: charcoal/navy felt instead of green or
     burgundy, deep walnut instead of mahogany, warm copper instead
     of gold — a high-stakes back-room table, grounded in the game's
     own Western namesake without tipping into costume-party cliché. */
  --black:#0a0806;
  --black-2:#120e0a;
  --felt-1:#26313d;
  --felt-2:#141b22;
  --felt-3:#1c2530;
  --walnut-1:#5c3a24;
  --walnut-2:#2e1c10;
  --walnut-hi:#7a4f2f;
  --copper:#b87333;
  --copper-bright:#d4915c;
  --copper-dim:#7a4d22;
  --copper-line: rgba(184,115,51,.4);
  --cream:#f0e6d6;
  --ink:#1c140d;
  --brick:#8b3a2f;
  --brick-bright:#c25441;
  --win:#5fa87a;
  --lose:#c25441;
  --shadow: 0 18px 50px rgba(0,0,0,.6);
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh;
  background:
    radial-gradient(ellipse at 50% 0%, var(--felt-1) 0%, var(--felt-3) 55%, var(--felt-2) 100%);
  font-family:'Inter',system-ui,sans-serif;
  color:var(--cream);
  display:flex; flex-direction:column; align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.western{ font-family:'Rye',serif; }
.slab{ font-family:'Bitter',serif; }
.mono{ font-family:'IBM Plex Mono',monospace; }

/* ---------------- header ---------------- */
header{
  width:100%; align-self:stretch;
  background:linear-gradient(155deg,var(--walnut-2),var(--black-2));
  border-bottom:3px solid var(--copper);
  box-shadow: inset 0 -1px 0 rgba(212,145,92,.15);
  box-sizing:border-box;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto;
  padding:14px 24px; flex-wrap:wrap; gap:12px;
}
.brand-cluster{ display:flex; flex-direction:column; }
.title{
  font-family:'Rye',serif; font-weight:400; font-size:26px;
  color:var(--copper-bright); letter-spacing:.01em;
  text-shadow: 0 2px 10px rgba(212,145,92,.3);
}
.hud{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.stat{ text-align:right; }
.stat label{
  display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(240,230,214,.5); margin-bottom:1px;
}
.stat .val{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px; color:var(--cream); }
.icon-btn{
  width:38px; height:38px; border-radius:8px;
  background:rgba(212,145,92,.07); border:1px solid var(--copper-line);
  color:var(--copper-bright); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ border-color:var(--copper); background:rgba(212,145,92,.14); }
.quick-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  height:38px; box-sizing:border-box;
  background:rgba(212,145,92,.07); border:1px solid var(--copper-line);
  border-radius:8px; padding:0 12px; cursor:pointer; min-width:46px;
  color:var(--cream);
}
.quick-btn:hover{ border-color:var(--copper); background:rgba(212,145,92,.14); }
.quick-ico{ font-size:16px; line-height:1; }
.quick-label{
  font-family:'Inter',sans-serif; font-size:7px; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(240,230,214,.6); line-height:1;
}

/* ---------------- frame / table ---------------- */
.frame{ width:100%; max-width:1200px; display:flex; flex-direction:column; }
.table-wrap{ padding:18px 16px 14px; }
.saloon-table{
  position:relative;
  background:
    radial-gradient(ellipse at 50% -8%, var(--felt-1) 0%, var(--felt-3) 45%, var(--felt-2) 100%);
  border-radius:22px;
  border:5px solid var(--walnut-2);
  box-shadow: var(--shadow), inset 0 0 50px rgba(0,0,0,.4), inset 0 0 0 2px var(--copper-line);
  padding:20px 20px 18px;
}
.badge-line{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  width:78%; max-width:640px; height:2px;
  background:linear-gradient(90deg, transparent, var(--copper-line) 20%, var(--copper-line) 80%, transparent);
}

/* ---------------- dealer area ---------------- */
.dealer-row{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:8px; }
.dealer-label{
  font-family:'Bitter',serif; font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brick-bright);
}
.dealer-qual{
  font-family:'Inter',sans-serif; font-size:11px; color:rgba(240,230,214,.55);
  min-height:14px;
}
.cards-row{ display:flex; gap:8px; min-height:76px; align-items:center; justify-content:center; }
.card{
  width:52px; height:74px; border-radius:7px;
  background:var(--cream); color:var(--ink);
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 5px 14px rgba(0,0,0,.4);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bitter',serif; font-weight:700;
  opacity:0; transform:translateY(-12px) rotateY(90deg) scale(.9);
  animation: dealIn .34s ease forwards;
}
.card.red{ color:var(--brick); }
.card .corner{ position:absolute; top:5px; left:6px; font-size:13px; line-height:1.05; text-align:center; }
.card .corner.bottom{ top:auto; bottom:5px; left:auto; right:6px; transform:rotate(180deg); }
.card .pip{ font-size:20px; }
.card.back{
  background: repeating-linear-gradient(45deg, var(--felt-1) 0 6px, var(--walnut-2) 6px 12px);
  border:2px solid var(--copper-line);
}
@keyframes dealIn{
  0%{ opacity:0; transform:translateY(-12px) rotateY(90deg) scale(.9); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0) rotateY(0) scale(1); }
}
.card.winner-glow{ animation: dealIn .34s ease forwards, winPulse 1.1s ease-in-out .35s 2; }
@keyframes winPulse{
  0%,100%{ box-shadow:0 5px 14px rgba(0,0,0,.4); }
  50%{ box-shadow:0 5px 14px rgba(0,0,0,.4), 0 0 20px 5px rgba(212,145,92,.6); }
}

/* ---------------- community cards ---------------- */
.community-row{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:10px 0; }
.community-label{
  font-family:'Bitter',serif; font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(240,230,214,.5);
}
.community-cards{ display:flex; gap:7px; min-height:76px; align-items:center; justify-content:center; }

/* ---------------- player area ---------------- */
.player-row{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px; }
.player-label{
  font-family:'Bitter',serif; font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:#8fb0d6;
}
.hand-total{
  font-family:'Bitter',serif; font-weight:700; font-size:15px;
  color:var(--copper-bright); min-height:20px;
}

.result-banner{
  text-align:center; font-family:'Rye',serif; font-weight:400;
  font-size:23px; color:var(--copper-bright); min-height:30px;
  text-shadow:0 2px 12px rgba(212,145,92,.3);
  margin:6px 0 10px;
}

/* ---------------- betting zones ---------------- */
.betting-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.bet-zone{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:11px 16px; border-radius:13px;
  background:rgba(0,0,0,.22);
  border:2px solid var(--copper-line);
  cursor:pointer; transition:.15s ease; min-width:100px;
}
.bet-zone:hover{ border-color:var(--copper); background:rgba(0,0,0,.32); }
.bet-zone.active{ border-color:var(--copper-bright); box-shadow:0 0 0 3px rgba(212,145,92,.15); }
.bet-zone.locked{ opacity:.55; cursor:default; }
.bet-zone-name{
  font-family:'Bitter',serif; font-weight:700; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase;
}
.bet-zone-payout{ font-size:9px; color:rgba(240,230,214,.5); font-family:'Inter',sans-serif; }
.bet-zone-amount{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px; color:var(--copper-bright); }
.bet-zone.trips-zone{ border-style:dashed; }

/* ---------------- decision buttons ---------------- */
.decision-row{ display:flex; justify-content:center; gap:12px; margin:14px 0 4px; flex-wrap:wrap; }
.decision-btn{
  padding:13px 22px; border-radius:11px; border:1.5px solid var(--copper-line);
  background:rgba(0,0,0,.28); color:var(--cream);
  font-family:'Bitter',serif; font-weight:700; font-size:13px;
  letter-spacing:.03em; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:120px;
}
.decision-btn .sub{ font-family:'Inter',sans-serif; font-weight:400; font-size:10px; color:rgba(240,230,214,.55); text-transform:none; letter-spacing:0; }
.decision-btn:hover:not(:disabled){ border-color:var(--copper); background:rgba(0,0,0,.4); }
.decision-btn:disabled{ opacity:.35; cursor:default; }
.decision-btn.primary{
  background:linear-gradient(155deg,var(--copper-bright),var(--copper));
  color:var(--ink); border-color:transparent;
}
.decision-btn.primary .sub{ color:rgba(28,20,13,.65); }
.decision-btn.danger{
  background:linear-gradient(155deg,var(--brick-bright),var(--brick));
  color:var(--cream); border-color:transparent;
}
.decision-btn.danger .sub{ color:rgba(240,230,214,.75); }

/* ---------------- chip tray ---------------- */
.bottom-controls{ padding:0 18px 22px; }
.action-row{ display:flex; justify-content:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.btn{
  padding:12px 24px; border-radius:11px; border:1.5px solid var(--copper-line);
  background:rgba(0,0,0,.28); color:var(--cream);
  font-family:'Inter',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.03em; cursor:pointer; display:flex; align-items:center; gap:8px;
}
.btn:hover:not(:disabled){ border-color:var(--copper); background:rgba(0,0,0,.4); }
.btn:disabled{ opacity:.35; cursor:default; }
.btn-primary{
  background:linear-gradient(155deg,var(--copper-bright),var(--copper));
  color:var(--ink); border-color:transparent;
}
.chip-strip{ display:flex; align-items:center; justify-content:center; gap:10px; }
.chip-row{ display:flex; gap:10px; }
.chip{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px;
  border:3px dashed rgba(255,255,255,.5); color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.chip.selected{ outline:3px solid var(--copper-bright); outline-offset:2px; }
.chip.c1{ background:#6b6b6b; }
.chip.c5{ background:#2f7850; }
.chip.c10{ background:#a4283a; }
.chip.c25{ background:#1c4a8f; }
.chip.c100{ background:#171313; border-color:var(--copper-line); }

/* ---------------- panels ---------------- */
.panel-overlay{
  display:none; position:fixed; inset:0; background:rgba(5,3,3,.7);
  align-items:center; justify-content:center; z-index:1000; padding:16px;
}
.panel-overlay.open{ display:flex; }
.panel{
  background:linear-gradient(165deg,var(--walnut-2),var(--black-2));
  border:1px solid var(--copper-line); border-radius:15px;
  padding:22px; max-width:440px; width:100%;
  box-shadow:var(--shadow);
}
.panel h2{ font-family:'Rye',serif; font-weight:400; color:var(--copper-bright); margin:0 0 12px; }
.panel .sub{ color:rgba(240,230,214,.6); font-size:13px; margin:-6px 0 12px; }
.rules-list{ margin:0; padding-left:18px; font-size:13px; line-height:1.7; color:rgba(240,230,214,.85); }
.rules-list li{ margin-bottom:6px; }
.panel-close{
  width:100%; margin-top:14px; padding:12px; border-radius:10px;
  border:1px solid var(--copper-line); background:rgba(212,145,92,.08);
  color:var(--cream); font-family:'Inter',sans-serif; font-weight:700; cursor:pointer;
}

footer{
  text-align:center; font-size:11px; color:rgba(240,230,214,.55);
  padding:12px 20px 18px; line-height:1.6; max-width:900px; margin:0 auto;
}

@media (max-width:760px){
  .title{ font-size:21px; }
  .card{ width:42px; height:60px; }
  .card .pip{ font-size:16px; }
  .card .corner{ font-size:10px; }
  .bet-zone{ min-width:84px; padding:9px 10px; }
  .betting-row{ gap:10px; }
  .decision-btn{ min-width:100px; padding:11px 16px; }
  .chip{ width:40px; height:40px; font-size:11px; }
  .result-banner{ font-size:19px; }
}