/* ═══════════════════════════════════════════════════════════════════
   KSG Mobile UI  —  complete layout overrides for viewport ≤ 768 px
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Utility ─────────────────────────────────────────────────── */
  .mobile-only  { display: block  !important; }
  .desktop-only { display: none   !important; }

  /* ── Base ────────────────────────────────────────────────────── */
  .container  { padding: 10px 12px; max-width: 100%; }
  .page-title { font-size: 1.15rem; margin-bottom: 2px; }
  .page-sub   { font-size: .8rem;   margin-bottom: 10px; }
  .card       { padding: 12px 14px; }

  /* ── Navigation ──────────────────────────────────────────────── */
  nav {
    height: auto;
    min-height: 50px;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 2px 6px;
  }
  .nav-brand { font-size: .9rem;  margin-right: 4px; }
  .nav-link  { font-size: .76rem; padding: 4px 8px; }
  .nav-right { gap: 6px; flex-wrap: wrap; }
  .help-btn  { display: none; }          /* reclaim nav space */
  .lang-btn  { font-size: .72rem; padding: 4px 8px; }
  .notif-dropdown { width: calc(100vw - 24px); right: 4px; left: 4px; }

  /* ── ═══════════════════════════════════════════════════════════
        GAME PAGE
     ═══════════════════════════════════════════════════════════ */

  /* Collapse 2-column grid to a vertical stack */
  .game-layout {
    display:        flex        !important;
    flex-direction: column      !important;
    gap:            8px         !important;
  }
  .game-canvas-col { width: 100%; }

  /* Canvas: capped height so buttons stay reachable */
  .canvas-wrap {
    max-height:                 46vh;
    overflow-y:                 auto;
    overflow-x:                 hidden;
    -webkit-overflow-scrolling: touch;
  }
  #game-canvas { width: 100%; display: block; }

  /* ① AI label — right below canvas */
  .label-display {
    padding:    12px 14px !important;
    text-align: left     !important;
  }
  .label-name { font-size: 1.3rem !important; margin: 4px 0 !important; }

  /* ② Buttons — 2-column grid on mobile */
  #game-btn-wrap[style*="flex"] {
    display:               grid    !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   8px     !important;
  }
  .game-btns .btn-lg {
    padding:         12px 6px  !important;
    font-size:       .84rem    !important;
    justify-content: center    !important;
    text-align:      center    !important;
    line-height:     1.3       !important;
  }

  /* ③ Score + streak: single column on mobile */
  .score-streak-row {
    grid-template-columns: 1fr !important;
  }
  .score-display {
    display:        flex      !important;
    flex-direction: row       !important;
    align-items:    center    !important;
    gap:            8px       !important;
    padding:        10px 14px !important;
    text-align:     left      !important;
  }
  .score-display > .stat-label:first-child { display: none    !important; }
  .score-display .score-val               { font-size: 1.5rem !important; }
  .score-display #rank-badge              { font-size: .72rem !important; margin-top: 0 !important; }

  /* ④ Streak compact */
  #streak-card { padding: 8px 14px !important; }
  .streak-display {
    display:        flex    !important;
    flex-direction: row     !important;
    align-items:    center  !important;
    gap:            8px     !important;
    text-align:     left    !important;
  }
  .streak-display .score-val { font-size: 1.35rem !important; }

  /* ⑦ Wrong section — bottom sheet overlay */
  #wrong-section {
    position:    fixed                             !important;
    inset:       auto 0 0 0                        !important;
    max-height:  76vh                              !important;
    overflow-y:  auto                              !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0                   !important;
    z-index:     500                               !important;
    padding:     16px                              !important;
    background:  var(--bg2)                        !important;
    border:      1px solid var(--border)           !important;
    border-bottom: none                            !important;
    box-shadow:  0 -12px 50px rgba(0,0,0,.75)      !important;
    animation:   sheetUp .2s ease-out;
  }
  @keyframes sheetUp {
    from { transform: translateY(60px); opacity: .4; }
    to   { transform: translateY(0);    opacity: 1;  }
  }
  .wrong-close-btn {
    width:           100%         !important;
    margin-bottom:   12px         !important;
    justify-content: center       !important;
  }

  /* Class grid: 2 columns */
  .class-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .class-btn  { padding: 11px 4px !important; font-size: .8rem !important; }

  /* ── ═══════════════════════════════════════════════════════════
        ADMIN PAGE
     ═══════════════════════════════════════════════════════════ */

  .admin-layout {
    display:               grid  !important;
    grid-template-columns: 1fr   !important;
    gap:                   12px;
  }
  /* Canvas: shorter cap on admin so meta cards stay visible */
  .admin-layout .canvas-wrap {
    max-height: 42vh;
    overflow-y: auto;
  }
  /* Buttons: fixed full-width bar pinned to screen bottom */
  .admin-layout #game-btn-wrap {
    position:              fixed                   !important;
    bottom:                0                       !important;
    left:                  0                       !important;
    right:                 0                       !important;
    width:                 100%                    !important;
    border-radius:         16px 16px 0 0           !important;
    padding:               12px 14px               !important;
    z-index:               150                     !important;
    display:               grid                    !important;
    grid-template-columns: 1fr 1fr                 !important;
    gap:                   8px                     !important;
    background:            var(--bg2)              !important;
    border:                1px solid var(--border) !important;
    border-bottom:         none                    !important;
    box-shadow:            0 -4px 28px rgba(0,0,0,.5) !important;
  }
  .admin-layout #game-btn-wrap .btn-lg {
    padding:   14px 8px !important;
    font-size: .93rem   !important;
  }
  /* Pad side panel so content clears the fixed button bar */
  .admin-layout .game-side { padding-bottom: 88px; }
  /* Admin meta card: tighter on mobile */
  .admin-meta { font-size: .85rem; }

  /* ── Other layouts ───────────────────────────────────────────── */
  .img-grid   { grid-template-columns: 1fr               !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr)    !important; }
  .help-grid  { grid-template-columns: 1fr               !important; }

  /* ── Leaderboard ─────────────────────────────────────────────── */
  .lb-table          { font-size: .82rem; }
  .lb-table th,
  .lb-table td       { padding: 10px 8px; }

  /* ── Upload ──────────────────────────────────────────────────── */
  .upload-zone { padding: 36px 18px; }
  .upload-icon { font-size: 2rem; }

  /* ── Forms ───────────────────────────────────────────────────── */
  .form-card    { margin: 32px auto; }

  /* ── Misc ────────────────────────────────────────────────────── */
  .score-anim   { font-size: 2.2rem; }
  /* Multi / Rebox fullscreen modals — account for possibly-taller nav */
  .multi-modal  { top: 50px; padding: 12px; }
  /* Done message */
  .done-msg     { padding: 32px 16px; }

  /* ── Full-viewport revert (desktop-only feature) ───────────────────── */
  body.game-page,
  body.admin-page {
    height:   auto !important;
    overflow: auto !important;
  }
  body.game-page > .container,
  body.admin-page > .container {
    flex:         none    !important;
    overflow:     visible !important;
    padding-top:  10px    !important;
    padding-bottom: 10px  !important;
  }
  body.game-page #game-canvas,
  body.admin-page #game-canvas {
    width:      100%  !important;
    height:     auto  !important;
    max-height: none  !important;
  }
  body.game-page .game-canvas-col,
  body.game-page .game-canvas-col > .card {
    flex: none !important;
    min-height: unset !important;
  }
  body.game-page #multi-section,
  body.game-page #rebox-section {
    position: static   !important;
    overflow: visible  !important;
  }
  body.game-page .game-side,
  body.admin-page .game-side {
    overflow-y: visible !important;
    min-height: unset   !important;
  }

}