/**
 * Tutorial Overlay Styles - War 2050
 * Guided overlay on top of the actual base view
 * z-index: --z-tutorial-chrome (1500), between the HUD (--z-hud, 100) and
 * the intro (--z-intro, 2000). See docs/HUD-LAYOUT.md §2.
 *
 * TYPE (docs/TYPE-LEGIBILITY.md): the objective card's two chips were
 * 8.8px, and the phone SKIP label 10.9px. All three are at --text-xs
 * (12px) now; the card widened 260 -> 280px and its head wraps, which is
 * what paid for it. Note --color-gold was never a token this codebase
 * defines — those three declarations had been running on their #d4af37
 * fallback and are named --color-accent-gold now.
 */

/* =========================================================
   Tutorial Overlay Container
   ========================================================= */

.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-tutorial-chrome);
    pointer-events: none; /* Allow clicks through to base grid */
    transition: opacity 0.5s ease;
}

.tutorial-overlay.hidden {
    display: none;
}

.tutorial-overlay.fade-out {
    opacity: 0;
}

/* =========================================================
   Tutorial Step Progress
   ========================================================= */

.tutorial-progress {
    position: fixed;
    /* Was a hard-coded 100px against an action bar that occupies 98px -
       a 2px clearance that came from a guess, not a measurement, and that
       went negative the moment the bar changed height. Derived now. */
    bottom: var(--region-d-bottom);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    z-index: var(--z-tutorial-chrome);
}

.tutorial-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.tutorial-step-dot.active {
    background: var(--color-accent-gold, #d4af37);
    border-color: var(--color-accent-gold, #d4af37);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.tutorial-step-dot.completed {
    background: var(--color-accent-green, #4ade80);
    border-color: var(--color-accent-green, #4ade80);
}

.tutorial-step-connector {
    width: 20px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
}

.tutorial-step-connector.completed {
    background: var(--color-accent-green, #4ade80);
}

/* =========================================================
   Objective Card - region D (contextual panel), desktop
   Sits centre-left so it does not fight the Overseer box
   (top-right) or the action bar (bottom). Shares --z-panel (400)
   with .build-menu because the two now live in the same region and
   are mutually exclusive (see .tutorial-panel-hidden below and
   docs/HUD-LAYOUT.md §4.1) - they are never on screen together, so
   tying them to the same tier documents that instead of leaving it
   implicit.
   ========================================================= */

.tutorial-objective {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    padding: 14px 16px;
    background: rgba(10, 15, 26, 0.92);
    border: 1px solid var(--color-accent-gold, #d4af37);
    border-left-width: 3px;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: var(--z-panel);
    animation: objectiveIn 0.35s ease;
}

/* Mutual exclusion with .build-menu (docs/HUD-LAYOUT.md §4.1/§4.2).
   Lane B toggles this exact class on .tutorial-objective and
   .tutorial-progress when the build menu opens/closes - this is the
   entire fix for the 900-1100px "dead zone" collision: the two panels
   are never visible at the same time, at any viewport width, so there
   is no width threshold left to get wrong. */
.tutorial-objective.tutorial-panel-hidden,
.tutorial-progress.tutorial-panel-hidden {
    display: none;
}

@keyframes objectiveIn {
    from { opacity: 0; transform: translateY(-50%) translateX(-14px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.tutorial-objective-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* "OBJECTIVE 2 / 5" and "+3% LIFE" are both 12px caps now; the pair wraps
       rather than one of them being clipped by the card's 280px. */
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 8px;
}

.tutorial-objective-tag {
    font-family: 'Orbitron', monospace;
    font-size: var(--text-xs);
    letter-spacing: 0.8px;
    color: var(--color-text-secondary, #94a3b8);
}

.tutorial-objective-reward {
    font-family: 'Orbitron', monospace;
    font-size: var(--text-xs);
    letter-spacing: 0.4px;
    color: var(--color-primary-900, #0a0f1a);
    background: var(--color-accent-green-light, #10b981);
    padding: 2px 6px;
    border-radius: 3px;
}

.tutorial-objective-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: var(--color-accent-gold, #d4af37);
    margin-bottom: 5px;
}

.tutorial-objective-text {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #94a3b8);
}

/* =========================================================
   Reward Flash
   Momentary "+3% LIFE · RANK 2" over the centre of the screen
   ========================================================= */

.tutorial-reward-flash {
    position: fixed;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--color-accent-green-light, #10b981);
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
    pointer-events: none;
    z-index: var(--z-flash);
    animation: rewardFlash 2.6s ease forwards;
}

@keyframes rewardFlash {
    0%   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.9); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(1); }
}

/* =========================================================
   Phone (<=640px): objective card + progress dots collapse into a
   single bottom-anchored strip instead of the centre-left card
   (docs/HUD-LAYOUT.md §5, Phone). The old @media(max-width:900px)
   rule that used to reposition .tutorial-objective to bottom-centre
   is deleted per §4.1 - the mutual-exclusion class above replaces it
   structurally, so no width threshold is needed for that collision
   at all anymore. This block is the separate, phone-only compaction
   called for in §5, not a re-introduction of that deleted rule.
   ========================================================= */

@media (max-width: 640px) {
    /* The collapsed strip now sits in region D's slot - directly above the
       action bar - instead of at bottom: 0 on top of it.

       This is the second overlap the owner photographed. The strip was
       56px tall at bottom: 0; the action bar was 64px tall at bottom: 8px.
       They overlapped by 48px of the strip's 56, and because the strip
       carries pointer-events: none the taps fell through to whatever
       happened to be under it - which, given the bar was also overflowing
       the viewport horizontally, was often nothing at all.

       Region D is the correct home for it per §1, and it costs nothing to
       share the slot with the panels: hudPanels.js already hides the strip
       and the dots whenever any region-D panel opens (§4.1/§4.2), so the
       two are never on screen together. */
    .tutorial-objective {
        left: 0;
        right: 0;
        top: auto;
        bottom: var(--region-c-reserve);
        transform: none;
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        /* Right padding reserves the dots' strip-relative footprint below;
           at 5 steps they measure ~112px with the phone sizing. */
        padding: 8px 128px 8px 16px;
        border-left-width: 1px;
        border-top-width: 3px;
        border-radius: 0;
        overflow: hidden;
        animation: none;
    }

    .tutorial-objective-head {
        display: none;
    }

    .tutorial-objective-text {
        display: none;
    }

    .tutorial-objective-title {
        margin-bottom: 0;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Rides inside the same 56px strip, right-hand end, so the two read as
       one collapsed bar without needing a DOM merge. Anchored to the strip's
       own band (reserve + 22px centres 12px of dots in 56px of strip)
       rather than to the viewport bottom, which is what put them over the
       action bar. */
    .tutorial-progress {
        bottom: calc(var(--region-c-reserve) + 22px);
        right: 12px;
        left: auto;
        transform: none;
        gap: 4px;
    }

    /* Shrunk so five steps plus connectors fit the 128px reserved above -
       at the desktop sizing they measured 204px and ran under the
       objective title. */
    .tutorial-step-dot {
        width: 8px;
        height: 8px;
    }

    .tutorial-step-connector {
        width: 10px;
    }

    /* Region C is full of 44px squares on a phone; "SKIP ORIENTATION" at
       its desktop size is ~150px of that row on its own and pushes the
       second row past 360px. The text node stays in the DOM (font-size: 0,
       not display: none) so the accessible name and the title tooltip are
       unchanged - only the rendered glyphs shorten.

       Selector is scoped to .action-buttons-floating so it outranks
       layout.css's `.action-buttons-floating .btn { font-size: ... }`,
       which is two class selectors deep and otherwise wins - without the
       scope the label stayed at full size and wrapped onto two lines
       hanging off the right edge of the bar. */
    .action-buttons-floating .tutorial-skip-btn {
        font-size: 0;
        padding: 0;
        letter-spacing: 0;
    }

    .action-buttons-floating .tutorial-skip-btn::after {
        content: 'SKIP';
        font-family: 'Rajdhani', sans-serif;
        /* Was 0.68rem/10.9px. Four characters at 12px measure ~32px, which
           the two-row phone action bar still absorbs. */
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tutorial-objective,
    .tutorial-reward-flash { animation: none; }

    .tutorial-highlight,
    .tutorial-highlight::after { animation: none; }
}

/* =========================================================
   Tutorial Highlight Pulse
   Pulses on relevant HUD buttons to guide the player
   ========================================================= */

.tutorial-highlight {
    animation: tutorialPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6) !important;
    position: relative;
    /* New tier (docs/HUD-LAYOUT.md §2, --z-highlight: 450). Note: 450 is
       numerically above --z-panel (400), the opposite of the contract's
       parenthetical "below any panel" - implemented to the table's literal
       value since the ten tiers are the operative spec; flagged for Lane C
       as the two don't currently agree. In practice the highlighted button
       and .build-menu don't spatially overlap either way. */
    z-index: var(--z-highlight);
}

.tutorial-highlight::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--color-accent-gold, #d4af37);
    border-radius: inherit;
    animation: tutorialPulseRing 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tutorialPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }
    50% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.8); }
}

@keyframes tutorialPulseRing {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* =========================================================
   Tutorial Skip Button
   docs/HUD-LAYOUT.md §4.3: reclassified out of the collision with the
   centred action bar entirely rather than repositioned - it moves from
   an independently fixed bottom-right element into a normal in-flow
   button appended to .action-bar-right (Lane B's change), styled here
   to match .btn-ghost (the "Menu" button's look). Because it is now
   position: static, it has no z-index - z-index has no effect on a
   non-positioned element, and it stacks with the rest of the action
   bar at --z-hud by virtue of being its child. (The z-index ladder in
   §2 still lists this selector under --z-tutorial-chrome; that entry
   is now moot given §4.3's own resolution and is safe to ignore.)
   ========================================================= */

.tutorial-skip-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, #94a3b8);
    background: transparent;
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tutorial-skip-btn:hover {
    color: var(--color-accent-gold, #d4af37);
    background: rgba(212, 175, 55, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .tutorial-skip-btn {
        transition: none;
    }
}