/* Layout: tela cheia de jogo mobile; HUD nos cantos (grupo à esquerda, onda no centro, ouro à direita), ações embaixo à direita, joystick onde o dedo tocar */
:root {
  --bg: #0e1626;
  --hud: rgba(14, 22, 38, .78);
  --line: #2e3f5e;
  --fg: #eef3ff;
  --muted: #9aaacb;
  --gold: #ffcf4a;
  --gold-deep: #c98a12;
  --hp: #ff5d6c;
  --xp: #5fd3ff;
  --display: "Lilita One", "Arial Black", Impact, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--fg); font-family: var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 12px;
  box-sizing: border-box; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.stage { position: relative; height: 100%; max-width: 1100px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #9fd3a0; box-shadow: inset 0 0 0 2px var(--line); touch-action: none; }
canvas { display: block; width: 100%; height: 100%; }
.hud { position: absolute; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.pill { background: var(--hud); border-radius: 12px; padding: 6px 10px; }
.party { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.member { display: flex; align-items: center; gap: 8px; background: var(--hud); border-radius: 12px; padding: 5px 9px 5px 5px; width: 128px; }
.member .face { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 13px; color: #fff; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.member .info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.member .nm { font-size: 11px; font-weight: 800; line-height: 1; }
.mini { height: 6px; border-radius: 9px; background: var(--line); overflow: hidden; }
.mini > i { display: block; height: 100%; width: 100%; background: var(--hp); border-radius: 9px; }
.member.dead { opacity: .45; }
.wave { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); text-align: center; min-width: 120px; }
.wave b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .5px; display: block; }
.wave .mini > i { background: var(--gold); }
.right { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gold { font-family: var(--display); font-size: 17px; display: flex; align-items: center; gap: 6px; }
.gold::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, var(--gold) 55%, var(--gold-deep)); }
.lvl { width: 110px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 800; }
.lvl .mini > i { background: var(--xp); width: 0; }
.actions { position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 10px; pointer-events: auto; }
.small-btns { display: flex; flex-direction: column; gap: 8px; }
.btn { font-family: var(--display); font-size: 14px; letter-spacing: .4px; border: 0; border-radius: 12px; padding: 8px 12px; cursor: pointer; color: #1b1405; background: linear-gradient(#e6eeff, #b9c9ea); box-shadow: 0 3px 0 #7d8fb5; }
.btn.on { background: linear-gradient(#ffe07a, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.skill { width: 74px; height: 74px; border-radius: 50%; border: 3px solid #fff3c0; font-family: var(--display); font-size: 13px; color: #1b1405; background: radial-gradient(circle at 40% 30%, #fff6c8, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 4px 0 #8a5a08, 0 8px 18px rgba(0,0,0,.4); cursor: pointer; position: relative; overflow: hidden; }
.skill span { position: relative; z-index: 1; display: block; line-height: 1.05; }
.skill i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(14,22,38,.6); }
.skill[disabled] { filter: saturate(.3); cursor: default; }
button:focus-visible { outline: 3px solid var(--xp); outline-offset: 2px; }
.hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6); transition: opacity .6s; white-space: nowrap; }
.banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-family: var(--display); font-size: clamp(30px, 7vw, 52px); color: #fff; -webkit-text-stroke: 2px #1c2a44; text-shadow: 0 4px 0 #1c2a44, 0 8px 18px rgba(0,0,0,.45); opacity: 0; transform: scale(.7); transition: opacity .25s, transform .25s; }
.banner.show { opacity: 1; transform: scale(1); }
.banner small { display: block; font-size: .42em; -webkit-text-stroke: 1px #1c2a44; margin-top: 6px; }
.dmg { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 17px; color: #fff; -webkit-text-stroke: 1px #1c2a44; text-shadow: 0 2px 0 #1c2a44; white-space: nowrap; will-change: transform; }
.dmg.crit { font-size: 23px; color: var(--gold); }
.dmg.hurt { color: var(--hp); }
.joy { position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 3px rgba(255,255,255,.5); }
.joy i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78%; overflow-y: auto; background: #18233a; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.5); padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; pointer-events: auto; }
.sheet header { display: flex; justify-content: space-between; align-items: center; }
.sheet h2 { font-family: var(--display); font-weight: 400; font-size: 20px; margin: 0; }
.sheet h3 { font-family: var(--display); font-weight: 400; font-size: 15px; margin: 4px 0 0; color: var(--muted); letter-spacing: .5px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; background: #213049; border-radius: 12px; padding: 9px 11px; border: 2px solid transparent; min-width: 0; }
.card .t { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .d { font-size: 12px; color: var(--muted); font-weight: 700; grid-column: 1; }
.card button { grid-row: 1 / span 2; grid-column: 2; font-family: var(--display); font-size: 14px; border: 0; border-radius: 10px; padding: 8px 12px; min-width: 88px; cursor: pointer; color: #1b1405; background: linear-gradient(#ffe07a, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.card button[disabled] { background: var(--line); color: var(--muted); box-shadow: none; cursor: default; }
.reset { align-self: flex-start; font-family: var(--body); font-weight: 800; font-size: 13px; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.reset.warn { color: var(--hp); border-color: var(--hp); }
.stage[data-mode="hub"] .wave, .stage[data-mode="hub"] .skill, .stage[data-mode="hub"] #btnAuto, .stage[data-mode="hub"] #btnLeave { display: none; }
.stage[data-mode="dungeon"] #labels, .stage[data-mode="dungeon"] .enter { display: none; }
.blabel { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 15px; letter-spacing: .4px; color: #fff; background: var(--hud); border-radius: 999px; padding: 4px 12px; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.blabel.near { background: linear-gradient(#ffe07a, var(--gold)); color: #1b1405; }
.enter { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); font-family: var(--display); font-size: 18px; letter-spacing: .5px; border: 0; border-radius: 16px; padding: 12px 22px; color: #1b1405; background: linear-gradient(#ffe07a, var(--gold)); box-shadow: 0 4px 0 var(--gold-deep), 0 10px 22px rgba(0,0,0,.35); cursor: pointer; pointer-events: auto; white-space: nowrap; }
.enter:active { transform: translateX(-50%) translateY(2px); box-shadow: 0 1px 0 var(--gold-deep); }
.sheet-body { display: flex; flex-direction: column; gap: 10px; }
.sheet-body p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; max-width: 62ch; }
.dg { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #213049; border: 2px solid var(--line); min-width: 0; }
.dg .t { font-family: var(--display); font-size: 18px; letter-spacing: .4px; }
.dg .d { grid-column: 1; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.dg button { grid-row: 1 / span 2; grid-column: 2; font-family: var(--display); font-size: 16px; border: 0; border-radius: 12px; padding: 10px 16px; cursor: pointer; color: #1b1405; background: linear-gradient(#ffe07a, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.dg button[disabled] { background: var(--line); color: var(--muted); box-shadow: none; cursor: default; }
.dg.forest { border-color: #3f9a4a; } .dg.ice { border-color: #7fc8ff; }
.bossbar { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); width: min(46%, 380px); text-align: center; background: var(--hud); border-radius: 14px; padding: 6px 12px 9px; box-shadow: 0 0 0 2px rgba(255,93,108,.5); }
.bossbar b { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .5px; color: #ffd0d5; display: block; margin-bottom: 4px; }
.bmini { height: 12px; border-radius: 9px; background: var(--line); overflow: hidden; }
.bmini > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff3b55, #ff8a5c); border-radius: 9px; transition: width .15s; }
.dmg.abil { color: #9fe6ff; font-size: 16px; }
.dmg.heal { color: #7fff9a; }
.flashfx { position: absolute; inset: 0; background: #fffbe6; opacity: 0; pointer-events: none; }
.flashfx.go { animation: fxFlash .28s ease-out; }
@keyframes fxFlash { 0% { opacity: .55; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flashfx.go { animation: none; } }
.sheet.tall { max-height: 92%; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { font-family: var(--display); font-size: 14px; letter-spacing: .3px; border: 0; border-radius: 10px; padding: 7px 12px; background: #213049; color: var(--fg); cursor: pointer; box-shadow: inset 0 -3px 0 var(--c); }
.tab.on { background: var(--c); color: #fff; box-shadow: none; }
.pts { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; background: #213049; border-radius: 12px; padding: 8px 12px; }
.pts span { font-weight: 800; font-size: 14px; } .pts b { font-family: var(--display); font-size: 24px; color: var(--gold); grid-row: 1 / span 2; grid-column: 2; font-weight: 400; } .pts small { color: var(--muted); font-weight: 700; font-size: 12px; }
.web { width: 100%; max-width: 660px; height: auto; align-self: center; overflow: visible; }
.web .ring { fill: none; stroke: #2e3f5e; stroke-width: 1.5; stroke-dasharray: 4 6; }
.web .strand { stroke: #263652; stroke-width: 1.5; }
.web .link { stroke: #2e3f5e; stroke-width: 5; stroke-linecap: round; }
.web .link.on { stroke: var(--c); }
.web .core { fill: var(--c); stroke: #fff3c0; stroke-width: 3; }
.web .coretx { fill: #fff; font-family: var(--display); font-size: 15px; text-anchor: middle; dominant-baseline: central; }
.web .node { cursor: pointer; outline: none; }
.web .node circle { fill: #18233a; stroke: #3a4d72; stroke-width: 3; transition: stroke .15s, fill .15s; }
.web .node.owned circle { fill: var(--c); stroke: #fff3c0; }
.web .node.part circle { stroke: var(--gold); }
.web .node.can circle { stroke: var(--gold); stroke-width: 4; animation: talPulse 1.4s ease-in-out infinite; }
.web .node.sel circle, .web .node:focus-visible circle { stroke: #ffffff; stroke-width: 5; }
.web .rk { fill: #fff; font-family: var(--display); font-size: 18px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.web .node.locked .rk { fill: var(--muted); }
.web .nm { fill: var(--fg); font-size: 17px; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: #18233a; stroke-width: 5px; }
.web .node.locked .nm { fill: var(--muted); }
@keyframes talPulse { 50% { stroke-opacity: .3; } }
.talinfo { background: #213049; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--c, var(--line)); }
.talinfo .th { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.talinfo .tn { font-family: var(--display); font-size: 18px; } .talinfo .tt { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.talinfo .tf { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 800; font-size: 13px; color: var(--muted); }
.talinfo button { font-family: var(--display); font-size: 15px; border: 0; border-radius: 10px; padding: 9px 14px; cursor: pointer; color: #1b1405; background: linear-gradient(#ffe07a, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.talinfo button[disabled] { background: var(--line); color: var(--muted); box-shadow: none; cursor: default; }
@media (prefers-reduced-motion: reduce) { .web .node.can circle { animation: none; } }
.member { pointer-events: auto; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .1s; }
.member:active { transform: scale(.97); }
.member:focus-visible { outline: 3px solid var(--xp); outline-offset: 2px; }
.member.main { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,207,74,.45); }
.adots { display: flex; gap: 4px; margin-top: 1px; }
.adots b { width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(rgba(14,22,38,.85) var(--p, 0%), #8fe6ff 0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.adots b.off { background: #2e3f5e; box-shadow: none; }
.adots b.ok { background: #8fe6ff; box-shadow: 0 0 5px #8fe6ff; }
.abar { position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; pointer-events: auto; }
.stage[data-mode="hub"] .abar { opacity: .85; }
.ab { position: relative; width: 58px; height: 58px; padding: 0; border-radius: 16px; border: 2px solid rgba(255,255,255,.35); background: var(--c); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); overflow: hidden; }
.ab svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 0; }
.ab .cdv { position: absolute; inset: 0; background: conic-gradient(rgba(10,16,30,.78) var(--p, 0%), transparent 0); }
.ab .sec { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 20px; text-shadow: 0 2px 0 #1c2a44; }
.ab .lk { display: none; position: absolute; left: 0; right: 0; bottom: 3px; font-size: 10px; font-weight: 800; text-align: center; color: var(--muted); }
.ab.ready { border-color: var(--gold); box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 14px rgba(255,207,74,.75); }
.ab.locked { background: #213049; cursor: default; }
.ab.locked svg { stroke: #5a6b8c; } .ab.locked .lk { display: block; }
.ab:active:not(.locked) { transform: translateY(2px); }
.trainbox { display: none; position: absolute; right: 10px; top: 108px; width: 190px; flex-direction: column; gap: 6px; background: var(--hud); border-radius: 14px; padding: 10px; pointer-events: auto; font-variant-numeric: tabular-nums; }
.stage[data-train="1"] .trainbox { display: flex; }
.stage[data-train="1"] .wave .mini { display: none; }
.tb-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tb-h b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .4px; }
.tb-h button, .tb-btns button { font-family: var(--body); font-weight: 800; font-size: 12px; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--fg); background: #2e3f5e; }
.tb-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.tb-btns button { flex: 1 1 auto; }
.tb-btns button.tog.on { background: linear-gradient(#ffe07a, var(--gold)); color: #1b1405; }
.tb-n { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 800; color: var(--muted); }
.tb-n b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--gold); }
.tb-rows { display: flex; flex-direction: column; gap: 4px; }
.tr { position: relative; display: flex; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 800; padding: 3px 6px; border-radius: 6px; overflow: hidden; background: #18233a; }
.tr .tl { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tr b { position: relative; z-index: 1; font-weight: 800; }
.tr i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .45; }
.tnone { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.trainbox.min .tb-rows, .trainbox.min .tb-btns, .trainbox.min .tb-n:nth-of-type(3) { display: none; }
.hint { bottom: 84px; }
/* Paisagem: o jogo é sempre horizontal. No celular em pé ele gira sozinho. */
.stage.rot { position: fixed; top: 0; left: var(--vw); width: var(--vh); height: var(--vw); max-width: none; margin: 0; border-radius: 0; box-shadow: none; transform-origin: 0 0; transform: rotate(90deg); }
.stage.full { position: fixed; inset: 0; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
.stage.full .party, .stage.full .wave, .stage.full .right, .stage.full .actions, .stage.full .abar { margin: 0; }
.stage.full .party { left: max(10px, env(safe-area-inset-left, 0px)); }
.stage.full .right { right: max(10px, env(safe-area-inset-right, 0px)); }
.stage.full .abar { left: max(12px, env(safe-area-inset-left, 0px)); }
/* Tela baixa (celular deitado): HUD compacto */
.stage[data-compact="1"] .member { width: 116px; padding: 3px 8px 3px 3px; gap: 6px; }
.stage[data-compact="1"] .member .face { width: 22px; height: 22px; font-size: 11px; }
.stage[data-compact="1"] .party { gap: 4px; top: 8px; }
.stage[data-compact="1"] .small-btns { flex-direction: row; gap: 6px; }
.stage[data-compact="1"] .btn { padding: 7px 10px; font-size: 13px; }
.stage[data-compact="1"] .skill { width: 62px; height: 62px; font-size: 11.5px; }
.stage[data-compact="1"] .ab { width: 50px; height: 50px; border-radius: 14px; }
.stage[data-compact="1"] .ab svg { width: 25px; height: 25px; }
.stage[data-compact="1"] .abar { gap: 6px; }
.stage[data-compact="1"] .hint { bottom: 14px; font-size: 12px; }
.stage[data-compact="1"] .enter { bottom: 76px; font-size: 16px; padding: 10px 18px; }
.stage[data-compact="1"] .wave b { font-size: 16px; }
.stage[data-compact="1"] .bossbar { top: 44px; width: min(40%, 340px); }
.stage[data-compact="1"] .trainbox { top: 84px; width: 200px; max-height: calc(100% - 172px); overflow-y: auto; padding: 8px; }
.stage[data-compact="1"] .tb-btns button { flex: 1 1 45%; font-size: 11px; padding: 5px 6px; }
.stage[data-compact="1"] .sheet { left: 50%; right: auto; width: min(760px, 100%); transform: translateX(-50%); max-height: 94%; }
.stage[data-compact="1"] .web { max-width: 380px; }
.rotate-tip { display: none; }
/* ---- Fase 1: herói, itens, barras ---- */
.stage[data-camp="1"] #btnPush { display: inline-block; }
#btnPush { display: none; }
.stage[data-mode="hub"] #btnPush { display: none; }
.herocard { width: 168px !important; }
.herocard .face { font-size: 11px !important; letter-spacing: .5px; }
.mini.xpm { height: 4px; } .mini.xpm > i { background: var(--xp); }
.gold.mat::before { border-radius: 3px; transform: rotate(45deg) scale(.8); background: linear-gradient(135deg, #e6d4ff, #9b6bff); }
.dmg.r0 { color: #e6ecf5; } .dmg.r1 { color: #6fb8ff; } .dmg.r2 { color: #c99bff; } .dmg.r3 { color: #ffc24a; } .dmg.r4 { color: #ff7a5a; font-size: 22px; }
.ab.swap { background: #213049; box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 -4px 0 var(--c); }
.ab.swap svg { width: 24px; height: 24px; margin-top: -10px; }
.ab .lk2 { position: absolute; left: 0; right: 0; bottom: 4px; font-family: var(--display); font-size: 11px; text-align: center; color: #fff; }
.ab.empty { background: rgba(14,22,38,.55); border-style: dashed; }
.ab.empty .lk { display: block; bottom: auto; top: 50%; transform: translateY(-50%); }
.herotop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 14px; align-items: start; }
@media (max-width: 620px) { .herotop { grid-template-columns: 1fr; } }
.eqgrid { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: 8px; }
.invgrid { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: 8px; }
.itm { position: relative; width: 72px; height: 72px; border-radius: 12px; border: 2px solid var(--rc, var(--line)); background: #213049; color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 4px; box-shadow: inset 0 -5px 0 var(--sc, transparent); }
.itm b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .5px; color: var(--rc, var(--muted)); }
.itm small { font-size: 10.5px; font-weight: 800; color: var(--muted); }
.itm.emptyslot { border-style: dashed; cursor: default; } .itm.emptyslot b { color: var(--muted); }
.itm.sel { outline: 3px solid #fff; outline-offset: 1px; }
.itm .up { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 11px; color: #7fff9a; }
.itm .act { position: absolute; top: 3px; left: 4px; right: 4px; font-style: normal; font-size: 9px; font-weight: 800; color: var(--gold); text-align: center; }
.statbox { background: #213049; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.statbox h3 { margin: 4px 0 2px; }
.sr { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.sr b { color: var(--fg); }
.slv { position: relative; display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; padding: 4px 6px; border-radius: 6px; overflow: hidden; background: #18233a; }
.slv span, .slv b { position: relative; z-index: 1; } .slv i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); opacity: .45; }
.idet { background: #213049; border-radius: 12px; border-left: 4px solid var(--rc); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.idet .ih { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.idet .ih b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--rc); }
.idet .ih span, .isub { font-size: 12px; font-weight: 800; color: var(--muted); }
.ist, .cmp { margin: 0; padding-left: 18px; font-size: 13px; font-weight: 700; }
.cmp { list-style: none; padding-left: 0; } .cmp .pos { color: #7fff9a; } .cmp .neg { color: #ff8a97; }
.ibtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ibtns button, .invh button, .bchoose button, .bigbtn { font-family: var(--display); font-size: 14px; border: 0; border-radius: 10px; padding: 8px 12px; cursor: pointer; color: #1b1405; background: linear-gradient(#ffe07a, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.ibtns button.ghost, .invh button.ghost, .bchoose button.ghost { background: #2e3f5e; color: var(--fg); box-shadow: none; font-family: var(--body); font-weight: 800; font-size: 12.5px; }
.ibtns button[disabled] { opacity: .5; cursor: default; }
.bigbtn { align-self: center; font-size: 18px; padding: 12px 28px; }
.invh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hint2 { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.baredit { background: #213049; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--c); }
.baredit > span { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.bslots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bslot { min-height: 64px; border-radius: 12px; border: 2px dashed #3a4d72; background: #18233a; color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 4px; }
.bslot svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bslot small { font-size: 10.5px; font-weight: 800; text-align: center; line-height: 1.2; color: var(--muted); }
.bslot.sel { border-style: solid; border-color: var(--gold); }
.bchoose { display: flex; flex-wrap: wrap; gap: 6px; }
.bchoose span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.stage[data-compact="1"] .herocard { width: 150px !important; }
.card .t { white-space: normal; overflow: visible; }
.stage[data-compact="1"] .hint { display: none; }
.stage[data-compact="1"] .small-btns { flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }

/* ---- HUD no estilo RuneScape 3 mobile ----
   cantos: casa/log (sup. esq.), minimapa + coluna de interfaces (sup. dir.), modo automático e cadeado (inf. esq.)
   polegares: dois grupos de 7 espaços de ação; centro: vida, mana, orbes e ataques automáticos */
[hidden] { display: none !important; }
:root { --ring: #d6ad55; --ring-dk: #6e5016; --sp: 54px; --sz: 48px; }
.stage[data-compact="1"] { --sp: 48px; --sz: 43px; }
.bar { position: relative; display: block; height: 13px; border-radius: 3px; background: #0a1220; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .15s; }
.bar.hp > i { background: linear-gradient(#ff6a5a, #b81d2c); }
.bar.mp > i { background: linear-gradient(#ffd27a, #d07a1a); } /* adrenalina */
.bar > span { position: relative; z-index: 1; display: block; text-align: left; padding-left: 8px; font-size: 10px; font-weight: 800; line-height: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.95); }
.bar.big { height: 22px; } .bar.big > span { line-height: 22px; font-size: 13.5px; }
.vbars .bar.mp { height: 18px; } .vbars .bar.mp > span { line-height: 18px; font-size: 12px; }

/* botão redondo genérico com aro dourado */
.rbtn { position: relative; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 2px solid var(--ring); background: radial-gradient(circle at 50% 32%, #2e4166, #0f1828); color: #f3e2b5; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 1px var(--ring-dk), 0 3px 6px rgba(0,0,0,.45); font-family: var(--display); font-size: 13px; pointer-events: auto; }
.rbtn svg { width: 20px; height: 20px; stroke: #f3e2b5; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rbtn.big { width: 52px; height: 52px; border-width: 3px; } .rbtn.big svg { width: 26px; height: 26px; }
.rbtn.sm { width: 32px; height: 32px; } .rbtn.sm svg { width: 17px; height: 17px; }
.rbtn.on { background: radial-gradient(circle at 50% 32%, #fff0b0, #e0a524); box-shadow: 0 0 0 1px var(--ring-dk), 0 0 12px rgba(255,207,74,.7); }
.rbtn.on svg { stroke: #3a2606; }
.rbtn:active { transform: translateY(1px); }
.rbtn .dot { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.stage:not([data-mode="dungeon"]) #btnLeave { display: none; }
.stage[data-mode="dungeon"] #btnHome, .stage[data-mode="dungeon"] .minimap { display: none; }
#btnLeave { background: radial-gradient(circle at 50% 32%, #a63a4a, #4a1018); }

/* canto superior esquerdo */
.lcol { position: absolute; left: max(10px, env(safe-area-inset-left, 0px)); top: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.log { position: absolute; left: calc(max(10px, env(safe-area-inset-left, 0px)) + 62px); top: 10px; display: flex; flex-direction: column; gap: 1px; max-width: min(320px, 38%); pointer-events: none; }
.log div { font-size: 12px; font-weight: 800; color: #f3ead2; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.7); transition: opacity .6s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log div.heal { color: #9dffb0; } .log div.warn { color: #ffb0a8; } .log div.item { color: var(--c, #fff); }
.log div.old { opacity: 0; }
.target { position: absolute; left: calc(max(10px, env(safe-area-inset-left, 0px)) + 62px); top: 78px; width: 184px; background: rgba(10,16,28,.82); border-radius: 6px; border: 1px solid rgba(214,173,85,.55); padding: 5px 8px 6px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.tgh { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.tgh b { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgh span { font-size: 11px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.tgfx { display: flex; gap: 4px; flex-wrap: wrap; } .tgfx:empty { display: none; }
.tgfx i { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: #2e3f5e; }
.tgfx i.slow { background: #2a5a8a; } .tgfx i.curse { background: #5a2a80; } .tgfx i.stun { background: #8a6a1a; }

/* topo central */
.topc { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.cur { display: flex; gap: 8px; }
.zone { font-family: var(--display); font-size: 14px; letter-spacing: .4px; color: #fff; text-shadow: 0 2px 0 #1c2a44, 0 0 8px rgba(0,0,0,.5); white-space: nowrap; }
.zone small { font-family: var(--body); font-weight: 800; font-size: 11px; color: #e6eeff; margin-left: 6px; }
.topc .bossbar { position: static; transform: none; width: 280px; }
.topc .wave { position: static; transform: none; }
.stage:not([data-mode="dungeon"]) .topc .wave { display: none; }
.stage[data-mode="dungeon"] .zone { display: none; }

/* canto superior direito */
.mapbox { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); top: 8px; display: flex; gap: 6px; align-items: flex-start; }
.mapbtns { display: flex; flex-direction: column; gap: 6px; order: 2; }
.rbtn.txt { font-size: 12px; }
.minibox { position: relative; width: 132px; height: 132px; margin: 9px 6px 0 6px; }
.minimap { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--ring); box-shadow: 0 0 0 1px var(--ring-dk), 0 4px 10px rgba(0,0,0,.45), inset 0 0 12px rgba(0,0,0,.4); background: #22382c; pointer-events: auto; cursor: pointer; display: block; box-sizing: border-box; }
/* anel da bússola em volta do minimapa (31/10) */
.miniring { position: absolute; inset: -7px; pointer-events: none; border-radius: 50%; }
.miniring b { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; display: grid; place-items: center; font: 400 10px/1 var(--display); color: #f3e2b5; background: radial-gradient(circle at 50% 35%, #2e4166, #0f1828); border: 1.5px solid var(--ring); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.miniring b.n { left: 50%; top: 0; color: #ff8a6a; } .miniring b.s { left: 50%; top: 100%; } .miniring b.l { left: 100%; top: 50%; } .miniring b.o { left: 0; top: 50%; }
.minizoom { position: absolute; bottom: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--ring); background: radial-gradient(circle at 50% 32%, #2e4166, #0f1828); color: #f3e2b5; font: 400 15px/1 var(--display); display: grid; place-items: center; cursor: pointer; pointer-events: auto; box-shadow: 0 0 0 1px var(--ring-dk), 0 2px 4px rgba(0,0,0,.45); z-index: 2; }
.minizoom.mais { right: 14px; } .minizoom.menos { right: -8px; bottom: 16px; }
.stage[data-mode="dungeon"] .minibox { display: none; }
.rcol { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); top: 162px; display: flex; flex-direction: column; gap: 6px; }

/* grupos de ação (2-3-2 como no RS3) */
.cl { position: absolute; bottom: 62px; width: calc(2 * var(--sp) + var(--sz)); height: calc(2 * var(--sp) + var(--sz)); pointer-events: none; }
.cl.L { left: calc(max(10px, env(safe-area-inset-left, 0px)) + 46px); }
.cl.R { right: calc(max(8px, env(safe-area-inset-right, 0px)) + 46px); }
.slot { position: absolute; width: var(--sz); height: var(--sz); padding: 0; border-radius: 50%; border: 3px solid var(--ring); background: var(--c, #18233a); color: #fff; display: grid; place-items: center; cursor: pointer; overflow: visible; pointer-events: auto; box-shadow: 0 0 0 1px var(--ring-dk), 0 4px 8px rgba(0,0,0,.45), inset 0 -8px 12px rgba(0,0,0,.35), inset 0 6px 10px rgba(255,255,255,.18); }
.cl.L .slot { left: calc(var(--x) * var(--sp)); bottom: calc(var(--y) * var(--sp) * .9); }
.cl.R .slot { right: calc(var(--x) * var(--sp)); bottom: calc(var(--y) * var(--sp) * .9); }
.slot svg { width: 52%; height: 52%; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.slot .cdv { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(8,12,22,.8) var(--p, 0%), transparent 0); pointer-events: none; }
.slot .sec { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 18px; text-shadow: 0 2px 0 #000; pointer-events: none; }
.slot .mc { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 9.5px; font-weight: 800; color: #cfe4ff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.slot .cnt { position: absolute; right: -5px; bottom: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #0f1828; border: 1px solid var(--ring); font-family: var(--display); font-size: 11px; line-height: 16px; text-align: center; color: #fff; pointer-events: none; }
.slot .key { position: absolute; left: -3px; top: -4px; font-size: 9px; font-weight: 800; color: #f3e2b5; background: #0f1828; border-radius: 4px; padding: 0 3px; pointer-events: none; }
@media (pointer: coarse) { .slot .key { display: none; } }
.slot.empty { background: rgba(8,12,22,.35); border-color: rgba(214,173,85,.35); box-shadow: none; }
.slot.empty .plus { display: none; font-family: var(--display); font-size: 20px; color: rgba(243,226,181,.7); }
.slot.ready { border-color: #ffe08a; box-shadow: 0 0 0 1px var(--ring-dk), 0 0 12px rgba(255,207,74,.7), inset 0 -8px 12px rgba(0,0,0,.35); }
.slot.nomp, .slot.zero, .slot.locked { filter: grayscale(.75) brightness(.7); }
.slot:active { transform: translateY(2px); }
.stage[data-edit="1"] .slot { animation: wiggle .5s ease-in-out infinite alternate; }
.stage[data-edit="1"] .slot.empty { border-style: dashed; border-color: var(--ring); background: rgba(8,12,22,.6); }
.stage[data-edit="1"] .slot.empty .plus { display: block; }
.slot.sel { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes wiggle { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .stage[data-edit="1"] .slot { animation: none; } }
.pager { position: absolute; left: max(10px, env(safe-area-inset-left, 0px)); bottom: 108px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pgnum { font-family: var(--display); font-size: 13px; color: #fff; background: rgba(10,16,28,.85); border: 1px solid var(--ring); border-radius: 10px; padding: 1px 7px; text-shadow: 0 1px 0 #000; }
.blcorner { position: absolute; left: max(8px, env(safe-area-inset-left, 0px)); bottom: 8px; display: flex; align-items: flex-end; gap: 6px; }
.editbar { display: none; position: absolute; left: 50%; top: 72px; transform: translateX(-50%); background: rgba(10,16,28,.92); border: 1px solid var(--ring); border-radius: 10px; padding: 6px 8px 6px 12px; font-size: 12.5px; font-weight: 800; white-space: nowrap; pointer-events: auto; align-items: center; gap: 10px; }
.stage[data-edit="1"] .editbar { display: flex; }
.editbar button { font-family: var(--display); font-size: 13px; border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; color: #1b1405; background: linear-gradient(#ffe07a, var(--gold)); }

/* centro embaixo */
.vitals { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(340px, 42%); display: flex; flex-direction: column; gap: 4px; }
.vtop { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; min-height: 18px; }
.vtop .nm { font-size: 11.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.buffs { display: flex; gap: 3px; }
.buffs i { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px; background: rgba(10,16,28,.88); border: 1px solid var(--bc, #3a4d72); color: #fff; white-space: nowrap; }
.vmid { display: flex; align-items: center; gap: 6px; }
.vbars { flex: 1; display: flex; flex-direction: column; gap: 4px; background: rgba(10,16,28,.72); border: 1px solid rgba(214,173,85,.4); border-radius: 6px; padding: 4px 6px; min-width: 0; }
.vline { display: flex; align-items: center; gap: 5px; } .vline .bar { flex: 1; }
.vline svg { width: 19px; height: 19px; flex: none; stroke-width: 2; stroke-linejoin: round; }
.hico { fill: #e0404a; stroke: #7a1018; } .mico { fill: #f0a83a; stroke: #6a3a08; }
.orb { position: relative; width: 54px; height: 54px; flex: none; border-radius: 50%; border: 3px solid var(--ring); box-shadow: 0 0 0 1px var(--ring-dk), 0 3px 8px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; padding: 0; overflow: hidden; }
.orb b { font-family: var(--display); font-weight: 400; font-size: 15px; line-height: 1; position: relative; z-index: 1; text-shadow: 0 1px 0 #000; }
.orb small { font-size: 8.5px; font-weight: 800; position: relative; z-index: 1; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.orb.sw { background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.35), var(--c) 60%); cursor: pointer; pointer-events: auto; }
.orb.sw .cdv { position: absolute; inset: 0; background: conic-gradient(rgba(8,12,22,.8) var(--p, 0%), transparent 0); }
.orb.lv { background: conic-gradient(#5fd3ff var(--xp, 0%), #1a2a44 0); }
.orb.lv::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 32%, #6a4ab0, #2a1650); }
.autos { display: flex; justify-content: center; gap: 4px; }
.au { position: relative; width: 30px; height: 30px; border-radius: 5px; background: #121b2e; border: 1px solid var(--ring-dk); box-shadow: inset 0 -3px 0 var(--c); display: grid; place-items: center; pointer-events: auto; cursor: default; overflow: hidden; }
.au svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.au .cdv { position: absolute; inset: 0; background: conic-gradient(rgba(8,12,22,.8) var(--p, 0%), transparent 0); }
.au .lk { display: none; position: absolute; inset: 0; place-items: center; font-size: 9px; font-weight: 800; color: var(--muted); background: rgba(10,16,28,.75); }
.au.locked { box-shadow: none; } .au.locked .lk { display: grid; } .au.locked svg { opacity: .35; }

/* joystick que aparece onde o dedo tocar */
.joy { position: absolute; left: 0; top: 0; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 0 1px rgba(0,0,0,.15); display: none; pointer-events: none; }
.joy.act { display: block; }
.joy i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 2px 6px rgba(0,0,0,.25); }

.xpline { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(10,18,32,.8); }
.xpline > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3fb8ff, var(--xp)); }
.xpline > span { display: none; }
.enter { bottom: 118px; }
.trainbox { left: calc(max(10px, env(safe-area-inset-left, 0px)) + 62px); right: auto; top: 74px; max-height: calc(100% - 74px - 220px); overflow-y: auto; }
.stage[data-train="1"] .target, .stage[data-train="1"] .log { display: none; }

/* janelas laterais */
.sheet { z-index: 5; left: auto; right: 0; top: 0; bottom: 0; width: min(560px, 64%); max-height: none; border-radius: 14px 0 0 14px; box-shadow: -8px 0 30px rgba(0,0,0,.5); border-left: 2px solid var(--ring-dk); }
.sheet.tall { max-height: none; }
.mapwrap { align-self: center; width: min(100%, 420px); }
.mapwrap canvas { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 2px var(--line); }
.acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.actc { display: grid; grid-template-columns: 40px 1fr; gap: 2px 8px; align-items: center; text-align: left; background: #213049; border: 2px solid transparent; border-radius: 12px; padding: 8px; color: var(--fg); cursor: pointer; font-family: var(--body); }
.actc .ic { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ring); background: var(--c); display: grid; place-items: center; }
.actc .ic svg { width: 21px; height: 21px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.actc b { font-size: 13px; font-weight: 800; line-height: 1.15; }
.actc small { font-size: 11px; font-weight: 700; color: var(--muted); }
.actc.on { border-color: var(--gold); }
.actc[disabled] { opacity: .5; cursor: default; }
.acthead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

/* tela baixa (celular deitado) */
.stage[data-compact="1"] .sheet { left: auto; right: 0; transform: none; width: min(560px, 64%); max-height: none; }
.stage[data-compact="1"] .rbtn { width: 34px; height: 34px; } .stage[data-compact="1"] .rbtn svg { width: 18px; height: 18px; }
.stage[data-compact="1"] .rbtn.big { width: 46px; height: 46px; } .stage[data-compact="1"] .rbtn.big svg { width: 23px; height: 23px; }
.stage[data-compact="1"] .rbtn.sm { width: 29px; height: 29px; } .stage[data-compact="1"] .rbtn.sm svg { width: 15px; height: 15px; }
.stage[data-compact="1"] .minibox { width: 108px; height: 108px; }
.stage[data-compact="1"] .rcol { top: 134px; gap: 5px; }
.stage[data-compact="1"] .log { left: calc(max(10px, env(safe-area-inset-left, 0px)) + 54px); }
.stage[data-compact="1"] .log div { font-size: 11px; }
.stage[data-compact="1"] .target { left: calc(max(10px, env(safe-area-inset-left, 0px)) + 54px); top: 70px; width: 170px; }
.stage[data-compact="1"] .zone { font-size: 13px; }
.stage[data-compact="1"] .cl { bottom: 56px; }
.stage[data-compact="1"] .cl.L { left: calc(max(10px, env(safe-area-inset-left, 0px)) + 40px); }
.stage[data-compact="1"] .cl.R { right: calc(max(8px, env(safe-area-inset-right, 0px)) + 40px); }
.stage[data-compact="1"] .slot .sec { font-size: 16px; }
.stage[data-compact="1"] .pager { bottom: 100px; }
.stage[data-compact="1"] .vitals { width: min(320px, 42%); bottom: 8px; gap: 3px; }
.stage[data-compact="1"] .bar.big { height: 20px; } .stage[data-compact="1"] .bar.big > span { line-height: 20px; font-size: 12.5px; }
.stage[data-compact="1"] .vbars .bar.mp { height: 16px; } .stage[data-compact="1"] .vbars .bar.mp > span { line-height: 16px; font-size: 11px; }
.stage[data-compact="1"] .orb { width: 46px; height: 46px; } .stage[data-compact="1"] .orb b { font-size: 13px; }
.stage[data-compact="1"] .au { width: 26px; height: 26px; } .stage[data-compact="1"] .au svg { width: 15px; height: 15px; }
.stage[data-compact="1"] .joy { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
.stage[data-compact="1"] .enter { bottom: 104px; }
.stage[data-compact="1"] .editbar { top: 64px; }
.stage[data-compact="1"] .trainbox { left: calc(max(10px, env(safe-area-inset-left, 0px)) + 54px); top: 66px; max-height: calc(100% - 66px - 200px); }

/* ícones dos itens */
.itm { gap: 0; padding: 3px; }
.itm .iart { width: 48px; height: 48px; flex: none; }
.itm.emptyslot .iart { opacity: .8; }
.itm small { line-height: 1.1; }
.idet { display: block; }
.idet > * + * { margin-top: 4px; }
.idet .ibig { float: left; width: 76px; height: 76px; margin: 0 12px 4px 0; border-radius: 12px; border: 2px solid var(--rc); background: radial-gradient(circle at 50% 40%, #2c3d5e, #121b2e); display: grid; place-items: center; }
.idet .ibig .iart { width: 66px; height: 66px; }
.idet .ibtns { clear: both; }
.iinl { display: inline-block; width: 30px; height: 30px; vertical-align: middle; margin-right: 6px; }
.iinl .iart { width: 30px; height: 30px; }
.itm .act { top: -8px; left: 50%; right: auto; transform: translateX(-50%); background: #121b2e; border: 1px solid var(--gold); border-radius: 6px; padding: 0 5px; line-height: 13px; white-space: nowrap; }

.banner { font-size: 40px; }
.stage[data-compact="1"] .banner { font-size: 32px; }

@media (prefers-reduced-motion: reduce) { .banner, .hint { transition: none; } }

/* ---------- criação de personagem ---------- */
.stage.criando .hud { display: none; }
.criar { position: absolute; inset: 0; pointer-events: none; }
.crpainel { pointer-events: auto; position: absolute; left: 10px; top: 10px; bottom: 10px; width: min(330px, 46%); overflow-y: auto; box-sizing: border-box;
  background: rgba(14, 22, 38, .88); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.crpainel h2 { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 0 0 2px; letter-spacing: .4px; }
.crl { font-weight: 800; font-size: 12px; color: var(--muted); letter-spacing: .3px; margin-top: 4px; }
.crpainel input { font: 800 15px var(--body); color: var(--fg); background: #0e1626; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none; -webkit-user-select: text; user-select: text; }
.crpainel input:focus { border-color: var(--gold); }
.crseg { display: flex; flex-wrap: wrap; gap: 5px; }
.crseg button { font: 800 12.5px var(--body); color: var(--fg); background: #22314d; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; cursor: pointer; }
.crseg button[aria-checked="true"] { background: #3a4f78; border-color: var(--gold); color: #fff; }
.crcor { display: flex; flex-wrap: wrap; gap: 7px; }
.crcor button { width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.crcor button[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px #0e1626, 0 0 0 4px var(--gold); }
.crdica { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.crbtns { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.crbtns button { font: 800 13px var(--body); border: 0; border-radius: 10px; padding: 9px 12px; cursor: pointer; color: var(--fg); background: #2e3f5e; }
.crbtns .crok { flex: 1; font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .4px; color: #1b1405; background: linear-gradient(#ffe07a, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.crseg button:focus-visible, .crcor button:focus-visible, .crbtns button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#btnLook { margin-top: 8px; font: 800 12.5px var(--body); color: var(--fg); background: #2e3f5e; border: 0; border-radius: 9px; padding: 7px 10px; cursor: pointer; }

.dmg.miss { font-size: 13px; color: #c9d2e6; -webkit-text-stroke: 0; text-shadow: 0 1px 2px #1c2a44; }

/* ---------- itens com requisito, conjuntos e degraus ---------- */
.itm.noreq { filter: grayscale(.7) brightness(.75); }
.itm.noreq small { color: #ff8a8a; }
.idet em { font-style: normal; }
.idet em.falta { color: #ff8a8a; font-weight: 800; }
.ist li.esp { color: #ffcf6a; }
.sr.set span { color: #ffcf6a; font-size: 12px; }
.tiers { display: flex; flex-wrap: wrap; gap: 5px; }
.tiers span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: #22314d; border-radius: 8px; padding: 4px 8px; border-left: 4px solid var(--tc); }
.tiers b { font-family: var(--display); font-weight: 400; }

/* ---------- esquiva e câmera ---------- */
.brcorner { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); bottom: 8px; display: flex; align-items: flex-end; gap: 6px; }
#btnRoll { overflow: hidden; }
#btnRoll .cdv { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(8,12,22,.78) var(--p, 0%), transparent 0); pointer-events: none; }
.rbtn.compass { position: absolute; left: -10px; bottom: -10px; z-index: 2; }
.rbtn.compass svg { transition: transform .1s linear; }
.rbtn.compass svg path { fill: #f3e2b5; stroke: #0f1828; stroke-width: 1; }
.rbtn.compass svg path.n { fill: #e05a4a; }
/* ícones pintados (models/icones.js) */
.slot img.ico { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.slot.locked img.ico { filter: grayscale(1) brightness(.55); }
.au img.ico { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au.locked img.ico { filter: grayscale(1); opacity: .35; }
.actc .ic { overflow: hidden; }
.actc .ic img.ico { width: 100%; height: 100%; object-fit: cover; }
.actc:disabled .ic img.ico { filter: grayscale(1) brightness(.6); }
.talinfo .th .tico { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c); flex: none; align-self: center; }
.talinfo .th .tn { margin-right: auto; }
.web .node image { pointer-events: none; }
.web .node.locked image { filter: grayscale(1) brightness(.5); }
.web .node.can image { filter: brightness(.85); }
.web .rk.sm { font-size: 13px; paint-order: stroke; stroke: #0f1828; stroke-width: 4px; text-anchor: end; }
.web .link.hib { stroke-width: 3; stroke-dasharray: 2 6; }
.web .link.hib.on { stroke-dasharray: none; }
.web .node.t-s circle { stroke-width: 4; }
.web .nm { font-size: 15px; }
.tgfx i.sangramento { background: #8a1f2a; } .tgfx i.queimadura { background: #a8501a; } .tgfx i.decomposicao { background: #3f6a2a; }
.mats { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; }
.mats li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px; border-radius: 6px; background: #18233a; font-size: 13px; }
.mats b { font-family: var(--display); }
/* barra do chefe no topo: uma linha só, compacta (aparece só quando o alvo não é o chefe) */
.topc .bossbar { width: min(240px, 34vw); padding: 3px 10px 5px; border-radius: 10px; }
.topc .bossbar b { font-size: 13px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buffs i[data-chip] { cursor: pointer; pointer-events: auto; text-decoration: underline; }
.testenv { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.testenv input { flex: 1; accent-color: var(--gold); }
.testenv b { font-family: var(--display); font-size: 22px; min-width: 40px; text-align: right; }
.testechk { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0 8px; }
.testechk input { width: 18px; height: 18px; accent-color: var(--gold); }
.rank { margin: 4px 0 12px; padding-left: 26px; display: grid; gap: 3px; }
.rank li { padding: 4px 8px; border-radius: 6px; background: #18233a; font-size: 13px; }
.rank li b { font-family: var(--display); font-size: 16px; margin-right: 10px; }
.rank li.ouro { box-shadow: inset 0 0 0 2px var(--gold); }
.tgfx i.furia { background: #a8301a; } .tgfx i.escudo { background: #5a3a8a; } .tgfx i.vulneravel { background: #a87a1a; }
.tgcrono { font-family: var(--display); font-size: 15px; color: #ffd0d5; margin-top: 2px; }
.tgcrono[hidden] { display: none; }

/* escolha do pet (31/10) */
.petgrid { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.petb { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--line); background: rgba(255,255,255,.06); color: inherit; font: inherit; cursor: pointer; }
.petb.on { border-color: var(--gold); background: rgba(255,207,74,.18); }
.petb:disabled { opacity: .45; cursor: default; }

/* =====================================================================
   HUD da tela principal (wireframe de 31/10 = posição e tamanho; estilo "Clássica": azul-escuro e dourado)
   ===================================================================== */
:root { --ouro: #d6ad55; --ouro-cl: #ffe2a0; --ouro-esc: #5a4010; --painel: linear-gradient(180deg, #1c2c4c 0%, #0c1526 100%); --gut: max(10px, env(safe-area-inset-left, 0px)); --gutR: max(10px, env(safe-area-inset-right, 0px)); }
.hud .rbtn { background: radial-gradient(circle at 50% 30%, #34507e, #101a2e 70%); border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro-esc), 0 0 0 3px rgba(214,173,85,.18), 0 3px 7px rgba(0,0,0,.5); }
.hud .rbtn.on { background: radial-gradient(circle at 50% 30%, #fff0b0, #e0a524); }

/* cartão do herói: retrato redondo, nível no hexágono, placa com nome e experiência */
.hcard { position: absolute; left: var(--gut); top: 8px; display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; color: #fff; font: inherit; text-align: left; }
.hcport { position: relative; z-index: 2; width: 64px; height: 64px; flex: none; border-radius: 50%; border: 3px solid var(--ouro); overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3a5486, #0f1828); box-shadow: 0 0 0 2px var(--ouro-esc), 0 0 0 4px rgba(214,173,85,.25), 0 4px 10px rgba(0,0,0,.5); }
.hcport img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hcport img:not([src]) { visibility: hidden; }
.hclvl { position: absolute; z-index: 3; left: 40px; top: 44px; width: 30px; height: 28px; display: grid; place-items: center; isolation: isolate;
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); background: var(--ouro); font: 400 13px/1 var(--display); color: var(--ouro-cl); text-shadow: 0 1px 0 #000; }
.hclvl::before { content: ""; position: absolute; inset: 2.5px; z-index: -1; clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); background: linear-gradient(#26395f, #0d1527); }
.hcplate { position: relative; z-index: 1; isolation: isolate; margin-left: -16px; height: 52px; min-width: 176px; box-sizing: border-box; padding: 6px 26px 6px 24px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  background: var(--ouro); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.hcplate::before { content: ""; position: absolute; inset: 2px 2px 2px 0; z-index: -1; background: var(--painel); clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); }
.hcplate b { font: 400 15px/1 var(--display); letter-spacing: .3px; text-shadow: 0 1px 0 #000; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.hcbar { display: block; height: 9px; border-radius: 5px; background: #070d18; box-shadow: inset 0 0 0 1px rgba(214,173,85,.55); overflow: hidden; }
.hcbar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffe48f, #c98a12); transition: width .2s; }
.hcplate small { font-size: 10.5px; font-weight: 800; line-height: 1; color: #eadfc4; text-shadow: 0 1px 1px #000; white-space: nowrap; }
.xpline { display: none; }

/* alvo e mensagens logo abaixo do cartão */
.target { left: var(--gut); top: 82px; }
.log { left: var(--gut); top: 150px; }
.trainbox { left: var(--gut); top: 82px; }

/* minimapa quadrado com os controles nos cantos de dentro */
.mapbox { right: var(--gutR); top: 8px; gap: 0; }
.minibox { width: 150px; height: 130px; margin: 0; }
.minimap { border-radius: 10px; border: 3px solid var(--ouro); box-shadow: 0 0 0 2px var(--ouro-esc), 0 0 0 4px rgba(214,173,85,.2), 0 4px 10px rgba(0,0,0,.45), inset 0 0 14px rgba(0,0,0,.45); }
.miniring { inset: 12px; }
.miniring b { width: 14px; height: 14px; margin: -7px 0 0 -7px; font-size: 9px; }
.minibox .rbtn.sm { position: absolute; width: 26px; height: 26px; z-index: 2; } .minibox .rbtn.sm svg { width: 14px; height: 14px; }
.minibox .rbtn.compass { left: 5px; top: 5px; bottom: auto; }
.minibox .rbtn.mapa { right: 5px; top: 5px; }
.minizoom { width: 22px; height: 22px; bottom: 5px; }
.minizoom.mais { right: 31px; } .minizoom.menos { right: 5px; bottom: 5px; }

/* coluna de 5 botões embaixo do minimapa */
.rcol { right: calc(var(--gutR) + 3px); top: 152px; gap: 9px; }
.rcol .rbtn { width: 40px; height: 40px; }
.stage[data-mode="dungeon"] .rcol { top: 8px; }

/* grupos de ação: em cima 3 (o primeiro maior), embaixo 4 */
.cl { bottom: 8px; width: calc(3 * var(--sp) + var(--sz)); height: calc(1.08 * var(--sp) + 1.22 * var(--sz)); }
.cl.L { left: var(--gut); } .cl.R { right: var(--gutR); }
.cl.L .slot { left: calc(var(--x) * var(--sp)); bottom: calc(var(--y) * var(--sp)); }
.cl.R .slot { right: calc(var(--x) * var(--sp)); bottom: calc(var(--y) * var(--sp)); }
.slot { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro-esc), 0 0 0 3px rgba(214,173,85,.16), 0 4px 8px rgba(0,0,0,.45), inset 0 -8px 12px rgba(0,0,0,.35), inset 0 6px 10px rgba(255,255,255,.16); }
.slot.grande { width: calc(var(--sz) * 1.22); height: calc(var(--sz) * 1.22); }
.cl.L .slot.grande { bottom: calc(var(--y) * var(--sp) - var(--sz) * .05); }
.cl.R .slot.grande { bottom: calc(var(--y) * var(--sp) - var(--sz) * .05); }
/* dois botões pequenos por cima do primeiro espaço de baixo, do lado de fora */
.smallcol { position: absolute; bottom: calc(8px + var(--sz) + 8px); display: flex; flex-direction: column; gap: 6px; }
.smallcol.L { left: calc(var(--gut) + var(--sz) * .5 - 15px); } .smallcol.R { right: calc(var(--gutR) + var(--sz) * .5 - 15px); }
.smallcol .rbtn.sm { width: 30px; height: 30px; } .smallcol .rbtn.sm svg { width: 16px; height: 16px; }
.smallcol .pgnum { position: absolute; right: -6px; bottom: -6px; min-width: 14px; padding: 0 3px; border-radius: 7px; font-size: 10px; line-height: 13px; text-align: center; }
#btnRoll { overflow: visible; } #btnRoll .cdv { overflow: hidden; }
.blcorner, .brcorner, .pager { display: none; }

/* centro embaixo: estados em cima, painel com vida e adrenalina e o orbe de nível, ataques automáticos embaixo */
.vitals { bottom: 6px; width: min(320px, 38%); gap: 4px; }
.vtop { justify-content: flex-end; min-height: 20px; padding-right: 30px; }
.vtop .nm { display: none; }
.buffs { gap: 5px; }
.buffs i { min-width: 64px; height: 18px; box-sizing: border-box; display: grid; place-items: center; padding: 0 7px; border-radius: 4px; font-size: 10px; background: var(--painel); border: 1.5px solid var(--bc, var(--ouro)); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.vmid { gap: 0; }
.vbars { padding: 6px 34px 6px 8px; gap: 5px; border: 2px solid var(--ouro); border-radius: 10px; background: var(--painel); box-shadow: 0 0 0 1px var(--ouro-esc), 0 4px 10px rgba(0,0,0,.45); }
.vline svg { display: none; }
.vbars .bar { border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(214,173,85,.45); }
.orb { width: 62px; height: 62px; margin-left: -30px; z-index: 1; border-width: 3px; border-color: var(--ouro); box-shadow: 0 0 0 2px var(--ouro-esc), 0 0 0 5px rgba(214,173,85,.22), 0 4px 10px rgba(0,0,0,.5); }
.autos { gap: 6px; margin-bottom: 9px; }
.au { width: 34px; height: 30px; border-radius: 6px; border: 2px solid var(--ouro); overflow: visible; background: var(--painel); box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.au img.ico, .au .cdv { border-radius: 4px; }
.au .tab { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); min-width: 16px; height: 12px; box-sizing: border-box; padding: 0 3px; border-radius: 3px; border: 1.5px solid var(--ouro); background: #0e1626; font-size: 8px; font-weight: 800; line-height: 9px; text-align: center; color: var(--ouro-cl); white-space: nowrap; pointer-events: none; }
.au.locked .lk { display: none; } .au.locked .tab { color: #b9c2d6; }
.au.vazio { background: rgba(10,16,28,.45); border-color: rgba(214,173,85,.35); box-shadow: none; }
.au.vazio .tab { border-color: rgba(214,173,85,.35); }
.enter { bottom: 132px; }

/* celular deitado */
.stage[data-compact="1"] .hcport { width: 52px; height: 52px; }
.stage[data-compact="1"] .hclvl { left: 32px; top: 36px; width: 26px; height: 24px; font-size: 12px; }
.stage[data-compact="1"] .hcplate { height: 44px; min-width: 150px; padding: 4px 22px 4px 22px; margin-left: -14px; }
.stage[data-compact="1"] .hcplate b { font-size: 13px; }
.stage[data-compact="1"] .hcplate small { font-size: 9.5px; }
.stage[data-compact="1"] .hcbar { height: 7px; }
.stage[data-compact="1"] .target, .stage[data-compact="1"] .trainbox { left: var(--gut); top: 66px; }
.stage[data-compact="1"] .log { left: var(--gut); top: 128px; }
.stage[data-compact="1"] .minibox { width: 102px; height: 86px; }
.stage[data-compact="1"] .minibox .rbtn.sm { width: 22px; height: 22px; } .stage[data-compact="1"] .minibox .rbtn.sm svg { width: 12px; height: 12px; }
.stage[data-compact="1"] .minizoom { width: 19px; height: 19px; font-size: 13px; } .stage[data-compact="1"] .minizoom.mais { right: 26px; }
.stage[data-compact="1"] .rcol { top: 100px; gap: 4px; right: calc(var(--gutR) + 1px); } .stage[data-compact="1"] .rcol .rbtn { width: 27px; height: 27px; } .stage[data-compact="1"] .rcol .rbtn svg { width: 15px; height: 15px; }
.stage[data-compact="1"] .cl { bottom: 6px; } .stage[data-compact="1"] .cl.L { left: var(--gut); } .stage[data-compact="1"] .cl.R { right: var(--gutR); }
.stage[data-compact="1"] .smallcol { bottom: calc(6px + var(--sz) + 6px); gap: 4px; } .stage[data-compact="1"] .smallcol .rbtn.sm { width: 26px; height: 26px; }
.stage[data-compact="1"] .smallcol.L { left: calc(var(--gut) + var(--sz) * .5 - 13px); } .stage[data-compact="1"] .smallcol.R { right: calc(var(--gutR) + var(--sz) * .5 - 13px); }
.stage[data-compact="1"] .vitals { width: min(290px, 36%); bottom: 4px; gap: 3px; }
.stage[data-compact="1"] .orb { width: 52px; height: 52px; margin-left: -26px; }
.stage[data-compact="1"] .vbars { padding: 4px 28px 4px 6px; gap: 4px; }
.stage[data-compact="1"] .au { width: 29px; height: 25px; } .stage[data-compact="1"] .autos { gap: 4px; }
.stage[data-compact="1"] .buffs i { min-width: 54px; height: 16px; font-size: 9px; }
.stage[data-compact="1"] .enter { bottom: 116px; }

/* celular: Missões e Vila/Sair na esquerda, embaixo do cartão do herói (31/10) */
.lcol2 { position: absolute; left: calc(var(--gut) + 4px); top: 64px; display: flex; flex-direction: column; gap: 5px; }
.lcol2:empty { display: none; }
.stage[data-compact="1"] .lcol2 .rbtn { width: 29px; height: 29px; } .stage[data-compact="1"] .lcol2 .rbtn svg { width: 15px; height: 15px; }
.stage[data-compact="1"] .target, .stage[data-compact="1"] .trainbox { left: calc(var(--gut) + 40px); }
.stage[data-compact="1"] .log { left: calc(var(--gut) + 40px); }
.stage[data-compact="1"] .rcol { gap: 6px; } .stage[data-compact="1"] .rcol .rbtn { width: 30px; height: 30px; } .stage[data-compact="1"] .rcol .rbtn svg { width: 16px; height: 16px; }

/* 31/10: no celular a coluna da esquerda começa na mesma altura e com o mesmo tamanho da coluna da direita */
.stage[data-compact="1"] .lcol2 { top: 100px; left: calc(var(--gut) + 1px); gap: 6px; }
.stage[data-compact="1"] .lcol2 .rbtn { width: 30px; height: 30px; } .stage[data-compact="1"] .lcol2 .rbtn svg { width: 16px; height: 16px; }
.stage[data-compact="1"] .target, .stage[data-compact="1"] .trainbox { left: calc(var(--gut) + 40px); top: 66px; }

/* =====================================================================
   Janela do Herói (wireframe 31/10, estilo Clássica)
   ===================================================================== */
.sheet.modal { left: auto; right: calc(var(--gutR) + 58px); top: 8%; bottom: 17%; width: min(900px, 66%); max-height: none; padding: 10px 14px 12px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #17253f, #0b1322); border: 2px solid var(--ouro); box-shadow: 0 0 0 2px var(--ouro-esc), 0 0 0 5px rgba(214,173,85,.15), 0 14px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.sheet.modal > header { display: none; }
.sheet.modal .sheet-body { flex: 1; min-height: 0; gap: 8px; }
.hmh { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(214,173,85,.55); }
.hmico { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ouro); background: radial-gradient(circle at 50% 30%, #34507e, #101a2e 70%); box-shadow: 0 0 0 2px var(--ouro-esc); }
.hmico svg { width: 26px; height: 26px; stroke: var(--ouro-cl); fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.hmt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hmt b { font: 400 22px/1.05 var(--display); letter-spacing: .8px; color: var(--ouro-cl); text-shadow: 0 2px 0 #000; }
.hmt small { font-size: 12px; font-weight: 700; color: #c9d2e6; }
.hmx { width: 36px; height: 36px; flex: none; border-radius: 6px; border: 2px solid var(--ouro); background: #2a1420; color: #ffd0b0; font-size: 18px; cursor: pointer; box-shadow: 0 0 0 1px var(--ouro-esc); }
.hmabas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hmaba { padding: 7px 4px; border-radius: 5px; border: 1.5px solid #6e5420; background: linear-gradient(#18263f, #0e1729); color: #e6dcc4; font: 800 12px var(--body); letter-spacing: .5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmaba.on { border-color: var(--ouro); color: #fff4d0; background: linear-gradient(#5a4214, #2a1e08); box-shadow: inset 0 0 10px rgba(255,207,74,.35), 0 0 8px rgba(255,207,74,.35); }
.hcorpo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.hpainel { position: relative; border: 1.5px solid #6e5420; border-radius: 8px; background: rgba(8,14,26,.55); padding: 8px; box-shadow: inset 0 0 0 1px rgba(214,173,85,.12); }
.hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1.5px solid var(--ouro); background: linear-gradient(#1c2c4c, #0e1729); color: #f3e6c4; font: 800 12px var(--body); letter-spacing: .4px; cursor: pointer; }
.hbtn svg { width: 15px; height: 15px; stroke: var(--ouro-cl); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.hbtn.on { background: linear-gradient(#5a4214, #2a1e08); }
.hbtn.sm { padding: 4px 10px; font-size: 11.5px; }

/* aba Equipamento: boneco com espaços dos dois lados + inventário em grade */
.heq { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(250px, 37%) 1fr; gap: 8px; }
.heqL { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; min-height: 0; overflow: auto; }
.boneco { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; gap: 4px; width: 100%; }
.bcol { display: flex; flex-direction: column; justify-content: space-between; gap: 5px; position: relative; z-index: 1; }
.boneco .itm { width: 52px; height: 52px; border-radius: 6px; border-width: 2px; background: linear-gradient(#22324f, #121c30); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.boneco .itm .iart { width: 38px; height: 38px; }
.boneco .itm small { font-size: 8.5px; }
.boneco .bcol:first-child .itm::after, .boneco .bcol:last-child .itm::after { content: ""; position: absolute; top: 50%; width: 14px; height: 1.5px; background: rgba(214,173,85,.6); }
.boneco .bcol:first-child .itm::after { left: 100%; } .boneco .bcol:last-child .itm::after { right: 100%; }
.itm.reservado { opacity: .55; cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.itm.reservado .cad { font-style: normal; font-size: 13px; }
.silh { width: 100%; height: 100%; max-height: 300px; align-self: center; }
.silh circle, .silh path { fill: rgba(214,173,85,.06); stroke: var(--ouro); stroke-width: 2; stroke-linejoin: round; }
.attrbox { flex: 1; width: 100%; display: flex; flex-direction: column; gap: 4px; }
.heqR { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.invtop { position: relative; display: flex; align-items: center; gap: 8px; }
.invtop b { font: 400 15px var(--display); letter-spacing: .6px; color: var(--ouro-cl); flex: 1; }
.invn { font: 400 14px var(--display); color: #fff; }
.hfil { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid #6e5420; background: transparent; cursor: pointer; }
.hfil.on { border-color: var(--ouro); background: rgba(214,173,85,.15); }
.hfil svg { width: 18px; height: 18px; stroke: var(--ouro-cl); fill: none; stroke-width: 2.4; stroke-linecap: round; }
.fmenu { position: absolute; right: 0; top: 32px; z-index: 4; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border-radius: 8px; border: 1.5px solid var(--ouro); background: #0d1628; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.fmenu button { text-align: left; padding: 7px 8px; border: 0; border-radius: 5px; background: none; color: #e6dcc4; font: 800 12.5px var(--body); cursor: pointer; }
.fmenu button.on, .fmenu button:hover { background: rgba(214,173,85,.18); color: #fff4d0; }
.fmenu hr { border: 0; border-top: 1px solid rgba(214,173,85,.35); margin: 4px 2px; }
.invcells { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-content: start; padding-right: 2px; }
.invcells .itm, .invcells .cel { width: auto; height: auto; aspect-ratio: 1; border-radius: 6px; }
.invcells .itm { border-width: 2px; background: linear-gradient(#22324f, #121c30); }
.invcells .itm .iart { width: 70%; height: 70%; }
.invcells .itm small { font-size: 8.5px; }
.invcells .cel { border: 1.5px solid #3a3420; background: rgba(8,14,26,.6); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.idet.flut { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; max-height: 72%; overflow-y: auto; padding: 10px 12px; border-radius: 8px; border: 2px solid var(--rc); background: #0d1628f2; box-shadow: 0 -6px 20px rgba(0,0,0,.55); }
.detx { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 5px; border: 1.5px solid var(--ouro); background: #1a2238; color: #ffd0b0; cursor: pointer; z-index: 1; }

/* celular deitado: a janela ocupa quase a tela toda */
.stage[data-compact="1"] .sheet.modal { left: calc(var(--gut) + 38px); right: calc(var(--gutR) + 38px); top: 6px; bottom: 6px; width: auto; padding: 6px 10px 8px; }
.stage[data-compact="1"] .hmico { width: 34px; height: 34px; } .stage[data-compact="1"] .hmico svg { width: 20px; height: 20px; }
.stage[data-compact="1"] .hmt b { font-size: 17px; } .stage[data-compact="1"] .hmt small { font-size: 10.5px; }
.stage[data-compact="1"] .hmx { width: 30px; height: 30px; font-size: 15px; }
.stage[data-compact="1"] .hmh { padding-bottom: 4px; gap: 8px; }
.stage[data-compact="1"] .hmaba { padding: 5px 2px; font-size: 10.5px; }
.stage[data-compact="1"] .heq { grid-template-columns: minmax(210px, 36%) 1fr; }
.stage[data-compact="1"] .boneco .itm { width: 40px; height: 40px; } .stage[data-compact="1"] .boneco .itm .iart { width: 30px; height: 30px; } .stage[data-compact="1"] .boneco .itm small { display: none; }
.stage[data-compact="1"] .bcol { gap: 3px; }
.stage[data-compact="1"] .invcells { gap: 4px; }
.stage[data-compact="1"] .hbtn { padding: 4px 9px; font-size: 11px; }
/* o boneco cabe na altura do painel (o desenho encolhe junto) */
.boneco { min-height: 0; grid-template-rows: minmax(0, 1fr); }
.bcol { min-height: 0; }
.silh { height: 100%; width: 100%; max-height: none; min-height: 0; }
.stage[data-compact="1"] .heqL { gap: 4px; padding: 6px; }
.stage[data-compact="1"] .boneco .itm { width: 36px; height: 36px; } .stage[data-compact="1"] .boneco .itm .iart { width: 27px; height: 27px; }
.stage[data-compact="1"] .boneco .itm .act { display: none; }
.stage[data-compact="1"] .bcol { gap: 2px; }
.itm.reservado { box-sizing: border-box; }
.stage[data-compact="1"] .itm.reservado small { display: none; }

/* efeitos de combate (02/11) */
.dmg { animation: dmgPop .28s cubic-bezier(.2,1.6,.4,1) both; font-size: 18px; -webkit-text-stroke: 1.2px #1c2a44; text-shadow: 0 2px 0 #1c2a44, 0 0 6px rgba(0,0,0,.35); }
.dmg.crit { font-size: 27px; color: #ffd27a; -webkit-text-stroke: 1.5px #5a2a04; text-shadow: 0 3px 0 #5a2a04, 0 0 12px rgba(255,170,40,.75); animation-name: dmgCrit; animation-duration: .36s; }
.dmg.hurt { color: #ff6a5a; -webkit-text-stroke: 1.2px #3a0808; text-shadow: 0 2px 0 #3a0808; }
.dmg.miss { animation-name: dmgSoft; }
@keyframes dmgPop { 0% { scale: .4; } 60% { scale: 1.3; } 100% { scale: 1; } }
@keyframes dmgCrit { 0% { scale: .3; rotate: -8deg; } 55% { scale: 1.55; rotate: 4deg; } 100% { scale: 1.1; rotate: 0deg; } }
@keyframes dmgSoft { 0% { scale: .7; } 100% { scale: 1; } }
.dorfx { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 45%, rgba(190,10,20,.75) 100%); }
.dorfx.go { animation: dor .55s ease-out; }
@keyframes dor { 0% { opacity: calc(var(--f, .6)); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dmg { animation: none; } .dorfx.go { animation-duration: .2s; } }

/* ---- janela do Herói: aba Habilidades (02/11) ---- */
.hhab { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(230px, 36%) 1fr; gap: 8px; }
.hhabL { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; }
.hhabi { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; border: 1.5px solid #4a3c1a; background: linear-gradient(#18263f, #0e1729); color: #f3e6c4; cursor: pointer; text-align: left; font: inherit; }
.hhabi.on { border-color: var(--ouro); background: linear-gradient(#3a2e12, #1a1408); box-shadow: inset 0 0 10px rgba(255,207,74,.25); }
.hhabi.breve { opacity: .6; }
.hhico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2e4166, #0f1828); border: 1.5px solid var(--c); }
.hhico svg { width: 19px; height: 19px; stroke: var(--c); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hhico.big { width: 48px; height: 48px; border-width: 2px; } .hhico.big svg { width: 28px; height: 28px; }
.hhtx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hhtx b { font: 800 11.5px var(--body); letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hhtx i, .hhtop i { display: block; height: 6px; border-radius: 4px; background: #070d18; box-shadow: inset 0 0 0 1px rgba(214,173,85,.4); overflow: hidden; }
.hhtx i em, .hhtop i em { display: block; height: 100%; background: linear-gradient(90deg, var(--c), #fff3c0); }
.hhtx small { font-size: 9.5px; font-weight: 800; color: #b9c2d6; }
.hhnv { font: 400 13px var(--display); color: var(--ouro-cl); white-space: nowrap; } .hhnv.big { font-size: 20px; }
.hhabR { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.hhtop { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.hhtop > div { display: flex; flex-direction: column; gap: 4px; } .hhtop b { font: 400 18px var(--display); letter-spacing: .5px; color: #fff4d0; } .hhtop i { height: 9px; } .hhtop small { font-size: 11px; font-weight: 800; color: #c9d2e6; }
.hhdesc { margin: 0; padding: 7px 9px; border-radius: 6px; border: 1px solid rgba(214,173,85,.35); background: rgba(8,14,26,.5); font-size: 12.5px; font-weight: 700; color: #dfe6f3; }
.hhcols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hhcols h4, .hmatR h4 { margin: 4px 0 4px; font: 800 11.5px var(--body); letter-spacing: .6px; color: var(--ouro-cl); }
.hhcols .sr { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.hhcols .sr b { color: #fff; text-align: right; }
.hhdes { padding-left: 10px; border-left: 1px solid rgba(214,173,85,.3); }
.hhd { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; font-weight: 800; }
.hhd b { color: var(--ouro-cl); font-weight: 800; font-size: 11px; }
.hhdi { width: 26px; height: 26px; border-radius: 5px; overflow: hidden; display: grid; place-items: center; border: 1px solid #6e5420; background: #121b2e; font-size: 12px; }
.hhdi img, .hhdi svg { width: 100%; height: 100%; object-fit: cover; } .hhdi svg { stroke: #fff; fill: none; stroke-width: 2; padding: 3px; box-sizing: border-box; }
.hhd.lk { color: #8a93a8; } .hhd.lk b { color: #8a93a8; }

/* ---- aba Materiais ---- */
.hmat { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(220px, 33%); gap: 8px; }
.hmatL, .hmatR { display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow-y: auto; }
.mfil { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mfb { padding: 5px 10px; border-radius: 5px; border: 1.5px solid #6e5420; background: linear-gradient(#18263f, #0e1729); color: #e6dcc4; font: 800 11.5px var(--body); cursor: pointer; }
.mfb.on { border-color: var(--ouro); background: linear-gradient(#5a4214, #2a1e08); color: #fff4d0; }
.mcont { margin-left: auto; font: 400 14px var(--display); color: #fff; }
.mbusca { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px; border: 1.5px solid #6e5420; background: rgba(8,14,26,.6); }
.mbusca svg { width: 16px; height: 16px; stroke: var(--ouro-cl); fill: none; stroke-width: 2.2; flex: none; }
.mbusca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 700 13px var(--body); -webkit-user-select: text; user-select: text; }
.mgrade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mcel { position: relative; aspect-ratio: 1; border-radius: 6px; border: 2px solid var(--rc, #3a3420); background: linear-gradient(#22324f, #121c30); display: grid; place-items: center; cursor: pointer; padding: 0; }
.mcel svg { width: 58%; height: 58%; fill: color-mix(in srgb, var(--mc) 35%, transparent); stroke: var(--mc); stroke-width: 1.8; stroke-linejoin: round; }
.mcel b { position: absolute; right: 4px; bottom: 2px; font: 400 13px var(--display); color: #fff; text-shadow: 0 1px 0 #000; }
.mcel.sel { outline: 2px solid #fff; outline-offset: 1px; }
.mcel.vazia { border: 1.5px solid #3a3420; background: rgba(8,14,26,.6); cursor: default; }
.mdh { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; }
.mdi { width: 70px; height: 70px; border-radius: 8px; border: 2px solid var(--rc); background: linear-gradient(#22324f, #121c30); display: grid; place-items: center; }
.mdi svg { width: 62%; height: 62%; fill: color-mix(in srgb, var(--mc) 35%, transparent); stroke: var(--mc); stroke-width: 1.8; stroke-linejoin: round; }
.mdh b { display: block; font: 400 16px var(--display); color: #fff4d0; }
.mrar { display: inline-block; margin: 3px 0; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--rc); color: var(--rc); font-size: 11px; font-weight: 800; }
.mdh small { display: block; font-size: 12px; font-weight: 800; color: #c9d2e6; }
.mtx { margin: 0; font-size: 12px; font-weight: 700; color: #dfe6f3; }
.hbtn.mdesc { margin-top: auto; width: 100%; padding: 9px; font-size: 13px; }
.hbtn.mdesc.warn { border-color: #ff7a6a; color: #ffd0c8; background: linear-gradient(#5a1a14, #2a0a08); }

/* ---- aba Poderes no estilo Clássica ---- */
.hcorpo .tabs { gap: 5px; }
.hcorpo .tab { border-radius: 6px; border: 1.5px solid #6e5420; background: linear-gradient(#18263f, #0e1729); font-weight: 800; }
.hcorpo .tab.on { border-color: var(--ouro); background: linear-gradient(#5a4214, #2a1e08); }

/* ---- todas as janelas no estilo Clássica, com abertura animada ---- */
.sheet { background: linear-gradient(180deg, #17253f, #0b1322); border-left: 2px solid var(--ouro); box-shadow: -2px 0 0 var(--ouro-esc), -10px 0 30px rgba(0,0,0,.55); }
.sheet > header { padding-bottom: 6px; border-bottom: 1px solid rgba(214,173,85,.55); }
.sheet > header h2 { color: var(--ouro-cl); letter-spacing: .6px; text-shadow: 0 2px 0 #000; }
.sheet > header .btn { border: 1.5px solid var(--ouro); background: linear-gradient(#1c2c4c, #0e1729); color: #f3e6c4; }
.sheet:not([hidden]) { animation: abreJanela .22s cubic-bezier(.2,.9,.3,1.15); }
.sheet.modal:not([hidden]) { animation-name: abreModal; }
@keyframes abreJanela { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes abreModal { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet:not([hidden]) { animation: none; } }
.stage[data-compact="1"] .hhab { grid-template-columns: minmax(180px, 34%) 1fr; }
.stage[data-compact="1"] .hhabi { padding: 4px 6px; grid-template-columns: 28px 1fr auto; gap: 6px; } .stage[data-compact="1"] .hhico { width: 26px; height: 26px; } .stage[data-compact="1"] .hhico svg { width: 15px; height: 15px; }
.stage[data-compact="1"] .hhcols { grid-template-columns: 1fr; }
.stage[data-compact="1"] .hhdes { padding-left: 0; border-left: 0; }
.stage[data-compact="1"] .mgrade { grid-template-columns: repeat(5, 1fr); }
.stage[data-compact="1"] .hmat { grid-template-columns: 1fr minmax(170px, 36%); }

/* ---- aba Poderes (wireframe 02/11): estilos | teia | detalhes ---- */
.hpod { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(150px, 21%) 1fr minmax(210px, 29%); gap: 8px; }
.pdL { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; }
.pdest { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; border: 1.5px solid #4a3c1a; background: linear-gradient(#18263f, #0e1729); color: #f3e6c4; cursor: pointer; text-align: left; font: inherit; }
.pdest.on { border-color: var(--ouro); background: linear-gradient(#3a2e12, #1a1408); box-shadow: inset 0 0 10px rgba(255,207,74,.25); }
.pdest.breve { opacity: .5; cursor: default; }
.pdn { display: flex; flex-direction: column; min-width: 0; } .pdn b { font: 800 12.5px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdn small { font-size: 10px; font-weight: 800; color: #b9c2d6; }
.pdest.on .pdn small { color: var(--ouro-cl); }
.pdM { display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 4px; }
.pdM .web { width: 100%; height: 100%; max-height: 100%; }
.pdR { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.pdtop { display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: center; }
.pdico { width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid var(--c); box-shadow: 0 0 0 2px var(--ouro-esc), 0 0 12px color-mix(in srgb, var(--c) 50%, transparent); object-fit: cover; background: #121b2e; }
.pdtop b { display: block; font: 400 17px var(--display); color: #fff4d0; } .pdtop small { font-size: 11.5px; font-weight: 800; color: #c9d2e6; }
.pdseg { display: flex; gap: 4px; } .pdseg i { flex: 1; height: 9px; border-radius: 4px; background: #070d18; box-shadow: inset 0 0 0 1px rgba(214,173,85,.45); }
.pdseg i.on { background: linear-gradient(#ffe48f, #c98a12); }
.pdR h4 { margin: 4px 0 2px; font: 800 11.5px var(--body); letter-spacing: .6px; color: var(--ouro-cl); }
.pdR .sr { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .pdR .sr b { color: #fff; } .pdR .sr.falta b { color: #ff8a8a; }
.hbtn.pdbtn { margin-top: auto; width: 100%; padding: 9px; font-size: 13px; background: linear-gradient(#ffe07a, #c98a12); color: #2a1a04; border-color: #ffe9a8; }
.hbtn.pdbtn:disabled { background: linear-gradient(#2a3448, #1a2234); color: #9aa4b8; border-color: #4a3c1a; cursor: default; font-size: 11.5px; }
.pdR .reset { margin-top: 6px; flex: none; }
.pdM .web .nm { font-size: 19px; stroke-width: 6px; }
.pdR > * { flex: none; }
.hbtn.pdbtn { flex: none; }
.pdvazio b { font: 400 15px var(--display); color: #fff4d0; } .pdvazio .mtx { margin-top: 6px; }
.stage[data-compact="1"] .hpod { grid-template-columns: minmax(120px, 20%) 1fr minmax(170px, 31%); gap: 5px; }
.stage[data-compact="1"] .pdest { grid-template-columns: 24px 1fr; padding: 4px 5px; gap: 5px; } .stage[data-compact="1"] .pdest .hhico { width: 24px; height: 24px; } .stage[data-compact="1"] .pdest .hhico svg { width: 14px; height: 14px; }
.stage[data-compact="1"] .pdn b { font-size: 11px; } .stage[data-compact="1"] .pdtop { grid-template-columns: 44px 1fr; } .stage[data-compact="1"] .pdico { width: 42px; height: 42px; } .stage[data-compact="1"] .pdtop b { font-size: 14px; }
/* Poderes no celular deitado: mesmas proporções do computador (tudo cabe sem rolar) */
.stage[data-compact="1"] .hpod .hpainel { padding: 6px; }
.stage[data-compact="1"] .pdL { gap: 3px; }
.stage[data-compact="1"] .pdest { padding: 3px 5px; border-width: 1px; }
.stage[data-compact="1"] .pdest .hhico { width: 22px; height: 22px; }
.stage[data-compact="1"] .pdn b { font-size: 10.5px; } .stage[data-compact="1"] .pdn small { font-size: 8.5px; }
.stage[data-compact="1"] .pdR { gap: 3px; }
.stage[data-compact="1"] .pdtop { grid-template-columns: 36px 1fr; gap: 6px; }
.stage[data-compact="1"] .pdico { width: 34px; height: 34px; border-width: 2px; }
.stage[data-compact="1"] .pdtop b { font-size: 12.5px; } .stage[data-compact="1"] .pdtop small { font-size: 9px; }
.stage[data-compact="1"] .pdR .hhdesc { font-size: 9.5px; padding: 4px 6px; line-height: 1.25; }
.stage[data-compact="1"] .pdseg i { height: 5px; }
.stage[data-compact="1"] .pdR h4 { font-size: 9px; margin: 1px 0 0; }
.stage[data-compact="1"] .pdR .sr { font-size: 9.5px; padding: 1px 0; }
.stage[data-compact="1"] .pdR .mtx { font-size: 9.5px; }
.stage[data-compact="1"] .hbtn.pdbtn { padding: 5px; font-size: 10.5px; } .stage[data-compact="1"] .hbtn.pdbtn:disabled { font-size: 9.5px; }
.stage[data-compact="1"] .pdR .reset { font-size: 9.5px; padding: 3px 6px; margin-top: 2px; }
.stage[data-compact="1"] .pdvazio b { font-size: 12.5px; }
/* Celular: a interface inteira no mesmo padrão do computador, só que reduzida por igual (--uiz vem do 13-controles.js) */
.stage[data-escala] .hud, .stage[data-escala] .criar { inset: 0 auto auto 0; width: calc(100% / var(--uiz)); height: calc(100% / var(--uiz)); transform: scale(var(--uiz)); transform-origin: 0 0;
  --gut: calc(max(10px, env(safe-area-inset-left, 0px)) / var(--uiz)); --gutR: calc(max(10px, env(safe-area-inset-right, 0px)) / var(--uiz)); }
/* a janela do Herói pode ocupar quase a altura toda no celular (as barras de baixo ficam por trás) */
.stage[data-escala] .sheet.modal { top: 4%; bottom: 4%; }
/* celular: botões de poderes e poções 44% maiores (+20% e +20%; o canto de cada grupo fica no mesmo lugar) */
.stage[data-escala] .cl.L, .stage[data-escala] .smallcol.L { transform: scale(1.44); transform-origin: left bottom; }
.stage[data-escala] .cl.R, .stage[data-escala] .smallcol.R { transform: scale(1.44); transform-origin: right bottom; }
.stage[data-escala] .smallcol { bottom: calc(8px + var(--sz) * 1.44 + 8px); }
.stage[data-escala] .smallcol.L { left: calc(var(--gut) + var(--sz) * .72 - 21.6px); } .stage[data-escala] .smallcol.R { right: calc(var(--gutR) + var(--sz) * .72 - 21.6px); }
/* coleta (02/11): barra de progresso, botão com cadeado e números de material/experiência */
.coleta { position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); width: min(280px, 60%); padding: 6px 10px 8px; border-radius: 10px; border: 1.5px solid var(--ouro); background: linear-gradient(#1c2c4c, #0c1526); box-shadow: 0 0 0 2px var(--ouro-esc), 0 6px 16px rgba(0,0,0,.45); pointer-events: none; text-align: center; }
.coleta b { display: block; font: 400 14px var(--display); color: #ffe2a0; letter-spacing: .4px; margin-bottom: 5px; text-shadow: 0 1px 0 #000; }
.coleta i { display: block; height: 10px; border-radius: 6px; background: #070d18; box-shadow: inset 0 0 0 1px rgba(214,173,85,.5); overflow: hidden; }
.coleta em { display: block; height: 100%; width: 0; background: linear-gradient(#ffe48f, #c98a12); border-radius: 6px; }
.stage[data-mode="dungeon"] .coleta { display: none; }
.enter.lk { background: linear-gradient(#3a4660, #232c40); color: #d6dbe8; box-shadow: 0 4px 0 #141a28; font-size: 15px; }
.dmg.col { color: #ffe27a; font-size: 15px; -webkit-text-stroke: 1px #3a2a04; text-shadow: 0 2px 0 #3a2a04; }
.dmg.xpc { color: #9fe6c0; font-size: 13px; -webkit-text-stroke: 0; text-shadow: 0 1px 2px #0a1a14; animation-name: dmgSoft; }
.hhsep { margin: 6px 2px 0; font: 800 10.5px var(--body); letter-spacing: .8px; color: var(--ouro-cl); border-top: 1px solid rgba(214,173,85,.35); padding-top: 6px; }
/* ---------- Loja Geral (02/11): mesmo padrão da janela do Herói ---------- */
.hmabas.dois { grid-template-columns: repeat(2, 1fr); }
.ljouro { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 14px; border: 1.5px solid var(--ouro); background: linear-gradient(#1c2c4c, #0c1526); font: 800 13px var(--body); color: #ffe2a0; }
.ljouro i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #e0a524 60%, #8a5a08); box-shadow: 0 0 0 1px #5a3a04; }
.ljouro + .hmx { margin-left: 8px; }
.hloja { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(170px, 23%) 1fr minmax(220px, 29%); gap: 8px; }
.ljL { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; }
.ljL .pdest .hhico { width: 32px; height: 32px; } .ljL .pdest .hhico svg { stroke: var(--c, var(--ouro)); }
.ljdica { margin-top: auto; font-size: 11px; line-height: 1.35; }
.ljM { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.ljtit { display: flex; align-items: baseline; justify-content: space-between; } .ljtit b { font: 800 12px var(--body); letter-spacing: .6px; color: var(--ouro-cl); } .ljtit span { font-size: 11px; font-weight: 800; color: #b9c2d6; }
.ljgrade { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; align-content: start; padding-right: 2px; }
.ljcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 3px 5px; border-radius: 7px; border: 2px solid color-mix(in srgb, var(--tc) 60%, #2a2418); background: linear-gradient(#22324f, #121c30); color: #f3e6c4; cursor: pointer; font: inherit; }
.ljcard b { font: 800 11.5px var(--body); white-space: nowrap; } .ljcard small { font-size: 10px; font-weight: 800; color: #ffe2a0; white-space: nowrap; }
.ljico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2e4166, #0f1828); box-shadow: inset 0 0 0 1.5px var(--tc); }
.ljico svg, .ljbig svg { width: 62%; height: 62%; fill: none; stroke: var(--mc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 #000); }
.ljcard.tem { border-color: #5fd38a; } .ljcard.tem small { color: #8fe8a8; }
.ljcard.lk { opacity: .55; } .ljcard.lk small { color: #c9d2e6; }
.ljcard.caro small { color: #ff9a8a; }
.ljcard.sel { border-color: var(--ouro); background: linear-gradient(#3a2e12, #1a1408); box-shadow: 0 0 0 2px var(--ouro-esc), inset 0 0 12px rgba(255,207,74,.25); }
.ljcard:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ljbig { display: grid; place-items: center; } .ljbig svg { width: 60%; height: 60%; }
.ljbig.ljitm svg, .ljbig.ljitm .iart { width: 80%; height: 80%; }
.ljR .sr { align-items: baseline; }
.ljmsg { margin: 2px 0 0; padding: 5px 7px; border-radius: 6px; background: rgba(255,120,100,.12); border: 1px solid rgba(255,140,120,.35); color: #ffc8bc; font-size: 11.5px; font-weight: 800; }
.ljqtd { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: auto; } .ljqtd .hbtn { justify-content: center; padding: 7px 4px; font-size: 11.5px; }
.ljqtd + .pdbtn { margin-top: 5px; }
.ljlote { margin-top: auto; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 7px; border: 1px dashed rgba(214,173,85,.45); }
.ljlote b { font: 800 12px var(--body); color: var(--ouro-cl); } .ljlote small { font-size: 11px; color: #c9d2e6; font-weight: 700; } .ljlote .hbtn { justify-content: center; }
.ljinv { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.mgrade.ljinv { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.invcells.ljinv { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
/* ---------- Fogueira (Culinária, 02/11) ---------- */
.hfogo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(190px, 27%) 1fr minmax(210px, 30%); gap: 8px; }
.ljouro.cul { color: #ffd0a0; border-color: #e8964a; }
.pdest.vazio { opacity: .62; }
.fgprontas { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
.fgprontas .sr { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.fgprontas .sr span { display: flex; align-items: center; gap: 6px; min-width: 0; } .fgprontas .sr b { color: #fff; white-space: nowrap; font-size: 11.5px; }
.fgprontas .sr svg { width: 20px; height: 20px; flex: none; fill: color-mix(in srgb, var(--mc) 35%, transparent); stroke: var(--mc); stroke-width: 1.8; stroke-linejoin: round; }
.fgprontas .sr.queim { opacity: .7; }
.hhdesc b { color: #8fe8a8; }
/* ---------- estações de fabricação (parte 3, 03/11): mesma moldura da Loja ---------- */
.ljouro.cul[style*="--oc"] { color: var(--oc); border-color: var(--oc); }
.hhico.ofico { overflow: hidden; } .hhico.ofico .iart { width: 30px; height: 30px; } .hhico.ofico svg:not(.iart) { width: 19px; height: 19px; fill: color-mix(in srgb, var(--mc, var(--c)) 30%, transparent); stroke: var(--mc, var(--c)); }
.ljico.ofic .iart { width: 40px; height: 40px; } .ljico.ofic svg:not(.iart) { fill: color-mix(in srgb, var(--mc) 30%, transparent); stroke: var(--mc); stroke-width: 1.9; }
.ljbig.ljitm svg:not(.iart) { fill: color-mix(in srgb, var(--mc, var(--c)) 30%, transparent); stroke: var(--mc, var(--c)); stroke-width: 1.8; }
.ofefeito { display: flex; flex-direction: column; gap: 2px; } .ofefeito span { font-size: 12px; }
.ofmat span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ofmat svg { width: 18px; height: 18px; flex: none; fill: color-mix(in srgb, var(--mc) 35%, transparent); stroke: var(--mc); stroke-width: 1.8; stroke-linejoin: round; }
.ljR .ljqtd { margin-top: auto; }
.stage[data-compact="1"] .ofefeito span { font-size: 9.5px; }

/* ---------- medidor do Campo de Treino (03/11): compacto, recolhível, ferramentas num menu ao lado ---------- */
.stage[data-train="1"] .target { display: none !important; }
.trainbox, .stage[data-compact="1"] .trainbox { width: 176px; max-height: none; overflow: visible; padding: 7px 8px 8px; gap: 6px; border-radius: 6px; background: rgba(10,16,28,.84); border: 1px solid rgba(214,173,85,.55); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.tb-top { display: flex; align-items: flex-end; gap: 8px; }
.tb-v { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.tb-v small { font-size: 9.5px; font-weight: 800; color: var(--muted); letter-spacing: .2px; white-space: nowrap; }
.tb-v b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.tb-v.tot b { font-size: 15px; color: var(--fg); }
.tb-ic { margin-left: auto; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(214,173,85,.45); border-radius: 50%; background: #1d2a44; color: var(--fg); cursor: pointer; padding: 0; }
.tb-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.trainbox.min .tb-ic#tMin svg { transform: rotate(180deg); }
.tb-corpo { display: flex; flex-direction: column; gap: 6px; }
.trainbox.min .tb-corpo, .trainbox.min .tb-ferr { display: none; }
.tb-rows { gap: 3px; }
.tr { font-size: 10.5px; padding: 2px 6px; border-radius: 4px; }
.tnone { font-size: 10.5px; line-height: 1.25; }
.tb-crono { position: relative; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--fg); background: #18233a; border-radius: 4px; padding: 4px 6px; overflow: hidden; }
.tb-crono[hidden] { display: none; }
.tb-crono svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; position: relative; z-index: 1; }
.tb-crono span { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-crono b { color: var(--gold); font-weight: 800; }
.tb-crono i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,207,74,.18), rgba(255,207,74,.34)); }
.tb-crono[data-f="fim"] { background: linear-gradient(#3a2e10, #241c08); box-shadow: inset 0 0 0 1px rgba(255,207,74,.5); }
.tb-acts { display: flex; gap: 5px; }
.tb-acts button { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; font-family: var(--body); font-weight: 800; font-size: 10.5px; color: var(--fg); background: #2a3a58; border: 1px solid rgba(214,173,85,.35); border-radius: 5px; padding: 5px 4px; cursor: pointer; white-space: nowrap; }
.tb-acts button svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tb-acts button.on { background: linear-gradient(#ffe07a, var(--gold)); color: #1b1405; border-color: #ffe9a8; }
.tb-ferr { position: absolute; left: calc(100% + 8px); top: 0; width: 236px; display: flex; flex-direction: column; gap: 6px; padding: 7px 8px 8px; border-radius: 6px; background: rgba(10,16,28,.92); border: 1px solid rgba(214,173,85,.6); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.tb-ferr[hidden] { display: none; }
.tb-fh { display: flex; align-items: center; }
.tb-fh b { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .3px; color: var(--gold); }
.tb-ferr .tb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0; }
.tb-ferr .tb-btns button { font-size: 10.5px; padding: 6px 4px; border-radius: 5px; border: 1px solid rgba(214,173,85,.3); background: #2a3a58; line-height: 1.15; }
.stage[data-compact="1"] .tb-ferr { width: 220px; }
.stage[data-compact="1"] .tb-ferr .tb-btns button { padding: 5px 3px; font-size: 10px; }
/* lista completa de fontes de dano (03/11): nome, total e % do total; rola dentro do painel depois de ~8 linhas */
.trainbox, .stage[data-compact="1"] .trainbox { width: 192px; }
.tb-rows { max-height: 178px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(214,173,85,.5) transparent; padding-right: 2px; }
.tr { align-items: baseline; }
.tr .tl { flex: 1 1 auto; }
.tr b { flex: none; }
.tr em { position: relative; z-index: 1; flex: none; width: 30px; text-align: right; font-style: normal; font-weight: 800; color: var(--muted); }
/* 03/11: qualquer tamanho de tela: a interface inteira cresce ou encolhe por igual (--uiz vem do 13-controles.js) */
.stage[data-zoom] .hud, .stage[data-zoom] .criar { inset: 0 auto auto 0; width: calc(100% / var(--uiz)); height: calc(100% / var(--uiz)); transform: scale(var(--uiz)); transform-origin: 0 0;
  --gut: calc(max(10px, env(safe-area-inset-left, 0px)) / var(--uiz)); --gutR: calc(max(10px, env(safe-area-inset-right, 0px)) / var(--uiz)); }
/* botão de tela cheia: no canto de cima à direita do minimapa */
.minibox .rbtn.tela { right: 5px; top: 5px; }
.rbtn.tela svg { stroke-width: 2.4; }
.rbtn.tela .sai { display: none; } .rbtn.tela.on .entra { display: none; } .rbtn.tela.on .sai { display: inline; }

/* ---------- janela do mapa (03/11): tela inteira, zoom, legenda, filtros e cartão ---------- */
.sheet.mapa, .stage[data-compact="1"] .sheet.mapa { left: calc(var(--gut, 10px) + 4px); right: calc(var(--gutR, 10px) + 4px); top: 8px; bottom: 8px; width: auto; max-height: none; padding: 0; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; border: 2px solid var(--ring-dk); background: #0e1626; }
.sheet.mapa > header { display: none; }
.sheet.mapa .sheet-body { flex: 1; min-height: 0; gap: 0; }
.mapa2 { position: relative; flex: 1; min-height: 0; height: 100%; display: flex; }
.mvista { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.mvista canvas#mapaCv { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.mvista canvas#mapaCv:active { cursor: grabbing; }
.mb { font-family: var(--body); font-weight: 800; font-size: 12px; color: var(--fg); background: rgba(20,30,50,.92); border: 1px solid rgba(214,173,85,.55); border-radius: 8px; padding: 6px 10px; cursor: pointer; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.mb.on { background: linear-gradient(#ffe07a, var(--gold)); color: #1b1405; }
.mb.ouro { background: linear-gradient(#ffe07a, var(--gold)); color: #1b1405; border-color: #ffe9a8; }
.mb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mtopo { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.mtopo .mb { pointer-events: auto; }
.mtopo .fecha { margin-left: auto; width: 34px; padding: 0; font-size: 15px; }
.mzoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.mzoom .mb { width: 36px; height: 36px; padding: 0; font-size: 20px; }
.mlado { width: 250px; flex: none; overflow-y: auto; background: rgba(14,22,38,.97); border-left: 1px solid rgba(214,173,85,.4); padding: 10px 12px; }
.mlado[hidden] { display: none; }
.mlado h4 { margin: 4px 0 6px; font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--gold); letter-spacing: .3px; }
.mleg { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mleg li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--fg); }
.mleg canvas { width: 22px; height: 22px; flex: none; }
.mdif { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mdif li { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; }
.mdif i, .mfil i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mdica { font-size: 11px !important; line-height: 1.35; color: var(--muted); }
.mfil { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; padding: 4px 0; cursor: pointer; }
.mfil input { width: 16px; height: 16px; accent-color: var(--gold); }
.mcard { position: absolute; left: 8px; bottom: 8px; width: min(300px, calc(100% - 70px)); max-height: calc(100% - 60px); overflow-y: auto; background: rgba(14,22,38,.96); border: 1px solid var(--c, #ffcf4a); border-left: 4px solid var(--c, #ffcf4a); border-radius: 10px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.mcard[hidden] { display: none; }
.mch { display: flex; align-items: center; gap: 6px; }
.mch b { font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--c, #fff); }
.mch .fecha { margin-left: auto; width: 28px; min-height: 28px; padding: 0; }
.mcard small { font-size: 11px; font-weight: 800; color: var(--muted); }
.mcard p { margin: 0; font-size: 11.5px; font-weight: 700; color: #d8e0f0; line-height: 1.35; }
.mops { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mops li { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 700; background: #18233a; border-radius: 5px; padding: 3px 7px; }
.mops li span { color: var(--muted); white-space: nowrap; }
.mops li.lk { opacity: .6; }
.mtag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 9px; color: #1b1405; background: var(--c); margin-right: 4px; }
.mcb { display: flex; gap: 6px; margin-top: 4px; }
/* ---------- Portal da vila ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pcard { display: flex; align-items: center; gap: 8px; background: #1c2840; border: 1px solid rgba(214,173,85,.35); border-left: 4px solid var(--c); border-radius: 10px; padding: 6px 8px; }
.pcard.lk { opacity: .62; }
.pmini { width: 54px; height: 54px; border-radius: 8px; flex: none; border: 1px solid rgba(214,173,85,.4); }
.pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pinfo b { font-family: var(--display); font-weight: 400; font-size: 14px; }
.pinfo small { font-size: 11px; font-weight: 800; color: var(--muted); }
.pinfo em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #ff9a6a; }
.pinfo em.okc { color: var(--c); }
.pcard .hbtn { min-width: 52px; }