/* /book/css/reader.css
   Stardust Reader Styles (extracted + updated)
*/

/* ------------------------------
   CSS Variables / Theme Tokens
-------------------------------- */
:root {
  --primary-color: linear-gradient(135deg, #8b5cf6, #06b6d4);
  --primary-hover: linear-gradient(135deg, #7c3aed, #0ea5e9);
  --highlight-color: #D0021B;

  --background-color: #F9FAFB;
  --card-bg-color: #FFFFFF;
  --text-color: #374151;
  --secondary-text-color: #9CA3AF;
  --border-color: #E5E7EB;
  --link-color: #8b5cf6;

  --shadow-light: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-medium: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -4px rgba(0,0,0,.07);

  --nav-height: 56px;
  --bottom-nav-height: 56px;

  /* JS updates this via setProperty('--tts-height', '...px') */
  --tts-height: 0px;

  --reader-font-size: 1rem;
  --reader-line-height: 1.75;
}

/* ------------------------------
   Base / Reset
-------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { height: 100%; }

body {
  min-height: 100%;
  font-family: 'Inter', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  font-size: 16px;
}

/* Improve keyboard accessibility without changing mouse UX */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, #60a5fa 55%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Links */
a { color: var(--link-color); }
a:hover { text-decoration: none; }

/* ------------------------------
   Top Navigation
-------------------------------- */
.app-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background-color: var(--card-bg-color);
  box-shadow: var(--shadow-light);
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-nav.scrolled { box-shadow: var(--shadow-medium); }

.app-nav.hide { transform: translateY(-100%); }

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--text-color);
  text-decoration: none;
  transition: background-color 0.2s;
}

.back-btn:hover { background-color: var(--border-color); }

.selector-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}

.selector-row { display: flex; gap: 8px; }

.chapter-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background-color: transparent;
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s, border-color 0.2s;
}

.chapter-btn:hover { background-color: var(--border-color); }

.chapter-btn.small {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.chapter-btn.inline {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.chapter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow-medium);
  max-height: 300px;
  overflow-y: auto;
  display: none;
  z-index: 1100;
  min-width: 220px;
  -webkit-overflow-scrolling: touch;
}

.chapter-dropdown.show { display: block; }

.chapter-item {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text-color);
  transition: background-color 0.2s;
}

.chapter-item:hover { background-color: var(--border-color); }

.chapter-item.active {
  font-weight: 600;
  background-color: var(--border-color);
}

.right-spacer { width: 40px; height: 40px; }

/* ------------------------------
   Settings Panel
-------------------------------- */
.settings-panel {
  position: fixed;
  top: calc(var(--nav-height) + 8px);
  right: 16px;
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-medium);
  z-index: 999;
  width: 280px;
}

.settings-panel h4 {
  margin-bottom: 12px;
  font-size: 1rem;
}

.settings-panel label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.875rem;
}

.settings-panel select {
  width: 100%;
  padding: 10px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--background-color);
  color: var(--text-color);
}

/* ------------------------------
   Layout Container
   Accounts for fixed top nav + fixed bottom nav + TTS bar height
-------------------------------- */
.container {
  max-width: 800px;
  margin: 0 auto;
  flex-grow: 1;
  padding:
    calc(var(--nav-height) + 24px)
    16px
    calc(var(--bottom-nav-height) + var(--tts-height) + 24px);
}

/* ------------------------------
   Chapter Header / Author Card
-------------------------------- */
.chapter-header {
  text-align: center;
  margin-bottom: 24px;
}

.chapter-header h1 {
  font-size: 1.75rem;
  margin-bottom: 8px;
}

.chapter-header h2 {
  font-size: 1.25rem;
  color: var(--secondary-text-color);
}

.author-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding: 16px;
  background-color: var(--card-bg-color);
  border-radius: 12px;
  box-shadow: var(--shadow-light);
}

.author-pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info { flex-grow: 1; }

.author-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.author-name {
  font-weight: 600;
  color: var(--link-color);
  text-decoration: none;
}

.follow-btn {
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  transition: transform 0.14s ease, opacity 0.14s ease;
  touch-action: manipulation;
}

.follow-btn:active { transform: translateY(1px) scale(0.98); }

.follow-btn.following {
  background: var(--primary-color);
  color: white;
}

.premium-badge {
  background-color: gold;
  color: black;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
}

/* ------------------------------
   Reading Content
-------------------------------- */
.chapter-content {
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
  margin-bottom: 32px;
}

.chapter-content p { margin-bottom: 1.5em; }

.chapter-inline-title {
  font-size: 1.5rem;
  margin: 24px 0 16px;
  text-align: center;
}

/* Preview gradient */
.preview-overlay { position: relative; }
.preview-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
  background: linear-gradient(transparent, var(--background-color));
  pointer-events: none;
}

/* ------------------------------
   Comments Dropdown (details/summary)
-------------------------------- */
.chapter-comments {
  margin: 32px 0;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg-color);
}

.chapter-comments summary {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: var(--card-bg-color);
  list-style: none;
}

.chapter-comments summary::-webkit-details-marker { display: none; }

.cc-sub {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
}

.cc-icon { transition: transform 0.2s; }
.chapter-comments[open] .cc-icon { transform: rotate(180deg); }

.chapter-comments-body { padding: 16px; }

.cc-loading {
  text-align: center;
  color: var(--secondary-text-color);
}

/* ------------------------------
   Bottom Navigation Bar (FIXED)
-------------------------------- */
.bottom-nav-bar {
  position: static; /* FIX: was invalid "positional" */
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--card-bg-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: var(--shadow-light);
  z-index: 1000;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--text-color);
  text-decoration: none;
  transition: background-color 0.2s, transform 0.14s ease;
  font-size: 1.25rem;
  border: none;
  cursor: pointer;
}

.nav-btn:hover { background-color: var(--border-color); }
.nav-btn:active { transform: translateY(1px) scale(0.98); }

.bookmark-btn.bookmarked { color: var(--highlight-color); }

.placeholder { width: 50px; height: 50px; }

/* ------------------------------
   Legacy Comments Section (moved by JS, but keep styles)
-------------------------------- */
.comments-section { margin-top: 48px; }
.comments-header { font-size: 1.25rem; margin-bottom: 16px; }

.comment-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-content-wrapper { flex-grow: 1; }

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.comment-username {
  font-weight: 600;
  color: var(--link-color);
  text-decoration: none;
}

.comment-date {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
}

.comment-body { margin-bottom: 8px; }

.comment-actions { display: flex; gap: 16px; }

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--secondary-text-color);
  cursor: pointer;
  transition: color 0.2s;
}

.action-btn:hover { color: var(--text-color); }

.like-btn[data-liked="true"] { color: var(--highlight-color); }

.replies-container {
  margin-left: 52px;
  margin-top: 8px;
}

.comment-form-container { margin-top: 16px; }

.comment-form { display: flex; flex-direction: column; }

.comment-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background-color: var(--background-color);
  color: var(--text-color);
  resize: vertical;
  min-height: 80px;
}

.comment-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.form-btn {
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.14s ease, opacity 0.14s ease, background-color 0.2s;
  border: none;
}

.form-btn:active { transform: translateY(1px) scale(0.98); }

.form-btn.primary {
  background: var(--primary-color);
  color: white;
}

.form-btn.primary:hover { background: var(--primary-hover); }

.form-btn.secondary {
  background: var(--border-color);
  color: var(--text-color);
}

/* Safe hover without darken() */
.form-btn.secondary:hover { opacity: 0.92; }

/* Modern enhancement where supported */
@supports (background-color: color-mix(in srgb, #000 10%, #fff)) {
  .form-btn.secondary:hover {
    opacity: 1;
    background-color: color-mix(in srgb, var(--border-color) 90%, #000 10%);
  }
}

/* ------------------------------
   Unlock Prompt Button
-------------------------------- */
.unlock-prompt {
  text-align: center;
  margin-top: 24px;
}

.unlock-btn,
.signin-prompt .unlock-btn {
  padding: 12px 24px;
  background: var(--primary-color);
  color: white;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.14s ease, opacity 0.14s ease;
}

.unlock-btn:active { transform: translateY(1px) scale(0.98); }

/* ------------------------------
   Toast
   Ensure it sits above bottom nav + TTS
-------------------------------- */
#toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bottom-nav-height) + var(--tts-height) + 16px);
  background-color: rgba(0,0,0,0.8);
  color: white;
  padding: 12px 18px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2100;
  max-width: min(92vw, 520px);
  text-align: center;
}

#toast.show { opacity: 1; }

#toast.error { background-color: var(--highlight-color); }

/* ------------------------------
   Like Animation
-------------------------------- */
.liked-animation .fa-heart { animation: heartbeat 0.5s ease; }

@keyframes heartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ------------------------------
   Reading Streak Card
-------------------------------- */
.streak-card{
  margin:12px 0 24px;
  padding:12px 14px;
  border-radius:14px;
  background:var(--card-bg-color);
  border:1px solid var(--border-color);
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(15,23,42,0.06);
}

.streak-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--primary-color);
}

.streak-main,
.streak-actions{
  position:relative;
  z-index:1;
}

.streak-main{
  display:flex;
  align-items:center;
  gap:10px;
}

.streak-fire{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  background:var(--background-color);
  box-shadow:0 3px 8px rgba(15,23,42,0.08);
  flex-shrink:0;
}

.streak-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.streak-count{
  font-size:1rem;
  font-weight:600;
  color:var(--text-color);
}

.streak-label{
  font-size:0.9rem;
  color:var(--secondary-text-color);
}

.streak-meta{
  font-size:0.8rem;
  color:var(--secondary-text-color);
}

.streak-meta strong{
  font-weight:600;
  color:var(--text-color);
}

.streak-actions{
  display:flex;
  justify-content:flex-start;
}

.streak-restore-btn{
  border:none;
  border-radius:999px;
  padding:8px 14px;
  font-size:0.85rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--primary-color);
  color:#ffffff;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(15,23,42,0.12);
  transition:transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
  touch-action:manipulation;
}

.streak-restore-btn i{ font-size:0.9rem; }

.streak-restore-btn:active{
  transform:translateY(1px) scale(0.97);
  box-shadow:0 2px 6px rgba(15,23,42,0.12);
}

.streak-restore-btn.disabled{
  opacity:0.55;
  cursor:not-allowed;
  box-shadow:none;
}

/* ------------------------------
   Modals (Unified)
-------------------------------- */
.modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:20px;
}

.modal.show{ display:flex; }

.modal-content{
  background:var(--card-bg-color);
  padding:28px 24px;
  border-radius:16px;
  max-width:500px;
  width:100%;
  box-shadow:var(--shadow-medium);
  position:relative;
  max-height:90vh;
  overflow-y:auto;
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  font-size:1.5rem;
  cursor:pointer;
  color:var(--secondary-text-color);
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background 0.2s ease;
  touch-action:manipulation;
}

.modal-close:active{ background:var(--border-color); }

.modal h2{
  font-size:1.4rem;
  margin-bottom:12px;
  line-height:1.3;
}

.modal p{
  line-height:1.6;
  margin-bottom:16px;
  color:var(--text-color);
}

/* Rating Stars */
.rating-stars{
  text-align:center;
  margin:20px 0;
}

.stars-container{
  font-size:2.5rem;
  cursor:pointer;
  display:inline-flex;
  gap:8px;
}

.stars-container i{
  transition:all 0.2s ease;
  touch-action:manipulation;
}

.rating-stars .fas.fa-star{ color:#FFD700; }
.rating-stars .far.fa-star{ color:#E5E7EB; }
.rating-stars .fas.fa-star.hover{ color:#FFED85; }

#rating-text{
  margin-top:12px;
  font-size:0.95rem;
  color:var(--secondary-text-color);
}

#submit-rating-btn:disabled{
  background-color:var(--secondary-text-color);
  cursor:not-allowed;
  opacity:0.6;
}

/* Finish Reading Modal Card (if used) */
.finish-card{ max-width:500px; }

.finish-reco{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  align-items:center;
  text-decoration:none;
  color:inherit;
  padding:12px;
  border-radius:12px;
  transition:background 0.2s ease;
}

.finish-reco:active{ background:var(--border-color); }

.finish-cover{
  width:110px;
  height:165px;
  border-radius:10px;
  overflow:hidden;
  background:#eee;
  box-shadow:var(--shadow-light);
}

.finish-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.finish-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.finish-tag{
  align-self:flex-start;
  font-size:0.7rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#374151;
}

.finish-title{
  font-size:1.05rem;
  font-weight:600;
  color:var(--text-color);
  line-height:1.3;
}

/* ------------------------------
   Responsive Adjustments
-------------------------------- */
@media (max-width: 768px) {
  .container { padding-left: 8px; padding-right: 8px; }
  .nav-content { padding: 0 8px; }
  .settings-panel { right: 8px; width: calc(100% - 16px); }
  .author-section { flex-direction: column; text-align: center; }
  .author-pic { margin-bottom: 8px; }
  .author-meta { justify-content: center; }
  .chapter-header h1 { font-size: 1.5rem; }
  .chapter-header h2 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  :root { --bottom-nav-height: 50px; }

  .selector-row { gap: 4px; }
  .chapter-btn { padding: 6px 10px; font-size: 0.8rem; }
  .nav-btn { width: 40px; height: 40px; font-size: 1rem; }

  .streak-card{ padding:10px 12px; }
  .streak-main{ align-items:flex-start; }
  .streak-actions{ width:100%; }
  .streak-restore-btn{
    width:100%;
    justify-content:center;
  }
}

@media (min-width:768px){
  .streak-card{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .streak-actions{ justify-content:flex-end; }
}

/* Reduce motion when requested */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- Comment layout hardening --- */

/* Prevent horizontal page break */
.comments-section,
.comment-card,
.comment-content-wrapper,
.comment-body,
.replies-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* Key fix for flex overflow: allow content column to shrink */
.comment-card {
  display: flex;      /* you already do this visually; ensure it’s set */
  min-width: 0;
}

.comment-content-wrapper {
  min-width: 0;       /* critical in flex rows */
}

/* Break long strings/URLs instead of forcing width */
.comment-body,
.comment-body a,
.comment-username,
.comment-date {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Make reply indentation mobile-friendly */
.replies-container {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--border-color);
}

@media (max-width: 480px) {
  .replies-container {
    margin-left: 8px;
    padding-left: 8px;
  }
}
/* ------------------------------
   Up Next / Recommendations (Carousel)
-------------------------------- */

.upnext{
  margin: 28px 0 22px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--card-bg-color);
  box-shadow: var(--shadow-light);
}

.upnext-paywall{
  margin-top: 18px;
}

.upnext-head{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 14px;
}

.upnext-title{
  font-size: 1.15rem;
  font-weight: 700;
}

.upnext-sub{
  font-size: 0.92rem;
  color: var(--secondary-text-color);
}

.upnext-actions{
  display:flex;
  margin-bottom: 14px;
}

.upnext-primary{
  width:100%;
  text-decoration:none;
  color: inherit;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--background-color);
  display:flex;
  flex-direction:column;
  gap:6px;
  transition: transform 0.14s ease, opacity 0.14s ease;
}

.upnext-primary:active{
  transform: translateY(1px) scale(0.99);
}

.upnext-primary-label{
  font-weight: 800;
}

.upnext-primary-meta{
  color: var(--secondary-text-color);
  font-size: 0.92rem;
}

/* ---- Carousel ---- */
/* Make the container a horizontal, snapping carousel */
.upnext-grid{
  display: grid;               /* keep markup unchanged */
  grid-auto-flow: column;      /* horizontal flow */
  grid-auto-columns: 42%;      /* card width on mobile */
  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  padding: 2px 2px 10px;       /* room for shadows */
  margin: 0 -2px;              /* visual alignment */
}

/* Hide scrollbar (keeps scroll working) */
.upnext-grid::-webkit-scrollbar{ height: 0; }
.upnext-grid{ scrollbar-width: none; }

/* Cards become snap points */
.upnext-card{
  scroll-snap-align: start;
  text-decoration:none;
  color: inherit;

  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow:hidden;
  background: var(--background-color);

  transition: transform 0.14s ease, opacity 0.14s ease;
  min-width:0;
}

.upnext-card:active{
  transform: translateY(1px) scale(0.99);
}

/* Cover keeps a consistent ratio */
.upnext-cover{
  width:100%;
  aspect-ratio: 2 / 3;
  background:#eee;
  overflow:hidden;
}

.upnext-cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Title sits under the cover */
.upnext-card-title{
  padding: 10px 10px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Tablet/desktop: show more cards at once */
@media (min-width: 768px){
  .upnext-grid{
    grid-auto-columns: 22%;
  }
}

@media (min-width: 1024px){
  .upnext-grid{
    grid-auto-columns: 18%;
  }
}

/* Very small screens: slightly larger cards */
@media (max-width: 360px){
  .upnext-grid{
    grid-auto-columns: 55%;
  }
}

/* ------------------------------
   IMPORTANT: Fix bottom nav
   (your JS + padding assumes it is fixed)
-------------------------------- */
.bottom-nav-bar{
  position: fixed; /* was static */
  bottom: 0;
  left: 0;
}

/* As a last resort, hide accidental horizontal overflow */
html, body {
  overflow-x: hidden;
}