/* ON THE EDGE: CURVE CAMERA. The paperwork of a deadpan traffic authority over a dusk canyon. */ @font-face { font-family: "Big Shoulders"; font-weight: 900; font-display: swap; src: url(/src/fonts/big-shoulders-900.woff2) format("woff2"); } @font-face { font-family: "Big Shoulders"; font-weight: 700; font-display: swap; src: url(/src/fonts/big-shoulders-700.woff2) format("woff2"); } @font-face { font-family: "Doto"; font-weight: 800; font-display: swap; src: url(/src/fonts/doto-800.woff2) format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url(/src/fonts/barlow-sc-500.woff2) format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(/src/fonts/barlow-sc-700.woff2) format("woff2"); } :root { --paper: #F1EBDC; --ink: #1F2330; --stamp: #D7263D; --signal: #FFB000; --dusk: #23284F; --ember: #EF6A3A; --rock: #8E3F2B; --pink: #F4CBD0; --big: "Big Shoulders", Impact, "Arial Narrow", system-ui, sans-serif; --dot: "Doto", "Courier New", system-ui, monospace; --lab: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif; --top: env(safe-area-inset-top, 0px); --bottom: env(safe-area-inset-bottom, 0px); --left: env(safe-area-inset-left, 0px); --right: env(safe-area-inset-right, 0px); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--dusk); color: var(--paper); overflow: hidden; font-family: var(--lab); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; overscroll-behavior: none; touch-action: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; touch-action: manipulation; } #stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } #streaks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } #play { position: fixed; inset: 0; z-index: 1; touch-action: none; } /* the thumbs' layer: never a scroll, even where the page may scroll (iPhone) */ /* the live screen: one number, one sentence */ #hud { position: fixed; top: calc(var(--top) + 10px); left: 0; right: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s; } #hud.on { opacity: 1; } .brand { position: absolute; left: calc(var(--left) + 12px); top: 0; background: var(--paper); color: var(--ink); padding: 4px 8px 5px; transform: rotate(-2deg); box-shadow: 0 2px 0 #0004; line-height: 1; } .brand b { display: block; font: 900 17px/1 var(--big); letter-spacing: .04em; color: var(--stamp); } .brand span { font: 700 12px/1.2 var(--lab); letter-spacing: .14em; } /* top right: the studio's logo (main menu only, KC OG-811 to OG-814) and RECORD, side by side whatever RECORD says */ #corner { position: absolute; right: calc(var(--right) + 12px); top: 0; display: flex; gap: 8px; align-items: flex-start; pointer-events: none; } #studioBtn { display: flex; align-items: center; height: 44px; box-sizing: border-box; padding: 0 8px; background: #FEF8EC; box-shadow: 0 2px 0 #0004; pointer-events: auto; } #studioBtn img { display: block; height: 32px; width: auto; } body:not(.at-start) #studioBtn, body.in-run #studioBtn, body.racing #studioBtn, body.paper-up #studioBtn { display: none; } #recordBtn { pointer-events: auto; background: var(--paper); color: var(--ink); font: 700 13px/1 var(--lab); letter-spacing: .08em; padding: 10px 12px; min-height: 44px; min-width: 44px; box-shadow: 0 2px 0 #0004; } .gauge { text-align: center; margin-top: 50px; line-height: .9; } #speed { font: 900 88px/0.9 var(--big); color: var(--paper); text-shadow: 0 3px 0 var(--ink), 0 0 24px #0008; transition: color .15s; } #speed.over { color: #ff5a6a; } .gauge small { display: block; font: 900 16px var(--big); letter-spacing: .2em; margin-top: 2px; text-shadow: 0 2px 0 var(--ink); } #limit { display: inline-block; margin-top: 8px; background: var(--signal); color: var(--ink); font: 900 18px/1 var(--big); letter-spacing: .06em; padding: 5px 10px 4px; } /* the ladder (OG-362): today's best clean speed and the one to try, under the speed the right thumb drives */ #ladder { display: none; margin: 8px auto 0; width: max-content; max-width: 90vw; background: #1F2330cc; color: var(--paper); padding: 5px 10px 3px; font: 900 17px/1 var(--big); letter-spacing: .14em; } #ladder.on { display: block; } #ladder.past { background: var(--signal); color: var(--ink); } /* the teaching strip: where to aim (the TRY mark), for a new player who keeps staying under the limit */ #teach { display: none; position: relative; width: min(64vw, 260px); height: 10px; margin: 14px auto 36px; background: #1F2330b3; box-shadow: 0 0 0 2px var(--ink); } #teach.on { display: block; } #teachFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--paper); } #teachLim, #teachFly { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; } #teachLim { background: var(--signal); } #teachFly { background: var(--stamp); } #teachFly b { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font: 900 16px/1 var(--big); letter-spacing: .12em; color: var(--stamp); background: var(--paper); padding: 3px 4px 2px 6px; } #teachFly.past b { background: var(--stamp); color: var(--paper); } #curveName { text-align: center; margin-top: 6px; font: 700 12px var(--lab); letter-spacing: .2em; text-shadow: 0 1px 0 var(--ink); opacity: .9; } /* On the Edge Drift: CURVE | DRIFT, once it's open; on the start screen they sit under the curve's name */ .row.modes { gap: 0; } .modes[hidden] { display: none; } .modes button { flex: 1; min-height: 44px; position: relative; background: #1F2330d9; color: var(--paper); font: 900 19px/1 var(--big); letter-spacing: .16em; padding: 8px 6px 6px; box-shadow: inset 0 0 0 2px var(--paper); } .modes button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } .modes button[data-ed="drift"][aria-pressed="true"] { background: var(--ember); color: var(--ink); } .modes i { display: none; position: absolute; right: -6px; top: -9px; font: 900 12px/1 var(--big); letter-spacing: .1em; font-style: normal; background: var(--stamp); color: var(--paper); padding: 3px 5px 2px; transform: rotate(6deg); } body.drift-new .modes [data-ed="drift"] i, body.road-new .modes [data-ed="road"] i { display: block; } .modes button[data-ed="road"][aria-pressed="true"] { background: var(--signal); color: var(--ink); } /* MOUNTAIN RUN (KC, CG-077/078/079): its own name under the brand, SLIDE under the left thumb, and three tabs that fit a narrow phone */ .brand .mountTag, body.mount-on .brand .camTag { display: none; } body.mount-on .brand .mountTag { display: inline; } body.mount-on .steerTag { display: none; } body.mount-on .slideTag { display: inline; } .modes button { font-size: clamp(15px, 4.6vw, 19px); letter-spacing: clamp(.06em, 1vw, .16em); } .modes button[data-ed="rmount"][aria-pressed="true"] { background: var(--amber, #FFB000); color: var(--ink); } /* ▲ UP / ▼ DOWN (CG-086): the same mountain either way, a small switch under the tabs while MOUNTAIN is picked */ .row.updown { gap: 0; margin-top: 4px; display: none; } body.mount-on .row.updown:not([hidden]) { display: flex; } /* STEEP · FAST (KC, OG-758): the day's mountains, a row under the tabs while MOUNTAIN is picked; UP / DOWN under it on STEEP */ .row.kinds { gap: 0; margin-top: 4px; display: none; } body.mount-on .row.kinds:not([hidden]) { display: flex; } .kinds button { flex: 1; min-height: 44px; background: #1F2330d9; color: var(--paper); font: 900 16px/1 var(--big); letter-spacing: .14em; padding: 7px 6px 5px; box-shadow: inset 0 0 0 2px var(--amber, #FFB000); } .kinds button[aria-pressed="true"] { background: var(--amber, #FFB000); color: var(--ink); } /* three mountains in the row (THE EDGE, OG-793): a little tighter, so THE EDGE fits at 360 wide */ .kinds button { font-size: clamp(13px, 3.9vw, 16px); letter-spacing: .08em; padding: 7px 3px 5px; white-space: nowrap; } /* The mountain's speed sits off the road (KC's list, 13 Oct 2026, OG-712): seen from above the road runs up the middle of the screen, and the big number in the middle covered the hairpin coming at you (and a friend's ghost up the road). Here the one number that matters is the time, so the line with the hairpin and the clock moves up into the number's place, and the speed is a small tag under the game's name, top left. The mountain's name shows on the start line only. */ body.mount-on #speed { position: absolute; left: 14px; top: 100px; font-size: 40px; line-height: 1; } body.mount-on .gauge > small { position: absolute; left: 15px; top: 140px; margin: 0; font-size: 12px; letter-spacing: .16em; } body.mount-on.in-run #curveName { visibility: hidden; } /* on the start line the tabs (CURVE DRIFT MOUNTAIN, UP DOWN) take that place, and the speed has nothing to say yet */ body.mount-on.at-start #speed, body.mount-on.at-start .gauge > small { visibility: hidden; } .updown button { flex: 1; min-height: 44px; background: #1F2330d9; color: var(--paper); font: 900 16px/1 var(--big); letter-spacing: .14em; padding: 7px 6px 5px; box-shadow: inset 0 0 0 2px var(--paper); } .boards button[data-board] { min-width: 44px; } .updown button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } /* THE ROAD (OG-383): the rules at a glance under the speed, the one coming up lit; the camera's verdict as you pass it */ #roadHud { display: none; margin: 8px auto 0; gap: 4px; justify-content: center; } body.road-on #roadHud { display: flex; } body.road-on #limit, body.road-on #ladder, body.road-on #teach { display: none !important; } #roadHud b { font: 900 17px/1 var(--big); letter-spacing: .04em; padding: 5px 8px 4px; background: #1F2330cc; color: var(--paper); white-space: nowrap; } #roadHud b.now { background: var(--signal); color: var(--ink); } /* physics 10's animal crossing (OG-1097): its warning under the clock, counting down; hit, its word */ #crossChip { display: none; margin: 6px auto 0; width: max-content; max-width: 90vw; font: 900 18px/1 var(--big); letter-spacing: .05em; padding: 6px 10px 5px; background: var(--signal); color: var(--ink); } body.road-on #crossChip.on { display: block; } #crossChip.hit { background: #1F2330e6; color: var(--paper); } #roadHud b.ok { background: var(--paper); color: var(--ink); } /* the long road's window on the speedo (CG-059): the curve ahead's window in amber, as its sign and the HUD say it; the speed you have over it in paper; the tick is where the right thumb has set the speed. The number turns amber inside the window and red outside it. */ #window { display: none; position: relative; width: min(64vw, 260px); height: 8px; margin: 12px auto 4px; background: #1F2330b3; box-shadow: 0 0 0 2px var(--ink); } body.long-on #window.on { display: block; } #winBand { position: absolute; top: -5px; bottom: -5px; background: var(--signal); box-shadow: 0 0 0 2px var(--ink); } #winFill { position: absolute; left: 0; top: 1px; bottom: 1px; width: 0; background: var(--paper); } #winSet { position: absolute; top: -9px; bottom: -9px; width: 4px; margin-left: -2px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink); } #speed.inwin { color: var(--signal); } #roadHud b.split { color: var(--paper); font-variant-numeric: tabular-nums; } #roadHud b.medal { background: var(--paper); color: var(--ink); } #roadHud b.clean { background: #3FD07A; color: var(--ink); } /* physics 7's CLEAN EXIT, a second after one */ #roadHud b.saved { background: #FFB000; color: var(--ink); } /* SAVED!, a near miss brought back (OG-989) */ #roadHud b.split.ahead { background: #178a4a; } #roadHud b.split.behind { background: var(--stamp); } #roadHud b.slow { background: #1F2330; color: var(--paper); text-decoration: line-through; } #roadHud b.fast, #roadHud b.off { background: var(--stamp); color: var(--paper); } /* the long road (OG-390/391): the curve you're on, its window or drift rule, and your strikes */ #roadHud b.strikes { color: var(--stamp); background: var(--paper); letter-spacing: .14em; } body.long-on #roadHud { flex-wrap: wrap; max-width: calc(100vw - 16px); } @media (max-width: 420px) { body.long-on #roadHud b { font-size: 16px; padding: 4px 5px 3px; letter-spacing: 0; } } /* CURVE and DRIFT (KC, 21 Oct 2026, OG-1206: "keep [the speed] ... the number of the curve we can put that at the top left below"): the big speed and its window stay in the middle, over the road; the curve's line stands in a column at the top left under the sign, the road's name over it, so the middle of the screen shows the road coming */ body.long-on:not(.mount-on) #roadHud { position: absolute; left: calc(var(--left) + 12px); top: 64px; margin: 0; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; max-width: none; } body.long-on:not(.mount-on) #roadHud b { font-size: 13px; padding: 4px 6px 3px; letter-spacing: .02em; } body.long-on:not(.mount-on) #curveName { position: absolute; left: calc(var(--left) + 14px); top: 46px; margin: 0; text-align: left; font-size: 10px; letter-spacing: .14em; white-space: nowrap; } #verdict small { display: block; font-size: 30px; letter-spacing: .08em; margin-top: 6px; } #verdict.miss { background: var(--ink); color: var(--paper); } #verdict.ok small { display: none; } #verdict { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.8); z-index: 4; pointer-events: none; opacity: 0; font: 900 64px/1 var(--big); letter-spacing: .06em; padding: 10px 22px 6px; transition: opacity .18s, transform .18s; white-space: nowrap; } #verdict.on { opacity: 1; transform: translate(-50%, -50%) scale(1); } #verdict.ok { color: var(--signal); text-shadow: 0 3px 0 var(--ink); font-size: 88px; } #verdict.slow { background: var(--ink); color: var(--paper); } #verdict.fast { color: var(--paper); background: var(--stamp); transform: translate(-50%, -50%) rotate(-6deg) scale(.8); } #verdict.fast.on { transform: translate(-50%, -50%) rotate(-6deg) scale(1); } button.try { flex: 1; min-height: 48px; background: var(--signal); color: var(--ink); font: 900 20px/1 var(--big); letter-spacing: .08em; border: 0; border-radius: 3px; } button.try small { display: block; font: 700 12px var(--lab); letter-spacing: .1em; margin-top: 3px; } button.try[hidden] { display: none; } /* names and today's boards (OG-386) */ .row.me { gap: 8px; } button.rank, button.who { min-height: 44px; border: 0; border-radius: 3px; font: 900 18px/1 var(--big); letter-spacing: .08em; padding: 6px 12px; } button.rank { flex: 0 0 auto; background: var(--signal); color: var(--ink); } button.who { flex: 1; background: #1F2330d9; color: var(--paper); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; } button.who::after { content: " ✎"; opacity: .7; } .driver button.who { flex: none; display: inline-block; background: transparent; color: var(--ink); padding: 0 4px; min-height: 44px; } .driver button.who b { font: 800 22px var(--dot); letter-spacing: 0; margin: 0; } button.report { min-height: 44px; background: transparent; color: var(--paper); border: 1px solid #F1EBDC66; border-radius: 3px; font: 700 12px var(--lab); letter-spacing: .12em; padding: 4px 10px; } button.report[hidden] { display: none; } #nameSheet input { width: 100%; box-sizing: border-box; min-height: 52px; font: 900 28px/1 var(--big); letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 3px; background: #fff; color: var(--ink); user-select: text; -webkit-user-select: text; } #nameSave { background: var(--ink); color: var(--paper); } #nameSheet .err { color: var(--stamp); font: 900 16px var(--big); letter-spacing: .06em; min-height: 20px; margin: 6px 0; } .panel.sheet.small { max-width: 460px; margin: 0 auto; } ol.board { list-style: none; margin: 8px 0 0; padding: 0; } ol.board li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid #1F233022; font: 900 20px/1 var(--big); letter-spacing: .04em; } ol.board li i { font-style: normal; width: 1.7em; flex: none; color: #1F2330aa; } ol.board li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ol.board li b { font-weight: 900; flex: none; } ol.board li.you { background: var(--signal); padding: 0 6px; } ol.board li.gap { min-height: 24px; justify-content: center; color: #1F2330aa; border: 0; } ol.board li button { flex: none; min-height: 44px; background: transparent; border: 0; font: 700 12px var(--lab); letter-spacing: .1em; color: #1F2330aa; text-decoration: underline; padding: 0 4px; } ol.board li button.who { color: var(--ink); background: transparent; flex: 1; font: 900 20px/1 var(--big); text-decoration: none; padding: 0; } @media (max-width: 440px) { ol.board li { font-size: 17px; gap: 7px; } ol.board li button { letter-spacing: .04em; } ol.board li button.who { font-size: 17px; } } /* the proud moment's offer (KC's rule of 30 Sep): the name button, in the signal amber, says why and asks */ button.who.offer { background: var(--signal); color: var(--ink); white-space: normal; line-height: 1.05; box-shadow: 0 3px 0 #0006; animation: offer 1.6s ease-in-out 2; } button.who.offer small { display: block; font: 700 12px/1.2 var(--lab); letter-spacing: .1em; } @keyframes offer { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } } /* your friends above everyone (KC's rule of 30 Sep) */ h3.boardHead { margin: 18px 0 0; font: 900 15px var(--lab); letter-spacing: .2em; color: var(--ember); } ol.board li em { flex: none; font: 700 12px var(--lab); font-style: normal; letter-spacing: .06em; color: #1F2330aa; } #friendsSub:empty { display: none; } /* delete my name and data: two taps (the first one asks) */ /* the studio's line (studio check, 4 Oct): on the result screen and the record */ .studio { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 2px; margin: 4px 0 0; min-height: 44px; font: 500 12px/1 var(--lab); letter-spacing: .04em; color: #F1EBDCaa; } .studio a { color: inherit; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; } .sheet .studio { justify-content: flex-start; color: #1F2330aa; } p.boards button { min-height: 44px; margin: 0 4px 4px 0; padding: 4px 10px; font: 900 15px var(--big); letter-spacing: .08em; background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; } #modesTop { pointer-events: auto; width: min(72vw, 280px); margin: 12px auto 0; } body:not(.at-start) #modesTop, body.paper-up #modesTop { display: none; } #updownTop { pointer-events: auto; width: min(72vw, 280px); margin: 4px auto 0; } body:not(.at-start) #updownTop, body.paper-up #updownTop { display: none !important; } #kindsTop { pointer-events: auto; width: min(72vw, 280px); margin: 4px auto 0; } body:not(.at-start) #kindsTop, body.paper-up #kindsTop { display: none !important; } /* the help (OG-742): HIGH, MED or OFF under UP / DOWN, on the mountain's start line, once a climb has been finished */ #helpTop { pointer-events: auto; width: min(72vw, 280px); margin: 4px auto 0; gap: 0; align-items: stretch; display: none; } body.mount-on.at-start:not(.paper-up) #helpTop:not([hidden]) { display: flex; } #helpTop span { display: flex; align-items: center; padding: 0 8px; background: #1F2330d9; color: #f1ebdcaa; font: 900 12px/1 var(--big); letter-spacing: .14em; } #helpTop button { flex: 1; min-height: 44px; background: #1F2330d9; color: var(--paper); font: 900 15px/1 var(--big); letter-spacing: .12em; padding: 7px 4px 5px; box-shadow: inset 0 0 0 2px var(--paper); border: 0; } #helpTop button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } /* the car (KC, OG-855): ROADSTER, DRIFTER, NITRO or TRIKE under the help, once a climb has been finished; each its own colour (its paint) under its name, and one line about the one picked */ [data-car="roadster"] { --c: #1d9ca5; } [data-car="drifter"] { --c: #E5343F; } [data-car="nitro"] { --c: #2E7BFF; } [data-car="trike"] { --c: #8DC21F; } [data-car="buggy"] { --c: #7B3FD6; } [data-car="hatch"] { --c: #E8B21A; } /* white car: its gold stripe, seen on the picked (cream) button too */ #carTop { pointer-events: auto; width: min(94vw, 360px); margin: 4px auto 0; gap: 0; align-items: stretch; display: none; } /* six cars (OG-1160): a little wider */ #carSay { pointer-events: none; width: min(94vw, 360px); margin: 0 auto; padding: 6px 8px 5px; background: #1F2330e6; color: var(--paper); font: 900 12px/1.15 var(--big); letter-spacing: .1em; text-align: center; text-wrap: balance; box-sizing: border-box; display: none; } body.mount-on.at-start:not(.paper-up) #carTop:not([hidden]) { display: flex; } body.mount-on.at-start:not(.paper-up) #carSay:not([hidden]) { display: block; } #carTop > span { display: flex; align-items: center; padding: 0 6px; background: #1F2330d9; color: #f1ebdcaa; font: 900 12px/1 var(--big); letter-spacing: .14em; } #carTop button { flex: 1; min-width: 0; min-height: 44px; background: #1F2330d9; color: var(--paper); font: 900 12px/1 var(--big); letter-spacing: .03em; padding: 7px 2px 5px; box-shadow: inset 0 0 0 2px var(--paper); border: 0; position: relative; } #carTop button::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 4px; background: var(--c); border-radius: 2px; } /* a picture of each car above its name (KC, OG-868) */ #carTop button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 2px 9px; } #carTop button img { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; object-fit: contain; margin: -2px 0 -3px; } #carTop button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } #carTop button .two { display: block; line-height: .92; text-align: center; margin-bottom: -2px; } /* BIG BUGGY: its name on two lines */ #carSay b { color: var(--c); } /* a live race (OG-744/745): the start line's button, the room at the top (never over the thumbs), the 3-2-1, the gap */ #raceTop { pointer-events: auto; width: min(72vw, 280px); margin: 4px auto 0; display: none; } body.mount-on.at-start:not(.paper-up):not(.racing) #raceTop:not([hidden]) { display: flex; } /* RACE ANYONE (OG-1425): the start line's yellow; a friend's race steps back to an outline beside it */ #anyTop { pointer-events: auto; width: min(72vw, 280px); margin: 4px auto 0; display: none; } body.mount-on.at-start:not(.paper-up):not(.racing) #anyTop:not([hidden]), body.rdrift-on.at-start:not(.paper-up):not(.racing) #anyTop:not([hidden]) { display: flex; } body.solo-go #anyTop { display: none !important; } #anyBtn { flex: 1; min-height: 44px; background: var(--amber, #FFB000); color: var(--ink); font: 900 15px/1 var(--big); letter-spacing: .12em; border: 0; padding: 8px 6px 6px; } body.any-on #raceBtn { background: #1F2330e6; color: var(--paper); box-shadow: inset 0 0 0 2px var(--amber, #FFB000); } .anycard { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 360px); max-height: calc(100dvh - 24px); overflow-y: auto; z-index: 30; pointer-events: auto; background: var(--ink); color: var(--paper); padding: 18px 16px 16px; box-shadow: 0 0 0 3px var(--signal), 0 18px 40px #000a; box-sizing: border-box; } .anycard[hidden] { display: none; } .anycard h3 { margin: 0 0 4px; font: 900 30px/1 var(--big); letter-spacing: .04em; } .anycard p { margin: 0 0 12px; font: 600 14px/1.35 var(--lab); color: #f1ebdcbb; } .anycard .n { display: flex; gap: 8px; } .anycard .n button { flex: 1; min-height: 64px; font: 900 34px/1 var(--big); background: #f1ebdc14; color: var(--paper); border: 0; box-shadow: inset 0 0 0 2px #f1ebdc55; } .anycard .n button[aria-pressed="true"] { background: var(--signal); color: var(--ink); box-shadow: none; } .anycard .n small { display: block; font: 700 11px/1 var(--lab); letter-spacing: .1em; margin-top: 4px; } .anycard .go { width: 100%; margin-top: 12px; min-height: 52px; background: var(--signal); color: var(--ink); font: 900 22px/1 var(--big); letter-spacing: .08em; border: 0; } .anycard .seats { display: grid; gap: 6px; margin: 4px 0 8px; } .anycard .seat { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; background: #f1ebdc10; font: 900 19px/1 var(--big); letter-spacing: .05em; } .anycard .seat i { width: 26px; height: 26px; border-radius: 50%; display: inline-block; flex: none; background: #f1ebdc55; } .anycard .seat.you { box-shadow: inset 0 0 0 2px var(--signal); } .anycard .seat.wait { color: #f1ebdc66; font: 700 15px/1 var(--lab); letter-spacing: .12em; } .anycard .seat.wait i { background: none; border: 2px dashed #f1ebdc55; } .anycard .seat.bot { color: #f1ebdcaa; } .anycard .seat small { margin-left: auto; font: 700 12px/1 var(--lab); letter-spacing: .1em; color: #f1ebdc99; } .anycard .fill { height: 6px; background: #f1ebdc22; margin: 2px 0 8px; } .anycard .fill b { display: block; height: 100%; width: 0; background: var(--signal); } .anycard .go.now { margin-top: 4px; } .anycard .go small { display: block; font: 700 11px/1.2 var(--lab); letter-spacing: .1em; margin-top: 4px; opacity: .75; } /* START NOW (OG-1458) */ .anycard .cancel { width: 100%; min-height: 44px; margin-top: 8px; background: transparent; color: var(--paper); border: 0; box-shadow: inset 0 0 0 2px #f1ebdc44; font: 900 17px/1 var(--big); letter-spacing: .1em; } @media (max-width: 380px) { .anycard h3 { font-size: 26px; } } /* FINDING DRIVERS · 1 OF 4 on one line at 360 */ @media (orientation: landscape) and (max-height: 520px) { /* sideways: the seats two across, so START NOW and LEAVE both show (OG-1459) */ .anycard { width: min(92vw, 560px); padding-top: 12px; padding-bottom: 12px; } .anycard h3 { font-size: 24px; } .anycard p { margin-bottom: 6px; font-size: 13px; } .anycard .seats { grid-template-columns: 1fr 1fr; } .anycard .seat { min-height: 36px; font-size: 17px; } .anycard .go { min-height: 44px; margin-top: 6px; } .anycard .cancel { min-height: 38px; margin-top: 6px; } } body.any-wait #raceBox { display: none !important; } #raceBtn { flex: 1; min-height: 44px; background: var(--amber, #FFB000); color: var(--ink); font: 900 15px/1 var(--big); letter-spacing: .12em; border: 0; padding: 8px 6px 6px; } /* RACE THE COMPUTER (KC, OG-952 to OG-957; src/cpu.js): under RACE A FRIEND LIVE, the same size, dark with an amber edge; in its card, the computer's level above your CAR and HELP */ #cpuTop { pointer-events: auto; width: min(72vw, 280px); margin: 6px auto 0; display: none; } body.mount-on.at-start:not(.paper-up):not(.racing) #cpuTop:not([hidden]) { display: flex; } #cpuBtn { flex: 1; min-height: 44px; background: #1F2330e6; color: var(--paper); font: 900 15px/1 var(--big); letter-spacing: .12em; border: 0; padding: 8px 6px 6px; box-shadow: inset 0 0 0 2px var(--amber, #FFB000); } #cpuLevel { display: none; gap: 0; align-items: stretch; margin: 0 0 10px; } body.cpu #cpuLevel { display: flex; } #cpuLevel span { display: flex; align-items: center; padding: 0 8px 0 2px; color: #f1ebdcaa; font: 900 12px/1 var(--big); letter-spacing: .14em; } #raceBox #cpuLevel button { font: 900 14px/1 var(--big); letter-spacing: .12em; min-height: 40px; } /* the cars one after another (KC, OG-969 to OG-974; src/unlock.js): a locked car dimmed, its count on its picture; the computer's card says the count to the next car and each mountain's three levels; a car earned, its own moment */ #carTop button.locked img { filter: grayscale(1) brightness(.55); } #carTop button.locked { position: relative; } #carTop button.locked::after { content: attr(data-n); position: absolute; top: 4px; right: 4px; font: 900 11px/1 var(--big); letter-spacing: .06em; background: #1F2330; color: var(--paper); padding: 3px 4px 2px; box-shadow: inset 0 0 0 1px #f1ebdc66; } /* the guest cars (KC, OG-1068; src/guests.js): Ride or Die's three, a second, lower row under the cars, each locked like the car it drives as; gone at the day's turn (00:00 UTC) */ [data-car="zenmai"] { --c: #3fcfa8; } [data-car="oni-r"] { --c: #9b5cf0; } [data-car="surge"] { --c: #3157ff; } /* YOUR FRIENDS PASSED YOU (OG-1117): the card on the mountain's start line, where the GUEST row was */ #rivalTop { pointer-events: auto; position: relative; width: min(88vw, 340px); margin: 4px auto 0; box-sizing: border-box; display: none; background: var(--dusk); border: 2px solid var(--signal); border-radius: 4px; padding: 7px 9px 8px; color: var(--paper); text-align: left; } body.mount-on.at-start:not(.paper-up):not(.racing) #rivalTop:not([hidden]) { display: block; } #rivalTop .k { font: 700 11px/1 var(--lab); letter-spacing: .12em; color: var(--signal); } #rivalTop .who { font: 900 22px/1.05 var(--big); letter-spacing: .02em; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rivalTop .line { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; } #rivalTop .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.1 var(--lab); letter-spacing: .05em; } #rivalTop .t b { color: var(--signal); } #rivalGo { flex: none; background: var(--signal); color: var(--ink); font: 900 14px/1 var(--big); letter-spacing: .05em; padding: 8px 8px 7px; border-radius: 3px; min-height: 34px; } #rivalGo.on { background: var(--paper); } #rivalMore { position: absolute; right: 4px; top: 2px; padding: 6px 6px; font: 700 11px/1 var(--lab); color: #c9c3b4; letter-spacing: .08em; background: none; } #rivalMore[hidden] { display: none; } /* a short phone: the card a little tighter, and the car's line gives it room (the column ends where it did with the GUEST row) */ @media (orientation: portrait) and (max-height: 700px) { #rivalTop { padding: 5px 8px 6px; } #rivalTop .who { font-size: 19px; margin-top: 2px; } #rivalTop .line { margin-top: 3px; } body.rivals-on #carSay { display: none !important; } } #guestTop { pointer-events: auto; width: min(94vw, 360px); margin: 2px auto 0; gap: 0; align-items: stretch; display: none; } body.mount-on.at-start:not(.paper-up) #guestTop:not([hidden]) { display: flex; } #guestTop span { display: flex; align-items: center; padding: 0 6px; background: #1F2330d9; color: #f1ebdcaa; font: 900 9px/1.15 var(--big); letter-spacing: .1em; width: 58px; } #guestTop button { flex: 1; min-height: 40px; background: #1F2330d9; color: var(--paper); font: 900 12px/1 var(--big); letter-spacing: .08em; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 2px 8px; } #guestTop button::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; background: var(--c); border-radius: 2px; } #guestTop button img { width: 100%; max-width: 46px; height: auto; aspect-ratio: 1; object-fit: contain; margin: -2px 0 -2px; } #guestTop button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } #guestTop button.locked img { filter: grayscale(1) brightness(.55); } #guestTop button.locked::after { content: 'LOCKED'; position: absolute; top: 3px; right: 3px; left: auto; bottom: auto; height: auto; width: auto; border-radius: 0; font: 900 8px/1 var(--big); letter-spacing: .06em; background: #1F2330; color: var(--paper); padding: 2px 3px 1px; box-shadow: inset 0 0 0 1px #f1ebdc66; } @media (max-height: 720px) { /* a short phone (360 x 640): the guests by name only, so the race buttons and the thumbs' words stay where they were */ body:not(.racing) #guestTop button img { display: none; } body:not(.racing) #guestTop button { min-height: 30px; padding: 0 2px 7px; justify-content: flex-end; } body:not(.racing) #guestTop:not([hidden]) ~ * #carTop button img, body:not(.racing):has(#guestTop:not([hidden])) #carTop button img { max-width: 44px; } #raceBox #guestTop button img { display: none; } /* and on the race card (OG-1080: it ran past a 640 px screen) */ #raceBox #guestTop button { min-height: 32px; justify-content: flex-end; } } #raceSetup #guestTop { width: 100%; margin-left: 0; margin-right: 0; } #raceBox #guestTop { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; } #raceBox #guestTop[hidden] { display: none !important; } #raceBox #guestTop span { grid-column: 1 / -1; width: auto; background: transparent; padding: 0 2px; justify-content: flex-start; font: 900 11px/1 var(--big); letter-spacing: .16em; } #raceBox #guestTop span br { display: none; } #raceBox #guestTop button { background: #f1ebdc10; box-shadow: inset 0 0 0 2px #f1ebdc55; padding: 2px 2px 8px; } #raceBox #guestTop button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 2px var(--c); } #cpuNext { display: none; font: 900 12px/1.3 var(--big); letter-spacing: .1em; margin: 0 0 6px; color: #f1ebdcaa; } #cpuProg { display: none; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 0 0 10px; font: 900 11px/1 var(--big); letter-spacing: .06em; } body.cpu #cpuNext { display: block; } body.cpu #cpuProg { display: flex; } #cpuBuggy { display: none; font: 900 11px/1.3 var(--big); letter-spacing: .1em; margin: -4px 0 9px; color: #E8584A; } /* BIG BUGGY's count (OG-1072) */ body.cpu #cpuBuggy:not([hidden]) { display: block; } #cpuProg span { padding: 5px 5px 3px; background: #f1ebdc12; box-shadow: inset 0 0 0 1px #f1ebdc44; color: #f1ebdcaa; white-space: nowrap; } #cpuProg span.here { box-shadow: inset 0 0 0 2px var(--paper); color: var(--paper); } #cpuProg span.won { background: #3FD07A; color: var(--ink); box-shadow: none; } #unlockBox { position: fixed; z-index: 9; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 18%); transform: translateX(-50%); width: min(88vw, 340px); background: #1F2330; color: var(--paper); padding: 16px 14px; text-align: center; box-shadow: 0 8px 24px #0008, inset 0 0 0 2px var(--amber, #FFB000); pointer-events: auto; box-sizing: border-box; } #unlockBox[hidden] { display: none; } /* a card (OG-1094): big over the ticket, a little tilted, a tap keeps it */ #cardBox { position: fixed; z-index: 10; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #0b0c12cc; pointer-events: auto; cursor: pointer; } #cardBox[hidden] { display: none; } #cardArt canvas { display: block; width: min(78vw, 360px, calc((100dvh - 90px) * 0.667)); height: auto; transform: rotate(-1.5deg); box-shadow: 0 14px 40px #000a, 0 0 0 2px #d6aa4855; animation: cardIn .55s cubic-bezier(.2,1.4,.4,1); } #cardNote { margin: 0; font: 900 14px/1 var(--big); letter-spacing: .16em; color: #f1ebdcaa; } @keyframes cardIn { from { transform: scale(.4) rotate(-14deg); opacity: 0; } to { transform: rotate(-1.5deg); opacity: 1; } } #unlockHead { margin: 0; font: 900 13px/1 var(--big); letter-spacing: .16em; color: var(--amber, #FFB000); } #unlockTitle { margin: 8px 0 12px; font: 900 26px/1.1 var(--big); letter-spacing: .06em; } #unlockCars { display: flex; gap: 10px; justify-content: center; } #unlockCars button { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #f1ebdc10; border: 0; color: var(--paper); padding: 6px 4px 10px; box-shadow: inset 0 0 0 2px var(--c, var(--paper)); } #unlockCars b { font: 900 15px/1 var(--big); letter-spacing: .08em; } #unlockCars small { font: 900 10px/1.3 var(--big); letter-spacing: .06em; color: #f1ebdcaa; } #unlockNote { margin: 10px 0 0; font: 900 11px/1.3 var(--big); letter-spacing: .1em; color: #f1ebdcaa; } /* the race card (KC's pick, OG-868): you and your friend side by side, each with your car's picture, its car and help and READY; your friend's empty place holds the link's buttons; then your CAR (pictures) and your HELP, until the 3-2-1 */ #raceBox { position: fixed; z-index: 5; top: calc(env(safe-area-inset-top, 0px) + 84px); left: 50%; transform: translateX(-50%); width: min(94vw, 440px); background: #1F2330; color: var(--paper); padding: 10px 10px 12px; text-align: center; box-shadow: 0 8px 24px #0007; pointer-events: auto; box-sizing: border-box; } #raceBox .rhead { display: flex; justify-content: space-between; align-items: center; font: 900 12px/1 var(--big); letter-spacing: .16em; color: #f1ebdcaa; margin: 0 2px 8px; text-align: left; } #raceBox .rhead b { color: var(--signal); } #raceBox #raceLeave { min-height: 36px; padding: 7px 9px 5px; font: 900 12px/1 var(--big); letter-spacing: .12em; flex: none; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } #raceBox .rvs { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch; } #raceBox .rvs > em { align-self: center; font: 900 22px/1 var(--big); font-style: normal; color: var(--signal); } .rwho { background: #f1ebdc12; box-shadow: inset 0 0 0 2px #f1ebdc33; padding: 6px 6px 8px; min-height: 128px; display: flex; flex-direction: column; align-items: center; min-width: 0; } .rwho.me { box-shadow: inset 0 0 0 2px var(--paper); } .rwho img { width: 74px; height: 74px; object-fit: contain; margin: -4px 0 0; } .rwho b { font: 900 15px/1.05 var(--big); letter-spacing: .05em; margin-top: 2px; max-width: 100%; overflow-wrap: anywhere; } .rwho small { font: 900 11px/1 var(--big); letter-spacing: .12em; margin-top: 4px; color: var(--c, var(--paper)); } .rwho i { margin-top: auto; font: 900 11px/1 var(--big); font-style: normal; letter-spacing: .12em; padding: 5px 7px 3px; background: #f1ebdc22; } .rwho i.ok { background: #3FAE5A; color: #fff; } .rwho.empty { background: transparent; box-shadow: none; outline: 2px dashed #f1ebdc66; outline-offset: -2px; justify-content: center; gap: 5px; } .rwho.empty img, .rwho.empty small, .rwho.empty i { display: none; } .rwho.empty b { color: #f1ebdcaa; font-size: 13px; margin-bottom: 2px; } #raceShare { width: 100%; display: flex; flex-direction: column; gap: 5px; } /* up to three friends (OG-1277): a row each beside yours, the car small at the start of it */ #raceBox .rthem { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #raceBox .rthem > .rwho { flex: 1; } #raceBox .rthem > .rwho[hidden] { display: none; } #raceBox.many .rthem > .rwho { min-height: 0; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 6px; align-items: center; text-align: left; padding: 5px 6px; } #raceBox.many .rthem > .rwho img { grid-row: 1 / 4; width: 44px; height: 44px; margin: 0; } #raceBox.many .rthem > .rwho b { font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } #raceBox.many .rthem > .rwho small { font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #raceBox.many .rthem > .rwho i { margin: 3px 0 0; justify-self: start; font-size: 10px; padding: 3px 5px 2px; } #raceMore { display: flex; align-items: center; gap: 8px; margin-top: 8px; } #raceMore[hidden] { display: none; } #raceMore > span { font: 900 11px/1.1 var(--big); letter-spacing: .14em; color: #f1ebdcaa; text-align: left; flex: none; } #raceMore #raceShare { flex-direction: row; } #raceBox #raceMore #raceShare a, #raceBox #raceMore #raceShare button { flex: 1; font-size: 12px; padding: 9px 2px 7px; } #raceBox #raceShare a, #raceBox #raceShare button { display: block; width: 100%; min-height: 0; box-sizing: border-box; padding: 9px 4px 7px; font: 900 13px/1 var(--big); letter-spacing: .1em; background: var(--paper); color: var(--ink); box-shadow: none; border-left: 5px solid var(--signal); } #raceBox #raceShare .wa { border-left-color: #25D366; } #raceBox #raceShare .tg { border-left-color: #2AABEE; } #raceBox[hidden] { display: none; } /* your friend has come to the start line (KC, OG-764): the box glows amber twice, with the buzz and the toots */ #raceBox.came { animation: raceCame .5s ease-out 2; } @keyframes raceCame { 0% { box-shadow: 0 0 0 0 #f2a900, 0 6px 18px #0006; } 100% { box-shadow: 0 0 0 14px #f2a90000, 0 6px 18px #0006; } } #raceSay { font: 900 14px/1.2 var(--big); letter-spacing: .08em; margin: 10px 4px 2px; text-wrap: balance; } #raceSay.go { color: var(--signal); } #raceBox .row { gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 4px; width: auto; } /* the card's own width (the page's .row ran 13 px past it: YOUR PICK cut off) */ #raceBox a, #raceBox button { min-height: 44px; padding: 8px 12px 6px; font: 900 14px/1 var(--big); letter-spacing: .1em; border: 0; background: var(--paper); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; } /* in a race, each player's own HELP and CAR in the race box (KC, OG-860), until the 3-2-1 */ #raceSetup { margin-top: 10px; padding-top: 8px; border-top: 1px solid #f1ebdc33; } #raceSetup[hidden] { display: none; } #raceSetup #helpTop, #raceSetup #carTop, #raceSetup #carSay { width: 100%; margin-left: 0; margin-right: 0; } #raceBox #raceSetup button { flex: 1; justify-content: center; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); padding: 7px 2px 5px; } #raceBox #raceSetup button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } #raceBox #helpTop { margin-top: 10px; } #raceBox #helpTop span { background: transparent; padding-left: 2px; } #raceBox #helpTop button { font: 900 14px/1 var(--big); letter-spacing: .12em; min-height: 40px; } /* YOUR CAR: four pictures in a row, the name under each, its colour under that */ #raceBox #carTop { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 4px; } #raceBox #carTop[hidden] { display: none !important; } /* a drift battle is in the ROADSTER (OG-1190) */ #raceBox #carTop > span { grid-column: 1 / -1; background: transparent; padding: 0 2px 0; justify-content: flex-start; color: #f1ebdcaa; font: 900 11px/1 var(--big); letter-spacing: .16em; } #raceBox #carTop button { flex-direction: column; font: 900 11px/1 var(--big); letter-spacing: .03em; background: #f1ebdc10; box-shadow: inset 0 0 0 2px #f1ebdc55; padding: 2px 2px 9px; } #raceBox #carTop button img { width: 100%; max-width: 76px; height: auto; aspect-ratio: 1; margin: 0 0 -2px; } #raceBox #carTop button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 2px var(--c); } #raceBox #carSay { background: transparent; margin-top: 7px; padding: 0 2px; } /* a short phone (360 x 740 and less): the card shorter, so the car on the line and the thumbs stay clear */ @media (max-height: 780px) { #raceBox { top: calc(env(safe-area-inset-top, 0px) + 80px); padding: 8px 8px 9px; } #raceBox .rhead { margin-bottom: 6px; } .rwho { min-height: 104px; padding: 4px 4px 6px; } .rwho img { width: 56px; height: 56px; margin: -2px 0 -2px; } #raceSay { margin-top: 7px; } #raceSetup { margin-top: 7px; padding-top: 6px; } #raceBox #carTop button img { max-width: 54px; } #raceBox #helpTop { margin-top: 7px; } #cpuProg { margin-bottom: 7px; } #cpuBuggy { margin-bottom: 6px; } #cpuNext { margin-bottom: 5px; } #raceBox #helpTop button { min-height: 36px; } #raceBox #raceShare a, #raceBox #raceShare button { padding: 7px 4px 5px; } #raceBox.many .rthem { gap: 4px; } #raceBox.many .rthem > .rwho { grid-template-columns: 38px 1fr; padding: 3px 5px; } #raceBox.many .rthem > .rwho img { width: 38px; height: 38px; } } /* held sideways, the race card is taller than the screen: it scrolls on its own, from its top, as PAUSE's column does (KC, OG-1082); the thumbs' layer beside it is untouched */ @media (orientation: landscape) and (max-height: 520px) { #raceBox { max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; } #raceBox::-webkit-scrollbar { display: none; } } #pause .pausedLine.who { font-size: 24px; text-align: center; } #raceLeave { background: transparent !important; color: var(--paper) !important; box-shadow: inset 0 0 0 2px #f1ebdc66; } #raceCount { position: fixed; z-index: 5; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 900 min(28vw, 180px)/1 var(--big); color: var(--paper); text-shadow: 0 4px 0 #1F2330, 0 0 24px #0008; pointer-events: none; display: none; } #raceCount.on { display: block; } #raceStrip { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 56px); background: #1F2330cc; color: var(--paper); font: 900 14px/1 var(--big); letter-spacing: .1em; padding: 6px 10px 4px; pointer-events: none; display: none; white-space: nowrap; } body.racing.in-run #raceStrip:not(:empty) { display: block; } #raceBox [hidden] { display: none !important; } /* in a race the mountain, its direction and the help are the race's: not to be changed at its start line or on its ticket */ body.racing #modesTop, body.racing #kindsTop, body.racing #updownTop, body.racing #ticket .modes, body.racing #ticket .kinds, body.racing #ticket .updown { display: none !important; } #raceLine { font-size: 18px; } /* a board row's help level beside the name (HIGH says nothing: it's where everyone starts) */ li .lvl { font: 900 11px/1 var(--big); letter-spacing: .1em; margin-left: 6px; padding: 2px 4px 1px; background: var(--ink); color: var(--paper); border-radius: 2px; font-style: normal; vertical-align: middle; } /* the board's own rule for its rank numbers (ol.board li i) made the tag ink on ink, 1.7em wide: unreadable (OG-853) */ ol.board li i.lvl { width: auto; color: var(--paper); } ol.board li i.car { background: var(--c); color: #fff; } /* the drift's live readout: the score climbing while you're sideways, and the angle (the camera's own dot type) */ #driftHud { display: none; margin: 8px auto 0; width: max-content; background: #1F2330cc; padding: 5px 10px 3px; font: 800 20px/1 var(--dot); color: #f1ebdc88; } #driftHud.on { display: block; } #driftHud.sideways { color: var(--ember); box-shadow: 0 0 0 2px var(--ember); } #driftHud small { display: inline; font: 900 15px/1 var(--big); letter-spacing: .16em; margin-right: 10px; vertical-align: 2px; text-shadow: none; } #driftHud span { margin-left: 12px; } /* DRIFT's angle meter (KC, OG-1444 to OG-1446; src/app.js angleMeter): bottom centre, between the thumbs, never in their way */ #angleMeter { position: fixed; z-index: 3; left: 50%; bottom: calc(var(--bottom) + 10px); transform: translateX(-50%); width: min(58vw, 248px); pointer-events: none; } #angleMeter[hidden] { display: none; } #angleMeter svg { display: block; width: 100%; height: auto; overflow: visible; } #angleMeter .disc { fill: #1F2330e6; } #angleMeter path:not(.disc) { fill: none; stroke-width: 12; } #angleMeter path.grey { stroke: #8d8778; } #angleMeter path.green { stroke: #53d769; } #angleMeter path.red { stroke: #ff5a4e; } #angleMeter .tick { stroke: var(--paper); stroke-opacity: .6; stroke-width: 2; } #angleMeter .needle { stroke: var(--paper); stroke-width: 6; stroke-linecap: round; } #angleMeter text { font: 900 54px var(--big); text-anchor: middle; fill: #c9c2b3; } #angleMeter text.green { fill: #53d769; } #angleMeter text.amber { fill: var(--signal); } #angleMeter text.red { fill: #ff5a4e; } body.meter-on #hint { bottom: calc(var(--bottom) + 36px + min(33vw, 140px)); } /* the first runs' thumb hint, above the dial */ @media (orientation: landscape) and (max-height: 520px) { #angleMeter { width: min(26vw, 180px); bottom: calc(var(--bottom) + 4px); } body.meter-on #hint { bottom: auto; top: calc(var(--top) + 96px); } /* sideways the car sits just above the dial: the hint goes under the speed bar */ } /* the drift's keys, for keyboard users only (CG-024) */ .keys { margin: 8px 0 0; font: 700 17px var(--lab); letter-spacing: .14em; color: var(--paper); } .keys:empty { display: none; } /* the tabs under a ticket take a row: the ticket gives it up (short phones keep AGAIN and the chat buttons on screen) */ body.modes-on #ticket .paper canvas { max-height: calc(100vh - 398px); max-height: calc(100dvh - 398px); } /* room for #12 TODAY and your name (OG-386) */ /* the result screen (graphics study item 4, KC OG-1396): the ticket is the hero, as big as the width allows (fitPaper shrinks it to what the column leaves); it stays clear of RECORD on a short phone. The game / mountain / way rows sit behind OTHER RUNS, one line that says the run you're on */ #ticket .paper canvas, body.modes-on #ticket .paper canvas { max-height: calc(100vh - 390px); max-height: calc(100dvh - 390px); } #ticket:not(.runs-open) .modes, #ticket:not(.runs-open) .kinds, #ticket:not(.runs-open) .updown { display: none !important; } #ticket .why { font-size: 19px; font-weight: 700; margin-top: 12px; } .swaprow[hidden], body.racing #ticket .swaprow { display: none; } .swap { flex: 1; min-width: 0; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px #F1EBDC55; padding: 6px 12px; font: 700 clamp(13px, 3.8vw, 15px)/1 var(--lab); letter-spacing: .08em; white-space: nowrap; } .swap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .swap b { flex: none; font: 900 clamp(15px, 4.3vw, 17px)/1 var(--big); letter-spacing: .08em; color: var(--signal); } #hint { position: fixed; left: 50%; bottom: calc(var(--bottom) + 28px); transform: translate(-50%, 12px); z-index: 4; pointer-events: none; background: #1F2330dd; color: var(--paper); font: 700 16px/1.3 var(--lab); letter-spacing: .12em; padding: 12px 18px; width: max-content; max-width: 92vw; text-align: center; opacity: 0; transition: opacity .25s, transform .25s; border-left: 5px solid var(--signal); } #hint.on { opacity: 1; transform: translate(-50%, 0); } #hint { text-wrap: balance; white-space: pre-line; } /* two even lines, never one word left on the second; a phrase a line where it says so */ body.two #hint { max-width: min(50vw, 440px); } /* between the two thumbs */ body.paper-up .gauge, body.paper-up #curveName, body.in-view .gauge, body.in-view #curveName, body.paper-up #hint { visibility: hidden; } /* the record stays one tap away from a ticket, whichever way the phone is held (on its side the paper fills the screen) */ body.paper-up:not(.record-up):not(.sheet-up) #hud { z-index: 5; } body.paper-up .brand { visibility: hidden; } /* two thumbs, shown on the start screen (KC via OG, OG-331: no wheel, no GAS button; KC, CG-037: pictures, not rails): a thumb sliding up and down where the gas is, and one sliding left and right where the steering is. Once a thumb is down they're gone, and the road is clear. */ #howto { position: fixed; inset: 0; z-index: 2; pointer-events: none; display: none; } body.two.touch.at-start #howto { display: block; } body.paper-up #howto { display: none; } .how { position: absolute; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 2px 0 #1F2330cc); } .how.steer { left: calc(var(--left) + 7vw); bottom: calc(var(--bottom) + 10%); } .how.gas { right: calc(var(--right) + 5vw); bottom: calc(var(--bottom) + 16%); } .how svg { display: block; overflow: visible; } .how.steer svg { width: 140px; height: 96px; } .how.gas svg { width: 90px; height: 130px; } .how .arrow { fill: var(--signal); } .how .thumb path { fill: var(--paper); stroke: var(--ink); stroke-width: 3; } .how .thumb rect { fill: #E4D9C2; stroke: var(--ink); stroke-width: 2; } .how.steer .thumb { transform: rotate(14deg); transform-origin: 70px 90px; animation: thumbLR 1.7s ease-in-out infinite; } .how.gas .thumb { animation: thumbUD 1.7s ease-in-out infinite; } @keyframes thumbLR { 0%, 100% { transform: translateX(-28px) rotate(14deg); } 50% { transform: translateX(28px) rotate(14deg); } } @keyframes thumbUD { 0%, 100% { transform: translateY(16px); } 50% { transform: translateY(-16px); } } .how b { margin-top: 6px; font: 900 24px/1 var(--big); letter-spacing: .14em; color: var(--paper); text-shadow: 0 2px 0 var(--ink); } /* PAUSE (KC, CG-105 to CG-107): in a run it takes RECORD's place; a friend's ticket closes with ✕ */ #pauseBtn { position: absolute; right: calc(var(--right) + 12px); top: 0; pointer-events: auto; background: var(--paper); color: var(--ink); font: 700 13px/1 var(--lab); letter-spacing: .08em; padding: 10px 12px; min-height: 44px; min-width: 44px; box-shadow: 0 2px 0 #0004; display: none; border: 0; } body.in-run #pauseBtn { display: block; } body.in-run #recordBtn { display: none; } #pause { justify-content: flex-end; } #pause .pausedLine { margin: 0 0 10px; font: 900 34px/1 var(--big); letter-spacing: .14em; color: var(--paper); text-shadow: 0 2px 0 var(--ink); } #pause .row { display: flex; gap: 8px; width: min(92vw, 420px); margin-top: 8px; } /* DRIFT's car in the pause (OG-1211): the cars you've won, the one for START AGAIN lit */ #pauseCar { display: flex; gap: 8px; align-items: center; width: min(92vw, 420px); margin-top: 16px; } #pauseCar[hidden] { display: none; } #pauseCar span { font: 700 12px/1 var(--lab); letter-spacing: .14em; color: var(--paper); text-shadow: 0 1px 0 var(--ink); } #pauseCar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 4px 2px 6px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: 900 14px/1 var(--big); letter-spacing: .06em; } #pauseCar button img { width: 48px; height: 48px; object-fit: contain; } #pauseCar button[aria-pressed="true"] { background: var(--signal); color: var(--ink); border-color: var(--signal); } /* DRIFT's cars as a six-spoke wheel (KC, OG-1271/1279): a car on each spoke, the picked one lit and named in the hub */ :is(#pauseCar, #mountCar).wheel { display: block; position: relative; --D: min(330px, 86vw); width: var(--D); height: var(--D); margin: 12px auto 4px; container-type: size; } :is(#pauseCar, #mountCar).wheel[hidden] { display: none; } :is(#pauseCar, #mountCar).wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; } :is(#pauseCar, #mountCar).wheel .rim { fill: none; stroke: var(--paper); stroke-width: 1.8; } :is(#pauseCar, #mountCar).wheel .teeth { fill: var(--paper); } :is(#pauseCar, #mountCar).wheel .spokes { stroke: var(--paper); stroke-width: 1.6; } :is(#pauseCar, #mountCar).wheel .hubc { fill: var(--ink); stroke: var(--signal); stroke-width: 1.2; } :is(#pauseCar, #mountCar).wheel .hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28%; text-align: center; font: 900 4.8cqw/1.05 var(--big); letter-spacing: .04em; color: var(--signal); pointer-events: none; } :is(#pauseCar, #mountCar).wheel button { position: absolute; flex: none; display: block; width: 30%; height: 21.6%; min-height: 0; transform: translate(-50%, -50%); padding: 0; border: 3px solid var(--paper); border-radius: 12px; overflow: hidden; background-color: var(--ink); background-size: cover; background-position: center 40%; background-repeat: no-repeat; box-shadow: 0 3px 0 #0008; } :is(#pauseCar, #mountCar).wheel button span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0 2px; background: #1F2330E6; color: var(--paper); font: 900 3.6cqw/1 var(--big); letter-spacing: .06em; text-align: center; white-space: nowrap; } :is(#pauseCar, #mountCar).wheel button[aria-pressed="true"] { border-color: var(--signal); background-color: var(--ink); background-size: cover; background-position: center 40%; } :is(#pauseCar, #mountCar).wheel button[aria-pressed="true"] span { background: var(--signal); color: var(--ink); } :is(#pauseCar, #mountCar).wheel button:disabled { filter: grayscale(.9) brightness(.5); border-color: #F1EBDC66; } /* darkened, not see-through: the spoke stays behind it */ #pause .row button:not(.big) { flex: 1; min-height: 52px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: 900 20px/1 var(--big); letter-spacing: .08em; } #theirsClose { position: absolute; right: calc(var(--right) + 10px); top: 8px; z-index: 1; background: var(--paper); color: var(--ink); border: 0; font-size: 24px; min-width: 44px; min-height: 44px; box-shadow: 0 2px 0 #0004; } .slideTag, body.drift-on .steerTag { display: none; } body.drift-on .slideTag { display: inline; } /* MOUNTAIN RUN's pedals (CG-093): both thumbs are held, not slid: HOLD · DRIFT and HOLD · GAS, a thumb pressing down */ .driftTag, .holdTag { display: none; } body.mount-on .how .slideTag, body.mount-on .how .steerTag { display: none; } body.mount-on .how .driftTag, body.mount-on .how .holdTag { display: inline; } body.mount-on .how .arrow { display: none; } body.mount-on .how.steer .thumb { animation: pressTilt 1.3s ease-in-out infinite; } body.mount-on .how.gas .thumb { animation: press 1.3s ease-in-out infinite; } @keyframes press { 0%, 100% { transform: translateY(-12px); } 45%, 75% { transform: translateY(6px); } } @keyframes pressTilt { 0%, 100% { transform: translateY(-12px) rotate(14deg); } 45%, 75% { transform: translateY(6px) rotate(14deg); } } /* the rings under the thumbs: the left fills amber with the drift it asks for, the right glows while the gas is down */ .ring { position: fixed; z-index: 2; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; pointer-events: none; display: none; } .ring.on { display: block; } #ringL { --a: 0; } #ringL .arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--signal) calc(var(--a) * 1turn), #F1E6D040 0); -webkit-mask: radial-gradient(circle, transparent 37px, #000 38px); mask: radial-gradient(circle, transparent 37px, #000 38px); } #ringR { border: 5px solid var(--signal); box-shadow: 0 0 22px var(--signal), inset 0 0 14px #F2B33188; } .ring b { position: absolute; left: 0; right: 0; top: -30px; text-align: center; font: 900 16px/1 var(--big); letter-spacing: .14em; color: var(--paper); text-shadow: 0 2px 0 var(--ink); } /* the Curve Camera's viewfinder: everything outside the 3:2 frame goes dark */ #viewfinder { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: none; } #viewfinder.on { display: block; } #vfFrame { position: absolute; box-shadow: 0 0 0 200vmax #0a0b10d9; } #vfFrame .c { position: absolute; width: 26px; height: 26px; border: 3px solid var(--paper); } .c.tl { left: -4px; top: -4px; border-right: 0; border-bottom: 0; } .c.tr { right: -4px; top: -4px; border-left: 0; border-bottom: 0; } .c.bl { left: -4px; bottom: -4px; border-right: 0; border-top: 0; } .c.br { right: -4px; bottom: -4px; border-left: 0; border-top: 0; } .cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border: 2px solid #f1ebdc88; border-radius: 50%; } #vfFrame .rec { position: absolute; left: 8px; top: -30px; color: #ff4455; font: 800 16px var(--dot); } #vfTime, #vfSpeed { position: absolute; top: -30px; font: 800 16px var(--dot); color: var(--paper); } #vfTime { right: 8px; } #vfSpeed { left: 50%; transform: translateX(-50%); } #vfStamp { position: absolute; left: 50%; top: 50%; font: 900 min(18vw, 96px)/1 var(--big); color: var(--stamp); border: 6px solid var(--stamp); padding: 2px 16px 0; transform: translate(-50%, -50%) rotate(-9deg) scale(2.4); opacity: 0; letter-spacing: .03em; } #vfStamp.on { animation: slam .28s cubic-bezier(.2,1.6,.4,1) forwards; } @keyframes slam { to { transform: translate(-50%, -50%) rotate(-9deg) scale(1); opacity: .92; } } .shutter { position: absolute; left: 50%; bottom: -74px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; border: 4px solid var(--paper); box-shadow: inset 0 0 0 6px #0a0b10, inset 0 0 0 30px var(--stamp); animation: pulse .7s ease-in-out infinite alternate; } @keyframes pulse { to { transform: scale(1.18); } } #flash { position: fixed; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; } #flash.go { animation: flash .5s ease-out; } @keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } } /* paper that slides up from the printer slot */ .panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 14px 14px calc(var(--bottom) + 14px); background: linear-gradient(#23284F00, #16182ef2 18%); transform: translateY(110%); visibility: hidden; transition: transform .32s cubic-bezier(.2,.9,.3,1), visibility 0s linear .32s; max-height: 100%; display: flex; flex-direction: column; align-items: center; } .panel.on { transform: translateY(0); visibility: visible; transition: transform .32s cubic-bezier(.2,.9,.3,1), visibility 0s; } .paper canvas { display: block; width: auto; height: auto; max-width: min(92vw, 520px); max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); box-shadow: 0 10px 30px #0009; transform: rotate(-0.6deg); } #ticket.on .paper canvas, #theirs.on .paper canvas { animation: print .45s cubic-bezier(.2,.9,.3,1); } @keyframes print { from { transform: translateY(40px) rotate(-0.6deg); clip-path: inset(0 0 100% 0); } to { transform: translateY(0) rotate(-0.6deg); clip-path: inset(0 0 0 0); } } .why { margin: 10px 4px 0; max-width: 520px; text-align: center; font: 500 16px/1.3 var(--lab); color: var(--paper); } .best { margin: 8px 0 0; font: 900 18px var(--big); letter-spacing: .1em; color: var(--signal); min-height: 0; } .best:empty { display: none; } .side { display: flex; flex-direction: column; align-items: center; width: 100%; } .row { display: flex; gap: 10px; margin-top: 12px; width: min(92vw, 520px); } .big { flex: 1.3; min-height: 60px; background: var(--paper); color: var(--ink); font: 900 30px/1 var(--big); letter-spacing: .06em; padding: 8px 10px; box-shadow: 0 3px 0 #0006; } .big small { display: block; font: 700 16px/1 var(--lab); letter-spacing: .06em; margin-top: 4px; } .send { flex: 1; min-height: 60px; background: var(--stamp); color: var(--paper); font: 900 22px/1.05 var(--big); letter-spacing: .06em; box-shadow: 0 3px 0 #0006; } /* one tap into the two chat apps people share in most; the share sheet stays the main button */ .chats { margin-top: 8px; } .chat { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); text-decoration: none; font: 900 17px/1 var(--big); letter-spacing: .1em; padding: 6px 8px; box-shadow: 0 3px 0 #0006; border-left: 6px solid var(--paper); text-align: center; } .chat.wa { border-left-color: #25D366; } .chat.tg { border-left-color: #2AABEE; } .chat.cp { border: 0; border-left: 6px solid var(--signal); } .chat small { display: block; font: 700 12px var(--lab); letter-spacing: .1em; margin-top: 3px; opacity: .8; } .slipPaper { background: var(--paper); color: var(--ink); width: min(92vw, 520px); padding: 16px 18px; transform: rotate(0.8deg); box-shadow: 0 8px 24px #0008; border-top: 6px dotted var(--dusk); } .slipPaper b { font: 900 34px var(--big); letter-spacing: .08em; color: var(--ink); border: 3px solid var(--ink); padding: 0 8px; display: inline-block; transform: rotate(-3deg); } .slipPaper h3 { margin: 10px 0 4px; font: 900 24px var(--big); letter-spacing: .04em; } .slipPaper p { margin: 0; font: 500 16px/1.3 var(--lab); } .banner { position: fixed; left: 50%; top: calc(var(--top) + 150px); transform: translateX(-50%); z-index: 3; background: var(--stamp); color: var(--paper); font: 900 20px var(--big); letter-spacing: .08em; padding: 8px 14px 6px; white-space: nowrap; display: none; } .banner.on { display: block; } .banner { max-width: calc(100vw - 24px); box-sizing: border-box; text-align: center; white-space: normal; text-wrap: balance; } /* a long alias wraps, never runs off an upright phone */ .nowrap { white-space: nowrap; } #nogl { top: 40%; white-space: normal; max-width: 90vw; text-align: center; } /* the record: a driving record, naturally */ .sheet { top: 0; background: var(--paper); color: var(--ink); align-items: stretch; overflow-y: auto; padding-top: calc(var(--top) + 16px); touch-action: pan-y; } .sheetHead { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--ink); } .sheet h2 { margin: 0; font: 900 28px var(--big); letter-spacing: .06em; } #recordClose, #nameClose, #boardClose { background: none; font-size: 26px; min-width: 44px; min-height: 44px; } .driver { font: 700 14px var(--lab); letter-spacing: .14em; margin: 12px 0 4px; } .driver b { font: 800 22px var(--dot); letter-spacing: 0; margin: 0 6px; } #newAlias, #moveBtn, #soundBtn { background: var(--ink); color: var(--paper); font: 700 12px var(--lab); letter-spacing: .12em; padding: 10px 12px; min-height: 44px; } .bestsLine { font: 900 17px var(--big); letter-spacing: .06em; margin: 6px 0 10px; } #recordList { list-style: none; margin: 0; padding: 0; } #recordList li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #1F233033; } #recordList b { font: 900 18px var(--big); letter-spacing: .04em; } #recordList span { font: 500 14px var(--lab); text-align: right; } #recordList li.todo { opacity: .38; } #recordList li.secret b { color: var(--stamp); letter-spacing: .3em; } #recordList li.secret span { font-style: italic; } #recordList li.part { border-bottom: 3px solid var(--ink); padding-top: 22px; } #recordList li.part b { color: var(--ember); letter-spacing: .12em; } .small { font: 500 13px/1.4 var(--lab); margin: 14px 0 0; } /* iPhone: no full screen for web pages (OG-363). The page may scroll by a little (a scrolled page is what makes Safari tuck its bars away), and while the bars are up, sideways, on the start screen, the middle of the screen takes a swipe and says so. Only that swipe scrolls: the page takes a vertical pan only while the hint is up, and #play never does, or a thumb sliding up for speed (on the start screen, or from AGAIN) would scroll the page and Safari would take the touch away. The thumbs' sides still start the game: nothing waits on it. */ html.ios, html.ios body { overflow-y: auto; height: auto; } html.ios body { min-height: calc(100vh + 160px); } html.ios-bars, html.ios-bars body { touch-action: pan-y; } #swipe { display: none; } html.ios-bars #swipe { display: flex; position: fixed; left: 28%; right: 28%; top: 45%; bottom: 0; z-index: 1; touch-action: pan-y; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--bottom) + 12px); } #swipe b { background: #1F2330dd; color: var(--paper); font: 900 17px/1 var(--big); letter-spacing: .14em; padding: 10px 14px 9px; text-align: center; border-left: 5px solid var(--signal); white-space: nowrap; } #swipe i { display: inline-block; font-style: normal; font-size: 22px; line-height: 1; margin-right: 8px; vertical-align: -2px; animation: swipeUp 1.2s ease-in-out infinite; } @keyframes swipeUp { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-6px); } } #toast { position: fixed; left: 50%; top: calc(var(--top) + 64px); transform: translate(-50%, -10px); z-index: 6; background: var(--ink); color: var(--paper); font: 700 16px var(--lab); letter-spacing: .04em; padding: 12px 16px; opacity: 0; transition: .25s; pointer-events: none; border-left: 5px solid var(--signal); max-width: calc(100vw - 32px); } #toast.on { opacity: 1; transform: translate(-50%, 0); } @media (orientation: landscape) and (max-height: 520px) { /* the friends card beside the column, under the brand, where the screen is free (OG-1117): the column stays as tall as it was */ #rivalTop { position: fixed; left: calc(var(--left) + 12px); top: calc(var(--top) + 64px); width: min(31vw, 300px); margin: 0; } #rivalTop .who { font-size: 19px; } .gauge { margin-top: 6px; } #speed { font-size: 60px; } #curveName { display: none; } #modesTop { margin-top: 6px; } .panel:not(.sheet) { flex-direction: row; justify-content: center; align-items: center; gap: 18px; padding: 10px 14px; top: 0; background: #16182ef2; } .paper canvas, #ticket .paper canvas, body.modes-on #ticket .paper canvas { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); max-width: 44vw; } #ticket .why { font-size: 16px; font-weight: 500; margin-top: 10px; } .side { width: min(46vw, 380px); } .row { width: 100%; } .why { max-width: 100%; } .side .best { max-width: calc(100% - 150px); } /* the first line of a tall column wraps clear of RECORD */ .slipPaper { width: min(46vw, 420px); } .studio { margin-top: 0; } .chat { font-size: 15px; letter-spacing: .06em; padding: 6px 4px; } #hint { bottom: calc(var(--bottom) + 14px); padding: 9px 14px; font-size: 16px; } /* KC, OG-1082 ("playing horizontally ... it does not scroll, and the main menu goes into the corner, not the centre"): PAUSE's buttons in the middle and as wide as their column (its upright flex-end sent them right, past the edge); a column taller than the screen (a ticket on a 360-412 px high phone) scrolls on its own beside the photo, from its top (it was centred, its first line and its last cut off). Only that column pans; AGAIN and TRY still start the run under the thumb, never a scroll */ #pause { justify-content: center; } #pause .side { width: min(64vw, 440px); } #pause .row { width: 100%; } /* the car wheel beside the buttons when the phone is held sideways (OG-1279): the column on the right, the wheel left */ #pauseCar.wheel { position: fixed; --D: min(330px, calc(100vh - 28px), 42vw); left: calc(var(--left) + 3vw); top: 50%; margin: calc(var(--D) / -2) 0 0; } #pause:has(#pauseCar.wheel:not([hidden])) .side { width: min(46vw, 400px); margin-left: calc(42vw + 3vw); } #pause:has(#pauseCar.wheel:not([hidden])) #pauseMore { align-self: stretch; width: 100%; } .panel:not(.sheet) > .side { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; } .panel:not(.sheet) > .side::-webkit-scrollbar { display: none; } .panel:not(.sheet) > .side > * { flex-shrink: 0; } .panel:not(.sheet) > .side > .row.go { position: sticky; bottom: 0; z-index: 1; background: #16182e; padding: 6px 0 2px; box-shadow: 0 -12px 12px -6px #16182e; } /* AGAIN always in sight, the rest scrolls above it */ .side > .best:empty + .why, .side > .why:first-child { max-width: calc(100% - 150px); } /* the column's first line clear of RECORD, as .best's */ #againBtn, #slipAgain, #tryBtn, #slipTry { touch-action: none; } } @media (prefers-reduced-motion: reduce) { #cardArt canvas { animation: none; } #flash.go { animation: flashSoft .5s ease-out; } @keyframes flashSoft { 0% { opacity: .3; } 100% { opacity: 0; } } .shutter { animation: none; } #vfStamp.on { animation: none; transform: translate(-50%, -50%) rotate(-9deg); opacity: .92; } .panel, .panel.on { transition: none; } #ticket.on .paper canvas, #theirs.on .paper canvas { animation: none; } .how .thumb { animation: none !important; } #swipe i { animation: none; } button.who.offer { animation: none; } #raceBox.came { animation: none; box-shadow: 0 0 0 3px #f2a900, 0 6px 18px #0006; } } /* ---------- HOME and MOUNTAIN RUN's routes (KC, 18 Oct 2026, OG-1127 to OG-1130: "C should be the main page and when you enter mountain run you get B") ---------- */ .nav { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; color: var(--paper); overflow: hidden; -webkit-user-select: none; user-select: none; } .nav[hidden] { display: none; } .nav button { cursor: pointer; } .nav-bg { position: absolute; inset: 0; z-index: -1; background: #3a2418 url(/src/home/bg-portrait.webp) center top / cover no-repeat; } .nav-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #1a121673 0%, #1a121600 14%, #1a121600 46%, #1a121680 72%); } #routes .nav-bg::after { background: linear-gradient(180deg, #1a1216b3 0%, #1a121666 30%, #1a121673 100%); } .home-top { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--top) + 12px) calc(var(--right) + 14px) 0 calc(var(--left) + 14px); } .home-mark { font: 900 26px/1 var(--big); letter-spacing: .04em; color: var(--paper); text-shadow: 0 2px 10px #0008; } .nav-chip { font: 900 14px/1 var(--big); letter-spacing: .1em; color: var(--ink); background: var(--paper); padding: 10px 12px 9px; border-radius: 3px; min-height: 36px; } #homeRecord { background: none; font-size: 24px; padding: 10px 0 8px 12px; min-height: 44px; } /* the stage: the car's own picture (sample C's road, the car painted into it, KC OG-1133), its foot behind the car's name, the sky giving way first on a short screen */ .home-stage { flex: 1 1 auto; min-height: 0; position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: #3a2418; touch-action: pan-y; } .home-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #1a121666 0%, #1a121600 16%, #1a121600 72%, #1a121680 100%); } #homeCar { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transition: opacity .2s ease; } #homeCar.locked { filter: saturate(.15) brightness(.62); } #homeCar.swap { opacity: 0; } .home-car { flex: 1 1 auto; min-height: 60px; } .nav-arrow { position: absolute; z-index: 2; top: 0; width: 48px; height: 48px; padding: 10px; background: none; } .nav-arrow svg { width: 100%; height: 100%; fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px #000a); } #carPrev { left: calc(var(--left) + 10px); } #carNext { right: calc(var(--right) + 10px); } .home-carname { position: relative; text-align: center; padding: 6px 60px 14px; text-shadow: 0 2px 8px #000a; } .home-carname b { display: block; font: 900 28px/1 var(--big); letter-spacing: .06em; } .home-carname small { display: block; margin-top: 5px; font: 700 12px/1.3 var(--lab); letter-spacing: .1em; color: #f1ebdcd9; text-wrap: balance; } .home-carname small em { font-style: normal; color: var(--signal); } .home-panel { background: var(--dusk); padding: 18px calc(var(--right) + 18px) calc(var(--bottom) + 10px) calc(var(--left) + 18px); text-align: center; } .home-panel h1 { margin: 0; font: 900 56px/.95 var(--big); letter-spacing: .02em; } #homeToday { margin: 6px 0 14px; font: 900 22px/1.1 var(--big); font-size: min(22px, 5.3vw); letter-spacing: .04em; } /* one line on a narrow phone: picking a mountain never moves the car (OG-1202) */ .home-runs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin: 0 auto 14px; } .home-run { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 900 17px/1 var(--big); letter-spacing: .05em; color: var(--ink); background: var(--paper); padding: 8px 4px 9px; min-height: 42px; border-radius: 12px; white-space: nowrap; } /* each chip draws its mountain's road above its name (KC, OG-1202) */ .home-run svg { display: block; width: 52px; height: 20px; } .home-run path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .home-run circle { display: none; } .home-run:active { transform: translateY(1px); } .home-run.on { background: var(--signal); box-shadow: 0 0 0 3px var(--paper); } /* the mountain picked (OG-1197) */ .nav-go { display: block; width: 100%; max-width: 420px; margin: 0 auto; background: var(--signal); color: var(--ink); font: 900 40px/1 var(--big); letter-spacing: .06em; padding: 18px 0 15px; border-radius: 4px; } .nav-go:active { transform: translateY(2px); } /* the games picked as the cars are (KC, OG-1163: "use the same system to change cars ... to change game modes"): ← its name → or a swipe; MOUNTAIN RUN in the middle, CURVE one to the left, DRIFT one to the right; the name's block keeps two lines' height so the panel never jumps */ .home-title { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; width: 100%; max-width: 460px; margin: 0 auto; } .home-title .nav-arrow { position: static; } .home-title h1 { font-size: clamp(40px, 13vw, 62px); line-height: .86; min-height: 1.72em; display: flex; align-items: center; justify-content: center; } .home-panel.swap > :not(.home-title) { opacity: 0; } .home-panel.swap h1 { opacity: 0; transform: translateX(var(--dx, 0)); } .home-panel > *, .home-panel h1 { transition: opacity .13s ease, transform .13s ease; } .home-modeline { grid-column: 1 / -1; margin: 0; min-height: 42px; display: flex; align-items: center; justify-content: center; font: 900 clamp(13px, 3.9vw, 16px)/1.2 var(--big); letter-spacing: .1em; color: #f1ebdcd9; } /* as tall as the runs' row */ .routes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px calc(var(--right) + 14px) 10px calc(var(--left) + 14px); padding: 11px 12px 9px; background: var(--paper); color: var(--ink); border-radius: 3px; } .routes-head b { font: 900 22px/1 var(--big); letter-spacing: .04em; } .routes-head small { font: 700 12px/1 var(--lab); letter-spacing: .12em; white-space: nowrap; } #routesList { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 4px calc(var(--right) + 14px) 6px calc(var(--left) + 14px); display: flex; flex-direction: column; gap: 10px; } .stub { position: relative; display: grid; grid-template-columns: 88px 1fr auto; align-items: center; column-gap: 14px; width: 100%; padding: 10px 12px; text-align: left; background: var(--paper); color: var(--ink); border-radius: 6px; -webkit-mask: radial-gradient(circle 7px at 64px 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at 64px 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 7px at 64px 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at 64px 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; } .stub::before { content: ''; position: absolute; left: 107px; top: 12px; bottom: 12px; border-left: 2px dashed #1f233040; } .stub svg { width: 88px; height: 71px; overflow: visible; } /* the mountain's shape, big (KC, OG-1166) */ .stub svg path { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } .stub svg circle { fill: var(--signal); stroke: var(--ink); stroke-width: 1.5; } .stub .t b { display: block; font: 900 16px/1.05 var(--big); letter-spacing: .03em; } .stub .t small { display: block; margin-top: 4px; font: 700 11px/1.25 var(--lab); letter-spacing: .08em; color: #1f2330b3; } .stub .st { font: 900 15px/1 var(--big); letter-spacing: .08em; padding: 6px 8px 5px; border: 2px solid currentColor; border-radius: 3px; transform: rotate(-5deg); white-space: nowrap; } .st.gold { color: #b67d00; } .st.silver { color: #6c7682; } .st.bronze { color: #a5532e; } .st.new { color: var(--stamp); } .st.time { border-color: #0000; transform: none; font: 800 14px/1 var(--dot); color: var(--ink); } .stub.next { padding: 14px 12px 12px; box-shadow: inset 0 0 0 3px var(--signal); } .stub .go { grid-column: 2 / 4; margin-top: 10px; padding: 11px 0 9px; text-align: center; background: var(--signal); color: var(--ink); font: 900 26px/1 var(--big); letter-spacing: .1em; border-radius: 3px; } /* the detours to CURVE and DRIFT went (KC, OG-1166: they have their own way in from HOME) */ /* the start line after HOME: its choices were made there; the way back */ #navBack { position: fixed; z-index: 6; left: calc(var(--left) + 12px); top: calc(var(--top) + 8px); display: none; } body.nav-ready.at-start:not(.paper-up):not(.racing) #hud .brand { visibility: hidden; } /* the way back takes the sticker's place; HOME carries the name */ body.nav-ready.at-start:not(.paper-up):not(.racing) #navBack:not([hidden]) { display: block; } body.nav-ready.at-start #modesTop, body.nav-ready.at-start #kindsTop, body.nav-ready.at-start #updownTop { display: none !important; } /* the cars stay on the start line too (KC, OG-1136: after START AGAIN "the option to change your car") */ @media (orientation: portrait) and (max-height: 700px) { .home-panel h1 { font-size: 42px; } .home-title h1 { font-size: clamp(40px, 12vw, 50px); } .nav-go { font-size: 32px; padding: 13px 0 11px; } #homeToday { margin: 4px 0 10px; font-size: 19px; } .home-panel { padding-top: 14px; } .home-runs { margin-bottom: 10px; } .home-run { font-size: 15px; padding: 6px 2px 7px; min-height: 38px; gap: 3px; } .home-run svg { width: 46px; height: 17px; } .home-carname b { font-size: 24px; } .stub .go { font-size: 22px; } .stub .t b { font-size: 15px; } } @media (orientation: landscape) and (max-height: 520px) { .nav-bg { background-image: url(/src/home/bg-wide.webp); background-position: center 40%; } #home .home-stage { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 58%; } /* above the panel: RECORD sits over its corner */ #home .home-carname { padding-bottom: calc(var(--bottom) + 8px); } #home .home-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; display: flex; flex-direction: column; justify-content: center; padding: 10px calc(var(--right) + 18px) 10px 18px; } #home .home-runs { width: 100%; margin-bottom: 10px; } .home-run { font-size: 14px; padding: 6px 2px 6px; min-height: 36px; gap: 3px; } .home-run svg { width: 42px; height: 15px; } #homeToday { font-size: 18px; margin-bottom: 10px; } .nav-go { font-size: 32px; padding: 12px 0 10px; } #homeRecord { position: fixed; right: calc(var(--right) + 14px); top: calc(var(--top) + 10px); z-index: 2; } .home-panel h1 { font-size: 40px; } .home-title h1 { font-size: 44px; } #routesList { display: grid; grid-template-columns: 1fr 1fr; align-content: start; } #routesList li.next { grid-column: 1 / 3; } .routes-head { margin-top: 8px; margin-bottom: 8px; } } /* a wide screen that is tall too (an iPad turned sideways, a computer's window: OG-1436) gets HOME side by side as a phone turned sideways does, the painting whole on the left, the menu on the right; its type keeps its full size */ @media (orientation: landscape) and (min-height: 521px) and (min-width: 760px) { .nav-bg { background-image: url(/src/home/bg-wide.webp); background-position: center 40%; } #home .home-stage { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 58%; } #home .home-carname { padding-bottom: calc(var(--bottom) + 12px); } #home .home-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; display: flex; flex-direction: column; justify-content: center; padding: 16px calc(var(--right) + 28px) 16px 28px; } #home .home-runs { width: 100%; } #home .home-panel h1 { font-size: clamp(38px, 4.4vw, 56px); } /* the menu is 42% of the window: its type follows */ #home .home-run { font-size: clamp(13px, 1.25vw, 16px); } #homeRecord { position: fixed; right: calc(var(--right) + 14px); top: calc(var(--top) + 10px); z-index: 2; } } /* a small wide window (an iPad's Split View or a shrunk window, under 760 px): HOME stays stacked, its short painting shows the car rather than the road under it */ @media (orientation: landscape) and (min-height: 521px) and (max-width: 759px) { #homeCar { object-position: center 72%; } } /* the race's 3-2-1 sweep (OG-1135): while the camera moves, the race's card steps up out of its way; the count stays */ #raceBox { transition: opacity .3s ease, transform .3s ease; } body.sweeping #raceBox { opacity: 0; transform: translate(-50%, -24px); pointer-events: none; } /* the slide chain (OG-1145): under PAUSE while a mountain run slides; the pop under it */ #chainBox { position: fixed; z-index: 4; right: calc(var(--right) + 12px); top: calc(var(--top) + 118px); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 7px; padding: 5px 9px 5px 5px; background: #1f2330e6; color: var(--paper); border-radius: 6px; pointer-events: none; } #chainBox[hidden] { display: none; } #chainX { grid-row: 1 / 3; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--signal); color: var(--signal); display: grid; place-items: center; font: 900 18px/1 var(--big); font-style: normal; } #chainNum { font: 900 28px/1 var(--big); letter-spacing: .02em; text-align: right; } #chainBox small { font: 700 10px/1 var(--lab); letter-spacing: .16em; color: #f1ebdcb3; text-align: right; } #chainPop { position: fixed; z-index: 4; right: calc(var(--right) + 12px); top: calc(var(--top) + 176px); transform: rotate(-3deg); pointer-events: none; text-align: right; font: 900 20px/1 var(--big); letter-spacing: .06em; color: var(--ink); background: var(--signal); padding: 6px 9px 4px; border-radius: 3px; } #chainPop[hidden] { display: none; } #chainPop small { display: block; font: 700 11px/1.1 var(--lab); letter-spacing: .1em; margin-top: 3px; } #chainPop.lost { background: var(--stamp); color: var(--paper); } #chainPop.pop { animation: chainPop .25s ease-out; } @keyframes chainPop { from { transform: rotate(-3deg) scale(1.35); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #chainPop.pop { animation: none; } } body.paper-up #chainBox, body.paper-up #chainPop { display: none; } @media (orientation: landscape) and (max-height: 520px) { #chainBox { top: calc(var(--top) + 60px); } #chainPop { top: calc(var(--top) + 116px); } } /* one thumb first (OG-1146): a newcomer's first climb shows GAS alone on the start line; past hairpin 1, the left thumb's card */ body.one-thumb #howto .how.steer { visibility: hidden; } #teachLeft { position: fixed; z-index: 4; left: calc(var(--left) + 14px); bottom: calc(var(--bottom) + 320px); width: 176px; box-sizing: border-box; padding: 9px 10px 10px; pointer-events: none; background: #1f2330eb; color: var(--paper); border-radius: 6px; border-left: 4px solid var(--signal); } #teachLeft[hidden] { display: none; } #teachLeft small { display: block; font: 700 11px/1.1 var(--lab); letter-spacing: .12em; } #teachLeft b { display: block; font: 900 24px/1 var(--big); letter-spacing: .05em; color: var(--signal); margin: 4px 0 7px; } #teachLeft i { display: block; height: 7px; background: #f1ebdc33; border-radius: 4px; overflow: hidden; } #teachLeft i span { display: block; height: 100%; width: 0; background: var(--signal); border-radius: 4px; transition: width .15s linear; } #teachLeft small:last-child { margin-top: 5px; color: #f1ebdcb3; } #teachLeft.done { border-left-color: #3fbf6b; } #teachLeft.done b { color: #6ee09a; } body.paper-up #teachLeft { display: none; } @media (orientation: landscape) and (max-height: 520px) { #teachLeft { bottom: auto; top: calc(var(--top) + 96px); left: calc(var(--left) + 118px); padding: 6px 9px 7px; width: 168px; } #teachLeft b { font-size: 19px; margin: 2px 0 5px; } #teachLeft small:last-child { margin-top: 3px; } } /* your car at the top (OG-1150): the shot's card high in the frame, the HUD out of the way; the whole screen a tap to skip */ #topShot { position: fixed; inset: 0; z-index: 8; display: flex; justify-content: center; align-items: flex-start; padding-top: calc(var(--top) + 54px); } #topShot[hidden] { display: none; } #topShot .card { background: #1f2330eb; color: var(--paper); border-radius: 8px; padding: 12px 26px 12px; text-align: center; border-bottom: 4px solid var(--signal); animation: topShotIn .35s ease-out; } #topShot b { display: block; font: 900 26px/1 var(--big); letter-spacing: .14em; color: var(--signal); } #topShot strong { display: block; font: 900 58px/1 var(--big); letter-spacing: .02em; margin-top: 4px; } #topShot em { display: block; font: 900 18px/1 var(--big); font-style: normal; letter-spacing: .2em; margin-top: 6px; } #topShot em:empty { display: none; } #topShot em.gold { color: #e8b400; } #topShot em.silver { color: #c9d1da; } #topShot em.bronze { color: #d98b5f; } @keyframes topShotIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } } body.topshot #hud, body.topshot .ring, body.topshot #chainBox, body.topshot #chainPop, body.topshot #teachLeft, body.topshot #hint, body.topshot #verdict, body.topshot #pauseBtn { visibility: hidden !important; } /* THE START LINE, KC's (OG-1166): ‹ RUNS left, RECORD in the middle, ⚙ right; HELP and the car behind ⚙; on the road only RACE A FRIEND LIVE, RACE THE COMPUTER and DRIFT SOLO. The studio's sticker went to HOME. */ body.nav-ready #studioBtn { display: none; } body.nav-ready.at-start.mount-on #recordBtn { display: none !important; } /* RUNS and RECORDS are one button, R & R (OG-1167) */ /* R & R (KC, OG-1167): the runs board and the driving record, one menu, switched at its top */ .rr-tabs { display: flex; margin: 2px calc(var(--right) + 14px) 10px calc(var(--left) + 14px); box-shadow: 0 2px 0 #0004; } .rr-tabs[hidden] { display: none; } .rr-tabs button { flex: 1; min-height: 46px; font: 900 18px/1 var(--big); letter-spacing: .12em; background: #1F2330; color: var(--paper); border: 0; padding: 12px 0 10px; } .rr-tabs button[aria-pressed="true"] { background: var(--signal); color: var(--ink); } .sheet .rr-tabs { margin: 0 0 12px; } #routes .rr-tabs { margin-top: calc(var(--top) + 12px); } /* the first thing on RUNS (OG-1302: no HOME, no name above it) */ #setBtn { pointer-events: auto; width: 44px; height: 44px; padding: 9px; background: var(--paper); box-shadow: 0 2px 0 #0004; display: none; } #setBtn svg { width: 100%; height: 100%; fill: var(--ink); } body.nav-ready.at-start:not(.paper-up):not(.in-run):not(.racing) #setBtn:not([hidden]) { display: block; } #soloTop { pointer-events: auto; width: min(72vw, 280px); margin: 6px auto 0; display: none; } body.mount-on.at-start:not(.paper-up):not(.racing) #soloTop:not([hidden]) { display: flex; } #soloBtn { flex: 1; min-height: 44px; background: var(--paper); color: var(--ink); font: 900 15px/1 var(--big); letter-spacing: .12em; border: 0; padding: 8px 6px 6px; } body.solo-go #raceTop, body.solo-go #cpuTop, body.solo-go #soloTop, body.solo-go #rivalTop { display: none !important; } #setBox { position: fixed; z-index: 7; top: calc(var(--top) + 60px); left: 50%; transform: translateX(-50%); width: min(94vw, 440px); box-sizing: border-box; background: #1F2330; color: var(--paper); padding: 6px 10px 12px; box-shadow: 0 10px 30px #000a; pointer-events: auto; } #setBox[hidden] { display: none; } #setMain { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1ebdc33; } #setMain[hidden] { display: none; } #setMain button { width: 100%; min-height: 48px; font: 900 20px/1 var(--big); letter-spacing: .12em; background: transparent; color: var(--paper); border: 0; box-shadow: inset 0 0 0 2px var(--paper); padding: 12px 0 10px; } #setBox .rhead { display: flex; justify-content: space-between; align-items: center; font: 900 13px/1 var(--big); letter-spacing: .16em; color: #f1ebdcaa; margin: 0 2px 6px; } #setClose { background: none; color: var(--paper); font-size: 22px; min-width: 44px; min-height: 44px; } #setBox #guestTop { width: 100%; margin-left: 0; margin-right: 0; } #setBox #guestTop { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; } #setBox #guestTop[hidden] { display: none !important; } #setBox #guestTop span { grid-column: 1 / -1; width: auto; background: transparent; padding: 0 2px; justify-content: flex-start; font: 900 11px/1 var(--big); letter-spacing: .16em; } #setBox #guestTop span br { display: none; } #setBox #guestTop button { background: #f1ebdc10; box-shadow: inset 0 0 0 2px #f1ebdc55; padding: 2px 2px 8px; } #setBox #guestTop button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 2px var(--c); } #setBox #helpTop, #setBox #carTop, #setBox #carSay { width: 100%; margin-left: 0; margin-right: 0; } #setBox #setBody button { flex: 1; justify-content: center; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); padding: 7px 2px 5px; } #setBox #setBody button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } #setBox #helpTop { margin-top: 10px; } #setBox #helpTop span { background: transparent; padding-left: 2px; } #setBox #helpTop button { font: 900 14px/1 var(--big); letter-spacing: .12em; min-height: 40px; } #setBox #carTop { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 4px; } /* MOUNTAIN RUN's wheel in the ⚙ (OG-1381): in place of the CAR row; its cars are pictures, not the box's plain buttons */ #setBox #setBody:has(#mountCar:not([hidden])) #carTop { display: none !important; } #setBox #mountCar.wheel { --D: min(330px, 82vw); } #setBox #setBody #mountCar.wheel button { flex: none; justify-content: flex-start; padding: 0; box-shadow: none; background-color: var(--ink); background-size: cover; background-position: center 40%; } #setBox #setBody #mountCar.wheel button.locked { filter: grayscale(.9) brightness(.5); border-color: #F1EBDC66; } #setBox #setBody #mountCar.wheel button[aria-pressed="true"] { border-color: var(--signal); } /* sideways (OG-1381): the box scrolls, and the wheel fits beside the top of it */ @media (orientation: landscape) and (max-height: 520px) { #setBox { max-height: calc(100vh - var(--top) - 72px); overflow-y: auto; overscroll-behavior: contain; } #setBox:has(#mountCar:not([hidden])) { width: min(94vw, 680px); } #setBox #setBody:has(#mountCar:not([hidden])) { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: start; } #setBox #setBody:has(#mountCar:not([hidden])) > :not(#mountCar) { grid-column: 1; } #setBox #mountCar.wheel { grid-column: 2; grid-row: 1 / span 4; --D: min(240px, calc(100vh - 200px)); margin: 4px 0 0; } } #setBox #carTop[hidden] { display: none !important; } /* hidden with HELP, as the guests' row is (a newcomer's first climb) */ #setBox #carTop > span { grid-column: 1 / -1; background: transparent; padding: 0 2px 0; justify-content: flex-start; color: #f1ebdcaa; font: 900 11px/1 var(--big); letter-spacing: .16em; } #setBox #carTop button { flex-direction: column; font: 900 11px/1 var(--big); letter-spacing: .03em; background: #f1ebdc10; box-shadow: inset 0 0 0 2px #f1ebdc55; padding: 2px 2px 9px; } #setBox #carTop button img { width: 100%; max-width: 76px; height: auto; aspect-ratio: 1; margin: 0 0 -2px; } #setBox #carTop button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 2px var(--c); } #setBox #carSay { background: transparent; margin-top: 7px; padding: 0 2px; } /* HOME's top (KC, OG-1167): the studio's logo left, a settings cog right (sound, vibration, your name, your records) */ .home-studio { display: flex; flex-direction: column; align-items: center; background: #FEF8EC; padding: 6px 8px 5px; box-shadow: 0 2px 0 #0004; text-decoration: none; } .home-studio img { display: block; height: 30px; width: auto; } .home-studio b { margin-top: 3px; font: 900 15px/1 var(--big); letter-spacing: .16em; color: var(--ink); } /* the game's name under the studio's (KC, OG-1169) */ .home-cog { width: 44px; height: 44px; padding: 9px; background: var(--paper); box-shadow: 0 2px 0 #0004; } /* the GARAGE on HOME (OG-1354): beside the cog, your coins on it */ .home-right { display: flex; gap: 8px; align-items: center; } .home-garage { height: 44px; padding: 0 12px; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 #0004; display: flex; align-items: center; gap: 6px; font: 900 18px/1 var(--big); letter-spacing: .08em; white-space: nowrap; } .home-garage .coin { font-size: 17px; } .home-garage b { font: inherit; letter-spacing: .02em; } /* the garage and the shop open over HOME too, under a toast */ body #garage { z-index: 41; } body #ownCar { z-index: 42; } body .spage { z-index: 42; } body #packs { z-index: 43; } body #ownLoad { z-index: 44; } .home-cog svg { width: 100%; height: 100%; fill: var(--ink); } #setBox { z-index: 45; } /* over HOME and the runs board too */ #record.on, #nameSheet.on, #boardSheet.on { z-index: 40; } /* the sheets HOME's cog and R & R open, over HOME and the runs board (not the ticket: a card comes up over it) */ #toast { z-index: 46; } /* a toast over those sheets: "your link is copied", "thanks, three reports hide a name" */ #setHome[hidden], #setBody[hidden] { display: none; } .setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border-top: 1px solid #f1ebdc26; } .setrow span { font: 900 15px/1 var(--big); letter-spacing: .14em; color: #f1ebdcd9; } .setrow button { min-height: 44px; min-width: 76px; padding: 10px 12px 8px; font: 900 15px/1 var(--big); letter-spacing: .12em; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); } .setrow button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } #setName { display: flex; gap: 10px; align-items: center; max-width: 64%; } #setName b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #setName i { font-style: normal; color: var(--signal); } .setwide { display: block; width: 100%; margin-top: 8px; min-height: 48px; font: 900 17px/1 var(--big); letter-spacing: .12em; background: var(--signal); color: var(--ink); border: 0; } .rr-tabs { position: relative; z-index: 2; } /* CURVE and DRIFT's screen (KC, 21 Oct 2026, OG-1189 to OG-1212: "remove everything except the speed"; "the speed in kilometres on the left-hand side, the bar in the middle and the settings on the right"; "as minimalist as possible ... the amount of gas, the number of curves, the speed"): one row along the top, on the start line and in the run: the speed at the left, its bar in the middle, ⚙ at the right. On the start line ⚙ holds your car, MAIN MENU and your records; in the run it pauses: RESUME, START AGAIN, MAIN MENU, the car for START AGAIN, your records. In the run, under the speed, only the curve you're on. No sticker, no road name, no way-back chip: MAIN MENU is behind ⚙. The mountains keep their own (R & R, ⚙ with HELP and the car, PAUSE). */ body.long-on:not(.mount-on) .brand, body.long-on:not(.mount-on) #curveName { display: none !important; } body.nav-ready.at-start:not(.mount-on) #navBack, body.at-start.long-on:not(.mount-on) #recordBtn, body.at-start.long-on:not(.mount-on) #roadHud, body.long-on:not(.mount-on) #limit { display: none !important; } body.long-on:not(.mount-on):not(.paper-up) .gauge { transform: none; transition: none; position: absolute; left: calc(var(--left) + 12px); top: 0; margin: 0; text-align: left; } body.long-on:not(.mount-on) #speed { font-size: 72px; } body.long-on:not(.mount-on) .gauge > small { margin-top: 0; } body.long-on:not(.mount-on) #window { position: absolute; left: 124px; top: 26px; width: min(calc(100vw - 216px - var(--left) - var(--right)), 460px); margin: 0; } body.long-on:not(.mount-on) #roadHud { left: 0; top: 96px; } body.long-on:not(.mount-on) #hud { padding-top: 104px; } /* the start line's buttons (DRIFT BATTLE, SOLO) under the row */ /* ⚙ at the right: on the start line the settings button, in the run the pause, as a cog (the mountain's says PAUSE) */ #pauseBtn .pcog { display: none; width: 24px; height: 24px; fill: currentColor; } body.long-on:not(.mount-on) #pauseBtn { min-width: 44px; padding: 0; display: none; align-items: center; justify-content: center; } body.in-run.long-on:not(.mount-on) #pauseBtn { display: flex; } body.long-on:not(.mount-on) #pauseBtn .pw { display: none; } body.long-on:not(.mount-on) #pauseBtn .pcog { display: block; } @media (orientation: landscape) and (max-height: 520px) { body.long-on:not(.mount-on) #speed { font-size: 60px; } body.long-on:not(.mount-on) #window { left: 104px; top: 22px; } body.long-on:not(.mount-on) #roadHud { top: 80px; } body.long-on:not(.mount-on) #hud { padding-top: 84px; } } @media (prefers-reduced-motion: reduce) { .gauge { transition: none; } } /* THE DRIFT BATTLE (KC, OG-1182 to OG-1189): on DRIFT's start line, DRIFT BATTLE · A FRIEND and SOLO, as a mountain's race buttons; in the battle its line sits under the bend's line (the speed has DRIFT's top): the points between you big, amber ahead and red behind, then who it's against */ body.rdrift-on.at-start:not(.paper-up):not(.racing) #raceTop:not([hidden]), body.rdrift-on.at-start:not(.paper-up):not(.racing) #soloTop:not([hidden]) { display: flex; } /* the battle on DRIFT's road with the speed's row along the top (OG-1210): the chain under PAUSE as before, the points between you in the middle under the row, clear of CURVE n/N at the left and the chain's pop at the right */ body.rdrift-on #raceStrip { top: calc(var(--top) + 172px); } @media (orientation: landscape) and (max-height: 520px) { body.rdrift-on #raceStrip { top: calc(var(--top) + 64px); } } #raceStrip b { font: 900 22px/1 var(--big); letter-spacing: .02em; margin-right: 4px; vertical-align: -2px; } #raceStrip b.ahead { color: var(--signal); } #raceStrip b.behind { color: #ff7a8a; } #raceLine { white-space: pre-line; } /* a drift battle's verdict: who out-drifted whom, then the score (OG-1190) */ body.rdrift-on #chainBox { top: calc(var(--top) + 62px); } /* under PAUSE, clear of DRIFT's bend line (OG-1190) */ body.rdrift-on #chainPop { top: calc(var(--top) + 116px); } /* a drift battle's car (OG-1193): one car for both, whose pick it is; the picker turns it with ‹ › */ #battleCar { align-items: center; gap: 8px; margin: 0 0 8px; } #battleCar[hidden] { display: none; } #battleCar span { font: 900 11px/1 var(--big); letter-spacing: .16em; color: #f1ebdcaa; } #battleCar b { font: 900 18px/1 var(--big); letter-spacing: .08em; color: var(--paper); min-width: 96px; text-align: center; } #battleCar small { font: 700 12px/1 var(--lab); letter-spacing: .1em; color: var(--signal); margin-left: auto; } #raceBox #raceSetup #battleCar button { flex: 0 0 44px; min-height: 44px; font: 900 22px/1 var(--big); padding: 0; } #raceBox #raceSetup #battleCar button[hidden] { display: none; } /* ---- THE GARAGE and its coins (KC, OG-1307 to OG-1319): the picture KC said yes to (OG-1318) ---- */ /* the studio coin (KC, 26 Oct 2026, GL-457: every game's coins are the gold coin with the red fez; look-and-sound) */ .coin { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; background: url(/src/coin/studio-coin.webp) center / contain no-repeat; filter: drop-shadow(0 1px 1px #0005); } #coinChip { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 6px; /* beside the slide score: under it the +LINK pop would cover it */ display: flex; align-items: center; gap: 6px; background: #1F2330e6; padding: 5px 9px 4px 6px; font: 900 24px/1 var(--big); color: var(--paper); } #coinChip[hidden] { display: none; } #coinChip.ping { animation: coinPing .35s ease-out; } @keyframes coinPing { 0% { transform: translateY(-50%) scale(1.25); } 100% { transform: translateY(-50%) scale(1); } } #coinFly { position: fixed; inset: 0; pointer-events: none; z-index: 5; } #coinFly .coin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; transition: transform .7s cubic-bezier(.3, .1, .5, 1), opacity .7s; } #coinFly .coin.up { opacity: .9; } #coinFly b { position: absolute; font: 900 20px/1 var(--big); color: #F6C431; text-shadow: 0 2px 0 #1F2330, 0 0 6px #000a; transform: translate(-10px, -40px); transition: opacity .6s .2s; } .garageBtn { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; margin: 0 0 10px; padding: 10px 12px 8px; font: 900 20px/1 var(--big); letter-spacing: .1em; background: var(--signal); color: var(--ink); border: 0; } .garageBtn span { display: flex; align-items: center; gap: 6px; letter-spacing: .02em; } #pauseGarage { background: var(--signal); color: var(--ink); } #garage { position: fixed; inset: 0; z-index: 8; background: linear-gradient(180deg, #2a2f40 0%, #1F2330 58%); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: calc(var(--top) + 14px) calc(var(--right) + 16px) calc(var(--bottom) + 16px) calc(var(--left) + 16px); box-sizing: border-box; pointer-events: auto; } #garage[hidden] { display: none; } #garage .ghead { display: flex; align-items: center; gap: 10px; } #garage h2 { margin: 0 auto 0 0; font: 900 40px/1 var(--big); letter-spacing: .06em; } #garage .gcoins { display: flex; align-items: center; gap: 7px; font: 900 26px/1 var(--big); background: #f1ebdc14; padding: 6px 10px 5px 7px; } #garageClose { min-width: 44px; min-height: 44px; font: 400 30px/1 sans-serif; background: transparent; color: var(--paper); border: 0; } #garage .gcars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 10px; } #garage .gcars button { height: 48px; padding: 0; border: 0; background: #f1ebdc12; box-shadow: inset 0 0 0 2px #f1ebdc33; display: grid; place-items: center; } #garage .gcars button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--signal); background: #f1ebdc22; } #garage .gcars button:disabled { opacity: .35; } #garage .gcars img { width: 100%; max-width: 54px; } #garage .gstage { position: relative; height: min(38vh, 310px); margin: 4px -16px 0; /* the showroom (OG-1412): HOME's empty canyon road behind the turntable, fading into the garage's navy above and below */ background: linear-gradient(#282d3e 0%, #282d3e00 24%, #22263800 74%, #222638 100%), radial-gradient(36% 7% at 50% 62%, #140804c0, #14080400), url(/src/home/bg-wide.webp) center 58% / cover no-repeat; } #garage .gstage canvas { width: 100%; height: 100%; display: block; } #garage .gstage p { position: absolute; left: 16px; right: 16px; bottom: 2px; margin: 0; font: 900 21px/1 var(--big); letter-spacing: .08em; } #garage .gtabs { display: flex; margin-top: 8px; } #garage .gtabs button { flex: 1; min-height: 44px; border: 0; background: #f1ebdc12; color: var(--paper); font: 900 17px/1 var(--big); letter-spacing: .1em; } #garage .gtabs button[aria-pressed="true"] { background: var(--signal); color: var(--ink); } #garage .gsw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 14px 0 6px; } #garage .gsw button { position: relative; height: 54px; border: 0; border-radius: 4px; box-shadow: inset 0 -8px 0 #0002; padding: 0; } #garage .gsw button[aria-pressed="true"] { outline: 3px solid var(--paper); outline-offset: 2px; } #garage .gsw button.own { background: repeating-linear-gradient(135deg, #f1ebdc22 0 6px, #f1ebdc11 6px 12px); box-shadow: inset 0 0 0 2px #f1ebdc55; } #garage .gsw small { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 900 12px/1 var(--big); color: #fff; text-shadow: 0 1px 2px #000; } #garage .gsw small .coin { font-size: 11px; margin-left: 2px; } #garage .gsw b { position: absolute; right: 4px; top: 3px; font: 900 15px/1 var(--big); color: #fff; text-shadow: 0 1px 2px #000; } #garage .gbuy { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 10px; border: 0; background: var(--signal); color: var(--ink); font: 900 25px/1 var(--big); letter-spacing: .08em; padding: 12px 6px 10px; } #garage .gbuy.done, #garage .gbuy:disabled { background: #f1ebdc22; color: var(--paper); } #garage .gnote { margin: 10px 0 0; text-align: center; font: 700 13px/1.3 var(--lab); color: #f1ebdcaa; } /* held sideways: the car on the left, the choices beside it, all on one screen */ @media (orientation: landscape) and (max-height: 520px) { #garage { display: grid; grid-template-columns: 44% 1fr; column-gap: 16px; align-content: start; grid-template-areas: "head head" "stage cars" "stage tabs" "stage sw" "stage buy" "stage note"; padding-top: calc(var(--top) + 8px); } #garage .ghead { grid-area: head; } #garage .gcars { grid-area: cars; margin-top: 4px; } #garage .gtabs { grid-area: tabs; margin-top: 6px; } #garage .gsw { grid-area: sw; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 8px 0 2px; } #garage .gsw button { height: 42px; } #garage .gsw small { font-size: 10px; } #garage .gbuy { grid-area: buy; min-height: 46px; font-size: 21px; margin-top: 6px; } #garage .gnote { grid-area: note; margin-top: 6px; } #garage .gstage { grid-area: stage; height: auto; min-height: 220px; margin: 0; } #garage h2 { font-size: 32px; } } /* ---- THE SHOWROOM (KC, 29 Oct 2026, OG-1536: "Yes, the showroom as drawn"; previews/ote-players-showroom) ---- */ /* the garage's three parts: YOUR CARS, SHOWROOM, LOOKS (the dresser above, as before) */ #garage .gviews { display: flex; gap: 6px; margin-top: 12px; } #garage .gviews button { flex: 1; min-height: 44px; border: 0; background: #f1ebdc10; color: var(--paper); font: 900 16px/1 var(--big); letter-spacing: .08em; padding: 0 2px; } #garage .gviews button[aria-pressed="true"] { background: var(--signal); color: var(--ink); } #garage:not(.gv-looks) .glook { display: none !important; } #garage .gmine[hidden], #garage .gshow[hidden] { display: none; } #garage .ssorts { display: flex; gap: 6px; margin: 10px 0 10px; overflow-x: auto; scrollbar-width: none; } #garage .ssorts::-webkit-scrollbar { display: none; } #garage .ssorts button { flex: none; min-height: 44px; padding: 0 9px; border: 0; background: transparent; color: #f1ebdccc; box-shadow: inset 0 0 0 2px #f1ebdc33; font: 700 13px/1 var(--lab); letter-spacing: .08em; } #garage .ssorts button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--signal); color: var(--signal); } .sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .scard { display: block; width: 100%; text-align: left; border: 0; background: #f1ebdc0d; box-shadow: inset 0 0 0 2px #f1ebdc1c; padding: 6px 6px 8px; color: var(--paper); font: inherit; } .scard img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; background: #2a2f40; } .scard b { display: block; font: 900 17px/1.05 var(--big); letter-spacing: .05em; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scard > span { display: block; font: 700 12px/1.2 var(--lab); letter-spacing: .06em; color: #f1ebdcaa; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scard .srow { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font: 900 15px/1 var(--big); letter-spacing: .04em; } .scard .srow em { font-style: normal; color: #ff7a8a; } .sprice { display: inline-flex; align-items: center; gap: 3px; color: var(--signal); } .sprice .coin { font-size: 15px; } .scard .syours { color: var(--go, #53d769); } .shint { font: 700 12px/1.4 var(--lab); letter-spacing: .06em; color: #f1ebdc99; margin: 12px 0 0; text-transform: uppercase; } .shint.scenter { text-align: center; } .sempty { grid-column: 1 / -1; font: 700 14px/1.4 var(--lab); letter-spacing: .05em; color: #f1ebdcbb; text-transform: uppercase; padding: 20px 6px; text-align: center; box-shadow: inset 0 0 0 2px #f1ebdc1c; } .sblocked { margin-top: 18px; } .sblocked p { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 0; font: 700 12px/1.3 var(--lab); letter-spacing: .06em; color: #f1ebdc77; text-transform: uppercase; } .sblocked button, .ssmall button { border: 0; background: transparent; color: #f1ebdc99; font: 700 12px/1 var(--lab); letter-spacing: .08em; padding: 10px 0; min-height: 44px; text-decoration: underline; text-decoration-color: #f1ebdc55; text-underline-offset: 3px; text-decoration-thickness: 2px; } /* YOUR CARS: a row a car (yours, or a copy you got) */ .gmine .smine { width: 100%; border: 0; color: var(--paper); text-align: left; font: inherit; } .gmine .sown { width: 100%; margin-top: 12px; } .smine { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px; background: #f1ebdc0d; box-shadow: inset 3px 0 0 var(--go, #53d769); box-sizing: border-box; } .smine.copy { box-shadow: inset 3px 0 0 var(--signal); } .smine img { width: 130px; height: 80px; object-fit: cover; border-radius: 3px; flex: none; background: #2a2f40; } .smine b { display: block; font: 900 22px/1.05 var(--big); letter-spacing: .05em; } .smine span { display: block; font: 700 12px/1.3 var(--lab); letter-spacing: .06em; color: #f1ebdcaa; margin-top: 3px; text-transform: uppercase; } .smine i.go { margin-left: auto; font: 900 24px/1 var(--big); font-style: normal; color: #f1ebdc66; } /* a car's page and the maker's side: over the garage, like the coin packs */ .spage { position: fixed; inset: 0; z-index: 42; background: linear-gradient(180deg, #2a2f40 0%, #1F2330 58%); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: calc(var(--top) + 14px) calc(var(--right) + 16px) calc(var(--bottom) + 18px) calc(var(--left) + 16px); box-sizing: border-box; pointer-events: auto; } .spage[hidden] { display: none; } .spage .ghead { display: flex; align-items: center; gap: 10px; } .spage h2 { margin: 0 auto 0 0; font: 900 40px/1 var(--big); letter-spacing: .05em; } .spage .gcoins { display: flex; align-items: center; gap: 7px; font: 900 26px/1 var(--big); background: #f1ebdc14; padding: 6px 10px 5px 7px; } .spage .sclose { min-width: 44px; min-height: 44px; font: 400 30px/1 sans-serif; background: transparent; color: var(--paper); border: 0; } .sbig { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-top: 12px; background: #2a2f40; } .sname { margin: 14px 0 4px; font: 900 34px/1 var(--big); letter-spacing: .05em; } .sby { margin: 0; font: 700 14px/1.35 var(--lab); letter-spacing: .08em; color: #f1ebdcaa; text-transform: uppercase; } .sby b { color: var(--paper); } .sacts { display: flex; gap: 8px; margin-top: 14px; } .sacts button { flex: 1; min-height: 48px; border: 0; background: #f1ebdc10; color: #f1ebdccc; font: 900 19px/1 var(--big); letter-spacing: .06em; } .sacts .slike { box-shadow: inset 0 0 0 2px #ff7a8a; color: #ff9aa6; } .sacts .slike[aria-pressed="true"] { background: #ff7a8a; color: var(--ink); } .sacts .snope[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #f1ebdccc; color: var(--paper); background: #f1ebdc22; } .sacts button:disabled { opacity: .45; } .sget { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 58px; margin-top: 16px; border: 0; background: var(--signal); color: var(--ink); font: 900 26px/1 var(--big); letter-spacing: .08em; padding: 12px 6px 10px; } .sget .coin { font-size: 26px; } .sget.done, .sget:disabled { background: #f1ebdc22; color: var(--paper); } .ssmall { display: flex; justify-content: space-between; margin-top: 8px; } .ssmall[hidden] { display: none; } .spage .smine { margin-top: 12px; } .sstat { display: flex; gap: 8px; margin-top: 10px; } .sstat div { flex: 1; padding: 12px 6px 10px; background: #f1ebdc0d; text-align: center; } .sstat b { display: block; font: 900 30px/1 var(--big); color: var(--signal); } .sstat span { display: block; font: 700 12px/1.1 var(--lab); letter-spacing: .08em; color: #f1ebdcaa; margin-top: 5px; } .sk { font: 700 13px/1 var(--lab); letter-spacing: .16em; color: var(--signal); margin: 20px 0 8px; } .stog { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 700 14px/1.3 var(--lab); letter-spacing: .06em; color: #f1ebdccc; text-transform: uppercase; } .stog button { flex: none; min-width: 64px; min-height: 44px; border: 0; background: #f1ebdc22; color: var(--paper); font: 900 20px/1 var(--big); letter-spacing: .06em; } .stog button[aria-pressed="true"] { background: var(--signal); color: var(--ink); } .stog button:disabled { opacity: .45; } .mname { display: flex; gap: 8px; margin-top: 10px; } .mname[hidden] { display: none; } .mname input { flex: 1; min-width: 0; min-height: 46px; box-sizing: border-box; border: 0; background: var(--paper); color: var(--ink); font: 900 22px/1 var(--big); letter-spacing: .06em; text-transform: uppercase; padding: 0 10px; user-select: text; -webkit-user-select: text; } .mname button { min-height: 46px; border: 0; background: var(--signal); color: var(--ink); font: 900 20px/1 var(--big); letter-spacing: .08em; padding: 0 14px; } .stiers { display: flex; gap: 6px; } .stiers button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 48px; border: 0; background: #f1ebdc10; color: var(--paper); font: 900 20px/1 var(--big); } .stiers button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--signal); color: var(--signal); } .stiers .coin { font-size: 18px; } /* the garage's head on an upright phone (OG-1536): GARAGE, the coins, + COINS and ✕ fit at 390 with four-figure coins and at 360 (before, ✕ ran 10 px off a 390 screen and 40 px off a 360 one); the showroom's pages' heads likewise */ @media (orientation: portrait) and (max-width: 400px) { #garage .ghead, .spage .ghead { gap: 8px; } #garage h2, .spage h2 { font-size: 34px; } #garage .gcoins, .spage .gcoins { font-size: 22px; padding: 5px 8px 4px 6px; gap: 5px; } #garage .gplus { font-size: 15px; padding: 8px 8px 6px; } } @media (orientation: portrait) and (max-width: 370px) { #garage .ghead, .spage .ghead { gap: 6px; } #garage h2, .spage h2 { font-size: 30px; } } /* held sideways: the grid four across; a car's page and the maker's side with the picture on the left */ @media (orientation: landscape) and (max-height: 520px) { #garage:not(.gv-looks):not([hidden]) { display: block; } #garage .gviews { grid-area: views; margin-top: 8px; } #garage.gv-looks { grid-template-areas: "head head" "views views" "stage cars" "stage tabs" "stage sw" "stage buy" "stage note"; } .sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .spage { display: grid; grid-template-columns: 44% 1fr; column-gap: 18px; align-content: start; grid-template-areas: "head head" "pic info"; padding-top: calc(var(--top) + 8px); } .spage[hidden] { display: none; } .spage .ghead { grid-area: head; } .spage h2 { font-size: 32px; } .spage .sbig, .spage .smine { grid-area: pic; align-self: start; } .spage .sinfo { grid-area: info; } .spage .sname { margin-top: 10px; } #sMine .smine { flex-direction: column; align-items: stretch; } #sMine .smine img { width: 100%; height: auto; aspect-ratio: 16 / 10; } } /* ---- YOUR OWN CAR (KC, OG-1307 to OG-1325) ---- */ #garage .gown { width: 100%; min-height: 46px; margin-top: 8px; border: 0; background: transparent; color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); font: 900 18px/1 var(--big); letter-spacing: .1em; display: flex; justify-content: center; gap: 10px; align-items: center; } #ownCar { position: fixed; inset: 0; z-index: 9; background: linear-gradient(180deg, #2a2f40 0%, #1F2330 58%); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: calc(var(--top) + 14px) calc(var(--right) + 16px) calc(var(--bottom) + 18px) calc(var(--left) + 16px); box-sizing: border-box; pointer-events: auto; } #ownCar[hidden] { display: none; } /* THE COIN PACKS (OG-1415): + COINS by the garage's coins opens them, over the garage like YOUR OWN CAR */ #gSw button.gmetal { background-image: linear-gradient(135deg, #ffffff70 0%, #ffffff00 42%, #0000004d 100%) !important; } #gSw button.gpack small { color: var(--ink); background: var(--signal); padding: 2px 5px 1px; } .gplus { flex: none; min-height: 40px; background: var(--signal); color: var(--ink); font: 900 17px/1 var(--big); letter-spacing: .06em; padding: 8px 10px 6px; border: 0; } #packs { position: fixed; inset: 0; z-index: 43; background: linear-gradient(180deg, #2a2f40 0%, #1F2330 58%); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: calc(var(--top) + 14px) calc(var(--right) + 16px) calc(var(--bottom) + 18px) calc(var(--left) + 16px); box-sizing: border-box; pointer-events: auto; } #packs[hidden] { display: none; } #packs .ghead { display: flex; align-items: center; gap: 10px; } #packs h2 { margin: 0 auto 0 0; font: 900 40px/1 var(--big); letter-spacing: .03em; } #packs .gcoins { display: flex; align-items: center; gap: 7px; font: 900 26px/1 var(--big); background: #f1ebdc14; padding: 6px 10px 5px 7px; } #packsClose { min-width: 44px; min-height: 44px; font: 400 30px/1 sans-serif; background: transparent; color: var(--paper); border: 0; } #packs .psub { font: 600 15px/1.35 var(--lab); color: #f1ebdcbb; margin: 8px 0 14px; max-width: 520px; } #packList { display: grid; gap: 12px; max-width: 520px; } .ptier { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 12px; box-shadow: inset 0 0 0 2px #F1EBDC55; background: #1F2330; } .ptier.mid { box-shadow: inset 0 0 0 3px var(--signal); } .ptier img { width: 112px; height: 70px; object-fit: cover; display: block; } .ptier b { font: 900 26px/1 var(--big); letter-spacing: .04em; display: block; } .ptier .pcoins { font: 900 20px/1.1 var(--big); color: var(--signal); margin-top: 4px; display: flex; align-items: center; gap: 6px; } .ptier .pgets { font: 600 14px/1.3 var(--lab); margin-top: 4px; } .ptier button { grid-column: 1 / -1; min-height: 48px; background: var(--paper); color: var(--ink); font: 900 22px/1 var(--big); letter-spacing: .06em; border: 0; } .ptier.mid button { background: var(--signal); } .ptier button:disabled { opacity: .55; } #packs .pfine { font: 600 13px/1.4 var(--lab); color: #f1ebdcaa; text-align: center; margin: 12px auto 0; max-width: 520px; } @media (orientation: landscape) and (max-height: 520px) { #packList { grid-template-columns: repeat(3, 1fr); max-width: none; } .ptier { grid-template-columns: 1fr; } .ptier img { width: 100%; height: 90px; } #packs .psub, #packs .pfine { max-width: none; } } #ownCar .ghead { display: flex; align-items: center; gap: 10px; } #ownCar h2 { margin: 0 auto 0 0; font: 900 32px/1 var(--big); letter-spacing: .05em; } #ownCar .oprice { color: var(--signal); } #ownClose { min-width: 44px; min-height: 44px; font: 400 30px/1 sans-serif; background: transparent; color: var(--paper); border: 0; } #ownCar .osub { font: 700 15px/1.3 var(--lab); color: #f1ebdcbb; margin: 6px 0 4px; } #ownCar .olab { display: flex; justify-content: space-between; font: 900 13px/1 var(--big); letter-spacing: .16em; color: #f1ebdcaa; margin: 16px 0 8px; } #ownCar .olab small { font: inherit; color: var(--signal); letter-spacing: .12em; } /* KC's example, one whole screen a page (OG-1326): each snaps into place as it's swiped, never half of the next */ #ownCar .opages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; scroll-behavior: smooth; } #ownCar .opages::-webkit-scrollbar { display: none; } #ownCar .opages figure { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; margin: 0; display: flex; flex-direction: column; align-items: center; } #ownCar .opages img { display: block; height: min(58vh, 520px); width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 6px 20px #0008, 0 0 0 2px #f1ebdc22; } #ownCar .opages figcaption { margin-top: 10px; max-width: 320px; text-align: center; font: 700 15px/1.3 var(--lab); color: var(--paper); } #ownCar .odots { display: flex; justify-content: center; gap: 4px; margin-top: 8px; } #ownCar .odots button { width: 32px; height: 32px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; } #ownCar .odots button::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f1ebdc44; } #ownCar .odots button[aria-pressed="true"]::after { background: var(--signal); } #ownText { width: 100%; box-sizing: border-box; background: var(--paper); color: var(--ink); border: 0; font: 500 17px/1.3 var(--lab); padding: 10px 12px; resize: none; } #ownCar .obase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } #ownCar .obase button { border: 0; background: #f1ebdc12; box-shadow: inset 0 0 0 2px #f1ebdc33; color: var(--paper); padding: 4px 0 7px; font: 900 13px/1 var(--big); letter-spacing: .06em; } #ownCar .obase button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--signal); } #ownCar .obase img { width: 80%; display: block; margin: 0 auto 3px; } #ownCar .orule { font: 700 14px/1.35 var(--lab); background: #f1ebdc14; border-left: 5px solid var(--signal); padding: 10px 12px; margin: 16px 0 0; } #ownCar .gbuy { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 54px; margin-top: 14px; border: 0; background: var(--signal); color: var(--ink); font: 900 24px/1 var(--big); letter-spacing: .06em; padding: 12px 6px 10px; } #ownCar .gbuy:disabled { background: #f1ebdc22; color: var(--paper); } #ownCar .gnote { margin: 10px 0 0; text-align: center; font: 700 13px/1.3 var(--lab); color: #f1ebdcaa; } /* your orders (OG-1333): on top of the shop, each a card: its designs to pick from, the car being made, the car made */ #ownCar .oorders { margin: 12px 0 18px; } #ownCar .oorder { background: #f1ebdc12; padding: 12px 12px 14px; margin-top: 8px; font: 700 14px/1.3 var(--lab); } #ownCar .oorder > b { display: block; font: 900 20px/1 var(--big); letter-spacing: .08em; color: var(--signal); margin-bottom: 6px; } #ownCar .oorder.picking > b, #ownCar .oorder.done > b { font-size: 24px; } #ownCar .owords { margin: 2px 0; color: #f1ebdccc; } #ownCar .ohint { margin: 8px 0 0; font: 900 13px/1.3 var(--big); letter-spacing: .1em; color: #f1ebdcaa; } #ownCar .odesigns { margin-top: 8px; } #ownCar .oround { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } #ownCar .oround.now { grid-template-columns: 1fr; gap: 8px; } #ownCar .oround.one img { width: 100%; display: block; } #ownCar .odesign { position: relative; padding: 0; border: 0; background: #0003; box-shadow: inset 0 0 0 2px #f1ebdc33; } #ownCar .odesign img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } #ownCar .odesign small { position: absolute; left: 6px; top: 5px; font: 900 16px/1 var(--big); color: #fff; background: #0008; padding: 3px 6px 2px; } #ownCar .odesign[aria-pressed="true"] { outline: 4px solid var(--signal); outline-offset: -4px; } #ownCar .odesign[aria-pressed="true"] small { background: var(--signal); color: var(--ink); } #ownCar .ocell { display: flex; flex-direction: column; gap: 6px; } #ownCar .gbuy.opick { margin-top: 0; min-height: 48px; font-size: 19px; } #ownCar .ochange, #ownCar .oname { width: 100%; box-sizing: border-box; background: var(--paper); color: var(--ink); border: 0; font: 500 16px/1.3 var(--lab); padding: 9px 11px; resize: none; } #ownCar .gbuy.alt { background: transparent; color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); font-size: 19px; min-height: 48px; margin-top: 8px; } #ownCar .gbuy.slim { width: auto; margin: 0; padding: 0 14px; min-height: 44px; font-size: 17px; flex: none; } #ownCar .ocar { display: block; width: 100%; max-height: 260px; object-fit: contain; margin: 6px 0 8px; } /* GARAGE LOADING (KC, 27 Oct 2026, OG-1531; his picture previews/ote-garage-loading): over YOUR OWN CAR. The door opens with the order's real steps (its height is set from them); between steps it rattles and sparks fly, never with reduced motion */ #ownLoad { position: fixed; inset: 0; z-index: 10; background: linear-gradient(180deg, #2a2f40 0%, #1F2330 60%); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: calc(var(--top) + 10px) calc(var(--right) + 16px) calc(var(--bottom) + 18px) calc(var(--left) + 16px); box-sizing: border-box; pointer-events: auto; } #ownLoad[hidden] { display: none; } #ownLoad .lwrap { max-width: 460px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; } #ownLoad .ltop { display: flex; align-items: center; justify-content: space-between; } #ownLoad .ltop b { font: 700 15px/1 var(--lab); letter-spacing: .16em; color: var(--signal); } #lClose { min-width: 44px; min-height: 44px; margin-right: -10px; font: 400 30px/1 sans-serif; background: transparent; color: var(--paper); border: 0; } #ownLoad h2 { margin: 0 0 12px; font: 900 44px/1 var(--big); letter-spacing: .04em; } #ownLoad .ldoor { position: relative; flex: none; height: clamp(130px, 28vh, 250px); border-radius: 6px; overflow: hidden; background: #0f1118; box-shadow: inset 0 0 0 3px #f1ebdc22; } #ownLoad .llight { position: absolute; left: -30%; bottom: 0; width: 60%; height: 100%; background: radial-gradient(60% 40% at 50% 100%, #ffb00055, transparent 70%); animation: llight 6s ease-in-out infinite alternate; } #ownLoad .ldoor img { position: absolute; left: 50%; bottom: 6%; height: 80%; max-width: 92%; object-fit: contain; transform: translateX(-50%); filter: brightness(.5); } #ownLoad .ldoor img:not([src]) { display: none; } #ownLoad .lq { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font: 900 64px/1 var(--big); color: #ffb00066; } #ownLoad .lq[hidden] { display: none; } #ownLoad .lslats { position: absolute; left: 0; right: 0; top: 0; height: 70%; background: repeating-linear-gradient(180deg, #3a4058 0 22px, #2b3044 22px 26px); box-shadow: 0 4px 10px #0008; transition: height 1.2s ease; animation: ldoor 2.6s ease-in-out infinite; } #ownLoad .lspark { position: absolute; bottom: 18px; width: 6px; height: 6px; border-radius: 50%; background: #ffd36a; box-shadow: 0 0 10px #ffb000; opacity: 0; animation: lspark 1.7s ease-out infinite; } #ownLoad .lspark:nth-child(5) { left: 22%; --dx: -18px; } #ownLoad .lspark:nth-child(6) { left: 41%; --dx: 10px; animation-delay: .45s; } #ownLoad .lspark:nth-child(7) { left: 63%; --dx: 22px; animation-delay: .9s; } #ownLoad .lspark:nth-child(8) { left: 80%; --dx: -8px; animation-delay: 1.3s; } @keyframes ldoor { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes lspark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx, 12px), -74px) scale(.35); } } @keyframes llight { from { left: -30%; } to { left: 70%; } } #ownLoad .lpct { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 6px; } #ownLoad .lpct b { font: 900 54px/1 var(--big); color: var(--signal); font-variant-numeric: tabular-nums; } #ownLoad .lpct b.pop { animation: lpop .45s ease-out; } @keyframes lpop { 0% { transform: scale(1.18); } 100% { transform: scale(1); } } #ownLoad .lpct span { font: 700 14px/1.2 var(--lab); letter-spacing: .1em; color: #f1ebdccc; text-align: right; } #ownLoad .lbar { flex: none; height: 14px; background: #f1ebdc18; border-radius: 7px; overflow: hidden; } #ownLoad .lbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb000, #ffd36a); border-radius: 7px; transition: width .8s ease; } #ownLoad .lsteps { margin: 12px 0 0; padding: 0; list-style: none; font: 700 14px/1.9 var(--lab); letter-spacing: .08em; } #ownLoad .lsteps li { display: flex; gap: 10px; align-items: center; color: #f1ebdc77; } #ownLoad .lsteps li.done { color: var(--paper); } #ownLoad .lsteps li.now { color: var(--signal); } #ownLoad .lsteps li::before { content: "○"; flex: none; width: 16px; text-align: center; } #ownLoad .lsteps li.done::before { content: "✓"; color: #53d769; } #ownLoad .lsteps li.now::before { content: "●"; } #ownLoad .lslots { display: flex; gap: 8px; margin-top: 12px; } #ownLoad .lslots > * { flex: 1; min-width: 0; aspect-ratio: 3 / 2; border: 0; padding: 0; border-radius: 6px; background: #f1ebdc10 center / cover no-repeat; box-shadow: inset 0 0 0 2px #f1ebdc22; } #ownLoad .lslots .empty { display: grid; place-items: center; font: 900 22px/1 var(--big); color: #f1ebdc44; } #ownLoad .lnote { margin: 12px 0 14px; font: 700 13px/1.35 var(--lab); letter-spacing: .06em; color: #f1ebdcaa; } #ownLoad .lchange textarea { width: 100%; box-sizing: border-box; margin: 0 0 12px; background: var(--paper); color: var(--ink); border: 0; font: 500 16px/1.3 var(--lab); padding: 9px 11px; resize: none; } #ownLoad .lgo { flex: none; width: 100%; min-height: 56px; margin-top: auto; border: 0; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px #f1ebdc55; font: 900 22px/1 var(--big); letter-spacing: .08em; padding: 14px 6px 12px; } #ownLoad .lgo.main { background: var(--signal); color: var(--ink); box-shadow: none; } #ownLoad .lgo:disabled { opacity: .5; } #ownLoad .lpick { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } #ownLoad .lpick > div { display: flex; align-items: center; gap: 10px; padding: 8px; background: #f1ebdc0d; box-shadow: inset 0 0 0 2px #f1ebdc22; } #ownLoad .lpick > div.sure { box-shadow: inset 0 0 0 3px var(--signal); } #ownLoad .lthumb { flex: none; width: 44%; max-width: 170px; aspect-ratio: 5 / 3; padding: 0; border: 0; border-radius: 4px; background: #0003 center / cover no-repeat; } #ownLoad .lpick b { display: block; font: 900 19px/1 var(--big); letter-spacing: .06em; } #ownLoad .lpick small { display: block; font: 700 12px/1.25 var(--lab); color: #f1ebdcaa; letter-spacing: .06em; margin-top: 4px; } #ownLoad .lpk { flex: none; margin-left: auto; min-width: 66px; min-height: 44px; border: 0; padding: 0 12px; background: var(--signal); color: var(--ink); font: 900 17px/1 var(--big); letter-spacing: .08em; } #ownLoad .lpk.sure { background: var(--paper); } #ownLoad .lpk:disabled { opacity: .5; } #ownLoad.ready .ldoor, #ownLoad.ready .lsteps, #ownLoad.ready .lslots { display: none; } #ownLoad .lbig { position: fixed; inset: 0; z-index: 2; border: 0; padding: calc(var(--top) + 16px) 12px calc(var(--bottom) + 16px); background: #0f1118f2; display: grid; place-items: center; } #ownLoad .lbig[hidden] { display: none; } #ownLoad .lbig img { max-width: 100%; max-height: 100%; object-fit: contain; } @media (orientation: landscape) and (max-height: 520px) { #ownLoad h2 { font-size: 32px; margin-bottom: 8px; } #ownLoad .ldoor { height: 120px; } #ownLoad .lpct b { font-size: 40px; } } @media (prefers-reduced-motion: reduce) { #ownLoad .lslats, #ownLoad .llight, #ownLoad .lpct b.pop { animation: none; } #ownLoad .lspark { animation: none; opacity: .8; transform: translateY(-20px); } #ownLoad .lslats, #ownLoad .lbar i { transition: none; } } #ownCar .onamerow { display: flex; gap: 6px; align-items: stretch; } #ownCar .oname { text-transform: uppercase; font: 900 20px/1 var(--big); letter-spacing: .08em; } /* the garage's CAR tab (OG-1333): the car's own body, or a car made on it, by its picture and name */ #garage .gsw.gmade { grid-template-columns: repeat(3, 1fr); } #garage .gsw.gmade button { height: 86px; background: #f1ebdc12; box-shadow: inset 0 0 0 2px #f1ebdc33; } #garage .gsw.gmade img { width: 100%; height: 64px; object-fit: contain; display: block; } @media (orientation: landscape) and (max-height: 520px) { #ownCar .opages img { height: 66vh; } } /* ---- FRIENDS (KC, 26 Oct 2026, OG-1460 to OG-1464; the picture KC said yes to: previews/ote-friends/friends-for-kc.jpg) ---- */ /* HOME's FRIENDS button, before the GARAGE: a green dot and how many friends are online now; a red dot when something's new */ .home-friends { position: relative; height: 44px; padding: 0 10px; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 #0004; display: flex; align-items: center; gap: 6px; font: 900 18px/1 var(--big); letter-spacing: .08em; white-space: nowrap; } .home-friends i { width: 10px; height: 10px; border-radius: 50%; background: #1F233033; flex: none; } .home-friends.on i { background: #2fb34f; box-shadow: 0 0 0 2px #2fb34f33; } .home-friends b { font: 700 15px/1 var(--lab); color: #23803a; letter-spacing: 0; } .home-friends b:empty { display: none; } .home-friends.new::after { content: ''; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--stamp); box-shadow: 0 0 0 2px var(--paper); } /* the top row on a narrow phone: the studio's logo a little smaller, the buttons a little tighter, all on one line */ .home-top { column-gap: 8px; } /* on a phone the top row scales with its width, so the logo, FRIENDS, GARAGE (coins shortened: 1.2K) and the cog stay on one line at 320 to 480 px (OG-1484: at 430 px it spilled by 4 px, with 1,250 coins at 390 the cog went off the edge) */ @media (max-width: 480px) { .home-top { column-gap: 6px; padding-left: calc(var(--left) + 10px); padding-right: calc(var(--right) + 10px); } .home-right { gap: 5px; } .home-studio { padding: 4px 6px 3px; } .home-studio img { height: clamp(17px, 5.4vw, 25px); } .home-studio b { font-size: clamp(9px, 2.8vw, 13px); letter-spacing: .12em; margin-top: 2px; } .home-friends, .home-garage { height: 40px; padding: 0 clamp(5px, 1.5vw, 8px); font-size: clamp(13px, 3.9vw, 17px); letter-spacing: .04em; gap: 4px; } .home-friends b { font-size: clamp(12px, 3.4vw, 15px); } .home-cog { width: 40px; height: 40px; padding: 8px; } } #friends { position: fixed; inset: 0; z-index: 41; background: linear-gradient(180deg, #2a2f40 0%, #1F2330 58%); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: calc(var(--top) + 14px) calc(var(--right) + 16px) calc(var(--bottom) + 20px) calc(var(--left) + 16px); box-sizing: border-box; pointer-events: auto; } #friends[hidden] { display: none; } #friends .ghead { display: flex; align-items: center; gap: 10px; } #friends h2 { margin: 0 auto 0 0; font: 900 40px/1 var(--big); letter-spacing: .06em; } #friends .fonline { font: 700 13px/1 var(--lab); letter-spacing: .08em; padding: 7px 9px 6px; background: #53d76922; color: #53d769; } #friends .fonline[hidden] { display: none; } #friendsClose { min-width: 44px; min-height: 44px; font: 400 30px/1 sans-serif; background: transparent; color: var(--paper); border: 0; } #friends .fk { margin: 18px 0 6px; font: 700 12px/1 var(--lab); letter-spacing: .16em; color: var(--signal); } #friends .fnote { margin: 4px 0 0; font: 700 13px/1.35 var(--lab); letter-spacing: .05em; color: #f1ebdcaa; } #friends .fbtn { flex: none; min-height: 40px; padding: 9px 10px 8px; border: 0; background: var(--signal); color: var(--ink); font: 900 15px/1 var(--big); letter-spacing: .08em; } #friends .fbtn.o { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px #f1ebdc55; } #friends .fbtn:disabled { opacity: .7; } /* FOR YOU: a challenge, a friend's RACE NOW, a quick message; a new one has the amber edge */ #friends .fin { background: #f1ebdc10; padding: 10px 12px; margin-top: 6px; box-shadow: inset 3px 0 0 #f1ebdc33; } #friends .fin.new { box-shadow: inset 3px 0 0 var(--signal); } #friends .fin b { display: block; font: 900 20px/1.05 var(--big); letter-spacing: .04em; } #friends .fin > span { display: block; font: 700 13px/1.3 var(--lab); color: #f1ebdcbb; margin: 3px 0 8px; letter-spacing: .05em; } #friends .fin .fbtn { width: 100%; text-align: left; padding-left: 14px; } #friends .fmsg { margin: 0; font: 700 13px/1.4 var(--lab); color: #f1ebdccc; letter-spacing: .04em; } #friends .fmsg i { font-style: normal; background: #f1ebdc18; padding: 3px 7px; margin-left: 4px; color: var(--paper); } /* YOUR FRIENDS and FRIEND REQUESTS: a row each; a tap on a friend opens the quick messages under it */ #friends .frow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f1ebdc18; } #friends .fdot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #f1ebdc33; } #friends .fdot.on { background: #53d769; box-shadow: 0 0 8px #53d76999; } #friends .fdot.ask { background: var(--signal); } #friends .fwho { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 4px 0; color: var(--paper); } #friends .fwho b { display: block; font: 900 19px/1 var(--big); letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #friends .fwho span { display: block; font: 700 12px/1.2 var(--lab); color: #f1ebdcaa; letter-spacing: .06em; margin-top: 3px; } #friends .fwho span.live { color: #53d769; } #friends .frow.open .fwho b { color: var(--signal); } #friends .frow .fbtn { font-size: 14px; padding: 8px 8px 7px; } #friends .fsay { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 10px 20px; border-bottom: 1px solid #f1ebdc18; } #friends .fchip { min-height: 36px; padding: 6px 9px 5px; border: 0; background: #f1ebdc14; color: var(--paper); font: 700 12px/1 var(--lab); letter-spacing: .06em; } #friends .fchip.rm { margin-left: auto; background: transparent; color: #f1ebdc99; box-shadow: inset 0 0 0 1px #f1ebdc33; } #friends .fchip.rm[data-sure="1"] { color: var(--paper); box-shadow: inset 0 0 0 2px var(--stamp); } /* your link and your FRIEND CODE */ #friends .fadd { display: flex; gap: 6px; } #friends .fadd > * { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; border: 0; background: #f1ebdc10; color: var(--paper); text-decoration: none; font: 900 15px/1 var(--big); letter-spacing: .06em; padding: 0 4px; } #friends .fadd .wa { box-shadow: inset 0 3px 0 #25D366; } #friends .fadd .tg { box-shadow: inset 0 3px 0 #2AABEE; } #friends .fadd .cp { box-shadow: inset 0 3px 0 var(--signal); } #friends .fadd [aria-disabled="true"] { opacity: .5; } #friends .fme { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 10px; background: #f1ebdc10; box-shadow: inset 3px 0 0 #53d769; } #friends .fme img { flex: none; width: 30px; height: 30px; } #friends .fme .fwho b { font-size: 22px; } #friends .fhint { margin: 5px 0 10px; font: 700 11px/1.3 var(--lab); letter-spacing: .06em; color: #f1ebdc99; } #friends .fcode { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font: 700 13px/1 var(--lab); letter-spacing: .08em; color: #f1ebdccc; } #friends .fcode b { font: 900 26px/1 var(--big); letter-spacing: .12em; color: var(--paper); -webkit-user-select: all; user-select: all; } #friends .ftype { display: flex; gap: 6px; margin-top: 8px; } #friends .ftype input { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; border: 0; padding: 0 12px; background: #f1ebdc14; color: var(--paper); box-shadow: inset 0 0 0 2px #f1ebdc33; font: 900 20px/1 var(--big); letter-spacing: .12em; text-transform: uppercase; } #friends .ftype input::placeholder { color: #f1ebdc66; letter-spacing: .1em; } #friends .ftype .fbtn { min-width: 70px; } #friends .ftog { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font: 700 13px/1 var(--lab); letter-spacing: .06em; color: #f1ebdccc; } #friends .ftog button { min-width: 56px; min-height: 40px; border: 0; background: #f1ebdc18; color: var(--paper); font: 900 15px/1 var(--big); letter-spacing: .06em; } #friends .ftog button.on { background: var(--signal); color: var(--ink); } #friends .ftog span { max-width: 70%; line-height: 1.3; } @media (orientation: landscape) and (max-height: 520px) { #friends { padding-top: calc(var(--top) + 8px); padding-left: max(calc(var(--left) + 16px), calc(50vw - 300px)); padding-right: max(calc(var(--right) + 16px), calc(50vw - 300px)); } #friends h2 { font-size: 32px; } } /* a friend's RACE NOW while you're in the game: over HOME and the start line, under the settings and a toast */ #friendRing { z-index: 44; box-shadow: 0 0 0 3px var(--signal), 0 18px 40px #000a; } /* + FRIEND: on everyone's board, and on the card after a live race */ ol.board li button.add { color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 2px #1F233055; min-height: 32px; padding: 0 7px; margin: 0 2px; } .raceAdd { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 0; } .raceAdd[hidden] { display: none; } .raceAdd button { min-height: 40px; padding: 8px 12px 7px; border: 0; background: transparent; color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); font: 900 16px/1 var(--big); letter-spacing: .06em; } .raceAdd button:disabled { opacity: .7; } /* DRIFT GAMES (KC, 28 Oct 2026, OG-1552; the picture: previews/ote-drift-games/drift-games-for-kc.jpg). In a heat: the places under the speed, HEAT n OF 3 on the bar, the warning at the right (red, as the picture's GOATS IN 2 S), the crate meter at the bottom, and the item bubble at the top in the middle: the one place neither thumb works (the left slides across its half, the right slides up and down its own), so a thumb never covers it */ #dgHud { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: none; } body.dg-run #dgHud { display: block; } body.dg-run #chainBox, body.dg-run #chainPop, body.dg-run #angleMeter, body.dg-run #coinFly { display: none !important; } #dgPlaces { position: absolute; left: calc(var(--left) + 12px); top: calc(var(--top) + 132px); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; } #dgPlaces li { font: 900 15px/1 var(--big); letter-spacing: .04em; background: #1F2330d9; color: var(--paper); padding: 4px 8px 3px; white-space: nowrap; } #dgPlaces li.you { background: var(--signal); color: var(--ink); } #dgHeat { position: absolute; top: calc(var(--top) + 8px); left: calc(124px + min(calc(100vw - 216px - var(--left) - var(--right)), 460px) / 2); transform: translateX(-50%); font: 900 17px/1 var(--big); letter-spacing: .08em; background: #1F2330e6; color: var(--paper); padding: 4px 10px 3px; white-space: nowrap; } body.at-start #dgHeat { display: none; } #dgWarn { position: absolute; right: calc(var(--right) + 12px); top: calc(var(--top) + 62px); max-width: min(46vw, 330px); background: var(--stamp); color: var(--paper); padding: 6px 12px 6px; box-shadow: 0 3px 0 #0005; text-align: left; } #dgWarn[hidden] { display: none; } #dgWarn b { display: block; font: 900 22px/1 var(--big); letter-spacing: .06em; } #dgWarn small { display: block; font: 700 11px/1.2 var(--lab); letter-spacing: .1em; margin-top: 3px; } /* the mini map (KC, 30 Oct 2026, "Yes, toy motor"; the picture: previews/ote-dgames-fun2/dgames-fun2-for-kc.jpg): under the ⚙ at the top right, in the sky both ways the phone is held; the whole heat's road, the start at the bottom, the flag at the top, a dot for each car (src/road/minimap.js; every mode's since OG-1669, #roadMap). The red warning moves beside it sideways, under it upright */ #dgWarn { right: calc(var(--right) + 72px); max-width: min(30vw, 240px); } /* the mirror (the same picture): under HEAT n OF 3, its frame here and its picture drawn by the 3D canvas under it (src/render.js drawMirror); the "+1" line of what you used landing behind you on its bottom edge. The item bubble beside it sideways, under it upright (lower than before: a thumb reaches it more easily) */ body { --dgbar: min(calc(100vw - 216px - var(--left) - var(--right)), 460px); } #dgMirror { position: absolute; left: calc(124px + var(--dgbar) / 2 - 84px); top: calc(var(--top) + 58px); width: 168px; height: 62px; display: none; } body.dg-mirror #dgMirror { display: block; } #dgMirror .glass { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 9px 9px 16px 16px; box-shadow: 0 0 0 3px #1F2330, 0 0 0 4px #F1EBDC55, 0 4px 0 3px #0006; background: linear-gradient(160deg, #ffffff22 0%, #ffffff00 38%); } #dgMirror .stem { position: absolute; left: 50%; top: -9px; width: 16px; height: 9px; transform: translateX(-50%); background: #1F2330; } #dgMirLine { position: absolute; left: 50%; top: calc(100% - 10px); transform: translateX(-50%); white-space: nowrap; font: 900 14px/1 var(--big); letter-spacing: .06em; background: var(--signal); color: var(--ink); padding: 4px 8px 3px; box-shadow: 0 2px 0 #0005; display: none; } #dgMirLine.on { display: block; } /* bumping (the same picture): BUMPS ON at 3 s, red as a warning; the BUMP! burst where the cars met; SHAKEN over a car a bump has shaken (see-through for 2 s) */ #dgChip { position: absolute; left: 50%; top: calc(var(--top) + 156px); transform: translateX(-50%); background: var(--stamp); color: var(--paper); font: 900 22px/1 var(--big); letter-spacing: .08em; padding: 5px 12px 5px; box-shadow: 0 3px 0 #0005; text-align: center; white-space: nowrap; display: none; } /* sideways: under the hit line, over the car's SHAKEN */ #dgChip small { display: block; font: 700 10px/1.2 var(--lab); letter-spacing: .12em; margin-top: 3px; } #dgChip.on { display: block; animation: dgchip .35s cubic-bezier(.2,1.6,.4,1); } @keyframes dgchip { from { transform: translateX(-50%) scale(.5); } to { transform: translateX(-50%) scale(1); } } #dgBump { position: absolute; left: 0; top: 0; font: 900 20px/1 var(--big); letter-spacing: .06em; color: var(--ink); background: var(--signal); padding: 9px 12px 8px; clip-path: polygon(0 18%,14% 0,30% 14%,50% 0,66% 14%,86% 0,100% 20%,90% 50%,100% 80%,86% 100%,66% 86%,50% 100%,30% 86%,14% 100%,0 82%,10% 50%); transform: translate(-50%, -50%) rotate(-8deg); display: none; } #dgBump.on { display: block; animation: dgburst .45s cubic-bezier(.2,1.6,.4,1); } @keyframes dgburst { from { transform: translate(-50%, -50%) rotate(-8deg) scale(.3); } to { transform: translate(-50%, -50%) rotate(-8deg) scale(1); } } #dgShaken { position: absolute; left: 0; top: 0; transform: translateX(-50%); white-space: nowrap; font: 900 15px/1 var(--big); letter-spacing: .05em; color: var(--paper); display: none; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink); } #dgShaken.on { display: block; } #dgPlaces li .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 6px 1px 0; vertical-align: middle; box-shadow: 0 0 0 1.5px #1F2330; } #dgSay { position: absolute; left: 50%; top: calc(var(--top) + 140px); transform: translateX(-50%); margin: 0; font: 900 18px/1 var(--big); letter-spacing: .06em; color: var(--paper); background: #1F2330d9; padding: 6px 12px 5px; white-space: nowrap; opacity: 0; transition: opacity .2s; } #dgSay.on { opacity: 1; } #dgSay { width: max-content; max-width: calc(100vw - 24px - var(--left) - var(--right)); white-space: normal; text-align: center; text-wrap: balance; } #dgMeter { position: absolute; left: 50%; bottom: calc(var(--bottom) + 8px); transform: translateX(-50%); width: min(52vw, 440px); background: #1F2330e0; padding: 7px 12px 6px; } .dgmTop { display: flex; justify-content: space-between; gap: 10px; font: 900 15px/1 var(--big); letter-spacing: .06em; white-space: nowrap; } .dgmTop b { color: var(--signal); } #dgMeter i { position: relative; display: block; height: 9px; margin: 6px 0 4px; background: #ffffff1f; } #dgFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #5BD16B, #C5D84A 50%, var(--signal)); transition: width .1s linear; } #dgFill[data-tier="big"] { box-shadow: 0 0 10px var(--signal); } #dgMeter i em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--paper); opacity: .6; } .dgmMarks { position: relative; height: 10px; font: 700 10px/1 var(--lab); letter-spacing: .12em; opacity: .8; } .dgmMarks span { position: absolute; left: 0; transform: none; } .dgmMarks span[style] { transform: translateX(-50%); } #dgBubble { position: fixed; z-index: 5; left: calc(124px + var(--dgbar) / 2 + 84px + 53px); top: calc(var(--top) + 54px); transform: translateX(-50%); width: 78px; height: 78px; border-radius: 50%; background: #1F2330ee; border: 3px solid var(--signal); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 3px 0 #0006, 0 0 0 4px #FFB00033; touch-action: none; pointer-events: auto; } #dgBubble[hidden] { display: none; } body:not(.dg-run) #dgBubble { display: none; } #dgBubble .ic { font-size: 28px; line-height: 1; height: 30px; width: 30px; display: block; } #dgBubble .ic.weed { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%238A5A2B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='15' stroke='%23B8854A'/%3E%3Cpath d='M7 17c8-6 18 6 26-2M8 25c9 4 15-10 25-3M14 7c2 9-6 17 2 26M24 6c-5 9 7 16 1 28M10 11c10 3 13 13 20 19'/%3E%3C/g%3E%3C/svg%3E"); } #dgBubble b { font: 900 11px/1 var(--big); letter-spacing: .04em; text-align: center; max-width: 70px; margin-top: 2px; } #dgBubble small { font: 700 12px/1 var(--lab); letter-spacing: .12em; color: var(--signal); margin-top: 1px; } #dgBubble[data-tier="big"] { border-color: var(--stamp); box-shadow: 0 3px 0 #0006, 0 0 0 4px #D7263D44; } #dgBubble.pop { animation: dgpop .35s cubic-bezier(.2,1.6,.4,1); } @keyframes dgpop { from { transform: translateX(-50%) scale(.4); } to { transform: translateX(-50%) scale(1); } } #dgFog { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 62%, #DCDAD488 0%, #E4E2DCF5 62%); transition: opacity .15s linear; } #dgBrush { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%237A4E22' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M-5 30c25-20 45 30 70 5s40 20 60 0M-5 70c20 10 35-25 60-5s35 35 70 5M10 -5c15 30-15 45 5 70s-10 40 10 60M60 -5c-10 25 20 40 0 65s15 40-5 60M95 -5c10 20-15 35 5 55s-5 45 15 70M-5 105c30-15 50 20 80-5s30 10 50 0'/%3E%3C/g%3E%3Cg fill='none' stroke='%23B8854A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 50c20-15 30 15 55 0s35 10 65-5M30 -5c-5 30 20 40 5 70s15 35-5 60M80 -5c15 25-10 45 10 65s-15 35 5 60'/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 180px, radial-gradient(ellipse at 50% 55%, #6B442055 0%, #3A240FCC 75%); } body.dg-run #hint { bottom: calc(var(--bottom) + 84px); } /* upright (OG's picture of 29 Oct 2026): the hit line under the places, never behind them; the meter as wide as the phone, its words on two lines so none is cut at 360 or 390; the hint above it */ @media (orientation: portrait) { #dgChip { top: calc(var(--top) + 290px); font-size: 26px; padding: 7px 14px 6px; } #dgChip small { font-size: 11px; margin-top: 4px; } #dgBubble { left: calc(124px + var(--dgbar) / 2 + 84px - 39px); top: calc(var(--top) + 132px); } #dgWarn { right: calc(var(--right) + 12px); top: calc(var(--top) + 220px); max-width: min(46vw, 330px); } #dgSay { top: calc(var(--top) + 240px); } #dgMeter { width: min(calc(100vw - 24px - var(--left) - var(--right)), 440px); } .dgmTop { flex-direction: column; gap: 4px; } body.dg-run #hint { bottom: calc(var(--bottom) + 104px); } } @media (prefers-reduced-motion: reduce) { #dgBubble.pop, #dgChip.on, #dgBump.on { animation: none; } #dgFog, #dgSay, #dgFill { transition: none; } } /* the cards: after a heat its standings; after the third, the results as in the picture (the table, the ticket for the group chat, WHATSAPP · TELEGRAM · COPY LINK, AGAIN · SAME FOUR). Sideways, the table at the left and the rest beside it */ body.dg-card #corner, body.dg-card #pauseBtn, body.dg-card #hint { display: none !important; } #dgCard { top: 0; justify-content: center; background: #16182ef5; overflow-y: auto; touch-action: pan-y; } .dgcHead { width: min(92vw, 520px); } .dgcHead h2 { margin: 0; font: 900 34px/1 var(--big); letter-spacing: .04em; color: var(--paper); } #dgcSub { margin: 4px 0 0; font: 900 15px/1.1 var(--big); letter-spacing: .1em; color: var(--signal); } #dgcTable { width: min(92vw, 520px); margin-top: 10px; } .dgTable { width: 100%; border-collapse: collapse; font: 900 18px/1 var(--big); letter-spacing: .03em; } .dgTable th { font: 700 11px/1 var(--lab); letter-spacing: .12em; text-align: right; opacity: .75; padding: 0 6px 6px; } .dgTable th:nth-child(2) { text-align: left; } .dgTable td { padding: 7px 6px 6px; text-align: right; border-top: 1px solid #ffffff1a; } .dgTable td:first-child { color: var(--signal); width: 1.4em; text-align: left; font-size: 22px; } .dgTable td:nth-child(2) { text-align: left; white-space: nowrap; } .dgTable td.pts { color: var(--signal); font-size: 24px; } .dgTable tr.you td { background: #2C3048; } .dgTicket { width: min(92vw, 520px); margin-top: 12px; background: var(--paper); color: var(--ink); padding: 10px 14px 9px; transform: rotate(-1.5deg); box-shadow: 0 8px 22px #0009; } .dgTicket[hidden] { display: none; } .dgTicket small { display: block; font: 900 13px/1 var(--big); letter-spacing: .14em; color: var(--stamp); } .dgTicket strong { display: block; font: 900 28px/1.02 var(--big); letter-spacing: .02em; margin-top: 4px; } .dgTicket em { display: block; font: 700 12px/1.2 var(--lab); font-style: normal; letter-spacing: .1em; margin-top: 5px; } #dgcShare[hidden] { display: none; } #dgNext { background: var(--signal); color: var(--ink); } #dgCard:not(.results) #dgNext small { display: block; } .dgHome { flex: 1; min-height: 44px; background: none; color: var(--paper); font: 700 14px var(--lab); letter-spacing: .12em; box-shadow: none; opacity: .85; } @media (orientation: landscape) and (max-height: 520px) { #dgCard.on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 22px; align-content: center; padding: calc(var(--top) + 10px) calc(var(--right) + 16px) calc(var(--bottom) + 10px) calc(var(--left) + 16px); } #dgCard .dgcHead { grid-column: 1; grid-row: 1; width: auto; } #dgCard #dgcTable { grid-column: 1; grid-row: 2; width: auto; margin-top: 6px; } #dgCard .dgTicket, #dgCard #dgcShare, #dgCard .row.go, #dgCard .row:last-child { grid-column: 2; width: auto; } #dgCard .dgTicket { grid-row: 1 / span 1; margin-top: 4px; } #dgCard:not(.results) .row.go { grid-row: 1 / span 2; align-self: center; } #dgCard.results .row.go, #dgCard.results #dgcShare, #dgCard.results .row:last-child { grid-row: auto; } #dgCard.results { grid-template-rows: auto auto auto auto auto; } #dgCard.results .dgcHead { grid-row: 1; } #dgCard.results #dgcTable { grid-row: 2 / span 4; } #dgCard.results .dgTicket { grid-row: 1 / span 2; } #dgCard.results #dgcShare { grid-row: 3; } #dgCard.results .row.go { grid-row: 4; } #dgCard.results .row:last-child { grid-row: 5; } .dgcHead h2 { font-size: 28px; } .dgTable { font-size: 16px; } .dgTable td { padding: 5px 5px 4px; } .dgTable td.pts { font-size: 20px; } .dgTicket strong { font-size: 24px; } #dgCard .row { margin-top: 8px; } #dgCard .big { min-height: 52px; font-size: 26px; } #dgPlaces { top: calc(var(--top) + 112px); } #dgPlaces li { font-size: 13px; padding: 3px 7px 2px; } #dgWarn { top: calc(var(--top) + 58px); } #dgWarn b { font-size: 19px; } #dgMeter { width: min(46vw, 380px); padding: 5px 10px 4px; } .dgmTop { font-size: 13px; } #dgBubble { top: calc(var(--top) + 54px); left: calc(124px + var(--dgbar) / 2 + 84px + 49px); width: 70px; height: 70px; } #dgBubble .ic { font-size: 22px; height: 24px; width: 24px; } #dgSay { top: calc(var(--top) + 128px); font-size: 16px; } body.dg-run #hint { bottom: calc(var(--bottom) + 70px); } } @media (orientation: landscape) and (max-width: 799px) { #dgWarn { right: calc(var(--right) + 12px); top: calc(var(--top) + 194px); } } /* the map's 124 px + 8 */ /* DRIFT GAMES WITH FRIENDS (KC, 29 Oct 2026; the picture: previews/ote-dgames-friends/dgames-friends-for-kc.jpg): PLAY WITH FRIENDS on its start line; the seat card (RACE ANYONE's card in the picture's layout): the four cars as they'll line up, INVITE for friends online, the link by channel, START (the maker's) or WAITING FOR TO START, LEAVE */ #dgfTop { position: fixed; z-index: 4; right: calc(var(--right) + 12px); top: calc(var(--top) + 132px); pointer-events: auto; width: min(46vw, 210px); margin: 0; display: none; } /* beside the places, never over them */ @media (orientation: landscape) and (max-height: 520px) { #dgfTop { top: calc(var(--top) + 112px); } } body.dgames-on.at-start:not(.paper-up):not(.dgf) #dgfTop:not([hidden]) { display: flex; } #dgfBtn { flex: 1; min-height: 44px; background: #1F2330e6; color: var(--paper); box-shadow: inset 0 0 0 2px var(--signal); font: 900 15px/1 var(--big); letter-spacing: .12em; border: 0; padding: 8px 6px 6px; } .dgseat { top: calc(var(--top) + 66px); transform: translateX(-50%); width: min(calc(100vw - 32px), 380px); max-height: calc(100dvh - var(--top) - var(--bottom) - 84px); padding: 16px 16px 14px; box-shadow: 0 0 0 3px var(--signal), 0 18px 40px #000a; } .dgseat h3 { font-size: 30px; } .dgseat p.sub { margin: 0 0 10px; font: 700 13px/1.3 var(--lab); letter-spacing: .04em; color: #f1ebdcbb; } .dgseat .seats { margin: 0; } .dgseat .seat { min-height: 46px; padding: 0 10px 0 6px; gap: 9px; } .dgseat .seat img { width: 42px; height: 42px; object-fit: contain; flex: none; margin: -2px 0; } .dgseat .seat b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 19px/1 var(--big); letter-spacing: .05em; } .dgseat .seat .rb { width: 42px; text-align: center; font-size: 24px; flex: none; } .dgseat .seat i { margin: 0 8px; } .dgseat .seat small { flex: none; text-align: right; line-height: 1.15; white-space: pre-line; } .dgseat .seat small.ok { color: #53d769; } .dgseat .seat.bot { color: #f1ebdc99; } .dgseat .seat.wait { color: #f1ebdccc; font: 900 19px/1 var(--big); letter-spacing: .05em; } .dgseat .fk { margin: 14px 0 2px; font: 700 12px/1 var(--lab); letter-spacing: .16em; color: var(--signal); } .dgseat .fnone, .dgseat .note { margin: 6px 0 0; font: 700 13px/1.35 var(--lab); letter-spacing: .05em; color: #f1ebdcaa; } .dgseat .note { color: var(--signal); } .dgseat .frow { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px solid #f1ebdc18; } .dgseat .fdot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #53d769; box-shadow: 0 0 8px #53d76999; } .dgseat .fwho { flex: 1; min-width: 0; } .dgseat .fwho b { display: block; font: 900 19px/1 var(--big); letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dgseat .fwho span { display: block; font: 700 12px/1.2 var(--lab); letter-spacing: .06em; margin-top: 3px; color: #53d769; } .dgseat .fbtn { flex: none; min-height: 44px; min-width: 86px; padding: 0 12px; border: 0; background: var(--signal); color: var(--ink); font: 900 17px/1 var(--big); letter-spacing: .08em; } .dgseat .fbtn.o { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px #f1ebdc55; } .dgseat .chats { display: flex; gap: 7px; margin-top: 6px; } .dgseat .chats > * { min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 6px; border: 0; background: #1a1d29; color: var(--paper); box-shadow: inset 0 0 0 1px #f1ebdc1c; font: 900 16px/.95 var(--big); letter-spacing: .06em; text-decoration: none; } .dgseat .chats .sh { background: var(--paper); color: var(--ink); box-shadow: none; flex: 0 0 62px; } .dgseat .chats .wa { flex: 1; box-shadow: inset 5px 0 0 #25D366; } .dgseat .chats .tg { flex: 1; box-shadow: inset 5px 0 0 #2AABEE; } .dgseat .chats .cp { flex: 0 0 62px; box-shadow: inset 5px 0 0 var(--signal); } .dgseat .go { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; font-size: 26px; } .dgseat .waitbar { margin-top: 12px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #FFB00099; color: var(--signal); font: 900 22px/1 var(--big); letter-spacing: .07em; text-align: center; padding: 6px; } .dgseat .waitbar small { display: block; font: 700 12px/1.2 var(--lab); letter-spacing: .1em; margin-top: 4px; color: #f1ebdcaa; } @media (orientation: landscape) and (max-height: 520px) { .dgseat { top: calc(var(--top) + 8px); width: min(calc(100vw - 32px - var(--left) - var(--right)), 760px); max-height: calc(100dvh - var(--top) - var(--bottom) - 16px); padding: 12px 14px 10px; } .dgseat:not([hidden]) { display: flex; gap: 18px; align-items: flex-start; } .dgseat .dgsL, .dgseat .dgsR { flex: 1; min-width: 0; } .dgseat h3 { font-size: 24px; } .dgseat .seats { grid-template-columns: 1fr; } .dgseat .seat { min-height: 38px; } .dgseat .seat img { width: 34px; height: 34px; } .dgseat .fk:first-child { margin-top: 2px; } .dgseat .go, .dgseat .waitbar { min-height: 48px; margin-top: 8px; } } @media (max-width: 370px) { .dgseat h3 { font-size: 26px; } .dgseat .seat b, .dgseat .fwho b { font-size: 17px; } .dgseat .fbtn { min-width: 74px; } } /* the cards with friends: the next heat is the maker's (the others wait for it, as in the picture); who's in the rematch */ #dgNext.wait { background: transparent; color: var(--signal); box-shadow: none; border: 2px dashed #FFB00099; font-size: 22px; } #dgNext.wait small { display: block; color: #f1ebdcaa; } #dgcLate { margin: 8px 0 0; font: 700 13px/1.3 var(--lab); letter-spacing: .08em; color: #53d769; width: min(92vw, 520px); } #dgcLate::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #53d769; margin-right: 8px; vertical-align: 0; } #dgcLate[hidden] { display: none; } @media (orientation: landscape) and (max-height: 520px) { #dgCard #dgcLate { grid-column: 2; width: auto; } } /* DRIFT GAMES' music (KC, 29 Oct 2026, OG-1631): one setting, FUNK · SURF · OFF, in HOME's settings, on DRIFT GAMES' start line and pause, and on its cards; the one picked filled in */ .musicRow .seg { display: flex; gap: 6px; } .setrow.musicRow .seg button { min-width: 64px; padding: 10px 8px 8px; } #pauseMusic { width: min(92vw, 420px); margin-top: 10px; border-top: 0; } #pauseMusic[hidden] { display: none; } #pause #pauseMusic .seg button { flex: 0 0 auto; min-height: 44px; min-width: 64px; background: transparent; color: var(--paper); border: 0; box-shadow: inset 0 0 0 2px var(--paper); } #pause #pauseMusic .seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } .musicRow.mini { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .musicRow.mini > span:first-child { font: 700 12px var(--lab); letter-spacing: .12em; color: var(--paper); opacity: .85; } .musicRow.mini .seg { gap: 4px; } .musicRow.mini .seg button { min-height: 44px; min-width: 50px; padding: 8px 7px 6px; font: 900 14px/1 var(--big); letter-spacing: .08em; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px #f1ebdc80; } .musicRow.mini .seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: none; } /* THE MINI MAP IN EVERY MODE (KC, 30 Oct 2026, OG-1669: "I want maps in all of them ... the same type of map you did in Drift Games"): DRIFT GAMES' map, in a run of every mode, under the ⚙ (MOUNTAIN RUN: under PAUSE), in the sky both ways the phone is held (src/road/minimap.js). Where the slide chain was under the ⚙ (DRIFT, MOUNTAIN RUN), it moves beside the map sideways and under it upright, as DRIFT GAMES' red warning does */ #roadMap { position: fixed; z-index: 3; right: calc(var(--right) + 12px); top: calc(var(--top) + 62px); width: 52px; height: 124px; background: #1F2330c4; box-shadow: 0 2px 0 #0004; pointer-events: none; display: none; } #roadMap canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } body.map-on #roadMap { display: block; } body.at-start #roadMap, body.paper-up #roadMap, body.topshot #roadMap { display: none; } /* PLAY WITH FRIENDS has the start line's corner */ body.map-on #chainBox { top: calc(var(--top) + 220px); } body.map-on #chainPop { top: calc(var(--top) + 278px); } @media (orientation: portrait) { #roadMap { width: 62px; height: 150px; } } @media (orientation: landscape) and (max-height: 520px) { body.map-on #chainBox { top: calc(var(--top) + 62px); right: calc(var(--right) + 72px); } body.map-on #chainPop { top: calc(var(--top) + 116px); right: calc(var(--right) + 72px); } } /* DRIFT's places (OG-1669: "the positions and the time difference should be in drift and drift games"): DRIFT GAMES' list, under CURVE n/N, whenever another car is on the road with you (a live race, a ghost); each other car's gap in seconds after its name, "−1.4 S" ahead of you and "+0.8 S" behind, changed four times a second */ #rdPlaces { position: fixed; z-index: 3; left: calc(var(--left) + 12px); top: calc(var(--top) + 132px); margin: 0; padding: 0; list-style: none; flex-direction: column; gap: 3px; pointer-events: none; display: none; } body.rd-places.in-run:not(.paper-up) #rdPlaces { display: flex; } #rdPlaces li { font: 900 15px/1 var(--big); letter-spacing: .04em; background: #1F2330d9; color: var(--paper); padding: 4px 8px 3px; white-space: nowrap; } #rdPlaces li.you { background: var(--signal); color: var(--ink); } #rdPlaces li .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 6px 1px 0; vertical-align: middle; box-shadow: 0 0 0 1.5px #1F2330; } /* a row with its gap is never wider than today's widest at 360 (160 px, "4 🤖 ROBOT · STEADY"): a robot is "🤖 STEADY" in the list (the 🤖 says the rest), a long name a little smaller (never under 12 px, src/app.js fitPlaces), then cut short; the gaps in a column at the rows' right edge, 13 px. DRIFT GAMES' item bubble is beside its list upright: its rows grow with the phone past 360 as the bubble moves over (190 px at 390), never past 200. DRIFT has nothing beside its list: 200 px, a friend's name of 16 letters whole */ #dgPlaces li, #rdPlaces li { display: flex; align-items: center; max-width: min(200px, calc(100vw - 200px)); box-sizing: border-box; } #rdPlaces li { max-width: 200px; } #dgPlaces li .dot, #rdPlaces li .dot { flex: none; margin: 0 6px 0 0; } #dgPlaces .nm, #rdPlaces .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #dgPlaces .gap, #rdPlaces .gap { flex: none; margin-left: auto; padding-left: 6px; font: 900 13px/1 var(--big); letter-spacing: .02em; color: #F1EBDCd9; font-variant-numeric: tabular-nums; } #dgPlaces .gap:empty, #rdPlaces .gap:empty { display: none; } /* upright, a drift battle's line (the points between you) goes from the middle of the sky to under the slide chain, clear of the places at the left; the chain's pop under it */ @media (orientation: portrait) { body.rd-places #raceStrip { top: calc(var(--top) + 278px); } body.rd-places.racing.map-on #chainPop { top: calc(var(--top) + 312px); } } @media (orientation: landscape) and (max-height: 520px) { #rdPlaces { top: calc(var(--top) + 112px); } /* sideways as DRIFT GAMES' places: under CURVE n/N */ #rdPlaces li { font-size: 13px; padding: 3px 7px 2px; } }