/* KOP Z PÓŁOBROTU — oprawa strony. Cała gra żyje w <canvas>; CSS robi
   letterbox, sterowanie dotykowe, przyciski systemowe i panel wpisu nicku. */

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

/* The mode's brand is an actual link above every canvas and modal state. */
#zag-brand{display:none;position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:85;width:104px;height:72px;padding:3px 13px;background:#090a0dee;border:1px solid #d6b86d80;border-radius:10px;box-shadow:0 5px 22px #0009;align-items:center;justify-content:center;touch-action:manipulation}
body.zag-active #zag-brand{display:flex}
#zag-brand img{display:block;max-width:100%;max-height:100%;object-fit:contain}
#zag-brand:focus-visible{outline:3px solid #ffe49b;outline-offset:3px}
#zag-intro-skip{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));right:24px;z-index:80;background:#17111feb;border:1px solid #e0c17b;color:#ffe4ac;border-radius:7px;padding:14px 18px;font:11px Bungee,sans-serif;cursor:pointer}
#zag-intro-skip[hidden]{display:none}
body.zag-active #zagrozenie-panel{padding-top:90px}
body.zag-active .zag-card{max-height:calc(100dvh - 110px)}
@media(max-width:600px){#zag-brand{left:14px;transform:none;width:90px;height:66px}body.zag-active #zagrozenie-panel{padding-top:88px}body.zag-active .zag-card{max-height:calc(100dvh - 100px)}}
@media(max-height:500px) and (min-width:650px){#zag-brand{width:82px;height:58px}body.zag-active #zagrozenie-panel{padding-top:72px}body.zag-active .zag-card{max-height:calc(100dvh - 84px)}}

/* Street mode: DOM menus remain legible and keyboard-accessible at any size. */
#zagrozenie-panel { position:fixed; inset:0; z-index:65; display:grid; place-items:center; padding:20px; background:rgba(6,9,16,.78); color:#f6f1e5; touch-action:pan-y; }
#zagrozenie-panel[hidden], #zagrozenie-pad[hidden] { display:none !important; }
.zag-card { width:min(890px,100%); max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; padding:30px; background:#121824; border:1px solid #4f4a38; border-top:4px solid #f5cf6c; border-radius:15px; box-shadow:0 25px 100px #000a; touch-action:pan-y; }
.zag-card h2 { font:clamp(24px,4.5vw,42px)/1.1 Bungee,sans-serif; margin:10px 0 18px; letter-spacing:-1px; }
.zag-card p { line-height:1.55; margin:12px 0; }
.zag-eyebrow { display:block; font-size:11px; letter-spacing:2px; font-weight:800; color:#e5be66; }
.zag-poster { position:relative; min-height:238px; padding:0 0 18px; isolation:isolate; }
.zag-poster h2 { position:relative; z-index:2; max-width:70%; font-size:clamp(28px,5vw,53px); text-shadow:0 3px 18px #080b12; }
.zag-poster h2 em { font-style:normal; color:#f5cf6c; }
.zag-poster p { position:relative; z-index:2; font-size:14px; color:#d2d7df; }
.zag-poster img { position:absolute; right:-15px; bottom:0; height:270px; width:53%; object-fit:contain; object-position:right bottom; z-index:0; opacity:.92; mask-image:linear-gradient(to right,transparent,#000 15%); }
.zag-menu-body { border-top:1px solid #ffffff20; padding-top:16px; }
.zag-row,.zag-mode-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.zag-card button { min-height:44px; padding:12px 18px; color:#e4e9f0; background:#242e3e; border:1px solid #4b5668; border-radius:7px; font:12px Bungee,sans-serif; cursor:pointer; touch-action:manipulation; }
.zag-card button:hover { background:#34425a; border-color:#efd086; }
.zag-card button:focus-visible,.zag-card input:focus-visible { outline:3px solid #97e6ff; outline-offset:3px; }
.zag-card button.zag-primary { background:#f1cc6d; color:#18191b; border-color:#ffe5a5; }
.zag-card button:disabled { opacity:.55; cursor:wait; }
.zag-muted { color:#aeb9c8; font-size:13px; }
.zag-instructions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0 8px; }
.zag-instructions span { background:#1c2534; padding:10px; border-radius:6px; font-size:11px; color:#b6c2d4; }
.zag-instructions b { display:block; color:#f4d892; font-size:12px; margin-bottom:4px; }
.zag-tip { background:#1d2931; border-left:3px solid #81d5bd; padding:12px 15px; font-size:13px; color:#d4e3e5; }
.zag-footnote { color:#8793a4; font-size:10px; }
.zag-score { font:56px Bungee,sans-serif; color:#f4cf75; }.zag-score small { font-size:18px; }
.zag-card label { display:block; font-size:12px; margin:16px 0 8px; color:#b9c6d6; }
.zag-card input { font:16px Inter,sans-serif; min-height:45px; color:white; background:#090f19; border:1px solid #59647a; border-radius:7px; padding:10px 14px; width:230px; user-select:text; }
#zag-table { max-height:42vh; overflow:auto; margin:16px 0; touch-action:pan-y; }
#zag-table table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
#zag-table th { color:#b1bac8; font-size:10px; text-align:left; padding:9px; }
#zag-table td { padding:12px 9px; border-top:1px solid #ffffff12; }#zag-table td:nth-child(3) { color:#f2cc72; font-weight:800; }
.zag-empty { padding:30px 5px; color:#b5c2d4; }
body.zag-active #dotyk, body.zag-active #obroc { display:none !important; }
#zagrozenie-pad { position:fixed; inset:0; z-index:25; pointer-events:none; }
#zagrozenie-pad .zag-move,#zagrozenie-pad .zag-actions { position:absolute; bottom:max(14px,env(safe-area-inset-bottom)); display:flex; gap:8px; }
#zagrozenie-pad .zag-move { left:max(14px,env(safe-area-inset-left)); }
#zagrozenie-pad .zag-actions { right:max(14px,env(safe-area-inset-right)); }
#zagrozenie-pad button { width:65px; height:61px; background:#172539e8; border:2px solid #a9c9e4aa; color:#f3f4f5; border-radius:15px; font:12px Bungee,sans-serif; pointer-events:auto; touch-action:none; }
#zagrozenie-pad .zag-heavy { background:#a47124e8; border-color:#f2cf7b; }
#zagrozenie-pad button.pressed { transform:scale(.92); background:#d9ac48; color:#111; }
@media(max-height:600px) { .zag-card{padding:18px 24px}.zag-poster{min-height:165px}.zag-poster h2{font-size:36px;margin:8px 0}.zag-poster img{height:194px}.zag-poster p{font-size:12px}.zag-instructions{margin:10px 0 5px}.zag-card p{margin:8px 0}.zag-card button{padding:10px 14px}.zag-tip{padding:8px 12px}.zag-score{font-size:42px} }
@media(max-height:500px) and (min-width:650px) { .zag-card:has(.zag-poster){display:grid;grid-template-columns:32% 1fr;gap:20px;padding:16px;}.zag-poster{min-height:295px}.zag-poster h2{font-size:28px;max-width:100%}.zag-poster img{height:175px;width:100%;right:0;opacity:.75}.zag-poster p{font-size:11px}.zag-menu-body{padding:0;border:0}.zag-instructions{grid-template-columns:repeat(4,1fr);gap:4px}.zag-instructions span{padding:6px;font-size:9px}.zag-instructions b{font-size:10px}.zag-tip,.zag-muted{font-size:11px}.zag-card button{font-size:10px;padding:8px 12px}.zag-footnote{font-size:9px}.zag-eyebrow{font-size:9px;letter-spacing:1px} }
@media(max-width:560px) { #zagrozenie-panel{padding:10px}.zag-card{padding:20px 16px;max-height:calc(100dvh - 20px)}.zag-poster{min-height:205px}.zag-poster h2{font-size:32px;max-width:95%}.zag-poster img{height:165px;opacity:.52}.zag-poster p{max-width:70%;font-size:12px}.zag-instructions{grid-template-columns:repeat(2,1fr)}.zag-card button{font-size:10px;padding:10px 12px}.zag-mode-row>*{flex:1}#zagrozenie-pad button{width:48px;height:54px;font-size:10px}#zagrozenie-pad .zag-actions,#zagrozenie-pad .zag-move{gap:4px} }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0b0714;
  font-family: Inter, system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

/* Parking lobby: one decision, one launch button. Help is a separate screen. */
#zagrozenie-panel:has(.zag-lobby){background:radial-gradient(ellipse at 50% 35%,#29251f60,#050409ed);backdrop-filter:blur(7px)}
.zag-card.zag-lobby{padding:0;width:min(980px,100%);border:1px solid #a392565c;border-radius:12px;overflow:auto;background:#141211;box-shadow:0 40px 130px #000c}
.zag-hero{height:330px;position:relative;overflow:hidden;background:#292920;isolation:isolate}
.zag-hero-photo{position:absolute;inset:-10%;background:linear-gradient(90deg,#100d0bd9 5%,#26201715 80%),url('/kop/assets/zagrozenie/parking_ground_v3.webp') center 48%/cover;filter:contrast(1.12) saturate(.7);transform:scale(1.08)}
.zag-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#141211,transparent 38%),linear-gradient(105deg,transparent 55%,#ffcc5a20);pointer-events:none}
.zag-hero-title{position:absolute;z-index:3;left:38px;top:33px}
.zag-hero-title h2{font-size:clamp(42px,5.5vw,68px);line-height:1.03;margin:15px 0 12px;letter-spacing:-2px;text-shadow:3px 5px 0 #080606,0 0 35px #0009;transform:rotate(-3deg)}
.zag-hero-title h2 em{font-style:normal;color:#ffce55}
.zag-hero-title p{font-weight:700;font-size:15px;color:#f8ead0;text-shadow:0 2px 8px black}
.zag-hero-cast{position:absolute;height:310px;width:36%;object-fit:contain;object-position:center bottom;right:0;bottom:0;filter:drop-shadow(0 5px 13px #0008)}
.zag-hero-klecz{position:absolute;height:310px;width:170px;object-fit:contain;right:31%;bottom:-24px;transform:rotate(6deg);filter:drop-shadow(-9px 6px 9px #0009)}
.zag-stamp{position:absolute;right:25px;top:22px;color:#ffde86b0;border:2px solid #ffde8677;padding:7px 12px;transform:rotate(9deg);font:11px/1.25 Bungee,sans-serif;text-align:center}
.zag-launch{position:relative;padding:8px 38px 23px;text-align:center;background:linear-gradient(#141211,#1d1712)}
.zag-launch .zag-mode-row{justify-content:center;gap:0}
.zag-launch .zag-mode-row button{border-radius:0;min-height:36px;padding:8px 20px;background:transparent;color:#a69e8b;border-color:#4b4235;font-size:10px}
.zag-launch .zag-mode-row button:first-child{border-radius:6px 0 0 6px}.zag-launch .zag-mode-row button:last-child{border-radius:0 6px 6px 0}
.zag-launch .zag-mode-row .zag-primary{background:#423722;color:#ffe4a2;border-color:#b99c51}
.zag-launch #zag-mode-info{font-size:11px;color:#c2b7a0;margin:9px 0 13px}
.zag-launch #zag-play{width:min(490px,100%);height:66px;font-size:28px;letter-spacing:3px;background:linear-gradient(110deg,#ffe497,#efb836);border:1px solid #fff0b3;border-bottom:5px solid #8c6017;box-shadow:0 4px 28px #ffc8521c;transition:transform .15s,filter .15s}
.zag-launch #zag-play:hover{transform:translateY(-2px);filter:brightness(1.08)}
.zag-secondary{display:flex;justify-content:center;gap:12px;margin-top:12px}
.zag-secondary button{background:transparent;border:0;font-size:10px;min-height:36px;padding:7px 10px;color:#c6bca8}
.zag-secondary button:hover{background:#ffffff08;color:#ffe095}
.zag-lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.zag-lessons>div{padding:18px;background:#1c2731;border-radius:8px}.zag-lessons strong{display:block;font:35px Bungee;color:#edc974}.zag-lessons b{font-size:11px}.zag-lessons p{font-size:12px;color:#b9c8d0}
.zag-result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.zag-result-stats span{padding:12px;background:#ffffff07;border-radius:7px;font-size:11px;color:#b8c4cc;text-align:center}.zag-result-stats b{display:block;font:25px Bungee;color:#eee4cb}.zag-medals{display:flex;gap:12px;flex-wrap:wrap}.zag-medals span{font:9px Bungee;color:#708087}.zag-medals .earned{color:#ffdc84}
@media(max-width:600px){.zag-hero{height:295px}.zag-hero-title{left:22px;top:22px}.zag-hero-title h2{font-size:clamp(26px,11vw,46px)}.zag-hero-title h2 em{white-space:nowrap}.zag-hero-title .zag-eyebrow{font-size:8px;letter-spacing:1px}.zag-hero-title p{font-size:12px}.zag-hero-cast{height:175px;width:51%;right:-5%;bottom:-8px}.zag-hero-klecz{height:187px;width:130px;right:34%;bottom:-24px}.zag-stamp{font-size:7px;top:auto;bottom:30px;right:14px}.zag-launch{padding:8px 18px 18px}.zag-launch #zag-play{height:62px}.zag-secondary{gap:2px}.zag-secondary button{font-size:8px;padding:8px}.zag-lessons{gap:6px}.zag-lessons>div{padding:10px}.zag-lessons p{font-size:10px}.zag-lessons b{font-size:9px}}
@media(max-height:500px) and (min-width:650px){.zag-card.zag-lobby{display:grid;grid-template-columns:52% 48%;min-height:300px}.zag-hero{height:100%;min-height:300px}.zag-hero-title{left:22px;top:22px}.zag-hero-title h2{font-size:44px}.zag-hero-title .zag-eyebrow{font-size:8px}.zag-hero-title p{font-size:11px}.zag-hero-cast{height:180px;width:57%;right:-8%}.zag-hero-klecz{height:180px;width:150px;right:26%;bottom:-20px}.zag-stamp{display:none}.zag-launch{padding:32px 22px;display:flex;flex-direction:column;justify-content:center}.zag-secondary{flex-wrap:wrap;gap:0}.zag-launch #zag-play{height:60px;min-height:60px}.zag-launch .zag-mode-row button{padding:8px 10px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.zag-launch #zag-play{transition:none}.zag-launch #zag-play:hover{transform:none}}

#scena {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 28%, #1d1132 0%, #0b0714 70%);
}

#gra {
  display: block;
  /* JS ustawia realne wymiary; to tylko sensowny start przed pierwszym resize */
  max-width: 100%;
  max-height: 100%;
  image-rendering: auto;
  border-radius: 6px;
  box-shadow: 0 0 70px rgba(120, 60, 255, .25), 0 0 6px rgba(0, 0, 0, .8);
}

/* ── Pełny ekran (dotyk) ─────────────────────────────────────────────── */
/* JS prosi o fullscreen na #scena. UA rozciąga element sam, ale utrwalamy to
   jawnie i zdejmujemy gradient na rzecz czerni — inaczej na krawędziach
   letterboxa przy zmianie proporcji mignie inny kolor niż tło kanwy.
   UWAGA: :fullscreen i :-webkit-full-screen MUSZĄ stać w OSOBNYCH regułach —
   przeglądarka, która nie zna jednego z selektorów, wyrzuca całą regułę. */
#scena:fullscreen,
html:fullscreen,
body:fullscreen {
  width: 100%;
  height: 100%;
  background: #0b0714;
}
#scena:-webkit-full-screen,
html:-webkit-full-screen,
body:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #0b0714;
}
#scena::backdrop { background: #0b0714; }
#scena::-webkit-backdrop { background: #0b0714; }

/* Pełny ekran zdejmuje pasek przeglądarki, ale NIE zdejmuje wcięcia aparatu:
   w poziomie notch siedzi dokładnie z boku, czyli tam, gdzie joystick albo
   pady, a na dole zostaje pasek gestów. Stąd większy zapas niż w oknie. */
#scena:fullscreen #joy { left: max(24px, env(safe-area-inset-left, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
#scena:-webkit-full-screen #joy { left: max(24px, env(safe-area-inset-left, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
#scena:fullscreen #przyciski { right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
#scena:-webkit-full-screen #przyciski { right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
#scena:fullscreen #systemowe { top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
#scena:-webkit-full-screen #systemowe { top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }

/* ── Sterowanie dotykowe ─────────────────────────────────────────────── */

#dotyk { position: fixed; inset: 0; pointer-events: none; z-index: 20; }

#joy {
  position: absolute;
  left: max(18px, env(safe-area-inset-left, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 2px solid rgba(255, 255, 255, .18);
  pointer-events: auto;
}
#joy-galka {
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  border: 2px solid rgba(255, 255, 255, .35);
  transform: translate(-50%, -50%);
}

#przyciski {
  position: absolute;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  width: 200px;
  height: 180px;
  pointer-events: none;
}
.pad {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font: 800 13px/1.1 Inter, sans-serif;
  letter-spacing: .5px;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
}
.pad:active { background: rgba(255, 255, 255, .3); transform: scale(.95); }
.pad-kop {
  right: 0; bottom: 6px;
  width: 96px; height: 96px;
  background: rgba(255, 120, 60, .22);
  border-color: rgba(255, 150, 80, .6);
  font-size: 16px;
}
.pad-skok {
  right: 104px; bottom: 66px;
  width: 76px; height: 76px;
  background: rgba(80, 160, 255, .2);
  border-color: rgba(120, 190, 255, .55);
}

/* ── WYSOKIE NAPIĘCIE (duel.js) — dwa dodatkowe pady ─────────────────────
   Dwie klasy na #dotyk, obie ustawia game.js w rysuj(): `duel` = tryb
   (G.stan === 'duel', steruje układem i etykietami), `walka` = EKRAN
   (window.DUEL.D.ekran === 'walka' i brak pauzy, steruje widocznością).
   Poza walką padów nie ma (display:none zdejmuje też pointer-events, więc
   nie łapią tapów ani w trybie przygodowym, ani na ekranach menu duelu).
   Cały blok siedzi w prawym DOLNYM rogu — pas brandingu BNB jest u GÓRY
   ekranu i tap w niego otwiera YouTube, więc pady nie mogą go dotykać. */
.pad-duel { display: none; }
.lbl-duel { display: none; }
#dotyk.duel.walka .pad-duel { display: flex; }
#dotyk.duel .lbl-gra { display: none; }
#dotyk.duel .lbl-duel { display: inline; }

/* W duelu blok przycisków rośnie — cztery ataki + skok muszą się zmieścić
   bez zachodzenia na siebie (kciuk trafia w jeden, nie w dwa naraz).
   Układ: ŁUK pod kciuk, rosnący od prawego dolnego rogu. Każdy pad ≥ 68 px
   (LEKKI/CIĘŻKI 82 px — bije się nimi najczęściej). */
#dotyk.duel #przyciski { width: 186px; height: 262px; }
#dotyk.duel .pad-kop     { right: 4px;  bottom: 4px;   width: 82px; height: 82px; font-size: 14px; }
#dotyk.duel .pad-ciezki  { right: 92px; bottom: 22px;  width: 82px; height: 82px; font-size: 14px;
                           background: rgba(255, 70, 70, .24); border-color: rgba(255, 120, 110, .62); }
#dotyk.duel .pad-specjal { right: 8px;  bottom: 92px;  width: 74px; height: 74px; font-size: 11px;
                           background: rgba(190, 110, 255, .24); border-color: rgba(210, 150, 255, .62); }
#dotyk.duel .pad-super,
#dotyk.duel .pad-blok    { right: 94px; bottom: 110px; width: 74px; height: 74px; font-size: 11px; }
#dotyk.duel .pad-super   { background: rgba(255, 216, 77, .24); border-color: rgba(255, 216, 77, .7); }
#dotyk.duel .pad-blok    { background: rgba(120, 200, 255, .24); border-color: rgba(159, 232, 255, .7); }
#dotyk.duel .pad-skok    { right: 16px; bottom: 176px; width: 70px; height: 70px; font-size: 12px; }

/* Poza walką (także w pauzie) w pojedynku zostają dokładnie te sterowniki,
   co w menu głównym gry: gałka (góra/dół = wybór) + duży pad (zatwierdź)
   + mniejszy pad w slocie SKOK-a (wstecz). Pady ataku znikają — w menu nie
   ma czego bić, a zasłaniały siatkę postaci i pożerały tapy (handler pada
   robi stopPropagation i nie ustawia WE.tap, więc tap pod padem jest martwy).
   Blok stoi PO regułach `#dotyk.duel .pad-*` świadomie: ma je nadpisywać. */
#dotyk.duel:not(.walka) #joy         { display: block; }
#dotyk.duel:not(.walka) #przyciski   { width: 200px; height: 180px; }
#dotyk.duel:not(.walka) .pad-kop     { display: flex; right: 0;     bottom: 6px;  width: 96px; height: 96px; font-size: 16px; }
#dotyk.duel:not(.walka) .pad-ciezki  { display: flex; right: 104px; bottom: 66px; width: 76px; height: 76px; font-size: 13px;
                                       background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .40); }
#dotyk.duel:not(.walka) .pad-skok,
#dotyk.duel:not(.walka) .pad-specjal,
#dotyk.duel:not(.walka) .pad-super,
#dotyk.duel:not(.walka) .pad-blok    { display: none; }

/* Etykiety padów: KOP (przygoda) / LEKKI+CIĘŻKI (walka 1v1) / WYBIERZ+WSTECZ
   (menu 1v1). Poza pojedynkiem `.lbl-menu` nie pokazuje się nigdy. */
.lbl-menu { display: none; }
#dotyk.duel:not(.walka) .lbl-duel { display: none; }
#dotyk.duel:not(.walka) .lbl-menu { display: inline; }

/* Opcja „BLOK PRZYCISKIEM" (menu duelu, domyślnie WYŁ) zamienia slot SUPER
   na BLOK — obie klasy siedzą w tym samym miejscu, więc widoczna jest zawsze
   dokładnie jedna. Klasę `blok-przycisk` na #dotyk ustawia duel.js. */
#dotyk.duel.walka .pad-blok { display: none; }
#dotyk.duel.walka.blok-przycisk .pad-super { display: none; }
#dotyk.duel.walka.blok-przycisk .pad-blok  { display: flex; }

/* SUPER gotowy (pasek mocy 100) — kontrakt: „SUPER (podświetlony przy pełnym
   pasku)". Klasę `super-gotowy` ustawia game.js, tylko przy ZMIANIE stanu.
   Reguła wisi na .walka, więc w menu nic nie miga; w trybie BLOK PRZYCISKIEM
   pad SUPER ma display:none i podświetlenie jest bezprzedmiotowe. */
@keyframes pulsSuper {
  from { box-shadow: 0 0 0 0 rgba(255, 216, 77, .55); background: rgba(255, 216, 77, .24); }
  to   { box-shadow: 0 0 14px 4px rgba(255, 216, 77, .75); background: rgba(255, 216, 77, .5); }
}
#dotyk.duel.walka.super-gotowy .pad-super {
  border-color: #fff;
  color: #fff;
  animation: pulsSuper .5s infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  #dotyk.duel.walka.super-gotowy .pad-super {
    animation: none;
    background: rgba(255, 216, 77, .5);
    box-shadow: 0 0 12px 3px rgba(255, 216, 77, .7);
  }
}

/* ── Przyciski systemowe ─────────────────────────────────────────────── */

#systemowe {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  display: flex;
  gap: 8px;
  z-index: 30;
}
#systemowe button {
  /* min. 44 px — cel dotykowy wg HIG/WCAG; to jedyne sterowniki pauzy/dźwięku */
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(20, 12, 36, .75);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
#systemowe button:hover { background: rgba(60, 40, 100, .85); }
#systemowe button:focus-visible { outline: 2px solid #ffd84d; outline-offset: 2px; }

/* ── Podpowiedź pionowego telefonu ───────────────────────────────────── */

#obroc {
  display: none;
  position: fixed;
  /* pod pasem przycisków ⏸/🔊 (44 px + margines), nie pod nimi samymi */
  top: calc(max(10px, env(safe-area-inset-top, 0px)) + 52px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 12, 36, .9);
  color: #ffd84d;
  font: 600 13px/1.3 Inter, sans-serif;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 216, 77, .4);
  z-index: 25;
  max-width: min(78vw, 320px);
  text-align: center;
  pointer-events: none;
}
@media (orientation: portrait) and (max-width: 760px) {
  #obroc { display: block; }
  /* W pionie kanwa ma proporcje 16:9 na ekranie 9:19,5 — po wyśrodkowaniu
     zostawało ~300 px pustki NAD nią, a gałka i pady leżały NA obrazie.
     Wypychamy kanwę pod pigułkę „OBRÓĆ TELEFON" (top 52…90 px), a całe
     sterowanie ląduje w czarnym pasie POD kanwą i niczego nie zasłania.
     Dotyczy też trybu przygodowego — tam to ta sama poprawa.
     UWAGA na wysokość pigułki: przy max-width min(78vw, 320px) tekst
     „🔄 Obróć telefon poziomo…" łamie się na 375 px na TRZY linie i pigułka
     ma ~69 px (top 52 → dół ~131). Zapas 96 px był za mały — pigułka leżała
     NA kanwie i zakrywała logo / tytuł ekranu / paski HP. Stąd 52 + 69 + 8 px
     zapasu ≈ 130 px liczone od tej samej podstawy co `top` pigułki. */
  #scena {
    align-items: flex-start;
    padding-top: max(140px, calc(env(safe-area-inset-top, 0px) + 130px));
  }
}

/* ── Panel wpisu nicku ───────────────────────────────────────────────── */

#nick-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 12, .72);
  padding: 16px;
}
#nick-panel[hidden] { display: none; }

.karta-nick {
  width: min(420px, 92vw);
  background: linear-gradient(180deg, #1e1433 0%, #140d24 100%);
  border: 1px solid rgba(255, 216, 77, .35);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  color: #fff;
  text-align: center;
}
.karta-nick h2 {
  font: 400 22px/1.2 Bungee, Inter, sans-serif;
  color: #ffd84d;
  margin-bottom: 14px;
}
.karta-nick label {
  display: block;
  font: 600 13px/1.4 Inter, sans-serif;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 8px;
}
.karta-nick input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: 700 18px/1.2 Inter, sans-serif;
  text-align: center;
  -webkit-user-select: text;
  user-select: text;
}
.karta-nick input:focus {
  outline: none;
  border-color: #ffd84d;
  background: rgba(255, 255, 255, .13);
}
.blad {
  margin-top: 10px;
  font: 600 13px/1.4 Inter, sans-serif;
  color: #ff8a8a;
}
.rzad {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.rzad button {
  flex: 1;
  padding: 13px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: 800 14px/1 Inter, sans-serif;
  letter-spacing: .4px;
  cursor: pointer;
}
.rzad button:hover { background: rgba(255, 255, 255, .16); }
.rzad button.glowny {
  background: #ffd84d;
  border-color: #ffd84d;
  color: #241a05;
}
.rzad button.glowny:hover { background: #ffe680; }
.rzad button:focus-visible { outline: 2px solid #7fe0ff; outline-offset: 2px; }
.drobne {
  margin-top: 12px;
  font: 400 11px/1.4 Inter, sans-serif;
  color: rgba(255, 255, 255, .45);
}

/* ── Modal PRYWATNOŚĆ (RODO) ─────────────────────────────────────────────
   Wyżej niż WSZYSTKO inne (#dotyk 20, #systemowe 30, #nick-panel 40): modal
   ma przykryć scenę w całości, żeby żaden tap nie doleciał do padów, do
   przycisków systemowych ani do stref brandingu BNB na kanwie. */

#prywatnosc {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 12, .84);
  padding: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
           max(12px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
}
#prywatnosc[hidden] { display: none; }

.karta-pryw {
  width: min(680px, 94vw);
  max-height: min(88vh, 640px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1e1433 0%, #140d24 100%);
  border: 1px solid rgba(255, 216, 77, .35);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  color: #fff;
}
.karta-pryw h2 {
  font: 400 24px/1.2 Bungee, Inter, sans-serif;
  color: #ffd84d;
  text-align: center;
  letter-spacing: .5px;
  margin-bottom: 10px;
}

/* Jedyny przewijany obszar w całej grze — body ma touch-action:none i
   overflow:hidden, więc palec musi dostać zgodę tutaj (pan-y), a scroll nie
   może wyciekać na stronę (overscroll-behavior). Tekst da się zaznaczyć. */
.pryw-tresc {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 2px 10px 2px 2px;
  text-align: left;
  -webkit-user-select: text;
  user-select: text;
}
.pryw-tresc h3 {
  font: 800 12px/1.3 Inter, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #ffd84d;
  margin: 14px 0 3px;
}
.pryw-tresc p {
  font: 400 14px/1.55 Inter, sans-serif;
  color: rgba(255, 255, 255, .84);
}
.pryw-tresc p.pryw-wstep {
  color: #fff;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.pryw-tresc a { color: #7fe0ff; }
.pryw-tresc:focus-visible { outline: 2px solid rgba(127, 224, 255, .7); outline-offset: 2px; }

#pryw-zamknij {
  align-self: center;
  margin-top: 14px;
  min-width: 190px;
  /* min. 44 px wysokości — cel dotykowy wg HIG/WCAG */
  padding: 14px 22px;
  border-radius: 10px;
  border: 1px solid #ffd84d;
  background: #ffd84d;
  color: #241a05;
  font: 800 14px/1 Inter, sans-serif;
  letter-spacing: .4px;
  cursor: pointer;
}
#pryw-zamknij:hover { background: #ffe680; }
#pryw-zamknij:focus-visible { outline: 2px solid #7fe0ff; outline-offset: 3px; }

@media (max-height: 460px) {
  .karta-pryw { max-height: 94vh; padding: 12px 14px 10px; }
  .karta-pryw h2 { font-size: 19px; margin-bottom: 6px; }
  .pryw-tresc p { font-size: 13px; }
  #pryw-zamknij { margin-top: 10px; padding: 11px 20px; }
}

/* Parking: joystick, three deliberate actions, portrait canvas fills the screen. */
body.zag-active #scena { padding:0; align-items:center; }
body.zag-active #gra { border-radius:0; box-shadow:none; flex-shrink:0; }
#zag-stick {position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));width:132px;height:132px;border:2px solid #add9c980;border-radius:50%;background:#193537d9;pointer-events:auto;touch-action:none;display:grid;place-items:center;box-shadow:inset 0 0 25px #091b2266}
#zag-stick .zag-stick-cross {font:60px sans-serif;color:#b3d5bf30;pointer-events:none}
#zag-knob {position:absolute;width:53px;height:53px;border-radius:50%;background:#a7d9bd;border:3px solid #d8eee0;box-shadow:0 4px 15px #0b222a;pointer-events:none}
#zagrozenie-pad .zag-actions {align-items:flex-end;bottom:max(35px,env(safe-area-inset-bottom));gap:10px}
#zagrozenie-pad .zag-actions button {width:70px;height:70px;border-radius:50%;background:#1d3b3dea;border-color:#accab8}
#zagrozenie-pad .zag-actions .zag-heavy {width:86px;height:86px;background:#e6c878;color:#14252b;border-color:#fff0b0;font-size:17px}
#zagrozenie-pad #zag-touch-pause {position:absolute;top:14px;right:12px;width:40px;height:36px;opacity:.9;background:#192c31}
@media(max-width:560px){#zag-stick{width:116px;height:116px;left:14px;bottom:26px}#zagrozenie-pad .zag-actions{gap:5px;right:12px;bottom:40px}#zagrozenie-pad .zag-actions button{width:49px;height:49px;font-size:9px}#zagrozenie-pad .zag-actions .zag-heavy{width:65px;height:65px;font-size:15px}}
@media(max-height:500px) and (orientation:landscape){#zag-stick{width:98px;height:98px;bottom:12px}#zag-knob{width:42px;height:42px}#zagrozenie-pad .zag-actions{bottom:14px}#zagrozenie-pad .zag-actions button{width:54px;height:54px}#zagrozenie-pad .zag-actions .zag-heavy{width:68px;height:68px}}