/* Salão do Mudae: mesa com a roleta, mesa ao vivo, álbum e ranking (canais com mudae: true). */

:root {
  --rarity-legendary: var(--yellow);
  --rarity-epic: #b46cff;
  --rarity-rare: #3ba7ff;
  --rarity-common: #8e95a2;
}
.r-legendary { --frame: var(--rarity-legendary); }
.r-epic { --frame: var(--rarity-epic); }
.r-rare { --frame: var(--rarity-rare); }
.r-common { --frame: var(--rarity-common); }

/* ---------- estrutura: Salão no centro, chat do canal à direita ---------- */
#main.salon-mode { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); }
#main.salon-mode > #main-header { grid-column: 1 / -1; }
#main.salon-mode > #salon-view { grid-column: 1; grid-row: 2; }
#main.salon-mode > #chat-view { grid-column: 2; grid-row: 2; min-width: 0; border-left: 1px solid var(--divider); background: var(--bg-sidebar); }
#salon-view { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; }

/* Chat estreito do Salão. */
#main.salon-mode .msg { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; padding: 2px 12px 2px 12px; margin-top: 12px; }
#main.salon-mode .msg.continued { margin-top: 0; }
#main.salon-mode .msg .avatar { width: 32px; height: 32px; font-size: 13px; }
#main.salon-mode .msg .msg-actions { right: 8px; }
#main.salon-mode .reply-curve { left: -27px; width: 22px; }
#main.salon-mode .welcome { padding: 20px 14px 8px; }
#main.salon-mode .welcome h2 { font-size: 20px; }
#main.salon-mode .welcome-icon { width: 48px; height: 48px; }
#main.salon-mode #composer { padding-inline: 10px; }

#salon-side-tabs { display: none; }
#main.salon-mode #salon-side-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.salon-side-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 9px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: color .15s ease;
}
.salon-side-tab:hover { color: var(--text); }
.salon-side-tab.active { color: var(--text-strong); border-bottom-color: var(--brand); }
.salon-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bg-input); color: var(--text); font-size: 11px; line-height: 18px; text-align: center; }
.salon-side-close { display: none; place-items: center; width: 32px; height: 32px; margin: 0 0 4px auto; border: 0; border-radius: 6px; background: none; color: var(--interactive); cursor: pointer; }
.salon-side-close:hover { background: var(--hover); color: var(--text-strong); }
#chat-view.salon-people-open > #messages, #chat-view.salon-people-open > #composer, #chat-view.salon-people-open > #notify-banner { display: none; }
#salon-people { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 8px; }

.salon-section-title { padding: 4px 8px 8px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.salon-person {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .12s ease;
}
.salon-person:hover { background: var(--hover); }
.salon-person .avatar { width: 36px; height: 36px; font-size: 14px; flex-shrink: 0; }
.salon-person-info { min-width: 0; }
.salon-person-name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.salon-person-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-ring-ready { font-size: 13px; }
.salon-dots { display: flex; gap: 3px; margin-top: 5px; }
.salon-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-input); }
.salon-dots span.on { background: var(--brand); }
.salon-empty-note { padding: 12px 8px; color: var(--text-muted); font-size: 13px; }

/* ---------- topo: abas e status ---------- */
.salon-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.salon-tabs { display: flex; gap: 4px; }
.salon-tab {
  white-space: nowrap; padding: 12px 12px 10px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--text-muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: color .15s ease;
}
.salon-tab:hover { color: var(--text); }
.salon-tab.active { color: var(--text-strong); border-bottom-color: var(--brand); }
.salon-top-right { display: flex; align-items: center; gap: 8px; min-width: 0; padding-bottom: 8px; }
.salon-status { min-width: 0; }
.salon-simple, .salon-open-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--divider); border-radius: 999px;
  background: transparent; color: var(--interactive); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.salon-simple:hover, .salon-open-btn:hover { background: var(--hover); color: var(--text-strong); }
.salon-open-btn { margin-right: 6px; border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--text); }
.mudae-claim.waiting { opacity: .75; cursor: progress; }
.salon-status-pill {
  display: inline-flex; align-items: center; max-width: 100%; padding: 5px 12px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 600; color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
}
.salon-status-pill.empty { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); border-color: color-mix(in srgb, var(--yellow) 35%, transparent); }
.salon-body { flex: 1; min-height: 0; overflow-y: auto; }

/* ---------- cards ---------- */
.salon-card {
  --frame: var(--rarity-common);
  position: relative; flex: none; border-radius: 12px; overflow: hidden; background: var(--bg-floating);
  box-shadow: 0 0 0 2px var(--frame), 0 8px 22px rgba(0, 0, 0, .35);
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .18s ease, box-shadow .2s ease;
}
.salon-card.r-legendary { --frame: var(--rarity-legendary); box-shadow: 0 0 0 2px var(--frame), 0 0 26px color-mix(in srgb, var(--frame) 45%, transparent), 0 8px 22px rgba(0, 0, 0, .35); }
.salon-card.r-epic { --frame: var(--rarity-epic); box-shadow: 0 0 0 2px var(--frame), 0 0 18px color-mix(in srgb, var(--frame) 35%, transparent), 0 8px 22px rgba(0, 0, 0, .35); }
.salon-card.r-rare { --frame: var(--rarity-rare); }
.salon-card-art { aspect-ratio: 2 / 3; background: var(--bg-panel); cursor: zoom-in; }
.salon-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.salon-art { position: relative; width: 100%; height: 100%; }
.salon-art > .salon-card-back { height: 100%; }
.salon-art > .salon-art-image { position: absolute; inset: 0; opacity: 0; transition: opacity .15s ease; }
.salon-art > .salon-art-image.ready { opacity: 1; }
.salon-art-missing { display: grid; place-items: center; height: 100%; color: var(--text-muted); font-size: 48px; font-weight: 700; }
.salon-holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 70, 200, .5) 38%, rgba(80, 230, 255, .5) 47%, rgba(255, 240, 120, .45) 56%, transparent 70%);
  background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%); transition: opacity .25s ease;
}
.salon-card.r-legendary .salon-holo { opacity: .28; }
.salon-card.r-epic .salon-holo { opacity: .14; }
.salon-card:hover .salon-holo { opacity: .5; }
.salon-card-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .82) 42%); color: #fff; pointer-events: none; }
.salon-card-name { overflow: hidden; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.salon-card-series { overflow: hidden; color: rgba(255, 255, 255, .72); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.salon-card-value { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.salon-card-value .mudae-kakera { color: var(--rarity-epic); }
.salon-rank { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12px; font-weight: 700; }
/* O card do palco encolhe em telas baixas para a mesa ao vivo caber sem rolar. */
.salon-card.big, .salon-reel { width: clamp(160px, calc((100dvh - 620px) / 1.5), 240px); max-width: 58vw; }
.salon-card.big .salon-card-info { padding: 44px 14px 12px; }
.salon-card.big .salon-card-name { font-size: 20px; }
.salon-card.big .salon-card-series { font-size: 14px; }
.salon-card.big .salon-card-value { font-size: 16px; margin-top: 4px; }
.salon-card.small { width: 120px; cursor: pointer; }
.salon-card.small .salon-rank { display: none; }
.salon-card.mini { width: 96px; }
.salon-card.mini .salon-card-info { padding: 20px 7px 6px; }
.salon-card.mini .salon-card-name { font-size: 12px; }
.salon-card.album { width: 100%; }
.salon-card-back {
  display: grid; place-items: center; aspect-ratio: 2 / 3; color: var(--brand);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--brand) 18%, var(--bg-floating)) 0 10px, var(--bg-floating) 10px 20px);
}
.salon-card.placeholder { --frame: var(--divider); }

/* Molduras desenhadas em CSS, uma por raridade: aro externo, paspatur escuro tingido e um filete em volta da foto.
   A espessura acompanha o tamanho da carta (cqi). Raro ganha cantoneiras leves; épico, cantoneiras e abas;
   lendário, uma gema em cima e embaixo e um brilho que percorre o aro dourado. */
@property --sheen { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.salon-card.framed {
  container-type: inline-size;
  --t: clamp(4px, 3.2cqi, 8px); --ring: 1px;
  --mat: linear-gradient(160deg, #2b2f3a, #1a1d25);
  --ring-paint: linear-gradient(160deg, #7a808d, #3b404b 55%, #5d6370);
  --hair: rgba(255, 255, 255, .09);
  --corner: transparent; --tab: transparent; --gem: transparent;
  --glow: 0 0 0 transparent;
  --frame-x: var(--t); --frame-y: var(--t);
  --art-r: max(3px, calc(12px - var(--t) * .6));
  overflow: visible; background: transparent; box-shadow: none;
}
.salon-card.framed.r-rare {
  --t: clamp(4.5px, 3.6cqi, 10px); --ring: 1.5px;
  --mat: linear-gradient(160deg, #1d2f4c, #111a2a);
  --ring-paint: linear-gradient(160deg, #a8dbff, var(--rarity-rare) 45%, #1d5a96);
  --hair: color-mix(in srgb, var(--rarity-rare) 40%, transparent);
  --corner: color-mix(in srgb, #a8dbff 45%, transparent);
}
.salon-card.framed.r-epic {
  --t: clamp(5px, 4.2cqi, 12px); --ring: 1.5px;
  --mat: linear-gradient(160deg, #2f2050, #160e27);
  --ring-paint: linear-gradient(160deg, #ead3ff, var(--rarity-epic) 45%, #5f2aa6);
  --hair: color-mix(in srgb, var(--rarity-epic) 50%, transparent);
  --corner: color-mix(in srgb, #ead3ff 75%, transparent);
  --tab: color-mix(in srgb, #ead3ff 60%, transparent);
  --glow: 0 0 18px color-mix(in srgb, var(--rarity-epic) 24%, transparent);
}
.salon-card.framed.r-legendary {
  --t: clamp(5.5px, 4.6cqi, 13px); --ring: 2px;
  --mat: linear-gradient(160deg, #3e2f11, #1b1407);
  --ring-paint: conic-gradient(from var(--sheen), #8a6420, #f3d27a 12%, #fff4cc 18%, #c9972f 30%, #8a6420 45%, #e8c060 62%, #fff4cc 68%, #b8862b 80%, #8a6420);
  --hair: color-mix(in srgb, #f3d27a 60%, transparent);
  --corner: #f3d27a;
  --tab: color-mix(in srgb, #f3d27a 70%, transparent);
  --gem: #fff1c2;
  --glow: 0 0 22px color-mix(in srgb, var(--rarity-legendary) 26%, transparent);
}
.salon-card-visual {
  /* Medidas dos enfeites, todas a partir da espessura da moldura. */
  --o: calc(var(--t, 0px) * .28); --l: calc(var(--t, 0px) * 2.4); --w: max(1px, calc(var(--t, 0px) * .16)); --tw: calc(var(--t, 0px) * 3.2);
  position: relative; aspect-ratio: 2 / 3; border-radius: 12px;
  background:
    /* gema no centro de cima e de baixo */
    radial-gradient(circle closest-side, var(--gem) 0 55%, transparent 62%) center top / var(--t) var(--t) no-repeat,
    radial-gradient(circle closest-side, var(--gem) 0 55%, transparent 62%) center bottom / var(--t) var(--t) no-repeat,
    /* abas no centro de cima e de baixo */
    linear-gradient(var(--tab), var(--tab)) center top var(--o) / var(--tw) var(--w) no-repeat,
    linear-gradient(var(--tab), var(--tab)) center bottom var(--o) / var(--tw) var(--w) no-repeat,
    /* cantoneiras: duas barras finas em cada quina */
    linear-gradient(var(--corner), var(--corner)) left var(--o) top var(--o) / var(--l) var(--w) no-repeat,
    linear-gradient(var(--corner), var(--corner)) left var(--o) top var(--o) / var(--w) var(--l) no-repeat,
    linear-gradient(var(--corner), var(--corner)) right var(--o) top var(--o) / var(--l) var(--w) no-repeat,
    linear-gradient(var(--corner), var(--corner)) right var(--o) top var(--o) / var(--w) var(--l) no-repeat,
    linear-gradient(var(--corner), var(--corner)) left var(--o) bottom var(--o) / var(--l) var(--w) no-repeat,
    linear-gradient(var(--corner), var(--corner)) left var(--o) bottom var(--o) / var(--w) var(--l) no-repeat,
    linear-gradient(var(--corner), var(--corner)) right var(--o) bottom var(--o) / var(--l) var(--w) no-repeat,
    linear-gradient(var(--corner), var(--corner)) right var(--o) bottom var(--o) / var(--w) var(--l) no-repeat,
    /* reflexo diagonal discreto sobre o paspatur */
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .07) 48%, transparent 60%),
    var(--mat, #10131e);
  box-shadow: var(--glow, 0 0 0 transparent), inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .35);
}
/* Aro externo: só a borda do gradiente aparece. */
.salon-card-visual::before {
  content: ''; position: absolute; inset: 0; z-index: 2; padding: var(--ring, 0); border-radius: inherit; pointer-events: none;
  background: var(--ring-paint, none);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Filete em volta da foto, com um leve sombreado para dentro. */
.salon-card-visual::after {
  content: ''; position: absolute; inset: calc(var(--frame-y, 0px) - 1px) calc(var(--frame-x, 0px) - 1px); z-index: 2; pointer-events: none;
  border: 1px solid var(--hair, transparent); border-radius: calc(var(--art-r) + 1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.salon-card.framed.r-legendary .salon-card-visual::before { animation: salon-sheen 7s linear infinite; }
@keyframes salon-sheen { to { --sheen: 360deg; } }
.salon-card.framed .salon-card-art {
  position: absolute; inset: var(--frame-y) var(--frame-x); aspect-ratio: auto; overflow: hidden; border-radius: var(--art-r); background: #10131e;
}
.salon-card.framed .salon-card-art img { object-fit: cover; }
.salon-card.framed .salon-card-info {
  position: static; padding: 8px 4px 4px; background: none;
}
.salon-card-heading { display: flex; align-items: center; gap: 6px; }
.salon-card-heading .salon-card-name { flex: 1; min-width: 0; }
.salon-card-heading .salon-rank { position: static; flex: none; font-size: 10px; padding: 2px 4px; }
.salon-card.framed .salon-card-name { color: var(--text-strong); }
.salon-card.framed .salon-card-series { color: var(--text-muted); }
.salon-card.framed .salon-card-value { color: var(--text); }
.salon-stage .salon-card.framed .salon-card-name, .salon-stage .salon-card.framed .salon-card-value { color: #fff; }
.salon-stage .salon-card.framed .salon-card-series { color: #b8bfd4; }
.salon-card.framed > .salon-chip {
  position: static; width: max-content; max-width: calc(100% - 36px); margin: 4px 0; padding-left: 3px;
}
/* Na mesa ao vivo, quem rodou e o estado ficam sobre a foto, dentro da abertura da moldura. */
.salon-card-visual > .salon-chip { top: calc(var(--frame-y) + 4px); left: calc(var(--frame-x) + 4px); z-index: 3; max-width: calc(100% - 2 * var(--frame-x) - 36px); font-size: 10px; }
.salon-card-visual > .salon-timer { top: calc(var(--frame-y) + 4px); right: calc(var(--frame-x) + 4px); z-index: 3; width: 26px; height: 26px; font-size: 10px; }
.salon-card-visual > .salon-ribbon { left: calc(var(--frame-x) + 4px); right: calc(var(--frame-x) + 4px); bottom: calc(var(--frame-y) + 4px); z-index: 3; font-size: 10px; }
.salon-card-visual > .salon-expired { inset: var(--frame-y) var(--frame-x); z-index: 3; padding: 0 8px; font-size: 12px; line-height: 1.2; text-align: center; }
.salon-card.framed.live.p-open, .salon-card.framed.live.p-priority { animation: none; }

/* ---------- mesa ---------- */
.salon-mesa { display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 14px 20px 12px; }
.salon-mesa > .salon-rollbar, .salon-mesa > .salon-live { flex: none; }
/* O palco fica com o espaço que sobra e a carta se ajusta a ele: a mesa ao vivo fica sempre inteira na tela. */
.salon-stage-box { flex: 1 1 0; min-height: 230px; container-type: size; }
/* Showcase: luzes estáticas e uma cópia da foto, exibida somente após a revelação. */
.salon-stage {
  --stage-color: var(--brand);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  height: 100%; padding: 14px 16px 12px; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: #090d1a;
  box-shadow: inset 0 0 0 1px rgba(137, 127, 212, .22), 0 8px 24px rgba(0, 0, 0, .2);
}
.salon-showcase { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; contain: paint; background: linear-gradient(145deg, #0e1327, #0b1020 50%, #151125); }
.salon-showcase::before, .salon-showcase::after { content: ''; position: absolute; inset: 0; }
.salon-showcase::before {
  z-index: 1;
  background:
    radial-gradient(circle at 17% 64%, rgba(174, 127, 242, .24) 0 1px, transparent 4px),
    radial-gradient(circle at 78% 31%, rgba(142, 167, 248, .2) 0 1px, transparent 3px),
    radial-gradient(circle at 27% 26%, rgba(142, 167, 248, .15) 0 1px, transparent 3px),
    radial-gradient(circle at 86% 72%, rgba(174, 127, 242, .16) 0 1px, transparent 4px),
    radial-gradient(ellipse 25% 65% at 50% -10%, rgba(125, 122, 245, .34), transparent 78%),
    radial-gradient(ellipse 44% 54% at 50% 44%, rgba(102, 82, 220, .3), transparent 75%),
    radial-gradient(ellipse 70% 24% at 50% 88%, rgba(76, 88, 172, .15), transparent 75%);
}
.salon-showcase::after {
  z-index: 2; border: 1px solid rgba(137, 127, 212, .23); border-radius: inherit;
  background: radial-gradient(ellipse at 50% 42%, transparent 22%, rgba(5, 8, 18, .3) 70%, rgba(5, 7, 15, .76)), linear-gradient(115deg, rgba(28, 24, 66, .22), transparent 62%), linear-gradient(rgba(7, 10, 22, .2), transparent 35%, rgba(7, 9, 19, .48));
}
.salon-showcase-portrait {
  position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: 50% 32%;
  filter: blur(32px) saturate(1.12) brightness(.64); opacity: 0;
}
.salon-showcase.has-art .salon-showcase-portrait { opacity: .32; animation: salon-backdrop-reveal .32s ease-out; }
@keyframes salon-backdrop-reveal { from { opacity: 0; } to { opacity: .32; } }
.salon-stage > .salon-card-slot, .salon-stage > .salon-actions { z-index: 1; }
.salon-stage[data-rarity=legendary] { --stage-color: var(--rarity-legendary); }
.salon-stage[data-rarity=epic] { --stage-color: var(--rarity-epic); }
.salon-stage[data-rarity=rare] { --stage-color: var(--rarity-rare); }
.salon-stage[data-rarity=common] { --stage-color: var(--rarity-common); }
.salon-stage.owned { --stage-color: var(--red); }
.salon-card-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.salon-stage-caption { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.salon-stage .salon-stage-caption, .salon-stage .salon-claim-caption, .salon-stage .salon-wait { color: #b8bfd4; }
/* Altura reservada no palco: respiro (26) + legenda (28) + botão de casar (68) + folga. */
.salon-stage .salon-card.big, .salon-stage .salon-reel { width: clamp(90px, min(60cqw, calc((100cqh - 130px) / 1.5)), 260px); max-width: none; container-type: inline-size; }
.salon-stage .salon-card.framed.big .salon-card-info {
  position: absolute; left: var(--frame-x); right: var(--frame-x); bottom: var(--frame-y); z-index: 1;
  padding: 40px 12px 10px; border-radius: 0 0 var(--art-r) var(--art-r); background: linear-gradient(transparent, rgba(6, 8, 18, .9) 52%); pointer-events: none;
}
.salon-stage .salon-card.big .salon-card-name { display: -webkit-box; font-size: clamp(12px, 7.6cqi, 17px); white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.salon-stage .salon-card.big .salon-card-heading { align-items: flex-start; }
.salon-stage .salon-card.big .salon-card-heading .salon-rank { margin-top: 2px; }
.salon-stage .salon-card.big .salon-card-series { font-size: clamp(10px, 6.5cqi, 13px); }
.salon-stage .salon-card.big .salon-card-value { margin-top: 2px; font-size: clamp(11px, 7.5cqi, 15px); }
.salon-stage .salon-card.framed.big .salon-card-info { padding: 32px 8% 8%; }
/* Palco baixo e largo: o botão de casar vai para o lado da carta. */
@container (max-height: 420px) and (min-width: 460px) {
  .salon-stage { flex-direction: row; gap: 28px; }
  .salon-stage .salon-actions:empty { display: none; }
  .salon-stage .salon-actions { min-width: 180px; }
  .salon-stage .salon-card.big, .salon-stage .salon-reel { width: clamp(90px, calc((100cqh - 62px) / 1.5), 260px); }
}
@container (max-height: 300px) and (min-width: 460px) {
  .salon-stage .salon-stage-caption { display: none; }
  .salon-stage .salon-card.big, .salon-stage .salon-reel { width: clamp(90px, calc((100cqh - 34px) / 1.5), 260px); }
}
@container (max-height: 300px) and (max-width: 459px) { .salon-stage .salon-stage-caption { display: none; } }
.msg .avatar.salon-chip-avatar, .avatar.salon-chip-avatar { width: 18px; height: 18px; font-size: 8px; margin: 0; flex-shrink: 0; grid-column: auto; cursor: default; }
.salon-card.revealing { animation: salon-reveal .6s cubic-bezier(.2, 1.35, .4, 1); }
@keyframes salon-reveal { from { transform: perspective(800px) rotateY(80deg) scale(.7); opacity: 0; } to { transform: perspective(800px) rotateY(0) scale(1); opacity: 1; } }
.salon-card.salon-card-ghost { aspect-ratio: 2 / 3; visibility: hidden; }


/* Roleta: as fotos passam e param no personagem; épico e lendário vazam luz antes. */
.salon-reel {
  --frame: var(--brand);
  position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--brand) 18%, var(--bg-floating)) 0 10px, var(--bg-floating) 10px 20px); box-shadow: 0 0 0 2px var(--brand), 0 8px 22px rgba(0, 0, 0, .35); transition: box-shadow .5s ease;
}
.salon-reel-strip { will-change: transform; }
.salon-reel-cell { aspect-ratio: 2 / 3; overflow: hidden; }
.salon-reel-cell > .salon-card-back { height: 100%; }
.salon-reel-cell img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(1.2px) saturate(1.15); }
.salon-reel-cover { position: absolute; inset: 0; z-index: 1; opacity: 1; transition: opacity .12s ease; }
.salon-reel-cover > .salon-card-back { height: 100%; }
.salon-reel.is-ready > .salon-reel-cover { opacity: 0; pointer-events: none; }
.salon-reel.is-preparing .salon-card-back svg { animation: salon-shuffle .5s ease-in-out infinite alternate; }
@keyframes salon-shuffle { to { transform: rotate(-12deg) scale(1.1); } }
.salon-reel-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .55), transparent 22%, transparent 78%, rgba(0, 0, 0, .55)); }
.salon-reel.tease { box-shadow: 0 0 0 2px var(--frame), 0 0 46px color-mix(in srgb, var(--frame) 70%, transparent); animation: salon-tease .35s ease-in-out infinite alternate; }
.salon-reel.r-legendary { --frame: var(--rarity-legendary); }
.salon-reel.r-epic { --frame: var(--rarity-epic); }
@keyframes salon-tease { to { box-shadow: 0 0 0 3px var(--frame), 0 0 70px color-mix(in srgb, var(--frame) 85%, transparent); } }

.salon-banner {
  position: absolute; top: 12px; left: 50%; z-index: 2; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(0, 0, 0, .6); color: var(--rarity-legendary); font-size: 14px; font-weight: 800; letter-spacing: .06em;
  opacity: 0; transform: translate(-50%, -10px); transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.salon-banner.show { opacity: 1; transform: translate(-50%, 0); }
#salon-view.flash::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 40% 45%, color-mix(in srgb, var(--rarity-legendary) 55%, transparent), transparent 70%);
  animation: salon-flash 1.3s ease-out forwards;
}
@keyframes salon-flash { from { opacity: 1; } to { opacity: 0; } }

/* Casar: botão vermelho e o anel que esvazia nos 45 segundos. */
.salon-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 62px; }
.salon-claim-row { display: flex; align-items: center; gap: 10px; }
.salon-claim {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 180px; padding: 0 26px;
  border: 0; border-radius: 8px; background: var(--bg-input); color: var(--text-muted); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, transform .1s ease, opacity .15s ease;
}
.salon-claim.primary { background: var(--red); color: #fff; }
.salon-claim.primary:hover:not(:disabled) { background: var(--red-dark); }
.salon-claim.primary:active:not(:disabled) { transform: translateY(1px); }
.salon-claim:disabled { cursor: not-allowed; opacity: .6; }
.salon-claim.pending { cursor: progress; }
.salon-claim:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.salon-heart { display: inline-flex; }
.salon-heart svg, .salon-claim svg { fill: currentColor; }
.salon-claim.primary:hover:not(:disabled) .salon-heart svg { animation: mudae-beat .9s ease-in-out infinite; }
.salon-ring { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.salon-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.salon-ring circle { fill: none; stroke: var(--bg-input); stroke-width: 3.5; }
.salon-ring circle.left { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 106.8; animation: salon-ring linear forwards; }
@keyframes salon-ring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 106.8; } }
.salon-ring-text { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-strong); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.salon-claim-caption { min-height: 16px; color: var(--text-muted); font-size: 12px; }
.salon-owned {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--text); font-weight: 600;
}
.salon-wait { padding: 12px; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; }

/* Reações flutuando no palco. */
.salon-reactions { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 6px; }
.salon-react {
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--bg-floating) 75%, transparent); font-size: 18px; cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.salon-react:hover { transform: scale(1.15); background: var(--bg-input); }
.salon-react:active { transform: scale(.95); }
.salon-floats { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.salon-float {
  position: absolute; left: 50%; bottom: 90px; display: flex; flex-direction: column; align-items: center; font-size: 32px; line-height: 1;
  animation: salon-float 2.4s cubic-bezier(.2, .7, .3, 1) forwards;
}
.salon-float small { margin-top: 2px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; font-weight: 600; }
@keyframes salon-float {
  0% { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  12% { transform: translate(calc(-50% + var(--x) * .3), -30px) scale(1.15); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), -300px) rotate(var(--r)) scale(1); opacity: 0; }
}

/* Botões de roll. */
.salon-rollbar { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.salon-roll-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.salon-sources { display: flex; justify-content: safe center; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.salon-source {
  flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--divider); border-radius: 999px; background: transparent;
  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.salon-source:hover { background: var(--hover); color: var(--text); }
.salon-source.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--text-strong); }
.salon-credits { margin: 32px 0 0; color: var(--text-muted); font-size: 12px; }
.salon-roll {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 160px; height: 42px; padding: 0 18px;
  border: 0; border-radius: 8px; background: var(--bg-input); color: var(--text-strong); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, transform .1s ease, opacity .15s ease;
}
.salon-roll:hover:not(:disabled) { background: var(--hover-strong); }
.salon-roll.primary { background: var(--brand); color: #fff; }
.salon-roll.primary:hover:not(:disabled) { background: var(--brand-hover); }
.salon-roll:active:not(:disabled) { transform: translateY(1px); }
.salon-roll:disabled { opacity: .5; cursor: not-allowed; }
.salon-roll-cmd { font-family: var(--mono); font-size: 13px; opacity: .8; }

/* Mesa ao vivo. */
.salon-live h3 { margin: 0 0 6px; color: var(--text-strong); font-size: 15px; font-weight: 700; }
.salon-live-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 8px; scroll-snap-type: x proximity; }
.salon-live .salon-card.small { width: 108px; }
.salon-live .salon-card-series { display: none; }
.salon-live .salon-card.framed .salon-card-info { padding-top: 4px; }
.salon-live-strip > * { scroll-snap-align: start; }
.salon-chip {
  position: absolute; top: 6px; left: 6px; z-index: 1; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 48px);
  padding: 2px 8px 2px 2px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; font-weight: 600;
}
.salon-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-timer {
  position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, .72); box-shadow: 0 0 0 2px var(--red); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.salon-card.p-priority .salon-timer { box-shadow: 0 0 0 2px var(--yellow); }
.salon-ribbon {
  position: absolute; left: 6px; right: 6px; bottom: 64px; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 3px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.salon-ribbon span { overflow: hidden; text-overflow: ellipsis; }
.salon-card.p-expired .salon-card-art img { filter: grayscale(.85) brightness(.55); }
.salon-expired { position: absolute; inset: 0 0 56px; z-index: 1; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px #000; }
.salon-card.live.on-stage { outline: 2px solid var(--brand); outline-offset: 4px; }
.salon-card.live.p-open, .salon-card.live.p-priority { animation: salon-open 1.6s ease-in-out infinite alternate; }
@keyframes salon-open { to { box-shadow: 0 0 0 2px var(--frame), 0 0 22px color-mix(in srgb, var(--frame) 55%, transparent), 0 8px 22px rgba(0, 0, 0, .35); } }
.salon-card.back { --frame: var(--brand); }
.salon-card.back .salon-card-back { animation: salon-wobble .5s ease-in-out infinite alternate; }
@keyframes salon-wobble { to { filter: brightness(1.35); } }
.salon-card.arriving { animation: salon-arrive .7s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes salon-arrive { from { transform: translateX(-30px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- álbum ---------- */
.salon-album { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 24px; }
.salon-album-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 14px; background: var(--bg-panel); }
.salon-album-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar.salon-album-avatar { width: 64px; height: 64px; font-size: 24px; flex-shrink: 0; }
.salon-album-who h2 { margin: 0; color: var(--text-strong); font-size: 24px; }
.salon-album-stats { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--text); font-size: 15px; }
.salon-album-stats strong { color: var(--text-strong); }
.salon-link { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 13px; cursor: pointer; }
.salon-link:hover { text-decoration: underline; }
.salon-album-fav {
  display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: 360px; padding: 8px 16px 8px 8px; border-radius: 12px; cursor: zoom-in;
  background: var(--bg-floating); box-shadow: 0 0 0 2px var(--frame), 0 0 22px color-mix(in srgb, var(--frame) 30%, transparent);
}
.salon-album-fav img { width: 64px; height: 96px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.salon-album-fav > div { min-width: 0; }
.salon-album-fav .salon-card-name { color: var(--text-strong); font-size: 16px; }
.salon-album-fav .salon-card-series { color: var(--text-muted); }
.salon-album-fav .salon-card-value { color: var(--text); }
.salon-fav-tag { color: var(--rarity-legendary); font-size: 12px; font-weight: 700; }
.salon-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.salon-search { flex: 1 1 220px; min-width: 0; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--bg-input); color: var(--text); font: inherit; outline: none; }
.salon-search:focus { box-shadow: 0 0 0 2px var(--brand); }
.salon-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.salon-filter {
  --chip: var(--brand);
  height: 32px; padding: 0 12px; border: 1px solid var(--divider); border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.salon-filter:hover { background: var(--hover); }
.salon-filter.f-legendary { --chip: var(--rarity-legendary); color: var(--rarity-legendary); }
.salon-filter.f-epic { --chip: var(--rarity-epic); color: var(--rarity-epic); }
.salon-filter.f-rare { --chip: var(--rarity-rare); color: var(--rarity-rare); }
.salon-filter.active { border-color: var(--chip); background: color-mix(in srgb, var(--chip) 22%, transparent); }
.salon-filter.active:not([class*=f-]) { color: #fff; background: var(--brand); }
.salon-sort { height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--bg-input); color: var(--text); font: inherit; }
.salon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 4px; }
.salon-card.fav:not(.framed) { box-shadow: 0 0 0 3px var(--rarity-legendary), 0 0 24px color-mix(in srgb, var(--rarity-legendary) 45%, transparent); }
.salon-card.framed.fav .salon-card-visual { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rarity-legendary) 70%, transparent), 0 0 22px color-mix(in srgb, var(--rarity-legendary) 35%, transparent), 0 8px 22px rgba(0, 0, 0, .35); }
.salon-album-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.salon-card-actions { display: flex; align-items: center; gap: 4px; }
.salon-card-actions button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 6px; border: 1px solid var(--divider); border-radius: 8px;
  background: var(--bg-panel); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.salon-card-actions button:first-child { flex: 1; min-width: 0; }
.salon-card-actions button:hover { background: var(--bg-input); color: var(--text-strong); }
.salon-card-actions button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.salon-card-actions button.active { color: var(--rarity-legendary); }
.salon-card-actions button.danger { flex: none; width: 32px; padding: 0; border-color: transparent; background: transparent; }
.salon-card-actions button.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.salon-more, .salon-loading { grid-column: 1 / -1; padding: 16px; color: var(--text-muted); text-align: center; }
.salon-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; color: var(--text-muted); text-align: center; }
.salon-empty-icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--bg-panel); color: var(--brand); }
.salon-empty p { max-width: 380px; margin: 0; }

/* ---------- ranking ---------- */
.salon-ranking { max-width: 760px; margin: 0 auto; padding: 20px; }
.salon-ranking h2 { margin: 0; color: var(--text-strong); font-size: 22px; }
.salon-ranking h3 { margin: 28px 0 12px; color: var(--text-strong); font-size: 16px; }
.salon-muted { margin: 4px 0 16px; color: var(--text-muted); }
.salon-rank-list { display: flex; flex-direction: column; gap: 6px; }
.salon-rank-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; border-radius: 10px;
  background: var(--bg-panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .12s ease;
}
.salon-rank-row:hover { background: var(--bg-input); }
.salon-rank-row.me { box-shadow: inset 0 0 0 2px var(--brand); }
.salon-rank-row .avatar { width: 36px; height: 36px; font-size: 14px; flex-shrink: 0; }
.salon-rank-pos { width: 32px; flex-shrink: 0; color: var(--text-muted); font-size: 18px; font-weight: 800; text-align: center; }
.salon-rank-who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.salon-rank-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-rank-who span { color: var(--text-muted); font-size: 12px; }
.salon-rank-fav { width: 34px; height: 50px; flex-shrink: 0; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 2px var(--frame); }
.salon-rank-value { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 90px; font-variant-numeric: tabular-nums; }
.salon-rank-value .mudae-kakera { color: var(--rarity-epic); }
.salon-rank-gap { color: var(--text-muted); text-align: center; }
.salon-legends { display: flex; flex-wrap: wrap; gap: 14px; }
.salon-legends .salon-chip { max-width: calc(100% - 12px); }

/* ---------- chat do Salão: rolls em uma linha (o card grande fica no palco) ---------- */
.mudae-roll-line {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 100%; margin-top: 2px; padding: 4px 8px 4px 4px; border: 0; border-radius: 8px;
  background: var(--bg-panel); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background .12s ease;
}
.mudae-roll-line:hover { background: var(--bg-input); }
.mudae-roll-line { position: relative; }
.mudae-roll-spin { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 600; visibility: hidden; }
.mudae-roll-line.hold .mudae-roll-thumb, .mudae-roll-line.hold .mudae-roll-text, .mudae-roll-line.hold .mudae-rarity-tag { animation: mudae-hold var(--hold) step-end; }
.mudae-roll-line.hold .mudae-roll-spin { animation: mudae-hold-show var(--hold) step-end; }
@keyframes mudae-hold { from, to { visibility: hidden; } }
@keyframes mudae-hold-show { from, to { visibility: visible; } }
.mudae-roll-thumb { position: relative; display: grid; place-items: center; width: 26px; height: 38px; flex-shrink: 0; border-radius: 4px; overflow: hidden; color: var(--brand); background: color-mix(in srgb, var(--brand) 15%, var(--bg-floating)); }
.mudae-roll-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.mudae-roll-thumb img.ready { opacity: 1; }
.mudae-roll-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mudae-roll-text strong { color: var(--text-strong); }
.mudae-rarity-tag { flex-shrink: 0; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--frame); background: color-mix(in srgb, var(--frame) 16%, transparent); }
.mudae-rarity-tag.legendary { --frame: var(--rarity-legendary); }
.mudae-rarity-tag.epic { --frame: var(--rarity-epic); }
.mudae-rarity-tag.rare { --frame: var(--rarity-rare); }
.mudae-rarity-tag.common { --frame: var(--rarity-common); }
.mudae-line.stolen strong { color: var(--text-strong); }
.mudae-redirect { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mudae-go { height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mudae-go:hover { background: var(--brand-hover); }

/* ---------- perfil ---------- */
.pc-mudae {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 6px 6px; border: 0; border-radius: 10px;
  background: var(--bg-floating); box-shadow: 0 0 0 1px var(--frame); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.pc-mudae:disabled { cursor: default; }
.pc-mudae img { width: 40px; height: 60px; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
.pc-mudae > div { min-width: 0; }
.pc-mudae strong { display: block; overflow: hidden; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.pc-mudae-tag { color: var(--rarity-legendary); font-size: 11px; font-weight: 700; }
.pc-mudae-stats { display: flex; align-items: center; gap: 3px; color: var(--text-muted); font-size: 12px; }

/* ---------- janela estreita e celular: chat abre por cima ---------- */
.salon-side-toggle {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; display: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: inherit; font-weight: 600; box-shadow: var(--shadow-float); cursor: pointer;
}
@media (max-width: 1000px) {
  #main.salon-mode { grid-template-columns: minmax(0, 1fr); }
  #main.salon-mode > #chat-view { display: none; }
  #main.salon-mode.salon-side-open > #chat-view {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; display: flex; width: min(380px, 100vw); box-shadow: -10px 0 40px rgba(0, 0, 0, .45);
  }
  .salon-side-toggle { display: inline-flex; }
  .salon-side-close { display: grid; }
  .salon-top { flex-wrap: wrap-reverse; padding: 0 12px; }
  .salon-top-right { padding-top: 8px; }
  .salon-simple span { display: none; }
  .salon-mesa { padding: 12px 12px 72px; }
  .salon-album, .salon-ranking { padding-inline: 12px; }
}
@media (max-width: 640px) {
  .salon-stage { padding-top: 44px; }
  /* No celular a página rola: a carta tem tamanho fixo e o palco cresce com ela. */
  .salon-stage-box { flex: none; min-height: 0; container-type: normal; }
  .salon-stage { height: auto; }
  .salon-stage .salon-card.big, .salon-stage .salon-reel { width: min(210px, 60vw); }
  .salon-showcase-portrait { filter: blur(18px) saturate(1.08) brightness(.64); }
  .salon-card.big, .salon-reel { width: min(210px, 60vw); }
  .salon-roll { flex: 1; min-width: 0; padding: 0 8px; font-size: 14px; white-space: nowrap; }
  .salon-sources { flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .salon-roll-cmd, .salon-roll svg { display: none; }
  .salon-reactions { position: static; justify-content: center; gap: 6px; }
  .salon-react { width: 32px; height: 32px; font-size: 16px; }
  .salon-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
  .salon-album-fav { min-width: 0; width: 100%; }
  .salon-claim { min-width: 150px; }
  .salon-rank-row { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) 28px; gap: 4px 10px; padding: 12px; }
  .salon-rank-pos { grid-column: 1; grid-row: 1 / 3; width: 28px; }
  .salon-rank-row .avatar { grid-column: 2; grid-row: 1 / 3; }
  .salon-rank-who { grid-column: 3; grid-row: 1; gap: 2px; }
  .salon-rank-who strong { font-size: 14px; }
  .salon-rank-who span { white-space: nowrap; }
  .salon-rank-fav { grid-column: 4; grid-row: 1 / 3; width: 28px; height: 42px; }
  .salon-rank-value { grid-column: 3; grid-row: 2; justify-content: flex-start; min-width: 0; color: var(--text-strong); font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .salon-showcase-portrait, .salon-card.framed.r-legendary .salon-card-visual::before { animation: none !important; }
  .salon-card.emerging, .salon-card, .salon-card.revealing, .salon-card.arriving, .salon-card.live.p-open, .salon-card.live.p-priority, .salon-reel.tease,
  .salon-card.back .salon-card-back, .salon-float, #salon-view.flash::after { animation: none !important; transition: none !important; }
  .salon-float { opacity: 0; }
}