/*
 * cluemaster-play.css
 *
 * Visual styling for the ClueMaster module's per-state surfaces in ChallengeContent.razor.
 * Mirrors bowling-play.css and cubing-play.css for structural symmetry — same outer wrapper,
 * event banner, voice line, pre-accept buttons, resolved-grid, mobile reshape — with ClueMaster-
 * specific blocks for the clue ladder, guess input, and active-match status row.
 *
 * Loaded from App.razor as _content/Haxahedron.Modules.ClueMaster/css/cluemaster-play.css.
 */

/* ----- Outer wrapper ----- */
.cluemaster-challenge-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cluemaster-loading {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin: 1rem 0;
}

/* ----- Per-state containers ----- */
.cluemaster-pre-accept,
.cluemaster-active-match,
.cluemaster-waiting,
.cluemaster-resolved,
.cluemaster-terminal {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem;
    min-height: 18rem;
}

/* ----- Event banner -----
   Two-line title + subtitle layout (operator design 2026-05-22) — see cubing-play.css
   for the rationale; same pattern across modules. */
.cluemaster-event-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cluemaster-event-banner::before {
    content: '';
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background-image: url('/icons/disciplines/icon-cluemaster-default.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cluemaster-event-banner-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.cluemaster-event-banner-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.cluemaster-event-banner-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* ----- Voice-aligned framing line ----- */
.cluemaster-voice-line {
    color: var(--mud-palette-text-primary);
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.4;
}

/* ----- Pre-acceptance ----- */
.cluemaster-pre-accept-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* ----- Active match: clue ladder ----- */
.cluemaster-clue-ladder {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cluemaster-clue {
    background-color: var(--hax-surface-page, #022C22);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cluemaster-clue-position {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.cluemaster-clue-body {
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* ----- Active match: status + actions ----- */
.cluemaster-active-match-status {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cluemaster-active-match-status > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cluemaster-active-match-actions {
    display: flex;
    gap: 0.75rem;
}

/* ----- Guess input row ----- */
.cluemaster-guess-row {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.cluemaster-guess-row .mud-input-control {
    flex: 1 1 auto;
}

.cluemaster-guess-feedback {
    font-size: 0.95rem;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

.cluemaster-guess-feedback--wrong {
    color: #F87171;
    background-color: rgba(248, 113, 113, 0.08);
}

.cluemaster-guess-feedback--hint {
    color: var(--mud-palette-text-secondary);
    background-color: rgba(255, 255, 255, 0.04);
}

.cluemaster-active-match-bottom {
    display: flex;
    justify-content: flex-end;
}

/* ----- Waiting view ----- */
.cluemaster-self-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.75rem;
    margin: 0.5rem 0 0;
}

.cluemaster-self-summary > div {
    display: contents;
}

.cluemaster-self-summary dt {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cluemaster-self-summary dd {
    margin: 0;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
}

/* ----- Resolved view ----- */
.cluemaster-resolved-headline {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: var(--mud-palette-text-primary);
    margin: 0.5rem 0 0.5rem;
}

.cluemaster-resolved-headline--win {
    color: #A3E635;
}

.cluemaster-resolved-answer {
    text-align: center;
    font-size: 1.5rem;
    color: var(--mud-palette-text-primary);
    margin: 0 0 1rem;
}

/* The canonical answer pops in gold (#FCD34D, same hex as the achievement-card
   tier-gold accent) so the right answer reads as the prize on the resolved
   screen. Operator design 2026-05-19. */
.cluemaster-resolved-answer strong {
    color: #FCD34D;
}

.cluemaster-resolved-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cluemaster-resolved-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.03);
}

.cluemaster-resolved-column-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0 0 0.5rem;
}

/* Winner's column gets lime accent — the player name + numeric score render
   in lime so the win reads at a glance without scanning every stat row.
   Operator design 2026-05-19; mirrors the cubing resolved-view treatment. */
.cluemaster-resolved-column--winner .cluemaster-resolved-column-title {
    color: #A3E635;
}

.cluemaster-resolved-column--winner .cluemaster-resolved-totals dd:has(strong) {
    color: #A3E635;
}

.cluemaster-resolved-no-session {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin: 0;
}

.cluemaster-resolved-totals {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.75rem;
    margin: 0;
}

.cluemaster-resolved-totals > div {
    display: contents;
}

.cluemaster-resolved-totals dt {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cluemaster-resolved-totals dd {
    margin: 0;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
}

.cluemaster-resolved-actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* ----- Event card content (events page + carousel) ----- */
.cluemaster-event-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cluemaster-event-card-description {
    color: var(--mud-palette-text-primary);
    margin: 0;
    line-height: 1.5;
}

/* ----- Throwdown options (category picker) ----- */
.cluemaster-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem 0.75rem;
}

@media (max-width: 600px) {
    .cluemaster-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- Mobile reshape ----- */
@media (max-width: 600px) {
    .cluemaster-pre-accept,
    .cluemaster-active-match,
    .cluemaster-waiting,
    .cluemaster-resolved,
    .cluemaster-terminal {
        gap: 1rem;
        padding: 0.75rem;
    }

    .cluemaster-resolved-grid {
        grid-template-columns: 1fr;
    }

    .cluemaster-resolved-headline {
        font-size: 1.25rem;
    }

    /* Mobile-specific typography bumps for the resolved view per operator feedback
       2026-05-21 — answer line + per-player stat grid all read too small on phone
       viewports. Answer sits between desktop's 1.5rem and the previous 1.1rem; stat
       labels (dt) and values (dd) bump one notch up so the columns scan comfortably
       at thumb distance without crowding the surrounding chrome. */
    .cluemaster-resolved-answer {
        font-size: 1.4rem;
    }

    .cluemaster-resolved-totals dt {
        font-size: 1rem;
    }

    .cluemaster-resolved-totals dd {
        font-size: 1.15rem;
    }

    .cluemaster-guess-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cluemaster-active-match-status {
        gap: 0.5rem 1rem;
    }
}