/* Componentes do design system, prefixo ex-. Depende de tokens.css.
   Quem usa isto é a página do sistema (index.html). O jogo não usa estas classes: ele tem as dele
   (.win, .titulo, .barra, .slot, .bt), e o tema.css traduz os tokens para elas. Esta folha é a
   referência de como cada peça deve ficar — se o jogo e ela divergirem, ela é a certa. */

.ex-sprite { image-rendering: pixelated; display: block; }

/* Painel: moldura entalhada com losango nos quatro cantos */
.ex-panel { position: relative; background: var(--bg-100); border-radius: var(--radius-md);
  box-shadow: var(--frame), var(--frame-inner); padding: var(--space-3); }
.ex-panel::before, .ex-panel::after { content: '\25C6'; position: absolute; top: 4px; font-size: 8px;
  line-height: 8px; color: var(--gold-line-bright); }
.ex-panel::before { left: 5px; } .ex-panel::after { right: 5px; }
.ex-panel-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--gold-line);
  font: 700 16px/20px var(--font-display); letter-spacing: .10em; text-transform: uppercase; color: var(--gold); }
.ex-panel-title::before, .ex-panel-title::after { content: '\25C6'; font-size: 10px; color: var(--gold-line-bright); }
.ex-panel-title::after { margin-left: auto; }
.ex-section { font: 700 14px/18px var(--font-serif); color: var(--gold); margin: var(--space-3) 0 var(--space-2); }
.ex-divider { position: relative; border: 0; border-top: 1px solid var(--gold-line); margin: var(--space-3) 0; }
.ex-divider::after { content: '\25C6'; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  font-size: 10px; color: var(--gold-line-bright); background: var(--bg-100); padding: 0 4px; }

/* Linhas de resultado */
.ex-rows { background: var(--bg-200); box-shadow: 0 0 0 1px var(--gold-line); border-radius: var(--radius-sm); }
.ex-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px var(--space-3); color: var(--ink-muted); }
.ex-row + .ex-row { border-top: 1px solid rgba(157, 125, 92, .35); }
.ex-row .ex-val { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-row .ex-val.gold { color: var(--gold); }
.ex-row .ex-val.pos { color: var(--positive); }
.ex-row .ex-val.neg { color: var(--negative); }
.ex-mark { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; }

/* Barra: vida e mana são os únicos preenchimentos saturados */
.ex-bar { position: relative; height: var(--bar-h); background: var(--bg-000);
  box-shadow: 0 0 0 1px var(--gold-line); overflow: hidden; }
.ex-bar-fill { position: absolute; inset: 0; transform-origin: left; transition: transform 300ms ease-out; }
.ex-bar-health .ex-bar-fill { background: var(--health); }
.ex-bar-mana .ex-bar-fill { background: var(--mana); }
.ex-bar-danger .ex-bar-fill { background: var(--danger); }
.ex-bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 600 11px/12px var(--font-mono); color: var(--on-bright); }
.ex-bar-mana .ex-bar-label { color: var(--ink); }

/* Slot: poço de pedra com o sprite dentro */
.ex-slot { position: relative; width: var(--slot); height: var(--slot); background: var(--bg-000);
  box-shadow: var(--well); border-radius: var(--radius-sm); display: grid; place-items: center; }
.ex-slot.active { box-shadow: var(--glow-gold), inset 0 2px 6px rgba(0,0,0,.8); }
.ex-slot.empty { background: var(--bg-200); }
.ex-slot-count { position: absolute; right: 4px; bottom: 3px; font: 600 11px/11px var(--font-mono); color: var(--ink);
  text-shadow: 1px 1px 0 var(--bg-000), -1px -1px 0 var(--bg-000), 1px -1px 0 var(--bg-000), -1px 1px 0 var(--bg-000); }
.ex-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--slot)); gap: var(--space-2); }

/* Botão: madeira com rótulo em ouro */
.ex-btn { font: 700 14px/20px var(--font-serif); height: var(--control-h); padding: 0 var(--space-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 0;
  border-radius: var(--radius-sm); background: var(--wood); color: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold-line), inset 0 0 0 1px var(--bg-000); cursor: pointer; }
.ex-btn:hover { background: var(--wood-hover); box-shadow: 0 0 0 1px var(--gold-line-bright), inset 0 0 0 1px var(--bg-000); }
.ex-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.ex-btn:disabled { background: var(--bg-200); color: var(--ink-muted); box-shadow: 0 0 0 1px rgba(157,125,92,.5); cursor: default; }
.ex-btn-quiet { background: transparent; color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line); }
.ex-btn-sm { height: 28px; font-size: 13px; padding: 0 var(--space-3); }
.ex-btn-cta { height: 56px; padding: 0 var(--space-8); font: 700 22px/28px var(--font-display);
  letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius-lg);
  box-shadow: var(--glow-gold), inset 0 0 0 1px var(--bg-000); }

/* Abas sobre o console */
.ex-tabs { display: flex; border-bottom: 1px solid var(--gold-line); }
.ex-tab { font: 700 14px var(--font-serif); height: 36px; padding: 0 var(--space-4); border: 0;
  background: transparent; color: var(--ink-muted); cursor: pointer; position: relative; }
.ex-tab + .ex-tab { border-left: 1px solid rgba(157,125,92,.35); }
.ex-tab:hover { color: var(--ink); }
.ex-tab[aria-selected="true"] { color: var(--gold); }
.ex-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--gold-bright); }
.ex-console { background: var(--bg-000); padding: var(--space-2) var(--space-3);
  font: 400 13px/20px var(--font-mono); color: var(--ink); }
.ex-console .t { color: var(--ink-muted); margin-right: 1em; }
.ex-console .pos { color: var(--positive); }
.ex-console .neg { color: var(--negative); }
.ex-console .gold { color: var(--gold); }

/* Distintivo de papel */
.ex-badge { display: inline-block; font: 700 11px/14px var(--font-serif); letter-spacing: .10em;
  text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--gold-line); }
.ex-badge-tank { background: var(--role-tank); color: var(--role-tank-text); }
.ex-badge-dps { background: var(--role-dps); color: var(--role-dps-text); }
.ex-badge-arcane { background: var(--role-arcane); color: var(--role-arcane-text); }
.ex-badge-sup { background: var(--role-sup); color: var(--role-sup-text); }

/* Cartão de personagem */
.ex-card { display: grid; grid-template-columns: var(--portrait) 1fr; gap: var(--space-2); padding: var(--space-2);
  background: var(--bg-200); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--gold-line); }
.ex-card:hover { background: var(--bg-300); box-shadow: 0 0 0 1px var(--gold-line-bright); }
.ex-card.active { box-shadow: var(--glow-gold); }
.ex-portrait { width: var(--portrait); height: var(--portrait); background: var(--bg-000); box-shadow: var(--well);
  border-radius: var(--radius-sm); display: grid; place-items: center; }
.ex-class { font: 700 14px/16px var(--font-display); letter-spacing: .04em; }
.ex-class.ek { color: var(--class-ek); } .ex-class.rp { color: var(--class-rp); }
.ex-class.ms { color: var(--class-ms); } .ex-class.ed { color: var(--class-ed); }
.ex-card-name { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 var(--space-1); }
.ex-card-name b { color: var(--ink); }
.ex-card-name span { color: var(--ink-muted); font-size: 13px; }
.ex-card .ex-bar + .ex-bar { margin-top: var(--space-1); }

/* Aviso e ficha */
.ex-toast { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4);
  background: var(--bg-100); color: var(--gold); font-weight: 700; border-radius: var(--radius-lg); box-shadow: var(--overlay); }
.ex-toast::before, .ex-toast::after { content: '\25C6'; font-size: 8px; color: var(--gold-line-bright); }
.ex-tooltip { width: 256px; background: var(--bg-100); color: var(--ink); border-radius: var(--radius-lg);
  box-shadow: var(--overlay), var(--frame-inner); padding: var(--space-3); font-size: 14px; line-height: 20px; }
.ex-tooltip-title { font: 700 15px var(--font-display); color: var(--gold); letter-spacing: .06em; margin: 0 0 2px; }
.ex-tooltip-sub { color: var(--ink-muted); font-size: 13px; margin: 0 0 var(--space-2); }
.ex-tooltip .ex-flavor { font-style: italic; color: var(--ink-muted); margin: var(--space-2) 0 0; }