/* Snapshot entry modal — overlay + card. Add-only; scoped class names won't
   collide with existing board styles. Tune colors to match your theme. */

.snapshot-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
}

.snapshot-modal {
    width: min(420px, 90vw);
    padding: 28px 26px 20px;
    border-radius: 16px;
    background: #1c1a17;
    border: 1px solid rgba(212, 175, 90, 0.35);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    text-align: center;
    color: #efe9dc;
}

.snapshot-modal__title {
    margin: 0 0 4px;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: #d4af5a;
}

.snapshot-modal__subtitle {
    margin: 0 0 20px;
    font-size: 0.9rem;
    opacity: 0.75;
}

.snapshot-modal__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.snapshot-modal__btn {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 90, 0.3);
    background: #262320;
    color: #efe9dc;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}

    .snapshot-modal__btn:hover {
        border-color: #d4af5a;
        background: #2e2a25;
    }

    .snapshot-modal__btn:active {
        transform: translateY(1px);
    }

.snapshot-modal__btn-title {
    font-size: 1.02rem;
    font-weight: 600;
    color: #d4af5a;
}

.snapshot-modal__btn-desc {
    font-size: 0.82rem;
    opacity: 0.75;
}

.snapshot-modal__cancel {
    margin-top: 4px;
    background: none;
    border: none;
    color: #b7ae9c;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.8;
}

    .snapshot-modal__cancel:hover {
        opacity: 1;
    }

/* View-only "Play this position" button (shown after Cancel). */
.snapshot-viewonly-play {
    margin-left: auto;
    margin-right: auto;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #d4af5a;
    background: rgba(212, 175, 90, 0.15);
    color: #d4af5a;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

    .snapshot-viewonly-play:hover {
        background: rgba(212, 175, 90, 0.28);
    }

/* View-only teaching panel — right column. Add-only; scoped class names. */

.snap-teach {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 340px;
    color: #efe9dc;
}

.snap-teach__card {
    padding: 18px 18px 16px;
    border-radius: 12px;
    background: #1c1a17;
    border: 1px solid rgba(212, 175, 90, 0.25);
}

.snap-teach__card--cta {
    border-color: rgba(212, 175, 90, 0.45);
    text-align: center;
}

.snap-teach__card--specter {
    border-color: rgba(140, 160, 210, 0.45); /* cool tint to echo specter feel */
    background: #191b20;
}

.snap-teach__icon {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.snap-teach__title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #d4af5a;
    letter-spacing: 0.01em;
}

.snap-teach__card--specter .snap-teach__title {
    color: #aebbe0;
}

.snap-teach__body {
    margin: 0 0 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
}

    .snap-teach__body:last-of-type {
        margin-bottom: 0;
    }

.snap-teach__hint {
    margin: 10px 0 0;
    font-size: 0.8rem;
    opacity: 0.6;
    font-style: italic;
}

.snap-teach__play {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #d4af5a;
    background: rgba(212, 175, 90, 0.14);
    color: #d4af5a;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .snap-teach__play:hover {
        background: rgba(212, 175, 90, 0.26);
    }

/* Persistent "Learn more" stack — collapsible cards. Add-only; scoped names. */

.snap-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 12px;
}

.snap-stack__card {
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 90, 0.22);
    background: #211e1a;
    overflow: hidden;
    transition: border-color 0.15s;
}

    .snap-stack__card.is-open {
        border-color: rgba(212, 175, 90, 0.5);
    }

.snap-stack__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: none;
    border: none;
    color: #d4af5a;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

    .snap-stack__header:hover {
        background: rgba(212, 175, 90, 0.08);
    }

.snap-stack__chevron {
    opacity: 0.7;
    font-size: 0.8rem;
    margin-left: 10px;
}

.snap-stack__body {
    padding: 4px 14px 14px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #efe9dc;
    opacity: 0.9;
    border-top: 1px solid rgba(212, 175, 90, 0.15);
}

    .snap-stack__body p {
        margin: 8px 0 0;
    }

        .snap-stack__body p:first-child {
            margin-top: 8px;
        }


/* Post-mate modal — celebratory, with mode choice + challenge escalation. */

.mate-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0,0,0,0.74);
    backdrop-filter: blur(2px);
}

.mate-modal {
    position: fixed;
    z-index: 61;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, 92vw);
    padding: 26px 26px 18px;
    border-radius: 16px;
    background: #1c1a17;
    border: 1px solid rgba(212,175,90,0.4);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    color: #efe9dc;
    text-align: center;
}

.mate-modal__trophy {
    font-size: 2.4rem;
    margin-bottom: 2px;
}

.mate-modal__title {
    margin: 0 0 6px;
    font-size: 1.4rem;
    color: #d4af5a;
}

.mate-modal__subtitle {
    margin: 0 0 18px;
    font-size: 0.92rem;
    opacity: 0.85;
    line-height: 1.5;
}

.mate-modal__next {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: #262320;
    border: 1px solid rgba(212,175,90,0.3);
}

.mate-modal__next-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
}

.mate-modal__next-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d4af5a;
}

.mate-modal__next-note {
    font-size: 0.8rem;
    opacity: 0.7;
}

.mate-modal__modes {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.mate-modal__mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid rgba(212,175,90,0.25);
    background: #211e1a;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

    .mate-modal__mode.is-selected {
        border-color: #d4af5a;
        background: #2e2a25;
    }

    .mate-modal__mode input {
        margin-right: 6px;
    }

.mate-modal__mode-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #d4af5a;
}

.mate-modal__mode-desc {
    font-size: 0.76rem;
    opacity: 0.72;
    line-height: 1.35;
}

.mate-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.mate-modal__btn {
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.mate-modal__btn--primary {
    background: #d4af5a;
    color: #1c1a17;
}

    .mate-modal__btn--primary:hover {
        background: #e0bd6e;
    }

.mate-modal__btn--secondary {
    background: transparent;
    border-color: rgba(212,175,90,0.4);
    color: #d4af5a;
}

    .mate-modal__btn--secondary:hover {
        background: rgba(212,175,90,0.12);
    }

.mate-modal__account {
    margin: 6px 0 4px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(212,175,90,0.08);
    border: 1px dashed rgba(212,175,90,0.3);
    font-size: 0.82rem;
    line-height: 1.5;
}

.mate-modal__account-text {
    opacity: 0.85;
}

.mate-modal__account-link {
    display: inline-block;
    margin-top: 6px;
    background: none;
    border: none;
    color: #d4af5a;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.mate-modal__dismiss {
    margin-top: 8px;
    background: none;
    border: none;
    color: #b7ae9c;
    font-size: 0.82rem;
    cursor: pointer;
    opacity: 0.75;
}

    .mate-modal__dismiss:hover {
        opacity: 1;
    }


/* Registered-player entry controls — difficulty dropdown + mode radios. */

.reg-entry {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reg-entry__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.reg-entry__label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.6;
    color: #efe9dc;
}

.reg-entry__select {
    padding: 11px 12px;
    border-radius: 9px;
    background: #211e1a;
    color: #efe9dc;
    border: 1px solid rgba(212,175,90,0.35);
    font-size: 0.95rem;
    cursor: pointer;
}

    .reg-entry__select:focus {
        outline: none;
        border-color: #d4af5a;
    }

.reg-entry__modes {
    display: flex;
    gap: 10px;
}

.reg-entry__mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 10px;
    border-radius: 9px;
    cursor: pointer;
    border: 1px solid rgba(212,175,90,0.25);
    background: #211e1a;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

    .reg-entry__mode.is-selected {
        border-color: #d4af5a;
        background: #2e2a25;
    }

    .reg-entry__mode input {
        margin-right: 5px;
    }

.reg-entry__mode-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #d4af5a;
}

.reg-entry__mode-desc {
    font-size: 0.75rem;
    opacity: 0.72;
    line-height: 1.3;
}

.reg-entry__start {
    padding: 13px 16px;
    border-radius: 10px;
    background: #d4af5a;
    color: #1c1a17;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

    .reg-entry__start:hover {
        background: #e0bd6e;
    }

/* ============================================================
   Snapshot / Scenario creation card
   Styles the EXISTING classes in CreateSnapshot component only.
   ============================================================ */

.snapshot-card {
    --sc-bg: #1f1f24;
    --sc-bg-raised: #26262d;
    --sc-border: #34343d;
    --sc-text: #e8e8ec;
    --sc-text-muted: #9a9aa6;
    --sc-accent: #7c5cff;
    --sc-accent-hover: #8f72ff;
    --sc-danger-bg: #3a1f24;
    --sc-danger-border: #6e2b34;
    --sc-danger-text: #ff9aa6;
    --sc-ok-bg: #1e2e26;
    --sc-ok-border: #2f5a44;
    --sc-ok-text: #8fe0b4;
    --sc-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 20px;
    color: var(--sc-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

    .snapshot-card *,
    .snapshot-card *::before,
    .snapshot-card *::after {
        box-sizing: border-box;
    }

/* ---------- Header ---------- */

.snapshot-card__header h4 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--sc-text);
}

.snapshot-card__header p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--sc-text-muted);
}

/* ---------- Body layout ---------- */

.snapshot-card__body {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------- Labels ---------- */

.snapshot-card__label {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sc-text-muted);
}

    .snapshot-card__label:first-child {
        margin-top: 0;
    }

/* ---------- Inputs ---------- */

.snapshot-card__input,
.snapshot-card__textarea {
    width: 100%;
    background: var(--sc-bg-raised);
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--sc-text);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .snapshot-card__input::placeholder,
    .snapshot-card__textarea::placeholder {
        color: #6c6c78;
    }

    .snapshot-card__input:focus,
    .snapshot-card__textarea:focus {
        outline: none;
        border-color: var(--sc-accent);
        box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25);
    }

.snapshot-card__textarea {
    min-height: 80px;
    resize: vertical;
}

/* ---------- Feedback messages ---------- */

.snapshot-card__error {
    margin-top: 4px;
    padding: 9px 11px;
    background: var(--sc-danger-bg);
    border: 1px solid var(--sc-danger-border);
    border-radius: 8px;
    color: var(--sc-danger-text);
    font-size: 0.82rem;
    line-height: 1.4;
}

.snapshot-card__status {
    margin-top: 4px;
    padding: 9px 11px;
    background: var(--sc-ok-bg);
    border: 1px solid var(--sc-ok-border);
    border-radius: 8px;
    color: var(--sc-ok-text);
    font-size: 0.82rem;
    line-height: 1.4;
}

.snapshot-card__hint {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--sc-text-muted);
    font-style: italic;
}

/* ---------- Created state ---------- */

.snapshot-card__created {
    margin-top: 8px;
    padding: 14px;
    background: var(--sc-bg-raised);
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .snapshot-card__created strong {
        font-size: 0.95rem;
        font-weight: 650;
        color: var(--sc-text);
    }

.snapshot-card__link {
    width: 100%;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--sc-text-muted);
    font-size: 0.82rem;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
    cursor: text;
}

    .snapshot-card__link:focus {
        outline: none;
        border-color: var(--sc-accent);
        color: var(--sc-text);
    }

.snapshot-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Buttons (scoped to this card) ---------- */

.snapshot-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

    .snapshot-card .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.snapshot-card .btn-primary {
    background: var(--sc-accent);
    color: #fff;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 6px;
}

    .snapshot-card .btn-primary:not(:disabled):hover {
        background: var(--sc-accent-hover);
    }

.snapshot-card .btn-secondary {
    background: transparent;
    border-color: var(--sc-border);
    color: var(--sc-text);
}

    .snapshot-card .btn-secondary:not(:disabled):hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: #45454f;
    }

.snapshot-card .btn-light {
    background: transparent;
    color: var(--sc-text-muted);
}

    .snapshot-card .btn-light:not(:disabled):hover {
        background: rgba(255, 255, 255, 0.04);
        color: var(--sc-text);
    }




/* ===== Scenarios tab panel ===== */
.scenarios-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    overflow-y: auto;
    max-height: 460px; /* match your Moves/Chat panel height */
}

.scenarios-panel__status,
.scenarios-panel__empty {
    padding: 1.2rem 0.8rem;
    text-align: center;
    color: rgba(247, 234, 208, 0.45);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

    .scenarios-panel__empty strong {
        color: #d5a642;
    }

/* ===== Individual scenario card ===== */
.scenario-item {
    display: flex;
    /*    flex-direction: column;*/
    gap: 0.4rem;
    align-items: stretch;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(213, 166, 66, 0.18);
    border-radius: 8px;
    background: rgba(213, 166, 66, 0.04);
    transition: all 140ms ease;
}

.scenario-item__content {
    flex: 1;
    min-width: 0; /* lets text truncate instead of overflowing */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .scenario-item:hover {
        background: rgba(213, 166, 66, 0.08);
        border-color: rgba(213, 166, 66, 0.32);
    }

.scenario-item__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.scenario-item__title {
    color: #ffe8a0;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scenario-item__move {
    flex-shrink: 0;
    color: rgba(247, 234, 208, 0.5);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scenario-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: rgba(247, 234, 208, 0.45);
    font-size: 0.58rem;
    letter-spacing: 0.03em;
}

.scenario-item__leaderboard {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: #d5a642;
    font-weight: 600;
}

.scenario-item__thumb {
    flex-shrink: 0;
    width: 196px; 
    display: flex;
    align-items: center;
}

    .scenario-item__thumb img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        border: 1px solid rgba(213, 166, 66, 0.2);
        display: block;
    }

.scenario-item__no-solutions {
    color: rgba(247, 234, 208, 0.35);
    font-style: italic;
    font-weight: 400;
}

.scenario-item__actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.scenario-item__btn {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(213, 166, 66, 0.25);
    border-radius: 6px;
    background: transparent;
    color: rgba(247, 234, 208, 0.75);
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 140ms ease;
}

    .scenario-item__btn:hover {
        background: rgba(213, 166, 66, 0.12);
        border-color: rgba(213, 166, 66, 0.4);
        color: #ffe8a0;
    }

.move-scenario-eye {
    display: inline-flex;
    align-items: center;
    color: #d5a642;
    cursor: pointer;
    font-size: 0.85em;
    opacity: 0.72;
    padding: 0 3px;
    transition: all 140ms ease;
}

    .move-scenario-eye:hover {
        opacity: 1;
        transform: scale(1.2);
    }

.scenario-item--highlighted {
    border-color: #d5a642 !important;
    background: rgba(213, 166, 66, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(213, 166, 66, 0.4);
    animation: scenario-pulse 2s ease;
}

@keyframes scenario-pulse {
    0% {
        box-shadow: 0 0 0 2px rgba(213, 166, 66, 0.7);
    }

    100% {
        box-shadow: 0 0 0 1px rgba(213, 166, 66, 0.4);
    }
}

/* ── Landing hook: "You can't see their pieces..." ──
   Persists until the player's first move, then fades as the move animates. */
.fog-hook {
    position: absolute;
    top: 20.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;
    max-width: 46ch;
    padding: 0.9rem 1.4rem;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    line-height: 1.75;
    letter-spacing: 0.03em;
    color: #f7ead0;
    background: rgba(12, 10, 7, 0.82);
    border: 1px solid rgba(213, 166, 66, 0.35);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    pointer-events: none; /* never blocks a click on the board */

    animation: fog-hook-in 600ms ease-out both;
    transition: opacity 280ms ease, transform 280ms ease;
}

/* The last line is the call to action — let it carry the gold. */
.fog-hook__cta {
    display: block;
    margin-top: 0.5rem;
    color: #d5a642;
    font-weight: 700;
}

/* Applied the instant the player's first move begins. */
.fog-hook--dismissed {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.97);
}

@keyframes fog-hook-in {
    from {
        opacity: 0;
        transform: translate(-50%, -46%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fog-hook {
        animation: none;
    }

    .fog-hook--dismissed {
        transform: translate(-50%, -50%);
    }
}

.fog-hook__cta--new {
    animation: cta-arrive 520ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

@keyframes cta-arrive {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }

    60% {
        opacity: 1;
        transform: translateY(0) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fog-hook__cta--new {
    animation: cta-arrive 520ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both, cta-glow 1.2s ease-out 520ms 2;
}

@keyframes cta-glow {
    0%, 100% {
        text-shadow: none;
    }

    50% {
        text-shadow: 0 0 12px rgba(213, 166, 66, 0.8);
    }
}

.mental-model-panel {
    max-width: 414px;
    animation: mm-reveal 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes mm-reveal {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mental-model-panel {
        animation: mm-fade-only 400ms ease both;
    }
}

@keyframes mm-fade-only {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.bb-glyph--pulse {
    animation: glyph-pulse 900ms ease-out 3; /* 3 cycles, then settle */
}

@keyframes glyph-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(224, 106, 90, 0.7);
    }

    50% {
        transform: scale(1.6);
        box-shadow: 0 0 0 6px rgba(224, 106, 90, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(224, 106, 90, 0);
    }
}

/* The prediction panel — dormant, not arriving */
.prediction-panel--blur {
    filter: blur(9px);
}

.prediction-panel--locked {
    animation: pp-settle 1100ms ease-out both;
}

@keyframes pp-settle {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.prediction-lock-wrap {
    position: relative;
    max-width: 370px;
}

.prediction-lock {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 30%;
    gap: 0.5rem;
    pointer-events: none; /* board underneath stays inert anyway */
    animation: lock-tick 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.prediction-lock__icon {
    font-size: 1.1rem;
    color: rgba(213, 166, 66, 0.75);
}

.prediction-lock__text {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f7ead0;
    padding: 0.4rem 0.9rem;
    background: rgba(12, 10, 7, 0.78);
    border: 1px solid rgba(213, 166, 66, 0.4);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Fires each time the count changes — the tick is the whole mechanism. */
@keyframes lock-tick {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }

    65% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .prediction-lock {
        animation: none;
    }
}

.mm-caption {
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.7rem;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0.03em;
    color: #f7ead0;
    background: rgba(213, 166, 66, 0.08);
    border-left: 2px solid rgba(213, 166, 66, 0.5);
    border-radius: 4px;
    animation: mm-caption-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

@keyframes mm-caption-in {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-caption {
        animation: none;
    }
}

/* Amber dashed line — "blind spot", distinct from the yellow vision line. */
.blindspot-line {
    stroke: #e0902e; /* matches the ⚠ "AI never saw you" glyph */
    stroke-width: 2.5;
    stroke-dasharray: 7 6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(224, 144, 46, 0.6));
    animation: blindspot-crawl 600ms linear infinite;
}

@keyframes blindspot-crawl {
    to {
        stroke-dashoffset: -26;
    }
    /* dashes drift toward the panel */
}

/* Target glyph pulse — 3 cycles then stop (JS removes the class). */
.blindspot-target--pulse {
    animation: blindspot-pulse 900ms ease-out 3;
    transform-origin: center;
}

@keyframes blindspot-pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(224,144,46,0.9));
    }

    45% {
        transform: scale(1.8);
        filter: drop-shadow(0 0 6px rgba(224,144,46,0.9));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(224,144,46,0));
    }
}

@media (prefers-reduced-motion: reduce) {
    .blindspot-line {
        animation: none;
    }

    .blindspot-target--pulse {
        animation: none;
    }
}

.vision-teach {
    padding: 0.9rem 1.1rem;
    background: rgba(213, 166, 66, 0.06);
    border-left: 2px solid rgba(213, 166, 66, 0.5);
    border-radius: 6px;
    animation: vision-teach-in 200ms ease-out both;
}

.vision-teach__headline {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffe8a0;
    margin-bottom: 0.3rem;
}

.vision-teach__detail {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    line-height: 1.5;
    color: rgba(247, 234, 208, 0.85);
}

@keyframes vision-teach-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Specter the tooltip is asking about — pulses to link the words to the board.
   Amber (the "unknown/hidden" color), distinct from the yellow vision squares. */
.square--teach-specter::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none; /* tease only — no interaction */
    box-shadow: inset 0 0 0 3px rgba(224, 144, 46, 0.9);
    border-radius: 3px;
    animation: teach-specter-pulse 1.1s ease-in-out infinite;
}

@keyframes teach-specter-pulse {
    0%, 100% {
        box-shadow: inset 0 0 0 3px rgba(224, 144, 46, 0.35);
    }

    50% {
        box-shadow: inset 0 0 0 3px rgba(224, 144, 46, 0.95);
    }
}

/* ── Latest Brief: this turn's news. Highlighted — it's the loud one. ── */
.intel-brief {
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(213, 166, 66, 0.10);
    border-left: 3px solid var(--bb-gold, #d5a642);
    border-radius: 5px;
}

.intel-brief__label {
    font-family: 'Cinzel', serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(213, 166, 66, 0.7);
    margin-bottom: 3px;
}

.intel-brief__line {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #f7ead0;
    animation: intel-brief-in 320ms ease-out both;
}

@keyframes intel-brief-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Active Intelligence: standing facts. Quiet reference register. ── */
.intel-active {
    margin-bottom: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(213, 166, 66, 0.15);
}

.intel-active__label {
    font-family: 'Cinzel', serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 234, 208, 0.5);
    margin-bottom: 6px;
}

.intel-active__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.intel-active__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 3px 7px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    font-size: 0.74rem;
    /* new items slide in; existing ones stay put */
    animation: intel-active-in 300ms ease-out both;
}

@keyframes intel-active-in {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.intel-active__piece {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: rgba(247, 234, 208, 0.85);
}

.intel-active__where {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    color: rgba(213, 166, 66, 0.65);
    letter-spacing: 0.04em;
}

.scenario-complete {
    --gold: #d4a94a;
    --gold-bright: #f0c95f;
    --gold-dim: #8a7332;
    max-width: 420px;
    padding: 28px 32px;
    background: linear-gradient(180deg, #221a0b 0%, #16110a 100%);
    border: 1px solid #4a3d1c;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    color: #e8dcc0;
    font-family: Georgia, serif;
    text-align: center;
}

.scenario-complete__kudos {
    color: var(--gold-bright);
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 18px;
    line-height: 1.35;
}

.scenario-complete__reads {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 24px;
}

.scenario-complete__reads-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dim);
}

.scenario-complete__reads-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.scenario-complete__reads-sub {
    font-size: 12px;
    color: #9a8a6a;
}

.scenario-complete__vote-q {
    font-size: 13px;
    color: #cbb98a;
    margin: 0 0 10px;
}

.scenario-complete__vote-opts {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.vote-chip {
    flex: 1;
    padding: 9px 6px;
    background: transparent;
    border: 1px solid #4a3d1c;
    border-radius: 8px;
    color: #cbb98a;
    font-family: Georgia, serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.16s ease;
}

    .vote-chip:hover:not(:disabled) {
        border-color: var(--gold-bright);
        color: var(--gold-bright);
    }

.vote-chip--chosen {
    background: rgba(240,201,95,0.14);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    font-weight: 700;
}

.vote-chip:disabled {
    cursor: default;
    opacity: 0.75;
}

.vote-chip--chosen:disabled {
    opacity: 1;
}

.scenario-complete__vote-thanks {
    font-size: 12px;
    color: var(--gold-dim);
    margin: 10px 0 0;
}

.scenario-complete__paths {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
}

.path-btn {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #4a3d1c;
    background: transparent;
    color: #e8dcc0;
    font-family: Georgia, serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.16s ease;
}

    .path-btn:hover {
        border-color: var(--gold);
        color: var(--gold-bright);
    }

.path-btn--primary {
    background: linear-gradient(180deg, #d4a94a, #b8912f);
    border-color: var(--gold-bright);
    color: #1a1408;
    font-weight: 700;
}

    .path-btn--primary:hover {
        color: #1a1408;
        filter: brightness(1.08);
    }

.path-btn--upgrade {
    border-style: dashed;
    color: var(--gold);
}





















.scenario-browse {
    --gold: #d4a94a;
    --gold-bright: #f0c95f;
    --gold-dim: #8a7332;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
    font-family: Georgia, serif;
    color: #e8dcc0;
}

.scenario-browse__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.browse-sorts, .browse-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.browse-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #4a3d1c;
    background: transparent;
    color: #cbb98a;
    font-family: Georgia, serif;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.16s ease;
}

    .browse-chip:hover {
        border-color: var(--gold);
        color: var(--gold-bright);
    }

.browse-chip--active {
    background: rgba(240,201,95,0.14);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    font-weight: 700;
}

.scenario-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.scenario-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: linear-gradient(180deg, #221a0b 0%, #16110a 100%);
    border: 1px solid #4a3d1c;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

    .scenario-card:hover {
        border-color: var(--gold);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    }

.scenario-card__thumb {
    position: relative;
    aspect-ratio: 1;
    background: #0f0c07;
}

    .scenario-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.scenario-card__official {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--gold-bright);
    font-size: 15px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.scenario-card__body {
    padding: 12px 14px 14px;
}

.scenario-card__name {
    display: block;
    color: #e8dcc0;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scenario-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.scenario-card__diff {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.diff--tooeasy {
    color: #8fbf7a;
    border-color: rgba(143,191,122,0.35);
}

.diff--justright {
    color: var(--gold);
    border-color: rgba(212,169,74,0.35);
}

.diff--toohard {
    color: #d98b6a;
    border-color: rgba(217,139,106,0.35);
}

.diff--unrated {
    color: #7a6f58;
    border-color: rgba(122,111,88,0.3);
}

.scenario-card__plays {
    font-size: 11.5px;
    color: #8a7c60;
}

.browse-more {
    display: block;
    margin: 26px auto 0;
    padding: 11px 28px;
    background: transparent;
    border: 1px solid #4a3d1c;
    border-radius: 8px;
    color: #e8dcc0;
    font-family: Georgia, serif;
    font-size: 14px;
    cursor: pointer;
}

    .browse-more:hover {
        border-color: var(--gold);
        color: var(--gold-bright);
    }

.scenario-browse__status {
    text-align: center;
    color: #8a7c60;
    padding: 40px 0;
}

.scenario-complete__picker {
    margin: -2px 0 4px;
    padding: 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid #3a2f16;
    border-radius: 8px;
    animation: picker-in 0.22s ease;
}

@keyframes picker-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tighten the grid for the modal's narrower column */
.scenario-complete__picker .scenario-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.scenario-complete__picker .scenario-card__body {
    padding: 8px 9px 9px;
}

.scenario-complete__picker .scenario-card__name {
    font-size: 12px;
    margin-bottom: 4px;
}

.scenario-complete__picker .scenario-card__diff {
    font-size: 9px;
    padding: 2px 5px;
}

.scenario-complete__picker .scenario-card__plays {
    font-size: 10px;
}

/* The trigger button reads as "open" while expanded */
.path-btn--expanded {
    border-color: var(--gold);
    color: var(--gold-bright);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

@media (max-width: 480px) {
    .scenario-complete__picker .scenario-grid {
        grid-template-columns: 1fr;
    }
}