/* On-screen touch controls (src/core/touch.js). Layer sits under #ui-root (z 10) so menus and the pause
   screen take taps normally; only the zones and buttons capture pointers, and only while a match is live. */
#touch-ui.tc {
  position: fixed; inset: 0; z-index: 8;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
#app canvas { touch-action: none; }

.tc-zone { position: absolute; top: 0; bottom: 0; pointer-events: auto; touch-action: none; }
.tc-stick-zone { left: 0; width: 46%; }
.tc-look-zone { right: 0; width: 54%; }

/* movement stick: always faintly visible at its home spot (discoverability), jumps under the finger on touch.
   left/top here and in the press handler both name the stick CENTRE (the -50% translate halves the box), so the
   idle home and the pressed position use one anchoring rule. 95px up / 126px in mirrors the right button
   cluster's area-weighted centroid so both thumbs sit at the same height. */
.tc-stick {
  position: absolute;
  left: 126px;
  top: calc(100% - 95px - env(safe-area-inset-bottom, 0px));
  width: 116px; height: 116px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(20, 18, 34, 0.28);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  opacity: 0.45;
}
.tc-stick.tc-on { opacity: 1; }
.tc-knob {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* action buttons */
.tc-btn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(24, 20, 40, 0.42);
  color: rgba(255, 255, 255, 0.92);
  font: 800 12px/1 'Rubik', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.08s ease;
}
.tc-btn.tc-down { background: rgba(255, 255, 255, 0.42); transform: scale(0.94); }

.tc-fire {
  right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  width: 92px; height: 92px;
  border-color: rgba(255, 168, 64, 0.85);
  background: rgba(255, 138, 20, 0.34);
  font-size: 15px;
}
.tc-fire.tc-down { background: rgba(255, 160, 48, 0.6); }
.tc-jump {
  right: calc(128px + env(safe-area-inset-right, 0px)); bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  width: 66px; height: 66px;
}
.tc-sub {
  right: calc(26px + env(safe-area-inset-right, 0px)); bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  width: 62px; height: 62px;
}
.tc-special {
  right: calc(118px + env(safe-area-inset-right, 0px)); bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  width: 62px; height: 62px;
}
.tc-squid {
  right: calc(210px + env(safe-area-inset-right, 0px)); bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  width: 66px; height: 66px;
}
/* pause + map park in the top-left corner: the HUD owns the whole top-right (special meter, feed) */
.tc-pause {
  left: calc(18px + env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px));
  width: 46px; height: 46px;
  font-size: 13px;
}
.tc-map {
  left: calc(74px + env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px));
  width: 52px; height: 52px;
}

/* portrait: the stage is unreadable sideways — ask for landscape */
.tc-rotate {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 8, 20, 0.92);
  color: #fff;
  font: 800 22px/1.4 'Rubik', system-ui, sans-serif;
  text-align: center;
  pointer-events: auto;
}
.tc-rotate span { font-size: 13px; font-weight: 500; opacity: 0.75; }
@media (orientation: portrait) {
  .tc-rotate { display: flex; }
}