.roa-aim-trainer-page {
  --roa-trainer-bg: #03040a;
  --roa-trainer-panel: #10131f;
  --roa-trainer-panel-2: #171b2a;
  --roa-trainer-line: rgba(248, 250, 252, .16);
  --roa-trainer-text: #f8fafc;
  --roa-trainer-muted: #a7b0c3;
  --roa-trainer-red: #ff1744;
  --roa-trainer-green: #22c55e;
  --roa-trainer-blue: #38bdf8;
  --roa-trainer-yellow: #facc15;
  background: #03040a;
  color: var(--roa-trainer-text);
}

.roa-aim-trainer-page .roa-game-center-hero.roa-aim-trainer-hero {
  min-height: min(680px, 74vh);
  background:
    linear-gradient(180deg, rgba(3, 4, 10, .22), rgba(3, 4, 10, .94)),
    radial-gradient(circle at 50% 50%, rgba(255, 23, 68, .28), transparent 10rem),
    radial-gradient(circle at 16% 22%, rgba(56, 189, 248, .22), transparent 18rem),
    radial-gradient(circle at 80% 20%, rgba(34, 197, 94, .16), transparent 18rem),
    #03040a;
  border-bottom-color: rgba(255, 255, 255, .18);
}

.roa-aim-trainer-page .roa-game-center-hero.roa-aim-trainer-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .36;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(255, 23, 68, .62) 0 1px, transparent 1.5px) 18px 28px / 92px 92px;
}

.roa-aim-trainer-page .roa-game-center-hero h1,
.roa-aim-trainer-page .roa-game-center-hero p,
.roa-aim-trainer-page .roa-game-center-season-card,
.roa-aim-trainer-page .roa-kicker,
.roa-aim-trainer-page .roa-section-head h2,
.roa-aim-trainer-page .roa-section-head p {
  color: var(--roa-trainer-text);
}

.roa-aim-trainer-page .roa-game-center-hero h1 {
  text-shadow: 0 0 28px rgba(255, 23, 68, .72), 5px 5px 0 rgba(0, 0, 0, .88);
}

.roa-aim-trainer-page .roa-game-center-season-card,
.roa-aim-trainer-page .roa-game-center-card,
.roa-aim-trainer-page .roa-game-center-score-card {
  border-color: var(--roa-trainer-line);
  background: rgba(16, 19, 31, .92);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .36);
  color: var(--roa-trainer-text);
}

.roa-aim-trainer-overview,
.roa-aim-trainer-play-section,
.roa-aim-trainer-highscores,
.roa-aim-trainer-rules {
  background:
    radial-gradient(circle at 16% 20%, rgba(56, 189, 248, .10), transparent 28rem),
    radial-gradient(circle at 86% 16%, rgba(255, 23, 68, .12), transparent 28rem),
    #03040a;
}

.roa-aim-trainer-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

.roa-aim-trainer-overview h2,
.roa-aim-trainer-play-section h2 {
  margin: 0 0 12px;
  color: var(--roa-trainer-text);
  font-family: var(--roa-typography-heading-font, Montserrat, Arial, sans-serif);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.roa-aim-trainer-overview p,
.roa-aim-trainer-play-section p {
  color: var(--roa-trainer-muted);
}

.roa-aim-trainer-mode-strip,
.roa-aim-trainer-mini-rules {
  display: grid;
  gap: 10px;
}

.roa-aim-trainer-mode-strip span,
.roa-aim-trainer-mini-rules span {
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 1px solid var(--roa-trainer-line);
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .06);
  color: var(--roa-trainer-text);
  font-weight: 900;
  text-transform: uppercase;
}

.roa-aim-trainer-shell {
  width: min(1480px, calc(100% - 32px));
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.roa-aim-trainer-menu,
.roa-aim-trainer-stage,
.roa-aim-trainer-result {
  border: 1px solid var(--roa-trainer-line);
  border-radius: 8px;
  background: rgba(16, 19, 31, .94);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .42);
}

.roa-aim-trainer-menu {
  max-height: min(860px, calc(100vh - 110px));
  overflow: auto;
  padding: 18px;
}

.roa-aim-trainer-menu h2 {
  margin: 4px 0 16px;
  color: var(--roa-trainer-text);
  font-size: 1.55rem;
}

.roa-aim-trainer-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.roa-aim-trainer-mode-grid button {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--roa-trainer-line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, .05);
  color: var(--roa-trainer-text);
  text-align: left;
  cursor: pointer;
}

.roa-aim-trainer-mode-grid button.is-active {
  border-color: rgba(255, 23, 68, .88);
  background: rgba(255, 23, 68, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 23, 68, .42);
}

.roa-aim-trainer-mode-grid span,
.roa-aim-trainer-mode-grid small {
  min-width: 0;
}

.roa-aim-trainer-mode-grid span {
  font-weight: 950;
}

.roa-aim-trainer-mode-grid small {
  color: var(--roa-trainer-muted);
}

.roa-aim-trainer-start-form,
.roa-aim-trainer-settings,
.roa-aim-trainer-crosshair {
  border-top: 1px solid var(--roa-trainer-line);
  padding-top: 14px;
  margin-top: 14px;
}

.roa-aim-trainer-start-form label,
.roa-aim-trainer-settings label,
.roa-aim-trainer-crosshair label {
  display: grid;
  gap: 6px;
  color: var(--roa-trainer-muted);
  font-size: .88rem;
  font-weight: 800;
}

.roa-aim-trainer-start-form input[type="text"],
.roa-aim-trainer-import textarea {
  width: 100%;
  border: 1px solid var(--roa-trainer-line);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .35);
  color: var(--roa-trainer-text);
}

.roa-aim-trainer-consent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.roa-aim-trainer-consent label,
.roa-aim-trainer-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.roa-aim-trainer-settings summary,
.roa-aim-trainer-crosshair summary {
  color: var(--roa-trainer-text);
  cursor: pointer;
  font-weight: 950;
  text-transform: uppercase;
}

.roa-aim-trainer-settings label {
  grid-template-columns: minmax(90px, 1fr) minmax(120px, 1.2fr) 48px;
  align-items: center;
  margin-top: 10px;
}

.roa-aim-trainer-settings input[type="range"],
.roa-aim-trainer-crosshair input[type="range"] {
  accent-color: var(--roa-trainer-red);
}

.roa-aim-trainer-crosshair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.roa-aim-trainer-crosshair-grid label {
  min-width: 0;
}

.roa-aim-trainer-import {
  margin-top: 12px;
}

.roa-aim-trainer-stage {
  min-width: 0;
  overflow: hidden;
}

.roa-aim-trainer-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 440px;
  background: #000;
}

.roa-aim-trainer-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.roa-aim-trainer-hud {
  position: absolute;
  inset: 14px 14px auto 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  pointer-events: none;
}

.roa-aim-trainer-hud article {
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, .46);
  color: var(--roa-trainer-text);
}

.roa-aim-trainer-hud span {
  display: block;
  color: var(--roa-trainer-muted);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.roa-aim-trainer-hud strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--roa-trainer-text);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  line-height: 1;
  white-space: nowrap;
}

.roa-aim-trainer-help {
  position: absolute;
  inset: 50%;
  width: min(360px, calc(100% - 36px));
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: 18px;
  background: rgba(0, 0, 0, .68);
  color: var(--roa-trainer-text);
  text-align: center;
}

.roa-aim-trainer-help span,
.roa-aim-trainer-help p {
  color: var(--roa-trainer-muted);
}

.roa-aim-trainer-help strong {
  display: block;
  margin: 4px 0;
  font-size: 1.3rem;
}

.roa-aim-trainer-audio {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-width: 54px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: rgba(0, 0, 0, .62);
  color: var(--roa-trainer-text);
  font-weight: 950;
  cursor: pointer;
}

.roa-aim-trainer-audio.is-muted {
  opacity: .52;
}

.roa-aim-trainer-result {
  grid-column: 1 / -1;
  padding: 18px;
}

.roa-aim-trainer-result[hidden] {
  display: none;
}

.roa-aim-trainer-result h2 {
  margin: 4px 0 14px;
  color: var(--roa-trainer-text);
}

.roa-aim-trainer-page .roa-aim-button,
.roa-aim-trainer-page .roa-aim-trainer-start {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 23, 68, .82);
  border-radius: 8px;
  background: var(--roa-trainer-red);
  color: #fff;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}

.roa-aim-trainer-page .roa-aim-button.is-secondary {
  margin-top: 10px;
  border-color: var(--roa-trainer-line);
  background: rgba(255, 255, 255, .08);
}

.roa-aim-trainer-page .roa-aim-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.roa-aim-trainer-page .roa-aim-form-message {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--roa-trainer-yellow);
  font-size: .86rem;
  font-weight: 800;
}

.roa-aim-trainer-page .roa-game-center-score-list li {
  border-color: rgba(255, 255, 255, .12);
}

.roa-aim-trainer-play-section {
  --roa-trainer-screen-bg:
    radial-gradient(circle at 12% 18%, rgba(255, 23, 68, .28), transparent 18rem),
    radial-gradient(circle at 88% 14%, rgba(34, 197, 94, .18), transparent 20rem),
    linear-gradient(135deg, rgba(9, 18, 31, .94), rgba(4, 8, 16, .92));
}

.roa-aim-trainer-shell {
  position: relative;
  width: min(1280px, calc(100% - 32px));
  display: block;
}

.roa-aim-trainer-stage {
  width: 100%;
}

.roa-aim-trainer-canvas-wrap {
  min-height: auto;
  isolation: isolate;
}

.roa-aim-trainer-menu,
.roa-aim-trainer-result {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: auto;
  padding: clamp(18px, 3.4vw, 42px);
  background: var(--roa-trainer-screen-bg);
  backdrop-filter: blur(10px);
}

.roa-aim-trainer-menu {
  max-height: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  grid-auto-flow: row;
  gap: clamp(12px, 1.8vw, 20px);
  align-content: start;
}

.roa-aim-trainer-menu > .roa-kicker,
.roa-aim-trainer-menu > h2,
.roa-aim-trainer-start-brief,
.roa-aim-trainer-mode-grid {
  grid-column: 1 / 2;
}

.roa-aim-trainer-start-form,
.roa-aim-trainer-settings,
.roa-aim-trainer-crosshair {
  grid-column: 2 / 3;
}

.roa-aim-trainer-menu h2 {
  margin: 0;
  font-size: clamp(2.1rem, 5.2vw, 5.2rem);
  letter-spacing: 0;
  line-height: .92;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .62);
}

.roa-aim-trainer-start-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.roa-aim-trainer-start-brief article,
.roa-aim-trainer-start-form,
.roa-aim-trainer-settings,
.roa-aim-trainer-crosshair,
.roa-aim-trainer-result .roa-aim-end-summary article,
.roa-aim-trainer-result .roa-aim-result-stats article,
.roa-aim-trainer-result-details article {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 31, 46, .78), rgba(8, 12, 24, .74));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 14px 34px rgba(0, 0, 0, .22);
}

.roa-aim-trainer-start-brief article {
  min-height: 142px;
  padding: 14px;
}

.roa-aim-trainer-start-brief svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #ff1744;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.roa-aim-trainer-start-brief strong {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: .95rem;
  text-transform: uppercase;
}

.roa-aim-trainer-start-brief p {
  margin: 6px 0 0;
  color: rgba(248, 250, 252, .78);
  font-size: .82rem;
  line-height: 1.35;
}

.roa-aim-trainer-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.roa-aim-trainer-mode-grid button {
  min-height: 88px;
  background: rgba(255, 255, 255, .07);
}

.roa-aim-trainer-mode-grid button.is-challenge {
  grid-column: span 2;
  border-color: rgba(255, 193, 7, .86);
  background:
    linear-gradient(135deg, rgba(255, 193, 7, .20), rgba(255, 23, 68, .18)),
    rgba(255, 255, 255, .06);
}

.roa-aim-trainer-start-form,
.roa-aim-trainer-settings,
.roa-aim-trainer-crosshair {
  border-top: 0;
  margin-top: 0;
  padding: 14px;
}

.roa-aim-trainer-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}

.roa-aim-trainer-presets button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}

.roa-aim-trainer-presets button:hover,
.roa-aim-trainer-presets button:focus-visible {
  border-color: rgba(255, 23, 68, .78);
  background: rgba(255, 23, 68, .20);
}

.roa-aim-trainer-hud {
  inset: 14px auto auto 14px;
  width: min(680px, calc(100% - 116px));
  grid-template-columns: 1.2fr 1fr .8fr .9fr;
}

.roa-aim-trainer-audio,
.roa-aim-trainer-fullscreen,
.roa-aim-trainer-stop {
  position: absolute;
  z-index: 12;
}

.roa-aim-trainer-fullscreen {
  right: 82px;
  bottom: 16px;
  min-width: 66px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.roa-aim-trainer-stop {
  left: 16px;
  bottom: 16px;
  display: none;
  min-height: 40px;
  border: 1px solid rgba(255, 23, 68, .72);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255, 23, 68, .76);
  color: #fff;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}

.roa-aim-trainer-shell.is-running .roa-aim-trainer-menu {
  display: none;
}

.roa-aim-trainer-shell.is-running:not(.is-ranked) .roa-aim-trainer-stop {
  display: block;
}

.roa-aim-trainer-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(12px, 1.8vw, 22px);
  align-content: center;
}

.roa-aim-trainer-result[hidden] {
  display: none !important;
}

.roa-aim-trainer-result > .roa-kicker,
.roa-aim-trainer-result > h2,
.roa-aim-trainer-result-status,
.roa-aim-trainer-result-tip,
.roa-aim-end-summary,
.roa-aim-result-stats,
.roa-aim-trainer-result-details,
.roa-aim-form-actions,
.roa-aim-form-message {
  grid-column: 1 / 2;
}

.roa-aim-end-leaderboard {
  grid-column: 2 / 3;
  grid-row: 1 / span 7;
  align-self: stretch;
}

.roa-aim-trainer-result h2 {
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 5rem);
  line-height: .92;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .62);
}

.roa-aim-trainer-result-status {
  display: block;
  color: #fff;
  font-size: clamp(1.2rem, 2.6vw, 2.15rem);
  text-transform: uppercase;
}

.roa-aim-trainer-result-tip {
  max-width: 760px;
  color: rgba(248, 250, 252, .78);
  font-weight: 800;
}

.roa-aim-trainer-result-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.roa-aim-trainer-result-details article {
  padding: 10px;
}

.roa-aim-trainer-result-details span {
  display: block;
  color: var(--roa-trainer-muted);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.roa-aim-trainer-result-details strong {
  color: #fff;
  font-size: 1.15rem;
}

.roa-aim-trainer-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  background: #03040a;
}

.roa-aim-trainer-shell.is-fullscreen .roa-aim-trainer-stage,
.roa-aim-trainer-shell.is-fullscreen .roa-aim-trainer-canvas-wrap {
  width: 100%;
  height: 100%;
}

.roa-aim-trainer-shell.is-fullscreen .roa-aim-trainer-canvas-wrap {
  aspect-ratio: auto;
}

@media (max-width: 980px) {
  .roa-aim-trainer-overview-grid {
    grid-template-columns: 1fr;
  }

  .roa-aim-trainer-menu,
  .roa-aim-trainer-result {
    grid-template-columns: 1fr;
  }

  .roa-aim-trainer-menu > *,
  .roa-aim-trainer-result > *,
  .roa-aim-end-leaderboard {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .roa-aim-trainer-start-brief,
  .roa-aim-trainer-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .roa-aim-trainer-shell {
    width: min(100% - 20px, 1480px);
  }

  .roa-aim-trainer-start-brief,
  .roa-aim-trainer-mode-grid,
  .roa-aim-trainer-crosshair-grid,
  .roa-aim-trainer-consent,
  .roa-aim-trainer-result-details {
    grid-template-columns: 1fr;
  }

  .roa-aim-trainer-settings label {
    grid-template-columns: 1fr;
  }

  .roa-aim-trainer-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 28px);
    inset: 12px 14px auto 14px;
  }
}

/* Final Aim Trainer shell: full game surface, screens as overlays. */
.roa-aim-trainer-shell {
  position: relative;
  grid-template-columns: 1fr;
  width: min(1280px, calc(100% - 32px));
  aspect-ratio: 16 / 9;
  min-height: 560px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  overflow: hidden;
  background: #03040a;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .52);
}

.roa-aim-trainer-stage {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: #03040a;
}

.roa-aim-trainer-canvas-wrap,
.roa-aim-trainer-canvas {
  width: 100%;
  height: 100%;
}

.roa-aim-trainer-canvas {
  display: block;
  cursor: crosshair;
}

.roa-aim-trainer-menu,
.roa-aim-trainer-result {
  position: absolute;
  inset: 0;
  z-index: 30;
  grid-template-columns: 1fr;
  align-content: stretch;
  padding: clamp(20px, 4vw, 48px);
  background:
    linear-gradient(120deg, rgba(6, 10, 18, .96), rgba(9, 22, 26, .9)),
    radial-gradient(circle at 14% 18%, rgba(255, 23, 68, .28), transparent 24rem),
    radial-gradient(circle at 78% 22%, rgba(34, 197, 94, .20), transparent 22rem),
    #03040a;
  backdrop-filter: blur(12px);
}

.roa-aim-trainer-menu[hidden],
.roa-aim-trainer-result[hidden],
.roa-aim-trainer-screen[hidden] {
  display: none !important;
}

.roa-aim-trainer-screen {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  align-content: start;
}

.roa-aim-trainer-screen > .roa-kicker,
.roa-aim-trainer-result > .roa-kicker {
  width: fit-content;
  border: 1px solid rgba(255, 193, 7, .72);
  border-radius: 8px;
  padding: 6px 12px;
  background: #ffb703;
  color: #062019;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .55);
}

.roa-aim-trainer-screen h2,
.roa-aim-trainer-result h2 {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font-family: var(--roa-typography-heading-font, Montserrat, Arial, sans-serif);
  font-size: clamp(2.25rem, 6vw, 5.25rem);
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .66);
}

.roa-aim-trainer-screen-copy {
  max-width: 860px;
  margin: 0;
  color: rgba(248, 250, 252, .84);
  font-size: clamp(.95rem, 1.5vw, 1.16rem);
  font-weight: 800;
  line-height: 1.45;
}

.roa-aim-trainer-main-actions,
.roa-aim-trainer-choice-grid,
.roa-aim-trainer-difficulty-grid,
.roa-aim-trainer-challenge-brief {
  display: grid;
  gap: 10px;
}

.roa-aim-trainer-main-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
}

.roa-aim-trainer-main-actions.is-pause {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
  margin-top: 0;
}

.roa-aim-trainer-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}

.roa-aim-trainer-difficulty-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roa-aim-trainer-challenge-brief {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roa-aim-trainer-main-actions button,
.roa-aim-trainer-choice-grid button,
.roa-aim-trainer-difficulty-grid button,
.roa-aim-trainer-challenge-brief article {
  min-height: 96px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(22, 31, 46, .84), rgba(7, 11, 20, .78));
  color: #fff;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 14px 34px rgba(0, 0, 0, .26);
}

.roa-aim-trainer-main-actions button,
.roa-aim-trainer-choice-grid button,
.roa-aim-trainer-difficulty-grid button {
  cursor: pointer;
}

.roa-aim-trainer-main-actions button:hover,
.roa-aim-trainer-main-actions button:focus-visible,
.roa-aim-trainer-choice-grid button:hover,
.roa-aim-trainer-choice-grid button:focus-visible,
.roa-aim-trainer-difficulty-grid button:hover,
.roa-aim-trainer-difficulty-grid button:focus-visible,
.roa-aim-trainer-choice-grid button.is-active,
.roa-aim-trainer-difficulty-grid button.is-active {
  border-color: rgba(255, 23, 68, .94);
  background:
    linear-gradient(135deg, rgba(255, 23, 68, .24), rgba(56, 189, 248, .12)),
    rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 2px rgba(255, 23, 68, .45), 0 16px 38px rgba(255, 23, 68, .15);
}

.roa-aim-trainer-main-actions span,
.roa-aim-trainer-choice-grid strong,
.roa-aim-trainer-difficulty-grid strong,
.roa-aim-trainer-challenge-brief strong {
  display: block;
  color: #fff;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 950;
  text-transform: uppercase;
}

.roa-aim-trainer-main-actions small,
.roa-aim-trainer-choice-grid small,
.roa-aim-trainer-difficulty-grid small,
.roa-aim-trainer-challenge-brief span {
  display: block;
  margin-top: 6px;
  color: rgba(248, 250, 252, .72);
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.35;
}

.roa-aim-trainer-training-setup {
  display: grid;
  gap: 16px;
}

.roa-aim-trainer-training-setup h3 {
  margin: 0 0 8px;
  color: rgba(248, 250, 252, .84);
  font-size: .86rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roa-aim-trainer-start-form,
.roa-aim-trainer-settings,
.roa-aim-trainer-crosshair {
  max-width: 640px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(22, 31, 46, .82), rgba(7, 11, 20, .78));
}

.roa-aim-button {
  min-height: 46px;
  border: 1px solid rgba(255, 23, 68, .88);
  border-radius: 8px;
  padding: 0 18px;
  background: #ff1744;
  color: #fff;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .52);
}

.roa-aim-button.is-secondary,
.roa-aim-form-actions a {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.roa-aim-trainer-hud {
  position: absolute;
  inset: 14px auto auto 14px;
  z-index: 12;
  width: min(640px, calc(100% - 112px));
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(88px, .72fr));
  gap: 8px;
  pointer-events: none;
}

.roa-aim-trainer-hud article {
  min-height: 62px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(5, 8, 15, .76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 28px rgba(0, 0, 0, .24);
}

.roa-aim-trainer-hud article.is-main {
  grid-row: span 2;
  min-height: 132px;
  background:
    linear-gradient(135deg, rgba(255, 23, 68, .20), rgba(34, 197, 94, .10)),
    rgba(5, 8, 15, .82);
}

.roa-aim-trainer-hud span,
.roa-aim-trainer-hud small {
  display: block;
  color: rgba(248, 250, 252, .72);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.roa-aim-trainer-hud strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-family: var(--roa-typography-heading-font, Montserrat, Arial, sans-serif);
  font-size: clamp(1rem, 2.1vw, 1.78rem);
  line-height: 1.03;
}

.roa-aim-trainer-hud article.is-main strong {
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: .9;
}

.roa-aim-trainer-shortcuts {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.roa-aim-trainer-shortcuts span {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  padding: 6px 10px;
  background: rgba(5, 8, 15, .72);
  color: rgba(248, 250, 252, .76);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.roa-aim-trainer-help {
  z-index: 10;
}

.roa-aim-trainer-shell.is-running:not(.is-menu-open) .roa-aim-trainer-menu {
  display: none !important;
}

.roa-aim-trainer-shell.is-menu-open .roa-aim-trainer-menu {
  display: grid !important;
}

.roa-aim-trainer-stop,
.roa-aim-trainer-shell:not(.is-running) .roa-aim-trainer-stop {
  display: none !important;
}

.roa-aim-trainer-shell.is-fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  aspect-ratio: auto;
}

.roa-aim-trainer-shell.is-fullscreen .roa-aim-trainer-menu,
.roa-aim-trainer-shell.is-fullscreen .roa-aim-trainer-result {
  padding: clamp(24px, 4vw, 62px);
}

@media (max-width: 900px) {
  .roa-aim-trainer-shell {
    width: min(100% - 20px, 1280px);
    min-height: 620px;
    aspect-ratio: auto;
  }

  .roa-aim-trainer-main-actions,
  .roa-aim-trainer-main-actions.is-pause,
  .roa-aim-trainer-choice-grid,
  .roa-aim-trainer-difficulty-grid,
  .roa-aim-trainer-challenge-brief {
    grid-template-columns: 1fr;
  }

  .roa-aim-trainer-hud {
    width: calc(100% - 28px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .roa-aim-trainer-shell {
    min-height: 680px;
  }

  .roa-aim-trainer-menu,
  .roa-aim-trainer-result {
    padding: 16px;
  }

  .roa-aim-trainer-hud {
    gap: 6px;
  }

  .roa-aim-trainer-hud article {
    min-height: 54px;
    padding: 7px 8px;
  }

  .roa-aim-trainer-hud article.is-main {
    min-height: 112px;
  }

  .roa-aim-trainer-shortcuts {
    width: calc(100% - 24px);
    justify-content: center;
  }
}

.roa-aim-trainer-sens-import {
  display: grid;
  gap: 9px;
  margin: 14px 0;
  border-top: 1px solid var(--roa-trainer-line);
  padding-top: 14px;
}

.roa-aim-trainer-sens-import strong {
  color: var(--roa-trainer-text);
  font-family: var(--roa-typography-heading-font, Montserrat, Arial, sans-serif);
  font-size: .98rem;
}

.roa-aim-trainer-sens-import p {
  margin: 0;
  color: var(--roa-trainer-muted);
  font-size: .8rem;
  line-height: 1.45;
}

.roa-aim-trainer-sens-import code {
  display: inline-block;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 2px 5px;
  background: rgba(0, 0, 0, .24);
  color: #e2e8f0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.roa-aim-trainer-sens-import input[type="file"] {
  width: 100%;
  border: 1px dashed var(--roa-trainer-line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, .28);
  color: var(--roa-trainer-text);
}
