/* Shared mobile navigation, page canvas, and safe areas. */
@media (max-width: 768px) {
  :root {
    --mobile-edge: 16px;
    --mobile-radius-xl: 30px;
    --mobile-radius-lg: 24px;
    --mobile-radius-md: 18px;
  }

  html { scroll-behavior: smooth; }

  body {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
    background:
      radial-gradient(circle at 8% -4%, rgba(66,133,244,.12), transparent 30%),
      radial-gradient(circle at 92% 12%, rgba(123,97,255,.07), transparent 28%),
      var(--bg);
  }

  body::before { opacity: .5; animation-duration: 20s; }

  /* Shared top app bar */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 110;
    min-height: 62px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
    border: 0 !important;
    background: color-mix(in srgb, var(--bg) 80%, transparent) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }

  .nav-left { gap: 10px !important; min-width: 0; }
  .logo { gap: 8px !important; font-size: 17px !important; letter-spacing: -.3px; }
  .site-icon { width: 30px !important; height: 30px !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(37,99,235,.11); }
  .site-title { white-space: nowrap; }

  #mobile-menu-btn,
  .theme-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--surface) 84%, transparent) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 5px 18px rgba(0,0,0,.045);
    color: var(--text) !important;
  }

  .nav-right { gap: 6px !important; }
  .login-status-text,
  #toggle-register-panel-btn,
  #logout-btn { display: none !important; }
  #toggle-login-panel-btn {
    height: 40px !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    font-weight: 650 !important;
  }

  /* No permanent bottom navigation; the menu is the single global navigation entry. */
  .mobile-app-nav { display: none !important; }
  body.sidebar-open { overflow: hidden; }

  /* Shared page canvas */
  .main-content,
  .study-container,
  .exercise-container,
  .grammar-container,
  .sentence-container,
  .profile-container,
  .admin-container,
  .about-container,
  .changelog-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px var(--mobile-edge) 30px !important;
  }

  h1,
  .main-title,
  .page-title,
  .study-title,
  .exercise-title,
  .grammar-title,
  .sentence-title {
    letter-spacing: -1px !important;
  }

  /* Shared sidebar + auth sheets */
  .sidebar {
    top: auto !important;
    left: 10px !important;
    right: 10px !important;
    bottom: -110% !important;
    width: auto !important;
    height: min(72dvh,620px) !important;
    padding: 18px !important;
    border-radius: 30px 30px 0 0 !important;
    transition: bottom .34s var(--ease-out) !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,.18) !important;
  }
  .sidebar.open { bottom: 0 !important; }
  .mobile-nav { margin-top: 48px !important; gap: 6px !important; }
  .mobile-nav a { padding: 13px 15px !important; border-radius: 17px !important; font-size: 16px !important; }
  .assistant-layout { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 18px var(--mobile-edge) 30px !important; }
  .pc-nav { display: none !important; }
  #mobile-menu-btn { display: grid !important; }
  #mobile-menu-btn, .theme-toggle-btn { min-width: 44px !important; min-height: 44px !important; }
  .sidebar { height: min(78dvh, 680px) !important; }
  .close-sidebar-btn, #close-sidebar-btn { min-width: 44px !important; min-height: 44px !important; }
}

#portrait-orientation-notice { display: none; }

@media (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) and (pointer: coarse) {
  body { overflow: hidden !important; }

  #portrait-orientation-notice {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: var(--bg, #111);
    color: var(--text, #fff);
    text-align: center;
  }

  #portrait-orientation-notice span { font-size: 38px; line-height: 1; }
  #portrait-orientation-notice strong { font-size: 22px; }
  #portrait-orientation-notice p { margin: 0; color: var(--text-secondary, #aaa); }
}