/* Roguee game page (/roguee/). Loaded after site.css; every class here starts with rg- so nothing
   collides with the studio styles. Plan: roguee/design/site/PAGE_PLAN.md.
   House rules kept here:
   - pixel art only at whole-number scales, image-rendering: pixelated;
   - every motion uses steps(), never smooth easing;
   - every loop stops under "Pause animations" (html.rg-paused, set by roguee.js) and under
     prefers-reduced-motion (the Pause box starts checked; without JavaScript the media query does it);
   - no raw hex below this first block: the page's own colours live here, the rest are site variables. */

:root {
  --rg-warn: #ff9a7a;      /* the build's UI coral: GRIM and SLIM, red downside lines on relics */
  --rg-common: #a596b0;    /* rarity "common" (gear and cards) */
  --rg-magic: #7fa8d8;     /* gear "magic"; the card rarity "uncommon" uses the same colour, as in the build */
  --rg-rare: #a98ce8;      /* gear "rare" */
  --rg-heroic: #e8913a;    /* gear "heroic" */
  --rg-cream: #fdf8eb;     /* sweep core, the picked card's outline */
  --rg-steel: #aeb9cb;
  --rg-cape: #a82329;
  --rg-ice: #7fdceb;
  --rg-smoke: #9792ae;
  --rg-sky0: #0b112e;      /* the hero sky's top band: the hero's own background continues it */
  --rg-brick: #101638;     /* the Drill Yard brick, under tile-brick.png while it loads */
  --rg-xp: var(--necro);   /* the XP bar in the sweep demo and the Power slider */
  --rg-subnav: 48px;       /* sub-nav height */
}

/* anchors land below the sticky header and the sub-nav (on phones the sub-nav doesn't stick) */
html { scroll-padding-top: calc(88px + var(--rg-subnav)); }
@media (max-width: 720px) { html { scroll-padding-top: 76px; } }

/* The studio header's button reads "Play Backline free" on this page (it is another game, not Roguee):
   keep it on one line, a little smaller on phones so it fits beside the logo. */
.site-header .nav .btn { white-space: nowrap; }
@media (max-width: 720px) { .site-header .nav a.btn { font-size: 17px; margin-left: 6px; padding: 0 6px; } }

/* Pixelify's "fi" ligature draws an "A": switch ligatures off for the whole page */
main { font-variant-ligatures: none; }

/* things that only work with JavaScript start hidden; keep [hidden] stronger than any display rule */
main [hidden] { display: none !important; }

/* small type helpers: Press Start 2P only at 8 px steps, numbers always in Press Start */
.rg-ps16 { font-family: var(--head); font-size: 16px; line-height: 1.5; }
.rg-ps24 { font-family: var(--head); font-size: 24px; line-height: 1.4; }
.rg-ps48 { font-family: var(--head); font-size: 48px; line-height: 1.2; }
.rg-goldc { color: var(--gold); }
/* numbers inside prose: Pixelify's "5" reads as "S" ("1S minutes"), so important numbers use Press Start */
.rg-n { font-family: var(--head); font-size: 16px; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.rg-big { font-size: 23px; line-height: 1.45; }
.rg-note { font-size: 15px; color: var(--muted); margin: 8px 0 0; }
.rg-quote { color: var(--gold); }
.rg-warn { color: var(--rg-warn); font-style: normal; }
@media (max-width: 720px) { .rg-big { font-size: 20px; } .rg-ps48 { font-size: 32px; } }

/* ------------------------------------------------------------------ status chips and media badges
   A chip always says its word; the square only repeats it. Built = mint square, development = gold
   square, planned = a hollow square (plum-light with a magic-light ring: "not built yet"). */
.rg-chip {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  font-family: var(--body); font-weight: 600; font-size: 16px; line-height: 1.25;
  padding: 1px 7px; margin: 3px 3px 3px 3px; white-space: nowrap;
  background: var(--plum); color: var(--bone);
  box-shadow: 0 -3px 0 var(--plum), 0 3px 0 var(--plum), -3px 0 0 var(--plum), 3px 0 0 var(--plum);
}
.rg-chip::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--necro); }
.rg-chip--built { color: var(--necro-light); }
.rg-chip--dev { color: var(--gold-light); }
.rg-chip--dev::before { background: var(--gold); }
.rg-chip--planned { color: var(--magic-light); }
.rg-chip--planned::before { background: var(--plum-light); box-shadow: inset 0 0 0 3px var(--magic-light); }
/* inside a .panel the fill is already plum: the chip steps down to night so it still reads as a box */
.panel .rg-chip, .rg-stop .rg-chip, .rg-rung .rg-chip, .rg-hero-card .rg-chip, .rg-plan .rg-chip {
  background: var(--night);
  box-shadow: 0 -3px 0 var(--night), 0 3px 0 var(--night), -3px 0 0 var(--night), 3px 0 0 var(--night);
}
.rg-ftext > .rg-chip, .rg-knight-text > .rg-chip, .note > .rg-chip { margin: 0 3px 12px; }

/* the site's .badge, but sitting in the text flow instead of pinned 30 px above its parent */
.badge.rg-badge-inline { position: static; transform: none; display: inline-block; vertical-align: middle; margin: 3px 6px 3px 3px; }

/* "Dim what's planned": dims the children of every planned block, never its chip. CSS-only through
   :has(); roguee.js also sets html.rg-dim for browsers without :has(). */
html:has(#rg-dim:checked) [data-status="planned"] > :not(.rg-chip),
html.rg-dim [data-status="planned"] > :not(.rg-chip) { filter: saturate(0.35) brightness(0.75); }
/* the carousel thumb of the town art preview is one image: dim it whole */
html:has(#rg-dim:checked) .rg-thumb[data-status="planned"] > img,
html.rg-dim .rg-thumb[data-status="planned"] > img { filter: saturate(0.35) brightness(0.75); }

/* ------------------------------------------------------------------ hero
   The key art is 640x180 native, shown at a whole scale s. The copy already makes the hero about
   560 px tall, so the art can be 540 px (s = 3) from 700 px of window height on windows at least
   1100 px wide: that covers 1280x720, 1366x768 and 1536x864, the common laptop windows, where s = 2
   left the Knight about 50 px tall. s = 4 needs a tall AND wide window, so the Knight (170 art px
   from the right edge) stays clear of the copy. roguee.js reads --rg-s for the parallax. */
.rg-hero {
  --rg-s: 2;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: calc(180px * var(--rg-s));
  padding: 0;                              /* not the 72 px every other section gets */
  background: var(--rg-sky0);              /* taller than the art: the sky's top band simply continues */
}
@media (min-height: 700px) and (min-width: 1100px), (min-height: 880px) { .rg-hero { --rg-s: 3; } }
@media (min-height: 1060px) and (min-width: 1600px) { .rg-hero { --rg-s: 4; } }

.rg-hero-art {
  position: absolute; right: 0; bottom: 0;
  width: calc(640px * var(--rg-s)); height: calc(180px * var(--rg-s));
}
.rg-layer {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%;
  image-rendering: pixelated; will-change: transform;
}
/* The layer files load only where the layers are shown (wide screens with motion allowed). Without
   JavaScript the layers still stack into the same picture; with it, the canvas replaces the actors. */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .rg-l-sky { background-image: url("../img/roguee/page/hero-sky.png"); }
  .rg-l-far { background-image: url("../img/roguee/page/hero-far.png"); }
  .rg-l-firs { background-image: url("../img/roguee/page/hero-firs.png"); }
  .rg-l-ground { background-image: url("../img/roguee/page/hero-ground.png"); }
  .rg-l-actors { background-image: url("../img/roguee/page/hero-actors.png"); }
}
/* reduced motion: the one merged picture, no layers, no canvas */
@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
  .rg-hero-art { background: url("../img/roguee/page/hero-flat.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
  .rg-layer { display: none !important; }
}
.rg-hero.rg-live .rg-l-actors { visibility: hidden; }
#rg-hero-scene { display: block; }

/* the fog: fog.png at 3x drifting left along the bottom edge, one art pixel per step */
.rg-fog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
  background: url("../img/roguee/page/fog.png") 0 0 / 768px 96px repeat-x; image-rendering: pixelated;
  animation: rg-fog 64s steps(256) infinite;
}
@keyframes rg-fog { to { background-position: -768px 0; } }

/* The site's dark gradient behind the copy, plus a fade into the page at the bottom. The side gradient
   ends just past the copy column (whose right edge is 50% + 96 px on wide windows), not at a fixed
   share of the width, so the Knight at s = 3 is never dimmed. */
.rg-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 92%, transparent) 0, color-mix(in srgb, var(--ink) 75%, transparent) max(600px, calc(50% + 40px)), transparent max(720px, calc(50% + 160px))),
    linear-gradient(0deg, var(--ink) 0%, transparent 16%);
}
/* The copy is packed tight on purpose: at 1440x900 the hero plus the sub-nav must leave the top of
   the media row above the fold. It sits in the free height; the caption strip takes the bottom. */
.rg-hero-main { position: relative; z-index: 2; margin-block: auto; padding-top: 18px; padding-bottom: 12px; }
.rg-hero-copy { max-width: 640px; }
.rg-hero-copy .eyebrow { margin-bottom: 6px; }
.rg-nw { white-space: nowrap; }                   /* phrases that must not break in the middle */
.rg-h1 { margin: 0 0 -6px; font-size: 16px; line-height: 1; }        /* the logo's last rows are empty */
.rg-h1 img { width: 348px; height: 120px; image-rendering: pixelated; }
@media (min-height: 700px) and (min-width: 1100px), (min-height: 880px) and (min-width: 721px) {
  .rg-h1 img { width: 464px; height: 160px; }    /* 4x of 116x40, beside the 3x art */
}
.rg-pitch { font-size: 23px; line-height: 1.4; margin: 0 0 12px; max-width: 640px; text-shadow: 0 2px 0 var(--ink); }
.rg-slogan { font-family: var(--head); font-size: 16px; line-height: 1.5; margin: 0 0 10px; display: inline-block; }
.rg-hit { font-family: var(--head); font-size: 16px; line-height: 1.5; color: var(--bone); margin: 0; text-shadow: 0 3px 0 var(--ink); }
.rg-hit-label { color: var(--gold); }
.rg-hit-note { font-size: 17px; color: var(--muted); margin: 4px 0 0; }
.rg-platforms { margin: 12px 0 16px; }
.rg-hero-btns { margin: 0; }
@media (min-width: 900px) { .rg-hero-btns { flex-wrap: nowrap; } }

/* the key-art caption: a strip at the bottom left, under the copy, never over the Knight or the horde */
.rg-hero-capwrap { position: relative; z-index: 2; padding-bottom: 12px; }
.rg-hero-cap { max-width: 560px; margin: 0; font-size: 15px; line-height: 1.35; color: var(--muted); text-shadow: 0 2px 0 var(--ink); }

@media (max-width: 720px) {
  /* phones: a 300 px banner of the merged picture on top, the focal point (the Knight) centred,
     then the caption strip, then the copy */
  .rg-hero { min-height: 0; background: var(--ink); }
  .rg-hero-art {
    position: relative; order: 0; width: 100%; height: 300px; right: auto; bottom: auto;
    background: url("../img/roguee/page/hero-flat.png") no-repeat calc(50% - 300px) 100% / 1280px 360px;
    image-rendering: pixelated;
  }
  .rg-layer, .rg-fog { display: none !important; }
  .rg-hero::after { inset: 0 0 auto 0; height: 300px; background: linear-gradient(0deg, var(--ink) 0%, transparent 30%); }
  .rg-hero-capwrap { order: 1; padding-top: 6px; padding-bottom: 0; }
  .rg-hero-main { order: 2; margin-block: 0; padding-top: 10px; padding-bottom: 36px; }
  .rg-h1 img { width: 232px; height: 80px; }
  .rg-pitch { font-size: 20px; }
  .rg-platforms { gap: 12px; font-size: 16px; }   /* both status items on one line from 340 px */
}

/* ------------------------------------------------------------------ sub-navigation (sticky under the header) */
.rg-subnav {
  position: sticky; top: 72px; z-index: 45; height: var(--rg-subnav);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  box-shadow: 0 3px 0 var(--plum);
}
.rg-subnav .wrap { display: flex; align-items: center; gap: 18px; height: 100%; }
.rg-subnav-links {
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.rg-subnav-links::-webkit-scrollbar { display: none; }
.rg-subnav-links a {
  position: relative; display: block; padding: 6px 10px; white-space: nowrap;
  font-size: 19px; color: var(--bone); text-decoration: none;
}
.rg-subnav-links a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 240ms steps(4);
}
.rg-subnav-links a:hover, .rg-subnav-links a[aria-current="true"] { color: var(--gold); }
.rg-subnav-links a:hover::after, .rg-subnav-links a[aria-current="true"]::after { transform: scaleX(1); }
.rg-subnav-toggles { display: flex; gap: 16px; flex: none; }
.rg-toggle { display: flex; align-items: center; gap: 7px; font-size: 17px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.rg-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.rg-toggle:hover { color: var(--bone); }
@media (max-width: 720px) {
  /* Phones: two rows that stay where they are (a second sticky bar would eat a fifth of the screen).
     Row 1, the links, scrolls sideways, with a fade at the right edge so it reads as "more this way";
     row 2 holds the two switches, always in plain sight. */
  .rg-subnav { position: relative; top: auto; height: auto; }
  .rg-subnav .wrap { flex-wrap: wrap; gap: 0 14px; padding-top: 4px; padding-bottom: 8px; }
  .rg-subnav-links {
    flex: 1 1 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .rg-subnav-links.is-end { -webkit-mask-image: none; mask-image: none; }
  .rg-subnav-links a { font-size: 18px; padding: 6px 8px; }
  .rg-subnav-toggles { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; gap: 6px 18px; padding: 2px 8px 0; }
}

/* ------------------------------------------------------------------ section dividers: the arena lamp */
.rg-divider { display: flex; align-items: center; justify-content: center; gap: 18px; height: 48px; }
.rg-divider::before, .rg-divider::after {
  content: ""; width: min(240px, 30vw); height: 3px;
  background: repeating-linear-gradient(90deg, var(--plum-light) 0 6px, transparent 6px 12px);
}
.rg-divider i { width: 21px; height: 48px; background: url("../img/roguee/page/divider-lamp.png") 0 0 / 21px 48px no-repeat; image-rendering: pixelated; }

/* ------------------------------------------------------------------ media frames
   A 640x360 still or loop sits on the Drill Yard's brick floor inside a two-pixel-line frame. */
.rg-frame {
  position: relative; padding: 12px;
  background: var(--rg-brick) url("../img/roguee/page/tile-brick.png") 0 0 / 48px 48px;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--plum-light);
}
.rg-frame img, .rg-frame video, .rg-frame canvas { display: block; max-width: 100%; height: auto; }
.rg-frame video { background: var(--ink); }

/* The pause / play button sits in the corner of every loop, playing or stopped, so a stopped clip (paused,
   or reduced motion) still shows its whole picture: the summaries' gear lines stay readable. A stopped
   clip's button gets the gold ring, to say "press me". Only the stage's short look, which never starts
   by itself, gets a bigger labelled button (bottom left, clear of the Knight). */
.rg-vidbtn {
  position: absolute; right: 22px; bottom: 22px; z-index: 2; min-width: 36px; height: 36px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; background: var(--ink); box-shadow: 0 0 0 3px var(--plum-light);
}
.rg-vidbtn:hover { box-shadow: 0 0 0 3px var(--gold); }
/* "pause": two 3 px bars; "play": a pixel-stepped triangle */
.rg-vidbtn-ico, .rg-vidbtn > span:only-child { display: block; flex: none; width: 9px; height: 15px; background: linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 6px, var(--gold) 6px); }
.rg-vidbtn:not(.is-playing) .rg-vidbtn-ico, .rg-vidbtn:not(.is-playing) > span:only-child {
  background: var(--gold);
  clip-path: polygon(0 0, 33.3% 0, 33.3% 20%, 66.6% 20%, 66.6% 40%, 100% 40%, 100% 60%, 66.6% 60%, 66.6% 80%, 33.3% 80%, 33.3% 100%, 0 100%);
}
.rg-vidbtn:not(.is-playing) { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold); }
.rg-vidbtn:not(.is-playing):hover { background: var(--plum); }
.rg-vidbtn-txt { display: none; font-family: var(--head); font-size: 16px; line-height: 1; color: var(--gold); }
/* the short look, stopped: a 48 px button with words, bottom left */
.rg-vidbtn.is-look:not(.is-playing) { right: auto; left: 18px; bottom: 18px; height: 48px; padding: 0 18px 0 16px; }
.rg-vidbtn.is-look:not(.is-playing) .rg-vidbtn-ico { width: 12px; height: 21px; }
.rg-vidbtn.is-look:not(.is-playing) .rg-vidbtn-txt { display: block; }

/* ------------------------------------------------------------------ media row + side box (Steam's top row)
   The media column (stage, thumbs, then the rest of the facts) and the side box (capsule, short text,
   four facts, tags, button) are about the same height, so no void opens under the thumbs. */
.rg-media { padding-top: 40px; }
.rg-mediarow { display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: 24px; align-items: start; }
.rg-mediacol { min-width: 0; }
.rg-stage { position: relative; margin: 30px 0 0; }      /* the badge sits 30 px above */
.rg-stage-box {
  position: relative; width: 640px; max-width: 100%; aspect-ratio: 16 / 9; background: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--plum-light);
}
.rg-stage-box img, .rg-stage-box video { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.rg-stage-open { height: 100%; }
.rg-stage-open[disabled] { cursor: default; }
.rg-stage-open[disabled] .zoom { display: none; }
.rg-stage-box .rg-vidbtn { right: 10px; bottom: 10px; }
.rg-stage-box .rg-vidbtn.is-look:not(.is-playing) { right: auto; left: 18px; bottom: 18px; }
.rg-stage-cap { margin: 12px 0 0; font-size: 17px; line-height: 1.4; min-height: 2.8em; color: var(--bone); }
.rg-swap { animation: swap 280ms steps(4); }            /* the site's 4-step fade (site.css @keyframes swap) */

/* the thumbs between two arrow buttons; a fade at an edge says "more this way" */
.rg-stripbar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.rg-strip {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 6px 3px 10px;
  scrollbar-width: thin; scrollbar-color: var(--plum-light) var(--ink);
}
.rg-strip.can-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.rg-strip.can-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.rg-strip.can-left.can-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.rg-strip-arrow {
  flex: none; width: 30px; height: 54px; margin-bottom: 4px; padding: 0; cursor: pointer; display: grid; place-items: center;
  border: 0; background: var(--night); box-shadow: 0 0 0 3px var(--plum-light);
}
.rg-strip-arrow:hover { box-shadow: 0 0 0 3px var(--gold); }
.rg-strip-arrow span {
  display: block; width: 9px; height: 15px; background: var(--gold);
  clip-path: polygon(0 0, 33.3% 0, 33.3% 20%, 66.6% 20%, 66.6% 40%, 100% 40%, 100% 60%, 66.6% 60%, 66.6% 80%, 33.3% 80%, 33.3% 100%, 0 100%);
}
.rg-strip-prev span { transform: scaleX(-1); }
.rg-thumb {
  position: relative; flex: none; display: block; width: 96px; aspect-ratio: 16 / 9; padding: 0; cursor: pointer;
  border: 3px solid var(--plum-light); background: var(--ink);
}
.rg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.rg-thumb[aria-selected="true"] { border-color: var(--gold); }
.rg-thumb:hover { border-color: var(--gold-dark); }
.rg-thumb[aria-selected="true"]:hover { border-color: var(--gold); }
/* video thumbs get a small pixel play mark */
.rg-thumb-video::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 15px; margin: -7px 0 0 -3px; background: var(--gold);
  clip-path: polygon(0 0, 33.3% 0, 33.3% 20%, 66.6% 20%, 66.6% 40%, 100% 40%, 100% 60%, 66.6% 60%, 66.6% 80%, 33.3% 80%, 33.3% 100%, 0 100%);
}
.rg-thumb-video::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 27px; height: 27px; margin: -13px 0 0 -13px;
  background: var(--ink); box-shadow: 0 0 0 3px var(--plum-light);
}

.rg-side { margin-top: 12px; padding: 10px 10px 14px; }
.rg-capsule img { width: 368px; height: 172px; margin-top: 4px; image-rendering: pixelated; }
.rg-capsule .badge { margin-left: 0; }
.rg-short { font-size: 18px; line-height: 1.45; margin: 14px 2px 12px; }
.rg-facts { margin: 0 0 14px; }
.rg-facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 10px; padding: 7px 2px; border-top: 3px solid var(--night); }
.rg-facts dt { font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding-top: 1px; }
.rg-facts dd { margin: 0; font-size: 17px; line-height: 1.4; }
.rg-facts .rg-chip { margin: 0 6px 3px 3px; }
.rg-mixed > .rg-chip { white-space: nowrap; }
/* the tags, as on Steam's side box; inside the plum panel they step down to night so they read as boxes */
.rg-side .rg-tags { margin: 0 3px 18px; gap: 9px; }
.rg-side .rg-tags li {
  font-size: 17px; padding: 0 7px; background: var(--night);
  box-shadow: 0 -3px 0 var(--night), 0 3px 0 var(--night), -3px 0 0 var(--night), 3px 0 0 var(--night);
}
.rg-tags a { color: var(--magic-light); text-decoration: none; }
.rg-tags a:hover, .rg-tags a:focus-visible { color: var(--white); text-decoration: underline; }
.rg-side-btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 760px) { .rg-side { padding-left: 4px; padding-right: 4px; } .rg-side-btn { padding-left: 4px; padding-right: 4px; } }
/* the rest of the facts, under the thumbs: two columns */
.rg-facts-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 10px 0 0; }
.rg-facts-more > div { grid-template-columns: 92px minmax(0, 1fr); }
.rg-facts-more > div:last-child { grid-column: 1 / -1; }      /* Platforms, the long one, takes the full width */

@media (max-width: 1119px) {
  /* one column: the stage keeps its 640 px (never an uneven pixel scale between 1x and 2x), centred
     with its thumbs and facts; the side box comes under it */
  .rg-mediarow { grid-template-columns: minmax(0, 1fr); }
  .rg-mediacol { width: 100%; max-width: 640px; margin: 0 auto; }
  .rg-side { margin-top: 18px; display: grid; grid-template-columns: 368px minmax(0, 1fr); gap: 0 24px; }
  .rg-side .rg-capsule { grid-row: span 2; }
  .rg-side .rg-short { margin-top: 0; }
  .rg-side .rg-facts, .rg-side .rg-tags, .rg-side .rg-side-btn { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rg-side { display: block; }
  .rg-short { margin-top: 14px; }
}
@media (max-width: 660px) {
  /* below 1x the stills scale down smoothly (S §4) */
  .rg-stage-box img, .rg-stage-box video { image-rendering: auto; }
  .rg-capsule img { width: 100%; height: auto; max-width: 368px; }
  .rg-facts > div { grid-template-columns: 1fr; }
  .rg-facts-more { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ section heads on this page */
.rg-media + .rg-divider { margin-top: 24px; }
main section .section-title h2 { font-size: 32px; }
@media (max-width: 720px) { main section .section-title h2 { font-size: 24px; } }
.rg-ftext h3, .rg-nblock h3, .rg-runbox h3, .rg-update h3 { font-size: 24px; color: var(--gold); margin-bottom: 8px; }
@media (max-width: 720px) { .rg-ftext h3, .rg-nblock h3, .rg-runbox h3, .rg-update h3 { font-size: 16px; } }

/* ------------------------------------------------------------------ About: "In one minute" */
.rg-tldr h3 { color: var(--gold); margin-bottom: 10px; }
.rg-tldr-list { list-style: none; margin: 0; padding: 0; }
.rg-tldr-list li { font-size: 21px; line-height: 1.45; padding: 7px 0 7px 22px; position: relative; border-top: 3px solid var(--night); }
.rg-tldr-list li:first-child { border-top: 0; }
.rg-tldr-list li::before { content: ""; position: absolute; left: 3px; top: 19px; width: 6px; height: 6px; background: var(--gold); }
.rg-tldr-list li .rg-chip { margin-left: 8px; }

/* the living strip: two ghouls and four rats march right over the Drill Yard floor */
.rg-living { position: relative; height: 84px; margin: 20px 0 0; overflow: hidden; }
.rg-living::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  background: var(--rg-brick) url("../img/roguee/page/tile-brick.png") 0 0 / 48px 48px; image-rendering: pixelated;
  box-shadow: inset 0 3px 0 var(--plum-light);
}
.rg-lane { position: absolute; left: 0; right: 0; bottom: 6px; height: 72px; animation: rg-cross 24s steps(400) infinite; }
.rg-lane .sprite { position: absolute; bottom: 0; left: 0; }
@keyframes rg-cross { from { transform: translateX(-90px); } to { transform: translateX(100%); } }
.rg-lane-1 { animation-delay: -2s; bottom: 12px; }
.rg-lane-2 { animation-delay: -4.5s; bottom: 4px; }
.rg-lane-3 { animation-delay: -6s; bottom: 16px; }
.rg-lane-4 { animation-delay: -14s; bottom: 6px; }
.rg-lane-5 { animation-delay: -16.5s; bottom: 14px; }
.rg-lane-6 { animation-delay: -18s; bottom: 2px; }

/* sprite sheets at 3x (frames, sizes and fps from lookdev/sprites/png/manifest.tsv) */
.sprite.rg-rat3 { width: 48px; height: 36px; background-image: url("../img/roguee/page/sprites/rat_walk.png"); background-size: 192px 36px; --sheet: 192px; --frames: 4; --speed: 0.333s; }
.sprite.rg-ghoul3 { width: 72px; height: 72px; background-image: url("../img/roguee/page/sprites/ghoul_walk.png"); background-size: 288px 72px; --sheet: 288px; --frames: 4; --speed: 0.667s; }
.sprite.rg-knight3 { width: 72px; height: 96px; background-image: url("../img/roguee/page/sprites/knight_walk_side.png"); background-size: 288px 96px; --sheet: 288px; --frames: 4; --speed: 0.5s; }
.sprite.rg-off { animation-delay: -0.17s; }

/* ------------------------------------------------------------------ About: the four feature rows
   The media keeps its natural pixel size (auto column); the text takes the rest. */
.rg-feature { margin-top: 80px; }
.game.rg-row { grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; }
.game.rg-row.flip { grid-template-columns: minmax(0, 1fr) auto; }
.game.rg-row.flip > .rg-fmedia { order: 2; }
.rg-fmedia { min-width: 0; }
.rg-ftext p { margin-bottom: 14px; }
@media (max-width: 1100px) {
  .game.rg-row, .game.rg-row.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .game.rg-row.flip > .rg-fmedia { order: 0; }
}

/* F1: the sweep demo, a 200x100 canvas at 3x on the brick floor */
.rg-demo { width: fit-content; max-width: 100%; }
.rg-demo canvas {
  width: 600px; height: 300px; image-rendering: pixelated;
  background: var(--rg-brick) url("../img/roguee/page/tile-brick.png") 0 0 / 48px 48px;
}
.rg-levelup-pop {
  position: absolute; left: 50%; top: 42px; transform: translateX(-50%); z-index: 2; visibility: hidden;
  font-family: var(--head); font-size: 16px; color: var(--gold); text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
}
.rg-levelup-pop.on { visibility: visible; animation: rg-levelpop 0.8s steps(4) both; }
@keyframes rg-levelpop { 0% { transform: translate(-50%, 12px); opacity: 0; } 25% { transform: translate(-50%, 0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -6px); opacity: 0; } }
@media (max-width: 720px) { .rg-demo canvas { width: 100%; height: auto; } }

/* F2: the two ability stills at 2x, each with its keys */
.rg-cues { display: flex; flex-direction: column; gap: 22px; }
.rg-cue { margin: 0; }
.rg-cue img { width: 480px; height: 270px; }
.rg-cue figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 12px; font-size: 17px; }
.rg-keys { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.rg-key {
  font-family: var(--head); font-size: 16px; line-height: 1; color: var(--bone); text-shadow: 0 2px 0 var(--ink);
  border: 10px solid transparent; border-image: url("../ui/button_dark.png") 5 fill / 10px stretch; padding: 1px 4px;
}
@media (max-width: 560px) { .rg-cue img { width: 100%; height: auto; } }

/* F3: the card toy, copied from the build's level-up cards */
.rg-cards-row { display: flex; gap: 12px; }
.rg-card {
  position: relative; width: 208px; min-height: 290px; padding: 0 0 10px; margin: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-family: var(--body); color: var(--bone); background: var(--plum);
  border: 3px solid var(--rg-common);
}
.rg-card[data-rarity="UNCOMMON"] { border-color: var(--rg-magic); }
.rg-card:hover { background: var(--plum-light); }
.rg-card-icon { display: grid; place-items: center; width: 100%; height: 96px; background: var(--night); margin-bottom: 12px; }
.rg-card-icon img { width: 48px; height: 48px; }
.rg-card-name { font-family: var(--head); font-size: 16px; line-height: 1.4; color: var(--gold); padding: 0 6px; }
.rg-card-tag { font-weight: 600; font-size: 16px; color: var(--bone); margin-top: 2px; }
.rg-card-rule { font-size: 17px; line-height: 1.35; padding: 8px 12px 0; margin-top: 8px; border-top: 3px solid var(--plum-light); width: calc(100% - 40px); }
.rg-card-rarity { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 16px; color: var(--rg-common); }
.rg-card[data-rarity="UNCOMMON"] .rg-card-rarity { color: var(--rg-magic); }
.rg-card.is-picked { background: var(--plum-light); box-shadow: 0 0 0 3px var(--rg-cream); }
.rg-card.is-deal { animation: rg-deal 240ms steps(4) both; }
.rg-card.is-deal:nth-child(2) { animation-delay: 80ms; }
.rg-card.is-deal:nth-child(3) { animation-delay: 160ms; }
.rg-card.is-drop { animation: rg-drop 240ms steps(4) both; }
.rg-card.is-gone { opacity: 0; }
@keyframes rg-deal { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rg-drop { to { transform: translateY(36px); opacity: 0; } }
.rg-cards-ctl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
/* at 0 rerolls the button stays focusable and still answers (aria-disabled, not disabled) */
.rg-cards .btn[aria-disabled="true"] { pointer-events: auto; cursor: not-allowed; }
.rg-cards .rg-note { max-width: 648px; }
@media (max-width: 720px) {
  /* phones: the cards stack, icon on the left */
  .rg-cards-row { flex-direction: column; }
  .rg-card { width: 100%; min-height: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); text-align: left; align-items: start; padding: 0 10px 0 0; }
  .rg-card > * { grid-column: 2; }
  .rg-card-icon { grid-column: 1; grid-row: 1 / span 4; width: 72px; height: 100%; min-height: 72px; margin: 0; }
  .rg-card-name { padding: 8px 0 0; }
  .rg-card-rule { width: auto; padding: 6px 0 0; margin-top: 6px; }
  .rg-card-rarity { padding: 4px 0 8px; }
}

/* F4: the slam loop and the colour key */
.rg-clip { margin: 0; position: relative; }
.rg-clip video { width: 640px; height: 360px; }
.rg-clip .badge { top: -30px; }
.rg-colorkey { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 24px 0 0; padding: 0; }
.rg-colorkey li { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: var(--night); box-shadow: 0 0 0 3px var(--plum-light); }
.rg-ck-art { display: grid; place-items: center; width: 64px; height: 64px; }
.rg-ck-word { font-family: var(--head); font-size: 16px; }
.rg-colorkey li:nth-child(1) .rg-ck-word { color: var(--necro-light); }
.rg-colorkey li:nth-child(2) .rg-ck-word { color: var(--gold); }
.rg-colorkey li:nth-child(3) .rg-ck-word { color: var(--rg-warn); }
.rg-gem3 { display: block; width: 24px; height: 30px; background: url("../img/roguee/page/sprites/gem_m.png") 0 0 / 24px 30px; image-rendering: pixelated; animation: rg-bob 1.2s steps(2) infinite; }
@keyframes rg-bob { 50% { transform: translateY(-3px); } }
.sprite.rg-coin3 { width: 18px; height: 18px; background-image: url("../img/roguee/page/sprites/coin.png"); background-size: 72px 18px; --sheet: 72px; --frames: 4; --speed: 0.4s; }
/* the slam ring, small: frames 0-6 (fill, then the slam) over 1 s, then the empty frame 7 for 1.2 s */
.rg-ringmini {
  display: block; width: 64px; height: 64px; image-rendering: auto;
  background: url("../img/roguee/page/slam-ring.png") 0 0 / 512px 64px no-repeat;
  animation: rg-ringmini 2.2s infinite;
}
@keyframes rg-ringmini {
  0% { background-position: 0 0; animation-timing-function: steps(7, end); }
  45.45% { background-position: -448px 0; }
  100% { background-position: -448px 0; }
}
@media (max-width: 720px) { .rg-clip video { width: 100%; height: auto; } }

/* ------------------------------------------------------------------ About: the run strip */
.rg-runbox { margin-top: 96px; }
.rg-lead-line { font-size: 20px; margin: 0 0 18px; }
.rg-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rg-stop {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 10px 8px;
  background: var(--night); border: 3px solid var(--plum-light);
}
.rg-stop.is-lit { border-color: var(--gold); }
.rg-stop-icon { display: flex; align-items: flex-end; height: 64px; margin-bottom: 4px; }
.rg-stop-icon img { width: 48px; height: 48px; }
.rg-ico-knight { display: block; width: 48px; height: 64px; background: url("../img/roguee/page/sprites/knight_idle_side.png") 0 0 / 96px 64px no-repeat; image-rendering: pixelated; }
.rg-ico-rat { display: block; width: 48px; height: 36px; margin-bottom: 6px; background: url("../img/roguee/page/sprites/rat_walk.png") 0 0 / 192px 36px no-repeat; image-rendering: pixelated; }
.rg-stop-time { font-family: var(--head); font-size: 16px; line-height: 1.4; color: var(--gold); }
.rg-stop-title { font-weight: 600; font-size: 20px; line-height: 1.3; }
.rg-stop-text { font-size: 19px; line-height: 1.35; margin-bottom: 6px; }
.rg-stop .rg-chip { margin-top: auto; white-space: normal; }

.rg-trackrow { position: relative; display: flex; align-items: center; height: 128px; margin-top: 30px; }
.rg-track {
  position: relative; flex: 1 1 auto; height: 48px;
  background: var(--rg-brick) url("../img/roguee/page/tile-brick.png") 0 0 / 48px 48px; image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--plum-light);
}
.rg-tick { position: absolute; bottom: 0; width: 3px; height: 9px; background: var(--plum-light); }
.rg-tick.is-five { height: 18px; background: var(--muted); }
.rg-ticklabel { position: absolute; top: 60px; transform: translateX(-50%); font-family: var(--head); font-size: 16px; color: var(--muted); }
.rg-marker { position: absolute; top: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--plum-light); box-shadow: 0 0 0 3px var(--ink); }
.rg-marker.is-lit { background: var(--gold); }
.rg-walker {
  position: absolute; left: 0; bottom: 18px; z-index: 2; width: 72px; height: 96px;
  background: url("../img/roguee/page/sprites/knight_walk_side.png") 0 0 / 288px 96px no-repeat; image-rendering: pixelated;
  --sheet: 288px;
}
.rg-walker.is-walking { animation: sheet 0.5s steps(4) infinite; }
.rg-snuffer { position: relative; flex: none; width: 128px; height: 128px; margin-left: 18px; }
.rg-snuffer-ring {
  position: absolute; inset: 0; image-rendering: pixelated;
  background: url("../img/roguee/page/slam-ring.png") 0 0 / 1024px 128px no-repeat;
  animation: rg-ring8 2.2s steps(8) infinite;
}
@keyframes rg-ring8 { to { background-position: -1024px 0; } }
.sprite.rg-snuffer-ghoul {
  position: absolute; left: 28px; top: 12px; width: 72px; height: 72px; transform: scaleX(-1);
  background-image: url("../img/roguee/page/sprites/ghoul_walk.png"); background-size: 288px 72px; --sheet: 288px; --frames: 4; --speed: 0.667s;
}
.rg-run-planned {
  margin: 28px 0 0; padding: 12px 16px; font-size: 19px;
  border: 3px dashed var(--plum-light);
}
@media (max-width: 1100px) and (min-width: 721px) {
  .rg-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* phones: a vertical track on the left, the stops beside it, the Snuffer under the list */
  .rg-run { position: relative; padding-left: 66px; }
  .rg-stops { grid-template-columns: minmax(0, 1fr); }
  .rg-trackrow { position: absolute; left: 0; top: 0; bottom: 0; width: 48px; height: auto; margin: 0; display: block; }
  .rg-track { width: 48px; height: 100%; }
  .rg-tick { left: auto; right: 0; bottom: auto; width: 9px; height: 3px; }
  .rg-tick.is-five { width: 18px; height: 3px; }
  .rg-ticklabel { display: none; }
  .rg-marker { top: auto; left: -6px; margin: -6px 0 0 0; }
  .rg-walker { left: -12px; top: 0; bottom: auto; background-image: url("../img/roguee/page/sprites/knight_walk_down.png"); }
  .rg-walker.is-up { background-image: url("../img/roguee/page/sprites/knight_walk_up.png"); }   /* scrolling back up */
  .rg-snuffer { position: absolute; left: -40px; bottom: -150px; margin: 0; }
  .rg-runbox .rg-run { margin-bottom: 150px; }
}

/* ------------------------------------------------------------------ Numbers go up */
.rg-nblock { margin-top: 64px; }
.rg-n1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.rg-counter { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rg-counter-show { position: relative; display: flex; align-items: flex-end; gap: 24px; }
.rg-counter-ghoul {
  position: relative; display: flex; align-items: flex-end; justify-content: center; width: 192px; height: 156px; padding-bottom: 12px;
  background: var(--rg-brick) url("../img/roguee/page/tile-brick.png") 0 0 / 48px 48px; image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--plum-light);
}
.rg-ghoul4 { display: block; width: 96px; height: 96px; background: url("../img/roguee/page/sprites/ghoul_walk.png") 0 0 / 384px 96px no-repeat; image-rendering: pixelated; transform: scaleX(-1); }
.rg-ghoul4.is-hit { background-image: url("../img/roguee/page/sprites/ghoul_hit.png"); background-size: 96px 96px; }
.rg-dmg {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%); opacity: 0;
  font-family: var(--head); font-size: 24px; color: var(--bone);
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink);
}
.rg-dmg.is-rising { animation: rg-rise24 600ms steps(4) forwards; }
@keyframes rg-rise24 { 0% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -24px); } }
.rg-counter-read { position: relative; display: flex; flex-direction: column; gap: 6px; }
#rg-hit-num { min-width: 3ch; color: var(--bone); }
/* "×2.7" blinks twice between two steps of the counter (on, off, on, off: 450 ms). It takes its own
   line under POWER, inside the counter: hung outside (right: -96px) it pushed the whole page 40-80 px
   sideways at widths from 901 to 1279 px. */
.rg-x27 { font-family: var(--head); font-size: 16px; line-height: 1.5; color: var(--gold); opacity: 0; }
.rg-x27.is-on { animation: rg-blink 225ms 2; }
@keyframes rg-blink { 0% { opacity: 1; animation-timing-function: steps(1, end); } 50% { opacity: 0; } 100% { opacity: 0; } }
.rg-counter-real { margin: 0; display: flex; flex-direction: column; font-family: var(--head); font-size: 16px; line-height: 1.6; color: var(--bone); }
/* while the show runs, the real numbers are for screen readers only; paused, they are on screen */
html.rg-js:not(.rg-paused) .rg-counter-real { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the boss strip: the Snuffer at 4x on a patch of floor, its name, and its health bar drawn to scale */
.rg-n1 { overflow-x: clip; overflow-clip-margin: 8px; }   /* a safety net: nothing in the counter may widen the page (8 px keeps focus rings) */
.rg-bosses-label { color: var(--muted); margin: 40px 0 12px; }
.rg-bosses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.rg-bosses li {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 1fr auto auto; gap: 6px 14px;
  padding: 12px 14px 14px; background: var(--night); box-shadow: 0 0 0 3px var(--plum-light);
}
.rg-boss-art {
  grid-row: 1 / span 2; align-self: start; display: flex; align-items: flex-end; justify-content: center; width: 96px; height: 108px;
  background: var(--rg-brick) url("../img/roguee/page/tile-brick.png") 0 0 / 48px 48px; image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--ink);
}
.sprite.rg-boss-ghoul {
  width: 96px; height: 96px; transform: scaleX(-1);
  background-image: url("../img/roguee/page/sprites/ghoul_walk.png"); background-size: 384px 96px; --sheet: 384px; --frames: 4; --speed: 0.667s;
}
.rg-boss-id { display: flex; flex-direction: column; gap: 4px; }
.rg-boss-name { font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--gold); }
.rg-boss-hp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.rg-boss-hplabel { font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
/* the bar: the build's cream boss bar on a night track; widths are each health over stage 3's 35.6K */
.rg-boss-bar { grid-column: 1 / -1; display: block; height: 12px; background: var(--ink); box-shadow: 0 0 0 3px var(--plum-light); }
.rg-boss-bar i { display: block; height: 100%; background: var(--bone); }
.rg-bar-1 { width: 13.7%; }
.rg-bar-2 { width: 37.1%; }
.rg-bar-3 { width: 100%; }
@media (max-width: 900px) {
  .rg-n1 { grid-template-columns: minmax(0, 1fr); }
  .rg-bosses { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .rg-counter-show { flex-direction: column; align-items: flex-start; } }

/* N2: the six odds words, the Power slider and the ladder */
.rg-n2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: 40px; align-items: start; }
.rg-words { font-family: var(--head); font-size: 16px; line-height: 2; }
.rg-words-label { display: block; font-family: var(--body); font-size: 17px; line-height: 1.4; color: var(--muted); }
.rg-wpair, .rg-hit-seq { white-space: nowrap; }      /* lines break between the pairs, never inside one */
.rg-w-warn { color: var(--rg-warn); }
.rg-w-even { color: var(--bone); }
.rg-w-good { color: var(--gold); }
.rg-toy { padding: 12px 16px 16px; }
.rg-toy-label { margin: 0 0 10px; color: var(--gold); }
.rg-readout { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 16px; }
.rg-readout > span { min-width: 9ch; }
#rg-power { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; --rg-fill: 0%; }
#rg-power::-webkit-slider-runnable-track {
  height: 12px; background: linear-gradient(var(--rg-xp), var(--rg-xp)) 0 0 / var(--rg-fill) 100% no-repeat, var(--night);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--plum-light);
}
#rg-power::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -6px; border: 0; border-radius: 0; background: var(--gold); box-shadow: 0 0 0 3px var(--ink); }
#rg-power::-moz-range-track { height: 12px; background: var(--night); box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--plum-light); }
#rg-power::-moz-range-progress { height: 12px; background: var(--rg-xp); }
#rg-power::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 0; background: var(--gold); box-shadow: 0 0 0 3px var(--ink); }
#rg-power:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.rg-ladderbox { position: relative; padding: 0 0 104px 84px; }
.rg-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rg-rung { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; background: var(--night); border: 3px solid var(--plum-light); }
.rg-rung.is-here { border-color: var(--gold); }
.rg-rung-l1 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }   /* "STAGE 1  NEEDS 10 · TOUGH" fits one line from 404 px */
.rg-rung-l2 { font-size: 19px; line-height: 1.35; }
.rg-rung-planned { border-style: dashed; background: transparent; }
.rg-rung-planned .rg-rung-l2 { color: var(--muted); }
.rg-rung-planned .rg-chip { align-self: flex-start; }
.rg-swift { color: var(--gold); }
/* the climber: knight_walk_up at 3x in the ladder's left gutter; moves 120 ms per rung in 4 steps each */
.rg-climber {
  position: absolute; left: 6px; top: 0; width: 72px; height: 96px;
  background: url("../img/roguee/page/sprites/knight_walk_up.png") 0 0 / 288px 96px no-repeat; image-rendering: pixelated;
  --sheet: 288px; transform: translateY(var(--rg-y, 0px));
}
.rg-climber.is-walking { animation: sheet 0.5s steps(4) infinite; }
@media (max-width: 900px) { .rg-n2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .rg-ladderbox { padding-left: 76px; } .rg-rung-l1 .rg-ps16 { font-size: 16px; } }

/* N3: every run pays */
.rg-n3-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; align-items: start; }
.rg-twolevels { font-size: 19px; }
.rg-twolevels p { margin: 0 0 8px; }
/* the win / lose summaries are centred: the 880 px clip no longer leaves a gap on the right */
.rg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 32px 0 0; }
.rg-tabs [role="tab"] {
  font-family: var(--head); font-size: 16px; line-height: 1.4; padding: 10px 14px; cursor: pointer;
  color: var(--muted); background: var(--night); border: 3px solid var(--plum-light);
}
.rg-tabs [role="tab"]:hover { color: var(--bone); }
.rg-tabs [role="tab"][aria-selected="true"] { color: var(--gold); border-color: var(--gold); background: var(--plum); }
.rg-tabpanels { margin-top: 18px; }
.rg-tabpanel + .rg-tabpanel { margin-top: 28px; }        /* without JavaScript both show, one under the other */
.rg-tabs:not([hidden]) ~ .rg-tabpanels .rg-tabpanel + .rg-tabpanel { margin-top: 0; }
.rg-clip-wide video { width: 880px; height: 440px; }
.rg-clip-wide .rg-frame { width: fit-content; max-width: 100%; margin: 0 auto; }
.rg-clip-wide figcaption { max-width: 904px; margin: 12px auto 0; font-size: 17px; color: var(--bone); }
.rg-gear { margin-top: 36px; }
.rg-gear-label { color: var(--muted); margin: 0 0 10px; }
.rg-gear-list { columns: 2; column-gap: 40px; list-style: none; margin: 0; padding: 0; }
.rg-gear-list li { font-weight: 600; font-size: 19px; line-height: 1.6; break-inside: avoid; }
.rg-r-heroic { color: var(--rg-heroic); }
.rg-r-rare { color: var(--rg-rare); }
.rg-r-magic { color: var(--rg-magic); }
.rg-r-common { color: var(--rg-common); }
@media (max-width: 960px) { .rg-clip-wide video { width: 100%; height: auto; } }
@media (max-width: 900px) { .rg-n3-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rg-gear-list { columns: 1; } }

/* ------------------------------------------------------------------ Heroes */
.rg-knight { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 32px; margin-top: 32px; padding: 16px 20px 18px; }
.rg-knight-art { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rg-knight-floor {
  position: relative; width: 240px; height: 216px; overflow: hidden;
  background: var(--rg-brick) url("../img/roguee/page/tile-brick.png") 0 0 / 48px 48px; image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--plum-light);
}
/* the three walk sheets at 4x; each shows for 2 s of a 6 s turn (down, side, up) */
.rg-k4 {
  position: absolute; left: 72px; bottom: 30px; width: 96px; height: 128px;
  background-repeat: no-repeat; background-position: 0 0; background-size: 384px 128px; image-rendering: pixelated;
  --sheet: 384px; --frames: 4; --speed: 0.5s;
}
.sprite.rg-k4 { animation: sheet 0.5s steps(4) infinite, rg-third 6s steps(1) infinite; }
.rg-k4-down { background-image: url("../img/roguee/page/sprites/knight_walk_down.png"); }
.sprite.rg-k4-side { background-image: url("../img/roguee/page/sprites/knight_walk_side.png"); animation-delay: 0s, -4s; }
.sprite.rg-k4-up { background-image: url("../img/roguee/page/sprites/knight_walk_up.png"); animation-delay: 0s, -2s; }
.rg-k4-idle { display: none; background-image: url("../img/roguee/page/sprites/knight_idle_down.png"); background-size: 192px 128px; }
@keyframes rg-third { 0% { visibility: visible; } 33.333% { visibility: hidden; } 100% { visibility: hidden; } }
.rg-k4-sweep {
  position: absolute; left: 40px; top: 20px; width: 160px; height: 160px; visibility: hidden; pointer-events: none;
  background: url("../img/roguee/page/sprites/sweep_80.png") 0 0 / 480px 160px no-repeat; image-rendering: pixelated;
}
.rg-k4-sweep.is-go { visibility: visible; animation: rg-sweep3 150ms steps(3) both; }
.rg-k4-sweep.is-still { visibility: visible; background-position: -160px 0; }
@keyframes rg-sweep3 { from { background-position: 0 0; } to { background-position: -480px 0; } }
.rg-knight-text h3 { margin: 8px 0 4px; color: var(--gold); }
.rg-sub { font-size: 19px; color: var(--muted); margin: 0 0 6px; }
.rg-kit { margin: 14px 0 6px; }
.rg-kit > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 6px 0; border-top: 3px solid var(--night); }
.rg-kit dt { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; color: var(--gold); white-space: nowrap; }
.rg-kit dt img { width: 48px; height: 48px; }
.rg-kit dd { margin: 0; font-size: 19px; }
@media (max-width: 900px) { .rg-knight { grid-template-columns: minmax(0, 1fr); } .rg-kit > div { grid-template-columns: minmax(0, 1fr); } }

.rg-heroes { display: grid; gap: 16px; margin-top: 28px; }
.rg-heroes-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rg-heroes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.rg-hero-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 12px;
  background: var(--night); border: 3px dashed var(--plum-light);
}
.rg-hero-card:hover { border-style: solid; border-color: var(--magic); }
/* the padlock in the corner (a pseudo-element: decoration, never dimmed, never read out) */
.rg-hero-card::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 48px; height: 48px;
  background: url("../img/roguee/page/icons/ico-lock.png") 0 0 / 48px 48px no-repeat; image-rendering: pixelated;
}
.rg-hero-card h3, .rg-hero-card h4 { font-family: var(--head); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--gold); margin: 4px 0 0; }
.rg-hero-card p { margin: 0; font-size: 18px; line-height: 1.4; }
.rg-hero-card .rg-chip { margin-top: auto; }
/* Silhouettes: 10 cells of 32x32 at 3x (row 1 of heroes-locked.png, each hero's coloured rim) over a
   banded pixel backlight (sil-glow.png), so the dark figures read on the night card. The rim shows
   dimmed and lights up fully once the card has scrolled into view (roguee.js adds .is-seen), or on hover.
   Touch has no hover, so the scroll-in is what lights them there. */
.rg-sil {
  display: block; width: 96px; height: 96px; --i: 0; --k: 96px;
  background:
    url("../img/roguee/page/heroes-locked.png") calc(var(--i) * -1 * var(--k)) calc(-1 * var(--k)) / calc(10 * var(--k)) calc(2 * var(--k)) no-repeat,
    url("../img/roguee/page/sil-glow.png") 0 0 / var(--k) var(--k) no-repeat;
  image-rendering: pixelated;
  filter: brightness(0.55) saturate(0.4);
  transition: filter 360ms steps(3);
}
.rg-hero-card.is-seen .rg-sil, .rg-hero-card:hover .rg-sil { filter: none; }
html.rg-paused .rg-sil { transition: none; }
.rg-sil-1 { --i: 1; } .rg-sil-2 { --i: 2; } .rg-sil-3 { --i: 3; } .rg-sil-4 { --i: 4; }
.rg-sil-5 { --i: 5; } .rg-sil-6 { --i: 6; } .rg-sil-7 { --i: 7; } .rg-sil-8 { --i: 8; } .rg-sil-9 { --i: 9; }
.rg-update { margin-top: 40px; }
.rg-update h3 { display: inline-block; margin-right: 8px; }
.rg-update p { margin: 6px 0 0; }
@media (max-width: 1000px) { .rg-heroes-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  /* phones: compact rows, the silhouette at 2x on the left, the words beside it */
  .rg-heroes { gap: 10px; margin-top: 20px; }
  .rg-heroes-7, .rg-heroes-3 { grid-template-columns: minmax(0, 1fr); }
  .rg-hero-card {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 4px 12px; padding: 10px 10px 10px;
  }
  .rg-hero-card > * { grid-column: 2; }
  .rg-hero-card .rg-sil { grid-column: 1; grid-row: 1 / span 4; --k: 64px; width: 64px; height: 64px; }
  .rg-hero-card::after { top: 10px; right: 10px; width: 32px; height: 32px; background-size: 32px 32px; }
  .rg-hero-card h3, .rg-hero-card h4 { margin: 2px 0 0; padding-right: 38px; }
  .rg-hero-card p { font-size: 17px; line-height: 1.35; }
  .rg-hero-card .rg-chip { justify-self: start; margin: 4px 3px 3px; }
}

/* ------------------------------------------------------------------ What's planned */
.rg-leadblock { margin-top: 36px; }
.rg-leadblock > h3 { color: var(--gold); display: inline-block; margin: 0 10px 0 0; vertical-align: middle; }
/* The Lantern Town banner is 640x360 art doubled to 1280x720. It is shown at exactly that size, pixel
   for pixel, through a 16:9 window as wide as the column: the window crops the sides and a little of the
   top and bottom (kept a bit higher, for the castle), instead of scaling the art to an uneven 0.83x.
   Phones, where 2x would crop too much, get the whole picture scaled down smoothly (below 1x). */
.rg-banner { position: relative; margin: 48px 0 28px; }
.rg-banner-crop { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 720px; }
.rg-banner-crop img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: none; object-position: 50% 40%; image-rendering: pixelated;
}
@media (max-width: 720px) {
  .rg-banner-crop { aspect-ratio: auto; }
  .rg-banner-crop img { height: auto; object-fit: fill; image-rendering: auto; }
}
.rg-lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.rg-lead-grid .rg-clip { margin-top: 30px; max-width: 664px; }   /* the 640 px clip in its frame: the long caption must not widen the column */
@media (max-width: 1100px) { .rg-lead-grid { grid-template-columns: minmax(0, 1fr); } }

.rg-plan { margin-top: 56px; }
.rg-plan-label { color: var(--gold); margin: 0 10px 12px 0; display: inline-block; }
.rg-plan > .rg-chip { vertical-align: top; }
.rg-plan-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.rg-plan-tiles li { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--night); box-shadow: 0 0 0 3px var(--plum-light); font-size: 17px; line-height: 1.35; }
.rg-count { position: relative; display: inline-block; min-width: 3ch; font-family: var(--head); font-size: 32px; line-height: 1.2; color: var(--gold); }
.rg-count.is-counting { color: transparent; }
.rg-count-show { position: absolute; left: 0; top: 0; color: var(--gold); }
@media (max-width: 900px) { .rg-plan-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The planned cards: three columns with the icons at 4x, denser than two. Ten cards fill four rows of
   three when the first and the last span two columns; a wide card puts its icon beside the words. */
.rg-notes2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.rg-notes2 .note > img { width: 64px; height: 64px; image-rendering: pixelated; }
.rg-notes2 .note p { font-size: 19px; margin-bottom: 10px; }
.rg-notes2 .note h3 { margin-bottom: 8px; }
.rg-notes2 .note.rg-wide { grid-column: span 2; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; align-content: start; }
.rg-notes2 .note.rg-wide > * { grid-column: 2; }
.rg-notes2 .note.rg-wide > img { grid-column: 1; grid-row: 1 / span 4; }
.rg-notes2 .note.rg-wide > .rg-chip { justify-self: start; }
@media (max-width: 1000px) {
  .rg-notes2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-notes2 .note.rg-wide { grid-column: auto; display: block; }
}
@media (max-width: 720px) {
  /* phones: compact rows, the icon on the left, the "More" still folded */
  .rg-notes2 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .rg-notes2 .note, .rg-notes2 .note.rg-wide { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; align-content: start; }
  .rg-notes2 .note > * { grid-column: 2; }
  .rg-notes2 .note > img { grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; }
  .rg-notes2 .note > .rg-chip { justify-self: start; }
  .rg-notes2 .note > details, .rg-notes2 .note > .rg-chest { grid-column: 1 / -1; }
  .rg-notes2 .note p { font-size: 18px; margin-bottom: 6px; }
}

/* <details> on this page: a gold summary with a Press Start plus or minus (no arrow glyphs in the fonts) */
main details > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 19px; color: var(--gold); padding: 4px 0; }
main details > summary::-webkit-details-marker { display: none; }
main details > summary::before { content: "+"; display: inline-block; width: 24px; font-family: var(--head); font-size: 16px; }
main details[open] > summary::before { content: "-"; }
main details > summary:hover { color: var(--gold-light); }
.note details p { margin: 6px 0 4px; }

.rg-chest { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.rg-chest-btn { padding: 6px; border: 0; background: var(--night); box-shadow: 0 0 0 3px var(--plum-light); cursor: pointer; }
.rg-chest-btn:hover { box-shadow: 0 0 0 3px var(--gold); }
.rg-chest-spr { display: block; width: 64px; height: 64px; background: url("../img/roguee/page/sprites/chest_closed.png") 0 0 / 64px 64px no-repeat; image-rendering: pixelated; }
.rg-chest-btn[aria-pressed="true"] .rg-chest-spr { background-image: url("../img/roguee/page/sprites/chest_open.png"); }
.rg-chest .rg-note { margin: 0; }

/* ------------------------------------------------------------------ FAQ */
.rg-faq { padding: 8px 18px 10px; }
.rg-faq details { border-top: 3px solid var(--night); padding: 8px 0; }
.rg-faq details:first-child { border-top: 0; }
.rg-faq summary { font-size: 20px; }
.rg-faq p { margin: 4px 0 6px 24px; font-size: 19px; }

/* ------------------------------------------------------------------ Play it early */
.atom.rg-s2 { --s: 2; }                   /* atom sizes as classes: the CSP blocks style="" */
.atom.rg-s6 { --s: 6; }
.rg-playtest h2 { color: var(--gold); }
.rg-playtest > div { min-width: 0; }      /* the parade must not widen the grid column (it pushed the text out on phones) */
.rg-parade { gap: 0; margin-top: 14px; height: 96px; overflow: hidden; }
.rg-parade .sprite { margin-left: 6px; flex: none; }
@media (max-width: 460px) { .rg-parade .rg-off { display: none; } }   /* narrow phones: rat, ghoul, Knight */
.rg-playtest-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 360px; }
@media (min-width: 761px) { .rg-playtest-cta .btn { white-space: nowrap; } }   /* the page's one call to action stays on one line */

/* ------------------------------------------------------------------ phones: shorter gaps
   The desktop rhythm (72 px sections, 96 px between feature rows) leaves long empty runs on a phone. */
@media (max-width: 720px) {
  main > section:not(.rg-hero) { padding: 44px 0; }
  .rg-feature, .game-block + .game-block { margin-top: 56px; }
  .rg-runbox { margin-top: 64px; }
  .rg-nblock { margin-top: 48px; }
  .rg-living { margin-top: 12px; }
}

/* ------------------------------------------------------------------ the light box (a native <dialog>) */
html.lb-lock { overflow: hidden; }
.rg-lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 56px 72px; border: 0;
  background: color-mix(in srgb, var(--ink) 97%, transparent); color: var(--bone);
}
.rg-lightbox[open] { display: grid; place-items: center; }
.rg-lightbox::backdrop { background: color-mix(in srgb, var(--ink) 80%, transparent); }
.rg-lb-frame { margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 100%; }
.rg-lb-img {
  display: block; margin: 0 auto; image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--plum-light), 0 0 0 9px var(--ink);
}
.rg-lb-img.is-smooth { image-rendering: auto; }
.rg-lightbox figcaption { display: flex; justify-content: space-between; gap: 18px; font-size: 19px; }
.rg-lb-count { font-family: var(--head); font-size: 16px; color: var(--gold); white-space: nowrap; padding-top: 4px; }
.rg-lb-prev { left: 14px; top: 50%; margin-top: -24px; }
.rg-lb-next { right: 14px; top: 50%; margin-top: -24px; }
.rg-lb-close { right: 14px; top: 14px; }
@media (max-width: 720px) {
  .rg-lightbox { padding: 64px 12px 84px; }
  .rg-lb-prev, .rg-lb-next { top: auto; bottom: 16px; margin-top: 0; }
  .rg-lb-prev { left: calc(50% - 64px); }
  .rg-lb-next { right: calc(50% - 64px); }
  .rg-lightbox figcaption { flex-direction: column; gap: 4px; font-size: 17px; }
}

/* ------------------------------------------------------------------ stillness
   1. "Pause animations" (html.rg-paused; roguee.js also sets it at load under reduced motion) freezes
      every CSS animation in the hero and main, the site's too (WCAG 2.2.2).
   2. Without JavaScript, the reduced-motion media query does the same.
   One-shot entrances (fx.js reveals, the pop-in) must not freeze at their invisible first frame, so
   they simply switch off. Some loops hold a chosen still frame instead (the plan's §5). */
html.rg-paused main *, html.rg-paused .rg-hero *,
html.rg-paused .site-header *, html.rg-paused .site-footer * { animation-play-state: paused !important; }   /* the logo atom too */
html.rg-paused .reveal.shown, html.rg-paused .pop-in, html.rg-paused .rg-swap { animation: none !important; }
html.rg-paused .cursor-orbit { display: none !important; }
html.rg-paused .rg-subnav-links a::after { transition: none; }      /* the underline jumps instead of growing */
html.rg-paused .rg-ringmini { animation: none; background-position: -192px 0; }
html.rg-paused .rg-snuffer-ring { animation: none; background-position: -384px 0; }
html.rg-paused .rg-k4:not(.rg-k4-idle) { display: none; }
html.rg-paused .rg-k4-idle { display: block; }
html.rg-paused .rg-lane .sprite, html.rg-paused .rg-parade .sprite { animation: none; background-position: 0 0; }
/* 3. Off screen, every loop waits: roguee.js marks the hero and each section .rg-offscreen while none of
      it is on screen (with a 100 px margin), so the sprites, the fog and the rings cost nothing there. */
.rg-offscreen *, .rg-offscreen::before, .rg-offscreen::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.rg-js) main *, html:not(.rg-js) .rg-hero * { animation-play-state: paused !important; }
  html:not(.rg-js) .rg-ringmini { animation: none; background-position: -192px 0; }
  .rg-subnav-links a::after { transition: none; }
  html:not(.rg-js) .rg-snuffer-ring { animation: none; background-position: -384px 0; }
  html:not(.rg-js) .rg-k4:not(.rg-k4-idle) { display: none; }
  html:not(.rg-js) .rg-k4-idle { display: block; }
  /* site.css switches .sprite off under reduced motion; if someone un-pauses on purpose, run them again */
  html.rg-js:not(.rg-paused) main .sprite { animation: sheet var(--speed, 0.6s) steps(var(--frames, 2)) infinite; }
  html.rg-js:not(.rg-paused) .sprite.rg-k4 { animation: sheet 0.5s steps(4) infinite, rg-third 6s steps(1) infinite; }
  html.rg-js:not(.rg-paused) .sprite.rg-k4-side { animation-delay: 0s, -4s; }
  html.rg-js:not(.rg-paused) .sprite.rg-k4-up { animation-delay: 0s, -2s; }
}