#touch-deck {
  display: none;
}

@media (orientation: portrait) and (max-width: 900px) {
  :root {
    --touch-safe-left: env(safe-area-inset-left, 0px);
    --touch-safe-right: env(safe-area-inset-right, 0px);
    --touch-safe-top: env(safe-area-inset-top, 0px);
    --touch-safe-bottom: env(safe-area-inset-bottom, 0px);
    --touch-target: 48px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    min-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: var(--touch-safe-top);
    padding-bottom: var(--touch-safe-bottom);
    padding-left: 0;
    padding-right: 0;
  }

  #game-shell {
    flex: 0 0 auto;
    width: 100vw;
    transform-origin: top center;
    transition: transform 180ms ease-out, margin-bottom 180ms ease-out;
  }

  body:is([data-scene="Fight"], [data-scene="BossFight"], [data-scene="Dojo"], [data-scene="PauseMenu"]) #game-shell {
    /* Give the central combat lane substantially more portrait height while
       retaining the authored 4:3 aspect ratio. The shell clips only the far
       arena edges; fighters and the central round HUD remain undistorted.
       Transforming instead of laying out a 128vw element also prevents mobile
       browsers from widening and then shrinking the CSS viewport. */
    transform: scale(1.28);
    margin-bottom: 21vw;
  }

  #touch-deck {
    position: relative;
    z-index: 4;
    display: block;
    flex: 0 0 auto;
    width: min(100vw, 560px);
    margin-top: 8px;
    padding: 0 max(8px, var(--touch-safe-right)) max(8px, var(--touch-safe-bottom)) max(8px, var(--touch-safe-left));
    color: #ffecc2;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .touch-deck__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin-bottom: 6px;
    padding: 4px 4px 4px 10px;
    border: 0;
    background: url("../assets/fighting/ui/full-screen-ui-components/info_ribbon.png") center / 100% 100% no-repeat;
    color: #70f98b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  .touch-deck__pause {
    min-width: 72px;
    min-height: var(--touch-target);
    margin-block: -10px;
    border: 0;
    border-radius: 0;
    background: url("../assets/fighting/ui/generated-controls/compact_idle.png") center / 100% 100% no-repeat;
    box-shadow: none;
    color: #ffecc2;
    font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.08em;
    touch-action: none;
  }

  .touch-deck__controls {
    display: grid;
    grid-template-columns: minmax(140px, 0.42fr) minmax(172px, 0.58fr);
    gap: 8px;
    align-items: stretch;
  }

  .touch-dpad {
    display: grid;
    grid-template-columns: repeat(3, minmax(var(--touch-target), 1fr));
    grid-template-rows: repeat(3, minmax(var(--touch-target), 1fr));
    gap: 4px;
  }

  .touch-key {
    position: relative;
    min-width: 0;
    min-height: var(--touch-target);
    padding: 3px;
    border: 0;
    border-radius: 0;
    background: url("../assets/fighting/ui/generated-controls/direction.png") center / 100% 100% no-repeat;
    box-shadow: none;
    color: #b8ffc5;
    font: 900 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.035em;
    text-shadow: 0 0 8px rgba(57, 255, 97, 0.35);
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  .touch-key:focus-visible,
  .touch-deck__pause:focus-visible {
    outline: 2px solid #ffcc43;
    outline-offset: 2px;
  }

  .touch-key.is-active,
  .touch-key:active,
  .touch-deck__pause.is-active,
  .touch-deck__pause:active {
    transform: translateY(3px);
    filter: brightness(1.28) saturate(1.18);
    box-shadow: none;
    color: #fff8e9;
  }

  .touch-key--up {
    grid-column: 2;
    grid-row: 1;
  }

  .touch-key--left {
    grid-column: 1;
    grid-row: 2;
  }

  .touch-key--block {
    grid-column: 2;
    grid-row: 2;
    background-image: url("../assets/fighting/ui/generated-controls/block.png");
    color: #8ae9ff;
    font-size: 9px;
  }

  .touch-key--right {
    grid-column: 3;
    grid-row: 2;
  }

  .touch-key--down {
    grid-column: 2;
    grid-row: 3;
  }

  .touch-actions {
    display: grid;
    gap: 6px;
  }

  .touch-actions--fight {
    grid-template-columns: repeat(3, minmax(50px, 1fr));
    grid-template-rows: repeat(2, minmax(72px, 1fr));
  }

  .touch-actions--menu {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(70px, 1fr));
  }

  .touch-key--strike {
    background-image: url("../assets/fighting/ui/generated-controls/strike.png");
    color: #ff9ceb;
    text-shadow: 0 0 8px rgba(255, 45, 214, 0.45);
  }

  .touch-key--power {
    background-image: url("../assets/fighting/ui/generated-controls/power.png");
    color: #ffe07f;
    text-shadow: 0 0 8px rgba(255, 204, 67, 0.42);
  }

  .touch-key--super {
    background-image: url("../assets/fighting/ui/generated-controls/power.png");
    color: #fff1c8;
    text-shadow: 0 0 8px rgba(255, 67, 84, 0.58);
  }

  .touch-key--select {
    background-image: url("../assets/fighting/ui/generated-controls/wide_selected.png");
    color: #ffe383;
    font-size: 13px;
  }

  .touch-key--back {
    background-image: url("../assets/fighting/ui/generated-controls/wide_idle.png");
    color: #ffecc2;
    font-size: 12px;
  }

  body:is([data-scene="Fight"], [data-scene="BossFight"], [data-scene="Dojo"]) .touch-actions--menu,
  body:not([data-scene="Fight"]):not([data-scene="BossFight"]):not([data-scene="Dojo"]) .touch-actions--fight {
    display: none;
  }

  body:not([data-scene="Fight"]):not([data-scene="BossFight"]):not([data-scene="Dojo"]):not([data-scene="PauseMenu"]) .touch-deck__pause {
    visibility: hidden;
  }
}

@media (orientation: portrait) and (max-width: 360px),
  (orientation: portrait) and (max-height: 680px) {
  :root {
    --touch-target: 44px;
  }

  #touch-deck {
    margin-top: 5px;
  }

  .touch-deck__topline {
    min-height: 30px;
    margin-bottom: 4px;
  }

  .touch-deck__controls {
    grid-template-columns: minmax(140px, 0.47fr) minmax(158px, 0.53fr);
    gap: 6px;
  }

  .touch-dpad {
    grid-template-rows: repeat(3, minmax(var(--touch-target), 1fr));
    gap: 3px;
  }

  .touch-actions--fight {
    grid-template-rows: repeat(2, minmax(66px, 1fr));
    gap: 4px;
  }

  .touch-key {
    min-height: var(--touch-target);
    font-size: 10px;
  }
}

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