/* Default skin: the April 2018 site. Tokens read off the archived
   leanbase/page bundles; :root is 2018 light, the rest override it. */
:root {
    --blue: #00a2ff;
    --blue-hover: #32b5ff;
    --header-bg: #0074bd;
    --green: #02b757;
    --green-hover: #3fc679;
    --robux: #02b757;
    --tix: #cc9e71;
    --bad: #e27676;

    --text: #191919;
    --text-nav: #4a4a4a;
    --text-muted: #757575;
    --text-light: #b8b8b8;

    --page-bg: #e3e3e3;
    --panel-bg: #fff;
    --panel-shadow: 0 1px 4px 0 rgba(25, 25, 25, .3);
    --border: #b8b8b8;
    --rule: #ededed;
    --thumb-rule: #f2f2f2;
    --input-bg: #fff;

    --header-h: 40px;
    --sidebar-w: 175px;

    /* 2018 ran wide with a lighter, larger type scale. */
    --content-w: 1338px;
    --base-size: 16px;
    --base-weight: 300;

    /* Era assets, both pulled from the archived site: the 2017 wordmark
       (Logo/roblox_logo_11212016.svg) and the rebrand icon set
       (Shared/navigation_10022018.svg — the June 2017 sheet the April 2018
       CSS names never got archived; this is the same set, same grid). */
    --logo: url("/img/roblox_logo_11212016.svg");
    --logo-w: 118px;
    --nav-sprite: url("/img/navigation_10022018.svg");
}

/* The March 2016 site: narrower, smaller and heavier type, our own
   BACK TO RBLX wordmark drawn after the classic red-outlined one
   (img/logo_backtorblx_2016.png; two lines, so it runs 36px tall) and
   the February 2016 icon sheet. */
[data-theme="2016-light"] {
    --content-w: 970px;
    --base-size: 14px;
    --base-weight: 400;
    --text: #343434;
    --logo: url("/img/logo_backtorblx_2016.png");
    --logo-w: 78px;
    --logo-h: 36px;
    --nav-sprite: url("/img/navigation_02012016.svg");
}

/* Dark skins are ours; neither era shipped one. */
[data-theme="2018-dark"], [data-theme="2016-dark"] {
    --text: #e8e8e8;
    --text-nav: #cfcfcf;
    --text-muted: #9a9a9a;
    --text-light: #6f6f6f;

    --page-bg: #1b1b1b;
    --panel-bg: #262626;
    --panel-shadow: 0 1px 4px 0 rgba(0, 0, 0, .6);
    --border: #3a3a3a;
    --rule: #333;
    --thumb-rule: #2f2f2f;
    --input-bg: #1f1f1f;
    --header-bg: #005a92;
}

[data-theme="2016-dark"] {
    --content-w: 970px;
    --base-size: 14px;
    --base-weight: 400;
    --logo: url("/img/logo_backtorblx_2016.png");
    --logo-w: 78px;
    --logo-h: 36px;
    --nav-sprite: url("/img/navigation_02012016.svg");
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-300-latin.woff2") format("woff2");
    font-weight: 300; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-300-latin-ext.woff2") format("woff2");
    font-weight: 300; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-400-latin.woff2") format("woff2");
    font-weight: 400; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-400-latin-ext.woff2") format("woff2");
    font-weight: 400; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-600-latin.woff2") format("woff2");
    font-weight: 600; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-600-latin-ext.woff2") format("woff2");
    font-weight: 600; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-700-latin.woff2") format("woff2");
    font-weight: 700; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-700-latin-ext.woff2") format("woff2");
    font-weight: 700; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--page-bg);
    color: var(--text);
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
    font-size: var(--base-size);
    font-weight: var(--base-weight);
    line-height: 1.4;
}

a { color: var(--text); text-decoration: none; }

h1, h2, h3 { margin: 0 0 12px; font-weight: 400; }
h1 { font-size: 32px; font-weight: 300; }
h2 { font-size: 20px; }
h3 { font-size: 16px; font-weight: 600; }

/* --- sprite icons: positions from the archived stylesheets; the 2016 and
   2018 sheets share the 28px grid and row order, so only the file changes
   between skins. --- */

[class^="icon-nav-"], [class*=" icon-nav-"] {
    background-image: var(--nav-sprite);
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    flex: none;
}
.icon-nav-menu               { background-position: 0 0; }
.icon-nav-robux              { background-position: 0 -28px; }
.icon-nav-tix                { background-position: 0 -56px; }
.icon-nav-settings           { background-position: 0 -84px; }
.icon-nav-search             { background-position: 0 -112px; }
.icon-nav-home               { background-position: 0 -140px; }
.icon-nav-profile            { background-position: 0 -168px; }
.icon-nav-message            { background-position: 0 -196px; }
.icon-nav-friends            { background-position: 0 -224px; }
.icon-nav-charactercustomizer{ background-position: 0 -252px; }
.icon-nav-inventory          { background-position: 0 -280px; }
.icon-nav-trade              { background-position: 0 -308px; }
.icon-nav-group              { background-position: 0 -336px; }
.icon-nav-forum              { background-position: 0 -364px; }
.icon-nav-blog               { background-position: 0 -392px; }
/* The 2018 notification stream, row 476 of the 2018 sheet (leanbase's
   .icon-nav-notification-stream); the 2016 sheet has no such row. */
.icon-nav-notification       { background-position: 0 -476px; }

button:hover > .icon-nav-menu     { background-position: -28px 0; }
a:hover > .icon-nav-robux         { background-position: -28px -28px; }
a:hover > .icon-nav-tix           { background-position: -28px -56px; }
.gear-menu summary:hover .icon-nav-settings,
.gear-menu[open] .icon-nav-settings { background-position: -28px -84px; }

a:hover > .icon-nav-home               { background-position: -28px -140px; }
a:hover > .icon-nav-profile            { background-position: -28px -168px; }
a:hover > .icon-nav-message            { background-position: -28px -196px; }
a:hover > .icon-nav-friends            { background-position: -28px -224px; }
a:hover > .icon-nav-charactercustomizer{ background-position: -28px -252px; }
a:hover > .icon-nav-inventory          { background-position: -28px -280px; }
a:hover > .icon-nav-trade              { background-position: -28px -308px; }
a:hover > .icon-nav-group              { background-position: -28px -336px; }
a:hover > .icon-nav-forum              { background-position: -28px -364px; }
a:hover > .icon-nav-blog               { background-position: -28px -392px; }
a:hover > .icon-nav-notification       { background-position: -28px -476px; }

/* --- fixed white header --- */

.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--header-bg);
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 4px;
}

.header-burger {
    width: 38px; height: var(--header-h);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: 0; background: none; padding: 0;
}

/* The wordmark, 118x30 as both eras' headers sized it; a skin with a taller
   mark sets --logo-h (the 2016 two-line mark is 78x36). */
.header-logo { display: flex; align-items: center; padding: 0 12px 0 8px; }
.header-logo .logo {
    display: block;
    width: var(--logo-w);
    height: var(--logo-h, 30px);
    background: var(--logo) no-repeat 0 0;
    background-size: var(--logo-w) var(--logo-h, 30px);
}

.header-links { display: flex; align-items: center; height: 100%; }
.header-links a {
    display: flex; align-items: center;
    padding: 6px 9px;
    margin: 0 2px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    border-radius: 5px;
}
.header-links a:hover { color: #fff; background: rgba(25, 25, 25, .1); }

.header-search {
    flex: 1;
    max-width: 550px;
    margin: 0 12px;
    position: relative;
}
.header-search input {
    background: var(--input-bg);
    color: var(--text);
    width: 100%;
    height: 28px;
    padding: 2px 34px 2px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--panel-bg);
    border: 0;
    border-radius: 3px;
}
.header-search input:focus { outline: none; }
.header-search-btn {
    position: absolute; right: 2px; top: 50%;
    transform: translateY(-50%);
    background: none; border: 0; padding: 0;
    cursor: pointer;
    display: flex; align-items: center;
}
.header-search .icon-nav-search { transform: scale(.85); opacity: .7; }
.header-search-btn:hover .icon-nav-search { opacity: 1; }

.header-right { display: flex; align-items: center; margin-left: auto; gap: 2px; }

.header-currency {
    display: flex; align-items: center;
    padding: 0 4px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    height: var(--header-h);
}
.header-currency:hover { color: #fff; }

.gear-menu { position: relative; }
.gear-menu summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center;
    height: var(--header-h);
    padding: 0 8px;
}
.gear-menu summary::-webkit-details-marker { display: none; }
.gear-dropdown {
    position: absolute;
    right: 0; top: var(--header-h);
    background: var(--panel-bg);
    box-shadow: 0 1px 4px rgba(25,25,25,.3);
    min-width: 140px;
    padding: 4px 0;
}
.gear-dropdown a, .gear-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--text-nav);
    background: none;
    border: 0;
    cursor: pointer;
}
.gear-dropdown a:hover, .gear-dropdown button:hover { background: var(--page-bg); }

.header-auth { display: flex; align-items: center; gap: 8px; padding-right: 4px; }
.header-auth .login-link { font-weight: 400; color: #fff; }

/* --- left sidebar --- */

.sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--panel-bg);
    z-index: 90;
    padding-top: 8px;
    overflow-y: auto;
}
.sidebar a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 14px;
    font-size: 16px;
    color: var(--text-nav);
}
.sidebar a:hover { background: var(--page-bg); }
.sidebar .upgrade { padding: 10px 14px; }
.sidebar .upgrade .btn { width: 100%; padding: 6px 0; font-size: 16px; }

/* The forum closed in December 2017. */
[data-theme^="2018"] .sidebar .nav-forum { display: none; }

body.no-sidebar .sidebar { display: none; }

/* --- content --- */

.page {
    padding: calc(var(--header-h) + 15px) 15px 60px;
    margin-left: var(--sidebar-w);
    max-width: calc(var(--content-w) + var(--sidebar-w));
}
body.no-sidebar .page { margin-left: auto; margin-right: auto; max-width: var(--content-w); }

/* Under 992px the column becomes a drawer and the header slims down: see
   the phones section at the end of this file. */

/* --- panels --- */

.panel {
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: var(--panel-shadow);
    padding: 15px;
    margin-bottom: 15px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.panel-head h2 { margin: 0; font-size: 20px; font-weight: 400; }

.panel-title {
    font-size: 20px;
    margin-bottom: 12px;
}

.muted { color: var(--text-muted); }

/* --- flat 2016 buttons --- */

.btn {
    display: inline-block;
    border: 0;
    border-radius: 3px;
    padding: 8px 16px;
    font: inherit;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    text-align: center;
}
.btn-green { background: var(--green); }
.btn-green:hover { background: var(--green-hover); }
.btn-blue { background: var(--blue); }
.btn-blue:hover { background: var(--blue-hover); }
.btn-grey {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.btn-grey:hover { background: var(--page-bg); }
.btn-small { padding: 4px 12px; font-size: 14px; }
.btn-wide { width: 100%; }

/* Full-width system feedback bar, as the 2016/2018 site had it: solid
   colour, white 18px text, no border. */
.alert {
    margin: 0 0 15px;
    padding: 15px;
    border: 0;
    border-radius: 0;
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: 1em;
}
.alert-success { background: #02b757; }
.alert-error, .alert-warning { background: #d86868; }
.alert-info { background: #f68802; }
.alert a, .alert .alert-link { color: #fff; text-decoration: underline; }

/* --- forms --- */

.field { margin-bottom: 12px; }
.field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-nav);
    margin-bottom: 4px;
}
.field input {
    color: var(--text);
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    font: inherit;
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
}
.field input::placeholder { color: var(--text-light); }
.field input:focus { outline: none; border-color: var(--blue); }

.form-narrow { max-width: 400px; margin: 0 auto; }




.validation { color: #d86868; font-size: 13px; margin-top: 3px; display: block; }

/* --- logged-in home --- */

.home-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}
.home-avatar {
    color: var(--text-light);
    width: 110px; height: 110px;
    border-radius: 50%;
    background: var(--panel-bg);
    box-shadow: 0 1px 4px 0 rgba(25,25,25,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 44px;
    font-weight: 300;
    color: var(--text-light);
}
.home-head h1 { margin: 0; }

.empty-state { color: var(--text-muted); padding: 18px 0; text-align: center; }

/* The home rows. Friends are the round headshots of the 2018 home; the
   2016 skins show the square full-body thumbnails its home carousel had.
   Game cards are the games page's own. */
.home-friends {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.home-friend a { display: block; text-align: center; color: var(--text); }
.home-friend a:hover { text-decoration: none; }
.home-friend a:hover .home-friend-name { color: var(--blue); }
.home-friend-image {
    display: block;
    width: 100px; height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--page-bg);
}
.home-friend-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-friend-image .era-2016 { display: none; }
.home-friend-name {
    display: block;
    padding-top: 6px;
    font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme^="2016"] .home-friend-image {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--panel-bg);
}
[data-theme^="2016"] .home-friend-image .era-2018 { display: none; }
[data-theme^="2016"] .home-friend-image .era-2016 { display: block; }
[data-theme^="2016"] .home-friend-name { font-size: 12px; font-weight: 700; }
.home-section .empty-state a { color: var(--blue); }

/* --- landing (metrics from the archived June 2016 front page) --- */

.landing {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background: url("/img/landing-roller.jpg") center / cover no-repeat #1b2a35;
}

.landing-nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    min-height: 66px;
    background: rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 16px;
    z-index: 10;
}
.landing-nav .nav-brand {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 10px;
    white-space: nowrap;
}
.landing-nav .nav-links { display: flex; }
.landing-nav .nav-links a { color: #fff; font-size: 18px; font-weight: 300; padding: 14px 15px; }
.landing-nav .nav-links a:hover { text-decoration: none; opacity: .85; }

.nav-login { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-login input {
    height: 34px;
    width: 150px;
    padding: 5px 12px;
    border: 1px solid #b8b8b8;
    border-radius: 3px;
    font: 300 15px "Source Sans Pro", Arial, sans-serif;
    color: var(--text);
}
.nav-login input::placeholder { color: #b8b8b8; }
.nav-login .nav-login-btn {
    height: 34px;
    padding: 0 18px;
    background: #00b259;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #fff;
    font: 400 14px "Source Sans Pro", Arial, sans-serif;
    cursor: pointer;
}
.nav-login .nav-login-btn:hover { background: #3fc679; }
.nav-login .forgot { color: #fff; font-size: 13px; font-weight: 300; }
.nav-login .forgot:hover { text-decoration: underline; }

.landing-center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    padding: 170px 4vw 40px;
}

.landing-hero { flex: 0 1 480px; text-align: center; padding-top: 40px; }
.landing-hero .brand-name {
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.landing-hero h1 {
    display: inline-block;
    margin-top: 6px;
    padding: 10px 25px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 35px;
    font-weight: 300;
}
.landing-hero h1 sup { font-size: 15px; }

.attribution {
    position: absolute;
    bottom: 4%;
    left: 3%;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* signup panel */

.landing-panel {
    flex: 0 1 440px;
    background: var(--panel-bg);
    padding: 10px 20px 20px;
    border-radius: 2px;
}
.landing-panel .signup-header {
    margin: 0;
    padding: 5px 10px 20px;
    font-size: 24px;
    font-weight: 300;
    color: var(--text);
    text-transform: uppercase;
    text-align: center;
}

.landing-panel .input-field {
    width: 100%;
    height: 46px;
    padding: 5px 12px;
    border: 1px solid #b8b8b8;
    border-radius: 6px;
    font: 300 20px "Source Sans Pro", Arial, sans-serif;
    color: var(--text);
}
.landing-panel .input-field::placeholder { color: #b8b8b8; font-weight: 300; }
.landing-panel .input-field:focus { outline: none; border-color: #00a2ff; }

.landing-panel .input-validation {
    display: block;
    min-height: 25px;
    margin: 0;
    font-size: 13px;
    color: #d86868;
}

.fake-input {
    display: flex;
    align-items: stretch;
    height: 46px;
    border: 1px solid #b8b8b8;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 300;
    color: var(--text);
    overflow: hidden;
}
.fake-input > label { padding: 10px; flex: 0 0 24%; }
.fake-input > label.gender-circle { flex: none; padding: 0; }

.birthday-select {
    flex: 1;
    border: 0;
    border-left: 1px solid #b8b8b8;
    padding: 0 22px 0 8px;
    font: 300 18px "Source Sans Pro", Arial, sans-serif;
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
    background: url("/img/icon-downarrow.svg") no-repeat calc(100% - 4px) center / 16px #fff;
    cursor: pointer;
}
.birthday-select:focus { outline: none; }
.birthday-select:invalid { color: #b8b8b8; }

.gender-row { align-items: center; gap: 8px; }
.gender-row > label { flex: 0 0 75px; padding: 0 0 0 10px; }
.gender-circle {
    flex: none;
    box-sizing: border-box;
    width: 32px; height: 32px;
    margin: 0 10%;
    border: 1px solid #b8b8b8;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.gender-wrap input[type="radio"] { display: none; }
/* the archived pngs are two-frame sprites: grey, then colored */
.gender-icon { display: inline-block; height: 26px; }
.gender-icon.m { width: 21px; background: url("/img/gender-male.png") 0 0 no-repeat; }
.gender-icon.f { width: 24px; background: url("/img/gender-female.png") 0 0 no-repeat; }
.gender-check-m:checked ~ .fake-input .gender-circle.m { border: 2px solid #32b5ff; }
.gender-check-m:checked ~ .fake-input .gender-icon.m { background-position: -22px 0; }
.gender-check-f:checked ~ .fake-input .gender-circle.f { border: 2px solid #d86868; }
.gender-check-f:checked ~ .fake-input .gender-icon.f { background-position: -24px 0; }

.signup-submit {
    width: 100%;
    margin-top: 14px;
    padding: 9px;
    background: #02b757;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #fff;
    font: 400 18px "Source Sans Pro", Arial, sans-serif;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.signup-submit:hover { background: #3fc679; box-shadow: 0 1px 3px rgba(150, 150, 150, .74); }


@media (max-width: 980px) {
    .landing-hero, .landing-nav .nav-links, .attribution { display: none; }
    .landing-center { padding-top: 130px; }
    .nav-login input { width: 110px; }
}

/* --- ledger table --- */

.ledger { width: 100%; border-collapse: collapse; }
.ledger th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--rule);
    padding: 0 8px 8px;
}
.ledger td { padding: 9px 8px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger .right { text-align: right; }
.ledger .positive { color: var(--robux); font-weight: 600; }
.ledger .negative { color: var(--bad); font-weight: 600; }

/* --- status list --- */

.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule);
}
.status-list li:last-child { border-bottom: 0; }
.ok { color: var(--green); font-weight: 600; }
.down { color: var(--bad); font-weight: 600; }

/* --- footer: the white band both eras closed the page with (archived
   .container-footer / .footer / .text-footer-nav rules): a centred row of
   18px light links in #B8B8B8 that darken on hover, then the 10px note. --- */

.container-footer {
    margin-left: var(--sidebar-w);
    background: var(--panel-bg);
    padding: 12px 0;
}
body.no-sidebar .container-footer { margin-left: 0; }
@media (max-width: 991px) { .container-footer { margin-left: 0; } }

.footer { max-width: 970px; margin: 0 auto; text-align: center; }
.footer-links { list-style: none; padding: 0; margin: 20px 0 32px; }
.footer-link { display: inline-block; margin: 6px; min-width: 10%; white-space: nowrap; }
.text-footer-nav { color: var(--text-light); font-size: 18px; font-weight: 300; }
.text-footer-nav:hover { color: var(--text); text-decoration: none; }
.text-footer { font-size: 10px; font-weight: 400; color: var(--text-light); }
.footer-note { width: 78%; margin: 12px auto; }

/* --- /newlogin replica (markup and metrics from the June 2016 archive) --- */

body.body-white { background: #fff; min-height: 100vh; }
body.body-white .page { max-width: 970px; }

.legacy-login h1 {
    font-size: 40px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -2px;
    margin: 10px 0;
}
.legacy-login h2 {
    font-size: 25px;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 15px;
}
.legacy-login .text { font-size: 16px; color: var(--text); margin: 0 0 6px; }

.legacy-loginarea {
    display: flex;
    border-bottom: 1px solid #ccc;
}
.legacy-left { width: 465px; padding: 0 0 20px 20px; }
.legacy-right { flex: 1; border-left: 1px solid #ccc; padding: 4px 0 20px 30px; }

.legacy-login table td { padding-bottom: 20px; }
.legacy-login .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding-right: 5px;
}

.legacy-textbox {
    box-sizing: content-box;
    width: 242px;
    height: 21px;
    padding: 0 3px;
    border: 1px solid #a7a7a7;
    font: 12px/19px "Source Sans Pro", Arial, Helvetica, sans-serif;
    color: var(--text);
    border-radius: 0;
}
.legacy-textbox:focus { outline: 1px solid #a7a7a7; }

.forgot-panel { float: left; line-height: 38px; font-size: 12px; }
.forgot-panel a { color: #095fb5; }
.forgot-panel a:hover { text-decoration: underline; }
.signin-panel { float: right; display: flex; gap: 6px; }
.legacy-row::after { content: ""; display: block; clear: both; }

.btn-legacy {
    box-sizing: content-box;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    color: #fff;
    background-repeat: repeat-x;
    font-family: inherit;
}
.btn-legacy:hover { color: #fff; text-decoration: none; }
.btn-legacy-medium {
    padding: 1px 13px 3px;
    height: 28px;
    min-width: 62px;
    font-size: 20px;
    line-height: 1.3em;
    background-position: left -96px;
}
.btn-legacy-medium:hover { background-position: left -128px; }
.btn-legacy-small {
    padding: 1px 7px 0;
    height: 20px;
    min-width: 40px;
    font-size: 14px;
    line-height: 18px;
    background-position: left -160px;
}
.btn-legacy-small:hover { background-position: left -181px; }

.btn-legacy-primary  { border-color: #007001; background-color: #007001; background-image: url("/img/bg-btn-green.png"); }
.btn-legacy-neutral  { border-color: #0852b7; background-color: #0852b7; background-image: url("/img/bg-btn-blue.png"); }
.btn-legacy-negative { border-color: #565656; background-color: #565656; background-image: url("/img/bg-btn-gray.png"); }

.legacy-guest { padding-bottom: 30px; }
.legacy-guest h2 { padding-top: 18px; }
.legacy-guest p { display: inline-block; }

@media (max-width: 720px) {
    .legacy-loginarea { flex-direction: column; }
    .legacy-left { width: auto; padding-left: 0; }
    .legacy-right { border-left: 0; border-top: 1px solid #ccc; padding: 20px 0 20px; }
}

.landing-aux { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.landing-aux a { color: var(--blue); }
.landing-aux a:hover { text-decoration: underline; }

/* --- catalog --- */

.catalog-layout { display: flex; gap: 15px; align-items: flex-start; }
.catalog-filters { flex: 0 0 160px; padding: 12px; align-self: flex-start; }
.filter-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.filter-title:not(:first-child) { margin-top: 16px; }
.filter-list { list-style: none; margin: 0; padding: 0; }
.filter-list a { display: block; padding: 5px 8px; color: var(--text-nav); border-radius: 3px; }
.filter-list a:hover { background: var(--page-bg); }
.filter-list a.active { color: var(--blue); font-weight: 600; }

/* The 2016 rail: checkboxes for genres, radios for price and availability. */
.filter-plain { display: block; padding: 2px 0 4px; color: var(--text-nav); font-size: 13px; }
.filter-plain.active { color: var(--blue); font-weight: 600; }
.filter-checks { display: flex; flex-direction: column; gap: 3px; }
.filter-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-nav);
    cursor: pointer;
}
.filter-check input { margin: 0; accent-color: var(--blue); }
.price-range { display: flex; align-items: center; gap: 4px; margin: 2px 0 2px 20px; flex-wrap: wrap; }
.price-box {
    width: 56px;
    padding: 3px 5px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: 12px;
}
.price-go { padding: 2px 10px; }
.catalog-main { flex: 1; min-width: 0; }

.catalog-search { display: flex; gap: 8px; margin-bottom: 14px; }
.catalog-search-box {
    background: var(--input-bg);
    color: var(--text);
    flex: 1;
    height: 36px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
}
.catalog-search-box:focus { outline: none; border-color: var(--blue); }

/* Catalog cards. Default is the 2018 item-card (archived catalog bundle):
   white, 3px radius, shadow that deepens on hover, a rule under the
   thumbnail, then name, "By creator" and price at 5px inset. */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.item-card {
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: var(--panel-shadow);
    padding: 0 0 5px;
    display: flex;
    flex-direction: column;
    color: var(--text);
    transition: box-shadow 200ms ease;
}
.item-card:hover { text-decoration: none; box-shadow: 0 1px 6px 0 rgba(25, 25, 25, .75); }
.item-thumb {
    aspect-ratio: 1;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.item-thumb-q { font-size: 42px; font-weight: 300; color: #c3c3c3; }
.item-name, .item-creator, .item-sales, .item-price { padding: 0 5px; }
.item-name {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-creator {
    font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-creator .text-label { color: var(--text-light); }
.item-creator .text-name { color: var(--blue); }
.item-sales { display: none; }
.item-price { height: 20px; margin-top: 2px; font-size: 14px; }

/* The 2016 catalog card (archived catalog bundle: .catalog-item): a 1px
   #ccc border, no shadow, 5px inset, 12px type, bold name, a Sales row and
   the price in bold green. Six to a 970px row. */
[data-theme^="2016"] .item-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
[data-theme^="2016"] .item-card {
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 5px;
    font-size: 12px;
}
[data-theme^="2016"] .item-card:hover { box-shadow: none; border-color: var(--text-muted); }
[data-theme^="2016"] .item-thumb { border: 0; border-radius: 0; }
[data-theme^="2016"] .item-name,
[data-theme^="2016"] .item-sales,
[data-theme^="2016"] .item-price { padding: 0; }
[data-theme^="2016"] .item-name { font-size: 12px; font-weight: 700; margin-top: 4px; }
[data-theme^="2016"] .item-creator { display: none; }
[data-theme^="2016"] .item-sales {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
[data-theme^="2016"] .item-sales .text-label { color: var(--text-muted); }
[data-theme^="2016"] .item-price { font-weight: 700; font-size: 12px; height: 18px; }

/* currency icons from the archived May 2016 branded sprite */
.icon-robux-16x16, .icon-robux-20x20, .icon-tix-16x16, .icon-tix-20x20 {
    background-image: url("/img/branded.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    flex: none;
}
.icon-robux-20x20, .icon-tix-20x20 { background-size: 40px auto; width: 20px; height: 20px; }
.icon-robux-16x16, .icon-tix-16x16 { background-size: 32px auto; width: 16px; height: 16px; margin-right: 3px; margin-bottom: 2px; }
.icon-robux-20x20 { background-position: 0 -80px; }
.icon-tix-20x20   { background-position: 0 -100px; }
.icon-robux-16x16 { background-position: 0 -64px; }
.icon-tix-16x16   { background-position: 0 -80px; }
.text-robux { color: #02b757; }
.text-tix   { color: #cc9e71; }

/* --- item page --- */

.item-page { display: flex; gap: 24px; }
.item-page-thumb {
    flex: 0 0 300px;
    aspect-ratio: 1;
    background: #f1f1f1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-page-info { flex: 1; min-width: 0; }
.item-page-name { margin-bottom: 2px; }
.item-page-creator { margin-top: 0; }
.item-stats { border-collapse: collapse; margin: 10px 0; }
.item-stats td { padding: 3px 18px 3px 0; font-size: 14px; }
.item-page-desc { max-width: 60ch; }
.buy-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.owned-note { color: var(--green); font-weight: 600; font-size: 16px; }


@media (max-width: 800px) {
    .catalog-layout { flex-direction: column; }
    .catalog-filters { width: 100%; flex: none; }
    .item-page { flex-direction: column; }
    .item-page-thumb { flex: none; max-width: 300px; }
}

/* --- 2016 item page (markup from the September 2016 archive) --- */

#item-container {
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: var(--panel-shadow);
    padding: 15px;
}
.item-name-container { border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 12px; }
.item-name-container h2 { color: var(--text); font-size: 24px; font-weight: 400; margin: 0 0 2px; }
.text-label { color: var(--text-muted); font-weight: 400; }
.text-name { color: #00a2ff; }

.top-section { display: flex; gap: 12px; }
.thumbnail-holder {
    border: 1px solid var(--border);
    width: 420px;
    height: 420px;
    max-width: 100%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thumbnail-holder .item-thumb-q { font-size: 120px; color: #ccc; font-weight: 300; }

.item-details { flex: 1; min-width: 0; }
.price-container { display: flex; margin-bottom: 12px; }
.price-container-text { width: 70%; }
.price-row { margin-bottom: 6px; display: flex; align-items: center; gap: 3px; }
.price-row .text-robux, .price-row .text-tix { font-size: 20px; line-height: 1.16em; }
.action-button { width: 30%; display: flex; flex-direction: column; gap: 8px; }

.btn-primary-lg {
    border: 1px solid #02b757;
    background: #02b757;
    color: #fff;
    border-radius: 3px;
    padding: 12px 9px;
    font: inherit;
    font-size: 20px;
    width: 100%;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.btn-primary-lg:hover { background: #3fc679; border-color: #3fc679; box-shadow: 0 1px 3px rgba(150,150,150,.74); }
.btn-primary-lg[disabled] { background: #a3e2bd; border-color: #a3e2bd; cursor: default; box-shadow: none; }

.item-field-container { margin-top: 12px; }
.item-field-container::after { content: ""; display: block; clear: both; }
.field-label { float: left; width: 90px; padding-right: 9px; }
.field-content { display: block; margin-left: 99px; font-weight: 400; }
.item-description .field-content { font-weight: 300; white-space: pre-line; }
.owned-note { color: #02b757; font-weight: 600; }

@media (max-width: 900px) {
    .top-section { flex-direction: column; }
    .thumbnail-holder { width: 100%; height: auto; aspect-ratio: 1; }
    .price-container { flex-direction: column; gap: 10px; }
    .price-container-text, .action-button { width: 100%; }
}

/* --- 2016 inventory (assets explorer) --- */

.assets-explorer-title h3 { font-size: 20px; font-weight: 400; margin: 0; padding: 5px 0 10px; }
.assets-explorer-items { list-style: none; margin: 0; padding: 5px 0 0; display: flex; flex-wrap: wrap; }
.assets-explorer-item { width: 16.6%; padding: .75% 1%; }
/* Inventory cards, metrics from the archived March 2016 stylesheet:
   six to a row, a 110px square thumb over a hairline rule. */
.assets-explorer-items {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 5px 0 0;
    width: 100%;
}
.assets-explorer-item { width: 16.6%; padding: .75% 1%; }

.assets-explorer-item-link {
    display: block;
    background: var(--panel-bg);
    box-shadow: 0 1px 3px rgba(150, 150, 150, .74);
    border-radius: 3px;
    width: 100%;
    min-width: 123px;
    padding: 5px;
    margin: 0 auto;
    color: var(--text);
    transition: all .2s ease-in-out;
}
.assets-explorer-item-link:hover { box-shadow: 0 1px 6px 0 #757575; text-decoration: none; }

.assets-explorer-item .item-thumb {
    display: block;
    position: relative;
    border: 0;
    border-bottom: 1px solid var(--thumb-rule);
    border-radius: 0;
    background: none;
    height: auto;
    aspect-ratio: auto;
}
.assets-explorer-item .item-thumb img {
    height: 110px;
    width: 110px;
    display: block;
    margin: auto;
    object-fit: contain;
}
.assets-explorer-name {
    display: block;
    padding-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}
.assets-explorer-creator { padding-top: 5px; font-size: 13px; }
.assets-explorer-creator .text-label { margin-right: 3px; }
.assets-explorer-cost { padding-top: 5px; }

@media (max-width: 1100px) { .assets-explorer-item { width: 25%; } }
@media (max-width: 800px)  { .assets-explorer-item { width: 33.3%; } }
@media (max-width: 560px)  { .assets-explorer-item { width: 50%; } }

/* --- 2016 inventory layout: category rail + header row --- */

.page-title { font-size: 40px; font-weight: 300; color: var(--text); margin: 0 0 12px; }

.inventory-layout { display: flex; gap: 8px; align-items: flex-start; }
.inventory-cats {
    background: var(--panel-bg);
    box-shadow: 0 1px 3px rgba(150, 150, 150, .74);
    width: 152px;
    flex: none;
    padding: 12px 0 12px 12px;
}
.inventory-cats-title { text-transform: uppercase; font-size: 16px; padding-bottom: 6px; }
.inventory-cats ul { list-style: none; margin: 0; padding: 0; }
.inventory-cats a { display: block; padding: 8px 0; color: var(--text); }
.inventory-cats a:hover { color: var(--blue); text-decoration: none; }
.inventory-cats a.active { color: var(--blue); border-right: 4px solid var(--blue); }

.inventory-main { flex: 1; min-width: 0; }
.inventory-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.inventory-cat-name { text-transform: uppercase; font-size: 20px; font-weight: 400; margin: 0; }
.inventory-getmore { display: flex; align-items: center; gap: 10px; text-align: right; font-size: 12px; }

@media (max-width: 760px) {
    .inventory-layout { flex-direction: column; }
    .inventory-cats { width: 100%; }
    .inventory-cats a.active { border-right: 0; }
}

/* --- thumbnails: real renders when present, placeholder until then --- */
.thumb-img { width: 110px; height: 110px; object-fit: contain; display: block; margin: auto; }
.thumb-img-lg { width: 100%; height: 100%; object-fit: contain; display: block; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* --- settings --- */
.settings-row { display: flex; gap: 16px; margin-bottom: 14px; }
.settings-row > .text-label { width: 90px; flex: none; padding-top: 6px; }
.settings-textarea {
    background: var(--input-bg);
    color: var(--text);
    width: 100%;
    min-height: 90px;
    padding: 8px 10px;
    font: inherit;
    border: 1px solid #b8b8b8;
    border-radius: 3px;
    resize: vertical;
}
.settings-textarea:focus { outline: none; border-color: var(--blue); }
.settings-actions { margin-left: 106px; }

/* --- theme picker --- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.theme-option {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-areas: "radio label" "radio note";
    gap: 2px 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    background: var(--panel-bg);
}
.theme-option:hover { border-color: var(--blue); }
.theme-option.selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.theme-option input { grid-area: radio; margin: 0; justify-self: center; }
.theme-label { grid-area: label; font-weight: 600; }
.theme-note { grid-area: note; font-size: 12px; color: var(--text-muted); }

/* --- .section / .container-header: the panel other pages build on; the
   profile itself is styled at the end of this file --- */

.section {
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: var(--panel-shadow);
    padding: 15px;
    margin-bottom: 15px;
}
.container-header h3 { font-size: 20px; font-weight: 400; margin: 0 0 12px; }

/* --- 3D avatar viewer --- */
.viewer3d-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.viewer3d-canvas:active { cursor: grabbing; }
.viewer3d-error { color: var(--text-muted); font-size: 13px; text-align: center; padding-top: 40%; }

/* --- badge and Builders Club art from the archived sprite --- */

.rbx-badge, .bc-icon {
    background-image: url("/img/badges.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

/* Sprite cells are 140px; scale the whole sheet to shrink them. */
.rbx-badge { width: 70px; height: 70px; background-size: 140px auto; }
.bc-icon { width: 26px; height: 26px; background-size: 52px auto; flex: none; }

.rbx-badge.icon-inviter              { background-position: 0 0; }
.rbx-badge.icon-friendship           { background-position: -70px 0; }
.rbx-badge.icon-ambassador           { background-position: -70px -70px; }
.rbx-badge.icon-combat-initiation    { background-position: 0 -140px; }
.rbx-badge.icon-warrior              { background-position: -70px -140px; }
.rbx-badge.icon-bloxxer              { background-position: 0 -210px; }
.rbx-badge.icon-homestead            { background-position: -70px -210px; }
.rbx-badge.icon-bricksmith           { background-position: 0 -280px; }
.rbx-badge.icon-official-model-maker { background-position: -70px -280px; }
.rbx-badge.icon-welcome-to-the-club  { background-position: 0 -70px; }
.rbx-badge.icon-administrator        { background-position: -70px -420px; }
.rbx-badge.icon-veteran              { background-position: 0 -490px; }

.bc-icon.icon-builders-club             { background-position: 0 -130px; }
.bc-icon.icon-turbo-builders-club       { background-position: -26px -130px; }
.bc-icon.icon-outrageous-builders-club  { background-position: 0 -156px; }


/* --- avatar editor --- */
.editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.editor-getmore { display: flex; align-items: center; gap: 10px; font-size: 13px; }

.editor-layout { display: flex; gap: 15px; align-items: flex-start; }
.editor-preview-column { width: 320px; flex: none; }
.editor-preview { position: relative; }
.editor-preview .thumbnail-holder { width: 100%; height: 290px; border: 0; }
.editor-panels { flex: 1; min-width: 0; }

.colour-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.colour-label { width: 80px; flex: none; padding-top: 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}
.swatch:hover { border-color: var(--blue); }
.swatch.selected { outline: 2px solid var(--blue); outline-offset: 1px; }

.assets-explorer-item-link.worn { outline: 2px solid var(--green); }

@media (max-width: 860px) {
    .editor-layout { flex-direction: column; }
    .editor-preview-column { width: 100%; }
}

/* --- people results --- */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.person-card {
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: var(--panel-shadow);
    padding: 12px;
    text-align: center;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.person-card:hover { text-decoration: none; box-shadow: 0 1px 6px 0 #757575; }
.person-avatar {
    width: 90px; height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--page-bg);
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.upload-box form { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.upload-box input[type=file] { font-size: 13px; color: var(--text); max-width: 260px; }

.person-actions { display: flex; gap: 6px; margin-top: 6px; }
.person-actions .btn { flex: 1; }

/* --- limiteds: the original item-label sprite, images/AssetIcons/icon_labels.svg
   as the 2015–2017 site served it (Wayback 20150627184158, one digest across
   every capture). Cells are 14px tall at a 2px inset; the label sits on the
   thumbnail's lower-left corner as the 2016 catalog placed it. The text stays
   in the markup for screen readers, the sprite carries the picture. --- */
.item-thumb { position: relative; }
.limited-tag {
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 52px;
    height: 14px;
    background: url("/img/icon_labels.svg") no-repeat -2px -56px;
    overflow: hidden;
    text-indent: -999px;
    white-space: nowrap;
}
.limited-tag.limited-u { width: 70px; background-position: -2px -128px; }

/* On the item page the same label rides next to the name, inline. */
.item-name-container .limited-tag {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

.item-serial {
    padding-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

/* --- games --- */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.game-card {
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(150, 150, 150, .74);
    padding: 5px;
    color: var(--text);
    transition: all .2s ease-in-out;
}
.game-card:hover { box-shadow: 0 1px 6px 0 #757575; text-decoration: none; }
.game-thumb { display: block; aspect-ratio: 1; background: var(--page-bg); border-radius: 2px; overflow: hidden; }
.game-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-name {
    display: block;
    padding-top: 5px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-meta { display: block; font-size: 12px; color: var(--text-muted); }

.btn-play.is-busy { opacity: .7; pointer-events: none; }

/* --- universal search: "Search <x> in Catalog / People / Games", the
   dropdown of both eras' #navbar-universal-search. 2018 draws a rounded
   white panel under a soft shadow (archived .dropdown-menu), 2016 a plain
   bordered list (.rbx-dropdown-menu); the highlighted row carries the 4px
   blue bar of .rbx-navbar-search-option.selected in both. --- */
.header-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.header-search .search-clear {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: var(--text-light);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    display: none;
}
.header-search.has-text .search-clear { display: block; }
.search-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10000;
    width: 99%;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: 0 -5px 20px rgba(25, 25, 25, .15), 0 3px 8px rgba(25, 25, 25, .25);
    font-size: 16px;
    text-align: left;
}
.header-search.open .search-menu { display: block; }
.search-menu li a {
    display: block;
    padding: 12px;
    line-height: 1.3em;
    color: var(--text);
    text-decoration: none;
}
.search-menu li:hover, .search-menu li.selected {
    background: var(--page-bg);
    box-shadow: 4px 0 0 0 var(--blue) inset;
    cursor: pointer;
}
.search-menu .search-string { word-break: break-all; font-weight: 600; }
.era-2016 { display: none; }
[data-theme^="2016"] .era-2016 { display: inline; }
[data-theme^="2016"] .era-2018 { display: none; }
[data-theme^="2016"] .search-menu {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0;
    box-shadow: none;
    padding: 5px 0;
}
[data-theme^="2016"] .search-menu li:hover,
[data-theme^="2016"] .search-menu li.selected { background: transparent; }

/* --- friends. Default is the 2018 avatar-card (archived web-app bundle):
   a 92px round portrait at a 12px inset, the name at weight 500 with a
   grey status line, buttons in a #f2f2f2 band along the bottom, three to a
   row. The 2016 skins draw the friends-card of the archived friends page:
   a 72px square portrait with a hairline border, name and status beside it,
   the buttons stacked at the right. --- */
.friends-subtitle { margin: 0; }
.friend-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.friend-card {
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: var(--panel-shadow);
    color: var(--text);
    overflow: hidden;
}
.friend-card-content { display: grid; grid-template-columns: auto 1fr; align-items: start; }
.friend-image {
    display: block;
    width: 92px;
    height: 92px;
    margin: 12px;
    border-radius: 50%;
    background: #d1d1d1;
    overflow: hidden;
}
.friend-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.friend-caption { min-width: 0; padding: 12px 12px 12px 0; }
.friend-name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.friend-label { color: var(--text-light); font-size: 14px; padding-top: 3px; }
.friend-buttons {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--page-bg);
    border-top: 1px solid var(--rule);
}
.friend-buttons form { flex: 1; display: flex; gap: 12px; }
.friend-buttons .btn { flex: 1; padding: 7px 0; font-size: 16px; }
@media (max-width: 991px) { .friend-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .friend-cards { grid-template-columns: 1fr; } }

[data-theme^="2016"] .friends-subtitle { font-size: 21px; text-transform: uppercase; font-weight: 400; }
[data-theme^="2016"] .friend-cards { gap: 8px 12px; }
[data-theme^="2016"] .friend-card { box-shadow: 0 1px 3px rgba(150, 150, 150, .74); transition: box-shadow .2s ease-in-out; }
[data-theme^="2016"] .friend-card:hover { box-shadow: 0 1px 6px 0 #757575; }
[data-theme^="2016"] .friend-card-content { grid-template-columns: auto 1fr 30%; }
[data-theme^="2016"] .friend-image {
    width: 72px;
    height: 72px;
    margin: 9px;
    border-radius: 0;
    border: 1px solid #ddd;
    background: var(--panel-bg);
}
[data-theme^="2016"] .friend-caption { padding: 12px 0 0; }
[data-theme^="2016"] .friend-name { font-weight: 400; }
[data-theme^="2016"] .friend-label { color: var(--text-muted); font-size: 12px; }
[data-theme^="2016"] .friend-buttons {
    grid-column: 3;
    flex-direction: column;
    gap: 6px;
    padding: 27px 9px 9px;
    background: transparent;
    border: 0;
}
[data-theme^="2016"] .friend-buttons form { flex-direction: column; gap: 6px; }
[data-theme^="2016"] .friend-buttons .btn { padding: 7px 0; font-size: 14px; }

/* --- avatar editor. Neither era's editor is in the archive (login only),
   so the structure follows what each site did: 2018 is the tabbed editor —
   Recent / Clothing / Body / Animations, item cards you click to wear, a
   Skin Tone palette with an Advanced per-part mode; 2016 is the classic
   stacked page — Body Colours per part, then the wearables by category
   with Wear / Remove buttons. --- */
.editor-tabs { display: flex; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.editor-tab {
    padding: 10px 16px;
    font: inherit;
    font-size: 16px;
    color: var(--text-muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}
.editor-tab.active { color: var(--text); border-bottom-color: var(--blue); }
.editor-subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.editor-subtab {
    padding: 4px 10px;
    font: inherit;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
}
.editor-subtab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.editor-panel { display: none; }
.editor-panel.active { display: block; }
.editor-group { display: none; }
.editor-group.active { display: block; }
.editor-group-title { display: none; }
.editor-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.editor-card {
    position: relative;
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: var(--panel-shadow);
    padding: 0 0 5px;
    cursor: pointer;
    color: var(--text);
}
.editor-card .item-thumb { border-radius: 3px 3px 0 0; border-bottom: 1px solid var(--rule); }
.editor-card-name {
    display: block;
    padding: 5px 5px 0;
    font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-card.worn { outline: 2px solid var(--green); outline-offset: -2px; }
.editor-card.worn::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    border-top: 36px solid var(--green);
    border-left: 36px solid transparent;
    border-radius: 0 3px 0 0;
}
.editor-card form { display: none; }
.skin-tone .swatches { margin-bottom: 8px; }
.advanced-toggle { font: inherit; font-size: 14px; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; }
.advanced-rows { display: none; margin-top: 12px; }
.advanced-rows.open { display: block; }
.editor-empty { color: var(--text-muted); padding: 24px 0; text-align: center; }

/* 2016/17 (the "Character Customize" page): the picture on the left with
   "Avatar" over it and the body settings under it — Body Type scale, the
   R6/R15 switch, the re-draw link — and on the right drop-down categories
   (Recent, Characters, Clothing, Accessories, Body, Animations) with a
   breadcrumb, then a grid of plain thumbnails, each with its blue Wear /
   Remove button in the top-right corner and the name underneath. */
.era-2016-block { display: none; }
[data-theme^="2016"] .era-2016-block { display: block; }
[data-theme^="2016"] .editor-tabs, [data-theme^="2016"] .editor-subtabs { display: none; }
[data-theme^="2016"] .skin-tone, [data-theme^="2016"] .advanced-toggle { display: none; }
[data-theme^="2016"] .advanced-rows { display: block; margin-top: 0; }
[data-theme^="2016"] .editor-avatar-title { font-size: 24px; font-weight: 300; color: var(--text); margin: 0 0 8px; }
[data-theme^="2016"] .editor-body-settings { margin-top: 12px; font-size: 14px; color: var(--text-muted); }
[data-theme^="2016"] .body-type { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
[data-theme^="2016"] .body-type input[type=range] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #00a2ff; }
[data-theme^="2016"] .body-type-label { font-size: 16px; }
[data-theme^="2016"] .avatar-type { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
[data-theme^="2016"] .avatar-type-switch { display: inline-flex; }
[data-theme^="2016"] .avatar-type-switch button {
    padding: 4px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--text-muted);
    background: var(--panel-bg);
    border: 1px solid var(--border);
    cursor: pointer;
}
[data-theme^="2016"] .avatar-type-switch button + button { border-left: 0; }
[data-theme^="2016"] .avatar-type-switch button.active { background: #00a2ff; border-color: #00a2ff; color: #fff; }
[data-theme^="2016"] .redraw { margin-top: 12px; font-size: 13px; }
[data-theme^="2016"] .redraw form { display: inline; }
.link-button { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
[data-theme^="2016"] .avatar-nav.era-2016-block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    border-bottom: 1px solid var(--rule);
}
.avatar-nav-item { position: relative; }
.avatar-nav-toggle {
    font: inherit;
    font-size: 15px;
    color: var(--text-muted);
    background: none;
    border: 0;
    padding: 10px 6px;
    cursor: pointer;
    white-space: nowrap;
}
.avatar-nav-toggle::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    vertical-align: 1px;
}
.avatar-nav-toggle:hover, .avatar-nav-toggle.active { color: var(--text); }
.avatar-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 150px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.avatar-nav-item.open .avatar-nav-menu { display: block; }
.avatar-nav-menu a { display: block; padding: 6px 14px; font-size: 14px; color: var(--text); white-space: nowrap; }
.avatar-nav-menu a:hover { background: var(--page-bg); text-decoration: none; }
[data-theme^="2016"] .avatar-crumbs { font-size: 14px; color: var(--text-muted); margin: 0 0 12px; }
[data-theme^="2016"] .avatar-crumbs .sep { margin: 0 6px; }
[data-theme^="2016"] .editor-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px 10px; }
[data-theme^="2016"] .editor-card {
    cursor: default;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
[data-theme^="2016"] .editor-card .item-thumb { border: 0; border-radius: 0; background: var(--panel-bg); }
[data-theme^="2016"] .editor-card-name { padding: 6px 0 0; font-size: 13px; font-weight: 400; white-space: normal; line-height: 1.3; }
[data-theme^="2016"] .editor-card.worn::after { display: none; }
[data-theme^="2016"] .editor-card.worn { outline: 0; }
[data-theme^="2016"] .editor-card form { display: block; position: absolute; top: 4px; right: 4px; margin: 0; }
[data-theme^="2016"] .editor-card form .btn {
    width: auto;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #00a2ff;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
[data-theme^="2016"] .editor-card form .btn:hover { background: #32b5ff; }

/* --- request-error page: the archived RobloxError.css, identical on the
   2016 and 2018 sites — an 800px white panel, the message on the left at
   36/16px light weights, the builderman image 300px on the right, Back and
   Home pinned to the bottom; everything stacks and centres under 768px. --- */
.request-error-page-content { max-width: 970px; width: 800px; margin: 10% auto 0; }
.request-error-page-content .default-error-page {
    background: var(--panel-bg);
    color: var(--text);
    overflow: hidden;
    padding: 15px;
    position: relative;
    box-shadow: var(--panel-shadow);
}
.request-error-page-content .message-container { float: left; width: 45%; margin: 0 auto; }
.request-error-page-content .error-title, .request-error-page-content .error-message { margin: 0 0 12px; color: var(--text); }
.request-error-page-content .error-title { font-weight: 400; font-size: 36px; line-height: 1.2; }
.request-error-page-content .error-message { font-weight: 300; font-size: 16px; }
.request-error-page-content .error-message span { padding: 0 5px; }
.request-error-page-content .action-buttons { padding: 18px 0; position: absolute; bottom: 0; }
.request-error-page-content .action-buttons a:first-child { margin-right: 12px; }
.request-error-page-content .error-image { height: 300px; float: right; display: block; margin: 20px 0; }
.request-error-page-content .btn-fixed-width { display: inline-block; min-width: 120px; text-align: center; }
.request-error-page-content .btn-primary-md {
    background: var(--blue);
    color: #fff;
    border: 1px solid var(--blue);
    border-radius: 3px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}
.request-error-page-content .btn-primary-md:hover { background: var(--blue-hover); text-decoration: none; }
@media (max-width: 767px) {
    .request-error-page-content { width: 100%; margin-top: 0; }
    .request-error-page-content .message-container { float: none; width: 100%; }
    .request-error-page-content .error-title, .request-error-page-content .error-message { text-align: center; }
    .request-error-page-content .error-title { font-size: 24px; }
    .request-error-page-content .error-image { float: none; margin: 36px auto; }
    .request-error-page-content .action-buttons { position: static; text-align: center; }
}
[data-theme^="2016"] .request-error-page-content .default-error-page { border-radius: 0; box-shadow: none; }
[data-theme^="2016"] .request-error-page-content .btn-primary-md { background: #00a2ff; border-color: #00a2ff; border-radius: 3px; }

/* --- Builders Club: the archived #BCPageContainer table, identical on the
   March 2016 and April 2018 sites — a 720px comparison table with the tier
   badges on top, dark-green values, bright-green emphasis, red "No" in the
   Free column, price cells between, ticks below — and a 250px aside. --- */
.bc-page .bc-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-left: 10px; }
.bc-page .bc-header .page-title { margin: 0 0 12px; }
.expire-text { padding-left: 5px; font-size: 14px; color: var(--text-muted); }
.expire-text .date { color: #cb0000; font-weight: 600; }
.bc-columns { display: flex; gap: 20px; align-items: flex-start; }
.bc-left { flex: 0 0 720px; max-width: 100%; }
.bc-right { flex: 1; min-width: 200px; }
.bc-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel-bg);
    box-shadow: var(--panel-shadow);
    border-radius: 3px;
    color: var(--text);
}
.bc-table td { padding: 4px; }
.bc-table .product-title td { width: 25%; padding: 16px 4px 20px; text-align: center; vertical-align: bottom; }
.bc-table .product-title td.current { background: rgba(0, 162, 255, .08); }
.bc-table .product-title h2 { margin: 0 0 15px; font-size: 22px; font-weight: 700; color: var(--text); }
.bc-table .product-title img { width: 90px; height: 89px; }
.bc-table .product-summary { text-align: center; color: #024102; }
.bc-table .product-summary td { border-top: 1px solid var(--rule); }
.bc-table .product-summary tr:first-child td { border-top: 0; padding-top: 15px; }
.bc-table .product-description { float: left; font-weight: 400; color: var(--text); }
.bc-table .nbc-product { float: right; width: 3em; text-align: center; font-weight: 700; color: #d90000; }
.bc-table .summary-big { font-weight: 700; font-size: 14px; }
.bc-table .summary-big .emphasis { color: #02b302; font-size: 17px; }
.bc-table .summary-big .footnote td { padding-bottom: 25px; text-align: left; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.bc-table .product-grid .product-cell { height: 60px; padding: 12px 0; text-align: center; vertical-align: middle; border-left: 1px solid var(--rule); }
.bc-table .product-grid .product-cell:first-child { border-left: 0; }
.bc-table .product-grid .product-nbc { width: 60%; height: 45px; margin: 0 auto; border-bottom: 1px solid var(--rule); }
.bc-table .product-grid .product-text { height: 35px; font-size: 12px; }
.bc-table .product-grid .product-text h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.bc-table .product-grid form { display: inline; }
.bc-table .product-button { min-width: 110px; }
.bc-table .summary-small td { border-top: 1px solid var(--rule); }
.bc-table .summary-small tr:first-child td { padding-top: 20px; }
.bc-table .summary-small .bc-product, .bc-table .summary-small .tbc-product, .bc-table .summary-small .obc-product { color: #02b302; font-size: 18px; padding: 0; }
[data-theme$="dark"] .bc-table .product-summary { color: #7fd48d; }
.bc-right .cell {
    background: var(--panel-bg);
    box-shadow: var(--panel-shadow);
    border-radius: 3px;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text);
}
.bc-right .cell h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.bc-right .cell p { margin: 0 0 8px; }
@media (max-width: 1000px) {
    .bc-columns { flex-direction: column; }
    .bc-left { flex: none; width: 100%; }
    .bc-table { display: block; overflow-x: auto; }
}

/* --- Buy ROBUX. Default is the April 2018 page: the #191919 aside with the
   Robux man and a list of packages, each a white card with the amount at
   the left and the price button at the right, a red "n% more" badge on the
   bigger ones. The 2016 skins draw the March 2016 page: a white pitch card
   with the big R$, then packages three to a row with the amount centred. --- */
.robux-page .robux-header { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; padding: 10px 0; }
.robux-page .robux-header .page-title { margin: 0; line-height: 1em; }
.robux-page .robux-header h3 { margin: 0; font-weight: 400; }
.robux-balance { margin-left: auto; font-size: 14px; color: var(--text-muted); }
.robux-layout { display: flex; gap: 20px; align-items: flex-start; }
.robux-intro-2018 {
    flex: 0 0 300px;
    padding: 15px;
    background: #191919;
    color: #fff;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
}
.robux-intro-2018 .icon-robux-big {
    float: left;
    width: 98px; height: 98px;
    background: url("/img/branded.svg") no-repeat 0 -686px;
    background-size: 196px auto;
}
.robux-intro-2018 .robux-man { float: right; width: 180px; margin: -27px -27px 12px 0; }
.robux-intro-2018 .robux-text { clear: both; padding-top: 6px; font-size: 16px; }
.robux-intro-2016 { display: none; }
.robux-list { flex: 1; min-width: 0; }
.robux-grid { list-style: none; margin: 0; padding: 0; }
.robux-grid li { margin-bottom: 15px; }
.robux-value { margin: 0; padding: 5px 15px; font-size: 15px; font-weight: 600; color: var(--text); }
.robux-grid .cell-content {
    background: var(--panel-bg);
    padding: 12px 20px;
    box-shadow: var(--panel-shadow);
    border-radius: 3px;
    color: var(--text);
}
.robux-buy-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.robux-title { display: flex; align-items: center; gap: 8px; }
.robux-title .icon-robux-28 { width: 28px; height: 28px; background: url("/img/branded.svg") no-repeat 0 -112px; }
.robux-title h1 { margin: 0; font-size: 28px; font-weight: 400; line-height: .8em; color: var(--robux); }
.robux-title h2 { display: none; }
.banner-wrap { position: relative; }
.banner-wrap .robux-buy { width: 240px; }
.red-banner {
    position: absolute;
    left: -15px; top: -8px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #e2231a;
    color: #fff;
    font-size: 10px;
    line-height: 1em;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.red-banner b { font-size: 18px; font-weight: 400; }
.robux-bonus-nbc { margin-top: 6px; text-align: center; font-size: 14px; color: var(--text-muted); }
.robux-bonus-nbc .robux-bonus { color: var(--text); }
.robux-footer { padding: 12px 0 0 5px; font-size: 12px; color: var(--text-muted); }
.robux-page .btn[disabled] { opacity: .6; cursor: not-allowed; }
@media (max-width: 800px) {
    .robux-layout { flex-direction: column; }
    .robux-intro-2018 { flex: none; width: 100%; }
    .banner-wrap .robux-buy { width: 130px; }
}

[data-theme^="2016"] .robux-intro-2018 { display: none; }
[data-theme^="2016"] .robux-layout { display: block; }
[data-theme^="2016"] .robux-intro-2016 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 5px;
    padding: 12px;
    background: var(--panel-bg);
    box-shadow: 0 0 10px #ccc;
    color: var(--text);
}
[data-theme^="2016"] .robux-intro-2016 .rbx-icon-robux {
    flex: none;
    width: 98px; height: 98px;
    margin: 8px 12px 0 8px;
    background: url("/img/branded.svg") no-repeat 0 -392px;
    background-size: 196px auto;
}
[data-theme^="2016"] .robux-intro-2016 p { margin: 8px 0 0; }
[data-theme^="2016"] .robux-intro-2016 span { display: block; }
[data-theme^="2016"] .robux-grid { display: flex; flex-wrap: wrap; }
[data-theme^="2016"] .robux-grid li { width: 33.333%; padding: 5px; margin: 0; }
[data-theme^="2016"] .robux-value { display: none; }
[data-theme^="2016"] .robux-grid .cell-content { height: 180px; padding: 12px 24px; box-shadow: 0 0 10px #ccc; border-radius: 0; text-align: center; }
[data-theme^="2016"] .robux-buy-container { flex-direction: column; }
[data-theme^="2016"] .robux-title { height: 48px; justify-content: center; }
[data-theme^="2016"] .robux-title .icon-robux-28 { display: none; }
[data-theme^="2016"] .robux-title h1 { font-size: 32px; color: #757575; }
[data-theme^="2016"] .robux-title h2 { display: inline-block; margin: 0; font-size: 20px; font-weight: 400; color: #b8b8b8; }
[data-theme^="2016"] .banner-wrap { width: 100%; }
[data-theme^="2016"] .banner-wrap .robux-buy { width: 100%; margin: 9px 0; }
[data-theme^="2016"] .red-banner { display: none; }
[data-theme^="2016"] .robux-bonus-nbc { font-size: 13px; }
[data-theme$="dark"] .robux-intro-2016, [data-theme$="dark"] .robux-grid .cell-content { box-shadow: var(--panel-shadow); }

/* --- game page: the archived game-detail layout, the same in March 2016
   and April 2018. One white section: the 16:9 carousel at the left (576px
   in 2016, 640px in 2018), the calls-to-action column at the right — title,
   "By creator", the wide green Play between two rules, then the favourite
   star and the vote bar. Below, About / Store / Servers tabs; About holds
   the description, the centred stats row and Report Abuse. Icons come from
   the era's games sheet (NextStyleGuide/games.svg, Shared/games_08302018). --- */
:root { --games-sprite: url("/img/games_08302018.svg"); --carousel-w: 640px; --carousel-h: 360px; }
[data-theme^="2016"] { --games-sprite: url("/img/games_2016.svg"); --carousel-w: 576px; --carousel-h: 324px; }

.game-main-content { position: relative; display: flex; gap: 0; padding: 12px; min-height: 345px; }
.game-thumb-container { flex: none; width: var(--carousel-w); max-width: 100%; }
.carousel { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--page-bg); overflow: hidden; }
.carousel-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-control {
    position: absolute;
    top: 50%;
    width: 44px; height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: rgba(25, 25, 25, .5);
    display: none;
    text-align: center;
}
.carousel:hover .carousel-control { display: block; }
.carousel-control:hover { background: rgba(25, 25, 25, .75); }
.carousel-control.left { left: 18px; }
.carousel-control.right { right: 18px; }
.carousel-control span { display: inline-block; width: 28px; height: 28px; margin: 8px auto; background: url("/img/generic_03112016.svg") no-repeat; }
.carousel-control .icon-carousel-left { background-position: 0 -924px; }
.carousel-control .icon-carousel-right { background-position: 0 -896px; }

.game-calls-to-action { flex: 1; min-width: 0; position: relative; padding: 0 12px 0 24px; display: flex; flex-direction: column; }
#game-context-menu { position: absolute; top: -2px; right: 0; z-index: 2; }
#game-context-menu .icon-more { display: block; width: 28px; height: 28px; background: url("/img/generic_03112016.svg") no-repeat 0 -280px; opacity: .6; }
.game-title-container { flex: 1; padding: 0 24px 0 0; min-height: 120px; }
.game-name { margin: 0; font-size: 30px; font-weight: 400; color: var(--text); letter-spacing: -1px; line-height: 1.2; overflow: hidden; white-space: normal; text-overflow: clip; word-break: break-word; }
.game-creator { margin-top: 2px; }
.game-creator .text-label { color: var(--text-light); }
.game-creator .text-name { color: var(--blue); }
.game-play-buttons { padding: 20px 12px 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; }
.btn-lg { padding: 12px 9px; font-size: 20px; border-radius: 3px; }
.btn-play { min-width: 88%; }
.btn-play[disabled] { background: #a3e2bd; cursor: default; }
.game-play-note { margin-top: 8px; font-size: 13px; color: var(--text-muted); min-height: 1em; }

.share-rate-favorite { list-style: none; margin: 12px 0 0; padding: 0; display: flex; align-items: flex-start; gap: 12px; }
.favorite-button-container { display: flex; align-items: center; gap: 4px; width: 30%; cursor: default; }
.icon-favorite { display: inline-block; width: 28px; height: 28px; background: url("/img/branded.svg") no-repeat 0 -84px; }
.favorite-button-container:hover .icon-favorite,
.favorite-button-container.on .icon-favorite { background-position: -28px -84px; }
/* the thumbs and the star are forms now; the buttons keep the icons' look */
.social-btn { display: inline-flex; align-items: center; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; }
.favorite-button-container form, .voting-panel form { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.voting-panel .upvote.selected .icon-like { background-position: -28px -84px; }
.voting-panel .downvote.selected .icon-dislike { background-position: -28px -112px; }
.text-favorite { color: #f6b702; font-size: 16px; }
.voting-panel { flex: 1; max-width: 300px; min-width: 138px; cursor: default; }
.voting-panel .users-vote { display: flex; justify-content: space-between; align-items: center; height: 28px; }
.voting-panel .upvote, .voting-panel .downvote { display: flex; align-items: center; gap: 4px; }
.voting-panel .icon-like, .voting-panel .icon-dislike { display: inline-block; width: 28px; height: 28px; background: var(--games-sprite) no-repeat; }
.voting-panel .icon-like { background-position: 0 -84px; }
.voting-panel .icon-dislike { background-position: 0 -112px; }
.voting-panel .upvote .vote-text { color: var(--green); }
.voting-panel .downvote .vote-text { color: #e2231a; }
.voting-panel .vote-container { position: relative; height: 6px; margin: 6px 0 0; }
.voting-panel .vote-background { position: absolute; inset: 0; background: var(--text-light); border-radius: 4px; }
.voting-panel .vote-percentage { position: absolute; top: 0; left: 0; height: 100%; background: var(--green); border-radius: 4px 0 0 4px; }

.game-tabs { margin: 8px 0; }
.game-tabs .rbx-tab { width: auto; flex: 1; }
.game-tabs .rbx-tab-heading { padding: 12px 0; cursor: pointer; }
.game-tab-pane { display: none; }
.game-tab-pane.active { display: block; }
.era-2016-tab { display: none; }
[data-theme^="2016"] .era-2016-tab { display: block; }
[data-theme^="2016"] .era-2018-stat { display: none; }
[data-theme^="2016"] .game-play-buttons { padding: 36px 12px; border-color: var(--border); }
[data-theme^="2016"] .game-title-container { min-height: 172px; }

.game-description { font: inherit; margin: 0; padding-bottom: 12px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.game-stats-container { list-style: none; margin: 0; padding: 12px 0; display: flex; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.game-stat { flex: 1; text-align: center; }
.game-stat p { margin: 0; }
.game-stat .text-label { color: var(--text-light); white-space: nowrap; font-size: 14px; }
.game-stat .text-lead { font-size: 16px; font-weight: 600; color: var(--text); }
.game-stat .stat-gears { margin: 3px auto; }
.icon-nogear { display: inline-block; width: 28px; height: 28px; background: var(--games-sprite) no-repeat 0 -336px; vertical-align: middle; }
.game-stat-footer { display: flex; justify-content: space-between; padding: 12px 0 0; font-size: 14px; }
.game-copylocked-footnote { color: var(--text-muted); }
.game-report-abuse { margin-left: auto; }
.game-report-abuse a { color: #e2231a; font-weight: 300; }
.section-content-off { color: var(--text-muted); padding: 12px 0; margin: 0; }

.rbx-game-server-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.rbx-game-server-item { background: var(--panel-bg); border: 1px solid var(--rule); border-radius: 3px; padding: 12px; text-align: center; }
.rbx-game-server-item .text-name { padding: 5px 0; color: var(--text); }
.rbx-game-server-item .rbx-game-status { color: var(--text-light); font-size: 13px; margin-bottom: 12px; }

@media (max-width: 991px) {
    .game-main-content { flex-direction: column; }
    .game-thumb-container { width: 100%; }
    .game-calls-to-action { padding: 12px 0 0; }
}

/* The October 2018 navigation sheet dropped the forum row, so blog sits one
   row higher than on the 2016 sheet; 392 there is the white search icon. */
[data-theme^="2018"] .icon-nav-blog { background-position: 0 -364px; }
[data-theme^="2018"] a:hover > .icon-nav-blog { background-position: -28px -364px; }

/* --- 2016 currency icons in prices. The March 2016 catalog, item and
   inventory pages still ran the old design and priced items with the
   classic glyphs (archived MainCSS: span.robux / span.tickets):
   Icons/img-robux.png, 18x12, dark green #060 bold, and Tickets.png, 16x16,
   brown #A61 bold. The header kept the NextStyleGuide circle and ticket. --- */
[data-theme^="2016"] .icon-robux-16x16,
[data-theme^="2016"] .icon-robux-20x20 {
    background: url("/img/img-robux.png") no-repeat center;
    background-size: 18px 12px;
    width: 18px;
    height: 12px;
    margin-bottom: 0;
}
[data-theme^="2016"] .icon-tix-16x16,
[data-theme^="2016"] .icon-tix-20x20 {
    background: url("/img/img-tickets.png") no-repeat center;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    margin-bottom: 0;
}
[data-theme^="2016"] .text-robux { color: #060; font-weight: 700; }
[data-theme^="2016"] .text-tix { color: #a61; font-weight: 700; }
[data-theme="2016-dark"] .text-robux { color: #5fcf73; }
[data-theme="2016-dark"] .text-tix { color: #d9a86a; }

/* Category groups in the catalog rail: small grey headings between links. */
.filter-list .filter-group {
    padding: 8px 8px 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-light);
}

/* ===================================================================
   Phones and small tablets. Both archived sites went responsive the same
   way under 992px: the header keeps the burger, the wordmark and a search
   icon; the left column becomes a drawer over the page with the top
   links folded in; two-column pages stack. The breakpoints are the
   archived bootstrap grid's (992 / 768 / 544, rounded to what the pages
   here need).
   =================================================================== */

.header-search-toggle, .sidebar-mobile, .nav-backdrop, .filters-toggle, .nav-login-link { display: none; }
/* Guests have no column to fold on a wide screen. */
body.guest .header-burger { display: none; }

@media (max-width: 991px) {
    body.guest .header-burger { display: flex; }
    .header { padding: 0 6px; gap: 2px; }
    .header-logo { padding: 0 6px; }
    .header-links { display: none; }

    /* search: an icon in the header, the box in a band beneath it */
    .header-search-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 38px; height: var(--header-h);
        background: none; border: 0; padding: 0;
        cursor: pointer;
    }
    .header-search-toggle:hover, body.search-open .header-search-toggle { background: rgba(25, 25, 25, .15); }
    .header-search {
        display: none;
        position: fixed;
        top: var(--header-h); left: 0; right: 0;
        max-width: none;
        margin: 0;
        padding: 6px 8px;
        background: var(--header-bg);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
        z-index: 99;
    }
    body.search-open .header-search { display: block; }
    /* 16px keeps iOS from zooming into the field */
    .header-search input { height: 34px; font-size: 16px; }
    .header-search .search-clear { right: 40px; }
    .header-search .search-menu { width: auto; left: 8px; right: 8px; }

    /* the left column becomes a drawer */
    .sidebar, body.no-sidebar .sidebar {
        display: block;
        width: 250px;
        max-width: 85vw;
        padding-top: 0;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        z-index: 97;
    }
    body.nav-open .sidebar { transform: none; box-shadow: 2px 0 10px rgba(0, 0, 0, .3); }
    body.nav-open { overflow: hidden; }
    .nav-backdrop {
        position: fixed;
        top: var(--header-h); left: 0; right: 0; bottom: 0;
        background: rgba(25, 25, 25, .5);
        z-index: 96;
    }
    body.nav-open .nav-backdrop { display: block; }
    .sidebar a { padding: 9px 8px 9px 14px; }
    .sidebar-mobile { display: block; padding: 6px 0; border-bottom: 1px solid var(--rule); }
    .sidebar-mobile > a { color: var(--text); }
    .sidebar-currency { display: flex; gap: 4px; padding: 2px 8px 4px 10px; }
    .sidebar-currency a { padding: 4px 6px; font-weight: 600; }
    .sidebar-currency a:first-child { color: var(--robux); }
    .sidebar-currency a + a { color: var(--tix); }

    .page, body.no-sidebar .page {
        margin: 0;
        max-width: none;
        padding: calc(var(--header-h) + 12px) 10px 40px;
    }
    .container-footer { margin-left: 0; }
    h1 { font-size: 26px; }
    .page-title { font-size: 28px; }
}

/* Stacked columns must take the full width: the flex-start alignment of
   the row layouts would leave each at its intrinsic width, and a grid of
   cards spills past the viewport. */
@media (max-width: 1000px) { .bc-columns { align-items: stretch; } .bc-right { width: 100%; } }
@media (max-width: 860px) { .editor-layout { align-items: stretch; } .editor-panels { width: 100%; } }
@media (max-width: 800px) {
    .catalog-layout, .robux-layout { align-items: stretch; }
    .catalog-main, .robux-list { width: 100%; }
}
@media (max-width: 760px) { .inventory-layout { align-items: stretch; } .inventory-main { width: 100%; } }

/* The catalog rail folds behind a Filters button on narrow screens. */
@media (max-width: 800px) {
    .filters-toggle {
        display: flex; align-items: center; gap: 6px;
        width: 100%;
        margin: 0 0 10px;
        padding: 9px 12px;
        background: var(--panel-bg);
        border: 1px solid var(--border);
        border-radius: 3px;
        font: inherit;
        font-size: 15px;
        color: var(--text);
        text-align: left;
        cursor: pointer;
    }
    .filters-toggle .text-label { color: var(--text-muted); }
    .filters-toggle::after {
        content: "";
        margin-left: auto;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--text-muted);
        transition: transform .15s;
    }
    .catalog-layout.filters-open .filters-toggle::after { transform: rotate(180deg); }
    .catalog-layout .catalog-filters { display: none; }
    .catalog-layout.filters-open .catalog-filters { display: block; margin-bottom: 10px; }
    .filter-list { columns: 2; column-gap: 8px; }
    .filter-list li { break-inside: avoid; }
}

@media (max-width: 600px) {
    /* balances live in the drawer; the header keeps the icons */
    .header-currency { display: none; }
    .header-auth .login-link { padding: 0 6px; }

    .page, body.no-sidebar .page { padding: calc(var(--header-h) + 10px) 8px 30px; }
    .panel, .section { padding: 12px; }
    .item-grid, [data-theme^="2016"] .item-grid { grid-template-columns: repeat(2, 1fr); }
    .home-friends { grid-template-columns: repeat(3, 1fr); }
    .home-friend-image { width: 80px; height: 80px; }
    .game-grid { grid-template-columns: repeat(2, 1fr); }
    .item-page-thumb { max-width: none; }
    .buy-row, .catalog-search { flex-wrap: wrap; }
    .thumb-img { max-width: 100%; }

    /* game page */
    .game-main-content { padding: 8px; min-height: 0; }
    .game-name { font-size: 24px; }
    .game-title-container, [data-theme^="2016"] .game-title-container { min-height: 0; padding: 0 30px 8px 0; }
    .game-stats-container { flex-wrap: wrap; }
    .game-stat { flex: 1 1 33%; padding: 4px 0; }
    .share-rate-favorite { flex-wrap: wrap; }
    .favorite-button-container { width: auto; }
    .voting-panel { max-width: none; }
    .rbx-tabs-horizontal .rbx-tab-heading { padding: 10px 0; font-size: 14px; }

    /* forms and tables */
    .settings-row { flex-direction: column; gap: 4px; }
    .settings-row > .text-label { width: auto; padding-top: 0; }
    .settings-actions { margin-left: 0; }
    .field-label { float: none; display: block; width: auto; padding: 0 0 4px; }
    .field-content { margin-left: 0; }
    .ledger { display: block; overflow-x: auto; }
    .ledger th, .ledger td { white-space: nowrap; }
    .bc-page .bc-header { padding-left: 0; }
    .robux-buy-container { flex-wrap: wrap; }
    .details-info li { min-width: 80px; }
    .profile-avatar-image { width: 96px; height: 96px; }
    .header-caption { min-height: 0; }
    .footer { padding: 0 10px; }

    /* landing: the inline login form becomes a Log In button */
    .landing-nav .nav-login input,
    .landing-nav .nav-login .nav-login-btn,
    .landing-nav .nav-login .forgot { display: none; }
    .nav-login-link {
        display: inline-block;
        padding: 6px 16px;
        background: #02b757;
        border-radius: 3px;
        color: #fff;
        font-size: 16px;
    }
    .nav-login-link:hover { background: #3fc679; text-decoration: none; }
    .landing-center { padding-top: 90px; }
}

/* ===================================================================
   Presence, the friend card and the chat bar of the 2018 home. The badge
   on a portrait is the era's: a blue circle with a person for online, a
   green one with a controller for in a game.
   =================================================================== */

.home-head .home-greeting { display: flex; flex-direction: column; gap: 6px; }
.home-membership { display: inline-flex; align-items: center; gap: 4px; width: max-content; }
.home-membership:hover { text-decoration: none; }
.bc-label {
    padding: 0 4px;
    border: 1px solid #f68802;
    border-radius: 2px;
    color: #f68802;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: .02em;
}

.home-friend { position: relative; }
.home-friend-btn {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--text);
    text-align: center;
    cursor: pointer;
}
.home-friend-btn:hover .home-friend-name { color: var(--blue); }
.home-friend-avatar { position: relative; display: block; width: 100px; margin: 0 auto; }
.home-friend-game {
    display: block;
    padding-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.presence-game-glyph {
    display: inline-block;
    width: 16px; height: 16px;
    margin: 0 3px -3px 0;
    background: url("/img/friendsstatus.svg") 0 0 / 100% auto no-repeat;
}
/* Home/friendsstatus.svg, the sheet both eras' home pages drew presence
   with: 28px cells, game at 0, studio at -28, online at -56. */
.presence-badge {
    position: absolute;
    right: 0; bottom: 0;
    width: 28px; height: 28px;
    display: none;
    background: url("/img/friendsstatus.svg") no-repeat;
    background-size: 100% auto;
}
.online .presence-badge { display: block; background-position: 0 -56px; }
.in-game .presence-badge { display: block; background-position: 0 0; }
[data-theme^="2016"] .presence-badge { right: -6px; bottom: -6px; }

/* friends page status line */
.presence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 5px 1px 0; background: var(--text-light); }
.friend-online .presence-dot { background: var(--blue); }
.friend-in-game .presence-dot { background: var(--green); }
.friend-online, .friend-in-game { color: var(--text); }

/* the friend card under a tile */
.friend-card-popover {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    z-index: 50;
    width: 300px;
    margin-top: 6px;
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    text-align: left;
    color: var(--text);
}
.friend-card-popover::before {
    content: "";
    position: absolute;
    left: 50%; top: -6px;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: var(--panel-bg);
}
.home-friend:first-child .friend-card-popover, .home-friend:nth-child(2) .friend-card-popover { left: 0; transform: none; }
.home-friend:first-child .friend-card-popover::before, .home-friend:nth-child(2) .friend-card-popover::before { left: 50px; }
.friend-card-game { display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid var(--rule); }
.friend-card-thumb { display: block; width: 110px; height: 110px; flex: none; background: var(--page-bg); border-radius: 3px; overflow: hidden; }
.friend-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.friend-card-game-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.friend-card-game-name { font-size: 16px; font-weight: 600; color: var(--text); word-break: break-word; }
.friend-card-join { align-self: flex-end; margin-top: auto; padding: 6px 18px; font-size: 16px; }
.friend-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    font: inherit;
    font-size: 15px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.friend-card-row:last-child { border-bottom: 0; }
.friend-card-row:hover { background: var(--page-bg); text-decoration: none; }
.friend-card-icon { width: 28px; height: 28px; flex: none; }
.icon-social-chat {
    display: inline-block;
    width: 28px; height: 28px;
    background: url("/img/social_06282017.svg") 0 -196px no-repeat;
}
[data-theme^="2016"] .icon-social-chat { background-image: url("/img/social_2015.svg"); }

/* the chat bar */
.chat-bar {
    position: fixed;
    right: 12px; bottom: 0;
    z-index: 95;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    font-size: 14px;
}
.chat-dock { width: 240px; box-shadow: 0 0 6px rgba(0, 0, 0, .3); border-radius: 3px 3px 0 0; overflow: hidden; background: var(--panel-bg); }
.chat-dock-head {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 0 12px;
    height: 32px;
    background: var(--header-bg);
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.chat-dock-unread, .chat-friend-unread {
    margin-left: auto;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e2231a;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}
.chat-dock-body { max-height: 360px; overflow-y: auto; }
.chat-empty { padding: 14px 12px; color: var(--text-muted); text-align: center; }
.chat-friend {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.chat-friend:hover { background: var(--page-bg); }
.chat-friend-avatar { position: relative; width: 36px; height: 36px; flex: none; }
.chat-friend-avatar img { width: 100%; height: 100%; border-radius: 50%; background: var(--page-bg); display: block; }
.chat-friend .presence-badge,
.presence-badge.presence-dot-sm { width: 14px; height: 14px; right: -2px; bottom: -2px; border-radius: 50%; background-image: none; }
.chat-friend.online .presence-badge { background-color: #00a2ff; }
.chat-friend.in-game .presence-badge { background-color: #02b757; }
.chat-friend-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.chat-friend-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-friend-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-friend.online .chat-friend-label { color: var(--blue); }
.chat-friend.in-game .chat-friend-label { color: var(--green); }

.chat-windows { display: flex; align-items: flex-end; gap: 8px; }
.chat-window { width: 260px; background: var(--panel-bg); box-shadow: 0 0 6px rgba(0, 0, 0, .3); border-radius: 3px 3px 0 0; overflow: hidden; }
.chat-window-head {
    display: flex; align-items: center; gap: 6px;
    height: 32px;
    padding: 0 6px 0 10px;
    background: var(--header-bg);
    color: #fff;
}
.chat-window-name { flex: 1; min-width: 0; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-window-collapse, .chat-window-close { width: 24px; height: 24px; background: none; border: 0; color: #fff; font-size: 14px; cursor: pointer; opacity: .85; }
.chat-window-collapse:hover, .chat-window-close:hover { opacity: 1; }
.chat-window-messages { height: 220px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.chat-window.is-collapsed .chat-window-messages, .chat-window.is-collapsed .chat-window-form { display: none; }
.chat-line { max-width: 85%; padding: 5px 8px; border-radius: 8px; font-size: 14px; line-height: 1.3; word-break: break-word; }
.chat-line.theirs { align-self: flex-start; background: var(--page-bg); }
.chat-line.mine { align-self: flex-end; background: var(--blue); color: #fff; }
.chat-line.error { align-self: center; background: none; color: #e2231a; font-size: 12px; }
.chat-line-time { display: block; margin-top: 2px; font-size: 10px; opacity: .6; }
.chat-window-form { display: flex; gap: 4px; padding: 6px; border-top: 1px solid var(--rule); }
.chat-window-form input {
    flex: 1; min-width: 0;
    height: 30px;
    padding: 0 8px;
    font: inherit; font-size: 14px;
    background: var(--input-bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 3px;
}
.chat-window-form input:focus { outline: none; border-color: var(--blue); }

@media (max-width: 600px) {
    .chat-bar { right: 0; left: 0; gap: 0; }
    .chat-dock { width: 100%; border-radius: 0; }
    .chat-dock-body { max-height: 50vh; }
    .chat-windows { position: fixed; inset: var(--header-h) 0 0 0; z-index: 96; background: var(--page-bg); display: none; }
    .chat-windows:has(.chat-window) { display: block; }
    .chat-window { width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
    .chat-window + .chat-window { display: none; }
    .chat-window-messages { flex: 1; height: auto; }
    .chat-window-collapse { display: none; }
    .home-friend-avatar { width: 80px; }
    .friend-card-popover { width: 260px; }
    /* under 768px the 2018 sheet gave way to a plain 14px dot */
    .home-friend .presence-badge { width: 14px; height: 14px; right: 7px; bottom: 7px; border-radius: 50%; background-image: none; }
    .home-friend.online .presence-badge { background-color: #00a2ff; }
    .home-friend.in-game .presence-badge { background-color: #02b757; }
}

/* --- Develop (Create in 2018): the creation rail and the place list --- */
.develop-layout { display: flex; gap: 15px; align-items: flex-start; }
.develop-rail { flex: 0 0 200px; padding: 12px; }
.develop-main { flex: 1; min-width: 0; }
.develop-tabs, .develop-types { list-style: none; margin: 0; padding: 0; }
.develop-tabs li a, .develop-tabs li span { display: block; padding: 6px 8px; color: var(--text-nav); border-radius: 3px; }
.develop-tabs li span, .develop-types li span { color: var(--text-light); }
.develop-tabs li.active a { color: var(--text); font-weight: 600; }
.develop-types { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.develop-types li a, .develop-types li span { display: block; padding: 4px 8px 4px 16px; font-size: 14px; }
.develop-types li.active a { color: var(--blue); font-weight: 600; }
.develop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.develop-head h2 { margin: 0; font-size: 20px; font-weight: 400; }
.develop-create { display: flex; gap: 6px; }
.develop-create input { width: 220px; padding: 5px 8px; font: inherit; font-size: 14px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px; }
.develop-list { list-style: none; margin: 0; padding: 0; }
.develop-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); }
.develop-item:first-child { border-top: 0; }
.develop-thumb { display: block; width: 100px; height: 100px; flex: none; background: var(--page-bg); border-radius: 3px; overflow: hidden; }
.develop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.develop-thumb-lg { width: 100%; height: auto; aspect-ratio: 1; }
.develop-info { flex: 1; min-width: 0; }
.develop-name { font-size: 18px; color: var(--text); }
.develop-meta { font-size: 13px; color: var(--text-muted); }
.develop-actions { display: flex; gap: 6px; flex: none; }
.develop-form .field input[type="text"], .develop-form .field input[type="number"] { width: 100%; }
.develop-form .field input[type="number"] { max-width: 120px; }
.develop-form .btn { margin-top: 4px; }
@media (max-width: 800px) {
    .develop-layout { flex-direction: column; align-items: stretch; }
    .develop-rail { flex: none; }
    .develop-item { flex-wrap: wrap; }
    .develop-create input { width: 100%; }
    .develop-create { width: 100%; flex-wrap: wrap; }
}

/* ===================================================================
   Groups: the legacy group.aspx of 2016 (and 2018 until mid-year), metrics
   from the archived page bundle: an #efefef search bar, the description
   panel with a 150px left column, tabs over the members of one role, the
   wall in alternating #F2F2F2 / white rows. Same in every skin.
   =================================================================== */
.GroupsPage { max-width: 800px; margin: 0 auto; }
.GroupsPage .StandardBox { background: #efefef; border: 1px solid #ccc; padding: 10px; margin-bottom: 15px; color: #343434; }
.GroupsPage .StandardBox a { color: #095fb5; }
[data-theme$="dark"] .GroupsPage .StandardBox { background: var(--panel-bg); border-color: var(--border); color: var(--text); }
.groups-box-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.groups-empty { padding: 12px; text-align: center; color: var(--text-muted); }
#SearchControls { display: flex; justify-content: center; align-items: center; gap: 6px; height: 32px; background: #efefef; border: 1px solid #ccc; margin: 0 0 15px; }
[data-theme$="dark"] #SearchControls { background: var(--panel-bg); border-color: var(--border); }
#SearchControls .SearchKeyword { width: 350px; max-width: 60%; padding: 2px 10px; border: 1px solid #a7a7a7; font: inherit; font-size: 13px; background: var(--input-bg); color: var(--text); }
.groups-columns { display: flex; gap: 10px; align-items: flex-start; }
.groups-left { flex: 0 0 200px; }
.groups-main { flex: 1; min-width: 0; }
.my-groups { list-style: none; margin: 0; padding: 0; }
.my-group { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #ddd; }
.my-group img { width: 32px; height: 32px; flex: none; }
.my-group-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-group-role { font-size: 11px; color: var(--text-muted); }
.groups-create { margin-top: 12px; text-align: center; }
.groups-create-note { margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.groups-create-box { max-width: 520px; margin: 0 auto; }
.groups-create-terms { margin: 0 0 12px; font-size: 14px; }
.group-results { list-style: none; margin: 0; padding: 0; }
.group-result { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #ddd; }
.group-result:first-child { border-top: 0; }
.group-result-emblem img { width: 100px; height: 100px; display: block; }
.group-result-info { flex: 1; min-width: 0; }
.group-result-name { font-size: 16px; font-weight: 700; }
.group-result-meta { font-size: 12px; color: var(--text-muted); }
.group-result-desc { margin-top: 4px; font-size: 13px; word-break: break-word; }

.GroupPanelContainer { overflow: hidden; }
.GroupPanelContainer .left-col { width: 150px; float: left; margin-right: 10px; text-align: center; }
.GroupPanelContainer .right-col { float: left; width: 575px; max-width: calc(100% - 175px); margin-left: 15px; }
.GroupThumbnail img { width: 150px; height: 150px; display: block; border: 1px solid #ccc; background: #fff; }
.GroupOwner { color: gray; margin-top: 10px; font-size: 13px; }
.JoinGroupDiv { margin-top: 10px; }
.group-my-rank { font-size: 13px; }
.group-name { margin: 0 0 8px; font-size: 24px; font-weight: 400; word-break: break-word; }
.group-desc { min-height: 103px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; }
.group-shout { margin-top: 10px; padding: 8px 10px; background: #fff; border: 1px solid #ddd; font-size: 14px; }
[data-theme$="dark"] .group-shout { background: var(--page-bg); border-color: var(--border); }
.group-shout-label { font-weight: 700; }
.group-shout-by { margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.GroupsPeopleTabs_Container { display: flex; height: 30px; }
.GroupsPeopleTabs_Container .tab { padding: 0 18px; line-height: 30px; background: #ddd; border: 1px solid #ccc; border-bottom: 0; margin-right: 2px; font-weight: 700; font-size: 13px; color: #666; }
.GroupsPeopleTabs_Container .tab.active { background: #efefef; color: #343434; }
[data-theme$="dark"] .GroupsPeopleTabs_Container .tab { background: var(--page-bg); border-color: var(--border); color: var(--text-muted); }
[data-theme$="dark"] .GroupsPeopleTabs_Container .tab.active { background: var(--panel-bg); color: var(--text); }
#GroupsPeople_Pane { margin-top: 0; }
.Members_DropDown { text-align: right; margin-bottom: 5px; }
.MembersDropDownList { max-width: 100%; font: inherit; font-size: 13px; }
.GroupMembers { display: flex; flex-wrap: wrap; }
.GroupMember { width: 100px; margin: 12px 14px; text-align: center; }
.GroupMember .Avatar { position: relative; width: 100px; height: 100px; background: #fff; border: 1px solid #ddd; }
.GroupMember .Avatar > a img { width: 100px; height: 100px; display: block; object-fit: contain; }
.GroupMember .OnlineStatus { position: absolute; left: 2px; top: 2px; z-index: 1; }
.GroupMember .NameText { display: block; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.FooterPager { clear: both; text-align: center; padding-top: 10px; font-size: 13px; }
.FooterPager a, .FooterPager b { display: inline-block; padding: 0 4px; }
.group-wall-head { margin-bottom: 0 !important; border-bottom: 0 !important; }
.group-wall-head .groups-box-title { margin: 0; }
.GroupWallPane { background: #fff !important; border-top: 0 !important; padding: 0 !important; }
[data-theme$="dark"] .GroupWallPane { background: var(--panel-bg) !important; }
.group-wall-form { padding: 10px; border-bottom: 1px solid #ddd; }
.group-wall-form textarea { width: 100%; padding: 6px; font: inherit; font-size: 13px; border: 1px solid #a7a7a7; background: var(--input-bg); color: var(--text); margin-bottom: 6px; }
.GroupWallPane .AlternatingItemTemplateOdd { background: #F2F2F2; padding: 10px; overflow: hidden; }
.GroupWallPane .AlternatingItemTemplateEven { background: #fff; padding: 10px; overflow: hidden; }
[data-theme$="dark"] .GroupWallPane .AlternatingItemTemplateOdd { background: var(--page-bg); }
[data-theme$="dark"] .GroupWallPane .AlternatingItemTemplateEven { background: var(--panel-bg); }
.RepeaterImage { width: 120px; float: left; margin: 5px; }
.RepeaterImage img { width: 100px; height: 100px; display: block; background: #fff; border: 1px solid #ddd; object-fit: contain; }
.RepeaterText { float: left; width: 610px; max-width: calc(100% - 140px); margin: 5px; }
.GroupWall_PostContainer { min-height: 78px; margin-bottom: 5px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; }
.GroupWall_PostDate { font-size: 11px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.GroupWall_PostBtns { display: inline; }
.group-wall-delete { background: none; border: 0; padding: 0; color: #d00; font: inherit; font-size: 11px; cursor: pointer; }
.group-admin-box .develop-form textarea { margin-bottom: 6px; }
.group-shout-input { width: 100%; max-width: 480px; padding: 4px 8px; font: inherit; font-size: 13px; border: 1px solid #a7a7a7; background: var(--input-bg); color: var(--text); margin-bottom: 6px; }
.group-roles { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
[data-theme$="dark"] .group-roles { background: var(--panel-bg); }
.group-roles th { text-align: left; padding: 6px 8px; background: #ddd; font-weight: 700; }
[data-theme$="dark"] .group-roles th { background: var(--page-bg); }
.group-roles td { padding: 5px 8px; border-top: 1px solid #ddd; vertical-align: middle; }
.group-roles input[type="text"] { width: 130px; font: inherit; font-size: 13px; padding: 2px 4px; }
.group-inline-form { display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 800px) {
    .groups-columns { flex-direction: column; align-items: stretch; }
    .groups-left { flex: none; }
    .GroupPanelContainer .left-col { float: none; margin: 0 auto 10px; }
    .GroupPanelContainer .right-col { float: none; width: auto; max-width: none; margin: 0; }
    .RepeaterImage { width: 70px; }
    .RepeaterImage img { width: 60px; height: 60px; }
    .RepeaterText { max-width: calc(100% - 90px); }
    .GroupMember { margin: 8px; }
    .group-roles { display: block; overflow-x: auto; }
}

/* ===================================================================
   The forum, from forum.roblox.com's default.css of March 2016: #2D528F
   headers with white titles, #f9f9f9 rows that darken on hover, #095fb5
   links, a 1px #d8d8d8 rule between posts, the poster's card 150px wide.
   =================================================================== */
.forum-page { max-width: 970px; margin: 0 auto; color: #343434; font-size: 14px; }
[data-theme$="dark"] .forum-page { color: var(--text); }
.forum-page a { color: #095fb5; }
[data-theme$="dark"] .forum-page a { color: #6db3ff; }
.forum-nav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.forum-crumbs a.linkMenuSink { font-weight: 700; }
#forum-nav a.menuTextLink { font-weight: 600; color: #343434; }
[data-theme$="dark"] #forum-nav a.menuTextLink { color: var(--text); }
.normalTextSmaller { font-size: .9em; }
.normalTextSmallBold { font-weight: 700; }
.forum-table { width: 100%; border-spacing: 1px; border-collapse: separate; margin-bottom: 7px; background: #fff; }
[data-theme$="dark"] .forum-table { background: var(--panel-bg); }
.forum-table-header th { background: #2D528F; color: #fff; padding: 5px 6px; font-weight: 700; text-align: left; white-space: nowrap; }
.forum-table-header th.first { text-align: left; }
.forum-table-header th.forum-num-col, .forum-table-header th.forum-last-col { text-align: center; }
.forum-table-header .forumTitle { color: #fff; font-size: 14px; }
.forum-num-col { width: 60px; }
.forum-last-col { width: 135px; }
.forum-author-col { width: 100px; }
.forum-table-row td { background: #f9f9f9; padding: 4px 6px; vertical-align: middle; }
.forum-table-row:hover td { background: #e9e9e9; }
[data-theme$="dark"] .forum-table-row td { background: var(--page-bg); }
[data-theme$="dark"] .forum-table-row:hover td { background: #333; }
.forum-board-cell { width: 80%; }
a.forum-summary { display: block; color: #343434; text-decoration: none; }
a.forum-summary .forumTitle { font-weight: 700; font-size: 14px; }
.forum-blurb { font-size: 13px; }
[data-theme$="dark"] a.forum-summary { color: var(--text); }
td.forum-centered-cell { text-align: center; }
a.last-post { display: block; text-align: center; text-decoration: none; }
a.last-post span { display: block; }
.forum-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0; }
.forum-icon-cell { width: 25px; text-align: center; }
.forum-subject-cell { height: 25px; }
a.post-list-subject, a.post-list-author { color: #343434; text-decoration: none; }
[data-theme$="dark"] a.post-list-subject, [data-theme$="dark"] a.post-list-author { color: var(--text); }
.thread-link-container { display: flex; align-items: center; min-height: 38px; }
.forum-empty { padding: 16px; text-align: center; color: var(--text-muted); }
.forum-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 14px; font-size: 13px; }
.forum-pager-links a, .forum-pager-links b { padding: 0 3px; }
.forum-thread-title { margin: 0 0 12px; font-size: 22px; font-weight: 400; word-break: break-word; }
.forum-sort select { font: inherit; font-size: 13px; }
.forum-posts td.forumHeaderBackgroundAlternate { background: #BDD6F5; padding: 4px 6px; }
[data-theme$="dark"] .forum-posts td.forumHeaderBackgroundAlternate { background: #2D528F; }
.forum-post td.forum-content-background { background: #f9f9f9; vertical-align: top; padding: 6px; }
[data-theme$="dark"] .forum-post td.forum-content-background { background: var(--page-bg); }
.forum-poster { width: 150px; white-space: nowrap; }
.forum-poster-name { margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.forum-poster-name a { font-weight: 700; }
.forum-poster-avatar { position: relative; display: block; width: 100px; height: 100px; margin-bottom: 4px; background: #fff; border: 1px solid #ddd; }
.forum-poster-avatar > img:first-child { width: 100px; height: 100px; display: block; object-fit: contain; }
.forum-bc-overlay { position: absolute; left: 0; bottom: 0; }
.forum-body { width: auto; }
.forum-post-date { margin-bottom: 4px; }
.forum-post-text { min-height: 100px; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; }
.forum-post-footer { text-align: right; min-height: 24px; }
.post-response-options { display: none; }
.forum-post:hover .post-response-options { display: inline; }
td.flatViewSpacing { height: 1px; padding: 0; background: #d8d8d8; }
.forum-reply { margin: 12px 0 20px; padding: 10px; background: #f9f9f9; border: 1px solid #ddd; }
[data-theme$="dark"] .forum-reply { background: var(--panel-bg); border-color: var(--border); }
.forum-reply textarea, .forum-reply input[type="text"] { width: 100%; padding: 6px; font: inherit; font-size: 14px; border: 1px solid #a7a7a7; background: var(--input-bg); color: var(--text); margin: 4px 0 8px; }
@media (max-width: 700px) {
    .forum-table { display: block; overflow-x: auto; }
    .forum-poster { width: 110px; white-space: normal; }
    .forum-poster-avatar, .forum-poster-avatar > img:first-child { width: 80px; height: 80px; }
    .forum-nav-row, .forum-toolbar, .forum-pager { flex-wrap: wrap; }
}

/* The page-level link colours of the forum and the group panels must not
   reach into the legacy buttons, whose text is white on their gradients. */
.forum-page a.btn-legacy, .forum-page a.btn-legacy:hover,
.GroupsPage a.btn-legacy, .GroupsPage a.btn-legacy:hover,
.GroupsPage .StandardBox a.btn-legacy, .GroupsPage .StandardBox a.btn-legacy:hover,
.GroupsPage button.btn-legacy, .forum-page button.btn-legacy { color: #fff; }

/* --- the friend-request bell in the header: the 2018 notification-stream
   icon with a red count; the 2016 header had no such thing. --- */
.header-bell { position: relative; text-decoration: none; }
.header-bell:hover { text-decoration: none; }
.header-bell-count {
    position: absolute;
    top: 2px; right: -4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: #e2231a;
    color: #fff;
    border-radius: 8px;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
}
[data-theme^="2016"] .header-bell { display: none; }

/* ===================================================================
   The catalog pager. Default is the April 2018 .pager: first / prev /
   next / last in 32px white boxes with a #B8B8B8 border, glyphs from the
   generic sheet (rows 1148, 420, 392, 1120), page numbers between them.
   The 2016 skins draw the March 2016 pager: the blue arrow buttons of
   Sets/blue_arrow_btns_sprite.png (24px cells: next 0, prev 48, hover
   24/72, disabled 96/120) around plain numbers, the current one in bold.
   =================================================================== */
.catalog-pager { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 20px 0 8px; }
.catalog-pager .pager-first, .catalog-pager .pager-prev, .catalog-pager .pager-next, .catalog-pager .pager-last {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
}
.catalog-pager a:hover { background: var(--page-bg); text-decoration: none; }
.catalog-pager .disabled { opacity: .35; }
.catalog-pager .pager-first > span, .catalog-pager .pager-prev > span, .catalog-pager .pager-next > span, .catalog-pager .pager-last > span {
    display: block; width: 28px; height: 28px;
    background: url("/img/generic_03112016.svg") no-repeat;
}
.catalog-pager .pager-first > span { background-position: 0 -1148px; }
.catalog-pager .pager-prev > span { background-position: 0 -420px; }
.catalog-pager .pager-next > span { background-position: 0 -392px; }
.catalog-pager .pager-last > span { background-position: 0 -1120px; }
[data-theme$="dark"] .catalog-pager .pager-first > span, [data-theme$="dark"] .catalog-pager .pager-prev > span,
[data-theme$="dark"] .catalog-pager .pager-next > span, [data-theme$="dark"] .catalog-pager .pager-last > span { filter: invert(1); }
.catalog-pager .pager-pages { display: inline-flex; align-items: center; gap: 4px; }
.catalog-pager .pager-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 6px;
    color: var(--text);
    border-radius: 3px;
}
.catalog-pager a.pager-page:hover { background: var(--page-bg); }
.catalog-pager .pager-page.selected { font-weight: 700; color: var(--blue); }
.catalog-pager .pager-gap { color: var(--text-muted); padding: 0 2px; }

/* the 2016 pager */
[data-theme^="2016"] .catalog-pager { gap: 4px; margin: 14px 0 6px; }
[data-theme^="2016"] .catalog-pager .pager-first, [data-theme^="2016"] .catalog-pager .pager-last { display: none; }
[data-theme^="2016"] .catalog-pager .pager-prev, [data-theme^="2016"] .catalog-pager .pager-next {
    width: 24px; height: 24px; border: 0; border-radius: 0; background: none; margin: 0 6px;
}
[data-theme^="2016"] .catalog-pager .pager-prev > span, [data-theme^="2016"] .catalog-pager .pager-next > span {
    width: 24px; height: 24px; background: url("/img/blue_arrow_btns_sprite.png") no-repeat;
}
[data-theme^="2016"] .catalog-pager .pager-next > span { background-position: 0 0; }
[data-theme^="2016"] .catalog-pager .pager-prev > span { background-position: 0 -48px; }
[data-theme^="2016"] .catalog-pager a.pager-next:hover > span { background-position: 0 -24px; }
[data-theme^="2016"] .catalog-pager a.pager-prev:hover > span { background-position: 0 -72px; }
[data-theme^="2016"] .catalog-pager .pager-next.disabled > span { background-position: 0 -96px; }
[data-theme^="2016"] .catalog-pager .pager-prev.disabled > span { background-position: 0 -120px; }
[data-theme^="2016"] .catalog-pager .disabled { opacity: 1; }
[data-theme^="2016"] .catalog-pager a:hover { background: none; }
[data-theme^="2016"] .catalog-pager .pager-page { min-width: 0; height: auto; padding: 0 3px; color: #095fb5; font-size: 13px; }
[data-theme^="2016"] .catalog-pager a.pager-page:hover { background: none; text-decoration: underline; }
[data-theme^="2016"] .catalog-pager .pager-page.selected { color: var(--text); font-weight: 700; }
[data-theme="2016-dark"] .catalog-pager .pager-page { color: #6db3ff; }

/* --- /not-approved: the moderation notice of the old site, a bordered box
   with the verdict, the review date, the moderator's note and Logout. --- */
.not-approved {
    max-width: 900px;
    margin: 30px auto;
    padding: 40px 48px 36px;
    background: var(--panel-bg);
    border: 1px solid var(--text);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}
.not-approved .page-title { margin: 0 0 24px; }
.not-approved p { margin: 0 0 18px 40px; }
.not-approved .not-approved-verdict { font-weight: 700; }
.not-approved a { color: var(--blue); }
.not-approved-actions { margin: 28px 0 0; text-align: center; }

@media (max-width: 991px) {
    .not-approved { margin: 0; padding: 24px 20px; font-size: 16px; }
    .not-approved p { margin-left: 0; }
}

/* --- profile: the March 2016 and April 2018 /users/{id}/profile (archived
   users/1, captures 20160304213011 and 20180421034249). A 970px column of
   sections: a 24px light heading over a white content box (15px padding,
   18px below, no radius, the panel shadow), the header box first, then the
   About / Creations tabs. The page ran 16px/300 on both dates, so it does
   not follow the 2016 skin's smaller base. Era differences are marked. --- */

.profile-page { max-width: 970px; margin: 0 auto; font-size: 16px; font-weight: 300; }
.profile-page .section { background: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
.profile-page .container-header { margin: 3px 0 6px; }
.profile-page .container-header h3 { margin: 0; padding: 0 0 5px; font-size: 24px; font-weight: 300; line-height: 1.2; }
[data-theme^="2016"] .profile-page .container-header h3 { padding: 5px 0; }
.profile-page .section-content {
    background: var(--panel-bg);
    border-radius: 0;
    box-shadow: var(--panel-shadow);
    padding: 15px;
    margin: 0 0 18px;
}
.profile-page .text-label { color: var(--text-light); font-weight: 400; }
.text-lead { font-size: 18px; }

/* header: portrait, name with the club badge, the three counters and the buttons */
.profile-header-content { display: flex; gap: 12px; }
.profile-avatar-image {
    width: 128px; height: 128px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--border);
}
[data-theme^="2016"] .profile-avatar-image { width: 112px; height: 112px; border-radius: 0; }
.profile-avatar-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.header-caption { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.header-title { display: flex; align-items: center; }
.header-title h2 { margin: 0 12px 0 0; padding: 5px 0; font-size: 30px; font-weight: 400; line-height: 1; }
.header-title .bc-icon { margin: 3px 0 0 3px; }
.header-details { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.details-info { display: flex; list-style: none; margin: 0; padding: 0; }
.details-info li { min-width: 112px; padding: 0 5px; text-align: center; }
.details-info .text-label { font-size: 16px; line-height: 21px; }
.details-info .text-name { display: block; color: var(--blue); }
.details-info h3 { margin: 0; padding: 5px 0; font-size: 24px; font-weight: 300; line-height: 24px; color: var(--blue); }
.details-actions { display: flex; list-style: none; margin: 0; padding: 0; }
.details-actions li { padding: 0 5px; }
.details-actions li:last-child { padding-right: 0; }

/* The bordered control button; the error pages share the class, the profile sets the 2016/2018 metrics. */
.btn-control-md {
    display: inline-block;
    padding: 8px 18px;
    font: inherit;
    font-size: 16px;
    color: var(--text-muted);
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}
.btn-control-md:hover:not([disabled]) { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.btn-control-md[disabled] { color: var(--text-light); cursor: default; }
.profile-page .btn-control-md { padding: 9px 24px; font-size: 18px; font-weight: 400; line-height: 18px; }

/* the About / Creations tabs: a white bar with the 2018 card shadow, a 4px blue inset line under the active one */
.rbx-tabs-horizontal { margin-bottom: 5px; }
.rbx-tabs-horizontal .nav-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--panel-bg);
    box-shadow: 0 1px 3px 0 rgba(150, 150, 150, .74);
    text-align: center;
}
.rbx-tabs-horizontal .rbx-tab { width: 50%; margin-bottom: -1px; }
.rbx-tabs-horizontal .rbx-tab-heading { display: block; padding: 12px 9px; color: var(--text); }
.rbx-tabs-horizontal .rbx-tab.active .rbx-tab-heading { box-shadow: inset 0 -4px 0 0 var(--blue); }
[data-theme="2016-light"] .rbx-tabs-horizontal .rbx-tab.active .rbx-tab-heading { color: #555; }
.rbx-tabs-horizontal .text-lead { font-weight: 400; }

/* about */
.profile-about-content { padding: 0 0 5px; }
.profile-about-text { font: inherit; margin: 0; white-space: pre-wrap; word-wrap: break-word; }
.profile-about-footer { border-top: 1px solid var(--border); padding: 5px 0 0; display: flow-root; }
.abuse-report-link { float: right; }
.text-error { color: var(--bad); }

/* currently wearing: the 300px portrait on white, the worn items on the blue band */
.profile-wearing-body { display: flex; }
.profile-wearing-body .section-content { width: 50%; height: 300px; }
.profile-page .profile-avatar-left {
    position: relative;
    padding: 0 12px;
    display: flex; align-items: center; justify-content: center;
}
.profile-avatar-left .thumbnail-holder { width: 300px; height: 300px; border: 0; }
.profile-page .profile-avatar-right { background: var(--header-bg); padding: 0; overflow: hidden; }
.profile-avatar-mask { width: 100%; height: 100%; padding: 20px 7px 20px 22px; overflow-y: auto; scrollbar-gutter: stable; }
[data-theme^="2016"] .profile-avatar-mask { background: rgba(117, 117, 117, .5); padding: 20px 3px 20px 18px; }
.accoutrement-items-container { list-style: none; margin: 12px 0 6px; padding: 0; display: flex; flex-wrap: wrap; width: 440px; max-width: 100%; }
.accoutrement-item { width: 110px; height: 110px; padding: 5px; }
.accoutrement-item a { display: block; width: 100px; height: 100px; }
.accoutrement-image { display: block; width: 100px; height: 100px; object-fit: contain; background: #fff; border-radius: 3px; }
.wearing-empty { color: #fff; opacity: .85; padding: 12px 0; }
.enable-three-dee {
    position: absolute;
    top: 12px; right: 13px;
    padding: 9px;
    font: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text);
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}
[data-theme^="2016"] .enable-three-dee { padding: 7px 16px; font-size: 16px; font-weight: 300; color: var(--text-muted); }
.enable-three-dee:hover { border-color: var(--blue); color: var(--blue); }
.enable-three-dee.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* collections and badges: six 157px cells to the row, a 140px bordered picture, the name under it */
.profile-page .hlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.profile-page .asset-item { flex: 0 0 16.6667%; min-width: 0; padding: 5px 0; text-align: center; }
.profile-page .asset-item a, .profile-page .badge-link { display: block; color: var(--text); }
.profile-page .asset-item a:hover { text-decoration: none; }
.profile-page .asset-thumb, .rbx-badge-lg {
    display: block;
    width: 140px; height: 140px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--panel-bg);
    overflow: hidden;
}
.profile-page .asset-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.profile-page .item-name {
    display: block;
    width: 140px;
    margin: 0 auto;
    padding: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
    text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The badge sheet (344×1376, two columns of 172px cells) scaled so a cell
   is the 140px picture: 280px wide, offsets in steps of 140. The 70px
   .rbx-badge scales the same sheet to 140px with steps of 70. */
.rbx-badge-lg { background-image: url("/img/badges.svg"); background-repeat: no-repeat; background-size: 280px auto; }
.rbx-badge-lg.icon-inviter              { background-position: 0 0; }
.rbx-badge-lg.icon-friendship           { background-position: -140px 0; }
.rbx-badge-lg.icon-welcome-to-the-club  { background-position: 0 -140px; }
.rbx-badge-lg.icon-ambassador           { background-position: -140px -140px; }
.rbx-badge-lg.icon-combat-initiation    { background-position: 0 -280px; }
.rbx-badge-lg.icon-warrior              { background-position: -140px -280px; }
.rbx-badge-lg.icon-bloxxer              { background-position: 0 -420px; }
.rbx-badge-lg.icon-homestead            { background-position: -140px -420px; }
.rbx-badge-lg.icon-bricksmith           { background-position: 0 -560px; }
.rbx-badge-lg.icon-official-model-maker { background-position: -140px -560px; }
.rbx-badge-lg.icon-administrator        { background-position: -140px -840px; }
.rbx-badge-lg.icon-veteran              { background-position: 0 -980px; }

/* the admin's badge panel: art, name, the date it was given, one button */
.admin-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; }
.admin-badge { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.admin-badge.off .rbx-badge { filter: grayscale(1); opacity: .45; }
.admin-badge-name { flex: 1; font-size: 14px; }
.admin-badge-name .muted { display: block; font-size: 12px; }
.admin-badge form { margin: 0; }

/* groups: the 2016 slide switcher, one group at a time on the blue band */
.groups-switcher { position: relative; height: 300px; margin: 0 0 18px; background: var(--header-bg); overflow: hidden; }
.groups-switcher .slide-item { display: none; height: 100%; }
.groups-switcher .slide-item.active { display: flex; }
.slide-item-emblem { width: 50%; display: flex; align-items: center; justify-content: center; }
.slide-item-emblem img { width: 280px; height: 280px; display: block; border-radius: 12px; background: #fff; box-shadow: 0 0 6px 0 rgba(0, 0, 0, .49); }
.profile-slide-item-right { width: 50%; background: var(--panel-bg); padding: 20px 50px 20px 40px; overflow: hidden; }
.slide-item-name { margin: 0; padding: 5px 0; font-size: 30px; font-weight: 400; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-item-description { margin: 0; padding: 5px 0 0; border-top: 1px solid var(--border); height: 100px; overflow: hidden; }
.slide-item-stats { margin-top: 52px; }
.slide-item-stats li { width: 50%; }
.slide-item-stats p, .profile-stat p { margin: 0; }
.slide-item-stats .text-label, .profile-stat .text-label { font-size: 16px; line-height: 24px; }
.slide-item-stats .text-lead, .profile-stat .text-lead { font-weight: 400; line-height: 27px; }
.switcher-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 56px;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font: inherit;
    font-size: 28px;
    line-height: 56px;
    cursor: pointer;
}
.switcher-arrow:hover { background: rgba(0, 0, 0, .4); }
.switcher-arrow.prev { left: 0; }
.switcher-arrow.next { right: 0; }

/* statistics: equal columns, the 2016 skin adds Forum Posts */
.profile-stats-container { display: flex; }
.profile-stat { flex: 1; text-align: center; }
[data-theme^="2016"] .profile-stat .text-lead { margin-bottom: 12px; }

@media (max-width: 760px) {
    .profile-header-content { flex-direction: column; align-items: center; text-align: center; }
    .header-details { flex-direction: column; align-items: center; }
    .profile-wearing-body { flex-direction: column; }
    .profile-wearing-body .section-content { width: 100%; }
    .groups-switcher { height: auto; }
    .groups-switcher .slide-item.active { flex-direction: column; }
    .slide-item-emblem, .profile-slide-item-right { width: 100%; }
    .slide-item-emblem { padding: 10px 0; }
    .profile-stats-container { flex-wrap: wrap; }
    .profile-stat { flex: 1 1 50%; }
    .profile-page .asset-item { flex-basis: 50%; }
}

/* --- trades: the 2012–2020 trade window (Trade/TradeWindow.aspx) and the
   Trade tab of My Money. Left: Your Offer and Your Request, four bordered
   slots and a Robux field each, the green Send Request; right: the two
   Limited inventories as small cards with the name above the picture. --- */

.trade-window { padding: 12px 16px 16px; }
.trade-window-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.trade-title { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.trade-title span { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.trade-title a { color: var(--text); }
.trade-exit { font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.trade-exit-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    color: #fff;
    font-size: 10px;
}
.trade-counter-note, .trade-status-line { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }

.trade-body { display: flex; gap: 18px; align-items: flex-start; }
.trade-offers {
    width: 300px;
    flex: none;
    display: flex; flex-direction: column;
    padding: 12px;
    border: 1px solid var(--border);
}
.trade-offer-head { display: flex; align-items: baseline; justify-content: space-between; }
.trade-offer-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.trade-value { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }
.trade-value b { color: var(--robux); }
.trade-slots {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.trade-slot {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    overflow: hidden;
}
.trade-slot.filled { cursor: pointer; }
.trade-slot a { display: block; width: 100%; height: 100%; }
.trade-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.trade-slot-name {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 2px;
    background: rgba(255, 255, 255, .85);
    color: #343434;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trade-plus { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.trade-plus input {
    width: 120px; height: 24px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: 12px;
}
.trade-plus input::placeholder { color: var(--text-light); font-style: italic; }
.trade-net { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }
.trade-swap { text-align: center; color: var(--text-light); padding: 10px 0 4px; }
.trade-send { align-self: center; margin-top: 12px; }
.trade-fee-note { margin: 8px 0 0; font-size: 11px; color: var(--text-muted); }

.trade-inventories { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.trade-inventory h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.trade-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trade-item {
    width: 84px;
    padding: 4px 3px 3px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    text-align: center;
    cursor: pointer;
}
.trade-item:hover { border-color: var(--blue); }
.trade-item.picked { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); opacity: .8; }
.trade-item-name { display: block; height: 26px; font-size: 10px; line-height: 13px; overflow: hidden; }
.trade-item img { display: block; width: 60px; height: 60px; margin: 2px auto 0; object-fit: contain; }
.trade-item-serial { display: block; font-size: 10px; color: var(--text-muted); }
.trade-items:empty::before { content: "Nothing here to trade."; color: var(--text-muted); font-size: 13px; }

/* the trade seen from one side, and its answer */
.trade-sides { display: flex; gap: 16px; }
.trade-sides .trade-offer { flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--border); }
.trade-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }

/* the list */
.trades-page .panel-head { flex-wrap: wrap; gap: 10px; }
.trade-lists { display: flex; gap: 4px; }
.trade-lists a {
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 14px;
    color: var(--text-muted);
}
.trade-lists a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.trade-lists a.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.trade-partner { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.trade-partner img { width: 28px; height: 28px; border-radius: 50%; background: var(--page-bg); }

@media (max-width: 800px) {
    .trade-body, .trade-sides { flex-direction: column; }
    .trade-offers { width: 100%; }
}

/* --- avatar editor additions: the Recommended row under a category, the
   costume cards with their gear menu, and the animation pack glyphs --- */
.editor-recommended { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
.editor-recommended-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.editor-recommended-head h4 { margin: 0; font-size: 20px; font-weight: 400; }
.editor-card.recommended { cursor: default; }
.editor-card.recommended .item-thumb { display: block; }
.editor-card.recommended .editor-card-name { color: var(--text); }
.editor-card.recommended form { display: block; padding: 0 8px 8px; }
.editor-card-price { display: flex; align-items: center; gap: 4px; padding: 0 8px 6px; font-size: 14px; font-weight: 600; color: var(--robux); }
[data-theme^="2016"] .editor-card.recommended form { position: static; padding: 6px 0 0; }
[data-theme^="2016"] .editor-card-price { padding: 4px 0 0; }

.pack-glyph { display: flex; align-items: center; justify-content: center; font-size: 44px; line-height: 1; }

.outfit-create { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.outfit-create form { display: none; gap: 6px; width: 100%; }
.outfit-create.open form { display: flex; }
.outfit-create input[type="text"] {
    flex: 1; min-width: 0;
    padding: 6px 8px;
    font: inherit; font-size: 14px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    border-radius: 3px;
}
.outfit-card .editor-card-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; overflow: visible; }
.outfit-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outfit-menu { position: static; flex: none; }
.outfit-menu summary {
    list-style: none;
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
}
.outfit-menu summary::-webkit-details-marker { display: none; }
.outfit-menu summary:hover, .outfit-menu[open] summary { background: var(--page-bg); color: var(--text); }
.outfit-menu-body {
    position: absolute; left: 4px; right: 4px; top: 100%; z-index: 5;
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 2px;
    padding: 8px;
    background: var(--panel-bg);
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(25, 25, 25, .3);
    text-align: left;
}
.editor-card .outfit-menu-body form { display: flex; flex-direction: column; gap: 4px; position: static; margin: 0; }
.outfit-menu-body input[type="text"] {
    flex: 1; min-width: 0;
    padding: 4px 6px;
    font: inherit; font-size: 13px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    border-radius: 3px;
}
[data-theme^="2016"] .editor-card .outfit-menu-body form .btn { position: static; width: auto; }

/* --- download page (/install): the visitor's platform first, the rest
   folded to their button; the tabs are links, install.js only saves the
   reload --- */
.install-page { max-width: 880px; }
.install-lead { font-size: 16px; margin: 0 0 10px; }
.install-detected { margin: 0 0 12px; }
.install-detected .muted { margin-left: 4px; }
.install-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.install-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--panel-bg);
    color: var(--text-nav);
    font-size: 15px;
}
.install-tab:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.install-tab.active { border-color: var(--blue); color: var(--blue); font-weight: 600; }

.install-card { position: relative; }
.install-card.is-primary { box-shadow: var(--panel-shadow), inset 4px 0 0 var(--green); }
.install-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.install-card-head h2 { margin: 0; font-size: 24px; font-weight: 400; }
.install-badge {
    font-size: 12px;
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: 10px;
    padding: 1px 9px;
    white-space: nowrap;
}
.install-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-left: auto; }
.install-download { font-size: 18px; padding: 10px 24px; white-space: nowrap; }
.install-download.is-disabled { cursor: default; opacity: .7; }
.install-file-note { font-size: 13px; }
.install-unavailable { color: var(--text-muted); font-style: italic; }
.install-card-toggle {
    display: none;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--text-nav);
    cursor: pointer;
}
.install-card-toggle:hover { border-color: var(--blue); color: var(--blue); }
.install-card-body { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 4px; }
/* other platforms show only their button until asked */
.install-cards.has-primary .install-card:not(.is-primary) .install-card-toggle { display: inline-block; }
.install-cards.has-primary .install-card:not(.is-primary):not(.is-open) .install-card-body { display: none; }
.install-cards.has-primary .install-card:not(.is-primary) .install-card-head h2 { font-size: 20px; }
.install-steps { padding-left: 22px; margin: 10px 0; }
.install-steps li { margin: 8px 0; line-height: 1.5; }
.install-card code, .install-notes code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    background: var(--page-bg);
    border-radius: 3px;
    padding: 1px 5px;
}
.install-card kbd { border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; font-size: 12px; }
.install-cmd {
    display: block;
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    overflow-x: auto;
    white-space: pre;
}
.install-secondary { margin-top: 10px; }
.install-secondary summary { cursor: pointer; color: var(--blue); font-size: 15px; }
.install-secondary-body { margin-top: 8px; }
.install-secondary-body p { margin: 10px 0; line-height: 1.5; }
.install-note-list { padding-left: 22px; margin: 0; }
.install-note-list li { margin: 8px 0; line-height: 1.5; }
.install-warn { color: #c96a00; }
[data-theme$="dark"] .install-warn { color: #f0b35c; }
.install-retry { margin: 16px 0 0; }
@media (max-width: 600px) {
    .install-card-actions { margin-left: 0; width: 100%; }
    .install-download { width: 100%; }
}

/* --- "client not installed?" panel under Play (game page) --- */
.client-missing {
    margin-top: 12px;
    padding: 12px 14px;
    text-align: left;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--blue);
    border-radius: 3px;
    font-size: 14px;
}
.client-missing[hidden] { display: none; }
.client-missing-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.client-missing-text { margin: 0 0 10px; color: var(--text-muted); line-height: 1.45; }
.client-missing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.client-missing-actions .btn { font-size: 14px; padding: 6px 14px; }
.client-missing-actions .btn-grey { color: var(--text-muted); }


/* Mobile apps' WebViews: the app draws its own header and tab bar. */
body.in-app { --header-h: 0px; --sidebar-w: 0px; }
body.in-app .header, body.in-app .sidebar, body.in-app .nav-backdrop { display: none !important; }
body.in-app .content { margin-left: 0; }


/* Game passes on the place page */
.game-passes { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 0; }
.game-pass { width: 110px; text-align: center; text-decoration: none; color: inherit; }
.game-pass img { width: 100px; height: 100px; border: 1px solid #ddd; background: #fff; display: block; margin: 0 auto 4px; object-fit: cover; }
.game-pass-name { display: block; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-pass-price { display: block; font-size: 12px; color: #02b757; }
.game-pass-price.owned { color: #777; }
.develop-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 13px; }
.develop-table th, .develop-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #e3e3e3; }
.develop-hint { font-size: 12px; color: #666; }


/* Notifications page + badges */
.notif-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eee; font-size: 13px; }
.notif-row.unread { background: #f4f9ff; }
.notif-avatar { width: 32px; height: 32px; border-radius: 50%; background: #eee; }
.notif-text { flex: 1; }
.notif-time { color: #999; font-size: 11px; white-space: nowrap; }
.notif-empty { color: #888; padding: 14px 4px; }
.notif-pending h4 { margin: 6px 4px; font-size: 13px; color: #555; }
.game-badge.earned img { border-color: #f5b400; box-shadow: 0 0 0 2px #ffe08a inset; }
.game-badge:not(.earned) img { filter: grayscale(1); opacity: .6; }


/* Ad slots */
.ad-slot { margin: 0 auto 12px; overflow: hidden; }
.ad-slot img { display: block; }
.ad-slot-1 { max-width: 100%; }
.game-ad-skyscraper { float: right; margin: 0 0 12px 12px; }
.profile-ad { margin: 0 0 12px; }
.ad-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.ad-fund { margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.ad-fund input { width: 90px; }
@media (max-width: 900px) { .ad-slot-1, .game-ad-skyscraper { display: none; } }


/* Groups: tabs as links, relations, admin extras */
.GroupsPeopleTabs_Container a.tab { text-decoration: none; color: inherit; display: inline-block; }
.group-relations { padding: 10px; display: flex; flex-wrap: wrap; gap: 12px; }
.group-relation { width: 120px; text-align: center; text-decoration: none; color: inherit; font-size: 12px; }
.group-relation img { width: 80px; height: 80px; display: block; margin: 0 auto 4px; border: 1px solid #ddd; background: #fff; }
.group-relation small { display: block; color: #888; }
.group-admin-extra { margin-top: 14px; padding: 12px; }
.group-emblem-preview img { border: 1px solid #ddd; background: #fff; margin-bottom: 8px; }