/* Original ImageGen artwork matches the horizontal steel/mint joystick. */
#actions{grid-template-columns:155px 110px;grid-template-rows:112px 112px;gap:10px 14px;align-items:center}
#actions .action{height:112px;min-height:0;padding:0;background:transparent;border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;filter:drop-shadow(0 5px 5px #0005);transition:transform .08s,filter .08s;color:#d4e5e7}
#actions .action img{display:block;width:100%;height:calc(100% - 21px);object-fit:contain;pointer-events:none;-webkit-user-drag:none}
#actions .action span{font:700 10px monospace;letter-spacing:2px;line-height:17px;white-space:nowrap;pointer-events:none}
#actions .primary-action{height:176px;width:155px;align-self:center;color:#ffcc73}
#actions .primary-action span{font-size:12px}
#actions .action.pressed{filter:brightness(1.22) drop-shadow(0 0 8px #73cdb877);transform:translateY(3px) scale(.96)}
#actions .action.cooling{opacity:1}
#actions .action.cooling img{filter:saturate(.3) brightness(.52)}
#actions .action.cooling span{color:#bfcafa;letter-spacing:1px}
@media(max-width:800px) and (orientation:landscape){#actions{grid-template-columns:140px 100px;grid-template-rows:100px 100px;gap:8px 10px;margin:0 5px}#actions .action{height:100px}#actions .primary-action{height:162px;width:140px}}
@media(max-width:640px) and (orientation:landscape){#actions{grid-template-columns:115px 82px;grid-template-rows:85px 85px}#actions .action{height:85px}#actions .primary-action{height:140px;width:115px}#actions .action span{font-size:9px;letter-spacing:1px}}
@media(orientation:portrait){#actions{grid-template-columns:155px 110px;grid-template-rows:112px 112px;margin:0}#actions .action{height:112px}#actions .primary-action{height:176px;width:155px}.pad-body{gap:40px}}

/* Large finger targets: the entire rectangle, including padding, receives input. */
#actions{grid-template-columns:200px 145px;grid-template-rows:138px 138px;gap:10px 14px}
#actions .action{height:138px;min-width:120px}
#actions .primary-action{height:230px;width:200px}
#actions .action span{letter-spacing:1px;white-space:normal;text-align:center;line-height:18px;min-height:18px}
#actions .primary-action span{font-size:11px}
#actions .reloading img{animation:reload-weapon .65s ease-in-out infinite;filter:saturate(.6) brightness(.75)}
#actions .reloading::after{content:'';position:absolute;bottom:21px;left:10%;height:5px;width:calc(var(--reload-progress,0%) * .8);background:#ffcc73;border-radius:3px;box-shadow:0 0 7px #ffcc7380;transition:width .03s linear;pointer-events:none}
#actions .reloading span{color:#ffdc94;animation:reload-label 1s ease-in-out infinite}
@keyframes reload-weapon{0%,100%{transform:rotate(-4deg) scale(.94)}50%{transform:rotate(4deg) scale(1)}}
@keyframes reload-label{50%{opacity:.55}}
@media(orientation:landscape){#joystick{width:38vw;min-width:190px;max-width:460px}.pad-body{gap:10px}}
@media(max-width:700px) and (orientation:landscape){#actions{grid-template-columns:165px 125px;grid-template-rows:118px 118px;gap:8px}#actions .action{height:118px;min-width:100px}#actions .primary-action{height:200px;width:165px}#joystick{width:32vw;min-width:160px}}
@media(orientation:portrait){#actions{grid-template-columns:190px 145px;grid-template-rows:138px 138px;gap:8px}#actions .action{height:138px}#actions .primary-action{width:190px;height:220px}.pad-body{gap:30px}}
@media(max-height:650px) and (orientation:portrait){.pad-body{gap:20px}#actions{grid-template-columns:165px 125px;grid-template-rows:118px 118px}#actions .action{height:118px}#actions .primary-action{width:165px;height:200px}}
@media(prefers-reduced-motion:reduce){#actions .reloading img,#actions .reloading span{animation:none}}
@media(max-height:360px) and (orientation:landscape){.pad-header{height:50px;flex-shrink:0}.pad-footer{height:22px;flex-shrink:0}}
@media(max-width:360px) and (orientation:portrait){#joystick{width:calc(100vw - 56px)}#actions{grid-template-columns:155px 115px;grid-template-rows:110px 110px;gap:8px}#actions .action{height:110px;min-width:0}#actions .primary-action{width:155px;height:186px}}

#actions .action.skill-active img{filter:brightness(1.25) drop-shadow(0 0 9px var(--hero));}#actions .action.skill-active span{color:var(--hero)}#hero-skill-info{max-width:850px;font-size:14px}

.skill-symbol{position:absolute;left:50%;top:calc(50% - 10px);transform:translate(-50%,-50%);width:35%;aspect-ratio:1;border-radius:50%;background:#c3baff;display:grid;place-items:center;pointer-events:none}.skill-symbol svg{width:75%;height:75%;fill:none;stroke:#26364c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.cooling .skill-symbol{filter:brightness(.6)}