/* Fim de jogo (Ecos de Pesadelo) e opção das setas (agente Fim de Jogo).
 * Linguagem Tinta Konkai (docs/V2_UI_BLEACH.md): laca preta, selos hanko vermelhos, pincel, kanji. Só aqui; style.css é de outro agente.
 * Peças: aba "Pesadelo" da janela Mapa (.ng-*), papel do resultado (.ng-res), marcador da aba (.ng-tabk). */

/* ---------------- aba "Pesadelo" da janela Mapa ---------------- */
.ng-tabk { font: normal 13px/1 var(--font-k); font-style: normal; color: var(--blood-hi); margin-right: 3px; letter-spacing: 0; }
.seg-b.on .ng-tabk { color: #fff; }

/* faixa de cima: a fala do Grão-Comandante e o contador de chaves */
.ng-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.ng-lore { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 12px; min-width: 0; border-left: 3px solid var(--blood);
  background: linear-gradient(90deg, rgba(200, 16, 46, 0.2), rgba(22, 22, 26, 0.78) 46%, rgba(22, 22, 26, 0.5)); }
.ng-lore b { display: block; font: 800 17px/1.1 var(--font-h); letter-spacing: 0.06em; color: #fff; }
.ng-lore p { margin: 3px 0 2px; font-size: 12.5px; line-height: 1.34; color: #d4d0c6; }
.ng-sig { font: 700 10.5px var(--font-b); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dk); }
.ng-mark { flex: none; width: 50px; height: 50px; font: normal 19px/1 var(--font-k); font-style: normal; color: #fff; letter-spacing: 0; word-break: keep-all; }

.ng-keys { min-width: 262px; padding: 8px 12px 8px; background: rgba(242, 239, 230, 0.05); border-left: 3px solid var(--paper); }
.ng-keys-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ng-keys-h .lbl { margin: 0; }
.ng-keys-h b { font: 800 18px/1 var(--font-h); color: #fff; }
.ng-pips { display: flex; gap: 5px; margin: 6px 0 5px; }
.ng-key { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--ink-line2); color: var(--paper-dk); font: normal 13px/1 var(--font-k); font-style: normal; }
.ng-key.on { color: #fff; border: 1px solid #fff; background: radial-gradient(circle at 35% 30%, #e8334f, var(--blood) 60%, var(--blood-dark)); box-shadow: 0 0 7px rgba(200, 16, 46, 0.65); }
.ng-keys .btnrow { margin: 6px 0 0; }

/* desafio em andamento */
.ng-live { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; background: rgba(200, 16, 46, 0.14); border-left: 3px solid var(--blood-hi); animation: ngPulse 1.6s ease-in-out infinite; }
.ng-live .hanko { flex: none; width: 34px; height: 34px; font: normal 19px/1 var(--font-k); font-style: normal; color: #fff; }
.ng-live-t { flex: 1 1 200px; min-width: 0; }
.ng-live-t b { display: block; font: 800 15px/1.2 var(--font-h); color: #fff; }
.ng-live-t small { color: var(--paper-dim); font-size: 12px; }
.ng-live .btnrow { margin: 0; }
@keyframes ngPulse { 0%, 100% { box-shadow: inset 0 0 0 rgba(255, 74, 99, 0); } 50% { box-shadow: inset 0 0 18px rgba(255, 74, 99, 0.22); } }

/* os dez selos de chefe */
.ng-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.ng-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 10px 14px;
  background: linear-gradient(180deg, rgba(34, 34, 40, 0.92), rgba(15, 15, 19, 0.96)); border: 1px solid var(--ink-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: border-color 0.12s, background 0.12s; }
.ng-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 10px; width: 3px; background: var(--blood); }
.ng-card:hover { border-color: rgba(242, 239, 230, 0.45); }
.ng-card.locked { opacity: 0.62; }
.ng-card.locked::before { background: #4a4a50; }
.ng-card.cur { border-color: var(--blood); box-shadow: inset 0 0 18px rgba(200, 16, 46, 0.24); }
.ng-h { display: flex; align-items: center; gap: 10px; cursor: help; }
.ng-seal { flex: none; width: 46px; height: 46px; font: 800 23px/1 var(--font-h); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.ng-seal.off { font: normal 21px/1 var(--font-k); color: #cfcfd4; text-shadow: none; }
.ng-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ng-kj { font: normal 15px/1.1 var(--font-k); color: var(--paper-dim); white-space: nowrap; letter-spacing: 0.04em; }
.ng-id b { font: 800 16px/1.1 var(--font-h); letter-spacing: 0.02em; color: #fff; overflow-wrap: anywhere; }
.ng-id small { font: 500 11px/1.2 var(--font-b); color: var(--paper-dk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-meta { display: flex; flex-wrap: wrap; gap: 1px 10px; font: 600 11.5px/1.35 var(--font-b); color: var(--paper-dim); }
.ng-meta b { color: #fff; font-weight: 800; }
.ng-meta b.bad { color: var(--bad); }
.ng-rw { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 1px; }
.ng-item { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; font: 700 11px/19px var(--font-b); letter-spacing: 0.02em; color: var(--rc, var(--paper)); border: 1px solid var(--rc, var(--ink-line2)); background: rgba(0, 0, 0, 0.42); white-space: nowrap; }
.ng-item b { font-weight: 800; }
.ng-first { padding: 0 6px; font: 800 10px/17px var(--font-b); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blood-hi); border: 1px solid rgba(255, 74, 99, 0.55); white-space: nowrap; }
.ng-best { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 11.5px var(--font-b); color: var(--paper-dim); }
.ng-best b { color: #fff; font-weight: 800; }
.ng-pr { display: inline-flex; gap: 3px; align-items: center; cursor: help; }
.ng-pr i { width: 8px; height: 8px; border: 1px solid var(--ink-line2); background: #000; transform: rotate(45deg) scale(0.9); }
.ng-pr i.on { background: var(--blood); border-color: #fff; }
.ng-pr i.t { margin-left: 3px; transform: rotate(45deg) scale(1.2); border-color: rgba(214, 178, 94, 0.7); }
.ng-pr i.t.on { background: var(--gold); border-color: #fff; }
.ng-tt { font: 800 9.5px/16px var(--font-b); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(214, 178, 94, 0.55); padding: 0 5px; }
.ng-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ng-lock { display: flex; align-items: flex-start; gap: 7px; margin-top: 2px; font: 600 12px/1.3 var(--font-b); color: var(--warn); }
.ng-lock i { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #4a4a50; color: #fff; font: normal 12px/1 var(--font-k); font-style: normal; }
.ng-foot { margin-top: 12px; line-height: 1.4; }

/* ---------------- papel do resultado (modal) ---------------- */
.ng-modal .modal-b { position: relative; }
.ng-res { position: relative; padding: 2px 4px 4px; overflow: hidden; }
.ng-res-kj { position: absolute; right: -4px; top: -16px; font: normal 120px/1 var(--font-k); font-style: normal; color: rgba(200, 16, 46, 0.16); pointer-events: none; letter-spacing: -0.04em; }
.ng-res-n { position: relative; font: 800 26px/1.1 var(--font-h); letter-spacing: 0.04em; color: #fff; text-shadow: 0 3px 0 var(--blood-dark); }
.ng-res-t { position: relative; margin: 2px 0 8px; font: 700 11.5px var(--font-b); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.ng-res .lbl { position: relative; }
.ng-res .btnrow { position: relative; }
.ng-res-item { position: relative; display: flex; gap: 10px; align-items: center; margin: 2px 0 6px; }
.ng-res-item b { display: block; font: 800 14px/1.2 var(--font-h); }
.ng-res-item small { color: var(--paper-dim); font-size: 12px; }
.ng-res-title { position: relative; margin: 6px 0; padding: 4px 10px; color: var(--paper); border-left: 3px solid var(--gold); background: rgba(214, 178, 94, 0.08); }
.ng-res-title b { color: var(--gold); }
.ng-res-q { position: relative; margin: 10px 0 4px; padding: 6px 12px; font: italic 500 13px/1.4 var(--font-b); color: #d4d0c6; background: rgba(242, 239, 230, 0.05); border-left: 3px solid var(--blood); }
.ng-res-q span { display: block; margin-top: 2px; font: 700 10.5px var(--font-b); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dk); }
.ng-res-cd { position: relative; margin-top: 6px; color: var(--paper-dim); }
.ng-res-cd b { color: #fff; }

/* ---------------- celular ---------------- */
body.compact .ng-top { grid-template-columns: 1fr; }
body.compact .ng-keys { min-width: 0; }
body.compact .ng-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
body.compact .ng-card { padding: 10px 8px 8px 12px; }
body.compact .ng-seal { width: 38px; height: 38px; font-size: 19px; }
body.compact .ng-id b { font-size: 14px; }
body.compact .ng-res-n { font-size: 21px; }