/* Estilo "vidro líquido" (teste): painéis e botões de vidro sobre um fundo vivo com as cores do jogo na tela.
   Fica num arquivo só, carregado depois do app.css: tirar o <link> do index.html volta ao estilo de antes (o
   #bgfx some junto, porque só tem desenho aqui). O fundo são cartas sem desenho, em 3D, nas cores da marca de cada
   jogo (html[data-game], posto por renderBrand); elas só sobem e descem devagar, girando um pouco, sem seguir a
   rolagem nem o mouse. */

:root {
  --g1: #3b6cf6; --g2: #e14bd8; --g3: #8b5cf6; --g4: #38bdf8;  /* Lorcana: azul, rosa, violeta e ciano */
  --bg: #e7eaf3; --panel: rgb(255 255 255 / .5); --panel-2: rgb(255 255 255 / .38); --line: rgb(255 255 255 / .75);
  --radius: 22px; --cards: .5;
  /* o vidro dos painéis: mais claro em cima, a borda acesa e uma sombra macia */
  --glass: linear-gradient(180deg, rgb(255 255 255 / .62), rgb(255 255 255 / .28));
  --glass-rim: inset 0 0 0 1px rgb(255 255 255 / .55), inset 0 1.5px 1px rgb(255 255 255 / .95),
    inset 0 -1.5px 2px rgb(30 30 60 / .07), inset 0 -8px 16px -10px rgb(255 255 255 / .8);
  --glass-drop: 0 1px 1px rgb(20 20 60 / .05), 0 8px 24px rgb(20 20 60 / .10);
  --edge: rgb(20 20 50 / .07);
  --shadow: var(--glass-drop);
  /* a lente dos botões: quase transparente no meio, a borda grossa e acesa, o reflexo em cima e embaixo e um halo */
  --lens: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / .12) 52%, rgb(255 255 255 / .26));
  --lens-rim: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 0 6px 1px rgb(255 255 255 / .55),
    inset 0 8px 9px -8px rgb(255 255 255 / 1), inset 0 -7px 9px -7px rgb(255 255 255 / .75);
  --lens-glow: 0 0 0 .5px rgb(40 50 90 / .2), 0 0 14px rgb(255 255 255 / .6), 0 12px 22px -10px rgb(30 50 110 / .4);
  --spec: rgb(255 255 255 / .7);
  --tint: #c48a06;
}
:root[data-game="magic"] { --g1: #e8452c; --g2: #f59e0b; --g3: #c0265f; --g4: #fb7185; }
:root[data-game="pokemon"] { --g1: #2b6ff0; --g2: #ffcc00; --g3: #22b8cf; --g4: #f97316; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060914; --panel: rgb(30 38 70 / .42); --panel-2: rgb(255 255 255 / .06); --line: rgb(255 255 255 / .14);
    --cards: .55;
    --glass: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04));
    --glass-rim: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 1.5px 1px rgb(255 255 255 / .28),
      inset 0 -1.5px 2px rgb(0 0 0 / .25), inset 0 -8px 16px -10px rgb(255 255 255 / .12);
    --glass-drop: 0 1px 1px rgb(0 0 0 / .3), 0 10px 28px rgb(0 0 0 / .4);
    --edge: rgb(0 0 0 / .35); --tint: var(--accent);
    --lens: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / .05) 52%, rgb(255 255 255 / .12));
    --lens-rim: inset 0 0 0 1px rgb(255 255 255 / .62), inset 0 0 6px 1px rgb(255 255 255 / .24),
      inset 0 8px 9px -8px rgb(255 255 255 / .6), inset 0 -7px 9px -7px rgb(255 255 255 / .32);
    --lens-glow: 0 0 0 .5px rgb(255 255 255 / .12), 0 0 16px rgb(170 200 255 / .22), 0 12px 24px -10px rgb(0 0 0 / .75);
    --spec: rgb(255 255 255 / .38);
  }
}
:root[data-theme="dark"] {
  --bg: #060914; --panel: rgb(30 38 70 / .42); --panel-2: rgb(255 255 255 / .06); --line: rgb(255 255 255 / .14);
  --cards: .55;
  --glass: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04));
  --glass-rim: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 1.5px 1px rgb(255 255 255 / .28),
    inset 0 -1.5px 2px rgb(0 0 0 / .25), inset 0 -8px 16px -10px rgb(255 255 255 / .12);
  --glass-drop: 0 1px 1px rgb(0 0 0 / .3), 0 10px 28px rgb(0 0 0 / .4);
  --edge: rgb(0 0 0 / .35); --tint: var(--accent);
  --lens: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / .05) 52%, rgb(255 255 255 / .12));
  --lens-rim: inset 0 0 0 1px rgb(255 255 255 / .62), inset 0 0 6px 1px rgb(255 255 255 / .24),
    inset 0 8px 9px -8px rgb(255 255 255 / .6), inset 0 -7px 9px -7px rgb(255 255 255 / .32);
  --lens-glow: 0 0 0 .5px rgb(255 255 255 / .12), 0 0 16px rgb(170 200 255 / .22), 0 12px 24px -10px rgb(0 0 0 / .75);
  --spec: rgb(255 255 255 / .38);
}

/* ---- o fundo vivo: cartas sem desenho, em 3D, que flutuam devagar, cada uma numa profundidade ---- */
@property --float { syntax: "<number>"; inherits: false; initial-value: 0; }
html { background: var(--bg); }
body { background: transparent; }
.bgfx {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; perspective: 1100px;
  /* um véu bem leve das cores do jogo, parado, para o vidro ter o que refratar */
  background:
    radial-gradient(60vmax 50vmax at 10% 0%, color-mix(in srgb, var(--g1) 16%, transparent), transparent),
    radial-gradient(60vmax 50vmax at 100% 100%, color-mix(in srgb, var(--g2) 13%, transparent), transparent);
}
.bgfx i {
  position: absolute; width: var(--w); aspect-ratio: 63 / 88; border-radius: calc(var(--w) * .055);
  opacity: calc(var(--cards) * var(--o, 1)); filter: blur(var(--b, 0)); will-change: transform;
  background:
    linear-gradient(125deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 38%),
    linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 45%, var(--c2)));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 18px 40px -12px rgb(10 20 50 / .35);
  transform:
    translateY(calc(var(--float) * -2.5vh))
    rotateX(calc(var(--rx) + var(--float) * 10deg))
    rotateY(calc(var(--ry) - var(--float) * 14deg))
    rotate(calc(var(--rz) + var(--float) * 4deg));
  animation: bgfloat var(--t) ease-in-out infinite alternate;
}
/* o mínimo de uma carta: a moldura por dentro e um losango no meio */
.bgfx i::before, .bgfx i::after { content: ""; position: absolute; border: 1.5px solid rgb(255 255 255 / .45); }
.bgfx i::before { inset: 6%; border-radius: calc(var(--w) * .035); }
.bgfx i::after { width: 26%; aspect-ratio: 1; left: 37%; top: calc(50% - var(--w) * .13); rotate: 45deg; border-radius: 18%; }
.bgfx i:nth-child(1) { --w: 30vmin; --c: var(--g1); --c2: var(--g3); --b: 3px; --o: .8; --t: 13s;
  left: -7vmin; top: 9vh; --rx: 16deg; --ry: 26deg; --rz: -14deg; }
.bgfx i:nth-child(2) { --w: 17vmin; --c: var(--g2); --c2: var(--g1); --t: 11s;
  right: 6vw; top: 5vh; --rx: -12deg; --ry: -22deg; --rz: 12deg; animation-delay: -4s; }
.bgfx i:nth-child(3) { --w: 11vmin; --c: var(--g4); --c2: var(--g3); --b: 1.5px; --o: .7; --t: 15s;
  left: 40vw; top: 30vh; --rx: 22deg; --ry: -10deg; --rz: -6deg; animation-delay: -7s; }
.bgfx i:nth-child(4) { --w: 34vmin; --c: var(--g3); --c2: var(--g2); --b: 4px; --o: .75; --t: 14s;
  right: -9vmin; top: 42vh; --rx: -18deg; --ry: -30deg; --rz: 18deg; animation-delay: -2s; }
.bgfx i:nth-child(5) { --w: 16vmin; --c: var(--g2); --c2: var(--g4); --t: 12s;
  left: 9vw; top: 60vh; --rx: 10deg; --ry: 20deg; --rz: 8deg; animation-delay: -9s; }
.bgfx i:nth-child(6) { --w: 22vmin; --c: var(--g1); --c2: var(--g2); --t: 16s;
  left: 52vw; top: 74vh; --rx: -20deg; --ry: 16deg; --rz: -18deg; animation-delay: -5s; }
.bgfx i:nth-child(7) { --w: 10vmin; --c: var(--g3); --c2: var(--g1); --b: 2px; --o: .6; --t: 17s;
  right: 30vw; top: 13vh; --rx: 14deg; --ry: 18deg; --rz: 24deg; animation-delay: -11s; }
.bgfx i:nth-child(8) { --w: 26vmin; --c: var(--g4); --c2: var(--g1); --b: 2px; --t: 13s;
  left: -3vw; bottom: -9vmin; --rx: 20deg; --ry: -24deg; --rz: -24deg; animation-delay: -3s; }
@keyframes bgfloat { from { --float: -1; } to { --float: 1; } }
@media (prefers-reduced-motion: reduce) { .bgfx i { animation: none; } }

/* ---- as superfícies: vidro desfocado, com a borda acesa ---- */
.stat, .panel, .tipcard, dialog.dlg, table.list, .pull, .reprocess, .iconbtn, .seg, .btn, nav.tabs,
.filters, .filtertoggle, .chip {
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.stat, .panel, .tipcard, table.list, .pull, .reprocess {
  background: var(--glass), var(--panel); border-color: transparent;
  box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge), var(--glass-drop);
}
.panel, .tipcard { border-radius: 28px; }
dialog.dlg {
  border-radius: 30px; border-color: transparent;
  background: var(--glass), color-mix(in srgb, var(--bg) 45%, var(--panel));
  box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge), 0 24px 60px rgb(0 0 0 / .25);
}
dialog.dlg::backdrop { background: rgb(5 8 20 / .3); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }

/* o aviso de perfil de outra pessoa: o mesmo vidro dos painéis, com um véu leve da cor do destaque (o card de explicação,
   .tipcard, usa o vidro puro do painel) */
.viewbanner {
  border: 0; border-radius: 24px; padding: 12px 14px 12px 16px; gap: 12px;
  background: var(--glass), color-mix(in srgb, var(--tint) 10%, transparent), var(--panel);
  box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge), var(--glass-drop);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.viewbanner .avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .55), 0 4px 10px rgb(0 0 0 / .2); }

/* deslizar a carta: nada colorido atrás do vidro (o desfoque espalharia a cor pela linha toda). Os botões são
   lentes que surgem no vão aberto pelo arraste, crescendo e acendendo junto com ele */
.swipe { border-radius: 16px; }
.pull { border-radius: 16px; }
.swipe-act.left button, .swipe-act.right button { background: none; color: var(--text); font-size: 12px; font-weight: 650; gap: 7px; }
.swipe-act button svg {
  box-sizing: content-box; width: 20px; height: 20px; padding: 13px; border-radius: 50%;
  background: var(--lens), color-mix(in srgb, var(--tint) 16%, transparent); color: var(--accent);
  box-shadow: var(--lens-rim), var(--lens-glow), 0 6px 18px -6px color-mix(in srgb, var(--tint) 50%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
.swipe-act.right button svg {
  background: var(--lens), color-mix(in srgb, var(--down) 18%, transparent); color: var(--down);
  box-shadow: var(--lens-rim), var(--lens-glow), 0 6px 18px -6px color-mix(in srgb, var(--down) 50%, transparent);
}
.swipe-act.left button svg { scale: calc(.55 + .45 * var(--swl)); }
.swipe-act.right button svg { scale: calc(.55 + .45 * var(--swr)); }
.swipe-act button:active svg { scale: .92; }
.swipe-act button:focus-visible { outline: none; }
.swipe-act button:focus-visible svg { box-shadow: var(--lens-rim), 0 0 0 2px var(--accent); }

/* os avisos: cada um num vidro; os ícones em lentes; o novo ganha o véu do destaque */
.notesask, .noteslist button {
  background: var(--glass), color-mix(in srgb, var(--panel) 70%, transparent);
  box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge);
}
.notesask.on { background: var(--glass), color-mix(in srgb, var(--up) 10%, transparent), color-mix(in srgb, var(--panel) 70%, transparent); }
.noteslist li.unread button {
  background: var(--glass), color-mix(in srgb, var(--tint) 12%, transparent), color-mix(in srgb, var(--panel) 70%, transparent);
  box-shadow: var(--glass-rim), 0 0 0 .5px color-mix(in srgb, var(--accent) 45%, var(--edge));
}
.noteslist button { transition: transform .15s ease, filter .15s ease; }
.noteslist button:hover { filter: brightness(1.05); }
.noteslist button:active { transform: scale(.98); }
.askicon, .noteslist .noteicon { background: var(--lens); box-shadow: var(--lens-rim), var(--lens-glow); }
.notesnew { background: var(--lens), color-mix(in srgb, var(--tint) 14%, transparent); box-shadow: var(--lens-rim); }

/* a grade de cartas: translúcida, sem desfoque (centenas de cartas pesariam no celular) */
.tile, .tilecell {
  background: var(--glass), var(--panel); border-color: transparent;
  box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge), var(--glass-drop);
}
.tilecell .tile { background: transparent; box-shadow: none; }

/* ---- os botões: lentes de vidro claro, sem cor sólida ----
   A hierarquia segue o Liquid Glass da Apple: a cor do destaque vai só na ação principal da tela (uma, no máximo
   duas). O resto é lente clara (.btn.ghost, a secundária) ou texto (.linkbtn, a terciária). Opção marcada (seletor,
   chip, filtro aberto) é uma lente mais cheia, sem cor: estado não é ação. */
.btn, .iconbtn, .seg, .chip, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, .fieldbtn, .filtertoggle { border-radius: 999px; }
.btn, .iconbtn, .seg, .chip, .filtertoggle, .avatarbtn, .dockaction {
  background: var(--lens); border-color: transparent; color: var(--text);
  box-shadow: var(--lens-rim), var(--lens-glow);
  -webkit-backdrop-filter: blur(14px) saturate(160%) brightness(1.06); backdrop-filter: blur(14px) saturate(160%) brightness(1.06);
}
/* o reflexo de luz na curva de cima, por baixo do texto */
.btn, .iconbtn, .chip, .filtertoggle, .dockaction { position: relative; isolation: isolate; }
.iconbtn.close { position: absolute; }  /* o ✕ dos diálogos continua preso no canto */
.btn::before, .iconbtn::before, .chip::before, .filtertoggle::before, .dockaction::before {
  content: ""; position: absolute; z-index: -1; left: 5%; right: 5%; top: 1.5px; height: 55%; pointer-events: none;
  border-radius: 999px; background: linear-gradient(180deg, var(--spec), rgb(255 255 255 / 0));
  /* some nas pontas, como o brilho que corre pela curva do vidro */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
/* os campos não são botões: um poço raso no vidro, sem lente, halo nem desfoque próprio (vidro sobre vidro embaralha) */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, .fieldbtn {
  padding: 0 16px; border: 0; color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--text) 14%, transparent), inset 0 1px 3px rgb(0 0 0 / .12);
  transition: box-shadow .15s ease, background .15s ease;
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]):focus, select:focus, .fieldbtn:focus-visible {
  outline: none; background: color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--text) 14%, transparent), 0 0 0 2px color-mix(in srgb, var(--accent) 65%, transparent);
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])::placeholder { color: var(--muted); }
select option { background: var(--bg); color: var(--text); }
/* a principal: a mesma lente, com um véu da cor do destaque, o texto nessa cor e o halo puxando para ela */
.btn:not(.ghost):not(.danger), .dockaction {
  background: var(--lens), color-mix(in srgb, var(--tint) 14%, transparent);
  color: var(--accent); font-weight: 700;
  box-shadow: var(--lens-rim), inset 0 0 14px color-mix(in srgb, var(--tint) 22%, transparent), var(--lens-glow),
    0 6px 20px -6px color-mix(in srgb, var(--tint) 45%, transparent);
}
/* marcado: a lente mais cheia e o texto forte, na cor do texto */
.seg button[aria-pressed="true"], .filtertoggle[aria-expanded="true"], .chip[aria-pressed="true"] {
  background: var(--lens), color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); font-weight: 700;
  border-color: transparent; box-shadow: var(--lens-rim), var(--lens-glow);
}
.btn.danger { background: var(--lens), color-mix(in srgb, var(--down) 10%, transparent); color: var(--down); border: 0; }
.btn, .iconbtn, .seg button, .filtertoggle, .chip, .dockaction { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn:hover, .iconbtn:hover, .filtertoggle:hover { filter: brightness(1.06); }
.btn:active, .iconbtn:active, .seg button:active, .filtertoggle:active, .chip:active, .dockaction:active { transform: scale(.96); }
.avatarbtn { border-radius: 50%; padding: 2px; }

/* o seletor (jogo, grade/lista): uma cápsula de vidro com a opção marcada numa lente menor */
.seg { padding: 3px; gap: 2px; }
.seg button { background: transparent; border-radius: 999px; height: 30px; color: var(--muted); }

/* a lente que escorre (glide() no app.js): com ela, a opção marcada perde a lente própria e a .glider passa por baixo */
.glides { position: relative; }
.glides > :not(.glider) { position: relative; z-index: 1; transition: color .5s ease; }
.glides.glides > [aria-pressed="true"], .glides.glides > [aria-current="page"] { background: transparent; box-shadow: none; }
.glider {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 999px; transform-origin: center;
  background: var(--lens); box-shadow: var(--lens-rim), var(--lens-glow);
}
.seg > .glider { background: var(--lens), color-mix(in srgb, var(--text) 9%, transparent); }

/* o jogo: embaixo da marca, só o texto e a seta (uma lente ali brigaria com o logo); o menu é o dos seletores (.menupop) */
.gamepick { margin-left: 0; padding: 0 2px; height: 24px; }
.gamepick svg { color: var(--accent); }
.gamepick:hover, .gamepick[aria-expanded="true"] { background: none; color: var(--text); }

/* ---- as abas: uma cápsula de vidro, a aba atual numa lente ---- */
nav.tabs {
  border: 0; border-radius: 999px; padding: 4px; background: var(--glass), var(--panel-2);
  box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge), var(--glass-drop); scroll-padding: 0 4px;
}
nav.tabs a { border: 0; margin: 0; border-radius: 999px; padding: 10px 16px; }
nav.tabs a[aria-current="page"] { color: var(--text); background: var(--lens); box-shadow: var(--lens-rim), var(--lens-glow); }
@media (max-width: 560px) { nav.tabs a { padding: 10px 13px; } }

/* o vidro das barras que ficam por cima da página (a de filtros, que gruda no topo, e a de baixo do celular): o
   fundo da página bem transparente, com o desfoque das superfícies */
:root { --bar: color-mix(in srgb, var(--bg) 35%, transparent); }

/* a barra de filtros que gruda no topo: colada em cima (passa por baixo da barra de status do iPhone, quando há),
   ocupa a largura toda e some aos poucos só embaixo */
.filters {
  margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
  padding-top: calc(14px + env(safe-area-inset-top)); background: var(--bar);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent);
}

/* ---- a barra de baixo do celular: uma bandeja de vidro, com a ação e a aba atual em lentes ---- */
@media (max-width: 560px) {
  .dock {
    background: var(--bar); border-color: transparent;
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge), 0 12px 36px rgb(20 20 60 / .22);
  }
  .docktabs a[aria-current="page"] { color: var(--text); background: var(--lens); box-shadow: var(--lens-rim), var(--lens-glow); }
  .docktabs a[aria-current="page"] svg { color: var(--accent); }
}

/* ---- os filtros da coleção ---- */
/* as cores: só os círculos, sem caixa; com uma marcada, as outras apagam e a marcada ganha a lente */
.inkchip { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; opacity: 1; transition: opacity .2s ease, transform .15s ease; }
.inkchip svg { width: 28px; height: 28px; }
.inkchips:has([aria-pressed="true"]) .inkchip:not([aria-pressed="true"]) { opacity: .38; }
.inkchip[aria-pressed="true"] { background: var(--lens); border: 0; box-shadow: var(--lens-rim), var(--lens-glow); }
.inkchip:active { transform: scale(.92); }
/* os selects dos filtros extras, com menos folga (cabem "Todas as raridades" e "Normal e reverse holo") */
.morefilters select, .morefilters .fieldbtn, .morefilters .menusel { padding: 0 8px 0 14px; text-overflow: ellipsis; }
/* o número de filtros valendo é o único ponto de cor da barra */
.filtertoggle .fcount { box-shadow: 0 0 0 2px var(--bg); }
/* a terciária: texto na cor do texto, sublinhado leve (a cor fica para a principal) */
.linkbtn { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.linkbtn.danger { color: var(--down); }

/* ---- os gráficos: o anel dos pontos na cor do fundo e o tooltip num vidro ---- */
:root { --dot-ring: var(--bg); }
.tip {
  border: 0; border-radius: 14px; padding: 9px 12px;
  background: var(--glass), color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge), 0 12px 30px rgb(0 0 0 / .25);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
}

/* o menu aberto dentro de um diálogo fica sobre outro vidro: um fundo mais cheio, senão o texto de trás atravessa */
dialog .menupop { background: color-mix(in srgb, var(--bg) 78%, transparent); }

/* ---- o popover do "i": o vidro do aviso de perfil de outra pessoa (.viewbanner), sem seta: sem fundo, só o desfoque
   e a borda acesa (um color-mix não vale como camada de `background` antes da última, então o aviso fica sem fundo) ---- */
.infopop, .menupop {
  border: 0; border-radius: 22px; background: none; color: var(--text); overflow: visible;
  box-shadow: var(--glass-rim), 0 0 0 .5px var(--edge), var(--glass-drop);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}