/* Four selected materials for independently styled live training elements.
   Pause and result pages use their original styles.css rules and DOM flow. */
.hud-surface{position:absolute;inset:0;z-index:24;pointer-events:none}
.hud-node{--hud-panel-rgb:16,33,42;--hud-panel-alpha:.34;--hud-accent:#d6eff5;--hud-radius:7px;--hud-border-alpha:.33;--hud-ink:#edf3f8;--hud-muted:#d2e0e8;--hud-edge-rgb:211,226,240;position:absolute;z-index:1;width:max-content;height:max-content;transform-origin:0 0;pointer-events:none}
.hud-node,.hud-counter-material:where([data-hud-material]),.hud-material-chip{--hud-surface:linear-gradient(145deg,rgba(255,255,255,calc(var(--hud-panel-alpha)*.055)),rgba(255,255,255,0) 65%),linear-gradient(rgba(var(--hud-panel-rgb),var(--hud-panel-alpha)),rgba(var(--hud-panel-rgb),var(--hud-panel-alpha)));--hud-rule:rgba(var(--hud-edge-rgb),var(--hud-border-alpha));--hud-divider:var(--hud-rule);--hud-shadow:0 5px 17px rgba(0,0,0,calc(var(--hud-panel-alpha)*.13)),inset 0 1px 0 rgba(255,255,255,calc(var(--hud-panel-alpha)*.035));--hud-backdrop:none;--hud-text-shadow:none}
[data-hud-material=smoke]{--hud-surface:linear-gradient(125deg,rgba(255,255,255,calc(var(--hud-panel-alpha)*.4)),transparent 47%,rgba(255,255,255,calc(var(--hud-panel-alpha)*.07))),linear-gradient(rgba(var(--hud-panel-rgb),var(--hud-panel-alpha)),rgba(var(--hud-panel-rgb),var(--hud-panel-alpha)));--hud-shadow:0 7px 22px rgba(17,33,43,calc(var(--hud-panel-alpha)*.38)),inset 0 1px 0 rgba(255,255,255,calc(var(--hud-panel-alpha)*.8));--hud-backdrop:blur(calc(var(--hud-panel-alpha)*35px)) saturate(calc(1 + var(--hud-panel-alpha)*.235))}
[data-hud-material=porcelain]{--hud-surface:radial-gradient(ellipse at 8% 0,rgba(255,255,255,calc(var(--hud-panel-alpha)*.9)),transparent 65%),linear-gradient(150deg,rgba(var(--hud-panel-rgb),var(--hud-panel-alpha)),rgba(var(--hud-panel-rgb),var(--hud-panel-alpha)));--hud-rule:rgba(255,255,255,var(--hud-border-alpha));--hud-divider:rgba(var(--hud-edge-rgb),calc(var(--hud-border-alpha)*.3));--hud-shadow:0 5px 14px rgba(70,82,71,calc(var(--hud-panel-alpha)*.12)),inset 0 1px 0 rgba(255,255,255,var(--hud-panel-alpha)),inset 0 -1px 1px rgba(185,187,174,calc(var(--hud-panel-alpha)*.6))}
[data-hud-material=film]{--hud-surface:linear-gradient(120deg,rgba(255,255,255,calc(var(--hud-panel-alpha)*.22)),rgba(255,255,255,calc(var(--hud-panel-alpha)*.04))),linear-gradient(120deg,rgba(var(--hud-panel-rgb),calc(var(--hud-panel-alpha)*.7)),rgba(var(--hud-panel-rgb),calc(var(--hud-panel-alpha)*1.2)));--hud-shadow:0 2px 9px rgba(18,43,52,calc(var(--hud-panel-alpha)*.4)),inset 0 1px 0 rgba(255,255,255,calc(var(--hud-panel-alpha)*.5));--hud-text-shadow:0 1px 2px #102938,0 0 6px #102938a6}
.game.hud-enabled{min-height:0;height:100dvh}
.game.hud-enabled>.game-header,.game.hud-enabled>.game-footer{visibility:hidden;pointer-events:none}
.game.hud-enabled .hud-node>*{position:relative;inset:auto;margin:0;transform:none;animation:none;box-sizing:border-box}
.game.hud-enabled .hud-node[data-layout-hidden="true"]{display:none}
.game.hud-enabled .hud-node>.hud-widget{color:var(--hud-ink);background:var(--hud-surface);border:1px solid var(--hud-rule);border-top-color:var(--hud-topline,var(--hud-rule));border-radius:var(--hud-radius);box-shadow:var(--hud-shadow);font-family:Inter,"Microsoft YaHei",sans-serif;backdrop-filter:var(--hud-backdrop);-webkit-backdrop-filter:var(--hud-backdrop);text-shadow:var(--hud-text-shadow)}
.game.hud-enabled.battle-active .hud-node>:is(.hud-left,.hud-center,.hud-right,.streak,.game-brand,.game-protocol){display:none}
.game.hud-enabled .hud-node>:is(.game-brand,.game-protocol,#exitButton){pointer-events:auto}
.game.hud-enabled .game-brand{height:38px;padding:0 13px;font-size:10px;letter-spacing:1px}
.game.hud-enabled .game-brand svg{width:17px;height:17px;color:var(--hud-accent)}
.game.hud-enabled .game-protocol{display:flex;height:32px;gap:9px;padding:0 11px;max-width:80vw}
.game.hud-enabled .game-protocol small{font-size:8px;color:var(--hud-muted)}
.game.hud-enabled .game-protocol strong{font-size:10px;color:var(--hud-ink)}
.game.hud-enabled .game-scene-label{color:var(--hud-muted);background:transparent;border-color:var(--hud-rule)}
.game.hud-enabled #exitButton{height:38px;padding:0 15px;font-size:10px;cursor:pointer;color:var(--hud-muted)}
.game.hud-enabled .hud{display:block;width:172px;height:90px;min-height:90px;padding:12px 14px;text-align:left}
.game.hud-enabled .hud span{display:flex;align-items:center;gap:6px;font-size:8px;letter-spacing:.8px;color:var(--hud-muted)}
.game.hud-enabled .hud span:before{content:'';width:3px;height:3px;border-radius:1px;background:var(--hud-accent);opacity:.8}
.game.hud-enabled :is(.hud,.hud-fps) strong{display:block;margin-top:5px;color:var(--hud-ink);font:500 27px/1.1 Bahnschrift,"Arial Narrow",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.5px;text-shadow:var(--hud-text-shadow)}
.game.hud-enabled :is(.hud,.hud-fps) small{display:block;position:static;margin-top:7px;color:var(--hud-muted);font-size:8px;opacity:.78}
.game.hud-enabled .streak{display:flex;align-items:center;gap:13px;min-height:36px;padding:9px 13px}
.game.hud-enabled .streak span{color:var(--hud-muted);font-size:8px;letter-spacing:.5px}
.game.hud-enabled .streak strong{color:var(--hud-ink);font:500 19px Bahnschrift,sans-serif}
.game.hud-enabled .hud-fps{min-width:90px;padding:10px 13px;text-align:left}
.game.hud-enabled .hud-fps span{font-size:8px;color:var(--hud-muted);letter-spacing:1px}
.game.hud-enabled .hud-fps strong{font-size:21px;margin-top:4px}
.game.hud-enabled .hud-info{display:block;max-width:92vw;padding:4px 8px;font-size:8px;letter-spacing:.2px;color:var(--hud-muted)}
.game.hud-enabled #weaponCounterHud{max-width:none}
.game.hud-enabled .battle-bar{max-width:none;width:max-content;height:48px}
.game.hud-enabled .battle-bar :is(strong,b){color:var(--hud-ink);text-shadow:var(--hud-text-shadow)}
.game.hud-enabled .battle-bar :is(small,span){color:var(--hud-muted)}
.game.hud-enabled .battle-bar .battle-bar-tag{color:var(--hud-muted)!important}
.game.hud-enabled .tracking-progress{width:200px;max-width:90vw;height:26px;overflow:hidden}
.game.hud-enabled .tracking-progress i{background:var(--hud-accent);opacity:.25}
.game.hud-enabled .tracking-progress span{color:var(--hud-ink);font:10px Inter,"Microsoft YaHei",sans-serif;text-shadow:var(--hud-text-shadow)}
.game.hud-enabled .hud-node .countdown-number{width:100px;height:100px;display:grid;place-items:center;border:1px solid var(--hud-rule);border-radius:var(--hud-radius);background:var(--hud-surface);box-shadow:var(--hud-shadow);color:var(--hud-ink);font:500 40px Bahnschrift,sans-serif;backdrop-filter:var(--hud-backdrop);-webkit-backdrop-filter:var(--hud-backdrop);text-shadow:var(--hud-text-shadow)}
.game.hud-enabled .countdown>.hud-node>div{padding:0;background:transparent;border:0;box-shadow:none;text-align:center}
/* Counter layouts inherit the selected element material from their wrapper. */
.hud-counter-material:is(.weapon-counter,.counter-candidate){--counter-ink:var(--hud-ink);--counter-muted:var(--hud-muted);--ink:var(--hud-ink);background:var(--hud-surface)!important;color:var(--hud-ink);border:1px solid var(--hud-rule)!important;border-radius:var(--hud-radius)!important;box-shadow:var(--hud-shadow)!important;clip-path:none;backdrop-filter:var(--hud-backdrop);-webkit-backdrop-filter:var(--hud-backdrop);text-shadow:var(--hud-text-shadow,none)!important}
.hud-counter-material:is(.weapon-counter,.counter-candidate):before,.hud-counter-material:is(.weapon-counter,.counter-candidate):after{display:none}
.hud-counter-material:is(.weapon-counter,.counter-candidate){border-top-color:var(--hud-topline,var(--hud-rule))!important}
.hud-counter-material[class] :is(.weapon-counter-heading,.weapon-counter-finish>span,.weapon-counter-session,.label,.finish,.family,.run,.g-saved,.j-bar,.j-foot,.counter-archive-top,.counter-archive-code){color:var(--hud-muted)}
.hud-counter-material[class] :is(.weapon-counter-value,.weapon-counter-finish>strong,.weapon-counter-session b,.num,.j-body,.j-number,.run b){color:var(--hud-ink);text-shadow:var(--hud-text-shadow,none)!important}
.hud-counter-material[class] :is(.weapon-counter-foot,.counter-archive-top,.counter-archive-code,.g-top,.g-foot,.j-bar,.j-foot){border-color:var(--hud-divider,var(--hud-rule));background:transparent}
.hud-counter-material[class] .zero{opacity:.25}
.hud-counter-material[class] .j-cursor{color:var(--hud-accent)}
.hud-counter-material[class] :is(.g-saved,.weapon-counter-session){color:var(--hud-muted)}
@media(max-width:1099px){.game.hud-enabled .hud{width:110px;height:80px;min-height:80px;padding:9px 10px}.game.hud-enabled .hud strong{font-size:23px}.game.hud-enabled .hud-info{font-size:7px}.game.hud-enabled .game-protocol{height:28px}}

/* Settings offer one clear entry into the actual layout workspace. */
.hud-settings-lead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 20px;background:#f4f8fa;border:1px solid #e0e9ed;border-radius:10px;margin-bottom:20px}
.hud-settings-lead strong{display:block;color:#405c6b;font-size:13px;font-weight:600}.hud-settings-lead small{display:block;color:#8b9fa9;font-size:10px;margin-top:8px;line-height:1.7}
#editGameHud{flex:none;border:0;border-radius:6px;padding:12px 18px;background:#13a7b9;color:#fff;font-size:11px;cursor:pointer}
#hudSaveStatus{font-size:10px;line-height:1.8;color:#ac6759}

/* Edit the actual scene without starting a training run. */
.game.hud-editing{cursor:default}.game.hud-editing .range{cursor:default}.game.hud-editing .hud-node{pointer-events:auto;cursor:grab;touch-action:none;user-select:none;outline:1px dashed #ffffff55;outline-offset:4px;min-width:16px;min-height:16px}
.game.hud-editing .hud-node>*{pointer-events:none!important}.game.hud-editing .hud-node:active{cursor:grabbing}.game.hud-editing .hud-node[data-locked="true"]{cursor:default;outline-style:dotted}
.game.hud-editing .hud-node.hud-selected{outline:2px solid #4ce0e6;z-index:5}
.game.hud-editing .hud-node:before{content:attr(data-label);position:absolute;bottom:calc(100% + 7px);left:0;max-width:220px;white-space:nowrap;color:#daffff;background:#133840e6;padding:3px 6px;border-radius:3px;font:9px Inter,"Microsoft YaHei",sans-serif;opacity:0;pointer-events:none}
.game.hud-editing .hud-selected:before{opacity:1}.game.hud-editing .hud-node[data-layout-hidden="true"]{display:block!important}
.game.hud-editing .hud-node> :is(#weaponCounterHud,#trackingProgress,#battleBar).hidden{display:block!important}.game.hud-editing .hud-node>#battleBar.hidden{display:flex!important}
.game.hud-editing:not([data-editor-element="battle"]) [data-hud-element="battle"],.game.hud-editing:not([data-editor-element="tracking"]) [data-hud-element="tracking"]{display:none!important}
.game.hud-editing .screen-layer{display:none!important;pointer-events:none;overflow:hidden;background:#0a111b50}
.game.hud-editing[data-editor-screen="countdown"] #countdown{display:block!important}
.hud-editor[hidden]{display:none!important}.hud-editor{position:absolute;inset:0;z-index:70;pointer-events:none;color:#e1edf3;color-scheme:dark;font-family:Inter,"Microsoft YaHei",sans-serif}
.hud-editor-bar{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;pointer-events:auto;max-width:calc(100vw - 26px);width:max-content;padding:12px 15px;background:#111c28f5;border:1px solid #758da044;border-radius:11px;box-shadow:0 12px 40px #0005}
.hud-editor-bar>div{padding-right:20px}.hud-editor-bar small{display:block;color:#638694;font:8px Consolas,monospace;letter-spacing:1.3px}.hud-editor-bar strong{display:block;font-size:13px;font-weight:500;white-space:nowrap;margin-top:4px}.hud-editor-bar strong span{font-size:10px;font-weight:400;color:#8dabb9;margin-left:13px}
.hud-editor button{border:1px solid #60788d45;border-radius:5px;background:#ffffff08;color:#b8cdd8;padding:8px 10px;font:10px Inter,"Microsoft YaHei",sans-serif;cursor:pointer;white-space:nowrap}
.hud-editor button:disabled{opacity:.35;cursor:default}.hud-editor button:hover:not(:disabled){background:#ffffff14}.hud-editor button.hud-editor-primary{background:#28b8c7;color:#092833;border-color:#28b8c7;font-weight:600}
.hud-editor-panel{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:267px;max-height:calc(100dvh - 150px);overflow:auto;padding:18px;pointer-events:auto;background:#111c28f5;border:1px solid #758da044;border-radius:11px;box-shadow:0 12px 40px #0004}
.hud-editor-panel>header{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px}.hud-editor-panel>header small{color:#6c899a;font-size:9px}
.hud-editor-panel select{height:36px;padding:0 10px;width:100%;border:1px solid #48617466;border-radius:5px;background:#1a2937;color:#d9e7ee;font:12px Inter,"Microsoft YaHei",sans-serif}
.hud-editor-tip{color:#7391a2;font-size:9px;line-height:1.8;margin:12px 0}.hud-editor-coordinates{display:flex;gap:10px}.hud-editor-coordinates label{display:flex;align-items:center;gap:8px;min-width:0;font:10px Consolas,monospace;color:#8ba5b6}.hud-editor-coordinates input{min-width:0;width:69px;height:31px;border:1px solid #48617466;border-radius:4px;background:#0d1722;color:#d9edf8;padding:0 8px;font:11px Consolas,monospace}
.hud-editor-align{display:flex;gap:8px;margin:10px 0 19px}.hud-editor-align button{flex:1;font-size:9px;padding:6px}
.hud-editor-slider{display:grid;grid-template-columns:1fr auto;gap:12px 8px;margin:17px 0;color:#9db6c4;font-size:10px}.hud-editor-slider output{font:11px Consolas,monospace;color:#c3e8ee}.hud-editor-slider input{grid-column:1/-1;width:100%;accent-color:#2fc9d3;height:3px;cursor:pointer}
.hud-editor-toggles{display:flex;gap:17px;padding-top:8px}.hud-editor-toggles label{display:flex;gap:5px;align-items:center;color:#8ba8b8;font-size:10px}.hud-editor-toggles input{accent-color:#2fc9d3}
.hud-editor-history{display:flex;gap:6px;justify-content:space-between;margin:13px 0}.hud-editor-history button{font-size:9px;padding:7px 8px}.hud-editor details{border-top:1px solid #48617440;padding-top:13px}.hud-editor summary{cursor:pointer;color:#658596;font-size:9px}.hud-editor details button{margin-top:12px;width:100%;color:#b39483}
.hud-editor-bottom{position:absolute;left:20px;bottom:6px;right:20px;display:flex;justify-content:space-between;font-size:8px;color:#bed4e0aa;text-shadow:0 1px 3px #000}
.hud-editor-restore{display:none;position:absolute;right:18px;bottom:18px;pointer-events:auto;background:#111c28f5!important}.hud-editor-collapsed :is(.hud-editor-bar,.hud-editor-panel,.hud-editor-bottom){display:none}.hud-editor-collapsed .hud-editor-restore{display:block}
.hud-editor-guide{position:absolute;display:none;background:#4de3eb88;pointer-events:none}.hud-guide-x{top:0;bottom:0;left:var(--hud-guide-x,50%);width:1px}.hud-guide-y{left:0;right:0;top:var(--hud-guide-y,50%);height:1px}.hud-snapped-x .hud-guide-x,.hud-snapped-y .hud-guide-y{display:block}
.hud-editor :is(input,select,button,summary):focus-visible{outline:2px solid #3bd4df;outline-offset:3px}

.hud-editor [hidden]{display:none!important}
.hud-inspector-tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;margin-top:14px;border:1px solid #48617440;background:#0d1822;border-radius:6px}
.hud-editor .hud-inspector-tabs button{border:0;background:transparent;color:#6f8a9b;font-size:10px;padding:7px}
.hud-editor .hud-inspector-tabs button[aria-selected="true"]{background:#263b4a;color:#d3e6ed;box-shadow:0 1px 3px #0002}
/* The material picker changes only the currently selected element. */
.hud-material-picker{padding:15px 0 14px;margin-bottom:8px;border-bottom:1px solid #48617440}
.hud-material-heading strong{display:block;color:#d2dfe6;font-size:10px;font-weight:500}.hud-material-heading small{display:block;color:#668596;font-size:8px;line-height:1.8;margin-top:5px}
.hud-material-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.hud-editor .hud-material-options button{display:grid;grid-template-columns:19px minmax(0,1fr);align-items:center;gap:3px 7px;position:relative;text-align:left;min-width:0;padding:9px 7px;background:#0d182266;border:1px solid #48617455;border-radius:6px;color:#8da6b5}
.hud-material-options button>span{font-size:9px;white-space:normal;line-height:1.45}.hud-material-options button>small{grid-column:2;font:7px Consolas,monospace;color:#587384}.hud-editor .hud-material-options button[aria-pressed=true]{color:#d4f3f4;border-color:#41cbd28f;background:#24465155;box-shadow:inset 0 0 0 1px #4ed7de0c}.hud-material-options button[aria-pressed=true]>small{color:#62a5af}
.hud-editor .hud-material-options button[data-hud-material-choice=original]{grid-column:1/-1;grid-template-columns:19px minmax(0,1fr) auto;column-gap:9px}
.hud-material-options button[data-hud-material-choice=original]>small{grid-column:3;grid-row:1;font-size:8px}.hud-material-options button[data-hud-material-choice=original]>.hud-material-chip{grid-row:1}
.hud-material-chip[data-hud-material=original]{background:linear-gradient(140deg,#f6f1e4 50%,#203240 50%);border-color:#b1c4cb66}
.hud-material-chip{--hud-panel-rgb:28,37,47;--hud-panel-alpha:.82;--hud-edge-rgb:211,226,240;--hud-border-alpha:.18;display:block;grid-row:1/3;width:19px;height:26px;flex:none;border:1px solid var(--hud-rule);border-radius:5px;background:var(--hud-surface);box-shadow:var(--hud-shadow)}
.hud-material-chip[data-hud-material=smoke]{--hud-panel-rgb:16,33,42;--hud-panel-alpha:.34;--hud-border-alpha:.33;background-color:#5f7c8b}
.hud-material-chip[data-hud-material=porcelain]{--hud-panel-rgb:232,231,220;--hud-panel-alpha:1;--hud-border-alpha:.8}
.hud-material-chip[data-hud-material=film]{--hud-panel-rgb:12,32,38;--hud-panel-alpha:.18;--hud-border-alpha:.58;background-color:#4b6775}
.hud-appearance-color{display:flex;align-items:center;justify-content:space-between;margin:14px 0;color:#9db6c4;font-size:10px}
.hud-appearance-color input[type=color]{height:27px;width:35px;padding:2px;border:1px solid #48617466;border-radius:5px;background:#0c1721;cursor:pointer}
.hud-editor .hud-reset-appearance{width:100%;font-size:9px;padding:8px;margin-top:4px;color:#88a2b3}
@media(max-width:760px){#settingsPage .settings-sidebar{grid-template-columns:repeat(3,minmax(0,1fr))}.hud-settings-lead{padding:17px;gap:16px;align-items:flex-start;flex-direction:column}#editGameHud{width:100%}.hud-editor-bar{bottom:18px;width:calc(100vw - 20px);padding:9px;gap:5px}.hud-editor-bar>div{flex:1;padding-right:3px}.hud-editor-bar small{font-size:6px}.hud-editor-bar strong{font-size:11px}.hud-editor-bar strong span{display:none}.hud-editor-bar button{font-size:9px;padding:8px}.hud-editor-panel{right:10px;width:238px;top:50%;padding:15px;max-height:calc(100dvh - 120px)}.hud-editor-bottom{display:none}.hud-editor-restore{bottom:10px;right:10px}}
