:root{
  --felt-1:#8a2b3d;
  --felt-2:#45121e;
  --felt-3:#6a1e2e;
  --gold:#e0b95e;
  --gold-bright:#f3d488;
  --gold-dim:#8a6d2f;
  --accent: var(--gold);
  --accent-ink: var(--ink);
  --walnut:#171310;
  --walnut-2:#0a0806;
  --cream:#f5efdf;
  --cream-dim:rgba(245,239,223,.6);
  --ink:#20180f;
  --brick:#8a2233;
  --brick-bright:#e0697a;
  --gold-line:rgba(224,185,94,.4);
  --win:#6fd17f;
  --lose:#e0697a;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--walnut-2);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* ---------------- header ---------------- */
header{
  background:linear-gradient(180deg,var(--walnut),var(--walnut-2));
  border-bottom:2px solid var(--gold-line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
}
.brand-cluster .title{
  font-family:'Bebas Neue',cursive; font-size:28px; letter-spacing:.04em;
  color:var(--gold-bright); text-shadow:0 2px 10px rgba(232,169,76,.25);
}
.hud{ display:flex; align-items:center; }
.hud > *{ margin-left:10px; }
.hud > *:first-child{ margin-left:0; }
.icon-btn{
  width:36px; height:36px; border-radius:9px; border:1.5px solid var(--gold-line);
  background:rgba(0,0,0,.28); color:var(--cream); font-size:15px; cursor:pointer;
}
.icon-btn:hover{ border-color:var(--gold); }
.icon-btn.muted{ opacity:.5; }
.icon-btn-labeled{
  width:auto; padding:0 12px; font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; display:flex; align-items:center;
}
.icon-btn-labeled .ico{ font-size:14px; margin-right:5px; }

/* ---------------- setup panel ---------------- */
.table-wrap-outer{ flex:1; display:flex; flex-direction:column; position:relative; }
.setup-panel{
  flex:1; display:flex; align-items:center; justify-content:center; padding:30px 18px;
}
.setup-card{
  background:radial-gradient(circle at 50% 0%,var(--felt-1),var(--felt-2));
  border:2px solid var(--gold-line); border-radius:20px; padding:30px 26px;
  max-width:440px; width:100%; text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.setup-card h2{
  font-family:'Bebas Neue',cursive; font-size:32px; letter-spacing:.03em;
  color:var(--gold-bright); margin:0 0 4px;
}
.setup-sub{ color:var(--cream-dim); font-size:13px; margin:0 0 22px; }
.setup-options{ display:flex; flex-direction:column; margin-bottom:22px; }
.setup-options > *{ margin-bottom:12px; }
.setup-options > *:last-child{ margin-bottom:0; }
.role-option{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:14px 18px; border-radius:14px; border:2px solid var(--gold-line);
  background:rgba(0,0,0,.25); color:var(--cream); cursor:pointer; text-align:left;
  transition:.15s ease;
}
.role-option:hover{ border-color:var(--gold); background:rgba(0,0,0,.4); }
.role-option.selected{ border-color:var(--gold-bright); background:rgba(232,169,76,.1); box-shadow:0 0 0 3px rgba(232,169,76,.15); }
.role-option-title{ font-family:'Bebas Neue',cursive; font-size:20px; letter-spacing:.02em; color:var(--gold-bright); display:block; margin-bottom:2px; }
.role-option-desc{ font-size:12px; color:var(--cream-dim); display:block; }

/* ---------------- table ---------------- */
.table-wrap{ flex:1; display:flex; flex-direction:column; padding:14px 14px 6px; }

.stacks-row{ display:flex; justify-content:center; margin-bottom:6px; }
.stacks-row > *{ margin-right:10px; }
.stacks-row > *:last-child{ margin-right:0; }
.stack-box{
  text-align:center; background:rgba(0,0,0,.3); border:1px solid var(--gold-line);
  border-radius:10px; padding:6px 14px; min-width:80px;
}
.stack-box.highlight{ border-color:var(--gold-bright); }
.stack-box label{ display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim); }
.stack-box .val{ font-size:15px; font-weight:700; color:var(--gold-bright); }

.your-role-row{ text-align:center; font-size:12px; color:var(--cream-dim); margin-bottom:10px; }
.your-role-row span{ color:var(--gold-bright); font-weight:700; }

.felt{
  flex:1; min-height:260px; position:relative;
  background:radial-gradient(ellipse at 50% 30%, var(--felt-1) 0%, var(--felt-3) 55%, var(--felt-2) 100%);
  border:3px solid rgba(0,0,0,.4); border-radius:24px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55), inset 0 0 120px rgba(232,169,76,.05);
  display:flex; align-items:center; justify-content:space-around;
  padding:20px 10px; margin-bottom:14px;
}
.hand-zone{ text-align:center; min-width:90px; }
.hand-label{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-dim); margin-bottom:8px;
}
.banker-zone .hand-label{ color:var(--gold-bright); font-weight:700; }
.hand-cards{ display:flex; align-items:center; justify-content:center; min-height:56px; }
.hand-cards > *{ margin-right:4px; }
.hand-cards > *:last-child{ margin-right:0; }
.bq-card{
  width:36px; height:50px; border-radius:5px;
  background:var(--cream); display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.bq-card.red{ color:var(--brick); }
.bq-card.black{ color:var(--ink); }
.hand-total{ margin-top:6px; font-size:18px; color:var(--gold-bright); font-weight:700; }
.hand-bet{ margin-top:4px; font-size:12px; color:var(--cream-dim); }

/* ---------------- control rows (bank/bet sizing, decisions, results) ---------------- */
.control-row{ display:flex; flex-direction:column; align-items:center; }
.control-hint{ font-size:12px; color:var(--cream-dim); text-align:center; margin-bottom:10px; }
.control-sizing{ display:flex; align-items:center; width:100%; max-width:360px; margin-bottom:12px; }
.control-sizing > *{ margin-right:10px; }
.control-sizing > *:last-child{ margin-right:0; }
.control-amount{ font-size:14px; color:var(--gold-bright); font-weight:700; min-width:60px; text-align:right; }

.btn-primary, .btn-secondary{
  padding:13px 24px; border-radius:12px; border:1.5px solid var(--gold-line);
  font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; margin-left:8px;
}
.btn-primary:first-child, .btn-secondary:first-child{ margin-left:0; }
.btn-secondary{ background:rgba(0,0,0,.3); color:var(--cream); }
.btn-secondary:hover:not(:disabled){ border-color:var(--gold); background:rgba(0,0,0,.45); }
.btn-primary{
  background:linear-gradient(155deg,var(--gold-bright),var(--gold));
  color:var(--ink); border-color:transparent;
}
.btn-primary:hover:not(:disabled){ filter:brightness(1.08); }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; }

.result-row{ text-align:center; }
.result-line{ font-size:15px; font-weight:700; margin-bottom:4px; color:var(--cream); }

/* ---------------- overlays ---------------- */
.overlay{
  display:none; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.65);
  align-items:center; justify-content:center; z-index:50; padding:20px;
}
.overlay.open{ display:flex; }
.overlay-card{
  background:var(--felt-2); border:2px solid var(--gold-line); border-radius:16px;
  max-width:440px; width:100%; max-height:80vh; overflow-y:auto; position:relative;
  padding:18px;
}
.overlay-card h3{ font-family:'Bebas Neue',cursive; font-size:22px; color:var(--gold-bright); margin:0 0 12px; letter-spacing:.03em; }
.overlay-close{
  position:absolute; top:14px; right:14px; background:none; border:none;
  color:var(--cream); font-size:13px; cursor:pointer;
}
.overlay-body{ font-size:13px; line-height:1.6; color:var(--cream-dim); }
.overlay-body p{ margin:0 0 12px; }
.overlay-body p:last-child{ margin-bottom:0; }
.overlay-body .btn-secondary{ width:100%; margin-left:0; }

footer{
  font-size:10px; color:var(--cream-dim); text-align:center; padding:10px 16px 16px;
  max-width:600px; margin:0 auto; line-height:1.5;
}

/* Safari applies its own native styling to <button> elements, which
   overrides border-radius — round/pill buttons render as squares
   without this. Scoped to exactly the button classes this game
   actually uses, not a blanket button{} reset — a broader version of
   this same fix broke other games' header button layout elsewhere in
   this catalog by stripping native layout that CSS was depending on. */
.icon-btn, .role-option, .btn-primary, .btn-secondary{
  -webkit-appearance:none;
  appearance:none;
}

/* ---------------- mobile ---------------- */
@media (max-width:600px){
  .brand-cluster .title{ font-size:22px; }
  .felt{ flex-direction:column; padding:14px; }
  .felt .hand-zone{ margin-bottom:14px; }
  .felt .hand-zone:last-child{ margin-bottom:0; }
  .bq-card{ width:30px; height:42px; font-size:12px; }
  .stacks-row{ flex-wrap:wrap; justify-content:center; }
  .stacks-row > *{ margin-bottom:8px; }
  .control-sizing{ flex-wrap:wrap; }
}