/* ARC Radar — Nocturne tokens + Genryhna menu components. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-cyr.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jbmono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2191, U+2193, U+2212; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jbmono-cyr.woff2") format('woff2');
  unicode-range: U+0400-045F; }
@font-face { font-family: 'lucide'; src: url("fonts/lucide.woff2") format('woff2'); font-display: block; }

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --color-neutral-100: #f3f5fe; --color-neutral-200: #e4e7f5; --color-neutral-300: #cfd3e5; --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab; --color-neutral-600: #75798c; --color-neutral-700: #595d6c; --color-neutral-800: #3f424d; --color-neutral-900: #292b31;
  /* Genryhna's steel accent (the menu overrides Nocturne's blurple with it) */
  --color-accent: #c4c8d0; --color-accent-100: #eef0f3; --color-accent-200: #dde0e5; --color-accent-300: #cdd1d8; --color-accent-400: #d4d7dd;
  --color-accent-500: #c4c8d0; --color-accent-600: #9ea3ac; --color-accent-700: #6d717a; --color-accent-800: #454850; --color-accent-900: #2c2e34;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px; --space-6: 16.8px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --glass-pct: 60%;
  --glass-blur: 18px;
}
:root[data-accent="blurple"] {
  --color-accent: #9184d9; --color-accent-100: #f5f4ff; --color-accent-200: #e7e5fe; --color-accent-300: #d2cefd; --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0; --color-accent-600: #796cbf; --color-accent-700: #5d5294; --color-accent-800: #423a6a; --color-accent-900: #2b2741;
}
:root[data-accent="mint"] {
  --color-accent: #7fd1b0; --color-accent-100: #effbf6; --color-accent-200: #d6f4e8; --color-accent-300: #b4ead5; --color-accent-400: #96dfc2;
  --color-accent-500: #7fd1b0; --color-accent-600: #5eaa8c; --color-accent-700: #44806a; --color-accent-800: #2f574a; --color-accent-900: #1f3830;
}
:root[data-accent="amber"] {
  --color-accent: #e3b46b; --color-accent-100: #fdf6ea; --color-accent-200: #f8e6c6; --color-accent-300: #f1d39d; --color-accent-400: #eac282;
  --color-accent-500: #e3b46b; --color-accent-600: #b88d4f; --color-accent-700: #886739; --color-accent-800: #5b4527; --color-accent-900: #3a2c19;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
[class^="i-"], [class*=" i-"] { font-family: 'lucide' !important; font-style: normal; line-height: 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.i-moon-star:before{content:"\e414"} .i-x:before{content:"\e1b1"} .i-minus:before{content:"\e11f"} .i-chevron-down:before{content:"\e071"} .i-check:before{content:"\e070"} .i-radar:before{content:"\e49b"} .i-map:before{content:"\e113"} .i-users:before{content:"\e1a3"} .i-user:before{content:"\e19e"} .i-bot:before{content:"\e1ba"} .i-settings:before{content:"\e157"} .i-crosshair:before{content:"\e0b0"} .i-eye:before{content:"\e0be"} .i-layers:before{content:"\e52d"} .i-palette:before{content:"\e1dc"} .i-link:before{content:"\e107"} .i-copy:before{content:"\e0a2"} .i-refresh-cw:before{content:"\e148"} .i-rotate-ccw:before{content:"\e14b"} .i-save:before{content:"\e150"} .i-folder-open:before{content:"\e246"} .i-download:before{content:"\e0b6"} .i-upload:before{content:"\e19d"} .i-navigation:before{content:"\e126"} .i-navigation-2:before{content:"\e127"} .i-compass:before{content:"\e09f"} .i-locate-fixed:before{content:"\e1da"} .i-zoom-in:before{content:"\e1b5"} .i-zoom-out:before{content:"\e1b6"} .i-maximize:before{content:"\e115"} .i-wifi:before{content:"\e1ad"} .i-wifi-off:before{content:"\e1ae"} .i-grid-3x3:before{content:"\e0ec"} .i-circle-dot:before{content:"\e348"} .i-sliders-horizontal:before{content:"\e299"} .i-scan-eye:before{content:"\e53a"} .i-keyboard:before{content:"\e283"} .i-skull:before{content:"\e220"} .i-shield:before{content:"\e15b"} .i-heart:before{content:"\e0f5"} .i-footprints:before{content:"\e3bc"} .i-tag:before{content:"\e182"} .i-plug:before{content:"\e382"} .i-globe:before{content:"\e0eb"} .i-mountain:before{content:"\e230"} .i-target:before{content:"\e183"} .i-swords:before{content:"\e2b3"} .i-power:before{content:"\e143"} .i-panel-top:before{content:"\e439"} .i-filter:before{content:"\e0d5"} .i-type:before{content:"\e197"} .i-route:before{content:"\e542"} .i-ruler:before{content:"\e14e"} .i-focus:before{content:"\e29d"} .i-signal:before{content:"\e25e"} .i-monitor:before{content:"\e120"} .i-tags:before{content:"\e35f"} .i-scan:before{content:"\e256"} .i-circle:before{content:"\e07a"} .i-triangle:before{content:"\e191"} .i-diamond:before{content:"\e2d1"} .i-user-round:before{content:"\e46c"} .i-shield-alert:before{content:"\e1fd"} .i-radio:before{content:"\e145"} .i-arrow-up:before{content:"\e04e"} .i-arrow-down:before{content:"\e046"} .i-move:before{content:"\e124"} .i-lock:before{content:"\e10e"}

#map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#map.dragging { cursor: grabbing; }

/* — glass surfaces (Genryhna shell) — */
.glass {
  background: color-mix(in srgb, var(--color-surface) var(--glass-pct), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 24%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
}

/* — HUD pill (top-left) — */
#hud { position: fixed; left: 14px; top: 14px; z-index: 20; display: flex; align-items: center; gap: 12px;
  height: 34px; padding: 0 12px; border-radius: var(--radius-md); font-size: 12px; user-select: none; }
#hud .sep { width: 1px; height: 14px; background: color-mix(in srgb, var(--color-text) 14%, transparent); }
#hud .k { color: var(--color-neutral-500); }
#hud .v { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-200); }
#hud .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-neutral-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-neutral-600) 25%, transparent); }
#hud .dot.ok { background: #6fd39b; box-shadow: 0 0 0 3px color-mix(in srgb, #6fd39b 22%, transparent); }
#hud .dot.warn { background: #e3b46b; box-shadow: 0 0 0 3px color-mix(in srgb, #e3b46b 22%, transparent); }
#hud .dot.bad { background: #e0736b; box-shadow: 0 0 0 3px color-mix(in srgb, #e0736b 22%, transparent); }
#hud .brand { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; }
#hud .brand i { color: var(--color-accent); font-size: 15px; }
#hud .follow { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 4px 0 8px; margin-left: 2px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-accent-200); font-size: 11.5px; max-width: 220px; }
#hud .follow i { font-size: 12px; }
#hud .follow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud .follow button { all: unset; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; color: var(--color-neutral-400); }
#hud .follow button:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 10%, transparent); }

/* — map controls (bottom-right) — */
#ctl { position: fixed; right: calc(var(--sb-off, 0px) + 14px); bottom: 14px; transition: right .28s cubic-bezier(.3,.7,.2,1); z-index: 20; display: flex; flex-direction: column; gap: 2px;
  padding: 4px; border-radius: var(--radius-md); }
.ibtn { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm);
  font-size: 15px; color: var(--color-neutral-400); transition: background-color .15s ease, color .15s ease; }
.ibtn:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.ibtn.on { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
#ctl .sep { height: 1px; margin: 2px 4px; background: color-mix(in srgb, var(--color-text) 10%, transparent); }

/* — reopen pill — */
#reopen { all: unset; position: fixed; right: 14px; top: 14px; z-index: 30; cursor: pointer; display: none; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; }
#reopen i { color: var(--color-accent); }
#reopen:hover { background: color-mix(in srgb, var(--color-surface) 85%, transparent); }
#reopen.show { display: flex; }

/* — window — */
/* — right sidebar (fixed, not draggable) — */
#win { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: var(--sb-w, 380px); max-width: 100vw;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 0;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--color-text) 14%, transparent), -18px 0 40px rgba(0,0,0,0.35);
  transition: width .28s cubic-bezier(.3,.7,.2,1), transform .28s cubic-bezier(.3,.7,.2,1), opacity .2s ease; }
#win.min { width: 44px; }
#win.min .titlebar .t, #win.min .wbody, #win.min #wClose { display: none; }
#win.min .titlebar { padding: 0; justify-content: center; }
#win.min .titlebar .acts { margin: 0; }
#win.closed { transform: translateX(100%); opacity: 0; pointer-events: none; }
.titlebar { flex: none; height: 38px; display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-4);
  user-select: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-text) 10%, transparent); }
.titlebar .t { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.titlebar .t i { font-size: 15px; color: var(--color-accent); }
.titlebar .slash { color: var(--color-neutral-600); }
.titlebar .sub { font-size: 12px; color: var(--color-neutral-400); }
.titlebar .acts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.wbtn { all: unset; cursor: pointer; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--color-neutral-400); }
.wbtn:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.wbtn.close:hover { background: oklch(0.55 0.15 25 / 0.55); }
.wmain { flex: 1; min-height: 0; display: flex; }
.rail { flex: none; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2) 0;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-text) 10%, transparent); }
.rail button { all: unset; flex: none; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--radius-sm); font-size: 15px; color: var(--color-neutral-400); transition: background-color .15s ease, color .15s ease; }
.rail button:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.rail button.on { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.wbody { flex: 1; min-width: 0; overflow: auto; padding: var(--space-4);
  background: color-mix(in srgb, var(--color-bg) calc(var(--glass-pct) + 10%), transparent);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; align-content: start; }
.wbody::-webkit-scrollbar { width: 8px; } .wbody::-webkit-scrollbar-thumb { background: var(--color-neutral-800); border-radius: 4px; }
.col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* — group box — */
.group { display: flex; flex-direction: column; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-text) 3%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent); }
.ghead { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-neutral-500); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-text) 8%, transparent); }
.ghead i { font-size: 12px; color: var(--color-accent); }
.gitems { display: flex; flex-direction: column; padding: var(--space-1) 0; }
.note { padding: 4px var(--space-3) 8px; font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-500); }

/* toggle */
.tg { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 30px;
  padding: 0 var(--space-3); font-size: 12.5px; color: var(--color-neutral-300); transition: color .15s ease; }
.tg:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.tg.on { color: var(--color-text); }
.tg .r { display: flex; align-items: center; gap: var(--space-2); }
.sw { flex: none; position: relative; width: 32px; height: 18px; border-radius: 9px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-neutral-700); transition: background-color .15s ease; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-neutral-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.5); transition: left .15s; }
.tg.on .sw { background: var(--color-accent-800); box-shadow: inset 0 0 0 1px var(--color-accent); }
.tg.on .sw::after { left: 17px; background: var(--color-accent-300); }
.key { all: unset; cursor: pointer; min-width: 22px; height: 20px; padding: 0 6px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-neutral-400);
  background: color-mix(in srgb, var(--color-text) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent); }
.key:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.key.bind { color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-accent); }

/* slider */
.sl { display: flex; flex-direction: column; gap: 6px; padding: 6px var(--space-3) 8px; }
.sl .h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.sl .h span:first-child { color: var(--color-neutral-200); }
.sl .val { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-400); }
.sl .trk { position: relative; height: 14px; }
.sl .trk .bg { position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 2px; background: var(--color-neutral-800); }
.sl .trk .fill { position: absolute; left: 0; top: 5px; height: 4px; border-radius: 2px; background: var(--color-accent); pointer-events: none; }
.sl .trk .knob { position: absolute; top: 1px; translate: -50% 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-300);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; }
.sl input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

/* dropdown */
.dd { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 6px var(--space-3) 8px; }
.dd > span { font-size: 12.5px; color: var(--color-neutral-200); }
.dd .btn { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 8px;
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-text) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent); font-size: 12px; color: var(--color-text); }
.dd .btn:hover { background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.dd.open .btn { box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.dd .btn i { font-size: 12px; color: var(--color-neutral-500); transition: rotate .2s ease; }
.dd.open .btn i { rotate: 180deg; }
.dd .menu { position: absolute; z-index: 5; left: var(--space-3); right: var(--space-3); top: 100%; margin-top: -4px; display: none; flex-direction: column;
  padding: 4px; border-radius: var(--radius-sm); max-height: 240px; overflow: auto;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 12%, transparent), var(--shadow-md); }
.dd.open .menu { display: flex; }
.dd .opt { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 24px; padding: 0 8px;
  border-radius: 4px; font-size: 12px; color: var(--color-neutral-400); }
.dd .opt:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.dd .opt.on { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.dd .opt i { font-size: 12px; color: var(--color-accent); }

/* button */
.bt { padding: 6px var(--space-3); }
.bt button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-text) 6%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: 12px; font-weight: 500; color: var(--color-text); }
.bt button:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.bt button:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.bt button i { font-size: 13px; color: var(--color-accent); }

/* color */
.cl { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 30px; padding: 0 var(--space-3);
  font-size: 12.5px; color: var(--color-neutral-200); cursor: pointer; }
.cl:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.cl .r { display: flex; align-items: center; gap: 8px; }
.cl .hex { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-neutral-500); text-transform: uppercase; }
.cl .sw2 { width: 32px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 35%, transparent),
  inset 0 1px 0 rgba(255,255,255,0.25); }
.cl input[type=color] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

/* text field */
.tx { display: flex; flex-direction: column; gap: 5px; padding: 6px var(--space-3) 8px; }
.tx > span { font-size: 12.5px; color: var(--color-neutral-200); }
.tx input { all: unset; box-sizing: border-box; height: 26px; padding: 0 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11.5px;
  color: var(--color-text); caret-color: var(--color-accent); background: color-mix(in srgb, var(--color-text) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent); }
.tx input:focus { box-shadow: inset 0 0 0 1px var(--color-accent-600); }

/* stat rows */
.st { display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding: 0 var(--space-3); font-size: 12.5px; color: var(--color-neutral-300); }
.st .v { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-200); }

/* toast */
#toast { position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 40; padding: 7px 14px; border-radius: var(--radius-md);
  font-size: 12.5px; opacity: 0; transition: opacity .2s ease, translate .2s ease; pointer-events: none; }
#toast.show { opacity: 1; translate: -50% -4px; }

/* join dialog */
#join { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
#join.show { display: grid; }
#join .box { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: 18px; border-radius: var(--radius-lg); }
#join h3 { margin: 0; font-size: 18px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
#join h3 i { color: var(--color-accent); }
#join p { margin: 0; font-size: 13px; color: var(--color-neutral-400); }

@media (max-width: 700px) {
  #win:not(.min) { width: 100vw; }
  #hud .hide-sm { display: none; }
}