/* workspace/rapidprototypes/surfacewalk/css/touch.css */
/* The touch HUD and the touch controls. index.html links this file after its style block, so these rules come later in */
/* the cascade. Every rule applies only while body has the class touch (Hud.setTouchVisible) or to the #touch overlay, */
/* which shows only then, except the 44 px settings rows for small screens. The desktop HUD is not changed here. */
:root { --good: #4fd37b; --good-text: #0b2414; }
/* Touch (js/touch.js) adds the class pressed (or held) to a button or the stick while a finger is on it. Hud adds */
/* sprint-blocked and stamina-partial to the stick, fuel-partial to Jump, and shown to the Patch and Tank pills. */
#touch { display: none; }
body.touch #touch { display: block; }
#touch, #touch * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch #view, #touch, #touch-look, #touch-stick-zone, #touch-stick, #touch-buttons, .touch-button { touch-action: none; }
#touch-look { position: fixed; top: 0; right: 0; width: 60vw; bottom: calc(170px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; }
/* The stick zone: the bottom-left quarter of the view, under the stick. A finger down anywhere in it takes the stick */
/* (Touch moves the ring there with translate). With the floating stick off, Touch adds the class off and it lets taps through. */
#touch-stick-zone { position: fixed; z-index: 5; left: 0; bottom: 0; width: 50vw; height: 45vh; pointer-events: auto; }
#touch-stick-zone.off { pointer-events: none; }
#touch-stick {
  position: fixed; z-index: 6; left: calc(24px + env(safe-area-inset-left, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 120px; height: 120px; border-radius: 50%; pointer-events: auto;
  background: radial-gradient(circle, rgba(18, 22, 34, 0.18) 0%, rgba(18, 22, 34, 0.42) 100%);
  border: 2px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 18px rgba(127, 231, 255, 0.12);
  transition: translate 0.22s ease-out, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* The ring slides to the finger in 90 ms when pressed and glides home in 220 ms when let go. */
#touch-stick.pressed, #touch-stick.held {
  transition: translate 0.09s ease-out, border-color 0.15s ease, box-shadow 0.15s ease;
  border-color: rgba(127, 231, 255, 0.75);
  box-shadow: 0 0 0 7px rgba(127, 231, 255, 0.16), 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 22px rgba(127, 231, 255, 0.25);
}
#touch-stick.sprint-blocked, #touch-stick.sprint-blocked.pressed, #touch-stick.sprint-blocked.held { border-color: rgba(150, 150, 150, 0.3); }
#touch-stick::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; display: none;
  background: conic-gradient(var(--stamina) var(--stamina-share, 100%), rgba(255, 255, 255, 0.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
#touch-stick.stamina-partial::before { display: block; }
#touch-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.75) 0%, rgba(230, 236, 248, 0.5) 55%, rgba(200, 210, 230, 0.38) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
#touch-buttons {
  position: fixed; z-index: 6; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: row; align-items: flex-end; gap: 8px; pointer-events: none;
}
.touch-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; pointer-events: none; }
.touch-row.touch-context { flex-direction: column; align-items: flex-end; gap: 6px; }
.touch-button {
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; pointer-events: auto;
  font: 700 12px var(--font); letter-spacing: 0.4px; color: var(--text); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}
body.no-blur .touch-button { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18, 22, 34, 0.72); }
.touch-round { position: relative; width: 60px; height: 60px; border-radius: 50%; font-size: 12px; }
.touch-pill { height: 48px; min-width: 48px; padding: 0 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.touch-context .touch-button { display: none; }
.touch-context .touch-button.shown { display: flex; animation: touch-appear 0.45s ease-out 1; }
@keyframes touch-appear { 0% { transform: scale(0.6); opacity: 0; } 55% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* The Run toggle shows only with Always run off (Touch adds shown); on while running (Touch adds on). */
#touch-run { display: none; }
#touch-run.shown { display: flex; }
#touch-run.on { background: rgba(127, 231, 255, 0.72); color: #06202b; text-shadow: none; border-color: rgba(127, 231, 255, 0.9); }
#touch-patch { border-color: rgba(255, 140, 90, 0.8); }
#touch-tank { border-color: rgba(233, 246, 255, 0.75); }
#touch-jump { border-color: rgba(255, 173, 92, 0.7); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 0 14px rgba(255, 173, 92, 0.25); }
#touch-scan { border-color: rgba(127, 231, 255, 0.7); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 0 14px rgba(127, 231, 255, 0.25); }
#touch-jump::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; display: none;
  background: conic-gradient(var(--jetpack) var(--fuel-share, 100%), rgba(255, 255, 255, 0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
#touch-jump.fuel-partial::before { display: block; }
.touch-button.pressed, .touch-button.held { transform: scale(0.93); background: rgba(70, 80, 108, 0.82); border-color: rgba(255, 255, 255, 0.7); }
#touch-jump.pressed, #touch-jump.held { background: rgba(240, 138, 60, 0.78); color: #2b1606; text-shadow: none; }
#touch-scan.pressed, #touch-scan.held { background: rgba(79, 198, 255, 0.72); color: #06202b; text-shadow: none; }
/* The panels the touch HUD does not use. */
body.touch #hud-planet, body.touch #hud-score, body.touch #hud-new-planet, body.touch #hud-meters, body.touch #hud-status,
body.touch #hud-target, body.touch #hud-card { display: none !important; }
/* The green pill at the top right: scan percentage, count and oxygen time (Hud.setPill). */
#hud-pill { display: none; }
body.touch #hud-pill {
  display: flex; align-items: baseline; gap: 6px; padding: 5px 11px 6px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  background: var(--good); color: var(--good-text); font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.pill-percent { font-size: 13px; font-weight: 800; }
.pill-count, .pill-oxygen { font-size: 10px; font-weight: 700; }
.pill-oxygen { padding: 1px 5px; border-radius: 999px; }
.pill-oxygen.low { color: var(--accent); background: rgba(11, 14, 22, 0.82); }
.pill-oxygen.critical { color: #fff; background: var(--danger); animation: pulse 0.9s ease-in-out infinite; }
body.touch #hud-top-buttons { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); gap: 8px; }
body.touch #hud-settings-button { min-height: 44px; min-width: 44px; padding: 9px 10px; justify-content: center; }
body.touch #hud-settings-button .settings-button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.touch #hud-fps { top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); right: auto; bottom: auto; }
/* The scan result toast under the pill (Hud.showToast), shown for 3 s. */
#hud-toast {
  display: none; position: fixed; z-index: 7; top: calc(66px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  align-items: baseline; gap: 7px; max-width: calc(100vw - 24px); padding: 5px 12px; border-radius: 999px; overflow: hidden;
  background: rgba(11, 14, 22, 0.72); pointer-events: none; white-space: nowrap;
}
body.touch #hud-toast.shown { display: flex; animation: toast-in 0.25s ease-out 1; }
@keyframes toast-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.toast-label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--good); }
.toast-name { font-size: 10px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.toast-code { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--glow); }
/* The small tag beside the aimed specimen (Hud.setTargetTag); Hud moves it with transform. */
#hud-target-tag {
  display: none; position: fixed; left: 0; top: 0; z-index: 5; padding: 3px 7px 4px; border-radius: 7px; pointer-events: none;
  background: rgba(11, 14, 22, 0.62); color: var(--text); font-size: 10px; font-weight: 700; line-height: 1.25; white-space: nowrap;
}
body.touch #hud-target-tag.shown { display: block; }
.tag-state { margin-left: 5px; color: var(--good); letter-spacing: 1px; }
.tag-state:empty { display: none; }
.tag-bar { display: none; width: 48px; height: 3px; margin-top: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
#hud-target-tag.scanning .tag-bar { display: block; }
.tag-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--glow); }
/* The warning and hint lines centred above the controls. While a warning shows, the hint is hidden. */
body.touch #hud-bottom { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 480px); gap: 4px; }
body.touch #hud-hint {
  font-size: 10px; padding: 3px 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  transition: opacity 0.6s ease;
}
body.touch #hud-hint.fading { opacity: 0; }
body.touch #hud-warning:not(:empty) ~ #hud-hint { display: none; }
body.touch #hud-warning { font-size: 11px; padding: 3px 11px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
body.touch #hud-warning.critical { font-size: 12px; }
/* The planet line and the New planet button inside the settings sheet, on touch only. */
.settings-planet, #settings-new-planet { display: none; }
body.touch .settings-planet { display: block; flex: none; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-planet b { color: var(--text); font-weight: 700; }
body.touch #settings-new-planet {
  display: block; flex: none; width: 100%; min-height: 44px; margin-top: 4px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 12px var(--font); color: #2b1606; background: linear-gradient(180deg, #ffc27f 0%, var(--accent) 55%, var(--accent-deep) 100%);
}
body.touch .settings-choices button { min-height: 44px; }
body.touch .settings-range, body.touch .settings-range input { min-height: 44px; height: 44px; }
body.touch #hud-settings-close { min-height: 44px; padding: 0 18px; }
@media (max-width: 760px), (max-height: 520px) {
  .settings-choices button, .settings-row.preset .settings-choices button { min-height: 44px; }
  .settings-range, .settings-range input { min-height: 44px; height: 44px; }
  #hud-settings-close { min-height: 44px; padding: 0 18px; }
}
/* Portrait phones: a smaller stick so the Patch and Tank pills fit left of Scan, and the warning just above the stick, */
/* low enough that a two-line warning stays in the bottom 20 percent of a 812 px tall screen. */
@media (max-width: 760px) {
  #touch-stick { width: 112px; height: 112px; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  #touch-buttons { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  body.touch #hud-bottom { bottom: calc(124px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); }
  body.touch #hud-warning { line-height: 1.25; }
  body.touch #hud-top-buttons { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); }
  body.touch #hud-toast { top: calc(62px + env(safe-area-inset-top, 0px)); }
}
/* Portrait phones only: Run (shown while Always run is off) sits above Jump, out of the row, so the Patch and Tank pills */
/* never push it onto the stick ring; while it shows, the lines end left of it. Landscape keeps Run in the row (room). */
@media (max-width: 760px) and (min-height: 521px) {
  #touch-run.shown { position: absolute; right: 0; bottom: 68px; }
  body.touch:has(#touch-run.shown) #hud-bottom {
    left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(86px + env(safe-area-inset-right, 0px)); width: auto; transform: none;
  }
}
/* Landscape phones (last, so it wins when both match): the toast under the pill at the right, the lines between the controls. */
@media (max-height: 520px) {
  #touch-stick { left: calc(20px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  #touch-buttons { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  #touch-look { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body.touch #hud-bottom { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 472px); }
  /* Patch and Tank side by side, so neither reaches above 80 percent of the height. While either shows, the lines fill */
  /* the space from the stick to the Tank pill (152 px from the left, 320 px from the right), so a warning wraps to two lines. */
  .touch-row.touch-context { flex-direction: row; align-items: flex-end; }
  body.touch:has(.touch-context .touch-button.shown) #hud-bottom {
    left: calc(152px + env(safe-area-inset-left, 0px)); right: calc(320px + env(safe-area-inset-right, 0px)); width: auto; transform: none;
  }
  body.touch #hud-top-buttons { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
  body.touch #hud-toast {
    top: calc(60px + env(safe-area-inset-top, 0px)); left: auto; right: calc(12px + env(safe-area-inset-right, 0px)); transform: none;
    max-width: calc(50vw - 24px);
  }
}