/* The viewport belongs to the hand, not the progress dashboard.
   Keep all betting controls in flow, with no overlay over cards. */
body[data-screen=table] .heading,
body[data-screen=table] .practice-bar{display:none}
body[data-screen=table] .header{height:60px;min-height:60px}
body[data-screen=table] main{padding-inline:16px;max-width:1320px}
body[data-screen=table] .event-strip{height:48px;min-height:48px;margin:0 0 6px}
body[data-screen=table] .game{
 display:flex;flex-direction:column;height:calc(100dvh - 122px);
 min-height:470px;max-height:940px;overflow:visible;
}
body[data-screen=table] .game-toolbar{height:44px;min-height:44px;flex-shrink:0}
body[data-screen=table] .position-strip{height:32px;min-height:32px;flex-shrink:0}
#play-balance{margin-left:auto;white-space:nowrap;font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
#play-balance[data-empty=true]{color:#a52c32;background:#fff0df;border-radius:3px;padding:3px 6px}
@media(max-width:600px){
 .position-strip{gap:4px;padding-inline:8px}
 .position-strip #speed-toggle{display:none}
 .position-strip #position-info{min-width:0;font-size:12px;white-space:nowrap}
 body[data-screen=table] .hand-complete .finish-buttons button{min-height:44px}
}
@media(max-width:350px){.header .brand>span{font-size:16px}}
body[data-screen=table] .stage{
 flex:1 1 0;height:auto;min-height:218px;
}
body[data-screen=table] .action-panel{
 flex:0 0 auto;min-height:132px;padding:8px 12px;gap:4px;
 position:relative;bottom:auto;box-shadow:none;
}
body[data-screen=table] .action-panel[data-turn=you]{box-shadow:inset 0 3px 0 var(--america-red)}
body[data-screen=table] .game-foot{flex-shrink:0;min-height:44px;padding-inline:12px;gap:8px}
body[data-screen=table] .game-foot button{min-height:44px}
body[data-screen=table] .presets button{min-height:44px;min-width:44px}
body[data-screen=table] .raise-options input{min-height:44px}
body[data-screen=table] .hand-story{flex-shrink:0}
/* The recap can be read below the completed hand, without shrinking the cards. */
body[data-screen=table] .game:has(.hand-story:not([hidden])){height:auto;min-height:0}
body[data-screen=table] .game:has(.hand-story:not([hidden])) .stage{
 flex:none;height:clamp(300px,calc(100dvh - 350px),510px)
}
body[data-screen=table] .board-area{top:25%}
body[data-screen=table] .stage[data-phase=playing] .street{display:none}
@media(min-width:601px) and (min-height:651px){
 body[data-screen=table] .game:has(.hand-story:not([hidden])) .stage{min-height:370px}
}
body[data-screen=table] .stage[data-phase=ready] .board-area{top:46%}
body[data-screen=table] .seat-0{top:81%}
body[data-screen=table] .seat-0 .seat-action{display:none}
.tour-progress{font-size:12px;letter-spacing:1px;color:var(--muted);margin-bottom:12px}
.tour-visual{display:flex;justify-content:center;gap:8px;align-items:center;min-height:104px;margin:16px 0}
.tour-visual .card{width:55px;height:78px;font-size:24px}
.tour-visual .tour-shared{opacity:.65}
.tour-seat-label{text-align:center;font-size:13px;color:var(--muted)}
.tour-dealer{border:3px double #917a43;background:#f8e9b4;color:#25324a;border-radius:50%;width:62px;height:62px;display:grid;place-content:center;text-align:center;font-size:22px;font-weight:700}
.tour-dealer small{font-size:12px}
.tour-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.tour-buttons .primary{grid-column:1/-1}
.tour-buttons button{min-height:48px}
.tour-choice{padding:12px;border:1px solid var(--line);border-radius:6px;margin-block:8px;font-size:14px}
.tour-choice strong{display:block;margin-bottom:4px}
.first-play-tour{margin-top:6px;min-height:44px;color:#f7f1e6;text-decoration:underline;text-underline-offset:3px;font-size:14px}
@media(max-width:1099px){
 body[data-screen=table] main{padding-inline:8px}
}
@media(min-width:601px) and (max-height:700px){
 body[data-screen=table] .stage[data-phase=playing] .seat:not(.seat-0) .hole{display:none}
 body[data-screen=table] .stage[data-phase=playing] .board-area{top:20%}
 body[data-screen=table] .community .card{width:40px;height:55px;font-size:20px;padding:4px}
 body[data-screen=table] .community .card .suit{font-size:21px}
 body[data-screen=table] .pot{margin-bottom:4px}
}
@media(max-width:600px){
 body[data-screen=table] .header{height:44px;min-height:44px}
 body[data-screen=table] .event-strip{height:44px;min-height:44px;margin-bottom:4px}
 body[data-screen=table] .event-summary span{display:none}
 body[data-screen=table] .game{height:calc(100dvh - 96px);min-height:470px}
 body[data-screen=table] .action-panel{padding:6px;min-height:132px}
 body[data-screen=table] .turn-copy{min-height:20px;margin-bottom:4px}
 body[data-screen=table] .actions button{min-height:44px}
 body[data-screen=table] .raise-options{gap:4px}
 body[data-screen=table] .game-foot{gap:4px;padding-inline:6px}
 body[data-screen=table] .game-foot>span:first-child{display:none}
 body[data-screen=table] .game-foot #hand-label{display:none}
 body[data-screen=table] .game-foot button{flex:1}
 body[data-screen=table] .game-foot button{font-size:12px}
 body[data-screen=table] .seat-0{top:79%}
 body[data-screen=table] .seat-0 .nameplate .name{display:flex;line-height:14px;font-size:12px}
 body[data-screen=table] .seat-0 .nameplate strong{line-height:16px}
 body[data-screen=table] .stage[data-phase=playing] .board-area{top:21%}
 body[data-screen=table] .board-area{top:27%}
 body[data-screen=table] .stage[data-phase=revealing] .board-area{top:21%}
 body[data-screen=table] .stage[data-phase=finished] .board-area{top:24%}
 body[data-screen=table] .game:has(.hand-story:not([hidden])) .action-panel{min-height:90px}
 body[data-screen=table] .stage[data-phase=revealing] .seat-0,
 body[data-screen=table] .stage[data-phase=finished] .seat-0{top:79%}
 .tour-visual{gap:5px}.tour-visual .card{width:43px;height:63px;font-size:21px}
}
/* Short landscape windows: table on the left, decisions on the right. */
@media(min-width:601px) and (max-height:650px){
 body[data-screen=table] .header{height:44px;min-height:44px}
 body[data-screen=table] .event-strip{height:44px;min-height:44px;margin-bottom:4px}
 body[data-screen=table] .event-summary span{display:none}
 body[data-screen=table] .game{
 display:grid;grid-template-columns:minmax(0,1fr) 280px;
 grid-template-rows:44px 32px minmax(132px,1fr) 44px;
 height:calc(100dvh - 96px);min-height:278px;max-height:none}
 body[data-screen=table] .game-toolbar,body[data-screen=table] .position-strip{grid-column:1/-1}
 body[data-screen=table] .stage{grid-column:1;grid-row:3/5;min-height:0;height:100%}
 body[data-screen=table] .action-panel{grid-column:2;grid-row:3;min-height:0;border-left:1px solid var(--line);padding:6px}
 body[data-screen=table] .game-foot{grid-column:2;grid-row:4;gap:4px;padding:0 6px;border-left:1px solid var(--line)}
 body[data-screen=table] .game-foot>span{display:none}
 body[data-screen=table] .game-foot button{font-size:12px;flex:1}
 body[data-screen=table] .action-top{display:block}
 body[data-screen=table] .turn-copy{display:flex;justify-content:space-between;margin:0 0 4px}
 body[data-screen=table] .turn-copy strong,body[data-screen=table] .turn-copy p{font-size:12px;margin:0}
 body[data-screen=table] .actions{display:grid;grid-template-columns:.8fr 1fr 1.2fr;gap:4px}
 body[data-screen=table] .actions button,body[data-screen=table] .actions button.primary{min-width:0;padding:4px 2px;font-size:12px;min-height:44px}
 body[data-screen=table] .actions button small{font-size:12px;display:block}
 body[data-screen=table] .raise-options{padding:0;gap:4px}
 body[data-screen=table] .raise-options label{display:none}
 body[data-screen=table] .presets{gap:2px}
 body[data-screen=table] .presets button{padding:3px;min-width:44px}
 body[data-screen=table] .raise-options input{width:40px;min-width:40px}
 body[data-screen=table] .felt{inset:25px 16px 25px;border-width:7px}
 body[data-screen=table] .seat{width:72px}
 body[data-screen=table] .seat-0{width:90px;top:75%}
 body[data-screen=table] .seat-1{top:66%;left:13%}
 body[data-screen=table] .seat-5{top:66%;left:87%}
 body[data-screen=table] .seat-2{top:20%;left:17%}
 body[data-screen=table] .seat-4{top:20%;left:83%}
 body[data-screen=table] .seat-3{top:8%}
 body[data-screen=table] .seat .hole{display:none}
 body[data-screen=table] .seat-0 .hole{display:flex;height:42px}
 body[data-screen=table] .seat-0 .card{width:30px;height:43px;font-size:16px;padding:3px}
 body[data-screen=table] .seat-0 .card .suit{font-size:17px}
 body[data-screen=table] .nameplate{padding:3px;min-height:34px}
 body[data-screen=table] .nameplate .name,body[data-screen=table] .nameplate strong{font-size:12px}
 body[data-screen=table] .seat-action{display:none}
 body[data-screen=table] .community{gap:3px}
 body[data-screen=table] .community .card{width:29px;height:41px;font-size:15px;padding:3px}
 body[data-screen=table] .community .card .suit{font-size:17px}
 body[data-screen=table] .pot{margin-bottom:4px;font-size:12px}
 body[data-screen=table] .pot strong{font-size:16px}
 body[data-screen=table] .board-area,
 body[data-screen=table] .stage[data-phase=playing] .board-area{top:20%}
 body[data-screen=table] .street{margin-top:3px;font-size:12px}
 body[data-screen=table] .stage[data-phase=ready] .welcome h2{font-size:22px}
 body[data-screen=table] .game:has(.hand-story:not([hidden])){display:flex}
 body[data-screen=table] .game:has(.hand-story:not([hidden])) .stage{height:300px}
 body[data-screen=table] .stage[data-phase=finished] .board-area{top:20%}
 body[data-screen=table] .stage[data-phase=finished] .result{font-size:12px;line-height:1.15;margin-top:4px}
 body[data-screen=table] .stage[data-phase=finished] .result strong{font-size:12px}
 body[data-screen=table] .game:has(.hand-story:not([hidden])) .action-panel{min-height:90px}
}
@media(min-width:601px) and (min-height:501px) and (max-height:650px){
 body[data-screen=table] .seat{width:90px}
 body[data-screen=table] .seat-0{width:110px}
 body[data-screen=table] .seat-0 .hole{height:60px}
 body[data-screen=table] .seat-0 .card{width:44px;height:63px;font-size:22px}
 body[data-screen=table] .community .card{width:40px;height:55px;font-size:20px}
 body[data-screen=table] .board-area,
 body[data-screen=table] .stage[data-phase=playing] .board-area{top:32%}
 body[data-screen=table] .pot strong{font-size:20px}
}
@media(min-width:601px) and (max-height:500px){
 body[data-screen=table] .game:has(.hand-story:not([hidden])){
  display:grid;height:auto;grid-template-rows:44px 32px max(132px,calc(100dvh - 218px)) 44px auto;
 }
 body[data-screen=table] .game:has(.hand-story:not([hidden])) .stage{height:100%}
 body[data-screen=table] .hand-story{grid-column:1/-1;grid-row:5}
 body[data-screen=table] .stage[data-phase=finished] .board-area,
 body[data-screen=table] .stage[data-phase=revealing] .board-area{top:10%}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-3{left:13%;top:45%}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-0{top:80%}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-2,
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-4{top:12%;left:13%}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-4{left:87%}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-1,
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-5{top:78%}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat:not(.seat-0):not(.folded) .hole{display:flex;height:24px}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .card.mini{width:20px;height:26px;font-size:12px;padding:2px}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .card.mini .suit{font-size:12px}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat:not(.seat-0) .dealer{right:-12px;top:0}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .street{display:none}
 body[data-screen=table] .hand-complete .idle-copy{display:block}
 body[data-screen=table] .hand-complete .idle-icon{display:none}
 body[data-screen=table] .hand-complete{gap:6px}
 body[data-screen=table] .hand-complete .finish-buttons{flex-direction:column-reverse;gap:4px}
 body[data-screen=table] .hand-complete .finish-buttons button{min-height:44px;padding:5px;font-size:12px}
}
@media(max-width:600px) and (max-height:600px){
 body[data-screen=table] .game:has(.hand-story:not([hidden])) .stage{height:270px}
}