/*
 * bowling-play.css
 *
 * Skeleton visual styling for the bowling module's per-state surfaces in ChallengeContent.razor
 * (rendered inside the play surface's center-left content area at /challenge/{id}). Mirrors the
 * structural shape of cubing-play.css — outer containers, event banner, voice line, button rows,
 * resolved-grid, mobile reshape — without the cubing-specific timer / scramble / per-solve
 * machinery. Class names are the .bowling-* prefix the Razor already references.
 *
 * Loaded from App.razor as _content/Haxahedron.Modules.Bowling/css/bowling-play.css.
 *
 * This is the initial pass landed when visual polish became the focus per doc 35 §"No CSS file
 * in commit 6". Walk-through-driven tightening lands on top.
 */

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

/* ----- Per-state containers ----- */
.bowling-pre-accept,
.bowling-active-match,
.bowling-waiting,
.bowling-resolved,
.bowling-terminal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    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 all four modules. ----- */
.bowling-event-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

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

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

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

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

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

/* ----- Handicap status line (3 branches per doc 35) ----- */
.bowling-handicap-line {
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.03);
    line-height: 1.5;
}

.bowling-handicap-line--scratch {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.bowling-handicap-aside {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    margin-left: 0.4rem;
}

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

/* ----- Active match: per-game numeric inputs ----- */
.bowling-active-match-prompt {
    font-size: 1rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.bowling-game-inputs {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* 3-column grid: label | input | required-message. The cell wrapper uses display: contents
   so the input + (optional) required span become direct grid items, packing tight against
   the input instead of stretching across the row. */
.bowling-game-input-row {
    display: grid;
    grid-template-columns: 5rem 6rem auto;
    align-items: center;
    column-gap: 0.75rem;
}

.bowling-game-input-label {
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.bowling-game-input-cell {
    display: contents;
}

/* Validation chip + form-error banner moved to site-level .hax-validation.css so future
   disciplines (chess, table tennis, etc.) inherit the same look. The Razor uses
   .hax-field-required and .hax-form-error directly — see hax-validation.css for the rules. */

.bowling-active-match-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.bowling-toast {
    color: var(--mud-palette-error);
    font-size: 0.9rem;
    margin: 0.25rem 0 0 0;
}

/* ----- Waiting view ----- */
.bowling-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0.5rem 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bowling-readonly-games {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bowling-readonly-games li {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
}

.bowling-summary-line {
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    margin: 0.25rem 0;
}

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

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

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

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

.bowling-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 + Raw series / Total
   numeric values render lime (#A3E635) so the win reads at a glance.
   Operator design 2026-05-19; mirrors cubing + cluemaster resolved-view
   treatment. */
.bowling-resolved-column--winner .bowling-resolved-column-title {
    color: #A3E635;
}

.bowling-resolved-column--winner .bowling-resolved-totals dd {
    color: #A3E635;
}

.bowling-resolved-games {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bowling-resolved-games li {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
}

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

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

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

.bowling-resolved-totals dd {
    margin: 0;
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
}

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

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

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

    .bowling-game-input-row {
        grid-template-columns: 4rem 5rem auto;
        column-gap: 0.5rem;
    }

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