#touchControls,
#touchControls *,
.arena-top-controls,
.arena-top-controls * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#touchControls {
  --touch-action-art-filter: brightness(0) invert(1);
  --touch-action-size: clamp(68px, 16vw, 82px);
  --touch-shield-size: clamp(46px, 10.5vw, 60px);
  --touch-shield-gap: clamp(5px, 1.5vw, 10px);
  --touch-shield-step: calc(var(--touch-shield-size) + var(--touch-shield-gap));
  --touch-mine-offset: calc(
    var(--touch-shield-size) / 2 + var(--touch-action-size) / 2 + var(--touch-shield-gap)
  );
  --touch-shield-bottom: max(100px, calc(env(safe-area-inset-bottom) + 100px));
  --touch-layout-resize-grab: 32px;
  position: fixed;
  inset: 0;
  z-index: 6;
  display: none;
  pointer-events: none;
  font-family: 'Outfit', Verdana, "DejaVu Sans", Tahoma, sans-serif;
}

#touchControls.arena-inactive:not(.layout-preview) {
  display: none !important;
}

#touchControls.round-inactive [data-layout-cluster] {
  display: none !important;
}

#touchControls.layout-preview {
  z-index: 30;
  display: block !important;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 48%, rgba(49, 42, 34, 0.18), transparent 52%),
    rgba(5, 4, 3, 0.72);
}

#touchControls.layout-preview.round-inactive [data-layout-cluster] {
  display: flex !important;
}

#touchControls [data-layout-cluster][hidden] {
  display: none !important;
}

#touchControls .touch-cluster {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

#touchControls .touch-cluster > .touch-layout-handle,
#touchControls .touch-layout-toolbar {
  display: none;
}

#touchControls .touch-layout-safe-probe {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}

#touchControls button {
  --touch-color: #f3e9d8;
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 3px solid rgba(243, 233, 216, 0.86);
  border-color: color-mix(in srgb, var(--touch-color) 92%, white 8%);
  border-radius: 50%;
  background: #453f38;
  background: color-mix(in srgb, #12100d 32%, var(--touch-color) 68%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 5px 18px rgba(0, 0, 0, 0.42);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    0 5px 18px rgba(0, 0, 0, 0.42),
    0 0 16px color-mix(in srgb, var(--touch-color) 34%, transparent);
  color: #fff;
  font: 700 20px/1 'Outfit', Verdana, "DejaVu Sans", Tahoma, sans-serif;
  text-shadow: 0 1px 3px #000;
  /* Keep world-space asteroid keys from reading as extra button labels. */
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 80ms linear, transform 80ms ease, filter 80ms linear;
}

#touchControls button[hidden] {
  display: none !important;
}

#touchControls button.active {
  filter: brightness(1.34);
  opacity: 1;
  transform: scale(0.93);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.18), 0 0 24px rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 0 14px color-mix(in srgb, var(--touch-color) 48%, transparent),
    0 0 24px color-mix(in srgb, var(--touch-color) 65%, transparent);
}

#touchControls button.tractor-active {
  outline: 3px solid rgba(127, 208, 255, 0.92);
  outline-offset: 3px;
  filter: brightness(1.22);
  box-shadow:
    inset 0 0 14px rgba(127, 208, 255, 0.42),
    0 0 26px rgba(127, 208, 255, 0.72);
  animation: tractor-control-active 0.9s ease-in-out infinite alternate;
}

@keyframes tractor-control-active {
  to { filter: brightness(1.46); }
}

#touchControls button.tutorial-unavailable {
  opacity: 0.28;
  filter: saturate(0.25);
}

#touchControls button.tutorial-highlight:not(:disabled) {
  outline: 3px solid color-mix(in srgb, var(--touch-color) 88%, white);
  outline-offset: 3px;
  filter: brightness(1.18);
  animation: tutorial-control-prompt 1.35s ease-in-out infinite;
}

@keyframes tutorial-control-prompt {
  50% {
    box-shadow:
      inset 0 0 12px color-mix(in srgb, var(--touch-color) 34%, transparent),
      0 0 26px color-mix(in srgb, var(--touch-color) 72%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  #touchControls button.tutorial-highlight:not(:disabled) {
    animation: none;
  }
  #touchControls button.tractor-active {
    animation: none;
  }
}

#touchControls button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

#touchControls .touch-action-icon {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: contain;
  pointer-events: none;
  filter:
    var(--touch-action-art-filter, brightness(0) invert(1))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.82));
}

#touchControls .touch-turn-icon {
  width: 66%;
  height: 66%;
}

#touchControls .touch-thrust-icon,
#touchControls .touch-tractor-icon {
  width: 72%;
  height: 72%;
}

#touchControls .touch-bomb-icon {
  width: 78%;
  height: 78%;
}

#touchControls .touch-action-icon-flipped {
  transform: scaleX(-1);
}

#touchControls .touch-movement {
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
}

#touchControls .touch-movement button {
  width: clamp(58px, 14vw, 72px);
  height: clamp(58px, 14vw, 72px);
}

#touchControls .touch-thrust,
#touchControls .touch-fire {
  right: max(16px, env(safe-area-inset-right));
  flex-direction: column;
}

#touchControls .touch-fire {
  bottom: max(14px, env(safe-area-inset-bottom));
}

#touchControls .touch-thrust {
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--touch-action-size) + 10px);
}

#touchControls .touch-thrust button,
#touchControls .touch-fire button,
#touchControls .touch-mine button[data-code] {
  width: var(--touch-action-size);
  height: var(--touch-action-size);
}

#touchControls .touch-thrust button,
#touchControls .touch-fire button {
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: 0.8px;
}

#touchControls .touch-shield,
#touchControls .touch-mine {
  bottom: var(--touch-shield-bottom);
  transform: translateX(-50%);
}

#touchControls .touch-shield button[data-code] {
  width: var(--touch-shield-size);
  height: var(--touch-shield-size);
}

#touchControls .touch-shield button[data-code],
#touchControls .touch-mine button[data-code] {
  border-radius: 13px;
}

#touchControls .touch-shield-0 {
  left: calc(50% - var(--touch-shield-step));
  bottom: calc(var(--touch-shield-bottom) + var(--touch-shield-step));
}

#touchControls .touch-shield-1 {
  left: 50%;
  bottom: calc(var(--touch-shield-bottom) + var(--touch-shield-step));
}

#touchControls .touch-shield-2 {
  left: calc(50% + var(--touch-shield-step));
  bottom: calc(var(--touch-shield-bottom) + var(--touch-shield-step));
}

#touchControls .touch-shield-3 { left: calc(50% - var(--touch-shield-step)); }
#touchControls .touch-shield-4 { left: 50%; }
#touchControls .touch-mine { left: calc(50% + var(--touch-mine-offset)); }

#touchControls [data-code="KeyW"] { --touch-color: #ffb347; }
#touchControls [data-code="KeyE"] { --touch-color: #8fe7ff; }
#touchControls [data-code="KeyY"] { --touch-color: #ffd233; }
#touchControls [data-code="KeyU"] { --touch-color: #35d6ff; }
#touchControls [data-code="KeyI"] { --touch-color: #4dee6a; }
#touchControls [data-code="KeyO"] { --touch-color: #ff8c2e; }
#touchControls [data-code="KeyP"] { --touch-color: #ff5ad1; }
#touchControls [data-code="KeyS"] {
  --touch-color: #d8e1ff;
}

#orientationNotice {
  position: fixed;
  left: 50%;
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px));
  transform: translate(-50%, 18px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(330px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid rgba(255, 140, 38, 0.55);
  border-radius: 12px;
  background: rgba(16, 13, 10, 0.94);
  box-shadow: 0 0 24px rgba(255, 140, 38, 0.12);
  color: #a59d90;
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 18;
  pointer-events: none;
}

#orientationNotice b { color: #ff8c26; letter-spacing: 1.5px; }
#orientationNotice.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media screen {
  #lobby.hidden ~ #touchControls.tablet-mode { display: block; }

  #lobby:not(.hidden) ~ #touchControls.tablet-mode.layout-preview {
    display: block;
  }

  #lobby.hidden ~ #touchControls.tablet-mode ~ #toast {
    bottom: max(180px, calc(env(safe-area-inset-bottom) + 180px));
  }

  #lobby.hidden ~ #touchControls.tablet-mode:not(.round-inactive)[data-shield-rows="2"] ~ #toast {
    bottom: max(250px, calc(env(safe-area-inset-bottom) + 250px));
  }

  #lobby.hidden ~ #touchControls.tablet-mode ~ #orientationNotice {
    bottom: max(226px, calc(env(safe-area-inset-bottom) + 226px));
  }
}

@media (orientation: portrait) and (max-width: 620px) {
  #lobby.hidden ~ #touchControls.tablet-mode:not(.round-inactive) ~ #orientationNotice.touch-only {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

@media (max-height: 420px) {
  #touchControls {
    --touch-action-size: 62px;
    --touch-shield-size: 44px;
    --touch-shield-gap: 5px;
    --touch-shield-bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
  }
  #touchControls .touch-movement { gap: 7px; }
  #touchControls .touch-movement button { width: 54px; height: 54px; }
  #touchControls .touch-shield button[data-code],
  #touchControls .touch-mine button[data-code] { border-radius: 11px; }
  #lobby.hidden ~ #touchControls.tablet-mode ~ #toast {
    bottom: max(140px, calc(env(safe-area-inset-bottom) + 140px));
  }
  #lobby.hidden ~ #touchControls.tablet-mode:not(.round-inactive)[data-shield-rows="2"] ~ #toast {
    bottom: max(190px, calc(env(safe-area-inset-bottom) + 190px));
  }
  #lobby.hidden ~ #touchControls.tablet-mode ~ #orientationNotice {
    bottom: max(176px, calc(env(safe-area-inset-bottom) + 176px));
  }
}

@media screen {
  /* Combat controls are hidden during death and podium phases, so use the
     reserved bottom band instead of leaving the toast over arena copy. */
  #lobby.hidden ~ #touchControls.tablet-mode.round-inactive ~ #toast {
    bottom: max(12px, var(--safe-bottom));
  }
}

@media (min-width: 320px) {
  /* Keep the two independent action controls in the old vertical W/E rhythm
     while leaving the fixed layout toolbar unobstructed. */
  #touchControls .touch-fire {
    bottom: max(78px, calc(env(safe-area-inset-bottom) + 78px));
  }

  #touchControls .touch-thrust {
    bottom: calc(max(78px, calc(env(safe-area-inset-bottom) + 78px)) + clamp(68px, 16vw, 82px) + 10px);
  }

  #touchControls .touch-layout-toolbar {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 4;
    display: flex;
    gap: 6px;
    pointer-events: none;
  }

  #touchControls.round-inactive .touch-layout-toolbar {
    display: none;
  }

  #touchControls .touch-layout-toolbar button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    font-size: 8px;
    letter-spacing: 0.35px;
    pointer-events: auto;
    touch-action: none;
  }

  #touchControls .touch-layout-toolbar [data-layout-action="reset"] {
    display: none;
  }

  #touchControls .touch-layout-toolbar [data-layout-action="back"],
  #touchControls .touch-layout-toolbar [data-layout-action="done"] {
    display: none;
  }

  #touchControls .touch-layout-toolbar [data-layout-action="toggle"] {
    font-size: 20px;
    line-height: 1;
  }

  #touchControls.layout-editing .touch-layout-toolbar [data-layout-action="reset"] {
    display: grid;
  }

  #touchControls.layout-preview .touch-layout-toolbar {
    right: auto;
    left: 50%;
    z-index: 6;
    display: flex !important;
    flex-direction: row;
    transform: translateX(-50%);
  }

  #touchControls.layout-preview .touch-layout-toolbar [data-layout-action="toggle"] {
    display: none;
  }

  #touchControls.layout-preview .touch-layout-toolbar [data-layout-action="back"],
  #touchControls.layout-preview .touch-layout-toolbar [data-layout-action="done"] {
    display: grid;
    width: auto;
    min-width: 104px;
    padding-inline: 9px;
  }

  #touchControls.layout-preview .touch-layout-toolbar [data-layout-action="done"] {
    min-width: 126px;
    color: #2b1608;
    background: linear-gradient(180deg, #ffb35c, #ff8c26 55%, #f06e00 100%);
    border-color: transparent;
    box-shadow: 0 3px 0 #8f4200, inset 0 1px 1px rgba(255, 255, 255, 0.5);
  }

  #touchControls.layout-editing [data-layout-cluster] {
    outline: 2px dashed rgba(255, 140, 38, 0.82);
    outline-offset: 8px;
    border-radius: 14px;
    background: rgba(16, 13, 10, 0.28);
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
  }

  #touchControls.layout-editing [data-layout-cluster].layout-resizing,
  #touchControls.layout-editing [data-layout-cluster]:focus-within {
    outline-style: solid;
  }

  #touchControls.layout-editing [data-layout-cluster] > button[data-code] {
    opacity: 1;
    filter: none;
    pointer-events: none;
  }

  #touchControls.layout-editing [data-layout-cluster] > .touch-layout-handle {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    min-width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: transparent;
    font-size: 0;
    opacity: 0;
    filter: none;
    transform: none;
    box-shadow: none;
    outline: 0;
    pointer-events: none;
  }

  #touchControls.layout-editing [data-layout-cluster].layout-dragging {
    z-index: 3;
    cursor: grabbing;
  }

  #touchControls.layout-editing [data-layout-cluster].layout-dragging > .touch-layout-handle {
    inset: calc(0px - var(--touch-layout-resize-grab));
    width: auto;
    min-width: 0;
    height: auto;
    pointer-events: auto;
    touch-action: none;
  }

  #touchControls .touch-cluster > .touch-layout-handle::before {
    content: none;
    display: none;
  }
}

@media (min-width: 320px) and (max-width: 460px) {
  /* Stack edit actions to preserve room for the compact thrust control. */
  #touchControls .touch-layout-toolbar {
    flex-direction: column;
  }

  #touchControls.layout-editing:not(.layout-preview) .touch-fire {
    bottom: max(118px, calc(env(safe-area-inset-bottom) + 118px));
  }

  #touchControls.layout-editing:not(.layout-preview) .touch-thrust {
    bottom: calc(max(118px, calc(env(safe-area-inset-bottom) + 118px)) + var(--touch-action-size) + 10px);
  }

  #touchControls.layout-preview .touch-layout-toolbar [data-layout-action="back"] {
    min-width: 96px;
  }

  #touchControls.layout-preview .touch-layout-toolbar [data-layout-action="done"] {
    min-width: 112px;
  }
}

@media (min-width: 320px) and (max-height: 420px) {
  #touchControls .touch-fire {
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
  }

  #touchControls .touch-thrust {
    bottom: calc(max(76px, calc(env(safe-area-inset-bottom) + 76px)) + var(--touch-action-size) + 10px);
  }
}

#touchControls .touch-layout-preview-banner {
  position: fixed;
  top: max(12px, calc(env(safe-area-inset-top) + 12px));
  left: 50%;
  z-index: 6;
  display: flex;
  width: min(470px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 28px));
  min-height: 54px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 9px 14px;
  transform: translateX(-50%);
  color: #c9bba6;
  background: rgba(21, 18, 14, 0.96);
  border: 1px solid rgba(255, 140, 38, 0.72);
  border-radius: 11px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.46), 0 0 20px rgba(255, 140, 38, 0.1);
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

#touchControls .touch-layout-preview-banner[hidden] {
  display: none;
}

#touchControls .touch-layout-preview-banner strong {
  color: #ff8c26;
  letter-spacing: 1px;
}

/* The authored landscape default keeps the three primary actions together at
   lower left, with paired steering immediately below. The five shields remain
   a centered 3-over-2 pad; Mine is intentionally no longer its sixth cell.
   Saved v3 positions are inline styles, so they continue to override these
   fresh/reset defaults without a cookie migration. */
@media (orientation: landscape) {
  #touchControls {
    --touch-landscape-row-left: max(18px, calc(env(safe-area-inset-left) + 5.4vw));
    --touch-landscape-row-gap: 20px;
    --touch-landscape-steering-offset: 41px;
    --touch-landscape-turn-size: clamp(58px, 14vw, 72px);
    --touch-landscape-movement-bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
    --touch-landscape-action-bottom: calc(
      var(--touch-landscape-movement-bottom) + var(--touch-landscape-turn-size) + 18px
    );
    --touch-landscape-mine-lift: 0px;
    --touch-shield-half-step: clamp(25.5px, 6vw, 35px);
    --touch-shield-center: 50.2%;
    --touch-shield-bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px));
  }

  #touchControls .touch-movement {
    left: calc(
      var(--touch-landscape-row-left) + var(--touch-action-size)
      + var(--touch-landscape-row-gap) - var(--touch-landscape-steering-offset)
    );
    bottom: var(--touch-landscape-movement-bottom);
  }

  #touchControls .touch-mine {
    right: auto;
    left: var(--touch-landscape-row-left);
    bottom: calc(
      var(--touch-landscape-action-bottom) + var(--touch-landscape-mine-lift)
    );
    transform: none;
  }

  #touchControls .touch-thrust,
  #touchControls .touch-fire {
    right: auto;
    bottom: var(--touch-landscape-action-bottom);
    flex-direction: row;
  }

  #touchControls .touch-thrust {
    left: calc(
      var(--touch-landscape-row-left) + var(--touch-action-size)
      + var(--touch-landscape-row-gap)
    );
  }

  #touchControls .touch-fire {
    left: calc(
      var(--touch-landscape-row-left) + var(--touch-action-size)
      + var(--touch-landscape-row-gap) + var(--touch-action-size)
      + var(--touch-landscape-row-gap)
    );
  }

  #touchControls .touch-shield-0 {
    left: calc(var(--touch-shield-center) - var(--touch-shield-step));
  }

  #touchControls .touch-shield-1 { left: var(--touch-shield-center); }

  #touchControls .touch-shield-2 {
    left: calc(var(--touch-shield-center) + var(--touch-shield-step));
  }

  #touchControls .touch-shield-3 {
    left: calc(var(--touch-shield-center) - var(--touch-shield-half-step));
  }

  #touchControls .touch-shield-4 {
    left: calc(var(--touch-shield-center) + var(--touch-shield-half-step));
  }
}

@media (orientation: landscape) and (max-height: 420px) {
  #touchControls {
    --touch-landscape-row-left: max(16px, env(safe-area-inset-left));
    --touch-landscape-row-gap: 10px;
    --touch-landscape-steering-offset: 27px;
    --touch-landscape-turn-size: 54px;
    --touch-landscape-mine-lift: 0px;
    --touch-shield-half-step: 24.5px;
    --touch-shield-bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #touchControls button { transition: none; }
}