.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}}
.pause-notice{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;max-width:calc(100vw - 32px);width:max-content;box-sizing:border-box;padding:12px 18px;background:#102337ed;border-left:3px solid #edac5c;color:#fff;font:650 14px/1.5 system-ui;box-shadow:0 6px 24px #0005;pointer-events:none}.pause-notice[hidden]{display:none}.pause-setting{display:flex;gap:12px;align-items:flex-start;padding:14px;margin-bottom:22px;border:1px solid #7890a04d;background:#1c3449;color:#fff;font:750 16px/1.4 system-ui}.pause-setting input{width:20px;height:20px;flex:none;accent-color:#edac5c;margin:2px 0}.pause-setting small{display:block;margin-top:5px;color:#c4d5e3;font:500 13px/1.5 system-ui;letter-spacing:0}
.controls-dialog[data-mode="settings"] .controls-guide,.controls-dialog[data-mode="controls"] .settings-guide{display:none}
.settings-guide{padding:22px 26px 0}.sound-setting{align-items:center;justify-content:space-between}.sound-setting span{font-weight:750}.sound-setting small{display:block;margin-top:3px;font-weight:500;color:#b7cbd9}.sound-setting .sound-button{flex:none;padding:10px 14px;font:800 13px system-ui;letter-spacing:.4px}
.pause-restart{display:block;width:100%;box-sizing:border-box;margin:14px 0 0;padding:11px;border:1px solid #7890a066;background:transparent;color:#dce7ef;font:800 13px system-ui;letter-spacing:1px;cursor:pointer}.pause-restart:hover,.pause-restart:focus-visible{background:#ffffff14;border-color:#eea249}
.pause-overlay[data-reason="final"] .pause-restart{display:none}
@media(max-width:700px){.settings-guide{padding:16px 16px 0}}
.pause-card{position:relative}.pause-controls{position:absolute;top:12px;right:12px;padding:8px 12px;border:1px solid #7890a066;background:transparent;color:#dce7ef;font:800 12px system-ui;letter-spacing:1px;cursor:pointer}.pause-controls:hover,.pause-controls:focus-visible{background:#ffffff14;border-color:#eea249}
/* The dialog's filled buttons keep dark text, including Sound while it is off. */
.controls-dialog button.sound-button{color:#102338}