/* styles.css — HUD + menu shell for DriftYard. The 3D canvas fills the viewport; the HUD overlays it (shown only while driving via body.driving); menu overlays sit on top. ui.js / hud.js / garage.js inject their own component styling at runtime; this file owns the shared chrome + palette + layout shell. Forked from ggmoosie/conecrushers-web; HUD slots re-laid for the drift readout (challenge timer + drift score + combo) and the minimap dropped. */ :root{ /* ---- core palette (reuse these; don't introduce a new one) ---- */ --bg:#0a0e13; --bg2:#0c1014; --panel:#151c24; --panel2:#0f151b; --edge:#2a3744; --edge2:#1c2731; --ink:#e7eef5; --dim:#8aa0b4; --dimmer:#5d7187; --accent:#c084fc; /* DriftYard purple — primary action/accent (drift) */ --accent2:#3aa6ff; /* electric blue — secondary / holo lines */ --good:#3aa65a; --bad:#e0533a; --warn:#e6c43a; --font:'Segoe UI',system-ui,Roboto,Arial,sans-serif; --mono:'SFMono-Regular',ui-monospace,'Cascadia Mono',Consolas,monospace; /* ---- design tokens (consistent spacing / radius / motion) ---- */ --r-sm:8px; --r-md:10px; --r-lg:16px; --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px; --ease:cubic-bezier(.4,.16,.2,1); --t-fast:.12s; --t-med:.22s; --glow:0 0 0 1px rgba(58,166,255,.15), 0 8px 30px rgba(0,0,0,.5); --shadow:0 24px 80px rgba(0,0,0,.6); } *{ box-sizing:border-box; margin:0; padding:0; } html,body{ width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--ink); font-family:var(--font); } body{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } #app{ position:fixed; inset:0; } #app canvas{ display:block; } /* a subtle holo vignette + scanline wash over the whole canvas for arcade mood */ body::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:1; background: radial-gradient(120% 90% at 50% 8%, transparent 55%, rgba(4,8,12,.55) 100%), repeating-linear-gradient(0deg, rgba(58,166,255,.025) 0 1px, transparent 1px 3px); mix-blend-mode:soft-light; opacity:.6; } /* ── speed / drift "screen feel": a vignette that tightens with speed + a purple edge bloom while a drift is scoring. Driven by hud.js via CSS vars on (--spd 0..1, --drift 0..1) so it costs nothing but a couple of var writes. The element sits above the canvas, below the HUD, and never eats pointer events. ── */ #feel{ position:fixed; inset:0; pointer-events:none; z-index:5; opacity:0; transition:opacity var(--t-med) var(--ease); } body.driving #feel{ opacity:1; } #feel::before{ /* speed vignette — corners darken + pull in as you go faster */ content:''; position:absolute; inset:0; background:radial-gradient(130% 100% at 50% 50%, transparent calc(72% - var(--spd,0) * 26%), rgba(3,6,10,.66) 100%); opacity:calc(.35 + var(--spd,0) * .65); } #feel::after{ /* drift edge bloom — a purple frame that glows while scoring sideways */ content:''; position:absolute; inset:0; box-shadow:inset 0 0 calc(40px + var(--drift,0) * 120px) rgba(192,132,252,calc(var(--drift,0) * .5)); opacity:var(--drift,0); transition:box-shadow .12s linear; } @media (prefers-reduced-motion:reduce){ #feel{ display:none; } } /* shared focus ring — keyboard/AT users always see where they are */ :focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; border-radius:6px; } /* ============ HUD (hidden until driving) ============ */ #hud{ position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity var(--t-med); z-index:6; } body.driving #hud{ opacity:1; } .hc{ position:absolute; background:rgba(10,14,19,.58); border:1px solid var(--edge); border-radius:var(--r-md); padding:8px 12px; backdrop-filter:blur(6px); font-variant-numeric:tabular-nums; box-shadow:0 4px 18px rgba(0,0,0,.35); } .hc span{ font-size:26px; font-weight:700; line-height:1; } .hc i{ display:block; font-style:normal; font-size:10px; letter-spacing:.14em; color:var(--dim); margin-top:3px; text-transform:uppercase; } #speed{ right:24px; bottom:24px; text-align:right; min-width:108px; border-color:rgba(192,132,252,.4); box-shadow:0 0 24px rgba(192,132,252,.12), 0 4px 18px rgba(0,0,0,.4); } #speed span{ font-size:46px; color:var(--accent); text-shadow:0 0 18px rgba(192,132,252,.4); } #gear{ right:152px; bottom:24px; text-align:center; min-width:62px; } #gear span{ color:var(--accent2); } #timer{ left:24px; top:18px; min-width:128px; } /* drift score block (top-right, where CC had the minimap) */ #score{ right:24px; top:18px; text-align:right; min-width:128px; border-color:rgba(58,166,255,.35); } #score span{ color:var(--accent2); } #combo{ right:24px; top:84px; text-align:right; min-width:90px; } #combo span{ color:var(--accent); } /* center HUD banner: challenge countdown, GO/PASS, break warning, stage labels */ #banner{ position:absolute; top:26%; left:0; right:0; text-align:center; font-size:40px; font-weight:800; letter-spacing:.04em; color:var(--ink); text-shadow:0 2px 26px #000, 0 0 36px rgba(58,166,255,.35); pointer-events:none; } #banner .ban{ display:inline-block; padding:10px 26px; border-radius:var(--r-lg); background:rgba(10,14,19,.5); border:1px solid var(--edge); backdrop-filter:blur(4px); animation:banPop .4s var(--ease); } #banner .ban.count{ font-size:96px; line-height:1; color:var(--accent2); border-color:rgba(58,166,255,.4); text-shadow:0 0 50px rgba(58,166,255,.6); } #banner .ban.go{ font-size:88px; color:var(--good); border-color:rgba(58,166,255,.0); text-shadow:0 0 60px rgba(58,166,90,.7); } #banner .ban.warn{ font-size:34px; color:var(--bad); border-color:rgba(224,83,58,.5); animation:banPulse .7s var(--ease) infinite alternate; } #banner .ban.stage{ font-size:34px; color:var(--accent); } @keyframes banPop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } } @keyframes banPulse{ from{ opacity:.55; } to{ opacity:1; } } /* HUD controls hint — discoverable affordance while driving */ #hudHint{ position:absolute; right:24px; top:178px; font-size:11px; letter-spacing:.1em; color:var(--dim); text-align:right; text-transform:uppercase; max-width:300px; } #hudHint kbd{ display:inline-block; font-family:var(--mono); font-size:10px; color:var(--ink); background:rgba(10,14,19,.6); border:1px solid var(--edge); border-radius:5px; padding:1px 6px; } /* ============ overlays / menu cards ============ */ .ov{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(5,8,11,.74); backdrop-filter:blur(7px); z-index:10; padding:18px; animation:ovIn var(--t-med) var(--ease); } .ov.show{ display:flex; } @keyframes ovIn{ from{ opacity:0; } to{ opacity:1; } } .card{ position:relative; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--edge); border-radius:var(--r-lg); padding:34px 38px; max-width:480px; width:100%; text-align:center; box-shadow:var(--shadow); max-height:92vh; overflow-y:auto; animation:cardIn var(--t-med) var(--ease); } @keyframes cardIn{ from{ transform:translateY(10px) scale(.99); opacity:0; } to{ transform:none; opacity:1; } } .card.wide{ max-width:780px; } /* a thin holo top-edge accent on every card */ .card::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent); border-radius:var(--r-lg) var(--r-lg) 0 0; opacity:.8; } .card .eb{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; font-weight:700; } .card h1{ font-size:34px; font-weight:800; margin-bottom:12px; letter-spacing:.01em; } .card h1.bad{ color:var(--bad); } .card .sub{ color:var(--dim); font-size:15px; line-height:1.55; margin-bottom:24px; } /* buttons — consistent states (hover/active/focus/disabled) */ .btn{ pointer-events:auto; cursor:pointer; border:1px solid transparent; border-radius:var(--r-md); padding:13px 26px; font:inherit; font-weight:700; font-size:16px; color:#0a0e13; background:var(--accent); transition:transform var(--t-fast) var(--ease), filter var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .btn:hover{ filter:brightness(1.08); box-shadow:0 6px 20px rgba(192,132,252,.28); } .btn:active{ transform:translateY(1px); } .btn.alt{ background:transparent; color:var(--ink); border-color:var(--edge); } .btn.alt:hover{ border-color:var(--accent2); color:#fff; box-shadow:0 6px 18px rgba(58,166,255,.16); filter:none; } .btn.ghost{ background:transparent; color:var(--dim); border-color:var(--edge2); } .btn.ghost:hover{ color:var(--ink); border-color:var(--edge); box-shadow:none; } .btn:disabled, .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; filter:none; box-shadow:none; transform:none; } .btn.sm{ padding:8px 16px; font-size:13px; } /* error / offline card */ .card .eb.err{ color:var(--bad); } /* ============ garage / shop (built by garage.js) ============ */ #garageCard{ max-width:880px; text-align:left; padding:24px 26px; } .g-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; gap:12px; } .g-head .eb{ margin-bottom:0; } .g-credits{ font-size:13px; letter-spacing:.12em; color:var(--dim); white-space:nowrap; } .g-credits span{ font-size:20px; font-weight:800; color:var(--accent); margin-left:6px; font-variant-numeric:tabular-nums; transition:color var(--t-fast); } .g-credits span.warn{ color:var(--bad); font-size:15px; } .g-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .g-col{ min-width:0; } .g-sec{ margin-bottom:18px; } .g-sec-h{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; border-bottom:1px solid var(--edge); padding-bottom:5px; } /* car select */ .g-cars{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .g-car{ pointer-events:auto; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:2px; background:rgba(20,28,36,.6); border:1px solid var(--edge); border-radius:var(--r-md); padding:9px 11px; color:var(--ink); font:inherit; transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .g-car:hover{ border-color:var(--accent2); transform:translateY(-1px); } .g-car.active{ border-color:var(--accent); background:rgba(192,132,252,.12); } .g-car.locked{ opacity:.82; } .g-car-name{ font-weight:700; font-size:14px; } .g-car-cls{ font-size:11px; color:var(--dim); } .g-tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; color:var(--accent); } .g-tag.sub{ color:var(--dim); } .g-tag.price{ color:var(--accent2); } .g-blurb{ font-size:12px; color:var(--dim); line-height:1.45; margin-top:9px; min-height:34px; } /* stat bars */ .g-bars{ display:flex; flex-direction:column; gap:6px; } .g-bar{ display:grid; grid-template-columns:80px 1fr; align-items:center; gap:9px; } .g-bar-l{ font-size:11px; color:var(--dim); } .g-bar-track{ height:8px; background:rgba(0,0,0,.4); border:1px solid var(--edge); border-radius:5px; overflow:hidden; } .g-bar-fill{ display:block; height:100%; background:linear-gradient(90deg,var(--accent2),var(--accent)); transition:width var(--t-med) var(--ease); } /* paint */ .g-paints{ display:flex; flex-wrap:wrap; gap:8px; } .g-paint{ pointer-events:auto; cursor:pointer; width:30px; height:30px; border-radius:50%; border:2px solid var(--edge); transition:transform var(--t-fast), border-color var(--t-fast); } .g-paint:hover{ transform:scale(1.1); } .g-paint.active{ border-color:var(--ink); box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent); } /* upgrade shop */ .g-shop{ display:flex; flex-direction:column; } .g-row{ background:rgba(20,28,36,.5); border:1px solid var(--edge); border-radius:var(--r-md); padding:9px 11px; margin-bottom:8px; transition:border-color var(--t-fast); } .g-row:hover{ border-color:var(--edge); } .g-row-h{ display:flex; align-items:center; justify-content:space-between; } .g-cat{ font-weight:700; font-size:13px; } .g-pips{ display:inline-flex; gap:4px; } .g-pip{ width:9px; height:9px; border-radius:2px; background:rgba(255,255,255,.12); border:1px solid var(--edge); transition:background var(--t-fast); } .g-pip.on{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 6px rgba(192,132,252,.5); } .g-cur{ font-size:11px; color:var(--dim); margin:4px 0 7px; display:flex; align-items:center; justify-content:space-between; } .g-sell{ pointer-events:auto; cursor:pointer; background:transparent; border:1px solid var(--edge); color:var(--dim); font:inherit; font-size:10px; padding:2px 8px; border-radius:6px; transition:color var(--t-fast), border-color var(--t-fast); } .g-sell:hover{ color:var(--bad); border-color:var(--bad); } .g-next{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .g-next-info{ display:flex; flex-direction:column; gap:1px; min-width:0; } .g-next-name{ font-size:12px; font-weight:600; } .g-next-name i{ font-style:normal; color:var(--dim); font-weight:400; } .g-next-imp{ font-size:10px; color:var(--good); letter-spacing:.04em; } .g-buy{ padding:7px 12px; font-size:12px; border-radius:var(--r-sm); white-space:nowrap; } .g-buy.broke{ background:var(--edge); color:var(--dim); cursor:not-allowed; box-shadow:none; } .g-buy.broke:hover{ filter:none; box-shadow:none; } .g-maxed{ font-size:11px; letter-spacing:.12em; color:var(--good); } .g-foot{ margin-top:6px; display:flex; justify-content:flex-end; gap:10px; } @media (max-width:760px){ .g-grid{ grid-template-columns:1fr; gap:14px; } } /* ============ rotate hint (mobile portrait) ============ */ #rot{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 50% 30%, var(--panel), var(--bg)); color:var(--ink); font-size:18px; z-index:50; text-align:center; padding:24px; } #rot > div{ display:flex; flex-direction:column; gap:10px; align-items:center; } /* touch controls — LIVE on coarse-pointer devices while driving. The root passes pointer-events through; each control opts back in so the canvas behind stays free. */ #touch{ position:fixed; inset:0; pointer-events:none; z-index:7; display:none; } body.touch.driving #touch{ display:block; } .tc-pad{ position:absolute; pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1.5px solid var(--edge); border-radius:18px; background:rgba(10,14,19,.42); color:var(--dim); backdrop-filter:blur(4px); transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .tc-pad.active{ transform:scale(.97); } .tc-ico{ font-size:26px; opacity:.85; line-height:1; } .tc-lbl{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; pointer-events:none; } /* steer pad — a wide horizontal track with a sliding knob (thumb left/right) */ .tc-steer{ left:18px; bottom:20px; width:200px; height:104px; border-radius:54px; background:rgba(10,14,19,.42) linear-gradient(90deg,rgba(58,166,255,.10),transparent,rgba(58,166,255,.10)); } .tc-steer.active{ border-color:var(--accent2); box-shadow:0 0 22px rgba(58,166,255,.22); } .tc-knob{ width:54px; height:54px; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 38% 32%, #cfe6ff, var(--accent2)); box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.5); transition:transform .04s linear; } .tc-pedals{ position:absolute; right:18px; bottom:20px; display:flex; gap:12px; } .tc-pedals .tc-pad{ position:static; width:84px; height:100px; } .tc-gas{ border-color:rgba(192,132,252,.5); color:var(--accent); } .tc-gas.active{ background:rgba(192,132,252,.22); box-shadow:0 0 22px rgba(192,132,252,.3); } .tc-brake{ border-color:rgba(224,83,58,.5); color:var(--bad); } .tc-brake.active{ background:rgba(224,83,58,.22); box-shadow:0 0 22px rgba(224,83,58,.3); } .tc-ebrake{ border-color:rgba(58,166,255,.5); color:var(--accent2); } .tc-ebrake.active{ background:rgba(58,166,255,.22); box-shadow:0 0 22px rgba(58,166,255,.3); } @media (max-width:700px) and (orientation:portrait){ #rot{ display:flex; } } /* ============ touch-driving HUD reflow ============ */ /* On a touch device the bottom corners belong to the steer pad + pedals, so lift the speed/gear/tach/slip readouts up and shrink them to clear the controls. */ body.touch.driving #speed{ bottom:auto; top:14px; right:14px; min-width:92px; } body.touch.driving #speed span{ font-size:34px; } body.touch.driving #gear{ bottom:auto; top:14px; right:118px; } body.touch.driving #tach{ right:14px; bottom:auto; top:96px; width:150px; } body.touch.driving #slip{ bottom:auto; top:8px; left:50%; transform:translateX(-50%) scale(.82); transform-origin:top center; } body.touch.driving #hudHint{ display:none; } /* keyboard hints are moot on touch */ body.touch.driving #chPrompt{ bottom:auto; top:128px; } /* narrow screens: stack the garage + tighten the menu cards so nothing clips */ @media (max-width:560px){ .card{ padding:24px 20px; } .card h1{ font-size:26px; } .set-row{ grid-template-columns:96px 1fr; } .ch-list{ grid-template-columns:1fr; } .prog-cell b{ font-size:17px; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } body::after{ display:none; } /* keep the slip needle / knob position transforms working (they're not "motion" decoration — they're live instruments), but drop the decorative pulses above. */ }