/* ======================================================================
   stormmu public shell v2
   Camada visual global: header, fundo, leitura e footer.
   Projetada para coexistir com os estilos específicos das páginas.
   ====================================================================== */
:root{
  --sm-shell-bg:#070809;
  --sm-shell-bg2:#0b0e11;
  --sm-shell-panel:#0e1216;
  --sm-shell-line:rgba(255,255,255,.09);
  --sm-shell-gold:#d4af37;
  --sm-shell-gold2:#f1d77a;
  --sm-shell-gold3:#8e6a1e;
  --sm-shell-text:#edf0f2;
  --sm-shell-muted:#9ba4ab;
}

body.storm-public-shell{
  background:
    radial-gradient(circle at 50% -10%,rgba(212,175,55,.085),transparent 34%),
    radial-gradient(circle at 12% 24%,rgba(78,112,150,.045),transparent 26%),
    linear-gradient(180deg,#080a0c 0%,#060708 55%,#070809 100%) !important;
  color:var(--sm-shell-text);
}

body.storm-public-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.22;
  background:
    linear-gradient(90deg,transparent 0 49.8%,rgba(255,255,255,.015) 50%,transparent 50.2%),
    radial-gradient(circle at 50% 15%,rgba(212,175,55,.055),transparent 33%);
}

/* ============================ HEADER ============================ */
body.storm-public-shell .top-header{
  background:linear-gradient(180deg,rgba(8,10,12,.985),rgba(7,9,11,.955)) !important;
  border-bottom:1px solid rgba(212,175,55,.28) !important;
  box-shadow:0 14px 42px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.025) inset !important;
  padding:0 !important;
}
body.storm-public-shell .top-header::after{
  content:"";
  position:absolute;
  left:8%;right:8%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,214,109,.75),transparent);
  filter:drop-shadow(0 0 5px rgba(212,175,55,.42));
}
body.storm-public-shell .top-header .container{
  width:min(1680px,calc(100% - 28px)) !important;
  max-width:1680px !important;
  min-height:70px !important;
  margin:0 auto !important;
  padding:0 4px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:16px !important;
}

.storm-shell-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:170px;
  color:inherit;
  text-decoration:none;
}
.storm-shell-brand-mark{
  width:38px;height:38px;
  display:grid;place-items:center;
  color:var(--sm-shell-gold2);
  border:1px solid rgba(212,175,55,.28);
  background:
    radial-gradient(circle at 35% 25%,rgba(255,232,150,.16),transparent 33%),
    linear-gradient(145deg,#18140b,#090a0c 68%);
  transform:rotate(12deg);
  box-shadow:0 0 22px rgba(212,175,55,.08),inset 0 0 18px rgba(212,175,55,.05);
}
.storm-shell-brand-mark i{font-size:17px;text-shadow:0 0 13px rgba(242,214,109,.5)}
.storm-shell-brand-copy{display:flex;flex-direction:column;line-height:1}
.storm-shell-brand-copy strong{
  font-family:'Cinzel',serif;
  font-size:1.17rem;
  letter-spacing:.45px;
  color:#f2e5ba;
  text-shadow:0 0 18px rgba(212,175,55,.15);
}
.storm-shell-brand-copy small{
  margin-top:5px;
  color:#737c84;
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.5px;
  white-space:nowrap;
}

body.storm-public-shell .header-left{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  justify-content:space-between !important;
}
body.storm-public-shell .nav-menu{
  order:1;
  min-width:0;
  flex:1 1 auto !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
}
body.storm-public-shell .nav-menu a,
body.storm-public-shell .nav-menu .dropbtn{
  padding:25px 10px !important;
  font-family:'Montserrat',sans-serif !important;
  font-size:.78rem !important;
  font-weight:650 !important;
  letter-spacing:.15px !important;
  text-transform:none !important;
  color:#cdd2d6 !important;
}
body.storm-public-shell .nav-menu a:hover,
body.storm-public-shell .nav-item:hover .dropbtn,
body.storm-public-shell .nav-menu .nav-active{
  color:#f0d474 !important;
  text-shadow:0 0 18px rgba(212,175,55,.24) !important;
}
body.storm-public-shell .nav-active::after{
  left:18% !important;right:18% !important;bottom:11px !important;height:2px !important;
  background:linear-gradient(90deg,transparent,#f0d474,transparent) !important;
}
body.storm-public-shell .online-status{
  order:2;
  padding:7px 0 7px 13px !important;
  margin:0 0 0 5px !important;
  border-right:0 !important;
  border-left:1px solid rgba(212,175,55,.15) !important;
  font-size:.66rem !important;
  letter-spacing:.3px !important;
  color:#8f989f !important;
}
body.storm-public-shell .online-status .num{
  color:#e6c65f !important;
  font-size:.86rem !important;
}
body.storm-public-shell .online-status .status-dot{
  width:7px !important;height:7px !important;
}
body.storm-public-shell .pvp-tournament-shortcut{width:29px;height:29px;min-width:29px}

body.storm-public-shell .header-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
}
body.storm-public-shell .login-trigger,
body.storm-public-shell .user-logged .btn-panel{
  min-height:38px !important;
  border-radius:2px !important;
  border:1px solid rgba(212,175,55,.38) !important;
  background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(212,175,55,.035)) !important;
  color:#efd77f !important;
  box-shadow:inset 0 0 18px rgba(212,175,55,.035) !important;
}
body.storm-public-shell .user-logged{gap:9px !important;color:#9099a0 !important;font-size:.68rem !important}
body.storm-public-shell .user-logged strong{color:#f0d474 !important}

body.storm-public-shell .dropdown-content,
body.storm-public-shell .sub-dropdown-content{
  border-color:rgba(212,175,55,.22) !important;
  background:linear-gradient(145deg,#11161a,#080a0c) !important;
  box-shadow:0 26px 65px rgba(0,0,0,.8),0 0 25px rgba(212,175,55,.05) !important;
}
body.storm-public-shell .dropdown-content a,
body.storm-public-shell .sub-dropdown-content a{
  padding:12px 16px !important;
  font-size:.73rem !important;
  border-bottom-color:rgba(255,255,255,.055) !important;
  color:#c2c8cc !important;
}
body.storm-public-shell .dropdown-content a:hover,
body.storm-public-shell .sub-dropdown-content a:hover{
  background:linear-gradient(90deg,rgba(212,175,55,.12),transparent) !important;
  color:#efd676 !important;
}

/* ============================ FOOTER ============================ */
body.storm-public-shell .storm-footer{
  border-top-color:rgba(212,175,55,.20) !important;
  background:
    radial-gradient(circle at 50% 0,rgba(212,175,55,.055),transparent 28%),
    linear-gradient(180deg,#090b0d,#060708) !important;
}
body.storm-public-shell .storm-footer-shell{width:min(1500px,calc(100% - 34px)) !important}
body.storm-public-shell .sf-logo{font-size:1.12rem !important;color:#f1dfaa !important}
body.storm-public-shell .sf-logo span{font-size:.63rem !important;color:#d7b650 !important}
body.storm-public-shell .sf-brand-text{font-size:.64rem !important;color:#89939a !important;line-height:1.6 !important}
body.storm-public-shell .sf-column h3{font-size:.7rem !important;color:#c9aa53 !important}
body.storm-public-shell .sf-links a{font-size:.64rem !important;color:#8f99a0 !important}
body.storm-public-shell .sf-links a:hover{color:#efd575 !important}
body.storm-public-shell .sf-socials a{border-color:rgba(212,175,55,.13) !important}

/* ============================ LEITURA ============================ */
body.storm-public-shell ::selection{background:rgba(212,175,55,.28);color:#fff}
body.storm-public-shell a:focus-visible,
body.storm-public-shell button:focus-visible,
body.storm-public-shell input:focus-visible,
body.storm-public-shell select:focus-visible,
body.storm-public-shell textarea:focus-visible{
  outline:2px solid #e6c65f !important;
  outline-offset:2px;
}

@media(max-width:1500px){
  .storm-shell-brand{min-width:138px;gap:7px}
  .storm-shell-brand-mark{width:32px;height:32px}
  .storm-shell-brand-copy strong{font-size:1rem}
  .storm-shell-brand-copy small{display:none}
  body.storm-public-shell .nav-menu a,
  body.storm-public-shell .nav-menu .dropbtn{padding-left:7px !important;padding-right:7px !important;font-size:.72rem !important}
  body.storm-public-shell .online-status{font-size:0 !important;gap:6px !important;padding-left:8px !important}
  body.storm-public-shell .online-status .num{font-size:.8rem !important}
}

@media(max-width:1180px){
  body.storm-public-shell .top-header .container{display:flex !important;flex-wrap:wrap !important;padding:7px 4px !important;gap:4px 10px !important}
  .storm-shell-brand{order:1}
  body.storm-public-shell .header-right{order:2;margin-left:auto}
  body.storm-public-shell .header-left{order:3;width:100%;flex-basis:100% !important;border-top:1px solid rgba(255,255,255,.045)}
  body.storm-public-shell .nav-menu{justify-content:flex-start !important;overflow-x:auto !important;scrollbar-width:none}
  body.storm-public-shell .nav-menu::-webkit-scrollbar{display:none}
  body.storm-public-shell .nav-menu a,
  body.storm-public-shell .nav-menu .dropbtn{padding-top:13px !important;padding-bottom:13px !important;white-space:nowrap}
  body.storm-public-shell .nav-active::after{bottom:4px !important}
}

@media(max-width:720px){
  body.storm-public-shell .top-header .container{width:calc(100% - 14px) !important}
  .storm-shell-brand-mark{width:30px;height:30px}
  .storm-shell-brand-copy strong{font-size:.92rem}
  body.storm-public-shell .user-logged span{display:none}
  body.storm-public-shell .online-status{display:none !important}
  body.storm-public-shell .nav-menu a,
  body.storm-public-shell .nav-menu .dropbtn{font-size:.69rem !important;padding-left:9px !important;padding-right:9px !important}
  body.storm-public-shell .sf-grid{grid-template-columns:1fr 1fr !important}
}