/* ==========================================================================
   f99999.click - mobile viewport stylesheet (canvas: 320-430px phone frame)
   Prefix contract: every class and variable starts with surfaceca174-
   Palette: #2E4057 / #00CED1 / #34495E / #FFEB3B / #AFEEEE / #F8F9FA
   Tone: geometric headings + neutral body, round buttons, square cards,
   horizontal icon-name game bars, short-distance transitions.
   ========================================================================== */

:root{
  --surfaceca174-ink: #F8F9FA;
  --surfaceca174-mint: #AFEEEE;
  --surfaceca174-cyan: #00CED1;
  --surfaceca174-gold: #FFEB3B;
  --surfaceca174-night: #2E4057;
  --surfaceca174-slate: #34495E;
  --surfaceca174-abyss: #1D2C3E;
  --surfaceca174-line: rgba(175,238,238,.20);
  --surfaceca174-radius-btn: 999px;
  --surfaceca174-radius-cta: 4px;
  --surfaceca174-radius-card: 6px;
  --surfaceca174-font-disp: "Segoe UI Semibold","Trebuchet MS","Arial Narrow",system-ui,sans-serif;
  --surfaceca174-font-body: system-ui,-apple-system,"Segoe UI","Noto Sans Bengali","Hind Siliguri",sans-serif;
  --surfaceca174-speed: .18s ease;
  --surfaceca174-top-h: 112px;
  --surfaceca174-bnav-h: 66px;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--surfaceca174-abyss);
  color:var(--surfaceca174-ink);
  font-family:var(--surfaceca174-font-body);
  font-size:15px;
  line-height:1.66;
}
img{ max-width:100%; display:block; }
a{ color:var(--surfaceca174-cyan); text-decoration:none; }
a:hover{ color:var(--surfaceca174-gold); }
:focus-visible{ outline:2px solid var(--surfaceca174-cyan); outline-offset:2px; border-radius:3px; }
.surfaceca174-canvas{
  position:relative;
  max-width:480px;
  margin:0 auto;
  background:var(--surfaceca174-night);
  min-height:100vh;
  box-shadow:0 0 34px rgba(0,0,0,.45);
  overflow-x:hidden;
}
.surfaceca174-main{
  padding:calc(var(--surfaceca174-top-h) + 10px) 12px calc(var(--surfaceca174-bnav-h) + 26px);
}

/* ---------- top identity bar + action row ---------- */
.surfaceca174-topbar{
  position:fixed;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  z-index:60;
  background:linear-gradient(180deg,#24374d 0%,var(--surfaceca174-night) 100%);
  border-bottom:1px solid var(--surfaceca174-line);
}
.surfaceca174-idbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:9px 12px 6px;
}
.surfaceca174-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--surfaceca174-ink);
}
.surfaceca174-brand img{
  width:38px; height:38px;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,206,209,.35);
}
.surfaceca174-brandname{
  font-family:var(--surfaceca174-font-disp);
  font-size:19px;
  letter-spacing:.06em;
}
.surfaceca174-actions{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px 10px;
}
.surfaceca174-btn{
  flex:1;
  min-height:40px;
  border:none;
  border-radius:var(--surfaceca174-radius-btn);
  font-family:var(--surfaceca174-font-body);
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:transform var(--surfaceca174-speed), box-shadow var(--surfaceca174-speed);
}
.surfaceca174-btn:active{ transform:scale(.97); }
.surfaceca174-btn-reg{
  background:var(--surfaceca174-gold);
  color:#26313f;
  box-shadow:0 3px 12px rgba(255,235,59,.28);
}
.surfaceca174-btn-login{
  background:transparent;
  color:var(--surfaceca174-mint);
  border:1.5px solid var(--surfaceca174-cyan);
}
.surfaceca174-menubtn{
  flex:0 0 44px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,206,209,.12);
  border:none;
  border-radius:12px;
  cursor:pointer;
  color:var(--surfaceca174-cyan);
}
.surfaceca174-menubtn svg{ display:block; }

/* ---------- slide-up route sheet ---------- */
.surfaceca174-scrim{
  position:fixed;
  inset:0;
  z-index:70;
  background:rgba(16,24,35,.62);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--surfaceca174-speed);
}
.surfaceca174-scrim.surfaceca174-is-on{ opacity:1; pointer-events:auto; }
.surfaceca174-sheet{
  position:fixed;
  bottom:0; left:50%;
  transform:translate(-50%,102%);
  width:100%;
  max-width:480px;
  z-index:80;
  background:var(--surfaceca174-slate);
  border-top:2px solid var(--surfaceca174-cyan);
  border-radius:20px 20px 0 0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  transition:transform .22s ease;
}
.surfaceca174-sheet.surfaceca174-is-open{ transform:translate(-50%,0); }
.surfaceca174-sheethead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 2px 10px;
}
.surfaceca174-sheettitle{
  font-family:var(--surfaceca174-font-disp);
  font-size:14px;
  letter-spacing:.08em;
  color:var(--surfaceca174-mint);
  text-transform:uppercase;
}
.surfaceca174-sheetclose{
  min-width:44px; min-height:44px;
  background:transparent;
  border:none;
  color:var(--surfaceca174-ink);
  font-size:19px;
  cursor:pointer;
  border-radius:10px;
}
.surfaceca174-sheetgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.surfaceca174-sheetgrid a{
  display:block;
  min-height:46px;
  padding:11px 12px;
  background:rgba(248,249,250,.05);
  border:1px solid var(--surfaceca174-line);
  border-radius:var(--surfaceca174-radius-card);
  color:var(--surfaceca174-ink);
  font-size:13px;
  transition:background var(--surfaceca174-speed), transform var(--surfaceca174-speed);
}
.surfaceca174-sheetgrid a:hover{ background:rgba(0,206,209,.16); color:var(--surfaceca174-ink); transform:translateY(-2px); }

/* ---------- hero carousel ---------- */
.surfaceca174-hero{
  position:relative;
  border-radius:var(--surfaceca174-radius-card);
  overflow:hidden;
  border:1px solid var(--surfaceca174-line);
  background:var(--surfaceca174-slate);
}
.surfaceca174-track{ position:relative; aspect-ratio:16/9; }
.surfaceca174-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  opacity:0;
  transform:translateX(14px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.surfaceca174-slide.surfaceca174-is-on{ opacity:1; transform:translateX(0); pointer-events:auto; }
.surfaceca174-slide img{ width:100%; height:100%; object-fit:cover; }
.surfaceca174-slidecap{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  padding:26px 14px 14px;
  background:linear-gradient(180deg,rgba(29,44,62,0) 0%,rgba(29,44,62,.94) 78%);
  color:var(--surfaceca174-ink);
}
.surfaceca174-slidecap strong{
  font-family:var(--surfaceca174-font-disp);
  font-size:16.5px;
  letter-spacing:.02em;
}
.surfaceca174-slidecta{
  align-self:flex-start;
  padding:7px 13px;
  background:var(--surfaceca174-gold);
  color:#26313f;
  font-size:12px;
  font-weight:800;
  border-radius:var(--surfaceca174-radius-cta);
}
.surfaceca174-dots{
  position:absolute;
  right:12px; bottom:11px;
  z-index:5;
  display:flex;
  gap:6px;
}
.surfaceca174-dot{
  width:22px; height:8px;
  padding:0;
  border:none;
  border-radius:4px;
  background:rgba(248,249,250,.34);
  cursor:pointer;
  transition:background var(--surfaceca174-speed);
}
.surfaceca174-dot.surfaceca174-dot-on{ background:var(--surfaceca174-gold); }

/* ---------- game shelves ---------- */
.surfaceca174-shelf{ margin:26px 0 4px; }
.surfaceca174-shelftitle{
  margin:0 0 8px;
  font-family:var(--surfaceca174-font-disp);
  font-size:17.5px;
  line-height:1.4;
  color:var(--surfaceca174-ink);
  border-left:4px solid var(--surfaceca174-cyan);
  padding-left:10px;
}
.surfaceca174-shelfintro{
  margin:0 0 9px;
  font-size:13.5px;
  color:var(--surfaceca174-mint);
}
.surfaceca174-shelfintro a{ border-bottom:1px dashed rgba(0,206,209,.6); }
.surfaceca174-shelflinks{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:0 0 12px;
  font-size:12px;
  color:rgba(175,238,238,.78);
}
.surfaceca174-shelflinks a{
  padding:4px 9px;
  background:rgba(0,206,209,.10);
  border-radius:var(--surfaceca174-radius-card);
  font-size:12px;
}
.surfaceca174-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.surfaceca174-gameitem{ min-width:0; }
.surfaceca174-gamename{ min-width:0; }
.surfaceca174-gameitem{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:64px;
  padding:8px 10px;
  background:var(--surfaceca174-slate);
  border:1px solid var(--surfaceca174-line);
  border-radius:var(--surfaceca174-radius-card);
  color:var(--surfaceca174-ink);
  transition:transform var(--surfaceca174-speed), border-color var(--surfaceca174-speed);
}
.surfaceca174-gameitem:hover{ color:var(--surfaceca174-ink); border-color:var(--surfaceca174-cyan); transform:translateY(-2px); }
.surfaceca174-gameitem:active{ transform:scale(.98); }
.surfaceca174-gameitem img{
  flex:0 0 46px;
  width:46px; height:46px;
  border-radius:9px;
  object-fit:cover;
}
.surfaceca174-gamename{
  font-size:11.5px;
  line-height:1.4;
  font-weight:600;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- content modules ---------- */
.surfaceca174-module{ margin:30px 0 4px; }
.surfaceca174-modtitle{
  margin:0 0 10px;
  font-family:var(--surfaceca174-font-disp);
  font-size:17.5px;
  line-height:1.4;
  color:var(--surfaceca174-gold);
}
.surfaceca174-lead{ margin:0 0 12px; }
.surfaceca174-lead::first-letter{ color:var(--surfaceca174-cyan); }
.surfaceca174-branchgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.surfaceca174-branch{
  padding:11px 12px;
  background:var(--surfaceca174-slate);
  border:1px solid var(--surfaceca174-line);
  border-radius:var(--surfaceca174-radius-card);
}
.surfaceca174-branch h3{
  margin:0 0 6px;
  font-family:var(--surfaceca174-font-disp);
  font-size:13.5px;
  color:var(--surfaceca174-cyan);
}
.surfaceca174-branch p{ margin:0; font-size:12.5px; line-height:1.6; }
.surfaceca174-steps{
  margin:0;
  padding:0 0 0 20px;
  display:grid;
  gap:9px;
}
.surfaceca174-steps li{ font-size:13.5px; }
.surfaceca174-steps li::marker{ color:var(--surfaceca174-gold); font-weight:800; }
.surfaceca174-fold{
  margin:10px 0 0;
  background:var(--surfaceca174-slate);
  border:1px solid var(--surfaceca174-line);
  border-radius:var(--surfaceca174-radius-card);
}
.surfaceca174-fold summary{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  font-size:13.5px;
  color:var(--surfaceca174-mint);
  list-style:none;
}
.surfaceca174-fold summary::-webkit-details-marker{ display:none; }
.surfaceca174-fold summary::after{
  content:"+";
  margin-left:auto;
  color:var(--surfaceca174-cyan);
  font-weight:800;
}
.surfaceca174-fold[open] summary::after{ content:"–"; }
.surfaceca174-fold p{ margin:0; padding:0 12px 12px; font-size:13px; }
.surfaceca174-qa{
  margin:0 0 10px;
  padding:12px;
  background:var(--surfaceca174-slate);
  border-left:4px solid var(--surfaceca174-gold);
  border-radius:var(--surfaceca174-radius-card);
}
.surfaceca174-qa h3{
  margin:0 0 6px;
  font-size:13.5px;
  font-family:var(--surfaceca174-font-disp);
  color:var(--surfaceca174-mint);
}
.surfaceca174-qa p{ margin:0; font-size:13px; }
.surfaceca174-takeaways{
  margin:0;
  padding:0 0 0 20px;
  display:grid;
  gap:8px;
}
.surfaceca174-takeaways li{ font-size:13.5px; }
.surfaceca174-takeaways li::marker{ color:var(--surfaceca174-cyan); }
.surfaceca174-cta-row{
  display:flex;
  gap:8px;
  margin:14px 0 4px;
}
.surfaceca174-cta{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  background:var(--surfaceca174-gold);
  color:#26313f;
  font-weight:800;
  font-size:13.5px;
  border-radius:var(--surfaceca174-radius-cta);
  box-shadow:0 4px 14px rgba(255,235,59,.25);
  transition:transform var(--surfaceca174-speed);
}
.surfaceca174-cta:hover{ color:#1d2430; transform:translateY(-2px); }
.surfaceca174-cta--ghost{
  background:transparent;
  color:var(--surfaceca174-mint);
  border:1.5px solid var(--surfaceca174-cyan);
  box-shadow:none;
}
.surfaceca174-cta--ghost:hover{ color:var(--surfaceca174-gold); }

/* ---------- extended footer (home only) ---------- */
.surfaceca174-xfooter{
  margin:32px 0 0;
  border-top:2px solid var(--surfaceca174-line);
  padding-top:16px;
}
.surfaceca174-promorow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:0 0 16px;
}
.surfaceca174-promo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:8px 10px;
  background:linear-gradient(135deg,rgba(0,206,209,.18),rgba(255,235,59,.12));
  border:1px solid var(--surfaceca174-line);
  border-radius:var(--surfaceca174-radius-card);
  color:var(--surfaceca174-ink);
  font-size:12.5px;
  font-weight:700;
  text-align:center;
  transition:transform var(--surfaceca174-speed);
}
.surfaceca174-promo:hover{ color:var(--surfaceca174-gold); transform:translateY(-2px); }
.surfaceca174-brandnote{
  margin:0 0 14px;
  font-size:12.5px;
  color:var(--surfaceca174-mint);
}
.surfaceca174-directory{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:0 0 14px;
}
.surfaceca174-directory a{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:7px 10px;
  background:rgba(52,73,94,.6);
  border-radius:var(--surfaceca174-radius-card);
  color:var(--surfaceca174-mint);
  font-size:12px;
}
.surfaceca174-directory a:hover{ color:var(--surfaceca174-gold); }
.surfaceca174-disclaimer{
  margin:0;
  padding:11px 12px;
  border:1px dashed rgba(255,235,59,.4);
  border-radius:var(--surfaceca174-radius-card);
  font-size:11.5px;
  line-height:1.7;
  color:rgba(248,249,250,.82);
}

/* ---------- help-page reading tools ---------- */
.surfaceca174-profile{
  margin:18px 0 0;
  padding:14px;
  background:linear-gradient(145deg,rgba(0,206,209,.13),rgba(52,73,94,.72));
  border:1px solid var(--surfaceca174-line);
  border-radius:var(--surfaceca174-radius-card);
}
.surfaceca174-profile strong{ display:block; margin-bottom:5px; color:var(--surfaceca174-gold); font-family:var(--surfaceca174-font-disp); }
.surfaceca174-profile p{ margin:0; font-size:13px; }
.surfaceca174-route{
  display:grid;
  gap:8px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
  counter-reset:surfaceca174-route;
}
.surfaceca174-route li{
  counter-increment:surfaceca174-route;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:9px;
  align-items:start;
  padding:10px;
  background:rgba(52,73,94,.72);
  border-left:3px solid var(--surfaceca174-cyan);
  border-radius:var(--surfaceca174-radius-card);
  font-size:13px;
}
.surfaceca174-route li::before{
  content:counter(surfaceca174-route,decimal-leading-zero);
  display:grid;
  place-items:center;
  min-height:28px;
  background:var(--surfaceca174-gold);
  color:#26313f;
  border-radius:8px;
  font-weight:800;
  font-size:11px;
}
.surfaceca174-route li strong{ color:var(--surfaceca174-mint); }
.surfaceca174-signalbar{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:10px 0 13px;
}
.surfaceca174-signalbar span{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  background:rgba(0,206,209,.12);
  border:1px solid rgba(0,206,209,.35);
  border-radius:var(--surfaceca174-radius-btn);
  color:var(--surfaceca174-mint);
  font-size:11.5px;
  font-weight:700;
}
.surfaceca174-checklist{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.surfaceca174-checklist li{
  position:relative;
  padding:10px 10px 10px 34px;
  background:rgba(52,73,94,.68);
  border-bottom:1px solid var(--surfaceca174-line);
  border-radius:var(--surfaceca174-radius-card);
  font-size:13px;
}
.surfaceca174-checklist li::before{
  content:"✓";
  position:absolute;
  left:11px;
  top:9px;
  color:var(--surfaceca174-gold);
  font-weight:900;
}
.surfaceca174-warning{
  margin:12px 0;
  padding:12px;
  background:rgba(255,235,59,.09);
  border:1px solid rgba(255,235,59,.42);
  border-radius:var(--surfaceca174-radius-card);
  color:var(--surfaceca174-ink);
  font-size:13px;
}
.surfaceca174-warning strong{ color:var(--surfaceca174-gold); }
.surfaceca174-facttable{
  width:100%;
  border-collapse:collapse;
  margin:10px 0 0;
  font-size:12.5px;
}
.surfaceca174-facttable th,
.surfaceca174-facttable td{
  padding:9px 8px;
  border-bottom:1px solid var(--surfaceca174-line);
  text-align:left;
  vertical-align:top;
}
.surfaceca174-facttable th{ width:34%; color:var(--surfaceca174-mint); font-weight:700; }
.surfaceca174-facttable td{ color:var(--surfaceca174-ink); }
.surfaceca174-relationship{
  margin:9px 0 0;
  padding:11px 12px;
  border-right:4px solid var(--surfaceca174-cyan);
  background:var(--surfaceca174-slate);
  border-radius:var(--surfaceca174-radius-card);
  font-size:13px;
}
.surfaceca174-relationship strong{ color:var(--surfaceca174-gold); }
.surfaceca174-promo-stack{ display:grid; gap:8px; margin-top:12px; }
.surfaceca174-promo-stack a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:46px;
  padding:9px 12px;
  background:rgba(0,206,209,.11);
  border:1px solid var(--surfaceca174-line);
  border-radius:var(--surfaceca174-radius-card);
  color:var(--surfaceca174-ink);
  font-size:13px;
  font-weight:700;
}
.surfaceca174-promo-stack a::after{ content:"↗"; color:var(--surfaceca174-gold); font-size:17px; }
.surfaceca174-promo-stack a:hover{ color:var(--surfaceca174-gold); border-color:var(--surfaceca174-cyan); }

/* ---------- common footer + bottom nav ---------- */
.surfaceca174-foot{
  margin:26px 0 0;
  padding:14px 4px 6px;
  border-top:1px solid var(--surfaceca174-line);
  text-align:center;
  font-size:11.5px;
  color:rgba(175,238,238,.66);
}
.surfaceca174-bnav{
  position:fixed;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  z-index:65;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:end;
  min-height:var(--surfaceca174-bnav-h);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(29,44,62,.9),#1a2836 100%);
  border-top:1px solid var(--surfaceca174-line);
}
.surfaceca174-bnavitem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-height:44px;
  justify-content:center;
  color:rgba(175,238,238,.8);
  font-size:9.5px;
  letter-spacing:.02em;
  padding:2px 1px;
  border:none;
  background:transparent;
  cursor:pointer;
  transition:transform var(--surfaceca174-speed), color var(--surfaceca174-speed);
}
.surfaceca174-bnavitem span{ white-space:nowrap; }
.surfaceca174-bnavitem svg{ display:block; }
.surfaceca174-bnavitem:hover{ color:var(--surfaceca174-gold); }
.surfaceca174-bnavitem--now{ color:var(--surfaceca174-gold); transform:translateY(-4px); }
.surfaceca174-bnavitem--raise{
  transform:translateY(-14px);
  color:var(--surfaceca174-ink);
}
.surfaceca174-bnavitem--raise .surfaceca174-bnavdisc{
  width:46px; height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surfaceca174-gold);
  border-radius:14px;
  box-shadow:0 5px 16px rgba(255,235,59,.35);
  color:#26313f;
}
.surfaceca174-bnavitem--raise:hover{ color:var(--surfaceca174-ink); }

/* ---------- phone-canvas breakpoints ---------- */
@media (max-width: 430px){
  .surfaceca174-main{ padding-left:10px; padding-right:10px; }
  .surfaceca174-grid{ gap:6px; }
  .surfaceca174-gameitem{ flex-direction:column; justify-content:center; text-align:center; padding:7px 4px; gap:5px; min-height:78px; }
  .surfaceca174-gameitem img{ flex:0 0 42px; width:42px; height:42px; }
  .surfaceca174-gamename{ font-size:10px; line-height:1.25; }
  .surfaceca174-slidecap strong{ font-size:15.5px; }
  .surfaceca174-promorow{ grid-template-columns:1fr 1fr; }
  .surfaceca174-bnavitem{ font-size:9px; }
}
@media (max-width: 359px){
  .surfaceca174-gameitem{ min-height:74px; padding-left:2px; padding-right:2px; }
  .surfaceca174-gameitem img{ width:36px; height:36px; flex-basis:36px; border-radius:7px; }
  .surfaceca174-gamename{ font-size:9px; }
}
@media (max-width: 360px){
  .surfaceca174-grid{ gap:5px; }
  .surfaceca174-brandname{ font-size:17px; }
  .surfaceca174-sheetgrid{ grid-template-columns:1fr; }
}
@media (min-width: 431px){
  .surfaceca174-grid{ grid-template-columns:repeat(3,1fr); }
  .surfaceca174-branchgrid{ gap:10px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}