/* 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) ============ */
.rg-ov { position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,.5); display: grid; 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: #3a2a10; 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-bottomrow .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-bottomrow .bs-btn.svc::before, .rg-shopv .rg-bottomrow .bs-btn.svc::after { clip-path: none; }
.rg-shopv .rg-bottomrow .bs-btn.svc.plain { --face: transparent; }
.rg-shopv .rg-bottomrow .bs-btn.svc small { font: 400 10px var(--body); text-transform: none; }
.rg-shopv .rg-bottomrow .bs-btn.svc .rg-price { background: var(--ink); color: #fff; padding: 1px 7px; font-size: 16px; }
.rg-shopv .rg-bottomrow .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; }
.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 { margin: 14px 0 0 auto; width: 248px; grid-template-columns: repeat(5, 44px); gap: 4px; padding: 6px; background: var(--paper); aspect-ratio: auto; }
.rg-fragpanel .recipe i { width: 44px; height: 44px; }
.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 { width: 120px; grid-template-columns: repeat(5, 1fr); margin: 6px 0 0; padding: 4px; gap: 2px; 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; }

/* 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-pick-grid, body.rg-narrow .rg-shopv .rg-shop, body.rg-narrow .rg-shopv .rg-bottomrow, 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-bottomrow .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; }