123

public/styles.css

@@ -29,6 +29,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  -webkit-tap-highlight-color: transparent;
 }
 
 html, body {
@@ -37,6 +38,10 @@ html, body {
   font-family: var(--font-body);
   background: var(--space);
   color: #e2e8f0;
+  touch-action: manipulation;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 #app {
@@ -532,6 +537,47 @@ html, body {
   z-index: 20;
 }
 
+/* Touch feedback for mobile */
+.card-wrap.touch-active {
+  transform: rotate(var(--hand-rotate, 0deg)) translateY(-15px) scale(1.05);
+  z-index: 20;
+  transition: transform 0.1s ease;
+}
+
+.card-wrap.swiping {
+  opacity: 0.8;
+  transform: rotate(var(--hand-rotate, 0deg)) translateY(-10px) scale(1.02);
+}
+
+.card-wrap.long-pressed {
+  transform: rotate(var(--hand-rotate, 0deg)) translateY(-25px) scale(1.12);
+  z-index: 25;
+  box-shadow: 0 0 30px rgba(0,212,255,0.6);
+}
+
+/* Prevent text selection on touch devices */
+.card-wrap, .btn, .tab, .deck-fan {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+/* Better touch targets */
+@media (hover: none) and (pointer: coarse) {
+  .card-wrap.in-hand:active:not(.disabled) {
+    transform: rotate(var(--hand-rotate, 0deg)) translateY(-15px) scale(1.05);
+    z-index: 20;
+  }
+  
+  .btn:active {
+    transform: scale(0.95);
+  }
+  
+  .card-wrap.attackable:active {
+    transform: scale(1.1);
+  }
+}
+
 .card {
   width: 100%;
   height: 100%;
@@ -1551,6 +1597,7 @@ html, body {
   }
 }
 
+/* Mobile optimizations */
 @media (max-width: 900px) {
   .hand .card-wrap { margin-left: -48px; }
   .card-wrap { width: 154px; height: 214px; }
@@ -1564,3 +1611,254 @@ html, body {
     line-height: 1.4;
   }
 }
+
+/* Touch device optimizations */
+@media (max-width: 768px) {
+  html, body {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  .screen {
+    padding: 1rem;
+  }
+  
+  .lobby-card {
+    padding: 1.5rem;
+    max-width: 100%;
+  }
+  
+  .game-header {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem;
+  }
+  
+  .header-left, .header-center, .header-right {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  
+  .btn {
+    min-height: 44px;
+    padding: 0.85rem 1.5rem;
+    font-size: 1rem;
+  }
+  
+  .btn-end-turn {
+    min-height: 48px;
+    padding: 0.7rem 1.6rem;
+    font-size: 1.05rem;
+  }
+  
+  .btn-instructions, .btn-settings {
+    width: 40px;
+    height: 40px;
+    font-size: 1.2rem;
+  }
+  
+  .card-wrap {
+    width: 140px;
+    height: 196px;
+  }
+  
+  .board .card-wrap {
+    width: 100px;
+    height: 140px;
+  }
+  
+  .opponents .card-wrap {
+    width: 100px;
+    height: 140px;
+  }
+  
+  .hand .card-wrap {
+    margin-left: -40px;
+  }
+  
+  .hand .card-wrap:first-child {
+    margin-left: 0;
+  }
+  
+  .hand-container {
+    min-height: 180px;
+    padding: 0.5rem;
+  }
+  
+  .deck-fan {
+    width: 90px;
+    height: 126px;
+  }
+  
+  .deck-stack {
+    width: 85px;
+    height: 120px;
+  }
+  
+  .deck-stack .deck-card {
+    width: 85px;
+    height: 120px;
+  }
+  
+  .board {
+    min-height: 150px;
+    padding: 0.5rem;
+  }
+  
+  .your-board {
+    min-height: 110px;
+  }
+  
+  .opponent-block {
+    min-width: 140px;
+    padding: 0.5rem;
+  }
+  
+  .attack-mode {
+    bottom: 200px;
+    padding: 0.7rem 1.2rem;
+    font-size: 0.9rem;
+  }
+  
+  .attack-mode p {
+    font-size: 0.85rem;
+  }
+  
+  .modal {
+    max-width: 95vw;
+    padding: 1.5rem;
+    margin: 1rem;
+  }
+  
+  .cards-gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 0.5rem;
+  }
+  
+  .gallery-card {
+    width: 100px !important;
+    height: 140px !important;
+  }
+  
+  .forge-deck-list {
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 0.5rem;
+  }
+  
+  .forge-deck-card {
+    width: 80px !important;
+    height: 112px !important;
+  }
+  
+  .mana-display, .health-display {
+    font-size: 1rem;
+  }
+  
+  .turn-badge {
+    font-size: 0.85rem;
+    padding: 0.35rem 0.7rem;
+  }
+  
+  .turn-timer {
+    font-size: 0.85rem;
+  }
+  
+  .game-log {
+    font-size: 0.75rem;
+    max-height: 60px;
+  }
+  
+  .card-name {
+    font-size: 0.8rem;
+  }
+  
+  .card-text {
+    font-size: 0.68rem;
+  }
+  
+  .card-cost, .card-atk-hp {
+    font-size: 0.9rem;
+  }
+  
+  .card-btn-info {
+    width: 24px;
+    height: 24px;
+    font-size: 0.8rem;
+  }
+  
+  /* Touch feedback */
+  .card-wrap.touch-active {
+    transform: scale(1.05);
+    transition: transform 0.1s;
+  }
+  
+  .card-wrap.swiping {
+    opacity: 0.7;
+  }
+  
+  /* Prevent text selection on touch */
+  .card-wrap, .btn, .tab {
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+  }
+}
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+  .lobby-card {
+    padding: 1rem;
+  }
+  
+  .card-wrap {
+    width: 120px;
+    height: 168px;
+  }
+  
+  .board .card-wrap {
+    width: 85px;
+    height: 119px;
+  }
+  
+  .opponents .card-wrap {
+    width: 85px;
+    height: 119px;
+  }
+  
+  .hand .card-wrap {
+    margin-left: -35px;
+  }
+  
+  .hand-container {
+    min-height: 160px;
+  }
+  
+  .game-header {
+    padding: 0.5rem;
+    font-size: 0.9rem;
+  }
+  
+  .btn {
+    padding: 0.75rem 1.2rem;
+    font-size: 0.95rem;
+  }
+  
+  .attack-announcement {
+    font-size: 1.5rem;
+    padding: 1.5rem 2rem;
+  }
+  
+  .modal {
+    padding: 1rem;
+  }
+  
+  .cards-gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
+  }
+  
+  .gallery-card {
+    width: 85px !important;
+    height: 119px !important;
+  }
+}