/* TJK-Chess v16.0.11 — responsive/mobile consolidation.
   Loaded last so it owns phone geometry without changing desktop chess logic. */

/* Avoid browser scroll anchoring on dynamic training panels. */
.puzzle-workspace,#tjk-puzzle-root,.puzzle-app,.puzzle-board-card{overflow-anchor:none}

@media (max-width: 760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body{min-width:0!important}

  /* Mobile header: menu at far left, compact brand in the middle, account at right. */
  .site-header{
    position:sticky!important;top:0!important;z-index:5000!important;
    display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;
    grid-template-areas:"menu brand account"!important;
    align-items:center!important;min-height:56px!important;height:56px!important;
    padding:0 8px!important;gap:6px!important;
  }
  .site-menu-toggle{
    grid-area:menu!important;display:grid!important;place-items:center!important;
    width:40px!important;height:40px!important;min-width:40px!important;margin:0!important;
  }
  .site-brand{
    grid-area:brand!important;justify-self:start!important;min-width:0!important;max-width:100%!important;
    gap:7px!important;font-size:1.02rem!important;line-height:1!important;
  }
  .site-brand-mark{width:34px!important;height:34px!important;min-width:34px!important;border-radius:9px!important}
  .site-brand>span:last-child{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .site-actions{
    grid-area:account!important;justify-self:end!important;display:flex!important;align-items:center!important;
    width:42px!important;min-width:42px!important;max-width:42px!important;margin:0!important;gap:0!important;
  }
  .site-actions>.course-search,
  .site-actions>.site-sound-toggle,
  .site-actions>.site-notifications,
  .site-actions>.site-language,
  .site-actions>.site-language-picker,
  .site-actions>.site-theme-toggle{display:none!important}
  .site-profile-button{
    display:grid!important;place-items:center!important;width:40px!important;height:40px!important;min-width:40px!important;
    padding:0!important;margin:0!important;border-radius:50%!important;overflow:visible!important;
  }
  .site-profile-copy{display:none!important}
  .site-avatar{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important;font-size:.92rem!important;font-weight:900!important}

  /* Drawer is always attached immediately below the header and scrolls independently. */
  .site-nav{display:none!important;position:fixed!important;left:0!important;right:0!important;top:56px!important;bottom:auto!important;
    width:100vw!important;max-width:100vw!important;max-height:calc(100dvh - 56px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    margin:0!important;padding:8px 10px 18px!important;box-sizing:border-box!important;grid-template-columns:1fr!important;gap:5px!important;
    border-radius:0!important;z-index:4999!important}
  .site-header.is-menu-open .site-nav{display:grid!important}
  .site-nav-item,.site-nav>.site-nav-link,.site-nav>button{width:100%!important;min-width:0!important;grid-column:1!important}
  .site-nav-item{display:grid!important}
  .site-nav-item>.site-nav-dropdown{position:static!important;display:grid!important;width:100%!important;min-width:0!important;max-width:none!important;
    margin:0!important;padding:3px 0 4px 12px!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
    box-shadow:none!important;border:0!important;background:transparent!important}
  .site-nav-item>.site-nav-dropdown button{min-height:42px!important;width:100%!important}

  /* Analysis board: the board itself owns the phone width. No residual DB/eval column may shrink it. */
  body.is-analysis-tool .tools-workspace,
  body.is-analysis-tool .tools-content,
  body.is-analysis-tool .tool-panel[data-tool-panel="analysis"].is-active,
  body.is-analysis-tool .analysis-layout,
  body.is-analysis-tool .analysis-board-column{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding-left:0!important;padding-right:0!important}
  body.is-analysis-tool .analysis-layout{display:flex!important;flex-direction:column!important;gap:6px!important}
  body.is-analysis-tool .analysis-board-column{order:1!important;display:block!important}
  body.is-analysis-tool .analysis-board-wrap{
    display:block!important;width:100vw!important;width:100dvw!important;max-width:100vw!important;max-width:100dvw!important;
    margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
    padding:0!important;box-sizing:border-box!important;
  }
  body.is-analysis-tool .analysis-board-stage{
    display:block!important;width:100vw!important;width:100dvw!important;height:100vw!important;height:100dvw!important;
    max-width:100vw!important;max-width:100dvw!important;min-width:0!important;max-height:none!important;aspect-ratio:1/1!important;margin:0!important;
  }
  body.is-analysis-tool .analysis-chessboard{display:grid!important;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:1/1!important}
  body.is-analysis-tool .analysis-database-column{order:2!important;width:100%!important;max-width:100%!important}
  body.is-analysis-tool .analysis-sidebar{order:3!important;width:100%!important;max-width:100%!important}
  body.is-analysis-tool .analysis-board-controls{width:100%!important;max-width:100%!important;margin:4px 0!important;padding:0 4px!important;box-sizing:border-box!important}

  /* Tactics: keep board dimensions invariant before/after solve and keep it first in document flow. */
  .puzzle-workspace{width:100%!important;max-width:100%!important;padding:8px 0 28px!important;margin:0!important}
  .puzzle-heading,.puzzle-filterbar-v199,.puzzle-filterbar-v200,.puzzle-filterbar-v202{margin-left:10px!important;margin-right:10px!important}
  .puzzle-app{display:flex!important;flex-direction:column!important;width:100%!important;max-width:100%!important;gap:8px!important;align-items:stretch!important}
  .puzzle-board-card{order:1!important;width:100%!important;max-width:100%!important;margin:0!important;border-left:0!important;border-right:0!important;border-radius:0!important;position:relative!important;top:auto!important}
  .puzzle-board-wrap{width:100vw!important;width:100dvw!important;height:100vw!important;height:100dvw!important;min-height:100vw!important;min-height:100dvw!important;max-width:100vw!important;max-width:100dvw!important;margin:0!important;padding-right:0!important;background:transparent!important;box-sizing:border-box!important;flex:0 0 auto!important}
  .puzzle-board{width:100%!important;height:100%!important;aspect-ratio:1/1!important;border:2px solid #243047!important;border-right:2px solid #243047!important;box-sizing:border-box!important}
  .puzzle-board-footer{min-height:46px!important;box-sizing:border-box!important}
  .puzzle-side-card{order:2!important;width:100%!important;min-height:360px!important;margin:0!important;border-radius:0!important}
  .puzzle-piece,.puzzle-drag-ghost{font-size:11.4vw!important;touch-action:none!important}
  .puzzle-square{touch-action:none!important;-webkit-user-select:none!important;user-select:none!important}
  .puzzle-square.is-selected{box-shadow:inset 0 0 0 4px rgba(241,196,25,.98)!important}
  .puzzle-square.is-drop-target{box-shadow:inset 0 0 0 4px rgba(241,196,25,.98)!important}
}

@media (max-width: 430px){
  .site-header{grid-template-columns:42px minmax(0,1fr) 42px!important}
  .site-brand>span:last-child{font-size:.92rem!important}
}
@media (max-width: 350px){
  .site-brand>span:last-child{display:none!important}
}

/* Tablet: collapse complex workspaces before they become cramped. */
@media (min-width:761px) and (max-width:1020px){
  .analysis-layout,.puzzle-app,.position-play-layout,.computer-layout,.live-layout{grid-template-columns:1fr!important}
  .analysis-board-column,.analysis-database-column,.analysis-sidebar{width:100%!important;max-width:100%!important}
  .analysis-board-stage,.puzzle-board-wrap{width:min(78vw,680px)!important;max-width:100%!important;margin-inline:auto!important}
}