/* ── Phone (phone.js) ────────────────────────────────────────────────────────── The case is a machined handset: titanium lip, black gasket, glass. Nothing on the case is sprayed. Everything on the screen is painted the same way as the Hood panel and the wallet button (graffiti.js frames, drips off, neon only). Type is Teko + Share Tech Mono and is never filtered. */ /* the Hood / wallet fill, repeated for the phone's own panels */ #phoneLauncher, .ph-app-icon, .ph-card, .ph-panel, #cityPhone .ph-primary, #cityPhone .ph-btn, #cityPhone .ph-iconbtn { background: radial-gradient(130% 90% at 15% 0%, rgba(96, 36, 140, .32), transparent 62%), radial-gradient(90% 70% at 100% 100%, rgba(60, 20, 90, .3), transparent 70%), var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: var(--neon); } /* ── Launcher: same control as the wallet button. Bottom-right on desktop, bottom-left on a phone (that corner is empty, and it stays clear of the ape in the middle). ── */ #phoneLauncher { position: fixed; right: 18px; bottom: 18px; z-index: 46; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 11px; border: 0; cursor: pointer; font: 14px/1 'Share Tech Mono', monospace; letter-spacing: 1px; text-transform: uppercase; touch-action: manipulation; } #phoneLauncher > :not(.spray-frame) { position: relative; z-index: 1; } #phoneLauncher svg { width: 20px; height: 22px; flex: none; filter: drop-shadow(0 0 4px rgba(168, 255, 62, .9)); } #phoneLauncher .ph-l-text { padding-top: 1px; } #phoneLauncher:hover, #phoneLauncher:focus-visible { outline: none; } #phoneLauncher:hover > .spray-frame, #phoneLauncher:focus-visible > .spray-frame, #phoneLauncher.is-open > .spray-frame { filter: drop-shadow(0 0 8px rgba(168, 255, 62, .95)) brightness(1.2); } /* ── The handset: graphite titanium, a bright chamfer, then the black glass gasket ── */ #cityPhone { position: fixed; right: 18px; bottom: 78px; z-index: 47; width: min(372px, calc(100vw - 24px)); height: min(720px, calc(100dvh - 104px)); box-sizing: border-box; display: flex; padding: 8px; border-radius: 50px; background: #090908; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1.5px #161513, 0 0 0 3px #c2bdb2, 0 0 0 4px #6a655d, 0 0 0 5.5px #2a2825, 0 34px 72px rgba(0, 0, 0, .62); color: var(--text); font: 12px/1.45 'Share Tech Mono', monospace; transform: translateY(24px) scale(.98); transform-origin: bottom right; opacity: 0; transition: transform .3s cubic-bezier(.2, .9, .25, 1), opacity .22s ease; } #cityPhone.open { transform: none; opacity: 1; } /* volume rocker and the power button, cut from the same metal */ #cityPhone::before, #cityPhone::after { content: ''; position: absolute; width: 3px; background: linear-gradient(90deg, #3a3834, #d9d4c8 55%, #6e6a62); } #cityPhone::before { left: -8px; top: 116px; height: 24px; border-radius: 2px 0 0 2px; box-shadow: 0 40px 0 #9c978c, 0 68px 0 #9c978c; } #cityPhone::after { right: -8px; top: 150px; height: 48px; border-radius: 0 2px 2px 0; } #cityPhone[hidden], #cityPhone [hidden] { display: none !important; } #cityPhone button, #cityPhone select, #cityPhone textarea { font: inherit; color: inherit; } #cityPhone button { cursor: pointer; touch-action: manipulation; } #cityPhone button:disabled { opacity: .4; cursor: not-allowed; } #cityPhone button:focus-visible, #cityPhone select:focus-visible, #cityPhone textarea:focus-visible, #cityPhone summary:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; } /* glass */ .ph-display { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 42px; background: #07030f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 40px rgba(0, 0, 0, .45); } .ph-status { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 6px 22px 0; color: #f4f1ea; font: 600 12px/1 system-ui, sans-serif; letter-spacing: .2px; } .ph-island { position: absolute; left: 50%; top: 11px; width: 92px; height: 24px; transform: translateX(-50%); border-radius: 16px; background: #050505; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .ph-island::after { content: ''; position: absolute; right: 11px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a4668, #070a12 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .ph-signal { display: flex; align-items: flex-end; gap: 2px; height: 11px; } .ph-signal i { width: 3px; background: currentColor; border-radius: 1px; } .ph-signal i:nth-child(1) { height: 5px; } .ph-signal i:nth-child(2) { height: 8px; } .ph-signal i:nth-child(3) { height: 11px; } .ph-signal b { position: relative; width: 20px; height: 10px; margin-left: 6px; border: 1.5px solid currentColor; border-radius: 2px; box-sizing: border-box; } .ph-signal b::after { content: ''; position: absolute; inset: 1.5px; border-radius: 1px; background: currentColor; } .ph-header { flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 16px 8px; } #cityPhone .ph-header h2 { flex: 1; margin: 0; padding-top: 4px; font: 600 28px/.9 'Teko', sans-serif; letter-spacing: 2px; text-transform: uppercase; } #cityPhone .ph-iconbtn { position: relative; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: 0; } #cityPhone .ph-iconbtn svg { position: relative; z-index: 1; width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(168, 255, 62, .9)); } #cityPhone .ph-iconbtn:hover > .spray-frame, #cityPhone .ph-iconbtn:focus-visible > .spray-frame { filter: drop-shadow(0 0 8px rgba(168, 255, 62, .95)) brightness(1.2); } .ph-screen { flex: 1; min-height: 0; overflow: auto; padding: 6px 16px 16px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(168, 255, 62, .35) transparent; } #cityPhone .ph-screen h3 { margin: 16px 0 8px; font: 500 24px/1 'Teko', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--neon); } .ph-eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); opacity: .75; } #cityPhone .ph-welcome { margin: 2px 0 22px; font: 600 36px/.92 'Teko', sans-serif; letter-spacing: 1px; text-transform: uppercase; } /* ── App tiles: small Hood panels. The glyph stays a crisp stroke, same as the wallet icon. ── */ .ph-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; margin: 0 0 26px; } #cityPhone .ph-apps button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: 12px/1 'Share Tech Mono', monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--text); } .ph-app-icon { position: relative; display: grid; place-items: center; width: 62px; height: 62px; } .ph-app-icon > svg { position: relative; z-index: 1; width: 28px; height: 28px; filter: drop-shadow(0 0 4px rgba(168, 255, 62, .9)); } .ph-app-name { position: relative; z-index: 1; } .ph-apps button:hover > .ph-app-icon > .spray-frame, .ph-apps button:focus-visible > .ph-app-icon > .spray-frame { filter: drop-shadow(0 0 8px rgba(168, 255, 62, .95)) brightness(1.2); } .ph-apps button:focus-visible { outline: none; } .ph-apps button:focus-visible > .ph-app-name { color: var(--neon); } .ph-map-key summary { cursor: pointer; margin: 2px 0 12px; font: 500 22px/1 'Teko', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--neon); } #cityPhone #legend { display: block; position: relative; inset: auto; width: auto; margin: 0 0 6px; padding: 12px 14px 8px; transform: none; font-size: 11px; } #cityPhone #legend > :not(.spray-frame) { position: relative; z-index: 1; } #cityPhone #legend .l-hide, #cityPhone #legend .l-title, #cityPhone #legend .l-tag { display: none; } .ph-home { flex: none; display: flex; justify-content: center; padding: 8px 0 12px; border: 0; background: none; } .ph-home span { width: 128px; height: 5px; border-radius: 5px; background: rgba(244, 241, 234, .8); } .ph-home:hover span { background: #fff; } .ph-footer { position: relative; flex: none; min-height: 44px; display: flex; justify-content: center; align-items: flex-end; } .ph-footer .ph-home { padding: 15px 0 12px; } #cityPhone .ph-info { position: absolute; right: 14px; bottom: 4px; width: 36px; height: 36px; display: grid; place-items: center; padding: 7px; border: 0; background: none; color: var(--neon); cursor: pointer; } .ph-info svg { width: 22px; height: 22px; } .ph-info:focus-visible { outline: 2px solid var(--neon); border-radius: 50%; } #cityPhone .ph-community-link { display: block; margin: 10px 0; line-height: 1.4; text-decoration: none; border: 1px solid var(--neon-soft); } /* ── Cards: the same sprayed panel as the Hood ── */ .ph-card, .ph-panel { position: relative; margin: 12px 0 16px; padding: 12px 14px 14px; } .ph-card > :not(.spray-frame), .ph-panel > :not(.spray-frame) { position: relative; z-index: 1; } .ph-card b { font: 500 22px/1 'Teko', sans-serif; letter-spacing: .5px; color: var(--neon); } .ph-card h3 { margin: 6px 0 2px; } .ph-card p, .ph-copy, .ph-empty { margin: 6px 0; color: var(--text); font-size: 12px; } .ph-empty { padding: 8px 0; } .ph-badge { display: inline-block; margin-top: 8px; padding: 2px 8px 1px; border: 1px solid currentColor; color: var(--neon); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .ph-balance { display: block; font: 600 32px/1 'Teko', sans-serif; color: var(--neon); overflow-wrap: anywhere; } .ph-balance small { font-size: 16px; } .ph-address { overflow-wrap: anywhere; font-size: 10px; opacity: .75; } #cityPhone .ph-primary, #cityPhone .ph-btn { position: relative; display: inline-block; min-height: 40px; padding: 10px 14px 8px; border: 0; font: 14px/1 'Share Tech Mono', monospace; letter-spacing: 1px; text-transform: uppercase; text-align: center; } #cityPhone .ph-primary { display: block; width: 100%; margin: 6px 0; } #cityPhone .ph-primary:hover > .spray-frame, #cityPhone .ph-primary:focus-visible > .spray-frame, #cityPhone .ph-btn:hover > .spray-frame, #cityPhone .ph-btn:focus-visible > .spray-frame { filter: drop-shadow(0 0 8px rgba(168, 255, 62, .95)) brightness(1.2); } .ph-card .ph-btn { display: block; margin-top: 12px; } .ph-actions { display: flex; gap: 10px; } .ph-actions .ph-btn { flex: 1; } .ph-label { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .ph-label select, .ph-label textarea { width: 100%; box-sizing: border-box; padding: 10px; resize: vertical; border-radius: 0; border: 2px solid var(--neon-soft); background: rgba(7, 3, 15, .8); color: var(--text); font: 13px/1.4 'Share Tech Mono', monospace; letter-spacing: 0; text-transform: none; } .ph-label select:focus, .ph-label textarea:focus { border-color: var(--neon); outline: none; } .ph-photo { display: block; width: 100%; margin-top: 14px; box-shadow: 0 0 0 2px var(--neon-soft); } [data-camera-status] { color: var(--neon); font-size: 12px; } /* ── Music fills the screen: levels, mute and Ape Radio stay put; only the songs scroll ── */ .ph-screen:has([data-screen="music"]:not([hidden])) { display: flex; flex-direction: column; overflow: hidden; } #cityPhone [data-screen="music"]:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } #cityPhone [data-screen="music"] [data-music] { flex: 1; min-height: 0; display: flex; flex-direction: column; } #cityPhone #music.docked { position: relative; left: 0; right: auto; top: 0; bottom: auto; margin: 0; flex: 1; min-height: 0; width: 100%; height: auto; padding: 0; gap: 8px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: center; background: none; border: 0; box-shadow: none; } #cityPhone #music::before, #cityPhone #music::after, #cityPhone #music > .spray-frame, #cityPhone .m-menu > .spray-frame { display: none; } #cityPhone #music .m-now { display: flex; min-width: 0; overflow: hidden; } #cityPhone #music .m-next { display: grid; } #cityPhone #music > .m-btn { width: 42px; height: 42px; } #cityPhone #music .m-list, #cityPhone #music .m-close { display: none; } #cityPhone #music.docked > .m-now { align-self: center; } #cityPhone #music .m-menu { grid-column: 1 / -1; align-self: stretch; display: flex; flex-direction: column; position: static; width: auto; height: auto; min-height: 0; max-height: none; padding: 4px 0 0; border: 0; box-shadow: none; background: none; overflow: hidden; } #cityPhone .m-mix { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; flex: none; } #cityPhone .m-mix .m-vol { grid-column: 1; margin: 0; font-size: 11px; } #cityPhone .m-mute { grid-column: 2; grid-row: 1 / span 2; width: auto; min-width: 72px; height: 100%; padding: 0 10px; font: 14px/1 'Share Tech Mono', monospace; letter-spacing: 1px; } #cityPhone .m-radio { flex: none; margin: 10px 0 0; } #cityPhone .m-status { flex: none; } #cityPhone .m-head { flex: none; margin: 12px 0 6px; } #cityPhone .m-tracks { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 5px; } #cityPhone .m-track { padding: 10px; margin-bottom: 5px; } #cityPhone .m-title { font-size: 24px; } /* Music controls use the same sprayed panels as the rest of the phone, not the map player's rough boxes. */ #cityPhone .m-btn, #cityPhone .m-radio, #cityPhone .m-track { position: relative; background: radial-gradient(130% 90% at 15% 0%, rgba(96, 36, 140, .32), transparent 62%), radial-gradient(90% 70% at 100% 100%, rgba(60, 20, 90, .3), transparent 70%), var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: var(--neon); border: 0; } #cityPhone .m-btn::before { display: none; } #cityPhone .m-btn > svg, #cityPhone .m-mute-label, #cityPhone .m-radio > :not(.spray-frame), #cityPhone .m-track > :not(.spray-frame) { position: relative; z-index: 1; } #cityPhone .m-btn > svg, #cityPhone .m-radio svg { filter: drop-shadow(0 0 4px rgba(168, 255, 62, .9)); } #cityPhone .m-btn:not(.m-mute) { width: 42px; height: 42px; } #cityPhone .m-head .m-btn svg { width: 20px; height: 20px; } #cityPhone .m-btn:hover > .spray-frame, #cityPhone .m-btn:focus-visible > .spray-frame, #cityPhone .m-toggle.on > .spray-frame, #cityPhone .m-shuffle.on > .spray-frame, #cityPhone .m-mute.on > .spray-frame, #cityPhone .m-radio:hover > .spray-frame, #cityPhone .m-radio.on > .spray-frame, #cityPhone .m-track:hover > .spray-frame, #cityPhone .m-track.on > .spray-frame { filter: drop-shadow(0 0 8px rgba(168, 255, 62, .95)) brightness(1.2); } body.gw-open #phoneLauncher { z-index: 46; } /* The analyser bars never participate in button sizing or intercept a click. */ .m-radio { position: relative; isolation: isolate; } .m-radio > .m-visualizer, #cityPhone .m-radio > .m-visualizer { position: absolute; inset: 3px; z-index: 0; display: flex; align-items: flex-end; gap: 3px; overflow: hidden; pointer-events: none; opacity: 0; } .m-radio.on > .m-visualizer, #cityPhone .m-radio.on > .m-visualizer { opacity: .38; } .m-visualizer i { flex: 1; height: 100%; background: linear-gradient(to top, var(--neon), #57f6dd); transform: scaleY(.04); transform-origin: bottom; } .m-radio-progress { flex: none; padding: 7px 3px 0; } .m-radio-progress[hidden] { display: none; } .m-seek { display: block; appearance: none; width: 100%; height: 24px; margin: 0; cursor: pointer; background: transparent; accent-color: var(--neon); } .m-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(to right, var(--neon) var(--progress, 0%), #463153 var(--progress, 0%)); } .m-seek::-moz-range-track { height: 4px; border-radius: 3px; background: #463153; } .m-seek::-moz-range-progress { height: 4px; background: var(--neon); } .m-seek::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -3px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px #a8ff3e80; } .m-seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--neon); } .m-seek:focus-visible { outline: 1px solid var(--neon); outline-offset: 2px; } .m-seek:disabled { opacity: .4; cursor: wait; } .m-radio-times { display: flex; justify-content: space-between; font: 10px/1.4 'Share Tech Mono', monospace; color: var(--text); opacity: .8; } /* Building panels and in-game windows sit in the right-hand column. With the phone open they move to its left, so they aren't hidden behind the handset. */ @media (min-width: 701px) { body.phone-open #info { right: calc(18px + min(372px, 100vw - 24px) + 16px); width: min(330px, calc(100vw - min(372px, 100vw - 24px) - 68px)); transition: transform .35s cubic-bezier(.2,.8,.2,1), right .35s cubic-bezier(.2,.8,.2,1); } body.phone-open #gamewin { justify-items: start; padding-left: 20px; box-sizing: border-box; } body.phone-open .gw-panel { width: min(760px, calc(100vw - min(372px, 100vw - 24px) - 56px)); } body.phone-open .gw-panel.is-game { width: min(1500px, calc(100vw - min(372px, 100vw - 24px) - 56px)); } } @media (max-width: 700px) { #phoneLauncher { left: 12px; right: auto; bottom: max(12px, env(safe-area-inset-bottom)); width: 50px; height: 50px; padding: 0; justify-content: center; } #phoneLauncher svg { width: 24px; height: 26px; } #phoneLauncher .ph-l-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.info-open #phoneLauncher { opacity: 0; pointer-events: none; } #cityPhone { left: 0; right: 0; margin: 0 auto; width: min(400px, calc(100vw - 28px)); border-radius: 44px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); height: min(700px, calc(100dvh - max(12px, env(safe-area-inset-bottom)) - 78px)); transform-origin: bottom left; } .ph-display { border-radius: 36px; } .ph-app-icon { width: 56px; height: 56px; } .ph-app-icon > svg { width: 26px; height: 26px; } } @media (max-width: 340px) { .ph-apps { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { #cityPhone { transition: none; } }