:root {
  --accent: #ff9f43;
  --text: #f4f6fb;
  --muted: #b3bdd2;
  --glass: rgba(13, 19, 33, 0.66);
  --line: rgba(255, 255, 255, 0.13);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b1020;
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

/* HUD počas hry */
#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.panel {
  position: fixed;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(10, 14, 26, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--muted);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}
#stats {
  top: calc(env(safe-area-inset-top) + 12px);
  left: calc(env(safe-area-inset-left) + 12px);
  white-space: pre;
  pointer-events: auto;      /* ťuknutím sa panel zbalí na samotné FPS */
  cursor: pointer;
}
#stats[hidden] { display: none; }
/* FPS: krúžok v hornom rade za ostatnými tlačidlami (☰, body, pohľad, správa); ťuknutím sa z neho
   rozbalí panel s podrobnosťami (a ďalším ťuknutím zbalí). Miesto v rade: PC 70 / online 186,
   mobil 128 / online 244. */
body.playing #stats { top: calc(env(safe-area-inset-top) + 12px); left: calc(env(safe-area-inset-left) + 70px); z-index: 5; }
body.playing.online #stats { left: calc(env(safe-area-inset-left) + 186px); }
body.playing.touch #stats, body.playing.pad #stats { left: calc(env(safe-area-inset-left) + 128px); }
body.playing.online.touch #stats, body.playing.online.pad #stats { left: calc(env(safe-area-inset-left) + 244px); }
#stats.kruh {
  z-index: 5; display: grid; place-content: center; justify-items: center; gap: 1px;
  width: 48px; height: 48px; padding: 0; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%;
  background: rgba(10, 14, 26, 0.45); color: #fff;
  font: 700 15px/1 system-ui, sans-serif; white-space: normal;
}
#stats.kruh[hidden] { display: none; }
/* rozbalený panel ide pod krúžok – nesmie zakryť body a časomieru hore v strede (#hud, tá je aj tak navrchu);
   v Zombie meste ešte nižšie, pod zdravie a civilistov (#zhud) */
body.playing #stats:not(.kruh) { top: calc(env(safe-area-inset-top) + 68px); }
body.playing.zombie #stats:not(.kruh) { top: calc(env(safe-area-inset-top) + 128px); }
body.playing.touch #stats:not(.kruh) { font-size: 10.5px; }
#stats.kruh small { font: 600 8px/1 system-ui, sans-serif; letter-spacing: 0.06em; opacity: 0.7; }

/* Výdrž na beh – dole v strede, len keď nie je plná */
#stamina {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  width: 180px;
  height: 8px;
  margin-left: -90px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 99px;
  background: rgba(10, 14, 26, 0.5);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
#stamina.show { opacity: 1; }
#stamina-fill { height: 100%; background: var(--accent); transform-origin: left; }
#stamina.tired #stamina-fill { background: #8a93a6; } /* vyčerpaný – čaká na oddych */
body:not(.playing) #stamina { display: none; }

/* Minimapa vpravo hore – ťuknutím 3 veľkosti */
#minimap {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 12px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: #dfe5ee;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  touch-action: none;
  transition: width 0.2s, height 0.2s, opacity 0.25s;
}
body:not(.playing) #minimap { opacity: 0; pointer-events: none; }

#toast {
  position: fixed;
  top: 16px;
  left: 50%;
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(10, 14, 26, 0.7);
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* PC vs. mobil: body.touch sa zapne pri dotyku */
body.touch #crosshair { display: none; }
body.police #crosshair { display: none; }

/* Zameriavač policajta: štyri čiarky okolo stredu; pri mierení sa stiahnu k bodu */
#reticle { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; display: none; --gap: 15px; --reload: 0; }
#reticle.show { display: block; }
/* náboje v samopale – malé číslo vpravo dolu od zameriavača */
#ammo { position: fixed; left: calc(50% + 24px); top: calc(50% + 16px); pointer-events: none; z-index: 5;
  font: 700 15px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  padding-left: 14px; background: linear-gradient(#e2c178, #b88a3a) no-repeat left center / 5px 12px; border-radius: 1px; }
#ammo[hidden] { display: none; }
#ammo.empty { color: #ff6b5e; }
#reticle.aim { --gap: 6px; }
#reticle i { position: absolute; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease-out, opacity 0.12s; opacity: 0.75; }
#reticle.aim i { opacity: 1; }
#reticle i:nth-child(1), #reticle i:nth-child(2) { width: 2px; height: 8px; left: -1px; }
#reticle i:nth-child(3), #reticle i:nth-child(4) { width: 8px; height: 2px; top: -1px; }
#reticle i:nth-child(1) { top: 0; transform: translateY(calc(-1 * var(--gap) - 8px)); }
#reticle i:nth-child(2) { top: 0; transform: translateY(var(--gap)); }
#reticle i:nth-child(3) { left: 0; transform: translateX(calc(-1 * var(--gap) - 8px)); }
#reticle i:nth-child(4) { left: 0; transform: translateX(var(--gap)); }
#reticle b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
/* nabíjanie: krúžok sa dopĺňa */
#reticle::after { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  opacity: 0; transition: opacity 0.15s;
  background: conic-gradient(rgba(255, 215, 106, 0.9) calc(var(--reload) * 360deg), rgba(255, 255, 255, 0.18) 0);
  -webkit-mask: radial-gradient(circle, transparent 18px, #000 19px, #000 21px, transparent 22px);
  mask: radial-gradient(circle, transparent 18px, #000 19px, #000 21px, transparent 22px); }
#reticle.reload::after { opacity: 1; }
#reticle.reload i { opacity: 0.35; }

/* zásah: krížik okolo zameriavača (do hlavy červený) */
#hitmark { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; }
#hitmark i { position: absolute; left: -1px; top: -7px; width: 2px; height: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
#hitmark i:nth-child(1) { transform: rotate(45deg) translateY(-13px); }
#hitmark i:nth-child(2) { transform: rotate(135deg) translateY(-13px); }
#hitmark i:nth-child(3) { transform: rotate(225deg) translateY(-13px); }
#hitmark i:nth-child(4) { transform: rotate(315deg) translateY(-13px); }
#hitmark.head i { background: #ff4a3d; }
#hitmark.show { animation: hitmark 0.45s ease-out; }
@keyframes hitmark { 0% { opacity: 1; transform: scale(1.35); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* Dotykové ovládanie */
#touch {
  position: fixed;
  inset: 0;
  display: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body.touch.playing #touch { display: block; }

#touch-move,
#touch-look { position: absolute; top: 0; bottom: 0; }
#touch-move { left: 0; width: 45%; }
#touch-look { right: 0; width: 55%; }

#stick {
  position: absolute;
  left: calc(env(safe-area-inset-left) + 100px);
  top: calc(100% - env(safe-area-inset-bottom) - 100px);
  width: 124px;
  height: 124px;
  margin: -62px 0 0 -62px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.28);
  opacity: 0.55;
  transition: opacity 0.2s;
  pointer-events: none;
}
#stick.active { opacity: 1; transition: none; }
#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
#stick.running #stick-knob { background: var(--accent); }

.touch-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.45);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  touch-action: none;
}
.touch-btn.pressed,
.touch-btn:active { background: rgba(255, 159, 67, 0.92); color: #1b1206; }
.touch-btn.small { width: 48px; height: 48px; }

#btn-attack { right: calc(env(safe-area-inset-right) + 24px); bottom: calc(env(safe-area-inset-bottom) + 28px); width: 86px; height: 86px; }
#btn-attack .icon-gun, body.police #btn-attack .icon-sword { display: none; }
body.police #btn-attack .icon-gun { display: block; }
/* druhé tlačidlo streľby vľavo – nad páčkou, v strede (páčka má stred 100 px od ľavého a dolného okraja,
   polomer 62 px; HOVOR a TÍM sú dole pod ňou), len policajt a len keď je zapnuté v nastavení */
#btn-attack-left { display: none; left: calc(env(safe-area-inset-left) + 68px); bottom: calc(env(safe-area-inset-bottom) + 176px);
  width: 64px; height: 64px; }
body.police.left-fire #btn-attack-left { display: grid; }
#btn-aim { display: none; right: calc(env(safe-area-inset-right) + 34px); bottom: calc(env(safe-area-inset-bottom) + 128px);
  width: 62px; height: 62px; font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.03em; }
body.police #btn-aim { display: grid; }
#btn-aim.on { background: rgba(255, 159, 67, 0.92); color: #1b1206; }
/* skok: malé tlačidlo nad pokrikom STÁŤ (mimo veľkého tlačidla streľby, nech nezavadzia) */
#btn-jump { right: calc(env(safe-area-inset-right) + 128px); bottom: calc(env(safe-area-inset-bottom) + 96px); width: 54px; height: 54px; }
#btn-jump svg { width: 24px; height: 24px; }

/* STÁŤ: po použití sa dobíja – zdola nahor sa napĺňa zelenou, celé zelené = dá sa stlačiť */
#btn-shout { right: calc(env(safe-area-inset-right) + 124px); bottom: calc(env(safe-area-inset-bottom) + 24px); width: 62px; height: 62px;
  font: 700 12px/1 system-ui, sans-serif; letter-spacing: 0.04em; overflow: hidden; --p: 1; }
#btn-shout {
  background-image: linear-gradient(to top, rgba(64, 190, 80, 0.92) calc(var(--p) * 100%), rgba(64, 190, 80, 0) calc(var(--p) * 100%));
}
#btn-shout.ready { border-color: #8fe07a; color: #f2fff0; }
#btn-shout:not(.ready) { color: rgba(255, 255, 255, 0.7); }
#btn-shout.off { opacity: 0.35; }

/* Pri dverách: nápoveda (PC) a tlačidlo VOJSŤ / VON (mobil) */
#prompt {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 90px); transform: translateX(-50%);
  padding: 8px 16px; border-radius: 10px; background: rgba(10, 14, 26, 0.72); color: #fff;
  font: 600 15px/1.2 system-ui, sans-serif; pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
#prompt b { display: inline-block; min-width: 1.6em; margin-right: 6px; padding: 2px 7px; border-radius: 6px;
  background: #ffd76a; color: #1b1206; text-align: center; }
#prompt.show { opacity: 1; }
body.touch #prompt { display: none; }
/* nad KĽAK a SKOK, presne do stredu medzi ne (KĽAK má stred 217 px, SKOK 155 px od pravého okraja, vrch 150 px
   od spodku); ukáže sa, len keď je pri hráčovi čo otvoriť / použiť */
#btn-use { position: fixed; z-index: 5; display: none; right: calc(env(safe-area-inset-right) + 155px);
  bottom: calc(env(safe-area-inset-bottom) + 160px); width: 62px; height: 62px;
  font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.02em; background: rgba(255, 190, 80, 0.9); color: #1b1206; }
body.touch.playing #btn-use.show { display: grid; }
/* čierna clona pri prechode dverami */
#fade { position: fixed; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
#fade.on { opacity: 1; }
body.inside #minimap { display: none; }
#btn-pause { position: fixed; z-index: 5; display: none; left: calc(env(safe-area-inset-left) + 12px); top: calc(env(safe-area-inset-top) + 12px); }
body.playing #btn-pause { display: grid; }
/* Prepínač pohľadu vedľa ☰: na mobile a na handhelde s ovládačom (body.pad) */
#btn-view { position: fixed; z-index: 5; display: none; top: calc(env(safe-area-inset-top) + 12px);
  left: calc(env(safe-area-inset-left) + 70px); }
body.playing.touch #btn-view, body.playing.pad #btn-view { display: grid; }
/* v multiplayeri je hneď pri ☰ tlačidlo bodov – pohľad sa posunie o jedno miesto doprava */
body.online #btn-view { left: calc(env(safe-area-inset-left) + 128px); }

/* Zákerný zlodej: tlačidlo „prezradiť zlodeja“ a pod ním „SOM TU“ – pod ponukou ☰, na mobile aj
   na počítači. Nabíjajú sa ako STÁŤ: zelená sa nalieva zdola nahor (--p = 0–1), plné = dá sa použiť. */
#btn-mark, #btn-here { position: fixed; z-index: 5; display: none; overflow: hidden; left: calc(env(safe-area-inset-left) + 12px); }
#btn-mark { top: calc(env(safe-area-inset-top) + 70px); }
#btn-here { top: calc(env(safe-area-inset-top) + 128px); font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.03em; }
body.playing.can-mark #btn-mark, body.playing.can-here #btn-here { display: grid; }
.touch-btn.nabija {
  background-image: linear-gradient(to top, rgba(64, 190, 80, 0.92) calc(var(--p, 0) * 100%), rgba(64, 190, 80, 0) calc(var(--p, 0) * 100%));
}
.touch-btn.nabija.ready { border-color: #8fe07a; color: #f2fff0; }
.touch-btn.nabija:not(.ready) { color: rgba(255, 255, 255, 0.7); }
/* obrázok Zákerného zlodeja ako maska – farbu má ako text tlačidla (biela) */
.ico-zakerny { width: 30px; height: 36px; background: currentColor; pointer-events: none;
  -webkit-mask: url(obrazky/hry/zakerny.svg) center / contain no-repeat; mask: url(obrazky/hry/zakerny.svg) center / contain no-repeat; }

/* Zlodej na telefóne: meč ani STÁŤ nepoužíva (sek nemá, kričí len strážca) – na ich miesto vpravo dole
   prezradiť zlodeja (veľké, kde je sek) a SOM TU (kde je STÁŤ). Na počítači ostávajú pod ☰. */
body.touch.thief #btn-attack, body.touch.thief #btn-shout, body.touch.thief #btn-aim { display: none; }
body.touch.thief #btn-mark { top: auto; left: auto; right: calc(env(safe-area-inset-right) + 24px);
  bottom: calc(env(safe-area-inset-bottom) + 28px); width: 86px; height: 86px; }
body.touch.thief #btn-mark .ico-zakerny { width: 40px; height: 48px; }
body.touch.thief #btn-here { top: auto; left: auto; right: calc(env(safe-area-inset-right) + 124px);
  bottom: calc(env(safe-area-inset-bottom) + 24px); width: 62px; height: 62px; font-size: 12px; letter-spacing: .04em; }

/* šípka, kam sa otočiť – krúti sa okolo stredu obrazovky ako kompas */
#volanie { position: fixed; left: 50%; top: 42%; display: none; color: #ffd76a;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 6;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
#volanie.show { display: block; }
@media (max-width: 900px), (max-height: 560px) {
  #volanie svg { width: 104px; height: 104px; }
}
body.third-person #crosshair { display: none; }

/* Hlásenia miestnosti v multiplayeri – vľavo dole, po chvíli zmiznú (chat hra nemá – je Discord) */
#chat {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 12px);
  bottom: calc(env(safe-area-inset-bottom) + 44px);
  width: min(380px, 70vw);
  display: none;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
body.online.playing #chat { display: flex; }
#chat-log { display: flex; flex-direction: column; gap: 3px; max-height: 40vh; overflow: hidden; justify-content: flex-end; }
#chat-log div {
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(10, 14, 26, 0.58);
  font-size: 13px;
  line-height: 1.35;
  text-shadow: 0 1px 2px #000;
  transition: opacity 0.6s;
  overflow-wrap: anywhere;
}
#chat-log div.sys { color: #9dbb84; font-style: italic; }
#chat-log div.old { opacity: 0; }
body.touch #chat { bottom: calc(env(safe-area-inset-bottom) + 150px); width: min(320px, 50vw); }
body.touch #chat-log div { font-size: 11px; }
body:not(.playing) #stats { display: none; }

/* ---------------------------------------------------------------- kolo v multiplayeri */
#hud { position: fixed; top: calc(env(safe-area-inset-top) + 12px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 7px 16px; border-radius: 12px;
  background: rgba(10, 14, 26, 0.72); color: #fff; font: 600 15px/1 system-ui, sans-serif; pointer-events: none; z-index: 6; }
#hud[hidden] { display: none; }
#hud b { padding: 4px 9px; border-radius: 7px; letter-spacing: 0.08em; font-size: 13px; }
#hud b.zlodej { background: #6b3fa0; }
#hud b.strazca { background: #1f6fd1; }
#hud-time { font-variant-numeric: tabular-nums; color: #ffd76a; }
#hint { position: fixed; top: calc(env(safe-area-inset-top) + 54px); left: 50%; transform: translateX(-50%);
  max-width: min(92vw, 640px); text-align: center; color: #fff; font: 500 14px/1.3 system-ui, sans-serif;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 5; }
body:not(.playing) #hint { display: none; }
#rob-ring { position: fixed; left: 50%; top: 62%; width: 74px; height: 74px; margin-left: -37px; border-radius: 50%;
  display: none; place-items: center; pointer-events: none; z-index: 6; --p: 0;
  background: conic-gradient(#ffcc00 calc(var(--p) * 360deg), rgba(255, 255, 255, 0.2) 0);
  -webkit-mask: radial-gradient(circle, transparent 29px, #000 30px); mask: radial-gradient(circle, transparent 29px, #000 30px); }
#rob-ring.show { display: grid; }
#rob-ring span { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  color: #fff; font: 700 13px system-ui, sans-serif; text-shadow: 0 1px 3px #000; }
#banner { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14%); transform: translate(-50%, 20px);
  max-width: 92vw; padding: 14px 28px; border-radius: 14px; text-align: center; opacity: 0; pointer-events: none; z-index: 7;
  background: rgba(10, 14, 26, 0.82); color: #fff; font: 800 clamp(20px, 3.4vw, 34px)/1.2 system-ui, sans-serif;
  letter-spacing: 0.01em; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); transition: opacity 0.25s, transform 0.25s; }
#banner.show { opacity: 1; transform: translate(-50%, 0); }
#banner.misia { background: linear-gradient(180deg, #2f7d32, #1b5e20); border: 3px solid #ffd76a; color: #fff8dc;
  font-size: clamp(24px, 4.4vw, 46px); text-transform: none; }
#banner.dobre { background: rgba(31, 111, 209, 0.92); }
#banner.zle { background: rgba(178, 34, 34, 0.92); }
#banner.lup { background: rgba(107, 63, 160, 0.92); }
#banner.start { font-size: clamp(16px, 2.4vw, 24px); }
#countdown { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); display: none; pointer-events: none; z-index: 7;
  color: #ffd76a; font: 900 clamp(70px, 14vw, 150px)/1 system-ui, sans-serif; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7); }
#countdown.show { display: block; }
/* zablokovaná zbraň po zásahu nevinného – hráč sa hýbe, preto len pruh hore a jemne červené okraje */
#stun { position: fixed; inset: 0; display: none; justify-items: center; align-items: start; pointer-events: none; z-index: 6;
  padding-top: calc(env(safe-area-inset-top) + 64px);
  background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 60%, rgba(150, 0, 0, 0.3) 100%); }
#stun.show { display: grid; }
#stun div { padding: 8px 18px; border-radius: 12px; background: rgba(40, 0, 0, 0.7); color: #fff; text-align: center;
  font: 600 16px/1.4 system-ui, sans-serif; }
#stun b { color: #ff8a80; font-size: 20px; }

/* Nápoveda ovládania vľavo dole: čo ktorý kláves / tlačidlo ovládača robí.
   Ukazuje sa len v hre a len pri klávesnici alebo ovládači (na dotyku sú tlačidlá priamo na obrazovke). */
#pomoc, #pomoc-ikona { display: none; }
body.playing:not(.touch) #pomoc:not([hidden]) { display: block; }
body.playing:not(.touch) #pomoc-ikona:not([hidden]) { display: grid; }
#pomoc { position: fixed; z-index: 4; left: calc(env(safe-area-inset-left) + 12px); bottom: calc(env(safe-area-inset-bottom) + 12px);
  width: 330px; max-height: 62vh; overflow: auto; padding: 8px 10px 10px; border-radius: 12px;
  background: rgba(10, 14, 26, 0.56); border: 1px solid rgba(200, 169, 122, 0.35); color: #e8dcc0;
  font: 500 12px/1.35 system-ui, sans-serif; backdrop-filter: blur(3px); pointer-events: auto; }
#pomoc .pomoc-hlava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#pomoc .pomoc-hlava b { font: 700 12px system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #ffd76a; }
#pomoc-zavri { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #e8dcc0; font-size: 13px; line-height: 1; }
#pomoc-zavri:hover { background: rgba(255, 255, 255, 0.18); }
#pomoc-obsah > div:not(.pomoc-nakres) { display: grid; grid-template-columns: 124px 1fr; gap: 8px; align-items: center; padding: 1.5px 0; }
.pomoc-kde { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.pomoc-kl { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 5px; text-align: center;
  background: rgba(20, 26, 40, 0.9); border: 1px solid var(--f, rgba(200, 169, 122, 0.7)); color: var(--f, #ffd76a);
  font: 700 11px/1.35 system-ui, sans-serif; }
.pomoc-nakres { margin: 2px 0 8px; }
.pomoc-nakres svg { width: 100%; height: auto; display: block; }
#pomoc-ikona { position: fixed; z-index: 4; left: calc(env(safe-area-inset-left) + 12px); bottom: calc(env(safe-area-inset-bottom) + 12px);
  width: 38px; height: 38px; place-items: center; padding: 0; cursor: pointer; border-radius: 50%;
  background: rgba(10, 14, 26, 0.5); border: 1px solid rgba(200, 169, 122, 0.35); color: #ffd76a; }
#pomoc-ikona svg { width: 22px; height: 22px; }
#pomoc-ikona:hover { background: rgba(10, 14, 26, 0.75); }
@media (max-width: 900px), (max-height: 560px) {
  #pomoc { width: 250px; font-size: 11px; max-height: 52vh; }
  #pomoc-obsah > div:not(.pomoc-nakres) { grid-template-columns: 104px 1fr; }
}

/* nečinný hráč: po 30 s ticha odpočítavanie, po 120 s ho hra z kola odhlási */
#necinny { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -10px); z-index: 9; display: none;
  padding: 14px 22px; border-radius: 14px; text-align: center; pointer-events: none;
  background: rgba(40, 6, 6, 0.82); border: 2px solid #ff6b6b; color: #fff;
  font: 600 16px/1.5 system-ui, sans-serif; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); }
#necinny.show { display: block; transform: translate(-50%, 0); }
#necinny b { display: block; font: 800 22px system-ui, sans-serif; color: #ff9b9b; letter-spacing: 0.04em; }
/* ---------------------------------------------------------------- oznamy na malej obrazovke
   Na telefóne musí byť všetko takéto hore a maličké: veľký zelený nápis „dokončil misiu“
   uprostred dole zakrýval pol dediny. Platí to pre každú malú obrazovku (aj telefón na šírku,
   aj keď hra práve nebeží v dotykovom režime). Poradie zhora: tlačidlá a stav kola (12 px),
   nápoveda (54), krátke hlášky a zablokovaná zbraň (100), oznamy kola (140). */
@media (max-width: 900px), (max-height: 560px) {
  #hint { font-size: 12px; max-width: 86vw; }
  #toast { top: calc(env(safe-area-inset-top) + 100px); padding: 5px 12px; font-size: 12.5px; }
  #stun { padding-top: calc(env(safe-area-inset-top) + 100px); }
  #stun div { padding: 5px 12px; font-size: 12.5px; border-radius: 9px; }
  #stun b { font-size: 13.5px; }
  #necinny { top: 30%; padding: 8px 14px; font-size: 12.5px; border-radius: 10px; }
  #necinny b { font-size: 16px; }
  #banner { top: calc(env(safe-area-inset-top) + 140px); bottom: auto; max-width: 88vw;
    padding: 6px 13px; border-radius: 10px; font-size: 13px; line-height: 1.25;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); transform: translate(-50%, -8px); }
  #banner.show { transform: translate(-50%, 0); }
  #banner.misia { font-size: 14px; border-width: 2px; }
  #banner.start { font-size: 12.5px; }
  #countdown { top: 32%; font-size: clamp(46px, 11vw, 88px); }
}

#btn-score { position: fixed; z-index: 5; display: none; left: calc(env(safe-area-inset-left) + 70px); top: calc(env(safe-area-inset-top) + 12px); }
body.online.playing #btn-score { display: grid; }
#scoreboard { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: min(90vw, 360px);
  padding: 18px 20px 12px; border-radius: 16px; background: rgba(10, 14, 26, 0.9); color: #fff; z-index: 8;
  font: 500 15px/1.3 system-ui, sans-serif; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
#scoreboard[hidden] { display: none; }
#scoreboard h2 { margin: 0 0 10px; font: 700 24px 'Cinzel Decorative', 'Courier New', serif; letter-spacing: 0.05em; color: #ffd76a; }
#scoreboard ul { list-style: none; margin: 0; padding: 0; }
#scoreboard li { display: grid; grid-template-columns: 14px 1fr auto 40px; align-items: center; gap: 10px; padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
#scoreboard li i { width: 12px; height: 12px; border-radius: 50%; }
#scoreboard li em { font-style: normal; font-size: 12px; color: #9fb0c8; text-transform: uppercase; letter-spacing: 0.05em; }
#scoreboard li b { text-align: right; font-size: 18px; font-variant-numeric: tabular-nums; }
#scoreboard li.ja span { color: #ffd76a; font-weight: 700; }
#scoreboard li.prazdne { display: block; color: #9fb0c8; }
#scoreboard p { margin: 10px 0 0; font-size: 12px; color: #9fb0c8; text-align: center; }

/* pozorovanie mesta zo stanice: hra za mapou ide ďalej, len rozmazane (ako v Krádeži) */
#pozorovanie { position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(6, 9, 20, .5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
#pozorovanie[hidden] { display: none; }
#pozorovanie canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body.observing #minimap { visibility: hidden; }


/* Telefón na výšku: nič z hry, len výzva otočiť ho na šírku (animácia). Tablet (širší) sa hrá aj na výšku. */
#otoc { display: none; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 560px) {
  #otoc {
    position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 40%, #2a1d0e, #0e0a06 70%);
    color: #ffd76a; font-family: "Courier New", monospace;
  }
  #otoc b { font: 700 21px/1.3 'Cinzel Decorative', 'Courier New', serif; letter-spacing: .02em; color: #ffe9a8; }   /* písmo nadpisov (menu.css) */
  #otoc span { max-width: 260px; font-size: 13px; line-height: 1.5; color: #b9ab8c; }
  body > :not(#otoc) { visibility: hidden !important; }
  .otoc-g { transform-origin: 60px 60px; animation: otoc-tel 2.4s ease-in-out infinite; }
  .otoc-sipka { animation: otoc-sipka 2.4s ease-in-out infinite; }
}
@keyframes otoc-tel {
  0%, 20% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
@keyframes otoc-sipka {
  0%, 15% { opacity: 1; }
  45%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

/* Policajti vs zlodeji: stav tímov navrchu tabuľky bodov */
#score-list .timy { display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 0 8px; border-bottom: 1px solid rgba(255, 215, 106, 0.25); margin-bottom: 6px;
  font: 700 13px/1 system-ui, sans-serif; letter-spacing: 0.06em; color: #ffd76a; }
#score-list .timy b { font-size: 18px; color: #fff3d6; }
#score-list .timy em { font-style: normal; opacity: 0.6; }

/* ---------------------------------------------------------------- špeciálne predmety (Policajti vs zlodeji)
   Tlačidlo s obrázkom predmetu: ťuknutie ukáže kartičku (čo robí), podržanie 3 s ho použije – okolo
   tlačidla sa pritom plní krúžok vo farbe strany (--f). Vpravo dole (vľavo sú hlásenia a nápoveda ovládania);
   na mobile tam, kde je voľné miesto pri tlačidlách. */
#btn-predmet { position: fixed; z-index: 5; display: none; right: calc(env(safe-area-inset-right) + 26px);
  bottom: calc(env(safe-area-inset-bottom) + 26px); width: 78px; height: 78px; padding: 0; overflow: visible;
  --p: 0; --f: #ffc94a; border: 2px solid var(--f);
  background: radial-gradient(circle closest-side, rgba(10, 14, 26, 0.72) 86%, transparent 88%),
    conic-gradient(var(--f) calc(var(--p) * 360deg), rgba(10, 14, 26, 0.35) 0);
  box-shadow: 0 0 14px color-mix(in srgb, var(--f) 45%, transparent); }
#btn-predmet:active, #btn-predmet.pressed { background: radial-gradient(circle closest-side, rgba(10, 14, 26, 0.72) 86%, transparent 88%),
    conic-gradient(var(--f) calc(var(--p) * 360deg), rgba(10, 14, 26, 0.35) 0); }
body.playing.ma-predmet #btn-predmet { display: grid; }
#btn-predmet img { width: 76%; height: 76%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)); }
#btn-predmet .kluc { position: absolute; right: -6px; top: -6px; min-width: 22px; padding: 3px 6px; border-radius: 7px;
  background: #ffd76a; color: #1b1206; font: 800 12px/1 system-ui, sans-serif; pointer-events: none; }
#btn-predmet .pocet { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 7px; border-radius: 8px;
  background: rgba(10, 14, 26, 0.9); border: 1px solid var(--f); color: #fff; font: 700 11px/1.1 system-ui, sans-serif;
  white-space: nowrap; pointer-events: none; }
#btn-predmet .kluc:empty, #btn-predmet .pocet:empty { display: none; }
#btn-predmet.zapnute { box-shadow: 0 0 0 3px var(--f), 0 0 22px var(--f); }
body.touch.thief #btn-predmet { right: calc(env(safe-area-inset-right) + 24px); bottom: calc(env(safe-area-inset-bottom) + 28px);
  width: 86px; height: 86px; }
body.touch:not(.thief) #btn-predmet { right: calc(env(safe-area-inset-right) + 30px); bottom: calc(env(safe-area-inset-bottom) + 204px);
  width: 68px; height: 68px; }

/* kartička: obrázok, názov a jedna veta, čo predmet robí (5 s) */
#predmet-karta { position: fixed; left: 50%; top: 17%; z-index: 8; display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: min(560px, 90vw); padding: 12px 18px 12px 12px; border-radius: 16px; --f: #ffc94a;
  background: rgba(12, 14, 24, 0.9); border: 2px solid var(--f); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 24px color-mix(in srgb, var(--f) 35%, transparent);
  color: #fff; pointer-events: none; opacity: 0; transform: translate(-50%, -10px); transition: opacity 0.25s, transform 0.25s; }
#predmet-karta.show { opacity: 1; transform: translate(-50%, 0); }
#predmet-karta img { width: 96px; height: 96px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
#predmet-karta b { display: block; font: 800 18px/1.25 system-ui, sans-serif; color: var(--f); }
#predmet-karta p { margin: 4px 0 6px; font: 500 14.5px/1.4 system-ui, sans-serif; color: #f2eee2; }
#predmet-karta small { font: 700 12.5px/1.2 system-ui, sans-serif; color: #ffd76a; }

/* čo práve účinkuje (moje predmety, a čo na mňa hodil nepriateľ) */
#predmet-ucinky { position: fixed; z-index: 5; right: calc(env(safe-area-inset-right) + 22px); bottom: calc(env(safe-area-inset-bottom) + 122px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
body:not(.playing) #predmet-ucinky { display: none; }
#predmet-ucinky div { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; border-radius: 99px;
  background: rgba(10, 14, 26, 0.78); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font: 600 13px/1 system-ui, sans-serif; }
#predmet-ucinky div.moj { border-color: #ffd76a; }
#predmet-ucinky div.zle { border-color: #ff6b6b; background: rgba(90, 10, 10, 0.82); }
#predmet-ucinky img { width: 24px; height: 24px; object-fit: contain; }
#predmet-ucinky b { font-weight: 800; color: #ffd76a; }
body.touch #predmet-ucinky { bottom: auto; right: auto; top: calc(env(safe-area-inset-top) + 70px); left: calc(env(safe-area-inset-left) + 12px);
  align-items: flex-start; }

/* Oslepujúci prach: obraz zaleje biely prach (na konci sa rozplynie) */
#predmet-oslepeny { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(circle at 50% 45%, #fffdf6 0%, #f6ecd2 45%, #e2cfa6 100%); }
#predmet-oslepeny.show { opacity: 0.985; }
#predmet-oslepeny.show.konci { opacity: 0.55; transition: opacity 1.4s; }
/* Kameň paralyzovania: ľadový okraj obrazovky */
#predmet-paralyza { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(120, 190, 255, 0.35) 72%, rgba(215, 240, 255, 0.85) 100%);
  box-shadow: inset 0 0 70px rgba(190, 230, 255, 0.9); }
#predmet-paralyza.show { opacity: 1; }
/* Zasiahnuté dieťa (main.js zasiaholDieta): tá istá ľadová clona a odpočet v strede */
#dieta-paralyza { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(120, 190, 255, 0.35) 72%, rgba(215, 240, 255, 0.85) 100%);
  box-shadow: inset 0 0 70px rgba(190, 230, 255, 0.9); display: flex; align-items: flex-start; justify-content: center; }
#dieta-paralyza.show { opacity: 1; }
#dieta-paralyza b { margin-top: 22vh; padding: 10px 18px; border-radius: 10px; background: rgba(10, 20, 40, 0.72);
  color: #fff; font: 600 clamp(15px, 2.2vw, 22px) system-ui, sans-serif; text-align: center; }
/* Elixír opojenia: fialový, pomaly pulzujúci okraj */
#predmet-opity { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(150, 60, 200, 0.32) 100%); }
#predmet-opity.show { opacity: 1; animation: predmet-opity 2.6s ease-in-out infinite; }
@keyframes predmet-opity { 50% { opacity: 0.45; } }
/* Ďalekohľad: čierna clona s dvoma okrúhlymi priezormi */
#predmet-dalekohlad { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: none; background: #000;
  -webkit-mask: radial-gradient(circle at 36% 50%, transparent 0 25vmin, #000 26vmin), radial-gradient(circle at 64% 50%, transparent 0 25vmin, #000 26vmin);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 36% 50%, transparent 0 25vmin, #000 26vmin), radial-gradient(circle at 64% 50%, transparent 0 25vmin, #000 26vmin);
  mask-composite: intersect; }
body.dalekohlad #predmet-dalekohlad { display: block; }
body.dalekohlad #reticle, body.dalekohlad #crosshair, body.dalekohlad #minimap { visibility: hidden; }
/* Čarovná mapa: veľká mapa cez stred obrazovky, hra za ňou ide ďalej (hráč môže pomaly chodiť) */
#carovna-mapa { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#carovna-mapa[hidden] { display: none; }
#carovna-mapa canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body.carovna-mapa #minimap { visibility: hidden; }
/* oznam o predmete („Marián použil …“) – fialový; keď zasiahne mňa, červenofialový */
#banner.predmet { background: linear-gradient(180deg, rgba(92, 52, 150, 0.95), rgba(58, 30, 104, 0.95)); border: 2px solid #c9a6ff; color: #fff6ff; }
#banner.predmet-zle { background: linear-gradient(180deg, rgba(150, 30, 90, 0.95), rgba(100, 16, 60, 0.95)); border: 2px solid #ff9ad0; color: #fff; }

@media (max-width: 900px), (max-height: 560px) {
  #predmet-karta { top: calc(env(safe-area-inset-top) + 54px); gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; }
  #predmet-karta img { width: 60px; height: 60px; }
  #predmet-karta b { font-size: 14px; }
  #predmet-karta p { font-size: 12px; margin: 2px 0 4px; }
  #predmet-karta small { font-size: 11px; }
  #predmet-ucinky div { font-size: 11.5px; padding: 3px 8px 3px 4px; }
  #predmet-ucinky img { width: 20px; height: 20px; }
}

/* ── Zombie mesto: zdravie, civilisti, krv po uhryznutí (zombie-mesto.js) ───────────── */
#zhud { position: fixed; left: calc(12px + env(safe-area-inset-left)); top: calc(70px + env(safe-area-inset-top)); z-index: 6;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; font: 600 12px system-ui, sans-serif; color: #eef6ea; }
#zhud[hidden] { display: none; }
#zhud .zdravie { position: relative; width: 190px; height: 16px; border-radius: 8px; background: rgba(20, 8, 8, 0.65); border: 1px solid rgba(255, 255, 255, 0.25); overflow: hidden; }
#zhud .zdravie i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#6fdd6a, #3c9b3a); transition: width .25s; }
#zhud .zdravie.malo i { background: linear-gradient(#ff7a6a, #c23a2a); }
#zhud .zdravie span { position: relative; display: block; text-align: center; line-height: 16px; text-shadow: 0 1px 2px #000; letter-spacing: .04em; }
#zhud .civ { display: flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; background: rgba(10, 14, 24, 0.6); text-shadow: 0 1px 2px #000; }
#zhud .civ b { width: 10px; height: 10px; border-radius: 50%; background: #9aa3b2; border: 1px solid #0008; }
#zhud .civ b.s1 { background: #ffd76a; }
#zhud .civ b.s2 { background: #ff9f43; }
#zhud .civ b.s3 { background: #6fdd6a; }
#zhud .civ b.s4 { background: #c23a2a; }
#zhud .civ b.s5 { background: #5fa8ff; }   /* v policajnej stanici */
#zhud .civ em { font-style: normal; margin-left: 6px; opacity: .85; }
#zkrv { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(170, 0, 0, 0.55) 100%); }
#zkrv.ukaz { animation: zkrv .7s ease-out; }
@keyframes zkrv { from { opacity: 1; } to { opacity: 0; } }

/* Zombie mesto: na telefóne NABIŤ namiesto STÁŤ */
#btn-nabit { display: none; right: calc(env(safe-area-inset-right) + 124px); bottom: calc(env(safe-area-inset-bottom) + 24px);
  width: 62px; height: 62px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
body.touch.zombie.playing #btn-nabit { display: grid; }
body.zombie #btn-shout { display: none !important; }
/* Pohľad z očí ako v Counter-Strike: zelený krížik bez bodky, medzera podľa rozptylu */
#reticle.fps i { background: #57ff66; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); opacity: 0.95; transition: transform 0.06s linear; }
#reticle.fps i:nth-child(1), #reticle.fps i:nth-child(2) { height: 9px; }
#reticle.fps i:nth-child(3), #reticle.fps i:nth-child(4) { width: 9px; }
#reticle.fps i:nth-child(1) { transform: translateY(calc(-1 * var(--gap) - 9px)); }
#reticle.fps i:nth-child(3) { transform: translateX(calc(-1 * var(--gap) - 9px)); }
#reticle.fps b { display: none; }

/* kľak (policajt, zlodej) – na telefóne vedľa skoku; zapnutý svieti */
#btn-klak { display: none; right: calc(env(safe-area-inset-right) + 190px); bottom: calc(env(safe-area-inset-bottom) + 96px);
  width: 54px; height: 54px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
body.touch.playing.police #btn-klak, body.touch.playing.thief #btn-klak { display: grid; }
#btn-klak.on { background: rgba(255, 159, 67, 0.92); color: #1b1206; }