body.training-open #menu { visibility: hidden; }
body.training-open #game { filter: saturate(1.08) contrast(1.04); }

#training-launch {
  width: 100%; min-height: 52px; margin-top: 12px; border: 1px solid rgba(124,242,90,.75); border-radius: 9px;
  background: linear-gradient(110deg, rgba(124,242,90,.18), rgba(88,230,255,.09)); color: #f4fff1;
  font: 900 13px/1.2 'Segoe UI', sans-serif; letter-spacing: 1.15px; cursor: pointer;
  box-shadow: inset 0 0 20px rgba(124,242,90,.04), 0 0 18px rgba(124,242,90,.08);
}
#training-launch:hover { border-color: var(--alien); transform: translateY(-1px); }
#training-launch small { display: block; margin-top: 4px; color: #9eb6aa; font-size: 9px; letter-spacing: .65px; }
#training-replay {
  grid-column: 1 / -1; justify-self: end; min-height: 34px; padding: 0 12px;
  border: 1px solid #39415f; border-radius: 7px; background: rgba(255,255,255,.025);
  color: #aeb6d2; font-size: 10px; font-weight: 800; letter-spacing: .75px; cursor: pointer;
}
#training-replay:hover { color: #fff; border-color: #667198; }

#signal-certification {
  position: fixed; inset: 0; z-index: 80;
  padding: 0;
  background:
    radial-gradient(circle at 58% 42%, transparent 0 34%, rgba(3,7,13,.08) 70%, rgba(3,6,12,.36) 100%),
    linear-gradient(90deg, rgba(4,8,15,.3), transparent 34%, rgba(4,8,15,.08));
  touch-action: none;
}
#signal-certification[hidden] { display: none; }
.training-shell {
  position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden;
  border: 0; border-radius: 0; background: transparent;
}
.training-header {
  position: absolute; z-index: 16; top: 0; left: 0; right: 0;
  min-height: 70px; padding: 13px max(18px, var(--app-safe-area-right)) 13px max(18px, var(--app-safe-area-left)); display: grid;
  grid-template-columns: 1fr minmax(190px, 300px) 34px; align-items: center; gap: 18px;
  border-bottom: 1px solid rgba(130,191,204,.24); background: linear-gradient(180deg, rgba(7,14,24,.96), rgba(7,14,24,.82)); backdrop-filter: blur(12px);
}
.training-header small, .training-instruction small, .training-complete small { color: #70e7ff; font-size: 9px; font-weight: 900; letter-spacing: 1.8px; }
.training-header h2 { margin-top: 2px; color: #f3f8ff; font: 900 22px/1 Bahnschrift, 'Segoe UI', sans-serif; letter-spacing: 1.5px; }
.training-progress span { display: block; margin-bottom: 6px; color: #9aa9c2; font-size: 9px; font-weight: 900; letter-spacing: 1px; text-align: right; }
.training-progress div { height: 4px; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,.09); }
.training-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--alien), #58e6ff); transition: width .3s ease; }
#training-exit { width: 32px; height: 32px; border: 1px solid #38425c; border-radius: 7px; background: #111827; color: #9da8c2; font-size: 22px; cursor: pointer; }

.training-layout { position: absolute; inset: 0; min-height: 0; }
#training-checklist {
  position: absolute; z-index: 14; top: 82px; bottom: 39px; left: max(12px, var(--app-safe-area-left)); width: 205px;
  min-height: 0; overflow-y: auto; padding: 10px 12px; list-style: none;
  border: 1px solid rgba(130,191,204,.2); border-radius: 10px; background: rgba(4,9,16,.82); backdrop-filter: blur(10px);
}
#training-checklist li { min-height: 42px; display: grid; grid-template-columns: 27px 1fr 16px; align-items: center; gap: 8px; color: #7d89a2; border-bottom: 1px solid rgba(255,255,255,.045); }
#training-checklist li b { font: 800 9px/1 monospace; color: #58647e; }
#training-checklist li span { font-size: 9px; font-weight: 800; letter-spacing: .72px; }
#training-checklist li i { font-style: normal; font-size: 11px; text-align: center; }
#training-checklist li.current { color: #fff; }
#training-checklist li.current b, #training-checklist li.current i { color: var(--alien); text-shadow: 0 0 9px rgba(124,242,90,.45); }
#training-checklist li.done { color: #8bbda0; }
#training-checklist li.done i { color: var(--alien); }

.training-main {
  position: absolute; inset: 0; min-width: 0; min-height: 0; padding: 0;
}
.training-stage {
  --training-aim-x: 50%;
  position: absolute; inset: 0; min-height: 0; overflow: hidden; outline: 0;
  border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(4,14,21,.01), rgba(4,14,21,.06));
  box-shadow: inset 0 0 60px rgba(2,7,12,.18); cursor: crosshair; isolation: isolate;
}
.training-world-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(100,210,230,.025), transparent 42%, rgba(3,9,14,.16)); }
.training-world-kicker { position: absolute; left: 232px; top: 82px; display: flex; align-items: center; gap: 8px; color: #a9bfca; font-size: 8px; font-weight: 800; letter-spacing: .8px; text-shadow: 0 1px 4px #000; }
.training-world-kicker b { padding: 4px 6px; border: 1px solid rgba(124,242,90,.5); color: var(--alien); background: rgba(6,14,16,.74); border-radius: 4px; }
.training-link { position: absolute; right: max(16px, var(--app-safe-area-right)); top: 82px; width: 158px; padding: 7px; border: 1px solid rgba(255,194,74,.52); border-radius: 7px; background: rgba(7,12,20,.84); z-index: 8; box-shadow: 0 0 16px rgba(232,184,58,.1); }
.training-link span { display: block; color: #f4c45c; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.training-link div { height: 4px; margin: 5px 35px 0 0; border-radius: 10px; background: rgba(255,255,255,.1); }
.training-link div i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f36a52, #f1c94b); transition: width .3s; }
.training-link > b { position: absolute; right: 7px; bottom: 4px; color: #fff; font-size: 11px; }
.training-objective-tag { position: absolute; left: 56%; bottom: 17%; display: none; align-items: center; gap: 6px; color: #f3d371; font-size: 8px; font-weight: 900; letter-spacing: .8px; text-shadow: 0 1px 5px #000; }
.training-objective-tag i { width: 7px; height: 7px; border: 1px solid #f0c040; transform: rotate(45deg); box-shadow: 0 0 8px #f0c040; }
#signal-certification[data-step="objective"] .training-objective-tag { display: flex; }
.training-world-prompt { position: absolute; left: 50%; bottom: 184px; transform: translateX(-50%); min-width: 210px; padding: 6px 9px; border: 1px solid rgba(112,231,255,.28); border-radius: 5px; background: rgba(3,10,16,.72); color: #d7edf1; font-size: 8px; font-weight: 900; letter-spacing: .8px; text-align: center; text-shadow: 0 1px 3px #000; }
.training-crosshair { position: absolute; left: var(--training-aim-x); top: 50%; width: 28px; height: 28px; transform: translate(-50%,-50%); pointer-events: none; filter: drop-shadow(0 1px 2px #000); }
.training-crosshair i { position: absolute; left: 50%; top: 50%; background: rgba(239,255,238,.9); transform: translate(-50%,-50%); }
.training-crosshair i:first-child { width: 24px; height: 1px; }
.training-crosshair i:nth-child(2) { width: 1px; height: 24px; }
.training-crosshair b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; transform: translate(-50%,-50%); border: 1px solid var(--alien); border-radius: 50%; }
.training-hitmarker { position: absolute; left: var(--training-aim-x); top: 50%; width: 31px; height: 31px; display: none; transform: translate(-50%,-50%) rotate(45deg); pointer-events: none; }
.training-hitmarker i { position: absolute; left: 50%; top: 50%; background: #fff5ad; transform: translate(-50%,-50%); }
.training-hitmarker i:first-child { width: 28px; height: 2px; }.training-hitmarker i:last-child { width: 2px; height: 28px; }
.training-stage.primary-complete .training-hitmarker, .training-stage.scope-complete .training-hitmarker { display: block; animation: trainingHit .34s ease-out forwards; }
.training-scope-mask { position: absolute; inset: -1px; z-index: 7; display: none; pointer-events: none; background: radial-gradient(circle at var(--training-aim-x) 50%, transparent 0 31%, rgba(1,3,7,.2) 31.4%, rgba(1,3,7,.94) 47%); }
.training-scope-mask::before, .training-scope-mask::after { content: ''; position: absolute; left: var(--training-aim-x); top: 50%; background: rgba(230,247,255,.72); transform: translate(-50%,-50%); }
.training-scope-mask::before { width: 42%; height: 1px; }.training-scope-mask::after { width: 1px; height: 58%; }
.training-scope-mask i { position: absolute; left: var(--training-aim-x); top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(194,232,240,.52); border-radius: 50%; }
.training-scope-mask b { position: absolute; left: calc(var(--training-aim-x) + 5px); top: calc(50% + 5px); width: 4px; height: 4px; border: 1px solid #ffdf68; border-radius: 50%; }
.training-scope-mask span { position: absolute; right: 10px; bottom: 9px; color: #d5e7ee; font: 800 8px/1 monospace; letter-spacing: .6px; }
#signal-certification.scoped .training-scope-mask { display: block; }
#signal-certification.scoped .training-crosshair { display: none; }

.training-instruction { position: absolute; z-index: 14; left: 232px; right: max(18px, var(--app-safe-area-right)); bottom: 98px; min-height: 66px; padding: 10px 13px; border: 1px solid rgba(130,191,204,.22); border-radius: 9px; background: rgba(6,10,18,.86); backdrop-filter: blur(10px); }
.training-instruction h3 { margin-top: 2px; color: #f4f7ff; font-size: 15px; letter-spacing: 1px; }
.training-instruction p { margin-top: 3px; color: #aeb9ce; font-size: 11px; line-height: 1.35; }
.training-actions { position: absolute; z-index: 14; left: 232px; right: max(18px, var(--app-safe-area-right)); bottom: 39px; display: grid; grid-template-columns: repeat(8, minmax(62px, 1fr)); gap: 6px; }
.training-actions button { position: relative; min-height: 49px; overflow: hidden; padding: 6px 5px; border: 1px solid #39445f; border-radius: 8px; background: rgba(12,20,34,.9); color: #7f8aa5; cursor: default; backdrop-filter: blur(8px); }
.training-actions button b, .training-actions button span { position: relative; z-index: 2; display: block; }
.training-actions button b { color: #9aa6c0; font-size: 9px; letter-spacing: .75px; }.training-actions button span { margin-top: 3px; font-size: 9px; }
.training-actions button.active { border-color: var(--alien); color: #eaffe5; background: rgba(32,66,39,.9); cursor: pointer; box-shadow: 0 0 13px rgba(124,242,90,.12); animation: trainingPulse .7s infinite alternate; }
.training-actions button.active b { color: var(--alien); }
.training-actions button.hold > i { position: absolute; z-index: 1; left: 0; bottom: 0; width: var(--training-hold, 0%); height: 100%; background: linear-gradient(90deg, rgba(88,230,255,.08), rgba(88,230,255,.32)); }
.training-complete { position: absolute; z-index: 20; top: 82px; right: max(18px, var(--app-safe-area-right)); bottom: 39px; left: 232px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(124,242,90,.55); border-radius: 11px; background: radial-gradient(circle, rgba(28,77,49,.84), rgba(5,12,17,.94)); backdrop-filter: blur(12px); text-align: center; }
.training-complete[hidden] { display: none; }.training-complete strong { margin-top: 5px; color: #eaffdf; font: 900 25px/1 Bahnschrift, sans-serif; letter-spacing: 1.5px; }.training-complete p { margin-top: 9px; color: #b7c9bb; font-size: 11px; }.training-complete button { margin-top: 18px; min-width: 230px; min-height: 46px; border: 1px solid var(--alien); border-radius: 8px; background: rgba(124,242,90,.14); color: #fff; font-weight: 900; letter-spacing: .8px; cursor: pointer; }
.training-shell > footer { position: absolute; z-index: 16; left: 0; right: 0; bottom: 0; min-height: 30px; padding: 6px max(14px, var(--app-safe-area-right)) max(6px, var(--app-safe-area-bottom)) max(14px, var(--app-safe-area-left)); display: flex; justify-content: space-between; align-items: center; color: #77849c; border-top: 1px solid rgba(130,191,204,.2); background: rgba(5,10,18,.88); font-size: 9px; letter-spacing: .55px; backdrop-filter: blur(10px); }.training-shell > footer b { color: #82dbe9; }

@keyframes trainingPulse { to { filter: brightness(1.25); } }
@keyframes trainingHit { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(.65); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(1.35); } }

@media (min-width: 701px) and (min-height: 521px) {
  #signal-certification[data-step="fence"] .training-instruction h3 { color: #eaffdf; font-size: 18px; font-weight: 900; letter-spacing: 1.15px; }
  #signal-certification[data-step="fence"] .training-actions button.active b { font-size: 11px; font-weight: 900; }
}

@media (max-width: 700px), (max-height: 520px) {
  .training-header { min-height: 48px; padding: max(7px, var(--app-safe-area-top)) max(8px, var(--app-safe-area-right)) 7px max(8px, var(--app-safe-area-left)); grid-template-columns: 1fr minmax(130px, 210px) 28px; gap: 8px; }
  .training-header h2 { font-size: 16px; }.training-header small { display: none; }.training-progress span { margin-bottom: 3px; font-size: 8px; }
  #training-exit { width: 27px; height: 27px; font-size: 18px; }
  #training-checklist { display: none; }
  .training-link { top: 56px; right: max(6px, var(--app-safe-area-right)); width: 125px; padding: 5px; }
  .training-objective-tag { bottom: 40%; font-size: 6px; }
  .training-world-kicker { left: max(7px, var(--app-safe-area-left)); top: 56px; font-size: 6px; }.training-world-kicker b { padding: 3px 4px; }
  .training-world-prompt { bottom: 159px; min-width: 180px; padding: 4px 6px; font-size: 6px; }
  .training-instruction { left: max(6px, var(--app-safe-area-left)); right: max(6px, var(--app-safe-area-right)); bottom: 106px; min-height: 47px; padding: 5px 9px; }
  .training-instruction h3 { font-size: 11px; }.training-instruction p { font-size: 8px; }.training-instruction small { font-size: 7px; }
  .training-actions { left: max(6px, var(--app-safe-area-left)); right: max(6px, var(--app-safe-area-right)); bottom: 25px; grid-template-columns: repeat(4, minmax(58px, 1fr)); gap: 4px; }
  .training-actions button { min-height: 37px; padding: 3px; }.training-actions button b, .training-actions button span { font-size: 7px; margin-top: 1px; }
  .training-complete { top: 56px; right: max(6px, var(--app-safe-area-right)); bottom: 25px; left: max(6px, var(--app-safe-area-left)); }
  .training-shell > footer { min-height: 23px; padding: 4px max(8px, var(--app-safe-area-right)) max(4px, var(--app-safe-area-bottom)) max(8px, var(--app-safe-area-left)); font-size: 7px; }
}
.course-shell .training-header { padding-top: max(8px, var(--app-safe-area-top)); grid-template-columns: 1fr auto 36px; }
.course-shell .training-instruction { left: 150px; right: 12px; bottom: 70px; min-height: 0; padding: 8px 12px; }
.course-shell .training-instruction h3 { font-size: 15px; }
.course-shell .training-instruction p { font-size: 12px; }
.course-shell .training-actions { left: auto; right: max(12px, var(--app-safe-area-right)); bottom: max(12px, var(--app-safe-area-bottom)); display: flex; gap: 8px; }
.course-shell .training-actions button { min-width: 100px; min-height: 44px; font-size: 12px; color: #edfff1; border-color: #90e7ad; }
.course-shell [hidden] { display: none !important; }
#course-health { position: absolute; top: calc(76px + var(--app-safe-area-top)); left: max(12px, var(--app-safe-area-left)); background: #0b1828dd; color: white; padding: 8px; border-radius: 6px; font: 800 12px/1.4 sans-serif; }
@media (max-height: 520px) { #course-health { top: calc(54px + var(--app-safe-area-top)); } }
#course-stick { position: absolute; left: max(20px, var(--app-safe-area-left)); bottom: max(18px, var(--app-safe-area-bottom)); width: 105px; height: 105px; border: 2px solid #9cd9e0; border-radius: 50%; background: #18344299; display: grid; place-items: center; color: white; touch-action: none; font: 800 12px sans-serif; }
.course-damaged .training-stage { box-shadow: inset 0 0 90px #ec403980; }
#course-hint { color: #ffd28d; }
.course-shell progress { display: block; width: 100%; height: 12px; margin-top: 6px; border: 1px solid #83b6b866; border-radius: 8px; overflow: hidden; appearance: none; background: #172637; }
.course-shell progress::-webkit-progress-bar { background: #172637; }
.course-shell progress::-webkit-progress-value { background: var(--course-bar-color, #84ee9d); }
.course-shell progress::-moz-progress-bar { background: var(--course-bar-color, #84ee9d); }
#course-health { min-width: 190px; }
#course-hold { position: absolute; top: calc(50% - 18px); left: 50%; transform: translate(-50%, -100%); width: min(260px, 44vw); padding: 10px; border: 1px solid #ecc46566; border-radius: 8px; background: #091321ed; color: #ffe5a4; font: 800 11px/1.3 sans-serif; text-align: center; pointer-events: none; --course-bar-color: #ffcc62; }
#course-hold[data-action="scrap"] { --course-bar-color: #79dcff; border-color: #79dcff88; color: #b9eeff; }
.course-shell .training-actions button:disabled { opacity: .65; cursor: default; }

/* The current course borrows the mission HUD unchanged. Only the coach card
   and training navigation are additions; never shrink instructional type. */
.shared-game-hud .course-shell .training-header {
  left: auto; right: max(8px, var(--app-safe-area-right)); top: max(8px, var(--app-safe-area-top));
  min-height: 44px; width: auto; padding: 0; display: flex; gap: 6px;
  border: 0; background: none; backdrop-filter: none; z-index: 51;
}
.shared-game-hud #training-exit, .shared-game-hud #course-retry {
  min-width: 44px; height: 44px; border: 1px solid #8aabb866; border-radius: 8px;
  background: #07131bd9; color: #eefaff; font: 700 14px/1 system-ui; cursor: pointer;
}
.shared-game-hud #training-exit { font-size: 26px; }
.shared-game-hud .course-shell .training-instruction {
  left: 50%; right: auto; top: max(12px, var(--app-safe-area-top)); bottom: auto;
  transform: translateX(-50%); width: 310px; min-height: 0; padding: 12px 14px;
  background: #06121df0; border: 1px solid #77c6b266; border-left: 3px solid #adf795;
  box-shadow: 0 4px 18px #0005; z-index: 50; pointer-events: none; backdrop-filter: none;
}
.shared-game-hud .course-shell .training-instruction h3 {
  font: 800 18px/1.2 system-ui, sans-serif; letter-spacing: 0; margin: 4px 0;
}
.shared-game-hud .course-shell .training-instruction p {
  font: 500 15px/1.35 system-ui, sans-serif; margin: 0; color: #edf7ff;
}
.shared-game-hud .course-shell .training-instruction small { font-size: 11px; letter-spacing: 1px; }
.shared-game-hud #course-hint { margin-top: 6px; color: #ffe1a0; }
.shared-game-hud #course-hint:empty { display: none; }
.shared-game-hud .training-instruction:has(#course-hint:not(:empty)) #training-step-body { display: none; }
.shared-game-hud .course-shell .training-actions { position: static; margin-top: 8px; }
.shared-game-hud .course-shell .training-actions:has(button[style*="display: none"]) { display: none; }
.shared-game-hud #course-action { pointer-events: auto; }
.shared-game-hud #course-health, .shared-game-hud #course-stick,
.shared-game-hud .training-crosshair, .shared-game-hud .training-scope-mask { display: none !important; }
.shared-game-hud #course-hold { z-index: 45; pointer-events: none; }
.shared-game-hud .training-focus { outline: 2px solid #bcff9c; outline-offset: 4px; }
.shared-game-hud .training-locked { opacity: .35; }
.shared-game-hud #hud { pointer-events: none; }
.shared-game-hud #hud button, .shared-game-hud #game-settings { pointer-events: auto; }
.shared-game-hud #tower-pad-menu { pointer-events: auto; }
.shared-game-hud #tower-pad-menu .tower-pad-choices { grid-template-columns: minmax(0, 1fr); width: 116px; }
.shared-game-hud #game-settings { z-index: 60; }
.shared-game-hud #settings-corner-close { z-index: 61; }
.settings-open .shared-game-hud .training-instruction,
.settings-open .shared-game-hud .training-header { visibility: hidden; }
.touch-ui .shared-game-hud .course-shell .training-instruction {
  left: max(10px, var(--app-safe-area-left)); top: max(124px, calc(var(--app-safe-area-top) + 114px));
  width: min(228px, 32vw); transform: none; padding: 10px;
}
.touch-ui .shared-game-hud .course-shell .training-instruction h3 { font-size: 17px; }
.touch-ui .shared-game-hud .course-shell .training-instruction p { font-size: 14px; }
@media (max-width: 620px) {
  .touch-ui .shared-game-hud .course-shell .training-instruction {
    top: max(94px, calc(var(--app-safe-area-top) + 88px)); width: 202px; padding: 8px;
  }
  .touch-ui .shared-game-hud .course-shell .training-instruction h3 { font-size: 16px; }
}