/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-lite-suffix { display: inline; }
  /* Hide desktop-only panels and toggles */
  #covers-panel, #covers-toggle, #right-toggle, #feed-toggle { display: none !important; }
  #demo-btn                                    { display: none !important; }
  /* The Cheat Sheet is a list of keyboard shortcuts - Ctrl+X/Ctrl+Y need a
     keyboard, and I/C/E only apply to the play/tracker area, which is itself
     disabled on mobile. None of it is usable here, so don't advertise it.
     The settings gear (mobile's only path into the Ctrl+Y panel - feed
     toggles, background source, reduce animations) was removed on purpose;
     those settings simply aren't reachable on mobile anymore. */
  #app-banner-f1-btn { display: none !important; }
  #main-screen                                 { display: none !important; }
  #landing-bg-a, #landing-bg-b                { display: none !important; }

  /* Single-column layout */
  #landing-wrapper {
    padding: 0 !important;
    display: block !important;
  }
  #feed-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    padding-top: calc(0.75rem + env(safe-area-inset-top)) !important;
    box-sizing: border-box;
  }
  body.feed-collapsed #feed-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0.75rem !important;
    padding-top: calc(0.75rem + env(safe-area-inset-top)) !important;
    padding-bottom: 0.75rem !important;
  }

  /* Right panel: hidden after login, full-screen only on mobile auth */
  #landing-right {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 500;
    padding: 2rem 1.5rem !important;
    padding-top: calc(2rem + env(safe-area-inset-top)) !important;
    box-sizing: border-box;
    overflow-y: auto;
    border: none !important;
  }
  body.mobile-auth #landing-right {
    display: flex !important;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
  }
  body.mobile-auth #feed-panel { display: none !important; }

  #login-screen {
    width: min(100%, 44rem);
    margin: 0 auto;
  }

  #mobile-guest-btn {
    display: block;
    margin-top: 1.25rem;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    animation: mobile-guest-pulse 4s ease-in-out infinite;
  }

  /* Scroll-to-top buttons: only center one visible, always centered */
  #covers-scroll-top, #right-scroll-top { display: none !important; }
  #center-scroll-top { left: 50% !important; transform: translateX(-50%) !important; }

  /* App banner */
  #app-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
  }
  #app-banner-brand { display: none !important; }
  #app-banner-sub   { display: none !important; }
  #app-banner-right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  #app-banner-btns  { flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
  #books-tip-bar    { padding: 0.4rem 0.75rem 0.5rem; }

  /* Feed cards full width */
  .feed-card        { border-radius: 6px; }

  /* Public modal full screen - fixed inset so header always stays at top */
  .pub-overlay {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .pub-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .pub-modal.pub-modal--run {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }

  /* Disable hover image preview on mobile */
#feed-img-preview { display: none !important; }

  /* Inline modals full screen */
  .modal-inner {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    overflow-y: auto;
  }

  /* Landing settings panel - the desktop version is positioned relative to
     --landing-panel-w (480px), which at mobile widths still resolves to
     300px (the >768px breakpoint doesn't kick in below that) - left: calc(300px
     + 1rem) on a ~390px phone renders almost entirely off-screen. Center it
     instead, same width cap approach as the shortcuts modal. */
  #cover-tooltip-settings {
    left: 50% !important;
    transform: translateX(-50%);
    width: min(94vw, 300px) !important;
  }

  /* Stats modal */
  #stats-modal-overlay {
    padding-top: 0 !important;
    align-items: stretch !important;
  }
  #stats-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
}

#reward-float-layer {
  position: fixed;
  left: calc(75vw + var(--sidebar-w) / 4);
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  pointer-events: none;
  z-index: 3200;
}
body.sidebar-collapsed #reward-float-layer {
  left: 75vw;
}

.reward-float {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  max-width: min(280px, 72vw);
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.55);
  background: rgba(8, 47, 73, 0.94);
  color: #67e8f9;
  box-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 18px rgba(34, 211, 238, 0.18);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: translateY(0);
  opacity: 0;
  animation: reward-float-rise 4.6s ease-out forwards;
}

.reward-float--xp {
  border-color: rgba(103, 232, 249, 0.55);
  background: rgba(8, 47, 73, 0.94);
  color: #67e8f9;
  box-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 18px rgba(34, 211, 238, 0.18);
}

.reward-float--coins {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(69, 38, 3, 0.94);
  color: #fde68a;
  box-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 18px rgba(245, 158, 11, 0.22);
}

.reward-float--level {
  gap: 0.55rem;
  padding-inline: 0.9rem;
  border-color: rgba(245, 158, 11, 0.62);
  background: rgba(69, 26, 3, 0.94);
  color: #fde68a;
  box-shadow: 0 12px 28px rgba(0,0,0,0.42), 0 0 22px rgba(245, 158, 11, 0.24);
}

.reward-float-kicker {
  color: #fbbf24;
  letter-spacing: 0.08em;
}

.reward-float-title {
  color: #fff7cc;
}

.reward-float .coin-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.reward-float--coins .coin-icon {
  width: 0.95rem;
  height: 0.95rem;
}

@keyframes reward-float-rise {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  12% {
    opacity: 1;
    transform: translateY(0);
  }
  72% {
    opacity: 1;
    transform: translateY(-18px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

/* Admin-only "someone else earned XP/GC" floaters - same rise animation as the
   personal reward floats, violet/pink so they read as "the app", not yours. */
#app-reward-float-layer {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  pointer-events: none;
  z-index: 3200;
}

.app-reward-float {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  max-width: min(320px, 78vw);
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.55);
  background: rgba(46, 16, 74, 0.94);
  color: #d8b4fe;
  box-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 18px rgba(167, 139, 250, 0.2);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: translateY(0);
  opacity: 0;
  animation: reward-float-rise 4.6s ease-out forwards;
}

.app-reward-float--coins {
  border-color: rgba(244, 114, 182, 0.55);
  background: rgba(74, 15, 45, 0.94);
  color: #fbcfe8;
  box-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 18px rgba(244, 114, 182, 0.22);
}

.app-reward-float-sep {
  opacity: 0.55;
  font-weight: 500;
}

.app-reward-float-user {
  color: #f0abfc;
  font-weight: 800;
}

.app-reward-float .coin-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}