From 6ac1fad853dfe16f5252df8330fdadca71db3156 Mon Sep 17 00:00:00 2001
From: Quanysh <kuanysh.b.abdigani@gmail.com>
Date: Thu, 3 Sep 2026 12:20:31 +0000
Subject: [PATCH] Enhanced mobile UX: touch-friendly, responsive, safe areas

---
 style.css | 244 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 235 insertions(+), 9 deletions(-)

diff --git a/style.css b/style.css
index 6590da5..b7aad2c 100644
--- a/style.css
+++ b/style.css
@@ -1154,30 +1154,73 @@ body {
 }
 
 @media (max-width: 600px) {
+  .app {
+    padding: 0 16px;
+  }
+
   .header {
     flex-direction: column;
-    gap: 20px;
+    gap: 16px;
+    padding: 20px 0;
+  }
+
+  .header-controls {
+    width: 100%;
+    justify-content: space-between;
+    order: 2;
   }
 
   .nav {
-    width: 100%;
-    justify-content: center;
+    gap: 8px;
+  }
+
+  .nav-btn {
+    padding: 10px 14px;
   }
 
   .nav-text {
     display: none;
   }
 
+  .nav-icon {
+    font-size: 22px;
+  }
+
+  .language-select {
+    padding: 10px 14px;
+    font-size: 13px;
+  }
+
+  .hero {
+    padding: 40px 0 30px;
+  }
+
+  .hero-title {
+    font-size: 28px;
+    letter-spacing: 0;
+  }
+
+  .hero-subtitle {
+    font-size: 16px;
+    padding: 0 10px;
+  }
+
+  .section-title {
+    font-size: 18px;
+  }
+
   .mood-grid {
     grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
   }
 
   .mood-btn {
-    padding: 20px 12px;
+    padding: 18px 10px;
+    gap: 10px;
   }
 
   .mood-emoji {
-    font-size: 32px;
+    font-size: 28px;
   }
 
   .mood-label {
@@ -1185,42 +1228,225 @@ body {
   }
 
   .filters-section {
-    padding: 24px 20px;
+    padding: 20px 16px;
+  }
+
+  .filters-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
   }
 
   .filters-grid {
     grid-template-columns: 1fr;
+    gap: 14px;
+  }
+
+  .filter-select {
+    padding: 14px 16px;
+    font-size: 15px;
+  }
+
+  .action-buttons {
+    gap: 12px;
+    padding: 0 10px;
+  }
+
+  .find-btn,
+  .random-btn {
+    padding: 16px 24px;
+    font-size: 16px;
+  }
+
+  .movie-card {
+    grid-template-columns: 1fr;
+    border-radius: 16px;
+  }
+
+  .movie-poster {
+    max-height: 350px;
+  }
+
+  .movie-info {
+    padding: 24px 20px;
+    gap: 14px;
+  }
+
+  .movie-title {
+    font-size: 24px;
+    letter-spacing: 1px;
+  }
+
+  .movie-original {
+    font-size: 15px;
+  }
+
+  .movie-meta {
+    font-size: 14px;
+  }
+
+  .movie-rating {
+    font-size: 18px;
+  }
+
+  .movie-description {
+    font-size: 15px;
+    line-height: 1.7;
   }
 
   .movie-actions {
     flex-direction: column;
+    gap: 12px;
   }
 
   .favorite-btn,
   .another-btn {
     width: 100%;
     justify-content: center;
+    padding: 14px 20px;
+    font-size: 14px;
   }
 
   .movies-grid {
     grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+
+  .movie-item-poster {
+    aspect-ratio: 2/3;
+  }
+
+  .movie-item-info {
+    padding: 12px;
+  }
+
+  .movie-item-title {
+    font-size: 14px;
+  }
+
+  .page-header {
+    flex-wrap: wrap;
+    gap: 16px;
   }
 
   .page-header h1 {
-    font-size: 28px;
+    font-size: 24px;
+    width: 100%;
+  }
+
+  .back-btn {
+    padding: 10px 16px;
+  }
+
+  .watch-btn {
+    padding: 14px 24px;
+    font-size: 15px;
   }
 }
 
 @media (max-width: 400px) {
+  .app {
+    padding: 0 12px;
+  }
+
+  .logo {
+    font-size: 24px;
+    letter-spacing: 2px;
+  }
+
   .mood-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 
+  .mood-btn {
+    padding: 16px 8px;
+  }
+
+  .mood-emoji {
+    font-size: 24px;
+  }
+
+  .mood-label {
+    font-size: 10px;
+  }
+
   .movies-grid {
     grid-template-columns: 1fr;
   }
 
-  .logo {
-    font-size: 28px;
+  .movie-item {
+    max-width: 280px;
+    margin: 0 auto;
+  }
+
+  .hero-title {
+    font-size: 24px;
+  }
+
+  .hero-subtitle {
+    font-size: 14px;
+  }
+
+  .find-btn,
+  .random-btn {
+    padding: 14px 18px;
+    font-size: 14px;
+    letter-spacing: 0.5px;
+  }
+
+  .movie-title {
+    font-size: 20px;
+  }
+
+  .movie-original {
+    font-size: 14px;
+  }
+
+  .movie-info {
+    padding: 20px 16px;
+  }
+
+  .watch-btn {
+    padding: 12px 18px;
+    font-size: 13px;
+  }
+}
+
+/* Touch-friendly improvements */
+@media (hover: none) and (pointer: coarse) {
+  .mood-btn,
+  .filter-select,
+  .find-btn,
+  .random-btn,
+  .nav-btn,
+  .movie-item {
+    min-height: 44px;
+  }
+
+  .mood-btn {
+    min-height: 80px;
+  }
+}
+
+/* Prevent text size adjustment on orientation change */
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Safe area insets for notched devices */
+@supports (padding: max(0px)) {
+  .app {
+    padding-left: max(24px, env(safe-area-inset-left));
+    padding-right: max(24px, env(safe-area-inset-right));
+  }
+
+  .header {
+    padding-top: max(28px, env(safe-area-inset-top));
   }
 }