:root {
   --bg: #080d1c;
   --bg2: #0d1426;
   --panel: #11192d;
   --panel2: #151f35;
   --ink: #f7f4ed;
   --muted: #a4acbf;
   --subtle: #6f7b96;
   --stroke: rgba(160, 181, 224, .15);
   --orange: #ff702c;
   --orange-light: #ffac64;
   --blue: #5372ef;
   --green: #61df82;
   --twitch: #a879ff;
   --kick: #62e52d;
   --heading: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
   --body: 'DM Sans', Arial, sans-serif;
   --container: 1180px
}

*,
*::before,
*::after {
   box-sizing: border-box
}

[hidden] {
   display: none !important
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--ink);
   font-family: var(--body);
   font-size: 14px;
   line-height: 1.6;
   min-width: 320px;
   overflow-x: hidden
}

a {
   color: inherit;
   text-decoration: none
}

button,
input {
   font: inherit
}

button {
   cursor: pointer
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
   outline: 2px solid #a8b8ff;
   outline-offset: 4px
}

img {
   max-width: 100%;
   display: block
}

::selection {
   background: var(--orange);
   color: #101322
}

.container {
   width: min(calc(100% - 72px), var(--container));
   margin-inline: auto
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap
}

.skip-link {
   position: fixed;
   z-index: 300;
   left: 12px;
   top: -100px;
   background: #fff;
   color: #08101b;
   padding: 12px 20px
}

.skip-link:focus {
   top: 10px
}

/* Nav */
.topline {
   height: 29px;
   background: #192544;
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   color: #b9c8ee;
   letter-spacing: 1.45px;
   font-size: 9px;
   font-weight: 800
}

.topline-inner {
   height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.topline-star {
   color: var(--orange);
   font-size: 15px;
   vertical-align: -1px;
   margin-right: 8px
}

.topline-right {
   display: flex;
   align-items: center;
   gap: 6px
}

.topline-right a {
   color: #fff
}

.topline-arrow {
   color: var(--orange);
   font-size: 14px
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(8, 13, 28, .94);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid rgba(156, 178, 224, .10)
}

.header-inner {
   height: 79px;
   display: flex;
   align-items: center;
   gap: 32px
}

.brand {
   display: flex;
   align-items: center;
   gap: 11px;
   flex: none
}

.brand-mark {
   display: grid;
   place-items: center;
   position: relative;
   background: var(--orange);
   height: 40px;
   width: 40px;
   border-radius: 3px;
   color: #101526;
   font-family: var(--heading);
   font-size: 36px;
   font-weight: 900;
   line-height: 1;
   transform: skew(-7deg);
   box-shadow: 5px 5px 0 #243354
}

.brand-spark {
   position: absolute;
   font-size: 13px;
   right: -7px;
   top: -8px;
   color: #fff;
   transform: skew(7deg)
}

.brand-name {
   font-family: var(--heading);
   font-size: 27px;
   line-height: .78;
   font-weight: 900;
   letter-spacing: .35px;
   white-space: nowrap
}

.brand-name>span {
   color: var(--orange)
}

.brand-name small {
   display: block;
   font-family: var(--body);
   font-size: 6.4px;
   font-weight: 800;
   letter-spacing: 1.05px;
   color: #828fae;
   margin-top: 8px
}

.desktop-nav {
   display: flex;
   align-items: center;
   gap: 29px;
   margin-left: auto
}

.nav-link {
   color: #9faac1;
   font-weight: 800;
   font-size: 11px;
   white-space: nowrap;
   transition: color .2s
}

.nav-link:hover,
.nav-link.active {
   color: #f8f6f3
}

.nav-link.active::before {
   content: '✦';
   color: var(--orange);
   margin-right: 7px
}

.header-watch {
   font-family: var(--heading);
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .5px;
   padding: 10px 14px;
   border: 1px solid rgba(131, 154, 208, .34);
   display: flex;
   gap: 9px;
   align-items: center;
   white-space: nowrap;
   transition: background .2s, border-color .2s
}

.header-watch:hover {
   background: #192642;
   border-color: var(--blue)
}

.header-watch>span:last-child {
   font-family: var(--body);
   color: var(--orange)
}

.watch-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #ff6740;
   box-shadow: 0 0 0 3px rgba(255, 103, 64, .13)
}

.menu-toggle {
   display: none;
   border: 0;
   background: transparent;
   padding: 10px;
   align-self: center;
   margin-left: auto
}

.menu-toggle span {
   display: block;
   width: 25px;
   height: 2px;
   margin: 5px;
   background: var(--ink)
}

.mobile-nav {
   background: #101b31;
   border-top: 1px solid var(--stroke);
   padding: 12px 36px 24px;
   display: flex;
   flex-direction: column;
   gap: 3px
}

.mobile-nav[hidden] {
   display: none
}

.mobile-nav a {
   font-weight: 700;
   padding: 12px 0;
   border-bottom: 1px solid var(--stroke)
}

/* hero */
.hero {
   position: relative;
   background: radial-gradient(ellipse at 85% 21%, rgba(60, 72, 164, .29), transparent 36%), radial-gradient(ellipse at 5% 67%, rgba(37, 58, 125, .16), transparent 40%), #080e20;
   overflow: hidden;
   border-bottom: 1px solid rgba(131, 158, 216, .16)
}

.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(94, 121, 176, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 121, 176, .035) 1px, transparent 1px);
   background-size: 58px 58px;
   mask-image: linear-gradient(90deg, transparent, black 60%)
}

.hero-grain {
   pointer-events: none;
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 85% 43%, rgba(72, 93, 205, .14), transparent 35%)
}

.hero-grid {
   min-height: 574px;
   display: grid;
   grid-template-columns: 51% 49%;
   align-items: stretch;
   position: relative
}

.hero-copy {
   position: relative;
   z-index: 2;
   align-self: center;
   padding: 64px 0 64px
}

.hero-overline {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 2.1px;
   color: #d9e0ee
}

.orbit-icon {
   color: var(--orange);
   font-size: 22px
}

.edition {
   color: #7485aa;
   border-left: 1px solid #43506b;
   padding-left: 12px
}

.hero h1 {
   font-family: var(--heading);
   font-size: clamp(75px, 8.1vw, 123px);
   line-height: .85;
   font-weight: 900;
   letter-spacing: -1.6px;
   margin: 21px 0 25px;
   max-width: 730px;
   text-transform: uppercase;
   text-shadow: 0 3px 15px rgba(6, 10, 18, .12)
}

.hero-title-first {
   display: block;
   white-space: nowrap;
   font-size: .76em;
   line-height: 1.12
}

.hero-title-secondary {
   display: block;
   white-space: nowrap
}

.hero h1 em {
   font-style: normal;
   color: var(--orange);
   text-shadow: 0 9px 26px rgba(255, 112, 44, .08)
}

.hero-lead {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   max-width: 482px
}

.lead-dash {
   margin-top: 12px;
   background: var(--orange);
   height: 2px;
   width: 27px;
   flex: none
}

.hero-lead p {
   margin: 0;
   color: #aab7d0;
   font-size: 14px;
   line-height: 1.85
}

.hero-lead strong {
   color: #f7f4ef
}

.hero-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 24px
}

.hero-chips span {
   font-size: 9px;
   letter-spacing: 1.1px;
   font-weight: 800;
   border: 1px solid rgba(140, 165, 218, .26);
   padding: 7px 10px;
   background: rgba(22, 35, 67, .6);
   color: #e3e9fc
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 11px;
   margin-top: 30px
}

.btn {
   min-height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 22px;
   padding: 10px 20px;
   white-space: nowrap;
   font-family: var(--heading);
   font-size: 17px;
   font-weight: 900;
   letter-spacing: .5px;
   transition: transform .2s, background .2s, box-shadow .2s
}

.btn:hover {
   transform: translateY(-2px)
}

.btn-primary {
   background: var(--orange);
   color: #141222;
   box-shadow: 5px 5px 0 rgba(255, 112, 44, .13)
}

.btn-primary:hover {
   background: #ff9145;
   box-shadow: 5px 5px 0 rgba(255, 112, 44, .23)
}

.btn-ghost {
   border: 1px solid #53647f;
   color: #f1f3f8
}

.btn-ghost:hover {
   background: #182440
}

.btn-arrow {
   font-family: var(--body);
   font-size: 20px;
   font-weight: 600
}

.hero-bottom {
   display: flex;
   gap: 13px;
   align-items: center;
   color: #677797;
   font-weight: 800;
   font-size: 9px;
   letter-spacing: 1.2px;
   margin-top: 50px
}

.hero-bottom-line {
   width: 29px;
   height: 1px;
   background: #606f91
}

.hero-art {
   position: relative;
   isolation: isolate;
   min-width: 0;
   overflow: visible
}

.hero-art::before {
   content: '';
   position: absolute;
   inset: 5% -18% 0 -6%;
   background: radial-gradient(circle at 59% 45%, rgba(48, 67, 165, .49), transparent 53%);
   z-index: -1
}

.art-bg-grid {
   position: absolute;
   inset: 15% -3% 0 3%;
   background: repeating-linear-gradient(0deg, rgba(169, 192, 255, .08) 0px, rgba(169, 192, 255, .08) 1px, transparent 1px, transparent 46px);
   mask-image: linear-gradient(90deg, transparent, black 45%)
}

.fanart {
   position: absolute;
   z-index: 1;
   bottom: 0;
   left: -8%;
   width: 127%;
   max-width: none;
   height: 95%;
   object-fit: cover;
   object-position: 45% 50%;
   mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 100%);
   filter: saturate(1.05) contrast(1.04)
}

.art-bottom-fade {
   position: absolute;
   inset: 45% -14% 0 -30%;
   z-index: 2;
   background: linear-gradient(0deg, #080e20 0%, rgba(8, 14, 32, .17) 30%, transparent 75%);
   pointer-events: none
}

.art-number {
   position: absolute;
   z-index: 3;
   top: 60px;
   right: 0;
   color: #b3c3f2;
   letter-spacing: 3px;
   font-weight: 800;
   font-size: 11px;
   writing-mode: vertical-rl
}

.art-number span {
   color: var(--orange);
   margin-top: 13px
}

.art-sticker {
   position: absolute;
   z-index: 4;
   right: -18px;
   bottom: 70px;
   background: var(--orange);
   width: 111px;
   height: 111px;
   border-radius: 50%;
   color: #111226;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transform: rotate(13deg);
   border: 6px solid #111e37;
   box-shadow: 0 0 0 2px var(--orange), 0 14px 30px rgba(0, 0, 0, .3)
}

.art-sticker span {
   text-align: center;
   font: 900 20px/.91 var(--heading)
}

.art-sticker b {
   font-size: 24px;
   line-height: .9
}

.art-corner-label {
   position: absolute;
   z-index: 4;
   left: 5%;
   bottom: 56px;
   font-size: 10px;
   letter-spacing: 2px;
   font-weight: 800;
   color: #a7b5cf
}

.hero-rail {
   height: 45px;
   position: relative;
   z-index: 4;
   display: flex;
   align-items: center;
   gap: 26px;
   border-top: 1px solid rgba(135, 160, 206, .12);
   color: #8395b3;
   font-family: var(--heading);
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 1.15px;
   white-space: nowrap
}

.hero-rail>span:first-child {
   color: var(--orange)
}

.rail-glow {
   margin-right: 8px
}

.rail-slash {
   color: #364c75
}

/* sections */
.section {
   padding: 96px 0 106px
}

.section-heading {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 25px;
   margin-bottom: 37px
}

.section-eyebrow {
   display: flex;
   align-items: center;
   gap: 11px;
   color: #c2cbdc;
   letter-spacing: 2px;
   font-weight: 800;
   font-size: 10px
}

.number-square {
   display: grid;
   place-items: center;
   width: 31px;
   height: 31px;
   background: var(--blue);
   color: #fff;
   font-family: var(--heading);
   font-weight: 900;
   font-size: 17px;
   letter-spacing: 0;
   transform: skew(-4deg)
}

.section h2 {
   font-family: var(--heading);
   font-weight: 900;
   font-size: clamp(52px, 6vw, 78px);
   letter-spacing: -.5px;
   line-height: .98;
   margin: 18px 0 12px
}

.text-outline {
   -webkit-text-stroke: 1px #98a9d0;
   color: transparent
}

.section-description {
   font-size: 14px;
   color: #9facbf;
   max-width: 570px;
   margin: 0;
   line-height: 1.7
}

.section-tag {
   color: #526485;
   letter-spacing: 1.9px;
   font-size: 9px;
   font-weight: 800;
   white-space: nowrap
}

.section-tag span {
   color: var(--orange);
   font-size: 18px;
   margin-left: 11px
}

.marathon-section {
   background: radial-gradient(ellipse at 12% 0, rgba(53, 77, 151, .12), transparent 38%), #0b1223
}

/* progress */
.progress-panel {
   border: 1px solid #2c3a56;
   background: linear-gradient(105deg, #141f38 10%, #111a2e 80%);
   min-height: 153px;
   display: grid;
   grid-template-columns: 205px 1fr 170px;
   align-items: center;
   margin-bottom: 32px;
   box-shadow: 0 20px 55px rgba(0, 0, 0, .13)
}

.progress-intro,
.progress-ending {
   padding: 24px 28px;
   display: flex;
   flex-direction: column;
   gap: 4px
}

.progress-intro {
   border-right: 1px solid rgba(130, 154, 201, .15)
}

.progress-ending {
   border-left: 1px solid rgba(130, 154, 201, .15);
   align-items: center;
   text-align: center
}

.progress-small {
   color: #8da2c6;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.6px
}

.progress-intro strong,
.progress-ending strong {
   font: 900 59px/.95 var(--heading);
   letter-spacing: 1px
}

.progress-divider {
   color: #546588
}

.progress-ending strong {
   color: var(--orange)
}

.progress-caption {
   color: #bdc6d5;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.15px
}

.progress-center {
   padding: 0 32px
}

.progress-topline {
   display: flex;
   justify-content: space-between;
   color: #ecf0f8;
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 1.2px;
   margin-bottom: 17px
}

.progress-topline span:last-child {
   color: var(--orange);
   font-size: 15px
}

.progress-track {
   height: 14px;
   border: 1px solid #41516f;
   padding: 3px;
   background: #0b1225
}

.progress-fill {
   width: 0;
   height: 100%;
   background: repeating-linear-gradient(120deg, #ff792e 0, #ff792e 14px, #ff9a4d 14px, #ff9a4d 18px);
   box-shadow: 0 0 20px rgba(255, 110, 42, .25);
   transition: width .5s
}

.progress-subline {
   display: block;
   color: #8291ad;
   font-size: 10px;
   margin-top: 11px
}

.progress-subline span {
   color: var(--orange)
}

/* film checklist */
.marathon-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 15px;
   margin-bottom: 22px
}

.tabs {
   border: 1px solid #2b3650;
   background: #0e182b;
   display: inline-flex;
   padding: 5px;
   gap: 3px
}

.tab {
   background: transparent;
   border: 0;
   color: #93a0b6;
   font-family: var(--heading);
   font-size: 17px;
   letter-spacing: .25px;
   font-weight: 800;
   padding: 9px 14px;
   white-space: nowrap
}

.tab span {
   font-family: var(--body);
   font-size: 10px;
   color: #73819e;
   margin-left: 5px
}

.tab.active {
   color: #0c1424;
   background: var(--orange)
}

.tab.active span {
   color: #5d2f22
}

.tab:not(.active):hover {
   color: #fff;
   background: #18243a
}

.search-field {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 250px;
   border: 1px solid #2f3c56;
   background: #0e1829;
   padding: 10px 14px;
   color: #8295b4
}

.search-field:focus-within {
   border-color: #6d85cb
}

.search-field input {
   width: 100%;
   border: 0;
   outline: 0;
   background: transparent;
   color: #f5f7fb;
   font-size: 12px
}

.search-field input::placeholder {
   color: #8490a8
}

.phase-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px;
   align-items: start
}

.phase-card {
   border: 1px solid #27354e;
   background: linear-gradient(145deg, rgba(20, 30, 50, .9), rgba(13, 21, 37, .94));
   overflow: hidden;
   transition: border-color .2s, transform .2s
}

.phase-card:hover {
   border-color: #455c81;
   transform: translateY(-2px)
}

.phase-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 19px 20px;
   border-bottom: 1px solid #27354e;
   background: rgba(25, 37, 59, .49)
}

.phase-title {
   display: flex;
   align-items: center;
   gap: 10px;
   font: 900 25px/1 var(--heading);
   letter-spacing: .5px
}

.phase-color {
   width: 10px;
   height: 27px;
   background: var(--phase-color);
   transform: skew(-6deg)
}

.phase-completion {
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 1px;
   color: #93a0b6
}

.movie-rows {
   padding: 8px 14px 13px
}

.movie-row {
   display: flex;
   align-items: center;
   min-height: 44px;
   gap: 11px;
   padding: 8px 6px;
   border-bottom: 1px solid rgba(121, 147, 188, .09)
}

.movie-row:last-child {
   border-bottom: 0
}

.movie-id {
   color: #70809b;
   font: 800 13px var(--heading);
   min-width: 21px;
   text-align: right
}

.movie-info {
   flex: 1;
   min-width: 0
}

.movie-title {
   color: #e7e9ed;
   font-weight: 700;
   font-size: 11.5px;
   line-height: 1.4
}

.movie-year {
   display: block;
   color: #7889a8;
   font-size: 10px;
   margin-top: 1px
}

.movie-status {
   width: 24px;
   height: 24px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   flex: none;
   border: 1px solid #546481;
   color: #8392ad
}

.movie-status.watched {
   background: rgba(68, 191, 128, .14);
   border-color: #4acf8b;
   color: #56df9b
}

.movie-status svg {
   width: 15px;
   height: 15px
}

.movie-row.pending .movie-title {
   color: #f0f4ff
}

.movie-row.pending .movie-id {
   color: #d5d9e5
}

.movie-row.is-next {
   background: rgba(255, 112, 44, .075);
   border-left: 2px solid var(--orange);
   padding-left: 4px
}

.next-chip {
   color: var(--orange);
   font-size: 9px;
   letter-spacing: 1px;
   font-weight: 800;
   margin-top: 2px;
   display: inline-block
}

.movie-empty {
   border: 1px dashed #445272;
   padding: 50px;
   text-align: center;
   color: #9ba9c3
}

.marathon-footnote {
   border-top: 1px solid #26354d;
   padding-top: 21px;
   margin-top: 30px;
   display: flex;
   align-items: center;
   gap: 12px;
   letter-spacing: 1px;
   font-size: 10px;
   font-weight: 800;
   color: #7c8ca9;
   flex-wrap: wrap
}

.marathon-footnote>span:first-child {
   color: var(--orange);
   font-size: 18px
}

.footnote-end {
   margin-left: auto
}

.marathon-footnote code,
.schedule-explainer code {
   color: #f7ae72;
   font-weight: 700
}

/* schedule */
.schedule-section {
   position: relative;
   overflow: hidden;
   background: radial-gradient(ellipse at 85% 20%, rgba(138, 48, 36, .11), transparent 38%), #0d1020;
   border-top: 1px solid rgba(169, 154, 178, .08)
}

.schedule-lines {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: repeating-linear-gradient(140deg, transparent, transparent 160px, rgba(255, 112, 44, .017) 161px, transparent 163px)
}

.orange-square {
   background: var(--orange);
   color: #151524
}

.orange-text {
   color: var(--orange)
}

.schedule-stamp {
   color: #bba49d;
   font-size: 9px;
   font-weight: 900;
   letter-spacing: 1.35px;
   white-space: nowrap;
   border: 1px solid rgba(255, 127, 74, .3);
   padding: 11px 14px;
   transform: rotate(-3deg)
}

.schedule-stamp span {
   color: var(--orange);
   margin: 0 5px
}

.next-movie-feature {
   display: grid;
   grid-template-columns: 40% 60%;
   border: 1px solid #4c3543;
   min-height: 407px;
   background: linear-gradient(102deg, #19203a, #1a1a2c);
   position: relative
}

.next-art {
   position: relative;
   overflow: hidden;
   background: radial-gradient(circle at center, rgba(255, 148, 59, .24), transparent 40%), linear-gradient(135deg, #34213c 0%, #141a33 60%, #111529 100%);
   border-right: 1px solid rgba(255, 129, 79, .2);
   display: flex;
   justify-content: center;
   align-items: center
}

.next-art::after {
   position: absolute;
   content: '';
   inset: 0;
   background: repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255, 142, 73, .024) 15px, rgba(255, 142, 73, .024) 16px)
}

.next-art-orbit {
   position: absolute;
   width: 400px;
   height: 400px;
   border: 1px solid rgba(255, 124, 68, .26);
   border-radius: 50%;
   transform: rotate(-30deg) scaleX(.7)
}

.orbit-two {
   width: 265px;
   height: 265px;
   transform: rotate(33deg) scaleX(.62);
   border-color: rgba(113, 137, 213, .35)
}

.next-art-giant {
   position: relative;
   font: 900 clamp(170px, 23vw, 290px)/1 var(--heading);
   letter-spacing: -17px;
   color: transparent;
   -webkit-text-stroke: 2px rgba(255, 143, 69, .8);
   text-shadow: 9px 12px 0 rgba(255, 99, 34, .05);
   transform: rotate(-8deg);
   z-index: 1
}

.next-art-meta,
.next-art-caption {
   position: absolute;
   left: 26px;
   font-size: 9px;
   font-weight: 900;
   letter-spacing: 1.9px;
   color: #e9b6a1;
   z-index: 2
}

.next-art-meta {
   top: 24px
}

.next-art-caption {
   bottom: 21px
}

.next-art-caption span {
   color: var(--orange);
   font-size: 17px;
   margin-left: 6px
}

.next-copy {
   padding: 45px 50px;
   display: flex;
   flex-direction: column;
   align-items: flex-start
}

.pill-next {
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 1.5px;
   color: #ffb58e;
   background: rgba(245, 96, 43, .11);
   border: 1px solid rgba(241, 112, 57, .23);
   padding: 7px 12px;
   display: flex;
   align-items: center;
   gap: 9px
}

.pulse-orange {
   height: 7px;
   width: 7px;
   border-radius: 100%;
   background: var(--orange);
   box-shadow: 0 0 0 3px rgba(255, 110, 42, .17)
}

.next-number {
   color: #adb8d0;
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 1.7px;
   margin-top: 19px
}

.next-number span {
   color: var(--orange);
   margin: 0 5px
}

.next-copy h3 {
   font: 900 clamp(44px, 4.9vw, 66px)/.96 var(--heading);
   text-transform: uppercase;
   max-width: 530px;
   letter-spacing: -.3px;
   margin: 9px 0 12px
}

.next-copy>p {
   color: #9faec5;
   font-size: 12px;
   max-width: 430px;
   margin: 0;
   line-height: 1.7
}

.next-meta {
   display: flex;
   gap: 50px;
   margin-top: 25px
}

.next-meta div {
   display: flex;
   flex-direction: column;
   gap: 3px
}

.next-meta span {
   font-size: 9px;
   letter-spacing: 1.3px;
   font-weight: 900;
   color: #7d90b2
}

.next-meta strong {
   font: 900 22px var(--heading);
   color: #f3f1ef;
   letter-spacing: .5px
}

.next-actions {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 24px;
   margin-top: 24px
}

.next-actions .btn {
   min-height: 42px
}

.countdown-note {
   font-size: 11px;
   color: #8797b5
}

.schedule-list-head {
   margin-top: 50px;
   margin-bottom: 17px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px
}

.schedule-list-head h3 {
   font: 900 35px var(--heading);
   margin: 0
}

.schedule-list-head h3 span {
   color: var(--orange)
}

.schedule-list-head>span {
   color: #8997b2;
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 1.4px
}

.schedule-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px 18px
}

.schedule-item {
   display: flex;
   align-items: center;
   gap: 15px;
   border: 1px solid #30364c;
   background: rgba(22, 28, 47, .7);
   min-height: 72px;
   padding: 12px 17px;
   transition: border-color .2s, background .2s
}

.schedule-item:hover {
   border-color: #905a4a;
   background: #202438
}

.schedule-item.is-next {
   border-color: rgba(255, 127, 65, .5);
   background: rgba(77, 47, 44, .36)
}

.schedule-item-number {
   font: 900 34px/1 var(--heading);
   color: #6f7d9e;
   min-width: 38px;
   text-align: center
}

.schedule-item.is-next .schedule-item-number {
   color: var(--orange)
}

.schedule-item-info {
   flex: 1;
   min-width: 0
}

.schedule-item-title {
   display: block;
   font-size: 12px;
   font-weight: 800;
   line-height: 1.4
}

.schedule-item-sub {
   display: block;
   color: #8391b0;
   font-size: 10px;
   margin-top: 3px
}

.schedule-item-date {
   display: flex;
   flex-direction: column;
   gap: 4px;
   text-align: right;
   flex: none;
   white-space: nowrap
}

.schedule-item-date span {
   font-size: 10px;
   font-weight: 900;
   color: #d0d8ea
}

.schedule-item-date small {
   font-size: 9px;
   color: #7485a6
}

.schedule-item-date.scheduled span {
   color: #ffae78
}

.schedule-explainer {
   font-size: 10px;
   color: #7b8ba8;
   line-height: 1.65;
   margin: 20px 0 0
}

/* stream */
.stream-section {
   background: #0a1224;
   border-top: 1px solid #262c42
}

.blue-square {
   background: var(--blue)
}

.stream-heading {
   margin-bottom: 35px
}

.streamer-mini {
   display: flex;
   align-items: center;
   gap: 12px
}

.streamer-mini img {
   width: 46px;
   height: 46px;
   object-fit: cover;
   border: 2px solid #607af7
}

.streamer-mini span {
   color: #8fa1c4;
   font-size: 9px;
   font-weight: 900;
   letter-spacing: 1.05px
}

.streamer-mini strong {
   display: block;
   color: #f1f2f8;
   font: 900 21px var(--heading);
   letter-spacing: .6px;
   margin-top: 3px
}

.stream-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
   gap: 24px
}

.player-wrapper {
   border: 1px solid #324164;
   background: #0c1426;
   min-width: 0
}

.player-top {
   height: 45px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   background: #151f37;
   border-bottom: 1px solid #34415c;
   padding: 0 18px
}

.player-lights {
   display: flex;
   gap: 6px
}

.player-lights span {
   display: block;
   width: 7px;
   height: 7px;
   border: 1px solid #4b6388;
   border-radius: 50%
}

.player-lights span:first-child {
   background: var(--orange);
   border-color: var(--orange)
}

.player-tabs {
   height: 100%;
   display: flex;
   gap: 3px
}

.player-tab {
   border: 0;
   border-bottom: 2px solid transparent;
   background: transparent;
   color: #8f9ebb;
   padding: 0 18px;
   font: 900 15px var(--heading);
   letter-spacing: .5px
}

.player-tab.active {
   border-color: var(--orange);
   color: #fff;
   background: rgba(107, 125, 171, .07)
}

.platform-cube {
   font-size: 19px;
   color: var(--twitch);
   vertical-align: -1px
}

.platform-k {
   font-family: Arial, sans-serif;
   font-weight: 1000;
   color: var(--kick);
   font-size: 15px;
   margin-right: 4px
}

.player-code {
   font-size: 9px;
   color: #7689ab;
   font-weight: 900;
   letter-spacing: 1px
}

.player-stage {
   width: 100%;
   aspect-ratio: 16/9;
   position: relative;
   background: radial-gradient(ellipse at 50% 40%, rgba(52, 73, 170, .21), transparent 56%), #0a1125;
   min-height: 300px;
   overflow: hidden
}

.player-stage iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0
}

.player-placeholder {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(10, 17, 38, .45), rgba(10, 17, 38, .65)), url('assets/fanart-xarola.webp');
   background-position: center 43%;
   background-size: cover
}

.player-placeholder-overlay {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at center, rgba(9, 15, 33, .04), rgba(9, 15, 33, .75) 90%)
}

.play-center {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center
}

.play-button {
   display: grid;
   place-items: center;
   width: 77px;
   height: 77px;
   border: 2px solid rgba(255, 255, 255, .95);
   border-radius: 100%;
   background: var(--orange);
   color: #10152a;
   padding: 0 0 0 4px;
   box-shadow: 0 0 0 9px rgba(255, 112, 44, .12), 0 14px 32px rgba(0, 0, 0, .25);
   transition: transform .2s, background .2s
}

.play-button:hover {
   transform: scale(1.09);
   background: #ff9d56
}

.play-center strong {
   font: 900 37px var(--heading);
   letter-spacing: .7px;
   margin-top: 27px
}

.play-center>span {
   font-size: 9px;
   color: #c3cce0;
   font-weight: 900;
   letter-spacing: 1.7px
}

.player-bottom {
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
   background: #111a2c;
   color: #8392b2;
   font-size: 9px;
   font-weight: 900;
   letter-spacing: 1.15px
}

.video-led {
   width: 6px;
   height: 6px;
   background: #5fce88;
   display: inline-block;
   border-radius: 50%;
   margin-right: 6px
}

.stream-sidebar {
   padding: 26px 23px;
   border: 1px solid #2c3d5f;
   background: linear-gradient(145deg, #172541, #10192d)
}

.stream-sidebar-top {
   display: flex;
   justify-content: space-between;
   align-items: center
}

.sidebar-label {
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 1.55px;
   color: #b0bee1
}

.sidebar-mini-symbol {
   color: var(--orange);
   font-size: 23px
}

.stream-sidebar h3 {
   font: 900 42px/.97 var(--heading);
   margin: 12px 0
}

.stream-sidebar h3 span {
   color: var(--orange)
}

.stream-sidebar>p {
   font-size: 11.5px;
   line-height: 1.7;
   color: #a0aec6;
   margin: 0 0 22px
}

.social-link {
   display: flex;
   align-items: center;
   gap: 13px;
   min-height: 57px;
   padding: 10px 12px;
   margin: 9px 0;
   background: #202c46;
   border: 1px solid #3b4c6b;
   transition: background .2s, border-color .2s
}

.social-link:hover {
   background: #293959;
   border-color: #8ea2d1
}

.social-icon {
   width: 32px;
   height: 32px;
   display: grid;
   place-items: center;
   flex: none;
   font: 900 22px var(--heading)
}

.twitch-icon {
   color: #c2a4ff;
   background: #58359c
}

.kick-icon {
   background: #55cb17;
   color: #102516;
   font: 1000 19px Arial, sans-serif
}

.social-link strong {
   display: block;
   font: 900 17px var(--heading);
   letter-spacing: .7px
}

.social-link small {
   display: block;
   font-size: 10px;
   color: #aab7d2
}

.social-arrow {
   margin-left: auto;
   font-size: 20px;
   color: #9faecc
}

.sidebar-disclaimer {
   color: #798bac;
   font-size: 9.5px;
   line-height: 1.65;
   margin-top: 19px;
   padding-top: 15px;
   border-top: 1px solid rgba(137, 166, 218, .18)
}

/* closing */
.last-banner {
   position: relative;
   overflow: hidden;
   background: radial-gradient(ellipse at 81% 70%, rgba(255, 209, 133, .22), transparent 36%), linear-gradient(100deg, #e65e25, #ff873d 65%, #ed6a34);
   min-height: 265px;
   color: #171323
}

.last-banner-inner {
   position: relative;
   min-height: 265px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.last-banner-text {
   position: relative;
   z-index: 3;
   padding: 35px 0
}

.last-banner-text>span {
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 2px
}

.last-banner h2 {
   font: 900 clamp(70px, 10vw, 130px)/.85 var(--heading);
   letter-spacing: -1.5px;
   margin: 11px 0
}

.last-banner h2 span {
   color: #f8f1e6
}

.last-banner p {
   font-size: 12px;
   font-weight: 700;
   margin: 7px 0
}

.scream-button {
   margin-top: 13px;
   border: 2px solid #171323;
   background: #171323;
   color: #fff;
   font: 900 14px var(--heading);
   letter-spacing: .6px;
   padding: 11px 17px;
   transition: transform .2s, background .2s
}

.scream-button:hover {
   transform: rotate(-3deg);
   background: #2b2540
}

.banner-avatar {
   width: 185px;
   height: 185px;
   border: 10px solid rgba(18, 23, 42, .85);
   transform: rotate(11deg);
   z-index: 2;
   margin-right: 100px;
   box-shadow: 12px 12px 0 rgba(255, 255, 255, .17)
}

.banner-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   image-rendering: auto
}

.last-banner-watermark {
   position: absolute;
   right: -65px;
   bottom: -55px;
   font: 900 250px/.8 var(--heading);
   color: rgba(22, 20, 40, .08);
   z-index: 1;
   pointer-events: none
}

.site-footer {
   background: #080d1b;
   border-top: 1px solid #2d3246
}

.footer-main {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 55px;
   padding: 49px 0
}

.footer-main p {
   color: #8390ab;
   font-size: 11px;
   line-height: 1.8;
   margin: 0
}

.footer-links {
   display: flex;
   align-items: center;
   gap: 21px;
   flex-wrap: wrap;
   color: #a8b6cc;
   font-size: 11px;
   font-weight: 800
}

.footer-links a:hover {
   color: var(--orange)
}

.footer-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   padding: 18px 0;
   border-top: 1px solid #1e2a3e;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1px;
   color: #637391
}

.toast {
   position: fixed;
   z-index: 999;
   left: 50%;
   bottom: 30px;
   transform: translate(-50%, 20px);
   background: #111a33;
   border: 2px solid var(--orange);
   box-shadow: 0 13px 40px #0008;
   padding: 20px 30px;
   font: 900 29px var(--heading);
   color: #ff9655;
   opacity: 0;
   transition: transform .2s, opacity .2s;
   pointer-events: none;
   white-space: nowrap
}

.toast.show {
   opacity: 1;
   transform: translate(-50%, 0)
}

.toast[hidden] {
   display: none
}

/* ========== CINEFY / XAROFLIX ========== */
.cinefy-section {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   background: radial-gradient(ellipse at 77% 24%, rgba(255, 126, 56, .20), transparent 43%), linear-gradient(118deg, #0a1227 2%, #17203b 55%, #261c29 100%);
   border-block: 1px solid rgba(226, 150, 99, .24)
}

.cinefy-noise {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .5;
   background: repeating-linear-gradient(90deg, transparent 0 57px, rgba(185, 172, 219, .035) 57px 58px)
}

.cinefy-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
   gap: 65px;
   align-items: center;
   position: relative
}

.cinefy-square {
   background: #ff9c56;
   color: #17213a
}

.cinefy-small-heading {
   display: block;
   margin-top: 34px;
   color: #ffb37a;
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 2.5px
}

.cinefy-small-heading span {
   padding: 0 10px;
   color: #f8f2ea
}

.cinefy-copy {
   position: relative;
   z-index: 2
}

.cinefy-copy h2 {
   font-size: clamp(58px, 6.5vw, 87px);
   line-height: .91;
   margin: 17px 0 24px
}

.cinefy-copy h2 span {
   color: #ff9551
}

.cinefy-copy>p:not(.cinefy-note) {
   font-size: 14px;
   line-height: 1.9;
   color: #b2bfd4;
   max-width: 530px;
   margin: 0
}

.cinefy-copy>p strong {
   color: #fff
}

.cinefy-stats {
   display: flex;
   gap: 17px;
   align-items: center;
   margin: 27px 0 26px;
   padding-left: 16px;
   border-left: 3px solid #ff9154
}

.cinefy-stat-number {
   font: 900 55px/.95 var(--heading);
   color: #ff9d63
}

.cinefy-stats strong {
   display: block;
   font-size: 10px;
   line-height: 1.5;
   letter-spacing: 1.2px
}

.cinefy-stats span {
   display: block;
   font-size: 10px;
   color: #94a4c0;
   line-height: 1.7
}

.cinefy-cta {
   background: #ff9958;
   color: #121727;
   box-shadow: 5px 5px 0 rgba(255, 144, 71, .19)
}

.cinefy-cta:hover {
   background: #ffb37b
}

.cinefy-play-icon {
   font-size: 13px
}

.cinefy-note {
   font-size: 10px !important;
   line-height: 1.65;
   color: #7e90b1 !important;
   margin: 17px 0 0 !important
}

.cinefy-ticket-wrap {
   position: relative;
   min-height: 410px;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: rotate(3deg)
}

.cinefy-ticket-shine {
   position: absolute;
   width: 95%;
   aspect-ratio: 1;
   top: 0;
   left: 0;
   background: radial-gradient(circle, rgba(255, 112, 44, .20), transparent 63%);
   filter: blur(10px)
}

.cinefy-ticket {
   position: relative;
   width: min(100%, 475px);
   min-height: 355px;
   background: linear-gradient(145deg, #ffb37b 0%, #fa8d4b 55%, #ed6e3c 100%);
   color: #261c24;
   padding: 22px 27px 20px;
   border: 1px solid #ffcc93;
   clip-path: polygon(0 0, 100% 0, 100% 39%, 95% 44%, 100% 49%, 100% 100%, 0 100%, 0 49%, 5% 44%, 0 39%);
   box-shadow: 0 30px 65px #0009;
   display: flex;
   flex-direction: column;
   justify-content: space-between
}

.cinefy-ticket::before {
   content: '';
   position: absolute;
   inset: 10px;
   border: 1px dashed rgba(33, 31, 46, .29);
   pointer-events: none
}

.cinefy-ticket-top,
.cinefy-ticket-bottom {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: center;
   font-size: 9px;
   letter-spacing: 1.4px;
   font-weight: 900;
   position: relative;
   z-index: 1
}

.cinefy-ticket-center {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 17px;
   padding: 25px 0 30px
}

.cinefy-coin {
   width: 140px;
   height: 140px;
   flex: none;
   border: 3px solid #282130;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transform: rotate(-14deg);
   box-shadow: inset 0 0 0 6px rgba(255, 213, 170, .45);
   background: rgba(255, 240, 197, .25);
   text-align: center
}

.cinefy-coin>span {
   font: 900 16px var(--heading);
   line-height: 1
}

.cinefy-coin strong {
   font: 900 70px/.85 var(--heading)
}

.cinefy-coin strong span {
   font-size: 29px
}

.cinefy-coin small {
   font: 900 14px var(--heading);
   letter-spacing: 1px;
   margin-top: 7px
}

.cinefy-ticket blockquote {
   font: 900 clamp(21px, 2.35vw, 33px)/1.1 var(--heading);
   margin: 0;
   letter-spacing: .1px;
   max-width: 230px
}

.cinefy-ticket blockquote em {
   font-style: normal;
   background: #231d2f;
   color: #fff6dc;
   padding: 0 4px
}

.cinefy-ticket-cut {
   border-top: 2px dashed rgba(43, 27, 29, .34);
   width: 100%;
   position: relative;
   z-index: 1
}

.cinefy-ticket-bottom {
   padding-top: 16px
}

.cinefy-ticket-watermark {
   position: absolute;
   z-index: -1;
   right: -12px;
   bottom: 0;
   color: rgba(255, 190, 133, .08);
   font: 900 135px var(--heading);
   letter-spacing: 7px
}

.marathon-cinefy-link {
   margin: 22px 0 4px;
   display: flex;
   align-items: center;
   gap: 17px;
   border: 1px solid #35415c;
   border-left: 3px solid #ff9451;
   padding: 17px 20px;
   background: linear-gradient(90deg, rgba(255, 112, 44, .1), rgba(255, 112, 44, .018))
}

.marathon-cinefy-icon {
   display: grid;
   place-items: center;
   width: 41px;
   height: 41px;
   flex: none;
   border-radius: 50%;
   background: #ff9051;
   color: #121727;
   font-size: 17px
}

.marathon-cinefy-link>span:nth-child(2) {
   flex: 1
}

.marathon-cinefy-link strong {
   display: block;
   font-size: 11px;
   font-weight: 900;
   letter-spacing: 1.1px
}

.marathon-cinefy-link small {
   display: block;
   font-size: 10px;
   color: #9aa8c4;
   line-height: 1.6
}

.marathon-cinefy-link a {
   white-space: nowrap;
   font: 900 16px var(--heading);
   color: #ffaf76
}

.marathon-cinefy-link a:hover {
   text-decoration: underline
}

.cinefy-social-icon {
   color: #251c21;
   background: #ff9958;
   font: 900 16px var(--heading)
}

.cinefy-social-link:hover {
   border-color: #ff9958
}

@media (max-width:940px) {
   .cinefy-layout {
      gap: 22px
   }

   .cinefy-ticket {
      padding: 20px
   }

   .cinefy-coin {
      width: 105px;
      height: 105px
   }

   .cinefy-coin strong {
      font-size: 51px
   }

   .cinefy-coin strong span {
      font-size: 23px
   }

   .cinefy-ticket blockquote {
      font-size: 24px
   }

   .cinefy-ticket-wrap {
      min-height: 340px
   }

   .cinefy-ticket {
      min-height: 310px
   }

   .desktop-nav {
      gap: 14px
   }
}

@media (max-width:760px) {
   .cinefy-layout {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .cinefy-copy h2 {
      font-size: clamp(56px, 9vw, 79px)
   }

   .cinefy-ticket-wrap {
      min-height: 340px;
      max-width: 490px;
      margin: auto;
      width: 100%
   }

   .cinefy-ticket {
      min-height: 320px
   }

   .cinefy-coin {
      width: 138px;
      height: 138px
   }

   .cinefy-coin strong {
      font-size: 69px
   }

   .cinefy-ticket blockquote {
      font-size: 33px
   }

   .marathon-cinefy-link {
      flex-wrap: wrap
   }

   .marathon-cinefy-link a {
      margin-left: 58px
   }
}

@media (max-width:520px) {
   .cinefy-small-heading {
      margin-top: 28px;
      font-size: 9px
   }

   .cinefy-copy h2 {
      font-size: clamp(46px, 12vw, 63px);
      margin: 17px 0
   }

   .cinefy-copy>p:not(.cinefy-note) {
      font-size: 12px
   }

   .cinefy-stats {
      margin: 24px 0
   }

   .cinefy-stats strong {
      font-size: 9px
   }

   .cinefy-ticket-wrap {
      min-height: 260px
   }

   .cinefy-ticket {
      min-height: 265px;
      padding: 18px
   }

   .cinefy-ticket-top,
   .cinefy-ticket-bottom {
      font-size: 7px;
      letter-spacing: .6px
   }

   .cinefy-ticket-center {
      gap: 10px;
      padding: 15px 0
   }

   .cinefy-coin {
      width: 99px;
      height: 99px
   }

   .cinefy-coin strong {
      font-size: 49px
   }

   .cinefy-coin strong span {
      font-size: 20px
   }

   .cinefy-coin>span {
      font-size: 12px
   }

   .cinefy-coin small {
      font-size: 10px
   }

   .cinefy-ticket blockquote {
      font-size: clamp(22px, 6.2vw, 29px)
   }

   .marathon-cinefy-link {
      padding: 13px;
      gap: 11px
   }

   .marathon-cinefy-icon {
      width: 34px;
      height: 34px
   }

   .marathon-cinefy-link a {
      margin-left: 45px;
      font-size: 14px
   }
}

/* responsive */
@media (max-width:1120px) {
   .desktop-nav {
      gap: 18px
   }

   .header-inner {
      gap: 18px
   }

   .hero h1 {
      font-size: clamp(70px, 8vw, 92px)
   }

   .hero-grid {
      min-height: 555px
   }

   .art-sticker {
      right: -5px;
      bottom: 77px
   }

   .next-copy {
      padding: 38px 32px
   }

   .header-watch {
      font-size: 13px
   }

   .schedule-item-title {
      font-size: 11px
   }
}

@media (max-width:940px) {
   .header-watch {
      display: none
   }

   .hero h1 {
      font-size: clamp(65px, 8vw, 82px)
   }

   .hero-grid {
      grid-template-columns: 54% 46%;
      min-height: 535px
   }

   .hero-copy {
      padding: 60px 0
   }

   .hero-art .fanart {
      width: 146%;
      left: -17%
   }

   .hero-chips {
      gap: 6px
   }

   .hero-chips span {
      font-size: 8.5px
   }

   .art-sticker {
      width: 90px;
      height: 90px;
      right: 0
   }

   .art-sticker span {
      font-size: 17px
   }

   .phase-head {
      padding: 16px
   }

   .movie-rows {
      padding: 7px 9px 12px
   }

   .next-copy h3 {
      font-size: 51px
   }

   .stream-layout {
      grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
      gap: 15px
   }

   .stream-sidebar h3 {
      font-size: 37px
   }

   .stream-sidebar {
      padding: 19px
   }

   .container {
      width: min(calc(100% - 48px), var(--container))
   }
}

@media (max-width:760px) {
   .desktop-nav {
      display: none
   }

   .menu-toggle {
      display: block
   }

   .header-inner {
      height: 70px
   }

   .topline-right {
      display: none
   }

   .hero-grid {
      grid-template-columns: 1fr;
      min-height: 0
   }

   .hero-copy {
      padding: 67px 0 40px
   }

   .hero h1 {
      max-width: 650px;
      font-size: clamp(73px, 12vw, 110px);
      position: relative;
      z-index: 2
   }

   .hero-art {
      height: 380px;
      max-width: 680px;
      width: 100%;
      margin: 0 auto
   }

   .hero-art .fanart {
      width: 100%;
      height: 100%;
      left: 0;
      bottom: -15px;
      object-position: 50% 45%;
      mask-image: linear-gradient(0deg, transparent, black 25%, black 100%)
   }

   .hero-art .art-bottom-fade {
      inset: 55% -6% 0 -6%
   }

   .art-sticker {
      right: 18px;
      bottom: 46px
   }

   .art-corner-label {
      bottom: 32px
   }

   .hero-rail {
      gap: 18px;
      overflow: hidden
   }

   .hero-bottom {
      display: none
   }

   .hero-chips {
      margin-top: 20px
   }

   .section {
      padding: 75px 0 83px
   }

   .section-heading {
      align-items: start
   }

   .section-tag {
      display: none
   }

   .section h2 {
      font-size: clamp(53px, 9vw, 75px)
   }

   .progress-panel {
      grid-template-columns: 140px 1fr 125px
   }

   .progress-intro,
   .progress-ending {
      padding: 18px
   }

   .progress-intro strong,
   .progress-ending strong {
      font-size: 46px
   }

   .progress-center {
      padding: 0 18px
   }

   .progress-topline {
      font-size: 9px
   }

   .phase-grid {
      grid-template-columns: 1fr
   }

   .phase-head {
      padding: 20px
   }

   .movie-rows {
      padding: 7px 16px 14px
   }

   .schedule-stamp {
      display: none
   }

   .next-movie-feature {
      grid-template-columns: 1fr
   }

   .next-art {
      min-height: 240px
   }

   .next-art-giant {
      font-size: 225px
   }

   .next-art-orbit {
      height: 360px;
      width: 360px
   }

   .next-copy {
      padding: 35px
   }

   .next-copy h3 {
      max-width: 600px
   }

   .schedule-list {
      grid-template-columns: 1fr
   }

   .stream-layout {
      grid-template-columns: 1fr
   }

   .stream-sidebar {
      padding: 26px
   }

   .stream-sidebar h3 {
      font-size: 42px
   }

   .footer-main {
      grid-template-columns: 1fr;
      gap: 22px;
      padding: 40px 0
   }

   .footer-links {
      gap: 20px
   }

   .banner-avatar {
      margin-right: 20px;
      width: 145px;
      height: 145px
   }

   .last-banner h2 {
      font-size: clamp(75px, 13vw, 115px)
   }

   .last-banner-watermark {
      font-size: 170px
   }
}

@media (max-width:520px) {
   .container {
      width: calc(100% - 34px)
   }

   .topline {
      font-size: 8px;
      letter-spacing: .8px
   }

   .brand-name {
      font-size: 24px
   }

   .brand-mark {
      width: 36px;
      height: 36px;
      font-size: 33px
   }

   .hero-copy {
      padding: 53px 0 28px
   }

   .hero-overline {
      font-size: 8px;
      letter-spacing: 1.25px;
      gap: 8px
   }

   .edition {
      padding-left: 8px
   }

   .hero h1 {
      font-size: clamp(59px, 14.4vw, 81px);
      letter-spacing: -.6px;
      margin: 20px 0 23px
   }

   .hero-title-first {
      font-size: .73em
   }

   .hero-lead {
      gap: 11px
   }

   .hero-lead p {
      font-size: 12.5px
   }

   .hero-chips span {
      font-size: 8px
   }

   .hero-actions {
      gap: 9px
   }

   .btn {
      font-size: 15px;
      padding: 11px 14px;
      min-height: 46px;
      gap: 11px
   }

   .hero-art {
      height: 290px
   }

   .art-sticker {
      width: 75px;
      height: 75px;
      bottom: 36px;
      right: 10px;
      border-width: 4px
   }

   .art-sticker span {
      font-size: 14px
   }

   .art-sticker b {
      font-size: 17px
   }

   .art-number {
      top: 10px
   }

   .art-corner-label {
      font-size: 8px
   }

   .hero-rail {
      height: 38px;
      font-size: 11px;
      gap: 13px
   }

   .section {
      padding: 62px 0 72px
   }

   .section-heading {
      margin-bottom: 25px
   }

   .section-eyebrow {
      font-size: 9px;
      letter-spacing: 1.15px
   }

   .section h2 {
      font-size: clamp(48px, 11vw, 64px);
      margin: 13px 0
   }

   .section-description {
      font-size: 12px
   }

   .progress-panel {
      grid-template-columns: 1fr auto;
      min-height: 0
   }

   .progress-intro {
      border-right: 0
   }

   .progress-intro strong {
      font-size: 53px
   }

   .progress-center {
      grid-column: 1/-1;
      grid-row: 2;
      padding: 0 18px 18px
   }

   .progress-ending {
      border-left: 1px solid var(--stroke);
      padding: 16px 20px
   }

   .progress-ending strong {
      font-size: 53px
   }

   .progress-topline {
      margin-bottom: 7px
   }

   .marathon-toolbar {
      display: block
   }

   .tabs {
      display: flex;
      width: 100%;
      justify-content: space-between
   }

   .tab {
      font-size: 15px;
      padding: 8px 9px
   }

   .tab span {
      font-size: 9px
   }

   .search-field {
      margin-top: 12px;
      min-width: 0
   }

   .phase-grid {
      gap: 13px
   }

   .phase-head {
      padding: 16px
   }

   .phase-title {
      font-size: 23px
   }

   .phase-completion {
      font-size: 9px
   }

   .movie-row {
      gap: 9px
   }

   .movie-title {
      font-size: 11px
   }

   .movie-rows {
      padding: 5px 10px 10px
   }

   .marathon-footnote {
      font-size: 9px;
      gap: 4px 8px
   }

   .footnote-end {
      margin-left: 0;
      width: 100%
   }

   .next-copy {
      padding: 26px 21px 29px
   }

   .next-copy h3 {
      font-size: clamp(43px, 10vw, 58px)
   }

   .next-art {
      min-height: 200px
   }

   .next-art-giant {
      font-size: 205px
   }

   .next-art-meta,
   .next-art-caption {
      left: 16px;
      font-size: 8px
   }

   .next-number {
      margin-top: 17px
   }

   .next-meta {
      gap: 30px
   }

   .next-actions {
      gap: 12px;
      margin-top: 20px
   }

   .schedule-list-head {
      margin-top: 37px
   }

   .schedule-list-head h3 {
      font-size: 27px
   }

   .schedule-list-head>span {
      font-size: 9px
   }

   .schedule-item {
      gap: 8px;
      padding: 10px;
      min-height: 68px
   }

   .schedule-item-number {
      min-width: 28px;
      font-size: 28px
   }

   .schedule-item-title {
      font-size: 11px
   }

   .schedule-item-date span {
      font-size: 9px
   }

   .streamer-mini {
      display: none
   }

   .stream-sidebar h3 {
      font-size: 38px
   }

   .player-top {
      padding: 0 10px
   }

   .player-tab {
      padding: 0 10px;
      font-size: 14px
   }

   .player-stage {
      min-height: 225px
   }

   .play-center strong {
      font-size: 30px;
      margin-top: 22px
   }

   .play-center>span {
      font-size: 8px
   }

   .play-button {
      width: 60px;
      height: 60px
   }

   .play-button svg {
      width: 20px
   }

   .player-code {
      font-size: 7px
   }

   .player-bottom {
      padding: 0 9px;
      font-size: 8px;
      letter-spacing: .4px
   }

   .last-banner-inner {
      min-height: 244px
   }

   .last-banner {
      min-height: 244px
   }

   .last-banner h2 {
      font-size: clamp(59px, 13.3vw, 88px)
   }

   .last-banner-text>span {
      font-size: 8px
   }

   .last-banner p {
      font-size: 10px;
      max-width: 235px
   }

   .banner-avatar {
      width: 95px;
      height: 95px;
      margin: 0;
      position: absolute;
      right: 4px;
      top: 48px;
      border-width: 5px
   }

   .last-banner-watermark {
      font-size: 110px;
      bottom: -12px;
      right: -13px
   }

   .footer-bottom {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 6px;
      font-size: 8px
   }
}

@media (prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *::before,
   *::after {
      animation: none !important;
      transition: none !important
   }
}



/* ══════════════════════════════════════════════════════════════════
   XAROFLIX V3 · GALERIA CINEMATOGRÁFICA COM PÔSTERES
   Os pôsteres usam o ID IMDb do config.js por padrão, mas podem ser
   trocados por imagens locais em movieMedia[id].cover.
   ══════════════════════════════════════════════════════════════════ */
.phase-1 { --phase-color: #f14f4f }
.phase-2 { --phase-color: #4d97fa }
.phase-3 { --phase-color: #f4da4c }
.phase-4 { --phase-color: #a682f5 }
.phase-5 { --phase-color: #6dcc54 }
.phase-6 { --phase-color: #ff813a }

.poster-guide {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   align-items: center;
   color: #98aaca;
   font-size: 11px;
   margin: -6px 0 18px;
   line-height: 1.7
}

.poster-guide strong {
   color: #ffad6c;
   letter-spacing: 1px
}

.poster-guide b {
   color: #f9f0df
}

.phase-grid {
   align-items: start;
   gap: 24px
}

.phase-card {
   background: linear-gradient(142deg, #121e34, #0c1325);
   border: 1px solid #30415c
}

.phase-card:hover {
   transform: none;
   border-color: #4e6182
}

.movie-rows {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   padding: 16px
}

.movie-row {
   --poster-accent: var(--phase-color, #ff702c);
   position: relative;
   display: block;
   overflow: hidden;
   padding: 0;
   min-height: 0;
   aspect-ratio: 2/2.86;
   border: 1px solid rgba(198, 215, 250, .19);
   isolation: isolate;
   background: radial-gradient(ellipse at 25% 22%, color-mix(in srgb, var(--poster-accent), transparent 65%), transparent 65%), linear-gradient(155deg, #223558, #090f1e);
   transition: transform .23s, border-color .23s, box-shadow .23s;
   cursor: pointer
}

.movie-row:last-child {
   border-bottom: 1px solid rgba(198, 215, 250, .19)
}

.movie-row:hover,
.movie-row:focus-visible {
   transform: translateY(-5px);
   border-color: #ff9b57;
   box-shadow: 0 10px 32px #0008, 0 0 0 1px #ff8c52aa;
   z-index: 2
}

.movie-row.is-next {
   border: 2px solid #ff824a;
   padding: 0;
   background: linear-gradient(135deg, #263b62, #251a2b)
}

.movie-poster-fallback {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   font: 900 clamp(80px, 9vw, 170px)/1 var(--heading);
   letter-spacing: -8px;
   color: rgba(221, 232, 255, .13);
   text-shadow: 0 4px 30px #0005;
   z-index: 0
}

.movie-poster {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 29%;
   z-index: 1;
   transition: transform .45s, filter .3s
}

.movie-row:hover .movie-poster {
   transform: scale(1.06)
}

.movie-poster.poster-error,
.schedule-cover.poster-error,
.next-art-poster.poster-error {
   display: none
}

.movie-poster-shade {
   position: absolute;
   z-index: 2;
   inset: 0;
   background: linear-gradient(180deg, rgba(4, 8, 15, .64) 0%, transparent 27%, rgba(5, 11, 22, .20) 51%, rgba(5, 9, 18, .88) 74%, rgba(5, 9, 18, .99) 100%);
   pointer-events: none
}

.movie-row .movie-id {
   position: absolute;
   left: 13px;
   top: 11px;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 5px;
   min-width: 0;
   border: 1px solid rgba(236, 245, 255, .23);
   background: rgba(9, 16, 30, .68);
   backdrop-filter: blur(6px);
   padding: 4px 8px;
   text-align: left;
   color: #dbe3f4;
   font: 800 9px var(--body);
   letter-spacing: 1px
}

.movie-row .movie-id strong {
   font: 900 15px var(--heading);
   color: #fff
}

.movie-row .movie-status {
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 3;
   width: auto;
   height: auto;
   min-width: 0;
   padding: 5px 8px;
   border-radius: 2px;
   background: rgba(11, 18, 32, .73);
   border: 1px solid #8591a055;
   color: #e2e9f3;
   font-size: 8px;
   font-weight: 900;
   letter-spacing: .9px;
   display: inline-flex;
   white-space: nowrap;
   line-height: 1.2
}

.movie-row .movie-status.watched {
   background: rgba(30, 100, 63, .82);
   color: #e1ffe9;
   border-color: #5de69a99
}

.movie-row.is-next .movie-status {
   background: #ff8f53;
   color: #121926;
   border-color: #ffb078
}

.movie-row .movie-info {
   position: absolute;
   z-index: 3;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 20px 15px 14px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   gap: 5px;
   min-width: 0
}

.movie-row .movie-title,
.movie-row.pending .movie-title {
   font: 900 clamp(20px, 2.2vw, 29px)/.97 var(--heading);
   letter-spacing: .2px;
   color: #fff;
   text-shadow: 0 2px 8px #0009;
   overflow-wrap: anywhere
}

.movie-row .movie-year {
   display: block;
   color: #c3d0e4;
   margin: 0;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.1px;
   text-shadow: 0 2px 5px #000
}

.movie-row .movie-year span {
   color: var(--orange);
   padding: 0 2px
}

.movie-row .movie-date {
   font-size: 9px;
   color: #ffb87c;
   font-weight: 800;
   letter-spacing: .2px
}

.movie-action {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   margin-top: 9px;
   color: #acb8d2;
   border-top: 1px solid #8692aa55;
   padding-top: 9px;
   width: 100%;
   font: 900 9px var(--body);
   letter-spacing: .7px
}

.movie-action span {
   color: #ffb06d;
   font-size: 17px;
   line-height: 1
}

.movie-action.has-replay {
   color: #a6ffd0
}

.movie-action.has-replay span {
   color: #5ce3ac
}

.movie-row:hover .movie-action {
   color: #fff
}

.movie-row.pending:not(.is-next) .movie-poster {
   filter: saturate(.65) brightness(.85)
}

.movie-row.pending .movie-id {
   color: #c1cae1
}

.schedule-item-poster {
   width: 42px;
   height: 58px;
   overflow: hidden;
   flex: none;
   background: radial-gradient(circle at 20% 20%, rgba(255, 119, 52, .3), transparent 70%), #182540;
   border: 1px solid #46516a;
   display: block
}

.schedule-cover {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.next-art-poster {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 34%;
   opacity: .40;
   filter: saturate(.8) contrast(1.2)
}

.next-art::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(11, 17, 34, .62), rgba(11, 17, 34, .16));
   pointer-events: none
}

.next-art-meta,
.next-art-giant,
.next-art-caption {
   z-index: 2
}

@media(max-width:940px) {
   .movie-rows {
      gap: 10px;
      padding: 12px
   }

   .movie-row .movie-title,
   .movie-row.pending .movie-title {
      font-size: clamp(18px, 2.7vw, 24px)
   }

   .movie-row .movie-info {
      padding: 13px 10px 10px
   }

   .movie-row .movie-status {
      font-size: 7px;
      right: 6px;
      top: 7px
   }

   .movie-row .movie-id {
      left: 6px;
      top: 7px
   }
}

@media(max-width:760px) {
   .movie-rows {
      gap: 12px;
      padding: 16px
   }

   .movie-row .movie-title,
   .movie-row.pending .movie-title {
      font-size: clamp(21px, 4vw, 30px)
   }

   .movie-row .movie-info {
      padding: 17px 12px 13px
   }
}

@media(max-width:520px) {
   .poster-guide {
      font-size: 10px
   }

   .movie-rows {
      gap: 9px;
      padding: 10px
   }

   .movie-row .movie-title,
   .movie-row.pending .movie-title {
      font-size: clamp(18px, 5.1vw, 24px)
   }

   .movie-row .movie-info {
      padding: 15px 9px 10px;
      gap: 3px
   }

   .movie-row .movie-year {
      font-size: 8px
   }

   .movie-row .movie-id {
      padding: 3px 5px;
      font-size: 8px
   }

   .movie-row .movie-id strong {
      font-size: 12px
   }

   .movie-row .movie-status {
      font-size: 7px;
      letter-spacing: .2px;
      padding: 4px 5px
   }

   .movie-action {
      font-size: 7px;
      padding-top: 6px;
      margin-top: 5px;
      gap: 4px
   }

   .movie-action span {
      font-size: 13px
   }

   .schedule-item-poster {
      width: 35px;
      height: 49px
   }
}