:root{--sky:#bfe6f5;--ui-white:#ffffffeb;--ui-shadow:#244e6847;--ui-font:"Trebuchet MS", system-ui, -apple-system, sans-serif}html,body{background:var(--sky);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100%;margin:0;overflow:hidden}#app{touch-action:none;position:fixed;inset:0}canvas{touch-action:none;display:block}.joy-base{width:96px;height:96px;box-shadow:0 6px 20px var(--ui-shadow);opacity:0;pointer-events:none;background:#fff3;border:2px solid #fff9;border-radius:50%;margin:-48px 0 0 -48px;transition:opacity .12s ease-out;position:fixed;top:0;left:0}.joy-base.active{opacity:1}.joy-knob{background:var(--ui-white);width:46px;height:46px;box-shadow:0 3px 10px var(--ui-shadow);border-radius:50%;margin:-23px 0 0 -23px;position:absolute;top:50%;left:50%}.loading{z-index:10;background:var(--sky);color:#fff;font:700 15px/1.2 var(--ui-font);letter-spacing:.08em;text-shadow:0 1px 8px #1e466466;place-items:center;transition:opacity .45s ease-out;display:grid;position:fixed;inset:0}.loading span{animation:1.2s ease-in-out infinite loading-pulse}.loading.gone{opacity:0;pointer-events:none}@keyframes loading-pulse{0%,to{opacity:.5}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.loading span{animation:none}}.move-hint{left:50%;bottom:calc(13vh + env(safe-area-inset-bottom));color:#fff;font:700 15px/1.2 var(--ui-font);letter-spacing:.02em;text-shadow:0 1px 8px #1e466480;pointer-events:none;flex-direction:column;align-items:center;gap:12px;transition:opacity .5s ease-out,transform .5s ease-out;display:flex;position:fixed;transform:translate(-50%)}.move-hint.gone{opacity:0;transform:translate(-50%)translateY(10px)}.move-hint .ghost{background:#ffffff24;border:2px solid #ffffffbf;border-radius:50%;width:84px;height:84px;position:relative}.move-hint .ghost-knob{background:var(--ui-white);border-radius:50%;width:36px;height:36px;margin:-18px 0 0 -18px;animation:2.4s ease-in-out infinite ghost-drag;position:absolute;top:50%;left:50%}@keyframes ghost-drag{0%,to{transform:translate(0)}25%{transform:translateY(-20px)}50%{transform:translate(20px)}75%{transform:translate(-20px)}}@media (prefers-reduced-motion:reduce){.move-hint .ghost-knob{animation:none}}.fs-btn{top:calc(12px + env(safe-area-inset-top));color:#2f6680;width:44px;height:44px;box-shadow:0 3px 10px var(--ui-shadow);background:#ffffffb3;border:0;border-radius:50%;place-items:center;display:grid;position:fixed;right:12px}.fs-btn.on{opacity:.45}.debug{top:calc(10px + env(safe-area-inset-top));color:#fff;pointer-events:none;background:#14324673;border-radius:6px;padding:4px 8px;font:600 11px/1.3 ui-monospace,monospace;position:fixed;left:10px}
