/* Artwork is separate from the live controls and saved campaign state. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.tools button{display:grid;place-items:center;min-width:44px;min-height:44px}
.tools img{width:24px;height:24px;filter:invert(95%) sepia(9%) saturate(517%) hue-rotate(345deg)}
body[data-screen="lobby"] header{position:fixed;inset:0 0 auto;height:118px;padding:22px 4vw;pointer-events:none;background:none}
body[data-screen="lobby"] header a,body[data-screen="lobby"] header button{pointer-events:auto}
body[data-screen="lobby"] .brand-logo{width:155px;height:86px}
body[data-screen="lobby"] .tools{gap:14px}
body[data-screen="lobby"] .tools button{width:54px;height:54px;padding:12px;border:1px solid #58859c;border-radius:12px;background:#062135b3;box-shadow:0 3px 9px #020c1570}
body[data-screen="lobby"] .tools button:hover{background:#16445b}
body[data-screen="lobby"] .tools img{width:28px;height:28px}
.lobby{display:block;background:#031727;isolation:isolate;scrollbar-width:none}
.lobby::-webkit-scrollbar{display:none}
.lobby-layout{position:relative;min-height:100svh;isolation:isolate;overflow:hidden}
.lobby-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lobby-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.lobby-content{position:relative;width:min(49vw,670px);padding:145px 0 30px;margin:0 0 0 5.5vw}
.lobby h1{font:1000 clamp(42px,4.7vw,76px)/.98 Nunito,sans-serif;letter-spacing:-.055em;color:#fff0db;margin:0;text-shadow:0 2px 16px #03152160}
.lobby-quip{font-size:clamp(14px,1.5vw,21px);line-height:1.45;color:#9fd6ed;margin:16px 0 0;white-space:nowrap}
.lobby-progress{margin:35px 0 0;max-width:535px}
.lobby-kicker{font-size:11px;line-height:1.3;letter-spacing:.25em;text-transform:uppercase;color:#8af0f4;font-weight:700;margin:0 0 6px}
.lobby-progress h2{font:1000 clamp(32px,3.3vw,54px)/1.08 Nunito,sans-serif;letter-spacing:-.05em;color:#fff0db;margin:0}
#continue-label{font-size:clamp(12px,1.15vw,17px);color:#9ed7ee;line-height:1.5;margin:5px 0 0;min-height:1.5em}
#campaign-progress{display:block;width:100%;height:8px;margin-top:18px;border:1px solid #477a9d;border-radius:20px;overflow:hidden;background:#13344e;appearance:none}
#campaign-progress::-webkit-progress-bar{background:#13344e}
#campaign-progress::-webkit-progress-value{background:#5deeea;border-radius:20px}
#campaign-progress::-moz-progress-bar{background:#5deeea;border-radius:20px}
.lobby-actions{max-width:550px;gap:6px;margin:20px -12px 0;display:flex;flex-direction:column}
.lobby-actions button,.lobby-actions .lobby-play{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:18px;width:100%;height:91px;min-height:44px;padding:12px 46px;background:transparent url('assets/lobby-v2/button-secondary.webp') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;color:#fff4e6;font:900 clamp(16px,1.6vw,23px)/1.2 Nunito,sans-serif;text-align:left;text-shadow:0 2px 3px #051827;transition:filter .15s,transform .15s}
.lobby-actions .lobby-play{height:103px;background-image:url('assets/lobby-v2/button-primary.webp');color:#071c30;justify-content:center;font-size:clamp(22px,2.1vw,32px);font-family:"Roboto Slab",serif;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 1px 0 #fff7dd}
.lobby-actions button:hover:not(:disabled){background-color:transparent;filter:brightness(1.13);transform:translateY(-2px)}
.lobby-actions button:active:not(:disabled){transform:translateY(1px)}
.lobby-actions button:focus-visible{outline:3px solid #a2ffff;outline-offset:1px}
.lobby-actions button:disabled{opacity:.55}
.lobby-play>img{width:34px;height:34px}
.menu-icon{width:54px;height:54px;flex:none;object-fit:contain}
.menu-chevron{width:22px;height:22px;margin-left:auto;filter:invert(96%) sepia(12%) saturate(346%) hue-rotate(338deg)}
.lobby-footer{max-width:535px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #477086;margin-top:17px;padding-top:15px}
.lobby .editor-link{display:flex;align-items:center;gap:9px;margin:0;color:#8ae8ef;font-size:13px;font-weight:700;white-space:nowrap;text-underline-offset:4px}
.editor-link img{width:25px;height:25px;filter:invert(88%) sepia(24%) saturate(594%) hue-rotate(139deg)}
.lobby .save-status{font-size:10px;line-height:1.4;color:#8eb9d7;max-width:156px;margin:0;padding-left:25px;position:relative}
.lobby .build-version{font-size:9px;color:#91b6ca;margin:12px 0 0;opacity:.75}
.lobby .loading{max-width:535px}
@media(min-width:901px) and (max-height:800px){
 .lobby-content{padding-top:120px;width:min(45vw,580px)}
 .lobby h1{font-size:clamp(40px,4.3vw,66px)}
 .lobby-quip{margin-top:12px;font-size:17px}
 .lobby-progress{margin-top:24px}
 .lobby-progress h2{font-size:39px}
 #campaign-progress{margin-top:12px}
 .lobby-actions{margin-top:15px;gap:2px;max-width:480px}
 .lobby-actions button{height:74px;font-size:18px}
 .lobby-actions .lobby-play{height:85px;font-size:27px}
 .lobby-footer{max-width:456px;margin-top:10px;padding-top:10px}
}
@media(max-width:900px) and (orientation:portrait){
 body[data-screen="lobby"] header{height:19vw;padding:2.5vw 5.8vw;align-items:flex-start}
 body[data-screen="lobby"] .brand-logo{width:19.5vw;height:14.5vw;object-fit:contain}
 body[data-screen="lobby"] .tools{gap:2.7vw;margin-top:3.9vw}
 body[data-screen="lobby"] .tools button{width:9.8vw;height:9.8vw;min-width:44px;min-height:44px;padding:2vw;border-radius:2vw}
 body[data-screen="lobby"] .tools img{width:5.3vw;height:5.3vw;min-width:20px;min-height:20px}
 .lobby-layout{min-height:max(100svh,216.18vw)}
 .lobby-art img{object-fit:cover;object-position:center top}
 .lobby-content{width:auto;margin:0;padding:82.2vw 6.3vw 2vw}
 .lobby h1{font-size:10.8vw;line-height:.91;letter-spacing:-.055em}
 .lobby-quip{font-size:3.65vw;line-height:1.4;margin:2.2vw 0 0;letter-spacing:-.03em}
 .lobby-progress{max-width:none;margin-top:6.2vw}
 .lobby-kicker{font-size:2.4vw;line-height:1.3;margin-bottom:1.15vw;letter-spacing:.25em}
 .lobby-progress h2{font-size:10.7vw;line-height:1.03;letter-spacing:-.055em}
 #continue-label{font-size:3.4vw;line-height:1.4;margin-top:.75vw}
 #campaign-progress{height:1.9vw;margin-top:3.6vw}
 .lobby-actions{max-width:none;gap:.8vw;margin:3.6vw -2.1vw 0}
 .lobby-actions button,.lobby-actions .lobby-play{height:15.8vw;min-height:48px;padding:2vw 10.7vw;gap:5vw;font-size:4.65vw}
 .lobby-actions .lobby-play{height:19.7vw;font-size:6.1vw;gap:4.8vw;padding-bottom:3.7vw}
 .lobby-play>img{width:7.2vw;height:7.2vw}
 .menu-icon{width:13.5vw;height:12vw}
 .menu-chevron{width:4vw;height:4vw}
 .lobby-footer{max-width:none;gap:3vw;margin-top:2.7vw;padding-top:3.9vw}
 .lobby .editor-link{font-size:3.05vw;gap:2.4vw}
 .editor-link img{width:5.3vw;height:5.3vw}
 .lobby .save-status{max-width:29vw;font-size:2vw;padding-left:4.6vw;background-size:3vw 4vw}
 .lobby .build-version{display:none}
 .lobby .loading{max-width:none}
}
@media(orientation:landscape) and (max-height:520px){
 body[data-screen="lobby"] header{height:72px;padding:8px 4vw}
 body[data-screen="lobby"] .brand-logo{width:100px;height:58px}
 body[data-screen="lobby"] .tools button{width:44px;height:44px;padding:9px}
 .lobby-content{width:46vw;padding-top:86px;margin-left:5vw}
 .lobby h1{font-size:36px}
 .lobby-quip{font-size:12px;margin-top:8px}
 .lobby-progress{margin-top:18px}
 .lobby-progress h2{font-size:29px}
 #continue-label{font-size:11px}
 .lobby-actions button{height:61px;font-size:14px;padding:10px 30px;gap:13px}
 .lobby-actions .lobby-play{height:69px;font-size:20px}
 .menu-icon{width:30px;height:30px}
 .lobby-footer{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.lobby-actions button{transition:none}.lobby-actions button:hover:not(:disabled),.lobby-actions button:active:not(:disabled){transform:none}}

.lobby .save-status::before{content:"";position:absolute;left:0;top:50%;width:18px;height:23px;transform:translateY(-50%);background:#8eb9d7;mask:url(assets/icons/device-mobile.svg) center/contain no-repeat}
@media(max-width:900px) and (orientation:portrait){.lobby .save-status::before{width:3vw;height:4vw}}
