/* Ashvale Outbreak V16 — compact HUD, single loading layer, installable PWA and Rift Domain ultimate */
:root{
  --v16-safe-top:env(safe-area-inset-top,0px);
  --v16-safe-right:env(safe-area-inset-right,0px);
  --v16-safe-bottom:env(safe-area-inset-bottom,0px);
  --v16-safe-left:env(safe-area-inset-left,0px);
}

/* Only the canonical loading screen is used. The older transition layer caused stacked loaders. */
#riftTransition,.rift-transition{display:none!important}
#loading{z-index:120;background:radial-gradient(circle at 50% 45%,rgba(20,74,70,.2),rgba(1,5,7,.96) 62%)}
#loading .loading-card{width:min(420px,82vw);padding:24px;border-radius:18px}
#loading .loading-sigil{font-size:38px}
#loading .loading-card h2{font-size:17px;margin:9px 0}
#loading .loading-bar{margin:16px 0 7px}

/* Install button is intentionally hidden until the browser reports installability. */
#pwaInstallBtn[hidden],#pwaInstallTopBtn[hidden]{display:none!important}
#pwaInstallBtn{grid-column:1/-1;border-color:rgba(106,255,177,.46);background:linear-gradient(100deg,rgba(15,72,57,.92),rgba(5,29,31,.86))}
#pwaInstallBtn::before{background:#69ffb1;box-shadow:0 0 18px rgba(105,255,177,.72)}
#pwaInstallBtn b::before{content:"↓";display:inline-grid;place-items:center;width:21px;height:21px;margin-right:9px;border:1px solid rgba(255,255,255,.4);border-radius:50%}
#pwaInstallTopBtn{border-color:rgba(105,255,177,.38);color:#caffdc}

/* Compact, legible combo tracker. It stays out of the play field's center. */
#comboTrackerV16{
  position:fixed;z-index:38;left:50%;top:calc(78px + var(--v16-safe-top));transform:translateX(-50%) translateY(-8px);
  min-width:118px;max-width:220px;height:35px;padding:5px 10px;display:flex;align-items:center;gap:8px;
  border:1px solid rgba(112,245,255,.28);border-radius:999px;background:linear-gradient(105deg,rgba(3,15,19,.88),rgba(18,12,35,.8));
  box-shadow:0 10px 28px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.04);opacity:0;pointer-events:none;transition:.16s ease;
}
#comboTrackerV16.show{opacity:1;transform:translateX(-50%) translateY(0)}
#comboTrackerV16 strong{font:950 18px/1 system-ui;color:#fff;text-shadow:0 0 12px #63efff}
#comboTrackerV16 .combo-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
#comboTrackerV16 .combo-copy b{font:900 7px/1 system-ui;letter-spacing:.16em;color:#a9f6ff}
#comboTrackerV16 .combo-copy span{font:750 6px/1 system-ui;color:#95a7ac;white-space:nowrap}
#comboTrackerV16 em{margin-left:auto;font:900 9px/1 system-ui;color:#ffd36f;font-style:normal}

/* Replace the oversized center combo cinematic with a brief accent chip. */
.combo-cinematic{top:calc(119px + var(--v16-safe-top))!important;display:flex!important;align-items:center;gap:7px;padding:4px 9px;border-radius:999px;background:rgba(4,13,18,.72);border:1px solid rgba(105,238,255,.22)}
.combo-cinematic strong{font-size:16px!important;line-height:1!important}
.combo-cinematic span{font-size:6px!important;letter-spacing:.16em!important}
.combo-cinematic.pop{animation:v16ComboPop .2s ease-out!important}
@keyframes v16ComboPop{0%{transform:translateX(-50%) scale(1.18);opacity:.2}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* Center messages are smaller and vertically stacked rather than overlapping. */
.kill-banner{top:calc(119px + var(--v16-safe-top))!important;min-width:120px;padding:5px 10px;border-radius:10px;background:rgba(6,13,17,.72);border:1px solid rgba(255,132,91,.22)}
.kill-banner strong{font-size:19px!important;line-height:1!important}.kill-banner span{font-size:6px!important;letter-spacing:.13em!important}
.supply-notice{left:50%!important;right:auto!important;top:calc(157px + var(--v16-safe-top))!important;transform:translateX(-50%);max-width:min(260px,64vw);padding:7px 10px!important;border-radius:9px}
.supply-notice strong{font-size:9px!important}.supply-notice span{font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast{top:calc(76px + var(--v16-safe-top))!important;max-width:min(420px,70vw);padding:7px 12px!important;border-radius:9px;font-size:8px!important;text-align:center}
.v12-hazard-label{top:calc(160px + var(--v16-safe-top))!important;font-size:7px!important}

/* Original hero-specific Domain presentation: no copyrighted images or character names. */
#domainExpansionV16{
  --domain:#72f5ff;--domain2:#8068ff;position:fixed;inset:0;z-index:92;overflow:hidden;pointer-events:none;
  opacity:0;visibility:hidden;background:radial-gradient(circle at 50% 50%,rgba(16,31,48,.2),rgba(0,2,7,.94) 76%);
  transition:opacity .18s ease,visibility 0s linear .2s;
}
#domainExpansionV16.open{opacity:1;visibility:visible;transition:opacity .12s ease}
#domainExpansionV16::before,#domainExpansionV16::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%) scale(.04);border:2px solid var(--domain);box-shadow:0 0 34px var(--domain),inset 0 0 45px color-mix(in srgb,var(--domain2) 34%,transparent)}
#domainExpansionV16::before{width:128vmax;height:128vmax;animation:v16DomainRing 1.15s cubic-bezier(.13,.7,.15,1) forwards}
#domainExpansionV16::after{width:82vmax;height:82vmax;border-style:dashed;animation:v16DomainRing 1.45s .08s cubic-bezier(.13,.7,.15,1) forwards,v16DomainSpin 9s linear infinite}
@keyframes v16DomainRing{55%{transform:translate(-50%,-50%) scale(.48);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:.12}}
@keyframes v16DomainSpin{to{rotate:360deg}}
.domain-grid-v16{position:absolute;inset:-30%;opacity:.3;background-image:linear-gradient(var(--domain) 1px,transparent 1px),linear-gradient(90deg,var(--domain2) 1px,transparent 1px);background-size:52px 52px;transform:perspective(500px) rotateX(64deg) translateY(32%);animation:v16GridRise 1.4s ease-out both}
@keyframes v16GridRise{from{opacity:0;transform:perspective(500px) rotateX(64deg) translateY(55%) scale(.7)}to{opacity:.24;transform:perspective(500px) rotateX(64deg) translateY(28%) scale(1)}}
.domain-runes-v16{position:absolute;left:50%;top:50%;width:72vmin;height:72vmin;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--domain) 48%,transparent);border-radius:50%;box-shadow:0 0 60px color-mix(in srgb,var(--domain) 26%,transparent);animation:v16RuneSpin 7s linear infinite}
.domain-runes-v16::before,.domain-runes-v16::after{content:"✦  |  ◇  |  ⟡  |  ✧  |  ⟁  |  ✦  |  ◇  |  ⟡";position:absolute;inset:8%;display:grid;place-items:start center;border:1px dashed color-mix(in srgb,var(--domain2) 44%,transparent);border-radius:50%;padding-top:6px;color:var(--domain);font:800 clamp(8px,1.1vmin,12px)/1 monospace;letter-spacing:.65em;text-shadow:0 0 10px var(--domain)}
.domain-runes-v16::after{inset:24%;transform:rotate(180deg);padding-top:4px;color:#fff}
@keyframes v16RuneSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.domain-title-v16{position:absolute;left:50%;top:50%;width:min(760px,88vw);transform:translate(-50%,-50%) scale(.82);text-align:center;opacity:0;animation:v16DomainTitle 2.15s .16s ease both}
.domain-title-v16 small{display:block;font:850 clamp(8px,1.2vw,13px)/1 system-ui;letter-spacing:.45em;color:var(--domain);text-shadow:0 0 18px var(--domain)}
.domain-title-v16 strong{display:block;margin:10px 0 8px;font:950 clamp(32px,6.4vw,82px)/.92 system-ui;letter-spacing:.08em;color:#fff;text-shadow:0 0 18px var(--domain),0 0 60px var(--domain2)}
.domain-title-v16 span{font:750 clamp(8px,1.2vw,13px)/1.4 system-ui;letter-spacing:.12em;color:#cce7ed}
@keyframes v16DomainTitle{0%{opacity:0;transform:translate(-50%,-50%) scale(.65);filter:blur(9px)}28%,72%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08);filter:blur(4px)}}
#domainExpansionV16.domain-vanguard{--domain:#ffd36f;--domain2:#ff8a4c}
#domainExpansionV16.domain-ranger{--domain:#aaff72;--domain2:#42dcb5}
#domainExpansionV16.domain-arcanist{--domain:#75eaff;--domain2:#7567ff}
#domainExpansionV16.domain-shadow{--domain:#df75ff;--domain2:#5d3aff}
body.v16-domain-active #game{filter:saturate(1.28) contrast(1.08) brightness(.86)}
body.v16-domain-active #hud{filter:brightness(.82)}

/* Ultimate touch button shows the charge itself. */
.touch-actions [data-action=ultimate]{--ultimate-pct:0;overflow:visible!important;background:conic-gradient(from -90deg,#72f5ff calc(var(--ultimate-pct)*1%),rgba(13,31,38,.88) 0)!important;border-color:rgba(143,249,255,.72)!important;box-shadow:0 0 18px rgba(111,233,255,.2),inset 0 0 0 5px rgba(2,10,14,.8)!important}
.touch-actions [data-action=ultimate]::after{content:attr(data-charge);position:absolute;left:50%;top:-11px;transform:translateX(-50%);padding:2px 5px;border-radius:999px;background:rgba(2,10,14,.88);font:900 6px/1 system-ui;color:#cfffff;letter-spacing:.05em}
.touch-actions [data-action=ultimate].ready{animation:v16UltimateReady .72s ease-in-out infinite alternate;filter:brightness(1.22)}
@keyframes v16UltimateReady{to{box-shadow:0 0 27px rgba(255,211,111,.7),inset 0 0 0 4px rgba(2,10,14,.64)}}
.ultimate-wrap[role=button]{cursor:pointer;outline:none;border-radius:9px;padding:3px 6px;transition:.18s ease}
.ultimate-wrap[role=button]:hover,.ultimate-wrap[role=button]:focus-visible{background:rgba(105,238,255,.08);box-shadow:0 0 0 1px rgba(105,238,255,.25)}
.ultimate-wrap.ready{animation:v16DesktopUltimateReady .7s ease-in-out infinite alternate}
@keyframes v16DesktopUltimateReady{to{filter:brightness(1.28);text-shadow:0 0 12px #ffd36f}}

/* Desktop HUD trims; game information stays near edges. */
@media (min-width:901px){
  body.v16-ui .topbar{height:58px;top:8px;padding:0 13px}
  body.v16-ui .party-panel,body.v16-ui .quest-panel{top:78px}
  body.v16-ui .party-panel{width:230px;padding:12px}
  body.v16-ui .quest-panel{width:242px;padding:12px}
  body.v16-ui .bottom-hud{height:84px;padding:8px 12px}
  body.v16-ui .skill{width:58px;height:62px}
  body.v16-ui .skill img{width:31px;height:31px}
}

/* Coarse pointer / mobile landscape: reserve the center for actual play. */
@media (pointer:coarse),(max-width:900px){
  body.v16-ui .topbar{height:36px!important;left:calc(4px + var(--v16-safe-left))!important;right:calc(4px + var(--v16-safe-right))!important;top:calc(4px + var(--v16-safe-top))!important;padding:0 6px!important;border-radius:9px!important}
  body.v16-ui .mission-line{font-size:7px!important;letter-spacing:.07em!important}
  body.v16-ui #pauseBtn,body.v16-ui #mobileHudToggle{min-height:29px!important;height:29px!important;min-width:42px!important;font-size:7px!important}

  body.v16-ui .party-panel{top:calc(44px + var(--v16-safe-top))!important;left:calc(4px + var(--v16-safe-left))!important;width:42px!important;padding:3px!important;border-radius:11px!important}
  body.v16-ui .party-row{width:34px!important;height:34px!important;border-radius:9px!important}
  body.v16-ui .party-avatar{width:28px!important;height:28px!important;background-size:112px 112px!important}

  body.v16-ui .quest-panel{top:calc(44px + var(--v16-safe-top))!important;right:calc(4px + var(--v16-safe-right))!important;width:174px!important;height:62px!important;max-height:62px!important;padding:5px!important;grid-template-columns:minmax(0,1fr) 58px!important;grid-template-rows:auto auto 4px auto!important;gap:2px 5px!important;border-radius:10px!important}
  body.v16-ui .quest-panel .eyebrow{font-size:5px!important}.quest-panel h2{font-size:9px!important}
  body.v16-ui .quest-count{font-size:6px!important}.quest-panel .quest-progress{height:3px!important}
  body.v16-ui .asc-minimap{width:58px!important;height:48px!important;min-width:58px!important;border-radius:6px!important}

  body.v16-ui .survival-hud{top:calc(44px + var(--v16-safe-top))!important;left:52px!important;right:184px!important;height:28px!important;padding:3px 6px!important;gap:4px!important;border-radius:8px!important;opacity:.82}
  body.v16-ui .survival-title strong{font-size:7px!important}.survival-meter>div{height:4px!important}

  body.v16-ui .weapon-deck{bottom:calc(49px + var(--v16-safe-bottom))!important;width:min(48vw,430px)!important;max-width:min(48vw,430px)!important;height:39px!important;min-height:39px!important;padding:2px!important;gap:2px!important}
  body.v16-ui .weapon-slot{flex-basis:40px!important;width:40px!important;height:34px!important}
  body.v16-ui .weapon-slot img{width:21px!important;height:21px!important}.weapon-slot span{font-size:4.5px!important}

  body.v16-ui .bottom-hud{left:calc(96px + var(--v16-safe-left))!important;right:calc(166px + var(--v16-safe-right))!important;bottom:calc(4px + var(--v16-safe-bottom))!important;height:41px!important;padding:3px 6px!important;border-radius:9px!important;opacity:.86}
  body.v16-ui .leader-card{grid-template-columns:32px 1fr!important;gap:5px!important}.leader-portrait{width:30px!important;height:30px!important;background-size:120px 120px!important}
  body.v16-ui .leader-stats>div:first-child{font-size:6px!important;margin-bottom:1px!important}.bar{height:7px!important;margin:1px 0!important}.bar span{font-size:5px!important}

  body.v16-ui .joystick{left:calc(6px + var(--v16-safe-left))!important;bottom:calc(6px + var(--v16-safe-bottom))!important;width:84px!important;height:84px!important;opacity:.76}
  body.v16-ui .joy-knob{width:34px!important;height:34px!important;left:25px!important;top:25px!important}
  body.v16-ui .touch-actions{right:calc(5px + var(--v16-safe-right))!important;bottom:calc(4px + var(--v16-safe-bottom))!important;width:154px!important;height:132px!important}
  body.v16-ui .touch-actions button{width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important;opacity:.8!important}
  body.v16-ui .touch-actions button b{font-size:13px!important}.touch-actions button small{font-size:5px!important}
  body.v16-ui .touch-actions [data-action=skill1]{left:3px!important;top:25px!important}
  body.v16-ui .touch-actions [data-action=skill2]{left:43px!important;top:3px!important}
  body.v16-ui .touch-actions [data-action=skill3]{left:83px!important;top:20px!important}
  body.v16-ui .touch-actions [data-action=reload]{left:0!important;top:69px!important}
  body.v16-ui .touch-actions [data-action=dodge]{left:43px!important;bottom:0!important}
  body.v16-ui .touch-actions [data-action=ultimate]{display:block!important;left:84px!important;top:65px!important;width:45px!important;height:45px!important;z-index:4}
  body.v16-ui .touch-actions .attack{width:58px!important;height:58px!important;right:0!important;bottom:0!important;z-index:3}
  body.v16-ui .touch-actions [data-action=weapon]{display:none!important}

  body.v16-ui #mobileAmmoChip{display:grid!important;right:calc(6px + var(--v16-safe-right))!important;bottom:calc(143px + var(--v16-safe-bottom))!important;width:116px!important;min-height:34px!important;grid-template-columns:27px 1fr auto!important;padding:4px 6px!important;border-radius:9px!important;opacity:.76}
  body.v16-ui #mobileAmmoChip img{width:25px!important;height:25px!important}.mobile-gun-name small{display:none!important}.mobile-gun-name strong{font-size:7px!important}.mobile-ammo b{font-size:15px!important}.mobile-ammo span{font-size:7px!important}

  body.v16-ui .hint{bottom:calc(91px + var(--v16-safe-bottom))!important;padding:4px 8px!important;font-size:6px!important}
  body.v16-ui .kill-banner{top:calc(78px + var(--v16-safe-top))!important}
  body.v16-ui .supply-notice{top:calc(108px + var(--v16-safe-top))!important}
  body.v16-ui #comboTrackerV16{top:calc(77px + var(--v16-safe-top));height:29px;min-width:100px;padding:3px 8px}
  body.v16-ui #comboTrackerV16 strong{font-size:14px}.combo-copy b{font-size:6px!important}.combo-copy span{display:none!important}
  body.v16-ui .combo-cinematic{display:none!important}

  /* Menu fits short mobile landscape and no longer sits behind the tab bar. */
  #menu .menu-content{top:43%!important;padding:15px 18px 72px!important;max-height:92vh;overflow:auto;border-radius:16px!important}
  #menu .studio{font-size:7px!important;margin-bottom:8px!important}.title-mark>span{font-size:31px!important}
  #menu .title-mark h1{font-size:clamp(36px,7.2vw,58px)!important}.title-mark h2{font-size:clamp(21px,4vw,34px)!important;margin-top:7px!important}
  #menu .tagline{font-size:9px!important;margin:10px 0 12px!important}.menu-buttons{gap:5px!important}
  #menu .hero-btn{min-height:45px!important;padding:9px 12px!important}.hero-btn b{font-size:10px!important}.hero-btn small{font-size:7px!important}
  .outbreak-tab-menu{bottom:8px!important;min-height:52px!important;width:min(500px,90vw)!important;padding:0 16px!important;border-radius:17px!important}
  .outbreak-tab-item{min-width:42px!important;padding:12px 3px 9px!important}.outbreak-tab-icon{width:22px!important;height:22px!important}
  .outbreak-tab-item::before{width:40px!important;height:40px!important}.outbreak-tab-item.active{transform:translate3d(0,-11px,0)!important}
  .outbreak-tab-border{width:84px!important;height:23px!important}.music-now-playing{display:none!important}
}

@media (pointer:coarse) and (max-height:520px){
  body.v16-ui .quest-panel{width:160px!important;grid-template-columns:minmax(0,1fr) 52px!important}.asc-minimap{width:52px!important;min-width:52px!important}
  body.v16-ui .survival-hud{right:169px!important}
  body.v16-ui .party-row:nth-child(n+4){display:none!important}
  body.v16-ui #mobileAmmoChip{display:none!important}
  #menu .menu-content{left:3vw!important;width:94vw!important;top:41%!important}
}

@media (prefers-reduced-motion:reduce){
  #domainExpansionV16::before,#domainExpansionV16::after,.domain-grid-v16,.domain-runes-v16,.domain-title-v16{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Touch controls must never appear over menu, class selection, loading, or result screens. */
body:has(.screen.active) #touchControls{display:none!important}
@media (pointer:coarse),(max-width:900px){
  body.v16-ui .touch-actions{width:184px!important}
  body.v16-ui .touch-actions [data-action=ultimate]{left:78px!important}
  body.v16-ui .bottom-hud{right:calc(196px + var(--v16-safe-right))!important}
}