/* 画面の下すみに置く、指のためのスティック。置く隅は持ち手の側（右が既定）で、触れた場所に
   土台が移ってくるので、親指をどこに置いても同じように歩ける。部屋を歩くぶんには一本で足り
   るが、卓について空を見まわすときはもう一本増える（manual-touch.js）ので、見た目と振る舞い
   は .touch-stick に書く。--stick-bottom と --stick-side は、頁ごとの足もとの事情に合わせて
   id で上書きする。 */
/* 大きさは :root に置く。--stick-room は、足もとの持ちものがスティックの隅へ入ってこない
   ように頁の側で空けておく幅――わくの幅に、指の逃げ場を少し足したもの。 */
:root{--stick-zone:158px;--stick-base:112px;--stick-knob:58px;--stick-room:172px;--stick-foot:calc(22px + env(safe-area-inset-bottom))}
.touch-stick{position:fixed;inset:0;z-index:3;pointer-events:none;--stick-bottom:var(--stick-foot);--stick-side:14px}
.touch-stick[hidden]{display:none}
.touch-stick .stick{position:absolute;border-radius:50%;bottom:var(--stick-bottom);left:calc(var(--stick-side) + env(safe-area-inset-left));width:var(--stick-zone);height:var(--stick-zone);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.stick-base{position:absolute;left:50%;top:50%;width:var(--stick-base);height:var(--stick-base);margin:calc(var(--stick-base)*-.5) 0 0 calc(var(--stick-base)*-.5);border-radius:50%;border:1px solid #cad8e53d;background:radial-gradient(circle,#0b1f3866,#06152b8c);box-shadow:inset 0 0 22px #9dc2e51a;backdrop-filter:blur(7px);opacity:.5;transition:opacity .3s ease,border-color .3s ease}
.stick-knob{position:absolute;left:50%;top:50%;width:var(--stick-knob);height:var(--stick-knob);margin:calc(var(--stick-knob)*-.5) 0 0 calc(var(--stick-knob)*-.5);border-radius:50%;background:radial-gradient(circle at 38% 34%,#fdf3dc,#e2cda0 62%,#bda878);box-shadow:0 3px 16px #000a,0 0 0 1px #ffeec933;transition:transform .18s ease-out,background .25s ease}
.stick-label{position:absolute;top:-2px;left:0;width:100%;text-align:center;font-size:10px;letter-spacing:.2em;color:#b7c9da;text-shadow:0 1px 6px #000;opacity:.55;transition:opacity .3s ease}
.stick.held .stick-base{opacity:.95;border-color:#e9d5a666}
.stick.held .stick-knob{transition:background .25s ease}
.stick.held .stick-label{opacity:0}
.stick.rim .stick-knob{background:radial-gradient(circle at 38% 34%,#fffaf0,#ffe9bd 62%,#d9bd83)}
/* 持ち手の側の隅へ。既定は右、選べば憶える（touch-controls.js）。 */
.touch-stick .stick.right{left:auto;right:calc(var(--stick-side) + env(safe-area-inset-right))}
/* 指の要らない画面では出さない。細いポインタの広い画面＝机の上、と見なす。 */
@media(pointer:fine) and (min-width:900px){.touch-stick{display:none}}
@media(max-width:380px),(max-height:520px){:root{--stick-zone:136px;--stick-base:98px;--stick-knob:52px;--stick-room:150px}}
@media(prefers-reduced-motion:reduce){.stick-base,.stick-knob,.stick-label{transition:none}}