/* =====================================================================
 * mobile.css — Webtoon-inspired mobile-first overrides
 * Loaded AFTER styles.css to override its desktop-oriented widths.
 * Activates on viewports ≤ 1024px (phones AND tablets in portrait).
 * Desktop view (≥ 1025px) is untouched.
 * ===================================================================== */

@media (max-width: 1024px) {
  /* --- Page-level: no horizontal overflow, edge-to-edge content --- */
  html, body { overflow-x: hidden; }
  body.theme-mainmenu {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* --- Header: compact, sticky, edge-to-edge --- */
  .header-container {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 12px !important;
    gap: 8px !important;
    background: linear-gradient(135deg, rgba(15,18,38,0.97), rgba(17,10,32,0.97)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(107,247,255,0.18) !important;
  }
  .title {
    font-size: 1.5em !important;
    letter-spacing: 0.5px !important;
  }
  .nav-button,
  .dropbtn {
    padding: 6px 11px !important;
    font-size: 0.75em !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
  }
  /* Hide "+" margin between nav buttons */
  .nav-button { margin-left: 0 !important; }

  /* --- Hero / Recommended (CHECK THESE OUT): full-width, edge-to-edge --- */
  .recommended-scroll {
    width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 16px 14px 18px !important;
    border-radius: 0 !important;
    height: auto !important;
    background: linear-gradient(180deg, rgba(255,121,242,0.10) 0%, rgba(107,247,255,0.04) 100%) !important;
    box-shadow: none !important;
  }
  .check-title {
    font-size: 0.95em !important;
    letter-spacing: 0.18em !important;
    margin: 0 0 14px !important;
    text-align: left !important;
  }
  .recommended-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 4px 4px 12px !important;
    height: auto !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .recommended-list::-webkit-scrollbar { display: none; }
  .recommended-item {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 14px !important;
    min-width: 46vw !important;
    width: 46vw !important;
    max-width: 220px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    text-align: left !important;
  }
  .recommended-item img {
    width: 100% !important;
    height: calc(46vw * 1.4) !important;
    max-height: 320px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    display: block;
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  }
  .recommended-item h3 {
    font-size: 0.92em !important;
    color: #f1f5ff !important;
    margin: 4px 2px !important;
    line-height: 1.25 !important;
    font-weight: 700;
  }
  .recommended-item p {
    font-size: 0.74em !important;
    color: #b8c4dc !important;
    margin: 0 2px !important;
  }
  /* Hide arrows on mobile (rely on native scroll) */
  .scroll-arrows { display: none !important; }

  /* --- COMICS section: tight bar title, edge-to-edge cards --- */
  #comics-section {
    padding: 0 !important;
  }
  .comics-title {
    font-size: 1.05em !important;
    padding: 12px 16px !important;
    margin: 18px 14px 14px !important;
    text-align: left !important;
    letter-spacing: 0.18em !important;
    border-width: 1px !important;
    border-radius: 12px !important;
    background: rgba(255, 182, 193, 0.10) !important;
  }
  .comics-list {
    gap: 18px !important;
    align-items: stretch !important;
    padding: 0 14px 24px !important;
  }
  /* Each comic-card → vertical, full-width, cover on top, info below (Webtoon-style) */
  .comic-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  .comic-card:hover { transform: none !important; box-shadow: 0 12px 30px rgba(255,121,242,0.18) !important; }
  .comic-card:active { transform: scale(0.99) !important; }
  .comic-cover {
    width: 100% !important;
    height: 56vw !important;
    max-height: 320px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  .comic-info {
    padding: 14px 16px 18px !important;
    padding-left: 16px !important;
    color: #e9f2ff !important;
    line-height: 1.45 !important;
  }
  .comic-info h3 {
    margin: 0 0 8px !important;
    color: #6bf7ff !important;
    font-size: 1.15em !important;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  /* Description container's notepad bg looks weird on mobile — flatten it */
  .description-container {
    background-image: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .description-container p {
    color: #c5d4ee !important;
    font-size: 0.85em !important;
    margin: 4px 0 !important;
  }
  .description-container p:first-child {
    /* the main story description */
    color: #b8c4dc !important;
    font-size: 0.86em !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .description-container strong { color: #ff79f2 !important; }

  /* "Open Story" CTA on the comic card → pill-shaped full-width */
  .comic-info .nav-button {
    display: inline-block !important;
    padding: 10px 22px !important;
    font-size: 0.85em !important;
    background: linear-gradient(135deg, #6bf7ff 0%, #ff79f2 100%) !important;
    color: #1a0a30 !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 999px !important;
    margin-top: 8px !important;
    box-shadow: 0 6px 16px rgba(107,247,255,0.25) !important;
  }
  .comic-info .nav-button:hover {
    background: linear-gradient(135deg, #6bf7ff 0%, #ff79f2 100%) !important;
    color: #1a0a30 !important;
  }

  /* --- Top Supporters leaderboard — same edge-to-edge treatment --- */
  .leaderboard-box {
    margin: 18px 14px !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }
  .leaderboard-head { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
  .leaderboard-head .comics-title { margin: 0 !important; padding: 8px 12px !important; font-size: 0.95em !important; }
  .leaderboard-tabs { flex-wrap: wrap !important; gap: 6px !important; }
  .lb-tab { padding: 7px 14px !important; font-size: 0.78em !important; }

  /* --- Ad slots: stay tidy on mobile --- */
  .ad-slot {
    margin: 12px 14px !important;
    border-radius: 12px !important;
    overflow: hidden;
  }
  .ad-slot img { width: 100% !important; height: auto !important; display: block; }

  /* --- Footer: tighter on mobile --- */
  .site-foot {
    padding: 18px 14px 28px !important;
    text-align: center !important;
  }
  .site-foot p { margin: 6px 0 !important; font-size: 0.82em !important; }

  /* --- Reader (chapter.html) topbar tightening --- */
  .reader-topbar {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .reader-title {
    font-size: 1em !important;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-link {
    padding: 6px 10px !important;
    font-size: 0.8em !important;
  }

  /* --- Story page (story.html): cover + info edge-to-edge --- */
  .story-hero { padding: 16px 14px !important; }
  .story-hero img,
  .story-cover {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* --- Generic shop / forum / community page widths --- */
  .shop-container,
  .forum-page,
  .community-page,
  .forum-thread-page {
    padding: 16px 14px !important;
  }
  .shop-grid { gap: 14px !important; }
  .shop-card { border-radius: 18px !important; }

  /* --- Admin dashboard: legibility on phone (the bug stella reported) --- */
  .admin-main,
  .admin-page {
    padding: 14px 12px !important;
  }
  .chapter-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .chapter-head { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .chapter-actions {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .chapter-actions button {
    flex: 1 1 auto !important;
    min-width: 44%;
    padding: 9px 10px !important;
    font-size: 0.82em !important;
    width: auto !important;
  }
  .panel-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
    gap: 6px !important;
  }

  /* --- CRITICAL: prevent iOS Safari auto-zoom-on-focus.
     Any <input>/<select>/<textarea> with font-size < 16px makes iOS zoom in
     when focused, which then triggers chaotic scroll jumps as the keyboard
     opens. Forcing 16px on form controls inside auth/settings/forum/builder
     forms keeps the viewport stable so typing never scrolls the page. --- */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* --- When ANY input/textarea/select inside the page is focused, hide the
     bottom tab bar. Otherwise on iOS the keyboard plus the fixed nav both
     fight to stay above each other and the page jumps. Class is added by
     JS on focusin / removed on focusout. --- */
  body.ws-kbd-open .ws-bottom-nav {
    display: none !important;
  }
  body.ws-kbd-open { padding-bottom: 0 !important; }
}

/* --- Slightly smaller phones (~ ≤ 400px) — tighten further --- */
@media (max-width: 400px) {
  .title { font-size: 1.35em !important; }
  .nav-button, .dropbtn { padding: 5px 9px !important; font-size: 0.7em !important; }
  .recommended-item { min-width: 50vw !important; width: 50vw !important; }
  .comic-info h3 { font-size: 1.05em !important; }
}

/* --- TABLET refinements (721-1024px) ---
 * Phone + tablet share the Webtoon-style layout above, but tablets get:
 * - 2-column comic grid (more screen real estate)
 * - Larger hero carousel thumbnails
 * - More generous padding
 * - No bottom tab bar (header nav has plenty of room)
 */
@media (min-width: 721px) and (max-width: 1024px) {
  .comics-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
    padding: 0 22px 32px !important;
  }
  .comic-card {
    margin: 0 !important;
  }
  .comic-cover {
    height: 36vw !important;
    max-height: 380px !important;
  }
  .recommended-item {
    min-width: 28vw !important;
    width: 28vw !important;
    max-width: 240px !important;
  }
  .recommended-item img {
    height: calc(28vw * 1.4) !important;
    max-height: 320px !important;
  }
  .comics-title,
  .leaderboard-box,
  .ad-slot,
  .shop-container,
  .forum-page,
  .community-page,
  .forum-thread-page {
    margin-left: 22px !important;
    margin-right: 22px !important;
  }
  /* Tablet: header full-size like desktop */
  .title { font-size: 1.9em !important; }
  .nav-button, .dropbtn { padding: 9px 16px !important; font-size: 0.85em !important; }
  /* Tablet: hide the bottom tab bar — header nav has enough room */
  .ws-bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* =====================================================================
 * BOTTOM TAB BAR (phone only, Webtoon-style)
 * Fixed nav at the bottom of the viewport with 5 tabs.
 * Hidden on desktop AND tablets (handled in JS + media queries above).
 * ===================================================================== */
.ws-bottom-nav { display: none; }

@media (max-width: 720px) {
  .ws-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(15,18,38,0.92) 0%, rgba(10,8,24,0.98) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(107,247,255,0.18);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(0,0,0,0.45);
    justify-content: space-around;
    align-items: stretch;
  }
  .ws-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px 4px;
    color: #9aa6c0;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.68em;
    letter-spacing: 0.03em;
    border-radius: 12px;
    transition: color 0.18s ease, transform 0.12s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .ws-tab-icon {
    font-size: 1.4em;
    line-height: 1;
    transition: transform 0.18s ease;
    filter: grayscale(0.4) opacity(0.9);
  }
  .ws-tab-label {
    line-height: 1;
    margin-top: 1px;
  }
  .ws-tab:hover { color: #c5d4ee; }
  .ws-tab:active .ws-tab-icon { transform: scale(0.88); }
  .ws-tab.is-active {
    color: #6bf7ff;
  }
  .ws-tab.is-active .ws-tab-icon {
    filter: none;
    transform: translateY(-1px);
    text-shadow: 0 0 12px rgba(107,247,255,0.55);
  }
  /* Subtle gradient underline on the active tab */
  .ws-tab.is-active::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 30%;
    right: 30%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #6bf7ff 0%, #ff79f2 100%);
    box-shadow: 0 0 8px rgba(107,247,255,0.6);
  }

  /* Add bottom padding to body so content doesn't get hidden behind the tab bar */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Reader page bottom controls already include their own spacing — hide bottom nav there
     (also handled in JS, but belt-and-suspenders) */
  body.theme-reader .ws-bottom-nav { display: none !important; }
  body.theme-reader { padding-bottom: 0 !important; }
}