* { margin:0; padding:0; box-sizing:border-box; } html, body { height:100%; background:#0a0a0c; overflow:hidden; } body { font-family: 'Segoe UI', system-ui, sans-serif; color:#fff; } canvas { display:block; } #game { position:fixed; inset:0; } .panel { position:fixed; background:rgba(10,10,14,0.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:10px 14px; user-select:none; pointer-events:none; } #hud-top { top:16px; left:16px; } #tytul { font-size:15px; font-weight:700; letter-spacing:2px; text-transform:uppercase; } #podtytul { font-size:11px; opacity:0.55; letter-spacing:1px; margin-top:2px; } #hud-cele { top:16px; right:16px; text-align:right; min-width:150px; } #tropy-licznik { font-size:26px; font-weight:800; line-height:1; } #tropy-label { font-size:10px; opacity:0.55; letter-spacing:2px; text-transform:uppercase; margin-top:4px; } #czas { font-size:15px; margin-top:8px; font-variant-numeric:tabular-nums; opacity:0.85; } #hud-speed { bottom:16px; left:16px; display:flex; align-items:baseline; gap:6px; } #speed-val { font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; } #speed-unit { font-size:11px; opacity:0.55; letter-spacing:1px; } #bieg-r { font-size:17px; font-weight:900; color:#ffb703; line-height:1; opacity:0; transition:opacity 0.12s; margin-right:2px; } #minimap-wrap { position:fixed; bottom:16px; right:16px; padding:6px; } #minimap { display:block; border-radius:6px; } #atrybucja { position:fixed; bottom:4px; left:50%; transform:translateX(-50%); font-size:9px; opacity:0.35; letter-spacing:0.5px; pointer-events:none; user-select:none; white-space:nowrap; } .ekran { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(ellipse at center, rgba(12,12,18,0.86), rgba(4,4,6,0.96)); z-index:20; gap:14px; padding:24px; } .ekran.ukryty { display:none; } .ekran h1 { font-size:clamp(28px, 7vw, 58px); font-weight:900; letter-spacing:4px; text-transform:uppercase; line-height:1.05; } .ekran h2 { font-size:clamp(13px, 2.6vw, 17px); font-weight:400; letter-spacing:3px; opacity:0.6; text-transform:uppercase; } .akcent { color:#ffb703; } .ekran .start-btn { margin-top:10px; font-size:14px; letter-spacing:3px; text-transform:uppercase; padding:13px 30px; border:2px solid #ffb703; border-radius:6px; color:#ffb703; font-weight:700; cursor:pointer; background:none; animation:puls 1.8s ease-in-out infinite; } @keyframes puls { 0%,100%{opacity:1;} 50%{opacity:0.45;} } .sterowanie { font-size:12px; opacity:0.45; line-height:1.9; margin-top:16px; letter-spacing:1px; } .sterowanie b { color:#fff; opacity:0.85; font-weight:600; } #wynik-czas { font-size:clamp(34px, 9vw, 64px); font-weight:900; color:#ffb703; font-variant-numeric:tabular-nums; } #toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(20px, 5vw, 34px); font-weight:900; letter-spacing:3px; text-transform:uppercase; color:#ffb703; text-shadow:0 3px 20px rgba(0,0,0,0.9); opacity:0; pointer-events:none; z-index:15; transition:opacity 0.25s; } #toast.pokaz { opacity:1; } /* ------------------------------------------------------------- dotyk Panel pojawia sie tylko na urzadzeniach dotykowych (klasa `dotyk` na , nadawana w game.js). Przyciski nie maja wlasnej logiki jazdy - ustawiaja te same flagi w `keys`, ktorych uzywa klawiatura. */ #dotyk { display:none; } body.dotyk #dotyk { display:block; } body.dotyk { touch-action:none; -webkit-user-select:none; user-select:none; } /* Na telefonie dolne rogi zajmuja kciuki, wiec HUD ucieka w gore. Predkosc zostaje nisko po lewej, ale nad przyciskami skretu - stad --dol nizej. */ body.dotyk #hud-cele { top:16px; right:16px; } /* Minimapa w rozmiarze z monitora zjadala 43% szerokosci telefonu i zaslaniala to, w co gracz wjezdza. Skalowana jest tylko na ekranie - canvas dalej ma 150 px, wiec rysunek nie traci ostrosci, a przy 100 px jest czytelny. */ body.dotyk #minimap-wrap { bottom:auto; top:124px; right:16px; padding:5px; opacity:0.88; } body.dotyk #minimap { width:100px; height:100px; } body.dotyk #hud-speed { bottom:calc(var(--dol) + 90px); left:16px; } body.dotyk #hud-top { top:16px; left:16px; } .klawisz { position:fixed; z-index:12; display:flex; align-items:center; justify-content:center; background:rgba(10,10,14,0.5); border:1.5px solid rgba(255,255,255,0.22); color:#fff; font-weight:800; letter-spacing:1px; backdrop-filter:blur(4px); touch-action:none; user-select:none; transition:background 0.08s, border-color 0.08s; } .klawisz.trzymany { background:rgba(255,183,3,0.42); border-color:#ffb703; } /* Kciuk lewy - skret, kciuk prawy - gaz i hamulec. Rozstaw policzony pod 375px (najwezszy realny telefon): 14+72+8+72 z lewej i 14+88 z prawej zostawia 27px przerwy w srodku, wiec nic na siebie nie nachodzi. DRIFT i UTKNALEM ida pietro wyzej - sa uzywane rzadziej niz gaz. Dol liczony od --dol: 30px nad krawedzia (plus pasek gestow na telefonie), zeby pod przyciskami zostal pasek na atrybucje i powrot strony osadzajacej. */ body.dotyk { --dol: calc(30px + env(safe-area-inset-bottom, 0px)); } #k-lewo, #k-prawo { bottom:var(--dol); width:72px; height:72px; border-radius:50%; font-size:26px; } #k-lewo { left:14px; } #k-prawo { left:94px; } #k-gaz { right:14px; bottom:var(--dol); width:88px; height:88px; border-radius:50%; font-size:14px; } #k-ham { right:110px; bottom:var(--dol); width:64px; height:64px; border-radius:50%; font-size:12px; } #k-drift { right:14px; bottom:calc(var(--dol) + 100px); width:88px; height:44px; border-radius:22px; font-size:12px; } #k-t { right:110px; bottom:calc(var(--dol) + 74px); width:64px; height:36px; border-radius:18px; font-size:9px; opacity:0.75; } /* Pasek pod przyciskami (22px) to jedyne wolne miejsce na telefonie - stad atrybucja idzie w prawy dolny rog, a strona osadzajaca gre ma lewy. */ body.dotyk #atrybucja { left:auto; right:12px; bottom:calc(2px + env(safe-area-inset-bottom, 0px)); transform:none; } /* w kadrze pionowym (nagrywanie) sterowanie znika z obrazu */ body[style*="--kadr: 1"] #dotyk { display:none; } /* Tryb ujecia (nagrywanie materialu do rolek, window.GRA_UJECIE). HUD ZOSTAJE w kadrze: minimapa z tropami, licznik tropow, predkosciomierz i nazwa miasta robia z klipu material rozpoznawalny jako gra, a nie samo nagranie jazdy. Znika tylko to, czego w rolce byc nie moze: ekran startowy i koncowy (przyciski) oraz sterowanie dotykowe. Atrybucja Esri zostaje zawsze - jest wymagana przez licencje zdjec, takze w materiale wideo. */ body.ujecie .ekran, body.ujecie #dotyk { display:none !important; } /* Wariant na czysty kadr - gdy montaz ma na tym polozyc wlasne napisy. */ body.ujecie.bez-hud #hud-top, body.ujecie.bez-hud #hud-cele, body.ujecie.bez-hud #hud-speed, body.ujecie.bez-hud #minimap-wrap, body.ujecie.bez-hud #toast { display:none !important; }