/* styles.css */
:root{
  --bg0:#070A12;
  --bg1:#0B1022;
  --glow1: rgba(98,242,255,.10);
  --glow2: rgba(154,108,255,.10);
  --panel:#0B1020cc;
  --panel2:#0B1020f2;
  --line:#1C2A5A;
  --text:#EAF0FF;
  --muted:#A8B6E6;
  --accent:#62F2FF;
  --accent2:#9A6CFF;
  --good:#6DFF9A;
  --warn:#FFCF5B;
  --bad:#FF5B7D;
  --shadow: 0 20px 50px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 26px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 20% 15%, var(--glow1), transparent 55%),
    radial-gradient(900px 700px at 85% 35%, var(--glow2), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family:var(--sans);
}

.layout{display:block; width:100%; height:100%;}
.gameWrap{
  position:relative;
  flex:1;
  height:100%;
  overflow:hidden;
}
#game{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background: transparent;
}
.screenFx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
  mix-blend-mode: soft-light;
  opacity:0.6;
  animation: screenNoise 6s steps(10) infinite;
}
@keyframes screenNoise{
  0%{background-position:0 0, 0 0}
  100%{background-position:0 0, 120px 60px}
}
/* CODEX CHANGE: Echo Cascade visual intensity hooks tied to combo tiers. */
.screenFx.comboTier10{
  opacity:0.72;
  animation: screenNoise 6s steps(10) infinite, comboScreenPulse 1.8s ease-in-out infinite;
}
.screenFx.comboTier15{
  opacity:0.82;
  animation: screenNoise 6s steps(10) infinite, comboScreenPulseStrong 1.2s ease-in-out infinite;
}
@keyframes comboScreenPulse{
  0%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.035) saturate(1.06)}
  100%{filter:brightness(1) saturate(1)}
}
@keyframes comboScreenPulseStrong{
  0%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.06) saturate(1.12)}
  100%{filter:brightness(1) saturate(1)}
}
.mapLogo{
  position:absolute;
  top:14px;
  left:50%;
  width:120px;
  height:auto;
  z-index:1;
  pointer-events:none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45));
}

.landingMenu{
  position:fixed;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  background:
    radial-gradient(1100px 700px at 20% 20%, rgba(98,242,255,.14), transparent 60%),
    radial-gradient(1000px 700px at 80% 80%, rgba(255,91,125,.12), transparent 62%),
    rgba(5,8,18,.72);
  backdrop-filter: blur(8px);
}
.landingMenu.hidden{display:none}
.landingCard{
  position:relative;
  width:min(480px, 92vw);
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(98,242,255,.35);
  background:
    radial-gradient(300px 140px at 50% -30px, rgba(98,242,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(11,16,34,.95), rgba(8,12,24,.88));
  box-shadow: var(--shadow), 0 0 18px rgba(98,242,255,.16);
  overflow:hidden;
}
.landingCard > *{
  position:relative;
  z-index:1;
}
.landingCard::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:14px;
  border:1px solid rgba(98,242,255,.14);
  pointer-events:none;
  z-index:2;
}
.landingCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(6,10,22,.55), rgba(6,10,22,.75)),
    center / cover no-repeat url("assets/images/menubackground.png"),
    radial-gradient(120px 60px at 0 0, rgba(98,242,255,.12), transparent 70%) top left / 50% 50% no-repeat,
    radial-gradient(120px 60px at 100% 100%, rgba(154,108,255,.1), transparent 70%) bottom right / 50% 50% no-repeat;
  opacity:1;
}
.landingLogo{
  width:320px;
  max-width:92%;
  display:block;
  margin:0 auto 16px auto;
}
.landingTitle{
  text-align:center;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:20px;
  opacity:1;
}
#landingMainSection{
  margin-top:6px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(98,242,255,.2);
  position:relative;
  background: linear-gradient(180deg, rgba(7,10,18,.56), rgba(7,10,18,.74));
}
.landingSub{
  margin-top:6px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  opacity:1;
}
.landingTag{
  margin-top:6px;
  text-align:center;
  color:#FFFFFF;
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.landingActions{
  margin-top:16px;
  display:grid;
  gap:10px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(98,242,255,.24);
  background:
    linear-gradient(180deg, rgba(5,9,22,.56), rgba(5,9,22,.76));
}
.landingActions::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(5,9,22,.45), rgba(5,9,22,.62));
  opacity:1;
}
.landingActions::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(98,242,255,.14), transparent 24%, transparent 76%, rgba(154,108,255,.1));
}
.landingActions .btn{
  width:100%;
  min-height:42px;
  justify-content:center;
  backdrop-filter: blur(2px);
  opacity:1;
}
.landingCommentCard{
  width:min(560px, 94vw);
}
.landingCommentInput{
  margin-top:14px;
  width:100%;
  min-height:180px;
  resize:vertical;
  border-radius:12px;
  border:1px solid rgba(98,242,255,.3);
  background: rgba(7,10,18,.75);
  color:var(--text);
  padding:10px 12px;
  font:inherit;
}
.landingCommentActions{
  margin-top:10px;
  display:flex;
  gap:8px;
}

#hud{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  z-index:3;
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
}

.topbar{
  pointer-events:none;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  padding:14px 14px 10px 14px;
}

.brand{
  pointer-events:none;
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px 10px;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(11,16,34,.85), rgba(11,16,34,.55));
  border:1px solid rgba(28,42,90,.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.topLogo{
  width:140px;
  height:auto;
  display:block;
}
.logoMark{
  width:38px; height:38px; border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(98,242,255,.9), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(154,108,255,.9), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(98,242,255,.18), rgba(154,108,255,.12));
  border:1px solid rgba(98,242,255,.25);
  box-shadow: 0 0 0 1px rgba(154,108,255,.18) inset, 0 12px 30px rgba(0,0,0,.35);
}
.brandText .title{
  font-weight:800;
  letter-spacing:.16em;
  font-size:12px;
}
.brandText .subtitle{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}

.statRow{
  pointer-events:none;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.pill{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(11,16,34,.80), rgba(11,16,34,.48));
  border:1px solid rgba(28,42,90,.85);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.pill .k{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
}
.statIcon{
  width:20px;
  height:20px;
  display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.pill .v{font-family:var(--mono); font-size:14px}
.pill .slash{opacity:.5; padding:0 4px}
.pill.warn{border-color: rgba(255,207,91,.38)}
.pill.warn .v{color: var(--warn)}
.value-low{color: var(--bad)}
.value-mid{color: var(--warn)}
.value-high{color: var(--good)}
.seedPill{
  opacity:0.7;
}
.seedPill .v{
  font-size:12px;
}
.anomalyBar{
  pointer-events:none;
  position:absolute;
  top:72px;
  left:50%;
  transform: translateX(-50%);
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(98,242,255,.35);
  background: linear-gradient(180deg, rgba(11,16,34,.75), rgba(11,16,34,.45));
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
}
.anomalyBar .k{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-right:6px;
}
.anomalyBar .v{
  color: var(--accent);
}

.controls{
  margin-left:auto;
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding-right:56px;
}
.controls .btn{
  text-transform:uppercase;
  letter-spacing:.08em;
  border-color: rgba(98,242,255,.25);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.controls .btn.primary{
  box-shadow: 0 10px 30px rgba(98,242,255,.16), 0 14px 26px rgba(0,0,0,.35);
}
.controls .btn.danger{
  box-shadow: 0 10px 30px rgba(255,91,125,.12), 0 14px 26px rgba(0,0,0,.35);
}
.pill.intermissionPulse{
  border-color: rgba(98,242,255,.55);
  animation: intermissionPulse 1.2s ease-in-out infinite;
}
@keyframes intermissionPulse{
  0%{box-shadow:0 0 0 rgba(98,242,255,0)}
  50%{box-shadow:0 0 18px rgba(98,242,255,.35)}
  100%{box-shadow:0 0 0 rgba(98,242,255,0)}
}

#anomalyPill.active{
  border-color: rgba(154,108,255,.65);
  box-shadow: 0 0 20px rgba(154,108,255,.35);
}

/* CODEX CHANGE: Echo Cascade HUD panel and timer bar. */
.comboCascade{
  pointer-events:none;
  position:absolute;
  top:78px;
  left:0;
  right:0;
  width:min(280px, calc(100vw - 28px));
  margin:0 auto;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(98,242,255,.32);
  background: linear-gradient(180deg, rgba(11,16,34,.84), rgba(11,16,34,.55));
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
  backdrop-filter: blur(8px);
  opacity:0;
  transform: translateY(-6px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.comboCascade.active{
  opacity:1;
  transform: translateY(0) scale(1);
}
.comboCascade.tier10{
  border-color: rgba(154,108,255,.46);
  box-shadow: 0 0 18px rgba(154,108,255,.24), 0 10px 24px rgba(0,0,0,.3);
}
.comboCascade.tier15{
  border-color: rgba(255,207,91,.6);
  box-shadow: 0 0 20px rgba(255,207,91,.28), 0 10px 24px rgba(0,0,0,.3);
}
.comboTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.comboTitle{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.comboCount{
  display: block;
  font-family: var(--sans);
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
  color: #ffcf5b;
  text-shadow:
    0 0 10px rgba(255,207,91,.62),
    0 0 30px rgba(255,207,91,.34),
    0 2px 10px rgba(0,0,0,.42);
  animation: comboOpacityPulse 1.15s ease-out infinite;
}
.comboBar{
  margin-top:8px;
  width:100%;
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(7,10,18,.65);
  border:1px solid rgba(28,42,90,.7);
}
.comboBarFill{
  width:100%;
  height:100%;
  transform-origin:left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(98,242,255,.9), rgba(154,108,255,.9));
  box-shadow: 0 0 12px rgba(98,242,255,.4);
}

.abilitiesBar{
  pointer-events:auto;
  position:absolute;
  left:50%;
  bottom:14px;
  transform: translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:8px 14px 10px 14px;
  flex-wrap:wrap;
  z-index:4;
  background: rgba(11,16,34,.55);
  border:1px solid rgba(28,42,90,.75);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.abilitiesTitle{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  width:100%;
  text-align:center;
}
.abilitiesRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  justify-content:center;
}
.abilityBtn{
  border:1px solid rgba(28,42,90,.9);
  box-sizing:border-box;
  background: linear-gradient(180deg, rgba(12,18,36,.85), rgba(9,13,27,.85));
  color:var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  min-width:160px;
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform .06s ease, filter .15s ease, border-color .15s ease;
}
.abilityBtn.ready{
  border-color: rgba(98,242,255,.55);
  box-shadow: 0 0 14px rgba(98,242,255,.25), 0 8px 20px rgba(0,0,0,.25);
  animation: abilityReadyPulse 1.6s ease-in-out infinite;
}
.abilityBtn.ready::before{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle, rgba(98,242,255,0.22) 0%, rgba(98,242,255,0) 60%);
  opacity:.9;
  animation: abilityReadyGlow 2.2s ease-in-out infinite;
  pointer-events:none;
}
.abilityBtn::after{
  content:"";
  position:absolute;
  inset:0;
  width: calc(var(--cd-pct, 0) * 100%);
  background: linear-gradient(90deg, rgba(98,242,255,0.18), rgba(154,108,255,0.12));
  opacity: .9;
  pointer-events: none;
  transition: width .1s linear;
}
.abilityBtn > *{
  position: relative;
  z-index: 1;
}
.abilityBtn:hover{filter:brightness(1.08); border-color: rgba(98,242,255,.45)}
.abilityBtn:active{transform: translateY(1px)}
.abilityBtn[disabled]{opacity:.45; cursor:not-allowed; filter:saturate(.8)}
.abilityTop{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.04em;
}
.abilityKey{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background: rgba(98,242,255,.12);
  border:1px solid rgba(98,242,255,.45);
  font-family:var(--mono);
  font-size:12px;
  color:var(--accent);
}
.abilityName{
  font-size:12px;
  text-transform:uppercase;
}
.abilityMeta{
  font-size:11px;
  color:var(--muted);
  font-family:var(--mono);
}

@keyframes abilityReadyPulse{
  0%{transform:scale(1); filter:brightness(1)}
  50%{transform:scale(1.02); filter:brightness(1.12)}
  100%{transform:scale(1); filter:brightness(1)}
}
@keyframes abilityReadyGlow{
  0%{opacity:.35; transform:scale(0.9)}
  50%{opacity:.7; transform:scale(1)}
  100%{opacity:.35; transform:scale(0.9)}
}

.btn{
  border:1px solid rgba(28,42,90,.9);
  background: linear-gradient(180deg, rgba(13,20,44,.9), rgba(9,13,27,.85));
  color:var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .06s ease, filter .15s ease, border-color .15s ease;
  font-weight:700;
  letter-spacing:.04em;
}
.btn:hover{filter:brightness(1.08); border-color: rgba(98,242,255,.45)}
.btn:active{transform: translateY(1px)}
.btn[disabled]{opacity:.45; cursor:not-allowed; filter:saturate(.8)}
.btnFlashRed{
  animation: btnFlashRed .5s ease;
}
@keyframes btnFlashRed{
  0%{box-shadow:0 0 0 rgba(255,91,125,0)}
  40%{box-shadow:0 0 18px rgba(255,91,125,.75)}
  100%{box-shadow:0 0 0 rgba(255,91,125,0)}
}

.btn.primary{
  border-color: rgba(98,242,255,.55);
  background:
    radial-gradient(120px 60px at 40% 10%, rgba(98,242,255,.35), transparent 70%),
    linear-gradient(180deg, rgba(15,28,60,.92), rgba(9,13,27,.85));
}
.btn.danger{
  border-color: rgba(255,91,125,.55);
  background:
    radial-gradient(120px 60px at 40% 10%, rgba(255,91,125,.25), transparent 70%),
    linear-gradient(180deg, rgba(30,10,18,.92), rgba(9,13,27,.85));
}
.btn.ghost{
  background: rgba(11,16,34,.45);
}
.audioGroup{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.audioBtn{
  display:flex;
  align-items:center;
  gap:8px;
  padding-right:14px;
}
.settingsSection .audioBtn{
  width:100%;
  justify-content:center;
  margin-bottom:10px;
}
.audioSliders{
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px 10px;
  border-radius: 12px;
  background: rgba(11,16,34,.45);
  border:1px solid rgba(28,42,90,.7);
}
.audioCtl{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.audioCtl input[type="range"]{
  width:90px;
  accent-color: var(--accent);
}
.visualSettingsRow{
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.audioCtl input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color: var(--accent);
}
.audioCtl select{
  min-width:84px;
  padding:3px 6px;
  border-radius:8px;
  border:1px solid rgba(28,42,90,.75);
  background: rgba(11,16,34,.65);
  color: var(--text);
  font-size:11px;
}
.audioIcon{
  width:14px;
  height:14px;
  display:inline-block;
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(98,242,255,.85), rgba(154,108,255,.85));
  position:relative;
  box-shadow: 0 0 0 1px rgba(98,242,255,.25) inset;
}
.audioIcon::before{
  content:"";
  position:absolute;
  left:-6px;
  top:3px;
  width:0; height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-right:6px solid rgba(98,242,255,.85);
}
.audioIcon::after{
  content:"";
  position:absolute;
  right:-6px;
  top:3px;
  width:8px;
  height:8px;
  border:2px solid rgba(154,108,255,.85);
  border-left:0;
  border-bottom:0;
  transform: rotate(45deg);
  opacity:.85;
}
.audioBtn.muted .audioIcon{
  background: rgba(148,160,196,.45);
  box-shadow: 0 0 0 1px rgba(148,160,196,.35) inset;
}
.audioBtn.muted .audioIcon::before{
  border-right-color: rgba(148,160,196,.7);
}
.audioBtn.muted .audioIcon::after{
  right:2px;
  top:2px;
  width:10px;
  height:10px;
  border:0;
  opacity:1;
  background:
    linear-gradient(135deg, transparent 45%, rgba(255,91,125,.95) 45%, rgba(255,91,125,.95) 55%, transparent 55%);
}
.audioBtn .audioIcon::marker{
  content:"";
}

.speed{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 16px;
  background: rgba(11,16,34,.55);
  border:1px solid rgba(28,42,90,.85);
  backdrop-filter: blur(10px);
}
.speedLabel{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.seg{
  display:flex;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(28,42,90,.85);
}
.segBtn{
  border:0;
  background: rgba(8,12,24,.9);
  color:var(--muted);
  padding:8px 10px;
  cursor:pointer;
  font-weight:800;
  font-family:var(--mono);
}
.segBtn:hover{color:var(--text)}
.segBtn.active{
  color: var(--bg0);
  background: linear-gradient(90deg, rgba(98,242,255,.95), rgba(154,108,255,.95));
}

.panels{
  pointer-events:none;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 8px 14px 14px 14px;
  flex:1;
  min-height:0;
}

/* Upgrades now use a floating turret HUD; keep only build side panel visible */
.panel.right{
  display:none;
}

.panel{
  pointer-events:auto;
  width: 360px;
  max-width: 34vw;
  min-width: 260px;
  height: 100%;
  display:flex;
  flex-direction:column;
  border-radius: var(--radius);
  background: var(--panel);
  border:1px solid rgba(28,42,90,.85);
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden;
  transition: width .36s cubic-bezier(.22,.78,.22,1), box-shadow .36s ease, transform .36s ease;
  will-change: width;
}

.panelHeader{
  padding:14px 14px 10px 14px;
  border-bottom:1px solid rgba(28,42,90,.7);
  background: linear-gradient(180deg, rgba(11,16,34,.70), rgba(11,16,34,.35));
  position:relative;
  transition: opacity .32s ease, transform .32s ease;
}
.panelTitle{
  font-weight:900;
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
}
.panelHint{
  margin-top:6px;
  color: var(--muted);
  font-size:12px;
}
.panelActions{
  position:absolute;
  right:10px;
  top:10px;
  display:flex;
  gap:6px;
}
.panelBtn{
  border:1px solid rgba(28,42,90,.85);
  background: rgba(11,16,34,.55);
  color:var(--muted);
  width:26px;
  height:26px;
  padding:0;
  border-radius: 8px;
  cursor:pointer;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.panelBtn[aria-pressed="true"]{
  color: var(--text);
  border-color: rgba(98,242,255,.55);
}
.pinIcon{
  position:relative;
  width:12px;
  height:12px;
  display:block;
}
.pinIcon::before{
  content:"";
  position:absolute;
  left:1px; top:1px;
  width:10px; height:6px;
  border:2px solid rgba(154,108,255,.9);
  border-bottom:0;
  border-radius:6px 6px 0 0;
}
.pinIcon::after{
  content:"";
  position:absolute;
  left:5px; top:6px;
  width:2px; height:6px;
  background: rgba(98,242,255,.95);
  box-shadow: 0 0 0 1px rgba(98,242,255,.35);
}
.panelBtn[aria-pressed="true"] .pinIcon{
  transform: rotate(-35deg);
}
.panel.collapsed{
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  transform: translateZ(0);
}
.panel.collapsed .panelHint,
.panel.collapsed .panelFooter,
.panel.collapsed .selectionBody{
  display:none;
}
.panel.collapsed .panelHeader{
  padding-bottom:14px;
  transform: translateY(-2px);
}
.panel.collapsed .panelTitle{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Collapsed build panel keeps icon picker */
.panel.left.collapsed .buildList{
  display:block;
  padding:10px 8px;
}
.panel.left.collapsed .buildItem{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8px 6px;
  margin-bottom:8px;
}
.panel.left.collapsed .buildMeta{
  display:none;
}
.panel.left.collapsed .buildIcon{
  width:36px;
  height:36px;
  border-radius: 12px;
}
.panelFooter{
  padding:12px 14px;
  border-top:1px solid rgba(28,42,90,.7);
  background: rgba(11,16,34,.30);
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}

.buildList{
  padding:12px;
  overflow:auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(98,242,255,.4) rgba(7,10,18,.35);
}
.buildItem{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius: 16px;
  border:1px solid rgba(28,42,90,.70);
  background: rgba(7,10,18,.42);
  cursor:pointer;
  transition: transform .06s ease, border-color .15s ease, filter .15s ease;
}
.buildItem:hover{
  filter:brightness(1.06);
  border-color: rgba(98,242,255,.35);
}
.buildItem:active{transform: translateY(1px)}
.buildItem.selected{
  border-color: rgba(98,242,255,.55);
  box-shadow: 0 0 0 1px rgba(98,242,255,.18) inset;
}
.buildItem.locked{
  opacity:0.55;
  filter: grayscale(0.25);
  pointer-events:none;
  cursor:not-allowed;
}
.buildItem.poor{
  opacity:0.55;
  filter: grayscale(0.15);
}
.buildItem .lockTag{
  margin-top:6px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--warn);
  text-transform:uppercase;
}
.buildIcon{
  width:44px;
  height:44px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(98,242,255,.45), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(154,108,255,.35), transparent 62%),
    rgba(11,16,34,.55);
  border:1px solid rgba(98,242,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
}
.buildIcon::after{
  content:"";
  position:absolute;
  inset:8px;
  background: linear-gradient(180deg, rgba(98,242,255,.95), rgba(154,108,255,.85));
  opacity:.9;
}
.buildIcon[data-icon="PULSE"]::after{
  clip-path: circle(50% at 50% 50%);
}
.buildIcon[data-icon="ARC"]::after{
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.buildIcon[data-icon="FROST"]::after{
  clip-path: polygon(50% 0, 75% 15%, 100% 50%, 75% 85%, 50% 100%, 25% 85%, 0 50%, 25% 15%);
}
.buildIcon[data-icon="LENS"]::after{
  clip-path: ellipse(50% 35% at 50% 50%);
}
.buildIcon[data-icon="MORTAR"]::after{
  clip-path: inset(0 0 0 0 round 6px);
}
.buildIcon[data-icon="VENOM"]::after{
  clip-path: polygon(50% 0, 80% 20%, 90% 55%, 50% 100%, 10% 55%, 20% 20%);
}
.buildIcon[data-icon="NEEDLE"]::after{
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.buildIcon[data-icon="AURA"]::after{
  clip-path: circle(50% at 50% 50%);
}
.buildIcon[data-icon="DRONE"]::after{
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.buildIcon[data-icon="TRAP"]::after{
  clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%);
}
.buildMeta{flex:1; min-width:0}
.buildName{
  font-weight:900;
  letter-spacing:.04em;
}
.buildDesc{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.25;
}
.buildCost{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color: var(--text);
  font-family:var(--mono);
  font-size:12px;
}
.tag{
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: var(--muted);
  border:1px solid rgba(28,42,90,.85);
  padding:4px 8px;
  border-radius: 999px;
}

.selectionBody{
  padding:12px;
  overflow:auto;
  height:100%;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(98,242,255,.4) rgba(7,10,18,.35);
}

.buildList::-webkit-scrollbar,
.selectionBody::-webkit-scrollbar{
  width:10px;
}
.buildList::-webkit-scrollbar-track,
.selectionBody::-webkit-scrollbar-track{
  background: rgba(7,10,18,.35);
  border-radius: 999px;
  border:1px solid rgba(28,42,90,.55);
}
.buildList::-webkit-scrollbar-thumb,
.selectionBody::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(98,242,255,.55), rgba(154,108,255,.45));
  border-radius: 999px;
  border:2px solid rgba(7,10,18,.35);
  box-shadow: 0 0 6px rgba(98,242,255,.35);
}
.buildList::-webkit-scrollbar-thumb:hover,
.selectionBody::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(98,242,255,.8), rgba(154,108,255,.65));
}
.targetRow{
  margin-top:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(28,42,90,.7);
  background: rgba(7,10,18,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.targetLabel{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.targetSelect{
  background: rgba(11,16,34,.65);
  color:var(--text);
  border:1px solid rgba(28,42,90,.85);
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
  font-family:var(--mono);
}

.turretStateBar{
  display:none !important;
}
.turretStateBar.hidden{display:none}
.turretStateBar .k{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.turretStateBar .v{
  color:var(--text);
  font-weight:700;
}

.turretHud{
  position:absolute;
  z-index:9;
  width:min(320px, 88vw);
  pointer-events:auto;
  border-radius:14px;
  border:1px solid rgba(98,242,255,.46);
  background: linear-gradient(180deg, rgba(11,16,34,.82), rgba(7,10,18,.78));
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  color: #F4F8FF;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
}
.turretHud.hidden{display:none}
.turretHudBody{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.turretHudFooter{
  border-top:1px solid rgba(28,42,90,.8);
  padding:8px 10px;
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.turretHudFooter #turretHudSellBtn,
.turretHudFooter #turretHudCloseBtn{
  flex:1 1 0;
  min-width:0;
}
.turretHud .selHeaderRow{
  align-items:center;
}
.turretHud .statGrid{
  margin-top:0;
  gap:9px;
}
.turretHud .statCard{
  border-radius:12px;
  padding:9px 10px;
}
.turretHud .targetRow{
  margin-top:0;
  padding:9px 10px;
}
.turretHud .modRow{
  gap:8px;
}
.turretHud .modChoice{
  padding:8px;
  border-radius:12px;
}
.turretHud .modName{
  font-size:14px;
  color: #F4F8FF;
  font-weight:800;
}
.turretHud .modDesc{
  font-size:13px;
  color: #F0F6FF;
  line-height:1.42;
  font-weight:600;
}
.turretHud .modDelta{
  font-size:12px;
  color: #E9F2FF;
  opacity:1;
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
}
.turretHud .modBtnRow{
  margin-top:8px;
}
.turretHud .modBtnRow .btn{
  padding:12px 14px;
  border-radius:10px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.turretHud .modCost{
  color: #FFDF3A;
  text-shadow: 0 0 12px rgba(255,223,58,.45);
  font-weight:900;
}
.turretHud .upTitle{
  color:#F4F8FF;
  font-size:13px;
}
.turretHud .targetLabel,
.turretHud .statCard .k{
  color:#D9E8FF;
  font-size:12px;
}
.turretHud .statCard .v,
.turretHud .selName,
.turretHud .selLevel{
  color:#F4F8FF;
}
.turretHud .selName{
  font-size:18px;
}
.turretHud .selLevel{
  font-size:14px;
}
.turretHud .statCard .v{
  font-size:24px;
  line-height:1.05;
  font-weight:800;
}
.turretHud .targetLabel{
  font-size:13px;
  font-weight:700;
}
.turretHud .targetSelect{
  font-size:14px;
  font-weight:700;
  min-height:36px;
}
#turretHudCloseBtn{
  border-color: rgba(109,255,154,.55);
  color: var(--text);
  background:
    radial-gradient(120px 60px at 40% 10%, rgba(109,255,154,.25), transparent 70%),
    linear-gradient(180deg, rgba(10,30,18,.92), rgba(9,13,27,.85));
  box-shadow: 0 10px 30px rgba(109,255,154,.12), 0 14px 26px rgba(0,0,0,.35);
}
#turretHudCloseBtn:hover{
  filter:brightness(1.08);
  border-color: rgba(109,255,154,.75);
}

.emptyState{
  margin-top:24px;
  padding:16px;
  border-radius: 18px;
  border:1px dashed rgba(28,42,90,.85);
  background: rgba(7,10,18,.30);
}
.emptyGlyph{
  width:56px; height:56px; border-radius: 20px;
  margin-bottom:10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(98,242,255,.35), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(154,108,255,.30), transparent 62%),
    rgba(11,16,34,.55);
  border:1px solid rgba(98,242,255,.18);
}
.emptyTitle{font-weight:900; letter-spacing:.04em}
.emptyText{margin-top:6px; color:var(--muted); font-size:12px; line-height:1.35}

.selHeaderRow{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.selName{
  font-weight:950;
  font-size:14px;
  letter-spacing:.05em;
}
.selLevel{
  font-family:var(--mono);
  color:var(--muted);
  font-size:12px;
}

.statGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.statCard{
  padding:10px;
  border-radius: 16px;
  border:1px solid rgba(28,42,90,.75);
  background: rgba(7,10,18,.38);
}
.statCard .k{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.statCard .v{
  margin-top:6px;
  font-family:var(--mono);
  font-size:13px;
}

.upgrades{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(28,42,90,.6);
}
.upTitle{
  font-weight:900;
  letter-spacing:.10em;
  font-size:12px;
  text-transform:uppercase;
}
.modRow{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.modChoice{
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(28,42,90,.75);
  background: rgba(7,10,18,.38);
}
.modChoice.poor{
  opacity:0.55;
  filter: grayscale(0.15);
}
.modTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.modName{font-weight:900}
.modCost{font-family:var(--mono); color:var(--warn); font-weight:900}
.modDesc{margin-top:6px; color:var(--muted); font-size:12px; line-height:1.3}
.modDelta{
  margin-top:8px;
  color: var(--text);
  font-family: var(--sans);
  font-size:11px;
  opacity:.9;
}
.modBtnRow{margin-top:10px; display:flex; gap:10px}
.modBtnRow .btn{flex:1}

.statsBody{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.statsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.statsRow{
  padding:10px 12px;
  border-radius:12px;
  background: rgba(11,16,34,.65);
  border:1px solid rgba(28,42,90,.75);
}
.statsRow .k{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.statsRow .v{
  font-family:var(--mono);
  font-size:14px;
  margin-top:4px;
}

.overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:auto;
  padding:18px;
}
.overlay.hidden{display:none}
.overlayCard{
  width:min(980px, 96vw);
  max-height: 92vh;
  border-radius: var(--radius);
  background: var(--panel2);
  border:1px solid rgba(28,42,90,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.overlayHeader{
  padding:14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(28,42,90,.7);
}
.overlayTitle{font-weight:950; letter-spacing:.12em; text-transform:uppercase; font-size:12px}
.overlayBody{padding:14px; overflow:auto}
.overlayFooter{padding:12px 14px; border-top:1px solid rgba(28,42,90,.7); color:var(--muted)}

.howGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.howBlock{
  padding:12px;
  border-radius: 18px;
  border:1px solid rgba(28,42,90,.75);
  background: rgba(7,10,18,.38);
}
.howH{font-weight:950; letter-spacing:.06em}
.howP{margin-top:6px; color:var(--muted); font-size:12px; line-height:1.4}

.toast{
  position:absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events:none;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(11,16,34,.78);
  border:1px solid rgba(28,42,90,.9);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  color: var(--text);
  font-weight:800;
  letter-spacing:.04em;
}
.toast.hidden{display:none}
.tooltip{
  position: fixed;
  z-index: 30;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(11,16,34,0.9);
  border: 1px solid rgba(28,42,90,0.9);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  color: var(--text);
  font-size: 12px;
  letter-spacing: .02em;
}
.tooltip.hidden{display:none}
.levelOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
  background: rgba(7,10,18,0.82);
  backdrop-filter: blur(6px);
  opacity:0;
  transition: opacity .45s ease;
  pointer-events:none;
}
.levelOverlay.show{
  opacity:1;
}
.levelOverlay.hidden{
  opacity:0;
}
.levelOverlayText{
  font-family: var(--sans);
  letter-spacing: 0.12em;
  font-size: 28px;
  color: var(--text);
  text-transform: uppercase;
  text-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(3,6,14,0.65);
  backdrop-filter: blur(6px);
  z-index:60;
}
.modal.hidden{display:none}
.modalCard{
  width:min(420px, 92vw);
  background: var(--panel2);
  border:1px solid rgba(28,42,90,.9);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding:16px;
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.modalTitle{
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:13px;
}
.modalBody{
  color:var(--text);
  font-size:13px;
  line-height:1.4;
}
.modalFooter{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
}
.settingsBtn{
  position:fixed;
  right:16px;
  top:16px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  border:1px solid rgba(28,42,90,.85);
  background: rgba(11,16,34,.7);
  color:var(--text);
  box-shadow: var(--shadow);
  cursor:pointer;
  z-index:10;
}
.settingsBtn:hover{filter:brightness(1.1)}
.gearIcon{
  display:inline-block;
  width:24px;
  height:24px;
  background: center / contain no-repeat url("assets/images/cogwheel.png");
}
.settingsCard{
  max-height: 80vh;
}
.settingsBody{
  overflow:auto;
  max-height: 68vh;
}
.settingsSection{
  padding:10px;
  border-radius: 14px;
  border:1px solid rgba(28,42,90,.75);
  background: rgba(7,10,18,.35);
  margin-bottom:12px;
}
.settingsLabel{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.pauseBanner{
  text-align:center;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:10px;
  color: var(--text);
}

.tiny{font-size:11px; color:var(--muted); line-height:1.35}
@media (max-width: 1100px){
  .panel{width: 320px}
  .howGrid{grid-template-columns: 1fr}
}

@media (max-width: 900px){
  .panels{
    flex-direction:column;
    height:auto;
  }
  .panel{
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .panel + .panel{margin-top:12px}
  #hud{overflow:auto}
}

@media (max-width: 700px){
  .topbar{gap:10px}
  .brand{width:100%}
  .statRow{width:100%}
  .controls{width:100%; justify-content:flex-start}
  .audioSliders{width:100%; justify-content:space-between}
  .audioCtl input[type="range"]{width:120px}
  .comboCascade{top:112px; left:0; right:0; width:min(250px, calc(100vw - 20px)); margin:0 auto;}
}

@media (max-width: 960px){
  .topbar{gap:12px;}
}




/* CODEX CHANGE: Echo Cascade final override: top-center multiplier text only, no box. */
.comboCascade{
  top: 14px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: max-content !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: translateY(-8px) scale(.94) !important;
}
.comboCascade.active{
  transform: translateY(0) scale(1) !important;
}
.comboCount{
  display: block;
  font-family: var(--sans);
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
  color: #ffcf5b;
  text-shadow:
    0 0 10px rgba(255,207,91,.62),
    0 0 30px rgba(255,207,91,.34),
    0 2px 10px rgba(0,0,0,.42);
  animation: comboOpacityPulse 1.15s ease-out infinite;
}
.comboCascade.tier10 .comboCount{
  color: #ffdb7d;
}
.comboCascade.tier15 .comboCount{
  color: #ffe08f;
}
@keyframes comboOpacityPulse{
  0%{opacity:.1; transform: translateY(12px)}
  45%{opacity:1; transform: translateY(0)}
  100%{opacity:.82; transform: translateY(-6px)}
}
@media (max-width: 700px){
  .comboCascade{ top: 14px !important; }
}


/* CODEX CHANGE: final tuning requested - GOLD MULTIPLIER big-to-small fade, centered on HUD line. */
.comboCascade{
  top: 18px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: max-content !important;
  display: inline-flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  transform: translateY(0) !important;
}
.comboLabel{
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,225,150,.92);
  text-shadow: 0 0 8px rgba(255,207,91,.34), 0 2px 10px rgba(0,0,0,.35);
  animation: comboMultiplierPulse2 1.2s ease-out infinite !important;
}
.comboCount{
  font-size: 48px !important;
  line-height: .9 !important;
  color: #ffcf5b !important;
  text-shadow:
    0 0 12px rgba(255,207,91,.7),
    0 0 36px rgba(255,207,91,.38),
    0 3px 12px rgba(0,0,0,.44) !important;
  animation: comboMultiplierPulse2 1.2s ease-out infinite !important;
}
.comboCascade.tier10 .comboCount{ color: #ffdd85 !important; }
.comboCascade.tier15 .comboCount{ color: #ffeaa8 !important; }
@keyframes comboMultiplierPulse2{
  0%{opacity:0; transform: translateY(14px) scale(1.55)}
  45%{opacity:1; transform: translateY(0) scale(1)}
  100%{opacity:.28; transform: translateY(-9px) scale(.72)}
}
@media (max-width: 700px){
  .comboCascade{ top: 18px !important; gap: 8px !important; }
  .comboLabel{ font-size: 11px; letter-spacing: .12em; }
  .comboCount{ font-size: 42px !important; }
}


/* CODEX CHANGE: position + aura rings (gold/blue/purple) around GOLD MULTIPLIER text. */
.comboCascade{
  top: 34px !important;
  position: absolute;
  isolation: isolate;
}
.comboCascade::before,
.comboCascade::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 82px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(.72);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
}
.comboCascade::before{
  border: 2px solid rgba(255,207,91,.72);
  box-shadow:
    0 0 20px rgba(255,207,91,.38),
    inset 0 0 10px rgba(255,207,91,.22);
  animation: comboRingGold 1.2s ease-out infinite;
}
.comboCascade::after{
  border: 2px solid rgba(98,242,255,.58);
  box-shadow:
    0 0 20px rgba(98,242,255,.3),
    0 0 34px rgba(154,108,255,.28),
    inset 0 0 10px rgba(154,108,255,.22);
  animation: comboRingCool 1.2s ease-out infinite;
}
@keyframes comboRingGold{
  0%{opacity:0; transform: translate(-50%, -50%) scale(.58)}
  32%{opacity:.85; transform: translate(-50%, -50%) scale(1)}
  100%{opacity:0; transform: translate(-50%, -50%) scale(1.35)}
}
@keyframes comboRingCool{
  0%{opacity:0; transform: translate(-50%, -50%) scale(.7)}
  46%{opacity:.72; transform: translate(-50%, -50%) scale(1.06)}
  100%{opacity:0; transform: translate(-50%, -50%) scale(1.45)}
}
@keyframes comboMultiplierPulse2{
  0%{opacity:0; transform: translateY(20px) scale(1.58)}
  45%{opacity:1; transform: translateY(0) scale(1)}
  100%{opacity:.34; transform: translateY(-1px) scale(.78)}
}
@media (max-width: 700px){
  .comboCascade{ top: 28px !important; }
  .comboCascade::before,
  .comboCascade::after{ width: 170px; height: 68px; }
}
/* CODEX CHANGE: smoother combo motion + ring wave/pulse tuning. */
.comboLabel{
  animation: comboMultiplierPulseSmooth 1.45s cubic-bezier(.22,.78,.22,1) infinite !important;
}
.comboCount{
  animation: comboMultiplierPulseSmooth 1.45s cubic-bezier(.22,.78,.22,1) infinite !important;
}
.comboCascade::before{
  animation: comboRingGoldSmooth 1.35s cubic-bezier(.2,.72,.2,1) infinite !important;
}
.comboCascade::after{
  animation: comboRingCoolSmooth 1.35s cubic-bezier(.2,.72,.2,1) infinite !important;
}
@keyframes comboMultiplierPulseSmooth{
  0%{opacity:0; transform: translateY(14px) scale(1.32)}
  34%{opacity:.96; transform: translateY(3px) scale(1.06)}
  62%{opacity:1; transform: translateY(0) scale(1)}
  100%{opacity:.18; transform: translateY(-4px) scale(.9)}
}
@keyframes comboRingGoldSmooth{
  0%{opacity:0; transform: translate(-50%, -50%) scale(.70)}
  18%{opacity:.62; transform: translate(-50%, -50%) scale(.92)}
  38%{opacity:.78; transform: translate(-50%, -50%) scale(1.06)}
  58%{opacity:.42; transform: translate(-50%, -50%) scale(1.18)}
  78%{opacity:.20; transform: translate(-50%, -50%) scale(1.30)}
  100%{opacity:0; transform: translate(-50%, -50%) scale(1.42)}
}
@keyframes comboRingCoolSmooth{
  0%{opacity:0; transform: translate(-50%, -50%) scale(.80)}
  22%{opacity:.46; transform: translate(-50%, -50%) scale(.98)}
  44%{opacity:.68; transform: translate(-50%, -50%) scale(1.10)}
  66%{opacity:.36; transform: translate(-50%, -50%) scale(1.22)}
  86%{opacity:.16; transform: translate(-50%, -50%) scale(1.34)}
  100%{opacity:0; transform: translate(-50%, -50%) scale(1.46)}
}
/* CODEX CHANGE: synchronized text reveal (fade 0->100 while shrinking). */
.comboCascade.active{
  animation: comboTextFadeSync .42s cubic-bezier(.22,.78,.22,1) both !important;
}
.comboLabel,
.comboCount{
  animation: none !important;
}
@keyframes comboTextFadeSync{
  0%{opacity:0; transform: translateY(8px) scale(1.38)}
  100%{opacity:1; transform: translateY(0) scale(1)}
}

/* Final override: bottom-right, aggressive red->gold combo multiplier with shrink/fade countdown. */
.comboCascade{
  pointer-events: none !important;
  position: absolute !important;
  left: auto !important;
  right: 16px !important;
  top: auto !important;
  bottom: 92px !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255,120,120,0.48) !important;
  border-radius: 14px !important;
  background: linear-gradient(140deg, rgba(82,10,10,0.84), rgba(25,8,8,0.55)) !important;
  box-shadow:
    0 0 0 1px rgba(255,210,120,0.12) inset,
    0 10px 28px rgba(0,0,0,0.5),
    0 0 28px rgba(255,96,96,0.24) !important;
  backdrop-filter: blur(4px) !important;
  transform-origin: 100% 100% !important;
  transform:
    translateY(calc((1 - var(--combo-life, 0)) * 18px))
    scale(calc(0.62 + var(--combo-life, 0) * 0.9)) !important;
  opacity: calc(var(--combo-life, 0)) !important;
  transition: none !important;
  isolation: isolate !important;
}
.comboCascade::before{
  content: "" !important;
  position: absolute !important;
  inset: -10px -14px !important;
  border-radius: 18px !important;
  pointer-events: none !important;
  background:
    radial-gradient(120% 95% at 90% 10%, rgba(255,90,90,0.34), rgba(255,130,70,0) 58%),
    radial-gradient(85% 120% at 20% 90%, rgba(255,210,90,0.24), rgba(255,210,90,0) 60%) !important;
  filter: blur(8px) !important;
  opacity: calc(0.24 + var(--combo-life, 0) * 0.6) !important;
  z-index: -1 !important;
}
.comboLabel{
  display: block !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(255,86,86,0.96) !important;
  text-shadow:
    0 0 10px rgba(255,68,68,0.58),
    0 0 18px rgba(255,160,80,0.3) !important;
  animation: comboWildLabel 0.4s steps(2) infinite !important;
}
.comboCount{
  display: block !important;
  margin-top: 2px !important;
  font-size: calc(40px + var(--combo-life, 0) * 32px) !important;
  line-height: .9 !important;
  font-weight: 1000 !important;
  letter-spacing: .02em !important;
  color: #ffd56a !important;
  text-shadow:
    0 0 10px rgba(255,214,90,0.9),
    0 0 30px rgba(255,145,40,0.66),
    0 0 55px rgba(255,70,70,0.42),
    0 2px 12px rgba(0,0,0,0.68) !important;
  animation: comboWildCount 0.55s ease-in-out infinite !important;
}
.comboCascade.tier10 .comboCount{
  color: #ffe18b !important;
}
.comboCascade.tier15 .comboCount{
  color: #ffecaa !important;
}
@keyframes comboWildLabel{
  0%{transform:translateY(0) skewX(0deg); opacity:.72}
  50%{transform:translateY(-2px) skewX(-3deg); opacity:1}
  100%{transform:translateY(0) skewX(0deg); opacity:.76}
}
@keyframes comboWildCount{
  0%{transform:translateY(0) scaleX(1)}
  35%{transform:translateY(-2px) scaleX(1.05)}
  70%{transform:translateY(1px) scaleX(.98)}
  100%{transform:translateY(0) scaleX(1)}
}
@media (max-width: 900px){
  .comboCascade{
    right: 10px !important;
    bottom: 122px !important;
  }
  .comboCount{
    font-size: calc(30px + var(--combo-life, 0) * 24px) !important;
  }
}

/* Final combo layout: centered layered stack, no box frame. */
.comboCascade{
  position: absolute !important;
  right: 16px !important;
  bottom: 92px !important;
  left: auto !important;
  top: auto !important;
  width: 240px !important;
  height: 120px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
.comboCascade::before,
.comboCascade::after{
  content: none !important;
}
.comboLabel,
.comboCount{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  animation: comboLayerPulse 0.65s ease-in-out infinite !important;
}
.comboLabel{
  top: calc(50% + 24px) !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  color: rgba(255,90,90,.95) !important;
  text-transform: uppercase !important;
  -webkit-text-stroke: 1.5px rgba(0,0,0,.95) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 0 0 rgba(0,0,0,0),
    0 0 12px rgba(255,60,60,.55),
    0 0 24px rgba(255,140,60,.35),
    0 2px 6px rgba(0,0,0,.8) !important;
}
.comboCount{
  top: calc(50% - 20px) !important;
  font-size: calc(44px + var(--combo-life, 0) * 36px) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  color: rgba(255,214,90,.98) !important;
  text-shadow: 0 0 16px rgba(255,214,90,.88), 0 0 36px rgba(255,114,64,.52), 0 2px 10px rgba(0,0,0,.62) !important;
}
@keyframes comboLayerBurst{
  0%{opacity:.12; transform:translate(-50%,-50%) scale(.72)}
  45%{opacity:.78; transform:translate(-50%,-50%) scale(1.02)}
  100%{opacity:.08; transform:translate(-50%,-50%) scale(1.34)}
}
@keyframes comboLayerPulse{
  0%{opacity:.65}
  50%{opacity:1}
  100%{opacity:.68}
}