/* Phase 3mb: the touch layer widgets (client/touch.js builds them when a coarse pointer / touch / narrow screen is detected). */
#tui{position:fixed;inset:0;pointer-events:none;z-index:7;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#tui>*{pointer-events:auto;touch-action:none}
#tui.tgone{display:none}
#tstick{position:absolute;left:calc(18px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));width:128px;height:128px;border-radius:50%;background:rgba(18,21,27,.45);border:3px solid rgba(232,198,74,.55)}
#tstick.on{background:rgba(18,21,27,.62);border-color:#e8c64a}
#tknob{position:absolute;left:36px;top:36px;width:56px;height:56px;border-radius:50%;background:rgba(232,198,74,.8);border:3px solid #0a0c10;box-shadow:2px 2px 0 #000;pointer-events:none}
#tui button{position:absolute;right:calc(18px + env(safe-area-inset-right));border-radius:50%;border:3px solid #0a0c10;box-shadow:3px 3px 0 #000;font:900 20px "Arial Black",Impact,sans-serif;cursor:pointer;padding:0;touch-action:none}
#tE{bottom:calc(30px + env(safe-area-inset-bottom));width:76px;height:76px;background:#e8c64a;color:#12151b;font-size:30px}
#tE.idle{opacity:.5;background:#8a7a45}
#tEsc,#tLog{width:52px;height:52px;background:rgba(244,236,210,.92);color:#12151b;font-size:14px}
#tEsc{bottom:calc(118px + env(safe-area-inset-bottom))}
#tLog{bottom:calc(178px + env(safe-area-inset-bottom))}
/* an overlay (scene, POI, map, screen) is open: the stick and E hide, Esc stays on top (z-index above the screens iframe wrapper) */
#tui.tover #tstick,#tui.tover #tE,#tui.tover #tLog{display:none}
#tui.tover{z-index:30}
#tui.tover #tEsc{bottom:auto;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));width:44px;height:44px;opacity:.8}
body.touch #prompt{pointer-events:auto;cursor:pointer;bottom:calc(170px + env(safe-area-inset-bottom));padding:12px 18px;min-height:44px;font-size:16px;max-width:calc(100vw - 24px);text-align:center}
body.touch #prompt kbd{display:none}
#ttoast{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top));transform:translateX(-50%);z-index:40;background:#f4ecd2;color:#12151b;border:3px solid #0a0c10;box-shadow:3px 3px 0 #000;padding:8px 14px;font:700 15px/1.3 sans-serif;max-width:calc(100vw - 32px);opacity:0;pointer-events:none;transition:opacity .2s}
#ttoast.on{opacity:1}
/* the canvas owns every touch: no page scroll / pinch-zoom / text selection on it */
body.touch #world,body.touch #world canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.touch{overscroll-behavior:none}
@media (max-height:500px){
  #tstick{width:112px;height:112px;bottom:calc(10px + env(safe-area-inset-bottom))}#tknob{left:28px;top:28px}
  #tE{width:68px;height:68px;bottom:calc(12px + env(safe-area-inset-bottom))}
  #tEsc,#tLog{width:46px;height:46px}
  #tEsc{right:calc(100px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
  #tLog{right:calc(154px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
  body.touch #prompt{bottom:calc(70px + env(safe-area-inset-bottom))}
}