:root{--bg:#0b0d10;--panel:#111419;--panel-2:#15191f;--line:#272c34;--muted:#858d98;--text:#f1f3f5;--accent:#a8ff78;--danger:#ff6b6b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"AimDigits",MiSans,"Microsoft YaHei",Arial,sans-serif}button,a{font:inherit;color:inherit}.hidden{display:none!important}button{cursor:pointer}.lobby{min-height:100vh;padding:0 6vw}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--text);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:1.6px;display:flex;align-items:center;gap:11px}.brand-mark,.game-brand>span{width:12px;height:12px;border:2px solid var(--accent);display:inline-block}.top-status{font-size:10px;color:var(--muted)}.top-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}.intro{padding:72px 0 50px;display:flex;align-items:end;justify-content:space-between}.overline{font-size:9px;color:var(--accent);letter-spacing:1.7px;font-weight:700}.intro h1{font-size:clamp(50px,6vw,84px);line-height:1.02;letter-spacing:-4px;margin:16px 0 0}.intro p{margin:0 0 8px;max-width:410px;color:var(--muted);font-size:13px;line-height:1.8}.workspace{display:grid;grid-template-columns:1fr 1.32fr .9fr;border:1px solid var(--line);min-height:410px}.panel{padding:25px;background:var(--panel);border-right:1px solid var(--line)}.panel:last-child{border:0}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;color:var(--muted);font-size:9px;letter-spacing:1.2px}.panel-title small{color:#505761}.scenario{width:100%;min-height:87px;padding:0 15px;border:1px solid transparent;border-bottom-color:var(--line);background:transparent;display:grid;grid-template-columns:32px 1fr 10px;align-items:center;text-align:left;gap:10px}.scenario:hover{background:var(--panel-2)}.scenario.active{background:var(--panel-2);border-color:#353c45}.scenario-number{font-size:9px;color:#5c6470}.scenario>span:nth-child(2){display:grid;gap:6px}.scenario strong{font-size:13px}.scenario small{font-size:9px;color:var(--muted)}.scenario i{width:6px;height:6px;border-radius:50%;background:#3c424b}.scenario.active i{background:var(--accent)}.preview-panel{background:#0e1115}.mini-range{height:275px;position:relative;overflow:hidden;background:#191e24;border:1px solid #2c323a}.mini-wall{position:absolute;inset:0 15% 27%;background:#1e242b;border:1px solid #343b44}.mini-floor{position:absolute;left:-12%;right:-12%;bottom:-20%;height:52%;background:repeating-linear-gradient(90deg,transparent 0 59px,#2e353d 60px),linear-gradient(#2e353d 1px,transparent 1px);background-size:auto,100% 42px;transform:perspective(250px) rotateX(55deg);transform-origin:top}.mini-target{position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);box-shadow:inset 0 0 0 7px #1e242b,inset 0 0 0 9px var(--accent)}.mini-target.a{left:30%;top:30%}.mini-target.b{left:55%;top:43%;width:44px;height:44px}.mini-target.c{left:70%;top:27%;width:27px;height:27px}.mini-crosshair{position:absolute;left:50%;top:49%;width:20px;height:20px;transform:translate(-50%,-50%)}.mini-crosshair:before,.mini-crosshair:after{content:"";position:absolute;background:#fff}.mini-crosshair:before{width:20px;height:1px;top:10px}.mini-crosshair:after{height:20px;width:1px;left:10px}.mini-weapon{position:absolute;width:90px;height:85px;bottom:-10px;left:50%;transform:translateX(-10%)}.mini-weapon i{position:absolute;width:65px;height:22px;background:#090b0e;top:18px;transform:skew(-8deg)}.mini-weapon b{position:absolute;width:20px;height:55px;background:#090b0e;left:35px;top:32px;transform:rotate(13deg)}.best-row{height:45px;display:flex;align-items:end;justify-content:space-between}.best-row span{font-size:9px;color:var(--muted)}.best-row strong{font-size:18px}.setting-block{padding:18px 0;border-bottom:1px solid var(--line)}.setting-block>label{display:block;font-size:9px;color:var(--muted);margin-bottom:11px}.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid #343a43;padding:3px;gap:3px}.segmented button{height:36px;border:0;background:transparent;color:var(--muted);font-size:10px}.segmented button.active{background:#30363e;color:#fff}.sound-row{display:flex;align-items:center;justify-content:space-between}.sound-row>label{margin:0}.switch{width:35px;height:19px;border:1px solid #3a414a;background:#232830;border-radius:20px;padding:2px}.switch span{display:block;width:13px;height:13px;background:#69717c;border-radius:50%;transition:.2s}.switch.active span{transform:translateX(15px);background:var(--accent)}.start-button{height:50px;background:var(--accent);color:#10150d;border:0;padding:0 16px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:space-between}.settings-panel>.start-button{width:100%;margin-top:24px}.start-button kbd{font:inherit;font-size:8px;border:1px solid rgba(0,0,0,.25);padding:4px 6px}.footer{height:85px;display:flex;align-items:center;justify-content:space-between;color:#555c65;font-size:8px;letter-spacing:1px}
.game{height:100vh;min-height:600px;background:#090b0e;display:grid;grid-template-rows:56px 1fr 28px;overflow:hidden;--accent:#a8ff78}.game-header{display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);background:#0d1014;z-index:20}.game-brand{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1.4px;font-weight:800;margin-right:auto}.game-brand>span{width:10px;height:10px}.game-protocol{display:flex;align-items:center;gap:10px;margin-right:20px}.game-protocol small{color:var(--muted);font-size:8px}.game-protocol strong{font-size:9px}.game-header button{height:100%;border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted);padding:0 20px;font-size:8px}.range{position:relative;overflow:hidden;cursor:none;background:#15191d}.room{position:absolute;inset:0;overflow:hidden}.back-wall{position:absolute;left:18%;right:18%;top:0;bottom:25%;background:#242a30;border:1px solid #353d45}.back-wall:before{content:"LINE AIM / RANGE 01";position:absolute;left:50%;top:12%;transform:translateX(-50%);color:#414850;font-size:8px;letter-spacing:3px}.wall-line{position:absolute;left:0;right:0;height:1px;background:#353d45}.wall-line.one{top:34%}.wall-line.two{top:68%}.side-wall{position:absolute;top:-10%;bottom:9%;width:35%;background:#1c2126}.side-wall.left{left:-17%;transform:skewY(18deg);border-right:1px solid #373e46}.side-wall.right{right:-17%;transform:skewY(-18deg);border-left:1px solid #373e46}.ceiling{position:absolute;left:12%;right:12%;top:-42%;height:55%;background:repeating-linear-gradient(90deg,#242a30 0 140px,#30373f 141px 142px);transform:perspective(500px) rotateX(-35deg);z-index:1}.floor{position:absolute;left:-20%;right:-20%;bottom:-78%;height:105%;background:repeating-linear-gradient(90deg,transparent 0 104px,#343b43 105px 106px),repeating-linear-gradient(0deg,#1b2025 0 75px,#343b43 76px 77px);transform:perspective(550px) rotateX(58deg);transform-origin:top;z-index:1}.range.clean-view .side-wall,.range.clean-view .ceiling,.range.clean-view .weapon{display:none}.range.clean-view .back-wall{inset:0;background:#20262c}.range.clean-view .floor{opacity:.25}.hud{position:absolute;z-index:10;top:22px;display:grid;gap:3px}.hud span,.streak span{font-size:7px;color:#89929d;letter-spacing:1px}.hud strong{font-size:24px;letter-spacing:.5px;font-variant-numeric:tabular-nums}.hud small{font-size:7px;color:#646d77}.hud-left{left:24px}.hud-center{left:50%;transform:translateX(-50%);text-align:center}.hud-right{right:24px;text-align:right}.streak{position:absolute;z-index:10;left:24px;bottom:23px;display:flex;align-items:center;gap:10px}.streak strong{font-size:16px}.target{position:absolute;z-index:6;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--accent);background:#20262c;box-shadow:0 0 0 6px #20262c,0 0 0 7px color-mix(in srgb,var(--accent) 55%,transparent);animation:targetIn .14s ease-out}.target:before{content:"";position:absolute;inset:27%;border:2px solid var(--accent);border-radius:50%}.target:after{content:"";position:absolute;width:8px;height:8px;left:calc(50% - 4px);top:calc(50% - 4px);border-radius:50%;background:var(--accent)}@keyframes targetIn{from{transform:translate(-50%,-50%) scale(.55);opacity:0}}.crosshair{position:absolute;z-index:12;width:32px;height:32px;transform:translate(-50%,-50%);pointer-events:none}.crosshair:before{content:"";position:absolute;left:15px;top:15px;width:2px;height:2px;background:#fff}.crosshair i,.crosshair b{position:absolute;background:#fff}.crosshair i{height:1px;width:32px;top:16px}.crosshair b{width:1px;height:32px;left:16px}.weapon{position:absolute;z-index:8;width:260px;height:240px;left:50%;bottom:-87px;transform:translateX(-14%);pointer-events:none;transition:transform .08s linear}.weapon-body{position:absolute;width:190px;height:66px;left:13px;top:28px;background:#0d1013;clip-path:polygon(0 20%,71% 20%,79% 0,100% 0,100% 40%,84% 55%,55% 55%,45% 100%,8% 100%);box-shadow:inset 0 -7px #080a0c}.weapon-body:before{content:"";position:absolute;width:112px;height:7px;left:29px;top:5px;background:#07090b}.weapon-body i{position:absolute;width:26px;height:10px;background:#23282e;left:70px;top:23px}.weapon-body b{position:absolute;width:4px;height:4px;background:var(--accent);left:140px;top:24px}.weapon-grip{position:absolute;width:44px;height:100px;background:#0a0c0f;left:94px;top:72px;transform:skew(-8deg);clip-path:polygon(0 0,100% 0,82% 100%,16% 100%)}.weapon-hand{position:absolute;width:95px;height:79px;border-radius:40px 30px 10px 10px;background:#24201e;left:73px;top:106px;transform:rotate(-4deg)}.screen-layer{position:absolute;inset:0;z-index:30;background:rgba(8,10,13,.82);display:grid;place-items:center;cursor:default}.countdown>div{text-align:center}.countdown span{color:var(--accent);font-size:9px;letter-spacing:2px}.countdown strong{display:block;font-size:110px;line-height:1.1}.countdown small{color:var(--muted);font-size:9px}.result-card{width:min(610px,90vw);background:#11151a;border:1px solid #353c45;padding:30px}.result-head{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line)}.result-head small{display:block;color:var(--muted);font-size:8px;margin-bottom:4px}.result-head strong{font-size:32px}.grade{width:64px;height:64px;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-size:34px;font-weight:800}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.result-metrics>div{padding:20px 0;border-right:1px solid var(--line)}.result-metrics>div:not(:first-child){padding-left:18px}.result-metrics>div:last-child{border:0}.result-metrics span{display:block;color:var(--muted);font-size:8px;margin-bottom:5px}.result-metrics strong{font-size:19px}.result-metrics small{display:block;color:#5d6670;font-size:7px;margin-top:4px}.result-actions{display:flex;gap:10px;margin-top:22px}.result-actions .start-button{width:170px}.plain-button{border:1px solid #343b44;background:transparent;color:var(--muted);padding:0 18px;font-size:9px}.game-footer{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-top:1px solid var(--line);background:#0d1014;color:#59616a;font-size:7px;letter-spacing:.7px}
@media(max-width:900px){.intro{align-items:start;gap:30px}.workspace{grid-template-columns:1fr 1fr}.settings-panel{grid-column:1/-1;border-top:1px solid var(--line)}.preview-panel{border-right:0}}@media(max-width:620px){.lobby{padding:0 20px}.intro{display:block;padding-top:55px}.intro h1{font-size:52px;letter-spacing:-3px}.intro p{margin-top:25px}.workspace{grid-template-columns:1fr}.panel{border-right:0;border-bottom:1px solid var(--line)}.preview-panel{display:none}.settings-panel{grid-column:auto}.game-protocol{display:none}.hud strong{font-size:18px}.result-card{padding:22px}.result-metrics strong{font-size:16px}}

/* 真实 WebGL 第一人称训练场 */
.range{background:#101419}.webgl-viewport{position:absolute;inset:0;z-index:1}.webgl-viewport canvas{display:block;width:100%;height:100%}.crosshair{left:50%;top:50%;width:24px;height:24px}.crosshair:before{left:11px;top:11px;background:var(--accent)}.crosshair i{width:24px;top:12px}.crosshair b{height:24px;left:12px}.crosshair{transition:transform .07s ease-out}.crosshair.kick{transform:translate(-50%,-50%) scale(1.35)}.pointer-prompt>div{text-align:center}.pointer-prompt span{color:var(--accent);font-size:9px;letter-spacing:2px}.pointer-prompt strong{display:block;font-size:28px;margin:10px 0 14px}.pointer-prompt small{color:var(--muted);font-size:9px}.hud,.streak,.crosshair{z-index:12}.screen-layer{z-index:30}
.sensitivity-control{display:grid;grid-template-columns:1fr 46px;align-items:center;gap:12px}.sensitivity-control input{width:100%;height:20px;margin:0;appearance:none;background:transparent}.sensitivity-control input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--accent) 0 var(--slider-fill,29%),#343a43 var(--slider-fill,29%) 100%)}.sensitivity-control input::-webkit-slider-thumb{appearance:none;width:15px;height:15px;margin-top:-6px;border-radius:50%;border:3px solid var(--panel);background:var(--accent);box-shadow:0 0 0 1px #5b636d}.sensitivity-control input::-moz-range-track{height:3px;background:#343a43}.sensitivity-control input::-moz-range-progress{height:3px;background:var(--accent)}.sensitivity-control input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;border:3px solid var(--panel);background:var(--accent)}.sensitivity-control output{height:31px;display:grid;place-items:center;border:1px solid #343a43;background:#0d1014;color:#fff;font-size:10px;font-variant-numeric:tabular-nums}
.scenario-number{display:none}.scenario{grid-template-columns:1fr 10px}.intro h1{letter-spacing:-3px}.overline{letter-spacing:.4px;color:#9ca4ae;font-weight:500}

/* 主页：轻量训练面板 */
.dashboard{min-height:100vh;padding:0;background:#f6f7f8;color:#17191c}.dash-nav{height:68px;padding:0 max(24px,calc((100vw - 1120px)/2));display:flex;align-items:center;gap:38px;background:#fff;border-bottom:1px solid #e8e9eb}.dash-brand{display:flex;align-items:center;gap:10px;color:#181a1e;text-decoration:none;font-size:14px;font-weight:800;white-space:nowrap}.dash-brand>span{width:30px;height:30px;border-radius:9px;background:#17191d;color:#fff;display:grid;place-items:center;font-size:20px;font-weight:400}.dash-nav nav{display:flex;align-items:center;gap:4px;margin-right:auto;padding:4px;border-radius:20px;background:#f3f4f5}.dash-nav nav button{height:31px;padding:0 18px;border:0;border-radius:17px;background:transparent;color:#9298a1;font-size:11px}.dash-nav nav button.active{background:#fff;color:#202328;box-shadow:0 1px 5px rgba(20,28,40,.08)}.local-badge{font-size:10px;color:#737a84}.local-badge i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#37c98c}.dash-content{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:26px 0 44px}.mode-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}.dashboard .scenario{min-height:88px;padding:14px 16px;display:grid;grid-template-columns:52px 1fr auto;gap:13px;align-items:center;border:1px solid #252a32;border-radius:12px;background:#151922;color:#fff;text-align:left;box-shadow:none;transform:none}.dashboard .scenario:hover{background:#1b202a}.dashboard .scenario.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.dashboard .scenario>span:nth-child(2){display:grid;gap:5px}.dashboard .scenario strong{font-size:13px}.dashboard .scenario small{font-size:9px;color:#8c95a3}.dashboard .scenario>b{padding:5px 9px;border-radius:12px;background:#242b36;color:#aeb6c2;font-size:8px;font-weight:500}.dashboard .scenario.active>b{background:var(--accent);color:#0c1710}.mode-icon{width:42px;height:42px;border-radius:10px;background:#202735;display:grid;place-items:center}.mode-icon i{display:block;width:18px;height:18px;border:2px solid var(--accent);border-radius:50%;position:relative}.mode-icon i:before,.mode-icon i:after{content:"";position:absolute;background:var(--accent)}.mode-icon i:before{width:24px;height:1px;left:-5px;top:7px}.mode-icon i:after{width:1px;height:24px;left:7px;top:-5px}.micro-icon i{width:11px;height:11px}.reflex-icon i{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent)}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dash-card{border:1px solid #e5e7ea;border-radius:18px;background:#fff;box-shadow:0 2px 12px rgba(24,34,48,.035)}.practice-card{grid-row:span 1;padding:30px 34px}.practice-symbol{width:52px;height:52px;margin:0 auto 14px;border-radius:16px;background:#dcf8fb;display:grid;place-items:center}.practice-symbol i{display:block;width:23px;height:23px;border:2px solid #13abc4;border-radius:50%;position:relative}.practice-symbol i:before,.practice-symbol i:after{content:"";position:absolute;background:#13abc4}.practice-symbol i:before{left:-5px;right:-5px;height:2px;top:9px}.practice-symbol i:after{top:-5px;bottom:-5px;width:2px;left:9px}.practice-card h1,.practice-card h2{text-align:center;font-size:23px;margin:0 0 6px}.practice-card>p{text-align:center;color:#9298a0;font-size:10px;margin:0 0 24px}.control-row{margin-top:18px}.control-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.control-label label,.control-label span{font-size:9px;color:#858c95}.control-label output{font-size:10px;color:#24282d;font-weight:700}.segmented.light{height:42px;border:1px solid #e4e6e8;background:#f3f4f5;border-radius:10px;padding:4px}.segmented.light button{height:32px;color:#9197a0;border-radius:7px}.segmented.light button.active{background:#fff;color:#202327;box-shadow:0 1px 5px rgba(20,28,40,.08)}.sensitivity-control.light{display:grid;grid-template-columns:auto auto;gap:4px 0}.sensitivity-control.light input{grid-column:1/-1}.sensitivity-control.light>span{font-size:8px;color:#a3a8af}.sensitivity-control.light>span:last-child{text-align:right}.sound-row.compact{margin-top:20px;padding-top:16px;border-top:1px solid #eef0f2}.sound-row.compact label{font-size:10px;color:#6e7580}.challenge-button{width:100%;height:52px;margin-top:22px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:18px;border:0;border-radius:10px;background:#13b8cf;color:#fff;font-size:13px;font-weight:800;box-shadow:0 7px 18px rgba(19,184,207,.2)}.challenge-button kbd{font:inherit;font-size:8px;padding:3px 6px;border:1px solid rgba(255,255,255,.4);border-radius:4px}.summary-column{display:grid;grid-template-rows:auto 1fr;gap:12px}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-card{min-height:88px;padding:16px}.stat-card>span,.best-card span{font-size:8px;color:#9aa0a8}.stat-card strong{display:block;margin:7px 0 2px;font-size:20px;font-variant-numeric:tabular-nums}.stat-card small,.best-card small{font-size:8px;color:#a8adb4}.best-card{padding:23px;display:flex;align-items:center;justify-content:space-between}.best-card>div:first-child{display:grid;gap:6px}.best-card>div:first-child strong{font-size:30px;font-variant-numeric:tabular-nums}.grade-box{width:92px;height:92px;border-radius:14px;background:#181b20;color:#fff;display:grid;place-content:center;text-align:center;gap:3px}.grade-box span{color:#7f8791}.grade-box strong{font-size:32px;color:var(--accent)}.history-card,.progress-card{min-height:230px;padding:22px}.history-card header,.progress-card header{display:flex;align-items:center;justify-content:space-between}.history-card header>div,.progress-card header>div{display:grid;gap:4px}.history-card header strong,.progress-card header strong{font-size:13px}.history-card header small,.progress-card header small{font-size:8px;color:#9da3aa}.history-card header button{border:0;background:#f1f3f4;color:#8e959d;border-radius:7px;padding:7px 10px;font-size:8px}.history-bars{height:146px;margin-top:18px;padding:8px 4px 22px;display:flex;align-items:end;gap:10px;border-bottom:1px solid #eef0f2}.history-bar{flex:1;min-width:18px;max-width:48px;position:relative;border-radius:5px 5px 2px 2px;background:#cceff4}.history-bar i{display:block;position:absolute;left:0;right:0;bottom:0;border-radius:5px 5px 2px 2px;background:#16b7cf}.history-bar span{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:7px;color:#9ba1a8}.empty-history{margin:auto;color:#a1a7ae;font-size:9px}.progress-list{display:grid;gap:9px;margin-top:18px}.progress-list>div{min-height:45px;padding:9px 12px;display:flex;align-items:center;gap:11px;border:1px solid #eceef0;border-radius:10px}.check{width:23px;height:23px;border-radius:50%;background:#f1f3f4;color:#afb4ba;display:grid;place-items:center;font-size:12px}.check.done{background:#dcf7e9;color:#20a66a}.progress-list p{margin:0;display:grid;gap:3px}.progress-list strong{font-size:10px}.progress-list small{font-size:8px;color:#999fa7}.dash-footer{width:min(1120px,calc(100% - 40px));height:55px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e2e4e6;color:#959ba3;font-size:8px}.dashboard .switch{border-color:#d7dbe0;background:#e7e9ec}.dashboard .switch.active{background:#dff5e9}.dashboard .switch.active span{background:#20b672}.dashboard .sensitivity-control input::-webkit-slider-thumb{border-color:#fff}.dashboard .sensitivity-control output{background:#fff;color:#202327;border-color:#e1e4e7}
@media(max-width:900px){.dash-nav{padding:0 20px}.dash-nav nav{display:none}.dash-content{width:min(700px,calc(100% - 28px))}.mode-strip{grid-template-columns:1fr}.dash-grid{grid-template-columns:1fr}.summary-column{grid-row:auto}.dash-footer{width:calc(100% - 28px)}}@media(max-width:560px){.local-badge{display:none}.stat-row{grid-template-columns:1fr}.practice-card{padding:25px 20px}.mode-strip{gap:8px}.history-card,.progress-card{padding:18px}}

/* 模式图标 */
.mode-icon{position:relative;display:block}.mode-icon i,.mode-icon b{position:absolute;border:0;border-radius:0;box-shadow:none;background:var(--accent)}.mode-icon i:before,.mode-icon i:after{display:none}.grid-icon i{width:7px;height:7px;border-radius:50%;top:12px}.grid-icon i:nth-child(1){left:9px}.grid-icon i:nth-child(2){right:9px}.grid-icon i:nth-child(3){left:18px;top:25px}.micro-icon i{width:5px;height:5px;left:19px;top:19px;border-radius:1px}.micro-icon b{inset:9px;background:transparent;border:1px solid #7e899a;clip-path:polygon(0 0,35% 0,35% 8%,8% 8%,8% 35%,0 35%,0 0,65% 0,100% 0,100% 35%,92% 35%,92% 8%,65% 8%,65% 0,100% 65%,100% 100%,65% 100%,65% 92%,92% 92%,92% 65%,100% 65%,35% 100%,0 100%,0 65%,8% 65%,8% 92%,35% 92%,35% 100%)}.reflex-icon{display:flex;align-items:center;justify-content:center;gap:4px}.reflex-icon i{position:static;width:3px;border-radius:3px}.reflex-icon i:nth-child(1){height:12px}.reflex-icon i:nth-child(2){height:24px}.reflex-icon i:nth-child(3){height:17px}.practice-symbol{position:relative}.practice-symbol i{position:absolute;border:0;background:#13abc4;box-shadow:none}.practice-symbol i:before,.practice-symbol i:after{display:none}.symbol-grid i{width:8px;height:8px;border-radius:50%}.symbol-grid i:nth-child(1){left:13px;top:13px}.symbol-grid i:nth-child(2){right:13px;top:13px}.symbol-grid i:nth-child(3){left:22px;bottom:12px}.symbol-micro i:first-child{width:6px;height:6px;left:23px;top:23px;border-radius:1px}.symbol-micro i:not(:first-child){display:none}.symbol-micro:after{content:"";position:absolute;inset:13px;border:1px solid #13abc4;border-radius:7px}.symbol-reflex{display:flex;align-items:center;justify-content:center;gap:5px}.symbol-reflex i{position:static;width:4px;border-radius:3px}.symbol-reflex i:nth-child(1){height:14px}.symbol-reflex i:nth-child(2){height:28px}.symbol-reflex i:nth-child(3){height:19px}

/* 练习页排版 */
#practicePage .dash-grid{grid-template-columns:1.04fr .96fr;align-items:stretch}#practicePage .practice-card{min-height:520px}.summary-column{grid-template-rows:auto auto 1fr}.compact-best{min-height:150px}.mode-bests-card{padding:20px 22px;display:grid;grid-template-columns:1fr auto;align-content:start;gap:0}.mode-bests-card header{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #eef0f2}.mode-bests-card header strong{font-size:12px}.mode-bests-card header small{font-size:8px;color:#9aa1a9}.mode-bests-card>div{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f1f3}.mode-bests-card>div:last-child{border:0}.mode-bests-card>div span{font-size:9px;color:#747c85}.mode-bests-card>div strong{font-size:12px;font-variant-numeric:tabular-nums}

/* 页面通用 */
.dash-page{min-height:620px}.page-heading{display:flex;align-items:end;justify-content:space-between;margin:8px 0 24px}.page-heading h2{margin:0 0 8px;font-size:27px;letter-spacing:-1px}.page-heading p{margin:0;color:#9097a0;font-size:10px}.text-button{height:34px;padding:0 13px;border:1px solid #dfe2e5;border-radius:8px;background:#fff;color:#6f7781;font-size:9px}.text-button.danger{color:#d65f5f}

/* 训练记录 */
.record-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.record-summary>div{padding:19px 22px}.record-summary span{display:block;color:#939aa3;font-size:9px}.record-summary strong{display:block;margin-top:8px;font-size:24px;font-variant-numeric:tabular-nums}.records-card{overflow:hidden}.records-card>header{padding:16px 18px;border-bottom:1px solid #eceef0}.record-filters{display:flex;gap:5px}.record-filters button{height:30px;padding:0 13px;border:0;border-radius:7px;background:transparent;color:#8c939c;font-size:9px}.record-filters button.active{background:#edf8fa;color:#0d99ad}.records-table-wrap{position:relative;min-height:370px;overflow-x:auto}.records-card table{width:100%;border-collapse:collapse}.records-card th,.records-card td{padding:15px 18px;text-align:left;border-bottom:1px solid #f0f1f2;font-size:9px;white-space:nowrap}.records-card th{color:#9aa1aa;font-weight:500;background:#fafbfb}.records-card td{color:#5f6872}.records-card td strong{color:#171a1e;font-size:11px}.delete-record{border:0;background:transparent;color:#c66;font-size:8px}.records-empty{position:absolute;inset:50px 0 0;display:grid;place-items:center;color:#9ca3ab;font-size:10px}.records-empty.hidden{display:none!important}

/* 设置页 */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.settings-card{padding:24px}.settings-card>header{margin-bottom:23px}.settings-card h2{margin:0 0 6px;font-size:15px}.settings-card header p{margin:0;color:#999fa7;font-size:9px}.settings-field{padding:17px 0;border-bottom:1px solid #edf0f2}.settings-field>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.settings-field label,.settings-field output{font-size:10px}.settings-field output{font-weight:700}.settings-field input{width:100%;accent-color:#13b8cf}.settings-toggle{min-height:60px;display:flex;align-items:center;justify-content:space-between}.settings-toggle>span{display:grid;gap:5px}.settings-toggle strong{font-size:10px}.settings-toggle small{font-size:8px;color:#9ba1a8}.crosshair-card{grid-row:span 2}.crosshair-preview{width:150px;height:150px;margin:4px auto 15px;border-radius:18px;background:#1a1e23;position:relative;--preview-size:24px;--preview-color:#fff}.crosshair-preview:before{content:"";position:absolute;width:2px;height:2px;left:calc(50% - 1px);top:calc(50% - 1px);background:var(--preview-color)}.crosshair-preview i,.crosshair-preview b{position:absolute;background:var(--preview-color)}.crosshair-preview i{width:var(--preview-size);height:1px;left:calc(50% - var(--preview-size)/2);top:50%}.crosshair-preview b{height:var(--preview-size);width:1px;top:calc(50% - var(--preview-size)/2);left:50%}.color-row{display:flex;align-items:center;justify-content:space-between;padding-top:18px}.color-row>span{font-size:10px}.color-row>div{display:flex;gap:9px}.color-swatch{width:24px;height:24px;border-radius:50%;border:3px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #d8dce0}.color-swatch.active{box-shadow:0 0 0 2px #1d2228}.audio-card{min-height:145px}.crosshair{--game-crosshair-size:24px;--game-crosshair-color:#fff;width:var(--game-crosshair-size);height:var(--game-crosshair-size)}.crosshair:before{left:calc(50% - 1px);top:calc(50% - 1px);background:var(--game-crosshair-color)}.crosshair i{width:var(--game-crosshair-size);top:50%;background:var(--game-crosshair-color)}.crosshair b{height:var(--game-crosshair-size);left:50%;background:var(--game-crosshair-color)}
@media(max-width:900px){#practicePage .dash-grid,.settings-grid{grid-template-columns:1fr}.settings-card,.crosshair-card{grid-row:auto}.record-summary{grid-template-columns:1fr}.record-filters{overflow-x:auto}.mode-bests-card{min-height:260px}}

/* 扩展训练项目与成绩分析 */
.mode-bests-card>section{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.mode-bests-card>section>div{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f1f3}.mode-bests-card>section>div span{font-size:9px;color:#747c85}.mode-bests-card>section>div strong{font-size:12px;font-variant-numeric:tabular-nums}
.moving-icon i{width:8px;height:8px;left:17px;top:17px;border-radius:50%}.moving-icon b{height:2px;width:28px;left:7px;top:20px;background:#687586}.six-icon i{width:5px;height:5px;border-radius:50%}.six-icon i:nth-child(1){left:9px;top:10px}.six-icon i:nth-child(2){left:19px;top:10px}.six-icon i:nth-child(3){left:29px;top:10px}.six-icon i:nth-child(4){left:9px;top:27px}.six-icon i:nth-child(5){left:19px;top:27px}.six-icon i:nth-child(6){left:29px;top:27px}.distance-icon i{width:6px;height:6px;left:18px;top:18px;border-radius:50%}.distance-icon b{inset:8px;background:transparent;border:1px solid #748091;border-radius:50%}
.symbol-moving i:first-child{width:8px;height:8px;left:22px;top:22px;border-radius:50%}.symbol-moving:after{content:"";position:absolute;left:12px;right:12px;top:25px;height:2px;background:#8dcbd5}.symbol-six{display:grid;grid-template-columns:repeat(3,6px);gap:7px;place-content:center}.symbol-six i{position:static;width:6px;height:6px;border-radius:50%}.symbol-distance i:first-child{width:6px;height:6px;left:23px;top:23px;border-radius:50%}.symbol-distance:after{content:"";position:absolute;inset:12px;border:1px solid #13abc4;border-radius:50%}
.record-summary{grid-template-columns:repeat(4,1fr)}.analytics-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:16px}.trend-card,.detail-card{padding:20px;min-height:300px}.trend-card header,.detail-card header{display:flex;align-items:center;justify-content:space-between}.trend-card header>div,.detail-card header>div{display:grid;gap:4px}.trend-card header strong,.detail-card header strong{font-size:12px}.trend-card header small,.detail-card header small{font-size:8px;color:#9aa1a9}.trend-card header>span{font-size:10px;color:#13a9bf}.trend-canvas-wrap{height:225px;margin-top:13px;position:relative;overflow:hidden}.trend-canvas-wrap canvas{display:block}.trend-empty{position:absolute;inset:0;display:grid;place-items:center;color:#a0a6ad;font-size:9px}.trend-empty.hidden{display:none}.detail-card header>b{width:38px;height:38px;border-radius:10px;background:#171b20;color:#13b8cf;display:grid;place-items:center;font-size:18px}.detail-metrics{display:grid;grid-template-columns:1fr 1fr;margin-top:15px;border-top:1px solid #eef0f2}.detail-metrics>div{padding:13px 8px 10px 0;border-bottom:1px solid #eef0f2}.detail-metrics>div:nth-child(even){padding-left:14px;border-left:1px solid #eef0f2}.detail-metrics span{display:block;color:#9ba1a8;font-size:8px;margin-bottom:5px}.detail-metrics strong{font-size:12px;font-variant-numeric:tabular-nums}.records-card tbody tr{cursor:pointer}.records-card tbody tr:hover,.records-card tbody tr.selected{background:#f2fafb}.records-card tbody tr.selected td:first-child{box-shadow:inset 3px 0 #13b8cf}
.result-metrics>div:nth-child(3){border-right:0}.result-metrics>div:nth-child(-n+3){border-bottom:1px solid var(--line)}
@media(max-width:900px){.analytics-grid{grid-template-columns:1fr}.record-summary{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.record-summary{grid-template-columns:1fr}.mode-bests-card>section{grid-template-columns:1fr}.result-metrics{grid-template-columns:1fr 1fr}.result-metrics>div{border-bottom:1px solid var(--line)!important}.result-metrics>div:nth-child(even){border-right:0}}

/* 上线版导航、每日挑战与成绩发布 */
.site-links{display:flex;align-items:center;gap:18px;margin-left:auto}.site-links a{color:#7e858e;text-decoration:none;font-size:9px;white-space:nowrap}.site-links a:hover,.site-links a.active{color:#171a1e}.daily-challenge{min-height:82px;margin-bottom:16px;padding:15px 18px;display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;background:#171b20;border-color:#252b32;color:#fff}.daily-challenge>div:first-child{display:grid;gap:4px}.daily-challenge>div:first-child>span{color:#13b8cf;font-size:7px;letter-spacing:1.6px}.daily-challenge>div:first-child strong{font-size:14px}.daily-challenge small{font-size:8px;color:#8e98a3}.daily-target{padding-left:24px;border-left:1px solid #313841;display:grid;gap:3px}.daily-target span{font-size:7px;color:#8e98a3}.daily-target strong{font-size:19px;font-variant-numeric:tabular-nums}.daily-challenge>button{height:38px;padding:0 16px;border:0;border-radius:8px;background:#13b8cf;color:#fff;font-size:9px;font-weight:700}.dash-footer a{color:inherit;text-decoration:none}.dash-footer a:hover{color:#636b74}.score-publish{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}.score-publish input{height:38px;padding:0 12px;border:1px solid #343b44;background:#0d1014;color:#fff;font-size:10px;outline:0}.score-publish input:focus{border-color:var(--accent)}.score-publish button{height:38px;padding:0 14px;border:0;background:var(--accent);color:#111;font-size:9px;font-weight:700}.score-publish button:disabled{opacity:.55}.score-publish small{grid-column:1/-1;color:#6f7882;font-size:7px}.result-actions{flex-wrap:wrap}.result-actions .plain-button{min-height:38px}
@media(max-width:1100px){.site-links{display:none}}@media(max-width:620px){.daily-challenge{grid-template-columns:1fr auto}.daily-target{padding-left:12px}.daily-challenge>button{grid-column:1/-1}.score-publish{grid-template-columns:1fr}.score-publish small{grid-column:auto}.result-card{max-height:88vh;overflow-y:auto}}

/* 主页统一为浅色训练面板；深色仅保留在实际训练场中 */
.dashboard{--accent:#13b8cf}
.dashboard .scenario{
  background:#fff;
  color:#171a1e;
  border-color:#e5e7ea;
  box-shadow:0 2px 12px rgba(24,34,48,.035);
}
.dashboard .scenario:hover{background:#f8fafb;border-color:#dfe3e6}
.dashboard .scenario.active{
  background:#fff;
  border-color:#13b8cf;
  box-shadow:0 0 0 1px #13b8cf;
}
.dashboard .scenario small{color:#8c949d}
.dashboard .scenario>b{background:#f0f2f4;color:#737b85}
.dashboard .scenario.active>b{background:#dff7fa;color:#078fa3}
.dashboard .mode-icon{background:#f1f4f6}
.dashboard .micro-icon b,
.dashboard .distance-icon b{border-color:#9ba5ae}
.dashboard .moving-icon b{background:#9ba5ae}

.daily-challenge{
  background:#fff;
  border-color:#e5e7ea;
  color:#171a1e;
  box-shadow:0 2px 12px rgba(24,34,48,.035);
}
.daily-challenge>div:first-child>span{color:#0ca0b5}
.daily-challenge small,
.daily-target span{color:#8e969f}
.daily-target{border-left-color:#e7eaed}
.daily-target strong{color:#171a1e}

.grade-box{background:#edf9fb;color:#171a1e}
.grade-box span{color:#7b858e}
.grade-box strong{color:#0aa4ba}

/* 双语入口与可索引内容 */
.language-links{display:flex;align-items:center;padding:3px;border:1px solid #e5e7ea;border-radius:9px;background:#f6f7f8}
.language-links a{min-width:30px;height:26px;padding:0 7px;display:grid;place-items:center;border-radius:6px;color:#8a9199;text-decoration:none;font-size:8px;font-weight:700}
.language-links a.active{background:#fff;color:#171a1e;box-shadow:0 1px 4px rgba(20,28,40,.08)}
.seo-content{width:min(1120px,calc(100% - 40px));margin:0 auto 38px;padding:34px;border:1px solid #e5e7ea;border-radius:18px;background:#fff;color:#171a1e;box-shadow:0 2px 12px rgba(24,34,48,.035)}
.seo-intro{max-width:760px}.seo-intro>span{color:#0b9fb4;font-size:8px;font-weight:800;letter-spacing:1.3px}.seo-intro h1,.seo-intro h2,.seo-faq h2{margin:9px 0 10px;font-size:22px;letter-spacing:-.5px}.seo-intro p,.seo-features p,.seo-faq p{color:#747c85;font-size:10px;line-height:1.8}
.seo-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}.seo-features article{padding:18px;border:1px solid #eceef0;border-radius:12px;background:#fafbfb}.seo-features h3{margin:0 0 7px;font-size:11px}.seo-features p{margin:0}
.seo-faq{margin-top:28px;padding-top:23px;border-top:1px solid #eceef0}.seo-faq h2{font-size:15px}.seo-faq details{border-bottom:1px solid #eceef0}.seo-faq summary{padding:14px 0;cursor:pointer;font-size:10px;font-weight:700}.seo-faq p{margin:0 0 14px}
@media(max-width:900px){.language-links{margin-left:auto}.seo-features{grid-template-columns:1fr}.seo-content{width:calc(100% - 28px);padding:25px}}
@media(max-width:560px){.dash-brand{font-size:0}.dash-brand>span{font-size:20px}.language-links a{min-width:27px}.seo-content{padding:21px}.seo-intro h1,.seo-intro h2{font-size:19px}}

/* 灰色棋盘格第一人称训练场 */
.game{position:relative;display:block;height:100vh;min-height:560px;background:#666c6e;overflow:hidden}
.game .range{position:absolute;inset:0;background:#050607}
.game-header{position:absolute;z-index:22;top:18px;left:20px;right:20px;height:42px;padding:0;background:transparent;border:0;pointer-events:none}
.game-brand{height:42px;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:5px;background:rgba(26,29,30,.5);backdrop-filter:blur(6px);color:#f5f7f7;pointer-events:auto}
.game-protocol{height:42px;margin-left:8px;margin-right:auto;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:5px;background:rgba(26,29,30,.5);backdrop-filter:blur(6px);pointer-events:auto}
.game-protocol small{color:rgba(255,255,255,.58)}.game-protocol strong{color:#fff}
.game-header button{height:42px;padding:0 15px;border:1px solid rgba(255,255,255,.18);border-radius:5px;background:rgba(26,29,30,.5);backdrop-filter:blur(6px);color:#fff;pointer-events:auto}
.hud{top:24px;width:190px;min-height:66px;padding:10px 13px;display:block;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:rgba(35,39,40,.55);box-shadow:0 5px 18px rgba(0,0,0,.1);backdrop-filter:blur(7px);text-align:left}
.hud span{display:block;color:rgba(255,255,255,.68);font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.hud strong{display:block;margin-top:2px;color:#fff;font-size:24px;line-height:1.05;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hud small{position:absolute;right:11px;bottom:8px;color:rgba(255,255,255,.48);font-size:7px}
.hud-left{left:calc(50% - 289px)}
.hud-center{left:50%;transform:translateX(-50%);text-align:left}
.hud-right{left:calc(50% + 99px);right:auto;text-align:left}
.streak{left:22px;bottom:25px;padding:9px 12px;border:1px solid rgba(255,255,255,.16);border-radius:4px;background:rgba(35,39,40,.46);backdrop-filter:blur(6px)}
.streak span{color:rgba(255,255,255,.62)}.streak strong{color:#fff}
.hud-fps{position:absolute;z-index:12;right:22px;bottom:25px;min-width:74px;padding:9px 11px;border:1px solid rgba(255,255,255,.16);border-radius:4px;background:rgba(35,39,40,.46);backdrop-filter:blur(6px);text-align:right;pointer-events:none}
.hud-fps span{display:block;color:rgba(255,255,255,.62);font-size:7px;letter-spacing:1px;font-weight:700}
.hud-fps strong{display:block;margin-top:2px;color:#fff;font-size:18px;line-height:1.05;font-variant-numeric:tabular-nums}
.hud-fps small{display:block;margin-top:4px;color:rgba(255,255,255,.48);font-size:7px;font-variant-numeric:tabular-nums}
.game-footer{position:absolute;z-index:21;left:20px;right:20px;bottom:0;height:24px;padding:0;border:0;background:transparent;color:rgba(255,255,255,.48);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.screen-layer.countdown{padding-top:18vh;place-items:start center;background:transparent;pointer-events:none}
.countdown span,.countdown small{display:none}
/* 对战里「在等谁、还要等多久」那行不能藏起来，也不能被「点击开始」那张卡挡住：
   钉在顶部读条下面，谁在什么时候看都看得见。练习模式照旧只有倒数。 */
.game.battle-active .countdown small{display:inline-block;position:absolute;left:50%;top:70px;transform:translateX(-50%);max-width:88vw;padding:7px 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(16,19,22,.76);color:#fff;font-size:12px;letter-spacing:.2px;box-shadow:0 10px 24px rgba(0,0,0,.32);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.game.battle-active .countdown small{top:58px;font-size:11px;padding:6px 12px;max-width:92vw}}
.countdown strong{width:116px;height:116px;display:grid;place-items:center;margin:0;border:12px solid rgba(173,183,226,.42);border-radius:50%;background:rgba(116,128,189,.72);box-shadow:0 8px 25px rgba(22,27,35,.24),inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font-size:28px;line-height:1}
.pointer-prompt,.result{background:rgba(14,17,18,.78)}
@media(max-width:760px){.hud{top:68px;width:30%;min-height:60px;padding:9px}.hud-left{left:3%}.hud-center{left:50%;transform:translateX(-50%)}.hud-right{left:auto;right:3%}.hud strong{font-size:19px}.hud small{display:none}.hud-fps{right:3%;bottom:18px;min-width:62px;padding:7px 8px}.hud-fps strong{font-size:17px}.game-protocol{display:none}.game-header{top:12px;left:12px;right:12px}.game-footer{left:12px;right:12px}.countdown strong{width:94px;height:94px;border-width:10px}}

/* HUD 防重叠与目标大小选项 */
.game-header .game-brand{margin-right:0}
.game-header .game-protocol{margin-left:8px;margin-right:auto}
.target-size-options{grid-template-columns:repeat(5,1fr)}
.target-size-options button{padding:0 6px}
.target-size-hint{display:block;margin-top:7px;color:#9aa1a9;font-size:7px;line-height:1.5;text-align:center}
.pause-exit-button{min-width:112px;height:38px;margin-top:22px;padding:0 18px;border:1px solid rgba(255,255,255,.28);border-radius:7px;background:rgba(18,21,23,.58);color:#fff;font-size:9px;font-weight:700;letter-spacing:.4px}
.pause-exit-button:hover{background:rgba(35,40,43,.82);border-color:rgba(255,255,255,.5)}

/* 四模式布局、移动靶数量与暂停退出位置 */
.mode-strip{grid-template-columns:repeat(2,1fr)}
.moving-count-options{grid-template-columns:repeat(4,1fr)}
.pause-exit-button{position:absolute;right:28px;bottom:28px;margin:0}
@media(max-width:900px){.mode-strip{grid-template-columns:1fr}}
@media(max-width:760px){.pause-exit-button{right:16px;bottom:36px}}

/* 六模式扩展：微调、跟枪与移动方向 */
.micro-adjust-icon i{width:5px;height:5px;left:19px;top:19px;border-radius:50%}
.micro-adjust-icon b{inset:9px;background:transparent;border:1px solid #8e9aa5}
.tracking-icon i{width:8px;height:8px;left:18px;top:17px;border-radius:50%}
.tracking-icon b{width:27px;height:2px;left:8px;top:21px;background:#8e9aa5;transform:rotate(-24deg)}
.symbol-micro_adjust i{width:5px;height:5px;border-radius:50%}
.symbol-micro_adjust i:nth-child(1){left:16px;top:17px}.symbol-micro_adjust i:nth-child(2){left:30px;top:23px}.symbol-micro_adjust i:nth-child(3){left:20px;top:33px}
.symbol-micro_adjust:after{content:"";position:absolute;inset:12px;border:1px solid #8dcbd5;border-radius:5px}
.symbol-tracking i:first-child{width:8px;height:8px;left:22px;top:22px;border-radius:50%}
.symbol-tracking:after{content:"";position:absolute;left:11px;right:11px;top:25px;height:2px;background:#8dcbd5;transform:rotate(-24deg)}
.mode-toggle-row{min-height:36px}
.tracking-progress{position:absolute;z-index:14;left:50%;top:calc(50% + 32px);width:142px;height:4px;transform:translateX(-50%);border-radius:3px;background:rgba(255,255,255,.18);overflow:visible;pointer-events:none}
.tracking-progress i{display:block;width:0;height:100%;border-radius:3px;background:#7f8b94;transition:width .04s linear,background .1s}
.tracking-progress.active i{background:var(--accent)}
.tracking-progress span{position:absolute;top:9px;left:0;right:0;text-align:center;color:rgba(255,255,255,.64);font-size:7px;letter-spacing:.5px}

/* 结算页模式排名 */
.result-rank-card{margin-top:16px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;border:1px solid #303842;background:#0d1115}
.result-rank-card span{color:#77818c;font-size:8px}.result-rank-card strong{grid-row:1/3;grid-column:2;font-size:20px;color:var(--accent);font-variant-numeric:tabular-nums}.result-rank-card small{color:#5f6974;font-size:7px}

/* 游戏灵敏度预设 */
.game-preset-select,.settings-select{width:100%;height:42px;padding:0 12px;border:1px solid #e1e4e7;border-radius:10px;background:#f7f8f9;color:#272b30;font-size:10px;outline:0}
.game-preset-select:focus,.settings-select:focus{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.1)}
.game-sensitivity-hint{display:block;margin-top:7px;color:#9aa1a9;font-size:7px;line-height:1.5;text-align:center}
/* 主页那一格灵敏度：默认还是一个输入框占满，打开分离灵敏度之后变成横向、纵向
   一人一半，两个框各带一个小标题。 */
.sensitivity-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.sensitivity-pair.is-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sensitivity-cell{display:grid;gap:5px;min-width:0}
.sensitivity-caption{font-size:9px;color:#8a96a4;letter-spacing:.3px}
.settings-number-input{width:100%;height:42px;padding:0 12px;border:1px solid #e1e4e7;border-radius:10px;background:#f7f8f9;color:#272b30;font-size:11px;font-variant-numeric:tabular-nums;outline:0}
.settings-number-input:focus{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.1)}
.settings-select{margin-top:2px}.settings-help{display:block;margin-top:8px;color:#9ba1a8;font-size:8px;line-height:1.6}.scene-card{min-height:145px}

/* 记录与设置作为瞄准练习之上的模态页面 */
body.page-overlay-open{overflow:hidden}
.page-overlay-backdrop{position:fixed;inset:0;z-index:90;background:rgba(9,13,17,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
/* Static pages (battle and leaderboard) open the same dashboard panels in a
   same-origin frame. The host page remains visible behind the panel, while
   the embedded dashboard contributes only its existing panel and controls. */
html.shared-panel-frame,body.shared-panel-frame{background:transparent!important;overflow:hidden!important}
body.shared-panel-frame .nav-bar,body.shared-panel-frame .site-notice,body.shared-panel-frame #practicePage,body.shared-panel-frame .dash-footer,body.shared-panel-frame .seo-content{display:none!important}
body.shared-panel-frame .dashboard,body.shared-panel-frame .dash-content{width:100%;min-height:100vh;margin:0;padding:0;background:transparent}
body.shared-panel-frame .page-overlay-backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.shared-panel-frame .overlay-page{z-index:100;max-height:calc(100vh - 40px)}
.overlay-page{position:fixed;z-index:100;top:50%;left:50%;width:min(1120px,calc(100vw - 40px));max-height:calc(100vh - 40px);min-height:0;overflow:auto;transform:translate(-50%,-50%);padding:26px;border:1px solid #d8e0e3;border-radius:18px;background:#f6f7f8;box-shadow:0 28px 90px rgba(0,0,0,.38)}
.overlay-page .page-heading{position:sticky;top:-26px;z-index:2;margin:-26px -26px 24px;padding:23px 26px 19px;background:linear-gradient(115deg,#11181e,#1b252c);color:#fff;border-bottom:1px solid #2b3c44}
.overlay-page .page-heading h2{margin:6px 0 7px;color:#fff;font-size:29px;letter-spacing:-1px}
.overlay-page .page-heading p{color:#9eabb3}
.page-overline{display:block;color:#5de1ee;font-size:8px;font-weight:800;letter-spacing:1.8px}
.page-heading-actions{display:flex;align-items:center;gap:10px}
.overlay-page .page-heading .text-button{border-color:#43545c;background:transparent;color:#b9c5ca}
.overlay-page .page-heading .text-button.danger{color:#ff9b9b}
.page-close-button{width:38px;height:38px;border:1px solid #50616a;border-radius:10px;background:transparent;color:#f4f7f8;font-size:25px;line-height:1}
.page-close-button:hover{border-color:#5de1ee;color:#5de1ee}
.overlay-page .dash-card{box-shadow:0 2px 12px rgba(24,34,48,.045)}
.game-scene-label{padding:5px 8px;border:1px solid rgba(93,225,238,.32);color:#7ee8f1;font-size:8px;font-weight:600;letter-spacing:.2px}
.scene-preview{height:78px;margin:0 0 13px;padding:12px;display:flex;align-items:flex-end;border:1px solid #dfe5e7;border-radius:12px;overflow:hidden;background:linear-gradient(145deg,var(--scene-preview-bg,#bcc8c7),var(--scene-preview-deep,#7d8d8b) 78%);position:relative;isolation:isolate}.scene-preview:before,.scene-preview:after{content:"";position:absolute;z-index:-1;background:var(--scene-preview-accent,#22cbd7);opacity:.72}.scene-preview:before{left:12%;right:12%;bottom:18px;height:2px;box-shadow:0 0 10px var(--scene-preview-accent,#22cbd7)}.scene-preview:after{width:2px;height:42px;right:18%;bottom:18px;box-shadow:-34px 14px 0 var(--scene-preview-accent,#22cbd7)}.scene-preview span{color:#243237;font-size:10px;font-weight:700;letter-spacing:.3px;text-shadow:0 1px 2px rgba(255,255,255,.7)}
.overlay-page .page-heading{background:#fff;color:#17191c;border-bottom-color:#e5e7ea}.overlay-page .page-heading h2{color:#17191c}.overlay-page .page-heading p{color:#9098a1}.page-overline{color:#13a9bf}.overlay-page .page-heading .text-button{border-color:#dfe3e6;background:#fff;color:#69727b}.overlay-page .page-heading .text-button.danger{color:#d65f5f}.page-close-button{border-color:#d7dfe2;color:#3b4650;background:#fff}.page-close-button:hover{border-color:#13b8cf;color:#0d9fb5}
.crosshair,.crosshair-preview{--crosshair-color:#13b8cf;--crosshair-outline-color:#17252b;--crosshair-dot-size:5px;--crosshair-length:0px;--crosshair-gap:4px;--crosshair-thickness:1px;--crosshair-outline-width:2px}
.crosshair{width:120px!important;height:120px!important}
.crosshair:before{content:none!important;display:none!important}
.crosshair .crosshair-arm,.crosshair-preview .crosshair-arm{position:absolute;display:block;background:var(--crosshair-color);outline:var(--crosshair-outline-width) solid var(--crosshair-outline-color);border-radius:1px;box-sizing:border-box}
.crosshair .arm-top,.crosshair-preview .arm-top{width:var(--crosshair-thickness);height:var(--crosshair-length);left:50%;bottom:calc(50% + var(--crosshair-gap));transform:translateX(-50%)}
.crosshair .arm-right,.crosshair-preview .arm-right{width:var(--crosshair-length);height:var(--crosshair-thickness);left:calc(50% + var(--crosshair-gap));top:50%;transform:translateY(-50%)}
.crosshair .arm-bottom,.crosshair-preview .arm-bottom{width:var(--crosshair-thickness);height:var(--crosshair-length);left:50%;top:calc(50% + var(--crosshair-gap));transform:translateX(-50%)}
.crosshair .arm-left,.crosshair-preview .arm-left{width:var(--crosshair-length);height:var(--crosshair-thickness);right:calc(50% + var(--crosshair-gap));top:50%;transform:translateY(-50%)}
.crosshair .crosshair-dot,.crosshair-preview .crosshair-dot{position:absolute;display:block;width:var(--crosshair-dot-size);height:var(--crosshair-dot-size);left:50%;top:50%;transform:translate(-50%,-50%);background:var(--crosshair-color);outline:var(--crosshair-outline-width) solid var(--crosshair-outline-color);border-radius:50%;box-sizing:border-box}
.crosshair.no-arms .crosshair-arm,.crosshair-preview.no-arms .crosshair-arm{display:none}.crosshair.no-dot .crosshair-dot,.crosshair-preview.no-dot .crosshair-dot{display:none}
.crosshair>.crosshair-vector,.crosshair-preview>.crosshair-vector{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
/* 狙击镜：画面外圈全黑，只留中央圆形镜片；镜片边缘有一圈渐暗，黑色细十字线贯穿整个镜片。 */
.sniper-scope{--scope-r:min(46vh,46vw);position:absolute;z-index:13;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 50%,transparent 0,transparent calc(var(--scope-r) * .82),rgba(0,0,0,.18) calc(var(--scope-r) * .92),rgba(0,0,0,.62) calc(var(--scope-r) * .985),#000 var(--scope-r),#000 100%)}
.sniper-scope-lens{position:absolute;left:50%;top:50%;width:calc(var(--scope-r) * 2);height:calc(var(--scope-r) * 2);transform:translate(-50%,-50%);border-radius:50%;overflow:hidden}
.sniper-scope-lens::before,.sniper-scope-lens::after{content:"";position:absolute;background:#050505}
.sniper-scope-lens::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.sniper-scope-lens::after{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%)}
.sniper-scope-label{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.62);font:700 10px/1 Inter,"Microsoft YaHei",sans-serif;letter-spacing:.7px}
.range.sniper-scoped .crosshair{opacity:0}
.advanced-mode-controls .sniper-drill-note{grid-column:1/-1;color:#7d929c;font-size:11px;line-height:1.6}
.compact-setting{min-height:52px;border-bottom:1px solid #edf0f2}.color-input{width:34px;height:28px;padding:2px;border:1px solid #dfe3e6;border-radius:7px;background:#fff;cursor:pointer}
.site-notice{width:min(1120px,calc(100% - 40px));min-height:48px;margin:16px auto 0;padding:10px 15px;display:flex;align-items:center;gap:11px;border:1px solid #bde8ed;border-radius:12px;background:#effbfd;color:#3d6670}.site-notice-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#13b8cf;box-shadow:0 0 0 4px rgba(19,184,207,.12)}.site-notice div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.site-notice strong{color:#0b93a7;font-size:10px}.site-notice span:not(.site-notice-dot){font-size:9px;color:#6b858b}@media(max-width:620px){.site-notice{width:calc(100% - 28px);margin-top:12px;padding:10px 12px}.site-notice div{gap:3px;display:grid}.site-notice span:not(.site-notice-dot){line-height:1.5}}
@media(max-width:620px){.overlay-page{top:12px;bottom:12px;width:calc(100vw - 24px);max-height:none;transform:translateX(-50%);padding:18px;border-radius:14px}.overlay-page .page-heading{top:-18px;margin:-18px -18px 18px;padding:18px}.overlay-page .page-heading h2{font-size:24px}.page-heading-actions{gap:6px}.page-close-button{width:34px;height:34px}.game-scene-label{display:none}}
.brand-icon{width:30px;height:30px;flex:none;padding:7px;border-radius:9px;background:#17191d;color:#fff;stroke:currentColor}
.brand-logo{width:32px;height:32px;flex:none;display:block;object-fit:contain}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.game-brand .brand-icon{width:16px;height:16px;padding:0;border-radius:0;background:transparent;color:var(--accent)}
.mode-svg{width:25px;height:25px;color:#13abc4;stroke:currentColor;stroke-width:1.8}
.practice-svg{width:34px;height:34px;color:#13abc4;stroke:currentColor;stroke-width:1.8}
.dash-nav{gap:24px}
.dash-primary-nav{display:flex;align-items:center;gap:4px;margin:0 auto;padding:4px;border-radius:22px;background:#f3f4f5}
.dash-primary-nav button,.dash-primary-nav a{height:36px;padding:0 18px;display:flex;align-items:center;border:0;border-radius:18px;background:transparent;color:#707983;text-decoration:none;font-size:11px;white-space:nowrap}
.dash-primary-nav button.active{background:#13b8cf;color:#fff;box-shadow:0 3px 8px rgba(19,184,207,.18)}
.dash-primary-nav a:hover{color:#171a1e;background:#fff}
.dash-actions{display:flex;align-items:center;gap:8px}
.dash-actions button{height:36px;padding:0 14px;border:1px solid #e1e5e8;border-radius:10px;background:#fff;color:#626b75;font-size:10px;white-space:nowrap}
.dash-actions button:hover{border-color:#13b8cf;color:#087f91}
.dash-grid{grid-template-columns:minmax(330px,1fr) minmax(420px,1.25fr) 222px;align-items:start;gap:16px}
.practice-card{grid-column:1;grid-row:1;padding:24px}
.practice-card #modeMount{margin:-4px 0 18px}
.practice-card .mode-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.practice-card .mode-strip .scenario{min-height:106px;padding:12px 8px;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:center;border:1px solid #e4e8eb;border-radius:12px;background:#fff;color:#20252a}
.practice-card .mode-strip .scenario.active{border-color:#13b8cf;box-shadow:inset 0 0 0 1px #13b8cf;background:#f5fdfe}
.practice-card .mode-strip .scenario>span:nth-child(2){display:grid;gap:4px}
.practice-card .mode-strip .scenario small{font-size:8px;color:#8d969f}
.practice-card .mode-strip .scenario>b{display:none}
.practice-card .mode-icon{width:34px;height:34px;margin:0 auto;background:#f1f4f6!important}
.practice-card .mode-svg{width:22px;height:22px}
.practice-card .practice-symbol{margin-top:4px}
.summary-column{grid-column:2;grid-row:1;display:grid;grid-template-rows:auto auto 1fr;gap:16px}
.summary-column .stat-row{grid-template-columns:repeat(3,1fr)}
.summary-column .best-card{min-height:118px}
.quick-settings-card{grid-column:3;grid-row:1;padding:20px;min-width:0}
.quick-settings-card>header{display:grid;gap:5px;margin-bottom:5px}
.quick-settings-card>header strong{font-size:16px}
.quick-settings-kicker{color:#13a9bf;font-size:8px;letter-spacing:1.5px;font-weight:700}
.quick-settings-card #quickSettingsMount{display:grid;gap:0}
.quick-settings-card .control-row{margin-top:0;padding:17px 0;border-bottom:1px solid #edf0f2}
.quick-settings-card .control-label{margin-bottom:10px}
.quick-settings-card .control-label label,.quick-settings-card .control-label span{font-size:10px;color:#626b74}
.quick-settings-card .game-preset-select,.quick-settings-card .segmented.light{width:100%}
.quick-settings-card .segmented.light{height:auto;display:grid;grid-template-columns:1fr 1fr;padding:3px}
.quick-settings-card .segmented.light button{height:34px;font-size:9px}
.quick-settings-card .target-size-options{grid-template-columns:repeat(4,1fr)}
.quick-settings-card .target-size-options button{padding:0 2px}
.quick-settings-card .target-size-hint{display:none}
#dailyMount .daily-challenge{margin:0;min-height:154px;border-radius:16px}
#dailyMount .daily-challenge>button{min-width:112px}
@media(max-width:1180px){.dash-nav{padding-left:20px;padding-right:20px}.dash-primary-nav button,.dash-primary-nav a{padding:0 12px}.dash-grid{grid-template-columns:minmax(300px,1fr) minmax(360px,1.1fr) 200px}.site-links{display:none}}
@media(max-width:900px){.dash-nav .dash-primary-nav{display:flex;order:3;width:100%;justify-content:center;margin:0}.dash-nav{height:auto;min-height:68px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.dash-actions{margin-left:auto}.dash-grid{grid-template-columns:1fr}.practice-card,.summary-column,.quick-settings-card{grid-column:1;grid-row:auto}.quick-settings-card #quickSettingsMount{grid-template-columns:repeat(3,1fr);gap:12px}.quick-settings-card .control-row{border:1px solid #edf0f2;border-radius:10px;padding:12px}.quick-settings-card .target-size-options{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.dash-primary-nav button,.dash-primary-nav a{padding:0 9px;font-size:10px}.dash-actions button{padding:0 10px}.practice-card .mode-strip{grid-template-columns:repeat(2,1fr)}.quick-settings-card #quickSettingsMount{grid-template-columns:1fr}.summary-column .stat-row{grid-template-columns:1fr}}

/* Homepage layout: keep the three-column composition above the fold. */
#practicePage .dash-grid{grid-template-columns:minmax(330px,1fr) minmax(420px,1.25fr) 222px;align-items:start;gap:16px}
#practicePage .practice-card{grid-column:1;grid-row:1;min-height:0;padding:24px}
#practicePage .summary-column{grid-column:2;grid-row:1;grid-template-rows:auto auto auto auto;gap:16px}
#practicePage .quick-settings-card{grid-column:3;grid-row:1;min-width:0}
.dash-nav .dash-primary-nav{display:flex;align-items:center;gap:4px;margin:0 auto;padding:4px;border-radius:22px;background:#f3f4f5}
.dash-nav .dash-primary-nav button,.dash-nav .dash-primary-nav a{height:36px;padding:0 18px;display:flex;align-items:center;border:0;border-radius:18px;background:transparent;color:#707983;text-decoration:none;font-size:11px;white-space:nowrap}
.dash-nav .dash-primary-nav button.active{background:#13b8cf;color:#fff;box-shadow:0 3px 8px rgba(19,184,207,.18)}
.dash-nav .dash-primary-nav a:hover{color:#171a1e;background:#fff}
#practicePage .summary-column .best-card{min-height:118px}

@media(max-width:1180px){
  #practicePage .dash-grid{grid-template-columns:minmax(300px,1fr) minmax(360px,1.1fr) 200px}
  .dash-nav .dash-primary-nav button,.dash-nav .dash-primary-nav a{padding:0 12px}
}
@media(max-width:900px){
  #practicePage .dash-grid{grid-template-columns:1fr}
  #practicePage .practice-card,#practicePage .summary-column,#practicePage .quick-settings-card{grid-column:1;grid-row:auto}
  .dash-nav .dash-primary-nav{display:flex;order:3;width:100%;justify-content:center;margin:0}
}

/* Final home composition — matched to the approved three-column dashboard. */
.site-notice{display:flex;width:min(760px,calc(100% - 48px));min-height:52px;margin:18px auto 0;padding:12px 18px;gap:12px}
.site-notice-dot{width:9px;height:9px}.site-notice div{gap:12px}.site-notice strong{font-size:14px}.site-notice span:not(.site-notice-dot){font-size:13px;color:#52717a}
.dash-nav{position:relative;height:112px;padding:0 max(34px,calc((100vw - 1470px)/2));gap:0;border:0;box-shadow:0 4px 24px rgba(38,54,72,.04)}
.dash-brand{gap:14px;font-size:29px;letter-spacing:-1px}.brand-logo{width:62px;height:62px}.dash-brand>.brand-name{display:inline;width:auto;height:auto;padding:0;border-radius:0;background:transparent;color:#17191c;font:inherit}
.dash-nav .dash-primary-nav{position:absolute;left:50%;top:19px;transform:translateX(-50%);height:74px;margin:0;padding:10px 22px;gap:20px;border:1px solid #e7ebef;border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(38,54,72,.08)}
.dash-nav .dash-primary-nav button,.dash-nav .dash-primary-nav a{height:52px;padding:0 20px;gap:12px;border-radius:12px;font-size:18px;color:#4d566a}
.dash-nav .dash-primary-nav button.active{background:#13b8cf;color:#fff;box-shadow:0 5px 12px rgba(19,184,207,.22)}
.nav-icon{width:26px;height:26px;flex:0 0 auto;stroke:currentColor}.dash-actions{margin-left:auto;gap:26px}.dash-actions button{height:54px;padding:0 19px;display:flex;align-items:center;gap:11px;border-color:#dce3e9;border-radius:12px;background:#fff;color:#414a5d;font-size:18px}.action-icon{width:25px;height:25px;stroke:currentColor}.language-links{display:none}
.dash-content{width:min(1470px,calc(100% - 64px));padding:28px 0 52px}.dash-footer{width:min(1470px,calc(100% - 64px))}
#practicePage .dash-grid{grid-template-columns:minmax(470px,1.03fr) minmax(540px,1.2fr) 250px;align-items:stretch;gap:28px;height:842px}
#practicePage .practice-card{min-height:842px;padding:28px;border-radius:18px}.practice-heading{display:flex;align-items:center;gap:12px}.section-icon{width:34px;height:34px;flex:0 0 auto;stroke:currentColor}.practice-heading h2{margin:0!important;font-size:25px!important;letter-spacing:-1px;text-align:left!important}.mode-intro{margin:22px 0 18px!important;color:#3f4859!important;font-size:16px!important;text-align:left!important}
#practicePage .practice-card #modeMount{margin:0}.practice-card .mode-strip{grid-template-columns:repeat(3,1fr);gap:18px}.practice-card .mode-strip .scenario{min-height:144px;padding:16px 8px;gap:13px;border-color:#e6ebf0;border-radius:12px;background:#fff;color:#263044}.practice-card .mode-strip .scenario.active{border-color:#12b8d2;box-shadow:inset 0 0 0 1px #12b8d2;background:#fff}.practice-card .mode-strip .scenario small,.practice-card .mode-strip .scenario>b{display:none}.practice-card .mode-strip .scenario strong{font-size:16px;color:#263044}.practice-card .mode-icon{width:48px;height:48px;background:transparent!important}.practice-card .mode-svg{width:38px;height:38px;color:#58627a;stroke-width:1.65}.practice-card .scenario.active .mode-svg{color:#12b8d2}
.selected-drill-card{min-height:232px;margin-top:26px;padding:24px 28px;border:1px solid #e7edf1;border-radius:12px;background:#fff;display:flex;flex-direction:column;justify-content:space-between}.selected-drill-copy{display:flex;align-items:flex-start;gap:16px}.selected-drill-copy .practice-symbol{width:46px;height:46px;flex:0 0 auto;margin:0;border-radius:12px}.selected-drill-copy .practice-svg{width:30px;height:30px}.selected-drill-copy h3{margin:4px 0 8px;font-size:22px;letter-spacing:-.5px}.selected-drill-copy p{margin:0;color:#596579;font-size:14px;line-height:1.65}.selected-drill-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px}.selected-drill-metrics>div{display:grid;gap:8px;padding:0 20px;border-left:1px solid #e7edf1}.selected-drill-metrics>div:first-child{padding-left:0;border-left:0}.selected-drill-metrics span{color:#697386;font-size:13px}.selected-drill-metrics strong{font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
#practicePage .practice-card>.control-row,#practicePage .practice-card>.sound-row{display:none!important}.challenge-button{height:76px;margin-top:28px;border-radius:8px;font-size:24px;gap:12px;box-shadow:0 8px 18px rgba(19,184,207,.2)}.challenge-button svg{width:31px;height:31px;stroke:currentColor}.challenge-button kbd{display:none}
#practicePage .summary-column{height:842px;grid-template-rows:330px 1fr;gap:20px}.summary-column #dailyMount{min-height:0}.legacy-dashboard-data{display:none}.recent-performance-card{min-height:0;padding:24px;border-radius:18px;display:grid;grid-template-rows:auto auto 1fr;gap:16px}.recent-performance-card>header{display:flex;align-items:center;justify-content:space-between}.recent-performance-card>header>div{display:flex;align-items:center;gap:11px}.recent-performance-card>header strong{font-size:23px;letter-spacing:-.7px}.recent-performance-card>header button{height:42px;padding:0 14px;border:1px solid #dce3e9;border-radius:8px;background:#fff;color:#4f596a;font-size:14px}.performance-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.performance-stat-row>div{min-height:128px;padding:20px 16px;border:1px solid #e7edf1;border-radius:10px;display:grid;align-content:start;gap:8px}.performance-stat-row span{color:#657084;font-size:13px}.performance-stat-row strong{font-size:25px;font-variant-numeric:tabular-nums}.performance-stat-row small{color:#1ba76b;font-size:12px}.performance-chart{min-height:0;padding:16px;border:1px solid #e7edf1;border-radius:10px}.performance-chart>header{display:flex;align-items:center;justify-content:space-between}.performance-chart>header strong{font-size:15px}.performance-chart>header small{color:#818b99;font-size:12px}.chart-plot{position:relative;height:205px;margin:8px 0 0 34px;border-left:1px solid #dce3e9;border-bottom:1px solid #dce3e9;background:repeating-linear-gradient(to bottom,transparent 0 39px,#edf1f4 40px 41px)}.chart-plot svg{position:absolute;inset:0;width:100%;height:176px;overflow:visible}.chart-plot .chart-area{fill:url(#scoreFill)}.chart-plot polyline{fill:none;stroke:#13b8cf;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.chart-plot polyline+circle{fill:#13b8cf}.chart-y{position:absolute;left:-35px;color:#697386;font-size:11px}.chart-y.y1{top:-6px}.chart-y.y2{top:35px}.chart-y.y3{top:76px}.chart-y.y4{top:117px}.chart-dates{position:absolute;left:0;right:0;bottom:-22px;height:14px;color:#697386;font-size:11px}.chart-dates span{position:absolute;top:0;white-space:nowrap}.chart-tip{position:absolute;z-index:3;left:0;top:0;padding:7px 10px;border:1px solid #d9e6ec;border-radius:9px;background:rgba(255,255,255,.97);box-shadow:0 10px 22px rgba(18,52,66,.16);pointer-events:none;white-space:nowrap;text-align:center;opacity:0;transform:translateY(5px);transition:opacity .16s ease,transform .16s ease}.chart-tip.show{opacity:1;transform:translateY(0)}.chart-tip strong{display:block;font-size:13px;color:#16232b;font-variant-numeric:tabular-nums}.chart-tip small{display:block;margin-top:2px;font-size:10px;color:#7b8892}.chart-guide{stroke:#9fd9e4;stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .16s ease}.chart-guide.show{opacity:1}
#dailyMount .daily-challenge{display:block;height:330px;min-height:0;margin:0;padding:24px;border-radius:18px;background:#fff;color:#17191c}.daily-challenge-heading{display:flex;align-items:center;justify-content:space-between}.daily-challenge-heading>div{display:flex;align-items:center;gap:12px}.daily-challenge-heading strong{font-size:25px;letter-spacing:-.7px}.daily-challenge-heading button{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#5d6879;font-size:14px}.daily-challenge-heading button svg{width:18px;height:18px;stroke:currentColor}.daily-challenge-panel{height:220px;margin-top:22px;padding:24px;border:1px solid #e6edf1;border-radius:10px;display:flex;flex-direction:column;justify-content:space-between}.daily-challenge-copy{display:flex;align-items:center;gap:16px}.daily-trophy{width:48px;height:48px;color:#11b8d4;stroke:currentColor}.daily-challenge-copy>div{display:grid;gap:8px}.daily-challenge-copy strong{font-size:21px}.daily-challenge-copy small{color:#5b6678;font-size:14px}.daily-metrics{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:end}.daily-metrics>div{display:grid;gap:8px;padding:0 20px;border-left:1px solid #e7edf1}.daily-metrics>div:first-child{padding-left:0;border-left:0}.daily-metrics span{color:#697386;font-size:13px}.daily-metrics strong{font-size:24px;line-height:1;font-variant-numeric:tabular-nums}.daily-metrics button{height:50px;padding:0 22px;border:0;border-radius:8px;background:#13b8cf;color:#fff;font-size:16px;font-weight:700}.chart-dots circle{fill:#13b8cf;stroke:#fff;stroke-width:2;transition:r .16s ease}.chart-dots circle.is-active{r:6;fill:#0f9db2}
#practicePage .quick-settings-card{min-height:842px;padding:28px;border-radius:18px}.quick-settings-card #quickSettingsMount{display:block}.quick-setting-section{padding:0 0 32px}.quick-setting-section+.quick-setting-section{padding-top:32px;border-top:1px solid #e5ebef}.quick-setting-section>header{display:flex;align-items:center;gap:12px;margin:0 0 20px}.quick-setting-section>header .section-icon{width:28px;height:28px;color:#475267}.quick-setting-section>header strong{font-size:19px;letter-spacing:-.4px}.quick-settings-card .control-row{margin:0;padding:0;border:0}.quick-settings-card .control-label{display:none}.quick-settings-card .game-preset-select{width:100%;height:52px;padding:0 15px;border:1px solid #dce3e9;border-radius:9px;background:#fff;color:#263044;font-size:16px}.quick-settings-card .segmented.light{height:48px;padding:0;gap:8px;border:0;border-radius:0;background:transparent}.quick-settings-card .segmented.light button{height:48px;border:1px solid #dce3e9;border-radius:8px;background:#fff;font-size:14px}.quick-settings-card .segmented.light button.active{border-color:#13b8cf;background:#fff;color:#0aa9c2;box-shadow:none}.quick-settings-card .target-size-options{grid-template-columns:1fr!important}.quick-settings-card .target-size-options button:not(.active){display:none}.quick-settings-card .target-size-options button.active:after{content:"⌄";float:right;margin-left:10px;color:#647084}.quick-settings-card .target-size-hint{display:none}
@media(max-width:1320px){.dash-nav{padding-left:28px;padding-right:28px}.dash-brand{font-size:24px}.brand-logo{width:52px;height:52px}.dash-nav .dash-primary-nav{gap:8px;padding:10px}.dash-nav .dash-primary-nav button,.dash-nav .dash-primary-nav a{padding:0 14px;font-size:15px}.dash-actions{gap:10px}.dash-actions button{padding:0 13px;font-size:15px}#practicePage .dash-grid{height:auto;grid-template-columns:minmax(420px,1fr) minmax(470px,1.2fr)}#practicePage .practice-card,#practicePage .summary-column{height:auto;min-height:0}#practicePage .quick-settings-card{grid-column:1/-1;grid-row:2;min-height:0}.quick-settings-card #quickSettingsMount{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.quick-setting-section,.quick-setting-section+.quick-setting-section{padding:0;border:0}.quick-setting-section>header{margin-bottom:14px}}
@media(max-width:900px){.dash-nav{height:auto;min-height:82px;padding:12px 20px;flex-wrap:wrap}.dash-nav .dash-primary-nav{position:static;transform:none;order:3;width:100%;height:auto;margin:0;justify-content:center}.dash-actions{margin-left:auto}.dash-content{width:calc(100% - 28px)}#practicePage .dash-grid{grid-template-columns:1fr;height:auto}#practicePage .practice-card,#practicePage .summary-column,#practicePage .quick-settings-card{grid-column:1;grid-row:auto;height:auto;min-height:0}.quick-settings-card #quickSettingsMount{grid-template-columns:1fr}.summary-column #dailyMount .daily-challenge{height:auto}.performance-stat-row{grid-template-columns:repeat(2,1fr)}}

/* Lower practice area: settings stay under the six drill choices, as in the reference. */
#practicePage .dash-grid{grid-template-columns:minmax(620px,.88fr) minmax(680px,1.12fr);height:auto;align-items:stretch;gap:28px}
#practicePage .practice-card{grid-column:1;grid-row:1;min-height:0;height:auto;padding:28px;display:flex;flex-direction:column}
#practicePage .summary-column{grid-column:2;grid-row:1;height:auto;grid-template-rows:330px auto;gap:20px}
#practicePage .selected-drill-card{display:none}
#practicePage .practice-card #modeMount{order:2}
#practicePage .practice-card .practice-heading{order:0}
#practicePage .practice-card .mode-intro{order:1}
#practicePage .practice-card #gameControl{order:3;display:grid!important}
#practicePage .practice-card #durationControl{order:4;display:grid!important}
#practicePage .practice-card #targetSizeControl{order:5;display:grid!important}
#practicePage .practice-card #movingCountRow,#practicePage .practice-card #movingDirectionRow{order:6;display:none!important}
#practicePage .practice-card #sensitivityControl{order:8;display:grid!important}
#practicePage .practice-card>.sound-row{order:9;display:none!important}
#practicePage .practice-card #startButton{order:10}
#practicePage .practice-card>#gameControl,#practicePage .practice-card>#durationControl,#practicePage .practice-card>#targetSizeControl,#practicePage .practice-card>#sensitivityControl{grid-template-columns:150px minmax(0,1fr);align-items:center;gap:16px;height:62px;margin:12px 0 0;padding:0 16px;border:1px solid #e5ebef;border-radius:10px;background:#fff}
#practicePage .practice-card .control-label{margin:0}.practice-card .control-label label{font-size:16px;color:#293346}.practice-card .control-label span{display:none}.practice-card .game-preset-select{width:100%;height:48px;padding:0 14px;border:1px solid #dce3e9;border-radius:8px;background:#fff;color:#263044;font-size:16px}
#practicePage .practice-card #durationControl .segmented.light{height:42px;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px;padding:0;border:0;background:transparent}#practicePage .practice-card #durationControl .segmented.light button{height:42px;min-width:66px;padding:0 12px;border:1px solid #dce3e9;border-radius:8px;background:#fff;font-size:14px}#practicePage .practice-card #durationControl .segmented.light button.active{border-color:#13b8cf;color:#0aa9c2;background:#fff;box-shadow:none}
#practicePage .practice-card #targetSizeControl .target-size-options{height:48px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))!important;padding:0;border:0;background:transparent;gap:8px}#practicePage .practice-card #targetSizeControl .target-size-options button{display:block;height:48px;border:1px solid #dce3e9;border-radius:8px;background:#fff;color:#263044;font-size:14px}#practicePage .practice-card #targetSizeControl .target-size-options button.active{border-color:#13b8cf;color:#0aa9c2;background:#f5fdfe;box-shadow:none}.practice-card .target-size-hint{display:none}
.practice-card .game-sensitivity-hint{display:none}
#practicePage .practice-card #sensitivityControl .control-label{display:flex;justify-content:space-between;align-items:center}#practicePage .practice-card #sensitivityControl .control-label output{padding:0;border:0;background:transparent;color:#263044;font-size:16px;font-weight:600}#practicePage .practice-card #sensitivityControl .sensitivity-control{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;height:48px}#practicePage .practice-card #sensitivityControl .sensitivity-control input{width:100%;accent-color:#13b8cf}#practicePage .practice-card #sensitivityControl .sensitivity-control span{font-size:11px;color:#83909c;white-space:nowrap}
#practicePage .practice-card #startButton{height:76px;margin-top:20px}
@media(max-width:1320px){#practicePage .dash-grid{grid-template-columns:minmax(460px,.92fr) minmax(560px,1.08fr)}}
@media(max-width:900px){#practicePage .dash-grid{grid-template-columns:1fr}#practicePage .practice-card,#practicePage .summary-column{grid-column:1;grid-row:auto}#practicePage .practice-card>#gameControl,#practicePage .practice-card>#durationControl,#practicePage .practice-card>#targetSizeControl,#practicePage .practice-card>#sensitivityControl{grid-template-columns:1fr;height:auto;gap:8px;padding:12px 14px}.practice-card .control-label{margin-bottom:0}}

/* Keep the main dashboard and the long-form section on the same content rail. */
.dash-content,.dash-footer{width:min(1400px,calc(100% - 64px))}
.practice-card .mode-strip .scenario{min-height:132px}
#practicePage .practice-card>#gameControl,#practicePage .practice-card>#durationControl,#practicePage .practice-card>#targetSizeControl,#practicePage .practice-card>#sensitivityControl{margin-top:20px}
#practicePage .practice-card #startButton{margin-top:27px}
.seo-content{width:min(1400px,calc(100% - 64px))}

/* Compact the upper dashboard to roughly 80% while keeping the SEO copy readable. */
.dash-nav{height:90px;padding:0 max(28px,calc((100vw - 1120px)/2))}
.dash-brand{gap:11px;font-size:23px;letter-spacing:-.8px}.brand-logo{width:50px;height:50px}
.dash-nav .dash-primary-nav{top:15px;height:59px;padding:8px 18px;gap:16px;border-radius:15px}
.dash-nav .dash-primary-nav button,.dash-nav .dash-primary-nav a{height:42px;padding:0 16px;gap:9px;border-radius:10px;font-size:14px}
.nav-icon{width:21px;height:21px}.dash-actions{gap:16px}.dash-actions button{height:43px;padding:0 15px;gap:8px;border-radius:10px;font-size:14px}.action-icon{width:21px;height:21px}
.dash-content,.dash-footer,.seo-content{width:min(1120px,calc(100% - 56px))}.dash-content{padding:22px 0 42px}
#practicePage .dash-grid{grid-template-columns:minmax(490px,.88fr) minmax(540px,1.12fr);gap:22px}
#practicePage .practice-card{padding:22px;border-radius:15px}
#practicePage .practice-card .practice-heading{gap:9px}.practice-heading h2{font-size:20px!important}.section-icon{width:27px;height:27px}
#practicePage .practice-card .mode-intro{margin:17px 0 14px!important;font-size:13px!important}
.practice-card .mode-strip{gap:14px}.practice-card .mode-strip .scenario{min-height:106px;padding:13px 7px;gap:10px;border-radius:10px}.practice-card .mode-strip .scenario strong{font-size:13px}.practice-card .mode-icon{width:38px;height:38px}.practice-card .mode-svg{width:30px;height:30px}
#practicePage .practice-card>#gameControl,#practicePage .practice-card>#durationControl,#practicePage .practice-card>#targetSizeControl,#practicePage .practice-card>#sensitivityControl{grid-template-columns:120px minmax(0,1fr);gap:13px;height:50px;margin-top:14px;padding:0 13px;border-radius:8px}
.practice-card .control-label label{font-size:13px}.practice-card .game-preset-select{height:39px;padding:0 11px;font-size:13px;border-radius:7px}
#practicePage .practice-card #durationControl .segmented.light{height:36px;gap:6px}.practice-card #durationControl .segmented.light button{height:36px;min-width:55px;padding:0 9px;font-size:12px}
#practicePage .practice-card #targetSizeControl .target-size-options{height:39px;gap:6px}.practice-card #targetSizeControl .target-size-options button{height:39px;font-size:12px;border-radius:7px}
#practicePage .practice-card #sensitivityControl .control-label output{font-size:13px}.practice-card #sensitivityControl .sensitivity-control{height:39px;gap:7px}.practice-card #sensitivityControl .sensitivity-control span{font-size:9px}
#practicePage .practice-card #startButton{height:61px;margin-top:22px;border-radius:7px;font-size:19px}.challenge-button svg{width:25px;height:25px}
#practicePage .summary-column{grid-template-rows:264px auto;gap:16px}.summary-column .recent-performance-card{padding:19px;border-radius:15px;gap:13px}.recent-performance-card>header strong{font-size:18px}.recent-performance-card>header button{height:34px;padding:0 11px;font-size:12px}.performance-stat-row{gap:9px}.performance-stat-row>div{min-height:102px;padding:16px 13px;gap:6px;border-radius:8px}.performance-stat-row span{font-size:11px}.performance-stat-row strong{font-size:20px}.performance-stat-row small{font-size:10px}.performance-chart{padding:13px;border-radius:8px}.performance-chart>header strong{font-size:13px}.performance-chart>header small{font-size:10px}.chart-plot{height:164px;margin-left:28px}.chart-plot svg{height:141px}.chart-y{left:-29px;font-size:9px}.chart-y.y2{top:29px}.chart-y.y3{top:60px}.chart-y.y4{top:91px}.chart-dates{font-size:9px;bottom:-18px}
#dailyMount .daily-challenge{height:264px;padding:19px;border-radius:15px}.daily-challenge-heading>div{gap:9px}.daily-challenge-heading strong{font-size:20px}.daily-challenge-heading button{font-size:12px}.daily-challenge-heading button svg{width:15px;height:15px}.daily-challenge-panel{height:176px;margin-top:17px;padding:19px;border-radius:8px}.daily-challenge-copy{gap:13px}.daily-trophy{width:38px;height:38px}.daily-challenge-copy>div{gap:6px}.daily-challenge-copy strong{font-size:17px}.daily-challenge-copy small{font-size:11px}.daily-metrics{gap:0}.daily-metrics>div{gap:6px;padding:0 14px}.daily-metrics span{font-size:10px}.daily-metrics strong{font-size:19px}.daily-metrics button{height:40px;padding:0 17px;border-radius:7px;font-size:13px}
.seo-content{padding:34px}.seo-intro>span{font-size:10px}.seo-intro h1{font-size:28px}.seo-intro p,.seo-features p,.seo-faq p{font-size:13px;line-height:1.85}.seo-features{gap:14px;margin-top:27px}.seo-features article{padding:20px}.seo-features h3{font-size:14px}.seo-faq{margin-top:30px;padding-top:25px}.seo-faq h2{font-size:20px}.seo-faq summary{padding:16px 0;font-size:13px}
@media(max-width:900px){.dash-nav{height:auto;min-height:72px;padding:12px 20px}.dash-nav .dash-primary-nav{position:static;transform:none;order:3;width:100%;height:auto;justify-content:center}.dash-content,.dash-footer,.seo-content{width:calc(100% - 28px)}#practicePage .dash-grid{grid-template-columns:1fr}.practice-card .mode-strip{gap:10px}.practice-card .mode-strip .scenario{min-height:92px}.seo-content{padding:25px}}
@media(max-width:560px){.dash-brand{font-size:0}.brand-logo{width:40px;height:40px}.dash-nav .dash-primary-nav{gap:4px;padding:6px 8px}.dash-nav .dash-primary-nav button,.dash-nav .dash-primary-nav a{padding:0 8px;font-size:11px}.dash-actions{gap:6px}.dash-actions button{padding:0 9px;font-size:11px}.practice-card .mode-strip{grid-template-columns:repeat(2,1fr)}.seo-content{padding:21px}.seo-intro h1{font-size:23px}}
@media(max-width:1180px) and (min-width:901px){#practicePage .dash-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}.dash-nav{padding-left:20px;padding-right:20px}.dash-brand{font-size:20px}.brand-logo{width:44px;height:44px}.dash-nav .dash-primary-nav{gap:6px;padding:7px 10px}.dash-nav .dash-primary-nav button,.dash-nav .dash-primary-nav a{padding:0 10px;font-size:12px}.dash-actions{gap:8px}.dash-actions button{padding:0 10px;font-size:12px}}
#practicePage .recent-performance-card>header select{height:34px;padding:0 10px;border:1px solid #dce3e9;border-radius:8px;background:#fff;color:#4f596a;font-size:12px;outline:0}#practicePage .recent-performance-card>header select:focus{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.1)}
#practicePage .practice-card .sensitivity-input{width:100%;height:39px;padding:0 11px;border:1px solid #dce3e9;border-radius:7px;background:#fff;color:#263044;font-size:13px;font-variant-numeric:tabular-nums;outline:0;accent-color:auto}#practicePage .practice-card .sensitivity-input:focus{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.1)}#practicePage .practice-card #sensitivityValue{display:none!important}
.performance-chart .chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#9aa3ad;font-size:11px}.performance-chart .chart-empty.hidden{display:none!important}.performance-chart .chart-plot{position:relative}

/* Mouse parameters and optional aiming trail. DPI and sensitivity share one
   compact row so the practice card stays easy to scan. */
/* One column: this row used to pair the DPI field with the sensitivity field,
   and a single child in a two-column grid left half the row empty. */
#practicePage .practice-card .aim-parameter-row{order:7;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:14px;min-width:0}
#practicePage .practice-card .aim-parameter-row input[type=range]{accent-color:#13b8cf}
#practicePage .practice-card .aim-parameter-row>.control-row{display:grid!important;grid-template-columns:1fr;gap:7px;min-width:0;height:auto;margin:0;padding:12px 13px;border:1px solid #e5ebef;border-radius:8px;background:#fff;overflow:hidden}
#practicePage .practice-card .aim-parameter-row .control-label{display:flex;align-items:center;justify-content:space-between;margin:0}
#practicePage .practice-card .aim-parameter-row .control-label label{font-size:13px;color:#293346}
#practicePage .practice-card .aim-parameter-row .control-label output{font-size:11px;color:#7d8998}
#practicePage .practice-card .aim-parameter-row .sensitivity-input{width:100%;height:39px;padding:0 11px;border:1px solid #dce3e9;border-radius:7px;background:#fff;color:#263044;font-size:13px;font-variant-numeric:tabular-nums;outline:0}
#practicePage .practice-card .aim-parameter-row .game-sensitivity-hint{display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:9px;color:#8a96a4}
#practicePage .practice-card>#trailToggleRow{order:8;display:flex!important;align-items:center;justify-content:space-between;min-height:58px;margin-top:14px;padding:0 13px;border-top:1px solid #e5ebef;border-bottom:1px solid #e5ebef}
#practicePage .practice-card>#trailToggleRow>span{display:grid;gap:4px}
#practicePage .practice-card>#trailToggleRow label{font-size:13px;color:#293346}
#practicePage .practice-card>#trailToggleRow small{font-size:9px;color:#8a96a4}
#practicePage .practice-card>#startButton{order:10}
.settings-parameter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings-parameter-row .settings-field{min-width:0}
.settings-parameter-row .settings-field:first-child{border-bottom:0}
.settings-parameter-row .settings-field:last-child{border-bottom:0}
.mouse-trail{position:absolute;inset:0;z-index:11;width:100%;height:100%;pointer-events:none;opacity:.9}
@media(max-width:620px){#practicePage .practice-card .aim-parameter-row{grid-template-columns:1fr}.settings-parameter-row{grid-template-columns:1fr;gap:0}}

/* Overlay pages must keep their viewport-centred transform. The dashboard
   entrance animation has higher selector specificity and previously replaced
   translate(-50%, -50%), which made these panels appear in the lower-right. */
.dashboard .dash-content>.overlay-page:not(.hidden){position:fixed!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;animation:overlay-panel-in .3s cubic-bezier(.2,.7,.2,1) both!important}

.performance-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.performance-duration-toggle{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #dce3e9;border-radius:8px;background:#f3f5f6}
.performance-duration-toggle button{height:28px;min-width:48px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#7b8694;font-size:11px;white-space:nowrap}
.performance-duration-toggle button.active{background:#13b8cf;color:#fff;box-shadow:0 2px 6px rgba(19,184,207,.2)}
@media(max-width:620px){.performance-heading-actions{flex-wrap:wrap;gap:6px}.performance-duration-toggle button{min-width:44px;padding:0 6px;font-size:10px}}

/* Compact personal-best row: the score is local, while the rank is queried
   from the same mode + 30/60-second global leaderboard scope. */
.performance-personal-best{min-height:46px;margin-top:58px;padding:9px 13px;border:1px solid #e2eaee;border-radius:8px;background:#fbfdfe;display:flex;align-items:center;justify-content:space-between;gap:12px}.performance-personal-best>span{overflow:hidden;color:#6c7887;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.performance-personal-best>div{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}.performance-personal-best strong{font-size:18px;line-height:1;font-variant-numeric:tabular-nums;color:#202832}.performance-personal-best small{color:#0aa8a0;font-size:11px;white-space:nowrap}
@media(max-width:620px){.performance-personal-best{gap:8px;padding:8px 10px}.performance-personal-best>span{font-size:10px}.performance-personal-best>div{gap:7px}.performance-personal-best strong{font-size:16px}.performance-personal-best small{font-size:10px}}

/* Keep the language switch visible in the final desktop header.  It used to
   be hidden by the approved home-composition rule, leaving no way to return
   from /zh/ to /en/ (or the other way around). */
.dash-nav .language-links{display:flex;align-items:center;flex:0 0 auto;margin-left:18px}

/* Verified account and authentication */
.auth-nav-button{height:43px;max-width:170px;padding:0 13px;display:flex;align-items:center;gap:8px;border:1px solid #dce3e9;border-radius:10px;background:#fff;color:#334056;font-size:13px;white-space:nowrap;overflow:hidden}.auth-nav-button:hover{border-color:#13b8cf;color:#078fa3}.auth-nav-button>span:last-child{overflow:hidden;text-overflow:ellipsis}.auth-avatar{width:25px;height:25px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#e7f8fa;color:#0798ad;font-size:11px;font-weight:800}.ranking-eligibility{display:block;margin:9px 0 0;text-align:center;color:#85909e;font-size:10px;line-height:1.4}.ranking-eligibility.eligible{color:#159c68}.auth-modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:22px;background:rgba(10,17,24,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.auth-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 44px);overflow:auto;padding:28px;border:1px solid #dfe6eb;border-radius:18px;background:#fff;color:#172033;box-shadow:0 24px 70px rgba(13,25,38,.24)}.auth-close{position:absolute;right:15px;top:13px;width:34px;height:34px;border:0;border-radius:9px;background:#f4f6f7;color:#657181;font-size:24px;line-height:1}.auth-brand{display:flex;align-items:center;gap:12px;margin:0 38px 22px 0}.auth-brand img{width:38px;height:38px}.auth-brand>div{display:grid;gap:3px}.auth-brand strong{font-size:18px}.auth-brand small{color:#83909e;font-size:11px}.auth-tabs{height:42px;margin-bottom:18px;padding:4px;display:grid;grid-template-columns:1fr 1fr;border-radius:10px;background:#f2f5f6}.auth-tabs button{border:0;border-radius:7px;background:transparent;color:#7b8794;font-size:13px}.auth-tabs button.active{background:#fff;color:#12202c;font-weight:700;box-shadow:0 1px 5px rgba(22,35,48,.1)}.auth-form{display:grid;gap:13px}.auth-form label{display:grid;gap:6px;color:#536071;font-size:11px}.auth-form input{width:100%;height:44px;padding:0 13px;border:1px solid #dbe2e7;border-radius:9px;background:#fff;color:#172033;font-size:13px;outline:0}.auth-form input:focus{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.1)}.auth-submit,.auth-secondary{height:44px;border:0;border-radius:9px;background:#13b8cf;color:#fff;font-size:13px;font-weight:750}.auth-submit:disabled{opacity:.55}.auth-link-button{height:30px;border:0;background:transparent;color:#078fa3;font-size:11px}.auth-policy{color:#8b96a2;font-size:9px;line-height:1.55;text-align:center}.auth-form-heading{display:grid;gap:4px;margin-bottom:3px}.auth-form-heading strong{font-size:17px}.auth-form-heading small{font-size:11px;color:#87929e}.auth-status{min-height:18px;margin:14px 0 0;color:#e05252;font-size:11px;line-height:1.5;text-align:center}.auth-status.success{color:#159c68}.auth-message-panel{padding:12px 3px 2px;text-align:center}.auth-message-panel>b{width:52px;height:52px;margin:0 auto 13px;display:grid;place-items:center;border-radius:50%;background:#e1f8ed;color:#18a66a;font-size:24px}.auth-message-panel strong{display:block;font-size:18px}.auth-message-panel p{margin:8px 0 20px;color:#7e8995;font-size:11px;line-height:1.65}.auth-message-panel .auth-submit{width:100%}.auth-user-panel{text-align:center}.account-avatar{width:66px;height:66px;margin:5px auto 12px;display:grid;place-items:center;border-radius:50%;background:#e2f8fa;color:#0798ad;font-size:25px;font-weight:800}.auth-user-panel>strong{display:block;font-size:20px}.auth-user-panel>span{display:block;margin:5px 0 12px;color:#818c99;font-size:12px}.verified-account-badge{display:inline-flex;padding:7px 11px;border-radius:20px;background:#e2f8ed;color:#15885b;font-size:10px;font-weight:700}.auth-user-panel p{margin:16px 0;color:#6f7b89;font-size:11px;line-height:1.65}.auth-user-panel .auth-secondary{width:100%;border:1px solid #dfe4e8;background:#fff;color:#4c5968}.result-account-identity{min-height:38px;padding:0 12px;display:flex;align-items:center;border:1px solid #343b44;background:#0d1014;color:#dce4eb;font-size:10px}.score-publish input[type="hidden"]{display:none}.score-publish .result-account-identity{grid-column:1}.score-publish button{grid-column:2}.score-publish small{grid-column:1/-1}
@media(max-width:1180px){.auth-nav-button{max-width:128px;padding:0 9px;font-size:11px}.dash-nav .language-links{margin-left:7px}}
@media(max-width:900px){.auth-nav-button{margin-left:0}.ranking-eligibility{font-size:9px}}
@media(max-width:620px){.auth-nav-button{max-width:44px;padding:0 8px}.auth-nav-button>span:last-child{display:none}.auth-modal{padding:10px}.auth-card{padding:22px 18px;max-height:calc(100vh - 20px)}.score-publish .result-account-identity,.score-publish button{grid-column:1}}

/* Lightweight interaction polish: motion supports hierarchy without getting in the way of aiming. */
@keyframes dash-rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes dash-nav-rise-in{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes soft-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes notice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(19,184,207,.18)}50%{box-shadow:0 0 0 6px rgba(19,184,207,0)}}
@keyframes chart-draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes chart-fill-in{from{opacity:0}to{opacity:1}}
@keyframes overlay-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes overlay-panel-in{from{opacity:0;transform:translate(-50%,calc(-50% + 14px)) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes metric-pop{0%{transform:translateY(4px);opacity:.35}100%{transform:translateY(0);opacity:1}}
.dashboard .dash-nav>*{animation:dash-rise-in .5s cubic-bezier(.2,.7,.2,1) both}
.dashboard .dash-nav .dash-brand{animation-delay:.04s}.dashboard .dash-nav .dash-primary-nav{animation-delay:.1s}.dashboard .dash-nav .dash-actions{animation-delay:.16s}.dashboard .dash-nav .language-links{animation-delay:.22s}
.dashboard .dash-nav .dash-primary-nav{animation-name:dash-nav-rise-in}
.dashboard .dash-content>.dash-page{animation:dash-rise-in .55s .12s cubic-bezier(.2,.7,.2,1) both}
.dashboard .site-notice{animation:dash-rise-in .45s .08s cubic-bezier(.2,.7,.2,1) both}.site-notice-dot{animation:notice-pulse 2.4s ease-in-out infinite}
.practice-card .mode-strip .scenario{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease,background-color .22s ease}
.practice-card .mode-strip .scenario:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(31,67,82,.08)}
.practice-card .mode-strip .scenario:active{transform:translateY(-1px) scale(.985)}
.practice-card .mode-strip .scenario.active .mode-icon{animation:soft-float 2.8s ease-in-out infinite}
.challenge-button,#dailyStartButton,.daily-challenge-heading button,.dash-actions button,.dash-primary-nav button,.dash-primary-nav a{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
.challenge-button:hover,#dailyStartButton:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(19,184,207,.24)}
.challenge-button:active,#dailyStartButton:active,.dash-actions button:active,.dash-primary-nav button:active{transform:translateY(1px) scale(.985)}
.daily-trophy{animation:soft-float 3.1s ease-in-out infinite;transform-origin:center}
.daily-challenge-panel,.recent-performance-card,.practice-card{transition:box-shadow .25s ease,border-color .25s ease}
.daily-challenge-panel:hover,.recent-performance-card:hover,.practice-card:hover{box-shadow:0 12px 30px rgba(26,55,70,.07)}
.metric-updated{animation:metric-pop .34s cubic-bezier(.2,.7,.2,1)}
.performance-chart .chart-area{animation:chart-fill-in .7s ease both}.performance-chart polyline{stroke-dasharray:900;animation:chart-draw .9s cubic-bezier(.2,.7,.2,1) both}.chart-dots circle{animation:metric-pop .35s ease both}
.performance-stat-row>div{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.performance-stat-row>div:hover{transform:translateY(-3px);border-color:#c9e9ed;box-shadow:0 8px 18px rgba(31,67,82,.07)}
.page-overlay-backdrop:not(.hidden){animation:overlay-backdrop-in .22s ease both}.overlay-page:not(.hidden){animation:overlay-panel-in .3s cubic-bezier(.2,.7,.2,1) both}
.page-close-button,.text-button,.record-filters button,.records-card tbody tr{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.page-close-button:hover{transform:rotate(4deg)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* Keep every control inside its card at narrow desktop widths. */
#practicePage .practice-card>*,#practicePage .practice-card>.control-row>*{min-width:0;max-width:100%}
#practicePage .practice-card>.control-row{min-width:0;overflow:hidden}
#practicePage .practice-card .segmented.light,#practicePage .practice-card .target-size-options,#practicePage .practice-card .game-preset-select,#practicePage .practice-card .sensitivity-input{min-width:0;max-width:100%}
#practicePage .practice-card .segmented.light button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Compact the three dense controls without shrinking their labels. */
#practicePage .practice-card #durationControl .segmented.light{width:max-content;max-width:100%;height:34px;padding:0;gap:6px}
#practicePage .practice-card #durationControl .segmented.light button{height:34px;min-width:52px;padding:0 10px;font-size:11px}
#practicePage .practice-card #targetSizeControl .target-size-options{width:min(100%,300px);height:36px;gap:5px}
#practicePage .practice-card #targetSizeControl .target-size-options button{height:36px;font-size:11px}

@keyframes chart-refresh-in{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes chart-refresh-line{from{stroke-dashoffset:900;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
@keyframes chart-refresh-dot{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.performance-chart.chart-refreshing{animation:chart-refresh-in .38s cubic-bezier(.2,.7,.2,1) both}
.performance-chart.chart-refreshing polyline{stroke-dasharray:900;animation:chart-refresh-line .8s cubic-bezier(.2,.7,.2,1) both}
.performance-chart.chart-refreshing .chart-area{animation:chart-fill-in .65s ease both}
.performance-chart.chart-refreshing .chart-dots circle{transform-box:fill-box;transform-origin:center;animation:chart-refresh-dot .34s cubic-bezier(.2,.7,.2,1) both}
@media(max-width:900px){#practicePage .practice-card #targetSizeControl .target-size-options{width:100%}}
@media(prefers-reduced-motion:reduce){.performance-chart.chart-refreshing,.performance-chart.chart-refreshing polyline,.performance-chart.chart-refreshing .chart-area,.performance-chart.chart-refreshing .chart-dots circle{animation:none!important}}

/* The trend should draw like a chart, not make the whole panel jump. */
@keyframes chart-wipe-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes chart-line-draw{from{stroke-dashoffset:1800;opacity:.3}to{stroke-dashoffset:0;opacity:1}}
@keyframes chart-area-fade{from{opacity:0}to{opacity:1}}
@keyframes chart-dot-appear{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
.performance-chart.chart-refreshing{animation:none!important}
.performance-chart.chart-refreshing .chart-plot svg{animation:chart-wipe-in .82s cubic-bezier(.2,.7,.2,1) both}
.performance-chart.chart-refreshing polyline{stroke-dasharray:1800;animation:chart-line-draw .82s cubic-bezier(.2,.7,.2,1) both}
.performance-chart.chart-refreshing .chart-area{animation:chart-area-fade .6s ease .08s both}
.performance-chart.chart-refreshing .chart-dots circle{animation:chart-dot-appear .26s ease both}
@media(prefers-reduced-motion:reduce){.performance-chart.chart-refreshing .chart-plot svg,.performance-chart.chart-refreshing polyline,.performance-chart.chart-refreshing .chart-area,.performance-chart.chart-refreshing .chart-dots circle{animation:none!important;clip-path:none!important}}

/* The trend line is animated by renderPerformanceTrend() frame-by-frame. */
.performance-chart polyline,.performance-chart .chart-area,.performance-chart .chart-dots circle{animation:none!important}

/* Training feedback stays subtle so the crosshair and target remain the focus. */
@keyframes countdown-pop{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}
@keyframes result-card-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
#game .hud{transition:background-color .25s ease,border-color .25s ease,transform .2s ease}
#game .hud:hover{transform:translateY(-2px);background:rgba(35,39,40,.68)}
#game .countdown strong{animation:countdown-pop .42s cubic-bezier(.2,.7,.2,1) both}
#game .result:not(.hidden) .result-card{animation:result-card-in .38s cubic-bezier(.2,.7,.2,1) both}
#game .result-metrics>div{transition:background-color .18s ease,transform .18s ease}#game .result-metrics>div:hover{background:rgba(255,255,255,.025);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){#game .countdown strong,#game .result:not(.hidden) .result-card,#game .result-radar-tip{animation:none!important}#game *,#game *::before,#game *::after{transition:none!important}}

/* Gun placement editor: a lightweight CSS range preview keeps settings fast
   and mirrors the same left/right, up/down and depth controls used by the
   WebGL view model. */
.scene-card{min-width:0}
.scene-card>header{margin-bottom:16px}
.weapon-placement-preview{height:auto;min-height:180px;aspect-ratio:16/9;margin:0 0 14px;padding:0;overflow:hidden;position:relative;isolation:isolate;background:linear-gradient(145deg,#eef4f3 0%,var(--scene-preview-bg,#dbe5e3) 58%,#c7d4d2 100%);border:1px solid #d7e4e6;border-radius:12px;box-shadow:inset 0 -18px 35px rgba(74,109,111,.08)}
.weapon-placement-preview:before,.weapon-placement-preview:after{content:none!important}
.weapon-placement-preview .preview-back-wall{position:absolute;left:13%;right:13%;top:13%;bottom:27%;z-index:0;border:1px solid rgba(117,145,147,.48);background:linear-gradient(180deg,#e8f0ef,#d3e0de);box-shadow:inset 0 0 0 6px rgba(255,255,255,.2)}
.weapon-placement-preview .preview-back-wall:before,.weapon-placement-preview .preview-back-wall:after{content:"";position:absolute;background:rgba(110,144,147,.28)}
.weapon-placement-preview .preview-back-wall:before{left:8%;right:8%;top:11%;height:1px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.weapon-placement-preview .preview-back-wall:after{left:50%;top:0;bottom:0;width:1px;opacity:.35}
.weapon-placement-preview .preview-floor{position:absolute;left:-12%;right:-12%;bottom:-31%;height:58%;z-index:0;background:repeating-linear-gradient(90deg,transparent 0 42px,rgba(110,144,147,.16) 43px 44px),repeating-linear-gradient(0deg,rgba(205,220,219,.2) 0 31px,rgba(112,146,149,.14) 32px 33px);transform:perspective(260px) rotateX(57deg);transform-origin:top}
.weapon-placement-preview .preview-frame{position:absolute;left:11.8%;right:11.8%;top:10.5%;bottom:25.2%;z-index:1;border:2px solid rgba(139,163,164,.4);pointer-events:none}
.weapon-placement-preview .preview-target{position:absolute;z-index:2;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 9%,#68e0e3 12%,#19baca 70%,#0c93a8 100%);box-shadow:0 4px 8px rgba(33,113,121,.18)}
.weapon-placement-preview .preview-target.target-a{left:42%;top:36%}.weapon-placement-preview .preview-target.target-b{left:54%;top:48%;width:18px;height:18px}.weapon-placement-preview .preview-target.target-c{left:64%;top:34%;width:13px;height:13px}
.weapon-placement-preview .preview-crosshair{position:absolute;left:50%;top:51%;z-index:3;width:15px;height:15px;transform:translate(-50%,-50%);border:2px solid #17252b;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.75)}
.weapon-placement-preview .preview-crosshair:before,.weapon-placement-preview .preview-crosshair:after{content:"";position:absolute;background:#13b8cf}.weapon-placement-preview .preview-crosshair:before{left:5px;top:-5px;width:2px;height:21px}.weapon-placement-preview .preview-crosshair:after{left:-5px;top:5px;width:21px;height:2px}
.weapon-placement-preview .preview-weapon{position:absolute;left:var(--weapon-preview-x,66%);top:var(--weapon-preview-y,82%);z-index:4;width:30%;min-width:108px;padding:0;border:0;background:transparent;line-height:0;cursor:grab;transform:translate(-50%,-50%) rotate(-12deg) scale(var(--weapon-preview-scale,1));transform-origin:50% 50%;filter:drop-shadow(0 8px 7px rgba(34,58,63,.22));transition:left .12s ease,top .12s ease,transform .12s ease,filter .12s ease}
.weapon-placement-preview .preview-weapon:active{cursor:grabbing}.weapon-placement-preview .preview-weapon:hover,.weapon-placement-preview .preview-weapon:focus-visible{filter:drop-shadow(0 10px 9px rgba(34,58,63,.28));outline:none}.weapon-placement-preview .preview-weapon:focus-visible{box-shadow:0 0 0 3px rgba(19,184,207,.35);border-radius:8px}
.weapon-placement-preview .preview-weapon svg{display:block;width:100%;height:auto;overflow:visible}.preview-gun-slide{fill:#344a55;stroke:#17252b;stroke-width:2}.preview-gun-top{fill:#6f858c}.preview-gun-grip{fill:#24363f;stroke:#17252b;stroke-width:2}.preview-gun-trigger{fill:none;stroke:#8ca3a8;stroke-width:4}.preview-gun-barrel{fill:#17252b}.preview-gun-accent{fill:#13b8cf;opacity:.75}.preview-gun-sight{fill:#17252b}.preview-gun-suppressor{display:block;fill:#18242b;stroke:#10171c;stroke-width:2}
.weapon-placement-preview .preview-caption{position:absolute;left:13px;top:11px;z-index:5;color:#31474d!important;font-size:10px!important;font-weight:700;letter-spacing:.35px;text-shadow:none}.weapon-placement-preview .preview-hint{position:absolute;left:13px;bottom:10px;z-index:5;color:#60767b!important;font-size:9px!important;letter-spacing:0}
#sceneDownloadStatus[data-state="loading"]{color:#c77942}#sceneDownloadStatus[data-state="ready"]{color:#15936d}#sceneDownloadStatus[data-state="error"]{color:#d95858}
#startButton:disabled,#dailyStartButton:disabled{cursor:wait;filter:saturate(.55);opacity:.68}
.weapon-position-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:2px}.weapon-position-fields .settings-field{min-width:0;margin:0;padding:10px 11px;border:1px solid #e1e8ea;border-radius:9px;background:#fff;overflow:hidden}.weapon-position-fields .settings-field>div{margin-bottom:8px}.weapon-position-fields .settings-field label{font-size:10px;color:#52636b}.weapon-position-fields .settings-field output{font-size:10px;color:#0a9fb4;font-variant-numeric:tabular-nums}.weapon-position-fields input{width:100%;height:18px;margin:0;accent-color:#13b8cf}.weapon-position-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}.weapon-position-actions .text-button{flex:0 0 auto;padding:7px 10px;font-size:10px}.weapon-position-actions .settings-help{margin:0;line-height:1.45}.scene-select-row{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #edf0f2}.scene-select-row>label{font-size:10px;color:#52636b}.scene-select-row .settings-select{width:100%}.scene-card>.settings-help{display:block;margin-top:9px;line-height:1.45}
@media(max-width:720px){.weapon-position-fields{grid-template-columns:1fr}.weapon-placement-preview{min-height:155px}.weapon-position-actions{align-items:flex-start;flex-direction:column;gap:7px}}

/* Per-weapon viewmodel tuning. The controls intentionally expose the same
   camera-local concepts used by FPS viewmodels: position, scale and pose. */
.weapon-tuning-family-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}.weapon-tuning-family-button{min-height:48px;padding:8px 10px;border:1px solid #d9e3e5;border-radius:10px;background:#f7faf9;color:#52636b;text-align:left;font-size:11px;font-weight:800;transition:.16s ease}.weapon-tuning-family-button span{display:block;margin-top:3px;color:#8b989d;font-size:8px;font-weight:500}.weapon-tuning-family-button:hover{border-color:#13b8cf;background:#f0fbfc}.weapon-tuning-family-button.active{border-color:#13b8cf;background:#e6f8fa;color:#087e91;box-shadow:0 0 0 2px rgba(19,184,207,.1)}.weapon-tuning-summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;padding:10px 12px;border:1px solid #dfe8e9;border-radius:9px;background:#f9fbfb;color:#52636b}.weapon-tuning-summary strong{font-size:12px;color:#1f343d}.weapon-tuning-summary span{font-size:9px;color:#819097}.weapon-tuning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:2px}.weapon-tuning-grid .settings-field{min-width:0;margin:0;padding:11px 11px;border:1px solid #e1e8ea;border-radius:9px;background:#fff;overflow:hidden}.weapon-tuning-grid .settings-field>div{margin-bottom:8px;gap:8px;align-items:flex-start}.weapon-tuning-grid .settings-field label{font-size:10px;line-height:1.25;color:#52636b}.weapon-tuning-grid .settings-field output{flex:0 0 auto;font-size:10px;color:#0a9fb4;font-variant-numeric:tabular-nums}.weapon-tuning-grid input{width:100%;height:18px;margin:0;accent-color:#13b8cf}.weapon-tuning-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px;padding:12px;border:1px solid #d9e5e6;border-radius:10px;background:#f3f9f8}.weapon-tuning-readout>div{min-width:0;display:grid;gap:5px}.weapon-tuning-readout span{font-size:9px;color:#75878d}.weapon-tuning-readout code{display:block;overflow-wrap:anywhere;font:700 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#17404a}.weapon-tuning-readout small{grid-column:1/-1;margin-top:1px;font-size:8px;line-height:1.45;color:#7e8f94}.weapon-tuning-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}.weapon-tuning-actions .text-button{flex:0 0 auto;padding:7px 10px;font-size:10px}.weapon-tuning-actions .settings-help{margin:0;line-height:1.45}.weapon-placement-preview .preview-weapon{transform:translate(-50%,-50%) translate(var(--weapon-preview-x,0),var(--weapon-preview-y,0)) scale(var(--weapon-preview-scale,1)) rotate(var(--weapon-preview-rotate,0deg));transform-origin:center center}.weapon-placement-preview .preview-weapon svg{filter:drop-shadow(0 6px 6px rgba(30,57,62,.2))}
@media(max-width:860px){.weapon-tuning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.weapon-tuning-readout{grid-template-columns:1fr 1fr}.weapon-tuning-readout>div:last-of-type{grid-column:1/-1}}
@media(max-width:620px){.weapon-tuning-family-tabs{grid-template-columns:1fr}.weapon-tuning-family-button{min-height:42px}.weapon-tuning-grid{grid-template-columns:1fr}.weapon-tuning-readout{grid-template-columns:1fr}.weapon-tuning-readout>div:last-of-type{grid-column:auto}.weapon-tuning-actions{align-items:flex-start;flex-direction:column;gap:7px}}
.weapon-placement-preview .preview-weapon{transform:translate(-50%,-50%) rotate(var(--weapon-preview-rotate,0deg)) scale(var(--weapon-preview-scale,1))}
.weapon-tuning-family-button{font-size:12px}.weapon-tuning-family-button span{font-size:10px}.weapon-tuning-summary strong{font-size:13px}.weapon-tuning-summary span{font-size:11px}.weapon-tuning-grid .settings-field label,.weapon-tuning-grid .settings-field output{font-size:12px}.weapon-tuning-readout span{font-size:11px}.weapon-tuning-readout code{font-size:11px}.weapon-tuning-readout small,.weapon-tuning-actions .settings-help{font-size:10px}

/* Header layout: brand, the three primary destinations, and account tools
   each own a stable column. This prevents utility buttons from colliding
   with the centered navigation at ordinary laptop widths. */
.dashboard .dash-nav{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(330px,1fr);align-items:center;column-gap:20px;padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px)}
.dashboard .dash-nav .dash-brand{grid-column:1;justify-self:start;min-width:0}
.dashboard .dash-nav .dash-primary-nav{grid-column:2;position:static;left:auto;top:auto;transform:none;margin:0;justify-self:center;animation-name:dash-rise-in}
.dash-utility-nav{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px;min-width:0}
.dash-utility-nav .dash-actions{margin:0;gap:8px}
.dash-utility-nav .language-links{display:flex;margin:0}
.dash-utility-nav .auth-nav-button{flex:0 1 auto}

@media(max-width:1240px) and (min-width:901px){
  .dashboard .dash-nav{grid-template-columns:minmax(150px,1fr) auto minmax(275px,1fr);column-gap:14px;padding-left:20px;padding-right:20px}
  .dashboard .dash-nav .dash-brand{font-size:20px}.dashboard .dash-nav .brand-logo{width:44px;height:44px}
  .dashboard .dash-nav .dash-primary-nav{height:56px;padding:7px 10px;gap:5px}
  .dashboard .dash-nav .dash-primary-nav button,.dashboard .dash-nav .dash-primary-nav a{height:40px;padding:0 10px;gap:7px;font-size:12px}
  .dashboard .dash-nav .nav-icon{width:19px;height:19px}
  .dash-utility-nav{gap:7px}.dash-utility-nav .dash-actions{gap:6px}
  .dash-utility-nav .dash-actions button{width:42px;padding:0;justify-content:center}
  .dash-utility-nav .dash-actions button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .dash-utility-nav .auth-nav-button{max-width:126px}
}

@media(max-width:900px){
  .dashboard .dash-nav{display:grid;grid-template-columns:auto minmax(0,1fr);height:auto;min-height:0;padding:10px 16px 12px;column-gap:12px;row-gap:10px}
  .dashboard .dash-nav .dash-brand{grid-column:1;grid-row:1}
  .dash-utility-nav{grid-column:2;grid-row:1;justify-self:end;gap:7px}
  .dashboard .dash-nav .dash-primary-nav{grid-column:1/-1;grid-row:2;position:static;width:min(100%,560px);height:auto;min-width:0;padding:6px;gap:4px;justify-content:stretch}
  .dashboard .dash-nav .dash-primary-nav button,.dashboard .dash-nav .dash-primary-nav a{flex:1;justify-content:center;min-width:0;padding:0 9px;font-size:12px}
  .dash-utility-nav .dash-actions{gap:5px}.dash-utility-nav .dash-actions button{width:40px;padding:0;justify-content:center}
  .dash-utility-nav .dash-actions button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .dash-utility-nav .auth-nav-button{max-width:126px}
}

@media(max-width:560px){
  .dashboard .dash-nav .dash-brand>.brand-name{display:none}.dashboard .dash-nav .brand-logo{width:38px;height:38px}
  .dash-utility-nav .auth-nav-button{width:40px;max-width:40px;padding:0 7px}.dash-utility-nav .auth-nav-button>span:last-child{display:none}
  .dash-utility-nav .language-links a{min-width:25px;padding:0 5px}
  .dashboard .dash-nav .dash-primary-nav button,.dashboard .dash-nav .dash-primary-nav a{height:38px;padding:0 5px;gap:5px;font-size:10px}
  .dashboard .dash-nav .nav-icon{width:17px;height:17px}
}
/* Registration email code */
.auth-code-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:9px;align-items:end}.auth-code-button{height:44px;border:1px solid #13b8cf;border-radius:9px;background:#eefbfc;color:#078fa3;font-size:11px;font-weight:750;white-space:nowrap}.auth-code-button:hover:not(:disabled){background:#13b8cf;color:#fff}.auth-code-button:disabled{cursor:not-allowed;opacity:.58}@media(max-width:430px){.auth-code-row{grid-template-columns:minmax(0,1fr) 98px}}
/* Compact account editor */
.account-name-editor{margin:17px 0 14px;text-align:left}.account-name-editor>label{display:block;margin-bottom:6px;color:#687586;font-size:11px}.account-name-editor>div{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px}.account-name-editor input{width:100%;height:42px;padding:0 12px;border:1px solid #dbe2e7;border-radius:9px;color:#172033;font-size:13px;outline:0}.account-name-editor input:focus{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.1)}.account-name-editor button{height:42px;border:0;border-radius:9px;background:#13b8cf;color:#fff;font-size:12px;font-weight:750}.account-name-editor button:disabled{opacity:.55}.auth-user-panel .auth-secondary{margin-top:0}.auth-user-panel>span{margin-bottom:9px}.verified-account-badge{padding:6px 10px}
.account-region-editor{margin:0 0 14px;text-align:left}.account-region-editor>label{display:block;margin-bottom:6px;color:#687586;font-size:11px}.account-region-editor>div{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px}.account-region-editor select{width:100%;height:42px;padding:0 10px;border:1px solid #dbe2e7;border-radius:9px;background:#fff;color:#172033;font-size:12px;outline:0}.account-region-editor select:focus{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.1)}.account-region-editor button{height:42px;border:0;border-radius:9px;background:#13b8cf;color:#fff;font-size:12px;font-weight:750}.account-region-editor button:disabled{opacity:.55}.account-region-editor>small{display:block;margin-top:5px;color:#8b96a2;font-size:9px}.account-profile-preference{margin:0 0 14px;text-align:left}.account-profile-preference>label:first-child{display:block;margin-bottom:7px;color:#687586;font-size:11px}.account-preference-toggle{display:flex;align-items:center;gap:9px;color:#48596a;font-size:12px}.account-preference-toggle input{accent-color:#13b8cf;width:16px;height:16px}.account-profile-preference>small{display:block;margin-top:5px;color:#8b96a2;font-size:9px}
.account-public-id{margin-top:-3px!important;color:#0b9fb4!important;font:11px ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.4px}
/* Post-registration name step */
.auth-onboarding-panel{text-align:center}.auth-onboarding-panel>strong{display:block;margin:0 0 18px;font-size:20px}.auth-onboarding-panel .account-avatar{margin-top:0}.auth-onboarding-panel .auth-form{text-align:left}.auth-onboarding-panel .auth-form>small{margin-top:-4px;color:#84909d;font-size:10px;text-align:center}

/* Local training-record replay */
.record-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}.watch-local-replay{height:28px;padding:0 10px;border:1px solid #a7e5ec;border-radius:8px;background:#effbfd;color:#078fa3;font-size:8px;font-weight:800;white-space:nowrap}.watch-local-replay:hover{border-color:#13b8cf;background:#13b8cf;color:#fff}.local-replay-active{overflow:hidden}.local-replay-dialog{position:fixed;z-index:1600;inset:0;display:grid;place-items:center;padding:22px;background:rgba(24,34,39,.65);backdrop-filter:blur(15px)}.local-replay-dialog.hidden{display:none}.local-replay-card{width:min(1160px,calc(100vw - 30px));max-height:calc(100vh - 30px);overflow:auto;border:1px solid rgba(255,255,255,.82);border-radius:20px;background:#f8fbfc;box-shadow:0 30px 90px rgba(12,24,30,.34);color:#17232b}.local-replay-card>header{display:flex;align-items:center;justify-content:space-between;min-height:82px;padding:17px 20px;border-bottom:1px solid #e5ebee;background:#fff}.local-replay-card>header span{color:#0ba8bd;font-size:9px;font-weight:850;letter-spacing:1.7px}.local-replay-card>header h2{margin:4px 0 2px;font-size:19px;line-height:1.2}.local-replay-card>header p{margin:0;color:#84939c;font-size:10px}.local-replay-close{flex:0 0 auto;width:38px;height:38px;border:1px solid #dde6ea;border-radius:10px;background:#f3f7f8;color:#566772;font-size:23px}.local-replay-close:hover{background:#e8f5f7;color:#078fa3}.local-replay-stage{position:relative;margin:16px}.local-replay-viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #cbd7da;border-radius:14px;background:#adbdba;box-shadow:0 10px 30px rgba(25,48,57,.12)}.local-replay-viewport.hidden,.local-replay-controls.hidden,.local-replay-state.hidden{display:none}.local-replay-viewport canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.local-replay-state{display:grid;place-items:center;align-content:center;min-height:min(61vh,620px);padding:48px;border:1px solid #dfe8eb;border-radius:14px;background:radial-gradient(circle at 50% 38%,#fff,#edf4f5 72%);text-align:center}.local-replay-state i{width:38px;height:38px;border:3px solid #d7e5e8;border-top-color:#13b8cf;border-radius:50%;animation:local-replay-spin .8s linear infinite}.local-replay-state strong{margin-top:18px;color:#21333d;font-size:18px}.local-replay-state p{max-width:520px;margin:7px 0 0;color:#7d909a;font-size:12px;line-height:1.7}.local-replay-state.error i{animation:none;border-color:#efc9c9;border-top-color:#d76b6b}@keyframes local-replay-spin{to{transform:rotate(360deg)}}.local-replay-hud{position:absolute;z-index:3;top:14px;left:50%;display:flex;gap:7px;transform:translateX(-50%);pointer-events:none}.local-replay-hud>div{min-width:108px;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(27,39,45,.74);box-shadow:0 5px 18px rgba(0,0,0,.14);backdrop-filter:blur(7px)}.local-replay-hud span{display:block;color:#aabac1;font-size:8px;letter-spacing:.8px}.local-replay-hud strong{display:block;margin-top:1px;color:#fff;font-size:16px}.local-replay-crosshair{position:absolute;z-index:2;top:50%;left:50%;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none}.local-replay-crosshair:before,.local-replay-crosshair:after{position:absolute;content:"";background:#20d5e5;box-shadow:0 0 0 1px rgba(0,0,0,.55)}.local-replay-crosshair:before{top:8px;left:0;width:18px;height:2px}.local-replay-crosshair:after{top:0;left:8px;width:2px;height:18px}.local-replay-viewport>em{position:absolute;z-index:3;right:14px;bottom:12px;padding:4px 7px;border:1px solid rgba(255,255,255,.17);border-radius:5px;background:rgba(15,25,31,.52);color:#d5e2e6;font-size:8px;font-style:normal;font-weight:800;letter-spacing:1px}.local-replay-controls{position:absolute;z-index:5;right:14px;bottom:13px;left:14px;display:grid;grid-template-columns:auto minmax(120px,1fr) auto auto;align-items:center;gap:11px;padding:9px 10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(8,17,22,.77);box-shadow:0 12px 32px rgba(0,0,0,.24);backdrop-filter:blur(14px)}.local-replay-controls button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:78px;height:34px;padding:0 12px;border:0;border-radius:8px;background:#13b8cf;color:#04242a}.local-replay-controls button span{font-size:11px}.local-replay-controls button b{font-size:10px}.local-replay-controls input{width:100%;height:20px;accent-color:#1cc9dc}.local-replay-controls output{min-width:86px;color:#dce8ec;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right}.local-replay-controls label{display:flex;align-items:center;gap:6px;height:32px;padding-left:9px;border-left:1px solid #34444b;color:#96a8af;font-size:9px}.local-replay-controls select{height:30px;padding:0 6px;border:1px solid rgba(255,255,255,.15);border-radius:7px;background:rgba(22,37,45,.92);color:#f2f8fa;font:inherit}@media(max-width:700px){.record-actions{gap:4px}.watch-local-replay{padding:0 7px}.local-replay-dialog{padding:0}.local-replay-card{width:100vw;max-height:100vh;border:0;border-radius:0}.local-replay-card>header{min-height:72px;padding:13px 14px}.local-replay-card>header h2{font-size:15px}.local-replay-stage{margin:10px}.local-replay-state{min-height:70vh;padding:30px 20px}.local-replay-hud{top:8px;gap:4px}.local-replay-hud>div{min-width:76px;padding:6px 8px}.local-replay-hud strong{font-size:12px}.local-replay-controls{right:8px;bottom:8px;left:8px;grid-template-columns:auto 1fr auto;padding:7px}.local-replay-controls label{display:none}.local-replay-controls input{grid-column:1/-1;grid-row:2}.local-replay-viewport{border-radius:9px}}
.rewards-family-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:-3px 0 16px;padding:3px;width:max-content;max-width:100%;border:1px solid #e3e9eb;border-radius:9px;background:#f4f7f8}.rewards-family-tabs button{height:28px;padding:0 11px;border:0;border-radius:7px;background:transparent;color:#87939b;font-size:10px}.rewards-family-tabs button.active{background:#fff;color:#087f91;box-shadow:0 1px 5px rgba(31,55,63,.08);font-weight:800}.rewards-family-tabs button.hidden{display:none}
/* The settings editor uses a real WebGL viewmodel, not the former SVG
   silhouette. The old button remains as a transparent drag/keyboard target. */
.weapon-placement-preview[data-preview-3d="true"]{min-height:300px;background:radial-gradient(circle at 50% 34%,#294957 0%,#142630 56%,#0d1820 100%);border-color:#315663;box-shadow:inset 0 -32px 44px rgba(3,11,17,.38),inset 0 1px 0 rgba(161,239,242,.12)}
.weapon-placement-preview[data-preview-3d="true"]:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(78,192,202,.08),transparent 35%,rgba(0,0,0,.16))}
.weapon-preview-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.weapon-placement-preview[data-preview-3d="true"] .preview-weapon.preview-weapon-hitbox{position:absolute;inset:0;z-index:8;width:100%;height:100%;min-width:0;padding:0;border:0;background:transparent;opacity:0;transform:none!important;filter:none;cursor:grab;transition:none}
.weapon-placement-preview[data-preview-3d="true"] .preview-weapon.preview-weapon-hitbox:active{cursor:grabbing}
.weapon-placement-preview[data-preview-3d="true"] .preview-weapon.preview-weapon-hitbox svg{display:none}
.weapon-preview-overlay{position:absolute;left:14px;right:14px;top:13px;z-index:6;display:grid;gap:4px;pointer-events:none;color:#d9fbfb;text-shadow:0 1px 2px rgba(0,0,0,.42)}
.weapon-preview-overlay strong{font-size:11px;letter-spacing:.55px;color:#baf5f5}
.weapon-preview-overlay code{font:700 10px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;color:#d8eeee;letter-spacing:.05px}
.weapon-preview-status{position:absolute;left:14px;bottom:11px;z-index:7;color:#a8d1d2;font:600 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none}
.weapon-preview-status[data-state="error"]{color:#ffc1a5}
.weapon-placement-preview[data-preview-3d="true"] .preview-caption,.weapon-placement-preview[data-preview-3d="true"] .preview-hint{z-index:7;color:#d9fbfb!important;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.weapon-placement-preview[data-preview-3d="true"] .preview-caption{left:auto;right:14px;top:auto;bottom:11px;font-size:10px!important}
.weapon-placement-preview[data-preview-3d="true"] .preview-hint{display:none}

/* Account balance lives with account identity; utility actions stay compact. */
.auth-nav-copy{display:grid;min-width:0;gap:1px;text-align:left;line-height:1.08}.auth-nav-copy>span{overflow:hidden;text-overflow:ellipsis}.auth-coin-balance{color:#9a6e18;font-size:9px;font-weight:750;font-variant-numeric:tabular-nums}.dash-utility-nav .dash-actions button.active{border-color:#13b8cf;background:#eaf9fb;color:#078fa3;box-shadow:0 0 0 2px rgba(19,184,207,.08)}
@media(max-width:1600px) and (min-width:901px){.dash-utility-nav .dash-actions button{width:43px;padding:0;justify-content:center}.dash-utility-nav .dash-actions button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dash-utility-nav .auth-nav-button{max-width:150px}}
@media(max-width:1100px) and (min-width:901px){.dashboard .dash-nav .dash-brand>.brand-name{display:none}.dashboard .dash-nav .dash-primary-nav{gap:3px;padding:7px}.dashboard .dash-nav .dash-primary-nav button,.dashboard .dash-nav .dash-primary-nav a{width:40px;padding:0;justify-content:center}.dashboard .dash-nav .dash-primary-nav button span,.dashboard .dash-nav .dash-primary-nav a span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dash-utility-nav .dash-actions{gap:2px}.dash-utility-nav .auth-nav-button{width:40px;max-width:40px;padding:0 7px}.dash-utility-nav .auth-nav-button>.auth-nav-copy{display:none}}
@media(max-width:900px){.dash-utility-nav .dash-actions button{width:36px}.dash-utility-nav{gap:5px}.dash-utility-nav .dash-actions{gap:3px}}
@media(max-width:560px){.dash-utility-nav .dash-actions button{width:32px;height:38px;padding:0}.dash-utility-nav .dash-actions{gap:2px}.dash-utility-nav .action-icon{width:18px;height:18px}}
@media(max-width:360px){.dashboard .dash-nav{row-gap:8px}.dash-utility-nav{display:contents}.dash-utility-nav .dash-actions{grid-column:1/-1;grid-row:3;justify-self:center}.dash-utility-nav .auth-nav-button{grid-column:2;grid-row:1;justify-self:end;margin-right:58px}.dash-utility-nav .language-links{grid-column:2;grid-row:1;justify-self:end}.dashboard .dash-nav .dash-primary-nav{grid-row:2}}

/* Single-row header: primary destinations stay on top, and the five tools
   appear as a flyout when the navigation bar is hovered. */
.dashboard .dash-nav{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto;align-items:center;height:auto;min-height:96px;column-gap:24px;padding:14px clamp(24px,4vw,64px)}
.dashboard .dash-nav .dash-brand{grid-column:1;grid-row:1;justify-self:start}
.dashboard .dash-nav .dash-primary-nav{grid-column:2;grid-row:1;position:static;left:auto;top:auto;transform:none;margin:0;justify-self:center;gap:14px;padding:8px 16px}
.dashboard .dash-nav .dash-utility-nav{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:10px;min-width:0}
.dashboard .dash-nav .dash-utility-nav .auth-nav-button{max-width:190px}
.dashboard .dash-nav .language-links{display:flex;margin:0}

@media(max-width:1240px) and (min-width:901px){
  .dashboard .dash-nav{column-gap:16px;padding-left:22px;padding-right:22px}
  .dashboard .dash-nav .dash-primary-nav{gap:8px;padding:7px 10px}
  .dashboard .dash-nav .dash-primary-nav button,.dashboard .dash-nav .dash-primary-nav a{width:auto;padding:0 12px;font-size:13px}
  .dashboard .dash-nav .dash-primary-nav button span,.dashboard .dash-nav .dash-primary-nav a span{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:nowrap}
}

@media(max-width:900px){
  .dashboard .dash-nav{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0;padding:12px 16px;row-gap:10px;column-gap:12px}
  .dashboard .dash-nav .dash-brand{grid-column:1;grid-row:1}
  .dashboard .dash-nav .dash-utility-nav{grid-column:2;grid-row:1;justify-self:end}
  .dashboard .dash-nav .dash-primary-nav{grid-column:1/-1;grid-row:2;position:static;transform:none;width:100%;justify-content:center;padding:7px;gap:6px}
}

@media(max-width:560px){
  .dashboard .dash-nav .dash-utility-nav .auth-nav-button{width:40px;max-width:40px;padding:0 7px}
  .dashboard .dash-nav .dash-utility-nav .auth-nav-button>.auth-nav-copy{display:none}
  .dashboard .dash-nav .dash-primary-nav button,.dashboard .dash-nav .dash-primary-nav a{padding:0 7px;font-size:11px}
}

/* Paused training.
   The prompt is the only interactive screen layer during a run - a click
   anywhere resumes - so the card just has to present the state, how the run is
   going and the way out. .pause-live is filled from the live HUD by motion.js;
   without that script the row stays hidden and the card still reads correctly. */
@keyframes pause-scrim-in{from{opacity:0}to{opacity:1}}
@keyframes pause-card-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pause-dot-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}}
.screen-layer.pointer-prompt{z-index:32;cursor:pointer;background:radial-gradient(125% 95% at 50% 42%,rgba(10,12,15,.6) 0%,rgba(8,10,12,.86) 58%,rgba(5,6,8,.95) 100%);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.pointer-prompt:not(.hidden){animation:pause-scrim-in .22s ease both}
.pointer-prompt:not(.hidden) .pause-card{animation:pause-card-in .38s cubic-bezier(.2,.7,.2,1) both}
.pause-card{width:min(456px,92vw);padding:20px 22px 18px;display:grid;gap:15px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:linear-gradient(180deg,rgba(26,30,35,.97),rgba(16,19,22,.98));box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.pause-card-head{display:flex;align-items:center;gap:12px;min-width:0}
.pause-card .pause-state{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 9px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.3px;white-space:nowrap}
.pause-card .pause-state i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--accent);animation:pause-dot-pulse 2.2s ease-in-out infinite}
.pause-card .pause-mode{min-width:0;margin-left:auto;overflow:hidden;color:#7d8792;font-size:11px;letter-spacing:.6px;text-overflow:ellipsis;white-space:nowrap}
.pause-live{display:none;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}
.pause-live.is-ready{display:grid}
.pause-live>div{padding:12px 14px;border-right:1px solid rgba(255,255,255,.06)}
.pause-live>div:last-child{border-right:0}
.pause-live span{display:block;color:#77818c;font-size:9px;letter-spacing:.8px}
.pause-live strong{display:block;margin-top:6px;color:#f4f7f9;font-size:22px;font-variant-numeric:tabular-nums}
.pause-cta{margin:0;text-align:center}
.pause-cta strong{display:block;color:#fff;font-size:26px;font-weight:800;letter-spacing:-.4px}
.pause-cta small{display:block;margin-top:7px;color:#8b949e;font-size:10px;letter-spacing:.4px}
.pause-actions{display:flex;align-items:center;justify-content:center;gap:10px}
.pointer-prompt .pause-exit-button{position:static;min-width:138px;height:40px;margin:0;padding:0 20px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.05);color:#e8edf1;font-size:11px;font-weight:700;letter-spacing:.5px;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.pointer-prompt .pause-exit-button:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42);transform:translateY(-1px)}
.pointer-prompt .pause-exit-button:active{transform:translateY(0) scale(.985)}
/* Restart sits next to the exit button and carries the accent: leaving the
   drill is the quiet option, running it again is the expected one. */
.pointer-prompt .pause-restart-button{position:static;min-width:138px;height:40px;margin:0;padding:0 20px;border:1px solid color-mix(in srgb,var(--accent) 58%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.pointer-prompt .pause-restart-button:hover{background:color-mix(in srgb,var(--accent) 34%,transparent);border-color:color-mix(in srgb,var(--accent) 78%,transparent);transform:translateY(-1px)}
.pointer-prompt .pause-restart-button:active{transform:translateY(0) scale(.985)}
@media(max-width:560px){
  .pause-card{width:calc(100vw - 28px);padding:17px 16px 15px;gap:13px}
  .pause-live>div{padding:10px 11px}
  .pause-live strong{font-size:19px}
  .pause-cta strong{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  .pointer-prompt:not(.hidden),.pointer-prompt:not(.hidden) .pause-card{animation:none!important}
  .pause-card .pause-state i{animation:none!important}
}

/* Paused training, brand palette.
   The drill can be running with any target colour, and the training ground
   rewrites --accent to it - those pale cyans are fine on the dark HUD but have
   no contrast on a white panel. Pinning --accent on the card itself keeps the
   state pill, the pulse and the restart button on the site cyan, and the rest
   is the same white-and-hairline surface the result card and the dashboard use.
   Leaving the drill is still the quiet option and running it again still
   carries the accent. */
.pause-card{
  --accent:#13b8cf;
  border:1px solid #e5e7ea;border-radius:20px;background:#fff;color:#171a1e;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.pause-card .pause-state{border-color:#dcf1f5;background:#f2fbfd;color:#0aa4ba}
.pause-card .pause-mode{color:#8b949e}
.pause-live{border:1px solid #edf0f2;border-radius:12px;background:#f8fafb}
.pause-live>div{border-right:1px solid #edf0f2}
.pause-live span{color:#8b949e}
.pause-live strong{color:#171a1e}
.pause-cta strong{color:#171a1e}
.pause-cta small{color:#8e969f}
.pointer-prompt .pause-exit-button{border:1px solid #dce3e9;background:#fff;color:#334056}
.pointer-prompt .pause-exit-button:hover{background:#f5f8fa;border-color:#c9d3da;color:#171a1e}
.pointer-prompt .pause-restart-button{border:1px solid #a7e5ec;background:#effbfd;color:#078fa3}
.pointer-prompt .pause-restart-button:hover{background:#e2f7fb;border-color:#13b8cf;color:#0a93a8}

@media(max-width:560px){
  .pause-card{border-radius:16px}
}

/* The result card grew a challenge block, so on short screens it can outgrow
   the viewport. Scrolling the layer keeps the top of the numbers visible
   instead of clipping them. */
#result{display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:22px 0}
#result .result-card{margin:auto;max-height:none;overflow:visible}

/* Challenge a friend, on the result screen.
   A separator and one full-width button: the accent is already this card's
   primary action colour, so the block needs no box of its own to stand out.
   When a challenge was just completed the verdict line above says how it went
   and the button becomes the way to pass it on. */
.challenge-verdict{display:grid;gap:3px;margin-top:20px;text-align:center}
.challenge-verdict strong{color:var(--accent);font-size:15px;letter-spacing:-.2px}
.challenge-verdict small{color:#7f8994;font-size:10px}
.challenge-verdict[data-tone="loss"] strong{color:#ff9b9b}
.challenge-verdict[data-tone="win"] strong{color:var(--accent)}
.challenge-verdict[data-tone="tie"] strong{color:#ffd479}
.challenge-cta{display:grid;justify-items:center;gap:9px;margin-top:20px;padding-top:20px;border-top:1px solid #232a31}
.challenge-message{width:100%;height:44px;padding:0 14px;border:1px solid #2a333c;border-radius:10px;background:#0d1216;color:#e8eef2;font-size:12px;outline:0;transition:border-color .2s ease,box-shadow .2s ease}
.challenge-message::placeholder{color:#5f6a74}
.challenge-message:focus{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.challenge-primary{width:100%;height:52px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;border:0;border-radius:10px;background:var(--accent);color:#10150d;font-size:13px;font-weight:800;letter-spacing:.3px;transition:filter .18s ease,transform .18s ease}
.challenge-primary svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.challenge-primary:hover{filter:brightness(1.06)}
.challenge-primary:hover svg{transform:translateX(3px)}
.challenge-primary:active{transform:scale(.995)}
.challenge-primary:disabled{cursor:progress;filter:saturate(.5);opacity:.6}
.challenge-status{color:#7f8994;font-size:10px;line-height:1.5;text-align:center}
.challenge-status[data-tone="success"]{color:#5fe0a8}
.challenge-status[data-tone="error"]{color:#ff8f8f}
.challenge-share{width:100%;display:grid;gap:8px;padding:12px;border:1px solid #232a31;border-radius:10px;background:#0d1216}
.challenge-share code{overflow:hidden;color:#cfe9ef;font-size:11px;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.challenge-share-actions{display:flex;flex-wrap:wrap;gap:8px}
.challenge-share-actions .plain-button{flex:1 1 0;min-width:92px;height:34px;border-radius:8px}

/* Result screen, second pass.
   The card used to be a flat near-black rectangle with square corners, a hard
   #353c45 hairline and the accent colour painted on almost everything (grade,
   rank, submit, challenge, retry), so nothing on it read as more important than
   anything else - and it looked like a different product from the white-and-blue
   dashboard around it. It is now a white panel in the site palette: hairline
   borders instead of heavy ones, tiles for the six metrics, and exactly two
   accent moments - the grade badge and the challenge button - with everything
   else quiet. Only the scrim behind it stays dark, so the panel separates from
   the training ground it opens over.
   The accent is pinned to the site cyan rather than var(--accent): the training
   ground rewrites --accent to the live target colour, and those pale cyans do
   not have enough contrast for text on white. Scoped to #result so the lobby
   keeps its own .start-button look. */
#result{
  --result-accent:#13b8cf;
  --result-accent-ink:#0aa4ba;
  --result-accent-deep:#078fa3;
  --result-soft:#effbfd;
  --result-soft-line:#a7e5ec;
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:18px 14px;
  background:radial-gradient(125% 95% at 50% 42%,rgba(9,12,16,.62) 0%,rgba(7,10,13,.84) 60%,rgba(4,6,8,.92) 100%);
}
#result .result-card{
  width:min(608px,94vw);margin:auto;padding:22px 24px 20px;max-height:none;overflow:visible;
  border:1px solid #e5e7ea;border-radius:20px;background:#fff;color:#171a1e;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}

/* "本局结果" reads as a state chip rather than a stray line of cyan text. */
#result .overline{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;
  border:1px solid #dcf1f5;border-radius:999px;background:#f2fbfd;
  color:var(--result-accent-ink);font-size:10px;font-weight:800;letter-spacing:1.2px;
}
#result .overline::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--result-accent);
  box-shadow:0 0 0 3px rgba(19,184,207,.16);
}

/* Score left, grade right, both sitting on one baseline. */
#result .result-head{align-items:flex-end;padding:16px 0 18px;border-bottom:0}
#result .result-head small{color:#8b949e;font-size:10px;letter-spacing:1.1px;margin-bottom:9px}
#result .result-head strong{font-size:46px;line-height:1;font-weight:800;letter-spacing:-1.4px;color:#171a1e;font-variant-numeric:tabular-nums}
#result .grade{
  width:74px;height:74px;border-radius:18px;
  border:1px solid #b6e8ef;background:#eafafd;
  color:var(--result-accent-ink);font-size:34px;font-weight:800;
  box-shadow:0 10px 24px rgba(19,184,207,.16),inset 0 1px 0 #fff;
}

/* Six tiles instead of a two-row table with dividers that never lined up. */
#result .result-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;border-bottom:0}
#result .result-metrics>div{
  padding:13px 15px!important;border:1px solid #edf0f2!important;border-radius:12px;
  background:#f8fafb;
}
#result .result-metrics>div:hover{border-color:#c9ebf1!important;background:#f2fbfd}
#result .result-metrics span{color:#8b949e;font-size:10px;letter-spacing:.6px;margin-bottom:7px}
#result .result-metrics strong{font-size:21px;font-weight:800;color:#171a1e;font-variant-numeric:tabular-nums}
#result .result-metrics small{color:#8e969f;font-size:9px;margin-top:5px}

/* A compact ability profile turns the eight analyzed aim dimensions into a
   usable answer to "where am I strong, and what should I train next?".  The chart is
   intentionally an SVG so it stays sharp on high-DPI screens and remains
   readable without a canvas or another library. */
#result .result-profile{
  margin-top:10px;padding:14px 15px 13px;border:1px solid #e2f2f5;border-radius:14px;
  background:linear-gradient(135deg,#fbfeff 0%,#f5fcfd 100%);
}
#result .result-profile-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#result .result-profile-heading>div{display:grid;gap:3px}
#result .result-profile-heading strong{font-size:14px;font-weight:800;color:#1b252b;letter-spacing:.2px}
#result .result-profile-heading small{font-size:9px;color:#82929a}
#result .result-profile-heading>span{font-size:9px;color:#0b9fb4;white-space:nowrap}
#result .result-profile-body{display:grid;grid-template-columns:minmax(0,1fr) 145px;align-items:center;gap:4px;margin-top:4px}
#result .result-radar{position:relative;min-width:0;height:218px}
#result .result-radar svg{display:block;width:100%;height:100%;overflow:visible}
#result .result-radar-grid polygon{fill:none;stroke:#d8edf0;stroke-width:1}
#result .result-radar-grid line{stroke:#e4f1f3;stroke-width:1}
#result .result-radar-area{fill:rgba(19,184,207,.2);stroke:#13abc4;stroke-width:2;stroke-linejoin:round}
#result .result-radar-dots circle{
  fill:#fff;stroke:#0ba4bb;stroke-width:2;
  transform-box:fill-box;transform-origin:center;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),fill .18s ease,stroke .18s ease,stroke-width .18s ease;
}
#result .result-radar-dots circle.is-active{transform:scale(1.9);fill:var(--result-accent);stroke:#fff;stroke-width:1.7}
#result .result-radar-label{fill:#60747c;font-size:8px;font-weight:700;letter-spacing:.1px;transition:fill .18s ease}
#result .result-radar-value{fill:#0b9fb4;font-size:8px;font-weight:800;transition:fill .18s ease}
/* The 0-100 profile value is what the shape encodes; the raw measurement behind
   it only appears on hover, so the chart stays legible at a glance. */
#result .result-radar-hit{fill:transparent;pointer-events:all;cursor:help;transition:fill .18s ease}
#result .result-radar-hit:hover,#result .result-radar-hit.is-active{fill:rgba(19,184,207,.14)}
/* Hovering one dimension should read as "this one": it pops, its label goes to
   full contrast, and the other seven step back instead of competing with it. */
#result .result-radar-label-group{cursor:help;transition:opacity .18s ease}
#result .result-radar-label-group.is-active .result-radar-label{fill:#1b252b}
#result .result-radar-label-group.is-active .result-radar-value{fill:var(--result-accent-deep)}
#result .result-radar.has-active .result-radar-label-group:not(.is-active){opacity:.55}
#result .result-radar-tip{
  position:absolute;z-index:5;max-width:200px;padding:7px 9px;pointer-events:none;text-align:left;
  transform:translate(-50%,calc(-100% - 9px));
  border:1px solid #cdebf0;border-radius:9px;background:#fff;
  box-shadow:0 10px 24px rgba(14,60,72,.16);
  animation:result-radar-tip-in .16s cubic-bezier(.2,.7,.2,1) both;
}
/* The card is display:none while hidden, so the animation replays on every new
   hover instead of only on the first one. */
@keyframes result-radar-tip-in{
  from{opacity:0;transform:translate(-50%,calc(-100% - 1px)) scale(.94)}
  to{opacity:1;transform:translate(-50%,calc(-100% - 9px)) scale(1)}
}
#result .result-radar-tip strong{display:block;color:#1b252b;font-size:10px;font-weight:800}
#result .result-radar-tip span{display:block;margin-top:2px;color:var(--result-accent-ink);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
#result .result-radar-tip small{display:block;margin-top:4px;color:#82929a;font-size:9px;line-height:1.45}
/* The composite rating is the one number this section exists to deliver, so it
   is the only tile here with a tinted background; the two shot counters stay
   quiet underneath it. */
#result .result-profile-summary{display:grid;gap:8px;padding:0 2px 0 4px}
#result .result-profile-rating{
  display:grid;justify-items:center;gap:1px;padding:9px 6px 10px;
  border:1px solid #d8eef2;border-radius:12px;
  background:linear-gradient(150deg,#f3fbfd 0%,#e9f7fb 100%);
}
#result .result-profile-rating small{color:#7d8f97;font-size:9px;letter-spacing:.5px}
#result .result-profile-rating strong{color:var(--result-accent-deep);font-size:27px;font-weight:800;line-height:1.06;font-variant-numeric:tabular-nums}
#result .result-profile-rating span{color:#93a4ab;font-size:8px}
#result .result-profile-counts{display:grid;gap:5px}
#result .result-profile-counts>div{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;padding:0 9px;border:1px solid #e4eef0;border-radius:8px;background:#fff}
#result .result-profile-counts span{overflow:hidden;color:#7d8f97;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
#result .result-profile-counts strong{color:#40545c;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}

/* One card, two lines: who the run belongs to next to this run's place, then
   the board it was measured against next to how the submission went. The
   account line stays small so the rank keeps the only accent on the row, and
   the status doubles as the retry / sign-in control when there is one. */
#result .result-rank-card{
  margin-top:8px;padding:13px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:5px 18px;
  border:1px solid #e2f2f5;border-radius:12px;background:#f4fcfd;
}
#result .result-account-identity{
  min-height:0;padding:0;border:0;background:transparent;color:#334056;
  font-size:11px;font-weight:700;letter-spacing:.4px;
}
#result .result-rank-headline{display:flex;align-items:baseline;gap:10px;justify-self:end}
#result .result-rank-headline span{color:#7b8b93;font-size:10px;letter-spacing:.6px}
#result .result-rank-headline strong{font-size:26px;font-weight:800;letter-spacing:-.4px;color:var(--result-accent-ink);font-variant-numeric:tabular-nums;line-height:1}
#result .result-rank-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 14px}
#result .result-rank-foot small{color:#96a3ab;font-size:9px}
#result .result-rank-status{
  padding:0;border:0;background:transparent;color:#96a3ab;
  font:inherit;font-size:9px;text-align:right;
}
#result .result-rank-status:disabled{cursor:default}
#result .result-rank-status:not(:disabled){
  color:var(--result-accent-deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
#result .result-rank-status:not(:disabled):hover{color:var(--result-accent)}

/* The one solid accent on the card: the growth action after a run. */
#result .challenge-cta{gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid #edf0f2}
#result .challenge-message{
  height:42px;border:1px solid #e1e5e9;border-radius:12px;
  background:#f8fafb;color:#171a1e;font-size:12px;
}
#result .challenge-message::placeholder{color:#9aa3ac}
#result .challenge-message:focus{border-color:#8fdfe9;box-shadow:0 0 0 3px rgba(19,184,207,.12)}
#result .challenge-primary{
  height:48px;border-radius:12px;
  background:linear-gradient(180deg,#2ec6dc,var(--result-accent));
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.4px;
  box-shadow:0 12px 24px rgba(19,184,207,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
#result .challenge-primary:hover{filter:none;transform:translateY(-1px);box-shadow:0 16px 30px rgba(19,184,207,.36)}
#result .challenge-primary:active{transform:translateY(0) scale(.995)}
#result .challenge-status{color:#8b949e;font-size:10px}
#result .challenge-status[data-tone="success"]{color:#12a374}
#result .challenge-status[data-tone="error"]{color:#d9534f}
#result .challenge-verdict strong{color:var(--result-accent-ink)}
#result .challenge-verdict small{color:#8b949e}
#result .challenge-verdict[data-tone="loss"] strong{color:#d9534f}
#result .challenge-verdict[data-tone="tie"] strong{color:#b07d1a}
#result .challenge-share{border:1px solid #e2f2f5;border-radius:12px;background:#f7fcfd}
#result .challenge-share code{color:var(--result-accent-deep)}
#result .challenge-share .plain-button{border-color:#dce3e9;background:#fff;color:#334056}
#result .challenge-share .plain-button:hover{border-color:#c9d3da;background:#f5f8fa;color:#171a1e}

/* Footer: one full-width primary-ish action rather than a floating 170px block
   with dead space beside it. */
#result .result-actions{flex-wrap:nowrap;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #edf0f2}
#result .result-actions .start-button{
  width:auto;flex:1 1 auto;height:48px;justify-content:center;gap:10px;border-radius:12px;
  border:1px solid var(--result-soft-line);background:var(--result-soft);color:var(--result-accent-deep);
  font-size:13px;font-weight:800;letter-spacing:.4px;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
#result .result-actions .start-button:hover{background:#e2f7fb;border-color:var(--result-accent);color:#0a93a8;transform:translateY(-1px)}
#result .result-actions .start-button:active{transform:translateY(0) scale(.995)}
#result .result-actions kbd{
  min-width:22px;height:22px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #bfe9ef;border-radius:6px;background:#fff;
  color:#0a93a8;font-family:inherit;font-size:10px;font-weight:800;letter-spacing:.5px;
}
#result .result-actions .plain-button{
  flex:0 0 auto;min-width:112px;height:48px;border-radius:12px;
  border:1px solid #dce3e9;background:#fff;
  color:#334056;font-size:12px;font-weight:700;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
#result .result-actions .plain-button:hover{background:#f5f8fa;border-color:#c9d3da;color:#171a1e}

@media(max-width:560px){
  #result .result-card{padding:20px 16px 18px;border-radius:16px}
  #result .result-head strong{font-size:38px}
  #result .grade{width:60px;height:60px;border-radius:14px;font-size:28px}
  #result .result-metrics{grid-template-columns:1fr 1fr}
  #result .result-profile-body{grid-template-columns:1fr;gap:0}
  #result .result-radar{height:222px;margin:0 8px}
  #result .result-profile-summary{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;padding:0 2px 2px}
  #result .result-profile-rating{padding:8px 16px}
  #result .result-rank-card{padding:12px 14px;gap:4px 12px}
  #result .result-rank-headline{gap:7px}
  #result .result-rank-headline strong{font-size:21px}
  #result .result-actions{flex-wrap:wrap}
  #result .result-actions .start-button{flex:1 1 100%}
  #result .result-actions .plain-button{flex:1 1 100%}
}

/* The lobby banner is a dashboard card like any other: white, hairline border,
   cyan only where something is actionable. */
.challenge-banner{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:18px 22px;border:1px solid #e5e7ea;border-radius:18px;background:#fff;box-shadow:0 2px 12px rgba(24,34,48,.035)}
.challenge-banner-icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:14px;background:#dcf8fb;color:#13abc4}
.challenge-banner-icon svg{width:22px;height:22px;stroke:currentColor}
.challenge-banner-copy{display:grid;gap:4px;min-width:0;margin-right:auto}
.challenge-banner-eyebrow{color:#0ca0b5;font-size:10px;font-weight:800;letter-spacing:1.2px}
.challenge-banner-copy strong{color:#17191c;font-size:19px;letter-spacing:-.4px}
.challenge-banner-copy small{color:#6b7580;font-size:12px}
.challenge-banner-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.challenge-banner-actions button{height:42px;padding:0 20px;border-radius:10px;font-size:13px;font-weight:700}
#challengeAcceptButton{border:0;background:#13b8cf;color:#fff;box-shadow:0 7px 18px rgba(19,184,207,.2);transition:filter .18s ease,transform .18s ease}
#challengeAcceptButton:hover{filter:brightness(1.06);transform:translateY(-1px)}
#challengeAcceptButton:active{transform:none}
#challengeDismissButton{border:1px solid #e2e5e8;background:#fff;color:#78828d;font-weight:500}
#challengeDismissButton:hover{border-color:#cfd6db;color:#3d454d}

@media(max-width:900px){
  .challenge-banner{flex-wrap:wrap;gap:12px;padding:16px 18px}
  .challenge-banner-copy{flex:1 1 180px}
  .challenge-banner-actions{width:100%}
  .challenge-banner-actions button{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .challenge-primary,.challenge-primary svg,#challengeAcceptButton{transition:none}
  .challenge-primary:hover svg{transform:none}
  .challenge-primary:hover,#challengeAcceptButton:hover{transform:none}
}
/* Lobby input parameters belong to the mouse path only: with a controller
   selected the whole row goes away, and this rule is written with the id-level
   specificity the rest of this card uses so no `display:...!important` below it
   can bring the row back. */
#practicePage .practice-card .aim-parameter-row.input-parameter-hidden{display:none!important}
.input-device-status{display:block;margin-top:10px;padding:9px 12px;border:1px solid #dbe7ea;border-radius:8px;background:#f4fafb;color:#5b7580;font-size:11px;line-height:1.5;text-align:center}
.input-device-status[data-state=alert]{border-color:#f0c9c9;background:#fdf3f3;color:#b45252}#practicePage .practice-card .input-device-status{order:11}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.game-preset-dropdown{position:relative;min-width:0}
.game-preset-trigger{display:grid;grid-template-columns:24px minmax(0,1fr) 16px;align-items:center;gap:6px;width:100%;height:42px;padding:0 12px;border:1px solid #dce3e9;border-radius:9px;background:#fff;color:#263044;font:inherit;font-size:16px;text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
.game-preset-trigger:hover,.game-preset-trigger[aria-expanded="true"]{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.1)}
.game-preset-chevron{width:16px;height:16px;color:#647084;transition:transform .18s ease}
.game-preset-trigger[aria-expanded="true"] .game-preset-chevron{transform:rotate(180deg)}
.game-preset-menu{position:absolute;z-index:90;top:calc(100% + 6px);left:-8px;width:max-content;min-width:max(100%,280px);max-width:min(360px,calc(100vw - 32px));max-height:min(58vh,370px);overflow:auto;padding:5px;border:1px solid #dbe6ea;border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(19,38,48,.16)}
.game-preset-menu[hidden]{display:none!important}
.game-option{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:6px;width:100%;padding:8px 9px;border:0;border-radius:8px;background:transparent;color:#263044;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.game-option:hover,.game-option:focus-visible{background:#eaf8fb;outline:none}
.game-option.active{background:#13b8cf;color:#fff}
.game-option-icon{width:24px;height:24px;display:grid;place-items:center;overflow:hidden;border-radius:5px}
.game-option-icon img,.game-option-icon svg{display:block;width:20px;height:20px;object-fit:contain}
.game-option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#practicePage .practice-card>#gameControl{overflow:visible!important}
.custom-sound-row{display:flex;align-items:center;gap:9px;min-width:0}
.custom-sound-button{display:inline-flex;align-items:center;height:33px;padding:0 13px;border:1px solid #cfe9ee;border-radius:8px;background:#f2fbfd;color:#0a93a8;font-size:10px;font-weight:750;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.custom-sound-button:hover{background:#e2f7fb;border-color:#13b8cf;transform:translateY(-1px)}
.custom-sound-row span{flex:1;min-width:0;overflow:hidden;color:#67737a;font-size:9px;text-overflow:ellipsis;white-space:nowrap}

/* 对局中的读数：一条横条装下双方分数、分差和剩余时间。练习用的三块 HUD 在对局里
   整块收起，页面上方只剩这一条和右上角的退出，越干净越好。 */
.game.battle-active .hud-left,.game.battle-active .hud-right,.game.battle-active .hud-center,.game.battle-active .streak{display:none}
.game.battle-active .game-brand,.game.battle-active .game-protocol{display:none}
.game.battle-active .game-header button{margin-left:auto}
.battle-bar{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:23;display:flex;align-items:stretch;height:42px;max-width:calc(100% - 280px);border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(20,24,26,.62);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.22);animation:battle-bar-in .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes battle-bar-in{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.battle-bar-cell{min-width:0;padding:0 15px;display:flex;align-items:center;gap:8px;border-right:1px solid rgba(255,255,255,.1)}
.battle-bar-cell:last-child{border-right:0}
.battle-bar-cell span{color:rgba(255,255,255,.5);font-size:8px;font-weight:700;letter-spacing:.9px;white-space:nowrap}
.battle-bar-cell strong{color:#fff;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.battle-bar-side{gap:9px;padding:0 14px}
.battle-bar-tag{max-width:96px;overflow:hidden;color:rgba(255,255,255,.8)!important;font-size:9px!important;letter-spacing:.4px!important;text-overflow:ellipsis}
.battle-bar-side strong{font-size:22px;font-weight:800}
.battle-bar-diff{justify-content:center}
.battle-bar-diff strong{font-size:22px;font-weight:800;transition:color .2s ease}
.battle-bar-diff.is-up{background:rgba(92,225,154,.1)}
.battle-bar-diff.is-down{background:rgba(255,139,139,.1)}
.battle-bar-diff.is-up strong{color:#5ce19a}
.battle-bar-diff.is-down strong{color:#ff8b8b}
.battle-bar-diff.is-even strong{color:#d5dde0}
.battle-bar-clock strong{color:#f4f8f9}

/* 对战结算页：只有胜负、比分和两个出口，练习用的成绩卡整块不出现。 */
#game .battle-end{padding:18px 14px;overflow-y:auto;background:radial-gradient(125% 95% at 50% 42%,rgba(9,12,16,.66) 0%,rgba(7,10,13,.86) 60%,rgba(4,6,8,.93) 100%)}
.battle-end-card{width:min(468px,94vw);margin:auto;padding:24px 24px 20px;display:grid;gap:16px;border:1px solid #e5e7ea;border-radius:20px;background:#fff;color:#171a1e;box-shadow:0 30px 70px rgba(0,0,0,.45);text-align:center}
.battle-end-card .overline{display:inline-flex;align-items:center;gap:8px;justify-self:center;padding:5px 12px 5px 10px;border:1px solid #dcf1f5;border-radius:999px;background:#f2fbfd;color:#0aa4ba;font-size:10px;font-weight:800;letter-spacing:1.2px}
.battle-end-card .overline::before{content:"";width:6px;height:6px;border-radius:50%;background:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.16)}
.battle-end-outcome{margin:2px 0 0;color:#334056;font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1.05}
.battle-end-outcome[data-tone="win"]{color:#0aa4ba}
.battle-end-outcome[data-tone="loss"]{color:#d9534f}
.battle-end-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.battle-end-side{min-width:0;display:grid;gap:6px;padding:14px 10px;border:1px solid #edf0f2;border-radius:14px;background:#f8fafb}
.battle-end-side span{overflow:hidden;color:#8b949e;font-size:10px;letter-spacing:.4px;text-overflow:ellipsis;white-space:nowrap}
.battle-end-side strong{color:#171a1e;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.battle-end-side.win{border-color:#a7e5ec;background:#effbfd}
.battle-end-side.win strong{color:#0aa4ba}
.battle-end-vs{color:#b6c2c8;font-size:11px;font-weight:800;letter-spacing:.8px}
.battle-end-note{margin:0;color:#8b949e;font-size:10px;line-height:1.6}
.battle-end-actions{display:flex;gap:10px;margin-top:2px}
.battle-end-actions button{flex:1;height:48px;border-radius:12px;font-size:13px;font-weight:800;letter-spacing:.3px;transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.battle-end-primary{border:1px solid #7fdce9;background:linear-gradient(180deg,#2ec6dc,#13b8cf);color:#fff;box-shadow:0 12px 24px rgba(19,184,207,.28)}
.battle-end-primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(19,184,207,.36)}
.battle-end-primary:active{transform:translateY(0) scale(.995)}
.battle-end-ghost{border:1px solid #dce3e9;background:#fff;color:#334056}
.battle-end-ghost:hover{background:#f5f8fa;border-color:#c9d3da;color:#171a1e}
@keyframes battle-end-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
#game .battle-end:not(.hidden) .battle-end-card{animation:battle-end-in .38s cubic-bezier(.2,.7,.2,1) both}

/* 对战进场：浏览器只肯在用户点击里给指针锁定，所以这张卡就是在等你点一下。做成正中、
   一眼能看到的大卡片（遮罩比练习的暂停卡浅，后面的赛场和倒数看得见），点了就锁鼠标、
   能转视角，计时照走、不暂停。 */
@keyframes battle-prompt-pulse{0%{box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 0 rgba(19,184,207,.4)}70%{box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 16px rgba(19,184,207,0)}100%{box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 0 rgba(19,184,207,0)}}
.screen-layer.pointer-prompt.battle-prompt{cursor:pointer;background:radial-gradient(125% 95% at 50% 42%,rgba(9,12,16,.44) 0%,rgba(7,10,13,.62) 58%,rgba(4,6,8,.74) 100%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pointer-prompt:not(.hidden).battle-prompt .pause-card{animation:pause-card-in .3s cubic-bezier(.2,.7,.2,1) both,battle-prompt-pulse 2.4s ease-out infinite}
.pointer-prompt.battle-prompt .pause-card{width:min(420px,92vw);padding:22px 24px 18px;display:grid;gap:14px;border:1px solid #e5e7ea;border-radius:20px;background:#fff;color:#171a1e}
.pointer-prompt.battle-prompt .pause-card-head{justify-content:center}
.pointer-prompt.battle-prompt .pause-card .pause-state{border-color:#dcf1f5;background:#f2fbfd;color:#0aa4ba}
.pointer-prompt.battle-prompt .pause-mode{display:none}
.pointer-prompt.battle-prompt .pause-live{display:none}
.pointer-prompt.battle-prompt .pause-cta{text-align:center}
.pointer-prompt.battle-prompt .pause-cta strong{color:#0b93a6;font-size:30px;font-weight:800;letter-spacing:-.5px}
.pointer-prompt.battle-prompt .pause-cta small{color:#8b949e;font-size:10px;letter-spacing:.2px}
.pointer-prompt.battle-prompt .pause-actions{gap:10px;justify-content:center}
.pointer-prompt.battle-prompt .pause-actions .pause-exit-button{min-width:0;height:36px;padding:0 16px;font-size:10px;border:1px solid #dce3e9;background:#fff;color:#334056}
.pointer-prompt.battle-prompt .pause-actions .pause-exit-button:hover{background:#f5f8fa;border-color:#c9d3da;color:#171a1e}
@media(max-width:760px){
  .pointer-prompt.battle-prompt .pause-card{width:calc(100vw - 32px);padding:18px 16px 15px;border-radius:16px}
  .pointer-prompt.battle-prompt .pause-cta strong{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .pointer-prompt:not(.hidden).battle-prompt .pause-card{animation:none!important}
}

@media(max-width:760px){
  .battle-bar{top:62px;left:12px;right:12px;transform:none;max-width:none;height:38px;animation:none}
  .battle-bar-cell{flex:1;justify-content:center;padding:0 8px;gap:5px}
  .battle-bar-cell span{display:none}
  .battle-bar-cell strong{font-size:15px}
  .battle-bar-side strong{font-size:17px}
  .battle-bar-cell .battle-bar-tag{display:block;max-width:52px;font-size:8px!important}
  .battle-bar-diff strong{font-size:17px}
  .battle-end-card{padding:20px 16px 18px;border-radius:16px}
  .battle-end-outcome{font-size:32px}
  .battle-end-side strong{font-size:25px}
}
@media(prefers-reduced-motion:reduce){#game .battle-end:not(.hidden) .battle-end-card{animation:none!important}}
/* First-login feature tour. app.js positions the spotlight over real controls. */
.welcome-tour{position:fixed;inset:0;z-index:1800;pointer-events:auto}.welcome-tour.hidden{display:none!important}.welcome-tour:before{content:"";position:absolute;inset:0;background:rgba(21,32,38,.58);backdrop-filter:blur(1.5px)}.welcome-tour-spotlight{position:fixed;z-index:1801;left:0;top:0;width:1px;height:1px;border:2px solid #13b8cf;border-radius:12px;box-shadow:0 0 0 9999px rgba(21,32,38,.58),0 0 0 5px rgba(19,184,207,.13),0 10px 30px rgba(6,50,58,.18);pointer-events:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease}.welcome-tour-card{position:fixed;z-index:1802;width:min(360px,calc(100vw - 32px));padding:20px 20px 16px;border:1px solid #d9e6e9;border-radius:16px;background:#fff;color:#17232b;box-shadow:0 22px 70px rgba(9,31,39,.25);animation:welcome-tour-in .22s ease both}.welcome-tour-progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#078fa3;font-size:10px;font-weight:800;letter-spacing:.4px}.welcome-tour-progress span:last-child{color:#94a2a8;font-weight:700}.welcome-tour-card h2{margin:0 0 8px;font-size:20px;line-height:1.25;letter-spacing:-.3px}.welcome-tour-card p{min-height:42px;margin:0;color:#6f7e85;font-size:12px;line-height:1.7}.welcome-tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}.welcome-tour-actions button{height:34px;border-radius:9px;padding:0 12px;border:1px solid #dfe8ea;background:#f5f8f9;color:#65757c;font-size:11px;font-weight:700}.welcome-tour-actions button:hover{border-color:#b9dfe4;background:#eefafb;color:#078fa3}.welcome-tour-actions>div{display:flex;gap:7px}.welcome-tour-actions .welcome-tour-back{background:#fff;color:#75858b}.welcome-tour-actions .welcome-tour-next{border-color:#13b8cf;background:#13b8cf;color:#fff;box-shadow:0 5px 14px rgba(19,184,207,.2)}.welcome-tour-actions .welcome-tour-next:hover{border-color:#079eb2;background:#079eb2;color:#fff}@keyframes welcome-tour-in{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}@media(max-width:620px){.welcome-tour-card{bottom:auto!important;left:16px!important;right:16px;width:auto}.welcome-tour-spotlight{border-radius:9px}.welcome-tour-card p{min-height:0}}@media(prefers-reduced-motion:reduce){.welcome-tour-card,.welcome-tour-spotlight{animation:none;transition:none}}.welcome-tour-intro{position:fixed;inset:0;z-index:1810;display:grid;place-items:center;padding:20px;background:rgba(21,32,38,.58);backdrop-filter:blur(3px)}.welcome-tour-intro.hidden{display:none!important}.welcome-tour-intro-card{width:min(430px,calc(100vw - 32px));padding:30px 30px 24px;border:1px solid #d9e6e9;border-radius:18px;background:#fff;color:#17232b;text-align:center;box-shadow:0 24px 80px rgba(9,31,39,.3);animation:welcome-tour-in .22s ease both}.welcome-tour-intro-mark{width:42px;height:42px;display:grid;place-items:center;margin:0 auto 14px;border-radius:13px;background:#e7f9fb;color:#0aa4ba;font-size:22px}.welcome-tour-intro-card h2{margin:0;font-size:22px;line-height:1.35;letter-spacing:-.4px}.welcome-tour-intro-card p{margin:12px 0 24px;color:#6f7e85;font-size:13px;line-height:1.7}.welcome-tour-intro-actions{display:flex;justify-content:center;gap:10px}.welcome-tour-intro-actions button{min-width:96px;height:38px;padding:0 18px;border:1px solid #dfe8ea;border-radius:10px;background:#f5f8f9;color:#65757c;font-size:12px;font-weight:800}.welcome-tour-intro-actions button:hover{border-color:#b9dfe4;background:#eefafb;color:#078fa3}.welcome-tour-intro-actions #welcomeTourIntroAccept{border-color:#13b8cf;background:#13b8cf;color:#fff;box-shadow:0 6px 16px rgba(19,184,207,.2)}.welcome-tour-intro-actions #welcomeTourIntroAccept:hover{border-color:#079eb2;background:#079eb2}@media(prefers-reduced-motion:reduce){.welcome-tour-intro-card{animation:none}}

/* 开启轨迹时开关占左半行，右半行输入显示时长。 */
.trail-setting-row{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center}
.trail-setting-row.is-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#practicePage .practice-card>#trailToggleRow{display:grid!important}
#practicePage .practice-card>#trailToggleRow .trail-duration-field{font-size:10px}
.trail-setting-control{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.trail-setting-control .switch{flex-shrink:0}
.trail-setting-copy{min-width:0;display:grid;gap:4px}
.trail-setting-copy label,.trail-setting-copy strong{font-size:10px}
.trail-setting-copy small{color:#9ba1a8;font-size:8px;line-height:1.35}
.trail-duration-field{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;color:#7a8793;font-size:9px;white-space:nowrap}
.trail-duration-field[hidden]{display:none!important}
.trail-duration-field input{width:66px;height:32px;padding:0 8px;border:1px solid #d7e1e5;border-radius:7px;background:#fff;color:#26343b;font:inherit;text-align:right;font-variant-numeric:tabular-nums}
.trail-duration-field input:focus{outline:2px solid rgba(19,184,207,.2);border-color:#13b8cf}
.trail-duration-field .trail-unit{color:#9ba1a8}
@media(max-width:620px){.trail-setting-row{gap:10px}.trail-duration-field{gap:4px}.trail-duration-field input{width:58px}.trail-setting-copy small{font-size:7px}}

.hit-effect-layer{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}

.practice-card{position:relative}.practice-heading h2{margin-right:auto}.more-modes-button{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #dce8ed;border-radius:8px;background:#f7fbfc;color:#188fa1;font-size:11px;white-space:nowrap}.more-modes-button span{font-size:19px;line-height:12px;transition:transform .2s}.more-modes-button[aria-expanded="true"] span{transform:rotate(180deg)}
.more-modes-panel{position:absolute;z-index:55;left:calc(100% + 16px);top:0;width:550px;max-width:calc(100vw - 40px);padding:22px;border:1px solid #dce8ed;border-radius:16px;background:#fff;box-shadow:0 15px 55px #203b4e26;animation:more-modes-open .2s ease-out}.more-modes-panel[hidden]{display:none}.more-modes-panel>header{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}.more-modes-panel header strong{font-size:17px;color:#203441}.more-modes-panel header p{max-width:380px;margin:8px 0 0;color:#7e929f;font-size:11px;line-height:1.6}.more-modes-panel header>button{margin-left:auto;border:0;background:#f1f7f9;border-radius:7px;width:29px;height:29px;color:#678390;font-size:20px}.more-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mode-slot{position:relative;min-width:0}.mode-slot .scenario{height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.more-mode-grid .mode-slot{padding-bottom:33px;border:1px solid #dfebef;border-radius:10px;overflow:hidden}.more-mode-grid .mode-slot .scenario{border:0;border-radius:10px 10px 0 0;min-height:100px}.mode-quick-start{position:absolute;bottom:0;left:0;width:100%;height:33px;border:0;border-top:1px solid #e3edf1;background:#f3fafb;color:#0899af;font-size:11px;font-weight:700}.mode-quick-start:hover{background:#def5f8}.mode-drop-target{outline:2px dashed #12b6cb;outline-offset:4px;border-radius:10px}.mode-drag-ghost{position:fixed!important;z-index:9999!important;pointer-events:none!important;opacity:.92;min-height:90px!important;background:#eafaff!important;color:#147c8b!important;border:2px solid #15b6c9!important;box-shadow:0 12px 30px #18394a30!important;transform:rotate(3deg)!important}.mode-dragging{cursor:grabbing!important;user-select:none}.advanced-mode-controls{margin:0 0 15px;padding:14px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.advanced-mode-controls>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.advanced-mode-controls label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#566f7e;font-size:11px}.advanced-mode-controls select,.advanced-mode-controls input[type="number"]{min-width:0;max-width:130px;width:60%;height:32px;border:1px solid #e5e7eb;border-radius:7px;background:#fff;padding:0 8px;color:#244352;font-size:11px}.advanced-mode-controls .drill-slider{grid-column:1/-1;display:block}.drill-slider output{float:right;font-weight:700;color:#079eb3}.drill-slider input{display:block;width:100%;accent-color:#13b8cf;margin:12px 0 2px}
@keyframes more-modes-open{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1150px){.more-modes-panel{left:16px;right:16px;top:65px;width:auto;max-width:none}.more-mode-grid{gap:8px}.more-mode-grid .scenario strong{font-size:10px}.more-modes-panel header p{max-width:260px}}
@media(prefers-reduced-motion:reduce){.more-modes-panel{animation:none}}

#practicePage .practice-card:has(.more-modes-panel.is-open){z-index:40}#practicePage .practice-card>.more-modes-panel{max-width:none}.more-modes-button{margin-left:auto}.practice-card .more-mode-grid .scenario{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:113px;background:#fff;color:#263044;text-align:center}.practice-card .more-mode-grid .scenario:hover,.practice-card .more-mode-grid .scenario.active{background:#effbfc}.practice-card .more-mode-grid .scenario strong{font-size:12px}.practice-card .more-mode-grid .mode-svg{width:30px;height:30px}.practice-card .more-mode-grid .mode-icon{width:34px;height:34px}.mode-drag-ghost>span:first-child{display:none}.mode-drag-ghost{display:grid!important;place-items:center;text-align:center!important}
@media(max-width:1150px){#practicePage .practice-card>.more-modes-panel{max-width:calc(100% - 32px)}}

#practicePage .practice-card>#advancedModeControls{order:2;margin-top:14px}#practicePage .practice-card[data-humanoid-drill="true"]>#targetSizeControl{display:none!important}

body.custom-training-selected #performancePersonalBestRank,body.custom-training-selected .selected-drill-metrics>div:last-child{display:none!important}.game.custom-training-run #resultRankCard,.game.custom-training-run #challengeCta{display:none!important}.return-hold-label{align-self:center;color:#7d929c;font-size:11px}.recenter-guide{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-50%);opacity:.45}.recenter-guide.waiting{opacity:1}.recenter-guide svg{display:block;width:100%;height:100%;overflow:visible}.recenter-guide circle{fill:none;stroke:#fff;stroke-width:3}.recenter-guide.waiting .recenter-frame{stroke:#ffd185;filter:drop-shadow(0 0 2px #3b3b3b)}.recenter-guide .recenter-progress{stroke:#77df9c;stroke-width:5;stroke-dasharray:276.46;stroke-dashoffset:276.46;transform:rotate(-90deg);transform-origin:50% 50%}.recenter-guide.inside .recenter-frame{stroke:#a4ebbc}.recenter-hint{position:absolute;z-index:13;bottom:75px;left:50%;transform:translateX(-50%);padding:9px 15px;border:1px solid #ffffff35;border-radius:10px;background:#363636cc;color:#fff;font-size:13px;pointer-events:none;white-space:nowrap}

.local-replay-crosshair{width:120px!important;height:120px!important}
.local-replay-crosshair:before,.local-replay-crosshair:after{content:none!important;display:none!important}

/* During a mouse-controlled run the reticle is the fixed centre input point.
   HUD labels and the floating ESC control stay visible, but they cannot steal
   the mousedown target when the browser briefly releases pointer lock. */
#game.mouse-capture-active{cursor:none}
#game.mouse-capture-active .game-header,
#game.mouse-capture-active .game-header *,
#game.mouse-capture-active .hud,
#game.mouse-capture-active .streak,
#game.mouse-capture-active .hud-fps,
#game.mouse-capture-active #weaponCounterHud,
#game.mouse-capture-active #battleBar,
#game.mouse-capture-active #crosshair,
#game.mouse-capture-active #sniperScope,
#game.mouse-capture-active #trackingProgress,
#game.mouse-capture-active #mouseTrailCanvas,
#game.mouse-capture-active #hitEffectCanvas,
#game.mouse-capture-active #pointerPrompt{pointer-events:none!important}
#game.mouse-capture-active .range,
#game.mouse-capture-active .webgl-viewport{cursor:none!important}