/* Illustrated skill controls. The button itself is the hit area; artwork never intercepts a finger. */
.goblin-game .controls,#controls{--rim:#b6b397;--skill-gold:#f6cf79;--dock-size:184px;position:relative;inset:auto;height:var(--dock-size);padding:10px max(22px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));gap:14px;align-items:flex-end;background:radial-gradient(ellipse at 50% 0,#29444570,transparent 65%),linear-gradient(#11262e,#091b26);border-top:1px solid #91a99b26;box-shadow:inset 0 10px 25px #030d1833}
.goblin-game[data-phase=playing] main{grid-template-rows:minmax(0,1fr) 184px}
.goblin-game .actions,#controls .action-pad{position:relative;display:block;width:198px;height:154px;flex:none;opacity:1;transform:none!important}
.goblin-game .actions button,#controls .action-pad button{--accent:#a6c4c8;position:absolute;display:grid;place-items:center;padding:0;margin:0;border:0!important;border-radius:50%;isolation:isolate;overflow:visible;cursor:pointer;touch-action:none;background:linear-gradient(145deg,#e0d4aa,#616857 30%,#263435 53%,#7d897e 79%,#d4d7b8)!important;box-shadow:0 5px 9px #020b15a8,0 0 0 1px #030f19,inset 0 1px 1px #fff9debf!important;color:#fff1d4;opacity:1;filter:none;transition:transform 65ms,filter 90ms}
.goblin-game .actions [data-key=attack],#controls .action-pad [data-action=attack]{--accent:#ffd88b;right:0;left:auto;top:auto;bottom:2px;width:90px;height:90px;background:linear-gradient(140deg,#fff4be,#a87b39 40%,#493723 55%,#d0a45b 82%,#fae3a7)!important;box-shadow:0 6px 12px #010c19a8,0 0 0 1px #624f30,inset 0 1px 1px #fff9d4!important}
.goblin-game .actions [data-key=jump],#controls .action-pad [data-action=cape]{--accent:#a8e7b9;left:14px;right:auto;top:auto;bottom:0;width:62px;height:62px}
.goblin-game .actions [data-key=roll],#controls .action-pad [data-action=dodge]{--accent:#a3e1f5;left:38px;right:auto;top:12px;bottom:auto;width:60px;height:60px}
.goblin-game .actions [data-key=blast]{--accent:#cbbeff;right:4px;left:auto;top:0;bottom:auto;width:56px;height:56px}
.skill-art53{position:absolute;inset:4px;border-radius:50%;background-image:url('/assets/skill-buttons53.png');background-size:300% 200%;background-position:0 0;pointer-events:none;box-shadow:inset 0 0 0 1px #070d19,inset 0 -10px 14px #04111b55;z-index:0}
[data-key=jump] .skill-art53{background-position:50% 0}
[data-key=roll] .skill-art53,[data-action=dodge] .skill-art53{background-position:100% 0}
[data-key=blast] .skill-art53{background-position:0 100%}
[data-action=attack] .skill-art53{background-position:50% 100%}
[data-action=cape] .skill-art53{background-position:100% 100%}
.goblin-game .actions .glyph,.goblin-game .actions small,#controls .action-pad svg,#controls .action-pad button>i{display:none}
.goblin-game .actions button>b,#controls .action-pad button>span{position:absolute;bottom:8px;left:4px;right:4px;width:auto;margin:0;text-align:center;line-height:1.15;font-size:10px;font-weight:800;letter-spacing:-.3px;z-index:3;pointer-events:none;color:#fff3d8;text-shadow:0 1px 2px #000,0 0 5px #000,0 0 8px #000}
.goblin-game .actions [data-key=attack]>b,#controls .action-pad [data-action=attack]>span{font-size:12px;bottom:12px}
.goblin-game .actions button:after,#controls .action-pad button:after{content:'';position:absolute;inset:4px;z-index:1;border-radius:50%;background:conic-gradient(#020914c9 var(--cool,0deg),transparent 0);pointer-events:none}
.goblin-game .actions button:before,#controls .action-pad button:before{content:'';position:absolute;inset:-2px;z-index:4;border-radius:50%;border:1px solid var(--accent);background:none;mask:none;opacity:0;pointer-events:none;filter:none}
.skill-shade53{position:absolute;inset:4px;border-radius:50%;background:linear-gradient(transparent 50%,#05101b9e 96%);z-index:1;pointer-events:none}
.skill-timer53{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:7px;font:800 20px/1 system-ui;color:#fff9eb;text-shadow:0 2px 3px #000;z-index:3;pointer-events:none;font-variant-numeric:tabular-nums}
.skill-stock53{position:absolute;top:-4px;right:-3px;min-width:21px;height:21px;display:grid;place-items:center;padding:0 4px;border:1px solid #eadca7;border-radius:6px;background:linear-gradient(#385252,#142834);color:#fff0c8;font:bold 11px/1 system-ui;box-shadow:0 2px 4px #030d15;z-index:5;pointer-events:none}
.skill-stock53:empty{display:none}
.goblin-game .actions button[data-blocked=true] .skill-art53,#controls .action-pad button[data-blocked=true] .skill-art53{filter:saturate(.4) brightness(.65)}
.goblin-game .actions [data-key=blast].ready:before,#controls .action-pad [data-action=attack][data-stock="1"]:before,#controls .action-pad [data-action=attack][data-stock="2"]:before{opacity:.8;box-shadow:0 0 8px #dcc59440}
.goblin-game .actions [data-key=blast]:after{background:conic-gradient(transparent var(--charge,0deg),#020914b8 0)}
#controls .action-pad [data-action=attack]:before{border:0;opacity:1;background:conic-gradient(#ffedb5 var(--charging,0deg),transparent 0);mask:radial-gradient(transparent 66%,#000 68%);box-shadow:none}
#controls .action-pad [data-action=attack].charge-ready:before{filter:drop-shadow(0 0 4px #ffdb8e)}
.goblin-game .actions button.held,#controls .action-pad button.held{transform:translateY(3px) scale(.94);filter:brightness(1.22);box-shadow:0 1px 3px #010a16,inset 0 2px 4px #050d19!important}
.goblin-game .actions button.held:before,#controls .action-pad [data-action=cape][aria-pressed=true]:before,#controls .action-pad button.held:before{opacity:1;box-shadow:0 0 12px #bddab360}
.goblin-game #stick,#controls .move-pad{width:112px;height:112px;flex:none;align-self:flex-end;margin-bottom:4px;border:1px solid #9ab8b445;background:radial-gradient(circle,transparent 57%,#b5d4c617 58% 59%,transparent 60%),radial-gradient(circle,#385c6260,#0b1d2999 69%);box-shadow:inset 0 0 18px #07111c,0 2px 8px #030e1840;opacity:1}
.goblin-game #stick:after{content:'';position:absolute;inset:8px;border:1px solid #acc6b721;border-radius:50%;pointer-events:none}
.goblin-game #stick-knob,#controls .stick-knob{width:54px;height:54px;border:1px solid #bbc7ad8c;background:radial-gradient(circle at 35% 28%,#829c94,#405e61 58%,#213844 90%);box-shadow:0 5px 10px #020c16b3,inset 0 1px 2px #ebf0ca80,inset 0 0 0 4px #0c223938;z-index:2}
.goblin-game #stick-knob{margin:-27px 0 0 -27px}.goblin-game #stick span{display:none}
#controls .move-pad svg{opacity:.3;width:14px}#controls .move-pad .stick-ring{inset:8px}
html[data-touch-layout=large] .goblin-game .controls,html[data-touch-layout=large] #controls{padding-inline:max(18px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom))}
html[data-touch-layout=large] .goblin-game .controls,html[data-touch-layout=large] #controls{--dock-size:196px}
html[data-touch-layout=large] .goblin-game[data-phase=playing] main{grid-template-rows:minmax(0,1fr) 196px}
html[data-touch-layout=large] .goblin-game .actions,html[data-touch-layout=large] #controls .action-pad{height:166px}
html[data-touch-layout=large] .goblin-game .actions [data-key=attack],html[data-touch-layout=large] #controls .action-pad [data-action=attack]{width:98px;height:98px}
html[data-touch-layout=large] .goblin-game .actions [data-key=jump],html[data-touch-layout=large] #controls .action-pad [data-action=cape]{width:68px;height:68px;left:4px}
@media(max-width:360px){
 .goblin-game .controls,#controls{--dock-size:174px;padding:8px 14px 16px;gap:8px}
 .goblin-game[data-phase=playing] main{grid-template-rows:minmax(0,1fr) 174px}
 .goblin-game .actions,#controls .action-pad{width:188px;height:148px}
 .goblin-game #stick,#controls .move-pad{width:86px;height:86px}
 .goblin-game .actions [data-key=attack],#controls .action-pad [data-action=attack]{width:82px;height:82px}
 .goblin-game .actions [data-key=jump],#controls .action-pad [data-action=cape]{width:58px;height:58px}
 .goblin-game .actions [data-key=roll],#controls .action-pad [data-action=dodge]{width:54px;height:54px}
 .goblin-game .actions [data-key=blast]{width:54px;height:54px;right:0}
 html[data-touch-layout=large] .goblin-game .controls,html[data-touch-layout=large] #controls{padding-inline:12px;padding-bottom:16px}
 html[data-touch-layout=large] .goblin-game .controls,html[data-touch-layout=large] #controls{--dock-size:182px}
 html[data-touch-layout=large] .goblin-game[data-phase=playing] main{grid-template-rows:minmax(0,1fr) 182px}
 html[data-touch-layout=large] .goblin-game .actions,html[data-touch-layout=large] #controls .action-pad{height:156px}
 html[data-touch-layout=large] .goblin-game .actions [data-key=attack],html[data-touch-layout=large] #controls .action-pad [data-action=attack]{width:90px;height:90px}
 html[data-touch-layout=large] .goblin-game .actions [data-key=jump],html[data-touch-layout=large] #controls .action-pad [data-action=cape]{width:62px;height:62px}
}
@media(orientation:landscape) and (max-height:600px){
 .goblin-game .controls,#controls{--dock-size:136px;padding:8px max(30px,6vw) max(12px,env(safe-area-inset-bottom));align-items:flex-end}
 .goblin-game[data-phase=playing] main{grid-template-rows:minmax(0,1fr) 136px}
 .goblin-game .actions,#controls .action-pad{width:228px;height:116px}
 .goblin-game #stick,#controls .move-pad{width:98px;height:98px;align-self:flex-end}
 .goblin-game .actions [data-key=attack],#controls .action-pad [data-action=attack]{width:80px;height:80px;bottom:0}
 .goblin-game .actions [data-key=jump],#controls .action-pad [data-action=cape]{width:60px;height:60px;left:0;bottom:0}
 .goblin-game .actions [data-key=roll]{width:52px;height:52px;top:0;left:12px}
 #controls .action-pad [data-action=dodge]{width:56px;height:56px;top:0;left:76px}
 .goblin-game .actions [data-key=blast]{width:52px;height:52px;top:0;left:88px;right:auto}
 html[data-touch-layout=large] .goblin-game .controls,html[data-touch-layout=large] #controls{padding-inline:max(30px,6vw);padding-bottom:12px}
 html[data-touch-layout=large] .goblin-game .controls,html[data-touch-layout=large] #controls{--dock-size:136px}
 html[data-touch-layout=large] .goblin-game[data-phase=playing] main{grid-template-rows:minmax(0,1fr) 136px}
 html[data-touch-layout=large] .goblin-game .actions,html[data-touch-layout=large] #controls .action-pad{height:116px}
 html[data-touch-layout=large] .goblin-game .actions [data-key=attack],html[data-touch-layout=large] #controls .action-pad [data-action=attack]{width:88px;height:88px}
 html[data-touch-layout=large] .goblin-game .actions [data-key=jump],html[data-touch-layout=large] #controls .action-pad [data-action=cape]{width:64px;height:64px;left:0}
}
.goblin-game .actions button.unavailable{opacity:1;filter:none}
html[data-touch-layout=left] .goblin-game .actions [data-key=attack],html[data-touch-layout=left] #controls .action-pad [data-action=attack]{left:0;right:auto}
html[data-touch-layout=left] .goblin-game .actions [data-key=jump],html[data-touch-layout=left] #controls .action-pad [data-action=cape]{left:auto;right:14px}
html[data-touch-layout=left] .goblin-game .actions [data-key=roll],html[data-touch-layout=left] #controls .action-pad [data-action=dodge]{left:auto;right:38px}
html[data-touch-layout=left] .goblin-game .actions [data-key=blast]{left:4px;right:auto}
@media(orientation:landscape) and (max-height:600px){
 html[data-touch-layout=left] .goblin-game .actions [data-key=jump],html[data-touch-layout=left] #controls .action-pad [data-action=cape]{right:0}
 html[data-touch-layout=left] .goblin-game .actions [data-key=roll]{right:12px}
 html[data-touch-layout=left] #controls .action-pad [data-action=dodge]{right:76px}
 html[data-touch-layout=left] .goblin-game .actions [data-key=blast]{left:auto;right:88px}
}
@media(min-width:900px) and (hover:hover) and (pointer:fine){.goblin-game[data-phase=playing] main,html[data-touch-layout=large] .goblin-game[data-phase=playing] main{grid-template-rows:minmax(0,1fr) 30px}}
@media(prefers-reduced-motion:reduce){.goblin-game .actions button,#controls .action-pad button{transition:none}}