/*!
 * Sunstone — LeaderOS theme · "Voxel Depth"
 * (c) Viasly. Licensed per domain; redistribution prohibited.
 * Surfaces are blocks: a face plus a solid ledge underneath that sinks when pressed.
 * Display: Parkinsans · Body: Readex Pro · Icons: Phosphor (bold/fill)
 */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
	--ss-accent: #2FD06B;
	--ss-on-accent: #141821;
	--ss-accent-hover: color-mix(in oklab, var(--ss-accent), white 12%);
	--ss-accent-press: color-mix(in oklab, var(--ss-accent), black 10%);
	--ss-accent-soft: color-mix(in oklab, var(--ss-accent) 16%, transparent);
	--ss-accent-ink: color-mix(in oklab, var(--ss-accent) 48%, #141821);
	--ss-accent-edge: color-mix(in oklab, var(--ss-accent) 62%, #04140A);

	--ss-ink: #141821;
	--ss-ink-2: #1F2430;
	--ss-bone: #F2F3F7;
	--ss-paper: #FFFFFF;
	--ss-sand: #E4E7EE;
	--ss-discord: #5865F2;
	--ss-live: #2FD06B;
	--ss-danger: #F0435B;
	--ss-warning: #FFB020;
	--ss-info: #2F8CFF;
	--ss-pink: #FF6FAE;

	--ss-t-grape: #7357F6;
	--ss-t-sky: #2A82F5;
	--ss-t-cherry: #F2405F;
	--ss-t-mint: #10A88A;
	--ss-t-sun: #FFB927;
	--ss-t-tangerine: #F2772E;
	--ss-t-leaf: #22A957;
	/* tone names the page stylesheets were written with */
	--ss-tone-navy: #3B6BF0;
	--ss-tone-plum: var(--ss-t-grape);
	--ss-tone-slate: #4C5568;
	--ss-tone-teal: var(--ss-t-mint);
	--ss-tone-rose: var(--ss-t-cherry);
	--ss-tone-forest: #23A455;

	--ss-display: "Parkinsans", "Readex Pro", "Segoe UI", system-ui, sans-serif;
	--ss-font: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ss-display-lh: 1.06;

	--ss-r-xs: 6px;
	--ss-r-sm: 10px;
	--ss-r: 14px;
	--ss-r-lg: 20px;
	--ss-r-xl: 26px;
	--ss-notch: 0px;
	--ss-ease: cubic-bezier(.22, 1, .36, 1);
	--ss-spring: cubic-bezier(.34, 1.56, .64, 1);
	--ss-nav-h: 80px;
	--ss-edge: max(clamp(1rem, 2.5vw, 2rem), calc((100vw - 1320px) / 2)); /* container content edge */

	--ss-ledge: #D2D6DF;           /* bottom face of a block on light surfaces */
	--ss-depth: 5px;
	--ss-soft: 0 18px 36px -22px rgba(20, 24, 33, .42);
	--ss-shadow-card: 0 calc(var(--ss-depth) * .9) calc(var(--ss-depth) * 2.6) calc(var(--ss-depth) * -1.1) var(--ss-ledge), var(--ss-soft);
	--ss-shadow-lift: 0 calc(calc(var(--ss-depth) + 3px) * .9) calc(calc(var(--ss-depth) + 3px) * 2.6) calc(calc(var(--ss-depth) + 3px) * -1.1) var(--ss-ledge), 0 28px 46px -24px rgba(20, 24, 33, .5);
	--ss-shadow-float: 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) var(--ss-ledge), 0 30px 60px -24px rgba(20, 24, 33, .5);

	--band-bg: #F1F2F5;
	--band-fg: var(--ss-ink);
	--band-muted: #5A6375;
	--band-line: rgba(20, 24, 33, .12);
	--band-card: #FFFFFF;
	--band-card-line: rgba(20, 24, 33, .08);
	--band-sunk: #E9EBF0;
	--band-input: #FFFFFF;

	--bs-body-font-family: var(--ss-font);
	--bs-body-font-size: 1rem;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.6;
	--bs-body-bg: var(--band-bg);
	--bs-body-color: var(--ss-ink);
	--bs-emphasis-color: var(--ss-ink);
	--bs-heading-color: inherit;
	--bs-secondary-color: #5A6375;
	--bs-tertiary-color: #7A8294;
	--bs-secondary-bg: #E9EBF0;
	--bs-tertiary-bg: #FFFFFF;
	--bs-border-color: rgba(20, 24, 33, .12);
	--bs-border-color-translucent: rgba(20, 24, 33, .1);
	--bs-border-radius: var(--ss-r);
	--bs-border-radius-sm: var(--ss-r-sm);
	--bs-border-radius-lg: var(--ss-r-lg);
	--bs-border-radius-xl: var(--ss-r-lg);
	--bs-border-radius-pill: 999px;
	--bs-link-color: inherit;
	--bs-link-color-rgb: 20, 24, 33;
	--bs-link-hover-color: inherit;
	--bs-link-hover-color-rgb: 20, 24, 33;
	--bs-link-decoration: none;
	--bs-code-color: var(--ss-t-cherry);
	--bs-focus-ring-color: color-mix(in oklab, var(--ss-accent) 55%, transparent);
	--bs-success: var(--ss-live);
	--bs-danger: var(--ss-danger);
	--bs-warning: var(--ss-warning);
	--bs-info: var(--ss-info);
	--bs-box-shadow: var(--ss-shadow-card);
}

[data-bs-theme="dark"] {
	color-scheme: dark;
	--band-bg: #0E1015;
	--band-fg: #F2F3F7;
	--band-muted: #A1A8B8;
	--band-line: rgba(242, 243, 247, .12);
	--band-card: #181B23;
	--band-card-line: rgba(242, 243, 247, .07);
	--band-sunk: #12141A;
	--band-input: #12141A;
	--ss-ledge: #07080B;
	--ss-soft: 0 20px 40px -24px rgba(0, 0, 0, .85);
	--ss-accent-ink: color-mix(in oklab, var(--ss-accent) 76%, white);
	--bs-body-bg: #0E1015;
	--bs-body-color: #F2F3F7;
	--bs-emphasis-color: #F2F3F7;
	--bs-secondary-color: #A1A8B8;
	--bs-tertiary-color: #8790A2;
	--bs-secondary-bg: #12141A;
	--bs-tertiary-bg: #181B23;
	--bs-border-color: rgba(242, 243, 247, .12);
	--bs-border-color-translucent: rgba(242, 243, 247, .09);
	--bs-link-color-rgb: 242, 243, 247;
	--bs-link-hover-color-rgb: 242, 243, 247;
	--bs-code-color: var(--ss-pink);
}

.band { background: var(--band-bg); color: var(--band-fg); position: relative; }
.band-bone {
	--band-bg: #F1F2F5; --band-fg: var(--ss-ink); --band-muted: #5A6375; --band-line: rgba(20, 24, 33, .12);
	--band-card: #FFFFFF; --band-card-line: rgba(20, 24, 33, .08); --band-sunk: #E9EBF0; --band-input: #FFFFFF; --ss-ledge: #D2D6DF;
	--bs-body-color: var(--ss-ink); --bs-secondary-color: #5A6375; --bs-border-color: rgba(20, 24, 33, .12); --bs-link-color-rgb: 20, 24, 33;
}
.band-paper { --band-bg: #FFFFFF; --band-card: #FFFFFF; }
/* night surface: the colour of the scene's night sky */
.band-ink, .ss-night {
	--band-bg: #141936; --band-fg: #F2F3F7; --band-muted: #AEB4CF; --band-line: rgba(242, 243, 247, .14);
	--band-card: #1D2349; --band-card-line: rgba(242, 243, 247, .08); --band-sunk: #0F1330; --band-input: #0F1330; --ss-ledge: #090C21;
	--ss-accent-ink: color-mix(in oklab, var(--ss-accent) 78%, white);
	--bs-body-color: #F2F3F7; --bs-secondary-color: #AEB4CF; --bs-border-color: rgba(242, 243, 247, .14); --bs-link-color-rgb: 242, 243, 247;
	--ss-soft: 0 20px 40px -24px rgba(0, 0, 0, .8);
}
[data-bs-theme="dark"] .band-bone {
	--band-bg: #0E1015; --band-fg: #F2F3F7; --band-muted: #A1A8B8; --band-line: rgba(242, 243, 247, .12);
	--band-card: #181B23; --band-card-line: rgba(242, 243, 247, .07); --band-sunk: #12141A; --band-input: #12141A; --ss-ledge: #07080B;
	--ss-accent-ink: color-mix(in oklab, var(--ss-accent) 76%, white);
	--bs-body-color: #F2F3F7; --bs-secondary-color: #A1A8B8; --bs-border-color: rgba(242, 243, 247, .12); --bs-link-color-rgb: 242, 243, 247;
}
[data-bs-theme="dark"] .band-paper { --band-bg: #13161D; --band-card: #1B1F28; }
[data-bs-theme="dark"] .band-ink, [data-bs-theme="dark"] .ss-night { --band-bg: #11152E; --band-card: #191F40; --band-sunk: #0C1027; --band-input: #0C1027; }

/* =========================================================================
   2. BASE
   ========================================================================= */
html { scroll-padding-top: calc(var(--ss-nav-h) + 16px); text-decoration-skip-ink: none; } /* the thick accent underlines run straight through descenders (g, y, ş) instead of breaking around them */
body { font-family: var(--ss-font); background: var(--band-bg); color: var(--band-fg); overflow-x: hidden; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; }
.ss-main { flex: 1 0 auto; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .15s var(--ss-ease); }
a:hover { color: inherit; }
p a:not(.btn), .ss-link { color: var(--band-fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
p a:not(.btn):hover, .ss-link:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid color-mix(in oklab, var(--ss-accent) 80%, var(--band-fg)); outline-offset: 2px; }
::selection { background: var(--ss-accent); color: var(--ss-on-accent); }
h1, h2, h3, h4, h5, h6 { color: inherit; font-family: var(--ss-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.18; }
h1, .h1 { font-size: 2rem; } h2, .h2 { font-size: 1.6rem; } h3, .h3 { font-size: 1.3rem; } h4, .h4 { font-size: 1.1rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: .9rem; }
hr { border-color: var(--band-line); opacity: 1; }
small, .small { font-size: .86rem; }
code { font-size: .88em; }
b, strong { font-weight: 650; }
.px, img[src*="minotar.net"], img[src*="cravatar.eu"], img[src*="mc-heads.net"], img[src*="/loaders/head.png"], img[src*="crafatar"], img[src*="/store/products/"], img[src*="/store/categories/"] { image-rendering: pixelated; }
.text-muted, .text-secondary, .text-body-secondary { color: var(--band-muted) !important; }
.text-primary { color: var(--ss-accent-ink) !important; }
.text-success { color: #17A350 !important; }
[data-bs-theme="dark"] .text-success, .band-ink .text-success { color: var(--ss-live) !important; }
.text-danger { color: var(--ss-danger) !important; }
.text-warning { color: #B9770F !important; }
[data-bs-theme="dark"] .text-warning, .band-ink .text-warning { color: var(--ss-warning) !important; }
.bg-body { background: var(--band-bg) !important; }
.bg-primary { background: var(--ss-accent) !important; color: var(--ss-on-accent) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--band-line) !important; }
.container, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: clamp(2rem, 5vw, 4rem); max-width: calc(1320px + var(--bs-gutter-x)); }
.min-w-0 { min-width: 0; }
.visually-hidden-focusable:focus { position: fixed !important; z-index: 2000; top: 8px; left: 8px; background: var(--ss-accent); color: var(--ss-on-accent); padding: .5rem 1rem; border-radius: var(--ss-r-sm); }

/* =========================================================================
   3. TYPE
   ========================================================================= */
.ss-display-font { font-family: var(--ss-display); font-weight: 800; line-height: var(--ss-display-lh); letter-spacing: -.03em; }
.ss-title { font-family: var(--ss-display); font-weight: 800; font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.3rem); line-height: var(--ss-display-lh); letter-spacing: -.035em; margin: 0; }
.ss-title-sm { font-family: var(--ss-display); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: var(--ss-display-lh); letter-spacing: -.03em; margin: 0; }
.ss-title em, .ss-title-sm em { font-style: normal; color: var(--ss-accent-ink); }
.ss-lead { max-width: 38rem; color: var(--band-muted); font-size: 1.08rem; margin: .7rem 0 0; }
.ss-kicker { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ss-display); font-weight: 700; font-size: .92rem; color: var(--band-muted); margin-bottom: .7rem; }
.ss-kicker::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--ss-accent); box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) var(--ss-accent-edge); }
.ss-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem); }
.ss-head--center { justify-content: center; text-align: center; }
.ss-head--center .ss-lead { margin-inline: auto; }
.ss-head-aside { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ss-link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--ss-display); font-weight: 700; font-size: 1rem; color: var(--band-fg); transition: gap .3s var(--ss-spring); }
.ss-link-arrow i { transition: transform .3s var(--ss-spring); }
.ss-link-arrow:hover { color: var(--band-fg); }
.ss-link-arrow:hover i { transform: translateX(4px); }
.ss-sec { padding-block: clamp(3.25rem, 2.4rem + 3vw, 5.5rem); }
.ss-sec-sm { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.ss-sec--sunk { background: var(--band-sunk); padding-top: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); }
.ss-sec--tight-top { padding-top: 0; }
.ss-stats + .ss-sec--tight-top { padding-top: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); }
.ss-price { font-family: var(--ss-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.ss-price-old { color: var(--band-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.ss-num { font-variant-numeric: tabular-nums; }
.ss-shore { position: relative; }

/* =========================================================================
   4. BUTTONS — every button is a small block that sinks into its ledge
   ========================================================================= */
.btn {
	--bs-btn-font-family: var(--ss-display); --bs-btn-font-weight: 700; --bs-btn-font-size: .98rem; --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .66rem;
	--bs-btn-border-width: 0; --bs-btn-border-radius: var(--ss-r-sm); --bs-btn-box-shadow: none; --bs-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
	--bs-btn-color: var(--band-fg); --bs-btn-bg: var(--band-card); --bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--band-fg); --bs-btn-hover-bg: var(--band-card); --bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--band-fg); --bs-btn-active-bg: var(--band-card); --bs-btn-active-border-color: transparent; --bs-btn-disabled-opacity: .55;
	--btn-edge: var(--ss-ledge); --btn-d: 4px;
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; line-height: 1.25; letter-spacing: -.005em; position: relative;
	box-shadow: 0 calc(var(--btn-d) * .9) calc(var(--btn-d) * 2.6) calc(var(--btn-d) * -1.1) var(--btn-edge), inset 0 1.5px 0 rgba(255, 255, 255, .28);
	transition: transform .22s var(--ss-spring), box-shadow .22s var(--ss-spring), background-color .2s var(--ss-ease), color .2s var(--ss-ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 calc(calc(var(--btn-d) + 2px) * .9) calc(calc(var(--btn-d) + 2px) * 2.6) calc(calc(var(--btn-d) + 2px) * -1.1) var(--btn-edge), inset 0 1.5px 0 rgba(255, 255, 255, .28); }
.btn:active, .btn.active:not(.btn-link) { transform: translateY(1px); box-shadow: 0 0 0 var(--btn-edge), inset 0 1.5px 0 rgba(255, 255, 255, .28); transition-duration: .06s; }
.btn:disabled, .btn.disabled { transform: none; }
.btn:focus-visible { box-shadow: 0 calc(var(--btn-d) * .9) calc(var(--btn-d) * 2.6) calc(var(--btn-d) * -1.1) var(--btn-edge), 0 0 0 3px var(--bs-focus-ring-color); }
.btn i[class*="ph-"] { font-size: 1.2em; }
.btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .44rem; --bs-btn-font-size: .87rem; --btn-d: 3px; --bs-btn-border-radius: 9px; }
.btn-lg { --bs-btn-padding-x: 1.45rem; --bs-btn-padding-y: .95rem; --bs-btn-font-size: 1.06rem; --btn-d: 5px; --bs-btn-border-radius: 14px; }
.btn-icon { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 42px; height: 42px; flex: none; }
.btn-sm.btn-icon { width: 34px; height: 34px; }
.btn-primary, .btn-accent, .btn-arena.btn-accent {
	--bs-btn-color: var(--ss-on-accent); --bs-btn-bg: var(--ss-accent); --bs-btn-hover-color: var(--ss-on-accent); --bs-btn-hover-bg: var(--ss-accent-hover);
	--bs-btn-active-color: var(--ss-on-accent); --bs-btn-active-bg: var(--ss-accent-press); --bs-btn-disabled-color: var(--ss-on-accent); --bs-btn-disabled-bg: var(--ss-accent);
	--btn-edge: var(--ss-accent-edge);
}
.btn-secondary, .btn-light, .btn-white, .btn-default, .btn-frame, .btn-arena:not(.btn-accent):not(.btn-ink):not(.btn-discord) {
	--bs-btn-color: var(--band-fg); --bs-btn-bg: var(--band-card); --bs-btn-hover-color: var(--band-fg); --bs-btn-hover-bg: var(--band-card);
	--bs-btn-active-color: var(--band-fg); --bs-btn-active-bg: var(--band-sunk); --bs-btn-disabled-color: var(--band-muted); --bs-btn-disabled-bg: var(--band-card);
	--btn-edge: var(--ss-ledge);
}
.ss-sec--sunk .btn-secondary, .band-paper .btn-secondary { --bs-btn-bg: var(--band-card); }
.btn-ink, .btn-dark { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #232A38; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0C0F15; --btn-edge: #05070A; }
[data-bs-theme="dark"] .btn-ink, .band-ink .btn-ink, [data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #F2F3F7; --bs-btn-color: #141821; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #141821; --bs-btn-active-bg: #DCDFE6; --bs-btn-active-color: #141821; --btn-edge: #8E95A6; }
.btn-night { --bs-btn-color: #fff; --bs-btn-bg: #2B3266; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #343C77; --bs-btn-active-color: #fff; --bs-btn-active-bg: #232957; --btn-edge: #161A3C; }
.btn-outline-primary { --bs-btn-color: var(--band-fg); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--ss-on-accent); --bs-btn-hover-bg: var(--ss-accent); --bs-btn-active-color: var(--ss-on-accent); --bs-btn-active-bg: var(--ss-accent-press); --btn-edge: var(--ss-accent-edge); box-shadow: inset 0 0 0 2px var(--ss-accent), 0 calc(var(--btn-d) * .9) calc(var(--btn-d) * 2.6) calc(var(--btn-d) * -1.1) transparent; }
.btn-outline-primary:hover { box-shadow: inset 0 0 0 2px var(--ss-accent), 0 calc(calc(var(--btn-d) + 2px) * .9) calc(calc(var(--btn-d) + 2px) * 2.6) calc(calc(var(--btn-d) + 2px) * -1.1) var(--btn-edge); }
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark { --bs-btn-color: var(--band-fg); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--band-fg); --bs-btn-hover-bg: var(--band-card); --bs-btn-active-color: var(--band-fg); --bs-btn-active-bg: var(--band-sunk); --btn-edge: transparent; box-shadow: inset 0 0 0 2px var(--band-line); }
.btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-dark:hover { --btn-edge: var(--ss-ledge); box-shadow: inset 0 0 0 2px var(--band-line), 0 calc(calc(var(--btn-d) + 2px) * .9) calc(calc(var(--btn-d) + 2px) * 2.6) calc(calc(var(--btn-d) + 2px) * -1.1) var(--btn-edge); }
.btn-ghost, .btn-transparent, .btn-link { --bs-btn-color: var(--band-fg); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--band-fg); --bs-btn-hover-bg: var(--band-sunk); --bs-btn-active-color: var(--band-fg); --bs-btn-active-bg: var(--band-sunk); --btn-edge: transparent; box-shadow: none; text-decoration: none; }
.btn-ghost:hover, .btn-transparent:hover, .btn-link:hover { transform: none; box-shadow: none; }
.btn-success { --bs-btn-color: #062311; --bs-btn-bg: var(--ss-live); --bs-btn-hover-color: #062311; --bs-btn-hover-bg: #52DD87; --bs-btn-active-color: #062311; --bs-btn-active-bg: #23B85C; --bs-btn-disabled-color: #062311; --bs-btn-disabled-bg: var(--ss-live); --btn-edge: #1C8A45; }
.btn-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #F45D71; --bs-btn-active-color: #fff; --bs-btn-active-bg: #D63249; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ss-danger); --btn-edge: #A8233A; }
.btn-outline-danger { --bs-btn-color: var(--ss-danger); --bs-btn-bg: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ss-danger); --btn-edge: #A8233A; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ss-danger) 55%, transparent); }
.btn-outline-success { --bs-btn-color: #17A350; --bs-btn-bg: transparent; --bs-btn-hover-color: #062311; --bs-btn-hover-bg: var(--ss-live); --btn-edge: #1C8A45; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ss-live) 60%, transparent); }
.btn-warning { --bs-btn-color: #2A1C00; --bs-btn-bg: var(--ss-warning); --bs-btn-hover-color: #2A1C00; --bs-btn-hover-bg: #FFC04D; --bs-btn-active-bg: #E89C0C; --btn-edge: #B57A0C; }
.btn-info { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-info); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4E9DFF; --bs-btn-active-bg: #1F78E6; --btn-edge: #1C5FB8; }
.btn-discord { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-discord); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6B76F5; --bs-btn-active-color: #fff; --bs-btn-active-bg: #4752C4; --btn-edge: #3A43A8; }
.btn-close { opacity: .6; box-shadow: none; }
[data-bs-theme="dark"] .btn-close, .band-ink .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.btn-arena { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .92rem; --bs-btn-font-size: 1.04rem; --btn-d: 5px; --bs-btn-border-radius: 14px; white-space: nowrap; }
.btn-arena i[class*="ph-"] { font-size: 1.25em; }
.btn-ink.btn-arena { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-ink); --btn-edge: #05070A; }
.ss-btn-orb { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -.3rem; border-radius: 50%; background: color-mix(in oklab, var(--bs-btn-color) 90%, transparent); color: var(--bs-btn-bg); transition: transform .35s var(--ss-spring); }
.ss-btn-orb i { font-size: .82rem !important; margin-left: 1px; }
.btn:hover .ss-btn-orb { transform: scale(1.14) rotate(-8deg); }

/* =========================================================================
   5. TOP BAR + HEADER
   ========================================================================= */
.ss-topbar { background: #141821; color: #C9CED9; font: 500 .84rem/1 var(--ss-font); position: relative; z-index: 1031; }
[data-bs-theme="dark"] .ss-topbar { background: #07080B; }
.ss-topbar-row { display: flex; align-items: center; gap: 1rem; min-height: 40px; }
.ss-topbar b { color: #fff; font-family: var(--ss-display); font-weight: 700; }
.ss-topbar-status { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.ss-topbar-ip { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .6rem; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .07); color: #E6E9F0; font: 600 .82rem/1 var(--ss-display); white-space: nowrap; transition: background-color .2s; }
.ss-topbar-ip:hover { background: rgba(255, 255, 255, .14); }
.ss-topbar-ip.is-copied { background: color-mix(in oklab, var(--ss-accent) 30%, transparent); }
.ss-topbar-ip-ico { opacity: .6; }
.ss-topbar i { font-size: 1rem; }
.ss-topbar-end { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.ss-topbar-link { display: inline-flex; align-items: center; gap: .4rem; color: #C9CED9; white-space: nowrap; }
.ss-topbar-link:hover { color: #fff; }
.ss-topbar-link b:empty { display: none; }
.ss-rotator { position: relative; flex: 1; min-width: 0; height: 40px; overflow: hidden; }
.ss-rotator a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; color: #E6E9F0; opacity: 0; transform: translateY(100%); transition: transform .6s var(--ss-ease), opacity .6s var(--ss-ease); }
.ss-rotator a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-rotator a:hover span { text-decoration: underline; text-decoration-color: var(--ss-accent); text-underline-offset: 3px; }
.ss-rotator a.is-on { opacity: 1; transform: none; }
.ss-rotator a.is-out { opacity: 0; transform: translateY(-100%); }
.ss-rotator i { color: var(--ss-accent); flex: none; }

.ss-header { position: sticky; top: 0; z-index: 1030; background: var(--band-card); box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-ledge); transition: box-shadow .3s var(--ss-ease); }
.ss-header.is-scrolled { box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-ledge), 0 18px 30px -20px rgba(20, 24, 33, .35); }
.ss-header-row { display: flex; align-items: center; gap: 1.1rem; height: 76px; }
/* the bar never changes height on scroll: a shrinking sticky header changes the page height right at the top, and
   scroll anchoring then pulls the page a second time (the topbar ended up half hidden after scrolling back up) */

.ss-brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; color: var(--band-fg); max-width: 100%; }
.ss-brand:hover { color: var(--band-fg); }
.ss-brand-logo { height: 46px; width: auto; max-width: 180px; object-fit: contain; transition: transform .5s var(--ss-spring); }
.ss-brand-mark { width: 40px; height: 40px; flex: none; transition: transform .5s var(--ss-spring); }
.ss-brand:hover .ss-brand-mark, .ss-brand:hover .ss-brand-logo { transform: rotate(-6deg) translateY(-2px); }
.ss-brand-mark .t, .ss-loader-mark .t { fill: color-mix(in oklab, var(--ss-accent) 78%, #fff); }
.ss-brand-mark .l, .ss-loader-mark .l { fill: var(--ss-accent); }
.ss-brand-mark .r, .ss-loader-mark .r { fill: var(--ss-accent-edge); }
.ss-brand-mark .g, .ss-loader-mark .g { fill: rgba(255, 255, 255, .55); }
.ss-brand-word { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.ss-brand-word b { font: 800 1.32rem/1.05 var(--ss-display); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-brand-word small { margin-top: 4px; font: 600 .78rem/1 var(--ss-font); color: var(--band-muted); white-space: nowrap; }
.ss-brand--light, .ss-brand--light:hover { color: #fff; }
.ss-brand--light .ss-brand-word small { color: #8E95A6; }

.ss-menu-wrap { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center; }
.ss-menu { display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ss-menu > li { position: relative; flex: none; }
.ss-menu-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; padding: .7rem .8rem; font: 700 1.02rem/1 var(--ss-display); letter-spacing: -.01em; color: color-mix(in oklab, var(--band-fg) 70%, transparent); white-space: nowrap; transition: color .2s; }
.ss-menu-link:hover, .ss-menu > li.active > .ss-menu-link, .ss-menu-link[aria-expanded="true"] { color: var(--band-fg); }
.ss-menu-link::after { display: none !important; } /* Bootstrap's dropdown caret; ours is an icon */
.ss-menu-ico { display: none; font-size: .95rem; opacity: .75; }
.ss-caret { font-size: .78em; transition: transform .3s var(--ss-spring); }
[aria-expanded="true"] > .ss-caret { transform: rotate(180deg); }
.ss-menu.is-compact > li > .ss-menu-link { padding: .7rem .55rem; font-size: .95rem; }
.ss-menu-ink { position: absolute; left: var(--l, 0); right: var(--r, 100%); bottom: 12px; height: 6px; border-radius: 4px; background: var(--ss-accent); box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) var(--ss-accent-edge); opacity: 0; pointer-events: none; transition: left .34s var(--ss-ease), right .34s var(--ss-ease), opacity .2s, bottom .3s var(--ss-ease); }
.ss-menu-ink.is-ready { opacity: 1; }
.ss-menu-ink.go-right { transition: right .26s var(--ss-ease), left .34s .08s var(--ss-ease), opacity .2s, bottom .3s var(--ss-ease); }
.ss-menu-ink.go-left { transition: left .26s var(--ss-ease), right .34s .08s var(--ss-ease), opacity .2s, bottom .3s var(--ss-ease); }

/* dropdown panels (menu, user menu, footer switchers) */
.dropdown-menu { --bs-dropdown-bg: var(--band-card); --bs-dropdown-color: var(--band-fg); --bs-dropdown-border-color: transparent; --bs-dropdown-border-radius: 16px; --bs-dropdown-link-color: var(--band-fg); --bs-dropdown-link-hover-color: var(--band-fg); --bs-dropdown-link-hover-bg: var(--band-sunk); --bs-dropdown-link-active-color: var(--ss-on-accent); --bs-dropdown-link-active-bg: var(--ss-accent); --bs-dropdown-divider-bg: var(--band-line); --bs-dropdown-header-color: var(--band-muted); --bs-dropdown-padding-x: .45rem; --bs-dropdown-padding-y: .45rem; --bs-dropdown-item-padding-x: .75rem; --bs-dropdown-item-padding-y: .55rem; --bs-dropdown-item-border-radius: 10px; --bs-dropdown-font-size: .95rem; box-shadow: 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) var(--ss-ledge), 0 28px 50px -24px rgba(20, 24, 33, .5); }
.dropdown-menu.show { animation: ss-pop .32s var(--ss-spring) both; }
.dropdown-item { display: flex; align-items: center; gap: .65rem; font-weight: 600; border-radius: var(--bs-dropdown-item-border-radius); }
.dropdown-item i[class*="ph-"] { font-size: 1.15rem; color: var(--band-muted); }
.dropdown-item:hover i[class*="ph-"] { color: var(--band-fg); }
.dropdown-header { font: 700 .78rem/1.2 var(--ss-display); }
.ss-drop { min-width: 240px; margin-top: 10px !important; }
.ss-menu .dropdown-menu { top: calc(100% + 2px); left: -.5rem; }
.ss-menu .dropdown-menu-end { left: auto; right: -.5rem; }
.ss-drop:not(.ss-drop--list):not(.ss-user-menu) { display: none; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: .15rem; min-width: 380px; padding: .5rem; }
.ss-drop:not(.ss-drop--list):not(.ss-user-menu).show { display: grid; }
.ss-drop:not(.ss-drop--list):not(.ss-user-menu):has(> li:only-child) { grid-template-columns: 1fr; min-width: 240px; }
.ss-drop-item { gap: .75rem; padding: .55rem; font-family: var(--ss-display); font-weight: 700; font-size: .97rem; white-space: normal; }
.ss-drop.show > li { animation: ss-rise .42s var(--ss-ease) both; animation-delay: calc(var(--i, 0) * 35ms + 40ms); }
.ss-drop-item .ss-ico { transition: transform .3s var(--ss-spring); }
.ss-drop-item:hover .ss-ico { transform: translateY(-2px) rotate(-6deg); }
.ss-drop-item:active { background: var(--band-sunk); color: var(--band-fg); }
/* individual translate/scale compose with Popper's inline transform, so positioned dropdowns do not jump */
@keyframes ss-pop { from { opacity: 0; translate: 0 -10px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ss-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

.ss-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex: none; }
.ss-act { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--band-fg); font-size: 1.4rem; cursor: pointer; }
.ss-act::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--band-sunk); transform: scale(.5); opacity: 0; transition: transform .3s var(--ss-spring), opacity .2s; }
.ss-act:hover, .ss-act:focus-visible { color: var(--band-fg); }
.ss-act:hover::before, .ss-act:focus-visible::before, .ss-act[aria-expanded="true"]::before { transform: scale(1); opacity: 1; }
.ss-act > * { position: relative; }
.ss-act > i { transition: transform .25s var(--ss-spring); }
.ss-act:active > i { transform: scale(.86); }
.ss-act--boxed { border-radius: 12px; background: var(--band-sunk); }
.ss-act--sm { width: 36px; height: 36px; font-size: 1.15rem; }
[data-ss-theme-toggle]:hover > i { transform: rotate(-18deg); }
.ss-ico-sun { display: none; }
[data-bs-theme="dark"] .ss-ico-sun { display: inline; }
[data-bs-theme="dark"] .ss-ico-moon { display: none; }
.ss-badge { position: absolute; top: 2px; right: -1px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--ss-accent); color: var(--ss-on-accent); font: 800 .72rem/1 var(--ss-display); box-shadow: 0 0 0 2.5px var(--band-card); }
.ss-badge[hidden] { display: none; }
.ss-badge.is-bump { animation: ss-bump .5s var(--ss-spring); }
@keyframes ss-bump { 40% { transform: scale(1.4); } }

.ss-user { display: flex; align-items: center; gap: .6rem; padding: 4px 8px 4px 4px; border-radius: 14px; color: var(--band-fg); transition: background-color .2s; }
.ss-user:hover, .ss-user[aria-expanded="true"] { background: var(--band-sunk); color: var(--band-fg); }
.ss-user-avatar { position: relative; display: block; flex: none; }
.ss-user-avatar .ss-avatar { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) rgba(20, 24, 33, .3); }
.ss-user-avatar::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ss-live); box-shadow: 0 0 0 2.5px var(--band-card); }
.ss-user-text { display: flex; flex-direction: column; min-width: 0; max-width: 140px; line-height: 1.15; }
.ss-user-text b { font: 700 .95rem/1.15 var(--ss-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-user-text small { font: 600 .78rem/1.25 var(--ss-font); color: var(--band-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-user-menu { min-width: 270px; }
.ss-user-menu.show > .dropdown-item { animation: ss-rise .4s var(--ss-ease) both; animation-delay: calc(var(--i, 0) * 30ms + 60ms); }
.ss-balance { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; padding: .8rem .85rem; border-radius: 12px; background: var(--ss-accent); color: var(--ss-on-accent); box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) var(--ss-accent-edge); transition: transform .25s var(--ss-spring); }
.ss-balance:hover { color: var(--ss-on-accent); transform: translateY(-1px); }
.ss-balance-label { display: block; font: 600 .78rem/1.2 var(--ss-font); opacity: .85; }
.ss-balance-value { display: block; font: 800 1.3rem/1.1 var(--ss-display); letter-spacing: -.02em; }
.ss-balance-add { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .65rem; border-radius: 9px; background: rgba(0, 0, 0, .12); font: 700 .82rem/1 var(--ss-display); }
.ss-guest { display: flex; align-items: center; gap: .6rem; }
/* account pair: one block shape, light "Giriş" + ink "Kayıt"; equal width so neither reads as the odd one out */
.ss-auth-btn { --bs-btn-padding-x: .95rem; --bs-btn-padding-y: .62rem; --bs-btn-font-size: .95rem; min-width: 118px; gap: .45rem; }
.ss-auth-btn i[class*="ph-"] { font-size: 1.12em; }
.ss-auth-btn--in { --bs-btn-color: var(--ss-ink); --bs-btn-bg: #EEF1F6; --bs-btn-hover-color: var(--ss-ink); --bs-btn-hover-bg: #F6F8FB; --bs-btn-active-color: var(--ss-ink); --bs-btn-active-bg: #E2E6EE; --btn-edge: #C9CFDB; }
.ss-auth-btn--up { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #262D3D; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0C0F15; --btn-edge: #05070A; }
[data-bs-theme="dark"] .ss-auth-btn--in { --bs-btn-bg: #F2F3F7; --bs-btn-hover-bg: #FFFFFF; --bs-btn-active-bg: #DCDFE6; --btn-edge: #8E95A6; }
[data-bs-theme="dark"] .ss-auth-btn--up { --bs-btn-bg: #2A3142; --bs-btn-hover-bg: #343C50; --bs-btn-active-bg: #222837; --btn-edge: #05070A; box-shadow: 0 calc(var(--btn-d) * .9) calc(var(--btn-d) * 2.6) calc(var(--btn-d) * -1.1) var(--btn-edge), inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1.5px 0 rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .ss-auth-btn--up:hover { box-shadow: 0 calc(calc(var(--btn-d) + 2px) * .9) calc(calc(var(--btn-d) + 2px) * 2.6) calc(calc(var(--btn-d) + 2px) * -1.1) var(--btn-edge), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1.5px 0 rgba(255, 255, 255, .14); }
.ss-sheet-guest .ss-auth-btn { min-width: 0; --bs-btn-padding-y: .78rem; }
.ss-nav-cta { margin-left: .3rem; --bs-btn-padding-x: 1.05rem; --bs-btn-padding-y: .74rem; }
.ss-burger { display: none; }

/* mobile sheet */
.ss-sheet { --bs-offcanvas-width: min(390px, 90vw); --bs-offcanvas-bg: var(--band-card); --bs-offcanvas-color: var(--band-fg); --bs-offcanvas-border-color: transparent; }
.ss-sheet .offcanvas-header { padding: 1rem 1.1rem; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-ledge); }
.ss-sheet .offcanvas-body { padding: 1.25rem 1.1rem 1.5rem; }
.ss-mnav { display: grid; gap: .3rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.ss-mnav > li > a { display: flex; align-items: center; gap: .85rem; padding: .6rem; border-radius: 14px; font: 700 1.08rem/1.2 var(--ss-display); color: var(--band-fg); }
.ss-mnav > li > a:hover, .ss-mnav > li.active > a { background: var(--band-sunk); color: var(--band-fg); }
.ss-mnav-text { flex: 1; min-width: 0; }
.ss-mnav-sub { margin: .2rem 0 .4rem 3.4rem; padding: 0; list-style: none; display: grid; gap: .1rem; }
.ss-mnav-sub a { display: block; padding: .45rem .6rem; border-radius: 10px; font-weight: 600; color: var(--band-muted); }
.ss-mnav-sub a:hover { background: var(--band-sunk); color: var(--band-fg); }
.ss-sheet.showing .ss-mnav > li, .ss-sheet.show .ss-mnav > li { animation: ss-slide .5s var(--ss-ease) both; animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
@keyframes ss-slide { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.ss-sheet-user { display: flex; align-items: center; gap: .8rem; padding: .85rem; border-radius: 16px; background: var(--band-sunk); }
.ss-sheet-user .ss-avatar { border-radius: 10px; }
.ss-sheet-balance { color: var(--band-muted); font-size: .88rem; }
.ss-sheet-account { display: grid; gap: .1rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.ss-sheet-account a, .ss-sheet-account button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem; border: 0; border-radius: 10px; background: none; color: var(--band-fg); font-weight: 600; text-align: left; }
.ss-sheet-account a:hover, .ss-sheet-account button:hover { background: var(--band-sunk); }
.ss-sheet-account i { font-size: 1.15rem; color: var(--band-muted); }
.ss-sheet-account button { color: var(--ss-danger); }
.ss-sheet-account button i { color: var(--ss-danger); }
.ss-sheet-guest { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ss-sheet-foot { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; }

@media (max-width: 1599.98px) { .ss-user-text { max-width: 110px; } }
@media (max-width: 1399.98px) { .ss-user-text, .ss-user > .ss-caret { display: none; } }
@media (max-width: 1199.98px) {
	.ss-menu-wrap { display: none; }
	.ss-burger { display: grid; }
	.ss-rotator { display: none; }
}
@media (max-width: 991.98px) { .ss-topbar-ip { display: none; } }
@media (max-width: 767.98px) {
	.ss-header-row { height: 66px; gap: .6rem; }
	.ss-hide-mobile { display: none !important; }
	.ss-nav-cta { display: none; }
	.ss-brand-logo { height: 38px; }
	.ss-brand-word b { font-size: 1.15rem; max-width: 190px; }
	.ss-brand-word small { display: none; }
}
@media (max-width: 991.98px) and (min-width: 768px) { .ss-hide-lg { display: none !important; } }
@media (max-width: 479.98px) { .ss-topbar-link span { display: none; } }

/* =========================================================================
   6. TONES, ICON BLOCKS, CHIPS, BADGES, AVATARS, META
   ========================================================================= */
.ss-tone-1, .ss-tone-grape { --tone: var(--ss-t-grape); --tone-fg: #fff; }
.ss-tone-2, .ss-tone-sky { --tone: var(--ss-t-sky); --tone-fg: #fff; }
.ss-tone-3, .ss-tone-cherry { --tone: var(--ss-t-cherry); --tone-fg: #fff; }
.ss-tone-4, .ss-tone-mint { --tone: var(--ss-t-mint); --tone-fg: #fff; }
.ss-tone-5, .ss-tone-tangerine { --tone: var(--ss-t-tangerine); --tone-fg: #fff; }
.ss-tone-6, .ss-tone-leaf { --tone: var(--ss-t-leaf); --tone-fg: #fff; }
.ss-tone-sun { --tone: var(--ss-t-sun); --tone-fg: #2A1C00; }
.ss-tone-accent { --tone: var(--ss-accent); --tone-fg: var(--ss-on-accent); }
.ss-tone-discord { --tone: var(--ss-discord); --tone-fg: #fff; }
[class*="ss-tone-"] { --tone-edge: color-mix(in oklab, var(--tone) 64%, #000); }

.ss-ico { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--tone, var(--band-sunk)); color: var(--tone-fg, var(--band-fg)); font-size: 1.15rem; box-shadow: 0 3px 8px -3px var(--tone-edge, var(--ss-ledge)), inset 0 1.5px 0 rgba(255, 255, 255, .25); }
.ss-ico i { line-height: 1; }
.ss-ico--lg { width: 52px; height: 52px; border-radius: 14px; font-size: 1.55rem; box-shadow: 0 4px 11px -4px var(--tone-edge, var(--ss-ledge)), inset 0 2px 0 rgba(255, 255, 255, .25); }
.ss-ico--sm { width: 30px; height: 30px; border-radius: 9px; font-size: .95rem; box-shadow: 0 2px 6px -2px var(--tone-edge, var(--ss-ledge)); }

.ss-chip, .badge { --chip-bg: var(--band-sunk); --chip-fg: var(--band-fg); display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ss-display); font-weight: 700; font-size: .78rem; letter-spacing: 0; line-height: 1.15; padding: .34rem .66rem; background: var(--chip-bg); color: var(--chip-fg); border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.ss-chip i, .badge i { font-size: 1.05em; }
.ss-chip--accent, .badge.bg-primary, .badge.text-bg-primary { --chip-bg: var(--ss-accent); --chip-fg: var(--ss-on-accent); background: var(--chip-bg) !important; color: var(--chip-fg) !important; box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) var(--ss-accent-edge); }
.ss-chip--ink, .badge.bg-dark, .badge.text-bg-dark { --chip-bg: var(--ss-ink); --chip-fg: #fff; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
[data-bs-theme="dark"] .ss-chip--ink, .band-ink .ss-chip--ink { --chip-bg: #F2F3F7; --chip-fg: #141821; }
.ss-chip--info, .badge.bg-info, .badge.text-bg-info, .badge.bg-blue { --chip-bg: var(--ss-t-sky); --chip-fg: #fff; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--pink { --chip-bg: var(--ss-pink); --chip-fg: #2C0A1B; }
.ss-chip--danger, .badge.bg-danger, .badge.text-bg-danger, .badge.bg-red { --chip-bg: var(--ss-danger); --chip-fg: #fff; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--live, .badge.bg-success, .badge.text-bg-success, .badge.bg-green { --chip-bg: var(--ss-live); --chip-fg: #062311; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--warning, .badge.bg-warning, .badge.text-bg-warning, .badge.bg-yellow, .badge.bg-orange { --chip-bg: var(--ss-t-sun); --chip-fg: #2A1C00; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--light, .badge.bg-light, .badge.bg-secondary, .badge.text-bg-secondary { --chip-bg: var(--band-sunk); --chip-fg: var(--band-fg); background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--soft { --chip-bg: var(--ss-accent-soft); --chip-fg: var(--ss-accent-ink); }
.ss-chip--tone { --chip-bg: var(--tone); --chip-fg: var(--tone-fg); box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) var(--tone-edge); }
.ss-chip-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
a.ss-chip, a.ss-chip:hover { text-decoration: none; }
a.ss-chip { transition: transform .25s var(--ss-spring), filter .2s; }
a.ss-chip:hover { filter: brightness(1.06); transform: translateY(-1px); }
[class*="role__"] { display: inline-flex; align-items: center; padding: .22rem .55rem; border-radius: 999px; font: 700 .74rem/1.2 var(--ss-display); background: color-mix(in srgb, var(--band-fg) 10%, transparent); color: var(--band-fg); }
.ss-meta { display: flex; align-items: center; gap: .55rem .9rem; flex-wrap: wrap; font-size: .88rem; color: var(--band-muted); font-weight: 500; }
.ss-meta i[class*="ph-"] { font-size: 1.05em; }
.ss-date { font-family: var(--ss-display); font-weight: 700; font-size: .84rem; color: var(--band-muted); }
.ss-avatar, .avatar { width: 40px; height: 40px; border-radius: 10px; flex: none; object-fit: cover; background: #8a8f9b; display: inline-block; vertical-align: middle; box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) rgba(20, 24, 33, .22); }
.ss-avatar--xs, .avatar-xs { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.ss-avatar--sm, .avatar-sm { width: 28px; height: 28px; border-radius: 8px; }
.ss-avatar--md, .avatar-md { width: 40px; height: 40px; }
.ss-avatar--lg, .avatar-lg { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) rgba(20, 24, 33, .25); }
.ss-avatar--xl, .avatar-xl { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 calc(5px * .9) calc(5px * 2.6) calc(5px * -1.1) rgba(20, 24, 33, .28); }
.ss-live, .ss-live-dot { position: relative; display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ss-live); color: var(--ss-live); }
.ss-live::after, .ss-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: ss-ping 2.4s var(--ss-ease) infinite; }
@keyframes ss-ping { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.4); opacity: 0; } }
@keyframes ss-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* =========================================================================
   7. PANELS / CARDS / LISTS — content blocks with a ledge
   ========================================================================= */
.ss-panel, .card { --bs-card-bg: var(--band-card); --bs-card-color: var(--band-fg); --bs-card-border-color: transparent; --bs-card-border-width: 0; --bs-card-border-radius: var(--ss-r-lg); --bs-card-inner-border-radius: var(--ss-r-lg); --bs-card-cap-bg: transparent; --bs-card-cap-padding-y: 1rem; --bs-card-cap-padding-x: 1.35rem; --bs-card-spacer-y: 1.35rem; --bs-card-spacer-x: 1.35rem; --bs-card-title-color: var(--band-fg); --bs-card-subtitle-color: var(--band-muted); position: relative; background: var(--band-card); color: var(--band-fg); border: 0; border-radius: var(--ss-r-lg); box-shadow: var(--ss-shadow-card); }
.ss-panel + .ss-panel, .card + .card { margin-top: 1.4rem; }
.ss-panel-head, .card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--band-card-line); background: transparent; }
.card-header:first-child { border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0; }
.ss-panel-title, .card-header .card-title { font-family: var(--ss-display); font-weight: 800; font-size: 1.22rem; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.card-title { font-family: var(--ss-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.ss-panel-sub { font-size: .86rem; color: var(--band-muted); font-weight: 600; }
.ss-panel-body, .card-body { padding: 1.35rem; }
.ss-panel-foot, .card-footer { padding: 1rem 1.35rem; border-top: 1px solid var(--band-card-line); background: transparent; }
.card-footer:last-child { border-radius: 0 0 var(--ss-r-lg) var(--ss-r-lg); }
.ss-panel--flush > .ss-panel-body, .card-body.p-0 { padding: 0 !important; }
.ss-panel--ink { --band-card: #1D2349; --band-fg: #F2F3F7; --band-muted: #AEB4CF; --band-card-line: rgba(242, 243, 247, .08); --band-line: rgba(242, 243, 247, .14); --band-sunk: #0F1330; --ss-ledge: #090C21; --ss-accent-ink: color-mix(in oklab, var(--ss-accent) 78%, white); }
.ss-panel--accent { box-shadow: var(--ss-shadow-card), inset 0 4px 0 var(--ss-accent); }
a.ss-panel, a.card { transition: transform .3s var(--ss-spring), box-shadow .3s var(--ss-spring); }
a.ss-panel:hover, a.card:hover { transform: translateY(-3px); box-shadow: var(--ss-shadow-lift); color: var(--band-fg); }
a.ss-panel:active, a.card:active { transform: translateY(2px); box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) var(--ss-ledge); transition-duration: .08s; }
.card-img-top { border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0; }
.ss-aside { position: sticky; top: calc(var(--ss-nav-h) + 1.25rem); }
.ss-stack > * + * { margin-top: 1.4rem; }
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-list-item { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.35rem; border-top: 1px solid var(--band-card-line); position: relative; }
.ss-list-item:first-child { border-top: 0; }
a.ss-list-item:hover, .ss-list-item.is-link:hover { background: color-mix(in oklab, var(--band-sunk) 60%, transparent); color: var(--band-fg); }
.ss-list-main { flex: 1 1 auto; min-width: 0; }
.ss-list-title { display: block; font-family: var(--ss-display); font-weight: 700; color: var(--band-fg); line-height: 1.3; overflow-wrap: anywhere; }
a.ss-list-title:hover, .ss-list-item:hover .ss-list-title { color: var(--band-fg); text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ss-list-meta { font-size: .85rem; color: var(--band-muted); display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .15rem; }
.ss-list-end { flex: none; display: flex; align-items: center; gap: .6rem; color: var(--band-muted); font-weight: 600; font-size: .9rem; }
.ss-list-pos { font-family: var(--ss-display); font-weight: 800; font-size: 1.15rem; width: 1.6rem; color: var(--band-muted); flex: none; }
.ss-list--plain .ss-list-item { padding-inline: 0; }
.ss-kv { display: grid; grid-template-columns: minmax(min(42%, 7rem), max-content) minmax(0, 1fr); column-gap: 1rem; margin: 0; }
.ss-kv dt, .ss-kv dd { margin: 0; padding: .75rem 0; border-top: 1px solid var(--band-card-line); }
.ss-kv dt { color: var(--band-muted); font-weight: 600; font-size: .9rem; padding-right: 1rem; }
.ss-kv dd { font-weight: 600; overflow-wrap: anywhere; }
.ss-kv dt:first-of-type, .ss-kv dd:first-of-type { border-top: 0; }
.ss-stat { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ss-stat-label { font-size: .86rem; font-weight: 600; color: var(--band-muted); display: inline-flex; align-items: center; gap: .45rem; }
.ss-stat-value { font-family: var(--ss-display); font-weight: 800; font-size: 2rem; line-height: 1.05; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ss-stat-sub { font-size: .85rem; color: var(--band-muted); display: inline-flex; align-items: center; gap: .45rem; }
.ss-stat-sub a { color: var(--ss-discord); font-weight: 600; }
[data-bs-theme="dark"] .ss-stat-sub a { color: #8C96FF; }
.ss-amount { font-family: var(--ss-display); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* stat blocks: the home strip and every [ss-rail] stat row */
.ss-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-top: -72px; }
.ss-stats[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-stats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-stats[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.ss-stat-block, .ss-rail-stat { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1.15rem 1.25rem; border-radius: var(--ss-r-lg); background: var(--band-card); box-shadow: var(--ss-shadow-card); transition: transform .3s var(--ss-spring), box-shadow .3s var(--ss-spring); }
/* Home cards match the interactive preview: plain faces, solid block edges and coloured icon tiles. */
.ss-stat-block { --tone-edge: color-mix(in oklab, var(--tone) 66%, #000); background: var(--band-card); box-shadow: 0 6px 0 var(--ss-ledge), var(--ss-soft); }
.ss-stat-block:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ss-ledge), var(--ss-soft); }
.ss-stat-block .ss-ico--lg { font-size: 1.6rem; box-shadow: 0 4px 0 var(--tone-edge, var(--ss-ledge)), inset 0 2px 0 rgba(255, 255, 255, .28); }
.ss-stat-block.ss-tone-sky, .ss-stat-block .ss-ico.ss-tone-sky { --tone: #2F8CFF; }
.ss-stat-block .ss-stat-label { display: block; font: 600 .86rem/1.2 var(--ss-font); }
.ss-stat-block .ss-stat-value { margin: .15rem 0; font-size: 2rem; line-height: 1; overflow-wrap: anywhere; }
.ss-stat-block .ss-stat-sub { flex-wrap: wrap; font-size: .84rem; font-weight: 400; }
.ss-stat-sub a.ss-stat-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--band-fg); font-weight: 700; }
.ss-stat-sub a.ss-stat-link:hover { text-decoration: underline; text-decoration-color: var(--tone, var(--ss-accent)); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ss-rail { padding-block: 1.5rem; }
.ss-rail-grid { display: grid; grid-template-columns: repeat(var(--rail-cols, 4), minmax(0, 1fr)); gap: 1rem; }
.ss-rail-stat > i[class*="ph-"] { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.45rem; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-accent-edge); }
.ss-rail-stat:nth-child(2) > i[class*="ph-"] { background: var(--ss-t-sky); color: #fff; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) color-mix(in oklab, var(--ss-t-sky) 64%, #000); }
.ss-rail-stat:nth-child(3) > i[class*="ph-"] { background: var(--ss-t-grape); color: #fff; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) color-mix(in oklab, var(--ss-t-grape) 64%, #000); }
.ss-rail-stat:nth-child(4) > i[class*="ph-"] { background: var(--ss-t-sun); color: #2A1C00; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) color-mix(in oklab, var(--ss-t-sun) 64%, #000); }
@media (max-width: 991.98px) {
	.ss-stats, .ss-stats[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
	.ss-stats { gap: .75rem; margin-top: -84px; }
	.ss-stats[data-count="3"] > :last-child:nth-child(odd), .ss-stats[data-count="1"] > * { grid-column: 1 / -1; }
	.ss-stat-block, .ss-rail-stat { flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1rem; }
	.ss-stat-block .ss-ico--lg { width: 42px; height: 42px; border-radius: 12px; font-size: 1.3rem; }
	.ss-stat-block .ss-stat-value, .ss-stat-value { font-size: 1.6rem; }
}

/* =========================================================================
   8. TABLES / FORMS / ALERTS / PROGRESS
   ========================================================================= */
.table { --bs-table-bg: transparent; --bs-table-color: var(--band-fg); --bs-table-border-color: var(--band-card-line); --bs-table-striped-bg: color-mix(in oklab, var(--band-sunk) 50%, transparent); --bs-table-striped-color: var(--band-fg); --bs-table-hover-bg: color-mix(in oklab, var(--band-sunk) 70%, transparent); --bs-table-hover-color: var(--band-fg); --bs-table-active-bg: var(--band-sunk); --bs-table-active-color: var(--band-fg); margin: 0; font-size: .94rem; vertical-align: middle; }
.table > :not(caption) > * > * { padding: .85rem 1rem; border-bottom-color: var(--band-card-line); background-color: var(--bs-table-bg); color: var(--band-fg); }
.table > thead > tr > th, .table thead th { font-family: var(--ss-display); font-size: .84rem; font-weight: 700; letter-spacing: 0; color: var(--band-muted); background: var(--band-sunk); border-bottom: 0; white-space: nowrap; }
.table > thead > tr > th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.table > thead > tr > th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table a:not(.btn) { font-weight: 700; color: var(--band-fg); }
.table a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; }
.ss-panel > .table-responsive > .table > thead > tr > th, .card > .table-responsive > .table > thead > tr > th { border-radius: 0; }
.form-label { font-family: var(--ss-display); font-weight: 700; font-size: .92rem; margin-bottom: .45rem; display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; color: var(--band-fg); }
.form-label-description { font-family: var(--ss-font); font-weight: 500; font-size: .85rem; }
.form-label-description a { text-decoration: underline; text-decoration-color: var(--ss-accent); text-underline-offset: 2px; }
.form-text { color: var(--band-muted); font-size: .84rem; }
.form-control, .form-select { background-color: var(--band-input); color: var(--band-fg); border: 2px solid var(--band-line); border-radius: 12px; padding: .66rem .9rem; font-size: .98rem; font-weight: 500; line-height: 1.4; box-shadow: inset 0 2px 0 rgba(20, 24, 33, .04); transition: border-color .15s, box-shadow .2s, background-color .15s; }
.form-control::placeholder { color: var(--band-muted); opacity: .85; font-weight: 400; }
.form-control:hover, .form-select:hover { border-color: color-mix(in oklab, var(--band-fg) 30%, transparent); }
.form-control:focus, .form-select:focus { background-color: var(--band-input); color: var(--band-fg); border-color: var(--ss-accent); box-shadow: 0 0 0 4px var(--bs-focus-ring-color); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--band-sunk); color: var(--band-muted); opacity: 1; }
.form-control-sm, .form-select-sm { padding: .44rem .7rem; font-size: .88rem; border-radius: 10px; }
.form-control-lg { padding: .85rem 1rem; font-size: 1.05rem; }
textarea.form-control { min-height: 130px; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237A8294' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ss-danger); }
.invalid-feedback { color: var(--ss-danger); font-size: .84rem; font-weight: 600; }
.form-check { min-height: 1.5rem; margin-bottom: .4rem; display: block; }
.form-check-input { width: 1.2rem; height: 1.2rem; margin-top: .16rem; background-color: var(--band-input); border: 2px solid var(--band-line); }
.form-check-input[type=checkbox] { border-radius: 6px; }
.form-check-input:checked { background-color: var(--ss-accent); border-color: var(--ss-accent-edge); }
.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23141821' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='m5.5 10 3 3 6-6.5'/%3e%3c/svg%3e"); }
.form-check-input:focus { border-color: var(--ss-accent); box-shadow: 0 0 0 4px var(--bs-focus-ring-color); }
.form-check-label { font-size: .96rem; cursor: pointer; }
.form-switch .form-check-input { width: 2.4rem; border-radius: 2rem; }
.input-group-text { background: var(--band-sunk); color: var(--band-muted); border: 2px solid var(--band-line); border-radius: 12px; font-weight: 600; font-size: .92rem; }
.input-group > .btn { --btn-d: 0px; transform: none; box-shadow: none; }
.input-group > .btn:active { transform: none; }
.input-group-flat .form-control { border-right: 0; }
.input-group-flat .input-group-text { background: var(--band-input); border-left: 0; background-clip: padding-box; }
.input-group-flat:focus-within .input-group-text, .input-group-flat:focus-within .form-control { border-color: var(--ss-accent); }
.input-group-flat:focus-within { box-shadow: 0 0 0 4px var(--bs-focus-ring-color); border-radius: 12px; }
.input-group-flat .form-control:focus { box-shadow: none; }
.form-footer { margin-top: 1.5rem; }
.hr-text { display: flex; align-items: center; gap: .9rem; margin: 1.5rem 0; font-size: .85rem; font-weight: 600; color: var(--band-muted); }
.hr-text::before, .hr-text::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--band-line); }
.form-range::-webkit-slider-thumb { background: var(--ss-accent); }
.form-range::-moz-range-thumb { background: var(--ss-accent); }
.alert { --bs-alert-padding-x: 1.1rem; --bs-alert-padding-y: .9rem; --bs-alert-border-radius: var(--ss-r); --bs-alert-margin-bottom: 1.25rem; position: relative; padding-left: 3.1rem; border: 0; background: color-mix(in oklab, var(--alert-c, var(--ss-info)) 12%, var(--band-card)); color: var(--band-fg); font-weight: 500; box-shadow: 0 4px 11px -4px color-mix(in oklab, var(--alert-c, var(--ss-info)) 30%, var(--ss-ledge)); }
.alert::before { font-family: "Phosphor-Bold"; position: absolute; left: 1rem; top: .78rem; font-size: 1.35rem; line-height: 1.2; color: var(--alert-c, var(--ss-info)); content: "\e2ce"; }
.alert-success { --alert-c: #1FB25A; } .alert-success::before { content: "\e184"; }
.alert-danger, .alert-error { --alert-c: var(--ss-danger); } .alert-danger::before, .alert-error::before { content: "\e4e2"; }
.alert-warning { --alert-c: #E89C0C; } .alert-warning::before { content: "\e4e0"; }
.alert-info, .alert-primary, .alert-secondary { --alert-c: var(--ss-info); }
.alert a:not(.btn) { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.alert br:last-child { display: none; }
.progress { --bs-progress-height: 14px; --bs-progress-bg: var(--band-sunk); --bs-progress-border-radius: 8px; --bs-progress-bar-bg: var(--ss-accent); --bs-progress-bar-color: var(--ss-on-accent); --bs-progress-font-size: .72rem; box-shadow: inset 0 2px 0 rgba(20, 24, 33, .08); }
.progress-bar { font-family: var(--ss-display); font-weight: 800; border-radius: 8px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .3); }
.progress-bar.bg-success { background-color: var(--ss-live) !important; color: #062311; }

/* =========================================================================
   9. TABS / PAGINATION / BREADCRUMB / MODAL / ACCORDION / LIST GROUP / TOOLTIP / TOAST
   ========================================================================= */
.nav-tabs { --bs-nav-tabs-border-color: var(--band-line); --bs-nav-tabs-border-width: 2px; --bs-nav-tabs-border-radius: 0; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { border: 0; border-bottom: 4px solid transparent; border-radius: 0; color: var(--band-muted); font-family: var(--ss-display); font-weight: 700; padding: .75rem .95rem; margin-bottom: -2px; white-space: nowrap; background: none; transition: color .2s, border-color .25s var(--ss-ease); }
.nav-tabs .nav-link:hover { color: var(--band-fg); border-bottom-color: var(--band-line); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--band-fg); background: none; border-bottom-color: var(--ss-accent); }
.nav-pills { --bs-nav-pills-border-radius: 10px; gap: .3rem; padding: 4px; border-radius: 14px; background: var(--band-sunk); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.nav-pills .nav-link { color: var(--band-muted); font-family: var(--ss-display); font-weight: 700; padding: .5rem .9rem; background: transparent; border: 0; transition: color .2s, background-color .2s, box-shadow .25s var(--ss-spring); }
.nav-pills .nav-link:hover { color: var(--band-fg); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--band-card); color: var(--band-fg); box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) var(--ss-ledge); }
.nav-pills .nav-link.btn-sm { padding: .38rem .7rem; font-size: .84rem; }
.pagination { --bs-pagination-color: var(--band-fg); --bs-pagination-bg: var(--band-card); --bs-pagination-border-width: 0; --bs-pagination-hover-color: var(--band-fg); --bs-pagination-hover-bg: var(--band-card); --bs-pagination-focus-color: var(--band-fg); --bs-pagination-focus-bg: var(--band-card); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color); --bs-pagination-active-color: var(--ss-on-accent); --bs-pagination-active-bg: var(--ss-accent); --bs-pagination-disabled-color: var(--band-muted); --bs-pagination-disabled-bg: transparent; --bs-pagination-padding-x: .9rem; --bs-pagination-padding-y: .5rem; --bs-pagination-border-radius: 11px; gap: .45rem; margin: 0; flex-wrap: wrap; font-family: var(--ss-display); font-weight: 800; font-size: 1rem; }
.pagination .page-link { border-radius: 11px !important; min-width: 2.8rem; text-align: center; box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) var(--ss-ledge); transition: transform .22s var(--ss-spring), box-shadow .22s var(--ss-spring); }
.pagination .page-link:hover { transform: translateY(-2px); box-shadow: 0 calc(5px * .9) calc(5px * 2.6) calc(5px * -1.1) var(--ss-ledge); }
.pagination .page-item.active .page-link { box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) var(--ss-accent-edge); }
.pagination .page-item.disabled .page-link { box-shadow: none; }
.ss-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 2px solid var(--band-line); }
.ss-pager-count { color: var(--band-muted); font-weight: 600; font-size: .95rem; }
.breadcrumb { --bs-breadcrumb-divider: ""; --bs-breadcrumb-margin-bottom: 1rem; --bs-breadcrumb-item-padding-x: .3rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem 0; padding: .35rem .6rem; border-radius: 999px; background: color-mix(in oklab, var(--band-card) 88%, transparent); box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) color-mix(in oklab, var(--ss-ledge) 80%, transparent); font-family: var(--ss-display); font-weight: 700; font-size: .84rem; }
.breadcrumb-item { display: inline-flex; align-items: center; color: var(--band-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "" !important; width: 6px; height: 6px; flex: none; margin: 0 .45rem 0 .15rem; padding: 0; border-radius: 2px; background: currentColor; opacity: .8; float: none; }
.breadcrumb a { color: var(--band-muted); }
.breadcrumb a:hover { color: var(--band-fg); }
.breadcrumb-item.active { color: var(--band-fg); }
.modal { --bs-modal-bg: var(--band-card); --bs-modal-color: var(--band-fg); --bs-modal-border-color: transparent; --bs-modal-border-width: 0; --bs-modal-border-radius: var(--ss-r-xl); --bs-modal-inner-border-radius: var(--ss-r-xl); --bs-modal-header-border-color: var(--band-card-line); --bs-modal-footer-border-color: var(--band-card-line); --bs-modal-box-shadow: var(--ss-shadow-float); --bs-modal-padding: 1.35rem; }
.modal-content { box-shadow: 0 calc(7px * .9) calc(7px * 2.6) calc(7px * -1.1) var(--ss-ledge), 0 40px 80px -30px rgba(0, 0, 0, .6); }
.modal.fade .modal-dialog { transform: translateY(24px) scale(.97); transition: transform .45s var(--ss-spring); }
.modal.show .modal-dialog { transform: none; }
.modal-title { font-family: var(--ss-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.15; }
.modal-backdrop { --bs-backdrop-bg: #070910; --bs-backdrop-opacity: .65; }
.accordion { --bs-accordion-bg: var(--band-card); --bs-accordion-color: var(--band-fg); --bs-accordion-border-color: var(--band-card-line); --bs-accordion-border-width: 0; --bs-accordion-border-radius: var(--ss-r-lg); --bs-accordion-inner-border-radius: var(--ss-r-lg); --bs-accordion-btn-color: var(--band-fg); --bs-accordion-btn-bg: var(--band-card); --bs-accordion-active-color: var(--band-fg); --bs-accordion-active-bg: var(--band-card); --bs-accordion-btn-focus-box-shadow: inset 0 0 0 3px var(--ss-accent); --bs-accordion-btn-padding-y: 1.1rem; --bs-accordion-btn-padding-x: 1.3rem; --bs-accordion-body-padding-x: 1.3rem; display: grid; gap: .7rem; }
.accordion-item { border-radius: var(--ss-r) !important; overflow: hidden; box-shadow: var(--ss-shadow-card); }
.accordion-button { font-family: var(--ss-display); font-weight: 700; font-size: 1.02rem; gap: .9rem; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-button::after { width: 30px; height: 30px; flex: none; border-radius: 9px; background-color: var(--band-sunk); background-position: center; background-size: 14px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237A8294' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); transition: transform .35s var(--ss-spring), background-color .2s; }
.accordion-button:not(.collapsed)::after { background-color: var(--ss-accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23141821' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); }
.accordion-body { color: var(--band-muted); padding-top: 0; }
.list-group { --bs-list-group-bg: var(--band-card); --bs-list-group-color: var(--band-fg); --bs-list-group-border-color: var(--band-card-line); --bs-list-group-border-radius: var(--ss-r-lg); --bs-list-group-action-hover-bg: var(--band-sunk); --bs-list-group-action-hover-color: var(--band-fg); --bs-list-group-action-active-bg: var(--band-sunk); --bs-list-group-action-active-color: var(--band-fg); --bs-list-group-active-bg: var(--ss-accent); --bs-list-group-active-color: var(--ss-on-accent); --bs-list-group-active-border-color: var(--ss-accent); --bs-list-group-item-padding-y: .8rem; --bs-list-group-item-padding-x: 1.1rem; --bs-list-group-disabled-color: var(--band-muted); --bs-list-group-disabled-bg: var(--band-card); box-shadow: var(--ss-shadow-card); }
.list-group-item { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.list-group-flush { box-shadow: none; }
.tooltip { --bs-tooltip-bg: var(--ss-ink); --bs-tooltip-color: #F2F3F7; --bs-tooltip-font-size: .8rem; --bs-tooltip-border-radius: 9px; --bs-tooltip-padding-x: .6rem; --bs-tooltip-padding-y: .4rem; font-family: var(--ss-display); font-weight: 600; }
[data-bs-theme="dark"] .tooltip { --bs-tooltip-bg: #F2F3F7; --bs-tooltip-color: #141821; }
.popover { --bs-popover-bg: var(--band-card); --bs-popover-border-color: transparent; --bs-popover-header-bg: var(--band-sunk); --bs-popover-body-color: var(--band-fg); --bs-popover-border-radius: var(--ss-r); box-shadow: var(--ss-shadow-float); }
.ss-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; }
.ss-toast { --bs-toast-bg: var(--ss-ink); --bs-toast-color: #F2F3F7; --bs-toast-border-color: transparent; --bs-toast-border-width: 0; --bs-toast-border-radius: 16px; --bs-toast-max-width: 390px; box-shadow: 0 calc(5px * .9) calc(5px * 2.6) calc(5px * -1.1) #05070A, 0 24px 40px -20px rgba(0, 0, 0, .6); }
.ss-toast.showing, .ss-toast.show { animation: ss-toast-in .5s var(--ss-spring) both; }
@keyframes ss-toast-in { from { opacity: 0; translate: 0 18px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.ss-toast .toast-body { display: flex; align-items: center; gap: .8rem; font-family: var(--ss-display); font-weight: 700; padding: .9rem 1rem; }
.ss-toast .ph-check-circle { color: var(--ss-live); font-size: 1.6rem; }
.ss-toast small { display: block; color: #A9B0C0; font-family: var(--ss-font); font-weight: 500; }

/* =========================================================================
   10. SCENE LAYERS, HERO, PAGE HEAD, SERVER ADDRESS, SEASON
   ========================================================================= */
.ss-layer { position: absolute; top: -3%; left: -3%; width: 106%; max-width: none; height: 106%; object-fit: cover; object-position: 64% 100%; image-rendering: pixelated; transform: translate3d(calc(var(--px, 0) * var(--d, 0) * -26px), calc(var(--py, 0) * var(--d, 0) * -12px + var(--sy, 0) * (1 - var(--d, 0)) * 1px), 0); }
.ss-motion .ss-layer { will-change: transform; }
.ss-layer--photo { image-rendering: auto; top: -4%; left: -4%; width: 108%; height: 108%; object-position: 50% 50%; }

.ss-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(640px, 88vh, 860px); padding: 64px 0 150px; background: #A9C8E8; color: var(--ss-ink); }
[data-bs-theme="dark"] .ss-hero { background: #131A3E; color: #F2F3F7; }
.ss-hero-art { position: absolute; inset: 0; z-index: -2; }
.ss-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(241, 242, 245, var(--scrim-a, .55)) 0%, rgba(241, 242, 245, var(--scrim-b, .18)) 38%, transparent 60%); }
[data-bs-theme="dark"] .ss-hero::after { background: linear-gradient(90deg, rgba(8, 10, 24, calc(var(--scrim-a, .55) + .15)) 0%, rgba(8, 10, 24, calc(var(--scrim-b, .18) + .2)) 40%, transparent 62%); }
.ss-hero.is-image::after { --scrim-a: .78; --scrim-b: .45; }
.ss-hero--scrim-soft { --scrim-a: .35; --scrim-b: .08; }
.ss-hero--scrim-strong { --scrim-a: .82; --scrim-b: .5; }
.ss-hero-inner { position: relative; }
.ss-hero-copy { max-width: 660px; }
.ss-hero-logo { display: block; max-height: 120px; max-width: 320px; width: auto; margin-bottom: 1.2rem; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25)); }
.ss-hero-title { margin: 1.1rem 0 1rem; font: 800 clamp(3.2rem, 1.9rem + 5vw, 6.6rem)/.94 var(--ss-display); letter-spacing: -.045em; color: inherit; text-wrap: balance; overflow-wrap: anywhere; }
.ss-hero-lead { max-width: 560px; margin: 0 0 1.6rem; font-size: 1.22rem; font-weight: 500; line-height: 1.5; color: color-mix(in oklab, currentColor 86%, transparent); text-wrap: pretty; }
.ss-hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.4rem; }
.ss-hero-card { position: absolute; right: calc(var(--bs-gutter-x) * .5); bottom: -96px; display: flex; align-items: center; gap: .9rem; width: min(360px, 40vw); padding: .7rem .9rem .7rem .7rem; border-radius: 18px; background: var(--band-card); color: var(--band-fg); box-shadow: var(--ss-shadow-card); transition: transform .3s var(--ss-spring), box-shadow .3s var(--ss-spring); }
.ss-hero-card:hover { color: var(--band-fg); transform: translateY(-3px); box-shadow: var(--ss-shadow-lift); }
.ss-hero-card img { width: 84px; height: 60px; flex: none; border-radius: 12px; object-fit: cover; }
.ss-hero-card > span { display: flex; flex-direction: column; min-width: 0; }
.ss-hero-card small { font: 700 .78rem/1.2 var(--ss-display); color: var(--ss-accent-ink); }
.ss-hero-card b { font: 700 1rem/1.25 var(--ss-display); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ss-hero-card > i { margin-left: auto; font-size: 1.15rem; transition: transform .3s var(--ss-spring); }
.ss-hero-card:hover > i { transform: translateX(4px); }

/* word-by-word headline (sunstone.js wraps words while motion is on) */
.ss-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .14em; margin-bottom: -.14em; }
.ss-word > span { display: inline-block; }
.ss-motion .ss-word > span { transform: translateY(110%) rotate(4deg); transition: transform 1s var(--ss-ease); transition-delay: calc(var(--i) * 110ms + 140ms); }
.ss-motion .is-split .ss-word > span { transform: none; }

.ss-page-head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 270px; padding-block: clamp(2.2rem, 1.6rem + 2vw, 3.4rem) clamp(2.2rem, 1.8rem + 1.6vw, 3rem); background: #A9C8E8; color: var(--ss-ink); }
.ss-page-head > .container { width: 100%; }
[data-bs-theme="dark"] .ss-page-head { background: #131A3E; color: #F2F3F7; }
.ss-page-head-art { position: absolute; inset: 0; z-index: -2; }
.ss-page-head .ss-layer { object-position: 66% 74%; }
.ss-page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(241, 242, 245, .9) 0%, rgba(241, 242, 245, .62) 40%, rgba(241, 242, 245, .08) 72%); }
[data-bs-theme="dark"] .ss-page-head::after { background: linear-gradient(90deg, rgba(10, 12, 28, .9) 0%, rgba(10, 12, 28, .62) 42%, rgba(10, 12, 28, .12) 74%); }
.ss-page-head.is-image::after { background: linear-gradient(90deg, rgba(241, 242, 245, .94) 0%, rgba(241, 242, 245, .74) 45%, rgba(241, 242, 245, .3) 100%); }
[data-bs-theme="dark"] .ss-page-head.is-image::after { background: linear-gradient(90deg, rgba(10, 12, 28, .94) 0%, rgba(10, 12, 28, .74) 45%, rgba(10, 12, 28, .3) 100%); }
.ss-page-head .ss-lead { color: color-mix(in oklab, currentColor 76%, transparent); }
.ss-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; }
.ss-page-title { font: 800 clamp(2.3rem, 1.5rem + 2.8vw, 3.9rem)/1.02 var(--ss-display); letter-spacing: -.04em; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.ss-page-head--compact { min-height: 220px; }
.ss-page-head--compact .ss-page-title { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); max-width: 26ch; }
.ss-page-actions { display: flex; flex-wrap: wrap; gap: .6rem; min-width: 0; max-width: 100%; }
.ss-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; margin-top: 1rem; color: color-mix(in oklab, currentColor 72%, transparent); font-weight: 600; font-size: .95rem; }
.ss-page-meta a:not(.ss-chip):not(.btn) { color: inherit; }
.ss-page-meta a:not(.ss-chip):not(.btn):hover { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* server address block */
.ss-ip { display: flex; align-items: center; gap: .9rem; width: 100%; max-width: 560px; padding: .7rem .7rem .7rem .75rem; border: 0; border-radius: 18px; background: var(--band-card); color: var(--band-fg); text-align: left; box-shadow: 0 calc(5px * .9) calc(5px * 2.6) calc(5px * -1.1) var(--ss-ledge), var(--ss-soft); transition: transform .3s var(--ss-spring), box-shadow .3s var(--ss-spring); }
.ss-ip:hover { transform: translateY(-2px); box-shadow: 0 calc(7px * .9) calc(7px * 2.6) calc(7px * -1.1) var(--ss-ledge), var(--ss-soft); }
.ss-ip:active { transform: translateY(1px); box-shadow: 0 calc(1px * .9) calc(1px * 2.6) calc(1px * -1.1) var(--ss-ledge); transition-duration: .07s; }
.ss-ip-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.55rem; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-accent-edge), inset 0 2px 0 rgba(255, 255, 255, .28); }
.ss-ip-body { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.ss-ip-label { font: 500 .82rem/1.3 var(--ss-font); color: var(--band-muted); }
.ss-ip-addr { font: 800 1.32rem/1.2 var(--ss-display); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-ip-copy { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .6rem .9rem; border-radius: 11px; background: var(--ss-ink); color: #fff; font: 700 .92rem/1 var(--ss-display); box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) #05070A; transition: background-color .2s; }
[data-bs-theme="dark"] .ss-ip-copy, .band-ink .ss-ip-copy { background: #F2F3F7; color: #141821; box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) #8E95A6; }
.ss-ip-copy i { font-size: 1.1rem; transition: transform .3s var(--ss-spring); }
.ss-ip.is-copied .ss-ip-copy { background: var(--ss-live); color: #062311; box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) #1C8A45; }
.ss-ip.is-copied .ss-ip-copy i, .ss-ip-mini.is-copied i, .ss-footer-ip.is-copied i { transform: scale(1.2); }
.ss-ip--compact { max-width: none; padding: .55rem; border-radius: 14px; }
.ss-ip--compact .ss-ip-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 1.25rem; }
.ss-ip--compact .ss-ip-addr { font-size: 1.1rem; }
.ss-ip--compact .ss-ip-copy { padding: .55rem .65rem; }
.ss-ip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: .9rem; font-weight: 600; font-size: .95rem; color: color-mix(in oklab, currentColor 80%, transparent); }
.ss-ip-meta > span { display: inline-flex; align-items: center; gap: .5rem; }
.ss-ip-mini { display: inline-flex; align-items: stretch; max-width: 100%; margin-top: .9rem; padding: 0; border: 0; border-radius: 12px; background: var(--band-card); color: var(--band-fg); box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-ledge); transition: transform .25s var(--ss-spring), box-shadow .25s var(--ss-spring); }
.ss-ip-mini:hover { transform: translateY(-2px); box-shadow: 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) var(--ss-ledge); }
.ss-ip-mini:active { transform: translateY(1px); box-shadow: 0 0 0 var(--ss-ledge); }
.ss-ip-mini > span { display: block; align-self: center; min-width: 0; padding: .6rem .85rem; font: 800 1rem/1.1 var(--ss-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-ip-mini b { border-radius: 0 12px 12px 0; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .85rem; background: var(--ss-accent); color: var(--ss-on-accent); font: 700 .88rem/1 var(--ss-display); white-space: nowrap; }

/* season label + inline countdown */
.ss-season { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .45rem .7rem .45rem .75rem; border-radius: 999px; background: var(--band-card); color: var(--band-fg); box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) var(--ss-ledge); font: 700 .9rem/1.2 var(--ss-display); }
.ss-season-when { color: var(--band-muted); font-weight: 600; }
.ss-cd { display: inline-flex; align-items: baseline; gap: .12rem; padding: .2rem .5rem; border-radius: 8px; background: var(--band-sunk); font: 800 .92rem/1.2 var(--ss-display); font-variant-numeric: tabular-nums; }
.ss-cd em { font-style: normal; font-weight: 600; color: var(--band-muted); margin: 0 .3rem 0 .1rem; }
.ss-cd span { color: var(--band-muted); }
.ss-cd b { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; font-weight: 800; }
.ss-roll { display: block; animation: ss-roll .45s var(--ss-ease); }
@keyframes ss-roll { from { transform: translateY(-100%); opacity: .2; } to { transform: none; opacity: 1; } }
/* the large countdown (gaming night, store banners) */
.ss-countdown { display: flex; align-items: flex-start; gap: .5rem; }
.ss-countdown > div { display: flex; flex-direction: column; align-items: center; min-width: 3.6rem; padding: .55rem .5rem .45rem; border-radius: 14px; background: var(--band-card); color: var(--band-fg); box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-ledge); }
.ss-countdown b { display: block; height: 1.15em; overflow: hidden; font: 800 2rem/1.15 var(--ss-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ss-countdown small { font: 600 .74rem/1.4 var(--ss-font); color: var(--band-muted); }
.ss-countdown .colon { align-self: center; font: 800 1.4rem/1 var(--ss-display); color: var(--band-muted); }

@media (max-width: 1199.98px) { .ss-hero-card { display: none; } }
@media (max-width: 767.98px) {
	.ss-hero { min-height: 0; padding: 44px 0 124px; }
	.ss-hero::after { background: linear-gradient(180deg, rgba(241, 242, 245, .74) 0%, rgba(241, 242, 245, .52) 60%, rgba(241, 242, 245, .2) 100%); }
	[data-bs-theme="dark"] .ss-hero::after { background: linear-gradient(180deg, rgba(8, 10, 24, .8), rgba(8, 10, 24, .5)); }
	.ss-hero-lead { font-size: 1.08rem; }
	.ss-page-head { min-height: 210px; }
	.ss-page-head::after { background: linear-gradient(180deg, rgba(241, 242, 245, .9), rgba(241, 242, 245, .66)); }
	[data-bs-theme="dark"] .ss-page-head::after { background: linear-gradient(180deg, rgba(10, 12, 28, .9), rgba(10, 12, 28, .66)); }
}
@media (max-width: 575.98px) {
	.ss-ip-addr { font-size: 1.1rem; }
	.ss-ip-icon { width: 46px; height: 46px; font-size: 1.35rem; }
	.ss-ip-copy [data-copy-label] { display: none; }
	.ss-hero-cta .btn { flex: 1 1 100%; }
	.ss-countdown > div { min-width: 3rem; }
	.ss-countdown b { font-size: 1.6rem; }
	.ss-ip-mini > span { padding: .55rem .65rem; font-size: .92rem; }
	.ss-ip-mini b { padding: 0 .65rem; }
}

/* =========================================================================
   11. HOME + SHARED CONTENT BLOCKS
   ========================================================================= */
/* promo carousel (LeaderOS Slider module) */
.ss-promo { border-radius: var(--ss-r-xl); overflow: hidden; background: #141936; box-shadow: 0 calc(7px * .9) calc(7px * 2.6) calc(7px * -1.1) #090C21, var(--ss-soft); }
.ss-promo .carousel-item { height: clamp(260px, 22vw, 340px); position: relative; color: #F2F3F7; }
.ss-promo .ss-promo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.ss-promo .carousel-item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 13, 34, .9) 0%, rgba(10, 13, 34, .6) 42%, rgba(10, 13, 34, 0) 74%); }
.ss-promo-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem 2.6rem; max-width: 40rem; }
.ss-promo-title { font: 800 clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem)/1.04 var(--ss-display); letter-spacing: -.035em; margin: 0 0 .7rem; text-wrap: balance; }
.ss-promo-text { color: #C8CDE0; margin-bottom: 1.25rem; max-width: 30rem; }
.ss-promo .carousel-indicators { justify-content: flex-end; margin: 0 8.4rem 2.1rem auto; left: auto; z-index: 3; }
.ss-promo.carousel .carousel-indicators [data-bs-target] { width: 26px; height: 8px; border: 0; border-radius: 4px; margin: 0 6px 0 0; background: #fff; opacity: .35; transition: width .4s var(--ss-spring), opacity .2s; }
.ss-promo.carousel .carousel-indicators [data-bs-target].active { width: 42px; background: var(--ss-accent); opacity: 1; }
.ss-promo .carousel-control-prev, .ss-promo .carousel-control-next { z-index: 3; width: 52px; opacity: 1; top: auto; bottom: 1rem; height: 44px; }
.ss-promo .carousel-control-prev { left: auto; right: 4.6rem; }
.ss-promo .carousel-control-next { right: 1.25rem; }
.ss-promo-ctl { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border-radius: 12px; font-size: 1.3rem; color: #fff; transition: background-color .2s, transform .25s var(--ss-spring); }
.ss-promo .carousel-control-prev:hover .ss-promo-ctl, .ss-promo .carousel-control-next:hover .ss-promo-ctl { background: var(--ss-accent); color: var(--ss-on-accent); transform: translateY(-2px); }

/* store category blocks on pedestals */
.ss-pedestal { display: block; width: 100%; height: auto; overflow: visible; }
.ss-pedestal .t { fill: color-mix(in oklab, var(--tone, var(--ss-accent)) 72%, #fff); }
.ss-pedestal .l { fill: color-mix(in oklab, var(--tone, var(--ss-accent)) 80%, #000); }
.ss-pedestal .r { fill: color-mix(in oklab, var(--tone, var(--ss-accent)) 62%, #000); }
.ss-cat-fx { position: absolute; inset: -40% 0 10%; z-index: -1; pointer-events: none; }
.ss-cat-fx::before, .ss-cat-fx::after { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px; color: rgba(255, 255, 255, .65);
	box-shadow: 14px 34px 0 currentColor, 118px 14px 0 -1px currentColor, 150px 74px 0 currentColor, 2px 96px 0 -2px currentColor, 70px 2px 0 -2px currentColor, 166px 40px 0 -2px currentColor;
	transition: transform 1.1s var(--ss-ease); }
.ss-cat-fx::after { color: rgba(255, 255, 255, .38); box-shadow: 40px 62px 0 -1px currentColor, 102px 92px 0 -2px currentColor, 158px 108px 0 0 currentColor, 32px 8px 0 -2px currentColor, 92px 44px 0 -2px currentColor; }
.ss-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 248px; gap: 1.25rem; }
.ss-cats[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px; }
.ss-cats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-cats[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-cats[data-count="4"] .ss-cat:nth-child(4) { grid-column: span 2; }
.ss-cat { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; padding: 1.25rem 1.25rem 1rem; border-radius: 22px; overflow: hidden;
	background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .2), transparent 50%), var(--tone); color: var(--tone-fg);
	box-shadow: 0 calc(7px * .9) calc(7px * 2.6) calc(7px * -1.1) var(--tone-edge), 0 24px 40px -26px var(--tone-edge); transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-cat:hover { color: var(--tone-fg); transform: scale(1.015); box-shadow: 0 calc(11px * .9) calc(11px * 2.6) calc(11px * -1.1) var(--tone-edge), 0 30px 46px -26px var(--tone-edge); }
.ss-cat:active { transform: scale(1.015); box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) var(--tone-edge); transition-duration: .08s; }
.ss-cat-head { position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.ss-cat-name { font: 800 1.5rem/1.05 var(--ss-display); letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.ss-cat-desc { font-size: .9rem; font-weight: 500; line-height: 1.35; opacity: .88; }
.ss-cat-badge { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .3rem; padding: .28rem .62rem; border-radius: 999px; background: rgba(255, 255, 255, .22); font: 700 .78rem/1.2 var(--ss-display); }
.ss-cat-stage { position: relative; z-index: 0; grid-column: 2; grid-row: 1; align-self: center; width: 128px; margin: 0 -.25rem 0 .25rem; }
.ss-cat-stage::before { content: ""; position: absolute; inset: -45% 0 5%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 255, 255, .34), transparent); }
.ss-cat-stage img { position: absolute; left: 50%; bottom: 18%; width: 92%; max-width: none; image-rendering: pixelated; transform: translateX(-50%); transition: transform .55s var(--ss-spring), opacity .3s; }
.ss-cat-stage img.lazyload:not(.loaded), .ss-product-stage img.lazyload:not(.loaded), .ss-holo-stage img.lazyload:not(.loaded) { opacity: 0; }
.ss-cat:hover .ss-cat-stage img { transform: translateX(-50%) translateY(-7px) rotate(-5deg) scale(1.03); }
/* small tiles: the art sits lower on its plinth so the hover lift never crosses the top edge of the card */
.ss-cat:not(.ss-cat--xl) .ss-cat-stage { align-self: start; margin-top: 3.2rem; }
.ss-cat:not(.ss-cat--xl) .ss-cat-stage img { width: 84%; }
.ss-cat:hover .ss-cat-fx::before { transform: translateY(-7px); }
.ss-cat:hover .ss-cat-fx::after { transform: translateY(-12px); }
.ss-cat-foot { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: .75rem; margin-top: .85rem; padding: .5rem .5rem .5rem .85rem; border-radius: 14px; background: rgba(0, 0, 0, .16); font: 600 .88rem/1.2 var(--ss-font); }
.ss-cat-foot > span:first-child { display: inline-flex; align-items: center; gap: .35rem; opacity: .92; }
.ss-cat-price { margin-left: auto; font-size: .82rem; text-align: right; opacity: .95; }
.ss-cat-price b { display: block; font: 800 1.12rem/1.05 var(--ss-display); letter-spacing: -.02em; }
.ss-cat-go { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--tone-edge); font-size: 1.05rem; box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) rgba(0, 0, 0, .2); transition: transform .35s var(--ss-spring); }
.ss-cat:hover .ss-cat-go { transform: translateX(3px); }
.ss-cat--xl { grid-column: span 2; grid-row: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 1.5rem; padding: 1.8rem 1.8rem 1.2rem; }
.ss-cat--xl .ss-cat-head { grid-column: 1 / -1; }
.ss-cat--xl .ss-cat-name { font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3rem); }
.ss-cat-list { position: relative; z-index: 1; grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: .5rem; min-width: 0; }
.ss-cat-list > span { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .5rem .8rem .5rem .6rem; border-radius: 12px; background: rgba(0, 0, 0, .17); font: 700 1rem/1.2 var(--ss-display); }
.ss-cat-list img { width: 30px; height: 30px; flex: none; object-fit: contain; image-rendering: pixelated; }
.ss-cat-list em { display: flex; align-items: baseline; gap: .45rem; margin-left: auto; font-style: normal; white-space: nowrap; }
.ss-cat-list s { font-size: .8em; font-weight: 600; opacity: .62; }
.ss-cat--xl .ss-cat-stage { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; width: min(100%, 280px); margin: 0 0 .6rem; }
.ss-cat--xl .ss-cat-fx::before { box-shadow: 24px 58px 0 currentColor, 200px 24px 0 -1px currentColor, 255px 126px 0 currentColor, 4px 163px 0 -2px currentColor, 119px 4px 0 -2px currentColor, 270px 68px 0 -2px currentColor; }
.ss-cat--xl .ss-cat-fx::after { box-shadow: 68px 105px 0 -1px currentColor, 173px 156px 0 -2px currentColor, 262px 184px 0 0 currentColor, 54px 14px 0 -2px currentColor, 156px 75px 0 -2px currentColor; }
.ss-cat--xl .ss-cat-foot { grid-row: 3; }
.ss-cats[data-count="1"] .ss-cat--xl { grid-column: auto; grid-row: auto; }
/* admin category pictures shown as covers instead of standing on a pedestal */
.ss-cat-cover { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ss-ease), opacity .3s; }
.ss-cat-cover.lazyload:not(.loaded) { opacity: 0; }
.is-cover .ss-cat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 24, .1) 20%, rgba(10, 12, 24, .72) 100%); }
.is-cover .ss-cat { color: #fff; }
.is-cover .ss-cat:hover .ss-cat-cover { transform: scale(1.06); }

/* featured product: night showcase + collectible card */
.ss-feature { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; padding: 3rem 3.25rem; border-radius: 28px; color: #F2F3F7; background: #141936 url(../img/scene/night-sky.png) 50% 20% / cover; image-rendering: pixelated; box-shadow: 0 calc(8px * .9) calc(8px * 2.6) calc(8px * -1.1) #090C21, var(--ss-soft); }
.ss-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 13, 34, .92) 0%, rgba(10, 13, 34, .58) 55%, rgba(10, 13, 34, .2) 100%); }
.ss-feature-title { margin: .9rem 0 .7rem; font: 800 clamp(2.2rem, 1.5rem + 2vw, 3.4rem)/1.02 var(--ss-display); letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.ss-feature-details { color: rgba(242, 243, 247, .82); font-size: 1.02rem; }
.ss-feature-details p { margin: 0 0 .6rem; }
.ss-feature-details ul { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ss-feature-details li { position: relative; padding-left: 1.7rem; font-weight: 500; color: rgba(242, 243, 247, .92); }
.ss-feature-details li::before { content: "\e184"; position: absolute; left: 0; top: .05rem; font-family: "Phosphor-Bold"; color: var(--ss-accent); font-size: 1.2rem; line-height: 1.2; }
.ss-feature-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 1.6rem; }
.ss-price-block { display: flex; flex-direction: column; line-height: 1.1; }
.ss-price-block .ss-price-old { color: rgba(242, 243, 247, .6); }
.ss-price-now { font: 800 2.7rem/1 var(--ss-display); letter-spacing: -.035em; }
.ss-price-save { margin-top: .35rem; color: var(--ss-accent); font: 700 .88rem/1.2 var(--ss-display); }
.ss-fine { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.3rem; color: rgba(242, 243, 247, .7); font-size: .88rem; font-weight: 500; }
.ss-fine span { display: inline-flex; align-items: center; gap: .4rem; }
.ss-feature-card { position: relative; display: grid; place-items: center; min-height: 440px; }
.ss-feature-card::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--ss-t-grape) 55%, transparent), transparent); }
.ss-holo { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; grid-area: 1 / 1; width: min(290px, 100%); aspect-ratio: 5 / 7; padding: 12px; border-radius: 22px; color: #fff; background: linear-gradient(155deg, color-mix(in oklab, var(--tone) 68%, #fff) 0%, var(--tone) 42%, var(--tone-edge) 100%); box-shadow: 0 calc(8px * .9) calc(8px * 2.6) calc(8px * -1.1) var(--tone-edge), 0 40px 60px -28px rgba(0, 0, 0, .75); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ss-spring); }
.ss-holo:hover { color: #fff; }
.ss-holo.is-live { transition: transform .1s linear; }
.ss-holo--back { width: min(250px, 86%); opacity: .75; filter: saturate(.8); }
.ss-holo--back-1 { transform: translateX(-34%) rotate(-10deg) scale(.88); }
.ss-holo--back-2 { transform: translateX(34%) rotate(10deg) scale(.88); }
.ss-feature-card:hover .ss-holo--back-1 { transform: translateX(-40%) rotate(-13deg) scale(.88); }
.ss-feature-card:hover .ss-holo--back-2 { transform: translateX(40%) rotate(13deg) scale(.88); }
.ss-holo-inner { display: flex; flex-direction: column; height: 100%; padding: 14px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 14px; background: linear-gradient(180deg, rgba(10, 12, 30, .08), rgba(10, 12, 30, .42)); }
.ss-holo-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font: 700 .78rem/1 var(--ss-display); }
.ss-holo-top span:first-child { padding: .32rem .6rem; border-radius: 999px; background: var(--ss-t-sun); color: #2A1C00; box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) #B07A16; }
.ss-holo-top span:last-child { opacity: .85; }
.ss-holo-stage { position: relative; flex: 1; display: grid; place-items: end center; margin: .4rem 0 .6rem; }
.ss-holo-stage::before { content: ""; position: absolute; inset: 0 5% 10%; background: radial-gradient(closest-side, rgba(255, 255, 255, .3), transparent); }
.ss-holo-stage .ss-pedestal { position: relative; width: 72%; }
.ss-holo-stage img { position: absolute; left: 50%; bottom: 16%; width: 70%; max-width: none; transform: translateX(-50%); image-rendering: pixelated; }
.ss-holo-name { font: 800 1.7rem/1.05 var(--ss-display); letter-spacing: -.03em; text-align: center; overflow-wrap: anywhere; }
.ss-holo-price { display: block; margin-top: .55rem; font: 800 1.25rem/1 var(--ss-display); text-align: center; }
.ss-holo-price s { margin-right: .4rem; font-size: .8rem; font-weight: 600; opacity: .6; }
.ss-holo-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; transition: opacity .4s;
	background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 42%), linear-gradient(115deg, transparent 20%, rgba(120, 255, 214, .22) 38%, rgba(255, 196, 94, .22) 50%, rgba(140, 160, 255, .22) 62%, transparent 80%);
	background-size: 100% 100%, 240% 240%; background-position: 0 0, var(--mx) var(--my); }
.ss-holo:hover .ss-holo-shine, .ss-holo.is-live .ss-holo-shine { opacity: 1; }

/* news (home + blog) */
.ss-news-lead { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 460px; height: 100%; border-radius: var(--ss-r-xl); background: #141936; box-shadow: var(--ss-shadow-card); }
.ss-news-lead > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .9s var(--ss-ease); }
.ss-news-lead:hover > img { transform: scale(1.05); }
.ss-news-flag { position: absolute; left: 1.1rem; top: 1.1rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: var(--ss-accent); color: var(--ss-on-accent); font: 700 .8rem/1.2 var(--ss-display); box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) var(--ss-accent-edge); }
.ss-news-lead-body { width: 100%; padding: 1rem; }
.ss-news-box { padding: 1.2rem 1.35rem; border-radius: 18px; background: var(--band-card); color: var(--band-fg); box-shadow: 0 calc(5px * .9) calc(5px * 2.6) calc(5px * -1.1) var(--ss-ledge); }
.ss-news-box h3 { margin: .6rem 0 .45rem; font: 800 clamp(1.4rem, 1.1rem + .9vw, 1.9rem)/1.12 var(--ss-display); letter-spacing: -.03em; }
.ss-news-box h3 a:hover { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ss-news-box p { color: var(--band-muted); margin: 0 0 .8rem; }
.ss-news-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-news-card:hover { transform: scale(1.015); box-shadow: var(--ss-shadow-lift); }
.ss-news-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in oklab, var(--band-sunk) 70%, #8B95A8); }
.ss-news-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .8s var(--ss-ease), opacity .3s; }
.ss-news-card:hover .ss-news-thumb img { transform: scale(1.06); }
.ss-news-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 1.1rem 1.25rem 1.15rem; }
.ss-news-title { margin: .6rem 0 .4rem; font: 800 1.2rem/1.2 var(--ss-display); letter-spacing: -.025em; }
.ss-news-title a:hover { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ss-news-text { margin: 0 0 .9rem; color: var(--band-muted); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-news-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--band-card-line); color: var(--band-muted); font-size: .88rem; }
.ss-news-foot > span { display: inline-flex; align-items: center; gap: .35rem; }
.ss-news-who { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--band-fg); font-weight: 600; }
.ss-news-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.ss-news-row .ss-news-thumb { aspect-ratio: auto; height: 100%; min-height: 150px; }
.ss-news-row + .ss-news-row { margin-top: 0; }
/* category filter links (blog, home, store servers) */
.ss-filter { display: flex; flex-wrap: wrap; gap: .3rem; padding: 4px; border-radius: 14px; background: var(--band-card); box-shadow: inset 0 0 0 1px var(--band-card-line); }
.ss-sec--sunk .ss-filter { background: var(--band-card); }
.ss-filter a, .ss-filter button { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border: 0; border-radius: 10px; background: none; color: var(--band-muted); font: 700 .9rem/1 var(--ss-display); white-space: nowrap; transition: color .2s, background-color .2s, box-shadow .25s var(--ss-spring); }
.ss-filter a:hover, .ss-filter button:hover { color: var(--band-fg); background: var(--band-sunk); }
.ss-filter a.active, .ss-filter button.active { background: var(--ss-accent); color: var(--ss-on-accent); box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) var(--ss-accent-edge); }

/* game modes */
.ss-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.ss-modes[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.ss-modes[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-modes[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-mode { position: relative; isolation: isolate; display: block; min-height: 340px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; color: #fff; background: var(--tone, #141936); box-shadow: 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) var(--ss-ledge), var(--ss-soft); transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-modes[data-count="1"] .ss-mode, .ss-modes[data-count="2"] .ss-mode { aspect-ratio: 16 / 9; }
.ss-mode > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; image-rendering: pixelated; transition: transform 1s var(--ss-ease), opacity .3s; }
.ss-mode > img.lazyload:not(.loaded) { opacity: 0; }
.ss-mode::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 10, 22, 0) 30%, rgba(8, 10, 22, .9) 100%); }
.ss-mode-body { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem; }
.ss-mode-name { margin: 0; font: 800 1.55rem/1.05 var(--ss-display); letter-spacing: -.03em; }
.ss-mode-text { margin: 0; color: rgba(255, 255, 255, .82); font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ss-mode-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; color: var(--ss-accent); font: 700 .92rem/1 var(--ss-display); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ss-spring); }
.ss-mode:hover { color: #fff; transform: scale(1.015); box-shadow: 0 calc(10px * .9) calc(10px * 2.6) calc(10px * -1.1) var(--ss-ledge), var(--ss-soft); }
.ss-mode:hover > img { transform: scale(1.07); }
.ss-mode:hover .ss-mode-go, .ss-mode:focus-visible .ss-mode-go { opacity: 1; transform: none; }

/* podium (home donors, leaderboards) */
.ss-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .7rem; padding-top: 1.6rem; }
.ss-podium .p { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.ss-podium .p > a, .ss-podium .p > span:not(.amt):not(.block) { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; color: var(--band-fg); }
.ss-podium .head { display: block; width: 54px; height: 54px; border-radius: 12px; image-rendering: pixelated; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) rgba(20, 24, 33, .3); }
.ss-podium .p1 .head { width: 66px; height: 66px; border-radius: 14px; }
.ss-podium-crown { position: absolute; left: 50%; top: -26px; color: var(--ss-t-sun); font-size: 1.7rem; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.ss-podium .name { max-width: 100%; margin-top: .45rem; overflow: hidden; font: 700 .95rem/1.2 var(--ss-display); white-space: nowrap; text-overflow: ellipsis; }
.ss-podium .amt { margin-bottom: .6rem; color: var(--band-muted); font: 600 .84rem/1.3 var(--ss-font); }
.ss-podium .block { --face: #C9D1DC; display: grid; place-items: start center; width: 100%; height: 110px; padding-top: .55rem; border-radius: 12px 12px 8px 8px; background: var(--face); color: rgba(20, 24, 33, .42); font: 800 2.2rem/1 var(--ss-display); transform-origin: 50% 100%; box-shadow: inset 0 8px 0 color-mix(in oklab, var(--face) 68%, #fff), 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) color-mix(in oklab, var(--face) 60%, #000); }
.ss-podium .p1 .block { --face: #FFC93C; height: 148px; }
.ss-podium .p3 .block { --face: #E7A06A; height: 84px; }
.ss-motion [data-ss-reveal] .ss-podium .block { transform: scaleY(.04); transition: transform .9s var(--ss-spring); transition-delay: calc(var(--j, 0) * 130ms + 250ms); }
.ss-motion [data-ss-reveal] .ss-podium .p > a, .ss-motion [data-ss-reveal] .ss-podium .p > span:not(.block) { opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .6s var(--ss-spring); transition-delay: calc(var(--j, 0) * 130ms + 650ms); }
.ss-motion [data-ss-reveal].is-in .ss-podium .block, .ss-motion [data-ss-reveal].is-in .ss-podium .p > a, .ss-motion [data-ss-reveal].is-in .ss-podium .p > span:not(.block) { opacity: 1; transform: none; }
.ss-rank-list { margin-top: 1.2rem; }
.ss-rank-list .ss-list-item { margin-top: .4rem; padding: .55rem .8rem; border: 0; border-radius: 12px; background: var(--band-sunk); }
.ss-feed .ss-list-item { padding: .7rem 1.35rem; }
.ss-feed .ss-avatar { border-radius: 10px; }

/* Discord card */
.ss-discord { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--ss-r-lg); background: var(--ss-discord); color: #fff; box-shadow: 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) #3A43A8, var(--ss-soft); }
.ss-discord .big-ico { position: absolute; right: -18px; top: -16px; z-index: -1; font-size: 7.5rem; opacity: .15; transform: rotate(-12deg); }
.ss-discord-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; font: 800 1.15rem/1.2 var(--ss-display); }
.ss-discord-count { font: 800 2.6rem/1 var(--ss-display); letter-spacing: -.04em; }
.ss-discord-sub { color: rgba(255, 255, 255, .82); margin-bottom: 1rem; font-weight: 500; }
.ss-discord-pitch { max-width: 24rem; margin: 0 0 1rem; color: rgba(255, 255, 255, .86); font-weight: 500; line-height: 1.55; }
.ss-discord.is-live .ss-discord-pitch { display: none; }
.ss-discord:not(.is-live) .big-ico { top: auto; bottom: 3.4rem; right: -14px; font-size: 10rem; opacity: .17; }
.ss-discord-avatars { display: flex; align-items: center; flex-wrap: wrap; margin: auto 0 .9rem; }
.ss-discord-avatars img { width: 36px; height: 36px; margin-right: -8px; border-radius: 50%; box-shadow: 0 0 0 3px var(--ss-discord); background: #4752C4; }
.ss-discord-avatars span { margin-left: 16px; font: 700 .9rem/1 var(--ss-display); }
.ss-discord-channels { display: grid; gap: .3rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ss-discord-channels li { display: flex; align-items: center; gap: .45rem; padding: .45rem .65rem; border-radius: 10px; background: rgba(0, 0, 0, .16); font-weight: 600; font-size: .9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ss-discord .btn-light { --bs-btn-color: var(--ss-discord); --bs-btn-bg: #fff; --bs-btn-hover-color: var(--ss-discord); --bs-btn-hover-bg: #fff; --btn-edge: #C3C8F5; }

/* join path */
.ss-quest { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-top: .5rem; }
.ss-quest-path { position: absolute; left: 16.6%; right: 16.6%; top: 36px; width: 66.8%; height: 8px; overflow: visible; }
.ss-quest-path path { fill: none; stroke: var(--ss-ledge); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ss-quest::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 38px; height: 4px; border-radius: 2px; background: var(--ss-accent); transform-origin: 0 50%; transition: transform 1.4s var(--ss-ease) .3s; }
.ss-motion .ss-quest:not(.is-in)::before { transform: scaleX(0); }
.ss-quest-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 .5rem; text-align: center; }
.ss-quest-num { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1rem; border-radius: 18px; background: var(--ss-accent); color: var(--ss-on-accent); font: 800 1.6rem/1 var(--ss-display); box-shadow: 0 calc(5px * .9) calc(5px * 2.6) calc(5px * -1.1) var(--ss-accent-edge), var(--ss-soft); transition: background-color .4s, color .4s, box-shadow .4s, transform .5s var(--ss-spring); transition-delay: calc(var(--j, 0) * 450ms + 300ms); }
.ss-motion .ss-quest:not(.is-in) .ss-quest-num { background: var(--band-card); color: var(--band-fg); box-shadow: 0 calc(5px * .9) calc(5px * 2.6) calc(5px * -1.1) var(--ss-ledge), var(--ss-soft); transform: translateY(4px); }
.ss-quest-step h3 { margin: 0 0 .35rem; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; }
.ss-quest-step p { max-width: 30ch; margin: 0; color: var(--band-muted); }
.ss-join-more { margin-top: 2.6rem; }
.ss-help-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 1.35rem; padding: 1.75rem; border-radius: var(--ss-r-lg); background: #141936; color: #F2F3F7; box-shadow: 0 5px 16px -7px #090C21, var(--ss-soft); }
/* the card keeps its own height (row is align-items-start): opening or closing a FAQ item never resizes it */
.ss-help-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 18, 44, .55), rgba(14, 18, 44, .2) 45%, rgba(14, 18, 44, .7)); }
.ss-help-top { display: flex; align-items: flex-start; gap: 1rem; }
.ss-help-badge { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.6rem; box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--ss-accent) 70%, transparent), inset 0 2px 0 rgba(255, 255, 255, .3); }
.ss-help-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ss-help-topic { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .7rem .8rem; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #F2F3F7; transition: background-color .2s, transform .3s var(--ss-spring); }
.ss-help-topic:hover { background: rgba(255, 255, 255, .13); color: #fff; transform: translateY(-2px); }
.ss-help-topic img { width: 34px; height: 34px; flex: none; object-fit: contain; image-rendering: pixelated; }
.ss-help-topic b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font: 700 .92rem/1.2 var(--ss-display); }
.ss-help-topic small { display: block; margin-top: .15rem; color: #AEB4CF; font-size: .8rem; }
@media (max-width: 419.98px) { .ss-help-topics { grid-template-columns: minmax(0, 1fr); } }
.ss-help-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../img/scene/night-sky.png) 0% 30% / cover; image-rendering: pixelated; opacity: .9; }
.ss-help-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.ss-help-actions .btn { flex: 1 1 auto; }
/* the bottom of the card: a slice of the footer's ground, the chest standing on the grass in a warm glow, a few sparks */
.ss-help-card h3 { margin: 0 0 .5rem; font: 800 1.5rem/1.1 var(--ss-display); letter-spacing: -.03em; }
.ss-help-card p { color: #C8CDE0; margin: 0; }

/* "How to play" mock game screens (play page) */
.ss-step { overflow: hidden; height: 100%; }
.ss-step-screen { position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 230px; padding: 2.4rem 1.4rem 1.4rem; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)), url(../img/scene/golden.jpg) 60% 70% / cover; image-rendering: pixelated; }
[data-bs-theme="dark"] .ss-step-screen { background-image: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)), url(../img/scene/night.jpg); }
.ss-step-num { position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ss-accent); color: var(--ss-on-accent); font: 800 1rem/1 var(--ss-display); box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) var(--ss-accent-edge); }
.ss-mc-logo { align-self: center; margin: .2rem 0 .6rem; color: #fff; font: 800 1.9rem/1 var(--ss-display); letter-spacing: -.03em; text-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) rgba(0, 0, 0, .45); }
.ss-mc-btn { padding: .55rem .8rem; border-radius: 6px; background: #8F96A3; color: #fff; text-align: center; font: 700 .86rem/1.1 var(--ss-display); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 2px rgba(0, 0, 0, .55); }
.ss-mc-btn.on { background: var(--ss-accent); color: var(--ss-on-accent); }
.ss-mc-btn.dim { opacity: .6; }
.ss-mc-row { display: flex; gap: .5rem; margin-top: auto; }
.ss-mc-row .ss-mc-btn { flex: 1; }
.ss-mc-field label { display: block; margin-bottom: .2rem; color: #E3E6EE; font: 600 .74rem/1.2 var(--ss-font); }
.ss-mc-field div { padding: .45rem .6rem; border-radius: 4px; background: #000; color: #fff; font: 600 .86rem/1.2 var(--ss-display); box-shadow: 0 0 0 2px #8F96A3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-mc-server { display: flex; align-items: center; gap: .65rem; padding: .55rem; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.ss-mc-server img { width: 40px; height: 40px; border-radius: 6px; object-fit: contain; background: rgba(255, 255, 255, .08); }
.ss-mc-server b { display: block; font: 700 .9rem/1.2 var(--ss-display); }
.ss-mc-server span { display: block; color: #BFC5D2; font-size: .78rem; }
.ss-mc-server .sig { display: inline-flex; align-items: flex-end; gap: 2px; margin-left: auto; }
.ss-mc-server .sig i { display: block; width: 4px; background: var(--ss-live); }
.ss-step-body { padding: 1.2rem 1.35rem 1.35rem; }
.ss-step-body h3 { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 800; }
.ss-step-body p { margin: 0; color: var(--band-muted); }

@media (max-width: 1199.98px) {
	.ss-feature { grid-template-columns: minmax(0, 1fr); padding: 2.4rem; }
	.ss-feature-card { order: -1; min-height: 380px; }
	.ss-cats { grid-auto-rows: 232px; }
	/* four columns leave ~180px tiles at 1024px (names broke letter by letter): use the two-column showcase here too */
	.ss-cats, .ss-cats[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-cats[data-count="3"] .ss-cat--xl, .ss-cats[data-count="2"] .ss-cat--xl { grid-column: span 2; grid-row: span 1; grid-template-rows: auto auto auto; }
	.ss-cats[data-count="4"] .ss-cat:nth-child(4) { grid-column: span 2; }
}
@media (max-width: 991.98px) {
	.ss-cats, .ss-cats[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-cats[data-count="3"] .ss-cat--xl, .ss-cats[data-count="2"] .ss-cat--xl { grid-column: span 2; grid-row: span 1; grid-template-rows: auto auto auto; }
	.ss-cats[data-count="4"] .ss-cat:nth-child(4) { grid-column: span 2; }
	.ss-modes, .ss-modes[data-count] { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--bs-gutter-x) * -.5); padding: 0 calc(var(--bs-gutter-x) * .5) 14px; scrollbar-width: thin; }
	.ss-modes[data-count="1"] { grid-auto-columns: 100%; }
	.ss-mode { scroll-snap-align: start; aspect-ratio: 3 / 4; }
	.ss-mode-go { opacity: 1; transform: none; }
	.ss-news-lead { min-height: 400px; }
}
@media (max-width: 767.98px) {
	.ss-quest { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.ss-quest::before, .ss-quest-path { display: none; }
	.ss-quest-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1rem; border-radius: 18px; background: var(--band-card); text-align: left; box-shadow: var(--ss-shadow-card); }
	.ss-quest-num { grid-row: span 3; width: 56px; height: 56px; margin: 0; font-size: 1.4rem; }
	.ss-quest-step p { max-width: none; }
	.ss-ip-mini { justify-self: start; }
	.ss-news-row, .ss-news-compact { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
	.ss-news-compact .ss-news-thumb { aspect-ratio: auto; height: 100%; min-height: 100%; }
	.ss-news-compact .ss-news-body { padding: .85rem 1rem; }
	.ss-news-compact .ss-news-title { font-size: 1.02rem; margin: .35rem 0 0; }
	.ss-news-compact .ss-news-text, .ss-news-compact .ss-news-foot { display: none; }
	.ss-feature-details ul { grid-template-columns: minmax(0, 1fr); }
	.ss-promo .carousel-item { height: 360px; }
	.ss-promo-body { padding: 1.5rem 1.4rem 4.2rem; justify-content: flex-end; }
	.ss-promo .carousel-item::before { background: linear-gradient(180deg, rgba(10, 13, 34, .15) 0%, rgba(10, 13, 34, .92) 70%); }
	.ss-promo .carousel-indicators { justify-content: flex-start; left: 0; right: auto; margin: 0 0 2.1rem 1.4rem; }
}
@media (max-width: 575.98px) {
	/* store blocks become compact rows that fit a phone screen */
	.ss-cats, .ss-cats[data-count] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: .8rem; }
	.ss-cat, .ss-cat--xl, .ss-cats[data-count] .ss-cat--xl, .ss-cats[data-count="4"] .ss-cat:nth-child(4) { grid-column: auto; grid-row: auto; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; column-gap: .85rem; min-height: 0; padding: .7rem .85rem .7rem .7rem; border-radius: 18px; }
	.ss-cat-stage, .ss-cat--xl .ss-cat-stage { grid-column: 1; grid-row: 1; width: 72px; margin: 0; align-self: center; justify-self: auto; }
	.ss-cat:not(.ss-cat--xl) .ss-cat-stage { margin-top: 0; align-self: center; }
	.ss-cat:not(.ss-cat--xl) .ss-cat-stage img { width: 70%; }
	.ss-cat-stage img { width: 70%; bottom: 22%; }
	.ss-cat-head, .ss-cat--xl .ss-cat-head { grid-column: 2; grid-row: 1; gap: .15rem; }
	.ss-cat-name, .ss-cat--xl .ss-cat-name { font-size: 1.15rem; }
	.ss-cat-desc { width: 100%; overflow: hidden; font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; }
	.ss-cat-badge, .ss-cat-list, .ss-cat-fx, .ss-cat-foot > span:first-child, .ss-cat-go { display: none; }
	.ss-cat-foot, .ss-cat--xl .ss-cat-foot { grid-column: 3; grid-row: 1; margin: 0; padding: 0; background: none; }
	.ss-cat:hover .ss-cat-stage img { transform: translateX(-50%) translateY(-4px) rotate(-6deg); }
	.is-cover .ss-cat { grid-template-columns: minmax(0, 1fr) auto; min-height: 96px; }
	.ss-feature { padding: 1.6rem 1.25rem; border-radius: 22px; }
	.ss-feature-card { min-height: 340px; }
	.ss-holo { width: min(240px, 100%); }
	.ss-price-now { font-size: 2.2rem; }
	.ss-modes, .ss-modes[data-count] { grid-auto-columns: 78%; }
	.ss-podium { gap: .45rem; }
	.ss-podium .head { width: 44px; height: 44px; }
	.ss-podium .p1 .head { width: 54px; height: 54px; }
	.ss-news-lead { min-height: 360px; }
	.ss-news-lead-body { padding: .6rem; }
}

/* ---- community panels: fixed-width tab pair + quiet (empty) states --------------------------------------------- */
.ss-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: auto; flex-wrap: nowrap; }
.ss-seg .nav-item { display: flex; min-width: 0; }
.ss-seg .nav-link { flex: 1; display: inline-flex; justify-content: center; white-space: nowrap; padding-inline: 1.2rem !important; }
@media (max-width: 419.98px) { .ss-seg { width: 100%; } }
/* an empty board still shows its shape: a ghost podium / ghost feed rows behind one short line and one action */
.ss-quiet { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .4rem .5rem .2rem; }
.ss-quiet-title { font: 800 1.12rem/1.2 var(--ss-display); letter-spacing: -.02em; margin: 1rem 0 .3rem; }
.ss-quiet-text { color: var(--band-muted); font-size: .93rem; margin: 0 0 1.05rem; max-width: 22rem; }
.ss-quiet .btn { margin-top: auto; }
.ss-ghost-podium { display: flex; align-items: flex-end; gap: 10px; height: 104px; padding-top: 1.4rem; }
.ss-ghost-podium .g { position: relative; width: 66px; border-radius: 10px 10px 4px 4px; box-shadow: inset 0 0 0 2px var(--band-line);
	background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--band-fg) 6%, transparent) 0 6px, transparent 6px 12px); }
.ss-ghost-podium .g1 { height: 80px; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ss-t-sun) 70%, transparent);
	background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ss-t-sun) 16%, transparent) 0 6px, transparent 6px 12px); }
.ss-ghost-podium .g2 { height: 56px; }
.ss-ghost-podium .g3 { height: 40px; }
.ss-ghost-podium .g1 i { position: absolute; left: 50%; top: -1.55rem; margin-left: -.8rem; font-size: 1.6rem; color: var(--ss-t-sun); animation: ss-hop 3.2s var(--ss-ease) infinite; }
.ss-quiet--feed { position: relative; isolation: isolate; padding: 2rem 1.35rem 1.6rem; list-style: none; }
.ss-quiet--feed > .ss-ico { margin-top: .4rem; }
.ss-ghost-rows { position: absolute; inset: 0; z-index: -1; display: grid; align-content: start; pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 92%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 92%); }
.ss-ghost-rows span { position: relative; height: 68px; border-top: 1px solid var(--band-card-line); }
.ss-ghost-rows span:first-child { border-top: 0; }
.ss-ghost-rows span::before { content: ""; position: absolute; left: 1.35rem; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 10px; background: color-mix(in oklab, var(--band-fg) 8%, transparent); }
.ss-ghost-rows span::after { content: ""; position: absolute; left: calc(1.35rem + 54px); right: 34%; top: 50%; height: 10px; margin-top: -9px; border-radius: 6px; background: color-mix(in oklab, var(--band-fg) 8%, transparent); box-shadow: 0 16px 0 -1px color-mix(in oklab, var(--band-fg) 5%, transparent); }
.ss-ghost-rows span:nth-child(2)::after { right: 46%; }
.ss-ghost-rows span:nth-child(3)::after { right: 40%; }
/* community panels side by side: heads carry only the title (the tab pair lives in the body), so the divider lines align */
.ss-community .ss-panel-head { min-height: 68px; flex-wrap: nowrap; }
.ss-community .ss-seg { margin: 0 auto .5rem; }
.ss-community .tab-content { flex: 1; display: flex; flex-direction: column; }
.ss-community .ss-panel-body, .ss-community .ss-feed { min-height: 300px; }
.ss-community .ss-panel { display: flex; flex-direction: column; }
.ss-community .ss-panel > .ss-panel-body, .ss-community .ss-panel > .ss-feed { flex: 1; display: flex; flex-direction: column; }
.ss-community .tab-content > .tab-pane.active { flex: 1; display: flex; flex-direction: column; }
.ss-quiet { flex: 1; justify-content: center; }
.ss-quiet--feed { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ss-quiet .btn { margin-top: 0; }
/* donors next to the purchase feed: a compact podium keeps both panels close in height, and the feed rows share
   whatever height is left instead of leaving an empty band under the last row */
.ss-community .ss-podium { padding-top: 1.3rem; }
.ss-community .ss-podium .head { width: 46px; height: 46px; border-radius: 11px; }
.ss-community .ss-podium .p1 .head { width: 56px; height: 56px; border-radius: 13px; }
.ss-community .ss-podium .block { height: 74px; font-size: 1.8rem; }
.ss-community .ss-podium .p1 .block { height: 102px; }
.ss-community .ss-podium .p3 .block { height: 56px; }
.ss-community .ss-rank-list { margin-top: .8rem; }
.ss-community .ss-rank-list .ss-list-item { padding: .45rem .8rem; }
.ss-community .ss-feed > .ss-list-item { flex: 1 1 auto; }

/* =========================================================================
   12. STORE — category tiles, product cards
   ========================================================================= */
.ss-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: .8rem; min-height: 200px; padding: 1.35rem 1.4rem; border-radius: 22px; color: var(--tone-fg, #fff);
	background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .2), transparent 50%), var(--tone, var(--ss-t-grape));
	box-shadow: 0 calc(7px * .9) calc(7px * 2.6) calc(7px * -1.1) var(--tone-edge, #000), 0 24px 40px -26px var(--tone-edge, #000); transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-tile:hover { color: var(--tone-fg, #fff); transform: scale(1.015); box-shadow: 0 calc(11px * .9) calc(11px * 2.6) calc(11px * -1.1) var(--tone-edge, #000), 0 30px 46px -26px var(--tone-edge, #000); }
.ss-tile:active { transform: scale(1.015); box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) var(--tone-edge, #000); transition-duration: .08s; }
.ss-tile::after { content: ""; position: absolute; right: -10%; bottom: -30%; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .28), transparent); pointer-events: none; }
.ss-tile-name { position: relative; z-index: 1; display: block; font: 800 1.6rem/1.04 var(--ss-display); letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.ss-tile-desc { position: relative; z-index: 1; display: block; max-width: 34ch; font-size: .92rem; font-weight: 500; opacity: .88; }
.ss-tile-list { position: relative; z-index: 1; display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; max-width: 56%; }
.ss-tile-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border-radius: 12px; background: rgba(0, 0, 0, .17); font: 700 .95rem/1.2 var(--ss-display); }
.ss-tile-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tile-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; }
.ss-tile-from { display: inline-flex; align-items: center; padding: .42rem .7rem; border-radius: 10px; background: rgba(0, 0, 0, .18); font: 700 .88rem/1.1 var(--ss-display); }
.ss-tile-go { display: grid; place-items: center; width: 38px; height: 38px; flex: none; margin-left: auto; border-radius: 11px; background: rgba(255, 255, 255, .94); color: var(--tone-edge, #000); font-size: 1.1rem; box-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) rgba(0, 0, 0, .2); transition: transform .35s var(--ss-spring); }
.ss-tile:hover .ss-tile-go { transform: rotate(45deg); }
.ss-tile-art { position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 0; width: 120px; height: 120px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .22)); transition: transform .55s var(--ss-spring), opacity .3s; }
.ss-tile-art.lazyload:not(.loaded) { opacity: 0; }
.ss-tile:hover .ss-tile-art { transform: translateY(-8px) rotate(-6deg) scale(1.05); }

.ss-product { display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-product:hover { transform: scale(1.015); box-shadow: var(--ss-shadow-lift); }
.ss-product:active { transform: scale(1.015); box-shadow: 0 calc(2px * .9) calc(2px * 2.6) calc(2px * -1.1) var(--ss-ledge); transition-duration: .08s; }
.ss-product-media { position: relative; isolation: isolate; display: grid; place-items: end center; aspect-ratio: 4 / 3; overflow: hidden; margin: .6rem .6rem 0; border-radius: 16px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%), var(--tone, var(--ss-t-grape)); }
.ss-product-flags { position: absolute; left: .7rem; top: .7rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .35rem; max-width: calc(100% - 1.4rem); }
.ss-product-stock { position: absolute; right: .7rem; bottom: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 999px; background: rgba(10, 12, 24, .62); color: #fff; font: 700 .75rem/1.2 var(--ss-display); }
.ss-product-stock i { color: var(--ss-t-sun); }
.ss-product-stage { position: relative; display: block; width: 58%; margin-bottom: 12%; }
.ss-product-stage .ss-pedestal { position: relative; }
.ss-product-stage img { position: absolute; left: 50%; bottom: 22%; width: 96%; max-width: none; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; transform: translateX(-50%); transition: transform .55s var(--ss-spring), opacity .3s; }
.ss-product-stage .ss-cat-fx { inset: -80% -10% 10%; }
.ss-product:hover .ss-product-stage img { transform: translateX(-50%) translateY(-10px) rotate(-6deg) scale(1.05); }
.ss-product:hover .ss-cat-fx::before { transform: translateY(-12px); }
.ss-product:hover .ss-cat-fx::after { transform: translateY(-22px); }
.ss-cover, .ss-product-media > img.ss-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; transition: transform .8s var(--ss-ease), opacity .3s; }
.ss-product:hover .ss-cover { transform: scale(1.05); }
.ss-product.is-out .ss-product-media { filter: grayscale(.85) brightness(.9); }
.ss-product-body { display: flex; flex-direction: column; flex: 1; gap: .3rem; padding: 1rem 1.15rem 1.15rem; }
.ss-product-cat { font: 700 .8rem/1.2 var(--ss-display); color: var(--band-muted); }
.ss-product-name { margin: 0 0 .5rem; font: 800 1.2rem/1.15 var(--ss-display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.ss-product-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: auto; }
.ss-product-price { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.ss-product-price .ss-price { font-size: 1.45rem; }
.ss-product-foot .btn { position: static; flex: none; }
.ss-product-foot .stretched-link::after { z-index: 1; }
.ss-product-rank { position: absolute; left: 1.2rem; top: 1.2rem; z-index: 3; }
.ss-product--rank { flex-direction: row; align-items: stretch; }
.ss-product--rank .ss-product-media { width: 34%; flex: none; aspect-ratio: auto; margin: .5rem 0 .5rem .5rem; }
.ss-product--rank .ss-product-stage { width: 74%; margin-bottom: 14%; }
.ss-product--rank .ss-product-body { padding: .9rem 1rem; }
.ss-product--rank .ss-product-rank { position: static; align-self: flex-start; margin-bottom: .2rem; }
.ss-item-ico { width: 44px; height: 44px; flex: none; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .18)); }

@media (max-width: 575.98px) {
	.ss-product-name { font-size: 1.08rem; }
	.ss-product-price .ss-price { font-size: 1.3rem; }
	.ss-product-body { padding: .9rem; }
	.ss-product-foot { flex-direction: column; align-items: stretch; }
	.ss-product-foot .btn { width: 100%; }
	.ss-tile { min-height: 160px; padding: 1.1rem; }
	.ss-tile-name { font-size: 1.3rem; }
	.ss-tile-art { width: 84px; height: 84px; right: .8rem; bottom: .8rem; }
	.ss-tile-list { display: none; }
}

/* =========================================================================
   13. FOOTER — the page ends in a slice of terrain
   ========================================================================= */
.ss-footer { position: relative; margin-top: 32px; color: #B4BAC8; --band-card: #262A35; --band-fg: #F2F3F7; --band-muted: #9AA1B2; --band-line: rgba(242, 243, 247, .1); --band-sunk: #14161D; --ss-ledge: #0E1014; }
.ss-footer-ground { height: 54px; background: url(../img/ground.png) 0 0 / 1800px 54px repeat-x; image-rendering: pixelated; }
.ss-footer-body { padding: 2.6rem 0 1.4rem; background: #1B1E26 url(../img/ores.png) 0 0 / 256px 256px; image-rendering: pixelated; }
[data-bs-theme="dark"] .ss-footer-body { background-color: #13151B; }
.ss-footer-main { padding-bottom: .5rem; }
.ss-footer h4 { margin: 0 0 1rem; color: #fff; font: 800 1rem/1.2 var(--ss-display); }
.ss-footer ul:not(.dropdown-menu) { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ss-footer ul:not(.dropdown-menu) a { display: inline-flex; align-items: center; gap: 0; color: #B4BAC8; font-weight: 500; transition: color .2s, gap .25s var(--ss-ease); }
.ss-footer ul:not(.dropdown-menu) a::before { content: ""; width: 0; height: 3px; border-radius: 2px; background: var(--ss-accent); transition: width .25s var(--ss-ease); }
.ss-footer ul:not(.dropdown-menu) a:hover { gap: .45rem; color: #fff; }
.ss-footer ul:not(.dropdown-menu) a:hover::before { width: 10px; }
.ss-footer ul:not(.dropdown-menu) a i { margin-right: .4rem; color: #8E95A6; font-size: .9em; }
.ss-footer-about { max-width: 38ch; margin: 1rem 0 1.25rem; color: #9AA1B2; font-size: .95rem; }
.ss-footer-about.ck-content { color: #9AA1B2; font-size: .95rem; line-height: 1.6; }
.ss-footer-about.ck-content a { color: #E6E9F0; }
.ss-footer-ip { display: inline-flex; align-items: center; gap: .8rem; max-width: 100%; padding: .7rem .95rem; border: 0; border-radius: 14px; background: #2A2E38; color: #fff; text-align: left; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) #0E1014; transition: transform .25s var(--ss-spring), box-shadow .25s var(--ss-spring), background-color .2s; }
.ss-footer-ip:hover { transform: translateY(-2px); box-shadow: 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) #0E1014; }
.ss-footer-ip:active { transform: translateY(1px); box-shadow: 0 0 0 #0E1014; }
.ss-footer-ip.is-copied { background: color-mix(in oklab, var(--ss-accent) 35%, #2A2E38); }
.ss-footer-ip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ss-footer-ip b { font: 800 1.05rem/1.2 var(--ss-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-footer-ip small { color: #9AA1B2; font-size: .8rem; }
.ss-footer-ip i { margin-left: .3rem; color: #9AA1B2; transition: transform .3s var(--ss-spring); }
.ss-socials { display: flex; flex-wrap: wrap; gap: .45rem; }
.ss-socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #2A2E38; color: #fff; font-size: 1.3rem; transition: transform .35s var(--ss-spring), background-color .2s, color .2s; }
.ss-socials a:hover { background: var(--ss-accent); color: var(--ss-on-accent); transform: translateY(-4px) rotate(-8deg); }
.ss-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.4rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); color: #8E95A6; font-size: .88rem; }
.ss-switchers { display: flex; flex-wrap: wrap; gap: .4rem; }
.ss-switchers .btn { --bs-btn-color: #C9CED9; --bs-btn-bg: #262A35; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2E3340; --btn-edge: #0E1014; --bs-btn-font-weight: 600; }
.ss-switchers .dropdown-toggle::after { display: none; }
.ss-made { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-left: auto; }
.ss-made a { color: #B4BAC8; }
.ss-made a:hover { color: #fff; }
.ss-theme-badge { display: inline-flex; align-items: center; padding: .3rem .6rem; border-radius: 999px; background: #262A35; font: 700 .78rem/1.2 var(--ss-display); }
.ss-top { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.2rem; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-accent-edge); transition: transform .25s var(--ss-spring), box-shadow .25s var(--ss-spring); }
.ss-top:hover { transform: translateY(-3px); box-shadow: 0 calc(7px * .9) calc(7px * 2.6) calc(7px * -1.1) var(--ss-accent-edge); }
.ss-top:active { transform: translateY(1px); box-shadow: 0 0 0 var(--ss-accent-edge); }
@media (max-width: 767.98px) {
	.ss-footer-bottom { flex-direction: column; text-align: center; }
	.ss-made { justify-content: center; margin: 0; }
	.ss-footer-ground { height: 40px; background-size: 1334px 40px; }
}

/* =========================================================================
   14. ACCOUNT ASIDE, EMPTY, AUTH, ERROR
   ========================================================================= */
.ss-account-card { overflow: hidden; }
.ss-account-head { display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.25rem; background: #141936 url(../img/scene/night-sky.png) 70% 30% / cover; image-rendering: pixelated; color: #F2F3F7; }
.ss-account-name { font: 800 1.35rem/1.1 var(--ss-display); letter-spacing: -.03em; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.ss-account-balance { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .75rem .75rem 0; padding: .8rem 1rem; border-radius: 14px; background: var(--ss-accent); color: var(--ss-on-accent); font-weight: 700; box-shadow: 0 calc(4px * .9) calc(4px * 2.6) calc(4px * -1.1) var(--ss-accent-edge); transition: transform .25s var(--ss-spring), box-shadow .25s var(--ss-spring); }
.ss-account-balance:hover { color: var(--ss-on-accent); transform: translateY(-2px); box-shadow: 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) var(--ss-accent-edge); }
.ss-account-balance .ss-price { font-size: 1.4rem; }
.ss-account-nav { padding: .5rem; }
.ss-account-group { font: 700 .8rem/1.2 var(--ss-display); color: var(--band-muted); margin: .9rem .75rem .35rem; }
.ss-account-group:first-child { margin-top: .4rem; }
.sidebar-link { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .62rem .75rem; border: 0; border-radius: 12px; background: none; color: var(--band-fg); font: 700 .96rem/1.2 var(--ss-display); text-align: left; position: relative; transition: background-color .2s, transform .25s var(--ss-spring); }
.sidebar-link i { font-size: 1.15rem; width: 1.3rem; text-align: center; color: var(--band-muted); transition: color .2s, transform .3s var(--ss-spring); }
.sidebar-link:hover { background: var(--band-sunk); color: var(--band-fg); }
.sidebar-link:hover i { transform: translateX(2px); }
.sidebar-link.active { background: var(--ss-accent-soft); }
.sidebar-link.active i { color: var(--ss-accent-ink); }
.sidebar-link.active::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 4px; border-radius: 4px; background: var(--ss-accent); }
.ss-empty { text-align: center; padding: 3rem 1.5rem; border-radius: var(--ss-r-lg); background: var(--band-card); box-shadow: var(--ss-shadow-card); }
.ss-empty-icon { width: 68px; height: 68px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 20px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 2rem; box-shadow: 0 calc(5px * .9) calc(5px * 2.6) calc(5px * -1.1) var(--ss-accent-edge), inset 0 2px 0 rgba(255, 255, 255, .3); animation: ss-hop 3.2s var(--ss-ease) infinite; }
@keyframes ss-hop { 0%, 82%, 100% { transform: none; } 88% { transform: translateY(-8px) rotate(-6deg); } 94% { transform: translateY(0) rotate(0); } }
.ss-empty-title { font: 800 1.5rem/1.15 var(--ss-display); letter-spacing: -.03em; margin: 0 0 .5rem; }
.ss-empty-text { color: var(--band-muted); margin: 0 auto; max-width: 30rem; }
.ss-empty .btn { margin-top: 1.25rem; }

.ss-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ss-auth-side { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem, 4.5vh, 2.6rem) clamp(1.75rem, 3vw, 3.5rem) clamp(2rem, 7vh, 3.6rem); background: #A9C8E8; color: var(--ss-ink); }
[data-bs-theme="dark"] .ss-auth-side { background: #131A3E; color: #F2F3F7; }
.ss-auth-side-art { position: absolute; inset: 0; z-index: -2; }
.ss-auth-side-art .ss-layer { object-position: 82% 100%; }
.ss-auth-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(241, 242, 245, .82) 0%, rgba(241, 242, 245, .5) 30%, rgba(241, 242, 245, 0) 56%, rgba(241, 242, 245, .55) 100%); }
[data-bs-theme="dark"] .ss-auth-side::before, .ss-auth-side.is-image::before { background: linear-gradient(180deg, rgba(10, 12, 28, .78) 0%, rgba(10, 12, 28, .42) 32%, rgba(10, 12, 28, 0) 58%, rgba(10, 12, 28, .7) 100%); }
.ss-auth-side.is-image { color: #fff; }
.ss-auth-brand { position: relative; color: inherit; }
.ss-auth-brand:hover { color: inherit; }
.ss-auth-pitch { font: 800 clamp(2rem, 1.2rem + 1.9vw, 3.2rem)/1.02 var(--ss-display); letter-spacing: -.04em; margin: clamp(1.6rem, 6vh, 3.4rem) 0 0; max-width: 15ch; text-wrap: balance; }
.ss-auth-side-top { position: relative; }
.ss-auth-lead { margin: 1rem 0 0; max-width: 30rem; font-size: 1.04rem; font-weight: 500; line-height: 1.5; color: #2B3344; }
[data-bs-theme="dark"] .ss-auth-lead, .ss-auth-side.is-image .ss-auth-lead { color: rgba(242, 243, 247, .82); }
.ss-auth-perks { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.ss-auth-perks li, .ss-auth-perks a { display: inline-flex; align-items: center; gap: .4rem; }
.ss-auth-perks li { padding: .45rem .75rem; border-radius: 10px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(20, 24, 33, .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 .88rem/1 var(--ss-font); color: var(--ss-ink); }
.ss-auth-perks li b { font-family: var(--ss-display); font-weight: 800; }
.ss-auth-perks a { color: inherit; }
.ss-auth-perks i { font-size: 1.05rem; color: var(--ss-accent-edge); }
[data-bs-theme="dark"] .ss-auth-perks li, .ss-auth-side.is-image .ss-auth-perks li { background: rgba(14, 18, 40, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #F2F3F7; }
[data-bs-theme="dark"] .ss-auth-perks i, .ss-auth-side.is-image .ss-auth-perks i { color: color-mix(in oklab, var(--ss-accent) 80%, #fff); }
.ss-auth-side-copy { position: relative; }
.ss-auth-side-copy .ss-ip { max-width: 30rem; }
@media (max-height: 700px) { .ss-auth-lead { display: none; } }
.ss-auth-main { display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem, 4vh, 2.5rem) clamp(1.25rem, 5vw, 5rem); background: var(--band-bg); }
.ss-auth-box { width: 100%; max-width: 450px; margin: 0 auto; }
.ss-auth-box > .card, .ss-auth-box > .ss-panel { background: transparent; border: 0; box-shadow: none; }
.ss-auth-box > .card > .card-body, .ss-auth-box > .ss-panel > .ss-panel-body { padding: 0; }
.ss-auth-box .card + .card { margin-top: 1.25rem; }
.ss-auth-box h1, .ss-auth-box h2, .ss-auth-box .h2 { font: 800 clamp(1.85rem, .9rem + 2.4vh, 2.5rem)/1.02 var(--ss-display); letter-spacing: -.04em; text-align: left !important; margin-bottom: .6rem !important; }
.ss-auth-box .text-center:not(.btn):not(.d-flex):not(.ss-keep-center) { text-align: left !important; }
.ss-auth-box .btn-primary.w-100 { --bs-btn-padding-y: .9rem; }
.ss-auth-mobile-brand { display: none; margin-bottom: clamp(1rem, 3.5vh, 2rem); color: var(--band-fg); }
.ss-auth-foot { margin-top: clamp(1rem, 3.5vh, 2.5rem); font-size: .85rem; color: var(--band-muted); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 991.98px) { .ss-auth { grid-template-columns: minmax(0, 1fr); } .ss-auth-side { display: none; } .ss-auth-mobile-brand { display: inline-flex; } }

.ss-error { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; isolation: isolate; padding: 3rem 1.25rem; background: #131A3E; color: #F2F3F7; }
.ss-error-art { position: absolute; inset: 0; z-index: -2; }
.ss-error::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 30% 50%, rgba(10, 12, 28, .86), rgba(10, 12, 28, .35)); }
.ss-error-box { max-width: 640px; }
.ss-error .ss-error-code { font: 800 clamp(6rem, 3rem + 12vw, 12rem)/.82 var(--ss-display); margin: 0 0 1rem; letter-spacing: -.06em; text-shadow: 0 calc(8px * .9) calc(8px * 2.6) calc(8px * -1.1) rgba(0, 0, 0, .3); }
.ss-error h1, .ss-error h2, .ss-error .empty-title { font: 800 2.2rem/1.05 var(--ss-display); letter-spacing: -.035em; }
.ss-error p, .ss-error .empty-subtitle { color: #C8CDE0; font-size: 1.05rem; }
.ss-error .empty-img img, .ss-error .empty-header { display: none; }

/* =========================================================================
   15. CONTENT / THIRD PARTY
   ========================================================================= */
.ck-content, .ss-prose { color: var(--band-fg); font-size: 1.04rem; line-height: 1.75; overflow-wrap: anywhere; }
.ck-content > * + *, .ss-prose > * + * { margin-top: 1em; }
.ck-content h1, .ck-content h2, .ck-content h3, .ss-prose h1, .ss-prose h2, .ss-prose h3 { margin-top: 1.6em; font-family: var(--ss-display); font-weight: 800; letter-spacing: -.025em; }
.ck-content h2, .ss-prose h2 { font-size: 1.8rem; line-height: 1.12; }
.ck-content a, .ss-prose a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ck-content blockquote, .ss-prose blockquote { margin: 1.5em 0; padding: .9rem 1.2rem; border: 0; border-radius: 14px; background: var(--band-sunk); box-shadow: inset 4px 0 0 var(--ss-accent); font-size: 1.08rem; font-weight: 500; font-style: normal; }
.ck-content img, .ss-prose img { border-radius: var(--ss-r); height: auto; }
.ck-content table, .ss-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ck-content td, .ck-content th, .ss-prose td, .ss-prose th { border: 1px solid var(--band-line); padding: .6rem .85rem; }
.ck-content code, .ss-prose code { background: var(--band-sunk); padding: .1rem .35rem; border-radius: 6px; }
.ck-content pre, .ss-prose pre { background: var(--band-sunk); border: 0; padding: 1rem; border-radius: var(--ss-r); overflow: auto; }
.ck-content ul, .ck-content ol, .ss-prose ul, .ss-prose ol { padding-left: 1.3em; }
.ck-content hr, .ss-prose hr { border: 0; height: 2px; border-radius: 2px; background: var(--band-line); }
.ss-prose-lite p { margin: 0 0 .6rem; }
.select2-container--bootstrap4 .select2-selection { background-color: var(--band-input) !important; border: 2px solid var(--band-line) !important; border-radius: 12px !important; color: var(--band-fg); min-height: calc(1.4em + 1.32rem + 4px) !important; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { color: var(--band-fg) !important; line-height: calc(1.4em + 1.32rem) !important; padding-left: .9rem !important; }
.select2-container--bootstrap4.select2-container--focus .select2-selection, .select2-container--bootstrap4.select2-container--open .select2-selection { border-color: var(--ss-accent) !important; box-shadow: 0 0 0 4px var(--bs-focus-ring-color) !important; }
.select2-container--bootstrap4 .select2-dropdown { background: var(--band-card); border: 0 !important; color: var(--band-fg); border-radius: 14px !important; box-shadow: var(--ss-shadow-float); overflow: hidden; }
.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] { background: var(--ss-accent) !important; color: var(--ss-on-accent) !important; }
.select2-container--bootstrap4 .select2-results__option[aria-selected=true] { background: var(--band-sunk); color: var(--band-fg); }
.select2-search--dropdown .select2-search__field { background: var(--band-input); color: var(--band-fg); border: 2px solid var(--band-line) !important; border-radius: 10px; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { background: var(--band-sunk); border: 0; color: var(--band-fg); border-radius: 999px; font-weight: 600; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field { background: transparent !important; color: var(--band-fg); }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { border-top-color: var(--band-muted) !important; }
.select2-container--bootstrap4.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--band-muted) !important; }
.select2-container--bootstrap4 .select2-selection__placeholder { color: var(--band-muted) !important; }
.swal2-popup { background: var(--band-card) !important; color: var(--band-fg) !important; border-radius: var(--ss-r-xl) !important; font-family: var(--ss-font) !important; box-shadow: 0 calc(7px * .9) calc(7px * 2.6) calc(7px * -1.1) var(--ss-ledge), 0 40px 80px -30px rgba(0, 0, 0, .6) !important; padding: 1.75rem !important; }
.swal2-title { color: var(--band-fg) !important; font-family: var(--ss-display) !important; font-weight: 800 !important; font-size: 1.7rem !important; letter-spacing: -.03em; line-height: 1.1 !important; }
.swal2-content, .swal2-html-container { color: var(--band-muted) !important; font-size: 1rem !important; }
.swal2-styled { border-radius: 12px !important; font-family: var(--ss-display) !important; font-weight: 700 !important; font-size: .98rem !important; padding: .75rem 1.3rem !important; box-shadow: 0 4px 11px -4px var(--btn-edge, var(--ss-ledge)) !important; transition: transform .2s var(--ss-spring) !important; }
.swal2-styled:hover { transform: translateY(-2px); }
.swal2-styled:active { transform: translateY(3px); }
.swal2-styled.swal2-confirm { --btn-edge: var(--ss-accent-edge); background: var(--ss-accent) !important; color: var(--ss-on-accent) !important; }
.swal2-styled.swal2-cancel { background: var(--band-sunk) !important; color: var(--band-fg) !important; }
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-shown { background: rgba(7, 9, 16, .65) !important; }
.swal2-icon.swal2-success [class^=swal2-success-circular-line], .swal2-icon.swal2-success .swal2-success-fix { background: var(--band-card) !important; }
/* CKEditor 5 chrome follows the band tokens (light + dark) on every page that loads an editor */
body {
	--ck-font-face: var(--ss-font); --ck-border-radius: 10px;
	--ck-color-base-background: var(--band-input); --ck-color-base-foreground: var(--band-sunk); --ck-color-base-border: var(--band-line);
	--ck-color-base-text: var(--band-fg); --ck-color-text: var(--band-fg); --ck-color-focus-border: var(--ss-accent); --ck-color-focus-outer-shadow: var(--bs-focus-ring-color);
	--ck-focus-ring: 2px solid var(--ss-accent); --ck-inner-shadow: none; --ck-drop-shadow: var(--ss-shadow-float); --ck-color-shadow-drop: rgba(0, 0, 0, .25); --ck-color-shadow-inner: transparent;
	--ck-color-toolbar-background: var(--band-sunk); --ck-color-toolbar-border: var(--band-line);
	--ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: color-mix(in oklab, var(--band-fg) 9%, transparent); --ck-color-button-default-active-background: color-mix(in oklab, var(--band-fg) 14%, transparent);
	--ck-color-button-on-background: var(--ss-accent-soft); --ck-color-button-on-hover-background: color-mix(in oklab, var(--ss-accent) 28%, transparent); --ck-color-button-on-active-background: color-mix(in oklab, var(--ss-accent) 34%, transparent); --ck-color-button-on-color: var(--band-fg);
	--ck-color-button-action-background: var(--ss-accent); --ck-color-button-action-hover-background: var(--ss-accent-hover); --ck-color-button-action-active-background: var(--ss-accent-press); --ck-color-button-action-text: var(--ss-on-accent);
	--ck-color-split-button-hover-background: color-mix(in oklab, var(--band-fg) 9%, transparent); --ck-color-split-button-hover-border: var(--band-line);
	--ck-color-dropdown-panel-background: var(--band-card); --ck-color-dropdown-panel-border: var(--band-line); --ck-color-panel-background: var(--band-card); --ck-color-panel-border: var(--band-line);
	--ck-color-input-background: var(--band-input); --ck-color-input-border: var(--band-line); --ck-color-input-text: var(--band-fg); --ck-color-labeled-field-label-background: var(--band-card);
	--ck-color-list-background: var(--band-card); --ck-color-list-button-hover-background: var(--band-sunk); --ck-color-list-button-on-background: var(--ss-accent); --ck-color-list-button-on-background-focus: var(--ss-accent); --ck-color-list-button-on-text: var(--ss-on-accent);
	--ck-color-tooltip-background: var(--ss-ink); --ck-color-tooltip-text: var(--ss-bone); --ck-color-engine-placeholder-text: var(--band-muted); --ck-color-link-default: var(--band-fg); --ck-color-code-block-label-background: var(--band-muted);
}
.ck.ck-editor { width: 100%; }
.ck.ck-editor__main > .ck-editor__editable { min-height: 220px; color: var(--band-fg); }
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) { box-shadow: 0 0 0 4px var(--bs-focus-ring-color) !important; }
.ck.ck-content blockquote, .ck-content blockquote { border-left: 0; font-style: normal; }
.ck-content figure.table th, .ck-content table th { letter-spacing: normal; font-size: inherit; color: var(--band-fg); white-space: normal; background: var(--band-sunk); }
.ck-content figure.table td, .ck-content figure.table th { border-color: var(--band-line) !important; }

/* =========================================================================
   16. MEMBERS, LOADER, UTILITIES, SHARED REVIEW RULES
   ========================================================================= */
.ss-member-search { padding: 1.35rem; max-width: 760px; }
.ss-member-search .form-control { padding-left: 2.8rem; }
.ss-member-search-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--band-muted); font-size: 1.2rem; pointer-events: none; }
.ss-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.ss-member { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; color: var(--band-fg); }
.ss-member:hover { color: var(--band-fg); }
.ss-member + .ss-member { margin-top: 0; }
.ss-member-name { display: block; font: 700 1rem/1.25 var(--ss-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-member-meta { display: block; font-size: .84rem; color: var(--band-muted); }
.ss-loader { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--band-bg); transition: opacity .3s var(--ss-ease), visibility .3s; }
.ss-loader.is-done { opacity: 0; visibility: hidden; }
.ss-loader-mark { position: relative; display: block; width: 64px; height: 76px; }
.ss-loader-mark svg { display: block; width: 64px; height: 64px; animation: ss-block-hop .9s var(--ss-ease) infinite; }
.ss-loader-shadow { position: absolute; left: 50%; bottom: 0; width: 46px; height: 8px; border-radius: 50%; background: rgba(20, 24, 33, .18); transform: translateX(-50%); animation: ss-block-shadow .9s var(--ss-ease) infinite; }
@keyframes ss-block-hop { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 40% { transform: translateY(-18px) rotate(-10deg) scale(.96, 1.04); } 70% { transform: translateY(0) rotate(0) scale(1); } }
@keyframes ss-block-shadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 40% { transform: translateX(-50%) scale(.6); opacity: .5; } }
.ss-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no-underline, .no-underline:hover { text-decoration: none; }
.cursor-pointer { cursor: pointer; }
.fw-medium { font-weight: 560 !important; }
.hide-theme-dark { display: none !important; }
[data-bs-theme="light"] .hide-theme-dark { display: inline-flex !important; }
[data-bs-theme="light"] .hide-theme-light { display: none !important; }
.ss-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ss-accent); color: var(--ss-on-accent); font: 800 .72rem/1 var(--ss-display); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--band-card); }
.ss-tebex-auth-row { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; }
.ss-tebex-auth { margin-bottom: 1rem; }
.ss-tebex-auth + .ss-tebex-auth { margin-top: 0; }
[x-cloak] { display: none !important; }
.ss-panel--ink { --ss-accent-ink: color-mix(in oklab, var(--ss-accent) 78%, white); }
.ss-panel[style*="display: none"] + .ss-panel, .card[style*="display: none"] + .card { margin-top: 0; }
.ss-head-aside { min-width: 0; max-width: 100%; }
.form-check-label a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.table-responsive { position: relative; }
.d-flex[class*="gap-"] > .ss-panel + .ss-panel, .d-grid > .ss-panel + .ss-panel { margin-top: 0; }
img.lazyload:not(.loaded)[src$="/loaders/server.png"], img.lazyload:not(.loaded)[src$="/loaders/store.png"], img.lazyload:not(.loaded)[src$="/loaders/news.png"] { opacity: 0; }
.ss-title, .ss-title-sm, .ss-page-title, .ss-tile-name, .ss-mode-name, .ss-feature-title, .ss-promo-title, .ss-news-box h3, .ss-step h3, .ss-panel-title, .ss-product-name, .ss-auth-pitch, .ss-empty-title { text-wrap: balance; }
.ss-lead, .ss-news-text, .ss-mode-text, .ss-tile-desc { text-wrap: pretty; }

/* =========================================================================
   17. MOTION (only while <html> has .ss-motion), SCROLLBAR, PRINT
   ========================================================================= */
/* ---- stable hover --------------------------------------------------------------------------------------------------
   A block that moves on hover moves its hit box: with the pointer on its edge the hover ends, the block falls back under
   the pointer and the two states flicker. Clipped cards grow from their bottom edge instead (the box only gets bigger);
   small blocks keep their lift and carry an invisible area over the ground they left while hovered or pressed, so the
   pointer stays on them and a press on the top edge still ends in a click. */
:is(.ss-cat, .ss-news-card, .ss-mode, .ss-tile, .ss-product, .ss-dl-card, .ss-pl-vote, .ss-pl-wheel-tile) { transform-origin: 50% 100%; }
:where(.btn, .ss-balance, a.ss-chip, .page-link, .ss-ip, .ss-ip-mini, .ss-footer-ip, .ss-socials a, .ss-top, .ss-account-balance, .swal2-styled, .ss-fm-role, a.ss-panel) { position: relative; }
:is(.btn, .ss-balance, a.ss-chip, .page-link, .ss-hero-card, .ss-ip, .ss-ip-mini, .ss-footer-ip, .ss-socials a, .ss-top, .ss-account-balance, .swal2-styled, .ss-fm-role, a.ss-panel):is(:hover, :active)::before { content: ""; position: absolute; inset: -8px 0 -10px; z-index: -1; }
.ss-motion [data-ss-reveal] { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .6s var(--ss-ease), transform .8s var(--ss-spring); transition-delay: calc(var(--i, 0) * 70ms); }
.ss-motion [data-ss-reveal].is-in { opacity: 1; transform: none; }
.ss-motion .ss-news-card[data-ss-reveal].is-in:hover { transform: scale(1.015); transition-delay: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
:root { --ss-scroll: #B8BECB; }
[data-bs-theme="dark"] { --ss-scroll: #3A404D; }
::-webkit-scrollbar { width: 14px; height: 10px; }
::-webkit-scrollbar-track { background: var(--band-sunk); }
::-webkit-scrollbar-thumb { border: 3px solid var(--band-sunk); border-radius: 10px; background: var(--ss-scroll); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
::-webkit-scrollbar-thumb:hover { background: var(--ss-accent); }
::-webkit-scrollbar-corner { background: var(--band-sunk); }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--ss-scroll) var(--band-sunk); } }
@media (prefers-reduced-motion: reduce) {
	html:not(.ss-force-motion) *, html:not(.ss-force-motion) *::before, html:not(.ss-force-motion) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	html:not(.ss-force-motion) .ss-layer { transform: none !important; }
}
html.ss-no-anim *, html.ss-no-anim *::before, html.ss-no-anim *::after { animation: none !important; transition: none !important; }
@media print { .ss-topbar, .ss-header, .ss-footer, .ss-loader, .ss-sheet { display: none !important; } body { background: #fff; color: #000; } }
/* Sunstone 1.0.0 · Piksel Keşif */
:root { --ss-discord-brand: hsl(235 86% 65%); --ss-world-night: hsl(220 38% 14%); --ss-star: hsl(43 79% 87%); }
/* Discord marks are inline SVG components; no external mask is required. */
.ss-header-row { min-height: 92px; height: auto; gap: clamp(.6rem, 1vw, 1rem); }
.ss-menu-wrap { flex: 1 1 0; }
button.ss-menu-link { border: 0; background: none; border-radius: 10px; }
.ss-menu-link:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.ss-menu-link:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 3px; }
.ss-menu > .ss-hover-open > .ss-drop { display: block; }
.ss-menu > .ss-hover-open > .ss-drop:not(.ss-drop--list):not(.ss-user-menu) { display: grid; }
.ss-menu > .dropdown::after { content: ""; position: absolute; inset: 100% -.5rem auto; height: 14px; }
.ss-nav-discord { display: flex; align-items: center; gap: .65rem; flex: none; padding: .65rem .75rem; border-radius: 14px; color: var(--band-fg); background: color-mix(in oklab, var(--ss-discord-brand) 10%, var(--band-card)); border: 1px solid color-mix(in oklab, var(--ss-discord-brand) 20%, var(--band-card)); transition: background .2s, transform .2s; }
.ss-nav-discord:hover { color: var(--band-fg); background: color-mix(in oklab, var(--ss-discord-brand) 18%, var(--band-card)); transform: translateY(-2px); }
.ss-nav-discord-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; color: var(--ss-bone); background: var(--ss-discord-brand); font-size: 1.4rem; }
.ss-nav-discord b { display: block; font: 800 1rem/1.2 var(--ss-display); }
.ss-nav-discord small { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; font: 500 .74rem/1.2 var(--ss-font); color: var(--band-muted); }
.ss-nav-discord > i { font-size: .9rem; color: var(--band-muted); }
.ss-menu-ink { bottom: 17px; }
/* Original, reusable worlds. Only the two frames involved in a fade are mounted. */
.ss-world-frame { position: absolute; inset: 0; overflow: hidden; }
.ss-world-frame.is-entering { opacity: 0; }
.ss-world-frame { transition: opacity 1.2s ease; }
.ss-world-atmosphere { position: absolute; inset: 0; pointer-events: none; opacity: .4; background: radial-gradient(ellipse at 75% 22%, color-mix(in oklab, var(--ss-star) 18%, transparent), transparent 50%); }
.ss-layer--panorama { object-position: 65% 60%; }
.ss-motion .ss-layer--panorama { animation: ss-world-breathe 28s ease-in-out infinite alternate; }
@keyframes ss-world-breathe { from { scale: 1.015; translate: -3px 0; } to { scale: 1.05; translate: 6px 0; } }
.ss-world-atmosphere::before { content: ""; position: absolute; left: 20%; top: 40%; width: 2px; height: 2px; color: var(--ss-star); box-shadow: 12px 74px,94px 115px,240px 50px,310px 170px,418px 84px,560px 138px,670px 60px,780px 150px,896px 200px; opacity: .8; }
.ss-motion .ss-world-atmosphere::before { animation: ss-world-motes 9s ease-in-out infinite alternate; }
@keyframes ss-world-motes { from { transform: translate(0,7px); opacity: .15; } to { transform: translate(8px,-10px); opacity: .85; } }
.ss-motion .ss-layer--clouds { animation: ss-cloud-drift 36s ease-in-out infinite alternate; }
@keyframes ss-cloud-drift { from { translate: -8px 0; } to { translate: 10px 3px; } }
.ss-landscape-controls { position: absolute; right: max(1.5rem, calc((100vw - 1400px) / 2)); bottom: 88px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 30px; background: color-mix(in oklab, var(--ss-world-night) 70%, transparent); z-index: 2; }
.ss-landscape-controls button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in oklab, var(--ss-bone) 45%, transparent); transition: width .25s, background .25s; }
.ss-landscape-controls button[aria-pressed="true"] { width: 28px; border-radius: 9px; background: var(--ss-accent); }
.ss-landscape-controls .ss-landscape-pause { width: 24px; height: 24px; margin-left: 4px; background: transparent; color: var(--ss-bone); font-size: 13px; }
.ss-landscape-controls button:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 4px; }
.ss-page-head-art { filter: blur(3px) saturate(.8); scale: 1.035; }
.ss-page-head .ss-layer { object-position: 72% 58%; }
.ss-page-head::after { background: linear-gradient(90deg, color-mix(in oklab, var(--band-bg) 94%, transparent), color-mix(in oklab, var(--band-bg) 72%, transparent) 50%, color-mix(in oklab, var(--band-bg) 24%, transparent)); }
[data-bs-theme="dark"] .ss-page-head::after { background: linear-gradient(90deg, color-mix(in oklab, var(--ss-world-night) 94%, transparent), color-mix(in oklab, var(--ss-world-night) 70%, transparent) 50%, color-mix(in oklab, var(--ss-world-night) 24%, transparent)); }
/* Player identity remains visible on the profile itself. */
.ss-account-card { overflow: hidden; }
.ss-account-cover { height: 100px; background: var(--ss-world-night) url(../img/worlds/grove-night.webp) 70% 45% / cover; }
.ss-account-head { display: block; padding: 0 1.35rem 1.2rem; color: var(--band-fg); background: var(--band-card); image-rendering: auto; }
.ss-account-head > .ss-avatar { width: 70px; height: 70px; margin-top: -35px; margin-bottom: .7rem; position: relative; border: 5px solid var(--band-card); border-radius: 18px; box-shadow: var(--ss-soft); }
.ss-account-welcome { display: block; color: var(--band-muted); font-size: .8rem; margin-bottom: .25rem; }
.ss-account-name { font-size: 1.4rem; }
.ss-account-balance { margin: 0 .85rem .5rem; padding: .9rem; border-radius: 12px; background: var(--band-sunk); border: 1px solid var(--band-card-line); }
.ss-account-group { padding-inline: .7rem; letter-spacing: .02em; }
.ss-account-nav .sidebar-link { border-radius: 10px; padding: .8rem; margin: 3px 0; gap: .7rem; }
.ss-account-nav .sidebar-link i { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--band-sunk); }
.ss-account-nav .sidebar-link.active { background: color-mix(in oklab, var(--ss-accent) 14%, var(--band-card)); color: var(--band-fg); box-shadow: inset 3px 0 var(--ss-accent); }
.ss-account-nav .sidebar-link.active i { background: var(--ss-accent); color: var(--ss-on-accent); }
/* Blurred landscape covers across sidebar families. */
:is(aside,.ss-side,.ss-aside,.ss-acc-side,.ss-store-side,.ss-lb-side) .ss-panel-head { position: relative; isolation: isolate; overflow: hidden; background: var(--ss-world-night); color: var(--ss-bone); min-height: 86px; border-bottom: 0; }
:is(aside,.ss-side,.ss-aside,.ss-acc-side,.ss-store-side,.ss-lb-side) .ss-panel-head::before { content: ""; position: absolute; inset: -7px; z-index: -2; background: url(../img/worlds/harbor-night.webp) 75% 55% / cover; filter: blur(2px); opacity: .65; }
:is(aside,.ss-side,.ss-aside,.ss-acc-side,.ss-store-side,.ss-lb-side) .ss-panel-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--ss-world-night) 85%, transparent), transparent); }
.ss-lb-side .ss-panel-head::before { background-image: url(../img/worlds/frost-night.webp); }
.ss-store-side .ss-panel-head::before { background-image: url(../img/worlds/dunes-night.webp); }
:is(aside,.ss-side) .ss-panel:nth-child(3n+2) .ss-panel-head::before { background-image: url(../img/worlds/grove-night.webp); }
:is(aside,.ss-side) .ss-panel:nth-child(3n+3) .ss-panel-head::before { background-image: url(../img/worlds/citadel-night.webp); }
:is(aside,.ss-side,.ss-aside,.ss-acc-side,.ss-store-side,.ss-lb-side) .ss-panel-head :is(.ss-panel-title,.ss-panel-sub,.ss-ico) { color: inherit; }
/* Support is a pair of large, distinct destinations. */
.ss-support-hub { padding: 1.25rem; }
.ss-support-visual { height: 110px; margin: -.2rem -.2rem .8rem; border-radius: 15px; display: grid; place-items: center; background: radial-gradient(ellipse at center, color-mix(in oklab, var(--ss-accent) 18%, var(--band-card)), var(--band-card)); }
.ss-support-visual svg { width: 170px; height: 115px; filter: drop-shadow(0 8px 7px color-mix(in oklab, var(--ss-accent-edge) 20%, transparent)); }
.ss-support-copy h3 { margin: 0 0 .5rem; font: 800 1.22rem/1.2 var(--ss-display); letter-spacing: -.02em; }
.ss-support-copy p { color: var(--band-muted); margin: 0 0 1.1rem; font-size: .92rem; }
.ss-support-links { display: grid; gap: .65rem; }
.ss-support-links a { display: flex; align-items: center; gap: .7rem; min-height: 68px; padding: .75rem; color: var(--band-fg); background: var(--band-sunk); border: 1px solid var(--band-card-line); border-radius: 13px; transition: transform .2s, border-color .2s; }
.ss-support-links a:hover { transform: translateX(3px); border-color: var(--ss-accent); }
.ss-support-link-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.25rem; flex: none; }
.ss-support-link-icon.is-discord { background: var(--ss-discord-brand); color: var(--ss-bone); }
.ss-support-links b { display: block; font: 800 .96rem/1.3 var(--ss-display); }
.ss-support-links small { display: block; margin-top: .2rem; color: var(--band-muted); font-size: .78rem; }
.ss-support-links a > i { margin-left: auto; }
/* Product fan animates only transforms; stars use two painted layers. */
.ss-feature { background-image: none; background-color: var(--ss-world-night); }
.ss-feature-copy[hidden] { display: none; }
.ss-feature-copy { grid-column: 1; grid-row: 1; }
.ss-feature-card { grid-column: 2; grid-row: 1; }
.ss-feature-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ss-feature-stars::before,.ss-feature-stars::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 20%, var(--ss-star) 0 1px, transparent 2px), radial-gradient(circle at 73% 70%, var(--ss-star) 0 1px, transparent 2px), radial-gradient(circle at 90% 13%, var(--ss-star) 0 2px, transparent 3px); background-size: 133px 147px,197px 171px,337px 227px; opacity: .32; }
.ss-motion .ss-feature-stars::before { animation: ss-twinkle 5s ease-in-out infinite alternate; }
.ss-motion .ss-feature-stars::after { animation: ss-twinkle 7s 1s ease-in-out infinite alternate-reverse; transform: translate(43px,27px); }
@keyframes ss-twinkle { from { opacity: .12; translate: 0 0; } to { opacity: .58; translate: 3px -4px; } }
.ss-feature-card .ss-holo { width: min(290px,70%); transition: transform .48s var(--ss-spring), opacity .35s, filter .35s; }
.ss-feature-card .ss-holo[data-slot="0"] { z-index: 3; transform: translateX(0) rotate(0) scale(1); opacity: 1; filter: none; }
.ss-feature-card .ss-holo[data-slot="1"] { z-index: 1; transform: translateX(-40%) rotate(-12deg) scale(.85); opacity: .78; filter: saturate(.8); }
.ss-feature-card .ss-holo[data-slot="2"] { z-index: 2; transform: translateX(40%) rotate(12deg) scale(.85); opacity: .78; filter: saturate(.8); }
.ss-feature-switch { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; }
.ss-feature-switch button { width: 10px; height: 10px; border-radius: 6px; border: 0; padding: 0; background: color-mix(in oklab, var(--ss-bone) 35%, transparent); transition: width .2s, background .2s; }
.ss-feature-switch button[aria-pressed="true"] { width: 26px; background: var(--ss-accent); }
.ss-cat-stage::before { content: ""; position: absolute; inset: -8% -12% 8%; border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in oklab, var(--ss-bone) 30%, transparent), transparent 65%); opacity: .65; transition: opacity .4s, transform .6s; }
.ss-cat-stage::after { content: ""; position: absolute; width: 68%; aspect-ratio: 1; top: -4%; left: 16%; border: 1px solid color-mix(in oklab, var(--ss-bone) 28%, transparent); border-radius: 50%; transform: rotateX(60deg) rotate(-20deg); opacity: .5; transition: transform .8s, opacity .4s; }
.ss-cat:hover .ss-cat-stage::before { opacity: 1; transform: scale(1.12); }
.ss-cat:hover .ss-cat-stage::after { transform: rotateX(60deg) rotate(35deg) scale(1.14); opacity: .9; }
.ss-cat-stage img { filter: drop-shadow(0 10px 5px color-mix(in oklab, var(--tone-edge) 65%, transparent)); transition: transform .5s var(--ss-spring), filter .4s; }
.ss-cat:hover .ss-cat-stage img { transform: translateX(-50%) translateY(-9px) rotate(-4deg); filter: drop-shadow(0 17px 8px color-mix(in oklab, var(--tone-edge) 70%, transparent)); }
/* Blog replacement stays in the same page and announces loading errors inline. */
.ss-blog-viewport { overflow: clip; position: relative; scroll-margin-top: 115px; }
.ss-blog-viewport[aria-busy="true"] .ss-pager { opacity: .6; }
.ss-blog-status { padding: .85rem 1rem; margin-top: 1rem; border-radius: 12px; background: var(--band-sunk); color: var(--band-fg); font-weight: 600; }
.ss-blog-viewport .ss-pager { scroll-margin-top: 120px; }
.ss-offscreen .ss-layer--clouds,.ss-offscreen .ss-layer--panorama,.ss-offscreen .ss-world-atmosphere::before,.ss-offscreen .ss-feature-stars::before,.ss-offscreen .ss-feature-stars::after { animation-play-state: paused; }
.ss-world-paused .ss-layer--panorama,.ss-world-paused .ss-world-atmosphere::before { animation-play-state: paused; }
.ss-store-cartbox-head .ss-store-side-title { min-height: 58px; padding: .6rem !important; border-radius: 10px; }
.ss-pl-side-title,.ss-store-side-title,.ss-tbx-side-title { position: relative; isolation: isolate; overflow: hidden; min-height: 85px; display: flex; align-items: center; padding: 1.3rem !important; margin: 0 !important; background: var(--ss-world-night); color: var(--ss-bone) !important; }
.ss-pl-side-title::before,.ss-store-side-title::before,.ss-tbx-side-title::before { content: ""; position: absolute; inset: -7px; z-index: -2; background: url(../img/worlds/frost-night.webp) 70% 50% / cover; filter: blur(2px); opacity: .6; }
.ss-store-side-title::before,.ss-tbx-side-title::before { background-image: url(../img/worlds/dunes-night.webp); }
.ss-pl-side-title::after,.ss-store-side-title::after,.ss-tbx-side-title::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--ss-world-night) 80%, transparent), transparent); }
@media(min-width: 1200px) { .ss-header-row { max-width: 1540px; } .ss-menu-link { padding-inline: .6rem; } .ss-actions { gap: .45rem; } .ss-user-text { max-width: 105px; } }
@media(max-width: 1399.98px) { .ss-nav-discord > i { display: none; } .ss-nav-discord { gap: .5rem; padding: .5rem; } .ss-nav-discord small { max-width: 95px; } .ss-nav-cta { display: none; } }
@media(max-width: 1199.98px) { .ss-nav-discord { margin-left: auto; } .ss-nav-discord b { font-size: .9rem; } .ss-header-row { min-height: 80px; } }
@media(max-width: 991.98px) { .ss-feature-copy { grid-column: 1; grid-row: 2; } .ss-feature-card { grid-column: 1; grid-row: 1; margin-bottom: 1.5rem; } .ss-account-cover { height: 74px; } .ss-account-head { display: flex; padding: .7rem 1rem; gap: .8rem; } .ss-account-head > .ss-avatar { width: 56px; height: 56px; margin: -24px 0 0; } .ss-account-nav .sidebar-link { flex: none; } }
@media(max-width: 575.98px) { .ss-header-row { min-height: 72px; } .ss-nav-discord { padding: 0; background: none; border: 0; } .ss-nav-discord > span:not(.ss-nav-discord-icon) { display: none; } .ss-nav-discord-icon { width: 36px; height: 36px; } .ss-brand-logo { max-width: 155px; } .ss-landscape-controls { right: 1rem; bottom: 68px; } .ss-feature-card .ss-holo { width: min(240px,66%); } .ss-feature-card .ss-holo-name { font-size: 1.3rem; } .ss-holo-inner { padding: 10px; } .ss-holo-top { font-size: .66rem; } .ss-feature-card .ss-holo[data-slot="1"] { transform: translateX(-31%) rotate(-9deg) scale(.85); } .ss-feature-card .ss-holo[data-slot="2"] { transform: translateX(31%) rotate(9deg) scale(.85); } }
@media(prefers-reduced-motion:reduce) { .ss-world-frame,.ss-feature-card .ss-holo,.ss-cat-stage img { transition: none; } .ss-layer--clouds,.ss-layer--panorama,.ss-world-atmosphere::before,.ss-feature-stars::before,.ss-feature-stars::after { animation: none !important; } }
/* Sunstone · centered landscape headings, shared by account panels and sidebars. */
:root {
 --ss-cover-citadel: url(../img/worlds/citadel-day.webp);
 --ss-cover-harbor: url(../img/worlds/harbor-day.webp);
 --ss-cover-grove: url(../img/worlds/grove-day.webp);
 --ss-cover-frost: url(../img/worlds/frost-day.webp);
 --ss-cover-dunes: url(../img/worlds/dunes-day.webp);
 --ss-cover-default: var(--ss-cover-citadel);
 --ss-cover-ink: hsl(220 38% 12%);
 --ss-cover-light: hsl(40 35% 98%);
}
[data-bs-theme="dark"] {
 --ss-cover-citadel: url(../img/worlds/citadel-night.webp);
 --ss-cover-harbor: url(../img/worlds/harbor-night.webp);
 --ss-cover-grove: url(../img/worlds/grove-night.webp);
 --ss-cover-frost: url(../img/worlds/frost-night.webp);
 --ss-cover-dunes: url(../img/worlds/dunes-night.webp);
}
body[class*="ss-route-account"],body.ss-route-profile { --ss-cover-default: var(--ss-cover-grove); }
body[class*="ss-route-support"],body[class*="ss-route-help"] { --ss-cover-default: var(--ss-cover-harbor); }
body[class*="ss-route-leaderboard"],body[class*="ss-route-member"] { --ss-cover-default: var(--ss-cover-frost); }
body[class*="ss-route-store"],body[class*="ss-route-tebex"],body[class*="ss-route-credit"] { --ss-cover-default: var(--ss-cover-dunes); }
.ss-panel-cover--citadel { --ss-cover-art: var(--ss-cover-citadel); }
.ss-panel-cover--harbor { --ss-cover-art: var(--ss-cover-harbor); }
.ss-panel-cover--grove { --ss-cover-art: var(--ss-cover-grove); }
.ss-panel-cover--frost { --ss-cover-art: var(--ss-cover-frost); }
.ss-panel-cover--dunes { --ss-cover-art: var(--ss-cover-dunes); }

/* These are cover strips, not table headers: no table/form element is targeted. */
.ss-panel .ss-panel-head,.card .card-header {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: .65rem;
 min-height: 112px;
 padding: 1.5rem 1.75rem;
 text-align: center;
 border: 0;
 border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0;
 background: var(--ss-cover-ink);
 color: var(--ss-cover-light);
 --band-muted: hsl(210 25% 88%);
 --bs-secondary-color: hsl(210 25% 88%);
}
.ss-panel .ss-panel-head::before,.card .card-header::before {
 content: "";
 position: absolute;
 inset: -8px;
 z-index: -2;
 background: var(--ss-cover-art,var(--ss-cover-default)) 68% 51% / cover no-repeat;
 filter: blur(2px) saturate(.9);
 opacity: 1;
 pointer-events: none;
}
.ss-panel .ss-panel-head::after,.card .card-header::after {
 content: "";
 position: absolute;
 inset: 0;
 z-index: -1;
 background: linear-gradient(90deg, color-mix(in oklab,var(--ss-cover-ink) 65%,transparent), color-mix(in oklab,var(--ss-cover-ink) 52%,transparent) 50%, color-mix(in oklab,var(--ss-cover-ink) 65%,transparent));
 pointer-events: none;
}
.ss-panel .ss-panel-head :is(.ss-panel-title,.ss-panel-sub,.card-title),.card .card-header :is(h2,h3,.card-title) {
 max-width: 100%;
 margin: 0;
 text-align: center;
 color: inherit;
 text-shadow: 0 2px 12px color-mix(in oklab,var(--ss-cover-ink) 75%,transparent);
}
.ss-panel .ss-panel-head .ss-panel-title { font-size: clamp(1.12rem,1.02rem + .45vw,1.4rem); line-height: 1.25; }
.ss-panel .ss-panel-head :is(.ss-link-arrow,.ss-pl-link),.card .card-header > a:not(.btn) { color: inherit; justify-content: center; }
.ss-panel .ss-panel-head > :is(.nav,.nav-tabs,.d-flex) { justify-content: center; }
.ss-panel .ss-panel-head > .ss-chip { margin: 0; }
.ss-forum-side > .ss-panel:nth-child(3n+2),.ss-stack > .ss-panel:nth-child(3n+2) { --ss-cover-art: var(--ss-cover-grove); }
.ss-forum-side > .ss-panel:nth-child(3n+3),.ss-stack > .ss-panel:nth-child(3n+3) { --ss-cover-art: var(--ss-cover-harbor); }

/* Navigation headings use the same visual language as the content panels. */
.ss-pl-side-title,.ss-store-side-title,.ss-tbx-side-title {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100px;
 padding: 1.4rem 1rem !important;
 text-align: center;
 border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0;
 color: var(--ss-cover-light) !important;
 text-shadow: 0 2px 12px var(--ss-cover-ink);
}
.ss-pl-side-title::before,.ss-store-side-title::before,.ss-tbx-side-title::before { background-image: var(--ss-cover-art,var(--ss-cover-default)); background-position: 68% 51%; opacity: 1; }
.ss-pl-side-title::after,.ss-store-side-title::after,.ss-tbx-side-title::after { background: color-mix(in oklab,var(--ss-cover-ink) 58%,transparent); }
.ss-pl-nav { --ss-cover-default: var(--ss-cover-frost); }
.ss-store-catnav,.ss-tbx-nav { --ss-cover-default: var(--ss-cover-dunes); }
.ss-store-cartbox .ss-store-cartbox-head { justify-content: center; flex-direction: column; gap: .65rem; margin-bottom: 1rem; }
.ss-store-cartbox-head .ss-store-side-title { width: 100%; min-height: 88px; border-radius: 12px; }

/* Account rankings stay centered while their tabs remain a usable navigation row. */
.ss-acc-tabs .nav-tabs,.ss-pl-stats-tabs .nav-tabs { justify-content: center; }
.ss-acc-tabs .nav-link,.ss-pl-stats-tabs .nav-link { text-align: center; }

/* The page's own title is centered over its full-width landscape as well. */
.ss-page-head,.ss-page-head.is-image { color: var(--ss-cover-light); }
.ss-page-head::after,.ss-page-head.is-image::after,[data-bs-theme="dark"] .ss-page-head::after,[data-bs-theme="dark"] .ss-page-head.is-image::after {
 background: linear-gradient(0deg,color-mix(in oklab,var(--ss-cover-ink) 78%,transparent),color-mix(in oklab,var(--ss-cover-ink) 53%,transparent) 55%,color-mix(in oklab,var(--ss-cover-ink) 65%,transparent));
}
.ss-page-head-inner { text-align: center; }
.ss-page-head-row { justify-content: center; align-items: center; flex-direction: column; gap: 1.25rem; }
.ss-page-head-row > .min-w-0 { width: 100%; }
.ss-page-head .ss-page-title { margin-inline: auto; max-width: 26ch; }
.ss-page-head .ss-lead { max-width: 56rem; margin-inline: auto; }
.ss-page-head :is(.breadcrumb,.ss-page-actions,.ss-page-meta) { justify-content: center; }
.ss-page-head :is(.breadcrumb-item,.breadcrumb-item.active,.breadcrumb-item a,.breadcrumb-item::before) { color: color-mix(in oklab,var(--ss-cover-light) 88%,transparent); }
.ss-page-head .ss-page-actions { margin: 0; }

@media(max-width:767.98px) {
 .ss-panel .ss-panel-head,.card .card-header { min-height: 96px; padding: 1.25rem 1rem; gap: .55rem; }
 .ss-pl-side-title,.ss-store-side-title,.ss-tbx-side-title { min-height: 86px; padding: 1.15rem .9rem !important; }
 .ss-acc-tabs .nav-tabs,.ss-pl-stats-tabs .nav-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
 .ss-acc-tabs .nav-link,.ss-pl-stats-tabs .nav-link { flex: none; white-space: nowrap; }
 .ss-page-head-row { gap: 1rem; }
 .ss-page-head .ss-page-actions { width: 100%; }
}
/* Announcements and community share one deliberate desktop row. */
.ss-promo-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.ss-promo-row--with-discord { grid-template-columns: minmax(0, 1fr) minmax(300px, .36fr); }
.ss-promo-row > .ss-promo { min-width: 0; height: 100%; }
.ss-promo-row .ss-promo .carousel-item { height: clamp(350px, 29vw, 410px); }
.ss-promo-row .ss-promo-title { font-size: clamp(1.8rem, 1.1rem + 1.5vw, 2.5rem); max-width: 19ch; }
.ss-promo-row .ss-promo-body { max-width: 38rem; padding: 2rem 2.2rem 4.6rem; }
.ss-promo-discord { --discord-fg: hsl(215 36% 95%); --discord-muted: hsl(218 26% 80%); --discord-surface: hsl(222 41% 15%); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 1.25rem; padding: 1.65rem; min-width: 0; border-radius: var(--ss-r-xl); background: var(--discord-surface); color: var(--discord-fg); border: 1px solid color-mix(in oklab, var(--ss-discord-brand) 30%, var(--discord-surface)); box-shadow: var(--ss-shadow-card); }
.ss-promo-discord::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(../img/worlds/harbor-night.webp) 68% 50% / cover; opacity: .45; }
.ss-promo-discord::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in oklab, var(--discord-surface) 50%, transparent), var(--discord-surface) 88%); }
.ss-promo-discord-brand { display: flex; align-items: center; gap: .8rem; font: 800 1.24rem/1.2 var(--ss-display); }
.ss-promo-discord-mark { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 17px; background: var(--ss-discord-brand); box-shadow: 0 4px 0 color-mix(in oklab, var(--ss-discord-brand) 65%, var(--discord-surface)); font-size: 2rem; }
.ss-promo-discord-brand small { display: block; color: var(--discord-muted); font: 500 .79rem/1.3 var(--ss-font); margin-top: .3rem; overflow-wrap: anywhere; }
.ss-promo-discord-copy { margin-top: auto; }
.ss-promo-discord-copy h2 { color: inherit; margin: 0 0 .6rem; font: 800 clamp(1.8rem, 1.4rem + .7vw, 2.15rem)/1.08 var(--ss-display); letter-spacing: -.035em; }
.ss-promo-discord-copy p { margin: 0; color: var(--discord-muted); font-size: .9rem; line-height: 1.55; }
.ss-promo-discord-presence { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--discord-muted); }
.ss-promo-discord-presence b { color: var(--discord-fg); font-variant-numeric: tabular-nums; }
.ss-promo-discord-join { display: flex; justify-content: space-between; width: 100%; min-height: 48px; font-size: .91rem; }
@media (max-width: 991.98px) {
 .ss-promo-row--with-discord { grid-template-columns: minmax(0, 1fr); }
 .ss-promo-row .ss-promo .carousel-item { height: 360px; }
 .ss-promo-discord { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem 1.5rem; }
 .ss-promo-discord-brand { grid-column: 1; }
 .ss-promo-discord-copy { grid-column: 1; margin: 0; }
 .ss-promo-discord-copy h2 { font-size: 1.7rem; }
 .ss-promo-discord-presence { grid-column: 2; grid-row: 1; }
 .ss-promo-discord-join { grid-column: 2; grid-row: 2; width: auto; min-width: 190px; gap: 1rem; }
}
@media (max-width: 575.98px) {
 .ss-promo-row { gap: 1.1rem; }
 .ss-promo-row .ss-promo-body { padding: 1.4rem 1.4rem 4.6rem; justify-content: flex-end; }
 .ss-promo-discord { display: flex; gap: 1rem; padding: 1.4rem; }
 .ss-promo-discord-copy { margin-top: .2rem; }
 .ss-promo-discord-join { width: 100%; }
}
/* Textured block islands, clean 16px items and lightweight enchantment ambience. */
:root { --ss-voxel-light: hsl(48 100% 90%); --ss-voxel-magic: hsl(181 93% 79%); }
.ss-cat--voxel { background: radial-gradient(ellipse at 84% 36%,color-mix(in oklab,var(--tone-fg) 22%,transparent),transparent 55%),linear-gradient(145deg,color-mix(in oklab,var(--tone) 90%,var(--tone-fg)),var(--tone) 48%,var(--tone-edge)); }
.ss-cat--voxel::before { content:""; position:absolute; inset:38% 0 0; z-index:-1; opacity:.16; pointer-events:none; background:linear-gradient(90deg,transparent 94%,var(--tone-fg) 94%) 0 0/22px 22px,linear-gradient(0deg,transparent 94%,var(--tone-fg) 94%) 0 0/22px 22px; transform:perspective(230px) rotateX(46deg) scale(1.5); transform-origin:bottom; mask-image:linear-gradient(transparent,black); }
.ss-cat--voxel::after { content:""; position:absolute; width:44%; aspect-ratio:1; right:2%; top:15%; z-index:-1; opacity:.5; pointer-events:none; border:1px solid color-mix(in oklab,var(--ss-voxel-magic) 38%,transparent); background:radial-gradient(closest-side,color-mix(in oklab,var(--ss-voxel-magic) 22%,transparent),transparent); box-shadow:0 0 0 12px color-mix(in oklab,var(--tone-fg) 3%,transparent),0 0 0 25px color-mix(in oklab,var(--tone-fg) 2%,transparent); transform:rotate(45deg); }
.ss-cat--voxel .ss-cat-stage--world { width:clamp(140px,12vw,178px); margin:0 -.5rem 0 -.3rem; align-self:center; }
.ss-cat--voxel:not(.ss-cat--xl) { grid-template-rows:minmax(0,1fr) auto; }
.ss-cat--voxel:not(.ss-cat--xl) .ss-cat-stage--world { margin:0 -.5rem 0 -.3rem; align-self:center; height:100%; max-height:144px; min-height:0; }
.ss-cat--voxel .ss-cat-stage--world::before,.ss-cat--voxel .ss-cat-stage--world::after { display:none; }
.ss-cat--voxel .ss-cat-stage--world img { display:block; position:relative; left:auto; bottom:auto; width:100%; max-width:none; aspect-ratio:1; object-fit:contain; transform:none; filter:drop-shadow(0 14px 7px color-mix(in oklab,var(--tone-edge) 60%,transparent)); }
.ss-cat--voxel:not(.ss-cat--xl) .ss-cat-stage--world img { width:100%; height:100%; aspect-ratio:auto; }
.ss-cat--voxel:hover .ss-cat-stage--world img { transform:translateY(-4px) rotate(-2deg); }
.ss-cat--voxel.ss-cat--xl .ss-cat-stage--world { width:min(100%,345px); justify-self:end; align-self:center; }
.ss-cat--voxel.ss-cat--xl::after { top:28%; right:7%; width:37%; }
.ss-cat--voxel:not(.ss-cat--xl) .ss-cat-head { max-width:12rem; }
.ss-cat--voxel .ss-cat-head,.ss-cat--voxel .ss-cat-list,.ss-cat--voxel .ss-cat-foot { z-index:2; }
.ss-voxel-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.ss-voxel-atmosphere::before,.ss-voxel-atmosphere::after { content:""; position:absolute; width:3px; height:3px; top:38%; right:18%; color:var(--ss-voxel-light); background:currentColor; opacity:.6; box-shadow:-53px 29px,-22px -34px,24px -18px,46px 37px,-64px -12px,11px 69px,58px 5px; }
.ss-voxel-atmosphere::after { width:2px; height:2px; top:52%; right:32%; color:var(--ss-voxel-magic); box-shadow:42px 15px,-25px 22px,65px -19px,-50px -37px,3px -56px; opacity:.45; }
.ss-motion .ss-cat--voxel .ss-cat-stage--world img { animation:ss-voxel-float 5.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * -.75s); }
.ss-motion .ss-cat--voxel::after { animation:ss-voxel-aura 4.8s ease-in-out infinite alternate; }
.ss-motion .ss-voxel-atmosphere::before { animation:ss-voxel-motes 5s ease-in-out infinite alternate; }
.ss-motion .ss-voxel-atmosphere::after { animation:ss-voxel-motes 7s -2s ease-in-out infinite alternate-reverse; }
@keyframes ss-voxel-float { 0%,100% { translate:0 3px; } 50% { translate:0 -5px; } }
@keyframes ss-voxel-aura { from { opacity:.25; scale:.94; } to { opacity:.65; scale:1.05; } }
@keyframes ss-voxel-motes { from { translate:-3px 8px; opacity:.16; } to { translate:5px -12px; opacity:.85; } }
.ss-voxel-paused::after,.ss-voxel-paused .ss-cat-stage--world img,.ss-voxel-paused .ss-voxel-atmosphere::before,.ss-voxel-paused .ss-voxel-atmosphere::after,
.ss-tab-hidden .ss-cat--voxel::after,.ss-tab-hidden .ss-cat-stage--world img,.ss-tab-hidden .ss-voxel-atmosphere::before,.ss-tab-hidden .ss-voxel-atmosphere::after { animation-play-state:paused !important; }
@media(max-width:1199.98px) { .ss-cat--voxel .ss-cat-stage--world { width:140px; } .ss-cat--voxel.ss-cat--xl .ss-cat-stage--world { width:min(100%,260px); } }
@media(max-width:575.98px) { .ss-cat--voxel .ss-cat-stage--world { width:132px; margin-top:1.4rem; } .ss-cat--voxel.ss-cat--xl .ss-cat-stage--world { width:min(100%,220px); } }
@media(prefers-reduced-motion:reduce) { .ss-cat--voxel::after,.ss-cat--voxel .ss-cat-stage--world img,.ss-voxel-atmosphere::before,.ss-voxel-atmosphere::after { animation:none !important; } }
/* Inline brand vectors also work from file://: no remote font or mask resource. */
.ss-discord-icon { display: inline-block; width: 1.22em; height: 1em; flex: none; vertical-align: -.1em; fill: currentColor; overflow: visible; }
.ss-discord-icon path { fill: currentColor; }
.ss-ico > .ss-discord-icon,.ss-topbar-link > .ss-discord-icon,.ss-nav-discord-icon > .ss-discord-icon,.ss-promo-discord-mark > .ss-discord-icon { position: relative; }
.ss-promo-discord-mark > .ss-discord-icon { width: 1.3em; height: 1em; }
.ss-support-link-icon > .ss-discord-icon { width: 1.35em; height: 1em; }
.ss-footer-socials .ss-discord-icon { font-size: 1.15rem; }

/* A calm support destination: copy and controls get the whole card. */
.ss-hc-cta.ss-help-card { min-height: 310px; height: auto; padding: clamp(1.75rem, 2vw, 2.4rem); gap: 1.65rem; align-items: center; justify-content: center; text-align: center; }
.ss-hc-cta .txt { width: 100%; display: grid; gap: .75rem; justify-items: center; }
.ss-hc-cta.ss-help-card h3 { font-size: clamp(1.6rem, 1.2rem + .65vw, 1.95rem); margin: 0; max-width: 16ch; }
.ss-hc-cta.ss-help-card p { margin: 0; max-width: 28ch; line-height: 1.65; }
.ss-hc-cta .ss-hc-cta-links { display: grid; grid-template-columns: minmax(0,1fr); gap: .8rem; margin-top: 0; width: 100%; max-width: 280px; }
.ss-hc-cta .ss-hc-cta-links .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; text-align: center; }
.ss-hc-cta .ss-hc-cta-links .btn-frame { background: color-mix(in oklab,var(--ss-bone) 10%,transparent); border: 1px solid color-mix(in oklab,var(--ss-bone) 24%,transparent); }
.ss-panel .ss-hc-side-help { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 1.75rem; }
.ss-hc-side-help > .min-w-0 { display: grid; justify-items: center; width: 100%; gap: .65rem; }
.ss-hc-side-help b { font: 800 1.2rem/1.25 var(--ss-display); }
.ss-hc-side-help p { max-width: 30ch; margin: 0; line-height: 1.65; }
.ss-hc-side-help .btn { justify-content: center; min-height: 46px; min-width: min(100%,190px); margin-top: .25rem; }
@media(max-width:575.98px) { .ss-hc-cta.ss-help-card { min-height: 0; padding: 1.75rem 1.35rem; gap: 1.4rem; } .ss-hc-side-help { padding: 1.5rem; } }
/* Generated help icon library: the icon leads each topic, the copy keeps its own column. */
.ss-hc .ss-hc-topics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.ss-hc .ss-hc-topics .ss-hc-topic--icon { display:grid; grid-template-columns:104px minmax(0,1fr) 32px; grid-template-rows:auto auto; align-content:center; align-items:center; column-gap:1.25rem; row-gap:.55rem; min-height:176px; padding:1.5rem; }
.ss-hc .ss-hc-topics .ss-hc-topic--icon .ss-hc-library-icon { position:relative; inset:auto; grid-column:1; grid-row:1/3; width:104px; height:104px; object-fit:contain; align-self:center; margin:0; filter:drop-shadow(0 10px 8px color-mix(in oklab,var(--tone-edge) 28%,transparent)); transform:none; }
.ss-hc .ss-hc-topic--icon .ss-tile-name { grid-column:2; grid-row:1; align-self:end; font-size:clamp(1.25rem,1.05rem + .4vw,1.6rem); }
.ss-hc .ss-hc-topic--icon .ss-tile-desc { grid-column:2; grid-row:2; align-self:start; max-width:none; margin:0; font-size:.9rem; }
.ss-hc .ss-hc-topic--icon .ss-tile-foot { grid-column:3; grid-row:1/3; margin:0; align-self:center; }
.ss-hc .ss-hc-topic--icon:hover .ss-hc-library-icon { transform:translateY(-3px); }
.ss-hc .ss-hc-ico.ss-hc-ico--art { width:58px; height:58px; background:transparent; border-radius:0; }
.ss-hc .ss-hc-ico--art img { display:block; width:52px; height:52px; object-fit:contain; }

/* Image-backed heading surfaces own their foreground; nested white controls do not inherit it. */
.ss-page-head .breadcrumb { display:inline-flex; flex-wrap:wrap; justify-content:center; padding:.55rem .95rem; background:hsl(220 35% 12% / .72); border:1px solid hsl(210 30% 95% / .2); box-shadow:0 3px 10px hsl(220 35% 8% / .12); }
.ss-page-head .breadcrumb :is(.breadcrumb-item,.breadcrumb-item.active,.breadcrumb-item a),.ss-page-head .breadcrumb .breadcrumb-item::before { color:hsl(210 30% 98%); text-shadow:none; }
.ss-hc-head .ss-page-head .ss-hc-search-label { color:var(--ss-cover-light); text-shadow:0 2px 8px hsl(220 35% 8% / .45); }
.ss-hc-head .ss-page-head .ss-page-head-row { flex-wrap:wrap; }
.ss-hc-head .ss-page-head .ss-page-actions { flex:0 1 auto; width:min(100%,44rem); }
.ss-hc-head .ss-page-head .ss-hc-search-box--hero { color:var(--ss-ink); }
.ss-hc-head .ss-page-head .ss-hc-search-box--hero .form-control { color:var(--ss-ink); }
.ss-page-head .ss-page-actions > a:not(.btn),.ss-page-head .ss-hc-meta > span { color:var(--ss-cover-light); }
.ss-panel .ss-panel-head a:not(.btn):not(.ss-chip),.card .card-header a:not(.btn):not(.ss-chip) { color:var(--ss-cover-light); border-bottom-color:color-mix(in oklab,var(--ss-cover-light) 55%,transparent); }
.ss-panel .ss-panel-head a:not(.btn):not(.ss-chip):hover,.card .card-header a:not(.btn):not(.ss-chip):hover { color:var(--ss-cover-light); border-bottom-color:var(--ss-cover-light); }

/* The help callout uses a clear white/black pair in the light theme. */
[data-bs-theme="light"] .ss-hc .ss-hc-cta.ss-help-card { background:var(--band-card); color:var(--band-fg); border:1px solid var(--band-card-line); }
[data-bs-theme="light"] .ss-hc .ss-hc-cta.ss-help-card::before,[data-bs-theme="light"] .ss-hc .ss-hc-cta.ss-help-card::after { display:none; }
[data-bs-theme="light"] .ss-hc .ss-hc-cta.ss-help-card :is(h3,p) { color:var(--band-fg); }
.ss-hc .ss-hc-cta.ss-help-card .btn-frame { --bs-btn-color:var(--band-fg); --bs-btn-bg:var(--band-card); --bs-btn-hover-color:var(--band-fg); --bs-btn-hover-bg:var(--band-sunk); background:var(--band-card); color:var(--band-fg); border:1px solid var(--band-line); }
.ss-hc .ss-hc-cta.ss-help-card .btn-frame:hover { color:var(--band-fg); background:var(--band-sunk); }
[data-bs-theme="dark"] .ss-hc .ss-hc-cta.ss-help-card .btn-frame { --band-fg:var(--ss-bone); --band-card:hsl(220 30% 16%); --band-sunk:hsl(220 30% 20%); color:var(--ss-bone); }

/* Balance plate is an actual card sitting on the hero, with its own readable foreground. */
.ss-page-head .ss-wallet-plate { color:var(--band-fg); background:var(--band-card); text-align:left; }
.ss-page-head .ss-wallet-plate :is(.ss-wallet-plate-value,.ss-stat-value) { color:var(--band-fg); text-shadow:none; }
.ss-page-head .ss-wallet-plate .ss-stat-label { color:var(--band-muted); }
.ss-page-head .ss-wallet-plate .ss-wallet-plate-link { color:var(--ss-accent-ink); }
.ss-wallet-topup > .ss-wallet-promo { margin:0; border-radius:0; border-top:1px solid color-mix(in oklab,var(--ss-accent-edge) 18%,transparent); }
.ss-wallet-topup > .ss-wallet-promo + .ss-wallet-promo { border-top:1px solid color-mix(in oklab,var(--ss-accent-edge) 20%,transparent); }

@media(max-width:767.98px) { .ss-hc .ss-hc-topics { grid-template-columns:minmax(0,1fr); } .ss-hc .ss-hc-topics .ss-hc-topic--icon { min-height:154px; grid-template-columns:86px minmax(0,1fr) 30px; padding:1.25rem; column-gap:1rem; } .ss-hc .ss-hc-topics .ss-hc-topic--icon .ss-hc-library-icon { width:86px; height:86px; } }
@media(max-width:399.98px) { .ss-hc .ss-hc-topics .ss-hc-topic--icon { grid-template-columns:70px minmax(0,1fr); padding:1.1rem; } .ss-hc .ss-hc-topics .ss-hc-topic--icon .ss-hc-library-icon { width:70px; height:70px; } .ss-hc .ss-hc-topic--icon .ss-tile-foot { display:none; } }
/* Sunstone lounge: a live roster, with its own readable surface in either page theme. */
.ss-discord-board { --ss-dc-bg:hsl(224 32% 13%); --ss-dc-raised:hsl(224 26% 18%); --ss-dc-fg:hsl(210 40% 97%); --ss-dc-muted:hsl(217 20% 73%); --ss-dc-line:hsl(223 22% 25%); --ss-dc-away:hsl(42 92% 62%); --ss-dc-busy:hsl(353 78% 67%); display:flex; flex-direction:column; min-height:100%; overflow:hidden; border:1px solid var(--ss-dc-line); border-radius:var(--ss-r-xl); background:var(--ss-dc-bg); color:var(--ss-dc-fg); box-shadow:var(--ss-shadow-card); }
.ss-dc-board-head { display:flex; align-items:center; gap:.75rem; padding:1.4rem 1.35rem; border-bottom:1px solid var(--ss-dc-line); background:linear-gradient(135deg,color-mix(in oklab,var(--ss-discord-brand) 14%,var(--ss-dc-bg)),var(--ss-dc-bg)); }
.ss-dc-board-symbol { display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:13px; background:var(--ss-discord-brand); color:var(--ss-dc-fg); font-size:1.65rem; box-shadow:0 4px 0 color-mix(in oklab,var(--ss-discord-brand) 52%,var(--ss-dc-bg)); }
.ss-dc-board-name { min-width:0; flex:1; }
.ss-dc-board-name > span { color:var(--ss-dc-muted); font:600 .74rem/1.2 var(--ss-font); }
.ss-dc-board-name h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; font:800 1.08rem/1.25 var(--ss-display); margin:.2rem 0 0; }
.ss-dc-board-count { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.3rem; max-width:95px; font-variant-numeric:tabular-nums; }
.ss-dc-board-count b { font:800 .97rem/1 var(--ss-display); }
.ss-dc-board-count small { width:100%; text-align:right; color:var(--ss-dc-muted); font-size:.67rem; }
.ss-dc-board-body { flex:1; padding:1.25rem 1.35rem; }
.ss-dc-board-label { margin:0 0 .9rem; font:700 .82rem/1.4 var(--ss-font); color:var(--ss-dc-muted); }
.ss-dc-board-members { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:0; padding:0; list-style:none; }
.ss-dc-board-member { display:flex; align-items:center; min-width:0; gap:.55rem; padding:.55rem; border:1px solid var(--ss-dc-line); border-radius:12px; background:var(--ss-dc-raised); }
.ss-dc-member-avatar { position:relative; display:grid; place-items:center; flex:none; width:34px; height:34px; overflow:visible; border-radius:10px; background:color-mix(in oklab,var(--ss-discord-brand) 35%,var(--ss-dc-raised)); color:var(--ss-dc-fg); font:800 .9rem/1 var(--ss-display); }
.ss-dc-member-avatar img { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.ss-dc-member-avatar::after { content:""; position:absolute; z-index:1; width:8px; height:8px; right:-2px; bottom:-2px; border-radius:50%; border:2px solid var(--ss-dc-raised); background:var(--ss-live); box-sizing:content-box; }
.ss-dc-board-member[data-status="idle"] .ss-dc-member-avatar::after { background:var(--ss-dc-away); }
.ss-dc-board-member[data-status="dnd"] .ss-dc-member-avatar::after { background:var(--ss-dc-busy); }
.ss-dc-member-copy { min-width:0; }
.ss-dc-member-copy b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 .78rem/1.25 var(--ss-font); color:var(--ss-dc-fg); }
.ss-dc-member-copy small { display:block; margin-top:.17rem; color:var(--ss-dc-muted); font:400 .67rem/1.15 var(--ss-font); }
.ss-dc-board-status { margin:.9rem 0 0; color:var(--ss-dc-muted); font-size:.8rem; line-height:1.6; }
.ss-discord-board:is(.is-idle,.is-unavailable,.is-empty) .ss-dc-board-status { display:grid; place-items:center; min-height:140px; max-width:26ch; margin:0 auto; text-align:center; }
.ss-discord-board:is(.is-idle,.is-unavailable,.is-empty) .ss-dc-board-label { text-align:center; }
.ss-dc-board-skeleton { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.ss-discord-board.is-loading .ss-dc-board-skeleton { display:grid; }
.ss-dc-board-skeleton span { height:58px; border:1px solid var(--ss-dc-line); border-radius:12px; background:linear-gradient(90deg,var(--ss-dc-raised),color-mix(in oklab,var(--ss-dc-fg) 7%,var(--ss-dc-raised))); }
.ss-dc-board-join { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:0 1.35rem 1.35rem; min-height:48px; padding:.85rem 1rem; border-radius:12px; background:var(--ss-discord-brand); color:var(--ss-dc-fg); font:800 .91rem/1.2 var(--ss-display); box-shadow:0 4px 0 color-mix(in oklab,var(--ss-discord-brand) 56%,var(--ss-dc-bg)); transition:transform .2s,background .2s; }
.ss-dc-board-join:hover { color:var(--ss-dc-fg); background:color-mix(in oklab,var(--ss-discord-brand) 88%,var(--ss-dc-fg)); transform:translateY(-2px); }
.ss-dc-board-join:focus-visible { outline:2px solid var(--ss-dc-fg); outline-offset:4px; }
.ss-discord-board [hidden] { display:none !important; }
@media(max-width:399.98px) { .ss-dc-board-head,.ss-dc-board-body { padding:1.1rem; } .ss-dc-board-members { gap:.4rem; } .ss-dc-board-member { gap:.4rem; padding:.45rem; } .ss-dc-member-avatar { width:29px; height:29px; } .ss-dc-board-count { max-width:74px; } .ss-dc-board-join { margin:0 1.1rem 1.1rem; } }
@media(prefers-reduced-motion:reduce) { .ss-dc-board-join { transition:none; } }
/* Section entrances share the same art library, with a separate community gathering place. */
.ss-section-head {
 --ss-section-rule: color-mix(in oklab,var(--ss-accent) 25%,var(--band-line));
 --section-art: url(../img/icons/mc-help-guides.png);
 display: grid;
 grid-template-columns: 76px minmax(0,1fr) auto;
 align-items: center;
 column-gap: 1.25rem;
 row-gap: 1rem;
 margin-bottom: 2rem;
 padding-bottom: 1.6rem;
 border-bottom: 1px solid var(--ss-section-rule);
}
.ss-section-head::before {
 content: "";
 grid-column: 1;
 grid-row: 1;
 display: block;
 width: 76px;
 height: 76px;
 border-radius: 21px;
 background: var(--section-art) center / 68px 68px no-repeat,color-mix(in oklab,var(--ss-accent) 7%,var(--band-card));
 box-shadow: inset 0 0 0 1px color-mix(in oklab,var(--ss-accent) 14%,var(--band-card-line)),0 7px 0 -3px var(--ss-ledge);
}
.ss-section-head > div:first-child { grid-column: 2; min-width: 0; }
.ss-section-head > :is(.ss-link-arrow,.ss-head-aside) { grid-column: 3; align-self: end; margin-bottom: .15rem; }
.ss-section-head .ss-section-kicker { display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; color: var(--band-muted); font: 650 .82rem/1.3 var(--ss-font); }
.ss-section-kicker::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 2px; background: var(--ss-accent); box-shadow: 8px -3px 0 -1px color-mix(in oklab,var(--ss-accent) 45%,transparent); margin-right: .25rem; }
.ss-section-head .ss-title { font-size: clamp(2rem,1.35rem + 1.8vw,3.25rem); line-height: 1.07; }
.ss-section-head .ss-lead { max-width: 48rem; margin: .75rem 0 0; font-size: clamp(.95rem,.86rem + .18vw,1.06rem); line-height: 1.65; text-wrap: pretty; }
.ss-section-head > .ss-link-arrow { padding: .75rem .9rem; border-radius: 12px; background: var(--band-card); border: 1px solid var(--band-card-line); color: var(--band-fg); font-size: .87rem; }
.ss-section-head--store { --section-art: url(../img/icons/mc-help-store.png); }
.ss-section-head--modes { --section-art: url(../img/icons/mc-help-play.png); }
.ss-section-head--join { --section-art: url(../img/icons/mc-help-start.png); }
.ss-section-head--community { --section-art: url(../img/icons/mc-help-support.png); }
.ss-section-head--center { display: flex; flex-direction: column; gap: 1.2rem; text-align: center; border: 0; padding-bottom: 0; }
.ss-section-head--center::before { flex: none; }
.ss-section-head--center > div:first-child { width: min(100%,52rem); }
.ss-section-head--center .ss-section-kicker { justify-content: center; }
.ss-section-head--center .ss-lead { margin-inline: auto; }

/* A village square for supporters, recent activity and the live Discord room. */
.ss-community-section {
 --community-ink: hsl(218 36% 9%);
 --band-bg: hsl(218 36% 9%);
 --band-card: hsl(217 27% 15%);
 --band-sunk: hsl(219 31% 11%);
 --band-fg: hsl(210 30% 96%);
 --band-muted: hsl(213 20% 74%);
 --band-line: hsl(212 25% 78% / .16);
 --band-card-line: hsl(212 25% 78% / .12);
 --ss-ledge: hsl(218 42% 5%);
 position: relative;
 isolation: isolate;
 overflow: hidden;
 padding-block: clamp(3.5rem,6vw,6.5rem);
 color: var(--band-fg);
 background: var(--community-ink);
}
.ss-community-section::before { content: ""; position: absolute; inset: 0 0 auto; height: min(680px,80%); z-index: -2; background: url(../img/worlds/grove-night.webp) center 42% / cover no-repeat; opacity: .34; }
.ss-community-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,color-mix(in oklab,var(--community-ink) 22%,transparent),var(--community-ink) 80%),radial-gradient(ellipse at 50% 0%,color-mix(in oklab,var(--ss-accent) 12%,transparent),transparent 58%); }
.ss-community-section .ss-section-head { margin-bottom: 2.75rem; }
.ss-community-section .ss-section-head::before { width: 88px; height: 88px; background-size: 78px 78px; background-color: color-mix(in oklab,var(--band-card) 78%,transparent); border-radius: 26px; box-shadow: inset 0 0 0 1px var(--band-line),0 10px 34px color-mix(in oklab,var(--community-ink) 75%,transparent); }
.ss-community-section .ss-section-head .ss-title { color: var(--band-fg); font-size: clamp(2.4rem,1.4rem + 3vw,4.2rem); }
.ss-community-section .ss-section-head .ss-lead { max-width: 46rem; color: var(--band-muted); }
.ss-community-grid { display: grid; grid-template-columns: repeat(var(--community-cols,3),minmax(0,1fr)); gap: 1.4rem; margin: 0; }
.ss-community-grid > [class*="col-"] { width: auto; max-width: none; padding: 0; margin: 0; min-width: 0; }
.ss-community-grid[data-cols="1"] { max-width: 780px; margin-inline: auto; }
.ss-community-section .ss-panel { border: 1px solid var(--band-card-line); box-shadow: 0 10px 32px color-mix(in oklab,var(--community-ink) 70%,transparent); }
.ss-community-section .ss-panel .ss-panel-head { min-height: 92px; padding: 1.4rem 1.2rem; background: transparent; border-bottom: 1px solid var(--band-card-line); border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0; color: var(--band-fg); }
.ss-community-section .ss-panel .ss-panel-head::before,.ss-community-section .ss-panel .ss-panel-head::after { display: none; }
.ss-community-section .ss-panel-head .ss-panel-title { font-size: 1.2rem; text-shadow: none; }
.ss-community-section .ss-panel-body { padding: 1.2rem; }
.ss-community-section .ss-rank-list .ss-list-item { border: 1px solid var(--band-card-line); }
.ss-community-section .ss-feed .ss-list-item { border-top-color: var(--band-card-line); }
.ss-community-section .ss-seg { margin-bottom: 1.25rem; }
.ss-community-section .ss-seg .nav-link:not(.active) { color: var(--band-muted); }
.ss-community-section .ss-podium .p > :is(a,span):not(.amt):not(.block) { color: var(--band-fg); }
.ss-community-section .ss-panel-foot { border-top-color: var(--band-card-line); }
.ss-community-section .ss-panel-foot .ss-link-arrow { color: var(--band-fg); }
@media(max-width:1199.98px) {
 .ss-community-grid[data-cols="3"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .ss-community-grid[data-cols="3"] > :last-child { grid-column: 1 / -1; }
 .ss-section-head { grid-template-columns: 68px minmax(0,1fr); column-gap: 1rem; }
 .ss-section-head::before { width: 68px; height: 68px; background-size: 60px 60px; }
 .ss-section-head > :is(.ss-link-arrow,.ss-head-aside) { grid-column: 2; justify-self: start; }
}
@media(max-width:767.98px) {
 .ss-section-head { margin-bottom: 1.5rem; padding-bottom: 1.35rem; }
 .ss-section-head .ss-lead { font-size: .95rem; }
 .ss-section-head > .ss-head-aside { width: 100%; }
 .ss-section-head .ss-filter { justify-content: flex-start; }
 .ss-community-grid,.ss-community-grid[data-cols="3"] { grid-template-columns: minmax(0,1fr); }
 .ss-community-grid[data-cols="3"] > :last-child { grid-column: auto; }
 .ss-community-section .ss-section-head { margin-bottom: 2rem; }
}
@media(max-width:479.98px) {
 .ss-section-head { grid-template-columns: 52px minmax(0,1fr); column-gap: .85rem; }
 .ss-section-head::before { width: 52px; height: 58px; border-radius: 15px; background-size: 51px 51px; }
 .ss-section-head .ss-title { font-size: clamp(1.7rem,6.7vw,2.15rem); }
 .ss-section-head .ss-section-kicker { font-size: .73rem; }
 .ss-section-head > :is(.ss-link-arrow,.ss-head-aside) { grid-column: 1 / -1; }
 .ss-community-section .ss-section-head .ss-title { font-size: clamp(2.1rem,8vw,3rem); }
}
/* ImageGen worlds sit inside a living enchantment field, with no JS animation loop. */
.ss-cat--voxel { border:1px solid color-mix(in oklab,var(--tone-fg) 18%,transparent); }
.ss-cat--voxel::before { inset:25% -8% -12%; opacity:.12; background-size:28px 28px; transition:opacity .35s,translate .55s var(--ss-spring); }
.ss-cat--voxel::after { width:62%; right:-5%; top:4%; border:0; border-radius:50%; transform:none; box-shadow:none; background:radial-gradient(closest-side,color-mix(in oklab,var(--ss-voxel-magic) 36%,transparent),transparent 80%),repeating-conic-gradient(from 18deg,transparent 0deg 21deg,color-mix(in oklab,var(--tone-fg) 13%,transparent) 23deg 27deg,transparent 29deg 49deg); mask-image:radial-gradient(black 15%,transparent 72%); }
.ss-cat--voxel.ss-cat--xl::after { width:58%; right:-1%; top:21%; }
.ss-cat--voxel .ss-cat-stage--world { z-index:1; }
.ss-cat--voxel .ss-cat-stage--world img { filter:drop-shadow(0 16px 8px color-mix(in oklab,var(--tone-edge) 68%,transparent)) drop-shadow(0 0 12px color-mix(in oklab,var(--ss-voxel-magic) 14%,transparent)); }
.ss-cat--voxel:hover::before { opacity:.24; translate:0 -6px; }
.ss-cat--voxel:hover .ss-cat-stage--world img { filter:drop-shadow(0 22px 12px color-mix(in oklab,var(--tone-edge) 72%,transparent)) drop-shadow(0 0 20px color-mix(in oklab,var(--ss-voxel-magic) 30%,transparent)); }
.ss-cat--voxel .ss-cat-foot { border-top:1px solid color-mix(in oklab,var(--tone-fg) 16%,transparent); background:color-mix(in oklab,var(--tone-edge) 34%,transparent); }
.ss-cat--voxel .ss-cat-list > span { background:color-mix(in oklab,var(--tone-edge) 38%,transparent); border:1px solid color-mix(in oklab,var(--tone-fg) 9%,transparent); }
.ss-cat--voxel .ss-voxel-atmosphere { inset:0; opacity:.85; }
.ss-product-stage--world { width:70%; aspect-ratio:1; margin-bottom:2%; }
.ss-product-stage--world :is(.ss-pedestal,.ss-cat-fx),.ss-holo-stage--world .ss-pedestal { display:none; }
.ss-product-stage--world img,.ss-holo-stage--world img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; transform:none; }
.ss-product:hover .ss-product-stage--world img { transform:translateY(-6px) rotate(-3deg); }
.ss-holo-stage--world { min-height:0; align-items:center; }
.ss-cat-stage--world img,.ss-product-stage--world img,.ss-holo-stage--world img,.ss-store-pd-media img[data-src*="/voxel/generated/"],.ss-hc-library-icon,.ss-hc-ico--art img { image-rendering:auto; }
.ss-voxel-atmosphere::before { width:4px; height:4px; box-shadow:-60px 36px,-30px -32px,26px -18px,58px 44px,-84px -10px,15px 73px,73px 8px,-16px 56px; }
.ss-voxel-atmosphere::after { width:3px; height:3px; box-shadow:46px 20px,-28px 27px,82px -24px,-60px -44px,4px -64px,24px 62px; }
.ss-motion .ss-cat--voxel::after { animation:ss-enchantment-pulse 7s ease-in-out infinite alternate; }
@keyframes ss-enchantment-pulse { 0% { opacity:.3; rotate:-9deg; scale:.95; } 100% { opacity:.75; rotate:12deg; scale:1.1; } }
.ss-voxel-paused::after,.ss-tab-hidden .ss-cat--voxel::after { animation-play-state:paused !important; }
@media(prefers-reduced-motion:reduce) { .ss-cat--voxel::after { animation:none !important; } .ss-cat--voxel::before { transition:none; } }
/* Viewport scenery stays in place while the clipped heading scrolls past it. */
.ss-hero,.ss-page-head { clip-path: inset(0); }
.ss-hero > .ss-scene-fixed,.ss-page-head > .ss-scene-fixed { position: fixed; inset: 0; height: 100vh; height: 100svh; pointer-events: none; }
.ss-scene-fixed .ss-layer { transform: none; }
.ss-motion .ss-scene-fixed .ss-layer--panorama { animation: none; }

/* Equal side columns keep the support labels on the card's central axis. */
.ss-support-hub { text-align: center; padding: 1.4rem; }
.ss-support-hub .ss-support-visual { height: 124px; margin-bottom: 1rem; }
.ss-support-visual img { width: 124px; height: 124px; object-fit: contain; filter: drop-shadow(0 9px 9px color-mix(in oklab,var(--ss-accent-edge) 20%,transparent)); }
.ss-support-copy { max-width: 28rem; margin-inline: auto; }
.ss-support-copy p { line-height: 1.6; text-wrap: pretty; }
.ss-support-hub .ss-support-links a { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: .5rem; padding: .8rem; }
.ss-support-hub .ss-support-link-icon { width: 44px; height: 44px; font-size: 1.4rem; }
.ss-support-hub .ss-support-links a > span:nth-child(2) { text-align: center; }
.ss-support-hub .ss-support-links a > i { margin: 0; justify-self: center; }
.ss-support-hub .ss-support-links a:hover { transform: translateY(-2px); }

/* Align the larger artwork with the headline, below its small eyebrow. */
.ss-section-head:not(.ss-section-head--center) { grid-template-columns: 96px minmax(0,1fr) auto; align-items: start; }
.ss-section-head:not(.ss-section-head--center)::before { width: 96px; height: 96px; background-size: 88px 88px; margin-top: 1.25rem; align-self: start; }
.ss-section-head:not(.ss-section-head--center):not(:has(.ss-section-kicker))::before { margin-top: 0; }
.ss-home-news { overflow: hidden; }
.ss-blog-viewport { scroll-margin-top: 110px; }

/* Phosphor icons inherit their colored tile's ink instead of menu-muted ink. */
.ss-menu .ss-drop-item .ss-ico { color: var(--tone-fg); }
.ss-menu .ss-drop-item .ss-ico :is(i,svg) { color: inherit; }
.ss-menu .ss-drop-item :is(.ss-tone-5,.ss-tone-tangerine) { --tone-fg: #fff; }

/* A compact account pocket: identity, balance, then account destinations. */
button.ss-user { border: 0; background: transparent; font: inherit; text-align: left; }
.ss-user-menu { width: min(320px,calc(100vw - 32px)); min-width: 0; padding: .65rem; border-radius: 20px; }
.ss-user-menu-identity { display: flex; align-items: center; gap: .85rem; padding: 1.1rem; margin-bottom: .7rem; border-radius: 14px; color: #fff; background: linear-gradient(90deg,hsl(218 36% 9% / .94),hsl(218 36% 9% / .75)),url(../img/worlds/grove-night.webp) center / cover; }
.ss-user-menu-identity .ss-avatar { width: 54px; height: 54px; border-radius: 13px; flex: none; box-shadow: 0 0 0 3px hsl(0 0% 100% / .15); }
.ss-user-menu-identity > div { min-width: 0; }
.ss-user-menu-identity small { display: block; margin-bottom: .15rem; color: hsl(210 20% 80%); font-size: .73rem; }
.ss-user-menu-identity b { display: block; font: 800 1.2rem/1.3 var(--ss-display); overflow-wrap: anywhere; }
.ss-user-menu .ss-user-role { display: inline-flex; margin-top: .35rem; padding: .2rem .5rem; border: 1px solid hsl(147 64% 64% / .45); border-radius: 6px; background: hsl(147 60% 28% / .3); color: hsl(147 70% 85%); font: 700 .72rem/1.3 var(--ss-font); }
.ss-user-menu .ss-balance { margin: 0 0 .6rem; padding: .9rem 1rem; box-shadow: none; color: var(--ss-on-accent); }
.ss-user-menu .ss-balance-value { margin-top: .18rem; }
.ss-user-menu .ss-balance-add { padding: .6rem .65rem; }
.ss-user-menu .dropdown-item { min-height: 46px; gap: .7rem; border-radius: 10px; padding: .45rem .65rem; color: var(--band-fg); font-weight: 650; }
.ss-user-menu .dropdown-item i[class*="ph-"] { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--band-sunk); color: var(--band-fg); }
.ss-user-menu .dropdown-item:is(:hover,:focus) { background: var(--band-sunk); color: var(--band-fg); }
.ss-user-menu .dropdown-item:is(:hover,:focus) i { color: var(--ss-accent-ink); background: color-mix(in oklab,var(--ss-accent) 15%,var(--band-card)); }
.ss-user-menu .dropdown-divider { margin: .45rem .3rem; border-color: var(--band-card-line); }
.ss-user-menu .dropdown-item.text-danger,.ss-user-menu .dropdown-item.text-danger i { color: var(--ss-danger) !important; }

/* Role and wallet ink must follow the actual card surface in both modes. */
.ss-account-card .ss-account-name { color: var(--band-fg) !important; }
.ss-account-card .ss-account-roles { justify-content: flex-start; margin-top: .5rem; }
.ss-account-card .ss-account-role { --ss-role-accent: var(--ss-accent); display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border-radius: 8px; border: 1px solid color-mix(in oklab,var(--ss-role-accent) 48%,var(--band-card)); background: color-mix(in oklab,var(--ss-role-accent) 14%,var(--band-card)) !important; color: var(--band-fg) !important; font: 750 .78rem/1.3 var(--ss-font); }
.ss-account-card .ss-account-role::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 2px; background: var(--ss-role-accent); }
.ss-account-card .ss-account-role.role__admin { --ss-role-accent: var(--ss-danger); }
.ss-account-card .ss-account-role.role__vip { --ss-role-accent: var(--ss-t-sun); }
.ss-account-card .ss-account-role.role__moderator { --ss-role-accent: var(--ss-t-sky); }
.ss-account-card .ss-account-balance,.ss-account-card .ss-account-balance:hover { color: var(--band-fg); background: var(--band-sunk); box-shadow: none; }
.ss-account-card .ss-account-balance .ss-price { color: var(--band-fg); }

@media(max-width:1199.98px) {
 .ss-section-head:not(.ss-section-head--center) { grid-template-columns: 84px minmax(0,1fr); }
 .ss-section-head:not(.ss-section-head--center)::before { width: 84px; height: 84px; background-size: 78px 78px; }
}
@media(max-width:479.98px) {
 .ss-section-head:not(.ss-section-head--center) { grid-template-columns: 68px minmax(0,1fr); column-gap: .85rem; }
 .ss-section-head:not(.ss-section-head--center)::before { width: 68px; height: 76px; background-size: 66px 66px; border-radius: 17px; }
 .ss-support-hub { padding: 1.1rem; }
 .ss-support-hub .ss-support-links a { grid-template-columns: 40px minmax(0,1fr) 40px; gap: .2rem; padding: .65rem; }
 .ss-support-hub .ss-support-link-icon { width: 40px; height: 40px; }
}
/* One sticky stack keeps the announcement bar and navigation together. */
.ss-masthead { position: sticky; top: 0; z-index: 1030; flex: none; }
.ss-masthead .ss-header { position: relative; top: auto; }
.ss-masthead .ss-topbar { position: relative; }
:root { --ss-nav-h: 132px; }
.ss-blog-viewport { scroll-margin-top: 0; }
.ss-main { scroll-margin-top: 0; }

/* Flush identity and balance faces, with the links in their own padded area. */
.ss-user-menu { padding: 0; border: 0; overflow: hidden; right: 0; left: auto; }
.ss-user-menu .ss-user-menu-identity { margin: 0; border-radius: 0; }
.ss-user-menu .ss-balance { margin: 0; border-radius: 0; }
.ss-user-menu-links { padding: .5rem; }
.ss-user-menu .ss-balance:hover { transform: none; }

@media print { .ss-masthead { display: none !important; } }