/* responsive-desktop.css - ensures Panda Chess teaching app looks great on laptops and desktops */

/* General layout tweaks for wide screens */
@media (min-width: 1280px) {
  /* Expand board when there is ample horizontal space */
  .board-wrapper {
    max-width: min(100%, calc(100vh - 200px));
    transition: max-width 0.3s ease;
  }
  /* Wider side panels for extra controls */
  #right-panel,
  #left-panel {
    width: 420px;
  }
  /* Increase toolbar icon size for better click targets */
  #app-toolbar button {
    padding: 0.75rem;
    font-size: 1.125rem;
  }
  /* Slightly larger base font for readability */
  html { font-size: 18px; }
}

/* Extra breathing room on very wide screens (MacBook Neo / 4K) */
@media (min-width: 1536px) {
  #main-area {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    gap: 4rem !important;
  }
  #right-panel {
    width: 460px;
  }
}

/* Adjust teaching mode layout on desktop */
@media (min-width: 1280px) {
  .teaching-mode .board-wrapper {
    max-width: min(100%, calc(100vh - 150px));
  }
  .teaching-mode #right-panel, .teaching-mode #left-panel {
    width: 380px;
    right: 2.5rem;
  }
  .teaching-mode #main-area {
    padding: 1rem 3rem;
  }
}