/* v100 (Driz): Spark Tap redesign. Storm core, molten heat gauge, lightning-charge meter, heat-staged background.
   Only applies to arenas sparktap2.js marked .st2 (dh-st2=off keeps the old look). */
/* old decorations off: the canvas draws all of this now (the round still creates them, hidden = no layout or paint) */
.sarena.st2 .sbg,.sarena.st2 .srings,.sarena.st2>.sp,.sarena.st2>.sring,.sarena.st2>.szap,.sarena.st2 .smobs .sp,.sarena.st2 .smobs .sboom{display:none}
.sarena.st2[data-heat]{animation:none;background:#070101}
/* background: dark red -> molten orange -> white-hot -> violet storm (opacity per layer set from the heat) */
.st2bg{position:absolute;inset:-6%;pointer-events:none}
.st2bg i{position:absolute;inset:0;opacity:0;will-change:opacity}
.st2bg .b0{opacity:1;background:radial-gradient(ellipse 75% 60% at 50% 54%,#4a0d06 0,#240504 45%,#0b0202 75%,#030000)}
.st2bg .b1{background:radial-gradient(ellipse 80% 62% at 50% 54%,#ff7a1f 0,#b3260b 26%,#4d0905 55%,#120202 85%)}
.st2bg .b2{background:radial-gradient(ellipse 85% 65% at 50% 54%,#fffdf2 0,#ffe39a 14%,#ff8a2a 32%,#b3200a 56%,#2a0503 88%)}
.st2bg .b3{background:radial-gradient(ellipse 85% 62% at 50% 54%,#fbf5ff 0,#d8b4fe 9%,#9333ea 24%,#4c1d95 44%,#1a0538 70%,#07010f 92%)}
.sarena.st2[data-st="3"] .st2bg,.sarena.st2[data-st="4"] .st2bg{animation:st2haze .9s ease-in-out infinite alternate}
.sarena.st2[data-st="5"] .st2bg{animation:st2haze .45s ease-in-out infinite alternate}
@keyframes st2haze{from{transform:scale(1.01,1) skewX(-.5deg)}to{transform:scale(1.035,1.015) skewX(.6deg)}}
.st2cv{position:absolute;left:0;top:0;z-index:1;pointer-events:none}
.sarena.st2 .smobs{z-index:2}
.sarena.st2 .st2bg,.sarena.st2 .st2cv,.sarena.st2 .smobs,.sarena.st2 .sorb{translate:var(--sx,0) var(--sy,0)}
/* ---------- the storm core ---------- */
.sarena.st2 .sorb{width:184px;height:184px;margin:-92px 0 0 -92px;border:0;padding:0;background:radial-gradient(circle,rgba(255,110,30,.35) 0,rgba(255,60,10,0) 66%);font-size:0;color:transparent;
  box-shadow:0 0 34px 4px rgba(255,80,20,.38),0 0 90px 24px rgba(160,20,8,.3);transition:box-shadow .35s}
.sarena.st2 .sorb .c2{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:c2spin 16s linear infinite;will-change:transform}
.sarena.st2 .sorb .c2hot,.sparkorb.st2mini .c2hot{position:absolute;inset:31%;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff3c4 34%,rgba(255,170,60,.55) 62%,rgba(255,120,30,0) 74%);animation:c2pulse .8s ease-in-out infinite alternate;pointer-events:none}
@keyframes c2spin{to{transform:rotate(360deg)}}@keyframes c2pulse{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.12)}}
.c2 .c2straps{stroke:#120b09;stroke-width:7}
.c2 .c2crk{fill:none;stroke:#ffe9a8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c2 .c2crk.g{stroke:#ff6a12;stroke-width:5.5;opacity:.6}
.c2 .c2rune{fill:none;stroke:#ff8a3d;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.c2 .c2riv{fill:#6d5a4e;stroke:#140d0b;stroke-width:1}
.sarena.st2[data-st="1"] .sorb .c2{animation-duration:11s}
.sarena.st2[data-st="2"] .sorb{box-shadow:0 0 40px 8px rgba(255,120,30,.5),0 0 110px 30px rgba(220,50,10,.35)}.sarena.st2[data-st="2"] .sorb .c2{animation-duration:7s}
.sarena.st2[data-st="3"] .sorb{box-shadow:0 0 46px 10px rgba(255,190,60,.6),0 0 130px 36px rgba(255,90,20,.4)}.sarena.st2[data-st="3"] .sorb .c2{animation-duration:4s}
.sarena.st2[data-st="3"] .c2 .c2rune,.sarena.st2[data-st="4"] .c2 .c2rune{stroke:#ffe27a}
.sarena.st2[data-st="4"] .sorb{box-shadow:0 0 56px 14px rgba(255,240,200,.7),0 0 150px 44px rgba(255,110,30,.5)}.sarena.st2[data-st="4"] .sorb .c2{animation-duration:2.4s}
.sarena.st2[data-st="4"] .sorb .c2hot{animation-duration:.3s}
.sarena.st2[data-st="5"] .sorb{box-shadow:0 0 60px 16px rgba(230,200,255,.75),0 0 170px 50px rgba(150,60,255,.55)}.sarena.st2[data-st="5"] .sorb .c2{animation-duration:1.2s}
.sarena.st2[data-st="5"] .c2 .c2rune{stroke:#e9d5ff}.sarena.st2[data-st="5"] .c2 .c2crk{stroke:#f5ecff}.sarena.st2[data-st="5"] .c2 .c2crk.g{stroke:#a855f7}
.sarena.st2[data-st="5"] .sorb .c2hot{animation-duration:.2s;background:radial-gradient(circle,#fff 0,#f3e8ff 34%,rgba(192,132,252,.6) 62%,rgba(150,60,255,0) 74%)}
.sarena.st2 .sorb.bump{animation:c2bump .14s ease-out}@keyframes c2bump{40%{transform:scale(.93)}}
.sarena.st2.done .sorb .c2,.sarena.st2.done .sorb .c2hot{animation-play-state:paused}
/* ---------- monsters: zapped (white-blue flash) or burned up (charred, orange) ---------- */
.sarena.st2 .smob.zapd{filter:brightness(2.6) saturate(0) drop-shadow(0 0 10px #8be9ff);opacity:0;transition:opacity .32s,filter .1s}
.sarena.st2 .smob.burnd{filter:sepia(1) saturate(5) hue-rotate(-25deg) brightness(.55);opacity:0;transition:opacity .38s,filter .12s}
/* ---------- molten heat gauge ---------- */
.sarena.st2 .sheat{height:26px;border-radius:7px;background:linear-gradient(#1d110c,#0d0705);border:2px solid #4a3227;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 1px #0a0504,0 2px 8px rgba(0,0,0,.6);overflow:hidden}
.sarena.st2 .sheat::before,.sarena.st2 .sheat::after{content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#7a6455;box-shadow:inset 0 -1px 1px #1a0f0b;z-index:2}
.sarena.st2 .sheat::before{left:5px}.sarena.st2 .sheat::after{right:5px}
.sarena.st2 .sheat u{position:relative;overflow:hidden;background:none;box-shadow:0 0 14px rgba(255,110,30,.7)}
.sarena.st2 .sheat u::before{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--gw,360px);background:linear-gradient(90deg,#4a0802,#b3200a 18%,#ff5a14 38%,#ff9a2e 58%,#ffd45c 76%,#fff6d8 88%,#d8b4fe 100%)}
.sarena.st2 .sheat u::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 9px,rgba(255,236,180,.28) 9px 12px,rgba(120,10,0,.25) 12px 16px);background-size:32px 100%;animation:st2lava .7s linear infinite}
@keyframes st2lava{to{background-position:32px 0}}
.sarena.st2 .sheat #shl{display:none}
.sarena.st2 .sheat .st2tk{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;background:rgba(0,0,0,.55);box-shadow:1px 0 0 rgba(255,200,150,.12);z-index:1}
.sarena.st2 .st2lab{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;font:900 .82rem/1 Georgia,serif;letter-spacing:.2em;color:#fff3dc;text-shadow:0 0 4px #000,0 0 10px #ff5a14}
.sarena.st2 .sheat[data-h="3"],.sarena.st2 .sheat[data-h="4"]{border-color:#a8501c;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 16px rgba(255,120,30,.6)}
.sarena.st2 .sheat[data-h="4"] .st2lab{color:#fff;text-shadow:0 0 4px #5a0a00,0 0 14px #ffd45c}
.sarena.st2 .sheat[data-h="5"]{border-color:#9b6bff;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 20px rgba(168,85,247,.85)}
.sarena.st2 .sheat[data-h="5"] .st2lab{color:#fff;text-shadow:0 0 4px #2e0a5c,0 0 14px #c084fc;animation:st2flick .18s steps(2) infinite}
@keyframes st2flick{50%{opacity:.75}}
/* ---------- lightning-charge meter (the round timer, draining as the storm is spent) ---------- */
.sarena.st2 .stime.st2bolt{height:14px;border-radius:4px;background:linear-gradient(#0c0a20,#05040f);border:2px solid #2e2758;box-shadow:inset 0 1px 4px rgba(0,0,0,.8),0 0 10px rgba(96,165,250,.25);overflow:hidden}
.sarena.st2 .stime.st2bolt u{position:relative;overflow:hidden;background:linear-gradient(90deg,#3b0a8a,#7c3aed 35%,#60a5fa 72%,#e0f2fe);box-shadow:0 0 10px #8be9ff}
.sarena.st2 .stime.st2bolt u::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 40%,rgba(255,255,255,.85) 44%,transparent 48%),repeating-linear-gradient(62deg,transparent 0 6px,rgba(255,255,255,.35) 6px 7px,transparent 7px 12px);background-size:60px 100%,18px 100%;animation:st2zap .5s linear infinite}
@keyframes st2zap{to{background-position:60px 0,18px 0}}
.sarena.st2 .sstat b{color:#fff4e0;text-shadow:0 0 6px #000,0 0 14px rgba(255,110,30,.9)}.sarena.st2 .sstat.r b{text-shadow:0 0 6px #000,0 0 14px rgba(120,180,255,.95)}
.sarena.st2 .scount{color:#fff4dc;text-shadow:0 0 18px #ff6a12,0 0 40px #b3200a}
.sarena.st2 .sresult{background:linear-gradient(rgba(28,10,6,.96),rgba(12,4,3,.96));border-color:#ff7a1f;box-shadow:0 0 40px rgba(255,90,20,.4),inset 0 0 30px rgba(255,90,20,.12)}
.sarena.st2 .sresult .sbig{color:#ffd45c;text-shadow:0 0 18px rgba(255,110,30,.8)}
/* ---------- the little core on the Spark Tap menu ---------- */
.sparkorb.st2mini{position:relative;border:0;font-size:0;background:radial-gradient(circle,rgba(255,110,30,.4) 0,rgba(255,60,10,0) 68%);box-shadow:0 0 26px rgba(255,80,20,.5)}
.sparkorb.st2mini .c2{position:absolute;inset:0;width:100%;height:100%;animation:c2spin 14s linear infinite}
/* lighter: low power and reduced motion */
body.lowpower .sarena.st2 .st2bg,body.lowpower .sarena.st2 .sheat u::after,body.lowpower .sarena.st2 .stime.st2bolt u::after,body.lowpower .sarena.st2 .sheat .st2lab{animation:none}
body.lowpower .sarena.st2 .sorb .c2hot{animation-duration:1.2s}
@media (prefers-reduced-motion:reduce){.sarena.st2 .st2bg,.sarena.st2 .sorb .c2,.sarena.st2 .sorb .c2hot,.sparkorb.st2mini .c2,.sarena.st2 .sheat u::after,.sarena.st2 .stime.st2bolt u::after{animation:none}}