html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
color: #ff4081;
height: 100%;
}
:root {
--bg: #050505;
--surface: #0a0a0a;
--accent: #00e5ff;
--danger: #ff0055;
--text: #c8d6df;
--dim: #4a5a62;
--border: #1a1a1a;
/* canvas theme tokens — read by JS */
--canvas-bg: #000000;
--canvas-fog-rgb: 0,0,0;
--canvas-grid: rgba(0,229,255,0.05);
--canvas-boundary: rgba(0,229,255,0.22);
--minimap-bg: rgba(5,5,5,0.65);
/* complementary hue — set by JS on load, 180° opposite of --accent */
--hue-inv: 5;
/* raw player hue (number) — set by JS; 190 (cyan) is the pre-JS fallback */
--hue: 190;
}
/* ── Light theme ─────────────────────────────────────────────────── */
body.theme-light {
--bg: #f0f0f0;
--surface: #e4e4e4;
--accent: #0077aa;
--danger: #cc0033;
--text: #1a1a1a;
--dim: #777777;
--border: #cccccc;
--canvas-bg: #e8ecf0;
--canvas-fog-rgb: 220,225,230;
--canvas-grid: rgba(0,100,160,0.08);
--canvas-boundary: rgba(0,100,160,0.30);
--minimap-bg: rgba(220,225,230,0.80);
color-scheme: light;
}
body.theme-light {
background: var(--bg);
background-image: radial-gradient(circle at center, #e0e8f0 0%, #d8dfe8 100%);
color: var(--text);
}
body.theme-light::before {
background: linear-gradient(to right, rgba(200,210,220,0.75) 0%, rgba(200,210,220,0.15) 100%);
border-right: 1px solid #b0bcc8;
}
body.theme-light::after {
background: linear-gradient(to left, rgba(200,210,220,0.75) 0%, rgba(200,210,220,0.15) 100%);
border-left: 1px solid #b0bcc8;
}
/* ══════════════════════════════════════════════════════════════════
LIGHT MODE — hue-inv tinted overrides
All dark hardcoded backgrounds are replaced with a left-to-right
faded gradient of the inverted player hue.
══════════════════════════════════════════════════════════════════ */
/* ── Username input / login status ──────────────────────────────── */
body.theme-light input {
background: linear-gradient(to right,
hsla(var(--hue-inv), 65%, 84%, 0.30) 0%,
hsla(var(--hue-inv), 35%, 96%, 0.06) 100%);
color: var(--text);
border-color: hsla(var(--hue-inv), 35%, 60%, 0.25);
}
body.theme-light input:focus {
border-color: hsla(var(--hue-inv), 60%, 48%, 0.55);
box-shadow: 0 0 15px hsla(var(--hue-inv), 60%, 55%, 0.08);
}
body.theme-light input:-webkit-autofill,
body.theme-light input:-webkit-autofill:hover,
body.theme-light input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px hsl(var(--hue-inv), 55%, 92%) inset;
-webkit-text-fill-color: var(--text);
}
body.theme-light #loginStatus {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 84%, 0.35) 0%,
hsla(var(--hue-inv), 30%, 95%, 0.08) 100%);
border-color: hsla(var(--hue-inv), 35%, 58%, 0.28);
color: hsl(var(--hue-inv), 35%, 30%);
}
body.theme-light #loggedInUsername {
background: linear-gradient(to top,
hsla(var(--hue-inv), 65%, 82%, 0.35) 0%,
hsla(var(--hue-inv), 35%, 96%, 0.07) 100%);
border-color: hsla(var(--hue-inv), 50%, 50%, 0.40);
color: hsl(var(--hue-inv), 45%, 28%);
}
/* ── Lobby buttons ───────────────────────────────────────────────── */
body.theme-light button#joinBtn {
background: linear-gradient(to top,
hsla(var(--hue-inv), 60%, 78%, 0.45) 0%,
hsla(var(--hue-inv), 35%, 96%, 0.10) 100%);
color: hsl(var(--hue-inv), 55%, 28%);
}
body.theme-light .edge-btn-cyan:hover button#joinBtn {
background: linear-gradient(to top,
hsla(var(--hue-inv), 60%, 78%, 0.45) 0%,
hsla(var(--hue-inv), 35%, 96%, 0.10) 100%);
color: hsl(var(--hue-inv), 65%, 32%);
}
body.theme-light button#customizeBtn {
background: linear-gradient(to right,
rgba(255, 180, 200, 0.22) 0%,
rgba(255, 220, 230, 0.05) 100%);
color: #c0224a;
}
body.theme-light .edge-btn-pink:hover button#customizeBtn {
background: linear-gradient(to right,
rgba(255, 180, 200, 0.22) 0%,
rgba(255, 220, 230, 0.05) 100%);
color: #c0224a;
}
/* ── Tool panel tabs bar ─────────────────────────────────────────── */
body.theme-light #toolTabs {
background: linear-gradient(to top,
hsla(var(--hue-inv), 60%, 82%, 0.35) 0%,
hsla(var(--hue-inv), 30%, 94%, 0.10) 100%);
border-bottom: 1px solid hsla(var(--hue-inv), 30%, 65%, 0.18);
}
body.theme-light .dtab {
background: transparent;
color: hsl(var(--hue-inv), 25%, 40%);
}
body.theme-light .dtab:hover:not(.active) {
background: hsla(var(--hue-inv), 45%, 80%, 0.25);
color: hsl(var(--hue-inv), 35%, 28%);
}
body.theme-light .dtab.active {
background: hsla(var(--hue-inv), 50%, 92%, 0.70);
color: hsl(var(--hue-inv), 65%, 28%);
}
body.theme-light .dtab-wrap.active {
background: hsl(var(--hue-inv), 62%, 46%);
}
body.theme-light #toolToggle,
body.theme-light #expandBtn {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 84%, 0.38) 0%,
hsla(var(--hue-inv), 30%, 96%, 0.10) 100%);
border-color: hsla(var(--hue-inv), 30%, 60%, 0.22);
color: hsl(var(--hue-inv), 30%, 38%);
}
/* ── Login tab inputs (inside tool panel) ─────────────────────────── */
body.theme-light #tabLogin input {
background: linear-gradient(to right,
hsla(var(--hue-inv), 60%, 85%, 0.28) 0%,
hsla(var(--hue-inv), 30%, 97%, 0.05) 100%);
border-color: hsla(var(--hue-inv), 30%, 60%, 0.25);
color: var(--text);
}
/* Player options buttons (right-click popup) */
body.theme-light .popt-btn {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 85%, 0.28) 0%,
hsla(var(--hue-inv), 30%, 97%, 0.05) 100%);
border-color: hsla(var(--hue-inv), 30%, 60%, 0.22);
color: hsl(var(--hue-inv), 35%, 30%);
}
body.theme-light .popt-btn:hover {
border-color: hsla(var(--hue-inv), 50%, 45%, 0.55);
color: hsl(var(--hue-inv), 55%, 25%);
}
/* Edit profile button */
body.theme-light #editProfileBtn {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 84%, 0.28) 0%,
hsla(var(--hue-inv), 30%, 97%, 0.05) 100%);
border-color: hsla(var(--hue-inv), 45%, 50%, 0.30);
color: hsl(var(--hue-inv), 50%, 28%);
}
body.theme-light #editProfileBtn:hover {
background: linear-gradient(to right,
hsla(var(--hue-inv), 60%, 80%, 0.40) 0%,
hsla(var(--hue-inv), 35%, 93%, 0.12) 100%);
border-color: hsla(var(--hue-inv), 50%, 45%, 0.50);
}
/* ── Profile modal ────────────────────────────────────────────────── */
body.theme-light #profileModal {
background: rgba(180, 190, 200, 0.80);
}
body.theme-light .pm-card {
background: hsl(0, 0%, 97%);
border-color: hsla(var(--hue-inv), 30%, 62%, 0.28);
box-shadow: 0 0 0 1px hsla(var(--hue-inv), 40%, 60%, 0.12),
0 20px 50px rgba(0,0,0,0.14);
}
/* Light theme for the chamfer layers (.pm-card border/fill now ride pseudos). */
body.theme-light .pm-card::before { background: hsla(var(--hue-inv), 30%, 62%, 0.28); }
body.theme-light .pm-card::after { background: hsl(0, 0%, 97%); }
body.theme-light .pm-header {
background: hsl(var(--hue-inv), 30%, 94%);
border-bottom-color: hsla(var(--hue-inv), 28%, 62%, 0.22);
}
body.theme-light .pm-eyebrow { color: hsl(var(--hue-inv), 20%, 50%); }
body.theme-light .pm-title { color: hsl(var(--hue-inv), 30%, 18%); }
body.theme-light .pm-close { color: hsl(var(--hue-inv), 20%, 48%); }
body.theme-light .pm-close:hover { color: hsl(var(--hue-inv), 35%, 22%); }
body.theme-light .pm-section-label { color: hsl(var(--hue-inv), 25%, 48%); }
body.theme-light .pm-field-value { color: hsl(var(--hue-inv), 25%, 22%); }
body.theme-light .pm-hint { color: hsl(var(--hue-inv), 20%, 50%); }
body.theme-light .pm-nav {
border-right-color: hsla(var(--hue-inv), 28%, 62%, 0.18);
}
body.theme-light .pm-tab { color: hsl(var(--hue-inv), 20%, 48%); }
body.theme-light .pm-tab:hover {
background: hsla(var(--hue-inv), 50%, 84%, 0.22);
color: hsl(var(--hue-inv), 40%, 28%);
}
body.theme-light .pm-tab.active {
background: hsla(var(--hue-inv), 55%, 80%, 0.32);
color: hsl(var(--hue-inv), 55%, 28%);
border-left-color: hsl(var(--hue-inv), 55%, 42%);
}
body.theme-light .pm-currency-chip {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 85%, 0.30) 0%,
hsla(var(--hue-inv), 30%, 97%, 0.07) 100%);
border-color: hsla(var(--hue-inv), 28%, 62%, 0.20);
}
body.theme-light .pm-currency-chip .pcc-val { color: hsl(var(--hue-inv), 30%, 18%); }
body.theme-light .pm-currency-chip .pcc-lbl { color: hsl(var(--hue-inv), 20%, 48%); }
body.theme-light .pm-action-btn {
background: linear-gradient(to right,
hsla(var(--hue-inv), 52%, 86%, 0.28) 0%,
hsla(var(--hue-inv), 28%, 97%, 0.06) 100%);
border-color: hsla(var(--hue-inv), 28%, 60%, 0.25);
color: hsl(var(--hue-inv), 30%, 32%);
}
body.theme-light .pm-action-btn:hover {
border-color: hsla(var(--hue-inv), 40%, 50%, 0.45);
color: hsl(var(--hue-inv), 40%, 22%);
}
body.theme-light .pm-input {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 86%, 0.25) 0%,
hsla(var(--hue-inv), 28%, 98%, 0.04) 100%);
border-color: hsla(var(--hue-inv), 28%, 60%, 0.22);
color: var(--text);
}
body.theme-light .pm-input:focus {
border-color: hsla(var(--hue-inv), 55%, 45%, 0.50);
}
body.theme-light .pm-toggle-row {
border-bottom-color: hsla(var(--hue-inv), 25%, 65%, 0.14);
}
body.theme-light .pm-toggle-label { color: hsl(var(--hue-inv), 20%, 28%); }
body.theme-light .pm-toggle-sub { color: hsl(var(--hue-inv), 18%, 50%); }
body.theme-light .pm-slider { background: hsla(var(--hue-inv), 30%, 72%, 0.40); }
body.theme-light .pm-slider:before { background: hsl(var(--hue-inv), 20%, 58%); }
body.theme-light .pm-block-row {
background: linear-gradient(to right,
hsla(var(--hue-inv), 50%, 86%, 0.26) 0%,
hsla(var(--hue-inv), 26%, 97%, 0.05) 100%);
border-color: hsla(var(--hue-inv), 26%, 64%, 0.18);
color: hsl(var(--hue-inv), 20%, 35%);
}
body.theme-light .pm-empty-hint { color: hsl(var(--hue-inv), 20%, 58%); }
/* ── Store content right column — needs explicit bg so it doesn't inherit dark ── */
body.theme-light .store-content-col,
body.theme-light .store-item-grid,
body.theme-light .store-layout {
background: transparent;
}
/* ── Store category sidebar ──────────────────────────────────────── */
body.theme-light .store-cat-col {
background: linear-gradient(to right,
hsla(var(--hue-inv), 60%, 83%, 0.32) 0%,
hsla(var(--hue-inv), 32%, 96%, 0.08) 100%);
border-right-color: hsla(var(--hue-inv), 28%, 62%, 0.18);
}
body.theme-light .store-cat-box {
background:
linear-gradient(
hsla(var(--hue-inv), 52%, 86%, 0.25),
hsla(var(--hue-inv), 52%, 86%, 0.25)) content-box content-box,
hsla(var(--hue-inv), 28%, 62%, 0.28) padding-box;
border: none;
color: hsl(var(--hue-inv), 22%, 40%);
}
body.theme-light .store-cat-box:hover:not(.active) {
background:
linear-gradient(
hsla(var(--hue-inv), 58%, 82%, 0.36),
hsla(var(--hue-inv), 58%, 82%, 0.36)) content-box content-box,
hsla(var(--hue-inv), 38%, 55%, 0.42) padding-box;
border: none;
color: hsl(var(--hue-inv), 35%, 28%);
}
body.theme-light .store-cat-box.active {
background:
linear-gradient(
hsla(var(--hue-inv), 58%, 80%, 0.35),
hsla(var(--hue-inv), 58%, 80%, 0.35)) content-box content-box,
hsla(var(--hue-inv), 55%, 48%, 0.55) padding-box;
border: none;
}
/* Light theme keeps its own background-clip border trick; hide the dark-theme
chamfer pseudos so they don't tint the translucent light fill. */
body.theme-light .store-cat-box::before,
body.theme-light .store-cat-box::after { display: none; }
body.theme-light .store-cat-divider {
background: hsla(var(--hue-inv), 28%, 62%, 0.18);
}
/* ── Store cards / item grid ─────────────────────────────────────── */
/* Bold, dimensional cards in light mode. The base card is chamfered with
clip-path (which clips box-shadow), and draws its "border" via the
padding-box trick — so we thicken the border by widening `padding`, fill
with a bottom→top gradient, and use filter: drop-shadow (respects
clip-path) for the lift. */
body.theme-light .store-card {
background: transparent !important;
filter: drop-shadow(0 3px 6px hsla(var(--hue-inv), 40%, 40%, 0.22)) !important;
}
/* Light theme uses a 2px border → fill inset 2px, chamfer M = N - 2*0.586 = 10 - 1.17 = 8.83. */
body.theme-light .store-card::before {
background: hsla(var(--hue-inv), 50%, 45%, 0.65) !important;
}
body.theme-light .store-card::after {
inset: 2px !important;
clip-path: polygon(0 0, calc(100% - 8.83px) 0, 100% 8.83px, 100% 100%, 8.83px 100%, 0 calc(100% - 8.83px)) !important;
background:
linear-gradient(to top,
hsla(var(--hue-inv), 52%, 80%, 0.55) 0%,
hsla(var(--hue-inv), 40%, 96%, 0.22) 100%) !important;
}
body.theme-light .store-card:hover::before {
background: hsla(var(--hue-inv), 58%, 42%, 0.85) !important;
}
body.theme-light .store-card:hover::after {
background:
linear-gradient(to top,
hsla(var(--hue-inv), 55%, 78%, 0.65) 0%,
hsla(var(--hue-inv), 42%, 94%, 0.30) 100%) !important;
}
body.theme-light .store-card:hover {
filter: drop-shadow(0 5px 9px hsla(var(--hue-inv), 50%, 42%, 0.30)) !important;
}
body.theme-light .store-preview-box {
background: hsla(var(--hue-inv), 45%, 88%, 0.22);
}
body.theme-light .si-name { color: hsl(var(--hue-inv), 22%, 28%); }
body.theme-light .si-buy {
border-color: hsla(var(--hue-inv), 28%, 60%, 0.22);
color: hsl(var(--hue-inv), 22%, 40%);
}
body.theme-light .si-buy:hover {
border-color: hsla(var(--hue-inv), 55%, 42%, 0.55);
color: hsl(var(--hue-inv), 55%, 28%);
}
body.theme-light .store-empty {
color: hsl(var(--hue-inv), 22%, 62%);
}
body.theme-light .store-rarity-row {
border-bottom-color: hsla(var(--hue-inv), 26%, 62%, 0.16);
}
body.theme-light .sf-arrow {
border-color: hsla(var(--hue-inv), 28%, 60%, 0.30);
color: hsl(var(--hue-inv), 22%, 40%);
}
body.theme-light .sf-arrow:hover:not(:disabled) {
border-color: hsla(var(--hue-inv), 55%, 42%, 0.55);
color: hsl(var(--hue-inv), 55%, 28%);
}
/* ── Tool panel + loadout — solid opaque light backgrounds ──────── */
body.theme-light #toolTab {
background: linear-gradient(to top,
hsla(var(--hue-inv), 50%, 88%, 0.96) 0%,
hsl(0, 0%, 96%) 100%);
border-color: hsla(var(--hue-inv), 28%, 62%, 0.22);
}
body.theme-light #toolBody {
background: transparent;
}
/* ── Loadout panel ───────────────────────────────────────────────── */
body.theme-light #loadoutPanel {
background: linear-gradient(to top,
hsla(var(--hue-inv), 52%, 87%, 0.97) 0%,
hsl(0, 0%, 96%) 100%);
border-color: hsla(var(--hue-inv), 28%, 62%, 0.22);
}
body.theme-light .lp-title {
background: linear-gradient(to top,
hsla(var(--hue-inv), 62%, 80%, 0.42) 0%,
hsla(var(--hue-inv), 32%, 95%, 0.12) 100%);
border-bottom-color: hsla(var(--hue-inv), 28%, 62%, 0.18);
}
body.theme-light .lp-row {
border-bottom-color: hsla(var(--hue-inv), 26%, 65%, 0.14);
}
body.theme-light .lp-row:hover {
background: hsla(var(--hue-inv), 50%, 84%, 0.22);
}
body.theme-light .lp-svg {
background: hsla(var(--hue-inv), 45%, 88%, 0.22);
border-color: hsla(var(--hue-inv), 26%, 65%, 0.18);
}
body.theme-light .lp-slot { color: hsl(var(--hue-inv), 22%, 52%); }
body.theme-light .lp-name { color: hsl(var(--hue-inv), 22%, 32%); }
/* ── Loadout mini rows (items tab) ───────────────────────────────── */
body.theme-light .loadout-mini-row {
border-color: hsla(var(--hue-inv), 26%, 65%, 0.18);
}
body.theme-light .loadout-mini-row:hover {
background: hsla(var(--hue-inv), 50%, 84%, 0.22);
border-color: hsla(var(--hue-inv), 35%, 58%, 0.30);
}
body.theme-light .loadout-mini-svg {
background: hsla(var(--hue-inv), 45%, 88%, 0.22);
border-color: hsla(var(--hue-inv), 26%, 65%, 0.18);
}
body.theme-light .loadout-mini-slot { color: hsl(var(--hue-inv), 22%, 52%); }
body.theme-light .loadout-mini-name { color: hsl(var(--hue-inv), 22%, 35%); }
body.theme-light .loadout-section-label { color: hsl(var(--hue-inv), 22%, 52%); }
/* ── Scrollbar tracks (store / loadout) ──────────────────────────── */
body.theme-light .store-cat-col::-webkit-scrollbar-track,
body.theme-light .store-item-grid::-webkit-scrollbar-track,
body.theme-light .store-content-col::-webkit-scrollbar-track,
body.theme-light .loadout-mini-list::-webkit-scrollbar-track,
body.theme-light .lp-list::-webkit-scrollbar-track {
background: hsla(var(--hue-inv), 35%, 88%, 0.20);
}
body.theme-light .store-cat-col::-webkit-scrollbar-thumb,
body.theme-light .store-item-grid::-webkit-scrollbar-thumb,
body.theme-light .store-content-col::-webkit-scrollbar-thumb,
body.theme-light .loadout-mini-list::-webkit-scrollbar-thumb,
body.theme-light .lp-list::-webkit-scrollbar-thumb {
background: hsla(var(--hue-inv), 38%, 70%, 0.38);
}
/* ── Friends / network tab ───────────────────────────────────────── */
body.theme-light .net-add-row input {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 86%, 0.25) 0%,
hsla(var(--hue-inv), 28%, 97%, 0.05) 100%);
border-color: hsla(var(--hue-inv), 28%, 60%, 0.25);
color: var(--text);
}
body.theme-light .friend-row {
border-bottom-color: hsla(var(--hue-inv), 26%, 65%, 0.14);
color: hsl(var(--hue-inv), 20%, 30%);
}
/* ── Sign-up modal ───────────────────────────────────────────────── */
body.theme-light .su-card {
background: linear-gradient(to right,
hsla(var(--hue-inv), 58%, 86%, 0.40) 0%,
hsla(var(--hue-inv), 30%, 97%, 0.14) 100%);
border-color: hsla(var(--hue-inv), 40%, 55%, 0.30);
border-top-color: hsl(var(--hue-inv), 55%, 48%);
box-shadow: 0 0 0 1px hsla(var(--hue-inv), 35%, 60%, 0.10),
0 0 40px hsla(var(--hue-inv), 50%, 55%, 0.06),
0 32px 80px rgba(0,0,0,0.10);
}
body.theme-light .su-title { color: hsl(var(--hue-inv), 30%, 18%); }
body.theme-light .su-sub { color: hsl(var(--hue-inv), 22%, 48%); }
body.theme-light .su-hint { color: hsl(var(--hue-inv), 22%, 48%); }
body.theme-light .su-footer { color: hsl(var(--hue-inv), 20%, 52%); }
body.theme-light .su-close {
border-color: hsla(var(--hue-inv), 26%, 62%, 0.25);
color: hsl(var(--hue-inv), 22%, 48%);
}
body.theme-light .su-input {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 87%, 0.24) 0%,
hsla(var(--hue-inv), 28%, 98%, 0.04) 100%);
border-color: hsla(var(--hue-inv), 28%, 58%, 0.25);
color: var(--text);
}
body.theme-light .su-input::placeholder {
color: hsl(var(--hue-inv), 22%, 58%);
}
body.theme-light .su-input:focus {
border-color: hsla(var(--hue-inv), 55%, 45%, 0.50);
box-shadow: 0 0 0 3px hsla(var(--hue-inv), 55%, 55%, 0.10);
}
body.theme-light .su-premium-box {
background: linear-gradient(to right,
hsla(var(--hue-inv), 45%, 86%, 0.24) 0%,
hsla(var(--hue-inv), 25%, 97%, 0.06) 100%);
border-color: hsla(var(--hue-inv), 25%, 65%, 0.18);
}
body.theme-light .su-divider {
border-top-color: hsla(var(--hue-inv), 26%, 65%, 0.15);
}
body.theme-light .su-btn-secondary {
border-color: hsla(var(--hue-inv), 28%, 64%, 0.22);
}
body.theme-light .su-perks { color: hsl(var(--hue-inv), 20%, 38%); }
body.theme-light .su-perks li { border-bottom-color: hsla(var(--hue-inv), 25%, 65%, 0.14); }
/* ── Credits popup ───────────────────────────────────────────────── */
body.theme-light .cpop-card {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 87%, 0.42) 0%,
hsla(var(--hue-inv), 28%, 97%, 0.14) 100%);
border-color: hsla(var(--hue-inv), 28%, 64%, 0.18);
}
body.theme-light .cpop-header {
border-bottom-color: hsla(var(--hue-inv), 26%, 65%, 0.14);
}
body.theme-light .cpop-title { color: hsl(var(--hue-inv), 30%, 16%); }
body.theme-light .cpop-close { color: hsl(var(--hue-inv), 22%, 48%); }
body.theme-light .cpop-close:hover { color: hsl(var(--hue-inv), 32%, 22%); }
body.theme-light .cpop-panel-right {
border-left-color: hsla(var(--hue-inv), 26%, 64%, 0.15);
background: hsla(var(--hue-inv), 40%, 84%, 0.06);
}
body.theme-light .cpop-panel-title { color: hsl(var(--hue-inv), 22%, 48%); }
body.theme-light .cpop-desc { color: hsl(var(--hue-inv), 20%, 28%); }
body.theme-light .cpop-note { color: hsl(var(--hue-inv), 20%, 50%); }
body.theme-light .cpop-table {
border-color: hsla(var(--hue-inv), 26%, 65%, 0.14);
}
body.theme-light .ct-row {
border-bottom-color: hsla(var(--hue-inv), 24%, 68%, 0.10);
color: hsl(var(--hue-inv), 20%, 35%);
}
body.theme-light .ct-head {
background: hsla(var(--hue-inv), 38%, 84%, 0.20);
color: hsl(var(--hue-inv), 22%, 48%);
}
body.theme-light .cpop-earn-card {
background: linear-gradient(to right,
hsla(var(--hue-inv), 50%, 86%, 0.22) 0%,
hsla(var(--hue-inv), 26%, 97%, 0.05) 100%);
border-color: hsla(var(--hue-inv), 26%, 65%, 0.16);
}
body.theme-light .cec-title { color: hsl(var(--hue-inv), 22%, 28%); }
body.theme-light .cec-desc { color: hsl(var(--hue-inv), 20%, 48%); }
/* Remaining popup gaps in light mode: default card text + buy/earn sections */
body.theme-light .cpop-card { color: hsl(var(--hue-inv), 20%, 28%); }
body.theme-light .cpop-body { color: hsl(var(--hue-inv), 20%, 30%); }
body.theme-light .cbuy-amount { color: hsl(var(--hue-inv), 55%, 30%); }
body.theme-light .cbuy-price { color: hsl(var(--hue-inv), 18%, 45%); }
body.theme-light .ct-highlight { color: hsl(40, 80%, 30%); background: hsla(40, 90%, 60%, 0.18); }
body.theme-light .cec-icon { color: hsl(var(--hue-inv), 18%, 45%); }
body.theme-light .cpop-panel-title { color: hsl(var(--hue-inv), 22%, 45%); }
body.theme-light .cpop-divider { color: hsl(var(--hue-inv), 15%, 55%); }
body.theme-light .cbuy-card {
background: linear-gradient(to right,
hsla(var(--hue-inv), 50%, 87%, 0.22) 0%,
hsla(var(--hue-inv), 26%, 97%, 0.05) 100%);
border-color: hsla(var(--hue-inv), 26%, 65%, 0.16);
}
body.theme-light .cbuy-price { color: hsl(var(--hue-inv), 22%, 42%); }
/* ── Mobile items loadout topbar ─────────────────────────────────── */
body.theme-light .items-loadout-topbar {
background: linear-gradient(to right,
hsla(var(--hue-inv), 58%, 83%, 0.35) 0%,
hsla(var(--hue-inv), 30%, 96%, 0.10) 100%);
border-bottom-color: hsla(var(--hue-inv), 26%, 64%, 0.18);
}
body.theme-light .ilt-slot {
background: linear-gradient(to right,
hsla(var(--hue-inv), 52%, 86%, 0.24) 0%,
hsla(var(--hue-inv), 28%, 97%, 0.04) 100%);
border-color: hsla(var(--hue-inv), 26%, 65%, 0.18);
}
body.theme-light .ilt-slot:hover:not(.active) {
border-color: hsla(var(--hue-inv), 35%, 58%, 0.32);
}
body.theme-light .ilt-label { color: hsl(var(--hue-inv), 22%, 48%); }
/* ── Debug log text ──────────────────────────────────────────────── */
body.theme-light .dbg-row { color: hsl(var(--hue-inv), 18%, 32%); }
body.theme-light .dbg-row .k { color: hsl(var(--hue-inv), 20%, 50%); }
* {
box-sizing: border-box;
outline: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: 'Share Tech Mono', monospace;
margin: 0;
overflow: hidden;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(circle at center, #111 0%, #050505 100%);
}
/* SIDE GUTTER PANELS — appear and darken as viewport widens past the lobby */
body::before,
body::after {
content: '';
position: fixed;
top: 0;
bottom: 0;
width: max(0px, calc((100vw - 1240px) / 2));
z-index: 1;
pointer-events: none;
transition: width 0.3s ease;
}
body::before {
left: 0;
background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 100%);
border-right: 1px solid #2a2a2a;
}
body::after {
right: 0;
background: linear-gradient(to left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 100%);
border-left: 1px solid #2a2a2a;
}
/* Interior gutter lines — a second 1px line 12px INSIDE each side-gutter
border, for a double-rail framed edge (matches the gutter line colour). */
html::before,
html::after {
content: '';
position: fixed;
top: 0;
bottom: 0;
width: 2.4px;
background: linear-gradient(to top, #2a2a2a 0%, #404040 100%);
z-index: 1;
pointer-events: none;
}
/* Distance from centre is FROZEN at the content-box value: the base term uses the
content half-width (1240/2) instead of the live 50vw, so as the window narrows past
the content box the line holds its distance from centre and never creeps any closer
to the centred content. From that innermost spot it only ever drifts OUTWARD toward
the edge by clamp(0,G,30px) — 1px per 1px of side gutter up to a 30px cap, then locks.
Lower the 0.42 factor to pull the frozen spot closer to centre. */
html::before { left: calc(50vw - 0.42 * (1240px / 2) - 16px - clamp(0px, max(0px, (100vw - 1240px) / 2), 30px)); }
html::after { right: calc(50vw - 0.42 * (1240px / 2) - 16px - clamp(0px, max(0px, (100vw - 1240px) / 2), 30px)); }
/* These interior gutter lines are part of the Rogue frame — hide them on the
classic default. The theme class is mirrored onto (see applyTheme)
so these pseudo-elements can gate on it. */
html:not(.theme-rogue)::before,
html:not(.theme-rogue)::after { display: none; }
/* ===========================================================================
BOOT DOOR — futuristic two-panel intro that seals the whole site on load,
then a central lock spins + glows, "unlocks", and the panels part. ~2s total.
Markup + the self-removing timer live at the top of in index.html.
Tweakables: change the 2s in every animation (and the removal timeout in
index.html) to retime; the 52% hold split is where the doors start opening.
=========================================================================== */
#bootDoor {
position: fixed;
inset: 0;
z-index: 100000; /* above all app UI; below the dev draw overlay */
overflow: hidden;
pointer-events: all;
--bd-h: var(--hue-inv, 10); /* hardcoded to the inverted HUE SHIFT (--hue-inv), the complement of the player hue — not the live --hue */
/* transparent: the panels themselves seal the site while closed (they
overlap at the seam), so parting them reveals the live page, not black */
}
/* At rest the doors aren't removed — they drop behind the UI (z-index 1) and
stay as the permanent futuristic side frame (replacing the old grey gutters). */
#bootDoor.bd-done { pointer-events: none; z-index: 1; }
/* "TAP TO ACTIVATE" gate button — shown only while the doors are held SHUT on
mobile browsers (#bootDoor.bd-gate, set by the boot script). Restyled as the
signature EDGE chamfered-octagon button (cut corners echo the blast-door
plates) lettered in Chakra Petch — the angular, chamfer-cornered typeface that
matches the Edge art language. Dark glass fill, a thin accent frame, a soft
accent under-glow; no neon. Sits below the reticule so the two never collide.
The #bootDoor container (pointer-events:all) captures the tap; the button
itself stays click-through. The accent frame is ::before, the glass fill is
::after (inset 1.5px → a 1.5px frame shows), the caps ride on top. */
.bd-gate-label {
position: absolute;
left: 50%; top: 64%;
transform: translate(-50%, -50%);
z-index: 4; /* above panels (-), seam (3), lock (2) */
display: none;
padding: 16px 30px 15px;
text-align: center;
background: transparent; /* frame → ::before, fill → ::after */
pointer-events: none;
-webkit-user-select: none; user-select: none;
transition: transform 0.13s ease, filter 0.13s ease;
/* EDGE octagon — 10px chamfered corners */
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.bd-gate-label::before { /* accent frame layer */
content: '';
position: absolute;
inset: 0;
z-index: -2;
background: hsla(var(--bd-h), 78%, 58%, 0.6);
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.bd-gate-label::after { /* dark glass fill, inset 1.5px → 1.5px accent frame shows */
content: '';
position: absolute;
inset: 1.5px;
z-index: -1;
background: linear-gradient(158deg, rgba(17, 21, 29, 0.94), rgba(6, 8, 12, 0.97));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 0 24px hsla(var(--bd-h), 80%, 55%, 0.12);
/* fill chamfer N−0.59·p = 10 − 0.59·1.5 = 9.12 (true 1.5px perpendicular frame) */
clip-path: polygon(9.12px 0, calc(100% - 9.12px) 0, 100% 9.12px, 100% calc(100% - 9.12px),
calc(100% - 9.12px) 100%, 9.12px 100%, 0 calc(100% - 9.12px), 0 9.12px);
}
.bd-gate-text {
font-family: 'Chakra Petch', 'Share Tech Mono', sans-serif;
font-weight: 600;
font-size: clamp(12px, 3.2vw, 17px);
line-height: 1.5;
letter-spacing: 4px;
color: #eaf1fb;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9),
0 0 16px hsla(var(--bd-h), 80%, 60%, 0.4);
}
#bootDoor.bd-gate { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#bootDoor.bd-gate .bd-gate-label { display: block; animation: bdGateBreath 3s ease-in-out infinite; }
/* Elegant idle breathe — a gentle swell with a soft accent halo, no opacity flicker. */
@keyframes bdGateBreath {
0%, 100% { transform: translate(-50%, -50%) scale(1);
filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6))
drop-shadow(0 0 6px hsla(var(--bd-h), 85%, 60%, 0.22)); }
50% { transform: translate(-50%, -50%) scale(1.03);
filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6))
drop-shadow(0 0 15px hsla(var(--bd-h), 85%, 60%, 0.5)); }
}
/* Tactile press: the button sinks + flares the instant it's tapped (140ms before
the doors begin to part). Same specificity as the breathe rule but declared
later, so it wins while .bd-press is on. */
#bootDoor.bd-press .bd-gate-label {
display: block;
animation: none;
transform: translate(-50%, -50%) scale(0.93);
filter: brightness(1.4) drop-shadow(0 0 20px hsla(var(--bd-h), 90%, 62%, 0.85));
}
/* the two sliding halves — each exactly half the viewport, so their inner edges
meet precisely at centre and form the middle line themselves (no seam element).
OBSIDIAN REVAMP: monolithic alien black-glass composite — near-black body with
a cold blue cast, one sharp diagonal SPECULAR sheet (gloss, not glow) and a
second fainter echo, plus smoky internal depth. No plates, no rivets, no grain:
the material is seamless. The only colored elements are the thin energy seams —
the 1px line where the doors meet, and a hairline tracer inset on each jamb. */
.bd-panel {
position: absolute;
top: 0;
bottom: 0;
width: 50vw;
background: #060608; /* flat fallback; per-side tone gradient below */
pointer-events: none; /* never capture clicks; the container gates input */
transform: translateX(0); /* closed; opened via the .bd-open transition below */
transition: transform 0.7s cubic-bezier(.7, 0, .25, 1);
will-change: transform;
}
/* polished bevel at each door's inner edge — the glass darkens into the seam then
catches a 1px gloss line right at the lip (the part that stays visible as the
permanent 30px side frame at rest) */
.bd-panel::before {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 26px;
}
.bd-panel.bd-left::before {
right: 0;
background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.62) 46%,
rgba(255, 255, 255, 0.05) 90%, rgba(255, 255, 255, 0.11) 100%);
}
.bd-panel.bd-right::before {
left: 0;
background: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.62) 46%,
rgba(255, 255, 255, 0.05) 90%, rgba(255, 255, 255, 0.11) 100%);
}
/* hairline energy tracer — a thin accent seam etched into the glass, parallel to
the centre line; inset 24px so it keeps riding the resting 30px frame strip */
.bd-panel::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent,
hsla(var(--bd-h), 80%, 60%, 0.30) 28%,
hsla(var(--bd-h), 80%, 60%, 0.30) 72%, transparent);
}
.bd-panel.bd-left::after { right: 24px; }
.bd-panel.bd-right::after { left: 24px; }
/* the inner edges (these borders) are the centre line — 1px from each door meet
at exactly 50vw; the main thin energy seam, the one bright colored element */
/* Simple background, no gloss: a subtle tone shift — slightly lighter toward the
centre seam, fading to near-black at the outer edge — echoing the main-menu
radial (#111 centre → #050505 edge). */
.bd-panel.bd-left { left: 0; border-right: 1px solid hsla(var(--bd-h), 75%, 58%, 0.40);
background: linear-gradient(to right, #050506 0%, #0d0d10 100%); }
.bd-panel.bd-right { right: 0; border-left: 1px solid hsla(var(--bd-h), 75%, 58%, 0.40);
background: linear-gradient(to left, #050506 0%, #0d0d10 100%); }
/* armored plate — milled into each obsidian door. The full chamfered frame (top /
bottom / exterior edges + recess) is dropped per owner spec; only a single thin
accent line on the INTERIOR (seam-facing) edge remains, so the door reads as
clean obsidian with one inner crease. Inset clear of the inner jamb so it rides
behind the resting 30px frame when the doors part. */
.bd-plates {
position: absolute;
top: 3vh; bottom: 3vh;
display: flex;
flex-direction: column;
}
.bd-left .bd-plates { left: 5%; right: 30px; } /* 30px = clear the inner jamb */
.bd-right .bd-plates { right: 5%; left: 30px; }
.bd-plates i {
flex: 1;
display: block;
background: transparent;
}
.bd-left .bd-plates i { border-right: 1px solid rgba(255, 255, 255, 0.06); }
.bd-right .bd-plates i { border-left: 1px solid rgba(255, 255, 255, 0.06); }
/* glowing centre line — the static line is the door edges above; this energy seam
sits on top and only flares as the doors unlock and part (invisible while closed) */
.bd-seam {
position: absolute;
left: 50%; top: 0; bottom: 0;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(to bottom, transparent,
hsl(var(--bd-h), 85%, 60%) 45%, hsl(var(--bd-h), 85%, 60%) 55%, transparent);
opacity: 0;
z-index: 3;
animation: bdSeam 1.3s ease forwards;
}
@keyframes bdSeam {
/* 1.3s == the door-slide window (parts at 600ms, open at 1300ms): the beam
FLARES at 46% (~600ms) exactly as the doors split, then rides the opening
and fades out at 100% as they finish. */
0%, 30% { opacity: 0; box-shadow: none; }
46% { opacity: 1; box-shadow: 0 0 22px 4px hsla(var(--bd-h), 85%, 60%, 0.9); }
70% { opacity: 0.5; }
100% { opacity: 0; }
}
/* The open: doors retract until a gutter-width strip remains at each edge — that
strip is the permanent futuristic frame. The rest transform is set INLINE from
the script (the engine drops calc(max()) inside CSS rules/keyframes, but honours
it as an inline value), and the .bd-panel transition animates the slide. */
/* central lock mechanism */
.bd-lock {
position: absolute;
left: 50%; top: 50%;
width: 150px; height: 150px;
transform: translate(-50%, -50%);
z-index: 2;
animation: bdLockOut 1.3s ease forwards;
}
/* 1.3s clock shared with bdSeam/bdCore/bdPulse: the unlock pop lands at 46%
(~600ms) — the exact moment the boot script parts the doors — so the pop
reads as the CAUSE of the opening instead of trailing it. */
@keyframes bdLockOut {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
37% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
46% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); } /* unlock pop */
61% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
100% { opacity: 0; }
}
.bd-ring { position: absolute; inset: 0; border-radius: 50%; }
.bd-ring.r1 { /* obsidian bezel — black-glass annulus with two sharp glints */
background: conic-gradient(#0a0b0e, #2c313c 9%, #0c0e12 17%, #07080b 46%,
#242936 57%, #0a0b0e 66%, #07080b 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}
.bd-ring.r2 { /* glint arc — thin energy seam element */
inset: 9px;
border: 2px solid transparent;
border-top-color: hsla(var(--bd-h), 80%, 64%, 0.85);
border-right-color: hsla(var(--bd-h), 80%, 64%, 0.35);
filter: drop-shadow(0 0 4px hsla(var(--bd-h), 80%, 60%, 0.6));
animation: bdSpin 1.15s cubic-bezier(.35,0,.2,1) forwards;
}
.bd-ring.r3 { /* counter-spinning etched facet ring — light catching cut glass */
inset: 22px;
border: 2px dashed rgba(255, 255, 255, 0.13);
animation: bdSpinRev 1.15s cubic-bezier(.35,0,.2,1) forwards;
}
@keyframes bdSpin { to { transform: rotate(900deg); } }
@keyframes bdSpinRev { to { transform: rotate(-720deg); } }
.bd-core { /* polished obsidian orb + accent pilot light */
position: absolute;
inset: 44px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.16), transparent 26%),
radial-gradient(circle at 36% 28%, #272b35, #0d0f14 58%, #040507);
box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.75),
inset 0 1px 1px rgba(255, 255, 255, 0.10),
0 3px 10px rgba(0, 0, 0, 0.65);
animation: bdCore 1.3s ease forwards;
}
.bd-core::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 12px; height: 12px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: hsl(var(--bd-h), 85%, 60%);
box-shadow: 0 0 9px 2px hsla(var(--bd-h), 85%, 60%, 0.8);
animation: bdPulse 1.3s ease forwards;
}
/* ── GATE IDLE — the ASMR wait state (#bootDoor.bd-gate, mobile browser) ──────
The reticule holds in slow motion: the glint arc WANDERS around the bezel
(irregular drift — forward, a lazy backtrack, forward again), the tick ring
counter-rotates glacially, and the pilot light breathes. Everything quiet,
nothing flashes; it waits peacefully for the tap. These override the one-shot
load animations above while .bd-gate is on. */
#bootDoor.bd-gate .bd-lock { animation: bdGateLockIn 0.8s ease-out forwards; }
@keyframes bdGateLockIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#bootDoor.bd-gate .bd-ring.r2 { animation: bdGlintDrift 7.5s ease-in-out infinite; }
@keyframes bdGlintDrift {
0% { transform: rotate(0deg); }
30% { transform: rotate(168deg); }
46% { transform: rotate(126deg); } /* lazy backtrack — the "shuffle" */
74% { transform: rotate(305deg); }
86% { transform: rotate(281deg); } /* second hesitation */
100% { transform: rotate(360deg); }
}
#bootDoor.bd-gate .bd-ring.r3 { animation: bdTickDrift 16s linear infinite; }
@keyframes bdTickDrift { to { transform: rotate(-360deg); } }
#bootDoor.bd-gate .bd-core { animation: none; }
#bootDoor.bd-gate .bd-core::before { animation: bdPilotBreath 3.4s ease-in-out infinite; }
@keyframes bdPilotBreath {
0%, 100% { opacity: 0.45; box-shadow: 0 0 6px 1px hsla(var(--bd-h), 85%, 60%, 0.5); }
50% { opacity: 0.95; box-shadow: 0 0 14px 3px hsla(var(--bd-h), 85%, 60%, 0.8); }
}
/* While gated the doors are still SHUT — the seam flare belongs to the opening,
so hold it dark until the tap. */
#bootDoor.bd-gate .bd-seam { animation: none; opacity: 0; }
/* ── ACTIVATION (#bootDoor.bd-go, set by the tap) ─────────────────────────────
Removing .bd-gate lets the base one-shot names re-apply, which RESTARTS the
good old spin choreography (r2/r3 whirl, seam flares, core surges). Only the
lock needs a dedicated replay that starts VISIBLE (bdLockOut begins at
opacity 0 — replaying it would blink the reticule off for a frame). */
#bootDoor.bd-go .bd-lock { animation: bdLockGo 1.3s ease forwards; }
@keyframes bdLockGo {
0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
37% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
46% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); } /* unlock pop */
61% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
100% { opacity: 0; }
}
/* Core surge + pilot blast peak at 46% (~600ms) — in step with the unlock pop,
seam flare, and the door split — then relax while the panels slide. */
@keyframes bdCore {
0% { box-shadow: inset 0 0 16px hsla(var(--bd-h), 85%, 60%, 0.2); }
37% { box-shadow: inset 0 0 26px hsla(var(--bd-h), 85%, 60%, 0.6),
0 0 42px hsla(var(--bd-h), 85%, 60%, 0.5); }
46% { box-shadow: inset 0 0 44px hsl(var(--bd-h), 85%, 60%),
0 0 80px hsl(var(--bd-h), 85%, 60%); }
}
@keyframes bdPulse {
0%, 30% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
40% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
46% { opacity: 1; transform: translate(-50%, -50%) scale(2.2);
box-shadow: 0 0 34px 9px #00e5ff; }
58% { opacity: 0; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
#bootDoor { display: none; }
}
/* LOBBY UI */
#lobby {
text-align: center;
z-index: 10;
transition: opacity 0.4s ease;
width: 100%;
max-width: 400px;
padding: 20px;
position: relative; /* anchor the central spine */
}
/* Central vertical metallic spine — a thin metal line down the middle of the
lobby, BEHIND every UI element (z-index -1), so the stacked controls read as
mounted on it. */
.metal-spine {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
transform: translateX(-50%);
z-index: -1;
background: linear-gradient(90deg, #20232a 0%, #565c66 44%, #6b717b 50%, #474c54 56%, #1e2027 100%);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.55);
}
/* The spine now spans only this cluster (name plate → bottom rung), so it stops at
the top/bottom horizontal lines instead of running the full lobby height. */
.lobby-core { position: relative; }
/* ── ROGUE theme vs the classic default lobby ────────────────────────────────
The metallic "control-panel" frame — central spine + connector rungs + diamond
nodes + button cross-rail + notched metal name plate + store-shortcut spine
segment — is the new "Rogue" UI theme (added across V0.7.40–V0.7.52). The
default (Dark) and Light themes get the classic pre-V0.7.40 lobby: a plain
centred input + button stack. The decorations only render under
body.theme-rogue; otherwise they're hidden and the name plate reverts to its
original hue-tinted style. (The boot-door intro is deliberately kept on every
theme.) */
body:not(.theme-rogue) .metal-spine,
body:not(.theme-rogue) .lobby-core .rung,
body:not(.theme-rogue) .metal-rail--cross { display: none; }
body:not(.theme-rogue) #creditsShortcut::before { display: none; }
body:not(.theme-rogue) #loggedInUsername {
background: linear-gradient(to top,
hsla(var(--hue-inv), 60%, 20%, 0.30) 0%,
hsla(var(--hue-inv), 30%, 10%, 0.04) 100%);
color: hsl(var(--hue-inv), 85%, 65%);
text-shadow: 0 0 18px hsla(var(--hue-inv), 85%, 60%, 0.45);
padding: 10px 0 6px;
clip-path: none;
box-shadow: none;
filter: none;
}
#lobby.hidden {
display: none;
}
h1 {
font-family: 'Press Start 2P', monospace;
color: var(--accent);
font-size: 3.5rem;
margin: 0;
letter-spacing: -2px;
text-shadow: 0 0 25px var(--accent-border);
animation: flicker 3s infinite;
}
@keyframes flicker {
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
opacity: 1;
}
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
opacity: 0.4;
}
}
#versionLabel {
color: var(--dim);
font-size: 0.7rem;
margin-top: -2px; /* hug the logo */
margin-bottom: 16px; /* pad away from the username box → sits closer to the logo */
letter-spacing: 2px;
}
#loginStatus {
display: inline-block;
background: #111;
border: 1px solid #333;
color: #888;
font-size: 10px;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
#loginStatus.signed-in {
border-color: var(--accent);
color: var(--accent);
}
.input-group {
position: relative;
margin-bottom: 15px;
}
/* ── Metallic HUD rail ─────────────────────────────────────────────────────
A decorative divider that echoes the Edge chamfer bevel (notched ends via
clip-path) with a brushed-metal sheen + a faint accent-hue seam down the
middle. Reusable: drop into any centred
column; add .metal-rail--wide / --thin to vary it. */
.metal-rail {
width: 72%;
height: 4px;
margin: 14px auto;
position: relative;
background: linear-gradient(180deg, #5e636b 0%, #41454c 18%, #292c31 50%, #34373d 64%, #4a4e55 100%);
clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(0, 0, 0, 0.55),
0 1px 5px rgba(0, 0, 0, 0.5);
}
.metal-rail::before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px),
linear-gradient(90deg, transparent 16%, var(--accent, #00e5ff) 50%, transparent 84%);
opacity: 0.6;
}
.metal-rail--wide { width: 88%; }
.metal-rail--thin { height: 3px; }
/* Rung: a short horizontal connector between stacked elements, with a diamond
junction node where it crosses the central spine — builds the "assembled bus"
look instead of stray lines. */
.rung { position: relative; margin: 9px 0; }
.rung .metal-rail { width: 46%; margin: 0 auto; }
.metal-node {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 9px;
z-index: 1;
background: linear-gradient(135deg, #7a808a 0%, #2a2d33 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.55);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* Cross-rail: runs BEHIND the button stack so the buttons sit on it and the
chamfered ends poke out past their sides. */
.lobby-btns { position: relative; }
.lobby-btns .edge-btn-wrap { position: relative; z-index: 1; }
.metal-rail--cross {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 96%;
margin: 0;
z-index: 0;
}
input {
background: var(--surface);
border: 1px solid var(--border);
color: #fff;
padding: 15px;
width: 100%;
font-family: 'Share Tech Mono', monospace;
font-size: 1.2rem;
text-align: center;
transition: all 0.2s ease;
}
input:focus {
border-color: var(--accent);
box-shadow: 0 0 15px var(--accent-border);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px var(--surface) inset;
-webkit-text-fill-color: #fff;
transition: background-color 5000s ease-in-out 0s;
}
#loggedInUsername {
display: none;
/* Metallic name plate with stepped/notched (shouldered) ends — the JN[DEV]
bar from the mockup. Gray brushed gradient + metal sheen; name glow on top. */
background: linear-gradient(180deg, #3c4149 0%, #262a31 46%, #1b1e24 54%, #30343c 100%);
border: none;
color: hsl(var(--hue-inv), 85%, 68%);
text-shadow: 0 0 18px hsla(var(--hue-inv), 85%, 60%, 0.5);
padding: 11px 14px 9px;
text-align: center;
font-size: 22px;
font-family: 'Share Tech Mono', monospace;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s, text-shadow 0.3s;
clip-path: polygon(0 30%, 5% 30%, 7% 0, 93% 0, 95% 30%, 100% 30%, 100% 70%, 95% 70%, 93% 100%, 7% 100%, 5% 70%, 0 70%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
#loggedInUsername.show {
display: block;
}
/* Edge wrappers for lobby buttons */
.edge-btn-wrap {
width: 65%;
margin: 10px auto 0;
padding: 2px;
clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
line-height: 0;
display: block;
transition: background 0.2s ease;
}
.edge-btn-cyan {
background: hsla(var(--hue-inv), 100%, 62%, 0.30);
transition: background 0.5s ease;
}
.edge-btn-cyan:hover {
background: hsl(var(--hue-inv), 100%, 62%);
}
.edge-btn-pink {
background: rgba(255,64,129,0.30);
transition: background 0.5s ease;
}
.edge-btn-pink:hover {
background: rgba(255,64,129,1);
}
button#joinBtn {
font-family: 'Press Start 2P', monospace;
background: linear-gradient(to top,
hsla(var(--hue-inv), 100%, 62%, 0.12) 0%,
rgba(5, 5, 10, 0.95) 60%);
border: none;
color: var(--accent);
padding: 15px;
width: 100%;
display: block;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.2s ease, color 0.2s ease;
/* wrapper trick: .edge-btn-wrap O=9, padding p=2 → inner I = O - p(2+√2) = 9 - 6.83 = 2.17
so the diagonal band == the 2px straight padding-border (was 7 → negative band, no diagonal edge) */
clip-path: polygon(0 0, calc(100% - 7.83px) 0, 100% 7.83px, 100% 100%, 7.83px 100%, 0 calc(100% - 7.83px));
}
/* Hover lights the wrapper border only — the inner fill stays dark, just the
label brightens. (Was: solid flood + black text.) */
.edge-btn-cyan:hover button#joinBtn {
background: linear-gradient(to top,
hsla(var(--hue-inv), 100%, 62%, 0.12) 0%,
rgba(5, 5, 10, 0.95) 60%);
color: hsl(var(--hue-inv), 100%, 72%);
}
button#joinBtn:active {
transform: scale(0.98);
}
button#joinBtn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
button#customizeBtn {
background: rgba(5, 5, 10, 0.95);
border: none;
color: #ff4081;
padding: 12px;
width: 100%;
display: block;
font-family: 'Share Tech Mono', monospace;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
/* wrapper trick: .edge-btn-wrap O=9, padding p=2 → inner I = O - p(2+√2) = 9 - 6.83 = 2.17
so the diagonal band == the 2px straight padding-border (was 7 → negative band, no diagonal edge) */
clip-path: polygon(0 0, calc(100% - 7.83px) 0, 100% 7.83px, 100% 100%, 7.83px 100%, 0 calc(100% - 7.83px));
}
/* Hover lights the wrapper border only — fill stays dark, label brightens. */
.edge-btn-pink:hover button#customizeBtn {
background: rgba(5, 5, 10, 0.95);
color: #ff4081;
}
#statusMsg {
margin-top: 16px;
font-size: 0.8rem;
color: var(--dim);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ═══════════════════════════════════════════════════════════════════
BANKED — MAIN MENU HUD BAR (not currently active)
To reactivate: uncomment the HTML block in index.html and
remove the opening/closing comment wrappers below.
─────────────────────────────────────────────────────────────────
MAIN MENU HUD BAR — 5-panel PNG assembly at bottom of screen
Panel order (left → right):
HUDL (stretches) | HUDeL (stretches) | HUDM (fixed 213px) |
HUDeR (stretches) | HUDR (fixed 600px)
All panels share the same natural height: 156px.
Visible on LOBBY only — hidden during active gameplay.
══════════════════════════════════════════════════════════════════ */
#mainHudBar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 156px;
display: flex;
align-items: flex-start;
z-index: 50;
pointer-events: none;
}
/* hide during active gameplay */
body.playing #mainHudBar,
body.in-game #mainHudBar { display: none; }
/* In a session the tool tab drops shopping: the STORE tab is relabelled
LEADERBOARD (syncTabLabels in app.js) and the ITEMS tab is hidden, so the
in-game side tab is the full player list instead of the cosmetics store. */
body.in-game #toolTabs .dtab-wrap:has(.dtab[data-tab="items"]),
body.in-game #toolTabs .dtab-wrap:has(.dtab[data-tab="login"]) { display: none; }
/* ── Shared segment base ─────────────────────────────────────── */
.hud-seg {
position: relative;
display: flex;
align-items: flex-start;
flex-shrink: 0;
}
.hud-seg > img {
display: block;
height: 156px;
pointer-events: none;
user-select: none;
}
/* ── ① Left cap — stretches on X ──────────────────────────── */
.hud-seg-left {
flex: 2 1 0;
min-width: 0;
}
.hud-seg-left > img {
width: 100%;
object-fit: fill;
}
/* ── ② Left extender — stretches on X ─────────────────────── */
.hud-seg-ext-l {
flex: 1 1 0;
min-width: 0;
}
.hud-seg-ext-l > img {
width: 100%;
object-fit: fill;
}
/* ── ③ Centre panel — fixed natural width (decorative) ────── */
.hud-seg-mid {
flex: 0 0 213px;
width: 213px;
}
/* ── ④ Right extender — stretches on X ────────────────────── */
.hud-seg-ext-r {
flex: 1 1 0;
min-width: 0;
}
.hud-seg-ext-r > img {
width: 100%;
object-fit: fill;
}
/* ── ⑤ Right cap — fixed 600px, holds slots + circle ──────── */
.hud-seg-right {
flex: 0 0 600px;
width: 600px;
}
/* ── Right overlay sits on top of HUDR.png ──────────────────── */
.hud-right-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
/*
* HUDR artwork reference (600 × 156 px) — pixel-measured:
* Left slot — Credits ≈ x:45–195, y:1–78 (center x≈120)
* Right slot — Shards ≈ x:205–355, y:1–78 (center x≈280)
* Circle — Avatar ≈ x:438–596, y:2–145 (center x≈517, y≈74)
*/
/* Slot buttons — transparent over the raised artwork slots */
.hud-slot-btn {
position: absolute;
background: transparent;
border: none;
cursor: pointer;
font-family: 'Share Tech Mono', monospace;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
pointer-events: auto;
transition: color 0.15s, filter 0.15s;
}
.hud-slot-btn:hover {
color: #fff;
filter: drop-shadow(0 0 6px var(--accent));
}
.hud-slot-btn:active { transform: scale(0.96); }
/* Credits slot — left tab x:45–195, y:1–78 */
.hud-slot-btn-1 {
top: 2px;
left: 45px;
width: 150px;
height: 76px;
}
/* Shards slot — right tab x:205–355, y:1–78 */
.hud-slot-btn-2 {
top: 2px;
left: 205px;
width: 150px;
height: 76px;
}
.hud-slot-icon-img {
width: 22px;
height: 22px;
object-fit: contain;
pointer-events: none;
}
.hud-slot-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.hud-slot-label {
font-size: 7px;
letter-spacing: 2px;
color: rgba(255,255,255,0.45);
}
.hud-slot-val {
font-size: 14px;
letter-spacing: 1px;
color: rgba(255,255,255,0.90);
}
/* Profile circle button — circle x:438–596, y:2–145 */
.hud-circle-btn {
position: absolute;
top: 2px;
right: 2px;
width: 480px;
height: 432px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
transition: filter 0.18s;
overflow: hidden;
}
.hud-circle-btn:hover {
filter: brightness(1.18) drop-shadow(0 0 10px var(--accent));
}
.hud-circle-inner {
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* ── Light mode ──────────────────────────────────────────────── */
body.theme-light .hud-slot-btn { color: rgba(30,30,30,0.80); }
body.theme-light .hud-slot-btn:hover { color: rgba(0,0,0,1); }
body.theme-light .hud-slot-label { color: rgba(30,30,30,0.50); }
body.theme-light .hud-slot-val { color: rgba(30,30,30,0.90); }
/* ── Responsive: shrink right cap on narrow viewports ──────── */
/* At 900px the right cap scales to 400px (× 0.667 of 600px).
Slot positions scale proportionally: x *= 0.667, y *= 0.667 */
@media (max-width: 900px) {
.hud-seg-right { flex: 0 0 400px; width: 400px; }
.hud-seg-right > img { width: 400px; }
/* Credits slot: left:30, top:1, width:100, height:51 */
.hud-slot-btn-1 { top:1px; left:30px; width:100px; height:51px; }
/* Shards slot: left:137, top:1, width:100, height:51 */
.hud-slot-btn-2 { top:1px; left:137px; width:100px; height:51px; }
.hud-slot-icon-img { width: 16px; height: 16px; }
.hud-slot-val { font-size: 11px; }
.hud-slot-label { font-size: 6px; }
/* Circle: right:1, top:1, width:107, height:96 */
.hud-circle-btn { top:1px; right:1px; width:321px; height:288px; }
}
/* LOADING CANVAS — full-screen, sits on top of everything */
#loadingCanvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 500;
display: none;
}
/* GAME CANVAS — Crisp pixelated rendering at fixed 1960x1960 internal */
#gameCanvas {
display: none;
background: #000;
width: 1960px;
height: 1960px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
border: none;
image-rendering: pixelated;
cursor: crosshair;
transform: perspective(1400px) rotateX(22deg);
transform-origin: center center;
filter: brightness(0.95) contrast(1.05);
/* P3: suppress the browser's own pan/pinch-zoom over the game surface so the
multitouch joystick/camera/pinch handlers own the gesture. Menus/modals
are separate elements and keep native scrolling. */
touch-action: none;
}
#gameCanvas.show {
display: block;
}
/* MINIMAP */
#minimapCanvas {
position: fixed;
/* Bottom-left, flush against the inner edge of the left gutter panel so the
corner lines up with #currencyHud's right-gutter inset at any width. */
bottom: 16px;
left: max(8px, calc((100vw - 1240px) / 2));
top: auto;
right: auto;
width: 180px;
height: 180px;
border: none;
border-radius: 50%;
box-shadow: none;
background: transparent;
z-index: 100;
pointer-events: none;
display: none;
}
#minimapCanvas.show {
display: block;
}
/* ── AUTO-BUILD power-up — shape selector + charge bar (P1) ── */
.ab-ui { position: fixed; left: 12px; bottom: 64px; z-index: 106; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* The `hidden` attr (set by updateAutoBuild when the perk isn't owned / not in play)
must win over the display:flex above — otherwise the 🤖 toggle leaks onto the
lobby/main screen. Author rule beats the UA [hidden] sheet, so restate it here. */
.ab-ui[hidden] { display: none; }
/* Collapse/expand toggle — when collapsed only this button shows; tapping it grows the
editor panel out from the TOP-LEFT toward the bottom-right. */
.ab-toggle {
width: 32px; height: 32px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 16px; line-height: 1;
background: rgba(10, 12, 18, 0.82);
border: 1px solid rgba(0, 229, 255, 0.4);
border-radius: 6px; color: #aee8ff; cursor: pointer;
box-shadow: 0 0 8px rgba(0, 229, 255, 0.18);
-webkit-tap-highlight-color: transparent;
}
.ab-toggle:hover { border-color: #00e5ff; color: #00e5ff; }
.ab-panel {
transform-origin: top left;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s ease;
}
.ab-ui.ab-collapsed .ab-panel {
transform: scale(0);
opacity: 0;
pointer-events: none;
}
.ab-shapes {
display: flex; gap: 6px; padding: 6px;
background: rgba(10, 12, 18, 0.7);
border: 1px solid rgba(0, 229, 255, 0.25);
border-radius: 6px;
}
.ab-shape {
width: 34px; height: 34px; padding: 5px;
display: flex; align-items: center; justify-content: center;
background: rgba(20, 24, 34, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
color: #6b7a90;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ab-shape svg { width: 100%; height: 100%; display: block; }
.ab-shape:hover { color: #aee8ff; border-color: rgba(0, 229, 255, 0.45); }
.ab-shape.sel {
color: #00e5ff; border-color: #00e5ff;
background: rgba(0, 229, 255, 0.12);
box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}
.ab-size {
display: flex; align-items: center; gap: 8px;
margin-top: 6px; padding: 7px 9px;
background: rgba(10, 12, 18, 0.7);
border: 1px solid rgba(0, 229, 255, 0.25);
border-radius: 6px;
}
.ab-size-label { font: 9px/1 monospace; letter-spacing: 0.08em; color: #6b7a90; }
.ab-size-slider {
flex: 1; min-width: 90px; height: 4px; border-radius: 2px;
-webkit-appearance: none; appearance: none;
background: rgba(0, 229, 255, 0.25); cursor: pointer;
}
.ab-size-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 14px; height: 14px; border-radius: 50%;
background: #00e5ff; box-shadow: 0 0 6px rgba(0, 229, 255, 0.5); cursor: pointer;
}
.ab-size-slider::-moz-range-thumb {
width: 14px; height: 14px; border: none; border-radius: 50%;
background: #00e5ff; box-shadow: 0 0 6px rgba(0, 229, 255, 0.5); cursor: pointer;
}
.ab-bar {
position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
width: 260px; height: 10px; z-index: 106;
background: rgba(10, 12, 18, 0.7);
border: 1px solid rgba(0, 229, 255, 0.25);
border-radius: 5px;
overflow: hidden; pointer-events: none;
}
.ab-bar-fill {
height: 100%; width: 100%;
background: linear-gradient(90deg, #00b8d4, #00e5ff 60%, #7af9ff);
border-radius: 5px;
transition: width 0.1s linear;
}
/* SLIM LEADERBOARD — top-left in-game */
#slimLeaderboard {
position: fixed;
top: 8px;
/* Match the minimap/currencyHud gutter inset so both left HUD corners align. */
left: max(8px, calc((100vw - 1240px) / 2));
width: 240px;
display: none;
z-index: 105;
pointer-events: none;
font-size: 12px;
line-height: 1.5;
}
/* ── RUN XP BAR — per-life roguelite progression ──────────────────────
Server-authoritative xp/level/xp_needed straight from the game snapshot
(NOT the account-XP chip). Centered along the top edge, in the gap between
the slim leaderboard (top-left) and the minimap (top-right). */
#runXpBar {
position: fixed;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: clamp(240px, 38vw, 460px);
display: none; /* shown via .show once in a live run */
align-items: center;
gap: 8px;
z-index: 108;
pointer-events: none;
}
#runXpBar.show { display: flex; }
#runLevel {
flex: 0 0 auto;
font-family: 'Share Tech Mono', monospace;
font-size: 14px;
font-weight: 700;
color: #ffe14d;
text-shadow: 0 0 6px rgba(255,205,40,0.55), 0 1px 2px #000;
letter-spacing: 1px;
white-space: nowrap;
}
#runXpTrack {
position: relative;
flex: 1 1 auto;
height: 12px;
background: rgba(6,9,15,0.78);
border: 1px solid rgba(255,225,80,0.32);
border-radius: 6px;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
#runXpFill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #ffd23c, #ff9a3c);
box-shadow: 0 0 8px rgba(255,180,40,0.7);
transition: width 0.12s linear;
}
/* Brief flash on level-up (toggled by updateRunXpBar via the .levelup class). */
#runXpBar.levelup #runXpTrack { animation: runXpFlash 0.45s ease; }
@keyframes runXpFlash {
0%, 100% { border-color: rgba(255,225,80,0.32);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); }
35% { border-color: #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), 0 0 18px 3px rgba(255,255,255,0.8); }
}
#slimLeaderboard.show {
display: block;
}
.lb-row {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
background: rgba(5, 5, 5, 0.5);
border-left: 2px solid var(--dim);
margin-bottom: 2px;
}
.lb-row.me {
border-left-color: var(--accent);
color: var(--accent);
}
/* Slim HUD leaderboard columns — shared by the header (.slb-header) and the
data rows (.lb-row) so they stay aligned: rank · name(flex) · kills · %. */
#slimLeaderboard .lb-rank { flex: 0 0 15px; }
#slimLeaderboard .lb-name {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#slimLeaderboard .lb-kills { flex: 0 0 22px; text-align: right; }
#slimLeaderboard .lb-pct { flex: 0 0 46px; text-align: right; }
/* Row-only dimming; the header keeps its uniform accent colour. */
#slimLeaderboard .lb-row .lb-rank,
#slimLeaderboard .lb-row .lb-pct { color: var(--dim); }
/* DEATH SCREEN */
#deathScreen {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.97);
z-index: 200;
pointer-events: auto;
}
#deathScreen.show {
display: block;
}
#deathScreen .death-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: auto;
}
#wastedText {
font-family: 'Share Tech Mono', monospace;
font-size: 62px;
color: #ff0055;
margin-bottom: 30px;
letter-spacing: 6px;
text-shadow: 0 0 20px #ff0055;
}
#deathStats {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
min-width: 300px;
}
.ds-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid transparent;
border-radius: 4px;
transition: transform .25s ease, background .25s ease,
border-color .25s ease, box-shadow .25s ease;
}
.ds-label {
color: var(--dim);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
}
.ds-val {
color: var(--accent);
font-size: 15px;
font-weight: normal;
font-family: 'Share Tech Mono', monospace;
}
.ds-shards-row {
background: rgba(168, 85, 247, 0.07);
border: 1px solid rgba(168, 85, 247, 0.18);
}
.ds-shards-val {
color: #a855f7 !important;
font-size: 17px !important;
}
/* Active row in the staged death tally — highlight while its value counts up. */
.ds-row.counting {
background: rgba(0, 255, 255, 0.09);
border-color: rgba(0, 255, 255, 0.45);
transform: scale(1.045);
box-shadow: 0 0 22px rgba(0, 255, 255, 0.22);
}
.ds-row.counting .ds-val {
text-shadow: 0 0 12px var(--accent);
}
/* Shards row glows purple to match its themed value. */
.ds-shards-row.counting {
background: rgba(168, 85, 247, 0.14);
border-color: rgba(168, 85, 247, 0.6);
box-shadow: 0 0 22px rgba(168, 85, 247, 0.3);
}
.ds-shards-row.counting .ds-val {
text-shadow: 0 0 14px #a855f7;
}
/* RESPAWN-CHOICE: the tally settles on the Shards row, which stays lit as the
resting state so the player reads their earned shards + new balance before
choosing. A slow breath keeps it alive without pulling focus. */
.ds-shards-row.ds-final {
background: rgba(168, 85, 247, 0.16);
border-color: rgba(168, 85, 247, 0.65);
animation: dsFinalBreath 2.2s ease-in-out infinite;
}
.ds-shards-row.ds-final .ds-val {
text-shadow: 0 0 16px #a855f7;
}
@keyframes dsFinalBreath {
0%, 100% { box-shadow: 0 0 22px rgba(168, 85, 247, 0.26); }
50% { box-shadow: 0 0 34px rgba(168, 85, 247, 0.44); }
}
/* Running shard balance under the tally — shards landing into the cumulative
total, so accumulation is visible. Hidden until the server award resolves. */
.ds-shards-total {
margin: 10px auto 0;
text-align: center;
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: #c9a8f7;
opacity: 0;
transform: translateY(-4px);
transition: opacity .4s ease, transform .4s ease;
}
.ds-shards-total.show {
opacity: 1;
transform: translateY(0);
}
/* INVITE FRIENDS — secondary viral action, magenta-accented */
#deathScreen #deathInviteBtn {
width: 200px;
padding: 11px 28px;
font-size: 15px;
border-width: 2px;
border-color: #7a0a60;
color: #f020c0;
margin-top: 2px;
}
#deathScreen #deathInviteBtn:hover,
#deathScreen #deathInviteBtn:focus {
border-color: #f020c0;
color: #fff;
box-shadow: 0 0 20px rgba(240, 32, 192, 0.4);
}
/* SHARE RUN — viral action, cyan-accented (sibling of INVITE) */
#deathScreen #deathShareBtn {
width: 200px;
padding: 11px 28px;
font-size: 15px;
border-width: 2px;
border-color: #0a607a;
color: #20c0f0;
margin-top: 2px;
}
#deathScreen #deathShareBtn:hover,
#deathScreen #deathShareBtn:focus {
border-color: #20c0f0;
color: #fff;
box-shadow: 0 0 20px rgba(32, 192, 240, 0.4);
}
/* LEAVE is the secondary action — smaller and dimmer than RESPAWN (two ids beat
the generic `#deathScreen button`). */
#deathScreen #deathLeaveBtn {
width: 200px;
padding: 11px 28px;
font-size: 15px;
border-width: 2px;
border-color: #444;
color: #888;
margin-top: 2px;
}
#deathScreen #deathLeaveBtn:hover,
#deathScreen #deathLeaveBtn:focus {
border-color: #888;
color: #ccc;
}
/* AD SLOT — unavoidable overlay on death screen */
#adSlot {
display: none;
position: absolute;
inset: 0;
background: rgba(0,0,0,0.96);
z-index: 10;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
#adSlot.show {
display: flex;
}
.ad-label {
font-size: 9px;
letter-spacing: 3px;
color: #444;
text-transform: uppercase;
}
.ad-placeholder {
width: 320px;
height: 180px;
background: #0a0a0a;
border: 1px dashed #333;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 24px;
letter-spacing: 4px;
font-family: 'Share Tech Mono', monospace;
}
.ad-timer-row {
font-size: 11px;
color: #555;
letter-spacing: 1px;
}
.ad-timer {
color: #a855f7;
font-family: 'Press Start 2P', monospace;
font-size: 11px;
margin: 0 3px;
}
#deathScreen button {
display: block;
margin: 18px auto;
padding: 18px 40px;
width: 280px;
font-size: 21px;
background: transparent;
border: 3px solid #666;
color: #aaa;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Share Tech Mono', monospace;
text-transform: uppercase;
letter-spacing: 2px;
}
#deathScreen button:hover:not(:disabled),
#deathScreen button:focus:not(:disabled) {
border-color: #00ffff;
color: #00ffff;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.42);
}
#deathScreen button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* GUEST UPSELL — shown to signed-out players once the tally finishes. */
#deathGuestUpsell {
display: none;
max-width: 360px;
margin: -6px auto 6px;
opacity: 0;
transform: translateY(8px);
transition: opacity .4s ease, transform .4s ease;
}
#deathGuestUpsell.show {
display: block;
opacity: 1;
transform: translateY(0);
}
.dgu-text {
margin: 0 0 12px;
color: var(--dim);
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.5px;
}
.dgu-text strong {
color: #a855f7;
font-weight: 600;
}
/* Compact, purple-accented CTA. Two ids beat the generic `#deathScreen button`. */
#deathScreen #deathGuestCta {
display: inline-block;
width: auto;
margin: 0 auto;
padding: 11px 26px;
font-size: 14px;
background: rgba(168, 85, 247, 0.08);
border: 2px solid #a855f7;
color: #d8b4fe;
}
#deathScreen #deathGuestCta:hover,
#deathScreen #deathGuestCta:focus {
background: rgba(168, 85, 247, 0.2);
border-color: #a855f7;
color: #fff;
box-shadow: 0 0 26px rgba(168, 85, 247, 0.45);
}
/* TOOL TAB — bottom-right, slides up, aligned with gutter boundary */
/* ── TOOL TAB — bottom-docked. The header (toggle + subtab strip) is ALWAYS
visible so a subtab can be picked before opening; only #toolBody collapses.
NB: #toolTab must NOT be transformed — a transformed ancestor would trap any
position:fixed descendant (this previously hid the toggle on phones). ── */
#toolTab {
position: fixed;
bottom: 0;
right: max(0px, calc((100vw - 1260px) / 2));
width: 320px;
background: rgba(5, 5, 5, 0.9);
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
border-bottom: 3px solid var(--border);
font-size: 0.7rem;
z-index: 100;
display: flex;
flex-direction: column;
transition: width 0.2s ease, right 0.3s ease;
}
/* ── Tool-tab chamfer (desktop) ──────────────────────────────────────────────
The Edge corner-bevel for the floating tool panel. A clip-path on #toolTab
itself would clip the toggle row (#toolBtnRow, top:-30px) and #loadoutPanel
(right:100%), so the bevel rides two nested wrappers around the panel body:
#toolChamfer = 1px border-colour layer, #toolPanel = the fill (same pattern as
.cur-btn-wrap > .cur-btn). They're display:contents by default, so the mobile
full-width sheet renders exactly as before; the bevel is desktop-only. */
#toolChamfer,
#toolPanel { display: contents; }
@media (min-width: 601px) {
/* Hand the fill + border to the wrappers so the corners can be cut. The
theme-light copy overrides the light-theme #toolTab rule above. */
#toolTab,
body.theme-light #toolTab {
background: transparent;
border: none;
}
#toolChamfer {
display: flex;
flex-direction: column;
padding: 1px; /* the 1px shows through the diagonal as the border */
background: var(--border);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
#toolPanel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
background: rgba(5, 5, 5, 0.9);
/* fill chamfer N-0.59 (not N-1, N=10 on #toolChamfer) so the diagonal stroke is a true 1px perpendicular, matching the 1px-padding straight border */
clip-path: polygon(0 0, calc(100% - 9.41px) 0, 100% 9.41px, 100% 100%, 9.41px 100%, 0 calc(100% - 9.41px));
}
body.theme-light #toolChamfer { background: hsla(var(--hue-inv), 28%, 62%, 0.5); }
body.theme-light #toolPanel {
background: linear-gradient(to top,
hsla(var(--hue-inv), 50%, 88%, 0.96) 0%,
hsl(0, 0%, 96%) 100%);
}
}
#toolTabs {
display: flex;
flex-shrink: 0;
background: #111;
gap: 1px;
padding: 1px 1px 0;
}
/* ── Chamfer wrapper: 1px padding + clip-path shows border on diagonal edge ── */
.dtab-wrap {
flex: 1;
padding: 1px 1px 0;
background: transparent;
line-height: 0;
transition: background 0.15s;
}
.dtab-wrap.active {
background: hsl(var(--hue-inv), 78%, 52%);
}
.dtab {
width: 100%;
padding: 8px;
border: none;
background: #111;
color: var(--dim);
cursor: pointer;
font-family: inherit;
font-size: 0.65rem;
transition: color 0.15s, background 0.15s;
display: block;
}
.dtab.active {
color: hsl(var(--hue-inv), 85%, 62%);
background: var(--surface);
}
#toolBody {
min-height: 0;
overflow-y: auto;
padding: 12px 12px 80px;
font-family: monospace;
font-size: 12px;
line-height: 1.4;
max-height: calc(100vh - var(--hud-bottom, 102px) - 100px);
}
/* Collapsed when closed (header + subtab strip stay visible); shown when open */
#toolTab:not(.open) #toolBody {
display: none;
}
/* Desktop: every subtab opens to the same height as STORE/ITEMS (540px), so the
panel doesn't jump heights between tabs. Content taller than this scrolls inside. */
@media (min-width: 601px) and (min-height: 501px) {
#toolTab.open #toolBody {
height: 540px;
}
}
.dtab-pane {
display: none;
}
.dtab-pane.active {
display: block;
}
.dblog {
margin-bottom: 4px;
line-height: 1.2;
}
.dblog.error {
color: var(--danger);
}
.dblog.ok {
color: #00ff88;
}
.dblog.info {
color: var(--accent);
}
.dbg-row {
display: flex;
justify-content: space-between;
margin-bottom: 3px;
color: #ccc;
}
.dbg-row .k {
color: var(--dim);
}
.dbg-row .v {
color: var(--accent);
}
/* ── toolBtnRow: the toggle tab floats on TOP of the panel's top-right corner
(original look). Absolute, so it doesn't take a full-width row inside. ── */
#toolBtnRow {
position: absolute;
top: -30px;
right: -1px;
display: flex;
align-items: stretch;
}
/* Edge-chamfered toggle tab (G2): a bigger hit target plus the signature
top-right / bottom-left notch with a CONTINUOUS border. The border + fill ride
two pseudo layers because a clip-path on the button alone shears its own border
off the diagonal; the button box stays transparent so #toolBtnRow's layout and
the theme-light tint below keep working. (A clip-path on #toolTab itself is the
trap here — it would clip away #toolBtnRow at top:-30px.) */
#toolToggle {
position: relative;
z-index: 0;
background: transparent;
border: none;
color: var(--dim);
padding: 7px 22px;
cursor: pointer;
font-family: inherit;
font-size: 0.78rem;
white-space: nowrap;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
#toolToggle::before { /* border layer (chamfered) */
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--border);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
#toolToggle::after { /* fill layer, inset 1px → 1px chamfered frame shows */
content: "";
position: absolute;
inset: 1px;
z-index: -1;
pointer-events: none;
background: rgba(5, 5, 5, 0.9);
/* fill chamfer N-0.59 (not N-1) so the diagonal stroke is a true 1px perpendicular, matching the straight edges */
clip-path: polygon(0 0, calc(100% - 7.41px) 0, 100% 7.41px, 100% 100%, 7.41px 100%, 0 calc(100% - 7.41px));
}
#toolToggle:hover::after {
background: rgba(12, 12, 14, 0.92);
}
#toolToggle:hover {
color: var(--accent);
}
/* Light theme: the gradient/border above now ride the pseudo layers
(#expandBtn keeps using the shared body.theme-light rule near the top). */
body.theme-light #toolToggle::before {
background: hsla(var(--hue-inv), 30%, 60%, 0.22);
}
body.theme-light #toolToggle::after {
background: linear-gradient(to right,
hsla(var(--hue-inv), 55%, 84%, 0.38) 0%,
hsla(var(--hue-inv), 30%, 96%, 0.10) 100%);
}
/* Orientation toggle (⟳) — MOBILE ONLY, sits to the LEFT of #toolToggle in the row.
Mirrors the toolToggle chamfered tab look. Desktop never shows it. */
#orientToggle, #fsToggle { display: none; }
/* Shared mobile chamfer styling for both the fullscreen + orientation toggles. Display
itself is gated below: the ⛶ fullscreen prompt shows until the app is fullscreen,
then the ⟳ orientation toggle takes its place (html[data-fs] driven by JS). */
html:not([data-brand="desktop"]) #orientToggle,
html:not([data-brand="desktop"]) #fsToggle {
position: relative;
z-index: 0;
background: transparent;
border: none;
color: var(--dim);
padding: 7px 15px;
cursor: pointer;
font-family: inherit;
font-size: 0.95rem;
line-height: 1;
white-space: nowrap;
margin-right: -1px; /* overlap the toolToggle's left chamfer so they read as one row */
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
/* Not fullscreen → prompt for fullscreen first. Fullscreen → reveal orientation toggle. */
html:not([data-brand="desktop"]):not([data-fs="on"]) #fsToggle { display: block; }
html:not([data-brand="desktop"])[data-fs="on"] #orientToggle { display: block; }
html:not([data-brand="desktop"]) #orientToggle::before,
html:not([data-brand="desktop"]) #fsToggle::before { /* border layer */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: var(--border);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
html:not([data-brand="desktop"]) #orientToggle::after,
html:not([data-brand="desktop"]) #fsToggle::after { /* fill layer, inset 1px */
content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
background: rgba(5, 5, 5, 0.9);
clip-path: polygon(0 0, calc(100% - 7.41px) 0, 100% 7.41px, 100% 100%, 7.41px 100%, 0 calc(100% - 7.41px));
}
html:not([data-brand="desktop"]) #orientToggle:hover,
html:not([data-brand="desktop"]) #fsToggle:hover { color: var(--accent); }
html:not([data-brand="desktop"]) #orientToggle.landscape-on { color: var(--accent); }
#expandBtn {
background: rgba(5, 5, 5, 0.9);
border: 1px solid var(--border);
border-right: none;
border-bottom: none;
color: var(--dim);
padding: 5px 10px;
cursor: pointer;
font-family: inherit;
font-size: 0.65rem;
white-space: nowrap;
display: none;
letter-spacing: 0.5px;
}
#expandBtn.visible { display: block; }
#expandBtn:hover { color: var(--accent); }
/* LOGIN tab styling */
.acc-title {
margin-bottom: 12px;
text-align: center;
color: var(--accent);
font-weight: bold;
}
#tabLogin input {
width: 100%;
margin-bottom: 8px;
padding: 8px;
background: #111;
border: 1px solid #333;
color: white;
font-size: 13px;
}
#tabLogin .acc-signup {
width: 55%;
padding: 10px;
border: none;
margin: 0 auto 8px;
display: block;
cursor: pointer;
font-family: inherit;
font-size: 12px;
background: #ff4081;
color: #fff;
}
#tabLogin .acc-login {
display: block;
width: 55%;
padding: 10px;
border: none;
margin: 0 auto 8px;
cursor: pointer;
font-family: inherit;
font-size: 11px;
background: #2a2a2a;
color: #00e5ff;
}
#tabLogin button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
#tabLogin input:-webkit-autofill,
#tabLogin input:-webkit-autofill:hover,
#tabLogin input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px #111 inset;
-webkit-text-fill-color: #fff;
border: 1px solid #333;
transition: background-color 5000s ease-in-out 0s;
}
.oauth-divider {
margin: 12px 0;
text-align: center;
color: #666;
font-size: 11px;
}
.oauth-row {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.oauth-btn {
flex: 1;
padding: 9px 8px;
background: #222;
color: white;
border: 1px solid #333;
cursor: pointer;
font-size: 12px;
text-align: center;
text-decoration: none;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
min-height: 36px;
transition: background 0.15s, border-color 0.15s;
}
.oauth-btn svg { display: block; }
.oauth-btn.google {
background: #1a1a2e;
border-color: #4285F4;
}
.oauth-btn.discord {
background: #1a1a2e;
border-color: #5865F2;
color: #7289da;
}
.oauth-btn.facebook {
background: #1a1a2e;
border-color: #1877f233;
color: #1877f2;
opacity: 0.4;
cursor: not-allowed;
}
.oauth-btn:hover:not(:disabled) {
filter: brightness(1.25);
}
/* ── Light theme: login + OAuth buttons ── */
body.theme-light #tabLogin .acc-login {
background: hsl(var(--hue-inv), 30%, 88%);
color: hsl(var(--hue-inv), 55%, 30%);
}
body.theme-light .oauth-btn {
background: #fff;
border-color: hsla(var(--hue-inv), 25%, 55%, 0.35);
color: hsl(var(--hue-inv), 25%, 25%);
}
body.theme-light .oauth-btn.google { border-color: #4285F4; }
body.theme-light .oauth-btn.discord { border-color: #5865F2; color: #5865F2; }
body.theme-light .oauth-btn.facebook{ border-color: #1877f2; color: #1877f2; }
body.theme-light .oauth-divider,
body.theme-light .forgot a { color: hsl(var(--hue-inv), 18%, 45%); }
/* ── About modal: tech highlight chips + AI cards ───────────────────
Class-based (not inline) so the light-mode overrides below can take
effect. The old inline #111 + JS hover handlers broke in light mode
because the JS rewrote the style attribute and the [style*="#111"]
selector stopped matching. ── */
.about-hl {
background: linear-gradient(to top,
rgba(0, 229, 255, 0.22) 0%,
rgba(0, 229, 255, 0.04) 100%);
color: #dff7ff;
padding: 1px 6px;
border-radius: 3px;
white-space: nowrap;
}
/* About modal is inline-styled dark — flip its surfaces + text in light mode.
Attribute selectors catch the nested dark surfaces wherever they sit. */
body.theme-light #aboutModal > div { background: #f1f1f1 !important; border-color: #ccc !important; }
body.theme-light #aboutModal [style*="#111"] { background: #e6e6e6 !important; }
body.theme-light #aboutModal [style*="#080808"] { background: #ececec !important; }
body.theme-light #aboutModal h3,
body.theme-light #aboutModal p,
body.theme-light #aboutModal div,
body.theme-light #aboutModal span { color: hsl(var(--hue-inv), 22%, 30%) !important; }
/* About highlight chips — light mode (bottom→top gradient for dimension) */
body.theme-light #aboutModal .about-hl {
background: linear-gradient(to top,
hsla(var(--hue-inv), 60%, 60%, 0.30) 0%,
hsla(var(--hue-inv), 55%, 80%, 0.06) 100%) !important;
color: hsl(var(--hue-inv), 45%, 24%) !important;
}
.forgot {
text-align: center;
margin: 10px 0;
}
.forgot a {
color: #888;
font-size: 11px;
text-decoration: none;
}
.premium-block {
border-top: 1px solid #333;
margin: 12px 0;
padding-top: 12px;
}
.premium-title {
color: #ffea00;
font-size: 12px;
margin-bottom: 6px;
}
.premium-btn {
width: 100%;
padding: 10px;
background: #ffd700;
color: #000;
border: none;
cursor: pointer;
font-weight: bold;
font-family: inherit;
}
.premium-note {
font-size: 10px;
color: #666;
margin-top: 4px;
}
.premium-options {
display: none;
gap: 6px;
margin-top: 8px;
}
.premium-options.show {
display: flex;
}
.popt-btn {
flex: 1;
padding: 8px 4px;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 1px;
cursor: pointer;
border: 1px solid #444;
background: #111;
color: #aaa;
transition: all 0.15s;
}
.popt-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.popt-btn.popt-sub {
border-color: #ffd70066;
color: #ffd700;
background: #ffd70008;
}
.popt-btn.popt-sub:hover {
border-color: #ffd700;
background: #ffd70015;
}
#userInfo {
display: none;
text-align: center;
}
#userInfo.show {
display: block;
}
.ui-label {
color: #00ff88;
margin-bottom: 8px;
}
#userEmail {
color: white;
margin-bottom: 12px;
}
#logoutBtn {
padding: 8px 20px;
background: #ff5555;
color: white;
border: none;
cursor: pointer;
font-family: inherit;
}
#editProfileBtn {
display: block;
width: 100%;
padding: 8px 20px;
margin-bottom: 8px;
background: #111;
color: var(--accent);
border: 1px solid var(--accent-border);
cursor: pointer;
font-family: inherit;
font-size: 11px;
letter-spacing: 1px;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#editProfileBtn:hover {
background: var(--accent-glow);
border-color: var(--accent);
}
/* ── TITLE SCREEN ANIMATION ─────────────────────────────────────── */
.title-screen {
position: relative;
width: min(410px, 90vw);
aspect-ratio: 820 / 340;
left: 50%;
transform: translateX(-50%);
margin-bottom: 12px;
}
.logo-base {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('./img/EDGE2.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.shine-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
-webkit-mask-image: url('./img/EDGE2mask.png');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url('./img/EDGE2mask.png');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background: linear-gradient( 105deg, transparent 0%, transparent 30%, rgba(255,255,255,0.0) 38%, rgba(180,240,255,0.55) 44%, rgba(255,255,255,0.97) 50%, rgba(180,240,255,0.55) 56%, rgba(255,255,255,0.0) 62%, transparent 70%, transparent 100% );
background-size: 300% 100%;
background-position: 200% 0;
mix-blend-mode: screen;
opacity: 0;
}
.gradient-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
-webkit-mask-image: url('./img/EDGE2mask.png');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url('./img/EDGE2mask.png');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background: linear-gradient( 105deg, rgba(0,180,255,0.05) 0%, rgba(80,210,255,0.14) 20%, rgba(160,235,255,0.30) 45%, rgba(220,248,255,0.58) 65%, rgba(255,255,255,0.82) 82%, rgba(255,255,255,0.92) 100% );
mix-blend-mode: screen;
opacity: 0;
}
.glow-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
background-image: url('./img/EDGE2.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: drop-shadow(0 0 6px #00f0ff) drop-shadow(0 0 18px #00f0ff) drop-shadow(0 0 40px #ff00aa44);
opacity: 0;
}
.noise-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
-webkit-mask-image: url('./img/EDGE2mask.png');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url('./img/EDGE2mask.png');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E") repeat;
background-size: 160px 160px;
mix-blend-mode: screen;
opacity: 0;
animation: noise-scroll 1.4s linear infinite;
}
@keyframes noise-scroll {
from {
background-position: 0 0;
}
to {
background-position: 160px 160px;
}
}
/* ── PROFILE MODAL ──────────────────────────────────────────────── */
#profileModal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
z-index: 99998;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
#profileModal.show {
display: flex;
}
/* ════════════════ PROFILE OVERVIEW (PROFILE-OVERVIEW) ════════════════ */
/* Overlay stays in layout (visibility, not display:none) so the card's
transform/opacity transition actually runs. backdrop-filter blurs the game
behind it; the solid rgba background is the fallback where blur isn't
supported. Sits just under the edit modal (99998). */
#profileOverview {
position: fixed;
inset: 0;
z-index: 99997;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0);
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, background 0.2s ease,
-webkit-backdrop-filter 0.2s ease, backdrop-filter 0.2s ease,
visibility 0s linear 0.2s;
}
#profileOverview.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: opacity 0.2s ease, background 0.2s ease,
-webkit-backdrop-filter 0.2s ease, backdrop-filter 0.2s ease,
visibility 0s;
}
/* Grows from the top-right corner (where the profile chip lives). Animate ONLY
transform + opacity (compositor-only — smooth on mobile + desktop). */
.po-card {
position: relative;
z-index: 0;
width: 100%;
max-width: 400px;
max-height: 90vh;
overflow-y: auto;
padding: 24px 22px 20px;
background: transparent;
box-shadow: 0 0 0 1px var(--accent-glow, rgba(0, 229, 255, 0.25)),
0 24px 60px rgba(0, 0, 0, 0.75);
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
transform-origin: top right;
transform: translate(40px, -40px) scale(0.4);
opacity: 0;
will-change: transform, opacity;
transition: transform 0.2s cubic-bezier(0.2, 0.85, 0.3, 1), opacity 0.18s ease;
}
/* Border + fill ride two pseudos so the diagonal stroke == the 1px straight border
(a clip-path on the box shears its real border off the diagonal). */
.po-card::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: #1f1f1f;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.po-card::after {
content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
background: #0a0a0a;
clip-path: polygon(0 0, calc(100% - 15.41px) 0, 100% 15.41px, 100% 100%, 15.41px 100%, 0 calc(100% - 15.41px));
}
#profileOverview.show .po-card {
transform: none;
opacity: 1;
}
.po-close {
position: absolute;
top: 10px;
right: 12px;
width: 30px;
height: 30px;
border: none;
background: transparent;
color: #777;
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: color 0.15s;
}
.po-close:hover { color: #fff; }
/* Identity + account level */
.po-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.po-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: radial-gradient(circle at 50% 35%, #1c1c1c, #0c0c0c);
border: 1px solid rgba(255, 255, 255, 0.1);
color: hsl(var(--hue, 190), 70%, 62%);
font-size: 24px;
font-weight: 700;
}
.po-avatar img { width: 100%; height: 100%; object-fit: cover; }
.po-id { min-width: 0; flex: 1; }
.po-name {
font-size: 19px;
font-weight: 700;
color: #f3f3f3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.po-level-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.po-level {
font-family: 'Share Tech Mono', monospace;
font-size: 13px;
color: hsl(var(--hue, 190), 85%, 62%);
flex-shrink: 0;
}
.po-xp-bar {
flex: 1;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.po-xp-fill {
height: 100%;
border-radius: 3px;
background: hsl(var(--hue, 190), 85%, 58%);
transition: width 0.3s ease;
}
/* Currency readout — bigger than the edit form's chips */
.po-currency {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.po-cur {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
}
.po-cur-icon { width: 30px; height: 30px; flex-shrink: 0; }
.po-cur-val {
font-family: 'Share Tech Mono', monospace;
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 1.1;
}
.po-cur-lbl { font-size: 9px; letter-spacing: 2px; color: #777; margin-top: 1px; }
/* Pawn plateau + territory platform */
.po-stage {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 18px;
margin-bottom: 16px;
}
.po-stage-col { display: flex; flex-direction: column; align-items: center; gap: 7px; }
/* Round "plateau" override of the shared sim clip (a 240px rounded box).
Compound selector so it outranks `.sim-canvas-clip`, which is defined later. */
.sim-canvas-clip.po-plateau {
width: 184px;
height: 184px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
}
.po-plateau .pawn-demo-canvas { width: 184px; height: 184px; }
.po-platform {
width: 104px;
height: 104px;
border-radius: 16px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}
.po-stage-label {
font-size: 8px;
letter-spacing: 2px;
color: #666;
max-width: 110px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Lifetime stats — small text */
.po-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 12px 4px;
margin-bottom: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.po-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.po-stat-val {
font-family: 'Share Tech Mono', monospace;
font-size: 16px;
color: #e6e6e6;
}
.po-stat-lbl { font-size: 8px; letter-spacing: 1px; color: #6c6c6c; text-align: center; }
/* Weekly cards */
.po-weekly { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.po-week-card {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 13px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
}
.po-week-icon { font-size: 20px; flex-shrink: 0; }
.po-week-body { flex: 1; min-width: 0; }
.po-week-title { font-size: 12px; font-weight: 700; color: #ddd; }
.po-week-sub {
font-size: 10px;
color: #888;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.po-week-bar {
height: 5px;
border-radius: 3px;
margin-top: 6px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.po-week-fill {
height: 100%;
border-radius: 3px;
background: hsl(var(--hue, 190), 85%, 55%);
transition: width 0.3s ease;
}
.po-week-claim {
flex-shrink: 0;
border: none;
border-radius: 6px;
padding: 7px 12px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
color: #06210f;
background: linear-gradient(180deg, #38e08a, #16b86a);
cursor: pointer;
}
.po-week-claim:hover { filter: brightness(1.1); }
/* Actions */
.po-actions { display: flex; flex-direction: column; gap: 8px; }
.po-btn {
width: 100%;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
color: #ddd;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.po-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); }
.po-btn-primary {
color: #021018;
border-color: transparent;
background: linear-gradient(180deg, hsl(var(--hue, 190), 90%, 62%), hsl(var(--hue, 190), 90%, 50%));
}
.po-btn-primary:hover { filter: brightness(1.08); }
/* Narrow screens: keep the card + stage inside the viewport */
@media (max-width: 430px) {
.po-card { max-width: 92vw; padding: 20px 16px 16px; }
.po-stage { gap: 12px; }
.sim-canvas-clip.po-plateau { width: 150px; height: 150px; }
.po-plateau .pawn-demo-canvas { width: 150px; height: 150px; }
.po-platform { width: 90px; height: 90px; }
.po-cur-val { font-size: 17px; }
}
.pm-card {
position: relative;
z-index: 0;
background: transparent; /* fill → ::after; keeps the 16px chamfer's border continuous (S1) */
border: none; /* border → ::before */
width: 100%;
max-width: 640px;
min-height: 440px;
max-height: 86vh;
overflow: hidden;
box-shadow: 0 0 0 1px var(--accent-glow), 0 20px 50px rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.pm-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: #1f1f1f;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.pm-card::after {
content: "";
position: absolute;
inset: 1px;
z-index: -1;
pointer-events: none;
background: #0a0a0a;
/* fill chamfer N-0.59 (not N-1) so the diagonal stroke is a true 1px perpendicular, matching the straight edges */
clip-path: polygon(0 0, calc(100% - 15.41px) 0, 100% 15.41px, 100% 100%, 15.41px 100%, 0 calc(100% - 15.41px));
}
.pm-header {
padding: 20px 28px;
border-bottom: 1px solid #1a1a1a;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, #111, #0a0a0a);
flex-shrink: 0;
}
.pm-eyebrow {
font-size: 9px;
color: #444;
letter-spacing: 4px;
margin-bottom: 2px;
}
.pm-title {
font-size: 20px;
font-weight: 600;
color: #ddd;
letter-spacing: 1px;
}
.pm-close {
background: none;
border: none;
color: #555;
font-size: 26px;
cursor: pointer;
line-height: 1;
padding: 4px 10px;
transition: color 0.15s;
}
.pm-close:hover {
color: #aaa;
}
.pm-body {
display: flex;
overflow: hidden;
flex: 1;
}
.pm-nav {
display: flex;
flex-direction: column;
width: 130px;
flex-shrink: 0;
border-right: 1px solid #1a1a1a;
padding: 16px 0;
gap: 2px;
}
.pm-tab {
background: none;
border: none;
color: #555;
font-family: inherit;
font-size: 11px;
letter-spacing: 1px;
padding: 10px 18px;
text-align: left;
cursor: pointer;
border-left: 2px solid transparent;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pm-tab:hover {
color: #aaa;
background: #0d0d0d;
}
.pm-tab.active {
color: hsl(var(--hue-inv), 85%, 62%);
border-left-color: hsl(var(--hue-inv), 85%, 62%);
background: hsla(var(--hue-inv), 60%, 12%, 0.35);
}
.pm-content {
flex: 1;
overflow-y: auto;
padding: 24px 28px;
}
.pm-pane {
display: none;
}
.pm-pane.active {
display: block;
}
.pm-section-label {
font-size: 9px;
letter-spacing: 2px;
color: #444;
margin-bottom: 6px;
}
.pm-field-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.pm-field-value {
color: #ccc;
font-size: 13px;
margin-bottom: 4px;
}
.pm-hint {
font-size: 10px;
color: #444;
line-height: 1.5;
}
.pm-currency-row {
display: flex;
gap: 16px;
margin-top: 6px;
}
.pm-currency-chip {
display: flex;
align-items: center;
gap: 7px;
background: #111;
border: 1px solid #222;
border-radius: 4px;
padding: 8px 14px;
flex: 1;
}
.pm-currency-chip .pcc-icon {
font-size: 15px;
}
.pm-currency-chip .pcc-val {
font-size: 14px;
color: #eee;
font-weight: 600;
}
.pm-currency-chip .pcc-lbl {
font-size: 9px;
color: #555;
letter-spacing: 1px;
margin-top: 1px;
}
.pm-action-btn {
background: #111;
border: 1px solid #333;
color: #aaa;
font-family: inherit;
font-size: 10px;
letter-spacing: 1px;
padding: 6px 12px;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.pm-action-btn:hover {
border-color: #555;
color: #ddd;
}
.pm-action-btn.confirm {
border-color: var(--accent-border);
color: var(--accent);
}
.pm-action-btn.confirm:hover {
border-color: var(--accent);
background: var(--accent-glow);
}
.pm-action-btn.danger {
border-color: #ff555533;
color: #ff7070;
}
.pm-action-btn.danger:hover {
border-color: #ff5555;
background: #ff555511;
}
.pm-input {
width: 100%;
background: #0d0d0d;
border: 1px solid #2a2a2a;
color: #ddd;
font-family: inherit;
font-size: 12px;
padding: 9px 12px;
margin-bottom: 10px;
outline: none;
transition: border-color 0.15s;
box-sizing: border-box;
}
.pm-input:focus {
border-color: var(--accent-border);
}
.pm-rename-actions {
display: flex;
gap: 8px;
align-items: center;
}
.pm-err {
font-size: 10px;
color: #ff5555;
margin-top: 6px;
min-height: 14px;
}
/* Toggle rows (preferences) */
/* ── Segmented MANUAL / AUTOMATIC switch ──────────────────────── */
.pm-color-mode-switch {
display: flex;
gap: 3px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 5px;
padding: 3px;
margin-bottom: 10px;
}
.pm-seg-btn {
flex: 1;
padding: 6px 10px;
font-size: 9px;
letter-spacing: 1.8px;
font-family: 'Share Tech Mono', monospace;
background: transparent;
border: none;
color: rgba(255,255,255,0.32);
cursor: pointer;
border-radius: 3px;
transition: background 0.15s, color 0.15s;
}
.pm-seg-btn.pm-seg-active {
background: var(--accent);
color: #000;
}
.pm-seg-btn:hover:not(.pm-seg-active) {
color: rgba(255,255,255,0.65);
}
body.theme-light .pm-color-mode-switch {
background: rgba(0,0,0,0.06);
border-color: rgba(0,0,0,0.12);
}
body.theme-light .pm-seg-btn {
color: rgba(0,0,0,0.32);
}
body.theme-light .pm-seg-btn.pm-seg-active {
color: #fff;
}
/* Inline 3D toggle below the pawn demo canvas */
.pm-3d-toggle-inline {
margin-top: 6px;
width: 240px;
align-items: center;
gap: 8px;
}
.pm-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid #141414;
}
.pm-toggle-label {
font-size: 12px;
color: #bbb;
margin-bottom: 3px;
}
.pm-toggle-sub {
font-size: 10px;
color: #444;
line-height: 1.4;
}
.pm-switch {
position: relative;
display: inline-block;
width: 38px;
height: 22px;
flex-shrink: 0;
}
.pm-switch input {
opacity: 0;
width: 0;
height: 0;
}
.pm-slider {
position: absolute;
inset: 0;
background: #222;
border-radius: 22px;
cursor: pointer;
transition: background 0.2s;
}
.pm-slider:before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background: #555;
border-radius: 50%;
transition: transform 0.2s, background 0.2s;
}
.pm-switch input:checked + .pm-slider {
background: var(--accent-glow);
border-color: var(--accent-border);
}
.pm-switch input:checked + .pm-slider:before {
transform: translateX(16px);
background: var(--accent);
}
/* Block list */
.pm-block-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 140px;
overflow-y: auto;
}
.pm-block-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: #111;
border: 1px solid #1e1e1e;
font-size: 11px;
color: #aaa;
}
.pm-block-row button {
background: none;
border: none;
color: #ff5555;
cursor: pointer;
font-family: inherit;
font-size: 10px;
letter-spacing: 1px;
padding: 2px 6px;
}
.pm-block-row button:hover {
color: #ff8888;
}
.pm-empty-hint {
font-size: 10px;
color: #333;
padding: 8px 0;
}
/* CUSTOMIZE POPUP */
#customizePopup {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 300;
align-items: center;
justify-content: center;
}
#customizePopup.show {
display: flex;
}
.cp-card {
position: relative;
z-index: 0;
background: transparent; /* fill → ::after so the 14px chamfer keeps a continuous border (S1) */
border: none; /* border → ::before (a clip-path shears a real border off the diagonal) */
padding: 24px;
width: min(420px, 92vw);
text-align: center;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.cp-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: #ff4081;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.cp-card::after {
content: "";
position: absolute;
inset: 1px;
z-index: -1;
pointer-events: none;
background: var(--surface); /* adapts per theme — no light-mode override needed */
/* fill chamfer N-0.59 (not N-1) so the diagonal stroke is a true 1px perpendicular, matching the straight edges */
clip-path: polygon(0 0, calc(100% - 13.41px) 0, 100% 13.41px, 100% 100%, 13.41px 100%, 0 calc(100% - 13.41px));
}
.cp-card h3 {
font-family: 'Press Start 2P', monospace;
color: #ff4081;
font-size: 14px;
letter-spacing: 0.15em;
margin: 0 0 14px;
}
.cp-card p {
color: var(--text);
font-size: 13px;
line-height: 1.5;
margin-bottom: 18px;
}
.cp-card button {
background: transparent;
border: 2px solid #ff4081;
color: #ff4081;
padding: 10px 40px;
font-family: 'Share Tech Mono', monospace;
cursor: pointer;
letter-spacing: 2px;
}
/* ── LEVEL-UP CARD POPUP (P2) — 3 perk cards over the live, dimmed world. The
pawn is frozen + invulnerable server-side while this is open, so there is no
danger window; the arena keeps running underneath. ───────────────────────── */
/* Non-blocking: the backdrop ignores pointer events so the player can keep
steering underneath; only the panel itself is interactive. */
#levelupModal {
display: none;
position: fixed;
inset: 0;
z-index: 600;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
animation: levelupFadeIn 0.18s ease;
}
#levelupModal.show { display: flex; }
@keyframes levelupFadeIn { from { opacity: 0; } to { opacity: 1; } }
.levelup-panel {
position: relative;
text-align: center;
pointer-events: auto;
padding: 22px 26px 18px;
background: radial-gradient(ellipse at center, rgba(6,10,18,0.92), rgba(2,4,8,0.96));
border: 1px solid rgba(255,225,80,0.35);
border-radius: 8px;
box-shadow: 0 0 40px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
/* (X) close — stores the pick without consuming it. */
.levelup-close {
position: absolute;
top: 8px;
right: 10px;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: var(--text, #cfeefb);
font-size: 14px;
line-height: 1;
cursor: pointer;
border-radius: 4px;
transition: border-color 0.12s ease, color 0.12s ease;
}
.levelup-close:hover { border-color: #00e5ff; color: #00e5ff; }
/* Force-field countdown bar — drains over the protection window. */
#levelupFfBar {
width: min(420px, 80vw);
height: 5px;
background: rgba(255,255,255,0.10);
border-radius: 3px;
overflow: hidden;
}
#levelupFfFill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #00e5ff, #cfefff);
box-shadow: 0 0 8px rgba(0,229,255,0.6);
transition: width 0.1s linear;
}
.levelup-shuffle {
margin-top: 4px;
padding: 7px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.18);
color: var(--text, #cfeefb);
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
letter-spacing: 1px;
border-radius: 4px;
cursor: not-allowed;
opacity: 0.5;
}
/* Reopen icon next to the run-XP bar — shows stored-pick count. */
#levelupReopen {
display: none;
align-items: center;
gap: 2px;
margin-left: 8px;
padding: 2px 8px;
background: rgba(255,225,80,0.12);
border: 1px solid rgba(255,225,80,0.55);
color: #ffe14d;
font-family: 'Share Tech Mono', monospace;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
pointer-events: auto;
animation: levelupTitlePulse 1.1s ease-in-out infinite;
}
#levelupReopen.show { display: inline-flex; }
#levelupReopen:hover { border-color: #fff; color: #fff; }
/* Trail-mode safety lock: opening the panel freezes the pawn, so the reopen
shortcut greys out while you're exposed on a trail — review cards only from the
safety of your own territory. */
#levelupReopen.locked {
background: rgba(150,150,150,0.10);
border-color: rgba(150,150,150,0.40);
color: #8a8a8a;
cursor: not-allowed;
}
#levelupReopen.locked:hover { border-color: rgba(150,150,150,0.40); color: #8a8a8a; }
.levelup-title {
font-family: 'Press Start 2P', monospace;
font-size: clamp(16px, 3vw, 26px);
color: #ffe14d;
letter-spacing: 0.18em;
margin: 0;
text-shadow: 0 0 14px rgba(255,205,40,0.7), 0 2px 3px #000;
animation: levelupTitlePulse 1.1s ease-in-out infinite;
}
@keyframes levelupTitlePulse {
0%, 100% { text-shadow: 0 0 14px rgba(255,205,40,0.70), 0 2px 3px #000; }
50% { text-shadow: 0 0 24px rgba(255,225,80,0.95), 0 2px 3px #000; }
}
.levelup-sub {
font-family: 'Share Tech Mono', monospace;
font-size: 13px;
letter-spacing: 2px;
color: var(--text, #cfeefb);
margin: 8px 0 0;
opacity: 0.85;
text-transform: uppercase;
}
#levelupCards {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
max-width: min(760px, 94vw);
}
.levelup-card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: clamp(150px, 22vw, 200px);
min-height: 196px;
padding: 22px 16px;
background: transparent;
color: var(--text, #e8f6ff);
cursor: pointer;
font-family: 'Share Tech Mono', monospace;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* border + fill on pseudos so the diagonal stroke == the 1px straight border */
.levelup-card::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: rgba(255,225,80,0.45);
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
transition: background 0.12s ease;
}
.levelup-card::after {
content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
background: rgba(8,12,20,0.92);
clip-path: polygon(0 0, calc(100% - 13.41px) 0, 100% 13.41px, 100% 100%, 13.41px 100%, 0 calc(100% - 13.41px));
}
.levelup-card:hover::before { background: #00e5ff; }
.levelup-card:hover {
transform: translateY(-6px);
box-shadow: 0 0 22px rgba(0,229,255,0.45), inset 0 0 18px rgba(0,229,255,0.12);
}
.lc-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255,225,80,0.6)); }
.lc-name {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
letter-spacing: 0.05em;
color: #ffe14d;
text-align: center;
line-height: 1.5;
}
.lc-desc {
font-size: 12px;
line-height: 1.45;
text-align: center;
opacity: 0.82;
}
/* While a pick is in flight (sent, awaiting the server) gray + block the cards. */
#levelupCards.picking { pointer-events: none; opacity: 0.5; }
.levelup-card:disabled { cursor: default; }
/* FRIEND POPUP — floats above the debug panel */
#friendPopup {
position: fixed;
bottom: 610px; /* above panel (540) + tabs (~30) + toggle (~30) + gap */
right: 0;
width: 240px;
background: rgba(5, 5, 5, 0.97);
border: 1px solid var(--accent);
border-right: none;
padding: 12px 14px;
z-index: 200;
display: none;
}
#friendPopup.show {
display: block;
}
.fp-name {
color: var(--accent);
font-size: 13px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.fp-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.fp-btn {
padding: 5px 9px;
border: 1px solid #444;
background: none;
color: #ccc;
cursor: pointer;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.15s;
}
.fp-btn:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}
.fp-btn:disabled {
opacity: 0.38;
cursor: not-allowed;
}
.fp-close {
position: absolute;
top: 6px;
right: 8px;
background: none;
border: none;
color: var(--dim);
cursor: pointer;
font-size: 12px;
padding: 2px 4px;
}
.fp-close:hover {
color: var(--danger);
}
/* ── Network tab new layout ── */
.net-section {
margin-bottom: 4px;
}
.net-divider {
color: var(--dim);
font-size: 10px;
letter-spacing: 2px;
margin: 10px 0 5px;
padding-top: 7px;
border-top: 1px solid #1a1a1a;
}
.net-player-list {
max-height: 180px;
overflow-y: auto;
}
.net-player-row {
display: flex;
gap: 4px;
align-items: center;
padding: 3px 0;
font-size: 11px;
color: #aaa;
border-bottom: 1px solid #111;
}
.net-player-row.me {
color: var(--accent);
}
.np-rank {
width: 18px;
color: var(--dim);
flex-shrink: 0;
}
.np-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.np-pct {
color: var(--dim);
font-size: 10px;
flex-shrink: 0;
}
/* Protocol / platform / server-ping readouts: neutral grey, not accent cyan.
Light grey in the dark theme, dark grey in the light theme. Quality warnings
(slow ping, perf tier) still override these via their own inline colors. */
.net-proto,
.net-plat, .net-plat span,
.net-ping,
.net-status {
color: #cfcfcf !important;
}
body.theme-light .net-proto,
body.theme-light .net-plat, body.theme-light .net-plat span,
body.theme-light .net-ping,
body.theme-light .net-status {
color: hsl(var(--hue-inv), 18%, 30%) !important;
}
/* ── Friend list new layout ── */
.f-dot {
font-size: 10px;
color: #333;
margin-right: 5px;
flex-shrink: 0;
}
.f-dot.online {
color: #00c853;
}
.f-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.friends-scroll {
max-height: 130px;
overflow-y: auto;
}
.friend-row {
cursor: pointer;
border-radius: 2px;
padding: 3px 2px;
}
.friend-row.selected {
background: #0a1a1a;
}
/* ── Leaderboard full format ── */
.lb-header {
display: flex;
font-size: 10px;
color: var(--dim);
letter-spacing: 1px;
padding: 4px 0 6px;
border-bottom: 1px solid #222;
margin-bottom: 4px;
}
.lb-full-row {
display: flex;
align-items: center;
padding: 3px 0;
font-size: 11px;
color: #aaa;
border-bottom: 1px solid #111;
}
.lb-full-row.me {
color: var(--accent);
}
.lbh-rank {
width: 20px;
flex-shrink: 0;
}
.lbh-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lbh-kills {
width: 36px;
text-align: right;
flex-shrink: 0;
color: var(--dim);
}
.lbh-pct {
width: 46px;
text-align: right;
flex-shrink: 0;
}
.store-empty {
grid-column: 1/-1;
text-align: center;
color: #2a2a2a;
font-size: 13px;
padding: 60px 0;
letter-spacing: 1px;
line-height: 2;
}
/* Guest stand-in for the STORE / ITEMS tool-tab panes — register prompt. */
.guest-tab-gate {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 40px 18px;
text-align: center;
}
.guest-tab-gate .gtg-msg {
color: var(--dim);
font-size: 12px;
letter-spacing: 1px;
line-height: 1.7;
max-width: 240px;
}
.guest-tab-gate .gtg-btn {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
letter-spacing: 1px;
padding: 12px 18px;
color: #ff4081;
background: transparent;
border: 1px solid #ff4081;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.guest-tab-gate .gtg-btn:hover {
color: #fff;
box-shadow: inset 0 0 0 1px #ff4081, 0 0 12px rgba(255, 64, 129, 0.45);
}
/* ── Store item cards ── */
/* Converted from the background-origin (content-box) trick to layered pseudos so the
diagonal stroke == the 1px straight border (the single-clip content-box variant sheared
the diagonal wider than 1px). ::before = border colour (chamfer N=10), ::after = fill
(inset 1px, chamfer M = N-0.59 = 9.41). Both sit behind the in-flow card content. */
.store-card {
position: relative;
z-index: 0;
background: transparent;
border: none;
overflow: visible;
display: flex;
flex-direction: column;
min-height: 160px;
transition: box-shadow 0.15s;
cursor: pointer;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.store-card::before { /* border layer (chamfered) */
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: #1e2430;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
transition: background 0.15s;
}
.store-card::after { /* fill layer, inset 1px → 1px chamfered frame shows */
content: "";
position: absolute;
inset: 1px;
z-index: -1;
pointer-events: none;
background: #0d1117;
clip-path: polygon(0 0, calc(100% - 9.41px) 0, 100% 9.41px, 100% 100%, 9.41px 100%, 0 calc(100% - 9.41px));
}
.store-card:hover::before {
background: var(--accent-border);
}
.store-card:hover {
box-shadow: 0 0 14px var(--accent-glow);
}
.store-card.owned::before {
background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.store-preview-box {
background: #060a0f;
width: 100%;
height: 90px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
box-sizing: border-box;
overflow: hidden;
}
.store-preview-box svg {
width: 100%;
height: 100%;
}
.si-name {
font-size: 11px;
color: #ccc;
letter-spacing: 1px;
padding: 7px 8px 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.si-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px 8px;
gap: 4px;
margin-top: auto;
}
.si-price {
font-size: 10px;
letter-spacing: 0.5px;
}
.si-price.shards {
color: #a78bfa; /* purple */
}
.si-price.credits {
color: #00e5ff; /* cyan */
}
.si-price.free {
color: #00c853;
}
.si-price.usd {
color: #00c853;
font-size: 12px;
font-weight: bold;
}
.si-price.daily {
color: #ff9900;
font-size: 9px;
}
.si-buy {
background: none;
border: 1px solid #2a2a2a;
color: #888;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
padding: 3px 8px;
cursor: pointer;
letter-spacing: 1px;
transition: all 0.15s;
flex-shrink: 0;
}
.si-buy:hover {
border-color: #00e5ff;
color: #00e5ff;
}
.si-tag-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.si-tag {
font-size: 8px;
letter-spacing: 1px;
color: #ffd700;
background: #ffd70015;
border: 1px solid #ffd70033;
padding: 1px 5px;
display: block;
text-align: center;
}
/* ── In-panel store / items layout ── */
#toolTab.store-mode {
width: 680px;
}
#toolTab.items-mode {
width: 600px;
}
/* ── MY LOADOUT panel — separate panel glued to the left of the items-mode tool tab ── */
#loadoutPanel {
/* Child of #toolTab — right: 100% glues it to toolTab's left edge, zero drift */
position: absolute;
top: 0;
right: 100%;
width: 190px;
background: rgba(5, 5, 5, 0.9);
border: 1px solid var(--border);
border-right: none;
z-index: 98;
display: none;
flex-direction: column;
}
#loadoutPanel.show {
display: flex;
}
.lp-title {
padding: 9px 10px 8px;
font-family: 'Press Start 2P', monospace;
font-size: 7px;
color: #888;
letter-spacing: 2px;
text-align: center;
background: #080808;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.lp-list {
flex: 1;
overflow-y: auto;
padding: 0;
display: flex;
flex-direction: column;
}
.lp-list::-webkit-scrollbar {
width: 4px;
}
.lp-list::-webkit-scrollbar-track {
background: #060606;
}
.lp-list::-webkit-scrollbar-thumb {
background: #222;
border-radius: 2px;
}
.lp-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
cursor: pointer;
border-bottom: 1px solid #111;
transition: background 0.12s;
}
.lp-row:hover {
background: #0f0f0f;
}
.lp-row.active {
background: var(--accent-glow);
}
.lp-row.active .lp-slot {
color: var(--accent);
}
.lp-row.active .lp-name {
color: #e0e0e0;
}
.lp-svg {
width: 50px;
height: 50px;
flex-shrink: 0;
background: #0a0f14;
border: 1px solid #1a1a1a;
}
.lp-svg svg {
width: 100%;
height: 100%;
display: block;
}
.lp-info {
flex: 1;
min-width: 0;
}
.lp-slot {
font-size: 7px;
color: #444;
letter-spacing: 1.5px;
}
.lp-name {
font-size: 11px;
color: #aaa;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#toolTab:is(.store-mode,.items-mode) #toolBody {
padding: 0;
overflow: hidden;
}
#toolTab:is(.store-mode,.items-mode) .dtab-pane.active {
height: 540px;
display: flex;
flex-direction: column;
}
.store-layout {
display: flex;
height: 100%;
overflow: hidden;
}
/* Left column: category boxes */
.store-cat-col {
width: 120px;
flex-shrink: 0;
border-right: 1px solid #1a1a1a;
overflow-y: auto;
padding: 8px 8px 80px;
background: #060606;
}
.store-cat-box {
display: block;
position: relative;
z-index: 0;
width: 100%;
background: transparent;
border: none;
color: #555;
font-family: 'Share Tech Mono', monospace;
font-size: 11px;
letter-spacing: 1px;
padding: 10px 10px;
cursor: pointer;
text-align: center;
transition: color 0.15s;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
/* border + fill on pseudos so the diagonal stroke == the 1px straight border */
.store-cat-box::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: #222;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
transition: background 0.15s;
}
.store-cat-box::after {
content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
background: #0d0d0d;
clip-path: polygon(0 0, calc(100% - 5.41px) 0, 100% 5.41px, 100% 100%, 5.41px 100%, 0 calc(100% - 5.41px));
transition: background 0.15s;
}
.store-cat-box:hover:not(.active) { color: #aaa; }
.store-cat-box:hover:not(.active)::before { background: #333; }
.store-cat-box:hover:not(.active)::after { background: #141414; }
.store-cat-box.active { color: var(--accent); }
.store-cat-box.active::before { background: var(--accent-border); }
.store-cat-box.active::after { background: var(--accent-glow); }
.store-cat-divider {
height: 1px;
background: #1a1a1a;
margin: 4px 0;
}
/* Labeled section separator in the category sidebar (COSMETICS / PERKS).
Centered caption with a hairline rule on each side. */
.store-cat-section {
display: flex;
align-items: center;
gap: 6px;
margin: 10px 2px 6px;
color: #5a5a5a;
font-family: 'Press Start 2P', monospace;
font-size: 7px;
letter-spacing: 1px;
white-space: nowrap;
}
.store-cat-section::before,
.store-cat-section::after {
content: "";
flex: 1;
height: 1px;
background: #222;
}
body.theme-light .store-cat-section {
color: hsl(var(--hue-inv), 30%, 42%);
}
body.theme-light .store-cat-section::before,
body.theme-light .store-cat-section::after {
background: hsla(var(--hue-inv), 28%, 55%, 0.32);
}
/* Right column */
.store-content-col {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.store-rarity-row {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 8px 10px;
border-bottom: 1px solid #1a1a1a;
flex-shrink: 0;
}
.srarity-btn {
background: none;
border: 1px solid transparent;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 1px;
padding: 4px 9px;
cursor: pointer;
transition: all 0.15s;
color: var(--dim);
}
.srarity-btn:hover {
border-color: currentColor;
opacity: 0.8;
}
.srarity-btn.active {
border-color: currentColor;
}
/* Single scroll container owning both the featured hero and the grid below it. */
.store-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden; /* clip the ring's spilling side cards (no h-scrollbar) */
padding-bottom: 80px;
/* The carousel↔grid snap is driven by a JS wheel/scroll handler now
(_attachStoreSnap): one tick decisively crosses the whole carousel gap,
while the grid scrolls freely below its head. CSS scroll-snap was too soft
to cross the tall gap in a single tick, so it is intentionally not used. */
}
.store-item-grid {
padding: 12px 12px 4px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
align-content: start;
}
/* ── Featured carousel hero ── */
.store-featured {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 22px 26px 8px; /* tight gap from GET to the separator below */
}
/* Stage = the swipe arena: a centered viewport flanked by the two edge arrows. */
.sf-stage {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Viewport clips the strip so neighbors only show as they're dragged in. */
.sf-viewport {
position: relative;
flex: 0 0 auto;
width: 230px;
max-width: 60%;
overflow: hidden;
/* Let vertical drags scroll the store; we own the horizontal axis. */
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
/* The strip carries the current card (in flow) with prev/next flanking it. */
.sf-strip {
position: relative;
width: 100%;
display: flex;
justify-content: center;
will-change: transform;
transition: transform 0.2s ease-out;
}
/* While a finger/mouse is down the strip tracks 1:1 with no easing. */
.store-featured.sf-dragging .sf-strip {
transition: none;
}
.store-featured.sf-dragging .sf-viewport {
cursor: grabbing;
}
.sf-slot {
width: 100%;
}
/* Current card sits above the neighbors and defines the strip's height. */
.sf-slot-cur {
position: relative;
z-index: 1;
}
/* Neighbors flank the current card, hidden until a drag reveals them. */
.sf-slot-prev,
.sf-slot-next {
position: absolute;
top: 0;
z-index: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.sf-slot-prev { right: 100%; margin-right: 16px; }
.sf-slot-next { left: 100%; margin-left: 16px; }
.store-featured.sf-dragging .sf-slot-prev,
.store-featured.sf-dragging .sf-slot-next,
.store-featured.sf-snapping .sf-slot-prev,
.store-featured.sf-snapping .sf-slot-next {
opacity: 0.4;
}
/* Both arrows: dropped below centre (just above the card's base), stage edges. */
.sf-arrow {
position: absolute;
top: 80%;
transform: translateY(-50%);
z-index: 3;
width: 44px;
height: 44px;
background: transparent;
border: none;
color: #888;
font-family: 'Share Tech Mono', monospace;
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: color 0.15s, box-shadow 0.15s;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
/* hollow chamfer outline via pseudos so the diagonal stroke == the 1px straight edge */
.sf-arrow::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: #1e2430;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
transition: background 0.15s;
}
.sf-arrow::after {
content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
background: #050505;
clip-path: polygon(0 0, calc(100% - 5.41px) 0, 100% 5.41px, 100% 100%, 5.41px 100%, 0 calc(100% - 5.41px));
}
.sf-prev { left: 0; }
.sf-next { right: 0; }
.sf-arrow:hover:not(:disabled) {
color: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
.sf-arrow:hover:not(:disabled)::before { background: var(--accent-border); }
.sf-arrow:disabled {
opacity: 0.2;
cursor: default;
}
/* UA default