@charset "UTF-8";
/* ============================================================
   f9999 mobile chrome stylesheet
   Design language: layered slate canvas, amber accents,
   low-radius partitioned blocks, square high-contrast CTAs,
   geometric Bengali headings + neutral body text.
   All classes and custom properties use the layer4d7f4- prefix.
   ============================================================ */

:root{
  --layer4d7f4-deep:#141d2a;
  --layer4d7f4-bg:#2E4057;
  --layer4d7f4-panel:#243448;
  --layer4d7f4-panel-2:#1b2839;
  --layer4d7f4-line:#3d5470;
  --layer4d7f4-text:#eef3f8;
  --layer4d7f4-body:#d4dee9;
  --layer4d7f4-muted:#999999;
  --layer4d7f4-amber:#FFB347;
  --layer4d7f4-orange:#FF8C00;
  --layer4d7f4-gold:#FFCC33;
  --layer4d7f4-coral:#FF7F50;
  --layer4d7f4-head-font:'Anek Bangla','Hind Siliguri',system-ui,sans-serif;
  --layer4d7f4-body-font:'Hind Siliguri',system-ui,-apple-system,sans-serif;
  --layer4d7f4-radius:4px;
  --layer4d7f4-glow:0 0 10px rgba(255,204,51,.38);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden}
body{
  margin:0;
  background:var(--layer4d7f4-deep);
  color:var(--layer4d7f4-body);
  font-family:var(--layer4d7f4-body-font);
  font-size:14px;
  line-height:1.85;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--layer4d7f4-gold);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--layer4d7f4-gold);outline-offset:2px;border-radius:2px}

/* Phone canvas: locked to a 430px column on any screen */
.layer4d7f4-canvas{
  position:relative;
  max-width:430px;
  margin:0 auto;
  background:var(--layer4d7f4-bg);
  min-height:100vh;
  min-height:100dvh;
  box-shadow:0 0 46px rgba(0,0,0,.5);
}
@media (min-width:480px){
  .layer4d7f4-canvas{border-left:1px solid var(--layer4d7f4-line);border-right:1px solid var(--layer4d7f4-line)}
}

/* ------------------------------------------------------------
   Fixed top bar: brand row + action row + slide-in route panel
   ------------------------------------------------------------ */
.layer4d7f4-topbar{
  position:fixed;
  top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  z-index:50;
  background:linear-gradient(180deg,#1b2839 0%,#223046 100%);
  border-bottom:1px solid var(--layer4d7f4-line);
  transition:box-shadow .25s ease;
}
.layer4d7f4-topbar.layer4d7f4-topbar--open{box-shadow:0 10px 26px rgba(0,0,0,.45)}

.layer4d7f4-brandrow{
  display:flex;align-items:center;justify-content:space-between;
  min-height:52px;padding:8px 12px 6px;
}
.layer4d7f4-brand{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--layer4d7f4-text);text-decoration:none;
}
.layer4d7f4-brand:hover{text-decoration:none}
.layer4d7f4-brand img{
  width:34px;height:34px;
  border-radius:6px;
  border:1px solid rgba(255,204,51,.55);
  box-shadow:0 0 8px rgba(255,204,51,.25);
}
.layer4d7f4-brandname{
  font-family:var(--layer4d7f4-head-font);
  font-weight:800;font-size:21px;letter-spacing:.6px;
  color:var(--layer4d7f4-gold);
  text-shadow:0 0 12px rgba(255,204,51,.35);
}

.layer4d7f4-actionrow{
  display:flex;align-items:center;gap:8px;
  padding:0 12px 9px;
}
.layer4d7f4-menubtn{
  flex:1 1 auto;
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
  background:rgba(20,29,42,.55);
  color:var(--layer4d7f4-text);
  font-family:var(--layer4d7f4-head-font);
  font-weight:600;font-size:14px;letter-spacing:.3px;
}
.layer4d7f4-menubtn svg{width:16px;height:16px;stroke:var(--layer4d7f4-amber);transition:transform .28s ease}
.layer4d7f4-topbar.layer4d7f4-topbar--open .layer4d7f4-menubtn svg{transform:rotate(180deg)}
.layer4d7f4-menubtn:active{background:rgba(255,204,51,.12)}

/* Square high-contrast CTA buttons */
.layer4d7f4-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 15px;
  border-radius:2px;
  font-family:var(--layer4d7f4-head-font);
  font-weight:700;font-size:14px;letter-spacing:.4px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.layer4d7f4-btn--solid{
  background:var(--layer4d7f4-orange);
  color:#141d2a;
  border:1px solid #ff9d26;
}
.layer4d7f4-btn--solid:active{transform:translateY(1px);box-shadow:0 0 14px rgba(255,140,0,.55)}
.layer4d7f4-btn--ghost{
  background:transparent;
  color:var(--layer4d7f4-gold);
  border:1px solid var(--layer4d7f4-gold);
}
.layer4d7f4-btn--ghost:active{background:rgba(255,204,51,.14);box-shadow:var(--layer4d7f4-glow)}
.layer4d7f4-actionrow .layer4d7f4-btn{flex:0 0 auto}

/* Compact route panel: slides in under the action row */
.layer4d7f4-routes{
  overflow:hidden;
  max-height:0;opacity:0;
  transform:translateY(-10px);
  transition:max-height .3s ease,opacity .25s ease,transform .3s ease;
  background:var(--layer4d7f4-panel-2);
  border-top:0 solid transparent;
}
.layer4d7f4-topbar.layer4d7f4-topbar--open .layer4d7f4-routes{
  max-height:420px;opacity:1;transform:translateY(0);
  border-top:1px solid var(--layer4d7f4-line);
}
.layer4d7f4-routesgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;padding:11px 12px 13px;
}
.layer4d7f4-routesgrid a{
  display:flex;align-items:center;gap:8px;
  min-height:44px;padding:0 10px;
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
  background:rgba(36,52,72,.72);
  color:var(--layer4d7f4-text);
  font-size:13px;font-weight:500;
  text-decoration:none;
}
.layer4d7f4-routesgrid a::before{
  content:"";width:7px;height:7px;flex:0 0 7px;
  background:var(--layer4d7f4-orange);
  transform:rotate(45deg);
}
.layer4d7f4-routesgrid a:hover{border-color:var(--layer4d7f4-amber);text-decoration:none}
.layer4d7f4-routesgrid a:active{background:rgba(255,179,71,.14)}
.layer4d7f4-routesgrid a[aria-current="page"]{border-color:var(--layer4d7f4-gold);color:var(--layer4d7f4-gold)}

/* ------------------------------------------------------------
   Main column
   ------------------------------------------------------------ */
.layer4d7f4-main{
  padding:110px 0 calc(88px + env(safe-area-inset-bottom,0px));
}

/* Hero carousel (banners are 1915x450 wide strips) */
.layer4d7f4-hero{
  position:relative;
  margin:10px 10px 0;
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
  overflow:hidden;
  background:var(--layer4d7f4-panel-2);
}
.layer4d7f4-track{display:flex;transition:transform .45s ease}
.layer4d7f4-slide{
  flex:0 0 100%;width:100%;display:block;padding:0;
  aspect-ratio:1915/450;
}
.layer4d7f4-slide img{width:100%;height:100%;object-fit:cover}
.layer4d7f4-slide:active img{filter:brightness(1.08)}
.layer4d7f4-dots{
  position:absolute;left:0;right:0;bottom:6px;
  display:flex;justify-content:center;gap:7px;
}
.layer4d7f4-dot{
  width:8px;height:8px;padding:0;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(20,29,42,.6);
}
.layer4d7f4-dot--on{background:var(--layer4d7f4-gold);box-shadow:var(--layer4d7f4-glow)}

/* H1 + intro partition */
.layer4d7f4-intro{
  margin:12px 10px 0;
  padding:13px 12px 12px;
  background:var(--layer4d7f4-panel);
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
}
.layer4d7f4-h1{
  margin:0 0 8px;
  font-family:var(--layer4d7f4-head-font);
  font-size:19px;font-weight:800;line-height:1.5;
  color:var(--layer4d7f4-text);
  padding-left:10px;
  border-left:3px solid var(--layer4d7f4-orange);
}
.layer4d7f4-intro p{margin:0 0 9px}
.layer4d7f4-intro p:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   Generic content blocks (partitioned sections)
   ------------------------------------------------------------ */
.layer4d7f4-block{
  margin:14px 10px 0;
  padding:14px 12px 13px;
  background:var(--layer4d7f4-panel);
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
  position:relative;
}
.layer4d7f4-kicker{
  display:inline-block;
  margin:0 0 6px;
  font-family:var(--layer4d7f4-head-font);
  font-size:11px;font-weight:600;letter-spacing:1.6px;
  color:var(--layer4d7f4-muted);
  text-transform:uppercase;
}
.layer4d7f4-h2{
  margin:0 0 10px;
  font-family:var(--layer4d7f4-head-font);
  font-size:18px;font-weight:700;line-height:1.55;
  color:var(--layer4d7f4-gold);
  padding-left:10px;
  border-left:3px solid var(--layer4d7f4-orange);
}
.layer4d7f4-h3{
  margin:14px 0 6px;
  font-family:var(--layer4d7f4-head-font);
  font-size:15px;font-weight:700;line-height:1.5;
  color:var(--layer4d7f4-amber);
}
.layer4d7f4-block p{margin:0 0 9px}
.layer4d7f4-block p:last-of-type{margin-bottom:0}
.layer4d7f4-inline{color:var(--layer4d7f4-gold);border-bottom:1px dotted rgba(255,204,51,.7);padding-bottom:1px}
.layer4d7f4-inline:hover{text-decoration:none;border-bottom-style:solid}

/* Scenario branch rows: condition chip on the left */
.layer4d7f4-branches{margin:4px 0 6px;border-top:1px solid var(--layer4d7f4-line)}
.layer4d7f4-branchrow{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--layer4d7f4-line);
}
.layer4d7f4-branchchip{
  flex:0 0 92px;
  margin-top:3px;
  padding:3px 6px;
  border:1px solid var(--layer4d7f4-amber);
  border-radius:2px;
  color:var(--layer4d7f4-amber);
  font-family:var(--layer4d7f4-head-font);
  font-size:11.5px;font-weight:600;line-height:1.4;
  text-align:center;
}
.layer4d7f4-branchtext{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.75}

/* Bullet lists with square amber markers */
.layer4d7f4-squares{list-style:none;margin:2px 0 8px;padding:0}
.layer4d7f4-squares li{
  position:relative;
  padding:4px 0 4px 20px;
  border-bottom:1px dashed rgba(61,84,112,.55);
  font-size:13.5px;line-height:1.75;
}
.layer4d7f4-squares li:last-child{border-bottom:0}
.layer4d7f4-squares li::before{
  content:"";position:absolute;left:2px;top:13px;
  width:8px;height:8px;
  background:var(--layer4d7f4-amber);
  transform:rotate(45deg);
}

/* Numbered steps */
.layer4d7f4-steps{list-style:none;margin:4px 0 8px;padding:0;counter-reset:layer4d7f4-step}
.layer4d7f4-steps li{
  position:relative;
  counter-increment:layer4d7f4-step;
  padding:6px 0 6px 36px;
  font-size:13.5px;line-height:1.75;
}
.layer4d7f4-steps li::before{
  content:counter(layer4d7f4-step);
  position:absolute;left:0;top:6px;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--layer4d7f4-gold);
  border-radius:2px;
  color:var(--layer4d7f4-gold);
  font-family:var(--layer4d7f4-head-font);
  font-size:12.5px;font-weight:700;
}

/* Q&A rows */
.layer4d7f4-qa{margin:2px 0 6px;border-top:1px solid var(--layer4d7f4-line)}
.layer4d7f4-qaitem{padding:9px 0;border-bottom:1px solid var(--layer4d7f4-line)}
.layer4d7f4-q{
  display:block;
  font-family:var(--layer4d7f4-head-font);
  font-weight:700;font-size:13.5px;color:var(--layer4d7f4-amber);
  margin:0 0 3px;
}
.layer4d7f4-a{margin:0;font-size:13.5px;line-height:1.75}

/* ------------------------------------------------------------
   Game lobby
   ------------------------------------------------------------ */
.layer4d7f4-lobby{margin:14px 10px 0}
.layer4d7f4-cat{
  margin-top:12px;
  padding:12px 10px 11px;
  background:var(--layer4d7f4-panel);
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
}
.layer4d7f4-cat:first-of-type{margin-top:0}
.layer4d7f4-cathead{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 4px;
}
.layer4d7f4-cathead h3{margin:0;font-family:var(--layer4d7f4-head-font);font-size:15.5px;font-weight:700;color:var(--layer4d7f4-amber)}
.layer4d7f4-count{
  flex:0 0 auto;
  padding:2px 8px;
  border:1px solid var(--layer4d7f4-line);
  border-radius:2px;
  color:var(--layer4d7f4-muted);
  font-size:11px;letter-spacing:.4px;
}
.layer4d7f4-catnote{margin:0 0 10px;font-size:12.5px;line-height:1.7;color:var(--layer4d7f4-body)}
.layer4d7f4-hotbadge{
  display:inline-block;vertical-align:2px;margin-left:6px;
  padding:1px 6px;
  background:var(--layer4d7f4-coral);
  color:#141d2a;
  border-radius:2px;
  font-size:10px;font-weight:700;letter-spacing:.5px;
}

/* Pure image tiles with a short name underneath */
.layer4d7f4-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px 7px;
}
.layer4d7f4-tile{
  display:flex;flex-direction:column;align-items:center;
  min-width:0;min-height:44px;
  text-align:center;
  transition:transform .18s ease,filter .18s ease;
}
.layer4d7f4-tile img{
  width:100%;aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
  background:var(--layer4d7f4-panel-2);
  transition:box-shadow .18s ease,border-color .18s ease;
}
.layer4d7f4-tile span{
  margin-top:4px;
  font-size:10.5px;line-height:1.35;
  color:#cfd9e4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.layer4d7f4-tile:hover img,.layer4d7f4-tile:focus-visible img{border-color:var(--layer4d7f4-gold);box-shadow:var(--layer4d7f4-glow)}
.layer4d7f4-tile:active{transform:translateY(-2px)}
.layer4d7f4-tile:active img{box-shadow:var(--layer4d7f4-glow)}

/* Five columns once the canvas reaches 400px */
@media (min-width:400px){
  .layer4d7f4-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px 8px}
}

/* ------------------------------------------------------------
   Extended homepage footer: brand note, promo actions, directory
   ------------------------------------------------------------ */
.layer4d7f4-ext{
  margin:16px 10px 0;
  padding:14px 12px 13px;
  background:var(--layer4d7f4-panel-2);
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
}
.layer4d7f4-exttitle{
  margin:0 0 8px;
  font-family:var(--layer4d7f4-head-font);
  font-size:16px;font-weight:700;color:var(--layer4d7f4-gold);
}
.layer4d7f4-brandnote{margin:0 0 12px;font-size:13px;line-height:1.8}
.layer4d7f4-promogrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  margin:0 0 14px;
}
.layer4d7f4-promo{
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 8px;
  border-radius:2px;
  font-family:var(--layer4d7f4-head-font);
  font-size:12.5px;font-weight:700;letter-spacing:.2px;
  line-height:1.4;text-align:center;
  transition:transform .18s ease,box-shadow .18s ease;
}
.layer4d7f4-promo--a{background:var(--layer4d7f4-orange);color:#141d2a;border:1px solid #ff9d26}
.layer4d7f4-promo--b{background:var(--layer4d7f4-coral);color:#141d2a;border:1px solid #ff9364}
.layer4d7f4-promo--c{background:rgba(255,204,51,.14);color:var(--layer4d7f4-gold);border:1px solid var(--layer4d7f4-gold)}
.layer4d7f4-promo:active{transform:translateY(1px);box-shadow:var(--layer4d7f4-glow)}
.layer4d7f4-dirgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
}
.layer4d7f4-dirgrid a{
  display:block;
  min-height:44px;
  display:flex;align-items:center;
  padding:6px 10px;
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
  background:rgba(36,52,72,.6);
  color:var(--layer4d7f4-text);
  font-size:12.5px;line-height:1.4;
}
.layer4d7f4-dirgrid a:hover{border-color:var(--layer4d7f4-amber);text-decoration:none}
.layer4d7f4-dirgrid a:active{background:rgba(255,179,71,.14)}
.layer4d7f4-disclaim{
  margin:13px 0 0;
  padding-top:10px;
  border-top:1px solid var(--layer4d7f4-line);
  font-size:11.5px;line-height:1.7;
  color:var(--layer4d7f4-muted);
}

/* Common slim footer (copyright only) */
.layer4d7f4-foot{
  max-width:430px;
  margin:16px auto 0;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--layer4d7f4-line);
  text-align:center;
  font-size:11.5px;color:var(--layer4d7f4-muted);
  letter-spacing:.3px;
}

/* ------------------------------------------------------------
   Bottom dock: outlined function bar with 5 roles
   ------------------------------------------------------------ */
.layer4d7f4-dock{
  position:fixed;
  bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  z-index:60;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:rgba(20,29,42,.97);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--layer4d7f4-line);
  padding:4px 2px calc(4px + env(safe-area-inset-bottom,0px));
}
.layer4d7f4-dockitem{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:52px;
  padding:2px 1px;
  color:var(--layer4d7f4-muted);
  text-decoration:none;
}
.layer4d7f4-dockitem:hover{text-decoration:none}
.layer4d7f4-dockicon{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--layer4d7f4-line);
  border-radius:var(--layer4d7f4-radius);
  background:rgba(36,52,72,.5);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.layer4d7f4-dockicon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.layer4d7f4-docklabel{
  font-size:10px;line-height:1.3;letter-spacing:.2px;
  color:var(--layer4d7f4-muted);
  transition:color .2s ease;
}
.layer4d7f4-dockitem:active .layer4d7f4-dockicon{box-shadow:var(--layer4d7f4-glow)}
.layer4d7f4-dockitem--on .layer4d7f4-dockicon{
  border-color:var(--layer4d7f4-gold);
  box-shadow:var(--layer4d7f4-glow);
}
.layer4d7f4-dockitem--on .layer4d7f4-dockicon svg{stroke:var(--layer4d7f4-gold)}
.layer4d7f4-dockitem--on .layer4d7f4-docklabel{color:var(--layer4d7f4-gold);font-weight:700}

/* Screen reader helper (labels for icon-only controls) */
.layer4d7f4-sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion:reduce){
  .layer4d7f4-track,.layer4d7f4-routes,.layer4d7f4-tile,.layer4d7f4-menubtn svg{transition:none}
}