/* Runekin — o LAÇO (Bond): o nó, o chip, o bloco da página do Runekin, a diferença de pedras, a
   cerimônia de evolução, o Chamado, "A trilha ensinou", a Herança e o selo da Arena. Carregado antes
   de arena.css/overrides.css. Áreas seguras só pelos tokens de tokens.css. */

/* ---- o nó e o chip ---- */
.bd-knot { width: 1.25em; height: .75em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; vertical-align: -.05em; }
.bd-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 4px; background: var(--ink); color: var(--c2); font: 400 13px/1.15 var(--display); letter-spacing: .5px; white-space: nowrap; }
.bd-chip.first { background: var(--c2); color: var(--ink); }
.bd-chip.ready { background: var(--c2); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 10px 2px var(--c2); animation: bdGlow 1.6s ease-in-out infinite alternate; }
@keyframes bdGlow { from { box-shadow: 0 0 0 2px var(--ink), 0 0 4px 0 var(--c2); } to { box-shadow: 0 0 0 2px var(--ink), 0 0 12px 3px var(--c2); } }
@media (prefers-reduced-motion: reduce) { .bd-chip.ready { animation: none; } }

/* Caderno: o chip no canto de cima, à direita (o nº fica à esquerda) */
.slot .bd-chip { position: absolute; top: 2px; right: 2px; padding: 0 3px 0 2px; gap: 1px; font-size: min(10px, 2.4vw); }
/* com chip, a arte desce um pouco: a cabeça não sobe na linha do nº + chip */
.slot:has(> .bd-chip) > :is(img, svg) { margin-top: 10px; height: 52%; }
.slot .bd-chip .bd-knot { width: 1.1em; }

/* ---- EXPLORE: o nó no cartão da equipe (mapa) ---- */
.rg-pcard .bd-chip.pc { position: absolute; left: -2px; bottom: -9px; font-size: 11px; border: 2px solid var(--ink); z-index: 2; }

/* ---- EXPLORE: escolha de quem lidera ---- */
.rg-pick .rg-pick-bond { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; }
.rg-pick .rg-pick-bond .bd-chip { font-size: 16px; padding: 2px 7px 2px 6px; }
.rg-slabtxt .rg-bondnote { margin-top: 6px; font-size: 11px; opacity: .85; }

/* ---- página do Runekin ---- */
.dx-bond { margin-top: 64px; padding: 14px 14px 12px; border: 3px solid #fff; position: relative; }
.dx-bond .bs-label { color: var(--muted-ink); display: block; }
.dx-bond .bd-first { font-style: normal; color: var(--c2); }
.bd-head { display: grid; gap: 4px; }
.bd-big { display: flex; align-items: center; gap: 8px; color: var(--c2); }
.bd-big .bd-knot { width: 46px; height: 26px; stroke-width: 2.4; }
.bd-big b { font: 400 54px/.9 var(--display); }
.bd-readychip { margin-left: auto; background: var(--c2); color: var(--ink); padding: 3px 8px; font: 400 14px var(--display); letter-spacing: 1px; }
.bd-bar { height: 10px; background: #2b2b2f; border: 2px solid #fff; }
.bd-bar i { display: block; height: 100%; background: var(--c2); }
.bd-left { font: 500 11px/1.4 var(--mono); letter-spacing: .5px; color: #b5b5b5; text-transform: uppercase; }
.bd-line { display: flex; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.bd-step { display: grid; justify-items: center; gap: 2px; width: 62px; }
.bd-step .bd-thumb, .bd-step img, .bd-step svg { width: 48px; height: 48px; object-fit: contain; }
.bd-step .bd-sil { filter: brightness(0) invert(1) opacity(.35); }
.bd-step small { font: 400 12px var(--display); letter-spacing: .5px; color: #9a9a9a; white-space: nowrap; }
.bd-step.awake small { color: #fff; }
.bd-step.ready small { color: var(--ink); background: var(--c2); padding: 0 5px; }
.bd-arrow { font-style: normal; color: #777; font: 400 22px var(--display); }
.bd-evo { margin-top: 14px; padding-top: 12px; border-top: 2px dashed #555; }
.bd-evo .bs-label { color: var(--c2); }
.bd-move { display: block; font: 400 30px/1 var(--display); text-transform: uppercase; margin-top: 2px; }
/* mover E trocar de caixa: a 2ª instrução embaixo, menor (bond/page.js) */
.bd-move .bd-box { display: block; margin-top: 4px; font: 700 13px/1.3 var(--body); text-transform: none; color: var(--c2); }
.bd-evo p { margin: 4px 0 0; font: 500 12px/1.45 var(--body); color: #cfcfcf; }
.bd-branches { display: flex; gap: 6px; margin: 6px 0 2px; }
.bd-branches .bs-btn { --face: #2b2b2f; padding: 2px; width: 44px; height: 44px; }
.bd-branches .bs-btn.on { --face: var(--c2); }
.bd-branches img, .bd-branches svg { width: 100%; height: 100%; object-fit: contain; }
.bd-boards { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.bd-boards figure { margin: 0; flex: 1; min-width: 0; display: grid; gap: 4px; }
.bd-boards .recipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 2px; background: var(--paper); width: 100%; aspect-ratio: 1; margin: 0; }
.bd-boards .recipe i { display: block; aspect-ratio: 1; }
.bd-boards figcaption { font: 400 13px var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-arrow.big { font-size: 30px; color: var(--c2); }
.bd-scan { display: block; width: 100%; margin-top: 12px; padding: 14px; font-size: clamp(18px, 5.4vw, 22px); }
.bd-sleep { margin-top: 12px !important; padding: 10px; background: #26262b; color: #fff !important; font-style: italic; }
.bd-keep { margin-top: 14px; }
.bd-keeprow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.bd-keeprow .bs-btn { --face: #2b2b2f; color: #fff; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 13px; min-height: 44px; }
.bd-keeprow .bs-btn.on { --face: var(--c2); color: var(--ink); }
.bd-keeprow .bd-thumb, .bd-keeprow img, .bd-keeprow svg { width: 30px; height: 30px; object-fit: contain; }
.bd-how { margin: 12px 0 0; font: 500 11px/1.45 var(--body); color: #a5a5a5; }

/* ---- cerimônia de evolução (portrait, por cima de tudo) ---- */
.bd-cer { position: fixed; inset: 0; z-index: 9000; background: var(--ink); background-image: var(--dots-ink); background-size: 5px 5px; color: #fff; overflow: hidden; }
.bd-cer.out { opacity: 0; transition: opacity .3s; }
.bd-cer-burst { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; transform: translate(-50%, -50%) scale(0); opacity: 0; background: repeating-conic-gradient(var(--c2) 0 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 46%); mask-image: radial-gradient(circle, #000 18%, transparent 46%); }
.bd-cer-rings { position: absolute; left: 50%; top: 42%; }
.bd-cer-rings span { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 4px solid #fff; transform: scale(0); opacity: 0; }
.bd-cer-stage { position: absolute; left: 50%; top: 42%; width: min(62vw, 260px); height: min(62vw, 260px); transform: translate(-50%, -50%); filter: drop-shadow(0 10px 0 rgba(0,0,0,.5)); }
.bd-cer-stage img, .bd-cer-stage svg { width: 100%; height: 100%; object-fit: contain; }
.bd-cer-old, .bd-cer-new { position: absolute; inset: 0; }
.bd-cer-new { opacity: 0; }
.bd-cer-kicker { position: absolute; left: var(--gutter-l); right: var(--gutter-r); top: calc(var(--sa-t) + 48px); text-align: center; font: 400 30px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; color: var(--c2); }
.bd-cer-panel { position: absolute; left: var(--gutter-l); right: var(--gutter-r); bottom: calc(var(--sa-b) + 28px); display: grid; justify-items: center; gap: 8px; text-align: center; opacity: 0; transform: translateY(20px);
  background: var(--ink); padding: 16px 16px 18px; box-shadow: 0 0 0 4px var(--c2); }
.bd-cer-panel .bs-label { color: var(--muted-ink); }
.bd-cer-name { font: 400 34px/1 var(--display); text-transform: uppercase; }
.bd-cer-bond { display: inline-flex; align-items: center; gap: 6px; color: var(--c2); }
.bd-cer-bond .bd-knot { width: 30px; height: 18px; stroke-width: 2.4; }
.bd-cer-bond b { font: 400 34px/1 var(--display); }
.bd-cer-bond small { font: 400 14px var(--display); letter-spacing: 2px; }
.bd-cer-go { min-width: 60%; padding: 14px 20px; font-size: 22px; }
@media (max-height: 700px) {
  .bd-cer-burst, .bd-cer-rings, .bd-cer-stage { top: 36%; }
  .bd-cer-stage { width: min(54vw, 220px); height: min(54vw, 220px); }
}
/* coreano: sem quebrar no meio da palavra (a cerimônia vive no <body>, fora do keep-all do palco) */
:lang(ko) .bd-cer :is(.bd-cer-name, .bd-cer-kicker) { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.1; }
/* fases: brilho (o seu Runekin acende) → piscadas entre as silhuetas → estouro e a forma nova */
.bd-cer.ph-glow .bd-cer-old { animation: bdOldGlow .9s ease-in forwards; }
.bd-cer.ph-flick .bd-cer-old { animation: bdFlickA .46s steps(1) infinite; filter: brightness(0) invert(1); }
.bd-cer.ph-flick .bd-cer-new { animation: bdFlickB .46s steps(1) infinite; filter: brightness(0) invert(1); }
.bd-cer.ph-reveal .bd-cer-old { opacity: 0; }
.bd-cer.ph-reveal .bd-cer-new { opacity: 1; animation: bdNewIn .55s cubic-bezier(.2,.9,.3,1.4) forwards; }
.bd-cer.ph-reveal .bd-cer-burst { animation: bdBurst .6s cubic-bezier(.2,.9,.3,1) forwards; }
.bd-cer.ph-reveal .bd-cer-rings span { animation: bdRing .8s ease-out forwards; }
.bd-cer.ph-reveal .bd-cer-rings span:nth-child(2) { animation-delay: .12s; border-color: var(--c2); }
.bd-cer.ph-reveal .bd-cer-rings span:nth-child(3) { animation-delay: .24s; border-color: var(--c1); }
.bd-cer.ph-reveal .bd-cer-panel { opacity: 1; transform: none; transition: opacity .3s .25s, transform .3s .25s; }
.bd-cer.ph-reveal .bd-cer-kicker { opacity: 0; transition: opacity .2s; }
.bd-cer.quick * { animation: none !important; transition: none !important; }
.bd-cer.quick.ph-reveal .bd-cer-burst { opacity: .9; transform: translate(-50%, -50%) scale(1); }
@keyframes bdOldGlow { to { filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff); } }
@keyframes bdFlickA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bdFlickB { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes bdNewIn { from { transform: scale(.5); filter: brightness(0) invert(1); } 60% { filter: none; } to { transform: none; filter: none; } }
@keyframes bdBurst { to { transform: translate(-50%, -50%) scale(1); opacity: .9; } }
@keyframes bdRing { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }

/* ---- EXPLORE: Chamado, "A trilha ensinou", Herança, a dica da evolução da trilha ---- */
.rg-chamado { width: 160px; }
.rg-chamado .rg-unit-art { filter: none; }
.rg-chamado .rg-pick-bond { display: flex; justify-content: center; margin-top: 6px; }
.rg-chamado-cards.many { flex-wrap: nowrap; overflow-x: auto; bottom: 80px; }
.rg-chamado-cards.many .rg-chamado { flex: none; }
.rg-trail { margin-top: 8px; padding: 6px 10px 7px; background: #fff; color: var(--ink); display: grid; gap: 4px; }
/* com "A trilha ensinou" o resumo da direita encolhe: MVP, os 3 números, as conquistas, o Laço e 2 fileiras
   de botões não cabiam na altura de referência dos palcos mais largos (o "Voltar" saía da tela) */
.rg-endv.has-bond .rg-recap { gap: 6px; top: 18px; }
.rg-endv.has-bond .rg-recap .mvp { padding: 6px 12px; }
.rg-endv.has-bond .rg-recap .mvp b { font-size: 20px; }
.rg-endv.has-bond .rg-recap .rg-stats3 .bs-stat { padding: 3px 4px; }
.rg-endv.has-bond .rg-recap .rg-stats3 .bs-stat b { font-size: 22px; }
.rg-endv.has-bond .rg-recap .ach { padding: 5px 12px; }
.rg-endv.has-bond .rg-recap .rg-trail { margin-top: 0; }
.rg-endv.has-bond .rg-recap .rg-endbtns { margin-top: 2px; gap: 6px; }
.rg-endv.has-bond .rg-recap .rg-endbtns .bs-btn { min-height: 34px; padding: 6px 8px; }
/* alemão: ESTATÍSTICA e WEITER JENSEITS DES SIEGELS não cabiam numa fileira (3 fileiras de botões) e os
   rótulos dos números quebravam em 2 linhas — a coluna passava ~11 ref do palco e o último par de
   botões entrava no inset de baixo */
.rg-endv.has-bond .rg-recap .rg-endbtns .bs-btn { font-size: 14px; letter-spacing: 1px; padding: 6px; }
.rg-endv.has-bond .rg-recap .rg-stats3 .bs-stat span { font-size: 10px; letter-spacing: 1px; }
.rg-trail .bs-label { color: var(--muted); }
.rg-trail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
/* o título do bloco não quebra (A TRILHA / ENSINOU); quem quebra é a nota da direita */
.rg-trail-head > .bs-label { flex: none; white-space: nowrap; }
.rg-trail-head .rg-trail-note { flex: 1 1 0; text-align: right; min-width: 0; }
/* nome + só o Laço de agora (bondui.js trailHTML) numa linha quando cabem; quando não (alemão: o
   ENTWICKELN → come a largura), o chip desce pra linha de baixo e o nome fica inteiro */
.rg-trail-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.rg-trail-top > b { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 16px/1 var(--display); text-transform: uppercase; }
.rg-trail-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.rg-trail-row .art { width: 32px; height: 32px; display: grid; place-items: center; }
.rg-trail-row .art img, .rg-trail-row .art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-trail-row .tx { display: grid; gap: 2px; min-width: 0; overflow: hidden; }
.rg-trail-row > .bs-btn { white-space: nowrap; }
.rg-trail-row .tx > b { font: 400 16px/1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-trail-lv { display: flex; align-items: center; gap: 4px; font: 400 13px var(--display); flex: none; }
.rg-trail-lv small { font: 500 11px var(--mono); color: var(--muted); margin-left: 4px; }
.rg-trail-row.up .rg-trail-lv .bd-chip:last-of-type { background: var(--c2); color: var(--ink); }
.rg-trail-bar { height: 6px; background: var(--paper-dim2); }
.rg-trail-bar i { display: block; height: 100%; width: var(--f); background: var(--ink); }
.rg-trail-note { margin: 0; font: 500 10px/1.25 var(--body); color: var(--muted); text-transform: none; }
.rg-ov > .rg-sheet.mid.rg-confirm.rg-heirsheet { width: min(100%, 600px); min-width: 0; }
.rg-heirsheet p { margin: 8px 0 0; font-size: max(13px, calc(12px / var(--rg-k, 1))); line-height: 1.4; }
.rg-heirsheet .rg-heir-grid { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: visible; overflow-y: auto; max-height: calc(var(--rg-h, 390px) - 230px); max-width: 100%; min-width: 0; padding: 4px 2px 8px; margin: 10px 0 4px; position: static; }
.rg-heirsheet .rg-heir { width: 116px; flex: none; --face: #fff; }
.rg-heirsheet .rg-heir .rg-unit-art { width: 70px; height: 70px; }
.rg-heirsheet .rg-heir .rg-unit-name { font-size: 17px; }
.rg-heirsheet .rg-heir .rg-unit-name.long { font-size: 15px; }
.rg-heirsheet .rg-heir .rg-unit-name.xlong { font-size: 13px; }
/* "Laço de agora → o de depois" (linha evoluída passa do número do texto): os dois selos cabem nos 116px */
.rg-heirsheet .rg-heir .rg-pick-bond { gap: 3px; }
.rg-heirsheet .rg-heir .rg-pick-bond .bd-chip { font-size: 14px; padding: 2px 5px 2px 4px; }
.rg-evo-cap .rg-evo-hint { display: block; margin-top: 4px; font: 500 11px/1.3 var(--body); text-transform: none; color: var(--muted); white-space: normal; max-width: 320px; }

/* ---- Arena: "Laço 27 → joga no 20" no slot ---- */
.ar-slot .ar-bond { position: absolute; top: 4px; left: 4px; z-index: 2; pointer-events: none; font-size: 12px; }
.ar-slot .ar-bond i { font-style: normal; color: #fff; margin-left: 2px; }
.rg-chamado .rg-chamado-lv { font: 400 13px var(--display); color: var(--muted); margin-left: 6px; }
.bd-evo p, .bd-how, .bd-left, .rg-trail-note, .rg-heirsheet p { word-break: keep-all; overflow-wrap: anywhere; }