:root {
  --framee8495-ink: #262626;
  --framee8495-coffee: #6F4E37;
  --framee8495-rust: #A0522D;
  --framee8495-sky: #6495ED;
  --framee8495-paper: #ECF0F1;
  --framee8495-muted: #b8c1cc;
  --framee8495-line: rgba(236,240,241,.14);
  --framee8495-glass: rgba(38,38,38,.72);
  --framee8495-glow: rgba(100,149,237,.24);
  --framee8495-bottom-space: 92px;
  --framee8495-radius: 16px;
  --framee8495-small-radius: 10px;
  --framee8495-shadow: 0 18px 50px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--framee8495-ink); }
body {
  margin: 0;
  color: var(--framee8495-paper);
  background:
    radial-gradient(circle at 80% -10%, rgba(100,149,237,.21), transparent 32rem),
    radial-gradient(circle at -10% 36%, rgba(160,82,45,.2), transparent 28rem),
    var(--framee8495-ink);
  font-family: "Trebuchet MS", "Noto Sans Bengali", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: .16;
  background-image: linear-gradient(rgba(236,240,241,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(236,240,241,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--framee8495-sky); outline-offset: 3px; }

.framee8495-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: var(--framee8495-bottom-space);
}
.framee8495-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 30;
  display: flex;
  width: min(100%, 520px);
  min-height: 72px;
  padding: 10px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transform: translateX(-50%);
  background: rgba(38,38,38,.9);
  border-bottom: 1px solid var(--framee8495-line);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
.framee8495-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.framee8495-brand img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: cover;
  border: 2px solid rgba(236,240,241,.7);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(160,82,45,.3);
}
.framee8495-brandName {
  max-width: 120px;
  overflow: hidden;
  color: var(--framee8495-paper);
  font-family: Consolas, "Noto Sans Bengali", monospace;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.framee8495-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.framee8495-action,
.framee8495-menuToggle,
.framee8495-heroCta,
.framee8495-inlineCta,
.framee8495-miniCta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.framee8495-action {
  padding: 0 9px;
  color: var(--framee8495-paper);
  background: transparent;
  border-color: rgba(236,240,241,.22);
  font-size: .72rem;
  font-weight: 700;
}
.framee8495-action:first-child { color: var(--framee8495-ink); background: var(--framee8495-paper); }
.framee8495-action:hover,
.framee8495-menuToggle:hover,
.framee8495-heroCta:hover,
.framee8495-inlineCta:hover,
.framee8495-miniCta:hover { transform: translateY(-2px); }
.framee8495-menuToggle {
  width: 44px;
  padding: 0;
  color: var(--framee8495-paper);
  background: var(--framee8495-coffee);
  border-color: rgba(236,240,241,.22);
  font-size: 1.15rem;
}
.framee8495-menuToggle[aria-expanded="true"] { background: var(--framee8495-rust); }
.framee8495-menu {
  position: fixed;
  top: 72px;
  left: 50%;
  z-index: 29;
  display: grid;
  width: min(calc(100% - 20px), 500px);
  padding: 14px;
  gap: 7px;
  transform: translate(-50%, -18px);
  visibility: hidden;
  opacity: 0;
  background: rgba(111,78,55,.98);
  border: 1px solid rgba(236,240,241,.22);
  border-radius: 0 0 18px 18px;
  box-shadow: var(--framee8495-shadow);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.framee8495-menu.is-open { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.framee8495-menu a,
.framee8495-menu button {
  display: flex;
  min-height: 46px;
  padding: 8px 11px;
  align-items: center;
  justify-content: space-between;
  color: var(--framee8495-paper);
  background: rgba(38,38,38,.4);
  border: 1px solid rgba(236,240,241,.12);
  border-radius: 9px;
  text-decoration: none;
}
.framee8495-menu button { cursor: pointer; text-align: left; }
.framee8495-menu a:hover,
.framee8495-menu button:hover { background: rgba(100,149,237,.2); border-color: var(--framee8495-sky); }
.framee8495-menuLabel { font-size: .87rem; }
.framee8495-menuHint { color: var(--framee8495-muted); font-size: .72rem; }

.framee8495-main { padding: 94px 12px 0; }
.framee8495-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  color: var(--framee8495-sky);
  background: rgba(100,149,237,.1);
  border-left: 3px solid var(--framee8495-sky);
  font-family: Consolas, monospace;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.framee8495-hero {
  position: relative;
  padding: 22px 16px 18px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(111,78,55,.96), rgba(38,38,38,.8));
  border: 1px solid rgba(236,240,241,.15);
  border-radius: 22px;
  box-shadow: var(--framee8495-shadow);
}
.framee8495-hero::after {
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 155px;
  height: 155px;
  content: "";
  border: 1px solid rgba(100,149,237,.4);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(100,149,237,.05), 0 0 0 36px rgba(100,149,237,.035);
}
.framee8495-hero h1 {
  max-width: 410px;
  margin: 12px 0 9px;
  color: var(--framee8495-paper);
  font-family: Consolas, "Noto Sans Bengali", monospace;
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.06em;
}
.framee8495-hero p { max-width: 460px; margin: 0; color: #d9e0e7; }
.framee8495-heroCtas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.framee8495-heroCta { padding: 0 13px; color: var(--framee8495-ink); background: var(--framee8495-paper); font-size: .79rem; font-weight: 800; }
.framee8495-heroCta.alt { color: var(--framee8495-paper); background: rgba(100,149,237,.2); border-color: rgba(100,149,237,.7); }

.framee8495-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}
.framee8495-stat {
  padding: 10px 8px;
  background: rgba(38,38,38,.7);
  border-top: 2px solid var(--framee8495-rust);
  border-radius: 10px;
}
.framee8495-stat strong { display: block; color: var(--framee8495-paper); font-family: Consolas, monospace; font-size: 1.05rem; }
.framee8495-stat span { display: block; color: var(--framee8495-muted); font-size: .68rem; line-height: 1.35; }

.framee8495-carousel {
  position: relative;
  min-height: 205px;
  overflow: hidden;
  background: #171717;
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}
.framee8495-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.framee8495-slide.is-active { opacity: 1; }
.framee8495-slide img { width: 100%; height: 205px; display: block; object-fit: cover; opacity: .68; }
.framee8495-slideOverlay { position: absolute; inset: 0; display: flex; padding: 15px; flex-direction: column; align-items: flex-start; justify-content: flex-end; background: linear-gradient(0deg, rgba(38,38,38,.95), transparent 72%); }
.framee8495-slideOverlay strong { font-family: Consolas, "Noto Sans Bengali", monospace; font-size: 1.08rem; }
.framee8495-slideOverlay span { margin: 3px 0 8px; color: #d4dae2; font-size: .77rem; }
.framee8495-slideOverlay button { min-height: 44px; padding: 0 12px; color: var(--framee8495-ink); background: var(--framee8495-paper); border: 0; border-radius: 9px; cursor: pointer; font-size: .76rem; font-weight: 800; }
.framee8495-dots { position: absolute; top: 12px; right: 12px; display: flex; gap: 5px; }
.framee8495-dot { width: 8px; height: 8px; padding: 0; background: rgba(236,240,241,.4); border: 0; border-radius: 50%; cursor: pointer; }
.framee8495-dot.is-active { width: 20px; border-radius: 8px; background: var(--framee8495-sky); }

.framee8495-section { margin: 28px 0 0; }
.framee8495-sectionHeading { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.framee8495-sectionHeading h2 { margin: 0; color: var(--framee8495-paper); font-family: Consolas, "Noto Sans Bengali", monospace; font-size: 1.38rem; line-height: 1.2; letter-spacing: -.04em; }
.framee8495-sectionHeading p { margin: 0; color: var(--framee8495-muted); font-size: .72rem; text-align: right; }
.framee8495-category {
  margin-top: 22px;
  padding: 13px 10px 14px;
  background: rgba(38,38,38,.56);
  border: 1px solid var(--framee8495-line);
  border-radius: var(--framee8495-radius);
}
.framee8495-categoryTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.framee8495-categoryTop h3 { margin: 0; color: var(--framee8495-paper); font-size: 1.02rem; }
.framee8495-categoryTop h3::before { display: inline-block; width: 7px; height: 7px; margin: 0 7px 2px 0; content: ""; background: var(--framee8495-rust); border-radius: 50%; }
.framee8495-categoryLinks { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.framee8495-categoryLinks a { min-height: 32px; padding: 3px 8px; color: var(--framee8495-sky); border: 1px solid rgba(100,149,237,.4); border-radius: 8px; font-size: .66rem; text-decoration: none; }
.framee8495-categoryLinks a:hover { color: var(--framee8495-paper); background: var(--framee8495-sky); }
.framee8495-gameGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.framee8495-gameCard { min-width: 0; overflow: hidden; background: rgba(111,78,55,.22); border: 1px solid rgba(236,240,241,.1); border-radius: 11px; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.framee8495-gameCard:hover { transform: translateY(-4px); background: rgba(100,149,237,.14); border-color: rgba(100,149,237,.65); }
.framee8495-gameCard a { display: block; color: inherit; text-decoration: none; }
.framee8495-gameCard img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--framee8495-coffee); }
.framee8495-gameName { display: block; min-height: 35px; padding: 5px 4px 6px; color: #edf1f4; font-size: .66rem; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }

.framee8495-prose { margin-top: 30px; }
.framee8495-prose h2 { margin: 0 0 10px; color: var(--framee8495-paper); font-family: Consolas, "Noto Sans Bengali", monospace; font-size: 1.36rem; line-height: 1.25; }
.framee8495-prose h3 { margin: 20px 0 6px; color: #d9e7ff; font-size: 1rem; }
.framee8495-prose p { margin: 0 0 11px; color: #cbd3dc; }
.framee8495-prose a { color: #9dbdff; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.framee8495-split { display: grid; gap: 9px; }
.framee8495-note {
  padding: 13px;
  background: linear-gradient(120deg, rgba(160,82,45,.3), rgba(100,149,237,.12));
  border-left: 3px solid var(--framee8495-rust);
  border-radius: 0 12px 12px 0;
}
.framee8495-note strong { display: block; margin-bottom: 3px; color: var(--framee8495-paper); font-size: .93rem; }
.framee8495-note p { margin: 0; font-size: .86rem; }
.framee8495-numbered { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: framee8495-step; }
.framee8495-numbered li { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: start; color: #cbd3dc; }
.framee8495-numbered li::before { display: grid; width: 30px; height: 30px; place-items: center; content: counter(framee8495-step); counter-increment: framee8495-step; color: var(--framee8495-paper); background: var(--framee8495-coffee); border-radius: 9px; font-family: Consolas, monospace; font-weight: 800; }
.framee8495-callout { margin-top: 13px; padding: 14px; color: #f5f7fa; background: rgba(100,149,237,.13); border: 1px solid rgba(100,149,237,.38); border-radius: 13px; }
.framee8495-callout p { margin: 0; color: inherit; }
.framee8495-inlineCta { margin: 7px 0 2px; padding: 0 13px; color: var(--framee8495-paper); background: var(--framee8495-rust); font-size: .77rem; font-weight: 800; }

.framee8495-directory { margin: 31px 0 0; padding: 16px 13px; background: rgba(111,78,55,.35); border: 1px solid rgba(236,240,241,.12); border-radius: 17px; }
.framee8495-directory h2 { margin: 0 0 8px; font-family: Consolas, "Noto Sans Bengali", monospace; font-size: 1.15rem; }
.framee8495-directory p { margin: 0 0 12px; color: #d2d8df; font-size: .85rem; }
.framee8495-linkMatrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.framee8495-linkMatrix a { display: flex; min-height: 44px; padding: 7px 9px; align-items: center; color: #e8efff; background: rgba(38,38,38,.58); border-radius: 9px; font-size: .73rem; text-decoration: none; }
.framee8495-linkMatrix a:hover { background: var(--framee8495-sky); color: var(--framee8495-ink); }
.framee8495-promoRow { display: grid; gap: 7px; margin-top: 12px; }
.framee8495-promoRow button { display: flex; min-height: 47px; padding: 8px 12px; align-items: center; justify-content: space-between; color: var(--framee8495-paper); background: rgba(38,38,38,.66); border: 1px solid rgba(160,82,45,.5); border-radius: 10px; cursor: pointer; text-align: left; }
.framee8495-promoRow button:hover { background: var(--framee8495-rust); }
.framee8495-promoRow small { color: var(--framee8495-muted); }
.framee8495-disclaimer { margin-top: 13px; padding: 10px; color: #bdc6d0; background: rgba(38,38,38,.55); border-radius: 9px; font-size: .72rem; }

.framee8495-footer { margin-top: 25px; padding: 17px 12px 0; border-top: 1px solid var(--framee8495-line); }
.framee8495-footerBrand { display: flex; align-items: center; gap: 9px; }
.framee8495-footerBrand img { width: 30px; height: 30px; border-radius: 8px; }
.framee8495-footerBrand strong { font-family: Consolas, monospace; }
.framee8495-footer p { margin: 8px 0; color: var(--framee8495-muted); font-size: .78rem; }
.framee8495-footerLinks { display: flex; flex-wrap: wrap; gap: 5px 11px; }
.framee8495-footerLinks a { color: #b8d0ff; font-size: .74rem; }
.framee8495-copy { margin-top: 14px !important; padding-bottom: 8px; color: #8f9aa7 !important; font-size: .68rem !important; }

.framee8495-bottomNav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 520px);
  min-height: 70px;
  margin: 0 auto;
  padding: 7px 7px max(7px, env(safe-area-inset-bottom));
  gap: 4px;
  background: rgba(38,38,38,.96);
  border: 1px solid rgba(236,240,241,.17);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 35px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}
.framee8495-bottomNav a,
.framee8495-bottomNav button { display: flex; min-width: 0; min-height: 53px; padding: 5px 2px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #b4beca; background: transparent; border: 0; border-radius: 11px; cursor: pointer; font-size: .61rem; text-decoration: none; }
.framee8495-bottomNav a:hover,
.framee8495-bottomNav button:hover,
.framee8495-bottomNav .is-active { color: var(--framee8495-paper); background: rgba(100,149,237,.18); }
.framee8495-bottomIcon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--framee8495-paper); background: rgba(160,82,45,.8); border-radius: 8px; font-family: Consolas, monospace; font-size: .72rem; font-weight: 800; }
.framee8495-bottomNav .is-active .framee8495-bottomIcon { background: var(--framee8495-sky); color: var(--framee8495-ink); }

.framee8495-reveal { animation: framee8495-rise .55s both; }
@keyframes framee8495-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 375px) {
  .framee8495-main { padding-right: 14px; padding-left: 14px; }
  .framee8495-gameGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .framee8495-gameName { font-size: .65rem; }
}
@media (min-width: 430px) {
  .framee8495-main { padding-right: 18px; padding-left: 18px; }
  .framee8495-topbar { padding-right: 18px; padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}