* {margin:0;padding:0;box-sizing:border-box}
:root {
--ink:#16110f;
--steel:#2b2b2f;
--steel-2:#3a3a40;
--iron:#4a4a52;
--ash:#8b8b93;
--smoke:#c9c5be;
--blood:#8e1c1c;
--blood-deep:#5c1010;
--blood-bright:#c22b22;
--sodium:#f0b429;
--sodium-soft:#ffd166;
--paper:#e8e2d6;
--page:#100d0c;
--gap:10px;
}
html {scroll-behavior:smooth}
body {
background:var(--page);
color:var(--paper);
font-family:"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
font-size:13px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
body::before {
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:999;
background-image:
repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px);
mix-blend-mode:overlay;
}
img {display:block;max-width:100%}
a {color:var(--smoke);text-decoration:none}
ul, ol {list-style:none}
button, input {font:inherit;color:inherit}
h1, h2 {font-weight:800;letter-spacing:.02em}
.section-heading {
font-size:14px;
color:var(--sodium);
text-transform:uppercase;
letter-spacing:.24em;
padding:0 0 5px;
margin-bottom:9px;
border-bottom:1px solid rgba(240,180,41,.28);
position:relative;
}
.section-heading::after {
content:"";
position:absolute;
left:0;
bottom:-1px;
width:44px;
height:2px;
background:var(--blood-bright);
}
.site-header {
position:sticky;
top:0;
z-index:60;
background:linear-gradient(180deg,rgba(16,13,12,.96),rgba(16,13,12,.82));
border-bottom:1px solid rgba(240,180,41,.22);
backdrop-filter:blur(4px);
}
.header-bar {
display:flex;
align-items:center;
justify-content:space-between;
padding:6px 12px;
}
a[data-contract="site-name"] {
font-size:17px;
font-weight:900;
letter-spacing:.12em;
color:var(--paper);
text-decoration:none;
text-shadow:0 0 12px rgba(194,43,34,.65);
}
a[data-contract="site-name"]:hover {color:var(--sodium)}
.category-strip {
display:flex;
flex-wrap:wrap;
gap:4px 6px;
padding:0 12px 7px;
max-width:100%;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:11px;
letter-spacing:.1em;
padding:2px 8px;
color:var(--smoke);
text-decoration:none;
border:1px solid rgba(139,139,147,.4);
background:rgba(43,43,47,.55);
transition:all .15s ease;
}
a.runtime-category:hover {
color:var(--page);
background:var(--sodium);
border-color:var(--sodium);
box-shadow:0 0 14px rgba(240,180,41,.5);
}
.page-main {
max-width:1180px;
margin:0 auto;
padding:0 12px 26px;
display:flex;
flex-direction:column;
gap:18px;
}
.movie-overview {
position:relative;
background:
linear-gradient(160deg,rgba(92,16,16,.55),rgba(16,13,12,.2) 42%),
radial-gradient(120% 90% at 82% 4%,rgba(240,180,41,.16),transparent 58%),
linear-gradient(180deg,#1c1614,#100d0c);
border:1px solid rgba(139,139,147,.22);
padding:14px 14px 16px;
overflow:hidden;
}
.movie-overview::after {
content:"";
position:absolute;
right:-40px;
bottom:-60px;
width:220px;
height:220px;
background:radial-gradient(circle,rgba(194,43,34,.4),transparent 68%);
pointer-events:none;
}
.overview-shell {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:16px;
position:relative;
z-index:1;
}
.poster-column {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.poster-frame {
position:relative;
width:min(220px,58vw);
background:#000;
border:1px solid rgba(240,180,41,.3);
box-shadow:0 0 0 1px rgba(0,0,0,.7),0 14px 34px rgba(0,0,0,.7);
}
.poster-frame img {
width:100%;
height:auto;
display:block;
filter:saturate(.85) contrast(1.08);
}
.poster-frame::before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,transparent 55%,rgba(16,13,12,.85));
}
.poster-caption {
position:absolute;
left:0;
right:0;
bottom:0;
padding:5px 7px;
font-family:"Segoe Script","Bradley Hand","PingFang SC",cursive,sans-serif;
font-size:11px;
letter-spacing:.14em;
color:var(--sodium-soft);
text-shadow:0 1px 4px #000,0 0 12px rgba(240,180,41,.5);
}
.overview-info {
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
}
.movie-title {
font-size:clamp(26px,7vw,48px);
line-height:1;
letter-spacing:.06em;
color:var(--paper);
text-shadow:
2px 2px 0 var(--blood-deep),
0 0 26px rgba(240,180,41,.4),
0 0 60px rgba(194,43,34,.55);
}
.movie-tagline {
font-family:"Segoe Script","Bradley Hand","PingFang SC",cursive,sans-serif;
font-size:12.5px;
letter-spacing:.08em;
color:var(--sodium-soft);
border-left:2px solid var(--blood-bright);
padding-left:8px;
}
.player-shell {
position:relative;
width:100%;
background:#000;
border:1px solid rgba(139,139,147,.3);
box-shadow:0 0 0 1px rgba(0,0,0,.8),0 12px 30px rgba(0,0,0,.6);
}
.player-shell video {
display:block;
width:100%;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:5px;
padding:6px;
background:linear-gradient(180deg,rgba(43,43,47,.92),rgba(22,17,15,.96));
border-top:1px solid rgba(240,180,41,.18);
}
.control-btn {
font-size:11px;
letter-spacing:.06em;
padding:3px 8px;
background:rgba(74,74,82,.6);
border:1px solid rgba(139,139,147,.35);
color:var(--smoke);
cursor:pointer;
transition:all .15s ease;
white-space:nowrap;
}
.control-btn:hover {
background:var(--blood);
border-color:var(--blood-bright);
color:#fff;
}
.control-play {
background:var(--blood-deep);
border-color:var(--blood-bright);
color:var(--paper);
font-weight:700;
}
.control-light {border-color:rgba(240,180,41,.5);color:var(--sodium-soft)}
.control-progress {
flex:1 1 120px;
min-width:90px;
height:4px;
-webkit-appearance:none;
appearance:none;
background:linear-gradient(90deg,var(--blood-bright),var(--sodium));
cursor:pointer;
}
.control-progress::-webkit-slider-thumb {
-webkit-appearance:none;
width:11px;
height:11px;
border-radius:50%;
background:var(--sodium);
box-shadow:0 0 8px rgba(240,180,41,.9);
}
.control-progress::-moz-range-thumb {
width:11px;height:11px;border:0;border-radius:50%;background:var(--sodium)
}
.control-volume {
flex:0 1 74px;
min-width:54px;
height:4px;
-webkit-appearance:none;
appearance:none;
background:var(--iron);
cursor:pointer;
}
.control-volume::-webkit-slider-thumb {
-webkit-appearance:none;
width:9px;height:9px;border-radius:50%;background:var(--smoke)
}
.control-volume::-moz-range-thumb {
width:9px;height:9px;border:0;border-radius:50%;background:var(--smoke)
}
.player-shell.is-playing {border-color:rgba(240,180,41,.6);box-shadow:0 0 22px rgba(240,180,41,.3)}
.player-shell.is-theater {
background:#000;
border-color:var(--sodium);
box-shadow:0 0 40px rgba(240,180,41,.35);
}
.player-shell.is-lights-off video {filter:brightness(.42) saturate(.7)}
.player-shell.is-lights-off .player-controls {opacity:.55}
.episode-status {
border-left:3px solid var(--sodium);
background:linear-gradient(90deg,rgba(240,180,41,.1),rgba(240,180,41,0));
padding:5px 10px;
}
.status-line {
font-size:12px;
letter-spacing:.08em;
color:var(--sodium-soft);
}
.cast-block {min-width:0}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
gap:5px;
}
.cast-card {
display:grid;
grid-template-columns:26px 1fr;
grid-template-rows:auto auto;
column-gap:6px;
align-items:center;
padding:4px 5px;
background:rgba(43,43,47,.55);
border:1px solid rgba(139,139,147,.2);
min-width:0;
}
.cast-avatar {
grid-row:1 / span 2;
width:26px;
height:34px;
background:
linear-gradient(180deg,rgba(194,43,34,.55),rgba(16,13,12,.9)),
linear-gradient(135deg,#4a4a52,#16110f);
border:1px solid rgba(240,180,41,.28);
position:relative;
overflow:hidden;
}
.cast-avatar::after {
content:"";
position:absolute;
left:50%;
top:6px;
width:9px;
height:9px;
transform:translateX(-50%);
border-radius:50%;
background:rgba(232,226,214,.55);
box-shadow:0 12px 0 5px rgba(232,226,214,.3);
}
.cast-name {
font-size:11.5px;
font-weight:700;
color:var(--paper);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.cast-role {
font-size:10px;
color:var(--ash);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.synopsis-lead {
font-size:12.5px;
line-height:1.62;
color:var(--smoke);
padding-left:9px;
border-left:2px solid rgba(194,43,34,.6);
margin-bottom:8px;
}
.synopsis-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:6px 12px;
}
.synopsis-item {
font-size:11.5px;
line-height:1.55;
color:var(--ash);
padding-left:16px;
position:relative;
}
.synopsis-item::before {
content:"◆";
position:absolute;
left:0;
top:0;
font-size:8px;
line-height:1.9;
color:var(--blood-bright);
}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
gap:3px 14px;
}
.detail-row {
display:flex;
align-items:baseline;
gap:7px;
padding:3px 0;
border-bottom:1px dotted rgba(139,139,147,.26);
min-width:0;
}
.detail-key {
flex:0 0 auto;
font-size:11px;
letter-spacing:.08em;
color:var(--ash);
}
.detail-value {
font-size:11.5px;
color:var(--smoke);
font-weight:600;
min-width:0;
}
.timeline-band {
background:linear-gradient(180deg,rgba(43,43,47,.5),rgba(16,13,12,.5));
border:1px solid rgba(139,139,147,.2);
padding:12px 12px 14px;
}
.timeline-scroll {
overflow-x:auto;
overflow-y:hidden;
padding-bottom:6px;
scrollbar-width:thin;
scrollbar-color:var(--blood) rgba(43,43,47,.6);
}
.timeline-scroll::-webkit-scrollbar {height:6px}
.timeline-scroll::-webkit-scrollbar-track {background:rgba(43,43,47,.6)}
.timeline-scroll::-webkit-scrollbar-thumb {background:var(--blood);border-radius:3px}
.timeline-track {
display:flex;
align-items:flex-start;
gap:0;
position:relative;
padding-top:26px;
min-width:max-content;
}
.timeline-track::before {
content:"";
position:absolute;
left:0;
right:0;
top:14px;
height:3px;
background:linear-gradient(90deg,var(--blood-deep),var(--iron) 45%,var(--sodium) 100%);
box-shadow:0 0 10px rgba(240,180,41,.25);
}
.timeline-node {
position:relative;
flex:0 0 auto;
width:132px;
padding:0 10px 0 0;
display:flex;
flex-direction:column;
gap:3px;
}
.node-pin {
position:absolute;
left:4px;
top:-24px;
width:8px;
height:8px;
border-radius:50%;
background:var(--smoke);
box-shadow:0 0 0 3px rgba(16,13,12,.95),0 0 8px rgba(232,226,214,.5);
}
.node-pin::after {
content:"";
position:absolute;
left:50%;
top:7px;
width:1px;
height:14px;
transform:translateX(-50%);
background:rgba(139,139,147,.6);
}
.node-timecode {
font-size:10.5px;
letter-spacing:.14em;
color:var(--sodium);
font-weight:700;
}
.node-label {
font-size:11px;
line-height:1.45;
color:var(--smoke);
}
.timeline-node:last-child .node-pin, .timeline-node:last-child .node-label {color:var(--sodium-soft)}
.episode-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
gap:6px;
}
.episode-cell {
position:relative;
display:flex;
flex-direction:column;
gap:2px;
padding:7px 8px;
background:rgba(43,43,47,.5);
border:1px solid rgba(139,139,147,.2);
border-left:2px solid var(--iron);
transition:all .16s ease;
overflow:hidden;
min-width:0;
}
.episode-cell:hover, .episode-cell:focus-within {
border-left-color:var(--sodium);
background:rgba(74,74,82,.6);
box-shadow:0 0 18px rgba(240,180,41,.18);
}
.episode-number {
font-size:10px;
letter-spacing:.14em;
color:var(--blood-bright);
font-weight:700;
}
.episode-title {
font-size:12.5px;
font-weight:800;
color:var(--paper);
letter-spacing:.04em;
}
.episode-duration {
font-size:10px;
color:var(--ash);
margin-top:auto;
}
.episode-summary {
font-size:11px;
line-height:1.5;
color:var(--ash);
max-height:0;
opacity:0;
overflow:hidden;
transition:max-height .24s ease,opacity .2s ease,margin .24s ease;
}
.episode-cell:hover .episode-summary, .episode-cell:focus-within .episode-summary {
max-height:120px;
opacity:1;
margin-top:3px;
}
.episode-cell.is-current {
border-left-color:var(--sodium);
background:linear-gradient(120deg,rgba(240,180,41,.16),rgba(43,43,47,.5));
}
.episode-cell.is-current .episode-number {color:var(--sodium)}
.episode-cell.is-current::after {
content:"NOW";
position:absolute;
top:5px;
right:6px;
font-size:8px;
letter-spacing:.16em;
color:var(--page);
background:var(--sodium);
padding:0 4px;
font-weight:800;
}
.comment-columns {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:8px 14px;
align-items:start;
}
.comment-column {
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
}
.comment-column-b {margin-top:14px}
.comment-card {
display:grid;
grid-template-columns:22px 1fr;
column-gap:7px;
padding:6px 8px;
background:rgba(43,43,47,.45);
border:1px solid rgba(139,139,147,.18);
border-top:1px solid rgba(240,180,41,.3);
min-width:0;
}
.comment-avatar {
grid-row:1 / span 2;
width:22px;
height:22px;
border-radius:50%;
background:
radial-gradient(circle at 35% 30%,rgba(240,180,41,.6),transparent 60%),
linear-gradient(135deg,var(--blood),#16110f);
border:1px solid rgba(240,180,41,.35);
}
.comment-nickname {
font-size:11px;
font-weight:700;
color:var(--sodium-soft);
letter-spacing:.06em;
}
.comment-text {
font-size:11.5px;
line-height:1.5;
color:var(--smoke);
grid-column:2;
}
.recommend-region {
background:linear-gradient(180deg,rgba(43,43,47,.35),rgba(16,13,12,.2));
border:1px solid rgba(139,139,147,.18);
padding:10px 10px 12px;
}
.recommend-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:8px;
align-items:start;
}
a.recommend-card {
display:flex;
flex-direction:column;
gap:3px;
background:rgba(22,17,15,.75);
border:1px solid rgba(139,139,147,.22);
padding:6px;
color:var(--smoke);
text-decoration:none;
transition:all .16s ease;
min-width:0;
}
a.recommend-card:hover {
border-color:var(--sodium);
background:rgba(92,16,16,.35);
box-shadow:0 0 18px rgba(240,180,41,.22);
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
display:block;
filter:saturate(.9) contrast(1.06);
border-bottom:1px solid rgba(240,180,41,.2);
}
.recommend-name {
font-size:12px;
font-weight:800;
color:var(--paper);
letter-spacing:.04em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.recommend-blurb {
font-size:10.5px;
line-height:1.45;
color:var(--ash);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
margin-top:20px;
padding:14px 12px 20px;
border-top:1px solid rgba(240,180,41,.25);
background:linear-gradient(180deg,rgba(92,16,16,.28),rgba(16,13,12,.9));
display:flex;
flex-direction:column;
gap:8px;
}
.footer-home-nav {
display:flex;
flex-wrap:wrap;
gap:6px 14px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;
letter-spacing:.1em;
color:var(--sodium-soft);
text-decoration:none;
border-bottom:1px solid transparent;
transition:all .15s ease;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--sodium);
border-bottom-color:var(--blood-bright);
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:5px 10px;
}
.friend-links-label {
font-size:11px;
letter-spacing:.16em;
color:var(--blood-bright);
font-weight:700;
}
a.runtime-friend-link {
font-size:11px;
color:var(--ash);
text-decoration:none;
white-space:nowrap;
transition:color .15s ease;
}
a.runtime-friend-link:hover {color:var(--sodium)}
.footer-disclaimer {
font-size:10.5px;
line-height:1.6;
color:rgba(139,139,147,.85);
max-width:860px;
}
@media (min-width:700px){.overview-shell {
grid-template-columns:minmax(0,210px) minmax(0,1fr);
gap:18px;
}
.poster-column {position:sticky;top:66px}
.poster-frame {width:100%}
.episode-grid {grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}}
@media (min-width:980px){.page-main {padding-left:18px;padding-right:18px;gap:22px}
.movie-overview {padding:18px}
.overview-shell {grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:22px}
.cast-list {grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.episode-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.comment-columns {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.comment-column-b {margin-top:26px}
.recommend-row {grid-template-columns:repeat(3,minmax(0,1fr))}
.timeline-node {width:146px}}
@media (max-width:420px){.cast-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-row {grid-template-columns:repeat(2,minmax(0,1fr))}
.movie-title {font-size:26px}
.control-btn {font-size:10px;padding:3px 6px}
.comment-column-b {margin-top:0}}

footer{text-align:center!important}
footer *{justify-content:center!important}
footer :is(div,nav,ul,ol,p,section,address){margin-left:auto!important;margin-right:auto!important}