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

/* ── Mobile bars (hidden on desktop) ── */
#mobile-bottom-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;
      }

      .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
      }

      #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 svg.lips-mark {

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

      .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-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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

          body {

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

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

          .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
            }
          .yt-meta-row {

            width: 100%;
            gap: 4px;
            justify-content: space-between;
            overflow: hidden;
            white-space: nowrap
            }
          .yt-series-chip {

            flex: 0 1 auto;
            width: max-content;
            max-width: calc(100% - 52px);
            min-width: 0;
            padding: 2px 5px;
            border: 1px solid rgba(12,11,10,.16);
            border-radius: 999px;
            font-size: 6.2px;
            letter-spacing: .28px;
            line-height: 1;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            background: rgba(255,255,255,.26)
            }
          .yt-date {

            margin-left: auto;
            flex: 0 0 auto;
            font-size: 6.2px;
            letter-spacing: .1px;
            line-height: 1
            }
          .yt-date-full {

            display: none
            }
          .yt-date-mobile {

            display: inline
            }
          .feat-yt-subrow {

            width: 100%;
            gap: 4px;
            margin-top: 2px;
            justify-content: space-between;
            overflow: hidden
            }
          .feat-yt-subrow .feat-yt-time {

            flex: 0 0 auto;
            font-size: 6.2px;
            letter-spacing: .1px;
            white-space: nowrap
            }
          .feat-series-chip {

            flex: 0 1 auto;
            width: max-content;
            max-width: calc(100% - 52px);
            min-width: 0;
            margin-left: 0;
            padding: 2px 5px;
            border: 1px solid rgba(12,11,10,.16);
            border-radius: 999px;
            font-size: 6.2px;
            letter-spacing: .28px;
            line-height: 1;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            background: rgba(255,255,255,.26);
            white-space: nowrap
            }
          #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 - 62px);
            min-height: 0;
            padding-bottom: 0;
            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
            }
          #page-community #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
            }
          #widgetbot-container {
            flex-direction: column;
            gap: 0;
            height: 100%;
            min-height: 0
            }
          .mp {

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

            position: static;
            height: auto
            }

}

/* ── Content-visibility lazy paint ── */
  @media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

                    .page:not(.active) {

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

                      content-visibility: auto;
                        }

  }

/* ── Touch / tap performance ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  * {
  -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, .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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

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

  }

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

                @media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

                    .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, .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-shop-btn .mob-tab-inner {

                      animation-delay: 0s;
                        }
                    #mob-tab-music .mob-tab-inner {

                      animation-delay: -.4s;
                        }
                    #mob-tab-talk .mob-tab-inner {

                      animation-delay: -.8s;
                        }
                    #mob-tab-profile .mob-tab-inner {

                      animation-delay: -1.2s;
                        }
                    #mob-tab-scroll .mob-tab-inner {

                      animation-delay: -1.6s;
                        }
                    #mob-tab-community .mob-tab-inner {

                      animation-delay: -2s;
                        }
                    #mob-live-btn .mob-tab-inner {

                      animation-delay: -2.4s;
                      color: #000;
                        }
                    #mob-live-btn .mob-tab-inner line {

                      fill: none;
                      stroke: currentColor;
                        }
                    #mob-tab-music .mob-tab-inner > svg circle {

                      fill: currentColor;
                      stroke: none;
                        }
                    #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-community .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;
                        }

                    #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;
                        }
                    .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;
                        }
                /* Site intro still plays since it's a one-time animation */

                /* ─── Kill will-change on mobile (saves GPU VRAM layers) ─── */
                    .fans-star-g, .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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

                    .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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    .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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

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

      position: fixed;
      left: 12px;
      right: 12px;
      top: auto;
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #page-live {

      height: calc(100svh - 62px);
      min-height: 0;
      overflow: hidden;
      padding: 0;
      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-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-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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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;
      overflow: visible;
      }

    #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;
      /* One row of three visible; further videos revealed by swiping
         sideways instead of stacking into more rows. grid-template-columns
         must be none: the base .yt-list rule declares a fixed 3-column
         template that would collapse to zero-width once the implicit
         carousel columns take the row's width. */
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 6px) / 3);
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0;
      padding: 1px 3px 3px;
      gap: 3px;
      max-height: none;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--pk-rgb), .42) transparent;
      background: transparent;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      }

    #page-profile #yt-list-side::-webkit-scrollbar, #page-profile.active #yt-list-side::-webkit-scrollbar, .mob-profile-mode #page-profile #yt-list-side::-webkit-scrollbar {

      height: 4px;
      }

    #page-profile #yt-list-side::-webkit-scrollbar-thumb, #page-profile.active #yt-list-side::-webkit-scrollbar-thumb, .mob-profile-mode #page-profile #yt-list-side::-webkit-scrollbar-thumb {

      border: 0;
      border-radius: 3px;
      background: rgba(var(--pk-rgb), .42);
      }

    #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: visible;
      }

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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 .np-widget-inner {

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

}

/* ── Mobile Now Playing notes: prevent play animation from expanding card ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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: three two-button streaming stacks above Discography ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, 30px);
      align-items: center;
      gap: 4px 6px;
      padding: 0 6px;
      margin: 0 0 4px;
      box-sizing: border-box;
      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 {

      display: none
      }

    #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: 28px;
      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: 1;
      grid-row: 2;
    }

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

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

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

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

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

      position: relative;
      display: block;
      width: 15px;
      height: 15px;
      flex: 0 0 15px;
      line-height: 0;
      }

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

      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      margin: 0;
      transform: none;
      vertical-align: top
      }

    #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-now-playing {

      width: 100%;
      min-width: 0;
      margin: 0 0 7px;
      padding: 0;
      }

    #page-music .mp-now-playing .np-widget {

      width: 100%;
      min-height: 72px;
      margin: 0;
      border-radius: 15px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.14)),
        rgba(210,210,210,.16);
      border-color: rgba(255,255,255,.34);
      box-shadow: 0 8px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.48);
      backdrop-filter: blur(14px) saturate(1.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.12);
      overflow: visible;
      }

    #page-music .mp-now-playing .np-widget-inner {

      min-height: 72px;
      padding: 5px 10px 7px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;
      }

    #page-music .mp-now-playing .np-top-row {

      min-height: 17px;
      margin-bottom: 0;
      }

    #page-music .mp-now-playing .np-label {

      font-size: 5px;
      letter-spacing: 1.2px;
      }

    #page-music .mp-now-playing .np-title {

      max-width: calc(100% - 4px);
      margin-bottom: 1px;
      font-size: 21px;
      line-height: .95;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      }

    #page-music .mp-now-playing .np-artist-name {

      margin-bottom: 3px;
      font-size: 10px;
      line-height: 1.1;
      }

    #page-music .mp-now-playing .np-progress {

      height: 4px;
      }

    #page-music .mp-now-playing .np-play-btn {

      width: 24px;
      height: 24px;
      justify-content: center;
      }

    #page-music .mp-now-playing .np-play-btn svg {

      width: 19px;
      height: 19px;
      }

    #page-music .mp-now-playing .np-links {

      position: absolute;
      right: 10px;
      bottom: 5px;
      left: auto;
      width: auto;
      height: 24px;
      align-items: center;
      gap: 4px;
      padding: 2px;
      border: 1px solid rgba(255,255,255,.34);
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      box-shadow: 0 4px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.54);
      backdrop-filter: blur(10px) saturate(1.08);
      -webkit-backdrop-filter: blur(10px) saturate(1.08);
      }

    #page-music .mp-now-playing .np-stream-btn {

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

    #page-music .mp-now-playing .np-stream-btn svg {

      width: 11px;
      height: 11px;
      }

    #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: 100%;
      min-width: 0;
      max-width: none;
      min-height: 44px;
      margin: 0 0 8px;
      padding: 8px 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: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, 28px);
      gap: 3px 6px;
      }

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

      height: 26px;
      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;
      }

}

/* ── Music mobile: restore normal site background ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

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

      background: transparent;
      }

}

/* ── Mobile Tea Party nav: avatar profile button + icon home ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    body.mob-profile-mode {

      padding-top: 0;
      }

    .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(0, 1fr) minmax(0, 2fr);
      grid-template-areas:
        "social social"
        "social social"
        "social social"
        "bio bio";
      align-items: center;
      justify-items: center;
      column-gap: 6px;
      row-gap: 0;
      padding: 0 6px 2px;
      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 {

      display: none
      }

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

      display: none;
      content: none;
      }

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

      grid-area: fans;
      width: 118px;
      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: 118px;
      height: 110px;
      margin: 0;
      transform: none;
      filter: none;
      }

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

      box-shadow: none;
      filter: none
      }

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

      animation: none
      }

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

      filter: none;
      transform: none
      }

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

      grid-column: auto;
      order: 1;
      width: 100%;
      max-width: none;
      height: 40px;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid var(--border2);
      border-radius: 8px;
      background: rgba(255, 255, 255, .48);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74), 0 4px 10px rgba(0, 0, 0, .1);
      filter: none;
      transform: none;
      z-index: 2;
      }

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

      width: 91px;
      min-width: 91px;
      max-width: none;
      height: 40px;
      flex: 0 0 91px;
      }

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

      grid-area: social;
      width: 100%;
      max-width: none;
      height: auto;
      margin: 0;
      padding: 2px 0;
      align-self: center;
      justify-self: stretch;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 40px;
      gap: 3px;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      z-index: 4;
      background: transparent;
      box-shadow: none;
      border: 0;
      }

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

      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 42px;
      padding: 2px 4px 3px;
      gap: 4px;
      border-radius: 8px;
      border: 1px solid var(--border2);
      background: rgba(255, 255, 255, .48);
      /* Match desktop: follow the selected artist name font, not the
         fixed nav-label font. */
      font-family: var(--display-name-font, Inter, sans-serif);
      font-size: 7.5px;
      letter-spacing: .5px;
      flex-direction: column;
      line-height: 1.05;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 4px 10px rgba(0,0,0,.1);
      }

    .mob-profile-mode #page-profile #adult-link-widget { order: 1; }
    .mob-profile-mode #page-profile #tip-link-button { order: 2; }
    .mob-profile-mode #page-profile #email-link-button { order: 3; }
    .mob-profile-mode #page-profile #youtube-profile-button { order: 4; }
    .mob-profile-mode #page-profile #instagram-profile-button { order: 5; }
    .mob-profile-mode #page-profile #tiktok-profile-button { order: 6; }

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

      width: 22px;
      height: 22px;
      flex-basis: 22px;
      background: transparent;
      box-shadow: none;
      }

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

      width: 17px;
      height: 17px;
      }

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

      width: 18px;
      height: 18px
      }

    /* X runs oversized with no disc; the big X is the whole label. */
    .mob-profile-mode #page-profile .sl-social-symbol-x {

      width: 30px;
      height: 30px;
      flex-basis: 30px;
      background: transparent;
      box-shadow: none
      }

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

      width: 28px;
      height: 28px
      }

    .mob-profile-mode #page-profile .profile-blog-row {

      display: block;
      align-items: stretch;
      margin: 3px 0 2px;
      padding: 0 5px
      }

    .mob-profile-mode #page-profile .profile-blog-row #latest-post-widget {

      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 8px 10px
      }

    .mob-profile-mode #page-profile .latest-post-topline {

      margin-bottom: 6px
      }

    .mob-profile-mode #page-profile .latest-post-title {

      font-size: 8px;
      letter-spacing: .4px;
      text-align: center
      }

    .mob-profile-mode #page-profile .latest-post-text {

      -webkit-line-clamp: 2;
      font-size: 11px;
      line-height: 1.25;
      text-align: center
      }

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

      width: 100%;
      height: 42px;
      display: block;
      transform: none;
      }

    .mob-profile-mode #page-profile .panties-svg > line,
    .mob-profile-mode #page-profile .panties-svg > path,
    .mob-profile-mode #page-profile .panties-svg > circle,
    .mob-profile-mode #page-profile .panties-svg > text {

      display: none
      }

    .mob-profile-mode #page-profile .panties-title-art {

      transform: none
      }

    .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%;
      min-height: 96px;
      align-self: stretch;
      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-profile-right.identity-minimal.identity-short-name .sl-name {

      font-size: 40px;
      line-height: 1.1;
      }

    html[data-display-name-font="rock-salt"] .mob-profile-mode #page-profile .sl-name {

      line-height: 1.5;
      padding: .14em .2em;
      }

    .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 .sl-info {

      grid-area: level;
      --sl-lvl-box-width: 100%;
      --sl-lvl-visual-width: 106px;
      --sl-lvl-font-size: 24px;
      --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: 96px;
      min-height: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      }

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

      height: 96px;
      min-height: 0;
      padding: 11px 7px 3px;
      justify-content: center;
      gap: 1px;
      }

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

      font-size: 24px;
      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: 106px;
      }

    .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-bio-block {

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

}

/* Mobile Blog header News button */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #page-talk .tea-news-btn {

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

}

/* ── Mobile Blog topbar: visible News button only ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

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

      grid-template-columns: minmax(0, 1fr) 34px;
      align-items: center;
      gap: 10px;
      padding: 14px 13px 13px 17px;
      }

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

      width: 34px;
      height: 34px;
      min-width: 34px;
      justify-self: end;
      }

}

/* ── Mobile Live description: keep empty box hidden for visitors ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

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

      display: none;
      }

}

/* ── 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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #page-talk .app-topbar {

      position: relative;
      display: flex;
      align-items: center;
      height: 50px;
      min-height: 50px;
      max-height: 50px;
      padding: 0 7px;
      margin: 0 8px 8px;
      border: 1px solid rgba(255, 255, 255, .48);
      border-radius: 999px;
      background:
        linear-gradient(155deg, rgba(255, 255, 255, .54), rgba(255, 255, 255, .16) 68%),
        rgba(255, 255, 255, .1);
      box-shadow:
        0 10px 22px rgba(0, 0, 0, .13),
        inset 0 1px 0 rgba(255, 255, 255, .72);
      backdrop-filter: blur(18px) saturate(1.18);
      -webkit-backdrop-filter: blur(18px) saturate(1.18);
      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: 50px;
      min-height: 50px;
      max-height: 50px;
      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: 34px;
      min-height: 34px;
      max-height: 34px;
      min-width: 66px;
      padding: 0 13px;
      border-color: rgba(255,255,255,.54);
      background: rgba(255,255,255,.24);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px rgba(0,0,0,.08);
      }

    #page-talk .talk-home-icon {

      width: 36px;
      min-width: 36px;
      height: 36px;
      min-height: 36px;
      max-height: 36px;
      padding: 0;
      border-color: rgba(255,255,255,.54);
      background: rgba(255,255,255,.24);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 5px 12px rgba(0,0,0,.1);
      }

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

      width: 16px;
      height: 16px;
      }

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #page-talk .app-shell {

      margin-top: 12px;
      }

}

/* ── Mobile nav controls geometry only ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    .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;
      }

}

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

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

@media (min-width: 769px) {

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

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

}

@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    .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-bottom-bar {

      background: var(--glass-clear-surface);
      box-shadow: var(--glass-clear-shadow);
      backdrop-filter: var(--glass-clear-filter);
      -webkit-backdrop-filter: var(--glass-clear-filter);
      border: 1px solid var(--glass-clear-border);
      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: 8px;
      right: 8px;
      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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    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-tab, html:not(.light-mode) .mob-tab svg, html:not(.light-mode) #mob-live-btn, html:not(.light-mode) #mob-live-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 {

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

}

/* ── Mobile background canvas: default stone, explicit dark concrete only ── */
@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    .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;
      }

    .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-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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    #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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

    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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

  #page-shop.shop-page.active {

    display: block;
    width: 100%;
    height: calc(100dvh - 54px);
    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), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {

  #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)
  }

}


@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  .site-settings-bg {
    align-items: flex-end;
    padding: 0;
  }

  .site-settings-panel {
    width: 100%;
    max-height: 94dvh;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }

  .site-settings-head {
    padding: 20px 18px 16px;
  }

  .site-settings-head h2 {
    font-size: 29px;
  }

  .site-settings-body {
    padding: 18px;
  }

  .site-settings-grid,
  .site-settings-link-row,
  .site-settings-era-row {
    grid-template-columns: 1fr;
  }

  .site-settings-remove {
    justify-self: end;
    height: 32px;
  }

  .site-settings-actions {
    padding: 13px 18px max(13px, env(safe-area-inset-bottom));
  }

  .site-settings-actions button {
    flex: 1;
  }
}

@media (max-width: 768px), (max-width: 960px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  .site-settings-five,
  .site-settings-tiktok-post-row,
  .site-settings-tiktok-link-row,
  .site-settings-page-row {
    grid-template-columns: 1fr;
  }
  .site-settings-tiktok-post-row .site-settings-wide,
  .site-settings-tiktok-post-row .site-settings-remove {
    grid-column: auto;
    grid-row: auto;
  }
  .site-settings-upload-line { grid-template-columns: 1fr; }
  .site-settings-upload-line .site-settings-mini { justify-self: stretch; }
  .site-settings-section-intro { flex-direction: column; gap: 9px; }
  .site-settings-section-intro .site-settings-mini { align-self: flex-start; }
  .site-settings-media-row { grid-template-columns: 1fr; }
  .site-settings-media-preview { width: min(100%, 170px); }
  .site-settings-media-fields { grid-template-columns: 1fr; }
  .site-settings-media-fields .site-settings-wide { grid-column: auto; }
  .site-settings-media-row > .site-settings-remove { justify-self: end; }
  .site-settings-inline-actions { flex-direction: column; }
  .site-settings-inline-actions .site-settings-subaction { width: 100%; }
  #site-settings-status { display: none; }
}

/* ── Mobile profile: artist info removed; social row owns the full top ────── */
.mob-profile-mode #page-profile .sl-profile-right { display: none !important; }
.mob-profile-mode #page-profile .fans-star-wrap { display: none !important; }

/* Profile tab symbol: the artist name Z with the same shine animation. */
.mob-z-shine {

  font-family: var(--display-name-font, Inter, sans-serif);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 1px;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, rgba(255, 255, 255, .72) 48%, var(--ink) 58%, var(--ink) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mob-z-shine-sweep 5.5s ease-in-out infinite;
  display: inline-block;
  }

@keyframes mob-z-shine-sweep {

  0%, 72%, 100% { background-position: 140% 0; }
  84% { background-position: -40% 0; }
  }

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

  .mob-z-shine { animation: none; }
  }