/* MTG Relics — Vida
   Paleta: grafite quente, latão discreto, texto osso.
   Sem sombras, sem gradientes decorativos, sem glow. Estrutura por fio de 1px. */

:root{
  --ink:      #0B0B0C;
  --slate:    #141311;
  --edge:     rgba(201,162,39,.22);
  --brass:    #C9A227;
  --gold-hi:  #EFD98B;
  --brass-dim:#7A5F18;
  --bone:     #EDE6D6;
  --muted:    #A49B8B;
  --oxide:    #A6382B;
  --surface:  var(--slate);
  --veu:      .55;

  --sans: "Barlow Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --serif: Cinzel, "Palatino Linotype", Palatino, Georgia, serif;

  --gap: 12px;
  --tabh: 64px;
}

body.tem-imagem .tabs{ background:rgba(6,6,7,.86); }
body.tem-imagem .life__number,
body.tem-imagem .roll__value{ text-shadow:0 2px 10px rgba(0,0,0,.85), 0 1px 0 #000; }

*{ box-sizing:border-box; margin:0; padding:0; }

/* o atributo hidden precisa vencer qualquer display definido por classe;
   sem isto, .mini e .ghost escondidos continuavam visíveis */
[hidden]{ display:none !important; }

html{
  background:var(--ink);
  -webkit-text-size-adjust:100%;
}

body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  /* NÃO colocar background aqui. O body não cria contexto de empilhamento,
     então o fundo dele é pintado depois da camada .bg (z-index:-1) e cobriria
     a imagem. A cor de base fica só no html, que vai para o canvas. */
  background:transparent;
  color:var(--bone);
  font-family:var(--sans);
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
  touch-action:manipulation;
}

button:focus-visible,
input:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}

/* camada de imagem de fundo, atrás do conteúdo e à frente da cor sólida */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* O véu existe para dar contraste sobre a foto. Sem imagem ele não pode
   aparecer: estaria escurecendo a cor de fundo escolhida e fazendo parecer
   que a troca de cor não funciona. */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,var(--veu));
  display:none;
}

body.tem-imagem .bg::after{ display:block; }

/* moldura fina de relíquia, à altura da tela */
.edge{
  position:fixed;
  top:6px;
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 12px);
  max-width:572px;
  border:1px solid var(--brass-dim);
  opacity:.5;
  pointer-events:none;
  z-index:5;
}

/* Aviso só aparece quando há alterações que o navegador não conseguiu salvar. */
.save-warning{
  flex:0 0 auto;
  align-self:center;
  width:calc(100% - 32px);
  max-width:528px;
  margin:6px 0;
  padding:8px 10px;
  border:1px solid var(--brass);
  background:var(--ink);
  color:var(--gold-hi);
  font-size:14px;
  line-height:1.4;
}
.save-warning button{
  display:block;
  padding:8px 0;
  min-height:44px;
  text-decoration:underline;
}

/* ── topo ── */
.topbar{
  flex:0 0 auto;
  width:100%;
  max-width:560px;
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px 4px;
}

.wordmark{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.14em;
  color:var(--brass);
}

.topbar__dir{
  display:flex;
  align-items:center;
  gap:10px;
}

.stamp{
  font-family:var(--serif);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--muted);
  cursor:default;
}

/* versão nova pronta, mas a partida está em uso: só um sinal no carimbo */
.stamp.is-desatualizado{
  color:var(--brass);
  cursor:pointer;
}

.stamp.is-desatualizado::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:5px;
  border-radius:50%;
  background:var(--brass);
  vertical-align:middle;
}

.gear{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-right:-6px;
  color:var(--muted);
}

.gear:active{ color:var(--brass); }
.gear[aria-expanded="true"]{ color:var(--brass); }

/* ── palco: o painel ocupa a altura toda, e a vida come o que sobrar ── */
.stage{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  max-width:560px;
  align-self:center;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 16px calc(var(--tabh) + 14px + env(safe-area-inset-bottom));
}

.panel{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:2px;
}

/* ── vida: metade superior útil da tela ── */
.life{
  position:relative;
  flex:1 1 auto;
  min-height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.life__number{
  font-size:clamp(5rem, min(50vw, 34dvh), 15rem);
  font-weight:800;
  letter-spacing:-.055em;
  line-height:.84;
  font-variant-numeric:tabular-nums;
  color:var(--bone);
  text-shadow:0 1px 0 #000, 0 -1px 0 rgba(255,255,255,.06);
  transition:color .18s ease;
}

.life__number.is-low{ color:#D9B98C; }
.life__number.is-out{ color:var(--oxide); }
.life__number.is-hit{ animation:tick .16s ease-out; }

@keyframes tick{
  from{ transform:scale(.965); }
  to{ transform:scale(1); }
}

.life__zone{
  position:absolute;
  top:0;
  bottom:0;
  width:44%;
  z-index:2;
}

.life__zone--left{ left:0; }
.life__zone--right{ right:0; }
.life__zone:active{ background:rgba(184,145,47,.07); }

.life__mark{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  color:#3E3E46;
}

.life__mark--left{ left:2px; }
.life__mark--right{ right:2px; }

/* ── dano de comandante: indicadores periféricos dentro da área da vida ── */
.badges{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.badge{
  position:absolute;
  max-width:42%;
  padding:2px 4px;
  pointer-events:auto;
  line-height:1.05;
  /* o body usa touch-action:manipulation, que ainda deixa o navegador tratar
     o gesto como pan. Aqui o arrasto é nosso: none entrega os pointermove. */
  touch-action:none;
}

.badge[data-canto="0"]{ top:0; left:0; text-align:left; }
.badge[data-canto="1"]{ top:0; right:0; text-align:right; }
.badge[data-canto="2"]{ bottom:0; left:0; text-align:left; }
.badge[data-canto="3"]{ bottom:0; right:0; text-align:right; }

.badge.is-arrastando{
  z-index:5;
  opacity:.92;
  cursor:grabbing;
}

.life[data-drop-corner]::before{
  content:"";
  position:absolute;
  width:42%;
  height:35%;
  border:1px dashed var(--brass);
  border-radius:7px;
  background:rgba(201,162,39,.07);
  pointer-events:none;
  z-index:2;
}
.life[data-drop-corner="0"]::before{ top:3px; left:3px; }
.life[data-drop-corner="1"]::before{ top:3px; right:3px; }
.life[data-drop-corner="2"]::before{ bottom:3px; left:3px; }
.life[data-drop-corner="3"]::before{ bottom:3px; right:3px; }

.badge__name{
  display:block;
  font-family:var(--serif);
  font-size:10px;
  letter-spacing:.04em;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.badge__vals{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin-top:1px;
}

.badge[data-canto="1"] .badge__vals,
.badge[data-canto="3"] .badge__vals{ justify-content:flex-end; }

/* recebido: vinho, tamanho cheio. É o número que decide se você morre. */
.badge__vals b{
  font-size:16px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:#C97C6E;
}

/* causado: dourado e menor. Informação de oportunidade, não de sobrevivência. */
.badge__out{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  margin-left:7px;
  padding-left:7px;
  border-left:1px solid var(--edge);
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--brass);
}

.badge__out s{
  width:1px;
  height:10px;
  background:var(--brass-dim);
  text-decoration:none;
}

.badge__vals em{
  font-style:normal;
  font-size:10px;
  color:var(--muted);
  margin-left:-3px;
}

/* separador: dois comandantes do mesmo jogador, nunca somados */
.badge__vals s{
  width:1px;
  height:12px;
  background:var(--edge);
  text-decoration:none;
}

.badge.is-lethal .badge__vals b{ color:var(--oxide); }
.badge.is-lethal .badge__name{ color:var(--oxide); }
.badge.is-lethal-causado .badge__out{ color:#E8C26A; text-shadow:0 0 1px rgba(0,0,0,.9); }

.life__note{
  text-align:center;
  font-family:var(--serif);
  font-size:12px;
  color:var(--muted);
  margin-top:-2px;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}

.step{
  height:60px;
  border:1px solid var(--edge);
  border-radius:2px;
  background:var(--surface);
  font-size:19px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.step:active{
  background:#1D1D21;
  border-color:var(--brass-dim);
}

/* ── estados: chips baixos, informação e não ação ── */
.states{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
}

.chip{
  height:32px;
  padding:0 4px;
  border:1px solid var(--edge);
  border-radius:2px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chip[aria-pressed="true"]{
  color:var(--ink);
  background:var(--brass);
  border-color:var(--brass);
}

/* ── veneno e anel: uma linha, duas metades ── */
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-width:0;
}

.mini__label{
  font-family:var(--serif);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mini.is-lethal .mini__label{ color:var(--oxide); }

.mini--stack{
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}

.stepper{
  display:flex;
  align-items:center;
  border:1px solid var(--edge);
  border-radius:2px;
  background:var(--surface);
}

.stepper__btn{
  width:52px;
  height:48px;
  font-size:19px;
  color:var(--muted);
}

.stepper__btn:active{
  background:#1D1D21;
  color:var(--bone);
}

.stepper__value{
  min-width:58px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  border-left:1px solid var(--edge);
  border-right:1px solid var(--edge);
  padding:0 4px;
  line-height:48px;
}

.stepper__value b{
  font-size:18px;
  font-weight:700;
}

.stepper__value i{
  font-style:normal;
  font-size:12px;
  color:var(--muted);
}

.stepper--sm .stepper__btn{ width:31px; height:38px; font-size:17px; }
.stepper--sm .stepper__value{ min-width:38px; line-height:38px; padding:0 2px; }
.stepper--sm .stepper__value b{ font-size:15px; }
.stepper--sm .stepper__value i{ font-size:10px; }

/* telas muito estreitas: rótulo sobe em vez de espremer o contador */
/* telas baixas: a vida cede um pouco para nada precisar de scroll */
.ghost{
  display:inline-block;
  padding:10px 16px;
  border:1px solid var(--edge);
  border-radius:2px;
  font-family:var(--serif);
  font-size:13px;
  line-height:1.2;
  color:var(--muted);
  text-align:center;
  cursor:pointer;
}

.ghost.is-arming{
  color:var(--oxide);
  border-color:var(--oxide);
}

.foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:auto;
  padding-top:2px;
}

/* com faixa, "Nova partida" encolhe e vai para o canto; sem faixa,
   continua centralizado como antes */
.foot--faixa{ justify-content:flex-start; }

.ghost--min{ padding:9px 12px; font-size:12px; }
.foot--faixa .ghost--min{ flex:0 0 auto; }

.faixa{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 2px 8px 10px;
  border-left:1px solid var(--edge);
  font-family:var(--serif);
  font-size:12px;
  line-height:1.25;
  color:var(--muted);
  text-decoration:none;
}

.faixa__marca{
  flex:0 0 auto;
  font-size:10px;
  color:var(--brass-dim);
}

.faixa__texto{
  min-width:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.faixa[href]{ color:var(--bone); }
.faixa[href]:active{ color:var(--brass); }

.faixa.is-trocando{ animation:surgir .5s ease-out; }

@keyframes surgir{
  from{ opacity:0; }
  to{ opacity:1; }
}

.ghost--wide{ width:100%; padding:14px; font-size:15px; }

/* ── quem começa: tela cheia, dedos na mesa ── */
.sorteio{
  position:fixed;
  inset:0;
  z-index:30;
  background:#07070880;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  /* o navegador não pode interpretar os dedos como rolagem ou zoom */
  touch-action:none;
  overscroll-behavior:none;
}

.sorteio::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  opacity:.94;
}

.sorteio__campo{
  position:absolute;
  inset:0;
}

.sorteio__dica{
  position:absolute;
  left:0;
  right:0;
  top:calc(24px + env(safe-area-inset-top));
  text-align:center;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.06em;
  color:var(--muted);
  pointer-events:none;
}

.sorteio__fechar{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(22px + env(safe-area-inset-bottom));
}

.dedo{
  position:absolute;
  width:92px;
  height:92px;
  margin:-46px 0 0 -46px;
  pointer-events:none;
}

.dedo__marca{
  position:absolute;
  inset:26px;
  border:1px solid var(--brass-dim);
  border-radius:50%;
}

.dedo__anel{
  position:absolute;
  inset:0;
  border:2px solid var(--brass-dim);
  border-radius:50%;
  transform:scale(1);
  opacity:.75;
}

/* o anel fecha em direção ao dedo: é o cronômetro, visível para a mesa toda */
.dedo__anel.is-contando{
  animation:fechar 2200ms linear forwards;
}

@keyframes fechar{
  from{ transform:scale(1.45); opacity:.35; }
  to{ transform:scale(.62); opacity:1; }
}

.dedo.is-escolhido .dedo__anel{
  border-color:var(--brass);
  border-width:3px;
  transform:scale(1);
  opacity:1;
  animation:pulsar 900ms ease-out 2;
}

.dedo.is-escolhido .dedo__marca{
  background:var(--brass);
  border-color:var(--brass);
}

@keyframes pulsar{
  from{ box-shadow:0 0 0 0 rgba(184,145,47,.45); }
  to{ box-shadow:0 0 0 26px rgba(184,145,47,0); }
}

.dedo.is-descartado{ opacity:.18; }

/* ── folha de aparência, sobreposta ── */
.sheet{
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.62);
}

.sheet__box{
  width:100%;
  max-width:560px;
  max-height:86dvh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  background:var(--slate);
  border-top:1px solid var(--brass-dim);
}

.sheet__title{
  font-family:var(--serif);
  font-size:16px;
  font-weight:400;
  letter-spacing:.1em;
  color:var(--brass);
}

.sheet__close{ margin-top:6px; }

.swatches{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.swatch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:7px 4px;
  border:1px solid var(--edge);
  border-radius:2px;
}

.swatch[aria-pressed="true"]{ border-color:var(--brass); }

.swatch__chip{
  width:100%;
  height:24px;
  border:1px solid;
  border-radius:2px;
}

.swatch__nome{
  font-family:var(--serif);
  font-size:11px;
  color:var(--muted);
}

.swatch[aria-pressed="true"] .swatch__nome{ color:var(--brass); }

.bg__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.bg__actions .ghost{ flex:1 1 auto; }

#bgFile{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.somlist{
  list-style:none;
  display:flex;
  flex-direction:column;
}

.somrow{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid var(--edge);
}

.somrow:last-child{ border-bottom:0; }

.somrow__label{
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.somrow__label b{
  display:block;
  font-family:var(--serif);
  font-size:11px;
  font-weight:400;
  color:var(--brass-dim);
}

.somrow .ghost{ padding:7px 10px; font-size:12px; }

#somFile{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.coin{
  display:grid;
  grid-template-columns:1fr;
}

/* ── reserva de mana: um painel só, não seis controles soltos ── */
.manahead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}

.manahead .label{ margin-top:8px; }

.manaclear{
  font-family:var(--serif);
  font-size:12px;
  color:var(--muted);
  padding:4px 2px;
}

.manas{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--edge);
  border-radius:2px;
  background:var(--surface);
  overflow:hidden;
}

.mana{
  display:flex;
  align-items:center;
  gap:2px;
  height:40px;
  padding-left:6px;
  min-width:0;
  border-bottom:1px solid var(--edge);
}

.mana:nth-child(odd){ border-right:1px solid var(--edge); }
.mana:nth-child(5),
.mana:nth-child(6){ border-bottom:0; }

.mana__sim{
  width:26px;
  height:26px;
  flex:0 0 auto;
  display:block;
}

.mana__btn{
  flex:1 1 0;
  min-width:26px;
  height:100%;
  font-size:17px;
  color:var(--muted);
}

.mana__btn:active{
  background:#1D1D21;
  color:var(--bone);
}

.mana__val{
  min-width:24px;
  text-align:center;
  font-size:17px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* sem mana daquela cor, o símbolo recua para o contador cheio saltar */
.mana.is-vazio .mana__sim{ opacity:.4; }
.mana.is-vazio .mana__val{ color:var(--muted); }

#veil{
  width:100%;
  height:32px;
  accent-color:var(--brass);
}

/* ── rótulos de seção ── */
.label{
  font-family:var(--serif);
  font-size:13px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--brass);
  margin-top:8px;
}

.hint{
  font-family:var(--serif);
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  margin-top:4px;
}

/* ── aba Comandante: cabeçalho de seção com ação à direita ── */
.sechead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}

.sechead .label{ margin-top:8px; }
.sechead .sheet__title{ margin:0; }

.legend{
  margin-left:8px;
  font-size:11px;
  letter-spacing:0;
  color:var(--muted);
}

.legend i{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin:0 3px 0 6px;
  vertical-align:middle;
}

.legend__in{ background:#C97C6E; }
.legend__out{ background:var(--brass); }

/* ── taxa: uma linha por comandante meu ── */
.tax{
  display:flex;
  align-items:center;
  gap:8px;
  height:44px;
}

.tax__quem{
  width:22px;
  font-style:normal;
  font-family:var(--serif);
  font-size:12px;
  color:var(--muted);
}

.tax__cost{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--serif);
  font-size:13px;
  color:var(--bone);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── adversários: um bloco por jogador ── */
.cmds{ list-style:none; }

.cmd{
  padding:8px 0 10px;
  border-bottom:1px solid var(--edge);
}

.cmd:last-child{ border-bottom:0; }

.cmd__head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}

.cmd__name{
  flex:1 1 auto;
  min-width:0;
  background:none;
  border:0;
  border-bottom:1px dotted transparent;
  color:var(--bone);
  font-family:var(--serif);
  font-size:16px;
  padding:4px 0;
  -webkit-user-select:text;
  user-select:text;
}

.cmd__name:focus{
  outline:none;
  border-bottom-color:var(--brass-dim);
}

.cmd__name--p{
  font-size:14px;
  color:var(--muted);
}

.cmd__toggle{
  flex:0 0 auto;
  padding:6px 10px;
  border:1px solid var(--edge);
  border-radius:2px;
  font-family:var(--serif);
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

.cmd__toggle[aria-pressed="true"]{
  color:var(--brass);
  border-color:var(--brass-dim);
}

.cmd__toggle--x{
  width:30px;
  padding:6px 0;
  font-size:15px;
  line-height:1;
}

/* duas colunas fixas: esquerda sempre recebido, direita sempre causado.
   Uma célula escondida deixa o buraco em vez de puxar a vizinha. */
.cmd__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 8px;
}

.cmd__cell{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.cmd__cell--in{ grid-column:1; }
.cmd__cell--out{ grid-column:2; }

.cmd__tag{
  width:47px;
  flex:0 0 auto;
  font-style:normal;
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--muted);
}

.cmd__cell .stepper{ flex:1 1 auto; }
.cmd__cell .stepper__btn{ flex:1 1 0; width:auto; }

.cmd__cell--in .stepper__value b{ color:#C97C6E; }
.cmd__cell--out .stepper__value b{ color:var(--brass); }

.cmd__cell--in.is-lethal .stepper__value b{ color:var(--oxide); }
.cmd__cell--out.is-lethal .stepper__value b{ color:#E8C26A; }
.cmd__cell.is-lethal .stepper{ border-color:var(--brass-dim); }

/* ── dados ── */
.roll{
  min-height:18dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.roll__value{
  font-size:clamp(4.5rem, 26vw, 8rem);
  font-weight:800;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  line-height:1;
  text-shadow:0 1px 0 #000;
}

.roll__value.is-rolling{ color:var(--muted); }
.roll__value.is-face{ font-size:clamp(2.4rem, 13vw, 4rem); font-family:var(--serif); font-weight:400; }

.roll__note{
  font-family:var(--serif);
  font-size:13px;
  color:var(--muted);
}

.dice{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.die{
  height:64px;
  border:1px solid var(--edge);
  border-radius:2px;
  background:var(--surface);
  font-size:17px;
  font-weight:600;
}

.die:active{
  background:#1D1D21;
  border-color:var(--brass-dim);
}

.die[data-die="coin"]{
  grid-column:1 / -1;
  font-family:var(--serif);
  font-weight:400;
  font-size:16px;
}

/* ── soundboard ── */
.board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.sound{
  min-height:72px;
  padding:10px 12px;
  border:1px solid var(--edge);
  border-radius:2px;
  background:var(--surface);
  font-size:15px;
  line-height:1.25;
  text-align:left;
}

.sound:active{
  background:#1D1D21;
  border-color:var(--brass-dim);
}

.sound.is-playing{
  border-color:var(--brass);
  color:var(--brass);
}

.sound.is-missing{
  color:var(--muted);
  border-style:dashed;
}

.sound.is-missing::after{
  content:attr(data-missing);
  display:block;
  margin-top:6px;
  font-family:var(--serif);
  font-size:11px;
  color:var(--brass-dim);
}

/* ── abas ── */
.tabs{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:560px;
  z-index:6;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--ink);
  padding:0 6px env(safe-area-inset-bottom);
}

.tab{
  height:var(--tabh);
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted);
  border-top:1px solid transparent;
  margin-top:-1px;
}

.tab.is-active{
  color:var(--brass);
  border-top-color:var(--brass);
}

/* ─────────────────────────────────────────────
   RESPONSIVO E PREFERÊNCIAS — sempre no fim do arquivo.
   Estas regras têm a mesma especificidade das de cima; se ficarem antes,
   a declaração-base posterior vence e o ajuste some sem avisar. Foi o que
   aconteceu na v1.9.0: o empilhamento de 320px estava declarado 500 linhas
   antes de .cmd__grid e nunca chegou a valer.
   ───────────────────────────────────────────── */

@media (max-width: 345px){
  .mini{ flex-direction:column; align-items:stretch; gap:3px; }
  .mini .stepper--sm{ width:100%; }
  .mini .stepper--sm .stepper__btn{ flex:1 1 0; width:auto; }
  /* em 320px as duas colunas dariam 25px por botão; empilhadas, viram 60px */
  .cmd__grid{ grid-template-columns:1fr; }
  .cmd__cell--in,
  .cmd__cell--out{ grid-column:1; }
}

@media (max-height: 620px){
  .life__number{ font-size:clamp(4rem, 38vw, 9rem); }
  .step{ height:52px; }
  .stepper__btn{ height:44px; }
  .stepper__value{ line-height:44px; }
}

@media (prefers-reduced-motion: reduce){
  .dedo__anel.is-contando{ animation:none; transform:scale(1); }
  .dedo.is-escolhido .dedo__anel{ animation:none; }
}

@media (hover:hover){
  .step:hover,
  .die:hover,
  .sound:hover,
  .chip:hover{ border-color:var(--brass-dim); }
}

@media (prefers-reduced-motion: reduce){
  .life__number,
  .life__number.is-hit{ animation:none; transition:none; }
}

/* Relics Tools: superfície quente, filetes dourados e controles de toque. */
.edge{ display:none; }

.topbar{
  max-width:560px;
  min-height:58px;
  padding:8px 16px;
  background:linear-gradient(135deg,#1A1711 0%,#0F0E0C 55%,#141311 100%);
  border-bottom:1px solid var(--brass-dim);
}

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand__copy{ display:flex; flex-direction:column; min-width:0; line-height:1.1; }
.brand__copy strong{
  font-family:var(--serif);
  font-size:14px;
  font-weight:600;
  letter-spacing:.045em;
  white-space:nowrap;
}
.brand__copy small{
  margin-top:4px;
  color:var(--brass);
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  white-space:nowrap;
}
.topbar__dir{ gap:6px; }
.language{
  width:48px;
  height:36px;
  padding:0 3px;
  flex:0 0 auto;
  border:1px solid var(--brass-dim);
  border-radius:6px;
  background:#1A1711;
  color:var(--brass);
  font:600 16px var(--sans);
  text-align:center;
  cursor:pointer;
}
.language:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.stamp{ font-family:var(--sans); font-size:11px; }
.gear{ width:44px; height:44px; margin-right:-7px; color:var(--bone); }
.gear[aria-expanded="true"]{ color:var(--brass); }

.stage{ padding:14px 16px calc(var(--tabh) + 18px + env(safe-area-inset-bottom)); }
.panel{ gap:12px; }

.life{
  min-height:170px;
  border:1px solid var(--edge);
  border-radius:10px;
  background:
    radial-gradient(ellipse at 50% 35%,rgba(201,162,39,.11),transparent 63%),
    linear-gradient(155deg,rgba(26,23,17,.92),rgba(12,12,13,.92));
  overflow:hidden;
}
.life::after{
  content:"";
  position:absolute;
  top:0;
  left:23%;
  right:23%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  pointer-events:none;
}
.life__eyebrow{
  position:absolute;
  top:18px;
  left:0;
  right:0;
  text-align:center;
  color:var(--brass);
  font-size:11px;
  font-weight:600;
  letter-spacing:.28em;
  pointer-events:none;
}
.life__number{
  position:relative;
  z-index:1;
  max-width:100%;
  font-size:clamp(5rem,min(44vw,27dvh),12rem);
  letter-spacing:-.07em;
  color:var(--bone);
  text-shadow:1px 2px 0 #000,2px 3px 8px rgba(0,0,0,.55);
  pointer-events:none;
}
.life__zone{ width:50%; }
.life__zone:active{ background:rgba(201,162,39,.08); }
.life__mark{ z-index:1; font-size:24px; color:var(--brass-dim); pointer-events:none; }
.life__mark--left{ left:16px; }
.life__mark--right{ right:16px; }
.life__note{ margin-top:0; font-family:var(--sans); font-size:13px; letter-spacing:.09em; }

.step,.die,.sound,.stepper,.manas{
  border-color:var(--edge);
  border-radius:7px;
  background:var(--surface);
}
.step{ height:58px; font-size:22px; font-weight:600; }
.step:nth-child(2),.step:nth-child(3){ border-color:rgba(201,162,39,.42); }
.step:active,.die:active,.sound:active,.stepper__btn:active{
  background:rgba(201,162,39,.14);
  border-color:var(--brass);
}

.chip{
  min-height:42px;
  height:auto;
  border-color:var(--edge);
  border-radius:7px;
  background:rgba(20,19,17,.7);
  color:var(--bone);
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.12em;
}
.chip[aria-pressed="true"]{ background:var(--brass); color:var(--ink); }

.duo{ gap:8px; }
.duo .mini{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:10px;
  border:1px solid var(--edge);
  border-radius:8px;
  background:rgba(20,19,17,.8);
}
.mini__label{ color:var(--bone); font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.duo .stepper{ width:100%; }
.stepper--sm .stepper__btn{ flex:1 1 0; min-width:40px; width:auto; height:44px; font-size:21px; }
.stepper--sm .stepper__value{ flex:0 0 auto; min-width:38px; line-height:44px; }
.stepper--sm .stepper__value b{ font-size:18px; }

.ghost,.cmd__toggle{ border-color:var(--edge); border-radius:7px; color:var(--bone); }
.ghost:active,.cmd__toggle:active{ color:var(--brass); border-color:var(--brass); }
.ghost--min{ min-height:44px; }
.foot{ min-height:48px; }

.label,.sheet__title{
  font-family:var(--serif);
  color:var(--brass);
  letter-spacing:.06em;
}
.label{ font-size:13px; }
.legend{ font-family:var(--sans); }
.manaclear{ min-height:44px; padding:8px; font-family:var(--sans); font-size:13px; }
.tax{ min-height:52px; height:auto; }
.tax__cost{ font-family:var(--sans); font-size:15px; }
.tax__quem{ font-family:var(--sans); font-size:13px; }
.cmd{ margin-top:8px; padding:12px; border:1px solid var(--edge); border-radius:8px; background:rgba(20,19,17,.82); }
.cmd:last-child{ border-bottom:1px solid var(--edge); }
@media (min-width:601px), (orientation:landscape){
  .cmd.is-current{ border-color:var(--brass); }
}
.cmd__name{ font-family:var(--sans); font-size:18px; font-weight:600; }
.cmd__name--p{ font-size:16px; }
.cmd__toggle{ min-height:42px; font-family:var(--sans); font-size:13px; }
.cmd__tag{ font-family:var(--sans); font-size:13px; }
.cmd__cell .stepper__btn{ min-width:40px; }
.cmd__cell .stepper__value{ min-width:38px; }

.roll{ min-height:15dvh; border:1px solid var(--edge); border-radius:8px; background:rgba(20,19,17,.78); }
.roll__value{ color:var(--gold-hi,#EFD98B); }
.die{ min-height:60px; font-size:20px; }
.die[data-die="coin"]{ font-family:var(--sans); font-size:18px; }
.mana{ height:48px; }
.mana__btn{ min-width:40px; }
.sound{ min-height:72px; font-size:18px; }
.sound.is-playing{ background:rgba(201,162,39,.13); }

.sheet__box{
  border:1px solid var(--brass-dim);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:#161411;
  box-shadow:0 -16px 40px rgba(0,0,0,.5);
}
.swatch{ min-height:64px; border-radius:7px; }
.hint{ font-family:var(--sans); font-size:14px; }

.tabs{
  border-top:1px solid var(--brass-dim);
  background:linear-gradient(135deg,#1A1711,#0F0E0C 55%,#141311);
  box-shadow:0 -8px 24px rgba(0,0,0,.38);
}
.tab{
  position:relative;
  min-width:0;
  font-family:var(--sans);
  font-size:16px;
  font-weight:600;
  letter-spacing:.035em;
  border-top:0;
  margin-top:0;
}
.tab.is-active{ color:#EFD98B; border-top:0; text-shadow:1px 1px 0 #000; }
.tab.is-active::after{
  content:"";
  position:absolute;
  top:0;
  left:18%;
  right:18%;
  height:2px;
  background:var(--brass);
}

@media (max-width:430px){
  .cmd__grid{ grid-template-columns:1fr; gap:6px; }
  .cmd__cell--in,.cmd__cell--out{ grid-column:1; }
  .cmd__tag{ width:62px; }
}
@media (max-width:345px){
  .stage{ padding-left:12px; padding-right:12px; }
  .topbar__dir{ gap:3px; }
  .language{ width:48px; font-size:16px; }
  .stamp{ font-size:9px; }
  .brand__copy strong{ font-size:12px; }
  .brand__copy small{ font-size:9px; letter-spacing:.1em; }
  .tab{ font-size:13px; letter-spacing:0; }
  .duo .mini{ padding:7px; }
  .stepper--sm .stepper__btn{ min-width:36px; }
}
@media (max-height:620px){
  .stage{ padding-top:8px; }
  .life{ min-height:136px; }
  .life__eyebrow{ top:10px; }
  .life__number{ font-size:clamp(4rem,min(38vw,24dvh),9rem); }
  .step{ height:52px; }
}

/* O painel do resultado não muda de altura entre números e cara ou coroa. */
body{ height:100dvh; min-height:0; overflow:hidden; }
.roll{ height:clamp(104px,18dvh,150px); min-height:0; flex:0 0 auto; }
.roll__value{ white-space:nowrap; }
.dicearea,.manaarea{ display:flex; flex-direction:column; gap:10px; min-height:0; }
.opponents button{
  min-width:0;
  min-height:44px;
  padding:6px 10px;
  border:1px solid var(--edge);
  border-radius:7px;
  color:var(--muted);
  font-size:15px;
  font-weight:600;
}
.opponents button[aria-pressed="true"]{
  color:var(--gold-hi);
  border-color:var(--brass);
  background:rgba(201,162,39,.13);
}
.opponents{ display:none; }

@media (max-width:600px) and (orientation:portrait){
  :root{ --tabh:56px; }
  .topbar{ min-height:52px; height:52px; padding:4px 10px; }
  .stage{ padding:6px 10px calc(var(--tabh) + 6px + env(safe-area-inset-bottom)); }
  .panel{ gap:6px; }
  .tab{ font-size:14px; }

  /* Vida ocupa o espaço livre; os demais controles têm alturas previsíveis. */
  .life{ min-height:110px; }
  .life__eyebrow{ top:10px; font-size:10px; }
  .life__number{ font-size:clamp(4rem,min(41vw,24dvh),10rem); }
  .life__note{ font-size:12px; line-height:16px; }
  .step{ height:48px; }
  .chip{ min-height:42px; }
  .duo .mini{ gap:4px; padding:6px; }
  .duo .stepper--sm .stepper__btn{ height:40px; }
  .duo .stepper--sm .stepper__value{ line-height:40px; }
  .foot{ min-height:44px; padding-top:0; }

  /* Um adversário por vez mantém dano e taxa visíveis sem empilhar três cartões. */
  #panel-cmd .sechead .label{ margin-top:0; }
  #panel-cmd .sechead{ min-height:44px; align-items:center; }
  #taxList{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .tax{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    grid-template-rows:18px 40px;
    gap:0 4px;
    min-height:64px;
    height:auto;
    padding:3px;
    border:1px solid var(--edge);
    border-radius:7px;
    background:var(--surface);
  }
  .tax:first-child{ grid-column:1/-1; }
  #taxList.is-duplo .tax:first-child{ grid-column:auto; }
  .tax__quem{ grid-column:1; grid-row:1; font-size:11px; }
  .tax__cost{ grid-column:2; grid-row:1; font-size:12px; text-align:right; }
  .tax .stepper{ grid-column:1/-1; grid-row:2; }
  .tax .stepper__btn{ height:40px; min-width:36px; }
  .tax .stepper__value{ line-height:40px; }
  .opponents{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .opponents button{ min-height:40px; height:40px; padding:4px; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .opponents__heading{ display:none; }
  .cmd{ display:none; margin-top:0; padding:6px; }
  .cmd.is-current{ display:block; }
  .cmd__head{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 6px; margin-bottom:4px; }
  .cmd__name{ padding:2px 0; font-size:16px; line-height:1.2; }
  .cmd__name--p{ grid-column:1/-1; grid-row:2; font-size:16px; }
  .cmd__toggle{ grid-column:2; grid-row:1; min-height:34px; padding:3px 8px; }
  .cmd__grid{ grid-template-columns:1fr; gap:2px; }
  .cmd__cell--in,.cmd__cell--out{ grid-column:1; }
  .cmd__cell{ min-height:40px; }
  .cmd__tag{ width:56px; font-size:12px; }
  .cmd__cell .stepper__btn{ height:40px; }
  .cmd__cell .stepper__value{ line-height:40px; }

  /* Dados e reserva de mana compartilham a aba. */
  .dicearea,.manaarea{ gap:8px; }
  .ghost--wide{ min-height:44px; padding:8px; }
  .roll{ height:clamp(96px,18dvh,124px); }
  .roll__value{ font-size:clamp(4.5rem,24vw,7rem); }
  .roll__value.is-face{ font-size:clamp(2.2rem,11vw,3.5rem); }
  .die{ height:52px; min-height:52px; }
  .dice{ gap:6px; }
  .coin .die{ height:48px; min-height:48px; }
  .mana{ height:44px; }

  /* Doze sons em cinco linhas, com leitura suficiente até em 320 px. */
  #panel-sons .sechead{ min-height:44px; align-items:center; }
  #panel-sons .label{ margin-top:0; }
  .board{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .sound{ position:relative; height:60px; min-height:60px; padding:5px 6px; font-size:14px; line-height:1.05; overflow:hidden; }
  .sound.is-missing::after{
    content:"";
    position:absolute;
    top:5px;
    right:5px;
    width:6px;
    height:6px;
    margin:0;
    border-radius:50%;
    background:var(--brass-dim);
  }
}

/* Reserva de mana na mesma tela dos dados; o cabeçalho não salta ao mostrar Limpar. */
.manahead{ min-height:44px; align-items:center; }
.manahead .label{ margin-top:0; }
.cmd__toggle--x{ width:auto; padding:6px 10px; font-size:13px; }
.cmd__tag{ width:84px; line-height:1.1; white-space:normal; }

@media (max-width:600px) and (orientation:portrait){
  #panel-dados{ gap:4px; }
  .dicearea{ gap:4px; }
  .manaarea{ gap:3px; }
  .ghost--wide{ min-height:42px; height:42px; }
  .roll{ height:76px; min-height:76px; gap:4px; }
  .roll__value{ font-size:clamp(3rem,16vw,4rem); }
  .roll__value.is-face{ font-size:clamp(2rem,10vw,2.8rem); }
  .roll__note{ font-size:11px; line-height:14px; }
  .dice{ gap:4px; }
  .die,.coin .die{ height:42px; min-height:42px; font-size:17px; }
  .manahead{ min-height:40px; height:40px; }
  .manahead .manaclear{ min-height:40px; height:40px; padding:4px 8px; }
  .mana{ height:42px; }
  .mana__btn{ min-width:34px; }

  #panel-cmd .sechead .manaclear{ font-size:12px; }
  .cmd__tag{ width:86px; font-size:11px; }
  .cmd__toggle--x{ width:auto; padding:3px 8px; font-size:12px; }
}

@media (max-width:360px){
  html[lang="en"] .tab{ font-size:12px; letter-spacing:0; }
  html[lang="en"] #panel-cmd .sechead .manaclear{ font-size:11px; }
}

/* v1.15.5: a área central cresce e rola quando o aviso ou uma tela baixa
   reduz o espaço. O rodapé nunca depende de filhos que transbordam o painel. */
.panel{ flex:1 0 auto; }
.stage{ scroll-padding-bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom)); }
.life{
  --life-number-size:clamp(5rem,min(44vw,27dvh),12rem);
  padding:28px 0 10px;
  min-height:calc(var(--life-number-size) * .84 + 40px);
}
.life__number{ font-size:var(--life-number-size); }
.life__eyebrow{ top:10px; }
.life.has-damage{
  --life-number-size:clamp(4rem,min(33vw,20dvh),10rem);
  padding:62px 0 34px;
  min-height:calc(var(--life-number-size) * .84 + 98px);
}
.badges{ top:28px; }
@media (max-width:600px) and (orientation:portrait){
  .life:not(.has-damage){ --life-number-size:clamp(4rem,min(41vw,24dvh),10rem); }
}