/* Mystery Predictor hero — page-specific bits.
 *
 * Inherits all chassis primitives (red marquee, dashed perforations,
 * footer ticker, hero-ledger, hero-headline) from cinema_map.css.
 * Only the Mystery-page-unique elements live here:
 *   - Purple ambient gradient on the page shell
 *   - Detective ledger micro-tweaks (red number glow on the headline)
 *   - Predictor scorecard (hit-rate donut ring + stat-list rows)
 *   - "?" Next-mystery stub (gold poster placeholder, predict CTA)
 *
 * Dark + light theme parity via the existing --cm-* tokens.
 */

/* ============================================================================
   PAGE SHELL — purple ambient gradient (mystery-flavored override of the
   Cinema DNA red ambient).
   ============================================================================ */

.mmm-page {
    background: radial-gradient(ellipse at top, #160a16 0%, #0a0b0d 50%), #0a0b0d;
    min-height: 100dvh;
    color: var(--cm-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-bs-theme="light"] .mmm-page {
    background: linear-gradient(135deg, #fbf5ff 0%, #f8fafc 50%, #ffffff 100%);
}

.mmm-page-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ============================================================================
   HEADLINE — red glow on the mystery count numeral
   ============================================================================ */

.mystery-hero-num {
    color: var(--cm-accent-red);
    text-shadow: 0 0 24px rgba(229, 9, 20, 0.4);
}

/* ============================================================================
   PREDICTOR SCORECARD — middle column
   ============================================================================ */

.mystery-hero-middle {
    /* Soft purple tint behind the scorecard, matching the Mystery design */
    background: linear-gradient(180deg, rgba(106, 58, 138, 0.08), transparent);
}

.mystery-hero-hitring-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.mystery-hero-hitring {
    flex: 0 0 auto;
}

.mystery-hero-hitring-num {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 24px;
    fill: var(--cm-text-primary);
    letter-spacing: 0.02em;
}

.mystery-hero-hitring-unit {
    font-size: 12px;
    fill: var(--cm-text-secondary);
}

.mystery-hero-hitring-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mystery-hero-hitring-counter {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 32px;
    line-height: 1;
    color: var(--cm-accent-gold);
    letter-spacing: 0.02em;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.27);
}

.mystery-hero-hitring-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--cm-text-secondary);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.mystery-hero-statlist {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.mystery-hero-statrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px dashed var(--cm-border);
    min-width: 0;
}

.mystery-hero-statrow:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.mystery-hero-statrow-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--cm-text-dim);
    letter-spacing: 0.2em;
    flex: 0 0 auto;
    text-transform: uppercase;
}

.mystery-hero-statrow-value {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 12px;
    text-align: right;
    flex: 1 1 auto;
}

.mystery-hero-statrow-value[data-accent="gold"]    { color: var(--cm-accent-gold);    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }
.mystery-hero-statrow-value[data-accent="glacier"] { color: var(--cm-accent-glacier); text-shadow: 0 0 8px rgba(169, 214, 229, 0.3); }
.mystery-hero-statrow-value[data-accent="red"]     { color: var(--cm-accent-red);    text-shadow: 0 0 8px rgba(229, 9, 20, 0.3); }
.mystery-hero-statrow-value[data-accent="ink"]     { color: var(--cm-text-primary); }

/* ============================================================================
   NEXT MYSTERY STUB — right column
   ============================================================================ */

.mystery-hero-stub {
    background: linear-gradient(180deg, rgba(229, 9, 20, 0.10), rgba(0, 0, 0, 0.4));
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.mystery-hero-stub-eyebrow {
    color: var(--cm-accent-red);
}

/* Unknown-movie poster placeholder. The SVG asset (300×450, 2:3) is
   shared with the upcoming-predictions and ticket-card grids, so the
   stub feels like a smaller version of those cards rather than a
   bespoke gold "?" treatment. Sized to a fixed 96×144 (still 2:3)
   and centered so the column doesn't grow on wide viewports. */
.mystery-hero-stub-poster {
    margin: 10px auto 0;
    width: 96px;
    height: 144px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 215, 0, 0.18);
}

.mystery-hero-stub-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mystery-hero-stub-date {
    margin-top: 8px;
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 22px;
    color: var(--cm-accent-gold);
    letter-spacing: 0.04em;
    line-height: 1;
}

.mystery-hero-stub-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--cm-text-secondary);
    letter-spacing: 0.2em;
    margin-top: 3px;
    text-transform: uppercase;
}

/* Per-franchise prediction rows. Replaces the previous single
   PREDICTING box + standalone CTA — each row is now its own link to
   the matching showing detail page, so when AMC, Regal, and
   Cinemark all run a mystery on the same Monday we surface their
   individual top picks side by side instead of hiding two of them. */
.mystery-hero-stub-venues {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mystery-hero-stub-venue {
    margin: 0;
    padding: 0;
}

.mystery-hero-stub-venue-link {
    display: block;
    padding: 6px 8px;
    border: 1px dashed rgba(255, 215, 0, 0.18);
    border-radius: 2px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 215, 0, 0.03);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.mystery-hero-stub-venue-link:hover,
.mystery-hero-stub-venue-link:focus-visible {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateX(1px);
    outline: none;
}

.mystery-hero-stub-venue-name {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    color: var(--cm-accent-glacier);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.mystery-hero-stub-venue-pick {
    margin-top: 2px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.mystery-hero-stub-venue-title {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 14px;
    color: var(--cm-text-primary);
    letter-spacing: 0.02em;
    line-height: 1.1;
    /* Clip long titles to a single line so 3-franchise stacks stay
       a predictable height. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.mystery-hero-stub-venue-conf {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--cm-accent-gold);
    letter-spacing: 0.15em;
    flex: 0 0 auto;
}

/* Empty-state stub when there's no upcoming mystery queued. */
.mystery-hero-stub-empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}

.mystery-hero-stub-empty-msg {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 22px;
    color: var(--cm-text-dim);
    letter-spacing: 0.04em;
}

.mystery-hero-stub-empty-sub {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--cm-text-dim);
    letter-spacing: 0.25em;
}

/* ============================================================================
   TICKET-CARD GRID — Past Mystery Movies, boarding-pass styling
   ============================================================================ */

.ticket-grid-section {
    margin-top: 4px;
}

.ticket-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 4px 16px;
}

.ticket-grid-filters,
.ticket-grid-sort {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Filter / sort chip — JetBrains-Mono uppercase pill with a dashed
   border that highlights in the chip's tone color when active. */
.ticket-grid-chip {
    padding: 6px 12px;
    border-radius: 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cm-text-secondary);
    background: transparent;
    border: 1px solid var(--cm-border);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ticket-grid-chip:hover {
    color: var(--cm-text-primary);
    border-color: var(--cm-text-secondary);
}

.ticket-grid-chip.is-active[data-tone="ink"]     { color: var(--cm-text-primary);  border-color: rgba(241, 245, 249, 0.4); background: rgba(241, 245, 249, 0.06); }
.ticket-grid-chip.is-active[data-tone="gold"]    { color: var(--cm-accent-gold);    border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.10); }
.ticket-grid-chip.is-active[data-tone="red"]     { color: var(--cm-accent-red);     border-color: rgba(229, 9, 20, 0.4); background: rgba(229, 9, 20, 0.10); }
.ticket-grid-chip.is-active[data-tone="glacier"] { color: var(--cm-accent-glacier); border-color: rgba(169, 214, 229, 0.4); background: rgba(169, 214, 229, 0.10); }

/* Sort chips default to gold tone when active (no data-tone). */
.ticket-grid-chip-sort.is-active {
    color: var(--cm-accent-gold);
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.10);
}

/* Auto-fill grid sized for 160px-min ticket cards. */
.ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.ticket-grid-empty {
    padding: 32px;
    text-align: center;
    color: var(--cm-text-dim);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
}

/* One ticket-stub card. */
.ticket-card {
    background: var(--cm-bg-card-elev, #14151a);
    border: 1px solid var(--cm-border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s, box-shadow 0.18s;
}

.ticket-card:hover,
.ticket-card:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.ticket-card-correct:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(255, 215, 0, 0.13);
}

.ticket-card-miss:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(229, 9, 20, 0.13);
}

/* Top date strip — JetBrains-Mono date on the left, status pill on
   the right. Dashed bottom border continues the boarding-pass feel. */
.ticket-card-date-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px dashed var(--cm-border);
}

.ticket-card-date {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--cm-text-secondary);
    letter-spacing: 0.18em;
    font-weight: 700;
}

.ticket-card-pill {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 0.18em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
}

.ticket-card-pill-correct {
    color: var(--cm-accent-gold);
    border: 1px solid rgba(255, 215, 0, 0.33);
    background: rgba(255, 215, 0, 0.06);
}

.ticket-card-pill-miss {
    color: var(--cm-accent-red);
    border: 1px solid rgba(229, 9, 20, 0.33);
    background: rgba(229, 9, 20, 0.06);
}

/* Poster panel — actual TMDB poster when we have one, else a colored
   gradient placeholder. */
.ticket-card-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

.ticket-card-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ticket-card-poster-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(255, 215, 0, 0.4);
}

.ticket-card-poster-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.85));
    pointer-events: none;
}

/* Diagonal "REVEALED" stamp on each poster — a subtle stamp like a
   pass-through sticker rather than a giant decoration. */
.ticket-card-stamp {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 0.25em;
    font-weight: 700;
    padding: 3px 6px;
    border: 1px solid rgba(255, 215, 0, 0.53);
    border-radius: 2px;
    color: var(--cm-accent-gold);
    background: rgba(0, 0, 0, 0.5);
    transform: rotate(-4deg);
    z-index: 2;
}

.ticket-card-fav {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 14px;
    color: var(--cm-accent-gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    z-index: 2;
}

.ticket-card-title {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.05;
    font-size: 19px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

/* Long titles drop a step. Anything 23+ chars uses 16px to avoid
   overflow without truncating. */
.ticket-card-title:not(:empty) {
    /* Default 19px above; override when present via attribute would
       require JS — we instead always cap at 19px and let line-clamp
       handle longer titles. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer — format hint left, ★ rating right. */
.ticket-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-top: 1px dashed var(--cm-border);
}

.ticket-card-format {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--cm-text-dim);
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* Franchise dot row — small colored chips, one per chain.
 * Letter inside is the franchise's first letter; full name lives
 * in the chip's title attribute for hover identification. Tighter
 * stacking with negative margin-left keeps the row compact when a
 * showing landed at 3-4 chains. */
.ticket-card-franchises {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.ticket-card-franchise-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid var(--cm-bg-card-elev, #14151a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin-left: -4px;
}

.ticket-card-franchise-dot:first-child {
    margin-left: 0;
}

.ticket-card-rating {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 18px;
    color: var(--cm-text-primary);
    letter-spacing: 0.02em;
    flex: 0 0 auto;
    margin-left: 8px;
}