:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#f3f2f6;background:#0c2630;font-synthesis:none;--panel:#15161e;--line:#ffffff10;--muted:#9493a3;--accent:#e3b3ef}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{color:inherit;border:1px solid var(--line);background:#22232d;border-radius:12px}button:hover{background:#33313f}button:disabled{opacity:.5;cursor:default}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#map{position:fixed;inset:0;background:#0c2630}.topbar{position:fixed;z-index:900;left:24px;right:24px;top:20px;display:flex;align-items:center;gap:18px;pointer-events:none}.brand,.status{pointer-events:auto;background:var(--panel);box-shadow:0 4px 30px #0003;border:1px solid var(--line);border-radius:15px;height:58px;display:flex;align-items:center}.brand{gap:13px;padding:0 20px;font-size:14px;color:var(--muted)}.brand strong{font-size:18px;color:#fff;letter-spacing:-.6px}.brand-icon{font-size:29px;color:var(--accent)}.brand-divider{height:18px;width:1px;background:#ffffff24}.status{gap:9px;padding:0 16px;margin-left:auto;font-size:13px}.status i{height:7px;width:7px;border-radius:50%;background:#aea2bf}.status.live i{background:#88dfad;box-shadow:0 0 0 4px #88dfad13}.status.live{color:#b6eacb}.status.offline i,.status.ended i{background:#d8a870}.panel{position:fixed;top:98px;left:24px;width:292px;max-height:calc(100dvh - 155px);z-index:850;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 45px #0003;padding:22px 18px 0}.panel-heading{display:flex;align-items:center;gap:10px}h1{font-size:17px;letter-spacing:-.4px;margin:0}.badge{font-size:12px;color:var(--accent);background:#e3b3ef12;border-radius:7px;padding:4px 8px}.muted{color:var(--muted)}.subtitle{font-size:12px;margin:7px 0 19px}.search{display:flex;align-items:center;gap:10px;background:#ffffff04;border:1px solid #ffffff10;border-radius:11px;padding:11px 12px}.search svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.7;flex:none}input{min-width:0;color:#f4f2f8;background:transparent;border:0;outline:none}.search input{width:100%;font-size:13px}input::placeholder{color:#7f7e90}.list-heading{display:flex;justify-content:space-between;color:#747486;font-size:10px;letter-spacing:1.2px;padding:22px 7px 11px}.player-list{min-height:85px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#41404e transparent;max-height:450px}.player-row{width:100%;display:flex;align-items:center;gap:10px;border:0;background:none;padding:11px 8px;text-align:left;border-radius:9px;font-size:12px}.player-row.selected{background:#e3b3ef12;color:#f0c6fb}.player-row .name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.player-row .id{color:var(--muted);font-size:11px}.legend-dot{display:inline-block;width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#e3b3ef}.legend-dot.self{background:#9cf4cc}.panel-bottom{border-top:1px solid var(--line);margin-top:15px;display:flex;align-items:center;gap:6px;padding:16px 0;color:var(--muted);font-size:10px}.panel-bottom .self{margin-left:auto}.empty{font-size:12px;color:var(--muted);padding:14px 8px;line-height:1.6}.map-tools{position:fixed;right:24px;top:98px;display:flex;flex-direction:column;gap:7px;z-index:850;padding:7px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px #0003}.icon-button{width:40px;height:40px;font-size:24px;border:0;background:transparent;pointer-events:auto}.map-tools span{height:1px;background:var(--line);margin:2px 6px}#labels{font-size:14px}#labels[aria-pressed=true]{color:var(--accent);background:#e3b3ef10}.follow{position:fixed;bottom:58px;left:50%;transform:translateX(-50%);z-index:850;display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid #e3b3ef40;border-radius:12px;padding:9px 10px 9px 15px;font-size:12px;max-width:80vw}.follow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.follow button{background:none;font-size:20px;border:0}footer{position:fixed;bottom:0;left:0;right:0;padding:13px 24px;display:flex;justify-content:space-between;z-index:800;background:linear-gradient(transparent,#080c14c9);color:#dadde5;font-size:10px;letter-spacing:1px;pointer-events:none}.footer-right{display:flex;gap:14px;letter-spacing:0}footer a{pointer-events:auto;color:#afb5c1}.leaflet-container{font:inherit}.leaflet-tooltip.player-label{border:0;box-shadow:0 2px 8px #0003;border-radius:5px;padding:3px 6px;background:#12141de8;color:#f4edf6;font-size:10px}.leaflet-tooltip.player-label:before{display:none}.hide-labels .player-label{display:none}.leaflet-control-attribution{display:none}.leaflet-control-scale{margin-bottom:48px!important;margin-left:24px!important}.leaflet-control-scale-line{background:#15161eca;color:#ddd;border-color:#b1b2bf;font-size:10px;box-shadow:none}.welcome{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:24px;background:#0b101b80;backdrop-filter:blur(5px)}.welcome-card{width:440px;max-width:100%;padding:36px;border-radius:24px;background:#15161ef5;border:1px solid #ffffff14;box-shadow:0 30px 100px #0006}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--accent)}h2{font-size:35px;line-height:1.15;letter-spacing:-1px;margin:23px 0 16px}h2 span{color:var(--accent)}.welcome p{font-size:13px;color:#aaa8b9;line-height:1.7}.welcome form{margin-top:26px;display:flex;flex-direction:column;gap:10px}.welcome label{font-size:11px;color:#b2aebb}.welcome input{width:100%;padding:14px;border:1px solid #ffffff18;border-radius:10px;background:#ffffff04;font-size:13px}.welcome button{padding:13px 16px;background:var(--accent);color:#231529;font-weight:600;border:0;display:flex;justify-content:space-between}.welcome small{font-size:11px;color:#848194;display:block;margin-top:20px}.welcome #join-error{color:#ffb3bc;margin:0}.notice{position:fixed;z-index:900;left:50%;bottom:94px;transform:translateX(-50%);padding:13px 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:13px;max-width:90vw;text-align:center}.mobile-only{display:none}@media(max-width:650px){.topbar{left:12px;right:12px;top:max(12px,env(safe-area-inset-top));gap:8px}.brand,.status{height:48px;border-radius:12px}.brand{gap:8px;padding:0 12px}.brand strong{font-size:16px}.brand>span:last-child,.brand-divider{display:none}.brand-icon{font-size:23px}.status{font-size:11px;padding:0 10px}.mobile-only{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;width:45px;height:48px;font-size:18px}.panel{display:none;top:72px;left:12px;right:70px;width:auto;max-height:calc(100dvh - 135px);padding:19px 16px 0}.panel.open{display:flex}.map-tools{right:12px;top:78px;padding:5px;border-radius:13px}.icon-button{width:36px;height:36px}footer{padding:12px;font-size:9px}.footer-right{display:none}.follow{bottom:52px;max-width:90vw}.welcome-card{padding:27px}h2{font-size:31px}.leaflet-control-scale{margin-left:12px!important}.notice{width:max-content;max-width:90vw;bottom:100px}.player-list{max-height:calc(100dvh - 355px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}