/* Agency: TCG — Alpha 3.3 V2 · Learn to Play Milestone 5 */

.game-mode-choice-grid:has(.learn-mode-choice-v2) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.learn-mode-choice-v2 {
  border-color: rgba(23,21,18,.34) !important;
  background: rgba(255,255,255,.82) !important;
}

.learn-coach-v2 {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20000;
  width: min(370px, calc(100vw - 44px));
  padding: 17px 18px 15px;
  border: 1px solid rgba(23,21,18,.20);
  border-radius: 9px;
  background: rgba(255,255,255,.96);
  color: #171512;
  box-shadow: 0 18px 52px rgba(56,40,31,.19);
}

.learn-coach-topline-v2 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #766e67;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.learn-coach-v2 h2 {
  margin: 10px 0 7px;
  font-size: 20px;
  line-height: .98;
}

.learn-coach-v2 p {
  margin: 0;
  color: #655e58;
  font-size: 12px;
  line-height: 1.45;
}

.learn-coach-actions-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.learn-skip-v2 {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #827a73;
  padding: 7px 0;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .07em;
}

.learn-highlight-v2 {
  position: relative !important;
  z-index: 120 !important;
  outline: 2px solid #11110f !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,.55), 0 9px 24px rgba(54,40,32,.16) !important;
}

.private-hand-card.learn-highlight-v2 {
  border-radius: 6px;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.68), 0 10px 28px rgba(54,40,32,.20) !important;
}

/* Moment 7: the move-allowance row normally stretches across the full Hand
   module. During the tutorial, shrink-wrap the highlight to the actual chips so
   the black guide box hugs Campaign / Idea / Kill / Actions / Played only. */
.turn-allowances.learn-highlight-v2 {
  width: fit-content !important;
  max-width: 100% !important;
  justify-self: start !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  padding: 1px 2px !important;
}

/* Campaign stacks are positioned cards, not normal document-flow cards. The
   generic tutorial highlight uses position:relative so z-index works on ordinary
   UI, but applying that to an attached Idea pulls it out of the game's stack.
   Restore the native absolute positioning whenever a stack card is highlighted. */
.network-board .stack-card.learn-highlight-v2 {
  position: absolute !important;
}

.network-board .stack-card.attached-card.learn-highlight-v2 {
  top: calc(var(--stack-index) * 20px) !important;
}

.network-board.you .campaign-stack.learn-target-slot-v2 {
  box-shadow: inset 0 0 0 2px rgba(17,17,15,.72), 0 8px 20px rgba(54,40,32,.10) !important;
}

.campaign-point-tally.learn-highlight-v2 {
  border-radius: 999px;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.72) !important;
}

/* Moment 6: keep the Department lesson anchored to the two real cards that
   created the pairing. If the Campaign actually rewards that Department, give
   the whole stack one extra quiet emphasis and surface a small bonus note in
   the coach rather than inventing any new game UI. */
.network-board.you .campaign-stack.learn-bonus-hit-v2 {
  box-shadow: inset 0 0 0 2px rgba(17,17,15,.82), 0 10px 24px rgba(54,40,32,.14) !important;
}

.learn-coach-aside-v2 {
  color: #817971;
  font-size: .9em;
}

.learn-bonus-note-v2 {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(23,21,18,.14);
  border-radius: 7px;
  background: rgba(246,243,238,.82);
  color: #5e5751;
  font-size: 10px;
  line-height: 1.35;
}

.learn-bonus-note-v2 strong {
  display: block;
  margin-bottom: 3px;
  color: #171512;
  font-size: 9px;
  letter-spacing: .07em;
}

@media (max-width: 900px) {
  .game-mode-choice-grid:has(.learn-mode-choice-v2) {
    grid-template-columns: 1fr;
  }

  .learn-coach-v2 {
    right: 12px;
    bottom: 12px;
    width: min(360px, calc(100vw - 24px));
  }
}