:root {
  color-scheme: dark;
  --gold: #d7aa57;
  --cream: #f6ead5;
  --ink: #160f0a;
  --panel: rgba(20, 13, 8, .82);
  --panel2: rgba(10, 7, 4, .70);
  --line: rgba(226, 184, 110, .34);
  --red: #8d3528;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0d0906; font-family: Georgia, 'Times New Roman', serif; }
body { min-height: 100vh; overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
.game {
  position: relative;
  width: min(100vw, 177.78vh);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #17100b;
}
.sage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -3; transition: opacity .18s ease; }
.shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(to bottom, rgba(8,5,3,.32) 0%, rgba(8,5,3,.06) 32%, rgba(8,5,3,.08) 55%, rgba(8,5,3,.68) 76%, rgba(8,5,3,.92) 100%); pointer-events: none; }
.topbar { display:flex; align-items:flex-start; gap:18px; padding:18px 22px; }
.brand { flex:1; text-shadow:0 2px 10px #000; }
.brand h1 { margin:2px 0 0; color:var(--cream); font-size:clamp(1.25rem,2.2vw,2rem); line-height:1; }
.eyebrow { color:var(--gold); font-size:.72rem; letter-spacing:.18em; }
.hud { display:flex; gap:8px; }
.stat { min-width:76px; padding:8px 12px; text-align:center; background:rgba(12,8,5,.72); border:1px solid var(--line); border-radius:10px; backdrop-filter:blur(5px); }
.stat span { display:block; font: 700 .67rem/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#d8c7aa; }
.stat strong { display:block; margin-top:4px; color:white; font:800 1.05rem/1 system-ui,sans-serif; }
.icon-btn { width:42px; height:42px; border-radius:10px; border:1px solid var(--line); color:var(--cream); background:rgba(12,8,5,.76); }
.settings { position:absolute; right:20px; top:72px; z-index:20; width:min(290px, calc(100% - 40px)); padding:15px; border:1px solid var(--line); border-radius:12px; background:rgba(18,12,8,.96); box-shadow:0 10px 30px rgba(0,0,0,.45); font-family:system-ui,sans-serif; }
.switch-row,.range-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:9px 0; color:#f4ead8; }
.range-row input { width:135px; }
.switch-row small { color:#bda98a; }
.small-btn { width:100%; margin-top:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#2a1b10; color:var(--cream); }
.sage-zone { position:absolute; left:50%; top:9%; transform:translateX(-50%); width:min(900px,94vw); display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.sage-reveal { display:flex; flex-direction:column; align-items:center; padding:8px 12px 10px; border:1px solid var(--line); border-radius:12px; background:rgba(12,8,5,.80); backdrop-filter:blur(5px); }
.sage-reveal[hidden] { display:none; }
.opponent-label { margin-bottom:5px; color:var(--gold); font:800 .68rem/1 system-ui,sans-serif; letter-spacing:.12em; }

.hand-result {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:18;
  width:min(760px,90%);
  padding:18px 24px;
  border:2px solid rgba(235,196,120,.88);
  border-radius:14px;
  background:rgba(14,9,5,.90);
  color:#fff4df;
  text-align:center;
  text-transform:uppercase;
  font:900 clamp(1.55rem,3.3vw,2.8rem)/1.15 Georgia,'Times New Roman',serif;
  letter-spacing:.025em;
  text-shadow:0 2px 5px #000;
  box-shadow:0 10px 32px rgba(0,0,0,.55);
  pointer-events:none;
}
.hand-result[hidden] { display:none; }

.table-ui { position:absolute; left:50%; bottom:44px; transform:translateX(-50%); width:min(900px,96%); display:flex; flex-direction:column; align-items:center; }
.round-info { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-bottom:8px; font-family:system-ui,sans-serif; text-shadow:0 2px 5px #000; }
#phaseBadge { flex:none; padding:4px 9px; border-radius:999px; background:var(--gold); color:#1c1107; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.cards { display:flex; justify-content:center; align-items:flex-end; gap:clamp(4px,1vw,10px); }
.player-cards { margin-bottom:18px; }
.card {
  position:relative; width:clamp(72px,9vw,108px); aspect-ratio: 2.5 / 3.5; border-radius:8px; border:2px solid rgba(255,255,255,.9); background:#f6f0e2; color:#17120d; box-shadow:0 6px 15px rgba(0,0,0,.45); user-select:none; transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.card.red { color:#a12822; }
.card.selectable:hover { transform:translateY(-6px); }
.card.selected { transform:translateY(-16px); box-shadow:0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.55); }
.card.selected::after { content:'KEEP'; position:absolute; left:50%; bottom:5px; transform:translateX(-50%); padding:2px 5px; border-radius:4px; background:rgba(20,13,8,.86); color:#f6ead5; font:800 .58rem/1 system-ui,sans-serif; letter-spacing:.08em; }
.card .corner { position:absolute; left:7px; top:5px; display:flex; flex-direction:column; align-items:center; font:800 clamp(.72rem,1.5vw,1rem)/.9 Georgia,serif; }
.card .suit-big { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(1.7rem,3vw,2.7rem); }
.card.back { background:repeating-linear-gradient(45deg,#2a2a28 0 5px,#4b3324 5px 10px); border-color:#d8c2a0; }
.card.back::after { content:'★'; position:absolute; inset:8px; display:grid; place-items:center; border:2px solid rgba(237,210,160,.55); color:#d7b26d; font-size:1.6rem; }

.card.empty-card {
  visibility:hidden;
  pointer-events:none;
}
.actions { min-height:44px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:2px; }
.action-btn,.primary-btn { border:1px solid #e1bd79; border-radius:9px; padding:10px 16px; background:linear-gradient(#6c3d1f,#432515); color:#fff2d8; font-weight:800; box-shadow:0 3px 0 #231207, 0 6px 14px rgba(0,0,0,.35); }
.action-btn:hover,.primary-btn:hover { filter:brightness(1.12); }
.action-btn.secondary { background:linear-gradient(#41352b,#2c241e); }
.action-btn.danger { background:linear-gradient(#843b2f,#52251e); }
.action-btn:disabled { opacity:.45; cursor:default; filter:none; }
.discard-help { margin-top:8px; color:#e3ceb0; font:600 .95rem/1.25 system-ui,sans-serif; text-align:center; }
.statsbar { position:absolute; bottom:8px; left:14px; display:flex; gap:14px; color:#d8c7ab; font:.72rem system-ui,sans-serif; text-shadow:0 2px 4px #000; }
.statsbar strong { color:white; }
.hidden { display:none !important; }
@media (max-width: 700px) {
  .game { width:100vw; min-height:100svh; }
  .topbar { padding:10px; gap:8px; }
  .brand .eyebrow { display:none; }
  .brand h1 { font-size:1rem; }
  .hud { gap:4px; }
  .stat { min-width:58px; padding:6px 7px; }
  .stat strong { font-size:.92rem; }
  .icon-btn { width:36px; height:36px; }
  .sage-bg { object-position:center center; }
  .table-ui { bottom:50px; }
  .player-cards { margin-bottom:16px; }
  .round-info { flex-direction:column; gap:4px; text-align:center; }
  .card { width:clamp(60px,16vw,88px); }
  .actions { gap:5px; }
  .action-btn { padding:8px 10px; font-size:.82rem; }
  .statsbar { left:50%; transform:translateX(-50%); width:100%; justify-content:center; }
}

@media (max-width: 700px) { .hand-result { top:46%; padding:14px 16px; font-size:clamp(1.25rem,6vw,1.8rem); } }

/* Clear, purposeful poker communication */
.action-notice {
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  z-index:17;
  width:min(700px,88%);
  padding:14px 22px;
  border:2px solid rgba(235,196,120,.82);
  border-radius:12px;
  background:rgba(14,9,5,.88);
  color:#fff4df;
  text-align:center;
  text-transform:uppercase;
  font:900 clamp(1.35rem,2.7vw,2.25rem)/1.12 Georgia,'Times New Roman',serif;
  letter-spacing:.035em;
  text-shadow:0 2px 5px #000;
  box-shadow:0 8px 26px rgba(0,0,0,.48);
  pointer-events:none;
}
.action-notice[hidden] { display:none; }

.bet-tracker {
  position:absolute;
  left:50%;
  top:60%;
  transform:translateX(-50%);
  z-index:16;
  padding:8px 14px;
  border:1px solid rgba(235,196,120,.62);
  border-radius:999px;
  background:rgba(12,8,5,.82);
  color:#ffe7b8;
  white-space:nowrap;
  font:900 clamp(.9rem,1.65vw,1.2rem)/1 system-ui,sans-serif;
  letter-spacing:.045em;
  text-shadow:0 2px 4px #000;
  pointer-events:none;
}
.bet-tracker[hidden] { display:none; }

.bet-control { display:flex; align-items:center; gap:6px; }
.bet-control input {
  width:125px;
  min-width:0;
  padding:9px 10px;
  border:1px solid #d7aa57;
  border-radius:8px;
  background:rgba(18,12,8,.94);
  color:#fff4df;
  font:800 .9rem/1 system-ui,sans-serif;
}
.bet-control input::placeholder { color:#c9b58f; }

/* This instruction is gameplay-critical, not dialogue. */
.discard-help { font-size:1.2rem; font-weight:700; }

@media (max-width:700px) {
  .action-notice { top:43%; padding:11px 14px; font-size:clamp(1.05rem,5vw,1.55rem); }
  .bet-tracker { top:56%; font-size:.82rem; }
  .bet-control { width:100%; justify-content:center; }
  .bet-control input { width:min(145px,42vw); }
}

/* Clickable gold-nugget betting piles. Repeated clicks allow any wager up to available matching gold. */
.gold-bet-control {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}
.gold-bet-amount {
  flex:0 0 100%;
  text-align:center;
  color:#ffe7b8;
  font:900 .9rem/1 system-ui,sans-serif;
  letter-spacing:.05em;
}
.gold-piles { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.gold-pile {
  appearance:none;
  min-width:52px;
  min-height:45px;
  padding:5px 8px;
  border:2px solid #f0c56d;
  border-radius:50% 46% 48% 44%;
  background:linear-gradient(145deg,#f7d77f,#b87519);
  color:#2c1603;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.45),0 2px 3px rgba(0,0,0,.5);
  cursor:pointer;
  font:900 1rem/1 system-ui,sans-serif;
}
.gold-pile:hover { filter:brightness(1.08); }
.gold-pile:active { transform:translateY(1px); }
.gold-pile span,.gold-pile small { display:block; }
.gold-pile small { margin-top:2px; font-size:.5rem; letter-spacing:.08em; }
.gold-bet-actions { display:flex; gap:6px; }
.gold-bet-actions button:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:700px) {
  .gold-pile { min-width:46px; min-height:41px; padding:4px 6px; }
  .gold-bet-control { gap:6px; }
}