/* ============================================================
   tk657.click — mobile display layer (bn-BD)
   File: css/tk657-display-46bdf4.css
   Class prefix: frame46bdf-   (custom properties share it)
   Canvas: 320-430px phone frame, centered on wide screens
   Palette: #0C0C0C base / #FFDFBA ink / #E9ECEF mute
            #7FFF00 lime accent / #D2B48C tan / #F4A460 sand
   Voice: rounded headings + compact body, light card radius,
          tight button radius, image-with-namebar game cards,
          slide focus indicators, solid + outlined CTAs.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --frame46bdf-bg:#0C0C0C;
  --frame46bdf-outer:#050404;
  --frame46bdf-surface:#161111;
  --frame46bdf-surface-2:#1e1616;
  --frame46bdf-surface-3:#261c17;
  --frame46bdf-ink:#FFDFBA;
  --frame46bdf-mute:#E9ECEF;
  --frame46bdf-lime:#7FFF00;
  --frame46bdf-tan:#D2B48C;
  --frame46bdf-sand:#F4A460;
  --frame46bdf-line:rgba(255,223,186,.16);
  --frame46bdf-line-strong:rgba(255,223,186,.30);
  --frame46bdf-radius:10px;
  --frame46bdf-radius-btn:8px;
  --frame46bdf-head-h:56px;
  --frame46bdf-dock-h:64px;
  --frame46bdf-font-body:'Hind Siliguri','Noto Sans Bengali',system-ui,-apple-system,sans-serif;
  --frame46bdf-font-head:'Baloo Da 2','Hind Siliguri',system-ui,sans-serif;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--frame46bdf-outer);
  color:var(--frame46bdf-mute);
  font-family:var(--frame46bdf-font-body);
  font-size:14px;
  line-height:1.62;
  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(--frame46bdf-tan);text-decoration:none;}
a:hover{color:var(--frame46bdf-sand);}
:focus-visible{outline:2px solid var(--frame46bdf-lime);outline-offset:2px;border-radius:4px;}
::selection{background:var(--frame46bdf-lime);color:#0C0C0C;}

/* phone canvas: keeps a 430px column centered on wide viewports */
.frame46bdf-canvas{
  max-width:430px;
  margin:0 auto;
  background:var(--frame46bdf-bg);
  min-height:100vh;
  position:relative;
  box-shadow:0 0 0 1px rgba(255,223,186,.06),0 0 44px rgba(0,0,0,.85);
}
.frame46bdf-main{
  padding:calc(var(--frame46bdf-head-h) + 10px) 12px calc(var(--frame46bdf-dock-h) + 34px);
}

/* skip link */
.frame46bdf-skip{
  position:absolute;left:8px;top:-52px;z-index:120;
  background:var(--frame46bdf-lime);color:#0C0C0C;
  font-weight:700;font-size:12px;padding:8px 12px;border-radius:var(--frame46bdf-radius-btn);
  transition:top .18s ease;
}
.frame46bdf-skip:focus{top:64px;}

/* ---------- top bar (LOGO-led action strip) ---------- */
.frame46bdf-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:90;
  background:linear-gradient(180deg,#141010 0%,#0e0b0b 100%);
  border-bottom:1px solid var(--frame46bdf-line);
}
.frame46bdf-bar{
  min-height:var(--frame46bdf-head-h);
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;
}
.frame46bdf-brand{
  display:flex;align-items:center;gap:8px;
  min-width:0;flex:1 1 auto;
}
.frame46bdf-logo{
  width:36px;height:36px;flex:0 0 auto;
  border-radius:9px;border:1px solid var(--frame46bdf-line-strong);
  background:#0a0808;padding:2px;object-fit:contain;
}
.frame46bdf-sitename{
  font-family:var(--frame46bdf-font-head);
  font-size:21px;font-weight:700;line-height:1;
  color:var(--frame46bdf-ink);letter-spacing:.4px;
  white-space:nowrap;
}
.frame46bdf-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;}

/* compact CTAs: solid primary + outlined secondary */
.frame46bdf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 13px;
  border-radius:var(--frame46bdf-radius-btn);
  font-family:var(--frame46bdf-font-body);font-weight:700;font-size:12.5px;
  line-height:1;white-space:nowrap;
  transition:transform .12s ease,filter .12s ease,border-color .12s ease,color .12s ease;
}
.frame46bdf-btn:active{transform:scale(.96);}
.frame46bdf-btn--solid{
  background:var(--frame46bdf-lime);color:#0C0C0C;
  box-shadow:0 3px 0 rgba(127,255,0,.25);
}
.frame46bdf-btn--solid:hover{filter:brightness(1.08);color:#0C0C0C;}
.frame46bdf-btn--ghost{
  border:1.5px solid var(--frame46bdf-sand);color:var(--frame46bdf-sand);
  background:rgba(244,164,96,.06);
}
.frame46bdf-btn--ghost:hover{border-color:var(--frame46bdf-tan);color:var(--frame46bdf-tan);}
.frame46bdf-btn--tan{
  border:1.5px solid var(--frame46bdf-tan);color:var(--frame46bdf-ink);
  background:rgba(210,180,140,.08);
}

/* menu trigger */
.frame46bdf-burger{
  width:40px;height:40px;flex:0 0 auto;
  display:grid;place-content:center;gap:4px;
  border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius-btn);
  background:var(--frame46bdf-surface);
}
.frame46bdf-burger span{
  width:16px;height:2px;border-radius:2px;background:var(--frame46bdf-ink);
  transition:transform .2s ease,opacity .2s ease;
}
.frame46bdf-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.frame46bdf-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.frame46bdf-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* expandable route panel */
.frame46bdf-nav{
  position:fixed;top:var(--frame46bdf-head-h);left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:89;
  background:#120e0e;border-bottom:1px solid var(--frame46bdf-line);
  max-height:0;overflow:hidden;
  transition:max-height .26s ease;
}
.frame46bdf-nav.frame46bdf-nav--open{max-height:432px;}
.frame46bdf-navlist{
  list-style:none;margin:0;padding:8px 10px 12px;
  columns:2;column-gap:10px;
}
.frame46bdf-navlist li{break-inside:avoid;margin:0 0 6px;}
.frame46bdf-navlist a{
  display:flex;align-items:center;gap:7px;
  min-height:44px;padding:8px 10px;
  border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius-btn);
  background:var(--frame46bdf-surface);
  color:var(--frame46bdf-mute);font-size:12.5px;font-weight:600;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.frame46bdf-navlist a::before{
  content:"";width:6px;height:6px;flex:0 0 auto;border-radius:50%;
  background:var(--frame46bdf-sand);
}
.frame46bdf-navlist a:hover{border-color:var(--frame46bdf-line-strong);color:var(--frame46bdf-ink);}
.frame46bdf-navlist a[aria-current="page"]{
  border-color:var(--frame46bdf-lime);color:var(--frame46bdf-lime);background:rgba(127,255,0,.05);
}
.frame46bdf-navlist a[aria-current="page"]::before{background:var(--frame46bdf-lime);}

/* ---------- hero ---------- */
.frame46bdf-hero{padding:6px 2px 14px;}
.frame46bdf-hero h1{
  margin:0 0 10px;
  font-family:var(--frame46bdf-font-head);
  font-size:23px;line-height:1.32;font-weight:700;color:var(--frame46bdf-ink);
}
.frame46bdf-hero h1 .frame46bdf-h1mark{color:var(--frame46bdf-lime);}
.frame46bdf-lead{margin:0 0 14px;font-size:13.5px;color:var(--frame46bdf-mute);}
.frame46bdf-lead strong{color:var(--frame46bdf-ink);font-weight:700;}
.frame46bdf-ctarow{display:flex;gap:8px;flex-wrap:wrap;}
.frame46bdf-ctarow .frame46bdf-btn{flex:1 1 150px;}

/* quick fact chips (conclusion-first strip) */
.frame46bdf-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  margin:14px 0 4px;
}
.frame46bdf-fact{
  border:1px solid var(--frame46bdf-line);border-left:3px solid var(--frame46bdf-sand);
  border-radius:var(--frame46bdf-radius);background:var(--frame46bdf-surface);
  padding:8px 9px;min-height:62px;
  font-size:11px;line-height:1.45;color:var(--frame46bdf-mute);
}
.frame46bdf-fact b{display:block;color:var(--frame46bdf-ink);font-size:11.5px;margin-bottom:2px;}

/* ---------- carousel ---------- */
.frame46bdf-carousel{position:relative;margin:16px 0 4px;}
.frame46bdf-cvport{
  overflow:hidden;border-radius:12px;
  border:1px solid var(--frame46bdf-line);
  background:var(--frame46bdf-surface);
}
.frame46bdf-track{
  display:flex;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
  touch-action:pan-y;
}
.frame46bdf-slide{
  position:relative;flex:0 0 100%;width:100%;
  text-align:left;min-height:0;
}
.frame46bdf-slide img{width:100%;aspect-ratio:2/1;object-fit:cover;}
.frame46bdf-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.05) 32%,rgba(12,12,12,.88) 100%);
}
.frame46bdf-slidecopy{
  position:absolute;left:12px;right:12px;bottom:10px;z-index:1;
  display:flex;flex-direction:column;gap:3px;
}
.frame46bdf-slidebadge{
  align-self:flex-start;
  font-size:10px;font-weight:700;letter-spacing:.3px;
  color:#0C0C0C;background:var(--frame46bdf-lime);
  padding:3px 8px;border-radius:20px;
}
.frame46bdf-slidetitle{
  font-family:var(--frame46bdf-font-head);
  font-size:17px;font-weight:700;color:#fff;line-height:1.25;
}
.frame46bdf-slidesub{font-size:11.5px;color:var(--frame46bdf-ink);line-height:1.4;}
.frame46bdf-dots{
  position:absolute;right:12px;bottom:8px;z-index:2;
  display:flex;gap:5px;
}
.frame46bdf-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,223,186,.35);
  transition:background .2s ease,transform .2s ease;
}
.frame46bdf-dot.frame46bdf-dot--on{background:var(--frame46bdf-lime);transform:scale(1.18);}

/* ---------- category strip with sliding indicator ---------- */
.frame46bdf-catbar{
  position:sticky;top:var(--frame46bdf-head-h);z-index:60;
  margin:16px -12px 10px;padding:8px 12px 6px;
  background:rgba(12,12,12,.94);
  border-bottom:1px solid var(--frame46bdf-line);
  backdrop-filter:blur(6px);
}
.frame46bdf-catrow{
  position:relative;display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:5px;
}
.frame46bdf-catrow::-webkit-scrollbar{display:none;}
.frame46bdf-catlink{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:5px;
  min-height:36px;padding:6px 12px;
  border-radius:20px;border:1px solid var(--frame46bdf-line);
  background:var(--frame46bdf-surface);
  color:var(--frame46bdf-mute);font-size:12px;font-weight:700;
  transition:color .16s ease,border-color .16s ease;
}
.frame46bdf-catlink:hover{color:var(--frame46bdf-ink);}
.frame46bdf-catlink[aria-current="true"]{color:var(--frame46bdf-lime);border-color:rgba(127,255,0,.4);}
/* the focus indicator that slides between chips */
.frame46bdf-catglide{
  position:absolute;bottom:2px;left:0;height:3px;width:0;
  border-radius:3px;background:var(--frame46bdf-lime);
  transition:left .26s cubic-bezier(.22,.61,.36,1),width .26s cubic-bezier(.22,.61,.36,1);
}

/* ---------- sections / game grids ---------- */
.frame46bdf-sec{margin:26px 0 0;scroll-margin-top:calc(var(--frame46bdf-head-h) + 52px);}
.frame46bdf-sechead{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:0 0 6px;
  font-family:var(--frame46bdf-font-head);
  font-size:16.5px;font-weight:700;color:var(--frame46bdf-ink);line-height:1.35;
}
.frame46bdf-sechead::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:3px;
  background:var(--frame46bdf-sand);align-self:center;
}
.frame46bdf-secnote{margin:0 0 10px;font-size:12.5px;color:var(--frame46bdf-mute);}
.frame46bdf-secnote a{border-bottom:1px dashed rgba(210,180,140,.5);}

/* game card: image block + bottom name bar */
.frame46bdf-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
}
.frame46bdf-gcard{
  display:flex;flex-direction:column;
  border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius);
  background:var(--frame46bdf-surface);overflow:hidden;
  text-align:center;
  transition:border-color .15s ease,transform .12s ease;
}
.frame46bdf-gcard:hover{border-color:var(--frame46bdf-line-strong);}
.frame46bdf-gcard:active{transform:scale(.965);}
.frame46bdf-gcard:focus-visible{outline-offset:1px;}
.frame46bdf-gimg{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  background:#0a0808;
}
.frame46bdf-gname{
  display:flex;align-items:center;justify-content:center;
  min-height:34px;padding:4px 5px;
  background:linear-gradient(180deg,var(--frame46bdf-surface-2),#181111);
  border-top:1px solid rgba(255,223,186,.08);
  font-size:10.5px;font-weight:600;line-height:1.3;color:var(--frame46bdf-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
@media (min-width:400px){
  .frame46bdf-grid{gap:9px;}
  .frame46bdf-gname{font-size:11px;min-height:38px;}
}

/* ---------- comparison blocks ---------- */
.frame46bdf-cmp{display:grid;gap:7px;margin:12px 0 4px;}
.frame46bdf-cmprow{
  border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius);
  background:var(--frame46bdf-surface);
  padding:10px 11px;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;
}
.frame46bdf-cmpcat{
  grid-column:1/-1;
  font-family:var(--frame46bdf-font-head);
  color:var(--frame46bdf-ink);font-weight:700;font-size:13.5px;line-height:1.3;
  padding-bottom:4px;border-bottom:1px dashed rgba(210,180,140,.28);
}
.frame46bdf-cmpcell{font-size:11.5px;line-height:1.5;color:var(--frame46bdf-mute);}
.frame46bdf-cmpcell b{
  display:block;font-size:10px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--frame46bdf-sand);font-weight:700;margin-bottom:1px;
}

/* ---------- quotes strip ---------- */
.frame46bdf-qrow{
  display:flex;gap:8px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:12px -12px 2px;padding:2px 12px 6px;
}
.frame46bdf-qrow::-webkit-scrollbar{display:none;}
.frame46bdf-quote{
  flex:0 0 82%;max-width:300px;scroll-snap-align:start;
  border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius);
  background:var(--frame46bdf-surface);
  padding:11px 12px;
}
.frame46bdf-qtop{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.frame46bdf-qav{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  display:grid;place-content:center;
  font-family:var(--frame46bdf-font-head);font-weight:700;font-size:13px;color:#0C0C0C;
}
.frame46bdf-qav--lime{background:var(--frame46bdf-lime);}
.frame46bdf-qav--sand{background:var(--frame46bdf-sand);}
.frame46bdf-qav--tan{background:var(--frame46bdf-tan);}
.frame46bdf-qwho{font-size:12px;font-weight:700;color:var(--frame46bdf-ink);line-height:1.25;}
.frame46bdf-qtag{font-size:10px;color:var(--frame46bdf-sand);}
.frame46bdf-qtext{margin:0;font-size:12px;line-height:1.6;color:var(--frame46bdf-mute);}
@media (min-width:430px){
  .frame46bdf-quote{flex:0 0 46%;}
}

/* ---------- FAQ ---------- */
.frame46bdf-faq{display:grid;gap:7px;margin:12px 0 2px;}
.frame46bdf-faqitem{
  border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius);
  background:var(--frame46bdf-surface);overflow:hidden;
}
.frame46bdf-faqitem summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  min-height:48px;padding:10px 12px;
  font-size:13px;font-weight:700;color:var(--frame46bdf-ink);line-height:1.4;
}
.frame46bdf-faqitem summary::-webkit-details-marker{display:none;}
.frame46bdf-faqitem summary::before{
  content:"+";flex:0 0 auto;width:20px;height:20px;
  display:grid;place-content:center;
  border:1px solid var(--frame46bdf-sand);border-radius:6px;
  color:var(--frame46bdf-sand);font-weight:700;font-size:13px;line-height:1;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.frame46bdf-faqitem[open] summary::before{
  content:"−";background:var(--frame46bdf-sand);color:#0C0C0C;transform:rotate(180deg);
}
.frame46bdf-faqbody{padding:0 12px 12px 41px;font-size:12.5px;line-height:1.66;color:var(--frame46bdf-mute);}
.frame46bdf-faqbody p{margin:0 0 8px;}
.frame46bdf-faqbody p:last-child{margin-bottom:0;}

/* ---------- glossary ---------- */
.frame46bdf-terms{display:grid;gap:7px;margin:12px 0 2px;}
.frame46bdf-term{
  border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius);
  background:var(--frame46bdf-surface);
  padding:9px 11px;
}
.frame46bdf-term dt{
  font-family:var(--frame46bdf-font-head);
  color:var(--frame46bdf-lime);font-weight:700;font-size:13px;margin-bottom:2px;
}
.frame46bdf-term dd{margin:0;font-size:12.5px;line-height:1.6;color:var(--frame46bdf-mute);}

/* step list (wallet flow) */
.frame46bdf-steps{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:7px;counter-reset:frame46bdf-steps;}
.frame46bdf-steps li{
  counter-increment:frame46bdf-steps;
  position:relative;border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius);
  background:var(--frame46bdf-surface);
  padding:10px 12px 10px 40px;
  font-size:12.5px;line-height:1.6;color:var(--frame46bdf-mute);
}
.frame46bdf-steps li::before{
  content:counter(frame46bdf-steps);
  position:absolute;left:11px;top:10px;
  width:21px;height:21px;border-radius:7px;
  display:grid;place-content:center;
  background:var(--frame46bdf-surface-3);border:1px solid var(--frame46bdf-sand);
  color:var(--frame46bdf-sand);font-size:11px;font-weight:700;
}

/* prose blocks */
.frame46bdf-prose p{margin:0 0 10px;font-size:13px;line-height:1.68;color:var(--frame46bdf-mute);}
.frame46bdf-prose p:last-child{margin-bottom:0;}
.frame46bdf-prose b,.frame46bdf-prose strong{color:var(--frame46bdf-ink);font-weight:700;}

/* ---------- extended footer ---------- */
.frame46bdf-xfoot{
  margin:30px -12px 0;padding:18px 12px 16px;
  border-top:1px solid var(--frame46bdf-line);
  background:linear-gradient(180deg,#120e0e,#0d0a0a);
}
.frame46bdf-xgtitle{
  margin:0 0 8px;
  font-family:var(--frame46bdf-font-head);
  font-size:14.5px;font-weight:700;color:var(--frame46bdf-ink);
}
.frame46bdf-xgtitle::after{
  content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--frame46bdf-lime);margin-top:4px;
}
.frame46bdf-xbrand{margin-bottom:18px;}
.frame46bdf-xbrand p{margin:0;font-size:12.5px;line-height:1.66;color:var(--frame46bdf-mute);}
.frame46bdf-xdir{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:18px;
}
.frame46bdf-xdir a{
  display:flex;align-items:center;gap:6px;min-height:44px;
  padding:8px 9px;
  border:1px solid var(--frame46bdf-line);border-radius:var(--frame46bdf-radius-btn);
  background:var(--frame46bdf-surface);
  color:var(--frame46bdf-mute);font-size:11.5px;font-weight:600;line-height:1.3;
  transition:color .15s ease,border-color .15s ease;
}
.frame46bdf-xdir a::before{content:"›";color:var(--frame46bdf-sand);font-weight:700;}
.frame46bdf-xdir a:hover{color:var(--frame46bdf-ink);border-color:var(--frame46bdf-line-strong);}
.frame46bdf-xpromos{display:grid;gap:6px;margin-bottom:16px;}
.frame46bdf-xpromo{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:46px;padding:9px 11px;
  border:1px solid rgba(127,255,0,.22);border-radius:var(--frame46bdf-radius-btn);
  background:linear-gradient(90deg,rgba(127,255,0,.07),rgba(244,164,96,.05));
  color:var(--frame46bdf-ink);font-size:12.5px;font-weight:700;text-align:left;
  transition:border-color .15s ease,transform .12s ease;
}
.frame46bdf-xpromo small{
  display:block;font-size:10.5px;font-weight:600;color:var(--frame46bdf-sand);
}
.frame46bdf-xpromo::after{content:"→";color:var(--frame46bdf-lime);font-weight:700;}
.frame46bdf-xpromo:active{transform:scale(.98);}
.frame46bdf-xnote{
  border:1px dashed rgba(244,164,96,.4);border-radius:var(--frame46bdf-radius);
  padding:10px 12px;font-size:11.5px;line-height:1.6;color:var(--frame46bdf-mute);
  background:rgba(244,164,96,.05);
}
.frame46bdf-xnote b{color:var(--frame46bdf-sand);}

/* ---------- common footer ---------- */
.frame46bdf-foot{
  padding:14px 0 6px;text-align:center;
  border-top:1px solid var(--frame46bdf-line);
  font-size:11px;color:rgba(233,236,239,.55);line-height:1.6;
}
.frame46bdf-foot b{color:var(--frame46bdf-tan);font-weight:700;}

/* ---------- bottom dock (brand-accent band) ---------- */
.frame46bdf-dock{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:95;
  background:linear-gradient(180deg,#161111,#0e0b0b);
  border-top:2px solid var(--frame46bdf-lime);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.frame46bdf-dockrow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  min-height:var(--frame46bdf-dock-h);
}
.frame46bdf-dockitem{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--frame46bdf-dock-h);
  color:var(--frame46bdf-mute);
  position:relative;
  transition:color .16s ease;
}
.frame46bdf-dockitem svg{width:23px;height:23px;}
/* two-tone role icons: cream body + sand detail, lime body when active */
.frame46bdf-dockitem svg .frame46bdf-i1{fill:#D2B48C;}
.frame46bdf-dockitem svg .frame46bdf-i2{fill:#F4A460;}
.frame46bdf-dockitem:hover svg .frame46bdf-i1{fill:#FFDFBA;}
.frame46bdf-dockitem--on svg .frame46bdf-i1{fill:#7FFF00;}
.frame46bdf-dockitem--on svg .frame46bdf-i2{fill:#D2B48C;}
.frame46bdf-docklabel{
  font-size:10px;font-weight:600;line-height:1;
  max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .18s ease,font-weight .18s ease;
}
.frame46bdf-dockitem:active{color:var(--frame46bdf-ink);}
.frame46bdf-dockitem--on{color:var(--frame46bdf-lime);}
.frame46bdf-dockitem--on .frame46bdf-docklabel{color:var(--frame46bdf-lime);font-weight:700;}
/* label reveal micro-interaction on the active role */
.frame46bdf-dockitem--on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--frame46bdf-lime);
  animation:frame46bdfdockpop .26s ease;
}
@keyframes frame46bdfdockpop{from{width:0;opacity:0;}to{width:26px;opacity:1;}}

/* ---------- wide phone tweak ---------- */
@media (min-width:375px){
  .frame46bdf-hero h1{font-size:24px;}
  .frame46bdf-fact{font-size:11.5px;}
  .frame46bdf-sechead{font-size:17.5px;}
}
@media (min-width:430px){
  .frame46bdf-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
  .frame46bdf-hero h1{font-size:25px;}
  .frame46bdf-slidesub{font-size:12px;}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}