/* Touch devices (body.touch, set in world.js): an L3-style analog stick under the
   left thumb, drag-to-look everywhere else, and a Menu button in place of Esc.
   Drawn in the notebook look: dashed chalk ring, lime knob with the hand-drawn
   drop shadow the site's buttons use. */
#stick,#touchMenu{display:none}

body.touch #stick{
  --kx:0px;--ky:0px;
  display:block;position:absolute;left:calc(22px + env(safe-area-inset-left,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));
  width:116px;height:116px;border-radius:50%;pointer-events:auto;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:radial-gradient(circle,rgba(27,10,74,.28) 0 54%,rgba(27,10,74,.5) 55% 100%);
  border:2px dashed rgba(250,246,232,.6);transition:border-color .15s,box-shadow .15s}
/* a bigger invisible target so a loose thumb still lands on it */
body.touch #stick::before{content:"";position:absolute;inset:-24px;border-radius:50%}
.stick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,transparent 0 38%,rgba(20,17,28,.18) 39% 43%,transparent 44%),var(--lime);
  border:2px solid #14111C;box-shadow:3px 4px 0 #0c0624;
  transform:translate(var(--kx),var(--ky));transition:transform .2s cubic-bezier(.2,1.5,.4,1),background-color .15s}
#stick.on{border-color:var(--lime)}
#stick.on .stick-knob{transition:none}
/* pushed to the rim: running */
#stick.run{border-style:solid;box-shadow:0 0 0 5px rgba(255,216,74,.3)}
#stick.run .stick-knob{background-color:var(--sun)}

body.touch #touchMenu{display:block;position:absolute;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));
  pointer-events:auto;min-height:44px;padding:10px 18px;font:700 15px/1 var(--pen);color:var(--ivory);cursor:pointer;
  background:rgba(20,12,50,.82);border:2px dashed rgba(250,246,232,.6);border-radius:255px 14px 225px 14px/14px 225px 14px 255px}
body.touch #touchMenu:active{border-color:var(--lime);color:var(--lime)}
/* controls only while walking; the overlay, map and site pages take over otherwise */
body:not(.playing) #stick,body:not(.playing) #touchMenu{visibility:hidden}

body.touch #c{touch-action:none}
body.touch.playing{overscroll-behavior:none}
body.touch #keys{display:none}
body.touch #personHint kbd{display:none}
body.touch #toast{bottom:calc(170px + env(safe-area-inset-bottom,0px))}

/* phone HUD: the site nav steps aside while walking (Menu brings it back),
   the place card and minimap move up to the top edge, the minimap shrinks */
body.touch.playing #snav{opacity:0!important}
body.touch #where{top:calc(12px + env(safe-area-inset-top,0px))!important;left:calc(12px + env(safe-area-inset-left,0px))}
body.touch #mini{top:calc(12px + env(safe-area-inset-top,0px))!important;right:calc(12px + env(safe-area-inset-right,0px))}
@media (max-width:760px){
  body.touch #mini{width:112px;height:112px}
  body.touch #where{width:calc(100% - 150px)}
}