/* ==========================================================================
   9777 dbt - compact shell stylesheet
   File   : css/compact-a4ce25-shell.css
   Prefix : framee2581-
   Canvas : mobile-first 320-430px, centered phone frame on wide screens
   Palette: #141414 bg | #B0E0E6 mist | #87CEFA sky | #C0C0C0 silver | #48D1CC tide
   Tone   : monospace accents over regular Bengali body text,
            low-radius sectioned blocks, mixed large/small game cards,
            step-driven rhythm, motion budget spent on key CTAs only.
   ========================================================================== */

:root{
  --framee2581-bg:#141414;
  --framee2581-out:#0b0b0b;
  --framee2581-panel:#1b1b1b;
  --framee2581-panel2:#212121;
  --framee2581-line:#2b2b2b;
  --framee2581-line2:#242424;
  --framee2581-mist:#B0E0E6;
  --framee2581-sky:#87CEFA;
  --framee2581-silver:#C0C0C0;
  --framee2581-tide:#48D1CC;
  --framee2581-dim:#8f9a9d;
  --framee2581-body:'Noto Sans Bengali','Hind Siliguri','SolaimanLipi','Segoe UI',system-ui,sans-serif;
  --framee2581-mono:ui-monospace,'Cascadia Mono','Consolas','Courier New',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--framee2581-out);
  color:var(--framee2581-silver);
  font-family:var(--framee2581-body);
  font-size:14px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--framee2581-sky);text-decoration:none}
ul,ol{list-style:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--framee2581-tide);outline-offset:2px;border-radius:2px}
::selection{background:var(--framee2581-tide);color:#141414}

/* ---------- phone canvas ---------- */
.framee2581-canvas{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:var(--framee2581-bg);
  box-shadow:0 0 0 1px var(--framee2581-line);
}

/* ---------- fixed top bar : brand layer + action layer ---------- */
.framee2581-top{
  position:fixed;
  top:0;left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:70;
  background:rgba(20,20,20,.97);
  border-bottom:1px solid var(--framee2581-line);
}
.framee2581-brandrow{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 6px;
}
.framee2581-logo{
  width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--framee2581-tide);
  border-radius:4px;
  background:#0e0e0e;
  object-fit:cover;
}
.framee2581-brandname{
  flex:1 1 auto;min-width:0;
  font-family:var(--framee2581-mono);
  font-weight:700;font-size:15px;letter-spacing:.6px;
  color:var(--framee2581-mist);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.framee2581-menubtn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 10px;
  background:var(--framee2581-panel);
  border:1px solid var(--framee2581-line);
  border-radius:4px;
  color:var(--framee2581-mist);
  font-family:var(--framee2581-body);
  font-size:12px;cursor:pointer;
}
.framee2581-menubtn svg{
  width:18px;height:18px;
  fill:none;stroke:var(--framee2581-tide);stroke-width:2;
  stroke-linecap:round;
}
.framee2581-actionrow{
  display:flex;gap:8px;
  padding:0 12px 9px;
}
.framee2581-cta{
  flex:1 1 0;min-height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--framee2581-body);
  font-size:13px;font-weight:700;letter-spacing:.3px;
  border-radius:4px;cursor:pointer;
}
.framee2581-cta-reg{
  background:var(--framee2581-tide);
  color:#141414;
  border:1px solid var(--framee2581-tide);
}
.framee2581-cta-log{
  background:transparent;
  color:var(--framee2581-silver);
  border:1px solid var(--framee2581-silver);
}
.framee2581-cta:active{transform:scale(.96)}

/* ---------- compact route panel (collapsible menu) ---------- */
.framee2581-routes{
  max-height:0;overflow:hidden;
  transition:max-height .28s ease;
}
.framee2581-routes.framee2581-open{max-height:600px}
.framee2581-routegrid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--framee2581-line);
  border-top:1px solid var(--framee2581-line);
}
.framee2581-route{
  display:flex;align-items:center;gap:8px;
  min-height:46px;padding:8px 12px;
  background:var(--framee2581-bg);
  color:var(--framee2581-silver);
  font-size:12.5px;line-height:1.3;
}
.framee2581-route b{
  font-family:var(--framee2581-mono);
  font-weight:400;font-size:10px;
  color:var(--framee2581-tide);
}
.framee2581-route.framee2581-here{
  background:#1d2b2b;
  color:var(--framee2581-mist);
}

/* ---------- main flow ---------- */
.framee2581-main{
  padding-top:108px;   /* fixed header clearance */
  padding-bottom:22px; /* base bottom breathing room */
}

/* ---------- hero ---------- */
.framee2581-hero{padding:16px 12px 4px}
.framee2581-h1{
  font-size:21px;line-height:1.42;
  font-weight:800;color:var(--framee2581-mist);
}
.framee2581-lead{margin-top:8px;font-size:13.5px;color:var(--framee2581-silver)}
.framee2581-lead strong{color:var(--framee2581-sky);font-weight:700}
.framee2581-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--framee2581-line);
  border:1px solid var(--framee2581-line);
  border-radius:4px;overflow:hidden;
  margin-top:12px;
}
.framee2581-stat{
  background:var(--framee2581-panel);
  padding:10px 6px;text-align:center;
}
.framee2581-stat b{
  display:block;
  font-family:var(--framee2581-mono);
  font-size:16px;color:var(--framee2581-tide);
}
.framee2581-stat span{font-size:10.5px;color:var(--framee2581-dim)}

/* ---------- promo carousel ---------- */
.framee2581-carousel{padding:14px 12px 2px;touch-action:pan-y}
.framee2581-slide{display:none}
.framee2581-slide.framee2581-on{display:block}
.framee2581-slidehit{
  display:block;position:relative;
  border:1px solid var(--framee2581-line);
  border-radius:4px;overflow:hidden;
}
.framee2581-slidehit img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  background:#101010;
}
.framee2581-slidecap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:2px;
  padding:24px 10px 8px;
  background:linear-gradient(180deg,rgba(20,20,20,0),rgba(20,20,20,.9));
}
.framee2581-slidecap b{color:var(--framee2581-mist);font-size:14px}
.framee2581-slidecap i{
  font-style:normal;
  font-family:var(--framee2581-mono);
  font-size:10px;letter-spacing:1px;
  color:var(--framee2581-tide);
}
.framee2581-dots{
  display:flex;justify-content:center;gap:8px;
  padding:8px 0 2px;
}
.framee2581-dot{
  width:24px;height:7px;border:0;border-radius:2px;
  background:var(--framee2581-panel2);cursor:pointer;
}
.framee2581-dot.framee2581-on{background:var(--framee2581-tide)}

/* ---------- content blocks ---------- */
.framee2581-block{padding:18px 12px 4px}
.framee2581-blockhead{
  display:flex;align-items:center;gap:8px;
  border-left:3px solid var(--framee2581-tide);
  padding:3px 0 3px 10px;
  margin-bottom:6px;
}
.framee2581-h2{
  font-size:16.5px;line-height:1.5;
  font-weight:700;color:var(--framee2581-mist);
}
.framee2581-count{
  flex:0 0 auto;
  font-family:var(--framee2581-mono);
  font-size:10px;color:var(--framee2581-tide);
  border:1px solid var(--framee2581-line);
  border-radius:3px;padding:2px 6px;
}
.framee2581-blockintro{margin:4px 0 10px;font-size:13px;color:var(--framee2581-silver)}
.framee2581-blockintro strong{color:var(--framee2581-sky);font-weight:700}
.framee2581-related{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 10px;font-size:11.5px;
}
.framee2581-related a{
  border:1px solid var(--framee2581-line);
  background:var(--framee2581-panel);
  border-radius:3px;padding:5px 9px;
  color:var(--framee2581-sky);
}

/* ---------- game grid : mixed feature + compact cells ---------- */
.framee2581-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.framee2581-gcard{
  display:flex;flex-direction:column;gap:4px;
  background:var(--framee2581-panel);
  border:1px solid var(--framee2581-line2);
  border-radius:4px;
  padding:5px 4px 6px;
  text-align:center;color:var(--framee2581-silver);
}
.framee2581-gcard img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:3px;background:#101010;
}
.framee2581-gname{
  font-size:10.5px;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.framee2581-gfeature{
  grid-column:span 2;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#1e2626,#181818);
  border:1px solid #2d3b3b;
  border-radius:4px;padding:8px;
  color:var(--framee2581-mist);
}
.framee2581-gfeature img{
  width:58px;height:58px;flex:0 0 auto;
  object-fit:cover;border-radius:4px;
  border:1px solid #334444;background:#101010;
}
.framee2581-gfeaturetxt{min-width:0}
.framee2581-gfeaturetxt b{
  display:block;font-size:12.5px;line-height:1.35;
  overflow-wrap:anywhere;
}
.framee2581-gfeaturetxt i{
  font-style:normal;
  font-family:var(--framee2581-mono);
  font-size:9.5px;letter-spacing:1px;
  color:var(--framee2581-dim);
}
@media (min-width:375px){
  .framee2581-grid{gap:8px}
  .framee2581-gfeaturetxt b{font-size:13px}
}

/* ---------- step list (how-to) ---------- */
.framee2581-steps{
  counter-reset:framee2581-step;
  display:flex;flex-direction:column;gap:8px;
}
.framee2581-steps li{
  counter-increment:framee2581-step;
  position:relative;
  background:var(--framee2581-panel);
  border:1px solid var(--framee2581-line);
  border-left:3px solid var(--framee2581-sky);
  border-radius:4px;
  padding:10px 10px 10px 40px;
  font-size:12.5px;color:var(--framee2581-silver);
}
.framee2581-steps li::before{
  content:counter(framee2581-step,decimal-leading-zero);
  position:absolute;left:11px;top:11px;
  font-family:var(--framee2581-mono);
  font-size:11px;color:var(--framee2581-tide);
}
.framee2581-steps li strong{color:var(--framee2581-mist)}

/* ---------- trick rows ---------- */
.framee2581-tricks{display:flex;flex-direction:column;gap:8px}
.framee2581-trick{
  display:flex;gap:10px;
  background:var(--framee2581-panel);
  border:1px solid var(--framee2581-line);
  border-radius:4px;padding:9px 10px;
  font-size:12.5px;
}
.framee2581-trick b{
  flex:0 0 auto;padding-top:2px;
  font-family:var(--framee2581-mono);
  font-weight:400;font-size:10.5px;
  color:var(--framee2581-tide);letter-spacing:.5px;
}
.framee2581-trick strong{color:var(--framee2581-mist)}

/* ---------- decision checklist ---------- */
.framee2581-checks{display:flex;flex-direction:column;gap:7px}
.framee2581-checks li{
  position:relative;
  background:var(--framee2581-panel);
  border:1px solid var(--framee2581-line);
  border-radius:4px;
  padding:8px 10px 8px 32px;
  font-size:12.5px;
}
.framee2581-checks li::before{
  content:"";position:absolute;left:10px;top:13px;
  width:11px;height:11px;
  border:1.5px solid var(--framee2581-tide);
  border-radius:2px;
}
.framee2581-checks li strong{color:var(--framee2581-sky)}

/* ---------- scenario answers ---------- */
.framee2581-qa{display:flex;flex-direction:column;gap:10px}
.framee2581-qaitem{
  background:var(--framee2581-panel);
  border:1px solid var(--framee2581-line);
  border-radius:4px;padding:10px 11px;
}
.framee2581-qaq{
  font-size:13px;line-height:1.5;
  font-weight:700;color:var(--framee2581-sky);
  margin:0 0 4px;
}
.framee2581-qaa{font-size:12.5px;color:var(--framee2581-silver)}
.framee2581-note{
  margin-top:10px;padding:9px 11px;
  background:#191d1d;
  border:1px dashed #2f3c3c;border-radius:4px;
  font-size:12px;color:var(--framee2581-dim);
}

/* ---------- inline affiliate text link ---------- */
.framee2581-aff{
  color:var(--framee2581-tide);
  border-bottom:1px dashed var(--framee2581-tide);
}

/* ---------- extended footer (homepage only) ---------- */
.framee2581-extfoot{
  margin-top:18px;
  border-top:1px solid var(--framee2581-line);
}
.framee2581-extsection{
  padding:15px 12px;
  border-bottom:1px solid var(--framee2581-line2);
}
.framee2581-exttag{
  font-family:var(--framee2581-mono);
  font-size:9.5px;letter-spacing:2px;
  color:var(--framee2581-tide);
  margin:0 0 7px;
}
.framee2581-extsection .framee2581-h2{margin-bottom:7px}
.framee2581-extbrand{font-size:12.5px;color:var(--framee2581-silver)}
.framee2581-promos{display:flex;flex-direction:column}
.framee2581-promorow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:46px;padding:9px 2px;
  border-bottom:1px dashed #262626;
  color:var(--framee2581-mist);font-size:13px;
}
.framee2581-promorow:last-child{border-bottom:0}
.framee2581-promorow b{
  font-family:var(--framee2581-mono);
  font-weight:400;font-size:10px;
  color:var(--framee2581-tide);letter-spacing:1px;
}
.framee2581-directory{
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
}
.framee2581-dirlink{
  background:var(--framee2581-panel);
  border:1px solid var(--framee2581-line);
  border-radius:3px;padding:8px 9px;
  color:var(--framee2581-sky);font-size:11.5px;line-height:1.45;
}
.framee2581-disclaimer{font-size:11.5px;line-height:1.75;color:var(--framee2581-dim)}
.framee2581-copy{
  text-align:center;
  font-family:var(--framee2581-mono);
  font-size:10px;letter-spacing:.5px;
  color:var(--framee2581-dim);
  padding:12px 12px calc(84px + env(safe-area-inset-bottom));
  border-top:1px solid var(--framee2581-line);
}

/* ---------- fixed bottom rail ---------- */
.framee2581-rail{
  position:fixed;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:430px;
  z-index:70;
  display:flex;
  background:rgba(15,15,15,.98);
  border-top:1px solid var(--framee2581-line);
  padding-bottom:env(safe-area-inset-bottom);
}
.framee2581-railitem{
  flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:58px;min-width:44px;
  color:var(--framee2581-silver);
  font-size:9.5px;line-height:1.2;text-align:center;
}
.framee2581-railitem svg{
  width:21px;height:21px;
  fill:none;stroke:var(--framee2581-silver);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease;
}
.framee2581-railpromo svg{stroke:var(--framee2581-mist)}
.framee2581-railitem.framee2581-here{background:#1c2929}
.framee2581-railitem.framee2581-here svg{
  stroke:var(--framee2581-tide);
  transform:translateY(-1px) scale(1.1);
}
.framee2581-railitem.framee2581-here span{color:var(--framee2581-tide)}

/* ---------- motion budget : reduce for sensitive users ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
}