/* ========================================
   MOBILE RESPONSIVE STYLES - AGGRESSIVE OVERRIDES
   These styles use !important to override inline React styles
   ======================================== */

/* ========================================
   GLOBAL MOBILE SETTINGS
   ======================================== */

@media (max-width: 1024px) {
  /* Hide global chat sidebar completely */
  aside {
    display: none !important;
  }

  /* Remove all left margins from main content */
  main {
    margin-left: 0 !important;
  }

  /* Remove left margins from all sections */
  div[id="how-to-play"],
  .recent-games-section,
  footer {
    margin-left: 0 !important;
  }

  /* Prevent horizontal scroll */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ========================================
   HEADER - MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Header container */
  header {
    padding: 8px 12px !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
  }

  header > * {
    display: flex !important;
    align-items: center !important;
  }

  /* Hide sidebar toggle button */
  header button:first-child,
  header > div:first-child > button {
    display: none !important;
  }

  /* Add back button to game page header on mobile */
  #gameScreen header .mobile-back-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ca3af !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    margin-right: 8px !important;
  }

  #gameScreen header .mobile-back-button > div {
    width: 32px !important;
    height: 32px !important;
    border: 2px solid #4b5563 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* Hide sidebar toggle on game page mobile, show back button */
  #gameScreen header > div:first-child > button:not(.mobile-back-button) {
    display: none !important;
  }

  /* Logo container */
  header > div:first-child > div {
    gap: 8px !important;
  }

  /* Logo image */
  header > div:first-child > div > img {
    width: 36px !important;
    height: 36px !important;
  }

  /* Hide DEATHMATCH text */
  .header-deathmatch-text {
    display: none !important;
  }

  /* Currency switcher - make smaller */
  header > div:nth-child(2) > div > div {
    height: 36px !important;
  }

  header > div:nth-child(2) button {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  header > div:nth-child(2) span {
    font-size: 12px !important;
  }

  /* Right section buttons */
  header > div:last-child {
    gap: 6px !important;
  }

  header > div:last-child button {
    padding: 8px 12px !important;
    font-size: 12px !important;
    height: 36px !important;
  }

  header > div:last-child button svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ========================================
   HOME PAGE - MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Main content padding */
  main {
    padding: 12px !important;
  }

  /* Hero banner - stack vertically */
  main > div:first-child {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }

  main > div:first-child > div {
    width: 100% !important;
    min-height: 200px !important;
    padding: 20px !important;
  }

  /* Wallet and Friends grid - single column */
  main > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Make wallet/friends cards smaller */
  main > div:nth-child(2) > div {
    height: 100px !important;
  }

  main > div:nth-child(2) > div > div > h3 {
    font-size: 20px !important;
  }

  main > div:nth-child(2) > div > div > p {
    font-size: 12px !important;
  }

  main > div:nth-child(2) > div > img {
    width: 120px !important;
    height: 120px !important;
  }

  /* Games and Leaderboard - stack vertically */
  main > div:nth-child(3) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Deathmatch Originals section - horizontal slider */
  .originals-section-compact {
    width: 100% !important;
  }

  /* Keep cards horizontal in a slider */
  .originals-section-compact > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 8px !important;
  }

  /* Make cards smaller but keep portrait aspect ratio */
  .originals-section-compact > div:last-child > div {
    width: 160px !important;
    min-width: 160px !important;
    height: 240px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  .originals-section-compact > div:last-child > div img {
    width: 160px !important;
    height: 240px !important;
    object-fit: cover !important;
  }

  /* Top Players section */
  .trending-section-compact {
    width: 100% !important;
  }

  /* Section headings */
  .originals-section-compact h2,
  .trending-section-compact h2 {
    font-size: 18px !important;
  }

  .originals-section-compact button,
  .trending-section-compact button {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* Player Winnings banner - center everything */
  .promo-banner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
    justify-content: center !important;
  }

  .promo-content {
    align-items: center !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .promo-content * {
    text-align: center !important;
  }

  .promo-title-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .promo-actions-row {
    justify-content: center !important;
    text-align: center !important;
  }

  .promo-visual {
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
  }

  .promo-visual img {
    margin: 0 auto !important;
  }
}

/* ========================================
   GAME PAGE - MOBILE
   ======================================== */

@media (max-width: 1024px) {
  /* Prevent horizontal scroll and remove rounded corners */
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* KILL ALL CONTAINERS - JUST STACK EVERYTHING */
  #gameScreen {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
    background-color: #0c0e1d !important;
  }

  #gameScreen > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .game-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background-color: #0c0e1d !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
  }

  .game-layout {
    background-color: #0c0e1d !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .game-window,
  #gameScreen .game-window,
  .game-layout .game-window,
  .game-content .game-window {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    background-color: #0c0e1d !important;
    top: 0 !important;
  }

  /* GAME BOARD SECTION - DISPLAY FIRST */
  .game-window-main,
  #gameScreen .game-window-main,
  .game-layout .game-window-main,
  .game-content .game-window-main,
  .game-window .game-window-main,
  div.game-window-main,
  .game-window > .game-window-main,
  #gameScreen .game-window > .game-window-main,
  .game-layout .game-window > .game-window-main,
  .game-content .game-window > .game-window-main,
  div[data-fixed-width="880"],
  div[data-fixed-width="950"],
  .game-window div[data-fixed-width="880"],
  .game-window div[data-fixed-width="950"],
  #gameScreen div[data-fixed-width="880"],
  #gameScreen div[data-fixed-width="950"] {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: calc(100vw + 120px) !important;
    max-height: none !important;
    background-color: #0c0e1d !important;
    box-sizing: border-box !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    order: 1 !important;
    z-index: 10 !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    border-radius: 0 !important;
  }
  
  /* Ensure game board fills to bottom - remove all gaps */
  .game-window-main > *:last-child,
  .game-window-main .game-board,
  .game-window-main .pvp-status-bar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Make sure game board extends to bottom edge */
  .game-window-main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* PVP status bar - keep in one row */
  .pvp-status-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 8px !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .player-card {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .player-card:last-child {
    justify-content: flex-end !important;
  }

  .round-timer {
    position: static !important;
    flex-shrink: 0 !important;
    text-align: center !important;
  }

  /* GAME BOARD - SHOW IT ALL */
  .game-board {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100vw - 24px) !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: repeat(5, 1fr) !important;
    gap: 6px !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: auto !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* CONTROLS SIDEBAR - DISPLAY SECOND (BELOW GAME BOARD) */
  .game-window-sidebar-left,
  #gameScreen .game-window-sidebar-left,
  .game-layout .game-window-sidebar-left,
  .game-content .game-window-sidebar-left,
  .game-window .game-window-sidebar-left,
  .game-window > .game-window-sidebar-left {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 16px 24px 16px !important;
    margin: 0 !important;
    margin-top: 20px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #060712 !important;
    border-bottom: 1px solid #060712 !important;
    background-color: #0d1127 !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    order: 2 !important;
    z-index: 5 !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  .game-window-sidebar-left > * {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .game-window-sidebar-left .game-controls {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 24px 0 0 0 !important;
    background-color: #0d1127 !important;
  }

  .game-window-sidebar-left .control-group {
    display: block !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  .game-window-sidebar-left .control-group:last-child {
    margin-bottom: 0 !important;
  }

  .game-window-sidebar-left .control-label {
    display: block !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }

  .game-window-sidebar-left .mode-toggle,
  .game-window-sidebar-left .control-input,
  .game-window-sidebar-left .stat-value,
  .game-window-sidebar-left .stat-item,
  .game-window-sidebar-left .game-action-btn {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  .game-window-sidebar-left .mode-toggle {
    display: flex !important;
    height: auto !important;
  }

  .game-window-sidebar-left .mode-btn {
    padding: 12px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 48px !important;
  }

  .game-window-sidebar-left .game-action-btn {
    padding: 14px !important;
    font-size: 15px !important;
    margin-top: 10px !important;
    height: auto !important;
    min-height: 52px !important;
  }

  .game-window-sidebar-left .stat-item {
    padding: 12px !important;
    margin-bottom: 10px !important;
    height: auto !important;
  }

  /* CHAT SIDEBAR - DISPLAY THIRD (BELOW CONTROLS) */
  .game-window-chat,
  #gameScreen .game-window-chat,
  .game-layout .game-window-chat,
  .game-content .game-window-chat,
  .game-window .game-window-chat,
  .game-window > .game-window-chat {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    padding: 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #060712 !important;
    min-height: 250px !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    order: 3 !important;
    z-index: 3 !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* Additional mobile rules for smaller screens */
@media (max-width: 768px) {
  /* Ensure game board is visible on small mobile */
  #gameBoard,
  .game-board,
  [id="gameBoard"],
  [class*="game-board"],
  .game-window-main .game-board,
  .game-window-main #gameBoard,
  #gameScreen .game-board,
  #gameScreen #gameBoard {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100vw - 24px) !important;
    min-height: calc(100vw - 24px) !important;
    gap: 6px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 20 !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Game window main - ensure it's flex and stacks properly */
  .game-window-main,
  .game-window-main[data-fixed-width],
  #gameScreen .game-window-main,
  #gameScreen .game-window-main[data-fixed-width],
  .game-layout .game-window-main,
  .game-content .game-window-main,
  div[data-fixed-width="880"],
  div[data-fixed-width="950"] {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    order: 1 !important;
    border-radius: 0 !important;
  }

  /* Remove rounded corners from tiles */
  .tile,
  .game-board .tile,
  #gameBoard .tile,
  button.tile {
    border-radius: 4px !important;
  }

  /* Remove Recent Games section on mobile */
  .recent-games-section {
    display: none !important;
  }

  /* Game description section - left align mines card, rake, and deathmatch originals */
  div[id="how-to-play"] {
    padding: 20px 12px !important;
    text-align: left !important;
  }

  div[id="how-to-play"] > div {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

  div[id="how-to-play"] img {
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 !important;
  }

  div[id="how-to-play"] h2,
  div[id="how-to-play"] p {
    text-align: left !important;
  }

  /* Left align the game poster section with rake and deathmatch originals */
  div[id="how-to-play"] > div > div:first-child {
    align-self: flex-start !important;
    text-align: left !important;
  }

  div[id="how-to-play"] > div > div:first-child > div {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* ========================================
   FOOTER - MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Footer - works same on both pages */
  footer {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 24px 12px !important;
    text-align: center !important;
  }

  /* Footer wrapper on game page */
  #gameScreen > div:last-child,
  body > div > div:last-child {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Footer container - center everything */
  footer > div {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Footer grid - center all items */
  footer > div > div:first-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    text-align: center !important;
    justify-items: center !important;
    align-items: center !important;
  }

  /* Center each footer section - force center alignment */
  footer > div > div:first-child > div {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  footer h3 {
    font-size: 14px !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  footer p,
  footer a,
  footer li {
    font-size: 11px !important;
    text-align: center !important;
  }

  footer ul {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
    width: 100% !important;
  }

  footer li {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  footer a {
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Social icons container - center it */
  footer > div > div[style*="display: 'flex'"][style*="gap: '16px'"],
  footer > div > div:nth-child(2) {
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 auto !important;
  }

  /* Social icon buttons - center content and icons */
  footer a[style*="width: '40px'"],
  footer a[href="#"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  footer a svg {
    margin: 0 auto !important;
    display: block !important;
  }
}

@media (max-width: 480px) {
  /* Footer - single column on small mobile */
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================
   LEADERBOARD WIDGET - MOBILE
   ======================================== */

@media (max-width: 768px) {
  .leaderboard-widget {
    font-size: 11px !important;
  }

  .leaderboard-widget-header,
  .leaderboard-widget-row {
    padding: 6px !important;
  }

  .leaderboard-widget-header div,
  .leaderboard-widget-row div {
    font-size: 10px !important;
  }
}

/* ========================================
   MODALS - MOBILE
   ======================================== */

@media (max-width: 768px) {
  .modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
  }

  .modal-header {
    padding: 12px !important;
  }

  .modal-header h2 {
    font-size: 16px !important;
  }
}

/* ========================================
   UTILITY OVERRIDES
   ======================================== */

@media (max-width: 768px) {
  /* Ensure no horizontal scroll */
  * {
    max-width: 100vw !important;
  }

  /* Make all images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Tables should scroll */
  table {
    display: block !important;
    overflow-x: auto !important;
  }
}