@font-face{font-family:"OpenSans-Light";src:url(OpenSans-Light.ttf) format("truetype");font-display:swap;}
:root{--maincolor:#c62222;--lightcolor:#a7a9b0;--darkcolor:#020619;}
::selection{background:var(--lightcolor);color:var(--darkcolor);}
::-webkit-scrollbar{width:15px;}
::-webkit-scrollbar-thumb{background-color:var(--maincolor);}
::-webkit-scrollbar-track-piece{background:var(--darkcolor);}
*{margin:0;}
body{font-family:'OpenSans-Light';width:100%;height:auto;background-color:var(--darkcolor);}
header{width:100%;background:var(--darkcolor);}
h1{color:var(--lightcolor);margin:30px 20px;font-size:26px;}
h2{color:var(--lightcolor);margin:20px 10px;font-size:24px;}
h3{color:var(--lightcolor);margin:10px 20px;font-size:20px;}
hr{border:1px dashed var(--maincolor);margin:20px 20px 0 20px;}

.shapka{text-align:center;}
.shapka img{width:40%;height:auto;margin-bottom:-5px;}

.sezon-flex{display:flex;margin:20px;gap:20px;}
.sez-poster{width:20%;}
.sez-poster>img{width:100%;height:auto;}
.sez-info{width:80%;display:flex;flex-direction:column;}
.sez-info>h1{margin:0;}
.sez-info>p{color:var(--lightcolor);padding:10px 0;font-size:18px;}
#data{font-size:14px;color:#414245;font-weight:bold;margin-top:-5px;}
#rate{background-color:var(--maincolor);;border-radius:3px;padding:7px 21px;margin-left:10px;font-weight:bold;}
#roli{color:var(--maincolor);font-weight:bold;}
.sez-navigation{margin-top:auto;position:relative;}
.sez-navigation-button{display:flex;gap:20px;margin:10px 0 5px 0;flex-wrap:wrap;font-size:17px;font-weight:bold;}
.sez-navigation-button>a{color:var(--lightcolor);text-decoration:none;}
.sez-back{background:#66ccff1f;padding:10px 15px;border-radius:3px;}
.sez-next{background:#66ccff1f;padding:10px 15px;border-radius:3px;}
.sez-back:hover{box-shadow:0 6px 18px rgba(102, 204, 255, 0.12);}
.sez-next:hover{box-shadow:0 6px 18px rgba(102, 204, 255, 0.12);}
	
.content{max-width:1240px;margin-left:auto;margin-right:auto;}
.kroshki{background:#66ccff1f;color:var(--lightcolor);padding:10px 20px;border-radius:4px;margin:0 20px;}
.kroshki>span>a{text-decoration:none;color:var(--lightcolor);}
.kroshki>span>a:hover{text-decoration:underline;}
.seasons{display:flex;flex-wrap:wrap;gap:20px;margin-left:20px;margin-bottom:20px;}
.season{position:relative;width:calc(25% - 20px);}
.season img{width:100%;height:auto;}
.play h5{color:var(--lightcolor);font-size:16px;}
.play{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align:center;background:#1a1a1a9c;padding:20px 0;}
.play::before{content:'▶';font-size:50px;color:var(--maincolor);}
.series{display:flex;flex-wrap:wrap;gap:20px;margin-left:20px;}
.seria{width:calc(33.3% - 20px);display:flex;flex-direction:column;overflow:hidden;}
.seria>a{text-decoration:none;position:relative;}
.seria h5{color:var(--lightcolor);font-size:16px;position:absolute;bottom:0;margin:10px;background:linear-gradient(45deg, black, transparent);padding:5px 10px;border-radius:3px;}
.seria img{width:100%;height:auto;transition:all .2s ease-in-out;}
.seria img:hover{width:100%;height:auto;transition:all .2s ease-in-out;transform:scale(1.05);}
.ozvuchka{color:var(--darkcolor);position:absolute;z-index:1;padding:5px 10px;background:var(--maincolor);font-size:17px;font-weight:bold;border-radius:0 5px 0 5px;}
.play-seria{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.play-seria::before{content:'▶';font-size:46px;color:var(--maincolor);opacity:.9;}
.seo{padding:20px 20px 10px 20px;margin:20px;background:#66ccff1f;border-radius:5px;}
.seo p{color:var(--lightcolor);margin-bottom:15px;}
.seo p a{color:var(--maincolor);text-decoration:none;}
.seo p a:hover{text-decoration:underline;}
.seo-sezon{padding:0 20px;}
.seo-sezon>p{color:var(--lightcolor);margin-bottom:15px;}
.footer{width:100%;background:var(--darkcolor);border-top:1px solid var(--maincolor);}
.footer-content{max-width:1240px;margin-left:auto;margin-right:auto;}
.footer-content>p{color:var(--lightcolor);margin:10px 20px;}
.footer-content>hr{border:1px dashed var(--maincolor);margin-top:10px;}
#copy{text-align:center;margin-bottom:15px;}
#copy>span{color:var(--maincolor);font-weight:bold;}
.footer-seasons{display:flex;flex-wrap:wrap;margin:0 20px;gap:7px;}
.footer-seasons>a{color:var(--lightcolor);text-decoration:none;display:flex;flex:0 0 30%;}
.footer-seasons>a:hover{text-decoration:underline;}

.content-seriya{display:flex;gap:10px;}
.content-seriya h1{margin:10px 0 10px 0;}

.seohook{background-color:#080836;color:var(--lightcolor);font-size:14px;padding:10px 20px;box-shadow:2px 2px 27px rgb(17 28 67 / 86%);border-radius:3px;margin-bottom:15px;}

.head-error{background:#66ccff1f;padding:10px 20px;text-align:center;margin:20px;}
.gif-error{display:block;margin:auto;box-shadow:3px 3px 33px rgb(19 34 86 / 86%);width:100%;max-width:600px;}

.content-video{width:64%;}
.content-video img{width:100%;margin-bottom:10px;}

.serial-info{background-color:#66ccff1f;padding:8px 10px 10px 10px;border-radius:3px;margin:0 20px 25px 20px;}
.serial-info>h1{padding:5px 10px 0 10px;border-radius:3px;margin:0;}
.serial-info>small{color:var(--lightcolor);font-weight:bold;padding:5px 10px 0 10px;}
.serial-info>p{color:var(--lightcolor);padding:10px 10px 5px 10px;}

.content>h2{background-color:#66ccff1f;padding:8px 10px 10px 15px;margin:20px 20px 25px 20px;font-size:20px;}

.content-sez{width:18%;margin-left:20px;margin-right:10px;margin-bottom:20px;}
.spisok-sez{display:flex;flex-direction:column;gap:10px;margin-top:10px;text-align:center;}
.spisok-sez>a{color:var(--lightcolor);text-decoration:none;background:linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);padding:10px;border-radius:var(--radius);box-shadow: 0 6px 18px rgb(118 19 19 / 86%);font-size:15px;font-weight:bold;}
#online{background-color: var(--maincolor);border-radius:3px;}
#fsez{margin-left:20px;}

.content-ser{width:18%;margin-right:20px;margin-left:10px;margin-bottom:20px;}
.content-ser>h2{margin-top:10px;font-size:15px;background-color:var(--maincolor);padding:10px;border-radius:3px;box-shadow:0 6px 18px rgba(2, 6, 23, 0.6);text-align:center;margin:10px 0;}

.spisok-ser{display:flex;gap:10px;flex-wrap:wrap;text-align:center;}
.spisok-ser>a{color:var(--lightcolor);text-decoration:none;background:linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);padding:10px;width:calc(50% - 25px);border-radius:var(--radius);box-shadow:0 6px 18px rgb(118 19 19 / 86%);font-size:13px;}


.player{width:100%;}
.player>iframe{width:100%;height:340px;border:none;}
.player>iframe>button.allplay__control--overlaid{color:#dd581c;}

.text-seriya{display:flex;flex-direction:column;}

.seo-seria{background:#66ccff1f;padding:20px;border-radius:3px;margin-bottom:20px;box-shadow:0 6px 18px rgb(41 48 69 / 86%);}
.seo-sezon{background:#66ccff1f;padding: 20px 20px 10px 20px;border-radius:3px;margin:20px;box-shadow:0 6px 18px rgb(41 48 69 / 86%);}
.seo-seria>h2{margin:0 0 20px 0;}
.seo-seria>p{color:var(--lightcolor);margin:10px 0;}
.navigation-button{display:flex;justify-content:space-between;gap:10px;margin:10px 0 15px 0;flex-wrap:wrap;font-size:14px;}
.navigation-button>a{color:var(--lightcolor);text-decoration:none;}
.navigation-button>a:target{background-color:red;}
.back{background:#66ccff1f;padding:10px;border-radius:3px;}
.next{background:#66ccff1f;padding:10px;border-radius:3px;}
.back:hover{box-shadow:0 6px 18px rgba(102, 204, 255, 0.12);}
.next:hover{box-shadow:0 6px 18px rgba(102, 204, 255, 0.12);}

@media (max-width:1000px){
	h1{font-size:25px;}
	.shapka img{width:50%;}
	.sez-info>p{font-size:16px;}
	.content{max-width:800px !important;}
	.footer-content{max-width:800px !important;}
	.seria{width:calc(50% - 20px);}
	.season{width:calc(33.3% - 20px);}
	.content-seriya{flex-wrap:wrap;justify-content:space-around;}
	.footer-seasons>a{font-size:15px;}
	.content-video{width:100%;order:1;}
	.content-sez{width:calc(50% - 20px);order:2;margin-left:0;}
	.content-ser{width:calc(50% - 10px);order:3;margin-right:0;}
	.kroshki{margin:0;}
	.seohook{margin-bottom:0;}
	.gif-error{max-width:calc(100% - 40px);}
	
}
@media (max-width:770px){
	h1{font-size:21px;text-align:center;}
	.shapka img{width:60%;}
	.content{max-width:600px !important;}
	.footer-content{max-width:600px !important;}
	.seria{width:calc(50% - 20px);}
	.seria h5{font-size:14px;margin:8px 5px;}
	.ozvuchka{font-size:15px;padding:4px 8px;}
	.season{width:calc(50% - 20px);}
	.player>iframe{height:240px;}
	.footer-seasons>a{flex:0 0 49%;}
	.sez-poster{width:30%;}
	.sez-info{width:70%;}
}
@media (max-width:550px){
	.shapka img{width:70%;}
	.seria{width:calc(100% - 20px);}
	.seria h5{font-size:17px;margin:13px 10px;}
	.ozvuchka{font-size:16px;padding:4px 8px;}
	.play-seria{top:47%;}
	.footer-seasons>a{font-size:13px;}
	.play>h5{font-size:14px;}
	.content-sez{width:100%;order:2;padding:10px;margin-right:0;}
	.content-ser{width:100%;order:3;padding:10px;margin-left:0;}
}
@media (max-width:450px){
	.shapka img{width:80%;}
	.footer-seasons>a{flex:0 0 100%;font-size:15px;}
	.play>h5{font-size:13px;}
	h1{font-size:20px;}
	.sez-info>p{font-size:14px;}
	.sez-next{font-size:16px;}
}

  :root{
    --bg: #020619;           /* тёмный фон */
    --accent-trans: #66ccff1f; /* полупрозрачный акцент (8-значный hex) */
    --muted: #a7a9b0;        /* нейтральный текст/серый */
    --danger: #c62222;       /* яркий акцент (красный) */
    --radius:3px;
  }



  /* Контейнер */
  .dropdown{
	position: absolute;
    display: inline-block;
    user-select: none;
    top: 20px;
    right: 20px;
  }

  /* Кнопка */
  .dropdown-toggle{
    display:inline-flex;
    align-items:center;
    padding: 2px 0px 2px 7px;
    background: var(--bg);
    color: var(--muted);
    border:1px solid var(--accent-trans);
    border-radius:3px;
    cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 8px 30px var(--bg);
	width: 112px;
	justify-content: center;
  }

  .dropdown-toggle .chev{font-size:28px;transition:transform .18s ease;color:var(--maincolor);}

  /* Меню */
  .dropdown-menu{
    position:absolute;
    top: 33px;
    right:0;
    min-width:auto;
    background: var(--bg);
    border:1px solid var(--accent-trans);
    border-radius: var(--radius);
    padding:7px;
    box-shadow: 0 14px 40px var(--bg);
    transform-origin: top center;
    transform: translateY(10px) scale(.98);
    opacity:0;
    visibility:hidden;
    transition: opacity .20s ease, transform .20s ease, visibility .20s;
    z-index:50;
    overflow:hidden;
  }

  /* Показ меню */
  .dropdown:hover .dropdown-menu,
  .dropdown.open .dropdown-menu{
    transform: translateY(6px) scale(1);
    opacity:1;
    visibility:visible;
  }
  .dropdown.open .chev{
    transform: rotate(180deg);
  }

  /* Список пунктов */
  .dropdown-menu ul{
    list-style:none;
    margin:0;
    padding:0;
    overflow:auto;
  }
  .dropdown-menu li{ margin:3px 0; }

  .dropdown-menu a{
	display: flex;
    padding: 5px 10px;
    border-radius: 3px;
    color: var(--muted);
    text-decoration: none;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
    position: relative;
    font-weight: 600;
    font-size: 14px;
    flex-direction: row;
    gap: 5px;
  }
  
  #play-menu{color:var(--maincolor);}

  /* Hover эффект */
  .dropdown-menu a:hover{
    background: linear-gradient(90deg, var(--accent-trans), var(--danger));
    box-shadow: 0 10px 30px var(--bg);
    color: var(--muted);
  }

  /* Акцентная полоска слева при hover */
  /* .dropdown-menu a::before{ */
    /* content:""; */
    /* width:4px; */
    /* height:100%; */
    /* border-radius:6px; */
    /* position:absolute; */
    /* left:0; */
    /* top:0; */
    /* opacity:0; */
    /* transition: opacity .16s ease, transform .16s ease; */
    /* background: linear-gradient(180deg, var(--danger), var(--accent-trans)); */
  /* } */
  .dropdown-menu a:hover::before{
    opacity:1;
    transform: translateX(0);
  }

  /* Скролл */
  /* .dropdown-menu ul::-webkit-scrollbar{ width:8px; height:8px; } */
  /* .dropdown-menu ul::-webkit-scrollbar-thumb{ */
    /* background: var(--accent-trans); */
    /* border-radius:8px; */
  /* } */

  /* Фокус клавиатурный */
  .dropdown-menu a:focus{
    outline:none;
    background: linear-gradient(90deg, var(--accent-trans), var(--danger));
    transform: translateX(8px);
  }