/* The first-play guide (js/coach.js): a gold marker circle, a curved arrow and one line of text.
   Everything is drawn from script; this file only holds the look of the text and the skip link.
   The whole layer ignores the pointer except "Skip tips", so the real button underneath still works. */
#coach { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.coach-mark { position: absolute; inset: 0; pointer-events: none; }
.coach-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.coach-fx { transform-box: fill-box; transform-origin: center; }
.coach-label {
  position: absolute; left: 0; top: 0; width: max-content; max-width: min(250px, calc(100vw - 40px)); padding: 2px 4px;
  font-size: clamp(1.4rem, 1.05rem + 1.1vw, 1.9rem); font-weight: 600; line-height: 1.12; text-align: center;
  color: #f5df9d; text-wrap: balance; transform-origin: 50% 60%; will-change: transform, opacity; opacity: 0;
  text-shadow: 0 2px 0 rgba(20, 7, 8, .95), 0 0 3px rgba(20, 7, 8, .95), 0 0 14px rgba(12, 4, 6, .9), 0 0 26px rgba(12, 4, 6, .8);
}
/* a soft dark patch behind the line, only when it has to sit over other text or buttons */
.coach-label::before {
  content: ''; position: absolute; z-index: -1; inset: -12px -26px; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(closest-side, rgba(12, 4, 6, .86), rgba(12, 4, 6, .62) 58%, rgba(12, 4, 6, 0));
}
.coach-label.plated::before { opacity: 1; }
.coach-skip {
  position: absolute; left: max(6px, env(safe-area-inset-left)); bottom: max(4px, env(safe-area-inset-bottom)); pointer-events: auto;
  min-height: 44px; display: inline-flex; align-items: center; /* a full-size touch target */
  padding: 11px 14px; font-size: .95rem; color: rgba(245, 223, 157, .78); text-decoration: underline; text-underline-offset: 3px;
  text-shadow: 0 1px 6px rgba(12, 4, 6, .95);
}
.coach-skip:hover { color: #fff; }