.rankings-page{padding-top:30px}.rankings-shell{width:min(1110px,100%);margin:0 auto}.rank-nav{display:flex;align-items:center;justify-content:space-between;margin:0 4px 22px}.back-link{color:#b6b3c1;text-decoration:none;font-size:.85rem}.back-link:hover{color:var(--lime)}.rank-hero{position:relative;display:flex}.rank-hero-copy{position:relative;z-index:1;max-width:650px}.rank-hero h1{margin:0}.rank-hero h1 span{color:inherit}.rank-deck{max-width:560px;margin:22px 0 0;color:#acbec8;font-size:1.08rem;line-height:1.65}.rank-hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.rank-button{min-height:42px;display:inline-flex;align-items:center;gap:12px;padding:0 14px;border:1px solid #484553;text-decoration:none;font-size:.8rem;font-weight:700}.rank-button:hover{border-color:#74a9c2}.rank-button-primary{border-color:var(--lime);background:var(--lime);color:#19191e}.rank-button-primary:hover{background:#78e3f8}.rank-button-outline{background:rgba(255,255,255,.035);color:#e7e4ec}.rank-hero-stamp{position:absolute;right:7%;top:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:260px;height:260px;transform:translateY(-55%) rotate(8deg);border:1px solid rgba(84,198,235,.42);border-radius:50%;background:radial-gradient(circle at 45% 44%,rgba(29,97,179,.14),transparent 66%),rgba(11,26,64,.38);color:#dff6ff;box-shadow:inset 0 0 40px rgba(38,131,201,.09)}.rank-hero-stamp strong{font:700 4.25rem/.95 var(--display)}.rank-hero-stamp strong span{color:inherit}.stamp-top,.stamp-bottom{font-size:.55rem;font-weight:700;letter-spacing:.16em}.stamp-bottom{margin-top:8px;color:#98adba}.rank-hero-stamp i{position:absolute;right:31px;top:38px;color:var(--lime);font-size:1.6rem;font-style:normal}.rank-hero-footer{position:absolute;right:clamp(28px,6vw,68px);bottom:19px;left:clamp(28px,6vw,68px);display:flex;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid rgba(187,225,240,.13);color:#817e8e;font-size:.57rem;font-weight:700;letter-spacing:.12em}.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);margin:16px 0;border:1px solid var(--line);border-radius:18px;}.stat-strip article{display:flex;flex-direction:column;gap:4px;padding:19px 22px;border-right:1px solid var(--line)}.stat-strip article:last-child{border:0}.stat-strip strong{font:600 1.5rem var(--display)}.stat-unit{color:inherit;font-size:1rem}.stat-strip article span:last-child{color:#a5a2b0;font-size:.73rem}.page-jump{position:sticky;z-index:5;top:8px;display:flex;gap:5px;overflow-x:auto;padding:8px;margin:19px 0 53px;border:1px solid #383744;border-radius:13px;background:rgba(13,21,32,.9);backdrop-filter:blur(14px);scrollbar-width:none}.page-jump::-webkit-scrollbar{display:none}.page-jump a{flex:none;padding:8px 12px;border-radius:8px;color:#aec5cf;text-decoration:none;font-size:.76rem;font-weight:600;white-space:nowrap}.page-jump a:hover{background:#172b43;color:#fff}.content-section{padding-top:10px;margin-bottom:66px;scroll-margin-top:92px}.content-section .section-heading{margin:0 4px 21px}.content-section .section-heading .eyebrow{color:#a7a3b5}.content-section .section-heading h2{font-size:clamp(1.45rem,2.6vw,1.8rem)}.recommendation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.recommendation-card{padding:23px;border:1px solid var(--line);border-radius:18px;}.recommendation-card h3{margin:0 0 8px;font:600 1.2rem var(--display)}.recommendation-card>p{margin:0;color:#aaa7b5;font-size:.87rem;line-height:1.62}.recommendation-card ul{display:grid;gap:12px;margin:19px 0 0;padding:0;list-style:none}.recommendation-card li{display:flex;flex-direction:column;gap:3px}.recommendation-card li strong{font-size:.86rem}.recommendation-card li span{color:#9e9ba9;font-size:.78rem;line-height:1.5}.rec-callout{margin-top:25px;padding:18px;border-left:2px solid var(--teal);background:rgba(69,201,237,.07);color:#d9f6ff;font:500 1.04rem var(--display)}.arc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.arc-chips span{padding:6px 9px;border:1px solid #294f70;border-radius:8px;background:rgba(255,255,255,.025);color:#b8e6f5;font-size:.69rem}.recommendation-card .rec-footnote{margin-top:15px;font-size:.73rem}.rating-section{padding-top:5px}.ratings-tools{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:14px;border:1px solid var(--line);border-radius:15px;}.search-field{display:flex;flex:1 1 290px;align-items:center;gap:10px;min-height:42px;padding:0 12px;border:1px solid #393845;border-radius:10px;background:#0d141f;color:#aba8b8}.search-field>span{font-size:1.35rem}.search-field input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:400 .82rem var(--body)}.search-field input::placeholder{color:#858291}.select-field select{min-height:42px;max-width:190px;padding:0 27px 0 11px;border:1px solid #393845;border-radius:10px;background:#0d141f;color:#d4e9ef;font:500 .76rem var(--body)}.check-filter{display:flex;align-items:center;gap:6px;padding:0 5px;color:#b7cbd4;font-size:.75rem;white-space:nowrap}.check-filter input{accent-color:#45c9ed}.rating-summary{display:flex;justify-content:space-between;gap:16px;margin:13px 2px;color:#918e9e;font-size:.72rem}.rating-summary p{margin:0}.rating-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.rating-card{min-width:0;padding:14px 15px;border:1px solid #33323f;}.rating-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.rating-title{margin:0;font:600 .9rem/1.4 var(--display);overflow-wrap:anywhere}.rating-score{display:flex;flex:none;align-items:center;gap:6px;color:var(--lime);font:700 .82rem var(--display);white-space:nowrap}.rating-score small{color:#8d8a99;font:500 .65rem var(--body)}.rating-note{margin:8px 0 0;color:#aaa7b4;font-size:.79rem;line-height:1.58;overflow-wrap:anywhere}.rating-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.badge{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border:1px solid #41404b;border-radius:999px;color:#b8b4c1;font-size:.57rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.badge-rewatch{border-color:#236f96;background:rgba(69,201,237,.07);color:#78d9ef}.badge-ironic{border-color:#286991;background:rgba(47,145,202,.08);color:#7dcaee}.badge-stream{border-color:#1f639d;background:rgba(69,201,237,.07);color:#72d9f1}.badge-era{color:#a6a2af}.no-results{padding:25px;text-align:center;color:#aeabb8;border:1px dashed #454351}.milestone-panel{padding:23px;border:1px solid var(--line);border-radius:18px;}.progress-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.progress-heading strong{font:600 1.45rem var(--display)}.progress-heading strong span{color:inherit;font-size:.9rem}.progress-heading p{margin:5px 0 0;color:#aaa7b5;font-size:.78rem}.progress-tag{padding:6px 9px;border:1px solid #246f9b;border-radius:999px;background:rgba(69,201,237,.07);color:var(--lime);font-size:.59rem;font-weight:700;letter-spacing:.09em}.progress-track{height:9px;overflow:hidden;margin:19px 0 21px;border-radius:999px;background:#32313c}.progress-track span{display:block;width:87.2%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#48bde6,#45c9ed);box-shadow:0 0 15px rgba(69,201,237,.23)}.milestone-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.milestone-item{padding:10px;border:1px solid #33323f;border-radius:10px;background:rgba(255,255,255,.018)}.milestone-item strong{display:block;font:600 .84rem var(--display)}.milestone-item span{display:block;margin-top:4px;color:#b5b1bf;font-size:.69rem;line-height:1.5}.milestone-item em{display:block;margin-top:5px;color:#58c9ea;font-size:.64rem;font-style:normal}.data-note{margin:17px 0 0;color:#928f9d;font-size:.7rem}.awards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.award-card{padding:17px;border:1px solid var(--line);border-radius:15px;}.award-card h3{margin:0 0 12px;font:600 1.05rem var(--display)}.award-card dl{display:grid;gap:9px;margin:0}.award-card dl div{display:grid;gap:3px}.award-card dt{color:#8f8b9b;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.award-card dd{margin:0;color:#dceff5;font-size:.78rem;line-height:1.45;min-height:1.45em}.award-card dd:empty::after{content:"\200b"}.award-card.overall{border-color:#205fa8;}.lost-media-panel{padding:23px;border:1px solid #274c68;border-radius:17px;}.lost-intro{margin:0 0 17px;color:#aaa7b3;font-size:.82rem;line-height:1.6}.lost-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 23px;margin:0;padding:0;list-style:none}.lost-list li{position:relative;padding-left:15px;color:#cde7ef;font-size:.77rem;line-height:1.55}.lost-list li::before{position:absolute;left:0;top:.53em;width:5px;height:5px;border-radius:50%;background:#3a9ed2;content:""}.resource-layout{display:grid;grid-template-columns:1fr 1fr;gap:13px}.resource-card{padding:21px;border:1px solid var(--line);border-radius:17px;}.resource-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid #245b8d;border-radius:10px;background:rgba(69,201,237,.08);color:var(--violet);font-size:1rem}.resource-card h3{margin:13px 0 6px;font:600 1.16rem var(--display)}.resource-card>p{margin:0;color:#a7a4b1;font-size:.8rem;line-height:1.55}.resource-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.resource-links a{padding:8px 10px;border:1px solid #42404c;border-radius:9px;color:#e1f3f9;text-decoration:none;font-size:.69rem;font-weight:600}.resource-links a:hover{border-color:#47b9df;color:#86e2f6}.year-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.year-links a{color:#9f9baa;font-size:.69rem}.runtime-card dl{display:grid;gap:0;margin:14px 0 0}.runtime-card dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #34333f;font-size:.73rem}.runtime-card dt{color:#9996a4}.runtime-card dd{margin:0;color:#dceff5;text-align:right}.year-heading{margin:31px 3px 12px;font:600 1.1rem var(--display)}.year-stats-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}.year-stats{width:100%;border-collapse:collapse;text-align:left}.year-stats th,.year-stats td{padding:11px 14px;border-bottom:1px solid #33323d;font-size:.75rem;white-space:nowrap}.year-stats th{color:#9995a4;font-size:.63rem;letter-spacing:.08em;text-transform:uppercase}.year-stats td{color:#d4e9ef}.year-stats tr:last-child td{border:0}.unlisted-card{display:grid;grid-template-columns:minmax(180px,.7fr) 1.3fr;gap:20px;margin-top:16px;padding:21px;border:1px solid #383744;border-radius:16px;}.unlisted-card .eyebrow{margin-bottom:7px;color:#a7a3b5;font-size:.6rem}.unlisted-card h3{margin:0;font:600 1.1rem var(--display)}.unlisted-list{display:grid;gap:8px}.unlisted-link{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 11px;border:1px solid #383744;border-radius:10px;color:#e4f5fa;text-decoration:none}.unlisted-link:hover{border-color:#2b84bd}.unlisted-link strong{font-size:.73rem}.unlisted-link span{color:#a6a2b0;font-size:.68rem}.unlisted-link b{grid-column:2;grid-row:1/3;align-self:center;color:inherit;font:700 .78rem var(--display)}.rating-guide{margin-top:17px;border:1px solid var(--line);border-radius:15px;}.rating-guide summary{padding:16px 18px;color:#dceff5;font-size:.83rem;font-weight:700;cursor:pointer}.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 16px 14px}.guide-grid p{display:flex;flex-direction:column;gap:5px;margin:0;padding:10px;border:1px solid #34333e;border-radius:9px}.guide-grid strong{color:var(--lime);font:600 .83rem var(--display)}.guide-grid span{color:#a9a6b3;font-size:.68rem;line-height:1.45}.rewatch-note{margin:0;padding:0 17px 17px;color:#a7a3b0;font-size:.72rem}.rewatch-note .badge{margin-right:6px}.rank-footer{display:flex;align-items:center;gap:20px;padding:21px 4px 8px;border-top:1px solid #2d2c37;color:#8f8c9b;font-size:.73rem}.rank-footer .wordmark{font-size:.82rem}.rank-footer .wordmark-mark{width:27px;height:27px}.rank-footer>a:last-child{margin-left:auto;color:#aaa7b5;text-decoration:none}.rank-footer>a:last-child:hover{color:var(--lime)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.rank-hero-stamp{right:-28px;transform:translateY(-55%) scale(.8) rotate(8deg);opacity:.53}.rank-hero-copy{max-width:600px}.stat-strip article{padding:16px}.stat-strip strong{font-size:1.35rem}.milestone-list{grid-template-columns:repeat(2,minmax(0,1fr))}.awards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rating-list{grid-template-columns:1fr}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ratings-tools .select-field select{max-width:none}.ratings-tools .select-field{flex:1 1 135px}.unlisted-card{grid-template-columns:1fr}}
@media(max-width:560px){.rankings-page{padding:17px 14px}.rank-nav{margin-bottom:15px}.rank-nav .wordmark{font-size:.82rem}.back-link{font-size:.76rem}.rank-deck{max-width:440px;font-size:.97rem}.rank-hero-stamp{right:-110px;top:65%;transform:translateY(-50%) scale(.66) rotate(8deg);opacity:.27}.rank-hero-footer{left:22px;right:22px;bottom:16px;font-size:.49rem}.rank-hero-footer span:last-child{display:none}.rank-hero-links{max-width:330px}.rank-button{font-size:.72rem;padding:0 10px}.stat-strip{grid-template-columns:repeat(2,1fr)}.stat-strip article:nth-child(2){border-right:0}.stat-strip article:nth-child(-n+2){border-bottom:1px solid var(--line)}.stat-strip article{padding:13px 15px}.stat-strip article span:last-child{font-size:.66rem}.page-jump{margin:14px 0 39px;top:4px}.content-section{margin-bottom:48px}.recommendation-grid{grid-template-columns:1fr}.recommendation-card{padding:19px}.rating-summary{flex-direction:column;gap:5px}.ratings-tools{gap:8px;padding:10px}.search-field{flex-basis:100%}.ratings-tools .select-field{flex:1 1 42%}.ratings-tools .select-field select{width:100%;font-size:.72rem}.check-filter{font-size:.7rem}.milestone-panel{padding:17px}.milestone-list{grid-template-columns:1fr 1fr}.milestone-item{padding:8px}.milestone-item strong{font-size:.76rem}.milestone-item span{font-size:.64rem}.awards-grid{grid-template-columns:1fr 1fr}.award-card{padding:13px}.award-card dd{font-size:.72rem}.lost-media-panel{padding:17px}.lost-list{grid-template-columns:1fr;gap:9px}.resource-layout{grid-template-columns:1fr}.unlisted-card{padding:16px}.guide-grid{grid-template-columns:1fr 1fr}.rank-footer{flex-wrap:wrap;gap:10px}.rank-footer>span{width:100%;order:3}.rank-footer>a:last-child{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.rankings-page *{scroll-behavior:auto!important;transition:none!important}}
.unrated-section{margin-top:14px;border:1px solid #3a3944;border-radius:14px;}.unrated-section summary{padding:15px 17px;color:#d8edf3;font-size:.79rem;font-weight:700;cursor:pointer}.unrated-section>p{margin:0;padding:0 17px 13px;color:#a5a2af;font-size:.73rem;line-height:1.5}.unrated-list{display:flex;flex-wrap:wrap;gap:6px;padding:0 17px 17px}.unrated-list span{padding:6px 8px;border:1px solid #3a3944;border-radius:7px;color:#c6c2cd;font-size:.67rem}
.channel-timeline{display:grid;grid-template-columns:.72fr 2.28fr;gap:25px;margin:21px 0 45px;padding:22px;border:1px solid #34333f;border-radius:17px;}.timeline-heading .eyebrow{margin:2px 0 8px;color:#aaa6b6;font-size:.59rem}.timeline-heading h2{margin:0;font:600 1.23rem/1.25 var(--display)}.timeline-events{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.timeline-events article{padding-left:10px;border-left:1px solid #315878}.timeline-events strong{color:var(--lime);font:600 .76rem var(--display)}.timeline-events p{margin:6px 0 0;color:#aaa7b5;font-size:.68rem;line-height:1.52}
@media(max-width:800px){.channel-timeline{grid-template-columns:1fr;gap:17px}.timeline-events{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.channel-timeline{padding:17px;margin-bottom:35px}.timeline-events{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 8px}.timeline-events p{font-size:.65rem}}

/* FWOB palette, sampled from the channel mark: cyan, royal blue, and deep navy. */
.rankings-page {
  --violet: var(--page-accent-bright);
  --lime: var(--page-accent-bright);
  --teal: var(--page-accent);
  --panel: #121b2a;
  --panel-raised: #17243a;
  --table-line: #2b3d50;
  --table-zebra: rgba(0, 0, 0, 0.10);
  --table-hover: rgba(69, 201, 237, 0.10);
  padding-bottom: 92px;

}

.rankings-page .status-dot {
  background: #45c9ed;
  box-shadow: 0 0 14px rgba(69, 201, 237, var(--alpha-accent-strong));
}

.rank-button,
.page-jump,
.search-field,
.select-field select,
.milestone-item,
.resource-links a { border-radius: 6px; }
.stat-strip,
.recommendation-card,
.ratings-tools,
.rating-card,
.milestone-panel,
.award-card,
.lost-media-panel,
.resource-card,
.year-stats-wrap,
.unlisted-card,
.rating-guide,
.channel-timeline { border-radius: 8px; }
.resource-icon { border-radius: 6px; }

html[data-theme="light"] .rankings-page {
  --ink: #17212b;
  --table-line: #c9bda4;
  --table-zebra: rgba(84, 70, 40, 0.07);
  --table-hover: rgba(36, 112, 200, 0.14);
  color: var(--ink);
}

html[data-theme="light"] .rank-hero h1 span { color: inherit; }
html[data-theme="light"] .rank-deck { color: #465c6c; }
html[data-theme="light"] .rank-button-primary { border-color: #176da9; color: #fff; background: #176da9; }
html[data-theme="light"] .rank-button-primary:hover { background: #0d5d98; }
html[data-theme="light"] .rank-button-outline { border-color: #98b5c9; color: #29485e; background: rgba(255, 255, 255, 0.52); }
html[data-theme="light"] .rank-hero-stamp { border-color: rgba(25, 126, 185, 0.42); color: #153e69; background: radial-gradient(circle at 45% 44%, rgba(69, 201, 237, 0.2), transparent 66%), rgba(238, 248, 252, 0.65); }
html[data-theme="light"] .stamp-bottom { color: #517186; }
html[data-theme="light"] .rank-hero-footer { border-color: rgba(29, 89, 130, 0.17); color: #667f90; }

html[data-theme="light"] .stat-strip,
html[data-theme="light"] .recommendation-card,
html[data-theme="light"] .ratings-tools,
html[data-theme="light"] .rating-card,
html[data-theme="light"] .milestone-panel,
html[data-theme="light"] .award-card,
html[data-theme="light"] .lost-media-panel,
html[data-theme="light"] .resource-card,
html[data-theme="light"] .year-stats,
html[data-theme="light"] .unlisted-card,
html[data-theme="light"] .rating-guide,
html[data-theme="light"] .unrated-section,
html[data-theme="light"] .channel-timeline {
  border-color: #bfd1df;

}

html[data-theme="light"] .page-jump {
  border-color: #b7cad8;
  background: rgba(240, 246, 250, var(--alpha-surface));
}

html[data-theme="light"] .page-jump a { color: #435e72; }
html[data-theme="light"] .page-jump a:hover { color: #123c5c; background: #dbeaf3; }
html[data-theme="light"] .search-field,
html[data-theme="light"] .select-field select { border-color: #b8cbd9; color: #243b4c; background: #fff; }
html[data-theme="light"] .search-field input { color: #17212b; }
html[data-theme="light"] .search-field input::placeholder { color: #758996; }
html[data-theme="light"] .check-filter { color: #40596a; }

html[data-theme="light"] .recommendation-card > p,
html[data-theme="light"] .recommendation-card li span,
html[data-theme="light"] .rating-note,
html[data-theme="light"] .rating-summary,
html[data-theme="light"] .progress-heading p,
html[data-theme="light"] .milestone-item span,
html[data-theme="light"] .lost-intro,
html[data-theme="light"] .resource-card > p,
html[data-theme="light"] .runtime-card dt,
html[data-theme="light"] .timeline-events p,
html[data-theme="light"] .unrated-section > p,
html[data-theme="light"] .guide-grid span,
html[data-theme="light"] .rewatch-note { color: #526879; }

html[data-theme="light"] .milestone-item,
html[data-theme="light"] .guide-grid p,
html[data-theme="light"] .unlisted-link,
html[data-theme="light"] .unrated-list span { border-color: #cad9e3; background: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .rating-score,
html[data-theme="light"] .timeline-events strong,
html[data-theme="light"] .guide-grid strong { color: #087cad; }
html[data-theme="light"] .progress-track { background: #cfdee8; }
html[data-theme="light"] .progress-track span { background: linear-gradient(90deg, #2470c8, #45c9ed); }
html[data-theme="light"] .year-stats th,
html[data-theme="light"] .year-stats td { border-color: #d0dde6; color: #425b6d; }
html[data-theme="light"] .year-stats th { color: #607888; }
html[data-theme="light"] .runtime-card dd,
html[data-theme="light"] .award-card dd,
html[data-theme="light"] .lost-list li,
html[data-theme="light"] .rank-footer { border-color: #c4d3de; color: #5c7180; }
html[data-theme="light"] .rank-footer > a:last-child { color: #466276; }

@media (max-width: 560px) {
  .rankings-page { padding-bottom: 138px; }
}

/* Hero logo, recommendations, list view, and milestone timeline. */
.rank-hero-logo { object-fit: cover; }
.rank-hero-footer { display: none; }
.giraffe-card { display: flex; flex-direction: column; }
.video-embed { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; margin-top: 18px; border: 1px solid rgba(69, 201, 237, var(--alpha-accent-line)); border-radius: 8px; background: #0d131e; }
.video-embed iframe { position: absolute; width: 100%; height: 100%; border: 0; inset: 0; }

.ratings-tools { display: block; }
.ranking-controls { margin-top: 10px; border-top: 1px solid #303e4f; }
.ranking-controls summary { padding: 12px 2px 2px; color: #b9ddea; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.ranking-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-top: 10px; }
.ranking-controls:not([open]) .ranking-filters { display: none; }
.ranking-table-wrap { overflow-x: auto; border: 1px solid #30455b; border-radius: 8px;  }
.ranking-table { width: 100%; min-width: 850px; border-collapse: collapse; text-align: left; }
.ranking-table tbody.rating-list { display: table-row-group; }
.ranking-table th, .ranking-table td { padding: 13px 15px; border-bottom: 1px solid var(--table-line); vertical-align: top; }
.ranking-table thead th { position: sticky; top: 0; z-index: 2; color: #9cc9d8; background: #152131; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ranking-table tbody tr:hover { background: rgba(69, 201, 237, 0.06); }
.ranking-table tbody tr:last-child > * { border-bottom: 0; }
.rating-score { display: inline-flex; align-items: baseline; justify-content: center; min-width: 48px; padding: 6px 7px; border: 1px solid rgba(69, 201, 237, 0.28); border-radius: 7px; background: rgba(69, 201, 237, 0.07); font-size: 0.9rem; }
.rating-score small { margin-left: 3px; font-size: 0.56rem; }
.rating-title { width: 20%; min-width: 180px; font: 600 0.88rem/1.4 var(--display); }
.ranking-table .rating-note { width: 44%; min-width: 340px; max-width: none; margin: 0; color: #aaa7b4; font-size: 0.78rem; line-height: 1.55; }
.ranking-table .badge-era { white-space: nowrap; }
.table-muted { color: #71828f; }

/* Rankings table controls and row hierarchy */
.ranking-table { min-width: 790px; }
.table-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; line-height: 1; text-transform: inherit; white-space: nowrap; cursor: pointer; }
.table-sort:hover, .table-sort:focus-visible { color: #d4f8ff; outline: none; }
.table-filters th { position: static; padding-top: 8px; padding-bottom: 10px; background: #101b29; text-transform: none; vertical-align: middle; }
.table-filters select, .table-filters input[type="search"] { box-sizing: border-box; width: 100%; min-height: 32px; border: 1px solid #3b5367; border-radius: 5px; background: #0d1723; color: #dceff5; font: 500 0.72rem var(--body); }
.table-filters input[type="search"] { padding: 0 8px; }
.table-filters label { display: block; color: #aac6d2; font: 500 0.67rem var(--body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.table-filters label + label { margin-top: 5px; }
.ranking-table .rating-row > * { border-bottom: 0; vertical-align: middle; }
.rating-score { width: 60px; min-width: 60px; box-sizing: border-box; }
.ranking-table .rating-badges { display: flex; align-items: center; gap: 9px; min-height: 20px; margin: 0; }
.ranking-table .badge { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ranking-table .badge-era { white-space: nowrap; }
.rating-comment-row td { padding-top: 0; padding-bottom: 15px; border-bottom: 1px solid var(--table-line); }
.rating-comment-row .rating-note { width: 75%; max-width: 75%; min-width: 0; margin: 0; color: #aaa7b4; font-size: 0.78rem; line-height: 1.55; }
html[data-theme="light"] .table-filters th { background: #f2ecdc; }
html[data-theme="light"] .table-filters select, html[data-theme="light"] .table-filters input[type="search"] { border-color: #c2bba9; background: #faf6ec; color: #183142; }
html[data-theme="light"] .table-filters label { color: #486574; }
html[data-theme="light"] .ranking-table .badge { color: #3b7080; }
html[data-theme="light"] .rating-comment-row .rating-note { color: #526470; }

/* Keep the two table rows belonging to one entry visually together. */
.ranking-table tbody tr:hover { background: transparent; }
.ranking-table tbody .zebra { background: var(--table-zebra); }
.ranking-table tbody .rating-row:hover, .ranking-table tbody .rating-row:hover + .rating-comment-row, .ranking-table tbody .rating-row:has(+ .rating-comment-row:hover), .ranking-table tbody .rating-comment-row:hover { background: var(--table-hover); }
.ranking-table .rating-row:not(:has(+ .rating-comment-row)) > * { border-bottom: 1px solid var(--table-line); }
.rating-comment-row td { padding-top: 3px; }
.rating-title a { color: inherit; text-decoration: none; }
.rating-title a:hover, .rating-title a:focus-visible { color: #72d9ef; text-decoration: underline; outline: none; }
.table-type, .table-rewatch { font: 600 0.7rem var(--body); letter-spacing: 0.03em; white-space: nowrap; }
.table-type-series { color: #5d91e3; }
.table-type-one-off { color: #77b9ec; }
.table-type-stream { color: #2a98d1; }
.table-type-stream-series { color: #5bd5f4; }
.table-rewatch.is-rewatch { color: #7edcf1; }
html[data-theme="light"] .table-type-series { color: #1d61b8; }
html[data-theme="light"] .table-type-one-off { color: #2879b8; }
html[data-theme="light"] .table-type-stream { color: #176eaa; }
html[data-theme="light"] .table-type-stream-series { color: #147e9e; }
html[data-theme="light"] .table-rewatch.is-rewatch { color: #176e93; }

/* Compact metadata columns leave room for the series title. */
.ranking-table { table-layout: fixed; }
.ranking-table th:nth-child(1), .ranking-table td:nth-child(1) { width: 126px; }
.ranking-table th:nth-child(3), .ranking-table td:nth-child(3) { width: 122px; }
.ranking-table th:nth-child(4), .ranking-table td:nth-child(4) { width: 142px; }
.ranking-table th:nth-child(5), .ranking-table td:nth-child(5) { width: 108px; }
.ranking-table th:nth-child(3), .ranking-table td:nth-child(3), .ranking-table th:nth-child(4), .ranking-table td:nth-child(4), .ranking-table th:nth-child(5), .ranking-table td:nth-child(5) { text-align: center; }
.ranking-table .table-filters th:nth-child(3) select, .ranking-table .table-filters th:nth-child(4) select, .ranking-table .table-filters th:nth-child(5) select { text-align: center; text-align-last: center; }
.ranking-table thead tr:first-child th:first-child { text-align: center; }
.ranking-table thead tr:first-child th:first-child .table-sort { justify-content: center; }

/* Current table and hero controls. */
.rank-hero-links { display: block; }
.rank-hero-primary-links,
.rank-hero-channel-links { display: flex; flex-wrap: wrap; gap: 10px; }
.rank-hero-channel-links { margin-top: 10px; }
.rank-hero-channel-links .rank-button { min-height: 36px; padding: 0 11px; font-size: 0.72rem; }

.stat-strip article span:last-child,
.ranking-table thead,
.ranking-table .table-filters label,
.progress-tag,
.award-card dt,
.unlisted-card .eyebrow { font-family: var(--font-supertitle); }

.table-sort.is-active { color: #d4f8ff; }
.table-sort .sort-indicator { display: inline-block; width: 1em; color: #72d9ef; text-align: center; }
.table-sort:not(.is-active) .sort-indicator { opacity: 0.55; }
.table-sort { font-family: var(--font-link); }

.unlisted-card { display: block; margin-top: 16px; }
.unlisted-card .lost-intro { margin-bottom: 17px; }
.unlisted-list a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.unlisted-list a:hover,
.unlisted-list a:focus-visible { color: #e6fbff; outline: none; }
.unlisted-list strong { font-size: 0.77rem; }
.unlisted-list span { color: #a6c1ca; font-size: 0.68rem; }
.unlisted-table-wrap { margin-top: 16px; }
.unlisted-ranking-table { min-width: 680px; }
.unlisted-ranking-table th:nth-child(1), .unlisted-ranking-table td:nth-child(1) { width: 96px; text-align: center; }
.unlisted-ranking-table th:nth-child(3), .unlisted-ranking-table td:nth-child(3) { width: 150px; text-align: center; }
.unlisted-ranking-table th:nth-child(4), .unlisted-ranking-table td:nth-child(4) { width: 120px; text-align: center; }
.unlisted-ranking-table .rating-title { width: auto; }
.unlisted-ranking-table .rating-comment-row .rating-note { width: 75%; max-width: 75%; }
.table-type-video { color: #48b9e8; }
html[data-theme="light"] .table-type-video { color: #176eaa; }

@media (max-width: 560px) {
  .rank-hero-channel-links .rank-button { font-size: 0.68rem; }
}
.rating-score { width: 65px; min-width: 65px; height: 65px; min-height: 65px; padding: 0; border-radius: 50%; align-items: center; font-size: 1.28rem; line-height: 1; }
.rating-score small { font-size: 0.64rem; }
.rating-title { width: auto; min-width: 0; font-size: 1.05rem; }
.rating-row > td:first-child { text-align: center; }
.score-value.score-10 { color: #f4c85c; background: linear-gradient(90deg, #d99f28 0 45%, #fff1a8 50%, #d99f28 55% 100%); background-size: 400% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: score-gold-shine 3s linear infinite; }
.score-value.score-9, .score-value.score-8 { color: #75d694; }
.score-value.score-7 { color: #64c8f1; }
.score-value.score-6, .score-value.score-5 { color: #bb8be8; }
.score-value.score-4, .score-value.score-3, .score-value.score-2, .score-value.score-1 { color: #ef7777; }
.score-lol { display: inline-block; background: linear-gradient(90deg, #ff6565, #f7dc50, #76de85, #62c8f2, #a67be7, #ff6565); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: score-rainbow 1500ms linear infinite; }
@keyframes score-gold-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes score-rainbow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

.party-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.recommendation-card li,
.party-list li { min-width: 0; }
.party-list strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Consistent section density and aligned table controls. */
.channel-timeline { grid-template-columns: 0.58fr 3.42fr; gap: 14px; }
.timeline-events { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.timeline-events p { margin-top: 4px; }

.ranking-table th:nth-child(3), .ranking-table td:nth-child(3), .ranking-table th:nth-child(4), .ranking-table td:nth-child(4), .ranking-table th:nth-child(5), .ranking-table td:nth-child(5) { width: 142px; }
.ranking-table .rating-row > td:first-child { vertical-align: middle; }
.awards-grid { align-items: stretch; }
.award-card { display: flex; flex-direction: column; }
.award-card dl { flex: 1; }
.unlisted-card { margin-top: 14px; border-color: #274c68;  }
.unlisted-card .eyebrow { color: #9bc9d8; }
html[data-theme="light"] .unlisted-card { border-color: #a7c7d7;  }

@media (max-width: 800px) {
  .channel-timeline { grid-template-columns: 1fr; gap: 12px; }
  .timeline-events { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.milestone-timeline { position: relative; height: 106px; margin: 30px 10px 12px; }
.milestone-rail { position: absolute; top: 50%; right: 0; left: 0; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #2470c8, #45c9ed); box-shadow: 0 0 15px rgba(69, 201, 237, 0.22); transform: translateY(-50%); }
.milestone-point { position: absolute; top: 50%; left: var(--point); z-index: 1; width: 12px; height: 12px; padding: 0; border: 2px solid #c7f4ff; border-radius: 50%; background: #2470c8; box-shadow: 0 0 0 3px #172434, 0 0 12px rgba(69, 201, 237, 0.72); cursor: help; transform: translate(-50%, -50%); }
.milestone-point.unreached { border-color: #6d8493; background: #263847; box-shadow: 0 0 0 3px #172434; }
.milestone-point:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.milestone-point span { position: absolute; z-index: 2; bottom: calc(100% + 14px); left: 50%; width: min(240px, 70vw); padding: 9px 10px; border: 1px solid #3a7091; border-radius: 7px; background: #0d1825; color: #ddf5fb; font: 500 0.72rem/1.45 var(--body); text-align: left; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 120ms ease, transform 120ms ease; }
.milestone-point[style*="--row:1"] span { top: calc(100% + 14px); bottom: auto; }
.milestone-point:hover span, .milestone-point:focus span { opacity: 1; transform: translate(-50%, 0); }

html[data-theme="light"] .ranking-controls { border-color: #c8d9e4; }
html[data-theme="light"] .ranking-controls summary { color: #29566e; }
html[data-theme="light"] .ranking-table-wrap { border-color: #bfd1df;  }
html[data-theme="light"] .ranking-table thead th { color: #5d6a5a; background: #efe8d7; }
html[data-theme="light"] .rating-score { border-color: #9bc8de; background: #ebe7d8; }
html[data-theme="light"] .milestone-point { border-color: #f6efe1; box-shadow: 0 0 0 3px #f3ecdc, 0 0 12px rgba(31, 136, 183, var(--alpha-accent-strong)); }
html[data-theme="light"] .milestone-point.unreached { border-color: #a9a291; background: #ddd6c4; box-shadow: 0 0 0 3px #f3ecdc; }
html[data-theme="light"] .milestone-point span { border-color: #c2bba9; background: #f8f3e7; color: #17394d; }

@media (max-width: 560px) {
  .ranking-table-wrap { margin-right: -2px; margin-left: -2px; }
  .milestone-timeline { height: 118px; margin-right: 5px; margin-left: 5px; }
  .milestone-point { width: 10px; height: 10px; }
  .milestone-point span { width: min(220px, 78vw); font-size: 0.67rem; }
}

/* Keep timeline tooltips inside their rail, including the first and last dates.
   Hidden tooltips must not make the entire mobile page horizontally scrollable. */
.milestone-timeline { container-type: inline-size; }
.milestone-point span {
  --tooltip-width: min(240px, 70vw);
  width: var(--tooltip-width);
  left: clamp(calc(var(--tooltip-width) / 2 - var(--tooltip-anchor)),
    50%, calc(100cqw - var(--tooltip-anchor) - var(--tooltip-width) / 2));
}
@media (max-width: 560px) {
  .milestone-point span { --tooltip-width: min(220px, 78vw); }
}

/* The two list cards share their rows, so each list starts level with the
   other's despite different intro lengths, and the shorter list spreads to
   finish level at the bottom. Phones stack the cards, so this is desktop only. */
@media (min-width: 761px) {
  .rec-lime,
  .rec-violet { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .rec-lime ul,
  .rec-violet ul { display: flex; flex-direction: column; justify-content: space-between; }
}