/* Citadel brand — shared layout & identity */

:root {
    /* Horizontal padding scales with viewport */
    --citadel-pad-x: clamp(1.25rem, 2.5vw, 3rem);

    /*
     * Fluid max-widths — grow with viewport, cap on ultra-wide.
     * Default fills ~1920 displays; wide tier for 2K+ monitors.
     */
    --citadel-max: min(calc(100% - 2 * var(--citadel-pad-x)), 120rem);
    --citadel-max-wide: min(calc(100% - 2 * var(--citadel-pad-x)), 140rem);
    --citadel-max-narrow: min(calc(100% - 2 * var(--citadel-pad-x)), 44rem);
    --citadel-prose: 42rem;
}

/* Default page shell — grids, sections, main content */
.citadel-shell,
.page-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--citadel-max);
    margin-inline: auto;
    padding-inline: var(--citadel-pad-x);
}

/* Dashboards, shops, rankings, multi-column layouts */
.citadel-shell--wide,
.page-wrap--wide {
    max-width: var(--citadel-max-wide);
}

/* Centered hero titles, auth gates, modals */
.citadel-shell--narrow,
.page-wrap--narrow {
    max-width: var(--citadel-max-narrow);
}

/* Edge-to-edge within safe padding (sticky bars, full-width bands) */
.citadel-shell--full {
    max-width: none;
    width: 100%;
}

/* Constrain readable text only — not the whole section */
.citadel-prose {
    max-width: var(--citadel-prose);
}

/* Site header logo — drop assets/server-logo.png to replace the SVG fallback */
.site-brand {
    text-decoration: none;
    color: inherit;
}

.site-logo-wrap {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.site-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.site-logo.is-loaded {
    opacity: 1;
}
.site-logo-wrap:has(.site-logo.is-loaded)::after {
    display: none;
}

/* Casino — dim only the active pane when a daily cap is hit (tabs stay clickable) */
.casino-pane-exhausted {
    opacity: 0.42;
    pointer-events: none;
    filter: grayscale(0.35);
    transition: opacity 0.2s ease;
}