/* ═══════════════════════════════════════════════════════════════
   First Steps - the player tutorial (ui/coach_marks.js, prefix gf-coach)

   Ash-gold over glass, like every player surface. Grid cyan is the Grid's
   alone and, in the UI, staff chrome's: it must never appear here
   (tests/tutorial_surface_test.mjs scans for it). The spotlight ring is click-through; the card is the only thing
   that takes input. The layer is `popover`: above every window and mobile
   sheet, below the escape menu and any confirm dialog (z_layers.js).
   ═══════════════════════════════════════════════════════════════ */

.gf-coach {
    position: fixed;
    inset: 0;
    z-index: var(--gf-z-popover);
    pointer-events: none;           /* passive by default; children opt in */
    font-family: 'Inter', system-ui, sans-serif;
}
.gf-coach.is-modal { pointer-events: auto; }
.gf-coach-mask {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

/* The spotlight. In modal mode the giant box-shadow dims everything but the
   hole; in passive mode there is no dim, only the ring. */
.gf-coach-spot {
    position: absolute;
    clip-path: var(--gf-cut);
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--gf-gold-bright),
                0 0 22px 4px var(--gf-accent-glow);
    transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease;
    animation: gf-coach-breathe 1.8s ease-in-out infinite alternate;
}
.gf-coach.is-modal .gf-coach-spot {
    box-shadow: 0 0 0 9999px rgba(6, 8, 12, 0.72),
                0 0 0 2px var(--gf-gold-bright),
                0 0 26px 5px var(--gf-accent-glow);
}
.gf-coach-spot.ring {
    border-radius: 50%;
    transition: none;               /* re-projected every frame */
}
@keyframes gf-coach-breathe {
    from { filter: brightness(0.95); }
    to   { filter: brightness(1.25); }
}

/* Off-screen target: an arrow on the edge of the screen pointing at it. */
.gf-coach-arrow {
    position: absolute;
    font-size: 26px;
    line-height: 1;
    color: var(--gf-gold-bright);
    text-shadow: 0 0 10px var(--gf-accent-glow), 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
    animation: gf-coach-nudge 0.9s ease-in-out infinite alternate;
}
@keyframes gf-coach-nudge {
    from { opacity: 0.7; }
    to   { opacity: 1; }
}

/* The card. */
.gf-coach-card {
    position: absolute;
    width: 360px;
    max-width: 92vw;
    box-sizing: border-box;
    padding: 0 18px 14px;
    background: var(--gf-panel-bg-strong);
    border: 1px solid var(--gf-border-accent);
    clip-path: var(--gf-cut);
    box-shadow: var(--gf-shadow-strong), var(--gf-inset);
    color: var(--gf-text-1);
    pointer-events: auto;
}
.gf-coach-card.docked {
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
}
.gf-coach-card.is-done { border-color: var(--gf-success); }

/* Grip: the drag handle + the eyebrow. */
.gf-coach-grip {
    margin: 0 -18px 8px;
    padding: 10px 18px 6px;
    cursor: grab;
    border-bottom: 1px solid var(--gf-border-soft);
    background: linear-gradient(180deg, rgba(var(--gf-trim-rgb), 0.08), transparent);
    clip-path: var(--gf-cut-top);
    user-select: none;
    -webkit-user-select: none;
}
.gf-coach-grip:active { cursor: grabbing; }
.gf-coach-step {
    font-family: var(--gf-font-display);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gf-gold);
}
.gf-coach-title {
    font-family: var(--gf-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--gf-accent-hot);
    margin: 2px 0 8px;
}
.gf-coach-body {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gf-text-2);
}
.gf-coach-body p { margin: 0 0 8px; }
.gf-coach-body p:last-child { margin-bottom: 0; }
.gf-coach-body b { color: var(--gf-text-1); font-weight: 600; }
.gf-coach-body kbd {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 1px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--gf-accent-hot);
    background: var(--gf-slot-bg);
    border: 1px solid var(--gf-border-accent);
    border-bottom-width: 2px;
    clip-path: var(--gf-cut-sm);
    white-space: nowrap;
}

/* "Waiting for you…" - the affordance that says this step wants a gesture. */
.gf-coach-waiting {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--gf-text-3);
    font-style: italic;
}
.gf-coach-waiting i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gf-accent);
    box-shadow: 0 0 8px var(--gf-accent-glow);
    animation: gf-coach-breathe 1s ease-in-out infinite alternate;
}
.gf-coach-card.is-done .gf-coach-waiting { display: none; }

/* Progress dots within the chapter. */
.gf-coach-dots { display: flex; gap: 5px; margin: 12px 0 10px; flex-wrap: wrap; }
.gf-coach-dots i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gf-border);
    transition: background 0.2s ease, transform 0.2s ease;
}
.gf-coach-dots i.done { background: var(--gf-gold); opacity: 0.6; }
.gf-coach-dots i.on { background: var(--gf-accent-hot); transform: scale(1.3); }

/* Nav row. */
.gf-coach-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.gf-coach-spacer { flex: 1; }
.gf-coach-btn {
    background: var(--gf-slot-bg);
    border: 1px solid var(--gf-border);
    color: var(--gf-text-1);
    clip-path: var(--gf-cut-sm);
    padding: 6px 13px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.gf-coach-btn:hover { background: var(--gf-slot-bg-hover); border-color: var(--gf-border-accent); }
.gf-coach-btn.primary {
    background: var(--gf-accent);
    border-color: var(--gf-accent-deep);
    color: #1a1408;
    font-weight: 700;
}
.gf-coach-btn.primary:hover { background: var(--gf-accent-hot); }
.gf-coach-btn.skip, .gf-coach-btn.ghost {
    color: var(--gf-text-3);
    border-color: transparent;
    background: transparent;
    padding-left: 6px; padding-right: 6px;
}
.gf-coach-btn.skip:hover, .gf-coach-btn.ghost:hover { color: var(--gf-text-1); background: transparent; }

/* Chapter picker. */
.gf-coach-chapters { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.gf-coach-chapter {
    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    text-align: left;
    padding: 7px 10px;
    background: var(--gf-slot-bg);
    border: 1px solid var(--gf-border-soft);
    clip-path: var(--gf-cut);
    color: var(--gf-text-1);
    font-family: inherit;
    cursor: pointer;
}
.gf-coach-chapter:hover { background: var(--gf-slot-bg-hover); border-color: var(--gf-border-accent); }
.gf-coach-chapter-tick { grid-row: 1 / span 2; color: var(--gf-success); font-weight: 700; }
.gf-coach-chapter-title { font-size: 13.5px; font-weight: 600; }
.gf-coach-chapter-blurb { font-size: 11.5px; color: var(--gf-text-3); }
.gf-coach-chapter.done .gf-coach-chapter-title { color: var(--gf-text-2); }

/* While the tutorial runs, a subtle frame so the state is legible even when
   the card has been dragged into a corner. */
body.gf-tutorial::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--gf-z-hud);
    box-shadow: inset 0 0 0 2px rgba(var(--gf-trim-rgb), 0.18);
}

/* Touch: the docked card sits above the utility row, never under a thumb. */
body.mobile-controls-active .gf-coach-card {
    width: 92vw;
    max-width: 480px;
    font-size: 13px;
}
body.mobile-controls-active .gf-coach-card.docked {
    top: auto;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}
body.mobile-controls-active .gf-coach-body { font-size: 13px; }
body.mobile-controls-active .gf-coach-btn { padding: 8px 12px; }

/* Options → Help: the tutorial rows are buttons, not key rows. */
.help-row-action { align-items: center; }
.help-row-action .gf-btn { justify-self: start; white-space: nowrap; }

/* Quick Help ("?"): replay strip at the top of the cheat sheet. */
.qh-tutorial {
    margin: 0 0 10px;
    padding: 8px 10px 10px;
    background: var(--gf-panel-bg-soft);
    border: 1px solid var(--gf-border-accent);
    clip-path: var(--gf-cut);
}
.qh-tutorial-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.qh-tutorial-title { font-family: var(--gf-font-display); font-size: 12px; color: var(--gf-accent); letter-spacing: 0.06em; }
.qh-tutorial-desc { font-size: 11.5px; color: var(--gf-text-3); }
.qh-tutorial-row { display: flex; flex-wrap: wrap; gap: 5px; }

/* Nav: two FIXED rows. Links above (Chapters · Skip step · Skip chapter ·
   Skip tutorial), Back | Next below. Disabled controls stay in place so the
   layout never shifts between steps. */
.gf-coach-nav { display: block; margin-top: 10px; }
.gf-coach-nav-row { display: flex; align-items: center; gap: 6px; }
.gf-coach-nav-row.links { margin-bottom: 8px; flex-wrap: wrap; }
.gf-coach-nav-row.main .gf-coach-btn { min-width: 84px; }
.gf-coach-btn:disabled { opacity: 0.32; cursor: default; pointer-events: none; }
.gf-coach-done { color: var(--gf-success); font-weight: 600; font-size: 12.5px; margin-right: 8px; }
.gf-coach-card { width: 380px; }

/* World-target labels: the arrow names what it points at, the ring too. */
.gf-coach-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gf-coach-arrow-glyph { display: inline-block; }
.gf-coach-arrow-label, .gf-coach-ring-label {
    font-family: var(--gf-font-display);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--gf-accent-hot);
    text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.9);
    white-space: nowrap;
    pointer-events: none;
}
.gf-coach-ring-label { position: absolute; transform: translate(-50%, -100%); }
.gf-coach-arrow { transform: translate(-50%, -50%); }