:root{--cc-slate:#1b1d22;--cc-slate-2:#2a2d34;--cc-gold:#d9b45a;--cc-gold-bright:#ffd97a;--cc-parchment:#e9d9b4;--cc-ink:#3a2a18;--cc-red:#a3161f;--cc-red-bright:#d2202f;--cc-led:#53f2e4}html,body{height:100%;color:var(--cc-parchment);background:#000;margin:0;overflow:hidden}#app{position:fixed;inset:0}@font-face{font-family:Cinzel;font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/cinzel-latin-wght.woff2)format("woff2")}@font-face{font-family:Cinzel Decorative;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cinzel-decorative-latin-400.woff2)format("woff2")}@font-face{font-family:Cinzel Decorative;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cinzel-decorative-latin-700.woff2)format("woff2")}@font-face{font-family:Cinzel Decorative;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/cinzel-decorative-latin-900.woff2)format("woff2")}@font-face{font-family:Alegreya;font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/alegreya-latin-wght.woff2)format("woff2")}@font-face{font-family:Alegreya;font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/alegreya-latin-wght-italic.woff2)format("woff2")}:root{--font-display:"Cinzel", "Trajan Pro", "Cormorant SC", Georgia, serif;--font-deco:"Cinzel Decorative", "Cinzel", Georgia, serif;--font-body:"Alegreya", "EB Garamond", Georgia, "Times New Roman", serif;--gold-grad:linear-gradient(180deg, #fff1b8 0%, #e8c46a 38%, #b88a2e 62%, #f3d58a 100%);--frame-shadow:0 10px 40px #000000a6, inset 0 0 0 1px #ffdc8c14;--hp:#2fbf4a;--hp-dark:#13561f;--rage:#c5221f;--mana:#2b6de0;--cast:#f0b429;--text-shadow:0 1px 0 #000, 0 0 6px #000000e6}.cc-canvas{display:block;position:absolute;inset:0}.cc-layer{pointer-events:none;position:absolute;inset:0}.cc-layer>*{pointer-events:auto}.cc-layer .cc-passive,.cc-passive{pointer-events:none}body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}.cc-title{font-family:var(--font-display);letter-spacing:.06em;background:var(--gold-grad);color:#0000;filter:drop-shadow(0 2px #2a1a05)drop-shadow(0 0 10px #000c);text-transform:uppercase;-webkit-background-clip:text;background-clip:text;font-weight:700}.cc-gold{color:var(--cc-gold-bright);text-shadow:var(--text-shadow);font-family:var(--font-display)}.cc-ink{color:var(--cc-ink);font-family:var(--font-body)}.cc-small{opacity:.85;font-size:13px}.cc-panel{color:var(--cc-parchment);box-shadow:var(--frame-shadow);background:linear-gradient(#2b2e35 0%,#17191d 100%) padding-box padding-box;border:30px solid #6b4a14;border-image:url(../art/ui/frame-stone.webp) 72 fill/30px;padding:10px;position:relative}.cc-panel:before,.cc-panel:after{content:none;pointer-events:none;background:url(../art/ui/corner-claw.webp) 50%/contain no-repeat;width:46px;height:46px;position:absolute}.cc-panel:before{top:-36px;left:-36px}.cc-panel:after{bottom:-36px;right:-36px;transform:rotate(180deg)}.cc-parchment{color:var(--cc-ink);font-family:var(--font-body);background:url(../art/ui/parchment.webp) 50%/cover,radial-gradient(120% 120% at 50% 40%,#f3e6c4 0%,#e3cc98 55%,#c6a564 100%);border-radius:4px;padding:28px 30px;position:relative;box-shadow:0 12px 40px #0009,inset 0 0 60px #78501459}.cc-parchment h2,.cc-parchment h3{font-family:var(--font-display);color:#3b220b;letter-spacing:.05em;text-transform:uppercase;margin:0 0 6px}.cc-parchment .cc-tagline{color:#6b4a22;margin-bottom:10px;font-style:italic}.cc-divider{background:url(../art/ui/divider-gold.webp) 50%/contain no-repeat,linear-gradient(90deg,#0000,#a77a28 20%,#f3d58a 50%,#a77a28 80%,#0000) 50%/100% 2px no-repeat;height:14px;margin:12px 0}.cc-btn{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:#ffe9a8;text-shadow:0 1px #3a0505,0 0 8px #000000b3;filter:drop-shadow(0 5px 8px #0009);cursor:pointer;background:url(../art/ui/button-red.webp) 50%/100% 100% no-repeat,linear-gradient(#d02a2a 0%,#8f1111 55%,#5c0909 100%) 50%/calc(100% - 24px) calc(100% - 14px) no-repeat;border:none;border-radius:0;min-width:220px;padding:15px 46px;font-size:18px;font-weight:700;transition:transform 80ms,filter .15s}.cc-btn:hover{filter:drop-shadow(0 5px 8px #0009)drop-shadow(0 0 14px #ffbe5a73);background-image:url(../art/ui/button-red-hover.webp),linear-gradient(#e33a3a,#9f1818)}.cc-btn:active{background-image:url(../art/ui/button-red-pressed.webp),linear-gradient(#8f1111,#5c0909);transform:translateY(1px)}.cc-btn:disabled{filter:grayscale(.8)brightness(.6);cursor:default}.cc-btn.small{min-width:120px;padding:6px 18px;font-size:14px}.cc-btn.ghost{color:#f2d28a;background:linear-gradient(#2c2e36eb,#101114f5);border:2px solid #c9a24f;border-radius:4px;padding:11px 40px;box-shadow:inset 0 1px #ffdc962e,0 0 0 1px #2a1d06}.cc-btn.ghost:hover{background:linear-gradient(#463c28f2,#1c1812f5);border-color:#ffe08a}.cc-btn.ghost:active{background:linear-gradient(#141416f5,#28241ef2)}.cc-arrow{cursor:pointer;background:radial-gradient(circle at 40% 35%,#d73a2b,#7c0f0c 70%);border:2px solid #e2bd63;border-radius:50%;width:34px;height:34px;position:relative;box-shadow:0 2px #2a0505,0 4px 10px #0009}.cc-arrow:after{content:"";border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:11px solid #ffe08a;width:0;height:0;margin:auto;position:absolute;inset:0;transform:translate(2px)}.cc-arrow.left:after{transform:translate(-2px)rotate(180deg)}.cc-arrow:hover{filter:brightness(1.25)}.cc-portrait{cursor:pointer;filter:saturate(.75)brightness(.85);background:#111 50%/cover;border-radius:50%;width:84px;height:84px;transition:box-shadow .15s,transform .15s,filter .15s;position:relative;box-shadow:0 0 0 3px #6b4a14,0 0 0 6px #e2bd63,0 0 0 8px #3b2708,0 8px 18px #000000b3}.cc-portrait:hover{filter:none;transform:scale(1.04)}.cc-portrait.selected{filter:none;box-shadow:0 0 0 3px #6b4a14,0 0 0 6px #ffe08a,0 0 0 8px #3b2708,0 0 26px 6px #ffd26eb3}.cc-bar{background:linear-gradient(#0b0b0c,#1c1c1f);border:1px solid #000;height:16px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0f}.cc-bar>.fill{transform-origin:0;background:linear-gradient(180deg, color-mix(in srgb, var(--bar) 75%, white) 0%, var(--bar) 45%, color-mix(in srgb, var(--bar) 60%, black) 100%);transition:transform .18s ease-out;position:absolute;inset:0}.cc-bar>.lag{transform-origin:0;background:#fff0c88c;transition:transform .6s ease-in .25s;position:absolute;inset:0}.cc-bar>.label{font:600 11px/1 var(--font-body);color:#fff;text-shadow:var(--text-shadow);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.cc-bar.hp{--bar:var(--hp)}.cc-bar.rage{--bar:var(--rage)}.cc-bar.mana{--bar:var(--mana)}.cc-bar.cast{--bar:var(--cast);height:20px}.cc-tooltip{max-width:300px;font:14px/1.35 var(--font-body);color:#e8e2d0;pointer-events:none;z-index:1000;background:linear-gradient(#0e1222f5,#060810f5);border:1px solid #8a7440;border-radius:4px;padding:10px 12px;position:fixed;box-shadow:0 6px 18px #0009}.cc-tooltip .t-title{color:#fff;font-size:15px;font-weight:700}.cc-tooltip .t-meta{color:#c9b98e;margin:2px 0 6px;font-size:12px}.cc-tooltip .t-desc{color:#ffd100}.cc-fullbg{background:#000 50%/cover no-repeat;position:absolute;inset:0}.cc-fade{animation:.6s both cc-fade-in}@keyframes cc-fade-in{0%{opacity:0}to{opacity:1}}.cc-blackout{pointer-events:none;opacity:0;z-index:2000;background:#000;transition:opacity .6s;position:absolute;inset:0}.cc-blackout.on{opacity:1;pointer-events:auto}.cc-banner{text-align:center;pointer-events:none;animation:4.2s both cc-banner;position:absolute;top:18%;left:0;right:0}.cc-banner .big{font:700 54px/1.05 var(--font-display)}.cc-banner .sub{font:italic 22px var(--font-body);color:#f3e2b5;text-shadow:var(--text-shadow);margin-top:6px}@keyframes cc-banner{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}78%{opacity:1}to{opacity:0}}.cc-error{text-align:center;font:700 20px var(--font-display);color:#ff2a1f;text-shadow:var(--text-shadow);pointer-events:none;animation:1.6s both cc-fade-out;position:absolute;top:14%;left:0;right:0}@keyframes cc-fade-out{0%,60%{opacity:1}to{opacity:0}}.cc-float{font:800 26px var(--font-display);text-shadow:0 2px #000,0 0 6px #000;pointer-events:none;white-space:nowrap;will-change:transform, opacity;position:absolute}.cc-float.dmg{color:#fff}.cc-float.crit{color:#ffd23a;font-size:38px}.cc-float.heal{color:#47ff6a}.cc-float.taken{color:#ff3b30}.cc-float.xp{color:#c97bff;font-size:20px}.cc-float.info{color:#ffd100;font-size:18px}.cc-nameplate{text-align:center;pointer-events:none;white-space:nowrap;position:absolute;transform:translate(-50%,-100%)}.cc-nameplate .name{font:700 14px var(--font-body);text-shadow:var(--text-shadow)}.cc-nameplate .name.friendly{color:#63e36b}.cc-nameplate .name.hostile{color:#ff4a3d}.cc-nameplate .name.neutral{color:#ffd84a}.cc-nameplate .name.player{color:#7fd2ff}.cc-nameplate .title{font:italic 12px var(--font-body);color:#d7cfb7;text-shadow:var(--text-shadow)}.cc-nameplate .cc-bar{width:92px;height:8px;margin:2px auto 0}.cc-nameplate .quest{font:900 30px/1 var(--font-display);color:#ffd200;text-shadow:0 0 2px #000,0 2px #4a3300,0 0 12px #ffc800b3;animation:1.4s ease-in-out infinite cc-bob}.cc-nameplate.targeted .name{text-underline-offset:3px;text-decoration:underline}@keyframes cc-bob{50%{transform:translateY(-4px)}}.cc-scroll{scrollbar-width:thin;scrollbar-color:#8a6a2e transparent;overflow-y:auto}.account-dialog{color:#f5e6bf;box-sizing:border-box;pointer-events:auto;background:linear-gradient(145deg,#142a35,#10191f);border:1px solid #b99554;border-radius:18px;width:min(440px,100vw - 32px);max-height:calc(100dvh - 32px);padding:30px;font-family:inherit;overflow:auto;box-shadow:0 24px 90px #0009}.account-dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#031019cc}.account-dialog h2{color:#efcb7e;margin:0 32px 16px 0;font-size:25px}.account-dialog p{color:#c2d3d8;font-size:14px;line-height:1.65}.account-dialog form,.account-dialog label{gap:9px;display:grid}.account-dialog form{gap:17px}.account-dialog label span{color:#edd9aa;font-size:13px}.account-dialog input{box-sizing:border-box;color:#fff;width:100%;font:inherit;background:#0b1820;border:1px solid #5e737b;border-radius:7px;padding:12px}.account-dialog input:focus{outline-offset:2px;outline:2px solid #76dfcd}.account-dialog .cc-btn{width:100%;margin-top:10px;font-size:15px;display:block}.account-dialog .cc-btn:disabled{opacity:.55;cursor:wait}.account-dialog .account-status{color:#93e2cf;overflow-wrap:anywhere;min-height:24px}.account-dialog .account-name{color:#fff;font-size:22px}.account-close{color:#ead9b9;cursor:pointer;background:0 0;border:0;font-size:28px;position:absolute;top:13px;right:15px}.account-guest{color:#bfd0d4;cursor:pointer;font:inherit;background:0 0;border:0;margin:20px auto 0;font-size:13px;text-decoration:underline;display:block}.account-dialog button:focus-visible{outline-offset:3px;outline:2px solid #76dfcd}.launch-notice{box-sizing:border-box;color:#f6e8c3;text-align:center;width:min(480px,100vw - 36px);max-height:calc(100dvh - 36px);font-family:var(--font-body);-webkit-user-select:text;user-select:text;background:radial-gradient(at top,#293941,#111921 76%);border:1px solid #bfa264;border-radius:18px;padding:36px;overflow:auto;box-shadow:0 20px 80px #0009}.launch-notice::backdrop{background:radial-gradient(at 50% 35%,#243741,#080d15 80%)}.launch-notice-brand{color:#b5a173;font:600 10px var(--font-display);letter-spacing:.22em;margin:0 0 14px}.launch-notice h1{color:#ffe3a0;margin:0 0 26px;font-size:25px;line-height:1.5}.launch-notice-item{text-align:left;background:#ffffff05;border:1px solid #9e874047;border-radius:10px;align-items:center;gap:14px;margin:12px 0;padding:15px 17px;display:flex}.launch-notice-item>span{flex-shrink:0;font:26px/1 sans-serif}.launch-notice-item p{word-break:keep-all;margin:0;font-size:17px;line-height:1.6}.launch-notice-start{color:#fff0c2;cursor:pointer;width:100%;font:700 17px var(--font-body);background:linear-gradient(#715734,#46331e);border:1px solid #d7b56b;border-radius:8px;margin-top:20px;padding:13px 18px}.launch-notice-start:hover{filter:brightness(1.18)}.launch-notice-start:focus-visible{outline-offset:4px;outline:2px solid #ffe4a3}@media (max-width:520px){.launch-notice{padding:27px 22px}.launch-notice h1{font-size:22px}.launch-notice-item p{font-size:16px}}
