/* ============================================================
   Darktide — survivors-like arcade game.
   Full-bleed 3D stage with an HTML HUD + screen overlays on top.
   Palette rides on the site's dark blue-black with ember/teal/gold.
   ============================================================ */

.survive-page {
  overflow: hidden;            /* the game owns the viewport */
  overscroll-behavior: none;
  touch-action: none;
}
.survive-page .site-nav { position: relative; z-index: 40; }

.survive-main { position: static; }

/* ---- element-tint accents reused by the HUD ---- */
.survive-page {
  --sv-fire:   #ff6a2c;
  --sv-ice:    #66d8ff;
  --sv-poison: #7be88a;
  --sv-thunder:#b46bff;
  --sv-gold:   #ffd166;
  --sv-blood:  #e8455e;
  --sv-ink:    #0a1326;
}

/* ===== anon gate ===== */
.survive-gate {
  min-height: 70vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  padding: 40px 20px;
}
.survive-gate h1 { font-family: "Cinzel Decorative", serif; font-size: clamp(2.4rem,7vw,4rem); margin: 0; color: #f2ead6; }
.survive-gate p { color: #b9c2d6; max-width: 32ch; margin: 0 0 8px; }

/* ===== full-bleed stage ===== */
.survive-game { position: static; }
.sv-stage {
  position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% 0%, #16213f 0%, #0a1226 55%, #050a16 100%);
  overflow: hidden;
}
.sv-stage > canvas { display: block; width: 100% !important; height: 100% !important; }

/* ============================================================
   HUD (overlaid; layer ignores pointer except on controls)
   ============================================================ */
.sv-hud {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
}
.sv-hud > * { pointer-events: auto; }

/* shared glass panel — matches the site's gold-edged dark-glass cards */
.sv-panel {
  background: linear-gradient(180deg, rgba(18,22,40,.62), rgba(8,12,24,.58));
  border: 1px solid rgba(255,209,102,.18); border-radius: 12px;
  backdrop-filter: blur(7px); box-shadow: 0 4px 16px rgba(0,0,0,.42);
}

/* ===== TOP BAR: hero chip · timer/boss · system buttons ===== */
.sv-top {
  position: absolute; top: calc(var(--sv-navh, 60px) + 8px); left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 0 14px; pointer-events: none;
}
.sv-top > * { pointer-events: auto; }

.sv-topleft { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.sv-build { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px; max-width: min(252px, 64vw); }
.sv-build:empty { display: none; }
.sv-build-sep { flex: 0 0 100%; height: 1px; background: rgba(255,209,102,.22); margin: 1px 0; }

/* ---- co-op: ally roster under the build (HP / rage / XP + downed skull) — compact ---- */
.sv-allies { display: flex; flex-direction: column; gap: 6px; width: min(264px, 64vw); pointer-events: none; }
.sv-ally { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; background: rgba(10,14,28,.64); border: 1px solid rgba(255,255,255,.11); }
.sv-ally.downed { border-color: rgba(232,69,94,.5); background: rgba(40,12,18,.6); }
.sv-ally-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.06) center/cover no-repeat; border: 1.5px solid rgba(255,255,255,.18); }
.sv-ally.downed .sv-ally-av { filter: grayscale(.7) brightness(.7); border-color: var(--sv-blood); }
.sv-ally-skull { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--sv-blood); text-shadow: 0 1px 3px #000; }
.sv-ally.downed .sv-ally-skull { display: flex; }
.sv-ally-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sv-ally-name { font-size: .82rem; font-weight: 700; color: #f1e7cf; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.sv-ally-bars { display: flex; flex-direction: column; gap: 2px; }
.sv-ally-bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.sv-ally-bar > i { display: block; height: 100%; width: 0%; }
.sv-ally-bar.hp > i { background: linear-gradient(90deg, #e8455e, #ff8a5c); }
.sv-ally-bar.rage > i { background: linear-gradient(90deg, #ffb52e, #ffe27a); }
.sv-ally-bar.xp > i { background: linear-gradient(90deg, #6fd1ff, #b98bff); }

/* ---- co-op: floating ally nameplates (+ revive bar when downed) over their models ---- */
.sv-nameplates { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.sv-nameplate { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; will-change: transform; }
.sv-np-name { font-size: .66rem; font-weight: 700; color: #eee6d2; letter-spacing: .02em; background: rgba(8,12,22,.62); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 1px 8px; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.sv-nameplate.downed .sv-np-name { color: #ffb9c2; border-color: rgba(232,69,94,.55); }
.sv-np-skull { display: none; margin-right: 4px; color: var(--sv-blood); }
.sv-nameplate.downed .sv-np-skull { display: inline; }
.sv-np-revive { display: none; width: 96px; height: 9px; border-radius: 5px; background: rgba(0,0,0,.62); border: 1px solid rgba(255,209,102,.55); overflow: hidden; box-shadow: 0 0 10px rgba(255,209,102,.3); }
.sv-nameplate.downed .sv-np-revive { display: block; }
.sv-np-revive > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ffd166, #7be88a); box-shadow: 0 0 8px rgba(123,232,138,.6); }

/* co-op: "waiting for a teammate's pick" pill (sim is paused) */
.sv-hold { position: absolute; left: 50%; top: 34%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(8,12,22,.8); border: 1px solid rgba(255,209,102,.4); color: #f1e7cf; font-weight: 700; font-size: .95rem; letter-spacing: .02em; text-shadow: 0 1px 4px #000; z-index: 6; pointer-events: none; }
.sv-hold[hidden] { display: none; }
.sv-hold-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(255,209,102,.3); border-top-color: var(--sv-gold); animation: sv-hold-spin .8s linear infinite; }
@keyframes sv-hold-spin { to { transform: rotate(360deg); } }

/* co-op: the downed player's own prominent revive overlay */
.sv-downed { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 16px; background: rgba(36,10,16,.82); border: 1px solid rgba(232,69,94,.55); box-shadow: 0 10px 40px rgba(0,0,0,.5); z-index: 6; pointer-events: none; text-align: center; }
.sv-downed[hidden] { display: none; }
.sv-downed-skull { font-size: 1.9rem; color: var(--sv-blood); text-shadow: 0 2px 8px rgba(232,69,94,.5); animation: sv-downed-pulse 1.1s ease-in-out infinite; }
@keyframes sv-downed-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.sv-downed-txt { font-weight: 700; font-size: 1rem; color: #ffd7dd; text-shadow: 0 1px 4px #000; }
.sv-downed-bar { width: min(260px, 70vw); height: 12px; border-radius: 7px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,209,102,.45); overflow: hidden; }
.sv-downed-bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ffd166, #7be88a); box-shadow: 0 0 10px rgba(123,232,138,.6); transition: width .08s linear; }

/* co-op: who paused the shared run */
.sv-pause-by { display: inline-flex; align-items: center; gap: 10px; margin: 2px auto 14px; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(102,216,255,.1); border: 1px solid rgba(102,216,255,.35); }
.sv-pause-by[hidden] { display: none; }
.sv-pause-byav { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08) center/cover no-repeat; border: 2px solid var(--sv-ice); display: grid; place-items: center; font-weight: 800; color: var(--sv-ice); font-size: .95rem; }
.sv-pause-bytx { font-size: .92rem; color: #d9e6ff; }
.sv-pause-bytx b { color: #fff; }
.sv-ab.pass { box-shadow: 0 0 0 1px rgba(255,209,102,.5) inset, 0 2px 8px rgba(0,0,0,.5); }
.sv-hero-chip { display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; }
.sv-portrait { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,209,102,.42); background: #0c1430; flex: 0 0 auto; }
.sv-hero-meta { display: flex; flex-direction: column; gap: 1px; line-height: 1.18; }
.sv-meta-lvl { font-family: "Cinzel", serif; font-weight: 700; font-size: .88rem; color: #f3ead4; }
.sv-meta-lvl b { color: var(--sv-gold); }
.sv-meta-kills { font-size: .76rem; font-weight: 700; color: #cdd3e2; display: inline-flex; align-items: center; gap: 4px; }
.sv-meta-kills i { opacity: .8; font-style: normal; }
.sv-meta-kills b { color: #fff; }

.sv-top-center { display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; flex: 1; min-width: 0; }
.sv-timer {
  font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  color: #f4ecd6; letter-spacing: .04em; text-shadow: 0 2px 14px rgba(0,0,0,.7); font-variant-numeric: tabular-nums;
}
.sv-wave { font-size: .78rem; color: var(--sv-blood); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; min-height: 1em; text-shadow: 0 1px 6px #000; }

.sv-sys { display: flex; gap: 5px; padding: 5px; }
.sv-iconbtn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,30,.4); color: #e7ddc4; cursor: pointer; line-height: 1;
  display: grid; place-items: center; font-size: .92rem; transition: border-color .15s, color .15s;
}
.sv-iconbtn:hover { border-color: var(--sv-gold); color: var(--sv-gold); }
#sv-guide-btn { font-family: "Cinzel", serif; font-weight: 800; font-size: 1rem; }
.sv-iconbtn.off { opacity: .5; }

/* ===== ability chips ===== */
.sv-ab {
  width: 42px; height: 42px; border-radius: 10px; position: relative; overflow: hidden;
  background: #0c1430 center/cover no-repeat; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 8px rgba(0,0,0,.5); display: grid; place-items: center;
  font-weight: 900; color: #e8dcbf;
}
.sv-ab[data-elem="fire"]   { box-shadow: 0 0 0 1px var(--sv-fire) inset, 0 2px 8px rgba(0,0,0,.5); }
.sv-ab[data-elem="ice"]    { box-shadow: 0 0 0 1px var(--sv-ice) inset, 0 2px 8px rgba(0,0,0,.5); }
.sv-ab[data-elem="poison"] { box-shadow: 0 0 0 1px var(--sv-poison) inset, 0 2px 8px rgba(0,0,0,.5); }
.sv-ab[data-elem="thunder"]{ box-shadow: 0 0 0 1px var(--sv-thunder) inset, 0 2px 8px rgba(0,0,0,.5); }
.sv-ab-lvl { position: absolute; bottom: 1px; right: 3px; font-size: .62rem; font-weight: 900; color: var(--sv-gold); text-shadow: 0 1px 2px #000; }
.sv-ab-cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.62) var(--cd,0%), transparent 0); pointer-events: none; }

/* ===== BOTTOM: one centered cluster — abilities over bars+ult ===== */
.sv-bottom {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: min(640px, 94vw); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.sv-abilities { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; pointer-events: auto; }
.sv-barwrap { display: flex; align-items: flex-end; gap: 14px; width: 100%; }
.sv-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.sv-bar {
  position: relative; height: 15px; border-radius: 8px; overflow: hidden;
  background: rgba(6,10,20,.72); border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.sv-bar i { position: absolute; inset: 0; transform-origin: left; transition: width .12s linear; display: block; }
.sv-bar-xp  { height: 11px; }
.sv-bar-xp  i { background: linear-gradient(90deg, #6fd1ff, #b98bff); width: 0%; }
.sv-bar-hp  i { background: linear-gradient(90deg, #e8455e, #ff8a5c); width: 100%; }
.sv-bar-rage i { background: linear-gradient(90deg, #ffb52e, #ffe27a); width: 0%; }
.sv-bar-rage.ready i { animation: sv-rage-pulse .8s ease-in-out infinite; }
@keyframes sv-rage-pulse { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.5); } }
.sv-bar-txt { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .62rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: .08em; }

.sv-ult {
  pointer-events: auto; width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255,209,102,.5); background: radial-gradient(circle at 50% 35%, #2a2140, #120c22);
  color: var(--sv-gold); display: grid; place-items: center; cursor: pointer; position: relative; overflow: visible;
  transition: transform .1s, filter .2s; opacity: .5;
}
.sv-ult:not(:disabled) { opacity: 1; box-shadow: 0 0 18px rgba(255,209,102,.55); animation: sv-rage-pulse 1s ease-in-out infinite; }
.sv-ult:not(:disabled):active { transform: scale(.92); }
.sv-ult-ic { font-size: 1.6rem; line-height: 1; display: grid; place-items: center; }
.sv-ult-key { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: .55rem; letter-spacing: .1em; color: #9aa4bd; }

/* mobile joystick */
.sv-stick {
  position: fixed; z-index: 22; width: 120px; height: 120px; border-radius: 50%;
  background: rgba(8,14,28,.35); border: 1px solid rgba(255,255,255,.14);
  pointer-events: none; transform: translate(-50%,-50%);
}
.sv-stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e9ddc0, #b9a87e); box-shadow: 0 3px 10px rgba(0,0,0,.5); }

/* damage numbers */
.sv-dmg { position: fixed; inset: 0; z-index: 18; pointer-events: none; overflow: hidden; }
.sv-num {
  position: absolute; font-family: "Cinzel", serif; font-weight: 900; font-size: .95rem;
  color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.6); will-change: transform, opacity;
  white-space: nowrap; transform: translate(-50%,-50%);
}
.sv-num.crit { font-size: 1.5rem; color: var(--sv-gold); }
.sv-num.heal { color: var(--sv-poison); }
.sv-num.fire { color: var(--sv-fire); }
.sv-num.ice  { color: var(--sv-ice); }
.sv-num.poison { color: var(--sv-poison); }
.sv-num.thunder { color: var(--sv-thunder); }

/* hurt flash / vignette */
.sv-flash { position: fixed; inset: 0; z-index: 17; pointer-events: none; opacity: 0; box-shadow: inset 0 0 140px 30px var(--sv-blood); transition: opacity .08s; }
.sv-flash.on { opacity: .8; transition: opacity .35s; }

/* ---- real-icon swap (glyph is the fallback) ---- */
.sv-ico-gl { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.has-img .sv-ico-gl { display: none; }
.sv-ab.has-img, .sv-card-ic.has-img { background-size: cover; background-position: center; }
.sv-ult-ic.has-img { width: 42px; height: 42px; border-radius: 9px; background-size: cover; background-position: center; }

/* ---- boss health bar ---- */
.sv-boss { margin-top: 1px; width: min(58vw, 440px); pointer-events: none; text-align: center; }
.sv-boss-name { font-family: "Cinzel", serif; font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #ffb9c2; text-shadow: 0 1px 4px #000; margin-bottom: 3px; }
.sv-boss-bar { height: 13px; border-radius: 7px; overflow: hidden; background: rgba(6,10,20,.7); border: 1px solid rgba(255,90,110,.55); box-shadow: 0 0 16px rgba(232,69,94,.45); }
.sv-boss-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff3050, #ff8a5c); transition: width .12s linear; }

/* ---- radar ---- */
.sv-radar { position: absolute; right: 14px; top: calc(var(--sv-navh, 60px) + 56px); width: 86px; height: 86px; pointer-events: none; opacity: .9; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }

/* ---- persistent low-HP red vignette ---- */
.sv-lowhp { position: fixed; inset: 0; z-index: 16; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 26px rgba(232,69,94,.55); transition: opacity .3s; }
.sv-lowhp.on { opacity: .6; animation: sv-lowpulse 1.1s ease-in-out infinite; }
@keyframes sv-lowpulse { 0%, 100% { opacity: .32; } 50% { opacity: .68; } }

/* ===== guide / field manual ===== */
/* full-page sheet: widen the inner and use the whole viewport height so the manual
   fits without scrolling where it can (dense multi-column grids below). The × in the
   corner + a centred Close footer mirror the Auto Chess guide. */
.sv-guide .sv-screen-inner {
  text-align: left; position: relative;
  width: min(1180px, 97vw);
  max-height: calc(100dvh - var(--sv-navh, 60px) - 22px);
  padding: clamp(16px, 2.6vw, 30px) clamp(18px, 3vw, 38px) clamp(14px, 2vw, 24px);
}
/* corner close — absolute top-right of the sheet */
.sv-guide-x {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(8,12,24,.55); border: 1px solid rgba(255,255,255,.14);
  color: #e8dcbf; font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
  transition: background .15s, border-color .15s, transform .12s;
}
.sv-guide-x:hover { background: rgba(232,69,94,.22); border-color: var(--sv-blood); transform: scale(1.05); }
.sv-guide-title { font-family: "Cinzel Decorative", serif; text-align: center; color: var(--sv-gold); font-size: clamp(1.5rem, 5vw, 2.1rem); margin: 0 0 4px; padding: 0 44px; }
.sv-guide-intro { text-align: center; color: #c2cadc; font-size: .86rem; margin: 0 0 6px; }
.sv-g-h { font-family: "Cinzel", serif; color: #f3ead4; font-size: 1.05rem; letter-spacing: .04em; margin: 14px 0 7px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,209,102,.18); }
.sv-g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sv-g-row { display: flex; gap: 10px; align-items: flex-start; background: rgba(8,12,24,.5); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px; }
.sv-g-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 9px; background: #0c1430 center/cover no-repeat; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; font-size: 1.2rem; color: #e8dcbf; }
.sv-g-ic.has-img { background-size: cover; background-position: center; }
.sv-g-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-g-txt b { font-family: "Cinzel", serif; color: #f3ead4; font-size: .98rem; }
.sv-g-sub { font-size: .8rem; color: #aeb6cb; line-height: 1.35; }
.sv-g-tagel { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.sv-g-evo { font-size: .8rem; color: var(--sv-gold); margin-top: 3px; font-weight: 700; }
.sv-g-need { color: #c9b98a; font-weight: 500; }
.sv-el-fire { color: var(--sv-fire); } .sv-el-ice { color: var(--sv-ice); } .sv-el-poison { color: var(--sv-poison); } .sv-el-thunder { color: var(--sv-thunder); } .sv-el-physical { color: #e8c878; }
.sv-guide-foot { text-align: center; margin-top: 16px; }
#sv-guide-close { margin-top: 0; }

/* ===== chest reward ===== */
.sv-chest-ic { font-size: 3.2rem; line-height: 1; animation: sv-rage-pulse 1.2s ease-in-out infinite; }
.sv-chest-title { font-family: "Cinzel Decorative", serif; color: var(--sv-gold); font-size: clamp(1.7rem, 5vw, 2.5rem); margin: 6px 0 4px; }
.sv-chest-rewards { display: flex; flex-direction: column; gap: 10px; margin: 16px auto; max-width: 420px; }
.sv-chest-row { display: flex; align-items: center; gap: 12px; text-align: left; background: rgba(8,12,24,.55); border: 1px solid rgba(255,209,102,.25); border-radius: 12px; padding: 10px 14px; opacity: 0; transform: translateY(10px); animation: sv-chest-in .42s ease forwards; }
@keyframes sv-chest-in { to { opacity: 1; transform: none; } }
.sv-chest-rico { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 11px; background: #0c1430 center/cover no-repeat; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.5rem; color: #e8dcbf; }
.sv-chest-rico.has-img { background-size: cover; background-position: center; }
.sv-chest-rtx { display: flex; flex-direction: column; }
.sv-chest-rtx b { font-family: "Cinzel", serif; color: #f3ead4; font-size: 1.1rem; }
.sv-chest-rtx span { font-size: .82rem; color: var(--sv-gold); }
.sv-chest-row.evolve { border-color: var(--sv-blood); box-shadow: 0 0 16px rgba(232,69,94,.3); }
.sv-chest-row.evolve .sv-chest-rtx span { color: var(--sv-blood); }

/* ===== leaderboard ===== */
.sv-lb-title { font-family: "Cinzel Decorative", serif; text-align: center; color: var(--sv-gold); font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 0 0 12px; }
.sv-lb-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.sv-lb-modes { margin-bottom: 8px; }
.sv-lb-modes .sv-lb-tab { min-width: 96px; }
.sv-lb-modes .sv-lb-tab.is-active { background: rgba(102,216,255,.12); border-color: var(--sv-ice); color: var(--sv-ice); }
.sv-lb-tab { background: rgba(8,12,24,.5); border: 1px solid rgba(255,255,255,.14); color: #cdd3e2; padding: 7px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .85rem; }
.sv-lb-tab.is-active { border-color: var(--sv-gold); color: var(--sv-gold); }
.sv-lb-party { flex: none; margin-left: 6px; font-size: .64rem; font-weight: 800; letter-spacing: .03em; color: var(--sv-ice); background: rgba(102,216,255,.14); border: 1px solid rgba(102,216,255,.4); border-radius: 999px; padding: 1px 6px; }
.sv-lb-headrow { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; padding: 0 12px 6px; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: #99a2ba; border-bottom: 1px solid rgba(255,255,255,.1); }
.sv-lb-h-score { text-align: right; }
.sv-lb-body { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 4px; max-height: 52vh; overflow-y: auto; }
.sv-lb-empty { text-align: center; color: #99a2ba; padding: 22px 0; }
.sv-lb-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(8,12,24,.5); border: 1px solid rgba(255,255,255,.07); }
.sv-lb-row.you { border-color: var(--sv-gold); background: rgba(40,32,20,.6); }
.sv-lb-row.foot { margin-top: 4px; }
.sv-lb-rank { font-family: "Cinzel", serif; font-weight: 900; color: #f4ecd6; text-align: center; }
.sv-lb-row:first-child .sv-lb-rank { color: var(--sv-gold); }
.sv-lb-player { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sv-lb-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.18); background: #0c1430; }
.sv-lb-av-fb { display: grid; place-items: center; background: #2a2440; color: #e8dcbf; font-weight: 800; font-size: .8rem; }
.sv-lb-name { font-weight: 700; color: #ece3cd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-lb-score { text-align: right; display: flex; flex-direction: column; line-height: 1.12; }
.sv-lb-score b { font-family: "Cinzel", serif; color: var(--sv-gold); font-size: 1.05rem; }
.sv-lb-score i { font-style: normal; font-size: .66rem; color: #99a2ba; }
#sv-lb-close { margin-top: 8px; }

/* ============================================================
   Screens (start / level-up / pause / results / loading)
   ============================================================ */
/* [hidden] must win over the display rules below (class selectors out-specify the UA [hidden] rule) */
.sv-screen[hidden], .survive-gate[hidden], .sv-hud[hidden], .sv-stick[hidden], .survive-game[hidden] { display: none !important; }

.sv-screen {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  /* clear the fixed nav: centre when content fits, pin below the nav when it's too tall to centre */
  align-items: safe center; padding: calc(var(--sv-navh, 60px) + 14px) 24px 22px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(12,18,36,.78), rgba(5,9,18,.92));
  backdrop-filter: blur(6px);
  animation: sv-fade .25s ease both;
}
@keyframes sv-fade { from { opacity: 0; } to { opacity: 1; } }
.sv-screen-inner {
  width: min(880px, 96vw); overflow: auto;
  max-height: calc(100vh - var(--sv-navh, 60px) - 36px);
  max-height: calc(100dvh - var(--sv-navh, 60px) - 36px);
  text-align: center; color: #ece3cd;
  border: 1px solid rgba(255,209,102,.18); border-radius: 18px; padding: clamp(20px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(20,16,30,.86), rgba(10,12,24,.92));
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

.sv-title { font-family: "Cinzel Decorative", serif; font-weight: 900; font-size: clamp(2.6rem, 8vw, 5rem); margin: .1em 0 .15em; color: #f4ecd6; }
.sv-title em { font-style: normal; color: var(--sv-blood); }
.sv-lead { color: #c2cadc; max-width: 52ch; margin: 0 auto 22px; line-height: 1.55; }
/* smaller title for the hero-select step (the big Darktide wordmark stays on step 1) */
.sv-title-sm { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: .1em 0 .12em; }

/* hero select */
/* compact cards so the whole roster fits one screen without an inner scrollbar */
.sv-heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 14px; }
.sv-hero {
  cursor: pointer; border-radius: 13px; padding: 11px 10px; text-align: center; position: relative;
  border: 1.5px solid rgba(255,255,255,.12); background: rgba(8,12,24,.6); transition: transform .12s, border-color .12s, box-shadow .12s;
}
.sv-hero:hover { transform: translateY(-3px); }
.sv-hero.sel { border-color: var(--sv-gold); box-shadow: 0 0 0 1px var(--sv-gold) inset, 0 12px 30px rgba(0,0,0,.5); background: rgba(28,22,38,.7); }
.sv-hero-port { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 7px; background: #11183300 center/cover no-repeat; border: 2px solid rgba(255,255,255,.14); }
.sv-hero-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1rem; color: #f3ead4; }
.sv-hero-class { font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; color: #9aa4bd; margin-top: 2px; }
.sv-hero-elem { display: inline-block; margin-top: 5px; font-size: .67rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.sv-hero-elem[data-elem="fire"]    { color: var(--sv-fire);    background: rgba(255,106,44,.14); }
.sv-hero-elem[data-elem="ice"]     { color: var(--sv-ice);     background: rgba(102,216,255,.14); }
.sv-hero-elem[data-elem="poison"]  { color: var(--sv-poison);  background: rgba(123,232,138,.14); }
.sv-hero-elem[data-elem="thunder"] { color: var(--sv-thunder); background: rgba(180,107,255,.14); }
.sv-hero-elem[data-elem="physical"]{ color: #e8c87a;           background: rgba(232,200,122,.14); }
.sv-hero-desc { font-size: .73rem; color: #aab3c8; margin-top: 6px; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- start-screen actions: mirrors /arcade/ab/ — two big CTAs over two ghost tiles ---- */
.sv-hero-head { padding-top: 0; }
.sv-start-actions {
  margin: clamp(20px,4vh,32px) auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  max-width: 480px;
}
/* the two big primary buttons (icon + two-line label) */
.sv-bigbtn {
  grid-column: 1 / -1; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  text-align: left; padding: .95rem 1.6rem; min-height: 66px;
}
/* crisp engraved SVG glyph in the button's ink colour — beats base `.btn svg { width:18px }` via the extra class */
.sv-bigbtn .sv-bigbtn-ic {
  width: 27px; height: 27px; flex: 0 0 auto; opacity: .9;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.25));
}
.sv-bigbtn-text { display: flex; flex-direction: column; gap: 2px; }
.sv-bigbtn-main { font-size: 1.12rem; letter-spacing: .05em; line-height: 1.05; }
.sv-bigbtn-sub {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; opacity: .68;
}
/* co-op CTA: same heft as the solo button but an azure cast so solo vs co-op reads
   instantly. Overrides the gold .btn-primary surface. */
.sv-mp-bigbtn {
  background: linear-gradient(180deg, #7fb6ff, #4e8ddb 50%, #2f5fa6);
  border-color: color-mix(in srgb, #7fb6ff 70%, white 30%);
  color: #0a1426;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(20,40,80,.45),
    0 5px 0 #2f5fa6, 0 14px 36px rgba(78,141,219,.45);
}
.sv-mp-bigbtn::after { background: linear-gradient(180deg, rgba(255,255,255,.32), transparent); }
.sv-mp-bigbtn.btn-primary::before { background: linear-gradient(110deg, transparent 30%, rgba(220,235,255,.5) 50%, transparent 70%); }
.sv-mp-bigbtn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(20,40,80,.45), 0 7px 0 #2f5fa6, 0 18px 44px rgba(78,141,219,.6); }
.sv-mp-bigbtn:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(20,40,80,.45), 0 0 0 #2f5fa6, 0 8px 24px rgba(78,141,219,.4); }
/* ghost "tile" buttons (leaderboard / guide) */
.sv-lb-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; min-height: 80px; padding: 12px 8px;
  background: linear-gradient(180deg, rgba(18,26,46,.72), rgba(12,18,34,.8));
  border: 1px solid rgba(201,162,74,.22);
  color: #f4ecd8; font-family: 'Manrope',sans-serif; font-weight: 700;
  border-radius: 14px; cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
/* faint gold hairline along the top edge — ties the tiles to the in-game panels */
.sv-lb-btn::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; opacity: .65;
  background: linear-gradient(90deg, transparent, rgba(242,204,106,.55), transparent);
}
.sv-lb-btn > span[aria-hidden] {
  font-size: 1.45rem; line-height: 1; filter: drop-shadow(0 1px 6px rgba(242,204,106,.25));
}
.sv-lb-btn > span:not([aria-hidden]) {
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: #b3a98b; transition: color .15s;
}
.sv-lb-btn:hover {
  border-color: rgba(242,204,106,.6); transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(38,32,18,.6), rgba(16,12,8,.75));
  box-shadow: 0 10px 24px rgba(0,0,0,.42), inset 0 0 0 1px rgba(242,204,106,.1);
}
.sv-lb-btn:hover > span:not([aria-hidden]) { color: #f4ecd8; }
.sv-lb-btn:active { transform: translateY(0) scale(.98); }

.sv-best { color: #c9b98a; font-weight: 700; margin-top: 16px; }
.sv-best b { color: var(--sv-gold); }
.sv-controls { margin-top: 12px; font-size: .78rem; color: #8b94ab; }

@media (max-width: 520px) {
  .sv-start-actions { grid-template-columns: 1fr; max-width: 340px; }
  .sv-lb-btn { flex-direction: row; gap: 12px; min-height: 54px; }
  .sv-lb-btn > span[aria-hidden] { font-size: 1.2rem; }
}

/* ===== Start + hero-select: match /arcade/ab/ exactly =====
   AB's start is an OPEN centred hero (subpage-hero header + button grid) sitting
   straight on the page — NOT a bordered glassy dialog. Our screens are fixed
   overlays (the 3D stage lives under them), so we keep the darkened backdrop for
   readability but strip the inner panel chrome and adopt AB's hero typography so
   the two menus read identically. */
/* AB's hero is top-aligned under the nav (not vertically centred) — match that so
   the eye lands on the title in the same place on both pages. */
.sv-start, .sv-heroselect, .sv-coop {
  /* identical backdrop to /arcade/ab/ — the shared body.subpage scene: scene-bg.jpg
     under dark-blue gradients + a vignette (our .sv-stage normally covers the body bg,
     so the menu screens repaint it here). */
  background:
    radial-gradient(ellipse 110% 75% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(8,14,28,.93) 0%, rgba(8,14,28,.88) 45%, rgba(6,11,22,.97) 100%),
    url('/items/scene-bg.jpg') center top / cover fixed no-repeat,
    #0a1326;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* match AB's padding: .ab-main side padding + the top offset of .ab-main + .ab-start */
.sv-start, .sv-heroselect {
  align-items: start;
  padding-left: clamp(10px, 1.6vw, 22px); padding-right: clamp(10px, 1.6vw, 22px);
  padding-top: calc(var(--sv-navh, 72px) + clamp(28px, 6vh, 80px));
}
.sv-start .sv-screen-inner,
.sv-heroselect .sv-screen-inner {
  border: none; background: none; box-shadow: none;
  width: min(720px, 96vw); padding: 6px 16px 18px;
}
/* hero-select: trim the top offset + match the inner cap to it so the whole roster fits without scrolling */
.sv-heroselect { padding-top: calc(var(--sv-navh, 72px) + clamp(12px, 3vh, 38px)); }
.sv-heroselect .sv-screen-inner { max-height: calc(100dvh - var(--sv-navh, 72px) - clamp(12px, 3vh, 38px) - 28px); }
/* title → AB's .subpage-title (gold em), not the giant blood-red Darktide wordmark */
.sv-start .sv-title,
.sv-heroselect .sv-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05;
  color: #f1ead4; text-shadow: 0 4px 18px rgba(0,0,0,.6); margin: 16px 0 8px;
}
.sv-start .sv-title em,
.sv-heroselect .sv-title em { font-style: italic; color: var(--sv-gold); }
/* lead → AB's .subpage-lead (italic serif, warm grey) */
.sv-start .sv-lead,
.sv-heroselect .sv-lead {
  font-family: 'EB Garamond', 'Spectral', serif; font-style: italic;
  color: #b3a98b; font-size: clamp(1rem, 1.4vw, 1.12rem);
  max-width: 540px; margin: 0 auto 4px;
}

/* level-up cards */
.sv-lvl-title { font-family: "Cinzel", serif; font-size: clamp(1.6rem,5vw,2.4rem); color: var(--sv-gold); margin: 0 0 18px; text-shadow: 0 0 22px rgba(255,209,102,.4); }
.sv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sv-card {
  cursor: pointer; border-radius: 14px; padding: 18px 14px; text-align: center; position: relative; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(18,22,40,.9), rgba(10,12,24,.95));
  transition: transform .12s, border-color .12s, box-shadow .12s; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 9px;
}
.sv-card:hover { transform: translateY(-4px); border-color: var(--sv-gold); box-shadow: 0 14px 36px rgba(0,0,0,.55); }
.sv-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent, #888); }
.sv-card-ic { width: 60px; height: 60px; border-radius: 12px; background: #0c1430 center/cover no-repeat; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.8rem; }
.sv-card-tag { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #9aa4bd; font-weight: 800; }
.sv-card-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.08rem; color: #f3ead4; }
.sv-card-lvl { font-size: .72rem; color: var(--sv-gold); font-weight: 800; }
.sv-card-desc { font-size: .82rem; color: #aeb6cb; line-height: 1.4; }
.sv-card.evolve { border-color: var(--sv-blood); }
.sv-card.evolve::before { background: linear-gradient(90deg, var(--sv-gold), var(--sv-blood)); }
.sv-card.evolve .sv-card-tag { color: var(--sv-blood); }
.sv-reroll {
  margin-top: 16px; background: transparent; border: 1px solid rgba(255,255,255,.2); color: #cdd3e2;
  padding: 8px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .85rem;
}
.sv-reroll:disabled { opacity: .4; cursor: default; }
.sv-reroll b { color: var(--sv-gold); }

/* pause + results */
.sv-pause-actions, .sv-res-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 6px; }
.sv-pause-build { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

.sv-res-title { font-family: "Cinzel Decorative", serif; font-size: clamp(2rem,6vw,3.2rem); margin: 0 0 6px; color: var(--sv-blood); }
.sv-res-title.win { color: var(--sv-gold); }
.sv-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 18px 0; }
.sv-res-stat { background: rgba(8,12,24,.6); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 8px; }
.sv-res-stat b { display: block; font-family: "Cinzel", serif; font-size: 1.6rem; color: #f4ecd6; font-variant-numeric: tabular-nums; }
.sv-res-stat span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #99a2ba; }
.sv-res-score b { color: var(--sv-gold); }
.sv-res-new { color: var(--sv-gold); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; animation: sv-rage-pulse 1s infinite; }

/* loading */
.sv-loading .sv-screen-inner { border-color: transparent; background: transparent; box-shadow: none; }
.sv-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--sv-gold); margin: 0 auto 14px; animation: sv-spin 1s linear infinite; }
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* ===== responsive ===== */
@media (max-width: 640px) {
  .sv-heroes, .sv-cards { grid-template-columns: 1fr; }
  .sv-card { min-height: 0; flex-direction: row; text-align: left; justify-content: flex-start; }
  .sv-card-desc, .sv-card-name { text-align: left; }
  .sv-res-grid { grid-template-columns: repeat(2, 1fr); }
  .sv-g-grid { grid-template-columns: 1fr; }

  /* ---- in-game HUD: stop the overlays from eating the view on phones.
     The build bar grows a row per pickup, so it's capped + compacted; the
     radar / ult / bars / icon buttons are all dialled down a notch. ---- */
  .sv-top { top: calc(var(--sv-navh, 60px) + 4px); padding: 0 8px; gap: 6px; }
  .sv-topleft { gap: 5px; }
  .sv-hero-chip { padding: 4px 10px 4px 4px; gap: 7px; }
  .sv-portrait { width: 32px; height: 32px; }
  .sv-meta-lvl { font-size: .8rem; }
  .sv-meta-kills { font-size: .7rem; }
  /* compact chips + a hard height cap so a maxed build can never blanket the left flank */
  .sv-build { padding: 5px; gap: 4px; max-width: min(204px, 54vw); max-height: 34vh; overflow: hidden; }
  .sv-ab { width: 30px; height: 30px; border-radius: 8px; }
  .sv-ab-lvl { font-size: .55rem; bottom: 0; right: 2px; }
  .sv-allies { width: min(204px, 54vw); }
  .sv-radar { width: 58px; height: 58px; top: calc(var(--sv-navh, 60px) + 44px); right: 8px; }
  .sv-sys { padding: 4px; gap: 4px; }
  .sv-iconbtn { width: 30px; height: 30px; font-size: .82rem; }
  #sv-guide-btn { font-size: .9rem; }
  .sv-timer { font-size: clamp(1.4rem, 6vw, 1.95rem); }
  .sv-boss { width: min(72vw, 320px); }
  .sv-bottom { width: 96vw; gap: 6px; }
  .sv-barwrap { gap: 10px; }
  .sv-bar { height: 13px; }
  .sv-bar-xp { height: 9px; }
  .sv-ult { width: 52px; height: 52px; }
  .sv-ult-ic { font-size: 1.35rem; }
  .sv-ult-ic.has-img { width: 34px; height: 34px; }
  .sv-ult-key { bottom: -13px; font-size: .5rem; }
  .sv-stick { width: 100px; height: 100px; }
  .sv-stick i { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
/* guide grid: 3 cols on wide sheets → 2 on tablets (1 col handled at <=640 above) */
@media (min-width: 641px) and (max-width: 1000px) {
  .sv-g-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-screen, .sv-bar i, .sv-ult, .sv-res-new, .sv-bar-rage.ready i, .sv-lowhp.on { animation: none !important; transition: none !important; }
}

/* ===== Co-op lobby — "muster the warband" (docs/09) ===== */
/* the lobby is tall — top-align it below the fixed nav (centering let the nav overlap the title) */
.sv-coop-inner { width: min(1080px, 96vw); }
/* two columns on one line: recruit (left) · muster (right) */
.sv-coop-cols { display: flex; gap: 24px; align-items: flex-start; text-align: left; margin-top: 6px; }
.sv-coop-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sv-coop-recruit { align-items: stretch; }
@media (max-width: 640px) { .sv-coop-cols { flex-direction: column; } }
.sv-coop-eyebrow { display: inline-block; font: 700 .72rem/1 "Manrope", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .24em; color: #c9a24a; margin-bottom: 12px; }
.sv-coop-title { font-family: "Cinzel Decorative", serif; font-weight: 900; font-size: clamp(1.7rem, 4.6vw, 2.5rem); margin: 0 0 .2em; color: #f4ecd6; }
.sv-coop-sub { color: #b3a98b; font-style: italic; font-family: "EB Garamond", serif; margin: 0 auto 26px; line-height: 1.5; max-width: 40ch; }

/* primary call to muster */
.sv-coop-cta {
  font: 700 1.05rem/1 "Cinzel", serif; letter-spacing: .03em; padding: 15px 34px; border-radius: 12px; cursor: pointer;
  color: #1a1206; background: linear-gradient(180deg, #ffdd8a, #ecb84a); border: 1px solid #ffe7a8;
  box-shadow: 0 7px 22px rgba(255,209,102,.26), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .12s, box-shadow .12s, background .2s;
}
.sv-coop-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,209,102,.42); }
.sv-coop-cta.searching { background: rgba(8,12,24,.55); color: var(--sv-gold); border-color: rgba(255,209,102,.5); box-shadow: none; }
.sv-coop-find-status { color: #c2cadc; font-size: .9rem; margin-top: -4px; }

/* a labelled divider with hairline rules */
.sv-coop-rule { display: flex; align-items: center; gap: 14px; width: 100%; color: #8b93a6; font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; margin: 8px 0 2px; }
.sv-coop-rule::before, .sv-coop-rule::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(255,209,102,.28), transparent); }

/* member roster (call your clan / call more) */
.sv-coop-search {
  width: 100%; box-sizing: border-box; margin: 2px 0 4px; padding: 8px 12px;
  border-radius: 9px; background: rgba(8,12,24,.6); border: 1px solid rgba(255,255,255,.12);
  color: #e8e2d2; font: inherit; font-size: .86rem;
}
.sv-coop-search::placeholder { color: #7e87a0; }
.sv-coop-search:focus { outline: none; border-color: var(--sv-gold); box-shadow: 0 0 0 1px rgba(255,209,102,.35) inset; }
.sv-coop-members { display: flex; flex-direction: column; gap: 6px; width: 100%; max-height: 320px; overflow-y: auto; margin: 2px 0 4px; padding-right: 4px; }
.sv-coop-m { display: flex; align-items: center; gap: 11px; padding: 7px 9px 7px 7px; border-radius: 11px; border: 1px solid rgba(255,255,255,.07); background: rgba(8,12,24,.42); }
.sv-coop-m.is-off { opacity: .55; }
.sv-coop-mav { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255,255,255,.07) center/cover no-repeat; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; font: 800 .9rem/1 "Cinzel", serif; color: #c9b88a; }
.sv-coop-mdot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #11131c; }
.sv-coop-mdot.on { background: var(--sv-poison); }
.sv-coop-mdot.off { background: #555c6e; }
.sv-coop-mn { flex: 1; min-width: 0; text-align: left; color: #ece3cd; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-coop-mbtn { flex: none; cursor: pointer; border: 1px solid var(--sv-gold); background: transparent; color: var(--sv-gold); border-radius: 8px; padding: 5px 14px; font: 700 .8rem/1 "Manrope", system-ui, sans-serif; letter-spacing: .03em; transition: background .12s, color .12s; }
.sv-coop-mbtn:hover:not(:disabled) { background: var(--sv-gold); color: #1a1206; }
.sv-coop-mbtn:disabled { opacity: .45; cursor: default; border-color: rgba(255,255,255,.2); color: #8b93a6; }
.sv-coop-mload, .sv-coop-mempty { color: #8b93a6; font-size: .86rem; padding: 10px; text-align: center; }

/* code fallback */
.sv-coop-link { background: none; border: none; color: #8b93a6; cursor: pointer; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.sv-coop-link:hover { color: #ece3cd; }
.sv-coop-join { display: flex; gap: 8px; width: min(340px, 100%); }
.sv-coop-input { flex: 1; min-width: 0; text-align: center; text-transform: uppercase; letter-spacing: .32em; font: 700 1.25rem/1 "JetBrains Mono", ui-monospace, monospace; color: #f4ecd6; padding: 11px 10px; border-radius: 12px; border: 1.5px solid rgba(255,209,102,.3); background: rgba(8,12,24,.7); }
.sv-coop-input:focus { outline: none; border-color: var(--sv-gold); box-shadow: 0 0 0 3px rgba(255,209,102,.18); }

/* ---- room: the warband code banner + muster line ---- */
.sv-coop-codebar { display: inline-flex; align-items: center; gap: 12px; margin: 2px auto 20px; padding: 8px 8px 8px 16px; border-radius: 12px; border: 1px solid rgba(255,209,102,.25); background: rgba(8,12,24,.5); }
.sv-coop-code-label { color: #8b93a6; text-transform: uppercase; font-size: .68rem; letter-spacing: .18em; }
.sv-coop-codebar b { font: 800 1.55rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .28em; color: var(--sv-gold); }
.sv-coop-copy { cursor: pointer; border: 1px solid rgba(255,255,255,.18); background: rgba(8,12,24,.6); color: #ece3cd; border-radius: 9px; width: 32px; height: 32px; font-size: 1rem; }
.sv-coop-copy:hover { border-color: var(--sv-gold); color: var(--sv-gold); }

.sv-coop-line { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 4px; }
.sv-banner {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 158px; padding: 18px 8px 13px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(22,17,32,.62), rgba(10,12,24,.72));
  transition: border-color .25s, box-shadow .25s;
}
.sv-banner::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 46%; height: 3px; border-radius: 0 0 3px 3px; background: rgba(255,255,255,.12); transition: background .25s; }
.sv-banner-av { position: relative; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.06) center/cover no-repeat; border: 2px solid rgba(255,255,255,.16); display: grid; place-items: center; font: 800 1.4rem/1 "Cinzel", serif; color: #c9b88a; }
.sv-banner-herobadge { position: absolute; right: -5px; bottom: -5px; width: 26px; height: 26px; border-radius: 50%; background: #0d1424 center/cover no-repeat; border: 2px solid #0d1424; box-shadow: 0 1px 5px rgba(0,0,0,.55); }
.sv-banner.leader .sv-banner-herobadge { border-color: var(--sv-gold); }
.sv-banner.me .sv-banner-herobadge { border-color: var(--sv-ice); }
.sv-banner-name { font-weight: 700; color: #ece3cd; font-size: .96rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-banner-hero { font-size: .74rem; color: #8b93a6; min-height: 1em; }
.sv-banner-state { margin-top: auto; font: 700 .68rem/1 "Manrope", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #8b93a6; }
.sv-banner.leader  { border-color: rgba(255,209,102,.55); box-shadow: 0 0 26px rgba(255,209,102,.16), inset 0 0 30px rgba(255,209,102,.05); }
.sv-banner.leader::before { background: var(--sv-gold); }
.sv-banner.leader .sv-banner-av { border-color: var(--sv-gold); color: var(--sv-gold); }
.sv-banner.leader .sv-banner-state { color: var(--sv-gold); }
.sv-banner.me      { border-color: rgba(102,216,255,.5); box-shadow: 0 0 20px rgba(102,216,255,.13); }
.sv-banner.me::before { background: var(--sv-ice); }
.sv-banner.me .sv-banner-state { color: var(--sv-ice); }
.sv-banner.live    { border-color: rgba(123,232,138,.5); box-shadow: 0 0 22px rgba(123,232,138,.15); }
.sv-banner.live::before { background: var(--sv-poison); }
.sv-banner.live .sv-banner-state { color: var(--sv-poison); }
.sv-banner.linking::before { background: var(--sv-gold); animation: sv-coop-pulse 1.1s ease-in-out infinite; }
.sv-banner.linking .sv-banner-state { color: #c9a24a; }
.sv-banner.off { opacity: .5; }
.sv-banner.open { border-style: dashed; border-color: rgba(255,255,255,.13); background: rgba(8,12,24,.32); }
.sv-banner.open .sv-banner-av { border-style: dashed; font-size: 1.7rem; color: #5b6275; }
.sv-banner.open .sv-banner-name { color: #5b6275; }
@keyframes sv-coop-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (max-width: 480px) { .sv-banner { min-height: 140px; } }

/* ---- co-op in-lobby hero picker (a compact version of the solo hero cards) ---- */
.sv-coop-heropick { align-items: stretch; }
.sv-coop-hero-hint { font-size: .76rem; color: #8b93a6; margin: -6px 0 2px; }
.sv-coop-heroes { display: flex; flex-direction: column; gap: 8px; max-height: 430px; overflow-y: auto; padding: 2px 5px 2px 2px; }
.sv-coop-hero { display: flex; flex-direction: row; align-items: center; gap: 11px; text-align: left; cursor: pointer; color: inherit;
  padding: 9px 11px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.08); background: rgba(8,12,24,.42);
  transition: border-color .18s, box-shadow .18s, background .18s; }
.sv-coop-hero:hover { border-color: rgba(255,255,255,.2); }
.sv-coop-hero.sel { border-color: var(--sv-ice); background: rgba(102,216,255,.09); box-shadow: 0 0 16px rgba(102,216,255,.18); }
.sv-coop-hero-port { flex: none; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.05) center/cover no-repeat; border: 2px solid rgba(255,255,255,.14); }
.sv-coop-hero.sel .sv-coop-hero-port { border-color: var(--sv-ice); }
.sv-coop-hero-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-coop-hero-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sv-coop-hero-name { font-size: .9rem; font-weight: 700; color: #ece3cd; line-height: 1.1; }
.sv-coop-hero.sel .sv-coop-hero-name { color: #eaf4ff; }
.sv-coop-hero-elem { font: 800 .56rem/1 "Manrope", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; color: #cdd6ea; background: rgba(255,255,255,.08); }
.sv-coop-hero-elem[data-elem="fire"]     { color: var(--sv-fire);    background: rgba(255,106,44,.15); }
.sv-coop-hero-elem[data-elem="ice"]      { color: var(--sv-ice);     background: rgba(102,216,255,.15); }
.sv-coop-hero-elem[data-elem="poison"]   { color: var(--sv-poison);  background: rgba(123,232,138,.15); }
.sv-coop-hero-elem[data-elem="thunder"]  { color: var(--sv-thunder); background: rgba(196,155,255,.15); }
.sv-coop-hero-elem[data-elem="physical"] { color: #e8c87a;           background: rgba(232,200,122,.14); }
.sv-coop-hero-class { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: #8b93a6; }
.sv-coop-hero-desc { font-size: .72rem; line-height: 1.3; color: #aab2c6; margin-top: 1px; }

.sv-coop-invite-more { width: 100%; margin: 6px 0 2px; }
.sv-coop-status { color: #c2cadc; min-height: 1.2em; margin: 2px 0 16px; font-size: .92rem; }
.sv-coop-room-actions { display: flex; gap: 10px; justify-content: center; }
.sv-coop-msg { color: var(--sv-gold); min-height: 1.2em; margin-top: 14px; font-size: .9rem; }
.sv-coop-back { margin-top: 18px; background: none; border: none; color: #8b93a6; cursor: pointer; font-size: .88rem; }
.sv-coop-back:hover { color: #ece3cd; }
.sv-coop-cta:focus-visible, .sv-coop-mbtn:focus-visible, .sv-coop-link:focus-visible, .sv-coop-copy:focus-visible { outline: 2px solid var(--sv-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sv-banner.linking::before { animation: none; } }

/* ===== War Forge — permanent perk shop ===================================== */
.sv-shop-title { font-family: "Cinzel Decorative", serif; text-align: center; color: var(--sv-gold); font-size: clamp(1.6rem, 5vw, 2.3rem); margin: 0 0 4px; }
.sv-shop-lead { text-align: center; color: #c2cadc; font-size: .88rem; max-width: 48ch; margin: 0 auto 14px; line-height: 1.5; }
.sv-shop-bank { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 18px; margin: 0 auto 16px; border-radius: 999px;
  background: rgba(40,32,18,.6); border: 1px solid rgba(255,209,102,.32); box-shadow: inset 0 0 22px rgba(255,209,102,.08); }
.sv-shop-bank-ic { font-size: 1.05rem; align-self: center; }
.sv-shop-bank b { font-family: "Cinzel", serif; font-size: 1.5rem; color: var(--sv-gold); font-variant-numeric: tabular-nums; }
.sv-shop-bank-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: #b6ad8e; }
.sv-shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 6px; text-align: left; }
.sv-perk { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 13px;
  background: rgba(8,12,24,.55); border: 1px solid rgba(255,255,255,.08); }
.sv-perk.maxed { border-color: rgba(255,209,102,.4); background: rgba(34,28,16,.5); }
.sv-perk-ic { font-size: 1.5rem; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.sv-perk.maxed .sv-perk-ic { border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.1); }
.sv-perk-txt { min-width: 0; }
.sv-perk-txt b { display: block; font-family: "Cinzel", serif; font-size: .98rem; color: #f4ecd6; line-height: 1.15; }
.sv-perk-desc { display: block; font-size: .74rem; color: #aab2c6; margin: 1px 0 3px; line-height: 1.25; }
.sv-perk-now { display: block; font-size: .72rem; font-weight: 700; color: var(--sv-gold); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.sv-perk-dots { display: inline-flex; gap: 4px; }
.sv-perk-dots i { width: 13px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.13); }
.sv-perk-dots i.on { background: var(--sv-gold); box-shadow: 0 0 6px rgba(255,209,102,.5); }
.sv-perk-buy { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 74px; padding: 8px 10px; cursor: pointer;
  border-radius: 11px; border: 1px solid rgba(255,209,102,.4); background: linear-gradient(180deg, rgba(255,209,102,.18), rgba(255,209,102,.06));
  color: var(--sv-gold); transition: transform .1s ease, background .15s ease, border-color .15s ease; }
.sv-perk-buy:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255,209,102,.3), rgba(255,209,102,.1)); border-color: var(--sv-gold); }
.sv-perk-buy:active { transform: translateY(0) scale(.97); }
.sv-perk-buy.off { opacity: .4; cursor: not-allowed; filter: grayscale(.5); }
.sv-perk-buy.off:hover { transform: none; }
.sv-perk-cost { font-family: "Cinzel", serif; font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-perk-buylbl { font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; color: #b6ad8e; }
.sv-perk-max { font-family: "Cinzel", serif; font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: var(--sv-gold); min-width: 74px; text-align: center; }
.sv-shop-foot { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.sv-shop-refund-btn { background: none; border: none; color: #8b93a6; cursor: pointer; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.sv-shop-refund-btn:hover:not(:disabled) { color: var(--sv-blood); }
.sv-shop-refund-btn:disabled { opacity: .4; cursor: default; text-decoration: none; }
.sv-res-gold b { color: var(--sv-gold); }
@media (max-width: 640px) {
  .sv-shop-grid { grid-template-columns: 1fr; }
  .sv-perk-ic { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* ===== Hall of Trophies — achievements ==================================== */
.sv-ach-headline { font-family: "Cinzel Decorative", serif; text-align: center; color: var(--sv-gold); font-size: clamp(1.6rem, 5vw, 2.3rem); margin: 0 0 4px; }
.sv-ach-lead { text-align: center; color: #c2cadc; font-size: .88rem; max-width: 50ch; margin: 0 auto 12px; line-height: 1.5; }
.sv-ach-count { text-align: center; margin: 0 0 14px; }
.sv-ach-count b { font-family: "Cinzel", serif; font-size: 1.2rem; color: var(--sv-gold); font-variant-numeric: tabular-nums; padding: 4px 16px; border-radius: 999px; background: rgba(40,32,18,.6); border: 1px solid rgba(255,209,102,.3); }
.sv-ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 18px; text-align: left; }
/* NOTE: the screen container is #sv-ach.sv-screen.sv-ach — it shares the bare class
   with the trophy cards. Scope the card rule to the grid so it never restyles the
   modal shell (otherwise it clobbers .sv-screen's centering / nav-padding / opacity). */
.sv-ach-grid .sv-ach { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 13px;
  background: rgba(8,12,24,.55); border: 1px solid rgba(255,255,255,.08); opacity: .72; }
.sv-ach-grid .sv-ach.got { opacity: 1; border-color: rgba(255,209,102,.42); background: rgba(34,28,16,.5); }
.sv-ach-ic { font-size: 1.6rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); filter: grayscale(.6); }
.sv-ach.got .sv-ach-ic { filter: none; background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.4); box-shadow: 0 0 14px rgba(255,209,102,.25); }
.sv-ach-txt { min-width: 0; }
.sv-ach-txt b { display: block; font-family: "Cinzel", serif; font-size: .98rem; color: #f4ecd6; line-height: 1.15; }
.sv-ach.got .sv-ach-txt b { color: var(--sv-gold); }
.sv-ach-desc { display: block; font-size: .74rem; color: #aab2c6; margin: 1px 0 6px; line-height: 1.28; }
.sv-ach-done { font-family: "Cinzel", serif; font-weight: 700; font-size: .8rem; color: var(--sv-gold); }
.sv-ach-reward { font-family: "Cinzel", serif; font-weight: 700; font-size: .78rem; color: #b6ad8e; }
.sv-ach-prog { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 3px; }
.sv-ach-prog i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sv-gold), #ffb347); }
.sv-ach-progtxt { font-size: .68rem; color: #8b93a6; font-variant-numeric: tabular-nums; }
/* freshly-earned achievements on the results screen */
.sv-res-ach { display: flex; flex-direction: column; gap: 6px; max-width: 460px; margin: 0 auto 16px; }
.sv-res-ach-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 11px;
  background: rgba(34,28,16,.6); border: 1px solid rgba(255,209,102,.4); animation: sv-fade .4s ease both; }
.sv-res-ach-ic { font-size: 1.3rem; }
.sv-res-ach-name { font-family: "Cinzel", serif; font-weight: 700; color: var(--sv-gold); text-align: left; }
.sv-res-ach-gold { font-family: "Cinzel", serif; font-weight: 700; color: #ffd166; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .sv-ach-grid { grid-template-columns: 1fr; }
}

/* ===== Run history screen ================================================= */
.sv-rh-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding-right: 2px; margin: 0 0 14px; text-align: left; }
.sv-rh-empty { text-align: center; color: #99a2ba; padding: 26px 0 18px; }

/* ===== Results: damage-by-weapon breakdown + perks collected ============== */
.sv-res-break { max-width: 520px; margin: 4px auto 16px; text-align: left; }
.sv-res-break-h, .sv-rb-perks-h { font: 800 .64rem/1 "Manrope", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: #8b93a6; text-align: center; margin: 12px 0 10px; }
.sv-rb-list { display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; padding-right: 2px; }
.sv-rb-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; }
.sv-rb-main { min-width: 0; }
.sv-rb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.sv-rb-name { font-family: "Cinzel", serif; font-weight: 700; font-size: .9rem; color: #f4ecd6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-rb-dmg { font-family: "Cinzel", serif; font-weight: 700; font-size: .9rem; color: #cdd3e2; font-variant-numeric: tabular-nums; flex: none; }
.sv-rb-row.top .sv-rb-name, .sv-rb-row.top .sv-rb-dmg { color: var(--sv-gold); }
.sv-rb-bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.sv-rb-bar > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6f7dff, #b98bff); }
.sv-rb-row.top .sv-rb-bar > i { background: linear-gradient(90deg, var(--sv-gold), #fff0b8); }
.sv-rb-perks { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.sv-rh-row { display: grid; grid-template-columns: 18px auto 1fr auto; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 11px;
  background: rgba(8,12,24,.55); border: 1px solid rgba(255,255,255,.08); }
.sv-rh-row.win { border-color: rgba(255,209,102,.3); background: rgba(30,26,14,.5); }
.sv-rh-row.first { box-shadow: 0 0 0 1px rgba(255,209,102,.3); }   /* the run you just finished */
.sv-rh-res { text-align: center; font-size: 1rem; line-height: 1; }
.sv-rh-row.win .sv-rh-res { color: var(--sv-gold); }
.sv-rh-row.loss .sv-rh-res { color: var(--sv-blood); }
.sv-rh-port { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid rgba(255,255,255,.18); background: #0c1430; }
.sv-rh-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sv-rh-hero { font-family: "Cinzel", serif; font-weight: 700; font-size: .9rem; color: #f4ecd6; line-height: 1.15;
  display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-rh-row.win .sv-rh-hero { color: var(--sv-gold); }
.sv-rh-badge { flex: none; font: 800 .58rem/1 "Manrope", system-ui, sans-serif; padding: 2px 5px; border-radius: 6px; }
.sv-rh-badge.hyper { color: var(--sv-gold); background: rgba(255,209,102,.14); border: 1px solid rgba(255,209,102,.34); }
.sv-rh-badge.endless { color: #c79bff; background: rgba(154,107,255,.14); border: 1px solid rgba(170,110,255,.4); }
.sv-rh-badge.coop { color: var(--sv-ice); background: rgba(102,216,255,.14); border: 1px solid rgba(102,216,255,.36); }
.sv-rh-sub { font-size: .72rem; color: #aab2c6; font-variant-numeric: tabular-nums; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-rh-score { text-align: right; display: flex; flex-direction: column; line-height: 1.15; }
.sv-rh-score b { font-family: "Cinzel", serif; color: var(--sv-gold); font-size: .98rem; font-variant-numeric: tabular-nums; }
.sv-rh-score i { font-style: normal; font-size: .62rem; color: #8b93a6; }
@media (max-width: 640px) {
  .sv-rh-port { display: none; }   /* reclaim width on phones */
  .sv-rh-row { grid-template-columns: 18px 1fr auto; gap: 8px; padding: 6px 9px; }
}

/* ===== level-up Skip / Banish ============================================= */
.sv-levelup-foot { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.sv-levelup-foot .sv-reroll { margin-top: 0; }
.sv-skip { border-color: rgba(123,232,138,.35) !important; color: #bfe6c8 !important; }
.sv-skip:hover { border-color: var(--sv-poison) !important; color: #d6f5dd !important; }
.sv-banish-hint { font-size: .76rem; color: #8b93a6; }
.sv-banish-hint[hidden] { display: none; }
.sv-banish-hint b { color: var(--sv-blood); font-variant-numeric: tabular-nums; }
.sv-card-banish { position: absolute; top: 7px; right: 7px; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; cursor: pointer; line-height: 1;
  color: #8b93a6; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14); transition: transform .12s, background .12s, color .12s, border-color .12s; }
.sv-card-banish:hover { color: #fff; background: var(--sv-blood); border-color: var(--sv-blood); transform: scale(1.14); }

/* ===== Reaper finale — boss bar turns deathly ============================= */
.sv-boss.reaper .sv-boss-name { color: #ff4d63; letter-spacing: .2em; text-shadow: 0 0 10px rgba(232,69,94,.8); animation: sv-rage-pulse 1s infinite; }
.sv-boss.reaper .sv-boss-bar { border-color: rgba(255,40,60,.9); box-shadow: 0 0 22px rgba(255,30,50,.7); }
.sv-boss.reaper .sv-boss-bar i { background: linear-gradient(90deg, #b00020, #ff2d4a); }

/* ===== Battleground select ================================================ */
.sv-stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0 14px; }
.sv-stage-card { position: relative; cursor: pointer; border-radius: 14px; padding: 12px; text-align: left;
  border: 1.5px solid rgba(255,255,255,.14); background: rgba(10,14,26,.6); transition: transform .12s, border-color .12s, box-shadow .12s; }
.sv-stage-card:hover { transform: translateY(-3px); border-color: var(--sv-gold); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.sv-stage-card.sel { border-color: var(--sv-gold); box-shadow: 0 0 0 1px var(--sv-gold), 0 10px 28px rgba(0,0,0,.5); }
.sv-stage-swatch { height: 76px; border-radius: 10px; margin-bottom: 9px; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(160deg, var(--stage-fog, #223052), var(--stage-ground, #8a9a78)); background-size: cover; background-position: center;
  box-shadow: inset 0 -16px 26px rgba(0,0,0,.4); }
.sv-stage-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.05rem; color: #f3ead4; }
.sv-stage-tag { display: inline-block; font: 800 .58rem/1 "Manrope", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sv-gold); background: rgba(255,209,102,.12); border: 1px solid rgba(255,209,102,.3); border-radius: 999px; padding: 3px 8px; margin: 4px 0 6px; }
.sv-stage-desc { font-size: .76rem; line-height: 1.35; color: #aab2c6; }
@media (max-width: 640px) { .sv-stages { grid-template-columns: 1fr; } }

/* ===== Arcana — build-defining run modifiers ============================== */
.sv-levelup.arcana .sv-lvl-title span { color: #c79bff; text-shadow: 0 0 14px rgba(150,90,255,.6); }
.sv-card.arcana { border-color: rgba(170,110,255,.6); background: linear-gradient(180deg, rgba(40,24,60,.92), rgba(18,12,30,.96)); }
.sv-card.arcana::before { background: linear-gradient(90deg, #9a6bff, var(--sv-gold)); height: 5px; }
.sv-card.arcana:hover { border-color: #c79bff; box-shadow: 0 14px 40px rgba(120,60,220,.5); }
.sv-card.arcana .sv-card-tag { color: #c79bff; }
.sv-card.arcana .sv-card-ic { font-size: 2.1rem; background: rgba(154,107,255,.12); border-color: rgba(170,110,255,.4); }
.sv-card.arcana .sv-card-lvl { color: #c79bff; }
.sv-ab.arcana { background: rgba(154,107,255,.16); border-color: rgba(170,110,255,.45); color: #d9c4ff; font-size: 1.05rem; }

/* Arcana achievement tier (in the Hall of Trophies) */
.sv-ach-tier { grid-column: 1 / -1; text-align: center; font-family: "Cinzel", serif; font-weight: 700; font-size: .82rem;
  padding: 10px 12px; margin: 6px 0 2px; border-radius: 11px; letter-spacing: .04em;
  color: #8b93a6; background: rgba(8,12,24,.5); border: 1px dashed rgba(255,255,255,.16); }
.sv-ach-tier.on { color: #c79bff; border: 1px solid rgba(170,110,255,.45); background: rgba(40,24,60,.5); border-style: solid; }
.sv-ach.arcane.got .sv-ach-ic { background: rgba(154,107,255,.14); border-color: rgba(170,110,255,.5); box-shadow: 0 0 14px rgba(150,90,255,.3); }
.sv-ach.arcane.got .sv-ach-txt b { color: #c79bff; }
.sv-ach.arcane.got { border-color: rgba(170,110,255,.4); background: rgba(28,18,42,.5); }

/* ===== A3 run modes (stage select) ======================================= */
.sv-stage-modes { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.sv-stage-modes[hidden] { display: none; }
.sv-stage-modes-lbl { font: 800 .64rem/1 "Manrope", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #8b93a6; }
.sv-mode-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 14px; cursor: pointer; text-align: left;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,14,26,.6); color: #cdd3e2; transition: transform .1s, border-color .12s, background .12s; }
.sv-mode-chip b { font-family: "Cinzel", serif; font-size: .92rem; }
.sv-mode-chip span { font-size: .64rem; color: #8b93a6; }
.sv-mode-chip:hover { transform: translateY(-1px); border-color: rgba(255,209,102,.5); }
.sv-mode-chip.on { border-color: var(--sv-gold); background: rgba(40,32,18,.6); box-shadow: 0 0 0 1px var(--sv-gold), 0 0 16px rgba(255,209,102,.25); }
.sv-mode-chip.on b { color: var(--sv-gold); }
#sv-mode-endless.on { border-color: #c79bff; box-shadow: 0 0 0 1px #c79bff, 0 0 16px rgba(150,90,255,.3); }
#sv-mode-endless.on b { color: #c79bff; }

/* ===== Second Stage unlock guide ========================================== */
.sv-s2-badge { font-size: 2.6rem; text-align: center; filter: drop-shadow(0 0 18px rgba(150,90,255,.6)); animation: sv-rage-pulse 1.4s infinite; }
.sv-s2-title { font-family: "Cinzel Decorative", serif; text-align: center; color: #c79bff; font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 4px 0 2px; text-shadow: 0 0 16px rgba(150,90,255,.5); }
.sv-s2-intro { text-align: center; color: #d6cdea; font-size: .92rem; max-width: 46ch; margin: 0 auto 10px; line-height: 1.5; }
.sv-s2-body { text-align: left; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.sv-s2-foot { text-align: center; color: #aab2c6; font-size: .82rem; margin: 12px 0 14px; line-height: 1.45; }
.sv-g-note { font-size: .8rem; color: #aab2c6; line-height: 1.4; margin: 2px 0 8px; }
.sv-stage2 .sv-g-h { color: #c79bff; }

/* ===== Hall of Trophies — Base (left) + Second Stage (right) side-by-side, and each
   stage is a 2-up grid of trophies. A wider modal gives all four columns room. ===== */
#sv-ach .sv-screen-inner { width: min(1140px, 96vw); }
.sv-ach-grid.split { display: flex; gap: 18px; align-items: flex-start; }
.sv-ach-col { flex: 1 1 0; min-width: 0; }
.sv-ach-coltitle { font-family: "Cinzel", serif; font-weight: 700; font-size: .92rem; letter-spacing: .04em; color: #d8cfb4;
  text-align: left; padding: 2px 2px 8px; margin-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sv-ach-coltitle.arc { color: #c79bff; border-bottom-color: rgba(170,110,255,.35); }
.sv-ach-colgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: start; }
@media (max-width: 820px) {
  .sv-ach-grid.split { flex-direction: column; }   /* stages stack, each still 2-up */
}
@media (max-width: 560px) {
  .sv-ach-colgrid { grid-template-columns: 1fr; }   /* one trophy per row on phones */
}

/* ===== Pause menu — clean, presentable layout ============================= */
.sv-pause-inner { max-width: 520px; }
.sv-pause-title { font-family: "Cinzel Decorative", serif; font-size: clamp(1.8rem, 6vw, 2.6rem); color: #eaf2ff; margin: 0 0 6px; letter-spacing: .04em; }
.sv-pause-stats { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; color: #aab6cf; font-size: .9rem; font-variant-numeric: tabular-nums; }
.sv-pause-stats b { color: var(--sv-gold); }
.sv-pause-stats i { font-style: normal; opacity: .7; margin-right: 2px; }
.sv-pause-card { background: rgba(8,12,24,.5); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 12px; margin: 0 0 16px; }
.sv-pause-label { font: 800 .62rem/1 "Manrope", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: #8b93a6; margin-bottom: 9px; }
.sv-pause-build { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.sv-pause-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.sv-pause-menu .sv-lb-btn { margin: 0; width: 100%; }
.sv-pause-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sv-pause-resume { min-width: 220px; font-size: 1.05rem; padding: 13px 28px; }
.sv-pause-quit { background: none; border: none; cursor: pointer; color: #8b93a6; font-size: .85rem; padding: 4px 10px; transition: color .15s; }
.sv-pause-quit:hover { color: var(--sv-blood); }
@media (max-width: 460px) { .sv-pause-menu { grid-template-columns: 1fr; } }