/* ---- Liquid glass (liquid-glass.js), from Codelay2's glass.css ----------------
   The profile and settings cards are glass over a soft backdrop in the player's
   glass colour (`--glass-color`, Settings › Appearance; Auto = the colour of
   their best roll). Nothing grey is laid over the backdrop: a frost that wipes
   detail, a little white light, the backdrop's colour kept vivid (saturate), a
   tint that follows its brightness, and the EDGE that makes it glass — a light
   line on top, a fainter one below, a dark half-pixel outline, and in Chromium
   the bent rim from liquid-glass.js (`--lg-lens`). Safari, iOS and Firefox get
   the same glass without the bent rim. Performance mode: flat cards. */
.acct{
  --lg-frost:18px;
  --lg-lift:.04;
  --lg-dim:.8;
  --lg-saturate:170%;
  --lg-sheen:linear-gradient(155deg,rgb(255 255 255/.07),rgb(255 255 255/0) 42%,rgb(255 255 255/0) 68%,rgb(255 255 255/.03));
  --lg-veil:linear-gradient(color-mix(in srgb,var(--glass-color) 9%,rgb(255 255 255/var(--lg-lift))),color-mix(in srgb,var(--glass-color) 9%,rgb(255 255 255/var(--lg-lift))));
  --lg-edge:inset 0 1px 0 color-mix(in srgb,var(--glass-color) 30%,rgb(255 255 255/.28)),inset 0 -1px 0 rgb(255 255 255/.07);
  --lg-drop:0 calc(8px + 14px * var(--lg-depth,.5)) calc(22px + 30px * var(--lg-depth,.5)) -14px rgb(0 0 0/calc(.34 + .2 * var(--lg-depth,.5))),0 0 0 .5px rgb(0 0 0/.35);
  position:relative;isolation:isolate;
}
/* What the glass bends: soft light in the glass colour, behind the cards. */
.acct::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 14% 16%,color-mix(in srgb,var(--glass-color) 34%,transparent),transparent 70%),
    radial-gradient(34vmax 28vmax at 86% 34%,color-mix(in srgb,var(--glass-color) 20%,rgb(124 92 255/.16)),transparent 70%),
    radial-gradient(46vmax 34vmax at 46% 100%,color-mix(in srgb,var(--glass-color) 24%,transparent),transparent 72%)}
/* It stays still: every glass card refilters what is behind it on each frame
   where that moves, so a drifting backdrop kept all of them busy at 60 fps. */
html[data-interface-theme]:not([data-interface-theme=default]) .acct::before{opacity:.45}

/* The glass */
:root .acct :is(.acct-hero,.acct-stats>div,.acct-tabs,.acct-panel,.acct-set-card,.acct-settings-nav),:root .glass-preview{
  border-color:transparent;
  background:var(--lg-sheen),var(--lg-veil);
  background-clip:padding-box;
  box-shadow:var(--lg-edge),var(--lg-drop);
  -webkit-backdrop-filter:blur(var(--lg-frost)) saturate(var(--lg-saturate)) brightness(var(--lg-dim));
  backdrop-filter:blur(var(--lg-frost)) saturate(var(--lg-saturate)) brightness(var(--lg-dim));
}
/* The lens frosts itself and keeps its rim sharp: no CSS blur once it is on. */
:root .acct :is(.acct-hero,.acct-stats>div,.acct-tabs,.acct-panel,.acct-set-card,.acct-settings-nav).has-lens,:root .glass-preview.has-lens{
  -webkit-backdrop-filter:var(--lg-lens) saturate(var(--lg-saturate)) brightness(var(--lg-dim));
  backdrop-filter:var(--lg-lens) saturate(var(--lg-saturate)) brightness(var(--lg-dim));
}
/* Cards sitting in the page get a shorter shadow than the header. */
:root .acct :is(.acct-stats>div,.acct-tabs,.acct-settings-nav){box-shadow:var(--lg-edge),0 1px 2px rgb(0 0 0/.18),0 10px 22px -14px rgb(0 0 0/.55),0 0 0 .5px rgb(0 0 0/.3)}
/* The sticky tab bar rides over text: dense glass (more frost, a darker veil),
   as Codelay2 does for glass laid over code. */
:root .acct .acct-tabs{--lg-frost:26px;--lg-dim:.62;background:var(--lg-sheen),linear-gradient(color-mix(in srgb,var(--surface) 62%,transparent),color-mix(in srgb,var(--surface) 62%,transparent))}
.acct .acct-hero-glow{display:none}
.acct .acct-hero{border-radius:22px}
.acct .acct-stats>.is-main strong{color:color-mix(in srgb,var(--glass-color) 60%,var(--prose))}
.acct .acct-tabs button[aria-selected=true]{background:color-mix(in srgb,var(--glass-color) 20%,rgb(255 255 255/.06));box-shadow:inset 0 1px 0 rgb(255 255 255/.14),inset 0 0 0 1px color-mix(in srgb,var(--glass-color) 40%,transparent)}
.acct .acct-tabs button[aria-selected=true] svg,.acct .acct-set-icon{color:var(--glass-color)}
.acct .acct-set-icon{background:color-mix(in srgb,var(--glass-color) 16%,rgb(255 255 255/.05))}
.acct .acct-btn.is-primary{background:var(--glass-color)}
.acct .acct-btn:not(.is-primary):not(.is-gift),.acct .acct-actions :is(.subscribe-control>button,.community-button,.account-watch){background:rgb(255 255 255/.06);border-color:rgb(255 255 255/.1)}
/* Cards inside a glass card are not glass again (a lens on a lens): quiet fills. */
.acct .acct-panel :is(.account-top-slot,.account-roll,.acct-badge-group){background:rgb(0 0 0/.18);border-color:rgb(255 255 255/.07)}

/* Settings › Appearance: the colour picker and its preview */
.glass-picker{display:grid;gap:12px}
.glass-stage{position:relative;display:grid;place-items:center;height:96px;overflow:hidden;border-radius:14px;background:
  radial-gradient(70px 60px at 22% 35%,var(--glass-color),transparent 70%),
  radial-gradient(90px 70px at 78% 70%,color-mix(in srgb,var(--glass-color) 70%,#7c5cff),transparent 70%),
  repeating-linear-gradient(135deg,rgb(255 255 255/.06) 0 6px,transparent 6px 14px),#0d0f14}
.glass-preview{display:grid;place-items:center;width:150px;height:56px;border-radius:16px;color:var(--prose);text-transform:none}
.glass-preview b{font:750 14px/1.1 var(--font-ui)}
.glass-preview small{font-size:10.5px;color:var(--prose-2)}
.glass-swatches{display:flex;flex-wrap:wrap;gap:8px}
.glass-swatch{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;background:var(--sw);box-shadow:inset 0 1px 0 rgb(255 255 255/.4),0 0 0 1px rgb(0 0 0/.3);cursor:pointer;transition:transform .15s,box-shadow .15s}
.glass-swatch:hover:not(:disabled){transform:scale(1.08)}
.glass-swatch[aria-checked=true],.glass-swatch.is-on{box-shadow:inset 0 1px 0 rgb(255 255 255/.4),0 0 0 2px var(--surface),0 0 0 4px var(--sw)}
.glass-swatch:focus-visible,.glass-swatch:focus-within{outline:2px solid var(--prose);outline-offset:3px}
.glass-swatch.is-auto{width:auto;padding:0 12px;border-radius:999px;color:#11131a;font:700 11.5px/1 var(--font-ui);text-transform:none}
.glass-swatch.is-custom{background:conic-gradient(#f87171,#fbbf24,#34d399,#60a5fa,#a78bfa,#f472b6,#f87171);color:#fff;font:700 16px/1 var(--font-ui);text-shadow:0 1px 2px #0008}
.glass-swatch.is-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* Phones and tablets: the site turns every backdrop blur off there
   (notifications.css, pointer: coarse) to keep scrolling smooth. The glass
   keeps its tint, sheen and rim over a denser fill instead of a blur. */
@media (pointer:coarse){
  :root .acct :is(.acct-hero,.acct-stats>div,.acct-tabs,.acct-panel,.acct-set-card,.acct-settings-nav),:root .glass-preview{background:var(--lg-sheen),linear-gradient(color-mix(in srgb,var(--glass-color) 10%,color-mix(in srgb,var(--surface) 86%,transparent)),color-mix(in srgb,var(--glass-color) 10%,color-mix(in srgb,var(--surface) 86%,transparent)))}
  :root .acct .acct-tabs{background:var(--lg-sheen),linear-gradient(color-mix(in srgb,var(--glass-color) 8%,var(--surface)),color-mix(in srgb,var(--glass-color) 8%,var(--surface)))}
}
/* Performance mode, reduced transparency, more contrast: flat cards, no blur. */
html.perf-mode .acct :is(.acct-hero,.acct-stats>div,.acct-tabs,.acct-panel,.acct-set-card,.acct-settings-nav),html.perf-mode .glass-preview{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--glass-color) 6%,var(--surface))}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :root .acct :is(.acct-hero,.acct-stats>div,.acct-tabs,.acct-panel,.acct-set-card,.acct-settings-nav),:root .glass-preview{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--glass-color) 6%,var(--surface))}
}