123

public/styles.css

@@ -34,7 +34,8 @@
 
 html, body {
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-family: var(--font-body);
   background: var(--space);
   color: #e2e8f0;
@@ -42,12 +43,16 @@ html, body {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
+  -webkit-overflow-scrolling: touch;
 }
 
 #app {
   position: relative;
   min-height: 100vh;
   width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* Static starfield - no animation */
@@ -1587,6 +1592,12 @@ html, body {
   opacity: 1;
   pointer-events: auto;
 }
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-10px); }
+  75% { transform: translateX(10px); }
+}
+
 @media (max-width: 768px) {
   .forge-sidebar {
     width: 100vw;
@@ -2075,50 +2086,72 @@ html, body {
   html, body {
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
+    overflow-x: hidden;
   }
   
   .screen {
-    padding: 1rem;
+    padding: 0.5rem;
+    min-height: 100vh;
+    overflow-x: hidden;
   }
   
   .lobby-card {
     padding: 1.5rem;
     max-width: 100%;
+    margin: 0 auto;
   }
   
   .game-header {
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.75rem;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--space);
+    border-bottom: 1px solid rgba(0,180,255,0.2);
   }
   
   .header-left, .header-center, .header-right {
     width: 100%;
     justify-content: space-between;
     flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .header-center {
+    order: -1;
+    flex-wrap: wrap;
+    gap: 0.5rem;
   }
   
   .btn {
     min-height: 44px;
     padding: 0.85rem 1.5rem;
     font-size: 1rem;
+    touch-action: manipulation;
   }
   
   .btn-end-turn {
     min-height: 48px;
     padding: 0.7rem 1.6rem;
     font-size: 1.05rem;
+    flex: 1;
+    min-width: 120px;
   }
   
   .btn-instructions, .btn-settings {
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
     font-size: 1.2rem;
+    min-width: 44px;
+    min-height: 44px;
   }
   
   .card-wrap {
     width: 140px;
     height: 196px;
+    touch-action: manipulation;
   }
   
   .board .card-wrap {
@@ -2131,22 +2164,51 @@ html, body {
     height: 140px;
   }
   
+  .opponents {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+  
+  .opponent-block {
+    min-width: auto;
+    width: 100%;
+    padding: 0.5rem;
+  }
+  
+  .hand {
+    overflow-x: auto;
+    overflow-y: visible;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+    padding: 0.5rem;
+    gap: 0.3rem;
+  }
+  
   .hand .card-wrap {
-    margin-left: -40px;
+    margin-left: -30px;
+    scroll-snap-align: start;
+    flex-shrink: 0;
   }
   
   .hand .card-wrap:first-child {
     margin-left: 0;
   }
   
+  .hand .card-wrap:last-child {
+    margin-right: 0.5rem;
+  }
+  
   .hand-container {
-    min-height: 180px;
+    min-height: 200px;
     padding: 0.5rem;
+    position: relative;
   }
   
   .deck-fan {
     width: 90px;
     height: 126px;
+    flex-shrink: 0;
   }
   
   .deck-stack {
@@ -2162,21 +2224,31 @@ html, body {
   .board {
     min-height: 150px;
     padding: 0.5rem;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
   
   .your-board {
     min-height: 110px;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
   }
   
-  .opponent-block {
-    min-width: 140px;
-    padding: 0.5rem;
+  .your-board .card-wrap {
+    scroll-snap-align: start;
+    flex-shrink: 0;
   }
   
   .attack-mode {
     bottom: 200px;
     padding: 0.7rem 1.2rem;
     font-size: 0.9rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - 2rem);
+    max-width: 400px;
   }
   
   .attack-mode p {
@@ -2187,6 +2259,8 @@ html, body {
     max-width: 95vw;
     padding: 1.5rem;
     margin: 1rem;
+    max-height: 90vh;
+    overflow-y: auto;
   }
   
   .cards-gallery-grid {
@@ -2199,14 +2273,38 @@ html, body {
     height: 140px !important;
   }
   
+  .forge-sidebar {
+    width: 100vw;
+    max-width: 100vw;
+    right: 0;
+    left: 0;
+    border-radius: 0;
+    max-height: 100vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
   .forge-deck-list {
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
     gap: 0.5rem;
+    max-height: 300px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
   }
   
   .forge-deck-card {
     width: 80px !important;
     height: 112px !important;
+    touch-action: manipulation;
+  }
+  
+  .forge-selected {
+    min-height: 120px;
+    touch-action: manipulation;
+  }
+  
+  .forge-selected-card {
+    touch-action: manipulation;
   }
   
   .mana-display, .health-display {
@@ -2225,6 +2323,8 @@ html, body {
   .game-log {
     font-size: 0.75rem;
     max-height: 60px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
   }
   
   .card-name {
@@ -2233,6 +2333,7 @@ html, body {
   
   .card-text {
     font-size: 0.68rem;
+    line-height: 1.3;
   }
   
   .card-cost, .card-atk-hp {
@@ -2240,9 +2341,11 @@ html, body {
   }
   
   .card-btn-info {
-    width: 24px;
-    height: 24px;
-    font-size: 0.8rem;
+    width: 28px;
+    height: 28px;
+    font-size: 0.9rem;
+    min-width: 28px;
+    min-height: 28px;
   }
   
   /* Touch feedback */
@@ -2256,11 +2359,21 @@ html, body {
   }
   
   /* Prevent text selection on touch */
-  .card-wrap, .btn, .tab {
+  .card-wrap, .btn, .tab, .deck-fan {
     -webkit-user-select: none;
     user-select: none;
     -webkit-touch-callout: none;
   }
+  
+  /* Улучшенная поддержка touch для интерактивных элементов */
+  .btn:active {
+    transform: scale(0.95);
+    transition: transform 0.1s;
+  }
+  
+  .card-wrap:active:not(.disabled) {
+    transform: scale(0.98);
+  }
 }
 
 /* Small mobile devices */