/* Mobile-Specific Game Optimizations */

/* Allow horizontal scrolling on mobile for wide game boards */
html, body {
  overflow-x: auto; /* Changed from hidden to auto */
  width: 100%;
  position: relative;
  /* Prevent pull-to-refresh on mobile */
  overscroll-behavior-y: contain;
  /* Better mobile font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile game container adjustments */
@media (max-width: 767px) {
  /* Main game container */
  #game-container {
    position: static !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important; /* Allow both directions */
    /* Allow both horizontal and vertical scrolling for mobile */
    touch-action: pan-x pan-y !important; /* Allow both horizontal and vertical scrolling */
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 10px 100px 10px !important; /* Reduced from 220px */
  }
  
  .game-container {
    padding: 8px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Allow full scrolling */
    max-height: none !important; /* Remove 100vh-200px cap from base CSS */
    overflow: auto !important; /* Allow both directions */
    /* Allow horizontal and vertical scrolling but prioritize cell clicking */
    touch-action: pan-x pan-y !important; /* Allow both horizontal and vertical scrolling */
    overflow-x: auto !important;
    width: max-content !important;
    /* Ensure full board height is always visible (no clipping of 10th row) */
    max-height: none !important; /* Remove 100vh-200px cap from base CSS */
    overflow-y: visible !important; /* Let page itself scroll instead of clipping inside board */
  }
  
  /* Game title optimization */
  h1 {
    font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
    margin: 5px 0 8px 0 !important;
    padding: 0 10px !important;
    text-align: center !important;
    /* Add glow effect for better visibility */
    text-shadow: 
      0 0 20px var(--primary), 
      0 0 10px #fff,
      0 0 5px rgba(0, 226, 255, 0.8) !important;
    line-height: 1.2 !important;
  }
  
  /* Status bar mobile optimization */
  #status-bar {
    font-size: clamp(0.8rem, 2.5vw, 0.9rem) !important;
    padding: 8px 12px !important;
    margin: 0 5px 8px 5px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    /* Enhanced visual feedback */
    background: linear-gradient(135deg, rgba(0, 226, 255, 0.1), rgba(0, 226, 255, 0.05)) !important;
    border: 2px solid rgba(0, 226, 255, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px rgba(0, 226, 255, 0.2) !important;
    /* Ensure it's above other elements */
    position: relative;
    z-index: 10;
  }
  
  /* Game board centering and sizing */
  #game-board {
    /* Allow horizontal scrolling and cell clicks */
    touch-action: pan-x pan-y !important; /* Allow both horizontal and vertical scrolling */
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 10px auto !important;
    /* Ensure clicks work */
    pointer-events: auto !important;
    max-width: none !important; /* Remove width constraint to allow horizontal scrolling */
    scroll-behavior: smooth !important;
    padding: clamp(4px, 1vw, 8px) !important;
    /* Enhanced board shadow for depth */
    box-shadow: 
      0 0 clamp(30px, 8vw, 60px) rgba(0, 226, 255, 0.5), 
      0 0 clamp(20px, 5vw, 40px) rgba(0, 0, 0, 0.9),
      0 0 0 clamp(3px, 0.8vw, 5px) rgba(0, 226, 255, 0.4) !important;
    /* Center the board content */
    display: grid !important;
    place-items: center !important;
    position: relative;
    z-index: 1;
    /* Ensure board doesn't go behind action panel */
    margin-bottom: 16px !important;
    overflow-x: auto !important;
    overflow-y: visible !important; /* allow vertical page scroll */
    max-width: none !important; /* allow full width grid */
    width: max-content !important;
    /* Ensure full board height is always visible (no clipping of 10th row) */
    max-height: none !important; /* Remove 100vh-200px cap from base CSS */
    overflow-y: visible !important; /* Let page itself scroll instead of clipping inside board */
  }
  
  /* Cell interaction fixes */
  .cell {
    touch-action: pan-x pan-y !important; /* Allow scrolling while maintaining cell clicks */
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Unified panel mobile optimization */
  .unified-panel {
    width: calc(100% - 16px) !important;
    margin: 8px auto !important;
    font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
    /* Use EXACT same background as base unified-panel.css */
    background: linear-gradient(135deg, 
      rgba(10, 15, 30, 0.95) 0%, 
      rgba(15, 25, 40, 0.92) 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
      0 2px 12px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(0, 226, 255, 0.1) !important;
    border: 1px solid rgba(0, 226, 255, 0.25) !important;
    border-radius: 15px !important;
    /* Ensure it's positioned properly */
    position: relative;
    z-index: 2;
    /* Compact on mobile */
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Allow panel scrolling but maintain button functionality */
    touch-action: pan-y !important; /* Only allow vertical scrolling */
  }
  
  /* Mobile-optimized panel layout */
  .panel-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  
  /* Reduce padding and margins in panel sections */
  .panel-section {
    padding: 8px 10px !important;
    /* Use EXACT same section separation as base unified-panel.css */
    border-bottom: 1px solid rgba(0, 226, 255, 0.15) !important;
    border-radius: 8px !important;
    background: none !important; /* Remove blue background */
    margin-bottom: 5px !important;
  }
  
  .panel-section:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
  
  /* Character stats section - horizontal layout on mobile */
  .character-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
    gap: 6px !important;
  }
  
  /* Character value containers - enhanced for mobile */
  .character-value {
    padding: 6px 8px !important;
    min-height: var(--mobile-touch-target) !important;
    gap: 4px !important;
    /* Use EXACT same background as base unified-panel.css */
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
  }
  
  /* Touch feedback for character values */
  .character-value:active {
    transform: scale(0.95) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
  
  .character-value .char-icon {
    width: clamp(20px, 5vw, 24px) !important;
    height: clamp(20px, 5vw, 24px) !important;
    /* Remove blue filter to match landscape mode */
    filter: none !important;
  }
  
  .character-value .char-number {
    font-size: clamp(14px, 3.5vw, 18px) !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px currentColor !important;
    margin-top: 2px !important;
  }
  
  /* Score and combo displays - mobile layout with CONSISTENT COLORS */
  .score-combo-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: center !important;
  }
  
  .score-display {
    /* Use EXACT same colors as base unified-panel.css */
    background: rgba(255, 204, 0, 0.08) !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 204, 0, 0.15) !important;
    text-align: center !important;
  }
  
  .score-display .score-value {
    font-size: clamp(20px, 6vw, 32px) !important;
    font-weight: bold !important;
    color: #ffce00 !important;
    text-shadow: 0 2px 6px rgba(255, 204, 0, 0.4) !important;
    animation: scoreGlow 2s ease-in-out infinite !important;
    line-height: 1 !important;
  }
  
  @keyframes scoreGlow {
    0%, 100% { text-shadow: 0 2px 6px rgba(255, 204, 0, 0.4); }
    50% { text-shadow: 0 2px 6px rgba(255, 204, 0, 0.6), 0 0 15px rgba(255, 204, 0, 0.3); }
  }
  
  .combo-display {
    text-align: center !important;
  }
  
  .combo-counter {
    /* Use EXACT same colors as base unified-panel.css */
    background: rgba(0, 226, 255, 0.08) !important;
    padding: 6px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 226, 255, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  
  .combo-counter .combo-value {
    font-size: clamp(16px, 4vw, 24px) !important;
    font-weight: bold !important;
    color: #00e2ff !important;
    text-shadow: 0 2px 4px rgba(0, 226, 255, 0.4) !important;
  }
  
  .combo-counter .combo-x {
    font-size: clamp(12px, 3vw, 16px) !important;
    color: rgba(0, 226, 255, 0.6) !important;
    opacity: 1 !important; /* Remove duplicate opacity */
  }
  
  /* Difficulty and threshold sections - mobile layout with CONSISTENT COLORS */
  .difficulty-threshold-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: center !important;
  }
  
  .difficulty-section {
    /* Use EXACT same colors as base unified-panel.css */
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-align: center !important;
  }
  
  .threshold-section {
    /* Use EXACT same colors as base unified-panel.css */
    background: rgba(255, 50, 50, 0.1) !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 50, 50, 0.25) !important;
    text-align: center !important;
  }
  
  .difficulty-value {
    font-size: clamp(12px, 3vw, 16px) !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-shadow: none !important; /* Use same as base */
  }
  
  .threshold-value {
    font-size: clamp(16px, 4vw, 24px) !important;
    font-weight: bold !important;
    color: #ff4444 !important;
    text-shadow: 0 2px 4px rgba(255, 0, 0, 0.4) !important;
    animation: thresholdPulse 3s ease-in-out infinite !important;
  }
  
  @keyframes thresholdPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  
  /* Stats section - compact mobile layout */
  .stats-section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
  
  .stat-row {
    padding: 4px 6px !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
    /* Use EXACT same background as base unified-panel.css */
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 6px !important;
    border: none !important; /* Remove blue border */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .stat-label {
    font-size: clamp(9px, 2vw, 11px) !important;
    opacity: 0.8 !important;
  }
  
  .stat-value {
    font-size: clamp(10px, 2.5vw, 12px) !important;
    font-weight: bold !important;
    color: var(--primary) !important;
  }
  
  /* Recent scores - mobile optimized */
  .recent-scores {
    max-height: 80px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-top: 8px !important;
  }
  
  .score-entry {
    padding: 4px 8px !important;
    font-size: clamp(9px, 2vw, 11px) !important;
    /* Use EXACT same background as base unified-panel.css */
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 6px !important;
    margin-bottom: 3px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Game controls - minimal mobile presence */
  .game-controls {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    z-index: 100 !important;
  }
  
  .game-controls .action-btn {
    padding: 8px 12px !important;
    font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(14, 21, 48, 0.9), rgba(20, 30, 60, 0.9)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(0, 226, 255, 0.3) !important;
    color: var(--primary) !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }
  
  .game-controls .action-btn:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 226, 255, 0.5) !important;
  }
  
  /* Prevent overlap between the floating "Menu" button and the history (ℹ) button */
  #history-button {
    /* Place the info button just below the Menu button */
    top: 60px !important; /* 10px (Menu top) + ~40-50px button height + extra spacing */
    right: 10px !important; /* Keep it aligned to the right edge */
  }
}

/* Small mobile optimization (under 400px) */
@media (max-width: 400px) {
  /* Even more compact unified panel */
  .unified-panel {
    font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
    margin: 5px auto !important;
  }
  
  .panel-section {
    padding: 6px 8px !important;
  }
  
  /* Smaller score display */
  .score-display .score-value {
    font-size: clamp(18px, 5vw, 24px) !important;
  }
  
  .combo-counter .combo-value {
    font-size: clamp(14px, 3.5vw, 20px) !important;
  }
  
  /* Compact character values */
  .character-value {
    padding: 4px 6px !important;
    min-height: 36px !important;
  }
  
  .character-value .char-icon {
    width: 18px !important;
    height: 18px !important;
  }
  
  .character-value .char-number {
    font-size: clamp(12px, 3vw, 14px) !important;
  }
  
  /* Smaller threshold display */
  .threshold-value {
    font-size: clamp(14px, 3.5vw, 18px) !important;
  }
  
  /* Game title */
  h1 {
    font-size: clamp(1.1rem, 3.5vw, 1.3rem) !important;
    margin: 4px 0 6px 0 !important;
  }
  
  /* Status bar */
  #status-bar {
    font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
    padding: 6px 8px !important;
  }
}

/* Very small mobile (under 350px) */
@media (max-width: 350px) {
  /* Ultra compact layout */
  .unified-panel {
    font-size: clamp(0.7rem, 1.8vw, 0.8rem) !important;
    border-radius: 10px !important;
    margin: 4px auto !important;
  }
  
  .panel-section {
    padding: 4px 6px !important;
  }
  
  /* Minimal score display */
  .score-display .score-value {
    font-size: clamp(16px, 4.5vw, 22px) !important;
  }
  
  .combo-counter .combo-value {
    font-size: clamp(12px, 3vw, 18px) !important;
  }
  
  /* Hide less important elements or make them smaller */
  .section-label {
    font-size: clamp(8px, 2vw, 10px) !important;
  }
  
  .threshold-warning {
    font-size: clamp(7px, 1.8vw, 9px) !important;
    padding: 2px 4px !important;
  }
  
  /* Smaller game board padding */
  #game-board {
    padding: 4px !important;
  }
  
  /* More compact character stats */
  .character-stats {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important;
    gap: 4px !important;
  }
}

/* Landscape mobile optimization */
@media (max-width: 767px) and (orientation: landscape) {
  /* Optimize for landscape mobile viewing */
  body {
    padding-top: 2px !important;
    padding-bottom: 80px !important;
  }
  
  h1 {
    margin: 2px 0 4px 0 !important;
    font-size: clamp(1.1rem, 3vw, 1.3rem) !important;
  }
  
  .unified-panel {
    max-height: 50vh !important;
    overflow-y: auto !important;
    margin: 4px auto !important;
  }
  
  .panel-section {
    padding: 6px 8px !important;
  }
  
  /* Make the game board more prominent in landscape */
  #game-board {
    margin: 4px auto !important;
  }
  
  /* Ensure action panel doesn't take too much space */
  #game-container {
    padding-bottom: min(15vh, 100px) !important; /* Reduced from min(30vh, 180px) */
  }
  
  .game-container {
    max-height: calc(100vh - min(15vh, 100px) - 20px); /* Reduced from min(30vh, 180px) */
  }
  
  /* FIXED GAME CONTROLS - SAME AS PORTRAIT MODE */
  .game-controls {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    z-index: 100 !important;
  }
  
  .game-controls .action-btn {
    padding: 8px 12px !important;
    font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(14, 21, 48, 0.9), rgba(20, 30, 60, 0.9)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(0, 226, 255, 0.3) !important;
    color: var(--primary) !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 8px !important; /* Add spacing between stacked buttons */
  }
  
  .game-controls .action-btn:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 226, 255, 0.5) !important;
  }
  
  /* Ensure history button is positioned below the fixed game controls */
  #history-button {
    position: fixed !important;
    top: 120px !important; /* Position below the stacked menu/end turn buttons */
    right: 10px !important;
    z-index: 100 !important;
  }
}

/* Touch-specific optimizations */
@media (hover: none) and (pointer: coarse) {
  
  /* Enhance touch targets */
  button,
  .cell,
  .character-value,
  .deployable-character {
    min-width: var(--mobile-touch-target);
    min-height: var(--mobile-touch-target);
  }
  
  /* Improve touch feedback */
  button:active,
  .cell:active,
  .character-value:active {
    opacity: 0.9;
    transition: opacity 0.1s;
  }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Prevent iOS bounce scrolling */
  body {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  #game-container {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix iOS form zoom */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Android-specific fixes */
@media (hover: none) and (pointer: coarse) and (min-resolution: 2dppx) {
  /* High DPI adjustments */
  .unified-panel {
    border-width: 0.5px;
  }
  
  .panel-section::after {
    height: 0.5px;
  }
}

/* Performance optimizations for mobile */
@media (max-width: 767px) {
  /* Reduce animation complexity */
  * {
    animation-duration: 0.3s !important;
  }
  
  /* Disable complex animations */
  .unified-panel::before,
  .threshold-section::before {
    display: none !important;
  }
  
  /* Simplify shadows */
  .unified-panel,
  #game-board,
  .cell {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

/* === FINAL MOBILE OVERRIDES (ENABLE SCROLL & FIX STATUS BAR) === */
@media (max-width: 767px) {
  html, body {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #game-container {
    position: static !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    padding: 10px 10px 100px 10px !important; /* space for action panel */
  }

  /* Place status bar within normal flow so it doesn't overlay panels */
  #status-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    z-index: 5 !important;
  }

  /* Ensure unified panel starts below status bar */
  .unified-panel {
    margin-top: 10px !important;
  }
}

/* === ENHANCED MOBILE PORTAL STYLING === */
@media (max-width: 767px) {
  /* Enhanced portal base styling for mobile */
  .cell.portal {
    /* Larger, more prominent glow for mobile visibility */
    box-shadow: 
      0 0 clamp(25px, 8vw, 50px) rgba(0, 145, 255, 0.8),
      0 0 clamp(40px, 12vw, 80px) rgba(0, 145, 255, 0.6),
      0 0 clamp(60px, 15vw, 120px) rgba(0, 145, 255, 0.3),
      inset 0 0 clamp(15px, 4vw, 30px) rgba(255, 255, 255, 0.2) !important;
    
    /* Enhanced gradient for better mobile visibility */
    background: radial-gradient(
      ellipse at center, 
      rgba(128, 231, 255, 0.95) 0%, 
      rgba(62, 184, 255, 0.9) 30%, 
      rgba(0, 145, 255, 0.85) 70%, 
      rgba(0, 121, 255, 0.8) 100%
    ) !important;
    
    /* Stronger border for mobile */
    border: clamp(2px, 0.8vw, 4px) solid var(--portal) !important;
    border-radius: clamp(8px, 2vw, 12px) !important;
    
    /* Enhanced animation for mobile attention */
    animation: mobilePortalGlow 2.5s infinite ease-in-out !important;
    
    /* Better touch feedback */
    transform: scale(1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Ensure visibility above other elements */
    z-index: 5 !important;
    position: relative !important;
  }
  
  /* Enhanced mobile portal glow animation */
  @keyframes mobilePortalGlow {
    0%, 100% {
      box-shadow: 
        0 0 clamp(25px, 8vw, 50px) rgba(0, 145, 255, 0.8),
        0 0 clamp(40px, 12vw, 80px) rgba(0, 145, 255, 0.6),
        0 0 clamp(60px, 15vw, 120px) rgba(0, 145, 255, 0.3);
      transform: scale(1);
    }
    50% {
      box-shadow: 
        0 0 clamp(35px, 10vw, 70px) rgba(0, 145, 255, 1),
        0 0 clamp(50px, 15vw, 100px) rgba(0, 145, 255, 0.8),
        0 0 clamp(80px, 20vw, 160px) rgba(0, 145, 255, 0.5);
      transform: scale(1.05);
    }
  }
  
  /* Enhanced portal pulse effect for mobile */
  .cell.portal::before {
    /* Larger pulse area for mobile */
    top: -clamp(8px, 3vw, 15px) !important;
    left: -clamp(8px, 3vw, 15px) !important;
    right: -clamp(8px, 3vw, 15px) !important;
    bottom: -clamp(8px, 3vw, 15px) !important;
    
    /* Enhanced pulse gradient */
    background: radial-gradient(
      circle, 
      rgba(0, 145, 255, 0.4) 0%, 
      rgba(0, 145, 255, 0.2) 50%, 
      transparent 80%
    ) !important;
    
    /* Faster, more noticeable animation */
    animation: mobilePortalPulse 1.8s infinite ease-in-out !important;
    
    /* Enhanced visual effect */
    border-radius: 50% !important;
    filter: blur(clamp(1px, 0.5vw, 2px)) !important;
  }
  
  @keyframes mobilePortalPulse {
    0%, 100% {
      transform: scale(0.8);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.4);
      opacity: 0.7;
    }
  }
  
  /* Enhanced mobile portal icon */
  .portal-icon {
    /* Larger, more visible icon */
    font-size: calc(var(--cell-size) * 0.5) !important;
    
    /* Enhanced glow effect */
    filter: 
      drop-shadow(0 0 clamp(12px, 3vw, 20px) rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 clamp(6px, 2vw, 10px) rgba(0, 145, 255, 0.9)) !important;
    
    /* Enhanced text shadow */
    text-shadow: 
      0 0 clamp(15px, 4vw, 25px) #00e2ff, 
      0 0 clamp(8px, 2vw, 12px) #fff, 
      0 0 clamp(3px, 1vw, 5px) #0091ff,
      0 0 clamp(1px, 0.3vw, 2px) rgba(255, 255, 255, 0.9) !important;
    
    /* Smoother rotation for mobile */
    animation: mobilePortalSwirl 3s infinite linear !important;
    
    /* Better positioning */
    z-index: 10 !important;
    transform-origin: center !important;
  }
  
  @keyframes mobilePortalSwirl {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
  }
  
  /* Enhanced green portal for mobile */
  .cell.portal.green {
    background: radial-gradient(
      ellipse at center, 
      rgba(128, 255, 155, 0.95) 0%, 
      rgba(62, 255, 107, 0.9) 30%, 
      rgba(0, 173, 47, 0.85) 70%, 
      rgba(0, 145, 39, 0.8) 100%
    ) !important;
    
    box-shadow: 
      0 0 clamp(25px, 8vw, 50px) rgba(0, 255, 60, 0.8),
      0 0 clamp(40px, 12vw, 80px) rgba(0, 173, 47, 0.6),
      0 0 clamp(60px, 15vw, 120px) rgba(0, 173, 47, 0.3) !important;
    
    border-color: #00ad2f !important;
  }
  
  .portal.green .portal-icon {
    filter: 
      drop-shadow(0 0 clamp(12px, 3vw, 20px) rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 clamp(6px, 2vw, 10px) rgba(0, 255, 60, 0.9)) !important;
    
    text-shadow: 
      0 0 clamp(15px, 4vw, 25px) #00ff3c, 
      0 0 clamp(8px, 2vw, 12px) #fff, 
      0 0 clamp(3px, 1vw, 5px) #00ad2f,
      0 0 clamp(1px, 0.3vw, 2px) rgba(255, 255, 255, 0.9) !important;
  }
  
  /* Enhanced purple portal for mobile */
  .cell.portal.purple {
    background: radial-gradient(
      ellipse at center, 
      rgba(200, 128, 255, 0.95) 0%, 
      rgba(161, 62, 255, 0.9) 30%, 
      rgba(98, 0, 173, 0.85) 70%, 
      rgba(82, 0, 145, 0.8) 100%
    ) !important;
    
    box-shadow: 
      0 0 clamp(25px, 8vw, 50px) rgba(144, 0, 255, 0.8),
      0 0 clamp(40px, 12vw, 80px) rgba(98, 0, 173, 0.6),
      0 0 clamp(60px, 15vw, 120px) rgba(98, 0, 173, 0.3) !important;
    
    border-color: #6200ad !important;
  }
  
  .portal.purple .portal-icon {
    filter: 
      drop-shadow(0 0 clamp(12px, 3vw, 20px) rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 clamp(6px, 2vw, 10px) rgba(144, 0, 255, 0.9)) !important;
    
    text-shadow: 
      0 0 clamp(15px, 4vw, 25px) #9000ff, 
      0 0 clamp(8px, 2vw, 12px) #fff, 
      0 0 clamp(3px, 1vw, 5px) #6200ad,
      0 0 clamp(1px, 0.3vw, 2px) rgba(255, 255, 255, 0.9) !important;
  }
  
  /* Enhanced portal cooldown for mobile */
  .cell.portal.portal-cooldown {
    background: radial-gradient(
      ellipse at center, 
      rgba(102, 102, 102, 0.8) 0%, 
      rgba(68, 68, 68, 0.7) 45%, 
      rgba(34, 34, 34, 0.6) 100%
    ) !important;
    
    box-shadow: 
      0 0 clamp(12px, 3vw, 20px) rgba(102, 102, 102, 0.4),
      0 0 clamp(20px, 5vw, 35px) rgba(102, 102, 102, 0.2) !important;
    
    border-color: #666 !important;
    opacity: 0.7 !important;
    animation: none !important;
  }
  
  .cell.portal.portal-cooldown .portal-icon {
    filter: 
      drop-shadow(0 0 clamp(6px, 2vw, 10px) rgba(102, 102, 102, 0.5)) !important;
    
    text-shadow: 
      0 0 clamp(8px, 2vw, 12px) #666, 
      0 0 clamp(4px, 1vw, 6px) #333 !important;
    
    animation: none !important;
    opacity: 0.8 !important;
  }
  
  /* Enhanced portal cooldown text for mobile */
  .portal-cooldown-text {
    /* Larger, more visible cooldown indicator */
    width: clamp(16px, 5vw, 24px) !important;
    height: clamp(16px, 5vw, 24px) !important;
    font-size: calc(var(--cell-size) * 0.2) !important;
    
    /* Position in top-left to avoid blocking character/enemy numbers */
    top: clamp(1px, 0.5vw, 2px) !important;
    left: clamp(1px, 0.5vw, 2px) !important;
    right: auto !important;
    
    /* Enhanced styling */
    background: linear-gradient(145deg, #1a4a6b, #0f2f4a) !important;
    border: clamp(1px, 0.3vw, 2px) solid #3a7fb8 !important;
    border-radius: clamp(3px, 1vw, 6px) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    z-index: 20 !important;
    opacity: 0.97 !important;
    
    /* Enhanced glow */
    box-shadow: 
      0 0 clamp(8px, 2vw, 12px) rgba(26, 74, 107, 1),
      0 0 clamp(12px, 3vw, 18px) rgba(127, 199, 255, 0.9),
      inset 0 0 clamp(4px, 1vw, 6px) rgba(127, 199, 255, 0.5),
      0 3px 6px rgba(0, 0, 0, 0.6) !important;
    
    /* Enhanced text shadow */
    text-shadow: 
      0 0 clamp(4px, 1vw, 6px) rgba(127, 199, 255, 1),
      0 0 clamp(2px, 0.5vw, 3px) rgba(255, 255, 255, 1),
      1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    
    /* More noticeable animation */
    animation: mobileCooldownFlicker 1.2s infinite ease-in-out !important;
  }
  
  /* Mobile green portal cooldown text */
  .portal.green .portal-cooldown-text {
    background: linear-gradient(145deg, #1a6b2f, #0f4a1a) !important;
    border-color: #3ab85a !important;
    box-shadow: 
      0 0 clamp(8px, 2vw, 12px) rgba(26, 107, 47, 1),
      0 0 clamp(12px, 3vw, 18px) rgba(127, 255, 147, 0.9),
      inset 0 0 clamp(4px, 1vw, 6px) rgba(127, 255, 147, 0.5),
      0 3px 6px rgba(0, 0, 0, 0.6) !important;
    text-shadow: 
      0 0 clamp(4px, 1vw, 6px) rgba(127, 255, 147, 1),
      0 0 clamp(2px, 0.5vw, 3px) rgba(255, 255, 255, 1),
      1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    animation: mobileGreenCooldownFlicker 1.2s infinite ease-in-out !important;
  }
  
  /* Mobile purple portal cooldown text */
  .portal.purple .portal-cooldown-text {
    background: linear-gradient(145deg, #4a1a6b, #2f0f4a) !important;
    border-color: #b83aa3 !important;
    box-shadow: 
      0 0 clamp(8px, 2vw, 12px) rgba(74, 26, 107, 1),
      0 0 clamp(12px, 3vw, 18px) rgba(199, 127, 255, 0.9),
      inset 0 0 clamp(4px, 1vw, 6px) rgba(199, 127, 255, 0.5),
      0 3px 6px rgba(0, 0, 0, 0.6) !important;
    text-shadow: 
      0 0 clamp(4px, 1vw, 6px) rgba(199, 127, 255, 1),
      0 0 clamp(2px, 0.5vw, 3px) rgba(255, 255, 255, 1),
      1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    animation: mobilePurpleCooldownFlicker 1.2s infinite ease-in-out !important;
  }
  
  @keyframes mobileCooldownFlicker {
    0%, 100% { 
      opacity: 0.97; 
      transform: scale(1);
      box-shadow: 
        0 0 clamp(8px, 2vw, 12px) rgba(26, 74, 107, 1),
        0 0 clamp(12px, 3vw, 18px) rgba(127, 199, 255, 0.9),
        inset 0 0 clamp(4px, 1vw, 6px) rgba(127, 199, 255, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.6);
    }
    50% { 
      opacity: 1; 
      transform: scale(1.1);
      box-shadow: 
        0 0 clamp(10px, 3vw, 16px) rgba(26, 74, 107, 1),
        0 0 clamp(15px, 4vw, 24px) rgba(127, 199, 255, 1),
        inset 0 0 clamp(5px, 1.5vw, 8px) rgba(127, 199, 255, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.7);
    }
  }
  
  @keyframes mobileGreenCooldownFlicker {
    0%, 100% { 
      opacity: 0.97; 
      transform: scale(1);
      box-shadow: 
        0 0 clamp(8px, 2vw, 12px) rgba(26, 107, 47, 1),
        0 0 clamp(12px, 3vw, 18px) rgba(127, 255, 147, 0.9),
        inset 0 0 clamp(4px, 1vw, 6px) rgba(127, 255, 147, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.6);
    }
    50% { 
      opacity: 1; 
      transform: scale(1.1);
      box-shadow: 
        0 0 clamp(10px, 3vw, 16px) rgba(26, 107, 47, 1),
        0 0 clamp(15px, 4vw, 24px) rgba(127, 255, 147, 1),
        inset 0 0 clamp(5px, 1.5vw, 8px) rgba(127, 255, 147, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.7);
    }
  }
  
  @keyframes mobilePurpleCooldownFlicker {
    0%, 100% { 
      opacity: 0.97; 
      transform: scale(1);
      box-shadow: 
        0 0 clamp(8px, 2vw, 12px) rgba(74, 26, 107, 1),
        0 0 clamp(12px, 3vw, 18px) rgba(199, 127, 255, 0.9),
        inset 0 0 clamp(4px, 1vw, 6px) rgba(199, 127, 255, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.6);
    }
    50% { 
      opacity: 1; 
      transform: scale(1.1);
      box-shadow: 
        0 0 clamp(10px, 3vw, 16px) rgba(74, 26, 107, 1),
        0 0 clamp(15px, 4vw, 24px) rgba(199, 127, 255, 1),
        inset 0 0 clamp(5px, 1.5vw, 8px) rgba(199, 127, 255, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.7);
    }
  }
  
  /* Touch feedback for portals */
  .cell.portal:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
  }
  
  .cell.portal:active::before {
    transform: scale(1.2) !important;
    opacity: 0.9 !important;
  }
}

/* Small mobile portal optimizations */
@media (max-width: 400px) {
  .cell.portal {
    /* Slightly reduced effects for smaller screens */
    box-shadow: 
      0 0 clamp(20px, 6vw, 35px) rgba(0, 145, 255, 0.8),
      0 0 clamp(30px, 9vw, 55px) rgba(0, 145, 255, 0.6),
      0 0 clamp(45px, 12vw, 80px) rgba(0, 145, 255, 0.3) !important;
  }
  
  .portal-icon {
    font-size: calc(var(--cell-size) * 0.45) !important;
  }
  
  .portal-cooldown-text {
    width: clamp(14px, 4vw, 20px) !important;
    height: clamp(14px, 4vw, 20px) !important;
    font-size: calc(var(--cell-size) * 0.18) !important;
  }
}

/* Very small mobile portal optimizations */
@media (max-width: 350px) {
  .cell.portal {
    /* Further reduced effects for very small screens */
    box-shadow: 
      0 0 clamp(15px, 5vw, 25px) rgba(0, 145, 255, 0.8),
      0 0 clamp(25px, 7vw, 40px) rgba(0, 145, 255, 0.6),
      0 0 clamp(35px, 10vw, 60px) rgba(0, 145, 255, 0.3) !important;
  }
  
  .portal-icon {
    font-size: calc(var(--cell-size) * 0.4) !important;
  }
  
  .portal-cooldown-text {
    width: clamp(12px, 3.5vw, 16px) !important;
    height: clamp(12px, 3.5vw, 16px) !important;
    font-size: calc(var(--cell-size) * 0.16) !important;
  }
}

/* === MOBILE ANIMATION SPEED ADJUSTMENTS === */
@media (max-width: 767px) {
  /* Slow down portal rotation to desktop speed (4s) */
  .portal-icon {
    animation-duration: 4s !important; /* matches original portalSwirl speed */
  }
  
  /* Slow down enemy order pulse */
  .enemy-order {
    animation-duration: 3s !important; /* desktop-equivalent pacing */
  }
  
  /* Slow down dotted intended move tile pulses */
  .cell.possible-move {
    animation-duration: 3s !important; /* smoother, less intense pulse */
  }
  
  .cell.possible-move.berserk-move {
    animation-duration: 3s !important;
  }
  
  .cell.possible-move::after {
    animation-duration: 3s !important;
  }
}

/* === FURTHER SLOW DOWN MOVE PULSES ON MOBILE === */
@media (max-width: 767px) {
  /* One full pulse per second */
  .cell.possible-move {
    animation-duration: 1s !important;
  }
  .cell.possible-move.berserk-move {
    animation-duration: 1s !important;
  }
  .cell.possible-move::after {
    animation-duration: 1s !important;
  }
}

/* === PORTAL COOLDOWN TEXT Z-INDEX FIX === */
@media (max-width: 767px) {
  .portal-cooldown-text {
    z-index: 20 !important; /* below player/enemy (30) but above portal icons (10) */
  }
}

/* MOBILE PUSHABLE ROCK HIGHLIGHTING */
.cell.pushable-rock {
  box-shadow:
    0 0 clamp(15px, 4vw, 30px) rgba(255, 193, 7, 0.9),
    0 0 clamp(25px, 6vw, 50px) rgba(255, 193, 7, 0.6);
  border: clamp(2px, 0.5vw, 3px) dashed #FFC107;
  background: linear-gradient(145deg, #3a3415 50%, #45401a 100%);
  transform: scale(1.05);
  animation: pulsePushableRock 1.8s infinite ease-in-out;
}

.cell.pushable-rock::after {
  content: '';
  position: absolute;
  top: -clamp(2px, 1vw, 5px);
  left: -clamp(2px, 1vw, 5px);
  right: -clamp(2px, 1vw, 5px);
  bottom: -clamp(2px, 1vw, 5px);
  border: clamp(1px, 0.3vw, 2px) solid rgba(255, 193, 7, 0.4);
  border-radius: clamp(8px, 3vw, 15px);
  animation: expandPushableIndicator 1.8s infinite ease-in-out;
}

@keyframes pulsePushableRock {
  0%, 100% { 
    box-shadow:
      0 0 clamp(15px, 4vw, 30px) rgba(255, 193, 7, 0.9),
      0 0 clamp(25px, 6vw, 50px) rgba(255, 193, 7, 0.6);
    transform: scale(1.05);
  }
  50% { 
    box-shadow:
      0 0 clamp(20px, 5vw, 40px) rgba(255, 193, 7, 1),
      0 0 clamp(35px, 8vw, 70px) rgba(255, 193, 7, 0.8);
    transform: scale(1.08);
  }
}

@keyframes expandPushableIndicator {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

  /* Special fallback for game panels */
  .unified-panel {
    background: linear-gradient(135deg, 
      rgba(13, 39, 77, 0.9) 0%, 
      rgba(26, 35, 77, 0.85) 100%) !important;
    border: 1px solid rgba(0, 226, 255, 0.3) !important;
  }
  
  /* Fallback for modals */
  .modal-content,
  .end-modal {
    background: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
}

/* Performance optimization: Use will-change for better GPU handling */
@media (min-width: 481px) {
  .unified-panel,
  .modal-content,
  .character-action-panel,
  .end-modal {
    will-change: backdrop-filter;
  }
}
/* Fix container scrolling */
.game-container {
  max-height: calc(100vh - min(15vh, 100px) - 20px);
  /* Allow scrolling in mobile game container */
  touch-action: pan-y !important; /* Only allow vertical scrolling */
}