* {box-sizing:border-box;margin:0;padding:0}
:root {
--ink:#0d1215;
--ink-2:#131a1e;
--ink-3:#1a2328;
--line:#2c3a40;
--line-soft:#223036;
--mist:#c9d3d0;
--paper:#e8e6dc;
--paper-dim:#a9b3b0;
--cinnabar:#b23a2e;
--cinnabar-soft:#8f2f26;
--cinnabar-glow:rgba(178,58,46,.35);
--gap:10px;
}
html {-webkit-text-size-adjust:100%}
body {
background:var(--ink);
color:var(--paper);
font-family:"Songti SC","SimSun","Noto Serif SC",serif;
font-size:14px;
line-height:1.6;
letter-spacing:.02em;
background-image:linear-gradient(180deg,#0d1215 0%,#101719 40%,#0d1215 100%);
}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
img {display:block;max-width:100%}
button, input, select {font:inherit;color:inherit;background:none;border:none}
h1, h2, h3 {font-family:"KaiTi","STKaiti","Kaiti SC","Noto Serif SC",serif;font-weight:700;line-height:1.25}
.site-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
padding:8px 16px;
background:var(--ink-2);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:20;
}
a[data-contract="site-name"] {
font-family:"KaiTi","STKaiti",serif;
font-weight:700;
font-size:19px;
color:var(--paper);
letter-spacing:.08em;
border-left:3px solid var(--cinnabar);
padding-left:9px;
text-decoration:none;
}
.category-nav {
display:flex;
flex-wrap:wrap;
gap:2px 6px;
justify-content:flex-end;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12.5px;
color:var(--paper-dim);
text-decoration:none;
padding:3px 9px;
border:1px solid var(--line-soft);
letter-spacing:.06em;
transition:color .18s,border-color .18s,background .18s;
}
a.runtime-category:hover {
color:var(--paper);
border-color:var(--cinnabar-soft);
background:rgba(178,58,46,.1);
}
.page-main {
display:block;
padding:0 16px 24px;
max-width:1500px;
margin:0 auto;
}
.section-heading {
font-size:17px;
letter-spacing:.14em;
color:var(--paper);
padding-left:12px;
border-left:4px solid var(--cinnabar);
margin-bottom:10px;
}
.movie-overview {
border-bottom:1px solid var(--line);
padding-bottom:16px;
margin-bottom:14px;
}
.overview-hero {
position:relative;
display:grid;
grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
gap:18px;
align-items:end;
padding:18px 0 20px;
min-height:270px;
border-bottom:1px solid var(--line-soft);
overflow:hidden;
}
.hero-figure {
position:relative;
align-self:stretch;
min-height:230px;
}
.hero-portrait {
position:absolute;
inset:0;
overflow:hidden;
background:
radial-gradient(120% 80% at 32% 40%,rgba(120,140,140,.18),transparent 62%),
linear-gradient(160deg,#1b2529 0%,#0e1518 70%);
border:1px solid var(--line-soft);
}
.hero-portrait::before {
content:"";
position:absolute;
left:14%;top:6%;
width:52%;height:120%;
background:linear-gradient(180deg,rgba(200,214,210,.5) 0%,rgba(200,214,210,.14) 34%,rgba(20,28,32,.9) 72%);
clip-path:polygon(38% 0,74% 4%,86% 24%,80% 52%,96% 100%,6% 100%,24% 52%,20% 22%);
opacity:.5;
}
.hero-shadow {
position:absolute;
right:0;top:0;
width:58%;
height:100%;
background:linear-gradient(255deg,rgba(6,9,11,.96) 30%,rgba(6,9,11,.55) 68%,transparent 100%);
}
.hero-swordline {
position:absolute;
left:8%;top:-8%;
width:3px;height:124%;
background:linear-gradient(180deg,transparent,var(--cinnabar) 22%,var(--cinnabar) 78%,transparent);
transform:rotate(16deg);
box-shadow:0 0 12px var(--cinnabar-glow);
opacity:.85;
}
.hero-battlemap-label {
position:absolute;
left:0;bottom:0;
font-size:11px;
letter-spacing:.24em;
color:var(--paper-dim);
background:rgba(9,13,15,.78);
border:1px solid var(--line-soft);
border-left:2px solid var(--cinnabar);
padding:3px 10px;
}
.hero-heading {
position:relative;
z-index:2;
padding-bottom:6px;
}
.movie-title {
font-size:clamp(24px,3.4vw,42px);
letter-spacing:.1em;
color:var(--paper);
text-shadow:0 0 22px rgba(0,0,0,.9);
}
.movie-title::after {
content:"";
display:block;
width:74px;height:2px;
margin-top:10px;
background:var(--cinnabar);
}
.movie-tagline {
font-size:14.5px;
color:var(--mist);
letter-spacing:.16em;
margin-top:9px;
}
.movie-seo {
font-size:12.5px;
color:var(--paper-dim);
max-width:62ch;
margin-top:9px;
padding-left:10px;
border-left:2px solid var(--line);
line-height:1.75;
}
.overview-body {
display:grid;
grid-template-columns:minmax(0,242px) minmax(0,1fr);
gap:14px;
align-items:start;
margin-top:14px;
}
.poster-column {min-width:0}
.poster-frame {
border:1px solid var(--line);
padding:5px;
background:var(--ink-2);
}
.poster-image {
width:100%;
height:auto;
object-fit:cover;
border:1px solid var(--line-soft);
filter:saturate(.82) contrast(1.05);
}
.poster-caption {
font-family:"KaiTi","STKaiti",serif;
font-size:12.5px;
letter-spacing:.14em;
color:var(--mist);
text-align:center;
padding:6px 2px 1px;
border-top:1px solid var(--line-soft);
margin-top:6px;
}
.overview-info {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
align-items:start;
min-width:0;
}
.panel {
background:var(--ink-2);
border:1px solid var(--line-soft);
border-top:2px solid var(--line);
padding:10px 12px 12px;
min-width:0;
}
.panel-heading {
font-size:13.5px;
letter-spacing:.18em;
color:var(--mist);
padding-bottom:7px;
margin-bottom:9px;
border-bottom:1px solid var(--line-soft);
position:relative;
}
.panel-heading::before {
content:"";
position:absolute;
left:0;bottom:-1px;
width:34px;height:2px;
background:var(--cinnabar);
}
.episode-status {grid-column:1/-1}
.status-line {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px;
padding:3px 0;
border-bottom:1px dashed var(--line-soft);
}
.status-line:last-child {border-bottom:none}
.status-label {
font-size:12.5px;
color:var(--paper-dim);
letter-spacing:.12em;
}
.status-value {
font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
font-size:17px;
color:var(--paper);
}
.status-number {
color:var(--cinnabar);
font-weight:700;
letter-spacing:.04em;
}
.cast-list {
display:flex;
flex-wrap:wrap;
gap:8px 14px;
}
.cast-item {
display:flex;
align-items:center;
gap:7px;
}
.cast-avatar {
width:34px;height:34px;
border-radius:50%;
flex:none;
background:
radial-gradient(circle at 36% 30%,rgba(220,226,222,.38),transparent 58%),
linear-gradient(150deg,#3a4a4e,#1a2429);
border:1px solid var(--line);
box-shadow:inset 0 0 0 2px var(--ink-2);
position:relative;
}
.cast-avatar::after {
content:"";
position:absolute;
inset:0;
border-radius:50%;
border:1px solid rgba(178,58,46,.35);
}
.cast-name {
font-size:12.5px;
color:var(--mist);
letter-spacing:.06em;
}
.synopsis {grid-column:1/-1}
.synopsis-paragraph {
font-size:13px;
line-height:1.85;
color:var(--mist);
padding-left:11px;
border-left:2px solid var(--line-soft);
margin-bottom:8px;
}
.synopsis-paragraph:last-child {margin-bottom:0}
.synopsis-paragraph::first-letter {
color:var(--cinnabar);
font-family:"KaiTi","STKaiti",serif;
}
.details {grid-column:1/-1}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:0 18px;
}
.detail-row {
display:flex;
align-items:baseline;
gap:8px;
padding:5px 0;
border-bottom:1px solid var(--line-soft);
min-width:0;
}
.detail-key {
font-size:12px;
color:var(--paper-dim);
letter-spacing:.1em;
flex:none;
width:70px;
}
.detail-key::after {content:"｜";color:var(--line);margin-left:4px}
.detail-value {
font-size:12.5px;
color:var(--paper);
flex:1 1 auto;
min-width:0;
}
.detail-number {
font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
color:var(--cinnabar);
}
.player-shell {
margin-top:14px;
width:100%;
}
.player-frame {
position:relative;
width:100%;
background:#05080a;
border:1px solid var(--line);
padding:6px;
}
.player-frame video {
display:block;
width:100%;
background:#000;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:7px 4px 2px;
border-top:1px solid var(--line-soft);
margin-top:6px;
}
.control-button {
font-size:12px;
letter-spacing:.08em;
color:var(--mist);
border:1px solid var(--line);
padding:4px 11px;
cursor:pointer;
background:var(--ink-3);
transition:color .16s,border-color .16s,background .16s;
}
.control-button:hover {color:var(--paper);border-color:var(--cinnabar-soft)}
.control-button.is-active {
color:var(--paper);
border-color:var(--cinnabar);
background:rgba(178,58,46,.24);
}
.control-range {
flex:1 1 130px;
min-width:90px;
height:4px;
-webkit-appearance:none;
appearance:none;
background:var(--line);
cursor:pointer;
}
.control-range::-webkit-slider-thumb {
-webkit-appearance:none;
width:12px;height:12px;
border-radius:50%;
background:var(--cinnabar);
border:1px solid #d8c7be;
cursor:pointer;
}
.control-range::-moz-range-thumb {
width:12px;height:12px;
border-radius:50%;
background:var(--cinnabar);
border:1px solid #d8c7be;
cursor:pointer;
}
.control-select {
font-size:12px;
color:var(--mist);
background:var(--ink-3);
border:1px solid var(--line);
padding:4px 6px;
cursor:pointer;
}
.player-shell.is-theater .player-frame, .player-frame.is-theater {
background:#000;
padding:0;
}
.player-frame.is-lights-off video {
filter:brightness(.42) saturate(.6);
}
.timeline {
padding:14px 0 16px;
border-bottom:1px solid var(--line);
margin-bottom:14px;
}
.timeline-track {
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:0;
position:relative;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:var(--ink-2);
}
.timeline-track::before {
content:"";
position:absolute;
left:0;right:0;top:50%;
height:1px;
background:linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
}
.timeline-node {
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:3px;
padding:26px 10px 22px;
border-right:1px dashed var(--line-soft);
min-width:0;
}
.timeline-node:last-child {border-right:none}
.timeline-dot {
position:absolute;
top:calc(50% - 5px);
left:10px;
width:10px;height:10px;
border-radius:50%;
background:var(--cinnabar);
box-shadow:0 0 0 3px var(--ink-2),0 0 10px var(--cinnabar-glow);
}
.timeline-time {
font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
font-size:11.5px;
color:var(--cinnabar);
letter-spacing:.06em;
}
.timeline-label {
font-size:12px;
color:var(--mist);
line-height:1.5;
letter-spacing:.04em;
}
.episodes {
padding-bottom:16px;
border-bottom:1px solid var(--line);
margin-bottom:14px;
}
.episode-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 14px;
}
.episode-card {
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:10px;
padding:9px 10px;
background:var(--ink-2);
border:1px solid var(--line-soft);
border-left:2px solid var(--line);
align-items:start;
transition:border-color .18s,background .18s;
}
.episode-card:hover {
border-left-color:var(--cinnabar);
background:var(--ink-3);
}
.episode-number {
font-family:"KaiTi","STKaiti",serif;
font-size:15px;
font-weight:700;
color:var(--cinnabar);
letter-spacing:.04em;
white-space:nowrap;
padding-top:1px;
writing-mode:vertical-rl;
text-orientation:upright;
line-height:1.1;
}
.episode-body {min-width:0}
.episode-title {
font-size:13.5px;
letter-spacing:.1em;
color:var(--paper);
margin-bottom:3px;
}
.episode-summary {
font-size:12px;
color:var(--paper-dim);
line-height:1.65;
}
.episode-meta {
margin-top:5px;
}
.episode-duration {
font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
font-size:11px;
color:var(--mist);
border:1px solid var(--line-soft);
padding:1px 7px;
letter-spacing:.06em;
}
.comments {
padding-bottom:16px;
border-bottom:1px solid var(--line);
margin-bottom:14px;
}
.comment-columns {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 14px;
align-items:start;
}
.comment-column {
display:flex;
flex-direction:column;
gap:8px;
min-width:0;
}
.comment-card {
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:9px;
padding:9px 10px;
background:var(--ink-2);
border:1px solid var(--line-soft);
align-items:start;
}
.comment-seal {
width:26px;height:26px;
flex:none;
display:grid;
place-items:center;
font-family:"KaiTi","STKaiti",serif;
font-size:13px;
font-weight:700;
color:#f0e7e2;
background:var(--cinnabar-soft);
border-radius:3px;
box-shadow:inset 0 0 0 1px rgba(255,240,235,.35);
}
.comment-body {min-width:0}
.comment-nickname {
font-family:"KaiTi","STKaiti",serif;
font-size:12.5px;
font-weight:700;
color:var(--cinnabar);
letter-spacing:.08em;
margin-bottom:3px;
}
.comment-text {
font-size:12px;
color:var(--mist);
line-height:1.7;
}
.recommend-region {
padding-bottom:16px;
border-bottom:1px solid var(--line);
margin-bottom:14px;
}
.recommend-region:last-of-type {border-bottom:none}
.recommend-title {
font-size:14px;
letter-spacing:.2em;
color:var(--paper);
writing-mode:vertical-rl;
text-orientation:upright;
height:auto;
padding:10px 6px;
border:1px solid var(--line-soft);
border-left:2px solid var(--cinnabar);
margin-bottom:10px;
float:left;
margin-right:12px;
}
.recommend-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px;
align-items:start;
clear:both;
}
.recommend-card {
display:flex;
flex-direction:column;
gap:5px;
background:var(--ink-2);
border:1px solid var(--line-soft);
padding:6px;
align-self:start;
transition:border-color .18s,background .18s,transform .18s;
}
a.recommend-card {
color:var(--mist);
text-decoration:none;
}
a.recommend-card:hover {
border-color:var(--cinnabar-soft);
background:var(--ink-3);
transform:translateY(-2px);
}
.recommend-card img {
width:100%;
aspect-ratio:3 / 4;
height:auto;
object-fit:cover;
border:1px solid var(--line-soft);
filter:saturate(.85);
}
.recommend-name {
font-family:"KaiTi","STKaiti",serif;
font-size:13px;
font-weight:700;
color:var(--paper);
letter-spacing:.06em;
}
.recommend-blurb {
font-size:11.5px;
color:var(--paper-dim);
line-height:1.6;
}
.site-footer {
background:var(--ink-2);
border-top:1px solid var(--line);
padding:14px 16px 22px;
font-size:12px;
}
.footer-disclaimer {
color:var(--paper-dim);
line-height:1.7;
max-width:80ch;
padding-left:10px;
border-left:2px solid var(--line);
margin-bottom:10px;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:6px 14px;
padding:9px 0;
border-top:1px solid var(--line-soft);
border-bottom:1px solid var(--line-soft);
margin-bottom:9px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12.5px;
color:var(--mist);
letter-spacing:.1em;
text-decoration:none;
border-bottom:1px solid transparent;
transition:color .16s,border-color .16s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--cinnabar);
border-bottom-color:var(--cinnabar);
}
.footer-friends {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:5px 12px;
}
.friends-label {
font-size:12px;
color:var(--paper-dim);
letter-spacing:.16em;
padding-right:9px;
border-right:1px solid var(--line-soft);
}
a.runtime-friend-link {
font-size:12px;
color:var(--paper-dim);
text-decoration:none;
border-bottom:1px dotted var(--line);
transition:color .16s,border-color .16s;
}
a.runtime-friend-link:hover {
color:var(--mist);
border-bottom-color:var(--cinnabar);
}
@media (max-width:1080px){.overview-hero {grid-template-columns:minmax(0,1fr);min-height:0;gap:14px}
.hero-figure {min-height:200px}
.hero-heading {order:-1}
.overview-body {grid-template-columns:minmax(0,200px) minmax(0,1fr)}
.timeline-track {grid-template-columns:repeat(4,minmax(0,1fr))}
.timeline-node:nth-child(4n) {border-right:none}}
@media (max-width:860px){.overview-body {grid-template-columns:minmax(0,1fr)}
.poster-column {max-width:230px}
.overview-info {grid-template-columns:minmax(0,1fr)}
.episode-list {grid-template-columns:minmax(0,1fr)}
.comment-columns {grid-template-columns:minmax(0,1fr)}
.timeline-track {grid-template-columns:repeat(3,minmax(0,1fr))}
.timeline-node {border-right:1px dashed var(--line-soft)}
.timeline-node:nth-child(3n) {border-right:none}}
@media (max-width:640px){.site-header {padding:8px 12px}
.page-main {padding:0 12px 20px}
.hero-heading {order:-1}
.hero-figure {min-height:170px}
.movie-title {font-size:24px}
.timeline-track {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-node:nth-child(odd) {border-right:1px dashed var(--line-soft)}
.timeline-node:nth-child(even) {border-right:none}
.recommend-grid {grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.recommend-title {
float:none;
writing-mode:horizontal-tb;
text-orientation:mixed;
padding:0 0 6px 10px;
border:none;
border-left:4px solid var(--cinnabar);
margin:0 0 10px;
}
.poster-column {max-width:100%}
.player-controls {gap:5px}
.control-button {font-size:11.5px;padding:4px 8px}
.control-range {flex:1 1 100%}}
@media (max-width:420px){.timeline-track {grid-template-columns:minmax(0,1fr)}
.timeline-node {border-right:none;padding-left:26px}
.timeline-node .timeline-dot {left:8px}
.recommend-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1501px){.page-main {padding:0 26px 26px}}

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}