/* ═══════════════════════════════════════════════════════════════
   mobile.css — All @media and mobile-specific overrides.
                Load LAST so it wins over everything.
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile bars (hidden on desktop) ── */
#mobile-bottom-bar, #mobile-top-bar {

  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;

  display: none;
  visibility: hidden;
  pointer-events: none;
  border: 0;
      }

      #mobile-top-bar {

  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  border: 0;
      }

      #mob-live-btn {

        justify-self: start
      }

      #mob-settings-btn {

        justify-self: end
      }

      html.light-mode #mobile-top-bar {

  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  border: 0;
      }

      .live-arc1 {

        animation: live-arc1 1.4s ease-in-out infinite
      }

      .live-arc2 {

        animation: live-arc2 1.4s ease-in-out infinite .2s
      }

      .scroll-line-1 {

        animation: scroll-lines 1.2s ease-in-out infinite 0s
      }

      .scroll-line-2 {

        animation: scroll-lines 1.2s ease-in-out infinite .15s
      }

      .scroll-line-3 {

        animation: scroll-lines 1.2s ease-in-out infinite .3s
      }

      #mob-shop-btn {

        background:
          linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14)),
          rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .34);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .54);
        backdrop-filter: blur(16px) saturate(1.14);
        -webkit-backdrop-filter: blur(16px) saturate(1.14);
        border-radius: 999px;
        cursor: var(--fd-cursor-action);
        padding: 0;
        height: 50px;
        width: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: visible;
        flex-shrink: 0
      }

      #mob-shop-btn .bra-nav-btn {

        transform: scale(.82);
        transform-origin: center center;
        margin: 0;
        pointer-events: none
      }

      #mob-shop-btn.active .bra-cup-fill, #mob-shop-btn.on .bra-cup-fill {

        fill: url("#zebra-nav-pattern");
        stroke: none;
        stroke-dasharray: none
      }

      #mob-shop-btn.active .bra-band, #mob-shop-btn.on .bra-band {

        fill: url("#zebra-nav-pattern");
        stroke: none
      }

      #mob-shop-btn.active .bra-bow-loop, #mob-shop-btn.active .bra-bow-loop-fill, #mob-shop-btn.on .bra-bow-loop, #mob-shop-btn.on .bra-bow-loop-fill {

        fill: url("#zebra-nav-pattern");
        stroke: none
      }

      #mob-shop-btn.active .bra-left-content, #mob-shop-btn.active .bra-right-content, #mob-shop-btn.on .bra-left-content, #mob-shop-btn.on .bra-right-content {

        color: var(--bg)
      }

      #mob-shop-btn.active, #mob-shop-btn.on {

        animation: nav-glow 2s ease-in-out infinite
      }

      .mob-top-btn {

        background:
          linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14)),
          rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .34);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .54);
        backdrop-filter: blur(16px) saturate(1.14);
        -webkit-backdrop-filter: blur(16px) saturate(1.14);
        color: var(--ink2);
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: var(--fd-cursor-action);
        transition: color .15s, background .15s, transform .15s, box-shadow .15s
      }

      .mob-top-btn:hover {

        color: var(--ink);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .54), rgba(255, 255, 255, .2)),
          rgba(255, 255, 255, .22);
        box-shadow: 0 12px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .64);
        transform: translateY(-1px)
      }

      .mob-top-btn svg {

        width: 20px;
        height: 20px;
        flex-shrink: 0
      }

      .mob-top-btn.active {

        color: var(--ink)
      }

      #mobile-bottom-bar {
        display: none;
        visibility: hidden;
        pointer-events: none;
      }

      .mob-tab {

        background: 0 0;
        border: none;
        color: var(--ink);
        flex: 1;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: var(--fd-cursor-action);
        transition: color .15s;
        position: relative
      }

      .mob-tab-icon {

        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px
      }

      .mob-tab-inner {

        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: icon-float 2.8s ease-in-out infinite
      }

      .mob-tab svg {

        width: 20px;
        height: 20px;
        flex-shrink: 0;
        overflow: visible;
        stroke: var(--ink);
        transition: stroke .15s, color .15s
      }

      .mob-tab:hover {

        color: var(--ink);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, .3))
      }

      .mob-tab.active {

        color: var(--pk);
        animation: nav-glow 2s ease-in-out infinite
      }

      .mob-tab.active svg {

        stroke: var(--pk);
        color: var(--pk)
      }

      .mob-tab.active .mob-tab-inner .music-note-1, .mob-tab.active .mob-tab-inner .music-note-2, .mob-tab.active .mob-tab-inner .music-note-3 {

        color: var(--pk)
      }

      .mob-tab.active::after {

        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--pk)
      }

      .mob-tab .music-note-1 {

        font-size: 10px;
        opacity: 1
      }

      .mob-tab .music-note-2 {

        font-size: 9px;
        opacity: .85
      }

      .mob-tab .music-note-3 {

        font-size: 8px;
        opacity: .7
      }

      .mob-tab-home {

        flex: 1;
        width: auto;
        height: 46px;
        border-radius: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        transition: color .15s;
        display: flex;
        align-items: center;
        justify-content: center
      }

      .mob-tab-home .mob-tab-star {

        display: none
      }

      .mob-tab-home .mob-tab-inner {

        animation: none
      }

      .mob-tab-home svg {

        width: 25px;
        height: 25px
      }

      .mob-tab-home.active {

        color: var(--pk);
        box-shadow: none;
        background: transparent
      }

      .mob-tab-home.active .mob-tab-inner svg {

        stroke: var(--pk);
        color: var(--pk)
      }

      .mob-tab-home.active::after {

        display: block
      }

      .mob-tab-home:hover {

        color: var(--ink)
      }

      #mob-status-bar {

        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        z-index: 99998;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 24px 6px;
        pointer-events: none;
        background: 0 0
      }

      .mob-status-time {

        font-family: 'DM Mono', monospace;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: .5px
      }

      .mob-status-icons {

        display: flex;
        align-items: center;
        gap: 6px
      }

      .mob-status-icons svg {

        width: 16px;
        height: 16px;
        fill: var(--ink);
        stroke: none
      }

      .mob-scroll-mode .scrollables-layout {

        grid-template-columns: 1fr;
        padding: 0;
        max-width: 100%;
        gap: 0
      }

      .mob-scroll-mode .scrollables-left-panel {

        display: none
      }

      .mob-scroll-mode .scrollables-left-panel.mob-open {

        display: flex;
        position: fixed;
        inset: 54px 0 64px 0;
        z-index: 450;
        border-radius: 0;
        min-height: 0;
        overflow-y: auto
      }

      .mob-scroll-mode #scroll-grid-btn {

        display: flex
      }

      .mob-scroll-mode #scroll-grid-overlay.mob-open {

        display: block
      }

      .mob-scroll-mode .scrollables-right {

        min-height: calc(100vh - 118px)
      }

      .mob-community-mode #mob-community-inline {

        display: flex
      }

      .mob-community-mode #widgetbot-container {

        --community-header-gap: 8px;
        --community-header-padding: 7px 8px;
        --community-title-size: 18px;
        --community-bio-size: 8px;
        --community-bio-max: calc(100vw - 236px);
        --community-join-padding: 8px 9px;
        --community-join-font-size: 8px;
        --community-join-spacing: .5px;
        flex-direction: column;
        gap: 0;
        height: calc(100svh - 154px);
        min-height: 0;
        padding-bottom: 90px;
        box-sizing: border-box
      }

      .mob-community-mode #page-community>div {

        padding: 0
      }

      .mob-community-mode #page-community>div>div {

        padding: 0
      }

      .mob-talk-mode .app-column-right {

        display: flex;
        flex-direction: row;
        width: calc(100% - 16px);
        border: 1px solid rgba(255,255,255,.36);
        border-radius: 18px;
        margin: 0 8px 8px;
        padding: 7px 10px;
        height: auto;
        overflow: hidden;
        gap: 8px;
        align-items: center;
        order: -1;
        flex-shrink: 0;
        background:
          linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18)),
          rgba(255,255,255,.12);
        box-shadow:
          0 10px 22px rgba(0,0,0,.12),
          inset 0 1px 0 rgba(255,255,255,.58);
        backdrop-filter: blur(16px) saturate(1.14);
        -webkit-backdrop-filter: blur(16px) saturate(1.14);
        box-sizing: border-box
      }

      .mob-talk-mode .app-main {

        flex-direction: column
      }

      .mob-talk-mode .blog-sidebar-list, .mob-talk-mode .trending-sidebar-list {

        display: none
      }

      .mob-talk-mode .blog-sidebar-header {

        background: rgba(255,255,255,.55);
        background-color: rgba(255,255,255,.55);
        background-image: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.22));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
        backdrop-filter: blur(10px) saturate(1.08);
        -webkit-backdrop-filter: blur(10px) saturate(1.08);
        border-bottom: 0;
        font-size: 11px;
        padding: 5px 14px;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 999px;
        margin: 0;
        padding-bottom: 5px;
        white-space: nowrap;
        cursor: var(--fd-cursor-action);
        color: var(--ink2)
      }

      .mob-talk-mode .blog-sidebar-header:hover {

        border-color: var(--pk);
        color: var(--ink)
      }

      .mob-talk-mode .app-column-center {

        border-left: none;
        border-right: none
      }

      @media(max-width:768px) {

          body {

            padding-top: 54px;
            padding-bottom: 94px;
            -webkit-text-size-adjust: 100%
            }
          .page.active {

            width: 100%;
            min-height: calc(100vh - 118px)
            }

          .yt-list .yt-item, .yt-list.yt-thumb {

            border-radius: 4px;
            overflow: hidden
            }
          .yt-info {

            padding: 0 2px 2px;
            gap: 2px
            }
          .yt-title {

            font-size: 10px;
            line-height: 1.15;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
            }
          #feat-yt-list {

            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 3px;
            padding: 3px
            }
          .feat-yt-item {

            display: flex;
            flex-direction: column;
            gap: 2px;
            margin: 0;
            padding: 2px;
            min-width: 0
            }
          .feat-yt-meta {

            padding-top: 0
            }
          .feat-yt-title {

            font-size: 10px;
            line-height: 1.15
            }
          .feat-block {

            border-bottom: none
            }
          .insta-grid {

            border-top: 1px solid var(--border);
            grid-template-columns: repeat(3, 1fr);
            padding-bottom: 112px;
            margin-bottom: 0
            }
          #page-profile .insta-grid {

            padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
            }
          #page-community {

            overflow: hidden;
            height: calc(100svh - 54px);
            min-height: 0;
            padding-bottom: 96px;
            box-sizing: border-box
            }
          #page-community>div, #page-community>div>div {

            height: 100%;
            padding: 0;
            max-width: 100%
            }
          #widgetbot-container>div:last-child {

            flex: 1;
            min-height: 0;
            overflow: hidden
            }
          #widgetbot-container > * {

            display: block;
            width: 100%;
            height: 100%;
            min-height: 0
            }
          .app-column-right {

            justify-content: center
            }
          .app-search-input {

            max-width: 70px;
            font-size: 9px;
            padding: 0 6px;
            height: 15px
            }
          #topbar-refresh-btn {

            width: 18px;
            height: 18px
            }
          #topbar-refresh-btn svg {

            width: 12px;
            height: 12px
            }
          #mob-community-inline {

            display: flex
            }
          #widgetbot-container {

            --community-header-gap: 8px;
            --community-header-padding: 7px 8px;
            --community-title-size: 18px;
            --community-bio-size: 8px;
            --community-bio-max: calc(100vw - 236px);
            --community-join-padding: 8px 9px;
            --community-join-font-size: 8px;
            --community-join-spacing: .5px;
            flex-direction: column;
            gap: 0;
            height: 100%;
            min-height: 0
            }
          .mp {

            grid-template-columns: 1fr
            }
          .mp-sidebar {

            position: static;
            height: auto
            }

}

@media(max-width:768px) {

                    #page-live {

                      padding: 0;
                      min-height: calc(100vh - 118px);
                                      }
                    #page-live::after {

                      display: none;
                        }
                    #page-live .live-wrap {

                      border-radius: 0;
                      box-shadow: none;
                      border: none;
                      min-height: calc(100vh - 118px);
                        }
                    #page-live .live-content {

                      display: flex;
                      flex-direction: column;
                      align-items: stretch;
                      gap: 0;
                        }
                    #page-live .live-header {

      background: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      backdrop-filter: none;
  -webkit-backdrop-filter: none;
      border-bottom: 0;
                      padding: 10px 12px;
                      gap: 10px;
                      align-items: flex-start;
                      flex-wrap: wrap;
                        }
                    #page-live .live-header-left {

                      min-width: 0;
                      gap: 10px;
                      flex: 1 1 auto;
                        }
                    #page-live .live-header-right {

                      width: 100%;
                      justify-content: space-between;
                      gap: 8px;
                        }
                    #page-live .live-title {

                      font-size: 16px;
                      letter-spacing: 1.5px;
                        }
                    #page-live .live-twitch-link, #page-live .live-viewer-count {

                      font-size: 8px;
                        }
                    #page-live .live-left {

                      width: 100%;
                      overflow: visible;
                        }
                    #page-live .live-player {

                      width: 100%;
                      aspect-ratio: 16/9;
                      border-radius: 0;
                        }
                    #page-live .live-desc {

                      max-height: none;
                      border-top: none;
                      border-bottom: 1px solid var(--border);
                        }
                    #page-live .live-desc-inner {

                      padding: 12px;
                        }
                    #page-live .live-desc-content {

                      font-size: 10px;
                      line-height: 1.55;
                        }
                    #page-live .live-chat-panel {

                      width: 100%;
                      flex: 1 1 auto;
                      border-left: none;
                      border-top: 1px solid var(--border);
                      min-height: 56vh;
                      background: var(--s1);
                        }
                    #page-live .live-chat-header {

      background: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      backdrop-filter: none;
  -webkit-backdrop-filter: none;
      border-bottom: 0;
                      padding: 10px 12px;
                      font-size: 8px;
                      letter-spacing: 2px;
                      position: sticky;
                      top: 54px;
                      z-index: 2;
                        }
  }

/* ── Content-visibility lazy paint ── */
  @media(max-width:768px) {

                    .page:not(.active) {

                      content-visibility: hidden;
                      contain: layout style paint;
                        }
                    img[loading], iframe[loading] {

                      content-visibility: auto;
                        }

  }

/* ── Touch / tap performance ── */
@media (max-width: 768px) {
  * {
  -webkit-tap-highlight-color:transparent  }
}
  button, a, [role="button"], .nb, .bra-nav-btn, .panties-widget, .fans-star-wrap, .insta-cell, .scroll-thumb, .tiktok-cell, .yt-item, .mob-tab, .mob-tab-home, .mob-top-btn, .main-nav-btn, .np-play-btn, .feat-pin-btn, .da-btn, .fpa, .sheet-opt, .setting-btn, .modal-close, .det-close, .ep-av-wrap, .accent-sw, .lvl-wrapper, .talk-nav-pill, .sl-btn {
  touch-action:manipulation;cursor: var(--fd-cursor-action)  }
  .app-column-center, .det-comments, .yt-list, .feat-yt-list, .ep-body, .live-desc, .live-chat-body, .settings-wrap, .scrollables-left-panel, .timeline-list {
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain  }
  html, body {
  overscroll-behavior-x:none  }
  @media(max-width:768px) {

      input, textarea, select {
    font-size:16px    }

  }

/* ─── Kill backdrop-filter on mobile (single biggest GPU win) ─── */

                @media (max-width: 768px) {

                    .modal-bg, .detail-bg, .sheet-bg, .live-wrap, .talk-intro, body.dark-mode .app-column-right, body.dark-mode .timeline-header, body.dark-mode .quote-box, body.dark-mode .tweet, body.dark-mode .app-shell {

                      backdrop-filter: none;
  -webkit-backdrop-filter: none;
                        }

                /* Ensure music sidebar text is always visible */
                    .mp-sidebar-name {

                      color: #000;
                        }
                    html.light-mode .mp-sidebar-name {

                      color: #000;
                        }

                /* ─── Stop all infinite animations on mobile (major CPU/battery win) ─── */
                    .nb-icon, .main-nav-btn .nb-icon, .nav-live-mini .nb-icon, .mob-tab .mob-tab-inner, .mob-tab-inner {

                      animation: none;
                        }

                /* Keep only the most important ones (live dot pulse, np bars) */
                    .icon-float, .star-shadow-pulse, .glass-shine, .nav-glow, .ribbon-fall, .ribbon-sway, .talk-exclaim-pop, .shout-wave, .eye-blink, .finger-swipe, .scroll-lines, .music-wave, .zebra-scroll, .shimmer {

                      animation-play-state: paused;
                        }

                /* Specifically target animated elements by their class/id */
                    .nb-icon {

                      animation: none;
                        }
                    .nb-star polygon {

                      animation: none;
                      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
                        }
                    .bra-bow-ribbon.ribbon-1, .bra-bow-ribbon.ribbon-2 {

                      animation: none;
                        }
                    .music-note-1, .music-note-2, .music-note-3 {

                      animation: none;
                        }
                    .shop-dollar-1, .shop-dollar-2, .shop-dollar-3 {

                      animation: none;
                        }
                    .talk-exclaim-pop {

                      animation: none;
                        }
                    .shout-1, .shout-2, .shout-3 {

                      animation: none;
                        }
                    .scroll-line-1, .scroll-line-2, .scroll-line-3, .scroll-line-4 {

                      animation: none;
                        }
                    .scroll-finger {

                      animation: none;
                        }

                /* ── Re-enable animations for mobile bottom nav tab icons ── */
                    #mobile-bottom-bar .mob-tab-inner {

                      animation: icon-float 2.8s ease-in-out infinite;
                        }
                    #mob-tab-music .music-note-1 {

                      animation: note-fly1 2.2s ease-out infinite;
                        }
                    #mob-tab-music .music-note-2 {

                      animation: note-fly2 2.2s ease-out infinite .7s;
                        }
                    #mob-tab-music .music-note-3 {

                      animation: note-fly3 2.2s ease-out infinite 1.4s;
                        }
                    #mob-tab-talk .talk-exclaim-pop {

                      animation: exclaim-pop 2.5s ease-in-out infinite;
                      transform-origin: 12px 13px;
                        }
                    #mob-tab-scroll .scroll-line-1 {

                      animation: scroll-lines 1.2s ease-in-out infinite 0s;
                        }
                    #mob-tab-scroll .scroll-line-2 {

                      animation: scroll-lines 1.2s ease-in-out infinite .15s;
                        }
                    #mob-tab-scroll .scroll-line-3 {

                      animation: scroll-lines 1.2s ease-in-out infinite .3s;
                        }
                    #mob-tab-scroll .scroll-finger {

                      animation: finger-swipe 1.8s ease-in-out infinite;
                        }

                /* Shop bra ribbons in top bar */
                    #mob-shop-btn .ribbon-1 {

                      animation: ribbon-fall 2.6s ease-in-out infinite, ribbon-sway 3.4s ease-in-out infinite;
                        }
                    #mob-shop-btn .ribbon-2 {

                      animation: ribbon-fall 3s ease-in-out infinite .3s, ribbon-sway 3.8s ease-in-out infinite .25s;
                        }
                    #mob-shop-btn .shop-dollar-1 {

                      animation: note-fly1 2.5s ease-out infinite;
                        }
                    #mob-shop-btn .shop-dollar-2 {

                      animation: note-fly2 2.5s ease-out infinite .8s;
                        }
                    #mob-shop-btn .shop-dollar-3 {

                      animation: note-fly3 2.5s ease-out infinite 1.6s;
                        }
                    .np-progress-fill {

                      animation: none;
                        }
                    .lvl-bar-fill {

                      animation: none;
                        }
                    .lvl-bar-fill::after {

                      animation: none;
                        }
                    .age18-ring {

                      animation: none;
                        }
                    .age18-ring2 {

                      animation: none;
                        }
                    .age18-inner {

                      animation: none;
                        }
                    .fans-star-num {

                      animation: none;
                        }
                    .fans-star-label {

                      animation: none;
                        }
                    .nav::after {

      display: none;
      content: none;
      background: transparent;
      background-image: none;
      box-shadow: none;
      opacity: 0;
                        }
                    .np-widget::after {

                      animation: none;
                      display: none;
                        }
                    .np-mini-bar {

                      animation: none;
                        }
                    #page-live::after {

                      display: none;
                        }

                /* Site intro still plays since it's a one-time animation */

                /* ─── Kill will-change on mobile (saves GPU VRAM layers) ─── */
                    .fans-star-g, .fans-shadow-el, .nb-icon, .main-nav-btn, .lvl-bar-fill, .np-progress-fill {

                      will-change: auto;
                        }

                /* ─── Fix background-attachment:fixed (broken/slow in mobile Safari) ─── */
                    #_doll_bg_fixed {

                      background-attachment: scroll;
                      position: absolute;
                        }

                /* ─── content-visibility for hidden pages (don't render what's off screen) ─── */
                    .page:not(.active) {

                      content-visibility: hidden;
                      contain: size layout paint style;
                      contain-intrinsic-size: 1000px;
                        }

                /* ─── Simplify nav star buttons on mobile (just use flat look) ─── */
                    .main-nav-btn .nb-star-wrap {

                      filter: none;
                        }
                    .main-nav-btn:hover {

                      transform: none;
                      filter: none;
                      box-shadow: none;
                        }

                /* ─── Scrollables: remove blanket TikTok iframe until visible ─── */
                    .tiktok-embed[data-lazy-pending] iframe, .tiktok-embed[data-lazy-pending] section {

                      display: none;
                        }

                /* Shrink panties widget slightly so it doesn't overlap other widgets */
                    .panties-widget {

                      transform: scale(0.88);
                      transform-origin: top center;
                      margin-bottom: -6px;
                        }

  }

              /* ─── Respect prefers-reduced-motion system setting ─── */

                @media (prefers-reduced-motion: reduce) {

                    *, *::before, *::after {

                      animation-duration: 0.01ms;
                      animation-iteration-count: 1;
                      transition-duration: 0.01ms;
                        }

  }

/* ── Mobile equalizer bars ── */
  @media (max-width: 768px) {

                    .np-widget.playing .np-mini-bar {

                      animation: npb var(--s) ease-in-out infinite alternate var(--d);
                      animation-play-state: running;
                        }
                    .np-widget.playing .np-progress-fill {

                      animation: zebra-scroll 3s linear infinite;
                      animation-play-state: running;
                        }
                    .np-widget.playing .np-notes .music-note-1 {

                      animation: note-fly1 1.8s ease-out infinite;
                        }
                    .np-widget.playing .np-notes .music-note-2 {

                      animation: note-fly2 1.9s ease-out infinite 0.18s;
                        }
                    .np-widget.playing .np-notes .music-note-3 {

                      animation: note-fly3 2s ease-out infinite 0.36s;
                        }

  }

/* ── Mobile performance pass ── */
@media (max-width: 768px) {

    .insta-cell, .yt-item, .mp-era-card-wrapper, .tweet, .blog-card, .settings-section {

      content-visibility: auto;
      contain-intrinsic-size: 220px;
      }

    .insta-grid {

      contain: layout paint;
      }

    #page-profile.active .insta-grid {

      contain: none;
      overflow: visible;
      }

    .cell-ov, .yt-thumb::after {

      transition: opacity 0.12s ease;
      }

}

/* ── Mobile settings dropdown/sheet ── */
@media (max-width: 768px) {

    #nav-settings-dropdown.mobile-settings-open {

      position: fixed;
      left: 12px;
      right: 12px;
      top: 62px;
      width: auto;
      min-width: 0;
      max-width: none;
      z-index: 10050;
      padding: 10px;
      border-radius: 14px;
      background: rgba(20, 18, 16, .98);
      border: 1px solid var(--border2);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
      }

    html.light-mode #nav-settings-dropdown.mobile-settings-open {

      background: rgba(255, 255, 255, .98);
      }

    #nav-settings-dropdown.mobile-settings-open button:not(.nav-accent-swatch), #nav-settings-dropdown.mobile-settings-open label:not(.toggle) {

      min-height: 42px;
      }

    #nav-settings-dropdown.mobile-settings-open .toggle {

      width: 36px;
      height: 20px;
      min-height: 20px;
      flex: 0 0 36px;
      }

    #nav-settings-dropdown.mobile-settings-open .toggle-track {

      inset: 0;
      border-radius: 10px;
      }

    #nav-settings-dropdown.mobile-settings-open .nav-accent-swatch, #nav-settings-dropdown.mobile-settings-open #nav-accent-custom, #nav-settings-dropdown.mobile-settings-open .nav-cursor-picker input {

      width: 28px;
      height: 28px;
      min-height: 28px;
      flex: 0 0 28px;
      border-radius: 8px;
      }

}

/* ── Live mobile: player + chat must fit one app viewport ── */
@media (max-width: 768px) {

    #page-live {

      height: calc(100svh - 54px);
      min-height: 0;
      overflow: hidden;
      padding: 0 0 96px;
      box-sizing: border-box;
      }

    #page-live .live-wrap {

      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: none;
      border-radius: 0;
      box-shadow: none;
      }

    #page-live .live-header {

    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
  -webkit-backdrop-filter: none;
    border-bottom: 0;
      flex: 0 0 auto;
      padding: 9px 12px;
      gap: 8px;
      }

    #page-live .live-content {

      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      gap: 0;
      }

    #page-live .live-left {

      flex: 0 0 auto;
      width: 100%;
      min-height: 0;
      overflow: hidden;
      }

    #page-live .live-player {

      width: 100%;
      height: min(34svh, 56.25vw);
      min-height: 180px;
      max-height: 270px;
      aspect-ratio: auto;
      border-radius: 0;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.98)),
        #000;
      }

    #page-live .live-player iframe, #page-live .live-player > div {

      width: 100%;
      height: 100%;
      }

    #page-live .live-offline {

      min-height: 0;
      height: 100%;
      padding: 18px 16px;
      }

    #page-live .live-desc {

      flex: 0 0 auto;
      max-height: 72px;
      overflow-y: auto;
      border-top: none;
      border-bottom: 1px solid var(--border);
      }

    #page-live .live-desc:has(.live-desc-empty) {

      display: none;
      }

    #page-live .live-chat-panel {

      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 220px;
      height: auto;
      width: 100%;
      border-left: none;
      border-top: 1px solid var(--border);
      background: transparent;
      overflow: hidden;
      }

    #page-live .live-chat-header {

      display: none;
      background: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 0;
      position: static;
      flex: 0 0 auto;
      padding: 9px 12px;
      min-height: 38px;
      z-index: 1;
      font-size: 8px;
      letter-spacing: 2px;
      }

    #page-live .live-chat-body {

      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
        rgba(12, 11, 10, .94);
      }

    #page-live #twitch-chat-container-live {

      height: 100%;
      min-height: 0;
      overflow: hidden;
      }

    #page-live #twitch-chat-iframe {

      width: 100%;
      height: 100%;
      min-height: 0;
      display: block;
      border: none;
      }

}

/* ── Now playing edit modal: mobile sizing ── */
@media (max-width: 768px) {

    #np-edit-modal {

      align-items: flex-start;
      padding-top: 66px;
      padding-bottom: 76px;
      overflow-y: auto;
      }

    #np-edit-modal > div {

      width: calc(100vw - 24px);
      max-height: calc(100svh - 142px);
      border-radius: 8px;
      overflow: hidden;
      }

    #np-edit-modal .npe-links-grid {

      grid-template-columns: 1fr;
      gap: 10px;
      }

    #np-edit-modal .npe-audio-row {

      align-items: stretch;
      gap: 7px;
      }

    #np-edit-modal .fd-file-picker {

      min-width: 0;
      }

    #np-edit-modal .fd-file-btn {

      padding-left: 9px;
      padding-right: 9px;
      }

    #np-edit-modal .fd-file-name {

      font-size: 10px;
      }

    #page-live #twitch-chat-container-live, #page-live #twitch-chat-iframe {

      height: 100%;
      min-height: 0;
      }

}

/* ── Profile mobile: force featured video stack; no desktop right-side leak ── */
@media (max-width: 768px) {

    #page-profile .feat-container, #page-profile.active .feat-container, .mob-profile-mode #page-profile .feat-container {

      display: flex;
      flex-direction: column;
      grid-template-columns: none;
      grid-auto-flow: row;
      align-items: stretch;
      justify-content: flex-start;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
      gap: 0;
      }

    #page-profile .feat-container > div:first-child, #page-profile.active .feat-container > div:first-child, .mob-profile-mode #page-profile .feat-container > div:first-child {

      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      }

    #page-profile .feat-embed, #page-profile.active .feat-embed, .mob-profile-mode #page-profile .feat-embed {

      width: 100%;
      max-width: 100%;
      min-width: 0;
      aspect-ratio: 16 / 9;
      border-radius: 0;
      }

    #page-profile #yt-list-side, #page-profile #yt-list-overflow, #page-profile.active #yt-list-side, #page-profile.active #yt-list-overflow, .mob-profile-mode #page-profile #yt-list-side, .mob-profile-mode #page-profile #yt-list-overflow {

      position: static;
      float: none;
      clear: both;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0;
      padding: 3px;
      gap: 3px;
      max-height: none;
      overflow: visible;
      background: transparent;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      }

    #page-profile #yt-list-overflow[hidden], #page-profile.active #yt-list-overflow[hidden] {

      display: none;
      }

    #page-profile .feat-block, #page-profile.active .feat-block {

      width: 100%;
      max-width: 100%;
      overflow: hidden;
      }

    #page-profile .col-center, #page-profile.active .col-center {

      width: 100%;
      min-width: 0;
      border: none;
      }

}

/* ── Mobile profile identity area: match white UI, no darker slab ── */
@media (max-width: 768px) {

    #page-profile .sidebar-left, #page-profile .sl-avatar-block, #page-profile .sl-avatar-wrap, .mob-profile-mode #page-profile .sidebar-left, .mob-profile-mode #page-profile .sl-avatar-block, .mob-profile-mode #page-profile .sl-avatar-wrap {

      background-color: transparent;
      background-image: none;
      box-shadow: none;
      backdrop-filter: none;
  -webkit-backdrop-filter: none;
      }

    html.light-mode #page-profile .sidebar-left, html.light-mode #page-profile .sl-avatar-block, html.light-mode #page-profile .sl-avatar-wrap {

      background-color: transparent;
      background-image: none;
      }

    #page-profile .sl-avatar-block::before, #page-profile .sl-avatar-block::after, #page-profile .sidebar-left::before, #page-profile .sidebar-left::after {

      display: none;
      content: none;
      background: none;
      opacity: 0;
      }

    #page-profile .sl-avatar-block {

      border-bottom: 1px solid var(--border);
      }

    #page-profile .sl-info, #page-profile .sl-song-block, #page-profile .np-widget-inner {

      background-color: transparent;
      background-image: none;
      }

}

/* ── Mobile Now Playing notes: prevent play animation from expanding card ── */
@media (max-width: 768px) {

    #page-profile .np-widget, #page-profile .np-widget-inner, #page-profile .np-top-row {

      position: relative;
      }

    #page-profile .np-widget {

      overflow: hidden;
      }

    #page-profile .np-widget .np-notes {

      position: absolute;
      top: -7px;
      right: -2px;
      width: 38px;
      height: 34px;
      min-width: 0;
      min-height: 0;
      max-width: 38px;
      max-height: 34px;
      margin: 0;
      padding: 0;
      flex: 0 0 0;
      display: block;
      pointer-events: none;
      z-index: 8;
      overflow: visible;
      contain: paint;
      }

    #page-profile .np-widget .np-notes span {

      position: absolute;
      display: block;
      margin: 0;
      padding: 0;
      line-height: 1;
      }

    #page-profile .np-widget .np-notes .music-note-1 {

      left: 4px;
      top: 10px;
      }

    #page-profile .np-widget .np-notes .music-note-2 {

      left: 15px;
      top: 4px;
      }

    #page-profile .np-widget .np-notes .music-note-3 {

      left: 25px;
      top: 12px;
      }

}

/* ── Music mobile: profile bubble centered, streams split left/right, discography bubble below ── */
@media (max-width: 768px) {

    #page-music .mp {

      display: flex;
      flex-direction: column;
      grid-template-columns: none;
      min-height: auto;
      padding: 0;
      }

    #page-music .mp-sidebar {

      position: static;
      height: auto;
      min-height: 0;
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(148px, 170px) minmax(0, 1fr);
      grid-template-areas: "left identity right";
      grid-template-rows: repeat(2, 48px);
      align-items: center;
      gap: 8px;
      padding: 24px 10px 18px;
      border-right: none;
      border-bottom: none;
      background: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      overflow: visible;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      }

    #page-music .mp-sidebar-identity {

      grid-area: identity;
      grid-row: 1 / 3;
      width: 100%;
      min-width: 0;
      padding: 14px 10px 13px;
      margin: 0;
      border: 1px solid rgba(255,255,255,.32);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.30) 46%, rgba(255,255,255,.14)),
        rgba(255,255,255,.14);
      box-shadow:
        0 12px 28px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -12px 20px rgba(0,0,0,.035);
      backdrop-filter: none;
  -webkit-backdrop-filter: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: visible;
      z-index: 2;
      }

    #page-music .mp-av-ring {

      width: 74px;
      height: 74px;
      margin: 0 0 9px;
      border-radius: 50%;
      border: 2px solid rgba(0,0,0,.08);
      box-shadow:
        0 8px 18px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.28);
      }

    #page-music .mp-sidebar-name {

      font-family: var(--display-name-font, Sprayerz, sans-serif);
      font-size: 25px;
      line-height: .92;
      letter-spacing: 2px;
      margin: 0;
      white-space: nowrap;
      }

    #page-music .mp-sidebar-sub, #page-music .mp-sidebar-bio {

      display: none;
      }

    #page-music .mp-sidebar-streams {

      display: contents;
      }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-link {

      width: 100%;
      min-width: 0;
      height: 34px;
      padding: 0 7px;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.22)),
        rgba(255,255,255,.12);
      box-shadow:
        0 8px 18px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.70);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      overflow: hidden;
      }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-link::before,
    #page-music .mp-sidebar-streams .mp-sidebar-stream-arrow {

      display: none;
      }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-link:nth-child(1) {
      grid-column: 1;
      grid-row: 1;
    }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-link:nth-child(2) {
      grid-column: 3;
      grid-row: 1;
    }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-link:nth-child(3) {
      grid-column: 1;
      grid-row: 2;
    }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-link:nth-child(4) {
      grid-column: 3;
      grid-row: 2;
    }

    #page-music .mp-sidebar-streams .mp-stream-icon-wrap {

      width: 15px;
      height: 15px;
      flex: 0 0 15px;
      }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-name {

      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 7px;
      letter-spacing: .8px;
      text-align: center;
      white-space: nowrap;
      }

    #page-music .mp-main {

      width: 100%;
      min-width: 0;
      }

    #page-music .mp-eras-section {

      position: relative;
      width: 100%;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-sizing: border-box;
      }

    #page-music .mp-eras-header {

      background:
        linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.22) 48%, rgba(255,255,255,.11)),
      rgba(255,255,255,.1);
      background-color: rgba(255,255,255,.1);
      background-image: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.22) 48%, rgba(255,255,255,.11));
      box-shadow:
        0 16px 34px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 0 -14px 24px rgba(0,0,0,.045);
      backdrop-filter: blur(16px) saturate(1.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.16);
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      transform: none;
      width: min(330px, calc(100vw - 24px));
      min-width: 0;
      max-width: calc(100vw - 24px);
      min-height: 54px;
      margin: 0 auto 12px;
      padding: 16px 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border: 1px solid rgba(255,255,255,.38);
      border-radius: 999px;
      z-index: 3;
      }

    #page-music .mp-eras-header::before {

      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 5px;
      height: 32%;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.15), transparent);
      opacity: .82;
      pointer-events: none;
      }

    #page-music .mp-eras-headline {

      position: relative;
      z-index: 1;
      font-size: 34px;
      line-height: .9;
      }

    #page-music .mp-eras-header .mp-admin-add {

      right: 10px;
      z-index: 2;
      }

    #page-music .mp-eras-grid {

      width: min(330px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      margin: 0 auto;
      padding: 0 12px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      justify-items: center;
      gap: 12px;
      box-sizing: border-box;
      }

    #page-music .mp-era-card-wrapper, #page-music .mp-era-card-outer {

      flex: 0 0 min(180px, calc(100vw - 40px));
      width: min(180px, calc(100vw - 40px));
      max-width: 180px;
      margin-left: auto;
      margin-right: auto;
      }

}

@media (max-width: 390px) {

    #page-music .mp-sidebar {

      grid-template-columns: minmax(0, 1fr) minmax(136px, 148px) minmax(0, 1fr);
      grid-template-rows: repeat(2, 44px);
      gap: 6px;
      padding-top: 22px;
      padding-bottom: 18px;
      padding-left: 8px;
      padding-right: 8px;
      }

    #page-music .mp-av-ring {

      width: 66px;
      height: 66px;
      }

    #page-music .mp-sidebar-name {

      font-size: 22px;
      }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-link {

      height: 32px;
      padding: 0 5px;
      }

    #page-music .mp-sidebar-streams .mp-stream-icon-wrap {

      width: 13px;
      height: 13px;
      flex-basis: 13px;
      }

    #page-music .mp-sidebar-streams .mp-sidebar-stream-name {

      font-size: 6px;
      letter-spacing: .55px;
      }

    #page-music .mp-eras-headline {

      font-size: 30px;
      }

}

/* ── Mobile Community WidgetBot warm preload support ── */
@media (max-width: 768px) {

    #page-community #widgetbot-container [data-warmed="1"] {

      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      }

}

/* ── Music mobile: restore normal site background ── */
@media (max-width: 768px) {

    #page-music, #page-music .mp {

      background: transparent;
      }

}

/* ── Mobile Tea Party nav: avatar profile button + icon home ── */
@media (max-width: 768px) {

    #page-talk .talk-home-icon svg {

      width: 18px;
      height: 18px;
      }

    #page-talk #talk-nav-profile {

      display: none;
      }

    body:not(.talk-admin) #page-talk .app-topbar-user .dropdown-arrow-mobile, body:not(.talk-admin) #page-talk .app-topbar-user .user-dropdown {

      display: none;
      }

}

/* ── Mobile Tea Party blog button: left side of header ── */
@media (max-width: 768px) {

    #page-talk .tea-blog-btn {

      width: 32px;
      height: 32px;
      flex-basis: 32px;
      margin-right: 6px;
      }

    #page-talk .tea-blog-btn svg {

      width: 16px;
      height: 16px;
      }

}

/* Mobile nav keeps Blog in the topbar, not the dock */
#nav-blog-mobile {

  display: none;
}

/* ── Mobile Profile: single combined hero section ── */
@media (max-width: 768px) {

    body.mob-profile-mode {

      padding-top: 44px;
      }

    .mob-profile-mode #page-profile .three-col {

      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 0;
      }

    .mob-profile-mode #page-profile .sidebar-left {

      display: grid;
      width: 100%;
      min-width: 0;
      grid-template-columns: minmax(106px, 1fr) minmax(150px, 1.1fr) minmax(106px, 1fr);
      grid-template-areas:
        "avatar identity fans"
        "level panties now"
        "bio bio bio"
        "discord discord discord";
      align-items: center;
      justify-items: center;
      gap: 8px 4px;
      padding: 6px 6px 5px;
      border-bottom: 1px solid var(--border);
      background: transparent;
      }

    .mob-profile-mode #page-profile .col-center {

      width: 100%;
      min-width: 0;
      border: 0;
      }

    .mob-profile-mode #page-profile .sl-avatar-block, .mob-profile-mode #page-profile .sl-avatar-wrap, .mob-profile-mode #page-profile .sl-widgets-row {

      display: contents;
      }

    .mob-profile-mode #page-profile .sl-avatar {

      grid-area: avatar;
      width: 96px;
      height: 96px;
      margin: 0;
      align-self: center;
      justify-self: center;
      flex: none;
      animation: none;
      box-shadow: none;
      filter: none;
      z-index: 3;
      }

    .mob-profile-mode #page-profile .sl-avatar::after {

      display: none;
      content: none;
      }

    .mob-profile-mode #page-profile .fans-star-wrap {

      grid-area: fans;
      width: 124px;
      height: 112px;
      margin: 0;
      align-self: center;
      justify-self: center;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: none;
      filter: none;
      }

    .mob-profile-mode #page-profile #fans-star-svg {

      width: 124px;
      height: 110px;
      margin: 0;
      transform: none;
      filter: none;
      }

    .mob-profile-mode #page-profile .fans-shadow-el {

      display: block;
      opacity: .16;
      }

    .mob-profile-mode #page-profile .panties-widget {

      grid-area: panties;
      width: 172px;
      max-width: 172px;
      margin: 0;
      padding: 0;
      align-self: center;
      justify-self: center;
      display: block;
      filter: none;
      transform: none;
      z-index: 2;
      }

    .mob-profile-mode #page-profile .sl-social-actions {

      grid-area: panties;
      width: 150px;
      max-width: 150px;
      margin: 0;
      padding: 0;
      align-self: end;
      justify-self: center;
      display: grid;
      grid-template-columns: repeat(2, 34px);
      justify-content: space-between;
      gap: 0;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(-8px);
      z-index: 4;
      background: transparent;
      box-shadow: none;
      border: 0;
      }

    .mob-profile-mode #page-profile .sl-social-action {

      min-height: 30px;
      height: 30px;
      width: 34px;
      padding: 0 4px;
      gap: 2px;
      border-radius: 999px;
      font-size: 4.8px;
      letter-spacing: .05px;
      border-color: rgba(255,255,255,.58);
      flex-direction: column;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 4px 10px rgba(0,0,0,.12);
      }

    .mob-profile-mode #page-profile .sl-social-symbol {

      width: 11px;
      height: 11px;
      flex-basis: 11px;
      font-size: 7px;
      }

    .mob-profile-mode #page-profile .sl-social-symbol svg {

      width: 7px;
      height: 7px;
      }

    .mob-profile-mode #page-profile .panties-svg {

      width: 172px;
      height: auto;
      display: block;
      }

    .mob-profile-mode #page-profile .sl-profile-right {

      grid-area: identity;
      --sl-origin-font-size: 7.8px;
      --sl-origin-letter-spacing: 0;
      --sl-origin-margin-top: 1px;
      min-width: 0;
      width: 100%;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 5px;
      padding: 0;
      }

    .mob-profile-mode #page-profile .sl-name, .mob-profile-mode #page-profile .sl-realname, .mob-profile-mode #page-profile #sl-origin {

      text-align: center;
      }

    .mob-profile-mode #page-profile .sl-name {

      font-size: 23px;
      line-height: .9;
      letter-spacing: .1px;
      white-space: nowrap;
      }

    .mob-profile-mode #page-profile .sl-realname {

      font-size: 10.5px;
      letter-spacing: .55px;
      margin-top: 2px;
      white-space: nowrap;
      }

    .mob-profile-mode #page-profile #sl-origin {

      font-size: 7.8px;
      letter-spacing: 0;
      margin-top: var(--sl-origin-margin-top, 1px);
      line-height: 1.05;
      white-space: nowrap;
      }

    .mob-profile-mode #page-profile .panties-label-top {

      font-size: 9.4px;
      stroke-width: .42px;
      transform-box: fill-box;
      transform-origin: center;
      transform: scaleX(.84);
      }

    .mob-profile-mode #page-profile .sl-info {

      grid-area: level;
      --sl-lvl-box-width: 100%;
      --sl-lvl-visual-width: 94px;
      --sl-lvl-font-size: 20px;
      --sl-lvl-letter-spacing: .2px;
      width: 100%;
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      align-self: center;
      justify-self: stretch;
      }

    .mob-profile-mode #page-profile .sl-info .np-widget {

      width: 100%;
      height: 88px;
      min-height: 0;
      margin: 0;
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18)),
        rgba(210,210,210,.20);
      border-color: rgba(255,255,255,.36);
      box-shadow: 0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.48);
      }

    .mob-profile-mode #page-profile .sl-info .np-widget-inner {

      height: 88px;
      min-height: 0;
      padding: 7px;
      justify-content: center;
      gap: 1px;
      }

    .mob-profile-mode #page-profile #sl-lvl {

      font-size: 20px;
      letter-spacing: .2px;
      -webkit-text-stroke-width: .45px;
      }

    .mob-profile-mode #page-profile #sl-lvl, .mob-profile-mode #page-profile #sl-lvl.closest {

      max-width: 100%;
      }

    .mob-profile-mode #page-profile .sl-info .np-widget-inner > div:first-child > div {

      width: 100%;
      height: 23px;
      }

    .mob-profile-mode #page-profile .sl-info .lvl-endnums {

      display: none;
      }

    .mob-profile-mode #page-profile .sl-info .lvl-visual {

      width: 94px;
      }

    .mob-profile-mode #page-profile .sl-info .lvl-tooltip {

      display: block;
      top: -30px;
      z-index: 30;
      font-size: 7px;
      letter-spacing: .4px;
      padding: 4px 6px;
      min-width: 118px;
      text-align: center;
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.36)),
        rgba(210,210,210,.34);
      border-color: rgba(255,255,255,.48);
      box-shadow: 0 5px 14px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.68);
      color: var(--ink);
      }

    .mob-profile-mode #page-profile .sl-song-block {

      grid-area: now;
      width: 100%;
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      align-self: center;
      justify-self: stretch;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-widget {

      width: 100%;
      height: 88px;
      min-height: 0;
      margin: 0;
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18)),
        rgba(210,210,210,.20);
      border-color: rgba(255,255,255,.36);
      box-shadow: 0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.48);
      overflow: visible;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-widget-inner {

      height: 88px;
      min-height: 0;
      padding: 7px 8px 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 2px;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-top-row {

      gap: 4px;
      align-items: center;
      margin-bottom: 1px;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-label {

      font-size: 5.8px;
      letter-spacing: .75px;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-mini-bars {

      display: flex;
      gap: 2px;
      transform: scale(.72);
      transform-origin: left center;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-title {

      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .05px;
      line-height: 1;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: none;
      white-space: nowrap;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-artist-name {

      font-family: 'DM Mono', monospace;
      font-size: 7px;
      font-weight: 700;
      letter-spacing: .75px;
      line-height: 1.05;
      text-transform: uppercase;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-progress {

      height: 4px;
      margin-top: 0;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-links {

      position: absolute;
      right: 10px;
      bottom: 7px;
      left: auto;
      width: auto;
      min-width: 0;
      height: 23px;
      transform: none;
      align-items: center;
      gap: 4px;
      padding: 2px;
      border: 1px solid rgba(255,255,255,.34);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.14)),
        rgba(255,255,255,.1);
      box-shadow: 0 4px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.64);
      overflow: visible;
      z-index: 14;
      backdrop-filter: blur(10px) saturate(1.08);
      -webkit-backdrop-filter: blur(10px) saturate(1.08);
      }

    .mob-profile-mode #page-profile .sl-song-block .np-stream-btn {

      width: 24px;
      height: 19px;
      min-width: 24px;
      padding: 0;
      flex: 0 0 24px;
      border: 0;
      border-radius: 999px;
      color: var(--ink2);
      background: rgba(255,255,255,.16);
      }

    .mob-profile-mode #page-profile .sl-song-block .np-stream-btn svg {

      width: 11px;
      height: 11px;
      }

    .mob-profile-mode #page-profile .sl-song-block .np-play-btn {

      width: 22px;
      height: 22px;
      min-width: 22px;
      }

    .mob-profile-mode #page-profile .sl-bio-block {

      grid-area: bio;
      width: 100%;
      padding: 8px 0 0;
      border: 0;
      background: transparent;
      }

}

/* Mobile Blog header News button */
@media (max-width: 768px) {

    #page-talk .tea-news-btn {

      height: 32px;
      padding: 0 12px;
      font-size: 10px;
      }

}

/* ── Mobile Blog topbar: visible News button only ── */
@media (max-width: 768px) {

    #page-talk #topbar-trending-btn {

      display: none;
      }

    @media (min-width: 375px) {

      .mob-profile-mode #page-profile .sl-name {

        font-size: 25px;
        letter-spacing: .05px;
        }

      .mob-profile-mode #page-profile .sl-profile-right {

        --sl-origin-font-size: 8.2px;
        }

      .mob-profile-mode #page-profile .sl-realname {

        font-size: 11px;
        }

      .mob-profile-mode #page-profile #sl-origin {

        font-size: 8.2px;
        }

    }

}

/* ── Mobile Blog profile tweet search ── */
@media (max-width: 768px) {

    #page-talk .profile-tweet-search-box {

      padding: 7px 8px;
      justify-self: stretch;
      max-width: none;
      }

    #page-talk .profile-tweet-search-input {

      height: 30px;
      font-size: 11px;
      }

}

/* ── Mobile Blog profile-only tweet search placement ── */
@media (max-width: 768px) {

    #page-talk #view-user-profile .profile-tweet-search-input {

      height: 30px;
      font-size: 11px;
      }

}

/* ── Mobile Blog profile bio row: stack search under bio ── */
@media (max-width: 768px) {

    #page-talk #view-user-profile .user-profile-bio-row {

      grid-template-columns: 1fr;
      gap: 8px;
      padding: 0 12px 12px 12px;
      }

}

/* ── Mobile News cards ── */
@media (max-width: 768px) {

    #page-talk #mobile-blog-container.news-post-list .news-post-card {

      grid-template-columns: 1fr;
      align-items: stretch;
      gap: 10px;
      padding: 13px;
      }

    #page-talk #mobile-blog-container.news-post-list .news-post-open-btn {

      justify-self: start;
      }

}

/* ── Mobile Live description: keep empty box hidden for visitors ── */
@media (max-width: 768px) {

    body:not(.talk-admin) #page-live .live-desc:not(.has-live-desc) {

      display: none;
      }

}

/* ── Mobile Live header order: FAME DOLL / Twitch / LIVE ── */
@media (max-width: 768px) {

    #page-live .live-header.live-header-reordered {

      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
      }

    #page-live .live-header-reordered .live-header-left, #page-live .live-header-reordered .live-header-center, #page-live .live-header-reordered .live-header-right {

      width: auto;
      min-width: 0;
      }

    #page-live .live-header-reordered .live-title {

      font-size: 16px;
      letter-spacing: 1.5px;
      overflow: hidden;
      text-overflow: ellipsis;
      }

    #page-live .live-header-reordered .live-twitch-link {

      font-size: 8px;
      padding: 6px 8px;
      }

    #page-live .live-header-reordered .live-badge-wrap {

      gap: 5px;
      }

    #page-live .live-header-reordered .live-badge {

      font-size: 8px;
      letter-spacing: 2px;
      }

    #page-live .live-header-reordered .live-dot {

      width: 8px;
      height: 8px;
      }

}

/* ── Scrollables active video: direct fast TikTok iframe ── */

#page-scrollables .scroll-tiktok-fast-frame {

  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  border: 0;
  display: block;
  background: #000;
  pointer-events: auto;
}

#page-scrollables .tiktok-embed {

  position: relative;
}

#page-scrollables .scroll-mobile-caption {

  display: none;
}

#page-scrollables .scroll-tiktok-fallback {

  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  box-sizing: border-box;
  text-align: center;
  font-family: 'DM Mono', monospace;
  color: rgba(255,255,255,.72);
  background: transparent;
  pointer-events: none;
}

#page-scrollables .scroll-loader-card {

  display: none;
}

#page-scrollables .scroll-loader-kicker {

  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: .58;
}

#page-scrollables .scroll-loader-title {

  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 25px;
  line-height: .9;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

#page-scrollables .scroll-loader-line {

  width: 96px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--pk), transparent);
  animation: scroll-loader-line 1.35s ease-in-out infinite;
}

#page-scrollables .scroll-tiktok-fallback a {

  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.10);
  pointer-events: auto;
}

#page-scrollables .scroll-tiktok-fallback::before {

  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.20);
  border-top-color: rgba(255,255,255,.72);
  position: absolute;
  top: calc(50% - 13px);
  left: calc(50% - 13px);
  animation: scroll-load-spin 1s linear infinite;
}

@keyframes scroll-load-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scroll-loader-line {
  0%, 100% {
    transform: scaleX(.35);
    opacity: .45;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

#page-scrollables .tiktok-embed.has-frame-loaded .scroll-tiktok-fallback {

  display: none;
}

/* ── Mobile Blog header: align controls to the same ROW center ── */
@media (max-width: 768px) {

    #page-talk .app-topbar {

      position: relative;
      display: flex;
      align-items: center;
      height: 52px;
      min-height: 52px;
      max-height: 52px;
      padding: 0 8px 0 6px;
      margin: 0 8px 8px;
      border: 1px solid rgba(255, 255, 255, .36);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .19)),
        rgba(255, 255, 255, .12);
      box-shadow:
        0 12px 24px rgba(0, 0, 0, .14),
        inset 0 1px 0 rgba(255, 255, 255, .58);
      backdrop-filter: blur(16px) saturate(1.14);
      -webkit-backdrop-filter: blur(16px) saturate(1.14);
      overflow: visible;
      box-sizing: border-box;
      }

    #page-talk .app-topbar-left, #page-talk .app-topbar-center-nav, #page-talk .app-topbar-right {

      position: static;
      transform: none;
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      height: 52px;
      min-height: 52px;
      max-height: 52px;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      overflow: visible;
      box-sizing: border-box;
      }

    #page-talk .app-topbar-left {

      flex: 1 1 0;
      min-width: 0;
      justify-content: flex-start;
      }

    #page-talk .app-topbar-center-nav {

      flex: 0 0 auto;
      justify-content: center;
      }

    #page-talk .app-topbar-right {

      flex: 1 1 0;
      justify-content: flex-end;
      }

    #page-talk #topbar-blog-btn, #page-talk .talk-home-icon, #page-talk #topbar-user-toggle {

      position: static;
      transform: none;
      top: auto;
      bottom: auto;
      margin: 0;
      align-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      line-height: 1;
      }

    #page-talk #topbar-blog-btn.tea-news-btn {

      height: 30px;
      min-height: 30px;
      max-height: 30px;
      min-width: 58px;
      padding: 0 12px;
      }

    #page-talk .talk-home-icon {

      width: 34px;
      min-width: 34px;
      height: 34px;
      min-height: 34px;
      max-height: 34px;
      padding: 0;
      }

    #page-talk #topbar-user-toggle {

      height: 34px;
      min-height: 34px;
      max-height: 34px;
      padding: 0 6px;
      }

    #page-talk #nav-search-mobile, #page-talk .mobile-nav-item#nav-search-mobile, #page-talk #topbar-blog-btn svg {

      display: none;
      visibility: hidden;
      width: 0;
      height: 0;
      min-width: 0;
      max-width: 0;
      padding: 0;
      margin: 0;
      pointer-events: none;
      }

}

/* ── Mobile Blog: nav clearance ── */
@media (max-width: 768px) {

    #page-talk .app-shell {

      margin-top: 12px;
      }

}

/* ── Mobile nav controls geometry only ── */
@media (max-width: 768px) {

    .nav-icons {

      position: fixed;
      top: 0;
      right: 8px;
      left: auto;
      height: 54px;
      min-height: 54px;
      max-height: 54px;
      transform: none;
      margin: 0;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      z-index: 1001;
      }

    #nav-live.nav-live-mini {

      width: 46px;
      min-width: 46px;
      max-width: 46px;
      height: 46px;
      min-height: 46px;
      max-height: 46px;
      flex: 0 0 46px;
      padding: 0;
      margin: 0;
      transform: none;
      align-self: center;
      border-radius: 12px;
      overflow: hidden;
      }

}

/* ── Mobile bars: hidden on desktop, visible only on mobile ── */
#mobile-top-bar, #mobile-bottom-bar, .mobile-only, .mobile-nav-item {

  display: none;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 769px) {

    #mobile-top-bar, #mobile-bottom-bar, .mobile-only, .mobile-nav-item {

      display: none;
      visibility: hidden;
      pointer-events: none;
      }

}

@media (max-width: 768px) {

    .nav {

      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 0;
      min-height: 0;
      padding: 0;
      display: block;
      overflow: visible;
      pointer-events: none;
      z-index: 9999;
      }

    #nav-shop-main, .nav-center, .nav-spacer, .nav-icons, #nav-settings-dropdown {

      display: none;
      visibility: hidden;
      pointer-events: none;
      }

    #mobile-top-bar {

      background: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 0;
      display: grid;
      visibility: visible;
      pointer-events: auto;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 54px;
      z-index: 9999;
      padding: 0 12px;
      border: 0;
      }

    #mobile-bottom-bar {

      background:
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.055) 52%, rgba(255,255,255,.025)),
        rgba(255,255,255,.035);
      background-color: rgba(255,255,255,.035);
      background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.055) 52%, rgba(255,255,255,.025));
      box-shadow:
        0 9px 24px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -1px 0 rgba(255,255,255,.12);
      backdrop-filter: blur(11px) saturate(1.34);
      -webkit-backdrop-filter: blur(11px) saturate(1.34);
      border: 1px solid rgba(255,255,255,.56);
      border-radius: 999px;
      display: flex;
      visibility: visible;
      pointer-events: auto;
      align-items: center;
      justify-content: space-around;
      position: fixed;
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      left: 28px;
      right: 28px;
      height: 48px;
      z-index: 9999;
      padding: 0 7px;
      overflow: visible;
      }

    .mobile-only, .mobile-nav-item {

      visibility: visible;
      pointer-events: auto;
      }

}

/* ── Mobile dark transparent header: controls stay black ── */
@media (max-width: 768px) {

    html:not(.light-mode) .nav, body.dark-mode .nav {

    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
  -webkit-backdrop-filter: none;
    border-bottom: 0;
      color: #000;
      }

    html:not(.light-mode) .mob-top-btn, html:not(.light-mode) .mob-top-btn svg, html:not(.light-mode) .mob-tab, html:not(.light-mode) .mob-tab svg, html:not(.light-mode) #mob-live-btn, html:not(.light-mode) #mob-live-btn svg, html:not(.light-mode) #mob-settings-btn, html:not(.light-mode) #mob-settings-btn svg, body.dark-mode .mob-top-btn, body.dark-mode .mob-top-btn svg, body.dark-mode .mob-tab, body.dark-mode .mob-tab svg, body.dark-mode #mob-live-btn, body.dark-mode #mob-live-btn svg, body.dark-mode #mob-settings-btn, body.dark-mode #mob-settings-btn svg {

      color: #000;
      stroke: #000;
      fill: none;
      }

}

/* ── Mobile background canvas: default stone, explicit dark concrete only ── */
@media (max-width: 768px) {

    html, body, #app, #app-root, main, .app, html.live-page-active, html.live-page-active body, html.live-page-active #app, html.live-page-active #app-root, html.live-page-active main, html.live-page-active .app {

      background-size: cover;
      background-repeat: no-repeat;
      background-position: center top;
      background-attachment: scroll;
      }

    .page, .page.active, #page-live, #page-community, #page-community.active, #page-community:not([data-loaded="1"]), #page-community.page-loading, #page-community.page-loading .page-loader, #page-community > div, #page-community > div > div, #page-community > *, .nav, header {

    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
  -webkit-backdrop-filter: none;
    border-bottom: 0;
      }

    #page-community > div, #page-community > div > div {

      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin-left: 0;
      margin-right: 0;
      box-sizing: border-box;
      }

}

/* ── Mobile header/nav background ownership impossible ── */
@media (max-width: 768px) {

    .nav, header, html.light-mode .nav, html.dark-mode .nav, html:not(.light-mode) .nav, body.light-mode .nav, body.dark-mode .nav, html.live-page-active .nav, body.live-page-active .nav, html.community-page-active .nav, body.community-page-active .nav {

      background: transparent;
      background-color: transparent;
      background-image: none;
      background-size: auto;
      background-repeat: initial;
      background-position: initial;
      background-attachment: initial;
      box-shadow: none;
      backdrop-filter: none;
  -webkit-backdrop-filter: none;
      border-bottom: 0;
      border-image: none;
      }

    #mobile-top-bar, html.light-mode #mobile-top-bar, html.dark-mode #mobile-top-bar, html:not(.light-mode) #mobile-top-bar, body.dark-mode #mobile-top-bar, body.light-mode #mobile-top-bar {

      background: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 0;
      }

    .nav, html.light-mode .nav, html.dark-mode .nav, html:not(.light-mode) .nav, body.light-mode .nav, body.dark-mode .nav, html.live-page-active .nav, body.live-page-active .nav, html.community-page-active .nav, body.community-page-active .nav {

      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 0;
      min-height: 0;
      padding: 0;
      display: block;
      overflow: visible;
      pointer-events: none;
      z-index: 9999;
      }

    .nav::before, .nav::after, .top-nav::before, .top-nav::after, .site-header::before, .site-header::after, header::before, header::after, #mobile-top-bar::before, #mobile-top-bar::after, #mobile-bottom-bar::before, #mobile-bottom-bar::after {

      display: none;
      content: none;
      background: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      opacity: 0;
      }

}

/* ── Mobile Community source layout: transparent outer canvas ── */
@media (max-width: 768px) {

    #page-community, #widgetbot-container {

      background: transparent;
      background-color: transparent;
      background-image: none;
      }

}

/* Mobile Scrollables geometry: one interactive TikTok card in the viewport. */
@media (max-width: 768px) {

    body.mob-scroll-mode #page-scrollables, body.mob-scroll-mode #page-scrollables .scrollables-layout, body.mob-scroll-mode #page-scrollables .scrollables-right, body.mob-scroll-mode #page-scrollables .feed-wrap, body.mob-scroll-mode #page-scrollables #scrollables-grid, #page-scrollables.active, #page-scrollables.active .scrollables-layout, #page-scrollables.active .scrollables-right, #page-scrollables.active .feed-wrap, #page-scrollables.active #scrollables-grid {

      width: 100vw;
      max-width: 100vw;
      height: calc(100svh - 118px);
      min-height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      box-sizing: border-box;
      }

    body.mob-scroll-mode #page-scrollables .scrollables-layout, #page-scrollables.active .scrollables-layout {

      display: block;
      }

    body.mob-scroll-mode #page-scrollables .scrollables-left-panel, #page-scrollables.active .scrollables-left-panel {

      display: none;
      }

    body.mob-scroll-mode #page-scrollables #scrollables-grid, #page-scrollables.active #scrollables-grid {

      width: 100%;
      height: calc(100svh - 118px);
      min-height: calc(100svh - 118px);
      display: flex;
      align-items: stretch;
      justify-content: center;
      background: transparent;
      overflow: hidden;
      }

    body.mob-scroll-mode #page-scrollables .tiktok-embed.is-current, #page-scrollables.active .tiktok-embed.is-current {

      --scroll-mobile-tiktok-scale: 1;
      position: relative;
      left: auto;
      top: auto;
      width: min(100vw, 390px);
      max-width: min(100vw, 390px);
      min-width: 0;
      height: calc(100svh - 118px);
      min-height: 0;
      max-height: calc(100svh - 118px);
      margin: 0 auto;
      display: block;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      overflow: hidden;
      flex: 0 0 min(100vw, 390px);
      background: transparent;
      overscroll-behavior: contain;
      touch-action: none;
      }

    body.mob-scroll-mode #page-scrollables .tiktok-embed.is-current iframe, body.mob-scroll-mode #page-scrollables .tiktok-embed.is-current section, #page-scrollables.active .tiktok-embed.is-current iframe, #page-scrollables.active .tiktok-embed.is-current section {

      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: calc(100svh - 118px);
      min-height: 0;
      max-height: calc(100svh - 118px);
      margin: 0;
      padding: 0;
      border: 0;
      pointer-events: none;
      overflow: hidden;
      transform: none;
      transform-origin: top center;
      }

    body.mob-scroll-mode #page-scrollables .scroll-swipe-lane, #page-scrollables.active .scroll-swipe-lane {

      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 8;
      display: block;
      width: auto;
      background: transparent;
      touch-action: none;
      pointer-events: auto;
    }

    body.mob-scroll-mode #page-scrollables .tiktok-embed.is-interacting .scroll-swipe-lane, #page-scrollables.active .tiktok-embed.is-interacting .scroll-swipe-lane {

      pointer-events: none;
    }

    body.mob-scroll-mode #page-scrollables .tiktok-embed.is-interacting iframe, #page-scrollables.active .tiktok-embed.is-interacting iframe {

      pointer-events: auto;
    }

    body.mob-scroll-mode #page-scrollables .scroll-mobile-caption, #page-scrollables.active .scroll-mobile-caption {

      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      min-height: 48px;
      padding: 8px 12px calc(9px + env(safe-area-inset-bottom, 0px));
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      line-height: 1.25;
      letter-spacing: .2px;
      color: rgba(255,255,255,.9);
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
      text-shadow: 0 1px 4px rgba(0,0,0,.85);
      pointer-events: none;
      }

    body.mob-scroll-mode #page-scrollables .scroll-tiktok-fallback, #page-scrollables.active .scroll-tiktok-fallback {

      pointer-events: none;
      }

}

/* ── Mobile shop: full-width embed without the desktop centered frame. ── */
@media (max-width: 768px) {

  #page-shop.shop-page.active {

    display: block;
    width: 100%;
    height: calc(100dvh - 148px);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent
  }

  #page-shop .shop-frame-shell {

    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: hidden;
    aspect-ratio: auto;
    transform: none;
    border: 0;
    background: transparent;
    box-shadow: none
  }

  #page-shop .shop-viewport {

    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    transform: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none
  }

  #page-shop .shop-embed {

    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    transform: none
  }

  #page-shop .shop-graffiti-border {

    display: none
  }

}

/* ── Mobile music: readable era text without the black glass pill. ── */
@media (max-width: 768px) {

  #page-music .mp-era-card-label {

    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    max-width: calc(100% - 12px);
    margin: 7px auto 0;
    padding: 2px 6px 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-sizing: border-box
  }

  #page-music .mp-era-card-label::before {

    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    top: -4px;
    bottom: -4px;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.58), rgba(255,255,255,.28) 44%, rgba(255,255,255,0) 76%);
    filter: blur(5px);
    opacity: .84;
    pointer-events: none
  }

  #page-music .mp-era-card-label-title,
  #page-music .mp-era-card-label-tag,
  #page-music .mp-era-card-label .mp-era-hype-line,
  #page-music .mp-era-card-date,
  #page-music .mp-era-card-title {

    color: rgba(9,9,10,.94);
    -webkit-text-stroke: .24px rgba(255,255,255,.78);
    text-shadow:
      0 1px 0 rgba(255,255,255,.74),
      0 2px 8px rgba(255,255,255,.54),
      0 1px 12px rgba(0,0,0,.24)
  }

}