/* 7arif coach mark (games/retro/coach.js): a paper speech bubble with an ink border and a hard shadow, pointing at the
   first interactive element. Shared variables only (main page and kit pages). Never takes taps. Cairo 16 px / 1.6. */
.coach { position: fixed; z-index: 25; max-width: min(300px, calc(100vw - 16px)); padding: 10px 14px; background: var(--paper-clip); color: var(--ink);
         border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); pointer-events: none; text-align: start;
         font: 800 16px/1.6 var(--font-ui); animation: coach-in 200ms ease-out both; }
.coach::before { content: ""; position: absolute; top: -9px; left: calc(var(--ax, 50%) - 8px); width: 14px; height: 14px; background: var(--paper-clip);
                 border-top: 2.5px solid var(--ink); border-left: 2.5px solid var(--ink); transform: rotate(45deg); }   /* physical: --ax is measured from the bubble's physical left edge */
.coach.is-above::before { top: auto; bottom: -9px; transform: rotate(225deg); }
.coach__txt { display: block; }
.coach-target { outline: 3px solid var(--yellow); outline-offset: 3px; }
@keyframes coach-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .coach { animation: coach-fade 120ms ease-out both; } }
@keyframes coach-fade { from { opacity: 0; } to { opacity: 1; } }