/* Runekin · css/explore.css — EXPLORE · modais landscape (4d · 5d · 5e · nó · confirmação · info) e telas dos nós.
   Fatia do antigo style.css (linhas 1072–1503); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ LANDSCAPE MODALS (4d · 5d · 5e · node · confirm · info) ============ */
/* grid-template-rows: a linha do overlay é o palco (menos o padding), não o conteúdo — com a linha
   implícita `auto` o height/max-height 100% das folhas resolvia contra o próprio conteúdo e o Glossário
   (e o cartão de vitória) passavam da borda de baixo sem rolar */
.rg-ov { position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,.5); display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 22px 28px; text-transform: none; font-family: var(--body); }
.rg-ov.show { display: grid; }
.rg-ov > .rg-sheet { position: relative; isolation: isolate; color: var(--ink); width: 100%; height: 100%; --face: var(--paper); --sh: var(--c2); --clip: var(--e-card); font-family: var(--display); text-transform: uppercase; }
.rg-ov > .rg-sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); clip-path: var(--clip); }
.rg-ov > .rg-sheet::after  { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sh); clip-path: var(--clip); transform: translate(8px, 8px); }
.rg-ov > .rg-sheet.mid { width: min(100%, 664px); height: auto; max-height: 100%; }
.rg-ov > .rg-sheet.bottom { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 300px; --clip: var(--e-hdr-up); }
.rg-ov > .rg-sheet.bottom::after { display: none; }
.rg-ov p, .rg-sheet p { font-family: var(--body); text-transform: none; }
.rg-sheet .rg-close { position: absolute; right: 26px; bottom: 20px; }

/* 4d party modal */
.rg-umodal { display: grid; grid-template-columns: 150px minmax(0, 1fr) 180px; gap: 14px; padding: 16px 20px; align-content: start; }
.rg-um-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.rg-um-art .rg-badge { position: absolute; left: 0; top: 0; background: var(--ink); color: #fff; padding: 2px 8px; font-size: 14px; }
.rg-um-art .art { width: 140px; height: 150px; display: grid; place-items: center; filter: drop-shadow(4px 4px 0 var(--ink)); }
.rg-um-art .art img, .rg-um-art .art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-um-art .bs-label { color: var(--muted); font-size: 12px; letter-spacing: 2px; }
.rg-um-main .rg-um-head { display: flex; align-items: baseline; gap: 10px; }
.rg-um-main .rg-um-head b { font-weight: 400; font-size: 40px; line-height: .9; }
.rg-um-main .rg-um-head small { font-size: 16px; letter-spacing: 2px; color: var(--muted); }
.rg-um-main .bs-hp { margin-top: 8px; height: 12px; border-width: 3px; background: #fff; }
.rg-um-main .rg-mono { font: 500 10px var(--mono); margin-top: 3px; }
.rg-um-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.rg-um-stats .bs-stat { color: var(--ink); }
.rg-um-stats .bs-stat span { color: var(--muted); opacity: 1; }
.rg-um-relic { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 3px solid var(--ink); }
.rg-um-relic .ico { width: 30px; height: 30px; background: var(--c3); color: #fff; display: grid; place-items: center; flex: none; }
.rg-um-relic .ico .rg-ic { width: 16px; height: 16px; }
.rg-um-relic .ico.c { background: var(--ink); } .rg-um-relic .ico.e { background: var(--curse); }
.rg-um-relic b { font-weight: 400; font-size: 16px; line-height: 1; display: block; }
.rg-um-relic b em { font-style: normal; font-size: 11px; letter-spacing: 2px; margin-left: 4px; }
.rg-um-relic b em.r { color: var(--c3); } .rg-um-relic b em.e { color: var(--curse); } .rg-um-relic b em.c { color: var(--muted); }
.rg-um-relic small { display: block; font: 400 11px var(--body); text-transform: none; color: var(--muted); }
.rg-um-relic .bs-btn { margin-left: auto; min-height: 26px; padding: 2px 8px; font-size: 13px; letter-spacing: 2px; border-width: 2px; }
.rg-um-actions { margin-top: 10px; display: flex; gap: 6px; white-space: nowrap; flex-wrap: wrap; }
.rg-um-actions .bs-btn { min-height: 32px; padding: 6px 10px; font-size: 14px; letter-spacing: 1px; }
.rg-um-actions .bs-btn.line { border-width: 3px; }
.rg-um-actions .bs-btn.close { margin-left: auto; --face: var(--c2); color: var(--ink); --clip: var(--e-chip); letter-spacing: 2px; }
.rg-um-gv .bs-label { font-size: 12px; letter-spacing: 2px; white-space: nowrap; margin-bottom: 6px; }
.rg-um-gv .rg-gv-grid { --cell: 29px; }
.rg-um-gv .rg-gv-cell { cursor: default; }
.rg-um-gvinfo { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rg-um-gvinfo .rg-gv-ichip { font-size: 11px; padding: 0 5px; border: 2px solid var(--ink); background: transparent; color: var(--ink); }
.rg-um-gvinfo .rg-gv-ichip:first-child { background: var(--ink); color: #fff; }
.rg-um-gvinfo small { font: 400 10px var(--display); letter-spacing: 1px; color: var(--muted); width: 100%; }

/* node modal */
.rg-nmodal { padding: 18px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.rg-nmodal .rg-nm-head { display: flex; align-items: baseline; gap: 12px; }
.rg-nmodal .rg-nm-head h2 { margin: 0; font-weight: 400; font-size: 40px; line-height: .9; }
.rg-nmodal .rg-nm-count { font-size: 13px; letter-spacing: 3px; color: var(--muted); }
.rg-nmodal p { margin: 6px 0 0; font-size: 12px; color: var(--muted); max-width: 420px; }
.rg-nmodal .rg-pv { margin-top: 12px; }
.rg-nmodal .rg-teamlabel { font-size: 12px; letter-spacing: 3px; color: var(--muted); display: block; margin-bottom: 4px; }
.rg-pv-types { display: flex; gap: 4px; flex-wrap: wrap; }
.rg-pv-meta { font-size: 13px; letter-spacing: 2px; margin-top: 4px; }
.rg-pv-affix { display: inline-block; margin-top: 6px; font-size: 12px; letter-spacing: 1px; background: var(--ink); color: #fff; padding: 2px 8px; }
.rg-pv-affix.rg-ch.aurora { background: var(--c2); color: var(--ink); }
.rg-pv-affix.rg-ch.sombra { background: var(--curse); }
.rg-prevrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rg-prev { background: #fff; border: 3px solid var(--ink); padding: 6px; width: 96px; text-align: center; }
.rg-prev-art { height: 48px; display: grid; place-items: center; }
.rg-prev-art img, .rg-prev-art svg { max-height: 48px; max-width: 100%; }
.rg-prev .rg-unit-name { font-size: 13px; line-height: 1; margin-top: 4px; }
.rg-prev .rg-unit-name small { display: block; font-size: 10px; color: var(--muted); }
.rg-prev-lvl { font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-top: 2px; }
.rg-nm-side { display: grid; gap: 8px; justify-items: end; align-self: end; }
.rg-nm-nav { display: flex; gap: 8px; align-items: center; }
.rg-nm-nav .bs-btn.side { min-height: 40px; padding: 6px 12px; }
.rg-nm-nav .bs-btn.side .rg-ic { width: 14px; height: 14px; }

/* 5d satchel sheet */
.rg-bag .rg-bag-head { position: absolute; left: 26px; top: 36px; display: flex; align-items: baseline; gap: 14px; }
.rg-bag .rg-bag-head > b { font-weight: 400; font-size: 40px; line-height: 1; }
.rg-bag .rg-bag-head p { margin: 0; font-size: 12px; color: var(--muted); }
.rg-bag .rg-gv-baglist { position: absolute; left: 26px; right: 26px; top: 96px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rg-gv-bagitem { text-align: left; padding: 12px; --face: #fff; }
.rg-gv-bagitem.framed { border: 3px solid var(--ink); }
.rg-gv-bagitem .top { display: flex; justify-content: space-between; align-items: center; }
.rg-gv-bagitem .bi { width: 40px; height: 40px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.rg-gv-bagitem .bi .rg-gv-ic { width: 22px; height: 22px; }
.rg-gv-bagitem .bi.c1 { background: var(--c1); color: var(--ink); }
.rg-gv-bagitem .bi.curse { background: var(--curse); }
.rg-gv-bagitem .bn { font-size: 22px; }
.rg-gv-bagitem .bt { display: block; font-size: 22px; line-height: 1; margin-top: 10px; white-space: normal; }
.rg-gv-bagitem .bd { display: block; font: 400 11px/1.3 var(--body); text-transform: none; color: var(--muted); margin-top: 4px; }
.rg-gv-bagitem[disabled] { --face: var(--paper-dim); color: #777; opacity: 1; border-color: #999; }
.rg-gv-bagitem[disabled] .bi { background: #999; }
.rg-gv-bagitem.sel { --sh: var(--c2); transform: rotate(-1deg); }
.rg-bag-empty { position: absolute; left: 26px; top: 100px; font: 400 13px var(--body); text-transform: none; color: var(--muted); }

/* 5e switch modal */
.rg-swap { padding: 22px 26px; width: min(100%, 664px); }
.rg-swap h2 { margin: 0; font-weight: 400; font-size: 36px; line-height: 1; }
.rg-swap .rg-swgrid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 12px; align-items: center; margin-top: 16px; }
.rg-swrow { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 3px solid var(--ink); }
.rg-swrow.in { background: var(--ink); color: #fff; transform: rotate(-1.5deg); }
.rg-swrow .art { width: 70px; height: 70px; flex: none; display: grid; place-items: center; }
.rg-swrow .art img, .rg-swrow .art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-swrow .lbl { font-size: 13px; letter-spacing: 3px; color: var(--muted); }
.rg-swrow.in .lbl { color: var(--c2); }
.rg-swrow b { display: block; font-weight: 400; font-size: 26px; line-height: 1; }
.rg-swrow small { display: block; font: 500 10px var(--mono); margin-top: 4px; }
.rg-swap .rg-sw-arrow { font-size: 44px; text-align: center; }
.rg-swap .rg-swcost { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rg-swap .rg-swcost .tag { background: var(--c3); color: #fff; padding: 3px 10px; font-size: 16px; }
.rg-swap .rg-swcost p { margin: 0; font-size: 12px; color: var(--muted); }
.rg-swap .rg-swbtns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* battle over card (rewards / capture choice) */
.rg-btover { padding: 22px 26px; width: min(100%, 664px); }
.rg-btover h2 { margin: 0; font-weight: 400; font-size: 44px; line-height: .9; }
.rg-btover .rg-rewards { margin-top: 10px; font: 400 13px/1.6 var(--body); text-transform: none; max-height: 150px; overflow-y: auto; }
.rg-btover .rg-rewards .rg-ic { width: 13px; height: 13px; }
.rg-btover .rg-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rg-btover .rg-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* confirm / info / pick-unit (generic, landscape) */
.rg-confirm, .rg-info, .rg-pumodal { padding: 22px 26px; width: min(100%, 560px); }
.rg-confirm h2, .rg-info h2, .rg-pumodal h2 { margin: 0; font-weight: 400; font-size: 32px; line-height: .95; }
.rg-confirm .rg-btns, .rg-info .rg-btns, .rg-pumodal .rg-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.rg-info .rg-info-body { max-height: 220px; overflow-y: auto; margin-top: 10px; text-align: left; }
.rg-info-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 2px solid var(--ink); font: 400 13px/1.4 var(--body); text-transform: none; }
.rg-info-row:last-child { border-bottom: 0; }
.rg-info-row b { font: 400 14px var(--display); letter-spacing: 1px; text-transform: uppercase; }
.rg-pumodal .rg-pick-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rg-pumodal .rg-pick { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: #fff; border: 3px solid var(--ink); color: var(--ink); }
.rg-pumodal .rg-pick .rg-unit-art { width: 34px; height: 34px; display: grid; place-items: center; }
.rg-pumodal .rg-pick .rg-unit-art img, .rg-pumodal .rg-pick .rg-unit-art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-pumodal .rg-pick .rg-unit-name { font-size: 15px; line-height: 1; }
.rg-pumodal .rg-pick .rg-unit-hpnum { font: 500 9px var(--mono); color: #777; }
.rg-pumodal .rg-pick[disabled] { opacity: .35; }
.rg-pumodal .rg-pick .rg-relic { font-size: 10px; letter-spacing: 1px; color: var(--c1); }

/* evolution ceremony: ink stage, the old form pulses to a silhouette, then a
   sunburst blooms behind the new form (same grammar as Awaken) */
.rg-evo-ov { background: var(--ink); background-image: var(--dots-ink); background-size: 5px 5px; padding: 0; }
.rg-evo-ov > .rg-sheet.rg-evo { --face: transparent; --sh: transparent; width: 100%; height: 100%; overflow: hidden; }
.rg-evo-ov > .rg-sheet.rg-evo::before, .rg-evo-ov > .rg-sheet.rg-evo::after { display: none; }
.rg-evo-burst { position: absolute; left: 50%; top: 46%; width: 900px; height: 900px; transform: translate(-50%,-50%) scale(0); background: repeating-conic-gradient(var(--c2) 0 6deg, transparent 6deg 12deg); opacity: 0; animation: evoBurstIn .6s cubic-bezier(.2,.9,.3,1) 2.3s forwards, burstSpin 60s linear 2.3s infinite; }
@keyframes evoBurstIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(0); } 100% { opacity: .9; transform: translate(-50%,-50%) scale(1) rotate(0); } }
.rg-evo-ov .rg-evo-burst { animation: evoBurstIn .6s cubic-bezier(.2,.9,.3,1) 2.3s forwards, evoSpin 60s linear 2.9s infinite; }
@keyframes evoSpin { to { transform: translate(-50%,-50%) scale(1) rotate(360deg); } }
.rg-evo-disc { position: absolute; left: 50%; top: 46%; width: 250px; height: 250px; transform: translate(-50%,-50%); background: var(--ink); border-radius: 50%; }
.rg-evo-rings { position: absolute; left: 50%; top: 46%; }
.rg-evo-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; animation: evoRing .8s ease-out forwards; }
.rg-evo-rings span:nth-child(1) { animation-delay: 2.35s; }
.rg-evo-rings span:nth-child(2) { animation-delay: 2.5s; border-color: var(--c2); }
.rg-evo-rings span:nth-child(3) { animation-delay: 2.65s; border-color: var(--c1); }
@keyframes evoRing { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
.rg-evo-stage { position: absolute; left: 50%; top: 46%; width: 200px; height: 200px; transform: translate(-50%,-52%); filter: drop-shadow(0 10px 0 rgba(0,0,0,.5)); }
.rg-evo-stage img, .rg-evo-stage svg { width: 100%; height: 100%; object-fit: contain; }
.rg-evo-old, .rg-evo-new { position: absolute; inset: 0; }
.rg-evo-old { animation: evoOld 2.5s ease-in forwards; }
@keyframes evoOld { 0% { filter: none; opacity: 1; } 28% { filter: brightness(0) invert(1); } 42% { transform: scale(1.07); } 56% { transform: scale(.97); } 72% { transform: scale(1.1); } 100% { filter: brightness(0) invert(1); transform: scale(1.16); opacity: 0; } }
.rg-evo-new { opacity: 0; transform: scale(.4); animation: evoNew .55s cubic-bezier(.2,.9,.3,1.4) 2.4s forwards; }
@keyframes evoNew { 0% { opacity: 0; transform: scale(.4); filter: brightness(0) invert(1); } 40% { opacity: 1; filter: brightness(0) invert(1); } 100% { opacity: 1; transform: scale(1); filter: none; } }
.rg-evo-cap { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) rotate(-2deg); background: var(--paper); color: var(--ink); padding: 8px 18px; text-align: center; opacity: 0; animation: evoCap .3s ease-out 3s forwards; clip-path: var(--e-btn-a); white-space: nowrap; }
.rg-evo-cap .bs-label { color: var(--muted); font-size: 12px; }
.rg-evo-cap .rg-evo-name { display: block; font: 400 30px/1 var(--display); text-transform: uppercase; }
@keyframes evoCap { from { opacity: 0; transform: translate(-50%, 12px) rotate(-2deg); } to { opacity: 1; transform: translateX(-50%) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) {
  .rg-evo-old { animation: none; opacity: 0; }
  .rg-evo-new { animation: none; opacity: 1; transform: none; }
  .rg-evo-burst { animation: none; opacity: .9; transform: translate(-50%,-50%) scale(1); }
  .rg-evo-rings { display: none; }
  .rg-evo-cap { animation: none; opacity: 1; }
}

/* ============ NODE SCREENS ============ */
/* shared title block (left/top) */
.rg-titlerow { position: absolute; left: 26px; top: 18px; display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.rg-titlerow h1 { margin: 0; font-weight: 400; font-size: 40px; line-height: 1; }
.rg-titlerow .bs-label { color: inherit; }
.rg-subline { position: absolute; left: 26px; top: 64px; right: 26px; margin: 0; font-size: 12px; color: #3a2a10; }
.rg-scene.on-ink .rg-subline, .rg-scene.on-ink .rg-titlerow .bs-label { color: var(--muted-ink); }
.rg-bottomrow { position: absolute; left: 26px; right: 26px; bottom: 16px; display: flex; align-items: center; gap: 10px; }
.rg-bottomrow .spacer { flex: 1; }
.rg-bottomrow .bs-btn.line { min-height: 36px; padding: 6px 12px; font-size: 14px; letter-spacing: 2px; }
.rg-bottomrow p { margin: 0; font-size: 11px; color: var(--muted-ink); max-width: 260px; }
.rg-cta { padding: 8px 20px; font-size: 22px; }

/* 5a begin expedition */
.rg-pickv .rg-pick-grid { position: absolute; left: 280px; right: 26px; top: 26px; bottom: 82px; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 6px 6px 6px 0; scrollbar-width: none; align-items: flex-start; }
.rg-pickv .rg-pick-grid::-webkit-scrollbar { display: none; }
.rg-pick { flex: none; width: 128px; padding: 10px; text-align: center; color: var(--ink); --face: var(--paper); }
.rg-pick .rg-badge { position: absolute; left: 8px; top: 6px; background: var(--ink); color: #fff; padding: 0 6px; font-size: 13px; z-index: 1; }
.rg-pick .rg-unit-art { width: 90px; height: 100px; margin: 0 auto; display: grid; place-items: center; }
.rg-pick .rg-unit-art img, .rg-pick .rg-unit-art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-pick .rg-unit-name { font-size: 22px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-pick .rg-pick-stars { font-size: 12px; letter-spacing: 2px; color: var(--muted); }
.rg-pick .rg-loaner { display: block; font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-top: 2px; }
.rg-pick.sel { --face: #fff; --sh: var(--c2); --sx: 5px; --sy: 5px; transform: rotate(-1.5deg); }
.rg-pick.rg-locked { --face: #2a2a2e; color: #777; }
.rg-pick.rg-locked .rg-unit-art { font-size: 40px; }
.rg-pick.rg-locked .rg-unit-art img, .rg-pick.rg-locked .rg-unit-art svg { filter: brightness(0) invert(.4); }
.rg-seals { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.rg-seal { font-size: 15px; padding: 0 8px; border: 2px solid var(--ink); color: var(--ink); }
.rg-seal.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.rg-sealdesc { margin: 4px 0 0; font-size: 10px; color: var(--on-c1, var(--ink)); min-height: 14px; }

/* 4c wild draft */
.rg-draftv .rg-draft-grid { position: absolute; left: 26px; right: 26px; top: 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rg-draft-card { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 12px 14px; text-align: left; color: var(--ink); }
.rg-draft-card .rg-unit-art { width: 96px; height: 110px; display: grid; place-items: center; }
.rg-draft-card .rg-unit-art img, .rg-draft-card .rg-unit-art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-draft-card .rg-unit-name { font-size: 26px; line-height: 1; }
.rg-draft-card .rg-unit-meta { font-size: 13px; letter-spacing: 2px; color: var(--muted); }
.rg-draft-card .fx { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.rg-draft-card .fx span { font-size: 12px; padding: 1px 6px; border: 2px solid var(--ink); }
.rg-draft-card .fx span:first-child { background: var(--tc, var(--ink)); color: #fff; border-color: transparent; }
.rg-draft-card .selmark { margin-top: 8px; font-size: 12px; letter-spacing: 2px; color: var(--c2); display: none; }
.rg-draft-card.sel { --face: var(--ink); color: #fff; --sh: #fff; --sx: 6px; --sy: 6px; transform: rotate(-1.5deg); }
.rg-draft-card.sel .rg-unit-meta { color: var(--muted-ink); }
.rg-draft-card.sel .fx span { border-color: #fff; }
.rg-draft-card.sel .selmark { display: block; }
.rg-draft-card .rg-gv-ic { width: 11px; height: 11px; }

/* 4a trader */
.rg-shopv .rg-shop { position: absolute; left: 270px; right: 26px; top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; color: var(--ink); }
.rg-shopitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; --face: #fff; border: 3px solid var(--ink); }
.rg-shopitem .ico { width: 44px; height: 44px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.rg-shopitem .ico .rg-ic { width: 22px; height: 22px; }
.rg-shopitem .ico.c1 { background: var(--c1); color: var(--ink); }
.rg-shopitem .tx { flex: 1; min-width: 0; }
.rg-shopitem .tx b { display: block; font-weight: 400; font-size: 22px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-shopitem .tx small { display: block; font: 400 11px var(--body); text-transform: none; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-shopitem .rg-price { background: var(--ink); color: #fff; padding: 4px 10px; font-size: 20px; }
.rg-shopitem[disabled] { --face: var(--paper-dim); border-color: #999; color: #777; opacity: 1; }
.rg-shopitem[disabled] .ico { background: #999; }
.rg-shopitem[disabled] .rg-price { background: var(--paper-dim); color: #777; text-decoration: line-through; }
.rg-shopitem.sold .rg-price { display: none; }
.rg-shopv .rg-bottomrow { left: 270px; }
.rg-shopv .rg-svcrow .bs-btn.svc { min-height: 40px; padding: 6px 12px; font-size: 18px; letter-spacing: 1px; gap: 8px; border: 3px solid var(--ink); --face: var(--c1); color: var(--ink); }
.rg-shopv .rg-svcrow .bs-btn.svc::before, .rg-shopv .rg-svcrow .bs-btn.svc::after { clip-path: none; }
.rg-shopv .rg-svcrow .bs-btn.svc.plain { --face: transparent; }
.rg-shopv .rg-svcrow .bs-btn.svc small { font: 400 10px var(--body); text-transform: none; }
.rg-shopv .rg-svcrow .bs-btn.svc .rg-price { background: var(--ink); color: #fff; padding: 1px 7px; font-size: 16px; }
.rg-shopv .rg-svcrow .bs-btn.svc[disabled] { opacity: .4; }

/* 4b relic spoils */
.rg-relicv .rg-relics { position: absolute; left: 26px; right: 26px; top: 116px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rg-relicopt { padding: 16px 16px 14px; text-align: left; --face: var(--paper); color: var(--ink); }
.rg-relicopt .top { display: flex; justify-content: space-between; align-items: center; }
.rg-relicopt .ico { width: 44px; height: 44px; background: var(--ink); color: var(--c2); display: grid; place-items: center; }
.rg-relicopt .ico .rg-ic { width: 24px; height: 24px; }
.rg-relicopt .tier { padding: 2px 8px; font-size: 13px; letter-spacing: 2px; background: var(--ink); color: #fff; }
.rg-relicopt.r .ico { background: var(--c3); color: #fff; } .rg-relicopt.r .tier { background: var(--c3); }
.rg-relicopt.e .ico { background: var(--curse); color: #fff; } .rg-relicopt.e .tier { background: var(--curse); }
.rg-relicopt b { display: block; font-weight: 400; font-size: 28px; line-height: 1; margin-top: 12px; }
.rg-relicopt small { display: block; font: 400 12px/1.4 var(--body); text-transform: none; color: #333; margin-top: 6px; white-space: normal; }
.rg-relicopt .carried { display: inline-block; margin-top: 10px; background: var(--ink); color: #fff; padding: 2px 8px; font-size: 12px; letter-spacing: 2px; }
.rg-relicopt.sel { --face: #fff; --sh: var(--c2); --sx: 6px; --sy: 6px; transform: rotate(-1.5deg); }
.rg-carriers { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.rg-carriers::-webkit-scrollbar { display: none; }
.rg-relicv .rg-bottomrow .spacer { display: none; }
.rg-carrier { flex: none; white-space: nowrap; }
.rg-carrier { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 2px solid #fff; color: #fff; font-size: 15px; }
.rg-carrier img, .rg-carrier svg { width: 30px; height: 30px; object-fit: contain; }
.rg-carrier small { font-size: 11px; color: var(--muted-ink); }
.rg-carrier.sel { background: #fff; color: var(--ink); border-color: #fff; clip-path: var(--e-chip); }
.rg-carrier.sel small { color: var(--muted); }

/* 5b camp */
.rg-restv .rg-restopts { position: absolute; left: 26px; top: 96px; display: flex; gap: 12px; }
.rg-restopt { padding: 14px 18px; text-align: left; color: #fff; --face: transparent; border: 3px solid #fff; }
.rg-restopt b { display: block; font-weight: 400; font-size: 26px; line-height: 1; }
.rg-restopt small { display: block; font: 400 11px var(--body); text-transform: none; color: var(--muted-ink); margin-top: 4px; }
.rg-restopt.sel { --face: #fff; color: var(--ink); border-color: transparent; --sh: var(--c1); --sx: 5px; --sy: 5px; transform: rotate(-1.5deg); }
.rg-restopt.sel small { color: var(--muted); }
.rg-restopt[disabled] { color: #666; opacity: 1; }
.rg-teamrow-l { position: absolute; left: 26px; right: 26px; bottom: 20px; display: flex; gap: 14px; align-items: flex-end; color: var(--ink); }
.rg-teamrow-l .cards { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 6px 6px 6px 0; flex: 1; min-width: 0; }
.rg-teamrow-l .cards::-webkit-scrollbar { display: none; }
.rg-ucard { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 6px; color: var(--ink); }
.rg-ucard .art { width: 64px; height: 64px; display: grid; place-items: center; }
.rg-ucard .art img, .rg-ucard .art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-ucard b { display: block; font-weight: 400; font-size: 20px; line-height: 1; white-space: nowrap; }
.rg-ucard b small { font-size: 12px; color: #777; }
.rg-ucard .bs-hp { width: 120px; height: 8px; margin-top: 4px; }
.rg-ucard .bs-hp .gain { position: absolute; top: 0; bottom: 0; background: var(--heal); }
.rg-ucard .rg-mono { font: 500 10px var(--mono); margin-top: 2px; }
.rg-ucard.dead { --face: var(--paper-dim); color: #777; }

/* 5c event */
.rg-eventv .rg-evtext { position: absolute; left: 26px; top: 86px; width: 300px; font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0; }
.rg-eventv .rg-evart { position: absolute; left: 26px; bottom: 24px; width: 300px; height: 150px; background: repeating-linear-gradient(45deg, #e6dfcf 0 8px, var(--paper) 8px 16px); border: 3px solid var(--ink); display: grid; place-items: center; color: var(--ink); }
.rg-eventv .rg-evart .rg-ic { width: 64px; height: 64px; }
.rg-eventv .rg-evopts { position: absolute; left: 360px; right: 26px; top: 86px; bottom: 24px; display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.rg-evopt { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 18px; text-align: left; color: var(--ink); --face: #fff; border: 3px solid var(--ink); }
.rg-evopt .k { font-size: 14px; letter-spacing: 3px; color: var(--muted); }
.rg-evopt b { display: block; font-weight: 400; font-size: 24px; line-height: 1; margin-top: 4px; }
.rg-evopt small { display: block; font: 400 11px var(--body); text-transform: none; color: var(--muted); margin-top: 4px; }
.rg-evopt .arrow { font-size: 40px; }
.rg-evopt.a { --face: var(--ink); color: #fff; border-color: transparent; --sh: var(--c2); --sx: 5px; --sy: 5px; transform: rotate(-1deg); }
.rg-evopt.a .k { color: var(--c2); }
.rg-evopt.a small { color: var(--muted-ink); }
.rg-evopt[disabled] { opacity: .4; }

/* 5f chapter cleared */
.rg-clearedv .rg-slabtxt { width: 320px; }
.rg-clearedv .rg-slabtxt .rg-slabtitle { font-size: 64px; }
.rg-clearedv .rg-slabtxt p { max-width: 300px; font-size: 12px; }
.rg-clearedv .rg-fragpanel { position: absolute; right: 26px; top: 26px; width: 300px; color: #fff; text-align: right; }
.rg-fragpanel .bs-label { color: var(--c2); }
.rg-fragpanel .rg-fragn { font-size: 30px; line-height: 1; margin-top: 2px; }
.rg-fragpanel p { margin: 4px 0 0; font-size: 11px; color: var(--muted-ink); }
.rg-fragpanel .recipe { --g: 4px; margin: 14px 0 0 auto; width: 248px; grid-template-columns: repeat(5, 48px); gap: 0; padding: 4px; background: var(--paper); aspect-ratio: auto; }
.rg-fragpanel .recipe i { width: 48px; height: 48px; }
.rg-fragpanel .rg-mono { display: block; font: 500 10px var(--mono); color: var(--muted-ink); margin-top: 8px; letter-spacing: 1px; }
.rg-clearedv .rg-bottomrow { left: 26px; right: auto; }

/* 5g run recap */
.rg-endv .rg-slabtxt { left: 30px; top: 26px; width: 340px; color: #fff; }
.rg-endv .rg-slabtxt .rg-slabtitle { font-size: 84px; color: var(--ink); }
.rg-endv .rg-slabtxt p { color: #fff; max-width: 280px; font-size: 12px; margin-top: 10px; }
.rg-endv .rg-endart { position: absolute; left: 250px; bottom: 20px; width: 170px; height: 170px; transform: rotate(-8deg); filter: drop-shadow(0 8px 0 rgba(0,0,0,.4)); display: grid; place-items: center; }
.rg-endv .rg-endart img, .rg-endv .rg-endart svg { width: 100%; height: 100%; object-fit: contain; }
.rg-endv .rg-recap { position: absolute; right: 26px; top: 26px; width: 330px; display: grid; gap: 8px; }
.rg-recap .mvp { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: var(--ink); }
.rg-recap .mvp b { font-weight: 400; font-size: 24px; }
.rg-recap .rg-stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rg-recap .rg-stats3 .bs-stat { color: #fff; }
.rg-recap .rg-stats3 .bs-stat b { font-size: 30px; }
.rg-recap .rg-stats3 .bs-stat span { color: var(--muted-ink); opacity: 1; font-size: 11px; }
.rg-recap .ach { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--c2); color: var(--ink); clip-path: var(--e-chip); }
.rg-recap .ach b { font-weight: 400; font-size: 18px; }
.rg-recap .rg-endbtns { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.rg-recap .rg-endbtns .bs-btn { flex: 1; min-height: 38px; padding: 8px; font-size: 16px; letter-spacing: 2px; }
.rg-endv .rg-frag-inline { position: absolute; left: 30px; bottom: 20px; width: 200px; color: #fff; }
.rg-endv .rg-frag-inline .recipe { --g: 2px; --rw: 2px; width: 120px; grid-template-columns: repeat(5, 1fr); margin: 6px 0 0; padding: 2px; gap: 0; background: var(--paper); }
.rg-endv .rg-frag-inline .recipe i { width: auto; height: auto; aspect-ratio: 1; }

/* 6a engraver */
.rg-tutorv .rg-entsvcs { position: absolute; left: 280px; top: 22px; width: 240px; display: grid; gap: 8px; color: var(--ink); }
.rg-entsvc { padding: 10px 14px; text-align: left; --face: #fff; border: 3px solid var(--ink); color: var(--ink); }
.rg-entsvc .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rg-entsvc b { font-weight: 400; font-size: 24px; line-height: 1; }
.rg-entsvc .cost { font-size: 14px; letter-spacing: 2px; border: 2px solid currentColor; padding: 0 8px; white-space: nowrap; }
.rg-entsvc small { display: block; font: 400 11px/1.3 var(--body); text-transform: none; color: var(--muted); margin-top: 4px; white-space: normal; }
.rg-entsvc.sel { --face: var(--ink); color: #fff; border-color: transparent; --sh: var(--c2); --sx: 4px; --sy: 4px; transform: rotate(-1deg); }
.rg-entsvc.sel .cost { background: var(--c2); color: var(--ink); border-color: transparent; }
.rg-entsvc.sel small { color: var(--muted-ink); }
.rg-tutorv .rg-entunits { display: flex; gap: 6px; flex-wrap: wrap; }
.rg-tutorv .rg-entunits .bs-label { width: 100%; margin-top: 6px; }
.rg-tutorv .rg-entunits .bs-btn { min-height: 30px; padding: 3px 8px 3px 3px; font-size: 14px; letter-spacing: 0; gap: 4px; --face: transparent; border: 2px solid var(--ink); color: var(--ink); }
.rg-tutorv .rg-entunits .bs-btn::before, .rg-tutorv .rg-entunits .bs-btn::after { clip-path: none; }
.rg-tutorv .rg-entunits .bs-btn.sel { --face: var(--ink); color: #fff; border-color: transparent; clip-path: var(--e-chip); }
.rg-tutorv .rg-entunits .bs-btn img, .rg-tutorv .rg-entunits .bs-btn svg { width: 26px; height: 26px; object-fit: contain; }
.rg-tutorv .rg-entunits .bs-btn.faint { opacity: .45; }
.rg-tutorv .rg-entgrid { position: absolute; left: 548px; top: 22px; --cell: clamp(30px, calc((var(--rg-h, 390px) - 150px) / 5.6), 46px); }
.rg-tutorv .rg-ent-rots { position: absolute; left: 548px; top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; --cell: 20px; }
.rg-ent-rot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 3px solid transparent; color: var(--ink); font-size: 11px; letter-spacing: 1px; }
.rg-ent-rot.sel { border-color: var(--ink); background: #fff; }
.rg-ent-rot .rg-gv-cell { cursor: inherit; }
.rg-ent-rot .rg-gv-cell .rg-gv-ic { display: none; }
.rg-tutorv .rg-entmsg { position: absolute; left: 548px; right: 26px; top: calc(22px + var(--cell, 46px) * 5 + 22px + 12px); font: 400 11px/1.5 var(--body); text-transform: none; color: var(--ink); }
.rg-tutorv .rg-entmsg b { font-weight: 500; }
.rg-tutorv .rg-entmsg.ok b { color: var(--c1); }
.rg-tutorv .rg-ent-choice { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rg-tutorv .rg-ent-choice .bs-btn { min-height: 26px; padding: 2px 8px; font-size: 13px; letter-spacing: 0; --face: var(--ink); color: #fff; --clip: none; }
.rg-tutorv .rg-ent-choice .bs-btn .rg-gv-ic { width: 12px; height: 12px; }
.rg-tutorv .rg-entcounts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rg-tutorv .rg-entcounts .rg-gv-ichip { font-size: 11px; padding: 0 5px; border: 2px solid var(--ink); background: transparent; color: var(--ink); }
.rg-tutorv .rg-bottomrow { left: 280px; }

/* 6b elite of the seal */
.rg-elitev .rg-keepers { position: absolute; left: 26px; right: 26px; top: 132px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rg-keeper { padding: 14px; --face: var(--paper); color: var(--ink); text-align: left; }
.rg-keeper .k { font-size: 12px; letter-spacing: 3px; color: var(--muted); }
.rg-keeper b { display: block; font-weight: 400; font-size: 28px; line-height: 1; margin-top: 4px; }
.rg-keeper .ty { font-size: 13px; letter-spacing: 2px; color: var(--tc, var(--muted)); }
.rg-keeper .por { margin-top: 10px; height: 70px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #e6dfcf 0 6px, var(--paper) 6px 12px); color: var(--tc, var(--ink)); }
.rg-keeper .por .rg-ic { width: 40px; height: 40px; }
.rg-keeper.done { opacity: .55; }
.rg-keeper.next { --face: #fff; --sh: var(--c2); --sx: 6px; --sy: 6px; transform: rotate(-1.5deg); }
.rg-keeper.next .k { color: var(--c3); }
.rg-keeper.next .por { background: repeating-linear-gradient(45deg, #eee 0 6px, #fff 6px 12px); }
.rg-keeper.lock { --face: transparent; border: 3px solid #444; color: #777; }
.rg-keeper.lock .k, .rg-keeper.lock .ty { color: #777; }
.rg-keeper.lock .por { background: none; color: #777; font-size: 36px; }
.rg-partychips { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.rg-partychips::-webkit-scrollbar { display: none; }
.rg-pchip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: #fff; color: var(--ink); clip-path: var(--e-chip); font-size: 15px; }
.rg-pchip img, .rg-pchip svg { width: 30px; height: 30px; object-fit: contain; }
.rg-pchip small { font: 500 9px var(--mono); color: #777; }
.rg-pchip.dead { background: var(--paper-dim); color: #777; }
/* Elite do Selo: os chips da equipe abrem a ficha (ordem, poção, banco) e a mochila fica à mão */
.rg-pchipbtn { flex: none; display: inline-flex; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.rg-pchipbtn.bench { opacity: .78; }
.rg-elitev .rg-bottomrow .rg-partychips { flex: 1 1 auto; min-width: 0; }
.rg-elitev .rg-eliteitems { flex: none; margin-top: 0; flex-wrap: nowrap; }
.rg-elitev .rg-eliteitems .rg-ichip { width: 30px; height: 30px; }
.rg-elitev .rg-eliteitems .rg-ichip .rg-ic { width: 17px; height: 17px; }

/* fragment target / result (generic paper page) */
.rg-simplev .rg-cards { position: absolute; left: 26px; right: 26px; top: 96px; display: flex; gap: 14px; flex-wrap: wrap; }
.rg-simplev .rg-rewards { position: absolute; left: 26px; right: 26px; top: 96px; bottom: 80px; overflow-y: auto; font: 400 14px/1.7 var(--body); text-transform: none; color: var(--ink); }
.rg-simplev .rg-rewards .rg-ic { width: 14px; height: 14px; }
.rg-fragtarget { width: 150px; padding: 12px; text-align: center; color: var(--ink); --face: #fff; }
.rg-fragtarget .rg-unit-art { width: 90px; height: 90px; margin: 0 auto; display: grid; place-items: center; filter: brightness(0) opacity(.55); }
.rg-fragtarget .rg-unit-art img, .rg-fragtarget .rg-unit-art svg { width: 100%; height: 100%; object-fit: contain; }
.rg-fragtarget .rg-unit-name { font-size: 22px; }
.rg-fragtarget .rg-pick-stars { font-size: 12px; letter-spacing: 2px; color: var(--muted); }
.rg-fragtarget .rg-fragprog { display: block; font: 500 9px var(--mono); color: var(--c1); margin-top: 4px; }

/* narrow stages (short landscape phones): tighten the reference composition. rogue.js sets body.rg-narrow from the STAGE width */
body.rg-narrow .rg-scene .bg.slab-l { width: 200px; }
body.rg-narrow .rg-scene .bg.paper-r { left: 170px; }
body.rg-narrow .rg-slabtxt { width: 170px; } .rg-slabtxt .rg-slabtitle { font-size: 38px; }
body.rg-narrow .rg-mapsvg { left: 214px; right: 190px; }
body.rg-narrow .rg-party { left: 206px; }
body.rg-narrow .rg-legend { max-width: 170px; }
body.rg-narrow .rg-pickv .rg-pickwrap, body.rg-narrow .rg-shopv .rg-shop, body.rg-narrow .rg-shopv .rg-bottomrow, body.rg-narrow .rg-shopv .rg-svcrow, body.rg-narrow .rg-tutorv .rg-entsvcs, body.rg-narrow .rg-tutorv .rg-bottomrow { left: 230px; }
body.rg-narrow .rg-tutorv .rg-entsvcs { width: 200px; }
body.rg-narrow .rg-tutorv .rg-entgrid, body.rg-narrow .rg-tutorv .rg-ent-rots, body.rg-narrow .rg-tutorv .rg-entmsg { left: 450px; }
body.rg-narrow .bt-name { font-size: 36px; } .bt-art { width: 70px; height: 70px; }
body.rg-narrow .bt-foeart { right: 120px; width: 130px; height: 130px; }
body.rg-short .bt-art { width: 64px; height: 64px; } body.rg-short .bt-name { font-size: 34px; }
body.rg-short .rg-relicv .rg-relics { top: 100px; } body.rg-short .rg-relicopt b { font-size: 22px; margin-top: 6px; }

/* modals in portrait (stats) float over the page */
body:not(.rg-land) .rg-ov { position: fixed; z-index: 200; }
.rg-simplev .rg-bottomrow .bs-btn.line, .rg-eventv .rg-bottomrow .bs-btn.line { color: var(--ink); }
/* trader: never overflow the paper */
.rg-shopv .rg-shop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rg-shopitem { min-width: 0; padding: 8px 10px; }
.rg-shopitem .tx b { font-size: 20px; }
.rg-shopv .rg-bottomrow { flex-wrap: wrap; row-gap: 6px; }
.rg-shopv .rg-svcrow .bs-btn.svc { font-size: 16px; padding: 4px 10px; min-height: 36px; }
.rg-slabtxt .rg-dustbig .rg-ic { width: .55em; height: .55em; vertical-align: -.05em; }

/* scanner: show the real camera error so it can be diagnosed on device */
.scan-error small { display: block; font: 500 10px var(--mono); color: #888; letter-spacing: 1px; max-width: 300px; word-break: break-word; }
/* summary column never runs under the VS bar */
.bt-sum { width: auto; right: calc(50% + 24px); min-width: 120px; }

/* ============ palco · onda 2 (trilha C2): contraste, sobreposições, alvos de toque ============
   --tap = 44pt efetivos em unidades de referência (stage.css); no retrato não existe → valor de desenho */

/* contorno (.line) nas folhas de papel é tinta, não branco: VOLTAR da confirmação, ◂ ▸ e PASSAR do
   card da unidade, setas do nó (eram branco sobre papel/branco = invisíveis) */
.rg-ov > .rg-sheet .bs-btn.line { color: var(--ink); }
.rg-ov > .rg-sheet .bs-btn.line[disabled] { color: #9a9a9a; border-color: currentColor; opacity: 1; }
.rg-tutorv .rg-bottomrow { color: var(--ink); }

/* escolha de quem lidera: a grade começa abaixo do ‹ HOME (cobria o 4º card) e esmaece à direita
   quando há mais cards rolando (o 5º sumia sem pista) */
.rg-pickv .rg-pick-grid { top: 62px; }
.rg-seal { min-width: max(26px, calc(var(--tap, 0px) * .75)); min-height: max(22px, calc(var(--tap, 0px) * .75)); display: inline-grid; place-items: center; }

/* espólio de relíquia: colunas = opções; o portador ganha uma fileira própria (espremido entre
   RECUSAR e PEGAR, o 2º era cortado no meio do nome e o 3º sumia) */
.rg-relicv .rg-relics { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.rg-relicv .rg-carrierrow { position: absolute; left: 26px; right: 26px; bottom: 76px; display: flex; align-items: center; gap: 10px; }
.rg-relicv .rg-carrierrow .bs-label { flex: none; color: var(--muted-ink); font-size: 13px; }
.rg-relicv .rg-carriers { flex: 0 1 auto; gap: 8px; }
.rg-relicv .rg-bottomrow .spacer { display: block; }
.rg-carrier { min-height: max(32px, calc(var(--tap, 0px) * .85)); }
.rg-elitev .rg-keepers { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }

/* mercador: serviços numa fileira acima, CONTINUAR sozinho embaixo à direita (como em todo nó);
   a descrição do item em até 2 linhas (cortava "Fuga: num combate que não é chefe, o…") */
.rg-shopv .rg-svcrow { position: absolute; left: 270px; right: 26px; bottom: 76px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rg-shopv .rg-svcrow .bs-btn.svc { min-height: max(36px, calc(var(--tap, 0px) * .9)); }
.rg-shopitem .tx small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

/* capítulo concluído: o parágrafo alinhado à direita não cruza a diagonal do slab; a grade do sigilo
   encolhe no palco baixo (a linha mono de baixo caía no indicador de home) */
.rg-fragpanel p { max-width: 250px; margin-left: auto; }
.rg-clearedv { --rc: clamp(30px, calc((var(--rg-h, 390px) - 196px) / 5.4), 44px); }
.rg-clearedv .rg-fragpanel .recipe { width: calc(var(--rc) * 5 + 28px); grid-template-columns: repeat(5, calc(var(--rc) + 4px)); }
.rg-clearedv .rg-fragpanel .recipe i { width: calc(var(--rc) + 4px); height: calc(var(--rc) + 4px); }
/* evolução: o ✕ sai do canto do palco (canto arredondado quando não há inset do lado) */
.rg-evo .rg-x { top: 18px; right: 18px; }
/* recapitulação: título longo (alemão: 3 linhas a 84px) encolhe e não pisa no rótulo do sigilo */
.rg-endv .rg-slabtxt .rg-slabtitle.long { font-size: 60px; }

/* card da unidade: do tamanho do conteúdo (a folha inteira ficava 40% vazia); a Gravura desce pra
   não colar no ✕ */
.rg-ov > .rg-sheet.rg-umodal { height: auto; max-height: 100%; width: min(100%, 780px); }
.rg-umodal .rg-um-gv { padding-top: 30px; }
.rg-um-actions .bs-btn { min-height: max(32px, calc(var(--tap, 0px) * .9)); }
.rg-um-relic .bs-btn { min-height: max(26px, calc(var(--tap, 0px) * .8)); color: var(--ink); }
.rg-nm-nav .bs-btn.side { min-height: max(40px, var(--tap, 0px)); }
.rg-tutorv .rg-entunits .bs-btn { min-height: max(30px, calc(var(--tap, 0px) * .6)); }

/* abandonar a expedição: link de perigo, longe do ‹ HOME (o HOME fica no canto, como nas outras telas) */
.rg-mapv .rg-mapbtns { gap: 18px; }
.rg-mapv .rg-mapbtns .bs-btn.rg-abandon { order: -1; --face: transparent; border-color: transparent; color: var(--curse); text-decoration: underline; text-underline-offset: 3px; padding: 3px 2px; }
.rg-floorlbl { font-size: 13px; }

/* rascunho: "LV 1 · SELVA" e as estrelas quebram inteiros (sobrava "·" pendurado) */
.rg-draft-card .rg-unit-meta span { white-space: nowrap; }

/* vitória: o pôster é c2 — rótulo e texto em tinta (branco sobre amarelo); o rótulo do sigilo vira chip */
.rg-endv.won .rg-slabtxt, .rg-endv.won .rg-slabtxt p { color: var(--ink); }
.rg-endv .rg-frag-inline .bs-label { display: inline-block; background: var(--ink); color: var(--c2); padding: 1px 6px; }

/* equipe na batalha: quem está lutando é destaque (era o "desativado" a 35%, parecia caído) */
.rg-partymodal .rg-pick.active[disabled] { opacity: 1; position: relative; }
.rg-partymodal .rg-activetag { position: absolute; left: -3px; top: -13px; background: var(--ink); color: var(--c2); font: 400 12px/1.2 var(--display); letter-spacing: 1px; padding: 1px 6px; text-transform: uppercase; }

/* cor de tipo direto no papel (2:1): texto em tinta, a cor vira faixa/amostra */
.rg-pv-types i { color: var(--ink); border-color: var(--tc, var(--ink)); box-shadow: inset 5px 0 0 var(--tc, transparent); padding-left: 11px; }
.rg-keeper .ty { color: var(--ink); }
.rg-keeper .ty::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; background: var(--tc); border: 2px solid var(--ink); vertical-align: -1px; }
.rg-keeper.lock .ty::before { display: none; }

/* mochila: a folha tem a altura do conteúdo (300 fixos = metade vazia), chips no fluxo */
.rg-ov > .rg-sheet.bottom.rg-bag { height: auto; min-height: 210px; padding: 36px 84px 26px 26px; }
.rg-bag .rg-bag-head { position: static; flex-wrap: wrap; row-gap: 4px; }
.rg-bag .rg-itemchips.battle { position: static; margin-top: 20px; }
.rg-bag .rg-bag-empty { position: static; margin-top: 16px; }

/* texto secundário nunca abaixo de ~10pt no celular (o palco 844×390 encolhe por --rg-k)
   (max(desenho, 10pt): tablet/desktop, com --rg-k ≥ 1, ficam exatamente como antes) */
#screen-rogue :is(.rg-slabtxt p, .rg-bottomrow p, .rg-fragpanel p, .rg-shopitem .tx small, .rg-entsvc small, .rg-restopt small, .rg-evopt small) { font-size: max(11px, calc(10px / var(--rg-k, 1))); }
#screen-rogue :is(.rg-subline, .rg-relicopt small, .rg-clearedv .rg-slabtxt p, .rg-endv .rg-slabtxt p) { font-size: max(12px, calc(10px / var(--rg-k, 1))); }
#screen-rogue :is(.rg-legend p, .bt-sum .hint, .rg-mapv .rg-legend div, .rg-mapv .rg-legend .bs-label) { font-size: max(10px, calc(9.5px / var(--rg-k, 1))); }

/* ============ palco · onda 4 (trilha stage) ============ */
/* fim de run: a arte do líder encolhe no palco baixo (390 ref) em vez de subir no parágrafo
   (170 onde cabe — iPhone simétrico, SE — e 150 no Android/iPhone com inset de um lado só) */
.rg-endv .rg-endart { left: 270px; width: clamp(130px, calc(var(--rg-h, 390px) - 240px), 170px); height: clamp(130px, calc(var(--rg-h, 390px) - 240px), 170px); }
/* vitória com o sigilo escavado: título menor e grade menor, o chip ESCAVAÇÃO não pisa no parágrafo */
.rg-endv.has-frag .rg-slabtxt .rg-slabtitle { font-size: 66px; }
.rg-endv.has-frag .rg-slabtxt .rg-slabtitle.long { font-size: 52px; }
.rg-endv.has-frag .rg-frag-inline .recipe { width: 100px; }
/* Elite do Selo: o retrato tinge com o tipo do guardião (a classe de tom fixava o vermelho em todos) */
.rg-keeper:not(.lock) .por .rg-ic { --ic-b: var(--tc); }
/* Entalhador: grade e mensagem com a MESMA conta (--cell só existia na grade, irmã da mensagem: a
   mensagem ficava presa no 46 do fallback e as contagens/escolha caíam no CONTINUAR em 390 ref) */
.rg-tutorv .rg-entgrid { --cell: clamp(30px, calc((var(--rg-h, 390px) - 196px) / 5), 46px); }
.rg-tutorv .rg-entgrid ~ .rg-entmsg { top: calc(22px + clamp(30px, calc((var(--rg-h, 390px) - 196px) / 5), 46px) * 5 + 34px); }
/* mercador: a descrição inteira (até 4 linhas); a grade fica no alto e ainda sobra acima dos serviços */
.rg-shopitem .tx small { -webkit-line-clamp: 4; line-clamp: 4; }
/* escolha de quem lidera: a explicação do diário numa linha própria acima dos botões (espremida em
   110 ref, virava 6 linhas em alemão) */
.rg-pickv .rg-bottomrow { flex-wrap: wrap; row-gap: 8px; }
/* a linha é a fileira inteira (a quebra de linha do flex usa a base DEPOIS do max-width: com 440 o
   DIÁRIO subia pro lado do texto nos palcos largos do Android e o COMEÇAR caía sozinho); a medida de
   440 vira padding — % resolve contra a largura da fileira */
.rg-pickv .rg-bottomrow p { flex: 0 0 100%; max-width: none; box-sizing: border-box; padding-right: max(0px, calc(100% - 440px)); }
/* resultado do nó / alvo de escavação / evento: menos cara de rascunho */
.rg-simplev .rg-cards { justify-content: center; top: 104px; }
.rg-fragtarget { width: 190px; }
.rg-fragtarget .rg-unit-art { width: 110px; height: 110px; }
.rg-fragtarget .rg-fragprog { display: inline-block; font: 500 max(11px, calc(10px / var(--rg-k, 1))) var(--mono); background: var(--ink); color: var(--c2); padding: 1px 6px; }
.rg-eventv .rg-evart .rg-ic { width: 110px; height: 110px; }
/* portador da relíquia: o ícone da relíquia no texto não tem o tamanho da arte da criatura */
.rg-carrier > img, .rg-carrier > svg { width: 30px; height: 30px; object-fit: contain; }
.rg-carrier small .rg-ic { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
/* evolução: o sol é um círculo que cobre o canto mais longe da sangria em qualquer ângulo (o quadrado
   de 900 acabava em cortes retos perto da borda física) e os pontinhos vão até a borda */
.rg-evo-burst { width: 1120px; height: 1120px; border-radius: 50%; }
body.rg-land .rg-ov.rg-evo-ov { inset: calc(-1 * var(--bt, 0px)) calc(-1 * var(--br, 0px)) calc(-1 * var(--bb, 0px)) calc(-1 * var(--bl, 0px)); padding: var(--bt, 0px) var(--br, 0px) var(--bb, 0px) var(--bl, 0px); }
/* Trilha curta × expedição completa (quem lidera): duas linhas no pé da faixa, a escolhida em tinta e a
   explicação dela embaixo; com a expedição completa os Selos vêm logo abaixo */
.rg-trailpick { display: grid; gap: 4px; }
.rg-trailopt { display: flex; align-items: center; width: 100%; text-align: left; padding: 0 9px; border: 2px solid var(--ink); color: var(--ink); font-size: 15px; letter-spacing: 1px; min-height: max(26px, calc(var(--tap, 0px) * .75)); }
.rg-trailopt.sel { background: var(--ink); color: var(--c2); }
.rg-trailpick + .rg-sealdesc { margin-bottom: 8px; }
/* resumo da run: todas as conquistas novas (até 3 nomes + "+N") */
.rg-recap .ach { flex-wrap: wrap; gap: 2px 10px; }
.rg-recap .ach b { text-align: right; }
.rg-recap .ach b small { font-size: 13px; opacity: .7; }
/* equipe cheia, reaberto do save (recruit.js): o recruta à esquerda; tocar num card da equipe troca */
.rg-recruitv .rg-recruit-new { position: absolute; left: 26px; top: 92px; width: 250px; display: grid; gap: 6px; color: var(--ink); }
.rg-recruitv .rg-recruit-team { position: absolute; left: 300px; right: 26px; top: 92px; bottom: 74px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; gap: 12px 10px; overflow-y: auto; padding: 4px; color: var(--ink); }
.rg-recruit-slot { display: grid; gap: 3px; cursor: pointer; }
.rg-recruit-slot .rg-pcard { width: 100%; }
.rg-recruit-slot .bs-label { font-size: 11px; letter-spacing: 2px; color: var(--c3, #b4231e); }
/* quem lidera: o texto do pé da faixa acompanha a diagonal (78% embaixo) e não passa para o fundo
   escuro; com os Selos à mostra (quem já venceu) saem a dica da ordem e a linha da Trilha, para caber */
.rg-pickv .rg-slabbot :is(.rg-sealdesc, .rg-trailpick) { max-width: 172px; }
.rg-pickv.seals .rg-slabtxt p, .rg-pickv.seals .rg-trailpick + .rg-sealdesc { display: none; }
.rg-pickv.seals .rg-trailpick { margin-bottom: 10px; }

/* ============ RC (rodada de correções do palco) ============ */
/* quem lidera: nome inteiro em degraus (pick.js nameCls: >11 letras 17px, >14 15px) e o conteúdo do card
   no alto — o botão centralizava na vertical e o card com uma linha a mais subia o nome meia linha */
.rg-pick .rg-unit-name.long { font-size: 17px; }
.rg-pick .rg-unit-name.xlong { font-size: 15px; }
.rg-pickv .rg-pick { display: flex; flex-direction: column; justify-content: flex-start; }
/* slab amarelo (mercador) e página c2 (capítulo concluído): o texto é tinta — o --on-c1 da Sombra (branco)
   é do slab roxo, não do turquesa */
.rg-shopv .rg-slabtxt p, .rg-clearedv .rg-slabtxt p { color: var(--ink); }
/* texto secundário que ainda caía a ~7–8 px no celular (9–10 ref × --rg-k 0,79): a linha mono do pé do
   slab (mercador), a do painel do sigilo, a regra do Selo/Trilha e a nota do Laço; a do mercador quebra
   em vez de passar da largura do slab */
#screen-rogue :is(.rg-slabbot .rg-mono, .rg-fragpanel .rg-mono, .rg-sealdesc, .rg-trail-note) { font-size: max(10px, calc(9.5px / var(--rg-k, 1))); }
.rg-slabbot .rg-mono { white-space: normal; }
.rg-slabbot .rg-mono > span { white-space: nowrap; }
.rg-shopv .rg-slabbot { width: 170px; }  /* a diagonal do slab amarelo passa em ~196 ref no pé */
.rg-fragpanel .rg-mono { text-wrap: balance; }
/* quebras sem órfã: "EVOLUI NO NV. / II" (o NBSP no i18n segura o número) e "… Nada para / comprar." */
.rg-draft-card .rg-evoline, .rg-elitebag .rg-body { text-wrap: balance; }
/* alvos pequenos sem crescer o desenho (a coluna do resumo não tem altura sobrando no palco de 390): o
   EVOLUIR → do Laço, os botões do resumo e os Runekin "de quem" do Entalhador ganham margem invisível no
   ::after (a sombra do .bs-btn — transparente nesses), só até metade do vão vizinho */
.rg-trail-row > .bs-btn::after { inset: -6px -4px; background: transparent; clip-path: none; transform: none; }
.rg-recap .rg-endbtns .bs-btn::after { inset: -3px; background: transparent; clip-path: none; transform: none; }
.rg-tutorv .rg-entunits .bs-btn::after { inset: -3px; background: transparent; clip-path: none; transform: none; }
/* toast no alto cobria o cabeçalho de algumas telas: na Elite do Selo vai pro vão entre a escada e a
   equipe; no resumo, embaixo à esquerda sobre o pôster (cobria o rótulo do MVP); no mapa, à esquerda do
   ‹ INÍCIO / ABANDONAR (cobria o começo do link). Passa o toque (pointer-events: none) */
#screen-rogue:has(#rogueRoot .rg-elitev) #rgLayer > .rg-toast { top: 226px; }
#screen-rogue:has(#rogueRoot .rg-endv) #rgLayer > .rg-toast { top: auto; bottom: 18px; left: 30px; transform: none; max-width: 42%; }
#screen-rogue:has(#rogueRoot .rg-mapv) #rgLayer > .rg-toast { left: 250px; transform: none; max-width: 310px; }