html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
.control,
.ctrl,
.run-btn {
  min-height: 44px;
  touch-action: manipulation;
}

input,
select,
textarea,
button {
  font-size: max(16px, 1em);
}

canvas {
  touch-action: none;
}

@media (max-width: 700px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  button,
  [role="button"],
  .control,
  .ctrl,
  .run-btn {
    min-height: 48px;
  }

  .actions,
  .controls,
  .run-buttons {
    gap: 10px;
  }

  .actions > button,
  .row > button {
    flex: 1 1 140px;
  }

  .field {
    min-width: min(100%, 145px);
  }

  .canvas-wrap {
    overscroll-behavior-inline: contain;
    scrollbar-color: #5aebff #101630;
    -webkit-overflow-scrolling: touch;
  }

  .panel {
    border-radius: 14px;
  }
}

/* Pygbag canvases: preserve the game's native ratio on phones. */
body:has(canvas.emscripten) {
  width: 100vw;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #050712;
}

canvas.emscripten {
  width: auto !important;
  height: auto !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  background: #050712 !important;
}

#transfer {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(86vw, 360px);
  transform: translate(-50%, -50%);
  z-index: 4;
}

#progress {
  max-width: 100%;
}

#infobox {
  max-width: calc(100vw - 32px);
  border-radius: 12px;
}

@media (max-width: 700px) and (orientation: portrait) {
  body:has(canvas.emscripten)::after {
    content: "가로 화면으로 돌리면 더 크게 플레이할 수 있어요";
    position: fixed;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 20;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    padding: 8px 12px;
    border: 1px solid #5aebff88;
    border-radius: 999px;
    background: #07101ed9;
    color: #dffaff;
    font: 600 13px/1.25 system-ui, sans-serif;
    text-align: center;
    pointer-events: none;
  }
}