/**
 * SUNOSUNAO — PREMIUM CINEMATIC THEME
 * Design Version: 3.0
 * File: public_html/assets/css/theme.css
 *
 * PURPOSE
 * -------
 * Brand visual language and cinematic surface system.
 *
 * RESPONSIBILITIES
 * ----------------
 * - Dark cinematic visual identity
 * - Brand red and gold accents
 * - Surface depth and atmospheric gradients
 * - Glass and overlay treatments
 * - Component visual states
 * - Footer V4 / End Credits visual identity
 * - Audio and immersive visual skin
 * - Reading and experience visual treatment
 *
 * DEPENDENCIES
 * ------------
 * - core.css
 * - layout.css
 * - components.css
 *
 * RULES
 * -----
 * - No structural layout ownership
 * - No breakpoint ownership
 * - No story-specific content
 * - No JavaScript-dependent styling logic
 * - No duplicate design-token system
 * - No animation keyframes
 */

/* ==========================================================================
   1. THEME TOKENS
   ========================================================================== */

:root {
    /*
     * Brand colors.
     * These are theme-specific values and intentionally remain separate
     * from structural/layout tokens defined by core.css.
     */
    --theme-brand-primary: #ff202b;
    --theme-brand-soft: #ff3b45;
    --theme-brand-deep: #c91420;

    --theme-gold-primary: #ffc857;
    --theme-gold-soft: #ffd778;
    --theme-gold-deep: #d99d2e;

    /*
     * Atmospheric background values.
     */
    --theme-black: #050505;
    --theme-deep: #080808;
    --theme-primary: #0b0b0c;
    --theme-secondary: #101011;
    --theme-tertiary: #151516;
    --theme-elevated: #19191b;
    --theme-soft: #1d1d1f;

    /*
     * Theme text values.
     */
    --theme-text-primary: #f5f5f2;
    --theme-text-secondary: #b7b7b5;
    --theme-text-muted: #818181;
    --theme-text-disabled: #555557;
    --theme-text-inverse: #080808;

    /*
     * Theme borders.
     */
    --theme-border-subtle: rgba(255, 255, 255, 0.055);
    --theme-border-default: rgba(255, 255, 255, 0.09);
    --theme-border-strong: rgba(255, 255, 255, 0.15);
    --theme-border-brand: rgba(255, 32, 43, 0.38);
    --theme-border-gold: rgba(255, 200, 87, 0.36);

    /*
     * Brand transparency.
     */
    --theme-red-soft: rgba(255, 32, 43, 0.08);
    --theme-red-medium: rgba(255, 32, 43, 0.14);
    --theme-red-strong: rgba(255, 32, 43, 0.22);

    --theme-gold-soft-alpha: rgba(255, 200, 87, 0.08);
    --theme-gold-medium-alpha: rgba(255, 200, 87, 0.14);
    --theme-gold-strong-alpha: rgba(255, 200, 87, 0.22);

    /*
     * Theme shadows.
     */
    --theme-shadow-card:
        0 18px 50px rgba(0, 0, 0, 0.28);

    --theme-shadow-elevated:
        0 28px 80px rgba(0, 0, 0, 0.42);

    --theme-shadow-brand:
        0 16px 45px rgba(255, 32, 43, 0.18);

    --theme-shadow-gold:
        0 16px 45px rgba(255, 200, 87, 0.14);

    /*
     * Atmospheric gradients.
     */
    --theme-gradient-page:
        linear-gradient(
            180deg,
            #050505 0%,
            #080808 42%,
            #0b0b0c 100%
        );

    --theme-gradient-panel:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    --theme-gradient-brand:
        linear-gradient(
            135deg,
            #ff202b 0%,
            #c91420 100%
        );

    --theme-gradient-gold:
        linear-gradient(
            135deg,
            #ffd778 0%,
            #ffc857 48%,
            #d99d2e 100%
        );

    --theme-gradient-cinematic:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.34) 48%,
            rgba(0, 0, 0, 0.88) 100%
        );

    --theme-gradient-radial-brand:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 32, 43, 0.16),
            transparent 68%
        );

    --theme-gradient-radial-gold:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 200, 87, 0.12),
            transparent 68%
        );

    /*
     * Glass surfaces.
     */
    --theme-glass-background:
        rgba(255, 255, 255, 0.045);

    --theme-glass-background-heavy:
        rgba(10, 10, 11, 0.78);

    --theme-glass-border:
        rgba(255, 255, 255, 0.085);

    --theme-glass-blur: 18px;
}


/* ==========================================================================
   2. DOCUMENT FOUNDATION
   ========================================================================== */

html {
    background: var(--theme-black);
    color-scheme: dark;
}

body {
    background:
        var(--theme-gradient-page);
    color: var(--theme-text-primary);
}

::selection {
    background: rgba(255, 32, 43, 0.82);
    color: #ffffff;
}


/* ==========================================================================
   3. PAGE SURFACES
   ========================================================================== */

.page {
    background:
        var(--theme-gradient-page);
    color: var(--theme-text-primary);
}

.page__main {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.006),
            rgba(0, 0, 0, 0)
        );
}

.surface-dark {
    background: var(--theme-primary);
    color: var(--theme-text-primary);
}

.surface-deep {
    background: var(--theme-deep);
    color: var(--theme-text-primary);
}

.surface-elevated {
    background: var(--theme-elevated);
    color: var(--theme-text-primary);
}

.surface-gradient {
    background:
        var(--theme-gradient-panel);
    border: 1px solid var(--theme-border-subtle);
}


/* ==========================================================================
   4. HEADER VISUAL THEME
   ========================================================================== */

.site-header {
    background:
        linear-gradient(
            180deg,
            rgba(5, 5, 5, 0.92),
            rgba(5, 5, 5, 0.58)
        );
}

.site-header.is-scrolled,
.site-header[data-scrolled="true"] {
    background:
        rgba(5, 5, 5, 0.88);
    border-bottom-color: var(--theme-border-default);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.28);
}

.site-header__navigation a {
    color: var(--theme-text-secondary);
}

.site-header__navigation a:hover,
.site-header__navigation a:focus-visible,
.site-header__navigation a[aria-current="page"] {
    color: var(--theme-text-primary);
}

.site-header__navigation a[aria-current="page"]::after {
    background: var(--theme-brand-primary);
    box-shadow:
        0 0 16px rgba(255, 32, 43, 0.42);
}

.site-header__mobile-toggle {
    background:
        rgba(255, 255, 255, 0.045);
    border-color: var(--theme-border-default);
    color: var(--theme-text-primary);
}

.site-header__mobile-toggle:hover {
    background:
        rgba(255, 255, 255, 0.08);
    border-color: var(--theme-border-strong);
}

.mobile-menu,
.site-header__mobile-menu {
    background:
        rgba(7, 7, 8, 0.96);
    border-color: var(--theme-border-default);
    box-shadow:
        var(--theme-shadow-elevated);
    backdrop-filter: blur(var(--theme-glass-blur));
    -webkit-backdrop-filter: blur(var(--theme-glass-blur));
}


/* ==========================================================================
   5. HERO THEME
   ========================================================================== */

.hero {
    background:
        var(--theme-deep);
}

.hero__backdrop {
    background-color: var(--theme-deep);
}

.hero::after {
    background:
        linear-gradient(
            180deg,
            rgba(5, 5, 5, 0.04) 0%,
            rgba(5, 5, 5, 0.24) 36%,
            rgba(5, 5, 5, 0.76) 78%,
            rgba(5, 5, 5, 0.98) 100%
        );
    pointer-events: none;
}

.hero__content {
    color: var(--theme-text-primary);
}

.hero__eyebrow {
    color: var(--theme-gold-primary);
}

.hero__title {
    color: var(--theme-text-primary);
    text-shadow:
        0 10px 38px rgba(0, 0, 0, 0.48);
}

.hero__description {
    color: var(--theme-text-secondary);
}


/* ==========================================================================
   6. SECTION HEADERS
   ========================================================================== */

.section-header__eyebrow {
    color: var(--theme-gold-primary);
}

.section-header__title {
    color: var(--theme-text-primary);
}

.section-header__description {
    color: var(--theme-text-secondary);
}

.section-header__action {
    color: var(--theme-text-secondary);
}

.section-header__action:hover {
    color: var(--theme-brand-soft);
}


/* ==========================================================================
   7. BUTTON THEME
   ========================================================================== */

.button--primary,
.btn--primary,
.cta-button {
    background:
        var(--theme-gradient-brand);
    border-color: transparent;
    color: #ffffff;
    box-shadow:
        0 12px 32px rgba(255, 32, 43, 0.16);
}

.button--primary:hover,
.button--primary:focus-visible,
.btn--primary:hover,
.btn--primary:focus-visible,
.cta-button:hover,
.cta-button:focus-visible {
    background:
        linear-gradient(
            135deg,
            #ff3b45 0%,
            #d91420 100%
        );
    box-shadow:
        var(--theme-shadow-brand);
}

.button--secondary,
.btn--secondary {
    background:
        rgba(255, 255, 255, 0.045);
    border-color:
        var(--theme-border-strong);
    color:
        var(--theme-text-primary);
}

.button--secondary:hover,
.button--secondary:focus-visible,
.btn--secondary:hover,
.btn--secondary:focus-visible {
    background:
        rgba(255, 255, 255, 0.08);
    border-color:
        rgba(255, 255, 255, 0.22);
}

.button--gold,
.btn--gold {
    background:
        var(--theme-gradient-gold);
    border-color:
        transparent;
    color:
        var(--theme-text-inverse);
    box-shadow:
        var(--theme-shadow-gold);
}

.button--gold:hover,
.button--gold:focus-visible,
.btn--gold:hover,
.btn--gold:focus-visible {
    filter: brightness(1.04);
}

.button--ghost,
.btn--ghost {
    background:
        transparent;
    border-color:
        var(--theme-border-default);
    color:
        var(--theme-text-secondary);
}

.button--ghost:hover,
.button--ghost:focus-visible,
.btn--ghost:hover,
.btn--ghost:focus-visible {
    background:
        rgba(255, 255, 255, 0.045);
    border-color:
        var(--theme-border-strong);
    color:
        var(--theme-text-primary);
}


/* ==========================================================================
   8. ICON BUTTONS
   ========================================================================== */

.icon-button {
    background:
        rgba(255, 255, 255, 0.045);
    border-color:
        var(--theme-border-default);
    color:
        var(--theme-text-secondary);
}

.icon-button:hover,
.icon-button:focus-visible {
    background:
        rgba(255, 255, 255, 0.09);
    border-color:
        var(--theme-border-strong);
    color:
        var(--theme-text-primary);
}

.icon-button--brand {
    background:
        var(--theme-red-medium);
    border-color:
        var(--theme-border-brand);
    color:
        var(--theme-brand-soft);
}

.icon-button--brand:hover,
.icon-button--brand:focus-visible {
    background:
        var(--theme-red-strong);
    color:
        #ffffff;
}


/* ==========================================================================
   9. SEARCH
   ========================================================================== */

.search-field,
.cinematic-search,
.search-bar input,
.site-search input {
    background:
        rgba(255, 255, 255, 0.045);
    border-color:
        var(--theme-border-default);
    color:
        var(--theme-text-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.search-field::placeholder,
.cinematic-search input::placeholder,
.search-bar input::placeholder,
.site-search input::placeholder {
    color:
        var(--theme-text-muted);
}

.search-field:hover,
.cinematic-search:hover,
.search-bar input:hover,
.site-search input:hover {
    border-color:
        var(--theme-border-strong);
}

.search-field:focus-within,
.cinematic-search:focus-within {
    border-color:
        var(--theme-border-brand);
    box-shadow:
        0 0 0 3px rgba(255, 32, 43, 0.08);
}

.search-field__icon,
.cinematic-search__icon {
    color:
        var(--theme-text-muted);
}


/* ==========================================================================
   10. STORY CARDS
   ========================================================================== */

.story-card,
.story-tile,
.portrait-story-card {
    background:
        var(--theme-secondary);
    border-color:
        var(--theme-border-subtle);
    box-shadow:
        var(--theme-shadow-card);
}

.story-card:hover,
.story-tile:hover,
.portrait-story-card:hover {
    background:
        var(--theme-tertiary);
    border-color:
        var(--theme-border-default);
    box-shadow:
        var(--theme-shadow-elevated);
}

.story-card__media,
.story-tile__media,
.portrait-story-card__media {
    background:
        var(--theme-deep);
}

.story-card__content,
.story-tile__content,
.portrait-story-card__content {
    color:
        var(--theme-text-primary);
}

.story-card__title,
.story-tile__title,
.portrait-story-card__title {
    color:
        var(--theme-text-primary);
}

.story-card__description,
.story-tile__description,
.portrait-story-card__description {
    color:
        var(--theme-text-secondary);
}

.story-card__meta,
.story-tile__meta,
.portrait-story-card__meta {
    color:
        var(--theme-text-muted);
}


/* ==========================================================================
   11. STORY BADGES
   ========================================================================== */

.story-badge,
.story-card__badge {
    background:
        rgba(5, 5, 5, 0.72);
    border-color:
        var(--theme-border-default);
    color:
        var(--theme-text-primary);
    backdrop-filter:
        blur(10px);
    -webkit-backdrop-filter:
        blur(10px);
}

.story-badge--brand,
.story-card__badge--brand {
    background:
        var(--theme-red-medium);
    border-color:
        var(--theme-border-brand);
    color:
        var(--theme-brand-soft);
}

.story-badge--gold,
.story-card__badge--gold {
    background:
        var(--theme-gold-medium-alpha);
    border-color:
        var(--theme-border-gold);
    color:
        var(--theme-gold-soft);
}

.story-badge--muted,
.story-card__badge--muted {
    background:
        rgba(255, 255, 255, 0.045);
    color:
        var(--theme-text-secondary);
}


/* ==========================================================================
   12. MOOD DISCOVERY
   ========================================================================== */

.mood-card {
    background:
        var(--theme-gradient-panel);
    border-color:
        var(--theme-border-subtle);
    color:
        var(--theme-text-primary);
}

.mood-card:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 32, 43, 0.10),
            rgba(255, 255, 255, 0.025)
        );
    border-color:
        var(--theme-border-brand);
    box-shadow:
        var(--theme-shadow-brand);
}

.mood-card__title {
    color:
        var(--theme-text-primary);
}

.mood-card__description {
    color:
        var(--theme-text-secondary);
}


/* ==========================================================================
   13. CONTINUE / FEATURE PANELS
   ========================================================================== */

.continue-card {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );
    border-color:
        var(--theme-border-default);
}

.continue-card:hover {
    border-color:
        var(--theme-border-brand);
    box-shadow:
        var(--theme-shadow-brand);
}

.continue-card__title {
    color:
        var(--theme-text-primary);
}

.continue-card__meta {
    color:
        var(--theme-text-muted);
}

.feature-panel {
    background:
        var(--theme-gradient-panel);
    border-color:
        var(--theme-border-default);
    box-shadow:
        var(--theme-shadow-card);
}

.feature-panel:hover {
    border-color:
        var(--theme-border-strong);
    box-shadow:
        var(--theme-shadow-elevated);
}

.feature-panel__title {
    color:
        var(--theme-text-primary);
}

.feature-panel__description {
    color:
        var(--theme-text-secondary);
}


/* ==========================================================================
   14. AUDIO CINEMA
   ========================================================================== */

.audio-cinema {
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 32, 43, 0.055),
            transparent 42%
        ),
        var(--theme-deep);
    border-color:
        var(--theme-border-subtle);
}

.audio-cinema__visualizer {
    background:
        radial-gradient(
            circle at center,
            rgba(255, 32, 43, 0.10),
            transparent 62%
        );
}

.audio-cinema__visualizer::before {
    background:
        var(--theme-gradient-radial-brand);
}

.audio-cinema__timeline {
    background:
        rgba(255, 255, 255, 0.10);
}

.audio-cinema__progress {
    background:
        var(--theme-gradient-brand);
    box-shadow:
        0 0 16px rgba(255, 32, 43, 0.28);
}

.audio-cinema__time {
    color:
        var(--theme-text-muted);
}

.audio-player {
    background:
        rgba(12, 12, 13, 0.92);
    border-color:
        var(--theme-border-default);
    box-shadow:
        var(--theme-shadow-elevated);
}

.audio-player__cover {
    background:
        var(--theme-tertiary);
}

.audio-player__title {
    color:
        var(--theme-text-primary);
}

.audio-player__meta {
    color:
        var(--theme-text-muted);
}

.audio-player__timeline {
    background:
        rgba(255, 255, 255, 0.10);
}

.audio-player__progress {
    background:
        var(--theme-gradient-brand);
}

.audio-player__time {
    color:
        var(--theme-text-muted);
}


/* ==========================================================================
   15. WRITER / CREATOR / MEMBERSHIP CTA
   ========================================================================== */

.writer-cta,
.membership-cta,
.cta-panel {
    background:
        linear-gradient(
            135deg,
            rgba(255, 32, 43, 0.10),
            rgba(255, 255, 255, 0.025)
        );
    border-color:
        var(--theme-border-brand);
    box-shadow:
        var(--theme-shadow-card);
}

.writer-cta__title,
.membership-cta__title,
.cta-panel__title {
    color:
        var(--theme-text-primary);
}

.writer-cta__description,
.membership-cta__description,
.cta-panel__description {
    color:
        var(--theme-text-secondary);
}


/* ==========================================================================
   16. CHIPS / FILTERS / CATEGORY PILLS
   ========================================================================== */

.category-pill,
.genre-pill,
.chip,
.filter-chip {
    background:
        rgba(255, 255, 255, 0.045);
    border-color:
        var(--theme-border-default);
    color:
        var(--theme-text-secondary);
}

.category-pill:hover,
.genre-pill:hover,
.chip:hover,
.filter-chip:hover {
    background:
        rgba(255, 255, 255, 0.075);
    border-color:
        var(--theme-border-strong);
    color:
        var(--theme-text-primary);
}

.category-pill.is-active,
.genre-pill.is-active,
.chip.is-active,
.filter-chip.is-active,
.category-pill[aria-selected="true"],
.chip[aria-pressed="true"],
.filter-chip[aria-pressed="true"] {
    background:
        var(--theme-red-medium);
    border-color:
        var(--theme-border-brand);
    color:
        var(--theme-brand-soft);
}


/* ==========================================================================
   17. DIVIDERS / AVATARS / STATUS
   ========================================================================== */

.divider {
    background:
        var(--theme-border-default);
}

.avatar {
    background:
        var(--theme-tertiary);
    border-color:
        var(--theme-border-default);
}

.status {
    border: 1px solid transparent;
}

.status--success {
    background:
        rgba(77, 210, 129, 0.10);
    border-color:
        rgba(77, 210, 129, 0.24);
    color:
        #76e5a2;
}

.status--warning {
    background:
        rgba(255, 200, 87, 0.10);
    border-color:
        var(--theme-border-gold);
    color:
        var(--theme-gold-soft);
}

.status--error {
    background:
        rgba(255, 32, 43, 0.10);
    border-color:
        var(--theme-border-brand);
    color:
        var(--theme-brand-soft);
}

.status--info {
    background:
        rgba(100, 160, 255, 0.10);
    border-color:
        rgba(100, 160, 255, 0.24);
    color:
        #9fc2ff;
}


/* ==========================================================================
   18. MODAL / DRAWER
   ========================================================================== */

.modal,
.drawer {
    background:
        rgba(9, 9, 10, 0.97);
    border-color:
        var(--theme-border-default);
    box-shadow:
        var(--theme-shadow-elevated);
}

.modal__backdrop,
.drawer__backdrop {
    background:
        rgba(0, 0, 0, 0.76);
    backdrop-filter:
        blur(8px);
    -webkit-backdrop-filter:
        blur(8px);
}

.modal__title,
.drawer__title {
    color:
        var(--theme-text-primary);
}

.modal__description,
.drawer__description {
    color:
        var(--theme-text-secondary);
}


/* ==========================================================================
   19. EMPTY / ERROR / LOADING STATES
   ========================================================================== */

.empty-state,
.error-state {
    background:
        var(--theme-gradient-panel);
    border-color:
        var(--theme-border-subtle);
}

.empty-state__title,
.error-state__title {
    color:
        var(--theme-text-primary);
}

.empty-state__description,
.error-state__description {
    color:
        var(--theme-text-muted);
}

.error-state {
    border-color:
        rgba(255, 32, 43, 0.20);
}

.loading-state {
    color:
        var(--theme-text-secondary);
}


/* ==========================================================================
   20. SKELETON
   ========================================================================== */

.skeleton {
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.035) 20%,
            rgba(255, 255, 255, 0.075) 38%,
            rgba(255, 255, 255, 0.035) 56%
        );
    background-size:
        220% 100%;
}


/* ==========================================================================
   21. FOOTER V4 — CINEMATIC END CREDITS
   ========================================================================== */

.site-footer--credits {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 32, 43, 0.055),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #0a0a0b 0%,
            #060606 58%,
            #040404 100%
        );
    border-top-color:
        var(--theme-border-subtle);
}

.site-footer--credits::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );
}

.site-footer__eyebrow {
    color:
        var(--theme-gold-primary);
}

.site-footer__headline {
    color:
        var(--theme-text-primary);
    text-shadow:
        0 10px 40px rgba(0, 0, 0, 0.44);
}

.site-footer__subline {
    color:
        var(--theme-text-secondary);
}

.site-footer__columns {
    border-top-color:
        var(--theme-border-subtle);
}

.site-footer__column-title {
    color:
        var(--theme-text-primary);
}

.site-footer__column a {
    color:
        var(--theme-text-muted);
}

.site-footer__column a:hover,
.site-footer__column a:focus-visible {
    color:
        var(--theme-text-primary);
}

.site-footer__cta {
    background:
        var(--theme-gradient-brand);
    color:
        #ffffff;
    box-shadow:
        var(--theme-shadow-brand);
}

.site-footer__cta:hover,
.site-footer__cta:focus-visible {
    box-shadow:
        0 18px 50px rgba(255, 32, 43, 0.24);
}

.site-footer__bottom {
    border-top-color:
        var(--theme-border-subtle);
    color:
        var(--theme-text-muted);
}


/* ==========================================================================
   22. READING EXPERIENCE
   ========================================================================== */

.reading-layout {
    color:
        var(--theme-text-primary);
}

.reading-layout__content {
    color:
        var(--theme-text-primary);
}

.reading-layout__content p {
    color:
        var(--theme-text-secondary);
}

.reading-layout__content strong {
    color:
        var(--theme-text-primary);
}

.reading-layout__content blockquote {
    border-left-color:
        var(--theme-brand-primary);
    color:
        var(--theme-text-secondary);
    background:
        rgba(255, 32, 43, 0.035);
}

.reading-layout__content a {
    color:
        var(--theme-brand-soft);
}

.reading-layout__content a:hover {
    color:
        var(--theme-gold-soft);
}


/* ==========================================================================
   23. IMMERSIVE EXPERIENCE
   ========================================================================== */

.experience {
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 32, 43, 0.05),
            transparent 52%
        ),
        #050505;
}

.experience__screen {
    background:
        rgba(10, 10, 11, 0.88);
    border-color:
        var(--theme-border-subtle);
    box-shadow:
        var(--theme-shadow-elevated);
}

.experience__overlay {
    background:
        var(--theme-gradient-cinematic);
}

.experience__title {
    color:
        var(--theme-text-primary);
}

.experience__description {
    color:
        var(--theme-text-secondary);
}


/* ==========================================================================
   24. FIXED PLAYER / PLAYER SHELL
   ========================================================================== */

.player-shell {
    background:
        rgba(8, 8, 9, 0.94);
    border-top-color:
        var(--theme-border-default);
    box-shadow:
        0 -18px 55px rgba(0, 0, 0, 0.42);
    backdrop-filter:
        blur(18px);
    -webkit-backdrop-filter:
        blur(18px);
}

.player-shell__title {
    color:
        var(--theme-text-primary);
}

.player-shell__meta {
    color:
        var(--theme-text-muted);
}

.player-shell__progress {
    background:
        rgba(255, 255, 255, 0.10);
}

.player-shell__progress > span {
    background:
        var(--theme-gradient-brand);
}


/* ==========================================================================
   25. TEXT UTILITIES
   ========================================================================== */

.text-primary {
    color:
        var(--theme-text-primary);
}

.text-secondary {
    color:
        var(--theme-text-secondary);
}

.text-muted {
    color:
        var(--theme-text-muted);
}

.text-disabled {
    color:
        var(--theme-text-disabled);
}

.text-brand,
.accent-brand {
    color:
        var(--theme-brand-primary);
}

.text-gold,
.accent-gold {
    color:
        var(--theme-gold-primary);
}


/* ==========================================================================
   26. GLASS UTILITIES
   ========================================================================== */

.glass {
    background:
        var(--theme-glass-background);
    border-color:
        var(--theme-glass-border);
    backdrop-filter:
        blur(var(--theme-glass-blur));
    -webkit-backdrop-filter:
        blur(var(--theme-glass-blur));
}

.glass-heavy {
    background:
        var(--theme-glass-background-heavy);
    border-color:
        var(--theme-glass-border);
    backdrop-filter:
        blur(24px);
    -webkit-backdrop-filter:
        blur(24px);
}


/* ==========================================================================
   27. CINEMATIC OVERLAYS
   ========================================================================== */

.cinematic-overlay {
    background:
        var(--theme-gradient-cinematic);
}

.cinematic-overlay--brand {
    background:
        linear-gradient(
            180deg,
            rgba(255, 32, 43, 0.02),
            rgba(255, 32, 43, 0.14)
        );
}

.cinematic-overlay--gold {
    background:
        linear-gradient(
            180deg,
            rgba(255, 200, 87, 0.02),
            rgba(255, 200, 87, 0.10)
        );
}


/* ==========================================================================
   28. FOCUS VISUALS
   ========================================================================== */

:focus-visible {
    outline:
        2px solid var(--theme-brand-primary);
    outline-offset:
        3px;
}

[data-theme-focus="gold"]:focus-visible {
    outline-color:
        var(--theme-gold-primary);
}


/* ==========================================================================
   29. HIGH CONTRAST SUPPORT
   ========================================================================== */

@media (forced-colors: active) {
    .story-card,
    .story-tile,
    .portrait-story-card,
    .feature-panel,
    .audio-player,
    .modal,
    .drawer {
        border:
            1px solid CanvasText;
    }
}

/* ==========================================================================
   31. PRINT
   ========================================================================== */

@media print {
    html,
    body,
    .page {
        background:
            #ffffff;
        color:
            #000000;
    }

    .site-header,
    .site-footer,
    .player-shell,
    .modal,
    .drawer {
        box-shadow:
            none;
    }

    .story-card,
    .story-tile,
    .portrait-story-card,
    .feature-panel,
    .audio-player {
        background:
            #ffffff;
        border-color:
            #cccccc;
        color:
            #000000;
    }
}