/* =========================================================================
 * KONKAI v2 — Ecos da Alma · Folha de estilos · interface autoral "Tinta Konkai"
 * Contrato visual: docs/V2_UI_BLEACH.md. Preto, branco e vermelho-sangue; pinceladas, hanko, kanji.
 * Cada peça do HUD é um objeto do mundo de KONKAI: konzantō (jogador + técnicas), Konkeitai (minimapa + alertas),
 * Borboletas do Limbo (chat), Ordens (missões), shimenawa com fuda (menu), máscara de Vazio (alvo).
 * As peças de imagem vêm de variáveis --ik-* (js/ui/ui-ink.js: pele v3 ou reserva em SVG); onde não há imagem,
 * o CSS usa gradientes/clip-path (sempre var(--ik-x, <reserva>)).
 * Base de projeto: 1366×768 (a interface escala por --ui-zoom em telas maiores/menores).
 * ========================================================================= */
:root {
  --ink: #0b0b0d; --ink-2: #16161a; --ink-3: #202026; --ink-line: rgba(242, 239, 230, 0.18); --ink-line2: rgba(242, 239, 230, 0.34);
  --paper: #f2efe6; --paper-dim: #a9a59b; --paper-dk: #6f6c65;
  --blood: #c8102e; --blood-dark: #7d0a1c; --blood-hi: #ff4a63;
  --reiatsu: #5ec8ff; --bone: #e9e4d8; --gold: #d6b25e;
  --glass: rgba(11, 11, 13, 0.82);
  /* nomes antigos usados em muitos painéis */
  --text: var(--paper); --muted: var(--paper-dim); --dim: var(--paper-dk); --line: var(--ink-line); --line2: var(--ink-line2);
  --panel: var(--ink-2); --panel2: var(--ink-3); --panel3: #2a2a31; --bg: var(--ink);
  --good: #7be08f; --bad: #ff5d70; --warn: #ffb457; --purple: #c9a0ff; --orange: #ff8a3d;
  --rei: var(--reiatsu); --hollow: var(--blood); --accent: var(--paper); --gold-hi: var(--paper); --gold-dk: var(--paper-dk);
  --font-h: "Shippori Mincho B1", "Yu Mincho", "MS Mincho", serif;
  --font-k: "Yuji Syuku", "Yu Mincho", serif;
  --font-b: "Zen Kaku Gothic New", "Yu Gothic UI", "Meiryo", "Segoe UI", sans-serif;
  --font-n: "Zen Kaku Gothic New", "Yu Gothic UI", "Meiryo", "Segoe UI", sans-serif;
  --ui-zoom: 1;
  --edge-cut: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--paper); overflow: hidden; }
body { font: 500 14px/1.36 var(--font-b); -webkit-text-size-adjust: 100%; overscroll-behavior: none; touch-action: manipulation; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
b, strong { font-weight: 700; }
h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 800; letter-spacing: 0.04em; margin: 0; }
img, canvas { image-rendering: pixelated; }
.muted { color: var(--paper-dim); }
.small { font-size: 12.5px; }
.good { color: var(--good); } .bad { color: var(--bad); } .warnc { color: var(--warn); } .accent { color: #fff; text-shadow: 0 0 10px rgba(200, 16, 46, 0.6); } .gold { color: var(--gold); }
.center { text-align: center; }
.pad { padding: 8px; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(242, 239, 230, 0.05); }
::-webkit-scrollbar-thumb { background: rgba(242, 239, 230, 0.34); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--blood); }
* { scrollbar-width: thin; scrollbar-color: rgba(242, 239, 230, 0.34) transparent; }
:focus-visible { outline: 2px solid var(--reiatsu); outline-offset: 1px; }
kbd, .keycap { display: inline-block; min-width: 18px; padding: 0 5px; font: 700 10px/16px var(--font-b); text-align: center; color: var(--paper); background: #000; border: 1px solid var(--ink-line2); }

/* ---------------- camadas ---------------- */
#world, #world-overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#world { z-index: 0; background: #070707; touch-action: none; }
#world-overlay { z-index: 1; pointer-events: none; }
body.is-dead #world, body.is-dead #world-overlay { filter: grayscale(0.92) brightness(0.78) contrast(1.05); transition: filter 0.6s; }
.hud, .windows, .dialog { position: fixed; inset: 0; pointer-events: none; zoom: var(--ui-zoom); }
.hud { z-index: 10; } .windows { z-index: 20; } .dialog { z-index: 30; }
.toasts { position: fixed; z-index: 40; right: 14px; bottom: 18px; width: 300px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; zoom: var(--ui-zoom); }
.screen { position: fixed; inset: 0; z-index: 50; display: none; background: #050506; }
.screen.on { display: block; }
.modal-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.modal-root > * { pointer-events: auto; }
.tooltip { position: fixed; z-index: 70; max-width: 330px; pointer-events: none; background: rgba(11, 11, 13, 0.97); border: 1px solid rgba(242, 239, 230, 0.7); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.75); padding: 7px 10px 8px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.hud *, .windows *, .dialog * { -webkit-user-select: none; user-select: none; }
.hud input, .windows input, .windows textarea, .hud .ch-log, .windows .code { -webkit-user-select: text; user-select: text; }

/* ---------------- ícones ---------------- */
.ico { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; flex: none; }
.ico.lg { width: 40px; height: 40px; }
.ico-fb { display: inline-block; background: #26262c; border: 1px solid var(--ink-line2); }

/* ---------------- peças de tinta reaproveitáveis ---------------- */
.hanko { position: relative; display: inline-flex; align-items: center; justify-content: center; isolation: isolate; color: var(--paper); }
.hanko::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blood); border-radius: 50%; -webkit-mask: var(--ik-seal-round, none) center/100% 100% no-repeat; mask: var(--ik-seal-round, none) center/100% 100% no-repeat; }
.hanko.sq::before { border-radius: 2px; -webkit-mask-image: var(--ik-seal-sq, none); mask-image: var(--ik-seal-sq, none); }
.hanko.off::before { background: #4a4a50; }
.brush-ul { position: relative; }
.brush-ul::after { content: ""; position: absolute; left: -2px; right: -6px; bottom: -5px; height: 7px; background: var(--blood); -webkit-mask: var(--ik-underline, none) 0 50%/100% 100% no-repeat; mask: var(--ik-underline, none) 0 50%/100% 100% no-repeat; clip-path: polygon(0 40%, 3% 0, 20% 25%, 52% 5%, 84% 22%, 100% 0, 98% 70%, 90% 100%, 60% 80%, 28% 100%, 6% 78%); }
html:not(.ik-ok) .brush-ul::after { clip-path: polygon(0 40%, 3% 0, 20% 25%, 52% 5%, 84% 22%, 100% 0, 98% 70%, 90% 100%, 60% 80%, 28% 100%, 6% 78%); }

/* ---------------- botões e campos ---------------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 3px 14px; background: transparent; border: 1px solid var(--paper); color: var(--paper); font: 700 12px/16px var(--font-b); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: background 0.12s, color 0.12s, transform 0.1s; border-radius: 0; }
.btn:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.sm { min-height: 28px; font-size: 11.5px; padding: 1px 10px; }
.btn.icon { min-width: 30px; padding: 3px 6px; }
.btn.primary { background: var(--blood); border-color: var(--blood); color: #fff; clip-path: polygon(0 4%, 2% 0, 98% 6%, 100% 0, 99% 94%, 100% 100%, 2% 96%, 0 100%); border-radius: 0; box-shadow: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.btn.primary:hover:not(:disabled) { background: var(--blood-hi); color: #fff; }
.btn.danger { background: var(--blood-dark); border-color: var(--blood-dark); color: #ffe3e7; }
.btn.danger:hover:not(:disabled) { background: var(--blood); color: #fff; }
.btn.boss { border-color: var(--blood); color: #ffc9d0; }
.btn.on { background: var(--paper); color: var(--ink); }
.btn:disabled, .btn.is-disabled { opacity: 0.38; cursor: not-allowed; }
.btn.pulse:not(:disabled) { animation: btnPulse 1.1s infinite; }
@keyframes btnPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.55) saturate(1.2); } }
input[type=text], input[type=number], select, textarea { background: rgba(0, 0, 0, 0.55); border: 0; border-bottom: 2px solid var(--ink-line2); color: var(--paper); padding: 5px 8px; min-height: 32px; border-radius: 0; font-family: var(--font-b); font-size: 14px; }
input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus { border-bottom-color: var(--blood); outline: none; background: rgba(0, 0, 0, 0.75); }
input.wide { width: 100%; }
textarea { width: 100%; resize: vertical; }
textarea.code { font: 12px/1.3 ui-monospace, Consolas, monospace; word-break: break-all; }
input[type=range] { accent-color: var(--blood); flex: 1; min-width: 90px; }
input[type=checkbox] { accent-color: var(--blood); width: 16px; height: 16px; }
input.colorin { width: 34px; height: 28px; padding: 0; border: 1px solid var(--ink-line2); background: none; }
.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.swatch { width: 26px; height: 26px; border: 2px solid rgba(242, 239, 230, 0.25); padding: 0; border-radius: 0; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--blood); }
.tag { display: inline-block; padding: 0 7px; font: 700 10.5px/17px var(--font-b); letter-spacing: 0.08em; text-transform: uppercase; background: transparent; border: 1px solid var(--ink-line2); color: var(--paper-dim); vertical-align: middle; }
.tag.ok { color: var(--good); border-color: rgba(123, 224, 143, 0.5); } .tag.ult { color: var(--blood-hi); border-color: rgba(255, 74, 99, 0.55); } .tag.lock { color: var(--blood-hi); border-color: rgba(255, 74, 99, 0.5); } .tag.nt { text-transform: none; }
.lbl { display: block; font: 700 11px var(--font-b); letter-spacing: 0.16em; color: var(--paper-dim); text-transform: uppercase; margin: 8px 0 3px; }

/* =========================================================================
 * HUD
 * ========================================================================= */
.h-orders { position: absolute; left: 8px; top: 186px; width: 244px; pointer-events: none; }

/* ---------- barras de pincel (HP / Konryoku / alvo) ---------- */
.bb { position: relative; height: 16px; background: linear-gradient(180deg, rgba(74, 74, 84, 0.92), rgba(30, 30, 36, 0.92)); clip-path: polygon(0 18%, 1.2% 0, 97.5% 9%, 100% 52%, 98.6% 100%, 1.6% 90%); }
.bb .bb-f { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 0.12s linear; }
.bb .bb-f::before { content: ""; position: absolute; inset: 1px 0 1px 1px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), linear-gradient(180deg, #e8334f, var(--blood) 55%, #8d0b21); clip-path: polygon(0 12%, 1.5% 0, 96% 6%, 100% 40%, 98% 100%, 1% 92%); }
.bb-rei .bb-f::before { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px), linear-gradient(180deg, #a4e2ff, #4fb4ee 55%, #2672b4); }
.bb-rei .bb-f::after { content: ""; position: absolute; right: -9px; top: 50%; width: 15px; height: 17px; margin-top: -9px; background: radial-gradient(ellipse at 40% 60%, #e9f8ff 0 18%, rgba(110, 205, 255, 0.85) 38%, rgba(94, 200, 255, 0) 70%); animation: flame 0.9s ease-in-out infinite; pointer-events: none; }
@keyframes flame { 0%, 100% { transform: scale(1, 1) translateY(0); opacity: 0.9; } 40% { transform: scale(1.15, 1.35) translateY(-2px); opacity: 1; } 70% { transform: scale(0.85, 1.1) translateY(1px); opacity: 0.75; } }
.bb .bb-sh { position: absolute; left: 0; top: 0; height: 36%; width: 0; background: rgba(255, 255, 255, 0.82); z-index: 2; pointer-events: none; }
.bb .bb-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 10.5px/1 var(--font-n); letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000, 1px 0 0 #000, -1px 0 0 #000; pointer-events: none; white-space: nowrap; z-index: 3; }
.bb-rei { height: 9px; } .bb-rei .bb-t { font-size: 8.5px; display: none; }
.bb-hp .bb-t { font-size: 11px; }

/* ---------- konzantō: jogador + técnicas (canto inferior esquerdo) ----------
 * Medidas das peças da pele (js/art/ui-skin.js): pomo 28×48 · cabo 220×44 · tsuba 84×84 (furo r 31) · habaki 18×44 · lâmina 512×52
 * (slots 44 a partir de y=2, hamon em y=47) · kissaki 72×52 · sageo 40×70 · cabaça 28×36. A reserva em CSS usa a mesma geometria. */
.zk { position: absolute; left: 8px; bottom: 12px; width: 812px; height: 144px; pointer-events: none; }
.zk > * { pointer-events: auto; }
.zk-info { position: absolute; left: 16px; top: 0; width: 290px; height: 66px; pointer-events: none; padding: 0; }
.zk-nm { font: 800 17px/1.1 var(--font-h); color: #fff; letter-spacing: 0.04em; text-shadow: 0 2px 0 #000, 0 0 8px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 176px; }
.zk-cl { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; font: 600 11.5px/1.2 var(--font-b); color: var(--paper); text-shadow: 0 1px 2px #000, 0 0 5px #000; white-space: nowrap; }
.zk-ck { font: normal 15px/1 var(--font-k); color: var(--paper); letter-spacing: 0; }
.zk-cl span { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.zk-info .hp-cur { display: flex; gap: 10px; margin-top: 4px; align-items: center; font: 700 11.5px var(--font-n); text-shadow: 0 1px 2px #000, 0 0 5px #000; flex-wrap: nowrap; }
.hc { display: inline-flex; align-items: center; gap: 3px; color: var(--c, var(--paper)); white-space: nowrap; }
.hc .ico { width: 16px; height: 16px; } .hc .glyph { font-size: 11px; }
.hp-cur.pulse-up { animation: pulseUp 0.6s; } .hp-cur.pulse-dn { animation: pulseDn 0.6s; }
@keyframes pulseUp { 0% { filter: brightness(2.2); } 100% { filter: none; } }
@keyframes pulseDn { 0% { opacity: 0.5; } 100% { opacity: 1; } }
.zk-pw { position: absolute; left: 196px; top: 2px; width: 118px; text-align: right; pointer-events: none; line-height: 1; }
.zk-pw small { display: block; font: 700 9.5px var(--font-b); letter-spacing: 0.18em; color: var(--paper-dim); text-shadow: 0 1px 2px #000; }
.zk-pw small i { font: normal 12px var(--font-k); letter-spacing: 0; color: var(--paper); margin-right: 4px; }
.zk-pw b { display: block; font: 800 26px/1.05 var(--font-h); color: #fff; text-shadow: 0 2px 0 var(--blood-dark), 0 0 12px rgba(0, 0, 0, 0.9); }
.zk .h-buffs { position: absolute; left: 326px; top: 22px; display: flex; gap: 5px; flex-wrap: wrap; width: 440px; min-height: 18px; pointer-events: auto; }
.bf { position: relative; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.bf::before { content: ""; position: absolute; inset: 1px; background: var(--ink); border: 1.5px solid var(--paper); transform: rotate(45deg); }
.bf .ico { position: relative; width: 14px; height: 14px; }
.bf i { position: absolute; right: -5px; bottom: -7px; font: 700 9px/9px var(--font-n); font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px 0 0 #000; }
.bf.bad::before { border-color: var(--blood-hi); } .bf.cons::before { border-color: var(--reiatsu); }
.zk-barswrap { position: absolute; left: 318px; top: 46px; width: 470px; height: 29px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.zk-barswrap .bb { pointer-events: auto; }

/* peças da espada */
.zk-pommel { position: absolute; left: 0; top: 82px; width: 28px; height: 48px; background: var(--ik-pommel, linear-gradient(180deg, #2c2c32, #0d0d10 60%, #2c2c32)) 0 0/100% 100% no-repeat; }
html:not(.sk-katana_pommel) .zk-pommel { border: 1px solid rgba(242, 239, 230, 0.55); border-radius: 12px 4px 4px 12px / 14px 4px 4px 14px; box-shadow: inset 0 0 0 3px #0b0b0d, inset 0 0 0 4px rgba(242, 239, 230, 0.22); }
.zk-sageo { position: absolute; left: 4px; top: 122px; width: 19px; height: 33px; background: var(--ik-sageo, none) 0 0/100% 100% no-repeat; pointer-events: none; }
html:not(.sk-sageo) .zk-sageo { background: linear-gradient(90deg, transparent 6px, var(--blood) 6px 9px, transparent 9px), linear-gradient(90deg, transparent 9px, var(--blood-dark) 9px 11px, transparent 11px); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.zk-hilt { position: absolute; left: 22px; top: 84px; width: 220px; height: 44px; overflow: visible; background: var(--ik-hilt, linear-gradient(#e7e1d1, #cfc9b8)) 0 0/220px 44px no-repeat; }
html:not(.sk-katana_hilt) .zk-hilt { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(11, 11, 13, 0.92) 8px 10.5px), repeating-linear-gradient(-45deg, transparent 0 8px, rgba(11, 11, 13, 0.92) 8px 10.5px), linear-gradient(180deg, #ece7d8, #cdc7b6 58%, #a9a392); border-top: 1px solid rgba(0, 0, 0, 0.7); border-bottom: 1px solid rgba(0, 0, 0, 0.7); }
html:not(.sk-katana_hilt) .zk-hilt::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), inset 0 -4px 0 rgba(0, 0, 0, 0.3); pointer-events: none; }
.zk-auto { position: absolute; left: 30px; top: 1px; width: 42px; height: 42px; padding: 0; background: none; border: 0; z-index: 3; font: 800 14px/0.95 var(--font-k); letter-spacing: 0; text-align: center; flex-direction: column; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); transition: transform 0.12s; }
.zk-auto b { font: inherit; display: block; }
.zk-auto:hover { transform: scale(1.06); }
.zk-auto.off { color: #2a2a2e; text-shadow: none; }
.zk-auto.on { animation: sealBeat 2.4s ease-in-out infinite; }
@keyframes sealBeat { 0%, 100% { filter: drop-shadow(0 0 0 rgba(200, 16, 46, 0)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 74, 99, 0.85)); } }
.zk-autot { position: absolute; left: 26px; top: 45px; width: 50px; text-align: center; font: 800 8.5px/1 var(--font-b); letter-spacing: 0.22em; color: var(--paper); text-shadow: 0 1px 0 #000, 0 0 4px #000; z-index: 3; pointer-events: none; padding-left: 0.22em; }
.zk-pots { position: absolute; left: 92px; top: 3px; width: 112px; height: 38px; display: flex; gap: 8px; padding: 0 8px; z-index: 3; background: rgba(11, 11, 13, 0.92); clip-path: polygon(0 10%, 4% 0, 100% 0, 100% 100%, 3% 100%, 0 90%); }
.pot { position: relative; width: 44px; height: 38px; flex: none; padding: 0; background: none; border: 0; display: flex; align-items: flex-end; justify-content: center; }
.pot .gd { position: absolute; left: 8px; top: 1px; width: 28px; height: 36px; background: var(--blood); -webkit-mask: var(--ik-gourd, none) center/100% 100% no-repeat; mask: var(--ik-gourd, none) center/100% 100% no-repeat; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.7)); }
.pot.rei .gd { background: #4fb4ee; }
.pot .gd::after { content: ""; position: absolute; left: 7px; top: 12px; width: 5px; height: 11px; background: rgba(255, 255, 255, 0.42); border-radius: 3px; }
html.sk-gourd .pot .gd { background: var(--ik-gourd) center/100% 100% no-repeat; -webkit-mask: none; mask: none; }
html.sk-gourd .pot .gd::after { display: none; }
html.sk-gourd .pot.rei .gd { filter: hue-rotate(195deg) saturate(1.5) brightness(1.15) drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.7)); }
.pot.none .gd { filter: grayscale(1) brightness(0.55); }
.pot:hover .gd { filter: brightness(1.25) drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.7)); }
.pot-n { position: absolute; right: 0; bottom: -1px; z-index: 2; min-width: 15px; padding: 0 2px; font: 800 11px/15px var(--font-n); text-align: center; color: #fff; background: #0b0b0d; border: 1px solid rgba(242, 239, 230, 0.55); }
.pot-key { position: absolute; left: 0; top: -1px; z-index: 2; font: 800 10px/13px var(--font-n); color: #fff; text-shadow: 0 0 3px #000, 1px 1px 0 #000; background: #0b0b0d; padding: 0 3px; border: 1px solid rgba(242, 239, 230, 0.5); }
.zk-tsuba { position: absolute; left: 234px; top: 70px; width: 72px; height: 72px; padding: 0; background: none; border: 0; z-index: 4; transition: transform 0.12s; overflow: visible; }
.zk-tsuba:hover { transform: scale(1.05) rotate(-2deg); }
.zk-tsuba::before { content: ""; position: absolute; inset: 0; background: var(--ik-tsuba, radial-gradient(circle at 50% 50%, transparent 0 28px, #1b1b1f 28.5px 100%)) 0 0/100% 100% no-repeat; border-radius: 50%; }
html:not(.sk-katana_tsuba) .zk-tsuba::before { box-shadow: 0 0 0 1px rgba(242, 239, 230, 0.7), 0 3px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 3px #101013; }
html.sk-katana_tsuba .zk-tsuba::before { border-radius: 0; }
html:not(.sk-katana_tsuba) .zk-tsuba::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 50% 4%, #0b0b0d 0 4px, transparent 4.5px), radial-gradient(circle at 50% 96%, #0b0b0d 0 4px, transparent 4.5px), radial-gradient(circle at 4% 50%, #0b0b0d 0 4px, transparent 4.5px), radial-gradient(circle at 96% 50%, #0b0b0d 0 4px, transparent 4.5px); border: 1px dashed rgba(242, 239, 230, 0.28); pointer-events: none; }
.zk-port { position: absolute; left: 9.5px; top: 9.5px; width: 53px; height: 53px; border-radius: 50%; overflow: hidden; background: #16161a; }
.zk-port canvas { display: block; width: 53px; height: 53px; }
.zk-lv { position: absolute; right: -5px; bottom: 1px; min-width: 26px; height: 26px; padding: 0 3px; font: 800 14px/26px var(--font-h); text-align: center; color: #fff; z-index: 2; transform: rotate(-4deg); }
.zk-habaki { position: absolute; left: 300px; top: 84px; width: 18px; height: 44px; background: var(--ik-habaki, linear-gradient(90deg, #cfc9b8, #8e897b 40%, #cfc9b8)) 0 0/100% 100% no-repeat; z-index: 3; }
html:not(.sk-katana_habaki) .zk-habaki { border: 1px solid #0b0b0d; }
.zk-blade { position: absolute; left: 316px; top: 80px; width: 412px; height: 52px; background: var(--ik-blade, linear-gradient(180deg, #4a4b52 0, #2b2c32 14%, #17171b 52%, #101013 80%, #2d2e34 100%)) 0 0/512px 52px repeat-x; }
html:not(.sk-katana_blade) .zk-blade { border-top: 1px solid rgba(242, 239, 230, 0.62); border-bottom: 1px solid rgba(242, 239, 230, 0.35); background-size: auto 100%; }
.zk-tipend { position: absolute; left: 728px; top: 80px; width: 72px; height: 52px; background: var(--ik-tip, linear-gradient(180deg, #4a4b52 0, #2b2c32 14%, #17171b 52%, #101013 80%, #2d2e34 100%)) 0 0/100% 100% no-repeat; }
html:not(.sk-katana_tip) .zk-tipend { clip-path: polygon(0 0, 74% 0, 100% 24%, 34% 100%, 0 100%); }
.zk-hamon { position: absolute; left: 8px; right: 0; bottom: 0; height: 10px; z-index: 1; pointer-events: none; }
.zk-hamon-bg { position: absolute; inset: 0; background: var(--ik-hamon) 0 0/512px 10px repeat-x; opacity: 0.25; }
.zk-hamon-f { position: absolute; left: 0; bottom: 0; height: 10px; width: 0; overflow: hidden; transition: width 0.3s; filter: drop-shadow(0 0 3px rgba(94, 200, 255, 0.95)); }
.zk-hamon-f::before { content: ""; position: absolute; left: 0; top: 0; width: 760px; height: 10px; background: var(--ik-hamon) 0 0/512px 10px repeat-x; }
html:not(.ik-ok) .zk-hamon-f::before, html:not(.ik-ok) .zk-hamon-bg { background: linear-gradient(90deg, #dff3ff, #dff3ff) 0 5px/100% 2px no-repeat; }
.zk-tipt { position: absolute; left: 12px; top: 10px; display: flex; flex-direction: column; line-height: 1.12; text-shadow: 0 1px 0 #000, 0 0 4px #000; z-index: 2; }
.zk-tipt b { font: 800 10.5px var(--font-n); color: #fff; letter-spacing: 0.02em; }
.zk-tipt i { font: 700 10px var(--font-n); font-style: normal; color: #9fdcff; }
.zk-skills { position: absolute; left: 12px; top: 2px; height: 44px; display: flex; gap: 6px; z-index: 2; }
.sk-wrap { position: relative; width: 44px; height: 44px; flex: none; transition: filter 0.2s; }
.sk { position: relative; display: block; width: 44px; height: 44px; padding: 0; background: rgba(242, 239, 230, 0.55); border: 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); overflow: hidden; }
.sk::before { content: ""; position: absolute; inset: 1px; background: radial-gradient(circle at 50% 38%, #26262d, #0f0f12 78%); clip-path: polygon(0 0, 100% 0, 100% 77%, 77% 100%, 0 100%); }
.sk:hover:not(.sk-empty)::before { background: radial-gradient(circle at 50% 38%, #3a3a43, #17171c 78%); }
.sk .ico { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -52%); }
.sk-wrap.ready { filter: drop-shadow(0 0 4px rgba(94, 200, 255, 0.85)); }
.sk-wrap.ready .sk { background: var(--reiatsu); }
.sk-wrap.locked .sk .ico { filter: grayscale(1) brightness(0.45); }
.sk-wrap.unlearned .sk .ico { filter: grayscale(0.8) brightness(0.7); }
.sk-wrap.norei .sk-cost { color: var(--blood-hi); }
.sk-wrap.locked .sk-cost { display: none; }
.sk-wrap.empty .sk { opacity: 0.4; }
.sk-cd { position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; pointer-events: none; clip-path: polygon(0 0, 100% 0, 100% 77%, 77% 100%, 0 100%); }
.sk-cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 15px var(--font-n); color: #fff; text-shadow: 0 0 4px #000, 0 0 2px #000; pointer-events: none; }
.sk-key { position: absolute; left: 4px; top: 2px; font: 800 10px/10px var(--font-n); color: #fff; text-shadow: 0 0 3px #000, 1px 1px 0 #000; z-index: 2; }
.sk-cost { position: absolute; right: 4px; top: 2px; font: 800 9.5px/10px var(--font-n); color: #8fd8ff; text-shadow: 0 0 3px #000, 1px 1px 0 #000; z-index: 2; }
.sk-lock { position: absolute; left: 2px; right: 2px; bottom: 3px; background: rgba(0, 0, 0, 0.8); font: 700 9px/12px var(--font-n); text-align: center; color: var(--blood-hi); z-index: 2; }
.sk-lock.learn { color: #fff; background: var(--blood-dark); }
.sk-auto { position: absolute; right: -4px; bottom: -3px; width: 16px; height: 16px; padding: 0; font: 800 9px/14px var(--font-n); background: #0b0b0d; border: 1px solid var(--ink-line2); color: var(--paper-dk); border-radius: 50%; z-index: 3; }
.sk-auto.on { background: var(--blood); color: #fff; border-color: #fff; box-shadow: 0 0 5px rgba(200, 16, 46, 0.8); }

/* ---------- Ordens (missões) ---------- */
.od { pointer-events: auto; }
.od-head { display: flex; align-items: center; gap: 7px; padding: 3px 6px 3px 4px; background: linear-gradient(90deg, rgba(11, 11, 13, 0.92), rgba(11, 11, 13, 0.5)); border-left: 3px solid var(--blood); }
.od-k { font: normal 20px/1 var(--font-k); color: #fff; font-style: normal; }
.od-head b { font: 800 10.5px var(--font-b); letter-spacing: 0.28em; color: var(--paper); text-transform: uppercase; }
.od-n { font: 700 11px var(--font-n); color: var(--paper-dim); }
.od-tog { margin-left: auto; width: 22px; height: 20px; padding: 0; background: none; border: 0; color: var(--paper); font-size: 13px; line-height: 1; }
.od-body { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.od-item { position: relative; display: flex; align-items: stretch; gap: 6px; padding: 5px 6px 6px 5px; background: linear-gradient(90deg, rgba(11, 11, 13, 0.9), rgba(11, 11, 13, 0.78)); border-top: 1px solid rgba(242, 239, 230, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.7); }
.od-no { flex: none; align-self: flex-start; width: 20px; height: 20px; margin-top: 1px; font: 800 12px/20px var(--font-h); text-align: center; font-style: normal; color: #fff; }
.od-no::before { inset: 0; }
.od-item.daily .od-no::before { background: #3a3a42; } .od-item.tkt .od-no::before { background: var(--reiatsu); } .od-item.tkt .od-no { color: #06202e; }
.od-main { flex: 1; min-width: 0; cursor: pointer; }
.od-t { font: 800 12.5px/1.15 var(--font-h); color: #fff; letter-spacing: 0.02em; }
.od-g { font: 500 11.5px/1.25 var(--font-b); color: #d4d0c6; margin: 1px 0 3px; }
.od-p { display: flex; align-items: center; gap: 6px; }
.od-p b { font: 700 10px var(--font-n); color: var(--paper-dim); }
.od-bar { flex: 1; height: 3px; background: rgba(242, 239, 230, 0.16); }
.od-bar i { display: block; height: 100%; background: var(--paper); clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%); }
.od-item.done .od-bar i { background: var(--blood-hi); }
.od-go { flex: none; align-self: center; position: relative; width: 28px; height: 28px; padding: 0; background: none; border: 0; font: normal 17px/28px var(--font-k); color: #fff; isolation: isolate; transition: transform 0.1s; }
.od-go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blood); -webkit-mask: var(--ik-seal-sq, none) center/100% 100% no-repeat; mask: var(--ik-seal-sq, none) center/100% 100% no-repeat; border-radius: 2px; }
.od-go:hover:not(:disabled) { transform: scale(1.12) rotate(-3deg); }
.od-go:disabled { opacity: 0.35; cursor: not-allowed; }
.od-go.done { animation: stampIn 0.5s ease-out both; font-size: 18px; }
.od-go.done::before { background: var(--blood); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); border-radius: 2px; }
@keyframes stampIn { 0% { transform: scale(1.5) rotate(8deg); opacity: 0; } 60% { transform: scale(0.94) rotate(-3deg); opacity: 1; } 100% { transform: scale(1) rotate(-2deg); } }
.od-empty { color: var(--paper-dk); font-size: 12px; padding: 4px 8px; background: rgba(11, 11, 13, 0.7); }
.od.closed .od-head { background: linear-gradient(90deg, rgba(11, 11, 13, 0.92), rgba(11, 11, 13, 0.4)); }

/* ---------- shimenawa: menu com 15 fuda ---------- */
.h-top { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); width: 700px; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.shime { position: relative; width: 100%; height: 108px; pointer-events: none; }
.shime-rope { position: absolute; left: 0; right: 0; top: 0; height: 28px; background: var(--ik-shimenawa, none) 0 0/512px 28px repeat-x; }
html:not(.sk-shimenawa) .shime-rope { background: repeating-linear-gradient(115deg, #d9cfae 0 3px, #8a7f5e 3px 5px, #e9e0c2 5px 7px); border-radius: 6px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.28); height: 9px; top: 6px; }
.shime-in { position: absolute; left: 0; right: 0; top: 14px; display: flex; justify-content: center; align-items: flex-start; gap: 0; padding: 0 12px; pointer-events: none; }
.shime-grp { display: flex; gap: 3px; }
.shide { position: relative; width: 18px; height: 40px; margin: 0 6px; flex: none; background: var(--ik-shide, #f2efe6) 0 0/100% 100% no-repeat; transform-origin: 50% 0; animation: shideSway 4s ease-in-out infinite; }
html:not(.sk-shide) .shide { clip-path: polygon(50% 0, 100% 14%, 40% 28%, 100% 42%, 38% 56%, 100% 70%, 44% 84%, 70% 100%, 0 78%, 56% 62%, 0 48%, 60% 32%, 0 18%); }
@keyframes shideSway { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }
.fd { position: relative; width: 40px; height: 56px; margin-top: 4px; padding: 0; background: none; border: 0; pointer-events: auto; transform-origin: 50% -5px; transition: transform 0.2s; }
.fd::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1.5px; height: 8px; margin-left: -0.75px; background: #8a7f5e; }
.fd-p { position: absolute; inset: 0; background: var(--ik-fuda, linear-gradient(180deg, #f6f3ea, #e5e0d1)) 0 0/100% 100% no-repeat; display: flex; flex-direction: column; align-items: center; padding-top: 11px; color: var(--ink); }
html:not(.sk-fuda) .fd-p { clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 72% 93%, 52% 100%, 32% 94%, 14% 100%, 0 93%); box-shadow: inset 0 0 0 1px rgba(11, 11, 13, 0.18); padding-top: 4px; }
.fd:hover { animation: fdSwing 0.9s ease-in-out infinite; z-index: 3; }
@keyframes fdSwing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } }
.fd-k { font: normal 19px/1 var(--font-k); color: var(--ink); }
.fd-ln { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 2px; }
.fd-i { width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; }
.fd-i .ico { width: 12px; height: 12px; filter: contrast(1.1) saturate(0.9); }
.fd-key { font: 800 9px/1 var(--font-n); color: #5b5851; letter-spacing: 0.04em; }
.fd.on .fd-p { background-image: var(--ik-fuda-red, linear-gradient(180deg, #d9304a, var(--blood))); }
html:not(.sk-fuda_red) .fd.on .fd-p { background: var(--blood); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.fd.on .fd-k, .fd.on .fd-key { color: #fff; } .fd.on .fd-i .ico { filter: brightness(0) invert(1); }
.fd.on { animation: stampIn 0.35s ease-out both; }
.fd-b { position: absolute; right: -5px; top: -3px; min-width: 17px; height: 17px; padding: 0 3px; font: 800 10px/17px var(--font-n); text-align: center; color: #fff; font-style: normal; z-index: 3; isolation: isolate; }
.fd-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blood); border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.fd-n { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); padding: 1px 7px; font: 700 10.5px/15px var(--font-b); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: #fff; background: rgba(11, 11, 13, 0.92); border: 1px solid var(--ink-line2); opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 4; }
.fd:hover .fd-n { opacity: 1; }
.shime-bundle { display: none; }

/* ---------- alvo: moldura que muda com o tipo (regiões do contrato: olho esquerdo = ícone, direito = nível, painel escuro = texto) ---------- */
.h-target { position: relative; width: 340px; height: 64px; pointer-events: auto; margin-top: 0; animation: tgIn 0.25s ease-out; }
@keyframes tgIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tg-plate { position: absolute; inset: 0; background: var(--ik-mask, none) 0 0/340px 64px no-repeat; }
.t-elite .tg-plate { background-image: var(--ik-mask-elite, var(--ik-mask, none)); } .t-boss .tg-plate { background-image: var(--ik-mask-boss, var(--ik-mask, none)); }
.t-shinigami .tg-plate { background-image: var(--ik-frame-shinigami, var(--ik-mask, none)); } .t-quincy .tg-plate { background-image: var(--ik-frame-quincy, var(--ik-mask, none)); } .t-arrancar .tg-plate { background-image: var(--ik-frame-arrancar, var(--ik-mask, none)); }
/* reserva em CSS (sem a pele): placa de osso com recortes e painel escuro */
html:not(.sk-mask_frame) .tg-plate { background: var(--bone); clip-path: polygon(0 24%, 2.2% 6%, 5% 14%, 9% 0, 15% 9%, 22% 2%, 31% 10%, 40% 0, 52% 8%, 63% 1%, 73% 9%, 82% 0, 90% 8%, 95% 2%, 98% 14%, 100% 30%, 99% 62%, 100% 82%, 96% 92%, 92% 100%, 84% 94%, 74% 100%, 62% 95%, 50% 100%, 38% 94%, 27% 100%, 16% 93%, 8% 100%, 3% 90%, 0 74%); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.7)); }
html:not(.sk-mask_frame) .tg-plate::after { content: ""; position: absolute; left: 96px; top: 8px; right: 14px; bottom: 8px; background: #0b0b0d; clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 100%, 2% 94%, 0 100%); }
html:not(.sk-mask_frame) .t-shinigami .tg-plate { background: #0b0b0d; box-shadow: inset 0 0 0 1px rgba(242, 239, 230, 0.8); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
html:not(.sk-mask_frame) .t-quincy .tg-plate { background: #f6f7f9; box-shadow: inset 0 0 0 2px rgba(94, 200, 255, 0.85); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
html:not(.sk-mask_frame) .t-arrancar .tg-plate { background: #efe9dc; box-shadow: inset 0 0 0 2px rgba(79, 190, 170, 0.8); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
html:not(.sk-mask_frame) .t-fullbringer .tg-plate { background: #14101c; box-shadow: inset 0 0 0 1px #8a5cd6, inset 0 0 0 3px #0b0b0d, inset 0 0 0 4px rgba(138, 92, 214, 0.6); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
html:not(.sk-mask_frame) .t-elite .tg-plate { background: linear-gradient(var(--blood), var(--blood)) 22px 0/3px 20px no-repeat, linear-gradient(var(--blood), var(--blood)) 62px 0/3px 12px no-repeat, var(--bone); }
html:not(.sk-mask_frame) .t-boss .tg-plate { background: linear-gradient(var(--blood), var(--blood)) 14px 0/4px 30px no-repeat, linear-gradient(var(--blood), var(--blood)) 40px 0/3px 20px no-repeat, linear-gradient(var(--blood), var(--blood)) 70px 0/4px 26px no-repeat, var(--bone); }
html.sk-mask_frame .t-fullbringer .tg-plate { background-image: var(--ik-frame-shinigami, var(--ik-mask)); filter: hue-rotate(250deg) saturate(1.8); }
.t-boss { filter: drop-shadow(0 0 6px rgba(200, 16, 46, 0.75)); }
.tg-eye { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.tg-port { left: 13px; top: 13px; width: 34px; height: 38px; }
.tg-port canvas { display: block; width: 34px; height: 38px; }
html:not(.sk-mask_frame) .tg-port { left: 12px; top: 10px; width: 36px; height: 42px; border-radius: 48%; background: #0b0b0d; }
.tg-lv { left: 55px; top: 18px; width: 24px; height: 28px; flex-direction: column; line-height: 1; color: #fff; font-family: var(--font-h); }
.tg-lv::before { content: "NV"; font: 700 6.5px var(--font-b); letter-spacing: 0.1em; color: #b9b5aa; margin-bottom: 0; }
.tg-lv b { font: 800 14px/1 var(--font-h); text-shadow: 0 1px 0 #000; }
html:not(.sk-mask_frame) .tg-lv { left: 56px; top: 14px; width: 28px; height: 34px; border-radius: 50%; background: #0b0b0d; }
.tg-txt { position: absolute; left: 100px; top: 10px; width: 222px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 0; z-index: 1; }
.tg-name { font: 800 14px/1.1 var(--font-h); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; text-shadow: 0 1px 0 #000; }
.tg-sub { font: 700 9.5px/1.15 var(--font-b); color: #b9b5aa; min-height: 11px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.tg-hp { height: 12px; margin-top: 1px; } .tg-hp .bb-t { font-size: 9.5px; }
.ht-buffs { display: flex; gap: 3px; position: absolute; left: 100px; bottom: -17px; } .ht-buffs .bf { width: 16px; height: 16px; } .ht-buffs .bf .ico { width: 11px; height: 11px; }
/* incenso (cronômetro de chefe): peças da pele, o JS encurta a haste (--inc) */
.tg-inc { position: absolute; right: -16px; top: -12px; width: 16px; height: 76px; pointer-events: none; transform: scale(1.2); transform-origin: 50% 100%; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 4px rgba(0, 0, 0, 0.8)); }
.inc-b { position: absolute; left: 0; bottom: 0; width: 16px; height: 11px; background: var(--ik-incense, none) 0 -53px/16px 64px no-repeat; }
html:not(.sk-incense) .inc-b { background: #2a2a30; border: 1px solid var(--ink-line2); border-radius: 2px 2px 5px 5px; }
.inc-s { position: absolute; left: 6px; bottom: 9px; width: 4px; height: var(--inc, 56px); background: var(--ik-incense-stick, linear-gradient(90deg, #cfc7b0, #9c9480)) 0 0/4px 40px repeat-y; transition: height 0.4s linear; }
.inc-e { position: absolute; left: 0; bottom: calc(9px + var(--inc, 56px) - 8px); width: 16px; height: 16px; background: var(--ik-incense-ember, radial-gradient(circle, #ff5a3c 0 3px, rgba(255, 90, 60, 0.4) 5px, transparent 8px)) 0 0/16px 16px no-repeat; animation: ember 0.7s ease-in-out infinite; transition: bottom 0.4s linear; }
@keyframes ember { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.inc-smoke { position: absolute; left: 4px; bottom: calc(14px + var(--inc, 56px)); width: 8px; height: 26px; background: radial-gradient(ellipse at 50% 100%, rgba(242, 239, 230, 0.55), rgba(242, 239, 230, 0) 70%); filter: blur(1.5px); animation: smokeUp 2.2s ease-out infinite; transition: bottom 0.4s linear; }
@keyframes smokeUp { 0% { transform: translate(0, 4px) scaleX(0.7); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: translate(5px, -22px) scaleX(1.8); opacity: 0; } }
/* aviso de golpe */
.h-warn { position: relative; width: 300px; padding: 2px 16px 0; text-align: center; pointer-events: none; margin-top: 3px; animation: tgIn 0.2s ease-out; }
.h-warn::before { content: ""; position: absolute; inset: 0; background: var(--blood); -webkit-mask: var(--ik-stroke-2, none) 0 0/100% 100% no-repeat; mask: var(--ik-stroke-2, none) 0 0/100% 100% no-repeat; clip-path: polygon(0 20%, 3% 0, 96% 8%, 100% 30%, 98% 88%, 94% 100%, 4% 94%, 0 70%); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)); }
.hw-n { position: relative; font: 800 13px/21px var(--font-h); letter-spacing: 0.08em; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); animation: btnPulse 0.7s infinite; padding-top: 1px; }
.hw-bar { position: relative; height: 3px; margin: 1px 4px 4px; background: rgba(0, 0, 0, 0.45); } .hw-bar i { display: block; height: 100%; width: 0; background: #fff; }

/* ---------- Konkeitai: minimapa + alertas (canto superior direito) ----------
 * Corpo da pele (phone_body 190×330, 9-slice vertical 46/104) esticado +40 px no miolo => 190×370.
 * Regiões (contrato da pele, já com o +40): tela [10,46,170,190] · teclas [10,238,170,24] · dobradiça y=266 · baia de alertas [11,282,168,64]. */
.phone { position: absolute; right: 8px; top: 12px; width: 190px; height: 370px; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.7)); }
.ph-body { position: absolute; inset: 0; border-style: solid; border-color: transparent; border-width: 46px 0 104px 0; border-image: var(--ik-phone-body) 13.9394% 0 31.5152% 0 fill / 46px 0 104px 0 stretch; }
html:not(.sk-phone_body) .ph-body { border: 1px solid rgba(242, 239, 230, 0.7); border-radius: 14px; background: linear-gradient(180deg, #1d1d22, #0e0e11 70%); }
html:not(.sk-phone_body) .ph-body::after { content: ""; position: absolute; left: 0; right: 0; top: 266px; height: 8px; background: repeating-linear-gradient(90deg, #1a1a1f 0 5px, #2b2b31 5px 7px); border-top: 1px solid rgba(242, 239, 230, 0.4); border-bottom: 1px solid rgba(242, 239, 230, 0.4); }
.ph-ant { position: absolute; right: 24px; top: -13px; width: 7px; height: 20px; background: linear-gradient(90deg, #2d2d33, #0b0b0d); border: 1px solid rgba(242, 239, 230, 0.65); border-radius: 3px 3px 0 0; display: none; }
html:not(.sk-phone_body) .ph-ant { display: block; }
.ph-ant::after { content: ""; position: absolute; left: 1px; top: -5px; width: 3px; height: 3px; border-radius: 50%; background: var(--blood-hi); box-shadow: 0 0 6px 2px rgba(255, 74, 99, 0.85); animation: ember 1.4s infinite; }
.ph-lcd { position: absolute; left: 10px; top: 46px; width: 170px; height: 190px; padding: 5px; background: #0b161b; overflow: hidden; pointer-events: auto; border-radius: 7px; display: flex; flex-direction: column; }
.ph-lcd::after { content: ""; position: absolute; inset: 0; background: var(--ik-phone-screen, none) 0 0/100% 100% no-repeat; pointer-events: none; z-index: 3; }
html:not(.sk-phone_screen) .ph-lcd { box-shadow: inset 0 0 0 2px #050607, inset 0 0 14px rgba(94, 200, 255, 0.12); }
.ph-stat { display: flex; align-items: center; gap: 4px; padding: 1px 4px; background: #0f2530; color: #bfe6f5; font: 700 9.5px/12px var(--font-n); border-bottom: 1px solid rgba(94, 200, 255, 0.22); }
.ph-sig { display: inline-flex; align-items: flex-end; gap: 1px; height: 9px; flex: none; } .ph-sig i { width: 2px; background: #8fd6f2; } .ph-sig i:nth-child(1) { height: 3px; } .ph-sig i:nth-child(2) { height: 5px; } .ph-sig i:nth-child(3) { height: 7px; } .ph-sig i:nth-child(4) { height: 9px; }
.ph-ch { margin-left: 1px; font-weight: 700; color: #8fd6f2; letter-spacing: 0.02em; white-space: nowrap; }
.ph-zone { margin-left: auto; padding: 0 5px; font: 800 8px/12px var(--font-b); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--blood); white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%, 0 70%); }
.ph-zone .zs { display: none; font: inherit; } .ph-zone .zl { font: inherit; }
.ph-zone.zone-safe { background: #1e5b41; color: #c8ffe0; } .ph-zone.zone-pvp { background: var(--blood-dark); }
.ph-name { display: flex; align-items: baseline; gap: 5px; padding: 2px 5px 1px; background: #0d1d25; border-bottom: 1px solid rgba(94, 200, 255, 0.16); white-space: nowrap; overflow: hidden; }
.ph-zk { font: normal 14px/1 var(--font-k); color: #e8f7ff; flex: none; letter-spacing: 0; }
.hm-name { font: 700 11px/1.2 var(--font-h); color: #cfeefa; overflow: hidden; text-overflow: ellipsis; }
.ph-lcd > * { flex: none; }
.ph-map { position: relative; display: flex; justify-content: center; padding: 2px 0; background: #07161c; }
.ph-map canvas { display: block; width: 130px; height: 130px; image-rendering: pixelated; filter: saturate(0.55) contrast(1.08) brightness(0.96) hue-rotate(-14deg); }
.ph-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(120, 210, 235, 0.14), rgba(40, 110, 150, 0.1)); }
.ph-xy { display: flex; justify-content: space-between; padding: 1px 5px 2px; font: 700 9.5px var(--font-n); color: #8fd6f2; background: #0a1a21; letter-spacing: 0.04em; margin-top: auto; }
.ph-keys { position: absolute; left: 10px; top: 238px; width: 170px; height: 24px; display: flex; gap: 8px; align-items: center; justify-content: center; pointer-events: auto; }
.hm-b { width: 46px; height: 20px; padding: 0; border: 0; background: linear-gradient(180deg, #34343c, #1c1c22); box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.18); border-radius: 10px; font: 800 13px/20px var(--font-b); color: var(--paper); transition: transform 0.08s; }
.hm-b:hover { background: linear-gradient(180deg, #4a4a54, #2a2a32); color: #fff; } .hm-b:active { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
.hm-b.map { font: normal 14px/20px var(--font-k); color: #ff8a9b; }
.ph-alerts { position: absolute; left: 11px; top: 282px; width: 168px; height: 64px; padding: 2px 3px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; overflow-x: hidden; pointer-events: auto; border-radius: 3px; }
html:not(.sk-phone_body) .ph-alerts { background: #0b0b0d; border: 1px solid rgba(242, 239, 230, 0.4); }
.ev-none { font: 600 10px/16px var(--font-b); color: var(--paper-dk); text-align: center; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 18px; }
.ev { display: flex; align-items: center; gap: 4px; padding: 0 3px; min-height: 15px; cursor: pointer; background: rgba(242, 239, 230, 0.06); border-left: 2px solid var(--ink-line2); flex: none; }
.ev:hover { background: rgba(242, 239, 230, 0.14); }
.ev-ic { flex: none; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; font: 800 11px var(--font-n); color: var(--paper); }
.ev-ic .glyph { font: 800 11px var(--font-n); color: var(--paper); } .ev-ic .ico { width: 13px; height: 13px; }
.ev-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px; line-height: 1.1; overflow: hidden; }
.ev-t b { flex: 0 1 auto; min-width: 0; font: 700 10px var(--font-b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.ev-t small { flex: none; font: 500 9px var(--font-b); color: var(--paper-dim); white-space: nowrap; }
.ev-wb.live { border-left-color: var(--blood-hi); background: rgba(200, 16, 46, 0.2); } .ev-wb .ev-ic .glyph { color: var(--blood-hi); }
.ev-boss.ready { border-left-color: var(--blood-hi); background: rgba(200, 16, 46, 0.16); animation: nodePulse 1.4s infinite; }
.ev-b { flex: none; min-height: 14px; padding: 0 5px; font: 800 8.5px/14px var(--font-b); letter-spacing: 0.04em; text-transform: uppercase; background: var(--blood); color: #fff; border: 0; clip-path: polygon(0 10%, 100% 0, 98% 100%, 2% 92%); }
.ev-b:hover { background: var(--blood-hi); }
.evrow { display: flex; flex-direction: column; gap: 1px; padding: 5px 4px; border-bottom: 1px solid var(--ink-line); } .evrow.today { background: rgba(94, 200, 255, 0.08); }
.h-evtoggle { display: none; }

/* ---------- Borboletas do Limbo: chat ---------- */
.h-chat { position: absolute; left: 8px; top: 8px; width: 380px; height: 170px; display: flex; flex-direction: column; pointer-events: none; }
.ch-peek { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; padding: 4px 0 0 2px; overflow: hidden; cursor: pointer; pointer-events: auto; -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%); mask-image: linear-gradient(90deg, #000 62%, transparent 100%); }
.pk { display: flex; gap: 6px; align-items: flex-start; font: 500 12.5px/1.28 var(--font-b); color: var(--paper); text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 3px #000; transition: opacity 1.2s; }
.pk.new { animation: flyIn 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes flyIn { 0% { opacity: 0; transform: translate(-46px, 14px) scale(0.8); } 55% { transform: translate(6px, -4px) scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
.pk.old { opacity: 0.7; } .pk.older { opacity: 0.42; } .pk.oldest { opacity: 0.22; }
.pk-bf { flex: none; width: 22px; height: 18px; margin-top: 1px; background: var(--ik-butterfly, none) center/contain no-repeat; filter: drop-shadow(0 1px 2px #000); animation: bfFrames 0.5s steps(1) infinite; }
@keyframes bfFrames { 0% { background-image: var(--ik-butterfly, none); } 50% { background-image: var(--ik-butterfly-2, var(--ik-butterfly, none)); } }
.pk-bf.sys { filter: drop-shadow(0 1px 2px #000) hue-rotate(190deg) saturate(2); }
@keyframes flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } }
.pk-m { min-width: 0; overflow-wrap: anywhere; }
.pk-m b { font-weight: 700; } .pk .tg { color: var(--paper-dim); font-size: 10.5px; margin-right: 2px; }
.ch-peek .empty-p { color: var(--paper-dk); font-size: 12px; text-shadow: 0 1px 2px #000; }
.ch-panel { display: none; flex-direction: column; position: relative; flex: 1; min-height: 0; background: rgba(11, 11, 13, 0.97); border: 1px solid rgba(242, 239, 230, 0.55); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7); clip-path: var(--edge-cut); pointer-events: auto; }
.ch-panel::before { content: ""; position: absolute; inset: 0; background: var(--ik-grain, none) 0 0/128px 128px; opacity: 0.6; pointer-events: none; }
.h-chat.open { height: var(--chat-h, 292px); z-index: 6; }
.h-chat.open .ch-peek { display: none; } .h-chat.open .ch-panel { display: flex; }
.ch-head { position: relative; display: flex; align-items: center; gap: 2px; padding: 5px 6px 4px; border-bottom: 1px solid var(--ink-line); }
.ch-tabs { display: flex; flex: 1; min-width: 0; gap: 3px; }
.ch-tab { position: relative; width: 31px; height: 31px; padding: 0; background: #0b0b0d; border: 1px solid rgba(242, 239, 230, 0.4); color: var(--paper); font: normal 17px/29px var(--font-k); text-align: center; transition: transform 0.1s; }
.ch-tab:hover { background: #202026; transform: translateY(-1px); }
.ch-tab.on { background: var(--blood); border-color: var(--blood); color: #fff; }
.ch-tab .dot { display: none; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; background: var(--blood-hi); border-radius: 50%; box-shadow: 0 0 0 1.5px #0b0b0d; }
.ch-tab.new .dot { display: block; }
.ch-tn { margin-left: 6px; font: 800 9.5px var(--font-b); letter-spacing: 0.2em; color: var(--paper-dim); text-transform: uppercase; white-space: nowrap; }
.ch-min { flex: none; margin-left: auto; width: 26px; height: 26px; padding: 0; background: none; border: 0; color: var(--paper); font-size: 14px; }
.ch-body { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ch-log { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px; font-size: 12.5px; line-height: 1.3; }
.msg { padding: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.msg .ts { color: var(--paper-dk); font: 500 10px var(--font-n); margin-right: 3px; }
.msg .chtag { color: var(--paper-dim); font-size: 11px; margin-left: 1px; }
.msg .sep { color: var(--paper-dk); }
.msg.ch-system { color: #aebcc8; } .msg.ch-trade { color: #ece2c6; } .msg.ch-faction { color: #b9e6a0; } .msg.ch-map { color: #f0f6ff; }
.msg.log.good { color: var(--good); } .msg.log.bad { color: var(--bad); } .msg.log.boss { color: #fff; font-weight: 700; } .msg.log.muted { color: var(--paper-dk); } .msg.log.loot { color: #d6e6ff; }
.c-xp { color: var(--purple); } .c-kan { color: #ffe08a; } .c-lv { color: #fff; }
.ch-form { display: flex; gap: 5px; padding: 4px 6px 7px; border-top: 1px solid var(--ink-line); }
.ch-form input { flex: 1; min-width: 0; min-height: 26px; padding: 2px 6px 5px; font-size: 13px; background: var(--ik-underline, none) 0 100%/100% 6px no-repeat; border: 0; border-bottom: 1px solid rgba(242, 239, 230, 0.25); }
.ch-form input:focus { background-color: rgba(255, 255, 255, 0.05); border-bottom-color: var(--blood); box-shadow: 0 2px 0 var(--blood); }
.ch-send { min-height: 26px; padding: 0 9px; font: 800 10px var(--font-b); letter-spacing: 0.1em; text-transform: uppercase; background: var(--blood); color: #fff; border: 0; clip-path: polygon(0 8%, 100% 0, 98% 100%, 3% 94%); }
.ch-bubble { display: none; position: relative; width: 46px; height: 42px; padding: 0; align-items: center; justify-content: center; pointer-events: auto; background: rgba(11, 11, 13, 0.85); border: 1px solid rgba(242, 239, 230, 0.55); }
.ch-bubble .pk-bf { width: 26px; height: 22px; margin: 0; }
.ch-cnt { position: absolute; right: -5px; top: -6px; min-width: 17px; height: 17px; padding: 0 3px; color: #fff; font: 800 10px/17px var(--font-n); font-style: normal; text-align: center; isolation: isolate; }
.ch-cnt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blood); border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }

/* ---------- joystick ---------- */
.h-joy { position: absolute; left: 14px; bottom: 76px; width: 112px; height: 112px; border-radius: 50%; background: rgba(11, 11, 13, 0.45); border: 2px solid rgba(242, 239, 230, 0.5); pointer-events: auto; touch-action: none; }
.hj-knob { position: absolute; left: 36px; top: 36px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6f3ea, #bdb8aa 60%, #6a665c); border: 2px solid var(--ink); }

/* ---------- cartão de título de mapa + banners + morte ---------- */
.h-announce { position: absolute; left: 3%; top: 38%; width: min(560px, 90%); height: 188px; pointer-events: none; transform: rotate(-1.2deg); }
.an-brush { position: absolute; inset: 0; background: var(--paper); -webkit-mask: var(--ik-stroke-1, none) 0 0/100% 100% no-repeat; mask: var(--ik-stroke-1, none) 0 0/100% 100% no-repeat; clip-path: polygon(0 12%, 1.4% 3%, 5% 8%, 30% 0, 62% 6%, 96% 0, 100% 14%, 98.5% 52%, 100% 90%, 95% 100%, 62% 94%, 31% 100%, 4% 95%, 0 86%, 1.2% 50%); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.7)); }
.an-in { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 14px 30px 14px 34px; color: var(--ink); }
.an-k { flex: none; writing-mode: vertical-rl; text-orientation: upright; font: normal 64px/1.04 var(--font-k); color: #0b0b0d; letter-spacing: 0.02em; max-height: 160px; }
.an-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.an-name { font: 800 40px/1.05 var(--font-h); letter-spacing: 0.02em; color: #0b0b0d; }
.an-sub { font: 700 11.5px/1.3 var(--font-b); letter-spacing: 0.2em; text-transform: uppercase; color: #3b3a36; }
.an-stamp { position: absolute; right: 26px; bottom: 16px; padding: 3px 11px; font: 800 11px/1.2 var(--font-b); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blood); border: 2px solid var(--blood); transform: rotate(-6deg); opacity: 0; animation: stampHit 0.35s 0.9s ease-out both; }
.h-announce.in .an-brush { animation: wipeIn 0.75s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.h-announce.in .an-in { animation: fadeIn 0.5s 0.35s both; }
.h-announce.out { animation: annOut 0.7s ease-in both; }
@keyframes wipeIn { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 12%, 1.4% 3%, 5% 8%, 30% 0, 62% 6%, 96% 0, 100% 14%, 98.5% 52%, 100% 90%, 95% 100%, 62% 94%, 31% 100%, 4% 95%, 0 86%, 1.2% 50%); } }
@keyframes annOut { from { opacity: 1; } to { opacity: 0; transform: translateX(14px) rotate(-1.2deg); } }
@keyframes stampHit { 0% { opacity: 0; transform: scale(1.7) rotate(-14deg); } 70% { opacity: 1; transform: scale(0.94) rotate(-5deg); } 100% { opacity: 0.95; transform: scale(1) rotate(-6deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.h-banners { position: absolute; left: 0; right: 0; top: 24%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.bn { position: relative; width: min(760px, 96%); height: 190px; display: flex; align-items: center; justify-content: center; text-align: center; animation: bnIn 0.5s ease-out both; }
.bn.out { animation: bnOut 0.6s ease-in both; }
.bn-splash { position: absolute; inset: -30px -30px; background: var(--ik-splash-1, radial-gradient(circle, rgba(200, 16, 46, 0.95), rgba(200, 16, 46, 0) 66%)) 50% 50%/auto 250px no-repeat, var(--ik-splash-2, none) 4% 58%/auto 120px no-repeat, var(--ik-splash-4, none) 97% 40%/auto 130px no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); }
.bn-splash::before { content: ""; position: absolute; left: 3%; right: 3%; top: 50%; height: 84px; margin-top: -42px; background: var(--blood); -webkit-mask: var(--ik-stroke-1, none) 0 0/100% 100% no-repeat; mask: var(--ik-stroke-1, none) 0 0/100% 100% no-repeat; transform: rotate(-1.4deg); clip-path: polygon(0 20%, 3% 0, 97% 8%, 100% 30%, 98% 88%, 94% 100%, 4% 94%, 0 70%); }
.bn.boss .bn-splash { background: var(--ik-splash-4, radial-gradient(circle, rgba(125, 10, 28, 0.95), rgba(125, 10, 28, 0) 66%)) 50% 50%/auto 250px no-repeat, var(--ik-splash-1, none) 4% 58%/auto 120px no-repeat, var(--ik-splash-2, none) 97% 40%/auto 130px no-repeat; }
.bn.boss .bn-splash::before { background: var(--blood-dark); }
.bn.epic .bn-splash { filter: hue-rotate(250deg) saturate(1.2) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); }
.bn.bad .bn-splash { background: var(--ik-splash-3, none) 50% 50%/auto 250px no-repeat, var(--ik-splash-3, none) 4% 58%/auto 120px no-repeat, var(--ik-splash-3, none) 97% 40%/auto 130px no-repeat; }
.bn.bad .bn-splash::before { background: #0b0b0d; }
.bn-kj { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: normal 170px/1 var(--font-k); color: rgba(255, 255, 255, 0.24); pointer-events: none; white-space: nowrap; letter-spacing: 0.04em; }
.bn-x { position: relative; z-index: 1; }
.bn-t { font: 800 46px/1.1 var(--font-h); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.5); }
.bn-x { max-width: 88%; }
.bn-s { font: 700 15px var(--font-b); letter-spacing: 0.18em; color: #fff; text-transform: uppercase; text-shadow: 0 2px 4px #000, 0 0 8px #000; margin-top: 3px; }
@keyframes bnIn { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes bnOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-14px); } }
.death { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); animation: fadeIn 0.6s both; }
.dr-drips { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
.dr-d { position: absolute; top: -10px; width: var(--w, 26px); height: 0; background: linear-gradient(180deg, var(--blood-dark), var(--blood) 40%, #a50c25); border-radius: 0 0 50% 50% / 0 0 14px 14px; animation: drip var(--t, 2.6s) cubic-bezier(0.3, 0.6, 0.3, 1) var(--dl, 0s) forwards; }
.dr-d::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: calc(var(--w, 26px) * 1.15); height: 18px; margin-left: calc(var(--w, 26px) * -0.575); background: var(--blood); border-radius: 50%; }
@keyframes drip { to { height: var(--h, 40%); } }
.dr-band { position: absolute; left: 0; right: 0; top: -2px; height: 54px; background: var(--blood); clip-path: polygon(0 0, 100% 0, 100% 40%, 94% 80%, 88% 50%, 80% 100%, 72% 60%, 63% 90%, 52% 55%, 44% 100%, 34% 62%, 25% 88%, 16% 52%, 8% 78%, 0 46%); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4)); }
.dr-tx { position: absolute; left: 0; right: 0; top: 40%; text-align: center; }
.dr-t { font: 800 44px/1.1 var(--font-h); color: #fff; letter-spacing: 0.1em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.7), 0 0 18px rgba(200, 16, 46, 0.8); animation: bnIn 0.6s 0.4s ease-out both; }
.dr-s { margin-top: 8px; font: 700 15px var(--font-b); letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); text-shadow: 0 2px 4px #000; }
.dr-s b { font: 800 22px var(--font-h); color: #fff; padding: 0 4px; text-transform: none; }

/* ---------- toasts ---------- */
.toast { position: relative; display: flex; gap: 8px; align-items: center; padding: 6px 10px 6px 12px; background: rgba(11, 11, 13, 0.95); border-left: 5px solid var(--blood); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7); animation: toastIn 0.28s ease-out; pointer-events: auto; font-weight: 600; font-size: 13px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); }
.toast .ico { width: 22px; height: 22px; }
.toast .t-ic { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; }
.toast .t-ic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #2a2a31; border-radius: 50%; -webkit-mask: var(--ik-seal-round, none) center/100% 100% no-repeat; mask: var(--ik-seal-round, none) center/100% 100% no-repeat; }
.toast.good { border-left-color: var(--good); } .toast.bad { border-left-color: var(--blood-hi); } .toast.loot { border-left-color: var(--paper); } .toast.epic { border-left-color: var(--purple); background: linear-gradient(90deg, rgba(60, 30, 90, 0.95), rgba(11, 11, 13, 0.95)); }
.toast.info { border-left-color: var(--blood); }
.toast.out { opacity: 0; transform: translateX(30px); transition: all 0.4s; }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* =========================================================================
 * JANELAS (laca preta, borda de pincel, fileira de 15 selos no topo — sem menu lateral)
 * ========================================================================= */
.win-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 2, 3, 0.4); pointer-events: none; }
.win { position: relative; pointer-events: auto; width: min(1100px, calc(100% - 24px)); height: min(640px, calc(100% - 24px)); display: flex; isolation: isolate; box-shadow: 0 14px 60px rgba(0, 0, 0, 0.85); animation: winIn 0.34s cubic-bezier(0.3, 0.7, 0.2, 1) both; background: var(--ik-grain, none) 0 0/128px 128px, linear-gradient(180deg, #121216, #0b0b0d 38%, #0b0b0d); }
.win::after, .modal::after { content: ""; position: absolute; inset: 0; border: 14px solid transparent; border-image: var(--ik-frame) 25% / 14px stretch; pointer-events: none; z-index: 4; }
:root:not(.ik-ok) .win, :root:not(.ik-ok) .modal { outline: 2px solid rgba(242, 239, 230, 0.55); outline-offset: -7px; }
@keyframes winIn { from { clip-path: inset(0 100% 0 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.win-splash { position: absolute; left: -34px; top: -34px; width: 112px; height: 112px; background: var(--ik-splash-1, radial-gradient(circle, rgba(200, 16, 46, 0.95), rgba(200, 16, 46, 0) 66%)) center/100% 100% no-repeat; pointer-events: none; z-index: 5; }
.win-bgk { position: absolute; right: 8px; bottom: -34px; font: normal 270px/1 var(--font-k); color: rgba(242, 239, 230, 0.05); pointer-events: none; z-index: 0; white-space: nowrap; letter-spacing: 0; }
.win-in { position: relative; z-index: 1; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 16px 24px 14px; }
.win-seals { flex: none; display: flex; gap: 6px; padding: 4px 4px 20px 30px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.win-seals::-webkit-scrollbar { display: none; }
.ws { position: relative; flex: none; width: 36px; height: 36px; padding: 0; background: #0b0b0d; border: 1px solid rgba(242, 239, 230, 0.5); color: var(--paper); font: normal 20px/34px var(--font-k); text-align: center; isolation: isolate; transition: transform 0.12s, background 0.12s; }
.ws:hover { background: #26262d; transform: translateY(-2px) rotate(-1.5deg); }
.ws.on { border-color: transparent; color: #fff; background: transparent; animation: stampIn 0.32s ease-out both; }
.ws.on::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blood); -webkit-mask: var(--ik-seal-sq, none) center/100% 100% no-repeat; mask: var(--ik-seal-sq, none) center/100% 100% no-repeat; }
.ws-n { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font: 700 9.5px/1 var(--font-b); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--paper-dim); opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 6; background: rgba(11, 11, 13, 0.9); padding: 1px 3px; }
.ws:hover .ws-n { opacity: 1; color: #fff; } .ws.on .ws-n { opacity: 1; color: #fff; }
.wm-b { position: absolute; right: -6px; top: -6px; min-width: 16px; height: 16px; padding: 0 3px; color: #fff; font: 800 9.5px/16px var(--font-n); text-align: center; font-style: normal; isolation: isolate; z-index: 3; }
.wm-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blood); border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.win-head { display: flex; align-items: flex-end; gap: 12px; padding: 2px 4px 12px; flex: none; border-bottom: 1px solid var(--ink-line); }
.win-ttl { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; gap: 7px; }
.win-ttl h2 { font: 800 26px/1.1 var(--font-h); letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); display: inline-block; align-self: flex-start; }
.win-ttl span { font: 700 11px var(--font-b); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-sp { flex: 1; }
.win-key { font: 700 10.5px var(--font-b); letter-spacing: 0.1em; color: var(--paper-dk); text-transform: uppercase; padding-bottom: 4px; }
.win-x, .modal-x { position: relative; width: 34px; height: 34px; padding: 0; flex: none; background: none; border: 0; font: 700 15px/34px var(--font-b); color: #fff; transition: transform 0.12s; }
.win-x:hover, .modal-x:hover { transform: rotate(8deg) scale(1.1); }
.win-body { flex: 1; min-height: 0; display: flex; gap: 8px; padding-top: 10px; }
.win-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.win-main.swap { animation: swapIn 0.34s ease-out both; }
@keyframes swapIn { from { clip-path: inset(0 100% 0 0); opacity: 0.2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.panel { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 8px 14px 2px; }

/* sub-abas (ui.seg): versalete; a ativa ganha um traço de pincel vermelho por baixo */
.seg { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0 12px; border-bottom: 1px solid var(--ink-line); }
.seg-b { position: relative; padding: 5px 2px 9px; background: none; border: 0; font: 700 12px var(--font-b); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); transition: color 0.1s; }
.seg-b:hover { color: #fff; }
.seg-b.on { color: #fff; }
.seg-b.on::after { content: ""; position: absolute; left: -3px; right: -5px; bottom: 1px; height: 6px; background: var(--blood); -webkit-mask: var(--ik-underline, none) 0 50%/100% 100% no-repeat; mask: var(--ik-underline, none) 0 50%/100% 100% no-repeat; clip-path: polygon(0 40%, 3% 0, 20% 25%, 52% 5%, 84% 22%, 100% 0, 98% 70%, 90% 100%, 60% 80%, 28% 100%, 6% 78%); }
.btnrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.btnrow.wrap { gap: 6px 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 6px 0; }
.toolbar .lbl { margin: 0 4px 0 0; }
.toolbar .seg { margin: 0; flex: 1; border: 0; }
.row { display: flex; gap: 6px; align-items: center; }

/* ---------------- conteúdo das janelas ---------------- */
.sect { position: relative; background: rgba(22, 22, 26, 0.7); border: 1px solid var(--ink-line); padding: 10px 14px 14px; margin: 0 0 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.sect > h3 { font: 800 15px var(--font-h); letter-spacing: 0.08em; color: #fff; padding: 1px 0 7px; margin-bottom: 8px; border-bottom: 1px solid var(--ink-line); display: flex; align-items: baseline; gap: 10px; }
.sect > h3::before { content: ""; width: 20px; height: 7px; background: var(--blood); align-self: center; flex: none; clip-path: polygon(0 40%, 8% 0, 40% 25%, 78% 5%, 100% 0, 96% 80%, 80% 100%, 44% 78%, 14% 100%); }
.sect > h3 .r { margin-left: auto; font: 500 12.5px var(--font-b); color: var(--paper-dim); letter-spacing: 0; }
.empty { padding: 22px 14px; text-align: center; color: var(--paper-dim); border: 1px dashed var(--ink-line2); background: rgba(255, 255, 255, 0.02); margin: 6px 0; }
.empty.warn { color: var(--warn); }
.topline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 7px 12px; background: rgba(242, 239, 230, 0.05); border-left: 3px solid var(--blood); margin-bottom: 10px; }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dotted rgba(242, 239, 230, 0.16); }
.kv span { color: var(--paper-dim); margin-right: auto; } .kv b { text-align: right; }
.kv .kj, .attr .kj { font: normal 15px/1 var(--font-k); color: var(--paper); width: 20px; text-align: center; flex: none; }
.kvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 26px; }
.kv-sep { grid-column: 1 / -1; height: 8px; }
.lore { font-style: italic; color: #d4d0c6; margin: 4px 0 8px; }
.plain { margin: 4px 0; padding-left: 18px; }
.costs { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 4px 0; }
.costchip, .money { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap; }
.money { color: var(--c, var(--paper)); } .money .ico { width: 18px; height: 18px; } .money .glyph { font: 700 13px var(--font-n); }
.costchip { padding: 1px 7px 1px 3px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--ink-line2); }
.costchip .ico { width: 20px; height: 20px; } .costchip.ok { color: var(--paper); } .costchip.no { color: var(--blood-hi); border-color: rgba(255, 74, 99, 0.5); }
.rewards { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; align-items: center; }
.mchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.mats { display: flex; flex-wrap: wrap; gap: 5px; }
.mlist .mrow { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-bottom: 1px dotted var(--ink-line); } .mlist .mn { flex: 1; }
.pips { display: flex; align-items: center; gap: 2px; margin-top: 3px; flex-wrap: wrap; }
.pip { width: 9px; height: 9px; background: #000; border: 1px solid var(--ink-line2); transform: rotate(45deg) scale(0.85); } .pip.on { background: var(--blood); border-color: #fff; }
.bar { position: relative; height: 15px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--ink-line2); overflow: hidden; margin: 3px 0; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px), linear-gradient(180deg, #e8334f, var(--blood) 55%, #8d0b21); transition: width 0.25s; clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%); }
.bar > span { position: relative; display: block; text-align: center; font: 700 11px/13px var(--font-b); text-shadow: 0 1px 2px #000; color: #fff; }
.bar.xp > i { background: linear-gradient(180deg, #f6f3ea, #b9b5a8); } .bar.xp > span { color: #fff; }
.bar.prog > i { background: linear-gradient(180deg, #a4e2ff, #4fb4ee 55%, #2672b4); }
.bar.ready > i, .bar.prog.ready > i { background: linear-gradient(180deg, #a8f0b6, #3fae58); }
.bar.boss > i { background: linear-gradient(180deg, #e0405c, #8a1428); }
.bar.mini { height: 8px; }

/* itens: célula / tooltip */
.cell { position: relative; width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; --rc: #777; background: var(--ink-2); border: 1px solid var(--rc); }
.cell::before { content: ""; position: absolute; right: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 1px #000; z-index: 2; }
.cell::after { content: ""; position: absolute; inset: 2px; box-shadow: inset 0 0 9px 1px var(--rc); opacity: 0.4; pointer-events: none; }
.cell.r0 { border-color: rgba(242, 239, 230, 0.28); } .cell.r0::after { opacity: 0.05; } .cell.r0::before { display: none; }
.cell .ico { width: 32px; height: 32px; position: relative; z-index: 1; }
.cell:hover:not(.empty):not(.static) { background: #2a2a31; }
.cell.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blood); }
.cell.empty::after, .cell.empty::before { display: none; } .cell.empty { opacity: 0.7; border-style: dashed; border-color: var(--ink-line2); }
.cell .ghost { opacity: 0.22; filter: grayscale(1); }
.cell.big { width: 60px; height: 60px; } .cell.big .ico { width: 40px; height: 40px; }
.cell .enh { position: absolute; right: 4px; bottom: 1px; font: 800 10px var(--font-n); color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; z-index: 2; }
.cell .lk { position: absolute; left: 4px; top: 1px; font-size: 9px; z-index: 2; }
.cell .bdg { position: absolute; left: 4px; bottom: 1px; font: 800 9px var(--font-n); color: var(--reiatsu); text-shadow: 0 0 3px #000; z-index: 2; }
.invgrid { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 4px; margin: 6px 0; }
.eqrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; justify-items: center; }
.eqslot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.eqlbl { font: 700 10px var(--font-b); color: var(--paper-dim); letter-spacing: 0.14em; text-transform: uppercase; }
.detail { display: flex; flex-direction: column; gap: 6px; }
.itip { min-width: 190px; }
.itip-h { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.itip-n { font: 800 15px/1.1 var(--font-h); letter-spacing: 0.03em; }
.itip-s { font-size: 12px; color: var(--paper-dim); }
.itip-stats .st { padding: 1px 0; }
.st.imp b { color: #fff; } .st.aff { color: #9bd3ff; } .st.uni { color: var(--gold); } .st.muted { color: var(--paper-dim); font-size: 12px; } .st.bad { color: var(--bad); }
.itip-desc { font-style: italic; color: #cfcbc0; margin: 4px 0; font-size: 13px; }
.itip-val { color: var(--paper-dim); font-size: 12px; margin-top: 4px; border-top: 1px solid var(--ink-line); padding-top: 3px; } .itip-val b { color: #fff; }
.itip-cmp { margin-top: 5px; border-top: 1px solid var(--ink-line); padding-top: 3px; }
.cmp-h { font: 700 10.5px var(--font-b); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dk); }
.cmp { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .cmp.up { color: var(--good); } .cmp.dn { color: var(--blood-hi); }
.itip-eq { margin-top: 3px; font-size: 12px; color: var(--paper-dim); }
.enh { color: #fff; font-weight: 800; }
.xp-bar-tip { color: var(--paper-dim); }

/* ---------------- Personagem: Registro de Alma ---------------- */
.pd { display: grid; grid-template-columns: 116px minmax(250px, 1fr) 116px 296px; gap: 6px; align-items: start; }
.pd-col { display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 38px; position: relative; z-index: 2; }
.pd-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; width: 116px; }
.pd-slot.l::after, .pd-slot.r::after { content: ""; position: absolute; top: 40px; width: 100px; height: 4px; background: rgba(242, 239, 230, 0.7); clip-path: polygon(0 40%, 12% 0, 38% 30%, 70% 6%, 100% 40%, 76% 100%, 44% 70%, 16% 100%); pointer-events: none; z-index: 0; }
.pd-slot.l::after { left: calc(50% + 32px); } .pd-slot.r::after { right: calc(50% + 32px); transform: scaleX(-1); }
.pd-slot .cell { z-index: 1; }
.pd-itn { font-size: 11px; line-height: 1.1; max-width: 112px; }
.pd-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; position: relative; z-index: 1; }
.pd-name { font: 800 22px var(--font-h); letter-spacing: 0.05em; text-shadow: 0 2px 0 #000; display: flex; align-items: baseline; gap: 8px; }
.pd-ck { font: normal 18px var(--font-k); color: var(--paper); font-style: normal; }
.pd-cls { font: 700 11px var(--font-b); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); }
.pd-cv { width: 100%; max-width: 330px; height: auto; aspect-ratio: 320 / 340; }
.pd-dir { display: flex; align-items: center; gap: 8px; font: 700 11px var(--font-b); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); }
.pd-dir .btn { min-height: 26px; width: 30px; padding: 0; font-size: 10px; }
.pd-stats { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 10px; background: rgba(242, 239, 230, 0.05); border-left: 3px solid var(--blood); }
.pd-power { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; padding: 2px 0 6px; border-bottom: 1px solid var(--ink-line); margin-bottom: 4px; }
.pd-power span { font: 700 10.5px var(--font-b); letter-spacing: 0.3em; color: var(--paper-dim); } .pd-power span i { font: normal 16px var(--font-k); color: #fff; letter-spacing: 0; margin-right: 4px; }
.pd-power b { font: 800 40px/1.1 var(--font-h); color: #fff; text-shadow: 0 3px 0 var(--blood-dark), 0 0 16px rgba(200, 16, 46, 0.45); }
.pd-lv > span { font: 800 12px var(--font-h); letter-spacing: 0.08em; }
.pd-pts { display: flex; } .pd-hint { margin-top: 4px; }
.passive { margin-top: 4px; padding: 4px 8px; background: rgba(200, 16, 46, 0.09); border-left: 3px solid var(--blood); }
.portrait { max-width: 100%; height: auto; image-rendering: pixelated; background: radial-gradient(circle at 50% 70%, #26262d, #0d0d10); border: 1px solid var(--ink-line2); flex: none; }
.portrait.dim { filter: grayscale(1) brightness(0.35); }
.attr { display: grid; grid-template-columns: 1.1fr 1.6fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dotted var(--ink-line); }
.attr-n { display: flex; align-items: baseline; gap: 4px; }
.attr-v b { font-size: 17px; } .attr-b { display: flex; gap: 3px; }
.attr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 4px; }
.forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.form-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; border: 1px solid var(--ink-line); background: var(--ink-2); text-align: center; }
.form-card.cur { border-color: var(--blood); box-shadow: inset 0 0 16px rgba(200, 16, 46, 0.2); }
.form-card.locked { opacity: 0.8; }
.ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 5px; }
.rank { display: flex; flex-direction: column; padding: 4px 8px; border: 1px solid var(--ink-line); background: var(--ink-2); opacity: 0.55; }
.rank.done { opacity: 0.85; } .rank.cur { opacity: 1; border-color: var(--blood); background: rgba(200, 16, 46, 0.12); }
.look > div { margin-bottom: 4px; }
.bd { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 6px; }
.bd-g { background: var(--ink-2); padding: 4px 8px; border: 1px solid var(--ink-line); }
.bd-g h4 { font-size: 12px; color: #fff; text-transform: uppercase; margin-bottom: 2px; }
.row-r { display: flex; justify-content: flex-end; margin-top: 6px; }
.titles { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.trow2 { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.trow2.cur { border-color: var(--blood); background: rgba(200, 16, 46, 0.1); } .trow2.lock { opacity: 0.6; }

/* técnicas e talentos */
.topline .money { font-size: 14px; }
.skrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px; margin-bottom: 6px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.skrow.locked { opacity: 0.55; }
.sk-ic .ico { width: 44px; height: 44px; }
.sk-t { font: 800 15px var(--font-h); letter-spacing: 0.03em; }
.sk-stats { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--paper-dim); } .sk-stats b { color: var(--paper); }
.sk-act { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 100px; }
.trees { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.tree { background: var(--ink-2); border: 1px solid var(--ink-line); padding: 6px; }
.tree-h { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--ink-line); }
.tree-h > div { flex: 1; min-width: 0; line-height: 1.15; } .tree-h b { font: 800 14px var(--font-h); text-transform: uppercase; letter-spacing: 0.05em; color: #fff; }
.tree-sp { font: 800 18px var(--font-n); color: #fff; }
.tier { margin-bottom: 6px; } .tier.locked { opacity: 0.5; }
.tier-l { font: 700 10px var(--font-b); letter-spacing: 0.14em; color: var(--paper-dk); text-transform: uppercase; }
.tier-n { display: flex; flex-wrap: wrap; gap: 4px; }
.tnode { position: relative; flex: 1 1 82px; min-width: 82px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px 3px; background: var(--ink-3); border: 2px solid var(--ink-line2); }
.tnode .ico { width: 28px; height: 28px; } .tnode .tn { font: 700 11.5px/1.1 var(--font-b); text-align: center; color: var(--paper); }
.tnode .tr { font: 700 11px var(--font-n); color: var(--paper-dim); }
.tnode.avail { border-color: var(--good); animation: nodePulse 1.4s infinite; }
.tnode.max { border-color: var(--blood); background: rgba(200, 16, 46, 0.1); } .tnode.max .tr { color: #fff; }
.tnode.locked { filter: grayscale(0.8); opacity: 0.55; }
@keyframes nodePulse { 0%, 100% { box-shadow: 0 0 0 rgba(200, 16, 46, 0); } 50% { box-shadow: 0 0 10px rgba(255, 74, 99, 0.7); } }

/* forja */
.forge-stage { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; position: relative; }
.forge-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; }
.forge-arrow { font: 800 18px var(--font-n); } .forge-arrow span { color: #fff; }
.forge-info { flex: 1; min-width: 200px; }
.rate { margin: 6px 0; } .rate-b { height: 10px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--ink-line2); margin-bottom: 2px; }
.rate-b i { display: block; height: 100%; background: var(--good); } .rate.mid .rate-b i { background: var(--warn); } .rate.lo .rate-b i { background: var(--blood-hi); }
.autoref { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.forge-stage.fx-ok .cell { animation: forgeOk 0.9s; } .forge-stage.fx-fail .cell { animation: forgeFail 0.7s; }
@keyframes forgeOk { 0% { transform: scale(1); } 25% { filter: drop-shadow(0 0 16px #fff) brightness(2); transform: scale(1.25) rotate(-3deg); } 100% { transform: scale(1); } }
@keyframes forgeFail { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-7px); filter: drop-shadow(0 0 10px #ff3c50); } 30% { transform: translateX(7px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }
.recipe { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px; margin-bottom: 6px; background: var(--ink-2); border: 1px solid var(--ink-line); align-items: center; }
.recipe.no { opacity: 0.8; } .rc-a { display: flex; flex-direction: column; gap: 4px; }

/* mercado / lojas */
.commod { display: flex; flex-direction: column; gap: 4px; }
.crow { display: grid; grid-template-columns: auto minmax(90px, 1.1fr) 120px minmax(90px, 0.9fr) auto; gap: 8px; align-items: center; padding: 6px 8px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.c-n, .c-p { display: flex; flex-direction: column; line-height: 1.15; } .c-p { align-items: flex-start; } .c-a { display: flex; flex-direction: column; gap: 3px; }
.spark { width: 120px; height: 32px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--ink-line); }
.llist { display: flex; flex-direction: column; gap: 4px; }
.lrow { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 5px 8px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.lrow.empty { color: var(--paper-dk); justify-content: center; display: flex; border-style: dashed; }
.l-n { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .l-p { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.listform { display: flex; gap: 14px; flex-wrap: wrap; } .listform > .itip { flex: 1; min-width: 200px; } .lf-b { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.shoplist { display: flex; flex-direction: column; gap: 4px; }
.shoprow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.shoprow.no { opacity: 0.7; } .sh-n { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .sh-p { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

/* missões */
.story .goal { padding: 6px 8px; background: rgba(94, 200, 255, 0.07); border-left: 3px solid var(--reiatsu); margin: 6px 0; }
.qcard { padding: 8px 10px; margin-bottom: 6px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.qcard.ready { border-color: var(--good); box-shadow: inset 0 0 14px rgba(123, 224, 143, 0.12); } .qcard.claimed { opacity: 0.6; }
.q-h { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; } .q-h b { font: 800 15px var(--font-h); letter-spacing: 0.03em; }
.q-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.login { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin: 8px 0; }
.lcard { padding: 6px; background: var(--ink-2); border: 1px solid var(--ink-line); text-align: center; position: relative; }
.lcard.cur { border-color: var(--blood); background: rgba(200, 16, 46, 0.12); animation: nodePulse 1.4s infinite; } .lcard.past { opacity: 0.55; }
.lcard .rewards { justify-content: center; } .ld { font: 800 13px var(--font-h); letter-spacing: 0.1em; color: #fff; text-transform: uppercase; }

/* social / mundo */
.sgrow { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--ink-2); border: 1px solid var(--ink-line); margin-bottom: 4px; }
.sgrow.cur { border-color: var(--blood); } .sg-n { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .sg-b { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.perk { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--ink-line); }
.pk-n { display: flex; flex-direction: column; line-height: 1.2; } .pk-b { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.opp { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; background: var(--ink-2); border: 1px solid var(--ink-line); margin-bottom: 4px; }
.op-i { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); border: 2px solid var(--ink-line2); }
.op-n, .op-p { display: flex; flex-direction: column; line-height: 1.2; }
.hist .hrow { display: flex; gap: 12px; padding: 2px 0; border-bottom: 1px dotted var(--ink-line); } .hrow b { min-width: 70px; } .hrow span:last-child { margin-left: auto; }
.fightlog { max-height: 220px; overflow-y: auto; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--ink-line); padding: 6px 8px; margin-top: 8px; font-size: 13px; }
.table .trow { display: grid; grid-template-columns: 40px 1fr 90px 40px 90px; gap: 6px; padding: 3px 8px; border-bottom: 1px solid rgba(242, 239, 230, 0.08); align-items: center; }
.table:not(.rank) .trow { grid-template-columns: 40px 1fr 100px; }
.trow.me { background: rgba(200, 16, 46, 0.16); border-left: 3px solid var(--blood); } .trow.th { color: var(--paper-dim); font: 700 11px var(--font-b); text-transform: uppercase; letter-spacing: 0.1em; }
.trow b { text-align: right; } .trow .tn { color: var(--paper-dim); font-weight: 700; } .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aslots { display: flex; gap: 8px; flex-wrap: wrap; }
.aslot { flex: 1 1 140px; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px; background: var(--ink-2); border: 2px dashed var(--ink-line2); text-align: center; }
.ghost-slot { color: var(--paper-dk); }
.acards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.acard { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.acard.locked { opacity: 0.8; } .acard.active { border-color: var(--reiatsu); box-shadow: inset 0 0 14px rgba(94, 200, 255, 0.12); }
.ac-h { display: flex; gap: 8px; align-items: center; } .ac-h > div { flex: 1; min-width: 0; } .ac-h b { font: 800 15px var(--font-h); }
.ac-b { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.setrow { display: flex; align-items: center; gap: 12px; margin: 5px 0; flex-wrap: wrap; } .setrow label { min-width: 150px; }

/* ---------------- Mapa: Rota das Almas (emakimono) ---------------- */
.emaki { position: relative; display: flex; align-items: stretch; margin: 2px 0 10px; }
.emaki-sc { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; background: var(--ik-grain, none) 0 0/128px 128px, linear-gradient(180deg, #1c1b19, #131311); border-top: 2px solid rgba(242, 239, 230, 0.55); border-bottom: 2px solid rgba(242, 239, 230, 0.55); padding: 10px 6px 6px; }
.emaki-r { flex: none; width: 14px; background: linear-gradient(90deg, #3a342c, #1a1713 40%, #4a4237 70%, #1a1713); box-shadow: 0 0 0 1px #000; z-index: 2; }
.emaki-r.l { border-radius: 6px 0 0 6px; } .emaki-r.r { border-radius: 0 6px 6px 0; }
.emaki-in { display: flex; align-items: flex-start; gap: 0; width: max-content; min-height: 200px; position: relative; padding: 0 20px; }
.ez { position: relative; display: flex; flex-direction: column; align-items: center; width: 142px; flex: none; }
.ez::before { content: ""; position: absolute; left: 0; right: 0; top: 43px; height: 4px; background: var(--blood); clip-path: polygon(0 30%, 10% 0, 40% 40%, 70% 10%, 100% 30%, 100% 80%, 60% 100%, 30% 70%, 0 100%); z-index: 0; }
.ez:first-child::before { left: 50%; } .ez:last-child::before { right: 50%; }
.ez-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.ez-k { display: flex; flex-direction: column; align-items: center; margin-top: 4px; text-align: center; }
.ez-k i { font: normal 22px/1.1 var(--font-k); color: #fff; white-space: nowrap; }
.ez-k small { font: 700 10px/1.2 var(--font-b); letter-spacing: 0.08em; color: var(--paper-dim); text-transform: uppercase; max-width: 130px; }
.ez-tag { font: 800 8.5px var(--font-b); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 0 5px; margin-top: 2px; border: 1px solid; } .ez-tag.ok { color: var(--good); } .ez-tag.lock { color: var(--blood-hi); }
.ez-sub { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; padding-top: 2px; z-index: 1; }
.ez-sub::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: 26px; width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, var(--blood) 0 5px, transparent 5px 8px); z-index: -1; }
.ez.locked .ez-k i { color: var(--paper-dk); }
.eno { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; background: none; border: 0; color: var(--paper); }
.eno-c { position: relative; display: block; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #0b0b0d, 0 0 0 4px rgba(242, 239, 230, 0.8), 0 4px 0 4px rgba(0, 0, 0, 0.6); transition: transform 0.14s; }
.eno.big .eno-c { width: 88px; height: 88px; } .eno.sm .eno-c { width: 50px; height: 50px; }
.eno-c canvas { display: block; width: 100%; height: 100%; }
.eno:hover .eno-c { transform: scale(1.07) rotate(-2deg); }
.eno-n { font: 700 10px/1.15 var(--font-b); max-width: 112px; text-align: center; color: var(--paper-dim); text-shadow: 0 1px 2px #000; }
.eno.big .eno-n { display: none; }
.eno.sel .eno-c { box-shadow: 0 0 0 2px #0b0b0d, 0 0 0 5px #fff, 0 0 0 7px var(--blood), 0 4px 0 7px rgba(0, 0, 0, 0.6); }
.eno.sel .eno-n { color: #fff; }
.eno.here .eno-c { animation: hereRing 1.6s ease-in-out infinite; }
@keyframes hereRing { 0%, 100% { box-shadow: 0 0 0 2px #0b0b0d, 0 0 0 4px var(--blood), 0 4px 0 4px rgba(0, 0, 0, 0.6); } 50% { box-shadow: 0 0 0 2px #0b0b0d, 0 0 0 4px var(--blood-hi), 0 0 0 9px rgba(255, 74, 99, 0.35), 0 4px 0 4px rgba(0, 0, 0, 0.6); } }
.eno.locked .eno-c canvas { filter: grayscale(1) brightness(0.45); } .eno.locked .eno-c { box-shadow: 0 0 0 2px #0b0b0d, 0 0 0 4px rgba(242, 239, 230, 0.3); }
.eno-lk { position: absolute; left: 50%; top: 50%; width: 22px; height: 26px; transform: translate(-50%, -50%); background: transparent; }
.eno-lk::before { content: ""; position: absolute; left: 4px; top: 0; width: 14px; height: 14px; border: 3px solid var(--paper); border-bottom: 0; border-radius: 8px 8px 0 0; }
.eno-lk::after { content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 15px; background: var(--paper); clip-path: polygon(0 12%, 100% 0, 98% 100%, 2% 94%); }
.emaki-det { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 10px 14px; background: rgba(242, 239, 230, 0.05); border-left: 3px solid var(--blood); }
.ed-h { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; }
.ed-k { font: normal 34px/1 var(--font-k); color: #fff; font-style: normal; } .ed-t { min-width: 0; } .ed-t b { font: 800 18px var(--font-h); }
.ed-d { line-height: 1.3; }
.ed-f { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; grid-column: 1; align-items: center; }
.ed-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; grid-column: 2; grid-row: 2 / span 2; justify-content: flex-end; align-content: center; }

/* bestiário */
.bs-top .bar { margin: 6px 0 2px; }
.bchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.bchip { padding: 2px 9px; background: rgba(242, 239, 230, 0.06); border: 1px solid var(--ink-line2); color: var(--paper); font-size: 13px; } .bchip b { color: #fff; }
.bs-zones { flex-wrap: nowrap; align-items: flex-start; } .bs-zones .lbl { padding-top: 6px; } .bs-zones .seg { gap: 0 10px; }
.bs-zones .seg-b { padding: 4px 3px 8px; min-width: 22px; font-size: 12px; letter-spacing: 0; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.bcard { display: flex; flex-direction: column; gap: 4px; padding: 6px; text-align: left; color: var(--paper); font: inherit; background: var(--ink-2); border: 1px solid var(--ink-line); border-top: 3px solid var(--tc, var(--ink-line2)); }
.bcard:hover { background: var(--ink-3); border-color: var(--ink-line2); border-top-color: var(--tc); }
.bcard.full { box-shadow: inset 0 0 14px rgba(200, 16, 46, 0.14); } .bcard.undis .bs-body { opacity: 0.7; }
.bs-box { display: flex; align-items: center; justify-content: center; height: 84px; background: radial-gradient(circle at 50% 75%, #2a2a32, #0d0d10); border: 1px solid var(--ink-line); overflow: hidden; }
.bs-img { max-width: 100%; max-height: 100%; image-rendering: pixelated; object-fit: contain; } .bs-box .bs-img { height: 76px; width: 100%; }
.bs-img.sil { filter: drop-shadow(0 0 2px rgba(200, 220, 255, 0.55)); } .bs-q { font: 800 34px var(--font-h); color: var(--paper-dk); }
.bs-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bs-n { font: 700 13.5px/1.15 var(--font-b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-t { font-size: 11px; color: var(--tc, var(--paper-dim)); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .bs-k { font-size: 12px; color: var(--paper-dim); }
.stars { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1.1; } .st-s { font-style: normal; color: var(--paper-dk); } .st-s.on { color: #fff; text-shadow: 0 0 6px rgba(200, 16, 46, 0.9); }
.bs-detail { display: flex; gap: 14px; align-items: flex-start; }
.bs-big { flex: none; width: 150px; height: 170px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 75%, #2a2a32, #0d0d10); border: 1px solid var(--ink-line2); border-top: 3px solid var(--tc, var(--blood)); }
.bs-big .bs-img { width: 138px; height: 158px; }
.bs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bs-name { font: 800 22px var(--font-h); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; } .bs-st .stars { font-size: 22px; } .bs-lore { margin: 10px 0 4px; }
.bs-mss { display: grid; gap: 2px; margin-bottom: 8px; }
.bs-ms { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; padding: 2px 6px; background: var(--ink-2); border: 1px solid var(--ink-line); color: var(--paper-dim); }
.bs-ms.on { color: var(--paper); border-color: rgba(200, 16, 46, 0.6); background: rgba(200, 16, 46, 0.08); } .bs-ms b { color: var(--good); }

/* patrulhas */
.grow { flex: 1; }
.pboard, .pacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.pmis, .pact { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: var(--ink-2); border: 1px solid var(--ink-line); border-left: 4px solid var(--ink-line2); }
.pmis.picked { border-color: var(--reiatsu); border-left-color: var(--reiatsu); box-shadow: inset 0 0 14px rgba(94, 200, 255, 0.14); }
.pact { border-left-color: var(--blood); } .pact.ready { border-color: var(--good); border-left-color: var(--good); box-shadow: inset 0 0 14px rgba(123, 224, 143, 0.14); }
.pm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .pm-h b { font: 800 15px var(--font-h); letter-spacing: 0.03em; }
.pm-b { margin-top: auto; padding-top: 4px; display: flex; gap: 6px; } .pmis .lbl, .pact .lbl { margin: 4px 0 2px; }
.pwhos { display: flex; gap: 8px; flex-wrap: wrap; }
.pwho { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--ink-line2); } .pwho .ico { width: 24px; height: 24px; }
.ppick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-bottom: 6px; }
.pcomp { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; text-align: center; background: var(--ink-3); border: 2px solid var(--ink-line2); color: var(--paper); } .pcomp b { font: 800 13px var(--font-h); }
.pcomp:hover:not(:disabled) { border-color: var(--paper-dim); } .pcomp.on { border-color: var(--reiatsu); background: rgba(94, 200, 255, 0.12); }
.pcomp.busy { opacity: 0.55; filter: grayscale(0.7); } .pcomp:disabled { cursor: not-allowed; } .pcomp:disabled:not(.busy) { opacity: 0.45; }
.baklist { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.bakrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 6px 8px; background: var(--ink-2); border: 1px solid var(--ink-line); }
.bk-n { display: flex; flex-direction: column; line-height: 1.2; } .bk-i { display: flex; gap: 12px; align-items: baseline; }

/* ---------------- modais ---------------- */
.modal-back { position: fixed; inset: 0; z-index: 900; background: rgba(2, 2, 3, 0.78); display: flex; align-items: center; justify-content: center; padding: 12px; animation: fadeIn 0.18s; }
.modal { position: relative; width: min(560px, 100%); max-height: 94vh; display: flex; isolation: isolate; box-shadow: 0 14px 60px rgba(0, 0, 0, 0.9); animation: pop 0.24s; background: var(--ik-grain, none) 0 0/128px 128px, linear-gradient(180deg, #131317, #0b0b0d 42%); }
@keyframes pop { from { transform: translateY(10px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-in { position: relative; z-index: 1; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; max-height: calc(94vh - 4px); padding: 18px 24px 16px; }
.modal-sm { width: min(430px, 100%); } .modal-md { width: min(580px, 100%); } .modal-lg { width: min(900px, 100%); }
.modal .win-splash { left: -26px; top: -26px; width: 78px; height: 78px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px 18px; border-bottom: 1px solid var(--ink-line); margin-bottom: 10px; }
.modal-h h2 { font-size: 21px; color: #fff; letter-spacing: 0.04em; position: relative; }
.modal-b { overflow-y: auto; flex: 1; min-height: 0; padding: 0 2px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--ink-line); flex-wrap: wrap; }
.modal-text { margin: 0 0 8px; font-size: 15px; }
.boss-res { text-align: center; } .br-n { font: 800 28px var(--font-h); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 var(--blood-dark); } .br-t { color: var(--paper-dim); margin-bottom: 8px; }
.form-unlock { display: flex; gap: 14px; align-items: center; } .form-unlock canvas { flex: none; max-width: 46%; height: auto; }
/* relatório offline: carta trazida por uma Borboleta do Limbo */
.modal-letter { width: min(620px, 100%); }
.letter { position: relative; padding: 6px 4px 4px; }
.lt-bf { position: absolute; right: 6px; top: -4px; width: 46px; height: 38px; margin: 0; animation: bfFrames 0.5s steps(1) infinite, bfDrift 4s ease-in-out infinite; }
@keyframes bfDrift { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(-8px, 4px) rotate(5deg); } }
.lt-wax { position: absolute; right: 8px; bottom: 6px; width: 46px; height: 46px; font: normal 24px/46px var(--font-k); color: #fff; opacity: 0.9; transform: rotate(-8deg); pointer-events: none; }
.lt-p { margin: 0 56px 12px 0; font-size: 14.5px; line-height: 1.45; }
.lt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 12px; margin: 6px 0 10px; }
.lt-n { display: flex; flex-direction: column; padding: 6px 10px; background: rgba(242, 239, 230, 0.05); border-left: 2px solid var(--ink-line2); }
.lt-n b { font: 800 28px/1.1 var(--font-h); color: #fff; letter-spacing: 0.02em; } .lt-n b .money { font: inherit; color: #fff; } .lt-n b .money span { font: 800 28px var(--font-h); letter-spacing: 0; text-transform: none; color: #fff; }
.lt-n span { font: 700 10px var(--font-b); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); }
.lt-n.hot { border-left-color: var(--blood); } .lt-n.hot b { text-shadow: 0 2px 0 var(--blood-dark); } .lt-n.good { border-left-color: var(--good); } .lt-n.good b { color: var(--good); }

/* ---------------- diálogo de NPC: requadro de mangá inclinado ---------------- */
.dlg { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: min(900px, calc(100% - 28px)); height: 214px; pointer-events: auto; }
.dlg.in { animation: dlgIn 0.28s cubic-bezier(0.3, 0.8, 0.3, 1); } @keyframes dlgIn { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
.dlg-panel { position: absolute; left: 76px; right: 0; top: 46px; bottom: 0; background: var(--ik-grain, none) 0 0/128px 128px, linear-gradient(180deg, #17171b, #0b0b0d); border: 3px solid var(--paper); transform: skewX(-6deg); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 3px #0b0b0d; }
.dlg-panel::before { content: ""; position: absolute; left: -2px; top: -2px; width: 110px; height: 8px; background: var(--blood); clip-path: polygon(0 0, 100% 30%, 92% 100%, 0 100%); }
.dlg-panel::after { content: ""; position: absolute; right: 10px; bottom: 8px; width: 120px; height: 5px; background: var(--paper); opacity: 0.55; clip-path: polygon(0 40%, 14% 0, 50% 50%, 100% 10%, 90% 100%, 40% 70%, 6% 100%); }
.dlg-port { position: absolute; left: 0; bottom: 0; width: 176px; height: 214px; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 0 #000) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.6)); }
.dlg-port canvas { display: block; width: 176px; height: 214px; }
.dlg-main { position: absolute; left: 192px; right: 232px; top: 62px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; z-index: 3; }
.dlg-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dlg-name b { font: 800 21px var(--font-h); letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 0 var(--blood-dark); }
.dlg-name span { font: 700 11px var(--font-b); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); }
.dlg-bubble { position: relative; flex: 1; min-height: 0; padding: 10px 16px 10px; background: #f7f4ec; color: #0b0b0d; border: 3px solid #0b0b0d; border-radius: 16px 22px 18px 24px / 20px 16px 22px 14px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px #f7f4ec; overflow: hidden; }
.dlg-bubble::before { content: ""; position: absolute; left: -2px; bottom: -2px; width: 28px; height: 20px; background: #0b0b0d; clip-path: polygon(0 100%, 100% 0, 100% 100%); display: none; }
.dlg-text { font: 500 16.5px/1.42 var(--font-b); color: #0b0b0d; cursor: pointer; }
.dlg-text::after { content: ""; display: none; }
.dlg-opts { position: absolute; right: 18px; top: 66px; width: 206px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.dlg-o { position: relative; width: 100%; min-height: 36px; justify-content: flex-start; padding: 4px 22px 4px 14px; background: #0b0b0d; border: 0; border-left: 6px solid var(--blood); color: #fff; font-size: 12.5px; letter-spacing: 0.06em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); box-shadow: none; }
.dlg-o:hover:not(:disabled) { background: #f7f4ec; color: #0b0b0d; border-left-color: var(--blood); }
.dlg-o.primary { background: var(--blood); border-left-color: #fff; }
.dlg-o.primary:hover:not(:disabled) { background: var(--blood-hi); color: #fff; }
.dlg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-left: 6px; box-shadow: 0 0 6px var(--blood-hi); }

/* ---------------- Guia do Gonta (tutorial): balão de mangá ---------------- */
.tut { position: fixed; z-index: 55; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0; width: min(500px, calc(100vw - 16px)); left: 12px; bottom: 12px; pointer-events: none; transition: left 0.3s, top 0.3s; }
.tut[hidden] { display: none; }
.tut > * { pointer-events: auto; }
.tut-kon { position: relative; flex: none; width: 82px; height: 82px; margin: -20px 0 0 16px; padding: 0; overflow: visible; border: 0; background: none; z-index: 2; }
.tut-kon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #fff, #e4dfd2); border: 3px solid #0b0b0d; box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.6); }
.tut-kon canvas { position: relative; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tut-q { display: none; position: absolute; right: -6px; top: -8px; width: 24px; height: 24px; background: var(--blood); color: #fff; font: 800 15px/24px var(--font-h); text-align: center; font-style: normal; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.tut.min .tut-q { display: block; animation: btnPulse 1.1s infinite; }
.tut.min { width: auto; } .tut.min .tut-bubble { display: none; } .tut.min .tut-kon { margin-top: 0; }
.tut-bubble { position: relative; width: 100%; min-width: 0; padding: 12px 16px 12px; background: #f7f4ec; color: #0b0b0d; border: 3px solid #0b0b0d; border-radius: 20px 26px 22px 28px / 24px 18px 26px 16px; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.65); animation: pop 0.25s; }
.tut-bubble::before { content: ""; position: absolute; left: 30px; bottom: -22px; width: 26px; height: 22px; background: #0b0b0d; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.tut-bubble::after { content: ""; position: absolute; left: 34px; bottom: -15px; width: 18px; height: 16px; background: #f7f4ec; clip-path: polygon(0 0, 100% 0, 14% 100%); }
html.sk-kon_bubble .tut-bubble { border: solid transparent; border-width: 12px 14px 32px 14px; border-image: var(--ik-kon-bubble) 20% 20.8333% 38% 20.8333% fill / 14px 14px 36px 14px stretch; background: none; border-radius: 0; box-shadow: none; padding: 2px 4px 0; filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.6)); }
html.sk-kon_bubble .tut-bubble::before, html.sk-kon_bubble .tut-bubble::after { display: none; }
.tut-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tut-title { font: 800 17px var(--font-h); letter-spacing: 0.03em; color: #0b0b0d; }
.tut-n { font: 700 11px var(--font-b); letter-spacing: 0.1em; color: #6c6a63; white-space: nowrap; margin-left: auto; text-transform: uppercase; }
.tut-x { flex: none; width: 24px; height: 22px; padding: 0; line-height: 1; font: 700 18px/20px var(--font-h); background: none; border: 2px solid #0b0b0d; color: #0b0b0d; } .tut-x:hover { background: #0b0b0d; color: #fff; }
.tut-tx { margin: 5px 0 7px; font-size: 14px; line-height: 1.38; color: #0b0b0d; }
.tut-rw { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .tut-rw:empty { display: none; }
.tut .money { color: #0b0b0d; } .tut .muted { color: #6c6a63; }
.tut-hint { margin: 0 0 6px; color: #9a4a00; font-size: 13px; } .tut-hint.ok { color: #1f7a3a; font-weight: 700; }
.tut-btns { display: flex; flex-wrap: wrap; gap: 6px; } .tut-btns .btn { min-height: 28px; font-size: 11px; border: 2px solid #0b0b0d; color: #0b0b0d; }
.tut-btns .btn:hover:not(:disabled) { background: #0b0b0d; color: #fff; }
.tut-btns .btn.primary { background: var(--blood); border-color: #0b0b0d; color: #fff; clip-path: none; }
.tut-btns .btn.primary:hover:not(:disabled) { background: var(--blood-hi); }
.tut-ring { position: fixed; z-index: 56; pointer-events: none; border: 3.5px solid var(--blood); border-radius: 47% 53% 44% 56% / 58% 46% 54% 42%; animation: tutRing 1.15s ease-in-out infinite; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.tut-ring::after { content: ""; position: absolute; inset: -7px; border: 2px solid rgba(200, 16, 46, 0.6); border-radius: 55% 45% 52% 48% / 44% 56% 46% 54%; transform: rotate(-3deg); }
@keyframes tutRing { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(200, 16, 46, 0.7)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(255, 74, 99, 0.95)); } }

/* =========================================================================
 * TELAS: título / registros de alma / criação
 * ========================================================================= */
.title-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.scr-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 10px; overflow: hidden auto; }
.scr-top { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 3; }
.chip { padding: 3px 12px; background: rgba(11, 11, 13, 0.85); border: 1px solid var(--ink-line2); color: var(--paper); font: 700 11px var(--font-b); letter-spacing: 0.12em; text-transform: uppercase; }
.scr-foot { font: 500 11px var(--font-b); color: rgba(242, 239, 230, 0.55); text-align: center; text-shadow: 0 1px 2px #000; max-width: 92vw; position: absolute; bottom: 8px; left: 0; right: 0; margin: auto; pointer-events: none; }

/* título: capa de volume */
.scr-title { display: block; overflow: hidden; }
.tt-left { position: absolute; left: clamp(22px, 6.5vw, 120px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: clamp(18px, 4vh, 40px); }
.tt-row { display: flex; align-items: flex-start; gap: clamp(10px, 2vw, 30px); }
.logo { text-align: left; transform: rotate(-3deg); transform-origin: 0 100%; }
.logo-main { font: 800 clamp(74px, 14.5vw, 220px)/0.88 var(--font-h); letter-spacing: -0.01em; color: #fff; text-shadow: 5px 6px 0 var(--blood-dark), 0 0 46px rgba(0, 0, 0, 0.75); }
/* o kanji 魂 (branco, "alvor") em pincel, colado à esquerda do nome */
.logo-main { display: flex; align-items: flex-end; white-space: nowrap; }
.logo-bai { display: inline-block; font: normal 1.02em/0.8 var(--font-k); font-style: normal; margin: 0 0.04em 0 -0.06em; color: var(--paper); transform: translateY(-0.02em) rotate(-5deg); text-shadow: 0.03em 0.04em 0 var(--blood-dark), 0 0 0.3em rgba(0, 0, 0, 0.7); filter: url(#ink-rough); }
.logo.small .logo-bai { text-shadow: 2px 2px 0 var(--blood-dark); filter: none; }
.logo-sub { display: inline-block; margin-top: 10px; padding: 3px 22px 4px 16px; font: 800 clamp(13px, 1.9vw, 24px) var(--font-h); letter-spacing: 0.42em; color: #fff; background: var(--blood); text-transform: uppercase; clip-path: polygon(0 12%, 2% 0, 98% 6%, 100% 0, 99% 92%, 100% 100%, 2% 96%, 0 100%); }
.logo-tag { margin-top: 10px; font: 700 12px var(--font-b); letter-spacing: 0.26em; color: var(--paper-dim); text-transform: uppercase; text-shadow: 0 1px 3px #000; }
.logo.small .logo-main { font-size: clamp(34px, 5vw, 56px); text-shadow: 3px 3px 0 var(--blood-dark); } .logo.small .logo-sub { font-size: 12px; }
.tt-k { writing-mode: vertical-rl; text-orientation: upright; font: normal clamp(34px, 5.4vw, 80px)/1.12 var(--font-k); color: var(--blood); text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 2px 2px 0 rgba(0, 0, 0, 0.5); letter-spacing: 0.06em; margin-top: 4px; }
.tt-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-left: 6px; }
.tt-wrap { display: block; } .tt-wrap .tt-b { pointer-events: none; }
.tt-b { position: relative; isolation: isolate; padding: 5px 34px 5px 14px; font: 800 clamp(19px, 2.3vw, 28px)/1.2 var(--font-h); letter-spacing: 0.06em; color: #fff; background: none; border: 0; text-align: left; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.9); transition: transform 0.15s; }
.tt-b::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; bottom: 4px; z-index: -1; background: var(--blood); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.2, 1); clip-path: polygon(0 20%, 3% 0, 30% 8%, 70% 0, 97% 10%, 100% 0, 98% 60%, 100% 100%, 60% 92%, 28% 100%, 4% 90%, 0 100%); }
.tt-b:hover:not(:disabled)::before { transform: scaleX(1); } .tt-b:hover:not(:disabled) { transform: translateX(6px); }
.tt-b.off { color: #8a877e; text-decoration: line-through; text-decoration-color: var(--blood); text-decoration-thickness: 3px; cursor: not-allowed; text-shadow: 0 1px 0 #000; }
.tt-note { font: 500 11.5px var(--font-b); color: var(--paper-dim); margin-left: 20px; text-shadow: 0 1px 2px #000; }

/* registros de alma: distintivos de Ceifador Interino (placa 220×300 da pele; regiões: emblema [50,30,120,118], info [24,168,172,114]) */
.scr-slots { gap: 22px; padding-top: 52px; }
.sl-head { text-align: center; line-height: 1.15; }
.sl-head h1 { font: 800 clamp(26px, 3.6vw, 40px) var(--font-h); letter-spacing: 0.08em; color: #fff; text-shadow: 3px 3px 0 var(--blood-dark); }
.sl-head small { display: block; margin-top: 6px; font: 700 11px var(--font-b); letter-spacing: 0.24em; color: var(--paper-dim); text-transform: uppercase; }
.slots { display: flex; gap: 30px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.slot { width: 220px; position: relative; transition: transform 0.18s; }
.slot:hover { transform: translateY(-5px) rotate(-0.7deg); }
.bd-plate { position: relative; width: 220px; height: 300px; background: var(--ik-badge, none) 0 0/100% 100% no-repeat; filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.65)); }
html:not(.sk-badge_daiko) .bd-plate { background: repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 9px), linear-gradient(165deg, #5b3b27, #2f1e13 55%, #21160d); clip-path: polygon(0 4%, 5% 0, 95% 0, 100% 4%, 100% 96%, 95% 100%, 5% 100%, 0 96%); filter: none; }
html:not(.sk-badge_daiko) .bd-plate::before { content: ""; position: absolute; left: 50px; top: 30px; width: 120px; height: 118px; background: var(--ik-skull-dim) center/contain no-repeat; }
html:not(.sk-badge_daiko) .bd-plate::after { content: ""; position: absolute; left: 24px; top: 168px; width: 172px; height: 114px; background: rgba(11, 11, 13, 0.82); border: 1px solid rgba(242, 239, 230, 0.3); }
html:not(.sk-badge_daiko) .slot { filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.65)); }
.bd-no { position: absolute; right: 22px; top: 8px; font: 800 9.5px var(--font-b); letter-spacing: 0.2em; color: rgba(242, 239, 230, 0.7); text-transform: uppercase; z-index: 2; }
.sl-cv { position: absolute; left: 10px; top: 14px; width: 200px; height: 168px; object-fit: contain; image-rendering: pixelated; z-index: 1; }
.bd-info { position: absolute; left: 24px; top: 168px; width: 172px; height: 114px; padding: 10px 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 1px; z-index: 2; }
.sl-name { font: 800 21px/1.1 var(--font-h); letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 0 #000; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-info > * { flex: none; max-width: 100%; }
.sl-cls { font: 700 11px/1.2 var(--font-b); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-cls i { font: normal 15px var(--font-k); margin-right: 2px; font-style: normal; }
.sl-meta { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.3; color: var(--paper-dim); margin-top: 5px; } .sl-meta span:first-child { color: var(--paper); } .sl-meta b { color: #fff; }
.sl-free { font: 800 13px var(--font-h); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 4px #000; }
.sl-hint { margin-top: 5px; font-size: 11px; color: var(--paper-dim); line-height: 1.3; }
.sl-btns { display: flex; gap: 6px; width: 100%; margin-top: 12px; } .sl-btns > * { flex: 1; min-height: 34px; } .sl-btns .sl-imp { flex: 0 0 auto; }
.slot .btn { background: rgba(11, 11, 13, 0.85); } .slot .btn:hover:not(:disabled) { background: var(--paper); } .slot .btn.primary { background: var(--blood); }

/* criação: "Escolha o seu caminho" */
.scr-create { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 70px 16px 30px; gap: 8px; overflow: hidden; }
.cr-title { flex: 1; text-align: center; margin-top: 2px; font: 800 clamp(22px, 3vw, 34px) var(--font-h); letter-spacing: 0.1em; color: #fff; text-shadow: 3px 3px 0 var(--blood-dark); }
.cr-cols { flex: 1; min-height: 0; width: min(1300px, 100%); align-self: center; display: flex; gap: 8px; }
.cr-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #0b0b0d), rgba(11, 11, 13, 0.9) 70%); border-top: 4px solid var(--c); box-shadow: inset 0 0 0 1px rgba(242, 239, 230, 0.12); transition: flex-grow 0.4s cubic-bezier(0.3, 0.7, 0.2, 1); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.cr-col.on { flex: 7 1 0; }
.crc-h { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 4px 12px; background: none; border: 0; color: #fff; text-align: center; width: 100%; }
.crc-h:hover .crc-k { transform: scale(1.06); }
.crc-k { writing-mode: vertical-rl; text-orientation: upright; font: normal clamp(46px, 7.4vh, 80px)/1.04 var(--font-k); color: var(--c); text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); transition: transform 0.18s; }
.crc-n { font: 800 clamp(10px, 0.95vw, 14px) var(--font-h); letter-spacing: 0; color: #fff; text-transform: uppercase; max-width: 100%; }
.crc-d { font: 600 11px var(--font-b); color: var(--paper-dim); display: none; letter-spacing: 0.08em; }
.cr-col.on .crc-h { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 16px; padding: 12px 22px 2px; text-align: left; }
.cr-col.on .crc-k { writing-mode: horizontal-tb; font-size: clamp(44px, 7vh, 66px); line-height: 1; }
.cr-col.on .crc-n { font-size: 26px; } .cr-col.on .crc-d { display: inline; font-size: 12px; }
.crc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.1fr); gap: 16px; padding: 0 22px 12px; animation: fadeIn 0.4s 0.15s both; }
.crb-l { display: flex; flex-direction: column; gap: 8px; min-height: 0; align-items: center; }
#cr-stage { width: 100%; flex: 1; min-height: 0; object-fit: contain; max-width: 460px; image-rendering: pixelated; }
.cr-forms { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .cr-forms .btn { min-width: 96px; }
.crb-r { min-height: 0; overflow-y: auto; padding-right: 8px; }
.cr-role { color: #fff; font: 800 14px var(--font-h); letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 2px solid var(--c); display: inline-block; }
.cr-desc { margin: 8px 0 6px; color: #d9d5ca; font-size: 14px; }
.cr-h { font: 800 10.5px var(--font-b); letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-dim); margin: 10px 0 4px; } .cr-h small { font: 500 10px var(--font-b); letter-spacing: 0; color: var(--paper-dk); text-transform: none; }
.cr-attr { display: grid; grid-template-columns: 96px 1fr 24px 54px; gap: 6px; align-items: center; font-size: 12.5px; } .cr-attr span { color: var(--paper-dim); display: flex; align-items: baseline; gap: 4px; } .cr-attr b { text-align: right; font: 800 13px var(--font-n); } .cr-attr em { font-style: normal; font-size: 10.5px; color: var(--paper-dk); }
.cr-attr .kj { font: normal 14px/1 var(--font-k); color: var(--c); width: 18px; text-align: center; }
.cr-bar { height: 7px; background: rgba(242, 239, 230, 0.12); clip-path: polygon(0 20%, 3% 0, 97% 12%, 100% 70%, 96% 100%, 2% 88%); } .cr-bar i { display: block; height: 100%; clip-path: polygon(0 10%, 4% 0, 100% 24%, 96% 100%, 0 90%); }
.cr-sks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cr-sk { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--ink-line2); font: 700 10px var(--font-n); color: var(--paper-dim); } .cr-sk:hover { border-color: var(--c); }
.cr-pas { margin: 2px 0; font-size: 13px; } .cr-lore { font-style: italic; color: var(--paper-dim); font-size: 12.5px; margin: 8px 0 0; }
.cr-foot { flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 8px 18px 10px; width: min(1300px, 100%); align-self: center; background: rgba(11, 11, 13, 0.82); border-top: 1px solid var(--ink-line2); }
.cr-ctrl { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.cr-nm { width: 260px; } .cr-look { display: flex; gap: 18px; flex-wrap: wrap; } .cr-look .btnrow { gap: 4px; margin: 0; } .cr-foot .lbl { margin: 0 0 3px; }
.cr-hair { width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ink-2); border: 1px solid var(--ink-line2); }
.cr-hair canvas { width: 32px; height: 32px; display: block; } .cr-hair.on { border-color: var(--blood); box-shadow: 0 0 0 2px var(--blood); }
.cr-go { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; padding: 8px 34px 8px 12px; background: none; border: 0; color: #fff; font: 800 24px var(--font-h); letter-spacing: 0.1em; transition: transform 0.15s; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.cr-go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blood); clip-path: polygon(0 12%, 3% 0, 50% 6%, 97% 0, 100% 14%, 98% 90%, 100% 100%, 52% 94%, 4% 100%, 0 88%); filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.6)); }
.cr-go:hover { transform: rotate(-1.5deg) scale(1.04); } .cr-go:hover::before { background: var(--blood-hi); }
.cr-go .hanko { width: 50px; height: 50px; color: var(--blood-dark); font: normal 30px/50px var(--font-k); }
.cr-go .hanko::before { background: #f7f4ec; }
.cr-go .hanko b { font-weight: normal; }
.scr-create .scr-foot { display: none; }

/* ---------------- telas baixas (altura útil < 640 px) ---------------- */
body.vshort .an-name { font-size: 28px; } body.vshort .bn-t { font-size: 34px; }
body.vshort .h-orders { top: 176px; } body.vshort .od-g { display: none; }

/* ---------------- animação reduzida ---------------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* =========================================================================
 * CELULAR (< 900 px): konzantō compacta, Konkeitai de 120 px, shimenawa vira um maço de fuda,
 * chat recolhido num ícone de borboleta, Ordens recolhidas, janelas em tela cheia com a fileira de selos rolável
 * ========================================================================= */
body.compact { --ui-zoom: 1; }
/* chat: só o ícone de borboleta (com contador); aberto vira painel largo */
body.compact .h-chat { left: 4px; top: 4px; width: auto; height: auto; }
body.compact .h-chat .ch-peek { display: none; }
body.compact .h-chat .ch-bubble { display: flex; }
body.compact .h-chat.open { width: calc(100vw - 8px); height: 280px; }
body.compact .h-chat.open .ch-bubble { display: none; }
body.compact .ch-tab { width: 30px; height: 30px; }
/* menu: um maço de fuda */
body.compact .h-top { position: static; transform: none; width: auto; display: block; }
body.compact .shime-bundle { display: flex; position: absolute; left: 54px; top: 4px; width: 46px; height: 42px; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 0; background: #ece7d8; color: #0b0b0d; pointer-events: auto; clip-path: polygon(0 0, 100% 0, 100% 92%, 82% 100%, 62% 93%, 40% 100%, 20% 93%, 0 100%); box-shadow: inset 0 0 0 1px rgba(11, 11, 13, 0.25); }
body.compact .shime-bundle::before { content: ""; position: absolute; left: -3px; top: 3px; width: 100%; height: 100%; background: #cfc9b8; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
body.compact .shime-bundle i { font: normal 20px/1 var(--font-k); font-style: normal; } body.compact .shime-bundle b { font: 800 7.5px var(--font-b); letter-spacing: 0.14em; }
body.compact .shime-bundle.has::after { content: attr(data-n); position: absolute; right: -2px; top: -2px; min-width: 16px; height: 16px; font: 800 10px/16px var(--font-n); text-align: center; color: #fff; background: var(--blood); border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
body.compact .shime { display: none; }
body.compact .hud.bundle-open .shime { display: block; position: absolute; left: 4px; right: 4px; top: 54px; width: auto; height: auto; padding: 14px 6px 12px; background: rgba(11, 11, 13, 0.96); border: 1px solid rgba(242, 239, 230, 0.6); pointer-events: auto; z-index: 7; }
body.compact .shime-rope { display: none; } body.compact .shide { display: none; }
body.compact .shime-in { position: static; flex-wrap: wrap; justify-content: center; gap: 12px 6px; padding: 0; }
body.compact .shime-grp { flex-wrap: wrap; justify-content: center; gap: 12px 8px; }
body.compact .fd-n { top: auto; bottom: -18px; }
/* alvo e aviso */
body.compact .h-target { position: absolute; left: 4px; top: 52px; margin: 0; zoom: 0.72; }
body.compact .h-warn { position: absolute; left: 4px; top: 102px; width: calc(100% - 134px); margin: 0; }
/* Ordens: recolhidas por padrão */
body.compact .h-orders { left: 4px; top: 104px; width: min(230px, calc(100% - 134px)); }
body.compact .od-item { padding: 4px 4px 5px; } body.compact .od-g { display: none; }
/* Konkeitai de ~120 px (o corpo da pele reduzido); os alertas viram uma antena piscando */
body.compact .phone { right: 4px; top: 6px; zoom: 0.62; }
body.compact .ph-ch { display: none; }
body.compact .ph-zone .zl { display: none; } body.compact .ph-zone .zs { display: inline; }
body.compact .ph-xy span:last-child { display: none; }
body.compact .ph-alerts { display: none; }
body.compact .hud.ev-open .ph-alerts { display: flex; left: auto; right: 0; top: calc(100% + 8px); width: 168px; height: auto; max-height: 130px; zoom: 1.5; background: #0b0b0d; border: 1px solid rgba(242, 239, 230, 0.7); z-index: 7; }
body.compact .h-evtoggle { display: flex; position: absolute; left: 11px; top: 282px; width: 168px; height: 64px; padding: 0; align-items: center; justify-content: center; pointer-events: auto; background: none; border: 0; }
body.compact .h-evtoggle i { position: relative; width: 6px; height: 34px; background: var(--paper); border-radius: 3px; }
body.compact .h-evtoggle i::before { content: ""; position: absolute; left: -3px; top: -12px; width: 12px; height: 12px; border-radius: 50%; background: var(--blood-hi); box-shadow: 0 0 10px 4px rgba(255, 74, 99, 0.9); animation: ember 1s infinite; }
body.compact .hud.ev-open .h-evtoggle { display: none; }
/* konzantō compacta: cabo e tsuba menores, técnicas em 2 fileiras de 4 dentro da lâmina */
body.compact .zk { left: 2px; bottom: 6px; width: 380px; height: 176px; }
body.compact .zk-info { left: 6px; top: 0; width: 200px; height: 52px; }
body.compact .zk-nm { font-size: 14px; max-width: 130px; } body.compact .zk-cl { font-size: 10.5px; margin-top: 1px; } body.compact .zk-ck { font-size: 13px; } body.compact .zk-cl span { max-width: 100px; }
body.compact .zk-info .hp-cur { display: none; }
body.compact .zk-pw { left: 140px; top: 1px; width: 100px; } body.compact .zk-pw small { font-size: 8.5px; letter-spacing: 0.1em; } body.compact .zk-pw b { font-size: 20px; }
body.compact .zk .h-buffs { left: 250px; top: 2px; width: 126px; }
body.compact .zk-barswrap { left: 170px; top: 40px; width: 208px; }
body.compact .zk-pommel { left: 0; top: 108px; width: 18px; height: 30px; }
body.compact .zk-sageo { left: 2px; top: 136px; width: 14px; height: 24px; }
body.compact .zk-hilt { left: 12px; top: 106px; width: 116px; height: 38px; background-size: auto 100%; }
body.compact .zk-auto { left: 8px; top: 2px; width: 34px; height: 34px; font-size: 12px; }
body.compact .zk-autot { left: 4px; top: 39px; width: 42px; font-size: 7px; letter-spacing: 0.1em; }
body.compact .zk-pots { left: 48px; top: 3px; width: 62px; height: 32px; gap: 2px; padding: 0 3px; } body.compact .pot { width: 28px; height: 32px; } body.compact .pot .gd { left: 3px; width: 22px; height: 29px; } body.compact .pot-n { right: -1px; font-size: 9.5px; min-width: 12px; line-height: 12px; } body.compact .pot-key { font-size: 8.5px; line-height: 11px; }
body.compact .zk-tsuba { left: 112px; top: 98px; width: 56px; height: 56px; }
body.compact .zk-port { left: 7.3px; top: 7.3px; width: 41px; height: 41px; } body.compact .zk-port canvas { width: 41px; height: 41px; }
body.compact .zk-lv { min-width: 22px; height: 22px; font-size: 12px; line-height: 22px; right: -6px; }
body.compact .zk-habaki { left: 164px; top: 108px; width: 13px; height: 34px; }
body.compact .zk-blade { left: 174px; top: 70px; width: 172px; height: 106px; background: var(--ik-blade, linear-gradient(180deg, #4a4b52 0, #2b2c32 14%, #17171b 52%, #101013 80%, #2d2e34 100%)) 0 0/512px 52px repeat-x, var(--ik-blade, linear-gradient(180deg, #4a4b52 0, #2b2c32 14%, #17171b 52%, #101013 80%, #2d2e34 100%)) 0 54px/512px 52px repeat-x; }
body.compact .zk-skills { left: 8px; top: 2px; width: 160px; height: 100px; display: grid; grid-template-columns: repeat(4, 38px); grid-auto-rows: 38px; gap: 14px 3px; }
body.compact .sk-wrap, body.compact .sk { width: 38px; height: 38px; } body.compact .sk .ico { width: 26px; height: 26px; }
body.compact .sk-lock { font-size: 8px; line-height: 10px; bottom: 2px; } body.compact .sk-key { font-size: 9px; left: 3px; } body.compact .sk-cost { font-size: 8.5px; right: 3px; } body.compact .sk-cdt { font-size: 12px; }
body.compact .zk-tipend { left: 346px; top: 70px; width: 34px; height: 106px; background-size: 100% 100%; }
body.compact .zk-tipt { left: 3px; top: 40px; } body.compact .zk-tipt b { font-size: 9px; } body.compact .zk-tipt i { font-size: 8.5px; }
body.compact .h-joy { left: 8px; bottom: 192px; width: 100px; height: 100px; } body.compact .hj-knob { left: 30px; top: 30px; }
body.compact .toasts { right: 6px; bottom: 192px; width: 230px; }
body.win-open.compact .toasts { bottom: 10px; }
/* título do mapa, banners, morte */
body.compact .h-announce { left: 1%; top: 36%; width: 98%; height: 138px; }
body.compact .an-in { padding: 8px 18px 8px 22px; gap: 8px; } body.compact .an-k { max-height: none; } body.compact .an-name { font-size: 26px; } body.compact .an-sub { font-size: 9.5px; letter-spacing: 0.1em; } body.compact .an-stamp { font-size: 9px; right: 14px; bottom: 8px; }
body.compact .bn { height: 140px; } body.compact .bn-t { font-size: 26px; } body.compact .bn-kj { font-size: 100px; } body.compact .bn-s { font-size: 11px; }
body.compact .dr-t { font-size: 28px; } body.compact .dr-s { font-size: 12px; }
/* janelas em tela cheia */
body.compact .win-back { background: #050506; }
body.compact .win { width: 100%; height: 100%; box-shadow: none; }
body.compact .win-in { padding: 10px 10px 8px; } body.compact .win-seals { padding: 2px 2px 18px 18px; gap: 5px; }
body.compact .win-ttl h2 { font-size: 20px; } body.compact .win-key { display: none; } body.compact .win-bgk { font-size: 170px; bottom: -20px; }
body.compact .win-ttl span { font-size: 9.5px; letter-spacing: 0.08em; }
body.compact .pd { grid-template-columns: 1fr 1fr; } body.compact .pd-mid { grid-column: 1 / -1; order: -1; } body.compact .pd-stats { grid-column: 1 / -1; }
body.compact .pd-col { padding-top: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; } body.compact .pd-slot { width: 90px; } body.compact .pd-slot.l::after, body.compact .pd-slot.r::after { display: none; }
body.compact .emaki-sc { padding-top: 10px; } body.compact .emaki-det { grid-template-columns: 1fr; } body.compact .ed-a { grid-column: 1; grid-row: auto; justify-content: flex-start; }
/* diálogo */
body.compact .dlg { bottom: 12px; height: 262px; width: calc(100% - 12px); }
body.compact .dlg-panel { left: 20px; top: 54px; }
body.compact .dlg-port { width: 104px; height: 128px; } body.compact .dlg-port canvas { width: 104px; height: 128px; }
body.compact .dlg-main { left: 112px; right: 12px; top: 66px; bottom: 82px; }
body.compact .dlg-name b { font-size: 16px; } body.compact .dlg-text { font-size: 14px; }
body.compact .dlg-opts { left: 34px; right: 14px; width: auto; top: auto; bottom: 10px; flex-direction: row; flex-wrap: wrap; gap: 4px; }
body.compact .dlg-o { width: auto; flex: 1 1 42%; min-height: 32px; font-size: 11px; padding: 3px 14px 3px 10px; }
/* telas */
/* A largura inclui o selo 魂 e todas as seis letras, com folga para a rotação e a sombra. */
body.compact .tt-left { left: 18px; right: 18px; top: 44%; } body.compact .tt-row { flex-direction: column; gap: 4px; min-width: 0; } body.compact .scr-title .logo { max-width: 100%; } body.compact .scr-title .logo-main { font-size: clamp(40px, 15vw, 120px); } body.compact .scr-title .logo-tag { max-width: 100%; font-size: clamp(10px, 2.8vw, 12px); letter-spacing: 0.18em; } body.compact .tt-k { writing-mode: horizontal-tb; font-size: 24px; letter-spacing: 0.5em; margin: 2px 0 0 6px; } body.compact .tt-note { display: none; }
body.compact .slots { gap: 14px; } body.compact .slot { width: min(238px, 80vw); } body.compact .scr-slots { justify-content: flex-start; overflow-y: auto; padding-top: 54px; padding-bottom: 30px; }
body.compact .badge .bd-in { min-height: 330px; } body.compact body.compact .scr-create { overflow-y: auto; padding-top: 54px; }
body.compact .cr-title { font-size: 19px; }
body.compact .cr-cols { flex-direction: column; flex: none; min-height: 0; width: 100%; }
body.compact .cr-col { flex: none; transition: none; }
body.compact .crc-h { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 14px; }
body.compact .crc-k { writing-mode: horizontal-tb; font-size: 32px; } body.compact .cr-col.on .crc-k { font-size: 34px; }
body.compact .crc-body { grid-template-columns: 1fr; padding: 0 12px 10px; }
body.compact #cr-stage { max-width: 300px; flex: none; height: auto; aspect-ratio: 420 / 330; }
body.compact .crb-r { overflow: visible; }
body.compact .cr-foot { position: sticky; bottom: 0; width: 100%; gap: 10px; padding: 8px; } body.compact .cr-nm { width: 100%; } body.compact .cr-go { font-size: 20px; }
body.compact .scr-top .chip { display: none; }
body.compact .modal-in { padding: 14px 14px 12px; }
body.compact .tut { width: calc(100vw - 16px); gap: 8px; } body.compact .tut-kon { width: 58px; height: 58px; } body.compact .tut-bubble { padding: 8px 12px; }
body.compact .tut-title { font-size: 14px; } body.compact .tut-tx { font-size: 13px; max-height: 26vh; overflow-y: auto; }
/* painéis */
body.compact .crow { grid-template-columns: auto 1fr auto; } body.compact .crow .spark { display: none; } body.compact .crow .c-p { grid-column: 2; } body.compact .crow .c-a { flex-direction: row; }
body.compact .skrow { grid-template-columns: auto 1fr; } body.compact .skrow .sk-act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
body.compact .recipe { grid-template-columns: auto 1fr; } body.compact .recipe .rc-a { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
body.compact .lrow { grid-template-columns: auto 1fr auto; } body.compact .lrow .btn { grid-column: 3; }
body.compact .opp { grid-template-columns: auto 1fr auto; } body.compact .opp .btn { grid-column: 1 / -1; }
body.compact .perk { grid-template-columns: 1fr auto; } body.compact .perk .pips { display: none; }
body.compact .table .trow { grid-template-columns: 34px 1fr 80px 32px 70px; }
body.compact .attr { grid-template-columns: 1fr auto; } body.compact .attr-v { grid-column: 1 / -1; order: 3; }
body.compact .bs-detail { flex-direction: column; align-items: center; } body.compact .bs-info { width: 100%; } body.compact .bs-ms { grid-template-columns: 96px 1fr auto; }
body.compact .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.compact .bs-box { height: 72px; }
body.compact .pboard, body.compact .pacts { grid-template-columns: 1fr; }
body.compact .trow2 { grid-template-columns: 1fr auto; } body.compact .trow2 span { display: none; }
body.compact .modal-h h2 { font-size: 17px; }
@media (max-width: 899px) { :root { --ui-zoom: 1; } }
@media (max-width: 520px) {
  body { font-size: 13.5px; }
  body.compact .sk-cdt { font-size: 11px; }
  body.compact .cell { width: 44px; height: 44px; } body.compact .invgrid { grid-template-columns: repeat(auto-fill, 44px); }
  body.compact .forms { grid-template-columns: 1fr; }
}
/* celular deitado (altura baixa): a konzantō volta à fileira única de 8 técnicas */
@media (max-width: 899px) and (min-width: 700px) and (max-height: 520px) {
  body.compact .zk { width: 812px; height: 144px; bottom: 12px; }
  body.compact .zk-info { left: 16px; width: 290px; height: 66px; } body.compact .zk-nm { font-size: 17px; max-width: 176px; } body.compact .zk-cl { font-size: 11.5px; } body.compact .zk-info .hp-cur { display: flex; }
  body.compact .zk-pw { left: 196px; width: 118px; } body.compact .zk-pw b { font-size: 26px; } body.compact .zk .h-buffs { left: 326px; top: 22px; width: 440px; }
  body.compact .zk-barswrap { left: 318px; top: 46px; width: 470px; }
  body.compact .zk-pommel { left: 0; top: 82px; width: 28px; height: 48px; } body.compact .zk-sageo { left: 4px; top: 122px; width: 19px; height: 33px; }
  body.compact .zk-hilt { left: 22px; top: 84px; width: 220px; height: 44px; background-size: 220px 44px; }
  body.compact .zk-auto { left: 30px; top: 1px; width: 42px; height: 42px; font-size: 14px; } body.compact .zk-autot { left: 26px; top: 45px; width: 50px; font-size: 8.5px; }
  body.compact .zk-pots { left: 92px; top: 3px; width: 112px; height: 38px; gap: 8px; padding: 0 8px; } body.compact .pot { width: 44px; height: 38px; } body.compact .pot .gd { left: 8px; width: 28px; height: 36px; }
  body.compact .zk-tsuba { left: 234px; top: 70px; width: 72px; height: 72px; } body.compact .zk-port { left: 9.5px; top: 9.5px; width: 53px; height: 53px; } body.compact .zk-port canvas { width: 53px; height: 53px; } body.compact .zk-lv { min-width: 26px; height: 26px; font-size: 14px; line-height: 26px; }
  body.compact .zk-habaki { left: 300px; top: 84px; width: 18px; height: 44px; }
  body.compact .zk-blade { left: 316px; top: 80px; width: 412px; height: 52px; background: var(--ik-blade, linear-gradient(180deg, #4a4b52 0, #2b2c32 14%, #17171b 52%, #101013 80%, #2d2e34 100%)) 0 0/512px 52px repeat-x; }
  body.compact .zk-skills { left: 12px; top: 2px; width: auto; height: 44px; display: flex; gap: 6px; }
  body.compact .sk-wrap, body.compact .sk { width: 44px; height: 44px; } body.compact .sk .ico { width: 30px; height: 30px; }
  body.compact .zk-tipend { left: 728px; top: 80px; width: 72px; height: 52px; } body.compact .zk-tipt { left: 12px; top: 10px; }
  body.compact .h-joy { display: none; }
  body.compact .toasts { bottom: 160px; }
  body.compact .h-announce { top: 30%; height: 120px; }
}

/* online: emotes e canais */
/* ---- borboleta de emotes junto do chat (abre a roda; atalho G) ---- */
.ch-emo { flex: none; position: relative; width: 30px; min-height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(11, 11, 13, 0.92); border: 1px solid rgba(242, 239, 230, 0.5); cursor: pointer; transition: transform 0.1s, background 0.12s; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.ch-emo:hover { background: var(--blood); border-color: var(--blood); transform: translateY(-1px); }
.ch-emo .pk-bf { width: 21px; height: 17px; margin: 0; }
.ch-emo-fab { position: absolute; left: 3px; bottom: 6px; width: 38px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; background: rgba(11, 11, 13, 0.82); border: 1px solid rgba(242, 239, 230, 0.55); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); transition: transform 0.1s, background 0.12s; }
.ch-emo-fab:hover { background: var(--blood); border-color: var(--blood); transform: translateY(-1px); }
.ch-emo-fab .pk-bf { width: 24px; height: 20px; margin: 0; }
.ch-emo-fab kbd { position: absolute; right: 1px; bottom: 0; min-width: 0; padding: 0 3px; font: 800 9px/12px var(--font-b); color: var(--paper); background: #000; border: 0; }
.h-chat.open .ch-emo-fab { display: none; }
body.compact .ch-emo-fab { left: 52px; top: 4px; bottom: auto; }
body.compact .h-chat.open .ch-emo-fab { display: none; }

/* ---- roda de emotes: 8 selos de osso em volta da borboleta, com as teclas 1–8 ---- */
.emw { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.emw[hidden] { display: none; }
.emw-dim { position: absolute; inset: 0; pointer-events: auto; cursor: default; background: radial-gradient(circle at 50% 47%, rgba(11, 11, 13, 0.74) 0, rgba(11, 11, 13, 0.66) 190px, rgba(11, 11, 13, 0.28) 380px, rgba(11, 11, 13, 0) 640px); }
.emw.in .emw-dim { animation: emwDim 0.2s ease-out both; }
@keyframes emwDim { from { opacity: 0; } to { opacity: 1; } }
.emw-ring { position: absolute; left: 50%; top: 47%; width: 0; height: 0; pointer-events: none; }
.emw.in .emw-ring { animation: emwIn 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
@keyframes emwIn { from { transform: scale(0.72) rotate(-16deg); opacity: 0; } to { transform: none; opacity: 1; } }
.emw-it.seal { --seal-bg: var(--bone); --seal-fg: var(--ink); position: absolute; left: 0; top: 0; width: 78px; height: 78px; margin: -39px 0 0 -39px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform: rotate(calc(var(--a) - 90deg)) translateX(122px) rotate(calc(90deg - var(--a))); transition: filter 0.12s; font-family: var(--font-b); filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.75)); }
.emw-it.seal:hover, .emw-it.seal:focus-visible { --seal-bg: var(--blood); --seal-fg: #fff; outline: none; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.75)) brightness(1.08); }
.emw-it b { font: 800 12.5px/1.12 var(--font-b); letter-spacing: 0; white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: clip; }
.emw-it kbd { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); min-width: 0; padding: 0 4px; font: 800 9px/12px var(--font-b); color: var(--paper); background: #000; border: 0; }
.emw-hub { position: absolute; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: auto; cursor: pointer; border-radius: 50%; background: rgba(11, 11, 13, 0.94); border: 1.5px solid rgba(242, 239, 230, 0.75); box-shadow: 0 0 0 5px rgba(11, 11, 13, 0.55), 3px 4px 0 rgba(125, 10, 28, 0.9); }
.emw-hub:hover { border-color: var(--blood-hi); }
.emw-hub .pk-bf { width: 36px; height: 30px; margin: 0; }
.emw-hub small { font: normal 13px/1 var(--font-k); color: var(--paper); letter-spacing: 0.05em; }
.emw-hub span { font: 800 9px/1 var(--font-b); letter-spacing: 0.22em; color: var(--paper-dim); padding-left: 0.22em; }
body.compact .emw-it.seal { width: 62px; height: 62px; margin: -31px 0 0 -31px; transform: rotate(calc(var(--a) - 90deg)) translateX(92px) rotate(calc(90deg - var(--a))); }
body.compact .emw-it b { font-size: 10.5px; max-width: 56px; }
body.compact .emw-hub { width: 74px; height: 74px; margin: -37px 0 0 -37px; }

/* ---- seletor de canal (clique no "Canal N" do Konkeitai) ---- */
button.ph-ch { padding: 0; margin-left: 1px; background: none; border: 0; font: inherit; font-weight: 700; color: #8fd6f2; cursor: pointer; pointer-events: auto; text-align: left; }
button.ph-ch:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--blood-hi); text-underline-offset: 2px; }
.ch-pick { position: absolute; right: 206px; top: 44px; width: 186px; max-height: 270px; overflow-y: auto; padding: 8px 12px 9px 12px; z-index: 14; pointer-events: auto; border: 1px solid rgba(242, 239, 230, 0.6); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7); clip-path: var(--edge-cut); animation: tgIn 0.2s ease-out; }
.ch-pick[hidden] { display: none; }
.chp-h { display: flex; align-items: baseline; gap: 7px; padding: 0 0 4px; margin-bottom: 4px; border-bottom: 1px solid var(--ink-line); }
.chp-k { font: normal 19px/1 var(--font-k); font-style: normal; color: var(--paper); }
.chp-h b { font: 800 13px var(--font-h); letter-spacing: 0.08em; color: #fff; }
.chp-h small { margin-left: auto; font: 600 9.5px var(--font-b); letter-spacing: 0.06em; color: var(--paper-dim); text-transform: uppercase; max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chp-wait { padding: 8px 2px; font: 500 11.5px var(--font-b); color: var(--paper-dim); }
.chp-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; width: 100%; margin: 7px 0; padding: 3px 8px 3px 10px; text-align: left; background: none; border: 0; color: var(--paper); cursor: pointer; font: 700 12px/1.2 var(--font-b); letter-spacing: 0.02em; transition: transform 0.1s; }
.chp-row:hover:not(:disabled) { transform: translateX(2px); }
.chp-row:hover:not(:disabled)::before { background-color: rgba(60, 14, 22, 0.97); }
.chp-row.cur { color: #fff; }
.chp-row.full, .chp-row:disabled { opacity: 0.5; cursor: not-allowed; }
.chp-n { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.chp-seal { width: 17px; height: 17px; font-size: 11px; --seal-bg: var(--blood); }
.chp-c { font: 600 11px var(--font-n); color: var(--paper-dim); white-space: nowrap; }
.chp-c b { color: var(--paper); font-weight: 800; }
.chp-c em { font: 700 8.5px var(--font-b); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blood-hi); margin-left: 3px; }
.chp-bar { grid-column: 1 / -1; height: 3px; background: rgba(242, 239, 230, 0.12); }
.chp-bar i { display: block; height: 100%; width: var(--f); background: var(--paper); clip-path: polygon(0 40%, 4% 0, 40% 30%, 80% 5%, 100% 0, 98% 100%, 60% 85%, 30% 100%, 6% 80%); }
.chp-row.full .chp-bar i { background: var(--blood-hi); }

/* ---- chefe compartilhado: participantes sob a moldura do alvo (nomes + fração do dano em traço de pincel) ---- */
.tg-party { display: flex; align-items: flex-end; gap: 7px; margin-top: 17px; max-width: 360px; pointer-events: auto; animation: tgIn 0.22s ease-out; }
.tg-party[hidden] { display: none; }
.pt-seal.seal { flex: none; width: 25px; height: 25px; font-size: 14px; align-self: center; }
.pt-chip { position: relative; display: flex; flex-direction: column; min-width: 58px; max-width: 96px; padding: 1px 5px 3px 5px; line-height: 1.1; background: rgba(11, 11, 13, 0.84); border-left: 2px solid var(--ink-line2); box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.6); }
.pt-chip b { font: 700 10.5px var(--font-b); letter-spacing: 0.02em; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.pt-chip u { position: absolute; right: 4px; top: 2px; text-decoration: none; font: 700 8.5px var(--font-n); color: var(--paper-dim); }
.pt-chip i { display: block; width: var(--f); min-width: 4px; height: 3px; margin-top: 2px; background: var(--blood-hi); clip-path: polygon(0 40%, 4% 0, 30% 30%, 62% 5%, 90% 25%, 100% 0, 98% 100%, 70% 80%, 40% 100%, 8% 85%); transition: width 0.4s ease-out; }
.pt-chip.me { border-left-color: var(--paper); }
.pt-chip.me i { background: var(--paper); }
.pt-chip.lead b::before { content: "長"; margin-right: 3px; font: normal 10px/1 var(--font-k); color: var(--blood-hi); }
.pt-more { align-self: center; font: 800 11px/16px var(--font-b); color: var(--paper); padding: 0 6px; background: rgba(11, 11, 13, 0.84); border-left: 2px solid var(--blood); box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.6); }
body.compact .tg-party { margin-top: 15px; transform: scale(0.9); transform-origin: left top; }
body.compact .ch-pick { right: 8px; top: 140px; }

/* carregamento */
/* Tela de carregamento (index.html #boot; window.__boot em index.html, alimentada por js/main.js): fundo preto, o sol vermelho cortado por nuvens de
   tinta com o kanji 魂 em pincel por cima e, embaixo, uma pincelada vermelha que avança com o progresso real do boot (--p, 0..1).
   Some com um fade (.boot-out). */
.boot { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #14080b 0%, #050304 55%, #000 100%); color: var(--paper); --p: 0.04; --d: min(58vmin, 460px); animation: boot-in 0.3s 0.12s backwards; }
.boot.boot-out { opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
.boot-in { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 4.5vh, 36px); }
.boot-disc { position: relative; width: var(--d); height: var(--d); display: grid; place-items: center; }
.boot-sun { position: absolute; inset: 0; border-radius: 50%; background: var(--blood); filter: url(#ink-splat);
  -webkit-mask: linear-gradient(180deg, #000 0 58%, transparent 58% 62%, #000 62% 78%, transparent 78% 82%, #000 82% 92%, transparent 92% 94%, #000 94%); mask: linear-gradient(180deg, #000 0 58%, transparent 58% 62%, #000 62% 78%, transparent 78% 82%, #000 82% 92%, transparent 92% 94%, #000 94%);
  animation: boot-sun 3.2s ease-in-out infinite alternate; }
.boot-k { position: relative; font: 400 calc(var(--d) * 0.66)/1 var(--font-k); letter-spacing: 0.04em; padding-left: 0.04em; color: var(--paper); text-shadow: 0.04em 0.05em 0 rgba(11, 11, 13, 0.85); filter: url(#ink-rough);
  -webkit-mask: linear-gradient(90deg, #000 55%, transparent) 100% 0 / 220% 100% no-repeat; mask: linear-gradient(90deg, #000 55%, transparent) 100% 0 / 220% 100% no-repeat; animation: boot-wipe 1.1s 0.15s ease-out forwards; }
.boot-bar { position: relative; width: min(74vw, 440px); height: 18px; filter: url(#ink-rough); }
.boot-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(242, 239, 230, 0.16); }
.boot-stroke { display: block; height: 100%; min-width: 16px; width: calc(var(--p, 0) * 100%); background-color: var(--blood); transition: width 0.4s cubic-bezier(0.3, 0.7, 0.2, 1);
  background-image: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.13) 3px 4px);
  clip-path: polygon(0 24%, 1.5% 0, 38% 12%, 74% 2%, 100% 22%, 97% 54%, 100% 100%, 62% 90%, 30% 100%, 2% 82%); }
.boot-txt { font: 600 12px/1 var(--font-b); letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-dim); min-height: 12px; text-shadow: 0 1px 2px #000; }
@keyframes boot-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-wipe { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes boot-sun { from { transform: scale(1); } to { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .boot-k { animation: none; -webkit-mask: none; mask: none; } .boot-sun { animation: none; } .boot-stroke { transition: none; } }

/* app instalável */
/* botão "Instalar app" da tela de título (js/ui/screens.js): discreto, em letras pequenas com uma seta de tinta; só aparece quando o navegador oferece */
.tt-install { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; margin: -4px 0 0 20px; padding: 4px 2px; background: none; border: 0; cursor: pointer; font: 700 11.5px/1 var(--font-b); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); text-shadow: 0 1px 2px #000; transition: color 0.15s, transform 0.15s; }
.tt-install[hidden] { display: none; }
.tt-install::before { content: ""; width: 13px; height: 13px; background: var(--blood); clip-path: polygon(34% 0, 66% 4%, 64% 46%, 100% 42%, 50% 100%, 0 46%, 36% 48%); }
.tt-install:hover, .tt-install:focus-visible { color: #fff; transform: translateX(3px); outline: 0; }
body.compact .tt-install { margin-left: 14px; font-size: 12px; padding: 8px 4px; }