*{box-sizing:border-box}body{margin:0;background:#08121b;color:#f4f3e8;font:15px system-ui,sans-serif;overflow:hidden}canvas{display:block;width:100vw;height:100vh;touch-action:none}.shade{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 18vw #030b1466}header,footer,.objective{position:fixed;pointer-events:none}header{top:25px;left:50%;transform:translateX(-50%);width:min(460px,60vw);text-align:center}h1{font-size:25px;letter-spacing:.3em;margin:7px 0 12px}.eyebrow{font-size:10px;letter-spacing:.18em;color:#b4c5ce}.health{height:8px;background:#182e3c;border:1px solid #66818a55;overflow:hidden}.health div{height:100%;transition:width .12s linear;background:#ed8f4d}.boss div{background:linear-gradient(90deg,#bd4c35,#f7a052)}#phase{font-size:12px;color:#d1b7a0;display:block;margin-top:8px}.objective{left:30px;top:35%;width:225px}.objective p{line-height:1.5;color:#e1e6e5;text-shadow:0 1px 4px #000}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{font-size:11px;border:1px solid #8c9fa466;padding:5px;background:#14202bcc}.chips .broken{border-color:#60dcdd;color:#9df1ee}footer{left:30px;right:30px;bottom:25px;display:flex;align-items:end;justify-content:space-between;gap:30px}footer>div{width:180px}footer .health{margin-top:8px}.player div{background:#6ad7cf}footer p{font-size:11px;line-height:1.8;color:#b7cad1;margin:0}#clock{font-size:20px;font-variant-numeric:tabular-nums}#reticle,#hitmarker{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#c6fff5;font-size:27px;text-shadow:0 0 6px #052a2a}#hitmarker{opacity:0;font-size:40px;color:#fff1aa}#tell{position:fixed;left:50%;top:22%;transform:translateX(-50%);font-size:20px;letter-spacing:.04em;color:#ffd698;text-align:center;text-shadow:0 1px 8px #000;pointer-events:none}#veil{position:fixed;inset:0;display:grid;place-items:center;background:#040d16a8;backdrop-filter:blur(5px)}#veil[hidden]{display:none}.card{padding:35px;width:min(490px,90vw);border:1px solid #7da09f55;background:linear-gradient(145deg,#183340f7,#0b1929fa);box-shadow:0 25px 80px #0007;border-radius:4px}.card h2{font-size:36px;letter-spacing:-.03em;margin:14px 0}.card p{font-size:14px;line-height:1.7;color:#c2d5db}.card #loadStatus{color:#ffd18b;font-size:12px}.card button{display:block;border:0;padding:14px 22px;font:600 15px system-ui;background:#95e7d7;color:#102b32;cursor:pointer;width:100%;margin:20px 0 16px}.card button:disabled{opacity:.35;cursor:wait}.card a{display:block;text-align:center;color:#a4c8cf;font-size:12px}.card small{display:block;text-align:center;color:#708b96;font-size:10px;margin-top:20px}@media(max-width:700px){.objective{top:auto;bottom:130px;left:18px;width:180px}.objective p{font-size:12px}footer{left:18px;right:18px;gap:14px}footer p{display:none}header{width:75vw}.card{padding:25px}#tell{font-size:16px}}


.power{position:fixed;right:1.5rem;top:10rem;width:15rem;padding:1rem;background:#101c2bd9;border:1px solid #ac82ed66;border-radius:12px}.power[hidden]{display:none}.power p{margin:.6rem 0 0;color:#d7baff}.charge{height:5px;margin-top:.65rem}.charge div{height:100%;background:#b486ff;transition:width .1s linear}

#lockStatus{position:fixed;top:155px;left:50%;transform:translateX(-50%);font-size:12px;color:#b8fff2;text-align:center;pointer-events:none;text-shadow:0 1px 5px #000} #reticle{transition:color .15s} @media(max-width:700px){#lockStatus{top:140px;font-size:11px}}

@media(max-width:700px){.power{top:auto;bottom:145px;right:12px;width:180px;padding:.7rem}#lockStatus{width:90vw}}

footer>div{flex:0 0 180px}footer p{flex:1;min-width:0}#clock{flex:0 0 auto}@media(max-width:700px){footer>div{flex-basis:110px}footer p{display:block;font-size:10px;line-height:1.5}}

.weapons{position:fixed;right:30px;bottom:110px;max-width:300px;padding:10px;background:#10202ccc;border:1px solid #7da09f55}.weapons div{display:flex;gap:6px}.weapons button{background:#132b39;color:#c7d8dd;border:1px solid #67818b66;padding:8px;cursor:pointer;font:11px system-ui}.weapons button[aria-pressed=true]{border-color:#ffd18b;color:#ffd18b}.weapons p{font-size:10px;letter-spacing:.04em;margin:8px 0 0;color:#e3cba8}@media(max-width:700px){.weapons{right:12px;bottom:94px;padding:6px}.weapons button{padding:5px;font-size:10px}.power{bottom:205px}}

#coopPanel{position:fixed;z-index:5;left:20px;top:18px;width:250px;background:#102532ed;border:1px solid #7da09f66;padding:12px;font-size:12px;border-radius:4px}#coopPanel summary{cursor:pointer;color:#b8fff2}#coopPanel p{font-size:11px;line-height:1.5;color:#c2d5db}#coopPanel button,#coopPanel input{font:12px system-ui;padding:8px;margin:4px 0;border:1px solid #7da09f88;border-radius:2px}#coopPanel button{color:#102b32;background:#95e7d7;cursor:pointer}#coopPanel input{width:100%;background:#081b27;color:#fff;text-transform:uppercase}#coopCode{letter-spacing:.15em;display:block;font-size:20px}#coopPanel [hidden]{display:none}.card{max-height:90vh;overflow:auto}@media(max-width:900px){#coopPanel{width:200px;left:10px;top:10px}}

.hunterMarker{position:fixed;transform:translate(-50%,-100%);pointer-events:none;font:10px system-ui;color:#dcfff6;background:#092029b8;padding:3px 5px;border-radius:3px;white-space:nowrap}.hunterMarker[data-downed=true]{color:#ffb69f;background:#361c22df;border:1px solid #ff826f}.hunterMarker[hidden],#reviveHelp[hidden]{display:none}#reviveHelp{position:fixed;bottom:130px;left:50%;transform:translateX(-50%);padding:10px 16px;color:#ffe6a8;background:#172630e8;border:1px solid #e5bb7f;pointer-events:none;font-size:13px}#squadRoster{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:10px}.squadVital[data-downed=true]{color:#ff9e89}#coopPanel p{margin:6px 0}#coopPanel{max-height:43vh;overflow:auto}
#raidStart[hidden]{display:none}

.weapons{max-width:420px}#bowCharge{width:100%;height:5px;margin-top:8px;accent-color:#72dfff}#bowCharge[hidden]{display:none}.damageNumber{position:fixed;transform:translate(-50%,-50%);pointer-events:none;font:700 16px system-ui;text-shadow:0 1px 4px #001;z-index:3}.damageNumber[hidden]{display:none}#combatFlash{position:fixed;inset:0;pointer-events:none;transition:box-shadow .1s;z-index:2}#combatToast{position:fixed;top:29%;left:50%;transform:translateX(-50%);color:#c8fff1;background:#12313bc9;padding:7px 14px;pointer-events:none;font-size:13px}#combatToast[hidden]{display:none}#cpuStrength{background:#142e3c;color:#d9f9ef;border:1px solid #6d9d9c;padding:5px;margin-top:6px}

#meleeEffects{background:#142e3c;color:#d9f9ef;border:1px solid #6d9d9c;padding:5px;margin-top:6px}#meleeStatus{max-width:42ch;line-height:1.45;overflow-wrap:anywhere}

#meleeQueue{display:block;padding:12px 13px;margin:0 0 11px;background:linear-gradient(135deg,#18343de8,#10232be8);border:1px solid #6fbfa455;border-radius:9px;pointer-events:none;box-shadow:0 6px 20px #0002}#meleeQueue[hidden]{display:none}.meleeMeterHead,.meleeMeterFoot{display:flex;align-items:center;justify-content:space-between;gap:12px}.meleeMeterHead{color:#b9d9d8;font-size:9px;letter-spacing:.15em}.meleeMeterHead strong{font-size:16px;letter-spacing:.03em;color:#e0fff5;font-variant-numeric:tabular-nums}#meleeSegments{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:9px 0}#meleeSegments i{height:7px;border-radius:2px;background:linear-gradient(90deg,#8cebd5 var(--fill,0%),#29434b var(--fill,0%));box-shadow:inset 0 0 0 1px #b4ffef11}#meleeQueue[data-ready=true]{border-color:#a4f3d8aa}#meleeQueue[data-ready=true] #meleeSegments i{box-shadow:0 0 8px #87e4ce44}.meleeMeterFoot{font-size:9px;color:#a4bbc2;line-height:1.5}.meleeMeterFoot strong{color:#ffcf8b;font-size:9px;white-space:nowrap;letter-spacing:.04em}#meleeQueue[data-bonus=true]{border-color:#f2bf79aa}

.crewCard{width:min(940px,94vw);padding:24px 28px}.crewCard h2{font-size:29px;margin:8px 0}.crewCard>#cardBody{font-size:12px;line-height:1.5;margin:8px 0}.hunterHeading h3{font-size:22px;margin:4px 0;color:#eef5ef;letter-spacing:-.03em}.hunterHeading p{font-size:11px;margin:5px 0 12px;color:#a4bec5}.hunterPicker{display:grid;grid-template-columns:1fr 1.15fr;gap:20px}.hunterShowcase{min-width:0;background:radial-gradient(ellipse at 50% 35%,#37535d77,transparent 66%);border:1px solid #8caba633;border-radius:8px;overflow:hidden}.hunterShowcase #hunterPreview{width:100%;height:255px;display:block}.hunterBio{padding:0 18px 16px}.hunterBio #hunterTitle{color:var(--hero-accent);font-size:10px;letter-spacing:.17em;text-transform:uppercase}.hunterBio h4{font-size:27px;margin:3px 0}.hunterBio p{color:#e5e8dd;font-size:12px;margin:5px 0}.hunterBio small{color:#9bb7be;font-size:11px;line-height:1.5;text-align:left;margin:0}.hunterCards{display:grid;grid-template-columns:1fr 1fr;gap:9px}.crewCard .hunterCard{display:flex;flex-direction:column;overflow:hidden;text-align:left;background:#112632;color:#dce7e4;border:1px solid #739c9b55;border-radius:6px;margin:0;padding:0;width:100%;font:12px system-ui}.hunterCard img{display:block;width:100%;height:110px;object-fit:cover;object-position:50% 35%;background:linear-gradient(130deg,#29444d,#152a36)}.hunterCard>span{padding:8px 10px;display:block}.hunterCard strong{font-size:14px}.crewCard .hunterCard small{font-size:9px;text-align:left;margin-top:2px;color:#9eb8c1}.crewCard .hunterCard[aria-pressed=true]{border-color:var(--hero-accent);box-shadow:inset 0 0 0 1px var(--hero-accent);background:#25424b}.hunterLoadout{margin-top:15px}.hunterLoadout>div{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}.crewCard .hunterLoadout button{margin:0;padding:8px;font-size:11px;border:1px solid #739c9b55;background:#172f3c;color:#bdd0d5;border-radius:4px}.crewCard .hunterLoadout button[aria-pressed=true]{border-color:#edc482;color:#ffe2aa;background:#3b3b36}.hunterLoadout small{margin:7px 0 0;font-size:10px;line-height:1.4;text-align:left;color:#9bb7be}.crewCard #loadStatus{margin-bottom:0}.crewCard>button{padding:11px;margin:12px 0 8px}.crewCard>a,.crewCard>small{font-size:10px;margin-top:8px}.hunterHelp summary{font-size:11px;color:#b8d0d4;cursor:pointer}.hunterHelp p{font-size:11px;line-height:1.5}#guardianEntrance{position:fixed;left:50%;top:32%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 2px 18px #030b14;z-index:2}#guardianEntrance[hidden]{display:none}#guardianEntrance small{display:block;color:#ddbc89;font-size:11px;letter-spacing:.38em}#guardianEntrance strong{display:block;font-size:42px;letter-spacing:.2em;margin:7px 0;color:#fff0d3}#guardianEntrance span{font-size:13px;color:#c5c8be;letter-spacing:.14em}@media(min-width:1000px){.crewCard{width:min(940px,calc(100vw - 270px));margin-left:200px}}@media(max-width:760px){.hunterPicker{grid-template-columns:1fr}.hunterShowcase{display:grid;grid-template-columns:1fr 1fr;align-items:center}.hunterShowcase #hunterPreview{height:190px}.hunterCards{grid-template-columns:repeat(3,1fr)}.hunterCard img{height:85px}.hunterCard>span{padding:6px}.hunterCard strong{font-size:12px}.crewCard .hunterCard small{display:none}.crewCard{padding:20px}.hunterBio{padding:10px}.hunterBio h4{font-size:24px}}

#veil{overflow-y:auto;padding:16px 0}.crewCard{max-height:calc(100dvh - 32px);overflow-y:auto}.weapons>label{display:block;margin-top:7px}.hunterCard:focus-visible,.hunterLoadout button:focus-visible{outline:2px solid #fff1b0;outline-offset:3px}

/* Readability pass: the fight HUD shows state, the pause card holds controls and settings. */
#hudHint{font-size:11px;color:#9fb4bb;text-align:center}
#weaponStatus:empty{display:none}
#tell{font-weight:600;letter-spacing:.06em;font-size:22px}#tell::after{content:'';display:block;height:3px;width:var(--left,0%);margin:8px auto 0;background:linear-gradient(90deg,#ff7a3d,#ffd08a);box-shadow:0 0 10px #ff7a3d88;border-radius:2px}#tell:empty::after{display:none}
.hunterMarker{font-weight:600}.hunterMarker[data-hurt=true]{color:#ffd59a;border:1px solid #e5a46f88}
body.fighting #coopPanel{width:auto;max-width:250px;padding:7px 9px;background:#0b1a24a6;border-color:#7da09f33}
body.fighting #coopPanel summary,body.fighting #coopPanel details>p,body.fighting #coopPanel details>label,body.fighting #coopSession>:not(#squadRoster),body.fighting #coopStatus{display:none}
body.fighting #squadRoster{gap:2px 10px;font-size:10px;color:#b9ccd0}
.cardSettings{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:10px}.cardSettings>label{font-size:11px;color:#b8d0d4}.cardSettings .hunterHelp{flex:1 1 100%;order:2}
.controlList{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:10px 0 0;font-size:11px;line-height:1.45}.controlList dt{color:#ffd18b;letter-spacing:.1em;font-size:9px;text-transform:uppercase;padding-top:2px}.controlList dd{margin:0;color:#c2d5db}
body.fighting #coopPanel:has(#coopSession[hidden]){display:none}
#musicLevel{background:#142e3c;color:#d9f9ef;border:1px solid #6d9d9c;padding:5px;margin-top:6px}
/* The sunset sky is bright behind the HUD: give floating text a dark halo so it reads on orange. */
header,.objective,#lockStatus,#tell,footer p,#clock,.eyebrow{text-shadow:0 1px 3px #0009,0 0 12px #1a0a1488}.objective{background:linear-gradient(90deg,#120a12a0,#120a1200);padding:10px 14px 12px;margin-left:-14px;border-radius:4px}
/* Enraged final phase: a red state line under the boss bar and a hotter, pulsing bar. */
#rage{display:block;margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.42em;color:#ff6a3d;text-shadow:0 0 10px #ff3d1a,0 1px 3px #000;animation:ragePulse .9s ease-in-out infinite alternate}#rage[hidden]{display:none}
body.enraged .boss{border-color:#ff6a3d;box-shadow:0 0 12px #ff4a1a88}body.enraged .boss div{background:linear-gradient(90deg,#ff3d1a,#ffb04a)}
@keyframes ragePulse{from{opacity:.7}to{opacity:1}}@media(prefers-reduced-motion:reduce){#rage{animation:none}}
/* Results screen: replaces the crew picker and settings inside the same card on victory and defeat. */
.card[data-mode=results]{width:min(620px,94vw);margin-inline:auto}.card[data-mode=results] #hunterSelect,.card[data-mode=results] .cardSettings,.card[data-mode=results] #loadStatus,.card[data-mode=results]>a,.card[data-mode=results]>small,.card[data-mode=results] #raidStart{display:none}
.card[data-mode=results]>#cardBody{margin:4px 0 0;font-size:12px}#results[hidden],.card:not([data-mode=results]) #changeHunter{display:none}
.resultHead{display:flex;align-items:center;gap:14px;margin:12px 0 4px}.resultLine{margin:0;font-size:13px;color:#ffd18b}
.grade{display:grid;place-items:center;flex:0 0 58px;height:58px;border:2px solid #ffd18b;border-radius:6px;font-size:34px;color:#ffe2aa;background:#3b2a1a88}.grade[data-grade=S]{border-color:#9ff4e1;color:#c8fff1;box-shadow:0 0 16px #6fe2c855}
.resultStats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.resultStats div{background:#0c1c27c4;border:1px solid #7da09f33;border-radius:4px;padding:8px 10px}.resultStats dt{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#9fb4bb}.resultStats dd{margin:3px 0 0;font-size:20px;font-variant-numeric:tabular-nums;color:#f4f3e8}
.resultParts{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:8px 0}.resultParts .chip{font-size:10px;border:1px solid #60dcdd66;color:#9df1ee;padding:3px 6px;border-radius:3px;background:#14202bcc}
/* After a win: new trophies as chips, then the save line (play/js/cerberus-results.js keepCard). */
.resultKeep{margin:8px 0 0;font-size:12px;text-align:left}.resultKeep p{margin:4px 0}
.resultTrophies{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.resultTrophies .chip{font-size:10px;border:1px solid #ffd18b66;color:#ffe2aa;padding:3px 6px;border-radius:3px;background:#3b2a1a88}
.card .resultKeep a{display:inline;margin:0;color:#b8fff2}.card .resultKeep small{display:inline;margin:0;color:#9fb4bb;font-size:11px}
/* Signed out: the save ask is a gold button that matches the trophy chips, with the fine print beside it. */
.keepLine:has(.keepGo){display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.card .resultKeep a.keepGo{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:4px;background:#ffd18b;color:#1d1408;font-weight:700;font-size:13px;text-decoration:none;box-shadow:0 0 14px #ffd18b33;transition:background .15s,box-shadow .15s}
.card .resultKeep a.keepGo::before{content:'★';font-size:12px}
.card .resultKeep a.keepGo:hover,.card .resultKeep a.keepGo:focus-visible{background:#ffe2aa;box-shadow:0 0 20px #ffd18b66}
.card .resultKeep a.keepGo:focus-visible{outline:2px solid #fff1b0;outline-offset:2px}
.resultSquad{width:100%;border-collapse:collapse;font-size:11px;margin:10px 0 0;font-variant-numeric:tabular-nums}.resultSquad th{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#9fb4bb;text-align:right;font-weight:500;padding:4px 6px}.resultSquad th:first-child,.resultSquad td:first-child{text-align:left}.resultSquad td{text-align:right;padding:5px 6px;border-top:1px solid #7da09f22;color:#dce7e4}.resultSquad tr.self td{background:#95e7d714;color:#fff}.card .resultSquad small{display:inline;margin:0;text-align:left;color:#8fa6ad;font-size:10px}.resultSquad .mvp{margin-left:6px;font-size:8px;letter-spacing:.12em;color:#102b32;background:#ffd18b;padding:1px 4px;border-radius:2px}
.card[data-mode=results] #start{margin:16px 0 8px}.card #changeHunter{background:transparent;color:#bfe9df;border:1px solid #95e7d777;margin:0 0 6px;padding:11px}
@media(max-width:520px){.resultStats{grid-template-columns:repeat(2,1fr)}.resultStats dd{font-size:17px}.card .resultSquad small{display:none}.grade{flex-basis:48px;height:48px;font-size:28px}.card[data-mode=results]{padding:18px}}
/* The revive prompt is a fight HUD element; keep it off the results and pause cards. */
body:not(.fighting) #reviveHelp{display:none}
/* Combat feel round one: ultimate meter, ultimate splash, weak-spot prompt and impact speed lines. */
#ultimateMeter .health.ult div{background:linear-gradient(90deg,#6fe3ff,#c79bff);transition:width .2s linear}
#ultimateMeter[data-ready=true] .health.ult{border-color:#ffe08a;box-shadow:0 0 12px #ffd25e88}
#ultimateMeter[data-ready=true] .health.ult div{background:linear-gradient(90deg,#ffd25e,#fff4c4,#ffd25e);background-size:200% 100%;animation:ultShine 1s linear infinite}
#ultimateMeter[data-ready=true] #ultimateLabel{color:#ffe7a0}
#ultimateMeter[data-casting=true] #ultimateLabel{color:#fff;letter-spacing:.3em}
#ultimateMeter.flash{animation:ultFlash .7s ease-out}
@keyframes ultShine{to{background-position:-200% 0}}
@keyframes ultFlash{0%{transform:scale(1.18);filter:brightness(2)}100%{transform:none;filter:none}}
#ultimateBanner{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
#ultimateBanner[hidden]{display:none}
#ultimateBanner .band{position:absolute;left:-10%;right:-10%;top:38%;height:22%;background:linear-gradient(90deg,transparent,var(--hero,#8ff5e3) 18%,var(--accent,#fff) 50%,var(--hero,#8ff5e3) 82%,transparent);transform:skewY(-6deg) scaleX(0);opacity:.92;box-shadow:0 0 40px var(--accent,#fff)}
#ultimateBanner img{position:absolute;left:8%;top:22%;height:56%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 0 30px var(--accent,#fff);transform:translateX(-140%);opacity:0}
#ultimateBanner .words{position:absolute;left:30%;top:41%;transform:skewY(-6deg) translateX(60%);opacity:0;color:#0b1220;text-transform:uppercase}
#ultimateBanner .who{display:block;font-size:clamp(14px,2vw,24px);font-weight:800;letter-spacing:.4em}
#ultimateBanner .what{display:block;font-size:clamp(30px,6vw,76px);font-weight:900;letter-spacing:.06em;line-height:1;color:#fff;-webkit-text-stroke:2px #0b1220;text-shadow:4px 4px 0 #0b1220}
#ultimateBanner.play .band{animation:ultBand 1.9s cubic-bezier(.2,.9,.2,1) forwards}
#ultimateBanner.play img{animation:ultSlide 1.9s cubic-bezier(.2,.9,.2,1) forwards}
#ultimateBanner.play .words{animation:ultWords 1.9s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes ultBand{0%{transform:skewY(-6deg) scaleX(0)}14%{transform:skewY(-6deg) scaleX(1)}82%{transform:skewY(-6deg) scaleX(1);opacity:.92}100%{transform:skewY(-6deg) scaleX(1.1);opacity:0}}
@keyframes ultSlide{0%{transform:translateX(-140%);opacity:0}16%{transform:none;opacity:1}82%{transform:translateX(6%);opacity:1}100%{transform:translateX(30%);opacity:0}}
@keyframes ultWords{0%{transform:skewY(-6deg) translateX(60%);opacity:0}18%{transform:skewY(-6deg);opacity:1}82%{transform:skewY(-6deg) translateX(-3%);opacity:1}100%{transform:skewY(-6deg) translateX(-20%);opacity:0}}
#ultimateBars{position:fixed;inset:0;pointer-events:none;z-index:5}
#ultimateBars::before,#ultimateBars::after{content:'';position:absolute;left:0;right:0;height:0;background:#000;transition:height .25s ease}
#ultimateBars::before{top:0}#ultimateBars::after{bottom:0}
body.ultimateCut #ultimateBars::before,body.ultimateCut #ultimateBars::after{height:11vh}
body.ultimateCut header,body.ultimateCut .objective,body.ultimateCut .weapons,body.ultimateCut #lockStatus,body.ultimateCut #reticle{opacity:.15;transition:opacity .2s}
#ultimateToast{position:fixed;top:17%;right:24px;padding:6px 14px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#0b1220;background:var(--accent,#8ff5e3);transform:skewX(-12deg);box-shadow:0 0 16px var(--accent,#8ff5e3);pointer-events:none;z-index:5}
#ultimateToast[hidden]{display:none}
#weakSpotPrompt{position:fixed;transform:translate(-50%,-150%);pointer-events:none;text-align:center;z-index:4;animation:weakPulse .5s ease-in-out infinite alternate}
#weakSpotPrompt[hidden]{display:none}
#weakSpotPrompt b{display:block;font-size:22px;font-weight:900;letter-spacing:.3em;color:#fff4c4;text-shadow:0 0 12px #ff9a3a,0 2px 3px #000}
#weakSpotPrompt span{font-size:11px;color:#ffd9a8;text-shadow:0 1px 3px #000}
@keyframes weakPulse{to{transform:translate(-50%,-160%) scale(1.06)}}
#impactLines{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;background:repeating-conic-gradient(from 3deg at 50% 50%,#fff0 0deg 5deg,#ffffff38 5deg 5.6deg,#fff0 5.6deg 11deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 32%,#000 78%);mask:radial-gradient(circle at 50% 50%,transparent 32%,#000 78%)}
#impactLines[hidden]{display:none}
@media(prefers-reduced-motion:reduce){#ultimateBanner.play .band,#ultimateBanner.play img,#ultimateBanner.play .words{animation:none;opacity:1}#ultimateBanner.play .band,#ultimateBanner.play .words{transform:skewY(-6deg)}#ultimateBanner.play img{transform:none}#weakSpotPrompt,#ultimateMeter[data-ready=true] .health.ult div{animation:none}}
/* Round two set pieces: crater rise / enrage cutaways share the letterbox, red sky wash, counter prompt, kill cam. */
body.cinematicCut #ultimateBars::before,body.cinematicCut #ultimateBars::after,body.killCut #ultimateBars::before,body.killCut #ultimateBars::after{height:11vh}
body.killCut header,body.killCut .objective,body.killCut .weapons,body.killCut #lockStatus,body.killCut #reticle,body.killCut #counterPrompt,body.killCut #weakSpotPrompt{opacity:0;transition:opacity .2s}
body.cinematicCut header,body.cinematicCut .objective,body.cinematicCut .weapons,body.cinematicCut #lockStatus,body.cinematicCut #reticle{opacity:.15;transition:opacity .2s}
#rageSky{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(120% 70% at 50% 0%,rgba(255,60,20,.55),rgba(140,10,10,.25) 55%,transparent 80%);mix-blend-mode:screen}
#cinematicFlash{position:fixed;inset:0;pointer-events:none;z-index:7;background:radial-gradient(circle at 50% 45%,#fff8e0,#ffb26a 60%,#ff5a1a);opacity:0}
#cinematicFlash[hidden]{display:none}
#counterPrompt{position:fixed;left:50%;top:58%;transform:translate(-50%,-50%);pointer-events:none;z-index:6;text-align:center;color:#fff;text-shadow:0 2px 4px #000}
#counterPrompt[hidden]{display:none}
#counterPrompt .ring{width:96px;height:96px;margin:0 auto 8px;border-radius:50%;border:4px solid rgba(255,255,255,.35);position:relative}
#counterPrompt .ring i{position:absolute;inset:-4px;border-radius:50%;border:4px solid #ffb04a;box-shadow:0 0 18px #ff7a2a;transition:transform .05s linear}
#counterPrompt[data-open="true"] .ring{border-color:#8ff5e3;box-shadow:0 0 26px #8ff5e3 inset}
#counterPrompt[data-open="true"] .ring i{border-color:#8ff5e3}
#counterPrompt b{display:block;font-size:28px;font-weight:900;letter-spacing:.35em}
#counterPrompt span{font-size:12px;opacity:.85}
#counterPrompt kbd{border:1px solid #fff;border-radius:4px;padding:0 5px;font:inherit;font-weight:800}
#counterPrompt ol{list-style:none;display:flex;gap:10px;justify-content:center;margin:8px 0 0;padding:0}
#counterPrompt li{width:16px;height:16px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.4)}
#counterPrompt li[data-state="hit"]{background:#8ff5e3;box-shadow:0 0 10px #8ff5e3}
#counterPrompt li[data-state="miss"]{background:#ff4a2a}
#counterPrompt strong{display:block;margin-top:10px;font-size:clamp(26px,5vw,56px);font-weight:900;letter-spacing:.08em;-webkit-text-stroke:2px #0b1220}
#counterPrompt strong[data-kind="good"]{color:#8ff5e3}#counterPrompt strong[data-kind="bad"]{color:#ff6a3a}#counterPrompt strong[data-kind="whiff"]{color:#ffd27a;font-size:22px}
#counterPrompt.shake{animation:counterShake .25s linear}
@keyframes counterShake{25%{transform:translate(calc(-50% - 8px),-50%)}75%{transform:translate(calc(-50% + 8px),-50%)}}
#killBanner{position:fixed;left:0;right:0;bottom:15vh;pointer-events:none;z-index:6;text-align:center;color:#fff;text-transform:uppercase;text-shadow:0 3px 0 #0b1220,0 0 24px #ff7a2a}
#killBanner[hidden]{display:none}
#killBanner small{display:block;font-size:14px;font-weight:800;letter-spacing:.6em;color:#ffd27a}
#killBanner b{display:block;font-size:clamp(28px,5.5vw,64px);font-weight:900;letter-spacing:.05em}
#killBanner span{font-size:13px;letter-spacing:.3em;opacity:.85}
#killBanner.play{animation:killIn .6s cubic-bezier(.2,.9,.2,1)}
@keyframes killIn{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#counterPrompt.shake,#killBanner.play{animation:none}#rageSky{display:none}}
/* Round three: squad titan meter, TITAN FORM banner and the stagger mount prompt. */
#titanMeter{min-width:150px}
#titanMeter[hidden]{display:none}
#titanMeter .health.titan div{height:100%;width:0;background:linear-gradient(90deg,#ff8a3a,#ffe08a);transition:width .2s}
#titanMeter[data-active="true"] .health.titan div{box-shadow:0 0 12px #ffcf6a;animation:titanPulse .6s ease-in-out infinite alternate}
@keyframes titanPulse{to{filter:brightness(1.5)}}
#titanBanner{position:fixed;left:0;right:0;top:26vh;pointer-events:none;z-index:6;text-align:center;color:#fff;text-transform:uppercase;text-shadow:0 3px 0 #3a1500,0 0 30px #ffb04a}
#titanBanner[hidden]{display:none}
#titanBanner small{display:block;font-size:13px;font-weight:800;letter-spacing:.6em;color:#ffe08a}
#titanBanner b{display:block;font-size:clamp(36px,8vw,96px);font-weight:900;letter-spacing:.06em;line-height:1}
#titanBanner span{font-size:13px;letter-spacing:.2em}
#titanBanner.play{animation:titanIn .7s cubic-bezier(.2,.9,.2,1)}
@keyframes titanIn{from{opacity:0;transform:scale(2)}to{opacity:1;transform:none}}
#mountPrompt{position:fixed;left:50%;bottom:22vh;transform:translateX(-50%);pointer-events:none;z-index:5;padding:8px 18px;border:2px solid #fff4c4;border-radius:999px;background:rgba(20,10,6,.6);color:#fff4c4;font-weight:900;letter-spacing:.25em;font-size:15px;text-shadow:0 1px 3px #000;animation:weakPulse .5s ease-in-out infinite alternate}
#mountPrompt[hidden]{display:none}
#mountPrompt[data-mode="ride"]{border-color:#8ff5e3;color:#8ff5e3}
body.killCut #mountPrompt,body.killCut #titanBanner{opacity:0}
@media(prefers-reduced-motion:reduce){#titanBanner.play,#mountPrompt,#titanMeter[data-active="true"] .health.titan div{animation:none}}
/* Round four: hit text with personality, results replay. */
.damageNumber{animation:dmgPop .32s cubic-bezier(.2,1.6,.4,1);-webkit-text-stroke:.5px #0006}
@keyframes dmgPop{from{transform:translate(-50%,-50%) scale(1.7)}to{transform:translate(-50%,-50%) scale(1)}}
#partStamps{position:fixed;right:4vw;top:24vh;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;z-index:5}
.partStamp{padding:6px 18px 8px 22px;background:linear-gradient(100deg,#2a0c06e6,#5a1a0ae6);border-left:5px solid #ffb04a;color:#fff;transform:skewX(-10deg);box-shadow:0 6px 18px #0008;animation:stampIn .45s cubic-bezier(.2,1.4,.3,1)}
.partStamp small{display:block;font-size:11px;font-weight:900;letter-spacing:.45em;color:#ffcf6a}
.partStamp b{display:block;font-size:22px;font-weight:900;letter-spacing:.06em;text-shadow:0 2px 0 #000}
@keyframes stampIn{0%{opacity:0;transform:skewX(-10deg) translateX(60px) scale(1.6)}60%{opacity:1;transform:skewX(-10deg) scale(.95)}to{transform:skewX(-10deg)}}
body:has(.partStamp) #combatToast{visibility:hidden}
.heavyNumber{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:4;text-align:center;line-height:1;text-shadow:0 2px 0 #000,0 0 14px currentColor}
.heavyNumber[hidden]{display:none}
.heavyNumber small{display:block;font-size:12px;font-weight:900;letter-spacing:.35em}
.heavyNumber b{display:block;font-size:34px;font-weight:900;-webkit-text-stroke:1.5px #0b1220}
.heavyNumber.pop{animation:heavyPop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes heavyPop{from{transform:translate(-50%,-50%) scale(2.2) rotate(-8deg)}to{transform:translate(-50%,-50%) scale(1)}}
#hitChain{position:fixed;right:4vw;top:52vh;pointer-events:none;z-index:4;color:#fff;text-shadow:0 2px 0 #000;transform:skewX(-8deg)}
#hitChain[hidden]{display:none}
#hitChain b{font-size:44px;font-weight:900;-webkit-text-stroke:1.5px #0b1220}
#hitChain span{margin-left:6px;font-size:13px;font-weight:900;letter-spacing:.3em;color:#c9e6ee}
#hitChain[data-tier="2"] b{color:#ffe08a}#hitChain[data-tier="3"] b{color:#ff8a4a;font-size:52px}
#resultsReplay{margin:0 0 12px;max-width:240px}
#resultsReplay[hidden]{display:none}
#resultsReplay canvas{display:block;width:100%;height:auto;border:2px solid #ffffff40;border-radius:6px;background:#000}
#resultsReplay figcaption{font-size:11px;font-weight:800;letter-spacing:.3em;color:#ffcf6a;margin-top:4px}
body.killCut #partStamps,body.killCut #hitChain,body.killCut .heavyNumber{opacity:0}
@media(prefers-reduced-motion:reduce){.damageNumber,.partStamp,.heavyNumber.pop{animation:none}}
/* Round five: colourways unlocked by results grades. */
#colourways{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
#colourways .eyebrow{margin-right:4px}
#colourways button{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border:1px solid #ffffff40;border-radius:999px;background:#0b1220aa;color:#e8f4ff;font-size:12px;cursor:pointer}
#colourways button i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--tint) 50%,var(--swatch) 50%);box-shadow:0 0 0 1px #0008}
#colourways button[aria-checked="true"]{border-color:var(--swatch);box-shadow:0 0 10px var(--swatch)}
#colourways button:disabled{opacity:.45;cursor:not-allowed}
.colourwayUnlock{margin:8px 0 0;font-size:12px;font-weight:800;letter-spacing:.08em;color:#ffcf6a}

/* Character select polish (2026-10-29). */
.crewCard{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}.crewCard>*{grid-column:1/-1;min-width:0}
.crewCard>#raidStart:not([hidden]),.crewCard>#raidStart:not([hidden])~#start{grid-column:auto}
.crewCard>#raidStart~#start{background:transparent;color:#bfeee3;box-shadow:inset 0 0 0 1px #95e7d7aa}
.crewCard>#raidStart~#start:hover:not(:disabled){background:#95e7d71a}
.crewCard>button:hover:not(:disabled){filter:brightness(1.08)}
.hunterShowcase{position:relative;background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--hero-accent) 22%,transparent),transparent 62%),radial-gradient(ellipse at 50% 35%,#37535d77,transparent 66%);border-color:color-mix(in srgb,var(--hero-accent) 30%,#8caba633);transition:border-color .3s}
.hunterShowcase #hunterPreview{height:300px}
.hunterBio.swap{animation:hunterSwap .32s ease-out}
@keyframes hunterSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hunterBio h4{letter-spacing:-.02em}
.hunterCard img{object-position:50% 24%;transition:transform .25s ease}
.crewCard .hunterCard{transition:border-color .15s,background .15s}
.crewCard .hunterCard:hover{border-color:var(--card-accent)}
.crewCard .hunterCard:hover img{transform:scale(1.04)}
.crewCard .hunterCard[aria-pressed=true] strong{color:var(--card-accent)}
.crewCard .hunterLoadout button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 10px}
.crewCard .hunterLoadout button b{font-size:12px;font-weight:600}
.crewCard .hunterLoadout button small{font-size:10px;margin:0;color:#8fa9b1;font-weight:400}
.crewCard .hunterLoadout button[aria-pressed=true] small{color:#e9cf9c}
.hunterBio #colourways{margin-top:12px}
#colourways .eyebrow{flex-basis:100%;margin:0 0 2px}
.card #colourways button{width:auto;margin:0;padding:4px 10px 4px 5px;font:500 11px system-ui}
.card #colourways button:not(:disabled):hover{border-color:var(--swatch)}
@media(max-width:999px){#veil{padding-top:56px}}
@media(prefers-reduced-motion:reduce){.hunterBio.swap{animation:none}.crewCard .hunterCard:hover img{transform:none}}
@media(min-width:761px){.hunterCard img{height:96px}.crewCard h2{margin:4px 0}}
@media(min-width:761px){.hunterShowcase{display:flex;flex-direction:column}.hunterShowcase #hunterPreview{flex:1 1 300px;min-height:300px;height:auto}}
@media(max-width:760px){.hunterShowcase{grid-template-columns:.95fr 1.05fr}.card #colourways{gap:4px}.card #colourways button{padding:3px 8px 3px 3px;font-size:10px}.card #colourways button:disabled{padding:3px}.card #colourways button:disabled span{display:none}}

/* End screen (2026-10-29): the veil had no z-index, so fight overlays (kill banner z6, numbers, the white cinematic
   flash z7) painted over the results card. Keep the squad panel above it so the room code stays readable. */
#veil{z-index:8}#coopPanel{z-index:9}
body{-webkit-user-select:none;user-select:none}input,textarea,.card code{-webkit-user-select:text;user-select:text}
/* Melee charge skill: the meter flashes gold through the perfect-release window, shakes once overheld, and glows
   warm while beat taps are landing in a chain. */
#meleeQueue[data-perfect=true]{border-color:#ffe08a;box-shadow:0 0 0 1px #ffe08a88,0 0 22px #ffcf6a66;animation:meleePerfect .12s steps(2) infinite}
#meleeQueue[data-perfect=true] #meleeSegments i{background:#ffe08a;box-shadow:0 0 10px #ffd36a99}
#meleeQueue[data-perfect=true] #meleeMeterLabel{color:#ffe08a}
#meleeQueue[data-over=true]{border-color:#e0795aaa;animation:meleeWobble .16s ease-in-out infinite}
#meleeQueue[data-over=true] #meleeSegments i{background:linear-gradient(90deg,#e8a07a var(--fill,0%),#3a2b2b var(--fill,0%))}
#meleeQueue[data-streak=true] #meleeBonusCount{color:#ffe08a}
@keyframes meleePerfect{50%{background:linear-gradient(135deg,#4a4020ee,#2a2414ee)}}
@keyframes meleeWobble{25%{transform:translateX(-2px) rotate(-.6deg)}75%{transform:translateX(2px) rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){#meleeQueue[data-perfect=true],#meleeQueue[data-over=true]{animation:none}}
/* Timing ring: the approach ring collapses onto the fixed target ring as the charged blow lands. Gold in the
   perfect window, warm in the last stretch where a tap spends it (EARLY), pale while it is still far out. */
#meleeRing{position:fixed;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:6}
#meleeRing[hidden]{display:none}
#meleeRing i{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
#meleeRing .ringTarget{width:64px;height:64px;border:4px solid #ffffffe6;box-shadow:0 0 0 3px #000a,inset 0 0 0 3px #0008}
#meleeRing .ringApproach{width:64px;height:64px;border:5px solid #9ff3dc;box-shadow:0 0 0 2px #000a,0 0 14px #9ff3dc99;will-change:transform}
#meleeRing[data-zone=close] .ringApproach{border-color:#ffb27a;box-shadow:0 0 14px #ffb27a99}
#meleeRing[data-zone=perfect] .ringApproach,#meleeRing[data-zone=perfect] .ringTarget{border-color:#ffe08a;box-shadow:0 0 18px #ffe08acc}
body.touch #meleeRing .ringTarget,body.touch #meleeRing .ringApproach{width:76px;height:76px}
#meleeRingWord{position:fixed;transform:translate(-50%,-160%);font:800 22px/1 system-ui,sans-serif;letter-spacing:.08em;text-shadow:0 2px 0 #000a,0 0 14px currentColor;pointer-events:none;z-index:6}
#meleeRingWord[hidden]{display:none}
#meleeRingWord[data-grade=flawless]{font-size:34px}
#meleeRingWord.pop{animation:ringWord .6s ease-out forwards}
@keyframes ringWord{0%{transform:translate(-50%,-120%) scale(1.5);opacity:1}25%{transform:translate(-50%,-160%) scale(1)}100%{transform:translate(-50%,-220%) scale(1);opacity:0}}
/* Squad invite QR: white card so phone cameras read it on the dark panel. */
#coopQr{margin:6px 0;padding:8px;background:#fff;border-radius:6px;width:max-content;text-align:center}
#coopQr[hidden]{display:none}
#coopQr svg{display:block}
#coopQr span{display:block;margin-top:4px;font:600 11px system-ui;color:#102b32;letter-spacing:.06em}
/* Mid-fight the squad box shows only the roster; folded, it shows its title so it can be opened again. */
body.fighting #coopPanel details:not([open])>summary{display:list-item}

/* Squad invite landing (cerberus-invite-screen.js; design 2b invite): Cerberus art beside a dark hunter panel on
   desktop, stacked on phones. Fredoka for headings, sun split-flap code tiles, ember only for the Join action. */
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format('woff2')}
body.inviting #veil,body.inviting #coopPanel{visibility:hidden}
#inviteScreen{position:fixed;inset:0;z-index:40;display:flex;background:#0a1422;color:#f4f3e8;font-family:Fredoka,system-ui,sans-serif;overflow:auto}
#inviteScreen .inviteArt{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:28px 36px 36px;background:#0b1520 url(img/hub/cerberus.webp) 50% 0/cover no-repeat}
#inviteScreen .inviteArt::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,18,27,.97) 0%,rgba(8,18,27,.8) 42%,rgba(8,18,27,0) 78%),radial-gradient(circle at 0 100%,rgba(74,36,24,.85),transparent 55%)}
#inviteScreen .inviteArt>*{position:relative}
#inviteScreen .inviteMark{font:700 28px Fredoka,sans-serif;color:#fff;text-decoration:none;-webkit-text-stroke:5px #1d2a44;paint-order:stroke fill;text-shadow:0 4px 0 #1d2a44}
#inviteScreen .inviteMark b{color:#ffc42e}
#inviteScreen .inviteEyebrow{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#6ad7cf;margin-bottom:12px}
#inviteScreen .inviteFlaps{display:flex;gap:8px;margin-bottom:18px}
#inviteScreen .inviteFlaps span{flex:1;max-width:58px;height:68px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(#ffc42e 0 calc(50% - 1px),#d99f12 calc(50% - 1px) calc(50% + 1px),#ffc42e calc(50% + 1px));box-shadow:0 3px 0 #08121b;color:#1d2a44;font:700 38px ui-monospace,Consolas,monospace}
#inviteScreen h1{margin:0 0 8px;font:700 50px/1.05 Fredoka,sans-serif;letter-spacing:normal;overflow-wrap:anywhere}
#inviteScreen .inviteLead p{margin:0 0 14px;font-size:18px;color:#c9d6db}
#inviteScreen .inviteSquad{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:15px;color:#c9d6db}
#inviteScreen .inviteDots{display:flex;gap:8px}
#inviteScreen .inviteDots i{width:22px;height:22px;border-radius:50%;border:2px dashed #6b8290}
#inviteScreen .inviteDots i.on{background:#6ad7cf;border:2px solid #6ad7cf}
#inviteScreen .invitePanel{flex:0 0 460px;display:flex;flex-direction:column;gap:16px;padding:28px;background:#0c1824;border-left:1.5px solid #3a5163}
#inviteScreen .invitePanelHead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#inviteScreen h2{margin:0;font:700 22px Fredoka,sans-serif;letter-spacing:normal}
#inviteScreen .invitePanelHead a{color:#c9d6db;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
#inviteScreen .inviteHunters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1;align-content:start}
#inviteScreen .inviteHunters button{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:14px;border:2px solid #3a5163;background:#122636;color:#f4f3e8;cursor:pointer;font:700 16px Fredoka,sans-serif}
#inviteScreen .inviteHunters img{width:100%;aspect-ratio:1;object-fit:cover;background:#16303f}
#inviteScreen .inviteHunters b{padding:8px 4px;min-height:40px;display:grid;place-items:center}
#inviteScreen .inviteHunters [aria-checked=true]{border-color:#ff8a3d;box-shadow:0 0 0 3px rgba(255,138,61,.35)}
#inviteScreen .inviteHunters [aria-checked=true] b{background:#ff8a3d;color:#08121b}
#inviteScreen .inviteHunters button:focus-visible,#inviteJoin:focus-visible{outline:3px solid #6ad7cf;outline-offset:2px}
#inviteJoin{min-height:60px;border:0;border-radius:16px;background:#ff8a3d;color:#08121b;font:700 22px Fredoka,sans-serif;cursor:pointer;box-shadow:0 4px 0 #1d2a44}
#inviteJoin:disabled{opacity:.75;cursor:progress}
#inviteNote{margin:0;min-height:1.2em;color:#ffb38a;font-size:14px}
@media(max-width:820px){
  #inviteScreen{flex-direction:column}
  #inviteScreen .inviteArt{flex:0 0 auto;min-height:400px;padding:20px 16px 22px;gap:24px}
  #inviteScreen .inviteFlaps{gap:4px}#inviteScreen .inviteFlaps span{height:50px;font-size:26px}
  #inviteScreen h1{font-size:32px}#inviteScreen .inviteLead p{font-size:16px}
  #inviteScreen .inviteDots i{width:18px;height:18px}
  #inviteScreen .invitePanel{flex:1 0 auto;padding:20px 16px 24px;border-left:0;border-top:1.5px solid #3a5163}
}
#hitmarker{font-size:28px;font-weight:800;color:#d5fff4;line-height:1;text-shadow:0 1px 3px #08121b;pointer-events:none}
#hitmarker[data-kind=weak]{font-size:38px;color:#ffd36f;text-shadow:0 0 9px #ffb83a99,0 1px 3px #08121b}
/* Charged blaster and launcher (cerberus-charge-view.js): heat bar beside the crosshair with the vent window lit at the
   top, a collapsing timing ring on the crosshair, salvo pips under it, painted-target diamonds and a callout word. */
#chargeHud{position:fixed;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:6}
#chargeHud [hidden]{display:none!important}
#chargeHud .heatGauge{position:absolute;left:34px;top:-34px;width:7px;height:68px;background:#08121bb3;border:1px solid #c6fff544;border-radius:4px;overflow:hidden}
#chargeHud .heatWindow{position:absolute;left:0;right:0;top:0;background:#ffe08a40;border-bottom:1px solid #ffe08acc}
#chargeHud .heatFill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#6ad7cf,#d8f37a 70%,#ffb35f);transition:height .05s linear}
#chargeHud .heatGauge[data-state=window]{border-color:#ffe08a;box-shadow:0 0 10px #ffe08a99}
#chargeHud .heatGauge[data-state=venting]{border-color:#fff;box-shadow:0 0 14px #ffe08a}
#chargeHud .heatGauge[data-state=jam]{border-color:#ff6a4a;animation:jamBlink .25s steps(2) infinite}
#chargeHud .heatGauge[data-state=jam] .heatFill{background:#ff6a4a}
@keyframes jamBlink{50%{box-shadow:0 0 14px #ff6a4a;opacity:.55}}
#chargeHud .chargeRing i{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
#chargeHud .ringTarget{width:46px;height:46px;border:3px solid #ffffffd9;box-shadow:0 0 0 2px #000a}
#chargeHud .ringApproach{width:46px;height:46px;border:4px solid #9ff3dc;box-shadow:0 0 0 2px #000a,0 0 12px #9ff3dc99;will-change:transform}
#chargeHud .chargeRing[data-kind=salvo] .ringApproach{border-color:#ffb35f;box-shadow:0 0 12px #ffb35f99}
#chargeHud .chargeRing[data-zone=close] .ringApproach{border-color:#ffb27a}
#chargeHud .chargeRing[data-zone=perfect] i{border-color:#ffe08a;box-shadow:0 0 18px #ffe08acc}
#chargeHud .chargeRing[data-zone=over] i{border-color:#ff6a4a;box-shadow:0 0 14px #ff6a4a}
#chargeHud .salvoPips{position:absolute;left:0;top:30px;transform:translateX(-50%);display:flex;gap:5px}
#chargeHud .salvoPips i{width:9px;height:9px;border-radius:50%;border:1px solid #ffb35f;background:#08121bb3}
#chargeHud .salvoPips i[data-state=ready]{background:#ffb35f55}
#chargeHud .salvoPips i[data-state=loaded]{background:#ffb35f;box-shadow:0 0 8px #ffb35f}
.paintMark{position:fixed;width:16px;height:16px;border:2px solid #ffb35f;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 8px #ffb35f,inset 0 0 0 2px #000a;pointer-events:none;z-index:6}
.paintMark[hidden]{display:none}
#chargeWord{position:fixed;left:50%;top:50%;transform:translate(-50%,-260%);font:800 22px/1 system-ui,sans-serif;letter-spacing:.08em;text-shadow:0 2px 0 #000a,0 0 14px currentColor;pointer-events:none;z-index:6}
#chargeWord[hidden]{display:none}
#chargeWord[data-kind=perfect],#chargeWord[data-kind=cluster]{font-size:30px}
#chargeWord.pop{animation:chargeWord .8s ease-out forwards}
@keyframes chargeWord{0%{transform:translate(-50%,-200%) scale(1.5);opacity:1}25%{transform:translate(-50%,-260%) scale(1)}100%{transform:translate(-50%,-320%) scale(1);opacity:0}}
body.touch #chargeHud .ringTarget,body.touch #chargeHud .ringApproach{width:58px;height:58px}
@media(prefers-reduced-motion:reduce){#chargeHud .heatGauge[data-state=jam]{animation:none}}

/* Squad room (play/js/cerberus-squad-room.js): the room code, invite actions and eight live seats on the lobby card
   while a raid room is open; it replaces the corner panel until the fight starts. */
body.squadLobby #coopPanel{display:none}
@media(min-width:1000px){body.squadLobby .crewCard{margin-left:auto;margin-right:auto}}
#squadRoom{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;margin:14px 0 16px;padding:14px 16px;border:1px solid #7da09f33;border-radius:10px;background:#0a1922b8}
#squadRoom[hidden],.card #squadLeave[hidden]{display:none}
.squadLabel{display:block;font-size:10px;letter-spacing:.2em;color:#9fb4bb;margin-bottom:7px}
.squadTiles{display:flex;gap:4px}.squadTiles b{display:grid;place-items:center;width:27px;height:35px;border-radius:5px;background:#ffd18b;color:#1d1408;font:800 17px system-ui;box-shadow:inset 0 -3px #0000002e;user-select:text}
.squadActs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.card .squadBtn{display:inline-flex;align-items:center;width:auto;margin:0;padding:7px 12px;border-radius:7px;font:600 12px system-ui;background:#0f2a36;color:#d6fff6;box-shadow:inset 0 0 0 1px #9ff4e166}
.card .squadBtn.primary{background:#9ff4e1;color:#08201b;box-shadow:none}
.card .squadBtn:hover{filter:brightness(1.12)}
.squadCode>label{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11px;color:#b8d0d4}
#squadQr{margin-top:10px;padding:8px;background:#fff;border-radius:6px;width:max-content;text-align:center}#squadQr[hidden]{display:none}#squadQr svg{display:block}
#squadQr span{display:block;margin-top:4px;font:600 11px system-ui;color:#102b32;letter-spacing:.06em}
#squadSeats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.seat{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.card .seat b{display:block;margin:0;font-size:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eef5ef}
.card .seat small{display:block;margin:0;font-size:10px;line-height:1.3;color:#9fb4bb;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .n{display:none}
#squadRoom.guest .squadCode>label{display:none}
.seatAv{position:relative;width:54px;height:54px;margin-bottom:4px;border-radius:50%;background:#0f2633 center 12%/150% no-repeat;border:2px solid #7da09f66;transition:border-color .2s,box-shadow .2s}
.seatAv i{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:900 11px system-ui;font-style:normal;border:2px solid #0e2130;background:#33474f;color:#cfe}
.seat.ready .seatAv i{background:#43e08a;color:#05220f}
.seat.away{opacity:.55}.seat.away .seatAv i{background:#ff9d6c;color:#2a1206}
.seat.you .seatAv{border-color:#9ff4e1;box-shadow:0 0 0 3px #9ff4e133,0 0 16px #6fe2c855}
.seat.open .seatAv{border:2px dashed #7da09f55;background:#0b1c25}
.seat.open .seatAv::after{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:#7da09f88;font:300 24px system-ui}
.seat.open b{color:#7da09f}
#squadNote{margin:10px 0 0;font-size:12px;color:#9fb4bb}#squadNote em{font-style:normal;color:#9ff4e1}
.hunterCard{position:relative}
.hunterCard[data-taken]::after{content:attr(data-taken);position:absolute;top:6px;right:6px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 9px system-ui;letter-spacing:.06em;text-transform:uppercase;background:#000b;color:#ffe2aa;padding:3px 7px;border-radius:999px}
body.squadLobby .crewCard>#start,body.squadLobby .crewCard>#raidStart~#start{background:linear-gradient(90deg,#c8fff1 var(--ready,0%),#95e7d7 var(--ready,0%));color:#08201b;box-shadow:0 -14px 22px #0d1d2b;font-weight:700;transition:background .3s;position:sticky;bottom:8px;z-index:2}
.card #squadLeave{display:block;width:auto;margin:0 auto 4px;padding:4px 8px;background:none;color:#9fb4bb;font:500 12px system-ui;text-decoration:underline;text-underline-offset:3px}
.card #squadLeave:hover{color:#dce7e4}
#squadToasts{position:fixed;z-index:12;right:20px;top:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.squadToast{display:flex;align-items:center;gap:10px;background:#0e2130f2;border:1px solid #ffd18b66;border-radius:12px;padding:8px 14px 8px 8px;box-shadow:0 10px 30px #0008;font:13px system-ui;color:#f4f3e8;animation:squadToastIn .25s ease-out;transition:opacity .4s,transform .4s}
.squadToast img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:center 12%;border:2px solid #ffd18b}
.squadToast b{color:#ffd18b}.squadToast.out{opacity:0;transform:translateY(-6px)}
@keyframes squadToastIn{from{opacity:0;transform:translateY(-8px)}}
@media(max-width:860px){#squadRoom{grid-template-columns:1fr;gap:14px}#squadSeats{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:10px}}
@media(max-width:520px){.squadTiles b{width:24px;height:31px;font-size:15px}.seatAv{width:46px;height:46px}#squadToasts{left:12px;right:12px;align-items:stretch}
  .seat.open~.seat.open{display:none}.seat .w{display:none}.seat .n{display:inline}}
@media(prefers-reduced-motion:reduce){.squadToast{animation:none}}