/* Runekin · css/stage.css — EXPLORE · palco landscape (#screen-rogue): .rg-scene numa referência 844×390.
   Em retrato o palco fica escondido atrás do pedido de rotação (.rg-rotate) até o aparelho girar de verdade —
   não existe mais palco girado por transform (teclado, área segura e 100dvh seguem a orientação física).
   Escala (--rg-k), área segura e sangria dos fundos: ver "área segura" em overrides.css.
   Fatia do antigo style.css (linhas 778–909); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============================================================
   EXPLORE — landscape stage (#screen-rogue). Everything inside is a
   .rg-scene: absolute composition on an 844×390 reference, anchored
   to the corners so other landscape sizes keep the same grammar.
   ============================================================ */
body.rg-land { overflow: hidden; }
body.rg-land .app { max-width: none; padding: 0; min-height: 0; }
/* overflow: clip (não hidden): recorta na borda física sem virar contêiner de rolagem — o foco num
   campo (Arena) não arrasta mais o palco inteiro pra cima */
body.rg-land #screen-rogue.is-active { position: fixed; inset: 0; padding: 0; min-height: 0; overflow: hidden; overflow: clip; background: var(--ink); z-index: 20; }
/* alvo de toque mínimo no palco escalado: 44pt efetivos = 44px / --rg-k em unidades de referência */
body.rg-land #screen-rogue { --tap: calc(44px / var(--rg-k)); }
#rogueRoot { position: absolute; inset: 0; }
body:not(.rg-land) #rogueRoot { position: static; }
/* portrait interstitial: asks for the physical turn (rotation lock hint included) */
/* z 250: acima da appbar (50), faixas de rodapé (40/41) e overlays (200), abaixo do Despertar (400)
   e do wipe (900). Laterais com o MAIOR inset dos dois lados: o cartão centralizado fica no centro
   do aparelho mesmo com recorte de um lado só (Android) */
.rg-rotate {
  position: fixed; inset: 0; z-index: 250; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink); background-image: var(--dots-ink); background-size: 5px 5px; color: #fff; text-align: center;
  padding: calc(32px + var(--sa-t)) calc(32px + max(var(--sa-l), var(--sa-r))) calc(32px + var(--sa-b));
}
body.rg-land.rg-portrait .rg-rotate:not(.rg-rotate-port) { display: flex; }
body.rg-land.rg-portrait #rogueRoot, body.rg-land.rg-portrait #rgLayer { visibility: hidden; }
/* the mirror image: the portrait shell (Home, Dex, Notebook…) on a PHONE held sideways asks for the
   turn back. Phones only — a short landscape viewport with a touch pointer; tablets and desktops
   keep the centred portrait column. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body:not(.rg-land) .rg-rotate-port { display: flex; }
}
/* (specificity beats the .rg-rotate .ph shorthand below, which would reset the name) */
.rg-rotate.rg-rotate-port .ph { animation-name: phTurnBack; }
@keyframes phTurnBack { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } }
/* o aparelho desenhado: moldura + alto-falante (::before) + barra de início (::after) — lê como
   celular num quadro parado e com movimento reduzido (sozinho, o retângulo parecia glifo faltando) */
.rg-rotate .ph { position: relative; width: 54px; height: 96px; border: 4px solid #fff; border-radius: 9px; margin-bottom: 10px; animation: phTurn 1.8s ease-in-out infinite; }
.rg-rotate .ph::before { content: ""; position: absolute; left: 50%; top: 5px; width: 16px; height: 4px; margin-left: -8px; border-radius: 2px; background: #fff; }
.rg-rotate .ph::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 20px; height: 3px; margin-left: -10px; border-radius: 2px; background: var(--c2); }
@keyframes phTurn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.rg-rotate h2 { margin: 0; font: 400 40px/.9 var(--display); text-transform: uppercase; text-wrap: balance; }
.rg-rotate p { margin: 0; max-width: 34ch; font: 400 13px/1.45 var(--body); color: var(--muted-ink); }
.rg-rotate .rg-rotate-lock { max-width: 260px; font-size: 12px; color: #9a9a9a; }
/* VOLTAR: a única saída de quem não gira — continua link sublinhado, mas com alvo de 44px */
.rg-rotate .rg-rotate-home { margin-top: 6px; min-height: 44px; padding: 12px 18px; color: var(--muted-ink); font: 400 15px var(--display); letter-spacing: 2px; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* tablet: "gire o tablet" (o título fala de celular) */
.rg-rotate .rg-t-tab { display: none; }
@media (min-width: 600px) and (min-height: 600px) { .rg-rotate .rg-t-phone { display: none; } .rg-rotate .rg-t-tab { display: inline; } }
:lang(ko) .rg-rotate .rg-rotate-home { letter-spacing: .5px; }
:lang(ko) .rg-rotate h2 { line-height: 1.1; }   /* hangul mais alto que a Staatliches: com .9 as 2 linhas se tocavam */

.rg-scene { position: absolute; inset: 0; overflow: hidden; color: #fff; font-family: var(--display); text-transform: uppercase; }
.rg-scene p, .rg-scene .rg-body { font-family: var(--body); text-transform: none; }
.rg-scene .bg { position: absolute; pointer-events: none; }
.rg-scene .bg.ink   { inset: 0; background: var(--ink); background-image: var(--dots-ink); background-size: 5px 5px; }
.rg-scene .bg.paper { inset: 0; background: var(--paper); background-image: var(--dots-paper); background-size: 5px 5px; }
.rg-scene .bg.c2page { inset: 0; background: var(--c2); background-image: var(--dots-paper); background-size: 5px 5px; }
.rg-scene .bg.paper-r { left: 200px; right: 0; top: 0; bottom: 0; background: var(--paper); background-image: var(--dots-paper); background-size: 5px 5px; clip-path: var(--e-paper); }
.rg-scene .bg.slab-l { left: 0; top: 0; bottom: 0; width: 236px; background: var(--c1); clip-path: var(--e-slab-l); }
.rg-scene .bg.slab-l.c2 { background: var(--c2); width: 246px; }
.rg-scene .bg.slab-l.ink { background: var(--ink); width: 250px; }
.rg-scene .bg.slab-l.w250 { width: 250px; }
.rg-scene .bg.hdr { left: 0; right: 0; top: 0; background: var(--ink); clip-path: var(--e-hdr); }
.rg-scene .bg.hdr.c3 { background: var(--c3); }
.rg-scene .bg.foot { left: 0; right: 0; bottom: 0; background: var(--ink); clip-path: var(--e-foot); }
.rg-scene .bg.foot.c2 { background: var(--c2); }
.rg-scene .bg.slab-r { right: 0; top: 0; bottom: 0; width: 380px; background: var(--ink); clip-path: var(--e-btl-r); }
.rg-scene .bg.poster { left: -40px; top: -30px; width: 520px; height: 450px; background: var(--c3); clip-path: var(--e-poster); transform: rotate(-6deg); }
.rg-scene .bg.dim { inset: 0; background: rgba(0,0,0,.5); }
.rg-scene .bs-label { display: block; }
.rg-scene .bs-hp { display: block; }

/* slab copy (chapter / title / chip / hint) */
.rg-slabtxt { position: absolute; left: 26px; top: 22px; color: var(--ink); width: 200px; }
.rg-slabtxt.light { color: #fff; }
.rg-slabtxt .nw { white-space: nowrap; }   /* 'TRILHA CURTA' não deixa 'CURTA' sozinha na linha */
.rg-slabtxt .rg-slabtitle { font-size: 46px; line-height: .85; margin-top: 4px; overflow-wrap: normal; }
.rg-slabtxt .rg-slabtitle.long { font-size: 36px; }
.rg-slabtxt .rg-slabtitle.xlong { font-size: 30px; }
.rg-slabtxt .rg-slabtitle.xl { font-size: 52px; }
.rg-slabtxt .bs-chip { margin-top: 10px; }
.rg-slabtxt p { margin: 8px 0 0; font-size: 11px; color: var(--on-c1, var(--ink)); max-width: 160px; line-height: 1.4; }
.rg-slabtxt.light p { color: var(--muted-ink); }
.rg-slabtxt .rg-dustbig { font-size: 64px; line-height: .9; }
.rg-slabtxt .rg-dustbig.sm { font-size: 48px; }
.rg-slabtxt .bs-label + .rg-dustbig { margin-top: 0; }
.rg-slabbot { position: absolute; left: 26px; bottom: 18px; color: var(--ink); width: 190px; }
.rg-slabbot.light { color: #fff; }
.rg-slabbot .rg-mono { font: 500 9px var(--mono); letter-spacing: 1px; white-space: nowrap; }
.rg-slabbot .rg-items { font-size: 15px; letter-spacing: 1px; margin-top: 2px; line-height: 1.2; }
.rg-slabbot .rg-items .rg-ic { width: 12px; height: 12px; vertical-align: -1px; }
.rg-slabbot .rg-slabbtns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rg-slabbot .rg-slabbtns .bs-btn { min-height: max(28px, calc(var(--tap, 0px) * .8)); padding: 5px 10px; font-size: 14px; letter-spacing: 2px; }   /* SE (k≈.8): 22pt → ~35pt */
.rg-slabbot .rg-slabbtns .bs-btn .rg-ic { width: 12px; height: 12px; }
.rg-home { position: absolute; z-index: 5; }
.rg-back { display: inline-flex; align-items: center; gap: 4px; }

/* top-right stack (legend / abandon) */
.rg-legend { position: absolute; right: 26px; top: 22px; display: grid; gap: 6px; text-align: right; color: var(--ink); max-width: 200px; }
.rg-legend div { font-size: 13px; line-height: 1.2; }
.rg-legend div .rg-ic { width: 12px; height: 12px; vertical-align: -1px; }
.rg-legend p { margin: 0; font-size: 11px; color: var(--muted); }
.rg-mapbtns { position: absolute; right: 26px; top: 150px; display: grid; gap: 8px; justify-items: end; }
.rg-mapbtns .bs-btn { min-height: 30px; padding: 4px 10px; font-size: 12px; letter-spacing: 2px; border: 3px solid var(--ink); --face: var(--paper); color: var(--ink); --clip: var(--e-chip); }
.rg-mapbtns .bs-btn::before, .rg-mapbtns .bs-btn::after { clip-path: none; }
.rg-traits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rg-trait { font-size: 11px; letter-spacing: 1px; border: 2px solid var(--ink); padding: 0 6px; color: var(--ink) !important; cursor: pointer; }
.rg-trait.t2 { background: var(--ink); color: #fff !important; }
.rg-trait.pact { display: inline-flex; align-items: center; gap: 3px; }
.rg-trait .rg-ic { width: 10px; height: 10px; }

/* the trellis */
.rg-mapsvg { position: absolute; left: 262px; right: 224px; top: 20px; bottom: 116px; }
.rg-map { width: 100%; height: 100%; display: block; overflow: visible; }
.rg-edge { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 8; }
.rg-edge.trod { stroke-dasharray: none; stroke-width: 6; }
.rg-edge.hot { stroke: var(--c1); stroke-width: 6; stroke-dasharray: 8 8; }
.rg-node { color: var(--muted); }
.rg-node polygon { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.rg-node.past polygon { fill: #bbb; }
.rg-node.open { cursor: pointer; color: var(--ink); }
.rg-node.open polygon { fill: var(--c1); stroke-width: 4; }
.rg-node.here polygon { fill: var(--ink); stroke: #fff; stroke-width: 4; }
.rg-node.here text { fill: var(--c2); font-family: var(--display); font-size: 16px; }
.rg-node.boss polygon { fill: var(--ink); stroke: var(--c3); stroke-width: 5; }
.rg-node.boss { color: #fff; }
.rg-node.boss.open polygon { stroke-width: 6; }
.rg-node .rg-node-ch { fill: none; stroke: var(--c2); stroke-width: 3; stroke-dasharray: 4 4; }
.rg-node svg { pointer-events: none; }
.rg-node-hit { fill: transparent; stroke: none; }   /* alvo de toque do nó aberto (map.js): 28pt → ~44pt no SE */
.rg-floorlbl { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; fill: #777; }
.rg-floorlbl.cur { fill: var(--ink); }
/* pulso do mapa (PERF-09): camada própria por cima do SVG (map.js mapFxHTML) que só anima opacidade
   — roda no compositor, o SVG não repinta. Halo na trilha 'hot' + contorno 4→6 do nó atual; descansa
   depois de 8 voltas (~13 s; map.js reacende no toque trocando o nome da animação) */
.rg-mapfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: rgMapPulse 1.6s ease-in-out 8; }
.rg-mapfx.alt { animation-name: rgMapPulse2; }
.rg-mapfx svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rg-mapfx .fx-edge { fill: none; stroke: var(--c1); stroke-width: 14; stroke-linecap: round; opacity: .35; }
.rg-mapfx .fx-here { fill: none; stroke: #fff; stroke-width: 6; }
@keyframes rgMapPulse { 50% { opacity: 1; } }
@keyframes rgMapPulse2 { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rg-mapfx { display: none; } }
.rg-terrain, .rg-here-ring { display: none; }

/* party cards */
.rg-party { position: absolute; left: 250px; right: 200px; bottom: 0; display: flex; gap: 10px; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 16px 12px 16px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rg-party::-webkit-scrollbar { display: none; }
.rg-party .rg-partylbl { flex: none; font-size: 11px; letter-spacing: 3px; color: var(--ink); writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 4px; }
.rg-pcard { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 4px; color: var(--ink); --sh: var(--ink); touch-action: pan-x; text-transform: uppercase; transform: rotate(var(--tilt, -2deg)); }
.rg-pcard:active:not([disabled]) { transform: rotate(var(--tilt, -2deg)) translate(4px, 4px); }
.rg-pcard .ord { font-size: 12px; color: #777; margin-left: 4px; }
.rg-pcard .art { width: 40px; height: 40px; display: grid; place-items: center; }
.rg-pcard .art img, .rg-pcard .art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-pcard .txt b { display: block; font-weight: 400; font-size: 15px; line-height: 1; white-space: nowrap; }
.rg-pcard .txt b small { font-size: 12px; color: #777; }
.rg-pcard .bs-hp { width: 70px; height: 6px; margin-top: 4px; }
.rg-pcard.dead { --face: var(--paper-dim); color: #777; }
.rg-pcard.dead .art { filter: grayscale(1) opacity(.5); }
.rg-pcard .rg-status { position: absolute; right: 4px; top: -8px; background: var(--curse); color: #fff; padding: 0 4px; font-size: 11px; }
.rg-pcard .rg-relic-mini { width: 10px; height: 10px; color: var(--c1); margin-right: 2px; }
.rg-drag-src { z-index: 2; --sh: var(--c2); }

/* ---- coreano: quebra por palavra e sem o espaçamento latino (lia "에 너 지", "가면 쓴 상 / 인") ----
   :lang(ko) casa com o ko-KR do <html> (i18n/dom.js); o id no seletor vence as regras de classe */
:lang(ko) #screen-rogue, :lang(ko) #rgLayer { word-break: keep-all; overflow-wrap: break-word; }
:lang(ko) #screen-rogue *, :lang(ko) #rgLayer * { letter-spacing: 0; }
/* alemão: trema não encosta na linha de cima do título do slab */
:lang(de) .rg-slabtxt .rg-slabtitle { line-height: .95; }
/* coreano no fim de run: Hangul cheio no em (fallback RK Hangul) com line-height .85 encaixava 가/졌
   uma linha na outra e encostava no "원정 종료" */
:lang(ko) .rg-endv .rg-slabtxt .rg-slabtitle { font-size: 64px; line-height: 1.05; margin-top: 8px; }