body { background: radial-gradient(circle at 70% 5%,#756aa3 0,transparent 28%),linear-gradient(160deg,#302a55,#17152e); }
.roundbar { border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.arena { border: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 76% 25%,rgba(121,185,237,.18),transparent 25%),radial-gradient(circle at 25% 72%,rgba(244,155,87,.15),transparent 27%),linear-gradient(155deg,#51477a,#26213f); box-shadow: 0 28px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.1); }
.beast { width: 210px; height: 148px; border: 0; border-radius: 0; background-color: transparent; background-image: url("assets/beast-atlas.png"); background-repeat: no-repeat; background-size: 200% auto; background-position-y: center; box-shadow: none; filter: drop-shadow(0 16px 14px rgba(6,4,24,.38)); }
.beast::before,.beast::after,.beast > * { display: none; }
.spark { background-position-x: 0; }.frost { background-position-x: 100%; }
.spell-fx { position: absolute; z-index: 8; left: 30%; bottom: 35%; width: 34px; height: 34px; border-radius: 50%; pointer-events: none; animation: spell-flight .4s cubic-bezier(.2,.75,.25,1) forwards; }
.spell-fx.bolt { background: #fff8a7; box-shadow: 0 0 9px #fff,0 0 24px #ffe04f; clip-path: polygon(47% 0,100% 0,66% 38%,95% 38%,24% 100%,41% 55%,9% 55%); }
.spell-fx.fire { background: radial-gradient(circle at 35% 35%,#fff6a3,#ff9a38 45%,#f04445 72%); box-shadow: 0 0 10px #ffcf57,0 0 28px #ff6d40; }
.spell-fx.heal { left: 25%; bottom: 30%; background: radial-gradient(circle,#dffff0,#65e39a 60%,transparent 64%); box-shadow: 0 0 24px #67e89e; animation: heal-rise .55s ease-out forwards; }
@keyframes spell-flight { to { left: 72%; bottom: 62%; transform: rotate(220deg) scale(1.45); opacity: .35; } }
@keyframes heal-rise { to { transform: translateY(-70px) scale(2); opacity: 0; } }
.console { border: 1px solid rgba(255,255,255,.8); background: linear-gradient(180deg,#fffdf7,#f2edf4); box-shadow: 0 22px 55px rgba(0,0,0,.24),inset 0 1px #fff; }
.skill { position: relative; overflow: hidden; min-height: 112px; padding: 11px; border: 1px solid rgba(52,43,89,.08); background: linear-gradient(155deg,#fff,#faf8ff); box-shadow: 0 8px 18px rgba(45,37,77,.08),inset 0 1px #fff; transition: transform .18s ease,box-shadow .18s ease; }.skill span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(112,87,220,.18); border-radius: 50%; background: radial-gradient(circle at 35% 28%,#fff,#ded8ff 48%,#8874ee 100%); box-shadow: inset 0 2px 2px rgba(255,255,255,.8),0 5px 11px rgba(91,70,186,.2); }.skill:nth-child(2) span { border-color: rgba(224,107,59,.22); background: radial-gradient(circle at 35% 28%,#fff7e7,#ffc48a 48%,#e86a3e 100%); box-shadow: inset 0 2px 2px rgba(255,255,255,.8),0 5px 11px rgba(206,84,39,.2); }.skill:nth-child(3) span { border-color: rgba(68,151,89,.2); background: radial-gradient(circle at 35% 28%,#f4fff5,#aee2b7 48%,#4eaa69 100%); box-shadow: inset 0 2px 2px rgba(255,255,255,.8),0 5px 11px rgba(58,140,80,.18); }.skill svg { width: 27px; height: 27px; stroke: #5e49c1; filter: drop-shadow(0 1px rgba(255,255,255,.7)); }.skill:nth-child(2) svg { stroke: #bf542e; }.skill:nth-child(3) svg { stroke: #347f4b; }.skill:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(45,37,77,.13),inset 0 1px #fff; }
.hp { box-shadow: inset 0 1px 3px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.1); }.hp i { background: linear-gradient(90deg,#4bc878,#8bed9e); }
@media(max-width:500px){.beast{width:155px;height:112px}.frost{margin-right:0}.spark{margin-left:0}}