:root{color-scheme:dark;--amber:#ffd393;--ink:#f7efe4;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;background:#090a0c;color:var(--ink);font-family:'Gilroy',system-ui,sans-serif}
a{color:inherit;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lobby-header{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 32px 50px;background:linear-gradient(#05080de8,transparent);pointer-events:none}
.lobby-header nav{display:flex;align-items:center;gap:14px;font-size:14px;text-shadow:0 2px 6px #000}
.lobby-header a{display:flex;align-items:center;min-height:44px;pointer-events:auto}
.lobby-header a:hover{color:var(--amber)}
.lobby-header nav>span{color:#d2c4b5}
.lobby-brand{font-size:14px;letter-spacing:.16em;white-space:nowrap}.lobby-brand b{color:var(--amber)}
.lobby{position:relative;min-height:400px;height:100svh;overflow:hidden;isolation:isolate}
/* Artwork and hotspot share one coordinate plane, including on portrait screens. */
.lobby-world{position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * 1.791666667));aspect-ratio:11008/6144;transform:translate(-50%,-50%)}
.lobby-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
.command-hotspot{position:absolute;left:60%;top:36.5%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:18px;padding:18px;min-width:44px;min-height:44px;outline-offset:6px;border-radius:10px}
.hotspot-target{position:relative;display:grid;place-items:center;width:62px;height:62px;border:1px solid #ffd393aa;border-radius:50%;background:#09172466;box-shadow:0 0 26px #ffb75238,inset 0 0 18px #ffcf7220;color:var(--amber);transition:background .2s,box-shadow .2s}
.hotspot-target::before{content:"";position:absolute;inset:-9px;border:1px solid #ffd39380;border-radius:50%;animation:signal 3s ease-out infinite;pointer-events:none}
.hotspot-target>span{font:32px/1 var(--mono);font-weight:200}
.hotspot-label{display:flex;align-items:center;gap:16px;padding:15px 20px;white-space:nowrap;border:1px solid #d5a765aa;border-radius:6px;background:#091522ed;box-shadow:0 8px 32px #0009;color:#ffe2b6;font-size:18px;font-weight:700;transition:border-color .2s,background .2s}
.command-hotspot:hover .hotspot-label,.command-hotspot:focus-visible .hotspot-label{background:#143047;border-color:var(--amber)}
.command-hotspot:hover .hotspot-target{background:#102e45bb;box-shadow:0 0 32px #ffb75266}
a:focus-visible{outline:3px solid var(--amber);outline-offset:5px}
@keyframes signal{0%{transform:scale(.9);opacity:.7}85%,100%{transform:scale(1.3);opacity:0}}
@media(max-width:650px){.lobby-world{transform:translate(-60%,-50%)}.lobby-header{padding:16px 20px 45px}.lobby-header nav{gap:10px;font-size:13px}.lobby-brand{display:none}.hotspot-label{font-size:16px;padding:14px 16px;gap:12px}.hotspot-target{width:54px;height:54px}}
@media(max-height:450px){.lobby{min-height:0}.lobby-header{padding:8px 20px 35px}.command-hotspot{gap:10px}.hotspot-target{width:44px;height:44px}.hotspot-label{padding:10px 16px;font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}