/* Mesa de jogo: feltro verde como tampo, cartas de pergaminho por cima, lacre vermelho para o que exige ação.
   Layout: coluna principal = a conversa do capítulo (linha do tempo); coluna lateral = ferramentas/ficha. Tema único e deliberado. */
:root {
  --felt: #1d352f;
  --felt-2: #26453c;
  --felt-3: #31574c;
  --line: #3f6a5d;
  --on-felt: #e9efe9;
  --muted: #a9bfb5;
  --parch: #f2e5c6;
  --parch-2: #e6d4ab;
  --ink: #2b2118;
  --ink-soft: #6a5642;
  --wax: #a8362a;
  --wax-2: #c8473a;
  --gold: #e0ad4a;
  --ok: #5fb37e;
  --bad: #e0685a;
  --f-display: "Grenze Gotisch", "Palatino Linotype", Georgia, serif;
  --f-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --r: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--felt); color: var(--on-felt); }
body { font-family: var(--f-body); font-size: 16px; line-height: 1.45; margin: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--felt-2), var(--felt) 70%) fixed; min-height: 100vh; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
input, select, textarea { font: inherit; }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; text-wrap: balance; margin: 0; letter-spacing: .01em; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.empty { color: var(--muted); font-style: italic; font-size: 15px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* barra */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: color-mix(in srgb, var(--felt) 88%, black); border-bottom: 1px solid var(--line); }
.bar h1 { font-size: 22px; color: var(--gold); flex: 1 1 auto; min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; padding: 6px 14px; font-weight: 700; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.conn { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.conn.on i { background: var(--ok); }

/* grade geral */
.wrap { padding-inline: 16px; padding-block: 16px 96px; margin: 0 auto; }
.player { max-width: 1120px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
.player.pick-mode { max-width: 900px; grid-template-columns: minmax(0, 1fr); }
.gm { max-width: 1440px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.col { display: grid; gap: 14px; min-width: 0; }
.side { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 80px); overflow: auto; display: grid; grid-auto-rows: max-content; gap: 12px; min-width: 0; padding-bottom: 8px; align-content: start; }
@media (max-width: 960px) {
  .player, .gm { grid-template-columns: minmax(0, 1fr); }
  .gm .side { position: static; max-height: none; overflow: visible; }
  .player .side { display: none; }
}

/* cartas e painéis */
.card { background: var(--parch); color: var(--ink); border-radius: var(--r); box-shadow: 0 2px 0 var(--parch-2), 0 10px 28px rgba(0,0,0,.35); overflow: hidden; }
.card .pad { padding: 16px; }
.card h2 { font-size: 26px; }
.card h3 { font-size: 20px; }
.card .eyebrow { color: var(--ink-soft); }
.panel { background: var(--felt-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; min-width: 0; }
.panel > h3 { font-size: 20px; color: var(--gold); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.panel > h3 small { font-family: var(--f-body); font-size: 13px; color: var(--muted); font-weight: 500; }

/* linha do tempo do capítulo */
.tl { display: grid; gap: 10px; min-width: 0; }
.tl.gmtl { max-height: 62vh; overflow: auto; padding-right: 4px; }
.scene-img { position: relative; aspect-ratio: 3 / 2; max-width: 100%; background: var(--felt-3) center / cover no-repeat; }
.scene-img .ttl { position: absolute; inset: auto 0 0 0; padding: 40px 16px 12px; background: linear-gradient(transparent, rgba(20,14,8,.85)); }
.scene-img h2 { color: var(--parch); font-size: clamp(26px, 5vw, 36px); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.scene-text { font-size: 19px; line-height: 1.5; margin: 0; }
.ev-passo .pad { display: grid; gap: 8px; }
.ev-passo p { margin: 0; font-size: 18px; line-height: 1.5; }
.ev-passo.old p { font-size: 16px; color: var(--ink-soft); }
.ev-passo .who { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nimg { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.nimg img { width: 100%; border-radius: 8px; display: block; }
.ev-passo.old .nimg { max-width: 260px; }
.bub { justify-self: end; max-width: 86%; background: var(--felt-3); border: 1px solid var(--line); border-radius: 12px 12px 2px 12px; padding: 8px 12px; min-width: 0; }
.bub .who { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bub p { margin: 2px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.bub.feito { border-color: var(--ok); }
.tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--line); color: var(--on-felt); }
.tag.imp { background: var(--wax); color: #fff; }
.tag.ok { background: var(--ok); color: #0d2016; }
.ev-ped { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.ev-ped svg { width: 22px; height: 22px; flex: none; }
.ev-ped b { color: var(--gold); }
.ev-ped::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.tl-end { height: 1px; }

/* rolagens */
.log { display: grid; gap: 6px; }
.roll { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--felt-3); border-radius: 8px; padding: 8px 10px; }
.roll .tot { font-family: var(--f-display); font-size: 30px; line-height: 1; text-align: center; color: var(--parch); }
.roll .tot.nat20 { color: var(--gold); }
.roll .tot.nat1 { color: var(--bad); }
.roll .who { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.roll .txt { font-weight: 700; overflow-wrap: anywhere; }
.roll .det { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.roll .acts { display: grid; gap: 4px; justify-items: end; }
.verdict { font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.verdict.ok { background: var(--ok); color: #0d2016; }
.verdict.bad { background: var(--bad); color: #2a0b07; }
.verdict.crit { box-shadow: 0 0 0 2px var(--gold); }

/* zona de ação do jogador */
.zone { display: grid; gap: 10px; }
.ask { background: var(--wax); color: #fff; border-radius: var(--r); padding: 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 10px 28px rgba(0,0,0,.35); animation: pulse 1.8s ease-in-out infinite; }
.ask .what { flex: 1 1 220px; min-width: 0; }
.ask .what b { font-family: var(--f-display); font-size: 28px; display: block; line-height: 1.1; }
.ask .what span { opacity: .9; }
.d20btn { display: inline-grid; place-items: center; width: 108px; height: 108px; border: 0; background: none; padding: 0; color: var(--ink); }
.d20btn svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition: transform .15s; }
.d20btn:hover svg { transform: rotate(-8deg) scale(1.05); }
@keyframes pulse { 50% { box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 6px color-mix(in srgb, var(--wax) 35%, transparent); } }
.res { border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; }
.res.ok { background: color-mix(in srgb, var(--ok) 22%, var(--parch)); color: var(--ink); border: 2px solid var(--ok); }
.res.bad { background: color-mix(in srgb, var(--bad) 18%, var(--parch)); color: var(--ink); border: 2px solid var(--bad); }
.res b.big { font-family: var(--f-display); font-size: 26px; line-height: 1.1; }
.res p { margin: 0; }
.res textarea, .livre textarea { width: 100%; min-height: 84px; background: #fffaf0; color: var(--ink); border: 2px solid var(--parch-2); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 17px; resize: vertical; }
.res textarea:focus, .livre textarea:focus { border-color: var(--wax); }
.opts { background: var(--parch); color: var(--ink); border-radius: var(--r); padding: 14px; display: grid; gap: 8px; }
.opts .eyebrow { color: var(--ink-soft); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.choice { text-align: left; background: #fffaf0; color: var(--ink); border: 2px solid var(--parch-2); border-radius: 8px; padding: 12px 14px; font-weight: 700; font-size: 17px; }
.choice:hover { border-color: var(--wax); }
.choice.sel { background: var(--wax); border-color: var(--wax); color: #fff; }
.choice.outra { width: 100%; background: transparent; border-style: dashed; color: var(--ink-soft); text-align: center; }
.livre { display: grid; gap: 8px; }
.livre label { font-weight: 800; }
.wait { font-style: italic; color: var(--ink-soft); font-size: 15px; margin: 0; }
.wait.dark { color: var(--muted); }

/* combate */
.turnbanner { font-family: var(--f-display); font-size: 30px; color: var(--ink); background: var(--gold); text-align: center; border-radius: var(--r); padding: 8px; }
.foes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.foe { background: var(--felt-3); border: 2px solid transparent; border-radius: var(--r); overflow: hidden; }
.foe.now { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 40%, transparent); }
.foe.down { opacity: .45; filter: grayscale(1); }
.foe .pic { aspect-ratio: 1; background: var(--felt) center / cover no-repeat; max-width: 100%; }
.foe .nm { font-weight: 800; font-size: 14px; padding: 6px 8px 2px; line-height: 1.2; }
.foe .st { font-size: 12px; color: var(--muted); padding: 0 8px 8px; }
.hp { height: 8px; background: rgba(0,0,0,.35); border-radius: 99px; overflow: hidden; margin: 0 8px 6px; }
.hp > i { display: block; height: 100%; background: var(--ok); transition: width .4s; }
.hp.mid > i { background: var(--gold); }
.hp.low > i { background: var(--bad); }
.tracker { display: grid; gap: 6px; }
.trow { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--felt-3); border-radius: 8px; padding: 6px 8px; border: 2px solid transparent; }
.trow.now { border-color: var(--gold); }
.trow.down { opacity: .5; }
.trow .ini { font-weight: 800; text-align: center; color: var(--gold); }
.trow .av { width: 44px; height: 44px; border-radius: 6px; background: var(--felt) center / cover no-repeat; border: 0; padding: 0; cursor: zoom-in; }
.trow .nm { font-weight: 800; line-height: 1.15; }
.trow .sub { font-size: 12px; color: var(--muted); }
.trow .atk { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.trow .ctl { display: flex; gap: 4px; align-items: center; }
.trow .hpn { font-weight: 800; min-width: 54px; text-align: center; }

/* ficha do herói (lateral) */
.ficha .portrait { aspect-ratio: 7 / 8; background: var(--parch-2) center top / cover no-repeat; max-width: 100%; }
.ficha .pad { display: grid; gap: 10px; }
.ficha h2 { font-size: 24px; line-height: 1.05; }
.stats { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-weight: 700; }
.bighp { flex: 1 1 150px; }
.bighp .hp { margin: 4px 0 0; height: 14px; background: var(--parch-2); }
.pill { display: inline-flex; align-items: center; gap: 4px; background: var(--ink); color: var(--parch); border-radius: 99px; padding: 2px 10px; font-size: 14px; font-weight: 700; }
.pill.gold { background: var(--gold); color: var(--ink); }
.actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.act { text-align: left; background: #fffaf0; border: 2px solid var(--parch-2); border-radius: 8px; padding: 10px; color: var(--ink); display: grid; gap: 2px; }
.act:hover:not(:disabled) { border-color: var(--wax); }
.act:disabled { opacity: .45; cursor: not-allowed; }
.act b { font-size: 16px; }
.act small { color: var(--ink-soft); font-size: 13px; line-height: 1.3; }
.act .tg { font-size: 12px; font-weight: 800; color: var(--wax); letter-spacing: .06em; text-transform: uppercase; }
.skills { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.skills span { background: var(--parch-2); border-radius: 6px; padding: 2px 8px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--wax); font: inherit; font-weight: 800; text-decoration: underline; letter-spacing: inherit; text-transform: inherit; }
.nameinp { margin-top: 6px; width: 100%; max-width: 420px; background: #fffaf0; color: var(--ink); border: 2px solid var(--parch-2); border-radius: 8px; padding: 10px 12px; font-size: 18px; font-weight: 700; min-width: 0; }
.nameinp:focus { border-color: var(--wax); }

/* ficha no celular: botão + gaveta */
.fab { display: none; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  background: var(--gold); color: var(--ink); border: 0; border-radius: 99px; padding: 12px 18px; font-weight: 800; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
@media (max-width: 960px) { .fab { display: inline-flex; gap: 8px; align-items: center; } }
.drawer { position: fixed; inset: 0; z-index: 40; background: rgba(8,14,12,.7); display: flex; justify-content: flex-end; }
.drawer .dpanel { width: min(420px, 100%); height: 100%; overflow: auto; background: var(--felt); padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; }
.drawer .dhead { display: flex; justify-content: space-between; align-items: center; }

/* escolha de herói */
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pickc { text-align: left; padding: 0; border: 3px solid transparent; }
.pickc:hover { border-color: var(--wax); }
.pickc .pic { aspect-ratio: 7 / 9; background: var(--parch-2) center top / cover no-repeat; max-width: 100%; }
.namef { display: block; margin-top: 12px; font-weight: 800; }
.namef span { font-weight: 400; color: var(--ink-soft); font-size: 14px; }
.howto { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }
@media (max-width: 520px) {
  .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pickc .pad { padding: 10px; }
  .pickc h3 { font-size: 17px; }
  .pickc p { font-size: 13px; line-height: 1.35; }
}

/* mestre */
.strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.sc { position: relative; flex: 0 0 140px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; background: var(--felt-3); color: var(--on-felt); text-align: left; }
.sc .pic { aspect-ratio: 3 / 2; background: var(--felt) center / cover no-repeat; max-width: 100%; }
.sc span { display: block; padding: 4px 8px 6px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.sc.sel { border-color: var(--gold); }
.sc.live::after { content: "NA MESA"; position: absolute; top: 6px; left: 6px; background: var(--wax); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; }
label.f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.f input, .f textarea, .f select, .inp { background: var(--felt); color: var(--on-felt); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; width: 100%; min-width: 0; }
.f textarea { resize: vertical; min-height: 70px; line-height: 1.4; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.row > * { min-width: 0; }
.grow { flex: 1 1 160px; }
.btn { background: var(--felt-3); color: var(--on-felt); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-weight: 700; }
.btn:hover { background: var(--line); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.hot { background: var(--wax); border-color: var(--wax); color: #fff; }
.btn.hot:hover { background: var(--wax-2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.sm { padding: 4px 10px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--ink-soft); border-color: var(--parch-2); }
.notes { background: var(--felt); border-left: 4px solid var(--gold); border-radius: 6px; padding: 10px 12px; font-size: 15px; line-height: 1.5; white-space: pre-line; }
details.sec > summary { cursor: pointer; font-weight: 800; color: var(--gold); }
details.sec[open] > summary { margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--felt); border: 1px solid var(--line); color: var(--on-felt); border-radius: 99px; padding: 4px 12px; font-size: 14px; font-weight: 700; }
.chip:hover { border-color: var(--gold); }
.chip b { color: var(--gold); }
.status { background: var(--felt); border-radius: 8px; padding: 10px 12px; font-size: 15px; }
.status b { color: var(--gold); }
.prev { display: block; width: 100%; aspect-ratio: 3 / 2; max-width: 100%; border: 2px solid var(--line); border-radius: 8px; padding: 0; background: var(--felt) center / cover no-repeat; position: relative; cursor: zoom-in; }
.prev:hover { border-color: var(--gold); }
.prev span { position: absolute; right: 8px; bottom: 8px; background: rgba(20,14,8,.8); color: var(--parch); font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 99px; }
.composer { display: grid; gap: 10px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs button { background: var(--felt); color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-weight: 700; font-size: 14px; }
.tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.best { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.bstw { position: relative; }
.bst { width: 100%; padding: 0; border: 1px solid var(--line); background: var(--felt-3); color: var(--on-felt); border-radius: 8px; overflow: hidden; text-align: left; }
.bst:hover { border-color: var(--gold); }
.bst .pic { aspect-ratio: 1; background: var(--felt) center / cover no-repeat; max-width: 100%; }
.bst span { display: block; font-size: 12px; font-weight: 700; padding: 3px 6px 5px; line-height: 1.15; }
.zbtn { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 99px; border: 0; background: rgba(20,14,8,.78); color: var(--parch); padding: 0; cursor: zoom-in; }
.zbtn:hover { background: var(--gold); color: var(--ink); }
.dice { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gen { background: var(--felt); border-radius: 8px; padding: 10px 12px; min-height: 44px; font-size: 15px; }
.ref { width: 100%; border-collapse: collapse; font-size: 14px; }
.ref td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ref td:first-child { font-weight: 800; color: var(--gold); white-space: nowrap; }
.reset { margin-top: 10px; background: var(--felt); border: 1px solid var(--wax); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.imgbox { background: var(--felt); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.imgbox > summary { cursor: pointer; font-weight: 800; color: var(--gold); }
.drop { display: block; border: 2px dashed var(--line); border-radius: 8px; padding: 18px 12px; text-align: center; color: var(--muted); cursor: pointer; font-size: 14px; }
.drop.over, .drop:hover { border-color: var(--gold); color: var(--on-felt); }
.pend { display: grid; gap: 6px; }
.pend img { width: 100%; border-radius: 8px; border: 2px solid var(--gold); }
.manual { display: flex; gap: 4px; }

/* sobreposições */
.lb { position: fixed; inset: 0; z-index: 70; background: rgba(8,14,12,.92); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.lb figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: 100%; }
.lb img { max-width: min(96vw, 1400px); max-height: 82vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lb figcaption { font-family: var(--f-display); font-size: 28px; color: var(--gold); text-align: center; }
.lb figcaption small { display: block; max-width: 70ch; margin: 6px auto 0; font-family: var(--f-body); font-size: 15px; color: var(--on-felt); line-height: 1.45; }
.lb .x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; background: var(--parch); color: var(--ink); border: 0; border-radius: 99px; width: 40px; height: 40px; font-size: 20px; font-weight: 800; }
.fly { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 50; }
.fly .die { width: 170px; height: 170px; display: grid; place-items: center; position: relative; }
.fly svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fly b { position: relative; font-family: var(--f-display); font-size: 58px; color: var(--ink); }
.fly .lbl { margin-top: 10px; background: var(--ink); color: var(--parch); padding: 6px 14px; border-radius: 99px; font-weight: 800; text-align: center; }
.fly.spin .die { animation: spin .7s cubic-bezier(.2,.8,.3,1); }
@keyframes spin { from { transform: rotate(-540deg) scale(.4); } to { transform: none; } }
.toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--parch); padding: 10px 16px; border-radius: 10px; z-index: 60; font-weight: 700; max-width: calc(100% - 32px); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .ask { animation: none; } .fly.spin .die { animation: none; } .hp > i { transition: none; } }
@media (max-width: 480px) {
  .d20btn { width: 88px; height: 88px; }
  .trow { grid-template-columns: 26px 36px minmax(0, 1fr); }
  .trow .av { width: 36px; height: 36px; }
  .trow .ctl { grid-column: 1 / -1; justify-content: flex-end; }
  .bub { max-width: 94%; }
}

/* editor de opções com teste */
.oped { display: grid; gap: 6px; margin-top: 4px; }
.ophead, .oprow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 64px 118px 34px; gap: 6px; align-items: center; }
.ophead span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.oprow .inp { padding: 6px 8px; }
.oprow .inp:disabled { opacity: .45; }
.otest { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wax); }
.choice.sel .otest { color: #ffe6d9; }
@media (max-width: 700px) {
  .ophead { display: none; }
  .oprow { grid-template-columns: minmax(0, 1fr) 64px 34px; }
  .oprow [data-f="t"] { grid-column: 1 / -1; }
  .oprow [data-f="p"] { grid-column: 1 / 2; }
  .oprow [data-f="m"] { grid-column: 1 / 3; }
}

/* confirmação de reset */
.modal { position: fixed; inset: 0; z-index: 65; background: rgba(8,14,12,.8); display: grid; place-items: center; padding: 16px; }
.mbox { width: min(460px, 100%); background: var(--felt-2); border: 2px solid var(--wax); border-radius: var(--r); padding: 18px; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.mbox h3 { font-size: 24px; color: var(--gold); }
.mbox p { margin: 0; line-height: 1.5; }

/* criar herói */
.tabs.pk button { font-size: 16px; padding: 8px 18px; }
.criar { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.criar .cpic { background: var(--parch-2) center top / cover no-repeat; min-height: 420px; }
.criar .pad { display: grid; gap: 12px; align-content: start; }
.criar .chip { background: #fffaf0; color: var(--ink); border: 2px solid var(--parch-2); }
.criar .chip.on { background: var(--wax); border-color: var(--wax); color: #fff; }
.criar .chip:hover { border-color: var(--wax); }
.traco { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; font-style: italic; }
.crf span { font-weight: 400; color: var(--ink-soft); }
.criar .f { color: var(--ink); }
.aparin { width: 100%; min-height: 64px; background: #fffaf0; color: var(--ink); border: 2px solid var(--parch-2); border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical; }
@media (max-width: 640px) {
  .criar { grid-template-columns: minmax(0, 1fr); }
  .criar .cpic { min-height: 0; aspect-ratio: 5 / 6; }
}

/* mochila */
.mochila { display: grid; gap: 6px; }
.item { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: #fffaf0; border: 2px solid var(--parch-2); border-radius: 8px; padding: 8px 10px; }
.item b { font-size: 15px; }
.item .tg { font-size: 11px; font-weight: 800; color: var(--wax); letter-spacing: .06em; text-transform: uppercase; }
.item small { display: block; color: var(--ink-soft); font-size: 13px; line-height: 1.3; }
.invrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--felt-3); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.invrow.gasto { opacity: .5; text-decoration: line-through; }
.ev-item .bag { width: 18px; height: 18px; flex: none; border-radius: 4px 4px 6px 6px; background: var(--gold); box-shadow: inset 0 3px 0 rgba(0,0,0,.25); }

/* voltar resposta */
.voltabtn { display: block; margin-top: 8px; font-size: 14px; text-align: left; }
.voltabtn span { font-weight: 400; text-decoration: none; }
.voltanote { margin-top: 8px; }
.ask .voltabtn { color: #fff; margin-top: 0; }
.voltabox { background: var(--felt); border: 1px solid var(--gold); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px; font-size: 15px; }

/* quebras de linha do texto digitado aparecem para quem lê */
.ev-passo p, .bub p, .scene-text { white-space: pre-line; }

/* zonas de combate */
.zboard { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; border-radius: 10px; overflow: hidden; background: var(--felt-3) center / cover no-repeat; min-height: 170px; margin-bottom: 4px; }
.zcol { background: rgba(20,14,8,.5); display: grid; grid-template-rows: auto 1fr; gap: 6px; padding: 6px; border: 2px solid transparent; cursor: pointer; min-width: 0; }
.zcol:hover, .zcol:focus-visible { background: rgba(20,14,8,.35); border-color: var(--gold); }
.zcol.meu { border-color: var(--gold); background: rgba(20,14,8,.3); }
.zhead b { display: block; color: #fff; font-size: 13px; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,.8); overflow-wrap: anywhere; }
.zhead small { display: block; color: #f3e9d0; font-size: 11px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.ztoks { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-end; }
.tok { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background: var(--felt) center top / cover no-repeat; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.tok.pc { border-color: var(--gold); }
.tok.sel { outline: 3px solid var(--gold); outline-offset: 2px; }
.tok.now { box-shadow: 0 0 0 3px var(--gold), 0 2px 6px rgba(0,0,0,.5); }
.tok.down { filter: grayscale(1); opacity: .5; }
.zlegenda { margin: 0 0 8px; }
.act.armado { border-color: var(--wax); background: color-mix(in srgb, var(--wax) 12%, #fffaf0); }
@media (max-width: 480px) { .tok { width: 32px; height: 32px; } .zhead b { font-size: 11px; } .zhead small { font-size: 10px; } }

/* quantidade na mochila */
.qtd { color: var(--wax); font-weight: 800; }
.item.moeda b { font-size: 16px; }

/* multijogador: cadeiras e "jogando como" */
.cadeiras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cad { text-align: left; padding: 0; border: 3px solid transparent; }
.cad:hover:not(:disabled) { border-color: var(--wax); }
.cad:disabled { opacity: .55; cursor: not-allowed; }
.cad.minha { border-color: var(--gold); }
.cad p { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.jcomo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--felt-2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.jcomo .eyebrow { margin-right: 4px; }
.chip.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* multijogador: retrato pequeno de quem fala; cada cadeira tem uma cor de borda */
.who .av { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center top; vertical-align: -6px; margin-right: 6px; border: 2px solid var(--seat, var(--gold)); }
.s1 { --seat: #d9a441; } .s2 { --seat: #5fa8d3; } .s3 { --seat: #9bc26b; } .s4 { --seat: #d77a9e; }
.bub.outro { justify-self: start; border-radius: 12px 12px 12px 2px; border-left: 4px solid var(--seat, var(--line)); }

/* multijogador: rodada do mestre, holofote, alvo do teste */
.rodada { display: grid; gap: 6px; margin-bottom: 10px; }
.rrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--felt-2); border: 1px solid var(--line); border-left: 4px solid var(--seat, var(--line)); border-radius: 10px; padding: 6px 10px; }
.rrow .rst { color: var(--muted); font-size: 14px; flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.rrow.pronto .rst { color: var(--ok); }
.rrow.vez .rst { color: var(--gold); }
.rrow.holo { box-shadow: 0 0 0 2px var(--gold) inset; }
.rrow .racts { display: flex; gap: 4px; margin-left: auto; }
.rrow .av { margin-right: 0; }
.chips.alvo { align-items: center; margin-bottom: 8px; }
.chips.alvo .eyebrow { margin-right: 4px; }
.opts.espera .vez { margin: 4px 0 8px; font-size: 17px; }
.opts.espera .choice:disabled { opacity: .45; cursor: not-allowed; }
.opts.suavez { box-shadow: 0 0 0 3px var(--gold); }

/* multijogador: combate com vários heróis */
.tok.pc { box-shadow: 0 0 0 3px var(--seat, var(--gold)); }
.tok.pc.eu { box-shadow: 0 0 0 3px var(--seat, var(--gold)), 0 0 0 6px rgba(255,255,255,.35); }
.foe.s1, .foe.s2, .foe.s3, .foe.s4, .trow.s1, .trow.s2, .trow.s3, .trow.s4 { border-left: 4px solid var(--seat); }
.chips.alvoatq { margin: 4px 0; align-items: center; gap: 4px; }
.chips.alvoatq .chip { padding: 2px 8px; font-size: 13px; }

/* multijogador: passar item para outro herói */
.invrow { flex-wrap: wrap; }
.invrow .passa { flex-basis: 100%; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.invrow .passa .chip { padding: 2px 8px; font-size: 13px; }

/* multijogador: presença por cadeira */
.rrow .pres { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .5; flex: none; }
.rrow .pres.on { background: var(--ok); opacity: 1; }

/* missões secundárias */
.miscard { background: var(--felt-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.miscard.draft { border-color: var(--gold); margin-top: 10px; }
.miscard summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mishead { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mismom { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.mismom ul { margin: 4px 0 0; padding-left: 16px; color: var(--muted); }
.mismom li.feito { opacity: .5; }
.panel.missao { border: 2px solid var(--gold); }
.bib { display: grid; }

/* teste rápido */
label.rapido { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 14px; margin: 4px 0 8px; cursor: pointer; }
.ask.rapido { border-style: dashed; }

/* combate: painel fixo no pé da conversa */
.cdock { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 20; background: var(--felt-2); border: 2px solid var(--line); border-radius: var(--r); padding: 8px 10px; box-shadow: 0 -6px 18px rgba(0,0,0,.35); display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.cdock.minha { border-color: var(--gold); }
.cdhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cdhead b { font-family: var(--f-display); font-size: 20px; color: var(--gold); }
.cdock.minha .cdhead b { font-size: 24px; }
.cdhead small { color: var(--muted); }
.cdbtns { margin-left: auto; display: flex; gap: 6px; }
.cdpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--felt-3); border-radius: 8px; padding: 6px 8px; }
.cdpick span { font-weight: 700; }
.foes.mini { display: flex; gap: 6px; overflow-x: auto; }
.foes.mini .foe { flex: 0 0 92px; }
.foes.mini .foe .pic { height: 56px; }
.foes.mini .foe .nm { font-size: 12px; }
.ev-cmb { border-color: var(--wax); }
.cdficha { display: none; }
@media (max-width: 899px) { .player.emcombate .fab { display: none; } .cdficha { display: inline-flex; } }

/* sandbox: atlas e locais */
[data-semimg] { background: linear-gradient(135deg, var(--felt-3), var(--felt-2)); }
.atlas { display: grid; gap: 10px; }
.atlas .locs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.loc { display: grid; grid-template-rows: 56px auto; width: 118px; padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--felt-2); color: inherit; cursor: pointer; text-align: left; }
.loc .pic { background-size: cover; background-position: center; }
.loc .nm { font-size: 12px; font-weight: 700; padding: 4px 6px; line-height: 1.2; }
.loc.sel { border-color: var(--gold); }
.loc.aqui .nm { color: var(--gold); }
.locbody { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 12px; align-items: start; }
.locpic { aspect-ratio: 3 / 2; border-radius: 8px; background-size: cover; background-position: center; display: grid; place-items: center; }
.locpic span { font-family: var(--f-display); font-size: 20px; color: var(--gold); text-align: center; padding: 8px; }
.npcs { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.onde { background: var(--felt-2); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px; font-size: 15px; }
.scene-img[data-semimg] { min-height: 140px; }
@media (max-width: 700px) { .locbody { grid-template-columns: 1fr; } }

/* progressão: XP, subir de nível, dons */
.xpbox { display: grid; gap: 6px; }
.hp.xp i { background: var(--gold); }
.subiu { display: grid; gap: 6px; background: #fff4d6; border: 2px solid var(--gold); border-radius: 10px; padding: 8px; }
.dom { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; cursor: pointer; display: grid; gap: 2px; color: var(--ink); }
.dom:hover { border-color: var(--wax); }
.dom small { color: var(--ink-soft); }
.donsl { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 2px; }
.ev-xp { border-color: var(--gold); }

/* campanha: dia, viagem, tramas, reputação, rumores */
.camp { display: grid; gap: 14px; }
.camp section { display: grid; gap: 6px; }
.camp .dia { font-family: var(--f-display); font-size: 22px; color: var(--gold); }
.trama { border-left: 3px solid var(--line); padding-left: 8px; }
.relogio { display: inline-flex; gap: 3px; }
.relogio i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--wax); display: inline-block; }
.relogio i.on { background: var(--wax); }
.reps { display: grid; gap: 4px; }
.reps.mini { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.rep { display: flex; align-items: center; gap: 6px; }
.rep > span:first-child { flex: 1; }
.reps.mini .rep > span:first-child { flex: none; }
.rv { font-size: 13px; padding: 1px 8px; border-radius: 99px; background: var(--felt-3); }
.rv.r-2 { background: #8c2a1f; color: #fff; } .rv.r-1 { background: #b8672a; color: #fff; } .rv.r1 { background: #4e7d3a; color: #fff; } .rv.r2 { background: #2f6b2a; color: #fff; }
.rum { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.rum.off { opacity: .45; }
.rum .quer { color: var(--gold); font-size: 13px; }
.votos { display: grid; gap: 4px; }
.onde { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.rumores .rum { color: var(--ink); }

/* linha principal e diário */
.pistas { display: grid; gap: 4px; }
.pista { display: flex; gap: 6px; align-items: baseline; font-size: 14px; cursor: pointer; }
.diar p { margin: 4px 0; font-size: 14px; white-space: pre-line; }
.diario ul { margin: 4px 0; padding-left: 18px; }
.diario details { margin-top: 6px; }

.npcs li { display: flex; gap: 8px; align-items: flex-start; list-style: none; }
.npcs { padding-left: 0; }
.npcav { flex: none; width: 40px; height: 52px; border-radius: 6px; border: 1px solid var(--line); background-size: cover; background-position: center top; cursor: zoom-in; padding: 0; }

/* imagem pelo celular */
.drop { display: grid; gap: 8px; justify-items: center; text-align: center; }
.colar { width: 100%; min-height: 44px; border: 2px dashed var(--line); border-radius: 8px; padding: 8px; font-size: 14px; color: var(--muted); -webkit-user-select: text; user-select: text; overflow: hidden; max-height: 80px; }
.colar:focus { outline: 2px solid var(--gold); color: var(--ink-soft); }
.colar img { max-height: 60px; }

/* mapa de Erravia */
.lb.mapa figure { max-width: min(96vw, 1200px); }
.mapwrap { position: relative; }
.mapwrap img { display: block; width: 100%; height: auto; border-radius: 8px; }
.mlab { position: absolute; transform: translate(-50%, -50%); background: rgba(20, 16, 10, .78); color: #f3e6c4; font-size: clamp(9px, 1.3vw, 14px); font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.mlab.aqui { background: var(--gold); color: #1a140c; z-index: 2; }
.mreg { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-display); font-size: clamp(12px, 2.2vw, 26px); color: #f3e6c4; text-shadow: 0 2px 6px #000, 0 0 2px #000; pointer-events: none; letter-spacing: .04em; }

/* celular: conversa mais compacta (pedido do usuário, 2026-09-30): o começo da cena cabe na tela sem rolar */
@media (max-width: 600px) {
  .scene-img { aspect-ratio: 16 / 7; }
  .scene-img .ttl { padding: 24px 12px 8px; }
  .scene-img h2 { font-size: 22px; }
  .card .pad { padding: 10px 12px; }
  .scene-text, .ev-passo p { font-size: 15.5px; line-height: 1.45; }
  .ev-passo.old p { font-size: 14px; }
  .ev-passo .nimg { max-width: 70%; }
  .bub { padding: 6px 10px; }
  .bub p { font-size: 15px; }
  .bub .who, .roll .who { font-size: 11px; }
  .roll { padding: 6px 8px; }
  .roll .tot { font-size: 22px; }
  .ev-ped { font-size: 13px; }
  .choices { grid-template-columns: 1fr; gap: 6px; }
  .choice { font-size: 15px; padding: 9px 11px; }
  .opts, .ask, .res { padding: 10px 12px; }
  .onde { font-size: 13px; padding: 4px 8px; }
  .jcomo { padding: 6px 8px; }
  .turnbanner { font-size: 22px; padding: 4px; }
  .cdock { max-height: 45vh; }
}

.ev-passo p.voz { font-style: italic; color: var(--ink-soft); }

/* personalização "C" (cor + enfeite + descrição) */
.montar { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; overflow: hidden; }
.montar .mpic { background-size: cover; background-position: center top; min-height: 320px; }
.montar .pad { display: grid; gap: 10px; }
.chip.cor i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: -2px; border: 1px solid rgba(0,0,0,.2); }
@media (max-width: 600px) { .montar { grid-template-columns: 1fr; } .montar .mpic { min-height: 220px; } }

/* aba Lore */
.lorewrap { display: grid; gap: 6px; }
.lore { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.lore summary { cursor: pointer; font-weight: 800; }
.lorebody p { margin: 6px 0; font-size: 14px; }
.llocs { margin: 2px 0 8px; padding-left: 18px; font-size: 14px; display: grid; gap: 3px; }
.llocs li.feito { text-decoration: line-through; opacity: .6; }
.lnpc { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 4px 0; }

.ajuda { font-size: 14px; background: var(--felt-3); border-radius: 8px; padding: 4px 8px; }
.ajuda summary { cursor: pointer; color: var(--gold); }
.ajuda p { margin: 6px 0; }

/* combate em grid */
.gridwrap { display: grid; gap: 4px; }
.grid { display: grid; width: 100%; border-radius: 8px; overflow: hidden; border: 2px solid var(--line); }
.gc { position: relative; padding: 0; margin: 0; border: 0; outline: 1px solid rgba(0,0,0,.18); background: transparent; aspect-ratio: 1; cursor: pointer; min-width: 0; display: grid; place-items: center; }
.gc.obst { background: repeating-linear-gradient(45deg, #3a332b, #3a332b 4px, #4a4238 4px, #4a4238 8px); }
.gc.dif { background: radial-gradient(circle at 30% 30%, rgba(60,110,40,.55) 2px, transparent 3px) 0 0 / 8px 8px, rgba(60,110,40,.25); }
.gc.cob { box-shadow: inset 0 0 0 3px rgba(120,160,220,.8); }
.gc.pode { background-color: rgba(255,215,90,.35); }
.gc.pode:hover { background-color: rgba(255,215,90,.6); }
.gc .custo { position: absolute; right: 2px; bottom: 1px; font-size: 9px; font-style: normal; color: #3a2a00; font-weight: 800; }
.gc.nevoa { background: #1c1c22 !important; }
.gc.nevoa > * { visibility: hidden; }
.gc.nevoagm::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,30,.35); pointer-events: none; }
.gtok { width: 86%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center top; border: 2px solid #b33; box-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: auto; }
.gtok.pc { border-color: var(--seat, var(--gold)); }
.gtok.eu { box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.6); }
.gtok.now { outline: 3px solid var(--gold); outline-offset: 1px; }
.gtok.sel { outline: 3px dashed #fff; }
.gtok.down { filter: grayscale(1); opacity: .5; }
.glegenda { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ch-pedra { background: repeating-linear-gradient(0deg, #8b8a86 0 23px, #7d7c78 23px 24px), #8b8a86; }
.ch-grama { background: radial-gradient(circle at 20% 30%, #6fa053 1px, transparent 2px) 0 0 / 10px 10px, #7fb05f; }
.ch-terra { background: radial-gradient(circle at 40% 60%, #7a5a3a 1px, transparent 2px) 0 0 / 9px 9px, #9a7550; }
.ch-areia { background: radial-gradient(circle at 50% 50%, #d9c38e 1px, transparent 2px) 0 0 / 7px 7px, #e6d3a3; }
.ch-madeira { background: repeating-linear-gradient(90deg, #8a6440 0 22px, #6f4f32 22px 24px), #8a6440; }
.ch-neve { background: radial-gradient(circle at 50% 50%, #ffffff 1px, transparent 2px) 0 0 / 11px 11px, #e8eef4; }
.ch-cinza { background: radial-gradient(circle at 30% 70%, #6d6d6d 1px, transparent 2px) 0 0 / 8px 8px, #8a8886; }
.ch-flores { background: radial-gradient(circle at 25% 25%, #f7a8c8 2px, transparent 3px) 0 0 / 14px 14px, radial-gradient(circle at 70% 70%, #fff3a0 2px, transparent 3px) 0 0 / 14px 14px, #9fd08a; }
.ch-nuvem { background: radial-gradient(circle at 50% 50%, #ffffff 4px, transparent 6px) 0 0 / 18px 18px, #dfe9f7; }

.card.entrada .pad { display: grid; gap: 8px; }
.card.entrada p { margin: 0; white-space: pre-line; }

.bstw.nova .bst { outline: 2px dashed var(--gold); }
.gmnote.perigo { color: #e0725a; }

/* condições e herói caído */
.cico { font-style: normal; font-size: 13px; margin-left: 2px; }
.gtok { position: relative; }
.gcond { position: absolute; right: -4px; top: -6px; font-size: 11px; font-weight: 400; background: rgba(0,0,0,.55); border-radius: 8px; padding: 0 2px; line-height: 1.3; }
.conds { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.conds .chip { padding: 1px 8px; font-size: 12px; }
.condpick { display: grid; gap: 6px; background: var(--felt-3); border-radius: 8px; padding: 6px 8px; margin: 4px 0; }
.condpick .chip { padding: 2px 8px; font-size: 13px; }
.condsf { display: grid; gap: 2px; font-size: 13px; background: #fbe9e4; border: 1px solid #e0b2a6; border-radius: 8px; padding: 6px 8px; color: var(--ink); }
.mb { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); vertical-align: -2px; margin: 0 1px; }
.mb.ok { background: #4e9a52; border-color: #4e9a52; } .mb.bad { background: #b33a2a; border-color: #b33a2a; }
.ask.morte { border-color: #b33a2a; }

/* pistas e documentos */
.evdoc { border: 2px solid #c9a45c; background: #fbf3df; }
.evdoc summary { cursor: pointer; padding: 8px 12px; font-size: 15px; color: var(--ink); }
.evdoc .pad { display: grid; gap: 6px; padding-top: 0; }
.doctxt { margin: 0; font-family: Georgia, serif; font-style: italic; white-space: pre-line; color: var(--ink); }
.docimg img { max-width: 100%; max-height: 240px; border-radius: 6px; }
.docprev { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.fdocs { display: grid; gap: 4px; font-size: 14px; }
.fdocs summary { cursor: pointer; }

/* IA: NPC e monstro */
.npcbtn { display: block; margin-top: 4px; font-size: 13px; color: var(--gold); }
.npcpick { display: grid; gap: 6px; background: var(--felt-3); border: 1px dashed var(--gold); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.npcpick select { max-width: 200px; }
.sugm { background: var(--felt-3); border-left: 3px solid var(--gold); border-radius: 6px; padding: 6px 8px; font-size: 14px; margin: 4px 0; }

/* loja e equipamento */
.loja .pad { display: grid; gap: 4px; }
.lojaitem { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); color: var(--ink); }
.lojaitem small { display: block; color: var(--ink-soft); }
.lojapreco { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.tg.raro, .chip.raro { background: #6b4aa3; color: #fff; }

/* pessoas que conheci */
.pessoas .pad { display: grid; gap: 8px; }
.pessoa { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.pessoa .npcav { width: 48px; height: 62px; }
.pnota { font-size: 14px; background: #fff4d6; border-radius: 6px; padding: 4px 6px; }
.notanpc { width: 100%; font-size: 13px; min-height: 30px; resize: vertical; }
.lnota { margin: 0 0 8px 48px; font-size: 13px; }

/* opções por herói */
.opseat { border-left: 3px solid var(--seat, var(--line)); padding: 4px 0 4px 8px; margin: 4px 0; }
.opseat summary { cursor: pointer; font-size: 14px; }

/* barra 📍 fixa, ícones, ficha em seções, aba Combate */
.ondefixo { position: sticky; top: var(--barh, 58px); z-index: 15; display: grid; gap: 6px; max-height: 70vh; overflow: auto; background: var(--felt); padding-bottom: 4px; }
.ondefixo .card { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.icoitem { font-size: 22px; line-height: 1; flex: none; width: 28px; text-align: center; }
.item { gap: 8px; }
.fabas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fcorpo { display: grid; gap: 8px; }
.combaba { display: grid; gap: 8px; }

/* rastreador: linha inteira para condições e sugestão */
.trfull { grid-column: 1 / -1; display: grid; gap: 4px; min-width: 0; }
.trfull:empty { display: none; }
.sugm { max-width: none; }
/* legenda do grid */
.legenda { display: grid; gap: 4px; background: var(--felt-3); border-radius: 8px; padding: 8px; font-size: 13px; }
.lgi { display: flex; gap: 8px; align-items: center; }
.lgc { width: 22px; height: 22px; flex: none; outline: 1px solid rgba(0,0,0,.3); background-color: #8b8a86; }
.lgc.nevoa { background: #1c1c22 !important; }
.lgt { width: 20px; height: 20px; flex: none; background: #666; }
.lgx { width: 22px; flex: none; text-align: center; }
/* ações de combate e roleplay */
.cacoes { display: grid; gap: 6px; }
.acmini { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.act.mini { padding: 6px 8px; display: grid; gap: 2px; text-align: left; }
.rpchips .chip { font-size: 14px; }

.cdmorte { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: rgba(160,30,30,.25); border: 1px solid rgba(220,80,80,.6); border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.cacoes .ask.morte { margin: 0; }

.cenasec { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.cenasec details { flex: 1 1 240px; min-width: 0; margin: 0; }

/* aba Mesa: grid + conversa na largura toda */
.wrap.mesa { display: block; max-width: none; }
.mesacols { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.wrap.mesa.comgrid .mesacols { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
.mesaconv .tl { max-height: calc(100vh - var(--barh, 60px) - 150px); overflow-y: auto; }
@media (max-width: 900px) { .wrap.mesa.comgrid .mesacols { grid-template-columns: 1fr; } .mesaconv .tl { max-height: none; } }
.gmnovo { max-height: 340px; overflow-y: auto; }

/* privado: momento só para um herói / ação só para o mestre */
.tag.priv { background: #3b2f5c; color: #e6dcff; }
.ev-passo.privado { outline: 2px dashed rgba(200,180,255,.45); outline-offset: -2px; }
/* missões secundárias */
.sdform .f { margin: 4px 0; }
.sdrec .f { min-width: 90px; }
.sdrec .num { width: 90px; }
.miscard.side.fim { opacity: .7; }
.sdlist { margin: 4px 0; padding-left: 18px; }
.sdlist li { margin: 4px 0; }

.oprow .opdisp { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); padding: 2px 0 6px; }
.oprow .opdisp select { width: auto; }

.ref.uso td { vertical-align: top; font-size: 13px; }
.ref.uso thead td { font-weight: 800; color: var(--gold); }

/* quadro de missões e aliados */
.quadro .qmis { border-top: 1px dashed var(--line); padding: 8px 0; }
.quadro .qmis:first-of-type { border-top: 0; }
.aliados { display: grid; gap: 6px; margin: 4px 0; }
.aliado { display: flex; gap: 8px; align-items: flex-start; }
.aliado .av { width: 34px; height: 34px; flex: none; }

/* grupos paralelos */
.panel.grupos { padding: 8px 12px; }
.grupochip { font-size: 14px; }
.grupochip.on { outline: 2px solid var(--gold); }
.grpmenu { display: inline-flex; margin-left: 6px; }

.juntaesc { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--gold); border-radius: 8px; }

/* Mesa com vários grupos */
.mesagrupos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; margin-top: 14px; }
.mesagrupos .tlg { max-height: calc(100vh - var(--barh, 60px) - 200px); overflow-y: auto; }
.mesagrupos .mesaconv.atual { outline: 2px solid var(--gold); }
.wrap.mesa.mesamulti { display: block; max-width: none; }

.grupochip.on b, .grupochip.on .gmnote { color: inherit; }

.cena-ant { opacity: .85; }
.ev-novacena { margin: 10px 0; }

/* combate, etapa 1: vida na peça, alcance aceso, alvo pulsando, mapas salvos */
.tokhp { position: absolute; left: 10%; right: 10%; bottom: -6px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.6); overflow: hidden; pointer-events: none; }
.tokhp > i { display: block; height: 100%; background: #52b264; }
.tokhp.mid > i { background: #e0a53a; }
.tokhp.low > i { background: #d0463c; }
.gc.alc { box-shadow: inset 0 0 0 999px rgba(208, 70, 60, .16); }
.gtok.alvo { outline: 3px solid #ff6a5a; outline-offset: 1px; animation: alvoPulsa 1s ease-in-out infinite; cursor: crosshair; }
@keyframes alvoPulsa { 50% { outline-color: rgba(255, 106, 90, .25); } }
@media (prefers-reduced-motion: reduce) { .gtok.alvo { animation: none; } }
.mapasbox { border-top: 1px dashed var(--line); padding-top: 8px; }
.mapachip { display: inline-flex; align-items: center; gap: 2px; }

/* combate, etapa 2: economia de ações */
.econ { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; margin: 2px 0 6px; }
.econ .eb { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); margin-left: 3px; vertical-align: -1px; }
.econ .eb.gasto { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gold); }
.cdmorte.oport { background: rgba(208, 120, 40, .22); border-color: rgba(230, 150, 60, .7); }

/* combate, etapa 3: área de efeito */
.gc.area { box-shadow: inset 0 0 0 999px rgba(255, 140, 40, .38); outline: 1px solid rgba(255, 170, 70, .8); outline-offset: -1px; }
.areapick { background: rgba(255, 140, 40, .15); }

/* terreno novo */
.gc.baixo { background: repeating-linear-gradient(0deg, #7a5a34, #7a5a34 5px, #8f6b40 5px, #8f6b40 7px); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.gc.agua { background: radial-gradient(ellipse at 50% 120%, rgba(255,255,255,.25) 20%, transparent 21%) 0 0 / 12px 8px, #3d6f9e; }
.gc.perigo { background: radial-gradient(circle at 50% 70%, rgba(255,200,60,.85), rgba(220,70,30,.75) 45%, rgba(120,30,20,.55) 80%); }
.gc.porta { background: linear-gradient(90deg, transparent 46%, rgba(0,0,0,.5) 46% 54%, transparent 54%), repeating-linear-gradient(90deg, #6b4a2b, #6b4a2b 6px, #7b5734 6px, #7b5734 12px); }
.gc.portaab { box-shadow: inset 0 0 0 2px #7b5734; background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(123,87,52,.18) 6px, rgba(123,87,52,.18) 8px); }
.gc.esc { background: radial-gradient(circle at 25% 30%, #8a8780 2.5px, transparent 3.5px) 0 0 / 9px 9px, radial-gradient(circle at 70% 65%, #6d6a64 2px, transparent 3px) 0 0 / 11px 11px, rgba(110,104,96,.55); }
.gc.retini { outline: 2px dashed #fff; outline-offset: -2px; }
.gmarca { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(12px, 2.6vw, 24px); line-height: 1; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.8); font-weight: 400; }
.gmarca.oculta { opacity: .55; }
.efeitobox { display: grid; gap: 6px; border: 1px dashed var(--gold); border-radius: 8px; padding: 8px; }

.mtestes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.mtestes .btn.sm { padding: 2px 6px; font-size: 12px; }

/* editor de tramas */
.tramaed { display: grid; gap: 8px; border: 1px dashed var(--gold); border-radius: 8px; padding: 10px; margin: 6px 0 10px; }
.trpasso { display: flex; gap: 8px; align-items: flex-start; }
.trpasso .grow { display: grid; gap: 4px; }
.trnum { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #2a2216; font-weight: 800; display: grid; place-items: center; flex: none; margin-top: 6px; font-size: 12px; }

.notasdiario .notaent { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 6px; }

/* aba Campanha em janelas */
.campsec { border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; margin: 0 0 8px; }
.campsec > summary { cursor: pointer; padding: 9px 0; font-weight: 800; list-style-position: inside; }
.campsec[open] > summary { border-bottom: 1px dashed var(--line); margin-bottom: 8px; }
.campsec .campcorpo { padding-bottom: 10px; }

/* rumor descoberto no momento + aviso do rascunho da IA */
.rumnovo { margin-top: 10px; padding: 10px 12px; border: 2px solid var(--gold, #c9a227); border-radius: 8px; background: rgba(201,162,39,.12); display: grid; gap: 4px; box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
.rumnovo small { opacity: .75; }
.rumacende { border-color: var(--gold, #c9a227) !important; box-shadow: 0 0 0 3px rgba(201,162,39,.35); animation: rumpulsa 1.6s ease-in-out infinite; }
@keyframes rumpulsa { 50% { box-shadow: 0 0 0 6px rgba(201,162,39,.1); } }
@media (prefers-reduced-motion: reduce) { .rumacende { animation: none; } }
.rummom { display: flex; gap: 6px; align-items: flex-end; margin-top: 6px; }
.avisoia { margin: 0; padding: 8px 10px; border-left: 4px solid var(--gold, #c9a227); background: rgba(201,162,39,.1); border-radius: 6px; font-size: 14px; }

/* mochila do mestre: dar item + criar item */
.dar { display: grid; gap: 6px; }
.itfil .chip { font-size: 13px; padding: 3px 9px; }
.itbonus { align-items: flex-end; gap: 8px; }
.itbonus .f { font-size: 13px; }
.itcriar .gmnote { font-size: 13px; }

/* NPCs com ficha no combate */
.npcluta { display: grid; gap: 4px; margin-bottom: 6px; }
.npclin { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.npclin b { flex: 1; min-width: 120px; }

/* aba Heróis: classes, raças e números da mesa */
.hgrid { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.hlista { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.hlista .row { width: 100%; }
.hlista .hit { text-align: left; padding: 6px 9px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font: inherit; }
.hlista .hit.on { background: var(--gold); color: #2a2215; font-weight: 800; }
.hlista .hit.oculta { opacity: .55; }
.hed { display: grid; gap: 8px; }
.hed .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.hed .row > .f { flex: 1 1 150px; }
.hed .row > .f:has(.num) { flex: 0 0 74px; }
.hed textarea, .hed .inp { width: 100%; }
.hed .num { max-width: 80px; }

/* camada do editor de mundo por cima da mesa (artifact) */
#mundoOv { position: fixed; inset: 0; z-index: 80; overflow: auto; background: var(--felt, #1f2a24); }
#mundoOv .ovtopo { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 16px; background: rgba(0,0,0,.45); color: var(--gold, #e0c068); }

/* modo ao vivo */
.avpill { background: var(--wax, #a3261b); color: #fff; font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.avapoio { font-style: italic; opacity: .9; }
.avtab .grid { max-height: 70vh; }
.tabimg { position: relative; border-radius: 8px; overflow: hidden; cursor: crosshair; background: #0003; }
.tabimg img { width: 100%; display: block; }
.tabimg .tabsem { padding: 40px; text-align: center; opacity: .7; }
.tipeca { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #fff; background: #0005 center/cover no-repeat; box-shadow: 0 2px 6px #0008; cursor: pointer; }
.tipeca.eu { border-color: var(--gold, #e0c068); }
.tipeca.sel { outline: 3px solid var(--gold, #e0c068); }
.tiping, .gc.ping::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--gold, #e0c068); transform: translate(-50%, -50%); animation: pingavv 1s ease-out infinite; pointer-events: none; }
.gc.ping { position: relative; }
.gc.ping::after { left: 50%; top: 50%; }
@keyframes pingavv { 0% { opacity: 1; width: 10px; height: 10px; } 100% { opacity: 0; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .tiping, .gc.ping::after { animation: none; } }
.chatlog { max-height: 260px; overflow: auto; display: grid; gap: 4px; margin-bottom: 6px; }
.cm { padding: 4px 8px; border-radius: 6px; background: #0001; }
.cm.sussurro { opacity: .85; font-style: italic; }
.cm.gmmsg { border-left: 3px solid var(--gold, #e0c068); border-radius: 0 6px 6px 0; }
.cmroll { font-weight: 800; font-size: 1.1em; }
.chatin { gap: 6px; align-items: center; }

/* rolagem própria dos painéis que abrem na barra do topo (diário, rumores, missões, loja, pessoas) */
.ondefixo .card { max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gold, #e0c068) transparent; }
.ondefixo .card::-webkit-scrollbar { width: 8px; }
.ondefixo .card::-webkit-scrollbar-thumb { background: var(--gold, #e0c068); border-radius: 8px; }
.ondefixo .card p, .ondefixo .card li, .ondefixo .card summary { overflow-wrap: anywhere; }

/* grid: barra de cima (chão, tamanho, zoom), rolagem, rótulos */
.gtopo { display: flex; gap: 8px; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; }
.gtopo .f { width: auto; }
.gtopo .num { width: 70px; }
.gzoom { display: inline-flex; gap: 4px; }
.gridscroll { overflow: auto; max-height: 75vh; border-radius: 8px; }
.avtab .grid { max-height: none; }
.gc .grot { position: absolute; right: 1px; top: 0; font-size: 11px; font-style: normal; line-height: 1; pointer-events: none; }
.gc .grot.oculta { opacity: .55; }
.gc.cob { box-shadow: inset 0 0 0 3px rgba(80, 140, 220, .75); }
.grots { display: flex; flex-wrap: wrap; gap: 4px; }
.grotchip { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: #0003; }
.grotchip.oculta { opacity: .6; font-style: italic; }

/* arrastar o mapa */
.gridscroll { cursor: grab; user-select: none; scrollbar-width: thin; }
.gridscroll.arrastando, .gridscroll.arrastando .gc { cursor: grabbing; }

/* barra de heróis do mestre, à esquerda acima do grid */
.gherois { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-right: auto; }
.gtok.hbar { width: 38px; height: 38px; padding: 0; cursor: pointer; }
.gtok.hbar.fora { opacity: .45; filter: grayscale(.7); border-style: dashed; }
.gtok.hbar.sel { outline: 3px solid #fff; outline-offset: 1px; }

/* rastreador de turnos no ao vivo, abaixo do grid */
.avtrack { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff22; }

/* aliado/inimigo no bestiário e no grid */
.bstlado { display: flex; gap: 3px; margin-top: 3px; }
.bstlado .btn { flex: 1; padding: 2px 2px; font-size: 11px; min-height: 0; }
.gtok.foe.ally { border-color: #3fae5b; }
.trow .virar { padding: 1px 6px; font-size: 11px; min-height: 0; margin-left: 4px; }
.chip.cria { border-style: dashed; }
.bst .pic[data-semimg], .gtok[data-semimg] { display: grid; place-items: center; }
.bst .pic[data-semimg]::after { content: "🛡"; font-size: 34px; opacity: .55; }
.gtok[data-semimg]::after { content: "🛡"; font-size: 60%; opacity: .8; }

/* bestiário recolhível com subabas */
.bestcab { display: flex; gap: 8px; align-items: center; margin: 10px 0 6px; }
.bestabas { margin-bottom: 8px; }
.bestabas .chip small { opacity: .7; }

/* lados (facções) no combate */
.ladolab { display: inline-block; margin-left: 4px; }
.ladosel { font-size: 11px; padding: 1px 4px; border-radius: 99px; border: 2px solid var(--cl, #888); background: #0003; color: inherit; max-width: 160px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chip.amigo { opacity: .75; border-style: dotted; }
.gtok .ldot { position: absolute; left: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #000a; pointer-events: none; }
.ladospainel { margin: 0 0 8px; }
.ladospainel summary { cursor: pointer; font-weight: 700; }
.ladospares { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.relbtn { font-size: 12px; padding: 3px 8px; border-radius: 99px; border: 1px solid #ffffff33; background: #0003; color: inherit; cursor: pointer; }
.relbtn.hostil { border-color: #c0392b; } .relbtn.aliado { border-color: #3fae5b; }
.reltab { overflow-x: auto; }
.reltab table { border-collapse: collapse; font-size: 12px; }
.reltab th { text-align: left; font-weight: 600; padding: 2px 4px; white-space: nowrap; }
.reltab th.v { height: 110px; vertical-align: bottom; padding: 0; }
.reltab th.v span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; padding: 2px; }
.reltab td { text-align: center; padding: 1px; }
.reltab td.eu { opacity: .35; } .reltab .sep { width: 10px; }
.relcel { width: 28px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid #ffffff22; background: #0003; cursor: pointer; }
.relcel.hostil { background: #c0392b33; } .relcel.aliado { background: #3fae5b22; }

/* fb57b: criatura sem retrato também no rastreador */
.trow .av[data-semimg] { display: grid; place-items: center; }
.trow .av[data-semimg]::after { content: "🛡"; font-size: 22px; opacity: .6; }

/* fb58b: legível sobre a linha escura do rastreador */
.trow .virar, .trow .virar.ghost { background: var(--felt); color: var(--parch); border: 1px solid var(--gold); font-weight: 700; }
.trow .virar:hover { background: var(--gold); color: var(--ink); }
.trow .ladosel { background: var(--felt); color: var(--parch); font-weight: 700; }
.trow .ladosel option { background: var(--felt-3); color: var(--parch); }
.trow .pill { font-size: 12px; }

/* fb59b: rótulo do zoom legível */
.gzoom .gzval, .gzoom .gzval.ghost { background: var(--felt); color: var(--parch); border: 1px solid var(--gold); font-weight: 700; min-width: 52px; }

/* fb60: token selecionado no grid = linha marcada na tabela de turnos */
.trow.selrow { border-color: #7fd3ff; box-shadow: 0 0 0 2px #7fd3ff55, 0 0 14px #7fd3ff66; position: relative; }
.trow.selrow::before { content: "🎯 selecionado"; position: absolute; top: -9px; right: 10px; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: #7fd3ff; color: #10202a; }

/* fb61: janela fixa, mapa com zoom dentro (centralizado quando menor que a janela) */
.gridscroll { display: flex; background: #00000033; }
.gridscroll > .grid { flex: none; margin: auto; }

/* fb62: condições visíveis no grid */
.gc.comcond { z-index: 2; }
.gtok.foe { overflow: visible; }  /* a regra genérica .foe (cartões) cortava o selo da condição */
.gtok.temcond { box-shadow: 0 0 0 2px #b36bff, 0 1px 3px rgba(0,0,0,.6); }
.gtok .gcond { right: -8px; top: -10px; font-size: 15px; line-height: 1.15; padding: 0 3px; background: rgba(12,8,20,.88); border: 1px solid #b36bff; border-radius: 9px; z-index: 3; white-space: nowrap; pointer-events: none; }

/* fb63: "você" com condição = anel branco + anel roxo */
.gtok.eu.temcond { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b36bff, 0 1px 3px rgba(0,0,0,.6); }

/* fb64: vários tokens na mesma casa = sobrepostos, menores e deslocados (a casa não cresce) */
.gc > .gtok { grid-area: 1 / 1; }
.gc:has(> .gtok ~ .gtok) > .gtok { width: 56%; }
.gc:has(> .gtok ~ .gtok) > .gtok:nth-of-type(1) { transform: translate(-38%, -38%); }
.gc:has(> .gtok ~ .gtok) > .gtok:nth-of-type(2) { transform: translate(38%, 38%); }
.gc:has(> .gtok ~ .gtok ~ .gtok) > .gtok { width: 46%; }
.gc:has(> .gtok ~ .gtok ~ .gtok) > .gtok:nth-of-type(1) { transform: translate(-56%, -56%); }
.gc:has(> .gtok ~ .gtok ~ .gtok) > .gtok:nth-of-type(2) { transform: translate(56%, -56%); }
.gc:has(> .gtok ~ .gtok ~ .gtok) > .gtok:nth-of-type(3) { transform: translate(-56%, 56%); }
.gc:has(> .gtok ~ .gtok ~ .gtok) > .gtok:nth-of-type(4) { transform: translate(56%, 56%); }

/* fb65: pedido de movimento */
.grid { position: relative; }
.gseta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.gseta line { stroke: #7fd3ff; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 7 5; marker-end: url(#pmPonta); }
.gseta line.rasc { stroke-opacity: .6; }
.gc.pedmovdest { box-shadow: inset 0 0 0 3px #7fd3ff; z-index: 3; }
.pedmov { margin-top: 6px; padding: 8px 10px; border-radius: 8px; border: 1px solid #7fd3ff; background: #0b1d26cc; color: var(--parch); font-size: 14px; }
.pedmov .inp { width: 100%; margin-top: 6px; }
.pedmov.recus { border-color: #ff6a5a; }
.pedmov.gm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.pedmovs { display: grid; gap: 4px; }

/* fb65b: botões discretos legíveis no painel do pedido */
.pedmov .btn.ghost { color: var(--parch); border-color: #7fd3ff88; }

/* fb67: manobras do jogador */
.manobras { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.manobras.ativo { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--gold); background: #1a140acc; color: var(--parch); }
.manobras .btn.ghost { color: var(--parch); border-color: #e0ad4a88; }

/* fb70: comentários nas narrações e falas (discretos, cinza-claro) */
.coms { margin: -4px 0 8px; display: flex; flex-direction: column; align-items: flex-end; }
.coms.vazio { margin: -10px 4px 4px 0; }
.coms .comtog { font-size: 12px; padding: 2px 9px; border-radius: 12px 12px 3px 12px; border: 1px solid #c9c4b8; background: #e9e6df; color: #3a352c; cursor: pointer; line-height: 1.4; }
.coms.vazio .comtog { opacity: .45; padding: 1px 6px; background: transparent; border-color: transparent; color: inherit; }
.coms.vazio .comtog:hover, .coms.vazio .comtog:focus-visible { opacity: 1; background: #e9e6df; color: #3a352c; }
.comlista { align-self: stretch; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: #ece9e2; color: #2c2822; border: 1px solid #d3cdc0; font-size: 14px; display: grid; gap: 4px; }
.com .comx { color: #8a3b2c; font-size: 12px; }
.comnovo { display: flex; gap: 6px; margin-top: 2px; }
.comnovo .inp { flex: 1; background: #fff; color: #2c2822; border-color: #cfc8b9; }

/* fb71: correções do mestre */
.roll { position: relative; }
.roll .rolldel { position: absolute; right: 4px; top: 4px; border: 0; background: transparent; cursor: pointer; opacity: .4; font-size: 13px; padding: 2px; }
.roll .rolldel:hover, .roll .rolldel:focus-visible { opacity: 1; }
.corrige { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.corrige .btn.ghost { color: var(--parch); border-color: #e0ad4a88; }

/* fb73: faixa de turno, registro curto acima do grid */
.faixaturno { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin-bottom: 6px; scrollbar-width: thin; }
.ftok { flex: none; display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 4px 8px 4px 4px; border-radius: 10px; border: 2px solid transparent; background: var(--felt-3); color: var(--parch); cursor: pointer; text-align: left; }
.ftok .fimg { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: var(--felt) center top / cover no-repeat; border: 2px solid #b33; }
.ftok.pc .fimg { border-color: var(--seat, var(--gold)); } .ftok.ally .fimg { border-color: #3fae5b; }
.ftok .fnm { font-size: 12px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftok .fini { font-size: 11px; opacity: .8; }
.ftok.now { border-color: var(--gold); } .ftok.sel { box-shadow: 0 0 0 2px #7fd3ff; } .ftok.down { opacity: .5; filter: grayscale(1); }
.cbreg { margin-bottom: 8px; }
.cbregtl { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.cbpainel h3 { margin-bottom: 8px; }
.mesaconv .tl.rolafim { max-height: calc(100vh - var(--barh, 60px) - 250px); min-height: 240px; overflow-y: auto; }

/* fb74: aviso "alguém agiu" ao lado das abas */
#avisoSlot { display: inline-flex; align-items: center; margin-left: 8px; }
.avisoagiu { border: 1px solid #c0392b; background: #4a1712; color: #ffd9d2; border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; animation: avisoPulsa 1.6s ease-in-out infinite; }
.avisoagiu:hover { background: #6a2018; }
@keyframes avisoPulsa { 0%, 100% { box-shadow: 0 0 0 0 #c0392b66; } 50% { box-shadow: 0 0 0 5px #c0392b00; } }
@media (prefers-reduced-motion: reduce) { .avisoagiu { animation: none; } }

/* fb75: barra de grupos fixa na aba Mesa */
.mesaabas { position: sticky; top: var(--barh, 56px); z-index: 30; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; margin: 0 0 10px; border-radius: 12px; background: var(--felt); border: 1px solid #ffffff22; box-shadow: 0 4px 12px #0006; }

/* fb77: heróis de cada grupo na barra da Mesa */
.mesaabas .mahs { font-weight: 400; opacity: .85; }

/* fb78: atlas na barra de cima */
header.bar { flex-wrap: wrap; row-gap: 6px; }
#atlasSlot { flex: 1 1 auto; min-width: 0; display: flex; }
.atbarra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 14px; }
.atbarra .attit { font-family: var(--display, inherit); color: var(--gold); font-weight: 700; }
.atbarra .atloc { font-size: 13px; opacity: .9; margin-right: 4px; white-space: nowrap; }

/* fb80: topo numa linha só */
@media (min-width: 900px) {
  header.bar { flex-wrap: nowrap; gap: 10px; }
  #atlasSlot { flex: 0 1 auto; min-width: 0; }
  .atbarra { flex-wrap: nowrap; gap: 4px; margin-left: 8px; min-width: 0; }
  .atbarra .btn.sm { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
  .atbarra .atloc { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  header.bar .conn { font-size: 11.5px; line-height: 1.2; max-width: 150px; white-space: normal; flex: 0 1 auto; }
  header.bar #avisoSlot { flex: none; }
}

/* fb82: texto legível no grupo selecionado da barra da Mesa */
.mesaabas .chip.on, .mesaabas .chip.on b, .mesaabas .chip.on .mahs { color: var(--ink, #2b2118); }

/* fb84: passivas no tracker e editor de bestiário da mesa */
.pasinfo { font-size: 12px; margin: 2px 0 4px; }
.pasinfo span { opacity: .6; }
.pasinfo span.on { opacity: 1; font-weight: 800; color: var(--gold, #e0c068); }
#bestOv { position: fixed; inset: 0; z-index: 85; overflow: auto; background: var(--felt, #1f2a24); }
#bestOv .ovtopo { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 16px; background: rgba(0,0,0,.55); color: var(--gold, #e0c068); }
#bestOv .bested { max-width: 860px; margin: 12px auto 60px; padding: 0 16px; }
#bestOv .edform { display: grid; gap: 10px; }
#bestOv .f { display: grid; gap: 3px; font-weight: 700; color: #3b3326; }
#bestOv .pasrow .pasl { color: #3b3326; }
#bestOv .f > span:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#bestOv .row { display: flex; gap: 8px; flex-wrap: wrap; }
#bestOv .row > .f { flex: 1 1 90px; }
#bestOv .imgpick { display: flex; gap: 8px; align-items: center; }
#bestOv .imgprev { width: 72px; height: 72px; border-radius: 8px; background: #0003 center/cover no-repeat; border: 1px solid var(--line); flex: none; }
#bestOv .begal { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 6px; max-height: 260px; overflow: auto; }
#bestOv .begimg { aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; background: #0003 center/cover no-repeat; cursor: pointer; padding: 0; }
#bestOv .begimg:hover { border-color: var(--gold, #e0c068); }
#bestOv .infob { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: none; color: inherit; font: italic 700 12px/1 Georgia, serif; cursor: pointer; opacity: .75; }
#bestOv .infob.on { opacity: 1; background: var(--gold, #e0c068); color: #2a2215; border-color: var(--gold, #e0c068); }
#bestOv .ajudatxt { display: block; font-size: 13.5px; line-height: 1.45; font-weight: 400; background: #e0c06826; border-left: 3px solid var(--gold, #e0c068); padding: 8px 10px; border-radius: 6px; }
#bestOv .ajudatxt[hidden] { display: none; }
#bestOv .sotag { font-size: 12px; font-weight: 700; color: #e07a6a; }

/* fb86: condição configurável e ação livre */
.condcfg { display: grid; gap: 6px; }
.condcfg .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: end; }
.condcfg .f { width: auto; flex: 0 1 auto; }
.condcfg .num { width: 70px; }
.acaolivre { display: grid; gap: 6px; margin: 4px 0; }
.acaolivre .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: end; }
.acaolivre .f { width: auto; flex: 0 1 auto; }
.acaolivre .num { width: 70px; }

/* fb87: cartão da jogada quebra linha em tela estreita (o botão "Aplicar…" não espreme mais o texto) */
.roll { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; }
.roll > .tot { flex: 0 0 56px; }
.roll > .tot + div { flex: 1 1 170px; min-width: 0; }
.roll > .acts { flex: 1 0 auto; max-width: 100%; justify-items: end; }
.roll > .acts:empty { display: none; }
.roll .acts .btn { white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 560px) { .roll > .tot { flex-basis: 40px; } }

/* fb89: mandar uma opção para um herói */
.oprow .opmover { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); padding: 0 0 6px; }
.oprow .opmover .chip { padding: 3px 10px; }

/* fb91: ajustar herói */
.ajheroi { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.ajrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px auto; gap: 6px; align-items: center; font-weight: 700; }
.ajrow .inp { width: 72px; text-align: center; }
.ajrow small { font-weight: 400; }

/* fb92: consequências nos testes */
.oprow .opcons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); padding: 0 0 6px; }
.oprow .opcons label { display: inline-flex; gap: 6px; align-items: center; }
.oprow .opcons select { width: auto; }
.condsf.pend > div { border-left: 3px dashed var(--gold, #e0c068); padding-left: 6px; }
.condsheroi { display: grid; gap: 6px; margin-top: 10px; }

/* fb93: Ataque furtivo passivo */
.passivo { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 14px; }
.passivo .tg { opacity: .8; font-size: 12.5px; }
.passivo .passinfo { flex-basis: 100%; margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; }
.passivo .infob, .infob { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: none; color: inherit; font: italic 700 12px/1 Georgia, serif; cursor: pointer; opacity: .8; }
.passivo .infob.on { opacity: 1; background: var(--gold, #e0c068); color: #2a2215; border-color: var(--gold, #e0c068); }

/* fb99: régua */
.gc.reguaini { outline: 3px solid var(--gold, #e0c068); outline-offset: -3px; }
.gregua { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.gregua line { stroke: var(--gold, #e0c068); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 9 5; }
.gregua circle { fill: var(--gold, #e0c068); }
.greguatxt { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; background: rgba(20, 16, 10, .88); color: #f3e2b0; border: 1px solid var(--gold, #e0c068); border-radius: 999px; padding: 2px 9px; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* fb102: desenho livre */
.gtracos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; overflow: visible; }
.gtracos polyline { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #000a); }
.gtracos polyline.fixo { stroke-width: 3; opacity: .85; }
.gdesenho { position: absolute; inset: 0; z-index: 8; cursor: crosshair; touch-action: none; background: rgba(255, 255, 255, .03); outline: 2px dashed var(--gold, #e0c068); outline-offset: -2px; }

/* fb103: mensagem de morte */
.morteaviso { z-index: 80; background: rgba(5, 3, 3, .88); }
.morteaviso .mbox { border-color: #7a1d1d; text-align: center; background: linear-gradient(#1d1414, #120c0c); animation: morteEntra .6s ease-out; }
.morteaviso .caveira { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 12px #b0202088); }
.morteaviso h3 { color: #e05555; font-size: 30px; }
.morteaviso .frase { font-style: italic; font-size: 17px; color: #f0e2d0; }
.morteaviso .row { justify-content: center; }
@keyframes morteEntra { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .morteaviso .mbox { animation: none; } }

/* fb104: roteiro guiado */
#tourBox { position: fixed; z-index: 90; background: var(--felt-2, #1d2b26); color: var(--ink-l, #f1e6cf); border: 2px solid var(--gold, #e0c068); border-radius: 12px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.6); display: grid; gap: 6px; transition: top .2s, left .2s; }
#tourBox .tourTit { font-weight: 800; color: var(--gold, #e0c068); font-size: 17px; }
#tourBox p { margin: 0; line-height: 1.45; font-size: 15px; }
#tourBox .tourRod { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
#tourBox .tourRod small { opacity: .7; margin-right: auto; }
.tourAlvo { outline: 3px solid var(--gold, #e0c068) !important; outline-offset: 3px; border-radius: 8px; animation: tourPulsa 1.4s ease-in-out infinite; position: relative; z-index: 5; }
@keyframes tourPulsa { 50% { box-shadow: 0 0 0 6px rgba(224, 192, 104, .35); } }
@media (prefers-reduced-motion: reduce) { .tourAlvo { animation: none; } #tourBox { transition: none; } }
#tourBox .btn.ghost { color: inherit; border: 1px solid rgba(241, 230, 207, .55); opacity: 1; }

/* fb104d: seta, foco e etiquetas do roteiro */
#tourFoco { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 86; pointer-events: none; }
#tourFoco path { fill: rgba(4, 8, 6, .62); }
#tourFoco rect { fill: none; stroke: var(--gold, #e0c068); stroke-width: 3; animation: focoPulsa 1.4s ease-in-out infinite; }
#tourFoco rect.b2 { stroke-dasharray: 7 4; stroke-width: 2.5; }
@keyframes focoPulsa { 50% { stroke-width: 6; stroke-opacity: .7; } }
#tourTags { position: fixed; inset: 0; z-index: 87; pointer-events: none; }
.tourTag { position: absolute; background: var(--gold, #e0c068); color: #1a1408; font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px #0008; }
.tourTag:not(.t1) { background: #f3e2b0; }
.tourAlvo { outline: none !important; animation: none; }
#tourBox .tourSeta { display: none; position: absolute; left: var(--sx, 50%); width: 0; height: 0; border: 12px solid transparent; transform: translateX(-50%); }
#tourBox.seta-cima .tourSeta { display: block; top: -26px; border-bottom: 14px solid var(--gold, #e0c068); }
#tourBox.seta-baixo .tourSeta { display: block; bottom: -26px; border-top: 14px solid var(--gold, #e0c068); }
@media (prefers-reduced-motion: reduce) { #tourFoco rect { animation: none; } }
#tourBox.seta-esq .tourSeta { display: block; left: -26px; top: var(--sy, 50%); transform: translateY(-50%); border-right: 14px solid var(--gold, #e0c068); }
#tourBox.seta-dir .tourSeta { display: block; left: auto; right: -26px; top: var(--sy, 50%); transform: translateY(-50%); border-left: 14px solid var(--gold, #e0c068); }

/* fb105: ⓘ nas ações do herói */
.actw { position: relative; display: grid; }
.actw > .act { padding-right: 30px; }
.actw > .infob { position: absolute; top: 6px; right: 6px; color: var(--ink, #2a2215); background: #fffaf0; }
.actw > .infob.on { background: var(--gold, #e0c068); color: #2a2215; border-color: var(--gold, #e0c068); }
.passinfo.actinfo { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; background: rgba(224, 192, 104, .12); border-left: 3px solid var(--gold, #e0c068); padding: 6px 10px; border-radius: 6px; }

/* fb108: esqueleto do jogador e PV extras */
.servos { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--gold, #e0c068); border-radius: 8px; display: grid; gap: 6px; }
.servo .row { gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pvextra { font-size: 12px; font-weight: 700; opacity: .85; }

/* fb112: medidor de dificuldade */
.dificuldade { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 10px; margin-bottom: 10px; border-radius: 8px; border: 2px solid; background: rgba(0, 0, 0, .12); }
.dificuldade b { font-size: 15px; }
.dificuldade .passinfo { flex-basis: 100%; }
.dif-facil { border-color: #6fbf73; } .dif-medio { border-color: #e0c068; } .dif-dificil { border-color: #e08a3c; } .dif-mortal { border-color: #d0453b; }

/* fb113: versões das criaturas */
.chips.versoes { align-items: center; margin: 6px 0; }

/* fb115: gerador de encontros */
.gerador { border: 1px dashed var(--gold, #e0c068); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.gerador summary { cursor: pointer; font-weight: 700; }
.gerador .chips { align-items: center; margin-top: 6px; }
.genres { display: grid; gap: 6px; margin-top: 8px; }
.genitem { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .12); }
.genitem > div { display: grid; gap: 2px; min-width: 0; }