/* ─────────────────────────────────────────────────────────────────────────
   Mobile Riot-style restyle — Profile, Social, Settings.
   Scoped to html[data-platform="native"] so desktop is untouched.
   Palette pulled from menu.css: --red #E94B3C, --bg #101527, --text #d8d9df
   ───────────────────────────────────────────────────────────────────────── */

/* Skeleton shimmer colors — warmer/subtler, Riot-like dark gray pulse */
html[data-platform="native"] .skeleton-block {
    background: linear-gradient(
        90deg,
        #15182a 25%,
        #1f2338 50%,
        #15182a 75%
    ) !important;
    background-size: 1200px 100% !important;
    border-radius: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILE PAGE  (data-mob-tab="profile")
   ══════════════════════════════════════════════════════════════════════════ */

/* Kill the sidebar — we use bottom nav instead */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-sidebar {
    display: none !important;
}

/* Full-screen modal */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 68px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: #060816 !important;
    box-shadow: none !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

html[data-platform="native"] body[data-mob-tab="profile"] .profile-main {
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Top header — big "Profile" title + gear */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-head {
    padding: 18px 20px 14px !important;
    background: transparent !important;
    border-bottom: none !important;
    position: relative !important;
    flex-shrink: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-head > div h3,
html[data-platform="native"] body[data-mob-tab="profile"] #profilePopupTitle {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #f1f3f8 !important;
    text-transform: none !important;
    margin: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-sub,
html[data-platform="native"] body[data-mob-tab="profile"] #profilePopupSub {
    display: none !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-close {
    display: none !important;
}

/* Gear icon top-right */
html[data-platform="native"] body[data-mob-tab="profile"] .mob-profile-gear-btn {
    display: flex !important;
    position: absolute !important;
    right: 18px !important;
    top: 20px !important;
    width: 30px !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #f1f3f8 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .mob-profile-gear-btn svg {
    width: 26px !important;
    height: 26px !important;
}

/* Scrollable content area */
html[data-platform="native"] body[data-mob-tab="profile"] #profileContent {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide pieces of the existing desktop overview layout that don't fit the Riot look */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-showcase,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-banner,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-mini-metrics {
    display: none !important;
}

/* Overview card: stacked flex, transparent */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-overview-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-creative-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* ─ Injected banner backdrop (mobile-riot.js adds .rm-banner) ─ */
html[data-platform="native"] .rm-banner {
    position: relative;
    width: 100%;
    height: 180px;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(233,75,60,0.28), transparent 60%),
        radial-gradient(ellipse at 75% 60%, rgba(185,190,202,0.18), transparent 55%),
        linear-gradient(180deg, #1a1f3a 0%, #0e1122 100%);
    overflow: hidden;
    margin-bottom: 0;
}
html[data-platform="native"] .rm-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(6,8,22,0.95) 100%);
    pointer-events: none;
}
html[data-platform="native"] .rm-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, transparent 48%, rgba(233,75,60,0.06) 50%, transparent 52%),
        linear-gradient(-135deg, transparent 48%, rgba(233,75,60,0.04) 50%, transparent 52%);
    background-size: 80px 80px;
    opacity: 0.6;
    pointer-events: none;
}

/* ─ Totem card restyle: becomes overlap avatar + name block ─ */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-totem-card {
    position: relative !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: none !important;
    margin-top: -66px !important;
    z-index: 2 !important;
}

/* Rank emblem as avatar — big circular with border */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-emblem-wrap {
    width: 126px !important;
    height: 126px !important;
    position: relative !important;
    margin: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-emblem {
    width: 126px !important;
    height: 126px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background-color: #15182a !important;
    background-image: none;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 4px solid #060816 !important;
    font-size: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    color: #f1f3f8 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
/* Online status dot on avatar — positioned bottom-LEFT to not conflict with edit button at bottom-right */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-emblem-wrap::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2ecc71;
    border: 3px solid #060816;
    box-shadow: 0 0 8px rgba(46,204,113,0.6);
    z-index: 2;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-avatar-edit-btn {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 32px !important;
    height: 32px !important;
    background: #e94b3c !important;
    color: #fff !important;
    border: 3px solid #060816 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 3 !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Name row: big username + # tag */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-totem-name {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-totem-name-text {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #f1f3f8 !important;
    letter-spacing: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .rm-user-tag {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: rgba(215,217,224,0.45);
    margin-left: 2px;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-name-action-group .profile-inline-icon-btn.name-pen {
    background: transparent !important;
    color: rgba(215,217,224,0.4) !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
}

/* Online status line */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-totem-rank {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 16px !important;
    color: rgba(215,217,224,0.65) !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* "Set a status" pill (injected) */
html[data-platform="native"] .rm-status-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 40px);
    margin: 14px 20px 0;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(166,168,177,0.14);
    border-radius: 12px;
    color: rgba(215,217,224,0.5);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
html[data-platform="native"] .rm-status-pill svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-platform="native"] .rm-status-pill:active {
    background: rgba(255,255,255,0.07);
}

/* Divider under status pill */
html[data-platform="native"] .rm-divider {
    height: 1px;
    background: rgba(166,168,177,0.1);
    margin: 22px 20px 20px;
}

/* Section label */
html[data-platform="native"] .rm-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #f1f3f8;
    padding: 0 20px 12px;
    letter-spacing: 0;
}

/* Match cards (injected as .rm-match-grid > .rm-match-card) */
html[data-platform="native"] .rm-match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px;
}
html[data-platform="native"] .rm-match-card {
    position: relative;
    aspect-ratio: 9 / 13;
    border-radius: 14px;
    background:
        linear-gradient(180deg, transparent 0%, rgba(6,8,22,0.75) 100%),
        linear-gradient(135deg, #2a1e2e 0%, #1a1226 100%);
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid rgba(166,168,177,0.1);
}
html[data-platform="native"] .rm-match-card.win {
    background:
        linear-gradient(180deg, transparent 0%, rgba(6,8,22,0.75) 100%),
        linear-gradient(135deg, #1a3d35 0%, #0f2420 100%);
}
html[data-platform="native"] .rm-match-card.loss {
    background:
        linear-gradient(180deg, transparent 0%, rgba(6,8,22,0.75) 100%),
        linear-gradient(135deg, #3d1a26 0%, #240f18 100%);
}
html[data-platform="native"] .rm-match-card.draw {
    background:
        linear-gradient(180deg, transparent 0%, rgba(6,8,22,0.75) 100%),
        linear-gradient(135deg, #2a2a3a 0%, #1a1a24 100%);
}
html[data-platform="native"] .rm-match-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 40%, rgba(233,75,60,0.1), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(185,190,202,0.08), transparent 50%);
}
html[data-platform="native"] .rm-match-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(10,12,22,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e94b3c;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    z-index: 2;
}
html[data-platform="native"] .rm-match-result {
    position: absolute;
    bottom: 52px;
    left: 12px;
    background: #e94b3c;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    z-index: 2;
}
html[data-platform="native"] .rm-match-card.win .rm-match-result {
    background: #2ecc71;
}
html[data-platform="native"] .rm-match-card.draw .rm-match-result {
    background: #6b7280;
}
html[data-platform="native"] .rm-match-mode {
    position: absolute;
    bottom: 28px;
    left: 12px;
    right: 12px;
    color: #f1f3f8;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    z-index: 2;
    line-height: 1.1;
}
html[data-platform="native"] .rm-match-date {
    position: absolute;
    bottom: 10px;
    left: 12px;
    color: rgba(215,217,224,0.55);
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}
html[data-platform="native"] .rm-match-date::before {
    content: '';
    width: 11px;
    height: 11px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b909c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Match History button */
html[data-platform="native"] .rm-match-history-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 18px 20px 24px;
    padding: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(166,168,177,0.14);
    border-radius: 12px;
    color: #f1f3f8;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
html[data-platform="native"] .rm-match-history-btn::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: -3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e94b3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
html[data-platform="native"] .rm-match-history-btn:active {
    background: rgba(255,255,255,0.08);
}

/* Hide the right-stack rank-logo-slot (shown up top now) + desktop stat grid (we show match cards instead) */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-rank-logo-slot,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-stat-grid {
    display: none !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-right-stack {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SOCIAL PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* Title row — make room for QR + kebab icons at right (existing .social-panel-head) */
html[data-platform="native"] body[data-mob-tab="social"] .social-panel-head {
    padding: 8px 4px 14px !important;
    border-bottom: none !important;
    justify-content: space-between !important;
    align-items: center !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .mob-social-title {
    font-size: 34px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    flex: 1 !important;
}

/* Tabs — underline active, Riot style */
html[data-platform="native"] body[data-mob-tab="social"] .social-tabs {
    border-bottom: 1px solid rgba(166,168,177,0.14) !important;
    padding: 0 4px !important;
    gap: 18px !important;
    background: transparent !important;
    margin: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-tab {
    padding: 12px 2px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(215,217,224,0.55) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    position: relative !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-tab.active {
    color: #f1f3f8 !important;
    border-bottom-color: #e94b3c !important;
    background: transparent !important;
}

/* Search bar — pill full width */
html[data-platform="native"] body[data-mob-tab="social"] .social-search-wrap {
    margin: 14px 0 !important;
    padding: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-search-wrap input {
    width: 100% !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(166,168,177,0.12) !important;
    border-radius: 12px !important;
    padding: 14px 16px 14px 46px !important;
    color: #f1f3f8 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    height: auto !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-search-wrap input::placeholder {
    color: rgba(215,217,224,0.45) !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-search-icon {
    left: 16px !important;
    color: rgba(215,217,224,0.45) !important;
}

/* Section label "Online 4" / "Offline 56" with chevron */
html[data-platform="native"] body[data-mob-tab="social"] .social-friends-section-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 4px 10px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(215,217,224,0.85) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    border: none !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friends-section-label::after {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d9df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 15l-6-6-6 6'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
}

/* Friend row — styled like menu mode cards */
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-item {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(166,168,177,0.18) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    transition: background 0.18s !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-item:active {
    background: rgba(255,255,255,0.08) !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-user {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-avatar-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-avatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background-color: #15182a !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    font-size: 22px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    color: rgba(215,217,224,0.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-presence-dot {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #5a6270 !important;
    border: 3px solid #060816 !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-presence-dot.online {
    background: #2ecc71 !important;
}

/* Meta lines */
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-meta {
    min-width: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-meta strong {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #f1f3f8 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-meta > span:nth-of-type(1) {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    color: rgba(215,217,224,0.55) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
/* device icon inline with status */
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-meta > span:nth-of-type(1)::before {
    content: '';
    width: 11px;
    height: 15px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b909c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2' ry='2'/><line x1='12' y1='18' x2='12.01' y2='18'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
/* append "- Khet 2.0" via ::after when online */
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-item[data-hover-status="Online"] .social-friend-meta > span:nth-of-type(1)::after {
    content: ' - Khet 2.0';
    color: rgba(215,217,224,0.55);
    white-space: pre;
}
/* hide the "rank - LVL" subline — Riot shows game name instead */
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-subline {
    display: none !important;
}

/* Actions — compact challenge pill on the right */
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-actions {
    flex-shrink: 0 !important;
    margin-left: 10px !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    background: rgba(233,75,60,0.15) !important;
    color: #f1f3f8 !important;
    border: 1px solid rgba(233,75,60,0.35) !important;
    border-radius: 8px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-btn:disabled {
    background: rgba(255,255,255,0.04) !important;
    color: rgba(215,217,224,0.35) !important;
    border-color: rgba(166,168,177,0.1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS OVERLAY (native)
   ══════════════════════════════════════════════════════════════════════════ */

html[data-platform="native"] .settings-overlay.visible {
    background: #060816 !important;
    padding: 0 !important;
}
html[data-platform="native"] .settings-overlay .settings-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    background: #060816 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
html[data-platform="native"] .settings-overlay .settings-head {
    padding: 18px 20px 20px !important;
    background: transparent !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
html[data-platform="native"] .settings-overlay .settings-close {
    background: transparent !important;
    border: none !important;
    color: #f1f3f8 !important;
    padding: 4px !important;
    width: 32px !important;
    height: 32px !important;
}
html[data-platform="native"] .settings-overlay #settingsTitle {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #f1f3f8 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html[data-platform="native"] .settings-overlay .settings-sub {
    display: none !important;
}
html[data-platform="native"] .settings-overlay .settings-body {
    padding: 12px 0 !important;
    background: transparent !important;
}
html[data-platform="native"] .settings-overlay .settings-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(166,168,177,0.08) !important;
    border-radius: 0 !important;
}
html[data-platform="native"] .settings-overlay .settings-icon {
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    border: none !important;
    color: #e94b3c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
html[data-platform="native"] .settings-overlay .settings-icon svg {
    width: 24px !important;
    height: 24px !important;
}
html[data-platform="native"] .settings-overlay .settings-icon.settings-icon-danger {
    color: #e94b3c !important;
}
html[data-platform="native"] .settings-overlay .settings-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #f1f3f8 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html[data-platform="native"] .settings-overlay .settings-note {
    display: none !important;
}
html[data-platform="native"] .settings-overlay .settings-chevron {
    color: rgba(215,217,224,0.45) !important;
    width: 18px !important;
    height: 18px !important;
    margin-left: auto !important;
}

/* Toggles as Riot-style red rounded rectangles */
html[data-platform="native"] .settings-overlay .settings-toggle {
    margin-left: auto !important;
    width: 52px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(233,75,60,0.25) !important;
    border: 1px solid rgba(233,75,60,0.5) !important;
    position: relative !important;
    font-size: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    transition: background 0.18s !important;
}
html[data-platform="native"] .settings-overlay .settings-toggle::after {
    content: '';
    width: 22px;
    height: 22px;
    background: #e94b3c;
    border-radius: 5px;
    margin-right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.18s;
}
html[data-platform="native"] .settings-overlay .settings-toggle[aria-pressed="false"] {
    background: rgba(166,168,177,0.1) !important;
    border-color: rgba(166,168,177,0.2) !important;
    justify-content: flex-start !important;
}
html[data-platform="native"] .settings-overlay .settings-toggle[aria-pressed="false"]::after {
    background: rgba(215,217,224,0.3);
    background-image: none;
    margin-left: 3px;
    margin-right: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   FIX PACK — overflow clipping, match card placeholders, ranks layout
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Kill overflow:hidden on profile containers so avatar can escape banner */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-overview-card,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-totem-card,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-creative-layout,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-right-stack {
    overflow: visible !important;
}

/* 2. Neutralize the existing `::before` banner + decorative ::after ring */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-overview-card::before,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-overview-card::after,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-totem-card::before,
html[data-platform="native"] body[data-mob-tab="profile"] .profile-totem-card::after {
    display: none !important;
    content: none !important;
}

/* 3. Match card "no game" placeholder layout — center, don't overlap */
html[data-platform="native"] .rm-match-card.draw .rm-match-result {
    display: none;
}
html[data-platform="native"] .rm-match-card.draw .rm-match-mode {
    bottom: auto;
    top: 50%;
    left: 12px;
    right: 12px;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: rgba(215,217,224,0.75);
    text-align: center;
    line-height: 1.3;
}
html[data-platform="native"] .rm-match-card.draw .rm-match-date {
    display: none;
}

/* 4. Ensure the totem wrap size is predictable */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-emblem-wrap {
    width: 126px !important;
    height: 126px !important;
    margin: 0 !important;
}

/* Hide the "profile-inline-note" cooldown line on native — keeps the area clean */
html[data-platform="native"] body[data-mob-tab="profile"] .profile-inline-note:empty {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DEDICATED RANKS PANEL  (#mobRanksPanel)
   Shown when body[data-mob-tab="ranks"] on native, completely separate from profile overlay.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide gear button everywhere except profile tab */
html[data-platform="native"] body:not([data-mob-tab="profile"]) .mob-profile-gear-btn,
html[data-platform="native"] body:not([data-mob-tab="profile"]) #mobProfileSettingsBtn {
    display: none !important;
}

/* Hide user card inside ranks panel on mobile */
html[data-platform="native"] #mobRanksUserCard {
    display: none !important;
}

/* Ranks panel — hidden by default, full screen when active */
#mobRanksPanel {
    display: none;
}

html[data-platform="native"] #mobRanksPanel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    background: #060816;
    z-index: 600;
    flex-direction: column;
    overflow: hidden;
}

html[data-platform="native"] body[data-mob-tab="ranks"] #mobRanksPanel {
    display: flex;
}

/* Panel header */
.mob-ranks-head {
    padding: 18px 20px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(166,168,177,0.1);
}

.mob-ranks-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #f1f3f8;
    letter-spacing: 0.02em;
}

/* User stat boxes */
.mob-ranks-user-card {
    padding: 16px 16px 8px;
    flex-shrink: 0;
}

.mob-ranks-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.mob-ranks-stat-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(166,168,177,0.12);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mob-ranks-stat-box.mob-ranks-stat-red {
    background: rgba(233,75,60,0.12);
    border-color: rgba(233,75,60,0.3);
}

.mob-ranks-stat-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 600;
    color: #f1f3f8;
    line-height: 1;
}

.mob-ranks-stat-box.mob-ranks-stat-red .mob-ranks-stat-val {
    color: #e94b3c;
}

.mob-ranks-stat-lbl {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(215,217,224,0.5);
    text-transform: uppercase;
}

/* Profile card */
.mob-ranks-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(166,168,177,0.1);
    border-radius: 14px;
    padding: 14px 16px;
}

.mob-ranks-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(233,75,60,0.15);
    border: 2px solid rgba(233,75,60,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.mob-ranks-profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mob-ranks-username {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #f1f3f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mob-ranks-rank-badge {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #e94b3c;
    letter-spacing: 0.04em;
}

.mob-ranks-mini-stats {
    display: flex;
    gap: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(215,217,224,0.5);
    letter-spacing: 0.04em;
    flex-wrap: wrap;
}

/* Leaderboard content area */
.mob-ranks-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 16px;
    -webkit-overflow-scrolling: touch;
}

.mob-ranks-loading {
    text-align: center;
    padding: 40px 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    color: rgba(215,217,224,0.5);
}

/* Placement styles inside ranks content */
html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
    grid-template-columns: none;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-tier-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 14px 0 12px;
    margin: 0;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(166,168,177,0.1);
}
html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-tier-tabs::-webkit-scrollbar {
    display: none;
}
html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-tier-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(166,168,177,0.12);
    border-radius: 999px;
    color: rgba(215,217,224,0.6);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-tier-tab.active {
    background: rgba(233,75,60,0.2);
    border-color: rgba(233,75,60,0.5);
    color: #f1f3f8;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-emblem-panel {
    order: 1;
    width: 100%;
    min-height: 200px;
    padding: 20px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(233,75,60,0.18), transparent 65%),
        linear-gradient(180deg, #15192b 0%, #0d1022 100%);
    border: 1px solid rgba(166,168,177,0.12);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-emblem-combo {
    display: none;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-emblem-wrap {
    text-align: center;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-emblem-svg {
    width: 120px;
    height: auto;
    margin: 0 auto;
    display: block;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-emblem-rank {
    font-family: 'Rajdhani', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #f1f3f8;
    margin-top: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-emblem-sub {
    font-size: 12px;
    color: rgba(215,217,224,0.5);
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-board {
    order: 2;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-group {
    padding: 0;
    background: transparent;
    border: none;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-group h5 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #f1f3f8;
    padding: 0 0 12px;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-head-row {
    display: grid;
    grid-template-columns: 48px 1fr 80px;
    gap: 10px;
    padding: 10px 14px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(215,217,224,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(166,168,177,0.1);
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-scroll-body {
    max-height: none;
    overflow: visible;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-row {
    display: grid;
    grid-template-columns: 48px 1fr 80px;
    gap: 10px;
    padding: 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(166,168,177,0.06);
    border-radius: 0;
    color: #f1f3f8;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    align-items: center;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-row.current-user {
    background: rgba(233,75,60,0.08);
    border-left: 3px solid #e94b3c;
    padding-left: 11px;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-rank {
    color: rgba(215,217,224,0.6);
    font-weight: 600;
    font-size: 14px;
    background: transparent;
    padding: 0;
}

html[data-platform="native"] body[data-mob-tab="ranks"] .mob-ranks-content .placement-elo {
    text-align: right;
    color: #e94b3c;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FIX PACK v2
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Profile overlay must fill screen — body is display:flex justify-content:center,
      so without explicit width the overlay shrinks to content size (red laser field bleeds through the gaps).
      Also kill remaining 16px padding from menu.css line 7130/7647.
      justify-content/align-items reset ensures profile-modal anchors to the top, not centered
      in a taller-than-viewport overlay. */
html[data-platform="native"] body[data-mob-tab="profile"] #profileOverlay {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    /* Clamp overlay to exactly viewport-minus-nav. Overrides the menu.css
       min-height hack (line 7678) that stretches it far beyond the screen. */
    top: 0 !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    align-self: unset !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #060816 !important;
    backdrop-filter: none !important;
}
html[data-platform="native"] body[data-mob-tab="profile"] .profile-modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. Settings close button — hide the inline SVG so the existing ::before arrow doesn't double up */
html[data-platform="native"] .settings-overlay .settings-close svg,
html[data-platform="native"] #closeSettingsBtn svg {
    display: none !important;
}

/* 4. Social: more breathing room between avatar and username */
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-user {
    gap: 18px !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-meta {
    padding-left: 4px !important;
}

/* 5. Presence dot — cleanly at bottom-right of avatar, small, no overlap with icon */
html[data-platform="native"] body[data-mob-tab="social"] .social-friend-avatar-wrap {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    flex-shrink: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-presence-dot {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #5a6270 !important;
    border: 2px solid #060816 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
html[data-platform="native"] body[data-mob-tab="social"] .social-presence-dot.online {
    background: #2ecc71 !important;
}

/* 6. Direct chat — remove socialPanel padding so chat fills full screen width */
html[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) {
    padding: 0 !important;
}
html[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) .social-panel-head,
html[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) .social-tabs,
html[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) > .social-view:not(#socialDirectChatView) {
    display: none !important;
}

/* Chat header edge-to-edge */
html[data-platform="native"] .social-direct-chat-head {
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid rgba(166,168,177,0.12) !important;
    background: #0a0d1a !important;
    gap: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHAT MORE-BTN DROPDOWN MENU — Profile / Block
   ══════════════════════════════════════════════════════════════════════════ */

html[data-platform="native"] .social-chat-more-btn {
    position: relative !important;
}
html[data-platform="native"] .rm-chat-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 10px;
    min-width: 170px;
    background: #15182a;
    border: 1px solid rgba(166,168,177,0.18);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.6);
    z-index: 9999;
    overflow: hidden;
    display: none;
    font-family: 'Rajdhani', sans-serif;
}
html[data-platform="native"] .rm-chat-menu.open {
    display: block;
}
html[data-platform="native"] .rm-chat-menu button {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: #f1f3f8;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
}
html[data-platform="native"] .rm-chat-menu button:active {
    background: rgba(255,255,255,0.06);
}
html[data-platform="native"] .rm-chat-menu button + button {
    border-top: 1px solid rgba(166,168,177,0.08);
}
html[data-platform="native"] .rm-chat-menu button.danger {
    color: #e94b3c;
}
html[data-platform="native"] .rm-chat-menu svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MISSIONS / ACHIEVEMENTS / HISTORY  (data-mob-tab="missions")
   Full-screen Riot-style page matching the social panel palette.
   ══════════════════════════════════════════════════════════════════════════ */

/* Full-screen overlay — fill exactly viewport minus bottom nav */
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-overlay {
    position: fixed !important;
    inset: 0 !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    background: #060816 !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    z-index: 800 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Modal: full-height single column — no sidebar grid */
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    background: #060816 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Hide the desktop sidebar */
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-sidebar {
    display: none !important;
}

/* Header: big Riot-style title */
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-head {
    padding: 18px 20px 14px !important;
    background: transparent !important;
    border-bottom: none !important;
    flex-shrink: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-head h3 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #f1f3f8 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    margin: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-sub {
    display: none !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-close {
    display: none !important;
}

/* Tab bar — underline style matching social tabs */
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 0 20px !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* Inject a horizontal tab row from the hidden sidebar tabs */
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-sidebar {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    padding: 0 20px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(166,168,177,0.14) !important;
    background: transparent !important;
    flex-shrink: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-sidebar::-webkit-scrollbar {
    display: none !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-title {
    display: none !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objective-tab {
    padding: 12px 18px !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(215,217,224,0.55) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objective-tab.active {
    color: #f1f3f8 !important;
    border-bottom-color: #e94b3c !important;
    background: transparent !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objective-tab:hover {
    color: #f1f3f8 !important;
    background: transparent !important;
    border-color: transparent !important;
    border-bottom-color: rgba(233,75,60,0.4) !important;
}

/* Daily bonus strip */
html[data-platform="native"] body[data-mob-tab="missions"] #objectivesBonus {
    margin: 12px 0 !important;
    border-radius: 12px !important;
}

/* List — scrollable content area */
html[data-platform="native"] body[data-mob-tab="missions"] .objectives-list {
    flex: 1 !important;
    padding: 10px 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
}

/* Objective row — column card layout on mobile */
html[data-platform="native"] body[data-mob-tab="missions"] .objective-row {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(166,168,177,0.12) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    min-height: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    grid-template-columns: none !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .objective-row:active {
    background: rgba(255,255,255,0.07) !important;
}

/* Progress ring — sits at top of card */
html[data-platform="native"] body[data-mob-tab="missions"] .row-progress {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    color: #f1f3f8 !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(166,168,177,0.12) !important;
}

/* Middle content block — takes remaining space */
html[data-platform="native"] body[data-mob-tab="missions"] .objective-row > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

html[data-platform="native"] body[data-mob-tab="missions"] .row-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f1f3f8 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .row-body {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    color: rgba(215,217,224,0.55) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .row-meta {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(215,217,224,0.4) !important;
    margin-top: 2px !important;
}

/* Reward pill — right side of the row */
html[data-platform="native"] body[data-mob-tab="missions"] .row-reward {
    padding: 6px 16px 6px 12px !important;
    background: rgba(233,75,60,0.12) !important;
    border: 1px solid rgba(233,75,60,0.3) !important;
    border-radius: 8px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #f1f3f8 !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}
html[data-platform="native"] body[data-mob-tab="missions"] .row-reward small {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    color: rgba(233,75,60,0.8) !important;
    text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   STATUS PILL WRAP + STATUS SHEET (mobile-riot.js injects these)
   ══════════════════════════════════════════════════════════════════════════ */

html[data-platform="native"] .rm-status-pill-wrap {
    position: relative;
    margin: 14px 20px 0;
}
/* Override pill margin since wrap handles it */
html[data-platform="native"] .rm-status-pill-wrap .rm-status-pill {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
}
html[data-platform="native"] .rm-status-sheet {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #13162a;
    border: 1px solid rgba(166,168,177,0.18);
    border-radius: 14px;
    overflow: hidden;
    z-index: 900;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
html[data-platform="native"] .rm-status-sheet.open {
    display: flex;
}
html[data-platform="native"] .rm-status-sheet-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(215,217,224,0.45);
    text-transform: uppercase;
    padding: 12px 16px 8px;
    border-bottom: 1px solid rgba(166,168,177,0.1);
}
html[data-platform="native"] .rm-status-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(166,168,177,0.07);
    color: #f1f3f8;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
html[data-platform="native"] .rm-status-option:last-child {
    border-bottom: none;
}
html[data-platform="native"] .rm-status-option:active {
    background: rgba(255,255,255,0.05);
}
html[data-platform="native"] .rm-status-option.active {
    background: rgba(255,255,255,0.06);
}
html[data-platform="native"] .rm-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE — forgot password + back to home as buttons on native
   ══════════════════════════════════════════════════════════════════════════ */

html[data-platform="native"] .forgot-password {
    margin-top: 14px !important;
    text-align: center !important;
}
html[data-platform="native"] .forgot-password a,
html[data-platform="native"] #forgotPasswordLink {
    display: block !important;
    width: 100% !important;
    padding: 14px 18px !important;
    background: rgba(233,75,60,0.1) !important;
    border: 1px solid rgba(233,75,60,0.45) !important;
    border-radius: 10px !important;
    color: #e94b3c !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.18s !important;
}
html[data-platform="native"] .forgot-password a:active,
html[data-platform="native"] #forgotPasswordLink:active {
    background: rgba(233,75,60,0.2) !important;
}

html[data-platform="native"] .back-link {
    margin-top: 12px !important;
}
html[data-platform="native"] .back-link a {
    display: block !important;
    width: 100% !important;
    padding: 14px 18px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(166,168,177,0.22) !important;
    border-radius: 10px !important;
    color: #d8d9df !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.18s !important;
}
html[data-platform="native"] .back-link a:active {
    background: rgba(255,255,255,0.08) !important;
}