/* ============================================================================
   touch-controls.css  —  Virtual joystick, jump button, pause button.

   Mounted by touch-controls.js only on touch devices, but the CSS is
   harmless to load on desktop.
   ========================================================================== */

#tc-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;          /* the kids capture their own pointers */
  font-family: var(--font, system-ui, sans-serif);
}

#tc-stick,
#tc-jump,
#tc-pause {
  position: absolute;
  pointer-events: auto;
  touch-action: none;            /* CRITICAL — no double-tap zoom, no scroll */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- joystick (left) --- */
#tc-stick {
  left: calc(env(safe-area-inset-left, 0px) + 22px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(20, 12, 4, 0.55) 0%,
    rgba(34, 20, 8, 0.65) 60%,
    rgba(0, 0, 0, 0.7) 100%
  );
  border: 2px solid rgba(255, 221, 150, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55),
              inset 0 0 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#tc-stick-knob {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #f0e2c2 0%,
    #c8a366 55%,
    #6b4a22 100%
  );
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55),
              inset 0 -8px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.05s linear;
  pointer-events: none;
}

/* --- jump button (right) --- */
#tc-jump {
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #08121d;
  background: linear-gradient(140deg, #14f195 0%, #19d3ff 100%);
  box-shadow: 0 8px 0 #0c5b46,
              0 16px 36px rgba(20, 241, 149, 0.45),
              inset 0 -6px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
#tc-jump.on,
#tc-jump:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #0c5b46,
              0 6px 14px rgba(20, 241, 149, 0.35);
}

/* --- pause button (top-right) --- */
#tc-pause {
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 221, 150, 0.22);
  cursor: pointer;
  color: #ffffff;
  background: rgba(34, 20, 8, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
#tc-pause:active { transform: scale(0.94); }

/* --- short / landscape phones — pull the buttons in --- */
@media (max-height: 480px) {
  #tc-stick { width: 120px; height: 120px; }
  #tc-stick-knob { width: 54px; height: 54px; }
  #tc-jump  { width: 98px; height: 98px; bottom: 18px; }
  #tc-pause { top: 8px; }
}

/* --- desktop fallback: hide entirely unless explicitly shown
        (touch-controls.js skips mount on desktop) --- */
@media (hover: hover) and (pointer: fine) {
  #tc-root { display: none; }
}