/* A 1280x720 browsing context is scaled as one unit by frame-shell.js. */
#landing{padding:20px 64px;align-items:safe center}
#landing .panel{width:1100px;flex-shrink:0}
#welcome .brand-title{margin:6px 0}
#welcome .brand-title img{width:550px;max-height:200px}
#welcome .brand-tagline{font-size:23px}
#landing #welcome .intro{margin:12px 0 16px;font-size:17px}
#landing #welcome .small{margin-top:14px}
#landing #app-tools{display:flex;align-items:center;gap:12px;margin-top:14px}
#landing #welcome #rejoin{padding:8px 14px;font-size:15px}
#welcome .small:has(#rejoin[hidden]){display:none}
#landing #app-tools button,#landing #app-tools a{display:inline-flex;align-items:center;justify-content:center;padding:10px 17px;min-height:44px;background:#0d1b25d9;border:1px solid #8b7547;color:#e9d3a4;font:16px Arcade,serif;text-decoration:none}
#landing #app-tools button:hover,#landing #app-tools a:hover{background:#43351e;border-color:#dfba73}
#landing #tools-status{font-size:14px;min-height:23px;margin-top:8px;color:#e9c47c}
.brand-footer{margin-top:14px;padding-top:12px;border-top:1px solid #b7965344;color:#9ba8ad;font:14px Arcade,serif;display:flex;gap:5px}
.brand-footer a{color:#d5bd88;text-underline-offset:3px}
#landing button:focus-visible,#landing a:focus-visible,dialog button:focus-visible{outline:2px solid #ffe0a0;outline-offset:4px}
dialog{width:560px;max-width:90%;padding:28px;background:#0c1923;color:#f4dfb0;border:1px solid #d2aa5d;font:20px Arcade,serif;box-shadow:0 12px 55px #000b}
dialog::backdrop{background:#03080cbb}
dialog h2{font-size:27px;margin:0 0 20px}
dialog p{font-size:20px;line-height:1.75;color:#d0d7d6;margin-bottom:20px}
dialog button{font:18px Arcade,serif;margin-top:12px}
dialog input{width:100%;padding:14px;background:#060d14;color:#ecdfc2;border:1px solid #a98a54;font:16px system-ui}
/* The lobby uses the same tablet layout at every scale. Keep ready/start and
   both seats visible; long technique lists scroll inside their own panel. */
#landing:has(#lobby:not([hidden])){padding:18px 64px}
#landing #lobby{display:grid;grid-template-columns:1.2fr 1fr;grid-template-areas:"top top" "hint hint" "notice notice" "heroes guide" "seats guide" "status status" "share share" "actions actions" "note note";gap:6px 18px}
#lobby .lobby-top{grid-area:top}
#landing #lobby h2{font-size:30px}
#landing #lobby>.small:first-of-type{grid-area:hint;margin:0;font-size:12px}
#lobby .arrival-notice{grid-area:notice;margin:0;padding:8px 12px}
#landing #lobby .arrival-notice strong{font-size:18px}
#landing #lobby .arrival-notice p{margin-top:3px;font-size:12px}
#landing #lobby .heroes{grid-area:heroes;margin:0;gap:10px}
#landing #lobby .hero{height:148px}
#landing #lobby .hero img{height:127px}
#landing #lobby .hero span{font-size:18px;padding:8px}
#landing #lobby .hero small{font-size:10px;margin-top:4px}
#landing #lobby .hero-ready{font-size:12px;padding:5px}
#landing #lobby .technique-panel{grid-area:guide;height:232px;overflow:auto;padding:10px 12px}
#landing #lobby .technique-panel h3{font-size:21px}
#landing #lobby .technique-panel p{font-size:12px;margin:5px 0;line-height:1.4}
#landing #lobby #technique-guide{font-size:14px;gap:3px 12px;line-height:1.4}
#landing #lobby #technique-guide li{gap:4px;padding:2px 0}
#lobby .arcade-motion{gap:3px}
#lobby .arcade-direction{font-size:18px}
#lobby .arcade-button{width:20px;height:20px;font-size:13px}
#lobby .arcade-turn{font-size:20px}
#landing #lobby .seats{grid-area:seats;margin:0;gap:10px}
#landing #lobby .seat{min-height:78px;padding:8px 12px;gap:10px}
#landing #lobby .seat img{width:44px;height:54px}
#landing #lobby .seat-name{font-size:17px}
#landing #lobby .seat-label{font-size:11px}
#landing #lobby .seat-state{font-size:14px}
#landing #lobby .seat.is-ready .seat-state{font-size:16px}
#landing #lobby #room-status{grid-area:status;margin:0;min-height:20px;font-size:15px}
#landing #lobby #share-box{grid-area:share;margin:0}
#landing #lobby #invite-url{padding:9px 12px}
#landing #lobby .actions{grid-area:actions}
#landing #lobby button{padding:10px 18px;font-size:17px}
#landing #lobby>.small:last-child{grid-area:note;margin:0;font-size:12px;line-height:1.4}
#landing:has(#lobby:not([hidden])) .brand-footer{margin-top:10px;padding-top:8px}