/* The coach (src/ui/coach.js): a parchment card that points at the control
   it's teaching, a pulsing ring around that control, and two marks on the
   trail (where raiders come in, and the seed vault). Hidden under sheets and
   on the menu. */
.coach { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.app[data-screen="menu"] .coach, .app[data-overlay]:not([data-overlay=""]) .coach { display: none; }

.coach-card {
  position: absolute; left: 0; top: 0; width: min(290px, 44vw); pointer-events: auto; text-align: left;
  background: var(--sheet, var(--paper)); color: var(--sheet-text, var(--ink)); border: 3px solid var(--sheet-edge, var(--paper-3));
  border-radius: 16px; padding: 10px 12px 10px; box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 16px 34px rgba(0,0,0,.42);
  font-size: 13.5px; line-height: 1.35;
}
.coach-card.in { animation: coach-in .26s var(--spring, ease-out); }
@keyframes coach-in { from { opacity: 0; transform: scale(.94); } }
.coach-card h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.15; }
.coach-card h3 small { display: block; font-size: 12px; font-weight: 700; color: var(--sheet-soft, var(--ink-soft)); }
.coach-card p { margin: 0 0 6px; }
.coach-card b { color: var(--clay-deep); }
.coach-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--moss-deep); margin-bottom: 2px !important; }
.coach-head { display: flex; align-items: center; gap: 8px; }
.coach-foe { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--sheet-2, var(--paper-2)); display: grid; place-items: center; }
.coach-foe svg { width: 38px; height: 38px; }
.coach-sub { font-size: 12px; font-weight: 700; color: var(--sheet-soft, var(--ink-soft)); margin: 2px 0 3px !important; }
.coach-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; }
.coach-list li { display: grid; grid-template-columns: 26px auto minmax(0, 1fr); align-items: center; gap: 6px; background: var(--sheet-2, var(--paper-2)); border-radius: 10px; padding: 2px 8px 2px 4px; }
.coach-list small { font-size: 11.5px; color: var(--sheet-soft, var(--ink-soft)); text-align: right; }
.coach-ico svg { width: 26px; height: 26px; display: block; }
.coach-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.coach-actions .sbtn { padding: 6px 14px; min-height: 0; font-size: 14px; }
.coach-skip { margin-right: auto; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--sheet-soft, var(--ink-soft)); text-decoration: underline; cursor: pointer; }
.coach-held { margin-right: auto; font-size: 11.5px; font-weight: 700; color: var(--sheet-soft, var(--ink-soft)); }

/* The arrow on the side facing the target. */
.coach-card::after { content: ''; position: absolute; border: 9px solid transparent; }
.coach-card[data-side="none"]::after { display: none; }
.coach-card[data-side="right"]::after { right: -21px; top: var(--ay, 30px); margin-top: -9px; border-left-color: var(--sheet-edge, var(--paper-3)); }
.coach-card[data-side="left"]::after { left: -21px; top: var(--ay, 30px); margin-top: -9px; border-right-color: var(--sheet-edge, var(--paper-3)); }
.coach-card[data-side="bottom"]::after { bottom: -21px; left: var(--ax, 40px); margin-left: -9px; border-top-color: var(--sheet-edge, var(--paper-3)); }
.coach-card[data-side="top"]::after { top: -21px; left: var(--ax, 40px); margin-left: -9px; border-bottom-color: var(--sheet-edge, var(--paper-3)); }

.coach-ring {
  position: absolute; border-radius: 14px; border: 3px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 0 18px 4px rgba(229,179,92,.75);
  animation: coach-pulse 1.3s ease-in-out infinite;
}
.coach-ring.round { border-radius: 50%; }
@keyframes coach-pulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 3px rgba(0,0,0,.2), 0 0 28px 8px rgba(229,179,92,.5); } }

/* Trail marks: a pin on the trail with a label. */
.coach-mark { position: absolute; width: 0; height: 0; font-style: normal; }
.coach-mark::before {
  content: ''; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #fff; background: var(--clay); box-shadow: 0 0 0 3px rgba(0,0,0,.25);
  animation: coach-pulse 1.3s ease-in-out infinite;
}
.coach-mark.out::before { background: var(--go-a, var(--moss)); }
.coach-mark span {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap;
  background: rgba(30,40,30,.88); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.coach-mark[data-below="true"] span { bottom: auto; top: 16px; }
.coach-mark[data-edge="l"] span { left: -14px; transform: none; }
.coach-mark[data-edge="r"] span { left: auto; right: -14px; transform: none; }

.howto-tips { width: 100%; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .coach-ring, .coach-mark::before, .coach-card.in { animation: none; }
}
@media (max-height: 480px) {
  .coach-card { font-size: 12.5px; padding: 8px 10px; width: min(260px, 46vw); }
  .coach-card h3 { font-size: 15px; }
}