html, body { margin: 0; height: 100%; overflow: hidden; background: #9fb6c8; font: 13px system-ui, sans-serif; }
#view { display: block; width: 100vw; height: 100vh; }
#hud { position: fixed; top: 12px; left: 12px; color: #fff; text-shadow: 0 1px 3px #000c; pointer-events: none; }
#title { font-size: 16px; font-weight: 600; }
#stats { margin-top: 4px; font-variant-numeric: tabular-nums; white-space: pre; }
#help { margin-top: 8px; max-width: 520px; line-height: 1.5; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
           background: #1b2229; color: #e8edf2; gap: 12px; font-size: 15px; transition: opacity .4s; z-index: 10; }
#loading.done { opacity: 0; pointer-events: none; }
#bar { width: 320px; height: 6px; background: #ffffff22; border-radius: 3px; overflow: hidden; }
#bar-fill { width: 0; height: 100%; background: #e2453c; transition: width .2s; }
#attribution { position: fixed; right: 8px; bottom: 6px; color: #fff; font-size: 11px; text-shadow: 0 1px 2px #000; }
#speed { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); color: #fff; font: 700 44px system-ui, sans-serif;
         text-shadow: 0 2px 6px #000b; font-variant-numeric: tabular-nums; pointer-events: none; }
#speed::after { content: " km/h"; font-size: 16px; font-weight: 500; }
#minimap { position: fixed; left: 16px; bottom: 16px; width: 200px; height: 200px; border: 2px solid #ffffffcc;
           border-radius: 6px; box-shadow: 0 2px 10px #0008; background: #1a1d1f; }
#bigmap { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; z-index: 5; }
#buttons { position: fixed; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 4; }
#buttons button { font: 600 13px system-ui, sans-serif; color: #fff; background: #1b2229cc; border: 1px solid #ffffff55;
                  border-radius: 6px; padding: 7px 12px; cursor: pointer; }
#buttons button:hover { background: #2a3540; }
/* menu: po lewej na gradiencie, w tle żywy kadr gry (Urząd Stanu Cywilnego) - pozycje jako napisy, nie przyciski */
#menu { position: fixed; inset: 0; z-index: 8; color: #fff;
        background: linear-gradient(90deg, #070a0ee8 0%, #070a0eb8 30%, #070a0e30 58%, #070a0e00 75%); }
#menu[hidden], #menu [hidden] { display: none !important; }
#menu .panel { position: absolute; left: 7vw; top: 50%; transform: translateY(-50%); width: min(460px, 80vw); }
#menu h1 { margin: 0 0 34px; font: 800 52px/1.05 system-ui, sans-serif; letter-spacing: -0.5px;
           text-shadow: 0 3px 16px #000a; }
#menu h2 { margin: 0 0 12px; font: 600 13px system-ui, sans-serif; letter-spacing: 3px; text-transform: uppercase;
           color: #ffffff99; }
#menu button { position: relative; display: block; margin: 2px 0; padding: 7px 0; font: 700 32px system-ui, sans-serif;
               color: #ffffffb8; background: none; border: 0; cursor: pointer; text-align: left;
               text-shadow: 0 2px 10px #000c; transition: color .15s, padding-left .15s; }
#menu button::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 4px; margin-top: -2px;
                       background: #e2453c; transition: width .15s; }
#menu button:focus { outline: none; }
#menu button.sel { color: #fff; padding-left: 26px; }
#menu button.sel::before { width: 14px; }
#menu button small { display: block; font: 400 14px system-ui, sans-serif; color: #ffffff99; margin-top: 3px; }
#menu button.on { color: #fff; }
#menu button.on > span::after { content: "wybrane"; margin-left: 12px; vertical-align: middle; font: 600 11px system-ui, sans-serif;
                         letter-spacing: 2px; text-transform: uppercase; color: #e2453c; }
#menu button.ghost { margin-top: 22px; font-size: 16px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
                     color: #ffffff80; }
#menu .hint { position: absolute; left: 7vw; bottom: 28px; margin: 0; font-size: 12px; letter-spacing: 1px; color: #ffffff80; }
body.menu-open #hud, body.menu-open #minimap, body.menu-open #speed, body.menu-open #buttons { display: none; }
#menu h2.gap { margin-top: 26px; }
/* wyścig: czas u góry na środku, strzałka do następnej bramki, odliczanie, wynik */
#race { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff;
        text-shadow: 0 2px 8px #000c; pointer-events: none; z-index: 3; }
#race-lap { font: 700 15px system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #ffb300; }
#race-time { font: 800 40px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
#race-best { font: 500 13px system-ui, sans-serif; opacity: .85; font-variant-numeric: tabular-nums; }
#race-arrow { margin: 6px auto 0; width: 36px; font-size: 30px; line-height: 36px; color: #ffb300; }
#race-count { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
              font: 900 120px system-ui, sans-serif; color: #fff; text-shadow: 0 6px 30px #000c; }
#race-result { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; min-width: 320px;
               padding: 26px 34px; border-radius: 10px; background: #070a0ee0; color: #fff; text-align: center;
               box-shadow: 0 10px 40px #000a; }
#race-result h2 { margin: 0 0 6px; font: 600 13px system-ui, sans-serif; letter-spacing: 3px; text-transform: uppercase;
                  color: #ffffff99; }
#race-result .big { font: 800 52px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
#race-result .rec { color: #ffb300; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 4px 0 10px; }
#race-result .sub { color: #ffffffaa; margin: 4px 0 10px; }
#race-result ol { list-style: none; padding: 0; margin: 0 0 12px; font-variant-numeric: tabular-nums; color: #ffffffcc; }
#race-result li.best { color: #ffb300; }
#race-result .keys { margin: 0; font-size: 12px; color: #ffffff88; }
body.menu-open #race, body.menu-open #race-count, body.menu-open #race-result { display: none; }
/* nitro: pasek pod licznikiem prędkości */
#nitro { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); width: 180px; height: 10px; border-radius: 5px;
         background: #0b1220aa; box-shadow: 0 0 0 1px #ffffff40; overflow: hidden; pointer-events: none; }
#nitro-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2f6bff, #6fd6ff); transition: width .08s; }
#nitro.on #nitro-fill { background: linear-gradient(90deg, #6fd6ff, #ffffff); }
#nitro span { position: absolute; left: 0; right: 0; top: -15px; text-align: center; font: 700 9px system-ui, sans-serif;
              letter-spacing: 2px; color: #ffffffaa; text-shadow: 0 1px 3px #000; }
#speed { bottom: 44px; }
body.racing #help { display: none; }              /* pomoc zasłaniała czas wyścigu (H pokazuje) */
#race-toast { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 6; pointer-events: none;
              font: 900 34px system-ui, sans-serif; color: #6fd6ff; text-shadow: 0 3px 16px #000c; letter-spacing: 2px; }
body.menu-open #nitro, body.menu-open #race-toast { display: none; }
/* przedmiot z paczki: okienko obok paska nitro */
#item { position: fixed; left: calc(50% + 112px); bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
        border-radius: 8px; background: #0b1220b0; box-shadow: 0 0 0 1px #ffffff30; color: #ffffff80; pointer-events: none;
        font: 600 12px system-ui, sans-serif; }
#item b { font-size: 22px; line-height: 1; }
#item.full { color: #fff; box-shadow: 0 0 0 2px #ffb300; }
#item kbd { padding: 1px 6px; border-radius: 4px; background: #ffb300; color: #111; font: 800 11px system-ui, sans-serif; }
body.menu-open #item { display: none; }
/* menu online: pola tekstowe, kolory, lista graczy */
#menu .field { display: block; margin: 14px 0 6px; font: 600 12px system-ui, sans-serif; letter-spacing: 2px;
               text-transform: uppercase; color: #ffffff99; }
#menu input { display: block; width: 260px; margin-top: 6px; padding: 6px 0; font: 700 24px system-ui, sans-serif; color: #fff;
              background: none; border: 0; border-bottom: 2px solid #ffffff55; outline: none; letter-spacing: 0;
              text-transform: none; }
#menu input:focus { border-bottom-color: #e2453c; }
#menu input::placeholder { color: #ffffff40; }
#menu .swatches { display: flex; gap: 10px; margin-top: 8px; }
#menu .swatches button { width: 30px; height: 30px; padding: 0; margin: 0; border-radius: 50%; box-shadow: 0 0 0 2px #00000060; }
#menu .swatches button::before { display: none; }
#menu .swatches button.sel, #menu .swatches button.picked { padding: 0; box-shadow: 0 0 0 3px #fff; }
#menu .swatches button:disabled { opacity: .2; cursor: not-allowed; }
#menu button.small { font-size: 15px; color: #ffffff99; }
#menu .msg { min-height: 18px; margin: 8px 0 0; font: 600 13px system-ui, sans-serif; color: #ff8a80; }
#menu ul#room-players { list-style: none; padding: 0; margin: 10px 0; font: 700 20px system-ui, sans-serif; }
#menu ul#room-players li { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
#menu ul#room-players .dot, #race-result .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
#menu ul#room-players .tag { font: 600 11px system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #e2453c; }
#menu #room-config h2 { margin-top: 18px; }
#menu #room-config .opts { display: flex; flex-wrap: wrap; gap: 4px 22px; }
#menu #room-config .opts button { font-size: 20px; }
#menu #room-config .opts button.on { color: #fff; }
#menu #room-config .opts button.on::after { content: "✓"; margin-left: 8px; color: #e2453c; }
#menu #room-config .ro { font: 600 17px system-ui, sans-serif; color: #fff; margin: 4px 0; }
#race-result ol.online li { display: flex; align-items: center; justify-content: center; gap: 8px; }
#menu .msg.info { color: #ffffff99; }
/* prywatność i licencje: przewijany tekst */
#menu #menu-privacy .doc { max-height: 62vh; overflow-y: auto; padding-right: 14px; scrollbar-width: thin;
                           scrollbar-color: #ffffff40 transparent; font: 400 14px/1.5 system-ui, sans-serif;
                           color: #ffffffcc; }
#menu #menu-privacy h3 { margin: 16px 0 4px; font: 700 13px system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase;
                         color: #fff; }
#menu #menu-privacy p, #menu #menu-privacy ul { margin: 0 0 8px; }
#menu #menu-privacy ul { padding-left: 18px; }
#menu #menu-privacy a { color: #ff8a80; }
#menu #menu-privacy button.small { font-size: 14px; padding: 4px 0; }
#menu .panel { max-height: 92vh; }
/* Instagram autora pod „Prywatność i licencje” */
#menu a.insta { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; color: #ffffff99; text-decoration: none;
                font: 600 14px system-ui, sans-serif; }
#menu a.insta:hover, #menu a.insta:focus-visible { color: #fff; outline: none; }