/* Ossuário: sistema visual do Stitch (projeto 10977390548044508680), "Grim Tactile & Neogothic Reliquary".
   Pedra de cripta, ferro batido, ouro velho e sangue seco. Cantos retos. Arte fotorrealista do Flow em assets/. */
:root {
  --void: #070506;
  --granite: #100d0e;
  --soot: #191416;
  --bone: #ddd2b4;
  --bone-dim: #b8a67e;
  --dust: #9c8d73; /* era #7d705c: contraste 4,0 no fundo; agora passa de 5 */
  --blood: #8e0f17;
  --clot: #59090e;
  --hemorrhage: #360508;
  --gold: #a8874a;
  --gold-hi: #d4af37;
  --brass: #634e27;
  --ember: #e5731f;
  --ember-hi: #ff9c42;
  --silver: #a9bccf;
  --up: #8fbf6a;
  --down: #d9534a;
  --filigree: rgba(168, 135, 74, 0.32);
  --filigree-hi: rgba(168, 135, 74, 0.6);
  --serif: 'EB Garamond', Garamond, Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--void); color: var(--bone); font: 400 17px/1.5 var(--serif); -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; overflow-x: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; margin: 0 0 0.4em; letter-spacing: 0.08em; text-transform: uppercase; }
h3 { font-size: 0.82rem; letter-spacing: 0.22em; color: var(--gold); margin-top: 1.6em; display: flex; align-items: center; gap: 0.8em; }
h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--filigree-hi), transparent); }
p { margin: 0 0 0.7em; }
small { color: var(--dust); }
em { font-style: normal; }
.muted { color: var(--dust); }
.up { color: var(--up); }
.down { color: var(--down); }
.lead { font-size: 1.12rem; font-style: italic; color: var(--bone-dim); }
.lore { font-style: italic; color: var(--bone-dim); border-left: 1px solid var(--blood); padding-left: 0.9em; }

/* ---------- Placas de pedra (componente base) ---------- */
.mode, .class-card, .origin, .rcard, .item, .chest, .circle, .enemy, .attr, .statgrid > div, .class-detail, .duel-side, .codex-class, .ritual, .side, .sheet-card, .tchip, .puzzle-hud, .forge-bar, .rank, .slot {
  /* sem backdrop-filter: o fundo animado obrigava a refazer o desfoque de cada placa a cada quadro; a opacidade sobe um pouco para compensar */
  background: linear-gradient(180deg, rgba(25, 20, 22, 0.95), rgba(12, 10, 11, 0.96));
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px var(--filigree), inset 0 1px 0 rgba(221, 210, 180, 0.06), 0 10px 24px rgba(0, 0, 0, 0.6);
}

/* ---------- Cenário ---------- */
.screen { position: relative; min-height: 100dvh; isolation: isolate; }
.scene { position: fixed; inset: -3%; z-index: -2; background: var(--v) center / cover no-repeat, var(--void); } /* parado: o zoom lento da tela inteira custava um quadro novo a cada frame */
@media (min-aspect-ratio: 1/1) { .scene { background-image: var(--h), var(--v); } }
.scene::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(ellipse 85% 70% at 50% 45%, rgba(7, 5, 6, 0.15), rgba(7, 5, 6, 0.88) 100%),
  linear-gradient(180deg, rgba(7, 5, 6, 0.55), rgba(7, 5, 6, 0.25) 30%, rgba(7, 5, 6, 0.75)); }
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.7; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.035; /* mistura normal: sem passada de blend na tela inteira */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Botões e campos ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.75em 1.6em; min-height: 46px; border: 1px solid #000; cursor: pointer; border-radius: 0;
  background: linear-gradient(180deg, #221c1e, #141012); color: var(--bone); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--filigree-hi), 0 6px 14px rgba(0, 0, 0, 0.7); transition: box-shadow 0.2s, transform 0.08s, filter 0.2s; }
.btn:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 0 18px rgba(168, 135, 74, 0.25), 0 6px 14px rgba(0, 0, 0, 0.7); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px var(--ember); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.6); }
.btn.primary { background: linear-gradient(180deg, var(--blood), var(--clot) 70%, var(--hemorrhage)); color: #f5e9d4;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 200, 190, 0.18), 0 0 22px rgba(142, 15, 23, 0.45), 0 8px 16px rgba(0, 0, 0, 0.8); }
.btn.primary::before, .btn.primary::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: radial-gradient(circle at 35% 35%, var(--gold-hi), var(--brass)); transform: rotate(45deg); }
.btn.primary::before { left: 9px; } .btn.primary::after { right: 9px; }
.btn.primary:hover { filter: brightness(1.15); }
.btn.ghost { background: rgba(7, 5, 6, 0.55); }
.btn.small { padding: 0.4em 0.9em; min-height: 36px; font-size: 0.76rem; letter-spacing: 0.16em; }
.btn.danger { color: #e8a39b; }
:focus-visible { outline: 1px solid var(--ember); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8em; margin: 1.6em 0 0.5em; }
.actions.col { flex-direction: column; align-items: stretch; width: min(360px, 100%); }
.link { color: var(--ember); font-size: 0.95rem; }
.field { display: grid; gap: 0.35em; margin: 0.8em 0; width: 100%; }
.field span { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.field input:not([type=range]) { background: rgba(7, 5, 6, 0.85); border: 1px solid #000; box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px var(--filigree); padding: 0.65em 0.9em; font-size: 1.15rem; border-radius: 0; }
input[type=range] { accent-color: var(--blood); width: 100%; }
.opts { display: flex; flex-wrap: wrap; gap: 0.4em; }
.opt { padding: 0.45em 0.9em; border: 1px solid #000; background: rgba(16, 13, 14, 0.85); box-shadow: inset 0 0 0 1px var(--filigree); cursor: pointer; border-radius: 0; font-size: 0.98rem; }
.opt.on { box-shadow: inset 0 0 0 1px var(--ember), 0 0 14px rgba(229, 115, 31, 0.25); color: #fff; background: rgba(60, 22, 8, 0.6); }
.opt:disabled { opacity: 0.4; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; background: var(--granite); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree-hi); padding: 0.7em 1.3em; z-index: 60; transition: 0.3s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Estrutura ---------- */
.topbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8em; padding: 0.6em 16px; background: linear-gradient(rgba(7, 5, 6, 0.96), rgba(7, 5, 6, 0.75)); border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--filigree); backdrop-filter: blur(6px); }
.topbar h2 { margin: 0; font-size: 0.95rem; text-align: center; letter-spacing: 0.32em; }
.purse { color: var(--gold-hi); font-size: 1rem; white-space: nowrap; letter-spacing: 0.05em; }
.content { max-width: 1120px; margin: 0 auto; padding: 18px 16px 70px; }
section { margin-bottom: 0.8em; }

/* ---------- Título ---------- */
.title-screen { display: grid; place-items: end center; padding: 24px 16px 8vh; }
.title-screen .scene::after { background: linear-gradient(180deg, rgba(7, 5, 6, 0.2), rgba(7, 5, 6, 0.35) 40%, rgba(7, 5, 6, 0.95)); }
.title-block { max-width: 640px; text-align: center; display: grid; justify-items: center; }
.kicker { letter-spacing: 0.5em; text-transform: uppercase; font-size: 0.72rem; color: #c43a41; font-weight: 700; text-shadow: 0 0 12px rgba(142, 15, 23, 0.8); }
.logo { margin: 0 0 0.2em; line-height: 0; width: min(100%, 640px); }
.logo img { width: 100%; height: auto; filter: drop-shadow(0 4px 6px #000) drop-shadow(0 0 28px rgba(142, 15, 23, 0.5)); }

/* ---------- Retratos ---------- */
.pframe { position: relative; aspect-ratio: 3 / 4; background: #000; overflow: hidden; border: 2px solid #0c0a0b;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--filigree-hi), 0 12px 26px rgba(0, 0, 0, 0.75); }
.pframe .portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.pframe::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(168, 135, 74, 0.35), inset 0 -40px 40px -20px rgba(7, 5, 6, 0.85); }
.pframe.hero { width: min(300px, 72vw); }
.pframe.big { width: 120px; flex: none; }
.pframe.sm { width: 48px; flex: none; }
.ctag { display: inline-flex; align-items: center; gap: 0.35em; color: var(--c); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.gem-ico { display: inline-block; width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: -0.3em; filter: drop-shadow(0 1px 2px #000); }
.gem-ico.g-breu { filter: drop-shadow(0 0 3px rgba(170, 100, 255, 0.9)) brightness(1.4); }

/* ---------- Criação e ficha ---------- */
.create, .sheet-page { display: grid; gap: 26px; }
@media (min-width: 900px) { .create, .sheet-page { grid-template-columns: 330px 1fr; } .create-preview { position: sticky; top: 80px; align-self: start; } }
.create-preview { display: grid; justify-items: center; text-align: center; gap: 0.5em; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.statgrid > div { padding: 0.4em; text-align: center; }
.statgrid small { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.16em; }
.statgrid b { font-size: 1.25rem; color: var(--bone); }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.class-card { position: relative; display: grid; justify-items: center; gap: 0.1em; padding: 0.9em 0.4em 0.8em; cursor: pointer; text-align: center; overflow: hidden; }
.class-card .gem-ico { width: 40px; height: 40px; margin-bottom: 0.2em; }
.class-card b { font-size: 0.88rem; letter-spacing: 0.16em; text-transform: uppercase; }
.class-card small { font-size: 0.86rem; font-style: italic; color: var(--bone-dim); }
.class-card.on { box-shadow: inset 0 0 0 1px var(--c), inset 0 0 40px color-mix(in srgb, var(--c) 18%, transparent), 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
.class-card.portrait-card { padding: 0; display: block; aspect-ratio: 3 / 4; }
.class-card.portrait-card > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(0.8) brightness(0.7); transition: filter 0.3s, transform 0.4s; }
.class-card.portrait-card:hover > img, .class-card.portrait-card.on > img { filter: none; transform: scale(1.04); }
.class-card.portrait-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4em 0.5em 0.6em; background: linear-gradient(transparent, rgba(7, 5, 6, 0.96) 55%); display: grid; justify-items: center; }
.class-card.portrait-card .cap .gem-ico { width: 26px; height: 26px; margin: 0; }
.class-detail { padding: 1.1em; margin-top: 10px; }
.faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 520px; }
.face { padding: 0; border: 1px solid #000; background: #000; cursor: pointer; aspect-ratio: 3 / 4; overflow: hidden; box-shadow: inset 0 0 0 1px var(--filigree); }
.face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0.55; transition: 0.25s; }
.face.on { box-shadow: 0 0 0 2px var(--ember), 0 0 18px rgba(229, 115, 31, 0.35); }
.face.on img, .face:hover img { opacity: 1; }
.edges { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; font-size: 0.98rem; margin: 0.4em 0 0.8em; }
.skill-list { list-style: none; padding: 0; margin: 0.4em 0; display: grid; gap: 0.6em; }
.skill-list li { border-left: 1px solid var(--filigree-hi); padding-left: 0.8em; }
.skill-list li b { letter-spacing: 0.06em; }
.skill-list li.locked { opacity: 0.45; }
.origin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.origin { display: grid; gap: 0.25em; text-align: left; padding: 0.8em; cursor: pointer; }
.origin b { letter-spacing: 0.06em; }
.origin.on { box-shadow: inset 0 0 0 1px var(--ember), 0 0 16px rgba(229, 115, 31, 0.2); }
.origin small { font-style: italic; color: var(--bone-dim); }
.origin em { color: var(--up); font-size: 0.88rem; }
.attr-list { display: grid; gap: 5px; }
.attr { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.8em; padding: 0.5em 0.7em; }
.attr small { display: block; font-size: 0.86rem; }
.attr > b { font-size: 1.3rem; min-width: 2.4em; text-align: right; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.slot { display: grid; gap: 0.5em; align-content: start; padding: 0.7em; }
.slot > small { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.76rem; color: var(--gold); }
.picker { margin-top: 1em; }

/* ---------- Santuário ---------- */
.hub-head { display: flex; justify-content: space-between; align-items: baseline; }
.team-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.tchip { display: flex; align-items: center; gap: 0.7em; padding: 6px 14px 6px 6px; }
.tchip span { display: grid; line-height: 1.2; }
.tchip small { font-size: 0.82rem; }
.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.mode { display: grid; gap: 0.3em; align-content: start; text-align: left; padding: 1.1em 1.1em 1em; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.mode:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold), 0 0 20px rgba(168, 135, 74, 0.18), 0 12px 26px rgba(0, 0, 0, 0.7); }
.mode b { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.92rem; }
.mode small { font-size: 0.98rem; color: var(--bone-dim); }
.mode em { font-size: 0.86rem; color: var(--gold-hi); }
.mode .up { color: var(--up); }
.mode.big { position: relative; min-height: 220px; align-content: end; padding: 1.4em; overflow: hidden; background: var(--bg) center 35% / cover; }
.mode.big::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 5, 6, 0.05), rgba(7, 5, 6, 0.94)); }
.mode.big > * { position: relative; }
.mode.big b { font-size: 1.6rem; letter-spacing: 0.12em; }
.mode.big em { font-style: italic; color: var(--bone-dim); font-size: 1.05rem; }

/* ---------- Personagens ---------- */
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.rcard { display: grid; grid-template-columns: 84px 1fr; gap: 0.9em; align-items: center; padding: 10px; }
.rcard.in { box-shadow: inset 0 0 0 1px rgba(196, 30, 42, 0.6), 0 0 18px rgba(142, 15, 23, 0.25); }
.rcard em { font-size: 0.88rem; }
.rcard.new { grid-template-columns: 1fr; text-align: center; min-height: 110px; align-content: center; }
.seal { grid-column: 1 / -1; padding: 0.45em; border: 1px solid #000; background: rgba(7, 5, 6, 0.6); box-shadow: inset 0 0 0 1px var(--filigree); cursor: pointer; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.rcard.in .seal { background: linear-gradient(var(--blood), var(--clot)); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.5); }

/* ---------- Itens ---------- */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.item { display: grid; gap: 0.3em; padding: 0.8em 0.9em; border-left: 2px solid var(--r); }
.item-head b { display: block; color: color-mix(in srgb, var(--r) 70%, #fff); font-size: 1.08rem; line-height: 1.2; }
.item-head small { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.item-stats { display: flex; flex-wrap: wrap; gap: 0.2em 0.9em; font-size: 0.95rem; }
.item-fx { color: #cfa9f2; font-size: 0.95rem; font-style: italic; }
.item-lore { font-style: italic; color: var(--dust); font-size: 0.92rem; }
.item-who { font-size: 0.8rem; color: var(--gold-hi); letter-spacing: 0.06em; }
/* Armeiro e baú de batalha */
.item-req { font-size: 0.8rem; color: var(--dust); letter-spacing: 0.04em; }
.item-no { font-size: 0.85rem; color: var(--dust); font-style: italic; margin: 0.2em 0 0; }
.art-card .item-fx { color: #e3c98a; }
.art-line { color: #e3c98a; font-style: italic; }
.item-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; margin-top: 0.3em; }
.check { display: inline-flex; gap: 0.35em; align-items: center; font-size: 0.92rem; cursor: pointer; }
.check input { accent-color: var(--blood); width: 18px; height: 18px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.tab { padding: 0.45em 1em; border: 1px solid #000; background: rgba(16, 13, 14, 0.85); box-shadow: inset 0 0 0 1px var(--filigree); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.tab.on { box-shadow: inset 0 0 0 1px var(--ember); color: #fff; }
.forge-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.8em; margin-bottom: 12px; font-size: 0.98rem; }
.chests { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.chest { padding: 1.3em; display: grid; gap: 0.6em; }
.chest b { font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- Campanha ---------- */
.circles { display: grid; gap: 12px; }
.circle { position: relative; padding: 1.2em; overflow: hidden; }
.circle.locked { opacity: 0.4; filter: grayscale(0.7); }
.circle h3 { margin: 0; font-size: 1.05rem; letter-spacing: 0.16em; color: var(--bone); }
.circle h3::after { display: none; }
.circle .num { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border: 1px solid #c43a41; color: #c43a41; font-size: 0.8rem; }
.circle .sub { font-style: italic; color: var(--bone-dim); }
.nodes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 0.7em; padding-left: 4px; }
.node { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #000; background: var(--granite); box-shadow: inset 0 0 0 1px var(--filigree); font-weight: 700; }
.node.done { box-shadow: inset 0 0 0 1px var(--up); color: var(--up); }
.node.next { box-shadow: inset 0 0 0 1px var(--ember), 0 0 18px rgba(229, 115, 31, 0.5); color: #fff; animation: pulse 1.8s infinite; }
.node.boss { width: 52px; height: 52px; box-shadow: inset 0 0 0 1px #c43a41, 0 0 14px rgba(142, 15, 23, 0.5); font-size: 1.2rem; }
.node.locked { opacity: 0.35; }
@keyframes pulse { 50% { transform: scale(1.05); } } /* escala em vez de sombra: não repinta a cada quadro */
.enc-title { font-size: 1.5rem; margin-top: 0.4em; letter-spacing: 0.1em; }
.enemy-list { display: grid; gap: 8px; }
.enemy { display: grid; grid-template-columns: 84px 1fr; gap: 0.9em; align-items: center; padding: 8px; }
.enemy small { display: block; font-style: italic; color: var(--bone-dim); }
.hint-edge { font-size: 0.9rem; color: var(--dust); }
.hint-edge.up { color: var(--up); } .hint-edge.down { color: var(--down); }
.rank { display: grid; padding: 1.1em; margin-bottom: 1em; }
.rank b { font-size: 1.8rem; color: var(--gold-hi); letter-spacing: 0.24em; text-transform: uppercase; }
.duel { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 800px) { .duel { grid-template-columns: 1fr 1fr; } }
.duel-side { padding: 0.9em; }
.pick-list { display: grid; gap: 4px; }
.pick-list .opt { text-align: left; display: flex; align-items: center; gap: 0.5em; }
.pick-list .opt.on { box-shadow: inset 0 0 0 1px var(--c), 0 0 12px color-mix(in srgb, var(--c) 25%, transparent); }
.ritual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.ritual { display: grid; justify-items: center; gap: 0.15em; padding: 0.9em 0.4em; text-align: center; }
.ritual b { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; }
.ritual span { color: var(--gold-hi); letter-spacing: 0.15em; }
.ritual.locked { opacity: 0.32; }
.howto { padding-left: 1.1em; display: grid; gap: 0.4em; }
.codex-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.codex-class { display: grid; grid-template-columns: 96px 1fr; gap: 1em; padding: 1em; }
.codex-class h4 { color: var(--c); letter-spacing: 0.14em; }
.codex-class h4 small { display: block; font-style: italic; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--bone-dim); }

/* ---------- Oráculo ---------- */
.oracle-hud { margin: 0.5em 0; letter-spacing: 0.1em; }
.tarot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 540px; }
.card { aspect-ratio: 2 / 3; position: relative; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.card span { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; border: 1px solid #000; backface-visibility: hidden; transition: transform 0.45s; }
.card .back { background: repeating-linear-gradient(45deg, #1c0a0c 0 6px, #110607 6px 12px); box-shadow: inset 0 0 0 5px #0b0405, inset 0 0 0 6px var(--gold); }
.card .face { transform: rotateY(180deg); background: linear-gradient(#e9dfc8, #b7a986); color: #2a0d0f; padding: 4px; text-align: center; box-shadow: inset 0 0 0 4px #e9dfc8, inset 0 0 0 5px var(--blood); }
.card .face i { font-style: normal; font-size: 2rem; }
.card .face b { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.card.up .back { transform: rotateY(180deg); }
.card.up .face { transform: rotateY(0); }

/* ---------- Resultado ---------- */
.result { max-width: 780px; margin: 7vh auto 0; text-align: center; }
.result h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); letter-spacing: 0.16em; color: var(--bone); text-shadow: 0 0 36px rgba(142, 15, 23, 0.7), 0 2px 0 #000; }
.result.lose h1 { color: var(--dust); text-shadow: 0 2px 0 #000; }
.result .items { text-align: left; margin-top: 0.8em; }
.result .actions { justify-content: center; }
.reward-row { display: flex; justify-content: center; gap: 1.6em; font-size: 1.25rem; color: var(--gold-hi); margin: 0.8em 0; letter-spacing: 0.06em; }
.lvlup { color: var(--up); font-weight: 600; }

/* ---------- Batalha ---------- */
.battle-screen { display: grid; grid-template-rows: auto auto auto 1fr auto; min-height: 100dvh; max-width: 640px; margin: 0 auto; padding: 0 8px 8px; gap: 6px; }
.battle-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5em; padding: 8px 0 0; }
.battle-title { display: grid; text-align: center; line-height: 1.25; }
.battle-title strong { letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.85rem; }
.battle-title .round { font-size: 0.88rem; color: var(--dust); font-style: italic; }
.tide { color: #e04a4f; font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; text-shadow: 0 0 10px rgba(196, 30, 42, 0.8); }
.side { padding: 8px; }
.side-head { display: flex; justify-content: space-between; font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dust); margin-bottom: 6px; font-weight: 700; }
.side-name.on { color: var(--ember); text-shadow: 0 0 8px rgba(229, 115, 31, 0.6); }
.side-name.on::before { content: '◆ '; }
.front { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.fcard.active { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; cursor: pointer; }
.fname { font-size: 1rem; line-height: 1.1; letter-spacing: 0.06em; font-weight: 700; }
.fname small { display: block; font-style: italic; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; color: var(--bone-dim); }
.fclass { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin: 2px 0; }
.bar { position: relative; height: 18px; margin-top: 4px; background: linear-gradient(#0a0607, #160c0d); border: 1px solid #000; box-shadow: inset 0 2px 5px #000, 0 0 0 1px var(--filigree); overflow: hidden; }
.bar i, .bar b { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.45s cubic-bezier(.3, .7, .3, 1); }
.bar.hp i { background: linear-gradient(180deg, #d2353c 0%, var(--blood) 35%, var(--clot) 80%, #2a0306); box-shadow: inset -2px 0 3px rgba(255, 180, 170, 0.35), inset 0 1px 0 rgba(255, 190, 180, 0.35); }
.bar.hp b { top: auto; height: 5px; background: linear-gradient(90deg, #cfc4a6, #8b7d5c); box-shadow: 0 0 6px rgba(221, 210, 180, 0.6); }
.bar.carga { height: 9px; }
.bar.carga i { background: linear-gradient(90deg, #3e4c5c, var(--silver) 85%, #fff); box-shadow: 0 0 8px rgba(169, 188, 207, 0.5); }
.bar.xp { width: 100%; }
.bar.xp i { background: linear-gradient(90deg, var(--brass), var(--gold-hi)); }
.bar span { position: relative; z-index: 1; display: block; text-align: center; font-size: 0.7rem; line-height: 16px; text-shadow: 0 1px 2px #000, 0 0 4px #000; letter-spacing: 0.08em; font-weight: 700; }
.bar.carga span { display: none; }
.chips { display: flex; gap: 3px; flex-wrap: wrap; min-height: 4px; margin-top: 4px; }
.chip { font-size: 0.74rem; padding: 0 0.4em; border: 1px solid; line-height: 1.45; background: rgba(7, 5, 6, 0.7); }
.chip.bad { border-color: rgba(217, 83, 74, 0.55); color: #f0a49e; }
.chip.good { border-color: rgba(143, 191, 106, 0.55); color: #c2e6a6; }
.reserves { display: flex; gap: 6px; }
.fcard.mini { width: 52px; position: relative; cursor: pointer; }
.minibars, .minicarga { height: 4px; background: #0a0607; margin-top: 2px; box-shadow: 0 0 0 1px #000; }
.minibars i, .minicarga i { display: block; height: 100%; background: var(--blood); transition: width 0.4s; }
.minicarga i { background: var(--silver); }
.swap { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border: 1px solid #000; background: linear-gradient(#5a2a0c, #2a1206); color: #ffd2a8; cursor: pointer; font-size: 0.85rem; display: grid; place-items: center; padding: 0; box-shadow: 0 0 10px rgba(229, 115, 31, 0.6), inset 0 0 0 1px var(--ember); }
.fcard.dead .pframe { filter: grayscale(1) brightness(0.3) contrast(1.2); }
.fcard.shake { animation: shake 0.35s; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.skills { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; scrollbar-width: thin; }
.skill { position: relative; flex: none; display: grid; text-align: left; min-width: 116px; padding: 6px 10px 6px 34px; border: 1px solid #000; background: linear-gradient(#1e1719, #120e0f); cursor: pointer; line-height: 1.15; opacity: 0.45; box-shadow: inset 0 0 0 1px var(--filigree); }
.skill::before { content: ''; position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c2323a, var(--clot) 70%); box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(0, 0, 0, 0.35); }
.skill.ready { opacity: 1; box-shadow: inset 0 0 0 1px var(--c), 0 0 16px color-mix(in srgb, var(--c) 35%, transparent); }
.skill.ready::before { background: radial-gradient(circle at 35% 35%, #ff6a3a, var(--blood) 70%); box-shadow: 0 0 10px var(--ember), 0 0 0 1px #000; }
.sk-name { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.sk-cost { font-size: 0.78rem; color: var(--silver); }
.sk-who { font-size: 0.74rem; color: var(--dust); font-style: italic; }
.edge-line { text-align: center; }
.edge { border: 1px solid #000; background: rgba(7, 5, 6, 0.8); box-shadow: inset 0 0 0 1px var(--filigree); font-size: 0.78rem; padding: 0.2em 1em; cursor: pointer; letter-spacing: 0.08em; }
.edge.up { color: var(--up); box-shadow: inset 0 0 0 1px rgba(143, 191, 106, 0.45); }
.edge.down { color: var(--down); box-shadow: inset 0 0 0 1px rgba(217, 83, 74, 0.45); }
.board-wrap { position: relative; display: grid; place-items: center; }
.board-host { width: min(100%, calc(100dvh - 410px), 560px); min-width: 280px; }
.board { position: relative; aspect-ratio: 1; touch-action: none; user-select: none; border: 2px solid #0a0809;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(80, 66, 58, 0.25), transparent 60%),
    radial-gradient(ellipse at 70% 85%, rgba(90, 10, 14, 0.22), transparent 55%),
    linear-gradient(135deg, #1c1718, #0c0a0b 60%, #141011);
  box-shadow: 0 0 0 1px #000, 0 0 0 4px #15110f, 0 0 0 5px var(--filigree-hi), 0 30px 60px rgba(0, 0, 0, 0.85), inset 0 0 50px rgba(0, 0, 0, 0.9); }
.board::before, .board::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--gold); opacity: 0.7; pointer-events: none; z-index: 2; }
.board::before { left: -7px; top: -7px; border-right: 0; border-bottom: 0; }
.board::after { right: -7px; bottom: -7px; border-left: 0; border-top: 0; }
.cell { position: absolute; width: calc(100% / var(--n)); height: calc(100% / var(--n)); left: calc(var(--x) * 100% / var(--n)); top: calc(var(--y) * 100% / var(--n)); }
.cell::before { content: ''; position: absolute; inset: 4%; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.4)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(168, 135, 74, 0.07); }
.cell .gem { position: absolute; left: 11%; top: 11%; width: 78%; height: 78%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.9)); }
.cell .g-breu { filter: drop-shadow(0 0 5px rgba(170, 100, 255, 0.85)) drop-shadow(0 3px 3px #000) brightness(1.4); left: 5%; top: 5%; width: 90%; height: 90%; }
.cell .g-brasa { filter: drop-shadow(0 0 6px rgba(255, 120, 30, 0.55)) drop-shadow(0 3px 3px #000); }
.cell .g-icor { filter: drop-shadow(0 0 6px rgba(110, 230, 90, 0.4)) drop-shadow(0 3px 3px #000); }
.cell .g-sangue { filter: drop-shadow(0 0 5px rgba(220, 30, 40, 0.45)) drop-shadow(0 3px 3px #000); }
.cell.sel::before { box-shadow: inset 0 0 0 1px var(--ember), inset 0 0 16px rgba(229, 115, 31, 0.55); }
.cell.sel .gem { transform: scale(1.12); }
.cell.hint .gem { animation: hint 0.9s infinite; }
@keyframes hint { 50% { transform: scale(1.18); } }
.board-flash { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: 1.5rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 800; color: #ffe0b0; text-shadow: 0 0 20px var(--ember), 0 2px 0 #000; pointer-events: none; white-space: nowrap; z-index: 3; }
.turn-banner { position: absolute; left: 50%; top: 12%; z-index: 4; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; transition: 0.25s; padding: 0.5em 1.4em; background: rgba(7, 5, 6, 0.95); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree-hi), 0 10px 30px #000; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; text-align: center; max-width: 92%; }
.turn-banner.show { opacity: 1; transform: translate(-50%, 0); }
.turn-banner.special { color: #ffd9a8; font-size: 1.35rem; box-shadow: inset 0 0 0 1px var(--ember), 0 0 40px rgba(229, 115, 31, 0.35); text-shadow: 0 0 16px var(--ember); }
.turn-banner.extra { color: var(--up); }
.turn-banner.bad { color: var(--down); }
.turn-banner.long { font-style: italic; letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 1.02rem; }
.float-layer { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.battle-screen .float-layer { position: absolute; }
.float { position: absolute; transform: translateX(-50%); font-weight: 800; font-size: 1.25rem; white-space: nowrap; letter-spacing: 0.04em; text-shadow: 0 2px 0 #000, 0 0 10px #000; }
.float.dmg { color: #ff6f6f; }
.float.dmg.crit { color: var(--gold-hi); font-size: 1.7rem; }
.float.k-arcano { color: var(--ember-hi); }
.float.k-perfurante { color: #d29bff; }
.float.heal { color: #a8e07a; }
.float.shield { color: var(--bone); }
.float.good { color: #c2e6a6; font-size: 0.95rem; }
.float.bad { color: #f0a49e; font-size: 0.95rem; }
.float.info { color: var(--silver); font-size: 0.9rem; }
.float.dead-t { color: #fff; font-size: 1.8rem; letter-spacing: 0.3em; }
.their-turn .side-0 { opacity: 0.85; }
.sheet { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(4, 3, 4, 0.88); backdrop-filter: blur(4px); padding: 16px; }
.sheet[hidden] { display: none; }
.sheet-card { position: relative; max-width: 580px; width: 100%; max-height: 86dvh; overflow: auto; padding: 1.3em; }
.sheet-card .close { position: absolute; top: 8px; right: 8px; }
.sheet-head { display: flex; gap: 1em; align-items: flex-start; margin-bottom: 0.8em; }
.puzzle-screen { grid-template-rows: auto auto 1fr auto; }
.puzzle-hud { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; }
.objs { display: flex; gap: 16px; }
.obj { display: flex; align-items: center; gap: 0.35em; font-size: 1.35rem; font-weight: 700; }
.obj .gem-ico { width: 36px; height: 36px; }
.obj.ok { color: var(--up); }
.moves { display: grid; text-align: center; line-height: 1; }
.moves b { font-size: 2rem; }
.moves small { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; }
.moves.urgent b { color: #e04a4f; }
.puzzle-tip { text-align: center; color: var(--dust); font-style: italic; }

@media (min-width: 1000px) {
  .battle-screen:not(.puzzle-screen) { max-width: 1400px; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) minmax(230px, 300px); grid-template-rows: auto auto 1fr; column-gap: 28px; }
  .battle-top { grid-column: 1 / -1; }
  .edge-line { grid-column: 1 / -1; grid-row: 2; }
  .side-0 { grid-column: 1; grid-row: 3; align-self: center; }
  .board-wrap { grid-column: 2; grid-row: 3; }
  .side-1 { grid-column: 3; grid-row: 3; align-self: center; }
  .board-host { width: min(100%, calc(100dvh - 120px), 760px); }
  .front { grid-template-columns: 1fr; }
  .fcard.active { grid-template-columns: 1fr; }
  .fcard.active .pframe { width: 100%; max-width: 260px; justify-self: center; }
  .fcard.mini { width: 70px; }
  .reserves { justify-content: center; }
  .skills { flex-wrap: wrap; overflow: visible; }
  .skill { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
.class-grid:has(.portrait-card) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .class-grid:has(.portrait-card) { grid-template-columns: repeat(2, 1fr); } }
/* Inimigos: tom frio e escurecido, para nunca se confundirem com a equipe do jogador. */
.side-1 .pframe .portrait { filter: saturate(0.55) brightness(0.82) contrast(1.12) sepia(0.15) hue-rotate(-12deg); }
.side-1 .pframe { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(142, 15, 23, 0.6), 0 0 18px rgba(142, 15, 23, 0.25); }
.battle-title { min-width: 0; }
.battle-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A queda das gemas fica dentro do tabuleiro; a margem deixa aparecer as cantoneiras de ouro. */
.board { clip-path: inset(-9px); }

/* ---------- Peças especiais ---------- */
.cell .sp { position: absolute; inset: 8%; pointer-events: none; z-index: 1; }
.cell .sp-1::before, .cell .sp-2::before { content: ''; position: absolute; background: linear-gradient(90deg, transparent, rgba(255, 236, 200, 0.95), transparent); box-shadow: 0 0 10px 2px rgba(255, 170, 80, 0.8); animation: blade 1.4s ease-in-out infinite; }
.cell .sp-1::before { left: -4%; right: -4%; top: 50%; height: 3px; margin-top: -1.5px; }
.cell .sp-2::before { top: -4%; bottom: -4%; left: 50%; width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, transparent, rgba(255, 236, 200, 0.95), transparent); }
.cell .sp-1::after, .cell .sp-2::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255, 200, 140, 0.55); box-shadow: inset 0 0 10px rgba(255, 150, 60, 0.45); }
@keyframes blade { 50% { opacity: 0.45; } }
.cell .sp-3 { border: 2px solid var(--gold); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000, 0 0 14px rgba(212, 175, 55, 0.75), inset 0 0 12px rgba(212, 175, 55, 0.45); }
/* O brilho mais forte fica fixo num ::after e só a opacidade pulsa (roda no compositor) */
.cell .sp-3::after { content: ''; position: absolute; inset: -2px; pointer-events: none; box-shadow: 0 0 22px rgba(255, 200, 80, 0.95), inset 0 0 18px rgba(255, 200, 80, 0.6); opacity: 0; animation: brilhoOp 1.6s ease-in-out infinite; }
@keyframes brilhoOp { 50% { opacity: 1; } }
.cell .sp-3::before { content: ''; position: absolute; inset: -6px; border: 1px solid rgba(212, 175, 55, 0.4); transform: rotate(45deg) scale(0.72); }
.cell .sp-corvo { position: absolute; right: -2%; top: -2%; width: 56%; height: 56%; object-fit: contain; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(160, 180, 220, 0.6)); }
.cell.t7 .gem { left: 4%; top: 4%; width: 92%; height: 92%; filter: drop-shadow(0 0 10px rgba(170, 90, 255, 0.95)) drop-shadow(0 0 3px #000); animation: olho 2.4s ease-in-out infinite; }
@keyframes olho { 50% { transform: scale(1.06); } } /* só escala: animar o drop-shadow repintava a gema a cada quadro */
.blast { position: absolute; pointer-events: none; z-index: 3; }
.blast.b1 { left: 0; right: 0; top: calc(var(--r) * 12.5%); height: 12.5%; background: linear-gradient(180deg, transparent, rgba(255, 220, 160, 0.95) 45%, #fff 50%, rgba(255, 220, 160, 0.95) 55%, transparent); animation: beamH 0.6s ease-out forwards; }
.blast.b2 { top: 0; bottom: 0; left: calc(var(--c) * 12.5%); width: 12.5%; background: linear-gradient(90deg, transparent, rgba(255, 220, 160, 0.95) 45%, #fff 50%, rgba(255, 220, 160, 0.95) 55%, transparent); animation: beamV 0.6s ease-out forwards; }
.blast.b3 { left: calc((var(--c) - 1) * 12.5%); top: calc((var(--r) - 1) * 12.5%); width: 37.5%; height: 37.5%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 190, 80, 0.9) 25%, rgba(200, 60, 20, 0.6) 55%, transparent 72%); animation: burst 0.6s ease-out forwards; }
.blast.b4 { left: calc(var(--c) * 12.5%); top: calc(var(--r) * 12.5%); width: 12.5%; height: 12.5%; background: radial-gradient(circle, rgba(200, 220, 255, 0.9), transparent 70%); animation: burst 0.5s ease-out forwards; }
.blast.b5 { inset: 0; background: radial-gradient(circle at calc(var(--c) * 12.5% + 6.25%) calc(var(--r) * 12.5% + 6.25%), rgba(200, 120, 255, 0.85), rgba(80, 20, 140, 0.5) 30%, transparent 70%); animation: burst 0.7s ease-out forwards; }
@keyframes beamH { from { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); } to { opacity: 0; transform: scaleX(1) scaleY(0.2); } }
@keyframes beamV { from { transform: scaleY(0); opacity: 1; } 40% { transform: scaleY(1); } to { opacity: 0; transform: scaleY(1) scaleX(0.2); } }
@keyframes burst { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.board-flash.combo { font-size: 1.9rem; color: #f4d7ff; text-shadow: 0 0 24px #a35ad9, 0 0 8px #fff, 0 2px 0 #000; }
.board-flash.born-t { top: 62%; font-size: 1.1rem; color: var(--gold-hi); text-shadow: 0 0 14px rgba(212, 175, 55, 0.9), 0 2px 0 #000; }

/* ---------- Confronto (v3): dois retratos se encarando, vida embaixo de cada um ---------- */
.battle-screen:not(.puzzle-screen) { grid-template-rows: auto auto 1fr auto; grid-template-columns: 1fr; }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: start; }
.duelist.side { padding: 6px; min-width: 0; }
.duelist .side-head { margin-bottom: 4px; }
.duelist .fcard.active { display: block; cursor: pointer; }
.duelist .pframe.big-face { width: 100%; aspect-ratio: 4 / 5; max-height: 30dvh; margin: 0 auto; }
.duelist .pframe.big-face .portrait { object-position: 50% 18%; }
.duelist .pframe.big-face .portrait.face-new { animation: faceIn 0.5s ease; }
.duelist .pframe.big-face .portrait.front { object-position: 50% 22%; }
.side-1 .pframe.big-face .portrait { transform: scaleX(-1); }
@keyframes faceIn { from { opacity: 0.2; filter: brightness(2) blur(2px); } to { opacity: 1; } }
.duelist .finfo { padding-top: 5px; }
.duelist .fname { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duelist .fname small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duelist .fclass { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-1 .fname, .side-1 .fclass, .side-1 .side-head { text-align: right; justify-content: flex-end; }
.side-1 .chips { justify-content: flex-end; }
.duelist .bar.hp { height: 20px; }
/* Estados do rosto: brilho de poder, sangue nas bordas, cinza na derrota, ouro na vitória */
.st-dominante .pframe { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--c), 0 0 26px color-mix(in srgb, var(--c) 55%, transparent); }
.st-ferido .pframe::after { box-shadow: inset 0 0 0 1px rgba(196, 30, 42, 1), inset 0 0 60px rgba(196, 30, 42, 0.85); opacity: 0.72; animation: pulseHurt 1.2s ease-in-out infinite; }
@keyframes pulseHurt { 50% { opacity: 1; } }
.st-derrota .pframe { filter: grayscale(0.85) brightness(0.55); }
.st-vitoria .pframe { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--gold-hi), 0 0 30px rgba(212, 175, 55, 0.45); }
.edge-line { align-self: center; padding-top: 28px; }
.edge { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; min-width: 40px; }
.edge b { font-size: 1rem; }
.edge span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.ess { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: 5px; }
.ess span { display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 0.76rem; background: rgba(7, 5, 6, 0.6); padding: 1px 0; }
.ess span.zero { opacity: 0.4; }
.ess .gem-ico { width: 14px; height: 14px; }
.duelist .reserves { margin-top: 6px; gap: 4px; }
.side-1 .reserves { justify-content: flex-end; }
.duelist .fcard.mini { width: 40px; }
.duelist .fcard.mini .pframe { aspect-ratio: 3 / 4; }
.actionbar { background: linear-gradient(180deg, rgba(25, 20, 22, 0.92), rgba(12, 10, 11, 0.94)); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree); padding: 6px 8px; }
.actionbar:empty { display: none; }
.ab-who { font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); font-weight: 700; }
.ab-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.ab-row + .ab-row { margin-top: 5px; }
.ab-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); writing-mode: vertical-rl; transform: rotate(180deg); }
.actionbar .skills { margin-top: 0; }
.sp-cost { display: flex; gap: 6px; font-size: 0.74rem; }
.sp-cost i { font-style: normal; display: inline-flex; align-items: center; gap: 1px; }
.sp-cost .gem-ico { width: 14px; height: 14px; }
.turn-banner.spell { color: #e6d0ff; font-size: 1.3rem; box-shadow: inset 0 0 0 1px #a35ad9, 0 0 40px rgba(163, 90, 217, 0.4); text-shadow: 0 0 16px #a35ad9; }
.board-host { width: min(100%, calc(100dvh - 520px), 560px); min-width: 260px; }

/* Obstáculos */
.cell .obst { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 4px 4px #000); }
.cell .o-vela { filter: drop-shadow(0 0 8px rgba(255, 140, 40, 0.8)) drop-shadow(0 3px 3px #000); }
.cell .o-podridao { filter: drop-shadow(0 0 6px rgba(120, 200, 60, 0.6)) drop-shadow(0 3px 3px #000); }
.cell .obst-fb { position: absolute; inset: 12%; display: block; border: 1px solid #000; }
.cell .obst-fb.o-lapide { background: linear-gradient(#5a5652, #2a2826); border-radius: 40% 40% 4px 4px; box-shadow: inset 0 0 0 2px #1a1817; }
.cell .obst-fb.o-podridao { background: radial-gradient(circle, #6a8a2a, #1e2a0c 70%); border-radius: 50%; box-shadow: 0 0 10px rgba(120, 200, 60, 0.6); }
.cell .obst-fb.o-vela { background: linear-gradient(#111, #000); left: 30%; right: 30%; top: 20%; box-shadow: 0 -8px 10px rgba(255, 140, 40, 0.8); }
.cell .layers, .cell .fuse { position: absolute; right: 6%; bottom: 4%; z-index: 2; font-size: 0.8rem; font-weight: 800; color: #fff; text-shadow: 0 0 4px #000, 0 1px 0 #000; }
.cell .fuse { color: #ffb36b; font-size: 0.95rem; }
.cell .chain { position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain; z-index: 2; pointer-events: none; opacity: 0.95; filter: drop-shadow(0 2px 2px #000); }
.cell .chain-fb { position: absolute; inset: 8%; z-index: 2; background: linear-gradient(45deg, transparent 44%, #8a7a66 45%, #8a7a66 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, #8a7a66 45%, #8a7a66 55%, transparent 56%); }
.cell.placed::before { box-shadow: inset 0 0 0 2px #a35ad9, inset 0 0 18px rgba(163, 90, 217, 0.8); }

@media (min-width: 1000px) {
  .battle-screen:not(.puzzle-screen) { max-width: 1400px; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 300px); grid-template-rows: auto auto 1fr; grid-template-areas: "top top top" "d0 edge d1" "d0 board d1" "ab board d1"; column-gap: 28px; }
  .duel { display: contents; }
  .battle-top { grid-area: top; }
  .side-0 { grid-area: d0; align-self: start; }
  .side-1 { grid-area: d1; align-self: start; }
  .edge-line { grid-area: edge; padding-top: 0; justify-self: center; }
  .edge { grid-auto-flow: column; gap: 8px; padding: 4px 14px; }
  .edge span { writing-mode: horizontal-tb; transform: none; font-size: 0.7rem; }
  .board-wrap { grid-area: board; align-self: start; }
  .actionbar { grid-area: ab; align-self: start; }
  .board-host { width: min(100%, calc(100dvh - 110px), 760px); }
  .duelist .pframe.big-face { max-height: 46dvh; }
  .actionbar .skills { flex-direction: column; overflow: visible; }
  .actionbar .skill, .actionbar .spell { width: 100%; }
}
/* Celular: tudo cabe numa tela, sem rolar */
.duelist { position: relative; }
.duelist .side-head { white-space: nowrap; overflow: hidden; }
.duelist .side-name { overflow: hidden; text-overflow: ellipsis; }
.duelist .pframe.big-face { max-height: 22dvh; }
.duelist .reserves { position: absolute; top: 30px; right: 10px; flex-direction: column; margin: 0; z-index: 2; }
.side-1 .reserves { right: auto; left: 10px; }
.duelist .fcard.mini { width: 34px; }
.duelist .ess { gap: 1px; margin-top: 4px; }
.duelist .ess span { font-size: 0.72rem; }
.duelist .ess .gem-ico { width: 12px; height: 12px; }
@media (min-width: 1000px) {
  .duelist .reserves { position: static; flex-direction: row; justify-content: center; margin-top: 8px; }
  .duelist .fcard.mini { width: 56px; }
  .duelist .pframe.big-face { max-height: 46dvh; }
}

.ab-row { grid-template-columns: 1fr; gap: 3px; }
.ab-label { writing-mode: horizontal-tb; transform: none; font-size: 0.72rem; }

/* Grimório */
.grimoire { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.grimoire.one { grid-template-columns: minmax(0, 360px); justify-content: center; text-align: left; }
.spellcard { display: grid; gap: 0.35em; align-content: start; padding: 0.8em; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #120e12), #0a0809); border: 1px solid #000; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.spellcard.on { box-shadow: inset 0 0 0 1px var(--c), 0 0 16px color-mix(in srgb, var(--c) 30%, transparent); }
.spellcard p { margin: 0; font-size: 0.95rem; color: var(--bone-dim); }
.sc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.sc-head b { letter-spacing: 0.06em; }
.sc-head small { color: var(--c); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; }

/* ---------- Batalha v4: tudo numa tela, medalhões na barra de baixo ---------- */
.battle-screen { position: relative; }
.battle-screen:not(.puzzle-screen) { grid-template-rows: auto auto 1fr auto; height: 100dvh; min-height: 0; overflow: hidden; gap: 4px; padding: 0 6px calc(6px + env(safe-area-inset-bottom)); }
.battle-screen:not(.puzzle-screen) .battle-top { padding-top: 4px; }
.duel { grid-template-columns: 1fr 34px 1fr; gap: 4px; align-items: end; }
.duelist.side { padding: 4px; }
.duelist .side-head { margin-bottom: 3px; font-size: 0.72rem; }
.duelist .fcard.active { position: relative; }
.duelist .pframe.big-face { aspect-ratio: 4 / 5; max-height: 19dvh; width: 100%; }
.big-face .chips { position: absolute; top: 4px; left: 4px; right: 4px; margin: 0; z-index: 2; }
.side-1 .big-face .chips { justify-content: flex-end; }
.big-face .chip { font-size: 0.76rem; }
.plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 6px 4px; display: grid; line-height: 1.1; background: linear-gradient(transparent, rgba(5, 3, 4, 0.92) 55%); }
.side-1 .plate { text-align: right; }
.plate b { font-size: 0.86rem; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.plate small { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate .gem-ico { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; }
/* Reservas: medalhões redondos presos na borda de fora do retrato, com a vida no anel */
.duelist .reserves { position: absolute; top: 22%; left: -2px; right: auto; display: flex; flex-direction: column; gap: 5px; margin: 0; z-index: 3; }
.side-1 .reserves { left: auto; right: -2px; }
.duelist .fcard.mini { width: 34px; }
.duelist .fcard.mini .pframe { aspect-ratio: 1; border-radius: 50%; border: 0; padding: 2px; background: conic-gradient(var(--blood) calc(var(--hp) * 1%), #1a1213 0); box-shadow: 0 0 0 1px #000, 0 3px 8px #000; }
.duelist .fcard.mini .pframe::after { display: none; }
.duelist .fcard.mini .portrait { border-radius: 50%; object-position: 50% 20%; }
.fcard.mini.can-swap .pframe { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--ember), 0 0 12px rgba(229, 115, 31, 0.7); animation: swapGlow 1.6s ease-in-out infinite; }
@keyframes swapGlow { 50% { transform: scale(1.08); } }
.duelist .bar.hp { height: 16px; margin-top: 4px; }
.duelist .bar span { font-size: 0.76rem; line-height: 14px; }
.duelist .bar.carga { height: 6px; margin-top: 3px; }
.edge-line { align-self: center; padding-top: 0; }
.edge { min-width: 30px; padding: 6px 2px; }
/* O tabuleiro ocupa o maior quadrado que cabe no espaço que sobra */
.battle-screen:not(.puzzle-screen) .board-wrap { container-type: size; min-height: 0; align-self: stretch; }
.battle-screen:not(.puzzle-screen) .board-host { width: min(100cqw, 100cqh, 760px); min-width: 0; }
/* Barra de baixo */
.actionbar { padding: 5px 6px 6px; }
.dock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.dock-head .ess { flex: 1; margin: 0; gap: 3px; }
.dock-head .ess span { font-size: 0.74rem; padding: 2px 0; background: rgba(7, 5, 6, 0.75); box-shadow: inset 0 0 0 1px rgba(168, 135, 74, 0.18); }
.dock-head .ess .gem-ico { width: 15px; height: 15px; }
.dock-row { display: grid; grid-template-columns: 14px 1fr; gap: 6px; align-items: center; }
.dock-row + .dock-row { margin-top: 2px; }
.dock-row .ab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.7rem; letter-spacing: 0.18em; text-align: center; }
.dock-row.used .abs { opacity: 0.5; }
.abs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px 2px 1px; }
.abs::-webkit-scrollbar { display: none; }
.ab { position: relative; flex: none; width: 56px; display: grid; justify-items: center; gap: 1px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; -webkit-touch-callout: none; user-select: none; }
.ab .medal { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 35%, #2a2224), #0c090a 75%);
  box-shadow: 0 0 0 3px #0a0809, 0 0 0 5px rgba(255, 255, 255, 0.06), inset 0 2px 6px rgba(255, 255, 255, 0.12), inset 0 -6px 10px rgba(0, 0, 0, 0.8); filter: grayscale(0.75) brightness(0.6); }
.ab .medal b { font-size: 1.05rem; letter-spacing: 0.06em; color: var(--c); text-shadow: 0 1px 2px #000; }
.ab .medal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Anel de carga em volta do medalhão */
.ab::before { content: ''; position: absolute; top: -3px; left: 50%; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, 0.07) 0);
  -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px); mask: radial-gradient(circle, transparent 22px, #000 23px); }
.ab.ready .medal { filter: none; box-shadow: 0 0 0 3px #0a0809, 0 0 18px color-mix(in srgb, var(--c) 70%, transparent), inset 0 2px 6px rgba(255, 255, 255, 0.18); animation: medalReady 1.8s ease-in-out infinite; }
.ab.ready::before { background: var(--c); box-shadow: 0 0 12px var(--c); }
@keyframes medalReady { 50% { transform: scale(1.06); } }
.ab .who { position: absolute; top: 26px; right: 2px; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #0a0809; }
.ab .who .portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ab-name { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; line-height: 1.1; max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bone-dim); }
.ab.ready .ab-name { color: var(--bone); }
.ab-tip { position: absolute; left: 10px; right: 10px; bottom: 150px; z-index: 25; padding: 0.7em 0.9em; font-size: 0.92rem; line-height: 1.3; background: rgba(10, 7, 8, 0.96); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree-hi), 0 10px 30px #000; }
.ab-tip[hidden] { display: none; }

@media (min-width: 1000px) {
  .battle-screen:not(.puzzle-screen) { max-width: 1720px; grid-template-columns: minmax(220px, 1fr) min(calc(100dvh - 300px), 46vw, 760px) minmax(220px, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "top top top" "d0 edge d1" "d0 board d1" "d0 ab d1"; column-gap: 28px; padding-bottom: 10px; }
  .duel { display: contents; }
  .side-0 { grid-area: d0; align-self: center; justify-self: end; width: min(100%, 360px); }
  .side-1 { grid-area: d1; align-self: center; justify-self: start; width: min(100%, 360px); }
  .edge-line { grid-area: edge; justify-self: center; }
  .board-wrap { grid-area: board; }
  .actionbar { grid-area: ab; align-self: end; }
  .duelist .pframe.big-face { max-height: none; max-width: 340px; margin: 0 auto; }
  .duelist .reserves { left: -18px; }
  .side-1 .reserves { left: auto; right: -18px; }
  .duelist .fcard.mini { width: 54px; }
  .plate b { font-size: 1.1rem; }
  .plate small { font-size: 0.76rem; }
  .duelist .bar.hp { height: 22px; }
  .duelist .bar span { font-size: 0.8rem; line-height: 20px; }
  .duelist .bar.carga { height: 8px; }
  .ab { width: 74px; }
  .ab .medal { width: 58px; height: 58px; }
  .ab::before { width: 64px; height: 64px; margin-left: -32px; -webkit-mask: radial-gradient(circle, transparent 29px, #000 30px); mask: radial-gradient(circle, transparent 29px, #000 30px); }
  .ab .who { top: 36px; right: 6px; }
  .ab-name { font-size: 0.72rem; max-width: 74px; }
  .abs { justify-content: center; }
  .ab-tip { left: 50%; right: auto; width: 460px; margin-left: -230px; bottom: 170px; }
}

/* ---------- Golpe (etapa 2): estilhaços, energia, dano, cinema ---------- */
.shard { position: absolute; z-index: 4; pointer-events: none; width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.sh-gota { width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #ff6b6b, #8e0f17 60%, #3a0306); box-shadow: 0 0 4px rgba(200, 20, 30, 0.7); }
.sh-faisca { width: 3px; height: 10px; border-radius: 2px; background: linear-gradient(#fff6c8, #ff9c42 50%, transparent); box-shadow: 0 0 8px #ff8a2a; }
.sh-fumaca { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle, rgba(120, 60, 180, 0.65), rgba(30, 10, 50, 0.3) 55%, transparent 70%); filter: blur(2px); }
.sh-lasca { width: 7px; height: 7px; background: linear-gradient(135deg, #f4ead0, #b8a67e); clip-path: polygon(50% 0, 100% 70%, 30% 100%, 0 40%); }
.sh-vapor { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, rgba(150, 240, 110, 0.6), rgba(60, 120, 30, 0.25) 55%, transparent 70%); filter: blur(2px); }
.sh-brilho { width: 9px; height: 9px; background: radial-gradient(circle, #fff, #cfe0f0 40%, transparent 70%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.orb { position: absolute; z-index: 21; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 35%, #fff, var(--oc) 45%, transparent 72%); box-shadow: 0 0 10px 3px var(--oc), 0 0 22px var(--oc); }
.float.dmg { font-size: 1.9rem; font-weight: 800; -webkit-text-stroke: 1px #000; text-shadow: 0 3px 0 #000, 0 0 14px rgba(0, 0, 0, 0.9); }
.float.dmg.crit { font-size: 2.6rem; color: var(--gold-hi); text-shadow: 0 3px 0 #000, 0 0 22px rgba(212, 175, 55, 0.8); }
.float small { display: block; text-align: center; font-size: 0.42em; letter-spacing: 0.3em; text-transform: uppercase; color: #fff3c4; -webkit-text-stroke: 0; }
.board-flash.casc { font-size: 1.3rem; color: #ffe9c8; text-shadow: 0 0 16px var(--ember), 0 2px 0 #000; }
.board-flash.casc.c3 { font-size: 1.6rem; }
.board-flash.casc.c4 { font-size: 1.9rem; color: #fff0b0; }
.board-flash.casc.c5 { font-size: 2.2rem; color: #fff; text-shadow: 0 0 26px #ff5a1f, 0 0 8px #fff, 0 2px 0 #000; }
.board-flash.combo { padding: 0.25em 1.2em; background: radial-gradient(ellipse, rgba(20, 8, 30, 0.85), transparent 75%); }
.board-flash.combo::before, .board-flash.combo::after { content: ''; position: absolute; top: 50%; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hi)); }
.board-flash.combo::before { right: 100%; }
.board-flash.combo::after { left: 100%; transform: scaleX(-1); }
.cinema { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: #000; }
.cin-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.18), transparent 60%), url(assets/ui/vitoria.webp) center / cover; opacity: 0.6; }
.cinema.lose .cin-bg { background: radial-gradient(ellipse at 50% 40%, rgba(142, 15, 23, 0.3), transparent 60%), url(assets/ui/derrota.webp) center / cover; }
.cin-face { position: absolute; inset: 0; }
.cin-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; -webkit-mask: linear-gradient(transparent, #000 15%, #000 55%, transparent 92%); mask: linear-gradient(transparent, #000 15%, #000 55%, transparent 92%); }
.cinema.lose .cin-face img { filter: grayscale(0.7) brightness(0.7) contrast(1.15); }
.cin-text { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; }
.cin-text h1 { margin: 0; font-size: clamp(2.6rem, 11vw, 5.5rem); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 0 30px rgba(212, 175, 55, 0.6), 0 3px 0 #000; }
.cinema.lose h1 { color: #c9262f; text-shadow: 0 0 30px rgba(142, 15, 23, 0.8), 0 3px 0 #000; }
.cin-text p { margin: 0.3em 0 0; font-style: italic; color: var(--bone-dim); font-size: 1.1rem; }
@media (min-width: 1000px) { .cin-face img { object-fit: contain; } }

/* ---------- Arte de interface (etapa 3) ---------- */
/* Moldura de pedra do tabuleiro: border-image em volta, por cima das gemas (que caem por baixo dela). */
.board { --fw: 16px; background: #060405; border: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85); clip-path: inset(calc(-1 * var(--fw))); }
.board::before { left: calc(-1 * var(--fw)); top: calc(-1 * var(--fw)); right: calc(-1 * var(--fw)); bottom: calc(-1 * var(--fw)); width: auto; height: auto; opacity: 1; z-index: 5;
  border: var(--fw) solid transparent; border-image: url(assets/ui/tabuleiro-moldura.webp) 20% stretch; filter: drop-shadow(0 0 6px #000); }
.board::after { display: none; }
.battle-screen:not(.puzzle-screen) .board-host { width: min(calc(100cqw - 2 * var(--fw)), calc(100cqh - 2 * var(--fw)), 760px); }
.board-flash, .turn-banner, .blast { z-index: 6; }
/* Laje de pedra em cada casa, com variação para o piso não parecer carimbado */
.cell::before { background: url(assets/ui/casa-laje.webp) center / cover; filter: brightness(0.42) contrast(1.1); inset: 3%;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
.cell:nth-child(3n)::before { filter: brightness(0.36) contrast(1.15); transform: scaleX(-1); }
.cell:nth-child(5n + 2)::before { transform: scaleY(-1); }
.cell:nth-child(7n + 1)::before { filter: brightness(0.5) sepia(0.2); }
.cell.sel::before { filter: brightness(0.7); }
/* Retrato da frente com a mesma pedra entalhada */
.duelist .big-face::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 9px solid transparent; border-image: url(assets/ui/tabuleiro-moldura.webp) 20% stretch; }
.duelist .big-face .chips { top: 10px; left: 10px; right: 10px; }
.duelist .big-face .plate { padding-bottom: 10px; padding-left: 12px; padding-right: 12px; }
/* Essências em frascos, com o número embaixo */
.ess span { flex-direction: column; gap: 0; line-height: 1; }
.ess .vial { width: 18px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.ess span.zero .vial { filter: grayscale(0.8) brightness(0.55); }
.dock-head .ess .vial { width: 24px; height: 28px; }
.dock-head .ess span { padding: 2px 0 1px; }
.chip .st-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 1px; border-radius: 50%; }
@media (min-width: 1000px) {
  .board { --fw: 26px; }
  .duelist .big-face::before { border-width: 14px; }
}

/* ---------- Fora da luta (etapa 4) ---------- */
/* Modos do santuário com arte de fundo */
.mode.art { position: relative; min-height: 132px; align-content: end; overflow: hidden; background: var(--bg); background-size: cover; background-position: center; }
.mode.art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 5, 6, 0.15), rgba(7, 5, 6, 0.92) 70%); transition: background 0.3s; }
.mode.art > * { position: relative; }
.mode.art:hover::before { background: linear-gradient(180deg, rgba(7, 5, 6, 0), rgba(7, 5, 6, 0.85) 70%); }
.mode.art small { color: var(--bone); text-shadow: 0 1px 2px #000; }
/* A Descida: camadas empilhadas, cada uma com o seu cenário, ligadas por um poço */
.descent { display: grid; max-width: 760px; margin: 0 auto; }
.layer { position: relative; padding: 1.2em 1.1em 1em; overflow: hidden; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree), 0 14px 30px rgba(0, 0, 0, 0.7); background: var(--bg) center / cover; }
.layer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 5, 6, 0.55), rgba(7, 5, 6, 0.9)); }
.layer > * { position: relative; }
.layer.here { box-shadow: inset 0 0 0 1px var(--ember), 0 0 30px rgba(229, 115, 31, 0.25), 0 14px 30px rgba(0, 0, 0, 0.7); }
.layer.locked { filter: grayscale(0.9) brightness(0.55); }
.layer.locked::before { background: rgba(7, 5, 6, 0.85); backdrop-filter: blur(3px); }
.layer-head { display: grid; grid-template-columns: auto 1fr; gap: 0.8em; align-items: center; }
.layer h3 { margin: 0; font-size: 1.15rem; letter-spacing: 0.14em; }
.layer h3::after { display: none; }
.layer .sub { margin: 0.1em 0 0; font-style: italic; color: var(--bone-dim); }
.layer .lore { margin: 0.7em 0 0; font-size: 0.95rem; color: var(--bone-dim); }
.depth { display: grid; place-items: center; width: 2.4em; height: 2.4em; border: 1px solid #c43a41; color: #e0575e; font-weight: 700; letter-spacing: 0.04em; background: rgba(7, 5, 6, 0.7); }
.you { position: absolute; top: 0.5em; right: 0.6em; padding: 0.2em 0.6em; background: rgba(7, 5, 6, 0.85); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember-hi); font-style: normal; font-weight: 700; text-shadow: 0 0 10px rgba(229, 115, 31, 0.7); }
.shaft { height: 34px; width: 2px; margin: 0 auto; background: repeating-linear-gradient(180deg, #6b5a3e 0 6px, transparent 6px 10px); box-shadow: 0 0 8px rgba(0, 0, 0, 0.9); }
.path { display: flex; align-items: center; margin-top: 0.9em; }
.rope { flex: 1; height: 2px; min-width: 8px; background: repeating-linear-gradient(90deg, #6b5a3e 0 5px, transparent 5px 8px); }
.stop { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-weight: 700; color: var(--bone);
  background: radial-gradient(circle at 40% 35%, #3a2c24, #120c0b 70%); box-shadow: 0 0 0 2px #0a0708, 0 0 0 3px var(--filigree-hi), 0 4px 10px #000; }
.stop.done { color: var(--up); box-shadow: 0 0 0 2px #0a0708, 0 0 0 3px rgba(143, 191, 106, 0.7); }
.stop.next { color: #fff; background: radial-gradient(circle at 40% 35%, #b4501a, #3a1206 70%); box-shadow: 0 0 0 2px #0a0708, 0 0 0 3px var(--ember), 0 0 18px rgba(229, 115, 31, 0.7); animation: pulse 1.8s infinite; }
.stop.locked { opacity: 0.45; }
.stop.boss { width: 64px; height: 64px; overflow: hidden; box-shadow: 0 0 0 2px #0a0708, 0 0 0 3px #c43a41, 0 0 18px rgba(142, 15, 23, 0.6); }
.stop.boss img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.stop.boss.locked { opacity: 0.85; }
.stop.boss.locked img { filter: grayscale(0.6) brightness(0.7); }
.layer.here { padding-top: 2.1em; }
.boss-name { margin: 0.6em 0 0; text-align: right; font-size: 0.86rem; color: #e0575e; letter-spacing: 0.04em; }
.boss-name span { font-style: italic; color: var(--bone-dim); }
/* Peças: ícone no relicário de moldura da cor da raridade */
.item-top { display: grid; grid-template-columns: 56px 1fr; gap: 0.7em; align-items: center; }
.item-ico { position: relative; display: grid; place-items: center; width: 56px; height: 56px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 22%, #1a1214), #070506 75%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r) 60%, #000), 0 0 12px color-mix(in srgb, var(--r) 25%, transparent); }
.item-ico i { font-style: normal; font-size: 1.5rem; color: var(--r); opacity: 0.7; }
.item-ico img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; filter: drop-shadow(0 3px 4px #000); }
.item.rar-4 .item-ico::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--r), 0 0 22px color-mix(in srgb, var(--r) 55%, transparent); opacity: 0; animation: brilhoOp 2.4s ease-in-out infinite; }
/* Baús */
.chest-art { position: relative; display: grid; place-items: center; height: 150px; }
.chest-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px #000); }
.chest-fb { position: absolute; width: 110px; height: 76px; border: 1px solid #000; background: linear-gradient(#4a3a2c, #241a12); box-shadow: inset 0 0 0 4px #1a120c, inset 0 22px 0 -18px #6b5a3e, 0 12px 20px #000; }
.chest-art img + .chest-fb, .chest-art:has(img) .chest-fb { display: none; }
.chest-open { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(30, 18, 14, 0.9), rgba(4, 3, 4, 0.97) 70%); cursor: pointer; }
.chest-open > * { grid-area: 1 / 1; }
.chest-open .chest-art { height: 240px; width: 280px; }
.chest-open .burst { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--r) 30%, transparent 70%); pointer-events: none; opacity: 0; }
.chest-open .reveal { width: min(92vw, 360px); opacity: 0; }
.chest-open .reveal .item { box-shadow: inset 0 0 0 1px var(--r), 0 0 40px color-mix(in srgb, var(--r) 45%, transparent); }

/* ---------- Evolução, fase 1: presságio, pactos, transbordo, relíquias ---------- */
.round .omen { font: inherit; font-style: normal; font-size: 0.8rem; color: var(--gold-hi); background: none; border: 0; border-bottom: 1px dotted var(--filigree-hi); padding: 0; cursor: pointer; }
.round .omen .gem-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.round .omen.pact { color: var(--up); }
.board-flash.surge { font-size: 1.7rem; color: #dff3ff; letter-spacing: 0.3em; text-shadow: 0 0 22px #6fb4ff, 0 0 6px #fff, 0 2px 0 #000; }
.turn-banner.relic { color: #ffe6b0; font-size: 1.2rem; box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 40px rgba(212, 175, 55, 0.4); }
.cell .obst-fb.o-alma, .cell .obst-fb.o-ampulheta, .cell .obst-fb.o-sino, .cell .obst-fb.o-calice { inset: 10%; display: grid; place-items: center; border-radius: 50%; border: 1px solid #000;
  background: radial-gradient(circle at 40% 35%, #3b3326, #0d0a08 70%); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.55), 0 0 14px rgba(212, 175, 55, 0.45); font-style: normal; font-size: 1.3em; color: #f1dca0; }
.cell .obst-fb.o-alma::after { content: '☽'; color: #bfe0ff; }
.cell .obst-fb.o-ampulheta::after { content: '⧗'; }
.cell .obst-fb.o-sino::after { content: '🔔'; font-size: 0.8em; }
.cell .obst-fb.o-calice::after { content: '♰'; color: #ff8a8a; }
.cell.t6.s4 .obst, .cell.t6.s5 .obst, .cell.t6.s6 .obst, .cell.t6.s7 .obst { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.75)) drop-shadow(0 3px 3px #000); animation: relicGlow 2s ease-in-out infinite; }
@keyframes relicGlow { 50% { transform: scale(1.06); } } /* só escala: animar o drop-shadow repintava a relíquia a cada quadro */

/* ---------- Evolução, fase 2: marcas, fornalha, familiares, estandartes ---------- */
.marks { display: grid; gap: 8px; }
.mark { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8em; align-items: center; padding: 0.7em 0.9em; background: rgba(7, 5, 6, 0.6); box-shadow: inset 0 0 0 1px var(--filigree); opacity: 0.55; }
.mark.on { opacity: 1; box-shadow: inset 0 0 0 1px var(--c), 0 0 14px color-mix(in srgb, var(--c) 25%, transparent); }
.mark.next { opacity: 0.9; }
.mark p { margin: 0.1em 0 0; font-size: 0.92rem; color: var(--bone-dim); }
.mark-n { display: grid; place-items: center; width: 2.2em; height: 2.2em; border: 1px solid var(--c); color: var(--c); font-weight: 700; }
.purse-row { display: flex; gap: 1.6em; font-size: 1.15rem; color: var(--gold-hi); letter-spacing: 0.06em; margin: 0.4em 0 0.8em; }
.pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pet { display: grid; justify-items: center; text-align: center; gap: 0.3em; padding: 0.9em 0.7em; background: rgba(7, 5, 6, 0.6); box-shadow: inset 0 0 0 1px var(--filigree); }
.pet.on { box-shadow: inset 0 0 0 1px var(--ember), 0 0 18px rgba(229, 115, 31, 0.3); }
.pet.locked { opacity: 0.6; }
.pet p { margin: 0; font-size: 0.86rem; color: var(--bone-dim); }
.pet-art { position: relative; display: grid; place-items: center; grid-auto-flow: column; gap: 4px; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2e2420, #0b0807 70%); box-shadow: 0 0 0 2px #0a0708, 0 0 0 3px var(--filigree-hi); overflow: hidden; }
.pet-art i { font-style: normal; font-size: 1.6rem; color: var(--gold); }
.pet-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pet.banner .pet-art .gem-ico { width: 26px; height: 26px; }
.omen-line { margin: 0.5em 0 0; font-size: 0.82rem; color: var(--gold-hi); letter-spacing: 0.04em; }
.omen-line .gem-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* ---------- Evolução, fase 3: lua, vigília, catacumbas, saque, cova ---------- */
.moon { display: grid; gap: 0.2em; padding: 0.8em 1em; margin-bottom: 0.4em; background: linear-gradient(90deg, rgba(90, 10, 16, 0.55), rgba(7, 5, 6, 0.7)); box-shadow: inset 0 0 0 1px rgba(196, 58, 65, 0.5); }
.moon b { letter-spacing: 0.18em; text-transform: uppercase; color: #ff9a9a; font-size: 0.86rem; }
.moon span { color: var(--bone-dim); font-size: 0.95rem; }
.layer.vig { text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer; margin-bottom: 10px; }
.layer.vig:disabled { opacity: 0.5; cursor: default; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1em 0; }
.door { display: grid; gap: 0.4em; align-content: end; min-height: 200px; padding: 1em; text-align: left; font: inherit; color: var(--bone); cursor: pointer; border: 1px solid #000;
  background: linear-gradient(180deg, rgba(7, 5, 6, 0.2), rgba(7, 5, 6, 0.92)), radial-gradient(ellipse at 50% 20%, #3a2a20, #0b0807 70%); box-shadow: inset 0 0 0 1px var(--filigree-hi), 0 12px 24px #000; border-radius: 40% 40% 4px 4px / 22% 22% 4px 4px; }
.door b { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.92rem; }
.door span { font-size: 0.9rem; color: var(--bone-dim); }
.door.chefe, .door.elite { box-shadow: inset 0 0 0 1px #c43a41, 0 0 20px rgba(142, 15, 23, 0.4), 0 12px 24px #000; }
.door.fonte { box-shadow: inset 0 0 0 1px rgba(121, 168, 60, 0.7), 0 12px 24px #000; }
.door.tesouro, .door.armadilha { box-shadow: inset 0 0 0 1px var(--gold-hi), 0 12px 24px #000; }
.door:hover { transform: translateY(-3px); }
.cell .tes { left: 8%; top: 8%; width: 84%; height: 84%; }
.cell .tes-fb { position: absolute; inset: 14%; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 0.9em; color: #1a1006; border: 1px solid #000; box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -3px 4px rgba(0, 0, 0, 0.45), 0 3px 4px #000; }
.tes-0 { background: radial-gradient(circle at 35% 30%, #e7a07a, #8a4a2a 70%); }
.tes-1 { background: radial-gradient(circle at 35% 30%, #f2f2f2, #8e959c 70%); }
.tes-2 { background: radial-gradient(circle at 35% 30%, #ffe9a0, #b8861e 70%); }
.tes-3 { background: radial-gradient(circle at 35% 30%, #ffd27a, #8e5a10 70%); border-radius: 20% 20% 45% 45%; }
.tes-4 { background: radial-gradient(circle at 35% 30%, #ffd9d9, #9a2a2a 70%); border-radius: 8px; color: #fff; }
.tes-5 { background: radial-gradient(circle at 35% 30%, #fff4c0, #d4af37 60%, #6b4a10); box-shadow: 0 0 14px rgba(255, 215, 90, 0.9), inset 0 2px 3px rgba(255, 255, 255, 0.6); }

/* ---------- Contas, convite e desafio ---------- */
.auth { display: grid; gap: 0.9em; max-width: 420px; margin: 0 auto; }
.auth label { display: grid; gap: 0.3em; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); }
.auth label small { text-transform: none; letter-spacing: 0; }
.auth input:not([type="checkbox"]), .share-link { font: inherit; font-size: 1.05rem; padding: 0.7em 0.8em; color: var(--bone); background: rgba(7, 5, 6, 0.85); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree-hi); width: 100%; box-sizing: border-box; }
.auth input:focus, .share-link:focus { outline: 1px solid var(--ember); }
.check.optin { grid-template-columns: auto 1fr; align-items: start; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--bone); gap: 0.6em; }
.check.optin input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blood); }
.auth-err { color: #ff8a8a; margin: 0; }
.muted.small { font-size: 0.82rem; }
.invite-note { padding: 0.7em 1em; background: rgba(212, 175, 55, 0.12); box-shadow: inset 0 0 0 1px var(--gold); }
.hub-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cta { display: grid; gap: 0.2em; padding: 1em 1.1em; text-decoration: none; color: #fff; border: 1px solid #000; position: relative; overflow: hidden; }
.cta b { font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; }
.cta small { color: rgba(255, 240, 220, 0.85); font-size: 0.86rem; }
.duel-cta { background: linear-gradient(135deg, #8e0f17, #3a0408); box-shadow: inset 0 0 0 1px #ff5a5f, 0 0 24px rgba(196, 30, 42, 0.55); animation: ctaPulse 2.4s ease-in-out infinite; }
.invite-cta { background: linear-gradient(135deg, #8a6a1e, #3a2a08); box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 24px rgba(212, 175, 55, 0.45); }
@keyframes ctaPulse { 50% { transform: scale(1.03); } }
.share { display: grid; gap: 0.8em; }
.btn.big { font-size: 1.1rem; padding: 0.9em 1.6em; }
.code { letter-spacing: 0.2em; color: var(--gold-hi); }
.btn.anoint { color: #c2e6a6; }

/* ---------- Layout 2: tabuleiro maior na web e celular deitado ---------- */
/* Web: o tabuleiro ocupa a altura toda; a barra de ações desce para baixo do retrato da equipe. */
@media (min-width: 1000px) {
  .battle-screen:not(.puzzle-screen) { max-width: 1800px; grid-template-columns: minmax(180px, 1fr) min(calc(100dvh - 64px), 54vw, 1040px) minmax(180px, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top top top" "d0 board d1" "ab board edge"; column-gap: 24px; }
  .edge-line { grid-area: edge; align-self: start; justify-self: center; }
  .actionbar { grid-area: ab; align-self: end; }
  .side-0, .side-1 { align-self: start; margin-top: 8px; }
  .duelist .pframe.big-face { max-height: calc(100dvh - 380px); }
  .abs { justify-content: flex-start; flex-wrap: wrap; }
  .battle-screen:not(.puzzle-screen) .board-host { width: min(calc(100cqw - 2 * var(--fw)), calc(100cqh - 2 * var(--fw)), 1040px); }
}
/* Celular deitado: retratos e barra nas laterais, tabuleiro no meio com a altura toda. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 999px) {
  .battle-screen:not(.puzzle-screen) { max-width: none; grid-template-columns: minmax(0, 1fr) min(calc(100dvh - 44px), 54vw) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top top top" "d0 board d1" "ab board edge"; column-gap: 8px; padding: 0 6px 4px; }
  .duel { display: contents; }
  .battle-top { grid-area: top; padding-top: 2px; }
  .battle-title strong { font-size: 0.72rem; }
  .battle-title .round { font-size: 0.72rem; }
  .battle-screen:not(.puzzle-screen) .btn.small { min-height: 28px; min-width: 28px; }
  .side-0 { grid-area: d0; } .side-1 { grid-area: d1; }
  .edge-line { grid-area: edge; align-self: start; justify-self: center; }
  .edge { grid-auto-flow: column; gap: 6px; padding: 2px 8px; }
  .edge span { writing-mode: horizontal-tb; transform: none; font-size: 0.72rem; }
  .board-wrap { grid-area: board; }
  .board { --fw: 10px; }
  .actionbar { grid-area: ab; align-self: end; padding: 3px 4px; }
  .duelist .side-head { display: none; }
  .duelist .pframe.big-face { max-height: 34dvh; }
  .duelist .big-face::before { border-width: 6px; }
  .plate b { font-size: 0.74rem; }
  .plate small { font-size: 0.7rem; }
  .duelist .bar.hp { height: 13px; } .duelist .bar span { font-size: 0.7rem; line-height: 11px; }
  .duelist .fcard.mini { width: 26px; }
  .duelist .ess span { font-size: 0.7rem; }
  .dock-head { margin-bottom: 1px; }
  .dock-head .ess .vial { width: 16px; height: 18px; }
  .dock-head .ess span { font-size: 0.72rem; }
  .dock-row .ab-label { display: none; }
  .dock-row { grid-template-columns: 1fr; }
  .abs { gap: 4px; flex-wrap: wrap; }
  .ab { width: 40px; }
  .ab .medal { width: 34px; height: 34px; }
  .ab .medal b { font-size: 0.8rem; }
  .ab::before { width: 40px; height: 40px; margin-left: -20px; -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px); mask: radial-gradient(circle, transparent 17px, #000 18px); }
  .ab .who { top: 20px; width: 14px; height: 14px; }
  .ab-name { display: none; }
  .ab-tip { bottom: 8px; left: 8px; right: 8px; }
}

/* ---------- Embate: dois tabuleiros lado a lado ---------- */
.embate-screen .emb-campos { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: 28px; align-items: start; padding: 8px 16px 16px; max-width: 1240px; margin: 0 auto; }
.embate-screen .emb-lado { display: grid; gap: 8px; }
.embate-screen .emb-lado.rival { order: 2; }
.embate-screen .emb-host { position: relative; width: calc(100% - 2 * var(--fw, 20px)); max-width: min(100%, calc(100dvh - 260px)); justify-self: center; margin: var(--fw, 20px) 0; }
.embate-screen .rival .emb-host { --fw: 9px; }
.embate-screen .rival .emb-host { opacity: 0.92; }
.emb-hud { position: relative; display: flex; gap: 10px; align-items: center; padding: 6px 10px; background: rgba(7, 5, 6, 0.82); box-shadow: inset 0 0 0 1px var(--filigree); }
.emb-hud img { width: 46px; height: 46px; object-fit: cover; object-position: top; border: 1px solid var(--filigree-hi); }
.emb-hud > div { flex: 1; display: grid; gap: 4px; }
.emb-hud b { font-size: 0.95rem; letter-spacing: 0.04em; }
.emb-bar { height: 7px; background: #1a1112; box-shadow: inset 0 0 0 1px #000; }
.emb-bar i { display: block; height: 100%; transition: width 0.35s; }
.emb-bar.vida i { background: linear-gradient(90deg, var(--blood), #c4222c); }
.emb-bar.furia { height: 5px; }
.emb-bar.furia i { background: linear-gradient(90deg, #6b3a10, var(--ember)); }
.emb-dano { position: absolute; right: 12px; top: -6px; color: #ff5a4f; font-weight: 700; font-size: 1.3rem; opacity: 0; pointer-events: none; text-shadow: 0 2px 6px #000; }
.emb-dano.show { animation: emb-dano 0.8s ease-out; }
@keyframes emb-dano { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-22px); } }
.emb-tempo { font-variant-numeric: tabular-nums; font-size: 1.1rem; letter-spacing: 0.06em; }
.emb-tempo.urgent { color: #ff5a4f; }
.emb-poderes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.emb-poder { display: grid; gap: 1px; padding: 8px 4px; background: #160e0f; border: 1px solid var(--filigree-hi); color: var(--bone); cursor: pointer; text-align: center; }
.emb-poder small { color: var(--bone-dim); font-size: 0.72rem; }
.emb-poder:not(:disabled) { border-color: var(--ember); box-shadow: 0 0 14px rgba(229, 115, 31, 0.35); }
.emb-poder:disabled { opacity: 0.45; cursor: default; }
/* Celular em pé: o tabuleiro do rival fica pequeno no alto, o seu embaixo. */
@media (max-width: 760px) and (orientation: portrait) {
  .embate-screen .emb-campos { grid-template-columns: 1fr; gap: 8px; padding: 4px 10px 12px; }
  .embate-screen .emb-lado.rival { order: 0; grid-template-columns: 1fr 34%; align-items: center; }
  .embate-screen .rival .emb-host { max-width: 100%; }
  .embate-screen .eu .emb-host { max-width: min(100%, calc(100dvh - 330px)); }
  .emb-poder { padding: 6px 2px; font-size: 0.85rem; }
}
.proposta { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 8px 0 14px; background: rgba(40, 8, 10, 0.55); box-shadow: inset 0 0 0 1px var(--ember); }
.proposta img { width: 64px; height: 64px; object-fit: cover; object-position: top; border: 1px solid var(--filigree-hi); }
.proposta p { margin: 0; }
/* O Embate não usa a grade da batalha por turnos (painéis laterais e área do tabuleiro). */
.battle-screen.embate-screen { display: block; max-width: none; height: auto; min-height: 100dvh; overflow: visible; grid-template-areas: none; }
.embate-screen .battle-top { max-width: 1240px; margin: 0 auto; }
.embate-screen .emb-lado.eu { position: relative; }
/* Classe ainda fechada: retrato apagado, requisito no lugar do título. */
.class-card.locked img { filter: grayscale(1) brightness(0.35); }
.class-card.locked .cap small { color: var(--bone-dim); font-style: italic; }
/* Altar de sangue: escolha de personagens */
.sac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.sac-card { display: grid; gap: 2px; justify-items: center; padding: 8px 6px; background: rgba(12, 8, 9, 0.85); border: 1px solid var(--filigree); color: var(--bone); cursor: pointer; text-align: center; }
.sac-card .portrait { width: 72px; height: 96px; object-fit: cover; object-position: top; }
.sac-card small { color: var(--bone-dim); font-size: 0.78rem; }
.sac-card.on { border-color: var(--blood); box-shadow: 0 0 18px rgba(142, 15, 23, 0.55), inset 0 0 0 1px var(--blood); }
/* Entrar com Google: botão claro, como pede a marca do Google, dentro do tom do jogo. */
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #f2efe8; color: #1f1f1f; border: 1px solid #000; font-family: system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.btn.google:hover { background: #fff; }
.auth-ou { text-align: center; margin: 4px 0 2px; font-size: 0.85rem; }

/* Círculos dos especiais: 3 aros na cor pedida; cheios, mostram a gema pequena (combat.js, receitaDe). */
.circs { display: inline-flex; gap: 3px; vertical-align: middle; }
.circs i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; border: 1.5px solid var(--g); background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 4px #000; }
.circs i.on { background: color-mix(in srgb, var(--g) 35%, #000); box-shadow: 0 0 6px var(--g); }
.circs i.livre { border-style: dotted; }
.circs .gem-ico { width: 13px; height: 13px; margin: 0; }
.ab.skillb::before { display: none; }
.ab.skillb.ready::before { display: block; }
.ab .circs { margin: 2px 0 1px; }

/* Praga lançada por você: só vale contra o adversário; na sua visão aparece pequena no canto da gema. */
.cell .praga-mini { position: absolute; right: 2%; top: 2%; width: 38%; height: 38%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 3px rgba(229, 115, 31, 0.6)); }

/* Confusão: peças somem e voltam ao acaso (board-view.js, confundir). */
.cell .gem { transition: opacity 0.25s; }
.cell.some .gem, .cell.some .praga-mini, .cell.some .sp, .cell.some .sp-corvo { opacity: 0; }
.unica { display: grid; gap: 6px; justify-items: start; }
.unica > small { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* Peças de cada lutador na luta: o número na placa e a lista na ficha (battle-ui.js, infoSheet). */
.plate .gear-n { display: inline-block; margin-left: 6px; font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--bone); background: rgba(0, 0, 0, 0.6); padding: 1px 6px; border: 1px solid var(--filigree-hi); cursor: help; }
.gear-list { display: grid; gap: 6px; margin: 4px 0 10px; }
.gear { display: grid; gap: 1px; padding: 6px 9px; border-left: 3px solid var(--r); background: rgba(0, 0, 0, 0.35); }
.gear small { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r); }
.gear span { font-size: 0.9rem; color: var(--bone); }
.gear em { font-size: 0.82rem; color: var(--bone-dim); }
.turn-banner.broken { color: #ffb3a8; text-shadow: 0 0 12px #8e0f17, 0 2px 2px #000; }

/* Embate: o time de cada lado com o poder de cada um (battle-ui.js, runEmbate). */
.emb-hud { flex-wrap: wrap; }
.emb-time { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.emb-membro { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 3px 7px 3px 3px; border: 1px solid #000; background: rgba(10, 7, 8, 0.85); color: var(--bone-dim); box-shadow: inset 0 0 0 1px var(--filigree); font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.emb-membro img { grid-row: span 2; width: 30px; height: 30px; object-fit: cover; object-position: 50% 20%; }
.emb-membro small { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-membro i { font-style: normal; font-size: 0.76rem; color: var(--ember); }
.emb-membro:disabled { opacity: 0.5; cursor: default; }
.emb-membro.pronto { color: var(--bone); box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(229, 115, 31, 0.45); }
.rival .emb-membro { pointer-events: none; }
.emb-escudo { font-size: 0.8rem; font-weight: 700; color: #ddd2b4; margin-left: 4px; }
/* Dracmas na barra de cima */
.purse a { color: #cfe3ff; text-decoration: none; margin-left: 0.6em; }
/* Peles: o mesmo retrato com outra cor */
.pele-cinzas img { filter: grayscale(1) contrast(1.15) brightness(0.9); }
.pele-sangue img { filter: sepia(0.6) saturate(3) hue-rotate(-30deg) brightness(0.85); }
.pele-ouro img { filter: sepia(1) saturate(2.2) hue-rotate(5deg) brightness(1.1); }
.pele-espectro img { filter: hue-rotate(160deg) saturate(1.4) brightness(1.15); opacity: 0.85; }
.pele-ouro, .pele-espectro { box-shadow: 0 0 14px rgba(230, 190, 90, 0.45); }
.chest .pframe { width: 96px; margin: 0 auto; }
/* Salão do Sacrifício e Vitrine */
.salao, .vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.salao-item, .vit-card { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.35); }
.salao-item .pframe, .vit-card .pframe { width: 84px; }
.vit-card ul { list-style: none; padding: 0; margin: 4px 0 0; font-size: 0.85rem; text-align: left; justify-self: stretch; }
.vit-busca { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.vit-busca input { flex: 1; min-width: 140px; }

/* Ofertas no topo do Santuário: imagem grande, nome e preço; a explicação fica na dica (main.js, ofertasHtml). */
.ofertas { margin-bottom: 14px; }
.ofertas-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.oferta { position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 10px; background: linear-gradient(rgba(20, 14, 12, 0.92), rgba(8, 6, 7, 0.96)); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree), 0 6px 18px rgba(0, 0, 0, 0.5); cursor: help; }
.oferta-img { width: 64px; height: 64px; display: grid; place-items: center; }
.oferta-img .item-ico, .oferta-img .medal { width: 64px; height: 64px; }
.oferta b { font-size: 0.95rem; line-height: 1.2; color: var(--bone); }
.oferta-tag { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 0.7rem; font-weight: 700; color: #1a0b0b; background: var(--ember); padding: 1px 6px; }

/* Dicas do jogo (main.js, iniciarDicas). */
.dica { position: fixed; z-index: 100; max-width: min(320px, calc(100vw - 24px)); padding: 0.6em 0.8em; font-size: 0.95rem; line-height: 1.35; color: var(--bone); background: rgba(10, 7, 8, 0.97); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree-hi), 0 10px 28px #000; pointer-events: none; }
.mode.art[data-dica] { cursor: pointer; }
.mode.art b { font-size: 1rem; text-shadow: 0 1px 3px #000; }
.ab { width: 64px; }
.ab-name { max-width: 64px; }

/* Envio de óbolos (main.js: enviar). */
.form-moedas { display: flex; flex-wrap: wrap; gap: 0.5em 0.8em; align-items: end; margin: 0.8em 0; }
.form-moedas label { display: grid; gap: 0.25em; }
.form-moedas input { width: 9em; }
.form-moedas small { flex-basis: 100%; }
.seq { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 0.4em; }
.seq i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--dust); }
.seq i.on { background: var(--gold, #c9a227); border-color: transparent; }

/* Celular em pé: o tabuleiro ocupa a largura toda. Os retratos viram faixas baixas (rosto, nome, classe e peças)
   e as habilidades e magias ficam numa linha só, para sobrar altura. */
@media (max-width: 760px) and (orientation: portrait) {
  .battle-screen:not(.puzzle-screen):not(.embate-screen) { gap: 3px; }
  .battle-screen:not(.puzzle-screen) .battle-top { padding-top: 2px; }
  .battle-screen:not(.puzzle-screen) .duel, .battle-screen:not(.puzzle-screen) .actionbar { margin: 0; }
  .battle-screen:not(.puzzle-screen) .board { --fw: 9px; }
  .duel { align-items: start; }
  .duelist.side { padding: 3px; }
  .duelist .side-head { display: none; }
  /* Rosto num quadrado do lado de fora; nome, classe e peças ao lado dele */
  .duelist .pframe.big-face { --fh: clamp(62px, 10dvh, 96px); aspect-ratio: auto; height: var(--fh); max-height: none; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .side-1 .pframe.big-face { grid-template-columns: minmax(0, 1fr) auto; }
  .duelist .pframe.big-face .portrait { width: calc(var(--fh) - 4px); height: calc(var(--fh) - 4px); object-fit: cover; object-position: 50% 18%; grid-row: 1; }
  .side-1 .pframe.big-face .portrait { grid-column: 2; }
  .duelist .pframe.big-face .plate { position: static; grid-row: 1; align-content: center; gap: 1px; padding: 2px 8px 2px 5px; background: none; }
  .side-1 .pframe.big-face .plate { grid-column: 1; padding: 2px 5px 2px 8px; }
  .plate b { font-size: 0.8rem; }
  .plate small { font-size: 0.72rem; letter-spacing: 0; text-transform: none; }
  .plate .gear-n { width: auto; justify-self: start; }
  .side-1 .plate .gear-n { justify-self: end; }
  .duelist .reserves { top: 3px; flex-direction: row; gap: 3px; left: 3px; }
  .side-1 .reserves { left: auto; right: 3px; }
  .duelist .fcard.mini { width: 24px; }
  .duelist .bar.hp { height: 15px; margin-top: 3px; }
  .duelist .bar.carga { height: 5px; margin-top: 2px; }
  .duelist .ess { gap: 2px; margin-top: 2px; }
  .duelist .ess span { display: flex; align-items: center; justify-content: center; gap: 1px; padding: 1px 0; }
  .duelist .ess .vial { width: 11px; height: 14px; }
  .duelist .ess b { font-size: 0.7rem; }
  .edge { padding: 4px 2px; }
  /* Barra de baixo: essências numa faixa fina; especiais numa linha e magias na de baixo, cada uma com a largura toda */
  .actionbar { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 3px 4px 4px; }
  .dock-head { grid-column: 1 / -1; margin-bottom: 1px; }
  .dock-head .ess span { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 1px 0; }
  .dock-head .ess .vial { width: 15px; height: 18px; }
  .dock-row { grid-template-columns: minmax(0, 1fr); }
  .dock-row + .dock-row { margin-top: 0; padding-top: 2px; border-top: 1px solid rgba(168, 135, 74, 0.25); }
  .dock-row .ab-label { display: none; }
  .abs { gap: 4px; }
  .ab { width: 52px; }
  .ab .medal { width: 40px; height: 40px; }
  .ab::before { width: 46px; height: 46px; margin-left: -23px; -webkit-mask: radial-gradient(circle, transparent 20px, #000 21px); mask: radial-gradient(circle, transparent 20px, #000 21px); }
  .ab .who { top: 23px; width: 16px; height: 16px; }
  .ab-name { max-width: 52px; }
}

/* ---------- Santuário: topo com equipe e carteira, botões com aviso, popups (main.js: hubTopo, hubBotoes, popup) ---------- */
.hub-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 14px; margin: 4px 0 14px; }
.hub-equipe { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) 56px; gap: 10px; align-items: start; }
.hero-card { position: relative; display: grid; gap: 6px; padding: 6px; text-decoration: none; color: var(--bone); background: linear-gradient(180deg, rgba(20, 12, 13, 0.9), rgba(8, 5, 6, 0.95)); border: 1px solid #000; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, var(--filigree)), 0 10px 24px rgba(0, 0, 0, 0.6); transition: transform 0.15s, box-shadow 0.15s; }
.hero-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--c), 0 0 22px color-mix(in srgb, var(--c) 45%, transparent), 0 12px 28px rgba(0, 0, 0, 0.7); }
.hero-card .pframe { width: 100%; aspect-ratio: 4 / 5; }
.hero-info { display: grid; gap: 2px; padding: 0 2px 2px; }
.hero-info b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-info small { display: flex; align-items: center; gap: 4px; color: var(--bone-dim); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-info .gem-ico { width: 14px; height: 14px; }
.xpbar { height: 6px; margin-top: 3px; background: #1a1213; box-shadow: inset 0 0 0 1px #000; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #6b4a1a, var(--gold-hi)); box-shadow: 0 0 8px rgba(212, 175, 55, 0.5); }
.hero-card.mais { place-content: center; justify-items: center; align-self: stretch; padding: 6px 2px; text-align: center; color: var(--bone-dim); }
.hero-card.mais small { font-size: 0.7rem; line-height: 1.2; }
.hero-card.mais b { font-size: 2.2rem; line-height: 1; color: var(--gold-hi); }
.badge { position: absolute; top: -6px; right: -6px; z-index: 3; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; font-weight: 700; font-size: 0.78rem; line-height: 1; font-style: normal; color: #fff; background: radial-gradient(circle at 35% 30%, #ff5a4f, #a8131c); box-shadow: 0 0 0 2px #0a0708, 0 0 12px rgba(255, 60, 50, 0.7); animation: badgePulse 1.8s ease-in-out 4; } /* pulsa ao chegar e para: pulso infinito custava quadro novo sempre */
@keyframes badgePulse { 50% { transform: scale(1.12); } }

.carteira { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; align-self: start; padding: 10px; background: linear-gradient(180deg, rgba(24, 14, 15, 0.92), rgba(8, 5, 6, 0.95)); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree-hi), 0 10px 24px rgba(0, 0, 0, 0.6); }
.moeda { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 30px 6px 8px; text-align: left; color: var(--bone); background: rgba(7, 5, 6, 0.75); border: 0; box-shadow: inset 0 0 0 1px rgba(168, 135, 74, 0.25); cursor: pointer; font: inherit; }
.moeda:hover { box-shadow: inset 0 0 0 1px var(--gold-hi); }
.moeda img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
.moeda span { display: grid; line-height: 1.1; min-width: 0; }
.moeda b { font-size: 1.15rem; color: var(--gold-hi); }
.moeda small { font-size: 0.72rem; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mais-moeda { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 700; color: #120a07; background: var(--gold-hi); box-shadow: 0 0 8px rgba(212, 175, 55, 0.6); }
.como-ganhar { grid-column: 1 / -1; padding: 8px; font: inherit; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-hi); background: transparent; border: 1px dashed rgba(212, 175, 55, 0.45); cursor: pointer; }
.como-ganhar:hover { background: rgba(212, 175, 55, 0.08); }

.hub-botoes { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.hub-btn { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; width: 82px; padding: 4px 0 0; border: 0; background: none; color: var(--bone); cursor: pointer; font: inherit; }
.hub-ico { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #2a1c1d, #0a0708 75%); box-shadow: 0 0 0 2px #0a0708, 0 0 0 4px var(--filigree-hi), 0 6px 14px #000; transition: transform 0.15s, box-shadow 0.15s; }
.hub-ico img { width: 100%; height: 100%; object-fit: cover; }
.hub-btn:hover .hub-ico { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 2px #0a0708, 0 0 0 4px var(--gold-hi), 0 0 18px rgba(212, 175, 55, 0.45); }
.hub-btn b { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hub-btn small { font-size: 0.72rem; color: #ff9a3c; }
.hub-btn .badge { top: 0; right: 4px; }
.moon .link { margin-left: auto; }

.popup { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(4, 2, 3, 0.78); backdrop-filter: blur(3px); }
.popup-box { width: min(920px, 100%); max-height: min(86dvh, 900px); display: grid; grid-template-rows: auto minmax(0, 1fr); background: linear-gradient(180deg, #170d0f, #0a0708); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--filigree-hi), 0 0 0 1px #000, 0 30px 80px #000; }
.popup-box header { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 12px 16px; border-bottom: 1px solid rgba(168, 135, 74, 0.25); }
.popup-box h3 { margin: 0; letter-spacing: 0.3em; text-transform: uppercase; font-size: 1rem; color: var(--gold-hi); }
.popup-x { width: 36px; height: 36px; border: 0; background: transparent; color: var(--bone); font-size: 1.2rem; cursor: pointer; }
.popup-x:hover { color: var(--gold-hi); }
.popup-corpo { overflow-y: auto; padding: 12px 16px 18px; }
.popup .ofertas-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.recados { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recados a { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; text-decoration: none; color: var(--bone); background: rgba(7, 5, 6, 0.7); box-shadow: inset 0 0 0 1px rgba(168, 135, 74, 0.25); }
.recados a:hover { box-shadow: inset 0 0 0 1px var(--gold-hi); }
.recados img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--filigree-hi); }
.recados i { font-style: normal; font-size: 1.4rem; color: var(--gold-hi); }
.ganhar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ganhar h4 { margin: 0 0 6px; color: var(--gold-hi); letter-spacing: 0.08em; }
.ganhar ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.ganhar a { color: var(--bone); }

/* Ofertas: ícone de magia com a imagem por cima das iniciais, preço com a moeda */
.oferta .medal { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #2a2224, #0c090a 75%); box-shadow: 0 0 0 2px #0a0809, 0 0 0 3px var(--filigree-hi); }
.oferta .medal b { color: var(--bone-dim); }
.oferta .medal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preco { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-weight: 700; font-size: 1rem; line-height: 1; font-family: inherit; color: #120a07; background: linear-gradient(180deg, #e8c766, #a8874a); border: 0; box-shadow: 0 0 0 1px #000, 0 4px 10px rgba(0, 0, 0, 0.6); cursor: pointer; }
.preco:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(212, 175, 55, 0.6); }
.preco:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.6); }

@media (max-width: 760px) {
  .hub-topo { grid-template-columns: 1fr; }
  .hub-equipe { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) 40px; gap: 6px; }
  .hero-card { padding: 4px; gap: 4px; }
  .hero-info b { font-size: 0.8rem; }
  .hero-info small { font-size: 0.7rem; }
  .hero-card.mais { min-height: 0; }
  .hub-botoes { gap: 6px; justify-content: space-between; flex-wrap: nowrap; overflow-x: auto; }
  .hub-btn { width: 64px; flex: none; }
  .hub-ico { width: 52px; height: 52px; }
  .hub-btn b { font-size: 0.7rem; letter-spacing: 0.02em; }
  .popup { padding: 8px; align-items: end; }
  .popup-box { max-height: 88dvh; }
  .popup .ofertas-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Quebra-cabeças (Saque, Ritual, Ampulheta): tabuleiro ocupa todo o espaço livre, em qualquer tela ---------- */
.battle-screen.puzzle-screen { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "hud" "board" "tip"; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100dvh; min-height: 0; overflow: hidden; max-width: 1100px; margin: 0 auto; padding: 0 10px 10px; gap: 6px; }
.puzzle-screen .battle-top { grid-area: top; }
.puzzle-screen .puzzle-hud { grid-area: hud; justify-self: center; gap: 28px; }
.puzzle-screen .board-wrap { grid-area: board; container-type: size; min-height: 0; min-width: 0; align-self: stretch; justify-self: stretch; display: grid; place-items: center; }
.puzzle-screen .board-host { width: min(calc(100cqw - 2 * var(--fw, 16px)), calc(100cqh - 2 * var(--fw, 16px)), 900px); }
.puzzle-screen .puzzle-tip { grid-area: tip; margin: 0; text-align: center; }

/* Ficha: abas no topo do corpo, escolha de peça e artefato num popup (main.js, ficha) */
.ficha-tabs { position: sticky; top: 64px; z-index: 5; padding: 6px 0; background: linear-gradient(180deg, rgba(10, 7, 8, 0.96) 70%, transparent); }
.ficha-tabs .tab { position: relative; font-family: inherit; color: var(--bone); cursor: pointer; }
.ficha-tabs .badge { top: -8px; right: -8px; }
.ficha-aba { animation: abaEntra 0.2s ease-out; }
@keyframes abaEntra { from { opacity: 0; transform: translateY(6px); } }
.slot.vazio { border-style: dashed; opacity: 0.85; }
.popup.picker .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.em-uso { margin: 0; color: var(--gold-hi); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; }
@media (max-width: 899px) {
  .sheet-page { gap: 12px; }
  .sheet-page .create-preview { grid-template-columns: 92px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; column-gap: 14px; row-gap: 2px; }
  .sheet-page .create-preview .pframe { grid-row: 1 / 4; width: 92px; height: auto; aspect-ratio: 4 / 5; }
  .sheet-page .create-preview h2 { margin: 0; font-size: 1.3rem; }
  .sheet-page .create-preview p { margin: 0; }
  .sheet-page .create-preview .bar { width: 100%; }
  .ficha-tabs { top: 56px; flex-wrap: nowrap; }
  .ficha-tabs .tab { flex: 1 1 0; min-width: 0; padding: 0.7em 0.2em; letter-spacing: 0.06em; text-align: center; }
}

/* Ficha: mão de batalha (os 3 poderes que vão para a luta) */
.mao { padding: 10px 12px 4px; margin-bottom: 8px; background: rgba(7, 5, 6, 0.6); box-shadow: inset 0 0 0 1px var(--filigree-hi); }
.mao h3 { margin-top: 0; }
.mao h3 em { display: block; margin-top: 2px; }
.mao-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mao-item { display: grid; justify-items: center; gap: 4px; width: 76px; text-align: center; }
.mao-item .medal { position: relative; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #2a2224, #0c090a 75%); box-shadow: 0 0 0 2px #0a0809, 0 0 0 3px var(--gold-hi), 0 6px 14px #000; }
.mao-item .medal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mao-item small { font-size: 0.74rem; line-height: 1.15; }
.mao-item.vaga .medal { box-shadow: 0 0 0 2px #0a0809; border: 1px dashed rgba(212, 175, 55, 0.5); }
.mao-item.vaga small { color: var(--bone-dim); }
.skill-list li.vai { box-shadow: inset 3px 0 0 var(--gold-hi); padding-left: 10px; }
.skill-list li .btn.small { margin-left: 6px; vertical-align: middle; }

/* Luta no computador: o retrato fica inteiro e a barra de poderes usa o espaço que sobra embaixo, com rolagem se precisar */
@media (min-width: 1000px) {
  .battle-screen:not(.puzzle-screen) { grid-template-rows: auto auto minmax(0, 1fr); }
  .actionbar { align-self: start; max-height: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; margin-top: 4px; }
  .duelist .pframe.big-face { max-height: max(200px, calc(100dvh - 510px)); }
}

/* Cartão da equipe: a classe encolhe com reticências, o nível fica sempre inteiro; no celular o nível desce para a linha de baixo */
.hero-info .hc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-info .nv { flex: none; font-style: normal; margin-left: auto; color: var(--gold-hi); }
@media (max-width: 760px) { .hero-info small { flex-wrap: wrap; row-gap: 0; } .hero-info .hc { flex: 1 1 0; } .hero-info .nv { flex-basis: 100%; margin-left: 0; } }
/* Título de seção com legenda: a legenda desce para baixo quando não cabe ao lado */
.hub-head { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
.hub-head h3 { white-space: nowrap; }

/* ==========================================================================
   Celular: tabuleiro grande (aval-layout 4.1 a 4.5) e modo leve (aval-desempenho)
   Vem por último de propósito: ganha por ordem dos blocos de celular anteriores.
   ========================================================================== */

/* ---------- Duelo em pé: tabuleiro na largura toda; retratos ficam com a sobra; poderes numa linha ---------- */
@media (max-width: 760px) and (orientation: portrait) {
  .battle-screen:not(.puzzle-screen):not(.embate-screen) {
    grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 3px;
    padding: env(safe-area-inset-top) 4px calc(4px + env(safe-area-inset-bottom));
  }
  .battle-screen:not(.puzzle-screen):not(.embate-screen) .battle-top { min-height: 34px; padding-top: 0; }
  .battle-screen:not(.puzzle-screen) .board { --fw: 6px; }
  /* tabuleiro encostado embaixo, perto do polegar; a folga fica em cima */
  .battle-screen:not(.puzzle-screen):not(.embate-screen) .board-wrap { display: grid; place-items: end center; }
  /* retrato: 48 px no mínimo, cresce só com a altura que sobra depois do tabuleiro na largura toda */
  .duelist .pframe.big-face { --fh: clamp(48px, calc(100dvh - 100vw - 156px), 76px); }
  .duelist .big-face::before { border-width: 5px; }
  /* placa: nome numa linha, classe e peças na de baixo (cabe no retrato de 48 px) */
  .duelist .pframe.big-face .plate { display: flex; flex-wrap: wrap; align-content: center; column-gap: 4px; row-gap: 1px; padding: 2px 6px 2px 4px; }
  .side-1 .pframe.big-face .plate { justify-content: flex-end; padding: 2px 4px 2px 6px; }
  .duelist .plate b { flex: 1 0 100%; }
  .duelist .plate small { flex: 0 1 auto; min-width: 0; }
  .duelist .plate .gear-n { position: absolute; left: 7px; bottom: 7px; z-index: 4; margin: 0; padding: 0 3px; font-size: 0.62rem; line-height: 1.3; }
  .side-1 .plate .gear-n { left: auto; right: 7px; }
  /* essências do rival: frasco e número lado a lado, numa faixa baixa */
  .duelist .ess span { flex-direction: row; gap: 2px; }
  .duelist .bar.hp { height: 14px; margin-top: 2px; }
  .duelist .bar span { line-height: 12px; }
  .duelist .bar.carga { height: 4px; }
  /* barra de poderes: essências e medalhas numa linha só, rolagem lateral se não couber */
  .actionbar { display: flex; align-items: center; gap: 6px; padding: 2px 4px; overflow-x: auto; scrollbar-width: none; }
  .actionbar::-webkit-scrollbar { display: none; }
  .dock-head { flex: none; margin: 0; }
  .dock-head .ess { display: grid; grid-template-columns: repeat(6, 21px); gap: 2px; }
  .dock-head .ess span { padding: 1px 0; }
  .dock-head .ess .vial { width: 12px; height: 15px; }
  .dock-row { display: contents; }
  .dock-row + .dock-row { border-top: 0; padding-top: 0; }
  .dock-row .ab-label { display: none; }
  .abs { flex: none; gap: 6px; padding: 3px 0 0; overflow: visible; }
  .ab { width: 46px; }
  .ab .medal { width: 44px; height: 44px; }
  .ab::before { width: 50px; height: 50px; margin-left: -25px;
    -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px); mask: radial-gradient(circle, transparent 22px, #000 23px); }
  .ab .who { top: 26px; }
  .ab-name { display: none; } /* o nome aparece no .ab-tip ao tocar */
  /* círculos da receita sobre a borda de baixo da medalha, para a linha ficar com 52 px */
  .ab .circs { position: absolute; left: 50%; top: 35px; transform: translateX(-50%); margin: 0; gap: 2px; z-index: 2; }
  .ab .circs i { width: 12px; height: 12px; border-width: 1px; background: rgba(0, 0, 0, 0.85); }
  .ab .circs .gem-ico { width: 10px; height: 10px; }
  .ab-tip { bottom: 64px; }
}

/* Tela alta (altura >= 5/3 da largura): sobra altura depois do tabuleiro; o retrato volta a ser a foto larga com a placa por cima
   e cresce até ocupar a sobra (até 80vw de altura), para não ficar um vão entre os retratos e o tabuleiro */
@media (max-width: 760px) and (orientation: portrait) and (max-aspect-ratio: 3/5) {
  .duelist .pframe.big-face { --fh: clamp(76px, calc(100dvh - 100vw - 156px), 80vw); display: block; }
  .duelist .pframe.big-face .portrait { width: 100%; height: 100%; object-position: 50% 16%; }
  .duelist .pframe.big-face .plate { position: absolute; left: 0; right: 0; bottom: 0; display: grid; align-content: end; row-gap: 0; padding: 16px 9px 7px; background: linear-gradient(transparent, rgba(5, 3, 4, 0.92) 55%); }
  .side-1 .pframe.big-face .plate { padding: 16px 9px 7px; }
  .duelist .plate .gear-n { position: static; justify-self: start; margin-top: 2px; }
  .side-1 .plate .gear-n { justify-self: end; }
}

/* ---------- Duelo deitado: topo no alto da coluna da esquerda; tabuleiro com a altura toda ---------- */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 999px) {
  .battle-screen:not(.puzzle-screen):not(.embate-screen) {
    grid-template-columns: minmax(0, 1fr) min(calc(100dvh - 8px), 56vw) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top board d1" "d0 board d1" "ab board edge";
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left));
    column-gap: 6px; row-gap: 3px;
  }
  .battle-screen:not(.puzzle-screen):not(.embate-screen) .battle-top { padding: 0; min-height: 0; }
  .duelist .plate .gear-n { justify-self: start; }
  .side-1 .plate .gear-n { justify-self: end; }
  .battle-screen:not(.puzzle-screen) .board { --fw: 6px; }
  .duelist .pframe.big-face { max-height: 30dvh; }
  .actionbar { overflow-y: auto; scrollbar-width: none; }
  .ab { width: 46px; }
  .ab .medal { width: 44px; height: 44px; }
  .ab::before { width: 50px; height: 50px; margin-left: -25px;
    -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px); mask: radial-gradient(circle, transparent 22px, #000 23px); }
  .ab .who { top: 26px; }
  .ab .circs { position: absolute; left: 50%; top: 35px; transform: translateX(-50%); margin: 0; gap: 2px; z-index: 2; }
  .ab .circs i { width: 12px; height: 12px; border-width: 1px; background: rgba(0, 0, 0, 0.85); }
  .ab .circs .gem-ico { width: 10px; height: 10px; }
}

/* ---------- Quebra-cabeça (Ritual, Saque, Ampulheta) ---------- */
.puzzle-screen .board-host { min-width: 0; } /* o min-width: 260px geral cortava a última fileira deitado */
@media (max-width: 760px) {
  .battle-screen.puzzle-screen { padding: env(safe-area-inset-top) 4px calc(4px + env(safe-area-inset-bottom)); gap: 4px; }
  .puzzle-screen .board { --fw: 8px; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 999px) {
  .battle-screen.puzzle-screen { max-width: none; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "top board" "hud board" "tip board"; align-content: start; column-gap: 10px;
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
  .puzzle-screen .board-wrap { grid-row: 1 / -1; width: calc(100dvh - 8px); height: calc(100dvh - 8px); }
  .puzzle-screen .board { --fw: 8px; }
  .puzzle-screen .puzzle-hud { justify-self: stretch; gap: 12px; }
  .puzzle-screen .puzzle-tip { align-self: start; }
}

/* ---------- Embate em pé: seu tabuleiro com a largura toda, rival pequeno ao lado do HUD ---------- */
@media (max-width: 760px) and (orientation: portrait) {
  .battle-screen.embate-screen { padding-top: env(safe-area-inset-top); }
  .embate-screen .battle-top { padding: 0 4px; min-height: 34px; }
  .embate-screen .battle-title .round { display: none; } /* repetia "Embate" */
  /* os dois HUDs empilhados à esquerda do tabuleiro pequeno do rival; o seu tabuleiro embaixo com a largura toda */
  .embate-screen .emb-campos { grid-template-columns: minmax(0, 1fr) 34%; grid-template-areas: "rhud rhost" "ehud rhost" "host host" "pod pod";
    align-items: center; padding: 2px 4px calc(4px + env(safe-area-inset-bottom)); gap: 4px; }
  .embate-screen .emb-lado.rival, .embate-screen .emb-lado.eu { display: contents; }
  .embate-screen .rival .emb-hud { grid-area: rhud; }
  .embate-screen .eu .emb-hud { grid-area: ehud; }
  .embate-screen .rival .emb-host { grid-area: rhost; max-width: none; margin: 9px; width: calc(100% - 18px); }
  .embate-screen .eu .emb-host { grid-area: host; --fw: 6px; width: calc(100% - 12px); max-width: min(calc(100% - 12px), calc(100dvh - 260px)); margin: 6px 0; }
  .embate-screen .eu .turn-banner { grid-area: host; }
  .embate-screen .eu .emb-poderes { grid-area: pod; }
  .rival .emb-membro { grid-template-columns: 24px auto; padding: 2px 5px 2px 2px; }
  .rival .emb-membro img { width: 24px; height: 24px; }
  .rival .emb-membro small { display: none; }
  .emb-hud { padding: 4px 6px; gap: 8px; }
  .emb-hud img { width: 38px; height: 38px; }
  .emb-time { margin-top: 2px; }
  .emb-poderes { gap: 4px; }
  .emb-poder { min-height: 44px; padding: 4px 2px; }
}

/* ---------- Embate deitado: HUD e poderes à esquerda, seu tabuleiro no meio com a altura toda, rival à direita ---------- */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 999px) {
  .battle-screen.embate-screen { display: grid; height: 100dvh; min-height: 0; overflow: hidden; column-gap: 8px; row-gap: 4px;
    grid-template-columns: minmax(0, 1fr) min(calc(100dvh - 8px), 50vw) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "top board rival" "hud board rival" "pod board rival";
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
  .embate-screen .battle-top { grid-area: top; max-width: none; margin: 0; padding: 0; }
  .embate-screen .emb-campos, .embate-screen .emb-lado.eu { display: contents; }
  .embate-screen .emb-lado.rival { grid-area: rival; align-self: start; display: grid; gap: 4px; }
  .embate-screen .eu .emb-hud { grid-area: hud; }
  .embate-screen .eu .emb-host { grid-area: board; align-self: center; --fw: 6px; width: calc(100% - 12px); max-width: none; margin: 6px; }
  .embate-screen .rival .emb-host { width: calc(100% - 18px); max-width: min(calc(100% - 18px), calc(100dvh - 150px)); margin: 9px auto; }
  .embate-screen .eu .turn-banner { grid-area: board; }
  .embate-screen .eu .emb-poderes { grid-area: pod; align-self: end; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .emb-poder { min-height: 44px; padding: 3px 2px; font-size: 0.85rem; }
  .emb-hud { padding: 4px 6px; gap: 6px; }
  .emb-hud img { width: 34px; height: 34px; }
  .emb-hud b { font-size: 0.85rem; }
  .emb-time { margin-top: 2px; gap: 4px; }
}

/* ---------- Santuário no celular: card de herói menor, modos de jogo sobem para a primeira tela ---------- */
@media (max-width: 760px) {
  .hub-equipe { grid-template-columns: repeat(var(--n, 3), minmax(0, 132px)) 40px; justify-content: start; }
  .hero-card .pframe { max-height: 24dvh; }
}

/* ==========================================================================
   Modo leve: a classe .leve vai em <html> em aparelho fraco (fx.js). Nada de paleta,
   tipografia ou cenário muda; só param os efeitos que recalculam a cada quadro.
   ========================================================================== */
.leve *, .leve *::before, .leve *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.leve .sheet { background: rgba(4, 3, 4, 0.94); }
.leve .popup { background: rgba(4, 2, 3, 0.9); }
.leve .topbar { background: linear-gradient(rgba(7, 5, 6, 0.98), rgba(7, 5, 6, 0.9)); }
.leve .cell .gem { filter: none; }
/* brilhos infinitos parados */
.leve .cell .sp-1::before, .leve .cell .sp-2::before, .leve .cell.t7 .gem, .leve .fcard.mini.can-swap .pframe, .leve .stop.next,
.leve .duel-cta, .leve .node.next { animation: none; }
.leve .cell .sp-3::after, .leve .item.rar-4 .item-ico::after { animation: none; opacity: 0.5; }
.leve .st-ferido .pframe::after { animation: none; opacity: 0.86; }
.leve .cell.t6.s4 .obst, .leve .cell.t6.s5 .obst, .leve .cell.t6.s6 .obst, .leve .cell.t6.s7 .obst { animation: none; }
/* clarões dos efeitos de combate sem mistura de camadas */
.leve .vx, .leve .vx::before, .leve .vx::after { mix-blend-mode: normal !important; }

/* Embate no celular: o card do herói mostra rosto e custo; o nome do poder aparece ao segurar o dedo (dica) */
@media (max-width: 999px) {
  .eu .emb-membro { grid-template-columns: 30px auto; }
  .eu .emb-membro small { display: none; }
}

/* Jogadores online */
.online-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.online-j { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: rgba(7, 5, 6, 0.7); box-shadow: inset 0 0 0 1px var(--filigree-hi); }
.online-j span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Topo: loja e equipamentos sempre à vista ---------- */
.topo-dir { display: flex; align-items: center; gap: 0.5em; }
.topo-ico { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35em 0.55em; border: 1px solid var(--filigree); background: rgba(20, 14, 12, 0.85); color: var(--gold-hi); text-decoration: none; line-height: 1; }
.topo-ico svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.topo-ico b { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
/* brilho num ::after que só muda a opacidade: roda no compositor, sem repintar a sombra a cada quadro */
.topo-ico.loja { position: relative; background: linear-gradient(#e2b44f, #a8761f); color: #1a0f05; border-color: #f3d27a; box-shadow: 0 0 12px rgba(226, 180, 79, 0.45); }
.topo-ico.loja::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 20px rgba(226, 180, 79, 0.8); opacity: 0; animation: loja-brilho 3.2s ease-in-out 3; }
@keyframes loja-brilho { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .topo-ico.loja::after { animation: none; } }
@media (max-width: 520px) { .topo-ico b { display: none; } .topbar .purse a { margin-left: 0.3em; } .topbar h2 { letter-spacing: 0.16em; font-size: 0.8rem; } }

/* ---------- Social: foto, brasões, listas de jogadores, ranque ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; object-fit: cover; border: 1px solid var(--filigree-hi); background: radial-gradient(circle at 35% 30%, var(--c, #6b5a4a), #120c0a); color: #f4e6c8; font-weight: bold; }
.avatar.mini { width: 1.6em; height: 1.6em; font-size: 0.75em; vertical-align: middle; }
.avatar.grande { width: 5.5em; height: 5.5em; font-size: 1.6em; }
.brasao { display: inline-block; width: 1.05em; height: 1.25em; margin-right: 0.2em; vertical-align: middle; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); outline: 1px solid #000; }
.online-j { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7em; }
.online-j .j-nome { flex: 1 1 10em; min-width: 0; display: grid; overflow-wrap: normal; }
.online-j .j-nome small { overflow-wrap: normal; }
.online-j .j-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-j .j-acoes { display: flex; flex-wrap: wrap; margin-left: auto; gap: 0.35em; justify-content: flex-end; align-items: center; }
.online-j.fora { opacity: 0.6; }
.online-j.eu { outline: 1px solid var(--gold-hi); }
.ranque .pos { min-width: 2.4em; text-align: right; color: var(--gold-hi); font-weight: bold; }
.ranque { padding-left: 0; list-style: none; }
.perfil-topo { display: flex; gap: 1em; align-items: center; flex-wrap: wrap; }
.perfil-topo h3 { margin: 0 0 0.2em; }
.perfil-topo p { margin: 0.2em 0; }
.chave { display: flex; gap: 0.7em; align-items: flex-start; margin: 0.8em 0; padding: 0.7em 0.9em; border: 1px solid var(--filigree); background: rgba(12, 8, 7, 0.7); cursor: pointer; }
.chave input { width: 1.3em; height: 1.3em; margin-top: 0.15em; accent-color: #c9a35a; flex: none; }
.chave span { display: grid; gap: 0.2em; }
.chamado { display: flex; gap: 0.9em; align-items: center; }

/* Duelo por cima de uma luta pausada: a luta fica escondida por baixo, intacta. */
.camada-duelo { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: #070506; }
.pausado { visibility: hidden; }
.popup.tutorial .popup-box { width: min(560px, 100%); }
.popup.tutorial .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.popup.tutorial header .muted { white-space: nowrap; }

/* ---------- Duelo contra outra pessoa: perfis no alto, selo da vez, chat ---------- */
.perfis { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px 2px 0; }
.perfil { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; opacity: 0.62; transition: opacity 0.2s; }
.perfil.on, .embate-screen .perfil { opacity: 1; }
.perfil.p-1 { flex-direction: row-reverse; text-align: right; }
.perfil .avatar.perfil-av { width: 36px; height: 36px; font-size: 1rem; }
.perfil.on .avatar { box-shadow: 0 0 0 2px var(--ember), 0 0 12px rgba(229, 115, 31, 0.6); }
.perfil-n { display: grid; min-width: 0; line-height: 1.1; }
.perfil-n b { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-n small { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dust); }
.vez-selo { padding: 4px 9px; border: 1px solid var(--filigree-hi); background: rgba(5, 3, 4, 0.82); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--bone-dim); white-space: nowrap; max-width: 36vw; overflow: hidden; text-overflow: ellipsis; }
.vez-selo.minha { color: #1a0d05; background: var(--ember); border-color: var(--ember); }
.fala { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; max-width: min(60vw, 280px); padding: 4px 8px; background: #f4e6c8; color: #120c0a; font-style: normal; font-size: 0.85rem; line-height: 1.25; border-radius: 6px; box-shadow: 0 3px 10px #000; overflow-wrap: anywhere; }
.p-1 .fala { left: auto; right: 0; }
.top-acoes { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.chat-btn { position: relative; display: inline-grid; place-items: center; }
.chat-n { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: var(--blood); color: #fff; font-size: 0.7rem; font-style: normal; font-weight: 700; line-height: 17px; text-align: center; }
.chat-painel { position: absolute; z-index: 30; top: 96px; right: 6px; width: min(340px, calc(100% - 12px)); display: grid; gap: 6px; padding: 8px; background: rgba(10, 7, 8, 0.97); border: 1px solid var(--filigree-hi); box-shadow: 0 8px 24px #000; }
.chat-lista { list-style: none; margin: 0; padding: 0; max-height: 32dvh; overflow-y: auto; display: grid; gap: 4px; font-size: 0.92rem; overflow-wrap: anywhere; }
.chat-lista li.meu { text-align: right; color: var(--bone-dim); }
.chat-lista b { color: var(--ember); margin-right: 3px; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; font-size: 16px; }
.chat-painel[hidden], .fala[hidden], .chat-n[hidden] { display: none; }
/* Com a faixa de perfis, o nome já está no alto: as cartas das equipes encolhem */
.com-perfis .duelist .side-head { display: none; }
.com-perfis .duelist .pframe.big-face { max-height: 15dvh; }
@media (max-width: 760px) and (orientation: portrait) and (max-aspect-ratio: 3/5) {
  .com-perfis .duelist .pframe.big-face { --fh: clamp(60px, calc(100dvh - 100vw - 196px), 80vw); max-height: none; }
}
@media (min-width: 1000px) {
  .com-perfis .duelist .pframe.big-face { max-height: 32dvh; }
  .embate-screen.com-perfis .eu .emb-host { max-width: min(100%, calc(100dvh - 340px)); }
  .perfil .avatar.perfil-av { width: 44px; height: 44px; }
  .perfil-n b { font-size: 1.05rem; }
}
/* Deitado: a coluna do topo é estreita; título numa linha só embaixo dos botões e perfis compactos */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 999px) {
  .com-perfis .battle-top { grid-template-columns: auto 1fr auto; grid-template-areas: "sair . acoes" "titulo titulo titulo" "perfis perfis perfis"; row-gap: 2px; }
  .com-perfis .battle-top [data-act="sair"] { grid-area: sair; }
  .com-perfis .battle-top .top-acoes { grid-area: acoes; }
  .com-perfis .battle-title { grid-area: titulo; }
  .com-perfis .battle-title strong { display: none; }
  .com-perfis .battle-title .round { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; }
  .perfis { grid-area: perfis; gap: 4px; padding-top: 0; }
  .perfil { gap: 4px; }
  .perfil-n small { display: none; }
  .perfil-n b { font-size: 0.8rem; }
  .vez-selo { padding: 2px 6px; font-size: 0.66rem; letter-spacing: 0.06em; }
  .perfil .avatar.perfil-av { width: 26px; height: 26px; font-size: 0.8rem; }
  .chat-painel { top: 8px; }
  .com-perfis .duelist .pframe.big-face { max-height: 28dvh; }
  .embate-screen .perfis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .embate-screen .vez-selo { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .embate-screen .perfil.p-1 { flex-direction: row-reverse; text-align: right; }
}
.modo-desafio { display: grid; gap: 4px; margin: 10px 0; }
.modo-chamado { font-weight: 700; color: var(--ember); }