:root{--bg-main:#0d0d0d;--bg-panel:#111111;--bg-panel-soft:#1a1a1a;--accent-red:#e50914;--accent-red-soft:#e5091483;--accent-blue:#00c8ff;--accent-blue-soft:rgba(0,200,255,0.7);--text-main:#ffffff;--text-dim:#aaaaaa;--text-muted:#777777;--shadow-strong:0 10px 40px black;--shadow-soft:0 0 10px rgba(0,141,164,0.7);--shadow-softer:0 0 10px rgba(0,141,164,0.4);--vh:1vh;--scale:calc(var(--vh) * 1);--pad:calc(var(--vh) * 1.2);--font-base:calc(var(--scale) * 2.5);--font-lg:calc(var(--scale) * 5);--poster-w:calc(var(--scale) * 20);--poster-h:calc(var(--scale) * 29)}body.theme-blue{--accent-red:#1e90ff;--accent-red-soft:rgba(30,144,255,0.55);--accent-blue:#1e90ff}body.theme-purple{--accent-red:#a855f7;--accent-red-soft:rgba(168,85,247,0.55);--accent-blue:#6366f1}html,body{touch-action:manipulation}body{margin:0;margin-bottom:calc(var(--scale) * 13);background:var(--bg-main);color:var(--text-main);font-family:system-ui, Arial, sans-serif;overflow-x:hidden;visibility:visible !important}.topbar{background:rgba(0,0,0,0.9);display:flex;justify-content:space-between;align-items:center;padding:calc(var(--scale) * 1.75) calc(var(--scale) * 3.2);position:sticky;top:0;z-index:999}.logoWarp{width:calc(var(--scale) * 25);height:auto}.logoWarp{animation:fadeInLogo .8s ease-out}@keyframes fadeInLogo{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}section{max-width:calc(var(--scale) * 150);margin:auto}h2{font-size:var(--font-base);padding-left:calc(var(--scale) * 2.2);font-weight:normal;color:var(--text-dim)}.row{display:flex;gap:calc(var(--scale) * 1.5);padding:calc(var(--scale) * 1.5) calc(var(--scale) * 2)}.poster{width:var(--poster-w);height:var(--poster-h);background:var(--bg-panel);border-radius:calc(var(--scale) * 1.2);overflow:hidden;position:relative;transition:transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1)}.poster:hover{transform:translateY(-4px) scale(1.05);box-shadow:var(--shadow-strong)}.poster img{width:100%;height:100%;object-fit:cover}.poster span{position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--pad);font-weight:bold;opacity:0;background:linear-gradient(transparent, rgba(0,0,0,0.8));transition:.2s}.continueRow .poster span{align-items:flex-start}.poster:hover span{opacity:1}.homeflix-link{display:block}.homeflix-link:visited,.homeflix-link{color:inherit;text-decoration:none}.genresSection .genreTabs{display:flex;flex-wrap:wrap;gap:calc(var(--scale) * 0.8);padding-top:0;padding-bottom:calc(var(--scale) * 0.3);scrollbar-width:none}.genresSection .genreTabs::-webkit-scrollbar{display:none}.genresSection .genreTab{all:unset;cursor:pointer;display:flex;align-items:center;gap:calc(var(--scale) * 0.4);padding-block:calc(var(--scale) * 0.6) calc(var(--scale) * 0.9);padding-inline:calc(var(--scale) * 1.5) calc(var(--scale) * 2);background:#212020;border-radius:10px;white-space:nowrap;font-size:calc(var(--scale) * 2);transition:0.2s}.genresSection .genreTab:hover{background:#222}.genresSection .genreTab.active{background:#e50914;color:white}.genresSection .genreIcon{font-size:calc(var(--scale) * 2.2)}.genresSection .genreContent{margin-top:calc(var(--scale) * 0.7);min-height:calc(var(--scale) * 6);animation:fade 0.2s ease}.placeholder{opacity:0.5;padding:calc(var(--scale) * 1)}@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.playerWrap{position:fixed;inset:0;background:black;display:flex;align-items:center;justify-content:center}.subMenu{position:absolute;bottom:80px;right:20px;background:rgba(0,0,0,0.85);padding:var(--pad);border-radius:var(--pad);display:none;width:calc(var(--scale) * 22);font-size:var(--pad)}.subMenu label{display:block;margin-top:calc(var(--pad) / 2)}.subMenu input{width:100%}.subMenu .delay{display:flex;justify-content:space-around;margin-top:calc(var(--pad) / 2)}.subMenu button{background:var(--bg-panel-soft);color:var(--text-main);border:none;padding:calc(var(--pad) / 2.5) calc(var(--pad) / 2);border-radius:calc(var(--pad) / 2);cursor:pointer}select{background:var(--bg-panel);color:var(--text-main);border:1px solid var(--bg-panel-soft);padding:calc(var(--pad) / 2);border-radius:calc(var(--pad) / 2);font-size:var(--pad)}.logout{font-size:calc(var(--font-base) * 0.8);text-decoration:none;color:var(--text-main);font-weight:bold}.hero{height:70vh;background-size:cover;background-position:center;position:relative}.heroOverlay{position:absolute;inset:0;background:linear-gradient(to top, #000, transparent);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--scale) * 6)}.heroOverlay h1{font-size:var(--font-lg)}.playHero{background:var(--accent-red);width:fit-content;padding:var(--pad) calc(var(--pad) * 2);color:var(--text-main);text-decoration:none;font-weight:bold;border-radius:calc(var(--pad) / 2)}.playHero:hover{background:rgba(0,0,0,0.85);box-shadow:0 0 3px var(--accent-red-soft);transform:translateX(-3px)}.poster{position:relative}.poster img{display:block;width:100%}.poster .progress{position:absolute;bottom:8px;left:8px;right:8px;height:8px;background:rgba(255,255,255,0.25);border-radius:calc(var(--pad) / 2.5);overflow:hidden;z-index:2}.poster .bar{height:100%;background:var(--accent-red);width:0}.row,.episodeRow{overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}.row::-webkit-scrollbar,.episodeRow::-webkit-scrollbar{display:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent-red);outline-offset:2px}button:focus-visible{border-radius:calc(var(--pad) / 2)}@media (max-width: 980px){body{margin-bottom:calc(var(--scale) * 18)}.topbar{padding-block:calc(var(--scale) * 1.75);padding-inline:calc(var(--scale) * 2) calc(var(--scale) * 3.2)}.heroOverlay{padding:calc(var(--scale) * 3)}.hero{height:60vh}.playHero{font-size:calc(var(--scale) * 1.5)}.poster{width:calc(var(--poster-w) * 0.85);height:calc(var(--poster-h) * 0.85)}h2{font-size:calc(var(--font-base) * 0.8)}.genresSection .genreTabs{gap:calc(var(--scale) * 0.6)}.genresSection .genreTab{padding-block:calc(var(--scale) * 0.4) calc(var(--scale) * 0.6);padding-inline:calc(var(--scale) * 1.2) calc(var(--scale) * 1.6);font-size:calc(var(--scale) * 1.5)}.genresSection .genreIcon{font-size:calc(var(--scale) * 1.7)}}
