* {margin:0;padding:0;box-sizing:border-box}
:root {
  --cream:#f3ecdc;
  --cream-2:#e9e0cb;
  --ink:#1f2a24;
  --ink-soft:#3a4a40;
  --green:#22402f;
  --green-2:#2f5540;
  --green-deep:#16281d;
  --orange:#d1552a;
  --orange-2:#e4713f;
  --yellow:#e3e04a;
  --paper:#f7f1e2;
  --line:rgba(31,42,36,.22);
  --shadow:0 2px 0 rgba(31,42,36,.18),0 6px 14px rgba(31,42,36,.14);
  --hand:"Bradley Hand","Segoe Print","Xingkai SC","STXingkai","Kaiti SC",cursive;
  --narrow:"Arial Narrow","Helvetica Neue Condensed",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html, body {background:var(--green-deep)}
body {
  font-family:var(--narrow);
  font-size:13px;
  line-height:1.45;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,rgba(227,224,74,.06),transparent 40%),
    radial-gradient(circle at 88% 92%,rgba(209,85,42,.08),transparent 45%),
    var(--green-deep);
  -webkit-font-smoothing:antialiased;
}
img {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit}
button, input {font:inherit;color:inherit}
.site-header {
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(180deg,var(--green),var(--green-deep));
  border-bottom:2px solid var(--yellow);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.header-inner {
  max-width:1180px;
  margin:0 auto;
  padding:7px 14px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.brand {
  font-family:var(--hand);
  font-size:20px;
  letter-spacing:.5px;
  color:var(--cream);
  text-decoration:none;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
  transform:rotate(-1deg);
  padding:1px 4px 3px;
  border-bottom:2px solid var(--orange);
}
.brand:hover {color:var(--yellow);border-bottom-color:var(--yellow)}
.category-nav {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-left:auto;
}
.runtime-category {
  display:inline-block;
  white-space:nowrap;
  font-size:12px;
  padding:3px 10px;
  border:1.5px solid rgba(243,236,220,.5);
  border-radius:2px 10px 2px 10px;
  color:var(--cream);
  text-decoration:none;
  background:rgba(0,0,0,.14);
  transition:.15s;
}
.runtime-category:hover {
  background:var(--yellow);
  color:var(--green-deep);
  border-color:var(--yellow);
  transform:rotate(-1.5deg);
}
.page-main {
  max-width:1180px;
  margin:0 auto;
  padding:12px 14px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.movie-overview {
  background:
    repeating-linear-gradient(180deg,rgba(31,42,36,.035) 0 1px,transparent 1px 26px),
    var(--cream);
  border:1px solid rgba(31,42,36,.28);
  border-radius:4px 14px 4px 14px;
  box-shadow:var(--shadow);
  padding:12px;
  position:relative;
  overflow:hidden;
}
.overview-head {
  display:grid;
  grid-template-columns:minmax(0,172px) minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.poster-column {min-width:0}
.poster-wrap {
  position:relative;
  margin:0;
  border:1px solid rgba(31,42,36,.35);
  background:var(--paper);
  padding:5px;
  transform:rotate(-1.2deg);
  box-shadow:var(--shadow);
  border-radius:2px;
}
.poster-wrap img {
  width:100%;
  height:auto;
  display:block;
  filter:saturate(.94) contrast(1.02);
}
.poster-stamp {
  position:absolute;
  left:-6px;
  bottom:10px;
  font-family:var(--hand);
  font-size:12px;
  color:var(--orange);
  background:var(--paper);
  padding:1px 7px;
  transform:rotate(-4deg);
  border:1px dashed var(--orange);
  border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.overview-info {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.movie-title {
  font-family:var(--hand);
  font-size:26px;
  line-height:1.15;
  color:var(--green);
  letter-spacing:.5px;
  transform:rotate(-.6deg);
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:4px;
  text-underline-offset:3px;
}
.movie-tagline {
  font-family:var(--hand);
  font-size:15px;
  color:var(--orange);
  border-left:3px solid var(--orange);
  padding-left:8px;
  transform:rotate(-.4deg);
}
.movie-seo {
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.55;
  background:rgba(227,224,74,.16);
  border:1px dashed rgba(31,42,36,.25);
  padding:7px 9px;
  border-radius:3px;
}
.player-shell {
  position:relative;
  background:#0d1611;
  border:1px solid rgba(31,42,36,.45);
  border-radius:3px 10px 3px 10px;
  padding:6px;
  box-shadow:inset 0 0 0 1px rgba(243,236,220,.12);
}
.player-shell video {
  display:block;
  background:#000;
  border-radius:2px;
}
.player-controls {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
  margin-top:6px;
}
.ctrl {
  font-size:11.5px;
  padding:3px 8px;
  border:1px solid rgba(243,236,220,.35);
  background:rgba(243,236,220,.1);
  color:var(--cream);
  border-radius:2px 8px 2px 8px;
  cursor:pointer;
  white-space:nowrap;
  transition:.14s;
}
.ctrl:hover {background:var(--yellow);color:var(--green-deep);border-color:var(--yellow)}
.ctrl-play, .ctrl-mute, .ctrl-speed, .ctrl-pip, .ctrl-fullscreen, .ctrl-theater, .ctrl-light {
  font-family:var(--hand);
  font-size:13px;
}
.ctrl-progress {flex:1 1 150px;min-width:110px;accent-color:var(--orange);height:16px;background:transparent}
.ctrl-volume {flex:0 1 90px;min-width:70px;accent-color:var(--yellow);height:16px;background:transparent}
.ctrl.is-active, .ctrl.is-playing {background:var(--yellow);color:var(--green-deep);border-color:var(--yellow)}
.ctrl.is-muted {background:var(--orange);color:var(--paper);border-color:var(--orange)}
.player-shell.is-lights-off {background:#050806}
.player-shell.is-theater {
  background:#0d1611;
  box-shadow:0 0 0 2px var(--yellow),0 10px 30px rgba(0,0,0,.5);
}
.episode-status {
  border-top:1px dashed var(--line);
  padding-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.status-line {
  font-family:var(--hand);
  font-size:15px;
  color:var(--green);
}
.status-chips {display:flex;flex-wrap:wrap;gap:5px}
.chip {
  font-size:11.5px;
  padding:2px 8px;
  background:var(--paper);
  border:1px solid rgba(31,42,36,.3);
  border-radius:10px 2px 10px 2px;
  color:var(--ink-soft);
}
.chip:nth-child(3) {background:var(--yellow);border-color:var(--orange);color:var(--green-deep)}
.block-title {
  font-family:var(--hand);
  font-size:18px;
  color:var(--green);
  letter-spacing:.5px;
  display:inline-block;
  padding:0 6px 2px 0;
  border-bottom:3px solid var(--orange);
  transform:rotate(-.5deg);
  margin-bottom:8px;
}
.cast-block {min-width:0}
.cast-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:7px;
  align-items:start;
}
.cast-card {
  background:var(--paper);
  border:1px solid rgba(31,42,36,.28);
  border-left:4px solid var(--green-2);
  border-radius:2px 8px 2px 8px;
  padding:6px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  box-shadow:0 1px 0 rgba(31,42,36,.14);
  transform:rotate(-.4deg);
}
.cast-card:nth-child(2n) {transform:rotate(.5deg);border-left-color:var(--orange)}
.cast-card:nth-child(3n) {border-left-color:var(--yellow)}
.cast-name {
  font-family:var(--hand);
  font-size:15px;
  color:var(--green);
}
.cast-role {font-size:11.5px;color:var(--orange);letter-spacing:.3px}
.cast-monologue {
  font-size:11.5px;
  color:var(--ink-soft);
  line-height:1.4;
  border-top:1px dotted var(--line);
  padding-top:3px;
  margin-top:1px;
}
.synopsis-block {min-width:0}
.synopsis-body {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 14px;
}
.synopsis-para {
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-soft);
  text-align:justify;
}
.synopsis-para:nth-child(1) {border-left:3px solid var(--yellow);padding-left:7px}
.synopsis-para:nth-child(2) {border-left:3px solid var(--orange);padding-left:7px}
.details-block {min-width:0}
.details-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.detail-row {
  display:flex;
  gap:6px;
  align-items:baseline;
  padding:4px 8px 4px 0;
  border-bottom:1px dotted var(--line);
  min-width:0;
}
.detail-key {
  font-size:11.5px;
  color:var(--orange);
  flex:0 0 auto;
  font-weight:700;
}
.detail-key::after {content:"："}
.detail-value {
  font-size:12px;
  color:var(--ink);
  min-width:0;
  word-break:break-word;
}
.timeline-section {
  background:var(--green);
  border:1px solid rgba(243,236,220,.18);
  border-radius:4px 14px 4px 14px;
  padding:11px 12px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.timeline-section .block-title {color:var(--cream);border-bottom-color:var(--yellow)}
.timeline-track {
  display:flex;
  gap:9px;
  overflow-x:auto;
  padding:10px 2px 12px;
  position:relative;
  scrollbar-width:thin;
  scrollbar-color:var(--yellow) rgba(0,0,0,.25);
}
.timeline-track::before {
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:2px;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 8px,transparent 8px 14px);
  z-index:0;
}
.timeline-track::-webkit-scrollbar {height:8px}
.timeline-track::-webkit-scrollbar-track {background:rgba(0,0,0,.25);border-radius:4px}
.timeline-track::-webkit-scrollbar-thumb {background:var(--yellow);border-radius:4px}
.timeline-ticket {
  position:relative;
  z-index:1;
  flex:0 0 176px;
  background:var(--paper);
  border:1px solid rgba(31,42,36,.4);
  border-radius:3px;
  padding:8px 9px 8px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transform:rotate(-1deg);
}
.timeline-ticket:nth-child(2n) {transform:rotate(1.2deg)}
.timeline-ticket:nth-child(3n) {transform:rotate(-.4deg)}
.timeline-ticket::before {
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  background:
    radial-gradient(circle at 0 50%,var(--green) 3px,transparent 3.5px) 0 0/6px 12px repeat-y;
}
.timeline-ticket::after {
  content:"";
  position:absolute;
  right:-1px;top:0;bottom:0;
  width:1px;
  border-left:1px dashed rgba(31,42,36,.35);
}
.ticket-time {
  font-family:var(--hand);
  font-size:15px;
  color:var(--orange);
  letter-spacing:.5px;
}
.ticket-label {
  font-size:11.5px;
  color:var(--ink-soft);
  line-height:1.4;
}
.episodes-section {min-width:0}
.episode-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  align-items:start;
}
.episode-card {
  background:
    repeating-linear-gradient(180deg,rgba(31,42,36,.045) 0 1px,transparent 1px 22px),
    var(--paper);
  border:1px solid rgba(31,42,36,.3);
  border-radius:2px 8px 2px 8px;
  padding:7px 9px;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  box-shadow:0 1px 0 rgba(31,42,36,.12);
}
.episode-card::after {
  content:"✓";
  position:absolute;
  top:5px;right:7px;
  font-family:var(--hand);
  font-size:16px;
  color:rgba(209,85,42,.35);
  transform:rotate(-8deg);
}
.episode-head {
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(31,42,36,.2);
  padding-bottom:3px;
}
.episode-number {
  font-size:11px;
  font-weight:700;
  color:var(--paper);
  background:var(--green-2);
  padding:1px 6px;
  border-radius:2px 8px 2px 8px;
  white-space:nowrap;
}
.episode-title {
  font-family:var(--hand);
  font-size:14px;
  color:var(--green);
  font-weight:400;
  flex:1 1 auto;
  min-width:0;
}
.episode-summary {
  font-size:11.5px;
  color:var(--ink-soft);
  line-height:1.4;
}
.episode-duration {
  font-size:10.5px;
  color:var(--orange);
  letter-spacing:.4px;
  align-self:flex-start;
  border-top:1px dotted var(--line);
  padding-top:2px;
  width:100%;
}
.episode-card.is-current {
  border-color:var(--orange);
  box-shadow:0 0 0 2px rgba(209,85,42,.35);
  background:
    repeating-linear-gradient(180deg,rgba(227,224,74,.14) 0 1px,transparent 1px 22px),
    var(--paper);
}
.episode-card.is-current .episode-number {background:var(--orange)}
.episode-card.is-current::after {content:"★ 正在看";font-size:12px;color:var(--orange);transform:rotate(-4deg)}
.comments-section {
  background:var(--cream-2);
  border:1px solid rgba(31,42,36,.3);
  border-radius:4px 14px 4px 14px;
  padding:11px 12px;
  box-shadow:var(--shadow);
}
.comment-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  align-items:start;
}
.comment-note {
  background:var(--yellow);
  border:1px solid rgba(31,42,36,.28);
  border-radius:2px;
  padding:8px 9px 9px;
  box-shadow:2px 3px 6px rgba(31,42,36,.22);
  transform:rotate(-1.3deg);
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
}
.comment-note::before {
  content:"";
  position:absolute;
  top:-6px;left:50%;
  width:34px;height:11px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(243,236,220,.6);
  border:1px solid rgba(31,42,36,.14);
}
.comment-note:nth-child(2n) {background:#f0e6c8;transform:rotate(1.1deg)}
.comment-note:nth-child(3n) {background:#f6d9c8;transform:rotate(-.6deg)}
.comment-nickname {
  font-family:var(--hand);
  font-size:14px;
  color:var(--green);
}
.comment-text {
  font-size:11.5px;
  line-height:1.45;
  color:var(--ink-soft);
  border-top:1px dashed rgba(31,42,36,.3);
  padding-top:3px;
}
.recommend-region {min-width:0}
.recommend-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.recommend-card {
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--paper);
  border:1px solid rgba(31,42,36,.32);
  border-radius:2px 10px 2px 10px;
  padding:6px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 1px 0 rgba(31,42,36,.14);
  transition:.16s;
  min-width:0;
}
.recommend-card:hover {
  border-color:var(--orange);
  box-shadow:0 4px 12px rgba(31,42,36,.24);
  transform:translateY(-2px) rotate(-.6deg);
}
.recommend-pic {
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:2px;
  background:#d9cfb6;
  filter:saturate(.95);
}
.recommend-name {
  font-family:var(--hand);
  font-size:14px;
  color:var(--green);
  line-height:1.2;
}
.recommend-blurb {
  font-size:11px;
  line-height:1.4;
  color:var(--ink-soft);
  border-top:1px dotted var(--line);
  padding-top:3px;
}
.site-footer {
  background:linear-gradient(180deg,var(--green),var(--green-deep));
  border-top:2px solid var(--yellow);
  color:var(--cream);
}
.footer-inner {
  max-width:1180px;
  margin:0 auto;
  padding:12px 14px 18px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:10px 18px;
  align-items:start;
}
.footer-disclaimer {
  font-size:11px;
  line-height:1.5;
  color:rgba(243,236,220,.75);
  grid-column:1 / -1;
  border-bottom:1px dashed rgba(243,236,220,.25);
  padding-bottom:8px;
}
.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.footer-link {
  font-family:var(--hand);
  font-size:14px;
  color:var(--yellow);
  text-decoration:none;
  border-bottom:1px dotted transparent;
  padding-bottom:1px;
}
.footer-link:hover {color:var(--orange-2);border-bottom-color:var(--orange-2)}
.friend-links {
  display:flex;
  flex-wrap:wrap;
  gap:5px 8px;
  align-items:center;
  justify-content:flex-start;
}
.friend-links-label {
  font-size:11px;
  color:rgba(243,236,220,.6);
  border-right:1px solid rgba(243,236,220,.3);
  padding-right:8px;
  white-space:nowrap;
}
.runtime-friend-link {
  font-size:11px;
  color:rgba(243,236,220,.85);
  text-decoration:none;
  border-bottom:1px solid rgba(243,236,220,.25);
  white-space:nowrap;
}
.runtime-friend-link:hover {color:var(--yellow);border-bottom-color:var(--yellow)}
@media (max-width:900px){.comment-board {grid-template-columns:repeat(2,minmax(0,1fr))}
.cast-list {grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-list {grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
.synopsis-body {grid-template-columns:1fr}
.details-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.overview-head {grid-template-columns:1fr}
.poster-column {max-width:210px}
.movie-title {font-size:23px}
.episode-grid {grid-template-columns:1fr}
.comment-board {grid-template-columns:1fr}
.cast-list {grid-template-columns:1fr}
.recommend-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-inner {grid-template-columns:1fr}}
@media (max-width:440px){.page-main {padding:10px 10px 16px}
.details-grid {grid-template-columns:1fr}
.recommend-list {grid-template-columns:1fr}
.ctrl {font-size:11px;padding:3px 6px}
.ctrl-progress {flex-basis:100%}}

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}