/* js/room-ui.css - THE READABLE ROOM (js/room-ui.js; the usability reports of 2026-10-10, docs/READABILITY.md).
 *
 * THE FLOOR: no word in a room is under 16 CSS px, the reading size is 18, numbers that matter are 20 to 22, and
 * every button is at least 44 x 44 (48 on a touch screen). Nothing here is ever written smaller: a room that runs
 * out of space wraps, scrolls or moves a section into the nav, it never shrinks the words. The three text sizes
 * (Normal, Larger, Largest) scale every size below through --rui-s. tools/verify-room-ui.mjs measures it. */
:root { --rui-s: 1; }
html[data-text-size="large"] { --rui-s: 1.25; }
html[data-text-size="largest"] { --rui-s: 1.5; }

.rui, .rui-dlg-back, .bh, .rvm, .rfp {
  --rui-min: calc(16px * var(--rui-s));
  --rui-body: calc(18px * var(--rui-s));
  --rui-num: calc(22px * var(--rui-s));
  --rui-h2: calc(22px * var(--rui-s));
  --rui-title: calc(32px * var(--rui-s));
  --rui-tap: 44px;
  --rui-ink: #FBF3E7;
  --rui-soft: #DED4F2;
  --rui-panel: #1B1428;
  --rui-panel-2: #251C38;
  --rui-line: rgba(201, 168, 245, 0.4);
  --rui-gold: #F5C242;
  --rui-accent: #FF8FC7;
  --rui-good: #8EF07A;
  --rui-warn: #FFD27A;
  --rui-title-font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --rui-edge-l: var(--sotc-edge-l, env(safe-area-inset-left, 0px));
  --rui-edge-r: var(--sotc-edge-r, env(safe-area-inset-right, 0px));
  /* the side tabs (FRIENDS, CHALLENGES, INVENTORY) stand on both edges: the reading keeps clear of them */
  --rui-tabs: 42px;
  font-family: var(--font, 'Trebuchet MS', 'Lucida Grande', Verdana, sans-serif);
  font-size: var(--rui-body);
  line-height: 1.5;
  color: var(--rui-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (pointer: coarse) { .rui, .rui-dlg-back, .bh, .rvm, .rfp { --rui-tap: 48px; } }
.rui[data-side="horde"], .rui-dlg-back[data-side="horde"], .bh[data-side="horde"], .rvm[data-side="horde"] { --rui-accent: #7FE0D6; --rui-panel: #15181C; --rui-panel-2: #1D2328; --rui-line: rgba(127, 224, 214, 0.38); }
/* A BIG PC SCREEN (Goliath 2026-10-11: "ideally I would like the interface on PC to maximize based on the available
 * space"): past 1920 x 1080 a room and its sheets grow with the screen, as the canvas does, instead of standing as a
 * 1400 px column in the middle of a 1440p or 4K window. CSS zoom scales all of it (words, buttons, pictures, the
 * column and its gaps) and the room still fills the screen. Phones and screens up to 1920 x 1080 never zoom. The
 * battle's HUD (.bh) and the Village map's cards (.rvm) are placed by script over the canvas and keep their size. */
@media (min-width: 2200px) and (min-height: 1200px) { .rui, .rui-dlg-back { zoom: 1.33; } }
@media (min-width: 2900px) and (min-height: 1600px) { .rui, .rui-dlg-back { zoom: 1.66; } }
@media (min-width: 3600px) and (min-height: 1950px) { .rui, .rui-dlg-back { zoom: 2; } }

/* ---- the room ---- */
.rui {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: linear-gradient(180deg, rgba(11, 8, 20, 0.55), rgba(11, 8, 20, 0.72));
  padding-top: env(safe-area-inset-top, 0px);
}
.rui[hidden], html[data-rotate] .rui, html[data-loading] .rui { display: none; }
.rui *, .rui-dlg-back *, .bh *, .rvm *, .rfp * { box-sizing: border-box; }

.rui-head, .rui-status { flex: 0 0 auto; }
.rui-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 10px calc(var(--rui-edge-r) + var(--rui-tabs) + 8px) 10px calc(var(--rui-edge-l) + var(--rui-tabs) + 8px);
  background: rgba(16, 11, 26, 0.97); border-bottom: 1px solid var(--rui-line);
}
/* a Horde player's god sits in a 40 px ring in a phone's top left corner (index.html #serve-badge, over everything,
   on the safe area's own margin): the header steps past it */
html[data-device="phone"][data-serving] .rui-head { padding-left: max(calc(var(--rui-edge-l) + var(--rui-tabs) + 8px), calc(max(6px, env(safe-area-inset-left, 0px)) + 52px)); }
.rui-titles { flex: 1 1 14em; min-width: 0; }
.rui-title { margin: 0; font: bold var(--rui-title)/1.15 var(--rui-title-font); letter-spacing: 0.04em; color: var(--rui-gold); text-shadow: 0 2px 0 #1A1026; overflow-wrap: anywhere; }
.rui-tag { margin: 2px 0 0; font-size: var(--rui-body); line-height: 1.4; color: var(--rui-soft); }
.rui-bal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.rui-coin { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rui-coin__icon { width: calc(30px * var(--rui-s)); height: calc(30px * var(--rui-s)); object-fit: contain; }
.rui-coin__n { font-size: var(--rui-num); line-height: 1; color: var(--rui-accent); }
.rui-coin[data-key="starbloom"] .rui-coin__n, .rui-coin[data-key="souls"] .rui-coin__n { color: var(--rui-gold); }
.rui-coin__word { font-size: var(--rui-min); color: var(--rui-soft); }
.rui-actions, .rui-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.rui-status {
  min-height: calc(var(--rui-body) * 1.5 + 10px);
  padding: 5px calc(var(--rui-edge-r) + var(--rui-tabs) + 8px) 5px calc(var(--rui-edge-l) + var(--rui-tabs) + 8px);
  font-size: var(--rui-body); font-weight: bold; line-height: 1.5; color: #9FF0E6;
  background: rgba(16, 11, 26, 0.9); border-bottom: 1px solid rgba(201, 168, 245, 0.18);
}
.rui-status[data-tone="good"] { color: var(--rui-good); }
.rui-status[data-tone="warn"] { color: var(--rui-warn); }
.rui-status:empty { display: none; }

.rui-body {
  flex: 1 1 auto; min-height: 0; display: flex; gap: 14px;
  padding: 0 calc(var(--rui-edge-r) + var(--rui-tabs)) 0 calc(var(--rui-edge-l) + var(--rui-tabs));
}
.rui-nav { flex: 0 0 auto; width: clamp(150px, 22vw, calc(220px * var(--rui-s))); display: flex; flex-direction: column; gap: 8px; padding: 12px 0; overflow: hidden; }
/* the section list scrolls in its own box; the foot (the Loadout's Start Game) sits under it, never on it (convention 36) */
.rui-nav__list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.rui-nav__foot { flex: 0 0 auto; display: flex; flex-direction: column; }
.rui-nav__foot:empty { display: none; }
.rui-nav[hidden] { display: none; }
.rui-main {
  flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden;
  padding: 16px 8px calc(28px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.rui-main:focus { outline: none; }
.rui-sec { margin: 0 auto 28px; max-width: 1400px; }
.rui-sec[hidden] { display: none; }
.rui-h2 { margin: 0 0 6px; font: bold var(--rui-h2)/1.25 var(--rui-title-font); letter-spacing: 0.03em; color: var(--rui-gold); }
.rui-h2 small { font: normal var(--rui-min)/1.4 var(--font, sans-serif); letter-spacing: 0; color: var(--rui-soft); margin-left: 10px; }
.rui-p { margin: 0 0 12px; font-size: var(--rui-body); line-height: 1.5; color: var(--rui-soft); max-width: 62em; }
.rui-p strong { color: var(--rui-ink); }
.rui-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---- cards ---- */
.rui-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(300px * var(--rui-s))), 1fr)); }
.rui-card {
  --card-accent: var(--rui-line);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-content: start;
  padding: 14px; border-radius: 14px; border: 2px solid var(--card-accent);
  background: var(--rui-panel); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.rui-card--empty { border-style: dashed; background: rgba(27, 20, 40, 0.92); }
.rui-card--glow { background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 22%, var(--rui-panel)), var(--rui-panel)); }
.rui-card__art { grid-row: 1 / span 4; width: calc(84px * var(--rui-s)); height: calc(84px * var(--rui-s)); align-self: start; border-radius: 50%;
  object-fit: contain; background: radial-gradient(circle, color-mix(in srgb, var(--card-accent) 30%, transparent) 0 60%, transparent 62%); }
.rui-card__art.rui-art--none { display: block; }
.rui-card__name { margin: 0; font-size: calc(20px * var(--rui-s)); font-weight: bold; line-height: 1.25; color: var(--rui-ink); overflow-wrap: anywhere; }
.rui-card__meta { margin: 0; font-size: var(--rui-min); font-weight: bold; line-height: 1.4; color: var(--card-accent); }
.rui-card__line { margin: 0; font-size: var(--rui-body); line-height: 1.45; color: var(--rui-ink); }
.rui-card__line--soft { color: var(--rui-soft); }
.rui-card__tag { position: absolute; top: 10px; right: 12px; font-size: var(--rui-min); color: var(--rui-soft); }
.rui-card__tag ~ .rui-card__name { padding-right: calc(3.4 * var(--rui-min)); }   /* a long name wraps before "Pen 1" */
.rui-card__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rui-card__acts .rui-btn { flex: 1 1 auto; }
.rui-card__why { grid-column: 1 / -1; margin: 4px 0 0; font-size: var(--rui-min); font-weight: bold; color: var(--rui-warn); }
.rui-card--empty .rui-card__art { opacity: 0.55; }
/* a narrow card (a phone held upright, Largest text): the art sits above the words instead of beside them */
.rui-grid { container-type: inline-size; }
@container (max-width: 360px) {
  .rui-card { grid-template-columns: minmax(0, 1fr); }
  .rui-card__art { grid-row: auto; width: calc(64px * var(--rui-s)); height: calc(64px * var(--rui-s)); }
}

.rui-bar { display: block; height: 14px; margin: 6px 0 2px; border-radius: 7px; background: #0E0A16; border: 1px solid var(--rui-line); overflow: hidden; }
.rui-bar__fill { display: block; height: 100%; width: 0; background: var(--card-accent, var(--rui-accent)); transition: width 0.25s linear; }

/* ---- buttons ---- */
.rui-btn {
  min-height: var(--rui-tap); min-width: var(--rui-tap); padding: 8px 16px; margin: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px; border: 2px solid rgba(201, 168, 245, 0.6); background: #2A2140; color: var(--rui-ink);
  font: bold var(--rui-min)/1.25 var(--font, sans-serif); text-align: center; white-space: normal; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rui-btn:hover { background: #3A2F58; }
.rui-btn:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rui-btn--primary { background: var(--rui-accent); border-color: var(--rui-accent); color: #14121A; }
.rui-btn--primary:hover { background: color-mix(in srgb, var(--rui-accent) 80%, #fff); }
.rui-btn--gold { background: var(--rui-gold); border-color: var(--rui-gold); color: #14121A; }
.rui-btn--gold:hover { background: #FFD874; }
.rui-btn:disabled { cursor: default; background: #231C31; border-color: rgba(201, 168, 245, 0.35); border-style: dashed; color: #C9BEE2; }
.rui-btn__sub { font-size: var(--rui-min); font-weight: normal; line-height: 1.25; }
.rui-btn__icon { width: calc(26px * var(--rui-s)); height: calc(26px * var(--rui-s)); object-fit: contain; }
.rui-btn:has(.rui-btn__icon) { flex-direction: row; gap: 8px; }
.rui-back { font-size: var(--rui-body); padding: 8px 14px; }
.rui-back::before { content: '\2039'; font-size: calc(26px * var(--rui-s)); line-height: 1; margin: -4px 0 0; }
.rui-back { flex-direction: row; gap: 6px; }

.rui-tab { width: 100%; flex: 0 0 auto; align-items: flex-start; text-align: left; padding: 10px 14px; font-size: var(--rui-body); }
.rui-tab .rui-btn__sub { color: var(--rui-soft); }
.rui-tab[aria-current="true"] { background: #43316A; border-color: var(--rui-gold); color: #FFF; }

/* ---- the text size control ---- */
.rui-aa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rui-aa__word { font-size: var(--rui-min); color: var(--rui-soft); margin-right: 4px; }
.rui-aa__btn[aria-pressed="true"] { background: #43316A; border-color: var(--rui-gold); }
.rui-aa__btn--normal .rui-btn__label { font-size: 16px; }
.rui-aa__btn--large .rui-btn__label { font-size: 20px; }
.rui-aa__btn--largest .rui-btn__label { font-size: 24px; }
.rui-aa-open .rui-btn__label { font-family: var(--rui-title-font); font-size: calc(20px * var(--rui-s)); }

/* ---- a menu's grid of buttons (the battle's Menu) ---- */
.rui-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(240px * var(--rui-s))), 1fr)); }
.rui-links .rui-btn { min-height: calc(64px * var(--rui-s)); justify-content: center; }

/* ---- the go-next row (ShadowsRoomUI.goNext; Goliath 2026-10-12): round picture buttons in the World door's look, a
   gilt ring round the place's picture and its name on a plaque across the ring's foot (js/world-door.js), never a row
   of wide text buttons. The name stays at the floor (16 px); the button is 64 px of picture and its plaque.
   WHERE IT STANDS in a room laid out in columns: at the foot of the column of stacked sections, never in a row across
   the foot under a section that spans the rows. The board is its own scroll box, so its height is the screen's and a
   1fr row never grows for a spanning section taller than the screen: that section ran on over a full-width Go next
   (the Roost's laurels over The Village, Goliath's PC, 2026-10-12). ---- */
.rui-go { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; --go-disc: calc(64px * var(--rui-s)); }
.rui-go__btn {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  min-width: var(--rui-tap); max-width: calc(150px * var(--rui-s)); min-height: var(--rui-tap); margin: 0; padding: 4px 2px 6px;
  border: 0; border-radius: 14px; background: none; color: var(--rui-ink); cursor: pointer; text-align: center;
  font: bold var(--rui-min)/1.2 var(--font, sans-serif); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rui-go__medal {
  display: block; flex: 0 0 auto; width: var(--go-disc); height: var(--go-disc); padding: 3px; border-radius: 50%;
  background: conic-gradient(from 210deg, #8A6414, #FFE08A, #C8951E, #FFF3C4, #A87A18, #FFD76A, #8A6414);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(20, 12, 4, 0.7), 0 0 18px rgba(245, 194, 66, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rui-go__face {
  display: grid; place-items: center; width: 100%; height: 100%; padding-bottom: 12%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rui-accent) 26%, #2A2140), #120C1E 72%);
  box-shadow: inset 0 0 0 2px rgba(10, 8, 24, 0.85), inset 0 -8px 14px rgba(0, 0, 0, 0.4);
}
.rui-go__icon { width: 80%; height: 80%; object-fit: contain; }   /* lifted clear of the plaque by the face's padding */
.rui-go__initial { font: bold calc(28px * var(--rui-s))/1 var(--rui-title-font); color: var(--rui-gold); text-shadow: 0 2px 0 #1A1026; }
.rui-go__initial[hidden] { display: none; }
.rui-go__word {
  position: relative; margin-top: -12px; padding: 2px 9px 3px; border-radius: 6px; max-width: 100%; overflow-wrap: anywhere;
  font: bold var(--rui-min)/1.2 var(--rui-title-font); color: #FFE7A3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, #2A1F4E, #140E2A); border: 1px solid rgba(245, 194, 66, 0.85); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
}
.rui-go__why { margin-top: 4px; font: bold var(--rui-min)/1.25 var(--font, sans-serif); color: var(--rui-warn); }
.rui-go__why[hidden] { display: none; }
.rui-go__btn:hover .rui-go__medal, .rui-go__btn:focus-visible .rui-go__medal {
  transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 12, 4, 0.7), 0 0 26px rgba(255, 216, 110, 0.5);
}
.rui-go__btn:hover .rui-go__word, .rui-go__btn:focus-visible .rui-go__word { color: #FFF6D8; border-color: #FFE08A; }
.rui-go__btn:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rui-go__btn:active .rui-go__medal { transform: scale(0.97); }
.rui-go__btn:disabled { cursor: default; }
.rui-go__btn:disabled .rui-go__medal { background: rgba(201, 168, 245, 0.35); box-shadow: none; transform: none; }
.rui-go__btn:disabled .rui-go__face { filter: grayscale(1) brightness(0.7); }
.rui-go__btn:disabled .rui-go__word { color: #C9BEE2; border-style: dashed; border-color: rgba(201, 168, 245, 0.5); }

/* ---- pages: a list of unicorns, lands or characters a page at a time (Goliath 2026-10-12, convention 37) ---- */
.rui-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 4px; padding: 10px 0 0;
  border-top: 1px solid var(--rui-line);
}
.rui-pager__at { display: inline-flex; align-items: center; gap: 8px; }
.rui-pager__select { padding-right: 30px; }
.rui-pager__count { flex: 1 1 100%; font-size: var(--rui-min); color: var(--rui-soft); }
/* filters: a list's Show / Class / Sort by row (the Loadout's .rlo-filters), and the line they leave when none match */
.rui-none { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 6px 0 12px; }
.rui-none__line { margin: 0; }
.rui[data-mode="compact"] .rui-go { --go-disc: calc(56px * var(--rui-s)); gap: 12px 14px; }
@media (prefers-reduced-motion: reduce) { .rui-go__medal { transition: none; } }

/* ---- a sheet (help, a counter, a reveal's words) ---- */
.rui-dlg-back {
  position: fixed; inset: 0; z-index: 61; display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: rgba(8, 5, 14, 0.84);
}
.rui-dlg {
  width: min(780px, 100%); max-height: 100%; display: flex; flex-direction: column; min-height: 0;
  background: var(--rui-panel); border: 2px solid rgba(245, 194, 66, 0.7); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.rui-dlg--wide { width: min(1120px, 100%); }
.rui-dlg__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--rui-line); }
.rui-dlg__title { flex: 1 1 auto; margin: 0; font: bold var(--rui-h2)/1.25 var(--rui-title-font); color: var(--rui-gold); }
.rui-dlg__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; overscroll-behavior: contain; touch-action: pan-y; }
.rui-dlg__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--rui-line); }

/* ---- a short screen (a phone held sideways): the header is one row, the sections are a list on the left ---- */
.rui[data-mode="compact"] { --rui-title: calc(24px * var(--rui-s)); --rui-h2: calc(20px * var(--rui-s)); }
.rui[data-mode="compact"] .rui-head { padding-top: 6px; padding-bottom: 6px; gap: 6px 12px; }
.rui[data-mode="compact"] .rui-actions { display: none; }
/* held sideways the header is one row: the tagline is left to How to Play, Back is its arrow and the help a gold "?" */
.rui[data-mode="compact"][data-shape="long"] .rui-head { flex-wrap: nowrap; }
.rui[data-mode="compact"][data-shape="long"] .rui-titles { flex: 1 1 auto; }
.rui[data-mode="compact"][data-shape="long"] .rui-bal { flex-wrap: nowrap; gap: 6px 12px; }
.rui[data-mode="compact"][data-shape="long"] .rui-tools { flex-wrap: nowrap; }
.rui[data-mode="compact"][data-shape="long"] .rui-tag { display: none; }
.rui[data-mode="compact"][data-shape="long"] .rui-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* a narrow header (an iPhone SE or a 740 px Android held sideways, or an iPhone with the god badge and the island on
   both sides of it): a balance is its icon and its number; the word stays for a screen reader and the tooltip, so the
   room's name is never broken in two or cut short */
.rui-head { container-type: inline-size; }
@container (max-width: 680px) {
  .rui[data-mode="compact"][data-shape="long"] .rui-coin__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.rui[data-mode="compact"][data-shape="long"] .rui-back .rui-btn__label,
.rui[data-mode="compact"][data-shape="long"] .rui-help .rui-btn__label { display: none; }
.rui[data-mode="compact"][data-shape="long"] .rui-back { padding: 8px; }
.rui[data-mode="compact"][data-shape="long"] .rui-back::before { margin: -4px 2px 0 0; }
.rui[data-mode="compact"][data-shape="long"] .rui-help::before { content: '?'; font: bold calc(24px * var(--rui-s))/1 var(--rui-title-font); }
.rui[data-mode="compact"] .rui-main { padding-top: 12px; }
/* held upright (a narrow window, a tablet, or a phone the rotate curtain is not covering): the whole room scrolls as
   one page, header and all, and the section list is a row on top */
.rui[data-shape="tall"] { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.rui[data-shape="tall"] .rui-body { flex: 0 0 auto; }
.rui[data-shape="tall"] .rui-main { overflow: visible; }
.rui[data-mode="compact"][data-shape="tall"] .rui-body { flex-direction: column; gap: 0; }
.rui[data-mode="compact"][data-shape="tall"] .rui-nav { width: auto; flex-direction: row; flex-wrap: wrap; padding: 10px 0 0; overflow: visible; }
.rui[data-mode="compact"][data-shape="tall"] .rui-nav__list, .rui[data-mode="compact"][data-shape="tall"] .rui-nav__foot { display: contents; overflow: visible; }
.rui[data-mode="compact"][data-shape="tall"] .rui-tab { width: auto; flex: 1 1 7em; }
.rui:not([data-mode="compact"]) .rui-only-compact { display: none; }
.rui[data-mode="compact"] .rui-only-wide { display: none; }
@media (max-height: 560px) {
  .rui-dlg-back { padding: 0; }
  /* a short screen: the sheet is the whole screen and scrolls as one (its foot too), its heading and Close stay on top */
  .rui-dlg, .rui-dlg--wide { width: 100%; height: 100%; max-height: none; border-radius: 0; border-width: 0; display: block;
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scroll-padding-top: 72px;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  .rui-dlg__head { position: sticky; top: 0; z-index: 1; background: var(--rui-panel); }
  .rui-dlg__body { overflow: visible; }
  .rui-dlg-back { --rui-h2: calc(20px * var(--rui-s)); }
}

/* ---- motion ---- */
@keyframes rui-pop { 0% { transform: scale(0.3); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rui-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-8deg); } }
.rui-pop { animation: rui-pop 0.42s cubic-bezier(.2, .9, .3, 1.3); }
.rui-wobble { animation: rui-wobble 0.18s ease-in-out 4; }
@media (prefers-reduced-motion: reduce) { .rui-pop, .rui-wobble { animation: none; } .rui-bar__fill { transition: none; } }

/* ---- HOW TO PLAY (js/guide-book.js): the book's index and its pages ---- */
.rgb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.rgb-tab { min-width: 9em; }
.rgb-tab[aria-pressed="true"] { background: #43316A; border-color: var(--rui-gold); }
.rgb-band { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--rui-panel-2); border: 1px solid rgba(245, 194, 66, 0.45); }
.rgb-band__art { width: calc(48px * var(--rui-s)); height: calc(48px * var(--rui-s)); object-fit: contain; flex: 0 0 auto; }
.rgb-band__title { margin: 0; font: bold var(--rui-h2)/1.2 var(--rui-title-font); color: var(--rui-gold); }
.rgb-band__sub { margin: 0; font-size: var(--rui-min); color: var(--rui-soft); }
.rgb-index { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(280px * var(--rui-s))), 1fr)); }
.rgb-chapter {
  display: flex; align-items: center; gap: 12px; min-height: calc(76px * var(--rui-s)); padding: 10px 12px; margin: 0;
  border-radius: 12px; border: 2px solid rgba(245, 194, 66, 0.4); background: #120D1D; color: var(--rui-ink);
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.rgb-chapter:hover { background: #2A2140; border-color: rgba(245, 194, 66, 0.8); }
.rgb-chapter:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rgb-chapter__art { width: calc(52px * var(--rui-s)); height: calc(52px * var(--rui-s)); object-fit: contain; flex: 0 0 auto; }
.rgb-chapter__words { display: flex; flex-direction: column; min-width: 0; }
.rgb-chapter__title { font: bold calc(19px * var(--rui-s))/1.25 var(--rui-title-font); color: var(--rui-ink); }
.rgb-chapter__blurb { font-size: var(--rui-min); line-height: 1.4; color: var(--rui-soft); }
.rgb-page { display: grid; grid-template-columns: clamp(110px, 30%, 300px) minmax(0, 1fr); gap: 18px 24px; align-items: start; }
.rgb-page--words { grid-template-columns: minmax(0, 1fr); }
.rgb-art { width: 100%; max-width: 280px; aspect-ratio: 1; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, rgba(245, 194, 66, 0.12) 0 66%, transparent 68%); }
.rgb-shot { margin: 0; }
.rgb-shot img { display: block; width: 100%; border-radius: 10px; border: 2px solid rgba(245, 194, 66, 0.8); background: #0E0A18; }
.rgb-shot figcaption { margin-top: 6px; font-size: var(--rui-min); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rui-soft); }
.rgb-count { margin: 0; font-size: var(--rui-min); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rui-soft); }
.rgb-heading { margin: 2px 0 10px; font: bold calc(28px * var(--rui-s))/1.2 var(--rui-title-font); color: var(--rui-ink); }
.rgb-text { margin: 0; max-width: 40em; font-size: var(--rui-body); line-height: 1.6; color: var(--rui-ink); }
.rgb-film { margin-top: 16px; }
.rgb-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.rgb-pager__gap { flex: 1 1 auto; }
.rgb-foot { justify-content: flex-start; align-items: center; }
@media (max-height: 560px) { .rgb-heading { font-size: calc(22px * var(--rui-s)); } .rgb-art { max-width: 180px; } }

/* ---- THE NURSERY's egg counter (js/nursery-room.js counter()) ---- */
.rnr-ladder__title { margin: 4px 0 10px; font-size: var(--rui-body); letter-spacing: 0.04em; color: var(--rui-gold); }
.rnr-ladder { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(104px * var(--rui-s))), 1fr)); }
.rnr-rung { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; background: #120D1D; border: 2px solid rgba(201, 168, 245, 0.45); }
.rnr-rung--bought { border-color: rgba(127, 224, 214, 0.7); }
.rnr-rung--next { border-color: var(--rui-gold); background: #3A2A10; }
.rnr-rung__n { font-size: var(--rui-min); font-weight: bold; color: var(--rui-soft); }
.rnr-rung__price { font: bold var(--rui-num)/1.2 var(--rui-title-font); color: var(--rui-ink); }
.rnr-rung--next .rnr-rung__price { color: var(--rui-gold); }
.rnr-rung--bought .rnr-rung__price { color: #9FF0E6; }
.rnr-rung__state { font-size: var(--rui-min); color: var(--rui-soft); }
.rnr-rung--next .rnr-rung__state { color: var(--rui-gold); font-weight: bold; text-transform: uppercase; }
.rnr-odds { margin: 0 0 8px; font-size: var(--rui-body); font-weight: bold; color: #9FF0E6; }
.rnr-why { margin: 0 0 12px; font-size: var(--rui-body); font-weight: bold; color: var(--rui-ink); }
.rnr-why--short { color: var(--candy-pink, #FF8FC7); }
.rnr-buy { min-width: min(100%, 22em); }

/* ---- a room over its own painting (mount({ paint })): the whole screen wide, under a scrim the words can be read on ---- */
.rui[data-paint] {
  background:
    linear-gradient(180deg, rgba(11, 8, 20, 0.5), rgba(11, 8, 20, 0.66)),
    var(--rui-paint) center / cover no-repeat,
    #120D1D;
}

/* ---- a progress ring around a portrait (ring()): the growth of a foal, the hour of an egg ---- */
.rui-ring {
  --p: 0; --size: calc(72px * var(--rui-s)); --ring: var(--card-accent, var(--rui-accent));
  position: relative; flex: 0 0 auto; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.14) 0);
}
.rui-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ring) 30%, #1B1428), #120D1D 72%); }
.rui-ring__art { position: relative; width: 80%; height: 80%; object-fit: contain; }
.rui-ring__art.rui-art--none { display: block; border-radius: 50%; }

/* ---- THE NURSERY (js/nursery-room.js): the road a foal takes, the shelf, the waiting foals, a crib for every pen ---- */
/* On a PC the board is two columns: what is coming in (the shelf, the waiting foals) on the left, the pens on the right,
   the road across the top and the way out across the foot. A phone shows one stop at a time from the section list. */
.rui:not([data-mode="compact"]) .rnr-board[data-layout="pens"] {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 0 22px; align-content: start;
  grid-template-areas: "road road" "eggs pens" "waiting pens" "next next";
}
.rui:not([data-mode="compact"]) .rnr-board { padding-left: max(8px, calc((100% - 1400px) / 2)); padding-right: max(8px, calc((100% - 1400px) / 2)); }
.rui:not([data-mode="compact"]) .rnr-board > .rui-sec { margin: 0 0 22px; max-width: none; }
.rnr-board > [data-sec="road"] { grid-area: road; }
.rnr-board > [data-sec="eggs"] { grid-area: eggs; }
.rnr-board > [data-sec="waiting"] { grid-area: waiting; }
.rnr-board > [data-sec="pens"] { grid-area: pens; align-self: start; }
.rnr-board > [data-sec="next"] { grid-area: next; }
/* a narrow window or a tablet held upright: one column, the pens first */
@media (max-width: 960px) {
  .rui:not([data-mode="compact"]) .rnr-board[data-layout="pens"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "road" "pens" "eggs" "waiting" "next"; }
}
.rnr-board .rui-h2 { text-shadow: 0 2px 0 #120D1D, 0 0 12px rgba(18, 13, 29, 0.9); }
.rnr-board .rui-p { color: var(--rui-ink); text-shadow: 0 1px 0 #120D1D, 0 0 10px rgba(18, 13, 29, 0.95); }

/* the road */
.rnr-road { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 0; }
.rnr-road__stop { display: flex; align-items: center; flex: 1 1 0; min-width: min(100%, calc(150px * var(--rui-s))); }
.rnr-road__stop + .rnr-road__stop::before { content: '\203A'; flex: 0 0 auto; padding: 0 6px; font: bold calc(30px * var(--rui-s))/1 var(--rui-title-font); color: var(--rui-gold); text-shadow: 0 2px 0 #120D1D; }
.rnr-road__here, .rui-btn.rnr-road__go {
  flex: 1 1 auto; min-width: 0; min-height: var(--rui-tap); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 8px 12px; border-radius: 14px; background: rgba(20, 14, 32, 0.9); border: 2px solid var(--rui-line); color: var(--rui-ink); text-align: left;
}
.rui-btn.rnr-road__go { border-color: rgba(245, 194, 66, 0.7); }
.rui-btn.rnr-road__go:hover { background: #3A2F58; }
.rnr-road__n { flex: 0 0 auto; display: grid; place-items: center; width: calc(30px * var(--rui-s)); height: calc(30px * var(--rui-s)); border-radius: 50%; background: var(--rui-gold); color: #14121A; font: bold var(--rui-min)/1 var(--rui-title-font); }
.rnr-road__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rnr-road__words strong { font-size: var(--rui-min); font-weight: bold; color: var(--rui-ink); }
.rnr-road__words span { font-size: var(--rui-min); font-weight: normal; color: var(--rui-soft); }

/* the shelf (the Herd's eggs; the Horde's Brood is the same shelf in bone niches) */
.rnr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.rnr-actions .rui-btn { flex: 1 1 auto; }
.rnr-shelf {
  list-style: none; margin: 0 0 12px; padding: 12px 12px 24px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(260px * var(--rui-s))), 1fr));
  border-radius: 14px; background: rgba(20, 14, 32, 0.9); border: 2px solid var(--rui-line);
  box-shadow: inset 0 -10px 0 #6B4A2B, inset 0 -13px 0 #8C6440, 0 8px 20px rgba(0, 0, 0, 0.35);   /* the plank it stands on */
}
.rnr-shelf__egg, .rnr-wait__foal {
  --card-accent: var(--rui-line);
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: 12px;
  background: var(--rui-panel); border: 2px solid color-mix(in srgb, var(--card-accent) 75%, transparent);
}
.rnr-shelf__egg.is-ready { border-color: var(--rui-gold); box-shadow: 0 0 18px rgba(245, 194, 66, 0.45); }
.rnr-shelf__ring { --size: calc(68px * var(--rui-s)); }
.rnr-shelf__empty { grid-column: 1 / -1; margin: 0; font-size: var(--rui-body); line-height: 1.45; color: var(--rui-soft); }
.rnr-item__words { flex: 1 1 auto; min-width: 0; }
.rnr-item__name { margin: 0; font-size: calc(18px * var(--rui-s)); font-weight: bold; line-height: 1.25; color: var(--rui-ink); overflow-wrap: anywhere; }
.rnr-item__meta { margin: 0; font-size: var(--rui-min); font-weight: bold; line-height: 1.35; color: var(--card-accent); }
.rnr-item__line { margin: 2px 0 0; font-size: var(--rui-min); line-height: 1.35; color: var(--rui-ink); }
.rnr-shelf--niches { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(210px * var(--rui-s))), 1fr)); box-shadow: inset 0 -10px 0 #3E4440, inset 0 -13px 0 #6E7468, 0 8px 20px rgba(0, 0, 0, 0.35); }
.rnr-shelf--niches .rnr-shelf__egg { flex-direction: column; text-align: center; padding: 18px 10px 12px; border-radius: 100px 100px 14px 14px / 64px 64px 14px 14px; background: linear-gradient(180deg, #0C0F12, var(--rui-panel) 60%); }
.rnr-shelf--niches .rnr-shelf__ring { --size: calc(104px * var(--rui-s)); }

/* the waiting foals */
.rnr-wait { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rnr-wait__foal { flex-wrap: wrap; }
.rnr-wait__ring { --size: calc(60px * var(--rui-s)); }
.rnr-wait__go { flex: 1 1 10em; }

/* the pens: a crib each, in the painted cribs' colours, the foal in a ring that fills as it grows */
.rnr-cribs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(232px * var(--rui-s))), 1fr)); }
.rnr-crib {
  --crib: #C9A8F5; --card-accent: var(--crib);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center;
  padding: 46px 14px 14px; border-radius: 120px 120px 18px 18px / 72px 72px 18px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--crib) 34%, #1B1428) 0, #1B1428 58%);
  border: 3px solid var(--crib);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42), inset 0 -8px 0 color-mix(in srgb, var(--crib) 38%, #1B1428);
}
/* the crib's rail, behind the portrait */
.rnr-crib::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: calc(46px + 60px * var(--rui-s)); height: calc(52px * var(--rui-s));
  border-top: 4px solid color-mix(in srgb, var(--crib) 70%, transparent);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--crib) 45%, transparent) 0 6px, transparent 6px 24px);
  opacity: 0.55; pointer-events: none;
}
.rnr-crib > * { position: relative; }
.rnr-crib__pen { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 1px 14px; border-radius: 999px; background: var(--crib); color: #14121A; font-size: var(--rui-min); font-weight: bold; line-height: 1.5; white-space: nowrap; }
.rnr-crib__ring { --size: calc(120px * var(--rui-s)); margin-bottom: 4px; }
.rnr-crib__ghost { width: calc(120px * var(--rui-s)); height: calc(120px * var(--rui-s)); margin-bottom: 4px; border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--crib) 70%, transparent); background: rgba(18, 13, 29, 0.6); }
.rnr-crib__name { margin: 0; font-size: calc(20px * var(--rui-s)); font-weight: bold; line-height: 1.25; color: var(--rui-ink); overflow-wrap: anywhere; }
.rnr-crib__meta { margin: 0; font-size: var(--rui-min); font-weight: bold; line-height: 1.35; color: var(--card-accent); }
.rnr-crib__line { margin: 0; font-size: var(--rui-min); line-height: 1.4; color: var(--rui-ink); }
.rnr-crib__acts { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 8px; }
.rnr-crib__acts .rui-btn { flex: 1 1 8em; }
.rnr-crib__why { margin: 4px 0 0; font-size: var(--rui-min); font-weight: bold; color: var(--rui-warn); }
.rnr-crib--empty { background: linear-gradient(180deg, color-mix(in srgb, var(--crib) 16%, #1B1428) 0, rgba(27, 20, 40, 0.94) 58%); border-style: dashed; }
.rnr-crib--empty .rnr-crib__line { color: var(--rui-soft); }
.rnr-crib--reveal { border-color: var(--rui-gold); box-shadow: 0 0 26px color-mix(in srgb, var(--card-accent) 55%, transparent), 0 10px 24px rgba(0, 0, 0, 0.42); }
.rui[data-side="horde"] .rnr-crib { --crib: #7FE0D6; border-radius: 18px; }
.rnr-save { margin-top: 14px; }
/* a phone held sideways: smaller portraits, the same words */
.rui[data-mode="compact"] .rnr-crib { padding-top: 40px; }
.rui[data-mode="compact"] .rnr-crib__ring, .rui[data-mode="compact"] .rnr-crib__ghost { --size: calc(84px * var(--rui-s)); width: var(--size); height: var(--size); }
.rui[data-mode="compact"] .rnr-crib::before { top: calc(40px + 40px * var(--rui-s)); height: calc(40px * var(--rui-s)); }
.rui[data-mode="compact"] .rnr-shelf--niches .rnr-shelf__ring { --size: calc(84px * var(--rui-s)); }

/* an egg carried in from the Stables or the Barracks lands on its shelf */
@keyframes rnr-arrive { 0% { transform: translateY(-48px) scale(0.6); opacity: 0; } 60% { transform: translateY(4px) scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes rnr-glow { 0%, 100% { box-shadow: 0 0 0 rgba(245, 194, 66, 0); } 50% { box-shadow: 0 0 28px rgba(245, 194, 66, 0.8); } }
.rnr-arrive { border-color: var(--rui-gold) !important; animation: rnr-arrive 0.7s cubic-bezier(.2, .9, .3, 1.2) both, rnr-glow 1.2s ease-in-out 0.7s 3; }

/* ---- THE NEW EGG (js/nursery-room.js eggSheet): the end of a pair in the Stables or the Barracks ---- */
@media (min-height: 561px) { .rnr-egg .rui-dlg { width: min(680px, 100%); } }
.rnr-egg__hero { position: relative; display: grid; place-items: center; height: calc(190px * var(--rui-s)); margin: 0 0 6px; }
.rnr-egg__glow { position: absolute; width: calc(230px * var(--rui-s)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, var(--rui-gold)) 70%, transparent) 0, transparent 68%); animation: rnr-breathe 2.2s ease-in-out infinite; }
.rnr-egg__art { position: relative; width: calc(150px * var(--rui-s)); height: calc(150px * var(--rui-s)); object-fit: contain; animation: rnr-land 0.6s cubic-bezier(.2, .9, .3, 1.3) both, rui-wobble 0.18s ease-in-out 0.8s 4; }
.rnr-egg__art.rui-art--none { display: block; border-radius: 50%; background: var(--card-accent, var(--rui-accent)); }
@keyframes rnr-land { 0% { transform: scale(0.2); } 100% { transform: scale(1); } }
@keyframes rnr-breathe { 0%, 100% { transform: scale(0.92); opacity: 0.75; } 50% { transform: scale(1.06); opacity: 1; } }
.rnr-egg__name { margin: 0; text-align: center; font: bold calc(28px * var(--rui-s))/1.2 var(--rui-title-font); color: var(--rui-gold); overflow-wrap: anywhere; }
.rnr-egg__kind { margin: 2px 0 10px; text-align: center; font-size: var(--rui-body); font-weight: bold; color: var(--card-accent, var(--rui-accent)); }
.rnr-egg__line { margin-left: auto; margin-right: auto; text-align: center; }
.rnr-egg__next { margin: 14px 0 8px; font-size: var(--rui-body); letter-spacing: 0.04em; color: var(--rui-gold); }
.rnr-road--small { flex-direction: column; gap: 6px; }
.rnr-road--small .rnr-road__stop { flex: 0 0 auto; }
.rnr-road--small .rnr-road__stop + .rnr-road__stop::before { content: none; }
.rnr-road--small .rnr-road__words span { font-size: var(--rui-body); color: var(--rui-ink); }
.rnr-egg__foot .rnr-egg__carry { flex: 1 1 14em; }
@media (max-height: 560px) {
  .rnr-egg__hero { height: calc(124px * var(--rui-s)); }
  .rnr-egg__art { width: calc(100px * var(--rui-s)); height: calc(100px * var(--rui-s)); }
  .rnr-egg__glow { width: calc(150px * var(--rui-s)); }
  /* the way on stays in sight: the sheet's words scroll in a box of their own between the heading and the foot, so
     the foot never lies on them (it used to be sticky over them: convention 36) */
  .rnr-egg .rui-dlg { display: flex; flex-direction: column; overflow: hidden; }
  .rnr-egg .rui-dlg__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .rnr-egg .rui-dlg__head, .rnr-egg .rui-dlg__foot { flex: 0 0 auto; }
}
@media (max-height: 330px) {
  .rnr-egg__hero { height: calc(80px * var(--rui-s)); margin: 0; }
  .rnr-egg__art { width: calc(68px * var(--rui-s)); height: calc(68px * var(--rui-s)); }
  .rnr-egg__glow { width: calc(100px * var(--rui-s)); }
}
@media (prefers-reduced-motion: reduce) { .rnr-arrive, .rnr-egg__glow, .rnr-egg__art { animation: none; } }

/* ---- THE STABLES and the Horde's BARRACKS (js/stables-room.js): the parents as stalls, the pair beside them ---- */
/* On a PC the parents fill the left as stalls and THE PAIR stands on the right (it stays in sight while the stalls
   scroll, when it fits the screen), the road across the top and the way out across the foot. A phone shows one section
   at a time. */
.rui:not([data-mode="compact"]) .rst-board {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 22px; align-content: start;
  grid-template-areas: "road road" "stalls pair" "next next";
  padding-left: max(8px, calc((100% - 1400px) / 2)); padding-right: max(8px, calc((100% - 1400px) / 2));
}
.rui:not([data-mode="compact"]) .rst-board > .rui-sec { margin: 0 0 22px; max-width: none; }
.rst-board > [data-sec="road"] { grid-area: road; }
.rst-board > [data-sec="stalls"] { grid-area: stalls; }
.rst-board > [data-sec="pair"] { grid-area: pair; align-self: start; }
.rst-board > [data-sec="next"] { grid-area: next; }
.rui:not([data-mode="compact"]) .rst-board > [data-sec="pair"][data-stick] { position: sticky; top: 0; z-index: 1; }
/* a narrow window or a tablet held upright: one column, the pair first (its empty places lead to the stalls) */
@media (max-width: 960px) {
  .rui:not([data-mode="compact"]) .rst-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "road" "pair" "stalls" "next"; }
  .rui:not([data-mode="compact"]) .rst-board > [data-sec="pair"] { position: static; }
}
.rst-board .rui-h2 { text-shadow: 0 2px 0 #120D1D, 0 0 12px rgba(18, 13, 29, 0.9); }
.rst-board .rui-p, .rst-empty { color: var(--rui-ink); text-shadow: 0 1px 0 #120D1D, 0 0 10px rgba(18, 13, 29, 0.95); }
.rst-empty { margin: 0 0 12px; font-size: var(--rui-body); line-height: 1.5; max-width: 40em; }
/* the road's stop for the room you are in */
.rnr-road__stop--here .rnr-road__here { border-color: var(--rui-gold); background: rgba(58, 42, 16, 0.94); box-shadow: 0 0 16px rgba(245, 194, 66, 0.35); }

/* the stalls: a wooden stall door each (the Horde's are iron), the parent's portrait in a ring that fills as its rest runs out */
.rst-stalls { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(250px * var(--rui-s))), 1fr)); }
.rst-stalls__item { display: flex; min-width: 0; }
.rst-stall {
  --card-accent: var(--rui-line);
  position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--rui-tap); margin: 0;
  display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 10px; text-align: left;
  border-radius: 14px; border: 2px solid color-mix(in srgb, var(--card-accent) 70%, transparent);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 44px),
    linear-gradient(180deg, rgba(86, 58, 34, 0.96), rgba(44, 29, 19, 0.97));
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, 0.14), 0 6px 16px rgba(0, 0, 0, 0.38);
  color: var(--rui-ink); font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rui[data-side="horde"] .rst-stall {
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(127, 224, 214, 0.08) 0 3px, transparent 3px 36px),
    linear-gradient(180deg, #232A2F, #111518);
}
.rst-stall:not(:disabled):hover { border-color: var(--rui-gold); }
.rst-stall:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rst-stall[aria-pressed="true"] { border-color: var(--rui-gold); box-shadow: 0 0 0 2px var(--rui-gold), 0 0 22px rgba(245, 194, 66, 0.45), 0 6px 16px rgba(0, 0, 0, 0.38); }
.rst-stall:disabled { cursor: default; }
.rst-stall--resting .rui-ring__art { opacity: 0.5; filter: grayscale(0.6); }
.rst-stall__ring { --size: calc(64px * var(--rui-s)); }
.rst-stall__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rst-stall__name { font-size: calc(18px * var(--rui-s)); font-weight: bold; color: var(--rui-ink); overflow-wrap: anywhere; }
.rst-stall__meta { font-size: var(--rui-min); font-weight: bold; color: var(--card-accent); }
.rst-stall__line { font-size: var(--rui-min); color: #9FF0E6; }
.rst-stall--resting .rst-stall__line { color: var(--rui-soft); }
.rst-stall--picked .rst-stall__line { color: var(--rui-gold); font-weight: bold; }
.rst-stall__slot { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: calc(28px * var(--rui-s)); height: calc(28px * var(--rui-s)); border-radius: 50%; background: var(--rui-gold); color: #14121A; font: bold var(--rui-min)/1 var(--rui-title-font); }

/* the pair: a panel of its own, the two parents facing each other over a heart */
.rst-pair-sec { padding: 14px 16px 16px; border-radius: 16px; background: rgba(20, 14, 32, 0.93); border: 2px solid rgba(245, 194, 66, 0.55); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
.rst-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; margin: 6px 0 14px; }
.rst-slot, .rui-btn.rst-slot {
  --card-accent: var(--rui-line);
  min-width: 0; min-height: calc(120px * var(--rui-s)); margin: 0; padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
  border-radius: 14px; border: 2px solid var(--card-accent); background: var(--rui-panel-2); color: var(--rui-ink);
  font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rst-slot:hover { background: #3A2F58; }
.rst-slot:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rui-btn.rst-slot--empty { border-style: dashed; border-color: rgba(201, 168, 245, 0.6); background: rgba(27, 20, 40, 0.9); }
.rst-slot__face { position: relative; display: block; margin-bottom: 2px; }
.rst-slot__ring { --size: calc(72px * var(--rui-s)); }
.rst-slot__letter { top: -2px; right: -10px; }
.rst-slot--b .rui-ring__art { transform: scaleX(-1); }   /* they face each other */
.rst-slot__name { font-size: calc(18px * var(--rui-s)); font-weight: bold; line-height: 1.25; overflow-wrap: anywhere; }
.rst-slot__meta { font-size: var(--rui-min); font-weight: bold; color: var(--card-accent); }
.rst-slot__put { font-size: var(--rui-min); color: var(--rui-soft); text-decoration: underline; }
.rst-heart { align-self: center; font: bold calc(34px * var(--rui-s))/1 var(--rui-title-font); color: #4A4060; }
.rst-match.is-both .rst-heart { color: var(--rui-accent); animation: rst-beat 1.4s ease-in-out infinite; }
@keyframes rst-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
.rst-rule { margin-bottom: 10px; }

/* what the egg could be */
.rst-odds-box { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #120D1D; border: 1px solid var(--rui-line); container-type: inline-size; }
/* every chance on two lines (its name and its number, the bar under them); a wide panel: the four in two columns */
.rst-odds__title { margin: 0 0 8px; font-size: var(--rui-body); letter-spacing: 0.04em; color: var(--rui-gold); }
.rst-odds { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.rst-odds__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; }
.rst-odds__icon { grid-area: 1 / 1; width: calc(28px * var(--rui-s)); height: calc(28px * var(--rui-s)); object-fit: contain; }
.rst-odds__icon.rui-art--none { display: block; border-radius: 50%; background: var(--odds, var(--rui-line)); opacity: 0.6; }
.rst-odds__label { grid-area: 1 / 2; min-width: 0; overflow-wrap: anywhere; font-size: var(--rui-min); font-weight: bold; color: var(--odds, var(--rui-ink)); }
.rst-odds__pct { grid-area: 1 / 3; min-width: 3.2em; text-align: right; font-size: var(--rui-body); color: var(--rui-ink); }
.rst-odds__bar { grid-area: 2 / 1 / 3 / 4; display: block; height: 8px; border-radius: 6px; background: #0E0A16; border: 1px solid var(--rui-line); overflow: hidden; }
.rst-odds__fill { display: block; height: 100%; background: var(--rui-accent); }
@container (min-width: 420px) {
  .rst-odds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; }
}
.rst-odds__line { margin: 6px 0 0; font-size: var(--rui-min); line-height: 1.45; color: var(--rui-soft); }
.rst-odds__strong { margin: 8px 0 0; font-size: var(--rui-body); font-weight: bold; line-height: 1.4; color: var(--rui-gold); }

/* the price, the reason it cannot be paid, and Pair them */
.rst-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px; }
.rst-price { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rst-price__word { font-size: var(--rui-min); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rui-soft); margin-right: 2px; }
.rst-price__plus { font-size: var(--rui-num); color: var(--rui-soft); margin-right: 4px; }
.rst-price__coin[data-tone="short"] .rui-coin__n, .rst-price__coin[data-tone="short"] .rui-coin__word { color: #FF8A8A; }
.rst-why { margin: 0 0 10px; font-size: var(--rui-body); font-weight: bold; line-height: 1.45; color: var(--rui-warn); }
.rst-buy .rst-go { flex: 1 1 12em; min-height: calc(56px * var(--rui-s)); }
.rst-go .rui-btn__label { font-size: calc(20px * var(--rui-s)); }

/* a phone held sideways: smaller portraits, the same words */
.rui[data-mode="compact"] .rst-stall__ring { --size: calc(52px * var(--rui-s)); }
/* a PC at the Normal text size: each chosen parent beside its portrait, so the pair, the odds and Pair them fit a
   laptop's height (1366 x 768) and the pair stays in sight while the stalls scroll */
:root:not([data-text-size]) .rui:not([data-mode="compact"]) .rst-slot:not(.rst-slot--empty) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "face name" "face meta" "face put";
  align-content: center; justify-items: start; column-gap: 12px; row-gap: 2px; text-align: left; min-height: 96px; padding: 10px 12px;
}
:root:not([data-text-size]) .rui:not([data-mode="compact"]) .rst-slot__face { grid-area: face; align-self: center; margin: 0; }
:root:not([data-text-size]) .rui:not([data-mode="compact"]) .rst-slot__name { grid-area: name; }
:root:not([data-text-size]) .rui:not([data-mode="compact"]) .rst-slot__meta { grid-area: meta; }
:root:not([data-text-size]) .rui:not([data-mode="compact"]) .rst-slot__put { grid-area: put; }
:root:not([data-text-size]) .rui:not([data-mode="compact"]) .rst-slot__ring { --size: 64px; }
:root:not([data-text-size]) .rui:not([data-mode="compact"]) .rst-slot__letter { right: auto; left: -8px; }   /* clear of the name */
.rui[data-mode="compact"] .rst-slot__ring { --size: calc(72px * var(--rui-s)); }
.rui[data-mode="compact"] .rst-slot, .rui[data-mode="compact"] .rui-btn.rst-slot { min-height: calc(120px * var(--rui-s)); }
@media (prefers-reduced-motion: reduce) { .rst-match.is-both .rst-heart { animation: none; } }

/* ---- THE FIELDS' BATTLE LOADOUT (js/loadout-room.js): who marches, the land, and YOUR SQUAD beside them ---- */
/* On a PC the unicorns, the hunters and the land fill the left, every card in sight with no pager, and YOUR SQUAD (the
   summary, the board, the Gate cards, Start Game) stands on the right, in sight while the cards scroll when it fits the
   screen. A phone shows one section at a time from the list on the left, Start Game under the list. */
.rui:not([data-mode="compact"]) .rlo-board {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(280px * var(--rui-s)), calc(360px * var(--rui-s))); gap: 0 22px; align-content: start;
  grid-template-areas: "unicorns squad" "hunters squad" "land squad" "next next";
  padding-left: max(8px, calc((100% - 1500px) / 2)); padding-right: max(8px, calc((100% - 1500px) / 2));
}
.rui:not([data-mode="compact"]) .rlo-board > .rui-sec { margin: 0 0 24px; max-width: none; }
.rlo-board > [data-sec="unicorns"] { grid-area: unicorns; }
.rlo-board > [data-sec="hunters"] { grid-area: hunters; }
.rlo-board > [data-sec="land"] { grid-area: land; }
.rlo-board > [data-sec="squad"] { grid-area: squad; align-self: start; }
.rlo-board > [data-sec="next"] { grid-area: next; }
.rui:not([data-mode="compact"]) .rlo-board > [data-sec="squad"][data-stick] { position: sticky; top: 0; z-index: 1; }
/* a narrow window or a tablet held upright: one column, the squad (and Start Game) first */
@media (max-width: 960px) {
  .rui:not([data-mode="compact"]) .rlo-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "squad" "unicorns" "hunters" "land" "next"; }
  .rui:not([data-mode="compact"]) .rlo-board > [data-sec="squad"] { position: static; }
}
.rlo-board .rui-h2 { text-shadow: 0 2px 0 #120D1D, 0 0 12px rgba(18, 13, 29, 0.9); }
.rlo-board .rui-p, .rlo-empty { color: var(--rui-ink); text-shadow: 0 1px 0 #120D1D, 0 0 10px rgba(18, 13, 29, 0.95); }
.rlo-empty { margin: 0 0 12px; font-size: var(--rui-body); line-height: 1.5; max-width: 40em; }

/* the filters: two lists and a toggle on one row, at the floor's size */
.rlo-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 4px 0 14px; }
.rlo-pick-row { display: inline-flex; align-items: center; gap: 8px; }
.rlo-select__word { font-size: var(--rui-min); color: var(--rui-ink); text-shadow: 0 1px 0 #120D1D; }
.rlo-select {
  min-height: var(--rui-tap); padding: 6px 34px 6px 12px; border-radius: 10px; border: 2px solid rgba(201, 168, 245, 0.6);
  background: #2A2140 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F5C242' stroke-width='2.4'/%3E%3C/svg%3E") right 12px center no-repeat;
  color: var(--rui-ink); font: bold var(--rui-min)/1.25 var(--font, sans-serif); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.rlo-select:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rlo-select option { background: #1B1428; color: #FBF3E7; }
.rlo-fav[aria-pressed="true"] { background: #43316A; border-color: var(--rui-gold); color: #FFE08A; }

/* the cards: the press is the whole card; the star and the details are buttons of their own on its right edge */
.rlo-grid { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(270px * var(--rui-s))), 1fr)); }
.rlo-grid--land { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(330px * var(--rui-s))), 1fr)); }
.rlo-item { display: flex; min-width: 0; }
.rlo-card {
  --card-accent: var(--rui-line);
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch;
  border-radius: 14px; border: 2px solid color-mix(in srgb, var(--card-accent) 75%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 16%, #1B1428), #150F21 70%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
}
.rlo-card[data-state="picked"] { border-color: var(--rui-good); box-shadow: 0 0 0 2px var(--rui-good), 0 0 20px rgba(142, 240, 122, 0.35), 0 6px 16px rgba(0, 0, 0, 0.38); }
.rlo-card[data-state="fixed"] { border-color: var(--rui-gold); }
.rlo-card[data-state="locked"] { border-style: dashed; background: linear-gradient(160deg, rgba(64, 38, 80, 0.92), #150F21 70%); }
.rlo-card[data-state="locked"] .rui-ring__art, .rlo-card[data-state="locked"] .rlo-badge { opacity: 0.55; filter: grayscale(0.6); }
.rlo-pick {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--rui-tap); margin: 0;
  display: flex; align-items: center; gap: 12px; padding: 12px 34px 12px 10px; text-align: left;
  border: 0; border-radius: 12px; background: transparent; color: var(--rui-ink); font: inherit;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rlo-pick--fixed { cursor: default; }
button.rlo-pick:hover { background: rgba(255, 255, 255, 0.06); }
.rlo-pick:focus-visible, .rlo-tool:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rlo-ring { --size: calc(68px * var(--rui-s)); }
.rlo-badge { flex: 0 0 auto; width: calc(56px * var(--rui-s)); height: calc(56px * var(--rui-s)); object-fit: contain; }
.rlo-badge.rui-art--none { display: block; border-radius: 12px; background: color-mix(in srgb, var(--card-accent) 30%, #120D1D); }
.rlo-card__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; gap: 2px; }
.rlo-card__name { font-size: calc(18px * var(--rui-s)); font-weight: bold; color: var(--rui-ink); overflow-wrap: anywhere; }
.rlo-card__meta { font-size: var(--rui-min); font-weight: bold; color: color-mix(in srgb, var(--card-accent) 70%, #FFF); }
.rlo-card__line { font-size: var(--rui-min); color: #9FF0E6; }
.rlo-card__line[data-tone="warn"] { color: var(--rui-warn); font-weight: bold; }
.rlo-card__line[data-tone="hurt"] { color: var(--rui-warn); }
.rlo-card__line[data-tone="good"] { color: var(--rui-good); font-weight: bold; }
.rlo-card__line[data-tone="soft"] { color: var(--rui-soft); }
.rlo-card__line[data-tone="gold"] { color: var(--rui-gold); font-weight: bold; }
.rlo-card__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.rlo-mark { font-size: var(--rui-min); font-weight: bold; line-height: 1.2; padding: 2px 8px; border-radius: 999px; background: #2A2140; color: var(--rui-soft); }
.rlo-mark--cover { background: #1E3B22; color: var(--rui-good); }
.rlo-gear { width: calc(24px * var(--rui-s)); height: calc(24px * var(--rui-s)); object-fit: contain; border-radius: 50%; background: #120D1D; }
.rlo-tick { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: calc(26px * var(--rui-s)); height: calc(26px * var(--rui-s));
  border-radius: 50%; background: var(--rui-good); color: #14121A; font: bold var(--rui-min)/1 var(--font, sans-serif); }
.rlo-card[data-state="fixed"] .rlo-tick { background: var(--rui-gold); }
.rlo-tools { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 6px 6px 6px 0; }
.rlo-tool {
  width: var(--rui-tap); height: var(--rui-tap); margin: 0; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid rgba(245, 194, 66, 0.75); background: #1B1428; color: var(--rui-gold);
  font: bold calc(20px * var(--rui-s))/1 var(--rui-title-font); cursor: pointer; touch-action: manipulation;
}
.rlo-tool:hover { background: #3A2F58; }
.rlo-star[aria-pressed="false"] { color: #C9BEE2; border-color: rgba(201, 168, 245, 0.55); }

/* the Roost: the Herd's Griffin, under the hunters */
.rlo-roost { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(20, 14, 32, 0.92); border: 1px solid rgba(245, 194, 66, 0.45); }
.rlo-roost__title { margin: 0 0 4px; font: bold var(--rui-body)/1.3 var(--rui-title-font); color: var(--rui-gold); }
.rlo-roost__line { margin: 0 0 8px; font-size: var(--rui-body); color: var(--rui-ink); }
.rlo-roost__line[data-tone="good"] { color: #9FF0E6; }

/* the land: the Village Level and its bar over the deeds */
.rlo-level { margin: 2px 0 10px; max-width: 34em; }
.rlo-level__text { margin: 0; font-size: var(--rui-body); font-weight: bold; color: #9FF0E6; text-shadow: 0 1px 0 #120D1D, 0 0 10px rgba(18, 13, 29, 0.95); }
.rlo-level[data-tone="warn"] .rlo-level__text { color: var(--rui-warn); }
.rlo-level__bar { --card-accent: #7FE0D6; }

/* YOUR SQUAD: a panel of its own, Start Game in it */
.rlo-squad { padding: 14px 16px 16px; border-radius: 16px; background: rgba(20, 14, 32, 0.94); border: 2px solid rgba(245, 194, 66, 0.55); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
.rlo-summary { margin: 0 0 12px; font-size: var(--rui-body); font-weight: bold; line-height: 1.45; color: var(--rui-ink); }
.rlo-squad__opts, .rlo-squad__more { display: grid; gap: 10px; margin: 0 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(150px * var(--rui-s))), 1fr)); }
.rlo-squad__more { margin: 12px 0 0; }
.rlo-squad .rui-btn { width: 100%; }
.rlo-start, .rlo-nav-start { min-height: calc(56px * var(--rui-s)); }
.rlo-start .rui-btn__label, .rlo-nav-start .rui-btn__label { font-size: calc(20px * var(--rui-s)); }
.rlo-live { border-color: rgba(142, 240, 122, 0.7); }
.rlo-live .rui-btn__label { color: var(--rui-good); }
.rlo-note { margin: 12px 0 0; font-size: var(--rui-min); line-height: 1.45; color: var(--rui-soft); }
.rlo-next-title { margin: 18px 0 8px; font: bold var(--rui-body)/1.3 var(--rui-title-font); color: var(--rui-gold); }
/* a phone held sideways: Start Game is the section list's foot, in sight while the list scrolls above it (Goliath,
   2026-10-12: nothing lies on a button; it used to be sticky over the list and covered the Land tab) */
.rlo-nav-start { width: 100%; flex: 0 0 auto; }
.rui[data-mode="compact"][data-shape="tall"] .rlo-nav-start { width: auto; flex: 1 1 100%; margin-top: 6px; }

/* a phone's Start Game at the reading size, so it stays one line beside the section list (Largest included) */
.rui[data-mode="compact"] .rlo-nav-start { min-height: calc(48px * var(--rui-s)); }
.rui[data-mode="compact"] .rlo-nav-start .rui-btn__label { font-size: var(--rui-body); white-space: nowrap; }

/* a phone held sideways: smaller portraits, the same words */
.rui[data-mode="compact"] .rlo-ring { --size: calc(54px * var(--rui-s)); }
.rui[data-mode="compact"] .rlo-badge { width: calc(46px * var(--rui-s)); height: calc(46px * var(--rui-s)); }
.rui[data-mode="compact"] .rlo-squad { padding: 12px; }

/* the sheets: the boards, the Gate cards, the live queue */
.rlo-boards, .rlo-cardlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rlo-boardrow, .rlo-cardrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; background: #120D1D; border: 2px solid rgba(201, 168, 245, 0.4); }
.rlo-boardrow.is-on, .rlo-cardrow.is-on { border-color: var(--rui-good); background: #16241A; }
.rlo-boardrow__words, .rlo-cardrow__words { flex: 1 1 18em; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rlo-boardrow__name, .rlo-cardrow__words strong { font-size: calc(19px * var(--rui-s)); color: var(--rui-ink); }
.rlo-boardrow.is-locked .rlo-boardrow__name { color: var(--rui-soft); }
.rlo-boardrow__line { font-size: var(--rui-min); font-weight: bold; color: var(--rui-gold); }
.rlo-boardrow__blurb { margin: 2px 0 0; font-size: var(--rui-body); color: var(--rui-soft); }
.rlo-boardrow__req { margin: 2px 0 0; font-size: var(--rui-min); color: #9FF0E6; }
.rlo-boardrow__req[data-tone="warn"] { color: var(--rui-warn); font-weight: bold; }
.rlo-cardrow__words span { font-size: var(--rui-min); color: var(--rui-soft); }
.rlo-cardrow__art { width: calc(48px * var(--rui-s)); height: calc(48px * var(--rui-s)); object-fit: contain; flex: 0 0 auto; }
.rlo-cardrow__art.rui-art--none { display: block; border-radius: 8px; background: #2A2140; }
.rlo-cardrow__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rlo-sheet__note { margin: 0 0 10px; font-size: var(--rui-body); font-weight: bold; color: var(--rui-warn); }
.rlo-sheet__note:empty { display: none; }
.rlo-live__state { margin: 0; font-size: var(--rui-body); font-weight: bold; color: #9FF0E6; }

/* ---- UNICORN DEATH INSURANCE (deskSheet): the bureau's painting behind the sheet, a band of it on a short screen ---- */
.rui-dlg-back.rlo-desk[data-paint] {
  background: linear-gradient(180deg, rgba(8, 5, 14, 0.42), rgba(8, 5, 14, 0.62)), var(--rlo-desk-paint) center / cover no-repeat, #120D1D;
}
.rlo-desk .rui-dlg { background: rgba(11, 8, 20, 0.9); }
.rlo-desk__art { display: none; width: 100%; max-height: 24vh; object-fit: cover; border-radius: 10px; margin: 0 0 12px; }
@media (max-height: 560px) { .rlo-desk__art { display: block; } }
.rlo-desk__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px; }
.rlo-desk__icon { width: calc(56px * var(--rui-s)); height: calc(56px * var(--rui-s)); object-fit: contain; flex: 0 0 auto; }
.rlo-desk__sub { flex: 1 1 16em; margin: 0; font-size: var(--rui-min); font-style: italic; color: #C9A8F5; }
.rlo-desk__till { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--rui-body); font-weight: bold; color: var(--rui-gold); }
.rlo-desk__till img { width: calc(30px * var(--rui-s)); height: calc(30px * var(--rui-s)); object-fit: contain; }
.rlo-desk__rules { margin: 0 0 12px; padding: 0 0 0 1.2em; display: flex; flex-direction: column; gap: 6px; }
.rlo-desk__rules li { font-size: var(--rui-body); line-height: 1.45; color: var(--rui-ink); }
.rlo-desk__rules li[data-tone="soft"] { color: var(--rui-soft); }
.rlo-desk__rules li[data-tone="gold"] { color: var(--rui-gold); font-weight: bold; }
.rlo-desk__note[data-tone="good"] { color: var(--rui-good); }
.rlo-desk__empty { margin: 8px 0; font-size: var(--rui-body); line-height: 1.5; color: var(--rui-soft); max-width: 40em; }
.rlo-desk__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(460px * var(--rui-s))), 1fr)); }
.rlo-desk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 12px; background: #120D1D; border: 2px solid var(--card-accent, rgba(201, 168, 245, 0.4)); }
.rlo-desk__row.is-covered { border-color: var(--rui-gold); background: #2E2714; }
.rlo-desk__pic { width: calc(56px * var(--rui-s)); height: calc(56px * var(--rui-s)); object-fit: contain; flex: 0 0 auto; }
.rlo-desk__pic.rui-art--none { display: block; border-radius: 8px; background: #2A2140; }
.rlo-desk__words { flex: 1 1 14em; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rlo-desk__name { font-size: calc(19px * var(--rui-s)); color: var(--rui-ink); overflow-wrap: anywhere; }
.rlo-desk__meta { font-size: var(--rui-min); font-weight: bold; color: var(--card-accent, var(--rui-soft)); }
.rlo-desk__status { display: flex; align-items: center; gap: 8px; font-size: var(--rui-min); color: var(--rui-soft); }
.rlo-desk__status[data-tone="good"] { color: var(--rui-good); font-weight: bold; }
.rlo-desk__status[data-tone="gold"] { color: var(--rui-gold); font-weight: bold; }
.rlo-desk__shield { width: calc(30px * var(--rui-s)); height: calc(30px * var(--rui-s)); object-fit: contain; flex: 0 0 auto; }
.rlo-desk__row:not(.is-covered) .rlo-desk__shield { opacity: 0.6; }
.rlo-desk__act { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rlo-desk__why { font-size: var(--rui-min); color: var(--rui-warn); text-align: right; }
.rlo-desk__force { font: bold var(--rui-body)/1.2 var(--rui-title-font); color: var(--rui-gold); letter-spacing: 1px; text-transform: uppercase; padding: 10px 4px; }

/* ---- A VILLAGE SHOP (js/shop-room.js): its counters as sections, the goods as cards or rows ---- */
.rui:not([data-mode="compact"]) .rsh-board { padding-left: max(8px, calc((100% - 1400px) / 2)); padding-right: max(8px, calc((100% - 1400px) / 2)); }
.rui:not([data-mode="compact"]) .rsh-board > .rui-sec { margin: 0 0 22px; max-width: none; }
.rsh-board .rui-h2 { text-shadow: 0 2px 0 #120D1D, 0 0 12px rgba(18, 13, 29, 0.9); }
.rsh-board .rui-p, .rsh-empty, .rsh-note { color: var(--rui-ink); text-shadow: 0 1px 0 #120D1D, 0 0 10px rgba(18, 13, 29, 0.95); }
.rsh-empty { margin: 0 0 12px; font-size: var(--rui-body); line-height: 1.5; max-width: 40em; }
.rsh-note { margin: 10px 0 0; font-size: var(--rui-min); line-height: 1.45; }
.rsh-cards { list-style: none; margin: 0; padding: 0; }
.rsh-cards__item { display: flex; min-width: 0; }
.rsh-cards__item > .rsh-card { flex: 1 1 auto; min-width: 0; }
.rsh-card .rui-card__line { font-size: var(--rui-min); color: var(--rui-soft); }
/* what a recipe takes: each ingredient with what you have, green when there is enough */
.rsh-lines { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 8px 10px; display: grid; gap: 2px 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(150px * var(--rui-s))), 1fr)); border-radius: 10px; background: #120D1D; }
.rsh-lines__item { font-size: var(--rui-min); font-weight: bold; line-height: 1.4; overflow-wrap: anywhere; }
.rsh-lines__item.has-art { display: flex; align-items: center; gap: 6px; }
.rsh-lines__art { flex: none; width: calc(26px * var(--rui-s)); height: calc(26px * var(--rui-s)); object-fit: contain; }
.rsh-lines__art.rui-art--none { display: block; border-radius: 6px; background: #2A2140; }
.rsh-lines__words { min-width: 0; }
.rsh-lines__item.is-ok { color: var(--rui-good); }
.rsh-lines__item.is-short { color: #FF8FC7; }   /* the same pink on both sides: on the Horde the accent is the teal of "enough" */
.rsh-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rsh-foot .rui-btn { flex: 0 1 auto; min-width: min(100%, calc(260px * var(--rui-s))); }
.rsh-why { margin: 8px 0 0; font-size: var(--rui-min); font-weight: bold; color: var(--rui-warn); text-shadow: 0 1px 0 #120D1D, 0 0 10px rgba(18, 13, 29, 0.95); }
/* a row: a thing to sell, its count and price on the left, its buttons on the right (under it when the row is narrow) */
.rsh-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; container-type: inline-size; }
.rsh-row {
  --card-accent: var(--rui-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px;
  border-radius: 12px; border: 2px solid var(--card-accent); background: var(--rui-panel); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}
.rsh-row__art { flex: none; width: calc(40px * var(--rui-s)); height: calc(40px * var(--rui-s)); object-fit: contain; }
.rsh-row__art.rui-art--none { display: block; border-radius: 8px; background: color-mix(in srgb, var(--card-accent, var(--rui-accent)) 25%, #2A2140); }
.rsh-row__words { flex: 1 1 12em; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
/* the picture's words stay on its line, however narrow the row (convention 38): never wider than what is left of it */
.rsh-row__art + .rsh-row__words { flex-basis: min(12em, calc(100% - 40px * var(--rui-s) - 14px)); }
.rsh-row__name { font-size: calc(20px * var(--rui-s)); color: var(--rui-ink); overflow-wrap: anywhere; }
.rsh-row__meta { font-size: var(--rui-min); color: var(--rui-soft); }
.rsh-row__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rsh-row__acts .rui-btn { min-width: calc(112px * var(--rui-s)); }
.rsh-row__why { flex: 1 1 100%; font-size: var(--rui-min); font-weight: bold; color: var(--rui-warn); }
@container (max-width: 420px) { .rsh-row__acts { margin-left: 0; flex: 1 1 100%; } .rsh-row__acts .rui-btn { flex: 1 1 auto; } }
.rsh-row__value { margin-left: auto; font-size: var(--rui-num); line-height: 1; color: var(--rui-accent); white-space: nowrap; }
.rsh-row__value + .rsh-row__acts { margin-left: 0; }
.rsh-row__bar { margin: 6px 0 0; max-width: 22em; }
/* a part: a heading of its own inside a section (the shelf's eggs, what is bought and waiting) */
.rsh-part { margin-top: 18px; }
.rsh-part__title { margin: 0 0 8px; font: bold var(--rui-body)/1.3 var(--rui-title-font); letter-spacing: 0.03em; color: var(--rui-gold); text-shadow: 0 2px 0 #120D1D, 0 0 12px rgba(18, 13, 29, 0.9); }
.rsh-part__title small { font: normal var(--rui-min)/1.4 var(--font, sans-serif); letter-spacing: 0; color: var(--rui-soft); margin-left: 10px; }
/* the lead: what just happened at this counter (a pull's result), in a box of its own */
.rsh-lead { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(20, 14, 32, 0.94); border: 2px solid rgba(245, 194, 66, 0.55); }
.rsh-lead__title { display: block; font-size: calc(20px * var(--rui-s)); color: var(--rui-gold); }
.rsh-lead__text { margin: 4px 0 0; font-size: var(--rui-body); line-height: 1.45; color: var(--rui-ink); }
.rsh-lead[data-tone="quiet"] { border-color: var(--rui-line); }
.rsh-lead[data-tone="quiet"] .rsh-lead__text { color: var(--rui-soft); }
.rsh-filters { margin: 0 0 12px; }
/* a pick: the one the goods are for, the whole card one button */
.rsh-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(240px * var(--rui-s))), 1fr)); }
.rsh-picks__item { display: flex; min-width: 0; }
.rsh-pick {
  --card-accent: var(--rui-line);
  position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--rui-tap); display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-radius: 12px; border: 2px solid var(--card-accent); background: var(--rui-panel); color: var(--rui-ink); text-align: left; cursor: pointer;
  font: inherit; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rsh-pick:hover { border-color: var(--rui-gold); }
.rsh-pick:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rsh-pick.is-on { border-color: var(--rui-gold); box-shadow: 0 0 0 2px var(--rui-gold), 0 0 18px rgba(245, 194, 66, 0.4); }
.rsh-pick__art { flex: 0 0 auto; width: calc(52px * var(--rui-s)); height: calc(52px * var(--rui-s)); object-fit: contain; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-accent) 30%, transparent) 0 60%, transparent 62%); }
.rsh-pick__art.rui-art--none { display: block; }
.rsh-pick__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rsh-pick__name { font-size: calc(18px * var(--rui-s)); overflow-wrap: anywhere; }
.rsh-pick__meta { font-size: var(--rui-min); font-weight: bold; color: var(--card-accent); }
.rsh-pick__line { font-size: var(--rui-min); color: var(--rui-soft); }
.rsh-pick.is-on .rsh-pick__line { color: var(--rui-gold); font-weight: bold; }
/* a pick that cannot be pressed now (a champion in the Hospital, a tier not yet open): dashed, its line says why */
.rsh-pick:disabled { cursor: default; border-style: dashed; border-color: rgba(201, 168, 245, 0.4); background: #1B1626; }
.rsh-pick:disabled:hover { border-color: rgba(201, 168, 245, 0.4); }
.rsh-pick:disabled .rsh-pick__art { opacity: 0.45; }
.rsh-pick:disabled .rsh-pick__line { color: var(--rui-warn); }
/* the badge (boosters bought and waiting) sits on the card's top edge, so the name keeps the card's width */
.rsh-pick__badge { position: absolute; top: calc(-12px * var(--rui-s)); right: 10px; display: grid; place-items: center; height: calc(26px * var(--rui-s)); padding: 0 8px;
  border-radius: 13px; background: var(--rui-accent); color: #14121A; font: bold var(--rui-min)/1 var(--font, sans-serif); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.rsh-picks__item:has(.rsh-pick__badge) { padding-top: calc(10px * var(--rui-s)); }
/* the switcher: one counter at a time on a PC, the others a press away */
.rsh-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.rsh-switch__btn { flex: 1 1 7em; }
.rsh-switch__btn[aria-pressed="true"] { background: #43316A; border-color: var(--rui-gold); color: #FFF; }
.rsh-switch__btn .rui-btn__sub { color: var(--rui-soft); }
.rui:not([data-mode="compact"]) .rsh-off-wide { display: none; }
.rsh-star { flex: 0 0 auto; align-self: center; margin-left: 6px; }

/* THE ALCHEMY SHOP (js/scenes/alchemy.js): on a wide screen the recipes fill the left, the shelf and the produce stand
   on the right, the way out across the foot; a narrower window stacks them; a phone shows one counter at a time */
@media (min-width: 1100px) {
  .rui:not([data-mode="compact"]) .rsh-board--alchemy {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 22px; align-content: start;
    grid-template-areas: "recipes shelf" "recipes produce" "recipes next"; grid-template-rows: auto auto 1fr;
  }
  .rsh-board--alchemy > [data-sec="recipes"] { grid-area: recipes; }
  .rsh-board--alchemy > [data-sec="shelf"] { grid-area: shelf; }
  .rsh-board--alchemy > [data-sec="produce"] { grid-area: produce; align-self: start; }
  .rsh-board--alchemy > [data-sec="next"] { grid-area: next; }
  .rsh-board--alchemy > [data-sec="shelf"] .rui-grid, .rsh-board--alchemy > [data-sec="produce"] .rsh-rows { grid-template-columns: minmax(0, 1fr); }
}

/* THE CANDY STORE (js/scenes/candy-store.js): on a wide screen who the goods are for on the left, the counter in the
   middle under its switcher, the egg shelf on the right, the way the canvas laid them; a narrower window stacks them */
@media (min-width: 1100px) {
  .rui:not([data-mode="compact"]) .rsh-board--candy {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 0 22px; align-content: start;
    grid-template-areas: "who switch eggs" "who counter eggs" "who next eggs"; grid-template-rows: auto auto 1fr;
  }
  .rsh-board--candy > [data-sec="who"] { grid-area: who; }
  .rsh-board--candy > [data-sec="switch"] { grid-area: switch; }
  .rsh-board--candy > [data-sec="shelf"], .rsh-board--candy > [data-sec="potions"], .rsh-board--candy > [data-sec="boosters"],
  .rsh-board--candy > [data-sec="gobstopper"] { grid-area: counter; }
  .rsh-board--candy > [data-sec="eggs"] { grid-area: eggs; }
  .rsh-board--candy > [data-sec="next"] { grid-area: next; }
  .rsh-board--candy > [data-sec="who"] .rsh-picks { grid-template-columns: minmax(0, 1fr); }
  .rsh-board--candy .rsh-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(250px * var(--rui-s))), 1fr)); }
}

/* THE BLACKSMITH (js/scenes/blacksmith.js, the Horde's Fleshsmith): on a wide screen who is getting outfitted on the
   left, the counter in the middle under its switcher, their kit on the right, the way the canvas laid them */
@media (min-width: 1100px) {
  .rui:not([data-mode="compact"]) .rsh-board--blacksmith {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 0 22px; align-content: start;
    grid-template-areas: "who switch kit" "who counter kit" "who next kit"; grid-template-rows: auto auto 1fr;
  }
  .rsh-board--blacksmith > [data-sec="who"] { grid-area: who; }
  .rsh-board--blacksmith > [data-sec="switch"] { grid-area: switch; }
  .rsh-board--blacksmith > [data-sec="gems"], .rsh-board--blacksmith > [data-sec="forge"], .rsh-board--blacksmith > [data-sec="gear"],
  .rsh-board--blacksmith > [data-sec="resources"], .rsh-board--blacksmith > [data-sec="machines"] { grid-area: counter; }
  .rsh-board--blacksmith > [data-sec="kit"] { grid-area: kit; }
  .rsh-board--blacksmith > [data-sec="next"] { grid-area: next; }
  .rsh-board--blacksmith > [data-sec="who"] .rsh-picks { grid-template-columns: minmax(0, 1fr); }
  .rsh-board--blacksmith .rsh-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(250px * var(--rui-s))), 1fr)); }
}

/* a row's tag beside its name (DOWNED, ON THE SLAB, PLAN ACTIVE), its line and aside under the meta, a bar in the warning
   colour (the Hospital's bleed-out, the slab's clock) */
.rsh-row__tag { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 6px; vertical-align: middle;
  font: bold var(--rui-min)/1.3 var(--font, sans-serif); letter-spacing: 0.04em; color: #14121A; background: var(--rui-soft); }
.rsh-row__tag[data-tone="warn"] { background: #FF8FC7; }
.rsh-row__tag[data-tone="good"] { background: #7FE0D6; }
.rsh-row__tag[data-tone="gold"] { background: var(--rui-gold); }
.rsh-row__line { margin-top: 4px; font-size: var(--rui-min); font-weight: bold; color: var(--rui-ink); }
.rsh-row__line[data-tone="warn"] { color: #FFB3DA; }
.rsh-row__line[data-tone="good"] { color: var(--rui-good); }
.rsh-row__line[data-tone="gold"] { color: var(--rui-gold); }
.rsh-row__aside { font-size: var(--rui-min); font-style: italic; color: var(--rui-soft); }
.rsh-row__bar[data-tone="warn"] .rui-bar__fill { background: linear-gradient(90deg, #FF5FA8, #FF8FC7); }
/* the lead with a picture (the ward's angel or devil), the picture bobbing unless the player asked for less motion */
.rsh-lead--art { display: flex; align-items: center; gap: 14px; }
.rsh-lead__art { flex: 0 0 auto; width: calc(56px * var(--rui-s)); height: calc(56px * var(--rui-s)); object-fit: contain; animation: rsh-bob 1.5s ease-in-out infinite alternate; }
.rsh-lead[data-tone="quiet"] .rsh-lead__title, .rsh-lead--art .rsh-lead__text { margin: 0; }
@keyframes rsh-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .rsh-lead__art { animation: none; } }
/* a sheet over a shop (the Bone Surgeon's tray, the Pact): its painting as a band across the top */
.rsh-sheet__art { display: block; width: 100%; max-height: 26vh; object-fit: cover; border-radius: 10px; margin: 0 0 12px; }
.rsh-sheet-back .rui-dlg__body { container-type: inline-size; }
/* a screen's tutorial as a sheet (js/tutorial.js through ShadowsRoomUI.tour) */
.rui-tour__kicker { margin: 0; font: bold var(--rui-min)/1.4 var(--font, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rui-soft); }
.rui-tour__title { margin: 4px 0 8px; font: bold calc(24px * var(--rui-s))/1.25 var(--rui-title-font); color: var(--rui-gold); }
.rui-tour__body { margin: 0; }
.rui-tour__troops { margin: 10px 0 0; padding-left: 1.2em; font-size: var(--rui-min); color: var(--rui-ink); line-height: 1.45; }
.rui-tour__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.rui-tour__acts .rui-btn { min-width: calc(140px * var(--rui-s)); }

/* THE HOSPITAL (js/game.js HospitalScene, the Horde's Bone Surgeon): on a wide screen the ward (or the table) on the
   left with the Wall under it, the desk (potions, the Plan or the Retainer and the Pact) on the right */
@media (min-width: 1100px) {
  .rui:not([data-mode="compact"]) .rsh-board--hospital {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 22px; align-content: start;
    grid-template-areas: "ward desk" "wall desk"; grid-template-rows: auto 1fr;
  }
  .rsh-board--hospital > [data-sec="ward"] { grid-area: ward; }
  .rsh-board--hospital > [data-sec="desk"] { grid-area: desk; align-self: start; }
  .rsh-board--hospital > [data-sec="wall"] { grid-area: wall; align-self: start; }
}


/* ---- THE QUEEN'S ARENA (js/scenes/arena.js, js/arena-room.js) -------------------------------------------------------
   On a wide screen the champion on the left, the opponent on the right and the matchup with the three ways in between
   them, as the canvas stood them; the deck and the last bouts under the matchup */
@media (min-width: 1100px) {
  .rui:not([data-mode="compact"]) .rsh-board--arena {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 22px; align-content: start;
    grid-template-areas: "champion matchup opponent" "champion deck opponent" "champion log opponent" "champion next opponent";
    grid-template-rows: auto auto auto 1fr;
  }
  .rsh-board--arena > [data-sec="champion"] { grid-area: champion; }
  .rsh-board--arena > [data-sec="opponent"] { grid-area: opponent; }
  .rsh-board--arena > [data-sec="matchup"] { grid-area: matchup; }
  .rsh-board--arena > [data-sec="deck"] { grid-area: deck; }
  .rsh-board--arena > [data-sec="log"] { grid-area: log; align-self: start; }
  .rsh-board--arena > [data-sec="next"] { grid-area: next; }
  .rsh-board--arena .rsh-picks, .rsh-board--arena .rsh-rows { grid-template-columns: minmax(0, 1fr); }
}
.rsh-board--arena [data-sec="matchup"] .rsh-foot .rui-btn { width: 100%; }
.rsh-board--arena [data-sec="opponent"] .rsh-lead__art { width: calc(112px * var(--rui-s)); height: calc(112px * var(--rui-s)); transform: scaleX(-1); }

/* THE COACH'S RAIL in a bout (js/arena-room.js mountCoach), on the battle HUD's .bh look */
.ah .bh-scroll { gap: 6px; }
.ah-head { display: flex; flex-direction: column; gap: 4px; }
.ah-title { margin: 0; font: bold var(--rui-body)/1.25 var(--rui-title-font); color: var(--rui-ink); }
.ah-line { margin: 0; font-size: var(--rui-min); line-height: 1.35; color: var(--rui-gold); }
.ah-line:empty { display: none; }
.ah-fighter { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; }
.ah-fighter__n { font-weight: bold; font-size: var(--rui-min); color: var(--rui-ink); overflow-wrap: anywhere; min-width: 0; }
.ah-fighter__w { font-size: var(--rui-min); color: var(--rui-soft); white-space: nowrap; }
.ah-fighter .rui-bar { grid-column: 1 / -1; width: 100%; height: 8px; margin: 2px 0 0; --card-accent: #7FE0D6; }
.ah-fighter[data-who="them"] .rui-bar { --card-accent: #6BE04A; }
.ah-fighter[data-tone="hurt"] .rui-bar { --card-accent: #FF6B8A; }
.ah-fighter[data-tone="hurt"] .ah-fighter__w { color: #FF9AAE; }
.ah[data-mode="compact"] .ah-fighter { grid-template-columns: minmax(0, 1fr); }
.ah-list .rui-btn { width: 100%; align-items: flex-start; text-align: left; }
.ah-card[data-tone="chaos"] { border-color: #8CFF3A; background: #2E0F52; }
.ah-card[data-tone="legend"] { border-color: #FFB347; }
.ah-card[data-tone="soft"] .rui-btn__label { color: var(--rui-soft); }
.ah-note { margin: 0; font-size: var(--rui-min); line-height: 1.35; color: var(--rui-soft); }
.ah-ghost { margin: 0; padding: 0 0 0 1.1em; display: flex; flex-direction: column; gap: 4px; font-size: var(--rui-min); line-height: 1.35; color: var(--rui-soft); }

/* ---- THE SKY PIT (js/scenes/skypit.js, js/skypit-room.js) ---------------------------------------------------------------
   On a wide screen your hero on the left, the ghost on the right and the bout with How to fly between them, as the canvas
   stood them; the Horde's dragon picker (no bout yet) keeps the room's own list */
@media (min-width: 1100px) {
  .rui:not([data-mode="compact"]) .rsh-board--skypit:has(> [data-sec="bout"]) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 22px; align-content: start;
    grid-template-areas: "hero bout ghost" "hero keys ghost" "hero next ghost";
    grid-template-rows: auto auto 1fr;
  }
  .rsh-board--skypit > [data-sec="hero"] { grid-area: hero; }
  .rsh-board--skypit > [data-sec="ghost"] { grid-area: ghost; }
  .rsh-board--skypit > [data-sec="bout"] { grid-area: bout; }
  .rsh-board--skypit > [data-sec="keys"] { grid-area: keys; align-self: start; }
  .rsh-board--skypit > [data-sec="next"] { grid-area: next; }
  .rsh-board--skypit:has(> [data-sec="bout"]) .rsh-rows { grid-template-columns: minmax(0, 1fr); }
}
.rsh-board--skypit [data-sec="bout"] .rsh-foot .rui-btn { width: 100%; }
.rsh-board--skypit [data-sec="hero"] .rsh-lead__art, .rsh-board--skypit [data-sec="ghost"] .rsh-lead__art { width: calc(112px * var(--rui-s)); height: calc(112px * var(--rui-s)); }
.rsh-board--skypit [data-sec="ghost"] .rsh-lead__art { transform: scaleX(-1); }

/* THE SKY PIT'S RAIL in a bout (js/skypit-room.js mountRail), on the battle HUD's .bh look: the clock and both heroes
   scroll if they must, the moves stay at the foot under the thumb */
.spr .spr-scroll { gap: 6px; padding-bottom: 4px; }
.spr-title { margin: 0; font: bold var(--rui-body)/1.25 var(--rui-title-font); color: var(--rui-ink); }
.spr-line { margin: 0; font-size: var(--rui-min); line-height: 1.35; color: var(--rui-gold); }
.spr-line:empty { display: none; }
.spr-fighter { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n w" "hp hp" "s sw" "st st"; column-gap: 8px; row-gap: 2px; align-items: baseline; }
.spr-fighter__n { grid-area: n; font-weight: bold; color: var(--rui-ink); overflow-wrap: anywhere; min-width: 0; }
.spr-fighter__w { grid-area: w; color: var(--rui-ink); white-space: nowrap; }
.spr-fighter__s { grid-area: s; color: var(--rui-soft); min-width: 0; }
.spr-fighter__sw { grid-area: sw; color: var(--rui-soft); white-space: nowrap; }
.spr[data-mode="compact"] .spr-fighter { grid-template-areas: "n n" "w sw" "hp hp" "st st" "s s"; }
.spr-fighter .rui-bar { width: 100%; margin: 0; }
.spr-fighter .spr-hp { grid-area: hp; height: 8px; --card-accent: #FF8FC7; }
.spr[data-side="horde"] .spr-fighter[data-who="you"] .spr-hp, .spr[data-side="herd"] .spr-fighter[data-who="them"] .spr-hp { --card-accent: #6BE04A; }
.spr-fighter .spr-st { grid-area: st; height: 5px; --card-accent: #7FE0D6; }
.spr-fighter[data-winded] .spr-st { --card-accent: #FF8FC7; }
.spr-fighter[data-tone="hurt"] .spr-fighter__w { color: #FF9AAE; }
.spr-moves { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rui-line); }
.spr[data-mode="compact"] .spr-moves { grid-template-columns: 1fr 1fr; }
.spr-move { width: 100%; align-items: flex-start; text-align: left; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.spr[data-mode="compact"] .spr-move { align-items: center; text-align: center; min-height: calc(56px * var(--rui-s)); padding: 6px; }
.spr[data-mode="compact"] .spr-move .rui-btn__sub { display: none; }
.spr-move__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.spr[data-mode="compact"] .spr-move__top { justify-content: center; }
.spr-key { min-width: calc(26px * var(--rui-s)); padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.35); background: #1A1026;
  font: bold var(--rui-min)/1.2 var(--font, sans-serif); color: var(--rui-gold); text-align: center; }
.spr-move[aria-pressed="true"] { background: #234A47; border-color: #7FE0D6; }
.spr-move--special:not(:disabled) { border-color: #6BE04A; }
.spr-move:disabled { opacity: 0.6; cursor: default; }

/* ---- THE REAL ESTATE AGENCY (js/scenes/realestate.js): For sale on the left, the plot with Barnaby on the right ---- */
.rsh-board--estate .rsh-lead__art { width: calc(108px * var(--rui-s)); height: calc(108px * var(--rui-s)); }
.rsh-board--estate [data-sec="plot"] .rui-card__art { width: calc(176px * var(--rui-s)); height: calc(176px * var(--rui-s)); grid-row: 1 / span 5; }
.rui[data-mode="compact"] .rsh-board--estate .rsh-lead__art { width: calc(80px * var(--rui-s)); height: calc(80px * var(--rui-s)); }
.rui[data-mode="compact"] .rsh-board--estate [data-sec="plot"] .rui-card__art { width: calc(120px * var(--rui-s)); height: calc(120px * var(--rui-s)); }
/* the plot is one card the section wide; the six buildings stand three abreast, each picture beside its name */
.rsh-board--estate [data-sec="plot"] .rsh-cards { grid-template-columns: minmax(0, 1fr); }
.rsh-board--estate [data-part="build"] .rsh-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(200px * var(--rui-s))), 1fr)); }
.rsh-board--estate [data-part="build"] .rsh-row { flex-wrap: nowrap; }
.rsh-board--estate [data-part="build"] .rsh-row__words { flex-basis: 0; }
.rsh-board--estate [data-part="facts"] .rsh-row__name { color: var(--rui-gold); }
/* a phone held upright: Barnaby smaller, so his line keeps the width */
@media (max-width: 480px) { .rsh-board--estate .rsh-lead__art { width: calc(72px * var(--rui-s)); height: calc(72px * var(--rui-s)); } }
@container (max-width: 360px) {
  .rsh-board--estate [data-sec="plot"] .rui-card__art { grid-row: auto; width: calc(120px * var(--rui-s)); height: calc(120px * var(--rui-s)); }
}
@media (min-width: 1100px) {
  .rui:not([data-mode="compact"]) .rsh-board--estate {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; align-content: start;
    grid-template-areas: "sale plot" "next next";
  }
  .rsh-board--estate > [data-sec="sale"] { grid-area: sale; align-self: start; }
  .rsh-board--estate > [data-sec="plot"] { grid-area: plot; align-self: start; }
  .rsh-board--estate > [data-sec="next"] { grid-area: next; }
  .rsh-board--estate > [data-sec="sale"] .rsh-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* THE SEASON (js/scenes/season.js): a side's tag in its own colour, the tug of war the section wide (the Herd's share
   from the left in pink, the Horde's the rest in green), the god's face and the loot chests big enough to see */
.rsh-row__tag[data-tone="herd"] { background: #FF8FC7; }
.rsh-row__tag[data-tone="horde"] { background: #6BE04A; }
.rsh-board--season [data-card="tug"] .rsh-row__bar { max-width: none; }
.rsh-board--season [data-card="tug"] .rui-bar { height: calc(20px * var(--rui-s)); background: #6BE04A; }
.rsh-board--season [data-card="tug"] .rui-bar__fill { background: #FF8FC7; }
.rsh-board--season [data-part="god"] .rsh-row__art { width: calc(96px * var(--rui-s)); height: calc(96px * var(--rui-s)); object-fit: cover; border-radius: 12px; }
.rsh-board--season [data-part="loot"] .rsh-row__art { width: calc(64px * var(--rui-s)); height: calc(64px * var(--rui-s)); }
.rsh-sheet--prize .rsh-lead__art { width: calc(96px * var(--rui-s)); height: calc(96px * var(--rui-s)); }

/* a read (js/shop-room.js layout 'read'): prose at the reading size under its kicker and heading, a painting beside it on
   a wide page and over it on a narrow one (the Story's chapters, a god's story, a dossier's sections) */
.rsh-reads { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; container-type: inline-size; }
.rsh-reads__item { display: flex; min-width: 0; }
.rsh-read {
  --card-accent: var(--rui-line); --read-ink: var(--rui-gold);
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 22px; align-items: start; padding: 14px 16px;
  border-radius: 14px; border: 2px solid var(--card-accent); background: var(--rui-panel); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.rsh-read--art { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.rsh-read__art { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 34% 30%; border-radius: 10px; background: #120D1D; }
.rsh-read__words { min-width: 0; }
.rsh-read__meta { margin: 0 0 4px; font-size: var(--rui-min); font-weight: bold; letter-spacing: 0.08em; line-height: 1.35; color: var(--read-ink); }
.rsh-read__name { margin: 0 0 8px; font: bold calc(24px * var(--rui-s))/1.25 var(--rui-title-font); color: var(--rui-ink); overflow-wrap: anywhere; }
.rsh-read__body { margin: 0; font-size: var(--rui-body); line-height: 1.6; color: var(--rui-ink); max-width: 44em; overflow-wrap: anywhere; }
.rsh-read[data-tone="dream"] .rsh-read__body { font-style: italic; }
.rsh-read[data-tone="detail"] { border-style: dashed; }
@container (max-width: 700px) { .rsh-read--art { grid-template-columns: minmax(0, 1fr); } .rsh-read__art { max-height: 42vh; } }

/* THE STORY (js/story-room.js): the Ten's portraits square in their frames with the face in them (a god's head stands
   at 0.34 of its painting's width, in the top band), the creatures and the troops big enough to tell apart */
.rsh-board--story [data-sec="ten"] .rsh-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(320px * var(--rui-s))), 1fr)); }
.rsh-board--story [data-sec="ten"] .rui-card__art { width: calc(96px * var(--rui-s)); height: calc(96px * var(--rui-s)); border-radius: 12px; object-fit: cover; object-position: 34% 20%; background: #120D1D; }
.rsh-board--story .rsh-picks { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(280px * var(--rui-s))), 1fr)); }
.rsh-board--story .rsh-pick__art { width: calc(64px * var(--rui-s)); height: calc(64px * var(--rui-s)); }
.rsh-sheet--god .rsh-sheet__art { max-height: 38vh; object-position: 34% 5%; }
.rsh-sheet--god .rsh-lead__art { animation: none; }
.rsh-sheet--beast .rsh-lead__art, .rsh-sheet--troop .rsh-lead__art { width: calc(112px * var(--rui-s)); height: calc(112px * var(--rui-s)); }

/* ---- THE BATTLE'S HUD (js/battle-hud.js): the status bar over the board, the rail beside it, the line under it ----
   The bar and the rail sit beside the fitted canvas (js/stage-rail.js planHud), never on it; the prompt and a wave's
   banner sit over the board's edge and take no press. Same floor as a room: 16 px words, 44 px buttons. */
.bh { position: fixed; inset: 0; z-index: 36; pointer-events: none; font-size: var(--rui-min); line-height: 1.3; }
.bh[hidden], html[data-rotate] .bh, html[data-loading] .bh { display: none; }
.bh-bar, .bh-rail { position: fixed; pointer-events: auto; background: rgba(13, 9, 22, 0.96); }
.bh-bar[hidden] { display: none; }
.bh-bar {
  display: flex; align-items: center; gap: 8px 14px; padding: 6px 12px; overflow: hidden;
  border-bottom: 1px solid var(--rui-line);
}
.bh-rail {
  display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 0;
  border-left: 1px solid var(--rui-line); overflow: hidden;
}
/* measures --rui-edge-r for the rail's right padding (js/battle-hud.js edgeIn) */
.bh-edge { position: fixed; top: 0; left: 0; height: 0; width: var(--rui-edge-r); visibility: hidden; pointer-events: none; }
.bh[data-mode="compact"] .bh-rail { padding-top: max(6px, env(safe-area-inset-top, 0px)); gap: 6px; }
.bh[data-mode="compact"] .bh-controls { gap: 4px; }
.bh-only-compact { display: none !important; }
.bh[data-mode="compact"] .bh-only-compact { display: inline-flex !important; }

/* the status: a row on the bar, a column at the top of a phone's rail */
.bh-status { display: flex; align-items: center; gap: 4px 18px; flex: 1 1 auto; min-width: 0; }
.bh-st { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.bh-st__w { color: var(--rui-soft); font-size: var(--rui-min); }
.bh-st__n { font-weight: bold; font-size: calc(20px * var(--rui-s)); color: var(--rui-ink); }
.bh-st--essence .bh-st__n { color: var(--rui-gold); }
.bh-st--candy .bh-st__n { color: #FF8FC7; }
.bh-st--village { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.bh-st--village .rui-bar { grid-column: 1 / -1; width: 100%; min-width: calc(120px * var(--rui-s)); height: 8px; margin: 2px 0 0; --card-accent: #7FE0D6; }
.bh-st--village[data-tone="hurt"] .rui-bar { --card-accent: #FF6B8A; }
.bh-st--village[data-tone="hurt"] .bh-st__n { color: #FF9AAE; }
.bh-st--level { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.bh-st--level .rui-bar { grid-column: 1 / -1; height: 6px; margin: 2px 0 0; width: 100%; min-width: calc(90px * var(--rui-s)); --card-accent: #7FE0D6; }
.bh-st__xp { grid-row: 1; grid-column: 2; }
.bh-st--wave .bh-st__n { color: #8EF07A; }
.bh-tools { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.bh[data-mode="compact"] .bh-status { flex-direction: column; align-items: stretch; flex: 0 0 auto; gap: 2px; }
.bh[data-mode="compact"] .bh-st { justify-content: space-between; }
.bh[data-mode="compact"] .bh-st--wave, .bh[data-mode="compact"] .bh-st--level { display: none; }
.bh[data-mode="compact"] .bh-st__n { font-size: calc(18px * var(--rui-s)); }
.bh[data-mode="compact"] .bh-st--village .rui-bar { min-width: 0; }
/* a long health (the Horde's village has four figures) drops under its word in a narrow rail; the Horde's count of the
   felled is the bar's on a PC only */
.bh[data-mode="compact"] .bh-st--village { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; }
.bh[data-mode="compact"] .bh-st--village .rui-bar { flex: 1 0 100%; }
.bh[data-mode="compact"] .bh-st--more { display: none; }

/* the controls: Pause, Speed (and a phone's Menu) in a row, Start wave under them */
.bh-controls { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.bh-controls .rui-btn { flex: 1 1 0; padding: 4px 6px; }
.bh-icon { flex-direction: row; gap: 6px; }
.bh-icon__svg svg { width: calc(18px * var(--rui-s)); height: calc(18px * var(--rui-s)); fill: currentColor; display: block; }
/* a phone's icon buttons keep their names in aria-label (js/battle-hud.js iconBtn) */
.bh[data-mode="compact"] .bh-controls .bh-icon .rui-btn__label { display: none; }
.bh-speed .rui-btn__label { font-size: calc(18px * var(--rui-s)); }
.bh[data-mode="compact"] .bh-speed .rui-btn__sub { display: none; }
.bh-wave { flex: 0 0 auto; width: 100%; min-height: calc(var(--rui-tap) + 4px); font-size: var(--rui-body); }
.bh-wave .rui-btn__sub { font-weight: bold; }

/* the chosen card or unit, with its actions */
.bh-focus { flex: 0 0 auto; padding: 8px; border-radius: 12px; border: 2px solid var(--rui-gold); background: var(--rui-panel); }
.bh-focus[hidden] { display: none; }
.bh-focus__head { display: flex; align-items: center; gap: 8px; }
.bh-focus__img { width: calc(44px * var(--rui-s)); height: calc(44px * var(--rui-s)); object-fit: contain; flex: 0 0 auto; }
.bh-focus__t { margin: 0; font-size: var(--rui-body); line-height: 1.25; color: var(--rui-gold); overflow-wrap: anywhere; }
.bh-focus__l { margin: 4px 0 0; font-size: var(--rui-min); line-height: 1.4; color: var(--rui-ink); }
.bh-focus__l[data-tone="warn"] { color: var(--rui-warn); }
.bh-focus__l[data-tone="good"] { color: var(--rui-good); }
.bh-focus__l[data-tone="soft"] { color: var(--rui-soft); }
.bh-focus__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bh-focus__row .rui-btn { flex: 1 1 auto; padding: 6px 10px; }

/* the defenders, a list that scrolls; the satchel, the Nursery and the god under it */
.bh-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; }
.bh-h { margin: 2px 0 0; font: bold var(--rui-min)/1.3 var(--rui-title-font); letter-spacing: 0.06em; color: var(--rui-gold); text-transform: uppercase; }
.bh-h[hidden] { display: none; }
.bh-list { display: flex; flex-direction: column; gap: 6px; }
.bh-list[hidden], .bh-st[hidden] { display: none; }
.bh-card {
  --card-accent: var(--rui-line);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "img name" "img cost" "state state";
  column-gap: 8px; align-items: center; text-align: left; width: 100%; min-height: var(--rui-tap); padding: 6px 8px; margin: 0;
  border-radius: 12px; border: 2px solid var(--card-accent); background: var(--rui-panel); color: var(--rui-ink);
  font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.bh-card:hover { background: #2E2446; }
.bh-card:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.bh-card[data-armed="1"] { border-color: #8EF07A; background: #233A2A; box-shadow: 0 0 0 2px #8EF07A inset; }
.bh-card[data-dim="1"] { background: #17121F; }
.bh-card[data-dim="1"] .bh-card__img { opacity: 0.45; }
.bh-card__img { grid-area: img; width: calc(40px * var(--rui-s)); height: calc(40px * var(--rui-s)); object-fit: contain; }
.bh-card__img[hidden] { display: none; }
/* a Gate card brought from the Loadout: its effect in place of a price */
.bh-gcard { --card-accent: #C9A8F5; }
.bh-gcard .bh-card__n { color: #A8E05F; letter-spacing: 0.04em; }
.bh-gcard[data-dim="1"] .bh-card__n { color: var(--rui-soft); }
.bh-gcard .bh-card__img.rui-art--none { display: block; border-radius: 8px; background: #2A2040; }
.bh-card__name { grid-area: name; font-weight: bold; font-size: var(--rui-min); line-height: 1.2; overflow-wrap: break-word; min-width: 0; }
/* a phone's rail is narrow: the name takes the card's whole width, the picture sits beside the price under it */
.bh[data-mode="compact"] .bh-card { grid-template-areas: "name name" "img cost" "state state"; row-gap: 2px; }
.bh-card__cost { grid-area: cost; font-weight: bold; font-size: calc(18px * var(--rui-s)); color: var(--rui-gold); }
.bh-card__cost[data-tone="warn"] { color: var(--rui-warn); }
.bh-card__cost[data-tone="soft"] { color: var(--rui-soft); font-weight: normal; font-size: var(--rui-min); }
.bh-card__state { grid-area: state; font-size: var(--rui-min); line-height: 1.3; color: var(--rui-soft); }
.bh-card__state[data-tone="good"] { color: var(--rui-good); }
.bh-card__state[data-tone="warn"] { color: var(--rui-warn); }
.bh-card__state[data-tone="hurt"] { color: #FF9AAE; }
.bh-card__state:empty { display: none; }
.bh-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bh-foot .rui-btn { width: 100%; align-items: flex-start; text-align: left; }
.bh-foot .rui-btn[hidden] { display: none; }
.bh-satchel[data-armed="1"] { border-color: #7FE0D6; background: #1F3A38; }
/* the side's own buttons (the Horde's Breach, Hammer, War Band, land) and the Gate cards' Pick, full width in the rail */
.bh-sidetools { display: flex; flex-direction: column; gap: 6px; }
.bh-sidetools[hidden], .bh-gatepick[hidden] { display: none; }
.bh-sidetools .rui-btn, .bh-gatepick { width: 100%; align-items: flex-start; text-align: left; }
.bh-sidetools .rui-btn[data-armed="1"] { border-color: #FF8FC7; background: #3A1F33; box-shadow: 0 0 0 2px #FF8FC7 inset; }
.bh-st--more .bh-st__n { color: #FF8FC7; }
.bh-nursery[data-tone="warn"] .rui-btn__sub { color: var(--rui-warn); }
.bh-god { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bh-god[hidden] { display: none; }
.bh-god__img { width: calc(56px * var(--rui-s)); height: calc(56px * var(--rui-s)); object-fit: cover; border-radius: 10px; border: 2px solid var(--rui-line); flex: 0 0 auto; }
.bh-god__img[hidden] { display: none; }
.bh-god__w, .bh-land { margin: 0; font-size: var(--rui-min); line-height: 1.35; color: var(--rui-soft); overflow-wrap: anywhere; }
.bh-god__w { flex: 1 1 6em; min-width: 0; }
.bh-land[hidden] { display: none; }

/* the line under the board, and a wave's title card over its top: both take no press */
.bh-prompt {
  position: fixed; display: flex; justify-content: center; pointer-events: none; padding: 6px 12%;
  font-size: var(--rui-body); font-weight: bold; line-height: 1.35; text-align: center; color: var(--rui-ink);
  text-shadow: 0 1px 2px #000;
  background: linear-gradient(90deg, transparent, rgba(13, 9, 22, 0.88) 12%, rgba(13, 9, 22, 0.88) 88%, transparent);
}
.bh-prompt[data-band] { align-items: center; padding: 4px 16px; background: none; }
.bh-prompt[hidden], .bh-prompt:empty { display: none; }
.bh-prompt[data-tone="gold"] { color: var(--rui-gold); }
.bh-prompt[data-tone="toast"] { color: #FFF; }
.bh-banner {
  position: fixed; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none;
  padding: 8px 16px; text-align: center; opacity: 0; transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bh-banner[hidden] { display: none; }
.bh-banner.is-in { opacity: 1; transform: none; }
.bh-banner { background: linear-gradient(90deg, transparent, rgba(13, 9, 22, 0.9) 15%, rgba(13, 9, 22, 0.9) 85%, transparent); }
.bh-banner__img { width: calc(52px * var(--rui-s)); height: calc(52px * var(--rui-s)); object-fit: cover; border-radius: 50%; border: 2px solid #6BE04A; }
.bh-banner__t { margin: 0; font: bold calc(24px * var(--rui-s))/1.15 var(--rui-title-font); color: #8EF07A; letter-spacing: 0.04em; }
.bh-banner__l { margin: 2px 0 0; font-size: var(--rui-body); color: var(--rui-ink); }
@media (prefers-reduced-motion: reduce) { .bh-banner { transition: none; transform: none; } }

/* a sheet over the battle (the satchel, a level's pick, a defender's details, the menu) */
.bh-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bh-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--rui-line); background: var(--rui-panel-2); }
.bh-row__img { width: calc(48px * var(--rui-s)); height: calc(48px * var(--rui-s)); object-fit: contain; }
.bh-row__name { margin: 0; font-weight: bold; font-size: var(--rui-body); line-height: 1.3; }
.bh-row__line { margin: 2px 0 0; font-size: var(--rui-min); line-height: 1.4; color: var(--rui-soft); }
.bh-row__note { margin: 2px 0 0; font-size: var(--rui-min); line-height: 1.4; color: var(--rui-warn); }
.bh-row__count { font-weight: bold; font-size: var(--rui-num); color: #7FE0D6; }
.bh-row[data-tone="soft"] { opacity: 0.8; }
@container (max-width: 420px) { .bh-row { grid-template-columns: auto minmax(0, 1fr) auto; } .bh-row > .rui-btn { grid-column: 1 / -1; } }
.bh-sheet .rui-dlg__body { container-type: inline-size; }
.rui-p[data-tone="warn"] { color: var(--rui-warn); }

/* while the battle's HUD is up its Menu carries the side tabs, the dock and the demo badge stand down */
html[data-battle-hud] .ud-drawer-tab, html[data-battle-hud] .ff-tab, html[data-battle-hud] #battle-dock, html[data-battle-hud] #demo-banner { display: none !important; }
.bh-card__word { font-size: var(--rui-min); font-weight: normal; color: var(--rui-soft); }
.bh[data-mode="compact"] .bh-card__word { display: none; }
/* a phone: the chosen one's buttons come straight under its name, its numbers under them */
.bh[data-mode="compact"] .bh-focus:not([hidden]) { display: flex; flex-direction: column; }
.bh[data-mode="compact"] .bh-focus__row { order: 2; margin: 6px 0 2px; flex-direction: column; flex-wrap: nowrap; }
.bh[data-mode="compact"] .bh-focus__l { order: 3; }
.bh[data-mode="compact"] .bh-focus__head { order: 1; }
/* a phone's rail keeps the battle's numbers: the wave (on its button), the village and the essence; candy is on the Nursery */
.bh[data-mode="compact"] .bh-st--candy { display: none; }
.bh-sheet__art { display: block; width: calc(96px * var(--rui-s)); height: calc(96px * var(--rui-s)); object-fit: contain; margin: 0 auto 8px; }

/* ---- THE ARMORY (js/scenes/armory.js, the Horde's Totem Yard): one section at a time under the switcher on a PC (a
   phone's section list on a phone), the cards four abreast on a PC and two on a phone held sideways, each whole ---- */
.rsh-board--armory .rsh-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(260px * var(--rui-s))), 1fr)); }
.rsh-board--armory .rui-card__art { width: calc(72px * var(--rui-s)); height: calc(72px * var(--rui-s)); }
/* a god's face is a painting, square in its frame as the canvas's yard had it */
.rsh-board--armory [data-sec="shadow"] .rui-card__art { border-radius: 12px; object-fit: cover; background: none; }

/* ---- THE ROOST (js/scenes/roost.js, the Horde's Eyrie): the hero big on the perch, the trophy wall's plaques several
   abreast, every plaque on the honour wall, the loadout's three slots; the picker is a sheet ---- */
.rsh-board--roost [data-sec="perch"] .rsh-cards { grid-template-columns: minmax(0, 1fr); }
.rsh-board--roost [data-sec="perch"] .rui-card__art { width: calc(176px * var(--rui-s)); height: calc(176px * var(--rui-s)); grid-row: 1 / span 5; }
.rui[data-mode="compact"] .rsh-board--roost [data-sec="perch"] .rui-card__art { width: calc(120px * var(--rui-s)); height: calc(120px * var(--rui-s)); }
@container (max-width: 360px) {
  .rsh-board--roost [data-sec="perch"] .rui-card__art { grid-row: auto; width: calc(120px * var(--rui-s)); height: calc(120px * var(--rui-s)); }
}
.rsh-board--roost [data-sec="trophies"] > .rsh-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(170px * var(--rui-s))), 1fr)); }
.rsh-board--roost [data-sec="trophies"] > .rsh-rows .rsh-row__value { color: var(--rui-gold); }
.rsh-board--roost [data-sec="honour"] .rsh-row__art { width: calc(56px * var(--rui-s)); height: calc(56px * var(--rui-s)); }
@media (min-width: 1100px) {
  .rui:not([data-mode="compact"]) .rsh-board--roost {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; align-content: start;
    grid-template-areas: "perch trophies" "loadout trophies" "honour trophies" "next trophies"; grid-template-rows: auto auto auto 1fr;
  }
  .rsh-board--roost > [data-sec="perch"] { grid-area: perch; }
  .rsh-board--roost > [data-sec="trophies"] { grid-area: trophies; align-self: start; }
  .rsh-board--roost > [data-sec="loadout"] { grid-area: loadout; }
  .rsh-board--roost > [data-sec="honour"] { grid-area: honour; align-self: start; }
  .rsh-board--roost > [data-sec="next"] { grid-area: next; }
}

/* ---- THE READABLE MAP (js/village-map.js, js/scenes/village.js): the Village's words over its painting ----
   The painting stays the whole map and every door on it stays the canvas's: the header sits over the painted sky, a
   building's name card beside the building, a toast under the header, the tour's card by the lit building. Places, the
   Ladder and the Charters are sheets. Same floor as a room: 16 px words, 44 px buttons. */
.rvm { position: fixed; inset: 0; z-index: 36; pointer-events: none; font-size: var(--rui-min); line-height: 1.35; color: var(--rui-ink); }
.rvm[hidden], html[data-rotate] .rvm, html[data-loading] .rvm { display: none; }
.rvm-head, .rvm-tourcard, .rvm-card[data-go] { pointer-events: auto; }
.rvm-head {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 8px 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(var(--rui-edge-r) + var(--rui-tabs) + 8px) 10px calc(var(--rui-edge-l) + var(--rui-tabs) + 8px);
  background: linear-gradient(180deg, rgba(13, 9, 22, 0.94), rgba(13, 9, 22, 0.8));
  border-bottom: 1px solid var(--rui-line);
  container-type: inline-size;
}
html[data-device="phone"][data-serving] .rvm-head { padding-left: max(calc(var(--rui-edge-l) + var(--rui-tabs) + 8px), calc(max(6px, env(safe-area-inset-left, 0px)) + 52px)); }
.rvm-head[data-busy] { opacity: 0.45; }
.rvm-titles { flex: 1 1 auto; min-width: 0; }
.rvm-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.rvm[data-side="horde"] .rvm-title { color: var(--rui-accent); }
.rvm-tag { margin: 2px 0 0; font-size: var(--rui-min); color: var(--rui-soft); }
.rvm-level { flex: 0 0 auto; align-items: stretch; text-align: left; gap: 2px; padding: 6px 14px; min-width: calc(220px * var(--rui-s)); max-width: calc(360px * var(--rui-s)); }
.rvm-level[hidden] { display: none; }
.rvm-level__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rvm-level__name { font-size: var(--rui-body); color: var(--rui-gold); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.rvm[data-side="horde"] .rvm-level__name { color: var(--rui-accent); }
.rvm-level__xp { font-size: var(--rui-min); white-space: nowrap; }
.rvm-level .rui-bar { width: 100%; height: 8px; margin: 2px 0; --card-accent: var(--rui-gold); }
.rvm[data-side="horde"] .rvm-level .rui-bar { --card-accent: var(--rui-accent); }
.rvm-level__next { font-size: var(--rui-min); font-weight: normal; color: var(--rui-soft); max-width: calc(340px * var(--rui-s)); }
.rvm-level[data-warn] .rvm-level__next { color: var(--rui-warn); }
.rvm-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rvm:not([data-mode="compact"]) .rvm-only-compact { display: none; }
.rvm[data-mode="compact"] .rvm-only-wide { display: none; }
/* held sideways on a phone the header is one row: Back's arrow, the name, the level and its bar, Places, the tour, the
   text size and a gold "?"; the line, the XP and what the next level opens are in the Ladder, a press away */
.rvm[data-mode="compact"] { --rui-title: calc(22px * var(--rui-s)); }
.rvm[data-mode="compact"] .rvm-head { padding-top: calc(env(safe-area-inset-top, 0px) + 5px); padding-bottom: 5px; gap: 6px 10px; }
.rvm[data-mode="compact"] .rvm-tag, .rvm[data-mode="compact"] .rvm-level__xp, .rvm[data-mode="compact"] .rvm-level__next { display: none; }
.rvm[data-mode="compact"] .rvm-level { min-width: calc(110px * var(--rui-s)); padding: 4px 12px; }
.rvm[data-mode="compact"] .rvm-back .rui-btn__label, .rvm[data-mode="compact"] .rvm-help .rui-btn__label { display: none; }
.rvm[data-mode="compact"] .rvm-back { padding: 8px; }
.rvm[data-mode="compact"] .rvm-back::before { margin: -4px 2px 0 0; }
.rvm[data-mode="compact"] .rvm-help::before { content: '?'; font: bold calc(24px * var(--rui-s))/1 var(--rui-title-font); }
.rvm[data-mode="compact"] .rvm-tools .rui-btn { padding: 6px 12px; }
/* the narrowest headers (an iPhone SE held sideways, or a phone at the Larger or Largest text): the tour waits in Places */
@container (max-width: 640px) { .rvm-tour { display: none; } }
html[data-text-size] .rvm[data-mode="compact"] .rvm-tour { display: none; }
/* a name too long for the row (a long god's camp, or the Larger and Largest text) is never cut (js/village-map.js
   layout): on a phone Take the tour steps off first (data-snug, Places has it), then the name (data-tight); on a PC
   the level and the tools take a second row (data-tight) */
.rvm[data-mode="compact"][data-snug] .rvm-tour { display: none; }
.rvm[data-mode="wide"][data-tight] .rvm-head { flex-wrap: wrap; }
.rvm[data-mode="wide"][data-tight] .rvm-titles { flex-basis: calc(100% - 140px * var(--rui-s)); }
.rvm[data-mode="wide"][data-tight] .rvm-tools { margin-left: auto; }
.rvm[data-mode="compact"][data-tight] .rvm-titles { display: none; }
.rvm[data-mode="compact"][data-tight] .rvm-tools { margin-left: auto; }
/* a phone held upright (the rotate curtain covers the map there, but the header still fits if it shows): Back and the
   name on one row, the level across the next, the tools under it */
@media (max-width: 560px) {
  .rvm-head { flex-wrap: wrap; }
  .rvm-titles { flex-basis: calc(100% - 64px); }
  .rvm-level { flex: 1 1 auto; max-width: none; }
  .rvm-tools { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
}

/* a building's name, beside it: on a touch screen with Go in (it takes presses only then, so a hover never flickers) */
.rvm-card {
  position: fixed; max-width: min(calc(380px * var(--rui-s)), calc(100vw - 120px));
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 8px 16px; border-radius: 12px; background: rgba(20, 18, 26, 0.94);
  border: 2px solid var(--card-accent, var(--rui-line)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.rvm-card[hidden] { display: none; }
.rvm-card__name { font: bold var(--rui-body)/1.25 var(--rui-title-font); color: var(--rui-ink); }
.rvm-card[data-shut] .rvm-card__name { color: #D9C8F7; }
.rvm-card__line { font-size: var(--rui-min); color: var(--rui-soft); }
.rvm-card__go { margin-top: 6px; }
.rvm-toast {
  position: fixed; left: 50%; transform: translateX(-50%); max-width: min(calc(600px * var(--rui-s)), calc(100vw - 120px));
  padding: 8px 18px; border-radius: 12px; background: rgba(20, 18, 26, 0.96); border: 2px solid var(--rui-line);
  font-weight: bold; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.rvm-toast[hidden] { display: none; }
.rvm-toast[data-tone="good"] { border-color: var(--rui-good); color: #D4FFC8; }
.rvm-toast[data-tone="warn"] { border-color: var(--rui-warn); color: #FFE7B0; }
.rvm-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the tour's card, by the building the canvas lights */
.rvm-tourcard {
  position: fixed; width: min(calc(540px * var(--rui-s)), calc(100vw - 120px)); max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 18px 14px; border-radius: 14px; background: rgba(20, 18, 26, 0.97); border: 2px solid rgba(245, 194, 66, 0.85);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
.rvm-tourcard[hidden] { display: none; }
.rvm-tourcard__kicker { margin: 0; font-size: var(--rui-min); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rui-soft); }
.rvm-tourcard__title { margin: 2px 0 6px; font: bold var(--rui-h2)/1.2 var(--rui-title-font); color: var(--rui-gold); }
.rvm-tourcard__body { margin: 0 0 10px; font-size: var(--rui-body); line-height: 1.45; white-space: pre-line; }
.rvm-tourcard__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rvm[data-mode="compact"] .rvm-tourcard { width: min(calc(470px * var(--rui-s)), calc(100vw - 120px)); padding: 8px 14px 10px; }
.rvm[data-mode="compact"] .rvm-tourcard__body { font-size: var(--rui-min); margin-bottom: 8px; }

/* PLACES: every door on the map, by group */
.rvm-lead { margin: 0 0 12px; }
.rvm-h3 { margin: 18px 0 8px; }
.rvm-places { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(250px * var(--rui-s))), 1fr)); }
.rvm-place { align-items: flex-start; text-align: left; min-height: calc(64px * var(--rui-s)); padding: 8px 14px; border-left: 6px solid var(--card-accent, var(--rui-accent)); font-size: var(--rui-body); }
.rvm-place .rui-btn__sub { color: var(--rui-soft); }
.rvm-place:disabled { border-left-color: rgba(201, 168, 245, 0.35); }

/* THE LADDER: every level as a card, the player's place on it */
.rvm-rungs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(300px * var(--rui-s))), 1fr)); }
.rvm-rung { padding: 10px 14px; border-radius: 12px; background: var(--rui-panel-2); border: 2px solid var(--rui-line); }
.rvm-rung[data-state="reached"] { border-color: rgba(127, 224, 214, 0.7); }
.rvm-rung[data-state="next"] { border-color: var(--rui-gold); }
.rvm-rung__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.rvm-rung__level { font: bold var(--rui-h2)/1.2 var(--rui-title-font); }
.rvm-rung[data-state="reached"] .rvm-rung__level, .rvm-rung[data-state="reached"] .rvm-rung__state { color: #7FE0D6; }
.rvm-rung[data-state="next"] .rvm-rung__level, .rvm-rung[data-state="next"] .rvm-rung__state { color: var(--rui-gold); }
.rvm-rung__xp { font-weight: bold; }
.rvm-rung__state { margin-left: auto; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; }
.rvm-rung p { margin: 6px 0 0; font-size: var(--rui-min); }
.rvm-rung__opens[data-none] { color: var(--rui-soft); }
.rvm-rung__k { color: var(--rui-soft); }
.rvm-rung__purse[data-paid], .rvm-rung__charter[data-signed] { color: var(--rui-gold); }
.rvm-soft { font-size: var(--rui-min); }
.rvm-warn { color: var(--rui-warn); font-weight: bold; }

/* THE CHARTERS: each level's pair, the one signed in gold; an open one is a button */
.rvm-chlevel { margin: 0 0 16px; }
.rvm-chlevel__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; font: bold var(--rui-h2)/1.2 var(--rui-title-font); color: var(--rui-soft); }
.rvm-chlevel[data-reached] .rvm-chlevel__head { color: var(--rui-accent); }
.rvm-chlevel__state { font: bold var(--rui-min)/1.3 var(--font, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rui-soft); }
.rvm-charters { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(280px * var(--rui-s))), 1fr)); }
.rvm-charter {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 12px 14px; min-height: var(--rui-tap);
  text-align: left; border-radius: 12px; background: var(--rui-panel-2); border: 2px dashed var(--rui-line); color: var(--rui-ink); font: inherit;
}
button.rvm-charter { cursor: pointer; touch-action: manipulation; border: 2px solid var(--rui-accent); -webkit-tap-highlight-color: transparent; }
button.rvm-charter:hover { background: #3A2F58; }
.rvm-charter:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rvm-charter[data-state="signed"] { background: #2E2714; border: 3px solid var(--rui-gold); }
.rvm-charter__name { font: bold var(--rui-body)/1.25 var(--rui-title-font); }
.rvm-charter[data-state="signed"] .rvm-charter__name { color: var(--rui-gold); }
.rvm-charter[data-state="locked"] .rvm-charter__name { color: var(--rui-soft); }
.rvm-charter__line { font-size: var(--rui-min); color: var(--rui-soft); }
.rvm-charter__note { font-size: var(--rui-min); font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; color: #7FE0D6; }
.rvm-charter[data-state="signed"] .rvm-charter__note { color: var(--rui-gold); }
.rvm-say { margin: 0 0 10px; font-weight: bold; }
.rvm-say:empty { display: none; }
.rvm-say[data-tone="good"] { color: var(--rui-good); }
.rvm-say[data-tone="warn"] { color: var(--rui-warn); }
.rvm-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* THE LEVEL-UP CARD and THE PURSES: the words, the gold ribbon of what was paid, one button */
.rvm-notice__line { text-align: center; color: var(--rui-ink); margin-left: auto; margin-right: auto; }
.rvm-ribbon { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px auto 0; padding: 10px 18px; max-width: 34em; border-radius: 12px; background: #2E2714; border: 2px solid var(--rui-gold); text-align: center; }
.rvm-ribbon__head { font-size: var(--rui-min); font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rui-gold); }
.rvm-ribbon__words { font: bold var(--rui-num)/1.25 var(--rui-title-font); color: var(--rui-ink); }
.rvm-notice-back .rvm-foot { justify-content: center; }

/* ---- THE FRONT SCREENS' SHEETS (js/front-sheets.js, slice 7): CHOOSE A SIDE and PLAY DEMO's two cards and their
   confirm, PICK YOUR PATH, SERVE A GOD, a god's dossier and a gift's card, over the main screen's canvas ---- */
/* a page popup opened over one of these sheets (the swear's hard confirm, js/convert.js) stands over it, not under */
.rui-dlg-back ~ .ud-pop-backdrop { z-index: 62; }
.sfs-sub { margin: 0 auto 14px; text-align: center; }
.sfs-sub:empty { display: none; }
.sfs-note { margin: 14px auto 0; text-align: center; }
.sfs-say { margin: 0 auto 12px; text-align: center; font-weight: bold; color: var(--rui-warn); }
.sfs-say:empty { display: none; }

/* the two cards side by side: the side's painting under an ink scrim, its crest, the title on a ribbon, the lines, Choose */
.sfs-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 3vw, 40px); }
.sfs-side {
  --side: #FF8FC7; --side-ink: #FFD6EA;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: calc(330px * var(--rui-s)); margin: 0; padding: 84px 16px 16px; border-radius: 18px; border: 2px solid var(--side);
  background: #14101E; color: var(--rui-ink); font: inherit; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.sfs-side[data-key="horde"] { --side: #A8E05F; --side-ink: #D9FFB0; }
.sfs-side::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--side) 16%, transparent) 0, rgba(11, 8, 20, 0.05) 26%, rgba(11, 8, 20, 0.86) 56%, rgba(11, 8, 20, 0.96) 100%); }
.sfs-side__paint { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 68%; }
.sfs-side[data-key="horde"] .sfs-side__paint { object-position: 50% 30%; }
/* the Herd's painting stands its unicorn low in the frame (60% across, 78% down): drawn bigger, that unicorn is put a
   third of the way down the card, above the words, as the canvas card's focus did */
.sfs-side[data-key="herd"] .sfs-side__paint { inset: auto; left: 50%; top: 38%; width: auto; height: 190%; max-width: none; transform: translate(-60%, -78%); }
.sfs-side__hero { position: absolute; top: 4%; left: 4%; z-index: -1; width: 34%; max-width: 150px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.sfs-side__crest { position: absolute; top: 10px; right: 10px; width: 52px; height: 52px; padding: 6px; border-radius: 50%; object-fit: contain; background: rgba(20, 16, 30, 0.85); border: 2px solid var(--side); }
.sfs-side__title { align-self: stretch; margin: 0 0 4px; padding: 6px 12px; border-radius: 10px; background: var(--side); color: #14121A;
  font: bold calc(24px * var(--rui-s))/1.2 var(--rui-title-font); letter-spacing: 0.04em; text-shadow: 0 1px 0 var(--side-ink); overflow-wrap: anywhere; }
.sfs-side__line { display: block; font-size: var(--rui-body); line-height: 1.4; color: var(--rui-ink); text-shadow: 0 1px 3px #0B0814; }
.sfs-side__go { display: inline-flex; align-items: center; justify-content: center; min-height: var(--rui-tap); margin-top: 6px; padding: 8px 32px; border-radius: 12px;
  background: var(--side); color: #14121A; font: bold var(--rui-min)/1.2 var(--font, sans-serif); }
.sfs-side:not(:disabled):hover, .sfs-side:focus-visible { transform: translateY(-6px) scale(1.01); box-shadow: 0 0 0 4px color-mix(in srgb, var(--side) 50%, transparent), 0 0 30px color-mix(in srgb, var(--side) 45%, transparent); }
.sfs-side:focus-visible { outline: 3px solid #FFE08A; outline-offset: 3px; }
.sfs-side:disabled { cursor: default; border-style: dashed; }
.sfs-side:disabled .sfs-side__paint, .sfs-side:disabled .sfs-side__crest { filter: grayscale(0.9) brightness(0.55); }
.sfs-side:disabled .sfs-side__title { background: #2A2140; color: #C9BEE2; text-shadow: none; }
.sfs-side:disabled .sfs-side__go { background: #231C31; color: #C9BEE2; border: 2px dashed rgba(201, 168, 245, 0.5); }
.sfs-back--confirm .rui-dlg { width: min(620px, 100%); border-color: #FF8FC7; text-align: center; }
.sfs-back--confirm[data-card="horde"] .rui-dlg { border-color: #A8E05F; }
.sfs-crest { display: block; width: 64px; height: 64px; margin: 0 auto 8px; object-fit: contain; }
.sfs-confirm { margin: 0 auto 10px; color: var(--rui-ink); }
.sfs-oneway { margin: 0 auto 4px; font-weight: bold; color: #FF8FC7; }
.sfs-back--confirm .rui-dlg__foot { justify-content: center; }

/* PICK YOUR PATH: one row a path, its name in its colour over what it means */
.sfs-rows { display: flex; flex-direction: column; gap: 12px; }
.sfs-row {
  --card-accent: #F5C242;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: var(--rui-tap); margin: 0; padding: 12px 16px;
  border-radius: 14px; border: 2px solid var(--card-accent); background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 16%, var(--rui-panel)), var(--rui-panel));
  color: var(--rui-ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sfs-row[data-accent="pink"] { --card-accent: #FF8FC7; }
.sfs-row[data-accent="teal"] { --card-accent: #7FE0D6; }
.sfs-row--primary { border-width: 3px; box-shadow: 0 0 22px color-mix(in srgb, var(--card-accent) 35%, transparent); }
.sfs-row:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 28%, var(--rui-panel)), var(--rui-panel-2)); }
.sfs-row:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.sfs-row__title { font: bold var(--rui-h2)/1.2 var(--rui-title-font); letter-spacing: 0.04em; color: var(--card-accent); }
.sfs-row__line { font-size: var(--rui-body); line-height: 1.45; color: var(--rui-soft); }

/* SERVE A GOD: the ten as tiles, the one picked in gold; DEMO and SWEAR ride the foot */
.sfs-gods { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(180px * var(--rui-s))), 1fr)); }
.sfs-god {
  --god: #C9A8F5;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: var(--rui-tap); margin: 0; padding: 12px 10px;
  border-radius: 14px; border: 2px solid color-mix(in srgb, var(--god) 60%, transparent); background: var(--rui-panel); color: var(--rui-ink);
  font: inherit; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sfs-god:hover { background: color-mix(in srgb, var(--god) 12%, var(--rui-panel-2)); }
.sfs-god:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.sfs-god[aria-pressed="true"] { border: 3px solid var(--rui-gold); background: color-mix(in srgb, var(--god) 18%, var(--rui-panel)); box-shadow: 0 0 18px rgba(245, 194, 66, 0.35); }
.sfs-god__face { width: calc(84px * var(--rui-s)); height: calc(84px * var(--rui-s)); margin-bottom: 4px; border-radius: 50%; object-fit: cover; border: 2px solid var(--god); background: #120D1D; }
.sfs-god__name { font: bold calc(20px * var(--rui-s))/1.2 var(--rui-title-font); color: color-mix(in srgb, var(--god) 70%, #fff); overflow-wrap: anywhere; }
.sfs-god__epithet { font-size: var(--rui-min); font-style: italic; line-height: 1.3; color: var(--rui-soft); }
.sfs-god__more { margin-top: 4px; font-size: var(--rui-min); color: var(--rui-gold); }
.sfs-warn { margin: 14px auto 0; text-align: center; font-weight: bold; color: #FF8FC7; }

/* A GOD'S DOSSIER: the face, the name and epithet, then the sections two to a row on a wide screen (read across, then
   down, as the sheet scrolls), one under the other on a phone */
.sfs-back--dossier .rui-dlg { border-color: var(--god, rgba(245, 194, 66, 0.7)); }
.sfs-dos__top { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.sfs-dos__face { flex: 0 0 auto; width: calc(112px * var(--rui-s)); height: calc(112px * var(--rui-s)); border-radius: 50%; object-fit: cover; border: 3px solid var(--god, var(--rui-gold)); background: #120D1D; }
.sfs-dos__who { min-width: 0; }
.sfs-dos__line { margin: 0 0 4px; }
.sfs-dos__line--first { font-style: italic; color: var(--rui-ink); }
.sfs-dos__secs { display: grid; gap: 0 28px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(380px * var(--rui-s))), 1fr)); }
.sfs-dos__sec { min-width: 0; margin: 0 0 16px; }
.sfs-dos__head { margin: 0 0 6px; }
.sfs-dos__text { margin: 0; color: var(--rui-ink); }
.sfs-dos__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sfs-dos__list li { display: flex; align-items: center; gap: 10px; font-size: var(--rui-body); line-height: 1.35; }
.sfs-dos__icon { flex: 0 0 auto; width: calc(36px * var(--rui-s)); height: calc(36px * var(--rui-s)); object-fit: contain; }
.sfs-dos__name { font-weight: bold; color: var(--rui-ink); overflow-wrap: anywhere; }
.sfs-dos__meta { margin-left: auto; font-size: var(--rui-min); color: var(--rui-soft); white-space: nowrap; }

/* A GIFT: the card over the canvas's rain (its dim is the canvas's own, so this backdrop stays light); one button */
.sfs-back--gift { background: rgba(8, 5, 14, 0.25); }
.sfs-back--gift .rui-dlg__close { display: none; }
.sfs-back--gift .rui-dlg { text-align: center; }
.sfs-back--gift .rui-dlg__title { text-align: center; letter-spacing: 0.06em; }
.sfs-gift__shout { margin: 0 0 10px; font: bold calc(44px * var(--rui-s))/1.1 var(--rui-title-font); letter-spacing: 0.06em; color: #FF8FC7; text-shadow: 0 3px 0 #1A1026; animation: sfs-shout 0.84s ease-in-out infinite alternate; }
.sfs-gift__line { margin: 0 auto 14px; color: var(--rui-ink); }
.sfs-gift__bag { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sfs-gift__item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: calc(120px * var(--rui-s)); padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--rui-line); background: var(--rui-panel-2); font-size: var(--rui-body); font-weight: bold; animation: sfs-bob 1.4s ease-in-out infinite alternate; }
.sfs-gift__item:nth-child(2n) { animation-delay: -0.5s; }
.sfs-gift__icon { width: calc(44px * var(--rui-s)); height: calc(44px * var(--rui-s)); object-fit: contain; }
.sfs-gift__small { margin: 0 auto; font-size: var(--rui-min); font-style: italic; }
.sfs-back--gift .rui-dlg__foot { justify-content: center; }
.sfs-gift__take { min-height: calc(56px * var(--rui-s)); padding: 10px 32px; font-size: calc(20px * var(--rui-s)); }
@keyframes sfs-shout { from { transform: rotate(-2deg) scale(1); } to { transform: rotate(2deg) scale(1.08); } }
@keyframes sfs-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sfs-side { transition: none; } .sfs-side:not(:disabled):hover, .sfs-side:focus-visible { transform: none; } .sfs-gift__shout, .sfs-gift__item { animation: none; } }

/* a phone held sideways: the cards shorter (the painting stays), the gods' tiles without their hint, the shout smaller;
   the confirm and a gift stay cards in the middle (the kit's short-screen sheet is the whole screen), so the cards
   under the one and the rain around the other still show */
@media (max-height: 560px) {
  .sfs-back--confirm, .sfs-back--gift { padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .sfs-back--confirm .rui-dlg, .sfs-back--gift .rui-dlg { height: auto; max-height: 100%; padding: 0; border-width: 2px; border-radius: 16px; }
  .sfs-side { min-height: 0; padding-top: 64px; }
  .sfs-side__hero { display: none; }
  .sfs-side__crest { width: 44px; height: 44px; }
  .sfs-god__face { width: calc(64px * var(--rui-s)); height: calc(64px * var(--rui-s)); }
  .sfs-god__more { display: none; }
  .sfs-dos__face { width: calc(80px * var(--rui-s)); height: calc(80px * var(--rui-s)); }
  .sfs-dos__secs { grid-template-columns: minmax(0, 1fr); }
  .sfs-gift__shout { font-size: calc(32px * var(--rui-s)); margin-bottom: 6px; }
  .sfs-gift__line { margin-bottom: 10px; }
  .sfs-gift__item { min-width: calc(104px * var(--rui-s)); padding: 6px 10px; }
  .sfs-gift__icon { width: calc(36px * var(--rui-s)); height: calc(36px * var(--rui-s)); }
}
/* held upright (the rotate curtain covers the game, but a sheet must still read): the cards one over the other */
@media (max-width: 560px) { .sfs-sides { grid-template-columns: minmax(0, 1fr); } }

/* ---- THE MAIN SCREEN'S WORDS (js/front-page.js, slice 7b): the column, the corner, Tenderfoot's door, the plaque ----
 * The painting stays the canvas's. On a PC (data-mode wide) every piece stands where the canvas drew it and grows with
 * the canvas: --k is one canvas px in screen px, --cx/--cy the canvas's corner, and every size is the canvas's own
 * times --k, never under the room kit's 16 px. On a phone (data-mode compact) the column runs down the left from the
 * camera's edge and the side tabs, past the copyright, and scrolls when the screen is short; the corner stands in the
 * top right inside the tabs; Tenderfoot's door and the plaque are the column's last rows. */
.rfp {
  position: fixed; inset: 0; z-index: 36; pointer-events: none; line-height: 1.3;
  --k: 1; --cx: 0px; --cy: 0px; --cw: 100vw; --ch: 56.25vw; --fpx: calc(var(--k) * 1px);
  --rfp-gold: #F5C242; --rfp-pink: #FF8FC7;
}
.rfp[hidden], .rfp[data-covered], html[data-rotate] .rfp, html[data-loading] .rfp { display: none; }
.rfp-col, .rfp-corner, .rfp-tender { pointer-events: auto; }
:where(.rfp) p, :where(.rfp) h1 { margin: 0; }

/* the brand */
.rfp-brand { display: flex; flex-direction: column; width: max-content; max-width: calc(var(--cw) * 0.56); }
.rfp-brand__top { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--fpx)); }
.rfp-crest { display: block; width: max(40px, calc(56 * var(--fpx))); height: max(40px, calc(56 * var(--fpx))); object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.rfp-title {
  font: bold max(calc(24px * var(--rui-s)), calc(42 * var(--fpx)))/1.1 var(--rui-title-font); letter-spacing: 0.11em;
  background: linear-gradient(180deg, #FFF3C4 15%, #F5C242 55%, #B7791F 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #1A1026) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.75));
}
.rfp-headline { margin-top: calc(6 * var(--fpx)); padding-left: calc(5 * var(--fpx)); font: bold italic max(calc(18px * var(--rui-s)), calc(21 * var(--fpx)))/1.25 var(--rui-title-font); color: #B9F59E; text-shadow: 0 2px 0 #0B0814, 0 3px 10px #000; }
.rfp-tagline { margin-top: calc(4 * var(--fpx)); padding-left: calc(10 * var(--fpx)); font-size: max(var(--rui-min), calc(14 * var(--fpx))); color: #D9C4FA; text-shadow: 0 1px 2px #000, 0 0 6px #0B0814; }

/* the menu: PLAY, the rows, How to Play and CHOOSE YOUR PATH */
.rfp-menu { display: flex; flex-direction: column; gap: max(6px, calc(8 * var(--fpx))); width: calc(470 * var(--fpx)); margin: calc(34 * var(--fpx)) 0 0 calc(34 * var(--fpx)); }
.rfp-entry {
  position: relative; display: flex; align-items: center; gap: max(8px, calc(10 * var(--fpx))); width: 100%; margin: 0;
  min-height: max(var(--rui-tap), calc(58 * var(--fpx))); padding: 6px max(10px, calc(14 * var(--fpx))) 6px max(14px, calc(18 * var(--fpx)));
  border: 1px solid color-mix(in srgb, var(--rfp-accent, #F5C242) 32%, transparent); border-radius: 8px; overflow: hidden;
  background: rgba(11, 8, 20, 0.66); color: var(--rui-ink); font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rfp-entry::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rfp-accent, #F5C242); transition: width 0.14s ease; }
.rfp-entry:hover, .rfp-entry:focus-visible { background: rgba(11, 8, 20, 0.86); border-color: var(--rfp-accent, #F5C242); }
.rfp-entry:hover::before, .rfp-entry:focus-visible::before { width: 8px; }
.rfp-entry:focus-visible, .rfp-tender:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
.rfp-entry__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rfp-entry__title { font: bold max(calc(18px * var(--rui-s)), calc(20 * var(--fpx)))/1.15 var(--rui-title-font); letter-spacing: 0.04em; color: var(--rfp-accent, #F5C242); overflow-wrap: anywhere; }
.rfp-entry__sub { font-size: max(var(--rui-min), calc(13 * var(--fpx))); line-height: 1.3; color: #CFC2E8; }
.rfp-entry__go { flex: none; font: bold max(calc(26px * var(--rui-s)), calc(30 * var(--fpx)))/1 var(--font, sans-serif); color: var(--rfp-accent, #F5C242); transition: transform 0.14s ease; }
.rfp-entry:hover .rfp-entry__go, .rfp-entry:focus-visible .rfp-entry__go { transform: translateX(6px); }
.rfp-entry[data-primary] { background: var(--rfp-accent, #F5C242); color: #1A1026; }
.rfp-entry[data-primary] .rfp-entry__title, .rfp-entry[data-primary] .rfp-entry__go { color: #1A1026; }
.rfp-entry[data-primary] .rfp-entry__sub { color: #3A2140; }
/* PLAY: the hero row, pink with a gold rim, the play crest on its disc, a slow gold breath */
.rfp-play {
  min-height: max(64px, calc(96 * var(--fpx))); padding-left: max(10px, calc(12 * var(--fpx))); border: 2px solid rgba(245, 194, 66, 0.85); border-radius: 12px;
  background: linear-gradient(180deg, #FFB2D8 0 50%, #FF8FC7 50% 100%); color: #1A1026; box-shadow: 0 0 14px 3px rgba(245, 194, 66, 0.3);
}
.rfp-play::before { display: none; }
.rfp-play:hover, .rfp-play:focus-visible { background: linear-gradient(180deg, #FFC4E1 0 50%, #FF9ECF 50% 100%); border-color: var(--rfp-gold); }
.rfp-play .rfp-entry__title { font-size: max(calc(28px * var(--rui-s)), calc(34 * var(--fpx))); letter-spacing: 0.12em; color: #1A1026; }
.rfp-play .rfp-entry__sub { color: #3A2140; font-weight: bold; }
.rfp-play .rfp-entry__go { font-size: max(calc(32px * var(--rui-s)), calc(38 * var(--fpx))); color: #1A1026; }
.rfp-entry__disc { flex: none; display: grid; place-items: center; width: max(48px, calc(82 * var(--fpx))); height: max(48px, calc(82 * var(--fpx))); border-radius: 50%; background: rgba(26, 16, 38, 0.35); }
.rfp-entry__crest { width: 100%; height: 100%; object-fit: contain; }
.rfp-tools { display: flex; flex-wrap: wrap; gap: max(8px, calc(10 * var(--fpx))); margin-top: calc(6 * var(--fpx)); }
.rfp-tools .rui-btn { flex: 0 1 auto; min-width: calc(220 * var(--fpx)); min-height: max(var(--rui-tap), calc(38 * var(--fpx))); font-size: max(var(--rui-min), calc(15 * var(--fpx))); }
.rfp-help { color: #7FE0D6; border-color: #7FE0D6; background: #2A2140; }
.rfp-path { --rui-accent: var(--rfp-pink); }

/* the corner: the Queen's regard over Sign in / Sign up (or the account's name) and its line */
.rfp-corner { position: absolute; display: flex; flex-direction: column; align-items: flex-end; gap: max(8px, calc(12 * var(--fpx))); text-align: right; }
.rfp-banner { display: flex; align-items: center; gap: 8px; pointer-events: none; }
.rfp-banner__icon { width: max(32px, calc(30 * var(--fpx))); height: max(32px, calc(30 * var(--fpx))); object-fit: contain; }
.rfp-banner__words { display: flex; flex-direction: column; align-items: flex-end; }
.rfp-banner__title { font: bold max(var(--rui-min), calc(14 * var(--fpx)))/1.2 var(--rui-title-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rfp-gold); text-shadow: 0 2px 0 #1A1026, 0 0 6px #1A1026; }
.rfp-banner__line { font-size: max(var(--rui-min), calc(10 * var(--fpx))); color: #D9C4FA; text-shadow: 0 1px 2px #000, 0 0 6px #0B0814; }
/* the top rung: the banner over the gate the Arena promised */
.rfp-banner[data-top] { padding: 6px 14px 6px 24px; background: rgba(11, 8, 20, 0.92); border: 3px solid var(--rfp-gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); }
.rfp-banner[data-top] .rfp-banner__title { font-size: max(calc(18px * var(--rui-s)), calc(17 * var(--fpx))); }
.rfp-banner[data-top] .rfp-banner__icon { width: max(40px, calc(40 * var(--fpx))); height: max(40px, calc(40 * var(--fpx))); }
.rfp-account {
  min-width: calc(208 * var(--fpx)); min-height: max(var(--rui-tap), calc(34 * var(--fpx))); max-width: 100%; padding: 6px 18px;
  font-size: max(var(--rui-min), calc(15 * var(--fpx))); color: var(--rfp-gold); background: #3A2F1A; border-color: var(--rfp-gold);
  box-shadow: 0 0 0 3px rgba(11, 8, 20, 0.9), 0 0 0 6px rgba(245, 194, 66, 0.95), 0 0 18px 8px rgba(245, 194, 66, 0.3);
}
.rfp-account:hover { background: #4A3D22; }
.rfp-account[data-signed-in] { color: #A8E05F; background: #1F3A2A; border-color: #6BE04A; box-shadow: 0 0 0 3px rgba(11, 8, 20, 0.9), 0 0 0 6px rgba(107, 224, 74, 0.85), 0 0 14px 6px rgba(107, 224, 74, 0.2); }
.rfp-account[data-signed-in]:hover { background: #2A4F38; }
.rfp-account__label { overflow-wrap: anywhere; }
.rfp-account__line { max-width: calc(280px * var(--rui-s)); font-size: max(var(--rui-min), calc(12 * var(--fpx))); font-weight: bold; color: #FBF3E7; pointer-events: none; text-shadow: 0 1px 0 #1A1026, 0 0 4px #1A1026, 0 0 8px #0B0814; }
.rfp-account[data-signed-in] + .rfp-account__line { color: #A8E05F; }

/* Tenderfoot's door: him, his bubble and his sign, one button to his game */
.rfp-tender {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: max(10px, calc(16 * var(--fpx))); row-gap: 6px; align-items: center;
  margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rfp-tender__him { grid-row: 1 / 3; display: block; height: max(72px, calc(150 * var(--fpx))); }
.rfp-tender__pic { display: block; height: 100%; width: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); transition: filter 0.16s ease; }
.rfp:not([data-still]) .rfp-tender__pic { animation: rfp-trot 0.9s ease-in-out infinite alternate; }
.rfp-tender:hover .rfp-tender__pic, .rfp-tender:focus-visible .rfp-tender__pic { filter: drop-shadow(0 0 12px rgba(245, 194, 66, 0.8)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.rfp-tender__bubble {
  position: relative; display: flex; align-items: center; min-height: calc(2.5em + 18px); padding: 8px 14px; border-radius: 12px;
  background: rgba(251, 243, 231, 0.96); border: 2px solid rgba(245, 194, 66, 0.9); color: #2A1F42;
  font: bold italic max(calc(16px * var(--rui-s)), calc(15 * var(--fpx)))/1.25 var(--rui-title-font);
}
.rfp-tender__bubble::before { content: ''; position: absolute; left: -12px; top: 60%; border: 7px solid transparent; border-right: 12px solid rgba(245, 194, 66, 0.9); border-left: 0; }
.rfp-tender:hover .rfp-tender__bubble { border-color: var(--rfp-gold); }
.rfp-tender__sign { display: flex; flex-direction: column; gap: 2px; }
.rfp-tender__name { font: bold max(calc(16px * var(--rui-s)), calc(13 * var(--fpx)))/1.2 var(--rui-title-font); letter-spacing: 0.06em; color: var(--rfp-gold); text-shadow: 0 2px 0 #1A1026, 0 0 6px #1A1026; }
.rfp-tender__sub { font-size: max(var(--rui-min), calc(10 * var(--fpx))); color: #D9C4FA; text-shadow: 0 1px 2px #000, 0 0 6px #0B0814; }

/* the plaque and the toast */
.rfp-plaque { padding: 1px 16px; border-radius: 4px; border: 1px solid rgba(245, 194, 66, 0.5); background: rgba(20, 14, 42, 0.78); color: rgba(245, 194, 66, 0.85); font-size: max(var(--rui-min), calc(10 * var(--fpx))); font-weight: bold; letter-spacing: 0.14em; white-space: nowrap; pointer-events: none; }
.rfp-toast {
  position: absolute; z-index: 1; padding: 12px 18px; border-radius: 12px; background: rgba(20, 14, 32, 0.96); border: 1px solid rgba(245, 194, 66, 0.7);
  color: var(--rui-ink); font-size: var(--rui-body); line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); pointer-events: none;
}
.rfp-toast[hidden] { display: none; }

/* A PC: where the canvas drew them */
.rfp[data-mode="wide"] .rfp-col {
  position: absolute; left: calc(var(--cx) + 30 * var(--fpx)); top: calc(var(--cy) + 30 * var(--fpx));
  max-height: calc(var(--ch) - 216 * var(--fpx)); overflow-y: auto; overflow-x: visible; scrollbar-width: thin; padding: 0 12px 4px 0;
}
.rfp[data-mode="wide"] .rfp-corner { top: calc(var(--cy) + 14 * var(--fpx)); right: calc(100% - var(--cx) - 1240 * var(--fpx)); max-width: calc(440 * var(--fpx)); }
.rfp[data-mode="wide"] .rfp-tender { position: absolute; left: calc(var(--cx) + 40 * var(--fpx)); bottom: calc(100% - var(--cy) - var(--ch) + 26 * var(--fpx)); width: calc(470 * var(--fpx)); }
.rfp[data-mode="wide"] .rfp-plaque { position: absolute; left: calc(var(--cx) + var(--cw) / 2); bottom: calc(100% - var(--cy) - var(--ch) + 6 * var(--fpx)); transform: translateX(-50%); }
.rfp[data-mode="wide"] .rfp-toast { left: calc(var(--cx) + 540 * var(--fpx)); top: calc(var(--cy) + 300 * var(--fpx)); max-width: calc(560 * var(--fpx)); }

/* A phone: the column from the camera's edge, the corner inside the tabs */
.rfp[data-mode="compact"] .rfp-col {
  position: absolute; left: calc(var(--rui-edge-l) + var(--rui-tabs) + 6px); top: 0; width: min(380px, 48vw);
  bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 20px); padding: calc(env(safe-area-inset-top, 0px) + 8px) 6px 8px 0;
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.rfp-col[data-more] { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), rgba(0, 0, 0, 0.25)); mask-image: linear-gradient(180deg, #000 calc(100% - 40px), rgba(0, 0, 0, 0.25)); }
.rfp[data-mode="compact"] .rfp-brand { width: auto; max-width: none; }
.rfp[data-mode="compact"] .rfp-brand__top { flex-direction: row; align-items: center; gap: 8px; }
.rfp[data-mode="compact"] .rfp-crest { width: 36px; height: 36px; flex: none; }
.rfp[data-mode="compact"] .rfp-title { font-size: calc(22px * var(--rui-s)); letter-spacing: 0.06em; }
.rfp[data-mode="compact"] .rfp-headline { margin-top: 4px; padding-left: 0; font-size: calc(17px * var(--rui-s)); }
.rfp[data-mode="compact"] .rfp-tagline { margin-top: 2px; padding-left: 0; }
.rfp[data-tight] .rfp-tagline { display: none; }
.rfp[data-mode="wide"][data-tight] .rfp-menu { margin-top: calc(24 * var(--fpx)); }
.rfp[data-mode="wide"][data-tight] .rfp-brand__top { flex-direction: row; align-items: center; gap: calc(10 * var(--fpx)); }
.rfp[data-mode="compact"] .rfp-menu { width: 100%; margin: 0; gap: 8px; }
.rfp[data-mode="compact"] .rfp-entry { min-height: max(var(--rui-tap), 52px); padding: 6px 12px 6px 16px; }
.rfp[data-mode="compact"] .rfp-play { min-height: 64px; padding-left: 8px; }
.rfp[data-mode="compact"] .rfp-entry__disc { width: 48px; height: 48px; }
.rfp[data-mode="compact"] .rfp-play .rfp-entry__title { font-size: calc(26px * var(--rui-s)); }
.rfp[data-mode="compact"] .rfp-entry__go { font-size: calc(26px * var(--rui-s)); }
.rfp[data-mode="compact"] .rfp-tools .rui-btn { flex: 1 1 auto; min-width: 0; }
.rfp[data-mode="compact"] .rfp-tender { margin-top: 2px; }
.rfp[data-mode="compact"] .rfp-tender__him { height: 72px; }
.rfp[data-mode="compact"] .rfp-plaque { align-self: flex-start; }
.rfp[data-mode="compact"] .rfp-corner {
  top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(var(--rui-edge-r) + var(--rui-tabs) + 6px);
  max-width: min(300px, calc(100% - var(--rui-edge-l) - var(--rui-edge-r) - 2 * var(--rui-tabs) - min(380px, 48vw) - 24px));
}
.rfp[data-mode="compact"] .rfp-toast {
  left: calc(var(--rui-edge-l) + var(--rui-tabs) + min(380px, 48vw) + 14px); right: calc(var(--rui-edge-r) + var(--rui-tabs) + 6px);
  top: 50%; transform: translateY(-50%);
}

/* coming in: the brand, then the menu a row at a time (the canvas's staggerIn) */
.rfp:not([data-still]) .rfp-brand, .rfp:not([data-still]) .rfp-entry, .rfp:not([data-still]) .rfp-tools { animation: rfp-in 0.45s ease-out both; }
.rfp:not([data-still]) .rfp-entry:nth-child(1) { animation-delay: 0.06s; }
.rfp:not([data-still]) .rfp-entry:nth-child(2) { animation-delay: 0.12s; }
.rfp:not([data-still]) .rfp-entry:nth-child(3) { animation-delay: 0.18s; }
.rfp:not([data-still]) .rfp-tools { animation-delay: 0.24s; }
.rfp:not([data-still]) .rfp-play { animation: rfp-in 0.45s ease-out 0.06s both, rfp-breathe 1.5s ease-in-out 0.6s infinite alternate; }
.rfp:not([data-still]) .rfp-account:not([data-signed-in]) { animation: rfp-pulse 0.9s ease-in-out infinite alternate; }
@keyframes rfp-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes rfp-breathe { from { box-shadow: 0 0 10px 2px rgba(245, 194, 66, 0.22); } to { box-shadow: 0 0 22px 6px rgba(245, 194, 66, 0.5); } }
@keyframes rfp-pulse { from { box-shadow: 0 0 0 3px rgba(11, 8, 20, 0.9), 0 0 0 6px rgba(245, 194, 66, 0.6), 0 0 12px 4px rgba(245, 194, 66, 0.2); } to { box-shadow: 0 0 0 3px rgba(11, 8, 20, 0.9), 0 0 0 6px rgba(245, 194, 66, 1), 0 0 22px 10px rgba(245, 194, 66, 0.4); } }
@keyframes rfp-trot { from { transform: translateY(0); } to { transform: translateY(-6px); } }