/* ==========================================================================
   h baji · hbaji.sbs · bn-BD
   surface-adaptive-6d8695.css — class prefix: frame8695e-
   Mobile-first canvas 320-430px, centered phone canvas on wide screens.
   Palette: #B22222 (action red) / #CD853F (signal gold) / #2D2D2D (deep base)
   Type pairing: monospace accents over a regular Bengali body face.
   Card form: image with a bottom name bar. Rhythm: question-driven blocks.
   Motion budget: short-distance transitions only.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --frame8695e-red: #b22222;
  --frame8695e-red-hi: #cf3833;
  --frame8695e-red-deep: #7c1717;
  --frame8695e-gold: #cd853f;
  --frame8695e-gold-soft: #e2b076;
  --frame8695e-gold-dim: #96682f;
  --frame8695e-ink: #2d2d2d;
  --frame8695e-bg: #222222;
  --frame8695e-bg-deep: #191919;
  --frame8695e-panel: #2a2a2a;
  --frame8695e-panel-2: #2f2f2f;
  --frame8695e-card: #1e1e1e;
  --frame8695e-bar: #262626;
  --frame8695e-line: #3d3933;
  --frame8695e-line-soft: #34312b;
  --frame8695e-text: #f4eee1;
  --frame8695e-muted: #c9c0af;
  --frame8695e-faint: #a2988a;
  --frame8695e-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Courier New", monospace;
  --frame8695e-body: "Noto Sans Bengali", "Hind Siliguri", "SolaimanLipi", "Kalpurush", system-ui, -apple-system, "Segoe UI", sans-serif;
  --frame8695e-r-lg: 14px;
  --frame8695e-r-md: 10px;
  --frame8695e-r-sm: 7px;
  --frame8695e-tap: 44px;
  --frame8695e-top-h: 58px;
  --frame8695e-bnav-h: 58px;
  --frame8695e-gutter: 14px;
  --frame8695e-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--frame8695e-bg-deep);
  color: var(--frame8695e-text);
  font-family: var(--frame8695e-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-tap-highlight-color: rgba(205, 133, 63, 0.18);
  overflow-wrap: break-word;
}

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

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--frame8695e-gold-soft);
  text-decoration: none;
  border-bottom: 1px dashed rgba(205, 133, 63, 0.45);
}

a:hover {
  color: var(--frame8695e-gold);
  border-bottom-style: solid;
}

:focus-visible {
  outline: 2px solid var(--frame8695e-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Phone canvas: everything lives inside one centered column. */
.frame8695e-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--frame8695e-bg);
  border-left: 1px solid var(--frame8695e-line-soft);
  border-right: 1px solid var(--frame8695e-line-soft);
  overflow-x: hidden;
}

/* Reserve room so the fixed bottom bar never covers the last lines. */
.frame8695e-main {
  display: block;
  padding-bottom: calc(var(--frame8695e-bnav-h) + env(safe-area-inset-bottom, 0px) + 26px);
}

.frame8695e-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================= topbar */
.frame8695e-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--frame8695e-top-h);
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: rgba(25, 25, 25, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--frame8695e-line);
}

.frame8695e-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--frame8695e-tap);
  color: var(--frame8695e-text);
  border-bottom: 0;
}

.frame8695e-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--frame8695e-gold-dim);
  box-shadow: 0 0 0 2px rgba(178, 34, 34, 0.35);
  flex: none;
}

.frame8695e-brand-name {
  font-family: var(--frame8695e-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.frame8695e-brand-name em {
  font-style: normal;
  color: var(--frame8695e-gold);
}

.frame8695e-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.frame8695e-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 13px;
  border-radius: var(--frame8695e-r-sm);
  font-family: var(--frame8695e-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.16s var(--frame8695e-ease), background-color 0.16s var(--frame8695e-ease), color 0.16s var(--frame8695e-ease);
}

.frame8695e-hbtn:active {
  transform: translateY(1px) scale(0.98);
}

.frame8695e-hbtn-register {
  background: linear-gradient(180deg, var(--frame8695e-red-hi), var(--frame8695e-red));
  color: #fff4e6;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}

.frame8695e-hbtn-login {
  background: transparent;
  color: var(--frame8695e-gold-soft);
  border: 1px solid var(--frame8695e-gold-dim);
}

.frame8695e-hbtn-login:active {
  background: rgba(205, 133, 63, 0.14);
}

/* Hamburger: three bars, collapses to two while open. */
.frame8695e-menubtn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--frame8695e-r-sm);
  border: 1px solid var(--frame8695e-line);
  background: var(--frame8695e-panel);
}

.frame8695e-menubtn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--frame8695e-gold);
  transition: transform 0.2s var(--frame8695e-ease), opacity 0.2s var(--frame8695e-ease);
}

.frame8695e-body-open .frame8695e-menubtn span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.frame8695e-body-open .frame8695e-menubtn span:nth-child(2) {
  opacity: 0;
}

.frame8695e-body-open .frame8695e-menubtn span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ============================================================ menu overlay */
.frame8695e-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(22, 22, 22, 0.985);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 0 26px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.22s var(--frame8695e-ease), transform 0.22s var(--frame8695e-ease), visibility 0.22s;
}

.frame8695e-body-open .frame8695e-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.frame8695e-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--frame8695e-line);
  position: sticky;
  top: 0;
  background: rgba(22, 22, 22, 0.98);
}

.frame8695e-menu-head img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--frame8695e-gold-dim);
}

.frame8695e-menu-title {
  font-family: var(--frame8695e-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--frame8695e-gold);
}

.frame8695e-menuclose {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: var(--frame8695e-r-sm);
  border: 1px solid var(--frame8695e-line);
  color: var(--frame8695e-muted);
  font-family: var(--frame8695e-mono);
  font-size: 18px;
  line-height: 1;
}

/* Stacked overlay rows with a sliding left indicator. */
.frame8695e-menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  color: var(--frame8695e-text);
  border-bottom: 1px dashed var(--frame8695e-line-soft);
  border-radius: 0;
  transition: background-color 0.18s var(--frame8695e-ease);
}

.frame8695e-menu-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--frame8695e-red);
  transform: translateY(-50%);
  transition: height 0.2s var(--frame8695e-ease);
}

.frame8695e-menu-row:hover,
.frame8695e-menu-row:active {
  background: rgba(205, 133, 63, 0.08);
}

.frame8695e-menu-row:hover::before,
.frame8695e-menu-row:active::before {
  height: 26px;
}

.frame8695e-menu-row.frame8695e-here {
  background: rgba(178, 34, 34, 0.16);
}

.frame8695e-menu-row.frame8695e-here::before {
  height: 30px;
}

.frame8695e-menu-idx {
  font-family: var(--frame8695e-mono);
  font-size: 11px;
  color: var(--frame8695e-gold-dim);
  min-width: 22px;
}

.frame8695e-menu-row.frame8695e-here .frame8695e-menu-idx {
  color: var(--frame8695e-gold);
}

.frame8695e-menu-label {
  font-size: 15px;
  flex: 1;
}

.frame8695e-menu-arrow {
  font-family: var(--frame8695e-mono);
  font-size: 13px;
  color: var(--frame8695e-faint);
}

.frame8695e-menu-cta {
  margin: 18px 16px 0;
  display: block;
  width: calc(100% - 32px);
  min-height: var(--frame8695e-tap);
  border-radius: var(--frame8695e-r-md);
  background: linear-gradient(180deg, var(--frame8695e-red-hi), var(--frame8695e-red));
  color: #fff4e6;
  font-family: var(--frame8695e-mono);
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

/* =================================================================== hero */
.frame8695e-hero {
  position: relative;
  padding: 24px var(--frame8695e-gutter) 18px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(178, 34, 34, 0.38), transparent 58%),
    radial-gradient(90% 80% at 0% 110%, rgba(205, 133, 63, 0.16), transparent 60%),
    linear-gradient(168deg, #2e2a25, #232323 62%);
  border-bottom: 1px solid var(--frame8695e-line-soft);
}

.frame8695e-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--frame8695e-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--frame8695e-gold);
  text-transform: uppercase;
}

.frame8695e-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--frame8695e-red-hi);
  border-radius: 2px;
}

.frame8695e-h1 {
  margin: 10px 0 10px;
  font-size: clamp(23px, 6.4vw, 31px);
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.frame8695e-h1 .frame8695e-h1key {
  color: var(--frame8695e-gold);
}

.frame8695e-h1 .frame8695e-h1tail {
  font-family: var(--frame8695e-mono);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--frame8695e-muted);
  display: block;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.frame8695e-hero-lead {
  margin: 0 0 14px;
  color: var(--frame8695e-muted);
  font-size: 14px;
}

/* CTA cluster: light-rounded text buttons. */
.frame8695e-ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.frame8695e-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--frame8695e-tap);
  padding: 0 18px;
  border-radius: var(--frame8695e-r-md);
  font-family: var(--frame8695e-mono);
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.16s var(--frame8695e-ease), box-shadow 0.16s var(--frame8695e-ease);
}

.frame8695e-cta:active {
  transform: translateY(1px);
}

.frame8695e-cta-main {
  background: linear-gradient(180deg, var(--frame8695e-red-hi), var(--frame8695e-red));
  color: #fff4e6;
  box-shadow: 0 4px 14px rgba(178, 34, 34, 0.35);
}

.frame8695e-cta-ghost {
  border: 1px solid var(--frame8695e-gold-dim);
  color: var(--frame8695e-gold-soft);
  background: rgba(205, 133, 63, 0.06);
}

/* ============================================================== carousel */
.frame8695e-carousel {
  position: relative;
  margin: 4px var(--frame8695e-gutter) 0;
  border-radius: var(--frame8695e-r-lg);
  overflow: hidden;
  border: 1px solid var(--frame8695e-line);
  background: var(--frame8695e-card);
  touch-action: pan-y;
}

.frame8695e-track {
  display: flex;
  transition: transform 0.38s var(--frame8695e-ease);
}

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

.frame8695e-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame8695e-slide-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 9px;
  background: linear-gradient(180deg, transparent, rgba(20, 15, 10, 0.88));
  font-family: var(--frame8695e-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffe9c9;
}

.frame8695e-slide-cap::before {
  content: "»";
  color: var(--frame8695e-red-hi);
  margin-right: 6px;
}

.frame8695e-slide-count {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(20, 15, 10, 0.72);
  font-family: var(--frame8695e-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--frame8695e-gold-soft);
  pointer-events: none;
}

.frame8695e-carrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(124, 23, 23, 0.85);
  color: #ffe9c9;
  font-family: var(--frame8695e-mono);
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.16s var(--frame8695e-ease);
}

.frame8695e-carrow:hover {
  background: var(--frame8695e-red-hi);
}

.frame8695e-carrow-prev {
  left: 8px;
}

.frame8695e-carrow-next {
  right: 8px;
}

.frame8695e-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.frame8695e-dot {
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background: rgba(244, 238, 225, 0.38);
  transition: width 0.22s var(--frame8695e-ease), background-color 0.22s var(--frame8695e-ease);
}

.frame8695e-dot.frame8695e-dot-on {
  width: 22px;
  background: var(--frame8695e-gold);
}

/* ============================================================== sections */
.frame8695e-sec {
  padding: 24px var(--frame8695e-gutter) 6px;
}

.frame8695e-sec-head {
  margin-bottom: 12px;
}

.frame8695e-h2 {
  margin: 8px 0 8px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 800;
}

.frame8695e-h2 .frame8695e-h2key {
  color: var(--frame8695e-gold);
}

.frame8695e-lead {
  margin: 0;
  color: var(--frame8695e-muted);
  font-size: 13.5px;
}

.frame8695e-lead strong {
  color: var(--frame8695e-text);
}

/* Category chip rail above the game shelves. */
.frame8695e-rail {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px var(--frame8695e-gutter) 12px;
  scrollbar-width: none;
}

.frame8695e-rail::-webkit-scrollbar {
  display: none;
}

.frame8695e-railchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--frame8695e-line);
  background: var(--frame8695e-panel);
  color: var(--frame8695e-muted);
  font-family: var(--frame8695e-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--frame8695e-line);
  transition: color 0.16s var(--frame8695e-ease), border-color 0.16s var(--frame8695e-ease);
}

.frame8695e-railchip b {
  color: var(--frame8695e-gold);
  font-weight: 700;
}

.frame8695e-railchip:hover {
  color: var(--frame8695e-text);
  border-color: var(--frame8695e-gold-dim);
}

/* ============================================================= game grid */
.frame8695e-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.frame8695e-gcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--frame8695e-r-md);
  background: var(--frame8695e-card);
  border: 1px solid var(--frame8695e-line-soft);
  overflow: hidden;
  text-align: center;
  padding: 0;
  min-height: var(--frame8695e-tap);
  transition: transform 0.18s var(--frame8695e-ease), border-color 0.18s var(--frame8695e-ease), box-shadow 0.18s var(--frame8695e-ease);
}

.frame8695e-gcard:hover,
.frame8695e-gcard:active {
  transform: translateY(-3px);
  border-color: var(--frame8695e-gold-dim);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.frame8695e-gcard-figure {
  display: block;
  aspect-ratio: 1 / 1;
  background: #161616;
}

.frame8695e-gcard-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom name bar is part of the card form. */
.frame8695e-gcard-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 5px 4px 6px;
  background: linear-gradient(180deg, var(--frame8695e-bar), #211f1c);
  border-top: 1px solid var(--frame8695e-line-soft);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--frame8695e-muted);
}

.frame8695e-gcard:hover .frame8695e-gcard-name,
.frame8695e-gcard:active .frame8695e-gcard-name {
  color: var(--frame8695e-text);
}

.frame8695e-gridnote {
  margin: 10px 0 0;
  font-family: var(--frame8695e-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--frame8695e-faint);
}

/* ========================================================== module panels */
.frame8695e-panel {
  background: var(--frame8695e-panel);
  border: 1px solid var(--frame8695e-line-soft);
  border-radius: var(--frame8695e-r-lg);
  padding: 16px 14px;
  margin: 14px 0 0;
}

.frame8695e-panel-tight {
  padding: 13px 12px;
}

.frame8695e-h3 {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--frame8695e-gold-soft);
}

.frame8695e-p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--frame8695e-muted);
}

.frame8695e-p:last-child {
  margin-bottom: 0;
}

.frame8695e-p strong {
  color: var(--frame8695e-text);
}

/* Milestone steps for the achievement ladder. */
.frame8695e-steps {
  counter-reset: frame8695e-step;
  display: grid;
  gap: 9px;
}

.frame8695e-steps li {
  counter-increment: frame8695e-step;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  background: var(--frame8695e-card);
  border: 1px solid var(--frame8695e-line-soft);
  border-radius: var(--frame8695e-r-md);
  font-size: 13px;
  color: var(--frame8695e-muted);
}

.frame8695e-steps li::before {
  content: counter(frame8695e-step, decimal-leading-zero);
  font-family: var(--frame8695e-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--frame8695e-gold);
  border: 1px solid var(--frame8695e-gold-dim);
  border-radius: var(--frame8695e-r-sm);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(205, 133, 63, 0.08);
}

/* Question and answer pairs. */
.frame8695e-qa {
  border-left: 3px solid var(--frame8695e-red);
  background: var(--frame8695e-card);
  border-radius: 0 var(--frame8695e-r-md) var(--frame8695e-r-md) 0;
  padding: 11px 12px;
  margin: 10px 0 0;
}

.frame8695e-qa .frame8695e-h3 {
  margin-bottom: 6px;
}

.frame8695e-qa .frame8695e-p {
  margin: 0;
}

/* Numbered mobile summary list. */
.frame8695e-nums {
  display: grid;
  gap: 8px;
}

.frame8695e-nums li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  align-items: start;
  font-size: 13px;
  color: var(--frame8695e-muted);
}

.frame8695e-nums li::before {
  content: "→";
  font-family: var(--frame8695e-mono);
  color: var(--frame8695e-red-hi);
  font-weight: 700;
  line-height: 1.7;
}

/* Decision checklist with CSS-drawn ticks. */
.frame8695e-check {
  display: grid;
  gap: 8px;
}

.frame8695e-check li {
  position: relative;
  padding: 10px 10px 10px 38px;
  background: var(--frame8695e-card);
  border: 1px solid var(--frame8695e-line-soft);
  border-radius: var(--frame8695e-r-md);
  font-size: 13px;
  color: var(--frame8695e-muted);
}

.frame8695e-check li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--frame8695e-gold);
  border-bottom: 2.5px solid var(--frame8695e-gold);
  transform: rotate(-45deg);
}

/* App download module. */
.frame8695e-appbox {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px;
  background: linear-gradient(135deg, rgba(178, 34, 34, 0.16), rgba(205, 133, 63, 0.1)), var(--frame8695e-card);
  border: 1px solid var(--frame8695e-line);
  border-radius: var(--frame8695e-r-lg);
}

.frame8695e-appbox-logo {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  object-fit: cover;
  border: 1px solid var(--frame8695e-gold-dim);
}

.frame8695e-appbox-meta {
  font-family: var(--frame8695e-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--frame8695e-gold-soft);
  margin-bottom: 7px;
}

.frame8695e-appbox-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.frame8695e-appbox-ctas .frame8695e-cta {
  min-height: 38px;
  padding: 0 13px;
  font-size: 12px;
}

/* Reveal-on-scroll: short travel only. */
.frame8695e-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.32s var(--frame8695e-ease), transform 0.32s var(--frame8695e-ease);
}

.frame8695e-reveal.frame8695e-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================= extended foot */
.frame8695e-xfoot {
  margin-top: 26px;
  padding: 20px var(--frame8695e-gutter) 18px;
  background: var(--frame8695e-bg-deep);
  border-top: 1px solid var(--frame8695e-line);
}

.frame8695e-xfoot-kicker {
  font-family: var(--frame8695e-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--frame8695e-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Seven distinct promotion actions in a two-column action grid. */
.frame8695e-pstrip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.frame8695e-pact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 4px 8px;
  border-radius: var(--frame8695e-r-md);
  font-family: var(--frame8695e-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.35;
  border: 1px solid var(--frame8695e-gold-dim);
  color: var(--frame8695e-gold-soft);
  background: rgba(205, 133, 63, 0.07);
  transition: transform 0.16s var(--frame8695e-ease), background-color 0.16s var(--frame8695e-ease);
}

.frame8695e-pact:hover {
  background: rgba(205, 133, 63, 0.16);
  border-bottom: 1px solid var(--frame8695e-gold-dim);
}

.frame8695e-pact:active {
  transform: translateY(1px);
}

.frame8695e-pact-red {
  border-color: var(--frame8695e-red);
  color: #ffd9c4;
  background: rgba(178, 34, 34, 0.22);
}

.frame8695e-pact-red:hover {
  background: rgba(178, 34, 34, 0.34);
}

.frame8695e-pact-wide {
  grid-column: 1 / -1;
}

.frame8695e-brandnote {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--frame8695e-faint);
  line-height: 1.75;
}

/* Two-column internal page directory. */
.frame8695e-dir {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
}

.frame8695e-dlink {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--frame8695e-gold-soft);
  border-bottom: 1px dashed rgba(205, 133, 63, 0.35);
  padding: 4px 0;
}

.frame8695e-dlink::before {
  content: "›";
  font-family: var(--frame8695e-mono);
  color: var(--frame8695e-red-hi);
  font-weight: 700;
}

.frame8695e-dlink:hover {
  color: var(--frame8695e-gold);
  border-bottom-style: solid;
}

.frame8695e-disclaimer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--frame8695e-line);
  font-size: 11px;
  line-height: 1.7;
  color: var(--frame8695e-faint);
}

/* Universal footer strip above the bottom bar. */
.frame8695e-foot {
  padding: 16px var(--frame8695e-gutter) 10px;
  text-align: center;
  font-family: var(--frame8695e-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--frame8695e-faint);
}

.frame8695e-foot b {
  color: var(--frame8695e-muted);
  font-weight: 700;
}

/* ==================================================== bottom action bar */
.frame8695e-bnav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 50;
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(21, 21, 21, 0.97);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-top: 1px solid var(--frame8695e-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.frame8695e-bnav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--frame8695e-bnav-h);
  padding: 6px 2px 7px;
  color: var(--frame8695e-faint);
  font-family: var(--frame8695e-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  border-bottom: 0;
  transition: color 0.18s var(--frame8695e-ease);
}

.frame8695e-bnav-item svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  opacity: 0.82;
}

.frame8695e-bnav-item:hover {
  color: var(--frame8695e-muted);
}

/* Current page: contrast inversion with a rounded block. */
.frame8695e-bnav-item.frame8695e-on {
  color: #ffe9c9;
  background: linear-gradient(180deg, var(--frame8695e-red-hi), var(--frame8695e-red));
  border-radius: var(--frame8695e-r-md) var(--frame8695e-r-md) 0 0;
  margin-top: 5px;
}

.frame8695e-bnav-item.frame8695e-on svg {
  opacity: 1;
}

/* Sliding indicator under the bar segments. */
.frame8695e-bnav-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--frame8695e-gold);
  transform: translateX(-50%);
  transition: width 0.22s var(--frame8695e-ease);
}

.frame8695e-bnav-item:hover::after {
  width: 16px;
}

.frame8695e-bnav-item.frame8695e-on::after {
  width: 22px;
  background: #ffe9c9;
}

/* ======================================================== break: 430 px */
@media (max-width: 430px) {
  .frame8695e-hero {
    padding-top: 20px;
  }

  .frame8695e-sec {
    padding-left: 12px;
    padding-right: 12px;
  }

  .frame8695e-rail {
    padding-left: 12px;
    padding-right: 12px;
  }

  .frame8695e-carousel {
    margin-left: 12px;
    margin-right: 12px;
  }

  .frame8695e-xfoot {
    padding-left: 12px;
    padding-right: 12px;
  }

  .frame8695e-grid {
    gap: 6px;
  }

  .frame8695e-gcard-name {
    font-size: 10px;
    min-height: 34px;
  }

  .frame8695e-hbtn {
    min-height: 38px;
    padding: 0 10px;
    font-size: 11.5px;
  }

  .frame8695e-brand-logo {
    width: 33px;
    height: 33px;
  }

  /* Dots stay, arrows shrink to keep the tap rows uncluttered. */
  .frame8695e-carrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
}

/* Narrowest canvas: keep four columns, tighten air. */
@media (max-width: 359px) {
  .frame8695e-grid {
    gap: 5px;
  }

  .frame8695e-bnav-item {
    font-size: 9px;
  }

  .frame8695e-pstrip,
  .frame8695e-dir {
    grid-template-columns: 1fr;
  }

  .frame8695e-actions {
    gap: 5px;
  }
}

/* Wider phones: fifth game column, roomier hero. */
@media (min-width: 400px) {
  .frame8695e-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
  }

  .frame8695e-gcard-name {
    font-size: 11px;
  }
}

/* Desktop: dim backdrop, centered phone canvas. */
@media (min-width: 481px) {
  body {
    background:
      radial-gradient(60% 40% at 50% 0%, rgba(178, 34, 34, 0.12), transparent 70%),
      #141414;
  }

  .frame8695e-shell {
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.55);
  }
}

/* Respect users who prefer stillness. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .frame8695e-track,
  .frame8695e-reveal,
  .frame8695e-gcard,
  .frame8695e-dot,
  .frame8695e-bnav-item::after,
  .frame8695e-menu-row::before {
    transition: none;
  }

  .frame8695e-reveal {
    opacity: 1;
    transform: none;
  }
}