/* ── ChessFlow — shared mobile responsive styles ─────────────────────────── */

/*
 * GLOBAL: Tell every browser (including Samsung Internet) that this app uses
 * its own dark theme and must not have its colours auto-adjusted.
 * color-scheme:dark prevents Samsung's "white flash" on load.
 */
:root {
  color-scheme: dark;
}

/*
 * Prevent Samsung Internet "Night Mode", Chrome "Auto Dark Mode", and
 * Firefox "Forced Colors" from recolouring ANY element.
 * This is the single most important Samsung compatibility fix.
 */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/*
 * Prevent Samsung's text size adjustment (Accessibility > Font Size setting)
 * from scaling chess notation and board labels.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Box-sizing baseline — ensures padding never causes overflow on Samsung */
*, *::before, *::after { box-sizing: border-box; }

/* ── App install banner (shown by JS on Android/iOS, hidden by default) ─── */
#m-app-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9100;
  background: #1a1a2e; border-top: 2px solid #2a2a4a;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 13px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.55);
  animation: m-slide-up 0.22s ease;
}
@keyframes m-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#m-app-banner .m-ab-icon { font-size: 1.7rem; flex-shrink: 0; line-height: 1; }
#m-app-banner .m-ab-body { flex: 1; min-width: 0; }
#m-app-banner .m-ab-title { font-size: 0.85rem; font-weight: 700; color: #e0e0e0; line-height: 1.3; }
#m-app-banner .m-ab-sub   { font-size: 0.7rem;  color: #888; margin-top: 2px; }
#m-app-banner .m-ab-action {
  background: #7ec8e3; color: #0f0f1a; border: none;
  border-radius: 20px; padding: 7px 16px;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex-shrink: 0; width: auto !important;
  transition: opacity .15s;
}
#m-app-banner .m-ab-action:hover { opacity: .85; }
#m-app-banner .m-ab-close {
  background: none; border: none; color: #555; font-size: 1.2rem;
  cursor: pointer; padding: 4px 6px; width: auto !important; flex-shrink: 0;
  line-height: 1;
}
#m-app-banner .m-ab-close:hover { color: #aaa; }

/* iOS expanded inline install banner */
#m-app-banner.m-ab-ios {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 16px 6px;
}
#m-app-banner.m-ab-ios .m-ab-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
#m-app-banner.m-ab-ios .m-ab-icon { font-size: 1.3rem; flex-shrink: 0; }
#m-app-banner.m-ab-ios .m-ab-title {
  flex: 1; font-size: 0.88rem; font-weight: 700; color: #e0e0e0;
}
#m-app-banner.m-ab-ios .m-ab-steps {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
}
#m-app-banner.m-ab-ios .m-ab-step {
  display: flex; align-items: center; gap: 10px;
}
#m-app-banner.m-ab-ios .m-ab-num {
  background: #7ec8e3; color: #0f0f1a;
  font-weight: 700; font-size: 0.68rem;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#m-app-banner.m-ab-ios .m-ab-step span:last-child {
  font-size: 0.79rem; color: #b8b8cc; line-height: 1.35;
}
#m-app-banner.m-ab-ios .m-ab-share-icon {
  display: inline-block; background: #3a3a6a;
  border-radius: 4px; padding: 0 5px 1px;
  font-size: 0.78rem; color: #e0e0e0; vertical-align: middle;
}
#m-app-banner.m-ab-ios .m-ab-arrow-row {
  text-align: center; padding: 2px 0 4px;
}
#m-app-banner.m-ab-ios .m-ab-arrow {
  color: #7ec8e3; font-size: 1.2rem;
  display: inline-block;
  animation: m-bounce 1.4s ease-in-out infinite;
}
@keyframes m-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* Android install tip tooltip */
#m-install-tip {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #2a2a4a; border: 1px solid #3a3a6a; border-radius: 10px;
  padding: 14px 16px; width: min(300px, 88vw);
  font-size: 0.82rem; color: #e0e0e0; line-height: 1.6;
  text-align: center; z-index: 9200;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
#m-install-tip::after {
  content: ''; position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #2a2a4a; border-bottom: none;
}


/* ── Vertical drag-resize panel ───────────────────────────────────────────── */
/* Add class="v-resizable" to any panel + a sibling <div class="v-drag-handle"> below it */
.v-drag-handle {
  height: 6px; flex-shrink: 0; cursor: ns-resize;
  background: transparent; position: relative; z-index: 1;
  transition: background .15s;
}
.v-drag-handle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 2px; border-radius: 2px;
  background: #2a2a4a; transition: background .15s;
}
.v-drag-handle:hover::after, .v-drag-handle.dragging::after { background: #7ec8e3; }

/* Horizontal drag-resize (panel width). Add class="h-drag-handle" between two flex siblings */
.h-drag-handle {
  width: 6px; flex-shrink: 0; cursor: ew-resize;
  background: transparent; align-self: stretch; position: relative;
  transition: background .15s;
}
.h-drag-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  height: 28px; width: 2px; border-radius: 2px;
  background: #2a2a4a; transition: background .15s;
}
.h-drag-handle:hover::after, .h-drag-handle.dragging::after { background: #7ec8e3; }

/* ── Hamburger: hidden on desktop ─────────────────────────────────────────── */
.m-hamburger { display: none !important; }

/* ── Touch targets: no tap delay ─────────────────────────────────────────── */
.sq, button, a, input, select, textarea { touch-action: manipulation; }

/* ── Samsung / forced-dark-mode colour protection ────────────────────────── */
/*
 * Samsung Internet's "Extra Dimming", "Blue Light Filter" and Chrome's
 * auto-dark-mode can recolour board squares and pieces.
 * print-color-adjust / -webkit-print-color-adjust tells the browser to render
 * exactly the author's colours and never apply automatic adjustments.
 */
.light, .dark, .sq, .sq-c, .sq-mini,
.board-grid, #board, #coaching-board,
.piece, [class*="piece-"],
img[src*="cburnett"], img[src*="pieces"] {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;           /* older Chrome/Samsung */
  forced-color-adjust: none !important;     /* Windows High Contrast / forced colours */
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* MOBILE PORTRAIT  ≤ 768 px                                                   */
/*                                                                             */
/* Why vw for board size? vh changes whenever Samsung's/Chrome's address bar   */
/* shows or hides, causing the board to jump. vw is always stable.             */
/*                                                                             */
/* Why dvh instead of svh? Samsung Internet supports dvh from v16 (2023).      */
/* svh was less widely adopted. dvh = "dynamic viewport height" = exactly what  */
/* we want (height excluding the address bar at current scroll position).        */
/* ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── CSS custom properties: pure vw only — never shakes ── */
  :root {
    --board-size: calc(100vw - 20px);
    --cell: calc(var(--board-size) / 8);
  }

  /* ── html root: contain all overflow ── */
  html {
    overflow-x: hidden !important;
    /* Prevent Samsung WebView from adding extra horizontal scroll space */
    max-width: 100vw !important;
  }

  /* ── Body: natural height, scrollable ── */
  body {
    height: auto !important;
    min-height: 100vh;               /* universal fallback */
    min-height: 100dvh;              /* dvh: tracks toolbar hide/show — Chrome 108+, Samsung 16+ */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /*
     * overscroll-behavior: none (not contain) prevents Samsung from bouncing
     * the entire page when hitting the scroll boundary, which triggers a
     * viewport resize and makes content "float".
     */
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch;
    /* Stop Samsung adding mystery padding when keyboard opens */
    resize: none;
  }

  /* ── Topbar: always full-width, content flex row ── */
  .topbar, #topbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important;
    /* sticky (not fixed) prevents the topbar from triggering a separate
       stacking context that breaks z-index on Samsung */
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /*
   * h1 must flex-grow so it consumes all space between the logo and the
   * right-side buttons. Without this, on Samsung the nav's inline
   * margin-left:auto still applies (even though nav is hidden) and the
   * hamburger drifts to the centre.
   */
  .topbar h1, #topbar h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }

  /* Hide desktop nav links — replaced by the hamburger drawer */
  .topbar nav, #topbar nav {
    display: none !important;
    /* Also override the inline margin-left:auto that some pages set */
    margin-left: 0 !important;
  }

  /* Hamburger open state: full-screen drawer from top */
  .topbar nav.m-open, #topbar nav.m-open {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    /* env() gives safe-area on notched Samsung phones (Galaxy Fold, S24 Ultra…) */
    top: calc(48px + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    background: #1a1a2e;
    border-bottom: 2px solid #2a2a4a;
    padding: 16px 24px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 9999 !important;
    gap: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.72);
    /* Hardware-accelerated so Samsung doesn't flicker on open */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .topbar nav.m-open a, #topbar nav.m-open a {
    font-size: 1.05rem !important;
    color: #e0e0e0 !important;
    padding: 14px 0;
    border-bottom: 1px solid #1a1a3a;
    display: block !important;
    text-decoration: none !important;
  }
  .topbar nav.m-open a:last-child { border-bottom: none; }
  .topbar nav.m-open a:hover, .topbar nav.m-open a.active { color: #7ec8e3 !important; }

  /* ── Hamburger button — ALWAYS far right ── */
  .m-hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 6px;
    /*
     * margin-left: auto is the key fix. Even if h1 flex:1 somehow doesn't
     * apply (Samsung quirk), this auto margin guarantees the button hugs
     * the right edge of the topbar.
     */
    margin-left: auto !important;
    flex-shrink: 0;
    border-radius: 6px;
    /* Make the tap target at least 44px — Apple/Google a11y minimum */
    min-width: 44px;
    min-height: 44px;
    /* Force order to the very end, after user-chip */
    order: 9999 !important;
  }
  .m-hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: #ccc;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.18s ease;
    /* Samsung sometimes clips sub-pixel lines — use whole-pixel sizing */
    will-change: transform;
  }
  .m-hamburger.m-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #7ec8e3; }
  .m-hamburger.m-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .m-hamburger.m-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #7ec8e3; }

  /* User chip: keep compact on mobile */
  #user-chip {
    padding: 3px 8px 3px 3px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0;
    order: 100; /* after h1, before hamburger */
  }

  /* ── Layout: stack all columns vertically ── */
  .cf-layout {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    /* Samsung sometimes gives extra width to flex containers — contain it */
    contain: layout style !important;
  }
  .cf-layout > * {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Override any inline flex-basis that could cause overflow */
    flex-basis: auto !important;
    min-width: 0 !important;
  }

  /* Three-column pages (puzzle, analysis, second): board column goes first */
  .cf-layout.cf-3col > :nth-child(1) { order: 2; }
  .cf-layout.cf-3col > :nth-child(2) { order: 1; }
  .cf-layout.cf-3col > :nth-child(3) { order: 3; }

  /* Play page: board first, left sidebar second, right panel third */
  #app.cf-layout > #side      { order: 2 !important; }
  #app.cf-layout > #game-area { order: 1 !important; }
  #app.cf-layout > #play-home { order: 3 !important; }

  /* ── Sidebars: full width, limited height, scroll internally ── */
  .cf-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    flex-shrink: 0;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid #2a2a4a;
    max-height: 60vw;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     BOARD SIZING
     All boards use stable vw units. Three sources of board elements:
       1. var(--board-size) CSS variable (set above)
       2. #board / .board-wrap direct size overrides (below)
       3. Inline JS-set pixel sizes (overridden by !important below)
  ══════════════════════════════════════════════════════════════════════════ */

  /* Play page board (index.html) */
  #app #board {
    width: calc(100vw - 20px) !important;
    height: calc(100vw - 20px) !important;
    touch-action: none !important;
  }

  #game-area .player-bar,
  #game-area #rank-labels,
  #game-area #file-labels {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box;
  }

  #app .piece {
    font-size: calc((100vw - 20px) / 9.7) !important;
    /* Prevent Samsung from applying font scaling to Unicode pieces */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  #game-area {
    padding: 8px 0 4px !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hide rank labels and flip button (cause horizontal overflow on small screens) */
  .rank-labels    { display: none !important; }
  #board-controls { display: none !important; }

  /* Puzzle / analysis / second — board-wrap class */
  .board-wrap {
    width: calc(100vw - 20px) !important;
    height: calc(100vw - 20px) !important;
    flex-shrink: 0 !important;
    touch-action: none !important;
    max-width: calc(100vw - 20px) !important;
  }
  .board-grid {
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
  }

  /* Coaching board */
  #board-wrap {
    width: calc(100vw - 20px) !important;
    height: calc(100vw - 20px) !important;
    touch-action: none !important;
  }
  .board-container { width: calc(100vw - 20px) !important; align-self: center !important; }

  /* All board squares: no scroll hijack during drag */
  #board, #board .sq,
  #coaching-board, #coaching-board .sq-c {
    touch-action: none !important;
  }

  /* Eval bar: always match board height on mobile */
  .eval-bar-wrap {
    height: calc(100vw - 20px) !important;
    flex-shrink: 0 !important;
    align-self: flex-start;
  }

  /* Second.html board column */
  .board-column {
    width: 100% !important;
    align-items: center;
    overflow-x: hidden;
  }
  .board-area { justify-content: center; overflow: visible; }

  /* Move list: constrain height so it doesn't push board off screen */
  .move-list { max-height: 100px !important; overflow-y: auto !important; }

  /* ── Sidebar height caps (vw-based = stable across all Samsung variants) ── */
  #app.cf-layout #side               { max-height: 55vw; overflow-y: auto; overflow-x: hidden; }
  #main.cf-layout #left-panel,
  #main.cf-layout #right-panel       { max-height: 52vw; overflow-y: auto; overflow-x: hidden; }
  .layout.cf-layout .left-col        { width: 100% !important; }
  .layout.cf-layout .right-col       { width: 100% !important; max-height: 65vw; overflow-y: auto; overflow-x: hidden; }
  #app.cf-layout #theme-col          { max-height: 40vw; overflow-y: auto; }
  #app.cf-layout #play-home          { max-height: 65vw; overflow-y: auto; }
  .layout.cf-layout .sidebar-left    { max-height: 58vw; }
  .layout.cf-layout .sidebar-right   { max-height: 65vw; }
  .sidebar-right .messages           { max-height: 180px; }

  /* ── Inputs: prevent iOS/Samsung auto-zoom on focus (needs font-size ≥ 16px) ── */
  input, input[type="text"], input[type="password"], input[type="email"],
  input[type="search"], input[type="number"], select, textarea, .chat-input,
  .modal-input, .sb-input {
    font-size: 16px !important;
    /* Samsung may override border-radius on inputs — lock it */
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 6px !important;
  }
  /* Re-apply correct border-radius for round buttons (no appearance: none there) */
  button { -webkit-appearance: none; appearance: none; }

  /* ── Modals: full-screen on mobile ── */
  .modal-overlay { padding: 8px !important; align-items: flex-start !important; padding-top: 60px !important; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 85vh !important;
    max-height: 85dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Prevent Samsung from adding horizontal scroll inside modals */
    overflow-x: hidden !important;
  }

  /* ── Tables: horizontal scroll instead of overflow ── */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Generic utility ── */
  .controls      { flex-wrap: wrap !important; gap: 4px !important; }
  .eval-text-bar { width: 100% !important; box-sizing: border-box; }
  .content       { padding: 16px 12px 0 !important; }

  /* ── safe-area padding (notched Samsung phones) ── */
  body > .topbar, body > #topbar {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  /* Bottom nav / install banner clears the home indicator */
  #m-app-banner {
    padding-bottom: max(13px, calc(11px + env(safe-area-inset-bottom))) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* MEDIUM SCREENS (769px – 1100px): hide leaderboard, recalculate board size   */
/* At these widths the default formula (100vw - 626px) gives a tiny board      */
/* because it subtracts sidebar + leaderboard widths. Without the leaderboard  */
/* we only subtract the sidebar (~330px).                                       */
/* ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1100px) {

  /* Hide leaderboard — not enough horizontal room alongside the board */
  #play-home { display: none !important; }

  /* Recalculate board without leaderboard's width contribution */
  #app #board {
    width:  min(calc(100vh - 216px), calc(100vw - 330px)) !important;
    height: min(calc(100vh - 216px), calc(100vw - 330px)) !important;
  }

  #game-area .player-bar,
  #game-area #rank-labels,
  #game-area #file-labels {
    width: min(calc(100vh - 216px), calc(100vw - 330px)) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* LANDSCAPE PHONE  ≤ 768px wide and landscape orientation                      */
/* Board is now height-constrained. Use dvh (dynamic) → vh fallback.            */
/* ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {

  :root {
    --board-size: calc(100vh - 80px);    /* universal vh fallback */
    --board-size: calc(100dvh - 80px);   /* dvh: Samsung 16+, Chrome 108+  */
    --cell: calc(var(--board-size) / 8);
  }

  body {
    overflow-y: auto !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Restore horizontal layout */
  .cf-layout {
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    contain: layout style !important;
  }
  .cf-layout > * { width: auto !important; max-width: none !important; min-width: 0 !important; }

  /* Restore natural order in landscape */
  .cf-layout.cf-3col > :nth-child(1),
  .cf-layout.cf-3col > :nth-child(2),
  .cf-layout.cf-3col > :nth-child(3) { order: unset; }
  #app.cf-layout > #side,
  #app.cf-layout > #game-area,
  #app.cf-layout > #play-home { order: unset; }

  /* Sidebars: narrow scrollable columns */
  .cf-sidebar {
    width: 180px !important;
    max-width: 180px !important;
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: none !important;
    border-right: 1px solid #2a2a4a !important;
  }

  #app.cf-layout #side      { width: 180px !important; max-width: 180px !important; }
  #app.cf-layout #play-home { display: none !important; }
  .layout.cf-layout .right-col { width: 200px !important; max-width: 200px !important; overflow-y: auto; }
  .layout.cf-layout .left-col  { width: auto !important; }
  #app.cf-layout #theme-col    { width: 140px !important; max-width: 140px !important; max-height: none; }

  .layout.cf-layout .sidebar-left,
  .layout.cf-layout .sidebar-right {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);   /* dvh replaces svh for Samsung */
    overflow-x: hidden;
  }

  /* Board elements: height-constrained in landscape (dvh = stable) */
  #app #board {
    width:  calc(100vh - 80px) !important;
    width:  calc(100dvh - 80px) !important;
    height: calc(100vh - 80px) !important;
    height: calc(100dvh - 80px) !important;
    touch-action: none !important;
  }

  #game-area .player-bar,
  #game-area #rank-labels,
  #game-area #file-labels {
    width: calc(100vh - 80px) !important;
    width: calc(100dvh - 80px) !important;
  }

  #app .piece {
    font-size: calc((100vh - 80px) / 9.7) !important;
    font-size: calc((100dvh - 80px) / 9.7) !important;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  .board-wrap, #board-wrap {
    width:  calc(100vh - 80px) !important;
    width:  calc(100dvh - 80px) !important;
    height: calc(100vh - 80px) !important;
    height: calc(100dvh - 80px) !important;
    touch-action: none !important;
  }

  .eval-bar-wrap {
    height: calc(100vh - 80px) !important;
    height: calc(100dvh - 80px) !important;
  }
}