/* Шапка на MTG за страниците на Щъркел (упътване, условия, поверителност) */
.top{position:sticky;top:0;z-index:50;background:rgba(2,9,20,.96)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(48,139,215,.22);font-family:Inter,system-ui,sans-serif}
.top::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:200px;background:linear-gradient(90deg,transparent,#00C8FF,transparent);animation:shtkbd 9s linear infinite}
@keyframes shtkbd{from{transform:translateX(-220px)}to{transform:translateX(100vw)}}
.top .in{position:relative;max-width:1180px;margin:0 auto;padding:0 20px;height:66px;display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.top .logo{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;gap:10px;margin:0!important;text-decoration:none}
.top .logo svg{width:36px;height:36px;filter:drop-shadow(0 0 10px rgba(0,200,255,.45))}
.top .logo b{display:block;font-size:21px;font-weight:900;line-height:1;background:linear-gradient(90deg,#0A7BFF,#00B4FF);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.top .logo small{display:block;font-size:8px;font-weight:700;letter-spacing:.42em;color:#E6EEF9;margin-top:3px}
.top .shtk-logo{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px;margin:0;text-decoration:none}
.top .shtk-logo img{width:32px;height:32px;border-radius:9px;display:block;box-shadow:0 0 12px rgba(219,39,119,.45)}
.top .shtk-logo b{font-family:Unbounded,Rubik,sans-serif;font-weight:600;font-size:17px;line-height:1;background:linear-gradient(90deg,#F472B6,#C4B5FD);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.top .tabs{grid-column:2;grid-row:1;display:flex;justify-content:center;gap:4px;min-width:0;overflow:visible!important}
/* табовете — като менюто на mtg.bg (без звук) */
.top .tabs a{position:relative;overflow:hidden;display:inline-flex;align-items:center;padding:10px 14px;border-radius:8px;color:#EAF1FB!important;font-size:14.5px;font-weight:600;white-space:nowrap;text-decoration:none;transition:color .25s,transform .25s,text-shadow .25s}
.top .tabs a::before{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#078DF5,#00C8FF);box-shadow:0 0 10px #00C8FF;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.top .tabs a::after{content:"";position:absolute;top:0;bottom:0;left:0;right:auto;width:40%;height:auto;border-radius:0;box-shadow:none;background:linear-gradient(100deg,transparent,rgba(0,200,255,.22),transparent);transform:translateX(-160%) skewX(-20deg);transform-origin:50% 50%;transition:transform .6s}
.top .tabs a[aria-current]{color:#fff!important;text-shadow:0 0 14px rgba(22,140,255,.6)}
.top .tabs a[aria-current]::before{transform:scaleX(1);background:#078DF5}
.top .tabs a[aria-current]::after{transform:translateX(-160%) skewX(-20deg)}
.top .tabs a:hover,.top .tabs a:focus-visible,.top .tabs a:active{text-shadow:0 0 12px rgba(0,200,255,.55);transform:translateY(-1px);color:#00C8FF!important}
.top .tabs a:hover::before,.top .tabs a:focus-visible::before,.top .tabs a:active::before{transform:scaleX(1)}
.top .tabs a:hover::after,.top .tabs a:active::after{transform:translateX(320%) skewX(-20deg)}
.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(48,139,215,.16);background:radial-gradient(900px 500px at 10% -10%,rgba(7,141,245,.22),transparent 60%),radial-gradient(700px 500px at 100% 10%,rgba(0,200,255,.10),transparent 60%),#020914!important}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero header{position:relative;display:block!important;max-width:860px;margin:0 auto;padding:56px 20px 44px!important;font-family:Inter,system-ui,sans-serif}
.hero .brand{display:inline-block!important;font-family:Inter,system-ui,sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase;color:#00C8FF!important;margin-bottom:12px}
.hero h1{margin:0 0 10px!important;color:#fff!important;font-family:Inter,system-ui,sans-serif!important;font-size:clamp(30px,5vw,46px)!important;line-height:1.1!important;letter-spacing:-.03em;font-weight:800!important}
.hero .meta{margin:0!important;color:#8296AE!important;font-size:14px!important}
html{scroll-padding-top:120px}
/* телефон: двете логота горе (всяко в центъра на своята половина), четирите таба на втори ред */
@media (max-width:640px){
.top .in{height:auto;grid-template-columns:1fr 1fr;gap:0;padding:10px 12px 0}
.top .in::before{content:"";position:absolute;left:50%;top:14px;width:1px;height:28px;background:rgba(48,139,215,.35)}
.top .logo{grid-column:1;justify-self:center}.top .shtk-logo{grid-column:2;justify-self:center}
.top .logo b{font-size:18px}.top .logo svg{width:30px;height:30px}.top .logo small{display:none}
.top .shtk-logo img{width:28px;height:28px}.top .shtk-logo b{font-size:15px}
.top .tabs{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:0;margin-top:6px}
.top .tabs a{padding:8px 4px 11px;font-size:12.5px}
.top .tabs a::before{left:4px;right:4px;bottom:4px}
.hero header{padding:36px 20px 30px!important}
}
@media (prefers-reduced-motion:reduce){.top::after{animation:none}}
/* упътването: без собствените отстъпи на body, съдържанието под шапката */
body.shtk-help{padding:0!important;margin:0!important}
body.shtk-help main{padding:28px max(16px,env(safe-area-inset-left,0px)) 56px}