/* ==========================================================================
   Altory v4 — "игровой зал за стеклом"
   Ink field with drifting game pieces, liquid glass on every surface, one gold accent.
   ========================================================================== */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;
  --z-dock: 50; --z-bar: 60; --z-side: 120; --z-modal: 200; --z-toast: 300;

  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font: var(--font-ui);
  --font-meme: var(--font-display);
  --font-chess: 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'DejaVu Sans', serif;
  --maxw: 1240px;

  color-scheme: dark;
  --ink-0: #0C0F15; --ink-1: #131823; --ink-2: #1A2030;
  --fg: #E7EAF0; --fg-2: #A3ACBB; --fg-3: #6E7787;
  --line: rgb(255 255 255 / 0.09); --line-2: rgb(255 255 255 / 0.16);
  --gold: #EDB95E; --gold-2: #F6D493; --gold-ink: #2A1E08;
  --ok: #7CC9A0; --bad: #E58C7E; --info: #8DB6DB; --warn: #E9C46A;
  --team-a: #8DB6DB; --team-b: #E3A07A;
  --plus: #EDB95E; --ultra: #B79BFF;

  /* aliases used by views and games */
  --bg: var(--ink-0);
  --surface: rgb(255 255 255 / 0.05);
  --surface-2: rgb(255 255 255 / 0.06);
  --surface-3: rgb(255 255 255 / 0.11);
  --accent: var(--gold); --accent-2: var(--gold-2); --on-accent: var(--gold-ink);

  /* glass material */
  --g-tint-a: 0.10; --g-tint-b: 0.035; --g-blur: 18px; --g-sat: 165%;
  --g-rim: 0.42; --g-rim-low: 0.06;
  --g-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.65), 0 2px 6px -2px rgb(0 0 0 / 0.35);
  --g-solid: rgb(22 27 38 / 0.9);
  --shadow: var(--g-shadow);
}
:root[data-theme='light'] {
  color-scheme: light;
  --ink-0: #E8ECF2; --ink-1: #F3F5F9; --ink-2: #FFFFFF;
  --fg: #141821; --fg-2: #4B5566; --fg-3: #7B8494;
  --line: rgb(20 24 33 / 0.10); --line-2: rgb(20 24 33 / 0.18);
  --gold: #A8721A; --gold-2: #C58E2D; --gold-ink: #FFF8EA;
  --ok: #2F8A5E; --bad: #C4553F; --info: #3C79A8; --warn: #A87A12;
  --team-a: #3C79A8; --team-b: #C06A3A; --plus: #A8721A; --ultra: #6B4FD8;
  --surface: rgb(255 255 255 / 0.45); --surface-2: rgb(255 255 255 / 0.55); --surface-3: rgb(255 255 255 / 0.85);
  --g-tint-a: 0.62; --g-tint-b: 0.34; --g-rim: 0.95; --g-rim-low: 0.35;
  --g-shadow: 0 18px 40px -20px rgb(30 40 60 / 0.35), 0 2px 6px -2px rgb(30 40 60 / 0.12);
  --g-solid: rgb(255 255 255 / 0.92);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--ink-0); color: var(--fg); font: 500 15px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--gold) 40%, transparent); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 16px; height: 16px; } .ico.lg { width: 28px; height: 28px; }
.muted { color: var(--fg-2); } .faint { color: var(--fg-3); } .accent, .gold { color: var(--gold); }
.row { display: flex; align-items: center; gap: var(--sp-2); } .row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.spacer { flex: 1; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.small { font-size: 13px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
h1 { font-size: clamp(34px, 5.2vw, 64px); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(20px, 2.2vw, 26px); }
h3 { font-size: 17px; }
p { margin: 0; }

/* ---------- backdrop ---------- */
#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ==========================================================================
   LIQUID GLASS — one material for every surface.
   tint + backdrop blur + 1px rim light (::before) + pointer-following sheen (in the background stack)
   [data-liquid] additionally refracts the backdrop in "ultra" quality (glass.js).
   ========================================================================== */
.glass, .card {
  position: relative; isolation: isolate;
  background:
    linear-gradient(160deg, rgb(255 255 255 / var(--g-tint-a)), rgb(255 255 255 / var(--g-tint-b)) 55%, rgb(255 255 255 / calc(var(--g-tint-b) * 1.6)));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / calc(var(--g-rim) * 0.8)),
    inset 0 -1px 0 0 rgb(255 255 255 / var(--g-rim-low)),
    inset 0 0 22px -6px rgb(255 255 255 / calc(var(--g-tint-a) * 0.9)),
    var(--g-shadow);
  border-radius: var(--r-xl);
}
.glass::before, .card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(135deg,
    rgb(255 255 255 / var(--g-rim)) 0%, rgb(255 255 255 / calc(var(--g-rim) * 0.25)) 22%,
    rgb(255 255 255 / var(--g-rim-low)) 50%, rgb(255 255 255 / calc(var(--g-rim) * 0.18)) 78%, rgb(255 255 255 / calc(var(--g-rim) * 0.6)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.game-tile::after, .promo::after, .sheen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .10), transparent 62%); opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.game-tile:hover::after, .promo:hover::after, .sheen:hover::after { opacity: 1; }
.soft { --g-tint-a: 0.06; --g-tint-b: 0.02; }
.thick { --g-blur: 30px; --g-tint-a: 0.14; }
:root[data-theme='light'] .soft { --g-tint-a: 0.45; --g-tint-b: 0.25; }
:root[data-theme='light'] .thick { --g-tint-a: 0.82; }
:root[data-glass='lite'] .glass, :root[data-glass='lite'] .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-solid); }
:root[data-glass='lite'] #bg { opacity: .5; }

.pad { padding: var(--sp-6); } .pad-sm { padding: var(--sp-4); }
.well { background: rgb(0 0 0 / 0.18); border-radius: var(--r-sm); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25), inset 0 0 0 1px var(--line); }
:root[data-theme='light'] .well { background: rgb(255 255 255 / 0.55); box-shadow: inset 0 1px 2px rgb(20 30 50 / 0.08), inset 0 0 0 1px var(--line); }
.section-head { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-4); }
.section-head h2 { flex: 1; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: rgb(255 255 255 / 0.08);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-full); white-space: nowrap; user-select: none;
  font-weight: 700; font-size: 14px; background: var(--b-bg); color: var(--fg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px var(--line);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast);
}
:root[data-theme='light'] .btn { --b-bg: rgb(255 255 255 / 0.7); }
.btn:hover { transform: scale(1.03); --b-bg: rgb(255 255 255 / 0.13); }
:root[data-theme='light'] .btn:hover { --b-bg: rgb(255 255 255 / 0.95); }
.btn:active { transform: scale(0.96); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.sm { min-height: 32px; padding: 0 var(--sp-3); font-size: 13px; }
.btn.lg-size { min-height: 50px; padding: 0 var(--sp-6); font-size: 15px; }
.btn.icon { width: 40px; padding: 0; } .btn.icon.sm { width: 32px; }
.btn.ghost { --b-bg: transparent; box-shadow: none; }
.btn.ghost:hover { --b-bg: rgb(255 255 255 / 0.08); }
.btn.danger { color: var(--bad); }
.btn.on { --b-bg: color-mix(in srgb, var(--gold) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
/* primary: a lens of liquid gold */
.btn.primary {
  color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, color-mix(in srgb, var(--gold) 82%, #000));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -2px 6px rgb(120 70 0 / 0.35), 0 8px 22px -10px color-mix(in srgb, var(--gold) 80%, transparent);
}
.btn.primary:hover { background: linear-gradient(180deg, #FBE2AE, var(--gold-2) 55%, var(--gold)); }
:root[data-theme='light'] .btn.primary { color: #fff; }
.btn.tg { background: linear-gradient(180deg, #4cc0f5, #2AABEE 55%, #1d8fcc); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 8px 22px -10px #2AABEE; }
.btn.ultra-btn { color: #fff; background: linear-gradient(180deg, #c9b5ff, #9b7bff 55%, #6b4fd8); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 8px 22px -10px #9b7bff; }
.btn.plus-btn { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5); }

/* ---------- controls ---------- */
.seg, .tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-full); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; }
:root[data-theme='light'] .seg, :root[data-theme='light'] .tabs { background: rgb(255 255 255 / 0.5); }
.seg button, .tabs button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-full); font-size: 13px; font-weight: 700; color: var(--fg-2); transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.tabs button { min-height: 36px; padding: 0 var(--sp-4); font-size: 14px; }
.seg button:hover, .tabs button:hover { color: var(--fg); }
.seg button[aria-pressed='true'], .tabs button[aria-selected='true'] { color: var(--fg); background: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 2px 8px -2px rgb(0 0 0 / 0.4); }
:root[data-theme='light'] .seg button[aria-pressed='true'], :root[data-theme='light'] .tabs button[aria-selected='true'] { background: #fff; box-shadow: 0 2px 6px -2px rgb(30 40 60 / .25); }
.seg[aria-disabled='true'] { pointer-events: none; opacity: .7; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; color: var(--fg-2); font-weight: 700; }
.input { width: 100%; min-height: 44px; padding: 0 var(--sp-4); border: 0; outline: none; border-radius: var(--r-sm); background: rgb(0 0 0 / 0.2); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25), inset 0 0 0 1px var(--line); transition: box-shadow var(--dur-fast); }
:root[data-theme='light'] .input { background: rgb(255 255 255 / 0.7); box-shadow: inset 0 1px 2px rgb(20 30 50 / 0.08), inset 0 0 0 1px var(--line); }
textarea.input { padding: 10px var(--sp-4); min-height: 80px; resize: vertical; }
.input:focus { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.input::placeholder { color: var(--fg-3); }
select.input { appearance: none; }
.switch { position: relative; width: 46px; height: 28px; border-radius: 99px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px var(--line); flex: none; transition: background-color var(--dur-base) var(--ease); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .35); transition: transform var(--dur-base) var(--spring); }
.switch[aria-checked='true'] { background: var(--gold); }
.switch[aria-checked='true']::after { transform: translateX(18px); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); white-space: nowrap; }
.chip.accent { color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.chip.ok { color: var(--ok); } .chip.bad { color: var(--bad); }
.chip.ultra { color: var(--ultra); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ultra) 45%, transparent); }
.coins { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; color: var(--gold); }

/* ==========================================================================
   SHELL: dock | content | global chat
   ========================================================================== */
#app { display: grid; grid-template-columns: 92px minmax(0, 1fr) 340px; gap: var(--sp-4); padding: var(--sp-4); min-height: 100vh; }
#app.no-chat { grid-template-columns: 92px minmax(0, 1fr); }
#app.no-chat .side { display: none; }

.dock { position: sticky; top: var(--sp-4); height: calc(100vh - 2 * var(--sp-4)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-2); border-radius: var(--r-xl); z-index: var(--z-dock); overflow: visible; }
.logo { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--sp-2); transition: transform var(--dur-slow) var(--spring); }
.logo:hover { transform: rotate(-8deg) scale(1.08); }
.logo svg { width: 40px; height: 40px; }
.dock-nav { display: flex; flex-direction: column; gap: 4px; position: relative; width: 100%; }
.dock-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: var(--r-md); color: var(--fg-2); font-size: 11px; font-weight: 800; z-index: 2; transition: color var(--dur-fast), transform var(--dur-base) var(--spring); }
.dock-item { transform: scale(var(--mag, 1)); }
.dock-item:hover { color: var(--fg); }
.dock-item.active { color: var(--fg); }
.dock-item .ico { width: 22px; height: 22px; transition: transform var(--dur-base) var(--spring); }
.dock-item.active .ico { color: var(--gold); }
.dock-item[data-nav='subs'] .ico { color: var(--gold); }
.dock-item .unread { position: absolute; top: 4px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 800 10px/18px var(--font-display); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--ink-0); }
/* the liquid lens that slides to the active item and squashes while it travels */
.lens { position: absolute; left: 0; right: 0; top: 0; height: 64px; border-radius: var(--r-md); z-index: 1; pointer-events: none; --g-tint-a: 0.16; --g-tint-b: 0.06; --g-blur: 6px;
  transition: transform var(--dur-slow) var(--spring), height var(--dur-slow) var(--spring), width var(--dur-slow) var(--spring), opacity var(--dur-base); }
.lens.moving { animation: lens-squash 420ms var(--ease); }
@keyframes lens-squash { 40% { scale: 1.08 0.82; } 70% { scale: 0.97 1.05; } }
.dock-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.dock-tg { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #4cc0f5, #2AABEE); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 6px 18px -8px #2AABEE; transition: transform var(--dur-base) var(--spring); }
.dock-tg:hover { transform: scale(1.1) rotate(-6deg); }
.dock-ava { display: block; border-radius: 50%; transition: transform var(--dur-base) var(--spring); }
.dock-ava:hover { transform: scale(1.08); }

#view { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: var(--sp-8); outline: none; }
#view > .section-head { margin: var(--sp-4) 0 0; }
#view { position: relative; }
#view.loading { min-height: 60vh; }
#view.loading > :not(.page-loader) { opacity: 0 !important; transition: none; pointer-events: none; }
.page-loader { position: absolute; left: 50%; top: min(30vh, 260px); transform: translateX(-50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; animation: fade-in 200ms var(--ease) both;
  background: rgb(255 255 255 / .06); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), var(--g-shadow); }
.page-loader.out { opacity: 0; transition: opacity 180ms var(--ease); }
.page-loader .ring { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgb(127 127 127 / .25); border-top-color: var(--gold); animation: spin 720ms linear infinite; }
@keyframes fade-in { from { opacity: 0; } }
.blk-in { animation: blk-in 460ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 36ms); }
@keyframes blk-in { from { opacity: 0; transform: translateY(12px) scale(.99); } }
.blk-out { animation: blk-out 140ms var(--ease) forwards; }
@keyframes blk-out { to { opacity: 0; transform: translateY(-4px); } }

.side { position: sticky; top: var(--sp-4); height: calc(100vh - 2 * var(--sp-4)); display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: visible; z-index: var(--z-side); }
.side > .chat { border-radius: inherit; }
.side-close { display: none; }

.mbar, .tabbar { display: none; }
.announce { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); }
.announce .ico { color: var(--gold); }

.skel { border-radius: var(--r-lg); background: linear-gradient(90deg, rgb(255 255 255 / .04) 30%, rgb(255 255 255 / .1) 50%, rgb(255 255 255 / .04) 70%) 0 0 / 300% 100%; animation: skel 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 80ms); min-height: 64px; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: calc(var(--z-toast) + 1); }
.spark { position: fixed; pointer-events: none; z-index: var(--z-toast); width: 0; height: 0; }
.spark i { position: absolute; left: -1px; top: -4px; width: 2px; height: 8px; border-radius: 2px; background: var(--gold-2); animation: spark 420ms var(--ease) forwards; }
@keyframes spark { from { opacity: 1; transform: rotate(var(--a)) translateY(-6px); } to { opacity: 0; transform: rotate(var(--a)) translateY(-22px) scaleY(.4); } }

/* ==========================================================================
   AVATAR: frames, effects
   ========================================================================== */
.ava { --s: 40px; position: relative; isolation: isolate; width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: grid; place-items: center; color: rgb(255 255 255 / .94);
  background: radial-gradient(120% 120% at 30% 20%, var(--a1), var(--a2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -3px 8px rgb(0 0 0 / .25); }
.ava > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ava > .ico { width: 52%; height: 52%; stroke-width: 2; }
.ava::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; z-index: 2; }
.ava.fr-none::after { display: none; }
.ava.fr-ring::after { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .35); }
.ava.fr-double::after { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .5), 0 0 0 4px rgb(255 255 255 / .1), 0 0 0 5.5px rgb(255 255 255 / .4); }
.ava.fr-dashed::after { border: 2px dashed rgb(255 255 255 / .55); inset: -5px; animation: spin 14s linear infinite; }
.ava.fr-gold::after { inset: -4px; padding: 2.5px; background: conic-gradient(from 210deg, #8a6420, #f6d493, #b98a35, #fff1c9, #8a6420); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ava.fr-liquid::after { inset: -5px; padding: 3px; background: conic-gradient(from var(--ang, 0deg), rgb(255 255 255 / .85), rgb(255 255 255 / .1), rgb(170 210 255 / .7), rgb(255 255 255 / .1), rgb(255 255 255 / .85)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang 4s linear infinite; }
.ava.fr-orbit::after { inset: -7px; border: 1.5px solid rgb(255 255 255 / .25); }
.ava.fr-orbit::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 50% 0, var(--gold-2) 0 3px, transparent 4px); animation: spin 3.2s linear infinite; }
.ava.fr-neon::after { inset: -4px; border: 2px solid #7ff3ff; box-shadow: 0 0 8px #3be8ff, 0 0 18px -2px #3be8ff, inset 0 0 8px #3be8ff; animation: neon 2.4s ease-in-out infinite; }
@keyframes neon { 50% { box-shadow: 0 0 4px #3be8ff, 0 0 10px -4px #3be8ff, inset 0 0 4px #3be8ff; opacity: .75; } 52% { opacity: .3; } 54% { opacity: .9; } }
.ava.fr-plus::after { inset: -5px; padding: 3px; background: conic-gradient(from var(--ang, 0deg), #FFE08A, #E9B949, #fff6d6, #b8862b, #FFE08A); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang 6s linear infinite; }
.ava.fr-rainbow::after { inset: -5px; padding: 3px; background: conic-gradient(from var(--ang, 0deg), #ff4d6d, #ffb020, #f5e663, #46d17c, #3ec7ff, #9b7bff, #ff4d6d); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang 3s linear infinite; filter: drop-shadow(0 0 4px rgb(255 255 255 / .4)); }
.ava.fr-plasma::after { inset: -6px; padding: 4px; background: conic-gradient(from var(--ang, 0deg), #ff3df2, transparent 30%, #3df2ff 50%, transparent 80%, #ff3df2); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang 1.6s linear infinite; filter: blur(.5px) drop-shadow(0 0 6px #b06bff); }
.ava.fr-ultra::after { inset: -6px; padding: 3px; background: conic-gradient(from var(--ang, 0deg), #c9b5ff, #6b4fd8, #fff, #9b7bff, #3a2a8a, #c9b5ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang 4s linear infinite; filter: drop-shadow(0 0 6px #9b7bff); }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ang { to { --ang: 360deg; } }
@keyframes spin { to { transform: rotate(360deg); } }
.ava .dot-online { position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; max-width: 13px; max-height: 13px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--ink-1); z-index: 4; }
.ava .bot-tag { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; padding: 0 5px; border-radius: 6px; background: var(--ink-2); color: var(--fg-2); z-index: 4; }

/* effects: a .fx layer around the avatar (particles are <i>) */
.ava > .fx { position: absolute; inset: -30%; pointer-events: none; z-index: -1; border-radius: 50%; }
.ava > .fx.front { z-index: 3; }
.fx i { position: absolute; display: block; }
.fx-glow { background: radial-gradient(circle, color-mix(in srgb, var(--a1) 70%, transparent) 30%, transparent 68%); animation: fx-breathe 2.6s ease-in-out infinite; }
@keyframes fx-breathe { 50% { transform: scale(1.12); opacity: .6; } }
.fx-sparkle i { width: 18%; aspect-ratio: 1; background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 10%, #fff8d6 10% 15%, transparent 15% 35%, #fff8d6 35% 40%, transparent 40% 60%, #fff8d6 60% 65%, transparent 65% 85%, #fff8d6 85% 90%, transparent 90%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: fx-twinkle 1.8s ease-in-out infinite; }
.fx-sparkle i:nth-child(1) { left: 8%; top: 12%; } .fx-sparkle i:nth-child(2) { right: 6%; top: 22%; animation-delay: .5s; width: 13%; }
.fx-sparkle i:nth-child(3) { left: 16%; bottom: 8%; animation-delay: 1s; width: 12%; } .fx-sparkle i:nth-child(4) { right: 14%; bottom: 12%; animation-delay: 1.4s; }
@keyframes fx-twinkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
.fx-halo::before { content: ''; position: absolute; left: 26%; right: 26%; top: 4%; height: 12%; border-radius: 50%; border: 3px solid #ffe7a3; box-shadow: 0 0 10px #ffd36b, inset 0 0 6px #ffd36b; animation: fx-float 2.4s ease-in-out infinite; }
@keyframes fx-float { 50% { transform: translateY(-12%); } }
.fx-snow { overflow: hidden; -webkit-mask: radial-gradient(circle, #000 55%, transparent 70%); mask: radial-gradient(circle, #000 55%, transparent 70%); }
.fx-snow i { top: -8%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .9; animation: fx-fall 3.2s linear infinite; }
.fx-snow i:nth-child(1) { left: 14%; } .fx-snow i:nth-child(2) { left: 34%; animation-delay: .8s; width: 4%; } .fx-snow i:nth-child(3) { left: 58%; animation-delay: 1.6s; }
.fx-snow i:nth-child(4) { left: 78%; animation-delay: 2.3s; width: 4%; } .fx-snow i:nth-child(5) { left: 46%; animation-delay: 2.9s; width: 5%; }
@keyframes fx-fall { to { transform: translate(8%, 1400%); } }
.fx-orbit::before, .fx-orbit::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 2%, #8fd6ff 0 5%, transparent 6%); animation: spin 2.6s linear infinite; }
.fx-orbit::after { inset: 14%; background: radial-gradient(circle at 50% 98%, #ffb3d1 0 6%, transparent 7%); animation-duration: 4.2s; animation-direction: reverse; }
.fx-fire { inset: -38%; background:
  radial-gradient(40% 50% at 50% 62%, #ffde59 0, transparent 60%),
  radial-gradient(45% 60% at 35% 55%, #ff7b1c 0, transparent 62%),
  radial-gradient(45% 60% at 65% 55%, #ff3d1c 0, transparent 62%);
  filter: blur(6px); mix-blend-mode: screen; animation: fx-flame .9s ease-in-out infinite alternate; transform-origin: 50% 70%; }
@keyframes fx-flame { 0% { transform: scale(1, 1) translateY(0); } 50% { transform: scale(1.06, 1.14) translateY(-4%); } 100% { transform: scale(.96, 1.08) translateY(-2%) skewX(3deg); } }
.fx-electric { inset: -14%; border-radius: 50%; background: conic-gradient(from var(--ang, 0deg), transparent 0 8%, #9ef0ff 9%, transparent 11% 33%, #fff 34%, transparent 36% 58%, #7fd8ff 59%, transparent 61% 83%, #fff 84%, transparent 86%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%, #000 68%, transparent 70%); mask: radial-gradient(circle, transparent 56%, #000 58%, #000 68%, transparent 70%);
  filter: drop-shadow(0 0 4px #59d6ff); animation: ang .7s steps(6) infinite, fx-flicker 1.4s steps(2) infinite; }
@keyframes fx-flicker { 50% { opacity: .55; } }
.fx-hearts i { bottom: 10%; width: 22%; aspect-ratio: 1; background: #ff5d8f; clip-path: path('M12 21l-1.4-1.3C5.4 15 2 12 2 8.3 2 5.3 4.4 3 7.4 3c1.7 0 3.4.8 4.6 2.1C13.2 3.8 14.9 3 16.6 3 19.6 3 22 5.3 22 8.3c0 3.7-3.4 6.7-8.6 11.4z'); transform-origin: center; animation: fx-rise 2.4s ease-in infinite; opacity: 0; }
.fx-hearts i { clip-path: polygon(50% 100%, 8% 55%, 4% 30%, 18% 12%, 38% 12%, 50% 26%, 62% 12%, 82% 12%, 96% 30%, 92% 55%); }
.fx-hearts i:nth-child(1) { left: 6%; } .fx-hearts i:nth-child(2) { right: 4%; animation-delay: .8s; background: #ff8fb3; width: 16%; } .fx-hearts i:nth-child(3) { left: 40%; animation-delay: 1.6s; width: 14%; }
@keyframes fx-rise { 0% { transform: translateY(0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-260%) scale(1) rotate(12deg); opacity: 0; } }
.fx-galaxy { inset: -26%; background: conic-gradient(from var(--ang, 0deg), #3a1c71, #7a5cff, #d76d77, #3a1c71, #1f8fff, #3a1c71); -webkit-mask: radial-gradient(circle, transparent 46%, #000 52%, transparent 72%); mask: radial-gradient(circle, transparent 46%, #000 52%, transparent 72%); filter: blur(3px); animation: ang 6s linear infinite; opacity: .9; }
.fx-galaxy i { width: 5%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: fx-twinkle 2.2s ease-in-out infinite; }
.fx-galaxy i:nth-child(1) { left: 12%; top: 30%; } .fx-galaxy i:nth-child(2) { right: 12%; top: 18%; animation-delay: .7s; } .fx-galaxy i:nth-child(3) { left: 30%; bottom: 10%; animation-delay: 1.3s; }

/* ==========================================================================
   NICKS: colors and effects
   ========================================================================== */
.nick { font-weight: 800; }
.nick.grad { background: var(--nick-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nick.nfx-glow { text-shadow: 0 0 10px color-mix(in srgb, var(--nc, var(--gold)) 70%, transparent), 0 0 2px color-mix(in srgb, var(--nc, var(--gold)) 80%, transparent); }
.nick.grad.nfx-glow { filter: drop-shadow(0 0 6px rgb(255 255 255 / .35)); text-shadow: none; }
.nick.nfx-shimmer { background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .95) 50%, transparent 62%) -100% 0 / 220% 100% no-repeat, var(--nick-grad, linear-gradient(var(--nc, var(--fg)), var(--nc, var(--fg)))); -webkit-background-clip: text; background-clip: text; color: transparent; animation: nfx-shine 2.8s ease-in-out infinite; }
@keyframes nfx-shine { 60%, 100% { background-position: 200% 0, 0 0; } }
.nick.nfx-rainbow { background: linear-gradient(90deg, #ff4d6d, #ffb020, #f5e663, #46d17c, #3ec7ff, #9b7bff, #ff4d6d) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nfx-flow 3s linear infinite; }
@keyframes nfx-flow { to { background-position: 200% 0; } }
.nick.nfx-glitch { position: relative; text-shadow: 1.5px 0 #ff2d6f, -1.5px 0 #2df3ff; animation: nfx-glitch 2.2s steps(1) infinite; }
@keyframes nfx-glitch { 0%, 86%, 100% { text-shadow: 1.5px 0 #ff2d6f, -1.5px 0 #2df3ff; transform: none; } 88% { text-shadow: -3px 0 #ff2d6f, 3px 0 #2df3ff; transform: translateX(1px) skewX(-8deg); } 92% { text-shadow: 3px 1px #ff2d6f, -2px -1px #2df3ff; transform: translateX(-1px); } }
.nick.nfx-fire { background: linear-gradient(0deg, #ff3d1c, #ff9a1c 45%, #ffe27a) 0 100% / 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 -1px 4px rgb(255 120 30 / .7)); animation: nfx-burn 1.2s ease-in-out infinite alternate; }
@keyframes nfx-burn { to { background-position: 0 0; filter: drop-shadow(0 -2px 7px rgb(255 80 20 / .9)); } }
.nick.nfx-wave > span { display: inline-block; animation: nfx-wave 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); white-space: pre; }
@keyframes nfx-wave { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-28%); } }
.nick.nfx-wave.grad > span { background: var(--nick-grad); -webkit-background-clip: text; background-clip: text; }

.tier-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; flex: none; color: var(--gold-ink); background: linear-gradient(135deg, #FFE08A, #E9B949); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6); }
.tier-badge.ultra { color: #fff; background: linear-gradient(135deg, #c9b5ff, #6b4fd8); }
.tier-badge .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.tier-badge.big { width: 44px; height: 44px; border-radius: 14px; } .tier-badge.big .ico { width: 24px; height: 24px; stroke-width: 2; }
.plus-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: var(--gold-ink); background: linear-gradient(135deg, #FFE08A, #E9B949); flex: none; }
.plus-badge .ico { width: 12px; height: 12px; stroke-width: 2.4; }

.title-line { font-size: 12px; color: var(--fg-3); font-weight: 600; }
.lvl { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 6px; font-size: 10px; font-weight: 800; font-family: var(--font-display); background: rgb(255 255 255 / .08); color: var(--fg-2); }
.user-row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.user-row .meta { min-width: 0; display: flex; flex-direction: column; }
.user-row .meta .nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   BANNERS: animated presets
   ========================================================================== */
.bn-anim { position: relative; overflow: hidden; isolation: isolate; }
.bn-anim::before, .bn-anim::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bn-aurora::before { inset: -40%; background: radial-gradient(40% 50% at 20% 40%, #39d0a0, transparent 70%), radial-gradient(40% 50% at 70% 30%, #6a5cff, transparent 70%), radial-gradient(35% 45% at 50% 80%, #2fa5ff, transparent 70%); filter: blur(24px); animation: bn-drift 14s ease-in-out infinite alternate; }
@keyframes bn-drift { 0% { transform: translate(-6%, 0) rotate(0); } 100% { transform: translate(6%, -4%) rotate(14deg); } }
.bn-stars::before { background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 35%, #fff, transparent), radial-gradient(1px 1px at 75% 60%, #fff, transparent), radial-gradient(2px 2px at 90% 25%, #ffe9b0, transparent), radial-gradient(1px 1px at 45% 85%, #fff, transparent);
  background-size: 260px 140px; animation: bn-stars 40s linear infinite; }
.bn-stars::after { background: radial-gradient(60% 90% at 80% 0%, rgb(120 90 255 / .45), transparent 70%), radial-gradient(50% 80% at 10% 100%, rgb(40 120 255 / .35), transparent 70%); animation: fx-breathe 6s ease-in-out infinite; }
@keyframes bn-stars { to { background-position: -260px 0; } }
.bn-plus::before { inset: -30%; background: radial-gradient(40% 60% at 20% 30%, #ff8a54, transparent 70%), radial-gradient(40% 60% at 80% 50%, #7a5cff, transparent 70%), radial-gradient(30% 50% at 50% 90%, #EDB95E, transparent 70%); filter: blur(20px); animation: bn-drift 12s ease-in-out infinite alternate; }
.bn-waves::before { background: radial-gradient(120% 60% at 50% 120%, #0ea5c6 30%, transparent 31%) 0 100% / 120px 70px repeat-x, radial-gradient(120% 60% at 50% 120%, #2dd4bf 30%, transparent 31%) 60px 100% / 120px 50px repeat-x; animation: bn-waves 6s linear infinite; opacity: .85; }
.bn-waves::after { background: linear-gradient(180deg, #0b4a6f 0%, transparent 60%); }
@keyframes bn-waves { to { background-position: 120px 100%, -60px 100%; } }
.bn-synth::before { top: 45%; background: repeating-linear-gradient(90deg, rgb(255 80 220 / .7) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgb(255 80 220 / .7) 0 1px, transparent 1px 22px); transform: perspective(160px) rotateX(58deg); transform-origin: 50% 0; animation: bn-grid 2.4s linear infinite; }
.bn-synth::after { bottom: 52%; background: radial-gradient(circle at 50% 100%, #ffd36b 0 18%, #ff5fa2 26%, transparent 42%), linear-gradient(180deg, #1a0b2e, #3a0f4f); z-index: -2; }
@keyframes bn-grid { to { background-position: 0 0, 0 22px; } }
.bn-lava::before { inset: -20%; background: radial-gradient(30% 40% at 25% 60%, #ff5a1f, transparent 70%), radial-gradient(25% 35% at 70% 40%, #ffb01f, transparent 70%), radial-gradient(35% 45% at 55% 85%, #c2161f, transparent 70%); filter: blur(14px) contrast(1.4); animation: bn-lava 9s ease-in-out infinite alternate; }
@keyframes bn-lava { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5%, -6%) scale(1.1); } 100% { transform: translate(-6%, 4%) scale(.95); } }
.bn-matrix::before { background: repeating-linear-gradient(90deg, transparent 0 14px, rgb(0 0 0 / .65) 14px 18px), linear-gradient(180deg, transparent 0 20%, #2bff88 22%, transparent 40% 60%, #1fcc6a 62%, transparent 80%) 0 0 / 100% 200%; opacity: .55; animation: bn-rain 2.6s linear infinite; }
@keyframes bn-rain { to { background-position: 0 0, 0 200%; } }

/* ==========================================================================
   ROOM ENTRANCES (Ultra)
   ========================================================================== */
.entrance { position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; display: grid; place-items: center; }
.entrance .ent-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 4vw, 40px); color: #fff; text-shadow: 0 4px 24px rgb(0 0 0 / .6); animation: ent-name 2.4s var(--ease) forwards; }
@keyframes ent-name { 0% { opacity: 0; transform: scale(.6); filter: blur(8px); } 18% { opacity: 1; transform: scale(1.05); filter: none; } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.entrance.lightning { animation: ent-flash 700ms steps(1) 1; }
@keyframes ent-flash { 0% { background: rgb(200 230 255 / .55); } 10% { background: transparent; } 20% { background: rgb(200 230 255 / .35); } 30% { background: transparent; } }
.entrance.lightning svg { position: absolute; top: 0; width: 160px; height: 60vh; filter: drop-shadow(0 0 18px #8fe0ff); animation: ent-bolt 900ms ease-out forwards; }
@keyframes ent-bolt { 0% { opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
.entrance.smoke i { position: absolute; bottom: -10%; width: 40vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(200 205 215 / .55), transparent 65%); filter: blur(10px); animation: ent-smoke 2.4s ease-out forwards; }
@keyframes ent-smoke { 0% { transform: translateY(0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-80vh) scale(1.6); opacity: 0; } }
.entrance.crown .ent-crown { width: 90px; height: 90px; color: #ffd36b; filter: drop-shadow(0 0 20px #ffb020); animation: ent-crown 2.4s var(--spring) forwards; }
@keyframes ent-crown { 0% { transform: translateY(-50vh) rotate(-30deg); } 30% { transform: translateY(0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* ==========================================================================
   CHAT
   ========================================================================== */
.chat { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.chat-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.chat-head h3 { flex: 1; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-2) var(--sp-2); display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
.msg { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 var(--sp-2); padding: 6px var(--sp-2); border-radius: var(--r-sm); }
.msg:hover { background: rgb(127 127 127 / .07); }
.msg > .msg-ava { grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-top: 2px; }
.msg > :not(.msg-ava):not(.msg-tools) { grid-column: 2; min-width: 0; }
.msg .who { display: flex; align-items: baseline; gap: 6px; font-size: 13px; min-width: 0; }
.msg .who .nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg .who time { font-size: 11px; color: var(--fg-3); flex: none; }
.msg .text { font-size: 14px; line-height: 1.42; overflow-wrap: anywhere; }
.msg .text .mention { color: var(--accent); font-weight: 700; }
.msg.cont { padding-top: 0; }
.msg.cont > .msg-ava, .msg.cont .who { display: none; }
.msg.system { display: block; text-align: center; font-size: 12px; color: var(--fg-3); padding: 4px; }
.reacts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.react { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--fg-2); }
.react .ico { width: 14px; height: 14px; }
.react.mine { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.msg-tools { position: absolute; right: 4px; top: 3px; display: flex; align-items: center; gap: 4px; z-index: 5; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.msg:hover .msg-tools, .msg:focus-within .msg-tools, .msg-tools.open { opacity: 1; pointer-events: auto; }
.msg-react-btn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-3); background: var(--g-solid); box-shadow: inset 0 0 0 1px var(--line-2); }
.msg-react-btn:hover, .msg-tools.open .msg-react-btn { color: var(--fg); }
.msg-tray { display: none; gap: 1px; padding: 2px; border-radius: 99px; background: var(--g-solid); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); animation: tray-in 160ms var(--ease); }
.msg-tools:hover .msg-tray, .msg-tools.open .msg-tray { display: flex; }
@keyframes tray-in { from { opacity: 0; transform: translateX(8px); } }
.msg-tray button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-2); }
.msg-tray button:hover { background: var(--surface-2); color: var(--fg); transform: scale(1.12); }
.msg-tools .ico { width: 15px; height: 15px; }
.msg.cont .msg-tools { top: 0; }
@media (hover: none) { .msg-tools { opacity: 1; pointer-events: auto; } .msg-react-btn { background: transparent; box-shadow: none; opacity: .55; } }
.chat-form { position: relative; display: flex; gap: 6px; padding: var(--sp-3); align-items: center; }
.chat-form .input { min-height: 42px; border-radius: 99px; }

/* ==========================================================================
   ROOM
   ========================================================================== */
.room { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; }
.room-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.room-main > div:empty { display: none; }
.room-side { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); height: calc(100vh - var(--sp-4) * 2); }
.room-side .chat-wrap { flex: 1; min-height: 340px; overflow: hidden; }
.room-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.room-bar .title { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
.room-bar .title .muted, .room-bar .title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .room-bar .title { flex-basis: 100%; } .room-bar .code-pill { margin-right: auto; } }
.code-pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 14px; min-height: 36px; border-radius: 99px; font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px var(--line); }
.players { display: flex; flex-direction: column; gap: 2px; }
.player { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-2); border-radius: var(--r-sm); position: relative; }
.player.is-me { background: var(--surface-2); }
.player .state { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.player .kick { opacity: 0; transition: opacity var(--dur-fast); }
.player:hover .kick { opacity: 1; }
.host-mark { color: var(--warn); }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.team-col { padding: var(--sp-3); border-radius: var(--r-lg); background: color-mix(in srgb, var(--tc) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent); }
.team-col h4 { color: var(--tc); font-size: 15px; }
.team-col > .row { min-height: 32px; margin-bottom: 6px; }
.opts { display: grid; gap: var(--sp-4); }
.opt-row { display: flex; flex-direction: column; gap: 8px; }
.opt-row > span { font-size: 13px; color: var(--fg-2); font-weight: 600; }
.emotes { display: grid; grid-template-columns: repeat(11, 1fr); gap: 0; padding: 6px; justify-items: center; }
.emotes .emote-stk { color: var(--accent); }
.emotes button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--fg-2); font-size: 11px; font-weight: 800; transition: transform var(--dur-fast) var(--spring); }
.emotes button:hover { transform: scale(1.15); color: var(--fg); background: var(--surface-2); }
.emote-fly { position: fixed; z-index: var(--z-toast); pointer-events: none; color: var(--accent); animation: fly 1.6s var(--ease) forwards; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; font-size: 12px; }
.emote-fly .ico { width: 46px; height: 46px; stroke-width: 1.6; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35)); }
.emote-fly .gg { font-size: 34px; font-weight: 800; }
@keyframes fly { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -20px) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140px) scale(.9) rotate(var(--rot, 8deg)); } }
.stage { padding: var(--sp-6); }
.timer { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 700; }
.timer.low { color: var(--bad); }
.phase-title { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.01em; }
.result-card { padding: var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-3); text-align: center; justify-items: center; }
.result-card .verdict { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 52px); font-weight: 800; letter-spacing: -0.02em; animation: verdict 700ms var(--spring); }
@keyframes verdict { from { opacity: 0; transform: scale(.7); filter: blur(8px); } }
.result-card .verdict.win { color: var(--accent); }
.reward-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }

/* ==========================================================================
   MODAL, TOASTS
   ========================================================================== */
.modal-back { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-4); background: rgb(5 8 12 / .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade var(--dur-base) var(--ease); }
:root[data-theme='light'] .modal-back { background: rgb(20 25 35 / .25); }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: var(--sp-6); border-radius: 30px; animation: pop var(--dur-slow) var(--spring); --g-tint-a: 0.16; --g-tint-b: 0.08; --g-blur: 30px; }
:root[data-theme='light'] .modal { --g-tint-a: .88; --g-tint-b: .7; }
.modal.wide { width: min(760px, 100%); }
.modal h2 { margin-bottom: var(--sp-4); }
.modal .actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-6); flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.95); } }
#toasts { position: fixed; z-index: var(--z-toast); left: 50%; top: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; pointer-events: none; width: min(440px, calc(100vw - 32px)); }
.toast { --g-tint-a: .16; display: flex; align-items: center; gap: var(--sp-3); padding: 12px 18px; border-radius: 20px; font-weight: 700; font-size: 14px; pointer-events: auto; animation: toast-in var(--dur-slow) var(--spring); }
.toast.warn .ico { color: var(--warn); } .toast.ok .ico { color: var(--ok); } .toast.bad .ico { color: var(--bad); } .toast.info .ico { color: var(--info); }
.toast.out { animation: toast-out var(--dur-base) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: scale(.96); } }
.or { display: flex; align-items: center; gap: 12px; color: var(--fg-3); font-size: 13px; margin: var(--sp-4) 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   PROFILE, SHOP, LEADERS, ADMIN
   ========================================================================== */
.profile-banner { height: 220px; border-radius: var(--r-xl); background-size: cover; background-position: center; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), var(--g-shadow); }
.profile-head { display: flex; align-items: flex-start; gap: var(--sp-5); margin: -56px var(--sp-6) 0; flex-wrap: wrap; }
.profile-head > .info, .profile-head > .row { padding-top: 66px; }
.profile-head .ava { --s: 112px; }
.profile-head .info { flex: 1; min-width: 220px; }
.profile-head h1 { font-size: clamp(26px, 3.4vw, 38px); }
.bio { color: var(--fg-2); margin-top: 6px; max-width: 60ch; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.stat { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.stat .val { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.match { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-top: 1px solid var(--line); font-size: 14px; }
.match:first-child { border-top: 0; }
.res { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.res.win { background: var(--ok); } .res.loss { background: var(--bad); } .res.draw { background: var(--fg-3); }
.lb-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-top: 1px solid var(--line); }
.lb-row:first-child { border-top: 0; }
.lb-row .place { font-weight: 800; color: var(--fg-3); text-align: center; }
.lb-row:nth-child(1) .place { color: var(--warn); } .lb-row:nth-child(2) .place { color: #C0C6D0; } .lb-row:nth-child(3) .place { color: #D49A6A; }
.lb-row .score { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.settings-list { display: flex; flex-direction: column; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.setting:first-child { border-top: 0; }
.setting > span:first-child { flex: 1 1 180px; }
.setting .title-line { color: var(--fg-2); font-weight: 500; font-size: 13px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table td, .table th { padding: 10px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { color: var(--fg-3); font-weight: 600; font-size: 12px; border-top: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }



/* ==========================================================================
   HOME
   ========================================================================== */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: var(--sp-6); padding: clamp(24px, 4vw, 48px); border-radius: 36px; overflow: hidden; }
.hero h1 { margin-bottom: var(--sp-4); }
.hero h1 .w { display: inline-block; animation: blur-in 700ms var(--ease) backwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes blur-in { from { opacity: 0; filter: blur(12px); transform: translateY(10px); } }
.hero h1 .line2 { display: block; color: var(--fg-2); font-weight: 600; font-size: .5em; letter-spacing: -0.01em; margin-top: .35em; }
.hero .lead { color: var(--fg-2); max-width: 46ch; font-size: 16px; margin-bottom: var(--sp-6); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.join { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px var(--sp-4); border-radius: var(--r-full); }
.join input { width: 120px; min-height: 40px; background: transparent; border: 0; outline: none; font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.join input::placeholder { letter-spacing: 0; text-transform: none; font-family: var(--font-ui); color: var(--fg-3); font-weight: 600; }
.hero-side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); }
.stat-pair { display: flex; gap: var(--sp-8); }
.stat-pair .big { font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1; }
.stat-pair .lbl { font-size: 13px; color: var(--fg-2); margin-top: 6px; }
.online-line { margin-top: var(--sp-5); display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 14px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } }
.hero-me { padding: var(--sp-4); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 6px; }
.lvlbar { height: 6px; border-radius: 99px; background: rgb(255 255 255 / .08); overflow: hidden; margin-top: var(--sp-2); }
.lvlbar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

.games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); grid-auto-flow: dense; }
.game-tile { grid-column: span 2; display: flex; flex-direction: column; gap: var(--sp-3); min-height: 220px; padding: var(--sp-6); border-radius: var(--r-xl); overflow: hidden; text-align: left;
  transition: transform var(--dur-base) var(--spring), box-shadow var(--dur-base); }
.game-tile.wide { grid-column: span 3; }
.game-tile:hover { transform: translateY(-3px); }
.game-tile .glyph { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent); transition: transform var(--dur-slow) var(--spring); }
.game-tile:hover .glyph { transform: rotate(-8deg) scale(1.08); }
.game-tile .glyph .ico { width: 32px; height: 32px; stroke-width: 1.6; }
.game-tile .ghost-glyph { position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px; color: var(--acc); opacity: .12; z-index: -1; transition: transform 1.2s var(--ease), opacity var(--dur-slow); }
.game-tile:hover .ghost-glyph { transform: rotate(-12deg) scale(1.08); opacity: .2; }
.game-tile .ghost-glyph .ico { width: 100%; height: 100%; stroke-width: 1; }
.game-tile h3 { font-size: 22px; }
.game-tile p { color: var(--fg-2); font-size: 14px; max-width: 34ch; }
.game-tile .foot { margin-top: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.game-tile .live { color: var(--ok); }
.two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-4); }
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.code { font-family: var(--font-display); font-weight: 600; letter-spacing: .12em; font-size: 13px; color: var(--fg-2); }
.empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--fg-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.empty .ico { width: 36px; height: 36px; color: var(--fg-3); }
.gico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--gc); background: color-mix(in srgb, var(--gc) 16%, transparent); }
.promo { display: flex; align-items: center; gap: var(--sp-4); transition: transform var(--dur-base) var(--spring); }
.promo:hover { transform: scale(1.015); }
.promo > .stack { flex: 1; min-width: 0; }
.promo-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; }
.tg-promo .promo-ic { background: linear-gradient(180deg, #4cc0f5, #2AABEE); color: #fff; }
.plus-promo .promo-ic { background: linear-gradient(135deg, #FFE08A, #E9B949); color: var(--gold-ink); }

/* profile card */
.pcard { overflow: hidden; display: block; }
.pcard .banner { height: 110px; background-size: cover; background-position: center; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.pcard .body { padding: 0 var(--sp-5) var(--sp-5); margin-top: -38px; }
.pcard .ava { --s: 76px; }
.pcard .name { margin-top: var(--sp-3); display: flex; align-items: center; gap: 8px; font-size: 19px; }

/* ==========================================================================
   STYLE (wardrobe)
   ========================================================================== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.page-title { font-size: clamp(30px, 4vw, 46px); }
.page-head p { margin-top: 6px; }
.wardrobe { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.preview { position: sticky; top: var(--sp-4); }
.preview .pcard .ava { --s: 92px; }
.preview .pcard .body { margin-top: -46px; }
.preview .pcard .banner { height: 130px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-3) var(--sp-4); border-radius: var(--r-lg); text-align: center; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur-base) var(--spring), background-color var(--dur-fast); cursor: pointer; }
:root[data-theme='light'] .item { background: rgb(255 255 255 / .45); }
.item:hover { transform: translateY(-2px) scale(1.02); background: rgb(255 255 255 / .08); }
.item.equipped { box-shadow: inset 0 0 0 2px var(--gold), 0 8px 24px -12px var(--gold); }
.item.locked .swatch, .item.locked .banner-sw, .item.locked .board-sw { filter: saturate(.6) brightness(.8); }
.item .lock { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; background: rgb(0 0 0 / .35); color: var(--fg-2); }
.item .lock.plus { color: var(--gold-ink); background: linear-gradient(135deg, #FFE08A, #E9B949); }
.item .lock.ultra { color: #fff; background: linear-gradient(135deg, #c9b5ff, #6b4fd8); }
.item .swatch { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; }
.item .ava.swatch { color: #fff; }
.item .name { font-weight: 700; font-size: 13px; line-height: 1.25; }
.item .state { font-size: 11px; color: var(--fg-3); font-weight: 700; }
.item.equipped .state { color: var(--gold); }
.item .banner-sw { width: 100%; height: 56px; border-radius: 12px; background-size: cover; }
.item .board-sw { width: 56px; height: 56px; border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.item .title-sw { height: 60px; display: grid; place-items: center; padding: 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--gold); }
.item .nick-sw { height: 60px; display: grid; place-items: center; font-size: 22px; }
.item .ent-sw { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgb(255 255 255 / .06); color: var(--ultra); }
.slot-tabs { display: flex; flex-wrap: wrap; gap: 4px; }

/* ==========================================================================
   SUBSCRIPTIONS
   ========================================================================== */
.subs-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: var(--sp-8); align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 36px; overflow: hidden; }
.subs-hero h1 { font-size: clamp(32px, 4.6vw, 56px); }
.shine { background: linear-gradient(100deg, var(--gold) 0 35%, #fff4d1 45%, var(--gold) 55% 100%) 100% 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 4s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
.subs-hero .lead { font-size: 16px; color: var(--fg-2); max-width: 46ch; margin: var(--sp-4) 0 var(--sp-5); }
.plus-status { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); }
.plus-status.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); color: var(--fg); }
.plus-status.on .ico { color: var(--ok); }
.showcase { position: relative; display: grid; place-items: center; min-height: 300px; }
.showcase .pcard { width: min(340px, 100%); transform: rotate(-3deg); transition: transform var(--dur-slow) var(--spring); }
.showcase .pcard:hover { transform: rotate(0) scale(1.02); }
.showcase .pcard .ava { --s: 84px; }
.showcase .pcard .body { margin-top: -42px; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--r-xl); overflow: hidden; }
.tier h3 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.tier .price { display: flex; align-items: baseline; gap: 8px; }
.tier .price strong { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.tier li { display: flex; gap: 8px; align-items: flex-start; }
.tier li .ico { color: var(--ok); margin-top: 2px; }
.tier .btns { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: var(--sp-3); }
.tier.plus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), var(--g-shadow); }
.tier.ultra { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ultra) 55%, transparent), 0 24px 60px -30px #9b7bff; }
.tier.ultra::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, #c9b5ff 80%, #fff 85%, #9b7bff 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang 5s linear infinite; }
.tier .ribbon { position: absolute; right: 18px; top: 18px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.tier.plus .ribbon { color: var(--gold-ink); background: linear-gradient(135deg, #FFE08A, #E9B949); }
.tier.ultra .ribbon { color: #fff; background: linear-gradient(135deg, #c9b5ff, #6b4fd8); }
.tier .period { display: flex; gap: 4px; }
.perks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.perk-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--sp-5) var(--sp-3); border-radius: var(--r-lg); text-align: center; font-size: 13px; font-weight: 700; }
.perk-demo .ava { --s: 64px; }
.faq { padding: 0 var(--sp-5); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0; font-weight: 700; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ico { transition: transform var(--dur-base) var(--ease); }
.faq-item[open] summary .ico { transform: rotate(45deg); }
.faq-item p { padding: 0 0 var(--sp-4); max-width: 70ch; }

/* ==========================================================================
   WELCOME (first visit)
   ========================================================================== */
.welcome-back { background: rgb(5 8 12 / .25); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal.welcome { width: min(460px, 100%); padding: var(--sp-8) var(--sp-6) var(--sp-6); text-align: center; border-radius: 36px; }
.welcome .logo-big { width: 72px; height: 72px; margin: 0 auto var(--sp-4); animation: logo-pop 900ms var(--spring); }
@keyframes logo-pop { from { transform: scale(.4) rotate(-30deg); opacity: 0; } }
.welcome h2 { font-size: 26px; margin-bottom: 6px; }
.welcome .sub { color: var(--fg-2); margin-bottom: var(--sp-5); }
.welcome .nick-field { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 18px; border-radius: var(--r-full); text-align: left; }
.welcome .nick-field input { flex: 1; min-width: 0; min-height: 42px; background: transparent; border: 0; outline: none; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.welcome .dice { transition: transform var(--dur-slow) var(--spring); }
.welcome .dice.roll { animation: dice 500ms var(--spring); }
@keyframes dice { 50% { transform: rotate(200deg) scale(1.15); } 100% { transform: rotate(360deg); } }
.welcome .stack { gap: 10px; }
.welcome .err { color: var(--bad); min-height: 20px; font-size: 13px; }
.welcome .fine { color: var(--fg-3); font-size: 12px; margin-top: var(--sp-3); }

/* ==========================================================================
   STICKERS
   ========================================================================== */
.stk { width: 100%; height: auto; overflow: visible; }
.stk .k-cap { font-family: var(--font-display); font-weight: 800; stroke: #2a1a10; stroke-width: 6px; paint-order: stroke; stroke-linejoin: round; letter-spacing: -.01em; }
.stk [class*='k-'] { transform-box: fill-box; transform-origin: center; }
.stk .pivot { transform-box: view-box; transform-origin: 0 0; }
.stk .k-body { transform-origin: 50% 100%; }
/* whole-body motion */
.k-idle { animation: k-idle 2.6s ease-in-out infinite; }
@keyframes k-idle { 50% { transform: translateY(-2px) scaleY(1.015); } }
.k-breathe { animation: k-breathe 3.2s ease-in-out infinite; }
@keyframes k-breathe { 50% { transform: scale(1.025, .985); } }
.k-hop { animation: k-hop 1.1s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes k-hop { 0%, 100% { transform: translateY(0) scale(1.04, .96); } 15% { transform: translateY(0) scale(.96, 1.05); } 45% { transform: translateY(-12px) scale(.98, 1.02); } 70% { transform: translateY(0) scale(1.06, .94); } }
.k-jump { animation: k-jump 1.4s cubic-bezier(.2, .9, .3, 1) infinite; }
@keyframes k-jump { 0% { transform: scale(1.08, .9); } 12% { transform: translateY(-16px) scale(.92, 1.1); } 30%, 80% { transform: translateY(-4px) scale(1); } 100% { transform: scale(1.08, .9); } }
.k-laugh { animation: k-laugh .32s ease-in-out infinite alternate; }
@keyframes k-laugh { from { transform: rotate(-4deg) scale(1.02, .98); } to { transform: rotate(4deg) translateY(-3px) scale(.99, 1.02); } }
.k-sway { animation: k-sway 2s ease-in-out infinite; }
@keyframes k-sway { 50% { transform: rotate(-5deg); } }
.k-sob { animation: k-sob .9s ease-in-out infinite; }
@keyframes k-sob { 30% { transform: scale(1.03, .96); } 60% { transform: scale(.99, 1.02); } }
.k-rage { animation: k-rage .14s linear infinite; }
@keyframes k-rage { 25% { transform: translate(-1.5px, .5px); } 75% { transform: translate(1.5px, -.5px); } }
.k-tilt { animation: k-tiltq 3s ease-in-out infinite; }
@keyframes k-tiltq { 40%, 70% { transform: rotate(-7deg); } }
.k-float { animation: k-floaty 3.4s ease-in-out infinite; }
@keyframes k-floaty { 50% { transform: translateY(3px) rotate(1.5deg); } }
.k-nod { animation: k-nod 1.3s ease-in-out infinite; }
@keyframes k-nod { 30% { transform: rotate(-3deg) translateY(2px); } 60% { transform: rotate(2deg); } }
.k-flop { animation: k-flop 2.6s ease-in-out infinite; }
@keyframes k-flop { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) scaleY(.97); } }
.k-cringe { animation: k-cringe .5s ease-in-out infinite; }
@keyframes k-cringe { 50% { transform: scale(.96, 1.03) translateY(1px); } }
.k-sigh { animation: k-sigh 3s ease-in-out infinite; }
@keyframes k-sigh { 40% { transform: scaleY(.95) translateY(3px); } }
.k-deflate { animation: k-deflate 2.4s ease-in-out infinite; }
@keyframes k-deflate { 50% { transform: scale(.94, .9) translateY(5px); } }
.k-cool { animation: k-cool 2.4s ease-in-out infinite; }
@keyframes k-cool { 50% { transform: rotate(-4deg) translateX(-2px); } }
.k-scream { animation: k-scream .12s steps(2) infinite; }
@keyframes k-scream { 50% { transform: scale(1.04) rotate(1.5deg); } }
.k-lag { animation: k-lag 1.6s steps(1) infinite; }
@keyframes k-lag { 0%, 60% { transform: none; } 62% { transform: translate(-4px, 0) skewX(6deg); } 66% { transform: translate(3px, 1px); } 70% { transform: none; } }
.k-67 { animation: k-idle 1.2s ease-in-out infinite; }
/* parts */
.stk .k-blink { animation: k-blink 4s infinite; }
@keyframes k-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.stk .k-wave { animation: k-wave .7s ease-in-out infinite alternate; }
@keyframes k-wave { from { transform: rotate(-20deg); } to { transform: rotate(18deg); } }
.stk .k-cheer-l { animation: k-cheer-l .55s ease-in-out infinite alternate; } .stk .k-cheer-r { animation: k-cheer-r .55s ease-in-out infinite alternate; }
@keyframes k-cheer-l { to { transform: rotate(14deg); } } @keyframes k-cheer-r { to { transform: rotate(-14deg); } }
.stk .k-shrug-l { animation: k-shrug-l 1.6s ease-in-out infinite; } .stk .k-shrug-r { animation: k-shrug-r 1.6s ease-in-out infinite; }
@keyframes k-shrug-l { 40%, 60% { transform: rotate(18deg); } } @keyframes k-shrug-r { 40%, 60% { transform: rotate(-18deg); } }
.stk .k-67-l { animation: k-67-l .5s ease-in-out infinite alternate; } .stk .k-67-r { animation: k-67-r .5s ease-in-out infinite alternate; }
@keyframes k-67-l { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } } @keyframes k-67-r { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
.stk .k-67-a { animation: k-67-a .5s ease-in-out infinite alternate; } .stk .k-67-b { animation: k-67-b .5s ease-in-out infinite alternate; }
@keyframes k-67-a { from { transform: translateY(6px) scale(.92); } to { transform: translateY(-10px) scale(1.08); } } @keyframes k-67-b { from { transform: translateY(-10px) scale(1.08); } to { transform: translateY(6px) scale(.92); } }
.stk .k-thumb { animation: k-thumb 1.3s ease-in-out infinite; }
@keyframes k-thumb { 30% { transform: rotate(-10deg); } 60% { transform: rotate(4deg); } }
.stk .k-palm { animation: k-palm 3s ease-in-out infinite; }
@keyframes k-palm { 40%, 70% { transform: rotate(-5deg); } }
.stk .k-fan { animation: k-fan .3s ease-in-out infinite alternate; } .stk .k-fan-blade { animation: k-fan-b .3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes k-fan { to { transform: rotate(-14deg); } } @keyframes k-fan-b { to { transform: rotate(-22deg); } }
.stk .k-beat { animation: k-beat .8s ease-in-out infinite; }
@keyframes k-beat { 30% { transform: scale(1.25); } 50% { transform: scale(1); } }
.stk .k-twinkle { animation: k-twinkle 1.4s ease-in-out infinite; }
@keyframes k-twinkle { 50% { transform: scale(.55) rotate(45deg); opacity: .6; } }
.stk .k-spin { animation: spin 1s linear infinite; }
.stk .k-rise { animation: k-rise 2.2s ease-out infinite; }
@keyframes k-rise { 0% { transform: translateY(14px) scale(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-26px) scale(1.1); opacity: 0; } }
.stk .k-tear { animation: k-tear 1s ease-in infinite; }
@keyframes k-tear { 0% { transform: translate(0, -4px) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(0, 30px) scale(1); opacity: 0; } }
.stk .k-stream { stroke-dasharray: 10 8; animation: k-stream .5s linear infinite; }
@keyframes k-stream { to { stroke-dashoffset: -18; } }
.stk .k-puff { animation: k-puff 1s ease-out infinite; }
@keyframes k-puff { 0% { transform: scale(.3) translateY(10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.3) translateY(-14px); opacity: 0; } }
.stk .k-tint { opacity: .18; animation: k-tint 1s ease-in-out infinite alternate; }
@keyframes k-tint { to { opacity: .34; } }
.stk .k-sweat { animation: k-sweat 1.6s ease-in infinite; }
@keyframes k-sweat { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
.stk .k-z { animation: k-z 1.8s ease-out infinite; }
@keyframes k-z { 0% { transform: translate(-6px, 10px) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px, -10px) scale(1.1); opacity: 0; } }
.stk .k-snot { animation: k-snot 3.2s ease-in-out infinite; transform-origin: 0 0; transform-box: view-box; }
@keyframes k-snot { 50% { transform: scale(1.8); } }
.stk .k-bobq { animation: k-bobq 1.4s ease-in-out infinite; }
@keyframes k-bobq { 50% { transform: translateY(-6px) rotate(10deg); } }
.stk .k-orange { animation: k-orange 3.4s ease-in-out infinite; }
@keyframes k-orange { 50% { transform: rotate(-6deg) translateX(-1px); } }
.stk .k-water { animation: k-water 2s ease-in-out infinite alternate; }
@keyframes k-water { to { transform: translateX(-10px); } }
.stk .k-steam { stroke-dasharray: 34; animation: k-steam 2.2s ease-out infinite; }
@keyframes k-steam { 0% { stroke-dashoffset: 34; opacity: 0; } 40% { opacity: .6; } 100% { stroke-dashoffset: -34; opacity: 0; transform: translateY(-10px); } }
.stk .k-ghost { animation: k-ghost 2.6s ease-in-out infinite; }
@keyframes k-ghost { 0% { transform: translateY(16px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-8px) rotate(6deg); opacity: 0; } }
.stk .k-aura { animation: k-aura 1.6s ease-in-out infinite; }
@keyframes k-aura { 50% { transform: scale(1.08); opacity: .75; } }
.stk .k-rays { animation: spin 14s linear infinite; }
.stk .k-cloud { animation: k-cloud 2.4s ease-in-out infinite; }
@keyframes k-cloud { 50% { transform: translateX(4px); } }
.stk .k-drop { animation: k-drop .8s linear infinite; }
@keyframes k-drop { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.stk .k-fall { animation: k-fall 1.6s linear infinite; }
@keyframes k-fall { 0% { transform: translateY(-14px) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px) rotate(260deg); opacity: 0; } }
.stk .k-fire { animation: k-fire .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes k-fire { to { transform: scale(1.06, 1.12); } }
.stk .k-bug { animation: k-bug 1.4s ease-in-out infinite; }
@keyframes k-bug { 50% { transform: translate(-6px, -2px) rotate(-12deg); } }
.stk .k-sign { animation: k-sign 1.2s ease-in-out infinite; }
@keyframes k-sign { 50% { transform: translateY(-3px) rotate(-3deg); } }
.stk .k-glitch { animation: k-glitchb 1.6s steps(1) infinite; opacity: 0; }
@keyframes k-glitchb { 60% { opacity: 1; } 72% { opacity: 0; } }
.stk .k-shiver { animation: k-shiver .3s steps(2) infinite; }
@keyframes k-shiver { 50% { transform: translateX(2px); } }
.stk .k-o { animation: k-o 1.4s ease-in-out infinite; }
@keyframes k-o { 15% { transform: scaleY(1.3); } }
.stk .k-wob { animation: k-wob .3s steps(2) infinite; }
@keyframes k-wob { 50% { transform: translateY(1px) scaleX(.94); } }
.stk .k-shades { animation: k-shades 2.4s ease-in-out infinite; }
@keyframes k-shades { 50% { transform: translateY(-1.5px); } }
:root[data-motion='reduce'] .stk * { animation: none !important; }
.msg-sticker { width: clamp(120px, 9vw, 160px); margin-top: 4px; transform-origin: 20% 80%; animation: stk-in 520ms var(--spring); }
@keyframes stk-in { from { transform: scale(.3) rotate(-14deg); opacity: 0; } }
.stk-picker { position: fixed; z-index: calc(var(--z-modal) - 1); display: flex; flex-direction: column; padding: 12px; border-radius: 28px; animation: stk-open 200ms var(--ease); contain: layout paint; transform-origin: 30px 100%; --g-tint-a: .18; --g-blur: 28px; }
.stk-picker[hidden] { display: none; }
@keyframes stk-open { from { opacity: 0; transform: translateY(8px); } }
:root[data-theme='light'] .stk-picker { --g-tint-a: .9; }
.stk-tabs { display: flex; margin-bottom: 8px; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 7vw, 132px), 1fr)); gap: 6px; overflow-y: auto; scrollbar-width: thin; padding: 6px 4px 4px; min-height: 0; flex: 1; }
.stk-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 6px; border-radius: 18px; transition: transform var(--dur-fast) var(--spring), background-color var(--dur-fast); }
.stk-btn .stk { width: 100%; }
.stk-name { font-size: 11px; font-weight: 700; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stk-btn:hover { background: rgb(255 255 255 / .08); }
.stk-btn:hover .stk { transform: scale(1.06); }
.stk-btn .stk { transition: transform var(--dur-fast) var(--spring); }
.stk-btn:active .stk { transform: scale(.94); }
.stk-fly { position: fixed; z-index: var(--z-toast); width: 160px; pointer-events: none; animation: stk-fly 2.4s var(--ease) forwards; }
.stk-fly .who { display: block; text-align: center; font-weight: 800; font-size: 12px; margin-top: -4px; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
@keyframes stk-fly { 0% { opacity: 0; transform: translate(-50%, 40px) scale(.3) rotate(-24deg); } 14% { opacity: 1; transform: translate(-50%, -12px) scale(1.15) rotate(8deg); } 24% { transform: translate(-50%, 0) scale(1) rotate(-3deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70px) scale(.9) rotate(-3deg); } }
.emotes .emote-stk { color: var(--gold); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1360px) {
  #app { grid-template-columns: 92px minmax(0, 1fr); }
  #app .side { display: none; }
  #app.chat-open .side { display: flex; position: fixed; right: var(--sp-4); top: var(--sp-4); bottom: var(--sp-4); height: auto; width: min(380px, calc(100vw - 32px)); animation: side-in var(--dur-slow) var(--spring); }
  #app.chat-open .side-close { display: grid; }
  .room { grid-template-columns: minmax(0, 1fr) 300px; }
}
@keyframes side-in { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 1100px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-tile, .game-tile.wide { grid-column: span 1; }
  .two, .wardrobe, .subs-hero { grid-template-columns: minmax(0, 1fr); }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
  .room { grid-template-columns: minmax(0, 1fr); }
  .room-side { position: static; height: auto; }
  .room-side .chat-wrap { height: 420px; flex: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  #app, #app.no-chat { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3) var(--sp-3) 108px; gap: var(--sp-3); }
  .dock { display: none; }
  .mbar { display: flex; align-items: center; gap: 8px; position: sticky; top: var(--sp-3); z-index: var(--z-bar); height: 56px; padding: 0 8px 0 10px; border-radius: 22px; }
  .mbar .logo { width: 40px; height: 40px; margin: 0; } .mbar .logo svg { width: 30px; height: 30px; }
  .mbar .brand { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
  .tabbar { display: flex; position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-bar); width: min(460px, calc(100vw - 20px)); padding: 6px; border-radius: 30px; }
  .tabbar .dock-nav { flex-direction: row; gap: 2px; }
  .tabbar .dock-item { flex: 1; padding: 8px 2px; font-size: 10px; }
  .tabbar .dock-item:hover { transform: none; }
  .tabbar .lens { top: 0; left: 0; right: auto; height: 100%; border-radius: 24px; }
  .tabbar .dock-item .unread { right: calc(50% - 22px); }
  body.in-room .tabbar { display: none; }
  body.in-room #app { padding-bottom: var(--sp-6); }
  #app.chat-open .side { left: var(--sp-3); right: var(--sp-3); top: var(--sp-3); bottom: 96px; width: auto; }
  .hero { padding: var(--sp-6); border-radius: var(--r-xl); }
  .stat-pair .big { font-size: 32px; }
  .games { grid-template-columns: minmax(0, 1fr); }
  .game-tile { min-height: 180px; }
  .pad { padding: var(--sp-4); }
  .stage { padding: var(--sp-4); }
  .teams { grid-template-columns: 1fr; }
  .profile-banner { height: 150px; }
  .profile-head { margin: -48px var(--sp-3) 0; }
  .profile-head .ava { --s: 92px; }
  .profile-head > .info, .profile-head > .row { padding-top: 0; }
  #toasts { top: 76px; }
  .items { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .item .swatch { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
:root[data-motion='reduce'] *, :root[data-motion='reduce'] *::before, :root[data-motion='reduce'] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
.return-pill { position: fixed; z-index: var(--z-bar); left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 99px; font-weight: 700; font-size: 14px; animation: pill-in 500ms var(--spring); --g-tint-a: .16; }
@keyframes pill-in { from { transform: translate(-50%, 40px); opacity: 0; } }
@media (max-width: 860px) { .return-pill { bottom: 96px; width: calc(100vw - 24px); justify-content: space-between; } }
.stk-picker .stk * { animation-play-state: paused; }
.stk-picker .stk-btn:hover .stk * { animation-play-state: running; }
.stk-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) { .stk-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.game-head { display: flex; flex-direction: column; gap: var(--sp-3); padding: clamp(24px, 4vw, 40px); border-radius: 36px; overflow: hidden; min-height: 280px; }
.game-head h1 { font-size: clamp(34px, 5vw, 58px); margin-top: var(--sp-2); }
.game-head p { font-size: 16px; max-width: 46ch; }
.game-head .glyph { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; margin-top: auto; color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent); animation: logo-pop 800ms var(--spring); }
.game-head .glyph .ico { width: 40px; height: 40px; stroke-width: 1.6; }
.game-head .ghost-glyph { position: absolute; right: -40px; bottom: -60px; width: 340px; height: 340px; color: var(--acc); opacity: .12; z-index: -1; animation: ghost-drift 18s ease-in-out infinite alternate; }
.game-head .ghost-glyph .ico { width: 100%; height: 100%; stroke-width: .8; }
@keyframes ghost-drift { to { transform: rotate(-10deg) translate(-20px, -10px); } }

/* ==========================================================================
   SETTINGS
   ========================================================================== */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.settings-card h2 { font-size: 20px; }
.set-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.setting.locked > :last-child { opacity: .45; pointer-events: none; }
.accents { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-sw { position: relative; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 2px 6px rgb(0 0 0 / .3); transition: transform var(--dur-fast) var(--spring); display: grid; place-items: center; cursor: pointer; }
.accent-sw:hover { transform: scale(1.12); }
.accent-sw.on { box-shadow: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--fg); }
.accent-sw.custom { background: conic-gradient(#ff4d6d, #ffb020, #46d17c, #3ec7ff, #9b7bff, #ff4d6d); color: #fff; }
.accent-sw.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.range { width: min(220px, 100%); accent-color: var(--gold); }
@media (max-width: 1100px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 860px) and (min-width: 861px) {
  .dock { gap: 4px; padding: var(--sp-3) var(--sp-2); }
  .dock-item { padding: 6px 4px; gap: 2px; font-size: 10px; }
  .lens { height: 52px; }
  .logo { width: 44px; height: 44px; margin-bottom: 2px; }
  .dock-foot { gap: var(--sp-2); }
  .dock-tg { width: 38px; height: 38px; }
}

/* preference switches */
:root[data-stickers='off'] .stk *, :root[data-stickers='hover'] .msg-sticker .stk *, :root[data-stickers='hover'] .stk-fly .stk * { animation: none !important; }
.msg-sticker:not(.live) .stk * { animation-play-state: paused; }
.msg-sticker:hover .stk * { animation-play-state: running; }
:root[data-stickers='hover'] .msg-sticker:hover .stk * { animation: revert !important; }
:root[data-chat='compact'] .msg { padding-top: 3px; padding-bottom: 3px; column-gap: 8px; grid-template-columns: 24px minmax(0, 1fr); }
:root[data-chat='compact'] .msg .msg-ava .ava { --s: 24px !important; }
:root[data-chat='compact'] .msg-sticker { width: 84px; }
:root[data-others-fx='off'] .chat .fx, :root[data-others-fx='off'] .room .fx, :root[data-others-fx='off'] .list .fx, :root[data-others-fx='off'] .board-col .fx { display: none; }
:root[data-others-fx='off'] .chat .nick, :root[data-others-fx='off'] .room .nick, :root[data-others-fx='off'] .list .nick { animation: none !important; }
:root[data-others-fx='off'] .chat .nick > span, :root[data-others-fx='off'] .room .nick > span { animation: none !important; }
:root[data-coords='off'] .board .coord { display: none; }
:root[data-hints='off'] .board .dot { display: none; }

/* maintenance strip */
.maint-banner { position: fixed; z-index: var(--z-toast); left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(640px, calc(100vw - 24px));
  padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 700; color: #2a1e08; background: #ffd34a; box-shadow: 0 8px 24px -10px rgb(0 0 0 / .5); }
.maint-banner[hidden] { display: none; }
@media (max-width: 860px) { .maint-banner { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* admin: site settings */
.admin-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: var(--sp-4); align-items: start; }
.setting.dirty > span:first-child strong::after { content: ' •'; color: var(--gold); }
.set-num { width: 110px; }
.set-text { width: min(340px, 100%); }
.off-game { opacity: .55; text-decoration: line-through; }
.set-savebar { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 99px; max-width: 520px; margin-left: auto; font-weight: 700; }
.set-savebar[hidden] { display: none; }

/* long lists: skip layout and paint for messages scrolled out of view */
.chat-list > .msg { content-visibility: auto; contain-intrinsic-size: auto 52px; }

/* light theme: highlights that sweep across text must stay darker than the page */
:root[data-theme='light'] .shine { background-image: linear-gradient(100deg, var(--gold) 0 35%, #ffcf5a 45%, var(--gold) 55% 100%); }
:root[data-theme='light'] .nick.nfx-shimmer { background-image: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .55) 50%, transparent 62%), var(--nick-grad, linear-gradient(var(--nc, var(--fg)), var(--nc, var(--fg)))); }

.toast.bump { animation: toast-bump 260ms var(--spring); }
@keyframes toast-bump { 40% { transform: scale(1.04); } }

/* Fixed panels get their frost from the backdrop canvas (bg.js), so the compositor never has to stitch
   blurred layers next to the glass cards. Overlays that float above content use dense glass instead. */
.frosted { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (max-width: 1360px) {
  #app.chat-open .side { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, rgb(34 40 56 / .97), rgb(20 24 36 / .97)); }
  :root[data-theme='light'] #app.chat-open .side { background: rgb(250 251 253 / .97); }
}
.lens { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.stk-picker, .toast { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, rgb(38 44 60 / .97), rgb(24 28 40 / .97)); }
:root[data-theme='light'] .stk-picker, :root[data-theme='light'] .toast { background: linear-gradient(160deg, rgb(255 255 255 / .97), rgb(240 243 248 / .97)); }
@media (max-width: 860px) {
  .mbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, rgb(34 40 56 / .95), rgb(22 26 38 / .95)); }
  :root[data-theme='light'] .mbar { background: rgb(255 255 255 / .94); }
}

.opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-chip { padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--fg-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--dur-fast), color var(--dur-fast); }
.opt-chip:hover:not(:disabled) { color: var(--fg); }
.opt-chip[aria-checked='true'] { color: var(--fg); background: color-mix(in srgb, var(--gold) 22%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.opt-chip:disabled { cursor: default; opacity: .8; }