:root{
  font-family:Inter,system-ui,sans-serif;
  color:#f4f6f5;
  background:#060808;
  --ui-scale:1;
  --base-font:18px;
}
*{box-sizing:border-box}
html{font-size:var(--base-font)}
body{margin:0;min-height:100vh;background:#060808;overflow-x:hidden}
button,input{font:inherit}
button{
  min-height:44px;padding:10px 14px;border-radius:10px;
  color:#fff;background:#173f32;border:1px solid #2e6a57;
  font-weight:800;cursor:pointer;
}
button:hover{filter:brightness(1.13)}
button:disabled{opacity:.34;cursor:not-allowed}
.secondaryButton{margin-top:14px;background:#14231f;border-color:#405a51}
input{
  min-height:44px;padding:9px 11px;border-radius:9px;
  background:#0e1514;color:#fff;border:1px solid #40504b;
}
.panel{
  max-width:620px;margin:10vh auto;padding:34px;text-align:center;
  background:#0c1111;border:1px solid #33413d;border-radius:18px;
}
.panel h1{font-size:3rem;margin:0}.panel input{width:100%;margin:14px 0}
#error{color:#ff8888}
.roomCodeJoin{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:12px}
.roomCodeJoin span{color:#789087;font-size:.75rem;font-weight:850;text-transform:uppercase}
.roomCodeJoin input{margin:0;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.roomCodeJoin button{white-space:nowrap}

#game{font-size:calc(1rem * var(--ui-scale))}
.gameHeader{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:10px 14px;
  background:#090d0d;border-bottom:1px solid #27332f;
}
.titleBlock{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.titleBlock>b{font-size:1.28rem}
#phase{color:#b8cec5}
.cameraControls,.viewControls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.controlLabel{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#89a49a;font-weight:900}
.viewControls button,.cameraControls button{min-height:38px;padding:7px 10px}
.volumeControl{
  display:flex;align-items:center;gap:7px;min-height:38px;
  background:#101616;border:1px solid #40504b;border-radius:9px;padding:5px 9px;font-weight:800;
}
.volumeControl input{width:120px;min-height:auto;padding:0}
#volumeLabel{min-width:40px;text-align:right}
#musicVolumeLabel{min-width:40px;text-align:right}

.chipBetBuilder{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.8fr);gap:12px;
  padding:10px 12px;background:#0b1110;border-top:1px solid #1f2c28;
}
.chipWallet{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.denominationChip{
  --chip-color:#eee;position:relative;min-width:68px;min-height:54px;padding:6px 8px 6px 42px;
  background:#111918;border-color:#384b44;text-align:left;
}
.denominationChip::before{
  content:attr(data-value);position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--chip-color);border:3px dashed rgba(255,255,255,.72);
  box-shadow:0 2px 8px rgba(0,0,0,.42);font-size:.66rem;font-weight:1000;
}
.denominationChip[data-value="1"]::before{color:#1b2020}
.denominationChip[data-value="1000"]::before{color:#1b2020}
.denominationChip small{display:block;color:#9fb4ac;font-weight:750;font-size:.62rem}
.betBreakdownBox{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 10px;border-radius:10px;background:#070b0a}
#betBreakdown{color:#f2d886;font-size:.82rem;line-height:1.35}
#clearBetChipsBtn{min-height:32px;padding:4px 9px;font-size:.72rem}

#graphicsDialog{
  border:1px solid #587367;border-radius:20px;background:#09100e;color:#fff;
  width:min(94vw,620px);padding:0;box-shadow:0 24px 80px rgba(0,0,0,.68);
}
#graphicsDialog::backdrop{background:rgba(0,0,0,.76)}
.graphicsCard{display:flex;flex-direction:column;gap:18px;padding:22px}
.graphicsHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.graphicsHeading h2{margin:2px 0 0;font-size:1.65rem}
.settingsEyebrow{color:#88b7a5;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:900}
#graphicsCloseBtn{min-height:36px;padding:5px 10px;background:#1b2824}
.graphicsOptions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.graphicsOption{
  min-height:132px;padding:16px;text-align:left;background:#101a17;border-color:#3b5149;
  display:flex;flex-direction:column;gap:10px;justify-content:flex-start;
}
.graphicsOption strong{font-size:1.1rem;color:#fff}
.graphicsOption span{font-size:.78rem;line-height:1.45;color:#aac0b7;font-weight:650}
.graphicsOption.active{background:#164936;border-color:#6ee0b4;box-shadow:0 0 0 2px rgba(110,224,180,.16)}
.graphicsStatus{margin:0;color:#b9d4c9;font-size:.8rem;min-height:1.2em}

html[data-graphics="potato"] button:hover{filter:none}
html[data-graphics="potato"] #playerHud.yourTurn .miniCard,
html[data-graphics="potato"] #playerHud.timerUrgent .miniCard{animation:none;box-shadow:0 0 0 3px rgba(255,216,77,.34)}
html[data-graphics="potato"] #tableStage{background:#070b0a}

#tableStage{
  position:relative;height:min(72vh,850px);min-height:560px;
  overflow:hidden;background:radial-gradient(circle at 50% 30%,#151e1b,#060808 72%);
}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.lastHandBanner{
  position:absolute;left:12px;top:12px;z-index:7;pointer-events:none;
  display:flex;align-items:center;gap:8px;max-width:min(560px,72%);
  padding:7px 11px;border:1px solid #b89432;border-radius:10px;
  background:rgba(14,18,13,.94);box-shadow:0 7px 22px rgba(0,0,0,.42);
}
.lastHandBanner[hidden]{display:none}
.lastHandBanner span{color:#d8b84f;font-size:.58rem;font-weight:950;letter-spacing:.1em;white-space:nowrap}
.lastHandBanner b{color:#fff2bd;font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hudTop{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);
  display:flex;gap:10px;z-index:4;pointer-events:none;
}
#potHud,#turnHud{
  background:#07100de7;border:1px solid #47655b;border-radius:999px;
  padding:8px 14px;font-weight:900;text-shadow:0 1px 2px #000;
}
#turnHud{color:#ffe17a}

#playerHud{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  z-index:5;text-align:center;pointer-events:none;
}
.heroLabel{
  display:inline-block;margin-bottom:5px;padding:3px 9px;border-radius:999px;
  background:#07100ddc;border:1px solid #47655b;font-size:.7rem;font-weight:900;letter-spacing:.08em;
}
#heroCards{display:flex;justify-content:center;gap:8px}
.miniCard{
  width:92px;height:128px;border-radius:9px;background:#fff;color:#111;overflow:hidden;
  border:3px solid #ddd;display:block;font-weight:1000;font-size:2rem;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}
.miniCard img{width:100%;height:100%;display:block;object-fit:fill;user-select:none}
.miniCard.red{color:#c62424}
.miniCard.back{color:transparent}
#playerHud.yourTurn .miniCard{
  border-color:#ffd84d;
  box-shadow:0 0 0 4px rgba(255,216,77,.22),0 0 34px rgba(255,216,77,.76),0 9px 24px rgba(0,0,0,.55);
  animation:heroPulse 1s ease-in-out infinite alternate;
}
#playerHud.timerUrgent .miniCard{
  border-color:#ff6262;
  box-shadow:0 0 0 4px rgba(255,75,75,.22),0 0 38px rgba(255,75,75,.8),0 9px 24px rgba(0,0,0,.55);
  animation:urgentPulse .45s ease-in-out infinite alternate;
}
@keyframes heroPulse{to{transform:translateY(-4px) scale(1.03)}}
@keyframes urgentPulse{to{transform:scale(1.055)}}
.heroTurnTimer{
  width:min(310px,70vw);margin:7px auto 0;background:#08100fe8;
  border:2px solid #d9b95b;border-radius:11px;padding:6px 8px 8px;
}
.heroTimerText{display:flex;justify-content:space-between;font-weight:1000;color:#ffe47c;margin-bottom:4px}
.heroTimerTrack{height:11px;border-radius:999px;background:#242c2a;overflow:hidden}
.heroTimerFill{height:100%;background:linear-gradient(90deg,#4cbf91,#d9b95b,#e25f5f)}
.orbitHint{
  position:absolute;right:10px;bottom:8px;z-index:3;pointer-events:none;
  background:#050909b9;padding:5px 8px;border-radius:7px;color:#91a79f;font-size:.7rem
}

#betPanel{
  background:#080c0c;border-top:1px solid #27332f;padding:9px 12px 11px;
}
.betSummary{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin-bottom:7px;color:#b8cec5;font-size:.9rem;
}
.betSummary b{color:#fff}
.playerChipCountSection{
  margin:0 0 7px;
  padding:7px 8px;
  border:1px solid #25352f;
  border-radius:10px;
  background:#070b0a;
}
.playerChipCounts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  margin-top:4px;
}
.playerChipCount{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:0 5px;
  min-width:0;
  padding:4px 6px;
  border-radius:7px;
  background:#101815;
  border:1px solid #2d4139;
  line-height:1.05;
}
.playerChipCount.me{border-color:#d5b950;background:#16211c}
.playerChipCount.out{opacity:.48}
.playerChipCount span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;color:#b9cdc5;font-weight:850}
.playerChipCount b{color:#ffe18a;font-size:.72rem}
.playerChipCount small{grid-column:1 / -1;color:#789087;font-size:.52rem;font-weight:750}
.blindBadge{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  margin-left:4px;
  padding:1px 5px;
  border-radius:999px;
  background:#6f5320;
  color:#ffe7a1;
  border:1px solid #caa85f;
  font-style:normal;
  font-size:.54rem;
  line-height:1.2;
}
#controls{
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
}
#controls button{min-width:105px;font-size:1rem}
.raiseBox{display:flex;gap:7px;align-items:center}
#raiseAmount{width:120px;font-weight:900}
#raiseSlider{width:190px;min-height:auto;padding:0}
#status{text-align:center;color:#aac0b7;min-height:28px;padding-top:6px;font-weight:700}

.inviteBar{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:9px;align-items:center;
  padding:10px 14px;background:#090d0d;border-top:1px solid #27332f;
}
.inviteLabel{font-weight:900}.inviteBar input{width:100%;font-size:.86rem}
#inviteDialog{
  width:min(92vw,520px);padding:0;border:1px solid #4f7164;border-radius:12px;
  background:#09110f;color:#fff;box-shadow:0 24px 90px rgba(0,0,0,.82);
}
#inviteDialog::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(3px)}
.inviteCard{display:grid;gap:11px;padding:20px}
.inviteCard h2,.inviteCard p{margin:0}.inviteCard h2{color:#f4dd94}
.inviteCard>p{color:#a9bdb5;font-size:.78rem;line-height:1.4}
.inviteDialogHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.inviteDialogHeading button{min-height:36px;padding:5px 9px;background:#17231f}
.inviteCard label{display:grid;gap:5px;color:#d6e3de;font-size:.75rem;font-weight:850}
.inviteCard label span{color:#71877f;font-size:.64rem;font-weight:700}
.inviteCard input{width:100%}
#emailInviteBtn,#textInviteBtn{min-height:48px;background:#174c3a;border-color:#4da783}
.inviteQuickActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:3px}
.inviteQuickActions button{min-height:44px;background:#14231f}
#inviteDialogStatus{min-height:1.25em;color:#efcf6d!important;font-weight:800}
#mobileGameTabs{display:none}

@media(max-width:900px){
  #tableStage{height:62vh;min-height:480px}
  .gameHeader{align-items:stretch}
  .cameraControls,.viewControls{width:100%}
  .raiseBox{width:100%;justify-content:center}
  #raiseSlider{width:min(48vw,260px)}
}
@media(max-width:560px){
  :root{--base-font:16px}
  .panel{margin:4vh 12px;padding:24px 18px}
  .panel h1{font-size:2.35rem}
  .roomCodeJoin{grid-template-columns:1fr}
  .roomCodeJoin span{display:none}
  #tableStage{min-height:440px}
  .miniCard{width:74px;height:104px;font-size:1.6rem}
  .inviteBar{grid-template-columns:1fr}.inviteBar button{width:100%}
  #inviteDialog{width:calc(100vw - 18px);max-height:calc(100dvh - 18px)}
  .inviteCard{padding:16px 13px;gap:9px}
  .inviteQuickActions{grid-template-columns:1fr}
}
@media(max-width:900px) and (max-height:500px){
  .panel{max-width:680px;margin:10px auto;padding:14px 22px}
  .panel h1{font-size:2rem}
  .panel p{margin:6px 0}
  .panel input{margin:7px 0}
  .secondaryButton,.roomCodeJoin{margin-top:7px}
}
@media(prefers-reduced-motion:reduce){
  #playerHud.yourTurn .miniCard,#playerHud.timerUrgent .miniCard{animation:none}
}


/* 2D community-card HUD */
#boardHud{
  position:absolute;
  left:50%;
  top:60px;
  transform:translateX(-50%);
  z-index:5;
  text-align:center;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#boardHud.hidden{
  opacity:0;
  transform:translateX(-50%) translateY(-8px);
}
.boardHudLabel{
  display:inline-block;
  margin-bottom:5px;
  padding:3px 9px;
  border-radius:999px;
  background:#06100de3;
  border:1px solid #47655b;
  color:#b9d1c7;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
}
#boardHudCards{
  display:flex;
  gap:6px;
  justify-content:center;
}
#boardHudCards .miniCard{
  width:58px;
  height:82px;
  font-size:1.2rem;
  border-width:2px;
  box-shadow:0 5px 14px rgba(0,0,0,.5);
}

@media(max-width:700px){
  #boardHud{top:106px}
  #boardHudCards .miniCard{width:46px;height:65px;font-size:1rem}
}


/* Bottom information dock */
#playerHud{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index:6;
  text-align:center;
  pointer-events:none;
  width:min(760px,94vw);
}
#bottomInfoDock{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
#hudBottom{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
#hudBottom #potHud,
#hudBottom #turnHud{
  background:#07100de8;
  border:1px solid #47655b;
  border-radius:999px;
  padding:6px 11px;
  font-size:.82rem;
  font-weight:900;
  text-shadow:0 1px 2px #000;
}
#hudBottom #turnHud{color:#ffe17a}

/* 2D board now lives beside the local player's cards at the bottom. */
#boardHud{
  position:static;
  transform:none;
  z-index:auto;
  text-align:center;
  pointer-events:none;
  transition:opacity .18s ease;
}
#boardHud.hidden{opacity:0}
#boardHudCards{
  display:flex;
  justify-content:center;
  gap:5px;
}
#boardHudCards .miniCard{
  width:50px;
  height:70px;
  font-size:1.05rem;
  border-width:2px;
  box-shadow:0 4px 10px rgba(0,0,0,.46);
}
.boardHudLabel{
  margin-bottom:3px;
  font-size:.6rem;
}
#winnerHud{
  margin-top:5px;
  padding:5px 8px 6px;
  border:1px solid #b89432;
  border-radius:8px;
  background:rgba(7,16,13,.94);
  box-shadow:0 6px 18px rgba(0,0,0,.42);
}
#winnerHud[hidden]{display:none}
.winnerHudLabel{
  margin-bottom:4px;
  color:#ffe17a;
  font-size:.61rem;
  font-weight:950;
  letter-spacing:.08em;
}
#winnerHudHands{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.winnerHand2d{display:flex;align-items:center;gap:6px}
.winnerHandMeta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.12}
.winnerHandMeta strong{color:#fff2bd;font-size:.68rem}
.winnerHandMeta span{color:#c9d8d1;font-size:.58rem}
.winnerHandCards{display:flex;gap:4px}
.winnerHandCards .miniCard{width:46px;height:64px;border-width:2px;box-shadow:0 0 0 2px rgba(255,216,77,.2),0 4px 10px rgba(0,0,0,.46)}

/* Table chat, requests, and rebuy */
#socialPanel{
  background:#080c0c;
  border-top:1px solid #27332f;
  padding:10px 12px;
}
#tableManagement{
  display:grid;gap:8px;margin:-10px -12px 10px;padding:9px 12px;
  background:#0d1714;border-bottom:1px solid #31463e;
}
.tableSessionSummary{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tableSessionSummary>div{display:flex;align-items:baseline;gap:8px;min-width:0}
.tableSessionSummary strong{color:#f2d886;font-size:.76rem;overflow-wrap:anywhere}
.tableManagementActions{display:flex;align-items:end;gap:7px;flex-wrap:wrap}
.tableManagementActions label{display:grid;gap:3px;color:#9fb5ac;font-size:.64rem;font-weight:850;text-transform:uppercase}
.tableManagementActions select,.bountyPickerCard select{
  min-height:36px;padding:5px 9px;border-radius:7px;background:#0b1210;color:#fff;border:1px solid #40564e;font-weight:850;
}
.tableManagementActions button{min-height:36px;padding:5px 10px;font-size:.72rem}
#leaveTableBtn{background:#3a2020;border-color:#754242}
#bountyPicker{
  width:min(92vw,520px);padding:0;border:1px solid #d1aa3d;border-radius:12px;
  background:#09110f;color:#fff;box-shadow:0 24px 90px rgba(0,0,0,.82),0 0 0 2px rgba(209,170,61,.15);
}
#bountyPicker::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(3px)}
.bountyPickerCard{display:grid;gap:13px;padding:22px}
.bountyPickerCard h2{margin:0;color:#ffe18a;font-size:1.45rem}
#bountyPickerPrompt,.bountyRule,#bountyPickerFeedback{margin:0;line-height:1.4}
#bountyPickerPrompt{color:#e6eee9;font-weight:800}
.bountyRule{color:#9db2aa;font-size:.76rem}
.bountyRankFields{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px}
.bountyRankFields label{display:grid;gap:5px;color:#a9beb6;font-size:.72rem;font-weight:850;text-transform:uppercase}
.bountyRankFields select{width:100%;min-height:54px;font-size:1.15rem;text-align:center}
.bountyRankFields>span{padding-bottom:14px;color:#e7c767;font-size:1.35rem;font-weight:950}
#selectBountyBtn{min-height:52px;background:#725a16;border-color:#dbb74b;font-size:1rem}
#bountyPickerFeedback{min-height:1.4em;color:#f4d777;font-size:.78rem;font-weight:800}
#tableNotice{
  position:fixed;z-index:10000;left:50%;top:16px;transform:translateX(-50%);width:min(92vw,620px);
  padding:12px 16px;border:1px solid #59b892;border-radius:9px;background:#102b22;color:#eafff7;
  box-shadow:0 12px 40px rgba(0,0,0,.7);text-align:center;font-weight:850;
}
#tableNotice[hidden]{display:none}
#tableNotice[data-kind="error"]{background:#3a1616;border-color:#d46a6a;color:#ffdede}
.socialTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  color:#b8cec5;
  font-size:.86rem;
}
.socialHint{color:#6f8980;margin-left:8px}
.socialActions{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}
#requestAmount{width:110px}
#tableChat{
  max-height:130px;
  overflow:auto;
  margin:8px auto;
  padding:7px 9px;
  border:1px solid #27332f;
  border-radius:10px;
  background:#060909;
  text-align:left;
  font-size:.82rem;
}
.chatLine{padding:3px 1px;color:#d2dfda}
.chatLine.system{color:#e6ca73}
.chatLine.request{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  color:#d9e8e2;
}
.chatLine button{min-height:32px;padding:4px 8px;font-size:.76rem}
.chatComposer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
}
.chatComposer input{width:100%}

#rebuyDialog{
  border:1px solid #4a6259;
  border-radius:16px;
  background:#0a1010;
  color:#fff;
  max-width:460px;
  width:min(92vw,460px);
}
#chipTradeDialog,#leaderboardDialog{
  border:1px solid #4a6259;border-radius:16px;background:#0a1010;color:#fff;
  width:min(94vw,620px);max-width:620px;
}
#chipTradeDialog::backdrop,#leaderboardDialog::backdrop{background:rgba(0,0,0,.74)}
.tradeCard,.leaderboardCard{display:flex;flex-direction:column;gap:14px}
.tradeCard h2,.leaderboardCard h2{margin:0}
.tradeGrid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.tradeGrid label{display:flex;flex-direction:column;gap:6px;color:#abc1b8;font-size:.78rem;font-weight:850}
.tradeGrid label span{display:grid;grid-template-columns:80px 1fr;gap:6px}
.tradeGrid input,.tradeGrid select{width:100%;min-width:0}
.tradeGrid select{min-height:44px;border-radius:9px;background:#0e1514;color:#fff;border:1px solid #40504b;padding:8px}
.tradeEquals{font-size:1.6rem;color:#e5c86d;padding-bottom:8px}
.tradeValueStatus{min-height:1.3em;margin:0;color:#e8cb71;font-weight:800}
.tradeValueStatus.invalid{color:#ff8989}
.dialogActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.leaderboardHeading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.leaderboardTable{display:grid;gap:5px}
.leaderboardRow{display:grid;grid-template-columns:42px minmax(0,1fr) 72px 72px 82px;gap:8px;align-items:center;padding:8px;border-radius:9px;background:#0f1816}
.leaderboardRow.header{color:#88a69b;background:transparent;text-transform:uppercase;font-size:.65rem;font-weight:900}
.leaderboardRank{color:#e6cb72;font-weight:950}
#rebuyDialog::backdrop{background:rgba(0,0,0,.72)}
.rebuyCard{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rebuyCard h2{margin:0}
.rebuyNote{font-size:.78rem;color:#9eb4ab}

/* 3D selection highlight helper */
.playerSelectedGlow{
  outline:none;
}

@media(max-width:700px){
  #playerHud{bottom:8px}
  #boardHudCards .miniCard{width:42px;height:59px;font-size:.9rem}
  .socialTop{align-items:stretch}
  .socialActions{width:100%}
  #requestAmount{flex:1;min-width:110px}
  .graphicsOptions{grid-template-columns:1fr}
  .chipBetBuilder{grid-template-columns:1fr}
  .tradeGrid{grid-template-columns:1fr}.tradeEquals{text-align:center;padding:0}
  .leaderboardRow{grid-template-columns:32px minmax(0,1fr) 54px 54px 62px;font-size:.72rem}
  .tableSessionSummary{display:grid;gap:4px}
  .tableManagementActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .tableManagementActions label{grid-column:1 / -1}
  .tableManagementActions select,.tableManagementActions button{width:100%}
  #bountyPicker{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}
  .bountyPickerCard{padding:18px 14px;gap:11px}
  .bountyPickerCard h2{font-size:1.3rem}
  .bountyRankFields select{min-height:58px;font-size:1.3rem}
  #selectBountyBtn{min-height:56px}
}


/* Wider table polish / legal-action guidance / action log */
#actionFeed{
  display:flex;
  gap:5px;
  justify-content:center;
  flex-wrap:wrap;
  min-height:22px;
  max-width:min(760px,92vw);
}
.actionFeedItem{
  display:inline-block;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(5,12,10,.88);
  border:1px solid #334941;
  color:#c8d9d2;
  font-size:.66rem;
  font-weight:850;
  white-space:nowrap;
}
#controls button[data-action]{
  transition:opacity .12s ease,filter .12s ease,transform .12s ease,border-color .12s ease;
}
#controls button[data-action].legalAction:not(:disabled){
  opacity:1;
  border-color:#4d9b7f;
}
#controls button[data-action]:disabled{
  opacity:.18;
  filter:grayscale(.85);
  cursor:not-allowed;
}
#controls input:disabled{
  opacity:.22;
  filter:grayscale(.9);
}
#controls button[data-action].legalAction:not(:disabled):hover{
  transform:translateY(-1px);
}

@media(min-width:1200px){
  #tableStage{height:min(74vh,900px)}
}

/* Screen-fit desktop layout: the table and every playing control stay inside
   one browser viewport. Narrow/mobile screens keep the stacked layout above. */
@media(min-width:900px) and (min-height:700px){
  body:has(#game:not([hidden])){height:100dvh;min-height:0;overflow:hidden}
  #game:not([hidden]){
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(360px,32vw,500px);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    width:100%;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .gameHeader{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:5px 10px;
    padding:5px 8px;
  }
  .titleBlock{grid-column:1;grid-row:1;white-space:nowrap}
  .cameraControls{grid-column:2;grid-row:1;justify-content:flex-end}
  .viewControls{grid-column:1 / -1;grid-row:2;justify-content:center}
  .cameraControls,.viewControls{gap:4px}
  .viewControls button,.cameraControls button{
    min-height:31px;
    padding:4px 7px;
    border-radius:7px;
    font-size:.69rem;
  }
  .volumeControl{min-height:31px;padding:3px 6px;font-size:.68rem}
  .volumeControl input{width:74px}
  #volumeLabel{min-width:32px}
  #musicVolumeLabel{min-width:32px}

  #tableStage{
    grid-column:1;
    grid-row:2 / 5;
    width:100%;
    height:auto;
    min-height:0;
  }
  #betPanel{
    grid-column:2;
    grid-row:2;
    min-height:0;
    overflow-y:auto;
    padding:6px 8px 7px;
    border-left:1px solid #27332f;
  }
  .betSummary{gap:10px;margin-bottom:4px;font-size:.76rem}
  .playerChipCountSection{margin-bottom:5px;padding:5px 6px}
  .playerChipCounts{gap:3px;margin-top:3px}
  .playerChipCount{padding:3px 4px}
  .chipBetBuilder{
    grid-template-columns:1fr;
    gap:5px;
    padding:6px;
    border-radius:9px;
  }
  .chipWallet{gap:4px;margin-top:3px}
  .denominationChip{
    flex:1 1 30%;
    min-width:92px;
    min-height:44px;
    padding:4px 5px 4px 38px;
  }
  .denominationChip::before{width:27px;height:27px;left:6px}
  .betBreakdownBox{gap:3px;padding:6px 8px}
  #controls{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin-top:6px;
  }
  #controls button{min-width:0;min-height:38px;padding:6px;font-size:.82rem}
  .raiseBox{grid-column:1 / -1;width:100%}
  #raiseAmount{width:110px;min-height:38px}
  #raiseSlider{width:auto;min-width:0;flex:1}
  #controls button[data-action="raise"]{grid-column:span 2}
  #status{min-height:23px;padding-top:3px;font-size:.74rem}

  #socialPanel{
    grid-column:2;
    grid-row:3;
    padding:6px 8px;
    border-left:1px solid #27332f;
  }
  .socialTop{display:block;font-size:.72rem}
  .socialHint{display:none}
  .socialActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:4px}
  .socialActions button,.socialActions input{min-height:34px;padding:4px 6px;font-size:.68rem}
  #requestAmount{width:100%}
  #tradeChipsBtn{grid-column:1 / -1}
  #tableChat{max-height:64px;margin:5px auto;padding:4px 6px;font-size:.7rem}
  .chatComposer{gap:4px}
  .chatComposer input,.chatComposer button{min-height:34px;padding:4px 7px;font-size:.72rem}

  .inviteBar{
    grid-column:2;
    grid-row:4;
    grid-template-columns:minmax(0,1fr) auto;
    padding:5px 8px;
    gap:5px;
    border-left:1px solid #27332f;
  }
  .inviteLabel{display:none}
  .inviteBar input,.inviteBar button{min-height:34px;padding:4px 7px;font-size:.68rem}

  #boardHudCards{gap:7px}
  #boardHudCards .miniCard{width:76px;height:106px}
  .boardHudLabel{font-size:.66rem}
}

@media(min-width:1500px) and (min-height:700px){
  .gameHeader{grid-template-columns:auto minmax(0,1fr) auto}
  .cameraControls{grid-column:2;grid-row:1}
  .viewControls{grid-column:3;grid-row:1}
}

@media(min-width:900px) and (max-height:800px){
  .lastHandBanner{top:6px;left:7px;padding:4px 7px;max-width:68%}
  .lastHandBanner b{font-size:.65rem}
  .playerChipCount small{display:none}
  .playerChipCountSection{margin-bottom:2px;padding:2px 4px}
  .playerChipCounts{margin-top:2px}
  .playerChipCount{padding:2px 4px}
  .chipBetBuilder{gap:2px;padding:3px 4px}
  .chipWallet{gap:3px;margin-top:2px}
  .denominationChip{
    flex:1 1 22%;
    min-width:74px;
    min-height:36px;
    padding:2px 3px 2px 31px;
  }
  .denominationChip::before{width:22px;height:22px;left:4px;border-width:2px;font-size:.5rem}
  .denominationChip small{font-size:.48rem}
  .betBreakdownBox{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:2px 6px;
    padding:3px 6px;
  }
  .betBreakdownBox .controlLabel{grid-column:1}
  #betBreakdown{grid-column:1;font-size:.68rem}
  #clearBetChipsBtn{grid-column:2;grid-row:1 / 3;align-self:center}
  #controls{margin-top:3px}
  #controls button{min-height:34px}
  #raiseAmount{min-height:34px}
  #boardHudCards .miniCard{width:62px;height:87px}
  .miniCard{width:78px;height:109px}
  #actionFeed{max-height:22px;overflow:hidden}
  #tableChat{max-height:44px}
}

@media(max-width:700px){
  .playerChipCounts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Phone layout keeps the table visible and moves secondary tools into tabs. */
@media(max-width:700px), (max-width:900px) and (max-height:500px){
  body:has(#game:not([hidden])){height:100dvh;min-height:0;overflow:hidden}
  #game:not([hidden]){
    display:flex;
    flex-direction:column;
    width:100%;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .gameHeader{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    max-height:118px;
    padding:4px 6px;
    overflow:hidden;
  }
  .titleBlock{grid-column:1;grid-row:auto;justify-content:center;font-size:.73rem}
  .titleBlock>b{font-size:1rem}
  .cameraControls,.viewControls{
    grid-column:1;
    grid-row:auto;
    width:100%;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:4px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .cameraControls::-webkit-scrollbar,.viewControls::-webkit-scrollbar{display:none}
  .cameraControls .controlLabel{display:none}
  .viewControls button,.cameraControls button{
    flex:0 0 auto;
    min-height:32px;
    padding:4px 8px;
    border-radius:6px;
    font-size:.67rem;
  }
  .volumeControl{flex:0 0 auto;min-height:32px;padding:3px 6px;font-size:.64rem}
  .volumeControl input{width:74px}

  #tableStage{
    flex:1 1 auto;
    width:100%;
    height:auto;
    min-height:220px;
  }
  .orbitHint{display:none}
  .lastHandBanner{left:5px;top:5px;max-width:92%;padding:4px 6px}
  .lastHandBanner span{font-size:.46rem}
  .lastHandBanner b{font-size:.56rem}

  #playerHud{bottom:3px;width:98vw}
  #bottomInfoDock{gap:2px}
  #boardHudCards{gap:3px}
  #boardHudCards .miniCard{width:34px;height:48px;border-radius:5px}
  .boardHudLabel,.heroLabel{margin-bottom:1px;padding:2px 6px;font-size:.5rem}
  #heroCards{gap:4px}
  #heroCards .miniCard{width:52px;height:73px;border-width:2px;border-radius:6px}
  #hudBottom{gap:4px}
  #potHud,#turnHud{padding:4px 7px;font-size:.61rem}
  #actionFeed{max-height:17px;overflow:hidden;flex-wrap:nowrap;justify-content:flex-start;max-width:96vw}
  .actionFeedItem{padding:2px 5px;font-size:.5rem}
  .heroTurnTimer{width:min(260px,84vw);margin-top:3px;padding:4px 6px 5px}
  .heroTimerText{font-size:.65rem;margin-bottom:2px}
  .heroTimerTrack{height:7px}
  #winnerHud{margin-top:2px;padding:3px 5px}
  .winnerHudLabel{margin-bottom:2px;font-size:.5rem}
  .winnerHandMeta strong{font-size:.56rem}
  .winnerHandMeta span{font-size:.48rem}
  .winnerHandCards .miniCard{width:32px;height:45px}

  #mobileGameTabs{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:3px;
    padding:4px 6px;
    background:#090d0d;
    border-top:1px solid #2a3a35;
    border-bottom:1px solid #2a3a35;
  }
  #mobileGameTabs button{
    min-height:42px;
    padding:6px;
    border-radius:6px;
    background:#111a17;
    border-color:#34483f;
    font-size:.78rem;
  }
  #mobileGameTabs button[aria-pressed="true"]{
    color:#fff1b5;
    background:#174936;
    border-color:#69caa4;
    box-shadow:inset 0 -2px #e0be54;
  }

  #betPanel,#socialPanel,.inviteBar{flex:0 0 auto}
  #game[data-mobile-panel="play"] #betPanel{
    display:block;
    max-height:34dvh;
    overflow-y:auto;
    padding:5px 7px calc(6px + env(safe-area-inset-bottom,0));
  }
  #game[data-mobile-panel="play"] .playerChipCountSection,
  #game[data-mobile-panel="play"] .chipBetBuilder{display:none}
  #game[data-mobile-panel="play"] .betSummary{margin-bottom:4px;font-size:.68rem}
  #game[data-mobile-panel="play"] #controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0}
  #game[data-mobile-panel="play"] #controls button{min-width:0;min-height:45px;padding:5px;font-size:.78rem}
  #game[data-mobile-panel="play"] .raiseBox{grid-column:1 / -1;width:100%}
  #game[data-mobile-panel="play"] #raiseAmount{width:92px;min-height:40px}
  #game[data-mobile-panel="play"] #raiseSlider{width:auto;flex:1}
  #game[data-mobile-panel="play"] #controls button[data-action="raise"]{grid-column:span 2}
  #game[data-mobile-panel="play"] #status{min-height:20px;padding-top:2px;font-size:.63rem}

  #game[data-mobile-panel="chips"] #betPanel{
    display:block;
    max-height:36dvh;
    overflow-y:auto;
    padding:5px 7px calc(6px + env(safe-area-inset-bottom,0));
  }
  #game[data-mobile-panel="chips"] .betSummary,
  #game[data-mobile-panel="chips"] #controls,
  #game[data-mobile-panel="chips"] #status{display:none}
  #game[data-mobile-panel="chips"] .playerChipCountSection{margin-bottom:4px;padding:4px}
  #game[data-mobile-panel="chips"] .playerChipCounts{grid-template-columns:repeat(3,minmax(0,1fr))}
  #game[data-mobile-panel="chips"] .playerChipCount{padding:3px}
  #game[data-mobile-panel="chips"] .playerChipCount small{display:none}
  #game[data-mobile-panel="chips"] .chipBetBuilder{display:grid;grid-template-columns:1fr;gap:4px;padding:4px}
  #game[data-mobile-panel="chips"] .denominationChip{flex:1 1 22%;min-width:66px;min-height:42px}

  #game:not([data-mobile-panel="table"]) #socialPanel,
  #game:not([data-mobile-panel="table"]) .inviteBar{display:none}
  #game[data-mobile-panel="table"] #betPanel{display:none}
  #game[data-mobile-panel="table"] #socialPanel{
    display:block;
    max-height:27dvh;
    overflow-y:auto;
    padding:5px 7px;
  }
  #game[data-mobile-panel="table"] .socialTop{font-size:.66rem}
  #game[data-mobile-panel="table"] .socialActions{grid-template-columns:repeat(2,minmax(0,1fr))}
  #game[data-mobile-panel="table"] #tableChat{max-height:58px}
  #game[data-mobile-panel="table"] .inviteBar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    padding:4px 7px calc(5px + env(safe-area-inset-bottom,0));
  }
  #game[data-mobile-panel="table"] .inviteLabel{display:block;grid-column:1 / -1;text-align:center;font-size:.66rem}
  #game[data-mobile-panel="table"] #inviteUrl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #game[data-mobile-panel="table"] .inviteBar button{min-height:42px;padding:5px;font-size:.72rem}
}

@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  .gameHeader{max-height:78px;grid-template-columns:auto minmax(0,1fr)}
  .titleBlock{grid-column:1;grid-row:1 / 3;align-self:center}
  .cameraControls,.viewControls{grid-column:2}
  #tableStage{min-height:150px}
  #game[data-mobile-panel="play"] #betPanel{max-height:38dvh}
  #heroCards .miniCard{width:45px;height:63px}
  #boardHudCards .miniCard{width:30px;height:42px}
}