/* Main menu, faction selection, board preview, and host confirmation dialog. */

.menu-screen,
.page-shell {
    min-height: 100svh;
    width: 100%;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 28px);
    overflow-x: clip;
}

.menu-container,
.skeleton-panel {
    width: min(640px, 100%);
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(18, 22, 29, 0.94);
    box-shadow: 0 18px 52px var(--shadow);
}

.menu-container {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vw, 20px);
    padding: clamp(16px, 3.4vw, 24px);
}

.menu-header {
    display: grid;
    gap: 7px;
    text-align: center;
}

.menu-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.menu-icon-button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--control-bg-strong);
    color: var(--text);
    font-size: 1.15rem;
    cursor: pointer;
}

.settings-dialog {
    gap: 18px;
    align-items: stretch;
}

.settings-slider {
    display: grid;
    gap: 8px;
    width: 100%;
}

.settings-slider-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-slider-label label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.settings-slider-label strong {
    color: var(--accent-light);
    font-size: 0.95rem;
}

.settings-slider input[type="range"] {
    width: 100%;
    min-height: 32px;
    padding: 0;
    accent-color: var(--accent-light);
}

.settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.settings-actions a,
.settings-actions button {
    justify-content: center;
    text-align: center;
}

.settings-actions .primary {
    grid-column: 1 / -1;
}

.eyebrow,
.menu-heading {
    margin: 0;
    color: var(--accent-light);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.menu-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(2.35rem, 8vw, 4rem);
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
}

.menu-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.95rem, 2.5vw, 1.08rem);
}

.faction-section,
.menu-connection {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faction-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* The faction heading sits beside the WW mark with room to spare, so it can
   run larger than the other menu headings without reflowing their rows. */
.faction-header .menu-heading {
    font-size: 1.02rem;
}

.menu-mark {
    width: clamp(48px, 14vw, 72px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgb(var(--accent-light-rgb) / 0.38);
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 48%, rgb(var(--accent-light-rgb) / 0.2) 48% 52%, transparent 52%),
        linear-gradient(180deg, rgb(var(--accent-rgb) / 0.2), rgba(214, 168, 76, 0.14));
    color: var(--accent-light);
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    font-weight: 900;
}

.faction-preview {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgb(var(--accent-light-rgb) / 0.55);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgb(var(--accent-rgb) / 0.18), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgb(var(--accent-light-rgb) / 0.14), 0 0 22px rgb(var(--accent-rgb) / 0.12);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.faction-preview:hover,
.faction-preview:focus-visible {
    border-color: rgb(var(--accent-light-rgb) / 0.85);
    background:
        linear-gradient(180deg, rgb(var(--accent-rgb) / 0.26), rgba(255, 255, 255, 0.06)),
        rgba(255, 255, 255, 0.05);
}

.faction-preview-glyph {
    --control-glyph-bg: rgba(0, 0, 0, 0.28);
}

.faction-preview-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.faction-preview-name {
    color: var(--text);
    font-size: clamp(1.15rem, 3.4vw, 1.4rem);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.faction-preview-hint {
    align-self: center;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent-light);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Specificity bumped past .host-confirm-dialog so its width: min(420px, 100%) does not win. */
.host-confirm-dialog.selection-picker-dialog {
    width: min(1280px, 96vw);
    max-width: none;
    max-height: min(90vh, 820px);
    gap: 16px;
}

.selection-picker-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 16px;
    min-height: 0;
    /* Stable height keeps the right panel from growing/shrinking with description length. */
    height: clamp(320px, 52vh, 460px);
}

.selection-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    align-content: start;
    overflow-y: auto;
    padding-right: 2px;
}

.selection-picker-tile {
	position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 96px;
    padding: 12px;
    border: 1px solid var(--control-border-soft);
    border-radius: 8px;
    background: var(--control-bg-soft);
    text-align: left;
}

.challenge-medal {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 1.25rem;
	line-height: 1;
}

.selection-picker-tile.selected {
    border-color: rgb(var(--accent-light-rgb) / 0.88);
    background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.22), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 0 0 1px rgb(var(--accent-light-rgb) / 0.22), 0 0 18px rgb(var(--accent-rgb) / 0.18);
}

.selection-picker-tile-glyph {
    --control-glyph-bg: rgba(0, 0, 0, 0.28);
}

.selection-picker-tile-name {
    font-size: 1rem;
    font-weight: 800;
}

.selection-picker-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(10, 13, 18, 0.55);
    text-align: left;
    min-height: 0;
}

.selection-picker-detail-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.selection-picker-detail-glyph {
    --control-glyph-bg: rgba(0, 0, 0, 0.28);
}

.selection-picker-detail-name {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.2rem, 3.4vw, 1.45rem);
    font-weight: 800;
}

.selection-picker-detail-description {
    margin: 0;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

.board-preview {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.board-preview:hover,
.board-preview:focus-visible {
    border-color: rgb(var(--accent-light-rgb) / 0.5);
    background: rgba(255, 255, 255, 0.055);
}

.board-preview p {
    margin: 6px 0 0;
    color: var(--muted);
}

.game-speed-section {
    display: grid;
    gap: 8px;
}

.game-speed-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* Mirrors `.game-board` */
.board-mini {
    --board-mini-height: 112px;
    width: min(100%, calc(var(--board-mini-height) * var(--board-mini-cols, 8) / var(--board-mini-rows, 7)));
    aspect-ratio: var(--board-mini-cols, 8) / var(--board-mini-rows, 7);
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(var(--board-mini-cols, 8), minmax(0, 1fr));
    grid-template-rows: repeat(var(--board-mini-rows, 7), minmax(0, 1fr));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    overflow: hidden;
    background: #10141a;
}

.board-mini-tile {
    min-width: 0;
    min-height: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.board-setup-dialog {
    gap: 14px;
}

.board-setup-section {
    display: grid;
    gap: 8px;
}

.board-setup-section h3 {
    margin: 0;
    color: var(--accent-light);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.board-size-choice {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.board-size-choice button,
.game-speed-choice button {
    font-weight: 900;
}

.board-mini-tile.enemy {
    background-color: rgb(var(--player-two-rgb) / 0.22);
}

.board-mini-tile.neutral {
    background-color: rgb(var(--neutral-zone-rgb) / 0.18);
}

.board-mini-tile.player {
    background-color: rgb(var(--player-one-strong-rgb) / 0.25);
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-join {
    display: grid;
    grid-template-columns: minmax(88px, 0.45fr) minmax(132px, 1fr);
    gap: 8px;
}

.menu-join input {
    width: 100%;
    text-transform: uppercase;
}

.menu-status {
    min-height: 22px;
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.host-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
}

.host-confirm-dialog {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(18, 22, 29, 0.98);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.host-confirm-action {
    min-height: 48px;
}

.host-confirm-btn {
    border: 1px solid rgb(var(--accent-light-rgb) / 0.65);
    background: var(--accent);
}

.host-confirm-info {
    display: grid;
    gap: 10px;
    text-align: center;
}

.host-confirm-info h2,
.host-confirm-info p {
    margin: 0;
}

.host-confirm-info p {
    color: var(--muted);
    line-height: 1.45;
}

.local-play-setup-dialog {
    gap: 16px;
    text-align: left;
}

.local-play-validation {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 123, 123, 0.45);
    border-radius: 8px;
    background: rgba(255, 87, 87, 0.12);
    color: #ffd4d4;
    font-size: 0.88rem;
    line-height: 1.35;
}

.local-play-slider {
    display: grid;
    gap: 8px;
}

.local-play-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.local-play-slider-label,
.local-play-slider-scale,
.local-play-setup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.local-play-slider-label label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.local-play-slider-label strong {
    color: var(--accent-light);
    font-size: 0.95rem;
}

.local-play-slider input[type="range"] {
    width: 100%;
    min-height: 32px;
    padding: 0;
    accent-color: var(--accent-light);
}

.local-play-slider-scale {
    color: var(--muted);
    font-size: 0.78rem;
}

.local-play-slider-scale span:last-child {
    text-align: right;
}

.local-play-setup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2px;
}

.local-play-cancel {
    width: 100%;
}

.skeleton-panel {
    display: grid;
    gap: 14px;
    padding: clamp(18px, 4vw, 28px);
}

.skeleton-panel h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 3rem);
}

.skeleton-panel p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}


@media (max-width: 520px) {
    .menu-screen {
        align-items: start;
        padding: 8px;
    }

    .menu-container {
        gap: 10px;
        padding: 12px;
    }

    .menu-header {
        gap: 4px;
    }

    .menu-title {
        font-size: clamp(2.1rem, 14vw, 3rem);
    }

    .menu-subtitle,
    .menu-status {
        font-size: 0.9rem;
    }

    .faction-preview {
        gap: 10px;
        padding: 12px;
    }

    .faction-preview-hint {
        padding: 4px 10px;
        font-size: 0.68rem;
    }

    .host-confirm-overlay {
        padding: 8px;
    }

    .host-confirm-dialog.selection-picker-dialog {
        width: 100%;
        max-height: 94vh;
        padding: 14px;
        gap: 12px;
        /* Let the dialog be the single scroll surface on mobile so each child
           (grid, dark detail panel) sizes naturally around its content. The
           description then fits inside its panel rather than overflowing it. */
        overflow-y: auto;
    }

    .selection-picker-dialog .local-play-setup-actions {
        /* Pin the action row to the bottom of the scrollable dialog so it does
           not visually overlap the description on tall content. */
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin: 0 -14px -14px;
        padding: 12px 14px;
        background: linear-gradient(180deg, rgba(18, 22, 29, 0), rgba(18, 22, 29, 0.98) 35%);
    }

    .selection-picker-layout {
        grid-template-columns: 1fr;
        /* Drop all desktop scroll/flex sizing so children grow to their content. */
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .selection-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .selection-picker-tile {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-height: 52px;
        padding: 8px;
    }

    .selection-picker-tile-name {
        font-size: 0.9rem;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    .selection-picker-detail {
        max-height: none;
        overflow: visible;
        /* On mobile the panel must grow to wrap its content so the description
           sits inside the dark box instead of clipping past it. height: auto
           cancels any stretched grid/flex sizing inherited from above. */
        height: auto;
        align-self: start;
    }

    .selection-picker-detail-description {
        flex: 0 0 auto;
        min-height: 6.8rem;
        max-height: 6.8rem;
        overflow-y: auto;
        padding-right: 0;
    }

    .board-preview {
        gap: 10px;
        padding: 10px;
    }

    .board-mini {
        --board-mini-height: 84px;
    }

    .board-preview,
    .menu-join {
        grid-template-columns: 1fr;
    }
}