/* Decorative room plates follow the existing cosmetic city selection.
   Cards and controls remain HTML; no game or account state is changed. */
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}
}
@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}
}