/* V77 — fluid viewport layout: phones, tablets, laptops and large displays */
html,body,#app{width:100%;min-height:100%;margin:0}
body{min-height:100dvh}
.shell{width:min(100%,1800px);min-height:100dvh;margin:0 auto;padding:clamp(6px,1.15vw,20px);display:flex;flex-direction:column}
.shell>.topbar{flex:0 0 auto}
.shell>.game-grid,.shell>.multi-lobby,.shell>.setup-page-v16{flex:1;min-height:0}
.setup-page-v16{align-items:stretch;margin-block:0!important}
.setup-reference,.setup-side-v16{height:100%;min-height:0}
.setup-reference{display:flex;flex-direction:column;justify-content:center}
.setup-side-v16{align-content:start}
.multi-lobby{width:100%;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);gap:clamp(10px,1.25vw,20px);align-items:stretch;padding-block:clamp(4px,1vh,12px)}
.multi-lobby-card,.multi-code-card{padding:clamp(16px,2vw,30px)}
.multi-lobby-card{display:flex;flex-direction:column;justify-content:center}
.multi-code-card{display:flex;flex-direction:column;justify-content:center;align-items:center}
.multi-lobby-card h1{font-size:clamp(26px,3vw,48px);margin:.2em 0}
.multi-lobby-card>.muted{font-size:clamp(13px,1.15vw,18px);line-height:1.8;margin:.3em 0 1em}
.multi-team-list{margin-top:clamp(8px,1.3vh,18px);gap:clamp(7px,1vh,11px);width:100%}
.multi-team-row{padding:clamp(10px,1.2vw,16px);border-radius:clamp(14px,1.3vw,18px)}
.multi-lobby-actions{margin-top:clamp(12px,1.6vh,20px)}
.multi-lobby-actions .btn{width:100%}
.multi-room-code{font-size:clamp(40px,5vw,64px);margin:clamp(4px,1vh,10px) 0}
.multi-qr{width:clamp(150px,15vw,190px);height:clamp(150px,15vw,190px);margin:clamp(8px,1.2vh,14px) auto}
.multi-join-link{max-width:100%;font-size:clamp(10px,.8vw,12px)}
.game-grid{height:auto;min-height:0;align-items:stretch}
.score-card{height:max-content}
.play-card{min-height:0;height:100%;padding:clamp(10px,1.6vw,24px)}
@media (max-width:900px){.shell{min-height:100dvh;padding:clamp(5px,1.8vw,10px)}.shell>.multi-lobby,.shell>.setup-page-v16,.shell>.game-grid{flex:0 0 auto}.multi-lobby{grid-template-columns:1fr;gap:10px;padding-block:0}.multi-lobby-card,.multi-code-card{padding:clamp(14px,3.5vw,22px)}.multi-lobby-card{order:1}.multi-code-card{order:2}.multi-lobby-card h1{font-size:clamp(25px,6.5vw,36px)}.multi-team-row{padding:12px 13px}.multi-qr{width:min(180px,48vw);height:min(180px,48vw)}.setup-reference,.setup-side-v16{height:auto}.setup-reference{justify-content:flex-start}.play-card{height:auto}}
@media (max-width:520px){.shell{padding:5px}.multi-lobby-card,.multi-code-card{border-radius:20px;padding:14px 11px}.multi-lobby-card>.muted{font-size:12px;line-height:1.65}.multi-team-row{gap:8px;padding:11px 10px}.multi-team-info{gap:8px;min-width:0}.multi-team-info strong{font-size:13px}.multi-team-status{font-size:11px;white-space:nowrap}.multi-lobby-actions .btn{font-size:16px;padding:13px 16px}.multi-room-code{font-size:40px;letter-spacing:5px}.multi-code-card .btn{width:100%}.multi-join-link{font-size:9px}}
@media (min-width:1600px){.shell{width:min(96vw,1880px)}.multi-lobby{grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr)}.multi-lobby-card,.multi-code-card{padding:32px}}
@media (min-width:901px) and (max-height:820px){.shell{padding-block:6px}.multi-lobby-card,.multi-code-card{padding:16px 20px}.multi-lobby-card h1{font-size:30px}.multi-lobby-card>.muted{font-size:13px;margin-bottom:8px}.multi-team-list{margin-top:8px;gap:7px}.multi-team-row{padding:9px 12px}.multi-lobby-actions{margin-top:10px}.multi-qr{width:145px;height:145px;margin:7px auto}.multi-qr img,.multi-qr canvas{max-width:132px!important;max-height:132px!important}.multi-room-code{font-size:42px;margin:3px 0 6px}}