/* Flames live outside the button face, keeping its label clear. */
.arcane-surge::before,.arcane-surge::after{inset:-23px -5px calc(100% - 5px)!important;z-index:-1!important;opacity:.85;filter:drop-shadow(0 -2px 5px #a942ee)!important}
.arcane-surge::after{inset:-15px 4px calc(100% - 4px)!important;opacity:.65}
.arcane-surge{color:#27223a!important;background:#fcd87c!important;box-shadow:0 7px #917b41,0 0 18px #a742d955!important;text-shadow:none!important}
@media(hover:hover) and (pointer:fine){[data-spell]{pointer-events:none!important;cursor:default!important}}
.claim-notice{position:relative!important;overflow:visible!important}
.claim-notice::after{content:attr(data-claim-count);position:absolute;right:-5px;top:-7px;min-width:23px;height:23px;padding:0 5px;border-radius:50%;display:grid;place-items:center;background:#f04464;color:white;border:2px solid #fff1ce;box-shadow:0 3px 0 #982847;font:bold 13px system-ui;z-index:5;pointer-events:none}

/* Independently changing flame tongues, anchored behind the button rim. */
.arcane-surge::before{animation:arcane-live-fire 1.15s linear infinite!important;transform-origin:50% 100%;background:linear-gradient(0deg,#7620c9 0%,#ad36ef 35%,#db81ff 72%,#fbe0ff 100%)}
.arcane-surge::after{animation:arcane-live-fire .83s linear infinite reverse!important;animation-delay:-.31s!important;transform-origin:50% 100%;mix-blend-mode:screen}
@keyframes arcane-live-fire{
0%{clip-path:polygon(0% 100%,0.00% 100.00%,2.11% 79.00%,3.78% 49.00%,5.33% 20.00%,5.78% 43.00%,8.56% 76.00%,11.11% 100.00%,11.11% 100.00%,13.22% 79.00%,16.46% 49.00%,18.02% 31.90%,18.46% 54.90%,19.67% 76.00%,22.22% 100.00%,22.22% 100.00%,24.33% 79.00%,23.90% 49.00%,25.46% 16.93%,25.90% 39.93%,30.78% 76.00%,33.33% 100.00%,33.33% 100.00%,35.44% 79.00%,38.33% 49.00%,39.89% 8.89%,40.33% 31.89%,41.89% 76.00%,44.44% 100.00%,44.44% 100.00%,46.56% 79.00%,48.69% 49.00%,50.25% 25.93%,50.69% 48.93%,53.00% 76.00%,55.56% 100.00%,55.56% 100.00%,57.67% 79.00%,57.49% 49.00%,59.04% 29.58%,59.49% 52.58%,64.11% 76.00%,66.67% 100.00%,66.67% 100.00%,68.78% 79.00%,72.44% 49.00%,73.99% 11.60%,74.44% 34.60%,75.22% 76.00%,77.78% 100.00%,77.78% 100.00%,79.89% 79.00%,80.75% 49.00%,82.30% 12.58%,82.75% 35.58%,86.33% 76.00%,88.89% 100.00%,88.89% 100.00%,91.00% 79.00%,91.75% 49.00%,93.30% 30.31%,93.75% 53.31%,97.44% 76.00%,100.00% 100.00%,100% 100%);transform:scaleY(0.9) skewX(0.00deg)}
25%{clip-path:polygon(0% 100%,0.00% 100.00%,2.11% 79.00%,5.87% 49.00%,7.43% 30.36%,7.87% 53.36%,8.56% 76.00%,11.11% 100.00%,11.11% 100.00%,13.22% 79.00%,13.29% 49.00%,14.85% 12.66%,15.29% 35.66%,19.67% 76.00%,22.22% 100.00%,22.22% 100.00%,24.33% 79.00%,26.04% 49.00%,27.59% 11.53%,28.04% 34.53%,30.78% 76.00%,33.33% 100.00%,33.33% 100.00%,35.44% 79.00%,38.66% 49.00%,40.22% 29.52%,40.66% 52.52%,41.89% 76.00%,44.44% 100.00%,44.44% 100.00%,46.56% 79.00%,46.12% 49.00%,47.68% 26.01%,48.12% 49.01%,53.00% 76.00%,55.56% 100.00%,55.56% 100.00%,57.67% 79.00%,60.58% 49.00%,62.14% 8.93%,62.58% 31.93%,64.11% 76.00%,66.67% 100.00%,66.67% 100.00%,68.78% 79.00%,70.88% 49.00%,72.44% 16.84%,72.88% 39.84%,75.22% 76.00%,77.78% 100.00%,77.78% 100.00%,79.89% 79.00%,79.72% 49.00%,81.28% 31.89%,81.72% 54.89%,86.33% 76.00%,88.89% 100.00%,88.89% 100.00%,91.00% 79.00%,94.67% 49.00%,96.23% 20.10%,96.67% 43.10%,97.44% 76.00%,100.00% 100.00%,100% 100%);transform:scaleY(1.22) skewX(2.73deg)}
50%{clip-path:polygon(0% 100%,0.00% 100.00%,2.11% 79.00%,3.24% 49.00%,4.79% 9.54%,5.24% 32.54%,8.56% 76.00%,11.11% 100.00%,11.11% 100.00%,13.22% 79.00%,13.73% 49.00%,15.28% 15.51%,15.73% 38.51%,19.67% 76.00%,22.22% 100.00%,22.22% 100.00%,24.33% 79.00%,28.09% 49.00%,29.64% 31.62%,30.09% 54.62%,30.78% 76.00%,33.33% 100.00%,33.33% 100.00%,35.44% 79.00%,35.49% 49.00%,37.05% 21.49%,37.49% 44.49%,41.89% 76.00%,44.44% 100.00%,44.44% 100.00%,46.56% 79.00%,48.29% 49.00%,49.85% 8.00%,50.29% 31.00%,53.00% 76.00%,55.56% 100.00%,55.56% 100.00%,57.67% 79.00%,60.86% 49.00%,62.41% 21.60%,62.86% 44.60%,64.11% 76.00%,66.67% 100.00%,66.67% 100.00%,68.78% 79.00%,68.34% 49.00%,69.90% 31.59%,70.34% 54.59%,75.22% 76.00%,77.78% 100.00%,77.78% 100.00%,79.89% 79.00%,82.83% 49.00%,84.39% 15.42%,84.83% 38.42%,86.33% 76.00%,88.89% 100.00%,88.89% 100.00%,91.00% 79.00%,93.07% 49.00%,94.62% 9.59%,95.07% 32.59%,97.44% 76.00%,100.00% 100.00%,100% 100%);transform:scaleY(0.98) skewX(-2.27deg)}
75%{clip-path:polygon(0% 100%,0.00% 100.00%,2.11% 79.00%,1.82% 49.00%,3.38% 20.20%,3.82% 43.20%,8.56% 76.00%,11.11% 100.00%,11.11% 100.00%,13.22% 79.00%,16.79% 49.00%,18.34% 31.87%,18.79% 54.87%,19.67% 76.00%,22.22% 100.00%,22.22% 100.00%,24.33% 79.00%,25.43% 49.00%,26.98% 16.74%,27.43% 39.74%,30.78% 76.00%,33.33% 100.00%,33.33% 100.00%,35.44% 79.00%,35.98% 49.00%,37.53% 8.97%,37.98% 31.97%,41.89% 76.00%,44.44% 100.00%,44.44% 100.00%,46.56% 79.00%,50.31% 49.00%,51.86% 26.10%,52.31% 49.10%,53.00% 76.00%,55.56% 100.00%,55.56% 100.00%,57.67% 79.00%,57.69% 49.00%,59.25% 29.46%,59.69% 52.46%,64.11% 76.00%,66.67% 100.00%,66.67% 100.00%,68.78% 79.00%,70.55% 49.00%,72.11% 11.46%,72.55% 34.46%,75.22% 76.00%,77.78% 100.00%,77.78% 100.00%,79.89% 79.00%,83.06% 49.00%,84.61% 12.74%,85.06% 35.74%,86.33% 76.00%,88.89% 100.00%,88.89% 100.00%,91.00% 79.00%,90.56% 49.00%,92.12% 30.41%,92.56% 53.41%,97.44% 76.00%,100.00% 100.00%,100% 100%);transform:scaleY(1.13) skewX(-0.84deg)}
100%{clip-path:polygon(0% 100%,0.00% 100.00%,2.11% 79.00%,3.78% 49.00%,5.33% 20.00%,5.78% 43.00%,8.56% 76.00%,11.11% 100.00%,11.11% 100.00%,13.22% 79.00%,16.46% 49.00%,18.02% 31.90%,18.46% 54.90%,19.67% 76.00%,22.22% 100.00%,22.22% 100.00%,24.33% 79.00%,23.90% 49.00%,25.46% 16.93%,25.90% 39.93%,30.78% 76.00%,33.33% 100.00%,33.33% 100.00%,35.44% 79.00%,38.33% 49.00%,39.89% 8.89%,40.33% 31.89%,41.89% 76.00%,44.44% 100.00%,44.44% 100.00%,46.56% 79.00%,48.69% 49.00%,50.25% 25.93%,50.69% 48.93%,53.00% 76.00%,55.56% 100.00%,55.56% 100.00%,57.67% 79.00%,57.49% 49.00%,59.04% 29.58%,59.49% 52.58%,64.11% 76.00%,66.67% 100.00%,66.67% 100.00%,68.78% 79.00%,72.44% 49.00%,73.99% 11.60%,74.44% 34.60%,75.22% 76.00%,77.78% 100.00%,77.78% 100.00%,79.89% 79.00%,80.75% 49.00%,82.30% 12.58%,82.75% 35.58%,86.33% 76.00%,88.89% 100.00%,88.89% 100.00%,91.00% 79.00%,91.75% 49.00%,93.30% 30.31%,93.75% 53.31%,97.44% 76.00%,100.00% 100.00%,100% 100%);transform:scaleY(0.9) skewX(0.00deg)}
}
@media(prefers-reduced-motion:reduce){.arcane-surge::before,.arcane-surge::after{animation:none!important}}

/* A shared etched-gold icon family; glyphs never intercept a button press. */
.hex-ui-icon{display:inline-block;width:1.15em;height:1.15em;min-width:1em;vertical-align:-.18em;fill:#81709f;stroke:#ded5ed;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 1px #100b2580)}
.hex-icon-heart{fill:#ff809e;stroke:#8d3556}.hex-icon-flame{fill:#ffb15d;stroke:#a95640}.hex-icon-shard{fill:#b0ffed;stroke:#457f91}.hex-icon-shield,.hex-icon-snow{fill:#b7e7ff;stroke:#5867a4}.hex-icon-moon{fill:#d7c6ff}.hex-icon-check{fill:#fde39e;stroke:#4c6c45}.hex-icon-close{fill:#ffd0db}.hex-icon-mouse{width:1.4em;height:1.65em;fill:#bda2e5}.hex-icon-mouse.mouse-LMB{fill:#fde8b1}.hex-icon-mouse.mouse-RMB{transform:scaleX(-1);fill:#b8eaff}.hex-icon-mouse.mouse-MMB{fill:#d4c4ed}
.tutorial-arrows .hex-ui-icon{width:100%;height:100%;fill:#fce194}#tutorial-coach .hex-keycap,.bottom .hex-keycap,kbd.hex-keycap{display:inline-flex!important;align-items:center;justify-content:center;background:none!important;box-shadow:none!important;border:0!important;padding:0!important;width:48px;min-width:40px;height:38px;color:#31233f}kbd .hex-key-art{width:100%;height:100%;filter:drop-shadow(0 2px 0 #20152d);stroke:#8c72aa;stroke-width:1.5}.tutorial-keypress .hex-key-art{animation:etched-keypress 1.2s ease-in-out infinite}
#lobby button:not(:disabled),#hub-dialog button:not(:disabled){transition:background .16s,border-color .16s,box-shadow .16s,filter .16s}#lobby button:hover:not(:disabled),#hub-dialog button:hover:not(:disabled){filter:brightness(1.09)}#lobby button:active:not(:disabled),#hub-dialog button:active:not(:disabled){filter:brightness(.96)}#lobby button:focus-visible,#hub-dialog button:focus-visible{outline:3px solid #fde3a5;outline-offset:3px}#hub-dialog button:hover:not(:disabled)>.hex-ui-icon,#lobby button:hover:not(:disabled)>.hex-ui-icon{animation:icon-wink .4s ease-out}#hub-content button{touch-action:manipulation}
.mastery-gift-grid .hex-ui-icon,.bazaar-display>.hex-ui-icon{fill:#beaddb}.gift-ready .gift-rank img{animation:rank-levitate 3.5s ease-in-out infinite}.chest-select button[aria-pressed=true] img{animation:chest-selected .32s ease-out}.wardrobe-cards article.is-equipped{box-shadow:inset 0 0 24px #fcdf8f12}.hex-ui-icon+svg.hex-ui-icon{margin-left:.16em}
@keyframes etched-keypress{0%,55%,100%{transform:translateY(0)}70%,85%{transform:translateY(4px);filter:drop-shadow(0 0 5px #fde3a0)}}@keyframes icon-wink{50%{transform:rotate(-10deg) scale(1.15)}}@keyframes rank-levitate{50%{transform:translateY(-3px);filter:drop-shadow(0 0 8px #d4adff66)}}@keyframes chest-selected{50%{transform:translateY(-4px) rotate(-5deg)}}
html[data-motion="gentle"] .gift-ready .gift-rank img,html[data-motion="gentle"] .hex-ui-icon{animation:none!important}

.bind-grid button.hex-keycap{min-height:48px!important;display:flex;align-items:center;justify-content:center}.bind-grid .hex-key-art{width:58px;height:44px}.bind-grid button.hex-keycap>.hex-icon-mouse{width:31px;height:38px}

html[data-motion="gentle"] .gift-ready::after,html[data-motion="gentle"] .gift-rank img,html[data-motion="gentle"] .gift-chest img,html[data-motion="gentle"] .bazaar-display img,html[data-motion="gentle"] .bazaar-display span,html[data-motion="gentle"] .chest-select img{animation:none!important}

/* Reserve separate rows for desktop key art and spell names. */
body:not(.touch-playing) #match .bottom{grid-template-columns:repeat(2,minmax(148px,174px));gap:8px}
body:not(.touch-playing) #match .bottom .spell{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:32px auto;column-gap:9px;row-gap:2px;align-items:center;padding:7px 10px;min-height:80px;text-align:left}
body:not(.touch-playing) #match .bottom .spell>.icon{grid-column:1;grid-row:1/3;width:40px;height:40px;position:relative;z-index:2}
body:not(.touch-playing) #match .bottom .spell>span:nth-child(2){grid-column:2;grid-row:2;padding:0;min-width:0;position:relative;z-index:2}
body:not(.touch-playing) #match .bottom .spell strong{display:block;font-size:12px;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
body:not(.touch-playing) #match .bottom .spell kbd{position:relative;inset:auto;grid-column:2;grid-row:1;justify-self:start;z-index:2;width:50px!important;min-width:0!important;height:32px!important;margin:0;padding:0!important;display:flex!important;align-items:center;justify-content:center}
body:not(.touch-playing) #match .bottom .spell kbd>.hex-icon-mouse{width:25px;height:30px;min-width:25px}
body:not(.touch-playing) #match .bottom .spell kbd>.hex-key-art{width:44px;height:32px}
body:not(.touch-playing) #match .bottom .spell[data-spell=ultimate]{grid-template-columns:40px minmax(0,1fr) 50px;grid-template-rows:auto;min-height:58px}
body:not(.touch-playing) #match .bottom .spell[data-spell=ultimate]>.icon,body:not(.touch-playing) #match .bottom .spell[data-spell=ultimate]>span:nth-child(2){grid-row:1}
body:not(.touch-playing) #match .bottom .spell[data-spell=ultimate] kbd{grid-column:3;grid-row:1}
@media(max-width:900px){body:not(.touch-playing) #match .bottom{grid-template-columns:repeat(2,148px)}}

/* Keep notices above the academy artwork, outside its decorative transforms. */
body #lobby button:has(>.clarity-ready-badge),body #lobby button:has(>.guild-notification){position:relative!important;overflow:visible!important}
body #lobby button>.clarity-ready-badge,body #lobby button>.guild-notification{
 position:absolute!important;inset:0 0 auto auto!important;transform:translate(12%,-22%);z-index:20;
 display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-width:24px;height:24px!important;
 margin:0!important;padding:0 7px!important;border:2px solid #fff0c5!important;border-radius:14px;
 background:#eed38d!important;color:#30213c!important;font:800 12px/1 system-ui!important;
 box-shadow:0 2px 5px #100a2299;pointer-events:none;white-space:nowrap
}

/* Highlight the actual rank gift reached through the Rewards notification. */
.rank-reward-ready{border:2px solid #83f5ed;border-radius:16px;box-shadow:0 0 20px #bfa3ff55;padding:18px}
.rank-reward-ready [data-choice]{box-shadow:0 0 0 2px #83f5ed88,0 0 16px #bfa3ff66}
.rank-reward-ready [data-choice]:focus-visible{outline:3px solid #83f5ed;outline-offset:4px}