:root{
  --wood-dark:#1c0f08;
  --wood:#3a1d10;
  --wood-light:#5b2c12;
  --felt:#0f3d2e;
  --felt-light:#155a44;
  --felt-line:#c9a35c;
  --gold:#e3ad54;
  --gold-bright:#ffd76a;
  --cream:#f5e5c6;
  --ink:#160b06;
  --red-suit:#c0392b;
  --black-suit:#1a1310;
  --muted:#c9b28e;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{
  margin:0;
  min-height:100%;
  background:var(--wood-dark);
  color:var(--cream);
  font-family:Georgia,"Times New Roman",serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

.room{
  position:relative;
  height:100dvh;
  overflow:hidden;
  background:#000;
}

/* ---------- Sage backdrop (full-bleed, behind everything) ---------- */
.sage-stage{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--wood-dark);
}
.sage-backdrop-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
}
.sage-stage-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(8,4,2,.45) 0%,rgba(8,4,2,.05) 22%,rgba(8,4,2,.1) 46%,rgba(6,3,2,.72) 68%,rgba(5,2,1,.95) 100%);
}

/* ---------- dock header (title + toggles, now inside the panel) ---------- */
.dock-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:6px;
}
.hud-float-title{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex:0 0 auto;
}
.hud-float-title .eyebrow{
  color:var(--gold-bright);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
}
.hud-title-sep{color:var(--muted)}
.hud-title-sub{
  color:var(--cream);
  font-size:12px;
  letter-spacing:.06em;
}

.toggles{display:flex;gap:8px}
.toggle-btn{
  border:1px solid var(--gold);
  background:rgba(10,5,2,.55);
  color:var(--cream);
  border-radius:50%;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.toggle-btn:hover{background:rgba(227,173,84,.28)}
.toggle-btn[aria-pressed="false"]{opacity:.45}

.volume-control{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--gold);
  background:rgba(10,5,2,.55);
  border-radius:17px;
  height:34px;
  padding:0 12px 0 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.volume-icon{font-size:14px;color:var(--cream);line-height:1}
.volume-control input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:70px;
  height:3px;
  border-radius:2px;
  background:rgba(227,173,84,.35);
  cursor:pointer;
}
.volume-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--gold);
  border:1px solid rgba(10,5,2,.6);
  cursor:pointer;
}
.volume-control input[type="range"]::-moz-range-thumb{
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--gold);
  border:1px solid rgba(10,5,2,.6);
  cursor:pointer;
}

/* ---------- stats row, now inside the dock (real contrast, not over her face) ---------- */
.dock-stats{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  padding-bottom:8px;
  margin-bottom:2px;
  border-bottom:1px solid rgba(201,163,92,.3);
}
.stat{display:flex;flex-direction:column;gap:1px;min-width:0}
.stat-label{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  white-space:nowrap;
}
.stat-value{
  font-size:16px;
  font-weight:700;
  color:var(--gold-bright);
}
.stat-value-money{font-size:22px}
.goal-stat{flex:1 1 auto;min-width:90px;max-width:220px}
.goal-track{
  width:100%;
  height:6px;
  border-radius:99px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.22);
  overflow:hidden;
}
.goal-fill{
  height:100%;
  width:1%;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transition:width .5s ease;
}

/* ---------- home button (right side, clear of the left panel) ---------- */
.home-btn{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:15;
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(10,5,2,.6);
  border:1px solid var(--gold);
  color:var(--gold);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.home-btn:hover{color:var(--gold-bright);border-color:var(--gold-bright)}

/* ---------- ad rail (right side, clear of the left panel) ---------- */
.right-rail{
  position:fixed;
  top:16px;
  right:16px;
  bottom:16px;
  z-index:3;
  width:300px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y:auto;
}
@media (max-width:1300px){
  .right-rail{display:none}
}
.info-panel{
  background:linear-gradient(180deg,rgba(14,20,16,.82),rgba(7,11,9,.92) 40%);
  border:1px solid rgba(201,163,92,.4);
  border-radius:14px;
  padding:16px 18px;
  color:var(--cream);
  flex-shrink:0;
}
.info-title{
  margin:0 0 8px;
  font-size:17px;
  color:var(--gold-bright);
  letter-spacing:.02em;
}
.info-desc{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.rules-list{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  font-size:12.5px;
  display:flex;
  flex-direction:column;
  gap:5px;
  border-top:1px solid rgba(201,163,92,.25);
  border-bottom:1px solid rgba(201,163,92,.25);
  padding:10px 0;
}
.rules-list li:before{content:"\2666  ";color:var(--gold)}
.info-subtitle{
  margin:0 0 10px;
  font-size:13px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tier-list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:12.5px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.tier-swatch{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
}
.tier-swatch-silver{background:#b9c2c9}
.tier-swatch-gold{background:#e3ad54}
.tier-swatch-platinum{background:#8fd3e8}
.tier-swatch-diamond{background:#7fe0d0}

.ad-rail{
  width:300px;
  min-height:250px;
  flex-shrink:0;
}

/* ---------- table dock: full-height LEFT panel, exposing Sage on the right ---------- */
.table-dock{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  z-index:2;
  width:min(520px,44vw);
  min-width:360px;
  max-width:calc(100% - 40px);
  height:100%;
  overflow-y:auto;
  background:linear-gradient(180deg,rgba(14,20,16,.82),rgba(7,11,9,.92) 40%);
  border-right:1px solid rgba(201,163,92,.4);
  padding:16px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:16px 0 44px rgba(0,0,0,.55);
}
.sage-backdrop-img{
  object-position:68% 15%;
}

.seat{display:flex;flex-direction:column;align-items:center;gap:5px}
.seat-label{
  display:flex;
  align-items:center;
  gap:10px;
}
.who{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gold);
  font-weight:700;
}
.dealer-who{
  color:var(--gold-bright);
  font-size:14px;
  padding:3px 10px;
  border:1px solid var(--gold);
  border-radius:999px;
  background:rgba(227,173,84,.12);
}
.seat-total{
  font-size:13px;
  color:var(--cream);
  background:rgba(0,0,0,.28);
  border-radius:8px;
  padding:2px 8px;
  min-width:20px;
  text-align:center;
}

.hand{
  display:flex;
  min-height:150px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.card{
  width:104px;
  height:148px;
  border-radius:11px;
  background:var(--cream);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:8px 10px;
  font-family:Georgia,serif;
  font-weight:700;
  margin-left:-30px;
  position:relative;
  animation:card-deal .28s ease both;
}
.card:first-child{margin-left:0}
@keyframes card-deal{
  from{transform:translateY(-18px) scale(.9);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.card.red{color:var(--red-suit)}
.card.black{color:var(--black-suit)}
.card-rank{font-size:24px;line-height:1}
.card-suit{font-size:24px;line-height:1;align-self:flex-end}
.card-suit.center{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:38px;
}
.card.facedown{
  background:
    repeating-linear-gradient(135deg,var(--wood-light) 0 6px,var(--wood) 6px 12px);
  border:2px solid var(--gold);
}
.room.back-1 .card.facedown{
  background:repeating-linear-gradient(45deg,#1b2a4a 0 6px,#0f1830 6px 12px);
  border:2px solid #6f8fc9;
}
.room.back-2 .card.facedown{
  background:repeating-radial-gradient(circle at 50% 50%,#5c1420 0 8px,#340b12 8px 16px);
  border:2px solid #d98a94;
}
.room.back-3 .card.facedown{
  background:repeating-linear-gradient(90deg,#123524 0 6px,#0a2116 6px 12px);
  border:2px solid #7fe0d0;
}
.room.back-4 .card.facedown{
  background:
    repeating-linear-gradient(60deg,#3a2f14 0 6px,#231b0a 6px 12px),
    repeating-linear-gradient(-60deg,rgba(227,173,84,.25) 0 3px,transparent 3px 6px);
  border:2px solid var(--gold-bright);
}

.player-seats{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  min-height:150px;
  flex-shrink:0;
}
.player-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.player-hand-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px;
  border-radius:12px;
}
.player-hand-block.active{
  background:rgba(255,215,106,.1);
  box-shadow:0 0 0 2px var(--gold-bright) inset;
}
.player-hand-block.busted .hand{filter:grayscale(.5) brightness(.7)}
.hand-bet{
  font-size:12px;
  color:var(--gold-bright);
  background:rgba(0,0,0,.3);
  padding:2px 10px;
  border-radius:99px;
}
.hand-outcome{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  min-height:16px;
}
.hand-outcome.win{color:#7ee0a0}
.hand-outcome.lose{color:#e08a8a}
.hand-outcome.push{color:var(--muted)}

.table-speech{
  text-align:center;
  margin:0;
  font-size:14px;
  color:var(--muted);
  min-height:18px;
}

.shuffle-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--gold);
  background:rgba(0,0,0,.4);
  color:var(--gold-bright);
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  animation:shuffle-pulse 1.1s ease-in-out infinite;
}
@keyframes shuffle-pulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.03)}
}

/* ---------- controls ---------- */
.controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding-top:6px;
}

.bet-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.bet-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
.bet-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.chip-btn{
  border:1px solid var(--gold);
  background:linear-gradient(180deg,var(--wood-light),var(--wood));
  color:var(--cream);
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.chip-btn:active{transform:translateY(1px)}
.clear-btn{border-color:var(--muted);color:var(--muted)}

.tier-badge{
  --tier-color: #b9c2c9;
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:var(--tier-color);
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tier-color) 55%, white), color-mix(in srgb, var(--tier-color) 70%, black) 75%);
  border:2px solid var(--tier-color);
  box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.25);
  overflow:hidden;
}
.tier-letter{
  font-size:15px;
  font-weight:700;
  color:#1a1310;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.tier-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
#betInput{
  width:100px;
  text-align:center;
  font-size:18px;
  font-weight:700;
  padding:8px 6px;
  border-radius:10px;
  border:1px solid var(--gold);
  background:rgba(0,0,0,.35);
  color:var(--gold-bright);
  font-family:Georgia,serif;
}
.deal-btn{
  border:1px solid var(--gold-bright);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--ink);
  font-weight:800;
  font-size:16px;
  letter-spacing:.03em;
  border-radius:999px;
  padding:12px 34px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.deal-btn:active{transform:translateY(1px)}
.deal-btn:disabled{opacity:.45;cursor:not-allowed}

.deal-btn-permanent{
  align-self:center;
  margin-top:6px;
}
.deal-btn-permanent:not(:disabled){
  animation:deal-glow 1.6s ease-in-out infinite;
}
@keyframes deal-glow{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 rgba(255,215,106,0)}
  50%{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 18px rgba(255,215,106,.6)}
}

.action-controls,.insurance-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.insurance-controls{flex-direction:column;text-align:center}
.insurance-controls p{margin:0 0 4px;font-size:14px;color:var(--cream)}
.action-btn{
  border:1px solid var(--gold);
  background:rgba(0,0,0,.35);
  color:var(--cream);
  border-radius:12px;
  padding:12px 18px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  min-width:96px;
}
.action-btn:hover{background:rgba(227,173,84,.18)}
.action-btn:active{transform:translateY(1px)}
.action-btn:disabled{opacity:.35;cursor:not-allowed}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(6,3,1,.82);
}
.overlay-card{
  max-width:420px;
  text-align:center;
  background:linear-gradient(180deg,var(--wood-light),var(--wood-dark));
  border:1px solid var(--gold);
  border-radius:18px;
  padding:28px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.overlay-card h2{
  margin:0 0 10px;
  color:var(--gold-bright);
  font-size:26px;
}
.overlay-card p{
  margin:0 0 18px;
  color:var(--cream);
  font-size:14px;
  line-height:1.5;
}

/* ---------- session stats ---------- */
.session-stats{
  align-self:center;
  color:var(--muted);
  font-size:12px;
}
.session-stats summary{
  cursor:pointer;
  color:var(--gold);
  text-align:center;
  list-style:none;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
}
.session-stats summary::-webkit-details-marker{display:none}
.session-stats summary:before{content:"+ "}
.session-stats[open] summary:before{content:"\2212 "}
.stats-grid{
  display:flex;
  justify-content:center;
  gap:22px;
  margin-top:8px;
  flex-wrap:wrap;
}
.stat-cell{display:flex;flex-direction:column;align-items:center;gap:2px}
.stat-cell-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.stat-cell-value{font-size:15px;font-weight:700;color:var(--gold-bright)}

/* ---------- Sage's mood ---------- */
.sage-mood{font-size:13px;margin-left:2px}

/* ---------- streak flair ---------- */
.streak-flair{
  text-align:center;
  margin:-4px 0 0;
  font-size:12px;
  font-weight:700;
  color:var(--gold-bright);
  text-shadow:0 0 10px rgba(255,215,106,.5);
}

/* ---------- milestone toast ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:100px;
  transform:translateX(-50%) translateY(10px);
  background:linear-gradient(180deg,var(--wood-light),var(--wood-dark));
  border:1px solid var(--gold);
  border-radius:14px;
  padding:12px 22px;
  font-weight:700;
  color:var(--gold-bright);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
  z-index:30;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ---------- portrait phones: stack Sage as a top banner, HUD as a normal
   full-width panel below it, instead of the landscape side-dock layout ---------- */
@media (orientation:portrait){
  .room{height:auto;min-height:100dvh;overflow-y:auto;overflow-x:hidden}
  .sage-stage{position:relative;height:200px;inset:auto}
  .table-dock{
    position:relative;
    width:100%;
    min-width:0;
    max-width:100%;
    height:auto;
    overflow-y:visible;
    border-right:none;
    box-shadow:none;
  }
  .right-rail{display:none}
}

/* ---------- narrower landscape widths (phones): same layout, scaled down ---------- */
@media (max-width:1099px){
  .table-dock{width:min(440px,52vw);min-width:300px;padding:10px 12px 14px;gap:5px}
  .dock-header{padding-bottom:4px}
  .hud-float-title .eyebrow{font-size:10px}
  .hud-title-sub{font-size:10px}
  .dock-stats{gap:10px}
  .goal-stat .stat-label{font-size:0}
  .goal-stat .stat-label:after{content:"Goal";font-size:7.5px}
  .stat-value{font-size:14px}
  .stat-value-money{font-size:19px}
  .stat-label{font-size:7.5px}
  .toggle-btn{width:28px;height:28px;font-size:13px}
  .volume-control{height:28px;padding:0 8px 0 7px}
  .volume-control input[type="range"]{width:46px}
  .session-stats{font-size:11px}
  .stats-grid{gap:14px}
  .stat-cell-value{font-size:13px}
  .card{width:64px;height:91px;padding:5px 6px;margin-left:-18px;border-radius:9px}
  .card-rank{font-size:14px}
  .card-suit{font-size:14px}
  .card-suit.center{font-size:23px}
  .hand{min-height:95px}
  .player-seats{min-height:95px}
  .action-btn{padding:8px 10px;min-width:64px;font-size:12px}
  .deal-btn{padding:9px 20px;font-size:13px}
  .who,.dealer-who{font-size:11px}
}

/* ---------- short landscape heights (smaller phones): compact everything ---------- */
@media (max-height:500px){
  .dock-header{padding-bottom:2px}
  .dock-stats{padding-bottom:4px;margin-bottom:0}
  .table-dock{gap:3px;padding:8px 10px 10px}
  .hand{min-height:70px}
  .player-seats{min-height:70px}
  .card{width:48px;height:68px;padding:4px 5px;margin-left:-14px;border-radius:7px}
  .card-rank{font-size:11px}
  .card-suit{font-size:11px}
  .card-suit.center{font-size:18px}
  .seat-label{gap:6px}
  .who,.dealer-who{font-size:10px;padding:2px 7px}
  .table-speech{font-size:11px;min-height:12px}
  .controls{margin-top:6px;gap:5px;padding-top:2px}
  .bet-row{gap:5px}
  .chip-btn{padding:5px 9px;font-size:11px}
  #betInput{width:60px;font-size:14px;padding:5px 4px}
  .action-btn{padding:6px 8px;min-width:52px;font-size:10.5px}
  .deal-btn{padding:7px 16px;font-size:11px}
  .tier-badge{width:26px;height:26px}
  .goal-track{height:4px}
  .hand-bet{font-size:10px;padding:1px 8px}
  .hand-outcome{font-size:10px;min-height:12px}
  .player-hand-block{padding:4px;gap:3px}
  .player-row{gap:8px}
  .dock-stats{gap:8px}
}