/* ============================================================
   TUTORIAL 1 GUIDE — spotlight + text bubble (tutorial-guide.js).

   Loaded only on tutorial_1. Every element is created by the script and
   positioned with el.style. z-index sits above the mobile animals sheet
   (1600) and tab (1500) but below term tooltips and modals (2000), so a
   definition opened during the guide shows on top of it.
   ============================================================ */

/* Full-screen dim with a rounded hole per highlighted element (an SVG path
   with a mask), so a step can spotlight several things at once. Never takes
   clicks, so the spotlit controls stay usable. */
.tg-dim {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1900;
    pointer-events: none;
}

/* The dim itself — not the paths of its mask (tutorial-guide.js build()). */
.tg-dim > path {
    fill: rgba(0, 0, 0, 0.45);
}

/* The pulsing outline around each hole. */
.tg-ring {
    position: fixed;
    z-index: 1900;
    border-radius: 12px;
    outline: 3px solid var(--fn-accent, #d4a843);
    outline-offset: 0;
    pointer-events: none;
    animation: tg-pulse 1.6s ease-in-out infinite;
}

@keyframes tg-pulse {
    0%, 100% { outline-color: var(--fn-accent, #d4a843); }
    50% { outline-color: transparent; }
}

/* A highlighted button keeps its hover shadow but not its 1px lift or press
   shrink: the spotlight and bubble follow it every frame, so they shook too. */
.fn-btn.tg-lit:hover,
.fn-btn.tg-lit:active {
    transform: none;
}

/* Over a step's breakBlock (the game buttons) during a break: invisible, but
   unlike the dim it takes every press, so none reaches the buttons. */
.tg-shade {
    position: fixed;
    z-index: 1900;
    cursor: not-allowed;
}

/* Takes the pointer, so nothing under it reacts to a hover (animals growing,
   definitions opening on top of it). A click on it still moves the guide on:
   the guide sees every click first (guard in tutorial-guide.js). It's an
   .fn-box, so the border, fill and drop shadow are the SVG fn-boxes.js draws
   (as on the end screen); the doubled class beats .fn-box { position: relative }. */
.fn-box.tg-bubble {
    position: fixed;
    z-index: 1902;
    width: min(340px, calc(100vw - 24px));
    padding: 1rem 1.2rem 0.7rem;
    color: var(--fn-ink, #2a2a2a);
    font-family: var(--fn-font-body, inherit);
    font-size: 15px;
    line-height: 1.4;
}

.tg-bubble.tg-enter {
    animation: tg-enter 0.2s ease-out;
}

@keyframes tg-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.tg-text p {
    margin: 0;
}

.tg-bullets {
    margin: 0.3rem 0 0;
    padding-left: 1.2rem;
    list-style: disc;
}

.tg-bullets li {
    margin: 0 0 0.2rem;
}

.tg-text .tg-outro {
    margin-top: 0.45rem;
    font-weight: bold;
}

.tg-continue {
    margin: 0.4rem 0 0;
    font-size: 12px;
    opacity: 0.65;
}

.tg-skip {
    display: block;
    margin: 0.35rem 0 0 auto;
    padding: 0.1rem 0.3rem;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    opacity: 0.7;
    cursor: pointer;
}

.tg-skip:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tg-ring, .tg-bubble.tg-enter { animation: none; }
}