/* Guided-tutorial overlay: the spotlight cut-out and the coaching step card. The spotlight element is drawn
   by js/tutorial-overlay.js (positioned over the current step's target); its large box-shadow dims the rest
   of the screen. The card is fixed in a corner so it stays clear of the board it points at. See
   docs/design/tutorials.md and WebClient/Components/TutorialOverlay.razor. */

/* The overlay layer: covers the viewport so it reads as one surface, but never intercepts pointer events —
   the spotlight and the board beneath stay fully interactive. Its interactive card re-enables events. */
.tut {
    position: fixed;
    inset: 0;
    z-index: var(--z-room-overlay);
    pointer-events: none;
    transition: background 0.28s ease;
}

/* Explain steps make the board inert so the player can't draft ahead of the lesson — applied to the stage
   itself (see MatchView), not the overlay, so the room's own controls (the Leave-table exit above all) stay
   clickable. Act steps drop it so the taught move reaches the board. */
.tut-board-lock {
    pointer-events: none;
}

/* An explain step with no spotlight dims the whole screen slightly, so attention falls on the coaching card
   and its Next button. Spotlighted steps skip this — their spotlight cut-out does the dimming (and this
   full-screen wash would otherwise cover the highlight). The card sits above the wash (its own z-index). */
.tut--dimmed {
    background: rgba(4, 6, 15, 0.5);
}

/* The spotlight: a fixed rectangle over the target, ringed and glowing, with a huge soft shadow that dims
   everything else. pointer-events:none so it only focuses attention — clicks still reach the board. The
   guided tutorial (.tut-spot) and inspect mode (.inspect-spot) each own an independent element (js/tutorial-
   overlay.js), never active at once, but sharing this one cut-out look. */
.tut-spot,
.inspect-spot {
    position: fixed;
    /* Pinned to the viewport's own origin, because the JS positions the cut-out by a transform carrying the
       target's viewport rect. Left to `auto` a fixed box resolves to its STATIC position — the end of the
       document's flow, a whole viewport below the room — and every spotlight lands off-screen: the scrim dims
       the screen and no hole appears anywhere. */
    top: 0;
    left: 0;
    z-index: calc(var(--z-room-overlay) - 2);
    pointer-events: none;
    border-radius: 0.9rem;
    border: 2px solid color-mix(in srgb, var(--accent-blue-soft) 95%, transparent);
    box-shadow:
        0 0 0 100vmax rgba(4, 6, 15, 0.62),
        0 0 22px 4px color-mix(in srgb, var(--accent-blue-soft) 55%, transparent),
        inset 0 0 16px color-mix(in srgb, var(--accent-blue-soft) 25%, transparent);
    /* Promote the ring to its own compositor layer so a transform move carries the whole-viewport box-shadow
       scrim without a layout step or a full-viewport repaint. The node is removed on teardown, so the layer
       exists only while a spotlight is active. */
    will-change: transform;
    transition: transform 0.28s ease;
}

/* The coaching card. Fixed to the bottom-left so it doesn't sit on top of a centred board. It is
   click-through (pointer-events:none) except for its own buttons, so even if it overlaps a board control the
   player is meant to click during an "act" step, that click still lands on the board underneath. */
.tut-card {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: var(--z-tip);
    pointer-events: none;
    width: min(360px, calc(100vw - 2.5rem));
    padding: 1rem 1.15rem 1.1rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(30, 38, 66, 0.98), rgba(20, 26, 48, 0.98));
    border: 1px solid color-mix(in srgb, var(--accent-blue-soft) 35%, transparent);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    color: #eef2fb;
    animation: tut-card-in 0.25s ease both;
}

@keyframes tut-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tut-card__progress {
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(160, 190, 240, 0.85);
    margin-bottom: 0.4rem;
}

.tut-card__text {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.tut-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.tut-card__next {
    pointer-events: auto;
    margin: 0;
    min-width: 6rem;
}

/* The "act now" cue on steps that wait for the player's move rather than a Next click. */
.tut-card__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-blue-soft) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-blue-soft) 40%, transparent);
    color: var(--text-accent-soft);
    font-size: 0.82rem;
    font-weight: 600;
    animation: tut-hint-pulse 1.6s ease-in-out infinite;
}

@keyframes tut-hint-pulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

/* Respect reduced-motion (and the E2E harness, which forces it): no spotlight glide, no pulses. */
@media (prefers-reduced-motion: reduce) {
    .tut-spot, .inspect-spot { transition: none; }
    .tut-card { animation: none; }
    .tut-card__hint { animation: none; }
}