/* 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) ============ */
#screen-grimorio { padding-top: calc(56px + env(safe-area-inset-top)); padding-bottom: 110px; }
.nb-head { height: 250px; }
.nb-stripe { position: absolute; left: -30px; width: calc(100% + 60px); top: 196px; height: 26px; background: var(--c1); transform: rotate(-8deg); z-index: 0; }
.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-break { font: 400 12px var(--body); color: var(--muted-ink); margin-top: 4px; }
.nb-count .nb-txt { padding-bottom: 10px; }
.nb-filters { display: flex; gap: 6px; margin-top: 46px; flex-wrap: wrap; }
.nb-filters button { font: 400 13px var(--display); letter-spacing: 1px; text-transform: uppercase; border: 2px solid var(--ink); padding: 2px 10px; color: var(--ink); }
.nb-filters button.on { background: var(--ink); color: #fff; border-color: var(--ink); clip-path: var(--e-chip); }
.nb-filters .nb-search { margin-left: auto; }
.nb-filters input { width: 100%; margin-top: 6px; padding: 6px 10px; border: 3px solid var(--ink); background: #fff; font: 500 13px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.nb-filters input:focus { outline: 3px solid var(--c2); }
#dexGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px; }
.slot {
  position: relative; aspect-ratio: 1; background: var(--paper); border: 3px solid var(--ink);
  display: grid; place-items: center; overflow: hidden; cursor: pointer; color: #777;
}
.slot .n { position: absolute; top: 2px; left: 5px; font: 500 9px 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; }
.slot .sstars { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); font: 400 11px var(--display); letter-spacing: 1px; 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: #a8a090; }
.slot.locked .sil { filter: brightness(0) opacity(.18); }
.slot.locked::after { content: "⚿"; position: absolute; right: 4px; top: 1px; font: 400 11px var(--display); }
.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); }
.frag-badge { position: absolute; right: 4px; bottom: 3px; font: 500 9px var(--mono); color: var(--c1); }
.slot.hide { display: none; }
.dim { color: var(--muted) !important; }
.prog, .rarity-legend { display: none; }
.nb-foot { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; background: var(--ink); clip-path: var(--e-foot); z-index: 40; max-width: 520px; margin: 0 auto; }
.nb-legend { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 41; max-width: 520px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; font: 500 10px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: #888; }

/* ============ RUNEKIN DETAIL (4f) ============ */
#screen-dex { color: #fff; padding-bottom: 40px; }
.dx-poster { position: absolute; left: -40px; top: 14px; width: calc(100% + 80px); height: 300px; background: var(--c1); clip-path: var(--e-poster); transform: rotate(-6deg); z-index: 0; }
#dexEntry > *:not(.dx-poster):not(.dx-art):not(.dx-meta) { position: relative; z-index: 3; }
.dx-meta { position: absolute; right: 0; top: 8px; font: 500 12px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted-ink); }
.dx-art { position: absolute; right: -4px; top: 56px; width: 220px; height: 220px; 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 { width: 100%; height: 100%; object-fit: contain; }
.dx-title { position: relative; margin-top: 94px; color: var(--ink); max-width: 200px; z-index: 3; }
.dx-title .bs-label { color: var(--ink); }
.dx-name { margin: 2px 0 0; font: 400 60px/.85 var(--display); text-transform: uppercase; }
.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; }
.dx-flavor { margin: 60px 0 0; font: 400 13px/1.5 var(--body); color: #ddd; min-height: 40px; }
.dx-cols { display: grid; grid-template-columns: 150px 1fr; gap: 16px; margin-top: 18px; }
.dx-cols .bs-label { color: var(--muted-ink); margin-bottom: 6px; display: block; }
.dx-sigil .recipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 5px; 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; margin-top: 6px; color: #888; white-space: nowrap; }
.dx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-chips span { font: 400 13px var(--display); text-transform: uppercase; border: 2px solid #fff; padding: 0 7px; white-space: nowrap; }
.dx-chips span:first-child { background: #fff; color: var(--ink); border-color: #fff; padding: 2px 7px; }
.dx-chips span .rg-ic { width: 12px; height: 12px; vertical-align: -1px; }
.dx-evo { display: flex; align-items: center; gap: 8px; font: 400 15px var(--display); text-transform: uppercase; }
.dx-evo b { background: var(--c2); color: var(--ink); padding: 2px 8px; font-weight: 400; }
.dx-evo .dx-evo-sil { 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; padding: 14px; font-size: 22px; }
.dx-actions .bs-btn.line { flex: none; }
.dx-pact { margin-top: 14px; }
.dx-pact .mix-hint { border: 3px solid #fff; padding: 12px; }
.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: 14px; height: 14px; }
.mix-shape i.off { background: transparent; }
.mix-piece span { font: 400 13px var(--display); text-transform: uppercase; }
.mix-piece small { opacity: .6; }
.detail-flavor { font: 400 12px/1.45 var(--body); color: var(--muted); margin-top: 8px; }
.dx-pact .detail-flavor { color: var(--muted-ink); }

/* ============ DETAIL OVERLAY (unknown entry) + REVEAL ============ */
.overlay {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 20px;
  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); }
.detail-card { overflow: visible; }
.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); }
.recipe-title { font: 400 13px var(--display); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
.recipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 5px; background: var(--ink); width: min(58vw, 160px); aspect-ratio: 1; margin: 8px auto 0; }
.recipe i { display: block; aspect-ratio: 1; }
.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; }
.frag-done { font: 400 15px var(--display); letter-spacing: 1px; text-transform: uppercase; color: var(--c1); margin-top: 14px; }
.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; }
.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); }

/* Reveal (altar) + Awaken (scanner) — 5h */
#revealOverlay { background: var(--ink); padding: 0; }
.reveal-card { position: relative; width: 100%; height: 100%; overflow: hidden; }
.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; } }
.summon-burst, .reveal-burst { position: absolute; left: 50%; top: 37%; width: 700px; height: 700px; transform: translate(-50%,-50%); background: repeating-conic-gradient(var(--c2) 0 6deg, transparent 6deg 12deg); opacity: .9; animation: burstSpin 60s linear infinite; }
@keyframes burstSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.summon-disc, .reveal-disc { position: absolute; left: 50%; top: 37%; width: 310px; height: 310px; transform: translate(-50%,-50%); background: var(--ink); border-radius: 50%; }
.summon-stage, .reveal-stage { position: absolute; left: 50%; top: 37%; width: 240px; height: 240px; transform: translate(-50%,-52%); display: grid; place-items: center; filter: drop-shadow(0 12px 0 rgba(0,0,0,.5)); }
.reveal-stage { animation: summonArt .5s .1s cubic-bezier(.2,.9,.3,1.3) both; }
.summon-stage img, .summon-stage svg, .summon-stage canvas, .reveal-stage img, .reveal-stage svg, .reveal-stage canvas { width: 100%; height: 100%; object-fit: contain; }
@keyframes summonArt { from { opacity: 0; transform: translate(-50%,-40%) scale(.4); } to { opacity: 1; transform: translate(-50%,-52%) scale(1); } }
.summon-kicker, .reveal-kicker { position: absolute; left: 90px; right: 90px; top: calc(56px + env(safe-area-inset-top)); text-align: center; font: 400 15px var(--display); letter-spacing: 6px; text-transform: uppercase; color: var(--ink); background: var(--c2); padding: 5px 0; clip-path: var(--e-chip); }
.summon-panel, .reveal-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 360px; 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; } }
.summon-panel .in, .reveal-panel .in { position: absolute; left: 24px; right: 24px; top: 104px; }
.summon-meta, .reveal-meta { font: 400 13px var(--display); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.summon-name, .reveal-title { margin: 4px 0 0; font: 400 60px/.85 var(--display); text-transform: uppercase; }
.summon-tag, .reveal-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, .reveal-count { font: 400 12px var(--body); color: var(--muted); margin-top: 8px; }
.summon-stars, .reveal-stars { display: none; }
.summon-actions, .reveal-actions { position: absolute; left: 28px; right: 28px; bottom: calc(36px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.summon-actions .bs-btn, .reveal-actions .bs-btn { flex: 1; padding: 12px; font-size: 22px; }
.summon-actions .bs-btn.line, .reveal-actions .bs-btn.line { flex: none; }
.summon .rk-sprite-err { visibility: visible; }
/* ---- 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; }
.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: 37%; 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: 37%; 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% { opacity: 1; } 50% { opacity: .55; } }
/* 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, .reveal-burst { animation: none; }
  .summon-stage, .reveal-stage, .summon-panel, .reveal-panel { animation-duration: .01ms; }
}