/* Duber. Pink is the app's colour and nothing else in the game uses it, so a pink circle on the road and a pink card on the screen read as the same thing without a label. LAYOUT RULE, and the reason every offset below is what it is: the centre of the screen is the road, the bottom-left is the wheel and the radio, the bottom-right is the pedals and the speedo, and the left edge is the street sign and the vibe panel. The only column free at every breakpoint is the RIGHT side under the GPS. The request card and the pickup progress live there and nowhere else. */ :root{--duber:#ff4aa8;--duber-deep:#2b0a1c;--duber-ink:#ffe3f1} /* ---- the driving chip --------------------------------------------------------------------------- Sits in the top bar with the other tools rather than over the road. */ #duber-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:5px 11px 5px 7px; border:1px solid #ff4aa87a;border-radius:9px;background:linear-gradient(135deg,#3a0d24ee,#1a0a14e8); color:var(--duber-ink);font:inherit;cursor:pointer} #duber-chip[hidden]{display:none} /* The chip and the PHONE button open the same panel, so they never both take a slot in the tool bar. Online, the chip stands in for the button and carries the status and the night's takings with it; offline the plain button is back. Keyed on [hidden] — which only the UI sets — and never on a media query, or a breakpoint that hid the chip would leave no way in at all. */ header .tools:has(#duber-chip:not([hidden])) #open-phone{display:none} #duber-chip .duber-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:7px; background:var(--duber);color:#2b0716;font:800 14px/1 "Barlow Condensed",Arial,sans-serif;font-style:normal} #duber-chip span{display:grid;gap:1px;text-align:left} #duber-chip .duber-chip-status{font-size:9px;letter-spacing:.11em;color:#ffb8da} #duber-chip .duber-chip-value{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums} #duber-chip[data-status="ride"]{border-color:#ff4aa8;box-shadow:0 0 0 1px #ff4aa83d,0 0 16px #ff4aa833} #duber-chip[data-status="ride"] .duber-mark{animation:duber-beat 2.4s ease-in-out infinite} @keyframes duber-beat{0%,100%{opacity:1}50%{opacity:.62}} /* ---- the request card ---------------------------------------------------------------------------- Right column, below the GPS. Fixed so it survives any HUD transform. */ /* top:326 is not arbitrary: the GPS ends at 272 and RESET CAR occupies 274-318 on the right edge, so this is the first clear pixel under both. Moving either of those moves this. */ #duber-card{position:fixed;z-index:14;right:max(14px,env(safe-area-inset-right));top:326px; width:min(330px,42vw);padding:0 0 12px;overflow:hidden; border:1px solid #ff4aa87a;border-radius:14px;background:linear-gradient(160deg,#370c22f2,#140a12f2); box-shadow:0 12px 34px #0007,0 0 0 1px #ff4aa826;color:#fff2f8;pointer-events:auto; animation:duber-in .22s ease-out} #duber-card[hidden]{display:none} @keyframes duber-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#duber-card{animation:none} #duber-chip[data-status="ride"] .duber-mark{animation:none}} /* The expiry countdown: a hairline, not a ticking clock. */ #duber-card .duber-timer{height:3px;background:#ffffff14} #duber-card .duber-timer-fill{display:block;height:100%;width:100%;background:var(--duber); transition:width .12s linear} #duber-card[data-urgent="true"] .duber-timer-fill{background:#ffb03a} /* NOT
: the game styles the bare tag as the fixed top bar, which tore this block out of the card and dropped the fare into the tool strip. */ #duber-card .duber-head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 13px 6px} /* Rider and fare share one row. On a short phone the kicker above the name is simply dropped and the row still reads "Antonia — $41", which is how the card loses a whole line without losing a fact. */ #duber-card .duber-who{display:grid;gap:1px;min-width:0} #duber-card .duber-kicker{font-size:9px;letter-spacing:.14em;color:#ff9dcb} #duber-card .duber-rider{font-size:17px;font-weight:700;color:#fff;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} #duber-card .duber-fare{font:800 30px/1 "Barlow Condensed",Arial,sans-serif;letter-spacing:.02em; color:#fff;text-shadow:0 0 18px #ff4aa85c;flex:0 0 auto} /* The one-line summary: only for screens with no room for the per-leg sub-lines. */ #duber-card .duber-meta{display:none;padding:5px 13px 0;font-size:11px;color:#dfaec8; font-variant-numeric:tabular-nums} #duber-card .duber-leg{display:grid;grid-template-columns:14px 1fr;gap:9px;align-items:start; padding:4px 13px} #duber-card .duber-leg strong{display:block;font-size:14px;line-height:1.2;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} #duber-card .duber-leg small{display:block;font-size:11px;color:#d9a8c2;margin-top:1px} #duber-card .duber-dot{width:10px;height:10px;margin-top:4px;border-radius:50%; border:2px solid var(--duber)} #duber-card .duber-dot-pickup{background:var(--duber)} #duber-card .duber-dot-dest{background:transparent;border-radius:2px} #duber-card .duber-reason{margin:7px 13px 0;padding-top:8px;border-top:1px solid #ffffff14; font-size:12px;line-height:1.4;color:#e6bdd2;font-style:italic; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #duber-card .duber-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;padding:11px 13px 0} #duber-card .duber-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:46px;padding:10px;border-radius:9px;font-weight:700;font-size:13px;line-height:1;font-family:inherit;letter-spacing:.04em; cursor:pointer;touch-action:manipulation} #duber-card .duber-decline{border:1px solid #ffffff2e;background:#ffffff0f;color:#edd2df} #duber-card .duber-accept{border:1px solid var(--duber);background:var(--duber);color:#2b0716} #duber-card .duber-key{display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px; border-radius:5px;background:#0000002e;font-size:10px;font-weight:800} #duber-card .duber-accept .duber-key{background:#2b071626;color:#2b0716} /* ---- pickup / drop-off progress ------------------------------------------------------------------ Same column as the card; they are never both on screen (no offers arrive during a ride). */ #duber-progress{position:fixed;z-index:13;right:max(14px,env(safe-area-inset-right));top:326px; width:min(300px,40vw);padding:10px 13px 11px;border:1px solid #ff4aa85c;border-radius:12px; background:linear-gradient(160deg,#2f0a1def,#120910ee);box-shadow:0 10px 26px #0006; color:#ffe9f4;pointer-events:none} #duber-progress[hidden]{display:none} #duber-progress .duber-progress-label{display:block;font-size:9px;letter-spacing:.13em;color:#ff9dcb} #duber-progress .duber-progress-where{display:block;margin-top:2px;font-size:17px;line-height:1.15; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #duber-progress .duber-progress-track{height:5px;margin:8px 0 6px;border-radius:4px; background:#ffffff1a;overflow:hidden} #duber-progress .duber-progress-fill{display:block;height:100%;width:0;border-radius:4px; background:linear-gradient(90deg,#ff4aa8,#ffd0e8);transition:width .08s linear} #duber-progress[data-state="travelling"] .duber-progress-track{display:none} #duber-progress .duber-progress-note{font-size:11px;color:#dfaec8} #duber-progress[data-state="holding"]{border-color:var(--duber);box-shadow:0 0 22px #ff4aa844,0 10px 26px #0006} /* ---- the phone ------------------------------------------------------------------------------------ */ #duber-phone{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px; background:#05070ccc;backdrop-filter:blur(3px)} #duber-phone[hidden]{display:none} .duber-device{width:min(390px,94vw);max-height:min(92vh,760px);display:flex;flex-direction:column; border:1px solid #ff4aa855;border-radius:26px;overflow:hidden; background:linear-gradient(180deg,#1b0a14,#0c070d);box-shadow:0 26px 70px #000a,0 0 0 1px #ffffff0d} .duber-bar{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 11px; background:linear-gradient(180deg,#42102a,#2a0a1b);border-bottom:1px solid #ffffff12} .duber-bar>span{font:800 19px/1 "Barlow Condensed",Arial,sans-serif;letter-spacing:.16em;color:var(--duber)} #duber-close{min-height:40px;padding:8px 12px;border:1px solid #ffffff2b;border-radius:8px; background:#ffffff10;color:#f4d8e6;font-size:11px;font-weight:700;letter-spacing:.07em;cursor:pointer} .duber-screen{padding:16px;overflow-y:auto;display:grid;gap:13px;align-content:start; min-height:0;-webkit-overflow-scrolling:touch} .duber-hero{text-align:center} .duber-eyebrow{font-size:10px;letter-spacing:.17em;color:#ff9dcb} .duber-hero h2{margin:5px 0 3px;font:800 36px/1 "Barlow Condensed",Arial,sans-serif;letter-spacing:.03em;color:#fff} .duber-hero p{margin:0;font-size:13px;color:#c7aebb} #duber-phone[data-status="online"] .duber-hero h2{color:#7fe3a0} #duber-phone[data-status="ride"] .duber-hero h2{color:var(--duber)} .duber-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .duber-stats>div{padding:9px 6px;text-align:center;border:1px solid #ffffff14;border-radius:10px; background:#ffffff08} .duber-stats small{display:block;font-size:9px;letter-spacing:.1em;color:#b294a3} .duber-stats strong{display:block;margin-top:3px;font-size:19px;font-weight:700;color:#fff; font-variant-numeric:tabular-nums} #duber-body{display:grid;gap:9px} .duber-row{display:grid;gap:2px;padding:9px 11px;border:1px solid #ffffff10;border-radius:10px; background:#ffffff07} .duber-row small{font-size:9px;letter-spacing:.12em;color:#ff9dcb} .duber-row span{font-size:13px;line-height:1.45;color:#e9dde4} /* GO ONLINE is the whole point of the screen, so it never scrolls away. The dock sits outside the scrolling area: on a 375 px-tall phone in landscape the body scrolls behind it and the button is still under the thumb. */ .duber-dock{display:grid;gap:8px;padding:11px 16px max(13px,env(safe-area-inset-bottom)); border-top:1px solid #ffffff12;background:#120810f2} #duber-online-note{margin:0;font-size:12px;line-height:1.45;color:#b8a0ae;text-align:center} #duber-toggle{min-height:52px;border:0;border-radius:12px;font-weight:800;font-size:15px;line-height:1;font-family:inherit;letter-spacing:.07em; cursor:pointer;background:var(--duber);color:#2b0716} #duber-toggle[data-mode="off"]{background:#ffffff12;color:#ffc9e2;border:1px solid #ff4aa85c} .duber-secondary{min-height:46px;border:1px solid #ffffff24;border-radius:10px;background:transparent; color:#e2b9cc;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer} .duber-secondary[hidden]{display:none} .duber-lifetime{display:flex;justify-content:center;gap:22px;margin:0;padding-top:4px; border-top:1px solid #ffffff10} .duber-lifetime div{text-align:center} .duber-lifetime dt{font-size:9px;letter-spacing:.11em;color:#9d8592} .duber-lifetime dd{margin:2px 0 0;font-size:14px;color:#dcc6d3;font-variant-numeric:tabular-nums} .duber-pad-help{display:none;font-size:11px;line-height:1.4;color:#9d8592;text-align:center} .controller-active .duber-pad-help{display:block} /* ---- responsive -------------------------------------------------------------------------------- MOBILE IS ITS OWN LAYOUT, not a squeezed desktop one. On a touch phone in landscape the game hides the GPS entirely, parks the vibe panel at TOP RIGHT, centres the speedo and radio along the bottom and gives the driving controls the bottom 178 px edge to edge. So on a 430 px-tall phone the only free rectangle is the right-hand side between the header and the controls — about 180 px of height. Three things follow, and all three are deliberate: - The card takes over the vibe panel's slot rather than stacking under it. The game already does exactly this when a destination is set, so displacing it is the established convention here and not a new one invented for Duber. - The card loses its reason line and tightens to ~165 px so it fits that rectangle whole. Nothing that matters for the decision (who, where from, where to, how far, how much) is dropped. - The buttons stay at 44 px and sit at the top right, where the thumb has to travel UP from the pedal to reach them. That distance is the point: it is why answering a request cannot be a mis-hit of the accelerator. */ /* Narrow or short windows on a mouse machine: the desktop column simply moves up under the GPS. */ @media(max-width:1000px) and (min-height:521px),(min-width:1001px) and (max-height:600px) and (min-height:521px){ #duber-card{top:158px;width:min(292px,62vw)} #duber-progress{top:158px;width:min(272px,60vw)} #duber-card .duber-fare{font-size:26px} #duber-card .duber-leg strong{font-size:13px} /* RESET CAR lives at top:274 on the right; a card above it must not sit on top of it. */ .is-driving:has(#duber-card:not([hidden])) #hud #recover, .is-driving:has(#duber-progress:not([hidden])) #hud #recover{display:none} } @media(max-height:560px) and (min-height:521px){ #duber-card .duber-reason{display:none} #duber-card,#duber-progress{top:150px} } @media(max-width:620px) and (min-height:521px){ #duber-card{width:min(258px,68vw)} #duber-progress{width:min(240px,66vw)} #duber-card .duber-actions{grid-template-columns:1fr 1fr} } /* THE RIBBON: the request on a short landscape screen. On a landscape phone both thumbs are committed — the wheel owns the bottom-left 158 px, the pedals the bottom-right — and a corner card competes with the pedal cluster for the same quadrant. Trimming it only postpones the fight: at 568x320 it was covering the handbrake and the gear button outright. The fix is not a smaller card, it is a different shape and a different place. The one region no control touches on any landscape screen is the strip between the header and the crown of the steering wheel. So the request becomes a slim ribbon there: $41 Fairhaven Village Green [X] [ACCEPT] Antonia · 640 m away · 2.4 km · 4 min What is on it is what the decision actually turns on, in that order: the money, where the trip ends, then who and how far in small type. The PICKUP's name is the one thing left off — you are about to be navigated there by a pink circle and a route line, so its name buys nothing at the moment of choosing, and dropping it is what takes the ribbon from three rows to two. It is sized to its contents rather than to the window, so it clears the street sign on the left instead of hiding it, and it is short enough that a 320 px-tall screen still has 30 px of sky between it and the wheel. ACCEPT sits top right, where the thumb's path up from the accelerator passes nothing else; an overshoot hits empty screen. Declining is free and another request is along shortly, so it is a quiet X rather than a button of equal weight. */ @media(orientation:landscape) and (max-height:520px){ .is-driving #duber-card{ top:calc(52px + env(safe-area-inset-top));left:auto;right:var(--drive-edge); width:min(424px,80vw);max-width:none;border-radius:13px;padding:0 0 7px; display:grid;gap:0 9px;align-items:center; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-rows:3px auto auto; grid-template-areas:"timer timer timer timer" "fare dest decline accept" "fare meta decline accept"} .is-driving #duber-card .duber-timer{grid-area:timer} /* The head is dissolved: the fare becomes its own column, the rider drops into the small line. */ .is-driving #duber-card .duber-head{display:contents} .is-driving #duber-card .duber-who{display:none} .is-driving #duber-card .duber-fare{grid-area:fare;font-size:25px;line-height:1;padding-left:11px} .is-driving #duber-card .duber-legs{display:contents} .is-driving #duber-card .duber-leg:first-child{display:none} .is-driving #duber-card .duber-leg{grid-area:dest;display:block;padding:5px 0 0} .is-driving #duber-card .duber-leg .duber-dot{display:none} .is-driving #duber-card .duber-leg strong{font-size:14px;line-height:1.15} .is-driving #duber-card .duber-leg :is(.duber-pickup-sub,.duber-dest-sub){display:none} /* One line, always: a wrap here adds a whole row to the ribbon and pushes it toward the wheel. */ .is-driving #duber-card .duber-meta{grid-area:meta;display:block;padding:1px 0 5px; font-size:10.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .is-driving #duber-card .duber-reason{display:none} .is-driving #duber-card .duber-actions{display:contents} .is-driving #duber-card .duber-decline{grid-area:decline;width:40px;min-height:40px;padding:0; font-size:0;border-radius:9px} .is-driving #duber-card .duber-decline::before{content:"✕";font-size:16px;line-height:1;color:#e7c6d8} .is-driving #duber-card .duber-decline .duber-key{display:none} /* Every pixel this gives back goes to the place name, which is the thing that gets truncated. */ .is-driving #duber-card .duber-accept{grid-area:accept;min-width:84px;min-height:44px;font-size:12px; margin-right:10px;gap:5px;padding:9px 7px} .is-driving #duber-card .duber-accept .duber-key{min-width:16px;height:16px;font-size:9px;padding:0 3px} .is-driving:not(.vibe-focus):has(#duber-card:not([hidden])) #vibe-hud, .is-driving:not(.vibe-focus):has(#duber-progress:not([hidden])) #vibe-hud{display:none!important} .is-driving:has(#duber-card:not([hidden])) #hud #recover, .is-driving:has(#duber-progress:not([hidden])) #hud #recover{display:none} /* A ride lasts minutes, not seconds, so its strip is smaller still and carries no buttons at all. */ .is-driving #duber-progress{ top:calc(52px + env(safe-area-inset-top));right:var(--drive-edge);left:auto; width:min(310px,56vw);padding:7px 11px 8px; display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:center} .is-driving #duber-progress .duber-progress-label{grid-column:1;font-size:8px} .is-driving #duber-progress .duber-progress-where{grid-column:1;font-size:14px;margin-top:1px} .is-driving #duber-progress .duber-progress-note{grid-column:2;grid-row:1/3;text-align:right; font-size:10.5px;white-space:nowrap} .is-driving #duber-progress .duber-progress-track{grid-column:1/-1;margin:4px 0 0;height:4px} } /* A short window on a MOUSE keeps the GPS at top right; there, and only there, the panels stop short of it. A touch phone hides the GPS, so the ribbon uses the full corner. */ @media(orientation:landscape) and (max-height:520px) and (pointer:fine){ .is-driving #duber-card,.is-driving #duber-progress{right:calc(var(--drive-edge) + 104px)} } /* Shortest landscape screens: only the type steps down — the shape is already right. */ @media(orientation:landscape) and (max-height:400px){ .is-driving :is(#duber-card,#duber-progress){top:calc(46px + env(safe-area-inset-top))} .is-driving #duber-card{width:min(392px,82vw)} .is-driving #duber-card .duber-fare{font-size:22px} .is-driving #duber-card .duber-leg strong{font-size:13px} .is-driving #duber-card .duber-meta{font-size:10px} .is-driving #duber-card .duber-accept{min-width:78px} } /* A touch device tall enough for the corner card (a tablet held in landscape) hides the GPS, so the column has no reason to start below where the GPS would have been. */ @media(pointer:coarse) and (min-height:521px){ .is-driving:not(.controller-active) :is(#duber-card,#duber-progress){top:116px} .is-driving:not(.vibe-focus):has(#duber-card:not([hidden])) #vibe-hud, .is-driving:not(.vibe-focus):has(#duber-progress:not([hidden])) #vibe-hud{display:none!important} } /* THE PHONE ON A SMALL PHONE. A tall portrait card is the wrong shape for a 375 px-tall screen held sideways: the thing you came here to press ends up below the fold. Two changes fix it, and the second is why the panel still explains itself rather than becoming a stub. 1. GO ONLINE never scrolls. The dock is a sibling of the scrolling area, not inside it. 2. The status collapses from a three-line hero into one line, the stats lose their padding, and the lifetime totals and the controller footnote — the two things you are not in the panel to read — step out. Nothing about the current request or ride is dropped at any size. */ @media(max-height:560px){ .duber-device{max-height:calc(100vh - 16px);width:min(440px,94vw);border-radius:18px} #duber-phone{padding:8px} .duber-screen{padding:11px 13px;gap:8px} .duber-hero h2{font-size:26px} .duber-hero p{font-size:12px} .duber-stats>div{padding:6px 4px} .duber-stats strong{font-size:16px} .duber-row{padding:7px 9px} .duber-row span{font-size:12px;line-height:1.35} #duber-toggle{min-height:46px;font-size:14px} .duber-bar{padding:9px 13px 8px} .duber-bar>span{font-size:17px} #duber-close{min-height:40px;padding:7px 11px} .duber-dock{padding:8px 13px max(10px,env(safe-area-inset-bottom));gap:6px} #duber-online-note{font-size:11px;line-height:1.3} } /* Genuinely small: a phone in landscape. The hero becomes a single row. */ @media(max-height:460px){ .duber-device{width:min(470px,96vw)} .duber-screen{padding:9px 12px;gap:7px} .duber-hero{display:flex;align-items:baseline;justify-content:center;gap:9px;flex-wrap:wrap} .duber-eyebrow{display:none} .duber-hero h2{font-size:22px;margin:0} .duber-hero p{font-size:11px} .duber-stats>div{padding:5px 3px} .duber-stats small{font-size:8px} .duber-stats strong{font-size:15px} .duber-row{padding:6px 9px} .duber-row small{font-size:8px} .duber-row span{font-size:11.5px;line-height:1.3} .duber-lifetime,.duber-pad-help{display:none} #duber-toggle{min-height:44px;font-size:13px} .duber-secondary{min-height:40px;font-size:11px} #duber-online-note{font-size:10px} } /* Shortest landscape phones (SE-class, ~320 px): the note goes too — the button says what it does. */ @media(max-height:360px){ #duber-phone{padding:5px} .duber-device{max-height:calc(100vh - 10px);border-radius:14px} .duber-bar{padding:6px 11px 5px} .duber-bar>span{font-size:15px} .duber-screen{padding:8px 11px;gap:6px} .duber-hero h2{font-size:19px} #duber-online-note{display:none} .duber-dock{padding:7px 11px max(8px,env(safe-area-inset-bottom))} } /* Hiding the controls hides the HUD; the request card is gameplay, so it stays. */ .is-driving.driving-controls-hidden #duber-chip{display:none!important} /* `is-driving` is off in the menu, in the map, behind the phone and whenever the orientation gate is up. The card and the progress panel are driving furniture and belong to none of those; without this they float over a portrait phone's rotate-me screen. */ html:not(.is-driving) :is(#duber-card,#duber-progress){display:none!important} /* ---- the phone's two apps ---------------------------------------------------------------------- */ .phone-apps{display:flex;gap:4px;margin-right:auto;margin-left:2px} .phone-apps button{min-height:34px;padding:7px 11px;border:1px solid transparent;border-radius:8px; background:transparent;color:#c39ab0;font-weight:800;font-size:12px;line-height:1;font-family:inherit;letter-spacing:.11em;cursor:pointer} .phone-apps button[aria-selected="true"]{background:#ffffff14;border-color:#ffffff29;color:#fff} #duber-phone[data-app="bluefin"] .duber-bar{background:linear-gradient(180deg,#0e3350,#0a2033)} #duber-phone[data-app="bluefin"] .duber-device{border-color:#3b8fd455} #duber-phone[data-app="bluefin"] .phone-apps button[aria-selected="true"]{color:#8fd3ff} /* ---- BlueFin ------------------------------------------------------------------------------------ */ .bluefin-screen{padding:16px;overflow-y:auto;display:grid;gap:12px;align-content:start;min-height:0} .bluefin-screen[hidden]{display:none} .bf-hero{text-align:center} .bf-hero .duber-eyebrow{color:#7cc6f5} .bf-hero h2{margin:5px 0 3px;font:800 32px/1 "Barlow Condensed",Arial,sans-serif;letter-spacing:.03em;color:#fff} .bf-hero p{margin:0;font-size:12px;color:#9db3c2} .bluefin-screen .duber-stats>div{border-color:#5aa9dd26;background:#5aa9dd0f} .bluefin-screen .duber-stats small{color:#8fb0c6} .bf-card{border:1px solid #5aa9dd33;border-radius:12px;background:#0d1e2bb8;overflow:hidden} .bf-card.owned{border-color:#7fe3a0aa;box-shadow:0 0 0 1px #7fe3a022} /* A drawn thumbnail rather than a photograph: the house, the bluff and the bay in four blocks. */ .bf-shot{position:relative;height:84px;overflow:hidden} .bf-shot i{position:absolute;display:block} .bf-sky{inset:0;background:linear-gradient(#173d5c,#3f7ea8 62%,#79b2cf)} .bf-water{left:0;right:0;bottom:0;height:34px;background:linear-gradient(#5f9fc4,#2c6484)} .bf-house{left:16%;bottom:22px;width:46%;height:30px;background:#b3aea4;border-radius:2px; box-shadow:0 2px 0 #8d8a84} .bf-roof{left:11%;bottom:50px;width:56%;height:9px;background:#4a4e52;transform:skewY(-4deg);border-radius:2px} .bf-head{display:flex;align-items:baseline;justify-content:space-between;gap:9px;padding:10px 12px 2px} .bf-head strong{font-size:15px;color:#fff} .bf-price{font:800 20px/1 "Barlow Condensed",Arial,sans-serif;color:#8fd3ff} .bf-card.owned .bf-price{color:#7fe3a0;font-size:15px;letter-spacing:.08em} .bf-where{display:block;padding:0 12px;font-size:11px;color:#8fa8b9} .bf-specs{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:9px 0 0;padding:0 12px} .bf-specs li{padding:3px 8px;border:1px solid #ffffff1f;border-radius:20px;font-size:10.5px;color:#cfe0ea} .bf-blurb{margin:9px 12px 0;font-size:12px;line-height:1.5;color:#c3d3dd} .bf-high{margin:9px 0 12px;padding:0 12px 0 28px;font-size:11.5px;line-height:1.7;color:#9fbccd} #bf-note{margin:0;font-size:12px;line-height:1.45;color:#93aec0;text-align:center} #bf-buy{min-height:52px;border:0;border-radius:12px;font-weight:800;font-size:15px;line-height:1;font-family:inherit;letter-spacing:.07em; cursor:pointer;background:#3fa9f5;color:#03121d} #bf-buy:disabled{background:#ffffff14;color:#8fa8b9;cursor:default} #bf-buy[hidden],#bf-enter[hidden]{display:none} #bf-enter{border-color:#7fe3a066;color:#bff3d2} #bf-enter:disabled{opacity:.45;cursor:default} /* ---- on foot ------------------------------------------------------------------------------------ */ #walk-hud{position:fixed;z-index:14;left:var(--drive-edge);top:calc(70px + env(safe-area-inset-top)); display:flex;align-items:center;gap:12px;padding:9px 11px;border:1px solid #ffffff26;border-radius:12px; background:#0a121cb0;-webkit-backdrop-filter:blur(13px) saturate(1.3);backdrop-filter:blur(13px) saturate(1.3); box-shadow:inset 0 1px 0 #ffffff33,0 8px 22px #00000059;color:#f2f5f8;pointer-events:auto} #walk-hud[hidden]{display:none} .walk-place{display:grid;gap:1px} .walk-place small{font-size:9px;letter-spacing:.13em;color:#9fb4c4} .walk-place strong{font:700 17px/1.1 "Barlow Condensed",Arial,sans-serif;letter-spacing:.06em} #walk-exit{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 13px; border:1px solid #ffffff2e;border-radius:9px;background:#ffffff12;color:#eef4f8; font-weight:700;font-size:12px;line-height:1;font-family:inherit;letter-spacing:.07em;cursor:pointer} .walk-key{display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:5px; background:#0000002e;font-size:10px;font-weight:800} #walk-help{position:fixed;z-index:12;left:50%;bottom:22px;transform:translateX(-50%);margin:0; padding:7px 13px;border-radius:20px;background:#0a121c9e;color:#c6d4de;font-size:11.5px; letter-spacing:.03em;pointer-events:none} #walk-help[hidden]{display:none} #walk-help b{color:#fff} /* The thumb stick: bottom-left, where the steering wheel was, so the hand does not have to move. */ #walk-stick{position:fixed;z-index:14;left:calc(var(--drive-edge) + 6px); bottom:max(26px,env(safe-area-inset-bottom));width:116px;height:116px;border-radius:50%; border:1px solid #ffffff2b;background:#0a121c7a; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:none} #walk-stick[hidden]{display:none} #walk-stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px; border-radius:50%;background:#e8eef4cc;box-shadow:0 2px 10px #0006} /* Indoors the driving furniture has nothing to say. */ .is-afoot :is(.controls,.speed,.map,#recover,#destination-hud,#destination-beacon,#vibe-hud, #navigation,#duber-card,#duber-progress,.keyboard,#bike-balance,.combo){display:none!important} @media(orientation:landscape) and (max-height:520px){ #walk-hud{top:calc(52px + env(safe-area-inset-top));padding:7px 10px;gap:9px} .walk-place strong{font-size:15px} #walk-stick{width:104px;height:104px;bottom:max(16px,env(safe-area-inset-bottom))} } /* ---- the phone's home screen --------------------------------------------------------------------- The phone opens here, not inside an app, because that is what a phone does — and because the close button and the app icons then all mean one unambiguous thing. */ #phone-title{font:800 19px/1 "Barlow Condensed",Arial,sans-serif;letter-spacing:.16em;color:var(--duber); margin-right:auto;margin-left:2px} #duber-phone[data-app="bluefin"] #phone-title{color:#8fd3ff} #duber-phone[data-app="wallet"] #phone-title,#duber-phone[data-app="home"] #phone-title{color:#e6dfe3} #phone-back{min-height:34px;padding:7px 10px;margin-right:9px;border:1px solid #ffffff2b;border-radius:8px; background:#ffffff10;color:#f4d8e6;font-weight:700;font-size:11px;line-height:1;font-family:inherit;letter-spacing:.09em;cursor:pointer} #phone-back[hidden]{display:none} .phone-home{padding:16px;display:grid;gap:14px;align-content:start;overflow-y:auto;min-height:0} .phone-home[hidden]{display:none} .home-top{display:flex;align-items:baseline;justify-content:space-between; padding-bottom:10px;border-bottom:1px solid #ffffff14} #home-carrier{font-size:10px;letter-spacing:.14em;color:#9b8794} #home-cash{font:800 22px/1 "Barlow Condensed",Arial,sans-serif;color:#fff} .home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px} .home-app{display:grid;justify-items:center;gap:6px;padding:4px 2px 8px;border:0;background:none; color:#e8dde4;font:inherit;cursor:pointer;position:relative} .app-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:16px; font:800 26px/1 "Barlow Condensed",Arial,sans-serif;font-style:normal;color:#160810; box-shadow:inset 0 1px 0 #ffffff5c,0 6px 14px #00000052} .home-app span{font-size:11.5px;letter-spacing:.03em;color:#d9cad3} .home-app em{font-weight:700;font-size:8.5px;line-height:1;font-family:inherit;letter-spacing:.1em;font-style:normal;color:#9b8794;min-height:9px} .home-app em[data-tone="on"]{color:#7fe3a0} .home-app em[data-tone="live"]{color:var(--duber)} .home-app em[data-tone="own"]{color:#8fd3ff} .home-app:active .app-icon{transform:translateY(1px)} .app-duber{background:linear-gradient(160deg,#ff77c0,#e0187f)} .app-bluefin{background:linear-gradient(160deg,#7fd2ff,#1f7fc4);font-size:23px} .app-wallet{background:linear-gradient(160deg,#9ff0b6,#31a763)} .app-radio{background:linear-gradient(160deg,#ffd27f,#e08a1f)} .app-map{background:linear-gradient(160deg,#c3b6ff,#6d55d8);font-size:23px} .home-hint{margin:0;font-size:11.5px;line-height:1.45;color:#a08d9a;text-align:center} .wallet-screen{padding:16px;display:grid;gap:12px;align-content:start;overflow-y:auto;min-height:0} .wallet-screen[hidden]{display:none} .wallet-hero{text-align:center} .wallet-hero .duber-eyebrow{color:#7fe3a0} .wallet-hero h2{margin:5px 0 3px;font:800 38px/1 "Barlow Condensed",Arial,sans-serif;color:#fff} .wallet-hero p{margin:0;font-size:12px;color:#a49aa0} #wallet-rows{margin:0;display:grid;gap:7px} #wallet-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:9px 11px;border:1px solid #ffffff12;border-radius:10px;background:#ffffff07} #wallet-rows dt{font-size:9px;letter-spacing:.12em;color:#9b8794} #wallet-rows dd{margin:0;font-size:13px;color:#eadfe6;font-variant-numeric:tabular-nums} @media(max-height:460px){ .app-icon{width:46px;height:46px;border-radius:13px;font-size:21px} .home-grid{gap:8px} .home-app span{font-size:10.5px} .phone-home,.wallet-screen{padding:10px 12px;gap:9px} .wallet-hero h2{font-size:28px} #wallet-rows>div{padding:6px 9px} }