/* First Command uses the existing Help Commander, not a second modal. */
.firstCommandLobbyCard {
  display: grid;
  gap: .65rem;
  padding: 1rem;
  margin-block: 1rem;
  border: 1px solid #bda458;
  border-radius: .6rem;
  background: linear-gradient(120deg, #273528, #19231e);
  color: #f1eedf;
}
.firstCommandLobbyCard h2, .firstCommandLobbyCard h3, .firstCommandLobbyCard p { margin: 0; }
.firstCommandLobbyCard p { max-width: 62ch; font-size: .9rem; line-height: 1.45; }
.firstCommandLobbyCard small { color: #d0d6c4; line-height: 1.4; }
.firstCommandLobbyCard button { justify-self: start; }

#liveTutorialOverlay.firstCommandPractice .liveTutorialCard {
  width: min(410px, calc(100vw - 24px));
  max-height: min(62vh, 580px) !important;
  max-height: min(62dvh, 580px) !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#liveTutorialOverlay.firstCommandPractice .liveTutorialCommanderIntro { display: block; }
#liveTutorialOverlay.firstCommandPractice .liveTutorialCommanderFigure { display: none; }
#liveTutorialOverlay.firstCommandPractice .liveTutorialCard h2 { font-size: 1.2rem; line-height: 1.25; }
#liveTutorialOverlay.firstCommandPractice .liveTutorialCard p { font-size: .88rem; line-height: 1.45; }
#liveTutorialOverlay.firstCommandPractice .liveTutorialHint { margin-top: .7rem; }
#liveTutorialOverlay.firstCommandPractice .liveTutorialTopics:not(.hidden) { display: block; margin-top: .7rem; }
#liveTutorialOverlay.firstCommandPractice .liveTutorialHeader button,
.firstCommandLobbyCard button,
.firstCommandActions button {
  min-height: 44px;
  padding: .55rem .75rem;
  white-space: normal;
  line-height: 1.3;
  touch-action: manipulation;
}
.firstCommandActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.firstCommandActions button { flex: 0 1 auto; }
#liveTutorialOverlay.firstCommandPractice .firstCommandActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "continue retry" "exit exit";
  align-items: stretch;
}
#liveTutorialOverlay.firstCommandPractice [data-live-tutorial-action="continue"] { grid-area: continue; }
#liveTutorialOverlay.firstCommandPractice [data-live-tutorial-action="retry"] { grid-area: retry; }
#liveTutorialOverlay.firstCommandPractice [data-live-tutorial-action="exit"] { grid-area: exit; }
/* Keep the Continue slot when orders replace it: a quick second tap must not
   land on Retry or Exit because an earlier button disappeared. Hidden content
   remains unavailable to pointer, keyboard and assistive-technology interaction. */
#liveTutorialOverlay.firstCommandPractice [data-live-tutorial-action="continue"].hidden {
  display: block;
  visibility: hidden;
  pointer-events: none;
}
.firstCommandLobbyCard button:focus-visible,
#liveTutorialOverlay.firstCommandPractice button:focus-visible,
#liveTutorialOverlay.firstCommandPractice a:focus-visible {
  outline: 3px solid #fff1ac;
  outline-offset: 3px;
}
.firstCommandProgress {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  list-style: none;
  margin: .65rem 0 0;
  padding: 0;
  font-size: .7rem;
  line-height: 1.5;
  color: #c5cdbc;
}
.firstCommandProgress > * { border-bottom: 2px solid transparent; }
.firstCommandProgress .isCurrent,
.firstCommandProgress [aria-current="step"] { color: #ffe49a; font-weight: 700; border-bottom-color: #ffe49a; }
.firstCommandProgress .isDone { color: #c6e2b2; }
.firstCommandFacts { min-width: 0; }
.firstCommandFacts .countryFacts { margin-top: .5rem; padding-top: .5rem; }
.firstCommandFacts .countryFactsSource { overflow-wrap: anywhere; }
.firstCommandFacts .battleForecast { margin-bottom: 0; padding: .55rem; }
#liveTutorialOverlay.firstCommandPractice .firstCommandFacts .battleForecast p { font-size: .76rem; }
.firstCommandFacts .countryFacts a { display: inline-block; padding-block: .3rem; }

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  /* The guide is fixed to the viewport. Its internal scroll must never move
     the game beneath it when a browser reveals/focuses a lower guide button.
     hidden is a compatibility fallback; clip also blocks programmatic scroll.
     #app is included because it is otherwise a hidden-overflow scroll box. */
  html.firstCommandActive,
  body.firstCommandActive,
  body.firstCommandActive #app {
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: none;
  }
  #liveTutorialOverlay.firstCommandPractice .liveTutorialCard {
    overflow: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  #liveTutorialOverlay.firstCommandPractice .liveTutorialCard {
    width: min(360px, calc(100vw - 24px));
    max-height: 46vh !important;
    max-height: 46dvh !important;
    padding: .7rem;
  }
  #liveTutorialOverlay.firstCommandPractice .liveTutorialCard h2 { font-size: 1.05rem; }
  #liveTutorialOverlay.firstCommandPractice .liveTutorialCard p { font-size: .8rem; }
  .firstCommandProgress { font-size: .65rem; gap: .2rem .45rem; }
  .firstCommandActions { gap: .4rem; margin-top: .65rem; }
}
@media (max-height: 520px) {
  #liveTutorialOverlay.firstCommandPractice .liveTutorialCard {
    max-height: 58vh !important;
    max-height: 58dvh !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #liveTutorialOverlay.firstCommandPractice .liveTutorialRing,
  #liveTutorialOverlay.firstCommandPractice .liveTutorialTargetActive {
    animation: none;
    transition: none;
  }
}