/* =====================================================================
   realm-play.css — (v228) the playable Helf Realm (game/realm-play.js).
   Same 16-bit register as realm.css: graphite panels, stepped pixel
   corners (--pxc), 2px inset borders, Pixelify Sans for labels and
   numbers, Bricolage for reading text. Thumb zone at the bottom; status
   at the top. Every target is 44 px or more.
   ===================================================================== */

/* ------------------------------------------------------------ layout */
.rlm.is-play { background: #0c0a08; }
.rlm.is-play .rlm-world { flex: 1 1 auto; height: auto; min-height: 0; border-bottom: 0; box-shadow: none; transition: none; }
.rlm.is-play .rlm-world-host { --hp-w-zoom-top: 60px; }
.rlm.is-play .rlm-world-host .hp-w-zoom { right: 8px; }

/* ------------------------------------------------------------ HUD (status, top) */
.rlm.is-play .rlp-hud { flex-direction: column; align-items: stretch; gap: 4px; padding: calc(var(--safe-top, 0px) + 6px) 8px 4px; }
.rlp-hud-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rlp-pep {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 9px; display: flex; align-items: center; gap: 7px;
  color: var(--volt, #d3fb58); background: #151d12;
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3c5a2a;
}
.rlp-pep-ic { flex: none; display: grid; place-items: center; }
.rlp-pep-bar { flex: 1 1 auto; min-width: 24px; height: 10px; background: #0a0908; box-shadow: inset 0 0 0 1px #2f3a24; position: relative; }
.rlp-pep-bar > i { display: block; height: 100%; min-width: 2px; background: repeating-linear-gradient(90deg, #d3fb58 0 6px, #b5dc44 6px 7px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.rlp-pep b { flex: none; min-width: 26px; text-align: right; font: 700 16px/1 var(--rlm-px); color: #eaffb0; }
.rlp-pep.is-out { color: var(--sleep, #a996e2); background: #1a1726; box-shadow: inset 0 0 0 2px #4a4170; }
.rlp-pep.is-out b { color: #d9d0ff; }
.rlm.is-play .rlm-coins { height: 36px; }
.rlp-menu {
  position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; cursor: pointer;
  background: #2a2117; color: var(--brand, #f9bc8b);
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #6b4a2c, inset 0 -4px 0 rgba(0,0,0,.35);
}
.rlp-menu:active { box-shadow: inset 0 0 0 2px #6b4a2c, inset 0 2px 0 rgba(0,0,0,.35); }
.rlp-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--volt, #d3fb58); box-shadow: 0 0 0 2px #2a2117; }
.rlp-strip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rlp-when {
  flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 44%; padding-left: 2px;
  font: 600 11px/1.1 var(--rlm-px); letter-spacing: .03em; text-transform: uppercase; color: #f3d9b5;
}
.rlp-when > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rlp-when b, .rlp-when small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; }
.rlp-when small { color: var(--rlm-ink-2); font-weight: 500; }
.rlp-when .rl-px { color: #f2ce59; }
.rlp-quest {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 10px; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 7px; text-align: left;
  background: #191613; color: var(--rlm-ink);
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530;
  font: 500 13px/1.2 var(--rlm-ui);
}
.rlp-quest .rl-px { color: var(--brand, #f9bc8b); }
.rlp-quest.has-claim { box-shadow: inset 0 0 0 2px #8db534; }
.rlp-quest-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlp-quest-n { flex: none; font: 600 12px/1 var(--rlm-px); color: var(--rlm-ink-2); }

/* one 16-bit voice for every modal title inside the playable Realm */
.rlm.is-play .rlm-modal-h h3 { font: 700 20px/1.15 var(--rlm-px); letter-spacing: .02em; color: var(--brand, #f9bc8b); }

/* ------------------------------------------------------------ world overlays */
.rlp-nav {
  position: absolute; left: 8px; top: 8px; z-index: 5; display: flex; gap: 2px; padding: 2px;
  background: rgba(20,18,15,.86); clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #5a544c;
}
.rlp-nav-b {
  height: 44px; min-width: 44px; padding: 0 9px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; color: #cfc7ba;
  font: 600 12px/1 var(--rlm-px); letter-spacing: .04em; text-transform: uppercase;   /* (v230) 12 px minimum */
}
.rlp-nav-b[aria-pressed="true"] { background: var(--brand, #f9bc8b); color: #2a160c; }
.rlm.is-sleepy .rlm-world::after {
  content: "Napping: free chores still work"; position: absolute; right: 8px; bottom: 8px; z-index: 4; pointer-events: none;
  padding: 4px 7px; background: rgba(26,23,38,.88); color: #d9d0ff; font: 600 10px/1 var(--rlm-px); letter-spacing: .05em; text-transform: uppercase;
}

/* ------------------------------------------------------------ bottom (thumb zone) */
.rlp-bottom {
  position: relative; flex: none; z-index: 3;
  padding: 6px 6px calc(var(--safe-bottom, 0px) + 6px);
  background: linear-gradient(180deg, #171411, #100e0c);
  border-top: 2px solid #000; box-shadow: 0 -2px 0 var(--rlm-edge);
}
.rlp-toast {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); margin: 0; padding: 8px 11px;
  background: rgba(20,18,15,.94); color: var(--rlm-ink);
  font: 500 14px/1.35 var(--rlm-ui); text-wrap: pretty;
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #5a544c, inset 0 -3px 0 rgba(0,0,0,.35);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.rlp-toast.is-on { opacity: 1; transform: none; }
.rlp-toast.is-good { box-shadow: inset 0 0 0 2px #8db534, inset 0 -3px 0 rgba(0,0,0,.35); }
.rlp-toast:empty { display: none; }
.rlp-bar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rlp-tool {
  position: relative; height: 58px; min-width: 44px; padding: 4px 0 3px; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: #1d1a16; color: #d9d1c4;
  font: 600 12px/1 var(--rlm-px); letter-spacing: 0;   /* (v230) 12 px minimum */
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530, inset 0 -4px 0 rgba(0,0,0,.4);
}
.rlp-tool:active { box-shadow: inset 0 0 0 2px #3a3530, inset 0 2px 0 rgba(0,0,0,.4); }
.rlp-tool-ic { display: grid; place-items: center; height: 22px; }
.rlp-tool-l { white-space: nowrap; }
.rlp-tool[aria-pressed="true"] { background: #33421a; color: var(--volt, #d3fb58); box-shadow: inset 0 0 0 2px #8db534, inset 0 -4px 0 rgba(0,0,0,.35); }
.rlp-tool.is-bag { background: #2a2117; color: var(--brand, #f9bc8b); box-shadow: inset 0 0 0 2px #6b4a2c, inset 0 -4px 0 rgba(0,0,0,.4); }
.rlp-tool.is-bag.is-on { background: #3a2a18; box-shadow: inset 0 0 0 2px var(--brand, #f9bc8b); }
.rlp-tool.is-locked { color: #7d776e; }
.rlp-tool-n { position: absolute; top: 4px; right: 5px; font: 700 10px/1 var(--rlm-px); font-style: normal; color: #ffe7a0; }
.rlp-tool-n[hidden] { display: none; }

/* tray */
.rlp-tray { margin: 0 0 6px; padding: 6px; background: #1e1b18; clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #4b4743; }
.rlp-tray[hidden] { display: none; }
.rlp-tray-h { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rlp-tray-h::-webkit-scrollbar { display: none; }
.rlp-tray-hint { flex: 1 0 auto; text-align: right; padding: 0 4px; font: 500 11px/1.2 var(--rlm-ui); color: var(--rlm-ink-3); white-space: nowrap; }
@media (max-width: 400px) { .rlp-tray-hint { display: none; } }
.rlp-tray-row { display: flex; gap: 6px; overflow-x: auto; padding: 6px 1px 1px; scrollbar-width: thin; min-height: 78px; }
.rlp-tray-empty { margin: 8px 4px; font-size: 13px; line-height: 1.4; color: var(--rlm-ink-2); text-wrap: pretty; }
.rlp-item {
  position: relative; flex: none; width: 66px; height: 74px; padding: 6px 2px 4px; border: 0; cursor: grab; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  background: #282521; color: var(--rlm-ink);
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #4b4743, inset 0 -3px 0 rgba(0,0,0,.35);
}
.rlp-item-ic { display: grid; place-items: center; min-height: 28px; }
.rlp-item-ic svg { display: block; image-rendering: pixelated; }
.rlp-item > b { position: absolute; top: 4px; right: 5px; font: 700 11px/1 var(--rlm-px); color: #ffe7a0; }
.rlp-item-n { max-width: 66px; font: 500 12px/1.15 var(--rlm-ui); color: var(--rlm-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlp-item.is-held { background: #2f3a1a; box-shadow: inset 0 0 0 2px var(--volt, #d3fb58), inset 0 -3px 0 rgba(0,0,0,.35); }
.rlp-stars { position: absolute; top: 5px; left: 5px; display: inline-flex; gap: 1px; }
.rlp-stars i, .rlp-r { display: inline-block; width: 7px; height: 7px; background: #f5c542; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 72% 60%, 82% 100%, 50% 78%, 18% 100%, 28% 60%, 0 38%, 37% 35%); }
.rlp-ghost { position: fixed; z-index: 9400; transform: translate(-50%, -70%); pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
.rlp-ghost svg { display: block; image-rendering: pixelated; }

/* chips / segmented controls (tray filter, settings, modals) */
.rlp-chip {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 11px; border: 0; cursor: pointer;
  background: #1b1815; color: var(--rlm-ink-2);
  font: 600 12px/1 var(--rlm-px); letter-spacing: .04em; text-transform: uppercase;
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530;
}
.rlp-chip[aria-pressed="true"] { background: var(--brand, #f9bc8b); color: #2a160c; box-shadow: inset 0 0 0 2px #c98a55; }
.rlp-seg { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 8px 0; }
.rlp-seg-l, .rlp-set-l { font: 600 11px/1.2 var(--rlm-px); letter-spacing: .05em; text-transform: uppercase; color: var(--rlm-ink-3); margin-right: 4px; }
.rlp-set { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; }
.rlp-set .rlp-seg { margin: 2px 0 0; }

/* ------------------------------------------------------------ the menu sheet (Realm tabs over the world) */
.rlp-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--rlp-sheet-top, 108px); z-index: 6;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--rlm-panel); box-shadow: 0 -2px 0 #000, 0 -4px 0 var(--rlm-edge-hi);
  animation: rlp-up 180ms ease-out;
}
.rlp-sheet[hidden] { display: none; }
@keyframes rlp-up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.rlp-sheet-h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 4px 14px; }
.rlp-sheet-t { margin: 0; font: 700 18px/1.1 var(--rlm-px); color: var(--brand, #f9bc8b); letter-spacing: .03em; }
.rlp-sheet .rlm-tabs { background: transparent; padding-top: 4px; }
.rlp-sheet .rlm-body { flex: 1 1 auto; }

/* ------------------------------------------------------------ panels inside sheets / modals */
.rlp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.rlp-stats span { display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; background: var(--rlm-panel-2); clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530; font: 500 11px/1.1 var(--rlm-ui); color: var(--rlm-ink-3); }
.rlp-stats b { font: 700 17px/1 var(--rlm-px); color: var(--rlm-ink); }
.rlp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rlp-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 9px 10px; background: var(--rlm-panel-2); clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530; }
.rlp-list li > b { font: 700 14px/1.2 var(--rlm-px); color: var(--rlm-ink); }
.rlp-list li > small { flex: 1 1 100%; color: var(--rlm-ink-3); font-size: 12px; line-height: 1.35; }
.rlp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.rlp-list .rlp-acts { margin: 2px 0 0; flex: 1 1 100%; }
.rlp-acts .rlm-btn { display: inline-flex; align-items: center; gap: 6px; }
.rlp-wide { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.rlp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rlp-tile {
  min-height: 76px; padding: 9px 6px 8px; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: var(--rlm-panel-2); color: var(--brand, #f9bc8b);
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530, inset 0 -4px 0 rgba(0,0,0,.35);
}
.rlp-tile b { font: 700 12px/1.1 var(--rlm-px); color: var(--rlm-ink); letter-spacing: .02em; }
.rlp-tile small { font: 500 11px/1.2 var(--rlm-ui); color: var(--rlm-ink-3); }
.rlp-npcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rlp-npc, .rlp-cupr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--rlm-panel-2); clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530; }
.rlp-npc img { flex: none; width: 40px; height: 40px; image-rendering: pixelated; background: #f4e9d0; box-shadow: inset 0 0 0 2px #0b0910; }
.rlp-npc-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rlp-npc-tx b { font: 700 14px/1.2 var(--rlm-px); color: var(--rlm-ink); }
.rlp-npc-tx small { font-size: 12px; color: var(--rlm-ink-3); }
.rlp-hearts { display: inline-flex; gap: 2px; }
.rlp-hearts i { width: 8px; height: 7px; background: #3a3530; clip-path: polygon(0 20%, 25% 0, 50% 20%, 75% 0, 100% 20%, 100% 50%, 50% 100%, 0 50%); }
.rlp-hearts i.on { background: #e2445c; }
.rlp-cupr { list-style: none; }
.rlp-cupr-ic { flex: none; color: #f2ce59; }
.rlp-cupr.is-open .rlp-cupr-ic { color: var(--volt, #d3fb58); }
.rlp-ribs, .rlp-pcs { display: flex; flex-wrap: wrap; gap: 6px; }
.rlp-pc { width: 96px; height: 64px; overflow: hidden; clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #4b4743; }
.rlp-pc svg { width: 100%; height: 100%; display: block; }
.rlp-sets { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rlp-sets li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; font-size: 13px; }
.rlp-sets li .rlm-bar { grid-column: 1 / -1; }
.rlp-sets .num { font: 600 12px/1 var(--rlm-px); color: var(--rlm-ink-2); }

/* training yard */
.rlp-drills { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rlp-drill { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; background: var(--rlm-panel-2); clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530; }
.rlp-drill-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: #141210; clip-path: var(--pxc); }
.rlp-drill-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rlp-drill-tx b { font: 700 14px/1.2 var(--rlm-px); color: var(--rlm-ink); }
.rlp-drill-tx small { font-size: 12px; line-height: 1.35; color: var(--rlm-ink-3); }
.rlp-stat { font: 700 11px/1 var(--rlm-px); letter-spacing: .04em; }
[data-stat="str"] { color: var(--train, #5fa1f3); }
[data-stat="end"] { color: var(--good, #63d99b); }
[data-stat="vit"] { color: var(--fuel, #fe8f5b); }
[data-stat="mind"] { color: var(--mind, #65d0dc); }
[data-stat="spirit"] { color: var(--spirit, #ee8dbd); }
.rlp-coach { font: 600 16px/1.35 var(--rlm-px); color: var(--rlm-ink); margin: 0 0 6px; }

/* kitchen + shipping bin */
.rlp-pan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.rlp-pan > b { font: 600 11px/1.2 var(--rlm-px); text-transform: uppercase; letter-spacing: .05em; color: var(--rlm-ink-3); margin-right: 4px; }
.rlp-recs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rlp-rec { padding: 9px 10px; background: var(--rlm-panel-2); clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530; }
.rlp-rec.is-ready { box-shadow: inset 0 0 0 2px #8db534; }
.rlp-rec-h { display: flex; align-items: center; gap: 8px; }
.rlp-rec-h b { font: 700 14px/1.2 var(--rlm-px); color: var(--rlm-ink); }
.rlp-rec-ic { flex: none; display: grid; place-items: center; }
.rlp-rec-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.rlp-ship { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rlp-ship li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--rlm-panel-2); clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #3a3530; }
.rlp-ship .rlp-item-ic { width: 32px; flex: none; }
.rlp-ship-tx { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rlp-ship-tx b { font: 700 13px/1.2 var(--rlm-px); color: var(--rlm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlp-ship-tx small { font-size: 12px; color: var(--rlm-ink-3); }
.rlp-ship-tx .rlp-stars { position: static; }

/* creature card */
.rlp-cc { display: flex; gap: 12px; align-items: flex-start; }
.rlp-cc img { flex: none; width: 64px; height: 64px; image-rendering: pixelated; background: #141210; clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #4b4743; }
.rlp-cc-sp { margin: 0 0 4px; font: 600 12px/1.25 var(--rlm-px); letter-spacing: .03em; color: var(--brand, #f9bc8b); }
.rlp-cc-b { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 4px; font-size: 12px; color: var(--rlm-ink-2); }
.rlp-bond { display: inline-flex; align-items: center; gap: 4px; color: #ee8dbd; }
.rlp-want { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px 10px; background: #fbf7ee; color: #2a2030; clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #2a2030; font: 600 13px/1.3 var(--rlm-px); }
.rlp-trip { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 13px; color: var(--good, #63d99b); }
.rlp-restl { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rlp-restl li > b { font: 700 14px/1.2 var(--rlm-px); }
.rlp-rests { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rlp-rests .rlm-chip.is-off { opacity: .55; }
.rlp-rests .rlp-r { margin-left: 2px; }

/* ------------------------------------------------------------ Today card: the ranch glance */
#petRoomWrap .rl-glance {
  appearance: none; position: relative; width: 100%; min-height: 44px; margin: 6px 0 0; padding: 6px 12px; border: 0; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 9px;
  background: #121811; color: #e3efc0; text-align: left;
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #2e4223;
  font: 500 13px/1.25 var(--font-ui, system-ui, sans-serif);
}
#petRoomWrap .rl-glance:hover { background: #172014; }
#petRoomWrap .rl-glance-ic { color: #8db534; display: grid; place-items: center; }
#petRoomWrap .rl-glance-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#petRoomWrap .rl-glance-pep { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/1 var(--font-pixel, "Pixelify Sans", monospace); color: var(--volt, #d3fb58); }
#petRoomWrap .rl-glance-ch { color: var(--ink-3, #95928b); display: grid; place-items: center; }
#petRoomWrap .rl-glance .rl-px { display: block; flex: none; }

/* ------------------------------------------------------------ (v229) first-run coach marks */
.rlp-cm { position: absolute; inset: 0; z-index: 40; }
.rlp-cm.is-free { background: rgba(8,6,4,.58); }
.rlp-cm-ring {
  position: absolute; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8,6,4,.58), inset 0 0 0 3px var(--volt, #d3fb58), 0 0 0 3px #000;
  transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease;
}
.rlp-cm-ring.is-round { border-radius: 50%; }
.rlp-cm.is-free .rlp-cm-ring { display: none; }
.rlp-cm-card {
  position: absolute; padding: 12px 14px 12px; background: #1b1714; color: var(--rlm-ink);
  clip-path: var(--pxc); box-shadow: inset 0 0 0 2px #8db534, inset 0 -4px 0 rgba(0,0,0,.35);
}
.rlp-cm-k { margin: 0 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 11px/1 var(--rlm-px); letter-spacing: .05em; text-transform: uppercase; color: var(--rlm-ink-3); }
.rlp-cm-dots { display: inline-flex; gap: 4px; }
.rlp-cm-dots i { width: 7px; height: 7px; background: #3a342e; }
.rlp-cm-dots i.is-on { background: var(--volt, #d3fb58); }
.rlp-cm-t { margin: 0 0 4px; font: 700 18px/1.15 var(--rlm-px); letter-spacing: .02em; color: var(--brand, #f9bc8b); }
.rlp-cm-b { margin: 0 0 10px; font: 400 15px/1.4 var(--rlm-ui); color: var(--rlm-ink); text-wrap: pretty; }
.rlp-cm-acts { display: flex; justify-content: flex-end; gap: 8px; }
.rlp-cm-acts .rlm-btn { min-height: 44px; min-width: 44px; }

@media (prefers-reduced-motion: reduce) {
  .rlp-toast, .rlp-sheet, .rlp-cm-ring { transition: none; animation: none; }
}
/* (v230) review-v228 #26: the in-game Reduced motion setting ('on') reaches the CSS too */
.rlm.is-rm .rlp-toast, .rlm.is-rm .rlp-sheet, .rlm.is-rm .rlp-cm-ring { transition: none; animation: none; }
@media (min-width: 640px) {
  .rlp-bottom, .rlm.is-play .rlp-hud { padding-left: max(8px, calc(50% - 300px)); padding-right: max(8px, calc(50% - 300px)); }
}