/* =========================================================================
 * KONKAI — Cenas de história em requadros de mangá (js/ui/cutscene.js, dados em js/data/scenes.js).
 * Linguagem Tinta Konkai (docs/V2_UI_BLEACH.md): papel claro com requadros de borda preta grossa, balões brancos de contorno
 * irregular, narração em retângulo preto, onomatopeias em pincel. Tudo aqui é prefixado por .cs / .mem; só este arquivo.
 * ========================================================================= */

/* ---------------- camada da cena ---------------- */
.cs { position: fixed; inset: 0; z-index: 850; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-user-select: none; user-select: none; overflow: hidden; font-family: var(--font-b); color: #0a0a0d; touch-action: manipulation; }
.cs[hidden] { display: none; }
.cs-back { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(30, 10, 14, 0.82), rgba(3, 3, 4, 0.96) 78%); animation: csFade 0.45s both; }
.cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* a página: papel, margem preta fina, leve inclinação */
.cs-page { position: relative; flex: none; background: #ece6d8; box-shadow: 0 0 0 3px #0a0a0d, 0 0 0 6px rgba(244, 240, 230, 0.9), 0 18px 70px rgba(0, 0, 0, 0.9); animation: csPageIn 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.cs-paper { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0.38 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cs-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(60, 40, 20, 0.18)); }
.cs.out .cs-page { animation: csPageOut 0.32s cubic-bezier(0.5, 0, 0.8, 0.4) both; }
.cs.out .cs-back { animation: csFadeOut 0.32s both; }

/* cabeçalho: selo de kanji, título do episódio, "Pular" */
.cs-head { position: absolute; left: 3.2%; right: 3.2%; top: 1.3%; height: 5.8%; min-height: 36px; display: flex; align-items: center; gap: 12px; z-index: 6; pointer-events: none; }
.cs-hanko { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 2.2em; padding: 0 0.3em; font: normal clamp(14px, 1.7vw, 22px)/1 var(--font-k); font-style: normal; color: #fff; background: var(--blood, #c8102e); letter-spacing: 0.04em; transform: rotate(-3deg); box-shadow: 2px 2px 0 #0a0a0d; clip-path: polygon(0 4%, 4% 0, 96% 3%, 100% 0, 99% 96%, 100% 100%, 3% 97%, 0 100%); }
.cs-ttl { min-width: 0; line-height: 1.1; }
.cs-ttl b { display: block; font: 800 clamp(15px, 1.85vw, 24px)/1.05 var(--font-h); letter-spacing: 0.06em; color: #0a0a0d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ttl span { display: block; margin-top: 3px; font: 700 clamp(9px, 0.85vw, 11px)/1 var(--font-b); letter-spacing: 0.22em; text-transform: uppercase; color: #6c665a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-skip { margin-left: auto; flex: none; pointer-events: auto; cursor: pointer; padding: 0.5em 1.5em 0.5em 1.1em; font: 800 clamp(10px, 0.95vw, 12.5px)/1 var(--font-b); letter-spacing: 0.18em; text-transform: uppercase; color: #f4f0e6; background: #0a0a0d; border: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%); transition: background 0.12s, transform 0.12s; }
.cs-skip:hover, .cs-skip:focus-visible { background: var(--blood, #c8102e); transform: translateX(-2px); outline: none; }

/* palco: onde os requadros ficam */
.cs-stage { position: absolute; left: 3.2%; right: 3.2%; top: 8.4%; bottom: 6.4%; z-index: 2; font-size: var(--fs, 17px); }
.cs-panel { position: absolute; }
.cs-clip { position: absolute; inset: 0; overflow: hidden; background: #0a0a0d; visibility: hidden; }
.cs-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; transform-origin: var(--ox, 50%) var(--oy, 50%); }
.cs-bd { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.cs-bd .ln { fill: none; stroke: #0a0a0d; stroke-width: var(--bw, 6px); stroke-linejoin: miter; stroke-miterlimit: 6; }
.cs-bd .gh { fill: rgba(10, 10, 13, 0.035); stroke: rgba(10, 10, 13, 0.22); stroke-width: 1.5px; stroke-dasharray: 7 6; stroke-linejoin: round; }
.cs-panel.in .cs-clip { visibility: visible; }
.cs-panel.in .cs-bd .gh { display: none; }
.cs-panel:not(.in) .cs-bd .ln { display: none; }

/* entrada do requadro: "pancada" com leve giro + clarão */
.cs-panel.in { animation: csSlam 0.34s cubic-bezier(0.2, 1.25, 0.35, 1) both; transform-origin: 50% 50%; z-index: 3; }
.cs-panel.in.soft { animation: csSoft 0.5s ease-out both; }
.cs-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 9; }
.cs-panel.in .cs-flash { animation: csFlash 0.42s ease-out both; }
.cs-panel.in.strong .cs-flash { animation: csFlashStrong 0.6s ease-out both; }
.cs-panel.in .cs-art.drift { animation: csDrift 14s ease-in-out infinite alternate; }
.cs-page.shake { animation: csShake 0.36s linear; }

/* camada de texto do requadro */
.cs-txt { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cs-txt .cs-bd2 { position: absolute; left: 0; top: 0; overflow: visible; }

/* balão de fala */
.cs-bal { position: absolute; z-index: 5; color: #0a0a0d; text-align: center; font: 700 1em/1.22 var(--font-b); padding: 0.62em 0.92em 0.68em; opacity: 0; transform: scale(0.5); transform-origin: var(--tx, 50%) var(--ty, 100%); letter-spacing: 0.005em; }
.cs-bal.show { opacity: 1; animation: csPop 0.24s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.cs-bal .csb { position: absolute; left: 0; top: 0; overflow: visible; z-index: -1; pointer-events: none; }
.cs-bal .bt { position: relative; z-index: 1; display: block; word-break: normal; overflow-wrap: break-word; }
.cs-bal.k-shout { font-family: var(--font-h); font-weight: 800; font-size: 1.12em; letter-spacing: 0.02em; text-transform: none; }
.cs-bal.k-whisper { font-weight: 500; font-style: italic; font-size: 0.92em; color: #2a2a30; }
.cs-bal.k-think { font-weight: 500; font-style: italic; }
.cs-bal.k-voice { font-family: var(--font-h); font-weight: 800; letter-spacing: 0.03em; color: #f4f0e6; }
.cs-bal .c { opacity: 0; }
.cs-bal .c.v { opacity: 1; }
.cs-nar .c { opacity: 0; }
.cs-nar .c.v { opacity: 1; }

/* caixa de narração: retângulo preto com texto branco */
.cs-nar { position: absolute; z-index: 5; max-width: 62%; padding: 0.5em 0.85em 0.58em; background: #0a0a0d; color: #f4f0e6; font: 600 0.92em/1.28 var(--font-h); letter-spacing: 0.025em; text-align: left; opacity: 0; transform: translateY(-6px); clip-path: polygon(0 0, 100% 3%, 99% 100%, 1% 97%); box-shadow: 0 0 0 1px rgba(244, 240, 230, 0.9) inset; }
.cs-nar::before { content: ""; position: absolute; left: 0; top: 0; width: 0.55em; height: 100%; background: var(--blood, #c8102e); }
.cs-nar .nt { display: block; padding-left: 0.5em; }
.cs-nar.show { opacity: 1; animation: csNar 0.28s ease-out both; }
.cs-nar.k-red { background: var(--blood-dark, #7d0a1c); }
.cs-nar.k-white { background: #f4f0e6; color: #0a0a0d; box-shadow: 0 0 0 1px #0a0a0d inset; }
.cs-nar.k-white::before { background: #0a0a0d; }

/* onomatopeias */
.cs-sfx { position: absolute; z-index: 4; white-space: nowrap; font-family: var(--font-k); font-weight: 900; font-size: calc(var(--s) * 1px); line-height: 0.95; letter-spacing: -0.03em; color: var(--c, #0a0a0d); -webkit-text-stroke: calc(var(--s) * 0.06px) var(--o, #f4f0e6); paint-order: stroke fill; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); filter: url(#ink-rough); opacity: 0; text-align: center; pointer-events: none; text-shadow: calc(var(--s) * 0.04px) calc(var(--s) * 0.05px) 0 var(--o, #f4f0e6); }
.cs-sfx.show { opacity: 1; animation: csSfx 0.52s cubic-bezier(0.18, 1.9, 0.4, 1) both; }
.cs-sfx small { display: block; margin-top: 0.08em; font: 800 0.17em/1 var(--font-b); letter-spacing: 0.34em; padding-left: 0.34em; -webkit-text-stroke: 0; text-shadow: none; opacity: 0.95; }

/* etiqueta de nome do personagem (primeira aparição) */
.cs-tag { position: absolute; z-index: 5; padding: 0.18em 0.7em 0.22em; background: #0a0a0d; color: #f4f0e6; font: 800 0.62em/1.1 var(--font-b); letter-spacing: 0.2em; text-transform: uppercase; transform: rotate(-2deg); opacity: 0; box-shadow: 0 0 0 1px rgba(244, 240, 230, 0.85) inset; white-space: nowrap; clip-path: polygon(0 8%, 100% 0, 98% 100%, 2% 92%); }
.cs-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.2em; background: var(--blood, #c8102e); }
.cs-tag.show { opacity: 1; animation: csNar 0.3s 0.15s ease-out both; }

/* rodapé: marcadores de página e dica de teclas */
.cs-foot { position: absolute; left: 3.2%; right: 3.2%; bottom: 1.2%; height: 4.4%; min-height: 24px; display: flex; align-items: center; gap: 10px; z-index: 6; pointer-events: none; }
.cs-dots { display: flex; gap: 5px; }
.cs-dots i { display: block; width: 0.8em; height: 0.8em; min-width: 8px; min-height: 8px; border: 2px solid #0a0a0d; background: transparent; transform: rotate(45deg); }
.cs-dots i.on { background: var(--blood, #c8102e); border-color: #0a0a0d; }
.cs-hint { margin-left: auto; font: 700 clamp(9px, 0.82vw, 11px)/1 var(--font-b); letter-spacing: 0.18em; text-transform: uppercase; color: #6c665a; display: flex; align-items: center; gap: 0.8em; white-space: nowrap; }
.cs-hint kbd { display: inline-block; min-width: 1.6em; padding: 0.3em 0.55em; font: 800 0.95em/1 var(--font-b); text-align: center; color: #f4f0e6; background: #0a0a0d; border: 0; letter-spacing: 0.06em; }
.cs-next { color: var(--blood, #c8102e); font-size: 1.5em; line-height: 1; letter-spacing: 0; opacity: 0; transform: translateY(0); }
.cs-next.on { opacity: 1; animation: csNext 0.9s ease-in-out infinite; }

/* celular: os requadros empilham na vertical e a página rola */
.cs.compact .cs-page { width: 100% !important; height: 100% !important; overflow-y: auto; overflow-x: hidden; box-shadow: none; animation-name: csFade; scrollbar-width: none; }
.cs.compact .cs-page::-webkit-scrollbar { display: none; }
.cs.compact .cs-head { position: sticky; left: 0; right: 0; top: 0; height: 46px; padding: 0 12px; background: linear-gradient(180deg, #ece6d8 70%, rgba(236, 230, 216, 0)); z-index: 10; }
.cs.compact .cs-stage { position: relative; left: 0; right: 0; top: 0; bottom: 0; margin: 0 10px; }
.cs.compact .cs-foot { position: sticky; left: 0; right: 0; bottom: 0; height: 40px; padding: 0 12px; background: linear-gradient(0deg, #ece6d8 65%, rgba(236, 230, 216, 0)); }
.cs.compact .cs-hint kbd { display: none; }

/* movimento reduzido: sem pancadas nem tremidas */
@media (prefers-reduced-motion: reduce) {
  .cs-panel.in, .cs-panel.in.soft { animation: csFade 0.2s both; }
  .cs-page.shake, .cs-panel.in .cs-art.drift, .cs-next.on { animation: none; }
  .cs-panel.in .cs-flash, .cs-panel.in.strong .cs-flash { animation: none; }
  .cs-bal.show, .cs-nar.show, .cs-tag.show { animation: csFade 0.15s both; }
  .cs-sfx.show { animation: csFade 0.2s both; }
}

@keyframes csFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes csFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes csPageIn { from { opacity: 0; transform: translateY(26px) rotate(-1.2deg) scale(0.97); } to { opacity: 1; transform: rotate(-0.25deg); } }
@keyframes csPageOut { from { opacity: 1; transform: rotate(-0.25deg); } to { opacity: 0; transform: translateY(-18px) rotate(0.8deg) scale(0.98); } }
@keyframes csSlam { 0% { opacity: 0; transform: scale(1.32) rotate(var(--rot, -1deg)); } 55% { opacity: 1; transform: scale(0.985) rotate(0deg); } 100% { opacity: 1; transform: none; } }
@keyframes csSoft { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes csFlash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes csFlashStrong { 0% { opacity: 1; } 22% { opacity: 1; } 100% { opacity: 0; } }
@keyframes csShake { 0%, 100% { transform: rotate(-0.25deg); } 15% { transform: translate(-7px, 4px) rotate(-0.5deg); } 30% { transform: translate(6px, -5px) rotate(0.1deg); } 45% { transform: translate(-5px, -3px) rotate(-0.4deg); } 60% { transform: translate(4px, 4px) rotate(0deg); } 80% { transform: translate(-2px, 1px) rotate(-0.3deg); } }
@keyframes csDrift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.2%, -0.8%); } }
@keyframes csPop { 0% { transform: scale(0.4); } 70% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes csNar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes csSfx { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(3.2); } 55% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(0.92); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); } }
@keyframes csNext { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------------- aba "Memórias" (janela Missões) ---------------- */
.mem-intro { margin: 0 0 10px; }
.mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px 14px; }
.mem-card { position: relative; display: flex; flex-direction: column; background: var(--ink-2, #16161a); border: 1px solid var(--ink-line, rgba(242, 239, 230, 0.18)); padding: 8px 8px 10px; }
.mem-card .mem-th { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #0a0a0d; overflow: hidden; clip-path: polygon(0 0, 100% 3%, 100% 100%, 3% 97%); box-shadow: 0 0 0 2px #f2efe6 inset; }
.mem-card canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.mem-card .mem-t { margin: 8px 0 1px; font: 800 14.5px/1.15 var(--font-h); letter-spacing: 0.04em; color: #fff; }
.mem-card .mem-a { margin: 0 0 8px; font: 700 10.5px var(--font-b); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim, #a9a59b); }
.mem-card .btn { margin-top: auto; align-self: flex-start; }
.mem-card .mem-k { position: absolute; right: 12px; top: 12px; z-index: 2; min-width: 2.1em; padding: 2px 6px; font: normal 14px/1.2 var(--font-k); color: #fff; background: var(--blood, #c8102e); text-align: center; transform: rotate(3deg); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.mem-card.lock { opacity: 0.55; }
.mem-card.lock .mem-th { background: #101013; display: flex; align-items: center; justify-content: center; }
.mem-card.lock .mem-th b { font: normal 46px/1 var(--font-k); color: rgba(242, 239, 230, 0.12); }
.mem-card.lock .mem-t { color: var(--paper-dim, #a9a59b); }
body.compact .mem-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }