:root {
      color-scheme: dark;
      --bg: #0d1110;
      --panel: rgba(15, 19, 18, 0.86);
      --panel-strong: rgba(12, 16, 15, 0.94);
      --line: rgba(221, 231, 222, 0.18);
      --text: #f3f6f1;
      --muted: #b9c3ba;
      --soft: #dde7de;
      --accent: #f2b705;
      --accent-2: #4fb7a7;
      --accent-3: #8eb7f5;
      --danger: #ff6b5f;
      --shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
    }

    @media (orientation: portrait) {
      body.touch-device.portrait-touch-layout .touch-stick-zone {
        left: calc(16px + var(--safe-left));
        right: auto;
        top: auto;
        bottom: calc(24px + var(--safe-bottom));
        width: 156px;
        height: 156px;
        z-index: 4;
      }

      body.touch-device.portrait-touch-layout .touch-stick {
        width: 108px;
        height: 108px;
        opacity: 0.78;
        transform: translate(0, 0);
        background: rgba(15, 19, 18, 0.56);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      }

      body.touch-device.portrait-touch-layout .touch-stick-zone.active .touch-stick {
        opacity: 1;
      }

      body.touch-device.portrait-touch-layout .touch-look-zone {
        left: 0;
        right: 0;
        top: calc(52px + var(--safe-top));
        bottom: 0;
        width: auto;
        min-width: 0;
        z-index: 1;
      }
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
      font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      letter-spacing: 0;
      user-select: none;
    }

    body {
      position: relative;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    button {
      font: inherit;
    }

    .screen {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: grid;
      place-items: center;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding:
        calc(24px + var(--safe-top))
        calc(24px + var(--safe-right))
        calc(24px + var(--safe-bottom))
        calc(24px + var(--safe-left));
      background:
        linear-gradient(90deg, rgba(13, 17, 16, 0.96), rgba(13, 17, 16, 0.82)),
        image-set(url("../../mapa_pruchodu.png") type("image/png"));
      background-size: cover;
      background-position: center;
    }

    .screen.controls-open {
      place-items: start center;
    }

    .rotate-prompt {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      align-items: center;
      justify-content: center;
      padding:
        calc(22px + var(--safe-top))
        calc(22px + var(--safe-right))
        calc(22px + var(--safe-bottom))
        calc(22px + var(--safe-left));
      text-align: center;
      background:
        linear-gradient(180deg, rgba(13, 17, 16, 0.96), rgba(13, 17, 16, 0.9)),
        image-set(url("../../mapa_pruchodu.png") type("image/png"));
      background-size: cover;
      background-position: center;
    }

    .rotate-prompt-panel {
      width: min(420px, 100%);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 22px;
      background: var(--panel-strong);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .rotate-prompt h2 {
      margin: 0;
      font-size: 1.55rem;
      line-height: 1.15;
      font-weight: 900;
    }

    .rotate-prompt p:last-child {
      margin: 12px 0 0;
      color: var(--soft);
      font-size: 0.96rem;
      line-height: 1.45;
    }

    .intro {
      width: min(920px, 100%);
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
      gap: 24px;
      align-items: stretch;
    }

    .intro-main,
    .intro-side,
    .hud-panel,
    .tour-panel,
    .minimap {
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .intro-main {
      border-radius: 8px;
      padding: 28px;
      display: flex;
      min-height: 430px;
      flex-direction: column;
      justify-content: space-between;
    }

    .kicker {
      margin: 0 0 14px;
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    h1 {
      max-width: 720px;
      margin: 0;
      font-size: 2.7rem;
      line-height: 1.02;
      font-weight: 850;
      letter-spacing: 0;
    }

    .subtitle {
      max-width: 620px;
      margin: 18px 0 0;
      color: var(--soft);
      font-size: 1.05rem;
      line-height: 1.55;
    }

    .language-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 26px 0 0;
    }

    .lang-button,
    .mode-button,
    .controls-toggle,
    .ghost-button,
    .nav-button,
    .start-button,
    .stop-button {
      min-height: 42px;
      border-radius: 8px;
      border: 1px solid var(--line);
      color: var(--text);
      background: rgba(255, 255, 255, 0.06);
      cursor: pointer;
      transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

    .lang-button {
      min-width: 58px;
      padding: 0 14px;
      font-weight: 800;
    }

    .lang-button:hover,
    .mode-button:hover,
    .ghost-button:hover,
    .nav-button:hover,
    .stop-button:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.32);
    }

    .lang-button.active {
      color: #111410;
      background: var(--accent);
      border-color: var(--accent);
    }

    .mode-choice {
      width: min(560px, 100%);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .mode-choice.single-mode {
      grid-template-columns: 1fr;
    }

    .mode-button {
      min-height: 78px;
      padding: 11px 12px;
      text-align: left;
      display: grid;
      align-content: center;
      gap: 4px;
    }

    .mode-button strong {
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 900;
    }

    .mode-button span {
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.35;
    }

    .mode-button.active {
      border-color: rgba(242, 183, 5, 0.9);
      background: rgba(242, 183, 5, 0.15);
      box-shadow: inset 0 0 0 1px rgba(242, 183, 5, 0.18);
    }

    .intro-actions {
      margin-top: 28px;
      display: grid;
      gap: 14px;
    }

    .start-button {
      width: min(420px, 100%);
      padding: 14px 18px;
      border: 0;
      color: #111410;
      background: var(--accent);
      font-size: 1rem;
      font-weight: 850;
    }

    .start-button:disabled {
      color: rgba(243, 246, 241, 0.58);
      background: rgba(255, 255, 255, 0.09);
      cursor: wait;
    }

    .start-button:not(:disabled):hover {
      transform: translateY(-1px);
      background: #ffd24b;
    }

    .restart-button {
      border: 1px solid rgba(79, 183, 167, 0.62);
      color: var(--text);
      background: rgba(79, 183, 167, 0.18);
    }

    .restart-button:not(:disabled):hover {
      background: rgba(79, 183, 167, 0.3);
    }

    .controls-toggle {
      width: min(420px, 100%);
      padding: 11px 16px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.07);
      font-size: 0.92rem;
      font-weight: 850;
      text-align: left;
    }

    .controls-toggle::after {
      content: "+";
      float: right;
      color: var(--accent);
      font-weight: 900;
    }

    .controls-toggle[aria-expanded="true"] {
      border-color: rgba(242, 183, 5, 0.75);
      background: rgba(242, 183, 5, 0.16);
    }

    .controls-toggle[aria-expanded="true"]::after {
      content: "-";
    }

    .progress-wrap {
      width: min(420px, 100%);
      height: 8px;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.08);
    }

    .progress-bar {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transition: width 160ms ease;
    }

    .status {
      min-height: 24px;
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.45;
    }

    .status.error {
      color: var(--danger);
      font-weight: 700;
    }

    .intro-side {
      border-radius: 8px;
      overflow: hidden;
      display: grid;
      grid-template-rows: minmax(180px, 1fr) auto;
    }

    .map-preview {
      min-height: 260px;
      background: #f8f8f4;
    }

    .map-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .control-list {
      display: grid;
      gap: 10px;
      padding: 18px;
      border-top: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.18);
    }

    .control-item {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 12px;
      align-items: center;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .keys {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    kbd {
      min-width: 28px;
      padding: 4px 7px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.09);
      color: var(--text);
      text-align: center;
      font-size: 0.78rem;
      font-weight: 800;
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    }

    .controls-panel {
      grid-column: 1 / -1;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 18px;
      background: rgba(15, 19, 18, 0.88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .controls-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }

    .controls-panel h2 {
      margin: 0;
      font-size: 1.42rem;
      line-height: 1.1;
      font-weight: 900;
    }

    .controls-panel-header p:last-child {
      max-width: 640px;
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .controls-close {
      flex: 0 0 auto;
      min-width: 86px;
    }

    .controls-guide {
      margin: 0;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 8px;
      background: #fff;
    }

    .controls-guide-image {
      display: block;
      width: 100%;
      height: auto;
      background: #fff;
    }

    .controls-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .controls-card {
      min-width: 0;
      display: grid;
      grid-template-rows: 150px 1fr;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.055);
    }

    .controls-card-copy {
      padding: 13px;
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .controls-card h3 {
      margin: 0;
      color: var(--text);
      font-size: 0.98rem;
      font-weight: 900;
    }

    .controls-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.38;
    }

    .tutorial-visual {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      padding: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background:
        linear-gradient(145deg, rgba(242, 183, 5, 0.13), rgba(79, 183, 167, 0.08)),
        rgba(0, 0, 0, 0.2);
    }

    .device-screen {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(20, 21, 18, 0.1), rgba(0, 0, 0, 0.3)),
        image-set(url("../../mapa_pruchodu.png") type("image/png"));
      background-size: cover;
      background-position: center;
      box-shadow: inset 0 0 0 999px rgba(8, 11, 10, 0.24), 0 12px 32px rgba(0, 0, 0, 0.32);
    }

    .phone-portrait .device-screen {
      width: 76px;
      height: 126px;
    }

    .phone-landscape .device-screen {
      width: 148px;
      height: 82px;
    }

    .desktop-controls .device-screen {
      width: 162px;
      height: 94px;
    }

    .visual-map,
    .visual-look,
    .visual-sprint,
    .visual-keys,
    .visual-mouse,
    .visual-shift,
    .visual-map-key {
      position: absolute;
      display: grid;
      place-items: center;
      border-radius: 7px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: var(--text);
      background: rgba(12, 16, 15, 0.66);
      font-size: 0.48rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .visual-stick {
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(15, 19, 18, 0.42);
    }

    .visual-stick::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 15px;
      height: 15px;
      border-radius: 999px;
      background: var(--accent);
      transform: translate(-50%, -50%);
    }

    .phone-portrait .visual-map {
      right: 5px;
      top: 5px;
      width: 34px;
      height: 18px;
    }

    .phone-portrait .visual-look {
      left: 0;
      right: 0;
      top: 28px;
      height: 32px;
      border-radius: 0;
      border-inline: 0;
      color: rgba(243, 246, 241, 0.72);
      background: rgba(79, 183, 167, 0.22);
    }

    .phone-portrait .visual-stick {
      left: 13px;
      bottom: 14px;
    }

    .phone-portrait .visual-sprint {
      right: 5px;
      bottom: 20px;
      width: 36px;
      height: 18px;
    }

    .phone-landscape .visual-map {
      right: 5px;
      top: 5px;
      width: 42px;
      height: 20px;
    }

    .phone-landscape .visual-stick {
      left: 14px;
      bottom: 12px;
    }

    .phone-landscape .visual-look {
      right: 5px;
      bottom: 30px;
      width: 48px;
      height: 22px;
      background: rgba(79, 183, 167, 0.22);
    }

    .phone-landscape .visual-sprint {
      right: 12px;
      bottom: 6px;
      width: 44px;
      height: 18px;
    }

    .desktop-controls .visual-keys {
      left: 14px;
      bottom: 14px;
      width: 58px;
      height: 24px;
      color: #111410;
      background: rgba(242, 183, 5, 0.9);
    }

    .desktop-controls .visual-mouse {
      left: 74px;
      top: 18px;
      width: 46px;
      height: 30px;
      background: rgba(79, 183, 167, 0.62);
    }

    .desktop-controls .visual-shift {
      left: 78px;
      bottom: 14px;
      width: 42px;
      height: 24px;
    }

    .desktop-controls .visual-map-key {
      right: 16px;
      top: 18px;
      width: 28px;
      height: 28px;
      border-radius: 999px;
    }

    .hud {
      position: fixed;
      inset: 0;
      z-index: 10;
      pointer-events: none;
      display: grid;
      grid-template-rows: auto 1fr auto;
      padding:
        calc(18px + var(--safe-top))
        calc(18px + var(--safe-right))
        calc(18px + var(--safe-bottom))
        calc(18px + var(--safe-left));
      gap: 14px;
    }

    .top-row,
    .bottom-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .hud-panel {
      border-radius: 8px;
      padding: 12px 14px;
    }

    .brand {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 220px;
    }

    .brand-title {
      font-size: 0.92rem;
      font-weight: 850;
    }

    .brand-subtitle {
      color: var(--muted);
      font-size: 0.78rem;
    }

    .hud-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      pointer-events: auto;
    }

    .ghost-button.active {
      color: #111410;
      border-color: var(--accent);
      background: var(--accent);
    }

    .ghost-button {
      padding: 0 12px;
      font-size: 0.86rem;
      font-weight: 750;
      white-space: nowrap;
    }

    .reset-position-button {
      border-color: rgba(79, 183, 167, 0.42);
      background: rgba(79, 183, 167, 0.12);
    }

    .reset-position-button:hover {
      border-color: rgba(79, 183, 167, 0.68);
      background: rgba(79, 183, 167, 0.2);
    }

    .minimap {
      width: clamp(210px, 22vw, 320px);
      max-width: calc(100vw - 36px);
      justify-self: end;
      align-self: start;
      border-radius: 8px;
      overflow: hidden;
      pointer-events: none;
      opacity: 0.96;
      transition: width 180ms ease, opacity 180ms ease;
    }

    body:not(.playing) .minimap {
      opacity: 0;
    }

    .minimap.expanded {
      width: clamp(210px, 22vw, 320px);
      max-width: calc(100vw - 36px);
    }

    .minimap-map {
      position: relative;
      aspect-ratio: 1.45;
      overflow: hidden;
      background: #121615;
    }

    .minimap-map canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .minimap-map::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid rgba(16, 20, 19, 0.34);
      box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.2);
      pointer-events: none;
    }

    .minimap-marker {
      --heading: 0rad;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 16px;
      transform: translate(-50%, -50%);
      transform-origin: 50% 50%;
      border-radius: 999px;
      background: rgba(242, 183, 5, 0.26);
      box-shadow:
        0 0 0 2px rgba(17, 20, 16, 0.95),
        0 0 14px rgba(242, 183, 5, 0.95),
        0 0 30px rgba(242, 183, 5, 0.55);
      z-index: 2;
    }

    .minimap-marker::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      background: var(--accent);
    }

    .minimap-marker::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2px;
      height: 13px;
      transform: translate(-50%, -100%) rotate(var(--heading));
      transform-origin: 50% 100%;
      border-radius: 999px;
      background: rgba(255, 239, 177, 0.92);
    }

    .minimap-pois {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
    }

    .minimap-poi-dot {
      position: absolute;
      width: 13px;
      height: 13px;
      display: grid;
      place-items: center;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      border: 1px solid rgba(17, 20, 16, 0.96);
      background: var(--accent);
      color: #17120a;
      font-size: 7px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      box-shadow: 0 0 12px rgba(242, 183, 5, 0.75);
    }

    .minimap-poi-dot[data-variant="sign"] {
      background: var(--accent-2);
      box-shadow: 0 0 12px rgba(79, 183, 167, 0.75);
    }

    .minimap-poi-dot[data-variant="model"] {
      background: var(--accent-3);
      box-shadow: 0 0 12px rgba(142, 183, 245, 0.75);
    }

    .minimap-poi-dot[data-variant="info"] {
      background: var(--accent);
      box-shadow: 0 0 12px rgba(242, 183, 5, 0.75);
    }

    body.guided-mode .minimap-poi-dot {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.7);
    }

    body.guided-mode .minimap-poi-dot.active-guide {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.45);
      border-color: rgba(255, 245, 194, 0.96);
      box-shadow:
        0 0 0 5px rgba(242, 183, 5, 0.18),
        0 0 22px rgba(242, 183, 5, 0.92);
    }

    .minimap-footer {
      min-height: 32px;
      padding: 7px 9px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--soft);
      background: rgba(0, 0, 0, 0.24);
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .minimap-coords {
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .map-alignment-debug-panel {
      position: fixed;
      left: max(10px, env(safe-area-inset-left));
      bottom: max(10px, env(safe-area-inset-bottom));
      z-index: 60;
      width: min(420px, calc(100vw - 20px));
      max-height: 48vh;
      margin: 0;
      padding: 10px 12px;
      overflow: auto;
      border: 1px solid rgba(77, 218, 255, 0.38);
      border-radius: 8px;
      background: rgba(4, 8, 8, 0.82);
      color: #d9fbff;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
      font: 700 10px/1.35 Consolas, "Liberation Mono", monospace;
      pointer-events: none;
      white-space: pre-wrap;
    }

    .center-reticle {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 16px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      opacity: 0.72;
    }

    .center-reticle::before,
    .center-reticle::after {
      content: "";
      position: absolute;
      background: rgba(255, 255, 255, 0.74);
      border-radius: 999px;
    }

    .center-reticle::before {
      top: 7px;
      left: 2px;
      width: 12px;
      height: 2px;
    }

    .center-reticle::after {
      top: 2px;
      left: 7px;
      width: 2px;
      height: 12px;
    }

    .tour-panel {
      width: min(330px, calc(100vw - 36px));
      max-height: min(720px, calc(100vh - 130px));
      justify-self: end;
      align-self: start;
      border-radius: 8px;
      overflow: hidden;
      pointer-events: auto;
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    .tour-panel.collapsed {
      display: none;
    }

    #tour-panel {
      display: none !important;
    }

    .tour-header {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: var(--panel-strong);
    }

    .tour-title {
      margin: 0;
      font-size: 0.98rem;
      font-weight: 850;
    }

    .tour-copy {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.45;
    }

    .route-status {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .route-pill {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      border-radius: 999px;
      padding: 5px 9px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.07);
      color: var(--soft);
      font-size: 0.74rem;
      font-weight: 800;
    }

    .route-progress {
      width: 100%;
      margin-top: 11px;
      display: grid;
      grid-template-columns: repeat(8, minmax(18px, 1fr));
      gap: 6px;
      align-items: center;
    }

    .route-dot {
      height: 8px;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      cursor: pointer;
      transition: background 160ms ease, transform 160ms ease;
    }

    .route-dot:hover {
      background: rgba(255, 255, 255, 0.28);
    }

    .route-dot.done {
      background: rgba(79, 183, 167, 0.75);
    }

    .route-dot.active {
      background: var(--accent);
      transform: scaleY(1.65);
    }

    .map-strip {
      height: 150px;
      border-bottom: 1px solid var(--line);
      background: #f8f8f4;
      overflow: hidden;
    }

    .map-strip img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: 58% 54%;
    }

    .tour-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 10px;
      border-bottom: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.16);
    }

    .nav-button {
      min-height: 38px;
      padding: 0 10px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.055);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .nav-button:disabled {
      color: rgba(243, 246, 241, 0.35);
      cursor: default;
      background: rgba(255, 255, 255, 0.035);
    }

    .stop-list {
      overflow: auto;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .stop-button {
      width: 100%;
      padding: 10px;
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      text-align: left;
      background: rgba(255, 255, 255, 0.055);
    }

    .stop-button.active {
      border-color: rgba(242, 183, 5, 0.8);
      background: rgba(242, 183, 5, 0.14);
    }

    .stop-number {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #15150d;
      background: var(--accent);
      font-size: 0.76rem;
      font-weight: 900;
    }

    .stop-name {
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 800;
    }

    .stop-description {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.35;
    }

    .stop-meta {
      margin-top: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .stop-chip {
      display: inline-flex;
      min-height: 22px;
      align-items: center;
      border-radius: 999px;
      padding: 3px 7px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--soft);
      background: rgba(255, 255, 255, 0.06);
      font-size: 0.68rem;
      font-weight: 800;
    }

    .bottom-row {
      align-self: end;
      justify-content: flex-end;
    }

    .metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: 0.78rem;
      padding: 8px 10px;
      opacity: 0.74;
    }

    .mode-metric {
      display: none;
    }

    body.guided-mode .mode-metric {
      display: inline;
    }

    .metric-strong {
      color: var(--text);
      font-weight: 850;
    }

    .location {
      min-width: min(420px, 100%);
      display: none;
    }

    body.guided-mode.playing .location {
      display: block;
    }

    .location-name {
      margin: 0;
      font-size: 1rem;
      font-weight: 850;
    }

    .location-detail {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.4;
    }

    .guide-row {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .guide-chip,
    .guide-next {
      display: inline-flex;
      min-height: 26px;
      align-items: center;
      border-radius: 999px;
      padding: 5px 9px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      background: rgba(255, 255, 255, 0.06);
      color: var(--soft);
      font-size: 0.73rem;
      font-weight: 800;
    }

    .guide-next {
      color: var(--muted);
      font-weight: 750;
    }

    .guide-prompt {
      margin: 9px 0 0;
      color: var(--soft);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .touch-controls {
      position: fixed;
      inset: 0;
      z-index: 9;
      display: none;
      pointer-events: none;
      touch-action: none;
    }

    .touch-stick-zone,
    .touch-look-zone,
    .touch-action {
      pointer-events: auto;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
    }

    .touch-stick-zone {
      position: absolute;
      left: calc(18px + var(--safe-left));
      bottom: calc(96px + var(--safe-bottom));
      width: min(176px, 42vw);
      height: min(176px, 42vw);
      display: grid;
      place-items: center;
      z-index: 2;
    }

    .touch-stick {
      width: 104px;
      height: 104px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(15, 19, 18, 0.54);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow);
      position: relative;
      opacity: 0.28;
      transform: translate(0, 0);
      transition: opacity 140ms ease, transform 90ms ease;
    }

    .touch-stick-zone.active .touch-stick {
      opacity: 1;
    }

    .touch-stick-knob {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: var(--accent);
      transform: translate(-50%, -50%);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }

    .touch-look-zone {
      position: absolute;
      right: var(--safe-right);
      top: calc(74px + var(--safe-top));
      bottom: calc(140px + var(--safe-bottom));
      width: 46vw;
      min-width: 160px;
      display: grid;
      place-items: center;
      color: rgba(243, 246, 241, 0.42);
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      z-index: 1;
    }

    .touch-action {
      position: absolute;
      right: calc(18px + var(--safe-right));
      bottom: calc(102px + var(--safe-bottom));
      min-width: 92px;
      min-height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: var(--text);
      background: rgba(15, 19, 18, 0.62);
      backdrop-filter: blur(12px);
      font-size: 0.82rem;
      font-weight: 850;
      box-shadow: var(--shadow);
      z-index: 2;
    }

    .touch-action.active {
      color: #111410;
      background: var(--accent);
      border-color: var(--accent);
    }

    .poi-action {
      position: fixed;
      left: 50%;
      bottom: calc(124px + var(--safe-bottom));
      z-index: 18;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .poi-action button {
      min-height: 46px;
      max-width: min(520px, calc(100vw - 32px));
      border: 1px solid rgba(255, 232, 145, 0.72);
      border-radius: 8px;
      padding: 0 16px;
      color: #15140b;
      background: linear-gradient(180deg, #ffe27a, var(--accent));
      box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.36),
        0 0 28px rgba(242, 183, 5, 0.42);
      font-size: 0.88rem;
      font-weight: 900;
      pointer-events: auto;
    }

    .poi-card {
      position: fixed;
      right: calc(18px + var(--safe-right));
      top: calc(92px + var(--safe-top));
      z-index: 24;
      width: min(420px, calc(100vw - 36px));
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 8px;
      overflow: hidden;
      color: var(--text);
      background: rgba(12, 16, 15, 0.94);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      pointer-events: auto;
    }

    .poi-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(242, 183, 5, 0.2), rgba(79, 183, 167, 0.09)),
        var(--panel-strong);
    }

    .poi-eyebrow {
      margin: 0 0 6px;
      color: var(--accent);
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .poi-title {
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.22;
      font-weight: 900;
    }

    .poi-close {
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.07);
      cursor: pointer;
      font-size: 1.05rem;
      font-weight: 900;
    }

    .poi-card-body {
      padding: 15px 16px 16px;
      max-height: calc(100vh - 190px - var(--safe-top) - var(--safe-bottom));
      overflow-y: auto;
    }

    .poi-summary,
    .poi-text,
    .poi-estimate {
      margin: 0;
      line-height: 1.5;
    }

    .poi-summary {
      color: var(--soft);
      font-size: 0.9rem;
      font-weight: 750;
    }

    .poi-text {
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .poi-image-wrap {
      margin: 14px 0 0;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      overflow: hidden;
      background: #080b0a;
    }

    .poi-image {
      display: block;
      width: 100%;
      max-height: 42vh;
      object-fit: contain;
    }

    .poi-estimate {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--soft);
      font-size: 0.78rem;
      font-weight: 800;
    }

    .poi-card[data-variant="sign"] .poi-eyebrow {
      color: var(--accent-2);
    }

    .poi-card[data-variant="model"] .poi-eyebrow {
      color: var(--accent-3);
    }

    .poi-card[data-variant="info"] .poi-eyebrow {
      color: var(--accent);
    }

    .guide-dialog {
      position: fixed;
      left: 50%;
      bottom: calc(24px + var(--safe-bottom));
      z-index: 26;
      width: min(720px, calc(100vw - 36px));
      transform: translateX(-50%);
      border: 1px solid rgba(142, 183, 245, 0.34);
      border-radius: 8px;
      overflow: hidden;
      color: var(--text);
      background: rgba(8, 13, 15, 0.94);
      box-shadow:
        var(--shadow),
        0 0 42px rgba(142, 183, 245, 0.18);
      backdrop-filter: blur(18px);
      pointer-events: auto;
    }

    .guide-dialog-header {
      padding: 14px 16px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(135deg, rgba(142, 183, 245, 0.18), rgba(79, 183, 167, 0.1)),
        var(--panel-strong);
    }

    .guide-eyebrow {
      margin: 0 0 5px;
      color: var(--accent-3);
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .guide-title {
      margin: 0;
      font-size: 1.08rem;
      line-height: 1.25;
      font-weight: 900;
    }

    .guide-dialog-body {
      padding: 14px 16px 16px;
    }

    .guide-text {
      margin: 0;
      color: var(--soft);
      font-size: 0.94rem;
      line-height: 1.55;
    }

    .guide-questions {
      margin-top: 13px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .guide-question,
    .guide-primary,
    .guide-secondary {
      min-height: 38px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: var(--text);
      background: rgba(255, 255, 255, 0.06);
      cursor: pointer;
      font-size: 0.82rem;
      font-weight: 850;
    }

    .guide-question {
      padding: 0 11px;
    }

    .guide-actions {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .guide-primary,
    .guide-secondary {
      padding: 0 13px;
    }

    .guide-primary {
      color: #111410;
      border-color: var(--accent);
      background: var(--accent);
    }

    .guide-secondary {
      color: var(--muted);
    }

    body.touch-device.playing .touch-controls {
      display: block;
    }

    body:not(.playing) .poi-action {
      display: none;
    }

    .hidden {
      display: none !important;
    }

    @media (max-width: 860px) {
      .screen {
        display: block;
        padding:
          calc(14px + var(--safe-top))
          calc(14px + var(--safe-right))
          calc(14px + var(--safe-bottom))
          calc(14px + var(--safe-left));
      }

      .intro {
        width: min(560px, 100%);
        margin: 0 auto;
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .intro-main {
        min-height: auto;
        padding: 22px;
      }

      .mode-choice {
        grid-template-columns: 1fr;
      }

      h1 {
        font-size: 2rem;
      }

      .intro-side {
        max-height: 360px;
      }

      .controls-panel {
        padding: 14px;
      }

      .controls-panel-header {
        flex-direction: column;
        gap: 10px;
      }

      .controls-panel h2 {
        font-size: 1.2rem;
      }

      .controls-close {
        width: 100%;
      }

      .controls-grid {
        grid-template-columns: 1fr;
      }

      .controls-card {
        grid-template-columns: 116px 1fr;
        grid-template-rows: auto;
      }

      .tutorial-visual {
        min-height: 150px;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 0;
      }

      .phone-portrait .device-screen {
        width: 70px;
        height: 116px;
      }

      .phone-landscape .device-screen,
      .desktop-controls .device-screen {
        width: 92px;
        height: 56px;
      }

      .desktop-controls .visual-keys {
        left: 8px;
        bottom: 9px;
        width: 42px;
        height: 20px;
      }

      .desktop-controls .visual-mouse {
        left: 48px;
        top: 13px;
        width: 32px;
        height: 22px;
      }

      .desktop-controls .visual-shift {
        left: 52px;
        bottom: 9px;
        width: 30px;
        height: 20px;
      }

      .desktop-controls .visual-map-key {
        right: 8px;
        top: 13px;
        width: 22px;
        height: 22px;
      }

      .control-item {
        grid-template-columns: 82px 1fr;
      }

      .hud {
        padding:
          calc(10px + var(--safe-top))
          calc(10px + var(--safe-right))
          calc(10px + var(--safe-bottom))
          calc(10px + var(--safe-left));
      }

      .top-row {
        align-items: flex-start;
      }

      .brand {
        min-width: 0;
      }

      .tour-panel {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 170px);
        justify-self: center;
      }

      .minimap,
      .minimap.expanded {
        width: min(220px, 54vw, 30svh);
        justify-self: end;
      }

      .bottom-row {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      .location {
        min-width: 0;
      }

      .touch-stick-zone {
        bottom: calc(126px + var(--safe-bottom));
      }

      .touch-action {
        bottom: calc(52px + var(--safe-bottom));
      }

      .poi-action {
        bottom: calc(196px + var(--safe-bottom));
      }

      .poi-card {
        left: calc(10px + var(--safe-left));
        right: calc(10px + var(--safe-right));
        top: calc(84px + var(--safe-top));
        width: auto;
      }

      .guide-dialog {
        left: calc(10px + var(--safe-left));
        right: calc(10px + var(--safe-right));
        bottom: calc(10px + var(--safe-bottom));
        width: auto;
        transform: none;
      }
    }

    @media (max-width: 860px) and (orientation: portrait) {
      .rotate-prompt {
        display: none;
      }

      body.playing .hud {
        display: grid;
      }

      body.touch-device.playing .touch-controls {
        display: block;
      }

      .hud {
        grid-template-rows: auto auto 1fr;
        padding:
          calc(10px + var(--safe-top))
          calc(10px + var(--safe-right))
          calc(10px + var(--safe-bottom))
          calc(10px + var(--safe-left));
        gap: 8px;
      }

      .top-row {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
      }

      .brand {
        display: none;
      }

      .hud-actions {
        width: 100%;
        gap: 6px;
        justify-content: flex-end;
      }

      .ghost-button {
        min-height: 40px;
        padding: 0 10px;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 16, 15, 0.48);
        font-size: 0.78rem;
      }

      .ghost-button.active {
        color: var(--text);
        border-color: rgba(242, 183, 5, 0.4);
        background: rgba(242, 183, 5, 0.22);
      }

      #pause-button {
        order: 1;
        min-width: 68px;
        margin-right: auto;
      }

      #reset-position {
        order: 2;
        min-width: 84px;
      }

      #music-toggle {
        order: 3;
        min-width: 42px;
        width: 42px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        position: relative;
      }

      #music-toggle::after {
        content: "\266A";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--text);
        font-size: 1rem;
        font-weight: 900;
      }

      #map-toggle {
        order: 4;
        min-width: 62px;
      }

      .minimap,
      .minimap.expanded {
        width: min(220px, 56vw, 28svh);
        justify-self: end;
        align-self: start;
        opacity: 0.82;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(12, 16, 15, 0.38);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(7px);
      }

      .minimap-footer {
        min-height: 22px;
        padding: 3px 6px;
        justify-content: flex-end;
        background: rgba(0, 0, 0, 0.14);
        font-size: 0.58rem;
      }

      .minimap-footer span:first-child {
        display: none;
      }

      .minimap-poi-dot {
        width: 10px;
        height: 10px;
        font-size: 5px;
        box-shadow: 0 0 7px rgba(242, 183, 5, 0.62);
      }

      .minimap-marker {
        width: 13px;
        height: 13px;
      }

      .bottom-row,
      .metrics {
        display: none;
      }

      .touch-stick-zone {
        left: 0;
        right: 0;
        top: 50svh;
        bottom: 0;
        width: auto;
        height: auto;
        transform: none;
      }

      .touch-stick {
        width: 108px;
        height: 108px;
        background: rgba(15, 19, 18, 0.38);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
        opacity: 0;
      }

      .touch-stick-zone.active .touch-stick {
        opacity: 1;
      }

      .touch-stick-knob {
        width: 42px;
        height: 42px;
        background: rgba(242, 183, 5, 0.94);
      }

      .touch-look-zone {
        left: 0;
        right: 0;
        top: calc(54px + var(--safe-top));
        bottom: 50svh;
        width: auto;
        min-width: 0;
        color: rgba(243, 246, 241, 0.18);
      }

      .touch-look-zone span {
        display: none;
      }

      .touch-action {
        right: calc(18px + var(--safe-right));
        top: calc(72svh - 23px);
        bottom: auto;
        min-width: 88px;
        min-height: 46px;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 16, 15, 0.48);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
      }

      .touch-action.active {
        color: #111410;
        background: rgba(79, 183, 167, 0.92);
        border-color: rgba(79, 183, 167, 0.92);
      }

      .poi-action {
        bottom: calc(112px + var(--safe-bottom));
      }
    }

    @media (max-width: 860px) and (orientation: landscape) {
      .screen {
        display: block;
        overflow-y: auto;
        place-items: initial;
        padding:
          calc(8px + var(--safe-top))
          calc(10px + var(--safe-right))
          calc(8px + var(--safe-bottom))
          calc(10px + var(--safe-left));
        -webkit-overflow-scrolling: touch;
      }

      .intro {
        width: min(760px, 100%);
        min-height: auto;
        padding-bottom: calc(8px + var(--safe-bottom));
        margin: 0 auto;
        grid-template-columns: minmax(0, 1fr) minmax(210px, 0.8fr);
        gap: 10px;
        align-items: stretch;
      }

      .intro-main {
        min-height: 0;
        padding: 12px;
        justify-content: start;
      }

      .kicker {
        margin-bottom: 6px;
        font-size: 0.68rem;
      }

      h1 {
        font-size: 1.45rem;
        line-height: 1.05;
      }

      .subtitle {
        margin-top: 6px;
        font-size: 0.78rem;
        line-height: 1.25;
      }

      .language-row {
        margin-top: 8px;
        gap: 6px;
      }

      .lang-button {
        min-width: 46px;
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.78rem;
      }

      .intro-actions {
        margin-top: 10px;
        gap: 8px;
      }

      .mode-button {
        min-height: 44px;
        padding: 8px 10px;
      }

      .mode-button span {
        display: none;
      }

      .start-button {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        font-size: 0.88rem;
      }

      .progress-wrap {
        width: 100%;
        height: 6px;
      }

      .status {
        min-height: 18px;
        font-size: 0.72rem;
        line-height: 1.2;
      }

      .controls-toggle {
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.78rem;
      }

      .controls-panel {
        padding: 10px;
      }

      .controls-panel-header {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 10px;
        margin-bottom: 10px;
      }

      .controls-panel .kicker {
        margin-bottom: 4px;
      }

      .controls-panel h2 {
        font-size: 1rem;
      }

      .controls-panel-header p:last-child {
        margin-top: 4px;
        font-size: 0.68rem;
        line-height: 1.25;
      }

      .controls-close {
        width: auto;
        min-width: 68px;
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.72rem;
      }

      .controls-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .controls-card {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto;
      }

      .tutorial-visual {
        min-height: 116px;
        padding: 7px;
      }

      .phone-portrait .device-screen {
        width: 50px;
        height: 84px;
      }

      .phone-landscape .device-screen,
      .desktop-controls .device-screen {
        width: 62px;
        height: 42px;
      }

      .visual-map,
      .visual-look,
      .visual-sprint,
      .visual-keys,
      .visual-mouse,
      .visual-shift,
      .visual-map-key {
        font-size: 0.36rem;
      }

      .visual-stick {
        width: 25px;
        height: 25px;
      }

      .visual-stick::after {
        width: 10px;
        height: 10px;
      }

      .controls-card-copy {
        padding: 8px;
        gap: 5px;
      }

      .controls-card h3 {
        font-size: 0.76rem;
      }

      .controls-card p {
        font-size: 0.61rem;
        line-height: 1.22;
      }

      .intro-side {
        max-height: none;
        min-height: 0;
        grid-template-rows: minmax(120px, 1fr) auto;
      }

      .map-preview {
        min-height: 120px;
      }

      .control-list {
        gap: 4px;
        padding: 8px 10px;
      }

      .control-item {
        grid-template-columns: 58px 1fr;
        gap: 6px;
        font-size: 0.66rem;
      }

      kbd {
        min-width: 20px;
        padding: 2px 5px;
        border-radius: 5px;
        font-size: 0.6rem;
      }
    }

    @media (max-width: 860px) and (orientation: landscape) {
      .hud {
        padding:
          calc(8px + var(--safe-top))
          calc(10px + var(--safe-right))
          calc(8px + var(--safe-bottom))
          calc(10px + var(--safe-left));
        gap: 8px;
      }

      .top-row {
        align-items: flex-start;
      }

      .hud-panel {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(12, 16, 15, 0.52);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
      }

      .brand {
        min-width: 0;
        padding: 8px 10px;
        opacity: 0.78;
      }

      .brand-title {
        font-size: 0.78rem;
      }

      .brand-subtitle {
        display: none;
      }

      .hud-actions {
        gap: 6px;
      }

      .ghost-button {
        min-height: 36px;
        padding: 0 10px;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 16, 15, 0.42);
        font-size: 0.78rem;
      }

      .ghost-button.active {
        color: var(--text);
        border-color: rgba(242, 183, 5, 0.38);
        background: rgba(242, 183, 5, 0.2);
      }

      #reset-position {
        min-width: 66px;
      }

      #music-toggle {
        min-width: 38px;
        width: 38px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        position: relative;
      }

      #music-toggle::after {
        content: "\266A";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--text);
        font-size: 1rem;
        font-weight: 900;
      }

      .minimap,
      .minimap.expanded {
        width: min(184px, 25vw, 44svh);
        opacity: 0.68;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(12, 16, 15, 0.34);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(7px);
      }

      .minimap:hover,
      .minimap.expanded {
        opacity: 0.86;
      }

      .minimap-map {
        background: rgba(18, 22, 21, 0.46);
      }

      .minimap-map::after {
        border-color: rgba(242, 183, 5, 0.18);
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.16);
      }

      .minimap-footer {
        min-height: 22px;
        padding: 3px 6px;
        justify-content: flex-end;
        background: rgba(0, 0, 0, 0.14);
        font-size: 0.58rem;
      }

      .minimap-footer span:first-child {
        display: none;
      }

      .minimap-poi-dot {
        width: 11px;
        height: 11px;
        border-width: 1px;
        font-size: 5.5px;
        box-shadow: 0 0 7px rgba(242, 183, 5, 0.62);
      }

      .minimap-marker {
        width: 13px;
        height: 13px;
      }

      .bottom-row {
        align-items: flex-end;
        flex-direction: row;
        justify-content: flex-start;
      }

      .metrics {
        display: none;
      }

      .touch-stick-zone {
        left: calc(12px + var(--safe-left));
        bottom: calc(16px + var(--safe-bottom));
        width: min(158px, 35vw, 42svh);
        height: min(158px, 35vw, 42svh);
      }

      .touch-stick {
        width: 86px;
        height: 86px;
        background: rgba(15, 19, 18, 0.32);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
      }

      .touch-stick-knob {
        width: 34px;
        height: 34px;
        background: rgba(242, 183, 5, 0.92);
      }

      .touch-look-zone {
        top: calc(52px + var(--safe-top));
        bottom: calc(94px + var(--safe-bottom));
        width: 52vw;
        color: rgba(243, 246, 241, 0.2);
      }

      .touch-look-zone span {
        display: none;
      }

      .touch-action {
        right: calc(18px + var(--safe-right));
        top: 69svh;
        bottom: auto;
        transform: translateY(-50%);
        min-width: 88px;
        min-height: 44px;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 16, 15, 0.42);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
      }

      .touch-action.active {
        color: #111410;
        background: rgba(79, 183, 167, 0.92);
        border-color: rgba(79, 183, 167, 0.92);
      }
    }

    @media (orientation: landscape) and (pointer: coarse) {
      .hud {
        padding:
          calc(8px + var(--safe-top))
          calc(10px + var(--safe-right))
          calc(8px + var(--safe-bottom))
          calc(10px + var(--safe-left));
        gap: 8px;
      }

      .top-row {
        align-items: flex-start;
      }

      .hud-panel {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(12, 16, 15, 0.52);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
      }

      .brand {
        min-width: 0;
        padding: 8px 10px;
        opacity: 0.78;
      }

      .brand-title {
        font-size: 0.78rem;
      }

      .brand-subtitle {
        display: none;
      }

      .hud-actions {
        gap: 6px;
      }

      .ghost-button {
        min-height: 36px;
        padding: 0 10px;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 16, 15, 0.42);
        font-size: 0.78rem;
      }

      .ghost-button.active {
        color: var(--text);
        border-color: rgba(242, 183, 5, 0.38);
        background: rgba(242, 183, 5, 0.2);
      }

      #music-toggle {
        min-width: 38px;
        width: 38px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        position: relative;
      }

      #music-toggle::after {
        content: "\266A";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--text);
        font-size: 1rem;
        font-weight: 900;
      }

      .minimap,
      .minimap.expanded {
        width: min(184px, 25vw, 44svh);
        opacity: 0.68;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(12, 16, 15, 0.34);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(7px);
      }

      .minimap:hover,
      .minimap.expanded {
        opacity: 0.86;
      }

      .minimap-map {
        background: rgba(18, 22, 21, 0.46);
      }

      .minimap-map::after {
        border-color: rgba(242, 183, 5, 0.18);
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.16);
      }

      .minimap-footer {
        min-height: 22px;
        padding: 3px 6px;
        justify-content: flex-end;
        background: rgba(0, 0, 0, 0.14);
        font-size: 0.58rem;
      }

      .minimap-footer span:first-child {
        display: none;
      }

      .minimap-poi-dot {
        width: 11px;
        height: 11px;
        border-width: 1px;
        font-size: 5.5px;
        box-shadow: 0 0 7px rgba(242, 183, 5, 0.62);
      }

      .minimap-marker {
        width: 13px;
        height: 13px;
      }

      .bottom-row {
        align-items: flex-end;
        flex-direction: row;
        justify-content: flex-start;
      }

      .metrics {
        display: none;
      }

      .touch-stick-zone {
        left: calc(12px + var(--safe-left));
        bottom: calc(16px + var(--safe-bottom));
        width: min(158px, 35vw, 42svh);
        height: min(158px, 35vw, 42svh);
      }

      .touch-stick {
        width: 86px;
        height: 86px;
        background: rgba(15, 19, 18, 0.32);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
      }

      .touch-stick-knob {
        width: 34px;
        height: 34px;
        background: rgba(242, 183, 5, 0.92);
      }

      .touch-look-zone {
        top: calc(52px + var(--safe-top));
        bottom: calc(94px + var(--safe-bottom));
        width: 52vw;
        color: rgba(243, 246, 241, 0.2);
      }

      .touch-look-zone span {
        display: none;
      }

      .touch-action {
        right: calc(18px + var(--safe-right));
        top: min(78svh, calc(100svh - 40px - var(--safe-bottom)));
        bottom: auto;
        transform: translateY(-50%);
        min-width: 88px;
        min-height: 44px;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 16, 15, 0.42);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
        z-index: 3;
      }

      .touch-action.active {
        color: #111410;
        background: rgba(79, 183, 167, 0.92);
        border-color: rgba(79, 183, 167, 0.92);
      }
    }

    @media (orientation: landscape) {
      body.touch-device .hud {
        padding:
          calc(8px + var(--safe-top))
          calc(10px + var(--safe-right))
          calc(8px + var(--safe-bottom))
          calc(10px + var(--safe-left));
        gap: 8px;
      }

      body.touch-device .top-row {
        align-items: flex-start;
      }

      body.touch-device .hud-panel {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(12, 16, 15, 0.52);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
      }

      body.touch-device .brand {
        min-width: 0;
        padding: 8px 10px;
        opacity: 0.78;
      }

      body.touch-device .brand-title {
        font-size: 0.78rem;
      }

      body.touch-device .brand-subtitle {
        display: none;
      }

      body.touch-device .hud-actions {
        gap: 6px;
      }

      body.touch-device .ghost-button {
        min-height: 36px;
        padding: 0 10px;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 16, 15, 0.42);
        font-size: 0.78rem;
      }

      body.touch-device .ghost-button.active {
        color: var(--text);
        border-color: rgba(242, 183, 5, 0.38);
        background: rgba(242, 183, 5, 0.2);
      }

    body.touch-device #reset-position {
      min-width: 66px;
    }

      body.touch-device #music-toggle {
        min-width: 38px;
        width: 38px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        position: relative;
      }

      body.touch-device #music-toggle::after {
        content: "\266A";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--text);
        font-size: 1rem;
        font-weight: 900;
      }

      body.touch-device .minimap,
      body.touch-device .minimap.expanded {
        width: min(184px, 25vw, 44svh);
        opacity: 0.68;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(12, 16, 15, 0.34);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(7px);
      }

      body.touch-device .minimap:hover,
      body.touch-device .minimap.expanded {
        opacity: 0.86;
      }

      body.touch-device .minimap-map {
        background: rgba(18, 22, 21, 0.46);
      }

      body.touch-device .minimap-map::after {
        border-color: rgba(242, 183, 5, 0.18);
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.16);
      }

      body.touch-device .minimap-footer {
        min-height: 22px;
        padding: 3px 6px;
        justify-content: flex-end;
        background: rgba(0, 0, 0, 0.14);
        font-size: 0.58rem;
      }

      body.touch-device .minimap-footer span:first-child {
        display: none;
      }

      body.touch-device .minimap-poi-dot {
        width: 11px;
        height: 11px;
        border-width: 1px;
        font-size: 5.5px;
        box-shadow: 0 0 7px rgba(242, 183, 5, 0.62);
      }

      body.touch-device .minimap-marker {
        width: 13px;
        height: 13px;
      }

      body.touch-device .bottom-row {
        align-items: flex-end;
        flex-direction: row;
        justify-content: flex-start;
      }

      body.touch-device .metrics {
        display: none;
      }

      body.touch-device .touch-stick-zone {
        left: calc(12px + var(--safe-left));
        bottom: calc(16px + var(--safe-bottom));
        width: min(158px, 35vw, 42svh);
        height: min(158px, 35vw, 42svh);
      }

      body.touch-device .touch-stick {
        width: 86px;
        height: 86px;
        background: rgba(15, 19, 18, 0.32);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
      }

      body.touch-device .touch-stick-knob {
        width: 34px;
        height: 34px;
        background: rgba(242, 183, 5, 0.92);
      }

      body.touch-device .touch-look-zone {
        top: calc(52px + var(--safe-top));
        bottom: calc(94px + var(--safe-bottom));
        width: 52vw;
        color: rgba(243, 246, 241, 0.2);
      }

      body.touch-device .touch-look-zone span {
        display: none;
      }

      body.touch-device .touch-action {
        right: calc(18px + var(--safe-right));
        top: min(78svh, calc(100svh - 40px - var(--safe-bottom)));
        bottom: auto;
        transform: translateY(-50%);
        min-width: 88px;
        min-height: 44px;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 16, 15, 0.42);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
        z-index: 3;
      }

      body.touch-device .touch-action.active {
        color: #111410;
        background: rgba(79, 183, 167, 0.92);
        border-color: rgba(79, 183, 167, 0.92);
      }
    }