/* Ashvale Outbreak Protocol V14 — collision-free HUD + animated tab navigation.
   Animated tab concept adapted from the public CodePen by Mauricio Bucardo / abxlfazl (MIT). */
:root{
  --hud-edge:14px;
  --hud-bottom-height:102px;
  --hud-rail-bottom:126px;
  --menu-accent:#ff9b54;
  --menu-surface:rgba(5,13,16,.94);
  --menu-duration:.62s;
}

/* ---------- Desktop HUD zoning ---------- */
body.v13-outbreak-ready .topbar{
  height:64px;
  grid-template-columns:minmax(260px,1fr) minmax(360px,auto) minmax(430px,1fr);
  padding:0 14px;
}
body.v13-outbreak-ready .top-actions{gap:5px}
body.v13-outbreak-ready .ui-btn.compact{padding:8px 9px;font-size:8px}
body.v13-outbreak-ready .party-panel{
  top:88px;
  width:252px;
  max-height:calc(100vh - 300px);
  overflow:auto;
  scrollbar-width:thin;
}
body.v13-outbreak-ready .quest-panel{
  top:88px;
  right:var(--hud-edge);
  width:286px;
  max-height:calc(100vh - 300px);
  display:flex;
  flex-direction:column;
  padding:14px;
  overflow:hidden;
}
body.v13-outbreak-ready .quest-panel .eyebrow{margin-bottom:7px}
body.v13-outbreak-ready .quest-panel h2{
  margin:0 0 7px;
  font-size:15px;
  line-height:1.15;
  white-space:normal;
  overflow-wrap:anywhere;
}
body.v13-outbreak-ready .quest-panel>p:not(.eyebrow){
  margin:0 0 9px;
  font-size:9px;
  line-height:1.45;
}
body.v13-outbreak-ready .quest-progress{flex:0 0 auto}
body.v13-outbreak-ready .quest-count{flex:0 0 auto}
body.v13-outbreak-ready .asc-minimap{
  position:static;
  order:7;
  width:100%;
  height:92px;
  margin:11px 0 0;
  flex:0 0 92px;
  border-color:rgba(157,255,179,.28);
}
body.v13-outbreak-ready .combat-feed{
  position:static;
  order:8;
  width:auto;
  max-height:42px;
  margin-top:8px;
  overflow:hidden;
  text-align:left;
  font-size:7px;
  line-height:1.45;
  color:#aebdc0;
}
body.v13-outbreak-ready .combat-feed div{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* One compact rail above the main footer: modifier | weapons | active gun. */
body.v13-outbreak-ready #worldModifier{
  left:var(--hud-edge);
  right:auto;
  top:auto;
  bottom:var(--hud-rail-bottom);
  width:252px;
  min-width:0;
  height:62px;
  justify-content:center;
  padding:8px 11px;
  overflow:hidden;
}
body.v13-outbreak-ready #worldModifier small{font-size:7px}
body.v13-outbreak-ready #worldModifier strong{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.v13-outbreak-ready #worldModifier span{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.v13-outbreak-ready #dailyTracker{display:none}

body.v13-outbreak-ready .weapon-deck{
  left:50%;
  right:auto;
  bottom:var(--hud-rail-bottom);
  transform:translateX(-50%);
  max-width:calc(100vw - 590px);
  min-height:62px;
  align-items:center;
  padding:4px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
body.v13-outbreak-ready .weapon-deck::-webkit-scrollbar{display:none}
body.v13-outbreak-ready .weapon-slot{
  flex:0 0 58px;
  width:58px;
  height:52px;
}
body.v13-outbreak-ready .weapon-slot img{width:29px;height:29px}

body.v13-outbreak-ready .arsenal-hud{
  right:var(--hud-edge);
  left:auto;
  top:auto;
  bottom:var(--hud-rail-bottom);
  width:286px;
  min-height:62px;
  padding:8px 10px;
}
body.v13-outbreak-ready .arsenal-main{grid-template-columns:40px 1fr;gap:8px;padding-right:78px}
body.v13-outbreak-ready .arsenal-main img{width:38px;height:38px}
body.v13-outbreak-ready .arsenal-main strong{font-size:11px}
body.v13-outbreak-ready .arsenal-main span{font-size:7px}
body.v13-outbreak-ready .ammo-block{right:10px;top:14px}
body.v13-outbreak-ready .ammo-block strong{font-size:23px}
body.v13-outbreak-ready .ammo-block span{font-size:12px}
body.v13-outbreak-ready .ammo-block small{top:24px;font-size:6px;width:112px}
body.v13-outbreak-ready .heat-line{margin-top:5px}
body.v13-outbreak-ready .arsenal-meta{display:none}
body.v13-outbreak-ready .reload-progress{margin-top:5px}

body.v13-outbreak-ready .bottom-hud{
  left:var(--hud-edge);
  right:var(--hud-edge);
  bottom:10px;
  height:var(--hud-bottom-height);
  padding:9px 13px;
  grid-template-columns:minmax(330px,1fr) auto minmax(290px,1fr);
  gap:12px;
}
body.v13-outbreak-ready .leader-card{min-width:0}
body.v13-outbreak-ready .skills{gap:5px}
body.v13-outbreak-ready .skill{width:66px;height:70px}
body.v13-outbreak-ready .run-stats{gap:13px;min-width:0}
body.v13-outbreak-ready .run-stats .ui-btn{padding:9px 11px}
body.v13-outbreak-ready .kill-banner{top:144px}
body.v13-outbreak-ready .supply-notice{right:316px;top:88px}

/* ---------- Main menu modernization ---------- */
#menu .menu-bg{transform:scale(1.035)}
#menu .menu-content{
  left:5vw;
  top:47%;
  width:min(710px,58vw);
  padding:28px 30px 26px;
  border:1px solid rgba(157,255,179,.18);
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(6,18,19,.88),rgba(5,10,15,.66)),
    radial-gradient(circle at 12% 8%,rgba(103,245,224,.08),transparent 35%);
  box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
}
#menu .studio{margin-top:0}
#menu .title-mark h1{font-size:clamp(50px,6.4vw,96px)}
#menu .title-mark h2{font-size:clamp(28px,3.8vw,58px)}
#menu .tagline{margin:18px 0 20px;line-height:1.55}
#menu .menu-buttons{
  width:100%;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
#menu #continueBtn{grid-column:1/-1}
#menu .hero-btn{min-height:62px;border-radius:10px}
#menu .menu-side{
  right:4.5vw;
  bottom:21vh;
  width:min(330px,29vw);
  padding:19px;
  border-radius:18px;
  border-color:rgba(157,255,179,.18);
  background:linear-gradient(145deg,rgba(4,13,15,.9),rgba(8,20,20,.7));
  box-shadow:0 22px 70px rgba(0,0,0,.4);
}
#menu .menu-side li{margin-bottom:3px}
#menu .version{bottom:112px;right:24px}

/* Animated tab bar adapted from Mauricio Bucardo's public MIT CodePen. */
.outbreak-tab-menu{
  --tab-bg:rgba(7,14,18,.96);
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:8;
  transform:translateX(-50%);
  margin:0;
  display:flex;
  width:min(620px,92vw);
  min-height:72px;
  padding:0 48px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(157,255,179,.22);
  border-radius:22px;
  background:var(--tab-bg);
  box-shadow:0 22px 62px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04);
  list-style:none;
}
.outbreak-tab-item{
  all:unset;
  flex:1 1 0;
  z-index:2;
  min-width:64px;
  display:flex;
  cursor:pointer;
  position:relative;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  padding:18px 8px 16px;
  will-change:transform;
  transition:transform var(--tab-timeout,var(--menu-duration)),filter .2s ease;
}
.outbreak-tab-item::before{
  content:"";
  z-index:-1;
  width:56px;
  height:56px;
  border-radius:50%;
  position:absolute;
  transform:scale(0);
  background:var(--item-color,var(--menu-accent));
  box-shadow:0 0 28px color-mix(in srgb,var(--item-color,var(--menu-accent)) 46%,transparent);
  transition:transform var(--menu-duration),background-color var(--menu-duration);
}
.outbreak-tab-item::after{
  content:attr(data-label);
  position:absolute;
  top:52px;
  left:50%;
  transform:translateX(-50%);
  color:#8fa8a3;
  font:800 7px/1 system-ui,sans-serif;
  letter-spacing:.12em;
  white-space:nowrap;
  opacity:.72;
  transition:.22s ease;
}
.outbreak-tab-item:hover{filter:brightness(1.2)}
.outbreak-tab-item:focus-visible{outline:2px solid #dffff0;outline-offset:5px}
.outbreak-tab-item.active{transform:translate3d(0,-18px,0)}
.outbreak-tab-item.active::before{transform:scale(1)}
.outbreak-tab-item.active::after{top:60px;color:#eaffef;opacity:1}
.outbreak-tab-icon{
  width:28px;
  height:28px;
  stroke:white;
  fill:transparent;
  stroke-width:1.5;
  stroke-miterlimit:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:400;
}
.outbreak-tab-item.active .outbreak-tab-icon{animation:outbreakStroke 1.3s reverse}
@keyframes outbreakStroke{100%{stroke-dashoffset:400}}
.outbreak-tab-border{
  left:0;
  bottom:99%;
  width:124px;
  height:31px;
  position:absolute;
  z-index:1;
  clip-path:url(#outbreakMenuClip);
  will-change:transform;
  background:var(--tab-bg);
  transition:transform var(--tab-timeout,var(--menu-duration));
}
.outbreak-tab-svg{position:absolute;width:0;height:0;overflow:hidden}

.music-now-playing{
  position:absolute;
  left:50%;
  bottom:102px;
  z-index:8;
  transform:translateX(-50%);
  min-width:280px;
  max-width:min(560px,88vw);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:7px 13px;
  border:1px solid rgba(157,255,179,.15);
  border-radius:999px;
  background:rgba(3,10,12,.7);
  color:#90aaa2;
  font:700 8px/1 system-ui,sans-serif;
  letter-spacing:.09em;
  backdrop-filter:blur(10px);
  pointer-events:none;
}
.music-now-playing b{color:#dffff0;font-weight:800}
.music-now-playing i{
  width:6px;height:6px;border-radius:50%;background:#79ff9d;
  box-shadow:0 0 12px rgba(121,255,157,.8);
  animation:musicPulse 1.2s ease-in-out infinite alternate;
}
body.music-muted .music-now-playing i{background:#71817c;box-shadow:none;animation:none}
@keyframes musicPulse{to{transform:scale(1.45);opacity:.55}}

/* ---------- Responsive collision rules ---------- */
@media(max-width:1280px){
  body.v13-outbreak-ready .topbar{grid-template-columns:240px 1fr auto}
  body.v13-outbreak-ready .mission-line span{display:none}
  body.v13-outbreak-ready .top-actions #careerBtn,
  body.v13-outbreak-ready .top-actions #skillTreeBtn{display:none}
  body.v13-outbreak-ready .party-panel{width:220px}
  body.v13-outbreak-ready .quest-panel{width:244px}
  body.v13-outbreak-ready #worldModifier{width:220px}
  body.v13-outbreak-ready .arsenal-hud{width:250px}
  body.v13-outbreak-ready .weapon-deck{max-width:calc(100vw - 510px)}
  body.v13-outbreak-ready .bottom-hud{grid-template-columns:minmax(290px,1fr) auto}
  body.v13-outbreak-ready .run-stats{display:none}
}
@media(max-width:980px){
  :root{--hud-rail-bottom:112px}
  body.v13-outbreak-ready .party-panel{width:188px;padding:10px}
  body.v13-outbreak-ready .quest-panel{width:206px;padding:10px}
  body.v13-outbreak-ready .asc-minimap{height:72px;flex-basis:72px}
  body.v13-outbreak-ready #worldModifier{display:none}
  body.v13-outbreak-ready .arsenal-hud{right:8px;width:220px}
  body.v13-outbreak-ready .weapon-deck{left:8px;right:236px;transform:none;max-width:none}
  body.v13-outbreak-ready .bottom-hud{left:8px;right:8px}
  #menu .menu-side{display:none}
  #menu .menu-content{left:5vw;width:90vw}
}
@media(max-width:760px),(pointer:coarse){
  :root{--hud-rail-bottom:102px}
  body.v13-outbreak-ready .quest-panel{top:58px;right:5px;width:182px;max-height:218px}
  body.v13-outbreak-ready .quest-panel .asc-minimap{display:block;height:64px;flex-basis:64px}
  body.v13-outbreak-ready .quest-panel .combat-feed{display:none}
  body.v13-outbreak-ready .party-panel{top:58px;left:5px;width:154px;max-height:218px}
  body.v13-outbreak-ready .survival-hud{top:58px;left:166px;right:194px;grid-template-columns:1fr;gap:3px;padding:5px}
  body.v13-outbreak-ready .survival-title{grid-column:auto}
  body.v13-outbreak-ready .survival-meter{display:none}
  body.v13-outbreak-ready .arsenal-hud{right:5px;bottom:102px;width:190px}
  body.v13-outbreak-ready .weapon-deck{left:5px;right:200px;bottom:102px}
  body.v13-outbreak-ready .weapon-slot{flex-basis:47px;width:47px;height:46px}
  body.v13-outbreak-ready .bottom-hud{height:90px}
  .outbreak-tab-menu{min-height:62px;padding:0 20px;bottom:14px}
  .outbreak-tab-item{min-width:48px;padding:15px 4px 13px}
  .outbreak-tab-item::before{width:48px;height:48px}
  .outbreak-tab-item::after{display:none}
  .outbreak-tab-item.active{transform:translate3d(0,-14px,0)}
  .outbreak-tab-border{width:100px;height:27px}
  .music-now-playing{bottom:82px}
  #menu .version{display:none}
}
@media(max-height:640px) and (orientation:landscape){
  :root{--hud-bottom-height:84px;--hud-rail-bottom:101px}
  body.v13-outbreak-ready .party-panel,
  body.v13-outbreak-ready .quest-panel{max-height:245px}
  body.v13-outbreak-ready .world-modifier{display:none}
  body.v13-outbreak-ready .weapon-deck{max-width:calc(100vw - 330px)}
  body.v13-outbreak-ready .arsenal-hud{width:230px}
  #menu .menu-content{padding:18px 22px;top:43%}
  #menu .menu-side{display:none}
  #menu .menu-meta{display:none}
  #menu .version{display:none}
}