/* ==========================================================================
   HOW TO PLAY (guided tutorial) overlay
   Spotlight + coach-mark engine. Sits above all modals (z ~13000).
   Shares the game's DNA: green/cyan glow, Courier Prime, concentric arc cue.
   ========================================================================== */

   #tutRoot {
    position: fixed;
    inset: 0;
    z-index: 13000;
    pointer-events: none; /* children opt back in */
    font-family: var(--main-font, 'Courier Prime', monospace);
    display: none;
    opacity: 1;
    transition: opacity 0.34s ease;
}
#tutRoot.tut-active { display: block; animation: tutRootFadeIn 0.3s ease; }

/* Tutorial messages should read above the guide veil, no matter which step fires them. */
body.cbd-tutorial-active #gameMessage {
    z-index: 13360 !important;
}

/* #tutRoot is on body (z ~13000); #gameContainer is z-index 1 — child z-index cannot
   beat the veil. Fixed positioning lifts game modals to the viewport stacking layer. */
body.cbd-tutorial-active #wheelBackdrop,
body.cbd-tutorial-active #towerWheel,
body.cbd-tutorial-active #towerStatus,
body.cbd-tutorial-active #towerInfo,
body.cbd-tutorial-active #motherUI {
    position: fixed !important;
    z-index: 13350 !important;
}

body.cbd-tutorial-active #wheelBackdrop {
    z-index: 13340 !important;
}

body.cbd-tutorial-active.tut-allow-wheel #towerWheel {
    z-index: 13355 !important;
}

body.cbd-tutorial-active.tut-allow-tower-card #towerStatus,
body.cbd-tutorial-active.tut-allow-tower-card #towerInfo {
    z-index: 13370 !important;
    pointer-events: auto !important;
}

/* Breach/Core peek beats: Mother UI above wheel layer for drag + tab clicks */
body.cbd-tutorial-active.tut-allow-mother #motherUI {
    z-index: 13380 !important;
}

/* interact:true + no cutout target — blur for focus, but clicks reach board + panels */
#tutRoot.tut-interact .tut-block {
    pointer-events: none;
}

#tutRoot.tut-wheel-clear::before,
#tutRoot.tut-wheel-clear .tut-block,
#tutRoot.tut-wheel-clear .tut-spotlight,
#tutRoot.tut-wheel-clear .tut-marker,
#tutRoot.tut-wheel-clear .tut-flow-layer {
    opacity: 0 !important;
    pointer-events: none;
    backdrop-filter: blur(0px) saturate(1) brightness(1) !important;
    -webkit-backdrop-filter: blur(0px) saturate(1) brightness(1) !important;
}

/* hideOverlay + markers: lift the dimmer but keep Breach/Core call-outs visible */
#tutRoot.tut-wheel-clear.tut-show-markers .tut-marker,
#tutRoot.tut-wheel-clear.tut-show-markers .tut-flow,
#tutRoot.tut-wheel-clear.tut-show-markers .tut-flow-layer {
    visibility: visible !important;
}
#tutRoot.tut-wheel-clear.tut-show-markers .tut-marker,
#tutRoot.tut-wheel-clear.tut-show-markers .tut-flow {
    opacity: 1 !important;
}
#tutRoot.tut-wheel-clear.tut-show-markers .tut-marker--click {
    pointer-events: auto !important;
    z-index: 5;
    cursor: pointer;
}

/* Step-to-step swap: board callouts only — coach stays visible (avoids double flash) */
#tutRoot.tut-step-swap .tut-marker,
#tutRoot.tut-step-swap .tut-flow,
#tutRoot.tut-step-swap .tut-spotlight {
    opacity: 0;
    transition: opacity 0.12s ease;
}
.tut-coach.tut-coach--step-pulse {
    animation: tutCoachStepPulse 0.34s ease-out 1;
}
@keyframes tutCoachStepPulse {
    0%   { border-color: rgba(0, 255, 0, 0.55); box-shadow: 0 0 18px rgba(0, 255, 0, 0.35); }
    45%  { border-color: rgba(0, 255, 168, 0.82); box-shadow: 0 0 22px rgba(0, 255, 140, 0.48); }
    100% { border-color: rgba(0, 255, 0, 0.55); box-shadow: 0 0 18px rgba(0, 255, 0, 0.35); }
}

#tutRoot.tut-reveal-delay {
    opacity: 0 !important;
    pointer-events: none;
}

/* Hide cutouts/markers while a game modal is up (belt-and-suspenders). */
body.cbd-tutorial-active:has(#confirmationModal[style*="display: flex"]) #tutRoot .tut-spotlight,
body.cbd-tutorial-active:has(#confirmationModal[style*="display: flex"]) #tutRoot .tut-marker,
body.cbd-tutorial-active:has(#confirmationModal[style*="display: flex"]) #tutRoot .tut-flow-layer,
body.cbd-tutorial-active:has(#pauseOverlay[style*="display: flex"]) #tutRoot .tut-spotlight,
body.cbd-tutorial-active:has(#pauseOverlay[style*="display: flex"]) #tutRoot .tut-marker,
body.cbd-tutorial-active:has(#wheelBackdrop[style*="display: block"]) #tutRoot .tut-spotlight,
body.cbd-tutorial-active:has(#wheelBackdrop[style*="display: block"]) #tutRoot .tut-marker,
body.cbd-tutorial-active:has(#wheelBackdrop[style*="display: flex"]) #tutRoot .tut-spotlight,
body.cbd-tutorial-active:has(#wheelBackdrop[style*="display: flex"]) #tutRoot .tut-marker {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}
@keyframes tutRootFadeIn { from { opacity: 0; } to { opacity: 1; } }
#tutRoot::before,
#tutIntro::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(0deg, rgba(125, 255, 160, 0.11) 0 1px, transparent 1px 5px),
        linear-gradient(90deg, transparent, rgba(0, 255, 120, 0.14), transparent);
    opacity: 0;
    mix-blend-mode: screen;
    animation: tutBootScan 3.8s linear infinite;
}
#tutRoot.tut-starting::before,
#tutIntro.tut-active::before {
    opacity: 0.34;
}
#tutIntro.tut-handoff::before {
    opacity: 0.46;
}
@keyframes tutBootScan {
    from { background-position: 0 0, -60vw 0; }
    to { background-position: 0 30px, 60vw 0; }
}

/* --- Dimming blockers: four panels frame the cutout; backdrop blurs the board */
.tut-block {
    position: fixed;
    z-index: 0;
    background: rgba(0, 8, 2, 0.58);
    backdrop-filter: blur(6px) saturate(0.88) brightness(0.52);
    -webkit-backdrop-filter: blur(6px) saturate(0.88) brightness(0.52);
    pointer-events: auto;
    transition: opacity 0.32s ease, background-color 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}
#tutRoot.tut-starting .tut-block[data-edge="top"] { background: rgba(0, 8, 2, 0.78); }
#tutRoot.tut-starting .tut-block:not([data-edge="top"]),
#tutRoot.tut-starting .tut-spotlight,
#tutRoot.tut-starting .tut-flow,
#tutRoot.tut-starting .tut-marker,
#tutRoot.tut-starting .tut-skip,
#tutRoot.tut-starting .tut-coach {
    opacity: 0;
    pointer-events: none;
}
/* --- Spotlight ring: cutout accent (hole stays clear; blocks carry blur) */
.tut-spotlight {
    position: fixed;
    z-index: 2;
    pointer-events: none;
    border-radius: 10px;
    box-shadow:
        0 0 0 1px rgba(0, 255, 0, 0.65),
        0 0 7px 1px rgba(0, 255, 0, 0.22);
    transition: opacity 0.32s ease, left 0.24s ease, top 0.24s ease, width 0.24s ease, height 0.24s ease;
    animation: tutSpotPulse 2.2s ease-in-out infinite;
}
@keyframes tutSpotPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,255,0,0.5), 0 0 5px 1px rgba(0,255,0,0.18); }
    50%      { box-shadow: 0 0 0 1px rgba(0,255,128,0.72), 0 0 9px 1px rgba(0,255,0,0.28); }
}

/* --- Accent markers (multi-element call-outs, e.g. Breach + Core) ------- */
.tut-marker {
    position: fixed;
    z-index: 3;
    pointer-events: none;
    border-radius: 50%;
    border: 1.5px solid var(--mk, #6dff8f);
    box-shadow: 0 0 7px var(--mk, #6dff8f), inset 0 0 5px var(--mk, #6dff8f);
    opacity: 0.85;
    transition: opacity 0.3s ease, left 0.24s ease, top 0.24s ease, width 0.24s ease, height 0.24s ease;
    animation: tutMarkerPulse 2s ease-in-out infinite;
    cursor: pointer;
    transform-origin: center;
}

.tut-marker--wide {
    border-width: 1px;
    opacity: 0.66;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--mk, #6dff8f) 70%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--mk, #6dff8f) 38%, transparent);
}
.tut-marker__label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    font-family: var(--main-font, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.95),
        0 0 4px rgba(0, 0, 0, 0.9),
        0 0 7px currentColor,
        0 0 14px color-mix(in srgb, currentColor 55%, transparent);
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.88));
    pointer-events: none;
}
@keyframes tutMarkerPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.985); }
    50%      { opacity: 0.95; transform: scale(1.045); }
}

.tut-flow-layer {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.tut-flow {
    position: fixed;
    height: 0;
    transform-origin: 0 0;
    pointer-events: none;
    filter: drop-shadow(0 0 5px var(--flow, #00ffc8));
}
.tut-flow__rail {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background:
        repeating-linear-gradient(90deg, var(--flow, #00ffc8) 0 14px, transparent 14px 22px);
    opacity: 0.5;
    box-shadow: 0 0 9px var(--flow, #00ffc8);
    animation: tutFlowRail 1.2s linear infinite;
}
.tut-flow__tip {
    position: absolute;
    right: -2px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--flow, #00ffc8);
    border-right: 2px solid var(--flow, #00ffc8);
    transform: rotate(45deg);
    opacity: 0.75;
}
.tut-flow__mob {
    --mob-scale: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--flow, #00ffc8);
    box-shadow: 0 0 8px var(--flow, #00ffc8), 0 0 18px rgba(0, 255, 200, 0.35);
    animation: tutFlowMob 3.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.tut-flow__mob--b { --mob-scale: 0.8; animation-delay: 0.72s; }
.tut-flow__mob--c { --mob-scale: 0.64; animation-delay: 1.44s; }
@keyframes tutFlowRail {
    from { background-position: 0 0; }
    to { background-position: 22px 0; }
}
@keyframes tutFlowMob {
    0%   { opacity: 0; transform: translate(-4px, -50%) scale(calc(var(--mob-scale) * 0.55)); }
    12%  { opacity: 0.9; }
    62%  { opacity: 0.82; }
    86%  { opacity: 0.18; }
    100% { opacity: 0; transform: translate(calc(var(--flow-len, 160px) - 2px), -50%) scale(calc(var(--mob-scale) * 0.32)); }
}

/* --- Coach-mark bubble -------------------------------------------------- */
.tut-coach {
    position: fixed;
    z-index: 4;
    pointer-events: auto;
    max-width: min(368px, 88vw);
    background: linear-gradient(160deg, rgba(0, 18, 6, 0.97), rgba(0, 6, 2, 0.98));
    border: 1px solid rgba(0, 255, 0, 0.55);
    border-radius: 8px;
    padding: 12px 14px 12px 24px; /* left room for the arc grip */
    color: #c8ffd0;
    box-shadow: 0 0 18px rgba(0, 255, 0, 0.35), 0 0 40px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.tut-coach.tut-coach-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, left 0.42s ease, top 0.42s ease;
}
/* Tower Option Card beats: snap coach placement — no slide fight with the draggable panel. */
body.cbd-tutorial-active.tut-allow-tower-card .tut-coach.tut-coach-in {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.tut-coach.tut-coach--dragging { cursor: grabbing; transition: none; }
.tut-coach.tut-coach--redirect {
    border-color: rgba(0, 255, 168, 0.82);
    box-shadow: 0 0 18px rgba(0, 255, 140, 0.5), 0 0 42px rgba(0, 34, 16, 0.76);
}
.tut-coach.tut-coach--nudge {
    animation: tutCoachNudge 0.2s ease-out 1;
}
.tut-coach.tut-coach--settle {
    border-color: rgba(125, 249, 255, 0.72);
    box-shadow: 0 0 18px rgba(0, 220, 255, 0.42), 0 0 40px rgba(0, 24, 12, 0.72);
}
@keyframes tutCoachNudge {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(-1px); }
    75%  { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

/* Concentric arc grip (shared "fingerprint DNA") = the drag affordance */
.tut-coach::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 16px;
    width: 12px;
    height: 28px;
    opacity: 0.5;
    pointer-events: none;
    background:
        radial-gradient(circle at 100% 50%, transparent 3px, #0f0 3px, #0f0 4px, transparent 4px),
        radial-gradient(circle at 100% 50%, transparent 6px, #0f0 6px, #0f0 7px, transparent 7px),
        radial-gradient(circle at 100% 50%, transparent 9px, #0f0 9px, #0f0 10px, transparent 10px);
}

.tut-coach__step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px 8px;
    font-size: 10px;
    letter-spacing: 2px;
    color: #00cc66;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 5px;
}
.tut-coach__meter {
    justify-self: start;
    min-width: 0;
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: 1.4px;
}
.tut-coach__drag {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 0, 0.28);
    border-radius: 4px;
    background: rgba(255, 255, 0, 0.06);
    color: #ffff00;
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.85px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.tut-coach__drag:hover {
    border-color: rgba(255, 255, 0, 0.48);
    background: rgba(255, 255, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.18);
}
.tut-coach__drag-glyph {
    opacity: 0.82;
    font-size: 9px;
    line-height: 1;
}
.tut-coach__drag-label {
    letter-spacing: 1px;
}
.tut-coach__tools {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.tut-coach button {
    cursor: pointer;
}
.tut-coach__skip-inline,
.tut-coach__back-inline {
    pointer-events: auto;
    background: #ff2a2a;
    color: white;
    border: 1px solid #ff2a2a;
    border-radius: 5px;
    padding: 3px 8px;
    font-family: var(--main-font, 'Courier Prime', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.tut-coach__back-inline {
    color: #7df9ff;
    border-color: rgba(125, 249, 255, 0.45);
}
.tut-coach__skip-inline:hover {
    color: #ff8888;
    border-color: rgba(255, 80, 80, 0.72);
    background: rgba(35, 0, 0, 0.62);
}
.tut-coach__back-inline:hover {
    color: #cfffff;
    border-color: rgba(125, 249, 255, 0.72);
    background: rgba(0, 48, 55, 0.62);
}
.tut-coach__title {
    font-size: 15px;
    font-weight: 700;
    color: #6dff8f;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
    margin: 0 0 6px;
    letter-spacing: 0.5px;
}
.tut-coach__body {
    font-size: 13px;
    line-height: 1.45;
    color: #b6ffc4;
    margin: 0 0 12px;
}
.tut-coach__body strong { color: #6dff8f; }

/* Live How-To term palette (inline styles in step copy override defaults) */
.tut-finish__sub strong,
#tutSkipConfirm strong { font-weight: 700; }

.tut-coach__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
}
.tut-coach__hint {
    font-size: 11px;
    color: #00cc66;
    opacity: 0.8;
    font-style: italic;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}
.tut-coach__next {
    flex: 0 0 auto;
    white-space: nowrap;
}
.tut-btn {
    font-family: var(--main-font, 'Courier Prime', monospace);
    background: rgba(0, 255, 0, 0.12);
    color: #6dff8f;
    border: 1px solid rgba(0, 255, 0, 0.6);
    border-radius: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s ease;
}
.tut-btn:hover {
    background: rgba(0, 255, 0, 0.28);
    border-color: #6dff8f;
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.55);
    transform: translateY(-1px);
}
.tut-btn--ghost {
    background: transparent;
    border-color: rgba(0, 255, 0, 0.3);
    color: #00cc66;
}
.tut-btn--ghost:hover { background: rgba(0, 255, 0, 0.1); box-shadow: none; }
.tut-coach__next--rescue {
    color: #7df9ff;
    border-color: rgba(125, 249, 255, 0.72);
    background: rgba(0, 220, 255, 0.11);
}
.tut-coach__next--rescue:hover {
    border-color: #7df9ff;
    box-shadow: 0 0 14px rgba(0, 220, 255, 0.48);
}

/* Skip / exit affordance */
.tut-skip {
    display: none;
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 5;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.5);
    color: #00cc66;
    border: 1px solid rgba(0, 255, 0, 0.35);
    border-radius: 5px;
    padding: 5px 12px;
    font-family: var(--main-font, 'Courier Prime', monospace);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s ease;
}
.tut-skip:hover { color: #ff8888; border-color: rgba(255, 80, 80, 0.6); background: rgba(40, 0, 0, 0.5); }

/* ==========================================================================
   FINISH / CELEBRATION SCREEN
   ========================================================================== */
#tutFinish,
#tutIntro,
#tutSkipConfirm {
    position: fixed;
    inset: 0;
    z-index: 13200;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: auto;
    font-family: var(--main-font, 'Courier Prime', monospace);
    transition: opacity 0.2s ease, display 0.2s allow-discrete;
    transition-behavior: allow-discrete;
}

#tutFinish,
#tutSkipConfirm {
    background:
        radial-gradient(ellipse 58% 54% at 50% 48%, rgba(0, 34, 10, 0.34) 0%, rgba(0, 8, 2, 0.82) 52%, rgba(0, 0, 0, 0.97) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.82));
    backdrop-filter: blur(16px) saturate(0.92) brightness(0.46);
    -webkit-backdrop-filter: blur(16px) saturate(0.92) brightness(0.46);
}

#tutIntro {
    background:
        radial-gradient(ellipse 70% 58% at 50% 44%, rgba(0, 42, 14, 0.44) 0%, rgba(0, 12, 3, 0.74) 58%, rgba(0, 0, 0, 0.9) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.34));
    backdrop-filter: blur(3px) saturate(1.08) brightness(0.86);
    -webkit-backdrop-filter: blur(3px) saturate(1.08) brightness(0.86);
}
#tutIntro.tut-handoff {
    opacity: 1;
}

#tutFinish.tut-active,
#tutIntro.tut-active,
#tutSkipConfirm.tut-active {
    display: flex;
    opacity: 1;
}

body:has(#tutFinish.tut-active) .modal-overlay,
body:has(#tutIntro.tut-active) .modal-overlay,
body:has(#tutSkipConfirm.tut-active) .modal-overlay,
body:has(#tutFinish.tut-active) #welcomeScreen,
body:has(#tutSkipConfirm.tut-active) #welcomeScreen {
    backdrop-filter: var(--modal-panel-backdrop, none) !important;
    -webkit-backdrop-filter: var(--modal-panel-backdrop, none) !important;
}

@starting-style {
    #tutFinish.tut-active,
    #tutIntro.tut-active,
    #tutSkipConfirm.tut-active {
        opacity: 0;
    }
}

.tut-intro__title {
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 700;
    color: #6dff8f;
    text-shadow: 0 2px 0 rgba(0, 10, 2, 0.9), 0 0 14px rgba(0, 255, 0, 0.7), 0 0 34px rgba(0, 255, 0, 0.28);
    letter-spacing: 3px;
    margin: 0 0 12px;
}
.tut-intro__live-word,
.tut-intro__play-word {
    position: relative;
    display: inline-block;
}
.tut-intro__rec-dot {
    position: absolute;
    top: -4px;
    right: -14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff2a2a;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.9), 0 0 18px rgba(255, 0, 0, 0.45);
    animation: tutRecDot 1.45s ease-in-out infinite;
}
@keyframes tutRecDot {
    0%, 100% { opacity: 0.45; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1.12); }
}
.tut-finish__panel {
    text-align: center;
    padding: 30px 34px 22px;
    max-width: min(440px, 86vw);
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    background: linear-gradient(160deg, rgba(0, 18, 6, 0.98), rgba(0, 6, 2, 0.98));
    border: 1px solid rgba(0, 255, 0, 0.58);
    border-radius: 8px;
    box-shadow: 0 0 24px rgba(0, 255, 0, 0.35), 0 0 80px rgba(0, 0, 0, 0.72);
}
.tut-skip-confirm__panel {
    width: min(430px, 86vw);
    padding: 26px 30px 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(160deg, rgba(0, 18, 6, 0.98), rgba(0, 6, 2, 0.98));
    border: 1px solid rgba(0, 255, 0, 0.58);
    border-radius: 8px;
    box-shadow: 0 0 24px rgba(0, 255, 0, 0.35), 0 0 80px rgba(0, 0, 0, 0.72);
    transform: scale(0.94);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
#tutIntro.tut-active .tut-finish__panel,
#tutSkipConfirm.tut-active .tut-skip-confirm__panel {
    opacity: 1;
    transform: scale(1);
}
.tut-skip-confirm__panel h2 {
    color: #6dff8f;
    font-size: 24px;
    letter-spacing: 2px;
    margin: 0 0 8px;
    text-shadow: 0 0 14px rgba(0, 255, 0, 0.65);
}
.tut-skip-confirm__panel > p {
    color: #b6ffc4;
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 18px;
}
.tut-finish__panel .modal-outside-hint,
.tut-skip-confirm__panel .modal-outside-hint {
    margin-top: 14px;
    font-size: 10px;
    letter-spacing: 1.2px;
    color: rgba(0, 204, 102, 0.62);
    opacity: 0.85;
}
#tutFinish.tut-active .tut-finish__panel { opacity: 1; transform: scale(1); }
.tut-finish__yay {
    font-size: clamp(34px, 9vw, 60px);
    font-weight: 700;
    color: #6dff8f;
    text-shadow: 0 0 18px rgba(0, 255, 0, 0.8), 0 0 50px rgba(0, 255, 0, 0.4);
    letter-spacing: 4px;
    margin: 0 0 8px;
    animation: tutYayPop 0.6s cubic-bezier(0.22, 1.6, 0.36, 1) both;
}
@keyframes tutYayPop {
    0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.tut-finish__sub {
    font-size: 14px;
    color: #b6ffc4;
    line-height: 1.5;
    padding: 0 5px 20px;
}
.tut-finish__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.tut-finish__actions .tut-btn { padding: 10px 16px; font-size: 13px; }

@media (max-width: 640px) {
    .tut-coach {
        max-width: 94vw;
        padding: 10px 10px 10px 20px;
    }
    .tut-coach__step {
        gap: 4px 5px;
    }
    .tut-coach__meter {
        font-size: 7px;
        letter-spacing: 1px;
    }
    .tut-coach__tools {
        gap: 4px;
    }
    .tut-coach__drag {
        font-size: 7px;
        padding: 2px 6px;
        gap: 3px;
        letter-spacing: 0.6px;
    }
    .tut-coach__drag-glyph { font-size: 7px; }
    .tut-coach__skip-inline,
    .tut-coach__back-inline {
        padding: 2px 5px;
        font-size: 7px;
        letter-spacing: 0.5px;
    }
}