:root{
  --bg:#060816;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.14);
  --text:#e8ecff;
  --muted:rgba(232,236,255,.72);
  --good:#c1d82f;
  --warn:#ffdd00;
  --bad:#ff4d6d;
  --mag:#af006f;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --solo-shell-width:1120px;
  --split-shell-gap:56px;
}

*{ box-sizing:border-box; }

/* Scrollbars: vertical (cyan belt) vs horizontal (solar flare) — WebKit + Firefox */
:root{
  --sb-track: rgba(6,10,22,.97);
  --sb-border-v: rgba(0,229,255,.22);
  --sb-border-h: rgba(255,221,0,.22);
}

*::-webkit-scrollbar-corner{
  background: var(--sb-track);
}

*::-webkit-scrollbar:vertical{
  width: 11px;
}
*::-webkit-scrollbar:horizontal{
  height: 10px;
}

*::-webkit-scrollbar-track:vertical{
  background: linear-gradient(90deg, rgba(4,8,18,.98), rgba(8,14,28,.92));
  border-left: 1px solid var(--sb-border-v);
  border-radius: 0 8px 8px 0;
}
*::-webkit-scrollbar-track:horizontal{
  background: linear-gradient(180deg, rgba(4,8,18,.98), rgba(12,8,20,.92));
  border-top: 1px solid var(--sb-border-h);
  border-radius: 0 0 8px 8px;
}

*::-webkit-scrollbar-thumb:vertical{
  background: linear-gradient(180deg, rgba(0,229,255,.55), rgba(0,130,175,.42));
  border-radius: 6px;
  border: 2px solid rgba(2,6,14,.92);
  box-shadow: inset 0 0 8px rgba(255,255,255,.12);
}
*::-webkit-scrollbar-thumb:vertical:hover{
  background: linear-gradient(180deg, rgba(90,240,255,.65), rgba(0,160,205,.5));
}
*::-webkit-scrollbar-thumb:horizontal{
  background: linear-gradient(90deg, rgba(255,221,0,.5), rgba(175,0,111,.4));
  border-radius: 5px;
  border: 2px solid rgba(2,6,14,.92);
  box-shadow: inset 0 0 6px rgba(255,255,255,.1);
}
*::-webkit-scrollbar-thumb:horizontal:hover{
  background: linear-gradient(90deg, rgba(255,235,150,.58), rgba(200,40,140,.48));
}

*::-webkit-scrollbar-button{
  width: 0;
  height: 0;
  display: none;
}

html, body, #wrap, #gameShell, .overlay .card, .panel, textarea, select{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,.55) var(--sb-track);
}

html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at 50% -10%, rgba(175,0,111,.18), transparent 55%),
              radial-gradient(900px 600px at 12% 18%, rgba(193,216,47,.12), transparent 60%),
              radial-gradient(1100px 900px at 82% 24%, rgba(255,221,0,.10), transparent 62%),
              var(--bg);
  color:var(--text);
  font-family: "Oxanium", sans-serif;
  overflow:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0px,
    rgba(255,255,255,.05) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  opacity:.14;
  pointer-events:none;
  mix-blend-mode: overlay;
}

#wrap{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:14px;
  gap:24px;
}

#gameShell{
  position:relative;
  width:min(1120px, 100%);
  max-width:1120px;
  height:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
}

#controlDock{
  position:absolute;
  top:14px;
  right:14px;
  bottom:14px;
  width:clamp(180px, 16vw, 240px);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

#touchControlDock{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  bottom:14px;
  display:none;
  align-items:flex-end;
  justify-content:space-between;
  pointer-events:none;
  z-index:6;
}

.touchDock{
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  box-shadow: var(--shadow);
}

.touchDockHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.touchDockHideBtn{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  color:var(--text);
  border-radius:10px;
  padding:6px 9px;
  font-family:inherit;
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  cursor:pointer;
}

.touchDock-left{
  width:clamp(160px, 16vw, 220px);
}

.touchDock-right{
  width:clamp(190px, 18vw, 250px);
}

.touchTitle{
  font-size:12px;
  letter-spacing:1px;
  color:var(--muted);
  text-transform:uppercase;
}

.touchMovePad{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:16px;
  border:1px solid rgba(0,229,255,.26);
  background: radial-gradient(circle at 50% 50%, rgba(0,229,255,.1), rgba(0,0,0,.45));
  overflow:hidden;
  touch-action:none;
}

.touchMoveKnob{
  position:absolute;
  left:50%;
  top:50%;
  width:40%;
  height:40%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(0,229,255,.45), rgba(0,229,255,.08));
  box-shadow: 0 0 22px rgba(0,229,255,.3), inset 0 0 12px rgba(255,255,255,.18);
  pointer-events:none;
}

.touchActionGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.touchBtn{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.1);
  color:var(--text);
  border-radius:12px;
  padding:10px 8px;
  font-family:inherit;
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  touch-action:none;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.touchBtnPrimary{
  border-color: rgba(0,229,255,.45);
  background: rgba(0,229,255,.18);
}

.touchSlotRow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.touchBtnSlot{
  padding:9px 6px;
}

.touchBtn.is-pressed{
  transform: translateY(1px) scale(0.98);
  background: rgba(0,229,255,.3);
  box-shadow: 0 0 16px rgba(0,229,255,.28);
}

.touchBtn.is-cooldown{
  opacity:.45;
}

body.touchControlsOn #touchControlDock{
  display:flex;
}

body.touchControlsOn.touchControlsDockHidden #touchControlDock{
  display:none;
}

body.touchControlsOn #controlDock{
  display:none;
}

.controlPad{
  width:100%;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow: var(--shadow);
}

.padTitle{
  font-size:13px;
  letter-spacing:1px;
  color:var(--muted);
  text-transform:uppercase;
}

.padModeLabel{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.6px;
  text-transform:uppercase;
}

.padStatus{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.6px;
  text-transform:uppercase;
}

.controlPad.active .padStatus b{
  color:var(--good);
}

.virtualPad{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background: radial-gradient(circle at 50% 50%, rgba(0,229,255,.08), rgba(0,0,0,.45));
  border:1px solid rgba(0,229,255,.2);
  border-radius:16px;
  overflow:hidden;
  touch-action:none;
}

.controlPad.active .virtualPad{
  border-color: rgba(0,229,255,.45);
  box-shadow: inset 0 0 18px rgba(0,229,255,.18);
}

.padKnob{
  position:absolute;
  left:50%;
  top:50%;
  width:38%;
  height:38%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(0,229,255,.35), rgba(0,229,255,.05));
  box-shadow: 0 0 18px rgba(0,229,255,.25), inset 0 0 10px rgba(255,255,255,.15);
  transition: transform 0.08s ease-out;
  pointer-events:none;
}

.padHint{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  letter-spacing:.4px;
}

@media (max-width: 1200px){
  #controlDock{ display:none; }
  #gameShell{ max-width:100%; }
}

@media (pointer: coarse){
  body.touchControlsOn #touchControlDock{
    display:flex;
  }
}

@media (max-width: 980px){
  #touchControlDock{
    left:10px;
    right:10px;
    bottom:10px;
    align-items:flex-end;
    gap:10px;
  }
  .touchDock-left{
    width:44vw;
    max-width:200px;
  }
  .touchDock-right{
    width:52vw;
    max-width:260px;
  }
}

@media (max-width: 760px), (orientation: portrait){
  #touchControlDock{
    top:auto;
    bottom:8px;
    left:8px;
    right:8px;
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
  }
  .touchDock-left{
    width:40vw;
    min-width:130px;
    max-width:180px;
    padding:10px;
  }
  .touchDock-right{
    width:56vw;
    max-width:none;
    padding:10px;
  }
  .touchBtn{
    padding:9px 6px;
    font-size:11px;
  }
}

#hud{
  position:absolute;
  left:0; right:0; top:0;
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  z-index:5;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.hudLeft, .hudRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.hudCenter{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.intro-drop #canvas{
  animation: bgDrop 0.7s cubic-bezier(.2,.9,.2,1.2) both;
}

.intro-drop #hud .chip,
.intro-drop #hud .btn{
  opacity:0;
  animation: hudDrop 0.6s cubic-bezier(.18,.9,.2,1.15) both;
}

.intro-drop #hud .hudLeft .chip:nth-child(1){ animation-delay: 0.55s; }
.intro-drop #hud .hudLeft .chip:nth-child(2){ animation-delay: 0.67s; }
.intro-drop #hud .hudLeft .chip:nth-child(3){ animation-delay: 0.79s; }
.intro-drop #hud .hudLeft .chip:nth-child(4){ animation-delay: 0.91s; }
.intro-drop #hud .hudLeft .chip:nth-child(5){ animation-delay: 1.03s; }

.intro-drop #promptChip{ animation-delay: 1.15s; }

.intro-drop #hud .hudRight .btn:nth-child(1){ animation-delay: 1.27s; }
.intro-drop #hud .hudRight .btn:nth-child(2){ animation-delay: 1.39s; }
.intro-drop #hud .hudRight .btn:nth-child(3){ animation-delay: 1.51s; }
.intro-drop #hud .hudRight .btn:nth-child(4){ animation-delay: 1.63s; }

@keyframes bgDrop{
  0%{ transform: translateY(-40px) scale(1.02); opacity:0; }
  70%{ transform: translateY(4px) scale(1.01); opacity:1; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}

@keyframes hudDrop{
  0%{ transform: translateY(-30px); opacity:0; filter: blur(1px); }
  60%{ transform: translateY(4px); opacity:1; filter: blur(0); }
  100%{ transform: translateY(0); opacity:1; filter: blur(0); }
}

/* Score pop */
@keyframes scorePop{
  0%  { transform:scale(1);    color:inherit; filter:none; }
  30% { transform:scale(1.35); color:#ffdd00; filter:drop-shadow(0 0 6px rgba(255,221,0,.55)); }
  70% { transform:scale(1.18); color:#ffdd00; filter:drop-shadow(0 0 4px rgba(255,221,0,.35)); }
  100%{ transform:scale(1);    color:inherit; filter:none; }
}
.score-pop{
  display:inline-block;
  animation:scorePop 0.38s cubic-bezier(.36,.07,.19,.97) both;
}

/* Prompt chip pulse — gold flash on new question */
@keyframes promptPulse{
  0%  { transform:scale(1);    background:rgba(255,255,255,.06); box-shadow:none; }
  15% { transform:scale(1.14); background:rgba(255,210,40,.28);  border-color:rgba(255,220,60,1);   box-shadow:0 0 0 5px rgba(255,210,40,.45), 0 0 32px 8px rgba(255,200,30,.35); }
  40% { transform:scale(1.06); background:rgba(255,200,40,.14);  border-color:rgba(255,220,60,.7);   box-shadow:0 0 0 9px rgba(255,210,40,.18), 0 0 44px 10px rgba(255,200,30,.15); }
  100%{ transform:scale(1);    background:rgba(255,255,255,.06); box-shadow:0 0 0 16px rgba(255,210,40,0); }
}
.prompt-pulse{
  animation:promptPulse 0.55s cubic-bezier(.36,.07,.19,.97) both;
}

/* Operation colour coding on prompt chip */
#promptChip.op-mul    { border-color: rgba(0,229,255,.4); }
#promptChip.op-add    { border-color: rgba(28,220,120,.4); }
#promptChip.op-square { border-color: rgba(255,210,60,.4); }
#promptChip.op-rational { border-color: rgba(180,100,255,.4); }

/* End grade reveal */
@keyframes gradeReveal{
  0%  { transform:scale(0.1) rotate(-18deg); opacity:0; filter:blur(8px); }
  55% { transform:scale(1.22) rotate(4deg);  opacity:1; filter:blur(0); }
  75% { transform:scale(0.94) rotate(-2deg); }
  90% { transform:scale(1.06) rotate(1deg); }
  100%{ transform:scale(1) rotate(0deg);    opacity:1; filter:blur(0); }
}
.grade-reveal{
  animation:gradeReveal 0.55s cubic-bezier(.34,1.56,.64,1) 0.4s both;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background: var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  font-size:13px;
  letter-spacing:.2px;
  user-select:none;
  white-space:nowrap;
}

.chip b{ letter-spacing:.5px; }

#promptChip{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  font-size:15px;
  letter-spacing:.35px;
  display:none;
}

.repeatOverline{
  text-decoration: overline;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}

.btn{
  cursor:pointer;
  background: var(--panel2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:8px 12px;
  font-family: inherit;
  font-size:13px;
  letter-spacing:.2px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, background .15s ease, border-color .15s ease, box-shadow .18s ease;
  user-select:none;
}
.btn:hover{ background: rgba(255,255,255,.14); }
.btn:active{ transform: translateY(1px); }
.btn::after{
  content:"";
  position:absolute;
  inset:-20% -40%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-140%);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}
.btn:hover::after{
  opacity:1;
  animation: buttonSweep 0.9s ease-out;
}

/* Stronger lift for home menu buttons */
#overlayMenu .row .btn{
  transition: transform .22s ease, background .15s ease, border-color .15s ease, box-shadow .22s ease;
}
#overlayMenu .row .btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 18px rgba(0,229,255,.18);
}
#overlayMenu .row .btn:active{
  transform: translateY(-1px);
}

#phaserRoot{
  position:absolute;
  inset:0;
  z-index:0;
}
#phaserRoot canvas{
  display:block;
  width:100%;
  height:100%;
}
#canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; background: transparent; }

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:10;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(7px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .25s ease, visibility .25s ease;
}
.overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.launching .overlay.show{
  opacity:0;
  transition: opacity 0.6s ease;
}

body.launching .overlay.show .card{
  transform: translateY(-12px) scale(0.98);
  opacity:0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

body.launching #menuWrap{
  opacity:0;
  transition: opacity 0.6s ease;
}

.card{
  width:min(840px, 100%);
  border:1px solid var(--line);
  border-radius:24px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  box-shadow: 0 22px 70px rgba(0,0,0,.6);
  overflow:hidden;
}

#overlayMenu.overlay{
  background: rgba(3,6,14,.68);
  z-index: 30;
}

#missileOverlay.overlay{
  background: linear-gradient(to bottom,
    rgba(3,6,14,.02) 0%,
    rgba(3,6,14,.12) 32%,
    rgba(3,6,14,.74) 62%,
    rgba(3,6,14,.82) 100%);
  z-index: 28;
}

#missileOverlay .card{
  width:min(560px, 94%);
  border-color: rgba(0,229,255,.35);
  background: linear-gradient(140deg, rgba(10,14,28,.98), rgba(6,8,22,.96));
  box-shadow: 0 28px 72px rgba(0,0,0,.62);
}

#missileOverlay .missileBody{
  padding: 0 18px 12px;
}

#missileOverlay .missilePanel{
  display:flex;
  flex-direction:column;
  gap:12px;
}

#missileOverlay .missilePrompt{
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
}

#missileOverlay .missileInput{
  width:100%;
  text-align:center;
  font-size:26px;
  letter-spacing:6px;
  color:var(--text);
  background: rgba(0,0,0,.35);
  border:1px solid rgba(0,229,255,.4);
  border-radius:16px;
  padding:12px 16px;
  font-family: "Oxanium", sans-serif;
}

#missileOverlay .missileInput::placeholder{
  color: rgba(232,236,255,.35);
}

#missileOverlay .missileTimer{
  text-align:right;
  font-size:12px;
  color: rgba(232,236,255,.7);
  letter-spacing:1px;
}

#overlayMenu .card{
  position:relative;
  width:min(1080px, 100%);
  border-color: rgba(255,255,255,.12);
  border-radius:28px;
  background: linear-gradient(140deg, rgba(10,14,28,.97), rgba(6,8,22,.94));
  box-shadow: 0 30px 80px rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
}

#overlayMenu .card::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height:65%;
  background: radial-gradient(circle at 50% 45%, rgba(0,229,255,.18), rgba(0,0,0,0) 70%);
  opacity:.7;
  pointer-events:none;
  z-index:0;
}

#overlayMenu .card::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 18px);
  opacity:.5;
  pointer-events:none;
  z-index:0;
}

#overlayMenu .card > *{
  position:relative;
  z-index:1;
}

#overlayMenu .cardHead{
  border-bottom-color: rgba(255,255,255,.12);
  background: rgba(4,8,18,.55);
}

.cardHead{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.title{
  font-size:18px;
  letter-spacing:.7px;
  margin:0;
  text-transform:uppercase;
}

.title.titleCleared{
  color: rgba(0,229,255,.9);
  text-shadow: 0 0 18px rgba(0,229,255,.45);
}

/* SYNTHWAVE LOGO */
.synthHead{ position:relative; overflow:hidden; }
.synthHead::before{
  content:"";
  position:absolute;
  right:-140px;
  top:-110px;
  width:420px;
  height:420px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 52%, rgba(255,77,109,.20), rgba(175,0,111,.10) 55%, rgba(0,0,0,0) 72%),
    radial-gradient(circle at 50% 55%, rgba(0,229,255,.16), rgba(0,229,255,0) 62%);
  filter: blur(0.2px);
  opacity:.95;
  pointer-events:none;
  transform: rotate(-10deg);
}
.synthHead::after{
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  bottom:-10px;
  height:90px;
  background:
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 70%),
    repeating-linear-gradient(to right, rgba(0,229,255,.22) 0 1px, rgba(0,0,0,0) 28px),
    repeating-linear-gradient(to top, rgba(175,0,111,.18) 0 1px, rgba(0,0,0,0) 18px);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: bottom;
  opacity:.55;
  pointer-events:none;
}

.gameLogo{
  margin:0;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:1.3px;
  position:relative;
  z-index:1;
}
.gameLogo__top{
  display:inline-block;
  font-size:11px;
  letter-spacing:2.2px;
  color:rgba(232,236,255,.78);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.gameLogo__main{
  display:block;
  margin-top:10px;
  font-weight:900;
  font-size:34px;
  letter-spacing:2.6px;
  background: linear-gradient(90deg, rgba(175,0,111,.95), rgba(0,229,255,.95), rgba(255,221,0,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 10px rgba(0,229,255,.18),
    0 0 18px rgba(175,0,111,.18),
    0 18px 44px rgba(0,0,0,.55);
  filter: drop-shadow(0 0 10px rgba(0,229,255,.18));
  animation: glowPulse 2.4s ease-in-out infinite;
}
.gameLogo__tag{
  display:block;
  margin-top:8px;
  font-size:12px;
  letter-spacing:2.1px;
  color:rgba(232,236,255,.70);
}

@keyframes glowPulse{
  0%,100%{ filter: drop-shadow(0 0 8px rgba(0,229,255,.16)) drop-shadow(0 0 10px rgba(175,0,111,.16)); }
  50%{ filter: drop-shadow(0 0 12px rgba(0,229,255,.22)) drop-shadow(0 0 14px rgba(175,0,111,.22)); }
}

.subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.35;
}

#endReason{
  margin-top:4px;
  color:var(--muted);
  font-size:15px;
  line-height:1.35;
  opacity:0;
  transition: opacity .2s ease;
}

#overlayEnd.reveal-reason #endReason{
  opacity:1;
}

.endOutcome{
  margin-top:6px;
  color:var(--text);
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.endReasonLine{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.cardBody{
  padding:16px 18px 18px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}

.catalogBody{
  grid-template-columns: 1fr;
}

@media (max-width: 880px){
  .cardBody{ grid-template-columns: 1fr; }
}

.endSequence{
  display:flex;
  flex-direction:column;
  gap:16px;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

.endStage{
  display:none;
  opacity:0;
  transform:translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
}

.endStage.isActive{
  display:block;
  opacity:1;
  transform:translateY(0);
}

.campaignBanner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(255,221,0,.35);
  background: linear-gradient(120deg, rgba(255,221,0,.18), rgba(0,229,255,.12));
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 22px rgba(255,221,0,.12);
  text-align:center;
  text-transform:uppercase;
}
.campaignBannerTitle{
  font-size:12px;
  letter-spacing:0.32em;
  color:#fff4c7;
  text-shadow: 0 0 14px rgba(255,214,79,.45);
}
.campaignBannerSubtitle{
  font-size:11px;
  letter-spacing:0.22em;
  color:rgba(230,245,255,.85);
}
.campaignBannerMeta{
  font-size:10px;
  letter-spacing:0.18em;
  color:rgba(255,245,220,.8);
}

.endScoreBlock{
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(0,0,0,.22);
  padding:16px;
  text-align:center;
}

.endScoreLabel{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
}

.endScoreValue{
  margin-top:6px;
  font-size:32px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--text);
  text-shadow: 0 0 18px rgba(0,229,255,.25);
}

.endGradeWrap{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.endGrade{
  font-size:48px;
  font-weight:700;
  letter-spacing:3px;
  color:#d8f7ff;
  text-shadow: 0 0 18px rgba(0,229,255,.35), 0 0 36px rgba(0,229,255,.18);
}

.endGrade.gradeS{ color:#fff7c2; text-shadow: 0 0 20px rgba(255,214,79,.45), 0 0 40px rgba(255,214,79,.25); }
.endGrade.gradeA{ color:#c7fff0; text-shadow: 0 0 18px rgba(53,242,176,.4), 0 0 36px rgba(53,242,176,.25); }
.endGrade.gradeB{ color:#bfe0ff; text-shadow: 0 0 16px rgba(88,173,255,.4), 0 0 32px rgba(88,173,255,.2); }
.endGrade.gradeC{ color:#ffe2a8; text-shadow: 0 0 16px rgba(255,196,92,.35), 0 0 28px rgba(255,196,92,.2); }
.endGrade.gradeD{ color:#ffd0a1; text-shadow: 0 0 16px rgba(255,154,92,.35), 0 0 28px rgba(255,154,92,.2); }
.endGrade.gradeE{ color:#ffb2b2; text-shadow: 0 0 16px rgba(255,107,107,.35), 0 0 28px rgba(255,107,107,.2); }

.endGradeLabel{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
}

.endAccuracyBlock{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.endAccuracyBlock .meter{
  height:14px;
}

.endScoreBlock .breakdownBlock{
  margin-top:12px;
}

.endScoreBlock .breakdownBar{
  height:16px;
}

.endStatsWrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  max-height:360px;
  align-items:start;
  transform: scale(0.94);
  transform-origin: top center;
}

.endStatsWrap .panel{
  max-height:360px;
  overflow:hidden;
}

#overlayEnd .card{
  width:min(980px, 100%);
}

#endStageEngagement .endStatsWrap{
  max-height:none;
  transform:none;
}

#endStageEngagement .endStatsWrap .panel{
  max-height:none;
  min-height:320px;
  overflow:hidden;
  text-align:center;
}

#endStageEngagement .panel{
  overflow:hidden;
}

#endStageEngagement .panel > h3{
  text-align:center;
}

.engagementTopRow{
  display:grid;
  grid-template-columns: 1fr;
  margin-top:10px;
}

#endStageEngagement .engagementTopRow{
  justify-items:center;
}

.engagementIconRows{
  margin-top:10px;
  overflow:hidden;
}

#endStageEngagement .engagementIconRows{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
}

.engagementSplit{
  display:grid;
  grid-template-columns: minmax(280px, 1.12fr) minmax(200px, 0.52fr);
  gap:18px 22px;
  width:100%;
  align-items:stretch;
}
.engagementSplit.engagementSplit--noPowerups{
  grid-template-columns: 1fr;
}
.engagementCol{
  min-width:0;
}
.engagementColIcons{
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:100%;
  align-self:stretch;
  gap:14px;
}

.engagementSideHint{
  flex-shrink:0;
  text-align:center;
  letter-spacing:0.06em;
  color:rgba(184,222,255,.78);
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(0,229,255,.14);
  background: rgba(4,10,22,.45);
  line-height:1.35;
}

#endStageEngagement #engagementColIcons > #statsListSecondary{
  flex:1;
  min-height:0;
  justify-content:center;
}

.endPlacementPanel{
  display:grid;
  gap:10px;
  text-align:center;
}

.endPlacementLine{
  font-size:18px;
  letter-spacing:.8px;
  line-height:1.45;
  color:#dff7ff;
}

.endMineralsSummary{
  margin-top:0;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,229,255,.28);
  background:rgba(0,0,0,.22);
  display:grid;
  grid-template-columns:64px 1fr;
  align-items:center;
  gap:10px;
  box-shadow: 0 0 18px rgba(0,229,255,.08);
}

#endStageEngagement .endMineralsSummary{
  margin-left:auto;
  margin-right:auto;
  max-width:min(520px, 100%);
  padding:10px 16px;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  text-align:left;
  gap:12px 18px;
  grid-template-columns:unset;
}

#endStageEngagement .endMineralsIconWrap{
  width:52px;
  height:52px;
  margin:0;
  flex-shrink:0;
}

#endStageEngagement .endMineralsIcon{
  width:48px;
  height:48px;
}

#endStageEngagement .endMineralsMeta{
  flex:1;
  min-width:min(280px, 100%);
  text-align:left;
}

#endStageEngagement .endMineralsValue{
  font-size:26px;
  line-height:1.05;
}

.endMineralsIconWrap{
  width:64px;
  height:64px;
  border-radius:12px;
  border:1px solid rgba(0,229,255,.25);
  background:rgba(0,229,255,.1);
  display:grid;
  place-items:center;
}

.endMineralsIcon{
  width:54px;
  height:54px;
  object-fit:contain;
}

.endMineralsMeta{
  display:grid;
  gap:6px;
}

.endMineralsValue{
  font-size:34px;
  font-weight:700;
  line-height:1;
  letter-spacing:1.5px;
  color:#bff2ff;
  text-shadow:0 0 16px rgba(0,229,255,.3);
}

.endActionRow{
  justify-content:center;
  gap:14px;
}

.endStageJumpRow{
  justify-content:center;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.endStageJumpBtn{
  min-height:38px;
  min-width:132px;
  font-size:16px;
  letter-spacing:1.2px;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.24);
}

.endStageJumpBtn.isActive{
  border-color:rgba(0,229,255,.45);
  background:rgba(0,229,255,.16);
  color:#d9f9ff;
}

#endStageActions .endActionRow .btn{
  min-height:56px;
  min-width:190px;
  font-size:26px;
  letter-spacing:1.8px;
  border-width:2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 24px rgba(0,229,255,.18);
}

body.splitGameplayMode{
  overflow:auto;
}

body.splitGameplayMode #wrap{
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  padding:14px 24px;
}

body.splitGameplayMode #gameShell{
  width:calc(var(--solo-shell-width) * 2 + var(--split-shell-gap));
  max-width:none;
  flex:0 0 calc(var(--solo-shell-width) * 2 + var(--split-shell-gap));
  border:none;
  background:transparent;
  box-shadow: var(--shadow);
}

body.splitGameplayMode #gameShell::before,
body.splitGameplayMode #gameShell::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  pointer-events:none;
}

body.splitGameplayMode #gameShell::before{
  left:0;
  width:var(--solo-shell-width);
}

body.splitGameplayMode #gameShell::after{
  left:calc(var(--solo-shell-width) + var(--split-shell-gap));
  width:var(--solo-shell-width);
}

.endScoresPanel{
  margin-top:16px;
}

.endScoresTableWrap{
  max-height:260px;
  overflow:auto;
  scroll-behavior:auto;
}

.endScoresTable{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.endScoresTable th,
.endScoresTable td{
  padding:6px 8px;
  text-align:left;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

.endScoresTable thead th{
  position:sticky;
  top:0;
  background:rgba(8,12,24,.92);
  z-index:1;
}

.endStatsHidden{ display:none; }

.endSequence.placementLeaderboardActive .endScoresPanel{
  display:block;
}

.endSequence.placementLeaderboardActive .endScoresTableWrap{
  max-height:360px;
}

.endScoreRowCurrent{
  background:rgba(120,220,255,.12);
  box-shadow: inset 0 0 0 1px rgba(170,240,255,.5);
  transform-origin:center;
}

.endScoreRowPop{
  animation:endScorePopGlow .7s ease-out;
}

@keyframes endScorePopGlow{
  0%{
    transform:scale(1);
    box-shadow: inset 0 0 0 1px rgba(170,240,255,.45), 0 0 0 rgba(120,220,255,0);
    background:rgba(120,220,255,.12);
  }
  35%{
    transform:scale(1.03);
    box-shadow: inset 0 0 0 1px rgba(230,250,255,.95), 0 0 18px rgba(120,220,255,.5);
    background:rgba(170,240,255,.24);
  }
  100%{
    transform:scale(1);
    box-shadow: inset 0 0 0 1px rgba(170,240,255,.5), 0 0 0 rgba(120,220,255,0);
    background:rgba(120,220,255,.12);
  }
}

@media (max-width: 880px){
  .endStatsWrap{ grid-template-columns: 1fr; }
  #endStageActions .btn{
    min-height:48px;
    min-width:0;
    flex:1 1 auto;
    font-size:20px;
  }
}

.endNameBlock{
  pointer-events:auto;
}

.endSequence.reveal-sequence{
  opacity:1;
  transform: translateY(0);
}

.endSequence.reveal-sequence.phase-fade-out{
  opacity:0;
  transform: translateY(8px);
}

.breakdownBlock{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.breakdownBar{
  display:flex;
  height:16px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
}

.breakdownSegment{
  height:100%;
  min-width:2px;
}

.breakdownCorrect{ background: linear-gradient(90deg, rgba(53,242,176,.9), rgba(53,242,176,.6)); }
.breakdownWrong{ background: linear-gradient(90deg, rgba(255,107,107,.9), rgba(255,107,107,.6)); }
.breakdownMissed{ background: linear-gradient(90deg, rgba(255,196,92,.9), rgba(255,196,92,.6)); }

.breakdownLegend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:12px;
  color:var(--muted);
}

.breakdownLegend b{ color: var(--text); font-weight:600; }

.legendSwatch{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:3px;
  margin-right:6px;
  transform: translateY(1px);
}

.legendCorrect{ background: rgba(53,242,176,.9); }
.legendWrong{ background: rgba(255,107,107,.9); }
.legendMissed{ background: rgba(255,196,92,.9); }

.panel{
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(0,0,0,.18);
  padding:14px;
}

.panel h3{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.5px;
  color:var(--text);
  text-transform:uppercase;
}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 560px){ .grid{ grid-template-columns: 1fr; } }

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

input[type="number"], input[type="text"], select{
  appearance:none;
  width:100%;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  font-family: inherit;
  font-size:13px;
  outline:none;
}

select option{
  background: #0b1220;
  color: var(--text);
}

input[type="checkbox"]{ transform: translateY(1px); }

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  padding:14px 18px 18px;
  border-top:1px solid var(--line);
  background: rgba(0,0,0,.18);
}

.kbd{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  border-radius:10px;
  font-size:12px;
  color:var(--muted);
  user-select:none;
  white-space:nowrap;
}

.pillGood{ color:var(--good); }
.pillWarn{ color:var(--warn); }
.pillBad{ color:var(--bad); }

.monoSmall{ font-size:14px; color:var(--muted); line-height:1.45; }

.list{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background: rgba(255,255,255,.05);
  font-size:12px;
}

.catalogList li{
  align-items:center;
  justify-content:center;
  gap:0;
  padding:14px;
  cursor:pointer;
  min-height:260px;
}

.catalogEmpty{
  font-size:12px;
  color:var(--muted);
  padding:12px;
  justify-content:flex-start;
}

.catalogList{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}

.catalogItem.catalogIconOnly{
  position:relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.catalogItem.catalogIconOnly.isLocked::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background: rgba(5,8,16,.48);
  pointer-events:none;
}

.catalogItem.catalogIconOnly:hover{
  transform: translateY(-2px);
  border-color: rgba(0,229,255,.35);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}

.catalogItem.catalogIconOnly:focus{
  outline: none;
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 2px rgba(0,229,255,.2);
}

.catalogLockTag{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,120,120,.45);
  background: rgba(120,25,30,.68);
  color:#ffd3d3;
  font-size:10px;
  letter-spacing:.9px;
  text-transform:uppercase;
}

.catalogItem.catalogSfxRow{
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
  min-height:0;
  padding:10px;
}
.catalogItem.catalogSfxRow .catalogIcon{
  width:72px;
  height:72px;
  border-radius:14px;
}
.catalogItem.catalogSfxRow .catalogIcon img{
  width:56px;
  height:56px;
}
.catalogItem.catalogSfxRow .catalogText{
  flex:1;
  min-width:0;
}
.catalogItem.catalogSfxRow .catalogTitle{
  display:flex;
  align-items:center;
  gap:8px;
}
.catalogItem.catalogSfxRow .catalogControls{
  align-self:center;
  margin-top:0;
}

.catalogFilterRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 14px;
}

.catalogFilterBtn{
  font-size:11px;
  padding:6px 12px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.6px;
  background: rgba(255,255,255,.05);
}

.catalogFilterBtn.active{
  border-color: rgba(0,229,255,.5);
  background: rgba(0,229,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.sfxCategoryRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.sfxCategoryBtn{
  font-size:11px;
  padding:6px 12px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.6px;
  background: rgba(255,255,255,.05);
}

.sfxCategoryBtn.active{
  border-color: rgba(0,229,255,.5);
  background: rgba(0,229,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.catalogIcon{
  width:234px;
  height:234px;
  border-radius:24px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.catalogIcon img{
  width:189px;
  height:189px;
  object-fit:contain;
}

.catalogMissing{
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}

.catalogDetailOverlay{
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(6px);
}

.catalogDetailOverlay .catalogDetailCard{
  position:relative;
  width:min(520px, 92%);
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(0,229,255,.35);
  background: rgba(8,12,24,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform: scale(0.94);
  opacity:0;
  transition: opacity .2s ease, transform .2s ease;
}

.catalogDetailOverlay.show .catalogDetailCard{
  transform: scale(1);
  opacity:1;
}

.catalogDetailOverlay .catalogDetailClose{
  position:absolute;
  top:12px;
  right:12px;
}

.catalogDetailOverlay .catalogDetailIcon{
  width:240px;
  height:240px;
  border-radius:24px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
}

.catalogDetailOverlay .catalogDetailIcon img{
  width:200px;
  height:200px;
  object-fit:contain;
}

.catalogDetailOverlay .catalogDetailTitle{
  font-size:14px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#e8ecff;
  text-align:center;
}

.catalogDetailOverlay .catalogDetailDesc{
  font-size:15px;
  color:rgba(232,236,255,.82);
  text-align:center;
  line-height:1.5;
}

.catalogDetailOverlay .catalogDetailMeta,
.catalogDetailOverlay .catalogDetailWhen{
  font-size:11px;
  color:var(--muted);
  text-align:center;
}

.catalogDetailOverlay .catalogDetailBadge{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#e8ecff;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}

.catalogText{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.catalogTitle{
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text);
}

.catalogTag{
  margin-left:8px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:10px;
  letter-spacing:.5px;
  color:var(--muted);
}

.catalogDesc{
  font-size:12px;
  color:var(--text);
  line-height:1.4;
}

.catalogMeta,
.catalogWhen{
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}

.catalogControls{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}

.catalogToggleBtn{
  width:100%;
  justify-content:space-between;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:10px 12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
}

.catalogTogglePanel{
  display:none;
  margin-top:10px;
}
.catalogTogglePanel.open{ display:block; }

.catalogControlBtn{
  min-width:30px;
  height:26px;
  padding:0 8px;
  font-size:13px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.catalogControlBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.catalogVolume{
  width:120px;
}

.catalogDuration{
  font-size:11px;
  color:var(--muted);
  letter-spacing:.5px;
}

.btnTiny{
  padding:4px 10px;
  font-size:11px;
  border-radius:999px;
}

.leaderboardsMain{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}

.leaderboardsFilters{
  width:100%;
}

.leaderboardsFilters .filterRow{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}

.leaderboardsFilters label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}

.leaderboardsFilters select{
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:6px 8px;
  font-size:12px;
}

.leaderboardsTableWrap{
  max-height:520px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.22);
  position:relative;
}

.leaderboardsTable{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
  font-size:14px;
}

.leaderboardsTable th,
.leaderboardsTable td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}

.leaderboardsTable thead th{
  position:sticky;
  top:0;
  background:rgba(8,12,24,.92);
  z-index:1;
}

.leaderboardsCard{
  width: 100%;
  max-width: none;
}

#leaderboardsOverlay .leaderboardsCard{
  width: min(1180px, 97%);
  max-width: 1180px;
  max-height: 88vh;
}

#leaderboardsOverlay .title{
  font-size:24px;
  letter-spacing:1.4px;
}

#leaderboardsOverlay .subtitle{
  font-size:18px;
  line-height:1.35;
}

#leaderboardsOverlay .leaderboardsFilters label{
  font-size:14px;
  letter-spacing:1.4px;
}

#leaderboardsOverlay .leaderboardsFilters select{
  font-size:14px;
  padding:10px 12px;
}

#leaderboardsOverlay #lbClearFilters{
  font-size:13px;
  padding:10px 16px;
}

#leaderboardsOverlay .leaderboardsLoading{
  font-size:13px;
}

#leaderboardsOverlay .leaderboardsTable thead th{
  font-size:17px;
  letter-spacing:.5px;
}

#leaderboardsOverlay .leaderboardsTable tbody td{
  font-size:15px;
}

#homeLeaderboardsBody tr.lb-rank-grade{
  transition: background-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

#homeLeaderboardsBody tr.lb-grade-s{
  background: linear-gradient(90deg, rgba(214,232,255,.34), rgba(112,194,255,.2) 52%, rgba(172,232,255,.18));
  box-shadow:
    inset 0 0 0 1px rgba(172,221,255,.44),
    inset 0 0 18px rgba(130,202,255,.2);
}

#homeLeaderboardsBody tr.lb-grade-a{
  background: linear-gradient(90deg, rgba(255,215,90,.28), rgba(255,190,70,.12));
  box-shadow: inset 0 0 0 1px rgba(255,219,124,.32);
}

#homeLeaderboardsBody tr.lb-grade-b{
  background: linear-gradient(90deg, rgba(215,224,234,.24), rgba(170,186,204,.1));
  box-shadow: inset 0 0 0 1px rgba(194,207,222,.26);
}

#homeLeaderboardsBody tr.lb-grade-c{
  background: linear-gradient(90deg, rgba(206,146,96,.28), rgba(176,108,66,.12));
  box-shadow: inset 0 0 0 1px rgba(214,156,110,.27);
}

#homeLeaderboardsBody tr.lb-grade-d{
  background: linear-gradient(90deg, rgba(191,102,38,.28), rgba(144,69,24,.12));
  box-shadow: inset 0 0 0 1px rgba(208,121,56,.26);
}

#homeLeaderboardsBody tr.lb-grade-e{
  background: linear-gradient(90deg, rgba(175,53,53,.28), rgba(128,34,34,.12));
  box-shadow: inset 0 0 0 1px rgba(202,80,80,.24);
}

#homeLeaderboardsBody tr.lb-rank-grade td{
  transition: transform .18s ease, filter .18s ease, background-position .45s ease;
}

#homeLeaderboardsBody tr.lb-rank-grade:hover td{
  transform: translateY(-2px);
  filter: brightness(1.1);
}

#homeLeaderboardsBody tr.lb-grade-s:hover td,
#homeLeaderboardsBody tr.lb-grade-a:hover td{
  background-image:none;
}

#homeLeaderboardsBody tr.lb-grade-s:hover{
  background-image:
    linear-gradient(90deg, rgba(214,232,255,.34), rgba(112,194,255,.2) 52%, rgba(172,232,255,.18)),
    linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.52) 45%, rgba(255,255,255,0) 68%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, -180% 0;
  background-repeat: no-repeat;
  animation: lbRankRibbon .45s ease-out 1;
}

#homeLeaderboardsBody tr.lb-grade-a:hover{
  background-image:
    linear-gradient(90deg, rgba(255,215,90,.28), rgba(255,190,70,.12)),
    linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.52) 45%, rgba(255,255,255,0) 68%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, -180% 0;
  background-repeat: no-repeat;
  animation: lbRankRibbon .45s ease-out 1;
}

@keyframes lbRankRibbon{
  0%{ background-position: 0 0, -180% 0; }
  100%{ background-position: 0 0, 170% 0; }
}

.leaderboardsLoading{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(4,6,14,.72);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.leaderboardsTableWrap.loading .leaderboardsLoading{
  opacity:1;
  pointer-events:auto;
}
.loadingSpinner{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
  border-top-color: rgba(0,229,255,.8);
  animation: spin 1s linear infinite;
}

@media (max-width: 880px){
  .leaderboardsMain{ gap:12px; }
}

#statsListSecondary{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:none;
  overflow:hidden;
}

#endStageEngagement #statsListSecondary{
  max-height:none;
  min-height:0;
  overflow:hidden;
  align-content:start;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:none;
  margin:0;
  align-items:stretch;
}

#endStageEngagement #statsListSecondary .engagementRow{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  width:100%;
  justify-items:stretch;
}

#endStageEngagement #statsListSecondary .engagementSection{
  display:grid;
  gap:2px;
  width:100%;
}

#endStageEngagement #statsListSecondary .engagementSectionTitle{
  font-size:12px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#b8deff;
  font-weight:700;
  padding:0 0 6px;
  margin:0 0 4px;
  text-align:left;
  border-left:none;
  border-bottom:1px solid rgba(184,222,255,.22);
}

#engagementColPowerups .engagementSectionTitle{
  text-align:left;
}

#endStageEngagement #statsListSecondary .endStatsMiniTile{
  min-width:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  padding:8px 10px;
  display:grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items:center;
  gap:8px;
}

#endStageEngagement #statsListSecondary .endStatsMiniIcon{
  width:52px;
  height:52px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  overflow:hidden;
}

#endStageEngagement #statsListSecondary .endStatsMiniIcon img{
  width:42px;
  height:42px;
  object-fit:contain;
}

#endStageEngagement #statsListSecondary .endStatsMiniMeta{
  min-width:0;
  display:grid;
  gap:1px;
  text-align:center;
  align-content:center;
}

#endStageEngagement #statsListSecondary .endStatsMiniLabel{
  font-size:9px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#endStageEngagement #statsListSecondary .endStatsMiniCount{
  font-size:18px;
  line-height:1;
  font-weight:700;
  color:#e8ecff;
}

#endStageEngagement #engagementColIcons #statsListSecondary .endStatsMiniTile{
  min-height:76px;
  padding:10px 12px;
  gap:10px;
}

#endStageEngagement #engagementColIcons #statsListSecondary .endStatsMiniIcon{
  width:56px;
  height:56px;
}

#endStageEngagement #engagementColIcons #statsListSecondary .endStatsMiniIcon img{
  width:44px;
  height:44px;
}

#endStageEngagement #engagementColIcons #statsListSecondary .endStatsMiniCount{
  font-size:20px;
}

#endStageEngagement #statsListSecondary .endStatsMiniActionBadge{
  font-size:7px;
  letter-spacing:0.8px;
}

#statsListSecondary .endStatsSection{
  grid-column: 1 / -1;
}

#statsListSecondary .endStatsSection.endStatsCompact{
  grid-column: auto;
  width: fit-content;
  max-width: 100%;
  justify-self:start;
}

@media (max-width: 680px){
  #statsList{
    grid-template-columns: 1fr;
  }
  #statsListSecondary{
    width:100%;
  }
  #statsListSecondary .endStatsSection.endStatsCompact{
    grid-column: 1 / -1;
    width: 100%;
  }
  #endStageEngagement #statsListSecondary .engagementRow{
    grid-template-columns: 1fr;
  }
}

/* ── Engagement tile entrance animation ── */
@keyframes engageTileIn{
  from{ opacity:0; transform: translateY(10px) scale(0.97); }
  to  { opacity:1; transform: none; }
}
#endStageEngagement .endStatsMiniTile{
  animation: engageTileIn 0.26s ease both;
}

/* ── Engagement tile colour variants ── */
#endStageEngagement .tile-collected .endStatsMiniIcon{
  background: rgba(0,229,255,.12);
  border-color: rgba(0,229,255,.28);
}
#endStageEngagement .tile-collected{
  border-color: rgba(0,229,255,.22);
}
#endStageEngagement .tile-used .endStatsMiniIcon{
  background: rgba(255,190,60,.12);
  border-color: rgba(255,190,60,.28);
}
#endStageEngagement .tile-used{
  border-color: rgba(255,190,60,.2);
}
#endStageEngagement .tile-missed .endStatsMiniIcon{
  background: rgba(255,70,90,.12);
  border-color: rgba(255,70,90,.28);
}
#endStageEngagement .tile-missed{
  border-color: rgba(255,70,90,.2);
}
#endStageEngagement .tile-maneuver .endStatsMiniIcon{
  background: rgba(170,100,255,.12);
  border-color: rgba(170,100,255,.28);
}
#endStageEngagement .tile-maneuver{
  border-color: rgba(170,100,255,.2);
}

/* ── Action badge (split label) ── */
#endStageEngagement .endStatsMiniActionBadge{
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-weight:700;
  opacity:.6;
  line-height:1;
  margin-bottom:1px;
}

/* ── Section title (engagement uses centered rule above) ── */
#endStageEngagement .engagementSectionTitle{
  border-left: none;
}

/* ── Compact powerup stats table ── */
.puStatsTable{
  width:100%;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
}

#endStageEngagement .puStatsTable{
  max-width:none;
  margin:0;
  width:100%;
}

#engagementColPowerups .puStatsTable{
  border-radius:12px;
}

.puStatsRow{
  display:grid;
  grid-template-columns: 36px 1fr 72px 72px;
  align-items:center;
  padding:7px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  animation: engageTileIn 0.22s ease both;
}

#endStageEngagement .puStatsRow{
  grid-template-columns: 28px minmax(0, 1fr) 44px 44px;
  padding:3px 6px;
  gap:4px;
}

#engagementColPowerups .puStatsRow{
  grid-template-columns: 40px minmax(0, 1fr) 58px 58px;
  padding:9px 10px;
  gap:8px;
}
#engagementColPowerups .puStatsRow:nth-child(even):not(.puStatsHeader){
  background:rgba(0,229,255,.035);
}
.puStatsRow:last-child{ border-bottom:none; }
.puStatsRow:nth-child(odd):not(.puStatsHeader){ background:rgba(255,255,255,.02); }
.puStatsHeader{
  background:rgba(0,0,0,.3);
  animation:none;
}
.puStatsColHead{
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(232,236,255,.4);
  text-align:center;
}

#endStageEngagement .puStatsColHead{
  font-size:8px;
  letter-spacing:1px;
}

#engagementColPowerups .puStatsColHead{
  font-size:10px;
  letter-spacing:1.4px;
}

.puStatsIconCell img{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
}

#endStageEngagement .puStatsIconCell img{
  width:22px;
  height:22px;
}

#engagementColPowerups .puStatsIconCell img{
  width:32px;
  height:32px;
}

.puStatsName{
  font-size:11px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:rgba(232,236,255,.85);
}

#endStageEngagement .puStatsName{
  font-size:9px;
  letter-spacing:0.6px;
  text-align:left;
}

#engagementColPowerups .puStatsName{
  font-size:11px;
  letter-spacing:0.85px;
}

.puStatsNum{
  text-align:center;
  font-size:15px;
  font-weight:700;
}

#endStageEngagement .puStatsNum{
  font-size:12px;
}

#engagementColPowerups .puStatsNum{
  font-size:17px;
}
.puStatsPicked{ color:rgba(0,229,255,.9); }
.puStatsMissed{ color:rgba(255,80,90,.75); }

@media (max-width: 980px){
  #overlayEnd .card{
    width:min(940px, 100%);
  }
  #endStageEngagement .endStatsWrap .panel{
    min-height:0;
  }
  .engagementSplit{
    grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.48fr);
    gap:14px;
  }
}

@media (max-width: 720px){
  .engagementSplit{
    grid-template-columns: 1fr;
  }
  .engagementSplit .engagementColPowerups{ order: 1; }
  .engagementSplit .engagementColIcons{ order: 2; }
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

.meter{ height:10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.05); overflow:hidden; }
.meter > div{ height:100%; width:0%; background: linear-gradient(90deg, rgba(193,216,47,.85), rgba(255,221,0,.85)); }

#toast{
  position:absolute;
  right:24px;
  top:50%;
  transform: translateY(-50%);
  z-index:8;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.55);
  color:var(--text);
  font-size:16px;
  letter-spacing:.2px;
  display:none;
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
  user-select:none;
}

#toast.toast-good{
  border-color: rgba(28,220,120,.7);
  background: rgba(10,26,18,.86);
  color: rgba(220,255,235,.95);
  box-shadow: 0 18px 55px rgba(28,220,120,.2);
}

#toast.toast-bad{
  border-color: rgba(255,77,109,.7);
  background: rgba(32,12,18,.86);
  color: rgba(255,225,232,.95);
  box-shadow: 0 18px 55px rgba(255,77,109,.2);
}

#toast.toast-alert{
  border-color: rgba(255,210,70,.9);
  background: rgba(36,26,10,.9);
  color: rgba(255,236,168,.98);
  font-size: 42px;
  line-height: 1;
  padding: 8px 14px;
  box-shadow: 0 0 0 1px rgba(255,210,70,.2), 0 14px 46px rgba(255,166,0,.4);
  animation: toastAlertFlash .22s ease-in-out infinite alternate;
}

@keyframes toastAlertFlash{
  from{ opacity: .65; transform: translateY(-50%) scale(0.94); }
  to{ opacity: 1; transform: translateY(-50%) scale(1.08); }
}

.toastAboveNext{
  position:absolute;
  right:18px;
  bottom:64px;
  top:auto;
  transform:none;
  z-index:20;
  font-size:14px;
}
#toast.show{ display:block; }

.countdown{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9;
  background: rgba(0,0,0,.35);
  color:var(--text);
  font-size: clamp(48px, 12vw, 140px);
  font-weight:900;
  letter-spacing:8px;
  text-shadow:
    0 0 18px rgba(0,229,255,.35),
    0 0 22px rgba(175,0,111,.25),
    0 18px 44px rgba(0,0,0,.55);
}
.countdown.show{ display:flex; }

/* Level-up banner */
#levelUpBanner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:8;
  opacity:0;
}
#levelUpBanner.show{
  animation: levelUpBannerAnim 1.2s ease forwards;
}
.levelUpText{
  font-size: clamp(36px, 8vw, 88px);
  font-weight:900;
  letter-spacing:8px;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  text-shadow:
    0 0 18px rgba(0,229,255,.9),
    0 0 40px rgba(0,229,255,.5),
    0 0 80px rgba(0,229,255,.2),
    0 16px 50px rgba(0,0,0,.7);
}
@keyframes levelUpBannerAnim{
  0%  { opacity:0; transform: scale(0.72); }
  16% { opacity:1; transform: scale(1.1); }
  32% { opacity:1; transform: scale(1); }
  68% { opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.04) translateY(-10px); }
}

/* HUD low-life danger pulse */
@keyframes hudDanger{
  0%,100%{ box-shadow: none; border-color: transparent; }
  50%    { box-shadow: 0 0 0 2px rgba(255,50,70,.5), 0 0 24px 6px rgba(255,50,70,.18); }
}
#hud.hud-danger{
  border-radius:12px;
  animation: hudDanger 1s ease-in-out infinite;
}

.noselect{ -webkit-user-select:none; user-select:none; }

/* Settings overlay tabs */
#overlayMenu .settingsBody,
#settingsOverlay .settingsBody{
  grid-template-columns: 200px 1fr;
  gap:16px;
  align-items:start;
}

#overlayMenu .settingsTabs,
#settingsOverlay .settingsTabs{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#overlayMenu .settingsTabBtn,
#settingsOverlay .settingsTabBtn{
  text-transform:uppercase;
  letter-spacing:.8px;
}

#overlayMenu .settingsTabBtn.active,
#settingsOverlay .settingsTabBtn.active{
  border-color: rgba(0,229,255,.5);
  background: rgba(0,229,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

#overlayMenu .settingsPanels,
#settingsOverlay .settingsPanels{
  display:grid;
  gap:12px;
  max-height: min(62vh, 560px);
  overflow:auto;
  padding-right:4px;
}

.audioLayout{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(520px, 1.5fr);
  gap:14px;
  align-items:start;
}

.audioSfxPanel{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: min(52vh, 420px);
  overflow:auto;
  overflow-x:hidden;
}

.audioSfxPanel .catalogTogglePanel{
  max-height: 320px;
  overflow:auto;
  overflow-x:hidden;
  padding-right:4px;
}

@media (max-width: 980px){
  .audioLayout{ grid-template-columns: 1fr; }
  .audioSfxPanel{ max-height: none; }
  .audioSfxPanel .catalogTogglePanel{ max-height: 260px; }
}

#overlayMenu .settingsPanel{ display:none; }
#overlayMenu .settingsPanel.active{ display:block; }

#overlayMenu .settingsToggleRow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

#overlayMenu .toggleRow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}

#overlayMenu .settingsCommands{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

#overlayMenu .catalogGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

@media (max-width: 880px){
  #overlayMenu .catalogGrid{ grid-template-columns: 1fr; }
}

.wideGameplay #gameShell{
  width:min(1280px, 100%);
  max-width:1280px;
}

.wideGameplay #hud{
  width:100%;
  left:0;
  right:0;
  transform:none;
}

/* Settings title + actions */
#overlayMenu .settingsTitle{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-transform:uppercase;
}

#overlayMenu .settingsTitleMain{
  font-size:20px;
  letter-spacing:4px;
  font-weight:700;
  color:#ffffff;
  text-shadow: 0 6px 16px rgba(0,0,0,.4);
}

#overlayMenu .settingsTitleSub{
  font-size:12px;
  letter-spacing:2px;
  color:rgba(232,236,255,.7);
}

#overlayMenu .settingsActions{
  display:flex;
  gap:10px;
  align-items:center;
}

#overlayMenu .settingsTitleBlock .subtitle{
  margin-top:6px;
}

#overlayMenu .catalogButtons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}

#overlayMenu .settingsCatalogBtn.active{
  border-color: rgba(0,229,255,.5);
  background: rgba(0,229,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

#overlayMenu .catalogSection{ display:none; }
#overlayMenu .catalogSection.active{ display:block; }

#overlayMenu .singleCatalog{
  grid-template-columns: 1fr;
}

/* Home settings tabs */
#settingsOverlay .settingsBody{
  grid-template-columns: 200px 1fr;
  gap:16px;
  align-items:start;
}

#settingsOverlay .settingsTabs{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#settingsOverlay .settingsNavColumn{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

#settingsOverlay .settingsTabBtn,
#settingsOverlay .settingsSideBtn{
  width:100%;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.8px;
}

#settingsOverlay .settingsTabBtn.active{
  border-color: rgba(0,229,255,.5);
  background: rgba(0,229,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

#settingsOverlay .settingsPanels{
  display:grid;
  gap:12px;
  max-height: min(62vh, 560px);
  overflow:auto;
  padding-right:4px;
}

#settingsOverlay .settingsPanel{ display:none; }
#settingsOverlay .settingsPanel.active{ display:block; }

#settingsOverlay .settingsToggleRow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

#settingsOverlay .settingsCommands{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

#settingsOverlay .settingsTitle{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-transform:uppercase;
}

#settingsOverlay .settingsTitleMain{
  font-size:20px;
  letter-spacing:4px;
  font-weight:700;
  color:#ffffff;
  text-shadow: 0 6px 16px rgba(0,0,0,.4);
}

#settingsOverlay .settingsTitleSub{
  font-size:12px;
  letter-spacing:2px;
  color:rgba(232,236,255,.7);
}

#settingsOverlay .card{
  width:min(1220px, 96%);
  background: linear-gradient(160deg, rgba(10,14,28,.98), rgba(6,8,22,.96));
}

#leaderboardsOverlay .card{
  background: linear-gradient(160deg, rgba(10,14,28,.98), rgba(6,8,22,.98));
}

.campaignView{ display:none; }
.campaignView.active{ display:grid; }

.campaignProfilesGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:12px;
}

.campaignProfileCard{
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:16px;
  background: rgba(8,12,24,.7);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:190px;
}

.campaignProfileCard.active{
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 18px 35px rgba(0,229,255,.14);
}

.campaignProfileHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:1px;
}

.campaignProfileName{
  font-size:18px;
  font-weight:600;
}

.campaignProfileStatus{
  font-size:11px;
  color:var(--muted);
}

.campaignProfileDesc{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

.campaignProfileActions{
  margin-top:auto;
  display:flex;
  gap:10px;
}

.campaignProfileInput{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.campaignProfileInput input{
  flex:1;
  min-width:140px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.08);
  color:var(--text);
  padding:8px 10px;
  font-family: inherit;
}

.campaignProfileCard.empty .campaignProfileName{
  color:rgba(255,255,255,.7);
}

.campaignProfileCard .btnDanger{
  border-color: rgba(255,77,109,.45);
  background: rgba(255,77,109,.14);
}

.campaignProfileCard .btnDanger:hover{
  background: rgba(255,77,109,.2);
}

.campaignActions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.campaignFooter{
  justify-content:flex-end;
  padding: 0 18px 18px;
}

@media (max-width: 900px){
  .campaignProfilesGrid{ grid-template-columns: 1fr; }
}