#touch-bag { display: none; }
#touch-controls { --pad: 132px; --edge: 18px; position: fixed; inset: 0; z-index: 5; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; font: 18px/1 'Street Terminal', monospace; }
#touch-controls button { pointer-events: auto; touch-action: none; color: #ded2b6; background: #171a16b8; border: 1px solid #c3ae786b; min-width: 52px; min-height: 48px; padding: 9px; font: inherit; box-shadow: inset 0 0 0 2px #0709063d; -webkit-tap-highlight-color: transparent; }
#touch-controls button.held, #touch-controls button[aria-pressed="true"] { color: #fff0c7; background: #6b5944ce; border-color: #edd599; }
#touch-controls .touch-stick { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom)); width: var(--pad); height: var(--pad); border-radius: 50% !important; padding: 0; background: radial-gradient(circle, #171a1638 37%, #171a169c 39%, #25291dc9); border: 1px solid #ac9f785c; }
.touch-stick i { position: absolute; width: 44px; height: 44px; left: calc(50% - 22px); top: calc(50% - 22px); border: 1px solid #dbc79a94; background: #69634c73; border-radius: 50%; transform: translate(var(--stick-x, 0px), var(--stick-y, 0px)); pointer-events: none; }
.touch-stick span { position: absolute; bottom: 12px; left: 0; width: 100%; font-size: 15px; color: #cabea4b5; pointer-events: none; }
#touch-controls.firing .touch-aim { border-color: #d79868; }
#touch-controls.firing .touch-aim i { background: #c48b568c; border-color: #f2d49e; }
.touch-move, .touch-left-actions { left: calc(var(--edge) + env(safe-area-inset-left)); }
.touch-aim, .touch-right-actions { right: calc(var(--edge) + env(safe-area-inset-right)); }
.touch-left-actions, .touch-right-actions { position: absolute; display: flex; gap: 6px; bottom: calc(var(--pad) + 34px + env(safe-area-inset-bottom)); }
#touch-controls .touch-fire { display: none; position: absolute; right: calc(var(--edge) + var(--pad) + 12px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%; background: #473329c9; border-color: #ba805d91; }
#touch-controls[data-view="first"] .touch-fire { display: block; }
#touch-controls .touch-view { position: absolute; left: calc(var(--edge) + var(--pad) + 12px + env(safe-area-inset-left)); bottom: calc(100px + env(safe-area-inset-bottom)); }
body.touch-controls { overscroll-behavior: none; }
body.touch-controls #game { touch-action: none; }
body.touch-controls #touch-bag { display: block; }
body.touch-controls #hint, body.touch-controls kbd, body.touch-controls #radar-label { display: none; }
body.touch-controls button { touch-action: manipulation; }
body.touch-controls #heading { top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); justify-content: flex-start; }
body.touch-controls #hud-menu { gap: 5px; }
body.touch-controls #hud-menu button { min-height: 44px; min-width: 44px; font-size: 20px; padding: 7px 10px; }
body.touch-controls #vitals { top: calc(63px + env(safe-area-inset-top)); bottom: auto; left: calc(12px + env(safe-area-inset-left)); width: 155px; }
body.touch-controls .health-label { font-size: 17px; margin-bottom: 4px; }
body.touch-controls #money { font-size: 20px; }
body.touch-controls #weapon-status { margin-top: 5px; gap: 6px; }
body.touch-controls #weapon-icon svg { width: 30px; height: 24px; }
body.touch-controls #ammo-count { font-size: 24px; }
body.touch-controls #rank { margin-top: 0; font-size: 16px; }
body.touch-controls #radar { top: calc(10px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); bottom: auto; width: 100px; display: flex; flex-direction: column; }
body.touch-controls #map-open { width: 100px; height: 100px; order: -1; }
body.touch-controls #minimap { width: 98px; height: 98px; }
body.touch-controls #radar > div { display: none; }
body.touch-controls #gps { margin: 4px 0 0; padding: 3px 5px; gap: 5px; }
body.touch-controls #gps-turn { display: none; }
body.touch-controls #gps-distance { font-size: 17px; }
body.touch-controls #objective { top: calc(60px + env(safe-area-inset-top)); left: 185px; max-width: calc(100vw - 325px); gap: 7px; }
body.touch-controls #objective-title { font-size: 18px; }
body.touch-controls #objective-hint { font-size: 19px; }
body.touch-controls #mission-progress { margin-top: 5px; width: min(230px, 30vw); }
body.touch-controls #mission-progress span { font-size: 18px; }
body.touch-controls #quickbar { display: flex; bottom: calc(170px + env(safe-area-inset-bottom)); max-width: calc(100vw - 350px - env(safe-area-inset-left) - env(safe-area-inset-right)); gap: 5px; padding: 3px; touch-action: pan-x; }
body.touch-controls .quick-slot { width: 48px; height: 48px; padding: 8px; border-radius: 0; }
body.touch-controls #wanted { right: calc(122px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); font-size: 18px; }
body.touch-controls #vehicle-hud { left: auto; right: calc(126px + env(safe-area-inset-right)); bottom: auto; top: calc(47px + env(safe-area-inset-top)); width: 88px; }
body.touch-controls #speedometer { width: 88px; height: 88px; }
body.touch-controls #vehicle-hud small { display: none; }
body.touch-controls #vehicle-hud .car-condition { width: 64px; }
body.touch-controls #context { left: 50% !important; top: auto !important; bottom: calc(235px + env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: 18px; padding: 4px 9px; white-space: normal; max-width: 50vw; text-align: center; }
body.touch-controls #chat:not(.open) { left: auto; right: calc(12px + env(safe-area-inset-right)); top: calc(150px + env(safe-area-inset-top)); bottom: auto; width: auto; }
body.touch-controls #chat:not(.open) .chat-log { display: none; }
body.touch-controls #chat:not(.open) nav > button:last-child { display: none; }
body.touch-controls #chat button { min-height: 44px; }
body.touch-controls #chat.open { position: fixed; top: calc(8px + env(safe-area-inset-top)); bottom: auto; left: calc(8px + env(safe-area-inset-left)); width: min(440px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); background: #12150df5; padding: 6px; z-index: 10; }
body.touch-controls #chat.open .chat-log { max-height: min(130px, 18dvh); }
body.touch-controls #chat input { font-size: 20px; min-height: 44px; }
body.touch-controls #toast { top: 34%; font-size: 21px; padding: 8px 12px; }
body.touch-controls #bag { top: calc(8px + env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom)); right: calc(8px + env(safe-area-inset-right)); width: min(380px, calc(100vw - 16px)); }
body.touch-controls #map-panel { inset: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); padding: 12px; }
body.touch-controls .close-button, body.touch-controls #services-close, body.touch-controls #dialogue-close, body.touch-controls #choices button, body.touch-controls .territory-button { min-width: 44px; min-height: 44px; }
body.touch-controls #dialogue, body.touch-controls #intro-caption { bottom: calc(10px + env(safe-area-inset-bottom)); max-height: 65dvh; overflow-y: auto; width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); padding: 12px; gap: 12px; }
body.touch-controls #dialogue-close { font-size: 28px; }
body.touch-controls #intro-skip, body.touch-controls #credits-skip { min-height: 44px; min-width: 60px; right: calc(12px + env(safe-area-inset-right)); }
body.touch-controls #services[data-mode="store"] { width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 12px; }
body.touch-controls .shop-tabs { margin-bottom: 10px; }
body.touch-controls .shop-tabs button { min-height: 44px; }
body.touch-controls #services-balance { margin-bottom: 8px; }
body.touch-controls .character-heading input, body.touch-controls input { font-size: max(16px, 1em); }
@media (max-width: 600px) {
  #touch-controls { --pad: 124px; --edge: 12px; }
  body.touch-controls #radar { top: calc(62px + env(safe-area-inset-top)); }
  body.touch-controls #hud-menu button { padding: 7px 8px; }
  body.touch-controls #objective { left: 12px; top: calc(158px + env(safe-area-inset-top)); max-width: calc(100vw - 134px); }
  body.touch-controls #mission-progress { width: min(230px, 54vw); }
  body.touch-controls #quickbar { bottom: calc(225px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  body.touch-controls #context { bottom: calc(283px + env(safe-area-inset-bottom)); max-width: 85vw; }
  body.touch-controls #wanted { top: calc(134px + env(safe-area-inset-top)); right: auto; left: 12px; }
  body.touch-controls #vehicle-hud { right: calc(120px + env(safe-area-inset-right)); top: calc(62px + env(safe-area-inset-top)); }
  body.touch-controls #speech, body.touch-controls #intro-speech { font-size: 21px; line-height: 1.15; }
  body.touch-controls #portrait, body.touch-controls #intro-portrait { width: 62px; height: 70px; }
  body.touch-controls .shop-card-footer { flex-wrap: wrap; gap: 3px; padding: 8px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  #touch-controls { --pad: 108px; --edge: 14px; }
  #touch-controls .touch-stick { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .touch-left-actions, .touch-right-actions { bottom: calc(129px + env(safe-area-inset-bottom)); }
  #touch-controls .touch-view { bottom: calc(66px + env(safe-area-inset-bottom)); }
  #touch-controls .touch-fire { bottom: calc(12px + env(safe-area-inset-bottom)); }
  body.touch-controls #quickbar { bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100vw - 440px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  body.touch-controls #chat:not(.open) { right: calc(125px + env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); }
  body.touch-controls #wanted { top: calc(56px + env(safe-area-inset-top)); right: calc(128px + env(safe-area-inset-right)); }
  body.touch-controls #vehicle-hud { top: calc(87px + env(safe-area-inset-top)); }
  body.touch-controls #context { bottom: calc(74px + env(safe-area-inset-bottom)); max-width: 40vw; }
  body.touch-controls #objective { max-width: calc(100vw - 445px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  body.touch-controls .character-heading { height: 52px; padding: 6px 12px; }
  body.touch-controls .character-heading h2 { font-size: 28px; }
  body.touch-controls .character-body { height: calc(100% - 114px); grid-template-columns: 1fr 1fr; }
  body.touch-controls .character-footer { min-height: 62px; padding: 8px; }
  body.touch-controls .character-options { padding: 8px; }
}
@media (max-width: 360px) {
  #touch-controls { --pad: 104px; --edge: 10px; }
  #touch-controls .touch-fire { width: 48px; height: 48px; }
  body.touch-controls #map-open { width: 80px; height: 80px; }
  body.touch-controls #minimap { width: 78px; height: 78px; }
  body.touch-controls #radar { width: 80px; }
  body.touch-controls #hud-menu button { padding: 7px 6px; font-size: 18px; }
  body.touch-controls #vehicle-hud { right: 12px; top: 95px; }
}