/* MOBILE-FIRST DESIGN - Primary target is mobile devices */

/* BASE MOBILE STYLES (default) */
:root {
  --cell-size: 48px;
  --gap: 3px;
  --mobile-padding: 15px;
  --touch-target: 50px;
}

/* MOBILE DEFAULT LAYOUT */
body {  
  padding: 10px 10px 320px 10px; /* Increased from 80px to 320px for action panel clearance */  
  overflow-x: auto; /* Changed from hidden to auto to allow horizontal scrolling */  
  -webkit-text-size-adjust: 100%;  
  -ms-text-size-adjust: 100%;
}

h1 { 
  font-size: 1.8em; 
  margin: 10px 0;
  text-align: center;
}

/* MOBILE GAME CONTAINER */
.game-container {
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 8px 5px 320px 5px !important; /* Increased from 80px to 320px for action panel clearance */
  width: 100%;
  max-height: none !important; /* Remove height restriction for full board height */
}

/* MOBILE PANELS - STACK VERTICALLY */
.score-panel, .combo-panel {
  width: 100%;
  max-width: 400px;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 15px;
}

.score-panel > div, .combo-panel > div {
  flex: 1 1 45%;
  min-width: 120px;
  margin: 5px;
}

/* MOBILE GAME BOARD */
#game-board {  
  margin: 5px auto !important;  
  justify-self: center;  
  max-width: none !important; /* Remove width constraint to allow horizontal scrolling */
  overflow: auto !important;  
  -webkit-overflow-scrolling: touch;  
  border-radius: 12px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.cell {  
  min-width: var(--cell-size);  
  min-height: var(--cell-size);  
  width: var(--cell-size);  
  height: var(--cell-size);  
  touch-action: pan-x pan-y; /* Allow both horizontal and vertical scrolling */  
  font-size: 1em;  
  -webkit-tap-highlight-color: transparent;
}

/* MOBILE MENUS */
.menu-content {
  padding: 20px 15px;
  width: 95%;
  max-width: 400px;
}

.game-title {
  font-size: 2.2em;
  margin-bottom: 15px;
}

.tagline {
  font-size: 1em;
  margin-bottom: 25px;
  line-height: 1.4;
}

.menu-btn {
  font-size: 1.2em;
  padding: 18px 15px;
  margin-bottom: 15px;
  min-height: var(--touch-target);
  border-radius: 12px;
}

.back-btn {
  padding: 15px 25px;
  font-size: 1.1em;
  min-height: var(--touch-target);
  border-radius: 10px;
}

/* MOBILE CHARACTER CARDS */
.character-cards {
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.character-card {
  width: 100%;
  max-width: 350px;
  padding: 20px;
  border-radius: 20px;
}

.menu-screen h2 {
  font-size: 1.8em;
  margin-bottom: 25px;
}

/* MOBILE ACTION PANELS - ESSENTIAL OVERRIDES ONLY */
@media (max-width: 767px) {
  .character-action-panel {
    /* Essential mobile positioning only - let ui-components.css handle the rest */
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
  }
}

/* MOBILE DEPLOYMENT SCREEN */
.deployment-characters {
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 10px; /* Add padding to prevent edge cutoff */
}

.deployable-character {
  width: 140px;
  height: 190px; /* Increased to match menus.css */
  padding: 15px;
  border-radius: 15px;
  min-height: var(--touch-target);
  box-sizing: border-box;
}

.selected-characters {
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.selected-slot {
  flex: 1 1 45%;
  min-width: 150px;
  margin-bottom: 15px;
  min-height: var(--touch-target);
  border-radius: 12px;
}

/* MOBILE HISTORY BUTTON */
#history-button {
  width: 50px;
  height: 50px;
  font-size: 22px;
  top: 15px;
  right: 15px;
  border-radius: 50%;
}

.history-content {
  padding: 25px 20px;
  width: 95%;
  max-width: 380px;
  border-radius: 20px;
}

/* MOBILE UPGRADE BUTTONS */
.upgrade-btn {
  font-size: 1em;
  padding: 15px 20px;
  min-height: var(--touch-target);
  border-radius: 12px;
}

/* MOBILE COINS DISPLAY */
.coins-container {
  padding: 12px 20px;
  justify-content: center;
  border-radius: 25px;
}

.coins-icon, .coins-value {
  font-size: 1.4em;
}

/* MOBILE SLIDE UP ANIMATION */
@keyframes mobileSlideUp {
  from {
    transform: translateY(100%) !important;
    opacity: 0 !important;
  }
  to {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
}

/* MOBILE TOUCH FEEDBACK */
.menu-btn:active,
.back-btn:active,
.upgrade-btn:active,
.character-action-btn:active,
.deployable-character:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.cell:active {
  transform: scale(1.1);
  transition: transform 0.1s ease;
}

/* MOBILE CHARACTER CARDS OPTIMIZATION */
.character-card .stat-row {
  font-size: 1em;
  padding: 3px 0;
}

.upgrade-info {
  font-size: 0.9em;
  padding: 12px 15px;
  border-radius: 12px;
}

/* MOBILE START BATTLE BUTTON */
.start-battle-btn {
  font-size: 1.4em;
  padding: 20px 30px;
  min-height: 60px;
  border-radius: 15px;
  margin-top: 25px;
}

/* SMALLER MOBILE SCREENS */
@media (max-width: 400px) {
  :root {
    --cell-size: 44px;
    --gap: 2px;
    --mobile-padding: 12px;
    --touch-target: 48px;
  }
  
  body {
    padding: 8px 12px 320px 12px; /* Increased from 80px to 320px for action panel clearance */
  }
  
  .menu-content {
    padding: 15px 12px;
  }
  
  .menu-btn {
    font-size: 1.1em;
    padding: 16px 12px;
  }
  
  .deployable-character {
    width: 125px; /* Increased to match menus.css */
    height: 175px; /* Increased to match menus.css */
    padding: 12px;
  }
}

/* VERY SMALL MOBILE SCREENS */
@media (max-width: 350px) {
  :root {
    --cell-size: 42px;
    --gap: 2px;
    --touch-target: 46px;
  }
  
  .game-title {
    font-size: 1.8em;
  }
  
  .menu-btn {
    font-size: 1.1em;
    padding: 16px 12px;
  }
  
  .deployable-character {
    width: 115px; /* Increased to match menus.css */
    height: 165px; /* Increased to match menus.css */
    padding: 10px;
  }
}

/* COMPACT ACTION PANEL LAYOUT FOR VERY SMALL MOBILE SCREENS */
@media (max-width: 420px) {
  /* Use a two-column grid inside the panel to save vertical space */
  .character-action-panel .panel-content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Make buttons shrink slightly and fit within their grid cell */
  .character-action-btn,
  .action-btn,
  [class*="character-action-panel"] button {
    min-width: auto !important; /* allow buttons to be narrower */
    width: 100% !important;    /* fill the grid cell */
    padding: 10px 8px !important; /* tighter padding */
    font-size: 0.9rem !important; /* slightly smaller font */
    line-height: 1.15 !important;
  }

  /* Allow text to wrap onto a second line if needed instead of overflowing */
  .character-action-btn .btn-text,
  .action-btn {
    white-space: normal !important;
  }
}

/* FALLBACK: Single-column ultra-compact layout for <340px screens */
@media (max-width: 340px) {
  .character-action-panel .panel-content {
    grid-template-columns: 1fr !important;
  }
}

/* ENSURE ALL INTERACTIVE ELEMENTS ARE TOUCH-FRIENDLY */
button, 
.clickable,
.menu-btn,
.back-btn,
.upgrade-btn,
.character-action-btn,
.deployable-character,
.cell {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* REMOVE DESKTOP-SPECIFIC FEATURES */
/* No hover states, no desktop-specific layouts, no mouse-only features */

/* Enhanced media queries */
@media (max-width: 400px) {
  :root {
    --cell-size: 48px;
    --gap: 3px;
  }
  h1 { 
    font-size: 1.5em; 
    margin-top: 10px;
  }
  #end-modal { padding: 20px 10px; }
  #splash-content { padding: 15px 10px; }
  .sw-crawl { font-size: 0.75em; }
  #splash h2 { font-size: 1.2em; }
  #splash ul { font-size: 0.8em; }
  .action-panel { padding: 8px 10px; }
  .action-btn { 
    font-size: 0.85em; 
    min-width: 70px; 
    padding: 8px 10px; 
  }
  #regen-btn { 
    padding: 8px 8px; 
    font-size: 0.85em; 
    min-width: 65px;
  }
  .action-counter { 
    font-size: 0.8em; 
    padding: 3px 8px;
  }
  .score-container { top: 5px; right: 5px; padding: 3px 8px; }
  .score-label { font-size: 0.65em; }
  .score-value { font-size: 0.85em; }
  .player {
    width: 36px;
    height: 36px;
    font-size: 1em;
  }
  .enemy {
    width: 34px;
    height: 34px;
    font-size: 0.95em;
  }
  .powerup {
    width: 28px;
    height: 28px;
    font-size: 0.9em;
  }
  .powerup .countdown {
    font-size: 0.65em;
    width: 13px;
    height: 13px;
  }
  #history-button {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  
  .history-content {
    padding: 20px 15px;
  }
  
  .history-content h2 {
    font-size: 1.4em;
    margin-bottom: 15px;
  }
  
  .history-stat {
    margin-bottom: 10px;
    padding-bottom: 6px;
  }
}

@media (max-width: 350px) {
  :root {
    --cell-size: 42px;
    --gap: 2px;
  }
  h1 { 
    font-size: 1.3em; 
    margin-top: 8px;
  }
  #status-bar { 
    font-size: 0.9em; 
    padding: 6px 8px; 
    min-height: 24px;
  }
  .action-panel { padding: 6px 8px; }
  .action-btn { 
    font-size: 0.8em; 
    min-width: 60px; 
    padding: 6px 8px; 
    margin-bottom: 4px;
  }
  #regen-btn { 
    padding: 6px 5px; 
    font-size: 0.8em; 
    min-width: 55px;
  }
  .action-counter { 
    font-size: 0.75em; 
    padding: 2px 6px;
  }
  .player {
    width: 32px;
    height: 32px;
    font-size: 0.9em;
  }
  .enemy {
    width: 30px;
    height: 30px;
    font-size: 0.85em;
  }
  .powerup {
    width: 24px;
    height: 24px;
    font-size: 0.8em;
  }
  .powerup .countdown {
    font-size: 0.6em;
    width: 12px;
    height: 12px;
    top: -5px;
    right: -5px;
  }
  .portal-icon, .rock-icon {
    font-size: 1.5em;
  }
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 900px) {
  .game-container {
    flex-direction: column;
    align-items: center;
  }
  
  .score-panel, .combo-panel {
    width: 100%;
    max-width: 400px;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
  
  .score-panel > div, .combo-panel > div {
    flex: 1 1 45%;
    min-width: 120px;
  }
}

/* Responsive Styles */
@media (max-width: 600px) {
  .menu-content {
    padding: 20px;
    width: 90%;
  }
  
  .game-title {
    font-size: 2em;
  }
  
  .tagline {
    font-size: 0.9em;
    margin-bottom: 20px;
  }
  
  .menu-btn {
    font-size: 1.1em;
    padding: 12px 0;
  }
  
  .character-cards {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  
  .character-card {
    width: 100%;
    max-width: 280px;
  }
  
  .menu-screen h2 {
    font-size: 1.5em;
  }
  
  /* Mobile action panel adjustments */
  .character-action-panel {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: 20px !important;
    top: auto !important;
    min-width: auto !important;
    max-width: none !important;
    animation: fadeInUp 0.3s ease-out !important;  }    .character-coins {    position: relative;    top: auto;    right: auto;    margin-bottom: 15px;    align-self: center;  }    .characters-header {    gap: 10px;    margin-bottom: 20px;  }    .coins-container {    padding: 4px 10px;  }
  
  .coins-icon, .coins-value {
    font-size: 1.1em;
  }
  
  .deployment-characters {
    gap: 10px;
  }
  
  .deployable-character {
    width: 100px;
    height: 130px;
    padding: 10px;
  }
  
  .selected-characters {
    gap: 10px;
  }
}

@media (max-width: 400px) {
  .menu-content {
    padding: 15px;
  }
  
  .game-title {
    font-size: 1.7em;
  }
  
  .tagline {
    font-size: 0.8em;
    margin-bottom: 15px;
  }
  
  .menu-btn {
    font-size: 1em;
    padding: 10px 0;
  }
  
  .back-btn {
    padding: 8px 20px;
    font-size: 0.9em;
  }
  
  /* More condensed styling for small screens */
  .character-card .stat-row {
    font-size: 0.8em;
  }
  
  .upgrade-info {
    font-size: 0.75em;
    padding: 6px 10px;
  }
  
  .upgrade-btn {
    font-size: 0.8em;
    padding: 6px 12px;
  }
}

/* Enhanced media queries for mobile optimization */

/* Base mobile improvements for all small screens */
@media (max-width: 900px) {
  /* Ensure touch targets are at least 44px */
  button, .menu-btn, .back-btn, .upgrade-btn, .character-action-btn, .deployable-character {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
  
  /* Better spacing for touch interfaces */
  .menu-buttons {
    gap: 20px;
  }
  
  .game-container {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .score-panel, .combo-panel {
    width: 100%;
    max-width: 400px;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
  
  .score-panel > div, .combo-panel > div {
    flex: 1 1 45%;
    min-width: 120px;
  }
  
  /* Make game board more touch-friendly */
  #game-board {
    margin: 10px auto;
    justify-self: center;
  }
  
  .cell {
    /* Ensure cells are large enough for touch */
    min-width: 44px;
    min-height: 44px;
  }
}

/* Mobile responsive styles for medium screens */
@media (max-width: 600px) {
  /* Improved layout for mobile devices */
  body {
    overflow-x: hidden;
  }
  
  .menu-content {
    padding: 20px 15px;
    width: 95%;
  }
  
  .game-title {
    font-size: 2em;
    margin-bottom: 10px;
  }
  
  .tagline {
    font-size: 0.9em;
    margin-bottom: 20px;
    line-height: 1.4;
  }
  
  .menu-btn {
    font-size: 1.1em;
    padding: 15px 10px;
    margin-bottom: 12px;
  }
  
  /* Character cards layout optimization */
  .character-cards {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .character-card {
    width: 100%;
    max-width: 300px;
    padding: 15px;
  }
  
  .menu-screen h2 {
    font-size: 1.6em;
    margin-bottom: 20px;
  }
  
  /* Mobile action panel improvements */
  .character-action-panel {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    top: auto !important;
    min-width: auto !important;
    max-width: none !important;
    animation: slideUpFromBottom 0.3s ease-out !important;
    border-radius: 15px;
    padding: 15px;
    backdrop-filter: blur(10px);
  }
  
  .character-action-btn {
    padding: 12px 15px;
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  /* Coins display optimization */
  .character-coins {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 15px;
  }
  
  .coins-container {
    padding: 8px 15px;
    justify-content: center;
  }
  
  .coins-icon, .coins-value {
    font-size: 1.2em;
  }
  
  /* Deployment screen mobile optimization */
  .deployment-characters {
    gap: 15px;
    justify-content: center;
  }
  
  .deployable-character {
    width: 110px;
    height: 140px;
    padding: 12px;
  }
  
  .selected-characters {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .selected-slot {
    flex: 1 1 45%;
    min-width: 140px;
    margin-bottom: 10px;
  }
  
  /* Game board mobile optimization */
  .game-container {
    padding: 10px;
  }
  
  .score-panel, .combo-panel {
    padding: 12px;
    border-radius: 12px;
  }
  
  /* History button mobile optimization */
  #history-button {
    width: 44px;
    height: 44px;
    font-size: 20px;
    top: 10px;
    right: 10px;
  }
  
  .history-content {
    padding: 20px 15px;
    width: 90%;
    max-width: 350px;
  }
  
  .history-content h2 {
    font-size: 1.4em;
    margin-bottom: 15px;
  }
  
  .history-stat {
    margin-bottom: 10px;
    padding-bottom: 6px;
  }
}

/* Small mobile devices */
@media (max-width: 400px) {
  .character-action-panel,
  #character-action-panel {
    left: 15px !important;
    right: 15px !important;
    bottom: 15px !important;
    max-height: min(30vh, 200px) !important;
    padding: 12px !important;
  }

  .character-action-btn,
  #character-action-panel button,
  .character-action-panel button {
    padding: 10px 12px !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    min-height: 44px !important;
  }
}

/* Very small mobile devices */
@media (max-width: 350px) {
  .character-action-panel,
  #character-action-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-height: min(25vh, 180px) !important;
    padding: 10px !important;
  }

  .character-action-btn,
  #character-action-panel button,
  .character-action-panel button {
    padding: 8px 10px !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
    min-height: 40px !important;
  }
}

/* Animation for mobile action panel */
@keyframes slideUpFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Improved touch feedback for mobile */
@media (hover: none) and (pointer: coarse) {
  /* These styles only apply to touch devices */
  
  .menu-btn:active,
  .back-btn:active,
  .upgrade-btn:active,
  .character-action-btn:active,
  .deployable-character:active {
    transition: transform 0.1s ease;
  }
  
  /* Add visual feedback for touch */
  .cell:active {
    transform: scale(1.1);
    transition: transform 0.1s ease;
  }
  
  /* Ensure action panels are properly sized for touch */
  .character-action-panel {
    min-height: 60px;
  }
  
  /* Better spacing for touch targets in menus */
  .menu-buttons .menu-btn {
    margin-bottom: 15px;
  }
  
  .character-cards .character-card {
    margin-bottom: 20px;
  }
}

/* === BULLETPROOF MOBILE ACTION PANEL SYSTEM === */
@media (max-width: 768px) {
  
  /* ENABLE PROPER SCROLLING */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    position: static !important;
    width: 100% !important;
  }

  /* GAME CONTAINER SCROLLING FIX */
  #game-container {
    position: static !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    padding: 8px 5px 320px 5px !important; /* Increased from 80px to 320px for action panel clearance */
  }

  /* STATUS BAR REPOSITIONING */
  #status-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    padding: 12px !important;
    background: rgba(14, 21, 48, 0.95) !important;
    border: 2px solid rgba(0, 226, 255, 0.4) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 15px rgba(0, 226, 255, 0.3) !important;
    z-index: 10 !important;
    font-size: 16px !important;
    text-align: center !important;
    color: #fff !important;
  }

  /* FORCE UNIFIED PANEL VISIBILITY */
  .unified-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    padding: 15px !important;
    background: rgba(14, 21, 48, 0.95) !important;
    border: 2px solid rgba(0, 226, 255, 0.4) !important;
    border-radius: 15px !important;
    box-shadow: 0 0 20px rgba(0, 226, 255, 0.3) !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* FORCE ALL PANEL CONTENT TO BE VISIBLE */
  .unified-panel .panel-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* FORCE PANEL SECTIONS TO SHOW */
  .unified-panel .panel-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* FORCE SCORE/COMBO/DIFFICULTY CONTAINERS TO SHOW */
  .score-combo-container,
  .difficulty-threshold-container,
  .character-stats,
  .stats-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* SIMPLE GRID FOR SCORE/COMBO - NO COLORED BACKGROUNDS */
  .score-combo-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    padding: 10px !important;
    /* Remove colored background to match base unified-panel.css */
    background: none !important;
    border-radius: 10px !important;
    border: none !important;
  }

  /* SIMPLE GRID FOR DIFFICULTY/THRESHOLD - NO COLORED BACKGROUNDS */
  .difficulty-threshold-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    padding: 10px !important;
    /* Remove colored background to match base unified-panel.css */
    background: none !important;
    border-radius: 10px !important;
    border: none !important;
  }

  /* ENSURE INDIVIDUAL SECTIONS ARE VISIBLE */
  .score-display,
  .combo-display,
  .difficulty-section,
  .threshold-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 10px !important;
    text-align: center !important;
    min-height: 60px !important;
  }

  /* FORCE TEXT ELEMENTS TO BE VISIBLE - WITH PROPER COLORS */
  .score-value,
  .combo-value,
  .difficulty-value,
  .threshold-value {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    /* Remove color override to preserve proper color palette */
    text-shadow: 0 0 10px currentColor !important;
  }

  /* ACTION PANEL COMPLETE OVERRIDE */
  #character-action-panel,
   .character-action-panel {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    border: 3px solid #00e2ff !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 0 30px rgba(0, 226, 255, 0.8) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* PANEL CONTENT SIMPLE VERTICAL STACK */
  #character-action-panel .panel-content,
  .character-action-panel .panel-content {
    display: block !important;
    width: 100% !important;
  }

  /* BUTTONS SIMPLE VERTICAL STACK */
  #character-action-panel button,
  .character-action-panel button,
  #character-action-panel .character-action-btn,
  .character-action-panel .character-action-btn {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 15px !important;
    font-size: 16px !important;
    background: rgba(0, 226, 255, 0.2) !important;
    border: 2px solid #00e2ff !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-align: center !important;
    box-sizing: border-box !important;
    min-height: 50px !important;
  }

  /* BUTTON HOVER/ACTIVE STATES */
  #character-action-panel button:active,
  .character-action-panel button:active {
    background: rgba(0, 226, 255, 0.4) !important;
    transform: scale(0.98) !important;
  }

  /* REMOVE ALL GRID/FLEX LAYOUTS THAT CAUSE OVERLAP */
  #character-action-panel *,
  .character-action-panel * {
    display: block !important;
    float: none !important;
    position: static !important;
    flex: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* SMALLER MOBILE SCREENS */
@media (max-width: 400px) {
  #character-action-panel,
  .character-action-panel {
    left: 15px !important;
    right: 15px !important;
    bottom: 15px !important;
    max-height: min(30vh, 200px) !important;
    padding: 12px !important;
  }

  .character-action-btn,
  #character-action-panel button,
  .character-action-panel button {
    padding: 10px 12px !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    min-height: 44px !important;
  }
}

/* High DPI screen optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Use thinner borders for crisper appearance */
  .cell, .unified-panel, .action-btn {
    border-width: 0.5px;
  }
  
  /* Enhance shadows for high DPI */
  .cell {
    box-shadow: 
      0 0 15px rgba(0, 226, 255, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
  
  .unified-panel {
    background: linear-gradient(135deg, 
      rgba(10, 15, 30, 0.98) 0%, 
      rgba(15, 20, 40, 0.95) 50%,
      rgba(10, 15, 30, 0.98) 100%
    );
  }
}

/* === REDESIGNED ACTION PANEL (NO OVERLAP) === */
@media (max-width: 768px) {
  .character-action-panel .panel-content {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  /* Each button takes nearly half width, wraps as needed */
  .character-action-btn,
  .action-btn,
  [class*="character-action-panel"] button {
    flex: 1 1 45% !important;   /* up to two columns */
    max-width: 180px !important;
    min-width: 120px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
  }
}

/* Ultra-small phones: single-column stacking */
@media (max-width: 350px) {
  .character-action-btn,
  .action-btn,
  [class*="character-action-panel"] button {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* === ULTIMATE MOBILE OVERRIDE: SIMPLE VERTICAL ACTION PANEL === */
@media (max-width: 768px) {
  #character-action-panel,
  .character-action-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 15px !important;
  }

  /* Force content wrapper to vertical flow */
  #character-action-panel .panel-content,
  .character-action-panel .panel-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Every button fills full width */
  #character-action-panel button,
  .character-action-panel button,
  .character-action-btn,
  .action-btn {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Prevent text clipping */
  #character-action-panel button span,
  .character-action-panel button span {
    white-space: nowrap !important;
  }

  /* Ensure score/combo & difficulty panels remain visible */
  .score-combo-container,
  .difficulty-threshold-container {
    display: grid !important;
  }
}

/* === OVERRIDE iOS FIXED BODY (ENABLE SCROLLING) === */
@supports (-webkit-touch-callout: none) {
  body {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    overflow-y: auto !important;
  }
  
  #game-container {
    position: static !important;
    height: auto !important;
    overflow-y: visible !important;
  }
}

/* Ensure grid children take equal width and are centered */
.score-combo-container > div,
.difficulty-threshold-container > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure difficulty & threshold sections are centered and equal height */
.difficulty-section,
.threshold-section,
.score-display,
.combo-display {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Enhanced 16:9 Mobile Optimization */
@media (max-width: 768px) and (min-aspect-ratio: 16/9) {
  :root {
    --cell-size: clamp(32px, 6vw, 48px);
    --gap: clamp(1px, 0.2vw, 3px);
  }

  /* Game container optimization for landscape */
  .game-container {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr !important;
    gap: 15px !important;
    height: 100vh !important;
    padding: 8px 5px 320px 5px !important; /* Increased from 80px to 320px for action panel clearance */
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Game board takes main area */
  #game-board {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    max-width: calc(100vw - 20px) !important;
    max-height: none !important; /* Remove height restriction for full board height */
    margin: 5px auto !important;
  }

  /* Unified panel sidebar */
  .unified-panel {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    width: min(25vw, 280px) !important;
    max-width: 280px !important;
    min-width: 240px !important;
    height: fit-content !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    border-radius: 12px !important;
    position: sticky !important;
    top: 10px !important;
  }

  /* Compact panel sections for sidebar */
  .unified-panel .panel-section {
    padding: 8px 12px !important;
  }

  /* Character stats horizontal layout */
  .character-stats-scoreboard {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }

  .character-value {
    flex: 1 1 calc(50% - 2px) !important;
    padding: 4px 6px !important;
    min-height: 32px !important;
    font-size: 12px !important;
  }

  .character-value .char-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .character-value .char-number {
    font-size: 14px !important;
  }

  /* Compact score/combo layout */
  .score-combo-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .score-display,
  .combo-display {
    padding: 6px !important;
    min-height: 40px !important;
  }

  .score-display .score-value {
    font-size: 20px !important;
  }

  .combo-counter .combo-value {
    font-size: 18px !important;
  }

  .combo-counter .combo-x {
    font-size: 12px !important;
  }

  /* Compact difficulty/threshold */
  .difficulty-threshold-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .difficulty-section,
  .threshold-section {
    padding: 6px !important;
  }

  .difficulty-meter-container {
    height: 4px !important;
    margin: 4px 0 !important;
  }

  .difficulty-value,
  .threshold-value {
    font-size: 14px !important;
  }

  .threshold-warning {
    font-size: 8px !important;
    padding: 2px 4px !important;
    margin-top: 3px !important;
  }

  /* Bottom section compact */
  .bottom-section {
    padding: 6px 12px !important;
    gap: 6px !important;
  }

  .stats-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .stat-row {
    padding: 3px 6px !important;
    font-size: 10px !important;
    min-height: 24px !important;
  }

  .stat-label {
    font-size: 9px !important;
  }

  .stat-value {
    font-size: 10px !important;
  }

  /* Recent scores compact */
  .recent-scores {
    max-height: 60px !important;
    gap: 2px !important;
  }

  .score-entry {
    padding: 3px 6px !important;
    font-size: 9px !important;
    min-height: 20px !important;
  }

  .score-entry-action {
    font-size: 8px !important;
    max-width: 50px !important;
  }

  .score-entry-points {
    font-size: 9px !important;
  }

  /* Status bar at top */
  #status-bar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    text-align: center !important;
    background: rgba(14, 21, 48, 0.95) !important;
    border: 1px solid rgba(0, 226, 255, 0.4) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0, 226, 255, 0.2) !important;
  }

  /* Action panel optimization for 16:9 - SAME AS PORTRAIT */
  #character-action-panel,
  .character-action-panel {
    position: fixed !important; /* Same as portrait */
    bottom: 20px !important; /* Same as portrait */
    left: 20px !important; /* Same as portrait */
    right: 20px !important; /* Same as portrait */
    max-width: none !important; /* Remove fixed width - same as portrait */
    max-height: min(35vh, 250px) !important; /* Same as portrait */
    padding: 15px 15px calc(var(--mobile-safe-area-bottom) + 15px) 15px !important; /* Same as portrait */
    transform: none !important; /* Remove centering - same as portrait */
  }

  /* Action panel content - SAME AS PORTRAIT */
  #character-action-panel .panel-content,
  .character-action-panel .panel-content {
    display: flex !important; /* Same as portrait - vertical layout */
    flex-direction: column !important; /* Same as portrait */
    gap: 12px !important; /* Same as portrait */
  }

  /* Action buttons - SAME AS PORTRAIT */
  #character-action-panel button,
  .character-action-panel button,
  .character-action-btn {
    padding: 12px 16px !important; /* Same as portrait */
    font-size: calc(var(--mobile-font-scale) * 0.9rem) !important; /* Same as portrait */
    min-height: var(--mobile-touch-target) !important; /* Same as portrait */
    border-radius: 15px !important; /* Same as portrait */
    background: linear-gradient(135deg, #192245 0%, #1a2550 100%) !important; /* Same as portrait */
    border: 2px solid rgba(0, 226, 255, 0.3) !important; /* Same as portrait */
    color: var(--primary) !important; /* Same as portrait */
    box-sizing: border-box !important;
    width: 100%; /* Full width like portrait */
  }
}

/* ===================================================================
   BACKDROP BLUR PERFORMANCE OPTIMIZATIONS
   =================================================================== */

/* Optimize backdrop blur for better mobile performance */
@media (max-width: 1024px) {
  /* Reduce blur intensity on tablets */
  .unified-panel {
    backdrop-filter: blur(12px) !important; /* Reduced from 20px */
    -webkit-backdrop-filter: blur(12px) !important;
  }
}

/* Additional performance optimization for older devices */
@media (max-device-pixel-ratio: 1.5) {
  .unified-panel,
  .modal-content,
  .character-action-panel {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  
  /* Lighter blur for buttons on lower DPI devices */
  .action-btn,
  .menu-btn,
  .upgrade-btn {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}

/* Disable heavy effects on very low-end devices */
@media (max-width: 360px) and (max-device-pixel-ratio: 1) {
  .unified-panel,
  .modal-content,
  .character-action-panel,
  .end-modal,
  .menu-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(13, 39, 77, 0.9) !important;
    border: 1px solid rgba(0, 226, 255, 0.4) !important;
  }
  
  /* Ensure text remains readable without blur */
  .unified-panel .section-label,
  .modal-content h2,
  .character-action-panel .btn-text {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8) !important;
  }
}

/* COMPREHENSIVE LANDSCAPE AND ORIENTATION SUPPORT */

/* Universal landscape optimization for all screen sizes */
@media (orientation: landscape) {
  body {
    padding: 5px 10px 320px 10px !important; /* Increased from 60px to 320px for action panel clearance */
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
  
  h1 {
    font-size: clamp(1.2rem, 3vw, 1.6rem) !important;
    margin: 2px 0 5px 0 !important;
  }
  
  .game-container {
    padding: 8px 5px 320px 5px !important; /* Increased from 60px to 320px for action panel clearance */
    max-height: none !important; /* Remove height restriction */
  }
  
  #game-board {
    margin: 5px auto !important;
    max-width: calc(100vw - 20px) !important;
    max-height: none !important; /* Remove height restriction for full board height */
    overflow: auto !important;
  }
  
  /* Adjust unified panel for landscape */
  .unified-panel {
    max-height: none !important; /* Remove height restriction */
    overflow-y: auto !important;
    margin: 3px auto 8px auto !important;
  }
  
  .panel-section {
    padding: 4px 6px !important;
  }
  
  /* Action panel adjustments for landscape - IDENTICAL TO PORTRAIT */
  .character-action-panel,
  #character-action-panel {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    max-height: min(35vh, 250px) !important;
    padding: 15px 15px calc(var(--mobile-safe-area-bottom) + 15px) 15px !important;
  }
  
  .character-action-btn {
    min-height: var(--mobile-touch-target) !important;
    font-size: calc(var(--mobile-font-scale) * 0.9rem) !important;
    padding: 12px 16px !important;
  }
}

/* Wide landscape screens (tablets in landscape) */
@media (orientation: landscape) and (min-width: 768px) {
  :root {
    --cell-size: clamp(35px, 4vw, 50px);
    --gap: clamp(2px, 0.3vw, 4px);
  }
  
  body {
    padding: 10px 15px 320px 15px !important; /* Increased from 80px to 320px for action panel clearance */
  }
  
  .game-container {
    max-width: none !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }
  
  #game-board {
    flex: 1 1 auto !important;
    margin: 0 !important;
    max-width: calc(70vw) !important;
  }
  
  .unified-panel {
    flex: 0 0 300px !important;
    max-height: none !important; /* Remove height restriction */
    margin: 0 !important;
  }
}

/* Small landscape screens (phones in landscape) - SAME AS PORTRAIT */
@media (orientation: landscape) and (max-width: 767px) {
  :root {
    --cell-size: clamp(25px, 5vw, 35px);
    --gap: clamp(1px, 0.2vw, 2px);
  }
  
  /* Use same layout as portrait - vertical flex, not grid */
  .character-action-panel .panel-content {
    display: flex !important; /* Same as portrait - vertical layout */
    flex-direction: column !important; /* Same as portrait */
    gap: 12px !important; /* Same as portrait */
  }
  
  .character-action-btn {
    min-height: var(--mobile-touch-target) !important; /* Same as portrait */
    font-size: calc(var(--mobile-font-scale) * 0.9rem) !important; /* Same as portrait */
    padding: 12px 16px !important; /* Same as portrait */
    width: 100%; /* Full width like portrait */
  }
}

/* Very wide landscape screens */
@media (orientation: landscape) and (min-width: 1024px) {
  :root {
    --cell-size: clamp(40px, 3.5vw, 55px);
    --gap: clamp(3px, 0.4vw, 5px);
  }
  
  .game-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
  }
  
  #game-board {
    max-width: calc(60vw) !important;
  }
  
  .unified-panel {
    flex: 0 0 350px !important;
  }
}

/* UNIVERSAL TOUCH-ACTION FIX */
.cell,
#game-board .cell,
.game-board .cell {
  touch-action: manipulation !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: auto !important;
}

/* Ensure all interactive elements have proper touch handling */
button,
.menu-btn,
.back-btn,
.upgrade-btn,
.character-action-btn,
.deployable-character,
.character-select-btn,
.character-card button {
  touch-action: manipulation !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  pointer-events: auto !important;
}

/* Fix scrollable areas */
#game-container,
.unified-panel,
.history-content {
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ENHANCED CELL CLICK FEEDBACK FOR ALL SCREEN SIZES */
.cell:active {
  transform: scale(1.05) !important;
  transition: transform 0.1s ease !important;
}

/* ENSURE PROPER Z-INDEX STACKING */
.character-action-panel,
#character-action-panel {
  z-index: 9999 !important;
}

.unified-panel {
  z-index: 100 !important;
}

.floating-text,
.floating-text-persistent {
  z-index: 10000 !important;
}

.modal,
.history-modal,
.arcane-confirm-panel {
  z-index: 10001 !important;
}

/* COMPREHENSIVE SCREEN SIZE SUPPORT */

/* Very small screens (< 320px) */
@media (max-width: 320px) {
  :root {
    --cell-size: 38px;
    --gap: 1px;
    --touch-target: 44px;
  }
  
  .character-action-panel {
    bottom: 5px !important;
    left: 5px !important;
    right: 5px !important;
    padding: 12px !important;
  }
  
  .character-action-btn {
    min-height: 42px !important;
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
}

/* Medium tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --cell-size: clamp(45px, 5vw, 55px);
    --gap: clamp(3px, 0.4vw, 5px);
  }
  
  .character-action-panel {
    max-width: none !important;
    left: 20px !important; /* Same as portrait */
    right: 20px !important; /* Same as portrait */
  }
}

/* Large screens (> 1024px) */
@media (min-width: 1025px) {
  :root {
    --cell-size: clamp(50px, 4vw, 65px);
    --gap: clamp(4px, 0.5vw, 6px);
  }
  
  body {
    padding: 20px !important;
  }
  
  .game-container {
    max-width: 1600px !important;
    margin: 0 auto !important;
  }
  
  .character-action-panel {
    max-width: none !important;
    left: 20px !important; /* Same as portrait */
    right: 20px !important; /* Same as portrait */
    bottom: 30px !important;
  }
}

/* PORTRAIT ORIENTATION OPTIMIZATIONS */
@media (orientation: portrait) {
  /* Ensure portrait works well on all devices */
  .game-container {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* REMOVED: max-width constraint that prevents horizontal scrolling */
  #game-board {
    /* max-width: calc(100vw - 20px) !important; */ /* DISABLED - prevents horizontal scrolling */
    margin: 10px auto !important;
  }
  
  .unified-panel {
    width: calc(100% - 20px) !important;
    max-width: 500px !important;
    margin: 10px auto !important;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .cell {
    border-width: 0.5px !important;
  }
  
  #game-board {
    border-width: 1px !important;
  }
}

/* ACCESSIBILITY IMPROVEMENTS */
@media (prefers-reduced-motion: reduce) {
  .cell,
  #game-board,
  .character-action-panel {
    animation: none !important;
    transition: none !important;
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .cell {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
  }
  
  /* Fix iOS zoom on double tap */
  .cell {
    touch-action: manipulation !important;
  }
}

/* Android Chrome specific fixes */
@media (hover: none) and (pointer: coarse) and (min-resolution: 2dppx) {
  .cell {
    border-width: 0.5px !important;
    outline: none !important;
  }
  
  .cell:focus {
    outline: 2px solid rgba(0, 226, 255, 0.6) !important;
    outline-offset: 1px !important;
  }
}

/* ===================================================================
   DRAGGING FUNCTIONALITY FOR BETTER MOBILE EXPERIENCE
   =================================================================== */

/* LANDSCAPE MODE: Enable vertical dragging for panel and gameboard */
@media (orientation: landscape) {
  /* Enable vertical dragging for unified panel in landscape */
  .unified-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 100px) !important; /* More aggressive margin for browser UI */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    touch-action: pan-y !important; /* Only allow vertical touch panning */
  }
  
  /* Enable vertical dragging for game board in landscape */
  #game-board {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 100px) !important; /* More aggressive margin for browser UI */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    touch-action: pan-y !important; /* Only allow vertical touch panning */
  }
  
  /* Ensure cells within game board don't interfere with dragging */
  #game-board .cell {
    touch-action: manipulation !important; /* Allow cell clicks but preserve parent scroll */
  }
  
  /* Add scrollbar styling for better UX */
  .unified-panel::-webkit-scrollbar,
  #game-board::-webkit-scrollbar {
    width: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }
  
  .unified-panel::-webkit-scrollbar-thumb,
  #game-board::-webkit-scrollbar-thumb {
    background: rgba(0, 226, 255, 0.6);
    border-radius: 3px;
    transition: background-color 0.2s ease;
  }
  
}

/* PORTRAIT MODE: Enable horizontal dragging for gameboard */
@media (orientation: portrait) {
  /* EXACT COPY of landscape approach but with horizontal instead of vertical */
  
  /* Enable horizontal dragging for game board in portrait */
  #game-board {
    overflow-x: scroll !important; /* Changed from auto to scroll to force scrollbar */
    overflow-y: hidden !important;
    max-width: calc(100vw - 100px) !important; /* More aggressive margin for browser UI */
    /* FORCE BOARD TO BE WIDER THAN CONSTRAINED MAX-WIDTH */
    width: calc(var(--board-cols) * var(--cell-size) + (var(--board-cols) + 1) * var(--gap)) !important; /* Override min-content */
    min-width: calc(100vw - 60px) !important; /* Ensure it's definitely wider than max-width */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    touch-action: pan-x !important; /* Only allow horizontal touch panning */
  }
  
  /* Ensure cells within game board don't interfere with dragging */
  #game-board .cell {
    touch-action: manipulation !important; /* Allow cell clicks but preserve parent scroll */
  }
  
  /* Add horizontal scrollbar styling for better UX - Made more prominent */
  #game-board::-webkit-scrollbar {
    height: 12px !important; /* Increased from 6px to 12px for better visibility */
    background: rgba(255, 255, 255, 0.2) !important; /* Increased opacity from 0.1 to 0.2 */
    border-radius: 6px !important; /* Increased border radius */
    border: 1px solid rgba(0, 226, 255, 0.2) !important; /* Added border for better definition */
  }
  
  #game-board::-webkit-scrollbar-thumb {
    background: rgba(0, 226, 255, 0.8) !important; /* Increased opacity from 0.6 to 0.8 */
    border-radius: 6px !important; /* Increased border radius */
    transition: background-color 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Added border for better visibility */
  }
  
  /* Keep unified panel normal in portrait mode */
  .unified-panel {
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    touch-action: auto !important;
  }
}

/* ENHANCED TOUCH HANDLING FOR MOBILE DEVICES */
@media (hover: none) and (pointer: coarse) {
  /* Ensure smooth scrolling on touch devices */
  .unified-panel,
  #game-board {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }
  
  /* Add momentum scrolling on iOS */
  @supports (-webkit-overflow-scrolling: touch) {
    .unified-panel,
    #game-board {
      -webkit-overflow-scrolling: touch !important;
    }
  }
  
  /* Add subtle visual feedback when scrolling */
  .unified-panel::-webkit-scrollbar-thumb:active,
  #game-board::-webkit-scrollbar-thumb:active {
    background: rgba(0, 226, 255, 1) !important;
  }
}

/* SMALL DEVICE SPECIFIC DRAGGING OPTIMIZATIONS */
@media (max-width: 480px) {
  /* Larger scrollbar for easier touch interaction on small screens */
  .unified-panel::-webkit-scrollbar,
  #game-board::-webkit-scrollbar {
    width: 8px;
    height: 14px !important; /* Increased height for portrait mode horizontal scrollbar */
  }
  
  /* More prominent scrollbar thumb for small devices */
  .unified-panel::-webkit-scrollbar-thumb,
  #game-board::-webkit-scrollbar-thumb {
    background: rgba(0, 226, 255, 0.9) !important; /* Increased opacity for better visibility */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Enhanced border */
  }
}

/* LANDSCAPE SMALL DEVICES: Enhanced vertical dragging */
@media (orientation: landscape) and (max-width: 767px) {
  /* More aggressive max-height for small landscape devices */
  .unified-panel,
  #game-board {
    max-height: calc(100vh - 120px) !important; /* Even more aggressive for mobile browsers */
  }
  
  /* Ensure content doesn't get cut off */
  .unified-panel .panel-content {
    padding-bottom: 30px !important;
  }
  
  /* Add padding to game board for better scroll experience */
  #game-board {
    padding-bottom: 30px !important;
  }
}

/* PORTRAIT SMALL DEVICES: Enhanced horizontal dragging */
@media (orientation: portrait) and (max-width: 767px) {
  /* EXACT COPY of landscape small devices but horizontal instead of vertical */
  
  /* More aggressive max-width for small portrait devices */
  #game-board {
    overflow-x: scroll !important; /* Force scrollbar instead of auto */
    max-width: calc(100vw - 120px) !important; /* Even more aggressive for mobile browsers */
    /* FORCE BOARD TO BE WIDER THAN CONSTRAINED MAX-WIDTH */
    width: calc(var(--board-cols) * var(--cell-size) + (var(--board-cols) + 1) * var(--gap)) !important; /* Override min-content */
    min-width: calc(100vw - 60px) !important; /* Ensure it's definitely wider than max-width */
  }
  
  /* Add padding to game board for better scroll experience */
  #game-board {
    padding-right: 30px !important;
  }
}

/* ANDROID CHROME SPECIFIC FIXES */
@media (hover: none) and (pointer: coarse) {
  /* Android browsers have significant UI chrome that reduces available space */
  @media (orientation: landscape) {
    .unified-panel,
    #game-board {
      max-height: calc(100vh - 140px) !important; /* Account for Android browser UI */
    }
  }
  
  /* EXACT COPY of landscape Android fix but for portrait horizontal scrolling */
  @media (orientation: portrait) {
    #game-board {
      overflow-x: scroll !important; /* Force scrollbar instead of auto */
      max-width: calc(100vw - 140px) !important; /* Account for Android browser UI */
      /* FORCE BOARD TO BE WIDER THAN CONSTRAINED MAX-WIDTH */
      width: calc(var(--board-cols) * var(--cell-size) + (var(--board-cols) + 1) * var(--gap)) !important; /* Override min-content */
      min-width: calc(100vw - 80px) !important; /* Ensure it's definitely wider than max-width */
    }
  }
}

/* ANDROID 16:9 SPECIFIC OPTIMIZATIONS */
@media (orientation: landscape) and (min-aspect-ratio: 16/9) {
  .unified-panel,
  #game-board {
    max-height: calc(100vh - 160px) !important; /* Extra margin for 16:9 aspect ratios */
  }
}

/* EXACT COPY for portrait 16:9 but swapped axes */
@media (orientation: portrait) and (max-aspect-ratio: 9/16) {
  #game-board {
    overflow-x: scroll !important; /* Force scrollbar instead of auto */
    max-width: calc(100vw - 160px) !important; /* Extra margin for 9:16 aspect ratios */
    /* FORCE BOARD TO BE WIDER THAN CONSTRAINED MAX-WIDTH */
    width: calc(var(--board-cols) * var(--cell-size) + (var(--board-cols) + 1) * var(--gap)) !important; /* Override min-content */
    min-width: calc(100vw - 100px) !important; /* Ensure it's definitely wider than max-width */
  }
}

/* FORCE SCROLLING ON ANDROID DEVICES */
@media (hover: none) and (pointer: coarse) and (max-device-pixel-ratio: 3) {
  /* Target high-DPI Android devices */
  @media (orientation: landscape) {
    .unified-panel,
    #game-board {
      height: auto !important;
      max-height: calc(100vh - 180px) !important; /* Maximum margin for Android */
      overflow-y: scroll !important; /* Force scrollbar */
    }
  }
  
  /* EXACT COPY for portrait but swapped axes */
  @media (orientation: portrait) {
    #game-board {
      width: auto !important; /* Reset width */
      /* OVERRIDE WITH CALCULATED WIDTH */
      width: calc(var(--board-cols) * var(--cell-size) + (var(--board-cols) + 1) * var(--gap)) !important; /* Override min-content */
      max-width: calc(100vw - 180px) !important; /* Maximum margin for Android */
      min-width: calc(100vw - 120px) !important; /* Ensure it's definitely wider than max-width */
      overflow-x: scroll !important; /* Force scrollbar */
    }
  }
}

/* ACCESSIBILITY: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .unified-panel,
  #game-board {
    scroll-behavior: auto !important;
  }
}

/* FIREFOX SUPPORT: Custom scrollbar styling */
@supports (scrollbar-width: thin) {
  .unified-panel,
  #game-board {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 226, 255, 0.6) rgba(255, 255, 255, 0.1);
  }
}

/* LANDSCAPE 16:9 MOBILE OPTIMIZATION - EFFICIENT SPACING */
@media (orientation: landscape) and (max-width: 767px) and (min-aspect-ratio: 16/9) {
  /* Minimize body padding to maximize game space */
  body {
    padding: 2px 5px 320px 5px !important; /* Increased bottom padding from 2px to 320px for action panel clearance */
  }
  
  /* Ultra-compact title */
  h1 {
    font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
    margin: 1px 0 2px 0 !important;
  }
  
  /* Efficient game container spacing */
  .game-container {
    padding: 2px 3px 320px 3px !important; /* Increased bottom padding from 2px to 320px for action panel clearance */
    gap: 4px !important; /* Reduced gap */
  }
  
  /* Game controls - ENSURE FIXED POSITIONING LIKE PORTRAIT MODE */
  .game-controls {
    position: fixed !important; /* CRITICAL: Must stay fixed, not scroll */
    top: 10px !important; /* Same as portrait */
    right: 10px !important; /* Same as portrait */
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important; /* Stack vertically like portrait */
    gap: 8px !important; /* Same spacing as portrait */
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    z-index: 1000 !important; /* High z-index to stay above scrolling content */
  }
  
  .game-controls .action-btn {
    /* USE EXACT SAME STYLING AS PORTRAIT MODE */
    padding: 8px 12px !important; /* Same as portrait */
    font-size: clamp(0.8rem, 2vw, 0.9rem) !important; /* Same as portrait */
    min-height: 36px !important; /* Same as portrait */
    border-radius: 10px !important; /* Same as portrait */
    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;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
  }
  
  .game-container {
    padding-bottom: 320px !important; /* Increased from 20px to 320px for action panel clearance */
  }
}

/* PORTRAIT MODE: COMPACT UNIFIED PANEL OPTIMIZATION */
@media (orientation: portrait) {
  /* Make unified panel much thinner to save vertical space */
  .unified-panel {
    padding: 6px 8px !important; /* Reduced from default padding */
    margin: 5px auto !important; /* Reduced margins */
  }
  
  /* Compact panel sections */
  .panel-section {
    padding: 3px 4px !important; /* Much tighter spacing */
    margin-bottom: 2px !important; /* Minimal gaps between sections */
  }
  
  /* Horizontal layout for score and combo to save vertical space */
  .score-combo-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 4px !important;
    align-items: center !important;
  }
  
  .score-display,
  .combo-display {
    flex: 1 !important;
    padding: 4px !important;
    text-align: center !important;
  }
  
  /* Horizontal layout for difficulty and threshold */
  .difficulty-threshold-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 4px !important;
    align-items: center !important;
  }
  
  .difficulty-section,
  .threshold-section {
    flex: 1 !important;
    padding: 4px !important;
    text-align: center !important;
  }
  
  /* Compact text sizing */
  .section-label {
    font-size: clamp(8px, 2.2vw, 11px) !important;
    margin-bottom: 2px !important;
  }
  
  .score-value {
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1 !important;
  }
  
  .combo-value {
    font-size: clamp(12px, 3.5vw, 16px) !important;
  }
  
  .difficulty-value,
  .threshold-value {
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1 !important;
  }
  
  /* Compact stats section */
  .stats-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: space-between !important;
  }
  
  .stat-row {
    flex: 1 1 45% !important;
    padding: 2px 4px !important;
    font-size: clamp(8px, 2vw, 10px) !important;
    min-height: 18px !important;
    text-align: center !important;
  }
  
  /* Compact recent scores */
  .recent-scores {
    max-height: 50px !important;
    gap: 1px !important;
  }
  
  .score-entry {
    padding: 2px 4px !important;
    font-size: clamp(7px, 1.8vw, 9px) !important;
    min-height: 16px !important;
  }
  
  /* Compact difficulty meter */
  .difficulty-meter-container {
    height: 4px !important;
    margin: 2px 0 !important;
  }
  
  /* Compact combo timer */
  .combo-timer-container {
    height: 3px !important;
    margin: 2px 0 !important;
  }
} 

/* ========================= */
/* FINAL FIX: allow board to scroll horizontally in portrait by removing max-width clamp */
@media (orientation: portrait) {
  #game-board {
    max-width: none !important;
  }
}

/* === Game board wrapper for horizontal scrolling detection === */
.game-board-wrapper {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  max-width: 100vw !important;
  margin: 0 auto !important;
}

.game-board-wrapper::-webkit-scrollbar {
  height: 12px;
  background: rgba(255,255,255,0.1);
}

.game-board-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0,226,255,0.7);
  border-radius: 6px;
}

/* === ULTIMATE OVERRIDE: FLOAT MENU/END BUTTONS IN LANDSCAPE ON ALL SIZES === */
@media (orientation: landscape) {
  .game-controls {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    z-index: 1200 !important;
    pointer-events: auto !important;
  }
  .game-controls .action-btn {
    all: unset !important; /* reset previous button styles*/
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    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.95), rgba(20,30,60,0.95)) !important;
    border: 2px solid rgba(0,226,255,0.35) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
    cursor: pointer !important;
    user-select: none !important;
  }
  .game-controls .action-btn:active {
    transform: scale(0.95) !important;
  }
  /* place history button under Menu/End buttons */
  #history-button {
    position: fixed !important;
    top: calc(10px + 2 * 44px + 40px) !important; /* pushed further down to avoid overlap */
    right: 10px !important;
    z-index: 1200 !important;
  }
}