:root {
  --tr-font:
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", "Noto Sans CJK TC", system-ui,
    sans-serif;
  --tr-num:
    "DIN Condensed", "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow",
    "PingFang TC", sans-serif;
  --tr-display:
    "Avenir Next Condensed", "Bahnschrift", "DIN Condensed", "Roboto Condensed", "Arial Narrow",
    "PingFang TC", sans-serif;
  --pink: #ff3d9a;
  --pink2: #ff6fb1;
  --cyan: #35e0ff;
  --amber: #ffb13d;
  --gold: #ffcf4d;
  --red: #ff3b4a;
  --blue: #3d82ff;
  --green: #3ddc84;
  --text: #f6f3ec;
  --muted: #f6f3ec99;
  --panel: #0a0c129e;
  --panel-strong: #0a0c12d6;
  --brand: #e0262f;
  --brand-deep: #a8121b;
  --paper: #f4f1ea;
  --ink: #0b0b10;
  --pad: clamp(14px, 2.8vmin, 34px);
  --ui-scale: 1;
  --mm: calc(clamp(128px, 26vmin, 232px) * var(--ui-scale));
}
.tr-ui {
  z-index: 20;
  pointer-events: none;
  font-family: var(--tr-font);
  font-size: calc(clamp(11px, 1.5vmin, 16px) * var(--ui-scale));
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  position: fixed;
  inset: 0;
}
.tr-ui * {
  box-sizing: border-box;
}
.tr-ui button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tr-ui svg {
  display: block;
}
.tr-layer {
  pointer-events: none;
  contain: layout paint style;
  position: absolute;
  inset: 0;
}
.tr-hud {
  z-index: 1;
  transition:
    opacity 0.35s,
    visibility linear;
}
.tr-touch {
  z-index: 2;
}
.tr-fade {
  z-index: 3;
  opacity: 0;
  background: #000;
}
.tr-top {
  z-index: 4;
}
.tr-menus {
  z-index: 5;
}
.hud-off .tr-hud {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0s linear 0.25s;
}
.hud-off .hud-feed {
  opacity: 0;
}
.hidden {
  display: none !important;
}
.kc {
  color: #11141b;
  min-width: 1.85em;
  height: 1.85em;
  font: 800 0.9em/1 var(--tr-display);
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
  text-shadow: none;
  background: linear-gradient(#fff, #d8dbe3);
  border-radius: 0.36em;
  justify-content: center;
  align-items: center;
  margin: 0 0.3em;
  padding: 0 0.4em;
  display: inline-flex;
  transform: translateY(-0.1em);
  box-shadow:
    0 0.14em #7f8595,
    0 0.25em 0.5em #00000073;
}
.kc-wide {
  padding: 0 0.6em;
}
.kc-pad {
  color: #fff;
  background: #262b36;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 0.12em #ffffff4d,
    0 0.2em 0.45em #00000073;
}
.kc-pad.kc-wide {
  border-radius: 0.55em;
}
.kc-a {
  background: #35c254;
}
.kc-b {
  background: #e5443a;
}
.kc-x {
  background: #3a86e6;
}
.kc-y {
  color: #1b1400;
  background: #f0bf2a;
}
.kc-ps-x,
.kc-ps-o,
.kc-ps-s,
.kc-ps-t {
  font-family: var(--tr-font);
  background: #1b1e27;
  font-weight: 900;
}
.kc-ps-x {
  color: #7fb2ff;
}
.kc-ps-o {
  color: #ff6b6b;
}
.kc-ps-s {
  color: #ff8fd2;
}
.kc-ps-t {
  color: #5fe0b0;
}
.kc-nt {
  background: #2a2d36;
}
.kc-dpad {
  background: #262b36;
  border-radius: 0.3em;
  padding: 0 0.2em;
}
.kc-dpad svg {
  width: 1.25em;
  height: 1.25em;
  display: block;
}
.kc-touch {
  color: #fff;
  font: 700 0.78em/1 var(--tr-font);
  background: #ff3d9a40;
  border-radius: 999px;
  padding: 0 0.75em;
  box-shadow: inset 0 0 0 0.1em #ffffffb3;
}
.kc-mouse {
  padding: 0 0.3em;
}
.kc-mouse svg {
  width: 0.95em;
  height: 1.25em;
}
.hud-tr {
  top: var(--pad);
  right: var(--pad);
  text-shadow: 0 1px 2px #000000d9;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3em;
  display: flex;
  position: absolute;
}
.tr-clock {
  font: 700 1em/1 var(--tr-num);
  background: linear-gradient(90deg, #080a1000, #080a1080 45%);
  border-radius: 999px;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.2em 0.3em 1.6em;
  display: flex;
}
.tr-clock .wx svg {
  filter: drop-shadow(0 1px 1px #0009);
  width: 1.35em;
  height: 1.35em;
}
.tr-clock .wx[data-w="sun"] {
  color: #ffd45a;
}
.tr-clock .wx[data-w="moon"] {
  color: #e8e2ff;
}
.tr-clock .wx[data-w="cloudy"],
.tr-clock .wx[data-w="fog"] {
  color: #d7dde8;
}
.tr-clock .wx[data-w="rain"] {
  color: #8fd0ff;
}
.tr-clock .wx[data-w="storm"] {
  color: #c7b8ff;
}
.tr-clock .clock {
  letter-spacing: 0.04em;
  font-size: 1.45em;
}
.tr-clock .temp {
  opacity: 0.72;
  font-size: 1.15em;
}
.tr-money {
  font: 700 2.7em/1 var(--tr-num);
  letter-spacing: 0.01em;
  text-shadow:
    0 0.06em #0009,
    0 0 0.5em #00000073;
  align-items: baseline;
  gap: 0.16em;
  transition: color 0.3s;
  display: flex;
}
.tr-money .cur {
  color: var(--amber);
  letter-spacing: 0.06em;
  margin-right: 0.12em;
  font-size: 0.5em;
}
.tr-money.up .amt {
  color: #8dffb4;
}
.tr-money.down .amt {
  color: #ff8b8b;
}
.tr-deltas {
  flex-direction: column;
  align-items: flex-end;
  min-height: 0;
  display: flex;
}
.tr-deltas .delta {
  font: 700 1.35em/1.15 var(--tr-num);
  animation: 2.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards deltaIn;
}
.tr-deltas .pos {
  color: #7dffa8;
}
.tr-deltas .neg {
  color: #ff7c7c;
}
@keyframes deltaIn {
  0% {
    opacity: 0;
    transform: translateY(-0.6em) scale(1.3);
  }
  12% {
    opacity: 1;
    transform: none;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(0.4em);
  }
}
.tr-wanted {
  opacity: 0;
  gap: 0.14em;
  margin-top: 0.1em;
  transition:
    opacity 0.35s,
    transform 0.35s;
  display: flex;
  transform: translateY(-0.3em);
}
.tr-wanted.show {
  opacity: 1;
  transform: none;
}
.tr-wanted .star svg {
  fill: #ffffff21;
  stroke: #0000008c;
  stroke-width: 1.2px;
  width: 1.95em;
  height: 1.95em;
}
.tr-wanted .star.on svg {
  fill: #fff;
  filter: drop-shadow(0 0 0.35em #ffd678e6);
}
.tr-wanted.evading .star.on svg {
  animation: 0.9s step-end infinite starFlash;
}
.tr-wanted .star.pop {
  animation: 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) starPop;
}
@keyframes starFlash {
  0%,
  49% {
    fill: #fff;
  }
  50%,
  to {
    fill: #fff3;
    filter: none;
  }
}
@keyframes starPop {
  0% {
    opacity: 0;
    transform: scale(2.4) rotate(-40deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.9);
  }
  to {
    transform: none;
  }
}
.tr-weapon {
  opacity: 0;
  background: linear-gradient(90deg, #080a1000, #080a108c 40%);
  align-items: center;
  gap: 0.7em;
  padding: 0.35em 0.2em 0.35em 1.8em;
  transition:
    opacity 0.3s,
    transform 0.3s;
  display: flex;
  transform: translate(0.6em);
}
.tr-weapon.show {
  opacity: 1;
  transform: none;
}
.tr-weapon.swap .wicon {
  animation: 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) swapIn;
}
.tr-weapon .wicon svg {
  filter: drop-shadow(0 1px 2px #000c);
  width: 3.1em;
  height: 2.2em;
}
.tr-weapon .wtext {
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  display: flex;
}
.tr-weapon .wname {
  opacity: 0.75;
  letter-spacing: 0.08em;
  font-size: 0.8em;
}
.tr-weapon .ammo {
  font: 700 1.6em/1 var(--tr-num);
}
@keyframes swapIn {
  0% {
    opacity: 0;
    transform: scale(1.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.mm-wrap {
  left: var(--pad);
  bottom: var(--pad);
  width: var(--mm);
  transition: opacity 0.3s;
  position: absolute;
}
.mm {
  width: var(--mm);
  height: var(--mm);
  background: #0b0e14;
  border-radius: 50%;
  transition: box-shadow 0.12s;
  position: relative;
  box-shadow:
    0 0 0 0.22em #080a10eb,
    0 0 0 0.34em #ffffff29,
    0 0.8em 2em #00000080;
}
.mm.rim-red {
  box-shadow:
    0 0 0 0.22em #ff2d3c,
    0 0 0 0.34em #ffffff4d,
    0 0 1.6em 0.3em #ff2d3c8c;
}
.mm.rim-blue {
  box-shadow:
    0 0 0 0.22em #2d6bff,
    0 0 0 0.34em #ffffff4d,
    0 0 1.6em 0.3em #2d6bff8c;
}
.mm-canvas {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transition: filter 2s;
  display: block;
}
.mm.night .mm-canvas {
  filter: brightness(0.82);
}
.mm-glass {
  pointer-events: none;
  background: radial-gradient(at 30% 18%, #ffffff14, #0000 45%);
  border-radius: 50%;
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 1.6em #000000b3,
    inset 0 0 0 1px #ffffff0f;
}
.mm-dist {
  color: #fff;
  font: 700 0.95em/1.1 var(--tr-num);
  letter-spacing: 0.03em;
  opacity: 0;
  background: #ff3d9aeb;
  border-radius: 999px;
  padding: 0.18em 0.6em;
  transition:
    opacity 0.25s,
    transform 0.25s;
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translate(-50%, 0.3em);
  box-shadow: 0 0.2em 0.6em #00000073;
}
.mm-dist.show {
  opacity: 1;
  transform: translate(-50%);
}
.mm-dist.mission {
  color: #1a1200;
  background: #ffc93df2;
}
.mm-bars {
  gap: 0.35em;
  margin-top: 0.75em;
  padding: 0 8%;
  display: flex;
}
.bar {
  background: #0009;
  border-radius: 0.3em;
  height: 0.55em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px #ffffff1a;
}
.bar-hp {
  flex: 1.7;
}
.bar-ar {
  flex: 1;
  transition: opacity 0.3s;
}
.bar-ar.empty {
  opacity: 0.4;
}
.bar i {
  transform-origin: 0;
  transform: scaleX(var(--v, 1));
  transition: transform 0.3s;
  position: absolute;
  inset: 0;
}
.bar-hp i {
  background: linear-gradient(90deg, #2dbd63, #7ff2a4);
}
.bar-hp.low i {
  background: linear-gradient(90deg, #ff2d3c, #ff7676);
  animation: 0.9s ease-in-out infinite lowPulse;
}
.bar-ar i {
  background: linear-gradient(90deg, #2d6fff, #7ab8ff);
}
@keyframes lowPulse {
  50% {
    opacity: 0.45;
  }
}
.hud-feed {
  left: var(--pad);
  bottom: calc(var(--pad) + var(--mm) + 2.6em);
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45em;
  width: min(25em, 40vw);
  transition: opacity 0.25s;
  display: flex;
  position: absolute;
}
.toast {
  --accent: var(--cyan);
  border-left: 0.2em solid var(--accent);
  background: linear-gradient(90deg, #0a0c12e6, #0a0c12c7);
  border-radius: 0 0.7em 0.7em 0;
  align-items: flex-start;
  gap: 0.65em;
  max-width: 100%;
  padding: 0.62em 0.95em 0.62em 0.75em;
  font-size: 1.02em;
  line-height: 1.45;
  animation: 0.4s cubic-bezier(0.2, 1.2, 0.35, 1) both toastIn;
  display: flex;
  box-shadow: 0 0.4em 1.2em #00000059;
}
.toast.bump {
  animation: 0.3s toastBump;
}
.toast.out {
  animation: 0.35s forwards toastOut;
}
.toast .t-icon svg {
  width: 1.2em;
  height: 1.2em;
  color: var(--accent);
  margin-top: 0.12em;
}
.toast .t-icon {
  flex: none;
}
.toast.k-good {
  --accent: var(--green);
}
.toast.k-bad {
  --accent: var(--red);
}
.toast.k-mission {
  --accent: var(--gold);
}
@keyframes toastIn {
  0% {
    opacity: 0;
    transform: translate(-1.2em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translate(-1em);
  }
}
@keyframes toastBump {
  50% {
    transform: scale(1.04);
  }
}
.hud-prompts {
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  display: flex;
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translate(-50%);
}
.hud-prompt {
  white-space: nowrap;
  background: #0a0c12d1;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  padding: 0.55em 1.2em;
  font-size: 1.14em;
  font-weight: 600;
  display: none;
  box-shadow: 0 0.5em 1.4em #0006;
}
.hud-prompt.show {
  display: block;
}
.hud-prompt.enter {
  animation: 0.16s ease-out promptPop;
}
.hud-prompt.second {
  opacity: 0.92;
  font-size: 1em;
}
@keyframes promptPop {
  0% {
    opacity: 0;
    transform: translateY(0.4em);
  }
}
.hud-obj {
  left: 50%;
  bottom: calc(var(--pad) + 4.6em);
  text-align: center;
  text-shadow:
    0 0 2px #000,
    0 1px 3px #000,
    0 0 0.9em #000000b3;
  opacity: 0;
  align-items: center;
  gap: 0.6em;
  max-width: min(46em, 64vw);
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.4;
  transition: opacity 0.3s;
  display: flex;
  position: absolute;
  transform: translate(-50%);
}
.hud-obj.show {
  opacity: 1;
}
.hud-obj.enter {
  animation: 0.7s cubic-bezier(0.2, 1, 0.3, 1) objIn;
}
.tr-ui em.hl {
  color: var(--gold);
  font-style: normal;
}
.obj-mark {
  background: var(--gold);
  width: 0.6em;
  height: 0.6em;
  box-shadow: 0 0 0.6em var(--gold);
  flex: none;
  transform: rotate(45deg);
}
@keyframes objIn {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}
.hud-obj.enter .obj-text {
  animation: 0.7s cubic-bezier(0.2, 1, 0.3, 1) objTrack;
}
@keyframes objTrack {
  0% {
    transform: scaleX(1.16);
  }
  to {
    transform: none;
  }
}
.hud-sub {
  left: 50%;
  bottom: calc(var(--pad) + 1.2em);
  text-align: center;
  text-shadow:
    0 0 2px #000,
    0 2px 4px #000,
    0 0 1em #000c;
  opacity: 0;
  max-width: min(52em, 70vw);
  font-size: 1.28em;
  font-weight: 600;
  line-height: 1.5;
  transition: opacity 0.3s;
  position: absolute;
  transform: translate(-50%);
}
.hud-sub.show {
  opacity: 1;
}
.hud-sub.enter {
  animation: 0.3s subIn;
}
.sub-speaker {
  color: var(--amber);
  font-weight: 800;
}
@keyframes subIn {
  0% {
    opacity: 0;
    transform: translate(-50%, 0.3em);
  }
}
.hud-big {
  --tone: #fff;
  opacity: 0;
  visibility: hidden;
  justify-content: center;
  transition:
    opacity 0.7s,
    visibility 0s linear 0.7s;
  display: flex;
  position: absolute;
  top: 36%;
  left: 0;
  right: 0;
}
.hud-big.show {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.hud-big.tone-red {
  --tone: #ff2f45;
}
.hud-big.tone-blue {
  --tone: #3f8cff;
}
.hud-big.tone-gold {
  --tone: #ffc93a;
}
.big-band {
  text-align: center;
  background: linear-gradient(90deg, #0000, #000000b8 22% 78%, #0000);
  width: 100%;
  padding: 0.9em 0 1.1em;
}
.hud-big.show .big-band {
  animation: 0.55s cubic-bezier(0.2, 1, 0.3, 1) both bandIn;
}
.big-title {
  font: 900 6.2em/1 var(--tr-font);
  letter-spacing: 0.14em;
  color: var(--tone);
  text-shadow:
    0 0.05em 0 #0009,
    0 0 0.45em color-mix(in srgb, var(--tone) 55%, transparent);
  padding-left: 0.14em;
}
.hud-big.show .big-title {
  animation: 0.8s cubic-bezier(0.15, 1.1, 0.3, 1) both bigIn;
}
.big-alt {
  font: 800 1.45em/1.2 var(--tr-display);
  letter-spacing: 0.7em;
  color: #fff;
  opacity: 0.9;
  margin-top: 0.35em;
  padding-left: 0.7em;
}
.big-title {
  font-size: min(6.2em, calc(92vw / var(--tw, 4)));
  white-space: nowrap;
}
.big-alt {
  font-size: min(1.45em, calc(88vw / var(--aw, 10)));
  white-space: nowrap;
}
.big-sub {
  font: 700 1.6em/1.2 var(--tr-num);
  color: #fff;
  margin-top: 0.3em;
}
.big-sub:empty,
.big-alt:empty {
  display: none;
}
@keyframes bandIn {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bigIn {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(1.6);
  }
  60% {
    opacity: 1;
    filter: none;
  }
  to {
    transform: none;
  }
}
.hud-mission {
  text-align: center;
  opacity: 0;
  white-space: nowrap;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%);
}
.hud-mission.show {
  animation: 3.8s both misIn;
}
.hm-kicker {
  font: 800 0.95em var(--tr-display);
  letter-spacing: 0.6em;
  color: var(--gold);
  text-shadow: 0 0 0.6em #ffcf4d99;
  padding-left: 0.6em;
}
.hm-title {
  font: 900 3.3em/1.1 var(--tr-font);
  letter-spacing: 0.1em;
  text-shadow:
    0 0.06em #0009,
    0 0 0.6em #0009;
}
.hm-alt {
  font: 700 1.05em var(--tr-display);
  letter-spacing: 0.35em;
  opacity: 0.85;
  text-transform: uppercase;
}
@keyframes misIn {
  0% {
    opacity: 0;
    transform: translate(-50%, 0.8em);
  }
  10%,
  82% {
    opacity: 1;
    transform: translate(-50%);
  }
  to {
    opacity: 0;
  }
}
.hud-bars {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4em;
  margin-bottom: 0.3em;
  display: flex;
  position: static;
}
.hb {
  background: linear-gradient(90deg, #080a1000, #080a10c7 30%);
  justify-content: space-between;
  align-items: center;
  gap: 1.2em;
  min-width: 15.5em;
  padding: 0.45em 0.2em 0.45em 2em;
  display: none;
}
.hb.show {
  animation: 0.3s hbIn;
  display: flex;
}
.hb-label {
  font: 700 0.9em var(--tr-font);
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.hb-val {
  font: 700 2em/1 var(--tr-num);
  text-align: right;
  min-width: 3em;
}
.hb-timer.urgent .hb-val {
  color: #ff5160;
  animation: 0.5s step-end infinite urgent;
}
.hb-bar {
  background: #ffffff24;
  border-radius: 0.3em;
  width: 9em;
  height: 0.6em;
  position: relative;
  overflow: hidden;
}
.hb-bar i {
  transform-origin: 0;
  transform: scaleX(var(--v, 0));
  background: var(--green);
  transition:
    transform 0.25s,
    background 0.4s;
  position: absolute;
  inset: 0;
}
.hb-prog[data-tone="warn"] .hb-bar i {
  background: var(--amber);
}
.hb-prog[data-tone="bad"] .hb-bar i {
  background: var(--red);
}
@keyframes hbIn {
  0% {
    opacity: 0;
    transform: translate(1em);
  }
}
@keyframes urgent {
  50% {
    opacity: 0.55;
  }
}
.hud-br {
  right: var(--pad);
  bottom: var(--pad);
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7em;
  display: flex;
  position: absolute;
}
.hud-area {
  text-align: right;
  opacity: 0;
  text-shadow:
    0 0.05em #0009,
    0 0 0.8em #000000b3;
}
.hud-area.show {
  animation: 4.8s both areaIn;
}
.area-name {
  font: 900 2.7em/1.05 var(--tr-font);
  letter-spacing: 0.12em;
}
.area-alt {
  font: 800 0.95em/1.3 var(--tr-display);
  letter-spacing: 0.5em;
  color: var(--amber);
  margin-right: -0.5em;
}
.area-tag {
  opacity: 0.85;
  margin-top: 0.15em;
  font-size: 0.95em;
}
@keyframes areaIn {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translate(1.2em);
  }
  12%,
  80% {
    opacity: 1;
    filter: none;
    transform: none;
  }
  to {
    opacity: 0;
  }
}
.hud-street {
  color: #fff;
  text-align: center;
  background: #0d6b3e;
  border-radius: 0.35em;
  flex-direction: column;
  align-items: center;
  min-width: 9em;
  padding: 0.3em 0.9em 0.35em;
  display: none;
  box-shadow:
    inset 0 0 0 0.13em #0d6b3e,
    inset 0 0 0 0.22em #f2f2ee,
    0 0.3em 0.9em #00000073;
}
.hud-street.show {
  display: flex;
}
.hud-street.flip {
  animation: 0.45s signFlip;
}
.st-en {
  font: 600 0.72em/1.2 var(--tr-display);
  letter-spacing: 0.04em;
  opacity: 0.92;
}
.st-en:empty {
  display: none;
}
@keyframes signFlip {
  0% {
    opacity: 0.2;
    transform: rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hud-speedo {
  contain: layout style;
  width: 11.5em;
  height: 11.5em;
  margin-bottom: 1.4em;
  display: none;
  position: relative;
}
.hud-speedo .spd-gauge,
.hud-speedo .spd-center {
  will-change: contents;
}
.spd-num {
  contain: layout style paint;
  font-variant-numeric: tabular-nums;
}
.hud-speedo.show {
  animation: 0.3s hbIn;
  display: block;
}
.hud-speedo:before {
  content: "";
  background: radial-gradient(circle, #080a10bf 52%, #080a1000 71%);
  border-radius: 50%;
  position: absolute;
  inset: 7%;
}
.spd-gauge {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}
.spd-track {
  fill: none;
  stroke: #ffffff1f;
  stroke-width: 7px;
  stroke-linecap: round;
}
.spd-fill {
  fill: none;
  stroke-width: 7px;
  stroke-linecap: round;
  stroke-dasharray: 235.62;
  stroke-dashoffset: 235.62px;
  filter: drop-shadow(0 0 3px #ff3d9ab3);
  transition: stroke-dashoffset 0.1s linear;
}
.spd-tick {
  stroke: #ffffff73;
  stroke-width: 1.4px;
}
.spd-tick.red {
  stroke: #ff3d5a;
}
.spd-center {
  text-align: center;
  text-shadow: 0 1px 3px #000c;
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
}
.spd-num {
  font: 700 3.3em/1 var(--tr-num);
}
.hud-speedo.redline .spd-num {
  color: #ff6b8a;
}
.spd-unit {
  font: 600 0.78em var(--tr-font);
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.spd-gear {
  font: 800 1.05em var(--tr-num);
  color: var(--cyan);
  text-shadow: 0 0 0.4em #35e0ffcc;
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translate(-50%);
}
.spd-foot {
  text-align: center;
  position: absolute;
  bottom: -1.4em;
  left: 12%;
  right: 12%;
}
.spd-name {
  font: 700 0.88em var(--tr-font);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px #000;
}
.spd-hp {
  background: #ffffff24;
  border-radius: 0.2em;
  height: 0.22em;
  margin-top: 0.3em;
  position: relative;
  overflow: hidden;
}
.spd-hp i {
  transform-origin: 0;
  transform: scaleX(var(--v, 1));
  background: linear-gradient(90deg, #ffb13d, #7dffa8);
  transition: transform 0.3s;
  position: absolute;
  inset: 0;
}
.hud-radio {
  top: var(--pad);
  background: var(--panel-strong);
  opacity: 0;
  border: 1px solid #ff3d9a66;
  border-radius: 1em;
  align-items: center;
  gap: 0.9em;
  padding: 0.6em 1.3em 0.6em 0.9em;
  transition:
    opacity 0.25s,
    transform 0.25s;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -0.8em);
  box-shadow:
    0 0 1.4em #ff3d9a40,
    0 0.6em 1.6em #0006;
}
.hud-radio.show {
  opacity: 1;
  transform: translate(-50%);
}
.hud-radio.bump .r-icon {
  animation: 0.4s swapIn;
}
.r-icon svg {
  width: 2em;
  height: 2em;
  color: var(--pink);
}
.r-freq {
  font: 700 0.8em var(--tr-num);
  color: var(--pink2);
  letter-spacing: 0.14em;
}
.r-freq:empty {
  display: none;
}
.r-name {
  font: 800 1.25em/1.2 var(--tr-font);
}
.r-alt {
  opacity: 0.7;
  font-size: 0.8em;
}
.r-alt:empty {
  display: none;
}
.r-dots {
  gap: 0.3em;
  margin-left: 0.4em;
  display: flex;
}
.r-dots i {
  background: #ffffff40;
  border-radius: 50%;
  width: 0.42em;
  height: 0.42em;
}
.r-dots i.on {
  background: var(--pink);
  box-shadow: 0 0 0.5em var(--pink);
}
.hud-wp {
  opacity: 0;
  will-change: transform;
  width: 0;
  height: 0;
  transition: opacity 0.2s;
  position: absolute;
  top: 0;
  left: 0;
}
.hud-wp.show {
  opacity: 1;
}
.hud-wp.show.dim {
  opacity: 0.18;
}
.wp-pin {
  width: 2.4em;
  height: 2.4em;
  color: var(--pink);
  filter: drop-shadow(0 0.1em 0.2em #000000b3) drop-shadow(0 0 0.4em #ff3d9a99);
  position: absolute;
  top: -2.4em;
  left: -1.2em;
}
.wp-pin svg {
  width: 100%;
  height: 100%;
}
.hud-wp.mission .wp-pin {
  color: var(--gold);
  filter: drop-shadow(0 0.1em 0.2em #000000b3) drop-shadow(0 0 0.4em #ffc93d99);
}
.wp-dist {
  font: 700 1em/1.2 var(--tr-num);
  white-space: nowrap;
  background: #0a0c12b3;
  border-radius: 999px;
  padding: 0.1em 0.5em;
  position: absolute;
  top: 0.25em;
  left: 0;
  transform: translate(-50%);
}
@keyframes wpBob {
  50% {
    transform: translateY(-0.25em);
  }
}
.hud-lock {
  left: 50%;
  top: calc(var(--pad) + 3.2em);
  opacity: 0;
  background: #0a0c12bf;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  padding: 0.6em 1.3em;
  font-size: 1.02em;
  font-weight: 600;
  transition:
    opacity 0.3s,
    transform 0.3s;
  position: absolute;
  transform: translate(-50%, 0.4em);
}
.hud-lock.show {
  opacity: 1;
  transform: translate(-50%);
}
.photo-hint {
  top: var(--pad);
  opacity: 0;
  background: #0a0c12b3;
  border-radius: 999px;
  padding: 0.5em 1.2em;
  font-size: 0.95em;
  transition: opacity 0.3s;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.photo-hint.show {
  opacity: 1;
}
.photo-bar {
  background: #000;
  height: 7vh;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: absolute;
  left: 0;
  right: 0;
  transform: scaleY(0);
}
.photo-bar.top {
  transform-origin: top;
  top: 0;
}
.photo-bar.bottom {
  transform-origin: bottom;
  bottom: 0;
}
.photo .photo-bar {
  transform: none;
}
.photo .hud-feed,
.photo .hud-sub,
.photo .hud-big {
  opacity: 0;
}
.photo .photo-hint {
  z-index: 1;
}
.photo-flash {
  background: #fff;
  animation: 0.6s forwards flash;
  position: absolute;
  inset: 0;
}
@keyframes flash {
  0% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
.mbtn {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  background: 0 0;
  border: 0;
  border-radius: 0.6em;
  outline: none;
  align-items: center;
  gap: 0.9em;
  padding: 0.7em 1.1em;
  transition:
    background 0.15s,
    transform 0.15s;
  display: flex;
  position: relative;
}
.mbtn-ic {
  opacity: 0.7;
  flex: none;
  transition:
    opacity 0.15s,
    color 0.15s;
}
.mbtn-ic svg {
  width: 1.35em;
  height: 1.35em;
}
.mbtn-label b {
  letter-spacing: 0.06em;
  font-size: 1.5em;
  font-weight: 800;
  line-height: 1.25;
  display: block;
}
.mbtn-label small {
  letter-spacing: 0.18em;
  opacity: 0.5;
  text-transform: uppercase;
  margin-top: 0.1em;
  font-size: 0.78em;
  display: block;
}
.mbtn-label small.save {
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.75;
  white-space: nowrap;
  color: #ffe2a0;
}
.mbtn.focus {
  background: linear-gradient(90deg, #e0262f6b, #e0262f0f 85%);
  transform: translate(0.3em);
}
.mbtn.focus:before {
  content: "";
  background: var(--brand);
  width: 0.22em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.mbtn.focus .mbtn-ic {
  opacity: 1;
  color: #fff;
}
.icon-btn {
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  background: #0c0e14c7;
  border: 1px solid #ffffff29;
  border-radius: 50%;
  outline: none;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  transition:
    background 0.15s,
    border-color 0.15s;
  display: grid;
}
.icon-btn:hover,
.icon-btn.focus {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.icon-btn svg {
  width: 1.25em;
  height: 1.25em;
}
.panel {
  flex-direction: column;
  gap: 0.2em;
  display: flex;
}
.panel-sec {
  letter-spacing: 0.24em;
  color: var(--muted);
  align-items: baseline;
  gap: 0.6em;
  margin: 1em 0 0.25em 0.9em;
  font-size: 0.78em;
  display: flex;
}
.panel-sec:first-child {
  margin-top: 0.2em;
}
.panel-sec b {
  font-weight: 800;
}
.panel-sec small {
  opacity: 0.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9em;
}
.panel-hint {
  opacity: 0.5;
  margin: 1em 0.9em 0;
  font-size: 0.8em;
}
.srow {
  cursor: pointer;
  pointer-events: auto;
  border-radius: 0.6em;
  outline: none;
  justify-content: space-between;
  align-items: center;
  gap: 1.2em;
  padding: 0.62em 0.9em;
  transition: background 0.12s;
  display: flex;
  position: relative;
}
.srow.focus {
  box-shadow: inset 0.2em 0 0 var(--brand);
  background: #ffffff12;
}
.srow-label b {
  font-size: 1.05em;
  font-weight: 700;
  display: block;
}
.srow-label small {
  opacity: 0.5;
  letter-spacing: 0.06em;
  font-size: 0.74em;
  display: block;
}
.srow-ctl {
  flex: none;
  align-items: center;
  gap: 0.8em;
  display: flex;
}
.seg {
  background: #ffffff12;
  border-radius: 999px;
  padding: 0.2em;
  display: flex;
}
.seg-opt {
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 999px;
  padding: 0.4em 0.85em;
  font-size: 0.88em;
  font-weight: 700;
  transition:
    background 0.15s,
    color 0.15s;
}
.seg-opt.on {
  background: var(--paper);
  color: var(--ink);
}
.sl-track {
  cursor: pointer;
  touch-action: none;
  background: #ffffff24;
  border-radius: 0.2em;
  width: 12em;
  height: 0.4em;
  position: relative;
}
.sl-track:after {
  content: "";
  position: absolute;
  inset: -0.8em 0;
}
.sl-fill {
  transform-origin: 0;
  background: var(--brand);
  border-radius: 0.2em;
  position: absolute;
  inset: 0;
}
.sl-knob {
  background: #fff;
  border-radius: 50%;
  width: 1.05em;
  height: 1.05em;
  margin: -0.525em 0 0 -0.525em;
  position: absolute;
  top: 50%;
  box-shadow:
    0 0 0 0.2em #e0262f80,
    0 0.15em 0.4em #00000080;
}
.sl-val {
  text-align: right;
  min-width: 3.4em;
  font: 700 1.05em var(--tr-num);
}
.tgl {
  background: #ffffff29;
  border-radius: 999px;
  width: 2.8em;
  height: 1.6em;
  transition: background 0.18s;
  position: relative;
}
.tgl i {
  background: #fff;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  transition: transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1);
  position: absolute;
  top: 0.2em;
  left: 0.2em;
}
.tgl.on {
  background: var(--brand);
}
.tgl.on i {
  transform: translate(1.2em);
}
.tgl-txt {
  opacity: 0.75;
  min-width: 2.2em;
  font-size: 0.88em;
}
.controls {
  gap: 0.1em;
}
.ctl-row {
  pointer-events: auto;
  border-radius: 0.5em;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  align-items: center;
  gap: 0.6em;
  padding: 0.42em 0.8em;
  display: grid;
}
.ctl-row.focus {
  background: #ffffff12;
}
.ctl-head {
  letter-spacing: 0.2em;
  opacity: 0.55;
  padding-bottom: 0.6em;
  font-size: 0.72em;
}
.ctl-name b {
  font-size: 1em;
  font-weight: 700;
}
.ctl-name small {
  opacity: 0.5;
  font-size: 0.72em;
  display: block;
}
.ctl-col {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1em;
  font-size: 0.95em;
  display: flex;
}
.ctl-col .kc {
  margin: 0.1em 0.2em 0.1em 0;
}
.dlg-wrap {
  z-index: 30;
  pointer-events: auto;
  opacity: 0;
  background: #0009;
  place-items: center;
  transition: opacity 0.2s;
  display: grid;
  position: absolute;
  inset: 0;
}
.dlg-wrap.show {
  opacity: 1;
}
.dlg {
  background: #12151d;
  border: 1px solid #ffffff1f;
  border-radius: 1.1em;
  width: min(30em, 88vw);
  padding: 1.7em;
  transition: transform 0.2s;
  transform: scale(0.96);
  box-shadow: 0 2em 5em #0009;
}
.dlg-wrap.show .dlg {
  transform: none;
}
.dlg-text {
  margin-bottom: 1.3em;
  font-size: 1.12em;
  line-height: 1.6;
}
.dlg-btns {
  justify-content: flex-end;
  gap: 0.6em;
  display: flex;
}
.dlg-btns .mbtn {
  background: #ffffff14;
  width: auto;
  padding: 0.65em 1.5em;
  transform: none;
}
.dlg-btns .mbtn.focus:before {
  display: none;
}
.dlg-btns .mbtn.focus {
  box-shadow: 0 0 0 0.12em #fff;
}
.dlg-btns .mbtn .mbtn-label {
  letter-spacing: 0.08em;
  font-size: 1.05em;
  font-weight: 700;
}
.dlg-btns .danger {
  background: #c92a42;
}
.dlg-btns .primary {
  background: var(--brand);
}
.pm {
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  --pm-x: calc(6vw + env(safe-area-inset-left));
  --pm-xr: calc(6vw + env(safe-area-inset-right));
  font-size: clamp(12px, 1.55vmin, 17px);
  transition:
    opacity 0.25s,
    visibility 0s linear 0.25s;
  position: absolute;
  inset: 0;
}
.pm.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s;
}
.pm-bg {
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  background:
    linear-gradient(90deg, #050509eb, #050509b8 45%, #05050999),
    radial-gradient(at 15% 20%, #e0262f2e, #0000 55%);
  position: absolute;
  inset: 0;
}
body[data-quality="low"] .pm-bg {
  -webkit-backdrop-filter: none;
  background-color: #06060ae6;
}
.pm-top {
  top: calc(4.5vh + env(safe-area-inset-top));
  left: var(--pm-x);
  right: var(--pm-xr);
  border-bottom: 1px solid #ffffff1f;
  align-items: center;
  gap: 2em;
  padding-bottom: 1.1em;
  display: flex;
  position: absolute;
}
.pm-logo {
  flex: none;
  line-height: 0;
}
.pm-mark {
  width: auto;
  height: 3em;
  overflow: visible;
}
.pm-paused {
  border-left: 1px solid #ffffff24;
  padding-left: 2em;
}
.pm-paused b {
  letter-spacing: 0.3em;
  font-size: 1.5em;
  font-weight: 800;
  display: block;
}
.pm-paused small {
  font: 700 0.72em var(--tr-display);
  letter-spacing: 0.4em;
  opacity: 0.6;
  text-transform: uppercase;
  display: block;
}
.pm-info {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5em;
  margin-left: auto;
  display: flex;
}
.pm-chip {
  font: 700 0.95em var(--tr-font);
  white-space: nowrap;
  background: #ffffff14;
  border-radius: 2px;
  padding: 0.45em 0.95em;
}
.pm-chip.money {
  font-family: var(--tr-num);
  color: #8dffb4;
  font-size: 1.1em;
}
.pm-chip.who {
  background: var(--brand);
}
.pm-body {
  top: calc(4.5vh + env(safe-area-inset-top) + 5.8em);
  bottom: calc(4.5em + env(safe-area-inset-bottom));
  left: var(--pm-x);
  right: var(--pm-xr);
  gap: 4vw;
  display: flex;
  position: absolute;
}
.pm-nav {
  scrollbar-width: none;
  flex-direction: column;
  flex: none;
  gap: 0.15em;
  width: 17em;
  display: flex;
  overflow-y: auto;
}
.pm-nav::-webkit-scrollbar {
  display: none;
}
.pm-btn {
  border-radius: 2px;
}
.pm-btn .mbtn-label b {
  font-size: 1.3em;
}
.pm-btn.active:not(.focus) {
  background: #ffffff12;
}
.pm-btn.active .mbtn-label b {
  color: #fff;
}
.pm-btn.active:after {
  content: "";
  background: var(--brand);
  border-radius: 50%;
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.225em;
  position: absolute;
  top: 50%;
  right: 0.8em;
}
.pm-danger:not(.focus) {
  opacity: 0.7;
}
.pm-content {
  flex: 1;
  min-width: 0;
  padding-right: 0.5em;
  overflow-y: auto;
}
.pm-tab {
  max-width: 48em;
  display: none;
}
.pm[data-tab="controls"] .pm-tab {
  max-width: 60em;
}
.pm-tab.show {
  animation: 0.28s fadeUp;
  display: block;
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(0.6em);
  }
}
.pm-card {
  border: 1px solid #ffffff1a;
  border-left: 3px solid var(--brand);
  background: linear-gradient(135deg, #e0262f2e, #ffffff08 60%);
  border-radius: 3px;
  align-items: center;
  gap: 2em;
  padding: 2em 2.3em;
  display: flex;
  position: relative;
  overflow: hidden;
}
.pm-card:after {
  content: "臺北";
  font: 900 9em/1 var(--tr-font);
  color: #ffffff09;
  letter-spacing: -0.02em;
  pointer-events: none;
  position: absolute;
  bottom: -0.32em;
  right: -0.1em;
}
.pm-card-text {
  z-index: 1;
  flex: 1;
  min-width: 0;
  position: relative;
}
.pm-mini {
  z-index: 1;
  cursor: pointer;
  background: #0b0e14;
  border: 0;
  border-radius: 50%;
  flex: none;
  width: 13em;
  height: 13em;
  padding: 0;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 0.25em #080a10e6,
    0 0 0 0.38em #ffffff2e,
    0 1em 2.4em #00000073;
}
.pm-mini canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.pm-mini.focus,
.pm-mini:hover {
  box-shadow:
    0 0 0 0.25em var(--paper),
    0 1em 2.4em #00000073;
  transform: scale(1.03);
}
.pm-card-kicker {
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.75em;
  font-weight: 700;
}
.pm-card-title {
  font: 900 4.2em/1.1 var(--tr-font);
  letter-spacing: 0.08em;
  margin-top: 0.1em;
}
.pm-card-alt {
  font: 800 0.95em var(--tr-display);
  letter-spacing: 0.6em;
  color: var(--amber);
}
.pm-card-tag {
  opacity: 0.88;
  margin-top: 0.8em;
  font-size: 1.05em;
}
.pm-card-where {
  align-items: center;
  gap: 0.4em;
  min-width: 0;
  margin-top: 0.7em;
  font-size: 1.15em;
  font-weight: 800;
  display: flex;
}
.pm-card-where svg {
  width: 1em;
  height: 1em;
  color: var(--amber);
  fill: currentColor;
  flex: none;
}
.pm-card-where span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.pm-card-where em {
  opacity: 0.7;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.78em;
  font-style: normal;
  font-weight: 600;
  overflow: hidden;
}
.pm-mission {
  background: #ffcf4d12;
  border: 1px solid #ffcf4d38;
  border-radius: 3px;
  margin-top: 1em;
  padding: 1.1em 1.4em;
}
.pm-mission-row {
  align-items: center;
  gap: 1em;
  display: flex;
}
.pm-mission-tx {
  flex: 1;
  min-width: 0;
}
.pm-mission-title {
  color: var(--gold);
  margin-top: 0.2em;
  font-size: 1.4em;
  font-weight: 800;
}
.pm-mission-desc {
  opacity: 0.82;
  margin-top: 0.4em;
  line-height: 1.55;
}
.pm-abandon {
  background: #ffffff12;
  border-radius: 2px;
  flex: none;
  gap: 0.6em;
  width: auto;
  padding: 0.55em 1.1em;
}
.pm-abandon .mbtn-label {
  letter-spacing: 0.06em;
  font-size: 0.95em;
  font-weight: 800;
}
.pm-abandon .mbtn-ic svg {
  width: 1.1em;
  height: 1.1em;
}
.pm-abandon.focus {
  background: #c92a42;
  transform: none;
}
.pm-abandon.focus:before {
  display: none;
}
.pm-bless {
  color: #ffd28a;
  background: #ffb13d1a;
  border-radius: 3px;
  margin-top: 0.8em;
  padding: 0.6em 1em;
  font-size: 0.95em;
  font-weight: 700;
}
.pm-log {
  background: #ffffff0a;
  border: 1px solid #ffffff0f;
  border-radius: 3px;
  margin-top: 1em;
  padding: 1em 1.2em;
}
.pm-log .pm-card-kicker {
  margin-bottom: 0.5em;
}
.pm-log-row {
  border-left: 0.18em solid var(--accent, var(--cyan));
  border-radius: 2px;
  gap: 0.9em;
  margin-bottom: 0.25em;
  padding: 0.4em 0.5em;
  font-size: 0.95em;
  line-height: 1.45;
  display: flex;
}
.pm-log-row.focus {
  background: #ffffff0f;
}
.pm-log-row.k-good {
  --accent: var(--green);
}
.pm-log-row.k-bad {
  --accent: var(--red);
}
.pm-log-row.k-mission {
  --accent: var(--gold);
}
.pm-log-row.k-sub {
  --accent: #ffffff40;
}
.pm-log-time {
  font: 700 0.95em var(--tr-num);
  opacity: 0.55;
  flex: none;
  min-width: 3.2em;
}
.pm-log-text b {
  color: var(--amber);
}
.stat-grid {
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
  gap: 0.6em;
  display: grid;
}
.stat-cell {
  pointer-events: auto;
  background: #ffffff0d;
  border-radius: 3px;
  flex-direction: column;
  padding: 1em 1.1em;
  display: flex;
}
.stat-cell.focus {
  box-shadow: inset 0.2em 0 0 var(--brand);
  background: #ffffff1a;
}
.stat-cell span {
  opacity: 0.68;
  font-size: 0.82em;
}
.stat-cell b {
  font: 700 1.9em/1.2 var(--tr-num);
}
.stat-cell.big {
  background: linear-gradient(120deg, #3ddc842e, #ffffff0a);
  grid-column: 1/-1;
}
.stat-cell.big b {
  color: #8dffb4;
  font-size: 2.8em;
}
.pm-foot {
  left: var(--pm-x);
  bottom: calc(1.6em + env(safe-area-inset-bottom));
  opacity: 0.85;
  gap: 1.6em;
  font-size: 0.9em;
  display: flex;
  position: absolute;
}
.pm-hint {
  align-items: center;
  gap: 0.2em;
  display: flex;
}
.srow-act {
  background: #ffffff14;
  border-radius: 2px;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  display: grid;
}
.srow-act svg {
  width: 1.2em;
  height: 1.2em;
}
.srow.focus .srow-act {
  background: var(--paper);
  color: var(--ink);
}
.fm {
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  background: #0b0e14;
  font-size: clamp(12px, 1.5vmin, 15px);
  transition:
    opacity 0.22s,
    visibility 0s linear 0.22s;
  position: absolute;
  inset: 0;
}
.fm.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s;
}
.fm-canvas {
  cursor: crosshair;
  touch-action: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.fm-top {
  padding: calc(1.1em + env(safe-area-inset-top, 0px)) calc(1.6em + env(safe-area-inset-right, 0px))
    2.2em calc(1.6em + env(safe-area-inset-left, 0px));
  pointer-events: none;
  background: linear-gradient(#06080eeb, #06080e00);
  align-items: center;
  gap: 1.4em;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.fm-title b {
  font: 900 1.8em/1 var(--tr-font);
  letter-spacing: 0.14em;
}
.fm-title small {
  font: 800 0.7em var(--tr-display);
  letter-spacing: 0.6em;
  color: var(--amber);
  margin-top: 0.2em;
  display: block;
}
.fm-district {
  opacity: 0.75;
  border-left: 1px solid #ffffff26;
  padding-left: 1.4em;
  font-size: 0.95em;
}
.fm-stats {
  font: 700 1.35em var(--tr-num);
  align-items: baseline;
  gap: 1.2em;
  margin-left: auto;
  display: flex;
}
.fm-money {
  color: #8dffb4;
}
.fm-money small {
  color: var(--amber);
  font-size: 0.7em;
}
.fm-side {
  right: calc(1.4em + env(safe-area-inset-right, 0px));
  top: calc(5.4em + env(safe-area-inset-top, 0px));
  scrollbar-width: none;
  background: #0a0c12db;
  border: 1px solid #ffffff14;
  border-radius: 0.6em;
  width: 13.5em;
  max-height: calc(100% - 13em);
  padding: 0.8em 0.6em 0.7em;
  position: absolute;
  overflow-y: auto;
}
.fm-legend-title {
  flex-direction: column;
  gap: 0.15em;
  margin: 0 0.4em 0.55em;
  display: flex;
}
.fm-legend-title b {
  letter-spacing: 0.2em;
  font-size: 0.95em;
  font-weight: 800;
}
.fm-legend-title small {
  opacity: 0.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-left: 0.5em;
  font-size: 0.75em;
}
.fm-legend-tip {
  opacity: 0.5;
  letter-spacing: 0.04em;
  font-size: max(10.5px, 0.74em);
  font-style: normal;
}
.fm-leg {
  width: 100%;
  color: var(--text);
  text-align: left;
  background: 0 0;
  border: 0;
  border-radius: 0.35em;
  align-items: center;
  gap: 0.6em;
  padding: 0.24em 0.4em;
  font-size: 0.92em;
  display: flex;
}
button.fm-leg {
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  transition:
    opacity 0.15s,
    background 0.15s;
}
button.fm-leg:hover,
button.fm-leg.focus {
  background: #ffffff14;
}
.fm-leg.off {
  opacity: 0.38;
}
.fm-leg.off .fm-leg-name {
  -webkit-text-decoration: line-through #ffffff80;
  text-decoration: line-through #ffffff80;
}
.fm-leg-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.fm-leg-n {
  min-width: 1.8em;
  font: 700 0.85em var(--tr-num);
  text-align: center;
  opacity: 0.8;
  background: #ffffff14;
  border-radius: 999px;
  flex: none;
  padding: 0.05em 0.4em;
}
.fm-leg-ic {
  flex: none;
  width: 22px;
  height: 22px;
}
.fm-legbtn {
  display: none;
}
.tr-lang-en .fm-side {
  width: 15.5em;
}
.fm-zoom {
  right: calc(1.4em + env(safe-area-inset-right, 0px));
  bottom: calc(5.2em + env(safe-area-inset-bottom, 0px));
  flex-direction: column;
  gap: 0.5em;
  display: flex;
  position: absolute;
}
.fm-reticle {
  opacity: 0;
  pointer-events: none;
  border: 2px solid #ffffffe6;
  border-radius: 50%;
  width: 2.6em;
  height: 2.6em;
  margin: -1.3em 0 0 -1.3em;
  transition: opacity 0.2s;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 1px #00000080;
}
.fm-reticle:before,
.fm-reticle:after {
  content: "";
  background: #ffffffe6;
  position: absolute;
}
.fm-reticle:before {
  width: 2px;
  margin-left: -1px;
  top: -0.7em;
  bottom: -0.7em;
  left: 50%;
}
.fm-reticle:after {
  height: 2px;
  margin-top: -1px;
  top: 50%;
  left: -0.7em;
  right: -0.7em;
}
.fm-reticle.show {
  opacity: 1;
}
.fm-hints {
  left: 50%;
  bottom: calc(1.2em + env(safe-area-inset-bottom, 0px));
  white-space: nowrap;
  pointer-events: none;
  background: #0a0c12d1;
  border-radius: 999px;
  gap: 1.6em;
  padding: 0.55em 1.4em;
  font-size: 0.9em;
  display: flex;
  position: absolute;
  transform: translate(-50%);
}
.fm-hint {
  align-items: center;
  gap: 0.15em;
  display: flex;
}
.ph-wrap {
  pointer-events: auto;
  transition: transform 0.42s cubic-bezier(0.2, 0.95, 0.25, 1.04);
  position: absolute;
  bottom: 0;
  right: clamp(16px, 6vw, 110px);
  transform: translateY(110%);
}
.ph-wrap.show {
  transform: translateY(-3.5vh);
}
.ph-scrim {
  pointer-events: auto;
  display: none;
  position: absolute;
  inset: 0;
}
.ph-scrim.show {
  display: block;
}
.ph-close {
  z-index: 7;
  width: 44px;
  height: 44px;
  font-size: 16px;
  position: absolute;
  top: 0.6em;
  right: calc(100% + 14px);
  box-shadow: 0 0.4em 1.2em #00000073;
}
.phone {
  aspect-ratio: 9/19.2;
  background: linear-gradient(145deg, #1d2029, #0a0b0f 40%);
  border-radius: 3em;
  height: min(88vh, 640px);
  padding: 0.7em;
  font-size: min(13px, 2vh);
  position: relative;
  box-shadow:
    0 0 0 1.5px #3a3e4a,
    0 0 0 5px #0b0c10,
    0 2.5em 6em #000000a6,
    0 0 3em #ff3d9a1f;
}
.ph-notch {
  z-index: 6;
  background: #000;
  border-radius: 1.2em;
  width: 7.2em;
  height: 2em;
  position: absolute;
  top: 1.35em;
  left: 50%;
  transform: translate(-50%);
}
.ph-screen {
  background: linear-gradient(
    185deg,
    #140d2b 0%,
    #3c1c55 38%,
    #9a3565 64%,
    #ff8a5c 86%,
    #ffc36b 100%
  );
  border-radius: 2.4em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.ph-screen:before {
  content: "";
  pointer-events: none;
  background:
    linear-gradient(#0000 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%230b0716' d='M0.0 200.0 L0.0 132.8 L18.8 132.8 L18.8 91.7 L44.8 91.7 L44.8 114.9 L59.1 114.9 L59.1 105.3 L77.8 105.3 L77.8 136.9 L108.5 136.9 L108.5 127.3 L120.1 127.3 L120.1 190.0 L123.6 200.0 L123.6 173.6 L134.2 173.6 L136.8 147.2 L137.7 147.2 L134.2 136.6 L137.7 136.6 L134.2 126.1 L137.7 126.1 L134.2 115.5 L137.7 115.5 L134.2 105.0 L137.7 105.0 L134.2 94.4 L137.7 94.4 L134.2 83.8 L137.7 83.8 L134.2 73.3 L137.7 73.3 L134.2 62.7 L141.2 62.7 L141.2 55.7 L145.6 55.7 L145.6 48.6 L148.9 48.6 L150.0 24.0 L151.1 48.6 L154.4 48.6 L154.4 55.7 L158.8 55.7 L158.8 62.7 L165.8 62.7 L162.3 73.3 L165.8 73.3 L162.3 83.8 L165.8 83.8 L162.3 94.4 L165.8 94.4 L162.3 105.0 L165.8 105.0 L162.3 115.5 L165.8 115.5 L162.3 126.1 L165.8 126.1 L162.3 136.6 L165.8 136.6 L162.3 147.2 L163.2 147.2 L165.8 173.6 L176.4 173.6 L176.4 200.0 L179.9 190.0 L179.9 120.8 L204.4 120.8 L204.4 119.7 L219.7 119.7 L219.7 164.1 L239.7 164.1 L239.7 122.2 L263.1 122.2 L263.1 109.8 L291.4 109.8 L291.4 138.9 L300.0 138.9 L300.0 200.0Z'/%3E%3Cg fill='%23ffcf6b' opacity='.6'%3E%3Crect x='264' y='192' width='2' height='3'/%3E%3Crect x='41' y='189' width='2' height='3'/%3E%3Crect x='290' y='183' width='2' height='3'/%3E%3Crect x='188' y='187' width='2' height='3'/%3E%3Crect x='116' y='185' width='2' height='3'/%3E%3Crect x='271' y='177' width='2' height='3'/%3E%3Crect x='279' y='173' width='2' height='3'/%3E%3Crect x='297' y='177' width='2' height='3'/%3E%3Crect x='49' y='173' width='2' height='3'/%3E%3Crect x='289' y='172' width='2' height='3'/%3E%3Crect x='214' y='189' width='2' height='3'/%3E%3Crect x='249' y='180' width='2' height='3'/%3E%3Crect x='85' y='192' width='2' height='3'/%3E%3Crect x='256' y='170' width='2' height='3'/%3E%3Crect x='27' y='174' width='2' height='3'/%3E%3Crect x='45' y='187' width='2' height='3'/%3E%3Crect x='231' y='173' width='2' height='3'/%3E%3Crect x='13' y='179' width='2' height='3'/%3E%3Crect x='13' y='176' width='2' height='3'/%3E%3Crect x='99' y='172' width='2' height='3'/%3E%3Crect x='294' y='182' width='2' height='3'/%3E%3Crect x='300' y='186' width='2' height='3'/%3E%3Crect x='23' y='179' width='2' height='3'/%3E%3Crect x='9' y='189' width='2' height='3'/%3E%3Crect x='47' y='193' width='2' height='3'/%3E%3Crect x='260' y='186' width='2' height='3'/%3E%3Crect x='288' y='172' width='2' height='3'/%3E%3Crect x='113' y='183' width='2' height='3'/%3E%3Crect x='193' y='179' width='2' height='3'/%3E%3Crect x='186' y='171' width='2' height='3'/%3E%3Crect x='141.2' y='141.0' width='17.6' height='1.1'/%3E%3Crect x='141.2' y='130.5' width='17.6' height='1.1'/%3E%3Crect x='141.2' y='119.9' width='17.6' height='1.1'/%3E%3Crect x='141.2' y='109.4' width='17.6' height='1.1'/%3E%3Crect x='141.2' y='98.8' width='17.6' height='1.1'/%3E%3Crect x='141.2' y='88.2' width='17.6' height='1.1'/%3E%3Crect x='141.2' y='77.7' width='17.6' height='1.1'/%3E%3Crect x='141.2' y='67.1' width='17.6' height='1.1'/%3E%3C/g%3E%3C/svg%3E")
      bottom/100% 100% no-repeat;
  height: 42%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.ph-status {
  z-index: 5;
  font: 700 1.05em var(--tr-num);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 1.55em;
  left: 2.2em;
  right: 1.8em;
}
.ph-sicons {
  align-items: center;
  gap: 0.4em;
  display: flex;
}
.ph-sicons b {
  font-size: 0.8em;
}
.ph-sicons .sig {
  align-items: flex-end;
  gap: 1px;
  height: 0.8em;
  display: flex;
}
.ph-sicons .sig i {
  background: #fff;
  border-radius: 1px;
  width: 0.2em;
}
.ph-sicons .sig i:first-child {
  height: 30%;
}
.ph-sicons .sig i:nth-child(2) {
  height: 55%;
}
.ph-sicons .sig i:nth-child(3) {
  height: 78%;
}
.ph-sicons .sig i:nth-child(4) {
  height: 100%;
}
.ph-sicons .bat {
  border: 1.5px solid #ffffffe6;
  border-radius: 0.2em;
  width: 1.7em;
  height: 0.8em;
  position: relative;
}
.ph-sicons .bat i {
  background: #fff;
  border-radius: 1px;
  position: absolute;
  inset: 1px 30% 1px 1px;
}
.ph-page {
  flex-direction: column;
  padding: 4.3em 1.2em 2.2em;
  display: none;
  position: absolute;
  inset: 0;
}
.ph-page.show {
  animation: 0.25s phIn;
  display: flex;
}
@keyframes phIn {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }
}
.ph-widget {
  text-align: center;
  text-shadow: 0 1px 6px #00000059;
  margin-top: 1.2em;
}
.ph-wclock {
  font:
    200 5.4em/1 "Helvetica Neue",
    "Avenir Next",
    var(--tr-num);
  letter-spacing: -0.02em;
}
.ph-wdate {
  opacity: 0.9;
  margin-top: 0.3em;
  font-size: 1.05em;
  font-weight: 600;
}
.ph-wweather {
  opacity: 0.8;
  margin-top: 0.2em;
  font-size: 0.95em;
}
.ph-apps {
  z-index: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3em 0.6em;
  margin-top: auto;
  margin-bottom: 1.2em;
  display: grid;
  position: relative;
}
.ph-app-btn {
  color: #fff;
  cursor: pointer;
  background: 0 0;
  border: 0;
  outline: none;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  display: flex;
}
.ph-app-ic {
  border-radius: 1.15em;
  place-items: center;
  width: 4.3em;
  height: 4.3em;
  transition: transform 0.15s;
  display: grid;
  box-shadow:
    0 0.45em 1em #00000059,
    inset 0 1px #ffffff59;
}
.ph-app-ic svg {
  color: #fff;
  width: 2.1em;
  height: 2.1em;
}
.ph-app-btn.focus .ph-app-ic {
  transform: scale(1.08);
  box-shadow:
    0 0 0 0.2em #fff,
    0 0.45em 1.2em #0006;
}
.ph-app-name {
  text-shadow: 0 1px 3px #000000b3;
  font-size: 0.9em;
  font-weight: 600;
}
.ph-dock {
  z-index: 1;
  text-align: center;
  opacity: 0.6;
  letter-spacing: 0.08em;
  font-size: 0.75em;
  position: relative;
}
.ph-appview {
  background: #0e1016;
}
.ph-head {
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.9em;
  display: flex;
}
.ph-back {
  color: #fff;
  cursor: pointer;
  background: #ffffff14;
  border: 0;
  border-radius: 50%;
  outline: none;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  display: grid;
}
.ph-back.focus {
  box-shadow: 0 0 0 0.15em var(--pink);
}
.ph-back svg {
  width: 1.3em;
  height: 1.3em;
}
.ph-title {
  letter-spacing: 0.04em;
  font-size: 1.55em;
  font-weight: 800;
}
.ph-body {
  scrollbar-width: none;
  flex-direction: column;
  flex: 1;
  gap: 0.6em;
  min-height: 0;
  padding-bottom: 0.6em;
  display: flex;
  overflow-y: auto;
}
.ph-body::-webkit-scrollbar {
  display: none;
}
.ph-item {
  color: #fff;
  text-align: left;
  cursor: pointer;
  background: #1a1d26;
  border: 0;
  border-radius: 1em;
  outline: none;
  flex: none;
  width: 100%;
  padding: 0.9em 1em;
  transition: background 0.12s;
  display: block;
}
.ph-item.focus {
  box-shadow: inset 0 0 0 0.14em var(--pink);
  background: #242938;
}
.mis {
  --cat: #3ddc84;
}
.mis.cat-story {
  --cat: #ffcf4d;
}
.mis.cat-race {
  --cat: #ff5fa2;
}
.mis.cat-side {
  --cat: #35e0ff;
}
.mis.cat-culture {
  --cat: #ff7a5c;
}
.mis-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.mis-cat {
  background: var(--cat);
  color: #120f08;
  border-radius: 999px;
  padding: 0.15em 0.65em;
  font-size: 0.78em;
  font-weight: 800;
}
.mis-reward {
  font: 700 1.05em var(--tr-num);
  color: #8dffb4;
}
.mis-title {
  margin-top: 0.45em;
  font-size: 1.2em;
  font-weight: 800;
}
.mis-sub {
  opacity: 0.55;
  margin-top: 0.1em;
  font-size: 0.82em;
}
.mis.done {
  opacity: 0.55;
}
.mis-detail {
  --cat: #3ddc84;
  background: linear-gradient(160deg, #1f2331, #151821);
  border-radius: 1.1em;
  padding: 1.2em;
}
.mis-detail.cat-story {
  --cat: #ffcf4d;
}
.mis-detail.cat-race {
  --cat: #ff5fa2;
}
.mis-detail.cat-side {
  --cat: #35e0ff;
}
.mis-detail.cat-culture {
  --cat: #ff7a5c;
}
.mis-detail .mis-cat {
  display: inline-block;
}
.md-map {
  background: #0b0e14;
  border-radius: 1.1em 1.1em 0 0;
  width: calc(100% + 2.4em);
  margin: -1.2em -1.2em 1em;
  display: block;
}
.md-title {
  margin-top: 0.5em;
  font-size: 1.7em;
  font-weight: 900;
  line-height: 1.15;
}
.md-alt {
  opacity: 0.55;
  letter-spacing: 0.08em;
  font-size: 0.85em;
}
.md-desc {
  opacity: 0.88;
  margin: 0.9em 0 0;
  font-size: 1em;
  line-height: 1.6;
}
.md-reward {
  border-top: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1em;
  padding-top: 0.8em;
  display: flex;
}
.md-reward span {
  opacity: 0.6;
  font-size: 0.85em;
}
.md-reward b {
  font: 700 1.6em var(--tr-num);
  color: #8dffb4;
}
.md-btns {
  gap: 0.5em;
  display: grid;
}
.ph-btn {
  color: #fff;
  cursor: pointer;
  background: #242938;
  border: 0;
  border-radius: 1em;
  outline: none;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  padding: 0.95em;
  font-size: 1.05em;
  font-weight: 700;
  display: flex;
}
.ph-btn svg {
  width: 1.3em;
  height: 1.3em;
}
.ph-btn.primary {
  background: linear-gradient(135deg, #ff3d9a, #ff7a5c);
}
.ph-btn.focus {
  box-shadow: 0 0 0 0.16em #fff;
}
.ph-empty {
  text-align: center;
  white-space: pre-line;
  opacity: 0.6;
  margin: auto;
  font-size: 1.05em;
  line-height: 1.6;
}
.ph-empty svg {
  opacity: 0.8;
  width: 3.6em;
  height: 3.6em;
  margin: 0 auto 0.8em;
}
.ph-note {
  opacity: 0.55;
  padding: 0 0.3em;
  font-size: 0.85em;
  line-height: 1.5;
}
.mrt-line {
  box-shadow: inset 0.25em 0 0 var(--line);
  background: #161922;
  border-radius: 1em;
  flex-direction: column;
  gap: 0.1em;
  padding: 0.4em;
  display: flex;
}
.mrt-line-head {
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.6em;
  font-size: 0.95em;
  font-weight: 700;
  display: flex;
}
.mrt-badge {
  background: var(--line);
  font: 800 0.85em var(--tr-num);
  letter-spacing: 0.05em;
  border-radius: 0.4em;
  padding: 0.12em 0.5em;
}
.mrt-st {
  background: 0 0;
  align-items: center;
  gap: 0.8em;
  padding: 0.6em 0.7em;
  display: flex;
}
.mrt-dot {
  border: 0.22em solid var(--line);
  background: #fff;
  border-radius: 50%;
  flex: none;
  width: 1em;
  height: 1em;
}
.mrt-names {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}
.mrt-names b {
  font-size: 1.05em;
}
.mrt-names small {
  opacity: 0.55;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.78em;
  overflow: hidden;
}
.mrt-dist {
  font: 600 0.95em var(--tr-num);
  opacity: 0.7;
}
.wx-card {
  background: linear-gradient(160deg, #2f7fd6, #7cc4ff);
  border-radius: 1.3em;
  flex: none;
  padding: 1.2em 1.3em;
  position: relative;
  overflow: hidden;
}
.wx-card.night {
  background: linear-gradient(160deg, #161d44, #3b3f82);
}
.wx-card.wx-rain,
.wx-card.wx-storm {
  background: linear-gradient(160deg, #2f3848, #5f6e86);
}
.wx-card.wx-cloudy,
.wx-card.wx-fog {
  background: linear-gradient(160deg, #56657d, #9aa9bf);
}
.wx-city {
  font-weight: 700;
}
.wx-temp {
  font:
    200 4.6em/1.05 "Helvetica Neue",
    "Avenir Next",
    var(--tr-num);
}
.wx-cond {
  opacity: 0.9;
  font-size: 1.05em;
}
.wx-big {
  opacity: 0.95;
  color: #fff;
  filter: drop-shadow(0 0.3em 0.8em #00000040);
  width: 5em;
  height: 5em;
  position: absolute;
  top: 1em;
  right: 0.9em;
}
.wx-big svg {
  width: 100%;
  height: 100%;
}
.wx-grid {
  flex: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  display: grid;
}
.wx-cell {
  background: #1a1d26;
  border-radius: 1em;
  flex-direction: column;
  padding: 0.75em 0.9em;
  display: flex;
}
.wx-cell.focus {
  box-shadow: inset 0 0 0 0.14em var(--pink);
}
.wx-cell span {
  opacity: 0.55;
  font-size: 0.8em;
}
.wx-cell b {
  font: 700 1.55em/1.2 var(--tr-num);
}
.wx-strip {
  background: #1a1d26;
  border-radius: 1em;
  flex: none;
  justify-content: space-between;
  padding: 0.8em 0.7em;
  display: flex;
}
.wx-hr {
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  font-size: 0.8em;
  display: flex;
}
.wx-hr i svg {
  width: 1.5em;
  height: 1.5em;
}
.wx-hr b {
  font: 700 1.1em var(--tr-num);
}
.radio-st {
  align-items: center;
  gap: 0.9em;
  display: flex;
}
.radio-st .r-freq {
  flex: none;
  width: 4.8em;
}
.radio-st.on {
  background: #ff3d9a24;
  box-shadow: inset 0 0 0 0.12em #ff3d9ab3;
}
.stat-hero {
  background: linear-gradient(135deg, #ff3d9a, #7c4dff);
  border-radius: 1.2em;
  flex: none;
  padding: 1.1em 1.2em;
}
.stat-hero span {
  opacity: 0.85;
  font-size: 0.85em;
}
.stat-hero b {
  font: 700 2.3em/1.1 var(--tr-num);
  display: block;
}
.ph-homebar {
  z-index: 6;
  background: #ffffffbf;
  border-radius: 0.2em;
  width: 8.5em;
  height: 0.3em;
  position: absolute;
  bottom: 0.6em;
  left: 50%;
  transform: translate(-50%);
}
.ti {
  --ti-x: calc(clamp(22px, 5.2vw, 104px) + env(safe-area-inset-left));
  --ti-xr: calc(clamp(22px, 5.2vw, 104px) + env(safe-area-inset-right));
  --bar: clamp(40px, 7.2vh, 82px);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  font-size: clamp(12px, 1.45vmin, 18px);
  transition:
    opacity 0.8s,
    visibility 0s linear 0.8s;
  position: absolute;
  inset: 0;
}
.ti.show {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.ti-photo {
  background: #07080c
    url(data:image/webp;base64,UklGRqIBAABXRUJQVlA4IJYBAAAQCgCdASpAACQAPkUaiUQioaEb/VVUKAREsoBUk4boOPiAzHET0MbE+Pejh0zxzjX5VfQ3+ctZVX/UpQvOnXX/4Ydv3Ccxvi4lExFrLbTFVowhJj2toKGguAD+dhOOTde/+QyUP8vx0iIpK/lPSKD2anBPFuhT5gvMsay7XkQxIAVR4wgFNys5v+lYnRDfhPkNUeM5/5de2jhyNVKCrRpnxhmlDWD9OCHbeBkc4Q9bGIyKiGYIoWgg9qP8wV9YxGNilk7VfCcNX4YC7ePYq5thGwEV6w1W/4TR6d8uzbyMTTvI2ey3IbmawbOv87w+hZDzn5rG7gNz3vQyFkqGcmaOgp19DQM0/dM8YNba0XsTgDDoesNWgthIaJ0p1JdMgKQg76u6MXjrq/LQtYZ2qEgxHOQj0XtO9cFX5jsJyRCsQIMzZGI1eJlXhHwp4pczrIC6/twgxviGfGsn2zSVr8ejxV33AzSP0o6wzZfZ1siFIAfJW4uRCoGye9WXDSn76Ne+Pg8ONDPU/EdqsOp7YFawRf+WBoAA)
    64% 18% / cover no-repeat;
  transition: opacity 0.45s;
  position: absolute;
  inset: 0;
}
.ti-photo img {
  object-fit: cover;
  object-position: 64% 18%;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.35s ease-out;
  display: block;
  position: absolute;
  inset: 0;
}
.ti-photo.on img {
  opacity: 1;
}
.ti.live .ti-photo {
  opacity: 0;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .ti-photo img {
    object-position: 50% 30%;
  }
}
@media (orientation: landscape) and (max-height: 519px) {
  .ti-photo img {
    object-position: 100% 40%;
  }
}
.ti.live .ti-shot {
  visibility: hidden;
}
.ti-vignette {
  pointer-events: none;
  background:
    linear-gradient(90deg, #050509db 0%, #05050999 26%, #0505091f 50%, #05050900 62%),
    linear-gradient(#05050900 74%, #0505098c),
    radial-gradient(at 62% 46%, #0000 48%, #00000080 100%);
  position: absolute;
  inset: 0;
}
.ti-bar {
  height: var(--bar);
  padding: 0 var(--ti-xr) 0 var(--ti-x);
  background: #050507;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
}
.ti-bar-top {
  transform-origin: top;
  height: calc(var(--bar) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  top: 0;
}
.ti-bar-bot {
  transform-origin: bottom;
  height: calc(var(--bar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  bottom: 0;
}
.ti.show .ti-bar {
  animation: 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both tiBar;
}
@keyframes tiBar {
  0% {
    transform: scaleY(2.4);
  }
  to {
    transform: none;
  }
}
.ti-legal {
  letter-spacing: 0.08em;
  color: #f4f1ea9e;
  white-space: nowrap;
  align-items: center;
  gap: 0.9em;
  min-width: 0;
  font-size: 0.78em;
  display: flex;
  overflow: hidden;
}
.ti-threads {
  min-height: 50px;
  color: var(--paper);
  background: #151215;
  border: 1px solid #373238;
  border-radius: 10px;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 5px 6px 5px 8px;
  line-height: 1.3;
  text-decoration: none;
  transition:
    border-color 0.18s,
    background 0.18s;
  display: flex;
  box-shadow: inset 0 1px #ffffff0b;
}
.ti-threads-icon {
  color: #fff;
  background: #09080a;
  border: 1px solid #494047;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font:
    500 28px/1 Georgia,
    serif;
  display: grid;
}
.ti-threads-copy {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.ti-threads-badge {
  color: #efaaad;
  letter-spacing: 0.035em;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}
.ti-threads-badge:before {
  content: "";
  background: #ff5864;
  border-radius: 50%;
  flex: none;
  width: 4px;
  height: 4px;
}
.ti-threads-handle {
  color: #fff;
  letter-spacing: 0.015em;
  font-size: 14px;
  font-weight: 700;
}
.ti-threads-cta {
  background: var(--paper);
  color: #171216;
  white-space: nowrap;
  border-radius: 6px;
  align-self: stretch;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}
.ti-threads:hover,
.ti-threads.focus,
.ti-threads:focus-visible {
  outline-offset: 3px;
  background: #21181c;
  border-color: #a76971;
  outline: 2px solid #edb1b6;
}
@media (max-width: 1300px) {
  .ti-bar-top .ti-legal {
    display: none;
  }
}
@media (max-width: 700px) {
  .ti-threads-cta {
    display: none;
  }
}
@media (max-height: 700px) and (min-width: 1101px) {
  .ti-threads {
    min-height: 36px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .ti-threads-icon {
    width: 28px;
    height: 28px;
    font-size: 24px;
  }
}
.ti-dot {
  background: #f4f1ea66;
  border-radius: 50%;
  flex: none;
  width: 3px;
  height: 3px;
}
.ti-tools {
  flex: none;
  align-items: center;
  gap: 0.6em;
  display: flex;
}
.ti-tool {
  height: 2.35em;
  color: var(--paper);
  letter-spacing: 0.06em;
  cursor: pointer;
  pointer-events: auto;
  background: #ffffff08;
  border: 1px solid #f4f1ea38;
  border-radius: 2px;
  outline: none;
  align-items: center;
  gap: 0.55em;
  padding: 0 1em 0 0.85em;
  font-size: 0.86em;
  font-weight: 700;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  display: inline-flex;
}
.ti-tool svg {
  width: 1.25em;
  height: 1.25em;
}
.ti-tool:hover,
.ti-tool.focus {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.ti-lang span {
  align-items: baseline;
  gap: 0.35em;
  display: inline-flex;
}
.ti-lang b {
  opacity: 0.5;
  font-weight: 700;
}
.ti-lang b.on {
  opacity: 1;
}
.ti-lang i {
  opacity: 0.35;
  font-style: normal;
}
.ti-left {
  left: var(--ti-x);
  top: var(--bar);
  bottom: var(--bar);
  flex-direction: column;
  justify-content: center;
  width: min(26em, 44vw);
  transition:
    opacity 0.35s,
    transform 0.35s;
  display: flex;
  position: absolute;
}
.ti.panel-open .ti-left {
  opacity: 0.16;
  pointer-events: none;
  transform: translate(-1em);
}
.ti.panel-open[data-panel="character"] .ti-left {
  opacity: 0;
}
.ti-logo {
  width: clamp(250px, 27vw, 540px);
  margin-left: -0.2em;
}
.ti-logo-svg {
  filter: drop-shadow(0 0.5vw 1.3vw #0009);
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.ti.show .ti-logo {
  animation: 1.2s cubic-bezier(0.2, 0.9, 0.25, 1) 0.35s both tiLogo;
}
@keyframes tiLogo {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(1.2em);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
.ti.show.from-loader .ti-logo {
  animation: 0.3s linear 0.44s both tiLogoHand;
}
@keyframes tiLogoHand {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ti-menu {
  flex-direction: column;
  gap: 0.2em;
  width: min(21em, 100%);
  margin-top: clamp(16px, 4.6vh, 58px);
  display: flex;
}
.ti.show:not(.intro-done) .ti-menu .mbtn {
  animation: 0.55s cubic-bezier(0.2, 1, 0.3, 1) both menuIn;
}
.ti.show .ti-menu .mbtn:first-child {
  animation-delay: 0.9s;
}
.ti.show .ti-menu .mbtn:nth-child(2) {
  animation-delay: 0.97s;
}
.ti.show .ti-menu .mbtn:nth-child(3) {
  animation-delay: 1.04s;
}
.ti.show .ti-menu .mbtn:nth-child(4) {
  animation-delay: 1.11s;
}
.ti.show .ti-menu .mbtn:nth-child(5) {
  animation-delay: 1.18s;
}
.ti.show .ti-menu .mbtn:nth-child(6) {
  animation-delay: 1.25s;
}
@keyframes menuIn {
  0% {
    opacity: 0;
    transform: translate(-1.2em);
  }
}
.ti-menu .mbtn {
  text-shadow: 0 1px 3px #0009;
  border-radius: 2px;
  gap: 1em;
  padding: 0.6em 1.1em 0.6em 1.2em;
}
.ti-menu .mbtn-ic {
  opacity: 0.8;
}
.ti-menu .mbtn-label b {
  letter-spacing: 0.1em;
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1.2;
}
.ti-menu .mbtn-label small {
  font: 700 0.7em/1.3 var(--tr-display);
  letter-spacing: 0.3em;
  opacity: 0.66;
}
.ti-menu .mbtn-meta {
  font: 600 0.8em/1.3 var(--tr-font);
  letter-spacing: 0.02em;
  opacity: 0.85;
  color: #ffe2a0;
  margin-top: 0.25em;
  display: block;
}
.ti-menu .mbtn.focus .mbtn-meta {
  color: #7a4b00;
}
.ti-menu .mbtn.focus {
  background: var(--paper);
  color: var(--ink);
  text-shadow: none;
  transform: none;
}
.ti-menu .mbtn.focus:before {
  background: var(--brand);
  width: 0.28em;
  box-shadow: none;
  border-radius: 0;
  top: 0;
  bottom: 0;
  left: 0;
}
.ti-menu .mbtn.focus .mbtn-ic {
  color: var(--brand);
  opacity: 1;
}
.ti-btn.primary .mbtn-label b {
  font-size: 1.55em;
}
.ti-btn.primary .mbtn-ic svg {
  width: 1.55em;
  height: 1.55em;
}
.ti-btn.primary:not(.focus) .mbtn-ic {
  color: #fff;
  opacity: 1;
}
.ti-tip {
  color: #f4f1eae0;
  align-items: center;
  gap: 0.9em;
  min-width: 0;
  font-size: 0.92em;
  display: flex;
}
.ti-tip b {
  background: var(--brand);
  color: #fff;
  letter-spacing: 0.12em;
  flex: none;
  padding: 0.22em 0.6em;
  font-size: 0.78em;
  font-weight: 800;
}
.ti-tip span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ti-tip span.swap {
  animation: 0.5s fadeUp;
}
.ti-tip .kc {
  font-size: 0.85em;
}
.ti-shot {
  text-align: right;
  white-space: nowrap;
  flex: none;
  align-items: baseline;
  gap: 0.9em;
  display: flex;
}
.ti-shot:before {
  content: "";
  background: var(--brand);
  align-self: center;
  width: 2.2em;
  height: 2px;
}
.ti-shot.show {
  animation: 0.9s both shotIn;
}
.ti-shot b {
  font: 800 1.2em/1 var(--tr-font);
  letter-spacing: 0.16em;
}
.ti-shot span {
  font: 700 0.72em var(--tr-display);
  letter-spacing: 0.28em;
  opacity: 0.7;
  text-transform: uppercase;
}
@keyframes shotIn {
  0% {
    opacity: 0;
    transform: translate(0.8em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ti-panel {
  right: var(--ti-xr);
  top: calc(var(--bar) + 2.4vh);
  bottom: calc(var(--bar) + 2.4vh);
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  justify-content: center;
  width: min(44em, 54vw);
  transition:
    opacity 0.3s,
    transform 0.35s cubic-bezier(0.2, 1, 0.3, 1);
  display: flex;
  position: absolute;
  transform: translate(2em);
}
.ti.panel-open .ti-panel {
  opacity: 1;
  transform: none;
}
.ti.panel-open .ti-panel .ti-pane.show {
  pointer-events: auto;
}
.ti[data-panel="character"] .ti-panel {
  right: auto;
  left: var(--ti-x);
  width: min(34em, 46vw);
}
.ti[data-panel="controls"] .ti-panel {
  width: min(64em, 66vw);
}
.ti-pane {
  border-top: 3px solid var(--brand);
  background: #08080ce0;
  border-radius: 3px;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  padding: 1.2em 1.4em 1.3em;
  display: none;
  box-shadow: 0 2em 5em #0000008c;
}
.ti-pane.show {
  display: flex;
}
.ti-pane-head {
  flex: none;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.8em;
  display: flex;
}
.ti-pane-title b {
  letter-spacing: 0.12em;
  font-size: 1.45em;
  font-weight: 900;
}
.ti-pane-title small {
  font: 700 0.75em var(--tr-display);
  opacity: 0.55;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-left: 0.8em;
}
.ti-pane-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.chars {
  flex-direction: column;
  gap: 0.8em;
  display: flex;
}
.char {
  --c1: #f4f1ea;
  --c2: #e0262f;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--text);
  background: linear-gradient(120deg, #ffffff0f, #ffffff05);
  border: 0;
  border-radius: 3px;
  outline: none;
  align-items: stretch;
  gap: 1em;
  padding: 0.9em;
  transition:
    box-shadow 0.2s,
    background 0.2s;
  display: flex;
  position: relative;
  box-shadow: inset 0 0 0 1px #ffffff14;
}
.char-wen {
  --c1: #ffd27a;
}
.char.focus {
  box-shadow: inset 0 0 0 2px var(--paper);
  background: linear-gradient(120deg, #ffffff1f, #ffffff0a);
}
.char.on {
  box-shadow:
    inset 0.3em 0 0 var(--brand),
    inset 0 0 0 1px #ffffff24;
}
.char.on.focus {
  box-shadow:
    inset 0.3em 0 0 var(--brand),
    inset 0 0 0 2px var(--paper);
}
.char.on .char-pick {
  background: var(--brand);
  color: #fff;
}
.char-art {
  background: radial-gradient(circle at 50% 35%, #e0262f38, #0000 70%), #0b0c12;
  border-radius: 2px;
  flex: none;
  width: 7.5em;
  overflow: hidden;
}
.char-art svg {
  width: 100%;
  height: 100%;
}
.char-art .char-shot {
  object-fit: cover;
  width: 100%;
  height: 100%;
  animation: 0.4s fadeUp;
  display: block;
}
.char-text {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}
.char-name b {
  letter-spacing: 0.1em;
  font-size: 2em;
  font-weight: 900;
}
.char-name small {
  opacity: 0.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-left: 0.6em;
  font-size: 0.8em;
}
.char-tag {
  letter-spacing: 0.24em;
  color: var(--c1);
  margin-top: 0.1em;
  font-size: 0.8em;
  font-weight: 800;
}
.char-desc {
  opacity: 0.85;
  margin-top: 0.5em;
  font-size: 0.95em;
  line-height: 1.55;
}
.char-pick {
  letter-spacing: 0.1em;
  background: #ffffff1a;
  border-radius: 2px;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.3em 0.9em;
  font-size: 0.8em;
  font-weight: 800;
}
.cg {
  gap: 0;
}
.cg-tabs {
  background: #ffffff0f;
  border-radius: 3px;
  align-self: flex-start;
  gap: 0.3em;
  margin-bottom: 0.9em;
  padding: 0.25em;
  display: flex;
}
.cg-tab {
  color: #f4f1eab3;
  letter-spacing: 0.06em;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 2px;
  outline: none;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.5em 1.1em;
  font-size: 0.95em;
  font-weight: 800;
  display: flex;
}
.cg-tab.on {
  background: var(--paper);
  color: var(--ink);
}
.cg-tab.focus:not(.on) {
  box-shadow: inset 0 0 0 1.5px #ffffff8c;
}
.cg-art {
  border-bottom: 1px solid #ffffff14;
  justify-content: center;
  margin-bottom: 0.4em;
  padding: 0.6em 0 1em;
  display: flex;
  position: relative;
}
.cart {
  width: 100%;
  max-width: 52em;
  height: auto;
  max-height: min(44vh, 26em);
  font-family: var(--tr-font);
  overflow: visible;
}
.cart text {
  font-family: var(--tr-font);
}
.ck rect {
  fill: #ffffff09;
  stroke: #ffffff29;
  stroke-width: 1.5px;
}
.ck .ck-k {
  fill: #fff6;
  font: 700 18px var(--tr-display);
}
.ck.on .ck-k {
  fill: #fff;
  font-size: 15px;
}
.ck .ck-a2 {
  fill: var(--amber);
  font-size: 12px;
  font-weight: 700;
}
.ck-leg .ck-l {
  fill: #f4f1ead9;
  font-size: 14px;
  font-weight: 700;
}
.ck .ck-a {
  fill: #ffffffeb;
  font-size: 13.5px;
  font-weight: 700;
}
.ck.on rect {
  stroke-width: 2px;
}
.ck.c-move rect {
  fill: #f4f1ea29;
  stroke: var(--paper);
}
.ck.c-act rect {
  fill: #e0262f47;
  stroke: #ff5a61;
}
.ck.c-drive rect {
  fill: #ffb13d33;
  stroke: var(--amber);
}
.ck.c-ui rect {
  fill: #35e0ff24;
  stroke: var(--cyan);
}
.cmouse .cm-body {
  fill: #ffffff0a;
  stroke: #ffffff59;
  stroke-width: 2px;
}
.cmouse .cm-l {
  fill: #e0262f4d;
  stroke: #ff5a61;
  stroke-width: 1.5px;
}
.cmouse .cm-r {
  fill: #ffb13d38;
  stroke: var(--amber);
  stroke-width: 1.5px;
}
.cmouse .cm-w {
  fill: #ffffffb3;
}
.cmouse .ck-a {
  fill: #fff;
  font-size: 14px;
  font-weight: 700;
}
.cmouse .ck-a.dim {
  fill: #ffffff9e;
  font-weight: 600;
}
.cp-body {
  fill: #1b1e27;
  stroke: #ffffff47;
  stroke-width: 2px;
}
.cp-trig,
.cp-bump {
  fill: #2b2f3b;
  stroke: #ffffff40;
  stroke-width: 1.5px;
}
.cp-stick {
  fill: #10121a;
  stroke: #ffffff4d;
  stroke-width: 2px;
}
.cp-stick-in {
  fill: #2b2f3b;
}
.cp-dpad path {
  fill: #2b2f3b;
  stroke: #ffffff4d;
  stroke-width: 1.5px;
}
.cp-face {
  stroke: #0006;
  stroke-width: 1.5px;
}
.cp-face.a {
  fill: #35c254;
}
.cp-face.b {
  fill: #e5443a;
}
.cp-face.x {
  fill: #3a86e6;
}
.cp-face.y {
  fill: #f0bf2a;
}
.cp-small {
  fill: #3a3f4d;
}
.cp-t {
  fill: #fff;
  font: 800 13px var(--tr-display);
}
.cp-t.dark {
  fill: #1b1400;
}
.cp-lead {
  fill: none;
  stroke: #ffffff59;
  stroke-width: 1.2px;
}
.cp-dot {
  fill: #fff;
}
.cp-l {
  fill: #f4f1eaeb;
  font-size: 15px;
  font-weight: 600;
}
.cp-key {
  fill: #ff5a61;
  font-weight: 800;
}
.ct-phone {
  fill: #0c0d12;
  stroke: #ffffff4d;
  stroke-width: 2px;
}
.ct-screen {
  fill: #1a2233;
}
.ct-look {
  fill: #ffffff0a;
  stroke: #ffffff47;
  stroke-width: 1.5px;
  stroke-dasharray: 6 6;
}
.ct-mm {
  fill: #0e1219;
  stroke: #ffffff59;
  stroke-width: 2px;
}
.ct-top {
  fill: #0c0e1499;
  stroke: #ffffff59;
  stroke-width: 1.2px;
}
.ct-stick {
  fill: #ffffff0d;
  stroke: #ffffff73;
  stroke-width: 2px;
}
.ct-knob {
  fill: #ffffffd9;
}
.ct-btn {
  fill: #0c0e148c;
  stroke: #ffffff8c;
  stroke-width: 1.8px;
}
.ct-btn.hot {
  stroke: #ff5a61;
  fill: #e0262f4d;
}
.ct-b {
  fill: #fff;
  font-size: 13px;
  font-weight: 800;
}
.ct-l {
  fill: #fff;
  font-size: 15px;
  font-weight: 700;
}
.ct-l.soft {
  fill: #ffffffb3;
  font-weight: 600;
}
.ct-l.note {
  fill: var(--amber);
  font-size: 14px;
}
.cg-sec {
  margin-top: 0.4em;
}
.cg-sec-title {
  z-index: 1;
  letter-spacing: 0.22em;
  color: var(--muted);
  background: #0a0a0ff7;
  align-items: baseline;
  gap: 0.7em;
  padding: 0.65em 0.7em 0.45em;
  font-size: 0.8em;
  display: flex;
  position: sticky;
  top: 0;
}
.cg-sec-title b {
  color: var(--paper);
  font-weight: 800;
}
.cg-sec-title small {
  font: 700 0.9em var(--tr-display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.8;
}
.cg-grid {
  grid-template-columns: 1fr 1fr;
  column-gap: 1.4em;
  display: grid;
}
.cg-row {
  pointer-events: auto;
  border-bottom: 1px solid #ffffff0f;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  min-height: 2.5em;
  padding: 0.3em 0.7em;
  display: flex;
}
.cg-row.focus {
  box-shadow: inset 0.2em 0 0 var(--brand);
  background: #ffffff14;
}
.cg-name {
  font-size: 0.98em;
  font-weight: 700;
}
.cg-keys {
  text-align: right;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.15em;
  display: flex;
}
.cg-keys .kc {
  margin: 0.1em 0 0.1em 0.3em;
}
.ti-pane-body,
.pm-content {
  scrollbar-width: thin;
  scrollbar-color: #ffffff47 transparent;
  padding-bottom: 2.4em;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 2.4em), #0000);
  mask-image: linear-gradient(#000 calc(100% - 2.4em), #0000);
}
.ti-pane-body::-webkit-scrollbar {
  width: 6px;
}
.pm-content::-webkit-scrollbar {
  width: 6px;
}
.ti-pane-body::-webkit-scrollbar-thumb {
  background: #ffffff40;
  border-radius: 3px;
}
.pm-content::-webkit-scrollbar-thumb {
  background: #ffffff40;
  border-radius: 3px;
}
body.tr-compact .cg-grid,
body.tr-portrait .cg-grid {
  grid-template-columns: 1fr;
}
@media (max-height: 760px) {
  .cart {
    max-height: 40vh;
  }
  .cg-row {
    min-height: 2.2em;
  }
}
.ig-wrap {
  z-index: 60;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  pointer-events: auto;
  opacity: 0;
  background: #030306c7;
  place-items: center;
  transition: opacity 0.25s;
  display: grid;
  position: absolute;
  inset: 0;
}
.ig-wrap.show {
  opacity: 1;
}
.ig-card {
  border-top: 3px solid var(--brand);
  background: #0d0e13;
  border-radius: 4px;
  width: min(52em, 100%);
  max-height: 100%;
  padding: 1.6em 1.8em 1.4em;
  font-size: clamp(11px, 1.7vmin, 15px);
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
  overflow-y: auto;
  transform: translateY(0.8em);
  box-shadow: 0 2em 5em #0009;
}
.ig-wrap.show .ig-card {
  transform: none;
}
.ig-kicker {
  font: 800 0.78em var(--tr-display);
  letter-spacing: 0.3em;
  color: #ff5a61;
  text-transform: uppercase;
}
.ig-title {
  letter-spacing: 0.04em;
  margin-top: 0.35em;
  font-size: 1.65em;
  font-weight: 900;
  line-height: 1.3;
}
.ig-sub {
  color: #f4f1eabf;
  margin-top: 0.5em;
  font-size: 0.98em;
  line-height: 1.6;
}
.ig-steps {
  align-items: flex-start;
  gap: 0.6em;
  margin: 1.4em 0 1.3em;
  display: flex;
}
.ig-step {
  text-align: center;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
  display: flex;
}
.ig-tx {
  flex-direction: column;
  gap: 0.3em;
  display: flex;
}
.ig-step b {
  margin-top: 0.4em;
  font-size: 1.02em;
  font-weight: 800;
}
.ig-step small {
  color: #f4f1ea9e;
  font-size: 0.82em;
  line-height: 1.45;
}
.ig-art {
  background: linear-gradient(160deg, #1d212c, #13151c);
  border-radius: 4px;
  place-items: center;
  width: 100%;
  max-width: 13em;
  height: 7.4em;
  display: grid;
  position: relative;
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.ig-n {
  background: var(--brand);
  color: #fff;
  width: 1.7em;
  height: 1.7em;
  font: 800 0.9em var(--tr-num);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: -0.5em;
  left: -0.5em;
}
.ig-arrow {
  color: #ffffff59;
  flex: none;
  width: 2.4em;
  margin-top: 3em;
}
.ig-bar {
  background: #ffffff1a;
  border-radius: 0.9em;
  align-items: center;
  gap: 0.5em;
  width: 86%;
  padding: 0.45em 0.5em;
  display: flex;
}
.ig-url {
  color: #ffffffb3;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  padding-left: 0.4em;
  font-size: 0.78em;
  overflow: hidden;
}
.ig-row.ig-tgl {
  justify-content: space-between;
}
.ig-row.ig-tgl b {
  background: #34c759;
  border-radius: 999px;
  flex: none;
  width: 2.1em;
  height: 1.2em;
  position: relative;
}
.ig-row.ig-tgl b:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 0.96em;
  height: 0.96em;
  position: absolute;
  top: 0.12em;
  right: 0.12em;
}
.ig-btn {
  color: #3d9bff;
  border-radius: 50%;
  place-items: center;
  width: 2em;
  height: 2em;
  display: grid;
  position: relative;
}
.ig-btn svg {
  width: 1.3em;
  height: 1.3em;
}
.ig-dim {
  opacity: 0.4;
}
.ig-pulse:after {
  content: "";
  border: 2px solid #3d9bff;
  border-radius: 50%;
  animation: 1.6s ease-out infinite igPulse;
  position: absolute;
  inset: -0.2em;
}
@keyframes igPulse {
  0% {
    opacity: 1;
    transform: scale(0.8);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}
.ig-sheet {
  flex-direction: column;
  gap: 0.3em;
  width: 84%;
  display: flex;
}
.ig-row {
  background: #ffffff12;
  border-radius: 0.5em;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.6em;
  font-size: 0.8em;
  display: flex;
}
.ig-row i {
  background: #ffffff40;
  border-radius: 0.25em;
  width: 1.1em;
  height: 1.1em;
}
.ig-row span:empty {
  background: #ffffff26;
  border-radius: 0.25em;
  flex: 1;
  height: 0.5em;
}
.ig-row.ig-hot {
  background: #3d9bff38;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px #3d9bff;
}
.ig-row svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}
.ig-bar.ig-bar-top {
  background: #ffffff24;
  border-radius: 0.6em;
  align-self: flex-start;
  margin-top: 1.1em;
  box-shadow:
    0 1.2em 0 -0.35em #ffffff0a,
    0 2.4em 0 -0.35em #ffffff08;
}
.ig-bar-top .ig-btn {
  width: 1.7em;
  height: 1.7em;
}
.ig-open {
  color: #cfe6ff;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8em;
  font-weight: 700;
  display: flex;
}
.ig-open svg {
  filter: drop-shadow(0 0.35em 0.8em #00000080);
  width: 3.4em;
  height: 3.4em;
}
.ig-home {
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  font-size: 0.8em;
  font-weight: 600;
  display: flex;
}
.ig-home img {
  border-radius: 0.85em;
  width: 3.6em;
  height: 3.6em;
  box-shadow: 0 0.4em 1em #00000080;
}
.ig-btns {
  justify-content: flex-end;
  gap: 0.6em;
  display: flex;
}
.ig-btns .mbtn {
  background: #ffffff14;
  border-radius: 2px;
  width: auto;
  padding: 0.65em 1.4em;
  transform: none;
}
.ig-btns .mbtn.primary {
  background: var(--brand);
}
.ig-btns .mbtn.focus {
  box-shadow: 0 0 0 2px var(--paper);
}
.ig-btns .mbtn.focus:before {
  display: none;
}
.ig-btns .mbtn-label {
  letter-spacing: 0.06em;
  font-size: 1em;
  font-weight: 800;
}
body.tr-portrait .ig-steps {
  flex-direction: column;
  align-items: stretch;
}
body.tr-portrait .ig-step {
  text-align: left;
  flex-direction: row;
  align-items: center;
  gap: 1em;
}
body.tr-portrait .ig-step .ig-art {
  flex: none;
  width: 9.5em;
  height: 5.6em;
}
body.tr-portrait .ig-arrow {
  display: none;
}
.ig-row > span:not(:empty) {
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
body.tr-portrait .ig-sheet {
  gap: 0.2em;
  width: 90%;
}
body.tr-portrait .ig-row {
  padding: 0.3em 0.5em;
  font-size: 0.7em;
}
@media (max-height: 460px) {
  .ig-card {
    padding: 1em 1.3em;
  }
  .ig-sub {
    display: none;
  }
  .ig-steps {
    margin: 0.9em 0;
  }
  .ig-art {
    height: 6em;
  }
}
body.tr-is-touch {
  --mm: calc(clamp(84px, 25vmin, 150px) * var(--ui-scale));
  --pad: clamp(8px, 2vmin, 20px);
  --tu: min(1vmin, 4.6px);
}
.tc {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s linear 0.3s;
  position: absolute;
  inset: 0;
}
.tc.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
}
.tc-look {
  pointer-events: auto;
  touch-action: none;
  position: absolute;
  inset: 0;
}
.tc-stick {
  pointer-events: auto;
  touch-action: none;
  width: 44%;
  height: 68%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.tc-base {
  --bs: calc(34 * var(--tu));
  width: var(--bs);
  height: var(--bs);
  margin: calc(var(--bs) / -2) 0 0 calc(var(--bs) / -2);
  opacity: 0.6;
  background: radial-gradient(circle, #ffffff17, #ffffff05 70%);
  border: 2px solid #ffffff4d;
  border-radius: 50%;
  transition:
    opacity 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  position: absolute;
  top: 0;
  left: 0;
}
.tc-base.active {
  opacity: 1;
  border-color: #fff9;
}
.tc-base.sprint {
  border-color: var(--amber);
  box-shadow: 0 0 1.4em #ffb13d8c;
}
.tc-knob {
  --ks: calc(15 * var(--tu));
  width: var(--ks);
  height: var(--ks);
  margin: calc(var(--ks) / -2) 0 0 calc(var(--ks) / -2);
  background: #ffffffe0;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 4px 12px #00000059;
}
.tc-cluster {
  width: 1px;
  height: 1px;
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
}
.tc-cluster.show {
  display: block;
}
.tc-btn {
  --s: 16;
  --r: 0;
  --b: 0;
  width: calc(var(--s) * var(--tu));
  height: calc(var(--s) * var(--tu));
  right: calc(var(--r) * var(--tu) + env(safe-area-inset-right));
  bottom: calc(var(--b) * var(--tu) + env(safe-area-inset-bottom));
  color: #fff;
  pointer-events: auto;
  touch-action: none;
  background: #0c0e146b;
  border: 2px solid #ffffff6b;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.1em;
  transition:
    transform 80ms,
    background 80ms;
  display: flex;
  position: absolute;
  box-shadow: 0 4px 14px #00000040;
}
.tc-btn svg {
  filter: drop-shadow(0 1px 2px #0009);
  width: 40%;
  height: 40%;
}
.tc-btn.down {
  background: #ff3d9a9e;
  border-color: #fff;
  transform: scale(0.93);
}
.tc-btn.small svg {
  width: 48%;
  height: 48%;
}
.tc-lbl {
  font-size: max(10.5px, calc(2.6 * var(--tu)));
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
  font-weight: 800;
  line-height: 1;
}
.tc-btn.small .tc-lbl {
  display: none;
}
.tc-btn.big {
  background: #0c0e1480;
  border-color: #fff9;
}
.tc-btn.big svg {
  width: 38%;
  height: 38%;
}
.b-attack {
  --s: 22;
  --r: 4;
  --b: 5;
}
.b-jump {
  --r: 34;
  --b: 10;
}
.b-aim {
  --r: 26;
  --b: 27;
}
.b-sprint {
  --r: 9;
  --b: 35;
}
.b-enter {
  --s: 14;
  --r: 53;
  --b: 15;
}
.b-interact {
  --s: 14;
  --r: 42;
  --b: 38;
}
.b-reload {
  --s: 13;
  --r: 72;
  --b: 12;
}
.tc-foot .b-aim,
.tc-foot .b-reload,
.tc-foot .b-enter {
  display: none;
}
.tc-foot.armed .b-aim,
.tc-foot.armed .b-reload,
.tc-foot.can-enter .b-enter {
  animation: 0.22s cubic-bezier(0.2, 1.4, 0.4, 1) tcPop;
  display: flex;
}
@keyframes tcPop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
}
.tc-drive .b-interact {
  display: none;
}
.tc-drive.can-interact .b-interact {
  display: flex;
}
.tc-pedal {
  border-radius: calc(4 * var(--tu));
}
.b-gas {
  --r: 4;
  --b: 5;
  width: calc(16 * var(--tu));
  height: calc(28 * var(--tu));
}
.b-brake {
  --r: 23;
  --b: 5;
  width: calc(16 * var(--tu));
  height: calc(21 * var(--tu));
}
.b-hb {
  --s: 14;
  --r: 42;
  --b: 6;
}
.b-exit {
  --s: 13;
  --r: 22;
  --b: 31;
}
.b-horn {
  --s: 13;
  --r: 5;
  --b: 37;
}
.b-radio {
  --s: 11;
  --r: 40;
  --b: 24;
}
.b-cam {
  --s: 11;
  --r: 58;
  --b: 8;
}
.tc-top {
  top: calc(var(--pad) + env(safe-area-inset-top));
  left: calc(var(--pad) + var(--mm) + 12px + env(safe-area-inset-left));
  pointer-events: none;
  gap: 6px;
  display: flex;
  position: absolute;
}
.tc-topbtn {
  width: max(32px, calc(9.5 * var(--tu)));
  height: max(32px, calc(9.5 * var(--tu)));
  color: #fff;
  pointer-events: auto;
  touch-action: none;
  background: #0c0e1480;
  border: 1px solid #ffffff47;
  border-radius: 10px;
  place-items: center;
  display: grid;
}
.tc-topbtn svg {
  width: 50%;
  height: 50%;
}
.tc-rotate {
  z-index: 40;
  pointer-events: auto;
  background: #06080ed1;
  place-items: center;
  display: none;
  position: absolute;
  inset: 0;
}
@media (orientation: portrait) {
  body.tr-is-touch .tc-rotate.show:not(.dismissed) {
    display: grid;
  }
}
.tc-rotate-card {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  display: flex;
}
.tc-rotate-card b {
  font-size: 18px;
  display: block;
}
.tc-rotate-card small {
  opacity: 0.6;
  margin-top: 4px;
  font-size: 12px;
  display: block;
}
.tc-rotate-ic svg {
  width: 64px;
  height: 64px;
  color: var(--pink);
  overflow: visible;
}
.tc-rotate-ic .rp {
  transform-origin: 32px 28px;
  animation: 2.4s cubic-bezier(0.6, 0, 0.3, 1) infinite rotatePhone;
}
.tc-rotate-ic .ra {
  opacity: 0.85;
  animation: 2.4s ease-in-out infinite rotateArrow;
}
@keyframes rotatePhone {
  0%,
  22% {
    transform: rotate(0);
  }
  52%,
  84% {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(0);
  }
}
@keyframes rotateArrow {
  0%,
  15% {
    opacity: 0.9;
  }
  50%,
  90% {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}
body.tr-is-touch {
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --gl: calc(62 * var(--tu) + 6px);
  --gr: calc(var(--sar) + 71 * var(--tu));
  --objl: calc(var(--pad) + var(--sal) + var(--mm) + 12px + 3 * var(--tbv) + 16px + 14px);
  --objr: calc(var(--pad) + var(--sar) + 8.2em);
}
body.tr-is-touch .mm-wrap {
  top: calc(var(--pad) + var(--sat));
  bottom: auto;
  left: calc(var(--pad) + var(--sal));
}
body.tr-is-touch .mm-bars {
  margin-top: 0.5em;
}
body.tr-is-touch .hud-feed {
  top: calc(var(--pad) + var(--sat) + var(--tbv) + 10px);
  bottom: auto;
  left: calc(var(--pad) + var(--sal) + var(--mm) + 12px);
  gap: 0.3em;
  width: min(22em, 34vw);
}
body.tr-is-touch .toast {
  padding: 0.45em 0.8em 0.45em 0.6em;
  font-size: max(12px, 0.92em);
  line-height: 1.4;
}
body.tr-is-touch .hud-obj {
  top: calc(var(--pad) + var(--sat) + 0.1em);
  bottom: auto;
  left: var(--objl);
  right: var(--objr);
  justify-content: center;
  align-items: flex-start;
  max-width: none;
  font-size: max(12.5px, 1em);
  line-height: 1.35;
  transform: none;
}
body.tr-is-touch .obj-text {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-align: center;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
body.tr-is-touch .obj-mark {
  margin-top: 0.45em;
}
body.tr-is-touch .hud-tr {
  top: calc(var(--pad) + var(--sat));
  right: calc(var(--pad) + var(--sar));
  gap: 0.12em;
}
body.tr-is-touch .tr-money {
  font-size: 2.2em;
}
body.tr-is-touch .tr-wanted .star svg {
  width: 1.6em;
  height: 1.6em;
}
body.tr-is-touch .tr-weapon {
  pointer-events: auto;
  opacity: 1;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  transform: none;
}
body.tr-is-touch .tr-weapon.driving,
body.tr-is-touch .tr-weapon.solo {
  display: none;
}
body.tr-is-touch .tr-clock .clock {
  font-size: 1.25em;
}
body.tr-is-touch .tr-clock {
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}
@media (max-width: 700px) and (orientation: landscape) {
  body.tr-is-touch {
    --gl: calc(46 * var(--tu) + 6px);
    --gr: calc(var(--sar) + 60 * var(--tu));
  }
}
body.tr-is-touch .tr-weapon .wicon svg {
  width: 2.4em;
  height: 1.7em;
}
body.tr-is-touch .hud-bars {
  align-items: flex-end;
  gap: 0.2em;
  margin: 0.15em 0 0;
  position: static;
}
body.tr-is-touch .hb {
  gap: 0.8em;
  min-width: 0;
  padding: 0.22em 0.2em 0.22em 1.4em;
}
body.tr-is-touch .hb-label {
  letter-spacing: 0.06em;
  font-size: max(11px, 0.85em);
}
body.tr-is-touch .hb-val {
  min-width: 2.4em;
  font-size: 1.45em;
}
body.tr-is-touch .hb-bar {
  width: 5.2em;
}
.hud-cs {
  left: var(--gl);
  right: var(--gr);
  bottom: calc(var(--pad) + var(--sab));
  pointer-events: none;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35em;
  transition: bottom 0.2s;
  display: flex;
  position: absolute;
}
.tr-ui.drv .hud-cs {
  bottom: calc(var(--pad) + var(--sab) + 2.9em);
}
.hud-off .hud-cs > :not(.hud-sub),
.photo .hud-cs > :not(.hud-sub),
.faded .hud-cs > :not(.hud-sub) {
  visibility: hidden;
}
.hud-cs > * {
  max-width: 100%;
  position: static !important;
  transform: none !important;
}
body.tr-is-touch .hud-sub {
  max-width: 100%;
  font-size: max(12.5px, 1.02em);
  line-height: 1.4;
  display: none;
}
body.tr-is-touch .hud-sub.show {
  display: block;
}
body.tr-is-touch .hud-cs .hud-prompts {
  gap: 0.3em;
  width: 100%;
}
body.tr-is-touch .hud-prompt {
  white-space: normal;
  text-align: center;
  background: #0a0a0ee0;
  border: 1px solid #e0262f8c;
  border-radius: 0.8em;
  max-width: 100%;
  padding: 0.42em 0.9em;
  font-size: max(12.5px, 0.98em);
  line-height: 1.35;
}
body.tr-is-touch .hud-prompt.second {
  border-color: #ffffff38;
  font-size: max(12px, 0.9em);
}
.tr-ui.mis-card .hud-feed .toast,
.tr-ui.mis-card .hud-prompts {
  opacity: 0;
  transition: opacity 0.2s;
}
body.tr-is-touch .hud-area {
  text-align: center;
}
body.tr-is-touch .area-name {
  letter-spacing: 0.1em;
  font-size: 1.75em;
}
body.tr-compact .area-name {
  font-size: 1.45em;
}
body.tr-is-touch .area-alt {
  letter-spacing: 0.4em;
  margin-right: 0;
  font-size: max(10.5px, 0.8em);
}
body.tr-is-touch .area-tag {
  display: none;
}
.hud-area-dock {
  left: calc(var(--pad) + var(--sal));
  top: calc(var(--pad) + var(--sat) + var(--mm) + 1.5em);
  max-width: calc(var(--mm) + 5em);
  pointer-events: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;
  display: flex;
  position: absolute;
}
.hud-area-dock .hud-area {
  text-align: left;
}
.hud-area-dock .hud-street {
  transform-origin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 0.88em;
}
.hud-area-dock .area-name {
  letter-spacing: 0.08em;
  font-size: 1.3em;
}
.hud-area-dock .area-alt {
  letter-spacing: 0.3em;
  font-size: max(9.5px, 0.68em);
}
.hud-area.quick.show {
  animation-duration: 2.6s;
}
body.tr-is-touch .hud-street {
  min-width: 0;
  max-width: 100%;
}
body.tr-is-touch .st-zh {
  font-size: 1.1em;
}
body.tr-is-touch .st-en {
  font-size: max(10.5px, 0.72em);
}
body.tr-compact .st-en {
  display: none;
}
body.tr-is-touch .hud-fire {
  font-size: 0.92em;
}
body.tr-is-touch .hud-br {
  top: auto;
  bottom: calc(var(--pad) + var(--sab));
  left: var(--gl);
  right: var(--gr);
  pointer-events: none;
  align-items: center;
  gap: 0;
}
body.tr-is-touch .hud-speedo {
  background: #080a109e;
  border-radius: 999px;
  width: 7.6em;
  height: 2.4em;
  margin: 0;
  padding: 0 0.9em;
}
body.tr-is-touch .hud-speedo.show {
  justify-content: center;
  align-items: center;
  display: flex;
}
body.tr-is-touch .hud-speedo:before,
body.tr-is-touch .spd-gauge,
body.tr-is-touch .spd-foot,
body.tr-is-touch .spd-gear {
  display: none;
}
body.tr-is-touch .spd-center {
  align-items: baseline;
  gap: 0.3em;
  display: flex;
  position: static;
}
body.tr-is-touch .spd-num {
  font-size: 1.75em;
}
body.tr-is-touch .spd-unit {
  opacity: 0.8;
  font-size: max(10.5px, 0.78em);
}
body.tr-is-touch .hud-speedo.burning {
  background: #a01410d9;
  animation: 0.8s step-end infinite fireBlink;
}
body.tr-is-touch .hud-lock {
  display: none;
}
body.tr-is-touch .hud-radio {
  border-radius: 999px;
  align-self: flex-start;
  gap: 0.5em;
  max-width: 100%;
  padding: 0.3em 0.8em 0.3em 0.55em;
  display: none;
  position: relative;
  top: auto;
  left: auto;
  transform: translate(-0.4em);
}
body.tr-is-touch .hud-radio.show {
  animation: 0.3s both toastIn;
  display: flex;
  transform: none;
}
body.tr-is-touch .hud-radio .r-icon svg {
  width: 1.2em;
  height: 1.2em;
}
body.tr-is-touch .hud-radio .r-text {
  white-space: nowrap;
  align-items: baseline;
  gap: 0.45em;
  min-width: 0;
  display: flex;
}
body.tr-is-touch .hud-radio .r-name {
  text-overflow: ellipsis;
  font-size: max(12px, 0.95em);
  overflow: hidden;
}
body.tr-is-touch .hud-radio .r-freq {
  font-size: max(11px, 0.8em);
}
body.tr-is-touch .hud-radio .r-alt,
body.tr-is-touch .hud-radio .r-song,
body.tr-is-touch .hud-radio .r-dots {
  display: none;
}
body.tr-is-touch .hud-big {
  top: 26%;
}
body.tr-is-touch .hud-mission {
  top: 24%;
}
body.tr-is-touch .kc-touch {
  font-size: max(11px, 0.82em);
}
body.tr-is-touch .kc {
  font-size: max(11px, 0.9em);
}
body.tr-is-touch .hud-help {
  font-size: max(12px, 0.95em);
}
body.tr-is-touch .hh-title {
  font-size: max(10.5px, 0.8em);
}
body.tr-is-touch .wp-dist {
  font-size: max(11px, 1em);
}
body.tr-is-touch .tr-weapon .wname {
  font-size: max(10.5px, 0.85em);
}
body.tr-compact .tr-ui {
  font-size: calc(11.5px * var(--ui-scale));
}
body.tr-compact .big-title {
  font-size: min(4.4em, calc(92vw / var(--tw, 4)));
}
body.tr-compact .ti {
  --bar: 54px;
  font-size: 12px;
}
body.tr-compact .ti-threads {
  min-height: 44px;
  padding-top: 3px;
  padding-bottom: 3px;
}
body.tr-compact .ti-left {
  width: auto;
  right: var(--ti-xr);
  flex-direction: row;
  align-items: center;
  gap: 5vw;
}
body.tr-compact .ti-logo {
  flex: none;
  width: min(36vw, 280px);
}
body.tr-compact .ti-menu {
  width: min(17em, 40vw);
  margin-top: 0;
}
body.tr-compact .ti-menu .mbtn {
  padding: 0.42em 0.9em;
}
body.tr-compact .ti-menu .mbtn-label b {
  font-size: 1.12em;
}
body.tr-compact .ti-menu .mbtn-label small {
  letter-spacing: 0.22em;
  font-size: 0.62em;
}
body.tr-compact .ti-menu .mbtn-meta {
  font-size: 0.72em;
}
body.tr-compact .ti-btn.primary .mbtn-label b {
  font-size: 1.3em;
}
body.tr-compact .ti-legal-2,
body.tr-compact .ti-legal .ti-dot {
  display: none;
}
body.tr-compact .ti-tip {
  font-size: 0.85em;
}
body.tr-compact .ti-shot span {
  display: none;
}
body.tr-compact .ti-pane {
  padding: 0.8em 1em;
}
body.tr-compact .ti-panel {
  width: min(40em, 62vw);
  top: calc(var(--bar) + 8px);
  bottom: calc(var(--bar) + 8px);
}
body.tr-compact .ti[data-panel="controls"] .ti-panel {
  width: auto;
  left: var(--ti-x);
}
body.tr-compact .ti-tool {
  height: 26px;
  font-size: 11px;
}
body.tr-compact .ph-wrap {
  bottom: 4vh;
  right: 50%;
  transform: translate(50%, 120%);
}
body.tr-compact .ph-wrap.show {
  transform: translate(50%);
}
body.tr-compact .ph-close {
  top: 0;
  right: auto;
  left: calc(
    100% + clamp(-40px, (100vw - 100%) / 2 - env(safe-area-inset-right, 0px) - 50px, 12px)
  );
}
body.tr-compact .phone {
  aspect-ratio: auto;
  border-radius: 2.2em;
  width: min(640px, 86vw);
  height: 90vh;
  padding: 0.55em;
  font-size: 11px;
}
body.tr-compact .ph-screen {
  border-radius: 1.7em;
}
body.tr-compact .ph-screen:before {
  opacity: 0.8;
  height: 60%;
}
body.tr-compact .ph-notch {
  width: 1.5em;
  height: 5.5em;
  top: 50%;
  left: 0.9em;
  transform: translateY(-50%);
}
body.tr-compact .ph-status {
  top: 0.8em;
  left: 3.4em;
  right: 1.5em;
}
body.tr-compact .ph-page {
  padding: 2.5em 1.3em 1.1em 3.4em;
}
body.tr-compact .ph-home.show {
  flex-direction: row;
  align-items: center;
  gap: 1.4em;
}
body.tr-compact .ph-widget {
  text-align: left;
  flex: none;
  width: 30%;
  margin: 0;
}
body.tr-compact .ph-wclock {
  font-size: 4em;
}
body.tr-compact .ph-apps {
  flex: 1;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1em 0.3em;
  margin: 0;
}
body.tr-compact .ph-app-ic {
  border-radius: 1em;
  width: 3.7em;
  height: 3.7em;
}
body.tr-compact .ph-app-ic svg {
  width: 1.8em;
  height: 1.8em;
}
body.tr-compact .ph-dock,
body.tr-compact .ph-homebar {
  display: none;
}
body.tr-compact .ph-head {
  margin-bottom: 0.5em;
}
body.tr-compact .md-btns {
  grid-template-columns: 1fr 1fr;
}
body.tr-compact .wx-card {
  display: none;
}
body.tr-compact .pm-nav {
  scrollbar-width: none;
  width: 12em;
  overflow-y: auto;
}
body.tr-compact .pm-btn {
  padding: 0.4em 0.8em;
}
body.tr-compact .pm-btn .mbtn-label small {
  display: none;
}
body.tr-compact .pm-btn .mbtn-label b {
  font-size: 1.2em;
}
body.tr-compact .pm-top {
  top: calc(2vh + env(safe-area-inset-top));
  padding-bottom: 0.6em;
}
body.tr-compact .pm-logo,
body.tr-compact .pm-paused {
  display: none;
}
body.tr-compact .pm-info {
  justify-content: flex-start;
  margin-left: 0;
}
body.tr-compact .pm-body {
  top: calc(2vh + env(safe-area-inset-top) + 3.4em);
  bottom: calc(1em + env(safe-area-inset-bottom));
}
body.tr-compact .pm-foot {
  display: none;
}
body.tr-compact .pm-card-title {
  font-size: 2.6em;
}
body.tr-compact .pm-mini {
  width: 9em;
  height: 9em;
}
body.tr-portrait .pm {
  --pm-x: calc(4vw + env(safe-area-inset-left));
  --pm-xr: calc(4vw + env(safe-area-inset-right));
}
body.tr-portrait .pm-top {
  flex-wrap: wrap;
  gap: 0.5em;
}
body.tr-portrait .pm-body {
  top: calc(2vh + env(safe-area-inset-top) + 3.6em);
  flex-direction: column;
  gap: 0.8em;
}
body.tr-portrait .pm-nav {
  flex-direction: row;
  flex: none;
  gap: 0.3em;
  width: auto;
  padding-bottom: 0.3em;
  overflow: auto hidden;
}
body.tr-portrait .pm-btn {
  flex: none;
  width: auto;
  padding: 0.55em 0.95em;
}
body.tr-portrait .pm-btn.focus {
  transform: none;
}
body.tr-portrait .pm-btn .mbtn-label small {
  display: none;
}
body.tr-portrait .pm-btn .mbtn-label b {
  white-space: nowrap;
  font-size: 1.05em;
}
body.tr-portrait .pm-btn.active:after {
  display: none;
}
body.tr-portrait .pm-btn.active:not(.focus) {
  box-shadow: inset 0 -0.2em 0 var(--brand);
}
body.tr-portrait .pm-content {
  padding-right: 0;
}
body.tr-portrait .pm-card {
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
  padding: 1.2em;
}
body.tr-portrait .pm-mini {
  align-self: center;
  width: 10em;
  height: 10em;
}
body.tr-portrait .pm-card-title {
  font-size: 2.4em;
}
body.tr-portrait .pm-mission-row {
  flex-wrap: wrap;
}
body.tr-portrait .srow {
  flex-wrap: wrap;
  gap: 0.45em;
}
body.tr-portrait .srow-label {
  flex: 100%;
}
body.tr-portrait .srow-ctl {
  flex: 100%;
  justify-content: flex-start;
  min-width: 0;
}
body.tr-portrait .seg {
  scrollbar-width: none;
  max-width: 100%;
  overflow-x: auto;
}
body.tr-portrait .seg::-webkit-scrollbar {
  display: none;
}
body.tr-portrait .sl-track {
  flex: 1;
  width: auto;
}
@media (max-height: 760px) {
  .srow {
    padding-top: 0.45em;
    padding-bottom: 0.45em;
  }
  .panel-sec {
    margin-top: 0.7em;
  }
}
body.tr-compact .fm-legbtn {
  pointer-events: auto;
  margin-left: auto;
  display: grid;
}
body.tr-compact .fm-stats {
  margin-left: 0.6em;
}
body.tr-compact .fm-side {
  top: calc(3.6em + env(safe-area-inset-top, 0px));
  right: calc(0.8em + env(safe-area-inset-right, 0px));
  max-height: calc(100% - 4.6em - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  width: 14em;
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0s linear 0.2s;
  transform: translate(1em);
}
body.tr-compact .fm-side.open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.2s,
    transform 0.2s;
  transform: none;
}
body.tr-compact .fm-leg {
  padding-top: 0.34em;
  padding-bottom: 0.34em;
  font-size: max(12px, 0.92em);
}
body.tr-compact .fm-hints {
  display: none;
}
body.tr-compact .fm-top {
  padding: calc(0.6em + env(safe-area-inset-top, 0px)) calc(1em + env(safe-area-inset-right, 0px))
    1.6em calc(1em + env(safe-area-inset-left, 0px));
}
body.tr-portrait .ti {
  --bar: 64px;
}
body.tr-portrait .ti-bar-top {
  gap: 8px;
}
body.tr-portrait .ti-threads {
  border-radius: 8px;
  flex: 0 auto;
  gap: 7px;
  min-width: 0;
  padding: 5px;
}
body.tr-portrait .ti-threads-icon {
  background: 0 0;
  border: 0;
  width: 27px;
  height: 30px;
  font-size: 24px;
}
body.tr-portrait .ti-threads-badge {
  letter-spacing: 0;
  font-size: 10px;
}
body.tr-portrait .ti-threads-handle {
  font-size: 12px;
}
body.tr-portrait .ti-threads-cta {
  display: none;
}
body.tr-portrait .ti-left {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  width: auto;
  padding-bottom: 4vh;
  left: 6vw;
  right: 6vw;
}
body.tr-portrait .ti-logo {
  width: min(80vw, 380px);
  margin: 0 0 4vh;
}
body.tr-portrait .ti-menu {
  width: min(86vw, 22em);
}
body.tr-portrait .ti-vignette {
  background: linear-gradient(#0505091a, #0505098c 45%, #050509f0);
}
body.tr-portrait .ti-panel,
body.tr-portrait .ti[data-panel="character"] .ti-panel,
body.tr-portrait .ti[data-panel="controls"] .ti-panel {
  width: auto;
  left: 4vw;
  right: 4vw;
}
body.tr-portrait .ti-shot,
body.tr-portrait .ti-legal-2,
body.tr-portrait .ti-legal .ti-dot,
body.tr-portrait .ti-tool span {
  display: none;
}
body.tr-portrait .ti-tool {
  padding: 0 0.7em;
}
@media (prefers-reduced-motion: reduce) {
  .ti-threads {
    transition: none;
  }
  .ti.show .ti-bar,
  .ti.show .ti-logo {
    animation: none;
  }
  .ti-photo,
  .ti-photo img {
    transition: none;
  }
  .wp-pin {
    animation: none;
  }
}
.phone-open .hud-br,
.phone-open .hud-tr,
.phone-open .hud-prompts {
  opacity: 0;
  transition: opacity 0.2s;
}
body:not(.tr-is-touch) .tr-ui.drv .hud-obj {
  bottom: auto;
  top: calc(var(--pad) + 6em);
  opacity: 0.9;
  font-size: 1.08em;
}
body:not(.tr-is-touch) .tr-ui.drv .hud-obj:not(.show) {
  opacity: 0;
}
body.tr-is-touch.tr-portrait {
  --objl: calc(var(--pad) + var(--sal));
  --objr: calc(var(--pad) + var(--sar));
}
body.tr-is-touch.tr-portrait .hud-obj {
  top: calc(var(--pad) + var(--sat) + var(--mm) + 2.4em);
}
body.tr-is-touch.tr-portrait .hud-feed {
  top: calc(var(--pad) + var(--sat) + var(--mm) + 6em);
  left: calc(var(--pad) + var(--sal));
  width: 64vw;
}
body.tr-is-touch.tr-portrait .hud-cs {
  left: calc(var(--pad) + var(--sal));
  right: calc(var(--pad) + var(--sar));
  bottom: 38%;
}
body.tr-is-touch.tr-portrait .tr-ui.drv .hud-cs,
.tr-portrait .tr-ui.drv .hud-cs {
  bottom: 38%;
}
body.tr-is-touch.tr-portrait .hud-br {
  left: calc(var(--pad) + var(--sal));
  align-items: flex-start;
  bottom: calc(38% - 3.2em);
  right: auto;
}
body.tr-portrait .b-reload,
body.tr-portrait .b-cam {
  display: none !important;
}
body.tr-portrait .tc-stick {
  width: 36%;
}
body.tr-portrait .b-enter {
  --r: 20;
  --b: 52;
}
body.tr-portrait .b-interact {
  --r: 40;
  --b: 44;
}
body.tr-is-touch {
  --tbv: max(32px, calc(9 * var(--tu)));
  --tb: var(--tbv);
}
.tc-topbtn {
  width: var(--tbv);
  height: var(--tbv);
  position: relative;
}
.tc-topbtn:after {
  content: "";
  inset: min(-6px, calc((var(--tbv) - 44px) / 2));
  border-radius: 12px;
  position: absolute;
}
.tc-top {
  gap: 8px;
}
.tc-btn.hl {
  background: #e0262f8c;
  border-color: #fff;
  animation: 1.1s ease-in-out infinite tcHl;
}
@keyframes tcHl {
  0%,
  to {
    box-shadow:
      0 0 #e0262fbf,
      0 4px 14px #00000040;
  }
  60% {
    box-shadow:
      0 0 0 0.8em #e0262f00,
      0 4px 14px #00000040;
  }
}
.tc-btn.holding {
  animation: 0.35s linear forwards tcHold;
}
@keyframes tcHold {
  0% {
    background: #0c0e146b;
  }
  to {
    background: #e0262fe6;
    transform: scale(0.9);
  }
}
.tc-rotate-card {
  border-top: 3px solid var(--brand);
  background: #0d0e13;
  padding: 22px 26px;
}
.tc-rotate-ic svg {
  color: var(--brand);
}
.hud-help {
  left: calc(var(--pad) + env(safe-area-inset-left));
  top: calc(var(--pad) + env(safe-area-inset-top));
  border-left: 0.22em solid var(--brand);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  background: #06060ae0;
  width: min(25em, 34vw);
  padding: 0.7em 0.9em 0.85em 1em;
  font-size: 1.02em;
  line-height: 1.6;
  transition:
    opacity 0.3s,
    transform 0.3s,
    visibility 0s linear 0.3s;
  position: absolute;
  transform: translate(-0.6em);
  box-shadow: 0 0.6em 1.6em #00000059;
}
.hud-help.show {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s,
    transform 0.3s;
  transform: none;
}
.hud-off .hud-help,
.photo .hud-help {
  opacity: 0;
  visibility: hidden;
}
.hh-head {
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.3em;
  display: flex;
}
.hh-ic svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--amber);
}
.hh-title {
  letter-spacing: 0.16em;
  color: var(--amber);
  flex: 1;
  font-size: 0.8em;
  font-weight: 800;
}
.hh-x {
  color: #fff9;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 2px;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  padding: 0;
  display: grid;
}
.hh-x:hover {
  color: #fff;
  background: #ffffff1a;
}
.hh-x svg {
  width: 0.95em;
  height: 0.95em;
}
.hh-body .kc {
  margin: 0 0.2em;
  font-size: 0.86em;
}
body.tr-is-touch .hud-help {
  pointer-events: none;
  width: 100%;
  margin-bottom: 0.15em;
  font-size: 0.95em;
  position: relative;
  top: auto;
  left: auto;
}
body.tr-is-touch .hud-help .hh-x {
  pointer-events: auto;
  width: 2.4em;
  height: 2.4em;
  margin: -0.5em -0.5em -0.5em 0;
}
body.tr-is-touch .hud-help:not(.show) {
  display: none;
}
body.tr-is-touch .hud-help.hh-chip {
  top: calc(var(--pad) + var(--sat) + 2.05em);
  left: var(--objl);
  right: var(--objr);
  width: max-content;
  max-width: calc(100vw - var(--objl) - var(--objr));
  box-sizing: border-box;
  pointer-events: auto;
  background: #06060acc;
  border-left: 0;
  border-radius: 1em;
  align-items: center;
  gap: 0.55em;
  margin: 0 auto;
  padding: 0.28em 0.95em 0.28em 0.7em;
  font-size: max(11.5px, 0.86em);
  line-height: 1.5;
  display: flex;
  position: absolute;
  transform: translateY(-0.3em);
  box-shadow:
    0 0 0 1px #ffb03c59,
    0 0.4em 1em #0000004d;
}
body.tr-is-touch .hud-help.hh-chip.show {
  transform: none;
}
.hh-chip .hh-head {
  white-space: nowrap;
  flex: none;
  gap: 0.35em;
  margin: 0;
}
.hh-chip .hh-title {
  letter-spacing: 0.08em;
  flex: none;
}
.hh-chip .hh-x {
  display: none;
}
.hh-chip .hh-body {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
}
.hh-chip .hh-body .kc {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.9em;
}
body.tr-is-touch.tr-short .obj-text {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.tr-weapon .ammo {
  font: 700 1.6em/1 var(--tr-num);
  align-items: baseline;
  gap: 0.25em;
  display: flex;
}
.tr-weapon .ammo .res {
  opacity: 0.75;
  font-size: 0.6em;
}
.tr-weapon .ammo .mag:empty + .res:empty {
  display: none;
}
.tr-weapon .reload {
  background: #ffffff2e;
  border-radius: 0.12em;
  width: 4.6em;
  height: 0.24em;
  margin-top: 0.3em;
  display: none;
  position: relative;
  overflow: hidden;
}
.tr-weapon.reloading .reload {
  display: block;
}
.tr-weapon .reload i {
  transform-origin: 0;
  transform: scaleX(var(--v, 0));
  background: var(--amber);
  position: absolute;
  inset: 0;
}
.tr-weapon.reloading .mag {
  opacity: 0.4;
}
.tr-weapon .wname {
  opacity: 0.9;
  font-size: 0.85em;
}
.tr-wanted {
  position: relative;
}
.tr-wanted .evade {
  transform-origin: 0;
  height: 0.18em;
  transform: scaleX(var(--v, 0));
  opacity: 0;
  background: #fff;
  border-radius: 0.1em;
  transition:
    opacity 0.3s,
    transform 0.3s;
  position: absolute;
  bottom: -0.3em;
  left: 0.3em;
  right: 0.3em;
}
.tr-wanted.evading .evade {
  opacity: 0.9;
}
.hud-street {
  background: #1c4c9c;
  border-radius: 0.3em;
  padding: 0.34em 1em 0.4em;
  box-shadow:
    inset 0 0 0 0.12em #1c4c9c,
    inset 0 0 0 0.21em #ffffffeb,
    0 0.3em 0.9em #00000073;
}
.st-row {
  justify-content: center;
  align-items: baseline;
  gap: 0.12em;
  display: flex;
}
.st-zh {
  font: 800 1.3em/1.25 var(--tr-font);
  letter-spacing: 0.08em;
}
.tr-lang-en .st-zh {
  letter-spacing: 0.01em;
  font-size: 1.12em;
}
.st-sec {
  font: 800 0.9em/1 var(--tr-font);
  letter-spacing: 0.04em;
}
.st-sec:empty {
  display: none;
}
.hud-fire {
  letter-spacing: 0.04em;
  background: #c41c18e6;
  border-radius: 2px;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 0.95em;
  font-weight: 800;
  animation: 0.8s step-end infinite fireBlink;
  display: none;
  box-shadow: 0 0 1.4em #ff461e73;
}
.hud-fire.show {
  display: flex;
}
.hud-fire i {
  background: #ffd24d;
  border-radius: 50%;
  width: 0.7em;
  height: 0.7em;
  box-shadow: 0 0 0.6em #ffb13d;
}
@keyframes fireBlink {
  50% {
    background: #780e0ce6;
  }
}
.hud-speedo.hp-low .spd-hp i {
  background: linear-gradient(90deg, #ff2d3c, #ff7b5c);
  animation: 0.7s ease-in-out infinite lowPulse;
}
.hud-speedo.burning .spd-hp {
  height: 0.36em;
  box-shadow: 0 0 0.6em #ff5028cc;
}
.hud-speedo.burning .spd-hp i {
  background: linear-gradient(90deg, #ff2d1c, #ffb13d);
  animation: 0.32s step-end infinite fireHp;
}
@keyframes fireHp {
  50% {
    opacity: 0.25;
  }
}
.r-song {
  color: #ffb3d4;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 22em;
  margin-top: 0.15em;
  font-size: 0.8em;
  overflow: hidden;
}
.r-song:empty {
  display: none;
}
.tr-ui {
  font-size: calc(clamp(12.5px, 1.5vmin, 17px) * var(--ui-scale));
}
.tr-clock .temp {
  opacity: 0.88;
}
.mbtn-label small {
  opacity: 0.74;
  font-size: max(10px, 0.78em);
}
.srow-label small {
  opacity: 0.7;
  font-size: max(10px, 0.74em);
}
.photo-ui {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s linear 0.3s;
  position: absolute;
  inset: 0;
}
.photo-ui.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
}
.photo-ui .photo-hint {
  top: calc(7vh + 0.8em + env(safe-area-inset-top));
  opacity: 1;
  border-radius: 2px;
  align-items: center;
  gap: 1em;
  padding: 0.55em 1.2em;
  display: flex;
}
.photo-ui .photo-hint b {
  letter-spacing: 0.12em;
  font-weight: 800;
}
.photo-ui .ph-keys {
  opacity: 0.9;
  align-items: center;
  gap: 0.3em;
  display: flex;
}
.photo-ui .ph-keys:empty {
  display: none;
}
.photo-btns {
  right: calc(var(--pad) + env(safe-area-inset-right));
  bottom: calc(7vh + var(--pad) + env(safe-area-inset-bottom));
  pointer-events: auto;
  align-items: center;
  gap: 1em;
  display: flex;
  position: absolute;
}
.photo-btn {
  color: #fff;
  cursor: pointer;
  touch-action: none;
  background: #0a0a0e8c;
  border: 2px solid #ffffffbf;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.15em;
  width: 4.4em;
  height: 4.4em;
  padding: 0;
  display: flex;
}
.photo-btn svg {
  width: 1.5em;
  height: 1.5em;
}
.photo-btn span {
  letter-spacing: 0.06em;
  font-size: 0.72em;
  font-weight: 800;
}
.photo-btn.shoot {
  width: 5.6em;
  height: 5.6em;
  color: var(--ink);
  background: #f4f1eaf2;
  border-color: #fff;
  box-shadow: 0 0 0 0.35em #ffffff40;
}
.photo-btn:active {
  transform: scale(0.94);
}
.mis-cat {
  align-items: center;
  display: inline-flex;
}
.mis-glyph {
  color: #fff;
  background: #00000047;
  border-radius: 50%;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  margin: 0 0.35em 0 -0.35em;
  font-size: 0.9em;
  display: inline-grid;
}
.mis-note {
  color: var(--amber);
  margin-top: 0.3em;
  font-size: 0.8em;
}
.mis.running {
  box-shadow: inset 0 0 0 0.14em var(--cat);
  background: #202431;
}
.mis-reward.live {
  color: var(--gold);
  font-family: var(--tr-font);
  font-size: 0.85em;
  font-weight: 800;
}
.ph-bless {
  color: #ffd28a;
  background: #ffb13d24;
  border-radius: 0.8em;
  flex: none;
  padding: 0.6em 0.85em;
  font-size: 0.85em;
  font-weight: 700;
}
.md-facts {
  grid-template-columns: 1fr 1fr;
  gap: 0.4em;
  margin-top: 0.9em;
  display: grid;
}
.md-fact {
  background: #ffffff0d;
  border-radius: 0.6em;
  flex-direction: column;
  gap: 0.1em;
  padding: 0.5em 0.7em;
  display: flex;
}
.md-fact span {
  opacity: 0.6;
  font-size: 0.75em;
}
.md-fact b {
  font-size: 0.95em;
}
.ph-btn.danger {
  color: #ffb0b8;
  background: #3b1a20;
}
.ph-btn.danger.focus {
  box-shadow: 0 0 0 0.16em #ff6b78;
}
body.tr-compact .fm-hints {
  bottom: calc(0.6em + env(safe-area-inset-bottom));
  gap: 1em;
  padding: 0.4em 1em;
  font-size: 0.78em;
  display: flex;
}
body.tr-compact .fm-hints .fm-hint:nth-child(n + 4) {
  display: none;
}
.mis-tabs {
  scrollbar-width: none;
  flex: none;
  gap: 0.3em;
  margin: 0 -0.1em;
  padding: 0.1em 0.1em 0.2em;
  display: flex;
  overflow-x: auto;
}
.mis-tabs::-webkit-scrollbar {
  display: none;
}
.mis-chips::-webkit-scrollbar {
  display: none;
}
.mis-tab {
  color: #ffffffbf;
  cursor: pointer;
  background: #1a1d26;
  border: 0;
  border-radius: 999px;
  outline: none;
  flex: none;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.45em 0.8em;
  font-size: 0.95em;
  font-weight: 800;
  display: flex;
}
.mis-tab b {
  font: 700 0.85em var(--tr-num);
  opacity: 0.6;
}
.mis-tab.on {
  background: var(--paper);
  color: var(--ink);
}
.mis-tab.focus {
  box-shadow: inset 0 0 0 0.14em var(--pink);
}
.mis-chips {
  scrollbar-width: none;
  flex: none;
  gap: 0.3em;
  margin-top: -0.2em;
  display: flex;
  overflow-x: auto;
}
.mis-chip {
  color: #ffffffb3;
  cursor: pointer;
  white-space: nowrap;
  background: 0 0;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  outline: none;
  flex: none;
  padding: 0.3em 0.7em;
  font-size: 0.8em;
  font-weight: 700;
}
.mis-chip.on {
  border-color: var(--gold);
  color: var(--gold);
  background: #ffcf4d1a;
}
.mis-chip.focus {
  box-shadow: 0 0 0 0.14em var(--pink);
}
.mis-sec {
  letter-spacing: 0.16em;
  color: #ffffff80;
  flex: none;
  align-items: baseline;
  gap: 0.5em;
  margin: 0.4em 0.3em -0.15em;
  font-size: 0.78em;
  font-weight: 800;
  display: flex;
}
.mis-sec b {
  font: 700 1em var(--tr-num);
  letter-spacing: 0;
}
.mis-group {
  color: #ffffffb8;
  text-align: left;
  cursor: pointer;
  background: #151821;
  border: 0;
  border-radius: 0.8em;
  outline: none;
  flex: none;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.65em 0.9em;
  font-size: 0.92em;
  font-weight: 800;
  display: flex;
}
.mis-group b {
  font: 700 0.95em var(--tr-num);
  opacity: 0.7;
  margin-left: auto;
}
.mis-group-chev svg {
  width: 1em;
  height: 1em;
  transition: transform 0.15s;
  transform: rotate(-90deg);
}
.mis-group.on .mis-group-chev svg {
  transform: rotate(90deg);
}
.mis-group.focus {
  box-shadow: inset 0 0 0 0.14em var(--pink);
}
.mis-trow {
  align-items: baseline;
  gap: 0.6em;
  margin-top: 0.45em;
  display: flex;
}
.mis-trow .mis-title {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
.mis-dist {
  font: 700 0.85em var(--tr-num);
  color: #fffc;
  background: #ffffff14;
  border-radius: 999px;
  flex: none;
  padding: 0.1em 0.55em;
}
.mis-flag {
  background: var(--brand);
  letter-spacing: 0.06em;
  border-radius: 999px;
  margin-left: 0.4em;
  margin-right: auto;
  padding: 0.1em 0.5em;
  font-size: 0.72em;
  font-weight: 800;
}
.mis-flag.retry {
  color: #1a1200;
  background: #ffb020;
}
.mis-reward.muted {
  color: #ffffff73;
  font-family: var(--tr-font);
  font-size: 0.82em;
  font-weight: 700;
}
.mis-note.muted {
  color: #ffffff73;
}
.mis.locked {
  opacity: 0.62;
}
.mis.locked .mis-cat {
  color: #fff;
  background: #ffffff38;
}
body.tr-compact .ph-item.mis {
  padding: 0.55em 0.8em;
}
body.tr-compact .mis .mis-row {
  display: none;
}
body.tr-compact .mis .mis-trow {
  margin-top: 0;
}
body.tr-compact .mis .mis-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.1em;
  overflow: hidden;
}
body.tr-compact .mis .mis-title:before {
  content: "";
  background: var(--cat);
  vertical-align: middle;
  border-radius: 50%;
  width: 0.5em;
  height: 0.5em;
  margin: 0 0.5em 0.1em 0;
  display: inline-block;
}
body.tr-compact .mis .mis-sub,
body.tr-compact .mis .mis-note {
  display: none;
}
body.tr-compact .mis-tab {
  padding: 0.4em 0.7em;
  font-size: 0.9em;
}
.st-hero {
  background: linear-gradient(150deg, #3a1a26, #1b1520 55%, #14161e);
  border-radius: 1.1em;
  flex-direction: column;
  flex: none;
  gap: 0.5em;
  padding: 1em 1.1em;
  display: flex;
  box-shadow: inset 0 0 0 1px #ffcf4d2e;
}
.st-hero-k {
  letter-spacing: 0.14em;
  color: #fff9;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82em;
  font-weight: 800;
  display: flex;
}
.st-hero-k b {
  font: 700 1.5em var(--tr-num);
  letter-spacing: 0;
  color: var(--gold);
}
.st-bar {
  background: #ffffff1a;
  border-radius: 0.2em;
  height: 0.35em;
  position: relative;
  overflow: hidden;
}
.st-bar i {
  transform-origin: 0;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  position: absolute;
  inset: 0;
}
.st-next {
  margin-top: 0.3em;
}
.st-next-k {
  letter-spacing: 0.2em;
  color: var(--gold);
  font-size: 0.75em;
  font-weight: 800;
}
.st-next-t {
  margin-top: 0.15em;
  font-size: 1.55em;
  font-weight: 900;
  line-height: 1.2;
}
.st-next-s {
  opacity: 0.65;
  margin-top: 0.2em;
  font-size: 0.85em;
}
.st-go {
  margin-top: 0.2em;
}
.st-info {
  background: #ffffff0f;
  padding: 0.6em;
  font-size: 0.9em;
}
.st-ch {
  border-left: 0.22em solid var(--gold);
  background: #171a23;
  border-radius: 1em;
  flex: none;
  padding: 0.85em 1em;
}
.st-ch.locked {
  opacity: 0.6;
  border-left-color: #ffffff26;
}
.st-ch.done {
  border-left-color: var(--green);
}
.st-ch-h {
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em;
  display: flex;
}
.st-ch-h b {
  letter-spacing: 0.06em;
  font-size: 1.08em;
  font-weight: 900;
}
.st-ch-n {
  font: 700 1em var(--tr-num);
  color: var(--gold);
}
.st-ch.done .st-ch-n {
  color: var(--green);
}
.st-dots {
  flex-direction: column;
  gap: 0.15em;
  margin-top: 0.5em;
  display: flex;
}
.st-m {
  color: #ffffffb8;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 0.5em;
  outline: none;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  padding: 0.3em 0.4em;
  font-size: 0.92em;
  display: flex;
}
.st-m i {
  background: #ffffff14;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  font-size: 0.82em;
  font-style: normal;
  font-weight: 800;
  display: grid;
}
.st-m.ok {
  color: #fff;
}
.st-m.ok i {
  background: var(--green);
  color: #07140c;
}
.st-m.open i {
  background: var(--gold);
  color: #1a1200;
}
.st-m.live i {
  background: var(--brand);
  color: #fff;
}
.st-m.focus {
  background: #ffffff12;
}
.st-recap {
  opacity: 0.8;
  white-space: pre-line;
  border-top: 1px solid #ffffff14;
  margin: 0.6em 0 0;
  padding-top: 0.6em;
  font-size: 0.88em;
  line-height: 1.6;
}
.cmp {
  background: #ffffff0d;
  border-radius: 3px;
  flex: none;
  padding: 1em 1.1em;
}
.cmp-top {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}
.cmp-top span {
  letter-spacing: 0.14em;
  opacity: 0.7;
  font-size: 0.85em;
  font-weight: 800;
}
.cmp-top b {
  font: 700 2.2em/1 var(--tr-num);
  color: var(--gold);
}
.cmp-bar {
  background: #ffffff1a;
  border-radius: 0.2em;
  height: 0.35em;
  margin: 0.6em 0 0.7em;
  position: relative;
  overflow: hidden;
}
.cmp-bar i {
  transform-origin: 0;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  position: absolute;
  inset: 0;
}
.cmp-rows {
  grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
  gap: 0.25em 1.2em;
  display: grid;
}
.cmp-row {
  border-bottom: 1px solid #ffffff0f;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.2em 0;
  font-size: 0.92em;
  display: flex;
}
.cmp-row b {
  font: 700 1.05em var(--tr-num);
}
.cmp-row.focus {
  background: #ffffff0f;
}
.ph-body .cmp {
  background: #1a1d26;
  border-radius: 1em;
}
.pm-stats .cmp {
  margin-bottom: 0.8em;
}
.pm-back {
  display: none;
}
.pm-only-compact {
  display: none !important;
}
.pm-empty {
  opacity: 0.55;
  padding: 2em 1em;
}
.pm-title:not(.focus) .mbtn-ic {
  opacity: 0.5;
}
.srow-danger .srow-label b {
  color: #ff8a93;
}
.srow-danger.focus .srow-act {
  color: #fff;
  background: #c92a42;
}
body.tr-compact .pm-only-compact {
  display: flex !important;
}
body.tr-compact .pm-nav {
  width: 14.5em;
}
body.tr-compact .pm-btn {
  gap: 0.7em;
  padding: 0.36em 0.8em;
}
body.tr-compact .pm-btn .mbtn-label {
  min-width: 0;
}
body.tr-compact .pm-btn .mbtn-label b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.12em;
  overflow: hidden;
}
body.tr-compact .pm:not([data-tab="home"]) .pm-nav {
  display: none;
}
body.tr-compact .pm:not([data-tab="home"]) .pm-back {
  z-index: 3;
  width: 2.4em;
  height: 2.4em;
  margin: 0 0 0.5em;
  display: grid;
  position: sticky;
  top: 0;
}
body.tr-compact .pm-body {
  gap: 3vw;
}
body.tr-compact .pm-home .pm-mini,
body.tr-compact .pm-home .pm-log {
  display: none;
}
body.tr-compact .pm-card {
  padding: 1em 1.2em;
}
body.tr-compact .pm-card:after {
  font-size: 6em;
}
body.tr-compact .pm-card-text {
  min-width: 12em;
}
body.tr-compact .pm-card-kicker {
  white-space: nowrap;
}
body.tr-compact .pm-card-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 2.3em;
  overflow: hidden;
}
body.tr-compact .pm-card-tag {
  margin-top: 0.5em;
  font-size: 1em;
}
body.tr-compact .pm-mission {
  padding: 0.8em 1em;
}
body.tr-compact .srow {
  flex-wrap: wrap;
  gap: 0.4em 0.8em;
}
body.tr-compact .srow-label {
  flex: 40%;
  min-width: 40%;
}
body.tr-compact .srow-label b {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
body.tr-compact .srow-ctl {
  flex: 0 auto;
  min-width: 0;
  margin-left: auto;
}
body.tr-compact .srow-seg .srow-ctl {
  flex: 100%;
  justify-content: flex-end;
}
body.tr-compact .seg {
  border-radius: 1em;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body.tr-compact .seg-opt {
  padding: 0.4em 0.75em;
}
body.tr-compact .sl-track {
  width: 9em;
}
body.tr-compact .cg-tabs {
  flex-wrap: wrap;
  align-self: stretch;
}
body.tr-compact .cg-tab {
  flex: auto;
  justify-content: center;
  padding: 0.45em 0.8em;
}
body.tr-compact .cart {
  max-height: none;
}
body.tr-compact .cart-touch .ct-l {
  font-size: 19px;
}
body.tr-compact .cart-touch .ct-b {
  font-size: 14.5px;
}
body.tr-compact .cart-pad .cp-l,
body.tr-compact .ck-leg .ck-l {
  font-size: 19px;
}
body.tr-compact .ck .ck-a {
  font-size: 17px;
}
body.tr-compact .st-hero {
  grid-template-columns: 1fr minmax(11em, 38%);
  grid-template-areas: "k k" "bar bar" "nx go" "nx info";
  gap: 0.4em 0.9em;
  padding: 0.8em 1em;
  display: grid;
}
body.tr-compact .st-hero-k {
  grid-area: k;
}
body.tr-compact .st-bar {
  grid-area: bar;
}
body.tr-compact .st-next {
  grid-area: nx;
  align-self: center;
  margin-top: 0;
}
body.tr-compact .st-go {
  grid-area: go;
  margin-top: 0;
  padding: 0.6em;
}
body.tr-compact .st-info {
  grid-area: info;
}
body.tr-compact .st-next-t {
  font-size: 1.3em;
}
.ti-menu {
  scrollbar-width: thin;
  min-height: 0;
  overflow-y: auto;
}
.ti-menu .ti-support {
  border-top: 1px solid #f4f1ea26;
  min-height: 44px;
  margin-top: 0.5em;
}
.ti-support .mbtn-label {
  letter-spacing: 0.04em;
  font-size: 1.05em;
  font-weight: 700;
}
.ti-support .mbtn-ic {
  color: var(--brand);
}
.ti[data-panel="support"] .ti-panel {
  width: min(40em, 54vw);
}
.support-body {
  padding: 0.65em 0.2em 1em;
  -webkit-mask-image: none;
  mask-image: none;
}
.support-intro {
  margin-bottom: 1.5em;
}
.support-heart {
  color: #ff7379;
  background: #e0262f1c;
  border: 1px solid #e0262f50;
  border-radius: 50%;
  place-items: center;
  width: 3.8em;
  height: 3.8em;
  display: grid;
}
.support-heart svg {
  width: 1.8em;
  height: 1.8em;
}
.support-heading {
  letter-spacing: -0.025em;
  margin: 0.7em 0 0.55em;
  font-size: clamp(20px, 2.6vmin, 30px);
  font-weight: 800;
  line-height: 1.35;
}
.support-copy {
  color: #d5d2cc;
  max-width: 34em;
  margin: 0;
  font-size: max(14px, 1em);
  line-height: 1.8;
}
.support-uses {
  border-top: 1px solid #ffffff1f;
  border-bottom: 1px solid #ffffff1f;
  flex-wrap: wrap;
  gap: 1em 1.6em;
  padding: 1em 0;
  display: flex;
}
.support-use {
  color: #e9e5de;
  align-items: center;
  gap: 0.5em;
  font-size: max(13px, 0.95em);
  display: flex;
}
.support-use svg {
  color: #ff7379;
  width: 1.2em;
  height: 1.2em;
  display: block;
}
.support-minimum {
  margin: 1.4em 0 0.5em;
  font-size: max(14px, 1.1em);
  font-weight: 600;
}
.support-status {
  color: #f2c8c9;
  margin: 0.5em 0;
  font-size: max(13px, 0.95em);
  line-height: 1.6;
}
.support-status:empty {
  display: none;
}
.support-cta {
  color: #fff;
  background: var(--brand-deep);
  width: 100%;
  min-height: 48px;
  font: 700 max(15px, 1.1em)/1.4 var(--tr-font);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 5px;
  margin-top: 0.8em;
  padding: 0.85em 1em;
  transition: background 0.15s;
}
.support-cta:hover,
.support-cta.focus,
.support-cta:focus-visible {
  outline-offset: 3px;
  background: #dc2631;
  outline: 2px solid #f4f1ea;
}
.support-cta:disabled {
  cursor: wait;
  color: #dbc3c5;
  background: #4d2428;
  outline: none;
}
.support-footnote {
  text-align: center;
  color: #bdb9b4;
  margin: 0.8em 0;
  font-size: max(12px, 0.8em);
  line-height: 1.6;
}
.support-free {
  text-align: center;
  color: #c9c4bd;
  margin: 1.4em 0 0.2em;
  font-size: max(13px, 0.9em);
  line-height: 1.6;
}
body.tr-compact .ti[data-panel="support"] .ti-panel {
  width: min(40em, 62vw);
}
body.tr-portrait .ti[data-panel="support"] .ti-panel {
  width: auto;
  left: 4vw;
  right: 4vw;
}
@media (max-height: 480px) and (orientation: landscape) {
  .support-heart {
    display: none;
  }
  .support-heading {
    margin-top: 0;
  }
  .support-intro {
    margin-bottom: 0.7em;
  }
  .support-minimum {
    margin-top: 0.8em;
  }
}
.pm-support .mbtn-ic {
  color: #ff7379;
}