* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #111; font-family: 'Segoe UI', system-ui, sans-serif; color: #eee; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
#loading, #click { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 6, .55); z-index: 10; cursor: pointer; }
#loading { background: #0d0b09; }
.box { text-align: center; }
.box h1 { font-size: 64px; letter-spacing: 14px; font-weight: 800; color: #ff8a3d; text-shadow: 0 0 30px rgba(255, 110, 30, .5); }
.box p { margin-top: 12px; font-size: 20px; opacity: .9; }
.box small { display: block; margin-top: 6px; opacity: .5; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: rgba(255, 255, 255, .85); box-shadow: 0 0 2px #000; }
#crosshair::before { left: 8px; top: 0; width: 2px; height: 18px; }
#crosshair::after { top: 8px; left: 0; height: 2px; width: 18px; }
#weapon { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 8px; }
#weapon span { padding: 6px 14px; border-radius: 6px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .15); font-size: 14px; opacity: .6; }
#weapon span.on { opacity: 1; border-color: #ff8a3d; color: #ffb27a; }
#hint { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); font-size: 14px; text-shadow: 0 1px 3px #000; opacity: .9; }
#help { position: absolute; left: 16px; top: 14px; font-size: 13px; line-height: 1.6; background: rgba(0, 0, 0, .4); padding: 8px 12px; border-radius: 6px; }
#help b { color: #ffb27a; font-weight: 600; }
#stats { position: absolute; right: 14px; top: 14px; font: 12px/1.5 Consolas, monospace; background: rgba(0, 0, 0, .55); padding: 8px 12px; border-radius: 6px; white-space: pre; }

/* multiplayer: plakietka gry (net/mp.js) */
.mp-badge { position: fixed; top: 10px; right: 14px; z-index: 6; pointer-events: none; padding: 4px 10px; border-radius: 4px; background: rgba(8,10,14,.55);
  font: 600 12px/1.3 "Segoe UI", sans-serif; color: #eef4fb; text-shadow: 0 1px 2px #000; }
.mp-badge:empty { display: none; }
.mp-badge b { color: #ffe08a; letter-spacing: .1em; }

/* multiplayer: zwolniony kursor (inne okno) — mały pasek u góry zamiast zasłony; gra idzie dalej */
body.mp-on #click { inset: 12px auto auto 50%; transform: translateX(-50%); background: rgba(8, 10, 14, .6); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 4px; padding: 6px 14px; }
body.mp-on #click h1 { display: none; }
body.mp-on #click p { margin: 0; font-size: 14px; }

/* bullet time: winieta i lekkie przygaszenie kolorów (opacity sterowane z main.js) */
.bt-vignette { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(10, 6, 4, .55) 100%); box-shadow: inset 0 0 120px rgba(0, 0, 0, .45); }

/* pod ostrzałem: rozmycie tylko przy krawędziach ekranu (maska — środek ostry); siłę daje opacity z main.js */
.supp-blur { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  mask-image: radial-gradient(ellipse 62% 58% at center, transparent 45%, #000 100%); -webkit-mask-image: radial-gradient(ellipse 62% 58% at center, transparent 45%, #000 100%); }

/* zrzut z helikoptera (intro.js): duża podpowiedź na dole ekranu */
.intro-hint { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 7; text-align: center; pointer-events: none;
  color: #fff; text-shadow: 0 2px 8px #000c; font-family: "Oswald", "Segoe UI", sans-serif; }
.intro-hint b { display: block; font: 700 30px/1.1 "Black Ops One", "Oswald", sans-serif; letter-spacing: .06em; color: #ffe08a; }
.intro-hint span { display: block; margin-top: 6px; font-size: 15px; opacity: .9; }
.intro-hint.hidden { display: none; }