/* =====================================================================
   mobile.css — phone layout for Entropia Workstation.
   EVERYTHING here is inside @media (max-width: 767px): the PC view (≥768 px) is untouched.
   Helpers/markup it relies on are created by mobile.js (#mMoreBtn, #mMoreSheet, #mSearchBtn).
   ===================================================================== */
@media (max-width: 767px) {

    /* ---------- base ---------- */
    html { zoom: 1 !important; }                       /* PC uses 0.9 — on a phone we need every pixel readable */
    :root { --ew-hdr: 52px; --m-nav: 58px; }
    /* the black info strip under the header is empty for now — don't waste 34px of a phone screen on it */
    :root:has(#ewInfoBarIn:empty) { --ew-info: 0px; }
    :root:has(#ewInfoBarIn:empty) #ewInfoBar { display: none; }
    #ewInfoBar .ew-ib { padding: 0 10px; gap: 8px; }
    body { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }

    /* ---------- 1. top bar ---------- */
    .top-bar { padding: 0 10px !important; gap: 6px; }
    .top-bar .brand-section { margin-right: 0 !important; min-width: 0; flex-shrink: 1; }
    .top-bar .brand-section img { height: 30px !important; }
    .top-bar .beta-badge { transform: scale(.8); transform-origin: left center; }
    .top-bar .main-nav { flex: 0 0 auto !important; margin-left: auto; }
    .top-bar .main-nav > .nav-link,
    .top-bar .main-nav > .nav-sep,
    .top-bar .main-nav > .nav-dl,
    #globalsTicker,
    .top-bar .top-bar-info { display: none !important; }

    /* search: an icon in the header; tapping it opens a full-width search row under the header */
    #mSearchBtn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px;
        border: 1px solid rgba(126,179,212,.3); background: rgba(126,179,212,.08); color: #d8e8f5; cursor: pointer; flex-shrink: 0;
        -webkit-tap-highlight-color: transparent; }
    #mSearchBtn:active { background: rgba(126,179,212,.25); }
    .top-bar .header-search-wrap { display: none; }
    body.m-search-open .top-bar .header-search-wrap { display: flex; position: fixed; top: var(--ew-hdr); left: 0; right: 0;
        margin: 0; padding: 8px 10px; background: rgba(11,26,62,.98); border-bottom: 1px solid var(--border-active); z-index: 1001; }
    body.m-search-open .header-search-wrap > svg { left: 22px !important; }
    .header-search-input, .header-search-input:focus { width: 100% !important; font-size: 16px !important; padding: 10px 12px 10px 34px !important; }
    .header-search-dropdown { left: 10px !important; right: 10px !important; max-height: 60vh !important; }
    .header-search-item { padding: 12px 14px !important; font-size: 14px !important; }

    /* account (Sign In / nick chip) lives top-right in the header on a phone */
    #accWidget.acc-widget { position: relative !important; top: auto !important; bottom: auto !important; right: auto !important; height: var(--ew-hdr) !important; z-index: 2 !important; flex-shrink: 0; }
    .top-bar .main-nav { margin-right: 4px; }
    .top-bar .brand-section { flex-shrink: 0 !important; }
    #accWidget .acc-signin-btn { height: 34px; padding: 0 10px; font-size: 12px; }
    #accWidget .acc-chip { max-width: 120px; height: 40px; padding: 0 4px; }
    #accWidget .acc-chip-nick { font-size: 13px; }
    #accWidget .acc-chip-caret { display: none; }

    /* ---------- 1. bottom navigation: icons only fit on one row ---------- */
    .bottom-bar { display: block !important; height: calc(var(--m-nav) + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 0 env(safe-area-inset-bottom, 0px) !important; }
    .bottom-bar > .bar-section.left,
    .bottom-bar > .bar-section.right { display: none !important; }
    .bottom-bar > .bar-section.center { position: relative; z-index: 1; width: 100%; height: var(--m-nav); display: block !important; }
    .bottom-bar .app-row { display: flex !important; width: 100% !important; height: 100%; gap: 0 !important; justify-content: space-around; align-items: stretch; padding: 0 2px; box-sizing: border-box; }
    .bottom-bar .app-row > .bar-separator,
    #gamesNavBtn, #achievementsNavBtn, #creditsIndicator,
    #workstationNavBtn, #servicesNavBtn { display: none !important; }   /* these live in the More sheet on a phone */
    .bottom-bar .app-row > #homeNavBtn,
    .bottom-bar .app-row > #forumNavBtn,
    .bottom-bar .app-row > #marketNavBtn,
    .bottom-bar .app-row > #messagesNavBtn,
    .bottom-bar .app-row > #mMoreBtn {
        flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important;
        padding: 6px 0 4px !important; gap: 3px !important; display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important; transform: none !important;
        -webkit-tap-highlight-color: transparent; }
    #homeNavBtn > svg, #workstationNavBtn > svg, #forumNavBtn > svg, #servicesNavBtn > svg, #marketNavBtn > svg, #messagesNavBtn > svg,
    #mMoreBtn > svg { width: 25px !important; height: 25px !important; flex-shrink: 0; margin: 0 !important; }
    .bottom-bar .app-row .app-label { font-size: 9.5px !important; letter-spacing: .2px !important; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; max-width: 100%; line-height: 1.1; }
    #messagesNavBtn .app-label { font-size: 0 !important; }
    #messagesNavBtn .app-label::after { content: 'Messages'; font-size: 9.5px; }
    #workstationNavBtn .app-label { font-size: 0 !important; }
    #workstationNavBtn .app-label::after { content: 'Station'; font-size: 9.5px; }
    #mMoreBtn { color: #fff; cursor: pointer; position: relative; }
    #mMoreBtn.on, #mMoreBtn.cur { color: #7eb3d4; }
    /* something new inside More: red blinking dot above the three dots (and on the tile itself) */
    #mMoreBtn.m-dot::after { content: ''; position: absolute; top: 3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
        background: #ff3b47; box-shadow: 0 0 0 1.5px rgba(6,10,28,.9), 0 0 8px #ff3b47; animation: mDotBlink 1.1s ease-in-out infinite; pointer-events: none; }
    @keyframes mDotBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.75); } }
    .m-more-tile.wn-unseen { animation: none; color: #fff; }
    .m-more-tile.m-new > span::before, .m-more-tile.wn-unseen > span::before, .m-more-tile.m-rn-new > span::before {
        content: ''; position: absolute; top: 2px; left: calc(50% + 19px); width: 8px; height: 8px; border-radius: 50%;
        background: #ff3b47; box-shadow: 0 0 0 1.5px rgba(6,10,28,.9), 0 0 8px #ff3b47; animation: mDotBlink 1.1s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { #mMoreBtn.m-dot::after, .m-more-tile > span::before { animation: none !important; } }
    #forumMentionBadge { right: 8px !important; top: 0 !important; }

    /* everything that sat above the 60px PC bottom bar sits above the phone bar instead */
    .ticker-container { bottom: calc(var(--m-nav) + env(safe-area-inset-bottom, 0px)) !important; }
    .container-main { bottom: calc(var(--m-nav) + 22px + env(safe-area-inset-bottom, 0px)) !important; right: 0 !important; }

    /* ---------- "More" sheet: monochrome — white icons in glass rings over a deep-space background ---------- */
    #mMoreSheet { position: fixed; left: 0; right: 0; bottom: calc(var(--m-nav) + env(safe-area-inset-bottom, 0px)); z-index: 999;
        overflow: hidden; isolation: isolate; border-radius: 26px 26px 0 0; padding: 12px 14px 18px;
        background: radial-gradient(140% 90% at 50% -10%, #1a2a5e 0%, #0d1534 45%, #060a1c 100%);
        box-shadow: 0 -24px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
        transform: translateY(105%); transition: transform .55s cubic-bezier(.16,1,.3,1), visibility 0s .55s; visibility: hidden; }
    #mMoreSheet.on { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.16,1,.3,1); }
    /* slow white light drifting across the panel */
    #mMoreSheet::before { content: ''; position: absolute; z-index: -2; width: 340px; height: 340px; left: -120px; top: -170px; border-radius: 50%;
        pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.13), rgba(160,190,255,.05) 40%, transparent 70%);
        animation: mGlow 16s ease-in-out infinite alternate; }
    @keyframes mGlow { 0% { transform: translate(0, 0); } 50% { transform: translate(220px, 120px); } 100% { transform: translate(60px, 260px); } }
    /* stars (twinkle + drift) */
    #mMoreSheet::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
        background-image:
            radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 33% 68%, #fff, transparent 60%),
            radial-gradient(1.6px 1.6px at 58% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 76% 52%, #fff, transparent 60%),
            radial-gradient(1.2px 1.2px at 90% 84%, #fff, transparent 60%), radial-gradient(1px 1px at 22% 90%, #fff, transparent 60%),
            radial-gradient(1.3px 1.3px at 46% 40%, #fff, transparent 60%), radial-gradient(1px 1px at 66% 78%, #fff, transparent 60%),
            radial-gradient(1px 1px at 5% 55%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 84% 30%, #fff, transparent 60%);
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
        animation: mStars 4.5s ease-in-out infinite alternate, mDrift 50s linear infinite; }
    @keyframes mStars { from { opacity: .25; } to { opacity: .8; } }
    @keyframes mDrift { to { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 -200px, 0 -200px, 0 -200px, 0 -200px, 0 -200px; } }
    /* perspective grid sinking into the bottom — a faint "floor" */
    .m-more-floor { position: absolute; z-index: -1; left: -30%; right: -30%; bottom: -10px; height: 150px; pointer-events: none; opacity: .5;
        background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
        background-size: 34px 34px; transform: perspective(240px) rotateX(58deg); transform-origin: bottom;
        -webkit-mask: linear-gradient(to top, #000 10%, transparent 90%); mask: linear-gradient(to top, #000 10%, transparent 90%);
        animation: mFloor 6s linear infinite; }
    @keyframes mFloor { to { background-position: 0 34px, 0 0; } }
    /* white light running along the top edge */
    .m-more-edge { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; overflow: hidden;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.35) 25%, rgba(255,255,255,.35) 75%, transparent); }
    .m-more-edge::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -30%;
        background: linear-gradient(90deg, transparent, #fff, transparent); animation: mEdge 4s cubic-bezier(.4,0,.2,1) infinite; }
    @keyframes mEdge { 0% { left: -30%; } 55%, 100% { left: 100%; } }
    .m-more-handle { width: 40px; height: 4px; border-radius: 4px; margin: 0 auto 12px; background: rgba(255,255,255,.28); }
    #mMoreShade { position: fixed; inset: 0; z-index: 998; background: linear-gradient(to top, rgba(2,4,14,.82), rgba(2,4,14,.5));
        opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
    #mMoreShade.on { opacity: 1; visibility: visible; transition: opacity .4s ease; }
    .m-more-title { display: flex; align-items: center; gap: 12px; margin: 0 4px 16px; font: 600 11px Rajdhani, sans-serif;
        letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.7); }
    .m-more-title::before, .m-more-title::after { content: ''; flex: 1; height: 1px; }
    .m-more-title::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.35)); }
    .m-more-title::after { background: linear-gradient(90deg, rgba(255,255,255,.35), transparent); }

    /* tiles: a white icon inside a glass ring, label underneath — 4 per row */
    .m-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }
    .m-more-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0; border: 0; background: none;
        cursor: pointer; color: #fff; font: 600 11.5px/1.15 Rajdhani, 'Segoe UI', sans-serif; letter-spacing: .4px; text-align: center;
        -webkit-tap-highlight-color: transparent; }
    #mMoreSheet.on .m-more-tile { animation: mTileIn .6s cubic-bezier(.2,1.25,.4,1) both; animation-delay: calc(.08s + var(--i, 0) * .045s); }
    @keyframes mTileIn { from { opacity: 0; transform: translateY(18px) scale(.8); } }
    .m-ring { position: relative; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.14), rgba(255,255,255,.03) 60%, rgba(0,0,0,.25));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(0,0,0,.4);
        transition: transform .2s ease, box-shadow .3s ease, background .3s ease; }
    /* a thin arc of light orbiting each ring */
    .m-ring::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
        background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.9) 88%, transparent 100%);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
        animation: mOrbit 5s linear infinite; animation-delay: calc(var(--i, 0) * -.62s); opacity: .75; }
    @keyframes mOrbit { to { transform: rotate(360deg); } }
    /* soft halo behind the icon */
    .m-ring::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; pointer-events: none;
        background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); animation: mBreath 3.6s ease-in-out infinite;
        animation-delay: calc(var(--i, 0) * -.45s); }
    @keyframes mBreath { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .75; transform: scale(1.15); } }
    .m-ring svg { position: relative; z-index: 1; width: 27px !important; height: 27px !important; color: #fff !important;
        filter: drop-shadow(0 0 5px rgba(255,255,255,.45)); transition: transform .3s cubic-bezier(.2,1.5,.4,1); }
    .m-ring svg[stroke]:not([stroke="none"]), .m-ring svg [stroke]:not([stroke="none"]) { stroke: #fff !important; }
    .m-more-tile > span { color: rgba(255,255,255,.88); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
    .m-more-tile:active .m-ring { transform: scale(.9); background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.32), rgba(255,255,255,.08) 65%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 26px rgba(255,255,255,.35); }
    .m-more-tile:active .m-ring svg { transform: scale(1.12); }
    /* section that is open now (Workstation / Services) */
    .m-more-tile.cur .m-ring { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85), 0 0 22px rgba(255,255,255,.3); }
    .m-more-tile.cur .m-ring::before { opacity: 1; animation-duration: 2.5s; }
    .m-more-tile.cur > span::after { content: ''; display: block; width: 5px; height: 5px; margin: 5px auto 0; border-radius: 50%;
        background: #fff; box-shadow: 0 0 8px #fff; }

    .m-more-radio { position: relative; margin-top: 20px; padding: 8px 12px; border-radius: 18px; min-height: 58px; overflow: hidden;
        display: flex; align-items: center; justify-content: flex-start;
        background: linear-gradient(120deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 60%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.15); }
    #mMoreSheet.on .m-more-radio { animation: mTileIn .6s cubic-bezier(.2,1.25,.4,1) .45s both; }
    .m-more-radio:empty { display: none; }
    @media (prefers-reduced-motion: reduce) {
        #mMoreSheet::before, #mMoreSheet::after, .m-more-floor, .m-more-edge::after, .m-ring::before, .m-ring::after,
        #mMoreSheet.on .m-more-tile, #mMoreSheet.on .m-more-radio { animation: none !important; }
    }

    /* ---------- 2. home ---------- */
    #h9-bar-bot { height: 0 !important; }
    #home-fullscreen { background-position: 62% center !important; }
    #h9-hero-l, #h9-ch-l { transform: none !important; }
    #h9-hero { left: 20px !important; right: 20px; top: 7%; bottom: auto !important; max-width: none !important; }
    #h9-pre { font-size: 10px; }
    #h9-h1 { margin-top: 12px !important; }
    #h9-t1, #h9-t2 { font-size: clamp(40px, 13vw, 60px) !important; }
    #h9-rule { margin-top: 16px !important; }
    #h9-sub { font-size: 14px !important; line-height: 1.6 !important; max-width: none !important; }
    /* chapter cards: a swipeable row along the bottom instead of a column over the title */
    #h9-chapters { top: auto !important; bottom: 14px; left: 0 !important; right: 0 !important; transform: none !important;
        width: auto !important; flex-direction: row !important; gap: 10px !important; overflow-x: auto; overflow-y: hidden;
        padding: 0 20px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    #h9-chapters::-webkit-scrollbar { display: none; }
    .h9-ch { flex: 0 0 150px; scroll-snap-align: start; padding: 12px 14px 14px !important; border-radius: 0 10px 10px 0;
        background: linear-gradient(90deg, rgba(20,40,90,.55), rgba(10,20,50,.35)) !important; }
    .h9-ch.h9-ch-act { background: linear-gradient(90deg, rgba(40,75,160,.65), rgba(20,40,90,.4)) !important; }
    .h9-ch:hover { transform: none !important; }
    .h9-ch-t { font-size: 15px !important; }
    .h9-ch-d { font-size: 11.5px !important; line-height: 1.3; }
    @keyframes h9-ch-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
    /* feature detail panel: full width */
    #h2-detail-panel { width: 100% !important; padding: 56px 20px 28px !important; border-left: none !important; }
    #h2-detail-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

    /* ---------- 3. marketplace: create-lot window (#buySellModal) ---------- */
    #buySellModal { z-index: 1001 !important; padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
    #buySellModal > .modal-window { width: 100vw !important; max-width: none !important; height: 100% !important; max-height: none !important;
        border-radius: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; }
    /* credits bar: available · estimated total · close (per-lot price and total lots are in the estimate) */
    #marketCreditsBar { padding: 6px 8px !important; gap: 6px !important; flex-shrink: 0; }
    #marketCreditsBar > div:nth-child(2), #marketCreditsBar > div:nth-child(4), #marketCreditsBar > div:nth-child(5) { display: none !important; }
    #marketCreditsBar > div:first-child { flex: 1 1 auto !important; padding: 2px 4px !important; min-width: 0; }
    #marketCreditsBar > div:first-child .ew-cr { zoom: .74; }
    #marketCreditsBar > div:nth-child(3) { flex: 0 0 auto !important; padding: 0 !important; }
    #marketCreditsBar > div:nth-child(3) > div > div { padding: 5px 22px !important; }
    #marketCreditsBar #marketCreditsValue { font-size: 22px !important; }
    #marketCreditsBar > div:last-child { padding: 0 0 0 6px !important; }
    /* Email Notification switch: like the PC — switch, then title + description beside it */
    #createRight { flex: 1 1 auto; min-width: 0; gap: 8px; margin-left: 8px; }
    #createHint { flex: 1 1 auto; min-width: 0; }
    #createHint .ch-arrow { display: none; }
    #createHint .ch-bubble { max-width: none; min-width: 0; padding: 3px 7px; }
    #createHint .ch-bubble b { font-size: 10px; } #createHint .ch-bubble span { font-size: 9px; }
    #mailNotif { flex: 0 1 auto; min-width: 0; gap: 7px; padding-left: 9px; margin-left: auto; white-space: normal; }
    #mailNotif .mn-sw { width: 36px; height: 20px; }
    #mailNotif .mn-sw::after { width: 14px; height: 14px; }
    #mailNotif input:checked + .mn-sw::after { transform: translateX(16px); }
    #mailNotif .mn-txt { display: flex !important; max-width: 118px; line-height: 1.15; }
    #mailNotif .mn-txt b { font-size: 10px; letter-spacing: .2px; white-space: nowrap; }
    #mailNotif .mn-txt span { display: block !important; font-size: 9px; margin-top: 1px; }
    #closeBuySellModal { width: 40px !important; height: 40px !important; }
    /* WTB / WTS: one column at a time, switched by tabs (built by mobile.js) */
    .m-bs-tabs { display: flex; gap: 6px; padding: 6px 8px; flex-shrink: 0; background: #0b1530; border-bottom: 1px solid var(--border-dim); }
    .m-bs-tabs button { flex: 1; height: 40px; border-radius: 10px; font: 700 14px Rajdhani, sans-serif; letter-spacing: .08em; cursor: pointer;
        border: 1px solid rgba(90,160,255,.35); background: rgba(40,110,230,.10); color: #9fbfe8; -webkit-tap-highlight-color: transparent; }
    .m-bs-tabs button[data-t="wts"] { border-color: rgba(78,207,122,.35); background: rgba(40,170,90,.10); color: #9fdcb5; }
    .m-bs-tabs button.on[data-t="wtb"] { background: rgba(40,110,230,.45); color: #fff; border-color: rgba(90,160,255,.8); }
    .m-bs-tabs button.on[data-t="wts"] { background: rgba(40,170,90,.45); color: #fff; border-color: rgba(78,207,122,.8); }
    #buySellModal .modal-body { flex-direction: column !important; }
    #buySellModal .modal-body > div { flex: 1 1 auto !important; min-height: 0; border-right: none !important; }
    #buySellModal:not(.m-wts) .modal-body > div:nth-child(2),
    #buySellModal.m-wts .modal-body > div:nth-child(1) { display: none !important; }
    #buySellModal .modal-body > div > div:first-child { padding: 10px 12px !important; }
    #buySellModal .modal-body > div > div:first-child > div:first-child > div:first-child { width: 40px !important; height: 40px !important; }
    #buySellModal .modal-body > div > div:nth-child(2) { padding: 8px !important; }
    #searchWTB, #searchWTS { font-size: 16px !important; }
    #wtbSearchResults, #wtsSearchResults { max-height: 50vh !important; }
    /* lot rows: #, name (+ time) on top; qty · value · offer PED · offer % underneath */
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] {
        grid-template-columns: 20px repeat(4, minmax(0, 1fr)) !important; row-gap: 6px !important; column-gap: 6px !important; padding: 8px !important; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div { padding: 0 !important; transform: none !important; min-width: 0; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(1) { grid-column: 1; grid-row: 1; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(2) { grid-column: 2 / 5; grid-row: 1; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(9) { grid-column: 5; grid-row: 1; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(3) { grid-column: 2; grid-row: 2; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(5) { grid-column: 3; grid-row: 2; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(6) { grid-column: 4; grid-row: 2; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(8) { grid-column: 5; grid-row: 2; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(4),
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(7) { display: none !important; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] > div:nth-child(2) { font-size: 14px !important; }
    :is(#wtbMyList, #wtsMyList) > div[style*="grid-template-columns"] input { width: 100% !important; min-width: 0 !important; box-sizing: border-box;
        height: 36px !important; font-size: 16px !important; }
    #buySellModal .modal-footer { padding: 8px !important; gap: 8px !important; flex-shrink: 0; }
    #buySellModal .modal-footer button { padding: 12px 6px !important; }

    /* match popup: across the top on a phone, not over the bottom menu */
    #matchPopup { top: calc(var(--ew-hdr) + var(--ew-info) + 8px) !important; bottom: auto !important; left: 10px !important; right: 10px !important; max-width: none !important; }

    /* ---------- list → detail panes (mobile.js adds .m-pane / .m-detail and the Back bar) ---------- */
    .m-backbar { display: none; }
    .m-pane.m-detail .m-backbar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; height: 46px; padding: 0 8px;
        background: rgba(10,16,40,.92); border-bottom: 1px solid var(--border-dim); position: relative; z-index: 5; }
    .m-back { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 6px; border-radius: 10px;
        border: 1px solid rgba(126,179,212,.35); background: rgba(126,179,212,.10); color: #d8e8f5;
        font: 700 14px Rajdhani, sans-serif; letter-spacing: .5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .m-back:active { background: rgba(126,179,212,.28); }
    .m-backbar-t { flex: 1; min-width: 0; font: 700 15px Rajdhani, sans-serif; color: #eaf2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Message Center (private chats, MATCHES, games) */
    #messagesSection .container-main { padding: 8px !important; gap: 0 !important; display: block !important; }
    #messagesSection .workspace-left { width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; box-sizing: border-box; }
    #messagesSection .workspace-center { display: none !important; width: 100% !important; height: 100% !important; }
    #messagesSection.m-detail .workspace-left { display: none !important; }
    #messagesSection.m-detail .workspace-center { display: flex !important; }
    #messagesSection #messagesArea { padding: 12px !important; }
    #messagesSection .msg-tab { letter-spacing: 1.5px !important; }
    #messagesSection .msg-bubble { max-width: 85% !important; }
    #messageInputContainer input, #messageInputContainer textarea { font-size: 16px !important; }

    /* ---------- 4. Workstation / Services: list of tools full-screen, tool opens full-screen ---------- */
    :is(#workstationSection, #servicesSection).m-pane { display: none; }
    :is(#workstationSection, #servicesSection).m-pane.active { display: block !important; position: fixed; left: 0; right: 0;
        top: calc(var(--ew-hdr) + var(--ew-info)); bottom: calc(var(--m-nav) + 22px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
    :is(#workstationSection, #servicesSection) .workstation-sidebar { width: 100% !important; max-width: none !important; height: 100% !important;
        border-right: none !important; box-sizing: border-box; }
    :is(#workstationSection, #servicesSection) .sidebar-content { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    :is(#workstationSection, #servicesSection) .tool-item:hover { transform: none !important; }
    :is(#workstationSection, #servicesSection) .workstation-main { display: none !important; height: 100% !important; width: 100% !important; }
    :is(#workstationSection, #servicesSection).m-detail .workstation-sidebar { display: none !important; }
    :is(#workstationSection, #servicesSection).m-detail .workstation-main { display: flex !important; }
    :is(#workstationSection, #servicesSection) .display-main { height: 100%; min-height: 0; }
    :is(#workstationSection, #servicesSection) .display-content { overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 12px !important; }
    :is(#workstationSection, #servicesSection) .display-header { padding: 0 12px !important; }
    :is(#workstationSection, #servicesSection) .display-title { font-size: 15px !important; letter-spacing: 1.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #servicesSection .svc-grid { grid-template-columns: 1fr !important; }
    #servicesSection .svc-filters { flex-wrap: wrap !important; }

    /* ---------- 4. Community: channels full-screen, channel chat opens full-screen ---------- */
    #dc-app { bottom: calc(var(--m-nav) + 22px + env(safe-area-inset-bottom, 0px)) !important; right: 0 !important; }
    #dc-side { width: 100% !important; border-right: none !important; }
    #dc-chat { display: none !important; }
    #dc-members { display: none !important; }
    #forumSection.m-detail #dc-side { display: none !important; }
    #forumSection.m-detail #dc-chat { display: flex !important; width: 100%; }
    #dc-chat-head { padding-left: 12px !important; padding-right: 12px !important; }
    #dc-input-wrap textarea, #dc-input-wrap input { font-size: 16px !important; }
    .dc-chan { min-height: 42px; }

    /* ---------- 5. windows ---------- */
    /* profile / account window (account.js): full screen, the content scrolls, the tab row swipes */
    .acc-ov .acc-modal.wide { width: 100vw !important; max-width: none !important; height: 100% !important; max-height: none !important;
        margin: 0 !important; border-radius: 0 !important; left: 0 !important; top: 0 !important; }
    .acc-ov:has(.acc-modal.wide) { padding: 0 !important; }
    .acc-modal .acc-main, #accProfView { min-height: 0 !important; }
    #accProfView { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .acc-side-row { scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .acc-side-row::-webkit-scrollbar { display: none; }
    .acc-side-row .acc-mi { scroll-snap-align: start; }
    .acc-modal input, .acc-modal textarea, .acc-modal select { font-size: 16px !important; }

    /* item card (#itemInfoModal): full screen, the tab row swipes, compact header */
    #itemInfoModal { padding: 0 !important; justify-content: flex-start !important; align-items: stretch !important; }
    #itemInfoModal > #armorTabsBarOuter { max-width: none !important; border-radius: 0 !important; flex-shrink: 0; }
    #itemInfoModal > .modal-window { width: 100vw !important; max-width: none !important; flex: 1 1 auto; min-height: 0;
        height: auto !important; max-height: none !important; border-radius: 0 !important; margin: 0 !important; }
    #itemInfoModal .modal-header { padding: 10px 10px 10px 14px !important; gap: 8px; min-height: 0 !important; }
    #itemInfoModal .modal-title { font-size: 17px !important; line-height: 1.15 !important; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
    #itemInfoModal .modal-header > div:last-child { flex-shrink: 0; gap: 6px !important; }
    #itemInfoModal #itemModalCopyBtn { font-size: 0 !important; padding: 0 10px !important; gap: 0 !important; height: 34px; }
    #itemInfoModal #itemModalCopyBtn::before { content: 'Copy link'; font-size: 12px; font-weight: 700; }
    #itemHeaderWeaponWrap { display: none !important; }
    #itemInfoModal #itemTabsRow { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
    #itemInfoModal #itemTabsRow::-webkit-scrollbar { display: none; }
    #itemInfoModal #itemTabsRow > button:not([style*="display: none"]):not([style*="display:none"]) { flex: 0 0 auto !important;
        min-width: max-content !important; padding-left: 12px !important; padding-right: 12px !important; font-size: 13px !important; }
    #itemInfoModal .modal-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    #itemInfoModal input, #itemInfoModal textarea, #itemInfoModal select { font-size: 16px !important; }

    /* item database section: own scroll area between header and bottom menu; category tabs swipe */
    #databaseSection.active { position: fixed !important; left: 0; right: 0; top: calc(var(--ew-hdr) + var(--ew-info));
        bottom: calc(var(--m-nav) + 22px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; overflow-y: auto !important;
        padding: 12px !important; z-index: 10; -webkit-overflow-scrolling: touch; }
    #databaseSection > div { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
    #databaseSection h1 { font-size: 22px !important; }
    #dbCategoryTabs { max-width: 100%; scrollbar-width: none; margin-bottom: 12px !important; }
    #dbCategoryTabs::-webkit-scrollbar { display: none; }
    #dbCategoryTabs > * { flex: 0 0 auto !important; }
    #databaseSection input { font-size: 16px !important; }
    #databaseSection [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    /* nothing may widen the page sideways on a phone */
    html, body { overflow-x: hidden !important; max-width: 100vw; }

    /* EU release notes edge tab: moved into the More sheet (it covered the content on the right edge) */
    #rnToggle { display: none !important; }

    /* ---------- achievements window (achievements.js): real phone layout instead of scaling the 1240px window down ---------- */
    #ewAch { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
    #ewAch .eac-win { zoom: 1 !important; width: 100% !important; height: 100%; flex-direction: column !important; border-radius: 0 !important;
        overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; animation: none !important; }
    #ewAch .eac-x { position: fixed !important; top: 10px !important; right: 10px !important; width: 40px !important; height: 40px !important;
        font-size: 18px !important; background: rgba(20,18,43,.85) !important; }
    #ewAch .eac-side { flex: none !important; display: flex; align-items: center; gap: 10px; padding: 12px 60px 12px 14px !important;
        border-right: none !important; border-bottom: 1px solid rgba(170,150,255,.12); overflow-x: auto; scrollbar-width: none; }
    #ewAch .eac-side::-webkit-scrollbar { display: none; }
    #ewAch .eac-brand { font-size: 19px !important; margin: 0 6px 0 0 !important; gap: 8px !important; flex-shrink: 0; white-space: nowrap; }
    #ewAch .eac-brand svg { width: 22px; height: 22px; }
    #ewAch .eac-tab { width: auto !important; margin: 0 !important; padding: 7px 12px !important; gap: 8px !important; font-size: 14px !important; flex-shrink: 0; white-space: nowrap; }
    #ewAch .eac-tab svg { width: 18px; height: 18px; }
    #ewAch .eac-main { padding: 16px 14px 24px !important; }
    /* hero: crystals above the title */
    #ewAch .eac-hero { flex-direction: column !important; align-items: center !important; text-align: center; gap: 6px !important; padding-right: 0 !important; margin-bottom: 16px !important; }
    #ewAch .eac-art { flex: none !important; width: 260px; height: 180px; transform: scale(.72); margin: -26px 0 -40px; }
    #ewAch .eac-h { font-size: 28px !important; }
    #ewAch .eac-h2 { font-size: 22px !important; margin: 4px 0 8px !important; }
    #ewAch .eac-sub { font-size: 15px !important; }
    #ewAch .eac-note { display: block !important; font-size: 13.5px !important; text-align: center; line-height: 1.45; }
    #ewAch .eac-note svg { display: inline-block; vertical-align: -3px; margin-right: 5px; }
    /* progress */
    #ewAch .eac-prog { padding: 14px !important; gap: 10px !important; margin-bottom: 16px !important; }
    #ewAch .eac-prog > svg { display: none; }
    #ewAch .eac-pt { font-size: 15px !important; flex-wrap: wrap; gap: 6px; }
    #ewAch .eac-pt b { font-size: 20px !important; }
    #ewAch .eac-cur { margin-left: 8px !important; font-size: 13px !important; padding: 2px 10px !important; }
    #ewAch .eac-bar { height: 10px !important; }
    #ewAch .eac-hint { font-size: 14px !important; }
    /* crystal cards: two per row, Royal Ruby across the full width */
    #ewAch .eac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 16px !important; }
    #ewAch .eac-card { padding: 16px 8px 12px !important; border-radius: 14px !important; }
    #ewAch .eac-card.royal { grid-column: 1 / -1; margin-top: 10px; }
    #ewAch .eac-card:hover { transform: none !important; }
    #ewAch .eac-gw { height: 96px !important; transform: scale(.78); }
    #ewAch .eac-pct { font-size: 24px !important; }
    #ewAch .eac-cn { font-size: 17px !important; margin: 4px 0 6px !important; }
    #ewAch .eac-rar { font-size: 10px !important; letter-spacing: 2px !important; }
    #ewAch .eac-st { font-size: 13px !important; padding: 4px 10px !important; gap: 5px !important; }
    #ewAch .eac-need { font-size: 13px !important; text-align: center; margin-top: 8px !important; }
    #ewAch .eac-bonus { font-size: 14px !important; padding: 5px 8px !important; margin-top: 8px !important; }
    #ewAch .eac-bonus small { font-size: 10.5px !important; }
    /* footer note */
    #ewAch .eac-foot { padding: 14px !important; gap: 12px !important; align-items: flex-start !important; }
    #ewAch .eac-foot > svg { width: 30px; height: 30px; flex-shrink: 0; }
    #ewAch .eac-foot b { font-size: 16px !important; }
    #ewAch .eac-foot span { font-size: 13.5px !important; }
    #ewAch .eac-foot:after { display: none; }
    #ewAch .eac-soon { min-height: 60vh !important; font-size: 16px !important; }
    #ewAch .eac-soon b { font-size: 26px !important; }

    /* the mobile helpers exist only on a phone */
}
@media (min-width: 768px) {
    #mSearchBtn, #mMoreBtn, #mMoreSheet, #mMoreShade, .m-bs-tabs, .m-backbar { display: none !important; }
}