/* Tutorial overlay — narration dialog, coach marks, dim/spotlight, zone
   labels, token slideshow, and the first-run offer modal. Layer stack (all
   inside #tutorial-overlay, fixed): dim 2000 < highlighted board elements
   2005 < labels 2010 < tokens 2015 < dialog 2020 < arrows 2030. */

#tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    font-family: 'HwyGothic', sans-serif;
}

/* ── dim layer (gameplay script steps) ───────────────────────── */

#tut-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* ── zone demo ghost cards ───────────────────────────────────
   Body-level layer (NOT inside #tutorial-overlay): the overlay is one
   stacking context at z 2000, so anything inside it paints under zones
   lifted by .tut-highlight (2005). The ghosts must show INSIDE those
   highlighted zones, hence the sibling layer just above them. */
#tut-demos {
    position: fixed;
    inset: 0;
    z-index: 2006;
    pointer-events: none;
}
.tut-demo-card {
    position: absolute;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 191, 0, 0.3);
    opacity: 0;
    animation: tut-demo-card 4.2s ease-in-out forwards;
}
/* Tops out below full opacity so the examples read as ghosts, not real plays. */
@keyframes tut-demo-card {
    0% { opacity: 0; transform: translateY(12px) scale(0.94); }
    15% { opacity: 0.92; transform: translateY(0) scale(1); }
    78% { opacity: 0.92; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

/* In-DOM Loop demo cards: full .game-card markup inside #loop-zone, so they
   size and stack exactly like real plays. Entrance mimics a card gliding in
   from the hand; .tut-demo-loop-out is the resolve-away fade. */
.tut-demo-loop {
    pointer-events: none;
    animation: tut-demo-loop-in 0.45s ease-out;
}
@keyframes tut-demo-loop-in {
    from { opacity: 0; transform: translateY(26px) scale(0.85); }
    to { opacity: 1; transform: none; }
}
.tut-demo-loop-out {
    opacity: 0 !important;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Big glowing arrow over the log area pointing down at the ACTIVE EFFECTS
   panel (the panel's own box glow is trapped inside the left panel's
   stacking context, so this lives in the overlay instead). The tip rests
   just above the panel; the shaft reaches up over the logs. */
#tut-effects-arrow {
    position: absolute;
    width: 58px;
    height: 88px;
    transform: translate(-50%, -100%);
    z-index: 2035;
    pointer-events: none;
    background: linear-gradient(180deg, #ffe9ae, #ffbf00);
    clip-path: polygon(34% 0, 66% 0, 66% 52%, 100% 52%, 50% 100%, 0 52%, 34% 52%);
    filter: drop-shadow(0 0 10px rgba(255, 191, 0, 0.9)) drop-shadow(0 0 28px rgba(255, 191, 0, 0.45));
    animation: tut-effects-arrow-bob 1.1s ease-in-out infinite alternate;
}
@keyframes tut-effects-arrow-bob {
    from { transform: translate(-50%, -100%) translateY(-9px); }
    to { transform: translate(-50%, -100%) translateY(5px); }
}

/* Space-sweep glow (zones-5): one column of spaces at a time lights up,
   left to right. Transition makes the hand-off between columns smooth. */
body.tutorial-active .field-space { transition: box-shadow 0.5s ease; }
.field-space.tut-space-glow {
    box-shadow: 0 0 0 3px #ffbf00, 0 0 24px 8px rgba(255, 191, 0, 0.5);
    border-radius: 6px;
}

/* Highlighted board elements rise above the dim and glow. */
.tut-highlight {
    position: relative;
    z-index: 2005 !important;
    box-shadow: 0 0 0 3px #ffbf00, 0 0 22px 6px rgba(255, 191, 0, 0.55) !important;
    border-radius: 6px;
}

/* The tour's tappable chrome elements show a pointer. */
.tut-tappable { cursor: pointer; }

/* ── zone labels + coach-mark arrows ─────────────────────────── */

#tut-labels { position: absolute; inset: 0; z-index: 2010; pointer-events: none; }
#tut-spinners { position: absolute; inset: 0; z-index: 2008; pointer-events: none; }
#tut-arrows { position: absolute; inset: 0; z-index: 2030; pointer-events: none; }

/* Highlight around the zone a UI-tour step is describing: a steady shiny
   gold border with one soft glint slowly rolling around it. The container is
   masked down to a border band; the glint is an oversized conic-gradient
   square child (sized by JS to cover the diagonal) doing a real
   transform-rotate, which stays buttery-smooth in every browser. */
.tut-zone-spinner {
    position: absolute;
    border-radius: 18px;
    padding: 7px;
    overflow: hidden;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 14px rgba(255, 191, 0, 0.85)) drop-shadow(0 0 30px rgba(255, 191, 0, 0.35));
}
.tut-zone-spinner-sweep {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Mostly solid gold, so the border always reads as a shiny box; the
       narrow white-hot wedge is the rolling shine. */
    background: conic-gradient(
        #ffbf00 0deg 318deg,
        #ffdf80 330deg,
        #fff8e0 339deg,
        #ffdf80 348deg,
        #ffbf00 360deg);
    animation: tut-zone-sweep 12s linear infinite;
}
@keyframes tut-zone-sweep {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.tut-zone-tag {
    position: absolute;
    transform: translateX(-50%);
    min-width: 150px;
    max-width: 300px;
    padding: 9px 18px;
    background: linear-gradient(180deg, #2b2113, #171208);
    border: 2px solid #ffbf00;
    border-radius: 8px;
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tut-caret-down, .tut-caret-up {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    animation: tut-bob 1.1s ease-in-out infinite alternate;
}
.tut-caret-down { border-top: 15px solid #ffbf00; }
.tut-caret-up { border-bottom: 15px solid #ffbf00; }

@keyframes tut-bob {
    from { transform: translateY(-4px); }
    to { transform: translateY(4px); }
}

/* Pulsing glow on the PASS/ACTIVATE button when a step requires pressing
   it — a breathing gold ring on the button element itself (box-shadow, so
   no stacking-context games). */
.tut-pulse-btn {
    animation: tut-btn-glow 1.1s ease-in-out infinite alternate;
}
@keyframes tut-btn-glow {
    from { box-shadow: 0 0 0 2px #ffbf00, 0 0 10px 2px rgba(255, 191, 0, 0.45); }
    to { box-shadow: 0 0 0 4px #ffbf00, 0 0 26px 8px rgba(255, 191, 0, 0.9); }
}

/* Pulsing "tap me" ring on the step's must-tap element. */
.tut-pulse-ring, .tut-pulse-halo {
    position: absolute;
    border-radius: 14px;
    pointer-events: none;
}
.tut-pulse-ring {
    border: 4px solid #fbbf24;
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.9);
    animation: tut-pulse-ring 2.6s ease-in-out infinite alternate;
}
.tut-pulse-halo {
    border: 3px solid #fcd34d;
    animation: tut-pulse-halo 2.6s ease-in-out infinite alternate;
}
@keyframes tut-pulse-ring {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(1.1); opacity: 1; }
}
@keyframes tut-pulse-halo {
    from { transform: scale(1.05); opacity: 0.55; }
    to { transform: scale(1.5); opacity: 0.05; }
}

/* ── narration dialog ────────────────────────────────────────── */

#tut-dialog {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 24px));
    z-index: 2020;
    pointer-events: auto;
}
.tut-dialog-top { top: 12px; }
.tut-dialog-middle { top: 50%; transform: translate(-50%, -50%); }
/* Nudged below center — for steps whose subject (e.g. the graveyard pile)
   sits at mid-board height and would touch a centered dialog. */
.tut-dialog-middle-low { top: 62%; transform: translate(-50%, -50%); }
.tut-dialog-bottom { bottom: 16px; }
/* top set inline by positionDialog() — tracks the measured Loop zone */
.tut-dialog-below-loop { top: 50%; }

/* The in-game settings modal normally sits at z 6000, above the tutorial
   overlay. During the UI tour it drops just below it so the "close it with X"
   narrator box and the pulse ring on the X stay visible (the tutorial overlay
   is pointer-events: none, so the modal stays fully clickable). */
body.tutorial-ui-tour .game-settings-overlay { z-index: 1995; }

.tut-dialog-frame {
    position: relative;
    background: linear-gradient(180deg, rgba(24, 19, 8, 0.97), rgba(10, 8, 3, 0.97));
    border: 2px solid #ffbf00;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 18px rgba(255, 191, 0, 0.25);
    padding: 18px 18px 14px 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tut-blocked-shake { animation: tut-shake 0.3s ease-in-out; }
@keyframes tut-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.tut-avatar-wrap {
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffbf00;
    box-shadow: 0 0 12px rgba(255, 191, 0, 0.4);
    background: #000;
}
#tut-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

.tut-dialog-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

#tut-image { width: 100%; max-height: 160px; object-fit: contain; }

#tut-cards { display: flex; justify-content: center; gap: 12px; }
.tut-card-img { width: 94px; height: 134px; object-fit: contain; border-radius: 6px; }

#tut-say {
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: pre-wrap;
}

#tut-next {
    align-self: flex-end;
    min-width: 120px;
    padding: 8px 22px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
}

#tut-exit {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #666;
    background: #191919;
    color: #aaa;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
#tut-exit:hover { border-color: #ffbf00; color: #ffbf00; }

/* ── first-run offer modal ───────────────────────────────────── */

#tut-firstrun-modal,
#tut-voice-splash,
#tut-exit-confirm {
    position: fixed;
    inset: 0;
    z-index: 2050;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'HwyGothic', sans-serif;
}
.tut-firstrun-box {
    width: min(420px, calc(100vw - 32px));
    background: linear-gradient(180deg, #1c160a, #0c0904);
    border: 2px solid #ffbf00;
    border-radius: 14px;
    box-shadow: 0 14px 60px rgba(0, 0, 0, 0.9);
    padding: 26px 24px 22px 24px;
    text-align: center;
}
.tut-firstrun-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2px solid #ffbf00;
    object-fit: cover;
    margin-bottom: 10px;
}
.tut-firstrun-box h2 {
    color: #ffbf00;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
}
.tut-firstrun-box p { color: #ddd; margin: 0 0 18px 0; line-height: 1.4; }
.tut-firstrun-actions { display: flex; gap: 12px; justify-content: center; }
.tut-firstrun-actions button { min-width: 110px; padding: 10px 18px; cursor: pointer; }

/* ── in-play-menu tutorials view (#play-tutorials on /play) ──────
   Reuses the /tutorials item styles, but as five stacked horizontal bars
   (the play.html cards carry the featured-bar markup: text stack + chevron)
   that split the menu panel height evenly. Anchors have no href (they call
   ScaleGame.startTutorial) so give them the pointer. */
#play-tutorials {
    font-family: 'HwyGothic', sans-serif;
    /* Fill the stretched desktop menu panel so the bars have height to split. */
    flex: 1 1 auto;
    min-height: 0;
}
#play-tutorials .play-view-header { flex-shrink: 0; }
#play-tutorials .tutorials-featured,
#play-tutorials .tutorials-card { cursor: pointer; }

/* Flatten the 2x2 grid wrapper so all five bars are direct flex children of
   the view: they share its height evenly (equal flex basis) with the view's
   uniform 10px gap between every pair. */
#play-tutorials .tutorials-grid { display: contents; }

#play-tutorials .tutorials-featured,
#play-tutorials .tutorials-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 22px;
    margin-bottom: 0;
    text-align: left;
    flex: 1 1 0;
    /* Bars stay tappable on short viewports; the panel scrolls if they can't fit. */
    min-height: 60px;
}

/* The base rules place name/desc for the /tutorials 2-row grid card
   (block-axis end/start); inside these flex-column text stacks that axis is
   horizontal and would right-align the name, so pin both to the left. */
#play-tutorials .tutorials-item-name,
#play-tutorials .tutorials-item-desc { align-self: flex-start; }

/* ── /tutorials menu page ────────────────────────────────────── */

/* No scrolling on this page: the footer is pinned to the viewport bottom and
   the panel sits near the top, clear of the action bar. */
.tutorials-body { overflow: hidden; }
.tutorials-body footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0e0e0e;
    z-index: 50;
}
/* Fixed-position the content band so the offsets are exact regardless of
   main's global 140px margin: it starts 30px below the action bar (header
   70px + action bar 70px, both fixed) and ends at the fixed footer. Nothing
   in a fixed band can introduce page scroll. */
.tutorials-viewport {
    position: fixed;
    top: 170px;
    bottom: 56px;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 20px;
    overflow: hidden;
}

/* A floating panel with no dead space past its content. */
.tutorials-page {
    margin: 0 auto;
    width: min(860px, calc(100% - 40px));
    padding: 20px 24px;
    background:
        radial-gradient(700px 320px at 50% -60px, rgba(255, 191, 0, 0.08), transparent 70%),
        linear-gradient(180deg, #16120a, #0d0b05);
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    font-family: 'HwyGothic', sans-serif;
}
.tutorials-panel { width: 100%; }

.tutorials-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 191, 0, 0.7);
    object-fit: cover;
    background: #000;
    flex-shrink: 0;
}
.tutorials-avatar-lg { width: 72px; height: 72px; }

/* Featured "start here" card */
.tutorials-featured {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 22px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(46, 36, 14, 0.95), rgba(16, 13, 5, 0.95));
    border: 2px solid rgba(255, 191, 0, 0.75);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.tutorials-featured-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tutorials-item-tag {
    color: #ffbf00;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}
.tutorials-item-go { color: rgba(255, 191, 0, 0.7); font-size: 20px; }

/* Even 2x2 grid for the four game tutorials — horizontal cards keep the
   rows short so the whole page fits one viewport. */
.tutorials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.tutorials-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 3px;
    align-items: center;
    text-align: left;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(28, 23, 10, 0.95), rgba(13, 11, 4, 0.95));
    border: 2px solid rgba(255, 191, 0, 0.4);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.tutorials-card .tutorials-avatar { grid-row: 1 / span 2; }
.tutorials-featured:hover,
.tutorials-card:hover {
    border-color: #ffbf00;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 191, 0, 0.25);
}
.tutorials-item-name {
    color: #fff;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 2px;
    align-self: end;
}
.tutorials-item-desc { color: #b9b9b9; font-size: 12.5px; line-height: 1.4; align-self: start; }

@media only screen and ((max-width: 767px) or (hover: none)) {
    .tutorials-grid { grid-template-columns: 1fr; }
    /* Single-column stacks outgrow a phone viewport — let it scroll there. */
    .tutorials-body { overflow: auto; }
    .tutorials-body footer { position: static; }
    .tutorials-viewport {
        position: static;
        overflow: visible;
        padding: 30px 16px 26px 16px;
    }
}

/* ── in-tutorial chrome hiding ───────────────────────────────
   During any tutorial: no move timer, no concede, no chat, no report,
   and no hover-inspect tooltips (mobile hides the same chrome). */

body.tutorial-active #prompt-timer,
body.tutorial-active #mobile-hud-timer,
body.tutorial-active #desktop-resign,
body.tutorial-active #mobile-hud-resign,
body.tutorial-active #opp-report-btn {
    display: none !important;
}

/* Chat stays hidden during scripted tutorials (mobile hides it too). The
   card preview box stays VISIBLE in every tutorial — the gameplay script
   says "tap the CANCEL in your hand to read it", so hiding the preview
   (the old mobile-parity behavior) made that step impossible to follow. */
body.tutorial-active:not(.tutorial-ui-tour) #game-tab-chat,
body.tutorial-active:not(.tutorial-ui-tour) #game-pane-chat,
body.tutorial-active:not(.tutorial-ui-tour) #mob-btn-chat {
    display: none !important;
}

/* Lift the preview above the gameplay dim so the card is actually readable. */
body.tutorial-active .card-inspect-box {
    position: relative;
    z-index: 2005;
}