/* Mobile build overrides. Loaded only inside SharkdleMobile/www. */
:root {
    --mobile-edge: max(12px, env(safe-area-inset-left));
    --mobile-edge-right: max(12px, env(safe-area-inset-right));
    --mobile-top: max(10px, env(safe-area-inset-top));
    --mobile-bottom: max(18px, env(safe-area-inset-bottom));
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    overscroll-behavior-y: contain;
}

* {
    -webkit-tap-highlight-color: rgba(77, 208, 225, 0.18);
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

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

button {
    font-size: inherit;
}

button,
.nav-btn,
.auth-btn,
.home-btn,
.rng-btn,
.rng-icon-btn,
.pass-tab-btn,
.home-v3-nav a,
.home-v3-nav button {
    min-height: 40px;
}

input,
select,
textarea {
    min-height: 42px;
}

#cursor-shark {
    display: none !important;
}

@media (hover: none) and (pointer: coarse) {
    * {
        scrollbar-width: thin;
    }

    .home-v3-mode-card:hover,
    .home-v3-shop-item:hover,
    .shell-page .nav-btn:hover,
    .shell-page button:hover,
    .rng-btn:hover,
    .rng-icon-btn:hover {
        transform: none !important;
    }
}

@media (max-width: 900px) {
    body.home-v3-page {
        min-height: 100svh;
        padding: var(--mobile-top) var(--mobile-edge-right) var(--mobile-bottom) var(--mobile-edge);
        overflow-x: hidden;
    }

    body.home-v3-page .ocean-ambient {
        opacity: 0.55;
    }

    body.home-v3-page .ambient-bubble {
        display: none;
    }

    body.home-v3-page .home-v3-shell {
        width: 100%;
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
    }

    body.home-v3-page .home-v3-left,
    body.home-v3-page .home-v3-right,
    body.home-v3-page .home-v3-center {
        width: 100%;
        min-width: 0;
    }

    body.home-v3-page .home-v3-left,
    body.home-v3-page .home-v3-right {
        position: static;
        border-radius: 18px;
        padding: 12px;
        gap: 12px;
    }

    body.home-v3-page .home-v3-left {
        order: 1;
    }

    body.home-v3-page .home-v3-center {
        order: 2;
    }

    body.home-v3-page .home-v3-right {
        order: 3;
    }

    body.home-v3-page .home-v3-logo {
        padding: 2px;
    }

    body.home-v3-page .home-v3-logo-icon {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    body.home-v3-page .home-v3-logo strong {
        font-size: 24px;
    }

    body.home-v3-page .home-v3-logo em {
        font-size: 11px;
    }

    body.home-v3-page .home-v3-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        overflow-x: auto;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
    }

    body.home-v3-page .home-v3-nav a,
    body.home-v3-page .home-v3-nav button {
        scroll-snap-align: start;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        min-height: 42px;
        padding: 6px 4px;
        border-radius: 12px;
        font-size: 10px;
        line-height: 1.1;
        white-space: normal;
        text-align: center;
    }

    body.home-v3-page .home-v3-nav i {
        font-size: 14px;
    }

    body.home-v3-page .home-v3-fact,
    body.home-v3-page .home-v3-about-links {
        display: none;
    }

    body.home-v3-page .home-v3-hero {
        min-height: 430px;
        padding: 22px 16px 150px;
        border-radius: 22px;
        display: block;
    }

    body.home-v3-page .home-v3-hero-copy {
        max-width: 100%;
        gap: 12px;
    }

    body.home-v3-page .home-v3-eyebrow {
        width: fit-content;
        font-size: 10px;
        padding: 7px 10px;
    }

    body.home-v3-page .home-v3-hero h1 {
        font-size: clamp(42px, 14vw, 58px);
        line-height: 0.92;
        letter-spacing: 0;
    }

    body.home-v3-page .hero-subtitle {
        max-width: 30ch;
        font-size: 15px;
        line-height: 1.45;
    }

    body.home-v3-page .home-v3-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    body.home-v3-page .home-v3-play-btn,
    body.home-v3-page .home-v3-ghost-btn {
        width: 100%;
        justify-content: center;
        min-height: 42px;
        padding: 9px 8px;
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.1;
    }

    body.home-v3-page .home-v3-shark-bg {
        width: 86%;
        max-width: 360px;
        right: -22%;
        bottom: -22px;
        opacity: 0.72;
    }

    body.home-v3-page .home-v3-shark-fg {
        width: 96%;
        max-width: 420px;
        right: -26%;
        bottom: -14px;
        opacity: 0.98;
    }

    body.home-v3-page .home-v3-bubbles {
        opacity: 0.45;
    }

    body.home-v3-page .home-v3-hub-panels {
        gap: 12px;
    }

    body.home-v3-page .home-v3-panel-heading {
        display: grid;
        gap: 6px;
    }

    body.home-v3-page .home-v3-panel-heading p {
        font-size: 13px;
    }

    body.home-v3-page .home-v3-mode-grid,
    body.home-v3-page .home-v3-progress-grid,
    body.home-v3-page .home-v3-explore-grid,
    body.home-v3-page .home-v3-card-grid,
    body.home-v3-page .home-v3-link-strip {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.home-v3-page .home-v3-mode-card {
        min-height: 136px;
        padding: 16px;
        border-radius: 18px;
    }

    body.home-v3-page .home-v3-mode-card strong {
        font-size: 26px;
    }

    body.home-v3-page .home-v3-mode-card p {
        max-width: 28ch;
        font-size: 13px;
    }

    body.home-v3-page .home-v3-profile-widget {
        width: 100%;
        align-items: center;
        padding: 12px;
        border-radius: 16px;
    }

    body.home-v3-page .home-v3-currencies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.home-v3-page .home-v3-currencies > *,
    body.home-v3-page .home-v3-shield-pill,
    body.home-v3-page .hero-crates-btn {
        width: 100%;
        justify-content: space-between;
        border-radius: 14px;
    }

    body.home-v3-page .home-v3-shop-grid,
    body.home-v3-page .pearl-shop-grid {
        grid-template-columns: 1fr;
    }

    body.home-v3-page #loginModal .modal-content,
    body.home-v3-page #profileModal .modal-content,
    body.home-v3-page #dailyLoginModal .modal-content,
    body.home-v3-page #cratesModal .modal-content,
    body.home-v3-page #homeCratesModal .modal-content,
    body.home-v3-page #crateDropsModal .modal-content,
    body.home-v3-page #pearlShopModal .modal-content,
    .modal .modal-content {
        width: min(100% - 20px, 520px) !important;
        max-height: calc(100svh - 24px) !important;
        overflow-y: auto !important;
        border-radius: 20px !important;
        padding: 18px !important;
    }
}

@media (max-width: 820px) {
    body.shell-page,
    body.mode-v3-page,
    body.rng-page {
        min-height: 100svh;
        padding: var(--mobile-top) var(--mobile-edge-right) var(--mobile-bottom) var(--mobile-edge);
        overflow-x: hidden;
    }

    .shell-page .navbar,
    .shell-page .topbar,
    body.mode-v3-page .topbar,
    .rng-topbar,
    .navbar,
    .topbar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 10px !important;
        border-radius: 16px !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        position: sticky !important;
        top: var(--mobile-top) !important;
        z-index: 200;
    }

    .navbar {
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .navbar .logo,
    .navbar-logo,
    .shell-page .logo,
    .shell-page .navbar-logo,
        .shell-page .topbar h1,
    .topbar h1 {
        min-width: 0;
        font-size: clamp(21px, 7vw, 30px) !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere;
    }

    .navbar nav,
    .navbar > div:last-child,
    .auth-container,
    .shell-page .auth-container,
    .shell-page nav {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
        gap: 6px;
        align-items: stretch;
    }

    .nav-btn,
    .auth-btn,
    .home-btn,
    .shell-page .nav-btn,
    .shell-page button:not(.pass-tab-btn):not(.home-v3-nav button):not(.leaderboard-range-btn) {
        width: 100%;
        margin: 0 !important;
        min-height: 40px !important;
        padding: 8px 7px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .page-shell,
    .content-wrapper,
    .leaderboard-container,
    .library-shell,
    .sharkpass-container,
    .pass-tabs-shell,
    .game-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .page-shell {
        padding-top: 8px !important;
        padding-bottom: 28px !important;
    }

    .hero,
    .hero-card,
    .pass-hero-shell,
    .story-map-hero,
    .leaderboard-hero,
    .library-hero,
    .updates-hero,
    .achievements-hero {
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 18px !important;
        border-radius: 20px !important;
        min-height: auto !important;
    }

    h1,
    .hero-intro h1,
    .pass-hero-copy h1,
    .story-map-hero h1 {
        letter-spacing: 0 !important;
        overflow-wrap: anywhere;
    }

    .pass-hero-shell,
    .pass-progress-row,
    body.achievements-page .achievement-dashboard,
    .leaderboard-hero-grid,
    .leaderboard-layout,
    .library-layout,
    .world-map-shell,
    .story-area-dashboard,
    .story-mission-choices,
    .story-boss-phase-controls,
    .stats-detail,
    .friends-header,
    .friends-stats,
    .friends-lists-grid {
        grid-template-columns: 1fr !important;
        display: grid;
    }

    .pass-level-card,
    body.achievements-page .achievement-category-nav,
    body.achievements-page .achievement-active-panel,
    .leaderboard-panel,
    .leaderboard-stat-board,
    .leaderboard-reset-panel,
    .library-panel,
    .panel-card,
    .friends-header,
    .add-friend-section,
    .friend-card {
        border-radius: 18px !important;
        padding: 14px !important;
    }

    .pass-tab-list,
    body.achievements-page .achievements-hero-actions,
    .leaderboard-range-tabs,
    .leaderboard-range-toggle,
    .profile-tabs,
    .profile-overhaul-tabs,
    .profile-game-tabs,
    .home-tab-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        gap: 6px;
        overflow-x: auto;
    }

    .pass-tab-btn,
    .leaderboard-range-btn,
    .profile-tab-btn,
    .home-tab-btn {
        min-width: 0 !important;
        width: 100%;
        min-height: 40px !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        border-radius: 11px !important;
    }

    table,
    .leaderboard-table,
    .leaderboard-table-wrapper,
    .library-table-wrapper {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-content,
    .story-modal-modern,
    .story-mission-modal,
    .story-boss-modal-content {
        width: min(100% - 20px, 620px) !important;
        max-height: calc(100svh - 24px) !important;
        overflow-y: auto !important;
        border-radius: 20px !important;
        padding: 18px !important;
    }

    body.achievements-page .achievements-container,
    body.achievements-page .achievement-dashboard,
    body.achievements-page .achievement-active-panel,
    body.achievements-page .achievement-active-panel .achievement-category,
    body.achievements-page .achievement-active-panel .achievements-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.achievements-page .achievement-dashboard {
        grid-template-columns: 1fr !important;
    }

    body.achievements-page .achievement-active-header,
    body.achievements-page .achievement-active-title,
    body.achievements-page .achievement-active-metrics,
    body.achievements-page .achievement-card,
    body.achievements-page .achievement-card-top,
    body.achievements-page .achievement-side {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        justify-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.achievements-page .achievement-card {
        gap: 12px !important;
    }

    body.achievements-page .achievement-active-title {
        gap: 10px !important;
    }

    body.achievements-page .achievement-active-title > span,
    body.achievements-page .achievement-icon {
        justify-self: start !important;
    }

    body.achievements-page .achievement-side,
    body.achievements-page .achievement-status,
    body.achievements-page .achievement-points {
        justify-self: start !important;
        width: fit-content !important;
    }

    body.achievements-page .achievement-active-metrics {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.story-map-page.shell-page {
        padding-top: var(--mobile-top) !important;
    }

    body.story-map-page .navbar {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 720px) {
    body.mode-v3-page .mode-header {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.mode-v3-page .game-container {
        border-radius: 20px !important;
        padding: 12px !important;
    }

    body.mode-v3-page .guess-hero {
        grid-template-columns: 1fr !important;
        min-height: auto;
        padding: 16px !important;
        border-radius: 18px !important;
        overflow: hidden;
    }

    body.mode-v3-page .guess-hero-copy {
        min-height: auto;
        gap: 10px;
    }

    body.mode-v3-page .guess-hero-art {
        min-height: 132px;
        order: 2;
    }

    body.mode-v3-page .guess-hero h2 {
        font-size: clamp(36px, 12vw, 54px);
        letter-spacing: 0;
    }

    body.mode-v3-page .guess-hero input,
    body.mode-v3-page #sharkGuess {
        width: 100%;
        min-height: 44px;
        border-radius: 12px;
    }

    body.mode-v3-page #guessBtn,
    body.mode-v3-page .home-btn {
        width: 100%;
        min-height: 42px;
    }

    body.mode-v3-page #guesses {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 18px;
    }

    body.mode-v3-page .guess-row,
    body.mode-v3-page .guess-card,
    body.mode-v3-page .shark-guess-row {
        min-width: min(680px, 100%);
    }

    body.mode-v3-page #win-screen,
    body.mode-v3-page #win-lose-screen {
        width: min(100% - 20px, 620px) !important;
        max-height: calc(100svh - 24px) !important;
        overflow-y: auto !important;
    }

    #show-results-btn {
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: max(14px, env(safe-area-inset-bottom)) !important;
        min-height: 42px;
        border-radius: 999px !important;
    }
}

@media (max-width: 720px) {
    .rng-topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px 42px;
        align-items: center;
        min-height: 58px;
    }

    .rng-brand {
        min-width: 0;
        font-size: 20px;
    }

    .rng-page.shell-page .rng-topbar .rng-icon-btn {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: inline-grid !important;
        place-items: center !important;
        justify-self: end;
    }

    .rng-rank-hud,
    .rng-topbar-stats {
        display: none !important;
    }

    .rng-game-shell,
    .rng-app {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding: 0 !important;
    }

    .rng-stage,
    .rng-sidebar,
    .rng-panel,
    .rng-shop-grid,
    .rng-quick-stats {
        width: 100%;
        max-width: 100%;
    }

    .rng-stage,
    .rng-sidebar {
        border-radius: 20px !important;
        padding: 14px !important;
    }

    .rng-page.shell-page .rng-equipped-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px;
        align-items: center;
        gap: 8px;
        padding: 10px !important;
    }

    .rng-page.shell-page .rng-equipped-bar .rng-btn {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: inline-grid !important;
        place-items: center !important;
        justify-self: end;
    }

    .rng-page.shell-page .rng-equipped-name,
    .rng-page.shell-page .rng-equipped-meta {
        white-space: normal;
    }

    .rng-page.shell-page .rng-roll-stage {
        min-height: 132px;
        padding: 18px 14px !important;
    }

    .rng-action-row {
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        gap: 6px;
    }

    .rng-roll-display {
        font-size: clamp(25px, 7vw, 32px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere;
    }

    .rng-quick-stats,
    .rng-shop-grid,
    .rng-collection-grid,
    .rng-upgrade-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 560px) {
    body.home-v3-page .home-v3-shell,
    body.shell-page,
    body.mode-v3-page,
    body.rng-page {
        gap: 10px;
    }

    body.home-v3-page .home-v3-left,
    body.home-v3-page .home-v3-right {
        padding: 10px;
        border-radius: 16px;
    }

    body.home-v3-page .home-v3-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    body.home-v3-page .home-v3-nav a,
    body.home-v3-page .home-v3-nav button {
        min-height: 40px;
        font-size: 9.5px;
        padding: 6px 3px;
    }

    body.home-v3-page .home-v3-hero {
        min-height: 402px;
        padding: 18px 14px 132px;
        border-radius: 18px;
    }

    body.home-v3-page .home-v3-hero h1 {
        font-size: clamp(38px, 15vw, 50px);
    }

    body.home-v3-page .home-v3-shark-bg {
        right: -30%;
        bottom: -12px;
    }

    body.home-v3-page .home-v3-shark-fg {
        right: -34%;
        bottom: -6px;
    }

    body.home-v3-page .home-v3-mode-card {
        min-height: 126px;
        padding: 14px;
    }

    body.home-v3-page .home-v3-mode-card strong {
        font-size: 23px;
    }

    .navbar nav,
    .navbar > div:last-child,
    .auth-container,
    .shell-page .auth-container,
    .shell-page nav {
        grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    }

    .nav-btn span {
        display: inline;
    }

    .hero,
    .hero-card,
    .pass-hero-shell,
    .story-map-hero,
    .leaderboard-hero,
    .library-hero {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .pass-stat-grid,
    .leaderboard-stats,
    .library-stats,
    .stats-grid,
    .stats-detail,
    .friends-stats {
        grid-template-columns: 1fr !important;
    }

    .story-mission-card-head,
    .story-boss-phase-head,
    .story-species-card-top,
    .friend-item {
        display: grid !important;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    body.home-v3-page .home-v3-logo strong {
        font-size: 21px;
    }

    body.home-v3-page .home-v3-nav a span,
    body.home-v3-page .home-v3-nav button span {
        font-size: 8.5px;
    }

    body.home-v3-page .home-v3-nav a,
    body.home-v3-page .home-v3-nav button {
        min-height: 40px;
        padding: 5px 2px;
    }

    body.home-v3-page .home-v3-hero {
        min-height: 382px;
        padding-bottom: 118px;
    }

    body.home-v3-page .hero-subtitle {
        font-size: 14px;
    }

    .navbar nav,
    .navbar > div:last-child,
    .auth-container,
    .shell-page .auth-container,
    .shell-page nav {
        grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
        gap: 5px;
    }

    .nav-btn,
    .auth-btn,
    .home-btn,
    .shell-page .nav-btn,
    .shell-page button:not(.pass-tab-btn):not(.home-v3-nav button):not(.leaderboard-range-btn) {
        min-height: 40px !important;
        padding: 7px 5px !important;
        font-size: 11px !important;
    }
}

/* Final mobile locker containment pass for the packaged Android app. */
@media (max-width: 720px) {
    body.home-v3-page .home-v3-hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.home-v3-page .home-v3-download-btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 42px;
        padding: 9px 8px;
        font-size: 13px;
        line-height: 1.1;
        border-radius: 12px;
    }

    body.home-v3-page #profileModal.profile-game-backdrop:not(.hidden) {
        padding: 10px !important;
    }

    body.home-v3-page .profile-overhaul-modal {
        width: min(100%, 620px) !important;
        height: min(100svh - 20px, 760px) !important;
        max-height: calc(100svh - 20px) !important;
        overflow: hidden !important;
    }

    body.home-v3-page .profile-overhaul-main {
        padding: 12px !important;
    }

    body.home-v3-page .profile-inventory-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.home-v3-page .profile-inventory-tabs button {
        min-height: 38px !important;
        padding: 6px 5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    body.home-v3-page .profile-cosmetic-filters {
        padding: 8px 10px 0 !important;
        gap: 5px !important;
    }

    body.home-v3-page .profile-cosmetic-filters button {
        min-height: 30px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    body.home-v3-page .profile-cosmetic-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
        max-height: none !important;
        overflow-x: hidden !important;
    }

    body.home-v3-page .profile-inventory-card,
    body.home-v3-page #theme-select-container .theme-option {
        min-height: 138px !important;
        display: grid !important;
        grid-template-rows: auto minmax(30px, auto) auto !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 5px !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    body.home-v3-page .profile-inventory-card img,
    body.home-v3-page .profile-inventory-card .badge-mark {
        width: 50px !important;
        height: 50px !important;
        margin: 6px auto 0 !important;
    }

    body.home-v3-page .profile-inventory-card span:not(.badge-mark),
    body.home-v3-page #theme-select-container .theme-option span:last-child {
        width: 100% !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    body.home-v3-page .cosmetic-chip-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        gap: 3px !important;
    }

    body.home-v3-page .source-chip {
        width: min(100%, 94px) !important;
        max-width: 94px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.home-v3-page .profile-inventory-card.equipped::after,
    body.home-v3-page #theme-select-container .theme-option.active::after {
        top: 5px !important;
        right: 5px !important;
        max-width: calc(100% - 10px) !important;
        padding: 3px 5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 8px !important;
    }
}

@media (max-width: 390px) {
    body.home-v3-page .profile-inventory-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.home-v3-page .profile-inventory-card,
    body.home-v3-page #theme-select-container .theme-option {
        min-height: 132px !important;
        padding: 9px !important;
    }
}

/* Website and app mobile finish pass: balanced controls, stable cards, and calmer narrow screens. */
@media (max-width: 720px) {
    body.home-v3-page .home-v3-left {
        gap: 10px;
    }

    body.home-v3-page .home-v3-logo {
        min-height: 46px;
        align-items: center;
    }

    body.home-v3-page .home-v3-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: visible;
        padding-bottom: 0;
    }

    body.home-v3-page .home-v3-nav a,
    body.home-v3-page .home-v3-nav button {
        min-height: 46px;
        padding: 7px 4px;
        gap: 4px;
        font-size: 10px;
    }

    body.home-v3-page .home-v3-quick-access {
        border-radius: 16px;
    }

    body.home-v3-page .home-v3-quick-link {
        min-height: 56px;
        border-radius: 12px;
    }

    body.home-v3-page .home-v3-hero {
        min-height: 420px;
        padding-top: 20px;
    }

    body.home-v3-page .home-v3-hero h1,
    body.mode-v3-page .guess-hero h2 {
        font-size: 44px !important;
        line-height: 0.94 !important;
    }

    body.home-v3-page .home-v3-hero-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.home-v3-page .home-v3-download-btn {
        grid-column: 1 / -1;
    }

    body.home-v3-page .hero-alert {
        display: grid;
        gap: 8px;
        text-align: center;
    }

    body.home-v3-page .hero-alert button {
        width: 100%;
        min-height: 40px;
    }

    body.home-v3-page .home-v3-panel-heading {
        margin-bottom: 10px;
    }

    body.home-v3-page .home-v3-mode-card {
        min-height: 130px;
        padding: 15px;
        border-radius: 16px;
    }

    body.home-v3-page .home-v3-mode-card strong {
        font-size: 24px !important;
        line-height: 0.98;
    }

    body.mode-v3-page .mode-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    body.mode-v3-page .mode-tabs button {
        min-width: 0;
        min-height: 40px;
        padding: 8px 6px;
        font-size: 12px;
        white-space: normal;
    }

    .rng-tabs,
    .rng-tab-row,
    .rng-sidebar-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .rng-tab,
    .rng-sidebar-tab {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 8px 4px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.05 !important;
        border-radius: 11px !important;
        font-size: 11px !important;
    }

    .rng-tabs > :last-child:nth-child(3n + 1),
    .rng-tab-row > :last-child:nth-child(3n + 1),
    .rng-sidebar-tabs > :last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 390px) {
    body.home-v3-page .home-v3-nav {
        gap: 5px !important;
    }

    body.home-v3-page .home-v3-nav a,
    body.home-v3-page .home-v3-nav button {
        min-height: 44px;
        font-size: 9px;
    }

    body.home-v3-page .home-v3-hero h1,
    body.mode-v3-page .guess-hero h2 {
        font-size: 40px !important;
    }

    .rng-tabs,
    .rng-tab-row,
    .rng-sidebar-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .rng-tabs > :last-child:nth-child(odd),
    .rng-tab-row > :last-child:nth-child(odd),
    .rng-sidebar-tabs > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    body.rng-page .rng-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 0 !important;
        width: 100% !important;
    }

    body.rng-page .rng-tabs .rng-tab {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 8px 4px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 390px) {
    body.rng-page .rng-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Shark RNG gets a purpose-built phone layout. Keep the roll loop visible and make the shop feel native. */
@media (max-width: 720px) {
    body.rng-page *,
    body.rng-page *::before,
    body.rng-page *::after {
        box-sizing: border-box;
    }

    body.rng-page.shell-page {
        padding: max(10px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
        background:
            radial-gradient(ellipse 115% 42% at 50% -12%, rgba(45, 212, 191, 0.18), transparent 58%),
            linear-gradient(180deg, #06233a 0%, #071827 54%, #04111e 100%) !important;
    }

    body.rng-page .rng-topbar {
        min-height: 58px !important;
        margin-bottom: 8px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        grid-template-columns: minmax(0, 1fr) 40px 40px !important;
        background: rgba(3, 12, 22, 0.9) !important;
    }

    body.rng-page .rng-brand {
        font-size: 21px !important;
        line-height: 1 !important;
    }

    body.rng-page .rng-icon-btn,
    body.rng-page .rng-page.shell-page .rng-icon-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 12px !important;
    }

    body.rng-page .rng-game-shell,
    body.rng-page .rng-app {
        gap: 8px !important;
        grid-template-rows: auto auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        min-width: 0 !important;
    }

    body.rng-page .rng-stage,
    body.rng-page .rng-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }

    body.rng-page .rng-stage {
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
    }

    body.rng-page .rng-equipped-bar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        grid-template-columns: minmax(0, 1fr) 38px !important;
    }

    body.rng-page .rng-label {
        font-size: 10px !important;
    }

    body.rng-page .rng-equipped-name {
        font-size: 17px !important;
        line-height: 1.05 !important;
    }

    body.rng-page .rng-equipped-meta {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    body.rng-page .rng-equipped-bar .rng-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 11px !important;
    }

    body.rng-page .rng-roll-stage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        height: 112px !important;
        min-height: 112px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    body.rng-page .rng-roll-display {
        font-size: 28px !important;
        line-height: 1 !important;
    }

    body.rng-page .rng-buff-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 26px !important;
        padding: 4px 8px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }

    body.rng-page .rng-action-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body.rng-page .rng-action-row > :last-child:not(:nth-child(2)) {
        grid-column: 1 / -1;
    }

    body.rng-page .rng-btn,
    body.rng-page .rng-btn-roll {
        min-height: 42px !important;
        border-radius: 12px !important;
    }

    body.rng-page .rng-quick-stats {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.rng-page .rng-quick-stat {
        min-height: 50px !important;
        padding: 7px 4px !important;
        border-radius: 11px !important;
    }

    body.rng-page .rng-quick-stat span {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    body.rng-page .rng-quick-stat strong {
        font-size: 13px !important;
        line-height: 1.05 !important;
    }

    body.rng-page .rng-sidebar {
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.rng-page .rng-tabs {
        display: flex !important;
        gap: 7px !important;
        width: calc(100% + 20px) !important;
        margin: 0 -10px !important;
        padding: 0 10px 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.rng-page .rng-tabs::-webkit-scrollbar {
        display: none;
    }

    body.rng-page .rng-tabs .rng-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 92px !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        scroll-snap-align: start;
        white-space: nowrap !important;
        font-size: 11px !important;
        border: 1px solid rgba(94, 234, 212, 0.2) !important;
        background: rgba(5, 24, 38, 0.82) !important;
    }

    body.rng-page .rng-tabs .rng-tab.active {
        color: #05202b !important;
        background: linear-gradient(135deg, #67e8f9, #22c55e) !important;
        border-color: rgba(167, 243, 208, 0.76) !important;
    }

    body.rng-page .rng-tab-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.rng-page .rng-upgrade-scroll,
    body.rng-page .rng-quests-panel,
    body.rng-page .rng-prestige-panel,
    body.rng-page .rng-rarities-panel,
    body.rng-page .rng-leaderboard-panel {
        padding-right: 0 !important;
    }

    body.rng-page .rng-upgrade-card,
    body.rng-page .rng-quest-card,
    body.rng-page .rng-potion-card {
        border-radius: 13px !important;
        padding: 10px !important;
    }
}

@media (max-width: 390px) {
    body.rng-page .rng-quick-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.rng-page .rng-tabs .rng-tab {
        min-width: 86px !important;
        padding-inline: 10px !important;
    }
}