/* Tilus — charcoal, copper and server photography. */
:root {
    --bg:#171918; --surface:#202321; --surface-2:#2a2e2b; --field:#141715;
    --line:#343b35; --line-strong:#505b52; --text:#edece6; --text-2:#bdc3bc; --text-3:#959f96;
    --accent:#dca87d; --accent-hover:#f0c39c; --accent-ink:#231a11; --accent-soft:rgba(220,168,125,.1);
    --radius:12px; --radius-sm:7px; --page:1240px; --gutter:30px;
    --text-muted:#959f96 !important;
}
html body { background:var(--bg) !important; }
html body h1,html body h2,html body h3 { letter-spacing:-.025em !important; }
html body .btn { border-radius:7px !important; font-size:14px !important; box-shadow:none !important; }
html body .btn-primary { color:#20170f !important; background:var(--accent) !important; border-color:var(--accent) !important; }
html body .btn-primary:hover { background:var(--accent-hover) !important; }
html body [hidden] { display:none !important; }
.workspace-label { display:block; color:var(--text-3); font-size:13px; letter-spacing:0; font-weight:500; }

/* Compact horizontal navigation. */
html body .site-header { background:rgba(23,25,24,.98) !important; min-height:78px !important; gap:40px; }
html body .site-brand-copy { letter-spacing:.06em !important; font-size:20px !important; }
html body .site-nav { overflow:visible; justify-content:center; gap:8px; }
html body .site-nav-link { position:relative; font-size:14px !important; border-radius:5px !important; padding:9px 12px !important; }
html body .site-nav-link.active { color:var(--accent) !important; background:transparent !important; }
html body .site-nav-link .rail-icon { display:none; }
html body .site-account { border-radius:7px !important; padding:9px 16px !important; }
.rail-more { position:relative; }
.rail-more summary { list-style:none; display:flex; align-items:center; gap:9px; padding:9px 12px; color:var(--text-2); font-size:14px; cursor:pointer; }
.rail-more summary::-webkit-details-marker { display:none; }
.rail-more summary::after { content:''; width:6px; height:6px; border-right:1.5px solid; border-bottom:1.5px solid; transform:rotate(45deg) translateY(-2px); }
.rail-more[open] summary { color:var(--accent); }
.rail-more > div { position:absolute; right:0; top:calc(100% + 14px); width:430px; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:16px; border:1px solid var(--line-strong); background:#202521; border-radius:12px; box-shadow:0 24px 60px #0005; }
.rail-more a { display:flex; align-items:center; min-height:40px; padding:9px 12px; border-radius:6px; color:var(--text-2); font-size:14px; text-decoration:none; }
.rail-more a:hover { background:var(--surface-2); color:var(--text); }

/* Full-body 3D character (assets/tilus-character.js draws the figure and its contact shadow). */
.tilus-skin3d { position:relative; width:min(100%,var(--skin-width)); height:var(--skin-height); margin:0 auto; isolation:isolate; }
.tilus-skin-canvas { display:block !important; width:100% !important; height:100% !important; cursor:default; pointer-events:none; }
.tilus-skin-status { position:absolute; inset:40% 12px auto; color:var(--text-2); font-size:13px; text-align:center; pointer-events:none; }
[data-skin-state='ready'] .tilus-skin-status { display:none; }
.tilus-skin-controls { display:none !important; }
.tilus-skin-retry { min-height:30px; border:1px solid var(--line); border-radius:5px; padding:4px 10px; color:var(--text-2); background:#171c18; font:12px/1.3 var(--font); cursor:pointer; }
.tilus-skin-retry { position:absolute; top:60%; left:50%; transform:translateX(-50%); white-space:nowrap; }
.character-caption { display:block; margin-top:8px; text-align:center; color:var(--text-3); font-size:12px; }

/* Homepage: world on the left, your character on the right, connection below. */
.home-main { width:calc(100% - var(--gutter)*2); max-width:var(--page); margin:32px auto 0; }
.home-overview { display:grid; grid-template-columns:minmax(0,1fr) 316px; grid-template-rows:minmax(410px,1fr) auto; gap:0 28px; }
.home-main .home-hero { position:relative; display:flex; align-items:flex-end; min-height:430px; padding:40px; margin:0; border-radius:12px; overflow:hidden; isolation:isolate; background:#273027; }
.home-hero .home-hero-shot { position:absolute; inset:0; z-index:-2; }
.home-hero .home-hero-shot img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border:0; border-radius:0; }
.home-hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#11191200 10%,#11191240 35%,#111912ed 100%); }
.home-photo-caption { color:#dedfd2; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
html body .home-hero h1 { font-size:clamp(64px,7.8vw,112px) !important; line-height:1 !important; font-weight:700 !important; letter-spacing:-.07em !important; margin:10px 0 16px !important; color:#f4f0e5; }
.home-hero h1 span { color:var(--accent); }
.home-hero .home-hero-text p { max-width:370px; color:#d5dacf; font-size:18px; line-height:1.55; margin:0 0 22px; }
html body .home-hero .btn { color:#f4f0e5 !important; gap:30px; background:#f4f0e512 !important; border-color:#e6ead142 !important; }
/* Hero: online pill, the address button and a crew of players who are online right now. */
.home-hero-text { position:relative; z-index:1; }
.home-live { display:flex; width:fit-content; align-items:center; gap:8px; margin:0 0 16px; padding:6px 12px; border:1px solid #e6ead13d; border-radius:999px; background:#0f14106b; color:#e7ebdf; font-size:13px; font-weight:500; text-decoration:none; backdrop-filter:blur(6px); }
.home-live:hover { border-color:#e6ead170; color:#fff; }
.home-live i { width:8px; height:8px; border-radius:50%; background:#6cc28c; box-shadow:0 0 0 3px #6cc28c33; }
.home-live.is-offline i { background:#e2b55c; box-shadow:none; }
.home-hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
html body .home-hero .home-ip { gap:12px; color:#20170f !important; background:var(--accent) !important; border-color:var(--accent) !important; font-weight:600; }
html body .home-hero .home-ip:hover { background:var(--accent-hover) !important; border-color:var(--accent-hover) !important; }
html body .home-hero .home-ip span { color:#20170f; font-weight:500; opacity:.62; }
.home-crew { position:absolute; right:3%; bottom:0; width:50%; height:76%; pointer-events:none; }
.home-crew .tilus-skin3d { width:100%; height:100%; --skin-facing:left; --skin-light:copper; }
.tilus-skin-crew .tilus-skin-status,.tilus-skin-crew .tilus-skin-retry { display:none !important; }
.tilus-nametag { position:absolute; z-index:1; transform:translate(-50%,-100%); padding:3px 7px 4px; border-radius:3px; background:#0000007a; color:#fff; font:600 12px/1.2 var(--font); white-space:nowrap; text-decoration:none; pointer-events:auto; transition:background .15s,color .15s; }
.tilus-nametag:hover,.tilus-nametag:focus-visible { background:var(--accent); color:#20170f; }
.home-side { display:contents; }
.workspace-account-card { position:relative; display:flex; flex-direction:column; grid-column:2; grid-row:1 / 3; padding:0 10px 0 12px; min-width:0; }
.character-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid var(--line); }
.home-character { flex:1; display:grid; place-items:center; min-height:305px; }
.home-character .tilus-skin3d { width:100%; --skin-height:330px !important; --skin-facing:left; }
html body .workspace-account-card h2 { font-size:23px !important; line-height:1.2; margin:10px 0 8px !important; overflow-wrap:anywhere; }
.workspace-account-card p { min-height:40px; margin:0 0 16px; color:var(--text-3); font-size:14px; line-height:1.5; }
.workspace-account-card > .btn { width:100%; }
.workspace-server-card { grid-column:1; display:grid; grid-template-columns:1fr auto; gap:2px 20px; align-items:center; padding:22px 2px 0; }
.workspace-server-card .home-status { grid-column:1; margin:0 0 3px; padding:0; border:0; background:none; color:var(--text-3); font-size:13px; }
.workspace-server-card > strong { grid-column:1; font-size:22px; font-weight:600; }
.workspace-server-card > span { display:none; }
.workspace-server-card .btn { grid-column:2; grid-row:1 / 3; }
/* Who is playing: the faces of everyone online, under the hero. */
.workspace-server-card.home-online { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px 18px; }
html body .home-online-title { margin:0 !important; color:var(--text-3); font-size:13px !important; font-weight:500 !important; line-height:1.3 !important; }
.home-heads { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.home-head { display:block; border-radius:6px; }
.home-head img { display:block; width:34px; height:34px; border-radius:6px; background:var(--surface-2); image-rendering:pixelated; }
.home-head:hover img,.home-head:focus-visible img { outline:2px solid var(--accent); outline-offset:1px; }
.home-heads-more { display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:6px; background:var(--surface-2); color:var(--text-2); font-size:13px; text-decoration:none; }
.home-heads-more:hover { color:var(--accent); }
.home-online-link { color:var(--text-3); font-size:14px; text-decoration:none; white-space:nowrap; }
.home-online-link:hover { color:var(--accent); }
.home-main .home-section { margin-top:55px; }
.home-main .home-section-head { margin-bottom:18px; }
html body .home-section h2 { font-size:23px !important; font-weight:600 !important; }
.home-section-head > a { color:var(--text-3); font-size:14px; }
.home-main .home-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; border-top:1px solid var(--line); }
.home-main .home-card { min-width:0; gap:16px; padding:24px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.home-main .home-card:hover { background:transparent; border-color:var(--accent); }
.home-card img { width:30px; height:30px; }
.home-card strong { font-size:16px; }
.home-card small { font-size:13px; line-height:1.5; }
.home-main .home-steps { gap:16px; }
.home-main .home-steps li { border-radius:8px; background:var(--surface); }
.home-main .home-steps li::before { color:var(--accent); background:transparent; border:1px solid var(--line-strong); border-radius:5px; }
.home-main .home-news { grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.home-main .home-news a { display:grid; grid-template-columns:120px 1fr; gap:4px 24px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:22px 0; }
.home-news a time { padding-top:4px; }
.home-news a strong { margin:0; font-size:17px; }
.home-news a p { grid-column:2; margin:0; font-size:14px; }
.home-main .home-shots a { border-radius:8px; }
.home-main .home-faq { max-width:none; }
.home-main .home-faq summary { font-size:15px; }
.home-main .home-faq p { font-size:15px; }

/* Player identity is an open layout; the 3D model has its own stage. */
html body .cabinet-hero { width:min(calc(100% - var(--gutter)*2),var(--page)); display:grid; grid-template-columns:minmax(0,1fr) 245px; gap:0 32px; margin:32px auto 0; border:0; border-radius:0; background:none; overflow:visible; }
html body .cabinet-banner { display:grid; grid-template-columns:290px minmax(0,1fr); align-items:center; gap:34px; padding:0; min-height:380px; border:0; border-radius:0; background:none; }
html body .cabinet-skin { position:relative; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; padding:12px 0; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg,#252c265e,#1b201c),var(--banner) center/cover; }
html body .cabinet-skin .tilus-skin-canvas { filter:none; width:100% !important; height:100% !important; }
.cabinet-main { min-width:0; }
html body .cabinet-main h1 { font-size:clamp(28px,3vw,44px) !important; margin:10px 0 15px !important; text-shadow:none !important; overflow-wrap:anywhere; }
.cabinet-pills { gap:7px; }
html body .cabinet-pill { border-radius:5px; font-size:12px; padding:5px 8px; }
.cabinet-meta { display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.cabinet-public-link { display:inline-block; margin-top:22px; color:var(--accent); font-size:14px; text-decoration:none; }
html body .cabinet-coins { display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:14px; min-width:0; padding:24px 0 24px 28px; border:0; border-left:1px solid var(--line); border-radius:0; background:none; }
html body .cabinet-coins-label { display:block; font-size:14px; }
html body .cabinet-coins-value { flex-wrap:wrap; gap:7px; }
html body .cabinet-coins-value strong { font-size:32px; }
.cabinet-coins .cabinet-public-link { margin-top:0; color:var(--text-3); font-size:13px; }
html body .cabinet-tabs { grid-column:1 / -1; gap:28px; padding:0; margin-top:26px; border-top:0; border-bottom:1px solid var(--line); }
html body .cabinet-tabs a { padding:14px 0; font-size:15px; }

/* Existing forms and permissions stay in place. */
html body.workspace-dashboard > .container { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; margin-top:28px !important; }
.workspace-dashboard .container > .profile-lock { grid-column:1 / -1; }
html body.workspace-dashboard .profile-banner-panel { margin:0; padding:24px; border-radius:10px !important; }
html body.workspace-dashboard .profile-banner-layout { grid-template-columns:1fr; gap:20px; }
html body.workspace-dashboard .profile-banner-preview { min-height:160px; border-radius:7px; }
html body.workspace-dashboard .profile-banner-form { padding:0; gap:16px; }
html body.workspace-dashboard .profile-banner-form h2 { font-size:21px !important; }
html body.workspace-dashboard .profile-banner-form p { color:var(--text-3); font-size:14px; }
.workspace-dashboard .banner-preset span { font-size:13px; text-transform:none; letter-spacing:0; }
.workspace-dashboard .banner-upload-copy strong { font-size:14px; }
.workspace-dashboard .banner-upload-copy small { font-size:12px; }
html body.workspace-dashboard .banner-upload { background:var(--field); border-color:var(--line-strong); border-radius:7px; }
html body.workspace-dashboard .banner-upload-icon { color:var(--accent); background:var(--surface-2); border-radius:5px; }
html body.workspace-dashboard .grid-menu { display:flex; flex-direction:column; gap:0; margin:0; }
html body.workspace-dashboard .menu-card { display:grid; grid-template-columns:28px minmax(0,1fr); gap:5px 14px; align-items:center; padding:22px 0; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; background:none !important; box-shadow:none !important; transform:none; }
html body.workspace-dashboard .menu-card h3 { margin:0 !important; font-size:16px !important; }
html body.workspace-dashboard .menu-card p { grid-column:2; margin:0; font-size:14px; line-height:1.5; }
html body.workspace-dashboard .menu-icon { margin:0; }
html body.workspace-dashboard .menu-icon svg { width:23px; height:23px; fill:var(--accent); }
html body.workspace-dashboard .menu-icon-text { width:26px; height:26px; border-color:var(--line-strong); color:var(--accent); }
html body .auth-container { width:min(740px,calc(100% - var(--gutter)*2)); min-height:430px; margin:45px auto 0; padding:35px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
html body .auth-container .auth-title { font-size:34px !important; margin:14px 0 !important; }

html body.workspace-player .profile-scope { width:min(calc(100% - var(--gutter)*2),var(--page)); display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:30px auto 0; --pf-panel:var(--surface); --pf-muted:var(--text-3); --pf-dim:var(--text-3); --pf-accent:var(--accent); }
.workspace-player .profile-search,.workspace-player .profile-hero,.workspace-player .profile-stub,.workspace-player .profile-ban { grid-column:1 / -1; margin:0; }
html body.workspace-player .profile-search input { min-height:46px !important; height:46px !important; font-size:15px !important; flex:1 0 auto; }
html body.workspace-player .profile-hero { padding:0 30px 0 0; border-radius:10px; background:var(--surface); }
html body.workspace-player .profile-hero-inner { gap:35px; }
.workspace-player .profile-hero::after { background:linear-gradient(90deg,#17191840,var(--surface) 70%); }
html body.workspace-player .profile-skin { width:300px; height:auto; align-self:stretch; padding:15px 0; border:0; border-right:1px solid var(--line); border-radius:0; background:#151a1680; }
.workspace-player .profile-skin::before { display:none; }
html body.workspace-player .profile-name { font-size:38px !important; }
.workspace-player .profile-seen { font-size:14px; }
.workspace-player .profile-badge { font-size:12px; text-transform:none; letter-spacing:0; border-radius:5px; }
html body.workspace-player .profile-card { margin:0; padding:25px; border-radius:10px !important; }
html body.workspace-player .profile-card:has(#moments-title) { grid-column:1 / -1; }
html body.workspace-player .profile-card-title { color:var(--text) !important; font-size:16px !important; letter-spacing:0 !important; text-transform:none; }
.workspace-player .profile-card-note,.workspace-player .playtime-caption,.workspace-player .chart-axis,.workspace-player .chart-legend div span,.workspace-player .playtime-cell span { font-size:12px; text-transform:none; letter-spacing:0; }
.workspace-player .chart-bar { background:var(--accent); }
.workspace-player .chart { height:140px; }
.workspace-player .profile-stub p,.workspace-player .profile-empty-note { font-size:15px; }
html body .tilus-footer-spacer { min-height:65px; }
html body .tilus-footer { background:#121613 !important; }

@media (max-width:1080px) {
    html body .site-header { min-height:64px !important; gap:20px; }
    html body .site-nav { overflow-y:auto; background:var(--bg) !important; }
    .rail-more { grid-column:1 / -1; }
    .rail-more > div { position:static; width:auto; margin-top:8px; box-shadow:none; }
    .home-overview { grid-template-columns:minmax(0,1fr) 275px; gap:0 22px; }
    .home-main .home-hero { padding:30px; }
    html body .cabinet-hero { grid-template-columns:minmax(0,1fr) 210px; gap:0 22px; }
    html body .cabinet-banner { grid-template-columns:220px minmax(0,1fr); gap:24px; }
    html body .cabinet-skin .tilus-skin3d { --skin-height:325px !important; }
    html body .cabinet-coins { padding-left:20px; }
}
@media (max-width:760px) {
    :root { --gutter:20px; }
    .home-main { margin-top:22px; }
    .home-overview { grid-template-columns:1fr; gap:0; }
    .home-main .home-hero { min-height:390px; }
    .workspace-server-card { grid-column:1; grid-row:2; padding:20px 0; border-bottom:1px solid var(--line); }
    .workspace-account-card { grid-column:1; grid-row:3; margin-top:28px; padding:0; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0 24px; }
    .character-heading { grid-column:1 / -1; }
    .home-character { grid-column:1; grid-row:2 / 5; }
    .home-character .tilus-skin3d { --skin-facing:right; }
    .workspace-account-card h2 { grid-column:2; align-self:end; }
    .workspace-account-card p { grid-column:2; margin:8px 0 16px; }
    .workspace-account-card > .btn { grid-column:2; align-self:start; }
    .home-main .home-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .home-main .home-news a { grid-template-columns:1fr; gap:7px; }
    .home-news a p { grid-column:1; }
    html body .cabinet-hero { grid-template-columns:1fr; }
    html body .cabinet-banner { grid-template-columns:230px minmax(0,1fr); }
    html body .cabinet-coins { display:grid; grid-template-columns:1fr auto; gap:8px; padding:22px 0; margin-top:20px; border-left:0; border-bottom:1px solid var(--line); }
    .cabinet-coins-label,.cabinet-coins-value { grid-column:1; }
    .cabinet-coins .btn { grid-column:2; grid-row:1 / 3; }
    .cabinet-coins .cabinet-public-link { grid-column:1 / -1; }
    html body .cabinet-tabs { margin-top:0; }
    html body.workspace-dashboard > .container { grid-template-columns:1fr; gap:20px; }
    html body.workspace-player .profile-scope { grid-template-columns:1fr; }
    html body.workspace-player .profile-skin { width:230px; }
    .profile-skin .tilus-skin3d { --skin-height:320px !important; }
}
@media (max-width:480px) {
    :root { --gutter:16px; }
    .home-main .home-hero { min-height:370px; padding:26px; }
    html body .home-hero h1 { font-size:76px !important; }
    .home-hero .home-hero-text p { font-size:16px; }
    .workspace-server-card { gap:7px; }
    .workspace-server-card > strong { font-size:20px; }
    .workspace-server-card .btn { padding:10px 12px !important; font-size:12px !important; }
    .workspace-account-card { gap:0 16px; grid-template-columns:46% 1fr; }
    .home-character { min-height:260px; }
    .home-character .tilus-skin3d { --skin-height:255px !important; }
    html body .workspace-account-card h2 { font-size:20px !important; }
    .workspace-account-card > .btn { font-size:12px !important; padding:10px !important; }
    .workspace-account-card p { font-size:13px; }
    .home-main .home-cards { grid-template-columns:1fr; }
    .home-main .home-section { margin-top:38px; }
    html body .cabinet-banner { grid-template-columns:1fr; gap:22px; text-align:left; }
    html body .cabinet-skin { padding:8px 0 14px; }
    html body .cabinet-skin canvas { width:100% !important; height:100% !important; }
    html body .cabinet-skin .tilus-skin3d { width:260px; --skin-height:330px !important; }
    .cabinet-main { padding:0 4px; }
    .cabinet-pills,.cabinet-meta { justify-content:flex-start; }
    .cabinet-meta { margin-top:16px; }
    html body.workspace-player .profile-hero { padding:0 20px 26px; }
    html body.workspace-player .profile-hero-inner { flex-direction:column; gap:20px; text-align:center; }
    html body.workspace-player .profile-skin { width:100%; border-right:0; border-bottom:1px solid var(--line); }
    .workspace-player .profile-actions,.workspace-player .profile-badges { justify-content:center; }
    .workspace-player .profile-card-head { align-items:flex-start; flex-direction:column; gap:6px; }
}

/* Narrow heroes: text on top, the crew stands on the ground below it; the shade moves up for the text. */
@media (max-width:1060px) {
    .home-main .home-hero:has(.home-crew) { align-items:flex-start; padding-bottom:262px; }
    .home-main .home-hero:has(.home-crew)::after { background:linear-gradient(180deg,#111912eb 0%,#111912b3 40%,#11191233 66%,#111912b8 100%); }
    .home-crew { left:0; right:0; width:auto; height:256px; }
}
@media (max-width:760px) {
    .workspace-server-card.home-online { grid-template-columns:minmax(0,1fr) auto; }
    .home-heads { grid-column:1 / -1; grid-row:2; }
}
@media (max-width:480px) {
    .home-main .home-hero:has(.home-crew) { padding-bottom:222px; }
    .home-crew { height:216px; }
}