/* Runekin · css/notebook.css — Caderno (4e), entrada do Runekin (4f), modal de entrada desconhecida + revelação.
   Fatia do antigo style.css (linhas 450–611); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ FIELD NOTEBOOK (4e) ============ */
/* áreas seguras: o slab de cabeçalho e a faixa CRESCEM com --top-shift (o conteúdo desce o mesmo),
   então a relação faixa × contador × filtros é a do site em qualquer aparelho */
#screen-grimorio { padding-top: calc(56px + var(--top-shift)); padding-bottom: calc(14vw + 64px + var(--sa-b)); }
.nb-head { height: calc(250px + var(--top-shift)); }
.nb-stripe { position: absolute; left: -30px; width: calc(100% + 60px); top: calc(clamp(224px - 7vw, 196px, 244px - 7vw) + var(--top-shift)); height: 26px; background: var(--c1); transform: rotate(-8deg); z-index: 0; }
@media (min-width: 560px) { #screen-grimorio > .nb-stripe { left: calc(50% - 50vw - 30px); width: calc(100vw + 60px); } }
.grim-head { margin: 0; color: #fff; }
.nb-count { display: flex; align-items: flex-end; gap: 14px; padding-top: 40px; }
.nb-count > b { font: 400 96px/.8 var(--display); }
.nb-count .nb-of { font: 400 22px/1 var(--display); text-transform: uppercase; color: var(--c2); }
.nb-count .nb-of .dim { color: var(--muted-ink) !important; }
.nb-count .nb-break { font: 400 12px var(--body); color: var(--muted-ink); margin-top: 4px; }
.nb-count .nb-txt { padding-bottom: 10px; min-width: 0; }
/* filtros: o chip visível tem 28px, o botão 44px de alvo (desenho no ::before; clip-path só nele).
   margem de cima: os chips começam abaixo da ponta esquerda da faixa (-8°) em toda largura */
.nb-filters { display: flex; gap: 6px; margin-top: 72px; flex-wrap: wrap; align-items: center; }
.nb-filters button { position: relative; isolation: isolate; min-height: 44px; min-width: 44px; padding: 0 10px; font: 400 14px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); text-align: center; }
.nb-filters button::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; bottom: 8px; z-index: -1; border: 2px solid var(--ink); }
.nb-filters button.on { color: #fff; }
.nb-filters button.on::before { background: var(--ink); clip-path: var(--e-chip); }
.nb-filters .nb-search { margin-left: auto; width: 44px; padding: 0; display: grid; place-items: center; }
.nb-filters .nb-search svg { width: 18px; height: 18px; }
.nb-filters input { width: 100%; margin-top: 2px; padding: 8px 10px; min-height: 44px; border: 3px solid var(--ink); border-radius: 0; background: #fff; font: 500 14px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); -webkit-appearance: none; appearance: none; }
.nb-filters input::-webkit-search-cancel-button, .nb-filters input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.nb-filters input::placeholder { color: #8a8478; text-transform: none; letter-spacing: 0; }
.nb-filters input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--c2); }
@media (max-width: 380px) { .nb-filters { gap: 4px; } .nb-filters button { padding: 0 7px; font-size: 13px; letter-spacing: .5px; } }
#dexGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.slot {
  position: relative; width: 100%; aspect-ratio: 1; background: var(--paper); border: 3px solid var(--ink);
  display: grid; place-items: center; overflow: hidden; cursor: pointer; color: #666;
}
/* perf (PERF-11): slot fora da tela não é estilizado/pintado; a altura segue o aspect-ratio */
.slot { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.slot .n { position: absolute; top: 2px; left: 4px; font: 500 clamp(10px, 2.6vw, 12px)/1.1 var(--mono); }
.slot .sil { width: 66%; height: 58%; margin-top: -4px; display: grid; place-items: center; filter: brightness(0) opacity(.35); }
.slot .sil svg, .slot svg, .slot img { width: 100%; height: 100%; object-fit: contain; }
.slot > img, .slot > svg { width: 66%; height: 58%; margin-top: -4px; }
.rk-sprite { width: 100%; height: 100%; object-fit: contain; display: block; }
.rk-sprite-err { visibility: hidden; }
/* estrelas: sem tracking e no máximo 2.4vw — cinco cabem no ladrilho de 360px sem cortar as pontas */
.slot .sstars { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); font: 400 min(11px, 2.4vw)/1.2 var(--display); letter-spacing: 0; white-space: nowrap; }
.slot .sstars.dim { color: inherit !important; }
.slot.found { background: #fff; color: var(--ink); }
.slot.found .sil { filter: none; }
.slot.locked { background: var(--paper-dim2); border-color: var(--paper-line); color: #5a554b; }
.slot.locked .sil { filter: brightness(0) opacity(.18); }
/* cadeado desenhado (o ⚿ vinha de fonte de fallback: chave encaixotada no iOS, tofu no Android) */
.slot.locked::after, .nb-legend .lg-locked {
  content: ""; width: 9px; height: 11px; background: currentColor;
  -webkit-mask: var(--lock-svg) center / contain no-repeat; mask: var(--lock-svg) center / contain no-repeat;
}
.slot.locked::after { position: absolute; right: 4px; top: 3px; }
#screen-grimorio { --lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 5h8v7H1zM2.6 5V3.6a2.4 2.4 0 0 1 4.8 0V5H5.9V3.6a.9.9 0 0 0-1.8 0V5z'/%3E%3C/svg%3E"); }
.slot.apex { background: var(--ink); border-color: var(--ink); color: #fff; }
.slot.apex::before { content: '???'; position: absolute; inset: 0; display: grid; place-items: center; font: 400 15px var(--display); letter-spacing: 3px; }
.slot.apex .sil { display: none; }
.slot.partial { border-style: dashed; }
.slot.deciphered { border-color: var(--c1); }
/* fragmentos: no canto de CIMA (embaixo brigava com as estrelas); some no ladrilho bloqueado (cadeado) */
.frag-badge { position: absolute; right: 3px; top: 2px; font: 500 clamp(10px, 2.6vw, 12px)/1.1 var(--mono); color: color-mix(in srgb, var(--c1) 70%, #000); }
.slot.locked .frag-badge { display: none; }
.slot.hide { display: none; }
.dim { color: var(--muted) !important; }
.prog, .rarity-legend { display: none; }
/* busca/filtro sem resultado: aviso no papel (CSS puro: a grade tem ladrilhos e nenhum visível) */
.nb-empty { display: none; margin: 18px 0 0; padding: 14px 16px; border: 3px dashed var(--paper-line); font: 400 13px/1.45 var(--body); color: var(--muted); text-align: center; }
.nb-empty b { display: block; font: 400 18px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
#dexGrid:has(> .slot):not(:has(> .slot:not(.hide))) + .nb-empty { display: block; }
/* caderno vazio (nenhum desperto): chamada pro primeiro sigilo em vez de 150 silhuetas mudas */
.nb-zero { display: none; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; background: var(--ink); color: #fff; clip-path: var(--e-card); }
.nb-zero p { flex: 1; margin: 0; font: 400 12px/1.4 var(--body); color: var(--muted-ink); }
.nb-zero p b { display: block; font: 400 18px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: 3px; }
.nb-zero .bs-btn { flex: none; min-height: 44px; }
#screen-grimorio.is-zero .nb-zero { display: flex; }
/* rodapé: a LEGENDA é a própria faixa de tinta (fixa, sangra até a borda de baixo). A altura vem do
   conteúdo: padding de cima = altura da diagonal (14vw) onde o texto começa, embaixo + --sa-b —
   o texto nunca fica fora da faixa, quebre em 1 ou 2 linhas, com ou sem indicador de início */
.nb-legend {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 520px; margin: 0 auto;
  padding: calc(14vw + 4px) var(--gutter-r) calc(10px + var(--sa-b)) var(--gutter-l);
  background: var(--ink); clip-path: var(--e-foot);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font: 500 11px/1.2 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: #a5a5a5;
}
.nb-legend .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nb-legend .lg i { flex: none; width: 10px; height: 10px; display: inline-block; }
.nb-legend .lg-new { border: 2px solid #8a8a8a; }
.nb-legend .lg-found { background: #fff; }
.nb-legend .lg-apex { margin-left: auto; color: #fff; }

/* ============ RUNEKIN DETAIL (4f) ============ */
/* #dexEntry é flow-root: a margem do título NÃO colapsa pra fora (antes arrastava pôster, arte e meta
   94px pra baixo e o tipo/estrelas ficavam tinta sobre tinta). O pôster cobre o .dx-hero inteiro
   (top/bottom, não altura fixa): título e descrição longos nunca saem do laranja.
   --on-c1 = texto sobre o slab da câmara (tinta no laranja da Aurora, branco no roxo da Sombra) */
#screen-dex { color: #fff; padding-bottom: 40px; }
#dexEntry { display: flow-root; --on-c1: var(--ink); --dx-art: clamp(160px, 46vw, 220px); }
:root[data-chamber="sombra"] #dexEntry { --on-c1: #fff; }
.dx-hero { position: relative; display: flow-root; }   /* idem: a margem do título não vaza pra fora do herói */
.dx-poster { position: absolute; left: -40px; top: 14px; bottom: -20px; width: calc(100% + 80px); background: var(--c1); clip-path: var(--e-poster); transform: rotate(-6deg); z-index: 0; }
.dx-hero > *:not(.dx-poster):not(.dx-art):not(.dx-meta) { position: relative; z-index: 3; }
.dx-meta { position: absolute; right: 0; top: 32px; z-index: 3; max-width: 100%; text-align: right; font: 500 12px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--on-c1); }
.dx-art { position: absolute; right: -4px; top: 56px; width: var(--dx-art); height: var(--dx-art); filter: drop-shadow(0 10px 0 rgba(0,0,0,.35)); z-index: 2; display: grid; place-items: center; }
.dx-art img, .dx-art svg, .dx-art canvas { width: 100%; height: 100%; object-fit: contain; }
.dx-title { margin-top: 94px; color: var(--on-c1); max-width: 200px; }
.dx-title .bs-label { color: var(--on-c1); }
/* o nome (não o bloco: o rótulo tipo · ★ quebraria) para antes da arte — fitDexName desce o corpo até caber */
.dx-name { margin: 2px 0 0; max-width: min(200px, calc(100vw - var(--gutter-l) - var(--gutter-r) - var(--dx-art) + 16px)); font: 400 60px/.85 var(--display); text-transform: uppercase; word-break: keep-all; }
.dx-name.long { font-size: 44px; }
.dx-name.xlong { font-size: 34px; }
.dx-title .bs-chip { margin-top: 6px; font-size: 14px; clip-path: none; }
/* a descrição começa abaixo da arte (sem texto atravessando a criatura) */
.dx-flavor { margin: max(60px, calc(var(--dx-art) - 132px)) 0 0; font: 500 13px/1.5 var(--body); color: var(--on-c1); min-height: 40px; }
/* 60px: as colunas começam abaixo da ponta mais baixa do pôster (-6° → o canto esquerdo desce) */
.dx-cols { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; margin-top: 60px; }
.dx-cols .bs-label { color: var(--muted-ink); margin-bottom: 6px; display: block; letter-spacing: 1.5px; }   /* 1.5: 'SIEGEL · 25 MARKEN' numa linha (com 3px quebrava e desalinhava as colunas) */
.dx-sigil .recipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 2px; background: var(--paper); width: 150px; aspect-ratio: 1; margin: 0; }
.dx-sigil .recipe i { display: block; aspect-ratio: 1; }
.dx-sigil .recipe-dual { display: grid; gap: 8px; }
.dx-sigil .recipe-dual .recipe { width: 150px; }
.dx-sigil .recipe-cam { display: block; font: 400 11px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--muted-ink); margin: 6px 0 4px; }
.dx-sigil .bs-mono { display: block; max-width: 150px; margin-top: 6px; font-size: 11px; line-height: 1.35; letter-spacing: 1px; color: #9a9a9a; }
.dx-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.dx-chips > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 min(13px, 3.4vw) var(--display); text-transform: uppercase; border: 2px solid #fff; padding: 2px 4px; white-space: nowrap; }
.dx-chips > span:first-child { background: #fff; color: var(--ink); border-color: #fff; }
.dx-chips > span:only-child { grid-column: 1 / -1; white-space: normal; }
.dx-chips .rg-ic { width: 12px; height: 12px; vertical-align: -1px; }
/* 360–375pt: a coluna do sigilo cede 18px pra '×N' alemão caber na célula (no SE/mini a 375 a gravura
   cortava 'HEILUNG …') */
@media (max-width: 389px) {
  .dx-cols { grid-template-columns: 132px minmax(0, 1fr); }
  .dx-cols .bs-label { letter-spacing: 1px; font-size: 12px; }
  .dx-sigil .recipe, .dx-sigil .recipe-dual .recipe { width: 132px; }
  .dx-sigil .bs-mono { max-width: 132px; font-size: 10px; letter-spacing: 0; }   /* '7 PIEZAS · ORIENTADAS' numa linha */
}
/* EVOLUI: quebra em linhas (nível · número · silhueta+nome) em vez de empilhar "LV/10" e estourar a coluna */
.dx-evo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 15px var(--display); text-transform: uppercase; }
.dx-evo b, .dx-evo > span { white-space: nowrap; }
.dx-evo b { background: var(--c2); color: var(--ink); padding: 2px 8px; font-weight: 400; }
.dx-evo .dx-evo-to { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.dx-evo .dx-evo-to > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dx-evo .dx-evo-sil { flex: none; width: 28px; height: 28px; filter: brightness(0) invert(1) opacity(.7); }
.dx-evo .dx-evo-sil img, .dx-evo .dx-evo-sil svg { width: 100%; height: 100%; object-fit: contain; }
.dx-actions { display: flex; gap: 10px; margin-top: 30px; }
.dx-actions .bs-btn { flex: 1; min-width: 0; padding: 14px; font-size: clamp(17px, 5.2vw, 22px); white-space: normal; text-align: center; line-height: 1; }
.dx-pact { margin-top: 24px; }
.dx-pact .mix-hint { border: 3px solid #fff; padding: 12px; --mix-cell: 20px; }
.dx-pact .mix-hint-h { font: 400 15px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--c2); margin-bottom: 8px; }
.mix-shapes { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.mix-piece { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mix-shape { display: grid; gap: 3px; padding: 4px; background: var(--paper); }
.mix-shape i { width: var(--mix-cell, 14px); height: var(--mix-cell, 14px); }
.mix-shape i.off { background: transparent; }
.mix-piece span { font: 400 13px var(--display); text-transform: uppercase; }
.mix-piece small { font: 500 11px var(--mono); }
.mix-hint .detail-flavor::first-letter { text-transform: uppercase; }
.detail-flavor { font: 400 12px/1.45 var(--body); color: var(--muted); margin-top: 8px; }
.dx-pact .detail-flavor { color: var(--muted-ink); }
:lang(ko) .dx-name, :lang(ko) .summon-name, :lang(ko) .entry-name { line-height: 1.05; }

/* ============ DETAIL OVERLAY (unknown entry) + REVEAL ============ */
/* overlays: o fundo escurecido sangra até a borda; o cartão fica dentro das áreas seguras */
.overlay {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
  padding: max(20px, var(--sa-t)) max(20px, var(--sa-r)) max(20px, var(--sa-b)) max(20px, var(--sa-l));
  background: rgba(0,0,0,.55);
}
.overlay.show { display: grid; animation: bsFade .12s linear; }
@keyframes bsFade { from { opacity: 0; } to { opacity: 1; } }
.detail-card, .setup-card {
  position: relative; isolation: isolate; width: min(94vw, 460px); max-height: 92dvh; overflow-y: auto;
  padding: 24px 22px 20px; color: var(--ink); text-align: center;
  --face: var(--paper); --sh: var(--c2); --clip: var(--e-card);
}
.detail-card::before, .setup-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); clip-path: var(--clip); }
.detail-card::after, .setup-card::after { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sh); clip-path: var(--clip); transform: translate(8px, 8px); }
/* cartão do Caderno: centrado COM a sombra de 8px (translate -4px), cabe nas áreas seguras e rola o
   corpo (o cartão fica overflow visível pra sombra e o ✕ não rolarem junto) */
.detail-card { overflow: visible; width: min(calc(100vw - 48px - var(--sa-l) - var(--sa-r)), 460px); max-height: none; translate: -4px 0; }
#detailBody { max-height: calc(100dvh - max(20px, var(--sa-t)) - max(20px, var(--sa-b)) - 52px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
#detailBody::-webkit-scrollbar { display: none; }
.detail-card .sil { filter: brightness(0) opacity(.55); }
.entry-name { font: 400 40px/.9 var(--display); text-transform: uppercase; margin-top: 8px; }
.entry-no { font: 500 12px var(--mono); letter-spacing: 2px; color: var(--muted); margin-top: 4px; }
.entry-types { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.type-chip, .rg-types i { font: 400 12px var(--display); letter-spacing: 1px; text-transform: uppercase; font-style: normal; border: 2px solid currentColor; padding: 0 7px; color: var(--tc, inherit); }
.entry-stats { font: 400 12px var(--display); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.entry-flavor { max-width: 36ch; margin: 8px auto 0; }
.entry-class { color: var(--muted); }
/* raridade no papel: estrelas na cor do tier (com contorno de tinta pra ler no papel), vazias
   apagadas, e o NOME do tier em tinta (as cores pastel davam 1.6–2.6:1) */
.rarity-label { font: 400 15px var(--display); letter-spacing: 1px; text-transform: uppercase; }
.rarity-label .stars { color: var(--rc); letter-spacing: 1px; }
.rarity-label .st { -webkit-text-stroke: .6px rgba(17,17,17,.6); }
.rarity-label .st.off { opacity: .25; -webkit-text-stroke: 0; color: var(--muted); }
.rarity-label .rl-name { color: var(--ink); margin-left: 4px; }
.recipe-title { font: 400 13px var(--display); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
/* receita (recipe.js recipeCells): cada peça é o CONTORNO dela na própria cor (--rw) sobre um véu leve,
   e o vão entre peças diferentes é o tapete (--g), como na montagem da introdução. O miolo de cada casa
   fica na cor do tabuleiro: legível pra montar, mas não é um sigilo pra câmera ao vivo (o leitor pega o
   miolo) — montar na tela só na introdução (regra do dono de 2026-10-16; scripts/test-livescan.mjs) */
.recipe { --g: 3px; --rw: 3px; --rbg: var(--ink); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 2px; background: var(--ink); width: min(58vw, 160px); aspect-ratio: 1; margin: 8px auto 0; }
.recipe i { position: relative; display: block; aspect-ratio: 1; }
.recipe i b {
  position: absolute; inset: calc(var(--t) * var(--g)) calc(var(--r) * var(--g)) calc(var(--b) * var(--g)) calc(var(--l) * var(--g));
  border: 0 solid var(--c); border-width: calc(var(--t) * var(--rw)) calc(var(--r) * var(--rw)) calc(var(--b) * var(--rw)) calc(var(--l) * var(--rw));
}
.recipe i b::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: .16; }
/* canto de dentro (recipeCells <u class="k-…">): o contorno faz a curva em volta do tapete (--rbg) */
.dx-sigil .recipe, .rg-fragpanel .recipe, .rg-endv .rg-frag-inline .recipe { --rbg: var(--paper); }
.recipe i u { position: absolute; width: calc(var(--g) + var(--rw)); height: calc(var(--g) + var(--rw)); background: var(--c); }
.recipe i u::after { content: ""; position: absolute; width: var(--g); height: var(--g); background: var(--rbg); }
.recipe i .k-tl, .recipe i .k-tl::after { top: 0; left: 0; }
.recipe i .k-tr, .recipe i .k-tr::after { top: 0; right: 0; }
.recipe i .k-bl, .recipe i .k-bl::after { bottom: 0; left: 0; }
.recipe i .k-br, .recipe i .k-br::after { bottom: 0; right: 0; }
.recipe-dual { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.recipe-dual .recipe { width: min(40vw, 130px); }
.recipe-col { display: flex; flex-direction: column; align-items: center; }
.recipe-cam { font: 400 11px var(--display); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.frag-off { background: #2a2a2e; }
.recipe .frag-off { background: none; }
.recipe .frag-off::before { content: ""; position: absolute; inset: calc(var(--g) / 2); background: #2a2a2e; }
.frag-done { font: 400 15px var(--display); letter-spacing: 1px; text-transform: uppercase; color: var(--c1); margin-top: 14px; }
.detail-card .frag-done { color: var(--ink); font-size: 18px; text-decoration: underline 4px var(--c1); text-underline-offset: 4px; }
.frag-hints { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; font: 400 11px var(--body); color: var(--muted); }
.frag-hint { display: inline-flex; align-items: center; gap: 5px; border: 2px solid var(--ink); padding: 1px 8px; font: 400 12px var(--display); text-transform: uppercase; color: var(--ink); }
.frag-hint i { width: 10px; height: 10px; display: inline-block; }
.detail-card .mix-hint { border: 3px solid var(--ink); padding: 12px; margin-top: 12px; text-align: left; --mix-cell: 16px; }
.detail-card .mix-hint-h { font: 400 15px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--curse); margin-bottom: 8px; }
.detail-card .mix-shape { background: #fff; border: 2px solid var(--ink); }
/* sigilo decifrado: a chamada pra montar/escanear (antes o modal gritava "monte!" e só tinha ✕) */
.entry-cta { display: flex; gap: 10px; margin-top: 16px; }
.entry-cta .bs-btn { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.05; font-size: clamp(15px, 4.6vw, 18px); }
.entry-cta .bs-btn::after { display: none; }   /* sombra transparente transladada 4px: alargava a área de rolagem */
/* arte do cartão: encolhe em tela baixa (SE) pra o cartão decifrado caber sem rolar */
#detailStage { width: clamp(104px, 20dvh, 150px); height: clamp(104px, 20dvh, 150px); margin: 0 auto; }
/* ✕ ganha foco ao abrir: o anel fica DENTRO do botão (fora ele vazava do canto do cartão) */
.detail-card .rg-x:focus-visible { outline-offset: -6px; }
.pact-lock { display: inline-block; width: 10px; height: 12px; margin-right: 6px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--lock-svg) center / contain no-repeat; mask: var(--lock-svg) center / contain no-repeat; }
.detail-card { --lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 5h8v7H1zM2.6 5V3.6a2.4 2.4 0 0 1 4.8 0V5H5.9V3.6a.9.9 0 0 0-1.8 0V5z'/%3E%3C/svg%3E"); }
:lang(ko) .detail-card, :lang(ko) .dx-flavor, :lang(ko) .dx-pact { word-break: keep-all; overflow-wrap: break-word; }
:lang(ko) .recipe-title, :lang(ko) .mix-hint-h, :lang(ko) .frag-done, :lang(ko) .entry-no { letter-spacing: .5px; }

/* Despertar (scanner e demonstração da introdução) — 5h */
/* --panel-h: o painel de papel encolhe em tela baixa (300–360px) e cresce com o indicador de início;
   --sum-y: centro da criatura no MEIO do espaço entre o chip de cima e o painel (antes 37% fixo:
   no SE a diagonal do papel cortava os pés) */
.summon {
  --panel-h: clamp(300px, 42dvh, 360px);
  --sum-y: calc((100% - var(--panel-h) - var(--sa-b) + 86px + var(--top-shift)) / 2);
}
.summon { position: fixed; inset: 0; z-index: 400; overflow: hidden; background: var(--ink); color: #fff; animation: bsFade .15s ease both; }
.summon.out { animation: summonOut .2s ease forwards; pointer-events: none; }
@keyframes summonOut { to { opacity: 0; } }
/* sunburst: quadrado girando — o lado cobre o canto mais distante do centro (sem diamante no iPad
   nem raios cortados no meio da tela num celular alto) */
.summon-burst { position: absolute; left: 50%; top: var(--sum-y); width: max(700px, 150vmax); height: max(700px, 150vmax); transform: translate(-50%,-50%); background: repeating-conic-gradient(var(--c2) 0 6deg, transparent 6deg 12deg); opacity: .9; animation: burstSpin 60s linear infinite; }
@supports (width: hypot(1px, 1px)) {
  .summon-burst { width: calc(2 * hypot(50vw, 68dvh)); height: calc(2 * hypot(50vw, 68dvh)); }
}
@keyframes burstSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.summon-disc { position: absolute; left: 50%; top: var(--sum-y); width: 310px; height: 310px; transform: translate(-50%,-50%); background: var(--ink); border-radius: 50%; }
.summon-stage { position: absolute; left: 50%; top: var(--sum-y); width: 240px; height: 240px; transform: translate(-50%,-52%); display: grid; place-items: center; filter: drop-shadow(0 12px 0 rgba(0,0,0,.5)); }
.summon-stage img, .summon-stage svg, .summon-stage canvas { width: 100%; height: 100%; object-fit: contain; }
/* chip de cima: centrado, do tamanho do texto, nunca encostando nas bordas; a margem esquerda
   repõe o tracking que sobra depois da última letra (texto opticamente centrado) */
.summon-kicker {
  --ls: clamp(3px, 1.1vw, 6px);
  position: absolute; left: 50%; right: auto; top: calc(56px + var(--top-shift)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 48px); text-align: center; text-wrap: balance;
  font: 400 15px/1.25 var(--display); letter-spacing: var(--ls); text-transform: uppercase;
  color: var(--ink); background: var(--c2); padding: 5px 14px 5px calc(14px + var(--ls)); clip-path: var(--e-chip);
  z-index: 3;   /* acima dos anéis de choque (1) e das runas (2); abaixo do clarão (6) */
}
.summon-panel { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--panel-h) + var(--sa-b)); background: var(--paper); color: var(--ink); clip-path: var(--e-hdr-up); animation: panelUp .3s cubic-bezier(.2,.8,.2,1) both; text-align: center; }
@keyframes panelUp { from { transform: translateY(100%); } to { transform: none; } }
/* o miolo fica centrado entre a diagonal do papel e os botões */
.summon-panel .in {
  position: absolute; left: var(--gutter-l); right: var(--gutter-r); top: calc(14vw + 10px); bottom: calc(100px + var(--sa-b));
  display: flex; flex-direction: column; justify-content: safe center;
}
.summon-meta { font: 400 13px var(--display); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.summon-no { font: 500 .95em var(--mono); letter-spacing: 1px; }
.summon-name { margin: 4px 0 0; font: 400 60px/.85 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.summon-tag { display: inline-block; margin-top: 6px; background: var(--ink); color: #fff; padding: 2px 12px; font: 400 15px var(--display); letter-spacing: 4px; text-transform: uppercase; }
.summon-count { font: 400 12px var(--body); color: var(--muted); margin-top: 8px; }
/* Despertar da DEMONSTRAÇÃO (introdução sem câmera): selo vermelho ao lado do "desperto" */
.summon-tag.summon-demo { background: var(--c3); color: #fff; }
.summon-tag + .summon-tag.summon-demo { margin-left: 8px; }
.summon-stars { display: none; }
.summon-actions { position: absolute; left: max(28px, calc(50% - 220px), var(--gutter-l)); right: max(28px, calc(50% - 220px), var(--gutter-r)); bottom: calc(36px + var(--sa-b)); display: flex; gap: 10px; }
.summon-actions .bs-btn { flex: 1; padding: 12px; font-size: 22px; }
/* 3D: contorno de TINTA no papel (branco sobre papel sumia: 1.2:1) */
.summon-actions .bs-btn.line { flex: none; color: var(--ink); }
.summon .rk-sprite-err { visibility: visible; }
:lang(ko) .summon-kicker { --ls: 1px; }
:lang(ko) .summon-meta, :lang(ko) .summon-tag { letter-spacing: 1px; }
/* tablet: a criatura e o disco crescem com a tela (no iPad o momento ficava pequeno e esticado) */
@media (min-width: 600px) and (min-height: 900px) {
  .summon-stage { width: 320px; height: 320px; }
  .summon-disc { width: 410px; height: 410px; }
  .summon-shock span { width: 410px; height: 410px; margin: -205px 0 0 -205px; }
}
/* tela baixa (SE): o disco de 310px subia até o chip de cima */
@media (max-height: 700px) {
  .summon-disc { width: 270px; height: 270px; }
  .summon-stage { width: 210px; height: 210px; }
  .summon-shock span { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
}

/* ---- Despertar do scanner: sequência com suspense (fases por classe; ⚙️ tempos em scanner/ui.js) ----
   ph-charge (0 → --t1): tinta, as 7 runas (cores das peças) espiralam pro centro, chip "algo desperta…".
   ph-rise   (--t1 → --t2): clarão, o sunburst aparece girando rápido, anéis de choque, e a criatura
             se ergue em SILHUETA (quem será?). Nome e número ainda escondidos.
   ph-reveal (--t2): segundo clarão, a silhueta ganha cor, o painel sobe e o nome estampa. */
.summon-flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
/* decoração não recebe toque: os anéis terminam em scale(3.2) com fill both e cobriam CONTINUAR/3D
   (o toque caía no "toque pra avançar" do overlay — o 3D fechava a cerimônia) */
.summon-orbit, .summon-burst, .summon-disc, .summon-shock, .summon-shock span { pointer-events: none; }
.summon-panel { z-index: 2; }
.summon.ph-rise .summon-flash { animation: summonFlashA .5s ease-out both; }
.summon.ph-reveal .summon-flash { animation: summonFlashB .55s ease-out both; }
@keyframes summonFlashA { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes summonFlashB { 0% { opacity: 0; } 10% { opacity: .95; } 100% { opacity: 0; } }
.summon .summon-burst { opacity: 0; transform: translate(-50%,-50%) scale(.5); animation: none; }
.summon.ph-rise .summon-burst, .summon.ph-reveal .summon-burst { opacity: .9; animation: burstPop .5s cubic-bezier(.2,.9,.3,1) both, burstSpinFast 9s linear .5s infinite; }
.summon.ph-reveal .summon-burst { animation: burstSpin 60s linear infinite; transform: translate(-50%,-50%); }
@keyframes burstPop { from { opacity: 0; transform: translate(-50%,-50%) scale(.5); } to { opacity: .9; transform: translate(-50%,-50%) scale(1); } }
@keyframes burstSpinFast { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.summon .summon-disc { transform: translate(-50%,-50%) scale(0); }
/* na subida o disco é PAPEL: a silhueta preta precisa de fundo claro pra ler ("quem será?");
   na revelação ele volta a tinta atrás da arte colorida */
.summon.ph-rise .summon-disc { background: var(--paper); box-shadow: inset 0 0 0 6px var(--ink); }
.summon.ph-reveal .summon-disc { background: var(--ink); transition: background .25s ease; }
.summon.ph-rise .summon-disc, .summon.ph-reveal .summon-disc { animation: discPop .45s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes discPop { from { transform: translate(-50%,-50%) scale(0); } to { transform: translate(-50%,-50%) scale(1); } }
/* runas orbitando: quadradinhos chapados nas cores das peças, sombra dura */
.summon-orbit { position: absolute; left: 50%; top: var(--sum-y); width: 0; height: 0; z-index: 2; }
.summon-rune { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; background: var(--c); box-shadow: 4px 4px 0 rgba(0,0,0,.55); opacity: 0; animation: runeSpiral var(--t1, 1100ms) cubic-bezier(.45,.05,.3,1) infinite; }   /* infinite: se a arte ainda está baixando, a carga continua girando */
@keyframes runeSpiral {
  0%   { opacity: 0; transform: rotate(calc(var(--i) * 51.43deg)) translateX(190px) rotate(calc(var(--i) * -51.43deg)) scale(.3); }
  14%  { opacity: 1; }
  55%  { opacity: 1; transform: rotate(calc(var(--i) * 51.43deg + 210deg)) translateX(120px) rotate(calc(var(--i) * -51.43deg - 210deg)) scale(1.2); }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 51.43deg + 500deg)) translateX(0) rotate(0deg) scale(.15); }
}
.summon.ph-rise .summon-orbit, .summon.ph-reveal .summon-orbit { display: none; }
/* anéis de choque: linhas sólidas expandindo (papel na subida, cor da câmara na revelação) */
.summon-shock { position: absolute; left: 50%; top: var(--sum-y); z-index: 1; }
.summon-shock span { position: absolute; left: 0; top: 0; width: 310px; height: 310px; margin: -155px 0 0 -155px; border-radius: 50%; border: 4px solid var(--paper); opacity: 0; }
.summon.ph-rise .summon-shock span { animation: shockRing .9s ease-out both; }
.summon.ph-rise .summon-shock span:nth-child(2) { animation-delay: .14s; }
.summon.ph-rise .summon-shock span:nth-child(3) { animation-delay: .28s; border-color: var(--c2); }
.summon.ph-reveal .summon-shock span { animation: shockRing .8s ease-out both; border-color: var(--c2); }
.summon.ph-reveal .summon-shock span:nth-child(2) { animation-delay: .1s; border-color: #fff; }
.summon.ph-reveal .summon-shock span:nth-child(3) { animation-delay: .2s; }
@keyframes shockRing { 0% { opacity: 0; transform: scale(.2); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(3.2); border-width: 1px; } }
/* a criatura: nada → silhueta se erguendo → cor */
.summon .summon-stage { opacity: 0; transform: translate(-50%,-30%) scale(.25); }
.summon.ph-rise .summon-stage, .summon.ph-reveal .summon-stage { animation: summonRise .7s cubic-bezier(.2,.9,.3,1.25) both; }
.summon.ph-rise .summon-stage img, .summon.ph-rise .summon-stage svg, .summon.ph-rise .summon-stage canvas { filter: brightness(0); }
.summon.ph-reveal .summon-stage img, .summon.ph-reveal .summon-stage svg, .summon.ph-reveal .summon-stage canvas { animation: summonColor .55s ease-out both; }
@keyframes summonRise { from { opacity: 0; transform: translate(-50%,-30%) scale(.25); } 60% { opacity: 1; transform: translate(-50%,-56%) scale(1.06); } to { opacity: 1; transform: translate(-50%,-52%) scale(1); } }
@keyframes summonColor { 0% { filter: brightness(0); transform: scale(1); } 35% { filter: brightness(2.2); transform: scale(1.12); } 100% { filter: none; transform: scale(1); } }
/* chip de cima: "algo desperta…" pulsa até a revelação */
.summon.ph-charge .summon-kicker, .summon.ph-rise .summon-kicker { animation: kickerPulse 1.1s ease-in-out infinite; }
@keyframes kickerPulse { 0%, 100% { background-color: var(--c2); } 50% { background-color: #fff; } }
/* painel e nome: só na revelação */
.summon .summon-panel { transform: translateY(100%); animation: none; }
.summon.ph-reveal .summon-panel { animation: panelUp .32s cubic-bezier(.2,.8,.2,1) .05s both; }
.summon.ph-reveal .summon-name { animation: nameSlam .45s cubic-bezier(.2,.9,.3,1.3) .22s both; }
@keyframes nameSlam { from { opacity: 0; transform: scale(2.1); } 60% { opacity: 1; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.summon.ph-reveal .summon-meta, .summon.ph-reveal .summon-tag, .summon.ph-reveal .summon-count, .summon.ph-reveal .summon-actions { animation: bsFade .35s ease .5s both; }

@media (prefers-reduced-motion: reduce) {
  .summon-orbit, .summon-shock, .summon-flash { display: none; }
  .summon .summon-burst, .summon.ph-rise .summon-burst, .summon.ph-reveal .summon-burst { animation: none; opacity: .9; transform: translate(-50%,-50%); }
  .summon.ph-rise .summon-stage, .summon.ph-reveal .summon-stage, .summon.ph-reveal .summon-panel, .summon.ph-reveal .summon-name, .summon.ph-reveal .summon-stage img, .summon.ph-reveal .summon-stage svg { animation-duration: .01ms !important; animation-delay: 0s !important; }
  .summon .summon-disc { transform: translate(-50%,-50%); }
  .summon.ph-charge .summon-kicker, .summon.ph-rise .summon-kicker { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .summon-burst { animation: none; }
  .summon-stage, .summon-panel { animation-duration: .01ms; }
}