*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #0b0e14; color: #e8e4d8; font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; line-height: 1.45; min-height: 100vh; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
header { background: #10141d; border-bottom: 3px solid #c8442e; padding: 0.6rem 1rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.site-logo { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; color: #f0ece1; text-transform: uppercase; border-left: 4px solid #c8442e; padding-left: 0.5rem; transition: color 0.2s; }
.site-logo:hover { color: #ff7a5c; }
.categories-bar { display: flex; flex-wrap: wrap; gap: 0.25rem 0.15rem; justify-content: flex-end; }
.runtime-category { color: #9aa8bd; font-size: 0.95rem; padding: 0.18rem 0.75rem; white-space: nowrap; border: 1px solid #3a404e; border-radius: 2px; background: #191e28; transition: all 0.2s; }
.runtime-category:hover { color: #ffd9c9; background: #c8442e; border-color: #c8442e; }
.runtime-category:first-child { margin-left: 0; }
main { padding: 1.5rem 1rem 2rem; max-width: 1400px; margin: 0 auto; display: grid; gap: 2rem; }
.movie-overview-shell { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "poster content" "player content"; gap: 0 1.5rem; background: #12161e; border: 1px solid #3a404e; border-left: 4px solid #c8442e; padding: 1rem; }
.poster-media { grid-area: poster; }
.main-poster-img { width: 100%; height: auto; object-fit: contain; aspect-ratio: 2 / 3; background: #1f2633; border: 1px solid #3a404e; box-shadow: 0 0 0 2px #0b0e14, 0 4px 12px rgba(0, 0, 0, 0.5); }
.overview-content { grid-area: content; display: flex; flex-direction: column; gap: 1.2rem; }
.player-wrapper { grid-area: player; margin-top: 1rem; width: 100%; }
.player-wrapper video { background: #000; border: 1px solid #3a404e; }
.player-controls { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.5rem 0.3rem; background: #191e28; border-top: 1px solid #3a404e; }
.player-controls button { background: #2c3340; padding: 0.2rem 0.9rem; border-radius: 2px; font-size: 0.85rem; color: #d4d7de; }
.player-controls button:hover { background: #c8442e; color: #fff; }
.player-controls progress { flex: 1 1 120px; height: 6px; accent-color: #c8442e; }
.title-block { border-bottom: 2px solid #c8442e; padding-bottom: 0.5rem; }
.movie-title { font-family: "Georgia", serif; font-weight: 800; font-style: italic; font-size: 2.3rem; letter-spacing: -0.01em; text-transform: uppercase; color: #fff0e0; text-shadow: 2px 2px 0 #c8442e; }
.tagline { color: #ff9d82; font-size: 1.1rem; font-style: italic; letter-spacing: 0.04em; margin-top: 0.3rem; }
.synopsis-panel { display: grid; gap: 0.6rem; }
.synopsis-para { color: #c6c2b8; font-size: 0.98rem; line-height: 1.65; }
.synopsis-para::first-letter { font-weight: bold; color: #ff9d82; }
.cast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.actor-card { background: #161c27; padding: 0.8rem; border: 1px solid #3a404e; border-top: 3px solid #c8442e; text-align: left; }
.actor-avatar { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #2c3340, #1a1f2b); border: 1px solid #3a404e; clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%); margin-bottom: 0.6rem; }
.actor-name { font-size: 1rem; font-weight: 700; color: #f0d6c0; letter-spacing: 0.02em; margin-bottom: 0.2rem; }
.actor-desc { font-size: 0.85rem; color: #9aa8bd; line-height: 1.4; }
.episode-status-block { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: baseline; background: #1a1f2b; padding: 0.6rem 0.8rem; border-left: 4px solid #c8442e; }
.total-label { font-size: 1.5rem; font-weight: 800; color: #ff9d82; letter-spacing: 0.06em; }
.current-label { font-size: 1.2rem; color: #f0ece1; font-weight: 500; }
.details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem 0.8rem; background: #0f131b; padding: 0.8rem; border: 1px solid #3a404e; }
.detail-item { padding: 0.2rem 0; }
.detail-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #7e8a9e; }
.detail-value { font-size: 0.95rem; color: #e0dbd0; }
.timeline-section { padding: 0 0.5rem; }
.section-title { font-family: "Georgia", serif; font-weight: 800; font-style: italic; border-left: 5px solid #c8442e; padding-left: 0.7rem; margin-bottom: 0.8rem; font-size: 1.6rem; color: #ffefe0; display: inline-block; }
.timeline-track { display: flex; gap: 1.2rem; overflow-x: auto; padding: 1rem 0; scroll-snap-type: x mandatory; margin-bottom: 0.5rem; }
.timeline-node { flex: 0 0 220px; scroll-snap-align: start; position: relative; padding-left: 1.2rem; border-left: 3px solid #3a404e; }
.timeline-node::before { content: ""; position: absolute; left: -8px; top: 0; width: 13px; height: 13px; border-radius: 50%; background: #7e8a9e; border: 3px solid #c8442e; }
.timecode { font-family: "Courier New", monospace; font-size: 0.9rem; color: #ff9d82; background: #1a1f2b; padding: 0.15rem 0.4rem; display: inline-block; margin-bottom: 0.3rem; }
.timeline-label { display: block; font-size: 0.92rem; color: #d4d7de; line-height: 1.4; }
.episodes-section { padding: 0 0.5rem; }
.episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.episode-card { position: relative; background: #121720; padding: 1rem 1rem 1rem 3rem; border: 1px solid #3a404e; overflow: hidden; }
.episode-number { position: absolute; left: 0.2rem; top: 0.5rem; font-size: 3rem; font-weight: 800; color: rgba(200, 68, 46, 0.35); font-family: "Georgia", serif; z-index: 0; }
.episode-title { font-size: 1.25rem; font-weight: 700; color: #f0d6c0; margin-bottom: 0.3rem; z-index: 1; position: relative; }
.episode-summary { font-size: 0.9rem; line-height: 1.5; color: #aab3c5; z-index: 1; position: relative; }
.comments-section { padding: 0 0.5rem; }
.comments-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.comment-card { background: #121720; padding: 0.8rem 1rem; border: 1px solid #3a404e; position: relative; margin-left: 0.6rem; }
.comment-card::before { content: ""; position: absolute; left: -10px; top: 12px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 10px solid #c8442e; }
.comment-author { font-weight: 700; color: #ff9d82; font-size: 0.95rem; margin-bottom: 0.4rem; border-bottom: 1px dashed #3a404e; padding-bottom: 0.3rem; }
.comment-text { font-size: 0.92rem; line-height: 1.55; color: #c6c2b8; }
.recommendation-row { padding: 0 0.5rem; }
.recommendation-row .section-title { margin-bottom: 0.8rem; }
.recommendation-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
a[data-runtime="recommendation"] { display: flex; flex-direction: column; gap: 0.35rem; background: #0f131b; border: 1px solid #3a404e; padding: 0.6rem; transition: border-color 0.2s, background 0.2s; }
a[data-runtime="recommendation"]:hover { border-color: #c8442e; background: #161c27; }
a[data-runtime="recommendation"] img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #2c3340; }
a[data-runtime="recommendation"] span[data-runtime="name"] { font-weight: 700; color: #f0e0d0; font-size: 0.95rem; }
a[data-runtime="recommendation"] span[data-runtime="blurb"] { font-size: 0.82rem; color: #8f9ab0; }
footer { background: #0d1117; border-top: 3px solid #c8442e; padding: 1.2rem 1rem; display: grid; gap: 0.8rem; margin-top: 1rem; }
.footer-contract { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; font-size: 0.85rem; color: #8f9ab0; }
.footer-contract span[data-contract="disclaimer"] { flex: 1 1 100%; }
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] { color: #ff9d82; text-decoration: underline; text-decoration-color: #c8442e; padding: 0.2rem 0; }
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover { color: #fff; }
.friend-links { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.friend-label { font-size: 0.9rem; font-weight: 700; color: #7e8a9e; text-transform: uppercase; letter-spacing: 0.08em; }
.runtime-friend-link { color: #9aa8bd; font-size: 0.88rem; border-bottom: 1px dotted #3a404e; padding: 0.1rem 0; }
.runtime-friend-link:hover { color: #ff9d82; border-bottom-color: #c8442e; }
video.light-off { filter: brightness(0.3); }
.player.theater-mode { position: fixed; top: 0; left: 0; right: 0; height: 100vh; width: 100vw; object-fit: contain; background: #000; z-index: 1000; }
.player.theater-mode + .player-controls { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001; background: rgba(13, 17, 23, 0.9); }
.player.fullscreen { width: 100vw; height: 100vh; object-fit: contain; }
@media (max-width: 900px) {.movie-overview-shell { grid-template-columns: 1fr; grid-template-areas: "poster" "content" "player"; gap: 1rem; }
.poster-media { max-width: 300px; }
.cast-grid { grid-template-columns: repeat(2, 1fr); }
.details-grid { grid-template-columns: repeat(2, 1fr); }
.recommendation-list { grid-template-columns: repeat(2, 1fr); }
.episode-grid { grid-template-columns: 1fr; }
.comments-grid { grid-template-columns: 1fr; }}
@media (max-width: 600px) {body { font-size: 0.95rem; }
main { padding: 0.5rem; }
header { flex-direction: column; gap: 0.5rem; }
.categories-bar { justify-content: flex-start; }
.movie-overview-shell { padding: 0.6rem; }
.movie-title { font-size: 1.5rem; }
.cast-grid { grid-template-columns: 1fr; }
.details-grid { grid-template-columns: 1fr; }
.recommendation-list { grid-template-columns: 1fr; }
.timeline-node { flex-basis: 160px; }
.player-controls { gap: 0.2rem; }
.player-controls button { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
.episode-card { padding-left: 2.2rem; }
.episode-number { font-size: 2.2rem; }
.section-title { font-size: 1.3rem; }
.footer-contract { flex-direction: column; }}
.movie-overview-shell, .timeline-section, .episodes-section, .comments-section, .recommendation-row { margin-bottom: 0.2rem; }
.synopsis-panel, .details-grid, .episode-status-block { margin-top: 0.4rem; }
.player-wrapper video { max-height: 70vh; object-fit: contain; background: #000; }
.cast-grid > *, .episode-grid > *, .comments-grid > *, .recommendation-list > * { align-self: start; }
.movie-overview-shell > * { min-width: 0; }
.overview-content { min-width: 0; }
a[data-contract="site-name"] { color: #f0ece1; }
a[data-contract="site-name"]:hover { color: #ff7a5c; }
a.runtime-category { color: #9aa8bd; text-decoration: none; }
a.runtime-category:hover { color: #fff; text-decoration: none; }
a[data-runtime="recommendation"] { color: #f0ece1; text-decoration: none; }
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] { text-decoration: underline; text-decoration-color: #c8442e; }
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover { text-decoration-color: #fff; }
a.runtime-friend-link { color: #9aa8bd; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #3a404e; }
a.runtime-friend-link:hover { color: #ff9d82; text-decoration-color: #c8442e; }

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}