/* 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; }
body.rg-land #screen-rogue.is-active { position: fixed; inset: 0; padding: 0; min-height: 0; overflow: hidden; background: var(--ink); z-index: 20; }
#rogueRoot { position: absolute; inset: 0; }
body:not(.rg-land) #rogueRoot { position: static; }
/* portrait interstitial: asks for the physical turn (rotation lock hint included) */
.rg-rotate {
  position: fixed; inset: 0; z-index: 30; 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 + env(safe-area-inset-top)) calc(32px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(32px + env(safe-area-inset-left));
}
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, Altar…) 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); } }
.rg-rotate .ph { width: 54px; height: 96px; border: 4px solid #fff; margin-bottom: 10px; animation: phTurn 1.8s ease-in-out infinite; }
@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; }
.rg-rotate p { margin: 0; font: 400 13px var(--body); color: var(--muted-ink); }
.rg-rotate .rg-rotate-lock { max-width: 260px; font-size: 12px; color: #888; }
.rg-rotate .rg-rotate-home { margin-top: 14px; color: var(--muted-ink); font: 400 15px var(--display); letter-spacing: 2px; text-transform: uppercase; border-bottom: 2px solid currentColor; }

.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 .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: #3a2a10; 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: 28px; padding: 5px 10px; font-size: 14px; letter-spacing: 2px; }
.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; animation: trailFlow 1s linear infinite; }
@keyframes trailFlow { to { stroke-dashoffset: -32; } }
.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; animation: herePulse 1.6s ease-in-out infinite; }
.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-floorlbl { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; fill: #777; }
.rg-floorlbl.cur { fill: var(--ink); }
@keyframes herePulse { 0%, 100% { stroke-width: 4; } 50% { stroke-width: 6; } }
.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); }