/* #525: small neutral glass surfaces, with legible fallback when backdrop blur is unavailable. */
:root { --hud-glass: rgba(24,30,36,.68); --hud-edge: rgba(255,255,255,.32); --hud-blur: 2px; }
body :is(#hud,.hud-controls) .hud-button, body.touch #hud .hud-button, .hud-button {
  color: #fff; background: var(--hud-glass); border: 1px solid var(--hud-edge); opacity: 1;
  min-height: 44px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(var(--hud-blur)); -webkit-backdrop-filter: blur(var(--hud-blur));
}
.hud-icon { width: 22px; height: 22px; vertical-align: middle; pointer-events: none; }
.hud-icon * { pointer-events: none; }
#hud .hud-icon-button, body.touch #hud .hud-icon-button, .hud-icon-button { min-width: 48px; min-height: 48px; padding: 10px; }
.hud-indicator-icon .hud-icon { width: 18px; height: 18px; }
#hud .hud-button.on, #hud .hud-button[aria-pressed=true], body :is(#hud,.hud-controls) .hud-button.on, body :is(#hud,.hud-controls) .hud-button[aria-pressed=true], #choices button.sel {
  background: rgba(90,98,105,.9); border-color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
#hud .hud-button:active, body.touch #hud .hud-button:active, body :is(#hud,.hud-controls) .hud-button:active { background: rgba(52,60,67,.9); border-color: #fff; }
.hud-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#hud .hud-button:disabled, body :is(#hud,.hud-controls) .hud-button:disabled { opacity: .38; cursor: default; }
.hud-button[hidden] { display: none !important; }
#choices button, body.touch #choices button { color: #fff; background: var(--hud-glass); border: 1px solid var(--hud-edge); opacity: 1; min-height: 44px; }
#choices button:disabled, #choices button.no { opacity: .38; }
@media (hover:hover) { #hud .hud-button:hover, body :is(#hud,.hud-controls) .hud-button:hover { border-color: rgba(255,255,255,.7); background: rgba(42,49,55,.85); } }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) { :root { --hud-glass: rgba(24,30,36,.78); } }
body.hud-no-blur .hud-button, body.hud-no-blur #choices button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(24,30,36,.78) !important; }
#cal-panel { max-height: calc(100dvh - 32px); max-width: calc(100vw - 24px); overflow: auto; box-sizing: border-box; }
#cal-panel .days { grid-template-columns: repeat(7,44px); }
#cal-panel .days button { min-height: 44px; }

/* #528: north follows the world; upright letters stay legible as the rose turns. */
:root { --compass-layout-top: var(--badge-top); --compass-layout-size: var(--badge-height); --lives-gap: 12px; } /* #716: spacing is a visual guess. */
#compass { --compass-angle: 0deg; position: relative; top: auto; left: auto; width: var(--compass-layout-size); height: var(--compass-layout-size); transform: none; border-radius: 50%; box-sizing: border-box; color: #fff; background: var(--hud-glass); border: 1px solid var(--hud-edge); box-shadow: 0 2px 8px rgba(0,0,0,.2); pointer-events: none; z-index: 2; }
#lives { line-height: 20px; top: calc(var(--compass-layout-top) + var(--compass-layout-size) + var(--lives-gap)); left: var(--compass-center-x, 50%); }
#compass[hidden] { display: none; }
.compass-rose { display: block; width: 100%; height: 100%; transform: rotate(var(--compass-angle)); }
.compass-north { fill: #f46b70; stroke: #391b20; stroke-width: .65; }
.compass-south { fill: rgba(255,255,255,.65); }
.compass-letter { position: absolute; left: 50%; top: 50%; font: 600 10px/1 system-ui,sans-serif; text-shadow: 0 1px 2px #000; transform: translate(-50%,-50%) rotate(calc(var(--compass-angle) + var(--cardinal))) translateY(calc(var(--compass-layout-size) * -.37)) rotate(calc(0deg - var(--compass-angle) - var(--cardinal))); }

/* #707: shared badge shell and half-cell width module. Weather + temperature form an undivided pair;
   the clock spans that pair above it (#970). Visitors use one full-height cell, points two, and every shortcut one. */
:root {
  --badge-bg: rgba(20,35,45,.55); --badge-radius: 8px; --badge-edge: 1px solid rgba(255,255,255,.18);
  --badge-shadow: 0 2px 6px rgba(0,0,0,.18); --badge-divider: 1px solid rgba(255,255,255,.22);
  --badge-cell: 48px; --badge-height: calc(var(--badge-cell) + 2px); --badge-unit: calc(var(--badge-cell) / 2); --badge-inset: 4px;
  --badge-top: calc(16px + var(--st)); --hud-badge-bottom: calc(var(--badge-top) + var(--badge-cell) + 10px);
}
#hud #score, #hud #hud-top {
  position: fixed; top: var(--badge-top); height: var(--badge-height); padding: 0; margin: 0;
  color: #fff; background: var(--badge-bg); border: var(--badge-edge); border-radius: var(--badge-radius);
  box-shadow: var(--badge-shadow); box-sizing: border-box; overflow: hidden;
  backdrop-filter: blur(var(--hud-blur)); -webkit-backdrop-filter: blur(var(--hud-blur));
}
#hud #score {
  left: calc(var(--badge-inset) + var(--sl)); display: grid;
  grid-template-columns: var(--badge-unit) calc(var(--badge-cell) + 8px) calc(var(--badge-cell) * 2) var(--badge-cell);
  grid-template-rows: repeat(2, var(--badge-unit)); gap: 0; pointer-events: none; font: 13px/1.1 system-ui,sans-serif;
}
body.touch #hud #score { grid-template-columns: var(--badge-unit) calc(var(--badge-cell) + 8px) calc(var(--badge-cell) * 2) var(--badge-cell) var(--badge-cell); }
#hud #score > :is(#weather,#temp,#level,.score-main,#presence) {
  height: var(--badge-cell); min-width: 0; margin: 0; padding: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; font-variant-numeric: tabular-nums;
}
#hud #score > :is(#weather,#temp,#level) { height: var(--badge-unit); }
#hud #score > :is(#weather,#temp) { border-top: var(--badge-divider); }
#hud #score #weather { grid-column: 1; grid-row: 2; }
#hud #score #temp { grid-column: 2; grid-row: 2; font-size: 16px; font-weight: 600; }
#hud #score #level { grid-column: 1 / 3; grid-row: 1; font-size: 13px; font-weight: 600; }
#hud #score .score-main { grid-column: 3; grid-row: 1 / 3; position: relative; flex-direction: column; gap: 2px; border-left: var(--badge-divider); }
#hud #score .label { font-size: 10px; font-weight: 500; opacity: .75; }
#hud #score .score-val { font-size: calc(var(--badge-cell) * .38); font-weight: 750; }
#hud #score .plus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box; white-space: normal; text-align: center; font-size: calc(var(--badge-cell) * .38); font-weight: 700; color: #ffd76a; }
#hud #score .plus.minus { font-size: 10px; line-height: 1.15; color: #ff6b5e; }
#hud #score .score-main:has(.plus:not(:empty)) > :is(.label,.score-val) { visibility: hidden; }
#hud #score #presence { grid-column: 4; grid-row: 1 / 3; gap: 4px; border-left: var(--badge-divider); font-size: 11px; opacity: .85; }
#hud #presence .presence-count { font-size: 12px; font-weight: 600; }
#hud #score #terminal-btn { display: none; }
#hud-right { position: fixed; top: var(--badge-top); right: calc(var(--badge-inset) + var(--sr)); display: grid; grid-template-columns: var(--badge-height) max-content; gap: var(--badge-inset); align-items: start; }
#hud #hud-top { position: static; display: flex; grid-column: 2; }
body #hud #hud-top > .hud-button, body.touch #hud #score #terminal-btn {
  display: flex; align-items: center; justify-content: center; position: static; flex: none;
  width: var(--badge-cell); height: var(--badge-cell); min-width: var(--badge-cell); min-height: var(--badge-cell);
  padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1;
  backdrop-filter: none; -webkit-backdrop-filter: none; touch-action: manipulation;
}
body.touch #hud #score #terminal-btn { grid-column: 5; grid-row: 1 / 3; border-left: var(--badge-divider); pointer-events: auto; }
body #hud #hud-top > .hud-button + .hud-button { border-left: var(--badge-divider); }
#hud :is(#score,#hud-top) .hud-icon { width: 22px; height: 22px; }
body #hud #hud-top > .hud-button:is(.on,[aria-pressed=true]) { background: rgba(255,255,255,.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
body #hud #hud-top > .hud-button:active, body.touch #hud #score #terminal-btn:active { background: rgba(255,255,255,.4); }
body #hud #hud-top > .hud-button:focus-visible, body.touch #hud #score #terminal-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
body #hud #hud-top > .hud-button:disabled { opacity: .38; cursor: default; }
body.hud-no-blur #hud :is(#score,#hud-top) { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(24,30,36,.78); }
body.hud-no-blur #hud #hud-top > .hud-button, body.hud-no-blur.touch #hud #score #terminal-btn { background: transparent !important; }
body.hud-no-blur #hud #hud-top > .hud-button:is(.on,[aria-pressed=true]) { background: rgba(255,255,255,.26) !important; }
body.hud-no-blur #hud #hud-top > .hud-button:active { background: rgba(255,255,255,.4) !important; }
@media (max-width: 600px) {
  :root { --badge-cell: 44px; }
  /* Visual fit for a 568px landscape viewport with two 44px safe areas: all data
     remains visible, while interactive cells keep their full 44px target. */
  /* #902: leave room for the rendered temperature/clock/score plus their dividers;
     redistribute only noninteractive columns, preserving 44px shortcuts and safe-area edges. */
  body.touch #hud #score { grid-template-columns: 18px 48px 72px 26px var(--badge-cell); }
  #hud #score #temp { font-size: 14px; }
  #hud #score #weather .hud-icon { width: 18px; height: 18px; }
  #hud #score #level { font-size: 12px; }
  #hud #score .score-val, #hud #score .plus:not(.minus) { font-size: calc(var(--badge-cell) * .35); }
  #hud #score #presence { gap: calc(var(--badge-inset) / 2); }
  /* Keep even three-digit FPS legible inside the compact lower half-cell. */
  #hud #score #presence .presence-fps { flex-direction: column; gap: 1px; }
  #hud #score .plus.minus { font-size: 9.5px; line-height: 1.05; padding: 2px; }
}
/* #1057: a stable right-thumb cluster; sizing/spacing are web layout choices,
   informed by Apple game-control guidance and Android's 48dp recommendation.
   CSS pixels are not a measurement of physical dp. See interactions.md.
   #1087: sizes follow the screen's short side (TOUCH in config.js, written by touch.js as
   --touch-button / --touch-gap); the fallbacks are the old fixed 56/48 px.
   #1089: a thumb arc. The primary action is a pill in the lower-right corner, where a landscape right
   thumb rests; jump sits straight above its right end and crouch beside jump (ring 1, a short flick).
   Less frequent buttons fan out on a second ring that curves down to the left of the pill, so nothing
   needs a stretch towards the screen centre. Every button has a fixed named slot (enabling equipment
   never moves another button); the gaps between slots pass through to the right-side look input. */
#touch-controls { display: contents; }
body.touch #touch-controls {
  --touch-size: var(--touch-button, 56px); --touch-row: calc(var(--touch-size) + 8px);
  --tg: var(--touch-gap, 8px); --tu: calc(var(--touch-size) + var(--tg));
  /* The primary pill, right-anchored: wide enough for two-line labels and two choice columns, narrowed (never below
     2.5 buttons) so the whole cluster stays inside the right 55 % of a small phone. */
  --pill-w: clamp(calc(var(--touch-size) * 2.5 + var(--tg)), calc(55vw - var(--sr) - 16px - 2 * var(--touch-size) - 3 * var(--tg) - 8px), calc(var(--touch-size) * 3.25 + var(--tg)));
  --band: var(--touch-row);                                               /* the corner band: pill or choices */
  --c0: calc((var(--touch-row) - var(--touch-size)) / 2);                 /* above the pill's rounded right end */
  --c1: calc(var(--c0) + var(--tu));
  --c2: calc(var(--pill-w) + var(--tg));                                  /* just left of the pill */
  --c3: calc(var(--c2) + var(--tu));
  --r1: calc(var(--band) + var(--tg)); --r2: calc(var(--r1) + var(--tu)); /* rows above the band */
  --side: calc(var(--touch-row) / 2);                                     /* beside the pill, raised half a pill */
  position: fixed; right: calc(16px + var(--sr)); bottom: calc(16px + var(--sb));
  display: block; width: 0; height: 0; pointer-events: none;
}
body.touch #touch-controls > button {
  position: absolute; inset: auto; width: var(--touch-size); height: var(--touch-size);
  min-width: 48px; min-height: 48px; padding: 0; margin: 0; pointer-events: auto;
  border-radius: 50%; touch-action: none; display: grid; place-items: center;
  background: rgba(24,30,36,.52); border-color: rgba(255,255,255,.38);
  box-shadow: 0 2px 10px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.08);
  transition: transform .09s ease-out, background-color .15s, border-color .15s, color .15s;
}
body.touch #touch-controls > button[hidden] { display: none; }
body.touch #touch-controls > button .hud-icon { width: calc(var(--touch-size) * .42); height: calc(var(--touch-size) * .42); }
/* Soft press: the button gives a little under the thumb. */
body.touch #touch-controls > button.hud-button:active { transform: scale(.93); background: rgba(70,80,88,.82); border-color: #fff; }
/* Toggled (crouching, measuring): a light face with a dark symbol reads at a glance, day and night. */
body.touch #touch-controls > button.hud-button:is(.on, [aria-pressed=true]) { background: rgba(255,255,255,.88); color: #18232b; border-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.22); }
/* Ring 1: the thumb's short flick up from the pill. */
body.touch #touch-controls #jump-btn { right: var(--c0); bottom: var(--r1); }
body.touch #touch-controls #crouch-btn { right: var(--c1); bottom: var(--r1); }
body.touch #touch-controls #stand-btn {
  right: var(--c2); bottom: var(--side); padding: 4px; border-radius: 16px; font-size: 13px;
}
/* Ring 2: further out along the same arc, curving down past the pill's left end. */
body.touch #touch-controls #measure-btn { right: var(--c0); bottom: var(--r2); }
body.touch #touch-controls #power-btn { right: var(--c1); bottom: var(--r2); }
body.touch #touch-controls #turn-btn { right: var(--c2); bottom: calc(var(--side) + var(--tu)); }
body.touch #touch-controls #bell-btn { right: var(--c2); bottom: calc(var(--side) + var(--tu)); } /* the bicycle bell (#1302): the turn button's slot, never shown together (riding holds nothing to turn) */
body.touch #touch-controls #jet-down { right: var(--c3); bottom: 0; }
body.touch #touch-controls #jet-up { right: var(--c3); bottom: var(--tu); }
body.touch #touch-controls #web-btn { right: var(--c3); bottom: calc(2 * var(--tu)); }
/* The primary action: the same neutral glass (#525) as a pill with a brighter edge, under the resting thumb. */
body.touch #touch-controls #action {
  right: 0; bottom: 0; width: var(--pill-w); height: var(--touch-row); border-radius: calc(var(--touch-row) / 2);
  padding: 0 14px; font-size: 15px; white-space: normal; overflow-wrap: break-word; line-height: 1.15;
  background: var(--hud-glass); border-color: rgba(255,255,255,.62);
  box-shadow: 0 3px 12px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.14); text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body.touch #touch-controls #action.hud-button:active { transform: scale(.97); }
/* Action choices take the corner band from the right edge to the stand column, two columns with bounded
   scrolling; the slots above the band (and stand/turn beside it) move up by the band's extra height. */
body.touch #touch-controls:has(#choices:not([hidden]) > button:nth-of-type(3)) {
  --band: clamp(var(--touch-row), calc(100dvh - 2 * var(--touch-size) - 2 * var(--tg) - 86px - var(--st) - var(--sb)), calc(2 * var(--touch-size) + var(--tg)));
}
body.touch #touch-controls #choices {
  position: absolute; inset: auto; right: 0; bottom: 0; transform: none;
  width: var(--pill-w); height: var(--band); box-sizing: border-box;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(var(--touch-size), auto); align-items: stretch;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 0; gap: 8px; pointer-events: auto;
}
body.touch #touch-controls #choices[hidden] { display: none; }
body.touch #touch-controls #choices button {
  min-height: var(--touch-size); min-width: 48px; box-sizing: border-box; padding: 8px; margin: 0; border-radius: 16px;
  font-size: 14px; white-space: normal; overflow-wrap: break-word; line-height: 1.2;
  touch-action: pan-y;
}
/* Short landscape: a slightly tighter corner. */
@media (max-height: 375px) {
  body.touch #touch-controls { --touch-size: var(--touch-button, 48px); bottom: calc(12px + var(--sb)); right: calc(12px + var(--sr)); }
  body.touch #touch-controls #choices button { font-size: 13px; padding: 4px; }
}
/* #1087: one calm glass family for the walking stick and the right-thumb cluster. touch.js writes the
   short-side sizes from TOUCH (config.js) to --stick-travel / --touch-button / --touch-gap; the fallbacks
   below are the old fixed sizes for pages that never call setupTouch. */
:root { --stick-travel: 56px; --stick-base: calc(var(--stick-travel) * 2 + 12px); --stick-knob: calc(var(--stick-travel) * .9); }
.stick-face {
  position: fixed; width: var(--stick-base); height: var(--stick-base); margin: calc(var(--stick-base) / -2) 0 0 calc(var(--stick-base) / -2);
  box-sizing: border-box; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(24,30,36,.18) 0 38%, rgba(24,30,36,.44) 100%);
  border: 1.5px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 12px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.08);
  backdrop-filter: blur(var(--hud-blur, 2px)); -webkit-backdrop-filter: blur(var(--hud-blur, 2px));
}
.stick-face[hidden] { display: none; }
/* Four quiet chevrons: "drag this way to walk". */
.stick-face::after {
  content: ''; position: absolute; inset: 7%; border-radius: 50%; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M43 9l7-6 7 6M43 91l7 6 7-6M9 43l-6 7 6 7M91 43l6 7-6 7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* The rim lights up toward where you push; full and bright while sprinting. */
#stick::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: 50%;
  background: conic-gradient(from calc(var(--stick-a, 0deg) - 50deg), transparent 0deg, rgba(255,255,255,var(--stick-m, 0)) 35deg 65deg, transparent 100deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.stick-face .knob {
  position: absolute; left: 50%; top: 50%; width: var(--stick-knob); height: var(--stick-knob);
  margin: calc(var(--stick-knob) / -2) 0 0 calc(var(--stick-knob) / -2); box-sizing: border-box; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.96), rgba(222,228,232,.86) 72%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 3px 10px rgba(0,0,0,.3), inset 0 -2px 5px rgba(24,30,36,.14);
}
.stick-face .knob::after { content: ''; position: absolute; inset: 31%; border-radius: 50%; border: 1.5px solid rgba(24,30,36,.2); }
#stick.sprint { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 2px 12px rgba(0,0,0,.2); }
#stick.sprint::before { --stick-m: .95; }
#stick.sprint .knob { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.28), 0 3px 10px rgba(0,0,0,.3); }
/* Idle hint: where the walking thumb goes; the real stick still floats to wherever the thumb lands. */
#stick-hint {
  left: calc(var(--sl) + 20px + var(--stick-base) / 2); top: calc(100dvh - var(--sb) - 20px - var(--stick-base) / 2);
  opacity: var(--stick-hint-opacity, .5); background: rgba(24,30,36,.16); box-shadow: none; transition: opacity .25s;
}
#stick-hint .knob { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.7); box-shadow: none; }
#stick-hint .knob::after { border-color: rgba(255,255,255,.55); }
body:not(.touch) #stick-hint { display: none; }
/* #1090 (part 4 of #1082): own layout editor over the paused HUD (src/touchlayout.js). Every control shows with a
   dashed outline (the selected one solid), the rest of the HUD hides but keeps its boxes for the top-badge clamp, and a
   compact bar at the top holds the selected control's size/opacity, the mirror toggle, reset, cancel and save. */
body.touch-editing #hud { display: block !important; }
body.touch-editing #overlay { display: none !important; }
body.touch-editing #hud > :not(#touch-controls):not(#stick-hint):not(#hud-right),
body.touch-editing #hud-right, body.touch-editing #choices, body.touch-editing #stick { visibility: hidden !important; }
body.touch-editing #touch-controls > button.hud-button[hidden], body.touch-editing #touch-controls > button[hidden] { display: grid !important; }
body.touch-editing #stick-hint[hidden] { display: block; }
body.touch-editing #touch-controls > button, body.touch-editing #stick-hint { outline: 2px dashed rgba(255,255,255,.75); outline-offset: 3px; }
body.touch-editing #touch-controls > button.te-sel, body.touch-editing #stick-hint.te-sel { outline: 3px solid #ffd76a; }
body.touch-editing #touch-controls #action { color: transparent; text-shadow: none; }
body.touch-editing #touch-controls #action::after { content: 'Handling'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 600 15px/1.1 system-ui,sans-serif; }
#touch-edit { position: fixed; inset: 0; z-index: 60; touch-action: none; background: rgba(10,16,22,.18); }
#touch-edit[hidden] { display: none; }
#touch-edit .te-bar {
  position: absolute; top: calc(6px + var(--st)); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 16px - var(--sl) - var(--sr)); box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 6px 8px;
  color: #fff; background: rgba(20,30,38,.86); border: 1px solid rgba(255,255,255,.3); border-radius: 12px;
  font: 13px/1.2 system-ui,sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: opacity .15s;
}
#touch-edit.te-dragging .te-bar { opacity: .3; pointer-events: none; }
#touch-edit .te-bar button {
  min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12); color: #fff; font: 600 13px/1 system-ui,sans-serif; touch-action: manipulation;
}
#touch-edit .te-bar .te-save { background: #fff; color: #18232b; border-color: #fff; }
#touch-edit .te-name { min-width: 7em; text-align: center; color: #ffd76a; }
#touch-edit .te-slider, #touch-edit .te-mirror { display: flex; align-items: center; gap: 6px; min-height: 40px; }
#touch-edit .te-slider input { width: 96px; accent-color: #ffd76a; }
#touch-edit .te-mirror input { width: 20px; height: 20px; accent-color: #ffd76a; }
#touch-edit .te-help {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%,-50%); margin: 0; max-width: min(420px, 70vw);
  padding: 8px 12px; border-radius: 10px; background: rgba(20,30,38,.7); color: #fff; font: 14px/1.35 system-ui,sans-serif;
  text-align: center; pointer-events: none;
}
#touch-edit .te-help[hidden] { display: none; }
@media (max-height: 420px) and (orientation: landscape) {
  #touch-edit .te-bar { gap: 4px 6px; padding: 4px 6px; }
  #touch-edit .te-bar button { min-height: 36px; padding: 0 9px; }
  #touch-edit .te-slider, #touch-edit .te-mirror { min-height: 36px; }
  #touch-edit .te-slider input { width: 78px; }
  #touch-edit .te-name { min-width: 0; }
}