#lobby-menu{--lobby-gold:#dcc28c;position:fixed;inset:0;z-index:8;overflow:hidden;isolation:isolate;color:#f8f2e7;background:#09141f url('../ui/lobby/background.webp') center/cover no-repeat;font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;touch-action:manipulation}
#lobby-menu[hidden]{display:none}
#lobby-menu::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 44%,#08172325,#060f1ec2 90%),linear-gradient(180deg,#07101c85,transparent 35%,#050e188c)}
#lobby-menu *{box-sizing:border-box}
#lobby-menu button,#lobby-menu a{-webkit-tap-highlight-color:transparent;font:inherit}
#lobby-menu button:focus-visible,#lobby-menu a:focus-visible{outline:2px solid #f1d9a5;outline-offset:7px}
.lobby-header{position:absolute;top:max(24px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:flex-end;z-index:2}
.lobby-settings{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:9px;border:0;background:none;color:#b5c0c8;cursor:pointer;transition:color .2s}
.lobby-settings svg{display:block;width:22px;height:22px}.lobby-settings:hover{color:#f1d9a5}
.lobby-player{display:flex;gap:15px;align-items:center}.lobby-player-copy{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}.lobby-player-copy strong{font-size:15px;max-width:min(36vw,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;letter-spacing:.01em}.lobby-player-copy>span{font-size:11px;color:#b5b9af;letter-spacing:.08em}.lobby-rank{display:flex;width:28px;height:34px}.lobby-rank svg{width:100%;height:100%}.lobby-avatar{width:47px;height:47px;object-fit:cover;border-radius:50%;border:1px solid #d4c29a80;box-shadow:0 0 0 4px #0c1c2880}
.lobby-center{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,5vh,52px);padding:88px 24px 38px}
.lobby-heading{text-align:center}.lobby-heading h1{margin:0;font-size:clamp(32px,5.4vh,56px);font-weight:900;letter-spacing:-.055em;line-height:1.25;text-shadow:0 3px 26px #0008}.lobby-title-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:13px;color:#d4b981;font-size:10px}.lobby-title-rule::before,.lobby-title-rule::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,#d4b9818c)}.lobby-title-rule::after{transform:rotate(180deg)}
.lobby-modes{display:flex;align-items:start;justify-content:center;gap:clamp(44px,7vw,112px);max-width:100%}
.lobby-mode{--accent:#8ed6e2;--glow:#71c8e338;display:flex;flex-direction:column;align-items:center;gap:25px;position:relative;background:none;border:0;color:#f8f2e7;padding:0 7px 8px;cursor:pointer;transition:transform .25s}
.mode-portrait{position:relative;display:grid;place-items:center;width:clamp(140px,32vh,286px);aspect-ratio:1;border-radius:50%;border:1px solid var(--accent);background:#0b1a27c9;color:var(--accent);transition:background .25s,border-color .25s}
.mode-symbol{display:block;width:42%;height:42%}
.mode-name{font-size:clamp(20px,3.2vh,28px);font-weight:800;letter-spacing:-.025em;text-shadow:0 2px 12px #000b}
.mode-rank{--accent:#ad9c7d;cursor:default}.mode-rank .mode-name{color:#c4baa9}
.mode-unavailable{position:absolute;z-index:1;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;white-space:nowrap;border:1px solid #d2bdd04d;background:#10121edb;border-radius:18px;padding:6px 12px;color:#eadde9;font-size:11px;letter-spacing:.08em}.mode-unavailable svg{width:10px;height:12px}
.lobby-mode:not(:disabled):hover{transform:translateY(-5px)}.lobby-mode:not(:disabled):hover .mode-portrait{background:#173143d9;border-color:#bfedf4}.lobby-mode:not(:disabled):active{transform:scale(.97)}
.lobby-settings-dialog{width:min(360px,calc(100vw - 40px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #cdb78055;border-radius:20px;padding:30px;background:linear-gradient(150deg,#192a39,#0c1928);color:#f8f2e7;box-shadow:0 24px 100px #000a;font-family:inherit}.lobby-settings-dialog::backdrop{background:#040a14b8;backdrop-filter:blur(6px)}.lobby-settings-dialog h2{font-size:23px;letter-spacing:-.04em;margin:0 0 26px}.lobby-settings-dialog form{margin:0}.lobby-settings-dialog .lobby-close{position:absolute;top:12px;right:14px;background:none;border:0;color:#b5c2cb;font-size:26px;padding:0 7px;cursor:pointer}.lobby-settings-dialog>button,.lobby-settings-dialog>a{display:flex;align-items:center;justify-content:space-between;min-height:46px;width:100%;padding:12px 15px;border:1px solid #acc3d126;border-radius:10px;background:#ffffff05;color:#e4e3dd;text-decoration:none;font-size:14px;margin-top:10px;cursor:pointer}.lobby-settings-dialog>button:hover,.lobby-settings-dialog>a:hover{background:#ffffff0c;border-color:#d4c29a80}.lobby-settings-dialog #lobby-refresh{justify-content:center;font-size:12px;color:#a3b1bc;background:none;border:0}.lobby-version{display:block;text-align:center;font-size:10px;color:#728594;margin-top:15px}
.lobby-particles{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.lobby-particles i{position:absolute;width:2px;height:2px;border-radius:50%;background:#d9d3a6;box-shadow:0 0 8px #d9d3a650;opacity:0;animation:lobby-drift var(--speed) linear var(--delay) infinite}@keyframes lobby-drift{0%{transform:translate(0,45px);opacity:0}25%{opacity:.4}70%{opacity:.25}100%{transform:translate(45px,-140px);opacity:0}}
body.lobby-visible #rotate,body.lobby-visible #iostip{display:none!important}
@media(max-height:500px){.lobby-header{top:max(14px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right))}.lobby-center{padding-top:68px;padding-bottom:20px;gap:22px}.lobby-heading h1{font-size:30px}.lobby-title-rule{margin-top:7px}.mode-portrait{width:clamp(120px,37vh,185px)}.lobby-mode{gap:17px}.mode-name{font-size:20px}.lobby-avatar{width:37px;height:37px}.lobby-player-copy strong{font-size:13px}.lobby-player-copy{gap:4px}.lobby-settings{width:38px;height:38px;padding:8px}.mode-unavailable{font-size:10px;bottom:12px;padding:4px 10px}}
@media(max-width:520px) and (min-height:501px){.lobby-header{top:max(22px,env(safe-area-inset-top));left:20px;right:20px}.lobby-player{gap:10px}.lobby-avatar{width:38px;height:38px}.lobby-rank{width:23px;height:30px}.lobby-player-copy strong{font-size:13px}.lobby-settings{width:38px;height:38px;padding:8px}.lobby-center{padding:92px 12px 50px;gap:50px}.lobby-heading h1{font-size:40px}.lobby-modes{gap:26px}.mode-portrait{width:clamp(112px,35vw,175px)}.lobby-mode{padding:0 3px;gap:23px}.mode-name{font-size:21px}.mode-unavailable{font-size:10px;bottom:12px;padding:5px 9px}}
@media(prefers-reduced-motion:reduce){#lobby-menu *,#lobby-menu *::before,#lobby-menu *::after{animation:none!important;transition:none!important}.lobby-particles{display:none}}