/* A shared table axis keeps the lobby, players and hand aligned. */
.app{max-width:none;min-height:620px;background-image:linear-gradient(#06252155,#06252170),url('lake.png')}
header{height:80px;padding-inline:4.5%;background:#092b2538}
nav{gap:12px}nav button{padding:10px 13px;border-radius:8px}
#friendsBtn{border:1px solid #d9be7870;background:#e7c88714;color:#f4d99d}
.top{padding:24px 4.5% 0;height:138px}.top h1{font-size:25px}.top p{font-size:12px;letter-spacing:2px}
.top-right{padding-top:10px;background:#092d2566;border:1px solid #becb9826;border-radius:30px;height:37px;padding:10px 16px;font-size:11px}
.felt{left:10%;right:10%;top:126px;bottom:100px;border-radius:46%;background:radial-gradient(ellipse,#275c50b8,#143c33ad);box-shadow:inset 0 0 80px #082b2580,0 10px 32px #001b2233}
.opponent{top:29%;width:112px}.opponent.left{left:5.5%}.opponent.right{right:5.5%}
.avatar{height:68px;width:68px;font-size:30px;margin-bottom:10px}.opponent strong{font-size:18px;letter-spacing:1px}
.count{font-size:12px;margin-top:10px}.opponent small{letter-spacing:1px}
.center{top:46%;left:23%;right:23%}.center h2{font-size:31px;letter-spacing:3px}.center p{font-size:13px;line-height:1.8;letter-spacing:1px;margin-bottom:25px}
.home-actions{display:flex;justify-content:center;gap:14px;align-items:center}.start{min-width:190px;min-height:54px;font-size:20px;letter-spacing:2px}
.start-friends{min-height:54px;padding-inline:28px;font-size:16px;background:#0b302ad9;border-color:#d4bd7c80}
.center small{font-size:11px;letter-spacing:1px;margin-top:20px}
.hand-area{left:4.5%;right:4.5%;bottom:38px}.hand{position:absolute;left:50%;transform:translateX(-50%);width:min(1020px,calc(100% - 220px));margin:0}
main[data-phase=idle] .kitty{top:30px}main[data-phase=idle] .stakes{padding:9px 17px;border:1px solid #bdc28e26;border-radius:30px;background:#082d2566;margin-top:0}
main[data-phase=idle] .felt{top:126px;bottom:104px}
main[data-phase=idle] .hand-area{height:94px;bottom:39px;justify-content:center}
main[data-phase=idle] .hand{display:none}main[data-phase=idle] .me{flex-basis:100px}
main[data-phase=idle] .instructions{bottom:12px}
.played-left,.played-right{top:30%}.played-left{left:22%}.played-right{right:22%}
footer{height:38px;padding-inline:4.5%;background:#06251f55}
dialog{max-height:calc(100dvh - 32px);overflow:auto;padding:32px;border-color:#bba56a88;background:linear-gradient(140deg,#214a3e,#0d302a);border-radius:20px}
dialog::backdrop{background:#021b17c9;backdrop-filter:blur(8px)}
dialog input:focus{outline:2px solid #e7c887;border-color:transparent}dialog .actions{gap:12px}dialog .actions button{flex:1}
main[data-phase=over] .hand-area,main[data-phase=over] .played{display:none}
.center.round-over{top:130px;bottom:34px;left:20%;right:20%;transform:none;overflow:auto;padding:12px 18px;background:#082c25e8;border:1px solid #d0b87355;border-radius:18px}
.round-over h2{font-size:25px;margin-bottom:4px}.round-over p{margin-bottom:10px}.round-over small{margin-top:8px}
.revealed-hands{margin:12px 0 18px;text-align:left}.reveal-title{font-size:11px;color:#b8c4ac;letter-spacing:1px;margin-bottom:10px}
.reveal-row{display:flex;align-items:center;gap:14px;border-top:1px solid #ccbd8330;padding:10px 0;min-height:86px}
.reveal-player{flex:0 0 92px;color:#e7c887;font-size:14px;overflow-wrap:anywhere}.reveal-player small{font:10px/1.5 sans-serif;color:#a7b59b;letter-spacing:0}
.reveal-cards{display:flex;flex:1;min-width:0;flex-wrap:wrap;gap:4px;align-items:center}.reveal-cards .card{width:36px;height:55px;font-size:17px;padding:4px;box-shadow:none;margin:0}.reveal-cards .suit{font-size:13px;margin-top:2px}.reveal-cards .large-suit{font-size:17px;bottom:4px;right:3px}.reveal-cards .joker{font-size:12px}.reveal-cards .joker .suit{font-size:8px}.hand-finished{color:#b9cc8b;font-size:12px}
@media(min-width:1001px) and (max-height:740px){.app{min-height:610px}.opponent{top:27%}.felt{top:116px;bottom:100px}.center{top:44%}.center h2{font-size:27px}.hand-area{height:125px}}
@media(max-width:1000px) and (orientation:landscape){
 .app{min-height:330px}header{height:48px;padding-inline:4%}nav{gap:4px}nav button{padding:7px 8px}#friendsBtn{font-size:10px}
 .top{height:88px;padding:10px 4% 0}.top h1{font-size:19px}.top p{font-size:9px;letter-spacing:1px}.kitty{top:7px}
 .felt,main[data-phase=idle] .felt{left:9%;right:9%;top:75px;bottom:66px}
 .opponent{top:28%;width:78px}.opponent.left{left:4%}.opponent.right{right:4%}.avatar{width:43px;height:43px;font-size:22px;margin-bottom:5px}.opponent strong{font-size:13px}.count{font-size:10px;margin-top:5px}
 .center{top:44%;left:22%;right:22%}.center h2{font-size:22px;letter-spacing:2px}.center p{font-size:10px;margin-bottom:12px;line-height:1.6}
 .home-actions{gap:9px}.start{min-height:38px;min-width:135px;font-size:16px;padding:7px 17px}.start-friends{min-height:38px;font-size:12px;padding:7px 17px}.center small{font-size:9px;margin-top:10px}
 .hand-area{left:4%;right:4%;bottom:22px;height:84px}.hand{width:calc(100% - 150px);height:85px}.me{flex-basis:65px}
 main[data-phase=idle] .kitty{top:12px}main[data-phase=idle] .stakes{padding:5px 12px;font-size:9px}
 main[data-phase=idle] .hand-area{bottom:21px;height:55px}main[data-phase=idle] .me .avatar{width:33px;height:33px;font-size:18px;margin-bottom:3px}main[data-phase=idle] .me strong{font-size:10px}
 main[data-phase=idle] .instructions{bottom:3px}.played-left,.played-right{top:31%}footer{height:24px}
 dialog{padding:22px;max-width:480px;max-height:calc(100dvh - 20px)}dialog .friend-note{margin-bottom:0}
 .center.round-over{top:4px;bottom:15px;left:17%;right:17%;padding:8px 12px;border-radius:12px}.round-over h2{font-size:18px;line-height:1.3}.round-over p{font-size:9px;margin-bottom:3px}.round-over .start{min-height:30px;font-size:13px}.round-over .friend-ready{margin:3px 0}.round-over small{margin-top:4px;font-size:8px}
 .revealed-hands{margin:6px 0 8px}.reveal-title{font-size:9px;margin-bottom:4px}.reveal-row{min-height:44px;padding:5px 0;gap:8px}.reveal-player{flex-basis:62px;font-size:11px}.reveal-player small{font-size:8px}.reveal-cards{gap:3px}.reveal-cards .card{width:23px;height:34px;font-size:12px;padding:2px;border-radius:3px}.reveal-cards .suit{font-size:10px;margin-top:1px}.reveal-cards .large-suit{font-size:11px;bottom:2px;right:2px}.reveal-cards .joker{font-size:9px}.reveal-cards .joker .suit{font-size:6px;letter-spacing:0}
}
/* Show the remaining cards beside their owner on the table. */
.revealed-hands[hidden]{display:none}
#roundHands{position:absolute;inset:0;pointer-events:none;margin:0;z-index:2}
#roundHands .reveal-row{position:absolute;width:30%;display:block;padding:12px 14px;min-height:0;background:#0b302ae8;border:1px solid #c6b57c66;border-radius:12px}
#roundHands [data-reveal-seat="2"]{left:17%;top:29%}
#roundHands [data-reveal-seat="1"]{right:17%;top:29%}
#roundHands [data-reveal-seat="0"]{left:27%;width:46%;bottom:36px}
#roundHands .reveal-player{display:flex;align-items:center;gap:12px;margin-bottom:9px}
#roundHands .reveal-player small{margin:0}
.center.round-over{top:59%;bottom:auto;left:23%;right:23%;transform:translateY(-50%);overflow:visible;padding:0;background:none;border:0}
.center.round-over h2{font-size:28px}.center.round-over .friend-ready{margin:6px 0}
@media(max-width:1000px) and (orientation:landscape){
 main[data-phase=over] .kitty{display:none}
 .center.round-over{top:4px;transform:none;left:21%;right:21%;bottom:auto;padding:0}
 .center.round-over h2{font-size:18px}.center.round-over p{margin-bottom:5px}
 #roundHands .reveal-row{width:31%;padding:6px 8px;border-radius:7px}
 #roundHands [data-reveal-seat="2"]{left:17%;top:32%}
 #roundHands [data-reveal-seat="1"]{right:17%;top:32%}
 #roundHands [data-reveal-seat="0"]{left:25%;width:50%;bottom:16px}
 #roundHands .reveal-player{font-size:10px;gap:8px;margin-bottom:5px}
 #roundHands .reveal-player small{font-size:8px}
 #roundHands .reveal-cards{gap:2px}
 #roundHands .card{width:20px;height:32px;font-size:11px}
}