/* touch-controls.css: the look of touch-controls.js, plus the page lockdown. Everything here is inert for mouse and
   keyboard: desktop pages render exactly as before. Theme with the --tc-* variables. */
:root {
  --tc-ink: #e8ecf2;
  --tc-panel: rgba(12, 15, 22, 0.72);
  --tc-fill: rgba(12, 15, 22, 0.5);
  --tc-fill-down: rgba(12, 15, 22, 0.76);
  --tc-edge: rgba(255, 255, 255, 0.28);
  --tc-edge-down: rgba(255, 255, 255, 0.92);
  --tc-font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* nothing scrolls, zooms or bounces under a finger (html, body and your canvas) */
html, body, canvas { touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
@media (pointer: coarse) { html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
.tc-touch, .tc-touch body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* reads env(safe-area-inset-*) for the layout code */
.tc-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
            padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }

.tc-layer { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: 0; transition: opacity 0.3s; }
.tc-layer.ready { opacity: 1; }

/* the stick: transitions only when let go (spring home, glide to rest), never while the finger drives it */
.tc-stick { position: fixed; left: 0; top: 0; box-sizing: border-box; border-radius: 50%;
            background: rgba(12, 15, 22, 0.30); border: 1.5px solid rgba(255, 255, 255, 0.34); opacity: 0.5;
            transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.24s ease-out; will-change: transform; }
.tc-knob { position: absolute; left: 50%; top: 50%; box-sizing: border-box; border-radius: 50%;
           background: rgba(232, 236, 242, 0.30); border: 1.5px solid rgba(255, 255, 255, 0.62);
           transition: transform 0.2s cubic-bezier(0.3, 1.45, 0.5, 1), background-color 0.08s; will-change: transform; }
.tc-stick.live { opacity: 1; }
.tc-stick.live, .tc-stick.live .tc-knob { transition: none; }
.tc-stick.run .tc-knob { background: rgba(245, 247, 250, 0.58); }

/* buttons: pressed feedback within 80 ms, darker when held so the label stays readable on light scenes */
.tc-btn { position: fixed; left: 0; top: 0; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center;
          pointer-events: auto; touch-action: none; background: var(--tc-fill); border: 1.5px solid var(--tc-edge);
          color: rgba(240, 243, 248, 0.95); font: var(--tc-font); letter-spacing: 0.06em;
          transition: transform 0.08s ease-out, background-color 0.08s ease-out, border-color 0.08s ease-out; }
.tc-btn.tc-primary { font-size: 12.5px; letter-spacing: 0.08em; }
.tc-btn.long { font-size: 9px; letter-spacing: 0.02em; }
.tc-btn span { text-align: center; }
.tc-btn small { display: block; margin-top: 3px; font-size: 8px; font-weight: 500; letter-spacing: 0.08em; opacity: 0.66; }
.tc-btn.down { transform: scale(0.92); background: var(--tc-fill-down); border-color: var(--tc-edge-down); transition-duration: 0.03s; }
.tc-btn[hidden] { display: none; }

/* small top-right bar (host buttons + fullscreen where the browser has it) */
.tc-bar { position: fixed; right: calc(env(safe-area-inset-right) + 10px); top: calc(env(safe-area-inset-top) + 10px);
          display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--tc-panel); z-index: 21;
          visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; }
.tc-bar.ready { visibility: visible; opacity: 1; }
.tc-bar button { height: 38px; min-width: 44px; padding: 0 12px; display: grid; place-items: center; touch-action: none;
                 font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tc-ink);
                 background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; }
.tc-bar button.on { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.4); }
.tc-bar svg { width: 16px; height: 16px; display: block; }

/* one line of guidance that fades on its own */
.tc-toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%); z-index: 21;
            max-width: min(86vw, 460px); width: max-content; text-align: center; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
            color: var(--tc-ink); background: var(--tc-panel); border-radius: 8px; padding: 8px 12px; pointer-events: none;
            opacity: 0; transition: opacity 0.6s ease-out; }
.tc-toast.on { opacity: 1; transition-duration: 0.25s; }