/* Cara de jogo (v0.141): leva a linguagem pixel art do logo e das abas do cabeçalho para o resto da interface.
   Molduras 9-slice em SVG (Web/assets/ui/molduras/, saída de scratch/gerar_molduras_ui.py), 2 px por unidade como o
   logo, contorno #1A0B2E, bisel com luz em cima e à esquerda. Títulos em fonte pixel, botões de tecla com base
   grossa e estado pressionado, fundo com trama. Carrega por último das telas de propósito: os componentes só
   cuidam de tamanho e conteúdo. Neon continua só para raridade e aquisição (DESIGN.md). */
:root {
  /* Jersey 20 desenha na grade de 20 px (títulos em 20 e 40 px); Jersey 15, na de 15 px (rótulos em 15 px). Peso único:
     nunca pedir negrito, o navegador borraria os pixels. */
  --font-pixel: 'Jersey 20', var(--font-display);
  --font-pixel-s: 'Jersey 15', var(--font-pixel);
  --trama: url("../assets/ui/molduras/trama.svg");
  --painel-topo: #212737;
  --painel-base: #181C27;
  --placa-topo: #1E2331;
  --placa-base: #171B26;
  font-synthesis: none;
}

/* ---------- Fundo das telas: pontos em grade e vinheta ---------- */
body {
  background:
    radial-gradient(ellipse 90% 80% at 50% 40%, transparent 55%, rgb(5 6 10 / 0.55) 100%),
    url("../assets/ui/molduras/fundo.svg") 0 0 / 32px 32px,
    var(--bg);
  image-rendering: pixelated;
}

/* ---------- Títulos em fonte pixel ---------- */
h1, h2, h3, h4,
.mode-name,
.stage-card-name,
.briefing-title,
.summon-title,
.rates-title,
.briefing-drops-title,
.briefing-team-head h3,
.setup-title,
.section-title {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Título de bloco: seta de menu, o texto e um fio pontilhado de pixels que corre até o fim da linha. */
.setup-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 20px;
  color: var(--text);
}

.setup-title::before {
  content: '';
  flex: none;
  width: 14px;
  height: 18px;
  background: url("../assets/ui/molduras/seta.svg") center / 14px 18px no-repeat;
  image-rendering: pixelated;
}

.setup-title::after {
  content: '';
  flex: 1;
  height: 4px;
  background: linear-gradient(90deg, #3A4258 0 4px, transparent 4px 8px) 0 0 / 8px 4px repeat-x;
  opacity: 0.8;
}

.setup-title-row .setup-title {
  flex: 1;
}

/* ---------- Botões: tecla de fliperama (as abas do cabeçalho em todo botão) ---------- */
.btn {
  min-height: 44px;
  padding: 0 var(--s-4);
  border: solid transparent;
  border-width: 4px 4px 6px;
  border-image: url("../assets/ui/molduras/botao.svg") 3 3 4 3 / 6px 6px 8px 6px stretch;
  border-radius: 0;
  background: linear-gradient(180deg, #3B4252, #313744);
  background-clip: padding-box;
  color: var(--text);
  font-family: var(--font-pixel-s);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
  transition: none;
}

.btn:hover:not(:disabled) {
  border-image-source: url("../assets/ui/molduras/botao-hover.svg");
  background: linear-gradient(180deg, #4A5265, #3C4455);
  background-clip: padding-box;
}

.btn:active:not(:disabled) {
  border-width: 6px 4px 4px;
  border-image: url("../assets/ui/molduras/botao-pressionado.svg") 4 3 3 3 / 8px 6px 6px 6px stretch;
  background: linear-gradient(180deg, #2A303C, #232832);
  background-clip: padding-box;
}

.btn:disabled {
  opacity: 1;
  border-image-source: url("../assets/ui/molduras/botao-desligado.svg");
  background: #262B36;
  background-clip: padding-box;
  color: #7A8396;
}

.btn-primary {
  border-image-source: url("../assets/ui/molduras/botao-claro.svg");
  background: linear-gradient(180deg, #F4F6FA, #D6DBE4);
  background-clip: padding-box;
  color: var(--action-ink);
}

.btn-primary:hover:not(:disabled) {
  border-image-source: url("../assets/ui/molduras/botao-claro-hover.svg");
  background: linear-gradient(180deg, #FFFFFF, #E6EAF1);
  background-clip: padding-box;
}

.btn-primary:active:not(:disabled) {
  border-image-source: url("../assets/ui/molduras/botao-claro-pressionado.svg");
  background: linear-gradient(180deg, #C4CCD8, #B3BCCB);
  background-clip: padding-box;
}

.btn-outline {
  background: linear-gradient(180deg, #232834, #1B1F2A);
  background-clip: padding-box;
}

.btn-danger {
  color: var(--danger);
}

.btn-small {
  min-height: 34px;
}

/* ---------- Painéis: pedra com bisel e trama ---------- */
.briefing,
.banner-stage,
.summon-rates,
.summon-panel .pity-ring,
.panel,
.forge-altar,
.forge-evo-detail,
.modal-card,
.entry-gate-panel,
.overlay-card,
.tavern-places-menu,
.tavern-chat,
.chat-panel,
.coop-code,
.dropdown-menu-pane {
  border: solid transparent;
  border-width: 6px;
  border-image: url("../assets/ui/molduras/painel.svg") 4 fill / 8px stretch;
  border-radius: 0;
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, var(--painel-topo), var(--painel-base));
  background-clip: padding-box;
}

.briefing {
  padding: var(--s-4);
  gap: var(--s-4);
}

.summon-rates {
  padding: var(--s-2) var(--s-3) var(--s-3);
}

.banner-stage {
  padding: var(--s-4) var(--s-3) 28px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, color-mix(in srgb, var(--r-celestial) 14%, transparent), transparent 70%),
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, var(--painel-topo), var(--painel-base));
  background-clip: padding-box;
}

/* Cabeçalho do resumo: o fio entre as seções vira pontilhado de pixels. */
.briefing-stats {
  border: 0;
  background: none;
  padding: var(--s-3) 0;
  position: relative;
}

.briefing-stats::before,
.briefing-stats::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3A4258 0 4px, transparent 4px 8px) 0 0 / 8px 4px repeat-x;
}

.briefing-stats::before { top: 0; }
.briefing-stats::after { bottom: 0; }

.rates-title,
.briefing-drops-title,
.briefing-team-head h3 {
  font-size: 20px;
}

.briefing-title {
  font-size: 40px;
  margin-top: calc(var(--s-2) * -1);
}

.summon-title {
  font-size: 40px;
}

/* ---------- Placas: modos, mundos, dificuldades, itens ---------- */
.mode-select-card,
.stage-card,
.diff-chip,
.drop-item,
.preview-card,
.preset-slot,
.banner-timer,
.catalog-card,
.codex-rarity-card,
.aura-compare-col:not(.new),
.hero-slot,
.stats-player,
.challenge-diff,
.mod-item,
.challenge-timer,
.challenge-chip,
.guild-member,
.guild-pending-row,
.guild-mode,
.inspect-tier-card,
.hud-stat,
.tavern-room-chip,
.menu-room-chip,
.tavern-place,
.coop-player,
.unit-role,
.coop-room-main,
.coop-room-teams,
.game-toast,
.profile-color,
.profile-look-row,
.look-tile,
.dropdown-trigger-btn {
  border: solid transparent;
  border-width: 4px;
  border-image: url("../assets/ui/molduras/placa.svg") 3 fill / 6px stretch;
  border-radius: 0;
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, var(--placa-topo), var(--placa-base));
  background-clip: padding-box;
}

.mode-select-card,
.stage-card {
  padding: 10px 12px;
  transition: none;
}

.mode-select-card:hover,
.stage-card:hover:not(.locked),
.diff-chip:hover:not(.locked) {
  border-image-source: url("../assets/ui/molduras/placa-hover.svg");
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, #272D3E, #1D2230);
  background-clip: padding-box;
}

.mode-select-card.active {
  border-image-source: url("../assets/ui/molduras/placa-ativa.svg");
  box-shadow: none;
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, #2B3250, #1E2338);
  background-clip: padding-box;
}

/* O visto vira um quadradinho de pixel com contorno. */
.mode-select-card.active::after {
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--bg);
  background: var(--text);
}

.mode-name {
  font-size: 30px;
  line-height: 1;
}

.stage-card-name {
  font-size: 20px;
  line-height: 1.05;
}

.stage-card.active {
  box-shadow: none;
  border-color: transparent;
  border-image-source: url("../assets/ui/molduras/placa-ativa.svg");
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, color-mix(in srgb, var(--universe) 28%, #1E2331), color-mix(in srgb, var(--universe) 10%, #171B26));
  background-clip: padding-box;
}

.stage-card.active.universe-naruto { border-image-source: url("../assets/ui/molduras/placa-ativa-naruto.svg"); }
.stage-card.active.universe-bleach { border-image-source: url("../assets/ui/molduras/placa-ativa-bleach.svg"); }
.stage-card.active.universe-one-piece { border-image-source: url("../assets/ui/molduras/placa-ativa-one-piece.svg"); }
.stage-card.active.universe-jujutsu-kaisen { border-image-source: url("../assets/ui/molduras/placa-ativa-jujutsu-kaisen.svg"); }
.stage-card.active.universe-demon-slayer { border-image-source: url("../assets/ui/molduras/placa-ativa-demon-slayer.svg"); }
.stage-card.active.universe-attack-on-titan { border-image-source: url("../assets/ui/molduras/placa-ativa-attack-on-titan.svg"); }
.stage-card.active.universe-hunter-x-hunter { border-image-source: url("../assets/ui/molduras/placa-ativa-hunter-x-hunter.svg"); }
.stage-card.active.universe-one-punch-man { border-image-source: url("../assets/ui/molduras/placa-ativa-one-punch-man.svg"); }
.stage-card.active.universe-black-clover { border-image-source: url("../assets/ui/molduras/placa-ativa-black-clover.svg"); }
.stage-card.active.universe-dragon-ball { border-image-source: url("../assets/ui/molduras/placa-ativa-dragon-ball.svg"); }
.stage-card.active.universe-boku-no-hero-academia { border-image-source: url("../assets/ui/molduras/placa-ativa-boku-no-hero-academia.svg"); }
.stage-card.active.universe-yu-gi-oh { border-image-source: url("../assets/ui/molduras/placa-ativa-yu-gi-oh.svg"); }
.stage-card.active.universe-fairy-tail { border-image-source: url("../assets/ui/molduras/placa-ativa-fairy-tail.svg"); }
.stage-card.active.universe-akame-ga-kill { border-image-source: url("../assets/ui/molduras/placa-ativa-akame-ga-kill.svg"); }
.stage-card.active.universe-sword-art-online { border-image-source: url("../assets/ui/molduras/placa-ativa-sword-art-online.svg"); }
.stage-card.active.universe-high-school-dxd { border-image-source: url("../assets/ui/molduras/placa-ativa-high-school-dxd.svg"); }
.stage-card.active.universe-fullmetal-alchemist { border-image-source: url("../assets/ui/molduras/placa-ativa-fullmetal-alchemist.svg"); }
.stage-card.active.universe-inuyasha { border-image-source: url("../assets/ui/molduras/placa-ativa-inuyasha.svg"); }
.stage-card.active.universe-jojos-bizarre-adventure { border-image-source: url("../assets/ui/molduras/placa-ativa-jojos-bizarre-adventure.svg"); }
.stage-card.active.universe-berserk { border-image-source: url("../assets/ui/molduras/placa-ativa-berserk.svg"); }

.stage-card.locked,
.diff-chip.locked {
  border-style: solid;
  border-image-source: url("../assets/ui/molduras/placa-bloqueada.svg");
  background: linear-gradient(180deg, #181B25, #14171F);
  background-clip: padding-box;
}

/* Faixa da cor do universo no alto da placa do mundo, como a bandeira de uma fase. */
.stage-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--universe);
  opacity: 0.55;
}

.stage-card.active::before {
  opacity: 1;
}

.stage-card.locked::before {
  opacity: 0.18;
}

.stage-card-lock-overlay::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 16px;
  margin-right: var(--s-2);
  vertical-align: -3px;
  background: url("../assets/ui/molduras/cadeado.svg") center / 14px 16px no-repeat;
  image-rendering: pixelated;
}

.stage-card-new {
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--bg);
}

.stage-card-record {
  border-radius: 0;
}

/* Dificuldade: uma faixa na cor da própria dificuldade (--dc) no lado esquerdo da placa. */
.diff-chip {
  position: relative;
  min-width: 132px;
  padding: 6px 10px 6px 16px;
}

.diff-chip::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--dc, var(--line-strong));
  opacity: 0.7;
}

.diff-chip.active::before {
  opacity: 1;
}

.diff-chip.locked::before {
  opacity: 0.2;
}

.diff-chip.active {
  box-shadow: none;
  border-image-source: url("../assets/ui/molduras/placa-ativa.svg");
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, #2B3250, #1E2338);
  background-clip: padding-box;
}

.diff-name {
  font-family: var(--font-pixel-s);
  font-weight: 400;
  font-size: 15px;
}

/* Itens possíveis e fichas da sub-aba Itens: caixinhas de inventário afundadas. */
.drop-item,
.item-card,
.preview-card {
  border-image-source: url("../assets/ui/molduras/visor.svg");
  border-image-slice: 4 fill;
  border-image-width: 8px;
  border-width: 6px;
  padding: 2px;
  background:
    var(--trama) 0 0 / 8px 8px,
    #131620;
  background-clip: padding-box;
}

/* ---------- Botão de entrar na batalha ---------- */
.btn-launch {
  min-height: 60px;
  font-size: 20px;
  font-family: var(--font-pixel);
}

/* ---------- Invocação ---------- */
.banner-timer {
  padding: 2px var(--s-3);
}

.summon-btn {
  min-height: 76px;
  min-width: 0;
  padding: 0 var(--s-2);
}

.summon-btn .btn-top {
  font-family: var(--font-pixel);
  font-size: 30px;
  line-height: 1;
}

.summon-panel .pity-ring {
  padding: 0;
}

.banner-stage::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 14px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 16px, transparent 16px 32px) 0 0 / 32px 14px repeat-x,
    #12151D;
  pointer-events: none;
}

.banner-stage {
  position: relative;
}

.rate-bar {
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #3A4258;
}

.banner-more {
  border: solid transparent;
  border-width: 4px;
  border-image: url("../assets/ui/molduras/placa.svg") 3 fill / 6px stretch;
  border-radius: 0;
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, var(--placa-topo), var(--placa-base));
  background-clip: padding-box;
}

.banner-more summary {
  font-family: var(--font-pixel-s);
  font-weight: 400;
  font-size: 15px;
}

/* ---------- Inventário: sidebar e filtros em teclas ---------- */
.inv-subtab-btn,
.nav-sub,
.chip,
.segmented-btn,
.speed-btn {
  font-family: var(--font-pixel-s);
  font-size: 15px;
  border: solid transparent;
  border-width: 4px 4px 6px;
  border-image: url("../assets/ui/abas/normal.svg") 4 4 5 4 / 8px 8px 10px 8px stretch;
  border-radius: 0;
  background: #313744;
  background-clip: padding-box;
  color: var(--text-2);
  font-weight: 400;
}

.inv-subtab-btn:hover:not(:disabled, .active),
.nav-sub:hover:not(:disabled, .active),
.chip:hover:not(:disabled, .active),
.segmented-btn:hover:not(:disabled, .active),
.speed-btn:hover:not(:disabled, .active) {
  border-image-source: url("../assets/ui/abas/hover.svg");
  background: #313744;
  background-clip: padding-box;
  color: var(--text);
}

.inv-subtab-btn.active,
.nav-sub.active,
.chip.active,
.segmented-btn.active,
.speed-btn.active {
  border-width: 6px 4px 4px;
  border-image: url("../assets/ui/abas/ativa.svg") 5 4 4 4 / 10px 8px 8px 8px stretch;
  background: linear-gradient(180deg, var(--sel-bg-top), var(--sel-bg-bottom));
  background-clip: padding-box;
  color: var(--sel-ink);
}

.inv-subtab-btn:disabled {
  border-image-source: url("../assets/ui/molduras/botao-desligado.svg");
  background: #20242E;
  background-clip: padding-box;
}

.inventory-sidebar {
  gap: var(--s-2);
}

/* Seções do inventário: painel de pedra com o título em fonte pixel. */
.inv-section:not(.team-sticky) {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border: solid transparent;
  border-width: 6px;
  border-image: url("../assets/ui/molduras/painel.svg") 4 fill / 8px stretch;
  border-radius: 0;
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, var(--painel-topo), var(--painel-base));
  background-clip: padding-box;
}

.section-title {
  font-size: 20px;
}

.team-sticky {
  border-bottom: 0;
  background: #12151D;
  box-shadow: 0 4px 0 #1A0B2E, 0 6px 0 #3A4258;
  padding: var(--s-2) var(--s-3) var(--s-3);
}

.team-sticky .section-title {
  font-size: 20px;
}

/* Estados escolhidos das placas de outras telas. */
.catalog-card.is-selected,
.hero-slot.selected,
.guild-member.is-me,
.challenge-diff.active,
.codex-aura-row.is-current,
.guild-mode.is-on,
.profile-color[aria-pressed="true"],
.look-tile[aria-pressed="true"] {
  border-image-source: url("../assets/ui/molduras/placa-ativa.svg");
  box-shadow: none;
}

.catalog-card:hover,
.hero-slot:hover,
.challenge-diff:hover,
.profile-color:hover:not(:disabled, [aria-pressed="true"]),
.look-tile:hover:not(.is-locked, [aria-pressed="true"]),
.dropdown-trigger-btn:hover {
  border-image-source: url("../assets/ui/molduras/placa-hover.svg");
}

.challenge-diff.locked,
.profile-color:disabled,
.look-tile.is-locked {
  border-style: solid;
  border-image-source: url("../assets/ui/molduras/placa-bloqueada.svg");
  background: #14171F;
  background-clip: padding-box;
}

/* Desafio: faixa da cor da dificuldade, como nas dificuldades da Campanha. */
.challenge-diff {
  position: relative;
  padding-left: calc(var(--s-4) + 4px);
}

.challenge-diff::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--dc, var(--line-strong));
  opacity: 0.7;
}

.challenge-diff.active::before {
  opacity: 1;
}

/* Janelas: título em pixel e fechar em tecla. */
.modal-card {
  animation: none;
}

.modal-close-x {
  border: solid transparent;
  border-width: 4px 4px 6px;
  border-image: url("../assets/ui/molduras/botao.svg") 3 3 4 3 / 6px 6px 8px 6px stretch;
  border-radius: 0;
  background: linear-gradient(180deg, #3B4252, #313744);
  background-clip: padding-box;
  color: var(--text);
}

.modal-close-x:hover {
  border-image-source: url("../assets/ui/molduras/botao-hover.svg");
  background: linear-gradient(180deg, #4A5265, #3C4455);
  background-clip: padding-box;
}

.dropdown-opt {
  border-radius: 0;
}

.dropdown-opt.active {
  background: linear-gradient(180deg, var(--sel-bg-top), var(--sel-bg-bottom));
  color: var(--sel-ink);
}

/* Títulos grandes que usavam Rajdhani. */
.stage-title,
.compare-aura-badge .aura-name,
.stats-kpis dd,
.challenge-diff-name,
.challenge-timer-val,
.tavern-fav-name,
.entry-gate-title,
.guild-sub,
.guild-name,
.guild-title,
.online-head h2,
.quest-head h2,
.station-head h2,
.wallet-item strong {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.guild-title,
#forge-title,
#tab-catalog .section-title,
#tab-guild .section-title,
#tab-tavern .section-title,
#inspect-hero-name {
  font-size: 40px;
  line-height: 1;
}

.toggle-btn,
.call-wave-btn {
  font-family: var(--font-pixel-s);
}

/* Taverna: o mesmo vocabulário com o dourado das velas. */
.station-card,
.tavern-places-menu,
.tavern-chat,
.chat-panel,
.quest-card {
  border-image-source: url("../assets/ui/molduras/painel-ouro.svg");
}

.tavern-room-chip,
.menu-room-chip,
.tavern-place,
.tavern-hero[aria-checked="true"] {
  border-image-source: url("../assets/ui/molduras/placa-ouro.svg");
}

.tavern-room-chip:hover,
.menu-room-chip:hover,
.tavern-place:hover {
  border-image-source: url("../assets/ui/molduras/placa-ouro-hover.svg");
}

.station-head {
  border-bottom: 0;
  background: linear-gradient(180deg, #2A2217, #1B1710);
  box-shadow: 0 4px 0 #1A0B2E;
}

.station-head h2,
.quest-head h2 {
  font-size: 30px;
}

.tavern-hud-title strong {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.02em;
}

.tavern-chat-btn,
.chat-fab,
.chat-tab,
.view-zoom-btn {
  border: solid transparent;
  border-width: 4px 4px 6px;
  border-image: url("../assets/ui/molduras/botao.svg") 3 3 4 3 / 6px 6px 8px 6px stretch;
  border-radius: 0;
  background: linear-gradient(180deg, #3B4252, #313744);
  background-clip: padding-box;
}

.chat-tab[aria-selected="true"],
.chat-tab.active {
  border-image-source: url("../assets/ui/abas/ativa.svg");
  background: linear-gradient(180deg, var(--sel-bg-top), var(--sel-bg-bottom));
  background-clip: padding-box;
}

/* Painel da unidade sobre o campo: continua vendo o mapa por trás. */
.unit-floating-modal {
  border: solid transparent;
  border-width: 6px;
  border-image: url("../assets/ui/molduras/painel.svg") 4 fill / 8px stretch;
  border-radius: 0;
  background:
    var(--trama) 0 0 / 8px 8px,
    rgb(22 26 37 / 0.88);
  background-clip: padding-box;
}

.hud-val {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: var(--fs-20);
  letter-spacing: 0.02em;
}

#top-hud {
  border-bottom: 0;
  box-shadow: inset 0 -4px 0 #1A0B2E, inset 0 -6px 0 #3A4258;
}

.hud-stat {
  padding: 0 var(--s-2);
}

#bottom-hud {
  border-top: 0;
  box-shadow: inset 0 4px 0 #1A0B2E, inset 0 6px 0 #3A4258;
}

/* Equipe de batalha e equipes salvas: espaços de equipamento. */
.team-slot-card {
  border: solid transparent;
  border-width: 4px;
  border-image: url("../assets/ui/molduras/placa.svg") 3 fill / 6px stretch;
  border-radius: 0;
  background:
    var(--trama) 0 0 / 8px 8px,
    linear-gradient(180deg, var(--placa-topo), var(--placa-base));
  background-clip: padding-box;
}

.team-slot-card.empty {
  border-style: solid;
  border-image-source: url("../assets/ui/molduras/placa-bloqueada.svg");
  background: #14171F;
  background-clip: padding-box;
}

.preset-slot {
  padding: var(--s-2);
}

.preset-slot.empty {
  border-style: solid;
  border-image-source: url("../assets/ui/molduras/placa-bloqueada.svg");
  background: #14171F;
  background-clip: padding-box;
}

.preset-slot.in-use {
  border-image-source: url("../assets/ui/molduras/placa-hover.svg");
}

/* Campo de busca: visor afundado. */
input[type='text'],
input[type='search'],
input[type='number'],
.search-input,
.tavern-input,
.tavern-chat-input,
.chat-input,
.preset-rename-input,
.guild-textarea,
.guild-tag-input,
.guild-select {
  border: solid transparent;
  border-width: 4px;
  border-image: url("../assets/ui/molduras/campo.svg") 3 fill / 6px stretch;
  border-radius: 0;
  background: #12151D;
  background-clip: padding-box;
}

/* ---------- Barra de rolagem: calha com trama e puxador de tecla ---------- */
/* Chrome, Edge e Safari desenham a barra pelos pseudo-elementos. Firefox não tem como pintar o bisel, então cai
   em cores lisas pelo scrollbar-color (só quando o motor não conhece ::-webkit-scrollbar). */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  border: solid #1A0B2E;
  border-width: 0 0 0 2px;
  background: conic-gradient(#171B26 25%, #131720 0 50%, #171B26 0 75%, #131720 0) 0 0 / 4px 4px;
}

::-webkit-scrollbar-track:horizontal {
  border-width: 2px 0 0;
}

::-webkit-scrollbar-thumb {
  min-height: 40px;
  min-width: 40px;
  border: 2px solid #1A0B2E;
  border-radius: 0;
  background: #3B4252;
  box-shadow:
    inset 2px 2px 0 #5C6781,
    inset -2px -2px 0 #262B38;
}

::-webkit-scrollbar-thumb:hover {
  background: #4A5265;
  box-shadow:
    inset 2px 2px 0 #7B88A6,
    inset -2px -2px 0 #2F3544;
}

::-webkit-scrollbar-thumb:active {
  background: var(--sel-bg-bottom);
  box-shadow:
    inset 2px 2px 0 var(--sel-border),
    inset -2px -2px 0 var(--sel-bg-top);
}

::-webkit-scrollbar-corner {
  background: #131720;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: #4A5265 #151922;
  }
}

/* Teto de Yen da partida (v0.196): rótulo menor ao lado do valor. */
.yen-cap {
  font-size: var(--fs-12, 0.6em);
  opacity: 0.7;
  letter-spacing: 0;
}