/* HUD layout, big map screen and touch controls. Loaded after style.css and menu.css (uses their tokens). */
:root {
  --hl: max(14px, env(safe-area-inset-left));
  --hr: max(14px, env(safe-area-inset-right));
  --ht: max(10px, env(safe-area-inset-top));
  --hb: max(12px, env(safe-area-inset-bottom));
  --mini: 150px;
  --hpanel: rgba(8, 11, 19, 0.64);
  --good: #9be37a;
  --bad: #ff5a4f;
}

/* ---------- top left: objective and mission countdown ---------- */
#hudTL {
  position: absolute;
  top: var(--ht);
  left: var(--hl);
  width: min(420px, 34vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#hudTL #obj {
  position: static;
  max-width: 100%;
  padding: 8px 14px 10px 12px;
  background: var(--hpanel);
  border-left: 4px solid var(--acc);
  border-radius: 2px 8px 8px 2px;
  font-size: 14px;
  line-height: 1.38;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
#hudTL #obj b {
  font-size: 21px;
  line-height: 1.05;
  margin-bottom: 2px;
}
#hud #timer {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 14px 0 12px;
  background: var(--hpanel);
  border-left: 4px solid #fff;
  border-radius: 2px 8px 8px 2px;
  font-size: 34px;
  line-height: 1.1;
  text-shadow: none;
}
#hud #timer:empty {
  display: none;
}
#hud #timer::before {
  content: 'Čas mise';
  font: 800 10px Inter, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 3px;
}
#hud #timer.warn {
  border-left-color: var(--acc);
  color: var(--acc);
}
#hud #timer.low {
  border-left-color: var(--bad);
  color: var(--bad);
  animation: hudBeat 1s ease-in-out infinite;
}

/* ---------- top centre: the hour ---------- */
#clock {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 122px;
  padding: calc(env(safe-area-inset-top) + 5px) 18px 5px;
  text-align: center;
  background: linear-gradient(rgba(8, 11, 19, 0.84), rgba(8, 11, 19, 0.6));
  border-bottom: 2px solid rgba(255, 210, 63, 0.6);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
#clock small {
  display: block;
  font: 800 9.5px Inter, sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  padding-left: 0.3em;
  white-space: nowrap;
}
#clock b {
  display: block;
  margin-top: 1px;
  font-family: var(--disp);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
}
#clock.urgent {
  border-bottom-color: var(--bad);
}
#clock.urgent small {
  color: #ffb3ad;
}
#clock.urgent b {
  color: var(--bad);
  animation: hudBeat 1s ease-in-out infinite;
}
#clock.crit b {
  font-size: 48px;
}
#clock.done b {
  color: var(--good);
  font-size: 30px;
}
@keyframes hudBeat {
  50% {
    transform: scale(1.08);
  }
}

/* ---------- top right: money, goal, stars, notifications ---------- */
#topright {
  top: var(--ht);
  right: var(--hr);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#goal {
  display: none;
}
#mtick {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--disp);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow:
    0 0 2px #000,
    2px 2px 0 #000;
  transition:
    max-height 0.2s ease,
    opacity 0.25s ease;
}
#mtick.on {
  max-height: 28px;
  opacity: 1;
}
#mtick.up {
  color: var(--good);
}
#mtick.down {
  color: var(--bad);
}
#goalbar {
  width: 176px;
  margin: 1px 0 3px;
  font: 700 12px Inter, sans-serif;
  color: #fff;
  text-align: right;
  text-shadow:
    0 0 3px #000,
    1px 1px 0 #000;
}
#goalbar span {
  display: block;
  white-space: nowrap;
}
#goalbar i {
  display: block;
  height: 6px;
  margin-top: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  overflow: hidden;
}
#goalbar b {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acc);
  transition: width 0.5s ease;
}
#stars span {
  display: inline-block;
}
#stars.gain span.new {
  animation: starIn 1s ease-out;
}
@keyframes starIn {
  0% {
    transform: scale(2.4);
    text-shadow: 0 0 20px #ffd23f;
  }
  60% {
    transform: scale(0.9);
  }
}
#toasts {
  order: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: min(320px, 40vw);
  margin-top: 10px;
}
#toasts:empty {
  display: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 12px 7px 10px;
  background: var(--hpanel);
  border-left: 4px solid #6f9be0;
  border-radius: 2px 7px 7px 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  font: 600 13.5px/1.3 Inter, sans-serif;
  color: #fff;
  text-align: left;
  text-shadow: none;
  animation: toastIn 0.25s ease-out;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.toast.good {
  border-left-color: var(--good);
}
.toast.bad {
  border-left-color: var(--bad);
}
.toast .ti {
  font-size: 16px;
}
.toast.out {
  opacity: 0;
  transform: translateX(16px);
}
#toasts .toast:nth-child(n + 4) {
  display: none;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

/* ---------- bottom left: minimap, health, speed, route ---------- */
#mini {
  left: var(--hl);
  bottom: calc(var(--hb) + 2px);
  width: var(--mini);
  height: var(--mini);
  pointer-events: auto;
  cursor: pointer;
}
#hpbar {
  display: none !important;
}
#hudMeta {
  position: absolute;
  left: calc(var(--hl) + var(--mini) + 12px);
  bottom: calc(var(--hb) + 6px);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 7px;
}
#hpw {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ff6b6f;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
#hpw svg {
  width: 16px;
  height: 16px;
  flex: none;
}
#hpw i {
  display: block;
  width: 120px;
  height: 9px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  overflow: hidden;
}
#hpw b {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(#8ef07a, #45b23b);
  transition: width 0.25s ease;
}
#hpw.mid b {
  background: linear-gradient(#ffe066, #d9a514);
}
#hpw.low b {
  background: linear-gradient(#ff7a6e, #d62828);
}
#hpw.low svg {
  animation: hudBeat 0.8s ease-in-out infinite;
}
#hudMeta #speed {
  position: static;
  font-size: 34px;
  line-height: 0.9;
}
#hudMeta #speed:empty {
  display: none;
}
#rinfo,
.mu-route {
  --rc: var(--acc);
  padding: 5px 10px 5px 8px;
  background: var(--hpanel);
  border-left: 4px solid var(--rc);
  border-radius: 2px 6px 6px 2px;
  font: 600 12.5px Inter, sans-serif;
  color: #fff;
  white-space: nowrap;
}
#rinfo:empty,
.mu-route:empty {
  display: none;
}
#rinfo em,
.mu-route em {
  margin-right: 4px;
  font-style: normal;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc);
}
#rinfo[data-k='wp'],
.mu-route[data-k='wp'] {
  --rc: #c86bff;
}
#rinfo[data-k='giver'],
.mu-route[data-k='giver'] {
  --rc: #4fc3ff;
}
#rinfo[data-k='job'],
.mu-route[data-k='job'] {
  --rc: #9be33a;
}

/* ---------- bottom: subtitles, street name, hints ---------- */
#sub {
  bottom: 110px;
  width: min(700px, calc(100vw - 2 * (var(--hl) + var(--mini) + 160px)));
}
#zone {
  top: auto;
  right: var(--hr);
  bottom: calc(var(--hb) + 22px);
}
#radiobox {
  top: calc(var(--ht) + 60px) !important;
}

/* small windows and phones in landscape */
@media (max-height: 540px) {
  :root {
    --mini: 112px;
  }
  #money {
    font-size: 32px;
  }
  #stars {
    font-size: 22px;
  }
  #goalbar {
    width: 150px;
    font-size: 11px;
  }
  #mtick {
    font-size: 20px;
  }
  #clock b {
    font-size: 30px;
  }
  #clock.crit b {
    font-size: 36px;
  }
  #clock.done b {
    font-size: 24px;
  }
  #clock small {
    font-size: 8.5px;
  }
  #hudTL {
    width: min(340px, 36vw);
  }
  #hudTL #obj {
    padding: 6px 10px 7px;
    font-size: 12.5px;
    line-height: 1.32;
  }
  #hudTL #obj b {
    font-size: 17px;
  }
  #hud #timer {
    font-size: 26px;
  }
  #hudMeta #speed {
    font-size: 26px;
  }
  #hpw i {
    width: 90px;
  }
  #sub {
    bottom: var(--hb);
    font-size: 14px;
  }
  #zone {
    font-size: 26px;
  }
  #hint {
    transform: translate(-50%, 34px);
    font-size: 14px;
  }
  .toast {
    font-size: 12.5px;
    padding: 5px 10px 5px 8px;
  }
  #toasts .toast:nth-child(n + 3) {
    display: none;
  }
}

/* portrait: the clock row first, then minimap and money */
@media (orientation: portrait) {
  :root {
    --mini: 88px;
  }
  #mini {
    top: calc(var(--ht) + 64px);
    bottom: auto;
  }
  #hudMeta {
    top: calc(var(--ht) + 64px);
    bottom: auto;
    left: calc(var(--hl) + var(--mini) + 10px);
    flex-direction: column;
  }
  #hpw i {
    width: 78px;
  }
  #topright {
    top: calc(var(--ht) + 64px);
  }
  #money {
    font-size: 26px;
  }
  #stars {
    font-size: 20px;
  }
  #goalbar {
    width: 128px;
    font-size: 10.5px;
  }
  #hudTL {
    top: calc(var(--ht) + 64px + var(--mini) + 10px);
    width: 60vw;
  }
  #hudTL #obj {
    font-size: 12.5px;
  }
  #hudTL #obj b {
    font-size: 17px;
  }
  #sub {
    bottom: calc(var(--hb) + 250px);
    width: 92vw;
    font-size: 14px;
  }
  #zone {
    top: calc(var(--ht) + 178px);
    bottom: auto;
    right: var(--hr);
    max-width: 32vw;
    font-size: 20px;
    line-height: 1.05;
    text-align: right;
  }
  #toasts {
    width: 56vw;
  }
}

/* ---------- touch layout: minimap top left, stick bottom left, buttons bottom right ---------- */
html.touchui {
  --mini: 96px;
}
.touchui #mini {
  top: var(--ht);
  bottom: auto;
}
.touchui #hudMeta {
  top: var(--ht);
  bottom: auto;
  left: calc(var(--hl) + var(--mini) + 10px);
  flex-direction: column;
}
.touchui #hudMeta {
  flex-flow: row wrap;
  align-items: center;
  width: 200px;
  gap: 7px 8px;
}
.touchui #hpw {
  flex-basis: 100%;
}
.touchui #hpw i {
  width: 88px;
}
.touchui #hudMeta #speed {
  font-size: 26px;
}
/* the mission countdown sits beside the minimap, the left column is short on a phone */
.touchui #hud #timer {
  position: fixed;
  top: calc(var(--ht) + 62px);
  left: calc(var(--hl) + var(--mini) + 10px);
  font-size: 24px;
}
.touchui #hudTL {
  top: calc(var(--ht) + var(--mini) + 10px);
  width: min(300px, 34vw);
}
.touchui #topright {
  top: calc(var(--ht) + 50px);
}
.touchui #money {
  font-size: 28px;
}
.touchui #stars {
  font-size: 20px;
}
.touchui #toasts {
  position: fixed;
  top: calc(var(--ht) + 120px);
  left: calc(var(--hl) + min(300px, 34vw) + 10px);
  align-items: flex-start;
  width: min(320px, calc(100vw - var(--hl) - min(300px, 34vw) - 10px - var(--hr) - 166px));
  margin: 0;
}
.touchui .toast {
  animation-name: toastInT;
}
.touchui #toasts .toast:nth-child(n + 3) {
  display: none;
}
@keyframes toastInT {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}
.touchui #sub {
  bottom: var(--hb);
  width: max(240px, calc(100vw - 2 * min(44vw, 262px)));
  font-size: 14px;
}
.touchui #zone {
  top: calc(var(--ht) + 58px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  font-size: 22px;
  white-space: nowrap;
}
.touchui #radiobox {
  top: calc(var(--ht) + 88px) !important;
}
@media (orientation: portrait) {
  html.touchui {
    --mini: 88px;
  }
  .touchui #clock {
    left: var(--hl);
    transform: none;
    min-width: 96px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .touchui #mini,
  .touchui #hudMeta,
  .touchui #topright {
    top: calc(var(--ht) + 64px);
  }
  .touchui #toasts {
    position: static;
    align-items: flex-start;
    width: 100%;
  }
  .touchui #hudMeta {
    flex-flow: column nowrap;
    align-items: flex-start;
    width: auto;
  }
  .touchui #hpw {
    flex-basis: auto;
  }
  .touchui #hud #timer {
    position: static;
  }
  .touchui #hudTL {
    top: calc(var(--ht) + 64px + var(--mini) + 10px);
    width: 60vw;
  }
  .touchui #sub {
    bottom: calc(var(--hb) + 250px);
    width: 92vw;
  }
  .touchui #zone {
    top: calc(var(--ht) + 178px);
    left: auto;
    right: var(--hr);
    transform: none;
    white-space: normal;
  }
  .touchui #money {
    font-size: 24px;
  }
  .touchui #hpw i {
    width: 70px;
  }
  .touchui #goalbar {
    width: 120px;
  }
  .touchui #radiobox {
    top: calc(var(--ht) + 64px) !important;
  }
}

/* top bar in the top right corner: pause, map, camera, sound (the money moves below it) */
#tbtn {
  top: 0;
  left: auto;
  right: calc(var(--hr) - 6px);
  transform: none;
  z-index: 7;
  gap: 0;
  align-items: flex-start;
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
}
#tbtn button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
#tbtn button span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8, 11, 19, 0.62);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: #fff;
}
#tbtn button svg {
  width: 21px;
  height: 21px;
}
#tbtn button.on span {
  background: var(--acc);
  border-color: var(--acc);
  color: #111;
}

/* stick */
#touch .tzone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(44vw, 340px);
  height: min(70vh, 300px);
  pointer-events: auto;
  touch-action: none;
}
#touch .tbase {
  position: absolute;
  left: calc(var(--hl) + 14px);
  bottom: calc(var(--hb) + 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0 55%, rgba(255, 255, 255, 0.13) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition:
    transform 0.12s ease-out,
    border-color 0.15s;
}
#touch .tbase.act {
  border-color: var(--acc);
  transition: none;
}
#touch .tknob {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
#touch .tbase.act .tknob {
  background: rgba(255, 210, 63, 0.75);
}

/* action buttons; slots a (corner, large) to g */
#touch .tb {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  background: rgba(8, 11, 19, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.34);
  color: #fff;
  font: inherit;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
#touch .tb svg {
  width: 22px;
  height: 22px;
}
#touch .tb span {
  font-family: var(--disp);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.06em;
}
#touch .tb b {
  font-family: var(--disp);
  font-weight: 400;
  font-size: 30px;
  line-height: 0.9;
}
#touch .tb.on {
  background: rgba(255, 210, 63, 0.78);
  border-color: var(--acc);
  color: #111;
}
#touch .tb.sel {
  border-color: var(--acc);
  color: var(--acc);
}
#touch .tb.sel.on {
  color: #111;
}
#touch .s-a,
#touch[data-mode='ride'] .tb[data-a='exit'] {
  right: calc(var(--hr) + 5px);
  bottom: calc(var(--hb) + 5px);
  width: 74px;
  height: 74px;
  background: rgba(255, 210, 63, 0.2);
  border-color: rgba(255, 210, 63, 0.85);
}
#touch .s-b {
  right: calc(var(--hr) + 92px);
  bottom: calc(var(--hb) + 2px);
}
#touch .s-c {
  right: calc(var(--hr) + 2px);
  bottom: calc(var(--hb) + 92px);
}
#touch .s-d {
  right: calc(var(--hr) + 82px);
  bottom: calc(var(--hb) + 82px);
}
#touch .s-e {
  right: calc(var(--hr) + 172px);
  bottom: calc(var(--hb) + 2px);
}
#touch .s-f {
  right: calc(var(--hr) + 242px);
  bottom: calc(var(--hb) + 82px);
}
#touch .s-g {
  right: calc(var(--hr) + 162px);
  bottom: calc(var(--hb) + 82px);
}
#touch[data-mode='foot'] .m-foot,
#touch[data-mode='car'] .m-car,
#touch[data-mode='ride'] .m-ride {
  display: flex;
}
#touch .tb.hide,
#touch.in .tb[data-a='punch'],
#touch.in .tb[data-a='kick'] {
  display: none !important;
}
#touch .tb.hot {
  animation: tbHot 1.1s ease-out infinite;
}
@keyframes tbHot {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.75);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(255, 210, 63, 0);
  }
}
/* dialogue answers */
#touch .tdlg {
  position: absolute;
  right: var(--hr);
  bottom: var(--hb);
  display: none;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: 10px;
  max-width: calc(100vw - var(--hr) - min(44vw, 340px));
}
#touch[data-mode='dlg'] .tdlg {
  display: flex;
}
#touch .tdlg .tb {
  position: static;
  display: flex;
  width: 58px;
  height: 58px;
  border-color: rgba(255, 210, 63, 0.7);
}
@media (orientation: portrait) {
  #touch .tzone {
    width: 40vw;
    height: 44vh;
  }
  #touch .tbase {
    left: var(--hl);
    width: 100px;
    height: 100px;
  }
  #touch .tknob {
    width: 48px;
    height: 48px;
  }
  #touch .s-e {
    right: calc(var(--hr) + 162px);
  }
  #touch .s-f {
    right: calc(var(--hr) + 2px);
    bottom: calc(var(--hb) + 172px);
  }
  #touch .tdlg {
    max-width: calc(100vw - var(--hr) - 40vw);
  }
}

@media (max-height: 380px) {
  #touch .tbase {
    width: 108px;
    height: 108px;
  }
  #touch .tknob {
    width: 50px;
    height: 50px;
  }
}

/* ---------- big map ---------- */
#bigmap {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #121725;
  cursor: crosshair;
  touch-action: none;
}
#mapui {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  font-family: Inter, sans-serif;
  color: var(--text);
}
#mapui .mu-head {
  position: absolute;
  top: var(--ht);
  left: var(--hl);
  padding: 8px 16px 9px 12px;
  background: var(--hpanel);
  border-left: 4px solid var(--acc);
  border-radius: 2px 8px 8px 2px;
}
#mapui .mu-head b {
  display: block;
  font-family: var(--disp);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--acc);
}
#mapui .mu-stats {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
}
#mapui button {
  pointer-events: auto;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mapui .mu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--hpanel);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
}
#mapui .mu-btn svg {
  width: 24px;
  height: 24px;
}
#mapui .mu-btn:hover,
#mapui .mu-btn:focus-visible {
  border-color: var(--acc);
  color: var(--acc);
}
#mapui .mu-x {
  position: absolute;
  top: var(--ht);
  right: var(--hr);
}
#mapui .mu-leg {
  position: absolute;
  top: calc(var(--ht) + 74px);
  left: var(--hl);
  max-height: calc(100% - var(--ht) - var(--hb) - 112px);
  overflow: auto;
  padding: 2px 8px 6px;
  background: var(--hpanel);
  border: 1px solid var(--line);
  border-radius: 8px;
  pointer-events: auto;
}
#mapui .mu-lt {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 6px 4px;
  background: none;
  border: 0;
  text-align: left;
  font: 800 11px Inter, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acc);
}
#mapui .mu-lt::after {
  content: ' –';
}
#mapui .mu-leg.closed .mu-lt::after {
  content: ' +';
}
#mapui .mu-leg ul {
  list-style: none;
  margin: 0;
  padding: 0 4px 2px;
}
#mapui .mu-leg.closed ul {
  display: none;
}
#mapui .mu-leg li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 25px;
  font-size: 13px;
  white-space: nowrap;
}
#mapui .mu-leg canvas {
  width: 22px;
  height: 22px;
  flex: none;
}
#mapui .mu-zoom {
  position: absolute;
  right: var(--hr);
  bottom: calc(var(--hb) + 6px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#mapui .mu-foot {
  position: absolute;
  left: 50%;
  bottom: calc(var(--hb) + 6px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 2 * var(--hr) - 150px);
  text-align: center;
}
#mapui .mu-clr {
  min-height: 44px;
  padding: 4px 18px 2px;
  background: var(--hpanel);
  border: 1px solid #c86bff;
  border-radius: 22px;
  font-family: var(--disp);
  font-size: 19px;
  letter-spacing: 0.06em;
  color: #e2b8ff;
}
#mapui .mu-tip {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px #000;
}
@media (max-height: 540px) {
  #mapui .mu-head b {
    font-size: 24px;
  }
  #mapui .mu-leg {
    top: calc(var(--ht) + 62px);
  }
  #mapui .mu-leg li {
    min-height: 22px;
    font-size: 12px;
  }
  #mapui .mu-zoom {
    gap: 6px;
  }
}
/* touch: the top bar stays above the map in the top right corner */
.touchui #mapui .mu-x {
  top: calc(var(--ht) + 58px);
}
@media (orientation: portrait) {
  .touchui #mapui .mu-head {
    top: calc(var(--ht) + 62px);
  }
  .touchui #mapui .mu-leg {
    top: calc(var(--ht) + 128px);
  }
  .touchui #mapui .mu-x {
    top: calc(var(--ht) + 62px);
  }
}

/* reduced flashing and motion */
.calm #clock.urgent b,
.calm #hud #timer.low,
.calm #hpw.low svg,
.calm #touch .tb.hot {
  animation: none;
}
.calm #touch .tb.hot {
  box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  #clock.urgent b,
  #hud #timer.low,
  #hpw.low svg,
  #stars.gain span.new,
  #touch .tb.hot {
    animation: none;
  }
}