/* ==========================================================================
   Ninong Game - responsive layer stylesheet
   Palette anchors: #7B68EE / #8470FF / #2E4057 / #90EE90 / #DA70D6
   Mobile-first canvas: 320px -> 430px, centered phone frame on wide screens
   ========================================================================== */

:root{
  --c5476a-bg:            #131c2c;
  --c5476a-bg-deep:       #0e1624;
  --c5476a-surface:       #2e4057;
  --c5476a-surface-soft:  #24354c;
  --c5476a-surface-lift:  #35496b;
  --c5476a-violet:        #7b68ee;
  --c5476a-violet-bright: #8470ff;
  --c5476a-mint:          #90ee90;
  --c5476a-orchid:        #da70d6;
  --c5476a-ink:           #eef1fb;
  --c5476a-ink-soft:      #b7c2dd;
  --c5476a-ink-dim:       #8b97b8;
  --c5476a-line:          rgba(132,112,255,.24);
  --c5476a-line-soft:     rgba(132,112,255,.14);
  --c5476a-shadow:        0 10px 26px rgba(6,10,20,.55);
  --c5476a-r-lg:          20px;
  --c5476a-r-md:          14px;
  --c5476a-r-sm:          9px;
  --c5476a-r-xs:          6px;
  --c5476a-head-h:        58px;
  --c5476a-dock-h:        62px;
  --c5476a-font-head:     "Trebuchet MS","Segoe UI",Tahoma,Verdana,sans-serif;
  --c5476a-font-body:     "Segoe UI","Helvetica Neue",Arial,sans-serif;
  --c5476a-font-mono:     ui-monospace,"Cascadia Mono","Consolas",monospace;
}

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

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

body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(123,104,238,.20), transparent 62%),
    radial-gradient(760px 420px at 108% 112%, rgba(218,112,214,.12), transparent 60%),
    var(--c5476a-bg-deep);
  color:var(--c5476a-ink);
  font-family:var(--c5476a-font-body);
  font-size:15px;
  line-height:1.62;
  min-height:100vh;
  overflow-x:hidden;
}

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

button{ font:inherit; color:inherit; }

a{ color:var(--c5476a-mint); text-decoration:none; }
a:hover,a:focus-visible{ text-decoration:underline; }

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

/* --------------------------------------------------------------------------
   Phone canvas shell - stays a 430px column on any wide screen
   -------------------------------------------------------------------------- */

.c5476a-shell{
  position:relative;
  width:100%;
  max-width:430px;
  margin-inline:auto;
  background:linear-gradient(180deg, var(--c5476a-bg) 0%, #16223a 46%, var(--c5476a-bg-deep) 100%);
  min-height:100vh;
  box-shadow:0 0 0 1px rgba(132,112,255,.10), 0 24px 70px rgba(0,0,0,.6);
  overflow:hidden;
}

.c5476a-main{
  padding-top:calc(var(--c5476a-head-h) + 10px);
  padding-bottom:calc(var(--c5476a-dock-h) + 34px);
}

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

/* --------------------------------------------------------------------------
   Top action band - minimal brand strip + register/login/menu actions
   -------------------------------------------------------------------------- */

.c5476a-topbar{
  position:fixed;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:60;
  background:rgba(19,28,44,.94);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--c5476a-line);
}

.c5476a-topbar-in{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:var(--c5476a-head-h);
  padding:9px 12px 9px 11px;
}

.c5476a-brand{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:auto;
  min-width:0;
}

.c5476a-brand-logo{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:11px;
  object-fit:cover;
  border:1px solid rgba(132,112,255,.5);
  box-shadow:0 3px 10px rgba(123,104,238,.4);
}

.c5476a-brand-name{
  font-family:var(--c5476a-font-head);
  font-size:17px;
  font-weight:700;
  letter-spacing:.4px;
  line-height:1.1;
  white-space:nowrap;
}

.c5476a-brand-name em{
  font-style:normal;
  color:var(--c5476a-violet-bright);
}

.c5476a-topacts{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.c5476a-topbtn{
  min-height:36px;
  padding:7px 12px;
  border-radius:var(--c5476a-r-sm);
  border:1px solid rgba(144,238,144,.4);
  background:linear-gradient(180deg, rgba(144,238,144,.16), rgba(144,238,144,.06));
  color:var(--c5476a-mint);
  font-family:var(--c5476a-font-head);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  cursor:pointer;
}

.c5476a-topbtn--reg{
  border-color:transparent;
  background:linear-gradient(180deg, var(--c5476a-violet-bright), var(--c5476a-violet));
  color:#fff;
  box-shadow:0 4px 14px rgba(123,104,238,.45);
}

.c5476a-topbtn:active{ transform:translateY(1px) scale(.97); }

.c5476a-menubtn{
  width:38px; height:38px;
  display:inline-grid;
  place-items:center;
  border-radius:var(--c5476a-r-sm);
  border:1px solid var(--c5476a-line);
  background:rgba(36,53,76,.7);
  cursor:pointer;
}

.c5476a-menubtn-ic{
  width:18px; height:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.c5476a-menubtn-ic i{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--c5476a-ink);
  transition:transform .25s ease, opacity .2s ease;
}

.c5476a-menubtn[aria-expanded="true"] .c5476a-menubtn-ic i:first-child{ transform:translateY(6px) rotate(45deg); }
.c5476a-menubtn[aria-expanded="true"] .c5476a-menubtn-ic i:nth-child(2){ opacity:0; }
.c5476a-menubtn[aria-expanded="true"] .c5476a-menubtn-ic i:last-child{ transform:translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Stacked slide-down menu overlay
   -------------------------------------------------------------------------- */

.c5476a-menu{
  position:fixed;
  top:var(--c5476a-head-h);
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:55;
  padding:8px 12px 16px;
  background:rgba(14,22,36,.97);
  border-bottom:1px solid var(--c5476a-line);
  box-shadow:var(--c5476a-shadow);
  visibility:hidden;
  opacity:0;
  transform-origin:top center;
  transition:opacity .22s ease, visibility .22s ease;
}

.c5476a-menu.c5476a-menu--open{
  visibility:visible;
  opacity:1;
}

.c5476a-menu-veil[hidden]{ display:none; }

.c5476a-menu-veil{
  position:fixed;
  inset:0;
  z-index:54;
  background:rgba(8,12,22,.62);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}

.c5476a-menu-veil.c5476a-menu--open{
  opacity:1;
  visibility:visible;
}

.c5476a-menu-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:2px;
}

.c5476a-menu-list a{
  display:block;
  padding:10px 12px;
  min-height:44px;
  border-radius:var(--c5476a-r-sm);
  color:var(--c5476a-ink-soft);
  font-family:var(--c5476a-font-head);
  font-size:14px;
  font-weight:600;
  letter-spacing:.3px;
  position:relative;
  transition:color .18s ease, background .18s ease;
}

.c5476a-menu-list a::after{
  content:"";
  position:absolute;
  left:12px; bottom:5px;
  width:0; height:2px;
  border-radius:2px;
  background:var(--c5476a-mint);
  transition:width .26s cubic-bezier(.4,0,.2,1);
}

.c5476a-menu-list a:hover,
.c5476a-menu-list a:focus-visible{
  color:#fff;
  background:rgba(123,104,238,.14);
  text-decoration:none;
}

.c5476a-menu-list a[aria-current="page"]{
  color:#fff;
  background:rgba(123,104,238,.18);
}

.c5476a-menu-list a[aria-current="page"]::after{
  width:34px;
}

.c5476a-menu-note{
  margin:10px 2px 0;
  font-family:var(--c5476a-font-mono);
  font-size:10.5px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--c5476a-ink-dim);
}

/* --------------------------------------------------------------------------
   Hero block
   -------------------------------------------------------------------------- */

.c5476a-hero{
  padding:18px 14px 6px;
}

.c5476a-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 10px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(218,112,214,.45);
  background:rgba(218,112,214,.12);
  font-family:var(--c5476a-font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#f2c6f0;
}

.c5476a-kicker::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--c5476a-orchid);
  box-shadow:0 0 8px var(--c5476a-orchid);
}

.c5476a-hero h1{
  margin:0 0 10px;
  font-family:var(--c5476a-font-head);
  font-size:clamp(23px, 6.4vw, 29px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.2px;
}

.c5476a-hero h1 span{
  background:linear-gradient(92deg, var(--c5476a-violet-bright), var(--c5476a-orchid));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.c5476a-hero-lead{
  margin:0 0 14px;
  color:var(--c5476a-ink-soft);
  font-size:14.5px;
}

.c5476a-ctarow{
  display:grid;
  gap:9px;
}

.c5476a-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border:0;
  border-radius:var(--c5476a-r-md);
  background:linear-gradient(180deg, var(--c5476a-violet-bright), var(--c5476a-violet));
  color:#fff;
  font-family:var(--c5476a-font-head);
  font-size:15px;
  font-weight:700;
  letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(123,104,238,.42);
  transition:transform .12s ease, box-shadow .2s ease;
}

.c5476a-btn:active{
  transform:translateY(1px) scale(.985);
  box-shadow:0 3px 10px rgba(123,104,238,.5);
}

.c5476a-btn--ghost{
  background:rgba(36,53,76,.85);
  border:1px solid rgba(144,238,144,.42);
  color:var(--c5476a-mint);
  box-shadow:none;
}

.c5476a-btn--mint{
  background:linear-gradient(180deg, #a8f7a8, var(--c5476a-mint));
  color:#12331d;
  box-shadow:0 6px 18px rgba(144,238,144,.28);
}

/* quick fact chips under hero CTAs */

.c5476a-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:16px 14px 4px;
}

.c5476a-fact{
  padding:9px 6px 8px;
  border-radius:var(--c5476a-r-sm);
  border:1px solid var(--c5476a-line-soft);
  background:rgba(46,64,87,.5);
  text-align:center;
}

.c5476a-fact b{
  display:block;
  font-family:var(--c5476a-font-head);
  font-size:17px;
  color:#fff;
  line-height:1.15;
}

.c5476a-fact span{
  font-family:var(--c5476a-font-mono);
  font-size:9.5px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--c5476a-ink-dim);
}

/* --------------------------------------------------------------------------
   Promo banner carousel - snap track + sliding pill indicator
   -------------------------------------------------------------------------- */

.c5476a-cv{
  position:relative;
  margin:14px 0 4px;
}

.c5476a-cv-track{
  display:flex;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.c5476a-cv-track::-webkit-scrollbar{ display:none; }

.c5476a-cv-slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  position:relative;
  padding:0;
  border:0;
  background:#0d1523;
  cursor:pointer;
  text-align:left;
}

.c5476a-cv-slide img{
  width:100%;
  aspect-ratio:430 / 192;
  object-fit:cover;
}

.c5476a-cv-cap{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:22px 14px 10px;
  background:linear-gradient(180deg, transparent, rgba(9,14,26,.92) 72%);
}

.c5476a-cv-cap b{
  font-family:var(--c5476a-font-head);
  font-size:14.5px;
  line-height:1.25;
  color:#fff;
}

.c5476a-cv-cap small{
  display:block;
  font-family:var(--c5476a-font-mono);
  font-size:9.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--c5476a-mint);
  margin-bottom:2px;
}

.c5476a-cv-tag{
  flex:0 0 auto;
  padding:6px 11px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--c5476a-violet-bright), var(--c5476a-violet));
  color:#fff;
  font-family:var(--c5476a-font-head);
  font-size:11px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.c5476a-cv-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px; height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(238,241,251,.25);
  border-radius:var(--c5476a-r-xs);
  background:rgba(14,22,36,.55);
  color:#fff;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}

.c5476a-cv-nav--prev{ left:6px; }
.c5476a-cv-nav--next{ right:6px; }

.c5476a-cv-dots{
  position:relative;
  display:flex;
  justify-content:center;
  gap:7px;
  margin:2px 0 6px;
}

.c5476a-cv-dot{
  width:8px; height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(183,194,221,.4);
  cursor:pointer;
  transition:width .28s cubic-bezier(.4,0,.2,1), background .28s ease;
}

.c5476a-cv-dot[aria-current="true"]{
  width:26px;
  background:var(--c5476a-mint);
}

/* --------------------------------------------------------------------------
   Section shell shared by game areas and content modules
   -------------------------------------------------------------------------- */

.c5476a-sec{
  padding:22px 14px 6px;
}

.c5476a-sec-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 6px;
}

.c5476a-sec-head h2{
  margin:0;
  font-family:var(--c5476a-font-head);
  font-size:clamp(17.5px, 5vw, 20px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
}

.c5476a-sec-count{
  flex:0 0 auto;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--c5476a-line);
  background:rgba(123,104,238,.12);
  font-family:var(--c5476a-font-mono);
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--c5476a-ink-soft);
}

.c5476a-sec-eyebrow{
  margin:0 0 4px;
  font-family:var(--c5476a-font-mono);
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--c5476a-violet-bright);
}

.c5476a-sec-intro{
  margin:0 0 12px;
  color:var(--c5476a-ink-soft);
  font-size:13.8px;
}

.c5476a-sec-intro a{ text-decoration:underline; text-underline-offset:3px; }

/* --------------------------------------------------------------------------
   Game grid - image tiles with a bottom name bar
   -------------------------------------------------------------------------- */

.c5476a-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}

.c5476a-gcell{
  display:flex;
  flex-direction:column;
  padding:0;
  border:1px solid var(--c5476a-line-soft);
  border-radius:var(--c5476a-r-sm);
  background:var(--c5476a-surface-soft);
  overflow:hidden;
  cursor:pointer;
  transition:transform .14s ease, border-color .18s ease;
}

.c5476a-gcell:active{
  transform:scale(.955);
  border-color:var(--c5476a-violet);
}

.c5476a-gcell-img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  background:#101a2b;
}

.c5476a-gcell-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:30px;
  padding:4px 6px 5px;
  background:linear-gradient(180deg, rgba(53,73,107,.9), rgba(36,53,76,.95));
  border-top:1px solid rgba(132,112,255,.16);
  font-family:var(--c5476a-font-head);
  font-size:10.8px;
  font-weight:700;
  line-height:1.28;
  letter-spacing:.2px;
  color:var(--c5476a-ink);
  text-align:center;
  overflow-wrap:anywhere;
}

/* per-category tint on the name bar for visual rhythm */

.c5476a-grid--hot .c5476a-gcell{ border-color:rgba(218,112,214,.3); }
.c5476a-grid--hot .c5476a-gcell-name{
  background:linear-gradient(180deg, rgba(218,112,214,.28), rgba(46,26,58,.95));
  border-top-color:rgba(218,112,214,.4);
}

.c5476a-grid--live .c5476a-gcell{ border-color:rgba(144,238,144,.24); }
.c5476a-grid--live .c5476a-gcell-name{
  background:linear-gradient(180deg, rgba(144,238,144,.16), rgba(18,42,32,.95));
  border-top-color:rgba(144,238,144,.34);
}

.c5476a-grid--fish .c5476a-gcell{ border-color:rgba(132,180,255,.24); }
.c5476a-grid--fish .c5476a-gcell-name{
  background:linear-gradient(180deg, rgba(96,150,230,.22), rgba(16,32,56,.95));
  border-top-color:rgba(120,170,255,.36);
}

.c5476a-seelinks{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:12px 0 0;
}

.c5476a-seelink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:7px 12px;
  border-radius:999px;
  border:1px dashed rgba(144,238,144,.45);
  background:rgba(144,238,144,.07);
  font-size:12.3px;
  color:var(--c5476a-mint);
  text-decoration:none;
}

.c5476a-seelink::before{ content:"\2192"; font-size:12px; }
.c5476a-seelink:hover,
.c5476a-seelink:focus-visible{ text-decoration:none; background:rgba(144,238,144,.14); }

/* --------------------------------------------------------------------------
   Milestone strip (progress feedback module)
   -------------------------------------------------------------------------- */

.c5476a-mile{
  padding:11px 12px;
  border-radius:var(--c5476a-r-md);
  border:1px solid var(--c5476a-line-soft);
  background:linear-gradient(180deg, rgba(46,64,87,.65), rgba(30,44,66,.65));
}

.c5476a-mile + .c5476a-mile{ margin-top:9px; }

.c5476a-mile-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}

.c5476a-mile-top b{
  font-family:var(--c5476a-font-head);
  font-size:13.5px;
  color:#fff;
}

.c5476a-mile-top span{
  font-family:var(--c5476a-font-mono);
  font-size:10.5px;
  color:var(--c5476a-orchid);
  white-space:nowrap;
}

.c5476a-mile-bar{
  height:7px;
  border-radius:99px;
  background:rgba(14,22,36,.9);
  overflow:hidden;
}

.c5476a-mile-fill{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg, var(--c5476a-violet-bright), var(--c5476a-orchid));
}

.c5476a-mile-txt{
  margin:7px 0 0;
  font-size:12.6px;
  color:var(--c5476a-ink-soft);
}

/* --------------------------------------------------------------------------
   Step ladder (how-to module)
   -------------------------------------------------------------------------- */

.c5476a-steps{
  list-style:none;
  margin:0; padding:0;
  counter-reset:c5476a-step;
}

.c5476a-step{
  position:relative;
  counter-increment:c5476a-step;
  padding:0 0 14px 40px;
}

.c5476a-step::before{
  content:counter(c5476a-step, decimal-leading-zero);
  position:absolute;
  left:0; top:1px;
  width:28px; height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(132,112,255,.45);
  background:rgba(123,104,238,.16);
  font-family:var(--c5476a-font-mono);
  font-size:11px;
  font-weight:700;
  color:var(--c5476a-violet-bright);
}

.c5476a-step::after{
  content:"";
  position:absolute;
  left:13.5px; top:32px; bottom:2px;
  width:1px;
  background:linear-gradient(180deg, rgba(132,112,255,.5), rgba(132,112,255,.06));
}

.c5476a-step:last-child::after{ display:none; }

.c5476a-step b{
  display:block;
  font-family:var(--c5476a-font-head);
  font-size:13.8px;
  color:#fff;
  margin-bottom:2px;
}

.c5476a-step p{
  margin:0;
  font-size:12.8px;
  color:var(--c5476a-ink-soft);
}

/* --------------------------------------------------------------------------
   Plain-words brief (what-is module): lead card + point chips
   -------------------------------------------------------------------------- */

.c5476a-brief-lead{
  margin:0 0 11px;
  padding:13px 14px;
  border-radius:var(--c5476a-r-md);
  border-left:3px solid var(--c5476a-mint);
  background:rgba(46,64,87,.55);
  font-size:13.6px;
  color:var(--c5476a-ink);
}

.c5476a-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.c5476a-point{
  padding:10px 11px;
  border-radius:var(--c5476a-r-sm);
  border:1px solid var(--c5476a-line-soft);
  background:rgba(36,53,76,.55);
}

.c5476a-point b{
  display:block;
  font-family:var(--c5476a-font-head);
  font-size:12.6px;
  color:var(--c5476a-mint);
  margin-bottom:3px;
}

.c5476a-point p{
  margin:0;
  font-size:12.2px;
  line-height:1.5;
  color:var(--c5476a-ink-soft);
}

/* --------------------------------------------------------------------------
   Play-style comparison rows
   -------------------------------------------------------------------------- */

.c5476a-style{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:10px;
  padding:11px 11px 12px;
  border-radius:var(--c5476a-r-md);
  border:1px solid var(--c5476a-line-soft);
  background:rgba(36,53,76,.45);
}

.c5476a-style + .c5476a-style{ margin-top:9px; }

.c5476a-style-ic{
  width:44px; height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(160deg, rgba(123,104,238,.35), rgba(218,112,214,.22));
  border:1px solid rgba(132,112,255,.4);
  font-size:19px;
  line-height:1;
}

.c5476a-style h3{
  margin:1px 0 4px;
  font-family:var(--c5476a-font-head);
  font-size:13.8px;
  color:#fff;
}

.c5476a-style p{
  margin:0 0 6px;
  font-size:12.5px;
  color:var(--c5476a-ink-soft);
}

.c5476a-style-fit{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(144,238,144,.12);
  border:1px solid rgba(144,238,144,.32);
  font-family:var(--c5476a-font-mono);
  font-size:10px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--c5476a-mint);
}

/* --------------------------------------------------------------------------
   Mobile access block
   -------------------------------------------------------------------------- */

.c5476a-mob{
  padding:14px;
  border-radius:var(--c5476a-r-lg);
  border:1px solid rgba(132,112,255,.3);
  background:
    radial-gradient(240px 120px at 92% 0%, rgba(218,112,214,.18), transparent 70%),
    linear-gradient(180deg, rgba(53,73,107,.72), rgba(24,36,58,.85));
}

.c5476a-mob p{ margin:0 0 10px; font-size:13.4px; color:var(--c5476a-ink-soft); }

.c5476a-checks{
  list-style:none;
  margin:0 0 13px; padding:0;
  display:grid;
  gap:7px;
}

.c5476a-checks li{
  position:relative;
  padding:6px 8px 6px 28px;
  border-radius:var(--c5476a-r-xs);
  background:rgba(14,22,36,.5);
  font-size:12.6px;
  color:var(--c5476a-ink-soft);
}

.c5476a-checks li::before{
  content:"\2713";
  position:absolute;
  left:8px; top:6px;
  width:15px; height:15px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(144,238,144,.2);
  color:var(--c5476a-mint);
  font-size:10px;
  font-weight:700;
}

/* --------------------------------------------------------------------------
   Term glossary cards
   -------------------------------------------------------------------------- */

.c5476a-terms{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.c5476a-term{
  padding:11px 12px;
  border-radius:var(--c5476a-r-md);
  border:1px solid var(--c5476a-line-soft);
  background:linear-gradient(180deg, rgba(46,64,87,.6), rgba(28,41,62,.7));
}

.c5476a-term dt{
  font-family:var(--c5476a-font-head);
  font-size:12.8px;
  font-weight:700;
  color:var(--c5476a-orchid);
  margin-bottom:4px;
}

.c5476a-term dd{
  margin:0;
  font-size:12.2px;
  line-height:1.52;
  color:var(--c5476a-ink-soft);
}

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

.c5476a-xfoot{
  margin-top:26px;
  padding:20px 14px 18px;
  border-top:1px solid var(--c5476a-line);
  background:linear-gradient(180deg, rgba(14,22,36,.6), rgba(10,16,28,.95));
}

.c5476a-xfoot-title{
  margin:0 0 10px;
  font-family:var(--c5476a-font-mono);
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--c5476a-violet-bright);
}

.c5476a-xfoot-brand{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding-bottom:16px;
  border-bottom:1px dashed var(--c5476a-line-soft);
}

.c5476a-xfoot-brand img{
  width:46px; height:46px;
  flex:0 0 46px;
  border-radius:13px;
  border:1px solid rgba(132,112,255,.45);
  object-fit:cover;
}

.c5476a-xfoot-brand p{
  margin:0;
  font-size:12.8px;
  color:var(--c5476a-ink-soft);
}

.c5476a-xfoot-block{ padding:15px 0; border-bottom:1px dashed var(--c5476a-line-soft); }

.c5476a-xfoot-promos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.c5476a-xp{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  min-height:44px;
  padding:11px 12px;
  border-radius:var(--c5476a-r-md);
  border:1px solid rgba(132,112,255,.3);
  background:linear-gradient(180deg, rgba(123,104,238,.2), rgba(123,104,238,.05));
  cursor:pointer;
  text-align:left;
}

.c5476a-xp-ic{
  display:inline-grid;
  place-items:center;
  width:30px; height:30px;
  border-radius:9px;
  background:rgba(14,22,36,.6);
  border:1px solid rgba(132,112,255,.4);
  font-size:15px;
  line-height:1;
}

.c5476a-xp b{
  font-family:var(--c5476a-font-head);
  font-size:12.6px;
  color:#fff;
  line-height:1.25;
}

.c5476a-xp span{
  font-size:11px;
  line-height:1.4;
  color:var(--c5476a-ink-dim);
}

.c5476a-xp:active{ transform:scale(.97); }

.c5476a-dir{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 10px;
}

.c5476a-dir a{
  display:block;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:6px 4px;
  border-bottom:1px solid rgba(132,112,255,.1);
  font-size:12.4px;
  color:var(--c5476a-ink-soft);
}

.c5476a-dir a:hover,
.c5476a-dir a:focus-visible{
  color:var(--c5476a-mint);
  text-decoration:none;
  border-bottom-color:rgba(144,238,144,.5);
}

.c5476a-xfoot-note{
  padding-top:15px;
}

.c5476a-xfoot-note p{
  margin:0;
  font-size:11.6px;
  line-height:1.6;
  color:var(--c5476a-ink-dim);
}

.c5476a-partners{
  margin-top:16px;
  padding-top:13px;
  border-top:1px dashed var(--c5476a-line-soft);
}

.c5476a-partners-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.c5476a-partners-row::-webkit-scrollbar{ display:none; }

.c5476a-partners-row img{
  flex:0 0 auto;
  height:30px;
  width:auto;
  border-radius:6px;
  border:1px solid rgba(183,194,221,.2);
  background:rgba(238,241,251,.94);
  padding:2px 6px;
  object-fit:contain;
}

/* --------------------------------------------------------------------------
   Common footer - copyright only
   -------------------------------------------------------------------------- */

.c5476a-foot{
  padding:16px 14px 10px;
  border-top:1px solid var(--c5476a-line-soft);
  text-align:center;
}

.c5476a-foot p{
  margin:0;
  font-size:11.4px;
  color:var(--c5476a-ink-dim);
}

.c5476a-foot small{
  display:block;
  margin-top:4px;
  font-family:var(--c5476a-font-mono);
  font-size:9.5px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:rgba(139,151,184,.7);
}

/* --------------------------------------------------------------------------
   Fixed bottom dock - 5 roles, filled icons, underline active marker
   -------------------------------------------------------------------------- */

.c5476a-dock{
  position:fixed;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:58;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  min-height:var(--c5476a-dock-h);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background:rgba(14,22,36,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--c5476a-line);
}

.c5476a-dock-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:48px;
  border:0;
  background:none;
  padding:4px 2px;
  cursor:pointer;
  color:var(--c5476a-ink-dim);
  font-family:var(--c5476a-font-head);
  font-size:9.8px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  text-decoration:none;
}

.c5476a-dock-item svg{
  width:22px; height:22px;
  opacity:.62;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.c5476a-dock-item::after{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:0; height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg, var(--c5476a-violet-bright), var(--c5476a-mint));
  transform:translateX(-50%);
  transition:width .26s cubic-bezier(.4,0,.2,1);
}

.c5476a-dock-item:hover,
.c5476a-dock-item:focus-visible{ color:var(--c5476a-ink); text-decoration:none; }

.c5476a-dock-item:active svg{ transform:scale(.9); }

.c5476a-dock-item[aria-current="page"]{
  color:var(--c5476a-mint);
}

.c5476a-dock-item[aria-current="page"] svg{
  opacity:1;
  fill:rgba(144,238,144,.16);
}

.c5476a-dock-item[aria-current="page"]::after{
  width:30px;
}

.c5476a-dock-item--promo{
  color:#e9d5ff;
}

.c5476a-dock-item--promo svg{
  opacity:.9;
  stroke:var(--c5476a-orchid);
}

/* --------------------------------------------------------------------------
   Wide-screen behaviour: keep the phone canvas centered, no desktop redesign
   -------------------------------------------------------------------------- */

@media (min-width:402px){
  .c5476a-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .c5476a-gcell-name{ font-size:10.4px; }
}

@media (max-width:359px){
  .c5476a-facts{ grid-template-columns:1fr 1fr; }
  .c5476a-points{ grid-template-columns:1fr; }
  .c5476a-terms{ grid-template-columns:1fr; }
  .c5476a-xfoot-promos{ grid-template-columns:1fr; }
  .c5476a-dir{ grid-template-columns:1fr; }
  .c5476a-topbtn{ padding:7px 9px; font-size:11.5px; }
  .c5476a-brand-name{ font-size:15.5px; }
}

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