.vsa-training-screen {
  min-height: 100svh;
  height: 100svh;
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 10%, rgba(230, 190, 111, 0.18), rgba(230, 190, 111, 0) 22%),
    radial-gradient(circle at 86% 16%, rgba(148, 100, 38, 0.2), rgba(148, 100, 38, 0) 20%),
    radial-gradient(circle at 50% 120%, rgba(91, 49, 19, 0.18), rgba(91, 49, 19, 0) 36%),
    linear-gradient(180deg, #19120e 0%, #0e0a08 54%, #060505 100%);
}

.vsa-training-shell {
  --crate-border: rgba(201, 162, 89, 0.22);
  --crate-border-strong: rgba(229, 190, 112, 0.42);
  --crate-copy: rgba(245, 231, 204, 0.82);
  --crate-copy-soft: rgba(225, 201, 158, 0.68);
  --crate-title: #f8ebca;
  --crate-accent: #e2bb74;
  position: relative;
  width: min(1380px, 100%);
  height: calc(100svh - 28px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--crate-border);
  background:
    radial-gradient(circle at top center, rgba(238, 198, 118, 0.08), rgba(238, 198, 118, 0) 28%),
    linear-gradient(180deg, rgba(22, 16, 12, 0.95), rgba(9, 8, 7, 0.98)),
    linear-gradient(130deg, rgba(78, 54, 21, 0.08), rgba(78, 54, 21, 0));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 237, 194, 0.08),
    inset 0 0 0 1px rgba(104, 74, 28, 0.16);
  overflow: hidden;
}

.vsa-training-shell::before,
.vsa-training-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.vsa-training-shell::before {
  inset: 10px;
  border: 1px solid rgba(191, 156, 82, 0.12);
}

.vsa-training-shell::after {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(209, 171, 96, 0.035) 0 1px, transparent 1px 100%),
    linear-gradient(rgba(209, 171, 96, 0.03) 0 1px, transparent 1px 100%);
  background-size: 180px 100%, 100% 108px;
  opacity: 0.34;
}

.vsa-training-ambient,
.vsa-training-starfield,
.vsa-training-room-grid {
  position: absolute;
  pointer-events: none;
}

.vsa-training-ambient {
  border-radius: 999px;
  filter: blur(22px);
}

.vsa-training-ambient-a {
  top: -120px;
  left: 22%;
  width: 360px;
  height: 220px;
  background: radial-gradient(circle, rgba(231, 188, 103, 0.18), rgba(231, 188, 103, 0) 72%);
}

.vsa-training-ambient-b {
  right: -120px;
  bottom: 8%;
  width: 330px;
  height: 230px;
  background: radial-gradient(circle, rgba(155, 100, 34, 0.18), rgba(155, 100, 34, 0) 72%);
}

.vsa-training-starfield {
  inset: 0;
}

.vsa-training-starfield span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 236, 192, 0.78);
  box-shadow: 0 0 10px rgba(255, 215, 141, 0.34);
  animation: vsa-training-twinkle 4.8s ease-in-out infinite;
}

.vsa-training-starfield span:nth-child(1) { top: 14%; left: 18%; animation-delay: 0s; }
.vsa-training-starfield span:nth-child(2) { top: 20%; left: 52%; animation-delay: 0.8s; }
.vsa-training-starfield span:nth-child(3) { top: 11%; left: 72%; animation-delay: 1.4s; }
.vsa-training-starfield span:nth-child(4) { top: 34%; left: 88%; animation-delay: 2.2s; }
.vsa-training-starfield span:nth-child(5) { top: 62%; left: 14%; animation-delay: 3s; }
.vsa-training-starfield span:nth-child(6) { top: 73%; left: 46%; animation-delay: 1.8s; }
.vsa-training-starfield span:nth-child(7) { top: 79%; left: 80%; animation-delay: 2.8s; }
.vsa-training-starfield span:nth-child(8) { top: 49%; left: 63%; animation-delay: 3.6s; }

.vsa-training-header,
.vsa-training-room,
.vsa-training-room-grid {
  position: relative;
  z-index: 1;
}

.vsa-training-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 6px;
}

.vsa-training-brand {
  display: grid;
  gap: 2px;
}

.vsa-training-kicker,
.vsa-training-header-meta,
.vsa-training-side-label,
.vsa-training-side-kicker,
.vsa-training-station-index,
.vsa-training-station-mode,
.vsa-training-hero-tags span,
.vsa-training-side-stat-label,
.vsa-training-side-readout span {
  margin: 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  text-transform: uppercase;
}

.vsa-training-kicker,
.vsa-training-side-label,
.vsa-training-station-index {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: rgba(226, 194, 132, 0.84);
}

.vsa-training-header-meta,
.vsa-training-side-kicker,
.vsa-training-station-mode,
.vsa-training-side-stat-label,
.vsa-training-side-readout span {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(194, 164, 112, 0.74);
}


.vsa-training-room {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.76fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid rgba(179, 145, 79, 0.16);
  background:
    linear-gradient(180deg, rgba(17, 13, 11, 0.94), rgba(9, 8, 7, 0.98)),
    radial-gradient(circle at 18% 0%, rgba(220, 185, 107, 0.06), rgba(220, 185, 107, 0) 28%);
  overflow: hidden;
}

.vsa-training-room-grid {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(214, 179, 100, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(214, 179, 100, 0.035) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: 0.22;
}

.vsa-training-hero-panel,
.vsa-training-side-panel,
.vsa-training-station-board,
.vsa-training-impact-zone {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(194, 160, 92, 0.16);
  background:
    linear-gradient(180deg, rgba(25, 19, 15, 0.94), rgba(12, 10, 9, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 190, 0.04),
    inset 0 0 26px rgba(255, 214, 140, 0.018);
}

.vsa-training-hero-panel {
  grid-column: 1 / 2;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
}

.vsa-training-hero-panel::before,
.vsa-training-station-board::before,
.vsa-training-side-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vsa-training-hero-panel::before {
  background:
    linear-gradient(120deg, rgba(230, 189, 107, 0.08), rgba(230, 189, 107, 0) 32%),
    radial-gradient(circle at 78% 50%, rgba(243, 206, 133, 0.06), rgba(243, 206, 133, 0) 32%);
}

.vsa-training-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 650px;
}

.vsa-training-visual {
  position: relative;
  width: 170px;
  height: 170px;
  justify-self: end;
  z-index: 4;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transform: translate(
    var(--vsa-training-visual-x, 0px),
    var(--vsa-training-visual-y, 0px)
  );
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease;
}

.vsa-training-visual.is-dragging {
  cursor: grabbing;
  transition: none;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.24));
}

.vsa-training-visual.is-armed {
  filter: drop-shadow(0 0 22px rgba(233, 188, 104, 0.22));
}

.vsa-training-visual.is-disabled {
  cursor: default;
  pointer-events: none;
  filter: none;
}

.vsa-training-logo,
.vsa-training-lens {
  position: absolute;
}

.vsa-training-logo {
  left: calc(50% - 50px);
  top: calc(50% + 16px);
  width: 88px;
  height: 88px;
  object-fit: contain;
  object-position: 34% 50%;
  opacity: 0.19;
  filter:
    sepia(1)
    saturate(0.78)
    hue-rotate(350deg)
    brightness(1.04)
    drop-shadow(0 0 18px rgba(227, 187, 103, 0.12));
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  animation: vsa-training-logo-pulse 4.8s ease-in-out infinite;
}

.vsa-training-title,
.vsa-training-station-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  color: var(--crate-title);
}

.vsa-training-title {
  margin-top: 6px;
  font-size: clamp(1.9rem, 2.7vw, 3rem);
  line-height: 0.94;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.vsa-training-intro-copy,
.vsa-training-side-copy,
.vsa-training-side-footnote,
.vsa-training-station-board-copy,
.vsa-training-station-copy,
.vsa-training-side-stat-value {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  line-height: 1.42;
  letter-spacing: 0.03em;
}

.vsa-training-intro-copy {
  margin-top: 8px;
  max-width: 620px;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--crate-copy);
}

.vsa-training-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.vsa-training-hero-tags span {
  padding: 6px 9px 5px;
  border: 1px solid rgba(207, 170, 97, 0.18);
  background: rgba(255, 233, 188, 0.03);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: rgba(233, 206, 156, 0.78);
  white-space: nowrap;
}

.vsa-training-lens {
  width: 142px;
  height: 142px;
  left: 50%;
  top: calc(50% - 22px);
  transform: translate(-50%, -50%);
}

.vsa-training-lens-halo,
.vsa-training-lens-core,
.vsa-training-lens-ring,
.vsa-training-lens-axis,
.vsa-training-lens-scan,
.vsa-training-lens-pulse {
  position: absolute;
  inset: 0;
}

.vsa-training-lens-halo {
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 188, 104, 0.14), rgba(233, 188, 104, 0) 72%);
  filter: blur(16px);
}

.vsa-training-lens-core {
  inset: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 240, 210, 0.94), rgba(240, 199, 119, 0.28) 42%, rgba(240, 199, 119, 0) 74%);
  box-shadow:
    0 0 34px rgba(241, 198, 115, 0.24),
    0 0 82px rgba(241, 198, 115, 0.12);
}

.vsa-training-lens-ring {
  border-radius: 50%;
  border: 1px solid rgba(229, 190, 115, 0.28);
}

.vsa-training-lens-ring-a { inset: 12px; animation: vsa-training-spin 18s linear infinite; }
.vsa-training-lens-ring-b { inset: 24px; border-style: dashed; animation: vsa-training-spin-reverse 14s linear infinite; }
.vsa-training-lens-ring-c { inset: 38px; opacity: 0.82; animation: vsa-training-spin 10s linear infinite; }

.vsa-training-lens-axis-h {
  inset: 50% 10px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 200, 123, 0.62), transparent);
}

.vsa-training-lens-axis-v {
  inset: 10px auto 10px 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(238, 200, 123, 0.62), transparent);
}

.vsa-training-lens-scan-a {
  inset: 18px;
  border-radius: 50%;
  border-top: 1px solid rgba(255, 226, 160, 0.62);
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  animation: vsa-training-spin 6s linear infinite;
}

.vsa-training-lens-scan-b {
  inset: 30px;
  border-radius: 50%;
  border-left: 1px solid rgba(255, 197, 116, 0.46);
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  animation: vsa-training-spin-reverse 8s linear infinite;
}

.vsa-training-lens-pulse {
  inset: 24px;
  border-radius: 50%;
  border: 1px solid rgba(241, 198, 115, 0.2);
  animation: vsa-training-pulse 3.6s ease-out infinite;
}

.vsa-training-side-panel {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: 6px;
  padding: 14px 14px 12px;
}

.vsa-training-side-panel::before {
  background:
    linear-gradient(180deg, rgba(232, 192, 113, 0.06), rgba(232, 192, 113, 0) 22%),
    radial-gradient(circle at 100% 0%, rgba(241, 198, 115, 0.06), rgba(241, 198, 115, 0) 26%);
}

.vsa-training-side-copy {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--crate-copy);
}

.vsa-training-side-stat {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid rgba(195, 160, 92, 0.12);
  background: rgba(255, 234, 191, 0.02);
}

.vsa-training-side-stat-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(247, 236, 210, 0.84);
}

.vsa-training-side-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 179, 100, 0.3), rgba(214, 179, 100, 0));
  margin: 2px 0;
}

.vsa-training-side-readout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(191, 156, 82, 0.16);
}

.vsa-training-side-footnote {
  align-self: end;
  font-size: 0.68rem;
  line-height: 1.22;
  color: var(--crate-copy-soft);
}

.vsa-training-station-board {
  grid-column: 1 / 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
}

.vsa-training-station-board::before {
  background:
    linear-gradient(120deg, rgba(230, 189, 107, 0.05), rgba(230, 189, 107, 0) 24%),
    radial-gradient(circle at 88% 100%, rgba(242, 206, 133, 0.04), rgba(242, 206, 133, 0) 28%);
}

.vsa-training-station-board-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
}

.vsa-training-impact-zone {
  --vsa-training-impact-seal-duration: 1650ms;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  min-height: 0;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(17, 13, 10, 0.98), rgba(8, 7, 6, 0.99));
}

.vsa-training-impact-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 240, 211, 0.02), rgba(255, 240, 211, 0)),
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
  z-index: 7;
}

.vsa-training-impact-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-104%);
  background:
    radial-gradient(circle at 14px 14px, rgba(248, 232, 205, 0.3) 0 2px, rgba(94, 80, 64, 0.95) 3px, rgba(28, 24, 21, 0.98) 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 14px) 14px, rgba(248, 232, 205, 0.3) 0 2px, rgba(94, 80, 64, 0.95) 3px, rgba(28, 24, 21, 0.98) 6px, transparent 7px),
    radial-gradient(circle at 14px calc(100% - 14px), rgba(248, 232, 205, 0.3) 0 2px, rgba(94, 80, 64, 0.95) 3px, rgba(28, 24, 21, 0.98) 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), rgba(248, 232, 205, 0.3) 0 2px, rgba(94, 80, 64, 0.95) 3px, rgba(28, 24, 21, 0.98) 6px, transparent 7px),
    linear-gradient(180deg, rgba(255, 245, 224, 0.18), rgba(255, 245, 224, 0) 7%),
    linear-gradient(180deg, rgba(255, 212, 146, 0) 0 86%, rgba(255, 196, 112, 0.08) 91%, rgba(26, 18, 14, 0.65) 93%, rgba(6, 5, 5, 0.98) 100%),
    linear-gradient(180deg, rgba(255, 232, 192, 0.08), rgba(255, 232, 192, 0) 10%),
    linear-gradient(180deg, rgba(26, 22, 19, 0.38), rgba(8, 7, 6, 0.2) 52%, rgba(5, 5, 5, 0.36) 100%),
    url("../../assets/textures/optimized/rustymetal.webp"),
    linear-gradient(180deg, rgba(48, 42, 36, 0.98), rgba(16, 14, 12, 0.995) 52%, rgba(9, 8, 7, 1) 100%);
  background-position: center, center, center, center, center, center, center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, auto, cover, cover, auto, cover, cover, cover;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 214, 0.12),
    inset 0 0 0 1px rgba(112, 92, 70, 0.32),
    inset 0 -14px 28px rgba(0, 0, 0, 0.45),
    0 18px 28px rgba(0, 0, 0, 0.28);
  transition:
    transform var(--vsa-training-impact-seal-duration) cubic-bezier(0.3, 0.12, 0.24, 0.98),
    opacity 120ms ease,
    box-shadow 160ms ease;
}

.vsa-training-impact-zone.is-sealing::after,
.vsa-training-impact-zone.is-sealed::after {
  opacity: 1;
  transform: translateY(0);
}

.vsa-training-impact-zone.is-sealed::after {
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 214, 0.1),
    inset 0 0 0 1px rgba(112, 92, 70, 0.34),
    inset 0 -18px 34px rgba(0, 0, 0, 0.58),
    0 3px 0 rgba(255, 214, 150, 0.06),
    0 24px 36px rgba(0, 0, 0, 0.32);
}

.vsa-training-impact-zone.is-sealing,
.vsa-training-impact-zone.is-sealed {
  pointer-events: auto;
  cursor: default;
  user-select: none;
}

.vsa-training-screen-impact-hit {
  animation: vsa-training-screen-rumble 320ms cubic-bezier(0.18, 0.88, 0.22, 1);
}


.vsa-training-impact-shaft,
.vsa-training-impact-surface,
.vsa-training-impact-zone-core,
.vsa-training-impact-zone-grid,
.vsa-training-impact-zone-cracks,
.vsa-training-impact-breach-overlay,
.vsa-training-impact-shard {
  position: absolute;
  pointer-events: none;
}

.vsa-training-impact-shaft,
.vsa-training-impact-surface,
.vsa-training-impact-zone-core,
.vsa-training-impact-zone-grid {
  inset: 0;
}

.vsa-training-impact-shaft {
  z-index: 0;
  opacity: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(8, 8, 10, 0.98), rgba(0, 0, 0, 1) 72%);
  box-shadow:
    inset 0 18px 34px rgba(255, 255, 255, 0.018),
    inset 0 -38px 54px rgba(0, 0, 0, 0.56);
  transition: opacity 220ms ease;
}

.vsa-training-impact-shaft::before,
.vsa-training-impact-shaft::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vsa-training-impact-shaft::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 248, 232, 0.15), rgba(255, 248, 232, 0.05) 12%, rgba(255, 248, 232, 0) 24%),
    radial-gradient(ellipse at 50% 56%, rgba(82, 82, 88, 0.18), rgba(82, 82, 88, 0.08) 14%, rgba(82, 82, 88, 0.02) 24%, rgba(82, 82, 88, 0) 34%);
  z-index: 0;
}

.vsa-training-impact-shaft::after {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(0, 0, 0, 0) 0 18%, rgba(0, 0, 0, 0.42) 30%, rgba(0, 0, 0, 0.82) 48%, rgba(0, 0, 0, 0.98) 70%, rgba(0, 0, 0, 1) 100%);
  z-index: 0;
}

.vsa-training-impact-secret-button-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: auto;
}

.vsa-training-impact-secret-button {
  --warning-cursor-x: 50%;
  --warning-cursor-y: 50%;
  position: relative;
  width: 174px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: none;
  pointer-events: auto;
  overflow: visible;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 120ms ease,
    filter 160ms ease,
    opacity 120ms ease;
  filter:
    drop-shadow(0 16px 28px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 26px rgba(231, 191, 78, 0.12));
}

.vsa-training-impact-secret-button:focus-visible {
  outline: none;
}

.vsa-training-impact-secret-button:hover {
  filter:
    drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 30px rgba(244, 205, 101, 0.16));
}

.vsa-training-impact-secret-button::after {
  content: "Don't press!";
  position: absolute;
  left: var(--warning-cursor-x);
  top: var(--warning-cursor-y);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 229, 176, 0.96);
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(14px, -18px);
  box-shadow: none;
  text-shadow:
    0 0 10px rgba(255, 214, 133, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.55);
  transition: opacity 120ms ease;
}

.vsa-training-impact-secret-button[data-warning-label="now-press"]::after {
  content: "Now press";
}

.vsa-training-impact-secret-button.is-hovering::after {
  opacity: 1;
}

.vsa-training-impact-secret-button:active {
  transform: translateY(2px) scale(0.984);
}

.vsa-training-impact-secret-button-pulse,
.vsa-training-impact-secret-button-ring,
.vsa-training-impact-secret-button-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.vsa-training-impact-secret-button-pulse {
  background:
    radial-gradient(circle at 50% 50%, rgba(246, 216, 102, 0.34), rgba(246, 216, 102, 0.16) 46%, rgba(246, 216, 102, 0.06) 60%, rgba(246, 216, 102, 0) 74%);
  box-shadow:
    0 0 20px rgba(228, 190, 74, 0.2);
  animation: vsa-training-button-ring-pulse 2.4s ease-in-out infinite;
}

.vsa-training-impact-secret-button-ring {
  inset: 14px;
  background:
    linear-gradient(180deg, #f2d75a, #ba8814);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 178, 0.58),
    0 0 10px rgba(204, 161, 42, 0.18);
}

.vsa-training-impact-secret-button-core {
  inset: 21px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 210, 210, 0.92), rgba(255, 128, 128, 0.88) 14%, rgba(242, 40, 40, 0.98) 48%, rgba(165, 0, 0, 1) 78%, rgba(70, 0, 0, 1) 100%);
  box-shadow:
    inset 0 4px 10px rgba(255, 255, 255, 0.34),
    inset 0 -12px 18px rgba(70, 0, 0, 0.76),
    inset 0 -24px 24px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(106, 8, 8, 0.36);
}

.vsa-training-impact-secret-button-core::before {
  content: "";
  position: absolute;
  inset: 10px 14px 54px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.12) 52%, rgba(255, 255, 255, 0) 82%);
}

.vsa-training-impact-surface {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 26%),
    url("../../assets/textures/optimized/milchglas-surface.webp"),
    linear-gradient(180deg, rgba(174, 177, 182, 0.92), rgba(107, 113, 120, 0.98));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition:
    opacity 180ms ease,
    transform 720ms cubic-bezier(0.2, 0.84, 0.22, 1);
}

.vsa-training-impact-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 247, 227, 0.08), rgba(255, 247, 227, 0)),
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 54%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 62%);
}

.vsa-training-impact-zone-core {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 235, 190, 0.02), rgba(255, 235, 190, 0) 22%);
}

.vsa-training-impact-zone-grid {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(214, 179, 100, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(214, 179, 100, 0.02) 1px, transparent 1px);
  background-size: 62px 62px;
  opacity: 0.08;
}

.vsa-training-impact-breach-overlay {
  inset: 0;
  opacity: 0;
  z-index: 4;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.34) 16%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0) 58%);
  transform: scale(0.88);
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-breach-overlay {
  animation: vsa-training-breach-flash 700ms ease-out both;
}

.vsa-training-impact-zone-cracks {
  --impact-x: 50%;
  --impact-y: 50%;
  --impact-rotation: 0deg;
  --impact-scale: 1;
  position: absolute;
  left: var(--impact-x);
  top: var(--impact-y);
  width: 150%;
  aspect-ratio: 3 / 2;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--impact-rotation)) scale(var(--impact-scale));
  transform-origin: 50% 50%;
  background-image: url("../../assets/textures/optimized/shattered-glas-photo.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: screen;
  z-index: 3;
  filter:
    brightness(1.52)
    contrast(1.14)
    saturate(0.24);
  transition: opacity 180ms ease;
}
.vsa-training-impact-zone-cracks.is-visible {
  opacity: 0.82;
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-zone-cracks.is-visible {
  opacity: 0;
}

.vsa-training-impact-zone-cracks-echo-b.is-visible {
  opacity: 0.82;
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-zone-cracks-echo-b.is-visible {
  opacity: 0;
}

.vsa-training-impact-zone-cracks-echo-c.is-visible {
  opacity: 0.78;
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-zone-cracks-echo-c.is-visible {
  opacity: 0;
}

.vsa-training-impact-zone-cracks-echo-d.is-visible {
  opacity: 0.74;
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-zone-cracks-echo-d.is-visible {
  opacity: 0;
}

.vsa-training-impact-zone-cracks-echo-e.is-visible {
  opacity: 0.7;
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-zone-cracks-echo-e.is-visible {
  opacity: 0;
}

.vsa-training-impact-shard {
  inset: auto;
  z-index: 5;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
    url("../../assets/textures/optimized/milchglas-surface.webp"),
    linear-gradient(180deg, rgba(171, 175, 180, 0.96), rgba(107, 113, 120, 0.98));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(241, 247, 249, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(88, 123, 136, 0.14),
    0 14px 24px rgba(0, 0, 0, 0.18);
  transform-origin: 50% 50%;
}

.vsa-training-impact-shard-a {
  left: -3%;
  top: -4%;
  width: 43%;
  height: 54%;
  clip-path: polygon(0 0, 100% 0, 78% 72%, 52% 96%, 0 82%);
}

.vsa-training-impact-shard-b {
  left: 34%;
  top: -5%;
  width: 34%;
  height: 42%;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 28% 84%, 0 38%);
}

.vsa-training-impact-shard-c {
  left: 64%;
  top: -3%;
  width: 40%;
  height: 58%;
  clip-path: polygon(12% 0, 100% 0, 100% 68%, 72% 100%, 0 76%, 0 24%);
}

.vsa-training-impact-shard-d {
  left: -4%;
  top: 48%;
  width: 37%;
  height: 56%;
  clip-path: polygon(0 18%, 74% 0, 100% 38%, 92% 100%, 0 100%);
}

.vsa-training-impact-shard-e {
  left: 28%;
  top: 42%;
  width: 36%;
  height: 62%;
  clip-path: polygon(8% 0, 100% 12%, 84% 100%, 0 86%, 0 18%);
}

.vsa-training-impact-shard-f {
  left: 58%;
  top: 40%;
  width: 46%;
  height: 63%;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 22% 90%, 0 48%);
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-shaft {
  opacity: 1;
  background: transparent;
  box-shadow: none;
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-shaft::before,
.vsa-training-impact-zone.is-breached .vsa-training-impact-shaft::after {
  opacity: 0;
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-secret-button {
  opacity: 1;
  background: transparent;
  box-shadow: none;
}

.vsa-training-impact-zone.is-sealing .vsa-training-impact-secret-button,
.vsa-training-impact-zone.is-sealed .vsa-training-impact-secret-button,
.vsa-training-impact-zone.is-sealing .vsa-training-impact-secret-button-wrap,
.vsa-training-impact-zone.is-sealed .vsa-training-impact-secret-button-wrap {
  pointer-events: none;
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-surface {
  opacity: 0;
  transform: scale(0.985);
}

.vsa-training-impact-zone.is-breached .vsa-training-impact-zone-core,
.vsa-training-impact-zone.is-breached .vsa-training-impact-zone-grid {
  opacity: 0;
}

.vsa-training-impact-zone.is-targeted {
  border-color: rgba(230, 190, 112, 0.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 184, 0.05),
    inset 0 0 40px rgba(255, 215, 141, 0.03),
    0 0 18px rgba(231, 188, 103, 0.05);
}

.vsa-training-impact-zone.is-targeted .vsa-training-impact-zone-core {
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 235, 190, 0.08), rgba(255, 235, 190, 0) 24%);
}

.vsa-training-impact-zone.is-shattering .vsa-training-impact-shard-a {
  animation: vsa-training-shard-burst-a 920ms ease-out both;
}

.vsa-training-impact-zone.is-shattering .vsa-training-impact-shard-b {
  animation: vsa-training-shard-burst-b 960ms ease-out both;
}

.vsa-training-impact-zone.is-shattering .vsa-training-impact-shard-c {
  animation: vsa-training-shard-burst-c 900ms ease-out both;
}

.vsa-training-impact-zone.is-shattering .vsa-training-impact-shard-d {
  animation: vsa-training-shard-burst-d 940ms ease-out both;
}

.vsa-training-impact-zone.is-shattering .vsa-training-impact-shard-e {
  animation: vsa-training-shard-burst-e 980ms ease-out both;
}

.vsa-training-impact-zone.is-shattering .vsa-training-impact-shard-f {
  animation: vsa-training-shard-burst-f 880ms ease-out both;
}

.vsa-training-station-board-copy {
  max-width: 72ch;
  font-size: 0.76rem;
  line-height: 1.28;
  color: rgba(244, 229, 199, 0.74);
}

.vsa-training-station-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  min-height: 0;
}

.vsa-training-station-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid rgba(192, 157, 88, 0.18);
  background:
    linear-gradient(180deg, rgba(23, 18, 14, 0.98), rgba(12, 10, 9, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 190, 0.04),
    inset 0 0 22px rgba(255, 214, 140, 0.018);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.vsa-training-station-card.is-complete::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 18px;
  height: 34px;
  border-right: 4px solid #7bff95;
  border-bottom: 4px solid #7bff95;
  transform: translateY(-60%) rotate(40deg);
  filter:
    drop-shadow(0 0 10px rgba(123, 255, 149, 0.45))
    drop-shadow(0 0 22px rgba(123, 255, 149, 0.2));
  pointer-events: none;
}

.vsa-training-station-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg, rgba(242, 209, 136, 0.06), rgba(242, 209, 136, 0) 26%),
    radial-gradient(circle at right center, rgba(231, 188, 103, 0.06), rgba(231, 188, 103, 0) 30%);
  pointer-events: none;
}

.vsa-training-station-card:hover {
  transform: translateY(-1px);
  border-color: rgba(225, 186, 108, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 190, 0.06),
    0 14px 26px rgba(0, 0, 0, 0.18),
    0 0 14px rgba(231, 188, 103, 0.05);
}

.vsa-training-station-card-primary {
  background:
    linear-gradient(180deg, rgba(35, 24, 15, 0.98), rgba(14, 10, 8, 0.99));
}

.vsa-training-station-card-alert::before {
  background:
    linear-gradient(140deg, rgba(255, 188, 120, 0.08), rgba(255, 188, 120, 0) 26%),
    radial-gradient(circle at right center, rgba(255, 149, 91, 0.07), rgba(255, 149, 91, 0) 32%);
}

.vsa-training-station-marker {
  display: none;
}

.vsa-training-station-number-wrap {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(208, 171, 96, 0.18);
  background: rgba(255, 233, 188, 0.02);
}

.vsa-training-station-index {
  font-size: 0.74rem;
}

.vsa-training-station-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.vsa-training-station-topline {
  display: grid;
  gap: 2px;
}

.vsa-training-station-title {
  font-size: clamp(0.96rem, 1vw, 1.18rem);
  line-height: 1.04;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.vsa-training-station-title::before,
.vsa-training-station-title::after {
  content: none;
}

.vsa-training-station-mode {
  flex: 0 0 auto;
  white-space: nowrap;
}

.vsa-training-station-copy {
  font-size: 0.72rem;
  line-height: 1.22;
  color: rgba(244, 229, 199, 0.76);
  max-width: 34ch;
}

.vsa-training-lens-core {
  box-shadow:
    0 0 42px rgba(241, 198, 115, 0.28),
    0 0 96px rgba(241, 198, 115, 0.16);
}

.vsa-training-logo {
  opacity: 0.28;
  filter:
    sepia(1)
    saturate(0.9)
    hue-rotate(350deg)
    brightness(1.1)
    drop-shadow(0 0 22px rgba(227, 187, 103, 0.16));
}

.vsa-training-station-marker {
  box-shadow:
    0 0 0 6px rgba(233, 188, 104, 0.09),
    0 0 22px rgba(233, 188, 104, 0.3);
}

@keyframes vsa-training-twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.85); }
  35% { opacity: 0.9; transform: scale(1.15); }
  60% { opacity: 0.42; transform: scale(0.96); }
}

@keyframes vsa-training-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes vsa-training-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes vsa-training-pulse {
  0% { transform: scale(0.88); opacity: 0.45; }
  70% { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

@keyframes vsa-training-logo-pulse {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1.03);
    filter:
      sepia(1)
      saturate(0.72)
      hue-rotate(350deg)
      brightness(1)
      drop-shadow(0 0 18px rgba(227, 187, 103, 0.08));
  }
  50% {
    opacity: 0.26;
    transform: scale(1.09);
    filter:
      sepia(1)
      saturate(0.9)
      hue-rotate(350deg)
      brightness(1.1)
      drop-shadow(0 0 34px rgba(227, 187, 103, 0.18));
  }
}

@keyframes vsa-training-impact-crack {
  0% {
    opacity: 0;
    transform: scale(0.94);
    filter:
      brightness(1)
      contrast(1)
      drop-shadow(0 0 0 rgba(255, 218, 154, 0));
  }
  22% {
    opacity: 1;
    transform: scale(1.015);
    filter:
      brightness(1.16)
      contrast(1.14)
      drop-shadow(0 0 18px rgba(255, 218, 154, 0.24));
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
    filter:
      brightness(1.04)
      contrast(1.08)
      drop-shadow(0 0 10px rgba(255, 218, 154, 0.12));
  }
}

@keyframes vsa-training-impact-crack-echo {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(1.08);
    filter:
      brightness(1)
      contrast(1)
      drop-shadow(0 0 0 rgba(255, 218, 154, 0));
  }
  24% {
    opacity: 0.62;
    transform: rotate(45deg) scale(1.2);
    filter:
      brightness(1.22)
      contrast(1.24)
      drop-shadow(0 0 18px rgba(255, 218, 154, 0.22));
  }
  100% {
    opacity: 0.5;
    transform: rotate(45deg) scale(1.18);
    filter:
      brightness(1.08)
      contrast(1.14)
      drop-shadow(0 0 10px rgba(255, 218, 154, 0.1));
  }
}

@keyframes vsa-training-impact-crack-echo-soft {
  0% {
    opacity: 0;
    transform: rotate(90deg) scale(1.04);
  }
  28% {
    opacity: 0.46;
    transform: rotate(90deg) scale(1.2);
  }
  100% {
    opacity: 0.42;
    transform: rotate(90deg) scale(1.18);
  }
}

@keyframes vsa-training-shard-burst-a {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-120px, -72px, 0) rotate(-16deg) scale(0.98); }
}

@keyframes vsa-training-shard-burst-b {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-30px, -126px, 0) rotate(12deg) scale(0.96); }
}

@keyframes vsa-training-shard-burst-c {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(138px, -74px, 0) rotate(18deg) scale(0.98); }
}

@keyframes vsa-training-shard-burst-d {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-118px, 118px, 0) rotate(-12deg) scale(1.04); }
}

@keyframes vsa-training-shard-burst-e {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(28px, 148px, 0) rotate(14deg) scale(1.02); }
}

@keyframes vsa-training-shard-burst-f {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(132px, 94px, 0) rotate(16deg) scale(1.01); }
}

@keyframes vsa-training-breach-flash {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  22% {
    opacity: 0.94;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes vsa-training-button-ring-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 18px rgba(228, 190, 74, 0.22);
  }
  50% {
    transform: scale(1.028);
    box-shadow:
      0 0 26px rgba(240, 204, 94, 0.32);
  }
}

@keyframes vsa-training-screen-rumble {
  0% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(0, 7px);
  }
  28% {
    transform: translate(0, -3px);
  }
  48% {
    transform: translate(0, 3px);
  }
  68% {
    transform: translate(0, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@media (max-width: 1220px) {
  .vsa-training-screen {
    height: 100svh;
    min-height: 100svh;
    place-items: start center;
    overflow-y: auto;
  }

  .vsa-training-shell {
    height: auto;
    min-height: calc(100svh - 28px);
    overflow: visible;
  }

  .vsa-training-room {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    overflow: visible;
  }

  .vsa-training-hero-panel,
  .vsa-training-side-panel,
  .vsa-training-station-board,
  .vsa-training-impact-zone {
    grid-column: auto;
    grid-row: auto;
  }

  .vsa-training-side-panel {
    grid-template-rows: auto auto auto auto auto auto;
  }

  .vsa-training-impact-zone {
    min-height: 160px;
  }

}

@media (max-width: 920px) {
  .vsa-training-hero-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .vsa-training-visual {
    display: none;
  }

  .vsa-training-station-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vsa-training-station-marker {
    display: none;
  }

  .vsa-training-station-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .vsa-training-screen {
    padding: 10px;
  }

  .vsa-training-shell {
    min-height: calc(100svh - 20px);
    gap: 10px;
    padding: 12px;
  }

  .vsa-training-room {
    gap: 10px;
    padding: 12px;
  }

  .vsa-training-hero-panel,
  .vsa-training-side-panel,
  .vsa-training-station-board {
    padding: 14px;
  }

  .vsa-training-station-card {
    padding: 12px 14px;
  }

  .vsa-training-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .vsa-training-intro-copy,
  .vsa-training-side-copy,
  .vsa-training-side-footnote,
  .vsa-training-station-board-copy,
  .vsa-training-station-copy,
  .vsa-training-side-stat-value {
    font-size: 0.82rem;
  }

  .vsa-training-station-topline {
    display: grid;
    gap: 3px;
  }

  .vsa-training-station-mode {
    white-space: normal;
  }
}

@media (max-height: 760px) and (min-width: 1221px) {
  .vsa-training-screen {
    height: 100svh;
    min-height: 100svh;
    place-items: start center;
    overflow-y: auto;
  }

  .vsa-training-shell {
    height: auto;
    min-height: calc(100svh - 28px);
    overflow: visible;
  }

  .vsa-training-room {
    min-height: 720px;
  }
}