* {box-sizing:border-box;margin:0;padding:0}
:root {
--ink:#0b1220;
--ink-2:#111a2c;
--indigo:#141f38;
--indigo-deep:#0a1123;
--rust:#7c3323;
--rust-bright:#b4492c;
--steel:#4a5265;
--steel-light:#8b93a5;
--ash:#c7ccd6;
--flare:#ff8a3c;
--flare-hot:#ffb066;
--brass:#b98a3f;
--brass-hot:#e0ae5c;
--line:rgba(139,147,165,.28);
--line-strong:rgba(139,147,165,.5);
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
--sans:"Helvetica Neue",Arial,"Noto Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--narrow:"Arial Narrow","Helvetica Neue Condensed","Noto Sans SC",Arial,sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--indigo-deep);
color:var(--ash);
font-family:var(--sans);
font-weight:500;
font-size:15px;
line-height:1.5;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
background-image:
linear-gradient(180deg,#0a1123 0%,#0d1630 40%,#0a1123 100%);
}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit}
h1, h2, h3 {font-family:var(--narrow);font-weight:800;letter-spacing:-.02em;line-height:1.1}
button, select, input {font:inherit;color:inherit}
.site-header {
background:linear-gradient(180deg,#0d1526,#0a1123);
border-bottom:1px solid var(--line);
position:relative;
}
.site-header::after {
content:"";
position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent,var(--rust) 30%,var(--flare) 50%,var(--rust) 70%,transparent);
opacity:.6;
}
.header-inner {
display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:8px 14px;
max-width:1240px;margin:0 auto;
}
a[data-contract="site-name"] {
font-family:var(--narrow);
font-weight:800;
font-size:19px;
letter-spacing:.04em;
color:#f0f2f6;
text-decoration:none;
text-transform:uppercase;
clip-path:polygon(0 0,100% 0,100% 72%,94% 100%,0 100%);
padding:4px 14px 4px 10px;
background:linear-gradient(90deg,rgba(180,73,44,.55),rgba(20,31,56,0));
border-left:3px solid var(--flare);
}
a[data-contract="site-name"]:hover {color:var(--flare-hot)}
.category-strip {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
justify-content:flex-end;
}
a.runtime-category {
white-space:nowrap;
font-size:12.5px;
font-weight:600;
letter-spacing:.02em;
color:var(--steel-light);
text-decoration:none;
padding:4px 10px;
border:1px solid var(--line);
background:rgba(74,82,101,.14);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:color .15s,border-color .15s,background .15s;
}
a.runtime-category:hover, a.runtime-category:focus-visible {
color:var(--flare-hot);
border-color:var(--rust-bright);
background:rgba(124,51,35,.3);
}
.page-main {
max-width:1240px;
margin:0 auto;
padding:10px 14px 0;
display:flex;flex-direction:column;
gap:10px;
}
.hero-shell {
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:14px;
align-items:start;
background:
linear-gradient(135deg,rgba(124,51,35,.16),rgba(10,17,35,.9) 45%),
var(--indigo);
border:1px solid var(--line);
padding:12px;
position:relative;
clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.hero-media {position:relative;align-self:start}
.hero-poster-shell {
position:relative;
overflow:hidden;
border:1px solid var(--line-strong);
background:#05080f;
}
.hero-poster-img {
width:100%;
height:auto;
object-fit:cover;
filter:contrast(1.15) saturate(.85) brightness(.82);
}
.hero-neon-overlay {
position:absolute;left:0;right:0;bottom:0;
padding:6px 8px;
background:linear-gradient(0deg,rgba(255,138,60,.22),rgba(10,17,35,0) 90%);
border-top:1px solid rgba(255,138,60,.35);
}
.hero-sheen-text {
font-family:var(--mono);
font-size:10.5px;
letter-spacing:.14em;
color:var(--flare-hot);
text-transform:uppercase;
white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
.hero-info {display:flex;flex-direction:column;gap:10px;min-width:0}
.movie-title {
font-size:clamp(28px,4.4vw,46px);
color:#f4f6fa;
letter-spacing:-.03em;
text-shadow:0 0 22px rgba(255,138,60,.28);
}
.movie-tagline {
font-family:var(--narrow);
font-weight:700;
font-size:15px;
letter-spacing:.02em;
color:var(--flare-hot);
border-left:3px solid var(--rust-bright);
padding-left:8px;
}
.movie-seo {
font-size:13px;
line-height:1.62;
color:#a9b0c0;
max-width:70ch;
}
.cast-band {border-top:1px solid var(--line);padding-top:8px}
.cast-heading {
font-size:12px;
letter-spacing:.22em;
color:var(--steel-light);
margin-bottom:6px;
}
.cast-strip {
display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
}
.cast-chip {
display:flex;flex-direction:column;align-items:center;gap:4px;
width:64px;
}
.cast-avatar {
width:52px;height:52px;border-radius:50%;
background:
radial-gradient(circle at 34% 30%,#5a6379,#1a2337 70%),
var(--steel);
border:1px solid var(--line-strong);
box-shadow:inset 0 -6px 10px rgba(0,0,0,.6),0 0 0 1px rgba(255,138,60,.12);
position:relative;
}
.cast-avatar::after {
content:"";position:absolute;inset:auto 0 0 0;height:38%;
background:linear-gradient(0deg,rgba(255,138,60,.22),transparent);
border-radius:50% 50% 50% 50%/0 0 100% 100%;
}
.cast-name {
font-size:11.5px;
font-weight:600;
white-space:nowrap;
color:var(--ash);
letter-spacing:0;
}
.synopsis-block {border-top:1px solid var(--line);padding-top:8px}
.synopsis-heading {
font-size:12px;letter-spacing:.22em;color:var(--steel-light);margin-bottom:5px;
}
.synopsis-para {
font-size:13px;line-height:1.62;color:#9fa7b8;
margin-bottom:5px;
}
.synopsis-para:last-child {margin-bottom:0}
.synopsis-para::first-letter {color:var(--flare-hot)}
.episode-status {border-top:1px solid var(--line);padding-top:8px}
.status-heading {font-size:12px;letter-spacing:.22em;color:var(--steel-light);margin-bottom:4px}
.status-line {
display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
}
.status-current {
font-family:var(--mono);
font-size:14px;
font-weight:700;
color:var(--flare-hot);
letter-spacing:.02em;
}
.status-total {
font-family:var(--mono);
font-size:12px;
color:var(--steel-light);
}
.detail-panel {
border-top:1px solid var(--line);
padding-top:8px;
}
.detail-heading {font-size:12px;letter-spacing:.22em;color:var(--steel-light);margin-bottom:6px}
.detail-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:1px;
background:var(--line);
border:1px solid var(--line);
}
.detail-row {
display:flex;gap:6px;align-items:baseline;
background:rgba(17,26,44,.92);
padding:4px 7px;
}
.detail-key {
font-family:var(--mono);
font-size:11px;
color:var(--steel-light);
letter-spacing:.04em;
flex:0 0 auto;
}
.detail-val {
font-size:12px;
color:var(--ash);
min-width:0;
}
.player-shell {
position:relative;
border:1px solid var(--line-strong);
background:#05080f;
box-shadow:0 12px 30px rgba(0,0,0,.55);
}
.player-video {
display:block;
width:100%;
background:#000;
filter:contrast(1.05) saturate(.9);
}
.player-bar {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:7px 8px;
background:linear-gradient(180deg,#111a2c,#0a1123);
border-top:1px solid var(--line);
}
.pbtn {
font-family:var(--narrow);
font-size:12px;
font-weight:700;
letter-spacing:.04em;
color:var(--ash);
background:rgba(74,82,101,.2);
border:1px solid var(--line);
padding:5px 10px;
cursor:pointer;
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:color .15s,background .15s,border-color .15s;
}
.pbtn:hover, .pbtn:focus-visible {
color:#0a1123;
background:var(--flare);
border-color:var(--flare-hot);
}
.pbtn.is-active {
color:#0a1123;
background:var(--brass-hot);
border-color:var(--brass-hot);
}
.pslider {
-webkit-appearance:none;appearance:none;
flex:1 1 120px;
min-width:90px;
height:4px;
background:linear-gradient(90deg,var(--rust-bright),var(--steel));
border:none;
cursor:pointer;
outline:none;
}
.pslider::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:12px;height:14px;
background:var(--flare-hot);
border:1px solid #0a1123;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.pslider::-moz-range-thumb {
width:12px;height:14px;border-radius:0;
background:var(--flare-hot);
border:1px solid #0a1123;
}
.pspeed {
font-family:var(--mono);
font-size:12px;
background:rgba(74,82,101,.2);
border:1px solid var(--line);
padding:5px 6px;
cursor:pointer;
}
.player-shell.is-dimmed .player-video {filter:brightness(.5) contrast(1.15)}
.player-shell.is-theater {
box-shadow:0 0 0 1px var(--flare),0 18px 44px rgba(0,0,0,.7);
}
.shell-divider {
display:flex;align-items:center;justify-content:center;gap:10px;
padding:4px 0;
position:relative;
}
.shell-divider::before {
content:"";position:absolute;left:0;right:0;top:50%;height:1px;
background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);
}
.shell-icon {
width:9px;height:20px;
background:linear-gradient(180deg,var(--brass-hot),var(--brass) 55%,#5a421c);
border-radius:2px 2px 1px 1px;
position:relative;
z-index:1;
box-shadow:0 0 6px rgba(224,174,92,.35);
}
.shell-icon::after {
content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
width:5px;height:3px;background:#3a2c12;border-radius:0 0 2px 2px;
}
.timeline-section {
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(20,31,56,.7),rgba(10,17,35,.6));
padding:10px;
}
.timeline-heading {
font-size:13px;letter-spacing:.2em;color:var(--flare-hot);
margin-bottom:8px;
padding-bottom:6px;
border-bottom:1px solid var(--line);
}
.timeline-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:0 18px;
position:relative;
}
.timeline-item {
display:grid;
grid-template-columns:96px minmax(0,1fr);
gap:10px;
align-items:start;
padding:5px 0;
border-bottom:1px dashed rgba(139,147,165,.18);
position:relative;
}
.timeline-time {
font-family:var(--mono);
font-size:11.5px;
font-weight:700;
letter-spacing:.02em;
color:var(--brass-hot);
text-align:right;
white-space:nowrap;
}
.timeline-label {
font-size:12.5px;
line-height:1.5;
color:#b3bac8;
position:relative;
padding-left:12px;
}
.timeline-label::before {
content:"";position:absolute;left:0;top:6px;
width:5px;height:5px;
background:var(--rust-bright);
transform:rotate(45deg);
}
.episodes-section {
border:1px solid var(--line);
background:var(--indigo);
padding:10px;
}
.episodes-heading {
font-size:13px;letter-spacing:.2em;color:var(--flare-hot);
margin-bottom:8px;
padding-bottom:6px;
border-bottom:1px solid var(--line);
}
.episode-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
}
.episode-card {
display:flex;flex-direction:column;gap:3px;
padding:7px 8px;
background:rgba(10,17,35,.72);
border:1px solid var(--line);
border-left:2px solid var(--steel);
position:relative;
transition:background .22s,border-color .22s,transform .22s;
clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.episode-card:hover {
background:linear-gradient(150deg,var(--brass),#6d4f1f);
border-color:var(--brass-hot);
border-left-color:var(--brass-hot);
transform:translateY(-1px);
}
.episode-card:hover .episode-num, .episode-card:hover .episode-title, .episode-card:hover .episode-summary, .episode-card:hover .episode-duration {color:#120c02}
.episode-num {
font-family:var(--mono);
font-size:10.5px;
font-weight:700;
letter-spacing:.08em;
color:var(--flare);
}
.episode-title {
font-size:14px;
color:#eef1f6;
letter-spacing:-.01em;
}
.episode-summary {
font-size:11.5px;
line-height:1.5;
color:#98a0b2;
flex:1 1 auto;
}
.episode-duration {
font-family:var(--mono);
font-size:10.5px;
color:var(--steel-light);
align-self:flex-end;
}
.comments-section {
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(10,17,35,.85),rgba(20,31,56,.65));
padding:10px;
}
.comments-heading {
font-size:13px;letter-spacing:.2em;color:var(--flare-hot);
margin-bottom:8px;
padding-bottom:6px;
border-bottom:1px solid var(--line);
}
.comments-columns {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
align-items:start;
}
.comment-card {
padding:7px 9px;
background:rgba(11,18,32,.7);
border:1px solid var(--line);
border-top:2px solid var(--rust);
}
.comment-nick {
display:block;
font-family:var(--mono);
font-size:11px;
font-weight:700;
letter-spacing:.04em;
color:var(--flare-hot);
margin-bottom:4px;
}
.comment-text {
font-size:12.5px;
line-height:1.62;
color:#a6adbc;
}
.rec-region {
border:1px solid var(--line);
background:var(--indigo);
padding:9px 10px 10px;
}
.rec-heading {
font-size:12.5px;
letter-spacing:.16em;
color:var(--ash);
display:flex;align-items:center;gap:8px;
margin-bottom:8px;
padding-bottom:6px;
border-bottom:1px solid var(--line);
}
.rec-heading::after {
content:"条数 " attr(data-recommendation-count);
font-family:var(--mono);
font-size:10px;
font-weight:600;
letter-spacing:.06em;
color:var(--flare-hot);
background:rgba(124,51,35,.28);
border:1px solid rgba(180,73,44,.5);
padding:1px 6px;
white-space:nowrap;
}
.rec-list {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
align-items:start;
}
.rec-item {min-width:0}
a[data-runtime="recommendation"] {
display:flex;flex-direction:column;gap:4px;
text-decoration:none;
color:var(--ash);
border:1px solid var(--line);
background:rgba(10,17,35,.6);
padding:5px;
height:100%;
transition:border-color .18s,background .18s,color .18s;
clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
a[data-runtime="recommendation"]:hover {
border-color:var(--flare);
background:rgba(124,51,35,.24);
color:var(--flare-hot);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
filter:contrast(1.1) saturate(.8) brightness(.85);
border:1px solid rgba(139,147,165,.25);
}
[data-runtime="recommendation"] [data-runtime="name"] {
font-family:var(--narrow);
font-size:12.5px;
font-weight:700;
letter-spacing:-.01em;
color:#e8ebf1;
line-height:1.25;
}
[data-runtime="recommendation"] [data-runtime="blurb"] {
font-size:10.5px;
line-height:1.45;
color:#8f97a8;
}
.site-footer {
margin-top:14px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,#0a1123,#070d18);
padding:12px 14px 20px;
}
.footer-disclaimer {
max-width:1240px;margin:0 auto 10px;
font-size:11px;
line-height:1.6;
color:#6f7789;
}
.footer-links {
display:flex;flex-wrap:wrap;gap:10px;
max-width:1240px;margin:0 auto 8px;
}
.footer-link {
font-family:var(--narrow);
font-size:12px;font-weight:700;
letter-spacing:.06em;
text-decoration:none;
padding:3px 10px;
border:1px solid var(--line);
color:var(--steel-light);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
transition:color .15s,border-color .15s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--flare-hot);border-color:var(--rust-bright);
}
.friend-links {
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
max-width:1240px;margin:0 auto;
padding-top:8px;
border-top:1px dashed rgba(139,147,165,.2);
}
.friend-label {
font-family:var(--mono);
font-size:10.5px;
letter-spacing:.14em;
color:var(--steel-light);
text-transform:uppercase;
}
.runtime-friend-link {
font-size:11.5px;
color:#7f8798;
text-decoration:none;
transition:color .15s;
}
.runtime-friend-link:hover {color:var(--flare-hot)}
@media (max-width:1080px){.rec-list {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.hero-shell {grid-template-columns:minmax(0,1fr)}
.hero-media {max-width:280px}
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.rec-list {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.page-main {padding:8px 10px 0;gap:8px}
.header-inner {padding:7px 10px}
a[data-contract="site-name"] {font-size:16px}
.hero-shell {padding:9px}
.hero-info {gap:8px}
.movie-title {font-size:26px}
.movie-seo {font-size:12.5px}
.cast-chip {width:58px}
.cast-avatar {width:46px;height:46px}
.detail-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.timeline-item {grid-template-columns:82px minmax(0,1fr);gap:8px}
.episode-grid {grid-template-columns:minmax(0,1fr)}
.comments-columns {grid-template-columns:minmax(0,1fr)}
.rec-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.player-bar {gap:5px;padding:6px}
.pbtn {font-size:11px;padding:4px 8px}
.pslider {flex:1 1 100%}
.shell-icon {width:7px;height:16px}}
@media (max-width:400px){.rec-list {grid-template-columns:minmax(0,1fr)}
.detail-grid {grid-template-columns:minmax(0,1fr)}}

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}