/*
 * tutorial.css — First-visit Lobby walkthrough overlay (js/tutorial.js).
 * Appended straight to <body>, so it's styled standalone rather than
 * inheriting any page's own layout — but reuses the same tan-panel/
 * dark-brown-text convention as every ui-modal in the app so it still reads
 * as part of the same UI language, not a bolted-on dark overlay.
 */

#tut-overlay {
    position: fixed; inset: 0; z-index: 10000;
    opacity: 0; transition: opacity .35s ease;
    font-family: var(--font-body);
}
#tut-backdrop {
    position: absolute; inset: 0; background: rgba(10,5,2,.82);
    transition: background .5s ease; pointer-events: auto;
}
#tut-spotlight {
    position: absolute; border-radius: 12px; opacity: 0; pointer-events: none;
    transition: left .5s cubic-bezier(.22,1,.36,1), top .5s cubic-bezier(.22,1,.36,1),
                width .5s cubic-bezier(.22,1,.36,1), height .5s cubic-bezier(.22,1,.36,1),
                box-shadow .5s ease, opacity .4s ease;
}

#tut-callout {
    position: absolute;
    width: min(420px, calc(100vw - 32px));
    border-style: solid; border-width: 20px;
    border-image-source: url('../bg/UI/Sprite sheets/field_bg_input.png');
    border-image-slice: 16 fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
    padding: 18px 18px 14px;
    color: #3a2410;
    transition: left .5s cubic-bezier(.22,1,.36,1), top .5s cubic-bezier(.22,1,.36,1), opacity .18s ease;
    animation: tut-appear .35s cubic-bezier(.22,1,.36,1);
}
#tut-callout.tut-arrow-up::after {
    content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
    border: 8px solid transparent; border-top-color: var(--tut-arrow-color, #c8641a);
}

.tut-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tut-phase { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 3px; font-weight: 800; opacity: .85; }
.tut-phase-bar { width: 3px; height: 16px; border-radius: 2px; display: inline-block; }
.tut-skip { font-size: 10.5px; letter-spacing: 1.5px; color: #8a6a48; cursor: pointer; font-family: var(--font-mono); }
.tut-skip:hover { color: #a3291d; }

.tut-title { font-size: 15px; font-weight: 800; color: #2c1a08; letter-spacing: .5px; margin-bottom: 10px; line-height: 1.3; }
.tut-body { font-size: 12px; color: #6b4520; line-height: 1.6; margin-bottom: 8px; }
.tut-sub { font-size: 12.5px; color: #8a6a48; line-height: 1.5; padding-top: 8px; border-top: 1px solid rgba(58,36,16,.15); margin-bottom: 12px; }

.tut-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tut-dots { display: flex; align-items: center; gap: 5px; }
.tut-dot { height: 6px; border-radius: 3px; transition: width .3s, background .3s; }
.tut-counter { text-align: right; margin-top: 8px; font-size: 10.5px; color: rgba(58,36,16,.4); font-family: var(--font-mono); letter-spacing: 1px; }

@keyframes tut-appear {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}