/* NEBULA 4 — style. Estetyka: neonowy wektor-arcade na tle głębokiego kosmosu. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --tlo: #0d1117;
  --panel: rgba(22, 27, 34, .9);
  --neon: #3fb950;   /* akcent z app.budartai.com */
  --tekst: #c9d1d9;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--tlo);
  color: var(--tekst);
  font-family: 'Chakra Petch', sans-serif;
  touch-action: none;              /* wyłącza scroll/zoom palcem — gramy! */
  -webkit-user-select: none; user-select: none;
}

/* ---------- LOBBY ---------- */
#lobby {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 700px at 70% 20%, rgba(63,185,80,.08), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(255,79,216,.07), transparent 60%),
    var(--tlo);
}
.lobby-box {
  width: min(92vw, 420px);
  padding: 34px 28px;
  background: var(--panel);
  border: 1px solid rgba(63,185,80,.35);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 0 60px rgba(63,185,80,.12);
}
h1 {
  font-family: 'Bungee', cursive;
  font-size: clamp(2.2rem, 8vw, 3rem);
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 0 18px var(--neon), 0 0 40px rgba(63,185,80,.5);
}
.sub { margin: 8px 0 14px; font-size: .85rem; opacity: .8; }

/* ---------- WYBÓR TRYBU (co-op / deathmatch) ---------- */
.tryb-wybor { display: flex; gap: 8px; margin: 0 0 16px; }
.tryb-btn {
  flex: 1; padding: 10px 4px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; line-height: 1.1;
  background: #0d1117; color: var(--tekst);
  border: 1px solid rgba(63,185,80,.3); border-radius: 8px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .02em;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.tryb-btn small { font-weight: 500; font-size: .56rem; opacity: .6; letter-spacing: 0; }
.tryb-btn.aktywny { border-color: var(--neon); color: #fff; box-shadow: 0 0 14px rgba(63,185,80,.3); }
.tryb-btn[data-tryb="pvp"].aktywny { border-color: #ff4f6d; color: #fff; box-shadow: 0 0 14px rgba(255,79,109,.4); }
.tryb-btn[data-tryb="team"].aktywny { border-color: #ffb03a; color: #fff; box-shadow: 0 0 14px rgba(255,176,58,.4); }

/* ---------- WYBÓR BOTÓW ---------- */
.boty-wybor { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; }
.boty-label { font-size: .78rem; opacity: .75; margin-right: 2px; white-space: nowrap; }
.boty-btn {
  flex: 1; padding: 8px 4px; cursor: pointer;
  background: #0d1117; color: var(--tekst);
  border: 1px solid rgba(63,185,80,.3); border-radius: 8px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: .8rem;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.boty-btn.aktywny { border-color: var(--neon); color: #fff; box-shadow: 0 0 12px rgba(63,185,80,.3); }

#nick {
  width: 100%; padding: 12px 14px;
  background: #0d1117; color: #fff;
  border: 1px solid rgba(63,185,80,.4); border-radius: 8px;
  font: inherit; font-size: 1rem; text-align: center; outline: none;
}
#nick:focus { border-color: var(--neon); box-shadow: 0 0 12px rgba(63,185,80,.4); }
#btnDalej, #btnDolacz {
  margin-top: 14px; width: 100%; padding: 13px;
  font-family: 'Bungee', cursive; font-size: 1.05rem; letter-spacing: .08em;
  color: #0d1117; background: var(--neon);
  border: 0; border-radius: 8px; cursor: pointer;
  transition: transform .08s, box-shadow .15s;
}
#btnDalej:hover, #btnDolacz:hover { box-shadow: 0 0 24px rgba(63,185,80,.7); }
#btnDalej:active, #btnDolacz:active { transform: scale(.97); }
.wtorny {
  margin-top: 10px; width: 100%; padding: 9px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: .82rem;
  color: var(--tekst); background: transparent;
  border: 1px solid rgba(63,185,80,.3); border-radius: 8px; cursor: pointer;
  transition: border-color .15s;
}
.wtorny:hover { border-color: var(--neon); }

/* ---------- EKRAN OBJAŚNIEŃ ---------- */
#ekran-brief h2 {
  font-family: 'Bungee', cursive; font-size: 1.5rem; color: #fff;
  text-shadow: 0 0 14px var(--neon); margin-bottom: 4px;
}
.brief-sekcja { margin: 14px 0; text-align: left; }
.brief-sekcja h3 {
  font-family: 'Chakra Petch', sans-serif; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--neon); margin-bottom: 4px; opacity: .9;
}
.brief-sekcja p { font-size: .82rem; line-height: 1.55; opacity: .85; }
.hint { margin-top: 18px; font-size: .74rem; line-height: 1.7; opacity: .65; }
.info { margin-top: 10px; font-size: .8rem; color: #ff6b6b; min-height: 1.2em; }

/* ---------- SYGNATURA „powered by BudArtAI" (marka budartai.com) ---------- */
:root { --ba-blue: #2563eb; --ba-green: #22c55e; }
.powered {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 22px;
  font-size: .82rem; letter-spacing: .04em;
  color: #7d8bb0; text-decoration: none;
  opacity: .8; transition: opacity .15s, color .15s;
}
a.powered:hover { opacity: 1; }
.powered b { color: var(--ba-blue); font-weight: 700; }
a.powered:hover b { text-shadow: 0 0 12px rgba(37,99,235,.7); }
.ba-mark { width: 18px; height: 18px; flex: 0 0 auto; overflow: visible; }
.ba-mark path {
  fill: none; stroke: var(--ba-green); stroke-width: 2.1;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(34,197,94,.55));
}

/* warianty w rogach ekranu podczas gry — większa, wyraźniejsza czcionka */
.powered-gra {
  position: fixed; bottom: 11px; z-index: 15;
  margin: 0; opacity: .62;
  font-size: .95rem;
}
.powered-gra .ba-mark { width: 21px; height: 21px; }
.powered-prawo { right: 14px; }
.powered-lewo { left: 14px; }
a.powered-gra:hover { opacity: 1; }
.powered-copy { cursor: default; }        /* © to czysty tekst, nie link */
@media (max-width: 640px) {
  .powered-gra { bottom: 7px; font-size: .8rem; }
  .powered-prawo { right: 9px; }
  .powered-lewo { left: 9px; }
}

/* ---------- CANVAS ---------- */
#gra { position: fixed; inset: 0; display: block; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 14px; pointer-events: none;
}
.hud-lewy { display: flex; flex-direction: column; gap: 2px; }
#tryb {
  font-family: 'Bungee', cursive; font-size: .82rem; color: #ff4f6d;
  text-shadow: 0 0 10px rgba(255,79,109,.7);
}
#fala {
  font-family: 'Bungee', cursive; font-size: 1rem; color: #fff;
  text-shadow: 0 0 10px var(--neon);
}
#wyniki { text-align: right; font-size: .78rem; line-height: 1.5; }
#wyniki .rzad { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
#wyniki .kropka { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
#wyniki .martwy { opacity: .4; text-decoration: line-through; }

/* ---------- BANER (fala / boss / game over) ---------- */
#baner {
  position: fixed; top: 22%; left: 0; right: 0; z-index: 20;
  text-align: center; pointer-events: none;
  font-family: 'Bungee', cursive;
  font-size: clamp(1.6rem, 6vw, 3rem);
  color: #fff; text-shadow: 0 0 20px var(--neon);
  opacity: 0; transition: opacity .3s;
  white-space: pre-line;
}
#baner.boss { color: #ff4f6d; text-shadow: 0 0 24px #ff4f6d; }
#baner.pokaz { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}