fix(tv): remove remote guide, fix drawer overlap cutting off catalog title, compact TV scaling to 0.0.3

package.json

@@ -1,7 +1,7 @@
 {
   "name": "has",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "has"
-version = "0.0.2"
+version = "0.0.3"
 description = "has"
 authors = ["autli"]
 edition = "2024"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "has",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "identifier": "com.has.tauri-app",
   "build": {
     "beforeDevCommand": "npm run dev",

src/pages/cinema/Cinema.css

@@ -1840,38 +1840,47 @@
   transform: scale(1.05);
 }
 
-/* Android TV Leanback Navigation Rail & Drawer */
+/* Semi-transparent Backdrop for TV Navigation Drawer */
+.has-cinema-tv-nav-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(5px);
+  z-index: 1999;
+  animation: fadeIn 0.2s ease;
+}
+
+/* Android TV Leanback Navigation Drawer (Slide-in Overlay) */
 .has-cinema-tv-nav-drawer {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
+  width: 270px;
+  background: rgba(8, 12, 24, 0.97);
+  backdrop-filter: blur(28px);
+  border-right: 1px solid rgba(129, 140, 248, 0.35);
+  box-shadow: 15px 0 50px rgba(0, 0, 0, 0.9);
   display: flex;
   flex-direction: column;
-  z-index: 1000;
+  z-index: 2000;
-  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, background 0.28s ease;
+  transform: translateX(-100%);
-}
+  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
-
+  pointer-events: none;
-.has-cinema-tv-nav-drawer.collapsed {
+  visibility: hidden;
-  width: 66px;
-  background: rgba(10, 15, 28, 0.9);
-  backdrop-filter: blur(20px);
-  border-right: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .has-cinema-tv-nav-drawer.open {
-  width: 270px;
+  transform: translateX(0);
-  background: rgba(8, 12, 24, 0.97);
+  pointer-events: auto;
-  backdrop-filter: blur(24px);
+  visibility: visible;
-  border-right: 1px solid rgba(129, 140, 248, 0.4);
-  box-shadow: 15px 0 50px rgba(0, 0, 0, 0.9);
 }
 
 .has-cinema-tv-nav-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 18px 12px 14px;
+  padding: 18px 16px 14px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
@@ -1926,7 +1935,7 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 12px 8px;
+  padding: 12px 10px;
   flex: 1;
   overflow-y: auto;
 }
@@ -2000,89 +2009,79 @@
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
+/* TV Mode Root Overrides (Safe Overscan Area & Compact Proportions) */
 .has-tv-mode {
-  padding-left: 74px !important;
+  font-size: 14.5px;
 }
 
-/* Universal Glowing Focus Indicators for D-Pad / Keyboard Navigation */
+.has-tv-mode .has-cinema-header {
-[data-tv-focusable="true"]:focus-visible,
+  padding: 16px 54px !important;
-.has-cinema-media-card:focus-visible,
-.has-cinema-grid-card:focus-visible,
-.has-cinema-episode-card:focus-visible,
-.has-cinema-nav-item:focus-visible,
-.has-cinema-btn-play:focus-visible,
-.has-cinema-btn-circle:focus-visible,
-.has-cinema-season-tab:focus-visible,
-.has-cinema-mirror-btn:focus-visible,
-.has-cinema-trans-btn:focus-visible,
-.has-cinema-player-nav-btn:focus-visible,
-.has-cinema-mode-btn:focus-visible,
-.has-cinema-russian-dub-btn:focus-visible,
-.has-cinema-player-fs-btn:focus-visible,
-.has-cinema-player-close-btn:focus-visible,
-.has-cinema-player-ep-chip:focus-visible,
-.has-cinema-tv-mode-btn:focus-visible,
-.has-cinema-search-input:focus-visible,
-.has-cinema-search-clear-btn:focus-visible {
-  outline: 3.5px solid #6366f1 !important;
-  outline-offset: 3px !important;
-  box-shadow: 0 0 25px rgba(99, 102, 241, 0.9), inset 0 0 8px rgba(99, 102, 241, 0.4) !important;
-  transform: scale(1.05) !important;
-  z-index: 35 !important;
-  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, outline-color 0.2s ease !important;
 }
 
-/* TV Mode Root Overrides (10-Foot UI for 3m Couch Distance) */
+.has-tv-mode .has-cinema-nav-links {
-.has-tv-mode {
+  gap: 20px;
-  font-size: 16px;
 }
 
 .has-tv-mode .has-cinema-nav-item {
-  font-size: 16.5px;
+  font-size: 15px;
-  padding: 8px 12px;
+  padding: 6px 10px;
+}
+
+.has-tv-mode .has-cinema-hero {
+  padding: 85px 54px 30px !important;
+  min-height: 360px;
 }
 
 .has-tv-mode .has-cinema-hero-title {
-  font-size: 42px;
+  font-size: 30px;
+  margin-bottom: 8px;
 }
 
 .has-tv-mode .has-cinema-hero-synopsis {
-  font-size: 16px;
+  font-size: 13.5px;
-  max-width: 720px;
+  max-width: 580px;
-  line-height: 1.6;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .has-tv-mode .has-cinema-btn-play {
-  padding: 12px 28px;
+  padding: 10px 22px;
-  font-size: 16px;
+  font-size: 14px;
+}
+
+.has-tv-mode .has-cinema-rows-container {
+  padding: 12px 54px 40px !important;
 }
 
 .has-tv-mode .has-cinema-row-title {
-  font-size: 22px;
+  font-size: 18px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .has-tv-mode .has-cinema-media-card {
-  width: 195px;
+  width: 154px;
-  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
 }
 
 .has-tv-mode .has-cinema-media-card:focus,
 .has-tv-mode .has-cinema-grid-card:focus,
 .has-tv-mode .has-cinema-episode-card:focus {
-  outline: 4px solid #818cf8 !important;
+  outline: 3px solid #818cf8 !important;
-  outline-offset: 4px !important;
+  outline-offset: 3px !important;
-  box-shadow: 0 0 35px rgba(129, 140, 248, 0.95), 0 12px 28px rgba(0, 0, 0, 0.8) !important;
+  box-shadow: 0 0 25px rgba(129, 140, 248, 0.85), 0 8px 20px rgba(0, 0, 0, 0.8) !important;
-  transform: scale(1.09) translateY(-6px) !important;
+  transform: scale(1.05) translateY(-3px) !important;
   z-index: 40 !important;
 }
 
 .has-tv-mode .has-cinema-media-title {
-  font-size: 15px;
+  font-size: 13.5px;
 }
 
 .has-tv-mode .has-cinema-media-sub {
-  font-size: 13px;
+  font-size: 12px;
 }
 
 /* In-Player TV Remote Guide */

src/pages/cinema/Cinema.tsx

@@ -2251,6 +2251,14 @@ export default function Cinema({
 
   return (
     <div className={`has-cinema-container ${isTvMode ? "has-tv-mode" : ""}`} ref={topRef}>
+      {/* Semi-transparent Backdrop for TV Navigation Drawer */}
+      {isTvMode && isTvNavOpen && (
+        <div
+          className="has-cinema-tv-nav-backdrop"
+          onClick={() => setIsTvNavOpen(false)}
+        />
+      )}
+
       {/* ========================================================
           ANDROID TV LEANBACK NAVIGATION DRAWER
           (Opens when pressing Left from cards, remote Menu, or Menu pill)
@@ -3949,30 +3957,6 @@ export default function Cinema({
         </div>
       )}
 
-      {/* ========================================================
-          6. ANDROID TV REMOTE CONTROL GUIDE & ON-SCREEN TOAST
-          ======================================================== */}
-      {isTvMode && (
-        <div className="has-cinema-tv-remote-guide">
-          <div className="has-cinema-tv-guide-item">
-            <span className="has-cinema-tv-key">▲ ▼ ◀ ▶</span>
-            <span>Навигация</span>
-          </div>
-          <div className="has-cinema-tv-guide-item">
-            <span className="has-cinema-tv-key">OK</span>
-            <span>Выбрать</span>
-          </div>
-          <div className="has-cinema-tv-guide-item">
-            <span className="has-cinema-tv-key">Back</span>
-            <span>Назад</span>
-          </div>
-          <div className="has-cinema-tv-guide-item">
-            <span className="has-cinema-tv-key">◀ Меню</span>
-            <span>Разделы</span>
-          </div>
-        </div>
-      )}
-
       {/* High-visibility TV On-Screen Toast */}
       {tvToast && (
         <div className="has-cinema-tv-toast">