/* Entry flow: choose a world, recognise your player, then play. */
:root{--accent:#3d63e5;--accent-deep:#2e4fc4;--lobby-bg:#111827;--lobby-line:#334054;--lobby-muted:#adb9cd;--ease-press:cubic-bezier(.23,1,.32,1)}
body:has(#lobby:not([hidden])){background:var(--lobby-bg)}
body:has(#lobby:not([hidden])) #world{visibility:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lobby{display:block;width:100%;max-width:none;min-height:100dvh;margin:0;padding:0 40px;background:var(--lobby-bg);color:#f4f7fd;overflow:visible}
.lobby-header{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1240px,100%);height:96px;margin:auto;border-bottom:1px solid #283347}
.lobby .brand{margin:0;font-size:23px;letter-spacing:-.045em;gap:12px}
.lobby .brand-mark{width:39px;height:39px;background:#f4f7fd;color:#182238;border-radius:11px;box-shadow:none;font-size:22px}
.lobby-settings{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 14px;border:1px solid #3b485d;border-radius:10px;background:transparent;color:#d7e0ef;font-size:13px;font-weight:700;cursor:pointer}
.lobby-settings>span{font-size:19px;line-height:1}
.lobby-content{width:min(1240px,100%);margin:auto;padding:48px 0 24px}
.lobby-intro{margin-bottom:34px}
.lobby .eyebrow{font-size:10px;letter-spacing:.13em;color:#a4b3cb;margin:0 0 13px}
.lobby h1{max-width:none;font-size:clamp(34px,4vw,48px);line-height:1.08;letter-spacing:-.045em}
.lobby .lobby-copy{max-width:none;margin:14px 0 0;color:#adb9cd;font-size:16px;line-height:1.5}
.lobby-grid{display:grid;grid-template-columns:minmax(0,1fr) 356px;align-items:start;gap:32px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.section-heading h2{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.02em}
.section-heading>span{font-size:10px;font-weight:750;letter-spacing:.11em;color:#98a7be;white-space:nowrap}
.lobby .map-picker{padding:0;border:0;margin:0;min-width:0}
.lobby #map-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lobby #map-options .map-choice{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;min-height:260px;padding:0 0 18px;border:2px solid #354157;border-radius:16px;background:#1b2639;color:#f3f6fc;text-align:left;overflow:hidden;box-shadow:none;transition:border-color 150ms ease,background-color 150ms ease;cursor:pointer}
.lobby #map-options .map-choice[aria-pressed=true]{border-color:#8faaff;background:#223353;box-shadow:0 0 0 1px #8faaff}
.map-image{display:block;width:100%;height:160px;object-fit:cover;object-position:center;background:#34475b;border:0;margin-bottom:17px}
.map-title{display:block;padding:0 15px;font-size:15px;line-height:1.35;font-weight:800;letter-spacing:-.015em}
.map-description{display:block;padding:7px 15px 0;color:#bbc7da;font-size:12px;line-height:1.5;font-weight:500}
.map-check{position:absolute;right:10px;top:10px;display:grid;place-items:center;min-height:25px;padding:0 9px;border-radius:20px;border:1px solid #ffffff90;background:#1520379c;color:#fff;font-size:10px;font-weight:800;opacity:0}
.map-choice[aria-pressed=true] .map-check{opacity:1;background:#355de1;border-color:#e7edff}
.lobby .map-symbol{display:grid;place-items:center;min-height:132px;margin:0 0 16px;font-size:48px;background:#2b4053}
.public-rooms{margin-top:22px;border:1px solid #344155;border-radius:13px;overflow:hidden}
.public-rooms summary,.join-options summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;min-height:54px;font-size:14px;font-weight:750}
.public-rooms summary::-webkit-details-marker,.join-options summary::-webkit-details-marker{display:none}
.public-rooms summary::after,.join-options summary::after{content:'+';font-size:22px;line-height:1;font-weight:500;color:#a9b9d4}
.public-rooms[open] summary::after,.join-options[open] summary::after{content:'−'}
.public-rooms summary{padding:0 18px}
.rooms-count{font-weight:600;color:#a7b9d5;font-size:12px;margin-left:6px}
.public-rooms-content{padding:0 18px 18px;border-top:1px solid #2d3b50}
.lobby .rooms-heading{gap:12px;margin:5px 0 8px}
.lobby .rooms-heading p{font-size:12px;color:#abb9d0;line-height:1.5;margin:0}
.lobby #refresh-rooms{min-height:44px;padding:0 4px;color:#c7d7ff;font-size:12px;font-weight:750}
.lobby #room-list{font-size:13px;line-height:1.5;color:#bdc9db;gap:10px}
.lobby .room-row{padding:12px;background:#1e2b40;border-radius:10px}
.lobby .room-row strong{font-size:13px}.lobby .room-row small{font-size:12px}
.lobby .room-row button{min-height:44px;padding:0 14px;font-size:12px}
.worlds-note{font-size:12px;line-height:1.5;color:#92a2bb;margin:17px 0 0}
.lobby .play-panel{padding:26px;border:0;border-radius:18px;background:#f8faff;color:#1b2840;box-shadow:0 12px 36px #030b1c20;backdrop-filter:none}
.play-panel .section-heading{margin-bottom:24px}.play-panel .section-heading>span{color:#728099}
.lobby #lobby-form{display:grid;gap:16px}
.lobby .field,.lobby .field:has(#nickname){display:grid;grid-template-columns:1fr;gap:8px}
.lobby .field label{font-size:13px;font-weight:750}
.lobby .field input{height:48px;border:1px solid #c6d0e1;border-radius:10px;background:#fff;padding:0 13px;font-size:16px;font-weight:650;color:#1b2840;outline:none}
.lobby .field input::placeholder{color:#7d899d;font-size:14px;font-weight:500}
.lobby .field input:focus{border-color:#3d63e5;box-shadow:0 0 0 3px #3d63e51a}
.lobby .field span{font-size:12px;line-height:1.5;color:#65748b}
.lobby #room-code{text-transform:none;letter-spacing:0}
.lobby #customize-lobby{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:10px 12px;border:1px solid #d8e0ec;border-radius:12px;background:#edf2fa;color:#24324a;text-align:left;font-size:14px;cursor:pointer}
#avatar-swatch{position:relative;display:block;flex-shrink:0;width:40px;height:44px;border-radius:8px;background:#dce6fa;overflow:hidden}
#avatar-swatch::before{content:'';position:absolute;top:5px;left:12px;width:16px;height:14px;background:#edc099;border-top:4px solid #3e342f}
#avatar-swatch::after{content:'';position:absolute;top:19px;left:8px;width:24px;height:19px;background:var(--avatar-shirt,#456ce7);box-shadow:inset 0 -5px #253d6a}
.avatar-shortcut strong{display:block;font-size:14px;font-weight:800}.avatar-shortcut small{display:block;margin-top:4px;color:#627089;font-size:12px}
.shortcut-arrow{margin-left:auto;color:#647999;font-size:22px}
.lobby .button{min-height:48px;border-radius:11px;font-size:14px;font-weight:800;transition:transform 140ms var(--ease-press),background-color 140ms ease,border-color 140ms ease}
.lobby .button.primary{background:#3d63e5;border-color:#3d63e5;color:#fff}
.lobby .play-now{min-height:54px;font-size:17px;margin-top:2px}
.lobby .button.secondary{background:#edf2fa;color:#263653;border-color:#cbd6e8}
.lobby .button:active,.lobby-settings:active,.avatar-shortcut:active{transform:scale(.98)}
.lobby .play-hint{margin:-6px 0 0;color:#65748b;font-size:12px;line-height:1.5;text-align:center}
.lobby .form-error{margin:0;padding:10px 12px;background:#fff0ee;border-radius:9px;color:#a32e24;font-size:13px;line-height:1.5}
.lobby .form-error:empty{display:none}
.join-options{border-top:1px solid #dce3ef;margin-top:2px}.join-options summary{min-height:52px;color:#3e5272;font-size:13px}
.join-options summary::after{color:#7888a2;font-size:20px}
.join-options-content{display:grid;gap:12px;padding:4px 0 0}
.join-options-content .field:has(#room-code){margin:0}
.friend-divider{display:flex;align-items:center;gap:8px;margin:5px 0;color:#7a889d;font-size:11px;white-space:nowrap}
.friend-divider::before,.friend-divider::after{content:'';height:1px;flex:1;background:#dce3ef}
.lobby .private-option{display:flex;align-items:center;gap:10px;min-height:48px;margin:0;color:#3d506f;font-size:12px;font-weight:700;cursor:pointer}
.private-option input,.settings-check input{width:20px;height:20px;flex-shrink:0;accent-color:#3d63e5;margin:0}
.private-option small{display:block;color:#718098;font-size:11px;font-weight:500;line-height:1.5;margin-top:3px}
.play-footnote{font-size:10px;text-align:center;color:#7a879b;line-height:1.5;margin:13px -4px 0}
.lobby .invitation{font-size:13px;line-height:1.5;background:#e8efff;color:#2e4c99;border:1px solid #c6d4fb;padding:12px;margin:0}
.lobby-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #283347;padding-top:22px;margin-top:48px;font-size:11px;color:#899ab4;line-height:1.5}
body:has(#lobby:not([hidden])) .connection{z-index:11;left:auto;right:16px;bottom:10px;top:auto;background:#1c2a40;color:#cbd5e8;border-color:#394761;backdrop-filter:none;font-size:10px}
body:has(#lobby:not([hidden])) .connection.online{display:none}
button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e7aa3b;outline-offset:3px}
.dialog-heading button{min-width:44px;min-height:44px;flex-shrink:0}
dialog{overscroll-behavior:contain}
#settings-dialog{width:min(480px,calc(100% - 24px));padding:26px;max-height:calc(100dvh - 32px)}
.settings-options{display:grid;gap:23px;padding-top:5px}
.settings-field{display:grid;gap:9px}
.settings-field label,.settings-check strong{font-size:14px;font-weight:800;color:#293b58}
.settings-field select{width:100%;min-height:48px;padding:0 12px;border:1px solid #c5d1e3;border-radius:10px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:#243650}
.settings-field p{margin:0;color:#65748b;font-size:12px;line-height:1.5}
.settings-label{display:flex;justify-content:space-between;gap:16px;align-items:center}
.settings-label output{font-size:12px;font-weight:750;color:#526d9d;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.settings-field input[type=range]{width:100%;height:32px;margin:0;accent-color:#3d63e5;cursor:pointer}
.range-labels{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:#7a879b;margin-top:-6px}
.settings-check{display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer}
.settings-check small{display:block;font-size:12px;line-height:1.5;color:#65748b;margin-top:4px}
.settings-feedback{font-size:13px;color:#335d52;line-height:1.5;margin:16px 0 0}.settings-feedback:empty{display:none}
.settings-note{font-size:11px;color:#77859b;line-height:1.5;margin:18px 0 0;text-align:center}
.controls-guide{border-top:1px solid #d5dfed}
.controls-guide summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:13px;font-weight:800;color:#3e5375;list-style:none}
.controls-guide summary::-webkit-details-marker{display:none}.controls-guide summary::after{content:'+';font-size:20px;font-weight:500}.controls-guide[open] summary::after{content:'−'}
.controls-guide-body{padding:3px 0 0}.controls-guide-body h3{margin:9px 0 10px;color:#293b58;font-size:13px}.controls-guide-body dl{display:grid;gap:10px;margin:0 0 18px}
.controls-guide-body dl div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.controls-guide-body dt{font-size:11px;font-weight:800;color:#4d6386}.controls-guide-body dd{margin:0;font-size:12px;color:#65748b;line-height:1.4}.controls-guide-body p{font-size:12px;line-height:1.6;color:#65748b;margin:0 0 10px}
.performance-status{position:absolute;bottom:18px;right:18px;font-size:10px;line-height:1.5;color:#fff;background:#182c48cc;padding:5px 8px;border-radius:7px;pointer-events:none;font-variant-numeric:tabular-nums}.performance-status:empty{display:none}
@media(hover:hover) and (pointer:fine){
 .lobby #map-options .map-choice:hover{border-color:#8198ba}
 .lobby #map-options .map-choice[aria-pressed=true]:hover{border-color:#b7c8ff}
 .lobby .button.primary:hover{background:#2e4fc4;border-color:#2e4fc4}
 .lobby .button.secondary:hover,.lobby #customize-lobby:hover{background:#e3ebf8}
 .lobby-settings:hover{background:#233147;border-color:#5d708c}
 .public-rooms summary:hover{background:#1a2639}
 .join-options summary:hover{color:#284fc4}
}
@media(max-width:1100px){
 .lobby{padding:0 28px}.lobby-grid{grid-template-columns:minmax(0,1fr) 320px;gap:24px}.lobby .play-panel{padding:23px}
 .lobby #map-options{gap:10px}.map-image{height:140px}.map-title{padding:0 12px;font-size:14px}.map-description{padding:6px 12px 0;font-size:11px}.lobby #map-options .map-choice{min-height:250px}
}
@media(max-width:900px){
 .lobby{padding:0 24px}.lobby-header{height:78px}.lobby-content{padding-top:32px}.lobby-intro{margin-bottom:26px}
 .lobby-grid{grid-template-columns:minmax(0,1fr) 300px;gap:20px}.lobby .play-panel{padding:21px}
 .lobby #map-options{grid-template-columns:1fr;gap:10px}
 .lobby #map-options .map-choice{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto auto;column-gap:0;min-height:92px;padding:0 12px 0 0;align-items:center;border-radius:12px}
 .map-image{grid-column:1;grid-row:1/3;width:110px;height:100%;min-height:92px;margin:0;object-fit:cover}
 .map-title{grid-column:2;grid-row:1;padding:14px 12px 0;font-size:14px;align-self:end}
 .map-description{grid-column:2;grid-row:2;padding:4px 12px 13px;font-size:11px;align-self:start}
 .map-check{right:auto;left:8px;top:8px;min-height:22px;font-size:9px;padding:0 7px}
 .lobby .map-symbol{grid-row:1/3;min-height:92px;margin:0;font-size:36px}
 .public-rooms{margin-top:16px}.worlds-note{font-size:11px}
}
@media(max-width:680px){
 .lobby{padding:0 18px}.lobby-header{height:70px}.lobby .brand{font-size:20px;gap:10px}.lobby .brand-mark{width:33px;height:33px;font-size:19px;border-radius:9px}
 .lobby-settings{min-height:44px;padding:0 10px;font-size:12px;gap:7px}.lobby-settings>span{font-size:17px}
 .lobby-content{padding-top:25px}.lobby-intro{margin-bottom:23px}.lobby .eyebrow{font-size:9px;letter-spacing:.105em;margin-bottom:9px}.lobby h1{font-size:33px}.lobby .lobby-copy{font-size:13px;margin-top:10px;max-width:34ch}
 .lobby-grid{display:flex;flex-direction:column;gap:22px}.worlds-panel{width:100%}.section-heading{margin-bottom:13px}.section-heading h2{font-size:16px}.section-heading>span{font-size:9px}
 .lobby #map-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
 .lobby #map-options .map-choice{display:flex;min-height:144px;padding:0 0 12px;border-radius:11px;align-items:stretch}
 .map-image{width:100%;height:80px;min-height:80px;margin-bottom:10px}.map-title{padding:0 7px;font-size:11px;line-height:1.4;align-self:auto}.map-description{display:none}
 .map-check{left:auto;right:6px;top:6px;width:21px;height:21px;min-height:21px;font-size:12px;padding:0}.lobby .map-symbol{min-height:78px;margin:0 0 9px;font-size:30px}
 .public-rooms{margin-top:12px;border-radius:10px}.public-rooms summary{min-height:44px;padding:0 13px;font-size:12px}.public-rooms summary::after{font-size:19px}.rooms-count{font-size:11px}
 .public-rooms-content{padding:0 13px 13px}.lobby .rooms-heading p{font-size:11px}.lobby #refresh-rooms{font-size:11px}.worlds-note{display:none}
 .lobby .play-panel{width:100%;padding:20px;border-radius:15px}.play-panel .section-heading{margin-bottom:16px}.lobby #lobby-form{gap:12px}
 .lobby .field label{font-size:12px}.lobby .field input{height:46px}.lobby #customize-lobby{min-height:60px;padding:8px 11px;gap:11px}.avatar-shortcut strong{font-size:13px}.avatar-shortcut small{font-size:11px;margin-top:3px}
 #avatar-swatch{width:36px;height:39px}#avatar-swatch::before{left:10px;top:4px}#avatar-swatch::after{left:6px;top:18px;height:18px}
 .lobby .play-now{min-height:50px;font-size:16px}.lobby .play-hint{font-size:11px;margin-top:-3px}.join-options{margin-top:0}.join-options summary{min-height:46px;font-size:12px}
 .play-footnote{font-size:9px;margin-top:10px}.lobby-footer{margin-top:30px;padding-top:18px;font-size:10px}.lobby-footer>span:last-child{display:none}
 .dialog-heading h2{font-size:25px}#settings-dialog{padding:22px}.settings-options{gap:19px}
 .performance-status{right:12px;bottom:69px;font-size:9px;max-width:150px}
}
@media(max-width:380px){
 .lobby{padding:0 14px}.lobby-content{padding-top:20px}.lobby h1{font-size:30px}.lobby-intro{margin-bottom:19px}.lobby .lobby-copy{font-size:12px}.lobby-grid{gap:18px}.lobby .play-panel{padding:18px}.lobby #map-options{gap:7px}.map-title{font-size:10px;padding:0 6px}.lobby #map-options .map-choice{min-height:135px}.map-image{height:73px;min-height:73px}
}
@media(max-width:680px) and (orientation:portrait){
 .lobby-grid{gap:0}.worlds-panel{display:contents}.worlds-panel>.section-heading{order:0}.worlds-panel>.map-picker{order:1;width:100%}.lobby .play-panel{order:2;margin-top:20px}.worlds-panel>.public-rooms{order:3;width:100%;margin-top:16px}
}
@media(orientation:landscape) and (max-height:520px){
 .lobby-header{height:64px}.lobby-content{padding-top:22px}.lobby-intro{margin-bottom:20px}.lobby .eyebrow{display:none}.lobby h1{font-size:32px}.lobby .lobby-copy{font-size:13px;margin-top:8px}.lobby-footer{margin-top:24px}
 .hud .adventure-bar{grid-template-columns:repeat(4,auto);top:105px;max-width:calc(100vw - 220px)}
 .hud #wallet{grid-column:1/-1}.hud .adventure-bar button{min-height:44px;padding:8px 10px;font-size:10px}.hud #leave-room{grid-column:auto}
 .performance-status{bottom:10px;right:98px;font-size:9px;max-width:150px;padding:3px 6px}
 #settings-dialog{padding:18px;max-height:calc(100dvh - 20px)}.settings-options{gap:15px}.settings-field input[type=range]{height:24px}
}
@media(orientation:landscape) and (max-width:1100px) and (max-height:520px){
 .lobby{padding:0 20px}.lobby-header{height:54px}.lobby .brand{font-size:18px}.lobby .brand-mark{width:30px;height:30px;font-size:17px}.lobby-settings{min-height:40px;font-size:12px}
 .lobby-content{position:relative;padding-top:20px}.lobby-intro{width:calc(100% - 316px);margin-bottom:18px}.lobby h1{font-size:28px}.lobby .lobby-copy{max-width:28ch;font-size:12px;line-height:1.4}
 .lobby-grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:24px}.lobby .play-panel{margin-top:-86px;padding:16px 18px;border-radius:14px}
 .play-panel .section-heading{margin-bottom:12px}.play-panel .section-heading h2{font-size:16px}.play-panel .section-heading>span{font-size:9px}
 .lobby #lobby-form{gap:9px}.lobby .field{gap:6px}.lobby .field label{font-size:11px}.lobby .field input{height:42px;font-size:15px}
 .lobby #customize-lobby{min-height:46px;padding:4px 9px;gap:9px}.avatar-shortcut strong{font-size:12px}.avatar-shortcut small{font-size:10px;margin-top:2px}#avatar-swatch{width:33px;height:35px}#avatar-swatch::before{top:3px;left:8px}#avatar-swatch::after{top:17px;left:4px;height:16px}
 .lobby .play-now{min-height:46px;margin-top:0;font-size:15px}.lobby .play-hint{font-size:10px;line-height:1.4;margin-top:-2px}.join-options summary{min-height:39px;font-size:11px}.play-footnote{display:none}
 .worlds-panel>.section-heading{margin-bottom:11px}.worlds-panel>.section-heading h2{font-size:14px}.worlds-panel>.section-heading>span{font-size:8px}
 .lobby #map-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.lobby #map-options .map-choice{display:flex;min-height:122px;padding:0 0 9px;border-radius:10px;align-items:stretch}.map-image{height:72px;min-height:72px;width:100%;margin-bottom:8px}.map-title{padding:0 7px;font-size:10px;line-height:1.35}.map-description{display:none}.map-check{left:auto;right:5px;top:5px;width:19px;min-height:19px;height:19px;padding:0;font-size:12px}.map-check::before{content:none}
 .public-rooms{margin-top:10px}.public-rooms summary{min-height:40px;padding:0 12px;font-size:11px}.worlds-note{display:none}.lobby-footer{margin-top:24px;padding-top:12px}
}
@media(any-pointer:coarse){.hud .adventure-bar button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.lobby .button,.lobby #map-options .map-choice{transition:none}.lobby .button:active,.lobby-settings:active,.avatar-shortcut:active,.swatch:active,.hair-options button:active{transform:none}}
