/* ===== STYLE BLOCK 1 ===== */
:root {
      --navH: 80px;
      --primary: #ff4d4d;
      --primary-light: #ff8080;
      --primary-dark: #cc0000;
      --accent: #6e45e2;
      --accent-light: #8d6eff;
      --dark: #0d0d0d;
      --darker: #080808;
      --dark-secondary: #1a1a1a;
      --dark-tertiary: #262626;
      --text: #f5f5f5;
      --text-secondary: #c2c2c2;
      --glass: rgba(30, 30, 30, 0.7);
      --glass-light: rgba(60, 60, 60, 0.5);
      --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    [data-theme="light"] {
      --dark: #f5f5f5;
      --darker: #ffffff;
      --dark-secondary: #f0f0f0;
      --dark-tertiary: #e8e8e8;
      --text: #111111;
      --text-secondary: rgba(0,0,0,.65);
      --glass: rgba(255, 255, 255, 0.65);
      --glass-light: rgba(255, 255, 255, 0.55);
      --shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.10);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-padding-top: 80px; font-size: 17px; }
    body {
      font-family: 'Plus Jakarta Sans','Montserrat','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
      
      background-color: var(--dark);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      background-image:
        radial-gradient(at 80% 0%, hsla(0, 100%, 65%, 0.10) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(0, 100%, 93%, 0.07) 0px, transparent 50%);
    }

    a { color: inherit; text-decoration: none; transition: var(--transition); }
    :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    /* ===== NAVBAR (a feltöltött fájlból) ===== */
.navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: var(--glass);
            backdrop-filter: blur(10px);
            padding: 0.8rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            box-shadow: var(--shadow);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .logo img {
            height: 40px;
        }
        
        .nav-links {
            display: flex;
            gap: 1.5rem;
        }
        
        .nav-links a {
            position: relative;
            padding: 0.5rem 0;
            font-weight: 500;
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: var(--transition);
        }
        
        .nav-links a:hover::after,
        .nav-links a.active::after {
            width: 100%;
        }
        
        .search-bar {
            position: relative;
            flex-grow: 0.5;
            margin: 0 2rem;
        }
        
        .search-bar input {
            width: 100%;
            padding: 0.8rem 1.5rem 0.8rem 3rem;
            border-radius: 50px;
            border: none;
            background-color: var(--dark-tertiary);
            color: white;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .search-bar input:focus {
            background-color: var(--dark-secondary);
            box-shadow: 0 0 0 2px var(--primary);
        }
        
        .search-bar i {
            position: absolute;
            left: 1.2rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
        }
        
        .user-menu {
            display: flex;
            gap: 0.8rem;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--dark-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            border: 2px solid transparent;
            transition: var(--transition);
        }
        
        .user-avatar:hover {
            border-color: var(--primary);
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* === FIX: navbar legyen átlátszóbb az adatlapon === */
    /* === NAVBAR: gyakorlatilag "nincs fejléc" (csak elemek maradnak) === */
    .navbar{
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .navbar::before,
    .navbar::after{
      content: none !important;
      display: none !important;
    }

    .navbar{
      z-index: 9999 !important;
      background: rgba(10,10,10,.22) !important;
      border-bottom: 1px solid rgba(255,255,255,.05) !important;
      backdrop-filter: blur(6px) !important;
    }
    [data-theme="light"] .navbar{
      background: transparent !important;
      border-bottom: none !important;
    }

    /* ===== ADATLAP ===== */
    .adatlap-page {
      padding-top: 0;
      min-height: 100vh;
    }

    .adatlap-hero {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
    
      background: #000;
    }

    .bg-media {
      position: absolute;
      z-index: 1;
      inset: 0;
      transform: scale(1.04);
      filter: saturate(1.08) contrast(1.02);
      opacity: 1;
    }
    .bg-media img {
      width: 100%;
      height: 100%;
      border: 0;
      object-fit: cover;
    }

    .adatlap-hero::after {
      content:"";
      position:absolute; inset:0;
      /* olyan telítettség / sötétítés, mint a főoldali hero overlay */
      background:
        linear-gradient(to right, rgba(13,13,13,.90) 0%, rgba(13,13,13,.60) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.00) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.35) 100%);
      pointer-events:none;
      z-index: 2;
    }

    .container {
      position: relative;
      z-index: 3;
      width: min(1180px, calc(100% - 3rem));
      margin: 0 auto;
      padding: calc(var(--navH) + 1.4rem) 0 2.4rem 0;
    }

    .adatlap-wrap {
      width: 100%;
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 1.6rem;
      align-items: start;
    }

    .adatlap-left {
      display: flex;
      flex-direction: column;
      gap: .9rem;
    }

    .adatlap-poster {
      position: relative;
      width: 100%;
      aspect-ratio: 2 / 3;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(26,26,26,.6);
    }
    [data-theme="light"] .adatlap-poster {
      border: 1px solid rgba(0,0,0,.10);
    }
    .adatlap-poster img { width:100%; height:100%; object-fit: cover; }

    .status-badge {
      position:absolute;
      top: 12px; left: 12px;
      padding: .42rem .7rem;
      border-radius: 999px;
      font-weight: 800;
      font-size: .78rem;
      background: rgba(255,77,77,.95);
      color: #fff;
      box-shadow: 0 12px 30px rgba(255,77,77,.25);
      border: 1px solid rgba(255,255,255,.16);
    }

    .btn-stack { display: grid; gap: .7rem; }

    .btnx {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .65rem;
      padding: .78rem 1rem;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      cursor: pointer;
      transition: var(--transition);
      font-weight: 700;
      background: rgba(30,30,30,.55);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow-sm);
      user-select:none;
      color: var(--text);
    }
    [data-theme="light"] .btnx {
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(0,0,0,.10);
      color: var(--text);
    }
    .btnx:hover {
      transform: translateY(-2px);
      border-color: rgba(255,77,77,.35);
    }

    .btnx.primary {
      background: linear-gradient(135deg, rgba(255,77,77,1), rgba(255,77,77,.75));
      border: 1px solid rgba(255,255,255,.14);
      color: white;
      box-shadow: 0 10px 28px rgba(255,77,77,.22);
    }
    .btnx.primary:hover {
      background: linear-gradient(135deg, rgba(255,128,128,1), rgba(255,77,77,.85));
    }

    .adatlap-right {
      max-width: 860px;
      padding-top: .2rem;
    }

    .adatlap-title {
      font-size: 2.05rem;
      line-height: 1.12;
      font-weight: 800;
      margin-bottom: .15rem;
    }

    .adatlap-subtitle {
      font-size: 1.55rem;
      font-weight: 800;
      color: rgba(255,255,255,.86);
      margin-bottom: .85rem;
    }
    [data-theme="light"] .adatlap-subtitle {
      color: rgba(0,0,0,.78);
    }

    .adatlap-tags {
      display:flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-bottom: .95rem;
    }
    .anime-tag {
      display:inline-flex;
      padding: .33rem .75rem;
      border-radius: 999px;
      font-weight: 600;
      font-size: .75rem;
      background-color: var(--dark-tertiary);
      color: var(--text);
      border: 1px solid rgba(255,255,255,.06);
    }
    [data-theme="light"] .anime-tag {
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(0,0,0,.06);
      color: rgba(0,0,0,.80);
    }

    .adatlap-desc {
      color: var(--text-secondary);
      line-height: 1.75;
      font-size: .98rem;
      margin-bottom: .9rem;
      max-width: 820px;
      max-height: 7em;
      overflow: auto;
      padding-right: .35rem;
    }
    .adatlap-desc::-webkit-scrollbar{ width: 10px; }
    .adatlap-desc::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,.14);
      border-radius: 999px;
      border: 2px solid rgba(0,0,0,0);
      background-clip: padding-box;
    }
    [data-theme="light"] .adatlap-desc::-webkit-scrollbar-thumb{
      background: rgba(0,0,0,.18);
    }

    /* INFÓK */
    .meta-panel {
      background-color: rgba(255,255,255,.035);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,.12);
      border: 1px solid rgba(255,255,255,.06);
      overflow: hidden;
      width: min(980px, 100%);
      margin-top: 1.1rem;

      margin-top: 1.1rem;
      background-color: var(--glass);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(255,255,255,.05);
      overflow: hidden;
      width: min(980px, 100%);
    }
    [data-theme="light"] .meta-panel {
      background-color: rgba(0,0,0,.03);
      border: 1px solid rgba(0,0,0,.06);
    }

    .meta-cols {
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .meta-col {
      padding: .6rem 0;
      display: flex;
      flex-direction: column;
      gap: .35rem;
    }

    .meta-row {
      padding: .82rem 1rem;
    }
    .meta-k {
      color: var(--text-secondary);
      font-weight: 700;
      font-size: .78rem;
      margin-bottom: .18rem;
      text-transform: uppercase;
      letter-spacing: .35px;
    }
    .meta-v {
      font-weight: 700;
      font-size: .93rem;
      word-break: break-word;
    }
    .meta-v a {
      color: var(--primary-light);
      font-weight: 800;
    }

    .project-note{
      margin-top: .9rem;
      font-size: .98rem;
      line-height: 1.5;
      color: rgba(255,255,255,.72);
    }
    [data-theme="light"] .project-note{
      margin-top: .9rem;
      font-size: .98rem;
      line-height: 1.5;
      color: rgba(255,255,255,.72);
    }
    .fansub-red{
      color: var(--primary);
      font-weight: 800;
    }

    @media (max-width: 992px) {
      .adatlap-wrap {
      width: 100%;
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 1.6rem;
      align-items: start;
    }
    }
    @media (max-width: 900px) {
      .container {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100% - 3rem));
      margin: 0 auto;
      padding: calc(var(--navH) + 1.4rem) 0 2.4rem 0;
    }
      .adatlap-wrap {
      width: 100%;
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 1.6rem;
      align-items: start;
    }
      .adatlap-left {
      display: flex;
      flex-direction: column;
      gap: .9rem;
    }
      .meta-cols { grid-template-columns: 1fr; }
    }
  
    /* === FORCE OVERRIDES (legvégén, hogy biztos nyerjen) === */
    .navbar, header.navbar, nav.navbar{
      background: rgba(0,0,0,.55) !important;
      background-color: rgba(0,0,0,.55) !important;
      border: 0 !important;
      border-bottom: 0 !important;
      box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
      backdrop-filter: blur(2px) !important;
      -webkit-backdrop-filter: blur(2px) !important;
    }
    .navbar::before, .navbar::after,
    nav.navbar::before, nav.navbar::after,
    header.navbar::before, header.navbar::after{
      content: none !important;
      display: none !important;
    }
    /* Ha a feltöltött CSS külön wrapperre teszi a hátteret */
    .navbar-container, .navbar .container, .navbar-inner, .nav-inner, .nav-wrapper{
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    /* Infók: sokkal halványabb, és csíkok/borderek teljesen off */
    .meta-panel{
      background: transparent !important;
      background-color: transparent !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    [data-theme="light"] .meta-panel{
      background: transparent !important;
      background-color: transparent !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .meta-row{
      border: 0 !important;
      border-top: 0 !important;
    }

  
    /* === HÁTTÉR KÉP: kicsit világosabb / telítettebb === */
    .bg-media img{
      filter: brightness(1.08) saturate(1.10) contrast(1.03) !important;
    }

    /* === INFÓK: pici blur + halvány háttér, és ne legyen túl széles === */
    .meta-panel{
      width: min(820px, 100%) !important;
      background: rgba(255,255,255,.035) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      backdrop-filter: blur(2px) !important;
      -webkit-backdrop-filter: blur(2px) !important;
    }
    [data-theme="light"] .meta-panel{
      background: rgba(0,0,0,.03) !important;
      border: 1px solid rgba(0,0,0,.10) !important;
      backdrop-filter: blur(2px) !important;
      -webkit-backdrop-filter: blur(2px) !important;
    }

    /* === NAVBAR SEARCH: csak körvonal + pici blur (mint a főoldalon, csak nem kitöltött) === */
    .search-bar input,
    .search-container input{
      background: rgba(0,0,0,.10) !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      color: var(--text) !important;
      backdrop-filter: blur(6px) !important;
      -webkit-backdrop-filter: blur(6px) !important;
      box-shadow: none !important;
    }
    .search-bar input:focus,
    .search-container input:focus{
      border-color: rgba(255,77,77,.45) !important;
      box-shadow: 0 0 0 2px rgba(255,77,77,.18) !important;
      background: rgba(0,0,0,.14) !important;
    }
    [data-theme="light"] .search-bar input,
    [data-theme="light"] .search-container input{
      background: rgba(255,255,255,.20) !important;
      border: 1px solid rgba(0,0,0,.14) !important;
      color: rgba(0,0,0,.85) !important;
    }

  
    /* === USER TWEAKS: nincs blur, inkább fehér layer === */
    .meta-panel{
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: rgba(255,255,255,.04) !important; /* pici fehér layer */
      border: 1px solid rgba(255,255,255,.10) !important;
      box-shadow: none !important;
      width: min(820px, 100%) !important;
    }
    [data-theme="light"] .meta-panel{
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: rgba(0,0,0,.03) !important;
      border: 1px solid rgba(0,0,0,.10) !important;
      box-shadow: none !important;
    }

    /* Search: ne az ikon blur-ölődjön, legyen fehér layer + körvonal */
    .search-bar{
      background: rgba(255,255,255,.04) !important; /* pici fehér layer */
      border: 1px solid rgba(255,255,255,.14) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
    }
    .search-bar i{
      filter: none !important;
      opacity: .9;
    }
    .search-bar input{
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    [data-theme="light"] .search-bar{
      background: rgba(0,0,0,.03) !important;
      border: 1px solid rgba(0,0,0,.14) !important;
    }

    /* Bell: biztosan ugyanaz a gomb, mint a feltöltöttben */
    .user-menu .btn.btn-accent.btn-icon i.fa-bell{
      font-size: 1.05rem;
    }

  
    /* === NAV ICONS (mint a feltöltöttben) === */
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding: .8rem 1.8rem;
      border-radius: 50px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      border: none;
      white-space: nowrap;
      gap: 8px;
    }
    .btn-accent{
      background-color: var(--accent);
      color: #fff;
      box-shadow: 0 4px 15px rgba(110, 69, 226, 0.30);
    }
    .btn-accent:hover{
      background-color: var(--accent-light);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(110, 69, 226, 0.40);
    }
    .btn-icon{
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 50%;
      background-color: var(--dark-tertiary);
    }
    .btn-icon:hover{
      background-color: var(--dark-tertiary);
      color: var(--text);
    }
    .user-menu{ display:flex; gap:.8rem; align-items:center; }
    .user-avatar{
      width: 40px; height: 40px; border-radius: 50%;
      background-color: var(--dark-tertiary);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; overflow:hidden;
      border: 2px solid transparent;
      transition: var(--transition);
    }
    .user-avatar:hover{ border-color: var(--primary); }

  
    /* === SEARCH: forma vissza, háttér pici blur (nem fehér), ikon nem blur === */
    .search-bar{
      position: relative !important;
      flex-grow: 0.5 !important;
      margin: 0 2rem !important;
      background: rgba(20,20,20,.22) !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      border-radius: 50px !important;
      backdrop-filter: blur(6px) !important;
      -webkit-backdrop-filter: blur(6px) !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }
    .search-bar input{
      width: 100% !important;
      padding: 0.8rem 1.5rem 0.8rem 3rem !important;
      border-radius: 50px !important;
      border: none !important;
      background: transparent !important;
      color: var(--text) !important;
      font-size: 1rem !important;
      outline: none !important;
    }
    .search-bar input:focus{
      box-shadow: 0 0 0 2px rgba(255,77,77,.35) inset !important;
    }
    .search-bar i{
      position: absolute !important;
      left: 1.2rem !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      color: var(--text-secondary) !important;
      filter: none !important;
      opacity: .9 !important;
    }
    [data-theme="light"] .search-bar{
      background: rgba(255,255,255,.18) !important;
      border: 1px solid rgba(0,0,0,.12) !important;
    }
    [data-theme="light"] .search-bar input{ color: rgba(0,0,0,.85) !important; }

    /* === INFÓK: fehér layer 1%, nincs blur === */
    .meta-panel{
      background: rgba(255,255,255,.02) !important;
      background-color: rgba(255,255,255,.02) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      box-shadow: none !important;
      width: min(820px, 100%) !important;
      content-visibility: auto;
      contain-intrinsic-size: 420px;
    }
    [data-theme="light"] .meta-panel{
      background: rgba(0,0,0,.02) !important;
      background-color: rgba(0,0,0,.02) !important;
      border: 1px solid rgba(0,0,0,.10) !important;
      box-shadow: none !important;
    }

  
    /* ===== GLOBAL SCROLLBAR (piros) ===== */
    html { scrollbar-color: var(--primary) rgba(38,38,38,.55); scrollbar-width: thin; }
    body::-webkit-scrollbar { width: 10px; }
    body::-webkit-scrollbar-track { background: rgba(38,38,38,.55); }
    body::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

    /* ===== RÉSZEK (adatlap alatt) ===== */
    .episodes-section{position:relative;z-index:3;padding:2.2rem 0 4rem;
      background: #000;
    }
    .episodes-shell{width:min(1700px,calc(100% - 3.2rem));margin:0 auto;}
    .episodes-content{
      background:rgba(20,20,20,.30);
      border:1px solid rgba(255,255,255,.06);
      border-radius:18px;
      padding:1.6rem 1.6rem 1.4rem;
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
    }
    [data-theme="light"] .episodes-content{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);}
    .episodes-header{margin-bottom:1.2rem;padding-bottom:.9rem;border-bottom:2px solid var(--primary);display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;}
    .episodes-title{font-size:1.65rem;font-weight:900;letter-spacing:.2px;margin:0 0 .25rem 0;}
    .season-info{font-size:1.05rem;color:var(--text-secondary);font-weight:650;}
    .season-info .season-count{color:var(--primary);font-weight:900;}
    .season-selector{display:flex;gap:.7rem;margin:0 0 1.2rem 0;flex-wrap:wrap;}
    .season-tab{
      padding:.65rem 1.15rem;background:rgba(38,38,38,.55);
      border:1px solid rgba(255,255,255,.06);border-radius:999px;cursor:pointer;
      transition:var(--transition);font-weight:800;font-size:1rem;user-select:none;
    }
    .season-tab:hover{background:rgba(38,38,38,.75);transform:translateY(-1px);}
    .season-tab.active{background:var(--primary);color:#fff;border-color:rgba(255,255,255,.12);}
    .episodes-scroll-container{max-height:720px;overflow:auto;padding:18px 14px 18px;}
    .episodes-scroll-container::-webkit-scrollbar{width:10px;}
    .episodes-scroll-container::-webkit-scrollbar-track{background:rgba(38,38,38,.55);border-radius:10px;}
    .episodes-scroll-container::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px;}
    .episodes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;}
    .episode-card{
      background:rgba(38,38,38,.35);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      border-radius:16px;overflow:hidden;transition:var(--transition);
      cursor:pointer;position:relative;border:2px solid rgba(255,255,255,.06);
      content-visibility:auto;
      contain-intrinsic-size: 360px;
    }
    .episode-card:hover{transform:translateY(-4px) scale(1.02); z-index: 5;box-shadow:0 18px 40px rgba(0,0,0,.30);border-color:rgba(255,77,77,.55);}
    .episode-card.active-pulse{border-color:rgba(255,77,77,.90);box-shadow:0 0 0 4px rgba(255,77,77,.15),0 18px 40px rgba(0,0,0,.30);animation:pulseOutline 1.1s ease-in-out 2;}
    @keyframes pulseOutline{0%{box-shadow:0 0 0 0 rgba(255,77,77,.22),0 18px 40px rgba(0,0,0,.30);}50%{box-shadow:0 0 0 10px rgba(255,77,77,.08),0 18px 40px rgba(0,0,0,.30);}100%{box-shadow:0 0 0 0 rgba(255,77,77,.18),0 18px 40px rgba(0,0,0,.30);}}
    .episode-number{position:absolute;top:12px;left:12px;background:var(--primary);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:950;font-size:1rem;z-index:2;box-shadow:0 14px 22px rgba(255,77,77,.18);}
    .episode-poster{aspect-ratio:16/9;width:100%;overflow:hidden;background:rgba(0,0,0,.20);}
    .episode-poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
    .episode-card:hover .episode-poster img{transform:none;}
    .episode-info{padding:1rem 1.05rem 1.05rem;display:flex;flex-direction:column;gap:.6rem;}
    .episode-title{font-size:1.03rem;font-weight:900;line-height:1.2;line-clamp:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:calc(1.2em * 2);} 
    .episode-meta{font-size:.88rem;color:var(--text-secondary);display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-top:auto;}
    .episode-rating{color:rgba(255,255,255,.85);font-weight:800;white-space:nowrap;}
    .episode-date{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;}
    /* ===== PLAYER MODAL ===== */
    .player-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;padding:2rem;background:rgba(0,0,0,.68);}
    .player-modal.open{display:flex;}
    .player-shell{width:min(1100px,100%);border-radius:18px;overflow:hidden;background:rgba(18,18,18,.92);border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 70px rgba(0,0,0,.45);}
    .player-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08);}
    .player-title{font-weight:900;font-size:1.05rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .player-close{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:1.2rem;font-weight:900;}
    .player-close:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);}
    .player-frame{aspect-ratio:16/9;width:100%;background:#000;}
    .player-frame iframe{width:100%;height:100%;border:0;display:block;}
    @media (max-width:900px){.episodes-shell{width:min(1400px,calc(100% - 2rem));}.episodes-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}.episodes-scroll-container{max-height:640px;}}
    @media (max-width:520px){.episodes-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.episode-title{font-size:.98rem;}}

  

    /* ===== Secondary fixed background (Amazon) ===== */
    .bg-amazon{display:none !important;}


@media (min-width: 1500px){
  .episodes-grid{grid-template-columns:repeat(5,minmax(280px,1fr));}
}


    /* ===== WATCHED: egész kártya enyhén sötétebb (nem túl fekete) ===== */
    .episode-card.watched{
      filter: brightness(.72) saturate(.92);
      background: rgba(20,20,20,.44);
    }
    .episode-card.watched:hover{filter: brightness(.84) saturate(.98);}
    .episode-card.watched .episode-poster img{ filter: brightness(.78) saturate(.9); }
    .episode-card.watched:hover{ border-color: rgba(255,77,77,.55) !important; }


    /* ===== Hover outline safety (no clipping) ===== */
    .episodes-grid{ padding-top: 6px; }

    /* ===== NAV: csak kicsi blur scrollnál ===== */
    .navbar{
      transition: background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }
    .navbar.scrolled{
      background: rgba(10,10,10,.42) !important;
      border-bottom: 1px solid rgba(255,255,255,.10) !important;
      backdrop-filter: blur(6px) !important;
      -webkit-backdrop-filter: blur(6px) !important;
      box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
    }

    /* ===== PLAYER (megtekintes style, smoother) ===== */
    .player-modal{
      position: fixed;
      inset: 0;
      display: flex; /* keep for smooth anim */
      align-items: center;
      justify-content: center;
      padding: 1.2rem;
      background: rgba(0,0,0,.55); /* kisebb fekete layer */
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease;
    }
    .player-modal.open{
      opacity: 1;
      pointer-events: auto;
    }
    .player-shell{
      width: min(1100px, 100%);
      max-height: 92vh;
      overflow: hidden;
      border-radius: 16px;
      background: rgba(14,14,14,.88);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 30px 70px rgba(0,0,0,.40);
      transform: translateY(14px) scale(.96);
      opacity: 0;
      transition: transform 520ms cubic-bezier(0.16,1,0.3,1), opacity 260ms ease;
      will-change: transform, opacity;
    }
    .player-modal.open .player-shell{
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    .player-top{
      padding: 1.1rem 1.4rem;
      background: rgba(0,0,0,.32);
      display:flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .player-title{font-size:1.25rem;font-weight:800;}
    .player-close{
      width: 44px; height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      color: rgba(255,255,255,.85);
      transition: transform 180ms ease, background 180ms ease, color 180ms ease;
    }
    .player-close:hover{ transform: scale(1.04); background: rgba(255,255,255,.10); color:#fff; }
    .player-frame{ position:relative; padding-bottom:56.25%; height:0; background:#000; }
    .player-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }


    /* Video Player Modal */
        .video-modal{
            position: fixed;
            inset: 0;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: calc(var(--navH) + 18px) 18px 18px;
            background: rgba(0,0,0,0.05);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            z-index: 3000;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 220ms ease, visibility 0s linear 220ms;
        }
        
        .video-modal.active{
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity 220ms ease;
        }

        .video-modal.closing{
            opacity: 0;
            pointer-events: none;
        }
        
        .video-modal-content{
            background: var(--dark);
            border-radius: 18px;
            max-width: 980px;
            width: min(980px, 96vw);
            max-height: calc(100vh - var(--navH) - 46px);
            overflow: hidden;
            box-shadow: 0 22px 60px rgba(0,0,0,.55);
            transform: translateY(14px) scale(.985);
            opacity: 0;
            transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;
        }
        
        .video-header{
            padding: 1.25rem 1.6rem;
            background: var(--darker);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        }

        
        .video-modal, .video-modal *{
            font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        }
        .video-headlines{ flex: 1; min-width: 0; }
        .video-title-big{
            font-size: 1.35rem;
            font-weight: 800;
            line-height: 1.25;
            color: var(--text);
            letter-spacing: .2px;
            margin-bottom: .35rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .video-project-note{
            font-size: .95rem;
            line-height: 1.45;
            color: var(--text-secondary);
            margin-bottom: .35rem;
        }
        .video-staffline{
            font-size: .95rem;
            line-height: 1.45;
            color: var(--text-secondary);
            opacity: .95;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .close-video-btn{
            width: 44px;
            height: 44px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            color: rgba(255,255,255,.82);
        }
        .close-video-btn:hover{
            background: rgba(255,255,255,.06);
            color: rgba(255,255,255,.92);
            transform: none;
        }

        
        .video-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .video-episode-info {
            font-size: 1.2rem;
            color: var(--primary);
            font-weight: 600;
            margin-top: 0.3rem;
        }
        
        .video-staff {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 0.5rem;
        }
        
        .staff-item {
            font-size: 0.9rem;
            color: var(--primary);
        }
        
        .staff-label {
            color: var(--text-secondary);
        }
        
        .close-video-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .close-video-btn:hover {
            color: var(--primary);
        }
        
        .video-player {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            background: #000;
        }
        
        .video-player iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .video-controls{
            padding: 1.15rem 1.6rem;
            background: var(--darker);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .video-nav{
            display: flex;
            gap: 12px;
            flex: 1;
            min-width: 0;
        }
        
        .video-btn{
            padding: 0.72rem 1.15rem;
            min-height: 44px;
            border-radius: 12px;
            background: var(--dark-secondary);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 0.95rem;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            flex: 1;
            min-width: 190px;
        }
        
        .video-btn:hover {
            background: var(--dark-tertiary);
        }
        
        .video-btn.btn-primary {
            background: var(--primary);
        }
        
        .video-btn.btn-primary:hover {
            background: var(--primary-light);
        }
        
        .video-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        

    /* --- Player open smooth (extra) --- */
    @keyframes aaModalFade{from{opacity:0}to{opacity:1}}
    @keyframes aaModalPop{from{transform:scale(.965);opacity:0}to{transform:scale(1);opacity:1}}
    .video-modal.active{animation:aaModalFade .18s ease-out both;}
    .video-modal.active .video-modal-content{animation:aaModalPop .22s cubic-bezier(.2,.9,.2,1) both;}

    
    /* ====== USER REQUESTED TWEAKS (only) ====== */

    /* Logo: bigger wordmark, logo sized next to it (consistent font) */
    .logo{ gap: 10px !important; }
    .logo span{
      font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
      font-weight: 800 !important;
      letter-spacing: .15px !important;
      font-size: 1.62rem !important;
      line-height: 1 !important;
    }
    .logo img.logo-mark{
      height: 28px !important;
      width: auto !important;
      filter: drop-shadow(0 5px 14px rgba(255,77,77,.18));
    }

    /* Menu smaller (marad) */
    .nav-links{ gap: 1.15rem !important; }
    .nav-links a{ font-size: .92rem !important; padding: .4rem 0 !important; }

    /* ===== Animated "bekarikázós" ring (search + icons + buttons) ===== */
    .aa-ring-target{ position: relative !important; }
    .aa-ring-svg{
      position:absolute; inset:0;
      width:100%; height:100%;
      pointer-events:none;
      z-index: 5;
    }
    .aa-ring-path{
      fill: none;
      stroke: var(--aa-ring-color, var(--primary));
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: var(--aa-ring-len, 9999);
      stroke-dashoffset: var(--aa-ring-len, 9999);
      opacity: 0;
      transition: stroke-dashoffset 900ms cubic-bezier(.2,.9,.2,1), opacity 120ms ease;
    }
    .aa-ring-target.aa-ring-show .aa-ring-path{ opacity: 1; }
    .aa-ring-target.aa-ring-active .aa-ring-path{ stroke-dashoffset: 0; }

    /* Piros gomboknál: FEHÉR animáció */
    .btnx.primary.aa-ring-target{ --aa-ring-color: rgba(255,255,255,.95); }
    .video-btn.btn-primary.aa-ring-target{ --aa-ring-color: rgba(255,255,255,.95); }

/* Search: no extra shadow, just the ring */
    .search-bar{ border-radius: 999px !important; }

    /* Bell + profile: round like original, no "thicker border on hover" */
    .user-menu .btn.btn-icon{
      border-radius: 50% !important;
      width: 40px !important;
      height: 40px !important;
      padding: 0 !important;
    }
    .user-avatar{
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      border: none !important;
      box-shadow: none !important;
    }
    .user-avatar:hover{ border: none !important; }

    /* Buttons in left stack: identical size + ring */
    .btn-stack{ gap: .85rem !important; }
    .btn-stack .btnx{
      width: 100% !important;
      min-height: 44px !important;
      font-size: .96rem !important;
      border-radius: 14px !important;
      padding: .78rem 1rem !important;
    }

    /* Right panel order + sizing: meta panel sits down to admin button, leírás nem tolja el */
    .adatlap-wrap{ align-items: stretch !important; }
    .adatlap-right{
      display: flex !important;
      flex-direction: column !important;
      min-height: 100% !important;
    }
    .adatlap-desc{
      margin-bottom: 0 !important;
      line-height: 1.45 !important;
      max-height: calc(1.45em * 4) !important; /* max 4 sor */
      overflow: auto !important;
      padding-right: .35rem !important;
    }

    .meta-panel{
      margin-top: auto !important;
      width: 100% !important;
    }

    /* Infók: columns closer (marad) */
    .meta-cols{ column-gap: 0 !important; }
    .meta-row{ padding: .72rem .8rem !important; }
    .meta-col{ gap: .25rem !important; }

    /* Keep tags -> project -> desc order spacing clean */
    .adatlap-tags{ margin-bottom: .85rem !important; }
    .project-note{
      margin: 0 0 .85rem !important;
      color: rgba(255,255,255,.76) !important;
    }

    /* Leírás label */
    .desc-label{ color: var(--primary); font-weight: 900; }

    /* ===== Episodes: vissza az eredeti kinézetre (ne írjuk felül) ===== */
    /* (nincs extra override itt) */

    
    /* Background #2 (az 1. háttér után közvetlen): az epizódok mögé tesszük */
    .episodes-section{ position: relative; }
    .episodes-section::before{
      content:"";
      position:absolute;
      inset:0;
      background: url('https://m.media-amazon.com/images/S/pv-target-images/087466f5f26560e745d2773bfc706d6e95c79e43053e26635ba5bed572ae9f75.jpg') center/cover no-repeat;
      transform: scale(1.02);
      filter: saturate(1.06) contrast(1.02);
      z-index: 0;
      pointer-events:none;
    }
    .episodes-section::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(to right, rgba(13,13,13,.90) 0%, rgba(13,13,13,.60) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.35) 100%);
      z-index: 1;
      pointer-events:none;
    }
    .episodes-shell{ position: relative; z-index: 2; }
/* ===== Background #2: csak az 1. háttér után jelenjen meg ===== */
    .bg-amazon{
      opacity: 0;
      transition: opacity 300ms ease;
    }
    
    /* ===== Player overlay: ne legyen ekkora feketeség ===== */
    .video-modal{
      background: rgba(0,0,0,.05) !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    /* Player episode line: csak a számok pirosak */
    .video-episode-info{
      color: rgba(255,255,255,.92) !important;
      font-weight: 700 !important;
    }
    .num-red{ color: var(--primary); font-weight: 900; }

    /* Modal bottom buttons: same size + ring target will make equal */
    .video-actions{ gap: 1rem !important; }
    .video-actions .video-btn{
      flex: 1 1 0 !important;
      min-height: 44px !important;
      font-size: .98rem !important;
      border-radius: 14px !important;
    }


    /* Player: egységes font + férjen ki minden (alsó gombok se legyenek takarva) */
    .video-modal-content{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
/* FontAwesome ikonok ne törjenek el a font override-tól */
.video-modal-content i.fa, .video-modal-content i.fas, .video-modal-content i.far, .video-modal-content i.fab,
.video-modal-content .fa, .video-modal-content .fas, .video-modal-content .far, .video-modal-content .fab{
  font-family: "Font Awesome 6 Free","Font Awesome 6 Brands" !important;
  font-weight: 900;
}
.video-modal-content{
      display:flex !important;
      flex-direction:column !important;
      max-height: calc(100vh - 3.2rem) !important;
    }
    .video-header{ flex: 0 0 auto !important; }
    .video-player{
      flex: 1 1 auto !important;
      padding-bottom: 0 !important;
      height: auto !important;
      aspect-ratio: 16 / 9;
      background: #000;
    }
    .video-player iframe{ position:absolute; inset:0; width:100%; height:100%; }
    .video-controls{
      flex: 0 0 auto !important;
      flex-wrap: wrap !important;
      gap: 1rem !important;
      justify-content: space-between !important;
    }
    .video-nav{ flex-wrap: wrap !important; }
    .video-btn{ min-height: 44px; }

/* ===== PATCH v5 (csak a kért dolgok) ===== */

/* NAVBAR: ugyan olyan fehér layer mint infóknál + 2px blur */
.navbar{
  background: rgba(255,255,255,.02) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
.navbar.scrolled{
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* AnimeAce: csak az ikon legyen kisebb (szöveg marad) */
.logo img.logo-mark{ height: 24px !important; }

/* Bell: NE váltson piros háttérre/ikonra hoverre, csak a körvonal.
   A "lila fény" legyen piros. */
.user-menu .btn.btn-accent.btn-icon{
  background-color: var(--dark-tertiary) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 16px rgba(255,77,77,.28) !important;
}
.user-menu .btn.btn-accent.btn-icon:hover{
  background-color: var(--dark-tertiary) !important;
  color: var(--text) !important;
  transform: none !important;
  box-shadow: 0 6px 22px rgba(255,77,77,.38) !important;
}
.user-menu .btn.btn-accent.btn-icon:hover i{ color: inherit !important; }

/* Continue/Thanks (piros): ne kapjon extra "fehér layert" hoverre, csak körvonal */
.btnx.primary:hover{
  background: linear-gradient(135deg, rgba(255,77,77,1), rgba(255,77,77,.75)) !important;
}

/* Részek: háttér NEM blur, hanem fehér layer (mint infóknál) */
.episodes-content{
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Rész kártyák legyenek átlátszóbbak */
.episode-card{
  background: rgba(38,38,38,.32) !important;
  border: 2px solid rgba(255,255,255,.05) !important;
}

/* Háttér seam fix: az overlay-k picit lógjanak össze + legyen az alján is */
.adatlap-hero::after{ inset: -10px 0 -10px 0 !important; }
.episodes-section::before, .episodes-section::after{ inset: -10px 0 -10px 0 !important; }

/* PLAYER: legyen kisebb, kerekített, ne takarja a navbar + X látszódjon */
.video-modal{
  z-index: 10050 !important;
  padding: calc(var(--navH) + 14px) 1.2rem 1.2rem !important;
  background: rgba(0,0,0,.05) !important; /* 5% black layer */
  display: none; /* alapból */
}
.video-modal.active{ display: flex; }
.video-modal.active{ opacity: 1; }
.video-modal.active.closing{ opacity: 0; }
.video-modal,
.video-modal.active,
.video-modal.active.closing{
  transition: opacity 220ms ease;
}

.video-modal-content{
  width: min(980px, 100%) !important;
  max-height: calc(100vh - (var(--navH) + 44px)) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
.video-header{ padding: 1.05rem 1.4rem !important; }
.close-video-btn{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.close-video-btn i{ font-size: 1.05rem; }

/* Player layout: az alsó gombok mindig kiférjenek + egyformák legyenek */
.video-modal-content{
  display: flex !important;
  flex-direction: column !important;
}
.video-player{ flex: 1 1 auto !important; }
.video-controls{
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  align-items: stretch !important;
  padding: 1rem 1.4rem !important;
}
.video-nav{ width: 100% !important; }
.video-nav .video-btn{
  flex: 1 1 0 !important;
  justify-content: center !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}
.video-nav{ display: flex !important; gap: 1rem !important; }
.video-btn i{ display: inline-block; }

/* Zárás anim: modal pop-out */
@keyframes aaModalFadeOut{from{opacity:1}to{opacity:0}}
@keyframes aaModalPopOut{from{transform:scale(1);opacity:1}to{transform:scale(.965);opacity:0}}
.video-modal.active.closing{animation:aaModalFadeOut .18s ease-in both !important;}
.video-modal.active.closing .video-modal-content{animation:aaModalPopOut .22s cubic-bezier(.2,.9,.2,1) both !important;}


/* ====== v9 FIXES (requested only) ====== */

/* Navbar: top transparent, scroll -> light black + blur(2px) */
.navbar{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0) !important;
  box-shadow: none !important;
}
.navbar.scrolled{
  background: rgba(0,0,0,.22) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}

/* Episodes bg: no blur effect on the background */
.episode-card{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Episode hover: only the ring animation, no red border */
.episode-card:hover{
  border-color: rgba(255,255,255,.06) !important;
}

/* Continue/auto select highlight uses the same ring animation */
.episode-card.active-pulse{
  border-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.30) !important;
  animation: none !important;
}
.episode-card.active-pulse::after{
  opacity: 1 !important;
  animation: aaEpCircle .58s cubic-bezier(.2,.9,.2,1) both !important;
}

/* Links: add Yogani block under MAL */
.links-wrap{display:flex;flex-direction:column;gap:.35rem;}
.links-wrap .links-main{display:flex;gap:.45rem;flex-wrap:wrap;}
.links-wrap .fansub-label{opacity:.85;font-weight:700;}
.links-wrap .fansub-link{color: var(--primary) !important;font-weight:800;}

/* Player: smoother open/close without extra keyframe animation */
.video-modal{will-change: opacity; transform: translateZ(0); }
.video-modal-content{will-change: transform, opacity; transform: translate3d(0,14px,0) scale(.985); }
.video-modal.active{animation: none !important;}
.video-modal.active .video-modal-content{animation: none !important;}

/* Close (X) ring should follow button shape (rect), no circle settings needed in CSS */
.close-video-btn{border-radius: 14px !important;}
/* Make sure the ring overlay (SVG) inherits the real shape via JS (rect) */

/* Player thank button: red glow */
#videoModal #thankEpisodeBtn{
  box-shadow: 0 6px 18px rgba(255,77,77,.28) !important;
}
/* optional hover glow stays red */
#videoModal #thankEpisodeBtn:hover{
  box-shadow: 0 10px 26px rgba(255,77,77,.36) !important;
}

/* Player usernames: red */
.video-staffline .aa-username{color: var(--primary); font-weight: 800;}


/* Player placeholder image */
.video-player img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border:0;display:block;}


/* ===== STYLE BLOCK 2 ===== */
/* ===== MERGE OVERRIDES (v6 hero + v5 részek + v2 player fix) ===== */

/* NAV: felül teljesen átlátszó, scrollnál fekete layer + blur */
.navbar{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar.scrolled{
  background: rgba(0,0,0,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* EPISODES BG: a borító legyen fix háttér, ugyanazzal a fekete layerrel */
:root{
  --aa-poster-bg: url('https://static.animecorner.me/2025/03/1741878369-0128a4298fb0b4bcefdb67763d4633b0.jpg');
}
.episodes-section{
  background: transparent !important;
}
.episodes-section::before{
  background: var(--aa-poster-bg) center/cover no-repeat !important;
  background-attachment: fixed !important;
  transform: scale(1.03) !important;
  filter: saturate(1.06) contrast(1.02) brightness(.95) !important;
}
.episodes-section::after{
  background:
    linear-gradient(to right, rgba(13,13,13,.90) 0%, rgba(13,13,13,.60) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.14) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.35) 100%) !important;
}

/* Megtekintett részek: jobban halvány */
.episode-card.watched{
  opacity: .42 !important;
  filter: saturate(.88) brightness(.78) !important;
}
.episode-card.watched:hover{
  opacity: .68 !important;
  filter: saturate(.95) brightness(.92) !important;
}

/* Hover: legyen “nagyobb”, de ne torzítsa a címet (ne scale-eljük a teljes kártyát) */
.episode-card{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.episode-card:hover{
  transform: translateY(-6px) !important;
}
.episode-card:hover .episode-poster img{
  transform: scale(1.06) !important;
}
.episode-title{
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* PLAYER: ne legyen elcsúszva, rugalmas (flex) felépítés */
.video-modal{
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}
.video-modal-content{
  display: flex !important;
  flex-direction: column !important;
  max-height: min(92vh, calc(100vh - 36px)) !important;
  overflow: hidden !important;
}
.video-player{
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 260px !important;
  height: auto !important;
  padding-bottom: 0 !important;
  aspect-ratio: 16 / 9 !important;
}
.video-player iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 560px){
  .video-modal{ padding: 12px !important; }
  .video-header{ padding: 1rem 1.05rem !important; }
  .video-controls{ padding: 1rem 1.05rem !important; }
  .video-title-big{ font-size: 1.15rem !important; }
}


/* ===== USER PATCH (only requested changes) ===== */

/* 1) NAVBAR: felül 0 háttér, scrollnál fekete layer + blur (ne fehéredjen light módban se) */
body .navbar{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body .navbar.scrolled{
  background: rgba(0,0,0,.66) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
[data-theme="light"] body .navbar.scrolled{
  background: rgba(0,0,0,.66) !important;
}

/* 2) TELJES HÁTTÉR: borító fix + fekete layer végig (nincs "köz" és az alján sem tűnik el) */
html{ background: #000 !important; }
body{
  position: relative !important;
  background-color: #000 !important;
  background-image: var(--aa-poster-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(13,13,13,.92) 0%, rgba(13,13,13,.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,.62) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.adatlap-page{ position: relative; z-index: 1; }

/* 3) Legfelső háttérkép full screen (csak görgetésnél jöhet elő a borító-háttér) */
.adatlap-hero{
  height: 100vh !important;
  min-height: 100vh !important;
}

/* 4) Részek háttér: az overlay-t már a teljes body adja, szóval itt ne legyen külön "szakasz háttér" */
.episodes-section{
  background: transparent !important;
}
.episodes-section::before,
.episodes-section::after{
  content: none !important;
  display: none !important;
}

/* 5) RÉSZEK: hover körvonal MINDEN kártyán + bekarikázós effekt (ne csak watched-nál) */
@property --aa-ep-ring {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.episode-card:hover{
  border-color: rgba(255,77,77,.55) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.30) !important;
}
.episode-card::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  opacity: 0;
  pointer-events: none;
  background:
    conic-gradient(from -90deg,
      rgba(255,77,77,.95) 0deg,
      rgba(255,77,77,.95) var(--aa-ep-ring),
      rgba(255,77,77,0) var(--aa-ep-ring),
      rgba(255,77,77,0) 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.episode-card:hover::after{
  opacity: 1;
  animation: aaEpCircle .58s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes aaEpCircle{
  from{ --aa-ep-ring: 0deg; }
  to{ --aa-ep-ring: 360deg; }
}

/* 6) PLAYER: gombok sokkal kisebbek + hover ne kapjon fehér layert */
.video-controls{
  padding: .85rem 1.1rem !important;
}
.video-btn{
  min-height: 34px !important;
  padding: .48rem .85rem !important;
  border-radius: 10px !important;
  font-size: .82rem !important;
  gap: .45rem !important;
  min-width: 140px !important;
}
.video-btn i{ font-size: .95em !important; }
.video-btn:hover{
  background: rgba(30,30,30,.65) !important; /* fix: ne világosodjon */
}
.video-btn.btn-primary{
  background: rgba(255,77,77,1) !important;
}
.video-btn.btn-primary:hover{
  background: rgba(255,77,77,1) !important; /* fix: ne kapjon fehér/light layert */
}
[data-theme="light"] .video-btn,
[data-theme="light"] .video-btn:hover{
  background: rgba(30,30,30,.65) !important;
  color: #fff !important;
}
[data-theme="light"] .video-btn.btn-primary,
[data-theme="light"] .video-btn.btn-primary:hover{
  background: rgba(255,77,77,1) !important;
  color: #fff !important;
}


/* ===== STYLE BLOCK 3 ===== */
/* ===== V10 hotfix (csak a kért dolgok) ===== */

/* Fejléc: átlátszóbb réteg + blur 2 */
.navbar, header.navbar, nav.navbar{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar.scrolled, header.navbar.scrolled, nav.navbar.scrolled,
body .navbar.scrolled, body header.navbar.scrolled, body nav.navbar.scrolled{
  background: rgba(0,0,0,.18) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}

/* 2. háttér: ne legyen blur + legyen gyorsabb */
body::before{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body{
  background-attachment: scroll !important;
}
.episodes-section::before{
  background-attachment: scroll !important;
  transform: none !important;
}

/* Player modal: biztosan látszódjon */
#videoModal.video-modal{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#videoModal.video-modal.active{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#videoModal.video-modal.active.closing{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Infók: MAL legyen élénk piros, mint a Yogani */
#metaCols .links-wrap .links-main a[href*="myanimelist"]{
  color: var(--primary) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* Rés hover: ne kapjon extra körvonalat, csak a bekarikázós animáció maradjon */
.episode-card:hover,
.episode-card.watched:hover{
  border-color: rgba(255,255,255,.06) !important;
}


/* ===== STYLE BLOCK 4 ===== */
/* ===== PATCH v11 (csak a kért módosítások) ===== */

/* 1) FEJLÉC: picit sötétebb háttér, alul csík OFF, blur marad 2 */
.navbar, header.navbar, nav.navbar{
  background: rgba(0,0,0,.28) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.navbar::before, .navbar::after,
header.navbar::before, header.navbar::after,
nav.navbar::before, nav.navbar::after{
  content: none !important;
  display: none !important;
}
.navbar.scrolled, header.navbar.scrolled, nav.navbar.scrolled{
  background: rgba(0,0,0,.36) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* 2) INFÓK: meta box méret vissza */
.meta-panel{
  width: min(980px, 100%) !important;
}

/* 3) ÉVAD GOMBOK: ring anim + hover fehér layer OFF */
.season-tab{
  position: relative !important; /* ring svg miatt */
}
.season-tab:hover{
  background: rgba(38,38,38,.75) !important;
  box-shadow: none !important;
}
.season-tab.active:hover{
  background: var(--primary) !important;
}

/* 4) RÉSZKÁRTYA: csak 1 ring (a conic/pseudo OFF), és ne kapjon instant outline-t */
.episode-card::after{ content: none !important; }
.episode-card:hover{
  border-color: rgba(255,255,255,.05) !important; /* marad az alap */
}

/* 5) WATCHED: ne a teljes kártyát halványítsuk (különben a piros ring is halvány) */
.episode-card.watched{
  opacity: 1 !important;
  filter: none !important;
}
.episode-card.watched .episode-poster img{
  filter: brightness(.78) saturate(.90) !important;
}
.episode-card.watched .episode-info{
  opacity: .88 !important;
}

/* 6) PLAYER: X gomb alak egyezzen (kör), Köszönöm gomb piros glow, username piros */
.close-video-btn{
  border-radius: 999px !important;
}
#thankEpisodeBtn{
  box-shadow: 0 6px 20px rgba(255,77,77,.35) !important;
}
#thankEpisodeBtn:hover{
  box-shadow: 0 8px 26px rgba(255,77,77,.45) !important;
}
.video-staffline .aa-username{
  color: var(--primary) !important;
  font-weight: 900 !important;
}


/* === FIX: a modal overlay mellett maga a player tartalom is legyen látható === */
#videoModal.video-modal .video-modal-content{
  opacity: 0;
  transform: translateY(14px) scale(.985);
}
#videoModal.video-modal.active .video-modal-content{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
#videoModal.video-modal.active.closing .video-modal-content{
  opacity: 0 !important;
  transform: translateY(10px) scale(.985) !important;
}


/* === PERFORMANCE ONLY: kinézet és funkció változtatása nélkül === */
.bg-media,
.episode-card,
.video-modal-content,
.video-player iframe{
  backface-visibility: hidden;
  transform: translateZ(0);
}

.episodes-section{
  content-visibility: auto;
  contain-intrinsic-size: 1px 1200px;
}

.episodes-grid{
  contain: layout paint;
}

.episode-card{
  contain: layout paint;
}

.video-modal-content,
.video-player{
  contain: layout paint;
}


/* === PLAYER PERF FIX: YouTube embed kikapcsolva, csak fekete placeholder marad === */
.video-player{
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important;
}
.video-placeholder{
  position: absolute;
  inset: 0;
  display: block;
  background: #000;
  z-index: 2;
}
.video-placeholder::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0) 32%, rgba(255,255,255,.015) 100%);
  pointer-events: none;
}
#videoPlayerIframe{
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}


/* ===== FINAL PATCH v2 (user-requested) ===== */

/* Hero background image -> autoplay muted looping trailer */
.bg-media.trailer-bg{
  overflow: hidden;
  background: #000;
}
.bg-media.trailer-bg .trailer-fallback{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-media.trailer-bg .hero-trailer-frame{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  border: 0;
  transform: translate(-50%, -50%) scale(1.04);
  pointer-events: none;
  filter: saturate(1.08) contrast(1.02);
  opacity: 1;
}

/* Yonagi link should match MAL red */
.fansub-link-inline,
.project-note a,
.video-project-note a{
  color: var(--primary) !important;
  font-weight: 800 !important;
}
.fansub-link-inline:hover,
.project-note a:hover,
.video-project-note a:hover{
  color: var(--primary-light) !important;
}

/* Description with fixed expand button */
.desc-box{
  position: relative;
  width: min(820px, 100%);
  margin-bottom: .9rem;
}
.desc-box .adatlap-desc{
  margin-bottom: 0 !important;
  padding-right: 2.8rem !important;
}
.desc-expand-btn{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,77,77,.95);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 8px 22px rgba(255,77,77,.26);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.desc-expand-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(255,77,77,.34);
  background: rgba(255,77,77,1);
}
.desc-expand-btn i{
  font-size: .8rem;
  line-height: 1;
}
.desc-modal{
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,.72);
}
.desc-modal.active{
  display: flex;
}
.desc-modal-content{
  position: relative;
  width: min(780px, 100%);
  max-height: min(80vh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(18,18,18,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.desc-modal-title{
  padding: 1.1rem 1.3rem .85rem;
  font-size: 1.15rem;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.desc-modal-body{
  padding: 1.15rem 1.3rem 1.3rem;
  overflow: auto;
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: .98rem;
}
.desc-modal-body::-webkit-scrollbar{ width: 10px; }
.desc-modal-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.desc-modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.desc-modal-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

/* Episode hover idea B: outline + glow + soft light, no buggy circle animation */
.episode-card::after{
  content: none !important;
  display: none !important;
}
.episode-card{
  transition:
    transform .3s cubic-bezier(.25,.8,.25,1),
    box-shadow .3s cubic-bezier(.25,.8,.25,1),
    border-color .3s cubic-bezier(.25,.8,.25,1),
    background-color .3s cubic-bezier(.25,.8,.25,1) !important;
}
.episode-poster{
  overflow: hidden;
}
.episode-poster img{
  transition:
    transform .3s cubic-bezier(.25,.8,.25,1),
    filter .3s cubic-bezier(.25,.8,.25,1) !important;
  transform-origin: center center;
}
.episode-card:hover,
.episode-card.active-pulse{
  transform: translateY(-4px) scale(1.02) !important;
  border-color: rgba(255,77,77,.58) !important;
  background:
    linear-gradient(180deg, rgba(255,77,77,.06) 0%, rgba(38,38,38,.35) 100%) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,77,77,.18),
    0 0 28px rgba(255,77,77,.10) !important;
  filter: none !important;
  animation: none !important;
}
.episode-card:hover .episode-poster img,
.episode-card.active-pulse .episode-poster img{
  transform: scale(1.02) !important;
}
.episode-card.watched:hover{
  filter: none !important;
}
.episode-card.watched:hover .episode-poster img{
  filter: brightness(.78) saturate(.90) !important;
}
.episode-card.watched:hover .episode-info{
  opacity: .88 !important;
}

@media (max-width: 720px){
  .desc-modal{
    padding: 1rem;
  }
  .desc-modal-content{
    width: 100%;
    max-height: 85vh;
  }
}


/* ===== FINAL PATCH v3 (bugfix + perf) ===== */
html{ scrollbar-gutter: stable both-edges; }
body{ scrollbar-gutter: stable both-edges; }

.navbar, header.navbar, nav.navbar{
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar.scrolled, header.navbar.scrolled, nav.navbar.scrolled,
body .navbar.scrolled, body header.navbar.scrolled, body nav.navbar.scrolled{
  background: rgba(0,0,0,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.bg-media.trailer-bg{
  overflow: hidden;
  contain: layout paint style;
  isolation: isolate;
  transform: translateZ(0) scale(1.04);
}
.bg-media.trailer-bg .hero-trailer-frame{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate(-50%, -50%) scale(1.04) translateZ(0);
}
.episodes-section::before{
  background-attachment: scroll !important;
}

#videoPlayerIframe{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#videoModal.video-modal{
  background: rgba(0,0,0,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#videoModal.video-modal .video-modal-content{
  transform: translate3d(0,14px,0) scale(.985);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}
#videoModal.video-modal.active .video-modal-content{
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}
#videoModal.video-modal.active.closing .video-modal-content{
  transform: translate3d(0,8px,0) scale(.985);
  opacity: 0;
}

.desc-box{ position: relative; }
.desc-box .adatlap-desc{
  margin-bottom: 0 !important;
  padding-right: 2rem !important;
  padding-bottom: 1rem !important;
}
.desc-expand-btn{
  right: 12px !important;
  bottom: 8px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.desc-expand-btn:hover{
  transform: translateY(-1px) scale(1.04) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--primary-light) !important;
}
.desc-expand-btn i{ font-size: .9rem !important; }

.desc-modal{
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0,0,0,.20) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.desc-modal.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease;
}
.desc-modal-content{
  background: rgba(24,24,24,.56) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transform: translate3d(0,18px,0) scale(.975);
  opacity: 0;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .24s ease;
}
.desc-modal.active .desc-modal-content{
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}

.fansub-link-inline,
.project-note .fansub-link-inline,
.video-project-note .fansub-link-inline,
.meta-v a.fansub-link{
  color: var(--primary) !important;
  font-weight: 800 !important;
}

.episode-card::after,
.episode-card .aa-ring-svg{
  content: none !important;
  display: none !important;
}
.episode-card{
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition:
    transform .28s cubic-bezier(.25,.8,.25,1),
    box-shadow .28s cubic-bezier(.25,.8,.25,1),
    border-color .28s cubic-bezier(.25,.8,.25,1),
    background-color .28s cubic-bezier(.25,.8,.25,1) !important;
}
.episode-poster{ overflow: hidden; }
.episode-poster img{
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .28s cubic-bezier(.25,.8,.25,1), filter .28s cubic-bezier(.25,.8,.25,1) !important;
}
.episode-card:hover,
.episode-card.active-pulse{
  transform: translateY(-4px) scale(1.02) !important;
  border-color: rgba(255,77,77,.58) !important;
  background: linear-gradient(180deg, rgba(255,77,77,.06) 0%, rgba(38,38,38,.35) 100%) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.30), 0 0 0 1px rgba(255,77,77,.18), 0 0 24px rgba(255,77,77,.10) !important;
  filter: none !important;
  animation: none !important;
}
.episode-card:hover .episode-poster img,
.episode-card.active-pulse .episode-poster img{
  transform: scale(1.02) !important;
}
.episode-card.watched{
  opacity: 1 !important;
  filter: none !important;
}
.episode-card.watched .episode-poster img{
  filter: brightness(.78) saturate(.90) !important;
}
.episode-card.watched .episode-info{
  opacity: .88 !important;
}
.episode-card.watched:hover{
  filter: none !important;
}
.episode-card.watched:hover .episode-poster img{
  filter: brightness(.78) saturate(.90) !important;
}
.episode-card.watched:hover .episode-info{
  opacity: .88 !important;
}


/* ===== USER PATCH 2026-04-17 (only requested changes) ===== */

/* 1) Navbar: top fully transparent, on scroll only a lighter black layer + blur(5px) */
.navbar,
header.navbar,
nav.navbar,
body .navbar,
body header.navbar,
body nav.navbar{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar.scrolled,
header.navbar.scrolled,
nav.navbar.scrolled,
body .navbar.scrolled,
body header.navbar.scrolled,
body nav.navbar.scrolled{
  background: rgba(0,0,0,.30) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* 2) Ring path: exact start/end point, so reverse animation stops cleanly */
.aa-ring-path{
  stroke-dashoffset: var(--aa-ring-len, 9999);
}

/* 3) Continue / Thanks / Admin: remove ring only from these three buttons */
#continueBtn.aa-ring-target,
#thanksBtn.aa-ring-target,
#adminBtn.aa-ring-target{
  --aa-ring-len: 0;
}
#continueBtn .aa-ring-svg,
#thanksBtn .aa-ring-svg,
#adminBtn .aa-ring-svg{
  display: none !important;
}

/* 4) Simple hover/press animation for the three left buttons */
#continueBtn,
#thanksBtn,
#adminBtn{
  transition:
    transform .22s cubic-bezier(.2,.9,.2,1),
    box-shadow .22s cubic-bezier(.2,.9,.2,1),
    filter .22s cubic-bezier(.2,.9,.2,1),
    background .22s cubic-bezier(.2,.9,.2,1),
    border-color .22s cubic-bezier(.2,.9,.2,1) !important;
  will-change: transform, box-shadow, filter;
}
#continueBtn:hover,
#thanksBtn:hover,
#adminBtn:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.02) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 12px 28px rgba(0,0,0,.24),
    0 0 18px rgba(255,77,77,.10) !important;
}
#continueBtn:active,
#thanksBtn:active,
#adminBtn:active{
  transform: translateY(0) scale(.985) !important;
  filter: brightness(.99) saturate(1) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 16px rgba(0,0,0,.18),
    0 0 10px rgba(255,77,77,.08) !important;
}


/* ===== FINAL PATCH v5 (requested bugfixes only) ===== */

/* 1) Navbar scroll blur: half of previous */
.navbar.scrolled,
header.navbar.scrolled,
nav.navbar.scrolled,
body .navbar.scrolled,
body header.navbar.scrolled,
body nav.navbar.scrolled{
  background: rgba(0,0,0,.30) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(2.5px) !important;
  -webkit-backdrop-filter: blur(2.5px) !important;
}

/* 2) Shared interaction surface for left buttons + bell + profile */
#continueBtn,
#thanksBtn,
#adminBtn,
.user-menu .btn.btn-accent.btn-icon,
.user-avatar,
.desc-expand-btn{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

#continueBtn > *,
#thanksBtn > *,
#adminBtn > *,
.user-menu .btn.btn-accent.btn-icon > *,
.user-avatar > *,
.desc-expand-btn > *{
  position: relative;
  z-index: 1;
}

#continueBtn::before,
#thanksBtn::before,
#adminBtn::before,
.user-menu .btn.btn-accent.btn-icon::before,
.user-avatar::before,
.desc-expand-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255,255,255,0);
  transition:
    background .22s cubic-bezier(.2,.9,.2,1),
    opacity .22s cubic-bezier(.2,.9,.2,1);
}

/* 3) Left buttons: glow direction fixed + white layer + press */
#continueBtn,
#thanksBtn,
#adminBtn{
  transform: translateY(0) scale(1) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.18),
    0 0 0 rgba(255,77,77,0) !important;
}

#continueBtn:hover,
#thanksBtn:hover,
#adminBtn:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.02) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 12px 28px rgba(0,0,0,.24),
    0 0 18px rgba(255,77,77,.12) !important;
}

#continueBtn:hover::before,
#thanksBtn:hover::before,
#adminBtn:hover::before{
  background: rgba(255,255,255,.07) !important;
}

#continueBtn:active,
#thanksBtn:active,
#adminBtn:active{
  transform: translateY(0) scale(.985) !important;
  filter: brightness(.99) saturate(1) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 16px rgba(0,0,0,.18),
    0 0 10px rgba(255,77,77,.08) !important;
}

#continueBtn:active::before,
#thanksBtn:active::before,
#adminBtn:active::before{
  background: rgba(255,255,255,.04) !important;
}

/* 4) Bell + profile: same effects as left buttons, ring stays */
.user-menu .btn.btn-accent.btn-icon,
.user-avatar{
  transform: translateY(0) scale(1) !important;
  filter: none !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 16px rgba(0,0,0,.16),
    0 0 0 rgba(255,77,77,0) !important;
}

.user-menu .btn.btn-accent.btn-icon:hover,
.user-avatar:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.02) !important;
  color: var(--text) !important;
  background-color: var(--dark-tertiary) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 12px 24px rgba(0,0,0,.22),
    0 0 18px rgba(255,77,77,.12) !important;
}

.user-menu .btn.btn-accent.btn-icon:hover::before,
.user-avatar:hover::before{
  background: rgba(255,255,255,.07) !important;
}

.user-menu .btn.btn-accent.btn-icon:active,
.user-avatar:active{
  transform: translateY(0) scale(.97) !important;
  filter: brightness(.99) saturate(1) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 14px rgba(0,0,0,.16),
    0 0 10px rgba(255,77,77,.08) !important;
}

.user-menu .btn.btn-accent.btn-icon:active::before,
.user-avatar:active::before{
  background: rgba(255,255,255,.04) !important;
}

/* 5) Description expand button: lower + a bit left, no grow on hover */
.desc-box{
  position: relative !important;
}
.desc-box .adatlap-desc{
  padding-right: 2.2rem !important;
  padding-bottom: 1rem !important;
}
.desc-expand-btn{
  right: 18px !important;
  bottom: 2px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--primary) !important;
}

.desc-expand-btn:hover{
  transform: none !important;
  color: var(--primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.desc-expand-btn:hover::before{
  background: rgba(255,255,255,.08) !important;
}

.desc-expand-btn:active{
  transform: none !important;
  box-shadow: none !important;
}

.desc-expand-btn:active::before{
  background: rgba(255,255,255,.05) !important;
}

/* 6) Description popup: outside no blur, inside a small blur */
.desc-modal{
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0,0,0,.26) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity .22s ease, visibility 0s linear .22s !important;
}

.desc-modal.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease !important;
}

.desc-modal-content{
  background: rgba(20,20,20,.68) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transform: translate3d(0,18px,0) scale(.975);
  opacity: 0;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .24s ease !important;
}

.desc-modal.active .desc-modal-content{
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}

/* 7) Description modal close button keeps current shape and gets ring in JS */
#descModalClose{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
#descModalClose > *{
  position: relative;
  z-index: 1;
}



/* ===== FINAL PATCH v6 (requested bugfixes only) ===== */

/* Navbar: blur smaller */
.navbar.scrolled,
header.navbar.scrolled,
nav.navbar.scrolled,
body .navbar.scrolled,
body header.navbar.scrolled,
body nav.navbar.scrolled{
  background: rgba(0,0,0,.30) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(2.5px) !important;
  -webkit-backdrop-filter: blur(2.5px) !important;
}

/* Left three buttons: clean base + stronger hover + white layer */
#continueBtn,
#thanksBtn,
#adminBtn{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    transform .22s cubic-bezier(.2,.9,.2,1),
    box-shadow .22s cubic-bezier(.2,.9,.2,1),
    filter .22s cubic-bezier(.2,.9,.2,1),
    border-color .22s cubic-bezier(.2,.9,.2,1),
    background .22s cubic-bezier(.2,.9,.2,1) !important;
  transform: translateY(0) scale(1) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.18),
    0 0 0 rgba(255,77,77,0) !important;
}
#continueBtn > *,
#thanksBtn > *,
#adminBtn > *{
  position: relative;
  z-index: 1;
}
#continueBtn::before,
#thanksBtn::before,
#adminBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,0);
  transition: background .22s cubic-bezier(.2,.9,.2,1);
  z-index: 0;
}
#continueBtn:hover,
#thanksBtn:hover,
#adminBtn:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.05) saturate(1.03) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 28px rgba(0,0,0,.24),
    0 0 18px rgba(255,77,77,.14) !important;
}
#continueBtn:hover::before,
#thanksBtn:hover::before,
#adminBtn:hover::before{
  background: rgba(255,255,255,.09) !important;
}
#continueBtn:active,
#thanksBtn:active,
#adminBtn:active{
  transform: translateY(0) scale(.985) !important;
  filter: brightness(.99) saturate(1) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.11),
    0 6px 16px rgba(0,0,0,.18),
    0 0 10px rgba(255,77,77,.08) !important;
}
#continueBtn:active::before,
#thanksBtn:active::before,
#adminBtn:active::before{
  background: rgba(255,255,255,.05) !important;
}

/* Bell + profile: same effects, but keep ring */
.user-menu{
  display: flex !important;
  align-items: center !important;
  gap: .8rem !important;
}
.user-menu .btn.btn-accent.btn-icon,
.user-avatar{
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(38,38,38,.88) !important;
  color: var(--text) !important;
  transform: translateY(0) scale(1) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.18),
    0 0 0 rgba(255,77,77,0) !important;
}
.user-menu .btn.btn-accent.btn-icon > *,
.user-avatar > *{
  position: relative !important;
  z-index: 1 !important;
}
.user-menu .btn.btn-accent.btn-icon::before,
.user-avatar::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,0);
  transition: background .22s cubic-bezier(.2,.9,.2,1);
  z-index: 0;
}
.user-menu .btn.btn-accent.btn-icon:hover,
.user-avatar:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.05) saturate(1.03) !important;
  background: rgba(38,38,38,.96) !important;
  color: var(--text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 26px rgba(0,0,0,.22),
    0 0 18px rgba(255,77,77,.12) !important;
}
.user-menu .btn.btn-accent.btn-icon:hover::before,
.user-avatar:hover::before{
  background: rgba(255,255,255,.09) !important;
}
.user-menu .btn.btn-accent.btn-icon:active,
.user-avatar:active{
  transform: translateY(0) scale(.97) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 14px rgba(0,0,0,.16),
    0 0 10px rgba(255,77,77,.08) !important;
}
.user-menu .btn.btn-accent.btn-icon:active::before,
.user-avatar:active::before{
  background: rgba(255,255,255,.05) !important;
}
.user-menu .btn.btn-accent.btn-icon i,
.user-avatar i{
  font-size: 1rem !important;
  line-height: 1 !important;
  color: inherit !important;
}
.user-avatar:hover{ border-color: rgba(255,255,255,.14) !important; }

/* Description button: right side, aligned with scrollbar bottom, slightly left from track */
.desc-box{
  position: relative !important;
}
.desc-box .adatlap-desc{
  padding-right: 2.8rem !important;
  padding-bottom: 1rem !important;
}
.desc-expand-btn{
  position: absolute !important;
  right: 14px !important;
  left: auto !important;
  bottom: 10px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: var(--primary) !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.desc-expand-btn > *{
  position: relative !important;
  z-index: 1 !important;
}
.desc-expand-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,0);
  transition: background .18s ease;
  z-index: 0;
}
.desc-expand-btn:hover,
.desc-expand-btn:active{
  transform: none !important;
  background: transparent !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
.desc-expand-btn:hover::before{
  background: rgba(255,255,255,.08) !important;
}
.desc-expand-btn:active::before{
  background: rgba(255,255,255,.05) !important;
}

/* Description modal: full-page dark layer outside, only small blur inside */
.desc-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0,0,0,.54) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity .22s ease, visibility 0s linear .22s !important;
}
.desc-modal.active{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .22s ease !important;
}
.desc-modal-content{
  position: relative !important;
  width: min(780px, 100%) !important;
  max-height: min(80vh, 860px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(18,18,18,.76) !important;
  backdrop-filter: blur(2.5px) !important;
  -webkit-backdrop-filter: blur(2.5px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.42) !important;
  transform: translate3d(0,14px,0) scale(.98) !important;
  opacity: 0;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .24s ease !important;
}
.desc-modal.active .desc-modal-content{
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}
.desc-modal-title{
  padding: 1.1rem 1.3rem .85rem !important;
  padding-right: 4.2rem !important;
}
#descModalClose,
.desc-modal-close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: none !important;
}
#descModalClose > *,
.desc-modal-close > *{
  position: relative !important;
  z-index: 1 !important;
  line-height: 1 !important;
}
#descModalClose:hover,
.desc-modal-close:hover{
  transform: none !important;
  background: rgba(255,255,255,.10) !important;
}

/* === FINAL V4 FIXES: requested alignment + modal + nav/icon stabilization === */

/* Navbar scroll blur lighter */
.navbar.scrolled,
header.navbar.scrolled,
nav.navbar.scrolled,
body .navbar.scrolled,
body header.navbar.scrolled,
body nav.navbar.scrolled{
  background: rgba(0,0,0,.30) !important;
  background-color: rgba(0,0,0,.30) !important;
  backdrop-filter: blur(2.5px) !important;
  -webkit-backdrop-filter: blur(2.5px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

/* Left action buttons: soft neon lift + very light sweep shine */
#continueBtn,
#thanksBtn,
#adminBtn{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
#continueBtn::after,
#thanksBtn::after,
#adminBtn::after{
  content: "";
  position: absolute;
  inset: -18% auto -18% -38%;
  width: 34%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.06) 60%, rgba(255,255,255,0) 100%);
  transition: opacity .14s ease;
}
#continueBtn:hover::after,
#thanksBtn:hover::after,
#adminBtn:hover::after{
  opacity: 1;
  animation: aaBtnSweep .72s cubic-bezier(.2,.9,.2,1) 1;
}
#continueBtn:active::after,
#thanksBtn:active::after,
#adminBtn:active::after{
  opacity: .72;
}
@keyframes aaBtnSweep{
  from{ transform: translateX(-140%) skewX(-18deg); }
  to{ transform: translateX(420%) skewX(-18deg); }
}

/* Header icons: force stable size + centering, keep ring and shared hover effects */
.user-menu{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .8rem !important;
}
.user-menu .btn.btn-accent.btn-icon,
.user-avatar{
  position: relative !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  align-self: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(38,38,38,.84) !important;
  color: var(--text) !important;
  transform: translateY(0) scale(1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.18),
    0 0 0 rgba(255,77,77,0) !important;
}
.user-menu .btn.btn-accent.btn-icon > i,
.user-avatar > i{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transform: none !important;
  color: inherit !important;
}
.user-menu .btn.btn-accent.btn-icon::before,
.user-avatar::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255,255,255,0);
  transition: background .22s cubic-bezier(.2,.9,.2,1);
}
.user-menu .btn.btn-accent.btn-icon:hover,
.user-avatar:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.05) saturate(1.03) !important;
  background: rgba(38,38,38,.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 26px rgba(0,0,0,.22),
    0 0 18px rgba(255,77,77,.12) !important;
}
.user-menu .btn.btn-accent.btn-icon:hover::before,
.user-avatar:hover::before{
  background: rgba(255,255,255,.09) !important;
}
.user-menu .btn.btn-accent.btn-icon:active,
.user-avatar:active{
  transform: translateY(0) scale(.97) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 14px rgba(0,0,0,.16),
    0 0 10px rgba(255,77,77,.08) !important;
}
.user-menu .btn.btn-accent.btn-icon:active::before,
.user-avatar:active::before{
  background: rgba(255,255,255,.05) !important;
}
.user-menu .btn.btn-accent.btn-icon .aa-ring-svg,
.user-avatar .aa-ring-svg{
  inset: 1px !important;
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px) !important;
}

/* Description expand button: on the right, bottom aligned with scrollbar end, slightly left from track */
.desc-box{
  position: relative !important;
}
.desc-box .adatlap-desc{
  padding-right: 2.95rem !important;
  padding-bottom: .2rem !important;
}
.desc-expand-btn{
  position: absolute !important;
  left: auto !important;
  right: 18px !important;
  bottom: 2px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: var(--primary) !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 3 !important;
}
.desc-expand-btn > *{
  position: relative !important;
  z-index: 1 !important;
  font-size: .9rem !important;
  line-height: 1 !important;
}
.desc-expand-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255,255,255,0);
  transition: background .18s ease;
}
.desc-expand-btn:hover,
.desc-expand-btn:active{
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.desc-expand-btn:hover::before{
  background: rgba(255,255,255,.08) !important;
}
.desc-expand-btn:active::before{
  background: rgba(255,255,255,.05) !important;
}

/* Description modal: full-page black layer outside, subtle inner blur only */
.desc-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity .22s ease, visibility 0s linear .22s !important;
}
.desc-modal.active{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .22s ease !important;
}
.desc-modal-content{
  position: relative !important;
  width: min(780px, 100%) !important;
  max-height: min(80vh, 860px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: rgba(16,16,16,.68) !important;
  backdrop-filter: blur(2.5px) !important;
  -webkit-backdrop-filter: blur(2.5px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.42) !important;
  transform: translate3d(0,12px,0) scale(.985) !important;
  opacity: 0 !important;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .24s ease !important;
}
.desc-modal.active .desc-modal-content{
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}
.desc-modal-title{
  padding: 1.1rem 1.3rem .85rem !important;
  padding-right: 4.1rem !important;
  color: var(--primary) !important;
}
#descModalClose,
.desc-modal-close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 6 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  line-height: 1 !important;
  transform: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
#descModalClose > *,
.desc-modal-close > *{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: inherit !important;
}
#descModalClose:hover,
.desc-modal-close:hover{
  transform: none !important;
  background: rgba(255,255,255,.10) !important;
}
#descModalClose .aa-ring-svg,
.desc-modal-close .aa-ring-svg{
  inset: 1px !important;
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px) !important;
}

/* Body lock without layout jump */
body.modal-open{
  width: 100% !important;
}


/* ===== FINAL PATCH v5 (requested-only microfixes) ===== */

/* Left three buttons: remove sweep/slide shine, keep the rest */
#continueBtn::after,
#thanksBtn::after,
#adminBtn::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Top-right header icons: hard reset to prevent drift / misalignment */
.user-menu{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .8rem !important;
}
.user-menu .btn.btn-accent.btn-icon,
.user-avatar{
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.user-menu .btn.btn-accent.btn-icon > i,
.user-avatar > i{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  transform: none !important;
  text-align: center !important;
}
.user-menu .btn.btn-accent.btn-icon .aa-ring-svg,
.user-avatar .aa-ring-svg{
  position: absolute !important;
  inset: 1px !important;
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px) !important;
}

/* Description expand button: move slightly lower, keep 8px left from scrollbar area */
.desc-box .adatlap-desc{
  padding-right: 4.4rem !important;
  padding-bottom: .4rem !important;
}
.desc-expand-btn{
  left: auto !important;
  right: 28px !important;
  top: auto !important;
  bottom: 8px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

/* Description modal close button: lock it to the top-right corner cleanly */
#descModalClose,
.desc-modal-close{
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 8 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}
#descModalClose > i,
.desc-modal-close > i{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  transform: none !important;
}
#descModalClose .aa-ring-svg,
.desc-modal-close .aa-ring-svg{
  position: absolute !important;
  inset: 1px !important;
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px) !important;
}


/* ===== FINAL PATCH v6 (requested-only) ===== */

/* Only the search keeps the ring. Hide any leftover rings elsewhere just in case. */
#continueBtn .aa-ring-svg,
#thanksBtn .aa-ring-svg,
#adminBtn .aa-ring-svg,
.user-menu .btn.btn-accent.btn-icon .aa-ring-svg,
.user-avatar .aa-ring-svg,
#closeVideoBtn .aa-ring-svg,
.video-btn .aa-ring-svg,
.season-tab .aa-ring-svg,
#descExpandBtn .aa-ring-svg,
.desc-expand-btn .aa-ring-svg,
#descModalClose .aa-ring-svg,
.desc-modal-close .aa-ring-svg{
  display: none !important;
}

/* Shared button behavior: same vibe as the left three buttons, no ring, no sweep */
#continueBtn,
#thanksBtn,
#adminBtn,
.user-menu .btn.btn-accent.btn-icon,
.user-avatar,
#closeVideoBtn,
.video-btn,
.season-tab,
#descExpandBtn,
.desc-expand-btn,
#descModalClose,
.desc-modal-close{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    transform .22s cubic-bezier(.2,.9,.2,1),
    box-shadow .22s cubic-bezier(.2,.9,.2,1),
    filter .22s cubic-bezier(.2,.9,.2,1),
    border-color .22s cubic-bezier(.2,.9,.2,1),
    background .22s cubic-bezier(.2,.9,.2,1) !important;
  transform: translateY(0) scale(1) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.18),
    0 0 0 rgba(255,77,77,0) !important;
}
#continueBtn > *,
#thanksBtn > *,
#adminBtn > *,
.user-menu .btn.btn-accent.btn-icon > *,
.user-avatar > *,
#closeVideoBtn > *,
.video-btn > *,
.season-tab > *,
#descExpandBtn > *,
.desc-expand-btn > *,
#descModalClose > *,
.desc-modal-close > *{
  position: relative !important;
  z-index: 1 !important;
}
#continueBtn::before,
#thanksBtn::before,
#adminBtn::before,
.user-menu .btn.btn-accent.btn-icon::before,
.user-avatar::before,
#closeVideoBtn::before,
.video-btn::before,
.season-tab::before,
#descExpandBtn::before,
.desc-expand-btn::before,
#descModalClose::before,
.desc-modal-close::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,0);
  transition: background .22s cubic-bezier(.2,.9,.2,1);
  z-index: 0;
}
#continueBtn:hover,
#thanksBtn:hover,
#adminBtn:hover,
.user-menu .btn.btn-accent.btn-icon:hover,
.user-avatar:hover,
#closeVideoBtn:hover,
.video-btn:hover,
.season-tab:hover,
#descExpandBtn:hover,
.desc-expand-btn:hover,
#descModalClose:hover,
.desc-modal-close:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.05) saturate(1.03) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 28px rgba(0,0,0,.24),
    0 0 18px rgba(255,77,77,.14) !important;
}
#continueBtn:hover::before,
#thanksBtn:hover::before,
#adminBtn:hover::before,
.user-menu .btn.btn-accent.btn-icon:hover::before,
.user-avatar:hover::before,
#closeVideoBtn:hover::before,
.video-btn:hover::before,
.season-tab:hover::before,
#descExpandBtn:hover::before,
.desc-expand-btn:hover::before,
#descModalClose:hover::before,
.desc-modal-close:hover::before{
  background: rgba(255,255,255,.09) !important;
}
#continueBtn:active,
#thanksBtn:active,
#adminBtn:active,
.user-menu .btn.btn-accent.btn-icon:active,
.user-avatar:active,
#closeVideoBtn:active,
.video-btn:active,
.season-tab:active,
#descExpandBtn:active,
.desc-expand-btn:active,
#descModalClose:active,
.desc-modal-close:active{
  transform: translateY(-50%) scale(.985) !important;
  filter: brightness(.99) saturate(1) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.11),
    0 6px 16px rgba(0,0,0,.18),
    0 0 10px rgba(255,77,77,.08) !important;
}
#continueBtn:active::before,
#thanksBtn:active::before,
#adminBtn:active::before,
.user-menu .btn.btn-accent.btn-icon:active::before,
.user-avatar:active::before,
#closeVideoBtn:active::before,
.video-btn:active::before,
.season-tab:active::before,
#descExpandBtn:active::before,
.desc-expand-btn:active::before,
#descModalClose:active::before,
.desc-modal-close:active::before{
  background: rgba(255,255,255,.05) !important;
}

/* No sweep/slide shine anywhere on the left action buttons */
#continueBtn::after,
#thanksBtn::after,
#adminBtn::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Top-right icons: hard alignment reset */
.user-menu{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .8rem !important;
}
.user-menu .btn.btn-accent.btn-icon,
.user-avatar{
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.user-menu .btn.btn-accent.btn-icon > i,
.user-avatar > i{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  transform: none !important;
}

/* Description expand button: a bit more to the left */
.desc-box .adatlap-desc{
  padding-right: 4.4rem !important;
  padding-bottom: .4rem !important;
}
#descExpandBtn,
.desc-expand-btn{
  left: auto !important;
  right: 28px !important;
  top: auto !important;
  bottom: 8px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

/* Final override: keep description controls in the requested fixed positions */
#descExpandBtn,
.desc-expand-btn{
  position: absolute !important;
  left: auto !important;
  right: 28px !important;
  top: auto !important;
  bottom: -4px !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

#descModalClose,
.desc-modal-close{
  position: absolute !important;
  left: auto !important;
  right: 16px !important;
  top: 16px !important;
  bottom: auto !important;
  transform: none !important;
}

/* ===== USER REQUESTED FINAL FIX PACK ===== */

/* Leiras nagyito gomb: kicsit feljebb, scrollbar vonalaval jobban egy sikban */
.desc-box .adatlap-desc{
  padding-right: 3.9rem !important;
}
#descExpandBtn,
.desc-expand-btn{
  right: 20px !important;
  bottom: 6px !important;
}

/* ===== HOTFIX 2026-04-18: requested micro-adjustments ===== */

/* Leiras nagyito: 2px lejjebb */
#descExpandBtn,
.desc-expand-btn{
  bottom: 4px !important;
}

/* Popup X: biztosan fuggolegesen kozepen legyen */
#descModalClose,
.desc-modal-close,
#closeVideoBtn,
.close-video-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#descModalClose i,
.desc-modal-close i,
#closeVideoBtn i,
.close-video-btn i{
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(0) !important;
}

#descModalClose:active,
.desc-modal-close:active,
#closeVideoBtn:active,
.close-video-btn:active{
  transform: none !important;
}

/* Resz kartya kattintas-visszajelzes */
.episode-card.is-card-clicked{
  transform: translateY(-1px) scale(0.988) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.26),
    0 8px 20px rgba(0,0,0,.20),
    0 0 10px rgba(255,77,77,.10) !important;
}

/* Hover outline clipping fix: legyen tobb belso hely a scroll container szelen */
.episodes-scroll-container{
  padding: 26px 24px 24px !important;
}
.episodes-grid{
  padding: 0 !important;
}

/* Alap hover korvonal: watched es normal kartyan is ugyanaz jelenjen meg */
.episode-card:hover,
.episode-card.watched:hover,
.episode-card.active-pulse,
.episode-card.watched.active-pulse{
  border-color: rgba(255,77,77,.62) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,77,77,.18),
    0 0 24px rgba(255,77,77,.10) !important;
}

/* Watched legyen sotetebb, de hoverkor ne sotetedjen tovabb */
.episode-card.watched{
  filter: brightness(.52) saturate(.86) !important;
  opacity: 1 !important;
}
.episode-card.watched:hover,
.episode-card.watched.active-pulse{
  filter: brightness(.52) saturate(.86) !important;
}

/* Reszkartya lenyomas effekt, mint a bal oldali gomboknal */
.episode-card:active,
.episode-card.watched:active{
  transform: translateY(0) scale(.975) !important;
  filter: brightness(.97) saturate(1) !important;
  border-color: rgba(255,77,77,.70) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 14px rgba(0,0,0,.20),
    0 0 10px rgba(255,77,77,.10) !important;
  z-index: 5 !important;
}

/* Player modal: ugyanaz az animacio es layer erzet, mint a leiras kinagyitasnal */
#videoModal.video-modal{
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity .22s ease, visibility 0s linear .22s !important;
}
#videoModal.video-modal .video-modal-content{
  transform: translate3d(0,14px,0) scale(.98) !important;
  opacity: 0 !important;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .24s ease !important;
}
#videoModal.video-modal.active .video-modal-content{
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}
#videoModal.video-modal.active.closing .video-modal-content{
  transform: translate3d(0,14px,0) scale(.98) !important;
  opacity: 0 !important;
}

/* ===== FINAL WINNING OVERRIDES 2026-04-18 ===== */

/* Revert broken active transforms on regular buttons */
#continueBtn:active,
#thanksBtn:active,
#adminBtn:active,
.video-btn:active,
.season-tab:active,
#descExpandBtn:active,
.desc-expand-btn:active,
.user-menu .btn.btn-accent.btn-icon:active,
.user-avatar:active{
  transform: translateY(0) scale(.985) !important;
}

/* Close buttons: no hover/active shift */
#closeVideoBtn,
#descModalClose,
.desc-modal-close,
.close-video-btn,
#closeVideoBtn:hover,
#descModalClose:hover,
.desc-modal-close:hover,
.close-video-btn:hover,
#closeVideoBtn:active,
#descModalClose:active,
.desc-modal-close:active,
.close-video-btn:active{
  transform: none !important;
}

/* Close tap animation should be scale-only */
#closeVideoBtn.is-close-clicked,
#descModalClose.is-close-clicked,
.desc-modal-close.is-close-clicked,
.close-video-btn.is-close-clicked{
  animation: aaCloseTapFinal .16s cubic-bezier(.2,.9,.2,1) both !important;
}
@keyframes aaCloseTapFinal{
  0% { transform: scale(1); }
  50% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* Description expand button: 1px lower, no grow */
#descExpandBtn,
.desc-expand-btn{
  bottom: -1px !important;
}
#descExpandBtn:hover,
.desc-expand-btn:hover,
#descExpandBtn:active,
.desc-expand-btn:active{
  transform: none !important;
  scale: 1 !important;
}

/* Description modal close button: align button itself correctly */
#descModalClose,
.desc-modal-close{
  top: 16px !important;
  right: 16px !important;
  transform: none !important;
}

/* Episode-card click animation (manual + continue flow): subtle and separate from buttons */
.episode-card.is-card-clicked{
  animation: aaEpisodeCardTapFinal .14s cubic-bezier(.2,.9,.2,1) both !important;
}
@keyframes aaEpisodeCardTapFinal{
  0% { transform: translateY(-2px) scale(1); }
  50% { transform: translateY(-1px) scale(.985); }
  100% { transform: translateY(-2px) scale(1); }
}

/* ===== ROLLBACK FIX PACK 2026-04-18 ===== */

/* Revert generic active transform side effects on normal buttons */
#continueBtn:active,
#thanksBtn:active,
#adminBtn:active,
.video-btn:active,
.season-tab:active,
#descExpandBtn:active,
.desc-expand-btn:active,
.user-menu .btn.btn-accent.btn-icon:active,
.user-avatar:active{
  transform: translateY(0) scale(.985) !important;
}

/* Close buttons: hover/active should not shift vertically */
#closeVideoBtn,
#descModalClose,
.desc-modal-close,
.close-video-btn{
  transform: none !important;
}
#closeVideoBtn:hover,
#descModalClose:hover,
.desc-modal-close:hover,
.close-video-btn:hover{
  transform: none !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}
#closeVideoBtn:active,
#descModalClose:active,
.desc-modal-close:active,
.close-video-btn:active{
  transform: none !important;
}

/* Close-button tap animation: scale-only */
#closeVideoBtn.is-close-clicked,
#descModalClose.is-close-clicked,
.desc-modal-close.is-close-clicked,
.close-video-btn.is-close-clicked{
  animation: aaCloseTapRollback .16s cubic-bezier(.2,.9,.2,1) both !important;
}
@keyframes aaCloseTapRollback{
  0% { transform: scale(1); }
  50% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* Description expand button: exactly 1px lower, without grow animation */
#descExpandBtn,
.desc-expand-btn{
  bottom: -1px !important;
}
#descExpandBtn:hover,
.desc-expand-btn:hover,
#descExpandBtn:active,
.desc-expand-btn:active{
  transform: none !important;
  scale: 1 !important;
}

/* Description modal close button: button itself correctly aligned */
#descModalClose,
.desc-modal-close{
  top: 16px !important;
  right: 16px !important;
  transform: none !important;
}

/* Episode-card click animation: dedicated, subtle, not button-like */
.episode-card.is-card-clicked{
  animation: aaCardTapSoft .14s cubic-bezier(.2,.9,.2,1) both !important;
}
@keyframes aaCardTapSoft{
  0% { transform: translateY(-2px) scale(1); }
  50% { transform: translateY(-1px) scale(.985); }
  100% { transform: translateY(-2px) scale(1); }
}

/* ===== TOP ROW OUTLINE CLIP FIX (final override) ===== */
.episodes-scroll-container{
  padding-top: 56px !important;
}
.episodes-grid{
  padding-top: 10px !important;
}
.episode-card:hover,
.episode-card.watched:hover,
.episode-card.active-pulse,
.episode-card.watched.active-pulse{
  transform: translateY(-2px) scale(1) !important;
}

/* ===== EPISODE CARD TAP ANIMATION ===== */
.episode-card.is-card-clicked{
  animation: aaCardTap .18s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes aaCardTap{
  0% { transform: scale(1); }
  50% { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* ===== DESCRIPTION MODAL CLOSE BUTTON VERTICAL CENTER FIX ===== */
#descModalClose i,
.desc-modal-close i{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* ===== USER REQUEST FIXES 2026-04-18 ===== */

/* 1) Episode card outline clipping at top */
.episodes-scroll-container{
  padding: 42px 30px 30px !important;
}

/* 2) Watched hover should brighten the whole card, not just image */
.episode-card.watched{
  background: rgba(20,20,20,.58) !important;
  filter: brightness(.62) saturate(.90) !important;
}
.episode-card.watched .episode-poster img{
  filter: brightness(.74) saturate(.90) !important;
}
.episode-card.watched .episode-info{
  filter: brightness(.82) !important;
}
.episode-card.watched:hover,
.episode-card.watched.active-pulse{
  background: rgba(28,28,28,.66) !important;
  filter: brightness(.76) saturate(.96) !important;
}
.episode-card.watched:hover .episode-poster img,
.episode-card.watched.active-pulse .episode-poster img{
  filter: brightness(.88) saturate(.96) !important;
}
.episode-card.watched:hover .episode-info,
.episode-card.watched.active-pulse .episode-info{
  filter: brightness(.98) !important;
}

/* 3) Popup should not affect page scroll position */
html.modal-open,
body.modal-open{
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

/* 4) Close buttons: hover scale, red X, click animation */
#closeVideoBtn,
#descModalClose,
.desc-modal-close,
.close-video-btn{
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
#closeVideoBtn i,
#descModalClose i,
.desc-modal-close i,
.close-video-btn i{
  transition: color .18s ease, transform .18s ease !important;
}
#closeVideoBtn:hover,
#descModalClose:hover,
.desc-modal-close:hover,
.close-video-btn:hover{
  transform: scale(1.10) !important;
}
#closeVideoBtn:hover i,
#descModalClose:hover i,
.desc-modal-close:hover i,
.close-video-btn:hover i{
  color: var(--primary) !important;
}
#continueBtn.is-close-clicked,
#thanksBtn.is-close-clicked,
#closeVideoBtn.is-close-clicked,
#descModalClose.is-close-clicked,
.desc-modal-close.is-close-clicked,
.close-video-btn.is-close-clicked{
  animation: aaCloseTap .18s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes aaCloseTap{
  0% { transform: scale(1); }
  50% { transform: scale(.88); }
  100% { transform: scale(1); }
}

/* Description modal X: ugyanaz a gombstilus, mint a player X */
#descModalClose.close-video-btn,
.desc-modal-close.close-video-btn{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.82) !important;
}
#descModalClose.close-video-btn:hover,
.desc-modal-close.close-video-btn:hover{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Player koszonom gomb: kisebb glow */
#videoModal #thankEpisodeBtn{
  box-shadow: 0 2px 8px rgba(255,77,77,.16) !important;
}
#videoModal #thankEpisodeBtn:hover{
  box-shadow: 0 4px 12px rgba(255,77,77,.22) !important;
}

/* ===== USER HOTFIX ROUND 2 ===== */

/* 1) Fejlec ikonok: piros korvonal hoverre, ring animacio nelkul */
.user-menu .btn.btn-accent.btn-icon:hover,
.user-avatar:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 26px rgba(0,0,0,.22),
    0 0 0 2px rgba(255,77,77,.95) !important;
}

/* 2) Leiras nagyito: 2px-al lentebb, hover scale kikapcs */
#descExpandBtn,
.desc-expand-btn{
  bottom: -2px !important;
}
#descExpandBtn:hover,
.desc-expand-btn:hover{
  transform: none !important;
  scale: 1 !important;
}

/* 3) Leiras modal X: ugyanaz az effekt-csalad, mint a player X */
#closeVideoBtn,
#descModalClose{
  transform: none !important;
  filter: none !important;
}
#closeVideoBtn::before,
#descModalClose::before,
#closeVideoBtn::after,
#descModalClose::after{
  content: none !important;
  display: none !important;
}
#closeVideoBtn:hover,
#descModalClose:hover{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  transform: translateY(-50%) !important;
  filter: none !important;
  box-shadow: none !important;
}
#closeVideoBtn:active,
#descModalClose:active{
  transform: translateY(-50%) !important;
  filter: none !important;
  box-shadow: none !important;
}

/* 4-5) Watched kartya: hoverkor ne legyen atlatszo, es a ring/outline ne sotetedjen */
.episode-card.watched{
  opacity: 1 !important;
  filter: none !important;
  background: rgba(20,20,20,.58) !important;
}
.episode-card.watched .episode-poster img{
  filter: brightness(.52) saturate(.86) !important;
}
.episode-card.watched .episode-info{
  filter: brightness(.78) !important;
  opacity: 1 !important;
}
.episode-card.watched:hover,
.episode-card.watched.active-pulse{
  opacity: 1 !important;
  filter: none !important;
  border-color: rgba(255,77,77,.62) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,77,77,.18),
    0 0 24px rgba(255,77,77,.10) !important;
}

/* 6) Korvonal levagas fix: extra perem + scale kikapcs hoverkor */
.episodes-scroll-container{
  padding: 34px 30px 30px !important;
}
.episode-card:hover,
.episode-card.watched:hover,
.episode-card.active-pulse,
.episode-card.watched.active-pulse{
  transform: translateY(-4px) scale(1) !important;
}

/* 7) Player nyitas: ugyanaz a fekete layer + animacio stilus, mint a leiras modal */
#videoModal.video-modal{
  display: flex !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity .22s ease, visibility 0s linear .22s !important;
}
#videoModal.video-modal.active{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .22s ease !important;
}
#videoModal.video-modal.active.closing{
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
}
#videoModal.video-modal .video-modal-content{
  transform: translate3d(0,14px,0) scale(.98) !important;
  opacity: 0 !important;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .24s ease !important;
}
#videoModal.video-modal.active .video-modal-content{
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}
#videoModal.video-modal.active.closing .video-modal-content{
  transform: translate3d(0,14px,0) scale(.98) !important;
  opacity: 0 !important;
}

/* ===== TRUE EOF OVERRIDE 2026-04-18 ===== */

/* Revert broken active transforms on regular buttons */
#continueBtn:active,
#thanksBtn:active,
#adminBtn:active,
.video-btn:active,
.season-tab:active,
#descExpandBtn:active,
.desc-expand-btn:active,
.user-menu .btn.btn-accent.btn-icon:active,
.user-avatar:active{
  transform: translateY(0) scale(.985) !important;
}

/* Close buttons: no hover/active shift */
#closeVideoBtn,
#descModalClose,
.desc-modal-close,
.close-video-btn,
#closeVideoBtn:hover,
#descModalClose:hover,
.desc-modal-close:hover,
.close-video-btn:hover,
#closeVideoBtn:active,
#descModalClose:active,
.desc-modal-close:active,
.close-video-btn:active{
  transform: none !important;
}

/* Close tap animation should be scale-only */
#closeVideoBtn.is-close-clicked,
#descModalClose.is-close-clicked,
.desc-modal-close.is-close-clicked,
.close-video-btn.is-close-clicked{
  animation: aaCloseTapEOF .16s cubic-bezier(.2,.9,.2,1) both !important;
}
@keyframes aaCloseTapEOF{
  0% { transform: scale(1); }
  50% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* Description expand button: 1px lower, no grow */
#descExpandBtn,
.desc-expand-btn{
  bottom: -1px !important;
}
#descExpandBtn:hover,
.desc-expand-btn:hover,
#descExpandBtn:active,
.desc-expand-btn:active{
  transform: none !important;
  scale: 1 !important;
}

/* Description modal close button: align button itself correctly */
#descModalClose,
.desc-modal-close{
  top: 16px !important;
  right: 16px !important;
}

/* Episode-card click animation: subtle and separate from buttons */
.episode-card.is-card-clicked{
  animation: aaEpisodeCardTapEOF .14s cubic-bezier(.2,.9,.2,1) both !important;
}
@keyframes aaEpisodeCardTapEOF{
  0% { transform: translateY(-2px) scale(1); }
  50% { transform: translateY(-1px) scale(.985); }
  100% { transform: translateY(-2px) scale(1); }
}

/* ===== FINAL USER-APPROVED FIXES 2026-04-18 ===== */

/* 1) Leiras nagyito gomb: minden nezetben +2px lejjebb */
#descExpandBtn,
.desc-expand-btn{
  bottom: 1px !important;
}

/* 2) Csak a leiras popup X: a gomb doboza legyen fuggolegesen kozepen */
#descModalClose,
.desc-modal-close{
  top: 10px !important;
  right: 16px !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#descModalClose i,
.desc-modal-close i{
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#descModalClose:hover,
.desc-modal-close:hover,
#descModalClose:active,
.desc-modal-close:active{
  transform: none !important;
}

/* 3) Resz-kartya klikk animacio: ugyanaz a benyomas-erzet, mint a bal gomboknal */
.episode-card.is-card-clicked{
  animation: none !important;
  transform: translateY(0) scale(.985) !important;
  filter: brightness(.99) saturate(1) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.11),
    0 6px 16px rgba(0,0,0,.18),
    0 0 10px rgba(255,77,77,.08) !important;
}

/* ===== FINAL MICRO FIXES 2026-04-18 v2 ===== */

/* Leiras nagyito: a jelenlegihez kepest meg 5px lejjebb */
#descExpandBtn,
.desc-expand-btn{
  bottom: 6px !important;
}

/* Csak a leiras popup X: gomb es ikon is legyen fuggolegesen kozepen */
#descModalClose,
.desc-modal-close{
  top: 8px !important;
  right: 16px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#descModalClose i,
.desc-modal-close i{
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: translateY(1px) !important;
}

#descModalClose:hover,
.desc-modal-close:hover,
#descModalClose:active,
.desc-modal-close:active{
  transform: none !important;
}

/* Resz kartyak: rovid, jol lathato klikk animacio */
.episode-card.is-card-clicked{
  animation: aaEpisodeCardClickShort .22s cubic-bezier(.2,.9,.2,1) both !important;
}

@keyframes aaEpisodeCardClickShort{
  0% {
    transform: translateY(-1px) scale(1) !important;
    filter: brightness(1) saturate(1) !important;
  }
  45% {
    transform: translateY(0) scale(.968) !important;
    filter: brightness(.98) saturate(1.02) !important;
  }
  100% {
    transform: translateY(-1px) scale(1) !important;
    filter: brightness(1) saturate(1) !important;
  }
}





/* ===== VIDEO BTN FOCUS RESET ===== */
.video-btn:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}
.video-btn:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}


/* ===== MOBILE RESPONSIVE FIX ===== */

/* ── 768px ── */
@media (max-width: 768px) {

    /* ▸ Navbar */
    .navbar, header.navbar, nav.navbar { padding: 0.6rem 1rem !important; }
    .nav-links { display: none !important; }
    .logo span { display: none !important; }
    .search-bar { flex-grow: 1 !important; margin: 0 0.8rem !important; }

    /* ▸ P1 – Hero overlay: tartalom z-index-e AZ OVERLAY FÖLÉ
       Gyökérok: @media(max-width:900px) csökkenti .container z-indexét
       3→2-re, ami megegyezik az .adatlap-hero::after z-index:2-vel.
       Fix: z-index:5 mobilon. */
    .container {
        z-index: 5 !important;
    }

    /* ▸ P1 – Hero + overlay: ld. "ADATLAP MOBILE HERO" blokk a fájl végén */

    /* ▸ Adatlap: single column */
    .adatlap-wrap { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
    .adatlap-left { display: contents !important; }
    .adatlap-poster {
        display: block !important;
        order: 1 !important;
        width: 100% !important;
        max-width: 320px !important;
        aspect-ratio: 2 / 3 !important;
        margin: 0 0 0.8rem 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 20px 40px rgba(0,0,0,.45) !important;
    }
    .adatlap-right { order: 2 !important; text-align: left !important; }
    .btn-stack { order: 3 !important; width: 100% !important; max-width: none !important; }
    .adatlap-tags { justify-content: flex-start !important; }
    .desc-box { text-align: left; }
    .meta-panel { width: 100% !important; overflow: visible !important; }
    .meta-cols { grid-template-columns: 1fr !important; }

    /* ▸ Btn stack – minden gomb teljes szélességű és látható */
    .btn-stack .btn,
    .btn-stack .btnx {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ▸ Episodes shell */
    .episodes-shell { width: calc(100% - 1.5rem) !important; }

    /* ▸ body::before perf */
    body::before {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ▸ Meta info overflow */
    .meta-v { overflow-wrap: anywhere !important; word-break: break-word !important; }
    .meta-row { padding: 0.6rem 0.8rem !important; }
    .meta-k { font-size: 0.72rem !important; }

    /* ▸ Meta section (JS-moved wrapper) */
    .meta-section { width: calc(100% - 1.5rem) !important; max-width: 1180px !important; margin: 1rem auto !important; }
    .meta-section .meta-panel { border-radius: 16px !important; margin: 0 !important; }

    /* ▸ P2 – Staff info: sortörés engedélyezése, NE legyen levágva
       Gyökérok: .video-headlines overflow:hidden klippelte a sortörő szöveget */
    .video-staffline {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.5 !important;
    }
    .video-headlines {
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* ▸ P3 – Player középre */
    .video-modal {
        padding: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ▸ P4 – Előző/Következő gombok: csak szöveg, ikon nélkül */
    #prevEpisodeBtn i,
    #nextEpisodeBtn i {
        display: none !important;
    }
}

/* ── 576px ── */
@media (max-width: 576px) {

    /* ▸ Navbar */
    .navbar, header.navbar, nav.navbar { padding: 0.5rem 0.8rem !important; }
    .search-bar { margin: 0 0.5rem !important; }
    .search-bar input { padding: 0.6rem 1rem 0.6rem 2.4rem !important; font-size: 0.9rem !important; }
    .search-bar i { left: 0.9rem !important; }

    /* ▸ Adatlap container */
    .container { width: calc(100% - 1.5rem) !important; padding-top: calc(var(--navH, 60px) + 1rem) !important; }
    .adatlap-poster { max-width: 220px !important; }
    .adatlap-title { font-size: 1.6rem !important; }
    .adatlap-subtitle { font-size: 1.1rem !important; }
    .adatlap-desc { font-size: 0.9rem !important; max-height: 6em !important; }

    /* ▸ Episodes: 1 column */
    .episodes-shell { width: calc(100% - 1rem) !important; }
    .episodes-grid { grid-template-columns: 1fr !important; }
    .episodes-section h2, .episodes-title { font-size: 1.4rem !important; }
    .season-selector { gap: 0.4rem !important; }
    .season-tab { padding: 0.5rem 1rem !important; font-size: 0.85rem !important; }

    /* ▸ Episode cards – normál vertikális layout */
    .episode-card { display: flex !important; flex-direction: column !important; padding: 0 !important; gap: 0 !important; }
    .episode-poster { width: 100% !important; min-width: unset !important; height: auto !important; aspect-ratio: 16/9 !important; }
    .episode-info { position: static !important; background: none !important; padding: 0.9rem 1rem !important; z-index: auto !important; }
    .episode-number { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; flex-shrink: 0 !important; }
    .episode-title { font-size: 1rem !important; }
    .episode-meta { font-size: 0.85rem !important; }

    /* ▸ P3+P5 – Player: kompakt, KÖZÉPRE igazított
       Gyökérok (P5): desktop video-controls `display:grid; grid-template-columns:1fr 1fr`
       nem volt felülírva mobilban → gombok túl szélesek.
       Fix: explicit display:flex + flex-direction:column */
    .video-modal {
        padding: 0.5rem !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .video-modal-content {
        max-height: 85vh !important;
        width: 100% !important;
        border-radius: 16px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
    .video-player {
        max-height: 28vh !important;
    }
    .video-header {
        padding: 0.5rem 0.7rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--darker) !important;
    }
    .close-video-btn {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }
    .video-controls {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.4rem 0.5rem !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
        background: var(--darker) !important;
        gap: 4px !important;
    }
    .video-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 4px !important;
    }
    .video-btn {
        min-width: unset !important;
        flex: 1 1 0 !important;
        padding: 0.35rem 0.4rem !important;
        font-size: 0.7rem !important;
        min-height: 32px !important;
        gap: 0.25rem !important;
    }
    .video-title-big { font-size: 0.85rem !important; }
    .video-subtitle { font-size: 0.72rem !important; }
    .video-staffline { font-size: 0.65rem !important; }
    .video-project-note { font-size: 0.68rem !important; }
    .player-shell { border-radius: 12px !important; }
    .player-top { padding: 0.5rem 0.6rem !important; }

    /* ▸ Meta */
    .meta-v { font-size: 0.85rem !important; }
    .meta-col { padding: 0.4rem 0 !important; }
    .meta-section { width: calc(100% - 1rem) !important; }
}

/* ── 420px ── */
@media (max-width: 420px) {
    .adatlap-poster { max-width: 190px !important; }
    .adatlap-title { font-size: 1.35rem !important; }
    .adatlap-subtitle { font-size: 0.95rem !important; }
    .project-note { font-size: 0.82rem !important; }
    .meta-col .meta-label { font-size: 0.72rem !important; }
    .meta-col .meta-value { font-size: 0.85rem !important; }
    .episode-number { width: 28px !important; height: 28px !important; font-size: 0.78rem !important; }

    .video-modal-content { max-height: 80vh !important; }
    .video-player { max-height: 24vh !important; }
    .video-btn { font-size: 0.65rem !important; padding: 0.3rem !important; min-height: 28px !important; }
    .close-video-btn { width: 30px !important; height: 30px !important; }
}

/* ── P6: Landscape — görgetés + close button mindig elérhető ── */
@media (max-height: 500px) and (orientation: landscape) {
    .video-modal {
        align-items: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
    }
    .video-modal-content {
        max-height: none !important;
        width: 100% !important;
        border-radius: 0 !important;
        overflow-y: visible !important;
    }
    .video-player {
        max-height: 55vh !important;
    }
    .video-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        background: var(--darker) !important;
    }
    .video-controls {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        background: var(--darker) !important;
    }
    .close-video-btn {
        flex-shrink: 0 !important;
    }
    .video-staffline {
        white-space: normal !important;
        overflow: visible !important;
    }
}


/* ===== MOBILE & HERO FIXES 2026-04-19 ===== */

/* ── FIX 2,6,7: Fekete overlay stabilizálás mobilon ── */
/* Fallback háttér: ha az overlay 1 frame-re is eltűnne, fekete legyen mögötte */
html {
    background: #000 !important;
}

/* Az overlay GPU-ra kényszerítése + bővített fedés mobilon */
@media (max-width: 768px) {
    body::before {
        position: fixed !important;
        inset: -9999px 0 -9999px 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }

    /* FIX 6: adatlap-hero::after → ld. "ADATLAP MOBILE HERO" blokk a fájl végén */

    /* Biztosítsd, hogy a meta-section is kapjon sötétítést */
    .meta-section {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* ── FIX 3: Vízszintes scroll / elhúzás megszüntetése mobilon ── */
@media (max-width: 768px) {
    html {
        overflow-x: clip !important;
        max-width: 100vw !important;
    }
    body {
        overflow-x: clip !important;
        max-width: 100vw !important;
    }
    .adatlap-page {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    /* adatlap-hero overflow + bg-media → ld. "ADATLAP MOBILE HERO" blokk a fájl végén */
    .bg-media.trailer-bg {
        overflow: hidden !important;
    }
}

/* ── FIX 4: Stáb infó 2 sorban mobilon (player) ── */
/* Desktop: inline marad */
.staff-row {
    display: inline;
}

@media (max-width: 768px) {
    .video-staffline {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.5 !important;
    }
    .staff-row {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ── FIX 5: ELTÁVOLÍTVA – mobilon ugyanazok a gombanimációk mint desktopon ── */

/* ── FIX 8: Videó a fejléctől induljon mobilon → összevonva a fájl végén ("ADATLAP MOBILE HERO") ── */


/* ===== FIXES 2026-04-19-v2 ===== */

/* ── FIX: Egyetlen scroll felület mobilon (no nested scroll) ── */
@media (max-width: 768px) {
    .episodes-scroll-container {
        max-height: 65vh !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ── FIX: Fekete csík fix → összevonva a fájl végén ("ADATLAP MOBILE HERO") ── */

/* ── FIX: Egységes hover effekt minden linkre (Username, MAL, Yonagi Fansub) ── */
.meta-v .aa-username,
.video-staffline .aa-username {
    transition: color .2s ease !important;
}
.meta-v a,
.links-main a,
.fansub-link,
.fansub-link-inline,
.meta-v .aa-username,
.video-staffline .aa-username {
    color: var(--primary) !important;
    font-weight: 800 !important;
    transition: color .2s ease !important;
}
.meta-v a:hover,
.links-main a:hover,
.fansub-link:hover,
.fansub-link-inline:hover,
.meta-v .aa-username:hover,
.video-staffline .aa-username:hover {
    color: var(--primary-light) !important;
}


/* ===== 5 FIXES 2026-04-19 v4 ===== */

/* FIX 4: Kék kijelölés (tap highlight) eltávolítása – csak interaktív elemek */
button, a, [role="button"],
.video-btn, .btnx, .season-tab,
.episode-card, .close-video-btn, .user-avatar,
.btn, .desc-expand-btn, .desc-modal-close {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none;
    user-select: none;
}

/* FIX 3: Adatlap háttérkép = főoldali (alphacoders image + gradient overlay) */
body {
    background-color: #000 !important;
    background-image:
        linear-gradient(to bottom, rgba(8,8,8,.52) 0%, rgba(8,8,8,.64) 100%),
        url('https://images2.alphacoders.com/139/thumb-1920-1398171.png') !important;
    background-position: 0 0, center top !important;
    background-size: 100% 100%, 1920px auto !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* ===== ADATLAP MOBILE HERO — egyetlen autoritatív blokk ===== */
/* A korábbi FIX 1, FIX 6, FIX 8, "Fekete csík", P1 szabályok
   összevonva és kitakarítva. Minden releváns mobil override itt van. */
@media (max-width: 768px) {

    /* --- Page wrapper: semmi extra tér fölötte --- */
    .adatlap-page {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* --- Hero: a viewport tetejéről indul, min 100vh (stabil, nem ugrik) --- */
    .adatlap-hero {
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    /* --- Overlay: főoldali hero::before-nak megfelelő gradient (pixel-pontos) --- */
    .adatlap-hero::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        background:
            linear-gradient(to right, rgba(13,13,13,0.9) 0%, rgba(13,13,13,0.6) 100%),
            linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.35) 100%) !important;
        pointer-events: none !important;
    }

    /* --- Háttér média (trailer/kép): kitölti a VIEWPORT-ot, top: 0 --- */
    .bg-media,
    .bg-media.trailer-bg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        z-index: 1 !important;
        background: #000 !important;
        transform: translateZ(0) !important;
        overflow: hidden !important;
    }
    .bg-media img,
    .bg-media.trailer-bg .trailer-fallback {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Ha van trailer iframe, a fallback kép ne sejljen át mögötte */
    .bg-media.trailer-bg .trailer-fallback {
        display: none !important;
    }
    .bg-media.trailer-bg .hero-trailer-frame {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100vw !important;
        height: 56.25vw !important;
        min-width: 177.78vh !important;
        min-height: 100vh !important;
        transform: translate(-50%, -50%) scale(1.12) translateZ(0) !important;
        opacity: 0.78 !important;
        border: 0 !important;
        pointer-events: none !important;
    }

    /* --- Container: navbar alatti padding, tartalom az overlay felett --- */
    .adatlap-hero .container {
        z-index: 5 !important;
        padding-top: calc(var(--navH, 60px) + 0.8rem) !important;
    }

    /* --- bgAmazon rejtése mobilon --- */
    .bg-amazon {
        display: none !important;
    }

    /* --- body háttér: scroll (nem fixed, az bugos Chrome mobilon), kép áthelyezve ::before-ba --- */
    body {
        background-image: none !important;
        background-attachment: scroll !important;
    }

    /* --- body::before: FIXED overlay + háttérkép (cover, top-aligned)
         100lvh = Large Viewport Height → nem változik a Chrome címsáv eltűnésekor,
         így nincs zoom-hatás ÉS nincs fekete csík alul. --- */
    body::before {
        content: '' !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100lvh !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background-color: #080808 !important;
        background-image:
            linear-gradient(to bottom, rgba(8,8,8,0.52) 0%, rgba(8,8,8,0.64) 100%),
            url('https://i.pinimg.com/736x/6e/0e/46/6e0e46b3fa3f11ec7b46362839241e83.jpg') !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}