@font-face{font-family:Golos;src:url(/fonts/golos-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Golos;src:url(/fonts/golos-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Golos;src:url(/fonts/golos-bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
 --body:#FFF;--bg:#F8F8F8;--nav:#FFF;--box:#FFF;--ink:#000;--g32:#323232;--g64:#646464;--g96:#969696;
 --green:#79C142;--green2:#66AA33;--line:#EEE;
 --plus:#70BF6C;--plus-o:#70BF6C30;--plus2:#33A42D;--minus:#E7825F;--minus-o:#E7825F30;--minus2:#DD4D1B;
 --p16:#161616;--p24:#242424;--p32:#323232;--p64:#646464;--active-ink:#FFF;
 --grad:linear-gradient(135deg,#8DD556 0%,#65AD2E 100%)
}
html.dark{
 --body:#111;--bg:#242424;--nav:#242424;--box:#161616;--ink:#FFF;--g32:#ccc;--g64:#bbb;--line:#000;--active-ink:#161616
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Golos,Arial,sans-serif}
html{scroll-behavior:smooth}
body{display:flex;flex-direction:column;align-items:center;background:var(--body) url(/fonts/bg.png);color:var(--ink);font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;transition:.2s}
button{font-family:inherit}
#box{width:100%;max-width:1100px;min-height:100vh;display:flex;flex-direction:column;border-radius:5px}

nav{margin-top:80px;position:sticky;top:0;z-index:100;width:100%;height:80px;display:flex;justify-content:space-between;align-items:center;background:var(--nav);border-bottom:1px solid var(--line);border-radius:5px 5px 0 0}
#logo{display:flex;align-items:center;gap:16px;padding:0 20px;user-select:none}
#logo svg{width:37px;height:32px;flex:0 0 auto}
#logo .logo-dot{fill:var(--nav)}
.logo-text{display:flex;flex-direction:column;justify-content:center;gap:2px}
.logo-text b{font-size:24px;line-height:1;font-weight:700;text-transform:uppercase;color:var(--ink);transition:.2s}
.logo-text i{font-style:normal;font-size:10px;line-height:1;font-weight:700;text-transform:uppercase;color:var(--g64)}
#logo:hover .logo-text b{color:var(--green2)}
.menu{height:100%;display:flex;align-items:center;list-style:none;margin-left:auto}
.menu li{height:100%;display:flex}
.menu a{height:80px;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--line);color:var(--g32);transition:.2s}
.menu a:hover{color:var(--green2);border-bottom-color:var(--green2)}
.menu a span{font-size:15px}
#theme{width:40px;height:40px;margin:20px 20px 20px 120px;display:flex;justify-content:center;align-items:center;border:0;border-radius:5px;background:var(--grad);color:#fff;cursor:pointer}
#theme .i-sun{display:none}
html.dark #theme .i-sun{display:block}
html.dark #theme .i-moon{display:none}
#menu{display:none;width:80px;border:0;background:var(--nav);color:var(--g32);cursor:pointer;justify-content:center;align-items:center}

main{width:100%;display:flex;flex-direction:column;background:var(--bg);padding-bottom:20px}
h1{font-size:24px;font-weight:700;line-height:1.3;color:var(--ink)}
h2{font-size:18px;font-weight:700;color:var(--g32)}

#MovieCard{width:100%;display:flex;gap:20px;padding:20px 20px 0}
.col-img{flex:0 0 240px;display:flex;flex-direction:column;border-radius:5px;overflow:hidden;align-self:flex-start}
.poster{width:240px;height:380px;object-fit:cover;user-select:none}
.rate{width:240px;display:flex;border-bottom:1px solid var(--line);background:var(--box);user-select:none}
.rate button{width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:.2s;color:#fff}
.rate .plus{background:var(--plus)}.rate .plus:hover{background:var(--plus2)}
.rate .minus{background:var(--minus)}.rate .minus:hover{background:var(--minus2)}
.rate button svg{fill:#fff;stroke:currentColor}
.rate .plus svg{stroke:var(--plus)}.rate .minus svg{stroke:var(--minus)}
.rate button.on{filter:brightness(.85)}
.n-plus,.n-minus{flex-grow:1;display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--g32)}
.n-plus{padding-left:10px;background:linear-gradient(90deg,var(--plus-o),var(--box))}
.n-minus{justify-content:flex-end;padding-right:10px;background:linear-gradient(90deg,var(--box),var(--minus-o))}
.val-box{width:0;position:relative}
.val{position:absolute;bottom:13px;left:-28px;width:56px;height:56px;display:flex;justify-content:center;align-items:center;outline:5px solid var(--box);border:5px solid transparent;border-radius:30px;background:linear-gradient(var(--box),var(--box)) padding-box,linear-gradient(90deg,var(--plus),var(--minus)) border-box;font-size:15px;font-weight:700;color:var(--g32)}

.col-desc{flex-grow:1;display:flex;flex-direction:column;gap:20px;width:1000px;max-width:100%;overflow-x:hidden}
.short,.short p{font-size:15px;color:var(--g64);line-height:1.5}
.short p+p{margin-top:8px}
.props{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.props .row{line-height:1.5;font-size:15px;color:var(--g64)}
.props .row span{font-weight:500;color:var(--g32)}
.props .full{grid-column:span 2}
.crumbs{font-size:13px;color:var(--g96)}
.crumbs a{color:var(--g32);font-weight:500}
.crumbs a:hover{color:var(--green2)}

.all-parts{display:flex;flex-direction:column;gap:20px;padding-top:20px}
.slider{max-width:800px;position:relative}
.slides{display:flex;gap:10px;overflow:hidden;scroll-behavior:smooth}
.slide{flex:0 0 calc(20% - 8px);display:flex;flex-direction:column;gap:10px;transition:.2s}
.slide:hover{opacity:.8}
.slide img{width:100%;aspect-ratio:2/3;border-radius:5px;object-fit:cover}
.slide span{font-size:15px;font-weight:500;line-height:1.5;color:var(--g32)}
.sl-prev,.sl-next{position:absolute;top:50%;width:48px;height:48px;transform:translateY(-100%);display:flex;justify-content:center;align-items:center;border:0;opacity:.9;background:var(--grad);color:#fff;cursor:pointer;z-index:2;transition:.2s}
.sl-prev:hover,.sl-next:hover{opacity:1}
.sl-prev{left:0;border-radius:0 5px 5px 0}.sl-next{right:0;border-radius:5px 0 0 5px}
.sl-prev:before,.sl-next:before{content:"";width:10px;height:10px;border:solid #fff;border-width:0 2px 2px 0}
.sl-prev:before{transform:rotate(135deg);margin-left:4px}.sl-next:before{transform:rotate(-45deg);margin-right:4px}
.sl-off{opacity:0!important;visibility:hidden}

#Player{display:flex;flex-direction:column;padding-top:40px}
#Player>h2{padding:0 20px 20px}
.player{width:100%;display:flex;user-select:none}
.pl-main{width:65%;flex-grow:1;display:flex;flex-direction:column}
.pl-tabs{width:100%;height:40px;display:flex;border-top:1px solid var(--line);background:var(--box)}
.pl-tab{display:flex;align-items:center;padding:0 20px;border:0;font-size:15px;font-weight:500;color:#FFF;background:var(--p16);cursor:pointer;transition:.2s}
.pl-tab:hover{background:var(--p32)}
.pl-tab.on{background:var(--grad);color:var(--active-ink);cursor:default}
.pl-box{position:relative;width:100%;height:360px;background:var(--p16)}
.pl-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pl-side{width:35%;display:flex;flex-direction:column}
.pl-side-h{height:40px;display:flex;align-items:center;padding:0 20px;font-size:15px;font-weight:500;border-top:1px solid var(--line);color:var(--g32);background:var(--box)}
.pl-seas{width:100%;height:360px;overflow-x:hidden;overflow-y:auto;list-style:none;padding:20px;display:flex;flex-direction:column;gap:20px;background:var(--p16)}
.pl-seas::-webkit-scrollbar{width:12px}
.pl-seas::-webkit-scrollbar-track{background:var(--p24)}
.pl-seas::-webkit-scrollbar-thumb{background:var(--p64);border-radius:20px;border:3px solid var(--p24)}
.sea{display:flex;flex-direction:column;gap:10px}
.sea-t{font-size:15px;font-weight:700;color:#969696}
.eps{display:flex;flex-wrap:wrap;gap:10px}
.eps a{flex:1 0 calc(33.33% - 10px);display:flex;align-items:center;justify-content:center;padding:11px 10px;border-radius:5px;font-size:15px;font-weight:500;color:#FFF;background:var(--p24);white-space:nowrap}
.eps a:hover{background:var(--p32)}
.eps a.on{background:var(--grad);color:var(--p16)}

#CommentsWrap{display:flex;padding-top:40px}
#CommentsBlock{width:65%;display:flex;flex-direction:column;gap:20px}
#CommentsBlock>h2{padding:0 20px}
#Comments{display:flex;flex-direction:column;gap:20px;padding:0 20px}
.no-comments{font-size:15px;color:var(--g96)}
.comment{display:flex;align-items:flex-start;gap:10px}
.comment .ava{display:flex;justify-content:center;align-items:center;border-radius:5px;background:var(--grad);color:var(--box);padding:10px}
.comment .content{width:100%;display:flex;flex-direction:column;gap:10px;padding:0 20px 10px;border-radius:5px;border:1px solid var(--line);background:var(--box)}
.comment .head{height:40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.comment .name{font-size:15px;font-weight:500;color:var(--g32);word-break:break-all}
.comment .date{font-size:13px;color:var(--g96)}
.comment .text{font-size:15px;color:var(--g64);line-height:1.5;word-break:break-word}
.comment .wait{font-size:13px;color:#FF7F50}
#AddComments{width:35%;padding:0 20px}
.add-box{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.note{font-size:15px;font-weight:500;color:#33A42D}
#AddCommentsForm{display:flex;flex-direction:column;gap:20px}
#AddCommentsForm .row{display:flex;flex-direction:column;gap:10px}
#AddCommentsForm label{font-size:13px;font-weight:500;color:var(--g64)}
#AddCommentsForm input,#AddCommentsForm textarea{width:100%;padding:0 20px;border:1px solid var(--line);outline:none;border-radius:5px;font-size:15px;color:var(--g32);background:var(--box);transition:.2s}
#AddCommentsForm input{height:40px}
#AddCommentsForm textarea{height:80px;padding:10px 20px;resize:vertical}
#AddCommentsForm input:focus,#AddCommentsForm textarea:focus{border-color:var(--green)}
.btn-submit{width:100%;height:40px;border:0;border-radius:5px;font-size:15px;font-weight:500;color:#fff;background:var(--grad);cursor:pointer}
.btn-submit:hover{opacity:.9}

.text-block{padding:40px 20px 0}
.text-block h2{padding-bottom:20px}
.text-block p{font-size:15px;color:var(--g64);line-height:1.5}
.text-block p+p{margin-top:12px}
.orig{color:var(--g64)}
.wrap-pad{padding:20px 20px 0}
h1.wrap-pad{padding-top:10px}
.pager{display:flex;justify-content:space-between;gap:10px;padding:20px 20px 0;font-weight:500;color:var(--g32)}
.pager a:hover{color:var(--green2)}
footer{border-top:1px solid var(--line);padding:20px;font-size:13px;color:var(--g64);line-height:1.5;background:var(--bg);border-radius:0 0 5px 5px}

@media (max-width:950px){
 .slide{flex-basis:calc(25% - 8px)}
 #theme{margin-left:20px}
}
@media (max-width:900px){
 .props{grid-template-columns:1fr}.props .full{grid-column:span 1}
 .player{flex-direction:column}.pl-main,.pl-side{width:100%}
 .pl-seas{height:260px}
 #CommentsWrap{flex-direction:column-reverse;gap:30px}
 #CommentsBlock,#AddComments{width:100%}
 .comment .ava{display:none}
}
@media (max-width:800px){
 #menu{display:flex;height:79px;align-self:flex-start}
 .menu{position:absolute;top:80px;right:0;width:250px;height:auto;flex-direction:column;background:var(--nav);border:1px solid var(--line);border-width:1px 0 0 1px;opacity:0;visibility:hidden;transition:.2s}
 .menu.open{opacity:1;visibility:visible}
 .menu li{width:100%;height:auto}
 .menu a{width:100%;height:auto;gap:20px;padding:20px}
 #theme{margin:20px 0 20px auto}
}
@media (max-width:700px){
 #MovieCard{flex-direction:column;align-items:center}
 .col-img{flex:0 0 auto;align-self:center}
 .slide{flex-basis:calc(33.33% - 7px)}
}
@media (max-width:500px){
 nav{margin-top:0;border-radius:0}
 .logo-text b{font-size:20px}
}