:root{
  --paper: #E2E3D8;
  --paper-card: #ECECE1;
  --paper-raised: #F4F4EB;
  --ink: #1E1B27;
  --ink-soft: #4A4457;
  --rule: #C9C7B6;
  --gold: #9C7A2E;
  --gold-strong: #7C5E1F;
  --violet: #4B2E73;
  --violet-soft: #6B4F98;
  --good: #3F7D53;
  --bad: #A63A32;

  --rarity-comum: #8A8577;
  --rarity-superior: #3F7D53;
  --rarity-incrivel: #4A90C2;
  --rarity-magnifica: #7C3AED;
  --rarity-extraordinaria: #C0392B;

  --serif-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif-body: "Newsreader", Georgia, serif;
  --mono: "Spectral Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:15px;
  transition:background-color .6s ease, color .6s ease;
}

/* ---- fase Noite: a página escurece; fase Dia (padrão) mantém a paleta clara ---- */
body.phase-night{
  --paper: #171420;
  --paper-card: #1F1B2B;
  --paper-raised: #262034;
  --ink: #ECE8DC;
  --ink-soft: #B9B2C9;
  --rule: #3A3448;
  --gold: #D8B25F;
  --gold-strong: #E8C878;
  --violet: #A98FD6;
  --violet-soft: #8A6FBE;
  --good: #6FBE87;
  --bad: #E0847A;

  --rarity-comum: #A9A493;
  --rarity-superior: #6FBE87;
  --rarity-incrivel: #7EC0EE;
  --rarity-magnifica: #A87CF0;
  --rarity-extraordinaria: #E0685A;
}
@media (prefers-reduced-motion: reduce){ body{ transition:none; } }
button{ font-family:var(--mono); cursor:pointer; }
button:disabled{ cursor:default; opacity:.4; }

/* ---- borda por Aspecto ----
   Toda carta desenha a borda a partir de --aspect-color, definida inline pelo JS.
   Cartas Neutras não definem a variável e caem no cinza padrão abaixo.
   Estados interativos (jogável, no baralho, alvo) usam anéis EXTERNOS — box-shadow e
   outline — justamente para não sobrescrever a cor do Aspecto. */
.hand-card, .builder-card, .board-card, .card-preview{
  --aspect-color: var(--rule);
}

[role="button"]{ cursor:pointer; }
[role="button"]:focus-visible,
button:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
}

/* ---- arrastar: cursores globais ---- */
body.dragging, body.dragging *{ cursor:grabbing !important; }
body.dragging{ user-select:none; }

body.targeting-mode, body.targeting-mode *{
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><circle cx="13" cy="13" r="8" fill="none" stroke="%234B2E73" stroke-width="2.2"/><circle cx="13" cy="13" r="2" fill="%234B2E73"/><line x1="13" y1="0" x2="13" y2="6" stroke="%234B2E73" stroke-width="2.2"/><line x1="13" y1="20" x2="13" y2="26" stroke="%234B2E73" stroke-width="2.2"/><line x1="0" y1="13" x2="6" y2="13" stroke="%234B2E73" stroke-width="2.2"/><line x1="20" y1="13" x2="26" y2="13" stroke="%234B2E73" stroke-width="2.2"/></svg>') 13 13,
    crosshair !important;
}
body.phase-night.targeting-mode, body.phase-night.targeting-mode *{
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><circle cx="13" cy="13" r="8" fill="none" stroke="%23A98FD6" stroke-width="2.2"/><circle cx="13" cy="13" r="2" fill="%23A98FD6"/><line x1="13" y1="0" x2="13" y2="6" stroke="%23A98FD6" stroke-width="2.2"/><line x1="13" y1="20" x2="13" y2="26" stroke="%23A98FD6" stroke-width="2.2"/><line x1="0" y1="13" x2="6" y2="13" stroke="%23A98FD6" stroke-width="2.2"/><line x1="20" y1="13" x2="26" y2="13" stroke="%23A98FD6" stroke-width="2.2"/></svg>') 13 13,
    crosshair !important;
}

.btn{
  border:1px solid var(--ink-soft);
  background:var(--paper-raised);
  color:var(--ink);
  border-radius:7px;
  padding:9px 16px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.btn:hover:not(:disabled){ border-color:var(--violet); color:var(--violet); }
.btn.primary{ background:var(--violet); color:var(--paper-raised); border-color:var(--violet); }
.btn.ghost{ background:transparent; }
.btn.small{ padding:6px 12px; font-size:.68rem; }
.btn.pass{ align-self:center; }

/* ---- topbar ---- */
.topbar{
  display:grid; grid-template-columns:1fr 150px 1fr; align-items:center; gap:12px;
  padding:12px 20px; border-bottom:1px solid var(--rule);
  background:var(--paper-raised);
  position:sticky; top:0; z-index:10;
  transition:background-color .5s ease, border-color .5s ease;
}
.topbar-lado{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; min-width:0; }
.topbar-lado.fim{ justify-content:flex-end; gap:12px; }
.topbar-vao{ height:1px; }   /* só reserva o espaço do relógio, que flutua por cima */
/* Em telas estreitas o vão do relógio custaria uma segunda linha na barra:
   o subtítulo decorativo sai primeiro. */
@media (max-width:1120px){ .brand .proto, .score-target{ display:none; } }
@media (max-width:900px){ .status{ gap:9px; font-size:.68rem; } .topbar{ gap:10px; padding-inline:12px; } }
.brand{ font-family:var(--serif-display); font-weight:700; font-size:1.2rem; }
.brand .proto{ font-family:var(--mono); font-weight:400; font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.status{ display:flex; gap:14px; font-family:var(--mono); font-size:.75rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.status .turn{ color:var(--violet-soft); font-weight:600; }
.score{ display:flex; gap:8px; align-items:baseline; font-family:var(--mono); font-size:.9rem; font-variant-numeric:tabular-nums; }
.score-you{ color:var(--violet-soft); font-weight:600; }
.score-bot{ color:var(--gold-strong); font-weight:600; }
.score-target{ color:var(--ink-soft); font-size:.68rem; }

/* ---- layout ---- */
.layout{ display:flex; gap:0; align-items:flex-start; }
.main{ flex:1; min-width:0; padding:18px 20px 28px; display:flex; flex-direction:column; gap:14px; }
.log-panel{
  width:300px; flex-shrink:0; border-left:1px solid var(--rule);
  height:calc(100vh - 57px); position:sticky; top:57px;
  padding:16px 16px; display:flex; flex-direction:column; gap:10px;
  background:var(--paper-raised);
  transition:background-color .5s ease, border-color .5s ease;
}
.log-panel h3{ font-family:var(--serif-display); margin:0; font-size:1rem; }
.log-list{ overflow-y:auto; display:flex; flex-direction:column-reverse; gap:6px; font-family:var(--mono); font-size:.72rem; line-height:1.5; color:var(--ink-soft); }
.log-line{ border-bottom:1px dotted var(--rule); padding-bottom:6px; }

/* ---- side strips ---- */
.side-strip{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
  padding:8px 12px; border:1px solid var(--rule); border-radius:8px; background:var(--paper-card);
  transition:background-color .5s ease, border-color .5s ease, color .5s ease;
}
.side-strip strong{ font-family:var(--serif-display); color:var(--ink); font-size:.9rem; }
/* contador da faixa que também é botão (o Epílogo do oponente) */
.strip-btn{
  border-bottom:1px dotted var(--ink-soft); cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.strip-btn:hover{ color:var(--violet); border-color:var(--violet); }

.ink-track{ display:flex; gap:4px; }
.ink-dot{
  width:11px; height:11px; border-radius:50%;
  border:1px solid var(--rule); background:transparent;
  transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.ink-dot.filled{ border-color:var(--gold-strong); background:var(--gold-strong); }
.ink-dot.colored{ border-color:var(--ink-color); background:var(--ink-color); }
.ink-dot.just-painted{ animation:inkPainted .9s cubic-bezier(.34,1.56,.64,1); }
@keyframes inkPainted{
  0%{ transform:scale(1); box-shadow:0 0 0 0 var(--ink-color); }
  35%{ transform:scale(1.9); box-shadow:0 0 0 5px color-mix(in srgb, var(--ink-color) 40%, transparent); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){ .ink-dot.just-painted{ animation:none; } }

/* Pip de exigência de Tinta específica no custo da carta */
.pip.ink-req{
  width:14px; height:14px; padding:0; flex-shrink:0;
  background:var(--ink-color); border-color:var(--ink-color);
  align-self:center;
}
.bc-top .pip.ink-req{ width:11px; height:11px; }

.hc-aspect{
  font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-color); border:1px solid var(--ink-color); border-radius:20px; padding:1px 6px;
}
.hc-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px; }

.avatar-chip{
  display:flex; align-items:center; gap:5px;
  border-color:var(--violet-soft); color:var(--ink);
}
.continuation-mark{
  font-size:.58rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--bad); border:1px solid var(--bad); border-radius:20px; padding:0 6px; margin-left:4px;
}

.chip{ border:1px solid var(--rule); border-radius:20px; padding:3px 10px; background:var(--paper-raised); transition:background .12s ease; }
.chip.scenario{ border-color:var(--violet-soft); color:var(--violet-soft); }
.chip.artifact{ border-color:var(--gold-strong); color:var(--gold-strong); }
.chip.empty{ color:var(--rule); }
.chip.scenario:hover{ background:color-mix(in srgb, var(--violet) 14%, var(--paper-raised)); }
.chip.artifact:hover{ background:color-mix(in srgb, var(--gold) 14%, var(--paper-raised)); }

.card-preview{
  position:fixed; z-index:150; pointer-events:none;
  box-shadow:0 16px 30px -10px rgba(30,27,39,.45);
  animation:previewIn .12s ease both;
}
@keyframes previewIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }

/* ---- board ---- */
.board{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.page-col{
  border:1px solid var(--rule); border-radius:10px; padding:12px; background:var(--paper-card);
  display:flex; flex-direction:column; gap:8px;
  transition:background-color .5s ease, border-color .5s ease;
}
.page-col.targetable{ outline:2px solid var(--violet); outline-offset:2px; cursor:pointer; background:color-mix(in srgb, var(--violet) 8%, var(--paper-card)); }
.page-title{ font-family:var(--serif-display); font-weight:600; font-size:1rem; text-align:center; }
/* ---- placar de Poder da Página ---- */
.page-power{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  padding:4px 2px 6px;
}
.pp-side{ display:flex; flex-direction:column; line-height:1; }
.pp-bot{ align-items:flex-start; }
.pp-you{ align-items:flex-end; }
.pp-num{
  font-family:var(--mono); font-weight:700; font-size:2.35rem; font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  transition:color .25s ease, opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.pp-nome{
  font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-soft); margin-top:3px;
  max-width:8ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pp-bot .pp-num{ color:var(--gold-strong); }
.pp-you .pp-num{ color:var(--violet-soft); }

/* quem está perdendo recua; quem lidera cresce um pouco */
.page-power.lider-you .pp-bot .pp-num,
.page-power.lider-bot .pp-you .pp-num{ opacity:.42; }
.page-power.lider-you .pp-you .pp-num{ color:var(--violet); transform:scale(1.06); }
.page-power.lider-bot .pp-bot .pp-num{ color:var(--gold-strong); transform:scale(1.06); }
.page-power.lider-empate .pp-num{ opacity:.7; }

.pp-meio{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:78px; }
.pp-nota{
  font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); white-space:nowrap;
  max-width:12ch; overflow:hidden; text-overflow:ellipsis;
}
.page-power.lider-you .pp-nota{ color:var(--violet); }
.page-power.lider-bot .pp-nota{ color:var(--gold-strong); }
.pp-barra{
  width:100%; height:5px; border-radius:3px; overflow:hidden;
  background:var(--gold-strong); display:block;
}
.pp-barra i{
  display:block; height:100%; background:var(--violet-soft);
  margin-left:auto;
  transition:width .3s cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce){
  .pp-num, .pp-barra i{ transition:none; }
}
.page-divider{ height:1px; background:var(--rule); margin:2px 0; }

/* ---- Cenário anexado à Página ---- */
.scenario-slot{
  font-family:var(--mono); font-size:.64rem; text-align:center;
  padding:3px 8px; border-radius:20px; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.scenario-slot.empty{
  border:1.5px dashed var(--rule); color:var(--rule); background:transparent;
}
.scenario-slot.chip{
  border:2px solid var(--aspect-color, var(--violet-soft));
  color:var(--ink); background:var(--paper-raised); cursor:help;
}
.scenario-slot.bot-side{ margin-bottom:2px; }
.scenario-slot.you-side{ margin-top:2px; }

.artifact-count{
  font-family:var(--mono); font-size:.66rem; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:20px; padding:1px 7px;
}
.artifact-count.full{ color:var(--gold-strong); border-color:var(--gold-strong); font-weight:600; }

.board-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; align-items:stretch; }
.board-slot{ min-height:80px; border:1.5px dashed var(--rule); border-radius:6px; transition:border-color .15s ease, background .15s ease; }
.board-card{
  min-height:80px; border:3px solid var(--aspect-color); border-radius:6px; padding:5px;
  background:var(--paper-raised); display:flex; flex-direction:column; gap:3px;
  position:relative; overflow:hidden;
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, outline-color .15s ease,
    background-color .5s ease, border-color .5s ease;
}
@media (prefers-reduced-motion: no-preference){
  .board-card:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 8px 16px -8px rgba(30,27,39,.35); z-index:3; }
}
.board-card.targetable{ outline:2px solid var(--bad); outline-offset:1px; cursor:pointer; }
.board-card.attach-highlight{
  outline:2px solid var(--gold-strong); outline-offset:1px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}
.bc-top{ display:flex; align-items:center; gap:4px; }
.bc-pip{ width:17px; height:17px; font-size:.6rem; flex-shrink:0; }
.bc-name{ font-family:var(--serif-display); font-weight:600; font-size:.64rem; line-height:1.1; flex-grow:1; }
.bc-meta{ font-family:var(--mono); font-size:.54rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; }
.bc-text{ font-size:.62rem; line-height:1.3; color:var(--ink); }

/* Personagem ferido */
.board-card.damaged{
  background:color-mix(in srgb, var(--bad) 9%, var(--paper-raised));
}

/* Selos de modificador: Proteção, Frágil, Token, dano acumulado…
   Cada um abre as próprias fontes ao passar o mouse. */
.bc-badges{ display:flex; flex-wrap:wrap; gap:3px; margin-top:auto; padding-top:3px; }
.bc-badge{
  font-family:var(--mono); font-size:.53rem; font-weight:600; line-height:1.5;
  padding:0 5px; border-radius:20px; cursor:help;
  border:1px solid currentColor;
  white-space:nowrap;
  transition:background-color .15s ease;
}
.bc-badge.good{ color:var(--good); }
.bc-badge.bad{ color:var(--bad); }
.bc-badge.neutral{ color:var(--ink-soft); }
.bc-badge:hover{ background:color-mix(in srgb, currentColor 14%, transparent); }

.pip.power[data-power-uid]{ cursor:help; font-weight:800; transition:color .15s ease, border-color .15s ease; }
.pip.power.power-up{ color:var(--good); border-color:var(--good); }
.pip.power.power-down{ color:var(--bad); border-color:var(--bad); }

/* ---- painel de detalhamento de poder ---- */
.power-breakdown{
  position:fixed; z-index:150; pointer-events:none;
  background:var(--paper-raised); border:1px solid var(--violet-soft); border-radius:10px;
  padding:10px 12px; min-width:190px; font-family:var(--mono); font-size:.72rem;
  box-shadow:0 16px 30px -10px rgba(30,27,39,.45);
  animation:previewIn .12s ease both;
  display:flex; flex-direction:column; gap:4px;
}
.power-breakdown-title{
  font-family:var(--serif-display); font-weight:600; font-size:.82rem; color:var(--ink); margin-bottom:2px;
}
.power-row{ display:flex; justify-content:space-between; gap:14px; color:var(--ink-soft); }
.power-row.total{ border-top:1px dotted var(--rule); padding-top:4px; margin-top:2px; font-weight:700; color:var(--ink); }
.power-none{ color:var(--rule); font-style:italic; }
.power-delta{ font-variant-numeric:tabular-nums; font-weight:700; }
.power-delta.pos{ color:var(--good); }
.power-delta.neg{ color:var(--bad); }
.power-delta.base{ color:var(--ink-soft); }

/* ---- áreas de posição (arrastar personagens) ---- */
body.dragging-personagem [data-slot-target]{
  border-color:var(--violet-soft); border-style:solid;
  background:color-mix(in srgb, var(--violet) 6%, var(--paper-card));
}
body.dragging-personagem [data-slot-target].drop-hover{
  border-color:var(--violet); background:color-mix(in srgb, var(--violet) 22%, var(--paper-card));
  transform:scale(1.06);
}

/* ---- zona de soltura: o Livro (eventos, cenários, artefatos) ---- */
body.dragging-target .board{ outline:2px dashed var(--violet-soft); outline-offset:-6px; border-radius:10px; }
body.dragging-target .board.drop-hover{
  outline-color:var(--violet); background:color-mix(in srgb, var(--violet) 6%, transparent);
}

/* ---- destino que a carta arrastada NÃO aceita ---- */
body.dragging .drop-blocked{
  outline:2px dashed var(--bad); outline-offset:-4px; border-radius:10px;
  background:color-mix(in srgb, var(--bad) 8%, transparent);
}

/* ---- reordenar a mão: a carta sob o cursor abre espaço ---- */
body.dragging .hand-card.drop-hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 0 0 2px var(--violet), 0 14px 26px -12px rgba(30,27,39,.45);
}

/* ---- carta fantasma seguindo o cursor ---- */
/* Seletor com as DUAS classes de propósito: o fantasma também é .hand-card, e a regra
   .hand-card{position:relative} mais abaixo empataria em especificidade e venceria por
   vir depois — aí o fantasma parava de seguir o cursor. */
.hand-card.drag-ghost{
  position:fixed; top:0; left:0; z-index:200; pointer-events:none;
  transform:translate(-50%,-55%) rotate(-6deg);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--violet) 55%, transparent),
             0 20px 34px -10px rgba(30,27,39,.5);
  opacity:.97;
}
.hand-card.dragging-source{ opacity:.35; }
.hand-card.pending{
  outline:2px solid var(--violet); outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent);
}

/* ---- target banner ---- */
.target-banner{
  display:flex; flex-direction:column; gap:9px;
  background:color-mix(in srgb, var(--violet) 15%, var(--paper-raised));
  border:1px solid var(--violet); border-radius:8px; padding:10px 14px;
  font-size:.85rem;
}
.target-banner-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.target-choices{ display:flex; flex-wrap:wrap; gap:6px; }
.target-choice{
  display:inline-flex; align-items:center; gap:6px;
  border:2px solid var(--aspect-color, var(--rule)); border-radius:8px;
  background:var(--paper-card); color:var(--ink);
  font-family:var(--serif-body); font-size:.8rem; padding:4px 10px;
  --aspect-color: var(--rule);
}
.target-choice:hover{ box-shadow:0 0 0 2px color-mix(in srgb, var(--violet) 55%, transparent); }

/* ---- auras: efeitos permanentes ativos ---- */
.chip.aura{
  display:inline-flex; align-items:center; gap:5px;
  border-color:var(--violet-soft); color:var(--ink);
  border-style:solid;
}
.chip.aura[data-card-id], .chip.aura[data-aura-name]{ cursor:help; }

.aura-preview{ min-width:210px; max-width:260px; }
.aura-preview-name{
  font-family:var(--serif-display); font-weight:600; font-size:.86rem;
  color:var(--ink); margin-bottom:4px;
}
.aura-preview-text{ font-family:var(--serif-body); font-size:.78rem; line-height:1.45; color:var(--ink); }
.aura-preview-state{
  margin-top:6px; padding-top:5px; border-top:1px dotted var(--rule);
  font-size:.68rem; color:var(--bad);
}
.chip.aura.avatar{ border-color:var(--gold-strong); }
.chip.aura.buff{ border-color:var(--good); border-style:dashed; }
.chip.aura.cenario{ border-color:var(--violet); }
/* Aura existente mas inativa agora (ex.: Floresta durante a Noite) */
.chip.aura.dormant{ opacity:.45; border-style:dotted; }
.aura-note{
  font-size:.58rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); border-left:1px solid var(--rule); padding-left:5px;
}

/* ---- fichas ---- */
.chip.ficha{
  border-color:var(--ficha-color); color:var(--ficha-color);
  display:inline-flex; align-items:center; gap:4px; font-weight:600;
}
.ficha-glyph{ font-size:.85rem; }

/* ---- artefato ativável ---- */
.chip.artifact.activatable{
  cursor:pointer;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent);
}
.chip.artifact.activatable:hover{ background:color-mix(in srgb, var(--gold) 22%, var(--paper-raised)); }
.artifact-charges{ margin-left:5px; letter-spacing:1px; font-size:.7rem; }

/* ---- escolha do Avatar ---- */
.choice-modal{ width:min(560px, 92vw); }
.choice-options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 20px 20px; }
.choice-option{
  display:flex; flex-direction:column; gap:6px; text-align:left;
  border:2px solid var(--rule); border-radius:11px; padding:15px 16px;
  background:var(--paper-card); color:var(--ink); font-family:var(--serif-body);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.choice-option:hover{
  border-color:var(--violet); transform:translateY(-3px);
  box-shadow:0 12px 24px -12px rgba(30,27,39,.4);
}
.choice-name{ font-family:var(--serif-display); font-weight:600; font-size:1rem; }
.choice-text{ font-size:.85rem; color:var(--ink-soft); line-height:1.45; }
@media (max-width:560px){ .choice-options{ grid-template-columns:1fr; } }

/* ---- hand ---- */
.hand-area{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.hand-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; }
.hand-empty{ font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); padding:20px; }
.hand-card{
  width:150px; min-height:170px; border-radius:10px;
  border:3px solid var(--aspect-color);
  background:var(--paper-card); padding:9px; display:flex; flex-direction:column; gap:6px;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease,
    background-color .5s ease, color .5s ease;
}
.hand-card[data-hand-index]{ cursor:grab; touch-action:none; }
@media (prefers-reduced-motion: no-preference){
  .hand-card[data-hand-index]:hover{
    transform:translateY(-10px) scale(1.04) rotate(-1deg);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--violet) 60%, transparent),
               0 16px 28px -10px rgba(30,27,39,.4);
    z-index:5;
  }
}
@media (prefers-reduced-motion: reduce){
  .hand-card[data-hand-index]:hover{
    box-shadow:0 0 0 2px color-mix(in srgb, var(--violet) 60%, transparent);
  }
}
.hand-card[data-hand-index]:active{ cursor:grabbing; }
.hand-card.disabled{ opacity:.5; }
.hand-card.static{ cursor:default; }

/* Carta jogável a partir do Epílogo: apagada, para não se confundir com a mão. */
.hand-card.do-epilogo{ opacity:.55; border-style:dashed; }
.hand-card.do-epilogo:hover{ opacity:1; }
.hand-card.do-epilogo::after{
  content:'do Epílogo'; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  font-family:var(--mono); font-size:.52rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-raised); background:var(--ink-soft);
  padding:1px 7px; border-radius:20px; white-space:nowrap; pointer-events:none;
}
.hand-card{ position:relative; }

/* ---- revelação da carta jogada ---- */
.revelacao{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.revelacao-caixa{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  border:1px solid var(--rule); border-radius:14px; padding:16px 20px 20px;
  box-shadow:0 20px 50px -20px rgba(30,27,39,.55);
}
.revelacao-quem{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.revelacao.dele .revelacao-quem{ color:var(--gold-strong); }
.revelacao.minha .revelacao-quem{ color:var(--violet-soft); }
.revelacao .hand-card{ transform:scale(1.12); }
@media (prefers-reduced-motion: no-preference){
  .revelacao-caixa{ animation:revelar .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes revelar{ from{ transform:scale(.9); opacity:0; } to{ transform:none; opacity:1; } }
}

/* ---- barra do fim de partida, com o resumo afastado ---- */
.fim-barra{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:80;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--paper-raised); border:1px solid var(--rule); border-top:3px solid var(--violet);
  border-radius:12px; padding:10px 16px;
  font-family:var(--mono); font-size:.74rem; color:var(--ink);
  box-shadow:0 -6px 30px -12px rgba(30,27,39,.45);
}

/* ---- pilhas: Tomo e Epílogo ao lado da mão ---- */
.pile-card{
  width:96px; min-height:170px; border-radius:10px; border:1.5px dashed var(--rule);
  background:color-mix(in srgb, var(--paper) 60%, var(--paper-card));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  flex-shrink:0; align-self:stretch;
  transition:background-color .5s ease, border-color .5s ease;
}
.pile-label{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.pile-count{ font-family:var(--serif-display); font-weight:700; font-size:1.6rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.deck-pile{ border-style:solid; }
.epilogue-pile, .inkwell-pile{ cursor:pointer; transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.epilogue-pile:hover, .inkwell-pile:hover{
  border-color:var(--violet-soft); border-style:solid;
  background:color-mix(in srgb, var(--violet) 8%, var(--paper-card));
  transform:translateY(-4px);
}
.epilogue-pile:hover .pile-count, .inkwell-pile:hover .pile-count{ color:var(--violet-soft); }

/* ---- Tinteiro ---- */
.inkwell-pile{ border-color:var(--gold-strong); }
.inkwell-pile .pile-label{ color:var(--gold-strong); }
.pile-hint{
  font-family:var(--mono); font-size:.55rem; line-height:1.3; text-align:center;
  color:var(--ink-soft); opacity:.75; padding:0 6px;
}
body.dragging-paintable .inkwell-pile{
  border-style:solid; border-color:var(--gold-strong);
  background:color-mix(in srgb, var(--gold) 14%, var(--paper-card));
}
body.dragging-paintable .inkwell-pile.drop-hover{
  background:color-mix(in srgb, var(--gold) 32%, var(--paper-card));
  transform:scale(1.06);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent);
}

/* Carta que só serve para pintar agora (não dá para pagar o Custo dela) */
.hand-card.paint-only{ opacity:.72; border-style:dashed; }
.hand-card.paint-only:hover{ opacity:1; }

/* ---- aviso passageiro ---- */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:220;
  background:var(--paper-raised); color:var(--ink);
  border:1px solid var(--bad); border-radius:10px;
  padding:11px 20px; font-size:.86rem;
  box-shadow:0 14px 30px -10px rgba(30,27,39,.5);
  animation:toastIn .2s ease both;
}
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%, 10px); } to{ opacity:1; transform:translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce){ .toast{ animation:none; } }

.modal-note{
  margin:0; padding:10px 20px 0; font-size:.8rem; font-style:italic; color:var(--ink-soft);
}
.hc-top{ display:flex; gap:6px; }
.pip{
  font-family:var(--mono); font-size:.75rem; font-weight:700; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--rule); background:var(--paper-raised);
}
.pip.cost{ color:var(--violet-soft); border-color:var(--violet-soft); }
.pip.power{ color:var(--gold-strong); border-color:var(--gold-strong); margin-left:auto; }
.hc-name{ font-family:var(--serif-display); font-weight:600; font-size:.85rem; line-height:1.15; }
.hc-cat{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.hc-text{ font-size:.74rem; color:var(--ink); flex-grow:1; }
.hc-rarity{ font-family:var(--mono); font-size:.62rem; color:var(--ink-soft); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.hc-collection{ color:var(--rule); }

.rarity-symbol{ font-size:.9em; }
.rarity-symbol.r-comum{ color:var(--rarity-comum); }
.rarity-symbol.r-superior{ color:var(--rarity-superior); }
.rarity-symbol.r-incrivel{ color:var(--rarity-incrivel); }
.rarity-symbol.r-magnifica{ color:var(--rarity-magnifica); }
.rarity-symbol.r-extraordinaria{ color:var(--rarity-extraordinaria); }

.aspect-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle; }

/* ---- overlay ---- */
.overlay{
  position:fixed; inset:0; background:rgba(20,18,26,.6); z-index:50;
  display:flex; align-items:center; justify-content:center;
}
.overlay-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:32px 36px; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center;
}
.overlay-card h2{ font-family:var(--serif-display); margin:0; }
.overlay-actions{ display:flex; gap:10px; }

/* ---- modal: Epílogo ---- */
.modal-overlay{ align-items:flex-start; padding-top:8vh; }
.modal{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  width:min(760px, 92vw); max-height:78vh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 50px -14px rgba(30,27,39,.5);
}
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--rule);
}
.modal-head h3{ font-family:var(--serif-display); margin:0; font-size:1.1rem; }
.modal-cards{
  padding:18px 20px; overflow-y:auto; display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start;
}
.modal-empty{ font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); padding:20px; }

/* ---- pop-up de pontuação ---- */
.score-overlay{ background:rgba(20,18,26,.45); }
.score-popup{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:26px 30px; width:min(380px, 90vw);
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 24px 50px -14px rgba(30,27,39,.5);
  animation:popupIn .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes popupIn{ from{ opacity:0; transform:scale(.92) translateY(6px); } to{ opacity:1; transform:scale(1) translateY(0); } }
.score-popup-eyebrow{
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gold-strong); text-align:center; margin-bottom:4px;
}
.score-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.86rem; }
.score-page-name{ font-family:var(--serif-display); font-weight:600; }
.score-nums{ font-family:var(--mono); font-size:.78rem; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.score-nums em{ font-style:normal; color:var(--rule); }
.score-badge{
  display:inline-block; font-family:var(--mono); font-weight:700; font-size:.68rem; white-space:nowrap;
  padding:3px 9px; border-radius:20px;
  animation:scorePop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.score-badge.p1{ background:color-mix(in srgb, var(--violet) 22%, var(--paper-raised)); color:var(--violet); }
.score-badge.bot{ background:color-mix(in srgb, var(--gold) 25%, var(--paper-raised)); color:var(--gold-strong); }
.score-badge.tie{ background:var(--paper-card); color:var(--ink-soft); animation:none; }
@keyframes scorePop{ 0%{ transform:scale(.3); opacity:0; } 60%{ transform:scale(1.25); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
.score-bonus{
  display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  font-size:.8rem; color:var(--ink-soft); border-top:1px dotted var(--rule); padding-top:8px;
}
.score-total{
  text-align:center; font-family:var(--mono); font-weight:600; font-size:.88rem;
  border-top:1px solid var(--rule); padding-top:10px; margin-top:2px;
}
.score-total em{ font-style:normal; color:var(--rule); }
@media (prefers-reduced-motion: reduce){
  .score-popup{ animation:none; }
  .score-badge{ animation:none; }
}

/* ---- lobby ---- */
.lobby{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.lobby-inner{ max-width:720px; text-align:center; }
.lobby-eyebrow{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-strong); margin:0 0 12px;
}
.lobby-title{ font-family:var(--serif-display); font-size:clamp(2rem,5vw,2.8rem); font-weight:600; margin:0; text-wrap:balance; }
.lobby-sub{ color:var(--ink-soft); font-size:1rem; margin:14px 0 36px; }
.lobby-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.lobby-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:var(--paper-card); border:1px solid var(--rule); border-radius:14px; padding:28px 18px;
  font-family:var(--serif-body); color:var(--ink);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease;
}
.lobby-card:hover{
  transform:translateY(-6px); border-color:var(--violet);
  box-shadow:0 18px 32px -14px rgba(30,27,39,.35);
}
.lobby-card-icon{ font-size:1.6rem; color:var(--violet-soft); }
.lobby-card-title{ font-family:var(--serif-display); font-weight:600; font-size:1.1rem; }
.lobby-card-desc{ font-size:.82rem; color:var(--ink-soft); line-height:1.4; }
.lobby-card.soon{ opacity:.85; }
.lobby-card-badge{
  position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:.6rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--gold-strong);
  border:1px solid var(--gold-strong); border-radius:20px; padding:2px 8px;
}
.lobby-note{
  margin-top:24px; font-size:.82rem; color:var(--ink-soft); font-style:italic;
}
.lobby-card.locked{ opacity:.55; cursor:not-allowed; }
.lobby-card.locked:hover{ transform:none; border-color:var(--rule); box-shadow:none; }
.lobby-note.aviso{ color:var(--danger, #b4453c); font-style:normal; }

/* ---- preparar partida ---- */
.preparo-inner{ max-width:860px; }
.preparo-cols{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:30px; text-align:left; }
@media (min-width:760px){ .preparo-cols{ grid-template-columns:1fr 1fr; gap:34px; } }
.preparo-titulo{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-strong); margin:0 0 12px;
}
.preparo-lista{ display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow-y:auto; }
.preparo-op{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
  background:var(--paper-card); border:1px solid var(--rule); border-radius:10px;
  padding:11px 14px; font-family:var(--serif-body); color:var(--ink);
  transition:border-color .16s ease, background-color .16s ease;
}
.preparo-op:hover{ border-color:var(--violet); }
.preparo-op.on{ border-color:var(--violet); background:color-mix(in srgb, var(--violet) 12%, var(--paper-card)); }
.preparo-nome{ font-family:var(--serif-display); font-weight:600; font-size:.98rem; }
.preparo-sub{ font-family:var(--mono); font-size:.66rem; color:var(--ink-soft); }
.preparo-op[disabled]{ cursor:default; }
.preparo-op.travado{ opacity:.55; }
.preparo-op.travado.on{ opacity:1; }

/* ---- Aspectos do Tomo, sempre à vista na hora de escolher ---- */
.aspectos{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.aspecto-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid color-mix(in srgb, var(--aspect-color, var(--rule)) 55%, transparent);
  background:color-mix(in srgb, var(--aspect-color, var(--rule)) 12%, transparent);
  color:var(--ink); border-radius:20px; padding:2px 8px 3px;
}
.aspecto-chip i{
  width:7px; height:7px; border-radius:50%; background:var(--aspect-color, var(--ink-soft));
}
.aspecto-chip.neutro{ color:var(--ink-soft); border-color:var(--rule); background:transparent; }

/* ---- mulligan ---- */
.modal.mulligan .modal-cards{ justify-content:center; }
.modal.mulligan .hand-card{ cursor:pointer; transition:opacity .15s ease, transform .15s ease; }
.modal.mulligan .hand-card.trocar{
  opacity:.42; transform:translateY(6px) scale(.96);
  outline:2px dashed var(--bad); outline-offset:2px;
}
.modal.mulligan .hand-card.disabled{ opacity:.75; cursor:not-allowed; }

/* ---- Coleção: o que a conta possui ---- */
.builder-count-badge .de-quantas{ color:var(--ink-soft); font-weight:400; font-size:.82em; }
.builder-card.nao-tenho{ opacity:.45; }
.builder-card.nao-tenho:hover{ opacity:.75; }

/* ---- tela de login ---- */
.login-inner{ max-width:420px; }
.login-abas{
  display:flex; gap:6px; margin:22px 0 18px;
  background:var(--paper-card); border:1px solid var(--rule); border-radius:11px; padding:4px;
}
.login-aba{
  flex:1; padding:9px 12px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--ink-soft);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .16s ease, color .16s ease;
}
.login-aba:hover{ color:var(--ink); }
.login-aba.on{ background:var(--paper-raised); color:var(--violet-soft); box-shadow:0 1px 6px -3px rgba(30,27,39,.4); }
.login-form{ display:flex; flex-direction:column; gap:14px; text-align:left; }
/* Duas classes de propósito: `.campo input{width:190px}`, mais abaixo, empata em
   especificidade e venceria por vir depois. */
.login-form .campo{ width:100%; }
.login-form .campo input{ width:100%; box-sizing:border-box; }
.login-enviar{ margin-top:6px; width:100%; justify-content:center; }
.login-erro{
  margin:0; padding:9px 12px; border-radius:9px;
  background:color-mix(in srgb, var(--bad) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  color:var(--bad); font-size:.84rem;
}
.login .lobby-note{ margin-top:18px; }

/* ---- identificação da conta no lobby ---- */
.conta-barra{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:22px; padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.conta-nome{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); }
.conta-nome strong{ color:var(--violet-soft); font-weight:600; }

/* ---- relógio de decisão ---- */
.relogio{
  position:fixed; top:5px; left:50%; transform:translateX(-50%); z-index:130;
  display:flex; align-items:baseline; gap:8px;
  background:var(--paper-raised); border:1px solid var(--rule);
  border-radius:20px; padding:5px 14px 6px;
  box-shadow:0 8px 20px -14px rgba(30,27,39,.5);
  pointer-events:none;
}
.relogio-rot{
  font-family:var(--mono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
}
.relogio-num{
  font-family:var(--mono); font-weight:700; font-size:1.5rem; font-variant-numeric:tabular-nums;
  color:var(--violet-soft); line-height:1;
}
.relogio.urgente{ border-color:var(--bad); }
.relogio.urgente .relogio-num{ color:var(--bad); }
@media (prefers-reduced-motion: no-preference){
  .relogio.urgente .relogio-num{ animation:relogioPulsa 1s ease-in-out infinite; }
  @keyframes relogioPulsa{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }
}

/* ---- tutorial ---- */
.tutorial-card{ padding-top:34px; }
.tutorial-num{
  position:absolute; top:10px; left:12px;
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  color:var(--violet-soft); border:1px solid var(--violet-soft);
  border-radius:50%; width:22px; height:22px; line-height:20px; text-align:center;
}
.lobby-card-badge.feito{ color:var(--good); border-color:var(--good); }

/* O painel fica ACIMA do véu dos modais: durante o Tutorial, a instrução precisa
   continuar legível mesmo com a janela de escolha do Avatar aberta. */
/* ---- caixa de fala do Narrador ---- */
/* Fica no rodapé, no meio da tela, acima de tudo — inclusive do véu dos modais,
   porque durante o Tutorial é ela que conduz a partida. */
.narrador{
  position:fixed; z-index:70; display:flex; pointer-events:none;
}
.narrador-caixa{
  pointer-events:auto;
  background:var(--paper-raised); border:1px solid var(--rule);
  border-top:3px solid var(--violet); border-radius:12px;
  box-shadow:0 -6px 30px -12px rgba(30,27,39,.45);
  display:flex; flex-direction:column;
  transition:border-color .25s ease;
}

/* GRANDE — o Narrador está falando; o jogador só lê e segue */
.narrador.grande{ inset:auto 0 0 0; justify-content:center; padding:0 14px 14px; }
.narrador.grande .narrador-caixa{
  width:min(900px,100%); min-height:224px; padding:24px 34px 26px; gap:16px;
}
.narrador.grande .narrador-fala{ font-size:1.16rem; line-height:1.62; }
.narrador.grande .narrador-nome{ font-size:.7rem; }

/* COMPACTO — ele está esperando uma ação. Flutua por cima do que não interessa ao
   passo, e cada passo escolhe o canto que deixa livre o que o jogador precisa ver. */
.narrador.compacto{ inset:66px 14px auto auto; justify-content:flex-end; }
.narrador.compacto.pos-esquerda{ inset:66px auto auto 14px; justify-content:flex-start; }
.narrador.compacto.pos-baixo-direita{ inset:auto 14px 14px auto; justify-content:flex-end; }
.narrador.compacto.pos-baixo-esquerda{ inset:auto auto 14px 14px; justify-content:flex-start; }
.narrador.compacto .narrador-caixa{
  width:400px; min-height:224px; max-height:62vh; padding:16px 20px 17px; gap:10px;
  box-shadow:0 10px 26px -14px rgba(30,27,39,.5);
}
.narrador.compacto .narrador-fala{ font-size:1rem; line-height:1.55; max-height:38vh; overflow-y:auto; }
.narrador.compacto .narrador-nome{ font-size:.64rem; }
.narrador.compacto .narrador-parte{ display:none; }
.narrador.compacto .narrador-acoes{ margin-top:2px; }
.narrador.bronca .narrador-caixa{ border-top-color:var(--bad); }

.narrador-nome{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet-soft);
}
.narrador.bronca .narrador-nome{ color:var(--bad); }
.narrador-parte{ color:var(--ink-soft); letter-spacing:.06em; }
.narrador-passos{ display:flex; gap:3px; margin-left:auto; }
.narrador-passos i{ width:12px; height:3px; border-radius:2px; background:var(--rule); }
.narrador-passos i.feito{ background:var(--violet-soft); }
.narrador-passos i.atual{ background:var(--gold-strong); }

.narrador-fala{
  margin:0; font-family:var(--serif-body); font-size:.9rem; line-height:1.5; color:var(--ink);
  max-height:5.2em; overflow-y:auto;
  text-wrap:pretty;
}
.narrador-fala strong{ color:var(--violet); font-weight:600; }
.narrador.bronca .narrador-fala{ font-style:italic; }
.narrador-dica{
  margin:0; font-size:.78rem; color:var(--ink-soft); font-style:italic;
  border-left:2px solid var(--gold); padding-left:9px;
}
.narrador-acoes{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.narrador-espera{
  font-family:var(--mono); font-size:.68rem; color:var(--gold-strong); line-height:1.4;
}
.narrador-seta{ font-size:.85em; }

@media (prefers-reduced-motion: no-preference){
  .narrador-espera::after{ content:'▾'; margin-left:5px; animation:narradorPisca 1.4s ease-in-out infinite; }
  @keyframes narradorPisca{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
}

/* Durante o arraste o Narrador some de vista: numa janela baixa ele podia ficar entre
   a carta e a área onde ela precisa ser solta. */
/* a caixa reativa os eventos para si (`pointer-events:auto`), então precisa ser
   desligada explicitamente — senão ela engoliria o drop feito por cima dela */
body.dragging .narrador,
body.dragging .narrador-caixa{ opacity:.12; pointer-events:none; }
.narrador{ transition:opacity .15s ease; }

/* espaço no rodapé para a caixa não cobrir a mão */
/* Só a caixa grande fica no rodapé: aí o tabuleiro recua para não ficar embaixo dela.
   Com a compacta (flutuando num canto) o tabuleiro usa a tela inteira. */
body.tutorial-mode.narrador-grande .main{ padding-bottom:300px; }
body.tutorial-mode .log-panel{ height:calc(100vh - 57px); }

/* opção que o passo atual do Tutorial não aceita */
.choice-option.travada{ opacity:.4; }

/* o alvo do passo atual pisca de leve, para o jogador achar na tela */
.tutorial-foco{
  outline:2px solid var(--gold-strong) !important; outline-offset:3px; border-radius:8px;
  animation:tutorialPulse 1.8s ease-in-out infinite;
}
@keyframes tutorialPulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
  50%{ box-shadow:0 0 0 7px color-mix(in srgb, var(--gold) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .tutorial-foco{ animation:none; } }

/* Destaque em alvo miúdo — a bolinha de Tinta exigida, uma palavra-chave no texto.
   O contorno de 3px de folga engoliria um elemento desse tamanho, então aqui ele
   se cola ao conteúdo e o fundo é que marca. */
.pip.ink-req.tutorial-foco,
.kw.tutorial-foco{
  outline-offset:1px !important; border-radius:4px;
  background:color-mix(in srgb, var(--gold) 34%, transparent);
}
.kw.tutorial-foco{ padding:0 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* espaços válidos para a carta que o passo está pedindo */
.board-slot.tutorial-espaco{
  border-color:var(--gold-strong); border-style:solid;
  background:color-mix(in srgb, var(--gold) 14%, var(--paper-card));
  animation:tutorialEspaco 1.8s ease-in-out infinite;
}
@keyframes tutorialEspaco{
  0%,100%{ box-shadow:inset 0 0 0 0 color-mix(in srgb, var(--gold) 40%, transparent); }
  50%{ box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .board-slot.tutorial-espaco{ animation:none; } }

/* campos de texto do lobby (nome e código) */
.lobby-online{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.campo{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.campo > span{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.campo input{
  background:var(--paper-card); border:1px solid var(--rule); border-radius:8px;
  padding:9px 12px; font-family:var(--serif-body); font-size:.92rem; color:var(--ink);
  width:190px; transition:border-color .18s ease;
}
.campo input:focus{ outline:none; border-color:var(--violet); }
#codigo-sala{ font-family:var(--mono); letter-spacing:.28em; text-transform:uppercase; width:130px; }

/* ---- sala ---- */
.room-inner{ max-width:560px; }
.room-code{
  font-family:var(--mono); font-size:clamp(2.2rem,7vw,3.2rem); font-weight:600; letter-spacing:.3em;
  color:var(--gold-strong); margin:18px 0 6px; padding-left:.3em; /* compensa o espaçamento final */
}
.seats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:30px 0 6px; }
.seat{
  display:flex; flex-direction:column; gap:6px; align-items:center;
  background:var(--paper-card); border:1px solid var(--rule); border-radius:12px; padding:18px 14px;
}
.seat.eu{ border-color:var(--violet); }
.seat.vazio{ border-style:dashed; opacity:.6; }
.seat.pronto{ border-color:var(--gold-strong); background:color-mix(in srgb, var(--gold-strong) 8%, var(--paper-card)); }
.seat-label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.seat-name{ font-family:var(--serif-display); font-size:1.05rem; font-weight:600; }
.seat-ready{ font-size:.74rem; color:var(--ink-soft); font-style:italic; }
.seat-ready.ok{ color:var(--gold-strong); font-style:normal; }
.sala-tomos{ margin-top:26px; text-align:left; }
.sala-tomos .preparo-lista{ max-height:34vh; }
.room-deck{ font-size:.85rem; color:var(--ink-soft); margin:20px 0 0; }
.room-deck.aviso{ color:var(--danger, #b4453c); }
.room-actions{ margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- construtor de baralho ---- */
.builder-meters{ display:flex; align-items:center; gap:16px; margin-left:auto; flex-wrap:wrap; }
.builder-count{
  font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.builder-count.ok{ color:var(--good); font-weight:600; }

/* ---- medidor de Conhecimento ---- */
.lore-glyph{ color:var(--rarity-incrivel); }
.builder-lore-meter{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.builder-lore-nums{ font-weight:600; }
.lore-bar{
  display:inline-block; width:90px; height:6px; border-radius:4px;
  background:var(--rule); overflow:hidden;
}
.lore-bar-fill{
  display:block; height:100%; background:var(--rarity-incrivel);
  transition:width .2s ease, background-color .2s ease;
}
.builder-lore-meter.over{ color:var(--bad); }
.builder-lore-meter.over .lore-glyph{ color:var(--bad); }
.builder-lore-meter.over .lore-bar-fill{ background:var(--bad); }

.builder-warning{
  margin:0 20px; padding:10px 14px; border-radius:8px;
  border:1px solid var(--bad); background:color-mix(in srgb, var(--bad) 12%, var(--paper-raised));
  font-size:.85rem;
}

.avatar-lore{
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.builder-lore{
  font-family:var(--mono); font-size:.7rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums;
}
.builder-lore.free{ opacity:.55; }
.builder-lore-sub{ color:var(--rule); }
.builder-layout{ display:flex; gap:20px; padding:18px 20px 40px; align-items:flex-start; }

/* ---- painel direito: o Baralho em construção ---- */
.deck-panel{
  width:290px; flex-shrink:0; order:2;
  position:sticky; top:70px; max-height:calc(100vh - 90px);
  display:flex; flex-direction:column; gap:10px;
  border:2px solid var(--rule); border-radius:12px; background:var(--paper-card);
  padding:12px; overflow-y:auto;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.deck-panel-head{ display:flex; align-items:center; }
.deck-panel-title{ font-family:var(--serif-display); font-size:1rem; margin:0; }
.deck-panel-hint{ font-size:.8rem; color:var(--ink-soft); margin:0; line-height:1.45; }
.deck-avatar-picker{ display:flex; flex-direction:column; gap:10px; }

.deck-avatar-row{
  display:flex; align-items:center; gap:8px; cursor:grab;
  border:2px solid var(--violet); border-radius:10px; padding:9px 10px;
  background:color-mix(in srgb, var(--violet) 10%, var(--paper-raised));
}
.deck-avatar-row:active{ cursor:grabbing; }
.dar-main{ flex:1; min-width:0; }
.dar-name{ font-family:var(--serif-display); font-weight:600; font-size:.88rem; line-height:1.2; }
.dar-lore{ font-family:var(--mono); font-size:.66rem; color:var(--ink-soft); margin-top:2px; }
.dar-remove{ padding:1px 8px; font-size:.95rem; line-height:1.2; flex-shrink:0; }

.deck-confirm{
  border:1px solid var(--bad); border-radius:9px; padding:10px;
  background:color-mix(in srgb, var(--bad) 12%, var(--paper-raised));
  font-size:.8rem;
}
.deck-confirm p{ margin:0 0 9px; }
.deck-confirm-actions{ display:flex; gap:7px; justify-content:flex-end; }
.btn.danger{ border-color:var(--bad); color:var(--bad); }
.btn.danger:hover:not(:disabled){ background:var(--bad); color:var(--paper-raised); border-color:var(--bad); }

.deck-panel-meters{
  display:flex; flex-direction:column; gap:5px;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--rule); padding-bottom:9px;
}
.deck-meter{ display:flex; align-items:center; gap:6px; }
.deck-meter.ok{ color:var(--good); font-weight:600; }
.deck-meter.lore.over{ color:var(--bad); }
.deck-meter.lore.over .lore-bar-fill{ background:var(--bad); }

.deck-rows{ display:flex; flex-direction:column; gap:3px; }
.deck-row{
  display:flex; align-items:center; gap:7px; cursor:grab;
  padding:4px 7px; border-radius:6px;
  border-left:4px solid var(--aspect-color, var(--rule));
  background:var(--paper-raised);
  transition:background .12s ease, transform .12s ease;
}
.deck-row:hover{ background:color-mix(in srgb, var(--violet) 12%, var(--paper-raised)); transform:translateX(-2px); }
.deck-row:active{ cursor:grabbing; }
.dr-cost{ width:19px; height:19px; font-size:.66rem; flex-shrink:0; }
.dr-name{
  flex:1; min-width:0; font-size:.78rem; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dr-count{ font-family:var(--mono); font-size:.74rem; font-weight:700; flex-shrink:0; }
.deck-empty{
  font-size:.8rem; color:var(--ink-soft); text-align:center; line-height:1.5;
  border:1.5px dashed var(--rule); border-radius:9px; padding:22px 12px; margin:0;
}

/* ---- painel de Tomos (tela Coleção) ---- */
.tomos-panel{ gap:12px; }
.tomos-count{
  margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:20px; padding:1px 8px;
}
.tomo-new{ width:100%; }
.tomo-rows{ display:flex; flex-direction:column; gap:7px; }
.tomo-row{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  border:2px solid var(--rule); border-radius:9px; padding:9px 10px;
  background:var(--paper-raised);
  transition:border-color .12s ease, background .12s ease;
}
.tomo-row:hover{ border-color:var(--violet-soft); }
.tomo-row.draft{ cursor:default; border-style:dashed; }
.tomo-row.draft .tomo-name{ color:var(--ink-soft); }
.tomo-row.active{
  border-color:var(--violet);
  background:color-mix(in srgb, var(--violet) 12%, var(--paper-raised));
}
.tomo-main{ flex:1; min-width:0; }
.tomo-name{
  font-family:var(--serif-display); font-weight:600; font-size:.88rem; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tomo-meta{
  font-family:var(--mono); font-size:.65rem; color:var(--ink-soft); margin-top:3px;
  display:flex; align-items:center; gap:6px;
}
.tomo-count{ font-weight:700; font-variant-numeric:tabular-nums; }
.tomo-count.ok{ color:var(--good); }
.tomo-count.wip{ color:var(--gold-strong); }
.tomo-actions{ display:flex; gap:4px; flex-shrink:0; }
.tomo-actions .btn{ padding:2px 8px; font-size:.8rem; line-height:1.3; }
.tomo-row.deleting{
  flex-direction:column; align-items:stretch; gap:8px; cursor:default;
  border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, var(--paper-raised));
}
.tomo-del-msg{ margin:0; font-size:.8rem; }
.tomo-del-actions{ display:flex; gap:6px; justify-content:flex-end; }
.precon-block{
  display:flex; flex-direction:column; gap:7px;
  border-top:1px solid var(--rule); padding-top:11px;
}
.precon-head{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.precon-row{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  border:1.5px dashed var(--rule); border-radius:9px; padding:9px 11px;
  background:transparent; font-family:var(--serif-body); color:var(--ink);
  transition:border-color .12s ease, background .12s ease;
}
.precon-row:hover{ border-color:var(--gold-strong); background:color-mix(in srgb, var(--gold) 8%, transparent); }
.precon-name{ font-family:var(--serif-display); font-weight:600; font-size:.86rem; }
.precon-meta{ font-family:var(--mono); font-size:.62rem; color:var(--ink-soft); }
.precon-flavor{ font-size:.72rem; color:var(--ink-soft); font-style:italic; line-height:1.4; }
.precon-cta{
  font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gold-strong); align-self:flex-end;
}

.tomos-hint{
  font-size:.72rem; color:var(--ink-soft); line-height:1.45; margin:0;
  border-top:1px solid var(--rule); padding-top:9px;
}

/* Carta do catálogo: só leitura, sem os botões +/− */
.catalog-card{ cursor:default; }
.catalog-foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding-top:4px;
}
.catalog-aspect{
  font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--aspect-color); border:1px solid var(--aspect-color); border-radius:20px; padding:1px 7px;
}
.catalog-aspects{ display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-end; }

/* ---- Avatar como carta na Coleção ---- */
.avatar-catalog-card{ background:color-mix(in srgb, var(--violet) 5%, var(--paper-card)); }
.avatar-badge{
  font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--violet); border:1px solid var(--violet); border-radius:20px; padding:1px 8px;
}
.avatar-catalog-card .hc-top{ align-items:center; justify-content:space-between; }
.avatar-effect{ flex-grow:0; }
.catalog-flavor{ font-size:.68rem; flex-grow:1; }

.deck-name-input{
  font-family:var(--serif-display); font-weight:600; font-size:.95rem;
  background:var(--paper-card); color:var(--ink);
  border:1.5px solid var(--rule); border-radius:8px; padding:5px 10px;
  min-width:150px; max-width:230px;
}
.deck-name-input:focus{ outline:none; border-color:var(--violet); }

/* ---- arrastar no construtor ---- */
body.bd-dragging, body.bd-dragging *{ cursor:grabbing !important; user-select:none; }
.bd-dragging-source{ opacity:.4; }

body.bd-adding .deck-panel{ border-style:dashed; border-color:var(--violet-soft); }
.deck-panel.bd-drop-active{
  border-style:solid; border-color:var(--violet);
  background:color-mix(in srgb, var(--violet) 10%, var(--paper-card));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent);
}
/* Ao arrastar para REMOVER, a lista acende em vermelho quando o ponteiro sai dela */
body.bd-removing.bd-will-drop .deck-panel{
  border-color:var(--bad); border-style:dashed;
}

.builder-drag-ghost{
  position:fixed; top:0; left:0; z-index:200; pointer-events:none;
  transform:translate(-50%,-140%);
  display:flex; align-items:center; gap:7px;
  border:2px solid var(--aspect-color, var(--violet)); border-radius:8px;
  background:var(--paper-raised); padding:6px 10px;
  box-shadow:0 14px 26px -8px rgba(30,27,39,.5);
  font-size:.78rem; white-space:nowrap;
}
.bd-ghost-name{ font-family:var(--serif-display); font-weight:600; }
.bd-ghost-tag{
  font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); border-left:1px solid var(--rule); padding-left:7px;
}
.builder-drag-ghost.remove .bd-ghost-tag,
.builder-drag-ghost.remove-avatar .bd-ghost-tag{ color:var(--bad); }

.builder-card.draggable{ cursor:grab; }
.builder-card.draggable:active{ cursor:grabbing; }

.builder-avatars{
  width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:12px;
  position:sticky; top:70px;
}
.avatar-card{
  text-align:left; border:1.5px solid var(--rule); border-radius:12px; padding:16px;
  background:var(--paper-card); display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.avatar-card:hover{ border-color:var(--violet-soft); transform:translateY(-2px); }
.avatar-card.selected{
  border-color:var(--violet); box-shadow:0 0 0 3px color-mix(in srgb, var(--violet) 18%, transparent);
  background:color-mix(in srgb, var(--violet) 6%, var(--paper-card));
}
.avatar-name{ font-family:var(--serif-display); font-weight:600; font-size:1rem; }
.avatar-aspects{ font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); }
.avatar-flavor{ font-size:.78rem; font-style:italic; color:var(--ink-soft); line-height:1.4; }

.builder-cards{ flex:1; min-width:0; display:flex; flex-direction:column; gap:26px; }
.builder-hint{
  font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); padding:40px 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}

/* ---- barra de filtros ---- */
.filter-bar{
  border:1px solid var(--rule); border-radius:10px; background:var(--paper-card);
  padding:12px 14px; display:flex; flex-direction:column; gap:9px;
}
.filter-head{ display:flex; align-items:center; gap:12px; }
.filter-title{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft);
}
.filter-count{
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; margin-left:auto;
}
.filter-count.filtered{ color:var(--violet-soft); font-weight:600; }

.filter-row{ display:flex; align-items:flex-start; gap:10px; }
.filter-row-label{
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); width:104px; flex-shrink:0; padding-top:5px;
}
.filter-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.filter-chip{
  font-family:var(--mono); font-size:.7rem;
  display:inline-flex; align-items:center; gap:4px;
  border:1px solid var(--rule); border-radius:20px; padding:3px 10px;
  background:var(--paper-raised); color:var(--ink-soft);
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.filter-chip:hover{ border-color:var(--violet-soft); color:var(--ink); }
.picker-collections{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding-bottom:9px; border-bottom:1px solid var(--rule);
}
.picker-collections .filter-row-label{width:auto; padding-top:0}

.token-badge{
  font-family:var(--mono); font-size:.55rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); border:1px solid var(--rule); border-radius:20px;
  padding:0 6px; vertical-align:middle; font-weight:400;
}

.filter-chip.on{
  border-color:var(--violet); color:var(--violet);
  background:color-mix(in srgb, var(--violet) 16%, var(--paper-raised));
  font-weight:600;
}

@media (max-width: 700px){
  .filter-row{ flex-direction:column; gap:4px; }
  .filter-row-label{ width:auto; padding-top:0; }
}
.builder-group-title{
  font-family:var(--serif-display); font-weight:600; font-size:1.1rem; margin:0 0 12px;
  border-bottom:1px solid var(--rule); padding-bottom:6px;
}
.builder-group-count{ font-family:var(--mono); font-weight:400; font-size:.75rem; color:var(--ink-soft); }
.builder-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.builder-card{
  border:3px solid var(--aspect-color); border-radius:10px; background:var(--paper-card); padding:9px;
  display:flex; flex-direction:column; gap:6px; transition:box-shadow .15s ease, background .15s ease;
}
.builder-card.in-deck{
  background:color-mix(in srgb, var(--violet) 9%, var(--paper-card));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--violet) 55%, transparent);
}
.builder-stepper{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:10px; padding-top:4px;
}
.builder-stepper .btn{ padding:2px 10px; font-size:.85rem; line-height:1.4; }
.builder-count-badge{
  font-family:var(--mono); font-weight:700; font-size:.85rem; min-width:16px; text-align:center;
  font-variant-numeric:tabular-nums;
}

@media (max-width: 900px){
  .builder-layout{ flex-direction:column; }
  .builder-avatars{ width:100%; position:static; flex-direction:row; }
  .deck-panel{ width:100%; position:static; max-height:none; order:0; }
}

@media (max-width: 900px){
  .layout{ flex-direction:column; }
  .log-panel{ width:100%; height:220px; position:static; }
  .board{ grid-template-columns:1fr; }
}