:root{--blood:#47091a;--blood-bright:#781323;--stone:#33323c;--ash:#938f91;--bone:#e9e2d6;--void:#0b0a10;--spirit:#4bf2fc}*{box-sizing:border-box}html,body{background:var(--void);height:100%;color:var(--bone);margin:0;font-family:Cormorant Garamond,Georgia,serif;overflow:hidden}#game{justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#game canvas{image-rendering:pixelated}#lobby{z-index:10;background:radial-gradient(at 50% 40%,#78132359,#0000 60%),radial-gradient(at 50% 120%,#4bf2fc14,#0000 50%),#0b0a10eb;justify-content:center;align-items:center;transition:opacity .4s;display:flex;position:fixed;inset:0}#lobby.hidden{opacity:0;pointer-events:none}.lobbyPanel{text-align:center;background:linear-gradient(#33323c59,#0b0a1099);border:1px solid #938f9140;width:min(580px,100vw - 32px);padding:40px 36px 32px;box-shadow:0 0 60px #47091a99,inset 0 0 40px #0009}.lobbyKicker{letter-spacing:.35em;text-transform:uppercase;color:var(--ash);font-size:13px}.lobbyPanel h1{color:var(--bone);text-shadow:0 0 24px #781323e6, 0 2px 0 var(--blood);margin:4px 0 6px;font-family:UnifrakturCook,serif;font-size:72px;line-height:1}.lobbySub{color:var(--ash);margin:0 0 26px;font-size:18px;font-style:italic}#nameInput{text-align:center;width:100%;color:var(--bone);background:#00000073;border:1px solid #938f9159;outline:none;margin-bottom:12px;padding:12px 14px;font:600 20px Cormorant Garamond,serif}#nameInput:focus{border-color:var(--spirit);box-shadow:0 0 12px #4bf2fc40}#findBtn{cursor:pointer;letter-spacing:.12em;text-transform:uppercase;width:100%;color:var(--bone);background:linear-gradient(180deg, var(--blood-bright), var(--blood));border:1px solid #a3243a;padding:13px;font:700 20px Cormorant Garamond,serif;transition:filter .15s,transform .15s}#findBtn:hover{filter:brightness(1.25)}#findBtn:active{transform:translateY(1px)}#findBtn:disabled{filter:grayscale(.7)brightness(.7);cursor:wait}#lobbyStatus{min-height:24px;color:var(--spirit);margin-top:14px;font-size:17px}#lobbyStatus.error{color:#ff6b7d}.lobbyKeys{color:var(--ash);text-align:left;border-top:1px solid #938f9133;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:18px;padding-top:18px;font-size:15px;display:grid}.lobbyKeys b{color:var(--bone);font-weight:700}:root{--gold:#b8975a;--gold-dim:#b8975a59}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}#hud.hidden,.hidden{display:none!important}#hud>*{pointer-events:auto}.panel{border:1px solid var(--gold-dim);background:linear-gradient(#14121aeb,#0b0a10eb);position:absolute;box-shadow:0 0 0 1px #000c,0 8px 30px #00000080}.panelKicker{letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-size:12px}.panelTitle{color:var(--gold);border-bottom:1px solid var(--gold-dim);padding:10px 14px 6px;font-size:22px;font-weight:700}#statsPanel{padding:8px 14px;top:12px;left:12px}#statsLine{color:var(--bone);font-size:15px;font-weight:600}#chatPanel{flex-direction:column;width:min(400px,100vw - 24px);display:flex;bottom:12px;left:12px}.chatTabs{gap:2px;padding:6px 6px 0;display:flex}.chatTab{color:var(--ash);cursor:pointer;background:0 0;border:1px solid #0000;padding:3px 10px;font:700 14px Cormorant Garamond,serif}.chatTab.active{color:var(--gold);border-color:var(--gold-dim);background:#b8975a14}.chatBox{height:170px;padding:6px 10px;font-size:15px;line-height:1.3;overflow-y:auto}.chatBox::-webkit-scrollbar{width:6px}.chatBox::-webkit-scrollbar-thumb{background:var(--gold-dim)}.chatLine{color:var(--bone);word-wrap:break-word;margin:1px 0}.chatLine .who{color:#8fd9ff;font-weight:700}.chatLine .sys{color:var(--gold);font-style:italic}.chatLine.combat{color:var(--ash)}.chatLine.combat b{color:var(--bone)}.chatLine.combat .dmg{color:#ff8c9a;font-weight:700}.chatLine.combat .int{color:#ffcf5a;font-weight:700}#chatInput{color:var(--bone);background:#00000080;border:1px solid #938f9140;outline:none;margin:4px 6px 6px;padding:6px 8px;font:600 15px Cormorant Garamond,serif}#chatInput:focus{border-color:var(--gold)}#heroPanel{width:270px;top:12px;right:12px}.hero{border-bottom:1px solid #ffffff0a;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:6px 12px;display:grid}.hero.active{box-shadow:inset 2px 0 0 var(--gold);background:#b8975a24}.hero.locked{opacity:.45}.heroIcon{width:34px;height:34px;color:var(--bone);background:linear-gradient(135deg, var(--blood-bright), var(--blood));border:1px solid var(--gold-dim);place-items:center;font-size:18px;font-weight:700;display:grid}.heroName{color:var(--bone);font-size:17px;font-weight:700;line-height:1.1}.heroRole{color:var(--ash);font-size:13px}.heroTag{color:var(--ash);font-size:12px}.heroInfo{border-top:1px solid var(--gold-dim);padding:10px 14px}.heroInfoName{color:var(--gold);font-size:19px;font-weight:700}.heroInfo p{color:var(--ash);margin:4px 0 10px;font-size:14px;line-height:1.35}.ratingLabel{color:var(--ash);margin-bottom:4px;font-size:12px}.ratings{gap:6px;display:flex}.ratings div{text-align:center;border:1px solid var(--gold-dim);flex:1;padding:4px 0}.ratings div.off{opacity:.4}.ratings span{color:var(--ash);font-size:12px;display:block}.ratings b{color:var(--bone);font-size:15px}#queueBtn,#huntBtn{cursor:pointer;letter-spacing:.1em;text-transform:uppercase;color:#1a1408;background:linear-gradient(#d9b878,#9c7a3c);border:1px solid #e6c88a;width:calc(100% - 24px);margin:4px 12px 12px;padding:11px;font:700 18px Cormorant Garamond,serif;display:block}#queueBtn:hover,#huntBtn:hover{filter:brightness(1.1)}#queueBtn[data-state=queued],#huntBtn[data-state=queued]{color:var(--bone);background:linear-gradient(180deg, var(--blood-bright), var(--blood));border-color:#a3243a}#queueBtn small,#huntBtn small{opacity:.8;letter-spacing:0;margin-left:6px;font-size:14px}#queueBtn:disabled,#huntBtn:disabled{filter:grayscale(.8)brightness(.6);cursor:default}#banner{text-align:center;pointer-events:none;animation:.4s ease-out bannerIn;position:absolute;top:22%;left:50%;transform:translate(-50%)}.bannerTitle{color:var(--bone);text-shadow:0 0 24px #781323e6, 0 3px 0 var(--blood);font-family:UnifrakturCook,serif;font-size:64px}.bannerSub{color:var(--gold);font-size:22px;font-weight:700}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-12px)scale(1.06)}}@media (width<=900px){#heroPanel{width:220px}.chatBox{height:120px}}#hud.arena #chatPanel{opacity:.5;background:#0b0a108c;transition:opacity .2s}#hud.arena #chatPanel:hover,#hud.arena #chatPanel:focus-within{opacity:1}#hud.arena .chatBox{height:96px}.lookBox{text-align:left;align-items:center;gap:16px;margin:-8px 0 16px;display:flex}canvas.lookPreview{cursor:pointer;image-rendering:auto;background:radial-gradient(at 50% 88%,#0000008c 0 18%,#0000 19%),radial-gradient(circle at 50% 45%,#78132359,#0000 70%);border:1px solid #938f9140;flex:none;width:150px;height:150px}.lookPick{flex:1;min-width:0}.lookLabel{letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin:4px 0 6px;font-size:13px}.lookLabel span{letter-spacing:.05em;text-transform:none;color:var(--bone);margin-left:6px;font-style:italic}.swatches{flex-wrap:wrap;gap:6px;margin-bottom:8px;display:flex}.swatch{cursor:pointer;border:1px solid #000000b3;outline:1px solid #938f914d;width:24px;height:24px;padding:0;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch.on{outline:2px solid var(--spirit);box-shadow:0 0 8px #4bf2fc80}@media (width<=520px){.lookBox{flex-direction:column}}.lobbyPanel{max-height:calc(100vh - 32px);padding-top:28px;overflow-y:auto}.formLabel{letter-spacing:.2em;text-transform:uppercase;color:var(--ash);text-align:left;margin:14px 0 6px;font-size:13px}.formLabel span{letter-spacing:.04em;text-transform:none;color:var(--bone);margin-left:6px;font-style:italic}.nameField{width:100%;color:var(--bone);background:#00000073;border:1px solid #938f9159;outline:none;padding:10px 12px;font:600 19px Cormorant Garamond,serif}.nameField:focus{border-color:var(--spirit)}.classPick{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;display:grid}.classChip{text-align:left;cursor:pointer;color:var(--bone);background:#00000059;border:1px solid #938f9140;grid-template-rows:auto auto;grid-template-columns:22px 1fr;align-items:center;column-gap:6px;padding:6px 8px;font:700 15px Cormorant Garamond,serif;display:grid}.classChip .chipIcon{color:var(--gold);text-align:center;grid-row:span 2;font-size:17px}.classChip .chipRole{color:var(--ash);font-size:12px;font-weight:600}.classChip:hover{border-color:var(--gold-dim)}.classChip.on{border-color:var(--spirit);background:#4bf2fc14;box-shadow:0 0 10px #4bf2fc33}.clsBlurb{color:var(--ash);text-align:left;min-height:20px;margin-top:8px;font-size:15px;font-style:italic}.clsBlurb i{color:#8fd9ff}.lookBox{margin:14px 0 6px}.lookBox.big canvas.lookPreview{width:190px;height:190px}.formError{color:#ff6b7d;text-align:left;min-height:20px;font-size:15px}.formRow{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.primaryBtn,.ghostBtn{cursor:pointer;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;font:700 17px Cormorant Garamond,serif}.primaryBtn{color:var(--bone);background:linear-gradient(180deg, var(--blood-bright), var(--blood));border:1px solid #a3243a;flex:1}.ghostBtn{color:var(--ash);background:0 0;border:1px solid #938f9159}.primaryBtn:hover,.ghostBtn:hover{filter:brightness(1.25)}.primaryBtn:disabled,.ghostBtn:disabled{filter:grayscale(.8)brightness(.6);cursor:default}.rosterList{text-align:left;border:1px solid #938f9133;margin-bottom:14px}.hero{cursor:pointer;position:relative}.hero:hover{background:#ffffff08}.hero.empty .heroIcon{color:var(--ash);background:0 0;border-style:dashed}.hero.empty .heroName{color:var(--ash)}.heroText{min-width:0}.heroName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.heroDel{color:var(--ash);cursor:pointer;opacity:0;background:#0009;border:1px solid #938f914d;padding:2px 7px;font:700 13px Cormorant Garamond,serif;transition:opacity .15s;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.hero:hover .heroDel,.heroDel.armed{opacity:1}.heroDel.armed{color:#ff6b7d;border-color:#a3243a}#heroCount,#slotCount{color:var(--ash);font-size:14px;font-weight:600}#menuBar{flex-direction:column;gap:6px;display:flex;position:absolute;bottom:12px;left:calc(min(400px,100vw - 24px) + 20px)}.menuBtn{cursor:pointer;width:58px;height:52px;color:var(--gold);border:1px solid var(--gold-dim);background:linear-gradient(#14121aeb,#0b0a10eb);align-content:center;place-items:center;gap:1px;padding:0;display:grid;box-shadow:0 0 0 1px #000c}.menuBtn span{font-size:20px;line-height:1}.menuBtn small{letter-spacing:.04em;color:var(--ash);font:700 11px Cormorant Garamond,serif}.menuBtn:hover,.menuBtn.on{border-color:var(--gold);box-shadow:0 0 12px #b8975a59}.menuBtn.on small{color:var(--bone)}#hud.arena #menuBar{display:none}#champWin{flex-direction:column;max-width:700px;max-height:calc(100vh - 24px);display:flex;bottom:12px;left:calc(min(400px,100vw - 24px) + 92px);right:294px}@media (width<=1180px){#champWin{z-index:3;max-width:none;max-height:calc(100vh - 24px);inset:12px 12px auto}}#hud.arena #champWin{display:none}.winHead{border-bottom:1px solid var(--gold-dim);justify-content:space-between;align-items:center;padding:10px 14px 6px;display:flex}.winTitle{color:var(--gold);font-size:22px;font-weight:700}.winTitle small{color:var(--ash);margin-left:6px;font-size:15px;font-weight:600}.winClose{color:var(--ash);cursor:pointer;background:0 0;border:1px solid #0000;padding:2px 8px;font:700 16px Cormorant Garamond,serif}.winClose:hover{color:var(--bone);border-color:var(--gold-dim)}.winTabs{border-bottom:1px solid #ffffff0d;gap:2px;padding:6px 8px 0;display:flex}.winTab{color:var(--ash);cursor:pointer;background:0 0;border:1px solid #0000;border-bottom:none;padding:5px 12px;font:700 15px Cormorant Garamond,serif}.winTab.on{color:var(--gold);border-color:var(--gold-dim);background:#b8975a14}.winBody{padding:12px 16px 16px;position:relative;overflow-y:auto}.winBody .formLabel:first-child{margin-top:0}.muted{color:var(--ash);margin:4px 0;font-size:15px;line-height:1.35}.blurb{color:var(--bone);margin:0 0 6px;font-size:16px;font-style:italic}.lockNote{color:#ff9aa6;border:1px solid #a3243a;margin-bottom:8px;padding:6px 10px;font-size:15px}.statCols{grid-template-columns:1fr 1fr;gap:18px;display:grid}.statRow{color:var(--ash);border-bottom:1px solid #ffffff0a;justify-content:space-between;padding:3px 0;font-size:15px;display:flex}.statRow b{color:var(--bone)}.outfitRow{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.outfit{border:1px solid #938f9140;padding:8px;font-size:14px}.outfit b{color:var(--bone);font-size:15px;display:block}.outfit span{color:var(--ash)}.outfit.on{border-color:var(--spirit)}.outfit.locked{opacity:.5}.talentGrid{grid-template-columns:92px repeat(3,1fr);align-items:stretch;gap:6px;margin-top:8px;display:grid}.talentRowLabel{letter-spacing:.12em;text-transform:uppercase;color:var(--gold);align-self:center;font-size:13px}.talent{text-align:left;cursor:pointer;color:var(--ash);background:#00000059;border:1px solid #938f9138;padding:7px 9px;font:600 13px/1.25 Cormorant Garamond,serif}.talent b{color:var(--bone);margin-bottom:2px;font-size:15px;display:block}.talent:hover:not(:disabled){border-color:var(--gold-dim)}.talent.on{border-color:var(--gold);box-shadow:inset 2px 0 0 var(--gold);background:#b8975a24}.talent:disabled{cursor:default;opacity:.7}.spellList{grid-template-columns:1fr 1fr;gap:8px;display:grid}.spell{border:1px solid #938f9133;grid-template-columns:36px 1fr;gap:10px;padding:8px;display:grid}.spell b{color:var(--bone);font-size:16px}.spellKey{width:36px;height:36px;color:var(--bone);background:#b98cff1f;border:1px solid #b98cff;place-items:center;font-size:17px;font-weight:700;display:grid}.spellStats{color:#c9b3ff;margin:1px 0 3px;font-size:13px}.winFlash{color:#1a1408;background:var(--gold);padding:4px 10px;font-size:14px;font-weight:700;animation:.25s ease-out bannerIn;position:absolute;top:10px;right:16px}@media (width<=640px){.talentGrid,.spellList,.statCols,.outfitRow{grid-template-columns:1fr}}#huntBtn{color:#eaf6ec;background:linear-gradient(#5f8f6a,#2f5238);border-color:#8fc79c;margin-top:-4px;font-size:16px}#huntBtn small{letter-spacing:.04em;text-transform:none;font-size:12px;display:block}.accountLine{color:var(--ash);justify-content:space-between;align-items:center;margin-bottom:4px;font-size:15px;display:flex}.accountLine b{color:var(--bone)}.linkBtn{color:var(--ash);cursor:pointer;background:0 0;border:none;font:600 14px Cormorant Garamond,serif;text-decoration:underline}.linkBtn:hover{color:var(--bone)}.accountBar{color:var(--ash);border-bottom:1px solid var(--gold-dim);padding:6px 14px 8px;font-size:14px}.accountBar b{color:var(--bone)}.xpBar{background:#0000008c;border:1px solid #b8975a59;height:6px;margin:4px 0 3px}.xpBar div{background:linear-gradient(90deg,#9c7a3c,#e6c88a);height:100%}.heroIcon{position:relative}.heroLvl{text-align:center;color:#1a1408;background:var(--gold);border:1px solid #000;min-width:17px;height:17px;padding:0 3px;font-size:11px;line-height:15px;position:absolute;bottom:-6px;right:-6px}.hero.sealed{opacity:.4;cursor:default}.hero.sealed .heroIcon{background:0 0;font-size:14px}.swatch.locked{opacity:.35;cursor:not-allowed;position:relative}.swatch.locked:after{content:"🔒";place-items:center;font-size:10px;display:grid;position:absolute;inset:0}.titleSelect{width:100%;color:var(--bone);background:#00000073;border:1px solid #938f9159;padding:6px 8px;font:600 16px Cormorant Garamond,serif}.levelRow{grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 8px;font-size:15px;display:grid}.levelRow b{color:var(--bone)}.rewardGrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;display:grid}.reward{opacity:.55;border:1px solid #938f9138;grid-template-columns:20px 1fr;column-gap:6px;padding:6px 8px;display:grid}.reward.got{opacity:1;border-color:var(--gold-dim)}.reward span{color:var(--gold);grid-row:span 2}.reward b{color:var(--bone);font-size:14px}.reward small{color:var(--ash);font-size:12px}.winFlash.bad{background:#ff6b7d}#toast{pointer-events:none;text-align:center;position:absolute;top:14%;left:50%;transform:translate(-50%)}.toastCard{border:1px solid var(--gold);color:var(--bone);background:linear-gradient(#14121af2,#0b0a10f2);margin-top:6px;padding:8px 18px;font-size:18px;font-weight:700;animation:.3s ease-out bannerIn}.toastCard small{color:var(--gold);font-size:14px;font-weight:600;display:block}.chatLine.combat .heal{color:#9cff9c;font-weight:700}
