/*
 * ============================================================
 * AutoChess G�� App-Specific Overrides
 * Loaded AFTER base-overrides.css.
 * Contains ONLY chess-specific layout and responsive rules.
 * ============================================================
 */

/* ============================================================
   1. SAMSUNG INTERNET G�� color-mix() FALLBACKS (G��v21)
   ============================================================ */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root:not(.dark) .bg-primary\/10 {
    background-color: hsl(214, 48%, 94%) !important;
  }
  :root:not(.dark) .border-primary\/30 {
    border-color: hsl(214, 48%, 78%) !important;
  }
}

/* ============================================================
   2. MOBILE G�� CHESS LAYOUT (G��767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Chess board: fill available width, no fixed height */
  .h-\[420px\] {
    height: auto !important;
    max-height: 90vw !important;
  }
  .aspect-square.w-full.max-w-\[600px\] {
    max-width: 100% !important;
  }

  /* Header: tighter horizontal padding */
  .max-w-7xl.mx-auto.px-6.py-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Main content area: tighter padding */
  .max-w-7xl.mx-auto.px-6.py-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Right panel: remove inline minHeight:600 so it doesn't force scroll */
  .space-y-4.flex.flex-col {
    min-height: 0 !important;
  }

  /* Score bar: allow wrapping */
  .mb-6.flex.items-center.justify-between {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Touch targets */
  button, a, [role="button"] {
    min-height: 44px;
  }

  /* Board-first layout: stack vertically */
  .flex.flex-col.lg\:flex-row,
  .flex.gap-6,
  .flex.gap-4 {
    flex-direction: column !important;
  }

  /* Board container: full width, centered */
  .aspect-square {
    width: 100% !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
  }

  /* Move history / side panel: compact on mobile */
  .space-y-4.flex.flex-col > div {
    padding: 0.75rem !important;
  }

  /* Score/status text: bump legibility */
  .text-xs { font-size: 0.8125rem !important; }
  .text-sm { font-size: 0.875rem !important; }
}

/* ============================================================
   3. LANDSCAPE MOBILE G�� board takes full height
   ============================================================ */
@media (max-width: 767px) and (orientation: landscape) {
  .aspect-square {
    max-width: none !important;
    width: auto !important;
    height: calc(100dvh - 4rem) !important;
    max-height: calc(100dvh - 4rem) !important;
    margin: 0 auto !important;
  }

  .flex.flex-col.lg\:flex-row,
  .flex.gap-6,
  .flex.gap-4 {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .space-y-4.flex.flex-col {
    max-height: calc(100dvh - 4rem) !important;
    overflow-y: auto !important;
    flex: 1 !important;
    min-width: 200px !important;
  }

  .max-w-7xl.mx-auto.px-6.py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* ============================================================
   4. SMALL PHONES (G��375px)
   ============================================================ */
@media (max-width: 375px) {
  .max-w-7xl.mx-auto.px-6.py-6 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .aspect-square {
    max-width: 96vw !important;
  }
}

/* ============================================================
   5. DESKTOP RESTORE (G��768px)
   ============================================================ */
@media (min-width: 768px) {
  .h-\[420px\] {
    height: 420px !important;
    max-height: none !important;
  }
  .aspect-square.w-full.max-w-\[600px\] {
    max-width: 600px !important;
  }
}

/* ============================================================
   5a. SIDE PANEL MIN-HEIGHT (>=1024px only)
   The 600px floor exists so the right-hand column matches the
   board column on the two-column desktop layout. That layout
   only starts at lg (1024px). Applying it from 768px left the
   move-history card ~450px of empty space on tablet, where the
   panel is stacked under the board. Source now carries
   lg:min-h-[600px]; this mirrors it at the same breakpoint.
   ============================================================ */
@media (min-width: 1024px) {
  .space-y-4.flex.flex-col {
    min-height: 600px !important;
  }
}

/* ============================================================
   5b. PORTFOLIO BACK-BUTTON CLEARANCE (G��640px, <1328px)
   G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��G��
   #project-nav-btn is position:fixed at top:12px/left:12px
   spanning xG��12-97px at all viewport widths. The header's
   .max-w-7xl.mx-auto container is flush-left (no auto margins)
   until its own max-width (1280px content + 2+�3rem padding =
   1328px viewport) finally centers it clear of the button.
   Below 640px the hamburger nav pattern isn't used on this app
   (unlike dashboard/forms) G�� the header just wraps naturally at
   very narrow widths, so no fix is needed there. From 640px up
   to 1328px the logo sits directly under the button with zero
   clearance. Reserve the same 7.5rem left padding used by the
   other two sub-apps' equivalent fix, scoped to this range so
   centered desktop layout (G��1328px) is untouched. */
@media (min-width: 640px) and (max-width: 1023px) {
  /* 2026-08-16 (later): at touch widths both chrome buttons are now 44x44
     (shared fix in assets/project-nav.js + assets/base-overrides.css), so they
     occupy x=12..104, not x=12..84: #project-nav-btn 12-56 and
     #theme-toggle-btn 60-104. The 6rem inset below put the logo badge at x=96,
     8px underneath the theme toggle at 768px. 7.25rem (116px) clears x=104
     with the same 12px gap. */
  .max-w-7xl.mx-auto.px-6.py-4 {
    padding-left: 7.25rem !important;
  }
}
@media (min-width: 1024px) and (max-width: 1339px) {
  /* 2026-08-16: 3.5rem (56px) was not enough clearance. The two fixed
     chrome buttons occupy x=12..84 (#project-nav-btn 12-48,
     #theme-toggle-btn 52-84), so a 56px inset put the app logo badge at
     x=56, fully underneath the theme toggle at 768px and 1024px.
     6rem (96px) clears x=84 with a 12px gap. */
  .max-w-7xl.mx-auto.px-6.py-4 {
    padding-left: 6rem !important;
  }
}

/* ============================================================
   6. ULTRA-WIDE (G��1440px)
   ============================================================ */
@media (min-width: 1440px) {
  .max-w-7xl.mx-auto {
    max-width: 1280px !important;
  }
}