:root {
    --bg-top: #120414;
    --bg-mid: #210824;
    --bg-bottom: #09030c;
    --surface: rgba(24, 13, 31, 0.64);
    --surface-strong: rgba(15, 9, 21, 0.82);
    --line: rgba(255, 255, 255, 0.09);
    --text: #f7f1ff;
    --muted: #d8c9f7;
    --subtle: #a990d1;
    --accent: #8d37ff;
    --accent-2: #4a168e;
    --warm: #ffb34f;
    --danger: #ff86ac;
    --dynamic-accent-rgb: 141, 55, 255;
    --dynamic-accent-soft-rgb: 161, 79, 255;
    --dynamic-accent-deep-rgb: 70, 25, 120;
    --ratio: 0.5625;
    --screen-pad-x: 2.45rem;
    --screen-pad-y: 2.45rem;
}

@media (orientation: landscape) {
    :root {
        --ratio: 1.7777777778;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    display: grid;
    place-items: center;
    font-family: "Rajdhani", sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 32%, var(--bg-bottom) 100%);
}

html.cursor-hidden,
html.cursor-hidden body,
html.cursor-hidden body *,
body.cursor-hidden,
body.cursor-hidden * {
    cursor: none !important;
}

.screen {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) minmax(20rem, 26%);
    width: min(100vw, calc(100vh * var(--ratio)));
    height: min(100vh, calc(100vw / var(--ratio)));
    aspect-ratio: 9 / 16;
    margin: 0;
    overflow: hidden;
    gap: 0;
    padding: var(--screen-pad-y) var(--screen-pad-x) 2.2rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0)),
        url('bg-base.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 100% 100%, 100% 100%;
}

@supports (width: 100dvw) {
    .screen {
        width: min(100dvw, calc(100dvh * var(--ratio)));
        height: min(100dvh, calc(100dvw / var(--ratio)));
    }
}

.screen::before {
    content: "";
    position: absolute;
    inset: -4% -8% -6%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 17% 12%, rgba(var(--dynamic-accent-soft-rgb), 0.16), transparent 30%),
        radial-gradient(circle at 76% 72%, rgba(var(--dynamic-accent-rgb), 0.24), transparent 24%),
        radial-gradient(circle at 56% 36%, rgba(var(--dynamic-accent-deep-rgb), 0.14), transparent 33%);
    transform: translate3d(0, 0, 0);
}

.weather-overlay,
.weather-overlay::before,
.weather-overlay::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.weather-overlay::before,
.weather-overlay::after {
    content: "";
}

.topbar-atmosphere,
.topbar-atmosphere::before,
.topbar-atmosphere::after {
    position: absolute;
    pointer-events: none;
}

.topbar-atmosphere {
    inset: 0;
}

.topbar-atmosphere::before,
.topbar-atmosphere::after {
    content: "";
    left: 31%;
    top: 0.8rem;
    width: 38%;
    height: 78%;
    opacity: 0;
}

.screen[data-weather-theme="sunny"] .weather-overlay::before {
    inset: -8rem auto auto 58%;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 202, 79, 0.4), rgba(255, 202, 79, 0.08) 42%, transparent 62%);
    filter: blur(8px);
}

.screen[data-weather-theme="rain"][data-weather-rain="active"] .weather-overlay::after {
    inset: 0 0 auto 0;
    height: 17rem;
    opacity: 0.28;
    background-image:
        linear-gradient(102deg, transparent 0%, transparent 46%, rgba(195, 220, 255, 0.55) 47%, transparent 49%, transparent 100%),
        linear-gradient(100deg, transparent 0%, transparent 58%, rgba(195, 220, 255, 0.35) 59%, transparent 61%, transparent 100%);
    background-size: 9rem 100%, 13rem 100%;
    animation: rain-slide 14s linear infinite;
    animation-timing-function: steps(24, end);
}

.screen[data-weather-theme="cloudy"] .weather-overlay::before,
.screen[data-weather-theme="fog"] .weather-overlay::before,
.screen[data-weather-theme="night"] .weather-overlay::before,
.screen[data-weather-theme="snow"] .weather-overlay::before,
.screen[data-weather-theme="storm"] .weather-overlay::before {
    inset: 0 0 auto 0;
    height: 14rem;
    background: linear-gradient(180deg, rgba(205, 213, 255, 0.08), transparent 78%);
}

@keyframes rain-slide {
    from {
        transform: translateY(-4rem);
    }
    to {
        transform: translateY(5rem);
    }
}

@keyframes header-rain-slide {
    from {
        transform: translateY(-1.5rem);
    }
    to {
        transform: translateY(2.5rem);
    }
}

@keyframes drift-wave {
    from {
        transform: translateX(-0.4rem) translateY(0.12rem);
    }
    to {
        transform: translateX(0.45rem) translateY(-0.16rem);
    }
}

@keyframes wind-drift {
    from {
        transform: translateX(-8%) translateY(0);
    }
    to {
        transform: translateX(8%) translateY(-1.2%);
    }
}

@keyframes glyph-float {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(0.36rem);
    }
    100% {
        transform: translateX(-50%) translateY(-0.18rem);
    }
}

@keyframes moon-wobble {
    0% {
        transform: translateX(-50%) translateY(0.02rem) rotate(0deg) scale(1);
    }
    34% {
        transform: translateX(-50%) translateY(0.02rem) rotate(0deg) scale(1);
    }
    39% {
        transform: translateX(calc(-50% - 0.12rem)) translateY(-0.16rem) rotate(-0.9deg) scale(1.006);
    }
    44% {
        transform: translateX(calc(-50% + 0.14rem)) translateY(0.1rem) rotate(0.78deg) scale(0.998);
    }
    48% {
        transform: translateX(calc(-50% - 0.08rem)) translateY(0.16rem) rotate(-0.55deg) scale(1.003);
    }
    53% {
        transform: translateX(calc(-50% + 0.06rem)) translateY(-0.08rem) rotate(0.36deg) scale(1.001);
    }
    58% {
        transform: translateX(-50%) translateY(0.02rem) rotate(0deg) scale(1);
    }
    100% {
        transform: translateX(-50%) translateY(0.02rem) rotate(0deg) scale(1);
    }
}

@keyframes glyph-ghost-drift {
    0% {
        transform: translateX(-50%) translateY(0.2rem) scale(1.02);
    }
    50% {
        transform: translateX(calc(-50% + 0.6rem)) translateY(-0.45rem) scale(1.05);
    }
    100% {
        transform: translateX(calc(-50% - 0.45rem)) translateY(0.35rem) scale(1.01);
    }
}

@keyframes glyph-pulse {
    0% {
        opacity: 0.22;
        transform: translateX(-50%) scale(0.98);
    }
    50% {
        opacity: 0.34;
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        opacity: 0.24;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes glyph-aura-drift {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        transform: translateX(calc(-50% + 0.35rem)) translateY(-0.25rem) scale(1.04);
    }
    100% {
        transform: translateX(calc(-50% - 0.25rem)) translateY(0.18rem) scale(0.99);
    }
}

@keyframes glyph-parallax-main {
    0% {
        margin-left: -1.35rem;
        margin-top: -0.12rem;
    }
    50% {
        margin-left: 1.45rem;
        margin-top: 0.42rem;
    }
    100% {
        margin-left: -1.35rem;
        margin-top: -0.12rem;
    }
}

@keyframes glyph-parallax-glow {
    0% {
        margin-left: -1.05rem;
        margin-top: -0.22rem;
    }
    50% {
        margin-left: 1.18rem;
        margin-top: 0.28rem;
    }
    100% {
        margin-left: -1.05rem;
        margin-top: -0.22rem;
    }
}

@keyframes glyph-parallax-ghost {
    0% {
        margin-left: -1.9rem;
        margin-top: -0.85rem;
    }
    32% {
        margin-left: -0.55rem;
        margin-top: -1.45rem;
    }
    68% {
        margin-left: 0.95rem;
        margin-top: -0.12rem;
    }
    100% {
        margin-left: -1.9rem;
        margin-top: -0.85rem;
    }
}

@keyframes moon-mobile-sway {
    0% {
        transform: translateX(-50%) translateY(0.08rem) rotate(-1.4deg) scale(0.998);
    }
    25% {
        transform: translateX(calc(-50% + 0.18rem)) translateY(-0.22rem) rotate(-0.35deg) scale(1.006);
    }
    50% {
        transform: translateX(calc(-50% + 0.42rem)) translateY(0.16rem) rotate(1.25deg) scale(1.01);
    }
    75% {
        transform: translateX(calc(-50% - 0.12rem)) translateY(0.28rem) rotate(0.18deg) scale(1.002);
    }
    100% {
        transform: translateX(-50%) translateY(0.08rem) rotate(-1.4deg) scale(0.998);
    }
}

@keyframes qr-wobble {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    38% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    43% {
        transform: translate3d(-0.2rem, -0.32rem, 0) rotate(-1.4deg) scale(1.008);
    }
    48% {
        transform: translate3d(0.22rem, 0.2rem, 0) rotate(1.15deg) scale(0.996);
    }
    52% {
        transform: translate3d(-0.14rem, 0.36rem, 0) rotate(-0.72deg) scale(1.004);
    }
    57% {
        transform: translate3d(0.16rem, -0.12rem, 0) rotate(0.5deg) scale(1.002);
    }
    62% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
}

@keyframes second-sweep {
    0% {
        transform: translateX(-50%) rotate(var(--second-start-angle, 0deg));
    }
    95.5% {
        transform: translateX(-50%) rotate(calc(var(--second-start-angle, 0deg) + 360deg));
    }
    100% {
        transform: translateX(-50%) rotate(calc(var(--second-start-angle, 0deg) + 360deg));
    }
}

@keyframes aura-breathe {
    0% {
        opacity: 0.1;
        transform: scale(0.98);
    }
    50% {
        opacity: 0.18;
        transform: scale(1.02);
    }
    100% {
        opacity: 0.12;
        transform: scale(1);
    }
}

@keyframes current-event-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 179, 79, 0);
    }
    50% {
        box-shadow: 0 0 2.4rem 0 rgba(255, 179, 79, 0.16);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 179, 79, 0);
    }
}

@keyframes current-event-gradient {
    0% {
        background-position: 0% 50%;
        filter: saturate(1);
    }
    50% {
        background-position: 100% 50%;
        filter: saturate(1.08);
    }
    100% {
        background-position: 0% 50%;
        filter: saturate(1);
    }
}

@keyframes upcoming-event-gradient {
    0% {
        background-position: 0% 50%;
        opacity: 0.88;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.88;
    }
}

@keyframes current-event-sheen {
    0% {
        transform: translateX(-130%) skewX(-14deg);
        opacity: 0;
    }
    18% {
        opacity: 0.08;
    }
    42% {
        opacity: 0.22;
    }
    58% {
        opacity: 0.06;
    }
    100% {
        transform: translateX(145%) skewX(-14deg);
        opacity: 0;
    }
}

.topbar,
.main-grid,
.release-strip {
    position: relative;
    z-index: 1;
}

.topbar {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    gap: 1.5rem;
    min-height: 20.5rem;
    margin: calc(-1 * var(--screen-pad-y)) calc(-1 * var(--screen-pad-x)) 0;
    padding: 2.8rem var(--screen-pad-x) 3.4rem;
    background: linear-gradient(180deg, rgba(40, 22, 55, 0.3), rgba(18, 10, 26, 0.05) 72%, transparent 100%);
    overflow: visible;
}

.topbar::before,
.topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.screen[data-weather-theme="sunny"] .topbar::before {
    inset: -6rem -6rem auto auto;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 99, 0.38), rgba(255, 214, 99, 0.08) 38%, transparent 66%);
}

.screen[data-weather-theme="sunny"] .topbar::after {
    inset: 0;
    background:
        linear-gradient(120deg, transparent 52%, rgba(255, 224, 149, 0.12) 66%, transparent 84%),
        linear-gradient(180deg, rgba(255, 229, 155, 0.06), transparent 74%);
}

.screen[data-weather-theme="sunny"] .topbar-atmosphere::before {
    opacity: 0.34;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 218, 110, 0.22), transparent 38%),
        linear-gradient(90deg, transparent 34%, rgba(255, 228, 154, 0.18) 50%, transparent 66%);
    filter: blur(0.35rem);
}

.screen[data-weather-theme="sunny"] .topbar-atmosphere::after {
    opacity: 0.24;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 2.9rem, rgba(255, 228, 154, 0.12) 2.92rem 3.12rem, transparent 3.18rem),
        linear-gradient(90deg, transparent 48%, rgba(255, 228, 154, 0.22) 50%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(255, 228, 154, 0.16) 50%, transparent 52%);
    mix-blend-mode: screen;
}

.screen[data-weather-theme="rain"] .topbar::before {
    inset: 0;
    background: linear-gradient(180deg, rgba(196, 215, 255, 0.1), transparent 78%);
}

.screen[data-weather-theme="rain"][data-weather-rain="active"] .topbar::after {
    inset: -1rem 0 0 0;
    opacity: 0.34;
    background-image:
        linear-gradient(103deg, transparent 0%, transparent 46%, rgba(214, 231, 255, 0.58) 47%, transparent 49%, transparent 100%),
        linear-gradient(100deg, transparent 0%, transparent 62%, rgba(214, 231, 255, 0.28) 63%, transparent 65%, transparent 100%);
    background-size: 7rem 100%, 10rem 100%;
    animation: header-rain-slide 8s linear infinite;
    animation-timing-function: steps(24, end);
}

.screen[data-weather-theme="rain"][data-weather-rain="active"] .topbar-atmosphere::before {
    opacity: 0.28;
    background-image:
        linear-gradient(103deg, transparent 10%, rgba(203, 226, 255, 0.22) 18%, transparent 26%),
        linear-gradient(100deg, transparent 34%, rgba(203, 226, 255, 0.18) 42%, transparent 49%),
        linear-gradient(102deg, transparent 58%, rgba(203, 226, 255, 0.2) 66%, transparent 72%);
    background-size: 120% 100%, 140% 100%, 125% 100%;
    animation: wind-drift 9s ease-in-out infinite alternate;
    animation-timing-function: steps(22, end);
}

.screen[data-weather-theme="cloudy"] .topbar::before,
.screen[data-weather-theme="fog"] .topbar::before,
.screen[data-weather-theme="night"] .topbar::before,
.screen[data-weather-theme="snow"] .topbar::before,
.screen[data-weather-theme="storm"] .topbar::before {
    inset: 0;
    background: linear-gradient(180deg, rgba(205, 213, 255, 0.08), transparent 72%);
}

.screen[data-weather-theme="cloudy"] .topbar-atmosphere::before,
.screen[data-weather-theme="fog"] .topbar-atmosphere::before {
    opacity: 0.2;
    background:
        radial-gradient(ellipse at 40% 48%, rgba(228, 235, 255, 0.12), transparent 36%),
        radial-gradient(ellipse at 62% 44%, rgba(228, 235, 255, 0.09), transparent 32%);
    filter: blur(0.2rem);
    animation: drift-wave 12s ease-in-out infinite alternate;
    animation-timing-function: steps(20, end);
}

.screen[data-weather-temp="frost"] .topbar-atmosphere::after {
    opacity: 0.26;
    background:
        radial-gradient(circle at 18% 34%, rgba(218, 239, 255, 0.2) 0 0.14rem, transparent 0.18rem),
        radial-gradient(circle at 34% 68%, rgba(218, 239, 255, 0.18) 0 0.12rem, transparent 0.17rem),
        radial-gradient(circle at 58% 28%, rgba(218, 239, 255, 0.16) 0 0.11rem, transparent 0.16rem),
        radial-gradient(circle at 76% 56%, rgba(218, 239, 255, 0.18) 0 0.12rem, transparent 0.17rem),
        radial-gradient(circle at 88% 22%, rgba(218, 239, 255, 0.14) 0 0.1rem, transparent 0.15rem),
        radial-gradient(circle at 50% 50%, rgba(218, 239, 255, 0.12) 0 0.08rem, transparent 0.14rem);
    mix-blend-mode: screen;
}

.screen[data-weather-theme="snow"] .topbar-atmosphere::after {
    opacity: 0.28;
    background:
        radial-gradient(circle at 16% 30%, rgba(235, 244, 255, 0.24) 0 0.16rem, transparent 0.2rem),
        radial-gradient(circle at 29% 58%, rgba(235, 244, 255, 0.18) 0 0.14rem, transparent 0.19rem),
        radial-gradient(circle at 46% 22%, rgba(235, 244, 255, 0.2) 0 0.12rem, transparent 0.17rem),
        radial-gradient(circle at 63% 62%, rgba(235, 244, 255, 0.22) 0 0.16rem, transparent 0.21rem),
        radial-gradient(circle at 78% 36%, rgba(235, 244, 255, 0.17) 0 0.13rem, transparent 0.18rem),
        radial-gradient(circle at 90% 52%, rgba(235, 244, 255, 0.18) 0 0.14rem, transparent 0.19rem);
    animation: drift-wave 14s ease-in-out infinite alternate;
    animation-timing-function: steps(18, end);
    mix-blend-mode: screen;
}

.topbar-glyph {
    position: absolute;
    inset: 0 0 -15rem;
    pointer-events: none;
    --weather-glyph-size: 15.2rem;
    --weather-glyph-top: 1rem;
    --weather-glyph-left: 44%;
    --weather-glyph-ghost-top-offset: 1.25rem;
    --weather-glyph-ghost-size-multiplier: 1.82;
    --weather-glyph-main-opacity: 0.44;
    --weather-glyph-glow-opacity: 0.13;
    --weather-glyph-ghost-opacity: 0.05;
    --weather-glyph-glow-rgb: 228, 233, 255;
    --weather-glyph-glow-hue: 232deg;
    --weather-glyph-glow-sat: 1.45;
    --weather-glyph-glow-bright: 1.02;
}

.topbar-glyph-image {
    position: absolute;
    left: var(--weather-glyph-left);
    top: var(--weather-glyph-top);
    transform: translateX(-50%);
    width: var(--weather-glyph-size);
    height: var(--weather-glyph-size);
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
}

.topbar-glyph-image[hidden] {
    display: none;
}

.topbar-glyph::before {
    content: "";
    position: absolute;
    left: var(--weather-glyph-left);
    top: calc(var(--weather-glyph-top) - 2rem);
    width: calc(var(--weather-glyph-size) * 1.9);
    height: calc(var(--weather-glyph-size) * 1.9);
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(var(--weather-glyph-glow-rgb), 0.16), rgba(var(--weather-glyph-glow-rgb), 0.05) 32%, transparent 68%);
    opacity: 0.5;
    filter: blur(1.2rem);
    animation: glyph-aura-drift 18s ease-in-out infinite alternate;
    animation-timing-function: steps(24, end);
}

.topbar-glyph-image.is-main {
    opacity: var(--weather-glyph-main-opacity);
    filter:
        drop-shadow(0 0 1.4rem rgba(var(--weather-glyph-glow-rgb), 0.22))
        drop-shadow(0 1.1rem 2rem rgba(0, 0, 0, 0.18));
    animation:
        glyph-float 22s ease-in-out infinite,
        glyph-parallax-main 34s ease-in-out infinite;
    animation-timing-function: steps(28, end), steps(22, end);
    z-index: 2;
}

.topbar-glyph-image.is-glow {
    width: calc(var(--weather-glyph-size) * 1.18);
    height: calc(var(--weather-glyph-size) * 1.18);
    top: calc(var(--weather-glyph-top) - 0.3rem);
    opacity: var(--weather-glyph-glow-opacity);
    filter:
        blur(1.5rem)
        sepia(0.95)
        hue-rotate(var(--weather-glyph-glow-hue))
        saturate(1.12)
        saturate(var(--weather-glyph-glow-sat))
        brightness(var(--weather-glyph-glow-bright))
        drop-shadow(0 0 2.8rem rgba(var(--weather-glyph-glow-rgb), 0.2));
    mix-blend-mode: screen;
    animation:
        glyph-pulse 12s ease-in-out infinite,
        glyph-parallax-glow 34s ease-in-out infinite;
    animation-timing-function: steps(18, end), steps(20, end);
    z-index: 1;
}

.topbar-glyph-image.is-ghost {
    width: calc(var(--weather-glyph-size) * var(--weather-glyph-ghost-size-multiplier));
    height: calc(var(--weather-glyph-size) * var(--weather-glyph-ghost-size-multiplier));
    top: calc(var(--weather-glyph-top) + var(--weather-glyph-ghost-top-offset));
    opacity: var(--weather-glyph-ghost-opacity);
    filter:
        blur(0.12rem)
        saturate(0.84)
        drop-shadow(0 0 3.4rem rgba(var(--weather-glyph-glow-rgb), 0.1));
    mix-blend-mode: screen;
    animation:
        glyph-ghost-drift 42s ease-in-out infinite alternate,
        glyph-parallax-ghost 46s ease-in-out infinite;
    animation-timing-function: steps(18, end), steps(16, end);
    z-index: 0;
}

.topbar-glyph::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms ease;
}

.screen[data-weather-theme="sunny"] .topbar-glyph-image.is-main {
    filter:
        drop-shadow(0 0 2.2rem rgba(255, 220, 128, 0.18))
        drop-shadow(0 0 4rem rgba(255, 210, 96, 0.12));
}

.screen[data-weather-theme="sunny"] .topbar-glyph {
    --weather-glyph-size: 18.6rem;
    --weather-glyph-top: -0.1rem;
    --weather-glyph-ghost-top-offset: 1.55rem;
    --weather-glyph-main-opacity: 0.52;
    --weather-glyph-glow-opacity: 0.16;
    --weather-glyph-ghost-opacity: 0.06;
    --weather-glyph-glow-rgb: 255, 220, 128;
    --weather-glyph-glow-hue: 335deg;
    --weather-glyph-glow-sat: 1.9;
    --weather-glyph-glow-bright: 1.08;
}

.screen[data-weather-theme="night"] .topbar-glyph-image.is-main {
    filter:
        drop-shadow(0 0 2.8rem rgba(228, 233, 255, 0.14))
        drop-shadow(0 0 5rem rgba(var(--dynamic-accent-soft-rgb), 0.1));
}

.screen[data-weather-theme="night"] .topbar-glyph {
    --weather-glyph-size: 14.4rem;
    --weather-glyph-top: 0.95rem;
    --weather-glyph-ghost-top-offset: -4.3rem;
    --weather-glyph-ghost-size-multiplier: 1.82;
    --weather-glyph-main-opacity: 0.4;
    --weather-glyph-glow-opacity: 0.15;
    --weather-glyph-ghost-opacity: 0.03;
    --weather-glyph-glow-rgb: 156, 198, 255;
    --weather-glyph-glow-hue: 222deg;
    --weather-glyph-glow-sat: 1.5;
    --weather-glyph-glow-bright: 1.06;
}

.screen[data-weather-theme="night"] .topbar-glyph-image.is-main {
    animation:
        moon-mobile-sway 27s ease-in-out infinite,
        glyph-parallax-main 40s ease-in-out infinite;
    animation-timing-function: steps(26, end), steps(20, end);
}

.screen[data-weather-theme="rain"] .topbar-glyph-image.is-main {
    filter: drop-shadow(0 0 2.2rem rgba(214, 231, 255, 0.12));
}

.screen[data-weather-theme="rain"] .topbar-glyph {
    --weather-glyph-size: 17.1rem;
    --weather-glyph-ghost-top-offset: 1.2rem;
    --weather-glyph-main-opacity: 0.46;
    --weather-glyph-glow-opacity: 0.13;
    --weather-glyph-ghost-opacity: 0.05;
    --weather-glyph-glow-rgb: 214, 231, 255;
    --weather-glyph-glow-hue: 198deg;
    --weather-glyph-glow-sat: 1.55;
    --weather-glyph-glow-bright: 1.02;
}

.screen[data-weather-theme="cloudy"] .topbar-glyph {
    --weather-glyph-size: 16.8rem;
    --weather-glyph-ghost-top-offset: 1.25rem;
    --weather-glyph-main-opacity: 0.42;
    --weather-glyph-glow-opacity: 0.12;
    --weather-glyph-ghost-opacity: 0.05;
    --weather-glyph-glow-rgb: 228, 235, 255;
    --weather-glyph-glow-hue: 214deg;
    --weather-glyph-glow-sat: 1.32;
    --weather-glyph-glow-bright: 1.03;
}

.screen[data-weather-theme="fog"] .topbar-glyph-image.is-main {
    filter: blur(0.04rem) drop-shadow(0 0 1.2rem rgba(228, 235, 255, 0.08));
}

.screen[data-weather-theme="fog"] .topbar-glyph {
    --weather-glyph-size: 18rem;
    --weather-glyph-top: 0.35rem;
    --weather-glyph-ghost-top-offset: 1.7rem;
    --weather-glyph-main-opacity: 0.36;
    --weather-glyph-glow-opacity: 0.11;
    --weather-glyph-ghost-opacity: 0.06;
    --weather-glyph-glow-rgb: 228, 235, 255;
    --weather-glyph-glow-hue: 208deg;
    --weather-glyph-glow-sat: 1.18;
    --weather-glyph-glow-bright: 1.01;
}

.screen[data-weather-theme="snow"] .topbar-glyph {
    --weather-glyph-size: 16.6rem;
    --weather-glyph-ghost-top-offset: 1.15rem;
    --weather-glyph-main-opacity: 0.46;
    --weather-glyph-glow-opacity: 0.13;
    --weather-glyph-ghost-opacity: 0.05;
    --weather-glyph-glow-rgb: 235, 244, 255;
    --weather-glyph-glow-hue: 186deg;
    --weather-glyph-glow-sat: 1.48;
    --weather-glyph-glow-bright: 1.08;
}

.screen[data-weather-theme="storm"] .topbar-glyph {
    --weather-glyph-size: 18.4rem;
    --weather-glyph-top: 0.1rem;
    --weather-glyph-ghost-top-offset: 1.45rem;
    --weather-glyph-main-opacity: 0.48;
    --weather-glyph-glow-opacity: 0.15;
    --weather-glyph-ghost-opacity: 0.06;
    --weather-glyph-glow-rgb: 255, 224, 176;
    --weather-glyph-glow-hue: 348deg;
    --weather-glyph-glow-sat: 1.7;
    --weather-glyph-glow-bright: 1.06;
}

.screen[data-weather-symbol^="clearsky"] .topbar-glyph,
.screen[data-weather-symbol^="fair"] .topbar-glyph {
    --weather-glyph-size: 19.2rem;
}

.screen[data-weather-symbol^="partlycloudy"] .topbar-glyph {
    --weather-glyph-size: 17.8rem;
}

.screen[data-weather-symbol^="lightfog"] .topbar-glyph,
.screen[data-weather-symbol^="fog_clouds"] .topbar-glyph {
    --weather-glyph-size: 18.8rem;
}

.screen[data-weather-symbol*="showers"] .topbar-glyph {
    --weather-glyph-size: 17.6rem;
}

.screen[data-weather-symbol*="heavyrain"] .topbar-glyph,
.screen[data-weather-symbol*="heavysnow"] .topbar-glyph,
.screen[data-weather-symbol^="heavythunder"] .topbar-glyph {
    --weather-glyph-size: 19.6rem;
}

.screen[data-weather-wind="breezy"] .topbar-glyph::after,
.screen[data-weather-wind="strong"] .topbar-glyph::after {
    opacity: 0.45;
    background:
        radial-gradient(ellipse at 24% 30%, rgba(141, 55, 255, 0.18), transparent 38%),
        radial-gradient(ellipse at 58% 16%, rgba(95, 26, 182, 0.22), transparent 34%),
        linear-gradient(102deg, transparent 16%, rgba(155, 92, 255, 0.12) 24%, transparent 31%),
        linear-gradient(103deg, transparent 42%, rgba(109, 39, 201, 0.16) 48%, transparent 55%),
        linear-gradient(101deg, transparent 63%, rgba(173, 124, 255, 0.14) 69%, transparent 75%);
    background-size: auto, auto, 130% 34%, 150% 30%, 125% 28%;
    background-repeat: no-repeat;
    animation: wind-drift 8.5s ease-in-out infinite alternate;
    animation-timing-function: steps(20, end);
}

.screen[data-weather-wind="breezy"] .topbar-atmosphere::before,
.screen[data-weather-wind="strong"] .topbar-atmosphere::before {
    opacity: 0.3;
    background:
        linear-gradient(102deg, transparent 12%, rgba(var(--dynamic-accent-rgb), 0.12) 20%, transparent 28%),
        linear-gradient(101deg, transparent 36%, rgba(var(--dynamic-accent-soft-rgb), 0.14) 43%, transparent 50%),
        linear-gradient(103deg, transparent 58%, rgba(var(--dynamic-accent-rgb), 0.1) 66%, transparent 73%);
    animation: wind-drift 8s ease-in-out infinite alternate;
    animation-timing-function: steps(18, end);
}

.screen[data-weather-wind="strong"] .topbar-glyph::after {
    opacity: 0.62;
    background:
        radial-gradient(ellipse at 22% 28%, rgba(141, 55, 255, 0.22), transparent 40%),
        radial-gradient(ellipse at 60% 14%, rgba(95, 26, 182, 0.28), transparent 36%),
        linear-gradient(102deg, transparent 10%, rgba(155, 92, 255, 0.16) 18%, transparent 26%),
        linear-gradient(103deg, transparent 34%, rgba(109, 39, 201, 0.22) 41%, transparent 48%),
        linear-gradient(101deg, transparent 55%, rgba(173, 124, 255, 0.18) 63%, transparent 70%),
        linear-gradient(104deg, transparent 74%, rgba(118, 55, 215, 0.14) 81%, transparent 87%);
    animation-duration: 6.8s;
}

.brand-weather {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
    padding-left: 1.8rem;
}

.brand-logo {
    width: 20rem;
    max-width: 100%;
    height: auto;
}

.weather-now {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    min-height: 5.4rem;
    margin-top: 0.55rem;
}

.weather-copy {
    display: grid;
    gap: 0.18rem;
}

.weather-temp {
    font-size: 4.25rem;
    line-height: 0.9;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.weather-summary,
.weather-meta,
.date-label,
.release-eyebrow {
    margin: 0;
}

.weather-summary {
    font-size: 1.42rem;
    font-weight: 300;
    letter-spacing: 0.01em;
}

.weather-meta {
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 1.12rem;
}

.weather-meta-precip {
    margin-top: 0;
}

.weather-meta span {
    margin-left: 0.8rem;
}

.clock-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: end;
    gap: 1.6rem;
}

.clock-copy {
    text-align: right;
}

.date-label {
    font-size: 2.3rem;
    line-height: 1;
    color: var(--muted);
    font-weight: 300;
    letter-spacing: 0.015em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.time-label {
    margin: 0.45rem 0 0;
    font-size: 4.95rem;
    line-height: 0.95;
    font-weight: 500;
    letter-spacing: 0.035em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.analog-clock {
    position: relative;
    width: 15rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 68%, transparent 69%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.clock-ring,
.clock-center {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.clock-ring::before {
    content: "";
    position: absolute;
    inset: 0.95rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.clock-center {
    inset: calc(50% - 0.62rem);
    width: 1.24rem;
    height: 1.24rem;
    background: #fff;
    box-shadow: 0 0 0 0.42rem rgba(141, 55, 255, 0.18);
}

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    border-radius: 999px;
    will-change: transform;
    transition: transform 220ms linear;
}

.hour-hand {
    width: 0.48rem;
    height: 4rem;
    background: #fff;
}

.minute-hand {
    width: 0.3rem;
    height: 5.9rem;
    background: linear-gradient(180deg, #fff, #c79cff);
}

.second-hand {
    width: 0.15rem;
    height: 6.5rem;
    background: linear-gradient(180deg, #ffd98d, #ff8e57);
    box-shadow: 0 0 0.6rem rgba(255, 179, 79, 0.18);
    transition: none;
    animation: second-sweep 60s linear infinite;
    animation-delay: 0s;
}

.main-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 1.5rem;
    min-height: 0;
    align-items: stretch;
}

.calendar-column,
.transit-column,
.release-strip {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(31, 18, 42, 0.64), rgba(11, 8, 17, 0.72)),
        linear-gradient(135deg, rgba(var(--dynamic-accent-rgb), 0.12), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.calendar-column::before,
.transit-column::before,
.release-strip::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.38rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(173, 124, 255, 0.65), rgba(255, 255, 255, 0));
    opacity: 0.72;
}

.calendar-column::before,
.transit-column::before {
    display: none;
}

.calendar-column::after,
.transit-column::after,
.release-strip::after {
    content: "";
    position: absolute;
    right: -4.8rem;
    bottom: -4.6rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--dynamic-accent-rgb), 0.13), rgba(var(--dynamic-accent-soft-rgb), 0.08) 28%, transparent 72%);
    filter: blur(0.2rem);
}

.calendar-column,
.transit-column {
    padding: 1.65rem 1.8rem 1.5rem;
}

.event-list,
.route-groups {
    display: grid;
    align-content: start;
    gap: 0;
    position: relative;
    z-index: 1;
}

.screen[data-performance="light"] .weather-overlay::before,
.screen[data-performance="light"] .weather-overlay::after,
.screen[data-performance="light"] .topbar::before,
.screen[data-performance="light"] .topbar::after,
.screen[data-performance="light"] .topbar-atmosphere::before,
.screen[data-performance="light"] .topbar-atmosphere::after,
.screen[data-performance="light"] .topbar-glyph::before,
.screen[data-performance="light"] .topbar-glyph::after,
.screen[data-performance="sleep"] .weather-overlay::before,
.screen[data-performance="sleep"] .weather-overlay::after,
.screen[data-performance="sleep"] .topbar::before,
.screen[data-performance="sleep"] .topbar::after,
.screen[data-performance="sleep"] .topbar-atmosphere::before,
.screen[data-performance="sleep"] .topbar-atmosphere::after,
.screen[data-performance="sleep"] .topbar-glyph::before,
.screen[data-performance="sleep"] .topbar-glyph::after {
    animation: none !important;
    background: none !important;
    filter: none !important;
    opacity: 0 !important;
}

.screen[data-performance="light"] .topbar-glyph-image.is-glow,
.screen[data-performance="light"] .topbar-glyph-image.is-ghost,
.screen[data-performance="sleep"] .topbar-glyph-image.is-glow,
.screen[data-performance="sleep"] .topbar-glyph-image.is-ghost {
    display: none !important;
}

.screen[data-performance="light"] .topbar-glyph-image.is-main,
.screen[data-performance="sleep"] .topbar-glyph-image.is-main {
    filter: none !important;
    animation: none !important;
}

.screen[data-performance="light"] .event-card.is-soon::before,
.screen[data-performance="light"] .event-card.is-live::before,
.screen[data-performance="light"] .event-card.is-post::before,
.screen[data-performance="sleep"] .event-card.is-soon::before,
.screen[data-performance="sleep"] .event-card.is-live::before,
.screen[data-performance="sleep"] .event-card.is-post::before {
    animation: none !important;
    background: rgba(141, 55, 255, 0.08) !important;
}

.screen[data-performance="light"] .event-card.is-live::before,
.screen[data-performance="light"] .event-card.is-post::before,
.screen[data-performance="sleep"] .event-card.is-live::before,
.screen[data-performance="sleep"] .event-card.is-post::before {
    background: rgba(255, 148, 79, 0.12) !important;
}

.screen[data-performance="light"] .event-card.is-live::after,
.screen[data-performance="light"] .event-card.is-post::after,
.screen[data-performance="sleep"] .event-card.is-live::after,
.screen[data-performance="sleep"] .event-card.is-post::after {
    content: none !important;
    animation: none !important;
    background: none !important;
}

.screen[data-performance="light"] .release-marquee-shell.is-marquee .release-marquee-track,
.screen[data-performance="light"] .release-qr,
.screen[data-performance="sleep"] .release-marquee-shell.is-marquee .release-marquee-track,
.screen[data-performance="sleep"] .release-qr {
    animation: none !important;
}

.screen[data-performance="light"] .topbar-glyph-image.is-main {
    opacity: 0.2 !important;
}

.screen[data-performance="sleep"]::before,
.screen[data-performance="sleep"] .main-grid::before,
.screen[data-performance="sleep"] .calendar-column::after,
.screen[data-performance="sleep"] .transit-column::after,
.screen[data-performance="sleep"] .release-strip::after {
    display: none !important;
}

.screen[data-performance="sleep"] .topbar-glyph,
.screen[data-performance="sleep"] .analog-clock,
.screen[data-performance="sleep"] .release-qr-wrap {
    display: none !important;
}

.screen[data-performance="sleep"] .clock-wrap {
    justify-content: flex-end;
    gap: 0.6rem;
}

.screen[data-performance="sleep"] .calendar-column,
.screen[data-performance="sleep"] .transit-column,
.screen[data-performance="sleep"] .release-strip {
    background: rgba(18, 10, 26, 0.72) !important;
    box-shadow: none !important;
}

.screen[data-performance="sleep"] .release-media,
.screen[data-performance="sleep"] .platform-pill,
.screen[data-performance="sleep"] .analog-clock {
    box-shadow: none !important;
}

.screen[data-performance="sleep"] .release-copy::before,
.screen[data-performance="sleep"] .calendar-column::before,
.screen[data-performance="sleep"] .transit-column::before,
.screen[data-performance="sleep"] .release-strip::before {
    opacity: 0.28 !important;
}

.screen[data-performance="sleep"] .event-card,
.screen[data-performance="sleep"] .route-group,
.screen[data-performance="sleep"] .platform-pill {
    background-image: none !important;
}

.screen[data-performance="sleep"] .event-card.is-soon::before,
.screen[data-performance="sleep"] .event-card.is-live::before,
.screen[data-performance="sleep"] .event-card.is-post::before {
    background: rgba(255, 255, 255, 0.04) !important;
}

.route-groups {
    height: 100%;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-content: stretch;
}

.event-card {
    --event-highlight-strength: 1;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.3rem;
    padding: 1.28rem 0.3rem 1.35rem 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    background: transparent;
}

.event-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
}

.event-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.event-card:first-child {
    padding-top: 0.25rem;
    border-top: 0;
}

.event-card:nth-child(3n + 1) {
    border-top: 0.28rem solid rgba(173, 124, 255, 0.22);
    margin-top: 0.45rem;
    padding-top: 1.3rem;
}

.event-card.is-soon {
    border-radius: 0;
}

.event-card.is-live {
    border-radius: 0;
}

.event-card.is-post {
    border-radius: 0;
}

.event-card.is-soon::before {
    inset: 0 -1.8rem 0 -1.8rem;
    opacity: 1;
    border-radius: 0;
    background:
        linear-gradient(-45deg,
            rgba(255, 126, 52, 0.12),
            rgba(236, 96, 178, 0.24),
            rgba(244, 114, 182, 0.22),
            rgba(214, 96, 214, 0.18),
            rgba(138, 72, 242, 0.2));
    background-size: 320% 320%;
    animation: upcoming-event-gradient 10s ease infinite;
}

.event-card.is-live::before {
    inset: 0 -1.8rem 0 -1.8rem;
    opacity: 1;
    border-radius: 0;
    background:
        linear-gradient(-45deg,
            rgba(255, 128, 44, 0.18),
            rgba(236, 96, 178, 0.3),
            rgba(248, 118, 188, 0.28),
            rgba(224, 102, 206, 0.22),
            rgba(144, 74, 246, 0.22)),
        radial-gradient(circle at 10% 50%, rgba(255, 132, 46, 0.26), transparent 26%),
        radial-gradient(circle at 92% 52%, rgba(255, 140, 54, 0.18), transparent 22%);
    background-size: 400% 400%, 100% 100%, 100% 100%;
    animation: current-event-gradient 12s ease infinite;
}

.event-card.is-live::after {
    inset: 0 -1.8rem 0 -1.8rem;
    opacity: 0.9;
    border-radius: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 250, 238, 0.24) 50%, rgba(255, 255, 255, 0.03) 66%, transparent 100%);
    animation: current-event-sheen 4s ease-in-out infinite;
    mix-blend-mode: screen;
}

.event-card.is-post::before {
    inset: 0 -1.8rem 0 -1.8rem;
    opacity: calc(var(--event-highlight-strength, 1) * 0.82);
    border-radius: 0;
    background:
        linear-gradient(-45deg,
            rgba(255, 128, 44, 0.1),
            rgba(236, 96, 178, 0.18),
            rgba(248, 118, 188, 0.16),
            rgba(224, 102, 206, 0.14),
            rgba(144, 74, 246, 0.14)),
        radial-gradient(circle at 10% 50%, rgba(255, 132, 46, 0.16), transparent 24%),
        radial-gradient(circle at 92% 52%, rgba(255, 140, 54, 0.11), transparent 20%);
    background-size: 280% 280%, 100% 100%, 100% 100%;
    animation: current-event-gradient 20s ease infinite;
}

.event-card.is-post::after {
    inset: 0 -1.8rem 0 -1.8rem;
    opacity: calc((var(--event-highlight-strength, 1) - 0.2) * 0.25);
    border-radius: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.02) 34%, rgba(255, 250, 238, 0.1) 50%, rgba(255, 255, 255, 0.02) 66%, transparent 100%);
    animation: current-event-sheen 10s ease-in-out infinite;
    mix-blend-mode: screen;
}

.event-card.is-live .event-main,
.event-card.is-live .event-side,
.event-card.is-soon .event-main,
.event-card.is-soon .event-side {
    position: relative;
    z-index: 1;
}

.event-card.is-live .event-main h3,
.event-card.is-live .event-subtitle,
.event-card.is-live .event-user {
    color: #fff4de;
}

.event-card.is-post .event-main h3,
.event-card.is-post .event-subtitle,
.event-card.is-post .event-user {
    color: rgb(255 244 222 / calc(0.38 + (var(--event-highlight-strength, 1) * 0.62)));
}

.event-card.is-soon .event-main h3 {
    color: #f3e8ff;
}

.event-card.is-live .event-tag {
    background: rgba(255, 179, 79, 0.18);
    color: #fff7ea;
}

.event-card.is-post .event-tag {
    background: rgb(255 179 79 / calc(0.06 + (var(--event-highlight-strength, 1) * 0.1)));
    color: rgb(255 247 234 / calc(0.45 + (var(--event-highlight-strength, 1) * 0.55)));
}

.event-card.is-live .event-tag,
.event-card.is-live .event-user.is-prominent {
    box-shadow: 0 0 1rem rgba(255, 186, 96, 0.12);
}

.event-card.is-post .event-tag,
.event-card.is-post .event-user.is-prominent {
    box-shadow: 0 0 calc(0.2rem + (var(--event-highlight-strength, 1) * 0.55rem)) rgba(255, 186, 96, 0.08);
}

.event-card.is-post .event-user.is-prominent {
    background: rgb(255 247 234 / calc(0.03 + (var(--event-highlight-strength, 1) * 0.08)));
    border-color: rgb(255 226 174 / calc(0.08 + (var(--event-highlight-strength, 1) * 0.14)));
}

.event-card h3,
.route-group h2,
.release-copy h2 {
    margin: 0;
    line-height: 0.98;
}

.event-subtitle,
.route-group-head p,
.route-stop span,
.release-artist,
.release-link,
.empty-state,
.empty-release {
    margin: 0;
    color: var(--muted);
}

.event-subtitle {
    margin-top: 0.35rem;
    font-size: 1.34rem;
    line-height: 1.2;
}

.event-card h3 {
    font-size: 2.15rem;
    font-weight: 300;
    letter-spacing: 0.02em;
}

.event-side {
    display: grid;
    justify-items: end;
    grid-template-rows: auto 1fr;
    align-content: stretch;
    gap: 0.45rem;
    min-height: 100%;
    width: min(17.5rem, 42vw);
}

.event-user {
    min-width: 0;
    font-size: 0.92rem;
    text-align: right;
    letter-spacing: 0.12em;
    opacity: 0.54;
    text-transform: none;
    align-self: end;
}

.event-user.is-prominent {
    font-size: 1.32rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    opacity: 1;
    color: #fff7ea;
    background: rgba(255, 247, 234, 0.08);
    border: 1px solid rgba(255, 226, 174, 0.22);
    border-radius: 999px;
    padding: 0.24rem 0.72rem;
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
    justify-content: flex-end;
    max-width: 100%;
}

.event-tag {
    display: inline-flex;
    padding: 0.28rem 0.62rem;
    font-size: 1.02rem;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--room-color, #8d37ff);
    border-radius: 999px;
    white-space: nowrap;
}

.route-group {
    display: grid;
    align-content: start;
    padding: 0;
    background: transparent;
    border: 0;
    min-height: 0;
}

.route-group-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 0.7rem;
    padding-top: 0.15rem;
}

.route-group + .route-group {
    margin-top: 0;
    padding-top: 1.35rem;
    border-top: 0.34rem solid rgba(173, 124, 255, 0.18);
}

.route-group-head p {
    font-size: 1.12rem;
}

.route-trace {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    letter-spacing: 0.04em;
}

.route-trace-icon,
.route-arrow {
    position: relative;
    display: block;
}

.route-trace-icon {
    width: 1.4rem;
    height: 0.36rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(141, 55, 255, 0.72));
}

.route-trace-icon::after,
.route-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.02rem;
    width: 0.62rem;
    height: 0.62rem;
    border-top: 0.16rem solid rgba(255, 255, 255, 0.82);
    border-right: 0.16rem solid rgba(255, 255, 255, 0.82);
    transform: translateY(-50%) rotate(45deg);
}

.route-row {
    display: grid;
    grid-template-columns: 7.4rem minmax(0, 1fr) 6.4rem;
    gap: 1rem;
    align-items: center;
    padding: 1.18rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.route-time span,
.route-product,
.route-delay {
    display: block;
}

.route-time span,
.route-stop span {
    font-size: 1.06rem;
    color: var(--subtle);
}

.route-origin {
    line-height: 1.15;
}

.route-stop em {
    display: block;
    margin-top: 0.25rem;
    font-style: normal;
    font-size: 1.02rem;
    color: var(--muted);
}

.route-time strong,
.route-stop strong {
    display: block;
    font-size: 2.05rem;
    line-height: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.route-stops {
    display: grid;
    grid-template-columns: 1fr 2.8rem 1fr;
    align-items: center;
    gap: 0.65rem;
}

.route-stop-final {
    text-align: right;
}

.route-arrow {
    align-self: center;
    height: 0.22rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(141, 55, 255, 0.55), rgba(255, 255, 255, 0.08));
    border-radius: 999px;
}

.route-meta {
    display: grid;
    width: 6.4rem;
    gap: 0.28rem;
    justify-items: end;
}

.route-product {
    padding: 0.2rem 0.56rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-color, #8d37ff);
    border-radius: 999px;
}

.route-delay {
    font-size: 1rem;
    color: var(--warm);
}

.route-row.has-delay .route-time strong {
    color: var(--warm);
}

.route-group h2 {
    font-size: 3.05rem;
    font-weight: 300;
    letter-spacing: 0.03em;
}

.release-strip {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: 1.55rem 1.85rem 1.15rem;
    overflow: hidden;
}

.release-panel {
    display: grid;
    grid-template-columns: minmax(26rem, 31rem) minmax(0, 1fr) 12.2rem;
    gap: 2.8rem;
    align-items: stretch;
    min-height: 100%;
    opacity: 1;
    transition: opacity 380ms ease;
    background: transparent;
    border: 0;
}

.release-panel.is-fading {
    opacity: 0;
}

.release-media {
    --release-frame-width: 0.58rem;
    --release-media-radius: 1.9rem;
    width: min(100%, 31rem);
    aspect-ratio: 1 / 1;
    padding: var(--release-frame-width);
    margin: 0.78rem 0 0 0.35rem;
    background: linear-gradient(135deg, var(--release-accent, var(--accent)), rgba(255, 255, 255, 0.08));
    border-radius: var(--release-media-radius);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.2);
    align-self: start;
    overflow: hidden;
}

.release-cover {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    border-radius: calc(var(--release-media-radius) - var(--release-frame-width));
}

.release-media.is-promo {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 220, 128, 0.42), transparent 34%),
        linear-gradient(135deg, #833ab4, #e1306c 50%, #f77737);
}

.release-media.is-promo .release-cover {
    background-color: rgba(15, 8, 24, 0.55);
    background-size: 58%;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 4.4rem rgba(255, 255, 255, 0.08);
}

.release-eyebrow {
    color: var(--subtle);
    font-size: 1.16rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.release-copy h2 {
    margin-top: 0.4rem;
    font-size: 4.2rem;
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: 0.02em;
    max-width: 10.2ch;
}

.release-copy {
    position: relative;
}

.release-copy::before {
    content: "";
    position: absolute;
    inset: -2.72rem -1rem -3.55rem 0.1rem;
    border-radius: 0 2rem 0 0;
    background: radial-gradient(circle at left center, var(--release-accent, #8d37ff), transparent 68%);
    opacity: 0.14;
    pointer-events: none;
}

.release-copy {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    align-self: stretch;
    height: 100%;
    padding: 1.15rem 0.5rem 1.05rem 2.95rem;
}

.release-copy-main {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
}

.release-copy > * {
    position: relative;
    z-index: 1;
}

.release-title-shell,
.release-artist-shell {
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.release-title-shell {
    margin-top: 0.4rem;
    max-height: 16rem;
    -webkit-mask-image: linear-gradient(180deg, #000 0 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 80%, transparent 100%);
}

.release-copy.is-promo .release-title-shell,
.release-copy.is-promo .release-artist-shell {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.release-copy.is-promo .release-copy-main {
    align-content: center;
}

.release-copy.is-promo h2 {
    max-width: 100%;
    font-size: 2.35rem;
    line-height: 1;
}

.release-copy.is-promo .release-artist-shell {
    margin-top: 0.72rem;
}

.release-copy.is-promo .release-marquee-shell.is-marquee .release-marquee-track {
    animation: none;
}

.release-artist-shell {
    margin-top: 0.95rem;
    max-height: 6rem;
    -webkit-mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
}

.release-marquee-track {
    display: block;
    will-change: transform;
}

.release-marquee-shell.is-marquee .release-marquee-track {
    animation: release-marquee var(--marquee-duration, 14s) cubic-bezier(0.37, 0, 0.22, 1) infinite;
}

.release-artist {
    margin-top: 0;
    font-size: 2rem;
    line-height: 1.18;
}

.release-copy-foot {
    margin-top: auto;
}

.release-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: min(100%, 19.5rem);
    margin-top: 1.75rem;
}

.platform-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.55rem;
    height: 3.55rem;
    border-radius: 1.1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(20, 12, 28, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.8rem 1.8rem rgba(0, 0, 0, 0.18);
}

.platform-pill img {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: cover;
    filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.15));
}

.release-qr-wrap {
    display: grid;
    justify-items: end;
    align-self: end;
    align-content: end;
    min-width: 12.2rem;
    padding: 0 0.15rem 0.45rem 0;
}

.release-qr {
    width: 11.4rem;
    height: 11.4rem;
    background: #fff;
    padding: 0.78rem;
    border-radius: 1.45rem;
    animation: qr-wobble 18s cubic-bezier(0.37, 0, 0.22, 1) infinite;
    will-change: transform;
}

@keyframes release-marquee {
    0%,
    18% {
        transform: translateY(0);
    }

    42%,
    72% {
        transform: translateY(calc(var(--marquee-shift, 0px) * -1));
    }

    100% {
        transform: translateY(0);
    }
}

.release-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.35rem;
}

.release-footer a {
    color: var(--muted);
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.empty-state,
.empty-release {
    min-height: 8rem;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 1.2rem;
}

.empty-state.compact {
    min-height: 5rem;
}

@media (max-width: 900px), (max-height: 1500px) {
    .screen {
        grid-template-rows: auto auto auto;
        padding: 1.1rem;
    }

    .topbar,
    .main-grid,
    .release-panel {
        grid-template-columns: 1fr;
    }

    .clock-wrap {
        justify-content: space-between;
    }

    .topbar {
        margin: -1.1rem -1.1rem 0;
        padding: 1.4rem 1.1rem 1.1rem;
    }

    .time-label {
        font-size: 3.2rem;
    }

    .release-copy h2 {
        font-size: 3rem;
    }

    .release-panel {
        min-height: 0;
    }

    .release-media {
        width: 100%;
    }

    .release-footer {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-glyph::before,
    .topbar-glyph-image,
    .release-qr,
    .event-card.is-live,
    .event-card.is-live::before,
    .event-card.is-live::after {
        animation: none;
    }
}