/* ==========================================================================
   khelaghor.cfd - mobile-first stylesheet
   Prefix contract: every class  -> surfacee05ce-
                     every var   -> --surfacee05ce-
   Palette anchors: #0C0C0C bg / #E6E6FA ink / #800080 grape / #BA55D3 orchid / #4A4A4A slate
   Canvas: 320-430px phone frame, centered on wide screens.
   ========================================================================== */

:root{
  --surfacee05ce-night:#0C0C0C;
  --surfacee05ce-grape:#800080;
  --surfacee05ce-orchid:#BA55D3;
  --surfacee05ce-slate:#4A4A4A;
  --surfacee05ce-lav:#E6E6FA;
  --surfacee05ce-panel:#161018;
  --surfacee05ce-panel-2:#1D1420;
  --surfacee05ce-panel-3:#241a28;
  --surfacee05ce-line:rgba(186,85,211,.24);
  --surfacee05ce-line-soft:rgba(230,230,250,.10);
  --surfacee05ce-ink-dim:#b9b3d6;
  --surfacee05ce-ink-faint:#8d86ad;
  --surfacee05ce-gold:#e8c979;
  --surfacee05ce-danger:#e88484;
  --surfacee05ce-r-s:8px;   /* small radius */
  --surfacee05ce-r-m:13px;  /* medium radius */
  --surfacee05ce-r-l:19px;  /* large radius */
  --surfacee05ce-mast-h:118px;
  --surfacee05ce-rail-h:78px;
  --surfacee05ce-font-head:"Noto Serif Bengali","Kalpurush","Times New Roman",Georgia,serif;
  --surfacee05ce-font-body:"Noto Sans Bengali","SolaimanLipi",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --surfacee05ce-press:transform .16s ease,background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}

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

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

html,body{margin:0;padding:0;}

body{
  background:var(--surfacee05ce-night);
  color:var(--surfacee05ce-lav);
  font-family:var(--surfacee05ce-font-body);
  font-size:15px;
  line-height:1.62;
  overflow-x:hidden;
  min-height:100vh;
}

/* Phone canvas: on wide screens the page stays a centered 430px column */
.surfacee05ce-stage{
  position:relative;
  width:100%;
  max-width:430px;
  margin-inline:auto;
  min-height:100vh;
  background:
    radial-gradient(120% 42% at 50% -8%, rgba(128,0,128,.30), transparent 62%),
    radial-gradient(90% 30% at 88% 12%, rgba(186,85,211,.12), transparent 60%),
    var(--surfacee05ce-night);
}

img{max-width:100%;display:block;}

button{
  font-family:inherit;
  color:inherit;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

a{color:var(--surfacee05ce-orchid);text-decoration:none;transition:color .2s ease;}
a:hover{color:#d293e6;}

h1,h2,h3,h4{font-family:var(--surfacee05ce-font-head);margin:0;line-height:1.32;}

p{margin:0 0 10px;}

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

/* ==========================================================================
   Masthead: centered identity bar + separate action row
   ========================================================================== */

.surfacee05ce-masthead{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(430px,100%);
  z-index:64;
  padding:9px 12px 10px;
  background:linear-gradient(180deg,rgba(20,12,22,.97) 0%,rgba(12,12,12,.94) 78%,rgba(12,12,12,.86) 100%);
  border-bottom:1px solid var(--surfacee05ce-line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.surfacee05ce-mast-row{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:6px;
}

/* Hamburger trigger for the side drawer */
.surfacee05ce-burger{
  width:44px;
  height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  border-radius:var(--surfacee05ce-r-s);
  border:1px solid var(--surfacee05ce-line-soft);
  background:var(--surfacee05ce-panel);
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-burger:active{transform:scale(.93);background:var(--surfacee05ce-panel-3);}
.surfacee05ce-burger span{
  width:18px;height:2px;border-radius:2px;background:var(--surfacee05ce-lav);
}
.surfacee05ce-burger span:nth-child(2){width:13px;}

/* Identity: real logo image + site name only, centered */
.surfacee05ce-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  color:var(--surfacee05ce-lav);
}
.surfacee05ce-brand img{
  width:36px;height:36px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--surfacee05ce-line);
  box-shadow:0 0 0 3px rgba(128,0,128,.28);
  flex:0 0 auto;
}
.surfacee05ce-brand strong{
  font-family:var(--surfacee05ce-font-head);
  font-size:21px;
  font-weight:700;
  letter-spacing:.4px;
  background:linear-gradient(92deg,#f2eefc 8%,var(--surfacee05ce-orchid) 88%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
}

.surfacee05ce-mast-spacer{width:44px;}

/* Action row: Register (solid) + Login (ghost) - both are promo gateways */
.surfacee05ce-mast-actions{
  margin-top:9px;
  display:grid;
  grid-template-columns:1fr 1.45fr;
  gap:8px;
}
.surfacee05ce-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  padding:9px 14px;
  border-radius:11px;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.2px;
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-btn:active{transform:scale(.965);}
.surfacee05ce-btn-ghost{
  border:1px solid var(--surfacee05ce-line);
  background:transparent;
  color:var(--surfacee05ce-lav);
}
.surfacee05ce-btn-ghost:active{background:rgba(186,85,211,.14);}
.surfacee05ce-btn-solid{
  border:1px solid #a44ec0;
  color:#150b17;
  background:linear-gradient(96deg,var(--surfacee05ce-orchid),#a04fc0 55%,#8b2fae);
  box-shadow:0 6px 18px -6px rgba(186,85,211,.55);
}
.surfacee05ce-btn-solid:active{box-shadow:0 2px 10px -6px rgba(186,85,211,.6);}

/* ==========================================================================
   Side drawer menu
   ========================================================================== */

.surfacee05ce-drawer-wrap{
  position:fixed;
  inset:0;
  z-index:80;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s .3s;
}
.surfacee05ce-drawer-wrap.surfacee05ce-open{
  visibility:visible;
  pointer-events:auto;
  transition:none;
}
.surfacee05ce-drawer-mask{
  position:absolute;
  inset:0;
  background:rgba(5,3,6,.66);
  opacity:0;
  transition:opacity .26s ease;
}
.surfacee05ce-drawer-wrap.surfacee05ce-open .surfacee05ce-drawer-mask{opacity:1;}

.surfacee05ce-drawer{
  position:absolute;
  top:0;left:0;bottom:0;
  width:min(84%,312px);
  display:flex;
  flex-direction:column;
  background:linear-gradient(178deg,#1a1220 0%,#120b14 100%);
  border-right:1px solid var(--surfacee05ce-line);
  transform:translateX(-102%);
  transition:transform .3s cubic-bezier(.32,.72,.28,1);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.surfacee05ce-drawer-wrap.surfacee05ce-open .surfacee05ce-drawer{transform:translateX(0);}

.surfacee05ce-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 12px;
  border-bottom:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-drawer-head .surfacee05ce-brand strong{font-size:19px;}
.surfacee05ce-drawer-close{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--surfacee05ce-line-soft);
  background:var(--surfacee05ce-panel);
  color:var(--surfacee05ce-lav);
  font-size:19px;
  line-height:1;
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-drawer-close:active{transform:scale(.9);background:var(--surfacee05ce-panel-3);}

.surfacee05ce-drawer-body{padding:10px 12px 16px;flex:1 0 auto;}

.surfacee05ce-drawer-group{margin:12px 0 4px;}
.surfacee05ce-drawer-group-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--surfacee05ce-ink-faint);
  padding:0 6px 6px;
}
.surfacee05ce-drawer-link{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:46px;
  padding:8px 10px;
  margin:2px 0;
  border-radius:var(--surfacee05ce-r-m);
  color:var(--surfacee05ce-lav);
  font-size:14.5px;
  border:1px solid transparent;
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-drawer-link:hover{background:rgba(186,85,211,.10);color:#e9d7f5;}
.surfacee05ce-drawer-link:active{transform:scale(.98);}
.surfacee05ce-drawer-link.surfacee05ce-current{
  background:rgba(186,85,211,.16);
  border-color:var(--surfacee05ce-line);
  color:#fff;
}
.surfacee05ce-drawer-ico{
  width:30px;height:30px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:rgba(128,0,128,.30);
  border:1px solid var(--surfacee05ce-line-soft);
  color:var(--surfacee05ce-orchid);
}
.surfacee05ce-drawer-ico svg{width:16px;height:16px;}

.surfacee05ce-drawer-foot{
  padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-drawer-foot .surfacee05ce-btn{width:100%;}

body.surfacee05ce-no-scroll{overflow:hidden;}

/* ==========================================================================
   Main column + intro (H1 block)
   ========================================================================== */

.surfacee05ce-main{
  padding:calc(var(--surfacee05ce-mast-h) + 14px) 13px calc(var(--surfacee05ce-rail-h) + 30px);
}

.surfacee05ce-intro{
  margin:4px 0 14px;
  padding:16px 15px 15px;
  border-radius:var(--surfacee05ce-r-l);
  background:linear-gradient(158deg,rgba(128,0,128,.20),rgba(29,20,32,.92) 58%);
  border:1px solid var(--surfacee05ce-line);
}
.surfacee05ce-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:1.1px;
  color:var(--surfacee05ce-orchid);
  text-transform:uppercase;
  margin-bottom:7px;
}
.surfacee05ce-kicker::before{
  content:"";
  width:22px;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--surfacee05ce-orchid),transparent);
}
.surfacee05ce-intro h1{
  font-size:24px;
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:9px;
}
.surfacee05ce-intro p{
  margin:0;
  font-size:14px;
  color:var(--surfacee05ce-ink-dim);
}
.surfacee05ce-intro p strong{color:var(--surfacee05ce-lav);font-weight:700;}

/* ==========================================================================
   Hero carousel
   ========================================================================== */

.surfacee05ce-hero{
  position:relative;
  margin:0 0 18px;
  border-radius:var(--surfacee05ce-r-l);
  overflow:hidden;
  border:1px solid var(--surfacee05ce-line);
  background:var(--surfacee05ce-panel);
}
.surfacee05ce-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.surfacee05ce-track::-webkit-scrollbar{display:none;}
.surfacee05ce-slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  width:100%;
  display:block;
  position:relative;
}
.surfacee05ce-slide img{
  width:100%;
  height:158px;
  object-fit:cover;
  object-position:center;
}
.surfacee05ce-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(12,12,12,.55));
  pointer-events:none;
}
.surfacee05ce-slide:active img{filter:brightness(1.14);}

.surfacee05ce-dots{
  position:absolute;
  left:0;right:0;bottom:8px;
  display:flex;
  justify-content:center;
  gap:7px;
  z-index:2;
}
.surfacee05ce-dot{
  width:22px;height:6px;
  border-radius:6px;
  background:rgba(230,230,250,.34);
  transition:background-color .25s ease,width .25s ease;
}
.surfacee05ce-dot.surfacee05ce-active{
  width:30px;
  background:var(--surfacee05ce-orchid);
}

/* ==========================================================================
   Game categories
   ========================================================================== */

.surfacee05ce-cat{
  margin:0 0 24px;
}
.surfacee05ce-cat-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  padding-bottom:7px;
  margin-bottom:4px;
  border-bottom:1px dashed var(--surfacee05ce-line);
}
.surfacee05ce-cat-head h2{
  font-size:18.5px;
  font-weight:800;
  color:#f4f0fd;
}
.surfacee05ce-cat-tag{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.6px;
  color:#150b17;
  background:linear-gradient(92deg,var(--surfacee05ce-orchid),#9a3ec0);
  padding:2px 8px;
  border-radius:20px;
  transform:translateY(-2px);
}
.surfacee05ce-cat-count{
  margin-left:auto;
  font-size:11.5px;
  font-weight:700;
  color:var(--surfacee05ce-ink-faint);
}
.surfacee05ce-cat-note{
  font-size:13px;
  color:var(--surfacee05ce-ink-dim);
  margin:7px 0 11px;
}
.surfacee05ce-cat-note a{border-bottom:1px dotted var(--surfacee05ce-orchid);}

/* Pure image tiles + short name underneath */
.surfacee05ce-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.surfacee05ce-tile{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:6px 5px 7px;
  border-radius:var(--surfacee05ce-r-m);
  background:linear-gradient(180deg,var(--surfacee05ce-panel-2),var(--surfacee05ce-panel));
  border:1px solid var(--surfacee05ce-line-soft);
  text-align:center;
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-tile:active{
  transform:scale(.94);
  border-color:var(--surfacee05ce-orchid);
  background:var(--surfacee05ce-panel-3);
}
.surfacee05ce-tile img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:9px;
}
.surfacee05ce-tile-name{
  font-size:11px;
  line-height:1.3;
  font-weight:600;
  color:var(--surfacee05ce-ink-dim);
  min-height:2.6em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:break-word;
  word-break:break-word;
}
.surfacee05ce-tile:active .surfacee05ce-tile-name{color:var(--surfacee05ce-lav);}

/* ==========================================================================
   Content modules
   ========================================================================== */

.surfacee05ce-module{
  margin:0 0 22px;
  padding:15px 14px 13px;
  border-radius:var(--surfacee05ce-r-l);
  background:var(--surfacee05ce-panel-2);
  border:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-module > h2{
  font-size:17.5px;
  font-weight:800;
  color:#f4f0fd;
  margin-bottom:9px;
}
.surfacee05ce-module p{
  font-size:13.6px;
  color:var(--surfacee05ce-ink-dim);
}
.surfacee05ce-lead-answer{
  font-size:13.8px;
  color:var(--surfacee05ce-lav);
  background:rgba(128,0,128,.16);
  border-left:3px solid var(--surfacee05ce-orchid);
  border-radius:0 var(--surfacee05ce-r-s) var(--surfacee05ce-r-s) 0;
  padding:9px 11px;
  margin:0 0 12px;
}
.surfacee05ce-module a{
  color:var(--surfacee05ce-orchid);
  border-bottom:1px solid rgba(186,85,211,.5);
}

/* Payment compare rows */
.surfacee05ce-pay-row{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  padding:10px 11px;
  margin:8px 0;
  border-radius:var(--surfacee05ce-r-m);
  background:var(--surfacee05ce-panel);
  border:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-pay-row:nth-child(even){background:rgba(22,16,24,.55);}
.surfacee05ce-pay-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.surfacee05ce-pay-name{
  font-family:var(--surfacee05ce-font-head);
  font-size:15px;
  font-weight:800;
  color:#efe9fb;
}
.surfacee05ce-pay-speed{
  font-size:11px;
  font-weight:700;
  color:#1a1013;
  background:var(--surfacee05ce-gold);
  padding:2px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.surfacee05ce-pay-facts{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:6px;
  font-size:12.3px;
  color:var(--surfacee05ce-ink-dim);
}
.surfacee05ce-pay-facts span::before{
  content:"—";
  color:var(--surfacee05ce-orchid);
  margin-right:5px;
}

/* Category highlight strips */
.surfacee05ce-hl{
  display:flex;
  gap:11px;
  padding:11px 12px;
  margin:9px 0;
  border-radius:var(--surfacee05ce-r-m);
  background:var(--surfacee05ce-panel);
  border:1px solid var(--surfacee05ce-line-soft);
  border-left:4px solid var(--surfacee05ce-orchid);
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-hl:active{background:var(--surfacee05ce-panel-3);}
.surfacee05ce-hl:nth-of-type(2){border-left-color:var(--surfacee05ce-gold);}
.surfacee05ce-hl:nth-of-type(3){border-left-color:#8fd3a8;}
.surfacee05ce-hl:nth-of-type(4){border-left-color:#e8a37c;}
.surfacee05ce-hl:nth-of-type(5){border-left-color:var(--surfacee05ce-slate);}
.surfacee05ce-hl-glyph{
  flex:0 0 auto;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:rgba(128,0,128,.24);
  color:var(--surfacee05ce-orchid);
}
.surfacee05ce-hl-glyph svg{width:19px;height:19px;}
.surfacee05ce-hl h3{font-size:14.5px;font-weight:800;color:#efe9fb;margin-bottom:2px;}
.surfacee05ce-hl p{margin:0;font-size:12.6px;color:var(--surfacee05ce-ink-dim);}

/* CTA band + grouped pill buttons */
.surfacee05ce-cta-band{
  margin:0 0 22px;
  padding:17px 15px;
  border-radius:var(--surfacee05ce-r-l);
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% -20%,rgba(186,85,211,.36),transparent 66%),
    linear-gradient(170deg,#241428,#150e18);
  border:1px solid var(--surfacee05ce-line);
}
.surfacee05ce-cta-band h2{
  font-size:18px;
  font-weight:800;
  color:#f6f1fe;
  margin-bottom:8px;
}
.surfacee05ce-cta-band p{
  font-size:13.4px;
  color:var(--surfacee05ce-ink-dim);
  margin:0 0 13px;
}
.surfacee05ce-cta-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
}
.surfacee05ce-cta-row .surfacee05ce-btn{
  flex:1 1 118px;
  max-width:172px;
  padding:10px 12px;
  font-size:13.8px;
  border-radius:14px;
}
.surfacee05ce-cta-check{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px 14px;
  font-size:11.8px;
  color:var(--surfacee05ce-ink-faint);
}
.surfacee05ce-cta-check span::before{
  content:"✓";
  color:#8fd3a8;
  margin-right:5px;
  font-weight:800;
}

/* Winners timeline */
.surfacee05ce-win-list{margin:4px 0 2px;list-style:none;padding:0;}
.surfacee05ce-win-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 4px 9px 24px;
}
.surfacee05ce-win-item + .surfacee05ce-win-item{border-top:1px solid var(--surfacee05ce-line-soft);}
.surfacee05ce-win-item::before{
  content:"";
  position:absolute;
  left:5px;top:50%;
  transform:translateY(-50%);
  width:9px;height:9px;
  border-radius:50%;
  background:var(--surfacee05ce-orchid);
  box-shadow:0 0 0 3px rgba(186,85,211,.22);
}
.surfacee05ce-win-item:nth-child(odd)::before{background:var(--surfacee05ce-gold);box-shadow:0 0 0 3px rgba(232,201,121,.20);}
.surfacee05ce-win-game{
  flex:1 1 auto;
  min-width:0;
}
.surfacee05ce-win-game strong{
  display:block;
  font-size:13.6px;
  color:#efe9fb;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.surfacee05ce-win-game small{
  font-size:11.4px;
  color:var(--surfacee05ce-ink-faint);
}
.surfacee05ce-win-amount{
  flex:0 0 auto;
  font-family:var(--surfacee05ce-font-head);
  font-size:14.6px;
  font-weight:800;
  color:var(--surfacee05ce-gold);
  white-space:nowrap;
}

/* Numbered tricks */
.surfacee05ce-trick{
  counter-increment:surfacee05ce-trick;
  display:flex;
  gap:12px;
  padding:11px 2px;
}
.surfacee05ce-trick + .surfacee05ce-trick{border-top:1px solid var(--surfacee05ce-line-soft);}
.surfacee05ce-trick::before{
  content:counter(surfacee05ce-trick);
  flex:0 0 30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-family:var(--surfacee05ce-font-head);
  font-weight:800;
  font-size:14px;
  color:#150b17;
  background:linear-gradient(150deg,var(--surfacee05ce-orchid),#8b2fae);
}
.surfacee05ce-trick h3{
  font-size:14px;
  font-weight:800;
  color:#efe9fb;
  margin-bottom:3px;
}
.surfacee05ce-trick p{margin:0;font-size:12.8px;color:var(--surfacee05ce-ink-dim);}
.surfacee05ce-tricks{counter-reset:surfacee05ce-trick;list-style:none;margin:0;padding:0;}

/* Entity relationship map */
.surfacee05ce-rel{
  margin:9px 0;
  padding:11px 12px;
  border-radius:var(--surfacee05ce-r-m);
  background:var(--surfacee05ce-panel);
  border:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-rel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
}
.surfacee05ce-rel-node{
  font-size:13.4px;
  font-weight:800;
  color:#efe9fb;
}
.surfacee05ce-rel-verb{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.8px;
  color:var(--surfacee05ce-orchid);
  border:1px solid var(--surfacee05ce-line);
  border-radius:20px;
  padding:2px 9px;
  white-space:nowrap;
}
.surfacee05ce-rel p{margin:0;font-size:12.6px;color:var(--surfacee05ce-ink-dim);}

/* ==========================================================================
   Extended footer: page directory -> brand -> promotions -> disclaimer
   ========================================================================== */

.surfacee05ce-xfoot{
  margin:26px 0 0;
  padding:16px 14px 14px;
  border-radius:var(--surfacee05ce-r-l);
  background:linear-gradient(178deg,rgba(29,20,32,.9),rgba(18,11,20,.96));
  border:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-xfoot-title{
  font-family:var(--surfacee05ce-font-head);
  font-size:15.5px;
  font-weight:800;
  color:#efe9fb;
  margin:0 0 10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.surfacee05ce-xfoot-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--surfacee05ce-line),transparent);
}
.surfacee05ce-directory{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px;
  margin-bottom:16px;
}
.surfacee05ce-dir-link{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 10px;
  border-radius:var(--surfacee05ce-r-m);
  background:var(--surfacee05ce-panel);
  border:1px solid var(--surfacee05ce-line-soft);
  color:var(--surfacee05ce-lav);
  font-size:12.8px;
  font-weight:600;
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-dir-link:active{
  transform:scale(.97);
  border-color:var(--surfacee05ce-orchid);
  background:var(--surfacee05ce-panel-3);
}
.surfacee05ce-dir-link svg{
  width:15px;height:15px;
  flex:0 0 auto;
  color:var(--surfacee05ce-orchid);
}
.surfacee05ce-dir-link span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.surfacee05ce-brandbox{
  margin-bottom:14px;
  padding-bottom:13px;
  border-bottom:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-brandbox p{
  margin:0;
  font-size:12.8px;
  color:var(--surfacee05ce-ink-dim);
}

.surfacee05ce-promos{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-bottom:14px;
}
.surfacee05ce-promo{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  padding:10px 11px;
  border-radius:var(--surfacee05ce-r-m);
  border:1px solid rgba(232,201,121,.38);
  background:linear-gradient(150deg,rgba(128,0,128,.26),rgba(24,14,26,.9));
  color:var(--surfacee05ce-lav);
  font-size:13px;
  font-weight:700;
  text-align:left;
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-promo:active{transform:scale(.96);border-color:var(--surfacee05ce-gold);}
.surfacee05ce-promo svg{width:17px;height:17px;flex:0 0 auto;color:var(--surfacee05ce-gold);}
.surfacee05ce-promo small{
  display:block;
  font-size:10.6px;
  font-weight:600;
  color:var(--surfacee05ce-ink-faint);
}

.surfacee05ce-disclaimer{
  font-size:11.6px;
  line-height:1.6;
  color:var(--surfacee05ce-ink-faint);
  padding:10px 11px;
  border-radius:var(--surfacee05ce-r-s);
  background:rgba(74,74,74,.18);
  border:1px solid var(--surfacee05ce-line-soft);
}

/* Slim copyright strip (common footer) */
.surfacee05ce-copy{
  margin:16px 0 0;
  padding:13px 4px 4px;
  border-top:1px solid var(--surfacee05ce-line-soft);
  text-align:center;
  font-size:12px;
  color:var(--surfacee05ce-ink-faint);
}

/* ==========================================================================
   Bottom rail: full-width nav track, 5 roles, contrast-inverted active tab
   ========================================================================== */

.surfacee05ce-rail{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(430px,100%);
  z-index:64;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:stretch;
  min-height:calc(var(--surfacee05ce-rail-h) - 8px);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(12,12,12,.98),rgba(20,12,22,.95) 70%);
  border-top:1px solid var(--surfacee05ce-line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
/* sliding indicator above the track */
.surfacee05ce-rail-glider{
  position:absolute;
  top:0;left:0;
  width:56px;
  height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--surfacee05ce-orchid),#9a3ec0);
  transition:transform .3s cubic-bezier(.35,.75,.3,1),width .3s ease;
}
.surfacee05ce-rail-tab{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:52px;
  min-width:44px;
  padding:4px 2px 2px;
  border-radius:var(--surfacee05ce-r-m);
  color:var(--surfacee05ce-ink-dim);
  transition:var(--surfacee05ce-press);
}
.surfacee05ce-rail-tab svg{width:21px;height:21px;}
.surfacee05ce-rail-tab span{
  font-size:10.4px;
  font-weight:700;
  letter-spacing:.2px;
}
.surfacee05ce-rail-tab:active{transform:translateY(-1px) scale(.94);color:var(--surfacee05ce-lav);}
/* active state = contrast inversion */
.surfacee05ce-rail-tab.surfacee05ce-active{
  background:var(--surfacee05ce-lav);
  color:#17101b;
  box-shadow:0 5px 14px -6px rgba(230,230,250,.5);
}
.surfacee05ce-rail-tab.surfacee05ce-active svg{color:#6d1d8a;}

/* ==========================================================================
   Wide-screen behaviour: keep the phone canvas, calm the frame
   ========================================================================== */

@media (min-width:431px){
  .surfacee05ce-stage{
    border-inline:1px solid rgba(186,85,211,.18);
    box-shadow:0 0 60px rgba(128,0,128,.22);
  }
}

/* 375-430px: games go to 5 columns */
@media (min-width:395px){
  .surfacee05ce-grid{grid-template-columns:repeat(5,1fr);gap:9px;}
  .surfacee05ce-slide img{height:172px;}
  .surfacee05ce-intro h1{font-size:25px;}
}

@media (max-width:339px){
  .surfacee05ce-grid{grid-template-columns:repeat(3,1fr);}
  .surfacee05ce-cta-row .surfacee05ce-btn{flex-basis:100%;max-width:none;}
}

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

/* ==========================================================================
   Utilities
   ========================================================================== */

.surfacee05ce-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Help pages use different reading shapes while sharing the site shell. */
.surfacee05ce-help-intro{
  margin-bottom:16px;
  padding:18px 16px;
  border-radius:var(--surfacee05ce-r-l);
  background:linear-gradient(142deg,rgba(186,85,211,.24),rgba(22,16,24,.94) 62%);
  border:1px solid var(--surfacee05ce-line);
}
.surfacee05ce-help-intro h1{font-size:24px;color:#f7f1ff;margin-bottom:9px;}
.surfacee05ce-help-intro p{font-size:14px;color:var(--surfacee05ce-ink-dim);margin:0;}
.surfacee05ce-help-intro p + p{margin-top:9px;}
.surfacee05ce-qa-stack{display:grid;gap:10px;margin:0 0 22px;}
.surfacee05ce-qa-card{
  padding:13px 13px 11px;
  border-left:3px solid var(--surfacee05ce-orchid);
  border-radius:0 var(--surfacee05ce-r-m) var(--surfacee05ce-r-m) 0;
  background:var(--surfacee05ce-panel-2);
  border-top:1px solid var(--surfacee05ce-line-soft);
  border-right:1px solid var(--surfacee05ce-line-soft);
  border-bottom:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-qa-card h3{font-size:15px;color:#f2ebfc;margin-bottom:5px;}
.surfacee05ce-qa-card p{font-size:13px;color:var(--surfacee05ce-ink-dim);margin:0;}
.surfacee05ce-qa-card strong{color:var(--surfacee05ce-lav);}
.surfacee05ce-step-list{list-style:none;margin:0 0 22px;padding:0;counter-reset:surfacee05ce-step;}
.surfacee05ce-step-list li{
  counter-increment:surfacee05ce-step;
  position:relative;
  min-height:56px;
  padding:10px 10px 10px 48px;
  margin:7px 0;
  border-radius:var(--surfacee05ce-r-m);
  background:linear-gradient(90deg,rgba(128,0,128,.24),var(--surfacee05ce-panel));
  border:1px solid var(--surfacee05ce-line-soft);
  color:var(--surfacee05ce-ink-dim);
  font-size:13px;
}
.surfacee05ce-step-list li::before{
  content:counter(surfacee05ce-step);
  position:absolute;left:11px;top:10px;
  width:27px;height:27px;display:grid;place-items:center;
  border-radius:50%;background:var(--surfacee05ce-orchid);color:#160b18;
  font-family:var(--surfacee05ce-font-head);font-weight:800;
}
.surfacee05ce-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 5px;}
.surfacee05ce-check-card{
  min-height:86px;padding:10px;border-radius:var(--surfacee05ce-r-m);
  background:var(--surfacee05ce-panel);border:1px solid var(--surfacee05ce-line-soft);
}
.surfacee05ce-check-card h3{font-size:13.5px;color:#efe9fb;margin-bottom:4px;}
.surfacee05ce-check-card p{font-size:12px;color:var(--surfacee05ce-ink-dim);margin:0;}
.surfacee05ce-branch{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0 2px;}
.surfacee05ce-branch article{padding:11px 12px;border-radius:var(--surfacee05ce-r-m);background:var(--surfacee05ce-panel);border:1px solid var(--surfacee05ce-line-soft);}
.surfacee05ce-branch article h3{font-size:14px;color:var(--surfacee05ce-gold);margin-bottom:4px;}
.surfacee05ce-branch article p{font-size:12.7px;color:var(--surfacee05ce-ink-dim);margin:0;}
.surfacee05ce-term-row{display:grid;grid-template-columns:86px 1fr;gap:9px;padding:9px 0;border-bottom:1px solid var(--surfacee05ce-line-soft);}
.surfacee05ce-term-row:last-child{border-bottom:0;}
.surfacee05ce-term-row dt{font-weight:800;font-size:13px;color:var(--surfacee05ce-orchid);}
.surfacee05ce-term-row dd{margin:0;font-size:12.8px;color:var(--surfacee05ce-ink-dim);}
.surfacee05ce-mini-note{padding:10px 11px;border-radius:var(--surfacee05ce-r-s);background:rgba(232,132,132,.10);border:1px solid rgba(232,132,132,.28);color:#e8c8c8;font-size:12.5px;}
.surfacee05ce-promo-stack{display:grid;gap:8px;margin-top:10px;}
.surfacee05ce-promo-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-radius:var(--surfacee05ce-r-m);background:var(--surfacee05ce-panel);border:1px solid var(--surfacee05ce-line-soft);}
.surfacee05ce-promo-line span{font-size:13px;color:var(--surfacee05ce-ink-dim);}
.surfacee05ce-promo-line button{min-height:40px;padding:7px 11px;border-radius:10px;background:var(--surfacee05ce-orchid);color:#180c1c;font-weight:800;font-size:12px;}
@media (max-width:350px){.surfacee05ce-check-grid{grid-template-columns:1fr;}.surfacee05ce-term-row{grid-template-columns:76px 1fr;}}