/* Decorative room plates follow the existing cosmetic city selection.
   Cards and controls remain HTML; no game or account state is changed. */
.header .brand svg{display:block;width:40px;height:40px;flex:none}
.header .brand .brand-wordmark{font-family:var(--font-display);font-size:25px;line-height:1;letter-spacing:1px}
.header .brand .brand-wordmark small{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;line-height:1;letter-spacing:5px;margin-top:4px}
.brand-wordmark small::before,.brand-wordmark small::after{content:"";height:2px;width:18px;background:var(--america-red)}
@media(max-width:600px){
 .header .brand{gap:6px}
 .header .brand svg{width:32px;height:32px}
 .header .brand .brand-wordmark{font-size:20px;letter-spacing:.5px}
 .header .brand .brand-wordmark small{font-size:12px;letter-spacing:3px;margin-top:2px}
}
@media(max-width:350px){
 .header .brand svg{width:28px;height:28px}
 .header .brand .brand-wordmark{font-size:17px}
 .header .brand .brand-wordmark small{letter-spacing:2px}
}
body{--room-art:url("./assets/rooms/newyork.webp")}
body[data-room=chicago]{--room-art:url("./assets/rooms/chicago.webp")}
body[data-room=neworleans]{--room-art:url("./assets/rooms/neworleans.webp")}
body[data-room=austin]{--room-art:url("./assets/rooms/austin.webp")}
body[data-room=vegas]{--room-art:url("./assets/rooms/vegas.webp")}
body{--room-panorama:url("./assets/rooms/newyork-panorama.webp")}
body[data-room=chicago]{--room-panorama:url("./assets/rooms/chicago-panorama.webp")}
body[data-room=neworleans]{--room-panorama:url("./assets/rooms/neworleans-panorama.webp")}
body[data-room=austin]{--room-panorama:url("./assets/rooms/austin-panorama.webp")}
body[data-room=vegas]{--room-panorama:url("./assets/rooms/vegas-panorama.webp")}
body[data-screen=table] .stage{
 background-color:#111c2d;
 background-image:linear-gradient(180deg,#03081118,#03081128 40%,#03081170),var(--room-art);
 background-size:cover;
 background-position:center;
}
/* Frame the room separately from the playable felt. Cover on a portrait stage
   magnified the carpet and put the city's landmark behind the top opponent. */
body[data-screen=table] .stage{
 --scene-height:80px;
 background-image:linear-gradient(#111c2df2,#111c2de8),var(--room-art);
}
body[data-screen=table] .stage::before{
 content:"";position:absolute;inset:0 0 auto;height:var(--scene-height);
 background-image:linear-gradient(180deg,transparent 85%,#111c2d),var(--room-panorama);
 background-size:cover;background-position:center top;background-repeat:no-repeat;
 pointer-events:none;
}
.room-playfield{position:absolute;inset:var(--scene-height,80px) 0 0}
.room-playfield .felt-flag{opacity:.12}
@media(min-width:601px) and (min-height:501px){
 body[data-screen=table] .stage::before{
  background-size:100% 100%,auto 100%;background-position:center;background-color:#111c2d;
 }
}
.seat-action{text-shadow:0 1px 3px #000,0 0 8px #000}
.seat.folded{opacity:1}
.seat.folded .hole{opacity:.4}
.seat.folded .nameplate{
 opacity:1;background:#182435;color:#a7b3c5;border-color:#465164;
}
.seat.folded .seat-action{opacity:1;color:#bdc5d0}
.table-caption{color:#e3e9ef;text-shadow:0 1px 4px #000}
/* Keep the skyline in place when cards are revealed; do not jump the table. */
.stage:is([data-phase=finished],[data-phase=revealing]){--scene-height:56px}
body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .board-area{top:14%}
body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-3{top:0}
@media(max-width:600px){
 body[data-screen=table] .stage{--scene-height:80px}
 .stage[data-phase=playing] .community{margin-top:0}
 /* Blind badges already live beside names. Floating action captions collide
    with the pot on tall phones; the complete action list remains in History. */
 body[data-screen=table] .seat-action{display:none}
 /* A dedicated central column keeps five-digit pots away from side seats. */
 body[data-screen=table] .pot{width:116px;margin-inline:auto;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;line-height:1.05;gap:2px}
 body[data-screen=table] .pot .chip{display:none}
 body[data-screen=table] .pot-label{font-size:12px;line-height:1;white-space:normal}
 body[data-screen=table] .pot strong{margin:0;font-size:18px;line-height:1}
 body[data-screen=table] .room-playfield .seat-3{margin-top:-16px}
 body[data-screen=table] .room-playfield .seat-2,
 body[data-screen=table] .room-playfield .seat-4{margin-top:-8px}
 body[data-screen=table] .stage{min-height:210px}
 body[data-screen=table] .actions{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr);gap:6px}
 body[data-screen=table] .actions button{min-width:0;min-height:48px;padding:5px 3px;line-height:1.25;font-size:14px;overflow-wrap:anywhere}
 body[data-screen=table] .actions button small{font-size:12px;line-height:1.25;margin-top:3px}
 body[data-screen=table] .presets{gap:4px}
 body[data-screen=table] .presets button{min-width:44px;min-height:44px;padding:4px;font-size:12px}
 body[data-screen=table] .raise-options input{min-width:36px;width:100%;flex:1;touch-action:pan-y}
 body[data-screen=table] .actions button:focus-visible,
 body[data-screen=table] .presets button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
}
@media(max-width:600px) and (max-height:700px){
 body[data-screen=table] .seat.seat-1 .dealer,
 body[data-screen=table] .seat.seat-5 .dealer{top:0;background:transparent;border:0;box-shadow:none;isolation:isolate}
 body[data-screen=table] .seat.seat-1 .dealer{right:-32px}
 body[data-screen=table] .seat.seat-5 .dealer{left:-32px}
 body[data-screen=table] .seat:is(.seat-1,.seat-5) .dealer::before{content:"";position:absolute;inset:10px;border:3px double #8c7544;border-radius:50%;background:#fff5d7;z-index:-1}
 body[data-screen=table] .seat:is(.seat-1,.seat-5) .dealer span{font-size:14px}
 body[data-screen=table] .seat:is(.seat-1,.seat-5) .dealer small{display:none}
}
@media(max-width:600px) and (max-height:700px){
 body[data-screen=table] .stage{--scene-height:60px}
 body[data-screen=table] .stage[data-phase=playing] .board-area{top:14%}
 body[data-screen=table] .room-playfield .seat-3{top:7%}
 body[data-screen=table] .room-playfield .seat-2,
 body[data-screen=table] .room-playfield .seat-4{top:24%}
 body[data-screen=table] .room-playfield .seat-0{top:77%}
 body[data-screen=table] .room-playfield .seat-0 .hole{height:48px}
 body[data-screen=table] .room-playfield .seat-0 .card{height:51px;width:36px;font-size:20px}
 body[data-screen=table] .room-playfield .seat-0 .nameplate{min-height:34px;padding-block:2px}
 body[data-screen=table] .room-playfield .community .card{height:42px;width:30px;font-size:17px}
 body[data-screen=table] .room-playfield .community .card .suit{font-size:19px}
}
@media(max-width:600px) and (max-height:620px){
 body[data-screen=table] .stage{--scene-height:36px}
}
@media(min-width:601px) and (max-height:800px){
 body[data-screen=table] .stage{--scene-height:48px}
 body[data-screen=table] .room-playfield .seat-0{top:75%}
}
@media(min-width:601px) and (min-height:651px) and (max-height:800px){
 body[data-screen=table] .stage[data-phase=playing] .seat:not(.seat-0) .hole{display:none}
 body[data-screen=table] .stage[data-phase=playing] .seat-3{top:7%}
 body[data-screen=table] .stage[data-phase=playing] .board-area{top:24%}
 body[data-screen=table] .stage[data-phase=playing] .seat-0{top:auto;bottom:6px;transform:translateX(-50%)}
 body[data-screen=table] .stage[data-phase=playing] .seat-0 .hole{height:60px}
 body[data-screen=table] .stage[data-phase=playing] .seat-0 .card{height:63px;width:44px}
 body[data-screen=table] .stage[data-phase=playing] .community .card{height:49px;width:36px}
}
@media(min-width:601px) and (max-height:500px){
 /* Very short landscape: use a side window, not a shorter card area. */
 body[data-screen=table] .stage{--scene-height:0px}
 body[data-screen=table] .stage::before{height:100%;width:22%;background-image:linear-gradient(90deg,transparent,#111c2d),var(--room-art);background-size:auto 100%;background-position:54% top}
 body[data-screen=table] .room-playfield{left:17%}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .board-area{top:10%}
 body[data-screen=table] .stage:is([data-phase=finished],[data-phase=revealing]) .seat-3{top:45%}
}
@media(prefers-reduced-data:reduce){
 body[data-screen=table] .stage,
 body[data-screen=table] .stage::before{background-image:none}
}