* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: #10181c;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#game {
  display: block;
  background: #86c062;
  image-rendering: auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, .5);
}
#err { position: fixed; left: 0; bottom: 0; color: #f66; font: 12px monospace; white-space: pre; pointer-events: none; }

/* 모바일 터치 컨트롤 */
#touch { position: fixed; inset: 0; pointer-events: none; }
#touch.hidden { display: none; }
#touch button {
  pointer-events: auto;
  position: absolute;
  border: 2px solid rgba(255, 255, 255, .55);
  background: rgba(20, 40, 45, .38);
  color: #fff;
  font: 20px/1 sans-serif;
  border-radius: 14px;
  touch-action: none;
}
#touch button.on { background: rgba(42, 193, 188, .7); }
#touch .pad { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: 12px; width: 168px; height: 168px; }
#touch .pad button { width: 56px; height: 56px; }
#touch .pad .u { left: 56px; top: 0; }
#touch .pad .d { left: 56px; bottom: 0; }
#touch .pad .l { left: 0; top: 56px; }
#touch .pad .r { right: 0; top: 56px; }
#touch .throws { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: 16px; width: 200px; height: 90px; }
#touch .throws .big { width: 92px; height: 86px; font-size: 30px; border-radius: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#touch .throws .big small { font-size: 10px; opacity: .85; }
#touch .throws .big:first-child { left: 0; top: 0; }
#touch .throws .big:last-child { right: 0; top: 0; }
#touch .pause { top: 10px; right: max(10px, env(safe-area-inset-right)); width: 44px; height: 44px; font-size: 16px; }

#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 10;
    align-items: center; justify-content: center; text-align: center;
    background: rgba(16, 24, 28, .92); color: #2ac1bc;
    font: 28px/1.6 "Jua", sans-serif;
  }
}