/* ==========================================================
   Tale-World Global Header V1
   One shared navigation shell for every public page.
   ========================================================== */
.tw-global-header{
  position:sticky!important;
  top:0!important;
  z-index:9000!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  box-sizing:border-box!important;
  background:
    radial-gradient(circle at 48% -170%,rgba(64,133,255,.19),transparent 38%),
    linear-gradient(180deg,rgba(3,8,18,.97),rgba(4,10,22,.93))!important;
  border:0!important;
  border-bottom:1px solid rgba(246,200,95,.22)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.34),inset 0 -1px 0 rgba(255,255,255,.02)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  isolation:isolate;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
.tw-global-header::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(246,200,95,.56),rgba(95,170,255,.42),transparent);
  pointer-events:none;
}
.tw-global-header::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:-1px!important;
  width:92px!important;
  height:12px!important;
  transform:translateX(-50%)!important;
  background:
    radial-gradient(circle at 50% 100%,rgba(246,200,95,.60),transparent 58%),
    linear-gradient(90deg,transparent,rgba(246,200,95,.70),transparent)!important;
  clip-path:polygon(0 50%,44% 50%,50% 0,56% 50%,100% 50%,56% 50%,50% 100%,44% 50%)!important;
  border:0!important;
  opacity:.88!important;
  pointer-events:none!important;
}
.tw-shell-inner{
  position:relative;
  width:min(1840px,calc(100% - 28px));
  min-height:78px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  box-sizing:border-box;
}
.tw-shell-brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:#f7f6f2!important;
  text-decoration:none!important;
}
.tw-shell-brand img{
  display:block!important;
  width:44px!important;
  height:44px!important;
  max-width:44px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 17px rgba(92,152,255,.35)) drop-shadow(0 0 8px rgba(246,200,95,.08))!important;
}
.tw-shell-brand-copy{display:block;white-space:nowrap;line-height:1}
.tw-shell-brand-copy strong{
  display:block;
  color:#f7f6f2!important;
  font-family:Cinzel,Georgia,serif!important;
  font-size:18px!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:.05em!important;
}
.tw-shell-brand-copy span{
  display:block;
  margin-top:4px;
  color:#9fb1cb!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
}
.tw-shell-menu{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(5px,.55vw,11px);
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.tw-shell-menu a{
  position:relative;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:0!important;
  padding:10px 1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#d7e1f3!important;
  font:800 clamp(10.5px,.69vw,13px)/1 Inter,system-ui,sans-serif!important;
  letter-spacing:.005em!important;
  text-decoration:none!important;
  text-transform:none!important;
  white-space:nowrap;
  box-shadow:none!important;
  transition:color .18s ease,transform .18s ease!important;
}
.tw-shell-menu a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(246,200,95,0),rgba(246,200,95,.95),rgba(99,194,255,.75),rgba(246,200,95,0));
  transform:scaleX(0);
  opacity:0;
  transition:transform .18s ease,opacity .18s ease;
}
.tw-shell-menu a:hover{color:#fff9e7!important;transform:translateY(-1px)}
.tw-shell-menu a:hover::after,.tw-shell-menu a.active::after{transform:scaleX(1);opacity:1}
.tw-shell-menu a.active{color:#fff1bd!important}
.tw-shell-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.tw-shell-discord,.tw-shell-store{
  min-height:38px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 11px!important;
  border-radius:8px!important;
  text-decoration:none!important;
  font:800 11px/1 Inter,system-ui,sans-serif!important;
  white-space:nowrap!important;
  transition:transform .18s ease,filter .18s ease,background .18s ease!important;
}
.tw-shell-discord{
  border:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))!important;
  color:#e8eef9!important;
}
.tw-shell-discord:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)!important}
.tw-shell-store{
  border:1px solid rgba(255,231,153,.70)!important;
  background:linear-gradient(180deg,#dfb84f 0%,#b97e24 100%)!important;
  color:#fff8dc!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  text-shadow:0 1px 2px rgba(54,30,0,.75)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 7px 20px rgba(210,156,47,.14)!important;
}
.tw-shell-store:hover{transform:translateY(-1px);filter:brightness(1.07)}
.tw-shell-store.active{box-shadow:0 0 0 1px rgba(255,229,143,.30),0 9px 24px rgba(210,156,47,.22)!important}
.tw-shell-store img{
  display:block!important;
  width:26px!important;
  height:26px!important;
  max-width:26px!important;
  min-width:26px!important;
  object-fit:contain!important;
  margin:0!important;
  filter:drop-shadow(0 2px 3px rgba(48,26,0,.45))!important;
}
.tw-shell-toggle{
  display:none;
  width:40px;
  height:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font:700 20px/1 system-ui,sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}
@media(max-width:1540px){
  .tw-shell-inner{gap:10px}
  .tw-shell-menu{gap:5px}
  .tw-shell-brand-copy span{display:none}
  .tw-shell-brand-copy strong{font-size:16px!important}
  .tw-shell-discord,.tw-shell-store{padding-inline:9px!important}
}
@media(max-width:1320px){
  .tw-shell-brand-copy{display:none}
  .tw-shell-discord{display:none!important}
  .tw-shell-menu a{font-size:10.5px!important}
}
@media(max-width:1180px){
  .tw-global-header::after{display:none!important}
  .tw-shell-inner{min-height:70px}
  .tw-shell-brand-copy{display:block}
  .tw-shell-brand-copy span{display:none}
  .tw-shell-menu{
    display:none;
    position:absolute;
    top:100%;
    left:-14px;
    right:-14px;
    max-height:calc(100dvh - 70px);
    padding:12px 18px 18px!important;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow-y:auto!important;
    background:linear-gradient(180deg,rgba(4,10,22,.995),rgba(4,10,22,.985));
    border-bottom:1px solid rgba(246,200,95,.18)!important;
    box-shadow:0 20px 34px rgba(0,0,0,.40)!important;
  }
  .tw-shell-menu.open{display:flex!important}
  .tw-shell-menu a{
    width:100%;
    justify-content:flex-start;
    padding:11px 4px!important;
    font-size:13px!important;
  }
  .tw-shell-menu a::after{bottom:4px;left:4px;right:auto;width:80px}
  .tw-shell-discord{display:inline-flex!important}
  .tw-shell-toggle{display:block}
}
@media(max-width:620px){
  .tw-shell-inner{width:calc(100% - 20px);min-height:64px;gap:8px}
  .tw-shell-brand img{width:40px!important;height:40px!important;max-width:40px!important}
  .tw-shell-brand-copy strong{font-size:14px!important}
  .tw-shell-discord{display:none!important}
  .tw-shell-store{width:38px!important;min-width:38px!important;height:38px!important;padding:3px!important}
  .tw-shell-store span{display:none}
  .tw-shell-store img{width:25px!important;height:25px!important;max-width:25px!important;min-width:25px!important}
  .tw-shell-menu{left:-10px;right:-10px;max-height:calc(100dvh - 64px)}
}