/* Shared tokens. System mode is also applied before JavaScript loads. */
:root{--bg:#fff;--bar:#f7f7f8;--surface:#eceef1;--text:#272930;--muted:#606977;--border:#dedfe4;--hover:#e3e5e9;--header-height:40px;color:var(--text);background:var(--bg);color-scheme:light}
:root[data-theme=dark]{--bg:#121318;--bar:#191a1f;--surface:#272930;--text:#f7f7f8;--muted:#b7bbc5;--border:#393b45;--hover:#343640;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--bg:#121318;--bar:#191a1f;--surface:#272930;--text:#f7f7f8;--muted:#b7bbc5;--border:#393b45;--hover:#343640;color-scheme:dark}}
body{background:var(--bg);color:var(--text)}
/* The official login and Creator landing use a forced dark appearance. */
body:is([data-page=home],[data-page=login],[data-page=create]){--bg:#111216;--bar:#191b21;--surface:#272930;--text:#f7f7f8;--muted:#b7bbc5;--border:#393b45;--hover:#343640;color-scheme:dark}
.topbar{height:var(--header-height);padding:0 12px;gap:0;background:var(--bar);border-bottom:1px solid var(--border);color:var(--text)}
.brand{width:163px;height:40px;justify-content:flex-start;color:var(--text);flex-shrink:0}
.brand-mark{display:none;width:30px;height:30px;transform:none;background:currentColor;-webkit-mask:url('/assets/roblox-mark.svg') center/contain no-repeat;mask:url('/assets/roblox-mark.svg') center/contain no-repeat}
.brand-mark:after{display:none}
.brand-wordmark{display:block;width:118px;height:30px;background:currentColor;-webkit-mask:url('/assets/roblox-wordmark.svg') center/contain no-repeat;mask:url('/assets/roblox-wordmark.svg') center/contain no-repeat}
.topbar nav{width:41.6667vw;flex:0 0 41.6667vw;gap:0;justify-content:space-around}
.topbar .nav-link{display:flex;justify-content:center;align-items:center;height:100%;flex:1;padding:0 9px;font-size:16px;font-weight:500;border-bottom:2px solid transparent}
.topbar .nav-link:hover{border-color:currentColor;text-decoration:none}
.topbar #search-form{flex:0 1 16.6667vw;width:16.6667vw;max-width:800px;min-width:120px;margin:0 12px}
#search{height:28px;padding:0 12px 0 32px;background:var(--surface);color:var(--text);border-color:var(--border);font-size:16px}
#search::placeholder{color:var(--muted);opacity:1}
.search-icon{border-color:var(--muted);background:transparent}
.search-icon:after{background:var(--muted)}
.account-links{gap:4px;margin-left:auto}
.account-links a{font-size:16px;height:30px;padding:0 9px}
.account-links .login-button{color:var(--text);border-color:var(--muted)}
.login-button:hover{background:var(--hover)}
#mobile-search-toggle{display:none;position:relative;width:36px;height:36px;padding:0;background:transparent}
#mobile-search-toggle .search-icon{top:9px;left:8px;width:16px;height:16px}
#search-backdrop{position:fixed;inset:var(--header-height) 0 0;z-index:29;background:#0008}
.search-suggestions{position:fixed;left:50%;right:auto;top:var(--header-height);transform:translateX(-50%);width:min(800px,80vw);max-height:calc(100dvh - var(--header-height) - 12px);overflow-y:auto;border:0;border-radius:8px;background:var(--bg);color:var(--text);box-shadow:0 4px 16px #0004;padding:6px 0;z-index:40}
body:is([data-page=home],[data-page=login]) .search-suggestions{color:var(--text)}
.search-suggestions button{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--bg);color:var(--text);text-align:left;font-size:16px;line-height:24px}
.search-suggestions button:last-child{border-bottom:0}
.search-suggestions button:hover,.search-suggestions button:focus{background:var(--surface)}
.search-suggestions button:focus-visible{outline-offset:-3px}
.search-suggestions svg{width:24px;height:24px;flex:0 0 24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.search-suggestions .search-go{margin-left:auto;font-size:24px}
.robux-icon{background:currentColor;-webkit-mask:url('/assets/robux.png') center/contain no-repeat;mask:url('/assets/robux.png') center/contain no-repeat}
.theme-preference{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.theme-preference select{height:34px;border:1px solid var(--border);border-radius:8px;background:var(--bar);color:var(--text);padding:0 12px}
.footer-links{color:var(--muted)}
.footer-bottom{border-color:var(--border);color:var(--muted)}
.section-subtitle,.game-meta,.result-count,.text-button,.empty p,.error-panel p{color:var(--muted)}
.info{color:var(--muted);border-color:var(--muted)}
.arrow{background:var(--bar);color:var(--muted)}
.placeholder{background:var(--surface);color:var(--muted)}
.skeleton .cover,.skeleton-line{background:linear-gradient(90deg,var(--bar) 25%,var(--surface) 50%,var(--bar) 75%);background-size:200% 100%}
.empty,.error-panel{background:var(--bar)}
.pill{background:var(--text);color:var(--bg)}
.pill option,select option{background:var(--bg);color:var(--text)}
.people-search input{background:var(--bg);color:var(--text)}
.experience-stats{border-color:var(--border)}
.experience-description,.badge-copy p{color:var(--muted)}
.experience-favorite::after{border:1px solid var(--border);box-shadow:0 2px 6px #0002}
.see-more{background:var(--surface);color:var(--text)}
.see-more:hover{background:var(--hover)}
.login-screen{height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));min-height:560px}
@media(min-width:1200px){.topbar nav{width:33.3333vw;flex-basis:33.3333vw}.topbar #search-form{width:25vw;flex-basis:25vw}}
@media(max-width:991px){
 :root{--header-height:82px}
 .topbar{height:var(--header-height);flex-wrap:wrap;padding:0 12px;gap:0}
 .brand{width:44px;height:40px}
 .brand-wordmark{display:none}
 .brand-mark{display:block}
 .topbar nav{order:5;width:100%;flex-basis:100%;height:40px;gap:0}
 .topbar .nav-link{font-size:16px;padding:0 8px}
 .topbar #search-form{width:auto;flex:1;max-width:450px;margin:0 12px;min-width:100px}
 .account-links a{font-size:14px}
 .search-suggestions{top:44px;width:80vw;max-height:calc(100dvh - 90px)}
}
@media(max-width:600px){
 :root{--header-height:74px}
 .topbar nav{height:34px}
 .topbar .nav-link{font-size:14px}
 .topbar #search-form{display:none;position:absolute;top:40px;left:0;right:0;max-width:none;width:auto;margin:0 12px;z-index:41}
 .topbar #search-form.mobile-search-open{display:flex}
 #search{height:32px;font-size:16px}
 #mobile-search-toggle{display:block;margin-left:auto}
 .account-links{margin-left:6px}
 .account-links a{font-size:14px}
 .account-links .official-button{display:inline-flex}
 .search-suggestions{top:78px;width:calc(100vw - 24px);max-height:calc(100dvh - 90px)}
 .search-suggestions button{padding:12px 16px;font-size:14px;gap:12px}
 .login-card{width:min(357px,calc(100% - 28px))}
 .login-screen{min-height:560px}
}