.hero-section{background-position:top;background-size:cover;width:100%;height:85vh;min-height:500px;position:relative}@media (max-width:768px){.hero-section{background-position:50%;min-height:500px}}.hero-skeleton{background-color:var(--surface-container);width:100%;height:85vh;min-height:500px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%{background-color:#222}50%{background-color:#333}to{background-color:var(--surface-container)}}.hero-overlay{background:linear-gradient(90deg,#121317 0%,#121317cc 40%,#12131700 100%),linear-gradient(#12131700 75%,#121317 100%);align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.hero-content{max-width:var(--container-max,1440px);padding:0 var(--gutter,24px);width:100%;margin:10vh auto 0}.hero-title{font-family:var(--font-plus-jakarta), sans-serif;text-shadow:2px 2px 4px #00000080;color:#fff;max-width:700px;margin:0 0 16px;font-size:4rem;font-weight:800;line-height:1.1}.hero-meta{font-family:var(--font-inter), sans-serif;color:var(--on-surface-variant);align-items:center;gap:12px;margin-bottom:20px;font-size:15px;font-weight:500;display:flex}.hero-rating{color:#fff;align-items:center;gap:4px;font-weight:700;display:flex}.hero-rating .star{color:var(--primary);font-size:18px}.hero-meta-separator{color:#666}.hero-synopsis{max-width:550px;color:var(--on-surface-variant);line-height:1.6;font-family:var(--font-inter), sans-serif;text-shadow:1px 1px 3px #00000080;margin-bottom:32px;font-size:16px}.hero-buttons{gap:16px;display:flex}.hero-play-btn{font-family:var(--font-inter), sans-serif;cursor:pointer;color:#000;background-color:#fff;border:none;border-radius:30px;align-items:center;gap:8px;padding:12px 24px;font-size:16px;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.hero-play-btn:hover{background-color:#ddd}.hero-btn-icon{font-size:20px}@media (min-width:769px){.hero-overlay{background:linear-gradient(90deg,#121317 0%,#12131799 50%,#12131700 100%),linear-gradient(#12131700 80%,#121317 100%)}}@media (max-width:768px){.hero-title{margin-bottom:12px;font-size:2.25rem}.hero-overlay{background:linear-gradient(#12131700 0%,#121317e6 40%,#121317 100%);align-items:flex-end;padding-bottom:3rem}.hero-synopsis{-webkit-line-clamp:3;text-shadow:none;-webkit-box-orient:vertical;margin-bottom:24px;font-size:14px;display:-webkit-box;overflow:hidden}.hero-content{margin-top:0}}@media (max-width:480px){.hero-title{font-size:2rem}.hero-buttons{flex-direction:column;gap:12px;width:100%}.hero-play-btn{justify-content:center;width:100%}}
.home-page{background-color:var(--background);min-height:100vh}.home-sections{padding:0 var(--gutter,24px);max-width:var(--container-max,1440px);margin:0 auto;padding-bottom:64px}@media (min-width:768px){.home-sections{padding:0 48px}}@media (min-width:1024px){.home-sections{padding:0 64px}}@media (max-width:768px){.home-sections{padding:0 16px}.platform-picker-dropdown,.genre-picker-dropdown{border-radius:0 0 16px 16px;width:100%;max-width:100%;left:0}}.platform-row-wrapper{position:relative}.platform-picker-dropdown{z-index:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#0d0e12;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;gap:4px;width:280px;max-width:calc(100vw - 40px);max-height:380px;padding:10px;display:flex;position:absolute;top:50px;left:0;overflow-y:auto;box-shadow:0 15px 40px #000000b3}.platform-picker-dropdown::-webkit-scrollbar{width:6px}.platform-picker-dropdown::-webkit-scrollbar-track{background:0 0}.platform-picker-dropdown::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.platform-picker-dropdown::-webkit-scrollbar-thumb:hover{background:#fff3}.platform-picker-item{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;align-items:center;gap:16px;padding:10px 12px;transition:all .2s;display:flex}.platform-picker-item:hover{background-color:#ffffff0a}.platform-picker-item.active{background-color:#ffffff05}.platform-circle-icon{width:34px;height:34px;font-size:13px;font-weight:800;font-family:var(--font-plus-jakarta), sans-serif;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 10px #0003}.platform-item-name{font-family:var(--font-inter), sans-serif;color:#bdc9c7;font-size:15px;font-weight:500;transition:color .2s}.platform-picker-item:hover .platform-item-name{color:#fff}.genre-row-wrapper{position:relative}.genre-picker-dropdown{z-index:1000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:#0b0c0f;border:1px solid #ffffff0f;border-radius:16px;flex-direction:column;gap:2px;width:250px;max-width:calc(100vw - 40px);max-height:380px;padding:8px;display:flex;position:absolute;top:55px;left:0;overflow-y:auto;box-shadow:0 15px 50px #000000d9}.genre-picker-dropdown::-webkit-scrollbar{width:4px}.genre-picker-dropdown::-webkit-scrollbar-track{background:0 0}.genre-picker-dropdown::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:99px}.genre-picker-dropdown::-webkit-scrollbar-thumb:hover{background:#ffffff40}.genre-picker-item{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;align-items:center;gap:14px;padding:10px 14px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.genre-picker-item:hover{background-color:#ffffff0a}.genre-picker-item.active{background-color:#ffffff04}.genre-circle-icon{color:#fff;background-color:#ffffff0d;border:1px solid #ffffff05;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex}.genre-picker-item:hover .genre-circle-icon{background-color:#ffffff14;transform:scale(1.05)}.genre-item-name{font-family:var(--font-inter), sans-serif;color:#e3e2e8;font-size:16px;font-weight:500;transition:color .2s}.genre-picker-item:hover .genre-item-name{color:#fff}.underlined-platform{border-bottom:2.5px solid var(--primary);padding-bottom:1px}.seo-home-section{width:100%;margin:0 auto;padding:1.5rem 0}.seo-home-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.seo-home-title{font-family:var(--font-plus-jakarta), sans-serif;color:var(--on-surface);border-left:3px solid var(--primary);align-items:center;gap:8px;margin:0;padding-left:12px;font-size:20px;font-weight:600;display:flex}.seo-home-icon{color:var(--primary);display:none}.seo-home-view-all{color:var(--on-surface-variant);font-family:var(--font-inter), sans-serif;font-size:14px;font-weight:500;text-decoration:none;transition:color .2s}.seo-home-view-all:hover{color:#fff}.seo-home-slider{scrollbar-width:thin;scrollbar-color:#555 transparent;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;gap:15px;padding-bottom:15px;display:flex;overflow-x:auto}.seo-home-slider::-webkit-scrollbar{height:4px}.seo-home-slider::-webkit-scrollbar-track{background:0 0}.seo-home-slider::-webkit-scrollbar-thumb{background:#555;border-radius:10px}@media (max-width:768px){.seo-home-slider{scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px;scroll-padding-right:16px}.seo-home-slider:after{content:"";flex:0 0 4px}}.seo-review-card,.seo-list-card{color:inherit;background:#1a1a1a;border:1px solid #ffffff0d;border-radius:8px;flex:0 0 260px;text-decoration:none;transition:transform .2s,background .2s;overflow:hidden}@media (min-width:768px){.seo-review-card,.seo-list-card{flex:0 0 300px}}.seo-review-card:hover,.seo-list-card:hover{background:#222;border-color:#ffffff1a;transform:translateY(-5px)}.seo-card-image-wrapper{width:100%;height:160px;position:relative;overflow:hidden}.seo-card-image-wrapper img{object-fit:cover;width:100%;height:100%}.seo-card-content{padding:15px}.seo-card-content h3{font-family:var(--font-inter), sans-serif;color:#fff;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 8px;font-size:.95rem;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}.seo-card-excerpt{color:#aaa;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 12px;font-size:.85rem;line-height:1.5;display:-webkit-box;overflow:hidden}.seo-card-meta{color:var(--primary);align-items:center;gap:5px;font-size:.85rem;font-weight:600;display:flex}.star-icon.filled{color:var(--primary)}
