/* Coach marks (public/js/coach.js): a spotlight with a speech bubble, and the Fruit tab's lock. */
.coach { position: fixed; inset: 0; z-index: 260; pointer-events: none; }
.coach .coachblock { position: fixed; pointer-events: auto; background: transparent; }
.coach .coachhole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 200vmax rgba(20, 10, 30, .62); outline: 3px solid #ffd23f; outline-offset: 2px; transition: opacity .2s; }
.coach .coachhole::after { content: ""; position: absolute; inset: -8px; border-radius: 20px; border: 3px solid #ffd23f; animation: coachpulse 1.2s ease-out infinite; }
.coach.nohole .coachhole { box-shadow: none; outline: 0; }
.coach.nohole { background: rgba(20, 10, 30, .62); }
.coach.waiting .coachhole, .coach.waiting .coachbubble { visibility: hidden; }
.coach .coachbubble { position: fixed; pointer-events: auto; background: #fffdf6; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; padding: 12px 14px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: coachin .22s ease-out; }
.coach .coachkicker { font: 900 11px/1 var(--body); letter-spacing: .8px; text-transform: uppercase; color: #2d6a4f; margin-bottom: 4px; }
.coach .coachtitle { font: 400 20px/1.1 var(--head); margin-bottom: 3px; }
.coach .coachtext { font: 800 15px/1.35 var(--body); }
.coach .coachrow { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.coach .coachrow .grow { flex: 1; }
.coach .coachtap { font: 900 12px/1 var(--body); color: var(--muted); }
.coach .coachskip { border: 0; background: none; font: 800 13px/1 var(--body); color: var(--muted); text-decoration: underline; padding: 6px 2px; cursor: pointer; }
.coach .coacharrow { position: absolute; left: var(--ax, 50%); width: 16px; height: 16px; background: #fffdf6; border: 3px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.coach .coachbubble[data-side="below"] .coacharrow { top: -10px; border-right: 0; border-bottom: 0; }
.coach .coachbubble[data-side="above"] .coacharrow { bottom: -10px; border-left: 0; border-top: 0; }
.coach .coachbubble[data-side="none"] .coacharrow { display: none; }
@keyframes coachpulse { from { transform: scale(.96); opacity: 1; } to { transform: scale(1.12); opacity: 0; } }
@keyframes coachin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .coach .coachhole::after, .coach .coachbubble { animation: none; } }

/* A locked nav tab (features.js `locked`): the Fruit until the first Fruit is found. */
.nav button.locked { color: #b3a9c2; }
.nav button.locked > svg { opacity: .45; filter: grayscale(1); }
.nav button.locked .navlock { position: absolute; top: 3px; right: calc(50% - 22px); width: 18px; height: 18px; }
.nav button.locked .navlock svg { width: 18px; height: 18px; }

/* The first Fruit's discovery card: its verse and the chapter's story. */
.milestone.discover .foundverse { text-align: left; margin-top: 8px; }
.milestone.discover .foundstory { font: 800 13px/1.35 var(--body); margin: 8px 0 0; }