/* Right-thumb cluster. Icons are own skill artwork, not font symbols. */
#actions{position:absolute;left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));transform:none;width:max-content;padding:0;gap:9px;background:none;border-radius:0;align-items:end;filter:drop-shadow(0 3px 3px #272a2580)}
#actions button{padding:0;overflow:visible;border:2px solid #4b342b;border-radius:50%;box-shadow:0 3px 0 #392d24,inset 0 0 0 2px #d9b878;position:relative;flex-shrink:0;transition:box-shadow .12s}
#actions button:active{transform:none}#actions button:focus-visible{outline:3px solid #fff2bb;outline-offset:4px}
#actions .skill{width:62px;height:62px;background:#5f3041;--recovery:360deg;--charge:1}
#actions .ice{background:#366c87}#actions .bolt{background:#574276}#actions .ultimate{background:#262441}
.icon-window{position:absolute;inset:4px;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 35% 20%,#ffffff32,transparent 75%)}
#actions .skill .icon-window img{display:block;position:absolute;width:110%;height:110%;left:-5%;top:-8%;object-fit:contain;filter:drop-shadow(0 1px 1px #281d2e);pointer-events:none}
#actions .fire .icon-window img{width:125%;left:-12%;height:118%;top:-12%}#actions .ice .icon-window img{height:125%;top:-17%}#actions .bolt .icon-window img{width:100%;left:0;height:125%;top:-18%}#actions .ultimate .icon-window img{width:145%;height:125%;left:-22%;top:-12%}
.cooldown-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg var(--recovery),#161526b3 var(--recovery) 360deg);pointer-events:none}
#actions .skill b{position:absolute;bottom:6px;left:0;right:0;z-index:2;font-size:11px;line-height:1;color:#fff1cb;text-shadow:0 1px 2px #1b1824,1px 0 2px #1b1824;pointer-events:none}
#actions .skill em{display:block;position:absolute;inset:0;z-index:3;background:none;border-radius:50%;text-align:center;padding-top:12px;font-size:23px;font-weight:900;color:#fff9df;font-style:normal;text-shadow:0 2px 3px #211b32;pointer-events:none}
.charge-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);fill:none;stroke-width:2.7;transform:rotate(-90deg);pointer-events:none;overflow:visible}.ring-track{stroke:#49372d}.ring-fill{stroke:#f2d69b;stroke-dasharray:226.195;stroke-dashoffset:calc((1 - var(--charge))*226.195);stroke-linecap:round}
#actions #ultimate{width:82px;height:82px;margin-left:3px;margin-bottom:13px;font-size:inherit;border-color:#3c3042;box-shadow:0 4px 0 #342635,inset 0 0 0 3px #d8b67b}#actions #ultimate b{bottom:9px;font-size:12px}#actions #ultimate em{font-size:28px;padding-top:19px}.ultimate .ring-fill{stroke-width:3.2;stroke:#ffe8aa}
#actions #ultimate.charged{animation:ultimate-breathe 2.2s ease-in-out infinite}#actions button.ready-flash{animation:skill-ready .65s ease-out!important}#actions button.pressed-glow{box-shadow:0 3px 0 #392d24,0 0 20px #fff1b5,inset 0 0 0 2px #ffe4a1}
#actions #auto{width:43px;height:43px;background:#55483d;color:#f4dfb9;margin-right:1px;margin-bottom:1px;box-shadow:0 3px 0 #392d24,inset 0 0 0 1px #b29c77}#auto svg{width:30px;height:30px;position:absolute;inset:4px;fill:none;stroke:#d7c493;stroke-width:2;opacity:.8}#auto span{position:absolute;left:0;right:0;top:12px;font-size:9px;font-weight:bold;text-shadow:0 1px 2px #30251a}#auto small{position:absolute;left:0;right:0;bottom:2px;font-size:8px}#actions #auto.on{background:#557448;box-shadow:0 3px 0 #392d24,0 0 10px #d9e9a0,inset 0 0 0 1px #f1db8d}#auto.on svg{animation:auto-circle 5s linear infinite;stroke:#fff1bd}
@keyframes skill-ready{0%,30%{box-shadow:0 3px 0 #392d24,0 0 22px #fff3c2,inset 0 0 0 4px #fff3bf}100%{box-shadow:0 3px 0 #392d24,inset 0 0 0 2px #d9b878}}@keyframes ultimate-breathe{0%,100%{filter:drop-shadow(0 0 3px #e9bf6380)}50%{filter:drop-shadow(0 0 10px #ffe6a9)}}@keyframes auto-circle{to{transform:rotate(360deg)}}
.reduced #actions #ultimate.charged,.reduced #auto.on svg{animation:none}.reduced #actions #ultimate.charged{filter:drop-shadow(0 0 5px #ffe5a1)}
@media(max-width:350px){#actions{right:10px;gap:7px}#actions .skill{width:54px;height:54px}#actions #ultimate{width:70px;height:70px;margin-left:0;margin-bottom:12px}#actions #auto{width:38px;height:38px}#auto svg{width:26px;height:26px}#auto span{top:10px}#actions .skill em{padding-top:9px;font-size:21px}#actions #ultimate em{padding-top:14px;font-size:24px}}
@media(max-height:480px){#actions{right:15px;bottom:15px;gap:8px}#actions .skill{width:56px;height:56px}#actions #ultimate{width:72px;height:72px;margin-bottom:8px}}

/* Larger, readable auto control. */
#actions #auto{width:52px;height:52px}#auto svg{width:40px;height:40px;inset:4px;stroke-width:2.4}#auto span{top:17px;font-size:11px}#auto small{bottom:3px;font-size:9px}@media(max-width:350px){#actions{gap:5px}#actions #auto{width:46px;height:46px}#auto svg{width:34px;height:34px}#auto span{top:14px}}