:root {
    --trr-bg-1: #000000;
    --trr-bg-2: #08111f;
    --trr-bg-3: #030912;
    --trr-shell: rgba(8, 17, 31, 0.98);
    --trr-shell-2: rgba(12, 22, 39, 0.9);
    --trr-panel-header: linear-gradient(180deg, #78a8dd 0%, #4d79b8 100%);
    --trr-panel-body: linear-gradient(180deg, rgba(112, 159, 214, 0.96) 0%, rgba(82, 128, 187, 0.96) 100%);
    --trr-glass: linear-gradient(180deg, rgba(112, 159, 214, 0.96) 0%, rgba(82, 128, 187, 0.96) 100%);
    --trr-glass-2: linear-gradient(180deg, #dde7f3 0%, #c4d4e8 100%);
    --trr-border: rgba(255, 255, 255, 0.16);
    --trr-border-strong: rgba(255, 255, 255, 0.30);
    --trr-text: #ffffff;
    --trr-muted: #eef6ff;
    --trr-accent: #99ccff;
    --trr-accent-2: #4477aa;
    --trr-gold: #ffd98b;
    --trr-gold-soft: #ffd98b;
    --trr-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
    --trr-shadow-soft: 0 12px 24px rgba(0, 0, 0, 0.18);
}

html {
    background-color: #000000 !important;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(8, 17, 31, 0.34) 58%, rgba(0, 0, 0, 0.62) 100%),
        url("../gallery/trr-homepage-background.png") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body {
    background: #000000 !important;
    color: #666666 !important;
}

body::before,
body::after {
    display: none !important;
}

.site-shell {
    max-width: 1582px;
    padding: 18px;
    border: 1px solid rgba(120, 164, 225, 0.18);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(8, 17, 31, 0.86) 0%, rgba(3, 9, 18, 0.82) 100%);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
}

.hero,
.panel,
.site-footer,
.crew-column,
.crew-player,
.quick-actions,
.stack-panel,
.player-panel,
.memorial-panel,
.resource-links,
.info-card,
.widget-stack {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: var(--trr-panel-body) !important;
    box-shadow: var(--trr-shadow) !important;
}

.hero {
    padding: 18px;
}

.hero::before {
    display: none !important;
}

.hero-topbar {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.eyebrow,
.status-pill,
.footer-badge,
.panel__kicker {
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: #4477aa !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.top-nav {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: var(--trr-panel-body);
    box-shadow: var(--trr-shadow-soft);
}

.top-nav__link,
.action-button,
.crew-link,
.resource-link {
    border-color: rgba(255, 255, 255, 0.20) !important;
    background: linear-gradient(180deg, #78a8dd 0%, #4d79b8 52%, #4477aa 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(68, 119, 170, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.top-nav__link:hover,
.top-nav__link:focus-visible,
.top-nav__link.is-active,
.action-button:hover,
.action-button:focus-visible,
.crew-link:hover,
.crew-link:focus-visible,
.resource-link:hover,
.resource-link:focus-visible {
    background: #225588 !important;
    color: #99ccff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

.action-button--primary {
    background: linear-gradient(180deg, #78a8dd 0%, #4d79b8 52%, #4477aa 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(153, 204, 255, 0.72) !important;
    box-shadow: 0 12px 26px rgba(68, 119, 170, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.panel--announcement {
    background: var(--trr-panel-body) !important;
}

.panel--announcement::before {
    background: linear-gradient(180deg, #ffd98b 0%, #78a8dd 100%) !important;
}

.panel--announcement p,
.panel__header h2,
.crew-player__title,
.crew-column__title,
.quick-actions__title,
.stack-panel__title,
.player-panel__title,
.memorial-panel__title,
.info-card__title,
.widget-stack__title {
    color: #ffffff !important;
}

.crew-column__title,
.quick-actions__title,
.stack-panel__title,
.player-panel__title,
.memorial-panel__title,
.info-card__title,
.widget-stack__title {
    background: var(--trr-panel-header) !important;
}

.crew-player__title::before,
.crew-player__title::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.48) 100%) !important;
}

.crew-player__title::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.resource-links,
.info-card__body,
.widget-stack .memorial-card,
.mini-card,
.memorial-card,
.embed-shell,
.promo-card {
    border-color: rgba(71, 94, 131, 0.12) !important;
    background: #dde7f3 !important;
    color: #445067 !important;
}

.resource-links {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: var(--trr-panel-body) !important;
    color: #ffffff !important;
    box-shadow: var(--trr-shadow) !important;
}

.resource-link,
.crew-link {
    min-height: 48px;
}

.info-card__copy,
.panel__subtle,
.site-footer__copy,
.site-footer__copy p,
.memorial-card span {
    color: #445067 !important;
}

.memorial-card span {
    background: #dde7f3;
}

.badge-grid .mini-card:nth-child(even),
.resource-links .resource-link:nth-child(even),
.crew-links .crew-link:nth-child(even) {
    background: linear-gradient(180deg, #78a8dd 0%, #4d79b8 52%, #4477aa 100%) !important;
    color: #ffffff !important;
}

.hero-brand__glow {
    background: radial-gradient(circle, rgba(255, 217, 139, 0.30) 0%, rgba(153, 204, 255, 0.18) 42%, rgba(153, 204, 255, 0) 74%) !important;
}

.hero-brand__logo {
    filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.34)) !important;
}

.hero-live-banner,
iframe {
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.site-footer {
    border-color: rgba(255, 255, 255, 0.20) !important;
    background:
        linear-gradient(180deg, rgba(120, 168, 221, 0.98) 0%, rgba(77, 121, 184, 0.98) 56%, rgba(68, 119, 170, 0.98) 100%) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24) !important;
}

.site-footer::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(255, 255, 255, 0) 100%) !important;
}

.site-footer__copy,
.site-footer__copy p {
    color: #ffffff !important;
}

.site-footer__copy a {
    color: #dceeff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

.site-footer__copy a:hover,
.site-footer__copy a:focus-visible {
    color: #ffd98b !important;
}

@media (max-width: 640px) {
    .site-shell {
        padding: 8px;
    }

    .top-nav {
        width: 100%;
    }
}