/* ============================================================
   SquashRT Curriculum overlays (isolated to game-v4_1.php)
   ============================================================ */
:root {
  --cur-accent: #2f6bff;
  --cur-ok: #1f9d57;
  --cur-no: #e0322f;
}

/* Shared overlay (panel / brief) */
/* #srt-cur-panel now reuses the game's .movement-ui-panel modal design (style-v4.css) — no overlay here. */
#srt-cur-brief {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 18px; background: rgba(12, 18, 30, .55);
}
#srt-cur-brief.show { display: flex; }
/* keep the curriculum lesson modal above the canvas, like the game panels */
#srt-cur-panel { z-index: 1200; }

/* Lesson-select modal: match the previous version exactly — the GOAL card is red-highlighted, the TIP card
   keeps the neutral .adj-start-card colour. (Mirrors style-v4.css #movement-start-goal-card vs. the plain tip.) */
.movement-start-panel.adj-start-preview #srt-cur-goal-card {
  border-color: rgba(217, 48, 37, 0.6);
  background: rgba(217, 48, 37, 0.15);
}
.movement-start-panel.adj-start-preview #srt-cur-goal-card .adj-start-card-icon {
  background: rgba(217, 48, 37, 0.25);
}

/* v4_1 only: the curriculum replaces the engine's legacy level system. Hide its leftover controls —
   the Level Up / Level Down / Select Level fail-panel buttons and the 1–25 Start-Level dropdown. The
   engine still wires them (kept in the DOM to avoid null refs), they're just never shown here. */
#movement-fail-panel #movement-level-down-button,
#movement-fail-panel #movement-level-up-button,
#movement-fail-panel #movement-level-select-button,
#movement-start-panel label[for="movement-start-level"],
#movement-start-panel #movement-start-level { display: none !important; }

.srt-cur-card {
  width: min(440px, 96vw); max-height: 88vh; overflow: auto;
  background: #fff; color: #1b2536; border-radius: 18px;
  box-shadow: 0 18px 60px rgba(10, 20, 45, .35); padding: 20px;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

.srt-cur-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.srt-cur-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #8a93a3; }
.srt-cur-title { margin: 2px 0 0; font-size: 22px; color: #15233b; }
.srt-cur-sub { margin: 8px 0 14px; font-size: 13px; color: #5b6678; }
.srt-cur-x { width: 34px; height: 34px; border: 1px solid #e4e8ef; border-radius: 10px; background: #f6f8fb; color: #5b6678; font-size: 20px; line-height: 1; cursor: pointer; }

/* Lesson list */
.srt-cur-list { display: flex; flex-direction: column; gap: 6px; }
.srt-cur-tier { margin: 12px 2px 2px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #2f6bff; }
.srt-cur-tier:first-child { margin-top: 0; }
.srt-cur-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border: 1px solid #e4e8ef; border-radius: 12px; background: #fff; cursor: pointer;
}
.srt-cur-row:hover:not(:disabled) { border-color: #c9d4ea; background: #f6f8fb; }
.srt-cur-row-st { width: 22px; text-align: center; font-size: 15px; flex: 0 0 auto; }
.srt-cur-row-main { display: flex; flex-direction: column; min-width: 0; }
.srt-cur-row-main b { font-size: 14px; color: #15233b; }
.srt-cur-row-main em { font-style: normal; font-size: 11.5px; color: #8a93a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srt-cur-row.is-passed { border-color: rgba(31, 157, 87, .4); background: #f1fbf5; }
.srt-cur-row.is-passed .srt-cur-row-st { color: var(--cur-ok); }
.srt-cur-row.is-locked { opacity: .5; cursor: default; }

.srt-cur-brief-btn { margin-top: 14px; width: 100%; padding: 10px; border: 1px solid #e4e8ef; border-radius: 12px; background: #f6f8fb; color: #5b6678; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Coach brief */
.srt-cur-brief-card { width: min(400px, 96vw); text-align: center; }
.srt-cur-brief-main { margin: 12px 0; font-size: 15px; line-height: 1.5; color: #1b2536; }
.srt-cur-brief-icons { display: flex; justify-content: center; gap: 26px; margin: 16px 0; }
.srt-cur-brief-icons span { font-size: 12px; color: #5b6678; line-height: 1.7; }
.srt-cur-brief-icons b { font-size: 15px; color: #15233b; }
.srt-cur-brief-common { margin: 6px 0 18px; font-size: 12.5px; color: #8a93a3; }
.srt-cur-go { width: 100%; padding: 13px; border: 0; border-radius: 12px; background: var(--cur-accent); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
.srt-cur-go:hover { filter: brightness(1.05); }
.srt-cur-ghost { width: 100%; padding: 12px; border: 1px solid #e4e8ef; border-radius: 12px; background: #fff; color: #5b6678; font-size: 14px; font-weight: 700; cursor: pointer; }

/* In-play progress chip */
#srt-cur-chip {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: 10px; z-index: 1150; display: none; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(19, 26, 41, .92); color: #fff; box-shadow: 0 6px 20px rgba(10, 20, 45, .3);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
#srt-cur-chip.show { display: flex; }
.srt-cur-chip-name { font-size: 13px; font-weight: 800; }
.srt-cur-chip-reps { font-size: 12px; color: #aeb8c9; }
.srt-cur-chip-btn { padding: 5px 11px; border: 0; border-radius: 999px; background: var(--cur-accent); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Persistent launcher */
#srt-cur-fab {
  position: fixed; right: 14px; bottom: 14px; z-index: 1150; display: none;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  background: var(--cur-accent); color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(20, 40, 90, .35);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
#srt-cur-fab.show { display: inline-block; }

/* Result toast */
#srt-cur-result { position: fixed; inset: 0; z-index: 1250; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(12, 18, 30, .55); }
#srt-cur-result.show { display: flex; }
.srt-cur-result-card { width: min(360px, 94vw); text-align: center; }
.srt-cur-result-icon { font-size: 46px; }
.srt-cur-result-sub { margin: 6px 0 16px; font-size: 13px; color: #5b6678; }
.srt-cur-result-actions { display: flex; flex-direction: column; gap: 8px; }
#srt-cur-result.ok .srt-cur-title { color: var(--cur-ok); }
#srt-cur-result.no .srt-cur-title { color: var(--cur-no); }

/* ---- Default training (training-default.js) ---- */
/* Scenario card text uses \n line breaks (shot mix / level options). */
#srt-cur-goal-card .adj-start-card-text { white-space: pre-line; }

/* Fail-panel goal card (#srt-td-fail-goal, injected by training-default.js):
   the engine card styles are scoped to .movement-start-panel.adj-start-preview,
   so mirror them here for the fail panel (style-v4.css:1351-1399). */
.movement-fail-panel #srt-td-fail-goal {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(217, 48, 37, 0.6);
  border-radius: 0.9rem;
  background: rgba(217, 48, 37, 0.15);
  padding: 1.1rem 1.2rem;
  margin-bottom: 0.75rem;
}
.movement-fail-panel #srt-td-fail-goal .adj-start-card-icon {
  width: 2.8rem;
  height: 2.8rem;
  min-width: 2.8rem;
  border-radius: 999px;
  background: rgba(217, 48, 37, 0.25);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.movement-fail-panel #srt-td-fail-goal .adj-start-card-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: #f4bb44;
  line-height: 1.1;
  margin-bottom: 0.2rem;
}
.movement-fail-panel #srt-td-fail-goal .adj-start-card-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.93);
  font-size: 0.8rem;
  line-height: 1.3;
  white-space: pre-line; /* shared goal copy uses \n between goal and session lines */
  text-align: left;
}

/* Level-up modal title ("Level 1 통과!"): breathing room above and below —
   the engine zeroes the margin (style-v4.css:1442) and the text block under it
   is hidden in default training, so the title sat flush against the records. */
.movement-level-overlay.adj-level-preview #movement-level-overlay-title {
  margin: 0.9rem 0 1.1rem;
}

/* All-Levels-Clear modal (training-default.js adds .srt-td-allclear):
   1) breathing room above the LEVEL UP badge and below the buttons —
      the base .movement-ui-panel padding (16px) sits too tight here;
   2) only "Go to Match" is the red CTA. The engine forces the Continue
      button red with !important (style-v4.css:1561), but in the all-clear
      layout that button reads "Level List" — neutralize it to the same
      dark style as "Back to Index". */
.movement-level-overlay.adj-level-preview.srt-td-allclear {
  padding-top: 30px;
  padding-bottom: 30px;
}
.movement-level-overlay.adj-level-preview.srt-td-allclear #movement-level-overlay-button {
  background: #2a3245 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

/* ---- Mobile modal fit ----
   The training panels (#movement-fail-panel, #movement-level-overlay and the injected
   pause/level-select panel) are .movement-ui-panel — absolutely centered inside
   #game-root, which has overflow:hidden, so anything taller than the root was clipped
   top and bottom with no way to scroll. Cap their height and let the panel scroll. */
.movement-ui-panel {
  max-height: calc(100% - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* On mobile #game-root spans the viewport, but its top 50px / bottom 70px sit under
     the fixed header / control bars (style.css mobile padding). Keep the modal inside
     the visible band: shift the centre up 10px (half the 50/70 asymmetry) and reserve
     the bar heights + breathing room in the height cap. */
  .movement-ui-panel {
    /* % resolves against iOS's LARGE layout viewport (browser bars hidden), so a %-based
       cap can exceed the actually-visible height and never engage — use dvh (the real
       visible height, tracking the browser bars) with % as the legacy fallback. */
    top: calc(50% - 10px);
    top: calc(50dvh - 10px);
    max-height: calc(100% - 148px);   /* fallback: 50 + 70 bar zones + 14px margins */
    max-height: calc(100dvh - 148px);
    max-width: calc(100% - 24px);
    padding: 16px 14px;
    touch-action: pan-y; /* keep vertical panel scrolling even near the game canvas */
  }
  /* Uniform side gutters — the engine widths (84% / 94% / min(500px,94%)) left a
     different margin on every panel. 12px each side for all three. */
  .movement-ui-panel.movement-start-panel,
  .movement-ui-panel.movement-level-overlay,
  #movement-fail-panel.adj-fail-preview {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
  .movement-level-overlay.adj-level-preview.srt-td-allclear {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}