#tmnt-touch-controls { display: none; position: fixed; inset: 0; z-index: 21; pointer-events: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#tmnt-touch-controls button, .tmnt-stick { pointer-events: auto; touch-action: none; }
.tmnt-stick { position: absolute; left: max(22px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom)); width: 118px; height: 118px;
  border: 2px solid #b0e89699; border-radius: 50%; background: #0b1c14a6;
  box-shadow: inset 0 0 28px #0008, 0 3px 16px #0005; }
.tmnt-stick-arrows { position: absolute; inset: 5px; color: #d6efc55c; line-height: 33px;
  text-align: center; font: 19px/33px system-ui, sans-serif; pointer-events: none; }
.tmnt-stick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  transform: translate(-50%, -50%); border: 1px solid #d9ffb7d9; border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #b3e078, #598b3a); box-shadow: 0 3px 12px #0008;
  pointer-events: none; will-change: transform; }
.tmnt-touch-actions { position: absolute; right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 56px);
  grid-template-rows: 33px 58px 58px; gap: 7px; align-items: center; justify-items: center; }
#tmnt-touch-controls button { border: 1px solid #c6e7b4b3; color: #f0ffe6; background: #14271fd9;
  font: 650 11px system-ui, sans-serif; box-shadow: 0 2px 10px #0006; padding: 0; }
.tmnt-action { width: 56px; height: 56px; border-radius: 50%; display: flex;
  flex-direction: column; align-items: center; justify-content: center; }
.tmnt-action small { font-size: 9px; opacity: .72; margin-top: 1px; }
.tmnt-action.tmnt-minor { width: 54px; height: 31px; border-radius: 12px; font-size: 10px; }
.tmnt-throw { grid-column: 2; grid-row: 2; }
.tmnt-jump { grid-column: 3; grid-row: 2; }
.tmnt-strong { grid-column: 1; grid-row: 3; }
.tmnt-attack { grid-column: 2 / 4; grid-row: 3; width: 76px; border-radius: 24px;
  background: #6d9c36e8 !important; font-size: 12px !important; }
#tmnt-touch-controls .pressed { background-color: #9bc254ef; color: #10200a;
  box-shadow: 0 0 18px #a7e75a55, inset 0 2px 6px #0006; }
#tmnt-touch-controls .tmnt-touch-pause, #tmnt-touch-controls .tmnt-touch-fullscreen {
  position: absolute; top: max(12px, env(safe-area-inset-top)); width: 42px; height: 36px;
  border-radius: 10px; font-size: 18px; }
.tmnt-touch-pause { left: max(16px, env(safe-area-inset-left)); }
.tmnt-touch-fullscreen { left: max(66px, calc(env(safe-area-inset-left) + 50px)); }
@media (pointer: coarse), (max-width: 768px), (max-height: 500px) and (max-width: 1100px) {
  #tmnt-touch-controls { display: block; }
  #canvas { touch-action: none; height: 100dvh; }
}
@media (max-width: 380px) {
  .tmnt-stick { width: 102px; height: 102px; left: 12px; }
  .tmnt-touch-actions { right: 10px; gap: 5px; grid-template-columns: repeat(3, 50px); }
  .tmnt-action { width: 50px; height: 50px; }
  .tmnt-action.tmnt-minor { width: 48px; }
}
.guest-modal-open #tmnt-touch-controls, body:has(#demo-level-dialog[open]) #tmnt-touch-controls { display: none; }