.app-shell{display:flex;flex-direction:column;height:100dvh}.topbar{height:auto;flex:none;min-height:60px;flex-wrap:wrap;gap:8px;padding:8px 18px!important}.topbar .top-status{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:7px!important;margin-left:auto;width:auto}.topbar .brand-lockup{flex:none}.topbar .network-readout{display:none!important}
.game-layout{flex:1;height:auto;min-height:0}.rink-column,.arena-wrap{height:100%;min-height:0}.topbar .performance-hud{margin-left:4px;padding:0 0 0 10px;gap:8px;flex-direction:row}.topbar .performance-hud canvas{width:96px;height:28px}.topbar .performance-values{display:grid;gap:0;min-width:57px;font-size:12px}.topbar .performance-values strong{font-size:13px}
.controls-dialog{box-sizing:border-box;width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #52677d;border-top:4px solid #eda54f;background:#101f30;color:#f5f7fa;font-family:system-ui;box-shadow:0 30px 100px #0009;overflow:auto}.controls-dialog::backdrop{background:#050d19bd;backdrop-filter:blur(5px)}.controls-dialog>header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:22px 26px;background:#142a40;position:sticky;top:0;z-index:2;border-bottom:1px solid #ffffff20}.controls-dialog small{color:#f6bc75;font-size:12px;font-weight:800;letter-spacing:1.4px}.controls-dialog h2{font-size:30px;font-style:italic;line-height:1.1;margin:7px 0}.controls-dialog p{font-size:15px;color:#cedce8;line-height:1.6;margin:8px 0 0}.controls-dialog button{padding:12px 16px;flex:none;background:#edac5c;color:#102338;border:0;font:850 14px system-ui;cursor:pointer}.controls-dialog button:focus-visible{outline:3px solid white;outline-offset:3px}
.controls-guide{padding:22px 26px}.controls-guide .ribbon-label{display:block;background:none;color:#eab16a;padding:0;margin-bottom:16px;font:800 12px system-ui;clip-path:none}.controls-guide .ribbon-label span{display:inline;margin-left:12px;max-width:none;color:#dae4ec;font:800 12px system-ui}.controls-guide .control-ribbon{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;white-space:normal;overflow:visible;padding:0;margin-bottom:20px;font:650 15px/1.5 system-ui}.controls-guide .control-ribbon h3{grid-column:1/-1;font-size:13px;letter-spacing:1.5px;color:#f6bc75;margin:0;padding:9px 0;border-bottom:1px solid #fff3}.controls-guide .control-ribbon>span{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #ffffff10;min-width:0}.controls-guide kbd{flex:none;min-width:65px;box-sizing:border-box;padding:4px 8px;background:#253b50;border:1px solid #74889b;border-bottom-width:3px;color:white;font:800 13px system-ui;text-align:center}.controls-guide .controller-ribbon{display:none!important}html[data-input="gamepad"] .controls-guide .control-ribbon:not(.controller-ribbon){display:none!important}html[data-input="gamepad"] .controls-guide .controller-ribbon{display:grid!important}.controls-guide .controller-ribbon .pad-face{min-width:34px;width:auto;height:auto}.controls-guide .controls-tip{border-top:1px solid #ffffff26;padding-top:15px}
@media(max-width:1100px){.topbar .brand-kicker{display:none}.topbar .brand-name{font-size:18px}.topbar .sound-button{font-size:12px!important;padding:8px!important}.topbar .camera-tools summary{font-size:12px;padding:8px}.topbar .network-monogram{width:36px;font-size:36px}.topbar .performance-hud canvas{width:80px}}
@media(max-width:700px){.topbar{padding:8px 10px!important}.topbar .top-status{width:100%;justify-content:flex-start}.topbar .performance-hud{margin-left:auto}.controls-dialog>header{padding:16px;gap:10px}.controls-dialog h2{font-size:24px}.controls-dialog button{padding:10px;font-size:12px}.controls-guide{padding:16px}.controls-guide .control-ribbon{grid-template-columns:1fr}.controls-dialog p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.controls-dialog::backdrop{backdrop-filter:none}}