/* Kx Aim — arena, cromo e luz carmesim. */
.training { position: relative; z-index: 2; flex: 1; min-height: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tr-heading { display: flex; flex-shrink: 0; align-items: center; gap: 16px; padding: 2px 5px; }
.tr-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--red-soft); font: 700 9px var(--display); letter-spacing: 2px; }
.tr-eyebrow i { width: 5px; height: 5px; background: var(--red); box-shadow: 0 0 12px #ff254086; }
.tr-heading h1 { margin: 3px 0 0; font: 600 27px var(--display); letter-spacing: -.8px; }
.tr-heading h1 em { font-style: normal; color: var(--red-soft); }
.tr-heading p { margin: 4px 0 0; color: #7d7d8a; font-size: 11px; }
.tr-heading-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tr-local { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #ffffff12; color: #9b9baa; font: 8px var(--mono); letter-spacing: 1px; }
.tr-local svg { width: 13px; height: 13px; color: var(--red-soft); }
.tr-heading .gbtn { height: 32px; padding: 0 10px; font-size: 8px; }
.tr-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 208px minmax(0, 1fr) 292px; gap: 10px; }
.tr-panel { min-height: 0; border: 1px solid #ffffff13; background: linear-gradient(155deg, #131319e8, #09090de8); }
.tr-modes { display: flex; flex-direction: column; padding: 13px 9px 9px; overflow: hidden; }
.tr-section-title { display: flex; align-items: center; gap: 7px; padding: 0 4px 10px; color: #9f9fac; font: 700 8px var(--display); letter-spacing: 1.4px; }
.tr-section-title i { flex: 1; height: 1px; background: #ffffff0e; }
.tr-section-title b { color: var(--red-soft); font: 9px var(--mono); }
.tr-mode-list { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; min-height: 0; padding-right: 1px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #522331 transparent; }
.tr-mode { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 57px; padding: 9px; border: 1px solid #ffffff0c; background: linear-gradient(125deg, #ffffff04, transparent); text-align: left; color: #9898a7; transition: background .18s, border-color .18s, transform .18s; }
.tr-mode:hover { border-color: #ff254041; background: #ffffff05; transform: translateX(1px); }
.tr-mode.active { border-color: #ff254068; background: linear-gradient(100deg, #ff254024, #ff254007); color: #f4e7ea; box-shadow: inset 2px 0 #ff2540, inset 0 0 18px #ff254007; }
.tr-mode-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #ffffff12; background: #ffffff03; color: #656577; }
.tr-mode-icon svg { width: 16px; height: 16px; }
.tr-mode.active .tr-mode-icon { color: var(--red-soft); border-color: #ff254043; background: #ff254011; }
.tr-mode > span:nth-child(2) { flex: 1; min-width: 0; }
.tr-mode strong { display: block; font: 600 10.5px var(--display); }
.tr-mode small { display: block; margin-top: 4px; font: 7px var(--mono); letter-spacing: 1px; color: #686878; }
.tr-mode.active small { color: #be6d7f; }
.tr-mode > b { margin-left: auto; align-self: flex-start; color: #555562; font: 8px var(--mono); }
.tr-modes-foot { margin-top: auto; padding: 14px 5px 2px; color: #767683; font: 9px/1.6 var(--body); }
.tr-modes-foot strong { display: block; color: #a3a3b1; font: 600 9px var(--display); margin-bottom: 3px; }
.tr-workspace { min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.tr-stage { position: relative; flex: 1; min-height: 220px; overflow: hidden; border: 1px solid #ffffff20; background: #101722; box-shadow: inset 0 0 40px #0004; }
#tr-canvas { display: block; width: 100%; height: 100%; }
.tr-scene-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0006, transparent 35%, #07091122 45%, #070911ed); }
.tr-scene-top { position: absolute; display: flex; align-items: center; justify-content: space-between; gap: 12px; top: 15px; left: 16px; right: 16px; pointer-events: none; }
.tr-scene-top > span { font: 8px var(--mono); letter-spacing: 1.5px; color: #c3ccd8; }
.tr-scene-top > span:first-child { display: flex; align-items: center; gap: 7px; }
.tr-scene-top i { width: 4px; height: 4px; border-radius: 50%; background: #ff2540; box-shadow: 0 0 7px #ff2540; }
.tr-lobby-info { position: absolute; left: 21px; right: 21px; bottom: 20px; pointer-events: none; }
.tr-mode-tag { font: 700 8px var(--display); letter-spacing: 2px; color: #ff8ca0; }
.tr-lobby-info h2 { max-width: 370px; margin: 8px 0; font: 600 clamp(22px, 2.5vw, 34px)/1.1 var(--display); letter-spacing: -.7px; text-shadow: 0 2px 8px #0008; }
.tr-lobby-info p { max-width: 380px; margin: 0; font-size: 12px; line-height: 1.55; color: #aab3c2; }
.tr-skill { display: inline-block; margin-top: 12px; padding: 5px 8px; border: 1px solid #ffffff1b; background: #ffffff06; color: #b7bdcc; font: 8px var(--mono); }
.tr-launch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #ff254024; background: linear-gradient(120deg, #ff254009, #ffffff02); }
.tr-launch-copy strong { display: block; color: #d9d9e3; font: 600 11px var(--display); }
.tr-launch-copy span { display: block; margin-top: 4px; color: #777786; font: 9px var(--mono); }
.tr-primary { display: flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 16px; border: 1px solid #ff3f588c; background: linear-gradient(120deg, #eb2444, #a7132b); box-shadow: inset 0 1px #ffffff22, 0 6px 22px #ff254015; color: #fff; font: 700 9px var(--display); letter-spacing: 1.1px; transition: filter .18s, box-shadow .18s; }
.tr-primary:hover:enabled { filter: brightness(1.13); box-shadow: 0 0 26px #ff254034; }
.tr-primary:disabled { opacity: .4; }
.tr-primary svg { width: 15px; height: 15px; }
.tr-controls-hint { display: flex; flex-shrink: 0; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 0 3px 1px; color: #656574; font: 8px var(--mono); }
.tr-controls-hint span { display: flex; align-items: center; gap: 5px; }
.tr-controls-hint kbd { border-radius: 0; padding: 3px 4px; font-size: 8px; }
.tr-settings { position: relative; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 100% 0, #ff25400a, transparent 45%), linear-gradient(150deg, #15151ce8, #09090ded); }
.tr-settings-title { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 15px 14px 10px; }
.tr-settings-title small { display: block; color: #b48d9a; font: 600 7px var(--display); letter-spacing: 1.1px; }
.tr-settings-title h2 { margin: 5px 0 0; color: #eeedf3; font: 600 14px/1.3 var(--display); letter-spacing: -.3px; }
.tr-settings-emblem { display: grid; place-items: center; width: 34px; height: 38px; flex-shrink: 0; border: 1px solid #ff25403b; color: var(--red-soft); background: linear-gradient(130deg, #ff25401e, #ff254007); box-shadow: inset 0 0 20px #ff25400b; }
.tr-settings-emblem svg { width: 19px; height: 19px; }
.tr-setup-card { position: relative; flex-shrink: 0; margin: 0 14px 10px; padding: 10px 11px; border: 1px solid #ffffff0e; background: linear-gradient(115deg, #ffffff05, #ffffff01); }
.tr-setup-card::after { content: ''; position: absolute; top: -1px; left: 10px; width: 36px; height: 1px; background: var(--red); box-shadow: 0 0 9px #ff254050; }
.tr-setup-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; color: #838391; font: 600 7px var(--display); letter-spacing: 1px; }
#tr-setup-state { display: flex; align-items: center; gap: 4px; color: #ada3ad; font: 8px var(--body); letter-spacing: 0; }
#tr-setup-state i { width: 4px; height: 4px; background: #82828f; }
#tr-setup-state[data-state=ready] { color: #e4bdc8; }
#tr-setup-state[data-state=ready] i { background: var(--red-soft); box-shadow: 0 0 7px #ff254055; }
#tr-setup-state[data-state=loading] i { animation: tr-ready 1.4s ease-in-out infinite; }
#tr-setup-state[data-state=error] { color: var(--amber-soft); }
.tr-setup-card > strong { display: block; color: #e6e3ec; font: 600 11px var(--display); }
.tr-setup-card > p { margin: 5px 0 0; color: #8f8b9a; font: 8px var(--mono); }
.tr-setting-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex-shrink: 0; margin: 0 14px; padding-bottom: 10px; border-bottom: 1px solid #ffffff0a; }
.tr-setting-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 47px; border: 1px solid #ffffff09; background: #ffffff02; color: #888492; font: 600 8.5px var(--display); transition: color .18s, background .18s, border-color .18s; }
.tr-setting-tabs button svg { width: 15px; height: 15px; opacity: .65; }
.tr-setting-tabs button:hover { border-color: #ff25402c; background: #ff254006; color: #d7c3cb; }
.tr-setting-tabs button.active { border-color: #ff254057; background: linear-gradient(160deg, #ff254021, #ff254006); color: #ffe1e7; box-shadow: inset 0 -2px #ff2540; }
.tr-setting-tabs button.active svg { color: var(--red-soft); opacity: 1; }
.tr-settings-scroll { flex: 1; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 13px 12px; scrollbar-width: thin; scrollbar-color: #632739 transparent; scrollbar-gutter: stable; }
.tr-settings-scroll [role=tabpanel] { outline-offset: -2px; animation: tr-pane .2s ease-out; }
.tr-page-intro { display: flex; align-items: flex-start; gap: 8px; padding: 14px 1px 11px; }
.tr-page-intro > span { margin-top: 2px; color: #9f5c71; font: 9px var(--mono); }
.tr-page-intro h3 { margin: 0; color: #d6d0dd; font: 600 11px var(--display); }
.tr-page-intro p { margin: 4px 0 0; color: #8c8594; font: 10px/1.4 var(--body); }
.tr-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; }
.tr-preset { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 4px; border: 1px solid #ffffff12; background: #ffffff03; color: #a6a0af; font: 600 8.5px var(--display); transition: border-color .18s, color .18s, background .18s; }
.tr-preset svg { width: 12px; height: 12px; }
.tr-preset:hover { border-color: #ff254060; color: #fff; background: #ff25400a; }
.tr-preset.active { color: #ffc3ce; border-color: #ff25404d; background: #ff254010; }
.tr-setting-group { min-width: 0; margin-bottom: 10px; padding: 11px 11px 2px; border: 1px solid #ffffff0b; background: linear-gradient(120deg, #ffffff03, #0000000d); }
.tr-setting-group h4 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid #ffffff08; color: #b28f9e; font: 600 7.5px var(--display); letter-spacing: 1.2px; }
.tr-field { display: block; min-width: 0; padding: 10px 0; border-bottom: 1px solid #ffffff07; }
.tr-field:last-child, .tr-check:last-child { border-bottom: 0; }
.tr-field-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 10px var(--body); color: #beb7c7; }
.tr-field-head output { margin-left: auto; padding: 2px 4px; background: #ff254009; color: #ff90a2; font: 9px var(--mono); }
.tr-field .game-select { height: 35px; border-color: #ffffff12; background-color: #0b0b10; color: #e1dce9; font-size: 10px; }
.tr-field .game-select:hover { background-color: #111016; }
.tr-field .game-select:focus-visible, .tr-field .game-select:open { border-color: var(--red); }
.tr-field .game-select::picker(select) { background: linear-gradient(150deg, #1b151c, #0e0e14); box-shadow: 0 15px 34px #000b, 0 0 22px #ff254010; }
.tr-field .game-select option { min-height: 34px; font-size: 10px; }
.tr-field .cs-range { display: block; width: 100%; cursor: pointer; }
.tr-field .cs-range:disabled { opacity: .35; cursor: default; }
.tr-field input[type=number] { width: 100%; height: 35px; padding: 0 10px; border: 1px solid #ffffff12; background: #0b0b10; color: #e1dce9; font: 10px var(--mono); }
.tr-field input[type=color] { height: 29px; width: 42px; padding: 2px; border: 1px solid #ffffff18; background: #111117; cursor: pointer; }
.tr-color-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-color-field .tr-field-head { margin: 0; }
.tr-field small { display: block; margin-top: 7px; color: #88818f; font: 10px/1.45 var(--body); }
.tr-help { margin: 4px 2px 13px; padding: 0 0 0 9px; border-left: 1px solid #ff25404a; color: #8c8495; font: 10px/1.55 var(--body); }
.tr-check { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #ffffff07; font: 10px/1.4 var(--body); color: #beb7c7; cursor: pointer; }
.tr-check span { order: -1; }
.tr-check input { appearance: none; flex-shrink: 0; width: 30px; height: 17px; margin: 0; border: 1px solid #ffffff20; background: #202028; position: relative; cursor: pointer; transition: background .18s; }
.tr-check input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; background: #737381; transition: left .18s, background .18s; }
.tr-check input:checked { border-color: #ff254066; background: #ff254021; }
.tr-check input:checked::after { left: 15px; background: #ff526c; box-shadow: 0 0 7px #ff25404d; }
.tr-crosshair-sample { position: relative; display: grid; place-items: center; margin: 4px 0 1px; height: 88px; overflow: hidden; border: 1px solid #ffffff0f; background: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px), radial-gradient(circle, #27222f, #13121a); background-size: 18px 18px, 18px 18px, 100% 100%; }
.tr-crosshair-sample > span { position: absolute; top: 7px; left: 8px; color: #8e7c90; font: 6.5px var(--display); letter-spacing: 1.1px; }
.tr-crosshair-sample canvas { display: block; width: 100%; height: 72px; min-width: 0; }
.tr-settings-footer { display: flex; flex-direction: column; flex-shrink: 0; gap: 8px; padding: 10px 14px 13px; border-top: 1px solid #ffffff0b; background: #0b0a10bd; box-shadow: 0 -10px 25px #08070c40; }
#tr-save-state { display: flex; align-items: center; justify-content: center; gap: 5px; color: #817888; font: 9px var(--body); }
#tr-save-state svg { width: 11px; height: 11px; color: #b08696; }
#tr-save-state[data-state=saving] svg { opacity: .35; }
#tr-save-state[data-state=error] { color: var(--amber-soft); }
.tr-reset { height: 30px; flex-shrink: 0; font-size: 8px; letter-spacing: .5px; }
.tr-reset svg { width: 12px; height: 12px; }
.tr-error { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 30px; background: radial-gradient(ellipse at 50% 30%, #39152140, transparent 65%), #0b0c12; color: #b1b3c0; text-align: center; }
.tr-load-mark { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border: 1px solid #ff254024; background: #ff254009; color: var(--red-soft); transform: rotate(45deg); }
.tr-load-mark svg { width: 26px; height: 26px; transform: rotate(-45deg); }
.tr-load-mark i { position: absolute; inset: -7px; border: 1px solid #ff254035; border-right-color: var(--red); border-bottom-color: var(--red); }
.tr-error[data-state=loading] .tr-load-mark i { animation: tr-loader 3s linear infinite; }
.tr-load-phase { margin-bottom: 9px; color: #b67d90; font: 700 7px var(--display); letter-spacing: 2px; }
.tr-load-track { display: none; width: 112px; height: 2px; margin-top: 13px; overflow: hidden; background: #ffffff0a; }
.tr-error[data-state=loading] .tr-load-track { display: block; }
.tr-load-track i { display: block; width: 40%; height: 100%; background: var(--red); animation: tr-load-track 1.3s ease-in-out infinite; }
.tr-error strong { color: #f2dbe1; font: 600 20px var(--display); }
.tr-error p { max-width: 300px; font-size: 12px; line-height: 1.5; }
.tr-hud { position: absolute; inset: 0; pointer-events: none; }
.tr-hud-top { display: flex; gap: 12px; align-items: center; position: absolute; top: 17px; left: 19px; right: 19px; }
.tr-hud-mode { position: relative; padding: 11px 14px; border: 1px solid #ffffff18; border-left: 2px solid #ff254094; background: linear-gradient(130deg, #18131ade, #080b12d1); backdrop-filter: blur(8px); }
.tr-hud-mode span { display: block; color: #ff8ba1; font: 700 8px var(--display); letter-spacing: 1.7px; }
.tr-hud-mode strong { display: block; margin-top: 4px; font: 600 14px var(--display); color: #f1f4fa; }
.tr-hud-buttons { margin-left: auto; display: flex; gap: 5px; pointer-events: auto; }
.tr-hud-buttons button { width: 34px; height: 34px; border: 1px solid #ffffff25; background: #100e17ce; color: #d3d9e5; display: grid; place-items: center; transition: border-color .16s, background .16s, color .16s; }
.tr-hud-buttons button:hover { border-color: var(--red); color: #fff; }
.tr-hud-buttons svg { width: 14px; height: 14px; }
.tr-hud-stats { position: absolute; top: 90px; left: 19px; display: flex; gap: 5px; }
.tr-hud-stats > div { min-width: 81px; padding: 9px 11px; border: 1px solid #ffffff14; background: linear-gradient(145deg, #13101acc, #080b129f); backdrop-filter: blur(5px); }
.tr-hud-stats span { display: block; color: #b6bdcc; font: 7px var(--display); letter-spacing: 1.2px; }
.tr-hud-stats strong { display: block; margin-top: 3px; color: #f8f9fc; font: 500 16px var(--mono); }
.tr-timer { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); min-width: 134px; padding: 11px 17px 15px; text-align: center; border: 1px solid #ffffff20; background: linear-gradient(160deg, #16101cdd, #080c14cf); backdrop-filter: blur(8px); }
.tr-timer strong { font: 500 25px var(--mono); letter-spacing: 2px; color: #f2f4fa; }
.tr-timer small { display: block; margin-top: 3px; color: #909db1; font: 7px var(--display); letter-spacing: 1.7px; }
.tr-timer.ending strong { color: #ff6c84; }
.tr-time-progress { position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: #ffffff12; }
.tr-time-progress i { display: block; width: var(--remaining, 100%); height: 100%; background: linear-gradient(90deg, #a1142e, var(--red-soft)); box-shadow: 0 0 10px #ff254030; transition: width .1s linear; }
.tr-timer.ending .tr-time-progress i { background: var(--red); }
.tr-fps { position: absolute; bottom: 18px; right: 20px; color: #acb6c7; font: 9px var(--mono); }
.tr-weapon-note { margin: 0 0 10px; padding-left: 7px; border-left: 1px solid #ff254047; color: #a48699; font: 9px/1.45 var(--body); }
.tr-combo { position: absolute; right: 24px; top: 91px; text-align: right; }
.tr-combo strong { font: 700 28px var(--display); color: #ff8ba1; text-shadow: 0 0 20px #ff254050; }
.tr-combo span { display: block; color: #b6a4b1; font: 7px var(--display); letter-spacing: 2px; }
.tr-combo.has-streak strong { color: #ffd2db; text-shadow: 0 0 24px #ff254084; }
.tr-combo.has-streak::after { content: ''; display: block; height: 2px; width: 34px; margin: 8px 0 0 auto; background: var(--red); box-shadow: 0 0 13px #ff25406b; }
.tr-reticle { position: absolute; width: 240px; height: 240px; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.tr-hit { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; translate: -50% -50%; opacity: 0; border: 0; pointer-events: none; color: #ffe1ab; }
.tr-hit svg { width: 38px; height: 38px; }
.tr-hit.show { animation: tr-hit .2s ease-out; }
.tr-count { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #07081040, #07081070); pointer-events: none; }
.tr-count::before { content: ''; position: absolute; left: 50%; top: 50%; width: 174px; height: 174px; border: 1px solid #ffffff15; border-top-color: #ff254066; border-bottom-color: #ff254066; transform: translate(-50%, -50%) rotate(45deg); }
.tr-count strong { font: 700 100px var(--display); color: #fff; text-shadow: 0 0 50px #ff254065; }
.tr-count span { color: #d1d8e5; font: 700 11px var(--display); letter-spacing: 3px; }
.tr-dialog { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; padding: 20px; overflow: auto; background: #05080dde; backdrop-filter: blur(12px); }
.tr-dialog-card { width: min(490px, 100%); padding: 29px; border: 1px solid #ff254047; background: radial-gradient(ellipse at 50% 0, #37172380, transparent 65%), #11131b; box-shadow: 0 24px 70px #0005; animation: tr-dialog .22s ease-out; }
.tr-dialog-card > small { color: #ff8299; font: 700 8px var(--display); letter-spacing: 2px; }
.tr-dialog-card h2 { margin: 9px 0; font: 600 30px var(--display); letter-spacing: -.7px; }
.tr-dialog-card > p { color: #a0a8b8; font-size: 12px; line-height: 1.5; }
.tr-dialog-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.tr-dialog-actions .gbtn { min-height: 37px; padding: 0 13px; font-size: 8px; }
.tr-pause-controls { display: flex; flex-wrap: wrap; gap: 12px; padding: 13px 0; border-block: 1px solid #ffffff12; color: #929bab; font: 9px var(--mono); }
.tr-score { margin: 18px 0; display: flex; align-items: baseline; gap: 12px; }
.tr-score strong { font: 600 57px/1 var(--display); color: #fff; letter-spacing: -2px; }
.tr-score span { color: #a29aa9; font: 8px var(--display); letter-spacing: 1.5px; }
.tr-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tr-result-grid > div { padding: 12px 10px; border: 1px solid #ffffff11; background: #ffffff02; }
.tr-result-grid span { display: block; color: #959baa; font: 7px var(--display); letter-spacing: 1px; }
.tr-result-grid strong { display: block; margin-top: 6px; color: #e3e8f0; font: 500 17px var(--mono); }
.tr-record { margin-top: 14px; padding: 9px 11px; border: 1px solid #ff254026; background: #ff254008; color: #c895a4; font: 9px var(--mono); }
.training.tr-playing .tr-heading, .training.tr-playing .tr-modes, .training.tr-playing .tr-settings, .training.tr-playing .tr-launch, .training.tr-playing .tr-controls-hint { display: none; }
.training.tr-playing .tr-layout { display: flex; }
.training.tr-playing .tr-workspace { flex: 1; }
.training.tr-playing .tr-scene-shade, .training.tr-playing .tr-scene-top, .training.tr-playing .tr-lobby-info { display: none; }
.training.tr-fullscreen { position: fixed; z-index: 60; inset: 0; padding: 0; background: #080b12; gap: 0; }
.training.tr-fullscreen .tr-stage { border: 0; }
.training.tr-fullscreen .tr-workspace { gap: 0; }
.training.tr-fullscreen:not(.tr-playing) { padding: 15px; }
body.training-playing .aurora, body.training-playing .aurora-2 { animation-play-state: paused; }
@keyframes tr-hit { from { opacity: 1; scale: 1.25; } to { opacity: 0; scale: .9; } }
@keyframes tr-pane { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tr-dialog { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tr-ready { 50% { opacity: .25; } }
@keyframes tr-loader { to { transform: rotate(360deg); } }
@keyframes tr-load-track { from { transform: translateX(-120%); } to { transform: translateX(350%); } }
@media (max-width: 1220px) { .tr-layout { grid-template-columns: 190px minmax(0, 1fr) 270px; gap: 8px; } .tr-heading h1 { font-size: 24px; } .tr-mode { gap: 7px; padding: 8px; } .tr-mode strong { font-size: 10px; } .tr-lobby-info { left: 16px; right: 16px; } .tr-launch { padding: 11px; gap: 8px; } .tr-launch-copy span { font-size: 8px; } .tr-primary { padding: 0 11px; } }
@media (max-width: 1420px) { .titlebar .wordmark { display: none; } .titlebar { gap: 9px; padding-inline: 15px; } .app-tabs { margin-left: 0; } #status-chip .chip-split, #status-detail { display: none; } }
@media (max-width: 1030px) { #status-chip { display: none; } .titlebar .app-tab { padding-inline: 7px; font-size: 8px; letter-spacing: .6px; } }
@media (max-width: 1000px) { .training { padding: 10px; gap: 9px; } .tr-layout { grid-template-columns: 173px minmax(0, 1fr) 244px; } .tr-mode > b, .tr-local { display: none; } .tr-mode-icon { width: 24px; height: 26px; } .tr-mode { min-height: 53px; } .tr-mode strong { font-size: 9px; } .tr-mode small { font-size: 6px; } .tr-heading p { font-size: 10px; } .tr-launch { grid-template-columns: 1fr; } .tr-launch-copy { display: none; } .tr-primary { width: 100%; } .tr-controls-hint { font-size: 7px; } .tr-controls-hint span:last-child { display: none; } .tr-settings-title { padding-inline: 11px; gap: 8px; } .tr-settings-title h2 { font-size: 12px; } .tr-settings-title small { font-size: 6px; } .tr-setup-card { margin-inline: 11px; } .tr-setting-tabs { margin-inline: 11px; } .tr-settings-scroll { padding-inline: 10px; } .tr-setting-group { padding-inline: 9px; } .tr-setup-card > p { font-size: 7px; } .tr-preset { font-size: 7.5px; gap: 3px; } }
@media (max-height: 750px) { .tr-heading p, .tr-modes-foot { display: none; } .tr-heading h1 { font-size: 23px; } .tr-mode { min-height: 49px; padding-block: 7px; } .tr-modes { padding-top: 10px; } .tr-lobby-info h2 { font-size: 26px; } .tr-lobby-info p { font-size: 11px; } .tr-settings-title { padding-top: 11px; } .tr-setting-tabs button { height: 42px; gap: 3px; } .tr-page-intro { padding-top: 12px; } .tr-page-intro p { font-size: 9px; } .tr-field { padding-block: 9px; } }
@media (prefers-reduced-motion: reduce) { .training *, .training *::after { animation: none !important; transition: none !important; } }