/* ==========================================================================
   9a999.homes — mobile-first stylesheet (phone canvas 320–430px)
   Class prefix: ui2dbe2-  |  CSS custom properties share the same prefix
   Palette: #2E4057 base / #F5DEB3 wheat text / #FFB6C1 rose accent
            #F4A460 sand accent / #DEB887 wood secondary
   Direction: poster-style headings, narrow body copy, light-rounded compact
   cards, square-icon game catalog, fact-summary-first rhythm, motion only on
   key CTAs, icon+text compact buttons.
   ========================================================================== */

:root{
  --ui2dbe2-ink:#2E4057;
  --ui2dbe2-ink-2:#26374E;
  --ui2dbe2-ink-3:#1E2B3D;
  --ui2dbe2-ink-4:#16202F;
  --ui2dbe2-wheat:#F5DEB3;
  --ui2dbe2-rose:#FFB6C1;
  --ui2dbe2-sand:#F4A460;
  --ui2dbe2-wood:#DEB887;
  --ui2dbe2-line:rgba(245,222,179,.16);
  --ui2dbe2-line-strong:rgba(245,222,179,.30);
  --ui2dbe2-radius:10px;
  --ui2dbe2-radius-sm:8px;
  --ui2dbe2-topbar:56px;
  --ui2dbe2-bnav:62px;
  --ui2dbe2-font:"Hind Siliguri","Noto Sans Bengali","SolaimanLipi","Kalpurush","Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  font-family:var(--ui2dbe2-font);
  background:var(--ui2dbe2-ink-4);
  color:var(--ui2dbe2-wheat);
  font-size:15px;
  line-height:1.65;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:var(--ui2dbe2-rose);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}

:focus-visible{outline:2px solid var(--ui2dbe2-rose);outline-offset:2px;border-radius:4px}

::selection{background:var(--ui2dbe2-sand);color:var(--ui2dbe2-ink-4)}

/* --------------------------------------------------------------------------
   Phone canvas: page keeps a centered 430px column on wide screens
   -------------------------------------------------------------------------- */
.ui2dbe2-page{
  position:relative;
  max-width:430px;
  margin-inline:auto;
  min-height:100vh;
  background:var(--ui2dbe2-ink);
  box-shadow:0 0 42px rgba(0,0,0,.45);
}

.ui2dbe2-skip{
  position:absolute;left:8px;top:-48px;z-index:120;
  background:var(--ui2dbe2-sand);color:var(--ui2dbe2-ink-4);
  font-weight:700;font-size:13px;padding:8px 14px;border-radius:0 0 8px 8px;
  transition:top .2s ease;
}
.ui2dbe2-skip:focus{top:0}

/* --------------------------------------------------------------------------
   Topbar — logo-led action bar
   -------------------------------------------------------------------------- */
.ui2dbe2-topbar{
  position:fixed;top:0;left:0;right:0;margin-inline:auto;max-width:430px;
  height:var(--ui2dbe2-topbar);z-index:90;
  display:flex;align-items:center;gap:8px;
  padding:0 10px 0 12px;
  background:linear-gradient(180deg,#243450 0%,var(--ui2dbe2-ink-3) 100%);
  border-bottom:1px solid var(--ui2dbe2-line);
}

.ui2dbe2-brand{
  display:flex;align-items:center;gap:8px;min-width:0;
  text-decoration:none;
}
.ui2dbe2-brand:hover{text-decoration:none}
.ui2dbe2-logo{
  width:36px;height:36px;border-radius:9px;
  border:1px solid var(--ui2dbe2-line-strong);
  object-fit:cover;flex:0 0 auto;
  background:var(--ui2dbe2-ink-2);
}
.ui2dbe2-brandname{
  font-size:21px;font-weight:800;letter-spacing:.4px;
  color:var(--ui2dbe2-wheat);line-height:1;white-space:nowrap;
}
.ui2dbe2-brandname::after{
  content:"";display:block;height:3px;width:74%;margin-top:3px;
  border-radius:2px;background:linear-gradient(90deg,var(--ui2dbe2-sand),var(--ui2dbe2-rose));
}

.ui2dbe2-actions{margin-left:auto;display:flex;align-items:center;gap:6px}

.ui2dbe2-btn{
  min-height:38px;padding:7px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;line-height:1.2;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:transform .12s ease,filter .12s ease;
}
.ui2dbe2-btn--reg{
  background:linear-gradient(135deg,var(--ui2dbe2-sand),#E08A3C);
  color:#241708;box-shadow:0 3px 10px rgba(244,164,96,.30);
}
.ui2dbe2-btn--reg:active{transform:scale(.94);filter:brightness(1.08)}
.ui2dbe2-btn--log{
  background:transparent;color:var(--ui2dbe2-wheat);
  border-color:var(--ui2dbe2-line-strong);
}
.ui2dbe2-btn--log:active{transform:scale(.94)}

/* hamburger */
.ui2dbe2-mbtn{
  width:44px;height:44px;flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);border-radius:10px;
}
.ui2dbe2-mbtn span{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--ui2dbe2-wheat);
  transition:transform .25s ease,opacity .2s ease;
}
.ui2dbe2-mbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ui2dbe2-mbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.ui2dbe2-mbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   Full-height menu layer (slides from the right inside the canvas)
   -------------------------------------------------------------------------- */
.ui2dbe2-menu{
  position:fixed;top:0;bottom:0;left:0;right:0;margin-inline:auto;max-width:430px;
  z-index:100;visibility:hidden;pointer-events:none;
}
.ui2dbe2-menu[data-open="true"]{visibility:visible;pointer-events:auto}
.ui2dbe2-menu__veil{
  position:absolute;inset:0;background:rgba(10,16,26,.62);
  opacity:0;transition:opacity .25s ease;
}
.ui2dbe2-menu[data-open="true"] .ui2dbe2-menu__veil{opacity:1}
.ui2dbe2-menu__panel{
  position:absolute;top:0;right:0;bottom:0;width:82%;max-width:330px;
  background:var(--ui2dbe2-ink-3);border-left:1px solid var(--ui2dbe2-line);
  transform:translateX(102%);transition:transform .3s cubic-bezier(.32,.72,.28,1);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:0 16px calc(18px + env(safe-area-inset-bottom));
}
.ui2dbe2-menu[data-open="true"] .ui2dbe2-menu__panel{transform:translateX(0)}

.ui2dbe2-menu__head{
  display:flex;align-items:center;gap:8px;
  padding:14px 0 12px;border-bottom:1px solid var(--ui2dbe2-line);
}
.ui2dbe2-menu__head img{width:30px;height:30px;border-radius:8px;object-fit:cover}
.ui2dbe2-menu__head b{font-size:17px;color:var(--ui2dbe2-wheat)}
.ui2dbe2-menu__close{
  margin-left:auto;width:44px;height:44px;border-radius:10px;
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);
  color:var(--ui2dbe2-wheat);font-size:16px;line-height:1;
}

.ui2dbe2-menu__group{padding:14px 0 4px}
.ui2dbe2-menu__label{
  font-size:11px;font-weight:700;letter-spacing:1.6px;
  color:var(--ui2dbe2-wood);text-transform:uppercase;margin:0 0 6px;
}
.ui2dbe2-menu__list{list-style:none}
.ui2dbe2-menu__list li + li{margin-top:2px}
.ui2dbe2-menu__list a{
  display:flex;align-items:center;gap:8px;min-height:44px;
  padding:8px 10px;border-radius:var(--ui2dbe2-radius-sm);
  color:var(--ui2dbe2-wheat);font-size:14px;font-weight:600;
  text-decoration:none;overflow-wrap:anywhere;
}
.ui2dbe2-menu__list a::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--ui2dbe2-sand);
}
.ui2dbe2-menu__list a:hover,.ui2dbe2-menu__list a:active{
  background:var(--ui2dbe2-ink-2);text-decoration:none;
}
.ui2dbe2-menu__list a[aria-current="page"]{
  background:var(--ui2dbe2-ink-2);color:var(--ui2dbe2-rose);
}
.ui2dbe2-menu__list a[aria-current="page"]::before{background:var(--ui2dbe2-rose)}
.ui2dbe2-menu__list a::after{
  content:"›";margin-left:auto;color:var(--ui2dbe2-wood);font-size:16px;
}
.ui2dbe2-menu__cta{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--ui2dbe2-line);
  display:grid;gap:8px;
}
.ui2dbe2-menu__cta .ui2dbe2-btn{width:100%;min-height:44px;font-size:14px}

body.ui2dbe2-lock{overflow:hidden}

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */
.ui2dbe2-main{
  padding:calc(var(--ui2dbe2-topbar) + 12px) 14px
           calc(var(--ui2dbe2-bnav) + 26px + env(safe-area-inset-bottom));
}

.ui2dbe2-section{margin-top:26px}
.ui2dbe2-section > h2{
  font-size:18px;font-weight:800;line-height:1.3;color:var(--ui2dbe2-wheat);
  overflow-wrap:anywhere;
}
.ui2dbe2-h2row{
  display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;
  padding-left:10px;position:relative;
}
.ui2dbe2-h2row::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;
  border-radius:2px;background:linear-gradient(180deg,var(--ui2dbe2-sand),var(--ui2dbe2-rose));
}
.ui2dbe2-count{
  margin-left:auto;flex:0 0 auto;
  font-size:10.5px;font-weight:700;color:var(--ui2dbe2-wood);
  border:1px solid var(--ui2dbe2-line-strong);border-radius:999px;
  padding:2px 8px;margin-top:3px;white-space:nowrap;
}
.ui2dbe2-lead{
  font-size:13px;color:var(--ui2dbe2-wood);line-height:1.6;
  margin:0 0 12px;overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   Hero — poster heading with fact strip
   -------------------------------------------------------------------------- */
.ui2dbe2-hero{padding-top:2px}
.ui2dbe2-h1{
  font-size:clamp(25px,7.6vw,32px);font-weight:800;line-height:1.22;
  letter-spacing:.2px;overflow-wrap:anywhere;
}
.ui2dbe2-h1 .ui2dbe2-h1sub{color:var(--ui2dbe2-rose)}
.ui2dbe2-hero__lead{
  margin-top:10px;font-size:13.5px;color:var(--ui2dbe2-wood);
  line-height:1.7;overflow-wrap:anywhere;
}
.ui2dbe2-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ui2dbe2-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;color:var(--ui2dbe2-wheat);
  border:1px solid var(--ui2dbe2-line-strong);border-radius:999px;
  padding:4px 11px;background:var(--ui2dbe2-ink-2);
}
.ui2dbe2-chip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ui2dbe2-sand);
}

/* --------------------------------------------------------------------------
   Carousel — 3 local promo banners, tap = affiliate jump
   -------------------------------------------------------------------------- */
.ui2dbe2-caro{margin-top:16px}
.ui2dbe2-caro__viewport{
  border-radius:12px;overflow:hidden;position:relative;
  border:1px solid var(--ui2dbe2-line);
  box-shadow:0 8px 22px rgba(10,16,26,.45);
}
.ui2dbe2-caro__track{
  display:flex;transition:transform .45s cubic-bezier(.32,.72,.28,1);
  touch-action:pan-y;
}
.ui2dbe2-caro__slide{
  flex:0 0 100%;width:100%;padding:0;border:0;background:var(--ui2dbe2-ink-2);
  position:relative;text-align:left;
}
.ui2dbe2-caro__slide img{
  width:100%;aspect-ratio:640/268;object-fit:cover;
}
.ui2dbe2-caro__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 12px 9px;
  background:linear-gradient(180deg,rgba(22,32,47,0) 0%,rgba(22,32,47,.92) 78%);
  color:var(--ui2dbe2-wheat);font-size:12.5px;font-weight:700;line-height:1.35;
}
.ui2dbe2-caro__cap::after{
  content:"›";position:absolute;right:12px;bottom:8px;
  color:var(--ui2dbe2-rose);font-size:16px;font-weight:800;
}
.ui2dbe2-caro__dots{
  display:flex;justify-content:center;gap:7px;margin-top:9px;
}
.ui2dbe2-caro__dot{
  width:26px;height:6px;border-radius:999px;border:0;
  background:var(--ui2dbe2-line-strong);
  transition:background .25s ease,width .25s ease;
}
.ui2dbe2-caro__dot[aria-selected="true"]{
  background:var(--ui2dbe2-sand);width:38px;
}

/* category quick jump strip */
.ui2dbe2-jumps{
  display:flex;gap:8px;overflow-x:auto;margin-top:14px;
  padding-bottom:4px;scrollbar-width:none;
}
.ui2dbe2-jumps::-webkit-scrollbar{display:none}
.ui2dbe2-jumps a{
  flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:var(--ui2dbe2-wheat);background:var(--ui2dbe2-ink-2);
  border:1px solid var(--ui2dbe2-line);text-decoration:none;
}
.ui2dbe2-jumps a:hover{text-decoration:none;border-color:var(--ui2dbe2-sand)}

/* --------------------------------------------------------------------------
   Game catalog — compact square-icon grid (4 cols at 320px, 4–5 up to 430px)
   -------------------------------------------------------------------------- */
.ui2dbe2-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 8px;
}
.ui2dbe2-g{
  display:flex;flex-direction:column;align-items:center;
  padding:6px 5px 7px;border-radius:var(--ui2dbe2-radius);
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);
  transition:border-color .15s ease;
}
.ui2dbe2-g:hover,.ui2dbe2-g:active{border-color:var(--ui2dbe2-sand)}
.ui2dbe2-g img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;
  background:var(--ui2dbe2-ink-3);
}
.ui2dbe2-g span{
  margin-top:5px;font-size:10.8px;font-weight:600;line-height:1.3;
  color:var(--ui2dbe2-wheat);text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;min-height:2.6em;
}

/* --------------------------------------------------------------------------
   Fact-summary strip + feature grid (scannable / comparable)
   -------------------------------------------------------------------------- */
.ui2dbe2-fact{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);
  border-left:4px solid var(--ui2dbe2-sand);
  border-radius:var(--ui2dbe2-radius);padding:11px 12px;margin-bottom:14px;
}
.ui2dbe2-fact b{font-size:12px;color:var(--ui2dbe2-rose);display:block;line-height:1.4}
.ui2dbe2-fact p{font-size:12.5px;color:var(--ui2dbe2-wheat);line-height:1.6;overflow-wrap:anywhere}

.ui2dbe2-feats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ui2dbe2-feat{
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);
  border-radius:var(--ui2dbe2-radius);padding:11px 10px;
}
.ui2dbe2-feat h3{
  font-size:13px;font-weight:800;color:var(--ui2dbe2-wheat);line-height:1.35;
  display:flex;gap:6px;align-items:baseline;overflow-wrap:anywhere;
}
.ui2dbe2-feat h3 i{
  font-style:normal;flex:0 0 auto;width:8px;height:8px;border-radius:3px;
  background:var(--ui2dbe2-rose);transform:translateY(-1px);
}
.ui2dbe2-feat p{
  margin-top:5px;font-size:11.8px;color:var(--ui2dbe2-wood);line-height:1.58;
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   Steps — numbered, narrow body copy
   -------------------------------------------------------------------------- */
.ui2dbe2-steps{list-style:none;counter-reset:ui2dbe2-step}
.ui2dbe2-steps li{
  counter-increment:ui2dbe2-step;
  display:flex;gap:11px;padding:11px 0;
  border-bottom:1px dashed var(--ui2dbe2-line);
}
.ui2dbe2-steps li:last-child{border-bottom:0}
.ui2dbe2-steps li::before{
  content:counter(ui2dbe2-step);
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#241708;
  background:linear-gradient(135deg,var(--ui2dbe2-sand),var(--ui2dbe2-rose));
}
.ui2dbe2-steps b{font-size:13.5px;color:var(--ui2dbe2-wheat);display:block;line-height:1.4}
.ui2dbe2-steps p{font-size:12.5px;color:var(--ui2dbe2-wood);line-height:1.6;margin-top:2px;overflow-wrap:anywhere}

/* --------------------------------------------------------------------------
   Promotion rows — offer summary with compact action
   -------------------------------------------------------------------------- */
.ui2dbe2-offers{display:grid;gap:9px}
.ui2dbe2-offer{
  display:flex;align-items:center;gap:10px;
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);
  border-radius:var(--ui2dbe2-radius);padding:11px 11px;
}
.ui2dbe2-offer__ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,164,96,.14);border:1px solid rgba(244,164,96,.35);
  color:var(--ui2dbe2-sand);font-size:17px;font-weight:800;
}
.ui2dbe2-offer__tx{min-width:0;flex:1 1 auto}
.ui2dbe2-offer__tx b{font-size:13.2px;color:var(--ui2dbe2-wheat);line-height:1.4;display:block;overflow-wrap:anywhere}
.ui2dbe2-offer__tx p{font-size:11.8px;color:var(--ui2dbe2-wood);line-height:1.5;margin-top:1px;overflow-wrap:anywhere}
.ui2dbe2-offer .ui2dbe2-btn{flex:0 0 auto;min-height:36px;padding:6px 11px;font-size:12px}
.ui2dbe2-linkbtn{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;
  border-radius:999px;border:1px solid var(--ui2dbe2-sand);
  color:var(--ui2dbe2-sand);font-size:12px;font-weight:700;text-decoration:none;
}
.ui2dbe2-linkbtn:hover{text-decoration:none;background:rgba(244,164,96,.12)}

/* --------------------------------------------------------------------------
   FAQ — native details, fact-first answers
   -------------------------------------------------------------------------- */
.ui2dbe2-faq{display:grid;gap:8px}
.ui2dbe2-faq details{
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);
  border-radius:var(--ui2dbe2-radius);overflow:hidden;
}
.ui2dbe2-faq details[open]{border-color:var(--ui2dbe2-line-strong)}
.ui2dbe2-faq summary{
  list-style:none;min-height:46px;display:flex;align-items:center;gap:10px;
  padding:11px 38px 11px 12px;cursor:pointer;position:relative;
  font-size:13.2px;font-weight:700;color:var(--ui2dbe2-wheat);line-height:1.45;
}
.ui2dbe2-faq summary::-webkit-details-marker{display:none}
.ui2dbe2-faq summary::after{
  content:"+";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ui2dbe2-line-strong);color:var(--ui2dbe2-sand);
  font-size:14px;font-weight:800;transition:transform .2s ease;
}
.ui2dbe2-faq details[open] summary::after{content:"−";transform:translateY(-50%) rotate(180deg)}
.ui2dbe2-faq details > div{padding:0 12px 12px}
.ui2dbe2-faq p{font-size:12.6px;color:var(--ui2dbe2-wood);line-height:1.68;overflow-wrap:anywhere}
.ui2dbe2-faq p + p{margin-top:7px}

/* --------------------------------------------------------------------------
   Comparison — dimension rows (answer first, then basis)
   -------------------------------------------------------------------------- */
.ui2dbe2-cmp{display:grid;gap:9px}
.ui2dbe2-cmprow{
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);
  border-radius:var(--ui2dbe2-radius);padding:10px 12px;
}
.ui2dbe2-cmprow dt{
  font-size:11.5px;font-weight:800;letter-spacing:.8px;color:var(--ui2dbe2-sand);
  text-transform:uppercase;line-height:1.4;overflow-wrap:anywhere;
}
.ui2dbe2-cmprow dd{
  margin-top:4px;font-size:12.6px;color:var(--ui2dbe2-wheat);line-height:1.66;
  overflow-wrap:anywhere;
}
.ui2dbe2-cmp{margin:0}

/* --------------------------------------------------------------------------
   CTA band — the one place with strong motion feedback
   -------------------------------------------------------------------------- */
.ui2dbe2-cta{
  margin-top:28px;border-radius:14px;padding:18px 16px;
  background:linear-gradient(140deg,var(--ui2dbe2-sand) 0%,var(--ui2dbe2-rose) 100%);
  color:#241708;text-align:center;
  box-shadow:0 10px 26px rgba(244,164,96,.28);
}
.ui2dbe2-cta h2{
  font-size:19px;font-weight:800;line-height:1.3;color:#241708;
  overflow-wrap:anywhere;
}
.ui2dbe2-cta p{
  margin-top:7px;font-size:12.8px;line-height:1.6;color:#3B2410;
  overflow-wrap:anywhere;
}
.ui2dbe2-cta__btn{
  margin-top:14px;min-height:48px;padding:12px 30px;border:0;border-radius:999px;
  background:var(--ui2dbe2-ink-3);color:var(--ui2dbe2-wheat);
  font-size:15.5px;font-weight:800;letter-spacing:.3px;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 16px rgba(22,32,47,.35);
  transition:transform .12s ease,box-shadow .12s ease;
}
.ui2dbe2-cta__btn:active{transform:scale(.94);box-shadow:0 3px 8px rgba(22,32,47,.35)}
.ui2dbe2-cta__note{
  margin-top:10px;font-size:10.8px;color:#5A3A1C;line-height:1.5;
}

/* --------------------------------------------------------------------------
   Extended footer — page directory > brand > promotions > disclaimer
   -------------------------------------------------------------------------- */
.ui2dbe2-xfoot{
  margin:30px 0 0;padding:20px 14px 16px;
  background:var(--ui2dbe2-ink-3);border-top:1px solid var(--ui2dbe2-line);
}
.ui2dbe2-xtitle{
  font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ui2dbe2-wood);margin:0 0 9px;
}
.ui2dbe2-xgroup + .ui2dbe2-xgroup{margin-top:18px}
.ui2dbe2-dir{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.ui2dbe2-dir a{
  display:flex;align-items:center;min-height:40px;padding:7px 9px;
  background:var(--ui2dbe2-ink-2);border:1px solid var(--ui2dbe2-line);
  border-radius:9px;font-size:12px;font-weight:600;color:var(--ui2dbe2-wheat);
  text-decoration:none;line-height:1.35;overflow-wrap:anywhere;
}
.ui2dbe2-dir a:hover{text-decoration:none;border-color:var(--ui2dbe2-sand)}
.ui2dbe2-xbrand{
  font-size:12.4px;color:var(--ui2dbe2-wood);line-height:1.7;
  overflow-wrap:anywhere;
}
.ui2dbe2-xpromos{display:flex;flex-wrap:wrap;gap:8px}
.ui2dbe2-xpromos .ui2dbe2-btn{min-height:40px;font-size:12.5px}
.ui2dbe2-xdisc{
  margin-top:18px;padding-top:12px;border-top:1px dashed var(--ui2dbe2-line);
  font-size:10.8px;color:rgba(222,184,135,.85);line-height:1.6;
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   Common footer — 2026 copyright only
   -------------------------------------------------------------------------- */
.ui2dbe2-foot{
  text-align:center;padding:14px 14px calc(var(--ui2dbe2-bnav) + 18px + env(safe-area-inset-bottom));
  font-size:11.5px;color:rgba(222,184,135,.8);
}

/* --------------------------------------------------------------------------
   Bottom nav rail — 5 roles, icon fill change + sliding indicator
   -------------------------------------------------------------------------- */
.ui2dbe2-bnav{
  position:fixed;bottom:0;left:0;right:0;margin-inline:auto;max-width:430px;
  height:calc(var(--ui2dbe2-bnav) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  z-index:95;display:flex;
  background:var(--ui2dbe2-ink-3);border-top:1px solid var(--ui2dbe2-line);
  box-shadow:0 -6px 18px rgba(10,16,26,.4);
}
.ui2dbe2-bnav__ind{
  position:absolute;top:-1px;left:8px;width:30px;height:3px;border-radius:0 0 3px 3px;
  background:var(--ui2dbe2-rose);transition:left .28s cubic-bezier(.32,.72,.28,1),opacity .2s ease;
  opacity:0;
}
.ui2dbe2-bnav__ind[data-on="true"]{opacity:1}
.ui2dbe2-bnav__link{
  flex:1 1 20%;min-width:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 2px 5px;border:0;background:transparent;
  color:var(--ui2dbe2-wood);font-size:9.8px;font-weight:700;line-height:1.2;
  text-decoration:none;
}
.ui2dbe2-bnav__link:hover{text-decoration:none}
.ui2dbe2-bnav__link svg{width:23px;height:23px}
.ui2dbe2-bnav__link svg .ui2dbe2-if{
  fill:transparent;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:fill .2s ease;
}
.ui2dbe2-bnav__link.is-active{color:var(--ui2dbe2-rose)}
.ui2dbe2-bnav__link.is-active svg .ui2dbe2-if{fill:currentColor}
.ui2dbe2-bnav__link--hub{
  color:var(--ui2dbe2-wheat);
}
.ui2dbe2-bnav__link--hub .ui2dbe2-hubic{
  width:40px;height:40px;margin-top:-16px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--ui2dbe2-sand),var(--ui2dbe2-rose));
  box-shadow:0 5px 14px rgba(244,164,96,.42);
  border:2px solid var(--ui2dbe2-ink-3);
}
.ui2dbe2-bnav__link--hub .ui2dbe2-hubic svg{width:21px;height:21px;color:#241708}
.ui2dbe2-bnav__link--hub .ui2dbe2-hubic .ui2dbe2-if{fill:#241708;stroke:#241708}

/* --------------------------------------------------------------------------
   Width steps: 320 base → 375 → 400 (5-col game grid) → 430 canvas edge
   -------------------------------------------------------------------------- */
@media (min-width:375px){
  .ui2dbe2-h1{font-size:clamp(27px,7.4vw,33px)}
  .ui2dbe2-section > h2{font-size:19px}
  .ui2dbe2-g span{font-size:11.2px}
  .ui2dbe2-feat p{font-size:12.2px}
}

@media (min-width:400px){
  .ui2dbe2-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:11px 9px}
  .ui2dbe2-caro__cap{font-size:13px}
}

@media (min-width:430px){
  .ui2dbe2-main{padding-left:18px;padding-right:18px}
  .ui2dbe2-xfoot{padding-left:18px;padding-right:18px}
  .ui2dbe2-cta h2{font-size:21px}
  .ui2dbe2-hero__lead{font-size:14px}
}

/* --------------------------------------------------------------------------
   Motion budget: only key CTAs animate; respect reduced-motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .ui2dbe2-caro__track{transition:none}
}