#lobby *{box-sizing:border-box}
#lobby button{font:inherit;cursor:pointer;color:inherit}
#lobby button:focus-visible{outline:3px solid #efd98f;outline-offset:4px}
#lobby .scene{width:1440px;height:810px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale,1));background:linear-gradient(100deg,#141227f5,#141227d9),url('/assets/maps/twin-gate-cavern-v1.webp') center/cover;overflow:hidden;padding:28px 64px 30px}
#lobby .masthead{display:flex;align-items:center;height:65px;gap:24px}
#lobby .masthead>img{width:200px;height:62px}
#lobby .mapName{margin-left:auto;font-size:17px;color:#c0b797}
#lobby .exit{height:40px;width:40px;border:1px solid #efd98f66;background:#14122780;border-radius:50%;font-size:25px}
#lobby .main{height:567px;display:grid;grid-template-columns:850px 1fr;gap:48px;align-items:center}
#lobby .ticket{background:#f1e8d0;color:#141227;position:relative;border-radius:18px;box-shadow:0 22px 60px #0006;outline:1px solid #c9a227;outline-offset:-9px;overflow:hidden}
#lobby .ticket:before,#lobby .ticket:after{content:'';position:absolute;border-radius:50%;width:30px;height:30px;background:#141227;z-index:2;top:52px}
#lobby .ticket:before{left:-15px}
#lobby .ticket:after{right:-15px}
#lobby .ticketHead{height:68px;border-bottom:1px dashed #14122755;margin:0 24px;display:flex;align-items:center;justify-content:space-between;font-size:15px;letter-spacing:2px}
#lobby .ticketHead>span:first-child{font-family:Georgia,serif;font-size:17px}
#lobby .ticketBody{padding:30px 26px 28px;display:grid;grid-template-columns:360px 1fr;align-items:center}
#lobby .scanBlock{text-align:center}
#lobby .scanLabel{font-size:18px;margin-bottom:17px}
#lobby .qrFrame{padding:14px;width:300px;height:300px;background:white;margin:0 auto;border:1px solid #14122726;box-shadow:0 4px 16px #14122710}
#lobby .qrFrame img{width:100%;height:100%;display:block;image-rendering:pixelated}
#lobby .scanCaption{display:block;font-size:13px;color:#6f654e;letter-spacing:2px;margin-top:13px}
#lobby .roomBlock{padding:0 12px 0 24px;border-left:1px dashed #14122745;text-align:center}
#lobby .eyebrow{font-size:17px;letter-spacing:4px}
#lobby .roomCode{display:block;font:88px/1.3 Georgia,serif;letter-spacing:9px;padding-left:9px;color:#141227;margin:5px 0 8px}
#lobby .perforation{height:1px;background:#14122722;margin:10px 18px 4px}
#lobby .scanGuide{width:310px;margin:12px auto 0}
#lobby .scanGuide svg{width:100%;height:142px;display:block}
#lobby .guideLabels{display:flex;justify-content:space-around;font-size:13px}
#lobby .ticketFoot{height:51px;display:flex;align-items:center;justify-content:space-between;border-top:1px dashed #14122755;margin:0 24px;font-size:12px;color:#6d6349}
#lobby .ticketMark{font-family:Georgia,serif;letter-spacing:3px}
#lobby .summoner{height:535px;position:relative;display:flex;flex-direction:column;padding-top:8px;--accent:#4fa69c;isolation:isolate}
#lobby .summonerTop{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#efd98f;letter-spacing:2px}
#lobby .tipControls{display:flex;gap:9px}
#lobby .tipControls button{background:none;border:0;font-size:21px;padding:0 4px;line-height:28px}
#lobby .tipArt{position:relative;flex:1;min-height:0}
#lobby .tipArt>img{height:375px;width:350px;object-fit:contain;position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);z-index:1}
#lobby .orbit{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);border:1px solid #efd98f35;border-radius:50%;box-shadow:0 0 0 15px #efd98f07,0 0 0 17px #efd98f13;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 32%,transparent),transparent 65%)}
#lobby .ghostName{position:absolute;top:35px;left:50%;transform:translateX(-50%);font:75px/1 Georgia,serif;letter-spacing:4px;color:#efd98f0b;white-space:nowrap}
#lobby .tipCopy{position:relative;z-index:2;padding-top:6px;background:linear-gradient(transparent,#141227cf 65%)}
#lobby .tipStyle{color:#c6b987;font-size:13px;letter-spacing:2px}
#lobby .tipCopy h1{font-size:38px;margin:2px 0 5px;line-height:1.3;color:#efd98f}
#lobby .tipCopy p{font-size:16px;margin:0 0 19px;white-space:nowrap}
#lobby .tipTrack{height:2px;background:#efd98f26}
#lobby .tipTrack>div{height:100%;background:#efd98f;width:0}
#lobby .dots{display:flex;gap:9px;justify-content:center;margin-top:14px}
#lobby .dots button{border:0;padding:0;width:5px;height:5px;border-radius:50%;background:#efd98f40}
#lobby .dots button.active{background:#efd98f;box-shadow:0 0 0 3px #efd98f16}
#lobby .lobbyFooter{height:98px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #efd98f33;margin-top:18px;padding-top:14px}
#lobby .players{display:flex;align-items:center;gap:26px}
#lobby .playersLabel{font-size:14px;color:#c5bda5}
#lobby .playersLabel b{font-size:22px;color:#efd98f;margin-left:12px;font-weight:400}
#lobby .slots{display:flex;gap:10px}
#lobby .slot{width:42px;height:42px;border-radius:50%;border:1px solid #efd98f40;color:#9b9175;display:grid;place-items:center}
#lobby .slot svg{width:21px;height:24px}
#lobby .slot.isJoined{background:#efd98f;color:#141227;border-color:#efd98f}
#lobby .start{border:1px solid #e1c46f;background:#efd98f;color:#141227;font-size:21px;width:295px;padding:17px 27px;text-align:left;display:flex;justify-content:space-between;border-radius:5px}
#lobby .start:disabled{opacity:.36;cursor:default}
#lobby .ticketLogo{width:148px;height:59px;object-fit:contain;filter:brightness(0);display:block}
#lobby .ticketHead{justify-content:flex-start}
#lobby .ticketFoot{justify-content:flex-end}
#lobby .exit,#lobby .closeGuide{display:grid;place-items:center;padding:0;line-height:0;flex-shrink:0}
#lobby .exit svg,#lobby .closeGuide svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
#lobby .modeLabel{margin-left:auto;border:1px solid #efd98f55;color:#efd98f;padding:5px 15px;font-size:14px;border-radius:3px}
#lobby .mapName{margin-left:0}
#lobby .botDivider{height:30px;width:1px;background:#efd98f33;margin:0 7px}
#lobby .botGroup{display:flex;align-items:center;gap:10px}
#lobby .botGroup small{color:#b9ad8c;font-size:12px;margin-left:4px}
#lobby .botSlot{border-style:dashed;color:#b9ad8c;background:#efd98f08}
#lobby .start{width:330px}
#lobby .ticketFoot:empty{display:none}
#lobby{overflow:hidden;background:#141227;gap:0;text-align:left}
#lobby .scene{padding:24px 64px;background:linear-gradient(100deg,#141227f5,#141227d9),var(--lobby-map,url('/assets/bg.jpg')) center/cover}
#lobby .masthead{height:44px}#lobby .main{height:608px}
#lobby .ticketHead{height:108px;justify-content:space-between}
#lobby .ticketLogo{width:148px;height:59px;flex-shrink:0}
#lobby .ticketWordmark{font:20px Georgia,serif;letter-spacing:3px;margin-right:9px}
#lobby .ticket:before,#lobby .ticket:after{top:93px}
#lobby .ticketFoot{justify-content:space-between}
#lobby .ticketHelp{color:#6d6349;background:none;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:4px;font-size:13px}
#lobby #qrBox,#lobby #qrBox svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
#lobby .roomCode{font-family:Georgia,serif!important}
#lobby .lobbyFooter{height:90px;margin-top:8px;padding-top:6px}
#lobby .summoner{height:555px}#lobby .summonerIdentity{display:flex;gap:13px;align-items:center;margin:2px 0 5px}#lobby .summonerIdentity h1{margin:0}
#lobby #lt-elementLogo{display:block;width:31px;height:38px;mask:var(--element-art) center/contain no-repeat;-webkit-mask:var(--element-art) center/contain no-repeat}
#lobby .tipArt{pointer-events:none}#lobby .summonerTop{position:relative;z-index:3}
#lobby .humanSlot{position:relative;isolation:isolate}#lobby .slotGlyph{display:grid;place-items:center;width:100%;height:100%}#lobby .slotGlyph svg{display:block}
#lobby .slot.isJoined{min-height:0;gap:0}
#lobby .arrivalHalo,#lobby .arrivalSpark{pointer-events:none;position:absolute;opacity:0}
#lobby .arrivalHalo{inset:-8px;border:1.5px solid #efd98f;border-radius:50%}
#lobby .arrivalSpark{height:25px;width:25px;top:-15px;right:-12px;background:#fff4c1;clip-path:polygon(50% 0,59% 39%,100% 50%,59% 61%,50% 100%,41% 61%,0 50%,41% 39%)}
#lobby .arriving .arrivalHalo{animation:ltRing 1s ease-out both}#lobby .arriving .slotGlyph{animation:ltAppear .6s ease both}#lobby .arriving .arrivalSpark{animation:ltGlint .9s ease .15s both}
#lobby .currentCount{display:inline-block;min-width:.65em;text-align:center}#lobby .countArrive .currentCount{animation:ltCount .55s ease both}#lobby .start.ready{animation:ltReady 1.1s ease}
#lobby .swap{animation:ltSwap .5s ease both}
#lobby .lobbySr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
@keyframes ltRing{0%{opacity:0;transform:scale(.65)}25%{opacity:1}100%{opacity:0;transform:scale(1.55)}}
@keyframes ltAppear{0%{opacity:0;transform:scale(.7)}65%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes ltGlint{0%,100%{opacity:0;transform:scale(.3) rotate(-30deg)}35%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ltCount{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ltReady{0%,100%{box-shadow:0 0 0 #efd98f00}40%{box-shadow:0 0 22px #efd98f70}}
@keyframes ltSwap{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#lobby .arrivalHalo,#lobby .arrivalSpark{display:none}#lobby .swap,#lobby .slotGlyph,#lobby .currentCount,#lobby .start{animation:none!important}}