/* ==========================================================================
   jessica pegula - native palette stylesheet
   canvas: #333333 | text: #D3D3D3 | accents: #66CDAA #6A5ACD #EE82EE #008000
   class prefix: framebdad5-
   font pairing: rounded headings + compact body
   rounded density: small-to-medium radii, comfortable spacing
   ========================================================================== */

:root {
  --framebdad5-canvas: #333333;
  --framebdad5-canvas-deep: #2b2b30;
  --framebdad5-canvas-sunken: #26262b;
  --framebdad5-surface: #3a3a41;
  --framebdad5-surface-lift: #42424a;
  --framebdad5-veil: rgba(255, 255, 255, 0.05);
  --framebdad5-veil-strong: rgba(255, 255, 255, 0.09);
  --framebdad5-line: rgba(211, 211, 211, 0.14);
  --framebdad5-line-strong: rgba(211, 211, 211, 0.28);
  --framebdad5-text: #d3d3d3;
  --framebdad5-text-dim: rgba(211, 211, 211, 0.64);
  --framebdad5-text-faint: rgba(211, 211, 211, 0.44);
  --framebdad5-mint: #66cdaa;
  --framebdad5-mint-soft: rgba(102, 205, 170, 0.16);
  --framebdad5-mint-ink: #0e3527;
  --framebdad5-grape: #6a5acd;
  --framebdad5-grape-soft: rgba(106, 90, 205, 0.22);
  --framebdad5-orchid: #ee82ee;
  --framebdad5-orchid-soft: rgba(238, 130, 238, 0.14);
  --framebdad5-green: #008000;
  --framebdad5-green-glow: rgba(0, 128, 0, 0.45);
  --framebdad5-radius-s: 8px;
  --framebdad5-radius-m: 12px;
  --framebdad5-radius-l: 18px;
  --framebdad5-radius-xl: 24px;
  --framebdad5-font-round: 'Nunito', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --framebdad5-font-compact: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --framebdad5-rail-h: 62px;
  --framebdad5-top-h: 56px;
  --framebdad5-gap: 14px;
  --framebdad5-shadow-card: 0 5px 16px rgba(0, 0, 0, 0.36);
  --framebdad5-shadow-float: 0 10px 28px rgba(0, 0, 0, 0.5);
  --framebdad5-tap: 220ms cubic-bezier(0.33, 0.9, 0.4, 1);
}

/* --------------------------------------------------------------------------
   base
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #232327;
  color: var(--framebdad5-text);
  font-family: var(--framebdad5-font-compact);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--framebdad5-mint);
  text-decoration: none;
}

a:active {
  opacity: 0.82;
}

::selection {
  background: var(--framebdad5-mint);
  color: var(--framebdad5-mint-ink);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--framebdad5-mint);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   phone canvas shell - wide screens keep a centered phone canvas
   -------------------------------------------------------------------------- */

.framebdad5-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--framebdad5-canvas);
  overflow-x: clip;
}

.framebdad5-skip {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 120;
  padding: 10px 16px;
  border-radius: var(--framebdad5-radius-s);
  background: var(--framebdad5-mint);
  color: var(--framebdad5-mint-ink);
  font-weight: 700;
  transition: top 180ms ease;
}

.framebdad5-skip:focus {
  top: 8px;
}

/* scroll lock while the route sheet is open */
body.framebdad5-noScroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   top band - minimal title and action strip
   -------------------------------------------------------------------------- */

.framebdad5-top {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--framebdad5-top-h);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 12px;
  padding-top: env(safe-area-inset-top);
  background: rgba(43, 43, 48, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--framebdad5-line);
}

.framebdad5-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--framebdad5-mint) 0%,
    var(--framebdad5-orchid) 48%,
    var(--framebdad5-grape) 100%);
  opacity: 0.85;
}

.framebdad5-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1 1 auto;
}

.framebdad5-logo {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--framebdad5-mint);
  box-shadow: 0 0 0 3px rgba(102, 205, 170, 0.18);
  object-fit: cover;
  background: var(--framebdad5-canvas-sunken);
}

.framebdad5-brandName {
  display: block;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.05;
  color: #ffffff;
  letter-spacing: 0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.framebdad5-brandName em {
  font-style: normal;
  color: var(--framebdad5-mint);
}

.framebdad5-topActs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

/* compact icon + text CTA buttons */

.framebdad5-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: transform var(--framebdad5-tap), box-shadow var(--framebdad5-tap),
    background var(--framebdad5-tap), color var(--framebdad5-tap);
}

.framebdad5-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform var(--framebdad5-tap);
}

.framebdad5-btn:active {
  transform: scale(0.94);
}

.framebdad5-btn:active svg {
  transform: scale(0.86);
}

.framebdad5-btnRegister {
  background: linear-gradient(135deg, #7ddcb9 0%, var(--framebdad5-mint) 55%, #4fb890 100%);
  color: var(--framebdad5-mint-ink);
  box-shadow: 0 3px 10px rgba(102, 205, 170, 0.35);
}

.framebdad5-btnRegister:active {
  box-shadow: 0 1px 4px rgba(102, 205, 170, 0.3);
}

.framebdad5-btnLogin {
  background: var(--framebdad5-veil);
  color: var(--framebdad5-text);
  border: 1px solid var(--framebdad5-line-strong);
}

.framebdad5-btnLogin:active {
  background: var(--framebdad5-veil-strong);
}

/* burger trigger */

.framebdad5-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--framebdad5-veil);
  border: 1px solid var(--framebdad5-line);
  align-items: center;
  transition: transform var(--framebdad5-tap), background var(--framebdad5-tap);
}

.framebdad5-burger:active {
  transform: scale(0.92);
}

.framebdad5-burger span {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--framebdad5-mint);
  transition: transform var(--framebdad5-tap), opacity 160ms ease, width var(--framebdad5-tap);
}

.framebdad5-burger.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.framebdad5-burger.is-open span:nth-child(2) {
  opacity: 0;
  width: 9px;
}

.framebdad5-burger.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   slide-up route sheet (expandable menu)
   -------------------------------------------------------------------------- */

.framebdad5-sheetWrap {
  position: fixed;
  inset: 0;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  pointer-events: none;
  visibility: hidden;
}

.framebdad5-sheetWrap.is-open {
  pointer-events: auto;
  visibility: visible;
}

.framebdad5-sheetDim {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 22, 0.66);
  opacity: 0;
  transition: opacity 260ms ease;
}

.framebdad5-sheetWrap.is-open .framebdad5-sheetDim {
  opacity: 1;
}

.framebdad5-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(78vh, 620px);
  overflow-y: auto;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #3d3d45 0%, var(--framebdad5-canvas-deep) 62%);
  border-radius: var(--framebdad5-radius-xl) var(--framebdad5-radius-xl) 0 0;
  border-top: 1px solid var(--framebdad5-line-strong);
  box-shadow: var(--framebdad5-shadow-float);
  transform: translateY(104%);
  transition: transform 320ms cubic-bezier(0.32, 0.95, 0.42, 1);
}

.framebdad5-sheetWrap.is-open .framebdad5-sheet {
  transform: translateY(0);
}

.framebdad5-sheetGrab {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  margin: 4px auto 12px;
  background: var(--framebdad5-line-strong);
}

.framebdad5-sheetCta {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.framebdad5-sheetCta .framebdad5-btn {
  flex: 1 1 0;
  min-height: 44px;
  font-size: 14px;
}

.framebdad5-sheetGroup {
  margin: 0 0 6px;
}

.framebdad5-sheetLabel {
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--framebdad5-orchid);
  margin: 12px 2px 7px;
}

.framebdad5-sheetLink {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: var(--framebdad5-radius-m);
  color: var(--framebdad5-text);
  font-weight: 700;
  font-size: 15px;
  transition: background 180ms ease, transform var(--framebdad5-tap);
}

.framebdad5-sheetLink:active {
  background: var(--framebdad5-veil-strong);
  transform: scale(0.985);
}

.framebdad5-sheetLink .framebdad5-sheetDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--framebdad5-grape);
  box-shadow: 0 0 0 3px var(--framebdad5-grape-soft);
  flex: 0 0 auto;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.framebdad5-sheetLink .framebdad5-sheetTail {
  margin-left: auto;
  color: var(--framebdad5-text-faint);
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}

.framebdad5-sheetLink.is-here {
  background: var(--framebdad5-mint-soft);
  color: #ffffff;
}

.framebdad5-sheetLink.is-here .framebdad5-sheetDot {
  background: var(--framebdad5-mint);
  box-shadow: 0 0 0 3px rgba(102, 205, 170, 0.28);
}

/* --------------------------------------------------------------------------
   main column
   -------------------------------------------------------------------------- */

.framebdad5-main {
  padding: calc(var(--framebdad5-top-h) + env(safe-area-inset-top) + 14px) 14px
    calc(var(--framebdad5-rail-h) + env(safe-area-inset-bottom) + 34px);
}

.framebdad5-lead {
  font-size: 16px;
}

/* hero block */

.framebdad5-hero {
  padding: 4px 2px 2px;
}

.framebdad5-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--framebdad5-orchid);
  margin: 0 0 8px;
}

.framebdad5-kicker::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--framebdad5-orchid), var(--framebdad5-grape));
}

h1.framebdad5-h1 {
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: #ffffff;
  margin: 0 0 12px;
}

h1.framebdad5-h1 mark {
  background: none;
  color: var(--framebdad5-mint);
}

.framebdad5-hero p {
  margin: 0 0 12px;
  color: var(--framebdad5-text);
}

h2.framebdad5-h2 {
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.22;
  color: #ffffff;
  margin: 0 0 10px;
}

h3.framebdad5-h3 {
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--framebdad5-mint);
  margin: 16px 0 6px;
}

.framebdad5-p {
  margin: 0 0 12px;
  color: var(--framebdad5-text);
}

.framebdad5-dim {
  color: var(--framebdad5-text-dim);
}

/* --------------------------------------------------------------------------
   banner carousel
   -------------------------------------------------------------------------- */

.framebdad5-carousel {
  position: relative;
  margin: 14px 0 18px;
  border-radius: var(--framebdad5-radius-l);
  overflow: hidden;
  box-shadow: var(--framebdad5-shadow-card);
  border: 1px solid var(--framebdad5-line);
}

.framebdad5-slideTrack {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.framebdad5-slideTrack::-webkit-scrollbar {
  display: none;
}

.framebdad5-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  padding: 0;
  text-align: left;
}

.framebdad5-slideImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.framebdad5-slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(38, 38, 43, 0) 0%, rgba(24, 24, 28, 0.88) 100%);
  pointer-events: none;
}

.framebdad5-slideCap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.framebdad5-slideChip {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--framebdad5-green);
  color: #eaffea;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 12px var(--framebdad5-green-glow);
}

.framebdad5-slideTxt {
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.28;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.framebdad5-dots {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.framebdad5-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.framebdad5-dot i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(211, 211, 211, 0.5);
  transition: width 200ms ease, background 200ms ease;
}

.framebdad5-dot:active i {
  transform: scale(0.8);
}

.framebdad5-dot.is-on i {
  width: 18px;
  background: var(--framebdad5-mint);
}

/* --------------------------------------------------------------------------
   scene branch strip - pick your entry
   -------------------------------------------------------------------------- */

.framebdad5-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 24px;
}

.framebdad5-branch {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 11px;
  min-height: 66px;
  border-radius: var(--framebdad5-radius-m);
  background: var(--framebdad5-veil);
  border: 1px solid var(--framebdad5-line);
  text-align: left;
  transition: transform var(--framebdad5-tap), background var(--framebdad5-tap),
    border-color var(--framebdad5-tap);
}

.framebdad5-branch:active {
  transform: scale(0.965);
  background: var(--framebdad5-veil-strong);
  border-color: var(--framebdad5-line-strong);
}

.framebdad5-branchIco {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--framebdad5-grape-soft);
  color: var(--framebdad5-orchid);
  transition: transform var(--framebdad5-tap);
}

.framebdad5-branch:active .framebdad5-branchIco {
  transform: rotate(-8deg) scale(0.92);
}

.framebdad5-branchIco svg {
  width: 16px;
  height: 16px;
}

.framebdad5-branchName {
  display: block;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 13.5px;
  color: #ffffff;
  margin: 2px 0 3px;
}

.framebdad5-branchSub {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--framebdad5-text-dim);
}

/* --------------------------------------------------------------------------
   game sections - floating image cards grid
   -------------------------------------------------------------------------- */

.framebdad5-gameSection {
  margin: 0 0 26px;
  scroll-margin-top: calc(var(--framebdad5-top-h) + 12px);
}

.framebdad5-secHead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.framebdad5-count {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--framebdad5-grape-soft);
  border: 1px solid rgba(106, 90, 205, 0.45);
  color: #cdc4f5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.framebdad5-secIntro {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--framebdad5-text-dim);
}

.framebdad5-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.framebdad5-gameCard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 6px 8px;
  border-radius: var(--framebdad5-radius-m);
  background: linear-gradient(180deg, var(--framebdad5-veil) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--framebdad5-line);
  box-shadow: var(--framebdad5-shadow-card);
  text-align: center;
  transition: transform var(--framebdad5-tap), box-shadow var(--framebdad5-tap),
    border-color var(--framebdad5-tap);
}

.framebdad5-gameCard:active {
  transform: translateY(2px) scale(0.955);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border-color: rgba(102, 205, 170, 0.55);
}

.framebdad5-gameArt {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  object-fit: cover;
  background: var(--framebdad5-canvas-sunken);
}

.framebdad5-gameName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--framebdad5-text);
  min-height: 2.5em;
}

/* --------------------------------------------------------------------------
   content module panels - varied shapes per module
   -------------------------------------------------------------------------- */

.framebdad5-panel {
  margin: 0 0 26px;
  padding: 15px 14px 17px;
  border-radius: var(--framebdad5-radius-l);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--framebdad5-canvas-deep);
  border: 1px solid var(--framebdad5-line);
  scroll-margin-top: calc(var(--framebdad5-top-h) + 12px);
}

.framebdad5-panelMint {
  border-color: rgba(102, 205, 170, 0.34);
}

.framebdad5-panelGrape {
  border-color: rgba(106, 90, 205, 0.42);
}

.framebdad5-panelOrchid {
  border-color: rgba(238, 130, 238, 0.3);
}

/* fact rows (rtp module) */

.framebdad5-factRow {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px dashed var(--framebdad5-line);
}

.framebdad5-factRow:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.framebdad5-factTag {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--framebdad5-mint);
  color: var(--framebdad5-mint-ink);
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.framebdad5-factBody {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--framebdad5-text);
}

/* compare rows (play styles) */

.framebdad5-styleRow {
  display: grid;
  grid-template-columns: minmax(86px, 34%) 1fr;
  gap: 4px 10px;
  padding: 10px 10px 11px;
  margin-bottom: 8px;
  border-radius: var(--framebdad5-radius-m);
  background: var(--framebdad5-veil);
  border-left: 3px solid var(--framebdad5-orchid);
}

.framebdad5-styleRow:nth-child(2) { border-left-color: var(--framebdad5-mint); }
.framebdad5-styleRow:nth-child(3) { border-left-color: var(--framebdad5-grape); }
.framebdad5-styleRow:nth-child(4) { border-left-color: var(--framebdad5-green); }
.framebdad5-styleRow:nth-child(5) { border-left-color: var(--framebdad5-orchid); }

.framebdad5-styleName {
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 13px;
  color: #ffffff;
  line-height: 1.3;
}

.framebdad5-styleWatch {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--framebdad5-text-dim);
  grid-column: 1 / -1;
}

.framebdad5-styleWatch b {
  color: var(--framebdad5-mint);
  font-weight: 700;
}

/* milestone timeline (achievements) */

.framebdad5-timeline {
  position: relative;
  margin: 14px 0 6px;
  padding-left: 22px;
}

.framebdad5-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--framebdad5-mint), var(--framebdad5-grape) 70%, var(--framebdad5-orchid));
  opacity: 0.65;
}

.framebdad5-mile {
  position: relative;
  padding: 0 0 14px;
}

.framebdad5-mile:last-child {
  padding-bottom: 2px;
}

.framebdad5-mile::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--framebdad5-canvas);
  border: 2.5px solid var(--framebdad5-mint);
  box-shadow: 0 0 0 3px rgba(102, 205, 170, 0.14);
}

.framebdad5-mile:nth-child(2)::before { border-color: var(--framebdad5-orchid); box-shadow: 0 0 0 3px var(--framebdad5-orchid-soft); }
.framebdad5-mile:nth-child(3)::before { border-color: var(--framebdad5-grape); box-shadow: 0 0 0 3px var(--framebdad5-grape-soft); }
.framebdad5-mile:nth-child(4)::before { border-color: var(--framebdad5-green); box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.25); }

.framebdad5-mile h3 {
  margin: 0 0 3px;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 14px;
  color: #ffffff;
}

.framebdad5-mile p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--framebdad5-text-dim);
}

/* numbered steps (mobile module) */

.framebdad5-steps {
  counter-reset: framebdad5-step;
  margin: 12px 0 8px;
}

.framebdad5-step {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 9px 0;
  counter-increment: framebdad5-step;
}

.framebdad5-step::before {
  content: counter(framebdad5-step);
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--framebdad5-mint-soft);
  border: 1px solid rgba(102, 205, 170, 0.5);
  color: var(--framebdad5-mint);
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 14px;
  transition: transform var(--framebdad5-tap);
}

.framebdad5-step:active::before {
  transform: scale(0.9);
}

.framebdad5-stepBody {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--framebdad5-text);
  padding-top: 4px;
}

.framebdad5-stepBody b {
  color: #ffffff;
}

.framebdad5-tip {
  display: flex;
  gap: 9px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: var(--framebdad5-radius-m);
  background: var(--framebdad5-orchid-soft);
  border: 1px solid rgba(238, 130, 238, 0.32);
  font-size: 13px;
  line-height: 1.5;
  color: var(--framebdad5-text);
}

.framebdad5-tip svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--framebdad5-orchid);
}

/* route cards (selection guide - scenario branches) */

.framebdad5-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0 4px;
}

.framebdad5-route {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px;
  border-radius: var(--framebdad5-radius-m);
  background: var(--framebdad5-veil);
  border: 1px solid var(--framebdad5-line);
  transition: transform var(--framebdad5-tap), border-color var(--framebdad5-tap);
}

.framebdad5-route:active {
  transform: scale(0.965);
  border-color: rgba(102, 205, 170, 0.5);
}

.framebdad5-routeTop {
  display: flex;
  align-items: center;
  gap: 6px;
}

.framebdad5-routeTop svg {
  width: 15px;
  height: 15px;
  color: var(--framebdad5-mint);
  flex: 0 0 auto;
  transition: transform var(--framebdad5-tap);
}

.framebdad5-route:active .framebdad5-routeTop svg {
  transform: translateX(2px);
}

.framebdad5-route h3 {
  margin: 0;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  color: #ffffff;
}

.framebdad5-route p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--framebdad5-text-dim);
}

/* relationship map (entity module) */

.framebdad5-relRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 10px 11px;
  margin-bottom: 8px;
  border-radius: var(--framebdad5-radius-m);
  background: var(--framebdad5-veil);
  border: 1px solid var(--framebdad5-line);
}

.framebdad5-relPair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 13px;
  color: #ffffff;
}

.framebdad5-relPair span {
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--framebdad5-grape-soft);
  border: 1px solid rgba(106, 90, 205, 0.4);
}

.framebdad5-relPair i {
  font-style: normal;
  color: var(--framebdad5-orchid);
  font-size: 14px;
}

.framebdad5-relNote {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--framebdad5-text-dim);
}

/* inline body links */

.framebdad5-bodyLink {
  color: var(--framebdad5-mint);
  font-weight: 700;
  border-bottom: 1px dashed rgba(102, 205, 170, 0.55);
  padding-bottom: 1px;
}

.framebdad5-bodyLink:active {
  color: var(--framebdad5-orchid);
  border-bottom-color: rgba(238, 130, 238, 0.6);
}

/* --------------------------------------------------------------------------
   extended footer - promotions > brand > directory > disclaimer
   -------------------------------------------------------------------------- */

.framebdad5-ext {
  margin: 30px 0 0;
  padding: 16px 14px 18px;
  border-radius: var(--framebdad5-radius-l) var(--framebdad5-radius-l) 0 0;
  background: var(--framebdad5-canvas-sunken);
  border: 1px solid var(--framebdad5-line);
  border-bottom: 0;
}

.framebdad5-extLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--framebdad5-mint);
  margin: 0 0 10px;
}

.framebdad5-extLabel::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--framebdad5-line-strong), transparent);
}

.framebdad5-extBlock {
  margin-bottom: 20px;
}

.framebdad5-extBlock:last-child {
  margin-bottom: 4px;
}

.framebdad5-promoCluster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.framebdad5-promoChip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 11px;
  border-radius: var(--framebdad5-radius-m);
  background: linear-gradient(135deg, rgba(106, 90, 205, 0.4), rgba(102, 205, 170, 0.16));
  border: 1px solid rgba(106, 90, 205, 0.5);
  color: #ffffff;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1.2;
  text-align: left;
  transition: transform var(--framebdad5-tap), box-shadow var(--framebdad5-tap);
}

.framebdad5-promoChip svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--framebdad5-mint);
  transition: transform var(--framebdad5-tap);
}

.framebdad5-promoChip:active {
  transform: scale(0.95);
  box-shadow: 0 2px 10px rgba(106, 90, 205, 0.4);
}

.framebdad5-promoChip:active svg {
  transform: scale(0.85) rotate(-6deg);
}

.framebdad5-brandBlurb {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--framebdad5-text-dim);
  margin: 0;
}

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

.framebdad5-dirGroup {
  min-width: 0;
}

.framebdad5-dirGroup h3 {
  margin: 0 0 7px;
  font-family: var(--framebdad5-font-round);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--framebdad5-orchid);
}

.framebdad5-dirGroup ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.framebdad5-dirGroup li + li {
  margin-top: 7px;
}

.framebdad5-dirGroup a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--framebdad5-mint);
}

.framebdad5-dirGroup a::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--framebdad5-grape);
  transform: translateY(-1px);
  transition: background 180ms ease;
}

.framebdad5-dirGroup a:active::before {
  background: var(--framebdad5-mint);
}

.framebdad5-dirGroup a small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--framebdad5-text-faint);
}

.framebdad5-disclaim {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--framebdad5-line);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--framebdad5-text-faint);
}

/* --------------------------------------------------------------------------
   common footer + bottom rail
   -------------------------------------------------------------------------- */

.framebdad5-foot {
  padding: 12px 14px calc(10px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--framebdad5-text-faint);
  background: var(--framebdad5-canvas-sunken);
}

.framebdad5-foot b {
  color: var(--framebdad5-text-dim);
  font-weight: 700;
}

.framebdad5-rail {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(var(--framebdad5-rail-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(38, 38, 43, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--framebdad5-line-strong);
}

.framebdad5-railItem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 6px 2px 4px;
  color: var(--framebdad5-text-dim);
  transition: color 200ms ease, transform var(--framebdad5-tap);
}

.framebdad5-railItem:active {
  transform: translateY(1px) scale(0.92);
}

.framebdad5-railItem svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 200ms ease, color 200ms ease, transform var(--framebdad5-tap);
}

.framebdad5-railItem:active svg {
  transform: translateY(-1px);
}

.framebdad5-railTxt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.framebdad5-railItem.is-active {
  color: var(--framebdad5-mint);
}

.framebdad5-railItem.is-active svg {
  fill: var(--framebdad5-mint);
  stroke: var(--framebdad5-mint);
}

.framebdad5-railItem.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--framebdad5-mint);
  box-shadow: 0 2px 10px rgba(102, 205, 170, 0.55);
}

.framebdad5-railItem.is-active .framebdad5-railTxt {
  color: #ffffff;
}

.framebdad5-railPromo svg {
  stroke: var(--framebdad5-orchid);
}

.framebdad5-railPromo .framebdad5-railTxt {
  color: var(--framebdad5-orchid);
}

.framebdad5-railPromo:active svg {
  stroke: #ffffff;
}

/* --------------------------------------------------------------------------
   shared inline icons
   -------------------------------------------------------------------------- */

.framebdad5-ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   responsive ladder - stable tracks from 320 up to 430 and beyond
   -------------------------------------------------------------------------- */

@media (min-width: 340px) {
  .framebdad5-branches,
  .framebdad5-routes,
  .framebdad5-promoCluster,
  .framebdad5-dirCols {
    gap: 10px;
  }
}

@media (min-width: 375px) {
  :root {
    --framebdad5-gap: 16px;
  }

  .framebdad5-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  h1.framebdad5-h1 {
    font-size: 29px;
  }

  h2.framebdad5-h2 {
    font-size: 22px;
  }

  .framebdad5-grid {
    gap: 10px;
  }

  .framebdad5-gameName {
    font-size: 12px;
  }
}

@media (min-width: 400px) {
  .framebdad5-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 430px) {
  h1.framebdad5-h1 {
    font-size: 31px;
  }

  h2.framebdad5-h2 {
    font-size: 23px;
  }

  .framebdad5-btn {
    padding: 8px 14px;
    font-size: 13.5px;
  }

  .framebdad5-gameSection {
    margin-bottom: 30px;
  }
}

@media (min-width: 481px) {
  .framebdad5-shell {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 70px rgba(0, 0, 0, 0.55);
  }
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }

  .framebdad5-main {
    padding-left: 22px;
    padding-right: 22px;
  }

  .framebdad5-gameCard:hover {
    transform: translateY(-2px);
    border-color: rgba(102, 205, 170, 0.45);
  }

  .framebdad5-branch:hover,
  .framebdad5-route:hover,
  .framebdad5-promoChip:hover {
    background: var(--framebdad5-veil-strong);
  }

  .framebdad5-sheetLink:hover {
    background: var(--framebdad5-veil);
  }
}

/* --------------------------------------------------------------------------
   help page instruments - checklist and verification layouts
   -------------------------------------------------------------------------- */

.framebdad5-helpHero {
  position: relative;
  padding: 15px 14px 17px;
  margin: 0 0 18px;
  border: 1px solid rgba(102, 205, 170, 0.4);
  border-radius: 8px 24px 8px 24px;
  background: linear-gradient(135deg, rgba(102, 205, 170, 0.18), rgba(106, 90, 205, 0.14) 58%, rgba(238, 130, 238, 0.08));
  overflow: hidden;
}

.framebdad5-helpHero::after {
  content: "";
  position: absolute;
  right: -32px;
  top: -42px;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(238, 130, 238, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(238, 130, 238, 0.06), 0 0 0 28px rgba(106, 90, 205, 0.06);
  pointer-events: none;
}

.framebdad5-helpHero .framebdad5-lead {
  max-width: 40em;
}

.framebdad5-checkGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0 4px;
}

.framebdad5-checkItem {
  min-height: 86px;
  padding: 10px;
  border-radius: 8px 14px 8px 14px;
  background: rgba(38, 38, 43, 0.74);
  border: 1px solid var(--framebdad5-line);
}

.framebdad5-checkMark {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  margin-bottom: 5px;
  border-radius: 7px;
  background: var(--framebdad5-mint);
  color: var(--framebdad5-mint-ink);
  font-family: var(--framebdad5-font-round);
  font-weight: 900;
  font-size: 13px;
}

.framebdad5-checkItem strong {
  display: block;
  color: #ffffff;
  font-family: var(--framebdad5-font-round);
  font-size: 13px;
  line-height: 1.25;
}

.framebdad5-checkItem span {
  display: block;
  margin-top: 3px;
  color: var(--framebdad5-text-dim);
  font-size: 12px;
  line-height: 1.4;
}

.framebdad5-ledger {
  margin: 13px 0 4px;
  border-top: 1px solid var(--framebdad5-line-strong);
}

.framebdad5-ledgerRow {
  display: grid;
  grid-template-columns: minmax(88px, 31%) 1fr;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--framebdad5-line);
}

.framebdad5-ledgerTerm {
  color: var(--framebdad5-orchid);
  font-family: var(--framebdad5-font-round);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.framebdad5-ledgerRow p {
  margin: 0;
  color: var(--framebdad5-text);
  font-size: 13px;
  line-height: 1.5;
}

.framebdad5-answerStack {
  margin: 12px 0 2px;
}

.framebdad5-answer {
  padding: 12px 12px 13px;
  margin: 0 0 9px;
  border-left: 3px solid var(--framebdad5-mint);
  border-radius: 4px 12px 12px 4px;
  background: var(--framebdad5-veil);
}

.framebdad5-answer:nth-child(2) { border-left-color: var(--framebdad5-orchid); }
.framebdad5-answer:nth-child(3) { border-left-color: var(--framebdad5-grape); }
.framebdad5-answer:nth-child(4) { border-left-color: var(--framebdad5-green); }

.framebdad5-answer h3 {
  margin: 0 0 5px;
  color: #ffffff;
  font-family: var(--framebdad5-font-round);
  font-size: 14px;
  line-height: 1.3;
}

.framebdad5-answer p {
  margin: 0;
  color: var(--framebdad5-text-dim);
  font-size: 13px;
  line-height: 1.52;
}

.framebdad5-helpCta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 2px;
}

.framebdad5-helpCta .framebdad5-btn {
  min-height: 44px;
  flex: 1 1 145px;
}

.framebdad5-safetyHero {
  padding: 16px 14px 18px;
  margin: 0 0 18px;
  border-radius: 26px 8px 26px 8px;
  background: linear-gradient(155deg, rgba(238, 130, 238, 0.18), rgba(106, 90, 205, 0.2) 55%, rgba(0, 128, 0, 0.12));
  border: 1px solid rgba(238, 130, 238, 0.35);
}

.framebdad5-safetySignal {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 11px 12px;
  margin: 10px 0;
  border-radius: 12px;
  background: rgba(38, 38, 43, 0.72);
  border: 1px solid var(--framebdad5-line);
}

.framebdad5-safetySignal::before {
  content: "";
  display: block;
  border-radius: 8px;
  background: var(--framebdad5-mint);
}

.framebdad5-safetySignal[data-level="pause"]::before { background: var(--framebdad5-orchid); }
.framebdad5-safetySignal[data-level="stop"]::before { background: #e5a8e5; }

.framebdad5-safetySignal strong {
  display: block;
  margin-bottom: 3px;
  color: #ffffff;
  font-family: var(--framebdad5-font-round);
  font-size: 14px;
}

.framebdad5-safetySignal p {
  margin: 0;
  color: var(--framebdad5-text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.framebdad5-riskBand {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  margin: 9px 0;
  border-radius: 12px 5px 12px 5px;
  background: linear-gradient(90deg, rgba(106, 90, 205, 0.2), rgba(255, 255, 255, 0.035));
  border: 1px solid var(--framebdad5-line);
}

.framebdad5-riskLevel {
  min-width: 54px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--framebdad5-grape);
  color: #ffffff;
  text-align: center;
  font-family: var(--framebdad5-font-round);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.framebdad5-riskBand strong {
  display: block;
  color: #ffffff;
  font-family: var(--framebdad5-font-round);
  font-size: 13.5px;
  line-height: 1.3;
}

.framebdad5-riskBand p {
  margin: 3px 0 0;
  color: var(--framebdad5-text-dim);
  font-size: 12.8px;
  line-height: 1.48;
}

.framebdad5-verifyFlow {
  display: grid;
  gap: 8px;
  margin: 13px 0 4px;
}

.framebdad5-verifyNode {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  border: 1px solid var(--framebdad5-line);
  border-radius: 14px 6px 14px 6px;
  background: var(--framebdad5-veil);
}

.framebdad5-verifyNode b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--framebdad5-orchid-soft);
  color: var(--framebdad5-orchid);
  font-family: var(--framebdad5-font-round);
  font-size: 14px;
}

.framebdad5-verifyNode strong {
  display: block;
  color: #ffffff;
  font-family: var(--framebdad5-font-round);
  font-size: 13.5px;
}

.framebdad5-verifyNode p {
  margin: 3px 0 0;
  color: var(--framebdad5-text-dim);
  font-size: 12.8px;
  line-height: 1.5;
}

.framebdad5-factList {
  margin: 10px 0 2px;
  padding-left: 18px;
  color: var(--framebdad5-text);
}

.framebdad5-factList li {
  margin: 0 0 8px;
  padding-left: 3px;
  font-size: 13.5px;
  line-height: 1.5;
}

.framebdad5-factList li::marker {
  color: var(--framebdad5-mint);
}

/* --------------------------------------------------------------------------
   motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}