:root{--bg-color:#0f172a;--container-bg:#1e293b;--text-color:#f8fafc;--hp-bar-bg:#334155;--hp-bar-fill:#ef4444;--tile-fire:#ef4444;--tile-earth:#a855f7;--tile-water:#10b981;--tile-air:#e2e8f0;--tile-fire-glow:#ef444480;--tile-earth-glow:#a855f780;--tile-water-glow:#10b98180;--tile-air-glow:#e2e8f080;--tile-earth-gray:#9ca3af}*{box-sizing:border-box;touch-action:none;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);justify-content:center;align-items:center;height:100dvh;margin:0;font-family:Inter,sans-serif;display:flex;overflow:hidden}#game-container{background-color:var(--container-bg);flex-direction:column;width:100%;max-width:min(600px,56.25dvh);height:100dvh;display:flex;position:relative;overflow:hidden;box-shadow:0 0 20px #00000080}.new-game-btn{z-index:50;color:var(--text-color);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e293bbf;border:1px solid #f8fafc26;border-radius:50%;outline:none;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:12px;right:12px}.new-game-btn:hover{color:#f87171;background:#ef444433;border-color:#ef444480;transform:scale(1.08)rotate(15deg);box-shadow:0 0 8px #ef444466}.new-game-btn:active{transform:scale(.92)rotate(-5deg)}#battlefield-panel{background-image:url(/magic_academy.png);background-position:50%;background-size:cover;border-bottom:2px solid #334155;flex-direction:column;flex:1 1 0;justify-content:space-between;min-height:0;padding:2cqh 2cqw;display:flex;position:relative;container-type:size}#enemies-container,#allies-container{flex-direction:row;justify-content:space-evenly;align-items:center;width:100%;display:flex}#allies-container{margin-top:5cqh}.combatant-card{z-index:2;flex-direction:column;align-items:center;width:min(27.5cqw,43.75cqh);display:flex;position:relative}.combatant-name{text-shadow:0 0 5px #000,1px 1px 2px #000;text-align:center;margin-bottom:1cqh;font-family:Cinzel,serif;font-size:min(3.5cqw,4.5cqh);line-height:1.1}.combatant-avatar-wrapper{aspect-ratio:1;flex-shrink:0;justify-content:center;align-items:center;width:80%;margin-bottom:0;display:flex;position:relative}.combatant-avatar-container{aspect-ratio:1;background-color:#0f172a;border:max(1px,.5cqmin) solid #334155;border-radius:50%;justify-content:center;align-items:center;width:100%;height:auto;transition:transform .1s ease-in-out;display:flex;overflow:hidden;box-shadow:0 0 15px #000c}.avatar-shield-container{z-index:5;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.avatar-shield-svg{width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.avatar-shield-badge{z-index:10;pointer-events:none;justify-content:center;align-items:center;width:24px;height:28px;display:flex;position:absolute;top:-3%;left:50%;transform:translate(-50%,-50%)}.shield-badge-svg{filter:drop-shadow(0 0 6px #a855f7cc);width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.shield-badge-text{z-index:2;color:#c084fc;text-shadow:0 0 4px #a855f780;margin-top:-3px;font-size:.65rem;font-weight:800;position:relative}.avatar-shield-arc{filter:drop-shadow(0 0 4px #a855f7);animation:2s ease-in-out infinite shieldPulse}@keyframes shieldPulse{0%,to{opacity:.9;filter:drop-shadow(0 0 2px #a855f7)}50%{opacity:1;filter:drop-shadow(0 0 6px #c084fc)}}.combatant-avatar-container.hit{border-color:#ef4444;transform:scale(.9)rotate(-5deg)}.combatant-avatar-placeholder{color:#64748b;font-size:min(6cqw,8cqh)}.combatant-avatar{object-fit:cover;width:100%;height:100%}.combatant-hp-bar-container{background-color:var(--hp-bar-bg);z-index:2;border-radius:min(2.25cqw,3cqh);width:80%;height:min(4.5cqw,6cqh);margin-top:calc(-1*min(2.25cqw,3cqh));position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #000c,0 2px 4px #000c}.combatant-hp-bar-fill{background:linear-gradient(90deg,#dc2626 0%,#ef4444 100%);width:100%;height:100%;transition:width .3s cubic-bezier(.4,0,.2,1)}.combatant-hp-text{text-shadow:1px 1px 2px #000;white-space:nowrap;font-size:min(3.75cqw,5.25cqh);font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.player-hp-bar-fill{background:linear-gradient(90deg,#16a34a 0%,#22c55e 100%)}.combatant-avatar-container.shielded{box-shadow:0 0 15px #fbbf24cc;border-color:#fbbf24!important}.hit-player{animation:.15s ease-in-out shake;border-color:#ef4444!important}.combatant-statuses{justify-content:center;gap:4px;min-height:0;margin-top:4px;display:flex}.status-badge{white-space:nowrap;border-radius:8px;align-items:center;gap:2px;padding:2px 6px;font-size:.6rem;font-weight:600;display:inline-flex}.crystallize-badge{color:#c084fc;text-shadow:0 0 6px #a855f7cc;background-color:#a855f74d;border:1px solid #a855f780}.charge-badge{color:#60a5fa;text-shadow:0 0 6px #3b82f6cc;background-color:#3b82f64d;border:1px solid #3b82f680}.shield-badge{color:#c084fc;text-shadow:0 0 6px #a855f7cc;background-color:#a855f74d;border:1px solid #a855f780}.avatar-charge-badge{color:#93c5fd;z-index:10;white-space:nowrap;pointer-events:auto;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);border:min(2px,.5cqmin) solid #3b82f6;border-radius:12px;justify-content:center;align-items:center;gap:4px;padding:2px 8px;font-size:min(3cqw,3.5cqh);font-weight:800;animation:2s ease-in-out infinite chargePulse;display:flex;position:absolute;bottom:15%;left:50%;transform:translate(-50%);box-shadow:0 0 10px #3b82f6cc}.avatar-charge-symbol{color:#60a5fa;text-shadow:0 0 4px #3b82f6}.avatar-charge-value{color:#f8fafc;text-shadow:0 0 4px #3b82f6cc}@keyframes chargePulse{0%,to{border-color:#3b82f6;transform:translate(-50%)scale(1);box-shadow:0 0 8px #3b82f699}50%{border-color:#60a5fa;transform:translate(-50%,-1px)scale(1.05);box-shadow:0 0 16px #60a5fae6}}.combatant-actions-text{color:#f59e0b;text-shadow:0 0 4px #f59e0b66,1px 1px 2px #000;text-align:center;white-space:nowrap;margin-top:.75cqh;font-size:min(3.5cqw,4.5cqh);font-weight:700}.multicast-badge{color:#22d3ee;text-shadow:0 0 6px #06b6d4cc;background-color:#06b6d44d;border:1px solid #06b6d480}#grid-area{aspect-ratio:1;box-sizing:border-box;flex:none;justify-content:center;align-items:center;width:100%;padding:10px;display:flex;position:relative}#trace-svg{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}#grid{grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(6,1fr);gap:6px;width:100%;height:100%;transition:opacity .35s ease-in-out;display:grid}#grid.blocked{opacity:.55;pointer-events:none}.cell{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;transition:transform .1s,box-shadow .2s,background .2s;display:flex;position:relative}.cell[data-type="0"]{background:radial-gradient(circle,#ef444466 0%,#ef44441a 100%);border:1px solid #ef444433;box-shadow:inset 0 0 15px #ef444433}.cell[data-type="1"]{background:radial-gradient(circle,#9ca3af66 0%,#9ca3af1a 100%);border:1px solid #9ca3af33;box-shadow:inset 0 0 15px #9ca3af33}.cell[data-type="2"]{background:radial-gradient(circle,#22c55e66 0%,#22c55e1a 100%);border:1px solid #22c55e33;box-shadow:inset 0 0 15px #22c55e33}.cell[data-type="3"]{background:radial-gradient(circle,#3b82f666 0%,#3b82f61a 100%);border:1px solid #3b82f633;box-shadow:inset 0 0 15px #3b82f633}.cell:after{content:"";background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;width:80%;height:80%;transition:transform .2s,box-shadow .2s,opacity .2s;position:absolute;box-shadow:0 0 10px #fff3}.flying-symbol{z-index:1000;pointer-events:none;border-radius:12px;transition:top .5s ease-in,left .5s ease-in,transform .5s ease-in,opacity .5s ease-in;position:fixed}.flying-symbol:after{content:"";background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;width:80%;height:80%;position:absolute;top:10%;left:10%;box-shadow:0 0 10px #fff3}.flying-symbol[data-type="0"]:after{box-shadow:0 0 20px var(--tile-fire);background-image:url(/tile_fire.png)}.flying-symbol[data-type="1"]:after{box-shadow:0 0 20px var(--tile-earth-gray);background-image:url(/tile_earth.png)}.flying-symbol[data-type="2"]:after{box-shadow:0 0 20px var(--tile-water);background-image:url(/tile_water.png)}.flying-symbol[data-type="3"]:after{box-shadow:0 0 20px var(--tile-air);background-image:url(/tile_air.png)}.magic-wave{pointer-events:none;z-index:50;mix-blend-mode:screen;clip-path:polygon(0 0,100% 0,100% 50%,0 50%);opacity:.9;border:12px solid;border-radius:50%;transition:transform .6s linear,opacity .3s ease-out;position:absolute;transform:translate(-50%,-50%)scale(0);box-shadow:0 0 30px,inset 0 0 30px;-webkit-mask-image:linear-gradient(#000 35%,#0000 50%);mask-image:linear-gradient(#000 35%,#0000 50%)}.magic-wave[data-type="0"]{color:var(--tile-fire)}.magic-wave[data-type="1"]{color:var(--tile-earth)}.magic-wave[data-type="2"]{color:var(--tile-water)}.magic-wave[data-type="3"]{color:var(--tile-air)}.cell[data-type="0"]:after{box-shadow:0 0 20px var(--tile-fire);background-image:url(/tile_fire.png)}.cell[data-type="1"]:after{box-shadow:0 0 20px var(--tile-earth-gray);background-image:url(/tile_earth.png)}.cell[data-type="2"]:after{box-shadow:0 0 20px var(--tile-water);background-image:url(/tile_water.png)}.cell[data-type="3"]:after{box-shadow:0 0 20px var(--tile-air);background-image:url(/tile_air.png)}.cell.traced{transform:scale(.9)}.cell.traced[data-type="0"]{border:2px solid var(--tile-fire);box-shadow:0 0 15px var(--tile-fire), inset 0 0 25px var(--tile-fire)}.cell.traced[data-type="1"]{border:2px solid var(--tile-earth-gray);box-shadow:0 0 15px var(--tile-earth-gray), inset 0 0 25px var(--tile-earth-gray)}.cell.traced[data-type="2"]{border:2px solid var(--tile-water);box-shadow:0 0 15px var(--tile-water), inset 0 0 25px var(--tile-water)}.cell.traced[data-type="3"]{border:2px solid var(--tile-air);box-shadow:0 0 15px var(--tile-air), inset 0 0 25px var(--tile-air)}#spell-cards-area{background-color:var(--container-bg);scrollbar-width:thin;scrollbar-color:#334155 transparent;touch-action:pan-x;cursor:grab;flex:0 0 clamp(50px,15dvh,100px);gap:10px;height:clamp(50px,15dvh,100px);padding:0 10px 6px;display:flex;overflow-x:auto}#spell-cards-area:active{cursor:grabbing}#spell-cards-area.is-dragging .spell-card{pointer-events:none}#spell-cards-area *{touch-action:pan-x}#spell-cards-area::-webkit-scrollbar{height:6px}#spell-cards-area::-webkit-scrollbar-track{background:0 0}#spell-cards-area::-webkit-scrollbar-thumb{background-color:#334155;border-radius:3px}.spell-card{height:100%;box-shadow:none;cursor:pointer;touch-action:pan-x;background-color:#0000;border:none;flex-direction:column;flex:0 0 calc(14.2857% - 8.57143px);justify-content:flex-start;align-items:center;gap:4px;padding:0;display:flex}.spell-card.empty{box-shadow:none;background-color:#0000;border:none}.spell-card-svg{max-width:100%;height:auto;max-height:50px;margin:auto 0;display:block}.spell-name{color:#94a3b8;text-align:center;padding-bottom:.125rem;font-size:.65rem;font-weight:600}.spell-detail-overlay{z-index:100;-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;background:#0f172af2;border:2px solid #334155;border-radius:16px;flex-direction:column;justify-content:space-between;align-items:center;padding:16px;transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:10px;left:10px;right:10px;transform:scale(.95);box-shadow:0 10px 30px #000000b3}@media (hover:hover){.spell-card:hover .spell-detail-overlay{opacity:1;transition-duration:0s;transform:scale(1)}}.spell-card.is-active .spell-detail-overlay,.spell-card:active .spell-detail-overlay{opacity:1;transition-duration:0s;transform:scale(1)}.overlay-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;width:100%;padding-bottom:8px;display:flex}.overlay-spell-name{color:var(--text-color);text-shadow:0 0 10px #fff3;font-family:Cinzel,serif;font-size:1.6rem;font-weight:700}.overlay-spell-type{text-transform:uppercase;letter-spacing:.05em;border-radius:12px;padding:4px 10px;font-size:.75rem;font-weight:700}.type-elements{color:#f87171;background-color:#ef444433;border:1px solid #ef444466}.type-matter{color:#c084fc;background-color:#a855f733;border:1px solid #a855f766}.type-life{color:#4ade80;background-color:#22c55e33;border:1px solid #22c55e66}.type-spirit{color:#60a5fa;background-color:#3b82f633;border:1px solid #3b82f666}.overlay-body{text-align:center;flex-direction:column;gap:12px;width:100%;margin:10px 0;display:flex}.overlay-description{color:#94a3b8;font-size:.9rem;font-style:italic;line-height:1.4}.overlay-effect-container{background:#ffffff08;border:1px solid #ffffff0d;border-radius:8px;padding:10px}.effect-label{color:#64748b;letter-spacing:.05em;margin-bottom:4px;font-size:.7rem;font-weight:700;display:block}.overlay-effect{color:#f1f5f9;font-size:.95rem;font-weight:600;line-height:1.4}.overlay-previews{flex-flow:row;justify-content:center;align-items:flex-start;gap:8px;width:100%;margin:10px 0;display:flex;overflow:hidden}.preview-box{flex-direction:column;flex:1 1 0;align-items:center;gap:4px;min-width:0;display:flex}.preview-svg{aspect-ratio:1;background-color:#0003;border:1px solid #ffffff14;border-radius:8px;width:100%;max-width:90px;height:auto;padding:6px;box-shadow:inset 0 0 10px #00000080}.preview-label{color:#64748b;text-transform:uppercase;letter-spacing:.03em;text-align:center;white-space:nowrap;font-size:.6rem;font-weight:600}.spell-card-previews{flex-direction:row;flex:1 1 0;justify-content:center;align-items:center;gap:4px;width:100%;min-height:0;display:flex}.spell-card-previews .spell-card-svg{flex:1 1 0;min-width:0;max-width:100%;height:auto;max-height:100%}.spell-card.multi-variant{padding-left:2px;padding-right:2px}.spell-card.multi-variant .spell-card-previews{gap:2px}.type-omni{color:#fbbf24;text-shadow:0 0 10px #fbbf2480;background-color:#fbbf2433;border:1px solid #fbbf2466}.overlay-previews.wrap-previews{flex-wrap:wrap;overflow:visible}.overlay-previews.wrap-previews .preview-box{flex:0 0 calc(12.5% - 7px);min-width:30px}@keyframes spawn{0%{opacity:0;transform:scale(0)}80%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.cell.spawn:after{animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards spawn}@keyframes destroy{0%{opacity:1;filter:brightness();transform:scale(1)}50%{opacity:.8;filter:brightness(2);transform:scale(1.5)}to{opacity:0;filter:brightness(0);transform:scale(0)}}.cell.destroying:after{animation:.3s ease-out forwards destroy}@keyframes floatingText{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-50px)}}.damage-text{color:#ef4444;text-shadow:0 0 10px #000c,2px 2px #000;pointer-events:none;z-index:20;font-size:2rem;font-weight:800;animation:1s ease-out forwards floatingText;position:absolute}.spell-text{color:#fbbf24;text-shadow:0 0 15px #fbbf24cc,2px 2px #000;pointer-events:none;z-index:30;white-space:nowrap;font-size:2.5rem;font-weight:800;animation:1.5s ease-out forwards floatingText;position:absolute}.heal-text{color:#4ade80;text-shadow:0 0 10px #4ade80cc,2px 2px #000;pointer-events:none;z-index:20;font-size:2rem;font-weight:800;animation:1s ease-out forwards floatingText;position:absolute}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}to{transform:translate(0)}}.screen-shake{animation:.3s cubic-bezier(.36,.07,.19,.97) both screenShakeAnim}@keyframes screenShakeAnim{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-5px)}40%,60%{transform:translate(5px)}}.sorcerer-cast{animation:.3s ease-in-out sorcererCastAnim}@keyframes sorcererCastAnim{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.2)drop-shadow(0 0 12px #22c55e);transform:scale(1.08)rotate(3deg)}}.player-cast{animation:.3s ease-in-out playerCastAnim}@keyframes playerCastAnim{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.2)drop-shadow(0 0 12px #f97316);transform:scale(1.08)rotate(-3deg)}}.fireball-projectile{z-index:15;pointer-events:none;background:radial-gradient(circle,#fef08a 0%,#f97316 50%,#dc2626 100%);border-radius:50%;width:24px;height:24px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 20px #f97316,0 0 40px #ef4444}.fireball-projectile:after{content:"";filter:blur(4px);background:linear-gradient(#0000,#ef4444cc);width:100%;height:200%;position:absolute;top:50%;left:50%;transform:translate(-50%)}.fireball-shockwave{z-index:14;pointer-events:none;background:linear-gradient(90deg,#dc262600 0%,#b91c1c 10%,#ef4444 25%,#f97316 45%,#f59e0b 50%,#f97316 55%,#ef4444 75%,#b91c1c 90%,#dc262600 100%);border-radius:100%;width:0;height:12px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 15px #dc2626,0 0 30px #f97316,0 0 50px #ef4444,inset 0 0 10px #f59e0b}.blast-wave-container{pointer-events:none;z-index:1000;opacity:1;mix-blend-mode:screen;width:120px;height:120px;position:absolute;transform:translate(-50%,-50%)scale(0)}.blast-wave-arc-svg{width:100%;height:100%;overflow:visible}.blast-wave-plasma-glow{stroke:none;mix-blend-mode:color-dodge;filter:drop-shadow(0 0 12px #ef444480)}.blast-wave-plasma-main{mix-blend-mode:normal}.blast-wave-plasma-core{mix-blend-mode:screen;filter:drop-shadow(0 0 4px #fff)drop-shadow(0 0 10px #fef08acc)}.shatter-shard{pointer-events:none;z-index:1001;background:#c084fc;border-radius:1px;transition:left .18s cubic-bezier(.25,1,.5,1),top .18s cubic-bezier(.25,1,.5,1),transform .18s cubic-bezier(.25,1,.5,1),opacity .18s ease-out;position:absolute;transform:translate(-50%,-50%)rotate(0);box-shadow:0 0 10px #a855f7f2,0 0 4px #c084fccc}.beam-beam-svg{pointer-events:none;z-index:1;mix-blend-mode:screen;width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.beam-impact-svg{pointer-events:none;z-index:1001;mix-blend-mode:screen;position:absolute;overflow:visible}.fling-shield-projectile{pointer-events:none;z-index:1002;transform-origin:50%;filter:drop-shadow(0 0 12px #a855f7f2);position:absolute;transform:rotate(0)scale(1)}.fling-shield-svg{width:100%;height:100%;overflow:visible}