/* Shared presentation for public tenant pages that retain their module-specific content. */
.website-page {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.website-page :is(.container, .content-area) {
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

.website-page :is(.page-title, .section-header h2, .card-header h1, .card-header h5) {
    color: var(--website-text);
}

.website-page-header {
    display: grid;
    gap: .75rem;
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

.website-page-header h1 {
    margin: 0;
    color: var(--website-text);
    font-size: clamp(2rem, 5vw, 3.75rem);
    letter-spacing: -.035em;
}

.website-page-header__intro {
    max-width: 65ch;
    margin: 0;
    color: var(--website-muted);
    font-size: 1.05rem;
}

.website-page-header__image {
    width: min(100%, 460px);
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border: 1px solid var(--website-border);
    border-radius: calc(var(--website-radius) - .25rem);
}

.website-module-presentation {
    width: min(100% - 2rem, 1180px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .38fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin: clamp(1rem, 3vw, 2rem) auto 0;
    padding: clamp(1rem, 3vw, 1.75rem);
    color: var(--website-text);
    background: var(--website-surface);
    border: 1px solid var(--website-border);
    border-radius: var(--website-radius);
}

.website-module-presentation > div {
    grid-column: 1;
}

.website-module-presentation strong {
    display: block;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.website-module-presentation p {
    max-width: 65ch;
    margin: .35rem 0 0;
    color: var(--website-muted);
}

.website-module-presentation img {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: calc(var(--website-radius) - .25rem);
}

.website-page :is(.alert, .empty-state, .loading-spinner, .hub-empty) {
    color: var(--website-text);
    border-radius: var(--website-radius);
}

.website-page :is(.stats-card, .stat-box, .highlight-stat, .impressum-page) {
    color: var(--website-text);
    background: var(--website-surface);
    border: 1px solid var(--website-border);
    box-shadow: none;
}

.website-page :is(.stats-card, .stat-box, .impressum-page) {
    border-radius: var(--website-radius);
}

.website-page :is(.stats-table, .stats-table th, .stats-table td) {
    color: var(--website-text);
    border-color: var(--website-border);
}

.website-page .stats-table th {
    background: var(--website-raised);
}

.website-page .stats-table tr:hover td {
    background: var(--website-raised);
}

.website-page .impressum-page {
    max-width: 800px;
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.website-page .impressum-page h1 {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--website-border);
}

.website-page .impressum-content {
    max-width: 70ch;
    color: var(--website-text);
    line-height: 1.7;
}

.website-page .impressum-content :is(a, a:visited) {
    color: var(--website-link);
}

.website-page .impressum-content p {
    margin: 0;
    min-height: 1.7em;
}

.website-page--youtube .youtube-hero,
.website-page--youtube .content-section,
.website-page--bingo-card .card {
    color: var(--website-text);
    background: var(--website-surface);
    border: 1px solid var(--website-border);
    border-radius: var(--website-radius);
    box-shadow: none;
}

.website-page--youtube .youtube-hero,
.website-page--youtube .content-section {
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.website-page--youtube .channel-meta,
.website-page--youtube .video-description {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.website-page--youtube :is(.youtube-card, .playlist-card, .timeline-content) {
    color: var(--website-text);
    background: var(--website-raised);
    border: 1px solid var(--website-border);
    border-radius: .75rem;
}

/* youtube.php retains legacy inline rules after this shared stylesheet. */
.website-page--youtube .video-description,
.website-page--youtube .timeline-item {
    color: var(--website-text) !important;
    background: var(--website-raised) !important;
    border: 1px solid var(--website-border) !important;
}

.website-page--youtube .timeline-content {
    color: var(--website-text) !important;
    background: transparent !important;
    border: 0 !important;
}

.website-page--youtube :is(.video-description h3, .video-description p, .timeline-content h4, .timeline-content p) {
    color: var(--website-text) !important;
}

.website-page--youtube :is(.youtube-meta, .video-meta, .timeline-date) {
    color: var(--website-muted);
}

.website-page--bingo-card .card-header {
    color: var(--website-text);
    background: var(--website-raised);
    border-bottom-color: var(--website-border);
}

.website-page--bingo-card .card-body {
    color: var(--website-text);
}

[data-website-theme='light'] .website-page--bingo :is(.bg-dark, .card.bg-dark, .modal-content),
[data-website-theme='light'] .website-page--geisterhaus :is(.bg-dark, .card, .gh-card, .info-panel, .sp-item-card) {
    color: var(--website-text) !important;
    background: var(--website-surface) !important;
    border-color: var(--website-border) !important;
}

[data-website-theme='light'] .website-page--geisterhaus :is(.text-light, .text-white) {
    color: var(--website-text) !important;
}

[data-website-theme='light'] .website-page--geisterhaus :is(.text-muted, .tiny.text-muted) {
    color: var(--website-muted) !important;
}

[data-website-theme='light'] .website-page--geisterhaus .progress {
    background: var(--website-raised) !important;
}

@media (prefers-color-scheme: light) {
    html[data-website-theme='system'] .website-page--bingo :is(.bg-dark, .card.bg-dark, .modal-content),
    html[data-website-theme='system'] .website-page--geisterhaus :is(.bg-dark, .card, .gh-card, .info-panel, .sp-item-card) {
        color: var(--website-text) !important;
        background: var(--website-surface) !important;
        border-color: var(--website-border) !important;
    }

    html[data-website-theme='system'] .website-page--geisterhaus :is(.text-light, .text-white) {
        color: var(--website-text) !important;
    }

    html[data-website-theme='system'] .website-page--geisterhaus :is(.text-muted, .tiny.text-muted) {
        color: var(--website-muted) !important;
    }

    html[data-website-theme='system'] .website-page--geisterhaus .progress {
        background: var(--website-raised) !important;
    }
}

.website-page--hub {
    --hub-bg: var(--website-bg);
    --hub-surface: var(--website-surface);
    --hub-raised: var(--website-raised);
    --hub-text: var(--website-text);
    --hub-muted: var(--website-muted);
    --hub-accent: var(--website-link);
    --hub-border: var(--website-border);
    padding-top: 2rem;
}

.website-page--hub .hub-header {
    padding: clamp(1.5rem, 4vw, 3.25rem) 1rem 0;
    text-align: center;
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: var(--website-radius) var(--website-radius) 0 0;
}

.website-page--hub .hub-header__title {
    margin: 0;
    color: var(--hub-text);
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -.035em;
}

.website-page--hub .hub-header__subtitle {
    color: var(--hub-muted);
    margin: .75rem 0 1.5rem;
}

.website-page--hub .hub-container,
.website-page--hub .cmds-toolbar {
    color: var(--hub-text);
    background: var(--hub-surface);
    border-inline: 1px solid var(--hub-border);
}

.website-page--hub .hub-container {
    border-bottom: 1px solid var(--hub-border);
    border-radius: 0 0 var(--website-radius) var(--website-radius);
}

.website-page--hub :is(.hub-tab, .cmds-filter-pill) {
    min-height: 44px;
    color: var(--hub-text);
}

.website-page--hub :is(.hub-tab.is-active, .cmds-filter-pill.is-active) {
    color: var(--website-on-accent);
    background: var(--hub-accent);
}

.website-page--youtube .video-player {
    min-height: 240px;
    display: grid;
    place-items: center;
    background: var(--website-raised);
    border: 1px solid var(--website-border);
    border-radius: .75rem;
    overflow: hidden;
}

.website-page--youtube .video-player iframe {
    width: 100%;
    min-height: 400px;
    border: 0;
}

.website-media-prompt {
    max-width: 42rem;
    padding: 1.5rem;
    text-align: center;
}

.website-media-prompt p {
    margin: .5rem 0 1rem;
    color: var(--website-muted);
}

.website-page--hub :is(.cmds-search__input, .cmd-card, .playlist-card, .toplist-section, .hub-empty) {
    color: var(--hub-text);
    background: var(--hub-raised);
    border-color: var(--hub-border);
}

.website-page--hub .cmds-search__input:focus-visible,
.website-page--hub :is(.hub-tab, .cmds-filter-pill):focus-visible {
    outline: 3px solid var(--hub-accent);
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .website-page {
        padding-block: 1rem 2rem;
    }

    .website-page--hub .hub-header {
        padding-inline: .75rem;
    }

    .website-module-presentation {
        grid-template-columns: 1fr;
    }

    .website-module-presentation img {
        grid-column: 1;
        grid-row: auto;
        order: -1;
    }
}

/* Legacy module artwork used opaque dark gradients. Rebind the public-page
 * surfaces when the tenant chooses a light appearance instead of dimming text
 * over a legacy dark panel. The selector is deliberately limited to module
 * roots; game canvases and their play surfaces keep their own art direction. */
html[data-website-theme='light'] .frontend-main__inner--crowd-equipment {
    --equipment-line: var(--website-border);
    --equipment-line-strong: var(--website-link);
    --equipment-surface: var(--website-surface);
    --equipment-surface-2: var(--website-raised);
    --equipment-surface-3: color-mix(in srgb, var(--website-raised) 72%, transparent);
    --equipment-text: var(--website-text);
    --equipment-muted: var(--website-muted);
    --equipment-soft: var(--website-text);
    --equipment-cyan: var(--website-link);
    --equipment-violet: var(--website-link);
    --equipment-gold: var(--website-accent);
}

html[data-website-theme='light'] :is(
    .frontend-main__inner--crowd-equipment .crowd-equipment-hero__copy,
    .frontend-main__inner--crowd-equipment .crowd-equipment-loadout,
    .frontend-main__inner--crowd-equipment .equipment-toolbar,
    .frontend-main__inner--crowd-equipment .equipment-catalog,
    .frontend-main__inner--crowd-equipment .equipment-card,
    .frontend-main__inner--crowd-equipment .equipment-card--consumables,
    .frontend-main__inner--crowd-equipment .equipment-card--relics,
    .frontend-main__inner--crowd-equipment .equipment-avatar-stage,
    .frontend-main__inner--crowd-equipment .equipment-card__preview,
    .frontend-main__inner--crowd-equipment .equipment-slot-card,
    .frontend-main__inner--crowd-equipment .equipment-ghosthouse-panel,
    .frontend-main__inner--crowd-equipment .equipment-ghosthouse-summary span,
    .frontend-main__inner--crowd-equipment .equipment-mode-switch,
    .frontend-main__inner--crowd-equipment .equipment-category-chip,
    .frontend-main__inner--crowd-equipment .equipment-toggle-group,
    .frontend-main__inner--crowd-equipment .equipment-search-box input,
    .frontend-main__inner--crowd-equipment .equipment-sort-box select,
    .frontend-main__inner--crowd-equipment .equipment-card__button--ghost
) {
    color: var(--website-text);
    background: var(--website-surface);
    border-color: var(--website-border);
    box-shadow: none;
}

html[data-website-theme='light'] .frontend-main__inner--lobby .hero-copy--lobby {
    color: var(--website-text);
    background: var(--website-surface);
    border-color: var(--website-border);
    box-shadow: none;
}

html[data-website-theme='light'] :is(
    .frontend-main__inner--crowd-equipment .crowd-equipment-note,
    .frontend-main__inner--crowd-equipment .equipment-ghosthouse-level,
    .frontend-main__inner--crowd-equipment .equipment-wallet-card,
    .frontend-main__inner--crowd-equipment .equipment-card__button,
    .frontend-main__inner--crowd-equipment .equipment-card__status,
    .frontend-main__inner--crowd-equipment .equipment-tag
) {
    color: var(--website-text);
    background: var(--website-raised);
    border-color: var(--website-border);
    box-shadow: none;
}

html[data-website-theme='light'] :is(
    .frontend-main__inner--crowd .crowd-hero .hero-copy,
    .frontend-main__inner--crowd .crowd-hero__feature,
    .frontend-main__inner--crowd .crowd-showcase-widget__preview-card,
    .frontend-main__inner--crowd .crowd-showcase-widget__visual-empty,
    .frontend-main__inner--crowd .crowd-loadout-slot__thumb,
    .frontend-main__inner--crowd .crowd-avatar-fallback-thumb,
    .frontend-main__inner--crowd .crowd-link-card,
    .frontend-main__inner--crowd .crowd-game-card,
    .frontend-main__inner--crowd .crowd-guide-card,
    .frontend-main__inner--crowd .crowd-summary-card,
    .frontend-main__inner--crowd .crowd-bonus-item,
    .frontend-main__inner--crowd .crowd-leaderboard__row,
    .frontend-main__inner--crowd .crowd-compendium-card
) {
    color: var(--website-text);
    background: var(--website-surface);
    border-color: var(--website-border);
    box-shadow: none;
}

html[data-website-theme='light'] :is(
    .frontend-main__inner--lobby .lobby-widget.section,
    .frontend-main__inner--lobby .lobby-action-panel,
    .frontend-main__inner--lobby .lobby-info-panel,
    .frontend-main__inner--lobby .ready-hint-code,
    .frontend-main__inner--lobby .rules-text,
    .frontend-main__inner--lobby .player-row,
    .frontend-main__inner--lobby .sticky-footer,
    .frontend-main__inner--lobby .pill--dim,
    .frontend-main__inner--lobby .pill--host
) {
    color: var(--website-text);
    background: var(--website-surface);
    border-color: var(--website-border);
    box-shadow: none;
}

html[data-website-theme='light'] .giveaway-page .giveaway-panel {
    color: var(--website-text);
    background: var(--website-surface);
    border-color: var(--website-border);
}

html[data-website-theme='light'] :is(
    .frontend-main__inner--geisterflug .geisterflug-section,
    .frontend-main__inner--geisterflug .geisterflug-control-chip,
    .frontend-main__inner--geisterflug .geisterflug-status-card,
    .frontend-main__inner--geisterflug .geisterflug-stat-block,
    .frontend-main__inner--geisterflug .geisterflug-tip-card,
    .frontend-main__inner--geisterflug .geisterflug-overlay-card,
    .frontend-main__inner--geisterflug .geisterflug-option-row,
    .frontend-main__inner--geisterflug .geisterflug-options-field,
    .frontend-main__inner--geisterflug .geisterflug-ranking-item,
    .frontend-main__inner--geisterflug .geisterflug-recent-item,
    .frontend-main__inner--geisterflug .geisterflug-empty-state,
    .frontend-main__inner--geisterflug .geisterflug-options-btn,
    .frontend-main__inner--geisterflug .geisterflug-options-cancel-btn
) {
    color: var(--website-text);
    background: var(--website-surface);
    border-color: var(--website-border);
    box-shadow: none;
}

/* The stage canvas stays dark for gameplay. Its surrounding controls and every
 * primary action use the tenant accent with the matching contrast token. */
.frontend-main__inner--geisterflug :is(.geisterflug-start-btn, .geisterflug-options-save-btn) {
    color: var(--website-on-accent);
    background: var(--website-accent);
}

/* The lobby keeps an intentional player-sized region while offline. Its empty
 * state must be a readable status card in every tenant appearance. */
.hero-shell--lobby {
    align-items: start;
}

.hero-copy--lobby {
    height: auto;
}

.frontend-main__inner--lobby .status-embed--lobby {
    min-height: 0;
    aspect-ratio: 16 / 9;
    color: var(--website-text);
    background: var(--website-raised);
    border-color: var(--website-border);
}

.frontend-main__inner--lobby .status-embed--lobby .widget-empty {
    min-width: min(100% - 2rem, 18rem);
    padding: 1rem 1.25rem;
    color: var(--website-text);
    background: var(--website-surface);
    border: 1px solid var(--website-border);
    text-align: center;
}

/* Inline legacy Bingo rules arrive after the shared sheets. Bind every cell
 * state to the website tokens so labels stay readable in dark, light and
 * system appearances. The legacy state and difficulty borders stay distinct;
 * the fill remains a reliable text backdrop. */
.website-page--bingo .bingo-cell {
    color: var(--website-text);
    background: var(--website-surface) !important;
    border-color: var(--website-border) !important;
}

.website-page--bingo .bingo-cell.completed,
.website-page--bingo .bingo-cell.free-space {
    background: var(--website-raised) !important;
}

.website-page--bingo .bingo-cell.completed {
    border-color: #28a745 !important;
}

.website-page--bingo .bingo-cell.pending {
    background: var(--website-raised) !important;
    border-color: #ffc107 !important;
}

.website-page--bingo .bingo-cell.rejected {
    background: var(--website-raised) !important;
    border-color: #dc3545 !important;
}

.website-page--bingo .bingo-cell.free-space {
    border-color: #09a8fd !important;
}

.website-page--bingo :is(.bingo-text, .free-text) {
    color: var(--website-text) !important;
}

.website-page--bingo .bingo-points {
    color: var(--website-text) !important;
    background: var(--website-surface) !important;
}

/* Bootstrap's info alert was a bright legacy panel with white foreground in
 * dark mode. Keep the progress summary readable while preserving its compact
 * information layout. */
.website-page--bingo .bingo-points-info .alert-info {
    color: var(--website-text) !important;
    background: var(--website-raised) !important;
    border-color: var(--website-border) !important;
}

.website-page--bingo .bingo-points-info .alert-info :is(strong, i, .badge) {
    color: var(--website-text) !important;
}

.website-page--bingo .bingo-points-info .alert-info .badge-info {
    color: var(--website-on-accent) !important;
    background: var(--website-accent) !important;
}

/* A five-column card remains a board on phones, but it must not shrink labels
 * to the legacy five-to-seven-pixel type. The board itself scrolls horizontally
 * inside its bounded region, preserving readable field targets and labels. */
@media (max-width: 700px) {
    .website-page--bingo .bingo-board,
    .website-page--bingo-card .bingo-board {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: .5rem;
    }

    .website-page--bingo .bingo-grid,
    .website-page--bingo-card .bingo-grid {
        min-width: 560px;
        gap: .45rem;
    }

    .website-page--bingo .bingo-text,
    .website-page--bingo-card .bingo-text {
        padding-top: 0;
        font-size: .75rem !important;
        line-height: 1.2;
    }

    .website-page--bingo .bingo-points,
    .website-page--bingo-card .bingo-points {
        font-size: .65rem !important;
    }

    .website-page--bingo .free-text,
    .website-page--bingo-card .free-text {
        font-size: 1rem !important;
    }
}