/* Game-specific styles - Modern overrides */

/* Ensure game layout works properly */
.game-layout {
  min-height: calc(100vh - var(--header-height));
}

/* Hide old sidebar styles */
#left-sidebar {
  display: none !important;
}

/* Override main content margin for new layout */
#main-content.with-sidebar {
  margin-left: 0;
  padding: 0;
}

/* Ensure board container is properly styled */
.board-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .game-layout {
    flex-direction: column;
  }
  
  .game-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: translateX(-100%);
    z-index: var(--z-modal);
    background-color: var(--neutral-50);
    border-right: none;
    border-bottom: 1px solid var(--neutral-200);
  }
  
  .game-sidebar.open {
    transform: translateX(0);
  }
  
  .game-main {
    width: 100%;
  }
}

/* Legacy support for any remaining old classes */
.instruction-examples {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background-color: var(--neutral-100);
  border-radius: var(--radius-lg);
}

.example-item {
  display: flex;
  align-items: center;
  margin: var(--space-2) 0;
  gap: var(--space-3);
}

.example-label {
  font-weight: var(--font-medium);
  min-width: 120px;
  color: var(--neutral-700);
}

.example-square {
  width: 20px;
  height: 20px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.example-square.light {
  background-color: var(--board-light);
}

.example-square.dark {
  background-color: var(--board-dark);
}

.example-square.wall {
  background-color: var(--board-wall);
}

.example-square.upgrade {
  background-color: var(--board-upgrade);
}

.example-square.movable {
  background-color: var(--board-move);
}

.example-desc {
  color: var(--neutral-600);
  font-size: var(--text-sm);
}

/* Board loading and error states */
.board-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  min-height: 300px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--neutral-200);
  border-top: 4px solid var(--primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-4);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.board-loading p {
  color: var(--neutral-600);
  font-size: var(--text-lg);
  margin: 0;
}

.board-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  min-height: 300px;
  text-align: center;
}

.board-error p {
  color: var(--error-600);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

/*# sourceMappingURL=games.css-a885cf638a6cad7f59881ba162fb55913d40d414e440a578a7fce4a7e703d6f5.map */