/* DUKUN138 v1.0.3 — viewport-fixed header/ticker + permanent bottom nav */
html{scroll-padding-top:140px}
.shell{padding-top:128px;padding-bottom:calc(86px + env(safe-area-inset-bottom))}

/* Top stack is outside .shell by design, preventing hero/content stacking from covering it. */
.viewport-header{
  position:fixed!important;top:0!important;left:50%!important;transform:translateX(-50%)!important;
  width:min(720px,100%)!important;z-index:2147483000!important;overflow:visible!important;isolation:isolate
}
.viewport-ticker{
  position:fixed!important;top:80px!important;left:50%!important;transform:translateX(-50%)!important;
  width:min(720px,100%)!important;z-index:2147482990!important
}
.viewport-backdrop{position:fixed!important;inset:0!important;z-index:2147482970!important}
.viewport-header #menu{position:absolute;z-index:2147483020!important}
.viewport-header #drawer{position:absolute;top:128px;z-index:2147483010!important}

/* Permanent bottom navigation. */
.shell>.bottom{
  position:fixed!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;
  width:min(720px,100%)!important;z-index:2147482960!important
}

/* Continuous ticker: two copies move as one train so the bar never looks empty. */
.ticker>div{overflow:hidden;white-space:nowrap}
.ticker p{display:flex!important;align-items:center;width:max-content!important;min-width:max-content;margin:0!important;padding:0!important;white-space:nowrap;will-change:transform;animation:dukunTickerTrain 18s linear infinite}
.ticker p .ticker-copy{display:inline-block;flex:none;padding-right:46px}
@keyframes dukunTickerTrain{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Mystic moving line on permanent bottom navigation. */
.bottom{overflow:hidden;isolation:isolate}
.bottom:before{content:"";position:absolute;z-index:3;top:0;left:-45%;width:38%;height:2px;background:linear-gradient(90deg,transparent,#ffd477,#c99037,#8a451d,transparent);filter:drop-shadow(0 0 7px rgba(230,180,81,.75));animation:nav-line 4s linear infinite;pointer-events:none}
.bottom a{position:relative;overflow:hidden;transition:transform .18s ease,color .18s ease,background .25s ease}
.bottom a:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 24%,rgba(255,212,119,.1) 48%,transparent 72%);transform:translateX(-115%);animation:nav-sheen 5.8s ease-in-out infinite;animation-delay:calc(var(--nav-i,0) * .45s);pointer-events:none}
.bottom a:nth-child(1){--nav-i:0}.bottom a:nth-child(2){--nav-i:1}.bottom a:nth-child(3){--nav-i:2}.bottom a:nth-child(4){--nav-i:3}
.bottom a:active{transform:scale(.94);background:#351308}
.bottom .nav-icon{filter:drop-shadow(0 0 4px rgba(230,180,81,.35));animation:icon-breathe 3s ease-in-out infinite;animation-delay:calc(var(--nav-i,0) * .28s)}
.bottom .hot .nav-icon{filter:drop-shadow(0 0 5px rgba(55,20,3,.35))}
@keyframes nav-line{to{left:108%}}
@keyframes nav-sheen{0%,58%{transform:translateX(-115%)}82%,100%{transform:translateX(115%)}}
@keyframes icon-breathe{0%,100%{transform:translateY(0) scale(1);opacity:.86}50%{transform:translateY(-2px) scale(1.07);opacity:1}}

@media(max-width:600px){
  html{scroll-padding-top:114px}.shell{padding-top:102px;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .viewport-ticker{top:64px!important}.viewport-header #drawer{top:102px}.actions{padding-bottom:8px}
}
@media(max-width:380px),(max-height:680px){
  html{scroll-padding-top:104px}.shell{padding-top:92px;padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .viewport-ticker{top:58px!important}.viewport-header #drawer{top:92px}
}
@media(prefers-reduced-motion:reduce){
  .ticker p,.bottom:before,.bottom a:before,.bottom .nav-icon{animation:none}
  .ticker p{transform:none}
}