#touch { display: none; }

html.touch {
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --vh: 100vh;
  --side: 120px;
  --edge: 12px;
  --dpad: min(160px, 42vmin);
  --btn: max(56px, min(68px, 17vmin));
  --key-w: 68px;
  --key-h: 56px;
  --stage-h: min(calc(var(--vh) - var(--st) - var(--sb)), calc((100vw - var(--sl) - var(--sr) - 2 * var(--side)) * 3 / 4));
  --stage-w: calc(var(--stage-h) * 4 / 3);
  --stage-top: calc(var(--st) + (var(--vh) - var(--st) - var(--sb) - var(--stage-h)) / 2);
  --keys-top: calc(var(--st) + var(--edge));
}
@supports (height: 100dvh) {
  html.touch { --vh: 100dvh; }
}
@media (orientation: portrait) {
  html.touch {
    --stage-w: min(calc(100vw - var(--sl) - var(--sr)), calc((var(--vh) - var(--st) - var(--sb)) * 0.55 * 4 / 3));
    --stage-h: calc(var(--stage-w) * 3 / 4);
    --stage-top: var(--st);
    --keys-top: calc(var(--st) + var(--stage-h) + var(--edge));
  }
}

html.touch,
html.touch body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html.touch body { position: fixed; inset: 0; padding: 0; min-height: 0; }
html.touch h1,
html.touch .toolbar,
html.touch footer,
html.touch #output { display: none; }
html.touch .stage {
  position: fixed;
  top: var(--stage-top);
  left: calc(var(--sl) + (100vw - var(--sl) - var(--sr) - var(--stage-w)) / 2);
  width: var(--stage-w);
  height: var(--stage-h);
  border-radius: 0;
  box-shadow: none;
}
html.touch .stage .btn { font-size: 12px; padding: 10px 14px; }
html.touch .stage .btn-big { font-size: 18px; padding: 14px 28px; }
.tc-tip { display: none; }
html.touch .tc-tip { display: block; }

html.touch #touch {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
#touch[hidden] { display: none !important; }
#touch .tc-zone,
#touch .tc-util {
  pointer-events: auto;
  touch-action: none;
  position: absolute;
}

.tc-dpad {
  left: calc(var(--sl) + var(--edge));
  bottom: calc(var(--sb) + var(--edge));
  width: var(--dpad);
  height: var(--dpad);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.12);
}
.tc-arm {
  position: absolute;
  width: 34%;
  height: 34%;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
}
.tc-arm::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}
.tc-arm[data-dir=up] { left: 33%; top: 0; border-bottom: 0; border-radius: 8px 8px 0 0; }
.tc-arm[data-dir=down] { left: 33%; bottom: 0; border-top: 0; border-radius: 0 0 8px 8px; }
.tc-arm[data-dir=left] { top: 33%; left: 0; border-right: 0; border-radius: 8px 0 0 8px; }
.tc-arm[data-dir=right] { top: 33%; right: 0; border-left: 0; border-radius: 0 8px 8px 0; }
.tc-arm[data-dir=up]::after { border-bottom-color: rgba(255, 255, 255, 0.7); }
.tc-arm[data-dir=down]::after { border-top-color: rgba(255, 255, 255, 0.7); }
.tc-arm[data-dir=left]::after { border-right-color: rgba(255, 255, 255, 0.7); }
.tc-arm[data-dir=right]::after { border-left-color: rgba(255, 255, 255, 0.7); }
.tc-dpad::before {
  content: "";
  position: absolute;
  left: 33%;
  top: 33%;
  width: 34%;
  height: 34%;
  background: rgba(255, 255, 255, 0.22);
}
.tc-arm.on { background: rgba(255, 204, 51, 0.65); }

.tc-stick {
  left: 0;
  bottom: 0;
  top: 0;
  width: calc(var(--sl) + (100vw - var(--sl) - var(--sr) - var(--stage-w)) / 2);
}
html:not(.stick) .tc-stick,
html.stick .tc-dpad .tc-arm,
html.stick .tc-dpad::before { display: none; }
html.stick #touch .tc-dpad { pointer-events: none; }
.tc-stick-base {
  position: absolute;
  left: -50px;
  top: -50px;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.tc-stick-base[hidden] { display: none; }
.tc-stick-knob {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.tc-buttons {
  right: calc(var(--sr) + var(--edge));
  bottom: calc(var(--sb) + var(--edge));
  width: calc(2 * var(--btn) + 10px);
  height: calc(2 * var(--btn) + 10px);
}
.tc-btn {
  position: absolute;
  width: var(--btn);
  height: var(--btn);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.05s, background 0.05s;
}
.tc-btn[data-key=up] { right: 0; bottom: calc(var(--btn) * 0.5); background: rgba(228, 0, 43, 0.35); }
.tc-btn[data-key=run] { left: 0; bottom: 0; background: rgba(255, 204, 51, 0.25); }
.tc-btn[data-key=item] { left: 0; top: 0; background: rgba(60, 140, 255, 0.3); }
.tc-btn.on,
.tc-key.on { transform: scale(0.94); background: rgba(255, 255, 255, 0.55); color: #000; }

.tc-col {
  position: absolute;
  top: var(--keys-top);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-col-left { left: calc(var(--sl) + var(--edge)); align-items: flex-start; }
.tc-col-right { right: calc(var(--sr) + var(--edge)); align-items: flex-end; }
#touch .tc-col .tc-zone,
#touch .tc-col .tc-util { position: relative; }
.tc-key,
.tc-util {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 0;
}
.tc-key { width: var(--key-w); height: var(--key-h); }
.tc-util { width: 48px; height: 44px; cursor: pointer; }
.tc-util svg { width: 20px; height: 20px; }
.tc-util[hidden] { display: none; }
html:not(.playing) .tc-util[data-action=menu] { display: none; }
.tc-mode { font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
@media (orientation: portrait) {
  .tc-col { flex-direction: row; }
  .tc-stick { top: var(--keys-top); width: 50vw; }
}

#textEntry {
  position: fixed;
  z-index: 20;
  margin: 0;
  padding: 0 8px;
  border: 2px solid var(--gold, #ffcc33);
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
#textEntry[hidden] { display: none; }