/* R9 - controles WebGL continuam recebendo os toques. Apenas o botão DEV intercepta. */
#sgs-r9-dev {
  position: fixed;
  z-index: 100001;
  right: max(10px, env(safe-area-inset-right));
  top: max(10px, env(safe-area-inset-top));
  width: 68px;
  height: 68px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#sgs-r9-dev > span {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#sgs-r9-dev .sgs-r9-frame {
  background: #37dcec;
  -webkit-mask-image: url('sgs-r9-dev-frame.png');
  mask-image: url('sgs-r9-dev-frame.png');
  filter: drop-shadow(0 0 7px rgba(55, 220, 236, .7));
}
#sgs-r9-dev .sgs-r9-label {
  background: #fff;
  -webkit-mask-image: url('sgs-r9-dev-text.png');
  mask-image: url('sgs-r9-dev-text.png');
}
#sgs-r9-dev.sgs-active .sgs-r9-frame {
  background: #ffbd55;
  animation: sgs-r9-dev-pulse 1s ease-in-out infinite;
}
@keyframes sgs-r9-dev-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .52; }
}

#sgs-r9-debug-panel {
  position: fixed;
  z-index: 100000;
  top: max(85px, calc(env(safe-area-inset-top) + 76px));
  left: max(8px, env(safe-area-inset-left));
  min-width: 260px;
  max-width: min(510px, calc(100vw - 18px));
  max-height: calc(100dvh - 94px);
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px 13px;
  border: 1px solid rgba(70, 222, 237, .8);
  border-radius: 10px;
  background: rgba(5, 15, 29, .90);
  color: #d6f7ff;
  box-shadow: 0 1px 18px rgba(10, 27, 51, .7);
  font: 600 12px/1.35 ui-monospace, 'Courier New', monospace;
  white-space: pre-line;
  pointer-events: none;
  user-select: none;
}
#sgs-r9-debug-panel[hidden] { display: none !important; }

.sgs-r9-marker {
  position: fixed;
  z-index: 100003;
  pointer-events: none;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  border: 2px solid #7affb8;
  border-radius: 50%;
  box-sizing: border-box;
  background: rgba(122, 255, 184, .18);
  box-shadow: 0 0 10px rgba(122, 255, 184, .55);
  transform: translate3d(0,0,0);
}
.sgs-r9-marker::before,
.sgs-r9-marker::after {
  content: '';
  position: absolute;
  background: #f6ffff;
}
.sgs-r9-marker::before { width: 2px; height: 38px; top: -5px; left: 13px; }
.sgs-r9-marker::after { width: 38px; height: 2px; top: 13px; left: -5px; }
.sgs-r9-marker.sgs-up {
  border-color: #ff876e;
  background: rgba(255, 135, 110, .16);
  box-shadow: 0 0 7px rgba(255, 135, 110, .5);
}
.sgs-r9-marker b {
  display: block;
  position: absolute;
  top: 31px;
  left: 17px;
  padding: 3px 5px;
  background: rgba(0, 11, 26, .86);
  color: #fff;
  white-space: nowrap;
  font: 700 11px ui-monospace, monospace;
}

@media (max-height: 420px) {
  #sgs-r9-dev { width: 54px; height: 54px; top: 4px; right: 5px; }
  #sgs-r9-debug-panel { top: 62px; font-size: 11px; max-height: calc(100dvh - 68px); }
}