/* Touch controls (src/ui/input/touch-controls.js): a stick, a thumb's worth of buttons, and a top row. */
.touch-controls {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  font: 600 13px/1 system-ui, sans-serif;
}
.touch-controls[hidden] { display: none; }
.touch-controls > * { pointer-events: auto; }

.touch-top {
  position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.touch-top-button {
  min-width: 64px; min-height: 36px; padding: 0 10px; border-radius: 18px;
  border: 1px solid rgba(255, 244, 214, .45); background: rgba(24, 22, 18, .62); color: #f6eedb;
  font: inherit; letter-spacing: .02em;
}
.touch-top-button:active { background: rgba(120, 96, 52, .8); }

.touch-stick {
  position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom));
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, .08) 0 55%, rgba(255, 244, 214, .16) 56% 100%);
  border: 2px solid rgba(255, 244, 214, .4); touch-action: none;
}
.touch-knob {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(246, 238, 219, .72); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); pointer-events: none;
}

.touch-actions {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(74px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; justify-items: center;
}
.touch-button {
  width: 62px; height: 62px; border-radius: 50%; padding: 0;
  border: 2px solid rgba(255, 244, 214, .5); background: rgba(24, 22, 18, .58); color: #f6eedb;
  font: inherit; touch-action: none;
}
.touch-button.down, .touch-button.on { background: rgba(160, 118, 48, .82); border-color: #f2d28c; }
.touch-attack { background: rgba(122, 38, 32, .66); }
.touch-interact { background: rgba(38, 86, 70, .66); }

/* In a conversation or a menu only the top row stays: the rest would sit on its buttons. */
.touch-controls.touch-away .touch-stick, .touch-controls.touch-away .touch-actions { display: none; }


/* The page around them, on a touch screen: the keyboard's legend means nothing there, the health
   panel moves up off the stick, and the satchel row stays reachable under the buttons. */
body.touch #controls { display: none; }
body.touch #vitals { bottom: 176px; }

/* **A phone** (the user, 26 September 2026: "The screen is too busy... so I can still see the
   gameplay"), held either way up: the title card, compass, objectives, side quest, keyboard legend
   and footer all step out, health and wind are a strip, the chart is small, and the Quest button
   brings the objectives back over the view while it is on. */
@media (max-width: 700px), (max-height: 520px) {
  body.touch #location, body.touch #compass, body.touch #quest, body.touch #side-quest,
  body.touch #bottom-right, body.touch #controls { display: none; }

  body.touch .touch-top { top: max(6px, env(safe-area-inset-top)); gap: 5px; }
  body.touch .touch-top-button { min-width: 0; min-height: 34px; padding: 0 9px; font-size: 12px; }
  .touch-top-button.on { background: rgba(160, 118, 48, .82); border-color: #f2d28c; }

  body.touch #vitals { left: 8px; bottom: auto; width: 122px; padding: 6px 8px 7px; border-radius: 6px; }
  body.touch #vitals > :not(.meter) { display: none; }
  body.touch #vitals .meter { margin: 3px 0; }
  body.touch #map-wrap { right: 8px; width: 84px; height: 84px; }
  body.touch .map-caption { top: 90px; font-size: 9px; letter-spacing: .1em; text-shadow: 0 1px 4px #0009; }

  body.touch #interaction { bottom: auto; top: 40%; padding: 8px 12px; font-size: 13px; max-width: 90vw; }
  body.touch #toast { top: 30%; width: 86vw; max-width: 86vw; font-size: 17px; }
  body.touch #dialogue { bottom: 6px; width: calc(100% - 12px); padding: 12px 14px; max-height: 58vh; overflow: auto; }
  body.touch .panel { padding: 16px 14px; max-height: calc(100vh - 56px); }
  body.touch #testing { width: calc(100vw - 12px); }
  /* The lesson card (the first fight's hits, guard and dodge) goes up under the strip, out of the thumbs' way. */
  body.touch #lesson { bottom: auto; left: 8px; right: 8px; width: auto; transform: none; padding: 8px 11px 9px; }
  body.touch #lesson p { font-size: 12px; line-height: 1.4; margin-top: 3px; }
  body.touch #practice-progress { gap: 12px; padding-top: 6px; margin-top: 6px; font-size: 11px; }
  body.touch.touch-info #lesson { display: none; }

  body.touch.touch-info #quest, body.touch.touch-info #side-quest { display: block; }
  body.touch.touch-info #quest { left: 8px; right: 8px; width: auto; max-width: none; max-height: 34vh; overflow: auto;
    padding: 10px 12px; background: #173b31eb; border-radius: 6px; pointer-events: auto; }
  body.touch.touch-info #side-quest { left: 8px; right: 8px; width: auto; max-width: none; max-height: 22vh; overflow: auto; }

  .touch-stick { width: 112px; height: 112px; bottom: max(14px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); }
  .touch-knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .touch-actions { bottom: max(14px, env(safe-area-inset-bottom)); right: max(10px, env(safe-area-inset-right)); gap: 6px;
    grid-template-columns: repeat(3, 52px); }
  .touch-button { width: 52px; height: 52px; font-size: 12px; }
}
/* Upright: the top row spans the screen and the strip and the chart sit under it. */
@media (max-width: 700px) and (min-height: 521px) {
  body.touch .touch-top { left: 6px; right: 6px; transform: none; justify-content: center; }
  body.touch .touch-top-button { flex: 1 1 0; max-width: 92px; }
  body.touch #vitals, body.touch #map-wrap { top: 50px; }
  body.touch #lesson { top: 158px; }
  body.touch.touch-info #quest { top: 158px; }
  body.touch.touch-info #side-quest { top: calc(166px + 34vh); max-height: 18vh; }
  /* While the objectives are up, what F would do waits just over the buttons instead of on them. */
  body.touch.touch-info #interaction { top: auto; bottom: 190px; }
}
/* Sideways: the row stays in the middle and the strip and chart take the top corners. */
@media (max-height: 520px) {
  body.touch #vitals, body.touch #map-wrap { top: 8px; }
  body.touch #lesson { top: 50px; left: 140px; right: 100px; }
  body.touch.touch-info #quest { top: 50px; left: 140px; right: 100px; max-height: calc(100vh - 170px); }
  body.touch.touch-info #side-quest { top: auto; bottom: 14px; left: 140px; right: 240px; max-height: 90px; }
  body.touch.touch-info #interaction { top: auto; bottom: 16px; }
  .touch-actions { grid-template-columns: repeat(4, 52px); }
}