Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Xbox 360 Dashboard

Author: Def3ct
Category: Games
Created: May 12, 2026
The Xbox 360 dashboard! Has mobile styles as well so phones dont break!
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<div class="nxe-backdrop"  aria-hidden="true"></div>
<div class="nxe-floor"     aria-hidden="true"></div>
<div class="nxe-bokeh"     aria-hidden="true"></div>
<div class="nxe-channels"  aria-hidden="true">
    <span class="nxe-chan">Inside Xbox</span>
    <span class="nxe-chan">Friends</span>
    <span class="nxe-chan">Video Marketplace</span>
    <span class="nxe-chan">Game Marketplace</span>
    <span class="nxe-chan nxe-chan-active">My Xbox</span>
</div>
<div class="nxe-pan-zone nxe-pan-far-left"  aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-near-left" aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-near-right" aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-far-right"  aria-hidden="true"></div>
<div class="nxe-pan-arrow nxe-pan-arrow-left"  aria-hidden="true"></div>
<div class="nxe-pan-arrow nxe-pan-arrow-right" aria-hidden="true"></div>
<div class="nxe-hud" aria-hidden="true">
    <div class="nxe-counter"><span class="nxe-idx">1</span> of <span class="nxe-total">6</span></div>
    <div class="nxe-select"><span class="nxe-a-btn">A</span> Select</div>
</div>
<div class="nxe-guide" aria-hidden="true"></div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* =========================================================
   0. RESET / BACKDROP
   ========================================================= */
body.profile-page,
body.profile-page.theme-dark,
body.profile-page.theme-light {
    background: #4a7818 !important;
    color: #ffffff !important;
    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 100vh !important;
}
html:has(body.profile-page) {
    overflow: hidden !important;
    height: 100vh !important;
}
body.profile-page main { background: transparent !important; }
body.profile-page .master-container {
    background: transparent !important;
    box-shadow: none !important;
}

/* The site renders user layout HTML in TWO places: once inside .blurbs
   (legacy) and once inside .fr-layout-html as a direct child of <main>.
   Hide the in-blurbs copy so only the clean overlay version is visible
   and `position: fixed` chrome actually anchors to the viewport. */
body.profile-page .blurbs .nxe-backdrop,
body.profile-page .blurbs .nxe-floor,
body.profile-page .blurbs .nxe-bokeh,
body.profile-page .blurbs .nxe-channels,
body.profile-page .blurbs .nxe-pan-zone,
body.profile-page .blurbs .nxe-pan-arrow,
body.profile-page .blurbs .nxe-hud,
body.profile-page .blurbs .nxe-guide {
    display: none !important;
}

/* Defensively undo any FR rule that would re-trap fixed descendants
   (e.g. the mobile/coarse-pointer `.inner { contain: content }` rule). */
body.profile-page .fr-layout-html,
body.profile-page .fr-layout-html * {
    contain: none !important;
    content-visibility: visible !important;
}

/* Full-viewport NXE sky + Frutiger Aero wallpaper backdrop */
.nxe-backdrop {
    position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 75% -8%, rgba(255,255,255,0.45) 0%, transparent 60%),
        radial-gradient(ellipse 130% 100% at 50% 50%, rgba(155,205,75,0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(226,240,164,0.52) 0%, rgba(163,207,72,0.58) 25%, rgba(94,142,31,0.62) 60%, rgba(45,74,18,0.70) 92%, rgba(22,39,10,0.76) 100%),
        url('https://friendrewind.com/uploads/gallery/1/img_69eedc6d7a93c4.37411853.webp')
            no-repeat center center;
    background-size: auto, auto, auto, cover;
    background-blend-mode: normal, normal, multiply, normal;
}

/* Reflective floor */
.nxe-floor {
    position: fixed; inset: auto 0 0 0; height: 38vh;
    z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse 90% 100% at 50% 100%, rgba(200,220,180,0.25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 55% at 50% 100%, rgba(255,255,255,0.18) 0%, transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(20,35,10,0.45) 55%, rgba(8,16,4,0.8) 100%);
}
.nxe-floor::after {
    content: ''; position: absolute; inset: 35% 0 0 0;
    background:
        repeating-radial-gradient(ellipse 60% 30% at 50% 100%,
            transparent 0px, transparent 24px,
            rgba(255,255,255,0.04) 24px, rgba(255,255,255,0.04) 25px);
    opacity: 0.7;
}

/* Drifting bokeh haze */
.nxe-bokeh {
    position: fixed; inset: -10%; z-index: 1;
    pointer-events: none; mix-blend-mode: screen;
    background:
        radial-gradient(circle 90px at 10% 18%, rgba(255,255,255,0.22), transparent 70%),
        radial-gradient(circle 55px at 25% 70%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(circle 40px at 78% 28%, rgba(255,255,255,0.24), transparent 70%),
        radial-gradient(circle 110px at 88% 82%, rgba(255,255,255,0.14), transparent 70%),
        radial-gradient(circle 65px at 48% 12%, rgba(255,255,255,0.18), transparent 70%),
        radial-gradient(circle 50px at 62% 90%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(circle 30px at 40% 45%, rgba(255,255,255,0.12), transparent 70%);
    animation: nxe-drift 26s ease-in-out infinite alternate;
}
@keyframes nxe-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(28px, -22px, 0) scale(1.04); }
    100% { transform: translate3d(-12px, 14px, 0) scale(1); }
}

/* =========================================================
   1a. HEADER / NAVBAR — Xbox 360 NXE theme
   Strip all FR blue chrome. The NXE backdrop shows through
   a fully transparent header. Nav links become clean
   Frutiger-light text with a green-glow hover. Dropdowns
   get the frosted dark-glass treatment.
   ========================================================= */

/* ---- outer wrapper: fully invisible ---- */
body.profile-page .myspace-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* ---- top bar (logo + search) ---- */
body.profile-page .myspace-header .top-nav,
body.profile-page .myspace-header .top {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Tone the logo down to a white silhouette that reads on green */
body.profile-page .myspace-header .nav-logo,
body.profile-page .myspace-header #logo {
    filter: brightness(0) invert(1) !important;
    opacity: 0.70 !important;
}

/* Search: frosted pill */
body.profile-page .myspace-header .search-box,
body.profile-page .myspace-header .search-form {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}
body.profile-page .myspace-header .search-input {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-right: none !important;
    border-radius: 999px 0 0 999px !important;
    color: #fff !important;
    font: 300 11px/1 'Open Sans', sans-serif !important;
    padding: 5px 12px !important;
    outline: none !important;
    transition: background 0.2s, border-color 0.2s !important;
}
body.profile-page .myspace-header .search-input:focus {
    background: rgba(255,255,255,0.20) !important;
    border-color: rgba(190,255,90,0.55) !important;
}
body.profile-page .myspace-header .search-input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}
body.profile-page .myspace-header .search-button {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.0) 60%),
        linear-gradient(180deg, #9ed03a 0%, #4a7818 100%) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-left: none !important;
    border-radius: 0 999px 999px 0 !important;
    color: #fff !important;
    font: 600 11px/1 'Open Sans', sans-serif !important;
    padding: 5px 12px !important;
    cursor: pointer !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.45) !important;
    transition: filter 0.15s !important;
}
body.profile-page .myspace-header .search-button:hover {
    filter: brightness(1.12) !important;
}

/* ---- nav-links bar ---- */
body.profile-page .myspace-header .main-nav-wrapper,
body.profile-page .myspace-header .links,
body.profile-page .myspace-header .main-nav-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Individual nav links — NXE channel label style */
body.profile-page .myspace-header .main-nav li a {
    color: rgba(255,255,255,0.68) !important;
    font: 300 12px/1 'Open Sans', 'Segoe UI', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
    text-decoration: none !important;
    padding: 4px 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    transition: color 0.18s, text-shadow 0.18s !important;
}
body.profile-page .myspace-header .main-nav li a:hover,
body.profile-page .myspace-header .main-nav li a.active {
    color: #fff !important;
    background: transparent !important;
    text-shadow:
        0 0 8px rgba(190,255,90,0.95),
        0 0 18px rgba(150,220,40,0.55),
        0 1px 2px rgba(0,0,0,0.6) !important;
}

/* ---- dropdown menus — frosted dark glass ---- */
body.profile-page .myspace-header .dropdown-menu,
body.profile-page .myspace-header li.dropdown > ul,
body.profile-page .myspace-header li.dropdown > div {
    background: linear-gradient(180deg,
        rgba(18,30,6,0.92) 0%,
        rgba(10,18,3,0.96) 100%) !important;
    border: 1px solid rgba(190,255,90,0.28) !important;
    border-radius: 8px !important;
    box-shadow:
        0 12px 32px rgba(0,0,0,0.65),
        0 0 24px rgba(130,210,40,0.10),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
}
body.profile-page .myspace-header .dropdown-menu a,
body.profile-page .myspace-header li.dropdown > ul li a,
body.profile-page .myspace-header li.dropdown > div a {
    color: rgba(255,255,255,0.80) !important;
    font: 300 12px/1.4 'Open Sans', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    padding: 8px 14px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    transition: color 0.15s, background 0.15s !important;
    display: block !important;
}
body.profile-page .myspace-header .dropdown-menu a:hover,
body.profile-page .myspace-header li.dropdown > ul li a:hover,
body.profile-page .myspace-header li.dropdown > div a:hover {
    background: linear-gradient(90deg, rgba(190,255,90,0.18) 0%, transparent 100%) !important;
    color: #fff !important;
    text-shadow:
        0 0 6px rgba(190,255,90,0.65),
        0 1px 2px rgba(0,0,0,0.5) !important;
}

/* =========================================================
   1. CHROME — channel list, HUD, guide button
   ========================================================= */

.nxe-channels {
    position: fixed; top: 130px; left: 56px;
    z-index: 50;
    display: flex; flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
    font-weight: 300; line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.nxe-chan {
    color: rgba(255,255,255,0.55);
    padding: 2px 0; letter-spacing: 0.4px;
    font-size: 15px;
    font-style: normal;
    display: block;
}
.nxe-chan:nth-child(1) { color: rgba(255,255,255,0.30); font-size: 12.5px; }
.nxe-chan:nth-child(2) { color: rgba(255,255,255,0.40); font-size: 13.5px; }
.nxe-chan:nth-child(3) { color: rgba(255,255,255,0.50); font-size: 14px; }
.nxe-chan:nth-child(4) { color: rgba(255,255,255,0.62); font-size: 15px; }
.nxe-chan-active {
    color: #ffffff !important;
    font-size: 30px !important;
    margin-top: 4px; font-weight: 300 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 24px rgba(190,255,90,0.25);
}

.nxe-hud {
    position: fixed; left: 50%; bottom: 22px;
    transform: translateX(-50%);
    z-index: 50;
    display: flex; flex-direction: row; gap: 18px;
    align-items: center;
    color: #ffffff;
    font-size: 12px; letter-spacing: 0.6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}
.nxe-counter { color: rgba(255,255,255,0.85); font-weight: 600; }
.nxe-idx, .nxe-total, .nxe-counter span { font-style: normal; }
.nxe-select  { display: inline-flex; align-items: center; gap: 8px; }
.nxe-a-btn {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d6f48a 0%, #88c022 55%, #4a7818 100%);
    border: 1px solid rgba(255,255,255,0.65);
    display: inline-flex; align-items: center; justify-content: center;
    color: #ffffff; font: 700 11px/1 'Open Sans', sans-serif;
    font-style: normal;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    box-shadow: 0 3px 8px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(255,255,255,0.5),
                0 0 14px rgba(190,255,90,0.35);
}

.nxe-guide {
    position: fixed; right: 32px; bottom: 24px;
    width: 42px; height: 42px;
    border-radius: 50%; z-index: 50;
    background: radial-gradient(circle at 32% 32%, #f0ffb3 0%, #b6e04f 28%, #5d8e1f 70%, #2c4a10 100%);
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 0 32px rgba(190,255,90,0.7),
                0 0 8px rgba(255,255,255,0.5) inset,
                0 4px 10px rgba(0,0,0,0.55);
    animation: nxe-pulse 3.6s ease-in-out infinite;
}
.nxe-guide::before {
    content: ''; position: absolute; inset: 28% 28% 28% 28%;
    background:
        radial-gradient(circle, transparent 36%, rgba(255,255,255,0.9) 38%, rgba(255,255,255,0.9) 44%, transparent 46%),
        linear-gradient(45deg, transparent 47%, rgba(255,255,255,0.9) 47%, rgba(255,255,255,0.9) 53%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, rgba(255,255,255,0.9) 47%, rgba(255,255,255,0.9) 53%, transparent 53%);
    border-radius: 50%;
}
@keyframes nxe-pulse {
    0%, 100% { box-shadow: 0 0 28px rgba(190,255,90,0.55), inset 0 0 8px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.55); }
    50%      { box-shadow: 0 0 44px rgba(220,255,120,0.85), inset 0 0 14px rgba(255,255,255,0.7), 0 4px 10px rgba(0,0,0,0.55); }
}

/* (Silhouette removed — CSS-only attempt didn't read like an
   avatar. The dashboard reads fine without it.) */

/* =========================================================
   2. LAYOUT — horizontal NXE blade *track*.
   Every card is the same physical size; you slide through
   them with the mouse-wheel/trackpad/swipe, or just hover
   one of the four edge pan-zones to glide the row left/right
   without touching any input device. Whatever card the mouse
   is over becomes the focused blade.
   ========================================================= */

/* Main: don't force 100vh — the .nxe-backdrop is fixed and covers
   the whole viewport visually, so main can collapse to whatever the
   blade track needs. Forcing 100vh on top of FR's header pushes the
   page taller than the viewport and produces a vertical scrollbar. */
body.profile-page main { padding: 0 !important; min-height: 0 !important; }
body.profile-page { overflow-x: hidden; }

body.profile-page .master-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 5;
}

/* Username promoted to "My Xbox" active-channel slot.
   The channel-list placeholder is hidden so the real username takes
   that visual position. */
body.profile-page .col.w-40.left > span[itemprop="name"] {
    position: fixed !important;
    top: 210px; left: 56px;
    z-index: 51; pointer-events: none;
}
body.profile-page .col.w-40.left > span[itemprop="name"] h1 {
    margin: 0 !important;
    color: #ffffff !important;
    font: 300 52px/1 'Open Sans', 'Segoe UI', sans-serif !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 0 22px rgba(190,255,90,0.25) !important;
    padding-left: 22px;
    position: relative;
}
/* NXE-style ▸ marker before the active username — matches the
   ">My Xbox" dot/arrow in the real dashboard. */
body.profile-page .col.w-40.left > span[itemprop="name"] h1::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 0; height: 0;
    border-style: solid;
    border-width: 9px 0 9px 12px;
    border-color: transparent transparent transparent #ffffff;
    transform: translateY(-50%);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
/* Tame the verified-staff SVG so it sits nicely next to the
   huge username instead of dwarfing it. */
body.profile-page .col.w-40.left > span[itemprop="name"] h1 .fr-verified-badge svg {
    width: 26px !important; height: 26px !important;
    margin-left: 6px;
    vertical-align: -3px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
body.profile-page .col.w-40.left > span[itemprop="name"] h1 .profile-role-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    font: 700 11px/1 'Open Sans', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #b6e04f, #4a7820);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 999px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.55);
    box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    vertical-align: middle;
}
.nxe-chan-active { display: none !important; }

/* Flatten the columns so cards become siblings inside .row.profile.
   This lets one rule per card class position it precisely on the
   blade stage, regardless of which column the section lives in. */
body.profile-page .col.w-40.left,
body.profile-page .col.right,
body.profile-page .row.profile .col { display: contents !important; }

/* FR's columns contain a handful of *non-card* siblings (the .mood
   "View my: ..." links, the artist-profile block, raw <script> tags,
   the orphan `<p>Mood: ...</p>` paragraph emitted between </div>s in
   profile.php, etc). With display:contents on the columns those leak
   into the flex track as unstyled orphan items between the blade
   cards.

   Two-layer defence:

   1.  Explicit hide list for every orphan element *type* we know
       about. Short selectors, CSS-2.1 safe, will work in every
       browser regardless of how strict its :not() parser is.
   2.  Negation chain that catches anything new FR ever adds. Uses
       only single-token negations (`:not(.x)`, `:not([attr=...])`)
       which are CSS3-compliant — older :not() parsers will accept
       every clause. */
body.profile-page .col.w-40.left > p,
body.profile-page .col.w-40.left > script,
body.profile-page .col.w-40.left > br,
body.profile-page .col.w-40.left > center,
body.profile-page .col.w-40.left > .mood,
body.profile-page .col.w-40.left > div.mood,
body.profile-page .col.right > p,
body.profile-page .col.right > script,
body.profile-page .col.right > br,
body.profile-page .col.right > center,
body.profile-page .col.right > .mood,
body.profile-page .col.right > div.mood {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

body.profile-page .col.w-40.left > :not(.general-about):not(.contact):not(.url-info):not(.table-section):not(.blurbs):not(.blog-preview):not(.photos-preview):not(.videos-preview):not(.friends):not(.profile-info):not([itemprop="name"]):not(#comments):not(#profile-playlist-container),
body.profile-page .col.right > :not(.general-about):not(.contact):not(.url-info):not(.table-section):not(.blurbs):not(.blog-preview):not(.photos-preview):not(.videos-preview):not(.friends):not(.profile-info):not([itemprop="name"]):not(#comments):not(#profile-playlist-container) {
    display: none !important;
}

/* Anything that still leaks (e.g. anonymous text nodes wrapped by FR
   later) gets neutralised when it lands as a flex item on the track
   itself. Cards are positioned via the explicit class selectors
   above, so we can safely hide any *unknown* direct child of
   .row.profile that isn't a known card class. */
body.profile-page .row.profile > meta,
body.profile-page .row.profile > script,
body.profile-page .row.profile > br,
body.profile-page .row.profile > p:not(.heading p) {
    display: none !important;
}

/* Pan zones/arrows from the previous horizontal-scroll layout
   are dead weight under the cascade fan — the fan itself is
   the navigation now. Hide them entirely. */
.nxe-pan-zone, .nxe-pan-arrow { display: none !important; }

/* =========================================================
   2. THE BLADE CASCADE (true NXE fan)

   Cards are absolutely positioned inside .row.profile, each
   with a hardcoded --cidx ("cascade index"). Position, rotation
   and depth are derived from --cidx so the row reads as a
   classic NXE depth-fan: first card large and front-left, every
   subsequent card pushed right, smaller, tilted and pushed back
   into Z.

   Hover any card → it pulls forward (z+1000, rotateY 0, scale up)
   without disturbing the cascade behind it.
   ========================================================= */
body.profile-page .row.profile {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: calc(100vh - 90px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    perspective: 1800px;
    perspective-origin: 32% 48%;
    transform-style: preserve-3d;
    pointer-events: none;
}
body.profile-page .row.profile > * { pointer-events: auto; }
body.profile-page .row.profile::-webkit-scrollbar { display: none !important; }

/* hide DOM noise that would otherwise sit as a flex item */
body.profile-page .row.profile > meta,
body.profile-page .row.profile > script { display: none !important; }

/* Hardcode each card's slot in the cascade. Order matches the
   real NXE blade taxonomy: avatar/profile → contact → details →
   blurbs → blog → photos → videos → friends → comments. */
body.profile-page .row.profile .general-about               { --cidx: 0; }
/* .contact rides on top of .general-about (same cidx) — it
   provides the action buttons that fill the lower half of the
   profile card and is *not* its own blade. */
body.profile-page .row.profile .contact                     { --cidx: 0; }
body.profile-page .row.profile #profile-playlist-container  { --cidx: 1; }
body.profile-page .row.profile .table-section               { --cidx: 2; }
body.profile-page .row.profile .blurbs                      { --cidx: 3; }
body.profile-page .row.profile .blog-preview                { --cidx: 4; }
body.profile-page .row.profile .photos-preview              { --cidx: 5; }
body.profile-page .row.profile .videos-preview              { --cidx: 6; }
body.profile-page .row.profile .friends                     { --cidx: 7; }
body.profile-page .row.profile #comments                    { --cidx: 8; }
body.profile-page .row.profile .profile-info                { --cidx: 9; }

/* URL card pulled from the cascade per request. */
body.profile-page .row.profile .url-info,
body.profile-page .col.w-40.left > .url-info,
body.profile-page .col.right > .url-info { display: none !important; }

/* The cascade itself. Each card slides ~140px right of the
   previous, rotates -9deg around its left edge, scales 4%
   smaller and recedes 50px deeper per slot. */
body.profile-page .row.profile .general-about,
body.profile-page .row.profile .blurbs,
body.profile-page .row.profile .contact,
body.profile-page .row.profile .friends,
body.profile-page .row.profile .blog-preview,
body.profile-page .row.profile .photos-preview,
body.profile-page .row.profile .videos-preview,
body.profile-page .row.profile .table-section,
body.profile-page .row.profile #comments,
body.profile-page .row.profile .profile-info,
body.profile-page .row.profile #profile-playlist-container {
    position: absolute !important;
    left: 290px !important;
    top: 50% !important;
    width: 310px !important;
    height: min(440px, calc(100vh - 200px)) !important;
    min-height: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    background:
        linear-gradient(180deg, #c4ec56 0%, #9ed03a 38%, #6ba01e 75%, #3e6711 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 22px 40px rgba(0,0,0,0.55),
        inset 0 -22px 36px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.65) !important;
    overflow: hidden !important;
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    /* Cascade step scales with viewport so the whole fan fits
       on 1024px, 1366px and 1920px screens alike. */
    --cstep: clamp(55px, 7vw, 115px);
    transform:
        translate(calc(var(--cidx, 0) * var(--cstep)), -50%)
        translateZ(calc(var(--cidx, 0) * -45px))
        rotateY(calc(var(--cidx, 0) * -7deg))
        scale(calc(1 - var(--cidx, 0) * 0.04));
    z-index: calc(60 - var(--cidx, 0)) !important;
    opacity: calc(1 - var(--cidx, 0) * 0.05);
    filter: brightness(calc(1 - var(--cidx, 0) * 0.025));
    transition:
        transform 0.45s cubic-bezier(0.2, 0.85, 0.2, 1.05),
        box-shadow 0.3s ease,
        filter 0.3s ease,
        opacity 0.3s ease;
    cursor: pointer;
}

/* HOVER = focus this card. Pull it forward (translateZ +120),
   straighten the tilt (rotateY 0), scale up to 1.05, and slap
   on the NXE green glow. Card stays in its cascade slot so the
   rest of the fan doesn't lurch. */
body.profile-page .row.profile .general-about:hover,
body.profile-page .row.profile .contact:hover,
body.profile-page .row.profile .blurbs:hover,
body.profile-page .row.profile .friends:hover,
body.profile-page .row.profile .blog-preview:hover,
body.profile-page .row.profile .photos-preview:hover,
body.profile-page .row.profile .videos-preview:hover,
body.profile-page .row.profile .table-section:hover,
body.profile-page .row.profile #comments:hover,
body.profile-page .row.profile .profile-info:hover,
body.profile-page .row.profile #profile-playlist-container:hover,
/* contact rides on general-about — hover either pops *both* */
body.profile-page .row.profile:has(.contact:hover) .general-about,
body.profile-page .row.profile:has(.general-about:hover) .contact {
    transform:
        translate(calc(var(--cidx, 0) * var(--cstep) - 12px), -50%)
        translateZ(120px)
        rotateY(0deg)
        scale(1.05) !important;
    opacity: 1 !important;
    filter: brightness(1.08) saturate(1.12) !important;
    z-index: 1000 !important;
    box-shadow:
        0 28px 52px rgba(0,0,0,0.6),
        0 0 36px rgba(190,255,90,0.75),
        inset 0 -22px 36px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.85) !important;
}

/* glossy white sheen on the top half */
body.profile-page .row.profile .general-about::before,
body.profile-page .row.profile .blurbs::before,
body.profile-page .row.profile .friends::before,
body.profile-page .row.profile .blog-preview::before,
body.profile-page .row.profile .photos-preview::before,
body.profile-page .row.profile .videos-preview::before,
body.profile-page .row.profile .profile-info::before,
body.profile-page .row.profile .table-section::before,
body.profile-page .row.profile #comments::before,
body.profile-page .row.profile #profile-playlist-container::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 55%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.62) 0%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0.00) 100%);
    pointer-events: none;
    border-radius: 14px 14px 0 0;
    z-index: 1;
}

/* faint NXE bokeh rings printed on each card */
body.profile-page .row.profile .general-about::after,
body.profile-page .row.profile .blurbs::after,
body.profile-page .row.profile .friends::after,
body.profile-page .row.profile .blog-preview::after,
body.profile-page .row.profile .photos-preview::after,
body.profile-page .row.profile .videos-preview::after,
body.profile-page .row.profile .profile-info::after,
body.profile-page .row.profile .table-section::after,
body.profile-page .row.profile #comments::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle 36px at 85% 22%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(circle 22px at 95% 55%, rgba(255,255,255,0.12), transparent 70%),
        radial-gradient(circle 28px at 10% 75%, rgba(255,255,255,0.14), transparent 70%);
    pointer-events: none;
    border-radius: 14px;
    z-index: 1;
}

/* card children sit above sheen / bokeh */
body.profile-page .row.profile .general-about > *,
body.profile-page .row.profile .blurbs > *,
body.profile-page .row.profile .contact > *,
body.profile-page .row.profile .url-info > *,
body.profile-page .row.profile .friends > *,
body.profile-page .row.profile .blog-preview > *,
body.profile-page .row.profile .photos-preview > *,
body.profile-page .row.profile .videos-preview > *,
body.profile-page .row.profile .profile-info > *,
body.profile-page .row.profile .table-section > *,
body.profile-page .row.profile #comments > * {
    position: relative;
    z-index: 2;
}

/* .profile-info uses the standard uniform card geometry — its
   inner content gets a centered, lightweight type treatment so
   the status strip reads at a glance. */
body.profile-page .row.profile .profile-info > .inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
body.profile-page .row.profile .profile-info h3 {
    margin: 0 0 6px !important;
    font: 600 13px/1.2 'Open Sans', sans-serif !important;
    color: #fff !important;
}
body.profile-page .row.profile .profile-info a {
    color: #eaffb6 !important;
    text-decoration: none;
}

/* =========================================================
   3. CARD INTERNALS — title at bottom, content above, scrolls
   ========================================================= */
body.profile-page .row.profile .heading {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 3 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 100%) !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.45) !important;
    border-radius: 0 0 13px 13px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
}
body.profile-page .row.profile .heading h1,
body.profile-page .row.profile .heading h2,
body.profile-page .row.profile .heading h3,
body.profile-page .row.profile .heading h4 {
    margin: 0 !important;
    color: #ffffff !important;
    font: 300 14px/1.15 'Open Sans', 'Segoe UI', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.65), 0 0 12px rgba(190,255,90,0.25) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.profile-page .row.profile .heading a { color: #ffffff !important; opacity: 0.85; text-decoration: none; }

body.profile-page .row.profile .contact > .inner,
body.profile-page .row.profile .blurbs > .inner,
body.profile-page .row.profile .friends > .inner,
body.profile-page .row.profile .table-section > .inner,
body.profile-page .row.profile .photos-preview > .inner,
body.profile-page .row.profile .videos-preview > .inner,
body.profile-page .row.profile #comments > .inner {
    position: absolute !important;
    inset: 8px 8px 46px 8px !important;
    padding: 8px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
    z-index: 2 !important;
}

body.profile-page .row.profile .url-info > p { margin: 6px 12px !important; font-size: 12px; }
body.profile-page .row.profile .blog-preview > h4 {
    position: absolute !important;
    left: 0; right: 0; bottom: 0; z-index: 3;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    font: 300 14px/1.15 'Open Sans', 'Segoe UI', sans-serif !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.65) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.profile-page .row.profile .blog-preview > p {
    margin: 4px 12px !important;
    font-size: 11px !important;
}

/* nested .section inside .blurbs becomes plain text */
body.profile-page .row.profile .blurbs .section,
body.profile-page .row.profile .blurbs .section h4 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    color: #ffffff !important;
}

/* default text colours */
body.profile-page .row.profile p,
body.profile-page .row.profile b,
body.profile-page .row.profile strong,
body.profile-page .row.profile i,
body.profile-page .row.profile em,
body.profile-page .row.profile span,
body.profile-page .row.profile td,
body.profile-page .row.profile li {
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.profile-page .row.profile a {
    color: #eaffb6 !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.18s, text-shadow 0.18s;
}
body.profile-page .row.profile a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px #bfff5a, 0 0 18px #88c022;
}

/* ----- general-about (pfp): top half is the avatar + status,
        bottom half is reserved for the contact buttons which
        ride in via .contact's overlay below. ----- */
body.profile-page .row.profile .general-about .profile-pic {
    text-align: center;
    padding: 14px 0 4px;
    position: relative; z-index: 2;
}
body.profile-page .row.profile .general-about .profile-pic img,
body.profile-page .row.profile .general-about img.pfp-fallback {
    width: 138px !important; height: 138px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    border: 2px solid rgba(255,255,255,0.7) !important;
    box-shadow: 0 12px 22px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
body.profile-page .row.profile .general-about .details {
    position: relative; z-index: 2;
    padding: 4px 14px 4px;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
}

/* =========================================================
   2b. CONTACT-AS-OVERLAY
   .contact piggy-backs on .general-about's blade slot. Its
   own card chrome is stripped (transparent background, no
   border, no glow, no heading), and its .inner is anchored
   to the bottom half of the .general-about card so the
   buttons fill that space exactly.
   ========================================================= */
body.profile-page .row.profile .contact {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* pointer-events left at default (auto) so .contact:hover fires
       continuously as the mouse moves across both the avatar area and
       the button area — prevents the flicker caused by .general-about
       losing :hover when the mouse crossed into .contact .inner */
}
body.profile-page .row.profile .contact::before,
body.profile-page .row.profile .contact::after { display: none !important; }
body.profile-page .row.profile .contact .heading { display: none !important; }
body.profile-page .row.profile .contact > .inner {
    pointer-events: auto;
    position: absolute !important;
    top: 50% !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 8px !important;
    background: rgba(0,0,0,0.18) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    overflow: visible !important;
}

/* ----- contact pill buttons ----- */
body.profile-page .row.profile .contact .f-row {
    display: flex; gap: 8px; margin-bottom: 8px;
}
body.profile-page .row.profile .contact .f-col { flex: 1; min-width: 0; }
body.profile-page .row.profile .contact .f-col a {
    display: flex !important;
    align-items: center; justify-content: center; gap: 6px;
    padding: 7px 8px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.00) 100%),
        linear-gradient(180deg, #c0e85a 0%, #6a9c1e 100%) !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font: 700 9.5px/1 'Open Sans', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.55) !important;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow:
        0 4px 10px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -6px 12px rgba(0,0,0,0.18) !important;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
}
body.profile-page .row.profile .contact .f-col a:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);
}
body.profile-page .row.profile .contact .f-col a img.icon {
    width: 12px !important; height: 12px !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)) brightness(1.15);
}

/* ----- details / interests tables ----- */
body.profile-page .row.profile .details-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 11px;
}
body.profile-page .row.profile .details-table td {
    padding: 3px 5px !important;
    border-bottom: 1px dashed rgba(255,255,255,0.18) !important;
    vertical-align: top;
    background: transparent !important;
    color: #fff !important;
}
body.profile-page .row.profile .details-table tr:last-child td { border-bottom: 0 !important; }

/* ----- top friends grid ----- */
body.profile-page .row.profile #top8-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
body.profile-page .row.profile #top8-grid .person {
    padding: 3px !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
body.profile-page .row.profile #top8-grid .person img:not(.icon) {
    max-width: 100% !important; height: 48px !important;
    border-radius: 6px !important;
}
body.profile-page .row.profile #top8-grid .person p {
    font-size: 9.5px !important; color: #fff !important;
}

/* ----- photos / videos preview ----- */
body.profile-page .row.profile .pf-photo-grid,
body.profile-page .row.profile .pf-video-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px;
}
body.profile-page .row.profile .pf-photo-thumb,
body.profile-page .row.profile .pf-video-thumb {
    width: 100% !important;
    aspect-ratio: 1/1; object-fit: cover;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
}

/* ----- comments table ----- */
body.profile-page .row.profile .comments-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
}
body.profile-page .row.profile .comments-table tr { background: transparent !important; }
body.profile-page .row.profile .comments-table td {
    padding: 6px !important;
    font-size: 10.5px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04)) !important;
    border-top: 1px solid rgba(255,255,255,0.30) !important;
}
body.profile-page .row.profile .comments-table img {
    border-radius: 5px !important;
    max-width: 36px !important; height: 36px !important;
    object-fit: cover !important;
}

/* ----- mutual chips ----- */
body.profile-page .row.profile .mutual-friend-chip {
    background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.05)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    font-size: 10px !important;
}

/* =========================================================
   4. PROFILE TUNES — a real cascade card at slot 1.
   The widget gets injected at runtime by `profile-playlist.js`
   into a varying spot in the left column. The shared
   cascade rule (above) handles position/size/transform/gradient;
   this block only contains the inner-widget styling so the
   "Profile Tunes" header and track list look at home inside
   the green blade.
   ========================================================= */
#profile-playlist-container > .profile-playlist-widget {
    position: absolute !important;
    inset: 8px 10px 46px 10px !important;
    width: auto !important;
    max-width: none !important;
    background: rgba(0,0,0,0.18) !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    z-index: 2 !important;
}
#profile-playlist-container .profile-playlist-widget h3 {
    color: #fff !important;
    font: 600 12px/1 'Open Sans', sans-serif !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 2px 0 8px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
#profile-playlist-container .profile-playlist-widget ul {
    list-style: none !important;
    margin: 0 !important; padding: 0 !important;
    max-height: calc(100% - 32px);
    overflow-y: auto;
}
#profile-playlist-container .profile-playlist-widget li {
    color: #fff !important;
    font-size: 11px !important;
    padding: 5px 8px !important;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)) !important;
    margin: 3px 0 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
/* "Profile Tunes" label badge at the bottom of the blade so
   the card has a heading like the rest of the cascade. */
#profile-playlist-container::after {
    content: 'Profile Tunes';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 100%);
    border-top: 1px solid rgba(255,255,255,0.45);
    border-radius: 0 0 13px 13px;
    color: #fff;
    font: 300 14px/1.15 'Open Sans', 'Segoe UI', sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.65), 0 0 12px rgba(190,255,90,0.25);
    z-index: 3;
    pointer-events: none;
}

/* =========================================================
   5. SCROLLBARS
   ========================================================= */
body.profile-page .row.profile .inner::-webkit-scrollbar { width: 8px; }
body.profile-page .row.profile .inner::-webkit-scrollbar-track { background: rgba(0,0,0,0.30); }
body.profile-page .row.profile .inner::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cfeb74, #4a7820);
    border-radius: 4px;
}

/* =========================================================
   5b. CARD TEXT READABILITY
   White text + shadow on every text node inside every cascade
   card. The wildcard ensures site !important rules cannot win.
   Images, SVGs, buttons (contact buttons have their own styles)
   and badge spans are excluded.
   ========================================================= */
body.profile-page .row.profile .general-about *,
body.profile-page .row.profile .table-section *,
body.profile-page .row.profile .blurbs *,
body.profile-page .row.profile .blog-preview *,
body.profile-page .row.profile .photos-preview *,
body.profile-page .row.profile .videos-preview *,
body.profile-page .row.profile .friends *,
body.profile-page .row.profile #comments *,
body.profile-page .row.profile #profile-playlist-container * {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),
         1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),
         1px  1px 0 rgba(0,0,0,0.85),
         0 0 8px rgba(0,0,0,0.7) !important;
}
/* Restore non-text elements that shouldn't inherit text colour */
body.profile-page .row.profile .general-about img,
body.profile-page .row.profile .table-section img,
body.profile-page .row.profile .blurbs img,
body.profile-page .row.profile .blog-preview img,
body.profile-page .row.profile .photos-preview img,
body.profile-page .row.profile .videos-preview img,
body.profile-page .row.profile .friends img,
body.profile-page .row.profile #comments img,
body.profile-page .row.profile #profile-playlist-container img {
    text-shadow: none !important;
}
/* Link hover: green glow + outline retained */
body.profile-page .row.profile .general-about a:hover,
body.profile-page .row.profile .table-section a:hover,
body.profile-page .row.profile .blurbs a:hover,
body.profile-page .row.profile .blog-preview a:hover,
body.profile-page .row.profile .photos-preview a:hover,
body.profile-page .row.profile .videos-preview a:hover,
body.profile-page .row.profile .friends a:hover,
body.profile-page .row.profile #comments a:hover,
body.profile-page .row.profile #profile-playlist-container a:hover {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),
         1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),
         1px  1px 0 rgba(0,0,0,0.85),
         0 0 12px rgba(190,255,90,0.9),
         0 0 6px rgba(0,0,0,0.7) !important;
}
/* Table borders */
body.profile-page .row.profile .table-section table,
body.profile-page .row.profile .table-section td,
body.profile-page .row.profile .table-section th {
    border-color: rgba(255,255,255,0.18) !important;
    background: transparent !important;
}

/* =========================================================
   6. RESPONSIVE — NXE skin on narrow / touch screens.
   The 3D cascade needs ~1100px and a hover cursor.
   On smaller screens: hide the Xbox chrome, reset all
   cascade geometry, and apply the NXE green card look
   as a skin over the normal stacked profile layout.
   Tap targets are plain block links — no hover distortion.
   ========================================================= */
@media (max-width: 1100px) {

    /* Unlock vertical scroll */
    html:has(body.profile-page),
    body.profile-page {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    /* Hide Xbox dashboard chrome — irrelevant on mobile */
    .nxe-channels, .nxe-hud, .nxe-guide,
    .nxe-pan-zone, .nxe-pan-arrow { display: none !important; }

    /* Reduce backdrop overlay further so it doesn't overwhelm a small screen */
    .nxe-floor { opacity: 0.4 !important; }

    /* Profile row: normal block flow */
    body.profile-page .row.profile {
        position: relative !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 12px 60px !important;
        overflow: visible !important;
        perspective: none !important;
        transform: none !important;
    }

    /* Floating name: pull back into flow above the card stack */
    body.profile-page .col.w-40.left > span[itemprop="name"] {
        position: relative !important;
        top: auto !important; left: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto 10px !important;
        padding: 0 4px !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }
    body.profile-page .col.w-40.left > span[itemprop="name"] h1 {
        font-size: 26px !important;
        text-align: left !important;
    }
    body.profile-page .col.w-40.left > span[itemprop="name"] h1::before {
        display: none !important;
    }

    /* All cascade cards: stack as normal flow blocks */
    body.profile-page .row.profile .general-about,
    body.profile-page .row.profile .contact,
    body.profile-page .row.profile .table-section,
    body.profile-page .row.profile .blurbs,
    body.profile-page .row.profile .blog-preview,
    body.profile-page .row.profile .photos-preview,
    body.profile-page .row.profile .videos-preview,
    body.profile-page .row.profile .friends,
    body.profile-page .row.profile #comments,
    body.profile-page .row.profile #profile-playlist-container {
        position: relative !important;
        left: auto !important; top: auto !important;
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        margin: 0 auto 12px !important;
        z-index: auto !important;
        cursor: default !important;
        /* keep card chrome (gradient, border, radius, shadow) from base rules */
    }

    /* Card heading bar: relative so it sits at the bottom of the card */
    body.profile-page .row.profile .heading {
        position: relative !important;
        border-radius: 13px 13px 0 0 !important;
        top: auto !important;
    }

    /* All card inners: static flow, natural height, padding */
    body.profile-page .row.profile .general-about > .inner,
    body.profile-page .row.profile .contact > .inner,
    body.profile-page .row.profile .table-section > .inner,
    body.profile-page .row.profile .blurbs > .inner,
    body.profile-page .row.profile .blog-preview > .inner,
    body.profile-page .row.profile .photos-preview > .inner,
    body.profile-page .row.profile .videos-preview > .inner,
    body.profile-page .row.profile .friends > .inner,
    body.profile-page .row.profile #comments > .inner {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 12px 14px !important;
    }

    /* Pseudo-elements: keep gloss sheen but ensure no absolute clipping */
    body.profile-page .row.profile .general-about::before,
    body.profile-page .row.profile .blurbs::before,
    body.profile-page .row.profile .table-section::before,
    body.profile-page .row.profile .blog-preview::before,
    body.profile-page .row.profile .friends::before,
    body.profile-page .row.profile #comments::before,
    body.profile-page .row.profile #profile-playlist-container::before {
        height: 40% !important;
    }

    /* Contact card: restore as its own card with full chrome */
    body.profile-page .row.profile .contact {
        background:
            linear-gradient(180deg, #c4ec56 0%, #9ed03a 38%, #6ba01e 75%, #3e6711 100%) !important;
        border: 1px solid rgba(255,255,255,0.45) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.65) !important;
        pointer-events: auto !important;
    }
    body.profile-page .row.profile .contact .heading { display: block !important; }
    body.profile-page .row.profile .contact > .inner {
        background: rgba(0,0,0,0.10) !important;
        border: 0 !important;
    }
    /* Contact buttons: wrap nicely */
    body.profile-page .row.profile .contact .f-row {
        flex-wrap: wrap !important;
    }

    /* Status/details text: uncap the height — contact is its own
       card on mobile so no risk of overflow into the button area */
    body.profile-page .row.profile .general-about .details {
        max-height: none !important;
        overflow: visible !important;
    }

    /* General-about: let avatar + info flow naturally */
    body.profile-page .row.profile .general-about > .inner {
        padding-bottom: 50px !important; /* room for heading bar */
    }

    /* Playlist widget */
    #profile-playlist-container > .profile-playlist-widget {
        position: static !important;
        inset: auto !important;
        padding: 10px 12px !important;
        max-height: none !important;
    }

    /* Disable all hover transforms so taps don't cause flash/jump */
    body.profile-page .row.profile .general-about:hover,
    body.profile-page .row.profile .contact:hover,
    body.profile-page .row.profile .table-section:hover,
    body.profile-page .row.profile .blurbs:hover,
    body.profile-page .row.profile .blog-preview:hover,
    body.profile-page .row.profile .photos-preview:hover,
    body.profile-page .row.profile .videos-preview:hover,
    body.profile-page .row.profile .friends:hover,
    body.profile-page .row.profile #comments:hover,
    body.profile-page .row.profile #profile-playlist-container:hover,
    body.profile-page .row.profile:has(.contact:hover) .general-about,
    body.profile-page .row.profile:has(.general-about:hover) .contact {
        transform: none !important;
        filter: none !important;
        box-shadow:
            0 8px 20px rgba(0,0,0,0.35),
            inset 0 -22px 36px rgba(0,0,0,0.22),
            inset 0 1px 0 rgba(255,255,255,0.65) !important;
        z-index: auto !important;
    }
}

/* =========================================================
   7. PROFILE-INFO — hidden from the cascade fan.
   Owner-only element (shows "Edit Your Profile" link).
   Profile editing is accessible via site Settings, so this
   card is simply suppressed to keep the fan clean.
   ========================================================= */
body.profile-page .row.profile .profile-info,
body.profile-page .row.profile .profile-info::before,
body.profile-page .row.profile .profile-info::after {
    display: none !important;
}

/* =========================================================
   8. DYNAMIC GAP-FILL — collapse empty optional slots
   Several sections only render when the user has content:
     #profile-playlist-container (cidx 1) — requires saved songs
     .photos-preview              (cidx 5) — requires uploaded photos
     .videos-preview              (cidx 6) — requires uploaded videos
   When absent, their cidx slot stays vacant and later cards
   appear too far right. The :has() rules below detect the
   missing elements and reassign --cidx so the fan stays tight.
   Specificity increases with each added :has() condition, so
   the most-specific (most absent) rule always wins.
   ========================================================= */

/* --- Single absent: shift affected cards -1 --- */

body.profile-page .row.profile:not(:has(#profile-playlist-container)) .table-section  { --cidx: 1; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .blurbs         { --cidx: 2; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .blog-preview   { --cidx: 3; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .photos-preview { --cidx: 4; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .videos-preview { --cidx: 5; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .friends        { --cidx: 6; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) #comments       { --cidx: 7; }

body.profile-page .row.profile:not(:has(.photos-preview)) .videos-preview { --cidx: 5; }
body.profile-page .row.profile:not(:has(.photos-preview)) .friends        { --cidx: 6; }
body.profile-page .row.profile:not(:has(.photos-preview)) #comments       { --cidx: 7; }

body.profile-page .row.profile:not(:has(.videos-preview)) .friends  { --cidx: 6; }
body.profile-page .row.profile:not(:has(.videos-preview)) #comments { --cidx: 7; }

/* --- Two absent: shift affected cards -2 --- */

body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)) .videos-preview { --cidx: 4; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)) .friends        { --cidx: 5; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)) #comments       { --cidx: 6; }

body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.videos-preview)) .friends  { --cidx: 5; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.videos-preview)) #comments { --cidx: 6; }

body.profile-page .row.profile:not(:has(.photos-preview)):not(:has(.videos-preview)) .friends  { --cidx: 5; }
body.profile-page .row.profile:not(:has(.photos-preview)):not(:has(.videos-preview)) #comments { --cidx: 6; }

/* --- All three absent (current state for this profile): shift friends/comments -3 --- */

body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)):not(:has(.videos-preview)) .friends  { --cidx: 4; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)):not(:has(.videos-preview)) #comments { --cidx: 5; }

/* Touch-only devices (tablets, large phones with wide viewport) —
   same skin as @media max-width:1100px above. */
@media (hover: none) {
    html:has(body.profile-page),
    body.profile-page {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    .nxe-channels, .nxe-hud, .nxe-guide,
    .nxe-pan-zone, .nxe-pan-arrow { display: none !important; }
    body.profile-page .row.profile {
        position: relative !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 12px 60px !important;
        perspective: none !important;
        transform: none !important;
        overflow: visible !important;
    }
    body.profile-page .col.w-40.left > span[itemprop="name"] {
        position: relative !important;
        top: auto !important; left: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto 10px !important;
        padding: 0 4px !important;
    }
    body.profile-page .row.profile .general-about,
    body.profile-page .row.profile .contact,
    body.profile-page .row.profile .table-section,
    body.profile-page .row.profile .blurbs,
    body.profile-page .row.profile .blog-preview,
    body.profile-page .row.profile .photos-preview,
    body.profile-page .row.profile .videos-preview,
    body.profile-page .row.profile .friends,
    body.profile-page .row.profile #comments,
    body.profile-page .row.profile #profile-playlist-container {
        position: relative !important;
        left: auto !important; top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        margin: 0 auto 12px !important;
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        min-height: 0 !important;
        z-index: auto !important;
    }
    body.profile-page .row.profile .general-about > .inner,
    body.profile-page .row.profile .contact > .inner,
    body.profile-page .row.profile .table-section > .inner,
    body.profile-page .row.profile .blurbs > .inner,
    body.profile-page .row.profile .blog-preview > .inner,
    body.profile-page .row.profile .photos-preview > .inner,
    body.profile-page .row.profile .videos-preview > .inner,
    body.profile-page .row.profile .friends > .inner,
    body.profile-page .row.profile #comments > .inner {
        position: static !important;
        inset: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 12px 14px !important;
    }
    body.profile-page .row.profile .heading {
        position: relative !important;
        top: auto !important;
    }
    body.profile-page .row.profile .contact {
        background:
            linear-gradient(180deg, #c4ec56 0%, #9ed03a 38%, #6ba01e 75%, #3e6711 100%) !important;
        pointer-events: auto !important;
    }
    body.profile-page .row.profile .contact .heading { display: block !important; }
    body.profile-page .row.profile .contact > .inner {
        background: rgba(0,0,0,0.10) !important;
        border: 0 !important;
    }
    /* Hard-kill all hover/tap transforms so tapping never causes a jerk */
    body.profile-page .row.profile .general-about,
    body.profile-page .row.profile .contact,
    body.profile-page .row.profile .table-section,
    body.profile-page .row.profile .blurbs,
    body.profile-page .row.profile .blog-preview,
    body.profile-page .row.profile .photos-preview,
    body.profile-page .row.profile .videos-preview,
    body.profile-page .row.profile .friends,
    body.profile-page .row.profile #comments,
    body.profile-page .row.profile #profile-playlist-container {
        transition: none !important;
    }
    body.profile-page .row.profile .general-about .details {
        max-height: none !important;
        overflow: visible !important;
    }
}
</style></style>