:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#07101d;--panel:#081424e0;--panel-strong:#0f213af0;--panel-border:#77afff4d;--text:#eef4ff;--muted:#8ca7c9;--accent:#f8d95c;--accent-strong:#ff8d4d;--good:#76f7b2;--danger:#ff6f7e;--shadow:0 18px 60px #00000059;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;color:var(--text);background:radial-gradient(circle at top,#5d9aff29,#0000 36%),linear-gradient(#08111f 0%,#050a13 100%);margin:0}body{overflow-x:hidden}a{color:inherit}button,input{font:inherit}button{cursor:pointer;color:var(--text);background:linear-gradient(#1d3b62f2,#102139f2);border:1px solid #ffffff1f;border-radius:14px;transition:transform .12s,filter .12s,border-color .12s}button:hover{filter:brightness(1.05);border-color:#f8d95c70}button:active,button.is-active{filter:brightness(1.12);transform:translateY(1px)scale(.99)}button:focus-visible,input:focus-visible{outline-offset:2px;outline:2px solid #f8d95ce6}.app-shell{min-height:100vh;padding:24px;position:relative}.scanlines:before{content:"";pointer-events:none;opacity:.18;mix-blend-mode:soft-light;background:linear-gradient(#ffffff08,#0000 45%) 0 0/100% 4px;position:fixed;inset:0}.layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:20px;display:grid}.stage-panel,.sidebar-panel,.controller-shell{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:24px}.stage-panel{min-height:min(78vh,860px);position:relative;overflow:hidden}.stage-header,.sidebar-header,.card,.controller-card{background:linear-gradient(#1a315275,#080f1c5c)}.stage-header,.sidebar-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;display:flex}.badge-row,.metric-grid,.roster-list,.info-grid{gap:12px;display:grid}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.badge-row{grid-template-columns:repeat(auto-fit,minmax(110px,max-content))}.card,.controller-card{border:1px solid #ffffff14;border-radius:20px;padding:16px}.badge,.status-pill,.metric{background:#ffffff08;border:1px solid #ffffff14;border-radius:999px;padding:8px 12px}.metric{border-radius:18px;padding:14px}.metric-label,.meta-label,.helper-text,.transport-note,.footer-note,.roster-meta{color:var(--muted);font-size:.92rem}.metric-value,.hero-title,.controller-title,.info-value,.code-value{font-weight:700}.hero-title,.controller-title{letter-spacing:.04em;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.6rem)}.hero-subtitle,.controller-subtitle{max-width:52ch;color:var(--muted);line-height:1.5}.canvas-wrap{min-height:640px;position:relative}.game-canvas{background:linear-gradient(#112142 0%,#08162d 100%);width:100%;min-height:640px;display:block}.minimap{background:#03070fe6;border:1px solid #ffffff14;border-radius:18px;width:100%;display:block}.canvas-overlay{pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;inset:16px}.overlay-stack{gap:10px;display:grid}.overlay-pill{pointer-events:auto;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#05091094;border:1px solid #ffffff14;border-radius:14px;padding:10px 14px}.attract-banner{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:none;background:linear-gradient(#0e1b30eb,#070e1ae6);border:1px solid #f8d95c66;border-radius:22px;gap:12px;width:min(100% - 32px,440px);padding:16px 18px;display:grid;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 20px 44px #00000061}.attract-banner[data-full=true]{border-color:#ff6f7e6b}.attract-prompt{letter-spacing:.12em;text-transform:uppercase;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;line-height:1}.attract-meta{color:var(--muted);text-transform:uppercase;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;font-size:.92rem;display:flex}.seat-indicators{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.seat-indicator{min-height:40px;color:var(--muted);letter-spacing:.04em;background:#ffffff08;border:1px solid #ffffff14;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:8px 10px;font-size:.88rem;font-weight:700;transition:background .16s,border-color .16s,box-shadow .16s,color .16s,transform .16s;display:flex}.seat-indicator[data-linked=true]{color:var(--text);background:#76f7b224;border-color:#76f7b26b;box-shadow:0 0 20px #76f7b22e}.seat-indicator[data-host=true][data-linked=true]{background:#f8d95c24;border-color:#f8d95c6b;box-shadow:0 0 20px #f8d95c29}.seat-dot{background:#8ca7c970;border-radius:999px;width:10px;height:10px;transition:background .16s,box-shadow .16s}.seat-indicator[data-linked=true] .seat-dot{background:var(--good);box-shadow:0 0 12px var(--good)}.seat-indicator[data-host=true][data-linked=true] .seat-dot{background:var(--accent);box-shadow:0 0 12px var(--accent)}.sidebar{gap:16px;display:grid}.sidebar-panel{overflow:hidden}.sidebar-body{gap:16px;padding:18px;display:grid}.join-url{word-break:break-all;color:var(--accent);font-weight:600}.code-value{letter-spacing:.16em;font-size:1.6rem}.join-steps{background:linear-gradient(#34270842,#120d0438);border-color:#f8d95c70}.steps-list{color:var(--text);gap:6px;margin:10px 0 0;padding-left:18px;display:grid}.keyboard-help{gap:12px;display:grid}.binding-grid{gap:8px;display:grid}.binding-row{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.binding-key{color:var(--accent);font-weight:700}.binding-action{color:var(--muted)}.qr-frame{background:#ffffff0a;border:1px dashed #ffffff24;border-radius:18px;place-items:center;min-height:170px;display:grid}.qr-frame canvas{max-width:100%}.roster-list{margin:0;padding:0;list-style:none}.roster-item{grid-template-columns:auto 1fr auto;align-items:center;gap:12px;display:grid}.roster-swatch{border-radius:999px;width:14px;height:14px;box-shadow:0 0 20px}.actions-row{flex-wrap:wrap;gap:10px;display:flex}.actions-row button,.text-input{min-height:44px;padding:0 14px}.text-input{width:100%;color:var(--text);background:#00000038;border:1px solid #ffffff1f;border-radius:14px}textarea.text-input.reply-code{resize:vertical;min-height:112px;padding:12px 14px;font-family:inherit;font-size:.92rem}.controller-page{place-items:center;min-height:100vh;padding:18px;display:grid}.controller-shell{width:min(100%,560px);overflow:hidden}.controller-body{gap:16px;padding:18px;display:grid}.controller-grid{grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;display:grid}.controller-cluster,.action-cluster{gap:10px;display:grid}.controller-row{justify-content:center;gap:10px;display:flex}.controller-button{border-radius:22px;min-width:72px;min-height:72px;padding:0;font-size:1.15rem;font-weight:700}.controller-button.action,.controller-button.wide{min-width:120px}.controller-status{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.status-good{color:var(--good)}.status-danger{color:var(--danger)}.status-warning{color:var(--accent-strong)}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.info-value{margin-top:6px}.hidden{display:none!important}@media (max-width:1100px){.layout{grid-template-columns:1fr}.stage-panel{min-height:auto}}@media (max-width:720px){.app-shell{padding:16px}.binding-row{flex-direction:column;align-items:flex-start;gap:2px}.attract-banner{width:min(100% - 24px,420px);padding:14px;bottom:12px}.attract-meta{flex-direction:column}.seat-indicators{grid-template-columns:repeat(2,minmax(0,1fr))}.controller-grid{grid-template-columns:1fr}.controller-button,.controller-button.action,.controller-button.wide{min-width:84px;min-height:72px}.info-grid,.metric-grid{grid-template-columns:1fr}}