/* ==========================================================================
   887.homes — mobile surface stylesheet
   Class contract  : every class uses the ui95fb0- prefix
   Variable naming : --ui95fb0-*
   Palette anchors : #1A1A2E canvas | #9400D3 primary violet | #F8F8FF ink
                     #A9A9A9 mute | #FFFFFF pure | #9370DB soft violet
   Visual direction: tech-cut headings + open body text, near-square tool
                     corners, mixed large/small game cards, question-driven
                     modules, light press feedback + soft color transitions,
                     square high-contrast CTAs.
   Canvas          : designed for 320-430px phones; wider screens keep the
                     same centered phone canvas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --ui95fb0-backdrop: #101018;
  --ui95fb0-canvas: #1A1A2E;
  --ui95fb0-panel: #20203A;
  --ui95fb0-panel-2: #252547;
  --ui95fb0-panel-3: #2B2B52;
  --ui95fb0-line: #34345C;
  --ui95fb0-line-soft: #2C2C4E;
  --ui95fb0-violet: #9400D3;
  --ui95fb0-violet-press: #7A00B0;
  --ui95fb0-violet-soft: #9370DB;
  --ui95fb0-violet-wash: rgba(147, 112, 219, 0.14);
  --ui95fb0-ink: #F8F8FF;
  --ui95fb0-mute: #A9A9A9;
  --ui95fb0-dim: #8A8AA6;
  --ui95fb0-white: #FFFFFF;
  --ui95fb0-ok: #58C08A;
  --ui95fb0-warn: #E0A54A;
  --ui95fb0-danger: #D96A6A;

  --ui95fb0-radius: 4px;
  --ui95fb0-radius-cta: 2px;
  --ui95fb0-radius-tile: 5px;

  --ui95fb0-topbar-h: 56px;
  --ui95fb0-tabbar-h: 64px;

  --ui95fb0-font-tech: "Bahnschrift", "Segoe UI Semibold", "Nirmala UI",
    "Noto Sans Bengali", "SolaimanLipi", system-ui, sans-serif;
  --ui95fb0-font-body: "Noto Sans Bengali", "Nirmala UI", "SolaimanLipi",
    "Vrinda", "Segoe UI", system-ui, sans-serif;

  --ui95fb0-press: 120ms ease-out;
  --ui95fb0-tone: 220ms ease-out;
  --ui95fb0-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

/* --------------------------------------------------------------------------
   2. Base / reset scoped to the site surface
   -------------------------------------------------------------------------- */
html.ui95fb0-doc,
body.ui95fb0-doc {
  margin: 0;
  padding: 0;
}

.ui95fb0-doc {
  background: var(--ui95fb0-backdrop);
  color: var(--ui95fb0-ink);
  font-family: var(--ui95fb0-font-body);
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ui95fb0-doc *,
.ui95fb0-doc *::before,
.ui95fb0-doc *::after {
  box-sizing: border-box;
}

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

.ui95fb0-doc a {
  color: var(--ui95fb0-violet-soft);
  text-decoration: none;
  transition: color var(--ui95fb0-tone);
}

.ui95fb0-doc a:hover,
.ui95fb0-doc a:focus-visible {
  color: var(--ui95fb0-white);
}

.ui95fb0-doc :focus-visible {
  outline: 2px solid var(--ui95fb0-violet-soft);
  outline-offset: 2px;
  border-radius: var(--ui95fb0-radius-cta);
}

.ui95fb0-doc ::selection {
  background: var(--ui95fb0-violet);
  color: var(--ui95fb0-white);
}

/* --------------------------------------------------------------------------
   3. Phone canvas shell — centered column, max 430px on any screen
   -------------------------------------------------------------------------- */
.ui95fb0-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--ui95fb0-canvas);
  border-left: 1px solid var(--ui95fb0-line-soft);
  border-right: 1px solid var(--ui95fb0-line-soft);
  overflow-x: hidden;
}

/* Desktop rail ambience behind the centered canvas */
@media (min-width: 480px) {
  .ui95fb0-shell {
    box-shadow: 0 0 0 1px rgba(148, 0, 211, 0.10),
      0 24px 70px rgba(0, 0, 0, 0.55);
  }
}

/* Utility: hide overlay scrollbars on horizontal rails */
.ui95fb0-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* --------------------------------------------------------------------------
   4. Fixed compact brand bar (top)
   -------------------------------------------------------------------------- */
.ui95fb0-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  min-height: var(--ui95fb0-topbar-h);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(26, 26, 46, 0.96);
  border-bottom: 1px solid var(--ui95fb0-line-soft);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  transition: background var(--ui95fb0-tone), border-color var(--ui95fb0-tone);
}

.ui95fb0-topbar.ui95fb0-is-scrolled {
  background: rgba(20, 20, 36, 0.99);
  border-bottom-color: var(--ui95fb0-line);
}

/* Brand zone: real logo image + site name only */
.ui95fb0-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

.ui95fb0-brand__logo {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--ui95fb0-radius);
  border: 1px solid var(--ui95fb0-line);
  object-fit: cover;
  background: var(--ui95fb0-panel);
}

.ui95fb0-brand__name {
  font-family: var(--ui95fb0-font-tech);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--ui95fb0-ink);
  line-height: 1;
  white-space: nowrap;
}

.ui95fb0-brand__name b {
  color: var(--ui95fb0-violet-soft);
  font-weight: 700;
}

/* Action zone: register / login / menu trigger */
.ui95fb0-topacts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Square high-contrast CTA buttons */
.ui95fb0-btn {
  font-family: var(--ui95fb0-font-tech);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: var(--ui95fb0-radius-cta);
  min-height: 38px;
  padding: 10px 12px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--ui95fb0-press), color var(--ui95fb0-press),
    border-color var(--ui95fb0-press), transform var(--ui95fb0-press);
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-btn:active {
  transform: translateY(1px) scale(0.985);
}

.ui95fb0-btn--cta {
  background: var(--ui95fb0-violet);
  color: var(--ui95fb0-white);
  border-color: #B266E0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}

.ui95fb0-btn--cta:hover,
.ui95fb0-btn--cta:focus-visible {
  background: var(--ui95fb0-violet-press);
  color: var(--ui95fb0-white);
}

.ui95fb0-btn--ghost {
  background: transparent;
  color: var(--ui95fb0-ink);
  border-color: var(--ui95fb0-line);
}

.ui95fb0-btn--ghost:hover,
.ui95fb0-btn--ghost:focus-visible {
  background: var(--ui95fb0-panel-2);
  border-color: var(--ui95fb0-violet-soft);
}

/* Menu trigger — compact icon + label */
.ui95fb0-menubtn {
  min-height: 38px;
  min-width: 44px;
  padding: 8px 9px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--ui95fb0-panel);
  color: var(--ui95fb0-ink);
  border: 1px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius-cta);
  cursor: pointer;
  font-family: var(--ui95fb0-font-tech);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  transition: background var(--ui95fb0-press), border-color var(--ui95fb0-press);
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-menubtn:hover,
.ui95fb0-menubtn:focus-visible,
.ui95fb0-menubtn[aria-expanded="true"] {
  background: var(--ui95fb0-violet-wash);
  border-color: var(--ui95fb0-violet-soft);
}

.ui95fb0-menubtn__bars {
  display: inline-block;
  width: 18px;
  height: 12px;
  position: relative;
}

.ui95fb0-menubtn__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.ui95fb0-menubtn__bars i:nth-child(1) { top: 0; }
.ui95fb0-menubtn__bars i:nth-child(2) { top: 5px; width: 74%; }
.ui95fb0-menubtn__bars i:nth-child(3) { top: 10px; }

/* --------------------------------------------------------------------------
   5. Stacked overlay menu
   -------------------------------------------------------------------------- */
.ui95fb0-overlay {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: 100%;
  z-index: 90;
  background: rgba(16, 16, 24, 0.97);
  display: flex;
  flex-direction: column;
  padding: 0 0 calc(var(--ui95fb0-tabbar-h) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.ui95fb0-overlay[hidden] {
  display: none;
}

.ui95fb0-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ui95fb0-line-soft);
  position: sticky;
  top: 0;
  background: rgba(16, 16, 24, 0.98);
}

.ui95fb0-overlay__title {
  font-family: var(--ui95fb0-font-tech);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--ui95fb0-violet-soft);
  margin: 0;
}

.ui95fb0-closebtn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui95fb0-panel);
  color: var(--ui95fb0-ink);
  border: 1px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius-cta);
  font-family: var(--ui95fb0-font-tech);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ui95fb0-press), border-color var(--ui95fb0-press);
}

.ui95fb0-closebtn:hover,
.ui95fb0-closebtn:focus-visible {
  background: var(--ui95fb0-panel-3);
  border-color: var(--ui95fb0-violet-soft);
}

.ui95fb0-mgroup {
  padding: 14px 14px 4px;
}

.ui95fb0-mgroup__label {
  font-family: var(--ui95fb0-font-tech);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ui95fb0-dim);
  margin: 0 0 8px;
  padding-left: 2px;
}

.ui95fb0-mlinks {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ui95fb0-mlinks a,
.ui95fb0-mlinks button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  font-family: var(--ui95fb0-font-body);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  color: var(--ui95fb0-ink);
  background: var(--ui95fb0-panel);
  border: 1px solid var(--ui95fb0-line-soft);
  border-left: 3px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius);
  cursor: pointer;
  transition: background var(--ui95fb0-press), border-color var(--ui95fb0-press),
    color var(--ui95fb0-press);
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-mlinks a:hover,
.ui95fb0-mlinks a:focus-visible,
.ui95fb0-mlinks button:hover,
.ui95fb0-mlinks button:focus-visible {
  background: var(--ui95fb0-panel-2);
  border-left-color: var(--ui95fb0-violet-soft);
  color: var(--ui95fb0-white);
}

.ui95fb0-mlinks .ui95fb0-arrow {
  font-family: var(--ui95fb0-font-tech);
  font-size: 12px;
  color: var(--ui95fb0-dim);
  flex: 0 0 auto;
}

.ui95fb0-overlay__cta {
  margin-top: auto;
  display: flex;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--ui95fb0-line-soft);
  background: rgba(26, 26, 46, 0.6);
}

.ui95fb0-overlay__cta .ui95fb0-btn {
  flex: 1 1 50%;
}

/* Body scroll lock while the overlay is open */
.ui95fb0-noscroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. Main flow + paddings that respect fixed bars
   -------------------------------------------------------------------------- */
.ui95fb0-main {
  padding: calc(var(--ui95fb0-topbar-h) + 10px) 12px
    calc(var(--ui95fb0-tabbar-h) + env(safe-area-inset-bottom, 0px) + 30px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ui95fb0-section {
  scroll-margin-top: calc(var(--ui95fb0-topbar-h) + 12px);
}

/* --------------------------------------------------------------------------
   7. Hero — H1, lead, CTA pair, keyword trust chips
   -------------------------------------------------------------------------- */
.ui95fb0-hero {
  padding: 14px 2px 2px;
}

.ui95fb0-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui95fb0-font-tech);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ui95fb0-violet-soft);
  border: 1px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius-cta);
  padding: 5px 9px;
  background: var(--ui95fb0-violet-wash);
  margin: 0 0 10px;
}

.ui95fb0-hero__kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ui95fb0-violet);
  border-radius: 1px;
}

.ui95fb0-hero h1 {
  font-family: var(--ui95fb0-font-tech);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 10px;
  color: var(--ui95fb0-white);
}

.ui95fb0-hero h1 span {
  color: var(--ui95fb0-violet-soft);
}

.ui95fb0-hero__lead {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ui95fb0-ink);
}

.ui95fb0-hero__lead b {
  color: var(--ui95fb0-white);
}

.ui95fb0-hero__cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.ui95fb0-hero__cta .ui95fb0-btn {
  flex: 1 1 150px;
  min-height: 46px;
  font-size: 14px;
}

.ui95fb0-trustrow {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 6px;
  margin: 0 -2px;
}

.ui95fb0-trust {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui95fb0-font-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ui95fb0-mute);
  border: 1px solid var(--ui95fb0-line-soft);
  background: var(--ui95fb0-panel);
  border-radius: var(--ui95fb0-radius);
  padding: 7px 10px;
  white-space: nowrap;
}

.ui95fb0-trust::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui95fb0-ok);
  box-shadow: 0 0 6px rgba(88, 192, 138, 0.7);
}

/* --------------------------------------------------------------------------
   8. Promo carousel
   -------------------------------------------------------------------------- */
.ui95fb0-carousel {
  position: relative;
  border: 1px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius);
  background: var(--ui95fb0-panel);
  overflow: hidden;
  box-shadow: var(--ui95fb0-shadow);
}

.ui95fb0-carousel__track {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 168px;
}

@media (min-width: 375px) {
  .ui95fb0-carousel__track {
    aspect-ratio: 16 / 8;
  }
}

.ui95fb0-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ui95fb0-panel-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6%);
  transition: opacity 380ms ease-out, transform 380ms ease-out,
    visibility 380ms;
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-slide.ui95fb0-is-on {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

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

.ui95fb0-slide__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 16, 24, 0) 34%,
    rgba(16, 16, 24, 0.82) 100%
  );
}

.ui95fb0-slide__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  text-align: left;
}

.ui95fb0-slide__tag {
  font-family: var(--ui95fb0-font-tech);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ui95fb0-violet-soft);
  display: block;
  margin-bottom: 3px;
}

.ui95fb0-slide__text {
  display: block;
  font-family: var(--ui95fb0-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ui95fb0-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ui95fb0-slide__go {
  flex: 0 0 auto;
  font-family: var(--ui95fb0-font-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ui95fb0-white);
  background: var(--ui95fb0-violet);
  border: 1px solid #B266E0;
  border-radius: var(--ui95fb0-radius-cta);
  padding: 8px 11px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* Dots + arrows rail under the banner */
.ui95fb0-carousel__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 10px 9px;
  border-top: 1px solid var(--ui95fb0-line-soft);
  background: rgba(16, 16, 24, 0.35);
}

.ui95fb0-carbtn {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui95fb0-panel-2);
  color: var(--ui95fb0-ink);
  border: 1px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius-cta);
  font-family: var(--ui95fb0-font-tech);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--ui95fb0-press), border-color var(--ui95fb0-press);
}

.ui95fb0-carbtn:hover,
.ui95fb0-carbtn:focus-visible {
  background: var(--ui95fb0-violet-wash);
  border-color: var(--ui95fb0-violet-soft);
}

.ui95fb0-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ui95fb0-dot {
  width: 26px;
  min-height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ui95fb0-dot i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ui95fb0-line);
  transition: background var(--ui95fb0-tone), transform var(--ui95fb0-tone);
}

.ui95fb0-dot:hover i {
  background: var(--ui95fb0-dim);
}

.ui95fb0-dot[aria-current="true"] i {
  background: var(--ui95fb0-violet-soft);
  transform: scale(1.35);
}

/* --------------------------------------------------------------------------
   9. Category quick chips (in-page jump rail)
   -------------------------------------------------------------------------- */
.ui95fb0-catnav {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 3px 2px 7px;
  margin: 0 -2px;
}

.ui95fb0-chip {
  flex: 0 0 auto;
  font-family: var(--ui95fb0-font-tech);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ui95fb0-ink);
  background: var(--ui95fb0-panel);
  border: 1px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius);
  padding: 9px 13px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--ui95fb0-press), border-color var(--ui95fb0-press),
    color var(--ui95fb0-press);
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-chip b {
  color: var(--ui95fb0-violet-soft);
  font-weight: 700;
}

.ui95fb0-chip:hover,
.ui95fb0-chip:focus-visible {
  background: var(--ui95fb0-panel-3);
  border-color: var(--ui95fb0-violet-soft);
  color: var(--ui95fb0-white);
}

/* --------------------------------------------------------------------------
   10. Section headers — question-driven rhythm
   -------------------------------------------------------------------------- */
.ui95fb0-shead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(
    90deg,
    var(--ui95fb0-violet-wash) 0%,
    rgba(32, 32, 58, 0) 88%
  );
  border-left: 3px solid var(--ui95fb0-violet);
  border-radius: var(--ui95fb0-radius);
  margin-bottom: 12px;
}

.ui95fb0-shead__q {
  font-family: var(--ui95fb0-font-tech);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ui95fb0-violet-soft);
  margin: 0;
}

.ui95fb0-shead h2 {
  font-family: var(--ui95fb0-font-tech);
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.38;
  letter-spacing: 0.01em;
  color: var(--ui95fb0-white);
  margin: 0;
}

.ui95fb0-shead__note {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ui95fb0-mute);
}

.ui95fb0-shead__note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   11. Game grids — mixed large/small card language
   -------------------------------------------------------------------------- */

/* Featured pair: two large cards on top of the hot section */
.ui95fb0-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.ui95fb0-cardL {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius);
  background: var(--ui95fb0-panel);
  overflow: hidden;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--ui95fb0-press),
    transform var(--ui95fb0-press);
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-cardL:hover,
.ui95fb0-cardL:focus-visible {
  border-color: var(--ui95fb0-violet-soft);
}

.ui95fb0-cardL:active {
  transform: translateY(1px) scale(0.99);
}

.ui95fb0-cardL__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ui95fb0-panel-2);
}

.ui95fb0-cardL__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 9px;
  border-top: 1px solid var(--ui95fb0-line-soft);
  background: var(--ui95fb0-panel);
}

.ui95fb0-cardL__name {
  font-family: var(--ui95fb0-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ui95fb0-ink);
  line-height: 1.35;
}

.ui95fb0-cardL__flag {
  flex: 0 0 auto;
  font-family: var(--ui95fb0-font-tech);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ui95fb0-white);
  background: var(--ui95fb0-violet);
  padding: 4px 6px;
  border-radius: var(--ui95fb0-radius-cta);
}

/* Dense tile grid: 4 columns at 320px, 5 columns from 398px */
.ui95fb0-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 6px;
}

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

.ui95fb0-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ui95fb0-radius-tile);
  cursor: pointer;
  transition: border-color var(--ui95fb0-press),
    background var(--ui95fb0-press), transform var(--ui95fb0-press);
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-tile:hover,
.ui95fb0-tile:focus-visible {
  border-color: var(--ui95fb0-line);
  background: var(--ui95fb0-panel);
}

.ui95fb0-tile:active {
  transform: scale(0.96);
}

.ui95fb0-tile__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ui95fb0-radius-tile);
  border: 1px solid var(--ui95fb0-line-soft);
  background: var(--ui95fb0-panel-2);
}

.ui95fb0-tile__name {
  font-family: var(--ui95fb0-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ui95fb0-mute);
  text-align: center;
  padding: 5px 3px 2px;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: color var(--ui95fb0-tone);
}

.ui95fb0-tile:hover .ui95fb0-tile__name,
.ui95fb0-tile:focus-visible .ui95fb0-tile__name {
  color: var(--ui95fb0-ink);
}

/* Soft divider between category blocks */
.ui95fb0-rule {
  border: 0;
  border-top: 1px dashed var(--ui95fb0-line-soft);
  margin: 2px 0 0;
}

/* --------------------------------------------------------------------------
   12. Content modules (info sections after the game area)
   -------------------------------------------------------------------------- */
.ui95fb0-panelbox {
  background: var(--ui95fb0-panel);
  border: 1px solid var(--ui95fb0-line-soft);
  border-radius: var(--ui95fb0-radius);
  padding: 14px 13px;
}

.ui95fb0-panelbox p {
  margin: 0 0 10px;
  color: var(--ui95fb0-ink);
}

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

.ui95fb0-panelbox b,
.ui95fb0-panelbox strong {
  color: var(--ui95fb0-white);
}

.ui95fb0-lead-answer {
  border-left: 3px solid var(--ui95fb0-violet-soft);
  padding-left: 10px;
  color: var(--ui95fb0-ink);
}

/* Category highlight rows: label column + scene text */
.ui95fb0-hlrows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  list-style: none;
  padding: 0;
}

.ui95fb0-hlrow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  background: var(--ui95fb0-panel-2);
  border: 1px solid var(--ui95fb0-line-soft);
  border-radius: var(--ui95fb0-radius);
  transition: border-color var(--ui95fb0-tone);
}

.ui95fb0-hlrow:hover {
  border-color: var(--ui95fb0-violet-soft);
}

.ui95fb0-hlrow dt {
  font-family: var(--ui95fb0-font-tech);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ui95fb0-violet-soft);
  line-height: 1.35;
  padding-top: 2px;
}

.ui95fb0-hlrow dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--ui95fb0-mute);
  line-height: 1.62;
}

.ui95fb0-hlrow dd b {
  color: var(--ui95fb0-ink);
}

/* Numbered condition steps (payments) */
.ui95fb0-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: ui95fb0-step;
}

.ui95fb0-steps li {
  counter-increment: ui95fb0-step;
  position: relative;
  padding: 10px 12px 10px 40px;
  background: var(--ui95fb0-panel-2);
  border: 1px solid var(--ui95fb0-line-soft);
  border-radius: var(--ui95fb0-radius);
  font-size: 13.5px;
  color: var(--ui95fb0-mute);
}

.ui95fb0-steps li b {
  color: var(--ui95fb0-ink);
}

.ui95fb0-steps li::before {
  content: counter(ui95fb0-step, decimal-leading-zero);
  position: absolute;
  left: 10px;
  top: 11px;
  font-family: var(--ui95fb0-font-tech);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--ui95fb0-violet-soft);
}

/* RTP meter strip */
.ui95fb0-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.ui95fb0-meter {
  background: var(--ui95fb0-panel-2);
  border: 1px solid var(--ui95fb0-line-soft);
  border-top: 2px solid var(--ui95fb0-violet);
  border-radius: var(--ui95fb0-radius);
  padding: 9px 8px;
  text-align: center;
}

.ui95fb0-meter__num {
  display: block;
  font-family: var(--ui95fb0-font-tech);
  font-size: 17px;
  font-weight: 800;
  color: var(--ui95fb0-white);
  letter-spacing: 0.04em;
}

.ui95fb0-meter__lab {
  display: block;
  font-size: 10.5px;
  color: var(--ui95fb0-dim);
  line-height: 1.4;
  margin-top: 3px;
}

/* Play-style comparison rows */
.ui95fb0-vsrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 11px 12px;
  margin-top: 8px;
  background: var(--ui95fb0-panel-2);
  border: 1px solid var(--ui95fb0-line-soft);
  border-radius: var(--ui95fb0-radius);
}

.ui95fb0-vsrow__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ui95fb0-vsrow__name {
  font-family: var(--ui95fb0-font-tech);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ui95fb0-white);
}

.ui95fb0-vsrow__focus {
  font-family: var(--ui95fb0-font-tech);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ui95fb0-violet-soft);
  white-space: nowrap;
}

.ui95fb0-vsrow p {
  margin: 0;
  font-size: 13px;
  color: var(--ui95fb0-mute);
  line-height: 1.6;
}

/* Pros / limitations twin columns */
.ui95fb0-twin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.ui95fb0-twincol {
  background: var(--ui95fb0-panel-2);
  border: 1px solid var(--ui95fb0-line-soft);
  border-radius: var(--ui95fb0-radius);
  padding: 11px 11px 9px;
}

.ui95fb0-twincol--good {
  border-top: 2px solid var(--ui95fb0-ok);
}

.ui95fb0-twincol--bad {
  border-top: 2px solid var(--ui95fb0-warn);
}

.ui95fb0-twincol h3 {
  font-family: var(--ui95fb0-font-tech);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ui95fb0-ink);
  margin: 0 0 8px;
}

.ui95fb0-twincol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ui95fb0-twincol li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ui95fb0-mute);
}

.ui95fb0-twincol--good li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ui95fb0-font-tech);
  font-weight: 800;
  color: var(--ui95fb0-ok);
}

.ui95fb0-twincol--bad li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ui95fb0-font-tech);
  font-weight: 800;
  color: var(--ui95fb0-warn);
}

/* Fact summary tiles */
.ui95fb0-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

@media (min-width: 375px) {
  .ui95fb0-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ui95fb0-fact {
  background: var(--ui95fb0-panel-2);
  border: 1px solid var(--ui95fb0-line-soft);
  border-left: 2px solid var(--ui95fb0-violet-soft);
  border-radius: var(--ui95fb0-radius);
  padding: 10px 9px;
}

.ui95fb0-fact__k {
  display: block;
  font-family: var(--ui95fb0-font-tech);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ui95fb0-dim);
  margin-bottom: 4px;
}

.ui95fb0-fact__v {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ui95fb0-ink);
  line-height: 1.5;
}

/* Inline promo link inside body copy */
.ui95fb0-inline {
  font-family: var(--ui95fb0-font-tech);
  font-weight: 700;
  color: var(--ui95fb0-violet-soft);
  border-bottom: 1px dashed var(--ui95fb0-violet-soft);
  padding-bottom: 1px;
  cursor: pointer;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-size: inherit;
  line-height: inherit;
  transition: color var(--ui95fb0-press), border-color var(--ui95fb0-press);
}

.ui95fb0-inline:hover,
.ui95fb0-inline:focus-visible {
  color: var(--ui95fb0-white);
  border-bottom-color: var(--ui95fb0-white);
}

/* Mid-section banner CTA strip */
.ui95fb0-ctastrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 13px;
  margin-top: 14px;
  background: linear-gradient(90deg, rgba(148, 0, 211, 0.22), rgba(147, 112, 219, 0.08));
  border: 1px solid var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius);
}

.ui95fb0-ctastrip p {
  margin: 0;
  font-size: 13px;
  color: var(--ui95fb0-ink);
  flex: 1 1 170px;
}

.ui95fb0-ctastrip p b {
  color: var(--ui95fb0-white);
}

.ui95fb0-ctastrip .ui95fb0-btn {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   13. Extended footer (brand > directory > promotions > disclaimer)
   -------------------------------------------------------------------------- */
.ui95fb0-extfoot {
  border: 1px solid var(--ui95fb0-line-soft);
  border-radius: var(--ui95fb0-radius);
  background: var(--ui95fb0-panel);
  padding: 15px 13px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ui95fb0-extbrand {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ui95fb0-extbrand img {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--ui95fb0-radius);
  border: 1px solid var(--ui95fb0-line);
  object-fit: cover;
  background: var(--ui95fb0-panel-2);
}

.ui95fb0-extbrand__name {
  font-family: var(--ui95fb0-font-tech);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ui95fb0-white);
  margin: 0 0 4px;
}

.ui95fb0-extbrand p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ui95fb0-mute);
  line-height: 1.62;
}

/* Two-column page directory */
.ui95fb0-extlabel {
  font-family: var(--ui95fb0-font-tech);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ui95fb0-violet-soft);
  margin: 0 0 8px;
}

.ui95fb0-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui95fb0-directory a {
  display: block;
  min-height: 40px;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ui95fb0-ink);
  background: var(--ui95fb0-panel-2);
  border: 1px solid var(--ui95fb0-line-soft);
  border-radius: var(--ui95fb0-radius);
  line-height: 1.4;
  transition: background var(--ui95fb0-press), border-color var(--ui95fb0-press),
    color var(--ui95fb0-press);
}

.ui95fb0-directory a:hover,
.ui95fb0-directory a:focus-visible {
  background: var(--ui95fb0-panel-3);
  border-color: var(--ui95fb0-violet-soft);
  color: var(--ui95fb0-white);
}

.ui95fb0-directory a i {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--ui95fb0-dim);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Promotion actions grid */
.ui95fb0-promogrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ui95fb0-promo {
  font-family: var(--ui95fb0-font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ui95fb0-white);
  text-align: left;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--ui95fb0-violet-wash);
  border: 1px solid var(--ui95fb0-violet-soft);
  border-radius: var(--ui95fb0-radius-cta);
  cursor: pointer;
  transition: background var(--ui95fb0-press), border-color var(--ui95fb0-press),
    transform var(--ui95fb0-press);
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-promo::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--ui95fb0-violet);
  border-radius: 1px;
  transform: rotate(45deg);
  transition: background var(--ui95fb0-press);
}

.ui95fb0-promo:hover,
.ui95fb0-promo:focus-visible {
  background: rgba(148, 0, 211, 0.32);
  border-color: var(--ui95fb0-white);
}

.ui95fb0-promo:active {
  transform: translateY(1px);
}

/* Conditional disclaimer note */
.ui95fb0-note {
  border: 1px dashed var(--ui95fb0-line);
  border-radius: var(--ui95fb0-radius);
  padding: 10px 11px;
  background: rgba(224, 165, 74, 0.06);
}

.ui95fb0-note p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.66;
  color: var(--ui95fb0-mute);
}

.ui95fb0-note p b {
  color: var(--ui95fb0-warn);
}

/* --------------------------------------------------------------------------
   14. Common footer — copyright only
   -------------------------------------------------------------------------- */
.ui95fb0-foot {
  padding: 0 12px calc(var(--ui95fb0-tabbar-h) + env(safe-area-inset-bottom, 0px) + 18px);
  text-align: center;
}

.ui95fb0-foot__line {
  font-family: var(--ui95fb0-font-tech);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ui95fb0-dim);
  margin: 0;
  padding: 12px 0 4px;
  border-top: 1px solid var(--ui95fb0-line-soft);
}

.ui95fb0-foot__line b {
  color: var(--ui95fb0-mute);
}

/* --------------------------------------------------------------------------
   15. Mobile bottom tab bar — compact icon rack, 5 roles
   -------------------------------------------------------------------------- */
.ui95fb0-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  min-height: var(--ui95fb0-tabbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(20, 20, 36, 0.98);
  border-top: 1px solid var(--ui95fb0-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ui95fb0-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 8px 2px 7px;
  font-family: var(--ui95fb0-font-tech);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--ui95fb0-mute);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ui95fb0-tone);
  -webkit-tap-highlight-color: transparent;
}

.ui95fb0-tab svg {
  width: 21px;
  height: 21px;
  display: block;
}

.ui95fb0-tab:hover,
.ui95fb0-tab:focus-visible {
  color: var(--ui95fb0-ink);
}

/* Active role marker: color switch + top rule */
.ui95fb0-tab.ui95fb0-is-active {
  color: var(--ui95fb0-violet-soft);
}

.ui95fb0-tab.ui95fb0-is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  background: var(--ui95fb0-violet);
  border-radius: 0 0 2px 2px;
}

.ui95fb0-tab--promo {
  color: var(--ui95fb0-violet-soft);
}

.ui95fb0-tab--promo:hover,
.ui95fb0-tab--promo:focus-visible {
  color: var(--ui95fb0-white);
}

.ui95fb0-tab--promo .ui95fb0-tab__tag {
  position: absolute;
  top: 4px;
  right: 14%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ui95fb0-ok);
  box-shadow: 0 0 5px rgba(88, 192, 138, 0.8);
}

/* --------------------------------------------------------------------------
   16. Small-screen guards and 320px tightening
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  .ui95fb0-doc {
    font-size: 14px;
  }

  .ui95fb0-hero h1 {
    font-size: 22px;
  }

  .ui95fb0-shead h2 {
    font-size: 17px;
  }

  .ui95fb0-hlrow {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .ui95fb0-grid {
    gap: 6px 5px;
  }
}

/* 375px+ rhythm refinements */
@media (min-width: 375px) {
  .ui95fb0-hero h1 {
    font-size: 27px;
  }

  .ui95fb0-shead h2 {
    font-size: 19.5px;
  }

  .ui95fb0-promogrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ui95fb0-directory {
    gap: 7px;
  }
}

/* 430px canvas ceiling refinements */
@media (min-width: 430px) {
  .ui95fb0-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ui95fb0-hero h1 {
    font-size: 28px;
  }

  .ui95fb0-promogrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

/* Smooth anchor travel for the in-page category rail */
@media (prefers-reduced-motion: no-preference) {
  .ui95fb0-doc {
    scroll-behavior: smooth;
  }
}