/* ============================================================
   PT Gaming APK - shared design tokens & components
   Canvas: 320-430px mobile first, centered phone frame on wide screens
   Prefix: c8f391-  |  Palette: slate / wheat / lilac / tan / cocoa
   ============================================================ */

:root{
  /* brand palette */
  --c8f391-mist:#E9ECEF;
  --c8f391-wheat:#F5DEB3;
  --c8f391-lilac:#C9C9FF;
  --c8f391-tan:#D2B48C;
  --c8f391-slate:#273746;
  --c8f391-cocoa:#8B7355;
  /* derived surfaces */
  --c8f391-void:#1B2634;
  --c8f391-surface:#2E4152;
  --c8f391-surface-2:#243445;
  --c8f391-surface-3:#33475B;
  --c8f391-line:rgba(139,115,85,.42);
  --c8f391-line-soft:rgba(139,115,85,.24);
  --c8f391-muted:#A9B7C4;
  --c8f391-ink-deep:#1E2B37;
  /* rhythm */
  --c8f391-r-xs:3px;
  --c8f391-r-sm:5px;
  --c8f391-r-md:7px;
  --c8f391-r-lg:11px;
  --c8f391-gap:8px;
  --c8f391-pad:14px;
  --c8f391-header-h:56px;
  --c8f391-dock-h:64px;
}

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

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

body.c8f391-page{
  margin:0 auto;
  max-width:480px;
  min-height:100dvh;
  background:var(--c8f391-slate);
  color:var(--c8f391-mist);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:1.66;
  border-left:1px solid var(--c8f391-line-soft);
  border-right:1px solid var(--c8f391-line-soft);
  box-shadow:0 0 42px rgba(0,0,0,.45);
  /* keep clear of the fixed bottom dock */
  padding-bottom:calc(var(--c8f391-dock-h) + 26px + env(safe-area-inset-bottom,0px));
}

/* wider desktop keeps the same phone canvas experience */
@media (min-width:481px){
  html{background:var(--c8f391-void);}
}

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

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

h1,h2,h3{
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.28;
  color:var(--c8f391-wheat);
  margin:0 0 8px;
  text-wrap:balance;
}

p{margin:0 0 10px;}
p:last-child{margin-bottom:0;}

:focus-visible{
  outline:2px solid var(--c8f391-lilac);
  outline-offset:2px;
  border-radius:var(--c8f391-r-xs);
}

.c8f391-skip{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--c8f391-wheat);
  color:var(--c8f391-ink-deep);
  padding:8px 14px;
  font-weight:700;
  z-index:99;
}
.c8f391-skip:focus{
  left:8px;
  top:8px;
}

/* ------------------------------------------------------------
   Top bar - edge aligned functional header
   ------------------------------------------------------------ */
.c8f391-topbar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  height:var(--c8f391-header-h);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  background:linear-gradient(180deg,#223140 0%,var(--c8f391-slate) 100%);
  border-bottom:1px solid var(--c8f391-line);
  z-index:60;
  transition:box-shadow .25s ease;
}
.c8f391-topbar--scrolled{
  box-shadow:0 6px 18px rgba(10,18,26,.55);
}

.c8f391-brand{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  margin-right:auto;
  color:inherit;
}
.c8f391-brand:focus-visible{text-decoration:none;}
.c8f391-brand__img{
  width:30px;
  height:30px;
  border-radius:var(--c8f391-r-sm);
  border:1px solid var(--c8f391-tan);
  background:var(--c8f391-surface-2);
  object-fit:cover;
  flex:0 0 auto;
}
.c8f391-brand__name{
  font-size:13.5px;
  font-weight:800;
  color:var(--c8f391-wheat);
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* ultra-narrow phones keep the logo image and free the row for actions */
@media (max-width:354px){
  .c8f391-brand__name{display:none;}
  .c8f391-brand{margin-right:2px;}
}

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

.c8f391-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:0 14px;
  border-radius:var(--c8f391-r-sm);
  border:1px solid transparent;
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  transition:transform .14s ease,background-color .14s ease,border-color .14s ease;
  -webkit-tap-highlight-color:transparent;
}
.c8f391-btn:active{
  transform:translateY(-2px); /* short vertical lift */
}
.c8f391-btn--tan{
  background:linear-gradient(180deg,var(--c8f391-tan) 0%,#C29B6F 100%);
  color:var(--c8f391-ink-deep);
  box-shadow:0 3px 0 rgba(139,115,85,.55);
}
.c8f391-btn--tan:active{
  box-shadow:0 1px 0 rgba(139,115,85,.55);
}
.c8f391-btn--ghost{
  background:rgba(201,201,255,.06);
  border-color:var(--c8f391-lilac);
  color:var(--c8f391-lilac);
}
.c8f391-btn--wheat{
  background:var(--c8f391-wheat);
  color:var(--c8f391-ink-deep);
  box-shadow:0 3px 0 rgba(139,115,85,.5);
}
.c8f391-btn--block{
  display:flex;
  width:100%;
}
/* compact header variants */
.c8f391-btn--top{
  min-height:36px;
  padding:0 10px;
  font-size:11.5px;
}

.c8f391-menubtn{
  width:38px;
  height:36px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:rgba(233,236,239,.07);
  border:1px solid var(--c8f391-line);
  border-radius:var(--c8f391-r-sm);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.c8f391-menubtn__bar{
  width:16px;
  height:2px;
  border-radius:2px;
  background:var(--c8f391-wheat);
  transition:transform .2s ease,opacity .2s ease;
}
.c8f391-menubtn[aria-expanded="true"] .c8f391-menubtn__bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.c8f391-menubtn[aria-expanded="true"] .c8f391-menubtn__bar:nth-child(2){opacity:0;}
.c8f391-menubtn[aria-expanded="true"] .c8f391-menubtn__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ------------------------------------------------------------
   Sectioned slide-down menu
   ------------------------------------------------------------ */
.c8f391-backdrop{
  position:fixed;
  inset:0;
  background:rgba(14,21,29,.72);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
  z-index:45;
}
.c8f391-backdrop--on{
  opacity:1;
  visibility:visible;
}

.c8f391-menu{
  position:fixed;
  top:var(--c8f391-header-h);
  left:50%;
  transform:translate(-50%,-10px);
  width:100%;
  max-width:480px;
  max-height:calc(100dvh - var(--c8f391-header-h) - 8px);
  overflow-y:auto;
  background:var(--c8f391-surface-2);
  border-bottom:1px solid var(--c8f391-line);
  border-top:1px solid var(--c8f391-line-soft);
  padding:14px 14px 20px;
  opacity:0;
  visibility:hidden;
  transition:transform .24s ease,opacity .24s ease,visibility .24s ease;
  z-index:46;
}
.c8f391-menu--open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.c8f391-menu__cta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:14px;
}

.c8f391-menu__group{
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-md);
  background:rgba(27,38,52,.55);
  padding:10px 10px 6px;
  margin-bottom:10px;
}
.c8f391-menu__label{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--c8f391-tan);
  margin:0 0 6px 4px;
}
.c8f391-menu__list{
  list-style:none;
  margin:0;
  padding:0;
}
.c8f391-menu__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:44px;
  padding:6px 8px;
  border-radius:var(--c8f391-r-xs);
  color:var(--c8f391-mist);
  font-weight:600;
  font-size:12.5px;
}
.c8f391-menu__link:hover,.c8f391-menu__link:focus-visible{
  background:rgba(201,201,255,.1);
  text-decoration:none;
}
.c8f391-menu__link::after{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-top:2px solid var(--c8f391-cocoa);
  border-right:2px solid var(--c8f391-cocoa);
  transform:rotate(45deg);
  border-radius:1px;
}

/* ------------------------------------------------------------
   Main shell
   ------------------------------------------------------------ */
.c8f391-shell{
  padding:calc(var(--c8f391-header-h) + 10px) var(--c8f391-pad) 20px;
}

.c8f391-kicker{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--c8f391-lilac);
  border:1px solid rgba(201,201,255,.34);
  border-radius:2px;
  padding:2px 7px;
  margin-bottom:10px;
  background:rgba(201,201,255,.06);
}

.c8f391-section{
  margin:0 0 20px;
}

.c8f391-section--alt{
  background:var(--c8f391-surface-2);
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-md);
  padding:14px 13px;
}

.c8f391-h2{
  font-size:17.5px;
  margin-bottom:8px;
}

.c8f391-sub{
  color:var(--c8f391-muted);
  font-size:12.5px;
  margin:0 0 12px;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.c8f391-hero{
  background:
    radial-gradient(120% 90% at 85% -10%,rgba(201,201,255,.14) 0%,transparent 55%),
    linear-gradient(180deg,var(--c8f391-surface-2) 0%,var(--c8f391-slate) 100%);
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-lg);
  padding:16px 14px 15px;
  margin-bottom:14px;
}
.c8f391-hero__title{
  font-size:21px;
  margin:0 0 9px;
}
.c8f391-hero__lede{
  font-size:12.8px;
  color:var(--c8f391-mist);
  margin:0 0 13px;
}
.c8f391-hero__cta{
  display:grid;
  gap:8px;
}
.c8f391-hero__alt{
  text-align:center;
  font-size:11.5px;
  color:var(--c8f391-muted);
}

.c8f391-chips{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin:0 0 14px;
}
.c8f391-chip{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:5px 8px;
  font-size:11px;
  font-weight:700;
  color:var(--c8f391-wheat);
  background:rgba(46,65,82,.6);
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-sm);
}
.c8f391-chip::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c8f391-lilac);
  flex:0 0 auto;
}

/* ------------------------------------------------------------
   Promo banner carousel
   ------------------------------------------------------------ */
.c8f391-carousel{
  position:relative;
  border-radius:var(--c8f391-r-md);
  overflow:hidden;
  border:1px solid var(--c8f391-line);
  background:var(--c8f391-surface-2);
  margin-bottom:6px;
}
.c8f391-carousel__track{
  display:flex;
  transition:transform .38s ease;
}
.c8f391-slide{
  position:relative;
  flex:0 0 100%;
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:var(--c8f391-surface-2);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  text-align:left;
  font:inherit;
}
.c8f391-slide__img{
  width:100%;
  aspect-ratio:12/5;
  object-fit:cover;
  background:var(--c8f391-void);
}
.c8f391-slide__cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:26px 12px 9px;
  background:linear-gradient(180deg,rgba(20,30,42,0) 0%,rgba(20,30,42,.88) 72%);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
}
.c8f391-slide__tag{
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--c8f391-tan);
  margin-bottom:2px;
}
.c8f391-slide__title{
  display:block;
  font-size:13.5px;
  font-weight:800;
  color:var(--c8f391-wheat);
  line-height:1.25;
}
.c8f391-slide__go{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:800;
  color:var(--c8f391-ink-deep);
  background:var(--c8f391-tan);
  border-radius:2px;
  padding:4px 8px;
  white-space:nowrap;
}

.c8f391-car-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(27,38,52,.72);
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-xs);
  color:var(--c8f391-wheat);
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.c8f391-car-arrow--prev{left:5px;}
.c8f391-car-arrow--next{right:5px;}
.c8f391-car-arrow:active{transform:translateY(-50%) scale(.94);}

.c8f391-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  padding:9px 0 2px;
}
.c8f391-dot{
  width:22px;
  height:6px;
  padding:0;
  border:0;
  border-radius:3px;
  background:rgba(139,115,85,.5);
  cursor:pointer;
}
.c8f391-dot--on{
  background:var(--c8f391-wheat);
}

/* ------------------------------------------------------------
   Game categories - dense 4 column grid, mixed lead card
   ------------------------------------------------------------ */
.c8f391-cat{
  margin-bottom:22px;
}
.c8f391-cat__head{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  border-left:3px solid var(--c8f391-tan);
  padding-left:9px;
  margin-bottom:6px;
}
.c8f391-cat__count{
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--c8f391-slate);
  background:var(--c8f391-wheat);
  border-radius:2px;
  padding:1px 6px;
  white-space:nowrap;
}
.c8f391-cat .c8f391-sub{
  margin-bottom:10px;
}

.c8f391-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--c8f391-gap);
  align-items:start;
}
@media (min-width:430px){
  .c8f391-grid{grid-template-columns:repeat(5,1fr);}
}

.c8f391-cell{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  font:inherit;
  color:var(--c8f391-mist);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  text-align:center;
  transition:transform .14s ease;
}
.c8f391-cell:active{
  transform:translateY(-2px);
}
.c8f391-cell:focus-visible .c8f391-cell__frame{
  outline:2px solid var(--c8f391-lilac);
  outline-offset:2px;
}

.c8f391-cell__frame{
  display:block;
  border-radius:var(--c8f391-r-md);
  border:1px solid var(--c8f391-line-soft);
  background:var(--c8f391-surface-2);
  overflow:hidden;
  transition:border-color .14s ease;
}
.c8f391-cell:hover .c8f391-cell__frame,
.c8f391-cell:active .c8f391-cell__frame{
  border-color:var(--c8f391-tan);
}
.c8f391-cell__img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--c8f391-void);
}
.c8f391-cell__name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:10.5px;
  font-weight:700;
  line-height:1.3;
  color:var(--c8f391-mist);
  margin-top:5px;
  min-height:28px;
}

/* large lead card - part of the big/small card mix */
.c8f391-cell--lead{
  grid-column:span 2;
}
.c8f391-cell--lead .c8f391-cell__frame{
  border-color:var(--c8f391-tan);
  box-shadow:0 4px 14px rgba(10,18,26,.4);
}
.c8f391-cell--lead .c8f391-cell__img{
  aspect-ratio:1.92/1;
}
.c8f391-cell--lead .c8f391-cell__name{
  font-size:11.5px;
  color:var(--c8f391-wheat);
}
@media (min-width:430px){
  .c8f391-cell--lead{grid-column:span 2;}
}

/* ------------------------------------------------------------
   Offer rows (promotions module)
   ------------------------------------------------------------ */
.c8f391-offers{
  display:grid;
  gap:8px;
  margin:0 0 12px;
}
.c8f391-offer{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  padding:10px 11px;
  background:rgba(46,65,82,.55);
  border:1px solid var(--c8f391-line-soft);
  border-left:3px solid var(--c8f391-lilac);
  border-radius:var(--c8f391-r-sm);
}
.c8f391-offer--tan{border-left-color:var(--c8f391-tan);}
.c8f391-offer--wheat{border-left-color:var(--c8f391-wheat);}
.c8f391-offer__tag{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--c8f391-tan);
  margin-bottom:3px;
}
.c8f391-offer__body{
  font-size:12.3px;
  color:var(--c8f391-mist);
}
.c8f391-offer__note{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--c8f391-muted);
}
.c8f391-offer__ic{
  width:34px;
  height:34px;
  border-radius:var(--c8f391-r-sm);
  background:rgba(201,201,255,.1);
  border:1px solid var(--c8f391-line-soft);
  color:var(--c8f391-lilac);
  font-size:15px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ------------------------------------------------------------
   Decision paths (game selection guide)
   ------------------------------------------------------------ */
.c8f391-paths{
  display:grid;
  gap:8px;
  margin:0 0 12px;
}
.c8f391-path{
  padding:10px 11px;
  background:rgba(27,38,52,.55);
  border:1px dashed var(--c8f391-line);
  border-radius:var(--c8f391-r-sm);
}
.c8f391-path__q{
  font-size:12.5px;
  font-weight:800;
  color:var(--c8f391-wheat);
  margin-bottom:4px;
}
.c8f391-path__a{
  font-size:12.2px;
  color:var(--c8f391-mist);
}

/* ------------------------------------------------------------
   Steps (login / safety flow)
   ------------------------------------------------------------ */
.c8f391-steps{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:7px;
  counter-reset:c8f391steps;
}
.c8f391-step{
  counter-increment:c8f391steps;
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px;
  align-items:start;
  padding:9px 10px;
  background:rgba(46,65,82,.5);
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-sm);
}
.c8f391-step__num{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--c8f391-tan);
  color:var(--c8f391-ink-deep);
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}
.c8f391-step__num::before{
  content:counter(c8f391steps);
}
.c8f391-step b{
  color:var(--c8f391-wheat);
}

/* ------------------------------------------------------------
   Two pane versus list (features module)
   ------------------------------------------------------------ */
.c8f391-versus{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 12px;
}
.c8f391-versus__col{
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-md);
  padding:10px 9px 6px;
  background:rgba(27,38,52,.5);
}
.c8f391-versus__col--plus{
  border-top:3px solid var(--c8f391-lilac);
}
.c8f391-versus__col--watch{
  border-top:3px solid var(--c8f391-cocoa);
}
.c8f391-versus__h{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--c8f391-tan);
  margin-bottom:7px;
}
.c8f391-versus__item{
  font-size:11.6px;
  color:var(--c8f391-mist);
  padding:0 0 7px 14px;
  position:relative;
  line-height:1.5;
}
.c8f391-versus__item::before{
  content:"+";
  position:absolute;
  left:0;
  top:0;
  color:var(--c8f391-lilac);
  font-weight:800;
}
.c8f391-versus__col--watch .c8f391-versus__item::before{
  content:"!";
  color:var(--c8f391-cocoa);
}

/* ------------------------------------------------------------
   Scenario rows (use case guidance)
   ------------------------------------------------------------ */
.c8f391-scenes{
  display:grid;
  gap:8px;
  margin:0 0 12px;
}
.c8f391-scene{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  padding:10px 11px;
  background:rgba(46,65,82,.55);
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-sm);
}
.c8f391-scene__ic{
  width:34px;
  height:34px;
  border-radius:var(--c8f391-r-sm);
  background:rgba(245,222,179,.12);
  border:1px solid var(--c8f391-line-soft);
  color:var(--c8f391-wheat);
  display:flex;
  align-items:center;
  justify-content:center;
}
.c8f391-scene__t{
  font-size:12.5px;
  font-weight:800;
  color:var(--c8f391-wheat);
  margin-bottom:3px;
}

/* ------------------------------------------------------------
   Fact summary list
   ------------------------------------------------------------ */
.c8f391-facts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
.c8f391-fact{
  padding:9px 11px;
  background:rgba(27,38,52,.55);
  border:1px solid var(--c8f391-line-soft);
  border-radius:var(--c8f391-r-sm);
  font-size:12.2px;
}
.c8f391-fact__b{
  display:block;
  font-weight:800;
  color:var(--c8f391-wheat);
  margin-bottom:2px;
}

/* full-width CTA band */
.c8f391-ctaband{
  display:grid;
  gap:8px;
  padding:13px 12px;
  border-radius:var(--c8f391-r-md);
  border:1px solid var(--c8f391-tan);
  background:
    radial-gradient(120% 120% at 90% -20%,rgba(245,222,179,.16) 0%,transparent 60%),
    var(--c8f391-surface-2);
  text-align:center;
}
.c8f391-ctaband p{
  font-size:11.8px;
  color:var(--c8f391-muted);
}

/* ------------------------------------------------------------
   Extended home footer - compact groups
   ------------------------------------------------------------ */
.c8f391-ext{
  margin-top:22px;
  border-top:2px solid var(--c8f391-tan);
  padding-top:14px;
}
.c8f391-ext__h{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--c8f391-tan);
  margin:0 0 8px;
}
.c8f391-ext__group{
  margin-bottom:15px;
}
.c8f391-ext__promos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.c8f391-ext__promo{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  font-size:11.3px;
  font-weight:800;
  color:var(--c8f391-ink-deep);
  background:linear-gradient(180deg,var(--c8f391-tan) 0%,#C29B6F 100%);
  border:0;
  border-radius:var(--c8f391-r-xs);
  cursor:pointer;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease;
}
.c8f391-ext__promo:active{transform:translateY(-2px);}
.c8f391-ext__promo--ghost{
  background:rgba(233,236,239,.06);
  color:var(--c8f391-wheat);
  border:1px solid var(--c8f391-line);
}
.c8f391-ext__brand{
  font-size:12px;
  color:var(--c8f391-muted);
  margin-bottom:15px;
}
.c8f391-ext__dir{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.c8f391-ext__col{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.c8f391-ext__colh{
  font-size:9.8px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--c8f391-lilac);
}
.c8f391-ext__link{
  font-size:11px;
  font-weight:600;
  color:var(--c8f391-mist);
  line-height:1.35;
}
.c8f391-ext__link:hover,.c8f391-ext__link:focus-visible{
  color:var(--c8f391-wheat);
  text-decoration:underline;
}
.c8f391-ext__note{
  margin-top:15px;
  padding:10px 11px;
  border:1px dashed var(--c8f391-line);
  border-radius:var(--c8f391-r-sm);
  font-size:10.8px;
  color:var(--c8f391-muted);
  line-height:1.55;
}
@media (max-width:354px){
  .c8f391-ext__dir{grid-template-columns:1fr 1fr;}
}

/* ------------------------------------------------------------
   Common footer
   ------------------------------------------------------------ */
.c8f391-footer{
  margin-top:20px;
  border-top:1px solid var(--c8f391-line-soft);
  padding:12px 2px 4px;
  text-align:center;
}
.c8f391-footer__copy{
  font-size:10.8px;
  color:var(--c8f391-muted);
  line-height:1.6;
}

/* ------------------------------------------------------------
   Bottom dock - segmented action bar
   ------------------------------------------------------------ */
.c8f391-dock{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  height:calc(var(--c8f391-dock-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:linear-gradient(180deg,#223140 0%,#1B2634 100%);
  border-top:1px solid var(--c8f391-line);
  z-index:70;
}
.c8f391-dock__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:44px;
  padding:6px 2px 4px;
  border:0;
  background:transparent;
  font:inherit;
  color:var(--c8f391-muted);
  cursor:pointer;
  text-decoration:none;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease,color .14s ease;
}
.c8f391-dock__item:active{
  transform:translateY(-2px);
}
.c8f391-dock__item + .c8f391-dock__item::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:30px;
  background:var(--c8f391-line-soft);
}
/* active state - background support block behind the icon */
.c8f391-dock__item--on{
  color:var(--c8f391-wheat);
}
.c8f391-dock__item--on .c8f391-dock__ic{
  background:rgba(245,222,179,.16);
  box-shadow:inset 0 0 0 1px rgba(245,222,179,.35);
}
.c8f391-dock__ic{
  width:30px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:currentColor;
}
.c8f391-dock__ic svg{
  width:21px;
  height:21px;
  display:block;
}
.c8f391-dock__lb{
  font-size:9.6px;
  font-weight:700;
  letter-spacing:.4px;
  line-height:1;
}
.c8f391-dock__item--promo .c8f391-dock__ic{
  color:var(--c8f391-tan);
}

/* ------------------------------------------------------------
   Motion & readability preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .c8f391-btn:active,.c8f391-cell:active,.c8f391-dock__item:active,
  .c8f391-ext__promo:active{transform:none;}
}