/* The handheld overlay: a restrained, game-authored take on the classic iFruit. */
*,*::before,*::after { box-sizing: border-box; }

.phone-launcher { width: 46px; height: 46px; display: grid; place-items: center; position: relative; padding: 4px; border: 1px solid rgba(177,191,207,.72); border-radius: 11px; color: #c5c9ce; background: #050609; box-shadow: 0 4px 13px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.13); cursor: pointer; transition: transform .16s ease,border-color .16s ease,filter .16s ease; }
.phone-launcher:hover { transform: translateY(-2px); border-color: #dcefff; filter: brightness(1.14); }
.phone-launcher:active { transform: translateY(1px) scale(.96); }
.phone-launcher-glyph { width: 37px; height: 37px; display: block; overflow: visible; }
.phone-launcher kbd { position: absolute; right: 2px; bottom: 0; border: 0; background: none; color: rgba(255,255,255,.68); font: 700 8px/1 sans-serif; }
.phone-launcher[aria-expanded="true"] { border-color: #83bce4; box-shadow: 0 0 0 1px rgba(112,188,234,.35),0 4px 13px rgba(0,0,0,.48); }
.hud-top-right .settings-cog { width:46px; height:46px; }

/* The old game controls remain wired for existing systems but are removed from the visible HUD. */
.hud-top-left #search-box,.hud-top-left #search-results,#btn-teleport,#teleport-popover,#mode-switch { display: none !important; }

.phone-overlay { --phone-ink:#111722; --phone-paper:#e8edf4; --phone-muted:#a8b1be; --phone-blue:#25c5e8; position:fixed; z-index:40; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:18px clamp(18px,4vw,64px); pointer-events:auto; background:rgba(0,0,0,.035); perspective:1200px; }
.phone-overlay[hidden] { display:none !important; }
.phone-device { position:relative; display:flex; flex-direction:column; width:min(350px,38vw); height:min(680px,calc(100svh - 36px)); min-height:500px; padding:0 10px; overflow:hidden; border:3px solid #9bc9ed; border-radius:39px; background:linear-gradient(115deg,#7a9cbb 0,#24364e 2%,#101522 11%,#070a11 45%,#182235 96%,#97c5e6 100%); box-shadow:0 27px 70px rgba(0,0,0,.64),0 7px 20px rgba(0,0,0,.45),inset 0 0 0 2px rgba(225,244,255,.26),inset 4px 0 7px rgba(180,219,248,.23); opacity:0; transform:translate3d(22px,82px,0) rotate(1deg) scale(.96); transform-origin:80% 100%; transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease; pointer-events:auto; will-change:transform,opacity; }
.phone-overlay.is-open .phone-device { opacity:1; transform:translate3d(0,0,0) rotate(-.4deg) rotateY(-1deg) scale(1); }
.phone-device::after { content:""; position:absolute; z-index:3; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.10),transparent 16% 78%,rgba(168,211,244,.11)); }
.phone-top-bezel { position:relative; flex:none; height:35px; display:flex; align-items:center; justify-content:center; gap:3px; margin:0 8px; color:#d9e1e9; background:linear-gradient(#161b26,#06080d); font:12px Georgia,serif; letter-spacing:-.045em; }
.phone-brand-mark { width:12px; height:12px; color:#d9e1e9; font:8px/1 sans-serif; }
.phone-device-brand { text-shadow:0 1px 2px #000; }
.phone-top-bezel i { position:absolute; right:17%; width:6px; height:6px; border:1px solid #303b4c; border-radius:50%; background:radial-gradient(circle at 35% 35%,#52627a,#080c12 70%); }
.phone-screen { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; border-radius:19px 19px 0 0; color:#f4eff2; background:#10131c; font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
.phone-status { z-index:2; flex:none; height:32px; display:flex; align-items:center; gap:6px; padding:4px 11px 0; color:#f4f5ed; background:#080b10; font-size:10px; font-weight:700; letter-spacing:.1em; }
.phone-signal { height:12px; display:flex; align-items:flex-end; gap:2px; }
.phone-signal i { width:3px; border-radius:1px 1px 0 0; background:#f0f2ee; }
.phone-signal i:nth-child(1) { height:4px; }.phone-signal i:nth-child(2) { height:7px; }.phone-signal i:nth-child(3) { height:9px; }.phone-signal i:nth-child(4) { height:12px; }
.phone-carrier-mark { color:#f4f5f4; font-size:17px; line-height:1; }
.phone-day { color:#f4f5f4; letter-spacing:0; font-size:10px; }
.phone-clock { margin-left:auto; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:0; }
.phone-battery { position:relative; display:block; width:19px; height:9px; margin-left:2px; border:1px solid rgba(255,255,255,.72); border-radius:2px; }
.phone-battery::after { content:""; position:absolute; right:-3px; top:2px; width:2px; height:3px; border-radius:0 2px 2px 0; background:rgba(255,255,255,.72); }
.phone-battery i { position:absolute; inset:1px 2px 1px 1px; border-radius:1px; background:#e5e9ec; }
.phone-service-band { flex:none; height:34px; display:flex; align-items:center; justify-content:center; color:#f3f7f8; background:linear-gradient(180deg,#8daec7,#557a98); border-top:1px solid rgba(255,255,255,.35); border-bottom:1px solid rgba(16,29,43,.28); box-shadow:inset 0 1px rgba(255,255,255,.3),inset 0 -1px rgba(0,0,0,.13); font:500 16px/1 Georgia,serif; text-shadow:0 1px 1px rgba(0,0,0,.28); }
.phone-content { position:relative; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; animation:phone-screen-in .2s ease both; }
@keyframes phone-screen-in { from { opacity:.35; transform:translateX(8px); } to { opacity:1; transform:none; } }
.phone-app-grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:112px; align-content:start; justify-items:center; gap:17px 18px; padding:24px 26px; background-color:#126a8e; background-image:linear-gradient(31deg,transparent 47%,rgba(27,173,211,.28) 48%,rgba(3,47,111,.2) 71%,transparent 72%),linear-gradient(148deg,transparent 43%,rgba(23,184,218,.25) 44%,rgba(5,48,114,.27) 68%,transparent 69%),linear-gradient(150deg,#14769b,#05628d 48%,#083c74); }
.phone-app-icon { position:relative; width:100%; display:flex; flex-direction:column; align-items:center; gap:7px; padding:2px; border:0; border-radius:7px; color:#fff; background:transparent; font:inherit; cursor:pointer; transition:transform .15s ease,filter .15s ease; }
.phone-app-icon:hover,.phone-app-icon:focus-visible { transform:translateY(-2px) scale(1.035); filter:brightness(1.12); outline:none; }.phone-app-icon:active { transform:scale(.96); }
.phone-app-glyph { position:relative; width:70px; height:70px; flex:none; display:grid; place-items:center; border:1px solid rgba(255,255,255,.62); border-radius:9px; color:#fff; box-shadow:inset 0 2px 2px rgba(255,255,255,.56),inset 0 -4px 5px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.38); }
.phone-app-glyph::after { content:""; position:absolute; inset:2px; border:1px solid rgba(255,255,255,.16); border-radius:6px; pointer-events:none; }
.phone-app-glyph svg { width:48px; height:48px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.28)); }
.phone-app-glyph.garage { background:linear-gradient(145deg,#f5b354,#e4772e 58%,#b9472d); }.phone-app-glyph.teleport { background:linear-gradient(145deg,#5fe0ef,#078fbf 58%,#075a9b); }
.phone-app-name { color:#fff; font-size:11px; font-weight:600; line-height:1.1; text-shadow:0 1px 3px rgba(0,0,0,.75); }
.phone-add { flex:none; width:calc(100% + 20px); height:39px; margin:0 -10px; border:0; border-top:1px solid rgba(255,255,255,.31); color:#43c9eb; background:linear-gradient(#10141b,#05070b); font:700 34px/30px Arial,sans-serif; text-shadow:0 1px 4px rgba(35,196,235,.45); cursor:pointer; transition:color .14s ease,filter .14s ease; }
.phone-add:hover,.phone-add:focus-visible { color:#a1edff; filter:brightness(1.16); outline:none; }
.phone-home-bar { flex:none; height:55px; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; margin:0; padding:0 4px 2px; border-top:1px solid rgba(255,255,255,.13); border-radius:0 0 27px 27px; background:linear-gradient(#11151e,#07090f); }
.phone-home-bar button { height:100%; display:grid; grid-template-rows:23px auto; align-content:center; justify-items:center; gap:2px; border:0; color:#c5cbd3; background:transparent; cursor:pointer; transition:color .14s ease,background .14s ease,transform .14s ease; }
.phone-home-bar button:hover,.phone-home-bar button:focus-visible { color:#fff; background:rgba(255,255,255,.09); outline:none; }
.phone-home-bar button:active { transform:scale(.9); }
.phone-home-bar svg { width:20px; height:20px; align-self:end; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.phone-nav-label { align-self:start; color:inherit; font:600 8px/1 Arial,sans-serif; letter-spacing:.01em; }

.phone-app-header { flex:none; display:flex; align-items:center; gap:12px; padding:13px 14px 11px; color:#f3f4ec; background:linear-gradient(#0c3559,#092b4c); border-bottom:1px solid rgba(255,255,255,.16); }
.phone-back { flex:none; width:34px; height:34px; border:1px solid rgba(255,255,255,.24); border-radius:7px; color:#70d8f2; background:rgba(255,255,255,.08); font-size:29px; line-height:1; cursor:pointer; }
.phone-app-heading { min-width:0; flex:1; }.phone-app-heading h2 { margin:0; font-size:20px; letter-spacing:-.04em; }.phone-app-heading p { margin:3px 0 0; color:rgba(237,240,248,.68); font-size:10px; }
.phone-app-brand { width:27px; height:27px; display:grid; place-items:center; border:1px solid rgba(103,221,244,.55); border-radius:7px; color:#70d8f2; font:700 15px Georgia,serif; }
.phone-settings-panel { --text:#1a3047; --text-2:#344e68; --text-3:#506981; --hover:rgba(33,113,163,.12); --divider:rgba(35,62,88,.18); --accent:#1876a8; --accent-ink:#fff; position:relative; z-index:4; width:100%; min-height:0; max-height:none; flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#899fb4 #d5dee7; padding:8px 9px 12px; border:0; border-radius:0; color:var(--text); background:#dfe7ef; box-shadow:none; }
.phone-settings-panel * { color:#000 !important; opacity:1 !important; }
.phone-settings-panel .time-btn.active,.phone-settings-panel .time-btn.active * { color:#000 !important; }
.phone-settings-panel[hidden] { display:none !important; }.phone-settings-panel .toolbar { width:100%; height:auto; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:5px; padding:0; }
.phone-settings-panel .time-switch { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.phone-settings-panel .time-btn,.phone-settings-panel .time-btn.active { min-width:0; min-height:35px; height:auto; justify-content:flex-start; padding:0 8px; border:1px solid #c2d0dc; border-radius:7px; color:#344e68; background:#edf2f6; }
.phone-settings-panel .time-btn:hover { color:#162f47; background:#d6e6f0; }
.phone-settings-panel .time-btn.active,.phone-settings-panel .time-btn.active:hover { border-color:#5b9bbc; color:#000; background:#b8dff0; box-shadow:inset 0 1px rgba(255,255,255,.55),0 2px 4px rgba(14,51,77,.12); }
.phone-settings-panel .time-btn.active .seg-label { color:#000; }.phone-settings-panel .time-btn .seg-label { display:inline; font-size:10px; }
.phone-settings-panel .toolbar-divider { display:none; }
.phone-settings-panel .tool-btn { width:100%; min-height:36px; justify-content:flex-start; padding:0 9px; border:1px solid #c2d0dc; border-radius:7px; color:#233e57; background:#f5f8fb; }
.phone-settings-panel .tool-btn:hover,.phone-settings-panel .tool-btn.is-open { border-color:#9ab5c9; color:#14344e; background:#e8f0f6; }
.phone-settings-panel .tool-btn .icon { color:#31546f; }.phone-settings-panel .tool-btn .icon-sm { color:#54718a; }
.phone-settings-panel .tool-label { display:inline; color:inherit; }
.phone-settings-panel .camera-switch { width:100%; margin-top:6px; padding:4px; border:1px solid #c2d0dc; border-radius:8px; background:#edf2f6; }
.phone-settings-panel .camera-switch .icon-btn { color:#3d5b74; }.phone-settings-panel .camera-switch .camera-current { color:#233e57; }.phone-settings-panel .camera-switch .camera-current:hover,.phone-settings-panel .camera-switch .camera-current.is-open { background:#dce8f0; }
.phone-settings-error { padding:16px; color:#000; font-size:12px; }

.garage-intro { flex:none; margin:0; padding:8px 14px; color:#e6f1fb; background:linear-gradient(#132c4a,#0d2541); font-size:12px; }
.garage-list,.teleport-app { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 12px 12px; scrollbar-width:thin; scrollbar-color:#7e9ab3 transparent; background:linear-gradient(31deg,transparent 47%,rgba(27,173,211,.16) 48%,rgba(3,47,111,.13) 71%,transparent 72%),linear-gradient(150deg,#14769b,#05628d 48%,#083c74); }
.phone-section-label { margin:2px 3px 9px; color:#e3f7ff; font-size:9px; font-weight:800; letter-spacing:.14em; }.garage-list .phone-section-label { margin-bottom:12px; }
.garage-option { width:100%; min-height:65px; display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:8px; border:1px solid rgba(255,255,255,.23); border-radius:8px; text-align:left; color:#182a38; background:rgba(240,248,255,.91); box-shadow:0 3px 9px rgba(0,20,45,.2); cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.garage-option:hover { transform:translateY(-1px); border-color:#69dcf2; }.garage-option:active { transform:scale(.985); }.garage-option.is-active { border-color:#70d8f2; background:#d4f7ff; box-shadow:inset 0 0 0 1px rgba(31,164,204,.23),0 4px 12px rgba(0,20,45,.22); }
.garage-glyph { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:7px; color:white; font-size:25px; font-weight:800; }.garage-glyph.walk { background:linear-gradient(145deg,#657f8e,#304d58); }.garage-glyph.car { background:linear-gradient(145deg,#dd7958,#9c4037); }.garage-glyph.bike { background:linear-gradient(145deg,#8aa65e,#526c3c); }.garage-glyph.heli { background:linear-gradient(145deg,#8a77a7,#4e4568); }
.garage-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }.garage-copy strong { font-size:13px; }.garage-copy small { color:#526878; font-size:10px; }.garage-state { flex:none; width:18px; height:18px; border:1px solid #91a4b1; border-radius:50%; }.garage-option.is-active .garage-state { border:5px solid #188cb2; background:#d7f8ff; }.garage-option.has-error { border-color:#ad6554; }.garage-option.has-error small { color:#964d40; }
.phone-footnote { margin:14px 5px 4px; color:#e2f2fc; font-size:10px; line-height:1.5; }
.teleport-app { display:flex; flex-direction:column; gap:9px; }.phone-search-label { margin:1px 2px -4px; color:#e3f7ff; font-size:9px; font-weight:800; letter-spacing:.14em; }
.phone-search { flex:none; width:100%; height:42px; padding:0 12px; border:1px solid #b6cada; border-radius:7px; outline:0; color:#203344; background:rgba(255,255,255,.94); font:inherit; font-size:13px; }.phone-search:focus { border-color:#29a9d0; box-shadow:0 0 0 3px rgba(75,205,236,.2); }
.phone-search-status { flex:none; min-height:18px; margin:0 2px; color:#e1eff8; font-size:10px; }.phone-search-results { display:flex; flex-direction:column; gap:5px; }
.phone-result { min-height:52px; display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid rgba(255,255,255,.24); border-radius:7px; text-align:left; color:#203344; background:rgba(255,255,255,.91); cursor:pointer; }.phone-result:hover { border-color:#38c4e6; background:white; }
.phone-result-pin,.selected-pin { flex:none; width:31px; height:31px; display:grid; place-items:center; border-radius:6px; color:#fff; background:#167ba7; font-size:19px; }.phone-result-copy,.selected-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.phone-result-copy strong,.selected-copy strong { overflow:hidden; color:#213344; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.phone-result-copy small,.selected-copy small { overflow:hidden; color:#748393; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.phone-result-arrow { color:#167ba7; font-size:24px; }
.phone-quick-list { display:flex; flex-wrap:wrap; gap:6px; }.phone-quick-destination { min-height:28px; padding:0 9px; border:1px solid rgba(255,255,255,.32); border-radius:5px; color:#f3fbff; background:rgba(1,40,74,.35); font:inherit; font-size:10px; cursor:pointer; }.phone-quick-destination:hover { border-color:#65d6f0; background:rgba(1,40,74,.58); }
.phone-selected-place { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid rgba(255,255,255,.32); border-radius:7px; background:rgba(255,255,255,.87); }.phone-selected-place[hidden] { display:none; }
.phone-go { flex:none; width:100%; min-height:42px; margin-top:auto; border:1px solid rgba(255,255,255,.35); border-radius:7px; color:#f7fcff; background:linear-gradient(#138bb1,#08638e); font:inherit; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 4px 12px rgba(0,32,61,.2); }.phone-go:disabled { color:#758998; background:#d7e0e7; box-shadow:none; cursor:default; }

@media (max-width:700px) {
  .phone-overlay { align-items:flex-end; justify-content:center; padding:0 max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .phone-device { width:min(385px,calc(100vw - 16px)); height:min(740px,calc(100svh - 18px - env(safe-area-inset-top))); min-height:min(480px,calc(100svh - 18px)); }
  .phone-overlay.is-open .phone-device { transform:none; }
  .phone-launcher kbd { display:none; }
}
@media (max-height:620px) and (min-width:701px) { .phone-overlay { padding:10px 24px; }.phone-device { height:calc(100svh - 20px); min-height:0; } }
@media (prefers-reduced-motion:reduce) { .phone-device,.phone-content,.phone-launcher { transition-duration:.01ms; animation-duration:.01ms; } }

.vehicle-interaction-prompt { position:fixed; z-index:18; left:50%; bottom:clamp(76px,12vh,132px); transform:translateX(-50%); padding:10px 16px; border:1px solid rgba(207,231,244,.62); border-radius:7px; color:#f3f7fb; background:rgba(9,17,28,.88); box-shadow:0 5px 20px rgba(0,0,0,.35); font:700 14px/1.2 system-ui,sans-serif; letter-spacing:.02em; text-shadow:0 1px 2px #000; cursor:pointer; pointer-events:auto; }
.vehicle-interaction-prompt[hidden] { display:none !important; }

/* Classic-era handset treatment: hard graphite panels, olive wallpaper and
   amber selection states instead of the default glossy smartphone look. */
.phone-overlay {
  --phone-ink: #eee6c8;
  --phone-muted: #a9a487;
  --phone-blue: #d7a737;
  align-items: flex-end;
  padding: 18px clamp(18px, 4vw, 64px);
  background: rgba(5, 8, 5, .52);
}
.phone-device {
  width: min(368px, 39vw);
  border: 2px solid #b69a5c;
  border-radius: 10px;
  background: linear-gradient(145deg, #4b4a3b, #111612 18%, #080b09 86%, #5f583e);
  box-shadow: 0 24px 55px rgba(0,0,0,.78), inset 0 0 0 1px rgba(255,220,132,.22);
}
.phone-device::after { border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.phone-top-bezel { height: 32px; margin: 0 7px; color: #dbc27e; background: #0d110d; font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: .12em; }
.phone-screen { border-radius: 4px 4px 0 0; color: #efe6c7; background: #111611; font-family: 'Barlow Condensed', Arial, sans-serif; }
.phone-status { height: 29px; padding: 3px 10px 0; color: #d8c88e; background: #090c09; font-family: 'Barlow Condensed', Arial, sans-serif; letter-spacing: .12em; }
.phone-service-band { height: 42px; justify-content: flex-start; padding: 0 15px; color: #080b08; background: linear-gradient(#e5bd57, #a77622); border-top: 1px solid #f4dc90; border-bottom: 2px solid #5b4315; font: 800 20px/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(255,235,153,.35); }
.phone-content { background: #182018; }
.phone-app-grid { grid-auto-rows: 108px; gap: 13px 14px; padding: 21px 22px; background-color: #1c2a1c; background-image: linear-gradient(135deg, transparent 46%, rgba(207,173,66,.08) 47% 48%, transparent 49%), linear-gradient(45deg, transparent 46%, rgba(153,185,98,.08) 47% 48%, transparent 49%), repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 4px); }
.phone-app-icon { gap: 6px; border-radius: 0; color: #f4e9c5; }
.phone-app-glyph { width: 66px; height: 66px; border: 2px solid #d7b650; border-radius: 3px; box-shadow: 3px 3px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.22); }
.phone-app-glyph.garage { background: linear-gradient(145deg, #ad7221, #4d3414); }
.phone-app-glyph.teleport { background: linear-gradient(145deg, #55734b, #182a1c); }
.phone-app-name { font: 700 13px/1 'Barlow Condensed', Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; text-shadow: 2px 2px 0 #000; }
.phone-home-bar { height: 49px; border-top: 2px solid #80672b; border-radius: 0; background: #0b100b; }
.phone-home-bar button { color: #c7bb8c; font-family: 'Barlow Condensed', Arial, sans-serif; }
.phone-home-bar button:hover,.phone-home-bar button:focus-visible { color: #f1c95a; background: rgba(211,168,54,.12); }
.phone-nav-label { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.phone-app-header { padding: 11px 13px; color: #f0e5c4; background: #182018; border-bottom: 2px solid #9b7627; }
.phone-back { width: 31px; height: 31px; border: 1px solid #a98a3f; border-radius: 2px; color: #f0c75d; background: #263323; font-family: 'Bebas Neue', Impact, sans-serif; }
.phone-app-heading h2 { font: 800 24px/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.phone-app-heading p { margin-top: 4px; color: #aaa783; font: 600 11px/1 'Barlow Condensed', Arial, sans-serif; letter-spacing: .04em; }
.phone-app-brand { width: 29px; height: 29px; border: 1px solid #b99a43; border-radius: 2px; color: #e0b84c; font: 800 18px/1 'Bebas Neue', Impact, sans-serif; }
.phone-settings-panel { --text: #eee6c8; --text-2: #c1b994; --text-3: #8e896d; --hover: rgba(218,175,55,.14); --divider: rgba(220,184,87,.28); --accent: #d5a635; --accent-ink: #11150e; padding: 12px 11px 14px; color: var(--text); background: #141b14; scrollbar-color: #9c792e #111611; }
.phone-settings-panel::before { content: 'GAME SETTINGS'; display: block; margin: 0 3px 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(213,166,53,.38); color: #dfb64b; font: 800 15px/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .12em; }
.phone-settings-panel * { color: inherit !important; opacity: 1 !important; }
.phone-settings-panel .time-switch { gap: 5px; }
.phone-settings-panel .time-btn,.phone-settings-panel .time-btn.active { min-height: 38px; padding: 0 9px; border: 1px solid #4d583c; border-radius: 2px; color: #d2c69c; background: #202b20; font-family: 'Barlow Condensed', Arial, sans-serif; }
.phone-settings-panel .time-btn:hover { color: #fff1be; background: #2b3828; }
.phone-settings-panel .time-btn.active,.phone-settings-panel .time-btn.active:hover { border-color: #d5a635; color: #171a10; background: #d5a635; box-shadow: inset 0 1px rgba(255,255,255,.35), 2px 2px 0 #080b08; }
.phone-settings-panel .time-btn .seg-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.phone-settings-panel .time-btn .seg-label { display: inline !important; max-width: 150px; overflow: visible; opacity: 1; white-space: nowrap; }
.phone-settings-panel .tool-btn { min-height: 39px; padding: 0 10px; border: 1px solid #4d583c; border-radius: 2px; color: #d2c69c; background: #202b20; font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.phone-settings-panel .tool-btn:hover,.phone-settings-panel .tool-btn.is-open { border-color: #d5a635; color: #fff1be; background: #2b3828; }
.phone-settings-panel .camera-switch { border: 1px solid #4d583c; border-radius: 2px; background: #101710; }
.phone-settings-panel .camera-switch .camera-current { color: #e5d7aa; }
.phone-settings-panel .tool-label { display: inline !important; visibility: visible; color: inherit !important; }
.phone-settings-panel .tool-btn kbd { display: inline-flex; }
.phone-settings-panel .tool-btn { gap: 9px; }
.phone-settings-panel .time-btn { justify-content: flex-start; gap: 8px; }
.phone-settings-panel .toolbar-divider { display: none !important; }
.phone-settings-panel .mp-dot { flex: none; }
.phone-app-header,.garage-intro,.garage-list,.teleport-app { font-family: 'Barlow Condensed', Arial, sans-serif; }
.garage-intro { color: #dfd4ad; background: #182018; border-bottom: 1px solid #75602d; }
.garage-list,.teleport-app { background-color: #182018; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); }
.phone-section-label,.phone-search-label { color: #d6b550; font: 800 12px/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .12em; }
.garage-option { min-height: 70px; border: 1px solid #85713c; border-radius: 2px; color: #eee4c4; background: #20291f; box-shadow: 2px 2px 0 rgba(0,0,0,.42); }
.garage-option:hover { border-color: #e0b94c; background: #293526; }
.garage-option.is-active { border-color: #e0b94c; background: #34361f; }
.garage-copy strong { color: #f3e7c2; font: 800 17px/1 'Barlow Condensed', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.garage-copy small { color: #b2aa8d; font-size: 12px; }
.garage-glyph { border: 1px solid rgba(226,193,94,.6); border-radius: 2px; }
.garage-glyph.car { background: linear-gradient(145deg,#8c6231,#45351e); }
.garage-glyph.bike { background: linear-gradient(145deg,#526b3d,#273520); }
.garage-glyph.heli { background: linear-gradient(145deg,#74623b,#38331f); }
.phone-footnote { color: #bdb28a; }
.phone-search-label { margin-bottom: 0; }
.phone-search { border: 1px solid #927a3d; border-radius: 2px; color: #f0e5c3; background: #0c110c; font: 600 14px/1 'Barlow Condensed', Arial, sans-serif; }
.phone-search::placeholder { color: #9a9277; opacity: 1; }
.phone-search:focus { border-color: #e0b94c; box-shadow: 0 0 0 2px rgba(224,185,76,.2); }
.phone-search-status { color: #c3b88f; }
.phone-result { border: 1px solid #5a603e; border-radius: 2px; color: #eee4c4; background: #20291f; }
.phone-result-copy strong,.selected-copy strong { color: #f0e5c3; }
.phone-result-copy small,.selected-copy small { color: #aaa486; }
.phone-go { border: 1px solid #eed17c; border-radius: 2px; color: #19170e; background: linear-gradient(#edc85c,#b88428); font: 800 16px/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; box-shadow: 2px 2px 0 #070a07; }
.phone-quick-destination { border: 1px solid #786735; border-radius: 2px; color: #e8dba9; background: #22291d; }
.phone-selected-place { border: 1px solid #8b7540; border-radius: 2px; color: #eee4c4; background: #252c20; }
.phone-result-pin,.selected-pin { border-radius: 2px; color: #17180f; background: #d1a940; }
.phone-app-glyph svg { filter: none; }
.phone-launcher-glyph { object-fit: contain; }

@media (max-width:700px) { .phone-overlay { padding: 0 max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); } .phone-device { width:min(385px,calc(100vw - 16px)); } }