@import url('assets/fonts/brk-fonts.css');

@property --browse-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --text-main: rgba(237, 229, 212, 0.96);
  --text-muted: rgba(201, 191, 173, 0.78);
  --text-dim: rgba(154, 146, 131, 0.46);
  --browse-primary: rgba(95, 1, 1, 0.98);
  --browse-deep: rgba(177, 8, 8, 0.98);
  --browse-highlight: rgba(197, 32, 7, 0.96);
  --browse-accent: rgba(193, 137, 34, 0.98);
  --browse-duration: 5250ms;
  --browse-opacity: 0.94;
  --ink-panel-opacity: 0.78;
  --ink-tile-h: 864px;
  /* Slight vertical overlap so worn inkroller edges read as one continuous stroke. */
  --ink-overlap: 22px;
  --ink-step: calc(var(--ink-tile-h) - var(--ink-overlap));
  --black: #050403;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--black); color: var(--text-main); }
body { overflow: hidden; font-family: 'RDRLino', Georgia, serif; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }

.world-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 68% 52%, rgba(75, 5, 3, .10), transparent 35%),
    #030202;
}
.world-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 26%, transparent 76%, rgba(0,0,0,.18));
}
.vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 180px 64px rgba(0,0,0,.92), inset 0 -90px 150px rgba(0,0,0,.58);
}


#app { position: relative; z-index: 2; width: 100vw; height: 100vh; display: grid; grid-template-columns: 540px 1fr; gap: clamp(28px, 3vw, 66px); padding: 3.2vh 4vw; }

body.has-site-top-bar #app {
  --app-content-height: calc(100vh - 58px - 6.4vh);
  height: calc(100vh - 58px);
  margin-top: 58px;
  padding-top: 3.2vh;
}

@media (min-width: 821px) {
  body.has-site-top-bar #app > .stage,
  body.has-site-top-bar #app > .branch-shell {
    height: var(--app-content-height);
    max-height: var(--app-content-height);
    min-height: 0;
  }
}

.site-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 7px clamp(12px, 2.4vw, 32px) 10px;
  background:
    url('assets/backgrounds/red_forest.png')
    center 31% / cover no-repeat;
  box-shadow:
    inset 0 0 20px rgba(176, 16, 4, .24),
    inset 0 -14px 22px rgba(0, 0, 0, .34);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .52));
}

.site-top-bar::after {
  content: '';
  position: absolute;
  left: clamp(12px, 2.4vw, 32px);
  right: clamp(12px, 2.4vw, 32px);
  bottom: 3px;
  height: 4px;
  pointer-events: none;
  background:
    url('assets/ui/divider_line.png')
    center / 100% 4px no-repeat;
  opacity: .72;
}

.site-top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-top-nav::-webkit-scrollbar {
  display: none;
}

.site-top-link,
.site-top-auth-button {
  position: relative;
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  min-width: 82px;
  min-height: 32px;
  padding: 6px 14px;
  background: transparent;
  color: rgba(223, 213, 194, .82);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
}

.site-top-link::before,
.site-top-auth-button::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 140ms ease;
}

.site-top-link:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 2px;
  right: -6px;
  width: 8px;
  height: 32px;
  pointer-events: none;
  background:
    url('assets/ui/butcher_table_line_divider.png')
    center / 8px 32px no-repeat;
  opacity: .7;
}

.site-top-link.is-focused,
.site-top-link:hover,
.site-top-link:focus-visible,
.site-top-auth-button.is-focused,
.site-top-auth-button:hover,
.site-top-auth-button:focus-visible {
  color: rgba(244, 235, 216, .98);
  background: transparent;
}

.site-top-link:is(.is-focused, :hover, :focus-visible)::before,
.site-top-auth-button:is(.is-focused, :hover, :focus-visible)::before {
  opacity: .96;
}

.site-top-link.is-focused,
.site-top-auth-button.is-focused {
  text-decoration: none;
}

.site-top-auth-button {
  margin-left: auto;
  min-width: 136px;
  text-transform: none;
  letter-spacing: .4px;
  font-size: 15px;
  max-width: min(42vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brk-profile-overlay {
  z-index: 210;
}

.brk-terms-overlay { z-index: 220; }
.brk-terms-panel {
  position: relative;
  width: min(760px, 96vw);
  height: min(860px, 94vh);
  padding: 48px 34px 30px;
  background: linear-gradient(rgba(10, 3, 2, .88), rgba(0, 0, 0, .97));
  overflow: hidden;
}
.brk-terms-panel > .brk-uc-close { top: 14px; right: 16px; }
.brk-terms-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-align: center;
}
.brk-terms-kicker {
  margin: 0 0 4px;
  color: rgba(196, 50, 30, .92);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.brk-terms-frame {
  position: relative;
  flex: 1;
  min-height: 180px;
  padding: 24px 28px;
  overflow-y: auto;
  background: rgba(0, 0, 0, .72);
  text-align: left;
}
.brk-terms-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 14px solid transparent;
  border-image: url('assets/ui/interaction_frame.png') 38 / 14px stretch;
}
.brk-terms-frame pre {
  position: relative;
  z-index: 1;
  margin: 0;
  white-space: pre-wrap;
  font: 14px/1.55 'RDRLino', Georgia, serif;
  color: rgba(224, 214, 195, .88);
}
.brk-terms-full-link {
  margin: 10px 0 8px;
  color: rgba(215, 185, 119, .9);
  font: 13px 'RDRLino', Georgia, serif;
}
.brk-terms-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 12px;
  color: rgba(238, 229, 210, .94);
  font: 14px 'RDRLino', Georgia, serif;
  cursor: pointer;
}
.brk-terms-consent input { width: 18px; height: 18px; accent-color: #a7190e; }
.brk-terms-sign-in.menu-row { width: min(432px, 100%); min-height: 48px; align-self: center; }
.brk-terms-sign-in:disabled { cursor: not-allowed; }
@media (max-width: 620px) {
  .brk-terms-panel { width: 100%; height: 96vh; padding: 44px 18px 22px; }
  .brk-terms-frame { padding: 20px 18px; }
  .brk-terms-frame pre { font-size: 13px; }
}

.brk-profile-panel {
  position: relative;
  width: min(540px, 94%);
  min-height: min(88vh, 940px);
  max-height: min(96vh, 1020px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 52px 32px 34px;
  background: linear-gradient(rgba(0, 0, 0, .78), rgba(0, 0, 0, .94));
  border: 0;
  box-shadow: none;
  text-align: center;
  overflow: hidden;
}

.brk-profile-panel > .brk-uc-close {
  top: 14px;
  right: 16px;
}

.brk-profile-border {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-style: solid !important;
  border-width: 20px !important;
  border-radius: 0 !important;
  border-image-source: url('assets/ui/interaction_frame.png');
  border-image-slice: 38;
  border-image-width: 20px;
  border-image-repeat: stretch;
  opacity: 1;
  filter:
    drop-shadow(0 0 3px var(--browse-highlight))
    drop-shadow(0 0 1px rgba(0, 0, 0, .85));
}

.brk-profile-border::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: menu-border-flow var(--browse-duration) linear infinite;
}

.brk-profile-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.brk-profile-header {
  flex-shrink: 0;
}

.brk-profile-title {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: .98;
}

.brk-profile-divider {
  width: 100%;
  height: clamp(28px, 3.4vw, 40px);
  margin: 4px auto 14px;
  background: url('assets/ui/arrow_border.png') center / 100% auto no-repeat;
  opacity: .88;
}

.brk-profile-lead {
  margin: 0 0 16px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(209, 199, 181, .82);
}

.brk-profile-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  text-align: center;
  padding: 0 4px 10px;
}

.brk-profile-footer {
  flex-shrink: 0;
  width: 100%;
  padding-top: 28px;
  padding-bottom: 6px;
}

.brk-profile-guild + .brk-profile-guild {
  margin-top: 24px;
}

.brk-profile-join-card.brk-link-card {
  width: 100%;
  margin: 0;
  text-align: left;
  --brk-link-card-height: 148px;
  --brk-link-card-padding: 20px 22px;
}

.brk-profile-guild-frame {
  position: relative;
  width: 100%;
  min-height: 220px;
  margin: 0 auto;
  padding: 36px 22px 28px;
  background: rgba(0, 0, 0, .96);
}

.brk-profile-guild-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 16px solid transparent;
  border-image-source: url('assets/ui/interaction_frame.png');
  border-image-slice: 38;
  border-image-width: 16px;
  border-image-repeat: stretch;
}

.brk-profile-guild-frame-inner {
  position: relative;
  z-index: 3;
}

.brk-profile-guild-heading {
  margin: 0 0 14px;
}

.brk-profile-guild-title {
  margin: 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.05;
  text-transform: uppercase;
  color: rgba(244, 235, 216, .96);
  text-shadow: 0 3px 3px rgba(0, 0, 0, .95);
}

.brk-profile-guild-meta {
  margin: 4px 0 0;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .22px;
  text-transform: uppercase;
  color: rgba(209, 199, 181, .68);
}

.brk-profile-roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
}

.brk-profile-role {
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .15px;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .92);
}

.brk-profile-empty {
  margin: 0;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(209, 199, 181, .72);
}

.brk-profile-actions {
  width: 100%;
  align-items: center;
}

.brk-profile-footer .review-menu-row.menu-row {
  width: min(432px, 100%);
  height: 52px;
  flex: 0 0 52px;
}

.brk-profile-action-row.menu-row {
  text-decoration: none;
  color: inherit;
}

.brk-profile-footer .menu-row:hover,
.brk-profile-footer .menu-row:focus-visible {
  color: rgba(255, 250, 238, .99) !important;
  border: 2px solid var(--browse-primary);
  box-shadow: inset 0 0 0 1px rgba(95, 0, 0, .48), 0 0 7px var(--browse-highlight);
}

.brk-profile-footer .menu-row:hover::before,
.brk-profile-footer .menu-row:focus-visible::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)),
    url('assets/ui/brk_selected_bg.jpg') center var(--brk-bg-y, 50%) / 100% auto no-repeat;
}

.brk-profile-footer .menu-row:hover::after,
.brk-profile-footer .menu-row:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .44);
}

.brk-profile-footer .menu-row:hover > .row-border-flow,
.brk-profile-footer .menu-row:focus-visible > .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: 2px solid var(--browse-primary);
  border-radius: 2px;
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 3px var(--browse-highlight));
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .brk-profile-footer .menu-row:hover > .row-border-flow,
  .brk-profile-footer .menu-row:focus-visible > .row-border-flow {
    padding: 2px;
    border: 0;
    background:
      conic-gradient(
        from var(--browse-angle),
        var(--browse-primary) 0deg,
        var(--browse-primary) 82deg,
        var(--browse-deep) 128deg,
        var(--browse-highlight) 158deg,
        var(--browse-primary) 198deg,
        var(--browse-accent) 250deg,
        var(--browse-primary) 306deg,
        var(--browse-primary) 360deg
      );
    animation: menu-border-flow var(--browse-duration) linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

@media (max-width: 620px) {
  body.has-site-top-bar #app {
    height: calc(100vh - 52px);
    margin-top: 52px;
  }

  .site-top-bar {
    min-height: 52px;
    gap: 6px;
    padding: 6px 8px 9px;
  }

  .site-top-bar::after {
    left: 8px;
    right: 8px;
  }

  .site-top-nav {
    gap: 2px;
  }

  .site-top-link,
  .site-top-auth-button {
    min-width: 66px;
    min-height: 28px;
    padding: 5px 12px;
    font-size: 10px;
  }

  .site-top-auth-button {
    min-width: 100px;
    max-width: 34vw;
    font-size: 12px;
  }

  .brk-profile-panel {
    width: min(540px, 96%);
    min-height: min(86vh, 900px);
    max-height: min(96vh, 980px);
    padding: 48px 18px 28px;
  }

  .brk-profile-role {
    font-size: 14px;
  }

  .brk-profile-guild-title {
    font-size: 17px;
  }

  .brk-profile-guild-meta {
    font-size: 10px;
  }
}

/* Route replacement behavior -------------------------------------------------
   The root BRK menu is the Home menu only. Opening any other route removes it
   and lets that route occupy the same left edge. Escape/Backspace restores the
   prior route through app.js history. */
#app.is-subroute {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
#app.is-subroute > .brk-shell { display: none; }
#app.is-subroute > .stage {
  grid-column: 1;
  width: 100%;
}

/* A resource's own navigation becomes the BRK menu in the original left slot. */
#app.is-resource-route .docs-view {
  padding: 0 0 70px;
}
#app.is-resource-route .docs-columns {
  width: 100%;
  min-height: 92vh;
  margin: 0;
  grid-template-columns: 540px minmax(0, 1fr);
  gap: clamp(28px, 3vw, 66px);
}
#app.is-resource-route .resource-sections {
  width: 540px;
  height: min(864px, 92vh);
  min-height: 720px;
  padding: 34px 54px 46px;
}
#app.is-resource-route .resource-sections .stage-list {
  width: 432px;
  margin: 0;
}
#app.is-resource-route .resource-sections .section-row {
  width: 432px;
}
#app.is-resource-route .doc-canvas {
  min-height: min(864px, 92vh);
}

#app.is-catalogue-resource .docs-columns {
  grid-template-columns: 1fr;
  gap: 0;
}
#app.is-catalogue-resource .resource-sections,
#app.is-catalogue-resource .resource-related-crawler-host {
  display: none !important;
}
#app.is-catalogue-resource .doc-canvas {
  width: min(1040px, 100%);
  margin: 0 auto;
  text-align: center;
}
#app.is-catalogue-resource .doc-breadcrumb {
  display: block;
  margin: 0 auto;
  text-align: center;
}
#app.is-catalogue-resource .doc-canvas h1 {
  text-align: center;
}
#app.is-catalogue-resource .doc-canvas > .stage-divider {
  margin-left: auto;
  margin-right: auto;
}
#app.is-catalogue-resource .doc-content {
  text-align: left;
}
#app.is-catalogue-resource-landing .doc-canvas {
  min-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
#app.is-catalogue-resource-landing .doc-ink {
  display: none;
}

/* Exact BRK Menu proportions / surface language */
.brk-shell {
  position: relative; width: 540px; height: min(864px, 92vh); min-height: 720px;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.58)); overflow: visible; isolation: isolate;
  display: flex; flex-direction: column; padding: 0 54px;
}
.shell-ink {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  opacity: var(--ink-panel-opacity);
}
.shell-header {
  position: relative;
  flex: 0 0 178px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  padding: 28px 12px 18px;
}
.shell-eyebrow {
  font-family: 'RDRLino', Georgia, serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.2px;
  color: rgba(200,188,167,.58);
  text-transform: uppercase;
  text-shadow: 0 2px 2px #000;
}
.shell-title {
  margin-top: 7px;
  font-family: 'Redemption', Georgia, serif;
  font-size: 48px;
  line-height: .9;
  letter-spacing: 1px;
  color: rgba(239,231,214,.95);
  text-transform: uppercase;
  text-shadow: 0 3px 3px rgba(0,0,0,.95);
}
.header-rule, .stage-divider { height: 4px; background: url('assets/ui/divider_line.png') center / 100% 4px no-repeat; opacity: .38; }
.header-rule { width: 408px; margin: 18px auto 0; }

.menu-rows { display: flex; flex-direction: column; gap: 6px; }
.menu-row,
.stage-row,
.resource-card,
.section-row {
  position: relative; overflow: hidden; border: 0; outline: 0; cursor: pointer;
  background: url('assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat;
  color: var(--text-muted);
}
.menu-row { width: 432px; height: 52px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 0 14px 0 16px; }
.row-label { position: relative; z-index: 4; font-family: 'RDRLedger', Georgia, serif; font-size: 19px; line-height: 1; letter-spacing: .15px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-right { position: relative; z-index: 4; font-family: 'RDRLedger', Georgia, serif; font-size: 15px; color: rgba(228,219,200,.72); padding-left: 12px; }

.menu-row.is-focused,
.stage-row.is-focused,
.resource-card.is-focused,
.section-row.is-focused {
  color: rgba(255,250,238,.99) !important;
  border: 2px solid var(--browse-primary);
  box-shadow: inset 0 0 0 1px rgba(95,0,0,.48), 0 0 7px var(--browse-highlight);
}
.menu-row.is-focused::before,
.stage-row.is-focused::before,
.resource-card.is-focused::before,
.section-row.is-focused::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)), url('assets/ui/brk_selected_bg.jpg') center var(--brk-bg-y,50%) / 100% auto no-repeat;
}
.menu-row.is-focused::after,
.stage-row.is-focused::after,
.resource-card.is-focused::after,
.section-row.is-focused::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 18px rgba(0,0,0,.44); }
.row-border-flow { display: none; }
.is-focused > .row-border-flow { display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; border: 2px solid var(--browse-primary); border-radius: 2px; opacity: var(--browse-opacity); filter: drop-shadow(0 0 3px var(--browse-highlight)); }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .is-focused > .row-border-flow {
    padding: 2px; border: 0;
    background: conic-gradient(from var(--browse-angle), var(--browse-primary) 0deg, var(--browse-primary) 82deg, var(--browse-deep) 128deg, var(--browse-highlight) 158deg, var(--browse-primary) 198deg, var(--browse-accent) 250deg, var(--browse-primary) 306deg, var(--browse-primary) 360deg);
    animation: menu-border-flow var(--browse-duration) linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
}
@keyframes menu-border-flow { to { --browse-angle: 360deg; } }

.shell-filler { flex: 1; min-height: 26px; }
.shell-horses { width: 368px; max-height: 94px; object-fit: contain; align-self: center; opacity: .56; filter: drop-shadow(0 2px 2px #000); margin-bottom: 5px; }
.shell-footer { position: relative; min-height: 54px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid rgba(229,221,204,.48); font-size: 11px; color: rgba(201,191,173,.68); text-transform: uppercase; letter-spacing: .7px; }
kbd { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; margin-right: 3px; padding: 0 5px; border: 1px solid rgba(231,222,202,.32); border-radius: 2px; background: rgba(0,0,0,.48); color: rgba(237,229,212,.9); font-family: 'RDRLino', Georgia, serif; font-size: 10px; box-shadow: inset 0 0 4px rgba(255,255,255,.04); }

.stage { position: relative; height: 92vh; min-width: 0; overflow: hidden; }
.view { position: absolute; inset: 0; display: none; overflow: auto; padding: clamp(20px, 2vw, 36px) clamp(12px, 2vw, 38px) 74px; scrollbar-width: thin; scrollbar-color: rgba(128,20,10,.7) rgba(0,0,0,.25); }
.view.is-active { display: block; animation: view-in .24s ease-out both; }
@keyframes view-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.home-view { overflow: hidden; padding: 0; }
.home-lockup {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vh 3vw 5vh 0;
}
.home-brand-reveal {
  position: relative;
  width: min(980px, 82vw);
  max-width: 100%;
  aspect-ratio: 1448 / 1167;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.72));
}
.home-brand-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 110px 48px rgba(3,2,2,.72), inset 0 0 28px 12px rgba(3,2,2,.35);
}
.home-brand-base,
.home-brand-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.home-brand-base {
  z-index: 1;
  opacity: .95;
  filter: saturate(.92) contrast(1.04) brightness(.88);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 53%, rgba(0,0,0,.92) 68%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, #000 53%, rgba(0,0,0,.92) 68%, transparent 98%);
}
.home-brand-overlay {
  z-index: 2;
  object-fit: contain;
  opacity: .985;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.86));
  transition: opacity .6s ease, filter .6s ease;
}
.home-brand-reveal:hover .home-brand-overlay,
.home-brand-reveal:focus .home-brand-overlay,
.home-brand-reveal:active .home-brand-overlay {
  opacity: 0;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,0));
}
.home-brand-reveal:focus { outline: none; }

.stage-heading {
  width: min(1040px, 100%);
  max-width: none;
  margin: 3vh auto 28px;
  text-align: center;
}
.stage-kicker { display: block; font-family: 'RDRLino', Georgia, serif; font-size: 12px; letter-spacing: 2px; color: rgba(205,192,169,.58); text-transform: uppercase; text-align: center; }
.stage-heading h1, .doc-canvas h1 { margin: 5px 0 6px; font-family: 'Redemption', Georgia, serif; font-size: clamp(44px, 5vw, 74px); font-weight: 400; line-height: .95; letter-spacing: .8px; text-transform: uppercase; text-shadow: 0 3px 3px rgba(0,0,0,.95); }
.stage-divider { width: 100%; max-width: 960px; margin-top: 14px; }
.stage-heading .stage-divider {
  width: 100%;
  max-width: none;
  height: clamp(28px, 3.4vw, 42px);
  margin: 8px auto 0;
  background: url('assets/ui/arrow_border.png') center / 100% auto no-repeat;
  opacity: .88;
}

.doc-canvas > .stage-divider {
  width: 100%;
  max-width: none;
  height: clamp(28px, 3.4vw, 42px);
  margin: 8px 0 18px;
  background: url('assets/ui/arrow_border.png') center / 100% auto no-repeat;
  opacity: .88;
}
.stage-divider.compact { width: 100%; margin: 14px 0 18px; }

.resource-grid {
  position: relative;
  isolation: isolate;
  width: min(1040px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
}
.resource-card {
  min-height: 106px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  padding: 8px 18px 8px 18px;
  text-align: left;
}
/* Every BRK menu uses one continuous selected image. The focused row is a window into it. */
[data-menu-axis] {
  --slice-menu-width: 100%;
  --slice-menu-height: 100%;
  --slice-image-width: var(--slice-menu-width);
  --slice-image-left: 0px;
  --slice-image-top: 0px;
}
[data-menu-axis] .nav-target.is-focused::before {
  background-image:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url('assets/ui/brk_selected_bg.jpg');
  /* Keep the BRK artwork's original aspect ratio. It always spans the
     menu width and is vertically centered behind shorter menu groups. */
  background-size:
    100% 100%,
    var(--slice-image-width, var(--slice-menu-width)) auto;
  background-position:
    0 0,
    calc(var(--slice-image-left, 0px) - var(--slice-x, 0px))
    calc(var(--slice-image-top, 0px) - var(--slice-y, 0px));
  background-repeat: no-repeat;
}

/* Home mirrors BRK Menu itself instead of using the catalogue-wide slice.
   The crop focal point walks down the source artwork as selection moves. */
#site-menu .nav-target.is-focused::before {
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url('assets/ui/brk_selected_bg.jpg') center var(--brk-bg-y, 35%) / 100% auto no-repeat;
}
.card-name { position: relative; z-index: 4; font-family: 'Redemption', Georgia, serif; font-size: clamp(23px, 2.4vw, 36px); line-height: .92; letter-spacing: .4px; color: rgba(226,218,201,.86); text-transform: uppercase; }
.card-arrow { position: relative; z-index: 4; justify-self: end; font-family: 'RDRLedger', Georgia, serif; font-size: 28px; }
.resource-card.is-focused .card-name, .resource-card.is-focused .card-arrow { color: rgba(255,250,238,.99); }

.simple-view .stage-heading { width: min(1040px, 100%); }
.stage-list { width: min(820px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.stage-row, .section-row { min-height: 58px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 18px; font-family: 'RDRLedger', Georgia, serif; font-size: 20px; text-align: left; }
.stage-row > span, .section-row > span { position: relative; z-index: 4; }

.docs-view { padding: 3vh 2vw 70px; }
.docs-columns { width: min(1200px, 100%); min-height: 84vh; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: 28px; }
.resource-sections { position: relative; align-self: start; min-height: 670px; padding: 34px 28px 46px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.back-link { border: 0; background: transparent; color: rgba(215,204,184,.72); font-family: 'RDRLino', Georgia, serif; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; padding: 0 0 14px; }
.back-link.is-focused { color: rgba(245,229,193,.96); text-shadow: 0 0 8px rgba(197,32,7,.45); }
.page-back-button {
  display: none;
  position: absolute;
  top: 0;
  left: 12px;
  z-index: 20;
  min-height: 32px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(231,222,202,.32);
  border-radius: 2px;
  background: rgba(0,0,0,.48);
  box-shadow: inset 0 0 4px rgba(255,255,255,.04);
}
#app.is-subroute > .stage > .page-back-button { display: inline-flex; }
#app.is-branch-home > .branch-shell > .page-back-button { display: inline-flex; }
#app.is-subroute > .stage > .view { top: 38px; }
.page-back-button:hover,
.page-back-button:focus-visible,
.page-back-button.is-focused {
  color: rgba(245,229,193,.96);
  border-color: rgba(197,32,7,.72);
  box-shadow: inset 0 0 4px rgba(255,255,255,.04), 0 0 7px rgba(197,32,7,.42);
  text-shadow: 0 0 8px rgba(197,32,7,.45);
}
.resource-wordmark { font-family: 'Redemption', Georgia, serif; font-size: 36px; line-height: .92; text-transform: uppercase; color: rgba(237,229,212,.94); text-shadow: 0 2px 2px #000; }
.compact-list { gap: 6px; }
.section-row { min-height: 48px; font-size: 17px; }
.doc-canvas {
  position: relative;
  isolation: isolate;
  min-height: 78vh;
  overflow: hidden;
  padding: clamp(34px, 5vw, 76px);
  border: 1px solid rgba(225,215,193,.08);
  box-shadow: 0 18px 34px rgba(0,0,0,.42);
  background: transparent;
}
.doc-ink {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: calc(var(--ink-panel-opacity) * 0.85 * 0.85);
}
.doc-canvas > :not(.doc-ink) {
  position: relative;
  z-index: 1;
}
.doc-breadcrumb { font-family: 'RDRLino', Georgia, serif; font-size: 11px; letter-spacing: 1.4px; color: rgba(200,190,172,.54); text-transform: uppercase; }
.empty-doc-lines { margin-top: 54px; opacity: .13; }
.empty-doc-lines span { display: block; height: 1px; background: rgba(237,229,212,.72); margin: 28px 0; }
.empty-doc-lines span:nth-child(2) { width: 74%; }.empty-doc-lines span:nth-child(3) { width: 42%; }

.global-controls { position: fixed; z-index: 9; right: 3.4vw; bottom: 2.3vh; display: flex; gap: 14px; color: rgba(201,191,173,.44); font-family: 'RDRLino', Georgia, serif; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; pointer-events: none; }
.global-controls span { display: flex; align-items: center; }
.global-controls kbd { opacity: .7; }

@media (max-width: 1180px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100vh; grid-template-columns: 430px 1fr; gap: 18px; padding: 20px; }
  #app.is-subroute { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #app.is-resource-route .docs-columns { grid-template-columns: 430px minmax(0, 1fr); gap: 18px; }
  #app.is-catalogue-resource .docs-columns { grid-template-columns: 1fr; gap: 0; }
  #app.is-resource-route .resource-sections { width: 430px; padding-left: 28px; padding-right: 28px; }
  #app.is-resource-route .resource-sections .stage-list,
  #app.is-resource-route .resource-sections .section-row { width: 374px; }
  .brk-shell { width: 430px; transform: scale(.79); transform-origin: top left; margin-right: -90px; }
  .stage { height: calc(100vh - 40px); }
  .resource-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  #app { display: block; padding: 12px; }
  .branch-gate-footer,
  .shell-footer,
  .resource-menu-footer,
  .global-controls {
    display: none !important;
  }
  .brk-shell { position: relative; width: 540px; transform: scale(min(.7, calc((100vw - 24px) / 540))); transform-origin: top left; margin-bottom: calc(-864px * .30 + 18px); }
  .stage { height: auto; min-height: 70vh; }
  .view { position: relative; inset: auto; min-height: 70vh; padding: 28px 6px 76px; }
  .view:not(.is-active) { display: none; }
  #app.is-subroute > .stage > .view { top: auto; margin-top: 38px; }
  .home-lockup { min-height: 66vh; padding: 0; }
  .home-brand-reveal { width: min(94vw, 760px); }
  .home-brand-overlay { padding: 23% 17% 20%; }
  .docs-columns { grid-template-columns: 1fr; }
  #app.is-resource-route .docs-columns { grid-template-columns: 1fr; gap: 18px; }
  #app.is-resource-route .resource-sections { width: 100%; height: auto; min-height: auto; padding: 28px; }
  #app.is-resource-route .resource-sections .stage-list,
  #app.is-resource-route .resource-sections .section-row { width: 100%; }
  .resource-sections { min-height: auto; }
  .global-controls { display: none; }

  /* Branch home (tapping BRK/IRP from the selector) normally shows the nav
     menu + a decorative logo panel side-by-side on desktop. Stacking both
     on mobile felt like "the menu appears below" instead of a clean page
     switch — every other route already swaps to a single full-screen view,
     so make branch-home do the same: skip the logo panel, nav goes straight
     to full-screen. Logo panel is untouched above 820px. */
  #app.is-branch-home > .stage { display: none; }
  #app.is-branch-home > .branch-shell { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}


/* ==========================================================================
   Branch selector / BRK + Paragon RP split
   ========================================================================== */

body.is-selector-active .world-bg {
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.18)),
    url('assets/backgrounds/red_forest.png') center 52% / cover no-repeat;
}
body.is-selector-active .world-bg::before {
  background:
    radial-gradient(ellipse at 50% 48%, transparent 24%, rgba(0,0,0,.13) 58%, rgba(0,0,0,.72) 100%),
    linear-gradient(90deg, rgba(0,0,0,.56), transparent 24%, transparent 76%, rgba(0,0,0,.56));
}
body.is-selector-active .vignette {
  box-shadow:
    inset 0 0 200px 72px rgba(0,0,0,.72),
    inset 0 -110px 170px rgba(0,0,0,.72),
    inset 0 90px 130px rgba(0,0,0,.34);
}

.branch-gate {
  display: none;
  grid-column: 1 / -1;
  width: 100%;
  min-height: 100%;
  height: auto;
  --gate-pad-x: clamp(28px, 6vw, 94px);
  --branch-loop-size: min(430px, 44vh, 32vw);
  padding: clamp(40px, 7vh, 88px) var(--gate-pad-x) 0;
  align-items: center;
  justify-items: center;
  grid-template-rows: auto 1fr auto;
}
#app.is-selector {
  display: block;
  padding: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,20,10,.7) rgba(0,0,0,.25);
}
#app.is-selector .branch-gate {
  display: grid;
  min-height: min(100%, 100vh);
}
#app.is-selector .branch-shell,
#app.is-selector .stage {
  display: none;
}

.branch-gate-header {
  width: min(1120px, 90vw);
  text-align: center;
  padding-top: 1vh;
  margin-bottom: clamp(18px, 3.5vh, 46px);
}
.branch-gate-header h1 {
  margin: 7px 0 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(44px, 5.2vw, 82px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 4px 7px rgba(0,0,0,.92);
}
.branch-divider {
  width: min(920px, 88%);
  height: clamp(26px, 3vw, 42px);
  margin: 10px auto 0;
  background: url('assets/ui/arrow_border.png') center / 100% auto no-repeat;
  opacity: .82;
}

.branch-options {
  width: min(1320px, 92vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 68px);
  align-items: stretch;
}
.branch-option {
  position: relative;
  min-height: min(560px, 64vh);
  overflow: hidden;
  border: 1px solid rgba(236,225,201,.12);
  padding: clamp(24px, 3vw, 44px);
  background:
    linear-gradient(180deg, rgba(5,3,3,.56), rgba(3,2,2,.82)),
    url('assets/ui/inkroller_1a.png') center / 100% 100% no-repeat;
  color: var(--text-main);
  cursor: pointer;
  isolation: isolate;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.48));
  transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.branch-option::before { display: none !important; }
.branch-option::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 85px 32px rgba(0,0,0,.56);
}
.branch-option.is-focused {
  border: 2px solid var(--browse-primary);
  box-shadow:
    0 0 10px rgba(197,32,7,.62),
    inset 0 0 0 1px rgba(95,0,0,.58),
    inset 0 0 70px rgba(80,6,2,.12);
  transform: translateY(-2px);
}

.branch-art {
  position: relative;
  z-index: 2;
  width: 100%;
  height: min(380px, 42vh);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.branch-art img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.branch-art-brk img {
  width: min(520px, 88%);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.9));
}
.branch-art-irp img {
  position: absolute;
  width: min(620px, 96%);
  transition: opacity .36s ease, transform .36s ease;
}
.irp-branch-white { opacity: .94; }
.irp-branch-red { opacity: 0; transform: scale(.985); }
.branch-option.is-focused .irp-branch-white { opacity: 0; transform: scale(1.015); }
.branch-option.is-focused .irp-branch-red { opacity: 1; transform: scale(1); }

/* The IRP gate card runs a short loop with the wordmark already burned into
   the footage, so it replaces the two cross-fading stills rather than sitting
   behind them. The stills stay in the markup as the fallback and come back
   whenever the video should not play: reduced motion, or a narrow screen where
   an autoplaying background is just wasted bandwidth. The poster frame covers
   the gap before the first frame decodes, and if the file never loads at all
   the poster is what stays on screen. */
/* Both loops render in the SAME square box regardless of their own shape - the
   IRP clip is 1:1, the BRK clip 4:3 - because two cards side by side showing
   different sized footage reads as a mistake. object-fit: cover fills the
   square; the square crop was checked against both clips and neither wordmark
   is touched (BRK's sits between 31% and 72% across, the crop keeps 12.5% to
   87.5%). The box drives the art height, so both cards match exactly. */
.branch-loop {
  position: static;
  width: var(--branch-loop-size, min(430px, 44vh, 32vw));
  height: var(--branch-loop-size, min(430px, 44vh, 32vw));
  max-width: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .36s ease;
}

.branch-art.has-loop {
  height: auto;
}

.branch-art.has-loop img {
  display: none;
}

.branch-option.is-focused .branch-loop {
  transform: scale(1.015);
}

@media (prefers-reduced-motion: reduce), (max-width: 860px) {
  .branch-art.has-loop .branch-loop {
    display: none;
  }

  .branch-art.has-loop {
    height: min(380px, 42vh);
  }

  .branch-art.has-loop img {
    display: block;
  }
}

.branch-caption {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 10px;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(28px, 2.7vw, 43px);
  line-height: .95;
  text-transform: uppercase;
  text-shadow: 0 3px 4px #000;
}
.branch-subcaption {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 8px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 16px;
  color: rgba(215,204,183,.62);
}
.branch-gate-footer {
  display: none;
}

/* Homepage discover panels — visible crawlable copy below the branch selector */
.branch-discover {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  width: min(1320px, 92vw);
  margin: clamp(28px, 5vh, 64px) auto 0;
}
.branch-discover-header {
  text-align: center;
  margin-bottom: clamp(22px, 3vh, 34px);
  grid-column: 1 / -1;
}
.branch-discover-kicker {
  margin: 0;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(200,190,172,.58);
}
.branch-discover-header h2 {
  margin: 8px 0 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-shadow: 0 3px 4px rgba(0,0,0,.92);
}
.branch-discover-lead {
  max-width: 980px;
  margin: 14px auto 0;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(215,204,183,.86);
  text-shadow: 0 2px 3px rgba(0,0,0,.75);
}
.branch-discover-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.branch-discover > .intro-section {
  grid-column: auto;
}

/* Framed window chrome — matches config checker / tools panels */
.brk-window {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .58));
}
.brk-window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: url('assets/ui/interaction_frame.png') center / 100% 100% no-repeat;
}

.branch-discover-panel {
  min-height: 420px;
  max-height: min(520px, 62vh);
}

.branch-discover-window::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .54)),
    url('assets/ui/inkroller_1a.png') center / 100% 100% no-repeat;
  opacity: .7;
}

/* On a phone the discover panel loses its max-height and grows to the full
   height of its content - measured at 3600px. Both decorative layers were
   stretched to 100% 100%, so a 540x864 texture and a 1915x821 frame were
   smeared into vertical streaks behind the text. Scoped to narrow screens so
   the desktop panel, which stays capped at 520px, is untouched. */
@media (max-width: 900px) {
  /* Tile the ground down the panel instead of stretching it. */
  .branch-discover-window::before {
    background:
      linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .54)),
      url('assets/ui/inkroller_1a.png') top center / 100% auto repeat-y;
  }

  /* border-image with slice 38 is how every other frame on the site is drawn.
     It keeps the corners sharp at any height; a stretched background cannot. */
  .branch-discover-window.brk-window::after {
    background: none;
    border: 20px solid transparent;
    border-image-source: url('assets/ui/interaction_frame.png');
    border-image-slice: 38;
    border-image-width: 20px;
    border-image-repeat: stretch;
  }
}

.branch-discover-panel-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  max-height: min(520px, 62vh);
  padding: 22px 18px 18px 22px;
  overflow: hidden;
}

.branch-discover-panel-head {
  flex: 0 0 auto;
  margin: 0 0 12px;
  padding: 0 8px 10px;
  text-align: center;
}

.branch-discover-panel-head h3 {
  margin: 0;
  padding: 0;
  background: none;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(18px, 1.45vw, 24px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .45px;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .92);
  color: rgba(255, 255, 255, .96);
}

.branch-discover-panel-head::after {
  content: '';
  display: block;
  width: min(320px, 88%);
  height: 4px;
  margin: 10px auto 0;
  background: url('assets/ui/divider_line.png') center / 100% 4px no-repeat;
  opacity: .42;
}

.branch-discover-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 32px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  line-height: 1.58;
  color: rgba(215, 204, 183, .88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

.branch-discover-panel-body p {
  margin: 0;
}

/* Intro scroller copy needs a little extra inner breathing room
   so text does not feel tight against the framed window artwork. */
.branch-discover-panel-body.intro-copy {
  padding-left: 12px;
}

.branch-discover-links.stage-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin: 14px 0 0;
}

.branch-discover-links .section-row {
  width: 100%;
  min-height: 40px;
  height: auto;
  padding: 0 10px 0 12px;
  font-size: 14px;
  line-height: 1.1;
}

.branch-discover-links .section-row > span:nth-child(2) {
  font-size: 20px;
  padding-left: 8px;
}

/* Intro sections — full-width stacked panels from intro copy */
.intro-section {
  width: 100%;
  margin: 0;
}
.intro-section-head {
  text-align: center;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.intro-section-head h3 {
  margin: 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 42px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .7px;
  text-transform: uppercase;
  text-shadow: 0 3px 4px rgba(0, 0, 0, .92);
  color: rgba(255, 255, 255, .96);
}
.intro-window {
  max-height: min(520px, 62vh);
}
.intro-window .branch-discover-panel-inner {
  min-height: 0;
}
.intro-copy p {
  margin: 0 0 12px;
}
.intro-copy a {
  color: #d5b989;
  text-decoration-color: rgba(192, 67, 52, 0.65);
  text-underline-offset: 4px;
}
.intro-copy ul {
  margin: 6px 0 14px;
  padding-left: 22px;
  color: rgba(215, 204, 183, .82);
}
.intro-copy ul li {
  margin: 0 0 3px;
  line-height: 1.48;
}
.intro-subhead {
  margin: 20px 0 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .88);
  color: rgba(255, 255, 255, .94);
}
.intro-sep {
  width: min(220px, 60%);
  height: 4px;
  margin: 8px 0 14px;
  background: url('assets/ui/divider_line.png') center / 100% 4px no-repeat;
  opacity: .32;
}
.intro-sep-wide {
  width: min(480px, 70%);
  margin: 10px auto 0;
  opacity: .38;
}
.intro-principle {
  margin: 4px 0;
  color: rgba(215, 204, 183, .92);
}
.intro-anchor {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
}
.intro-copy .branch-discover-links {
  margin: 16px 0 18px;
}

/* Crawlable site footer — real <a href> links for search engines and humans */
.site-crawl-footer {
  position: relative;
  grid-column: 1 / -1;
  width: 100vw;
  justify-self: center;
  margin: auto calc(50% - 50vw) 0;
  padding: 13px clamp(10px, 1vw, 20px) 4px;
  border-top: 16px solid transparent;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .24)),
    url('assets/backgrounds/red_forest.png') center bottom / cover no-repeat;
  background-clip: padding-box;
  box-shadow:
    inset 0 16px 28px rgba(0, 0, 0, .18),
    inset 0 -10px 22px rgba(0, 0, 0, .24);
}

.site-crawl-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  pointer-events: none;
  background:
    url('assets/ui/divider_line.png')
    center / 100% 4px no-repeat;
  opacity: .72;
}
.branch-gate > .site-crawl-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 13px clamp(10px, 1vw, 20px) 4px;
}
.site-crawl-footer-inner {
  width: 100%;
  margin: 0;
  text-align: center;
}
.site-crawl-footer-brand {
  margin: 0 0 4px;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .88);
}
.site-crawl-footer-lead {
  margin: 0 auto 12px;
  max-width: none;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: clamp(11px, .95vw, 14px);
  line-height: 1.4;
  color: rgba(229, 218, 197, .88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}
.site-crawl-footer-groups {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x;
}
.site-crawl-footer-groups::-webkit-scrollbar {
  display: none;
}
.site-crawl-footer-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: 14px 28px;
  text-align: left;
}
.site-crawl-footer-group h3 {
  margin: 0 0 2px;
  color: rgba(239, 229, 207, .9);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .25px;
}
.site-crawl-footer-group > p {
  margin: 0 0 5px;
  color: rgba(218, 207, 186, .74);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 9px;
  line-height: 1.3;
}
.site-crawl-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}
.site-crawl-footer-group .site-crawl-footer-nav {
  justify-content: flex-start;
}
.site-crawl-footer-nav a {
  color: rgba(235, 224, 202, .86);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 10px;
  letter-spacing: .28px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(177, 8, 8, .35);
  padding-bottom: 1px;
}
.site-crawl-footer-nav a:hover,
.site-crawl-footer-nav a:focus {
  color: rgba(255, 250, 238, .96);
  border-bottom-color: rgba(197, 32, 7, .72);
}

.contextual-crawl-footer {
  width: 100vw;
  margin: auto calc(50% - 50vw) 0;
  padding: 13px clamp(10px, 1vw, 20px) 4px;
  flex: 0 0 auto;
  transform: none;
}

.contextual-crawl-footer .site-crawl-footer-inner {
  width: 100%;
}

.contextual-crawl-footer .site-crawl-footer-brand {
  margin-bottom: 5px;
  font-size: clamp(15px, 1.3vw, 21px);
}

.contextual-crawl-footer .site-crawl-footer-lead {
  max-width: 860px;
  margin-bottom: 11px;
  font-size: clamp(11px, .95vw, 14px);
  line-height: 1.4;
}

.contextual-crawl-footer .site-crawl-footer-nav {
  gap: 5px 11px;
}

.contextual-crawl-footer .site-crawl-footer-nav a {
  font-size: 10px;
  letter-spacing: .28px;
}

.contextual-crawl-footer .site-crawl-footer-groups {
  gap: 10px 22px;
}

.contextual-crawl-footer .site-crawl-footer-group h3 {
  font-size: 12px;
}

.contextual-crawl-footer .site-crawl-footer-group > p {
  font-size: 9px;
}

/* Page-specific crawl links span beneath both resource columns. */
.resource-related-crawler-host {
  grid-column: 1 / -1;
  width: 100vw;
  min-width: 0;
  margin-left: calc(50% - 50vw);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.resource-related-crawler-host[hidden] {
  display: none;
}

#app.is-resource-route
  .docs-columns:has(.resource-related-crawler)
  .resource-sections.brk-resource-shell {
  height: auto;
  min-height: 0;
  align-self: start;
}

#app.is-resource-route
  .docs-view:has(.resource-related-crawler) {
  padding-bottom: 0;
}

#app.is-resource-route
  .docs-columns:has(.resource-related-crawler) {
  row-gap: 8px;
}

.resource-related-crawler.site-crawl-footer {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 10px clamp(10px, 1vw, 20px) 3px;
}

.resource-related-crawler .site-crawl-footer-brand {
  margin-bottom: 1px;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1;
}

.resource-related-crawler .site-crawl-footer-lead {
  max-width: 980px;
  margin-bottom: 3px;
  font-size: clamp(9px, .78vw, 11px);
  line-height: 1.12;
}

.resource-related-crawler .site-crawl-footer-nav {
  gap: 3px 12px;
}

.resource-related-crawler .site-crawl-footer-nav a {
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 820px) {
  #app.is-resource-route
    .view[data-mobile-screen="menu"]
    .resource-related-crawler-host {
    display: none;
  }
}

.site-crawl-footer-scroll-controls {
  display: grid;
  grid-template-columns: 26px minmax(120px, 1fr) 26px;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.site-crawl-footer-scroll-controls.hidden {
  display: none;
}

.site-crawl-scroll-button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 160% 160%;
  cursor: pointer;
  filter: brightness(.9) drop-shadow(0 1px 2px rgba(0,0,0,.9));
}

.site-crawl-scroll-button.previous {
  background-image: url('assets/ui/left.png');
}

.site-crawl-scroll-button.next {
  background-image: url('assets/ui/right.png');
}

.site-crawl-scroll-button:disabled {
  opacity: .42;
  background-color: transparent;
  cursor: default;
}

.site-crawl-scroll-track {
  position: relative;
  height: 24px;
  cursor: pointer;
  background:
    linear-gradient(to bottom, transparent 11px, rgba(177,8,8,.58) 11px, rgba(177,8,8,.58) 13px, transparent 13px);
}

.site-crawl-scroll-thumb {
  position: absolute;
  top: 1px;
  left: 0;
  width: clamp(320px, 34vw, 500px);
  height: 22px;
  background: url('assets/ui/line_horizontal.png') center / 100% 900% no-repeat;
  cursor: grab;
  filter: brightness(1.5) drop-shadow(0 0 2px rgba(177,8,8,.7));
  touch-action: none;
}

.site-crawl-scroll-thumb.is-dragging {
  cursor: grabbing;
  filter: brightness(1.9) drop-shadow(0 0 4px rgba(197,32,7,.85));
}

@media (max-width: 760px) {
  .contextual-crawl-footer {
    width: 100%;
    margin-right: 0;
    transform: none;
  }
}

.irp-category-view .contextual-crawl-footer {
  margin-top: 46px;
}

.branch-home-view .contextual-crawl-footer {
  position: relative;
  z-index: 3;
}

/* Branch shells ------------------------------------------------------------- */
.branch-shell { display: none; }
#app.is-branch-home.is-brk-branch .brk-branch-shell { display: flex; }
#app.is-branch-home.is-irp-branch .irp-branch-shell { display: flex; }

#app.is-branch-home {
  grid-template-columns: 540px 1fr;
  gap: clamp(28px, 3vw, 66px);
}
#app.is-branch-home > .stage {
  grid-column: 2;
  width: auto;
}

#app.is-branch-home.is-irp-branch > .stage {
  height: 100%;
}
#app.is-subroute > .branch-shell { display: none !important; }

.irp-shell-header {
  flex-basis: 188px;
  padding-top: 8px;
}
.irp-shell-emblem {
  position: absolute;
  width: 82px;
  height: 82px;
  object-fit: contain;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .9;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.86));
}
.irp-shell-header .shell-title { font-size: 42px; }

/* Both branch root menus use BRK Menu's own focused crop behavior. */
#brk-menu .nav-target.is-focused::before,
#irp-menu .nav-target.is-focused::before {
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url('assets/ui/brk_selected_bg.jpg') center var(--brk-bg-y, 35%) / 100% auto no-repeat;
}

/* Branch home center art ---------------------------------------------------- */
.branch-home-view { overflow-x: hidden; overflow-y: auto; padding: 0; flex-direction: column; }
.branch-home-lockup {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.branch-home-lockup::before {
  content: '';
  position: absolute;
  width: min(820px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115,9,4,.18), rgba(31,3,2,.08) 40%, transparent 72%);
  filter: blur(8px);
}
.brk-home-logo {
  position: relative;
  z-index: 1;
  width: min(760px, 76%);
  max-height: 72vh;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.8));
}
.irp-home-lockup {
  flex-direction: column;
  gap: 4px;
}
.irp-home-emblem {
  position: relative;
  z-index: 1;
  width: min(240px, 22vw);
  max-height: 26vh;
  object-fit: contain;
  opacity: .82;
}
.irp-home-wordmark {
  position: relative;
  z-index: 1;
  width: min(780px, 82%);
  max-height: 34vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.75));
}

/* IRP category pages -------------------------------------------------------- */
.irp-category-view .stage-heading {
  width: min(1040px, 100%);
}
.irp-category-list {
  width: min(980px, 100%);
}

.irp-start-here-grid {
  display: grid;
  width: min(1180px, 100%);
  margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}

.irp-topic-link-card.brk-link-card.compact {
  --brk-link-card-height: 210px;
  --brk-link-card-padding: 22px 24px;
}

.irp-topic-link-card {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 980px) {
  .irp-start-here-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .irp-start-here-grid {
    grid-template-columns: 1fr;
  }
}

.irp-category-summary {
  width: min(900px, calc(100% - 32px));
  margin: -4px auto 28px;
  padding: 18px 24px;
  background: url('assets/ui/hud_location_bg2.png') center / 100% 100% no-repeat;
  color: rgba(239, 229, 207, 0.76);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}

.irp-topic-row {
  min-height: 82px;
  height: auto;
  align-items: center;
}

.irp-topic-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.irp-topic-copy strong {
  color: #efe4cb;
  font-family: var(--font-title);
  font-size: 1rem;
}

.irp-topic-copy small {
  max-width: 720px;
  color: rgba(239, 229, 207, 0.62);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
}

.irp-topic-status {
  margin-left: 20px;
  color: rgba(192, 67, 52, 0.88);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.irp-home-view {
  overflow: hidden;
  flex-direction: column;
}

.view.irp-home-view.is-active {
  display: flex;
}

.irp-home-view .irp-home-lockup {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.irp-home-view .contextual-crawl-footer {
  margin-top: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 10px clamp(10px, 1vw, 20px) 2px;
}

.irp-home-view .site-crawl-footer-scroll-controls {
  display: none;
}

.irp-home-view .site-crawl-footer-strip,
.irp-category-view .site-crawl-footer-strip {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1.05fr);
}

@media (max-width: 720px) {
  .irp-topic-status {
    display: none;
  }

  .irp-topic-copy small {
    font-size: 0.74rem;
  }
}

/* Selector should not show the global bottom-right controls twice. */
body.is-selector-active .global-controls { display: none; }

@media (max-width: 980px) {
  #app.is-selector .branch-gate {
    overflow: visible;
    display: grid !important;
    --gate-pad-x: 18px;
    padding: 24px 18px 0;
  }
  .branch-options {
    width: min(720px, 100%);
    margin: 28px auto;
    grid-template-columns: 1fr;
  }
  .branch-option { min-height: 360px; }
  .branch-gate-footer { padding-bottom: 20px; }
  .branch-discover {
    width: min(720px, 100%);
    margin-top: 18px;
    grid-template-columns: 1fr;
  }
  .branch-discover-grid {
    grid-template-columns: 1fr;
  }
  .branch-discover-panel {
    max-height: none;
  }
  .branch-discover-panel-inner {
    max-height: none;
  }
  .branch-discover-links.stage-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  #app.is-branch-home {
    display: block;
    min-height: 100dvh;
    overflow: hidden;
  }
  #app.is-branch-home.is-brk-branch .brk-branch-shell,
  #app.is-branch-home.is-irp-branch .irp-branch-shell {
    --mobile-branch-menu-scale: min(
      calc((100vw - 32px) / 540px),
      calc((100dvh - 32px) / 864px)
    );
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    width: 540px;
    height: 864px;
    min-height: 864px;
    margin: 0;
    transform: translate(-50%, -50%) scale(var(--mobile-branch-menu-scale));
    transform-origin: center;
  }
  #app.is-branch-home > .stage { width: 100%; }
  .branch-option { min-height: 320px; }
  .branch-art { height: 210px; }
}


/* BRK root branch artwork --------------------------------------------------- */
.branch-art-brk {
  padding: clamp(8px, 1vw, 14px);
}

.branch-art-brk img {
  width: min(590px, 96%);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,.88))
    brightness(.98);
  transition:
    filter .28s ease,
    transform .28s ease;
}

/* Red inner selection frame, matching the IRP focused wordmark language. */
.branch-art-brk::after {
  content: '';
  position: absolute;
  inset: 6% 4%;
  pointer-events: none;
  opacity: 0;
  border: 3px solid rgba(176, 8, 4, .94);
  box-shadow:
    0 0 0 2px rgba(52, 0, 0, .9),
    0 0 13px rgba(213, 19, 8, .72),
    inset 0 0 18px rgba(156, 9, 3, .18);
  transition: opacity .25s ease;
}

.branch-option.is-focused .branch-art-brk::after {
  opacity: 1;
}

.branch-option.is-focused .branch-art-brk img {
  transform: scale(1.01);
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,.9))
    brightness(1.04);
}


/* Match BRK branch switching behavior to IRP ------------------------------- */
.branch-art-brk {
  position: relative;
}

.branch-art-brk img {
  position: absolute;
  width: min(590px, 96%);
  max-height: 100%;
  object-fit: contain;
  transition:
    opacity .36s ease,
    transform .36s ease,
    filter .36s ease;
}

.brk-branch-paper {
  opacity: .98;
  transform: scale(1);
}

.brk-branch-transparent {
  opacity: 0;
  transform: scale(.985);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.9));
}

.branch-option.is-focused .brk-branch-paper,
.branch-option:hover .brk-branch-paper,
.branch-option:focus-visible .brk-branch-paper {
  opacity: 0;
  transform: scale(1.015);
}

.branch-option.is-focused .brk-branch-transparent,
.branch-option:hover .brk-branch-transparent,
.branch-option:focus-visible .brk-branch-transparent {
  opacity: 1;
  transform: scale(1);
}

/* The artwork itself now swaps like IRP, so don't add an extra BRK-only
   inner red rectangle on top of it. */
.branch-art-brk::after {
  display: none;
}


/* Branch artwork alignment fix --------------------------------------------- */
/* All idle/selected logo layers share the exact same center point. */
.branch-art-brk img,
.branch-art-irp img {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  object-position: center;
}

/* Keep the crossfade from changing placement. */
.brk-branch-paper,
.brk-branch-transparent,
.irp-branch-white,
.irp-branch-red {
  transform-origin: center center;
}

/* With the redundant title removed, give the retained subtext a little air. */
.branch-subcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 17px;
}


/* Branch selector — transparent cards -------------------------------------- */
/* Let the red forest remain visible behind both branch choices while keeping
   the card outlines and selected BRK border treatment. */
.branch-option {
  background: transparent;
  filter: none;
}

.branch-option::after {
  display: none;
}

.branch-option.is-focused {
  background: transparent;
  box-shadow:
    0 0 12px rgba(197, 32, 7, .68),
    0 0 0 1px rgba(95, 0, 0, .58);
}


/* Branch selector — inkroller cards, static outline only ------------------- */
.branch-option {
  background: transparent;
  filter: none;
}

/* Separate layer so the inkroller can sit at 70% without fading the logos. */
.branch-option::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/ui/inkroller_1a.png') center / 100% 100% no-repeat;
  opacity: .40;
  box-shadow: none;
}

/* Keep the static focused outline/glow, but disable the animated BRK flow. */
.branch-option > .row-border-flow,
.branch-option.is-focused > .row-border-flow {
  display: none !important;
  animation: none !important;
}


/* Branch selector — no card border or glow --------------------------------- */
.branch-option,
.branch-option.is-focused,
.branch-option:hover,
.branch-option:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* Branch selector — the inkroller panel is static -------------------------
   It used to fade to zero on hover and focus, which read as the card's
   background vanishing out from under the artwork. It now holds its strength
   in every state. */
.branch-option::after {
  transition: opacity .38s ease;
}


/* Branch selector — selected visuals only while actively interacting -------- */

/* A remembered JS focus alone must still render the idle state. */
.branch-option.is-focused:not(:hover) .brk-branch-paper {
  opacity: .98;
  transform: scale(1);
}
.branch-option.is-focused:not(:hover) .brk-branch-transparent {
  opacity: 0;
  transform: scale(.985);
}

.branch-option.is-focused:not(:hover) .irp-branch-white {
  opacity: .94;
  transform: scale(1);
}
.branch-option.is-focused:not(:hover) .irp-branch-red {
  opacity: 0;
  transform: scale(.985);
}

.branch-option.is-focused:not(:hover)::after {
  opacity: .40;
}

/* Mouse hover, native keyboard focus, or transient arrow-key navigation
   reveals the selected artwork. The inkroller panel stays put. */
.branch-option:hover::after,
.branch-option:focus-visible::after,
.branch-gate.is-keyboard-active .branch-option.is-focused::after {
  opacity: .40;
}

.branch-option:hover .brk-branch-paper,
.branch-option:focus-visible .brk-branch-paper,
.branch-gate.is-keyboard-active .branch-option.is-focused .brk-branch-paper {
  opacity: 0;
  transform: scale(1.015);
}

.branch-option:hover .brk-branch-transparent,
.branch-option:focus-visible .brk-branch-transparent,
.branch-gate.is-keyboard-active .branch-option.is-focused .brk-branch-transparent {
  opacity: 1;
  transform: scale(1);
}

.branch-option:hover .irp-branch-white,
.branch-option:focus-visible .irp-branch-white,
.branch-gate.is-keyboard-active .branch-option.is-focused .irp-branch-white {
  opacity: 0;
  transform: scale(1.015);
}

.branch-option:hover .irp-branch-red,
.branch-option:focus-visible .irp-branch-red,
.branch-gate.is-keyboard-active .branch-option.is-focused .irp-branch-red {
  opacity: 1;
  transform: scale(1);
}


/* Site-wide red forest background ------------------------------------------ */
.world-bg {
  background:
    linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .52)),
    url('assets/backgrounds/red_forest.png') center 52% / cover no-repeat;
}

.world-bg::before {
  background:
    radial-gradient(ellipse at 57% 48%, transparent 18%, rgba(0, 0, 0, .20) 54%, rgba(0, 0, 0, .72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .76), rgba(0, 0, 0, .18) 31%, rgba(0, 0, 0, .22) 72%, rgba(0, 0, 0, .68));
}

.vignette {
  box-shadow:
    inset 0 0 210px 76px rgba(0, 0, 0, .76),
    inset 0 -110px 170px rgba(0, 0, 0, .66),
    inset 0 85px 135px rgba(0, 0, 0, .38);
}

/* The destination selector remains the brighter presentation of the same
   artwork; branch menus and documentation use the darker treatment above. */
body.is-selector-active .world-bg {
  background:
    linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .18)),
    url('assets/backgrounds/red_forest.png') center 52% / cover no-repeat;
}

body.is-selector-active .world-bg::before {
  background:
    radial-gradient(ellipse at 50% 48%, transparent 24%, rgba(0, 0, 0, .13) 58%, rgba(0, 0, 0, .72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .56), transparent 24%, transparent 76%, rgba(0, 0, 0, .56));
}

body.is-selector-active .vignette {
  box-shadow:
    inset 0 0 200px 72px rgba(0, 0, 0, .72),
    inset 0 -110px 170px rgba(0, 0, 0, .72),
    inset 0 90px 130px rgba(0, 0, 0, .34);
}

/* BRK branch header — mirror the actual in-game BRK Menu ------------------ */
.brk-branch-shell .shell-header {
  position: relative;
  flex: 0 0 186px;
  min-height: 186px;
  padding: 6px 0 0;
  display: block;
  text-align: center;
}

/* The website branch name is already established before entering the menu;
   BRK Menu itself leads with the framed menu title. */
.brk-branch-shell .shell-eyebrow,
.brk-branch-shell .header-rule {
  display: none;
}

.brk-branch-shell .shell-title {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 472px;
  height: 164px;
  margin: 0;
  padding: 10px 48px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) translateY(6px);
  background: url('assets/ui/menu_border.png') center / 100% 100% no-repeat;
  font-family: 'Redemption', Georgia, serif;
  font-size: 46px;
  line-height: .94;
  letter-spacing: .9px;
  color: rgba(255,255,255,.96);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.95);
}

@media (max-width: 1180px) {
  .brk-branch-shell .shell-title {
    width: 472px;
    height: 164px;
  }
}


/* Resource documentation menu — same anatomy as BRK Main Menu -------------- */
#app.is-resource-route .resource-sections.brk-resource-shell {
  position: relative;
  width: 540px;
  height: auto;
  min-height: 0;
  padding: 0 54px;
  display: flex;
  flex-direction: column;
  align-self: start;
  overflow: visible;
  isolation: isolate;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.58));
}

/* Same framed title treatment as the BRK root menu. */
.resource-menu-header {
  position: relative;
  flex: 0 0 186px;
  min-height: 186px;
  padding: 6px 0 0;
  display: block;
  text-align: center;
}

.resource-menu-header .resource-wordmark {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 472px;
  height: 164px;
  margin: 0;
  padding: 10px 48px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) translateY(6px);
  background: url('assets/ui/menu_border.png') center / 100% 100% no-repeat;
  font-family: 'Redemption', Georgia, serif;
  font-size: 42px;
  line-height: .94;
  letter-spacing: .9px;
  color: rgba(255,255,255,.96);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.95);
}

/* Match the root menu row geometry. */
#app.is-resource-route .resource-sections .stage-list {
  width: 432px;
  margin: 0;
  gap: 6px;
}

#app.is-resource-route .resource-sections .section-row {
  width: 432px;
  min-height: 52px;
  height: 52px;
  padding: 0 14px 0 16px;
  font-size: 19px;
}

.resource-menu-filler {
  flex: 1;
  min-height: 26px;
}

.resource-menu-footer {
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  border-top: 1px solid rgba(229,221,204,.48);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 11px;
  color: rgba(201,191,173,.68);
  text-transform: uppercase;
  letter-spacing: .7px;
}

/* The old resource-only back label/divider is intentionally gone. */
.brk-resource-shell .back-link,
.brk-resource-shell > .stage-divider.compact {
  display: none !important;
}

@media (max-width: 1180px) {
  #app.is-resource-route .resource-sections.brk-resource-shell {
    width: 430px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .resource-menu-header .resource-wordmark {
    width: 408px;
  }

  #app.is-resource-route .resource-sections .stage-list,
  #app.is-resource-route .resource-sections .section-row {
    width: 374px;
  }
}

@media (max-width: 820px) {
  #app.is-resource-route .resource-sections.brk-resource-shell {
    width: 100%;
    height: auto;
    min-height: 720px;
    padding: 0 28px;
  }

  .resource-menu-header .resource-wordmark {
    width: min(472px, calc(100vw - 80px));
  }

  #app.is-resource-route .resource-sections .stage-list,
  #app.is-resource-route .resource-sections .section-row {
    width: 100%;
  }

  /* BRK split information pages (docs, troubleshooting, support, and
     individual resource menus) show the centered menu first on mobile, then
     swap to the selected content instead of stacking both panels. */
  #app.is-resource-route
    .view[data-mobile-screen="menu"]
    .docs-columns {
    min-height: calc(100svh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #app.is-resource-route
    .view[data-mobile-screen="menu"]
    .resource-sections {
    box-sizing: border-box;
    width: min(540px, calc(100vw - 24px));
    height: min(720px, calc(100svh - 56px));
    min-height: min(620px, calc(100svh - 56px));
    margin: 0 auto;
  }

  #app.is-resource-route
    .view[data-mobile-screen]
    .resource-menu-header .resource-wordmark {
    font-size: clamp(30px, 9.4vw, 38px);
  }

  #app.is-resource-route
    .view[data-mobile-screen="menu"]
    .doc-canvas,
  #app.is-resource-route
    .view[data-mobile-screen="content"]
    .resource-sections {
    display: none;
  }

  #app.is-resource-route
    .view[data-mobile-screen="content"]
    .doc-canvas {
    display: block;
    width: 100%;
  }
}


/* ==========================================================================
   Paragon RP main menu consistency
   ========================================================================== */

/* Match BRK Main Menu's ornate framed header. The old emblem, eyebrow and
   divider remain in the markup only for compatibility and are hidden here. */
.irp-branch-shell .shell-header {
  position: relative;
  flex: 0 0 186px;
  min-height: 186px;
  padding: 6px 0 0;
  display: block;
  text-align: center;
}

.irp-branch-shell .irp-shell-emblem,
.irp-branch-shell .shell-eyebrow,
.irp-branch-shell .header-rule {
  display: none;
}

.irp-branch-shell .shell-title {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 472px;
  height: 164px;
  margin: 0;
  padding: 10px 48px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) translateY(6px);
  background: url('assets/ui/menu_border.png') center / 100% 100% no-repeat;
  font-family: 'Redemption', Georgia, serif;
  font-size: 44px;
  line-height: .94;
  letter-spacing: .9px;
  color: rgba(255,255,255,.96);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.95);
}

/* The IRP menu has more entries, so use the tighter Horse Dev / Dev Tool
   rhythm while preserving BRK row visuals. */
#irp-menu {
  gap: 4px;
}

#irp-menu .menu-row {
  height: 48px;
}

/* Logical player-facing groups:
   Basics | World/Work | Reference/Community | Rules */
#irp-menu .menu-row:nth-child(4),
#irp-menu .menu-row:nth-child(6),
#irp-menu .menu-row:nth-child(8) {
  margin-top: 12px;
}

@media (min-width: 821px) and (max-height: 960px) {
  .irp-branch-shell .shell-header {
    flex-basis: 152px;
    min-height: 152px;
  }

  .irp-branch-shell .shell-title {
    width: 444px;
    height: 138px;
    padding-top: 6px;
    font-size: 39px;
  }

  #irp-menu {
    gap: 3px;
  }

  #irp-menu .menu-row {
    height: 42px;
  }

  #irp-menu .menu-row:nth-child(4),
  #irp-menu .menu-row:nth-child(6),
  #irp-menu .menu-row:nth-child(8) {
    margin-top: 7px;
  }

  .irp-branch-shell .shell-footer {
    min-height: 44px;
  }
}

@media (min-width: 821px) and (max-height: 800px) {
  .irp-branch-shell .shell-header {
    flex-basis: 120px;
    min-height: 120px;
  }

  .irp-branch-shell .shell-title {
    width: 410px;
    height: 108px;
    font-size: 35px;
  }

  #irp-menu {
    gap: 2px;
  }

  #irp-menu .menu-row {
    height: 34px;
  }

  #irp-menu .menu-row:nth-child(4),
  #irp-menu .menu-row:nth-child(6),
  #irp-menu .menu-row:nth-child(8) {
    margin-top: 4px;
  }

  .irp-branch-shell .shell-footer {
    min-height: 38px;
  }
}

/* Plain IRP branch-home logo: no emblem and no white paper backing. */
.irp-home-lockup {
  flex-direction: row;
  gap: 0;
}

.irp-home-logo {
  position: relative;
  z-index: 1;
  width: min(820px, 82%);
  max-height: 58vh;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.78));
}

@media (max-width: 1180px) {
  .irp-branch-shell .shell-title {
    width: 472px;
    height: 164px;
  }
}

@media (max-width: 820px) {
  .irp-branch-shell .shell-title {
    width: min(472px, calc(100vw - 80px));
  }

  .irp-home-logo {
    width: min(92vw, 760px);
  }
}


/* Avoid duplicate control prompts when a left-side menu already owns them. */
#app.is-branch-home ~ .global-controls,
#app.is-resource-route ~ .global-controls,
#app.is-games-route ~ .global-controls {
  display: none;
}


/* ==========================================================================
   BRK resource page grouping
   ========================================================================== */

.resource-menu-spacer {
  flex: 0 0 14px;
  height: 14px;
  pointer-events: none;
}

.doc-content {
  position: relative;
  min-height: 420px;
}

.terms-document-frame {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  background: rgba(0, 0, 0, .72);
}
.terms-document-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 18px solid transparent;
  border-image: url('assets/ui/interaction_frame.png') 38 / 18px stretch;
}
.terms-document-text {
  position: relative;
  z-index: 1;
  margin: 0;
  white-space: pre-wrap;
  font: clamp(14px, 1.2vw, 17px)/1.62 'RDRLino', Georgia, serif;
  color: rgba(224, 214, 195, .9);
}

.doc-config-checker-suggestion {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: block;
  background: transparent;
  filter: none;
}

.doc-config-checker-actions {
  width: min(720px, 100%);
  display: grid;
  gap: 8px;
}

.doc-config-checker-action.brk-link-card {
  width: 100%;
  margin: 0;
  text-align: left;
  cursor: pointer;
}

.doc-support-stack {
  width: 100%;
  margin: 0;
  padding-top: 8px;
}

.doc-support-action.brk-link-card {
  width: min(720px, 100%);
  margin: 0;
  text-align: left;
  cursor: pointer;
}

.doc-integration-card-grid {
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.doc-integration-action.brk-link-card {
  width: 100%;
  margin: 0;
  text-align: left;
  cursor: pointer;
}

.doc-useful-links {
  margin-top: 20px;
}

.doc-useful-link-grid {
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.doc-useful-link-action.brk-link-card {
  width: 100%;
  margin: 0;
  text-align: left;
  cursor: pointer;
}

.troubleshooting-reference-crawler.site-crawl-footer {
  width: 100%;
  margin-top: 34px;
  padding-inline: 10px;
  transform: none;
}

.troubleshooting-reference-crawler .site-crawl-footer-group > p {
  margin-bottom: 7px;
}

@media (max-width: 720px) {
  .doc-config-checker-suggestion {
    width: 100%;
  }

  .doc-config-checker-actions {
    width: 100%;
  }

}

/* ==========================================================================
   BRK RP Dice — interactive product preview
   Reuses the resource's actual sprite sheets, timings and outcome treatment.
   ========================================================================== */

.rp-dice-preview {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 0 10px;
}

.rp-dice-roll {
  position: relative;
  width: min(460px, 100%);
  min-height: 390px;
  padding: 24px 20px 20px;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(237, 229, 212, .96);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rp-dice-roll:hover .rp-dice-sprite {
  filter:
    drop-shadow(0 7px 14px rgba(0, 0, 0, .88))
    drop-shadow(0 0 10px rgba(207, 157, 62, .34));
}

.rp-dice-label {
  font-family: 'Redemption', Georgia, serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(214, 204, 186, .82);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .85);
}

.rp-dice-face {
  position: relative;
  width: 196px;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp-dice-glow {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 157, 62, .55) 0%, rgba(0,0,0,0) 68%);
  opacity: .68;
  filter: blur(2px);
  transition: background .25s ease, opacity .25s ease;
}

.rp-dice-glow.state-success {
  background: radial-gradient(circle, rgba(240, 232, 214, .42) 0%, rgba(0,0,0,0) 68%);
}

.rp-dice-glow.state-fail {
  background: radial-gradient(circle, rgba(177, 8, 8, .55) 0%, rgba(0,0,0,0) 68%);
}

.rp-dice-glow.state-crit-success {
  background: radial-gradient(circle, rgba(207, 157, 62, .55) 0%, rgba(0,0,0,0) 72%);
  opacity: 1;
}

.rp-dice-glow.state-crit-fail {
  background: radial-gradient(circle, rgba(177, 8, 8, .55) 0%, rgba(0,0,0,0) 72%);
  opacity: 1;
}

.rp-dice-sprite {
  position: relative;
  z-index: 2;
  width: 256px;
  height: 256px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  transform: scale(.72);
  transform-origin: center center;
  filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .88));
  opacity: 1;
  transition: filter .2s ease, transform .2s ease;
  image-rendering: auto;
  pointer-events: none;
}

.rp-dice-sprite.is-rolling {
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, .9))
    drop-shadow(0 0 8px rgba(207, 157, 62, .28));
}

.rp-dice-sprite.is-settling {
  transform: scale(.74);
}

.rp-dice-sprite.settle-success {
  filter:
    drop-shadow(0 7px 14px rgba(0, 0, 0, .88))
    drop-shadow(0 0 14px rgba(240, 232, 214, .42));
}

.rp-dice-sprite.settle-fail {
  filter:
    drop-shadow(0 7px 14px rgba(0, 0, 0, .88))
    drop-shadow(0 0 14px rgba(177, 8, 8, .55));
}

.rp-dice-sprite.settle-crit-success {
  transform: scale(.76);
  filter:
    drop-shadow(0 7px 14px rgba(0, 0, 0, .88))
    drop-shadow(0 0 22px rgba(207, 157, 62, .55));
}

.rp-dice-sprite.settle-crit-fail {
  transform: scale(.76);
  filter:
    drop-shadow(0 7px 14px rgba(0, 0, 0, .9))
    drop-shadow(0 0 22px rgba(177, 8, 8, .55));
}

.rp-dice-result {
  min-height: 24px;
  font-family: 'Redemption', Georgia, serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(240, 232, 214, .95);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity .25s ease;
}

.rp-dice-result.idle {
  opacity: .48;
  color: rgba(214, 204, 186, .82);
}

.rp-dice-result.visible {
  opacity: 1;
}

.rp-dice-result.success { color: rgba(240, 232, 214, .98); }
.rp-dice-result.fail { color: rgba(177, 8, 8, .98); }
.rp-dice-result.crit-success { color: rgba(207, 157, 62, .98); }
.rp-dice-result.crit-fail { color: rgba(90, 4, 4, .98); }

@media (max-width: 820px) {
  .rp-dice-preview {
    min-height: 430px;
  }

  .rp-dice-roll {
    min-height: 350px;
  }
}


/* ==========================================================================
   BRK custom cursor
   ========================================================================== */

/* Supplied RDR-style cursor, reduced to a practical browser size.
   Hotspot is centered on the upper point of the icon. */
html,
body,
button,
a,
.nav-target,
[role="button"] {
  cursor: url('assets/ui/cursor_brk.png') 3 3, default !important;
}

/* ==========================================================================
   Page heading consistency
   ========================================================================== */

/* Page titles stand on their own throughout the site:
   TITLE
   ornate arrow divider
   No eyebrow/kicker/breadcrumb line above the heading. */
.stage-kicker,
.doc-breadcrumb {
  display: none !important;
}

.stage-heading h1 {
  margin-top: 0;
}

.doc-canvas h1 {
  margin-top: 0;
  text-align: center;
}

.doc-canvas > .stage-divider {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   BRK shared asset chrome
   inkroller_1a     = large rectangular panel backgrounds (shell / doc canvas)
   hud_location_bg2 = rectangular panels (toolbars, cards, code, callouts, versions)
   black_square     = actual squares (swatches, gift slots, square frames)
   selection_box_bg_1d / selected = compact buttons + inline code chips
   Doc headers = centered title + arrow_border (see .doc-canvas rules above)
   ========================================================================== */

/*
  Overlapping inkroller stack: each tile steps up by less than its height so
  worn edges overlap slightly and read as one continuous stroke.
*/
.shell-ink,
.doc-ink,
.resource-sections,
#app.is-resource-route .resource-sections.brk-resource-shell,
.review-menu-shell {
  background-image:
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png'),
    url('assets/ui/inkroller_1a.png');
  background-size: 100% var(--ink-tile-h);
  background-repeat: no-repeat;
  background-position:
    0 0,
    0 calc(var(--ink-step) * 1),
    0 calc(var(--ink-step) * 2),
    0 calc(var(--ink-step) * 3),
    0 calc(var(--ink-step) * 4),
    0 calc(var(--ink-step) * 5),
    0 calc(var(--ink-step) * 6),
    0 calc(var(--ink-step) * 7),
    0 calc(var(--ink-step) * 8),
    0 calc(var(--ink-step) * 9),
    0 calc(var(--ink-step) * 10),
    0 calc(var(--ink-step) * 11),
    0 calc(var(--ink-step) * 12),
    0 calc(var(--ink-step) * 13);
}

.brk-hud-panel,
.chat-preview-toolbar-block,
.notify-frame-controls,
.notify-control-group {
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
}

.brk-hud-panel::before,
.chat-preview-toolbar-block::before,
.notify-frame-controls::before,
.notify-control-group::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  opacity: .7;
}

.brk-hud-panel > *,
.chat-preview-toolbar-block > *,
.notify-frame-controls > *,
.notify-control-group > * {
  position: relative;
  z-index: 1;
}

.brk-hud-panel,
.chat-preview-toolbar-block,
.notify-frame-controls,
.notify-control-group {
  padding: 15px 17px;
}

/* Compact rectangular action buttons used across interactive previews + docs. */
.brk-asset-button,
.chat-theme-button,
.chat-preview-activate,
.chat-color-control,
.notify-demo-button,
.doc-link-button,
.review-submit-button,
.review-delete-button,
.review-refresh-button,
.review-captcha-cancel {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  outline: 0;
  background:
    url('assets/ui/selection_box_bg_1d.png')
    center / 100% 100% no-repeat;
  box-shadow: none;
  cursor: pointer;
}

.brk-asset-button:hover,
.brk-asset-button.is-focused,
.chat-theme-button:hover,
.chat-preview-activate:hover,
.chat-color-control:hover,
.chat-color-control:focus-within,
.notify-demo-button:hover,
.notify-demo-button.is-focused,
.doc-link-button:hover,
.doc-link-button.is-focused,
.review-submit-button:hover,
.review-submit-button.is-focused,
.review-delete-button:hover,
.review-delete-button.is-focused,
.review-refresh-button:hover,
.review-refresh-button.is-focused,
.review-captcha-cancel:hover,
.review-captcha-cancel.is-focused {
  background:
    url('assets/ui/selected.png')
    center / 100% 100% no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(239, 231, 211, .96);
}

/* Active theme is remembered without keeping the selected chrome. */
.chat-theme-button.is-active:not(:hover) {
  color: rgba(239, 231, 211, .96);
}

/* Animated border for buttons that do not carry a .row-border-flow child. */
.notify-demo-button:hover::after,
.notify-demo-button.is-focused::after,
.doc-link-button:hover::after,
.doc-link-button.is-focused::after,
.brk-asset-button:hover::after,
.brk-asset-button.is-focused::after,
.review-submit-button:hover::after,
.review-submit-button.is-focused::after,
.review-delete-button:hover::after,
.review-delete-button.is-focused::after,
.review-refresh-button:hover::after,
.review-refresh-button.is-focused::after,
.review-captcha-cancel:hover::after,
.review-captcha-cancel.is-focused::after,
.review-menu-writing-space:focus-within::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation:
    menu-border-flow
    var(--browse-duration)
    linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--browse-opacity);
}

/* Kill old CSS-drawn focus fills on shared compact buttons. */
.notify-demo-button.is-focused::before,
.notify-demo-button:hover::before,
.doc-link-button.is-focused::before,
.doc-link-button:hover::before {
  content: none !important;
  display: none !important;
}

.doc-link-button.is-disabled,
.doc-link-button:disabled {
  opacity: .38;
  color: rgba(181, 172, 156, .62);
  cursor: default !important;
  pointer-events: none;
}

.doc-link-button.is-disabled span:last-child,
.doc-link-button:disabled span:last-child {
  color: rgba(163, 154, 140, .52);
  font-size: 9px;
  letter-spacing: .8px;
}

.brk-menu-unreleased-links {
  flex-wrap: wrap;
}

.brk-menu-unreleased-links .doc-link-button {
  min-width: 210px;
}

.showcase-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

.notify-demo-button:disabled,
.notify-demo-button.is-disabled,
.minigame-site-start.is-disabled {
  opacity: .42;
  cursor: default;
}

.notify-demo-button:disabled:hover,
.notify-demo-button.is-disabled:hover,
.minigame-site-start.is-disabled:hover,
.notify-demo-button:disabled.is-focused,
.notify-demo-button.is-disabled.is-focused,
.minigame-site-start.is-disabled.is-focused {
  background:
    url('assets/ui/selection_box_bg_1d.png')
    center / 100% 100% no-repeat !important;
  color: inherit;
}

.notify-demo-button:disabled:hover::after,
.notify-demo-button.is-disabled:hover::after,
.minigame-site-start.is-disabled:hover::after,
.notify-demo-button:disabled.is-focused::after,
.notify-demo-button.is-disabled.is-focused::after,
.minigame-site-start.is-disabled.is-focused::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================================
   BRK documentation content
   ========================================================================== */

.doc-stack {
  width: min(940px, 100%);
  margin: 0 auto;
  padding: 8px 0 30px;
  font-family: 'RDRLino', Georgia, serif;
  color: rgba(224, 216, 198, .88);
  line-height: 1.62;
}

.doc-stack p {
  margin: 0 0 16px;
  font-size: 15px;
}

.doc-stack code,
.doc-code {
  font-family: Consolas, 'Courier New', monospace;
}

/* Inline code chips — grey button asset (selection_box_bg_1d) @ 90%.
   Tables stay clean: no chip chrome on config-file rows. */
.doc-stack code {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  color: rgba(244, 233, 208, .94);
  user-select: text;
  cursor: text;
}

.doc-stack code::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url('assets/ui/selection_box_bg_1d.png')
    center / 100% 100% no-repeat;
  opacity: .9;
}

.doc-table code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.doc-table code::before {
  content: none;
  display: none;
}

.doc-lead {
  max-width: 850px;
  margin-bottom: 18px !important;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 19px !important;
  line-height: 1.5;
  color: rgba(238, 229, 211, .92);
}

.doc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 30px;
}

.doc-badge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 3px 10px;
  border: 0;
  background: transparent;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(226, 215, 193, .72);
}

.doc-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  opacity: .9;
}

.doc-section {
  margin: 34px 0 0;
}

.doc-section > h2,
.doc-trouble > h3 {
  margin: 0 0 13px;
  font-family: 'Redemption', Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  color: rgba(244, 235, 216, .96);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .88);
}

.doc-section > h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(221, 211, 190, .18);
  font-size: 28px;
  line-height: 1;
  letter-spacing: .5px;
}

.doc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Content panels — hud panel black, stretched full-bleed @ 90%. */
.doc-card {
  position: relative;
  isolation: isolate;
  min-height: 126px;
  padding: 17px 18px;
  border: 0;
  background: transparent;
}

.doc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  opacity: .9;
}

.doc-card > * {
  position: relative;
  z-index: 1;
}

.doc-card h3 {
  margin: 0 0 8px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: rgba(243, 234, 215, .94);
}

.doc-card p {
  margin: 0;
  font-size: 14px;
  color: rgba(208, 198, 180, .78);
}

.doc-callout,
.doc-note,
.doc-warning {
  position: relative;
  isolation: isolate;
  margin: 18px 0;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid rgba(193, 137, 34, .72);
  background: transparent;
  color: rgba(228, 218, 198, .86);
}

.doc-callout::before,
.doc-note::before,
.doc-warning::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Keep the HUD panel behind text nodes and child elements. */
  z-index: -1;
  pointer-events: none;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  opacity: .9;
}

.doc-callout > *,
.doc-note > *,
.doc-warning > * {
  position: relative;
  z-index: 1;
}

.doc-warning {
  border-left-color: rgba(177, 8, 8, .90);
}

.doc-note {
  border-left-color: rgba(226, 216, 195, .34);
}

.doc-muted {
  color: rgba(198, 188, 170, .62);
}

/* Code blocks — black HUD panel, full width (not the grey button bar). */
.doc-code {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  margin: 16px 0 20px;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(240, 231, 213, .90);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
  user-select: text;
  cursor: text;
}

.doc-code::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  opacity: .9;
}

.doc-code > code {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.doc-code > code::before {
  content: none;
  display: none;
}

/* Config/file tables — no panel background; rows + text only. */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0 22px;
  border: 0;
  background: transparent;
  font-size: 14px;
}

.doc-table th,
.doc-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(224, 214, 193, .10);
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  width: 28%;
  font-family: 'RDRLedger', Georgia, serif;
  font-weight: 400;
  color: rgba(239, 229, 210, .91);
}

.doc-table thead th {
  width: auto;
  background: rgba(0, 0, 0, .18);
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(219, 207, 185, .72);
}

.doc-table td {
  color: rgba(207, 198, 180, .79);
}

.doc-table-compact th,
.doc-table-compact td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.doc-steps {
  margin: 14px 0 20px;
  padding-left: 24px;
}

.doc-steps li {
  margin: 8px 0;
  padding-left: 5px;
  font-size: 15px;
  color: rgba(215, 205, 187, .82);
}

.doc-media-placeholder {
  min-height: 180px;
  padding: 34px;
  border: 1px dashed rgba(226, 215, 193, .24);
  background: rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.doc-media-placeholder strong {
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 19px;
  color: rgba(237, 228, 209, .90);
}

.doc-media-placeholder span {
  max-width: 660px;
  font-size: 13px;
  color: rgba(194, 185, 168, .58);
}

.doc-compat-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  border: 1px solid rgba(224, 214, 193, .10);
  background: rgba(0, 0, 0, .20);
}

.doc-compat-row strong {
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 20px;
  color: rgba(241, 231, 211, .94);
}

.doc-compat-row p {
  margin: 5px 0 0;
}

.doc-status {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid rgba(224, 214, 193, .16);
  background: rgba(0, 0, 0, .28);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.doc-status.required {
  color: rgba(229, 190, 112, .90);
}

.doc-status.optional {
  color: rgba(210, 201, 184, .66);
}

.doc-trouble {
  position: relative;
  isolation: isolate;
  margin: 0 0 10px;
  padding: 17px 18px;
  border: 0;
  background: transparent;
}

.doc-trouble::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  opacity: .9;
}

.doc-trouble > * {
  position: relative;
  z-index: 1;
}

.doc-trouble > h3 {
  margin-bottom: 7px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 19px;
  text-transform: none;
}

.doc-trouble p {
  margin: 0;
  font-size: 14px;
}

.doc-version {
  position: relative;
  isolation: isolate;
  margin: 0 0 14px;
  padding: 17px 18px;
  border: 0;
  background: transparent;
}

.doc-version::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  opacity: .7;
}

.doc-version > * {
  position: relative;
  z-index: 1;
}

.doc-version header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(224, 214, 193, .10);
}

.doc-version header strong {
  font-family: 'Redemption', Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  color: rgba(244, 234, 214, .95);
}

.doc-version header span {
  padding: 2px 7px;
  border: 1px solid rgba(193, 137, 34, .34);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(217, 181, 111, .82);
}

.doc-version ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.doc-version li {
  margin: 6px 0;
  color: rgba(207, 197, 179, .79);
  font-size: 14px;
}

@media (max-width: 900px) {
  .doc-card-grid {
    grid-template-columns: 1fr;
  }

  .doc-table {
    font-size: 13px;
  }

  .doc-compat-row {
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .doc-stack {
    padding-left: 2px;
    padding-right: 2px;
  }

  .doc-lead {
    font-size: 17px !important;
  }

  .doc-table {
    display: block;
    overflow-x: auto;
  }
}


/* ==========================================================================
   Resource menu purchase block
   ========================================================================== */

.resource-menu-label {
  width: 432px;
  height: 24px;
  display: flex;
  align-items: flex-end;
  padding: 0 4px 5px;
  margin: 0 0 1px;
  border-bottom: 1px solid rgba(229, 221, 204, .34);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(207, 196, 176, .58);
  text-shadow: 0 2px 2px rgba(0,0,0,.9);
}

#resource-section-nav [data-external] {
  color: rgba(226, 216, 197, .88);
}

#resource-section-nav [data-external] > span:nth-child(2) {
  color: rgba(214, 170, 84, .82);
  text-transform: uppercase;
  font-size: 14px;
}

/* ==========================================================================
   Resource left-menu selection crop fix
   ========================================================================== */

/* Resource navigation is physically a BRK left-side menu. Never let the
   catalogue-wide continuous slice calculations drive these rows. */
#resource-section-nav[data-root-menu="true"] .nav-target.is-focused::before {
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url('assets/ui/brk_selected_bg.jpg')
    center var(--brk-bg-y, 35%) / 100% auto no-repeat !important;
}

@media (max-width: 1180px) {
  .resource-menu-label {
    width: 374px;
  }
}

@media (max-width: 820px) {
  .resource-menu-label {
    width: 100%;
  }
}


/* ==========================================================================
   Resource catalogue wordmarks
   ========================================================================== */

/* Matching supplied BRK wordmarks replace plain text only where an asset
   exists. Their layout sits above the existing continuous selected-image
   slice, so catalogue scrolling/slice math remains unchanged. */
.resource-card .card-wordmark {
  height: 54px;
  display: flex;
  align-items: center;
  overflow: visible;
}

.resource-card .card-wordmark img {
  display: block;
  width: auto;
  max-width: min(92%, 390px);
  max-height: 43px;
  object-fit: contain;
  object-position: left center;
  opacity: .72;
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.92))
    drop-shadow(0 0 1px rgba(0,0,0,.75));
  transition: opacity .18s ease, filter .18s ease;
  pointer-events: none;
}

/* Selection stays white rather than reverting to the original red source art. */
.resource-card.is-focused .card-wordmark img {
  opacity: 1;
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.98))
    drop-shadow(0 0 3px rgba(255,255,255,.12));
}

/* Extra-wide marks such as Resourceful Ranger should never crowd the arrow. */
.resource-card .card-wordmark {
  max-width: calc(100% - 12px);
}

@media (max-width: 1180px) {
  .resource-card .card-wordmark img {
    max-width: 86%;
    max-height: 40px;
  }
}


/* All current BRK catalogue entries now use the same wordmark image treatment. */
.resource-card .card-wordmark img {
  image-rendering: auto;
}


/* ==========================================================================
   Shared resource-page links / showcase / dependencies
   ========================================================================== */

.doc-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 24px;
}

.doc-link-button {
  min-width: 170px;
  min-height: 46px;
  padding: 0 13px 0 15px;
  color: rgba(218, 208, 189, .80);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 16px;
  text-align: left;
}

.doc-link-button.is-focused,
.doc-link-button:hover {
  color: rgba(255, 250, 238, .99);
}

.doc-link-button.purchase > span:first-child {
  color: rgba(224, 184, 104, .94);
}

.showcase-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(224, 214, 193, .14);
  background: rgba(0, 0, 0, .62);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .34);
}

.showcase-lightbox-close {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 12;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(237, 229, 212, .92);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .95);
}

.showcase-lightbox-close:hover,
.showcase-lightbox-close:focus-visible,
.showcase-lightbox-close.is-focused {
  color: var(--browse-highlight);
  outline: none;
}

.showcase-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.showcase-local-note {
  margin-top: 10px !important;
  font-size: 12px !important;
}

.showcase-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, .45fr);
  gap: 12px;
  align-items: start;
}

.showcase-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(224, 214, 193, .12);
  background: rgba(0, 0, 0, .28);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .30);
}

.showcase-shot-wide {
  grid-row: span 2;
}

.showcase-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 610px;
  object-fit: contain;
  background: rgba(0, 0, 0, .32);
}

.showcase-shot figcaption {
  padding: 8px 11px 10px;
  border-top: 1px solid rgba(224, 214, 193, .08);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(201, 191, 173, .58);
}

.dependency-grid {
  width: 100%;
  margin: 8px 0 20px;
}

.dependency-card {
  min-height: 132px;
  grid-template-columns: minmax(0, 1fr) 30px;
  grid-template-rows: auto 1fr;
  align-content: center;
  row-gap: 5px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.dependency-card .card-wordmark {
  grid-column: 1;
  grid-row: 1;
}

.dependency-card .card-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.dependency-status {
  position: absolute;
  z-index: 6;
  top: 8px;
  right: 11px;
  padding: 2px 7px;
  border: 1px solid rgba(226, 216, 195, .18);
  background: rgba(0, 0, 0, .56);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dependency-status.required {
  color: rgba(229, 190, 112, .94);
}

.dependency-status.optional {
  color: rgba(211, 201, 183, .68);
}

.dependency-status.soon {
  color: rgba(196, 186, 169, .58);
}

.dependency-card.is-static {
  cursor: default;
  pointer-events: none;
}

.dependency-card.is-static .card-arrow {
  opacity: .28;
}

.dependency-description {
  position: relative;
  z-index: 4;
  grid-column: 1;
  grid-row: 2;
  padding-right: 20px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .25px;
  color: rgba(196, 186, 169, .60);
}

.dependency-card.is-focused .dependency-description {
  color: rgba(231, 221, 202, .84);
}

/* BRK Chat troubleshooting uses the same ink-panel language as the rest of
   the resource instead of falling back to a generic documentation table. */
.chat-troubleshooting-stack {
  width: min(980px, 100%);
}

.chat-troubleshooting-lead {
  max-width: 920px;
  margin-bottom: 22px !important;
}

.chat-troubleshooting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.chat-troubleshooting-grid.is-stacked {
  grid-template-columns: 1fr;
}

.chat-troubleshooting-card.brk-hud-panel {
  min-height: 150px;
  padding: 20px 22px 18px;
}

.chat-troubleshooting-card-wide {
  grid-column: 1 / -1;
}

.chat-troubleshooting-label {
  display: block;
  margin-bottom: 5px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(190, 56, 43, .86);
}

.chat-troubleshooting-card h2 {
  margin: 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(19px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1;
  color: rgba(241, 232, 214, .96);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
}

.chat-troubleshooting-divider {
  width: 100%;
  height: 4px;
  margin: 9px 0 10px;
  background: url('assets/ui/divider_line.png') center / 100% 4px no-repeat;
  opacity: .34;
}

.chat-troubleshooting-card p {
  margin: 0;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(211, 201, 182, .78);
}

.chat-troubleshooting-detail-link.doc-link-button {
  width: min(250px, 100%);
  min-height: 38px;
  margin-top: 12px;
  padding: 7px 12px;
  font-size: 11px;
}

.chat-troubleshooting-card p + p {
  margin-top: 8px;
}

.chat-troubleshooting-card .doc-list {
  margin: 8px 0 0;
  padding-left: 1.15em;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(211, 201, 182, .78);
}

.chat-troubleshooting-card .doc-list li {
  margin: 0 0 4px;
}

.staff-rules-overview-card.chat-troubleshooting-card.brk-hud-panel {
  min-height: 0;
  padding: 16px 20px 14px;
}

.staff-rules-overview-card.chat-troubleshooting-card h2 {
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: .95;
  text-align: center;
}

.staff-rules-overview-card.chat-troubleshooting-card p {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.35;
  text-align: center;
}

.staff-rules-overview-card .chat-troubleshooting-divider {
  height: 1px;
  margin: 8px 0 10px;
  background: var(--browse-primary);
  opacity: .92;
}

.staff-rules-overview-stack.chat-troubleshooting-stack,
.staff-rules-overview-grid {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.staff-rules-org {
  display: flex;
  justify-content: center;
  margin: 36px 0 16px;
  padding: 12px 8px 8px;
}

.staff-rules-org ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
}

.staff-rules-org > ul {
  width: max-content;
  max-width: 100%;
  padding-left: 0;
}

.staff-rules-org li {
  position: relative;
  font-size: clamp(16px, 1.55vw, 22px);
  padding: 12px 0 12px 22px;
}

.staff-rules-org > ul > li {
  padding-left: 0;
}

.staff-rules-org li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--browse-primary);
  opacity: .72;
}

.staff-rules-org li::after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(12px + 0.575em);
  width: 22px;
  height: 1px;
  background: var(--browse-primary);
  opacity: .72;
}

.staff-rules-org > ul > li::before,
.staff-rules-org > ul > li::after {
  content: none;
}

.staff-rules-org li:last-child::before {
  height: calc(12px + 0.575em);
  bottom: auto;
}

.staff-rules-org-label {
  display: inline-block;
  font-family: 'Redemption', Georgia, serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--browse-accent);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
}

.staff-rules-org-split {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 72px;
  position: relative;
  margin-top: 4px;
  padding-top: 22px;
}

.staff-rules-org-split::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 22px;
  background: var(--browse-primary);
  opacity: .72;
}

.staff-rules-org-split::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--browse-primary);
  opacity: .72;
}

.staff-rules-org-split-col {
  position: relative;
  padding-left: 0;
}

.staff-rules-org-split-col::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 0;
  width: 1px;
  height: 22px;
  background: var(--browse-primary);
  opacity: .72;
}

.staff-rules-org-split-col > li {
  padding-left: 0;
}

.staff-rules-org-split-col > li::before,
.staff-rules-org-split-col > li::after {
  content: none;
}

.staff-rules-department-card.chat-troubleshooting-card.brk-hud-panel {
  min-height: 0;
  padding: 16px 20px 14px;
}

.staff-rules-department-card.chat-troubleshooting-card h2 {
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: .95;
  text-align: left;
}

.staff-rules-department-card.chat-troubleshooting-card p,
.staff-rules-department-card .doc-list {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.35;
  text-align: left;
}

.staff-rules-department-card .chat-troubleshooting-divider {
  height: 1px;
  margin: 8px 0 10px;
  background: var(--browse-primary);
  opacity: .92;
}

.staff-rules-department-stack.chat-troubleshooting-stack {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.staff-rules-department-grid {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.staff-rules-department-stack .chat-troubleshooting-lead {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(16px, 1.45vw, 20px) !important;
  text-align: center;
}

.staff-rules-standards-grid {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.staff-rules-department-grid + .staff-rules-standards-grid {
  margin-top: 72px;
}

.staff-rules-standards-panel.chat-troubleshooting-card.brk-hud-panel {
  min-height: 0;
  padding: 28px 32px 24px;
}

.staff-rules-standards-panel.chat-troubleshooting-card h2 {
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: .95;
  text-align: center;
}

.staff-rules-standards-panel.chat-troubleshooting-card p {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.35;
  text-align: center;
}

.staff-rules-standards-panel .chat-troubleshooting-divider {
  height: 1px;
  margin: 8px auto 10px;
  background: var(--browse-primary);
  opacity: .92;
}

.staff-rules-standards-item + .staff-rules-standards-item {
  margin-top: 28px;
}

.staff-rules-standards-item p + p {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .chat-troubleshooting-grid {
    grid-template-columns: 1fr;
  }

  .staff-rules-department-grid {
    width: 100%;
    max-width: 100%;
  }

  .chat-troubleshooting-card-wide {
    grid-column: auto;
  }
}

@media (max-width: 860px) {
  .showcase-gallery {
    grid-template-columns: 1fr;
  }

  .showcase-shot-wide {
    grid-row: auto;
  }
}

@media (max-width: 620px) {
  .doc-link-button {
    width: 100%;
  }
}


/* ==========================================================================
   Screenshot showcase carousel
   Center = full preview, sides = smaller previous/next previews.
   ========================================================================== */

.showcase-carousel-shell {
  position: relative;
  width: 100%;
  min-height: 370px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

/* One screenshot: keep the exact grid the resource pages use so the frame is
   the same size as theirs. The arrow buttons are not rendered in this mode, so
   BOTH the carousel and its single item must be placed in column 2 explicitly
   - otherwise the carousel auto-places into the 34px arrow column and collapses
   to a sliver. */
.showcase-carousel-shell.is-single .showcase-carousel {
  grid-column: 2;
}

.showcase-carousel-shell.is-single .showcase-carousel-item {
  grid-column: 2;
}

.showcase-carousel {
  position: relative;
  height: 350px;
  display: grid;
  grid-template-columns: .72fr 1.28fr .72fr;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.showcase-carousel-item {
  position: relative;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(224, 214, 194, .72);
  opacity: .52;
  transform: scale(.82);
  transition:
    transform .28s ease,
    opacity .28s ease,
    filter .28s ease;
}

.showcase-carousel-item.previous {
  transform-origin: right center;
}

.showcase-carousel-item.next {
  transform-origin: left center;
}

.showcase-carousel-item.is-current {
  z-index: 3;
  opacity: 1;
  transform: scale(1);
}

.showcase-carousel-frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(224, 214, 193, .10);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .36);
}

.showcase-carousel-frame img {
  display: block;
  width: 100%;
  height: 285px;
  object-fit: contain;
  background: rgba(0, 0, 0, .35);
}

.showcase-carousel-item:not(.is-current) .showcase-carousel-frame img {
  height: 220px;
}

.showcase-carousel-item.is-current .showcase-carousel-frame {
  border: 2px solid var(--browse-primary);
  box-shadow:
    inset 0 0 0 1px rgba(95,0,0,.48),
    0 0 8px var(--browse-highlight);
}

/* Reuse the BRK animated selection border on the centered screenshot. */
.showcase-carousel-item.is-current .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: 2px solid var(--browse-primary);
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 3px var(--browse-highlight));
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .showcase-carousel-item.is-current .row-border-flow {
    padding: 2px;
    border: 0;
    background: conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
    animation: menu-border-flow var(--browse-duration) linear infinite;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

.showcase-carousel-caption {
  display: block;
  min-height: 32px;
  padding: 8px 8px 0;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(198, 188, 170, .56);
}

.showcase-carousel-item.is-current .showcase-carousel-caption {
  color: rgba(231, 221, 202, .84);
}

.showcase-carousel-control {
  width: 34px;
  height: 64px;
  border: 0;
  background: transparent;
  color: rgba(224, 214, 194, .48);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 38px;
  line-height: 1;
}

.showcase-carousel-control:hover {
  color: rgba(247, 237, 218, .94);
  text-shadow: 0 0 8px rgba(197, 32, 7, .58);
}

/* ==========================================================================
   Screenshot lightbox / zoom
   ========================================================================== */

body.showcase-lightbox-open {
  overflow: hidden;
}

.showcase-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(3px);
}

.showcase-lightbox-stage {
  width: min(1500px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.showcase-lightbox-image-button {
  max-width: 100%;
  max-height: calc(92vh - 54px);
  border: 0;
  padding: 0;
  background: transparent;
}

.showcase-lightbox-image-frame {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 54px);
  overflow: auto;
  border: 2px solid var(--browse-primary);
  box-shadow:
    0 0 10px rgba(197, 32, 7, .68),
    0 20px 48px rgba(0, 0, 0, .58);
}

.showcase-lightbox-image-frame img {
  display: block;
  max-width: 88vw;
  max-height: calc(92vh - 60px);
  width: auto;
  height: auto;
  object-fit: contain;
  transition: max-width .2s ease, max-height .2s ease;
}


.showcase-lightbox-image-frame .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: 2px solid var(--browse-primary);
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 3px var(--browse-highlight));
}

.showcase-lightbox-footer {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 8px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 9px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(211, 201, 184, .62);
}

/* ==========================================================================
   Local-file YouTube fallback
   ========================================================================== */

.showcase-video-local {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(224, 214, 193, .14);
  padding: 0;
  background: rgba(0, 0, 0, .52);
}

.showcase-video-local img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(.48) saturate(.82);
}

.showcase-video-local-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 26px;
  background: rgba(0, 0, 0, .22);
  color: rgba(242, 233, 214, .94);
  text-align: center;
}

.showcase-play-mark {
  width: 66px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(242, 233, 214, .78);
  border-radius: 50%;
  padding-left: 5px;
  font-size: 28px;
}

.showcase-video-local-overlay strong {
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}

.showcase-video-local-overlay small {
  font-family: 'RDRLino', Georgia, serif;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(213, 202, 183, .58);
}

.showcase-video-local:hover .showcase-video-local-overlay {
  background: rgba(72, 7, 3, .28);
}

@media (max-width: 860px) {
  .showcase-carousel-shell {
    min-height: 310px;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
  }

  .showcase-carousel {
    height: 290px;
    grid-template-columns: .5fr 1.5fr .5fr;
    gap: 8px;
  }

  .showcase-carousel-frame img {
    height: 235px;
  }

  .showcase-carousel-item:not(.is-current) .showcase-carousel-frame img {
    height: 160px;
  }
}


/* ==========================================================================
   BRK Notify interactive preview
   ========================================================================== */

.notify-preview-page {
  width: min(1040px, 100%);
}

.notify-playground {
  margin-top: 20px;
}

.notify-playground-screen {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(226, 216, 195, .12);
  background:
    radial-gradient(ellipse at 70% 46%, rgba(107, 9, 5, .14), transparent 36%),
    linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.48)),
    url('assets/backgrounds/red_forest.png') center 52% / cover no-repeat;
  box-shadow:
    inset 0 0 110px rgba(0,0,0,.52),
    0 14px 28px rgba(0,0,0,.34);
}

.notify-playground-watermark {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(218, 207, 186, .26);
  text-transform: uppercase;
}

.notify-demo-area {
  position: absolute;
  top: 30px;
  left: 28px;
  width: min(430px, calc(100% - 56px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notify-demo-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notify-demo-toast {
  --notify-demo-accent: rgba(236, 233, 233, .98);
  position: relative;
  min-height: 68px;
  padding: 5px 12px;
  display: flex;
  align-items: stretch;
  overflow: visible;
  background: url('assets/ui/inkroller_1a.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}

.notify-demo-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.notify-demo-toast.leaving {
  opacity: 0;
  transform: translateX(-24px);
}

.notify-demo-toast[data-type='success'] {
  --notify-demo-accent: rgba(177, 133, 0, .98);
}

.notify-demo-toast[data-type='warning'] {
  --notify-demo-accent: rgba(255, 218, 32, .98);
}

.notify-demo-toast[data-type='error'] {
  --notify-demo-accent: rgba(201, 0, 0, .98);
}

.notify-demo-accent {
  width: 6px;
  flex: 0 0 6px;
  background: var(--notify-demo-accent);
}

.notify-demo-image-wrap {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  align-self: center;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-2px);
}

.notify-demo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.78));
}

.notify-demo-body {
  min-width: 0;
  flex: 1;
  padding: 12px 18px 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.notify-demo-title {
  font-family: 'RDRLino', Georgia, serif;
  color: rgba(237, 229, 212, .96);
  font-size: 18px;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(0,0,0,.9);
}

.notify-demo-desc {
  font-family: 'RDRChalk', 'RDRLedger', Georgia, serif;
  color: rgba(201, 191, 173, .78);
  font-size: 14px;
  line-height: 1.3;
}

.notify-demo-loot {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: scale(.85);
}

.notify-demo-loot.show {
  animation: notify-demo-loot-in 260ms cubic-bezier(.34,1.56,.64,1) forwards;
}

.notify-demo-loot.leaving {
  opacity: 0;
  transform: scale(.92);
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}

@keyframes notify-demo-loot-in {
  0% { opacity: 0; transform: scale(.7) translateY(6px); }
  60% { opacity: 1; transform: scale(1.06) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.notify-demo-loot-icon-placeholder {
  position: relative;
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  border: 1px dashed rgba(218, 207, 185, .22);
  border-radius: 50%;
  background: rgba(0,0,0,.18);
}

.notify-demo-loot-icon-placeholder::after {
  content: 'IMG';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(215, 204, 184, .28);
}

.notify-demo-loot-copy {
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1.1;
}

.notify-demo-loot-label {
  font-family: 'RDRLino', Georgia, serif;
  color: rgba(237, 229, 212, .96);
  font-size: 18px;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
}

.notify-demo-loot-amount {
  font-family: 'RDRLino', Georgia, serif;
  color: rgba(207, 157, 62, .98);
  font-size: 17px;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
}

.notify-demo-announcement {
  position: absolute;
  top: 26px;
  left: 50%;
  width: min(640px, 72%);
  padding: 36px 48px 38px;
  transform: translate(-50%, -12px);
  text-align: center;
  background: url('assets/resources/notify/ui/hud_location_bg2.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  opacity: 0;
}

.notify-demo-announcement.show {
  animation: notify-demo-announce-in 320ms ease-out forwards;
}

.notify-demo-announcement.leaving {
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: opacity 260ms ease-in, transform 260ms ease-in;
}

@keyframes notify-demo-announce-in {
  0% { opacity: 0; transform: translate(-50%, -18px) scale(.97); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.notify-demo-announcement-title {
  font-family: 'Redemption', Georgia, serif;
  color: rgba(237, 229, 212, .96);
  font-size: 34px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 3px 3px rgba(0,0,0,.95);
}

.notify-demo-announcement-divider {
  width: 200px;
  height: 4px;
  margin: 8px auto;
  background: url('assets/ui/divider_line.png') center / 100% 4px no-repeat;
  opacity: .4;
}

.notify-demo-announcement-subtitle {
  font-family: 'RDRChalk', 'RDRLedger', Georgia, serif;
  color: rgba(201, 191, 173, .78);
  font-size: 18px;
}

.notify-playground-controls {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.notify-control-group {
  min-width: 0;
}

.notify-control-group > h3 {
  margin: 0 0 11px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 18px;
  font-weight: normal;
  color: rgba(240, 230, 210, .90);
}

.notify-control-group > p {
  margin: -4px 0 12px;
  font-size: 12px;
  color: rgba(195, 185, 168, .56);
}

.notify-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.notify-demo-button {
  min-height: 46px;
  padding: 0 11px 0 13px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  color: rgba(210, 200, 182, .72);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  text-align: left;
}

.notify-demo-button > span {
  position: relative;
  z-index: 4;
}

.notify-demo-button > span:last-child {
  font-size: 12px;
  color: rgba(209, 170, 92, .68);
  text-transform: uppercase;
}

.notify-demo-button.is-focused,
.notify-demo-button:hover {
  color: rgba(255,250,238,.99);
}

.notify-special-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.notify-demo-button-large {
  min-height: 54px;
  font-size: 18px;
}

.notify-loot-group {
  display: flex;
  flex-direction: column;
}

.notify-gift-button {
  --gift-tilt: 0deg;
  position: relative;
  flex: 1;
  min-height: 220px;
  border: 0;
  overflow: hidden;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 50% 44%, rgba(124, 10, 5, .16), transparent 42%),
    rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: rgba(237, 229, 212, .92);
}

.notify-gift-button:hover,
.notify-gift-button.is-focused {
  box-shadow:
    inset 0 0 0 2px rgba(95,1,1,.72),
    0 0 8px rgba(197,32,7,.36);
}

.notify-gift {
  position: relative;
  width: 94px;
  height: 94px;
  display: block;
  transform: rotate(var(--gift-tilt));
  transform-origin: center bottom;
}

.notify-gift-shadow {
  position: absolute;
  width: 110px;
  height: 18px;
  margin-top: 94px;
  border-radius: 50%;
  background: rgba(0,0,0,.44);
  filter: blur(4px);
}

.notify-gift-body {
  position: absolute;
  left: 11px;
  bottom: 4px;
  width: 72px;
  height: 64px;
  display: block;
  border: 2px solid rgba(210, 199, 177, .74);
  background:
    linear-gradient(90deg, transparent 42%, rgba(139, 8, 5, .92) 43% 57%, transparent 58%),
    linear-gradient(rgba(57, 3, 2, .92), rgba(19, 3, 2, .96));
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.48),
    0 6px 10px rgba(0,0,0,.44);
}

.notify-gift-lid {
  position: absolute;
  z-index: 3;
  left: 5px;
  top: 18px;
  width: 84px;
  height: 25px;
  display: block;
  border: 2px solid rgba(218, 207, 185, .82);
  background:
    linear-gradient(90deg, transparent 43%, rgba(139, 8, 5, .96) 44% 56%, transparent 57%),
    linear-gradient(rgba(72, 4, 3, .98), rgba(32, 3, 2, .98));
  box-shadow: 0 5px 8px rgba(0,0,0,.42);
  transform-origin: 18% 100%;
}

.notify-gift-bow {
  position: absolute;
  left: 50%;
  top: -15px;
  width: 42px;
  height: 22px;
  transform: translateX(-50%);
}

.notify-gift-bow i {
  position: absolute;
  top: 4px;
  width: 22px;
  height: 14px;
  border: 2px solid rgba(193, 137, 34, .88);
  border-radius: 70% 28% 70% 28%;
}

.notify-gift-bow i:first-child {
  right: 19px;
  transform: rotate(22deg);
}

.notify-gift-bow i:last-child {
  left: 19px;
  transform: scaleX(-1) rotate(22deg);
}

.notify-gift-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.notify-gift-copy strong {
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 17px;
  font-weight: normal;
  letter-spacing: .6px;
}

.notify-gift-copy small {
  font-family: 'RDRLino', Georgia, serif;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(198, 188, 170, .45);
}

.notify-gift-button.is-opening .notify-gift {
  animation: notify-gift-hit 390ms cubic-bezier(.2,.9,.3,1);
}

.notify-gift-button.is-opening .notify-gift-lid {
  animation: notify-gift-lid-pop 390ms cubic-bezier(.2,.9,.3,1);
}

@keyframes notify-gift-hit {
  0% { transform: rotate(var(--gift-tilt)) translateY(0) scale(1); }
  28% { transform: rotate(var(--gift-tilt)) translateY(5px) scale(1.08,.86); }
  58% { transform: rotate(var(--gift-tilt)) translateY(-8px) scale(.96,1.06); }
  100% { transform: rotate(var(--gift-tilt)) translateY(0) scale(1); }
}

@keyframes notify-gift-lid-pop {
  0% { transform: translateY(0) rotate(0); }
  34% { transform: translateY(-5px) rotate(-5deg); }
  58% { transform: translateY(-24px) rotate(-16deg); }
  100% { transform: translateY(0) rotate(0); }
}

.notify-gift-burst {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 43%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.notify-gift-burst i {
  --burst-angle: 0deg;
  --burst-distance: 34px;
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 10px;
  background: rgba(207, 157, 62, .82);
  transform-origin: 50% 50%;
  animation: notify-gift-particle 500ms ease-out forwards;
}

.notify-gift-burst i:nth-child(even) {
  background: rgba(201, 0, 0, .82);
}

@keyframes notify-gift-particle {
  0% {
    opacity: 1;
    transform: rotate(var(--burst-angle)) translateY(0) rotate(0);
  }
  100% {
    opacity: 0;
    transform:
      rotate(var(--burst-angle))
      translateY(calc(var(--burst-distance) * -1))
      rotate(160deg);
  }
}

@media (max-width: 900px) {
  .notify-playground-controls {
    grid-template-columns: 1fr;
  }

  .notify-special-controls {
    grid-column: auto;
  }

  .notify-demo-announcement {
    width: 88%;
  }
}

@media (max-width: 620px) {
  .notify-control-grid,
  .notify-special-controls {
    grid-template-columns: 1fr;
  }

  .notify-playground-screen {
    min-height: 610px;
  }

  .notify-demo-area {
    left: 14px;
    width: calc(100% - 28px);
  }
}


/* ==========================================================================
   Notify loot rarity demo
   ========================================================================== */

.notify-rarity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: -2px 0 12px;
}

.notify-rarity-legend span {
  padding: 3px 7px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,.20);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .7px;
  text-transform: uppercase;
  opacity: .72;
}

.notify-rarity-legend b {
  margin-left: 3px;
  font-weight: normal;
  opacity: .72;
}

.notify-rarity-legend .common { color: #d9d2c4; }
.notify-rarity-legend .uncommon { color: #9db586; }
.notify-rarity-legend .rare { color: #7699bd; }
.notify-rarity-legend .epic { color: #9b77b2; }
.notify-rarity-legend .legendary { color: #d69d36; }

.notify-demo-loot-stack {
  width: min(382px, 100%);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.notify-demo-loot-stack .notify-demo-loot {
  --loot-rarity-accent: #d9d2c4;
  position: relative;
  min-height: 74px;
  padding: 5px 14px 5px 7px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-24px) scale(.96);
  border-left: 4px solid var(--loot-rarity-accent);
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.035),
      rgba(0,0,0,.10) 42%
    ),
    url('assets/ui/inkroller_1a.png') center / 100% 100% no-repeat;
  filter:
    drop-shadow(0 5px 8px rgba(0,0,0,.52))
    drop-shadow(0 0 4px var(--loot-rarity-accent));
  transition:
    opacity 190ms ease-out,
    transform 220ms cubic-bezier(.2,.9,.3,1);
}

.notify-demo-loot-stack .notify-demo-loot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0,0,0,.30);
}

.notify-demo-loot-stack .notify-demo-loot.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.notify-demo-loot-stack .notify-demo-loot.leaving {
  opacity: 0;
  transform: translateX(-18px) scale(.95);
}

.notify-demo-loot-stack .notify-demo-loot.stack-hit {
  animation: notify-loot-stack-hit 250ms cubic-bezier(.2,.9,.3,1);
}

@keyframes notify-loot-stack-hit {
  0% { transform: scale(1); }
  42% { transform: scale(1.055); }
  100% { transform: scale(1); }
}

.notify-demo-loot-image-wrap {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notify-demo-loot-image {
  display: block;
  max-width: 68px;
  max-height: 68px;
  object-fit: contain;
  filter:
    drop-shadow(0 3px 4px rgba(0,0,0,.82))
    drop-shadow(0 0 4px var(--loot-rarity-accent));
}

.notify-demo-loot-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.notify-demo-loot-topline {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notify-demo-loot-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'RDRLino', Georgia, serif;
  color: rgba(237, 229, 212, .96);
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
}

.notify-demo-loot-rarity {
  font-family: 'RDRLino', Georgia, serif;
  color: var(--loot-rarity-accent);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.notify-demo-loot-amount {
  align-self: center;
  font-family: 'RDRLino', Georgia, serif;
  color: var(--loot-rarity-accent);
  font-size: 18px;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
}

.notify-gift-button {
  --gift-rarity-accent: rgba(207, 157, 62, .84);
}

.notify-gift-button[data-rarity] {
  box-shadow:
    inset 0 0 0 2px var(--gift-rarity-accent),
    0 0 15px var(--gift-rarity-accent);
}

.notify-gift-burst i {
  background: var(--gift-rarity-accent);
}

.notify-gift-burst i:nth-child(even) {
  background: rgba(201, 0, 0, .82);
}

.notify-gift-button[data-rarity='rare'] .notify-gift,
.notify-gift-button[data-rarity='epic'] .notify-gift,
.notify-gift-button[data-rarity='legendary'] .notify-gift {
  filter:
    drop-shadow(0 0 8px var(--gift-rarity-accent))
    drop-shadow(0 6px 8px rgba(0,0,0,.52));
}

.notify-gift-button[data-rarity='legendary'] .notify-gift {
  animation:
    notify-gift-hit 390ms cubic-bezier(.2,.9,.3,1),
    notify-gift-legendary 390ms ease-out;
}

@keyframes notify-gift-legendary {
  0%, 100% { filter: drop-shadow(0 0 4px #d69d36); }
  50% { filter: drop-shadow(0 0 18px #d69d36); }
}


/* ==========================================================================
   Notify playground — sticky live player beside the controls
   ========================================================================== */

.notify-playground {
  display: grid;
  grid-template-columns: minmax(390px, 1.08fr) minmax(340px, .92fr);
  gap: 18px;
  align-items: start;
}

.notify-playground-screen {
  position: sticky;
  top: 18px;
  min-height: 550px;
  max-height: calc(100vh - 72px);
}

.notify-playground-controls {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.notify-special-controls {
  grid-column: auto;
}

.notify-loot-group {
  min-height: 230px;
}

/* Old rarity explanation is gone. */
.notify-rarity-legend {
  display: none !important;
}

/* ==========================================================================
   Loot Notify — match the real BRK Notify ticker
   ========================================================================== */

.notify-demo-area > .notify-demo-loot {
  --loot-rarity-accent: rgba(207, 157, 62, .98);
  position: relative;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: scale(.85);
}

.notify-demo-area > .notify-demo-loot.hidden {
  display: none;
}

.notify-demo-area > .notify-demo-loot.show {
  display: flex;
  animation:
    notify-real-loot-bounce-in
    260ms cubic-bezier(.34,1.56,.64,1) forwards;
}

.notify-demo-area > .notify-demo-loot.leaving {
  opacity: 0;
  transform: scale(.92);
  transition:
    opacity 150ms ease-in,
    transform 150ms ease-in;
}

@keyframes notify-real-loot-bounce-in {
  0% {
    opacity: 0;
    transform: scale(.7) translateY(6px);
  }
  60% {
    opacity: 1;
    transform: scale(1.06) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.notify-demo-loot-icon-wrap {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notify-demo-loot-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.85));
}

.notify-demo-loot-text-wrap {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.1;
}

.notify-demo-loot-label {
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(237,229,212,.96);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 17px;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow:
    0 2px 3px rgba(0,0,0,.95),
    0 0 6px rgba(0,0,0,.7);
}

.notify-demo-loot-amount {
  color: var(--loot-rarity-accent);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 14px;
  letter-spacing: .3px;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
}

.notify-demo-loot-status {
  color: var(--loot-rarity-accent);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
}

/* Rarity remains a surprise; it only appears on the result itself. */
.notify-demo-loot-status.hidden {
  display: none;
}

@media (max-width: 1040px) {
  .notify-playground {
    grid-template-columns: 1fr;
  }

  .notify-playground-screen {
    position: relative;
    top: auto;
    min-height: 520px;
    max-height: none;
  }
}


/* ==========================================================================
   Notify playground — single-screen console layout
   ========================================================================== */

.notify-console.notify-playground {
  display: block;
  width: 100%;
  margin-top: 18px;
}

.notify-console .notify-console-strip {
  width: 100%;
}

.notify-console-strip-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.notify-console-group {
  min-width: 0;
  padding: 10px 11px 11px;
  border: 1px solid rgba(224, 214, 193, .10);
  background: rgba(0,0,0,.16);
}

.notify-console-group > h3 {
  margin: 0 0 8px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 17px;
  font-weight: normal;
  color: rgba(240, 230, 210, .90);
}

.notify-control-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.notify-control-row::-webkit-scrollbar {
  display: none;
}

.notify-control-row .notify-demo-button {
  flex: 1 0 0;
  min-width: 108px;
  min-height: 42px;
  padding: 0 9px 0 10px;
  font-size: 14px;
}

.notify-console-stage-wrap {
  position: relative;
  width: 100%;
  padding-top: 84px;
}

.notify-console .notify-playground-screen {
  position: relative;
  top: auto;
  width: 100%;
  min-height: 500px;
  max-height: none;
  margin: 0;
}

.notify-present-dock {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 16px;
  height: 78px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.notify-present-label {
  align-self: flex-start;
  margin-top: 8px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  color: rgba(237, 229, 212, .72);
  text-transform: uppercase;
  white-space: nowrap;
}

.notify-gift-button.notify-gift-button-compact {
  flex: 0 0 auto;
  width: 150px;
  min-height: 76px;
  height: 76px;
  padding: 4px 10px;
  display: grid;
  grid-template-columns: 66px 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  gap: 5px;
  overflow: visible;
  background:
    radial-gradient(circle at 36% 50%, rgba(124,10,5,.16), transparent 46%),
    rgba(0,0,0,.18);
}

.notify-gift-button-compact .notify-gift {
  width: 62px;
  height: 62px;
  transform: rotate(var(--gift-tilt)) scale(.72);
  transform-origin: center center;
}

.notify-gift-button-compact .notify-gift-shadow {
  width: 68px;
  height: 12px;
  margin-top: 46px;
  margin-left: -68px;
}

.notify-gift-button-compact .notify-gift-copy {
  align-items: flex-start;
  justify-self: start;
  text-align: left;
}

.notify-gift-button-compact .notify-gift-copy strong {
  font-size: 14px;
}

.notify-gift-button-compact .notify-gift-copy small {
  font-size: 7px;
  letter-spacing: .8px;
}

.notify-console-strip-bottom {
  margin-top: 12px;
}

.notify-console-group-wide {
  width: 100%;
}

.notify-animal-row .notify-demo-button {
  flex: 0 0 116px;
  min-width: 116px;
}

.notify-console-actions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.notify-console-actions .notify-demo-button {
  min-height: 48px;
}

/* The old card-stack controls are not part of this layout. */
.notify-console .notify-playground-controls,
.notify-console .notify-control-group,
.notify-console .notify-loot-group,
.notify-console .notify-special-controls {
  all: unset;
}

/* Restore only the shared button behavior if an old selector had higher specificity. */
.notify-console .notify-demo-button {
  position: relative;
  overflow: hidden;
  border: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  background: url('assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat;
  color: rgba(210, 200, 182, .72);
  font-family: 'RDRLedger', Georgia, serif;
  text-align: left;
}

.notify-console .notify-gift-button {
  display: grid;
}

@media (max-width: 920px) {
  .notify-console-strip-top {
    grid-template-columns: 1fr;
  }

  .notify-console-stage-wrap {
    padding-top: 78px;
  }

  .notify-present-dock {
    right: 8px;
  }

  .notify-console .notify-playground-screen {
    min-height: 470px;
  }
}

@media (max-width: 650px) {
  .notify-present-label {
    display: none;
  }

  .notify-gift-button.notify-gift-button-compact {
    width: 130px;
  }

  .notify-console .notify-playground-screen {
    min-height: 520px;
  }

  .notify-console-actions {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   BRK Notify interactive showcase — display case layout
   ========================================================================== */

.notify-showcase.notify-playground {
  display: block;
  width: 100%;
  margin-top: 20px;
}

.notify-showcase-stage-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 66px;
}

.notify-showcase .notify-playground-screen {
  position: relative;
  top: auto;
  width: 100%;
  min-height: 520px;
  max-height: none;
  margin: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Present perched over the lower-right corner of the player.
   Fixed dimensions keep the artwork from being compressed.
   -------------------------------------------------------------------------- */

.notify-gift-perch {
  position: absolute;
  z-index: 20;
  right: 28px;
  bottom: -54px;
  width: 188px;
}

.notify-gift-perch-label {
  display: block;
  margin: 0 0 5px;
  padding-right: 7px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 14px;
  letter-spacing: .45px;
  color: rgba(235, 225, 206, .72);
  text-align: right;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,.9);
}

.notify-gift-button.notify-gift-float {
  position: relative;
  width: 188px;
  height: 176px;
  min-height: 176px;
  flex: none;
  padding: 12px 14px 10px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(220, 208, 185, .13);
  background:
    radial-gradient(circle at 50% 42%, rgba(119, 8, 4, .25), transparent 44%),
    linear-gradient(rgba(12,4,3,.78), rgba(0,0,0,.83)),
    url('assets/ui/inkroller_1a.png') center / 100% 100% no-repeat;
  box-shadow:
    0 15px 25px rgba(0,0,0,.52),
    inset 0 0 22px rgba(0,0,0,.24);
}

.notify-gift-button.notify-gift-float:hover,
.notify-gift-button.notify-gift-float.is-focused {
  border-color: var(--browse-primary);
  box-shadow:
    0 15px 25px rgba(0,0,0,.52),
    0 0 8px var(--browse-highlight),
    inset 0 0 0 1px rgba(95,0,0,.52);
}

.notify-gift-float .notify-gift {
  width: 94px;
  height: 94px;
  flex: 0 0 94px;
  transform: rotate(var(--gift-tilt));
  transform-origin: center bottom;
}

.notify-gift-float .notify-gift-shadow {
  width: 110px;
  height: 18px;
  margin-top: 86px;
}

.notify-gift-float .notify-gift-copy {
  position: relative;
  z-index: 6;
  align-items: center;
  text-align: center;
}

.notify-gift-float .notify-gift-copy strong {
  font-size: 16px;
}

.notify-gift-float .notify-gift-copy small {
  font-size: 8px;
}

/* --------------------------------------------------------------------------
   Mode selector
   -------------------------------------------------------------------------- */

.notify-mode-bar {
  position: relative;
  width: calc(100% - 216px);
  min-height: 48px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 0;
  margin: 0 0 8px;
}

.notify-mode-button {
  position: relative;
  min-width: 0;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid rgba(222, 211, 190, .09);
  padding: 0 9px;
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.22)),
    url('assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat;
  color: rgba(201, 191, 173, .62);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 14px;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.notify-mode-button:hover,
.notify-mode-button.is-focused {
  color: rgba(246, 237, 219, .94);
}

.notify-mode-button.is-selected {
  color: rgba(255, 248, 232, .99);
  border: 2px solid var(--browse-primary);
  box-shadow:
    inset 0 0 0 1px rgba(95,0,0,.52),
    0 0 7px var(--browse-highlight);
}

.notify-mode-button.is-selected::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.10)),
    url('assets/ui/brk_selected_bg.jpg') center 46% / 100% auto no-repeat;
}

.notify-mode-button {
  isolation: isolate;
}

.notify-mode-button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   One contextual action row at a time
   -------------------------------------------------------------------------- */

.notify-mode-panels {
  width: calc(100% - 216px);
  min-height: 52px;
}

.notify-context-row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.notify-context-row::-webkit-scrollbar {
  display: none;
}

.notify-context-row.hidden {
  display: none;
}

.notify-context-row .notify-demo-button {
  flex: 1 1 0;
  min-width: 122px;
  min-height: 48px;
}

.notify-context-row-animals .notify-demo-button {
  flex: 0 0 118px;
  min-width: 118px;
}

.notify-context-row-single .notify-demo-button {
  flex: 1 1 auto;
  width: 100%;
  min-width: 100%;
  min-height: 50px;
}

/* Neutralize earlier experimental console layout selectors. */
.notify-showcase .notify-console-strip,
.notify-showcase .notify-console-actions,
.notify-showcase .notify-present-dock {
  display: none !important;
}

@media (max-width: 900px) {
  .notify-showcase-stage-wrap {
    margin-bottom: 58px;
  }

  .notify-gift-perch {
    right: 16px;
    bottom: -48px;
    width: 168px;
  }

  .notify-gift-button.notify-gift-float {
    width: 168px;
    height: 158px;
    min-height: 158px;
  }

  .notify-mode-bar,
  .notify-mode-panels {
    width: calc(100% - 188px);
  }

  .notify-mode-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 660px) {
  .notify-showcase-stage-wrap {
    margin-bottom: 186px;
  }

  .notify-gift-perch {
    right: 50%;
    bottom: -174px;
    width: 176px;
    transform: translateX(50%);
  }

  .notify-gift-button.notify-gift-float {
    width: 176px;
    height: 164px;
    min-height: 164px;
  }

  .notify-gift-perch-label {
    text-align: center;
    padding-right: 0;
  }

  .notify-mode-bar,
  .notify-mode-panels {
    width: 100%;
  }

  .notify-mode-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================================
   BRK Notify interactive stage background
   Uses the original full-resolution supplied cave screenshot.
   ========================================================================== */

.notify-showcase .notify-playground-screen {
  background:
    radial-gradient(
      ellipse at 72% 26%,
      rgba(0, 0, 0, .03) 0%,
      rgba(0, 0, 0, .08) 34%,
      rgba(0, 0, 0, .32) 100%
    ),
    linear-gradient(
      rgba(0, 0, 0, .10),
      rgba(0, 0, 0, .26)
    ),
    url('assets/resources/notify/showcase/cave.jpg')
      center center / cover no-repeat;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, .34),
    0 14px 28px rgba(0, 0, 0, .34);
}


/* ==========================================================================
   BRK Notify — four-row frame layout
   Two control rows above, two below, cave stage in the middle.
   ========================================================================== */

.notify-frame-layout.notify-playground {
  display: block;
  width: 100%;
  margin-top: 0;
}

.notify-frame-controls {
  width: 100%;
  display: grid;
  gap: 7px;
}

.notify-frame-controls-top {
  margin-bottom: 12px;
}

.notify-frame-controls-bottom {
  margin-top: 66px;
}

.notify-frame-row {
  display: grid;
  gap: 7px;
  width: 100%;
}

.notify-frame-row-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.notify-frame-row-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.notify-frame-row .notify-demo-button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 11px 0 13px;
  font-size: 15px;
}

/* Keep the older BRK-style button proportions the user preferred. */
.notify-frame-row .notify-demo-button > span:last-child {
  font-size: 11px;
}

.notify-frame-stage-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 0;
}

/* Animated BRK border around the entire cave interaction stage. */
.notify-stage-flow-border {
  position: absolute;
  z-index: 12;
  inset: -2px;
  pointer-events: none;
  padding: 2px;
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .notify-stage-flow-border {
    inset: 0;
    padding: 0;
    background: transparent;
    border: 2px solid var(--browse-primary);
  }
}

/* Preserve the full-size present from the display-case pass. */
.notify-frame-layout .notify-gift-perch {
  right: 28px;
  bottom: -54px;
  width: 188px;
}

.notify-frame-layout .notify-gift-button.notify-gift-float {
  width: 188px;
  height: 176px;
  min-height: 176px;
}

/* The previous mode-tab/display-case controls are gone from this version. */
.notify-frame-layout .notify-mode-bar,
.notify-frame-layout .notify-mode-panels,
.notify-frame-layout .notify-context-row {
  display: none !important;
}

@media (max-width: 900px) {
  .notify-frame-row-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .notify-frame-controls-bottom {
    margin-top: 62px;
  }

  .notify-frame-layout .notify-gift-perch {
    right: 16px;
  }
}

@media (max-width: 680px) {
  .notify-frame-row-four,
  .notify-frame-row-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notify-frame-stage-wrap {
    margin-bottom: 188px;
  }

  .notify-frame-controls-bottom {
    margin-top: 0;
  }

  .notify-frame-layout .notify-gift-perch {
    right: 50%;
    bottom: -174px;
    transform: translateX(50%);
  }
}


/* ==========================================================================
   BRK Notify cave stage — current frame-layout selector
   ========================================================================== */

.notify-frame-layout .notify-playground-screen {
  background:
    radial-gradient(
      ellipse at 72% 26%,
      rgba(0, 0, 0, .03) 0%,
      rgba(0, 0, 0, .08) 34%,
      rgba(0, 0, 0, .32) 100%
    ),
    linear-gradient(
      rgba(0, 0, 0, .10),
      rgba(0, 0, 0, .26)
    ),
    url('assets/resources/notify/showcase/cave.jpg')
      center center / cover no-repeat;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, .34),
    0 14px 28px rgba(0, 0, 0, .34);
}


/* ==========================================================================
   BRK Notify loot button — inventory slot treatment
   ========================================================================== */

.notify-frame-layout .notify-inventory-gift-perch {
  right: 26px;
  bottom: -39px;
  width: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notify-inventory-gift-perch .notify-gift-perch-label {
  width: 100%;
  margin: 0 0 3px;
  padding: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: .55px;
  color: rgba(235, 225, 206, .76);
}

.notify-gift-button.notify-gift-inventory {
  --gift-tilt: 0deg;
  position: relative;
  width: 156px;
  height: 140px;
  min-height: 140px;
  flex: 0 0 140px;
  display: block;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.notify-gift-button.notify-gift-inventory:hover,
.notify-gift-button.notify-gift-inventory.is-focused {
  border: 0;
  box-shadow: none;
}

.notify-gift-slot-base,
.notify-gift-slot-border {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.notify-gift-slot-base {
  z-index: 0;
  background-image: url('assets/resources/notify/ui/black_square.png');
  opacity: .96;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.54));
}

.notify-gift-slot-border {
  z-index: 5;
  background-image: url('assets/resources/notify/ui/border_red_square.png');
  opacity: 0;
  transform: scale(.985);
  filter:
    drop-shadow(0 0 2px rgba(111,0,0,.86))
    drop-shadow(0 0 5px rgba(197,32,7,.42));
  transition: opacity 150ms ease, transform 150ms ease;
}

.notify-gift-inventory:hover .notify-gift-slot-border,
.notify-gift-inventory.is-focused .notify-gift-slot-border {
  opacity: .97;
  transform: scale(1);
}

/* Suppress the generic selection rectangle; the supplied red slot owns focus. */
.notify-gift-inventory.is-focused::before,
.notify-gift-inventory.is-focused::after,
.notify-gift-inventory:hover::before,
.notify-gift-inventory:hover::after {
  display: none !important;
}

.notify-gift-inventory .notify-gift-shadow {
  z-index: 1;
  left: 50%;
  bottom: 22px;
  width: 78px;
  height: 11px;
  margin: 0;
  transform: translateX(-50%);
  background: rgba(0,0,0,.64);
  filter: blur(5px);
}

/* White sketched inventory-style present. */
.notify-gift-inventory .notify-gift-sketch {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 78px;
  margin: 0;
  transform:
    translate(-50%, -48%)
    rotate(var(--gift-tilt));
  transform-origin: 50% 92%;
  filter:
    drop-shadow(0 2px 1px rgba(0,0,0,.88))
    drop-shadow(0 0 1px rgba(255,245,226,.28));
}

.notify-gift-inventory .notify-gift-body {
  left: 10px;
  bottom: 4px;
  width: 62px;
  height: 49px;
  border: 3px solid rgba(237, 232, 219, .92);
  border-radius: 1px;
  background:
    linear-gradient(
      90deg,
      transparent 42%,
      rgba(130, 8, 5, .92) 43% 57%,
      transparent 58%
    ),
    rgba(7, 6, 5, .10);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.38),
    1px 1px 0 rgba(236,230,216,.22);
  transform: rotate(-.7deg) skewX(-.8deg);
}

.notify-gift-inventory .notify-gift-lid {
  left: 5px;
  top: 13px;
  width: 72px;
  height: 22px;
  border: 3px solid rgba(244, 238, 224, .96);
  border-radius: 1px;
  background:
    linear-gradient(
      90deg,
      transparent 42%,
      rgba(130, 8, 5, .96) 43% 57%,
      transparent 58%
    ),
    rgba(7, 6, 5, .12);
  box-shadow:
    1px 2px 0 rgba(0,0,0,.72),
    inset 0 0 0 1px rgba(0,0,0,.28);
  transform-origin: 18% 100%;
}

.notify-gift-inventory .notify-gift-bow {
  left: 50%;
  top: -14px;
  width: 38px;
  height: 20px;
}

.notify-gift-inventory .notify-gift-bow i {
  top: 4px;
  width: 21px;
  height: 13px;
  border: 3px solid rgba(236, 228, 207, .94);
  border-radius: 72% 28% 68% 30%;
  box-shadow: 0 1px 0 rgba(0,0,0,.72);
}

.notify-gift-inventory .notify-gift-bow i:first-child {
  right: 17px;
}

.notify-gift-inventory .notify-gift-bow i:last-child {
  left: 17px;
}

/* Loose scratch strokes keep the icon from looking too clean/vector-perfect. */
.notify-gift-sketch-line {
  position: absolute;
  z-index: 6;
  display: block;
  height: 2px;
  background: rgba(244, 238, 225, .68);
  pointer-events: none;
}

.notify-gift-sketch-line.line-a {
  width: 23px;
  left: 17px;
  bottom: 17px;
  transform: rotate(-2deg);
}

.notify-gift-sketch-line.line-b {
  width: 15px;
  right: 13px;
  top: 26px;
  transform: rotate(2deg);
}

.notify-gift-underlabel {
  display: block;
  margin-top: 1px;
  font-family: 'RDRChalk', 'RDRLedger', Georgia, serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(236, 227, 208, .80);
  text-shadow: 0 2px 2px rgba(0,0,0,.92);
}

/* Keep the existing click behavior, but tune it for the smaller inventory icon. */
.notify-gift-inventory.is-opening .notify-gift-sketch {
  animation: notify-inventory-gift-hit 390ms cubic-bezier(.2,.9,.3,1);
}

.notify-gift-inventory.is-opening .notify-gift-lid {
  animation: notify-inventory-gift-lid-pop 390ms cubic-bezier(.2,.9,.3,1);
}

@keyframes notify-inventory-gift-hit {
  0% {
    transform: translate(-50%, -48%) rotate(var(--gift-tilt)) scale(1);
  }
  28% {
    transform: translate(-50%, -44%) rotate(var(--gift-tilt)) scale(1.08,.87);
  }
  58% {
    transform: translate(-50%, -56%) rotate(var(--gift-tilt)) scale(.96,1.06);
  }
  100% {
    transform: translate(-50%, -48%) rotate(var(--gift-tilt)) scale(1);
  }
}

@keyframes notify-inventory-gift-lid-pop {
  0% { transform: translateY(0) rotate(0); }
  34% { transform: translateY(-4px) rotate(-4deg); }
  58% { transform: translateY(-19px) rotate(-9deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* Rarity burst still originates from the clickable slot. */
.notify-gift-inventory .notify-gift-burst {
  z-index: 8;
}

@media (max-width: 900px) {
  .notify-frame-layout .notify-inventory-gift-perch {
    right: 14px;
    width: 148px;
  }

  .notify-gift-button.notify-gift-inventory {
    width: 148px;
    height: 133px;
    min-height: 133px;
    flex-basis: 133px;
  }
}

@media (max-width: 680px) {
  .notify-frame-layout .notify-inventory-gift-perch {
    right: 50%;
    bottom: -154px;
    width: 156px;
    transform: translateX(50%);
  }

  .notify-frame-stage-wrap {
    margin-bottom: 170px;
  }
}


/* ==========================================================================
   BRK Notify loot button — supplied closed/open inventory art
   ========================================================================== */

.notify-gift-sprite .notify-gift-art {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 108px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 82%;
  pointer-events: none;
}

.notify-gift-sprite .notify-gift-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(0 4px 4px rgba(0,0,0,.72))
    drop-shadow(0 0 1px rgba(241,234,219,.22));
  transition:
    opacity 80ms linear,
    transform 120ms ease-out;
}

.notify-gift-sprite .notify-gift-art-closed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.notify-gift-sprite .notify-gift-art-open {
  opacity: 0;
  transform: translateY(5px) scale(.94);
}

.notify-gift-sprite.is-opening .notify-gift-art {
  animation: notify-gift-sprite-hit 390ms cubic-bezier(.2,.9,.3,1);
}

.notify-gift-sprite.is-opening .notify-gift-art-closed {
  opacity: 0;
  transform: translateY(3px) scale(.96);
}

.notify-gift-sprite.is-opening .notify-gift-art-open {
  opacity: 1;
  animation: notify-gift-open-pop 390ms cubic-bezier(.2,.9,.3,1);
}

/* The supplied images now own the present artwork. */
.notify-gift-sprite .notify-gift-sketch,
.notify-gift-sprite .notify-gift-body,
.notify-gift-sprite .notify-gift-lid,
.notify-gift-sprite .notify-gift-bow,
.notify-gift-sprite .notify-gift-sketch-line {
  display: none !important;
}

.notify-gift-sprite .notify-gift-shadow {
  bottom: 20px;
  width: 82px;
  height: 12px;
  opacity: .72;
}

/* Make the particle burst originate from the open top of the box rather than
   from the center of the inventory slot. */
.notify-gift-sprite .notify-gift-burst {
  z-index: 9;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
}

@keyframes notify-gift-sprite-hit {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  24% {
    transform: translate(-50%, -46%) scale(1.05,.91);
  }
  52% {
    transform: translate(-50%, -55%) scale(.98,1.04);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes notify-gift-open-pop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(.90);
  }
  22% {
    opacity: 1;
    transform: translateY(-7px) scale(1.06);
  }
  64% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notify-gift-sprite:hover .notify-gift-art-closed,
.notify-gift-sprite.is-focused .notify-gift-art-closed {
  transform: translateY(-2px) scale(1.025);
}

.notify-gift-sprite.is-opening:hover .notify-gift-art-closed,
.notify-gift-sprite.is-opening.is-focused .notify-gift-art-closed {
  transform: translateY(3px) scale(.96);
}

@media (max-width: 900px) {
  .notify-gift-sprite .notify-gift-art {
    width: 102px;
    height: 102px;
  }
}


/* ==========================================================================
   BRK Notify loot button — clean cave overlay
   No inventory-slot backing; animated BRK border appears only on selection.
   ========================================================================== */

.notify-frame-layout .notify-inventory-gift-perch {
  right: 26px;
  bottom: -35px;
  width: 150px;
}

.notify-inventory-gift-perch .notify-gift-perch-label,
.notify-gift-sprite .notify-gift-slot-base,
.notify-gift-sprite .notify-gift-slot-border {
  display: none !important;
}

.notify-gift-button.notify-gift-inventory.notify-gift-sprite {
  position: relative;
  width: 150px;
  height: 132px;
  min-height: 132px;
  flex: 0 0 132px;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  isolation: isolate;
}

/* Remove any inherited box/card surface. */
.notify-gift-button.notify-gift-inventory.notify-gift-sprite:hover,
.notify-gift-button.notify-gift-inventory.notify-gift-sprite.is-focused {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.notify-gift-sprite .notify-gift-focus-border {
  position: absolute;
  z-index: 7;
  inset: 7px;
  display: block;
  padding: 2px;
  opacity: 0;
  pointer-events: none;
  border: 2px solid var(--browse-primary);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
  transition: opacity 120ms ease;
}

.notify-gift-sprite:hover .notify-gift-focus-border,
.notify-gift-sprite.is-focused .notify-gift-focus-border {
  opacity: var(--browse-opacity);
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .notify-gift-sprite .notify-gift-focus-border {
    border: 0;
    background: conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .notify-gift-sprite:hover .notify-gift-focus-border,
  .notify-gift-sprite.is-focused .notify-gift-focus-border {
    animation: menu-border-flow var(--browse-duration) linear infinite;
  }
}

/* Let the gift float naturally over the cave instead of sitting on a dark tile. */
.notify-gift-sprite .notify-gift-art {
  width: 112px;
  height: 112px;
}

.notify-gift-sprite .notify-gift-shadow {
  z-index: 1;
  bottom: 15px;
  width: 72px;
  height: 9px;
  opacity: .34;
  background: rgba(0,0,0,.42);
  filter: blur(5px);
}

.notify-inventory-gift-perch .notify-gift-underlabel {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(238, 229, 211, .82);
}

@media (max-width: 900px) {
  .notify-frame-layout .notify-inventory-gift-perch {
    right: 14px;
    width: 144px;
  }

  .notify-gift-button.notify-gift-inventory.notify-gift-sprite {
    width: 144px;
    height: 128px;
    min-height: 128px;
    flex-basis: 128px;
  }

  .notify-gift-sprite .notify-gift-art {
    width: 106px;
    height: 106px;
  }
}


/* ==========================================================================
   BRK Notify loot button — final focus/open states
   ========================================================================== */

/* Lift the gift so the art and OPEN label clear the stage edge more cleanly. */
.notify-frame-layout .notify-inventory-gift-perch {
  bottom: -18px;
}

/* Idle remains completely clean. */
.notify-gift-sprite .notify-gift-focus-border {
  opacity: 0;
  box-shadow: none;
}

/* Hover/focus uses the normal animated BRK border. */
.notify-gift-sprite:hover:not(.is-opening) .notify-gift-focus-border,
.notify-gift-sprite.is-focused:not(.is-opening) .notify-gift-focus-border {
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .notify-gift-sprite:hover:not(.is-opening) .notify-gift-focus-border,
  .notify-gift-sprite.is-focused:not(.is-opening) .notify-gift-focus-border {
    animation: menu-border-flow var(--browse-duration) linear infinite;
  }
}

/* Clicking/opening temporarily becomes a richer solid gold frame/glow.
   Once is-opening is removed, normal hover/focus styling resumes automatically. */
.notify-gift-sprite.is-opening .notify-gift-focus-border {
  opacity: 1;
  border: 2px solid rgba(214, 165, 62, .98);
  background: transparent;
  animation: none !important;
  -webkit-mask: none;
  mask: none;
  filter:
    drop-shadow(0 0 3px rgba(214, 165, 62, .96))
    drop-shadow(0 0 9px rgba(193, 137, 34, .72));
  box-shadow:
    inset 0 0 0 1px rgba(108, 64, 9, .45);
}

/* Watermark is intentionally removed from the markup; keep this defensive
   rule so older cached markup cannot show it behind the gift. */
.notify-frame-layout .notify-playground-watermark {
  display: none !important;
}

@media (max-width: 900px) {
  .notify-frame-layout .notify-inventory-gift-perch {
    bottom: -14px;
  }
}

@media (max-width: 680px) {
  .notify-frame-layout .notify-inventory-gift-perch {
    bottom: -146px;
  }
}


/* ==========================================================================
   BRK Notify loot results — responsive three-deep stack
   ========================================================================== */

.notify-live-loot-stack {
  width: min(330px, 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.notify-live-loot {
  --loot-rarity-accent: rgba(207, 157, 62, .98);
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateX(-18px) scale(.96);
  transition:
    opacity 130ms ease-out,
    transform 150ms cubic-bezier(.2,.9,.3,1);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.58));
}

.notify-live-loot.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.notify-live-loot.leaving {
  opacity: 0;
  transform: translateX(-14px) scale(.95);
}

.notify-live-loot.stack-hit {
  animation: notify-live-loot-hit 220ms cubic-bezier(.2,.9,.3,1);
}

@keyframes notify-live-loot-hit {
  0% { transform: translateX(0) scale(1); }
  44% { transform: translateX(0) scale(1.05); }
  100% { transform: translateX(0) scale(1); }
}

.notify-live-loot-icon-wrap {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notify-live-loot-icon {
  display: block;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  /* Keep item artwork clean: no rarity-colored fuzzy glow. */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.82));
}

.notify-live-loot-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 7px;
  row-gap: 1px;
}

.notify-live-loot-label {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'RDRLino', Georgia, serif;
  color: rgba(237,229,212,.96);
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-shadow:
    0 2px 3px rgba(0,0,0,.95),
    0 0 5px rgba(0,0,0,.72);
}

.notify-live-loot-amount {
  grid-column: 2;
  grid-row: 1;
  font-family: 'RDRLino', Georgia, serif;
  color: var(--loot-rarity-accent);
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
}

.notify-live-loot-status {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: 'RDRLino', Georgia, serif;
  color: var(--loot-rarity-accent);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
}

/* Old single-ticker element is no longer rendered. */
.notify-demo-area > .notify-demo-loot {
  display: none !important;
}


/* ==========================================================================
   BRK Minigames — interactive milk preview
   ========================================================================== */

.minigames-preview-page {
  width: min(1040px, 100%);
}

.minigame-milk-demo {
  width: 100%;
}

.minigame-milk-stage {
  position: relative;
  width: 100%;
  min-height: 690px;
  overflow: hidden;
  border: 1px solid rgba(224, 214, 193, .12);
  background: #080706;
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.42),
    0 14px 28px rgba(0,0,0,.34);
  isolation: isolate;
}

.minigame-milk-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 120px 34px rgba(0,0,0,.55),
    inset 0 -80px 110px rgba(0,0,0,.30);
}

.minigame-milk-backdrop {
  position: absolute;
  inset: -3%;
  z-index: 0;
  background:
    linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.30)),
    url('assets/resources/minigames/showcase/milk-wip.png')
      100% 50% / 220% auto no-repeat;
  filter: brightness(.72) saturate(.74) blur(1px);
  transform: scale(1.03);
}

.minigame-milk-prompt {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 330px;
  min-height: 610px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  color: #f4ecd8;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.98),
     1px -1px 0 rgba(0,0,0,.98),
    -1px  1px 0 rgba(0,0,0,.98),
     1px  1px 0 rgba(0,0,0,.98),
     0 3px 4px rgba(0,0,0,.95);
  pointer-events: none;
}

.minigame-milk-demo.is-active .minigame-milk-stage {
  cursor: none !important;
}

.minigame-milk-guide {
  position: relative;
  width: 100%;
  height: 510px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.minigame-guide-end {
  position: relative;
  z-index: 2;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.92));
}

.minigame-guide-udder {
  width: 250px;
  height: 155px;
  margin-bottom: -10px;
}

.minigame-guide-bucket {
  width: 205px;
  height: 126px;
  margin-top: -5px;
}

.minigame-guide-lane {
  position: relative;
  width: 150px;
  height: 250px;
  flex: 0 0 250px;
}

.minigame-guide-line {
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 3px;
  transform: translateX(-50%);
  background: rgba(247,242,225,.88);
  box-shadow:
    0 0 3px #000,
    0 0 7px rgba(255,255,255,.28);
}

.minigame-guide-target {
  position: absolute;
  left: 50%;
  width: 34px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(236,196,73,.92);
  box-shadow:
    0 0 10px rgba(236,196,73,.85),
    0 0 2px #000;
}

.minigame-guide-mouse-wrap {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 4;
  width: 72px;
  height: 82px;
  transform: translate(-50%, -50%);
  transition:
    top 30ms linear,
    left 30ms linear,
    filter 90ms ease;
}

.minigame-guide-mouse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #000);
}

.minigame-guide-direction-arrow {
  position: absolute;
  left: 50%;
  z-index: 6;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 2px #000);
}

.minigame-milk-demo.direction-down .minigame-guide-direction-arrow {
  bottom: -2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #f4edd8;
}

.minigame-milk-demo.direction-up .minigame-guide-direction-arrow {
  top: -2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #f4edd8;
}

.minigame-milk-demo.feedback-gold .minigame-guide-mouse-wrap {
  filter:
    drop-shadow(0 0 10px rgba(236,190,56,1))
    drop-shadow(0 0 3px #000);
}

.minigame-milk-demo.feedback-gold .minigame-guide-direction-arrow {
  border-top-color: #edbd38;
  border-bottom-color: #edbd38;
}

.minigame-milk-demo.feedback-red .minigame-guide-mouse-wrap {
  filter:
    drop-shadow(0 0 9px rgba(116,35,29,.95))
    drop-shadow(0 0 3px #000);
}

.minigame-milk-demo.feedback-red .minigame-guide-direction-arrow {
  border-top-color: #74231d;
  border-bottom-color: #74231d;
}

.minigame-guide-status {
  margin-top: 3px;
  font-family: 'RDRChalk', 'RDRLedger', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-align: center;
  text-transform: uppercase;
}

.minigame-guide-counters {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 7px;
  font-family: 'RDRChalk', 'RDRLedger', Georgia, serif;
  font-size: 11px;
  letter-spacing: .8px;
}

.minigame-milk-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 0;
  color: rgba(210,210,210,.84);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 10px;
  letter-spacing: .45px;
  text-shadow: 0 1px 2px rgba(0,0,0,.92);
}

.minigame-milk-cancel-key {
  min-width: 18px;
  width: 18px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 1px;
  color: rgba(35,35,35,.96);
  background: rgba(255,255,255,.88);
  font-family: Georgia, serif;
  font-size: 8px;
  line-height: 1;
}

.minigame-demo-result {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(2px);
  text-align: center;
}

.minigame-demo-result strong {
  font-family: 'Redemption', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 1px;
  color: rgba(244,235,216,.96);
  text-transform: uppercase;
  text-shadow: 0 3px 3px rgba(0,0,0,.95);
}

.minigame-demo-result > span {
  font-family: 'RDRChalk', 'RDRLedger', Georgia, serif;
  font-size: 14px;
  color: rgba(220,210,191,.76);
}

.minigame-restart-button {
  width: 220px;
  margin-top: 8px;
}

.minigame-preview-hint {
  margin-top: 10px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .35px;
  color: rgba(194,184,167,.58);
  text-align: center;
}

.minigames-showcase-shot {
  width: 100%;
}

.minigames-showcase-shot img {
  max-height: none;
}

@media (max-width: 900px) {
  .minigame-milk-stage {
    min-height: 620px;
  }

  .minigame-milk-prompt {
    transform: translate(-50%, -50%) scale(.88);
  }
}

@media (max-width: 620px) {
  .minigame-milk-stage {
    min-height: 540px;
  }

  .minigame-milk-prompt {
    transform: translate(-50%, -50%) scale(.72);
  }

  .minigame-preview-hint {
    padding: 0 12px;
  }
}


/* ==========================================================================
   BRK Minigames preview — browser interaction stabilization
   ========================================================================== */

.minigame-milk-stage {
  min-height: 620px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
}

.minigame-milk-stage img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* Use the supplied in-game screenshot as a normal stage backdrop rather than
   magnifying it to 220%, which made the preview feel broken/cropped. */
.minigame-milk-backdrop {
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,.24)),
    url('assets/resources/minigames/showcase/milk-wip.png')
      center center / cover no-repeat;
  filter: brightness(.70) saturate(.78);
  transform: none;
}

/* Match the actual BRK Minigames NUI geometry more closely. */
.minigame-milk-prompt {
  width: 330px;
  min-height: 610px;
}

.minigame-milk-guide {
  height: 510px;
}

.minigame-guide-lane {
  width: 150px;
  height: 250px;
  flex-basis: 250px;
}

.minigame-guide-mouse-wrap {
  /* The real NUI does not animate lane coordinates. Instant response feels
     substantially better while physically dragging. */
  transition: filter 90ms ease;
  will-change: left, top, filter;
}

.minigame-milk-demo.is-active .minigame-milk-stage,
.minigame-milk-demo.is-active .minigame-milk-stage * {
  cursor: none !important;
}

.minigame-demo-ready {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.34), rgba(0,0,0,.68)),
    rgba(0,0,0,.30);
}

.minigame-demo-ready strong {
  font-size: 31px;
}

.minigame-demo-ready > span {
  max-width: 430px;
  line-height: 1.45;
}

/* Keep result/start buttons clickable even though the game artwork itself is
   pointer-transparent. */
.minigame-demo-result,
.minigame-demo-result button {
  pointer-events: auto;
}

.minigame-preview-hint {
  margin-top: 12px;
  color: rgba(205,195,177,.68);
}

/* The actual NUI uses a transparent full-screen surface. On the website we
   keep a subtle BRK frame so users understand where the drag surface ends. */
.minigame-milk-stage {
  border: 1px solid rgba(226,216,195,.18);
  box-shadow:
    inset 0 0 100px rgba(0,0,0,.34),
    0 14px 28px rgba(0,0,0,.34);
}

@media (max-width: 900px) {
  .minigame-milk-stage {
    min-height: 580px;
  }

  .minigame-milk-prompt {
    transform: translate(-50%, -50%) scale(.84);
  }
}

@media (max-width: 620px) {
  .minigame-milk-stage {
    min-height: 510px;
  }

  .minigame-milk-prompt {
    transform: translate(-50%, -50%) scale(.68);
  }
}


/* ==========================================================================
   BRK Minigames — isolated actual-NUI browser preview
   ========================================================================== */

.minigame-isolated-demo {
  width: 100%;
}

.minigame-isolated-stage {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid rgba(226,216,195,.18);
  background: #080706;
  box-shadow:
    inset 0 0 105px rgba(0,0,0,.36),
    0 14px 28px rgba(0,0,0,.34);
  isolation: isolate;
}

.minigame-isolated-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #080706;
}

.minigame-isolated-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 115px 28px rgba(0,0,0,.45),
    inset 0 -80px 110px rgba(0,0,0,.22);
}

.minigame-isolated-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  min-height: 650px;
  border: 0;
  background: #080706;
  color-scheme: dark;
}

.minigame-isolated-frame:focus {
  outline: none;
}

.minigame-site-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 34px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.70)),
    rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
  text-align: center;
}

.minigame-site-overlay.hidden {
  display: none;
}

.minigame-site-overlay > strong {
  font-family: 'Redemption', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .7px;
  color: rgba(244,235,216,.97);
  text-transform: uppercase;
  text-shadow: 0 3px 3px rgba(0,0,0,.95);
}

.minigame-site-overlay > span {
  width: min(500px, 88%);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .25px;
  color: rgba(209,199,181,.72);
  text-shadow: 0 2px 3px rgba(0,0,0,.92);
}

.minigame-site-start {
  width: min(260px, 82%);
  margin-top: 7px;
}

.minigame-site-start.is-disabled {
  opacity: .42;
  pointer-events: none;
}

.minigame-isolated-demo .minigame-preview-hint {
  margin-top: 11px;
  padding: 0 20px;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(201,191,173,.58);
}

@media (max-width: 900px) {
  .minigame-isolated-stage,
  .minigame-isolated-frame {
    min-height: 590px;
  }
}

@media (max-width: 620px) {
  .minigame-isolated-stage,
  .minigame-isolated-frame {
    min-height: 520px;
  }

  .minigame-site-overlay > strong {
    font-size: 29px;
  }
}


/* ==========================================================================
   BRK Minigames — established interaction-frame treatment
   ========================================================================== */

/* Large preview mode scales the actual NUI to about 763px tall. Give it
   enough vertical room so the udder/top of the prompt stays inside the box. */
.minigame-isolated-stage,
.minigame-isolated-frame {
  min-height: 800px;
}

/* Reuse the exact animated BRK red/gold frame language already established
   for interactive stages instead of introducing a Minigames-only border. */
.minigame-isolated-stage::before {
  content: '';
  position: absolute;
  z-index: 12;
  inset: -2px;
  pointer-events: none;
  padding: 2px;
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .minigame-isolated-stage::before {
    inset: 0;
    padding: 0;
    background: transparent;
    border: 2px solid var(--browse-primary);
  }
}

@media (max-width: 900px) {
  .minigame-isolated-stage,
  .minigame-isolated-frame {
    min-height: 760px;
  }
}

@media (max-width: 620px) {
  .minigame-isolated-stage,
  .minigame-isolated-frame {
    min-height: 700px;
  }
}


/* ==========================================================================
   Shared BRK interaction frame
   User-supplied red/black distressed frame beneath the animated BRK glow.
   ========================================================================== */

.minigame-isolated-stage {
  /* Between the wide clip (128:55) and the closer milking clip / end still
     (256:185). Taller than the native interaction-frame art so the NUI
     udder clears the top rail; the frame itself is nine-sliced below. */
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  height: auto;
  overflow: hidden;
}

.minigame-isolated-frame {
  min-height: 0 !important;
  height: 100%;
}

/* Preview clips fill the interaction frame. A light gradient sits over
   the video so the NUI stays readable. */
.minigame-isolated-backdrop {
  background: #080706;
  filter: none;
}

.minigame-isolated-backdrop-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.minigame-isolated-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    rgba(0, 0, 0, .06),
    rgba(0, 0, 0, .16)
  );
}

/* Decorative frame:
   NUI = z3
   start/result overlay = z8
   supplied frame = z10
   animated BRK glow = z12
   so the glow visibly runs over the frame rather than replacing it. */
.minigame-interaction-frame {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border: 32px solid transparent;
  border-image-source: url('assets/ui/interaction_frame.png');
  border-image-slice: 38;
  border-image-width: 32px;
  border-image-repeat: stretch;
}

/* The supplied frame already provides the dark distressed edge treatment. */
.minigame-isolated-stage::after {
  box-shadow:
    inset 0 0 70px 16px rgba(0,0,0,.20);
}

/* Keep the animated border just outside the artwork edge so both layers read. */
.minigame-isolated-stage::before {
  inset: 0;
  z-index: 12;
}

/* Shared full-image showcase treatment used when screenshots have different
   aspect ratios and should not be cropped. */
.showcase-feature-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.showcase-feature-stack .showcase-shot img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.showcase-feature-secondary {
  width: min(72%, 720px);
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .showcase-feature-secondary {
    width: 100%;
  }
}


/* ==========================================================================
   Shared BRK interactive-space frame rule
   Every playable / interactive preview uses the supplied distressed frame
   with the animated BRK red/gold glow above it.
   ========================================================================== */

:root {
  --brk-interaction-safe-x: 34px;
  --brk-interaction-safe-y: 30px;
}

/* Future interactive spaces can opt into the same safe-area convention. */
.brk-interaction-space {
  --interaction-safe-x: var(--brk-interaction-safe-x);
  --interaction-safe-y: var(--brk-interaction-safe-y);
  position: relative;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   Notify
   Keep the cave/background full bleed, but reserve the clear center for
   toasts, loot, and announcements so the distressed frame never covers them.
   -------------------------------------------------------------------------- */

.notify-frame-stage-wrap {
  --interaction-safe-x: 38px;
  --interaction-safe-y: 32px;
  isolation: isolate;
}

/* Nine-slice the frame so it keeps its corner/edge proportions even though
   Notify's stage is a different shape from the original 1915x821 artwork. */
.notify-frame-stage-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border: 32px solid transparent;
  border-image-source: url('assets/ui/interaction_frame.png');
  border-image-slice: 38;
  border-image-width: 32px;
  border-image-repeat: stretch;
}

/* Existing animated BRK glow remains above the physical frame. */
.notify-frame-stage-wrap > .notify-stage-flow-border {
  z-index: 12;
}

/* Notifications / loot live inside the clear center of the frame. */
.notify-frame-layout .notify-demo-area {
  top: calc(30px + var(--interaction-safe-y));
  left: calc(28px + var(--interaction-safe-x));
  width: min(
    430px,
    calc(
      100% -
      56px -
      (var(--interaction-safe-x) * 2)
    )
  );
}

.notify-frame-layout .notify-demo-announcement {
  top: calc(26px + var(--interaction-safe-y));
  max-width: calc(
    100% -
    (var(--interaction-safe-x) * 2) -
    24px
  );
}

/* Preserve the present's established floating treatment, but keep its actual
   clickable art clear of the distressed right/bottom edge. */
.notify-frame-layout .notify-inventory-gift-perch {
  right: calc(26px + var(--interaction-safe-x));
  bottom: 4px;
}

/* Bottom controls no longer need to compensate for a present hanging far
   outside the stage. */
.notify-frame-controls-bottom {
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   RP Dice
   Turn the dice preview itself into a framed interactive game surface.
   -------------------------------------------------------------------------- */

.rp-dice-preview {
  --interaction-safe-x: 54px;
  --interaction-safe-y: 42px;
  position: relative;
  isolation: isolate;
  width: min(860px, 100%);
  min-height: 430px;
  margin: 0 auto;
  padding:
    var(--interaction-safe-y)
    var(--interaction-safe-x);
  background: rgba(0, 0, 0, .12);
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.24),
    0 14px 28px rgba(0,0,0,.24);
}

/* Same frame, nine-sliced to protect its distressed edge proportions. */
.rp-dice-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border: 34px solid transparent;
  border-image-source: url('assets/ui/interaction_frame.png');
  border-image-slice: 38;
  border-image-width: 34px;
  border-image-repeat: stretch;
}

/* Same animated BRK glow used by Notify and Minigames. */
.rp-dice-preview::after {
  content: '';
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  padding: 2px;
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .rp-dice-preview::after {
    padding: 0;
    background: transparent;
    border: 2px solid var(--browse-primary);
  }
}

.rp-dice-preview .rp-dice-roll {
  position: relative;
  z-index: 2;
  width: min(460px, 100%);
  min-height: 340px;
  padding: 14px 20px;
}

/* --------------------------------------------------------------------------
   Minigames
   Its supplied frame is already a dedicated overlay; keep the same safe-zone
   contract for current/future prompt layouts inside the game surface.
   -------------------------------------------------------------------------- */

.minigame-isolated-stage {
  --interaction-safe-x: 36px;
  --interaction-safe-y: 30px;
}

/* --------------------------------------------------------------------------
   Responsive safe areas
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  :root {
    --brk-interaction-safe-x: 24px;
    --brk-interaction-safe-y: 22px;
  }

  .notify-frame-stage-wrap {
    --interaction-safe-x: 26px;
    --interaction-safe-y: 24px;
  }

  .notify-frame-layout .notify-inventory-gift-perch {
    right: calc(14px + var(--interaction-safe-x));
  }

  .rp-dice-preview {
    --interaction-safe-x: 34px;
    --interaction-safe-y: 30px;
    min-height: 390px;
  }
}

@media (max-width: 520px) {
  .notify-frame-stage-wrap {
    --interaction-safe-x: 20px;
    --interaction-safe-y: 20px;
  }

  .notify-frame-layout .notify-demo-area {
    left: var(--interaction-safe-x);
    width: calc(100% - (var(--interaction-safe-x) * 2));
  }

  .notify-frame-layout .notify-inventory-gift-perch {
    right: 50%;
    bottom: -138px;
    transform: translateX(50%);
  }

  .notify-frame-controls-bottom {
    margin-top: 154px;
  }

  .rp-dice-preview {
    --interaction-safe-x: 28px;
    --interaction-safe-y: 26px;
    min-height: 360px;
  }
}


/* ==========================================================================
   Unreleased resource Tebex rows
   Same purchase-row placement as released resources, but visibly Coming Soon.
   Remains keyboard/mouse selectable so it can open the internal Tebex page.
   ========================================================================== */

.resource-purchase-unavailable {
  color: rgba(156, 151, 141, .48);
  filter: grayscale(1) brightness(.72);
}

.resource-purchase-unavailable > span:nth-child(2) {
  color: rgba(175, 168, 153, .48);
}

.resource-purchase-unavailable:hover,
.resource-purchase-unavailable.is-focused {
  color: rgba(211, 204, 190, .72) !important;
  filter: grayscale(.86) brightness(.88);
}

/* Keep the familiar selection treatment, but mute the artwork so the row
   still reads as unavailable rather than looking like a normal live store link. */
.resource-purchase-unavailable.is-focused::before {
  filter: grayscale(1) brightness(.58);
  opacity: .72;
}

.resource-purchase-unavailable.is-focused > .row-border-flow {
  opacity: .48;
  filter: grayscale(1) drop-shadow(0 0 2px rgba(170, 164, 151, .38));
}

.resource-purchase-coming-soon strong {
  color: rgba(224, 184, 104, .94);
  font-weight: 400;
}


/* ==========================================================================
   Generic "Coming Soon" row treatment
   Same dimmed/greyscale language as the unreleased Tebex rows above, but not
   scoped to #resource-section-nav so any stage-row/menu-row can use it
   (e.g. BRK Launcher download rows) without wiring the full purchase system.
   ========================================================================== */

.row-coming-soon {
  color: rgba(156, 151, 141, .48);
  filter: grayscale(1) brightness(.72);
}

.row-coming-soon > span:nth-child(2) {
  color: rgba(175, 168, 153, .48);
}

.row-coming-soon:hover,
.row-coming-soon.is-focused {
  color: rgba(211, 204, 190, .72) !important;
  filter: grayscale(.86) brightness(.88);
}

.row-coming-soon.is-focused::before {
  filter: grayscale(1) brightness(.58);
  opacity: .72;
}

.row-coming-soon.is-focused > .row-border-flow {
  opacity: .48;
  filter: grayscale(1) drop-shadow(0 0 2px rgba(170, 164, 151, .38));
}


/* ==========================================================================
   BRK RP Dice interactive background
   Shared HUD artwork fills the complete framed interaction surface.
   ========================================================================== */

.rp-dice-preview {
  background:
    url('assets/ui/hud_location_bg2.png')
      center center / 100% 100% no-repeat;
}


/* ==========================================================================
   Resource catalogue category browser
   ========================================================================== */

.catalogue-category-card {
  min-height: 112px;
}

.catalogue-category-card .card-name {
  font-size: clamp(27px, 2.7vw, 40px);
  letter-spacing: .7px;
}

.catalogue-category-card.row-coming-soon {
  color: rgba(156, 151, 141, .48);
  filter: grayscale(1) brightness(.72);
}

.catalogue-category-card.row-coming-soon .card-name,
.catalogue-category-card.row-coming-soon .card-arrow {
  color: rgba(175, 168, 153, .48);
}

.catalogue-category-card.row-coming-soon:hover,
.catalogue-category-card.row-coming-soon.is-focused {
  color: rgba(211, 204, 190, .72) !important;
  filter: grayscale(.86) brightness(.88);
}

.catalogue-category-card.row-coming-soon.is-focused::before {
  filter: grayscale(1) brightness(.58);
  opacity: .72;
}

.catalogue-category-card.row-coming-soon.is-focused > .row-border-flow {
  opacity: .48;
  filter: grayscale(1) drop-shadow(0 0 2px rgba(170, 164, 151, .38));
}

.resource-catalogue-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 36px;
  text-align: center;
  background:
    linear-gradient(rgba(0,0,0,.13), rgba(0,0,0,.13)),
    url('assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat;
  opacity: .72;
}

.resource-catalogue-empty-title {
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(28px, 3vw, 42px);
  line-height: .95;
  text-transform: uppercase;
  color: rgba(226,218,201,.78);
}

.resource-catalogue-empty-copy {
  max-width: 520px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 16px;
  line-height: 1.35;
  color: rgba(203,193,176,.58);
}

@media (max-width: 760px) {
  .catalogue-category-card {
    min-height: 94px;
  }
}


/* ==========================================================================
   BRK Documentation hub
   Documentation is a reference/help destination, not a duplicate resource
   catalogue.
   ========================================================================== */

#docs-grid {
  display: block;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.docs-hub-overview,
.docs-guide-intro {
  width: 100%;
}

.docs-overview-lead,
.docs-guide-intro {
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: center;
}

.docs-overview-label {
  display: block;
  margin-bottom: 8px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(181, 47, 36, .88);
}

.docs-overview-lead h2,
.docs-guide-intro h2 {
  margin: 0 auto 14px;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(35px, 4.6vw, 64px);
  font-weight: 400;
  line-height: .93;
  text-transform: uppercase;
  color: rgba(236, 230, 215, .96);
  text-shadow: 0 2px 14px rgba(0,0,0,.56);
}

.docs-overview-lead p,
.docs-guide-intro > p {
  margin: 0 auto;
  max-width: 830px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.48;
  color: rgba(215, 207, 190, .84);
}

.docs-guide-intro a {
  color: #d5b989;
  text-decoration-color: rgba(192, 67, 52, 0.65);
  text-underline-offset: 4px;
}

.docs-overview-lead em {
  color: rgba(234, 226, 207, .96);
  font-style: normal;
}

/* Docs hub: topic browse first, reference notes stacked below. */
.docs-hub-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 28px);
  width: 100%;
}

.docs-hub-browse {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.docs-hub-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.docs-principle-grid,
.docs-guidance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

/* Documentation now shares the established BRK split-page shell. Keep the
   existing reference cards readable inside its narrower information canvas. */
#app.is-documentation-route .docs-principle-grid,
#app.is-documentation-route .docs-guidance-grid,
#app.is-tools-route .docs-principle-grid,
#app.is-tools-route .docs-guidance-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.docs-principle,
.docs-guidance-card,
.docs-what-lives-here {
  position: relative;
  isolation: isolate;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.docs-principle::before,
.docs-guidance-card::before,
.docs-what-lives-here::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  opacity: .72;
}

.docs-principle::after,
.docs-guidance-card::after,
.docs-what-lives-here::after {
  content: none;
}

.docs-principle > *,
.docs-guidance-card > *,
.docs-what-lives-here > * {
  position: relative;
  z-index: 1;
}

.docs-principle h3,
.docs-guidance-card h3,
.docs-what-lives-here h3 {
  margin: 0 0 6px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  color: rgba(233, 226, 209, .94);
}

.docs-principle p,
.docs-guidance-card p,
.docs-what-lives-here p {
  margin: 0;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  line-height: 1.42;
  color: rgba(203, 195, 178, .76);
}

.docs-what-lives-here {
  margin: 0;
}

.docs-hub-browse .docs-category-card {
  width: 100%;
  min-height: 92px;
  text-align: left;
}

.docs-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.docs-category-card {
  min-height: 128px;
  text-align: left;
}

.docs-category-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.docs-hub-browse .docs-category-card .card-name {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: .92;
}

.docs-category-card .card-name {
  font-size: clamp(26px, 2.7vw, 39px);
  line-height: .92;
}

.docs-category-summary {
  max-width: 500px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(197, 188, 170, .60);
  text-transform: none;
  letter-spacing: 0;
}

.docs-hub-browse .docs-category-summary {
  max-width: none;
}

.docs-category-card.is-focused .docs-category-summary,
.docs-category-card:hover .docs-category-summary {
  color: rgba(228, 219, 201, .82);
}

.docs-guide-intro {
  margin-bottom: 22px;
}

.docs-guidance-grid {
  margin-bottom: 30px;
}

.docs-resource-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 4px 0 10px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(126, 35, 27, .38);
}

.docs-resource-heading > span {
  font-family: 'RDRLino', Georgia, serif;
  font-size: 22px;
  color: rgba(231, 222, 204, .92);
}

.docs-resource-heading p {
  margin: 0;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 13px;
  color: rgba(188, 179, 161, .56);
}

.docs-resource-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 24px;
}

.docs-resource-link {
  position: relative;
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 18px;
  padding: 10px 17px 10px 20px;
  overflow: hidden;
  border: 0;
  background: rgba(8, 7, 6, .50);
  color: rgba(223, 215, 198, .84);
  text-align: left;
  cursor: pointer;
}

.docs-resource-link::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .30;
  background:
    url('assets/ui/selection_box_bg_1d.png')
      center center / 100% 100% no-repeat;
}

.docs-resource-link:hover::before,
.docs-resource-link.is-focused::before {
  opacity: .90;
}

/* Resource references are one BRK menu, so the focused row reveals its
   matching slice of the same continuous selected artwork. */
.docs-resource-links[data-menu-axis]
  .docs-resource-link.is-focused::before {
  background-image:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url('assets/ui/brk_selected_bg.jpg');
  background-size:
    100% 100%,
    var(--slice-image-width, var(--slice-menu-width)) auto;
  background-position:
    0 0,
    calc(var(--slice-image-left, 0px) - var(--slice-x, 0px))
    calc(var(--slice-image-top, 0px) - var(--slice-y, 0px));
  background-repeat: no-repeat;
}

.docs-resource-link-copy,
.docs-resource-target,
.docs-resource-link .card-arrow {
  position: relative;
  z-index: 2;
}

.docs-resource-link-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.docs-resource-wordmark {
  flex: 0 0 195px;
  height: 48px;
  display: flex;
  align-items: center;
}

.docs-resource-wordmark img {
  width: 100%;
  max-width: 188px;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}

.docs-resource-name {
  flex: 0 0 195px;
  font-family: 'Redemption', Georgia, serif;
  font-size: 25px;
  color: rgba(235, 227, 209, .92);
}

.docs-resource-note {
  min-width: 0;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(195, 186, 168, .62);
}

.docs-resource-target {
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 13px;
  white-space: nowrap;
  color: rgba(164, 154, 137, .52);
}

.docs-resource-link:hover .docs-resource-note,
.docs-resource-link.is-focused .docs-resource-note {
  color: rgba(223, 213, 194, .82);
}

.docs-resource-link:hover .docs-resource-target,
.docs-resource-link.is-focused .docs-resource-target {
  color: rgba(213, 202, 182, .72);
}

@media (max-width: 900px) {
  .docs-hub-layout {
    gap: 16px;
  }

  .docs-principle-grid,
  .docs-guidance-grid,
  .docs-category-grid {
    grid-template-columns: 1fr;
  }

  #app.is-documentation-route .docs-principle-grid,
  #app.is-documentation-route .docs-guidance-grid,
  #app.is-tools-route .docs-principle-grid,
  #app.is-tools-route .docs-guidance-grid {
    grid-template-columns: 1fr;
  }

  .docs-resource-link {
    grid-template-columns: minmax(0, 1fr) 18px;
  }

  .docs-resource-target {
    display: none;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .docs-principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .docs-overview-lead h2,
  .docs-guide-intro h2 {
    font-size: 36px;
  }

  .docs-principle,
  .docs-guidance-card,
  .docs-what-lives-here {
    padding: 20px;
  }

  .docs-resource-link-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .docs-resource-wordmark,
  .docs-resource-name {
    flex-basis: auto;
  }

  .docs-resource-wordmark {
    width: 160px;
    height: 40px;
  }

  .docs-resource-wordmark img {
    max-width: 160px;
    max-height: 40px;
  }

  .docs-resource-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}


/* ==========================================================================
   Documentation category card cleanup
   The Documentation overview makes the container much taller than a normal
   catalogue. Do not calculate category selections as slices of that whole
   page; use a stable BRK selected crop per card.
   ========================================================================== */

.docs-category-card {
  min-height: 104px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.docs-category-card.is-focused::before {
  background:
    linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10)),
    url('assets/ui/brk_selected_bg.jpg')
      center 38% / 100% auto no-repeat !important;
}

.docs-category-card .card-name {
  font-size: clamp(25px, 2.45vw, 36px);
}

.docs-category-summary {
  max-width: 470px;
  font-size: 13px;
  line-height: 1.18;
}

/* Tighter, reference-style overview. */
.docs-overview-lead {
  margin-bottom: 20px;
}

.docs-overview-lead h2 {
  font-size: clamp(34px, 4vw, 54px);
  margin-bottom: 10px;
}

.docs-overview-lead p {
  max-width: 780px;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.38;
}

.docs-hub-browse .docs-category-card {
  min-height: 88px;
}

.docs-principle {
  padding: 14px 16px;
}

.docs-principle h3 {
  margin-bottom: 4px;
  font-size: clamp(17px, 1.5vw, 22px);
}

.docs-principle p {
  font-size: 14px;
  line-height: 1.34;
}

.docs-what-lives-here {
  padding: 14px 16px;
}

.docs-what-lives-here h3 {
  margin-bottom: 4px;
  font-size: 20px;
}

.docs-what-lives-here p {
  font-size: 14px;
  line-height: 1.34;
}

/* Category help pages should read as reference cards, not essays. */
.docs-guidance-card {
  padding: 18px 21px 19px;
}

.docs-guidance-card h3 {
  margin-bottom: 5px;
  font-size: clamp(19px, 1.8vw, 25px);
}

.docs-guidance-card p {
  font-size: 15px;
  line-height: 1.36;
}

@media (max-width: 760px) {
  .docs-category-card {
    min-height: 92px;
  }
}


/* ==========================================================================
   BRK Chat interactive preview
   Actual BRK Chat v1.0.5 NUI running inside a website-controlled iframe.
   ========================================================================== */

.chat-preview-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-preview-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 255px;
  gap: 12px;
}

.chat-preview-control-title {
  display: block;
  margin-bottom: 9px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 18px;
  color: rgba(232, 224, 207, .92);
}

.chat-theme-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chat-theme-button,
.chat-preview-activate {
  color: rgba(204, 197, 181, .72);
  font-family: 'RDRLedger', Georgia, serif;
  text-transform: uppercase;
}

.chat-theme-button {
  min-width: 66px;
  padding: 7px 9px 6px;
  font-size: 13px;
}

.chat-theme-button:hover,
.chat-theme-button.is-active {
  color: rgba(239, 231, 211, .96);
}

.chat-theme-command {
  display: inline-block;
  margin-top: 10px;
  color: rgba(204, 194, 174, .62);
  font-family: monospace;
  font-size: 12px;
}

.chat-custom-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 8px 10px;
}

.chat-custom-colors .chat-preview-control-title,
.chat-custom-colors small {
  grid-column: 1 / -1;
}

.chat-custom-colors label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 13px;
  color: rgba(204, 195, 178, .72);
}

.chat-custom-colors input[type='color'] {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(126, 36, 28, .46);
  background: transparent;
  cursor: pointer;
}

.chat-custom-colors small {
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(175, 166, 150, .48);
}

.chat-preview-stage {
  --interaction-safe-x: 32px;
  --interaction-safe-y: 28px;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 470px;
  overflow: hidden;
  background:
    linear-gradient(
      rgba(0, 0, 0, .02),
      rgba(0, 0, 0, .10)
    ),
    url('assets/resources/chat/preview/background.jpg')
      center center / cover no-repeat;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.24),
    0 12px 28px rgba(0,0,0,.22);
}

/* Shared distressed frame. */
.chat-preview-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    url('assets/ui/interaction_frame.png')
      center center / 100% 100% no-repeat;
}

/* Established animated BRK glow over the frame. */
.chat-preview-stage::after {
  content: '';
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  padding: 2px;
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.chat-preview-frame {
  position: absolute;
  z-index: 3;
  inset: var(--interaction-safe-y) var(--interaction-safe-x);
  width: calc(100% - (var(--interaction-safe-x) * 2));
  height: calc(100% - (var(--interaction-safe-y) * 2));
  border: 0;
  background: transparent;
}

.chat-preview-hints {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 14px;
  padding: 0 4px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 12px;
  color: rgba(185, 176, 158, .58);
}

.chat-preview-hints kbd {
  margin: 0 1px;
}

.chat-preview-activate {
  margin-left: auto;
  padding: 7px 11px 6px;
}

.chat-preview-activate.needs-focus {
  color: rgba(239, 229, 207, .96);
  animation: chat-preview-focus-pulse 1.15s ease-in-out infinite;
}

@keyframes chat-preview-focus-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(177, 8, 8, 0); }
  50% { box-shadow: 0 0 10px rgba(177, 8, 8, .42); }
}

.chat-command-reference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.chat-command-reference-preview {
  margin-top: 2px;
}

.chat-command-group {
  padding: 16px 17px 14px;
  background:
    linear-gradient(
      108deg,
      rgba(8, 7, 6, .88),
      rgba(21, 15, 12, .74)
    );
  border-left: 2px solid rgba(128, 31, 25, .46);
}

.chat-command-group h3 {
  margin: 0 0 8px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: rgba(231, 223, 207, .92);
}

.chat-command-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-command-row {
  display: grid;
  grid-template-columns: minmax(195px, .8fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid rgba(119, 42, 32, .18);
}

.chat-command-row:last-child {
  border-bottom: 0;
}

.chat-command-row code {
  color: rgba(226, 207, 161, .88);
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chat-command-row span {
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 13px;
  line-height: 1.24;
  color: rgba(193, 184, 166, .64);
}

.dependency-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dependency-list > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 8px 10px;
  background: rgba(0,0,0,.20);
}

.dependency-list strong {
  font-family: 'RDRLino', Georgia, serif;
  font-weight: 400;
  color: rgba(232, 224, 207, .92);
}

.dependency-list .dependency-name-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(232, 224, 207, .28);
}

.dependency-list .dependency-name-link:hover,
.dependency-list .dependency-name-link:focus-visible {
  color: rgba(245, 238, 224, .98);
  text-decoration-color: rgba(245, 238, 224, .55);
  outline: none;
}

.dependency-list span {
  font-family: 'RDRLedger', Georgia, serif;
  color: rgba(197, 188, 170, .66);
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .chat-preview-stage::after {
    padding: 0;
    background: transparent;
    border: 2px solid var(--browse-primary);
  }
}

@media (max-width: 900px) {
  .chat-preview-toolbar {
    grid-template-columns: 1fr;
  }

  .chat-command-reference {
    grid-template-columns: 1fr;
  }

  .chat-preview-stage {
    min-height: 420px;
  }
}

@media (max-width: 620px) {
  .chat-preview-page {
    gap: 10px;
  }

  .chat-preview-stage {
    --interaction-safe-x: 10px;
    --interaction-safe-y: 10px;
    aspect-ratio: auto;
    width: 100%;
    /* Room for compact chat HUD + suggestion strip under it + a little sky. */
    height: min(48svh, 360px);
    min-height: 280px;
  }

  .chat-preview-frame {
    inset: var(--interaction-safe-y) var(--interaction-safe-x);
    width: calc(100% - (var(--interaction-safe-x) * 2));
    height: calc(100% - (var(--interaction-safe-y) * 2));
  }

  .chat-command-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .chat-preview-hints {
    gap: 8px;
    padding: 0;
  }

  .chat-preview-hints > span {
    display: none;
  }

  .chat-preview-activate {
    margin-left: 0;
    width: 100%;
  }
}


/* ==========================================================================
   BRK Chat Showcase
   Videos: one at a time, no lightbox.
   Screenshots: established carousel + image lightbox.
   ========================================================================== */

.chat-video-carousel {
  width: 100%;
}

.chat-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, .68);
  border: 1px solid rgba(224, 214, 193, .14);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(95, 0, 0, .20);
}

.chat-showcase-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.chat-video-navigation {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 42px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.chat-video-nav-button {
  width: 42px;
  height: 38px;
  border: 0;
  background: transparent;
  color: rgba(219, 208, 188, .62);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 31px;
  line-height: 1;
  cursor: pointer;
}

.chat-video-nav-button:hover,
.chat-video-nav-button.is-focused {
  color: rgba(250, 239, 217, .96);
  text-shadow: 0 0 7px rgba(197, 32, 7, .58);
}

.chat-video-nav-button:disabled {
  opacity: .20;
  cursor: default;
}

.chat-video-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.chat-video-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(206, 193, 171, .44);
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  cursor: pointer;
}

.chat-video-dot.is-current {
  border-color: rgba(222, 178, 84, .88);
  background: rgba(177, 8, 8, .86);
  box-shadow: 0 0 6px rgba(197, 32, 7, .52);
}

.chat-video-position {
  min-width: 42px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 11px;
  text-align: center;
  color: rgba(194, 184, 166, .54);
}

.chat-video-caption {
  margin-top: 2px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 11px;
  letter-spacing: .65px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(217, 207, 188, .68);
}

@media (max-width: 620px) {
  .chat-video-navigation {
    grid-template-columns: 34px minmax(0, 1fr) auto 34px;
    gap: 5px;
  }

  .chat-video-nav-button {
    width: 34px;
  }

}


/* BRK Chat showcase video frame ------------------------------------------- */

.chat-video-stage {
  isolation: isolate;
  border: 0;
}

.chat-showcase-video {
  position: relative;
  z-index: 1;
}

/* Same animated BRK red/gold border used on selected screenshots and
   interactive preview frames. */
.chat-video-stage::after {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  padding: 2px;
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .chat-video-stage::after {
    padding: 0;
    background: transparent;
    border: 2px solid var(--browse-primary);
  }
}


/* ==========================================================================
   Shared local resource showcase video
   Used by resource showcases that have one local MP4.
   ========================================================================== */

.showcase-local-video-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, .76);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(95, 0, 0, .20);
}

.showcase-local-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.showcase-local-video-stage::after {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  padding: 2px;
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .showcase-local-video-stage::after {
    padding: 0;
    background: transparent;
    border: 2px solid var(--browse-primary);
  }
}


/* ==========================================================================
   BRK Chat preview controls
   Row 1: animated border presets
   Row 2: message + channel/tab colors
   Row 3: character name
   ========================================================================== */

.chat-preview-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-border-presets,
.chat-color-editor,
.chat-character-row {
  width: 100%;
}

.chat-color-editor {
  display: block;
}

.chat-color-editor-section + .chat-color-editor-section {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(126, 36, 28, .24);
}

.chat-color-editor-label {
  display: block;
  margin-bottom: 7px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(190, 180, 162, .52);
}

.chat-color-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 6px 10px;
}

.chat-channel-color-grid {
  grid-template-columns: repeat(5, minmax(110px, 1fr));
}

/* TRIAL / shared: color rows use asset chrome; swatch uses square art. */
.chat-color-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 3px 8px 3px 10px;
}

.chat-color-control > span:first-child {
  position: relative;
  z-index: 4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 12px;
  color: rgba(210, 201, 183, .72);
}

.chat-color-control:hover > span:first-child,
.chat-color-control:focus-within > span:first-child {
  color: rgba(239, 231, 211, .96);
}

.chat-color-swatch {
  position: relative;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 28px;
}

.chat-color-swatch-base,
.chat-color-swatch-border {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.chat-color-swatch-base {
  z-index: 0;
  background-image: url('assets/ui/black_square.png');
  opacity: .96;
}

.chat-color-swatch-border {
  z-index: 2;
  background-image: url('assets/ui/border_red_square.png');
  opacity: .92;
}

.chat-color-control input[type='color'] {
  position: absolute;
  z-index: 1;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.chat-color-control input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

.chat-color-control input[type='color']::-webkit-color-swatch {
  border: 0;
  border-radius: 0;
}

.chat-color-control input[type='color']::-moz-color-swatch {
  border: 0;
  border-radius: 0;
}

/* Animated border on top of red selection (theme + color rows). */
.chat-theme-button > .row-border-flow,
.chat-color-control > .row-border-flow {
  display: none;
}

.chat-theme-button:hover > .row-border-flow,
.chat-color-control:hover > .row-border-flow,
.chat-color-control:focus-within > .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: 1;
  filter: none;
  -webkit-mask: none;
  mask: none;
  animation: none;
  pointer-events: none;
}

.chat-theme-button:hover > .row-border-flow::after,
.chat-color-control:hover > .row-border-flow::after,
.chat-color-control:focus-within > .row-border-flow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation:
    menu-border-flow
    var(--browse-duration)
    linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--browse-opacity);
}

.chat-character-row label {
  display: grid;
  grid-template-columns: 180px minmax(0, 420px);
  align-items: center;
  gap: 14px;
}

.chat-character-row .chat-preview-control-title {
  margin: 0;
}

#chat-preview-character-name {
  width: 100%;
  min-width: 0;
  padding: 9px 11px 8px;
  border: 1px solid rgba(126, 36, 28, .42);
  outline: none;
  background: rgba(0, 0, 0, .42);
  color: rgba(235, 226, 207, .94);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
}

#chat-preview-character-name::placeholder {
  color: rgba(183, 173, 156, .46);
}

#chat-preview-character-name:focus {
  border-color: rgba(189, 46, 33, .78);
  box-shadow:
    inset 0 0 12px rgba(118, 21, 15, .18),
    0 0 6px rgba(118, 21, 15, .18);
}

/* Old border-customization box is no longer used. */
.chat-custom-colors {
  display: none;
}

@media (max-width: 960px) {
  .chat-color-grid,
  .chat-channel-color-grid {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media (max-width: 620px) {
  .chat-color-grid,
  .chat-channel-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-character-row label {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* ==========================================================================
   BRK / IRP Reviews
   Leave-review panel = BRK Menu.
   Public review feed = BRK Chat.
   ========================================================================== */

.review-view {
  width: 100%;
}

.review-app {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.review-layout {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.review-compose,
.review-public {
  min-width: 0;
}

/* BRK Menu review writer -------------------------------------------------- */

.review-menu-shell {
  position: relative;
  width: 540px;
  height: min(790px, 84vh);
  min-height: 680px;
  padding: 0 54px 20px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  isolation: isolate;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.58));
}

.review-menu-header {
  position: relative;
  flex: 0 0 176px;
  min-height: 176px;
  display: block;
  text-align: center;
}

.review-compose .review-menu-header {
  margin-bottom: 10px;
}

.review-menu-title {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 472px;
  height: 164px;
  padding: 10px 48px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) translateY(6px);
  background:
    url('assets/ui/menu_border.png')
    center / 100% 100% no-repeat;
  font-family: 'Redemption', Georgia, serif;
  font-size: 40px;
  line-height: .94;
  letter-spacing: .9px;
  color: rgba(255,255,255,.96);
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(0,0,0,.95);
}

.review-menu-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.review-menu-row.menu-row {
  width: 432px;
  height: 46px;
  flex: 0 0 46px;
  margin: 0;
}

.review-menu-row.review-menu-static-row,
.review-rating-field.review-menu-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  padding: 0 14px 0 16px;
  border: 0;
  background:
    url('assets/ui/selection_box_bg_1d.png')
    center / 100% 100% no-repeat;
  color: var(--text-muted);
}

.review-menu-row.review-menu-static-row {
  cursor: default;
}

.review-menu-dropdown {
  position: relative;
  z-index: 30;
  width: 432px;
  height: 46px;
  max-width: 100%;
}

.review-menu-select-button {
  position: relative;
  width: 432px;
  height: 46px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  padding: 0 14px 0 16px;
  overflow: hidden;
  border: 0;
  outline: 0;
  background:
    url('assets/ui/selection_box_bg_1d.png')
    center / 100% 100% no-repeat;
  color: rgba(242,234,216,.91);
  font-family: 'RDRLedger', Georgia, serif;
  cursor: pointer;
}

.review-menu-select-value {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 14px;
}

.review-menu-select-value > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-menu-select-arrow {
  position: relative;
  z-index: 4;
  width: 21px;
  height: 21px;
  justify-self: end;
  background:
    url('assets/ui/button_1_img.png')
    center / contain no-repeat;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.95))
    brightness(.88);
  opacity: .84;
}

.review-menu-dropdown.is-open .review-menu-select-arrow {
  background-image: url('assets/ui/button_0_img.png');
  opacity: 1;
}

.review-menu-dropdown-list {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  z-index: 60;
  width: min(285px, 72vw);
  max-height: 285px;
  padding: 9px 8px;
  overflow-y: auto;
  background:
    linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.42)),
    url('assets/ui/inkroller_1a.png')
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 13px rgba(0,0,0,.72));
  scrollbar-width: thin;
  scrollbar-color:
    rgba(124,24,17,.78)
    rgba(0,0,0,.24);
}

.review-menu-dropdown-list.hidden {
  display: none;
}

.review-menu-dropdown-option {
  position: relative;
  width: 100%;
  min-height: 40px;
  display: grid;
  align-items: center;
  padding: 4px 13px;
  overflow: hidden;
  border: 0;
  outline: 0;
  background:
    url('assets/ui/selection_box_bg_1d.png')
    center / 100% 100% no-repeat;
  color: rgba(221,212,195,.72);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  text-align: right;
  cursor: pointer;
}

.review-menu-dropdown-option + .review-menu-dropdown-option {
  margin-top: 3px;
}

.review-menu-dropdown-option > span:first-child {
  position: relative;
  z-index: 4;
}

.review-menu-dropdown-option.is-current {
  color: rgba(248,240,222,.96);
}

.review-menu-dropdown-option:hover,
.review-menu-dropdown-option:focus-visible,
.review-menu-dropdown-option.is-focused {
  color: rgba(255,249,235,.99);
}

.review-menu-dropdown-empty {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 12px;
  color: rgba(199,189,171,.52);
  text-align: center;
}

.review-rating-field {
  margin: 0;
  min-width: 0;
}

.review-rating-field:disabled {
  opacity: .44;
}

.review-rating-field:disabled .review-star {
  pointer-events: none;
}

.review-rating {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1px;
}

.review-star {
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(110, 98, 80, .66);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,.95);
}

.review-star:hover,
.review-star:focus-visible,
.review-star.is-selected {
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 7px rgba(137,72,16,.28);
}

.review-rating[data-rating="5"] .review-star.is-selected {
  color: #cf9d3e;
}

.review-rating[data-rating="4"] .review-star.is-selected {
  color: #c6ccd1;
}

.review-rating[data-rating="3"] .review-star.is-selected {
  color: #b9783c;
}

.review-rating[data-rating="2"] .review-star.is-selected {
  color: #7b4b2b;
}

.review-rating[data-rating="1"] .review-star.is-selected {
  color: #b83b32;
}

.review-rating[data-preview-rating] .review-star {
  color: rgba(110, 98, 80, .66);
}

.review-rating[data-preview-rating="5"] .review-star:nth-child(-n+5) { color: #cf9d3e; }
.review-rating[data-preview-rating="4"] .review-star:nth-child(-n+4) { color: #c6ccd1; }
.review-rating[data-preview-rating="3"] .review-star:nth-child(-n+3) { color: #b9783c; }
.review-rating[data-preview-rating="2"] .review-star:nth-child(-n+2) { color: #7b4b2b; }
.review-rating[data-preview-rating="1"] .review-star:nth-child(1) { color: #b83b32; }

.review-menu-writing-space {
  position: relative;
  flex: 1 1 auto;
  min-height: 188px;
  margin-top: 9px;
  overflow: hidden;
  background:
    linear-gradient(
      rgba(0,0,0,.58),
      rgba(0,0,0,.82)
    );
  border-top: 1px solid rgba(135,38,29,.22);
  border-bottom: 1px solid rgba(135,38,29,.18);
  box-shadow:
    inset 0 10px 30px rgba(0,0,0,.36),
    inset 0 -22px 36px rgba(0,0,0,.48);
}

.review-menu-textarea {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: calc(100% - 20px);
  min-height: 102px;
  max-height: calc(100% - 20px);
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid rgba(128,37,28,.34);
  outline: 0;
  background: rgba(0,0,0,.52);
  color: rgba(244,239,228,.94);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 14px;
  line-height: 1.34;
  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 0 4px rgba(0,0,0,.68);
}

.review-menu-textarea:focus {
  border-color: rgba(181,46,34,.70);
  box-shadow: inset 0 0 12px rgba(106,20,14,.18);
}

.review-menu-textarea:disabled {
  opacity: .38;
}

.review-menu-textarea::placeholder {
  color: rgba(200,191,173,.34);
}

.review-menu-statusline {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 2px 0;
}

.review-menu-statusline > span {
  min-width: 0;
  margin-right: auto;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 11px;
  color: rgba(197,187,169,.58);
}

.review-submit-button,
.review-delete-button,
.review-refresh-button,
.review-captcha-cancel {
  color: rgba(229,220,202,.87);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 11px;
  text-transform: uppercase;
}

.review-submit-button,
.review-delete-button {
  padding: 7px 10px 6px;
}

.review-delete-button {
  color: rgba(187,164,153,.64);
}

.review-delete-button.hidden {
  display: none;
}

.review-submit-button:hover,
.review-submit-button.is-focused,
.review-delete-button:hover,
.review-delete-button.is-focused,
.review-refresh-button:hover,
.review-refresh-button.is-focused,
.review-captcha-cancel:hover,
.review-captcha-cancel.is-focused {
  color: rgba(246,235,212,.98);
}

.review-submit-button:disabled,
.review-menu-row:disabled {
  opacity: .42;
  cursor: default;
  box-shadow: none;
}

.review-auth-detail {
  min-height: 22px;
  padding-top: 3px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 10px;
  color: rgba(177,167,150,.44);
  text-align: center;
}

/* BRK Minigames CAPTCHA (popup styled like the Under Construction overlay) - */

.review-public {
  position: relative;
  min-height: min(790px, 84vh);
}

.review-captcha-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px);
  background: rgba(6, 4, 3, 0.82);
  pointer-events: auto;
}

.review-captcha-layer.hidden {
  display: none;
}

.review-captcha-panel {
  position: relative;
  width: min(620px, 94%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 54px 44px 38px;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .62));
  border: 1px solid rgba(225, 215, 193, .10);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .55);
  text-align: center;
}

.review-captcha-border {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url('assets/ui/interaction_frame.png')
    center / 100% 100% no-repeat !important;
  opacity: 1;
}

.review-captcha-border::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: menu-border-flow var(--browse-duration) linear infinite;
}

.review-captcha-copy {
  position: relative;
  z-index: 3;
  width: 100%;
}

.review-captcha-title {
  margin: 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(244, 235, 216, .97);
  text-shadow: 0 3px 3px rgba(0, 0, 0, .95);
}

.review-captcha-instruction {
  margin: 14px 0 18px;
  padding: 3px 7px;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 12px;
  letter-spacing: .55px;
  color: rgba(236,226,207,.82);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000;
}

.review-captcha-frame {
  width: 100%;
  height: 420px;
  min-height: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.review-captcha-cancel {
  z-index: 3;
  margin-top: 20px;
  padding: 5px 9px 4px;
}

/* BRK Chat public review feed -------------------------------------------- */

.review-chat-panel {
  position: relative;
  overflow: visible;
}

.review-chat-panel::before {
  content: none;
}

.review-chat-panel::after {
  content: none;
}

.review-chat-feed-panel {
  min-height: 500px;
  display: flex;
  flex-direction: column;
}

.review-list.review-chat-messages {
  flex: 1;
  min-height: 0;
  max-height: 660px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(137,40,31,.40)
    rgba(0,0,0,.12);
  padding: 4px 7px 16px 4px;
}

.review-chat-row {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  min-height: 106px;
  padding: 16px 18px 17px 24px;
  overflow: hidden;
  background:
    url('assets/ui/hud_location_bg2.png')
    center / 100% 100% no-repeat;
  font-family: 'RDRLedger', Georgia, serif;
  color: rgba(247,243,233,.94);
  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 0 4px rgba(0,0,0,.82);
}

.review-chat-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.review-chat-row-accent {
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: rgba(210,154,55,.96);
  box-shadow: 0 0 6px rgba(210,154,55,.72);
}

.review-chat-row[data-rating-tier="5"] .review-chat-row-accent { background: #cf9d3e; }
.review-chat-row[data-rating-tier="4"] .review-chat-row-accent { background: #c6ccd1; }
.review-chat-row[data-rating-tier="3"] .review-chat-row-accent { background: #b9783c; }
.review-chat-row[data-rating-tier="2"] .review-chat-row-accent { background: #7b4b2b; }
.review-chat-row[data-rating-tier="1"] .review-chat-row-accent { background: #b83b32; }

.review-chat-name {
  color: rgba(204,213,216,.96);
}

.review-chat-rating {
  color: rgba(207,157,62,.96);
  letter-spacing: .5px;
  white-space: nowrap;
}

.review-chat-rating[data-rating-tier="5"] { color: #cf9d3e; }
.review-chat-rating[data-rating-tier="4"] { color: #c6ccd1; }
.review-chat-rating[data-rating-tier="3"] { color: #b9783c; }
.review-chat-rating[data-rating-tier="2"] { color: #7b4b2b; }
.review-chat-rating[data-rating-tier="1"] { color: #b83b32; }

.review-chat-body {
  margin: 0;
  line-height: 1.38;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: rgba(255,255,255,.96);
}

.review-chat-meta {
  display: flex;
  gap: 7px;
  margin-top: 10px;
  color: rgba(175,165,148,.36);
  font-size: 9px;
  text-shadow: none;
}

.review-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  text-align: center;
  font-family: 'RDRLedger', Georgia, serif;
  color: rgba(181,171,153,.44);
}

/* Keep both Reviews panels aligned on desktop. The writing field fills its
   remaining space instead of being pinned beneath a large empty area. */
@media (min-width: 1121px) {
  .review-layout {
    align-items: stretch;
  }

  .review-compose,
  .review-public {
    height: 560px;
  }

  .review-compose .review-menu-shell {
    height: 560px;
    min-height: 560px;
    padding-bottom: 10px;
  }

  .review-compose .review-menu-header {
    flex-basis: 145px;
    min-height: 145px;
  }

  .review-compose .review-menu-title {
    top: 0;
    width: 410px;
    height: 142px;
    font-size: 36px;
  }

  .review-compose .review-menu-row.menu-row {
    height: 40px;
    flex-basis: 40px;
  }

  .review-compose .review-menu-dropdown {
    height: 40px;
  }

  .review-compose .review-menu-writing-space {
    min-height: 0;
    margin-top: 6px;
  }

  .review-compose .review-menu-textarea {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
    height: auto;
    min-height: 0;
    max-height: none;
    resize: none;
  }

  .review-compose .review-menu-statusline {
    min-height: 30px;
    padding-top: 4px;
  }

  .review-compose .review-auth-detail {
    min-height: 18px;
    padding-top: 1px;
  }

  .review-chat-feed-panel {
    height: 560px;
    min-height: 0;
  }

  .review-list.review-chat-messages {
    min-height: 0;
    max-height: none;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1120px) {
  .review-layout {
    grid-template-columns: 1fr;
  }

  .review-menu-shell {
    margin: 0 auto;
  }
}

@media (max-width: 620px) {
  .review-menu-shell {
    width: min(540px, 100%);
    min-height: 650px;
    padding-left: clamp(16px, 8vw, 54px);
    padding-right: clamp(16px, 8vw, 54px);
  }

  .review-menu-title {
    width: min(472px, calc(100vw - 32px));
  }

  .review-menu-row.menu-row,
  .review-menu-row.review-menu-static-row,
  .review-rating-field.review-menu-row {
    width: 100%;
  }

  .review-menu-dropdown {
    width: 100%;
  }
}

/* ==========================================================================
   BRK asset-first UI overrides
   Use supplied BRK/RDR artwork before CSS-drawn stand-ins.
   ========================================================================== */

/* Standard rectangular selected state:
   selected.png is the real static artwork; animated flow rides above it. */
.menu-row.is-focused,
.stage-row.is-focused,
.resource-card.is-focused,
.section-row.is-focused {
  border: 0 !important;
}

.is-focused > .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url('assets/ui/selected.png')
    center / 100% 100% no-repeat !important;
  opacity: 1;
  filter:
    drop-shadow(0 0 3px var(--browse-highlight))
    drop-shadow(0 0 1px rgba(0,0,0,.85));
  -webkit-mask: none !important;
  mask: none !important;
  animation: none !important;
  pointer-events: none;
}

/* Animated BRK red/gold treatment stays on top of the real selected asset. */
.is-focused > .row-border-flow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation:
    menu-border-flow
    var(--browse-duration)
    linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--browse-opacity);
}

.review-menu-select-button:hover > .row-border-flow,
.review-menu-select-button:focus-visible > .row-border-flow,
.review-menu-select-button.is-focused > .row-border-flow,
.review-menu-dropdown.is-open .review-menu-select-button > .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* Supplied RDR directional button artwork replaces text glyph arrows. */
.card-arrow {
  width: 23px;
  height: 23px;
  min-width: 23px;
  display: block;
  font-size: 0 !important;
  color: transparent !important;
  background:
    url('assets/ui/button_3_img.png')
    center / contain no-repeat;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.95))
    brightness(.86);
}

.resource-card.is-focused .card-arrow,
.resource-card:hover .card-arrow {
  filter:
    drop-shadow(0 0 4px rgba(139,24,13,.52))
    brightness(1.08);
}

/* Generic docs/external rows that end in a literal › receive the right-arrow
   artwork without requiring every resource module to be rewritten. */
.doc-link-button > span:last-child {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: block;
  overflow: hidden;
  font-size: 0;
  background:
    url('assets/ui/button_3_img.png')
    center / contain no-repeat;
}

/* Screenshot / Chat video carousels use the actual RDR left/right buttons. */
.showcase-carousel-control {
  width: 38px;
  height: 64px;
  overflow: hidden;
  font-size: 0 !important;
  color: transparent !important;
  background-position: center !important;
  background-size: 31px 31px !important;
  background-repeat: no-repeat !important;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.95))
    brightness(.76);
  transition:
    filter .16s ease,
    transform .16s ease;
}

.showcase-carousel-control.previous {
  background-image: url('assets/ui/button_2_img.png') !important;
}

.showcase-carousel-control.next {
  background-image: url('assets/ui/button_3_img.png') !important;
}

.showcase-carousel-control:hover,
.showcase-carousel-control:focus-visible,
.showcase-carousel-control.is-focused {
  filter:
    drop-shadow(0 0 5px rgba(150,27,16,.62))
    brightness(1.12);
  transform: scale(1.07);
}

/* Preserve purpose-built square/frame assets where they are a better match.
   These declarations make that intent explicit and prevent generic overrides. */
.notify-gift-slot-border {
  background-image:
    url('assets/resources/notify/ui/border_red_square.png') !important;
}

.notify-frame-stage-wrap::before,
.rp-dice-preview::before {
  border-image-source:
    url('assets/ui/interaction_frame.png') !important;
}


/*__________________________________________________________________________________*/
/* BRK Tools                                                                        */
/*__________________________________________________________________________________*/

.tools-directory-intro,
.tools-directory-copy {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto 30px;
}

.tools-directory-intro {
  padding: 16px 22px;
  background: url('assets/ui/hud_location_bg2.png') center / 100% 100% no-repeat;
  color: rgba(242, 232, 208, 0.76);
  text-align: center;
  line-height: 1.65;
}

.tools-directory-copy > h2 {
  margin: 38px 0 14px;
  color: #eee2c6;
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  letter-spacing: 0.04em;
}

.tools-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 720px) {
  .tools-link-grid {
    grid-template-columns: 1fr;
  }
}

.tools-tool-view {
  display: none;
}

.tools-tool-view.is-active {
  display: flex;
  flex-direction: column;
}

.tools-tool-view[data-view="tools-config-syntax"] > .stage-heading {
  width: min(820px, 100%);
  margin: clamp(34px, 5vh, 68px) auto clamp(30px, 4vh, 50px);
}

.tools-tool-view[data-view="tools-config-syntax"] > .stage-heading h1 {
  margin: 0;
  text-align: center;
}

.tools-tool-view[data-view="tools-config-syntax"] > .stage-heading .stage-divider {
  display: none;
}

.tools-tool-view[data-view="tools-webhook-embed"] > .stage-heading .stage-divider {
  display: none;
}

.tools-embed-shell {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  height: min(84vh, 1020px);
  min-height: 680px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
}

.tools-embed-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #050403;
}

@media (max-width: 720px) {
  .tools-embed-shell {
    margin-top: 4px;
    height: max(840px, calc(100svh - 140px));
    min-height: 840px;
  }

  .tools-embed-frame {
    height: 100%;
    min-height: 0;
  }
}

.console-banner-lab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 0;
  margin-top: 16px;
  min-height: min(72vh, 760px);
}

.console-banner-editor-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(92%, 720px);
}

.console-banner-editor-frame {
  width: 100%;
  height: min(58vh, 520px);
  border: 0;
  outline: 0;
  background: transparent;
}

.console-banner-options {
  width: 100%;
  grid-template-columns: 1fr;
}

.console-banner-options .chat-command-row {
  grid-template-columns: minmax(72px, .42fr) minmax(0, 1fr);
}

.console-banner-preview-frame {
  width: min(92%, 760px);
  height: min(70vh, 640px);
  border: 0;
  outline: 0;
  background: #000;
}

/*__________________________________________________________________________________*/
/* BRK Games / Pony Merge                                                           */
/*__________________________________________________________________________________*/

.games-game-view {
  display: none;
}

.games-game-view.is-active {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 2px;
  row-gap: 0;
  align-items: start;
  min-height: 0;
  padding: 4px 10px 16px 0;
}

.games-game-view .stage-heading {
  grid-column: 2;
  grid-row: 1;
  /* Mirrors the play area's own width formula (pm-play-row inside the
     iframe) so this box is exactly as wide as the visible red-framed play
     area, instead of the whole (wider) grid column. The +10px left margin
     matches the play area's actual left edge: frame-shell sits -18px off
     the column's left edge, then the iframe's own 28px left padding (glow
     bleed room) pushes the real content in by 28px, net +10px. */
  width: min(calc((100% - 188px) * 1.15), min(104.98vh, 1168.5px));
  margin: 0 0 0 10px;
  text-align: center;
}

.pony-merge-host {
  display: contents;
}

.pony-merge-mobile-play-row {
  display: none;
}

.pony-merge-menu.review-menu-shell {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 540px;
  height: min(97vh, 1020px);
  min-height: min(97vh, 1020px);
  max-height: none;
  margin-left: -10px;
  opacity: .9;
}

.pony-merge-menu .review-menu-rows {
  flex: 1 1 auto;
  min-height: 0;
}

.pony-merge-menu .resource-menu-filler {
  flex: 0 0 0;
  min-height: 0;
  display: none;
}

.pony-merge-menu .review-menu-row.menu-row,
.pony-merge-menu .review-menu-row.review-menu-static-row {
  width: 432px;
  height: 52px;
  flex: 0 0 52px;
}

.pony-merge-scoreboard-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  width: 432px;
  max-width: 100%;
}

.pony-merge-personal-best-row {
  cursor: default;
}

.pony-merge-leaderboard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px 6px 14px;
}

.pony-merge-leaderboard-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 5px;
  flex: 0 0 auto;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 20px;
  line-height: 1.16;
  letter-spacing: .22px;
}

.pony-merge-leaderboard-rank {
  position: relative;
  justify-self: start;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 18px;
  letter-spacing: .15px;
  white-space: nowrap;
}

.pony-merge-leaderboard-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pony-merge-leaderboard-score {
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
}

.pony-merge-leaderboard-row.is-filled .pony-merge-leaderboard-name,
.pony-merge-leaderboard-row.is-filled .pony-merge-leaderboard-score {
  color: rgba(236, 228, 210, .92);
}

.pony-merge-rank-1 .pony-merge-leaderboard-rank,
.pony-merge-rank-1.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-1.is-filled .pony-merge-leaderboard-score {
  color: #f0cf73;
  text-shadow:
    0 0 10px rgba(255, 203, 92, .42),
    0 1px 2px rgba(0, 0, 0, .95);
}

.pony-merge-rank-2 .pony-merge-leaderboard-rank,
.pony-merge-rank-2.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-2.is-filled .pony-merge-leaderboard-score {
  color: #d8dde6;
  text-shadow:
    0 0 8px rgba(198, 208, 222, .34),
    0 1px 2px rgba(0, 0, 0, .95);
}

.pony-merge-rank-3 .pony-merge-leaderboard-rank,
.pony-merge-rank-3.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-3.is-filled .pony-merge-leaderboard-score {
  color: #cd9658;
  text-shadow:
    0 0 8px rgba(205, 132, 70, .34),
    0 1px 2px rgba(0, 0, 0, .95);
}

.pony-merge-rank-4 .pony-merge-leaderboard-rank,
.pony-merge-rank-4.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-4.is-filled .pony-merge-leaderboard-score {
  color: #aeb9c7;
  text-shadow:
    0 0 6px rgba(150, 166, 186, .24),
    0 1px 2px rgba(0, 0, 0, .92);
}

.pony-merge-rank-5 .pony-merge-leaderboard-rank,
.pony-merge-rank-5 .pony-merge-leaderboard-name,
.pony-merge-rank-5 .pony-merge-leaderboard-score,
.pony-merge-rank-5.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-5.is-filled .pony-merge-leaderboard-score,
.pony-merge-rank-6 .pony-merge-leaderboard-rank,
.pony-merge-rank-6 .pony-merge-leaderboard-name,
.pony-merge-rank-6 .pony-merge-leaderboard-score,
.pony-merge-rank-6.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-6.is-filled .pony-merge-leaderboard-score,
.pony-merge-rank-7 .pony-merge-leaderboard-rank,
.pony-merge-rank-7 .pony-merge-leaderboard-name,
.pony-merge-rank-7 .pony-merge-leaderboard-score,
.pony-merge-rank-7.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-7.is-filled .pony-merge-leaderboard-score,
.pony-merge-rank-8 .pony-merge-leaderboard-rank,
.pony-merge-rank-8 .pony-merge-leaderboard-name,
.pony-merge-rank-8 .pony-merge-leaderboard-score,
.pony-merge-rank-8.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-8.is-filled .pony-merge-leaderboard-score,
.pony-merge-rank-9 .pony-merge-leaderboard-rank,
.pony-merge-rank-9 .pony-merge-leaderboard-name,
.pony-merge-rank-9 .pony-merge-leaderboard-score,
.pony-merge-rank-9.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-9.is-filled .pony-merge-leaderboard-score,
.pony-merge-rank-10 .pony-merge-leaderboard-rank,
.pony-merge-rank-10 .pony-merge-leaderboard-name,
.pony-merge-rank-10 .pony-merge-leaderboard-score,
.pony-merge-rank-10.is-filled .pony-merge-leaderboard-name,
.pony-merge-rank-10.is-filled .pony-merge-leaderboard-score {
  color: var(--text-muted);
  text-shadow: none;
}

.pony-merge-rank-1 .pony-merge-leaderboard-rank {
  text-shadow:
    0 0 12px rgba(255, 203, 92, .55),
    0 0 4px rgba(255, 236, 170, .28),
    0 1px 2px rgba(0, 0, 0, .95);
}

.pony-merge-rank-1.is-filled .pony-merge-leaderboard-name {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.pony-merge-rank-1.is-filled .pony-merge-leaderboard-name::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 1px;
  width: 18px;
  height: 15px;
  transform: rotate(-22deg);
  transform-origin: 20% 100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Crect x='2' y='14' width='20' height='5' rx='1.8' fill='%23b8842f'/%3E%3Cpath d='M3.2 14.2 6 4.6Q7.4 8.8 9 6.8L12 2.8l3 4Q16.6 8.8 18 4.6l2.8 9.6Z' fill='%23ffd54a' stroke='%23c9942f' stroke-width='.9' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='9.2' r='1.35' fill='%23fff8c8'/%3E%3Ccircle cx='12' cy='6.1' r='1.55' fill='%23fff8c8'/%3E%3Ccircle cx='15' cy='9.2' r='1.35' fill='%23fff8c8'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, .88))
    drop-shadow(0 0 5px rgba(255, 203, 92, .38));
  pointer-events: none;
}

.pony-merge-statusline.hidden {
  display: none;
}

.pony-merge-board-rows {
  display: contents;
}

.pony-merge-style-row {
  cursor: default;
}

.pony-merge-style-label {
  position: relative;
  z-index: 4;
  min-width: 0;
  justify-self: end;
}

.pony-merge-style {
  width: auto;
  max-width: 160px;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  text-align: right;
  padding: 0;
  cursor: pointer;
}

.pony-merge-frame-shell {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  min-width: 0;
  min-height: 0;
  width: calc(100% + 28px);
  margin: -8px 0 0 -18px;
  height: min(97vh, 1080px);
  border: 0;
  background: transparent;
  overflow: visible;
}

.pony-merge-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: min(97vh, 1080px);
  border: 0;
  background: transparent;
}

@media (max-width: 980px) {
  #app.is-games-route.is-subroute:has(.games-game-view[data-mobile-screen="play"].is-active) {
    padding-left: 0;
    padding-right: 0;
  }

  .games-game-view.is-active {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
    padding: 8px 8px 24px;
  }

  .games-game-view.is-active[data-mobile-screen="play"] {
    padding: 8px 0 0;
  }

  .games-game-view .stage-heading {
    width: min(1040px, 100%);
    margin: 0 auto 6px;
    flex: 0 0 auto;
  }

  .games-game-view[data-mobile-screen="scoreboard"] .stage-heading {
    margin: 0 auto 4px;
  }

  .games-game-view[data-mobile-screen="scoreboard"] .stage-kicker {
    display: none;
  }

  .games-game-view[data-mobile-screen="play"] .stage-heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    z-index: 5;
    width: auto;
    height: clamp(64px, 16vw, 90px);
    margin: 0;
    padding: 0 clamp(72px, 23vw, 180px);
    pointer-events: none;
  }

  .games-game-view[data-mobile-screen="play"] .stage-heading h1 {
    margin: clamp(10px, 2.6vw, 18px) 0 0;
    font-size: clamp(26px, 7vw, 48px);
    line-height: .9;
    white-space: nowrap;
  }

  .games-game-view[data-mobile-screen="play"] .stage-divider {
    display: none;
  }

  .pony-merge-host {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    align-self: stretch;
    min-height: 0;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] .pony-merge-menu.review-menu-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: min(540px, calc(100vw - 32px));
    height: calc(100dvh - 108px);
    min-height: 620px;
    max-height: none;
    margin: 0 auto;
    padding-bottom: 4px;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] .review-menu-header {
    flex: 0 0 158px;
    min-height: 158px;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] .review-menu-rows {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] .review-menu-rows > .menu-row {
    flex: 0 0 52px;
    height: 52px;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] .pony-merge-scoreboard-block {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] .pony-merge-personal-best-row {
    flex: 0 0 52px;
    height: 52px;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] .pony-merge-leaderboard {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 10px 0 14px;
  }

  .pony-merge-host[data-mobile-screen="scoreboard"] .pony-merge-leaderboard-row {
    flex: 0 0 auto;
    align-items: baseline;
    min-height: 0;
  }

  .pony-merge-mobile-play-row {
    display: grid;
  }

  .pony-merge-host[data-mobile-screen="play"] .pony-merge-menu,
  .pony-merge-host[data-mobile-screen="scoreboard"] .pony-merge-frame-shell {
    display: none;
  }

  .pony-merge-menu.review-menu-shell {
    grid-column: auto;
    grid-row: auto;
    width: min(540px, calc(100vw - 32px));
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    flex: 1 1 auto;
  }

  .pony-merge-menu .review-menu-header {
    flex: 0 0 176px;
    min-height: 176px;
  }

  .pony-merge-menu .review-menu-row.menu-row,
  .pony-merge-menu .review-menu-row.review-menu-static-row,
  .pony-merge-scoreboard-block {
    width: 100%;
  }

  .pony-merge-frame-shell,
  .pony-merge-frame {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    margin: 0;
    min-height: min(80vh, 820px);
    height: min(80vh, 820px);
  }

  .games-game-view[data-mobile-screen="play"] .pony-merge-frame-shell {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 2 / 3;
    margin: 4px 0 0;
  }

  .games-game-view[data-mobile-screen="play"] .pony-merge-frame {
    height: 100%;
    min-height: 0;
  }
}

/* ==========================================================================
   Map docs hero image (Resources > Maps > YMAP / XML)
   ========================================================================== */

.doc-list {
  margin: 10px 0 0;
  padding-left: 20px;
  list-style: disc;
  color: rgba(214, 205, 189, .84);
  font-size: 13px;
  line-height: 1.62;
}

ol.doc-list {
  list-style: decimal;
}

.doc-list li {
  margin: 0 0 6px;
}

.doc-list li strong {
  color: rgba(238, 230, 213, .95);
}

.doc-map-hero {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 0 18px;
  border: 1px solid rgba(225, 215, 193, .12);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .55);
}

.doc-map-media {
  margin: 0;
  max-width: min(880px, 100%);
}

.doc-map-media-frame {
  border: 2px solid var(--browse-primary);
  box-shadow:
    inset 0 0 0 1px rgba(95,0,0,.48),
    0 0 8px var(--browse-highlight);
}

.doc-map-media-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 610px;
  object-fit: contain;
}

.doc-map-media-frame > .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: 2px solid var(--browse-primary);
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 3px var(--browse-highlight));
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .doc-map-media-frame > .row-border-flow {
    padding: 2px;
    border: 0;
    background: conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
    animation: menu-border-flow var(--browse-duration) linear infinite;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

.doc-map-media .showcase-carousel-caption {
  padding-top: 8px;
}

/* ==========================================================================
   Under Construction overlay (reusable docs cover)
   ========================================================================== */

.brk-uc-host {
  position: relative;
}

.brk-uc {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px);
  background: rgba(6, 4, 3, 0.72);
  pointer-events: auto;
}

.brk-uc-panel {
  position: relative;
  width: min(900px, 94%);
  min-height: min(520px, 60vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 58px 64px;
  background:
    linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .55));
  border: 1px solid rgba(225, 215, 193, .10);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .55);
  text-align: center;
}

.brk-uc-border {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-style: solid !important;
  border-width: 24px !important;
  border-radius: 0 !important;
  border-image-source: url('assets/ui/border_red_square.png');
  border-image-slice: 102 85 110 94;
  border-image-width: 24px;
  border-image-repeat: stretch;
  opacity: 1;
  filter:
    drop-shadow(0 0 3px var(--browse-highlight))
    drop-shadow(0 0 1px rgba(0, 0, 0, .85));
}

.brk-uc-border::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: menu-border-flow var(--browse-duration) linear infinite;
}

.brk-uc-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 5;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(237, 229, 212, .92);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .95);
}

.brk-uc-close:focus-visible {
  outline: 1px solid rgba(234, 175, 87, .85);
  outline-offset: 2px;
}

.brk-uc-copy {
  position: relative;
  z-index: 3;
}

.brk-uc-title {
  margin: 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(244, 235, 216, .97);
  text-shadow: 0 3px 3px rgba(0, 0, 0, .95);
}

.brk-uc-subtitle {
  margin: 20px 0 0;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 16px;
  letter-spacing: .4px;
  color: rgba(209, 199, 181, .78);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .92);
}

@media (max-width: 620px) {
  .brk-uc-panel {
    width: min(560px, 96%);
    min-height: 320px;
    padding: 52px 24px 44px;
  }

  .brk-uc-title {
    font-size: 34px;
  }
}

/* ==========================================================================
   Donate popup (same visual language as the Under Construction overlay)
   ========================================================================== */

.brk-donate-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px);
  background: rgba(6, 4, 3, 0.72);
}

.brk-donate-overlay.hidden {
  display: none;
}

.brk-donate-panel {
  position: relative;
  width: min(480px, 92%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 34px 32px;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .62));
  border: 1px solid rgba(225, 215, 193, .10);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .55);
  text-align: center;
}

.brk-donate-border {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-style: solid !important;
  border-width: 24px !important;
  border-radius: 0 !important;
  border-image-source: url('assets/ui/border_red_square.png');
  border-image-slice: 102 85 110 94;
  border-image-width: 24px;
  border-image-repeat: stretch;
  opacity: 1;
  filter:
    drop-shadow(0 0 3px var(--browse-highlight))
    drop-shadow(0 0 1px rgba(0, 0, 0, .85));
}

.brk-donate-border::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: menu-border-flow var(--browse-duration) linear infinite;
}

.brk-donate-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(237, 229, 212, .92);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .95);
}

.brk-donate-close:focus-visible {
  outline: 1px solid rgba(234, 175, 87, .85);
  outline-offset: 2px;
}

.brk-donate-copy {
  position: relative;
  z-index: 3;
  width: 100%;
}

.brk-donate-title {
  margin: 0;
  font-family: 'Redemption', Georgia, serif;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(244, 235, 216, .97);
  text-shadow: 0 3px 3px rgba(0, 0, 0, .95);
}

.brk-donate-text {
  margin: 14px 0 0;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(209, 199, 181, .82);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .92);
}

.brk-donate-links {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.brk-donate-links .menu-row {
  width: 100%;
  height: 48px;
}

@media (max-width: 620px) {
  .brk-donate-panel {
    padding: 34px 20px 26px;
  }

  .brk-donate-title {
    font-size: 30px;
  }
}

/* BRK Menu isolated interactive preview. */
.menu-preview-stage {
  position: relative;
  width: 100%;
  min-height: 620px;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .42)),
    url('assets/ui/inkroller_1a.png') center / 100% 100% no-repeat,
    #080504;
}

/* Nine-slice the frame so its distressed edge keeps the same proportions the
   Notify, RP Dice and Minigames previews use, instead of being stretched to
   100% 100% and warping. */
.menu-preview-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border: 34px solid transparent;
  border-image-source: url('assets/ui/interaction_frame.png');
  border-image-slice: 38;
  border-image-width: 34px;
  border-image-repeat: stretch;
}

/* Same animated BRK glow used by Notify, RP Dice and Minigames. */
.menu-preview-stage::after {
  content: '';
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  padding: 2px;
  opacity: var(--browse-opacity);
  filter: drop-shadow(0 0 4px var(--browse-highlight));
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .menu-preview-stage::after {
    padding: 0;
    background: transparent;
    border: 2px solid var(--browse-primary);
  }
}

.menu-preview-frame {
  position: absolute;
  inset: 24px 28px;
  z-index: 1;
  width: calc(100% - 56px);
  height: calc(100% - 48px);
  border: 0;
  background: #050302;
}

.menu-preview-frame:focus-visible {
  outline: 2px solid rgba(197, 32, 7, .92);
  outline-offset: -4px;
}

@media (max-width: 760px) {
  .menu-preview-stage { min-height: 540px; }
  .menu-preview-frame {
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
  }
}
/* Greyed destination links are unavailable, not inert: selecting one opens
   the shared Under Construction screen. Functional disabled controls keep
   their native disabled behavior. */
.doc-link-button.is-disabled[data-under-construction="true"] {
  cursor: pointer !important;
  pointer-events: auto;
}

.staff-rules-department-stack.staff-rules-boundary-stack .chat-troubleshooting-lead {
  max-width: 980px;
  margin-bottom: 12px !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  line-height: 1.45;
  text-align: left;
}

.staff-rules-boundary-grid {
  gap: 16px;
}

.staff-rules-boundary-card.chat-troubleshooting-card.brk-hud-panel {
  min-height: 0;
  padding: 18px 22px 16px;
}

.staff-rules-boundary-card.chat-troubleshooting-card h2 {
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.05;
  text-align: left;
}

.staff-rules-boundary-card.chat-troubleshooting-card p,
.staff-rules-boundary-card.chat-troubleshooting-card .doc-list {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  text-align: left;
}

.staff-rules-boundary-card .chat-troubleshooting-divider {
  height: 1px;
  margin: 7px 0 9px;
  background: var(--browse-primary);
  opacity: .72;
}

.staff-rules-policy-card.chat-troubleshooting-card.brk-hud-panel {
  min-height: 0;
  padding: 18px 22px 16px;
}

.staff-rules-policy-card.chat-troubleshooting-card h2 {
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.05;
  text-align: left;
}

.staff-rules-policy-card.chat-troubleshooting-card p {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  text-align: left;
}

.staff-rules-policy-card .chat-troubleshooting-divider {
  height: 1px;
  margin: 7px 0 9px;
  background: var(--browse-primary);
  opacity: .72;
}

.staff-rules-revenue-stack .staff-rules-standards-panel.chat-troubleshooting-card h2 {
  font-size: clamp(20px, 1.65vw, 27px);
  line-height: 1.08;
}

.staff-rules-revenue-stack .staff-rules-standards-panel.chat-troubleshooting-card p {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
}

.staff-rules-revenue-stack .staff-rules-standards-item + .staff-rules-standards-item {
  margin-top: 20px;
}

.irp-support-contact.is-disabled {
  opacity: .46;
  cursor: pointer;
  pointer-events: auto;
}

.irp-support-contact.is-disabled:is(:hover, :focus-visible, .is-focused) {
  opacity: .72;
}

.irp-install-link.is-disabled {
  opacity: .46;
  cursor: pointer;
  pointer-events: auto;
}

.irp-install-link.is-disabled:is(:hover, :focus-visible, .is-focused) {
  opacity: .72;
}

.irp-support-subsection {
  padding-top: 16px;
}

.irp-support-subsection + .irp-support-subsection {
  margin-top: 10px;
  border-top: 1px solid rgba(180, 48, 34, .28);
}

.irp-support-subsection h3 {
  margin: 0 0 8px;
  color: rgba(239, 231, 211, .96);
  font-family: var(--font-title);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

/* --- IRP Socials ---------------------------------------------------------- */

.socials-view .socials-stack {
  width: min(880px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.socials-view .socials-grid {
  margin-top: 14px;
}

.socials-view .socials-icon {
  width: 19px;
  height: 19px;
  margin-right: 9px;
  vertical-align: -4px;
  color: rgba(207, 157, 62, .94);
  opacity: .9;
}

.socials-view .brk-link-card:hover .socials-icon,
.socials-view .brk-link-card.is-focused .socials-icon {
  color: rgba(255, 250, 238, .99);
  opacity: 1;
}

/* --- Page ground ----------------------------------------------------------
   Almost every BRK surface - menu rows, link cards, hud panels - is drawn with
   a TRANSLUCENT texture. Inside the shells that is fine, because the shell
   supplies a dark backing. Dropped straight onto a view, the branch backdrop
   shows through and the art washes out to nothing, which is what "the slicing
   is broken" has meant every time a new page went up.

   Put this on the content wrapper of any new view and the art reads properly.
   -------------------------------------------------------------------------- */

.brk-page-ground {
  position: relative;
}

.brk-page-ground::before {
  content: '';
  position: absolute;
  inset: -20px -26px;
  background: linear-gradient(180deg, rgba(8, 5, 5, .58), rgba(5, 3, 3, .9));
  box-shadow: 0 0 50px 26px rgba(5, 3, 3, .6);
  pointer-events: none;
}

.brk-page-ground > * {
  position: relative;
}

/* The divider art is drawn to the width of its heading; unconstrained it
   becomes a giant arrow across the whole page. */
.socials-view .stage-heading {
  width: min(560px, 92%);
  margin: 0 auto;
  text-align: center;
}

/* ==========================================================================
   Current page marker
   Public class: .is-current

   Persistent "you are here" state for menu rows. The focused state only
   survives while the pointer or keyboard is on the row, which left the menu
   blank as soon as you moved away from it. This paints the row belonging to
   the page on screen with the same selected artwork, so the menu always shows
   which panel you are looking at. Hover and keyboard focus layer over it
   using the identical treatment, so the two never fight.
   ========================================================================== */

.menu-row.is-current,
.stage-row.is-current,
.section-row.is-current {
  color: rgba(255, 250, 238, .99) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(95, 0, 0, .48), 0 0 7px var(--browse-highlight);
}

.menu-row.is-current::before,
.stage-row.is-current::before,
.section-row.is-current::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)),
    url('assets/ui/brk_selected_bg.jpg') center var(--brk-bg-y, 50%) / 100% auto no-repeat;
}

.menu-row.is-current::after,
.stage-row.is-current::after,
.section-row.is-current::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .44);
}

.is-current > .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url('assets/ui/selected.png') center / 100% 100% no-repeat;
  opacity: 1;
  filter:
    drop-shadow(0 0 3px var(--browse-highlight))
    drop-shadow(0 0 1px rgba(0, 0, 0, .85));
  -webkit-mask: none;
  mask: none;
  animation: none;
  pointer-events: none;
}

/* --- group heading band -------------------------------------------------- */

/* Splits a single staff page into two labelled sets of cards. Sits in the same
   grid as the cards, spans the full width, and carries no panel art of its own
   so it reads as a divider rather than another card. */
.staff-rules-group-heading {
  grid-column: 1 / -1;
  margin: 46px auto 4px;
  padding: 0 8px;
  width: 100%;
  max-width: 820px;
  text-align: center;
}

.staff-rules-group-heading h2 {
  margin: 0;
  font-family: 'Redemption', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: .98;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(246, 238, 221, .96);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.staff-rules-group-heading .chat-troubleshooting-divider {
  height: 1px;
  margin: 12px auto 0;
  background: var(--browse-primary);
  opacity: .92;
}

@media (max-width: 760px) {
  .staff-rules-group-heading {
    margin-top: 34px;
  }
}


/* The one thing on the Partners landing that asks you to do something, so it
   is pulled off the full-width .brk-link-card grid and centred on its own.
   Width is capped rather than left to `wide` - a centred block that still runs
   the full column reads as another card, not as a button. */
.brk-link-card.partner-cta {
  max-width: 520px;
  /* Sits apart from the Interested? card above it rather than reading as the
     next item in the same stack. */
  margin: 30px auto 0;
  justify-items: center;
  text-align: center;
}


/* --- partner news ----------------------------------------------------------
   Discord announcements drawn on the partners page. Each post is a normal
   card with a byline on top, so it sits in the same rhythm as everything
   else here rather than looking like an embedded feed. */

.partner-news-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.partner-news-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.partner-news-head strong {
  font-family: 'RDRLino', Georgia, serif;
  font-size: 14px;
  letter-spacing: .6px;
  color: var(--browse-accent, rgba(193, 137, 34, .98));
}

.partner-news-when {
  margin-left: auto;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(214, 203, 182, .5);
}

/* Partner artwork is any shape and any size, so it is capped rather than
   trusted to behave. */
.partner-news-image {
  display: block;
  width: 100%;
  max-width: 520px;
  max-height: 340px;
  margin: 12px 0 0;
  object-fit: contain;
  border: 1px solid rgba(110, 110, 110, .26);
  background: rgba(6, 4, 4, .5);
}

.partner-news-embed {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--browse-primary, rgba(95, 1, 1, .98));
  background: rgba(8, 5, 5, .4);
}

.partner-news-embed strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(240, 231, 213, .92);
}

.partner-news-link {
  display: inline-block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--browse-accent, rgba(193, 137, 34, .98));
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(193, 137, 34, .34);
}

.partner-news-link:is(:hover, :focus-visible) {
  outline: none;
  color: #f4ead6;
  border-bottom-color: rgba(244, 234, 214, .7);
}