/* A portrait control tray leaves the arena clear of the player's thumbs. */
@media (pointer: coarse) and (orientation: portrait) {
  #game { --control-height: 174px; }
  #touch::before { content: ''; position: absolute; inset: auto 0 0; height: 174px; background: linear-gradient(#222830, #10151b); border-top: 1px solid #56606a; }
}
.touch-zone--stick {
  position: absolute; left: calc(10px + env(safe-area-inset-left, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 124px; height: 144px;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
}
.touch-stick { position: absolute; left: 2px; top: 12px; width: 120px; height: 120px; pointer-events: none; }
.touch-stick-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #cbb78b; background: radial-gradient(circle, #3b4149cc 35%, #131a22dd 36%); box-shadow: inset 0 0 0 8px #ffffff0a, 0 2px 8px #0005; }
.touch-stick-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: linear-gradient(#ead5a2, #92764d); border: 2px solid #fff1cf; box-shadow: 0 3px 8px #0008; will-change: transform; }
.touch-stick--active .touch-stick-ring { border-color: #ffdc7a; }
.touch-directions { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font: bold 9px/1 monospace; color: #eee4cd; text-shadow: 0 1px 3px #000; pointer-events: none; }
.touch-directions span:nth-child(2) { width: 100%; text-align: center; word-spacing: 12px; font-size: 9px; }
.touch-btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid #a0aab6;
  background: linear-gradient(#39414ceb, #19212deb); color: #fff5e5;
  font: bold 9px/1.1 var(--mono, monospace); text-align: center;
  box-shadow: inset 0 1px 0 #ffffff30, 0 2px 6px #0006;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
}
.touch-btn span { pointer-events: none; }
.touch-btn--pressed { background: #66512b; border-color: #ffde8f; }
.touch-btn--fire { width: 74px; height: 74px; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(#8d4635, #4b251f); border: 2px solid #e99873; font-size: 14px; }
.touch-btn--fire.touch-btn--pressed { background: #b95534; }
.touch-btn--turbo { width: 56px; height: 56px; right: calc(96px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); border-color: #d2b267; color: #ffda88; }
.touch-btn--special { width: 56px; height: 56px; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(99px + env(safe-area-inset-bottom, 0px)); }
.touch-btn--jump { right: calc(76px + env(safe-area-inset-right, 0px)); bottom: calc(103px + env(safe-area-inset-bottom, 0px)); }
.touch-btn--weapon { right: calc(132px + env(safe-area-inset-right, 0px)); bottom: calc(103px + env(safe-area-inset-bottom, 0px)); font-size: 8px; }
.touch-btn--pause { width: 44px; height: 44px; right: calc(8px + env(safe-area-inset-right, 0px)); top: 6px; font-size: 17px; }
.touch-help { max-width: 480px; font-size: 13px; line-height: 1.6; color: #ffe3a4; }