@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

:root {
  --surface015a4-ink: #f0f0f0;
  --surface015a4-bg: #2d2d2d;
  --surface015a4-panel: #363a42;
  --surface015a4-line: rgba(175, 238, 238, 0.34);
  --surface015a4-blue: #4169e1;
  --surface015a4-teal: #20b2aa;
  --surface015a4-aqua: #afeeee;
  --surface015a4-peach: #ffe4b5;
  --surface015a4-muted: #b9c4c8;
  --surface015a4-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  --surface015a4-radius: 7px;
  --surface015a4-bottom-space: 90px;
}

* { box-sizing: border-box; }
html { background: var(--surface015a4-bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(65, 105, 225, 0.24), transparent 31rem),
    radial-gradient(circle at 100% 35%, rgba(32, 178, 170, 0.12), transparent 25rem),
    var(--surface015a4-bg);
  color: var(--surface015a4-ink);
  font-family: 'Noto Sans Bengali', sans-serif;
  line-height: 1.65;
  padding-bottom: var(--surface015a4-bottom-space);
}
a { color: var(--surface015a4-aqua); text-decoration: none; }
a:hover, a:focus-visible { color: var(--surface015a4-peach); }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--surface015a4-peach); outline-offset: 3px; }

.surface015a4-shell { width: min(100%, 510px); margin: 0 auto; }
.surface015a4-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  border-bottom: 1px solid rgba(175, 238, 238, 0.23);
  background: rgba(45, 45, 45, 0.94);
  backdrop-filter: blur(16px);
}
.surface015a4-topbar-inner { width: min(100%, 510px); min-height: 70px; margin: 0 auto; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.surface015a4-brand { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.surface015a4-brand img { width: 39px; height: 39px; object-fit: contain; border-radius: 6px; border: 1px solid var(--surface015a4-aqua); background: #1d2025; }
.surface015a4-brand strong { color: var(--surface015a4-ink); font-family: 'Chakra Petch', sans-serif; font-size: 1.14rem; letter-spacing: .08em; white-space: nowrap; }
.surface015a4-actions { display: flex; align-items: center; gap: 5px; }
.surface015a4-action, .surface015a4-menu-trigger { min-height: 44px; padding: 7px 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--surface015a4-line); border-radius: 5px; background: transparent; color: var(--surface015a4-ink); font: 600 .72rem 'Chakra Petch', sans-serif; cursor: pointer; }
.surface015a4-action:first-child { border-color: rgba(32, 178, 170, .78); color: var(--surface015a4-aqua); }
.surface015a4-menu-trigger { width: 44px; font-size: 1.2rem; }
.surface015a4-main { padding: 94px 14px 28px; }
.surface015a4-hero { position: relative; padding: 25px 18px 20px; overflow: hidden; border: 1px solid rgba(175, 238, 238, .38); border-radius: 9px; background: linear-gradient(135deg, rgba(65, 105, 225, .42), rgba(32, 178, 170, .14) 62%, rgba(45, 45, 45, .8)); box-shadow: var(--surface015a4-shadow); }
.surface015a4-hero::after { content: ''; position: absolute; width: 130px; height: 130px; right: -54px; top: -54px; border: 1px solid rgba(255, 228, 181, .5); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255, 228, 181, .07), 0 0 0 38px rgba(255, 228, 181, .04); }
.surface015a4-kicker { margin: 0 0 7px; color: var(--surface015a4-peach); font: 600 .74rem 'Chakra Petch', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; color: var(--surface015a4-ink); font-family: 'Chakra Petch', 'Noto Sans Bengali', sans-serif; line-height: 1.2; }
h1 { max-width: 14ch; font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -.025em; }
h2 { font-size: 1.38rem; }
h3 { font-size: 1rem; }
.surface015a4-lead { max-width: 43ch; margin: 13px 0 0; color: #d6e0df; font-size: .94rem; }
.surface015a4-cta { width: 100%; min-height: 48px; margin-top: 18px; border: 0; border-radius: 5px; background: var(--surface015a4-peach); color: #25282c; font: 700 .91rem 'Chakra Petch', sans-serif; cursor: pointer; box-shadow: 5px 5px 0 rgba(32, 178, 170, .72); transition: transform .18s ease, box-shadow .18s ease; }
.surface015a4-cta:hover, .surface015a4-cta:focus-visible { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(32, 178, 170, .72); }
.surface015a4-section { margin-top: 27px; }
.surface015a4-section-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--surface015a4-line); }
.surface015a4-section-head p { margin: 0; color: var(--surface015a4-muted); font-size: .76rem; }
.surface015a4-carousel { position: relative; min-height: 174px; border-radius: 7px; overflow: hidden; background: #20242a; }
.surface015a4-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
.surface015a4-slide-active { opacity: 1; z-index: 1; }
.surface015a4-slide img { display: block; width: 100%; height: 174px; object-fit: cover; filter: saturate(.9) contrast(1.08); }
.surface015a4-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 24, 30, .88), rgba(20, 24, 30, .16)); }
.surface015a4-slide-copy { position: absolute; inset: auto 15px 19px; z-index: 2; max-width: 74%; }
.surface015a4-slide-copy strong { display: block; color: white; font: 700 1.1rem 'Chakra Petch', sans-serif; }
.surface015a4-slide-copy span { color: var(--surface015a4-peach); font-size: .79rem; }
.surface015a4-dots { position: absolute; z-index: 4; right: 13px; bottom: 13px; display: flex; gap: 6px; }
.surface015a4-dot { width: 8px; height: 8px; padding: 0; border: 1px solid white; border-radius: 50%; background: transparent; cursor: pointer; }
.surface015a4-dot-active { background: var(--surface015a4-peach); }
.surface015a4-game-block { margin-top: 25px; }
.surface015a4-game-block > h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--surface015a4-aqua); }
.surface015a4-game-block > h3::before { content: ''; width: 18px; height: 2px; background: var(--surface015a4-peach); }
.surface015a4-game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.surface015a4-game-tile { min-width: 0; padding: 5px; border: 1px solid rgba(175, 238, 238, .32); border-radius: 5px; background: rgba(54, 58, 66, .7); text-align: left; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.surface015a4-game-tile:hover, .surface015a4-game-tile:focus-visible { border-color: var(--surface015a4-peach); background: rgba(65, 105, 225, .34); transform: translateY(-2px); }
.surface015a4-game-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.surface015a4-game-tile span { display: block; min-height: 2.4em; padding: 4px 1px 1px; overflow-wrap: anywhere; color: var(--surface015a4-ink); font-size: .68rem; line-height: 1.25; }
.surface015a4-feature-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.surface015a4-feature { padding: 13px 11px; border-left: 2px solid var(--surface015a4-teal); background: rgba(54, 58, 66, .76); }
.surface015a4-feature strong { display: block; margin-bottom: 4px; color: var(--surface015a4-peach); font: 600 .84rem 'Chakra Petch', sans-serif; }
.surface015a4-feature p, .surface015a4-fact p, .surface015a4-copy p { margin: 0; color: #d2dada; font-size: .86rem; }
.surface015a4-step-list { display: grid; gap: 8px; counter-reset: steps; }
.surface015a4-step { position: relative; padding: 12px 12px 12px 49px; border: 1px solid rgba(175, 238, 238, .2); background: rgba(54, 58, 66, .65); }
.surface015a4-step::before { counter-increment: steps; content: counter(steps, decimal-leading-zero); position: absolute; left: 12px; top: 12px; color: var(--surface015a4-peach); font: 700 1rem 'Chakra Petch', sans-serif; }
.surface015a4-step strong { display: block; margin-bottom: 3px; color: var(--surface015a4-aqua); font-size: .92rem; }
.surface015a4-fact { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid rgba(175, 238, 238, .28); background: rgba(175, 238, 238, .28); }
.surface015a4-fact p { padding: 11px; background: var(--surface015a4-panel); }
.surface015a4-fact b { display: block; color: var(--surface015a4-peach); font: 700 1rem 'Chakra Petch', sans-serif; }
.surface015a4-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.surface015a4-directory a { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px; border: 1px solid rgba(175, 238, 238, .27); color: var(--surface015a4-ink); font-size: .75rem; }
.surface015a4-directory a::before { content: '↗'; color: var(--surface015a4-peach); font-family: sans-serif; }
.surface015a4-disclaimer { margin: 18px 0 0; padding: 12px; border: 1px dashed rgba(255, 228, 181, .52); color: var(--surface015a4-muted); font-size: .78rem; }
.surface015a4-copy { padding: 15px; border: 1px solid rgba(175, 238, 238, .22); background: rgba(54, 58, 66, .58); }
.surface015a4-copy + .surface015a4-copy { margin-top: 10px; }
.surface015a4-copy h3 { margin-bottom: 7px; color: var(--surface015a4-aqua); }
.surface015a4-answer { margin-top: 10px; padding: 12px; border-left: 3px solid var(--surface015a4-peach); background: rgba(65, 105, 225, .16); }
.surface015a4-answer strong { color: var(--surface015a4-peach); }
.surface015a4-menu-panel { position: fixed; inset: 70px 0 auto; z-index: 25; display: none; width: min(100% - 24px, 486px); max-height: calc(100vh - 88px); margin: 0 auto; overflow: auto; padding: 13px; border: 1px solid rgba(175, 238, 238, .38); border-radius: 0 0 8px 8px; background: #292d34; box-shadow: var(--surface015a4-shadow); }
.surface015a4-menu-open { display: grid; gap: 5px; animation: surface015a4-rise .2s ease both; }
.surface015a4-menu-panel a { min-height: 44px; padding: 9px 11px; border-bottom: 1px solid rgba(175, 238, 238, .14); color: var(--surface015a4-ink); font-size: .84rem; }
.surface015a4-menu-panel a:hover, .surface015a4-menu-panel a:focus-visible { background: rgba(32, 178, 170, .18); }
.surface015a4-bottom { position: fixed; inset: auto 0 0; z-index: 20; padding: 7px 8px max(7px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(175, 238, 238, .32); background: rgba(36, 39, 45, .97); backdrop-filter: blur(12px); }
.surface015a4-bottom-inner { width: min(100%, 510px); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.surface015a4-bottom a, .surface015a4-bottom button { min-width: 0; min-height: 58px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--surface015a4-muted); font: 500 .62rem 'Noto Sans Bengali', sans-serif; text-align: center; cursor: pointer; }
.surface015a4-bottom a span:first-child, .surface015a4-bottom button span:first-child { color: var(--surface015a4-peach); font: 1.2rem sans-serif; line-height: 1; }
.surface015a4-bottom .surface015a4-current { border-color: rgba(175, 238, 238, .42); background: rgba(65, 105, 225, .2); color: white; }
.surface015a4-footer { padding: 24px 14px 15px; color: var(--surface015a4-muted); text-align: center; font-size: .78rem; }
.surface015a4-footer p { margin: 0; }
.surface015a4-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes surface015a4-rise { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 430px) {
  .surface015a4-shell, .surface015a4-topbar-inner, .surface015a4-bottom-inner { width: 100%; max-width: 430px; }
  .surface015a4-main { padding-inline: 12px; }
  .surface015a4-topbar-inner { padding-inline: 10px; }
  .surface015a4-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 375px) { .surface015a4-main { padding-inline: 17px; } .surface015a4-game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.surface015a4-help-hero { margin-bottom: 18px; }
.surface015a4-help-hero .surface015a4-kicker { color: var(--surface015a4-aqua); }
.surface015a4-help-panel { padding: 15px; border: 1px solid rgba(175, 238, 238, .28); border-top: 3px solid var(--surface015a4-teal); background: rgba(54, 58, 66, .72); }
.surface015a4-help-panel + .surface015a4-help-panel { margin-top: 10px; }
.surface015a4-help-panel h3 { margin-bottom: 7px; color: var(--surface015a4-peach); }
.surface015a4-help-panel p { margin: 0; color: #d2dada; font-size: .86rem; }
.surface015a4-help-panel p + p { margin-top: 9px; }
.surface015a4-timeline { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: helpsteps; }
.surface015a4-timeline li { position: relative; min-height: 66px; padding: 12px 12px 12px 53px; border-left: 2px solid var(--surface015a4-teal); background: rgba(54, 58, 66, .68); counter-increment: helpsteps; }
.surface015a4-timeline li::before { content: counter(helpsteps, decimal-leading-zero); position: absolute; left: 12px; top: 12px; color: var(--surface015a4-peach); font: 700 1rem 'Chakra Petch', sans-serif; }
.surface015a4-timeline strong { display: block; margin-bottom: 3px; color: var(--surface015a4-aqua); font-size: .9rem; }
.surface015a4-timeline span { color: #d2dada; font-size: .84rem; }
.surface015a4-help-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.surface015a4-help-table th, .surface015a4-help-table td { padding: 9px 8px; border: 1px solid rgba(175, 238, 238, .22); vertical-align: top; text-align: left; }
.surface015a4-help-table th { color: var(--surface015a4-peach); background: rgba(65, 105, 225, .24); font-weight: 700; }
.surface015a4-help-table td { color: #d2dada; background: rgba(45, 45, 45, .48); }
.surface015a4-help-table td strong { color: var(--surface015a4-aqua); }
.surface015a4-promo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.surface015a4-promo-row button { min-height: 48px; padding: 8px 10px; border: 1px solid rgba(255, 228, 181, .58); border-radius: 5px; background: rgba(32, 178, 170, .14); color: var(--surface015a4-ink); font: 600 .78rem 'Noto Sans Bengali', sans-serif; cursor: pointer; }
.surface015a4-promo-row button:hover, .surface015a4-promo-row button:focus-visible { background: rgba(65, 105, 225, .4); box-shadow: 0 0 16px rgba(175, 238, 238, .18); }
.surface015a4-note-stack { display: grid; gap: 8px; }
.surface015a4-note { padding: 11px 12px; border-left: 3px solid var(--surface015a4-peach); background: rgba(255, 228, 181, .08); color: #dce4e1; font-size: .83rem; }
.surface015a4-note strong { color: var(--surface015a4-peach); }
.surface015a4-faq-list { display: grid; gap: 7px; }
.surface015a4-faq-list details { border: 1px solid rgba(175, 238, 238, .22); background: rgba(54, 58, 66, .62); }
.surface015a4-faq-list summary { min-height: 44px; padding: 11px 12px; color: var(--surface015a4-aqua); font-size: .86rem; font-weight: 700; cursor: pointer; }
.surface015a4-faq-list details p { margin: 0; padding: 0 12px 12px; color: #d2dada; font-size: .83rem; }
.surface015a4-checklist { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.surface015a4-checklist li { position: relative; padding: 10px 10px 10px 35px; border: 1px solid rgba(175, 238, 238, .2); color: #d2dada; font-size: .84rem; }
.surface015a4-checklist li::before { content: '✓'; position: absolute; left: 11px; color: var(--surface015a4-peach); font: 700 1rem sans-serif; }
.surface015a4-relation { display: grid; gap: 6px; }
.surface015a4-relation div { padding: 10px; background: rgba(65, 105, 225, .16); border-bottom: 1px solid rgba(175, 238, 238, .2); color: #d2dada; font-size: .84rem; }
.surface015a4-relation b { color: var(--surface015a4-peach); }
@media (max-width: 360px) { .surface015a4-promo-row { grid-template-columns: 1fr; } .surface015a4-help-table { font-size: .72rem; } .surface015a4-help-table th, .surface015a4-help-table td { padding: 8px 6px; } }