/* Launcher-only presentation; in-game bitmap skins never paint these controls. */
.lobby-screen{--lobby-ink:#f3f0e9;--lobby-muted:#bcc0c3;--lobby-accent:#dfc69a;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);column-gap:10cqw;align-items:center;padding:88px 7cqw 72px;background:#242c32 url('../public/assets/lobby-landscape-v1.png') center/cover;overflow:auto;touch-action:pan-y;isolation:isolate;color:var(--lobby-ink);font-family:system-ui,-apple-system,'Malgun Gothic',sans-serif}
.lobby-screen::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#14233335 0%,#1423330a 36%,#161b22b3 65%,#161a20fa 100%),linear-gradient(180deg,#1525386b,transparent 48%,#101d2e59)}
.lobby-screen::after{content:'';position:absolute;inset:0 0 0 auto;width:calc(400px + 12cqw);max-width:54%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,#181c22b3 20%)}
.lobby-masthead{position:absolute;top:34px;left:7cqw;font-size:12px;font-weight:600;letter-spacing:2px;color:#f1eee7;text-shadow:0 1px 5px #152333}
.lobby-brand{align-self:start;margin-top:clamp(36px,12cqh,145px);min-width:0}
.lobby-brand h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(60px,7cqw,112px);font-weight:700;line-height:1;letter-spacing:-4px;white-space:nowrap;margin:0;color:#fffaf0;text-shadow:0 2px 12px #1a2e4459}
.lobby-brand h1 em{font-style:normal;font-weight:400;color:#f1ddba;margin-left:.06em}
.lobby-card{position:relative;align-self:center;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;max-height:none}
#lobby-panel{background:none;min-width:0}
.lobby-card h2{font:600 28px/1.3 system-ui,-apple-system,'Malgun Gothic',sans-serif;letter-spacing:-.8px;color:var(--lobby-ink);margin:0 0 30px}
.lobby-card form{display:grid;gap:20px}
.lobby-card label{display:grid;gap:10px;font-size:14px;font-weight:500;line-height:1.4;color:#e0e1df}
.lobby-card input{box-sizing:border-box;width:100%;min-width:0;min-height:50px;padding:13px 15px;border:1px solid #646d74;background:#10161cd9;color:#f8f6f0;border-radius:3px;font:16px/1.4 system-ui;user-select:text;touch-action:manipulation;transition:border-color .12s,background .12s}
.lobby-card input::placeholder{font:14px/1.4 system-ui;color:#a8afb7;opacity:1}
.lobby-card input:focus{outline:2px solid #e3cda3;outline-offset:2px;border-color:#e3cda3;background:#141b23}
.lobby-card small,.lobby-note{font-size:12px;line-height:1.6;color:var(--lobby-muted);overflow-wrap:anywhere}
.lobby-screen .lobby-button{min-width:0;min-height:46px;padding:12px 18px;background:#242b32;border:1px solid #71777b;border-radius:3px;color:var(--lobby-ink);font:500 14px/1.4 system-ui;letter-spacing:0;touch-action:manipulation;box-shadow:none;text-shadow:none;transition:background .12s,border-color .12s}
.lobby-screen .lobby-button:hover{background:#343b43;border-color:#b7b8b2}
.lobby-screen .lobby-primary{width:100%;min-height:50px;margin-top:4px;background:var(--lobby-accent);border-color:var(--lobby-accent);color:#242525;font-size:15px;font-weight:700;text-shadow:none;box-shadow:none}
.lobby-screen .lobby-primary:hover{background:#efdab8;border-color:#efdab8}
.lobby-screen .lobby-button:focus-visible{outline:2px solid #f7e1b9;outline-offset:3px}
.lobby-screen .lobby-button:disabled{opacity:.5;cursor:default}
.lobby-screen .lobby-link{min-height:36px;padding:8px 0;border:0;background:none;color:#d5d7d9;font-size:13px;box-shadow:none}
.lobby-screen .lobby-link:hover{background:none;color:#fff;text-decoration:underline;text-underline-offset:4px}
.lobby-switch{display:flex;justify-content:flex-end;margin-top:12px;line-height:1.4}
.lobby-screen .lobby-guest{width:100%;margin-top:22px;background:transparent;border-color:#727980;color:#e5e4df}
.lobby-screen .lobby-guest:hover{background:#f4f0e512}
.lobby-loading{margin-top:30px;padding-top:20px;border-top:1px solid #92989840}
.lobby-loading>div{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.5;color:#c6cacc}
.lobby-loading b{font-weight:500;color:#e1d5bd;font-variant-numeric:tabular-nums}
.lobby-loading progress{display:block;appearance:none;width:100%;height:3px;border:0;margin-top:12px;background:#101820;border-radius:0}
.lobby-loading progress::-webkit-progress-bar{background:#101820}
.lobby-loading progress::-webkit-progress-value{background:#dfc69a}
.lobby-loading progress::-moz-progress-bar{background:#dfc69a}
.lobby-card[data-ready=true] .lobby-loading{display:none}
#lobby-error{margin:16px 0 0;padding:12px 14px;background:#4b252ad9;border:1px solid #c8767c;border-radius:3px;color:#ffd6d6;font-size:13px;line-height:1.5}
.lobby-account-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;color:#cbd0d4;font-size:13px}
.lobby-account-bar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-slots{display:grid;gap:10px;margin:0 0 24px}
.lobby-screen .character-slot{display:flex;align-items:center;justify-content:flex-start;gap:15px;text-align:left;padding:12px 16px;min-height:82px;width:100%;background:#151d25b3;border-color:#6e7982}
.lobby-screen .character-slot[aria-pressed=true]{border-color:#e4cda6;background:#31373b;box-shadow:inset 3px 0 #dfc69a}
.character-slot canvas{width:44px;height:54px;flex:none}
.character-slot>span{min-width:0;display:grid;gap:6px}
.character-slot strong{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.character-slot small{font-size:12px;color:#c4cbd0}
.character-slot>b{margin-left:auto;white-space:nowrap;color:#e8d4b1;font-size:13px;font-weight:500}
.lobby-screen .empty-character{min-height:48px;background:#1c242c80;color:#d0d5d6;border-style:dashed}
.lobby-empty{padding:28px 0;color:#c4c9cd;font-size:14px;line-height:1.6}
.lobby-claim{margin-top:22px;border-top:1px solid #69737b;padding-top:18px}
.lobby-claim button{width:100%}.lobby-claim small{display:block;margin-top:8px}
.lobby-create-stage{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:24px}
.lobby-create-stage canvas{width:110px;height:145px;background:none;border:0}
.lobby-genders{border:0;padding:0;margin:0;min-width:0}
.lobby-genders legend{font-size:14px;color:#dde0de;margin-bottom:12px}
.lobby-genders>div{display:flex;gap:10px}
.lobby-genders label{position:relative;cursor:pointer;flex:1}
/* Keep the native radio hit area over the whole visible choice. A 1px input
   shrinks below one CSS pixel with the shared small-screen UI transform. */
.lobby-genders input{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;margin:0;padding:0;cursor:pointer}
.lobby-genders span{display:grid;place-items:center;min-height:42px;padding:8px;background:#141d25;border:1px solid #73808a;border-radius:3px}
.lobby-genders input:checked+span{border-color:#e4cda6;background:#363a39;color:#f4e5c9}
.lobby-genders input:focus-visible+span{outline:2px solid #f4e5c9;outline-offset:3px}
#creation-back{width:100%}
@container game-viewport (max-height:650px){
 .lobby-screen{padding:50px 6cqw 28px;column-gap:8cqw;grid-template-columns:minmax(0,1fr) minmax(310px,370px)}
 .lobby-masthead{top:20px;left:6cqw}.lobby-brand{margin-top:12cqh}.lobby-brand h1{font-size:clamp(46px,7cqw,78px);letter-spacing:-2px}
 .lobby-card h2{font-size:24px;margin-bottom:20px}.lobby-card form{gap:14px}.lobby-card input{min-height:44px;padding:10px 13px}
 .lobby-screen .lobby-primary{min-height:46px}.lobby-screen .lobby-guest{margin-top:14px}.lobby-account-bar{margin-bottom:12px}
 .character-slots{gap:8px;margin-bottom:16px}.lobby-screen .character-slot{min-height:66px;padding:8px 12px}.character-slot canvas{width:36px;height:44px}
}
@container game-viewport (max-height:420px){
 .lobby-screen{padding:20px 5cqw;column-gap:7cqw;grid-template-columns:minmax(0,1fr) minmax(290px,320px);align-items:center}
 .lobby-screen::after{max-width:58%}.lobby-masthead{top:20px;left:5cqw;font-size:12px;letter-spacing:1px}.lobby-brand{align-self:center;margin:0}.lobby-brand h1{font-size:clamp(36px,6.4cqw,58px);letter-spacing:-2px}
 .lobby-card{max-height:calc(100cqh - 40px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7c858b transparent;padding:4px}
 .lobby-card h2{font-size:21px;margin:0 0 15px}.lobby-card form{gap:11px}.lobby-card label{font-size:12px;gap:5px}.lobby-card input{min-height:38px;padding:7px 11px;font-size:16px}.lobby-card input::placeholder{font-size:12px}
 .lobby-screen .lobby-button{min-height:38px;padding:9px 12px;font-size:13px}.lobby-screen .lobby-primary{min-height:40px;margin:2px 0 0}.lobby-screen .lobby-link{min-height:28px;padding:5px 0;font-size:12px}
 .lobby-switch{margin-top:4px}.lobby-screen .lobby-guest{margin-top:10px}.lobby-loading{margin-top:18px;padding-top:14px}
 .lobby-account-bar{margin-bottom:8px;font-size:12px}.character-slots{gap:6px;margin-bottom:12px}.lobby-screen .character-slot{min-height:55px;padding:6px 10px;gap:10px}.character-slot canvas{width:32px;height:40px}.character-slot>span{gap:3px}.character-slot strong{font-size:13px}
 .lobby-card[data-mode=create] .lobby-account-bar{display:none}.lobby-card[data-mode=create] h2{margin-bottom:8px}.lobby-create-stage{grid-template-columns:70px 1fr;gap:20px}.lobby-create-stage canvas{width:70px;height:92px}.lobby-genders legend{font-size:12px;margin-bottom:8px}.lobby-genders span{min-height:36px;padding:6px}#character-form{gap:8px}
 #lobby-error{margin-top:10px;padding:8px 10px;font-size:12px}.lobby-claim{margin-top:12px;padding-top:12px}
 .lobby-card[data-mode=register] h2{padding-right:135px;margin-bottom:10px}.lobby-card[data-mode=register] form{gap:8px}.lobby-card[data-mode=register] .lobby-switch{position:absolute;top:4px;right:4px;margin:0}
}
@container game-viewport (max-width:640px) and (orientation:landscape){
 .lobby-screen{padding:12px 4cqw;grid-template-columns:minmax(0,1fr) minmax(270px,290px);gap:5cqw}.lobby-card{max-height:calc(100cqh - 24px)}.lobby-brand h1{font-size:34px;letter-spacing:-1.5px}.lobby-masthead{left:4cqw;top:20px;font-size:12px;letter-spacing:0}
 .lobby-card{padding:2px}.lobby-card h2{margin-bottom:8px}.lobby-card form{gap:8px}.lobby-switch{margin-top:0}.lobby-screen .lobby-guest{margin-top:4px}
 .lobby-card[data-mode=register] form{gap:6px}.lobby-card[data-mode=register] input{min-height:34px;padding:5px 11px}.lobby-card[data-mode=register] h2{margin-bottom:8px}
}
@container game-viewport (orientation:portrait){.lobby-screen{grid-template-columns:1fr;padding:70px 8cqw 40px;gap:36px}.lobby-brand{margin:0}.lobby-brand h1{font-size:64px}.lobby-card{max-width:420px;width:100%;justify-self:center}.lobby-screen::before{background:#15202bc4}.lobby-screen::after{display:none}}
@media(prefers-reduced-motion:reduce){.lobby-screen *{transition:none!important}}
.lobby-consent{display:grid;gap:9px;padding:14px 0;border-top:1px solid #87908a55;border-bottom:1px solid #87908a55}
.lobby-consent>a,.lobby-account-delete{color:#e1c89e;font-size:12px;text-underline-offset:3px}
.lobby-consent>label{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.6;cursor:pointer}
.lobby-card .lobby-consent input{width:18px;height:18px;min-height:18px;flex:none;margin:2px 0;padding:0;accent-color:#dfc69a}
.lobby-card .lobby-consent small{font-size:11px;line-height:1.6;color:#bfc4c1}
.lobby-account-bar{gap:12px;flex-wrap:wrap}.lobby-account-delete{margin-left:auto}
.lobby-screen .character-delete-link{display:block;margin:10px 0 0 auto;color:#e3aaa5}
.character-delete-summary{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid #87908a55}
.character-delete-summary canvas{width:44px;height:54px;flex:none}.character-delete-summary>div{display:grid;gap:5px;min-width:0}.character-delete-summary strong{overflow-wrap:anywhere}
.character-delete-warning{font-size:13px;line-height:1.7;color:#ecc9c5;margin:16px 0}
.character-delete-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lobby-screen .lobby-danger{background:#68332f;border-color:#bc7870;color:#fff2ee}.lobby-screen .lobby-danger:hover{background:#7e4039}
@container game-viewport (max-height:420px){.lobby-card[data-mode=delete] h2{margin-bottom:6px}.character-delete-summary{padding:4px 0;gap:12px}.character-delete-warning{margin:9px 0;font-size:12px;line-height:1.5}.character-delete-summary canvas{width:32px;height:40px}}
.lobby-card[data-mode=register]{max-height:calc(100cqh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:6px 8px;touch-action:pan-y}
@container game-viewport (max-height:540px){.lobby-consent{gap:6px;padding:8px 0}.lobby-card[data-mode=register]{max-height:calc(100cqh - 20px)}}
/* Keep the destructive confirmation and its error visible together on landscape phones. */
@container game-viewport (orientation:landscape) and (max-height:540px){
 .lobby-screen:has(.lobby-card[data-mode=delete]){grid-template-columns:1fr;padding:12px 4cqw}
 .lobby-screen:has(.lobby-card[data-mode=delete])::before{background:#101820c9}
 .lobby-screen:has(.lobby-card[data-mode=delete])::after{display:none}
 .lobby-screen:has(.lobby-card[data-mode=delete]) .lobby-brand,
 .lobby-screen:has(.lobby-card[data-mode=delete]) .lobby-masthead{display:none}
 .lobby-card[data-mode=delete]{width:100%;max-width:720px;max-height:calc(100cqh - 24px);justify-self:center;padding:6px 18px 6px 6px;overflow-y:auto;overflow-x:hidden}
 .lobby-card[data-mode=delete] #lobby-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;grid-template-areas:'account account' 'heading heading' 'summary form' 'warning form'}
 .lobby-card[data-mode=delete] .lobby-account-bar{grid-area:account}
 .lobby-card[data-mode=delete] h2{grid-area:heading;margin:4px 0 14px}
 .character-delete-summary{grid-area:summary}
 .character-delete-warning{grid-area:warning;word-break:keep-all;overflow-wrap:anywhere}
 #character-delete-form{grid-area:form;align-self:center;min-width:0;gap:18px}
}
/* Registration uses both landscape columns so consent stays readable beside the fields. */
@container game-viewport (orientation:landscape) and (max-height:540px){
 .lobby-screen:has(.lobby-card[data-mode=register]){padding:12px 4cqw;grid-template-columns:1fr}
 .lobby-screen:has(.lobby-card[data-mode=register]) .lobby-brand,
 .lobby-screen:has(.lobby-card[data-mode=register]) .lobby-masthead{display:none}
 .lobby-card[data-mode=register]{grid-column:1/-1;justify-self:center;width:100%;max-width:820px;max-height:calc(100cqh - 24px);box-sizing:border-box}
 .lobby-card[data-mode=register] form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:8px}
 .lobby-card[data-mode=register] form>label:nth-child(1){grid-area:1/1}
 .lobby-card[data-mode=register] form>label:nth-child(2){grid-area:2/1}
 .lobby-card[data-mode=register] form>label:nth-child(3){grid-area:3/1}
 .lobby-card[data-mode=register] form>small{grid-area:4/1;align-self:center}
 .lobby-card[data-mode=register] .lobby-consent{grid-area:1/2/4/3;align-content:center;gap:12px;padding:12px 0}
 .lobby-card[data-mode=register] form>button{grid-area:4/2}
 .lobby-card[data-mode=register] h2{padding-right:135px;margin-bottom:12px}
 .lobby-card[data-mode=register] .lobby-switch{position:absolute;top:4px;right:8px;margin:0}
}