/* The skill buttons at the bottom. */
#dock{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.skill{position:relative;overflow:hidden;width:68px;height:68px;border-radius:14px;background:var(--hud);border:1px solid var(--hud-line);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:500 12px 'Kanit',system-ui,sans-serif;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.skill svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.skill span{position:relative;z-index:1}
.skill::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--cd,0)*100%);background:rgba(4,20,22,.62)}
.skill:active{transform:scale(.96)}
.skill kbd{position:absolute;top:3px;right:6px;font:500 10px 'Kanit',sans-serif;opacity:.55;z-index:1}
.skill .cost{position:absolute;top:3px;left:6px;font:700 10px 'Kanit',sans-serif;font-style:normal;color:#9fd2ff;z-index:1}
.skill.nomp{opacity:.45}
.skill.off{opacity:.28}
/* a sword skill not learned yet (combat/mastery.js): dimmed, a lock in the corner */
.skill.locked{opacity:.4}
.skill.locked .cost{display:none}
.skill.locked::before{content:'';position:absolute;top:4px;left:5px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff7e4' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;z-index:2}
.skill.nomp .cost{color:#ff8a7a}
.skill[hidden]{display:none}
/* stones left, on the throw button */
.skill .cnt{position:absolute;top:3px;left:6px;font:700 10px 'Kanit',sans-serif;font-style:normal;color:#e6e9eb;z-index:1}
/* six buttons once the throw is learned: a little narrower on a phone */
@media (max-width:420px){#dock.six{gap:6px;padding-left:8px;padding-right:8px}#dock.six .skill{width:54px;height:58px}}
@media (max-width:350px){#dock.six{gap:4px}#dock.six .skill{width:47px;height:54px;font-size:11px}}
@media (max-width:420px){#dock{gap:8px;padding-left:10px;padding-right:10px}.skill{width:60px;height:60px}.skill kbd{display:none}}
@media (max-width:350px){#dock{gap:6px}.skill{width:52px;height:56px}}
/* the on-screen joystick (joystick.js): touch screens only, bottom left above the skill dock */
#joy{display:none;position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(104px + env(safe-area-inset-bottom,0px));width:112px;height:112px;border-radius:50%;background:rgba(10,30,40,.28);border:2px solid rgba(255,255,255,.35);touch-action:none;z-index:4}
#joyKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,248,230,.8);box-shadow:0 2px 6px rgba(0,0,0,.3);pointer-events:none}
#joy.held{background:rgba(10,30,40,.4)}
@media (pointer:coarse){#joy{display:block}}
body.joy #joy{display:block}
@media (max-width:420px){#joy{bottom:calc(100px + env(safe-area-inset-bottom,0px));width:100px;height:100px}}
/* card #341: the player can put the joystick on the right (Settings, body.joyR); the
   context button then takes the left (action.css) */
body.joyR #joy{left:auto;right:calc(16px + env(safe-area-inset-right,0px))}
/* the once-only "you can move it in Settings" label, just above the joystick */
#joyHint{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(226px + env(safe-area-inset-bottom,0px));max-width:min(240px,calc(100vw - 32px));padding:6px 12px;border-radius:10px;background:var(--hud);border:1px solid var(--hud-line);color:var(--ink);font:600 13px 'Kanit',system-ui,sans-serif;pointer-events:none;z-index:4;animation:joyHint 3.5s ease-out both}
#joyHint[hidden]{display:none}
body.joyR #joyHint{left:auto;right:calc(16px + env(safe-area-inset-right,0px));text-align:right}
@keyframes joyHint{0%{opacity:0;transform:translateY(6px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
@media (max-width:420px){#joyHint{bottom:calc(210px + env(safe-area-inset-bottom,0px))}}
/* the side choice in Settings only matters where the joystick shows */
#settings .row.touch{display:none}
@media (pointer:coarse){#settings .row.touch{display:flex}}
body.joy #settings .row.touch{display:flex}
#joySides{display:flex;gap:6px}