/* ═══════════════════════════════════════════════════════════════════════════
   Snowbound — titulná obrazovka, multiplayer, nastavenie a pauza.
   Podľa menu v Krádeži: nočná modrá, lampášová zlatá, úzky stĺpec ponuky
   v strede a za ním titulná fotka (obrazky/titulka.webp); v pauze zastavená hra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Písmo nadpisov (vybral používateľ 30. 9. 2026): Cinzel Decorative – veľké písmená zdobené, malé ako kapitálky;
   Cinzel – podnadpisy a nadpisy častí. lib/fonts, licencia OFL; slovenské Č Š Ž Ľ Ť Ď Ň … sú v súboroch -ext. */
@font-face { font-family: 'Cinzel Decorative'; src: url('lib/fonts/cinzel-decorative-700.woff2') format('woff2'); font-weight: 700; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel Decorative'; src: url('lib/fonts/cinzel-decorative-700-ext.woff2') format('woff2'); font-weight: 700; font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; src: url('lib/fonts/cinzel-700.woff2') format('woff2'); font-weight: 700; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; src: url('lib/fonts/cinzel-700-ext.woff2') format('woff2'); font-weight: 700; font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --noc: #0b1020;
  --zlata: #ffd76a;
  --zlata-2: #ffb45a;
  --mosadz: #8a6a3a;
  --mosadz-2: #5c4526;
  --pergamen: #e8dcc0;
  --tlmene: #9a8f76;
}

#screens {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(18, 26, 51, 0.35), rgba(6, 9, 20, 0.6));
}
#screens[hidden] { display: none; }
/* titulná fotka namiesto 3D dediny – main.js zapína body.titulka v menu mimo hry (dedina sa vtedy nekreslí) */
body.titulka #screens.menu {
  background: #0b1020 url('obrazky/titulka.webp') 50% 45% / cover no-repeat;
}

/* stmavenie: silné v strede pod ponukou, slabé po krajoch, nech je dedina vidieť */
#screens::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 58% at 50% 2%, rgba(255, 180, 90, .12) 0%, transparent 72%),
    linear-gradient(to right, rgba(6, 9, 20, 0) 14%, rgba(6, 9, 20, .62) 30%, rgba(6, 9, 20, .8) 44%,
      rgba(6, 9, 20, .8) 56%, rgba(6, 9, 20, .62) 70%, rgba(6, 9, 20, 0) 86%),
    linear-gradient(to bottom, rgba(6, 9, 20, .45) 0%, rgba(6, 9, 20, 0) 22%, rgba(6, 9, 20, 0) 70%, rgba(6, 9, 20, .6) 100%);
}
#screens.pauza { background: rgba(6, 9, 20, .45); }

/* ── stĺpec ponuky ───────────────────────────────────────────────────────── */

.titul {
  position: relative;
  z-index: 1;
  width: min(366px, 92vw);
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  color: var(--pergamen);
  font-family: "Courier New", monospace;
}
.titul.s-ovladanie, .titul.s-grafika, .titul.s-zvuk, .titul.s-server, .titul.help, .titul.keys, .titul.pause { width: min(520px, 94vw); }
.titul.pad { width: min(660px, 96vw); }

.titul .znak { line-height: 1; }
.titul .znak:not(.maly) { margin: 0 -200px; } /* veľký nadpis (AGE OF BANDITS) smie byť širší než stĺpec ponuky */
.titul .nazov {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(28px, 6.2vw, 58px);
  letter-spacing: .12em;
  text-indent: .12em;
  font-weight: bold;
  background: linear-gradient(180deg, #fff3cf 0%, var(--zlata) 46%, var(--zlata-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zlata);
  filter: drop-shadow(0 2px 0 #2a1a06) drop-shadow(0 0 16px rgba(255, 180, 90, .38));
  overflow-wrap: anywhere;
}
.titul .znak.maly .nazov { font-size: clamp(20px, 4.4vw, 30px); white-space: normal; }
/* zlatý prechod (background-clip: text) kreslí len vnútri rámčeka – dĺžne a mäkčene (Á, Č, Š…) trčia nad neho,
   preto má nadpis hore a po stranách vatu (layout ostáva rovnaký, vata sa odráta okrajom) */
.titul .nazov { padding: .28em .12em .1em; margin: -.28em -.12em -.1em; }
/* nadpisy stránok (Nastavenie, Multiplayer, Pravidlá a súkromie…) tým istým písmom ako AGE OF BANDITS */
.titul .znak.maly .nazov {
  font-family: 'Cinzel Decorative', 'Courier New', serif;
  font-weight: 700;
  font-size: clamp(24px, 4.6vw, 38px);
  letter-spacing: .05em;
  text-indent: .05em;
  background: linear-gradient(180deg, #fff6d8 0%, #ffe08a 38%, var(--zlata) 55%, #e8912e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: .8px #3a2106;
  filter: drop-shadow(0 2px 0 #2a1605) drop-shadow(0 0 12px rgba(255, 170, 70, .35));
}
/* veľký nadpis Age of Bandits: ozdobné kapitálky (veľké A a B sú zdobené), zlato s tmavým obrysom, tieň a jemná žiara */
.titul .znak:not(.maly) .nazov {
  font-family: 'Cinzel Decorative', 'Courier New', serif;
  font-weight: 700;
  font-size: clamp(30px, 6.4vw, 76px);
  letter-spacing: .06em;
  text-indent: .06em;
  background: linear-gradient(180deg, #fff6d8 0%, #ffe08a 38%, var(--zlata) 55%, #e8912e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.2px #3a2106;
  filter: drop-shadow(0 3px 0 #2a1605) drop-shadow(0 0 18px rgba(255, 170, 70, .45));
}
@media (max-width: 560px) { .titul .znak { margin: 0; } }
.titul .podnazov {   /* POLICAJTI vs ZLODEJI – s linkami po stranách */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 13px;
  font: 700 clamp(13px, 1.6vw, 21px) 'Cinzel', 'Courier New', serif;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: #f3e3b8;
  text-shadow: 0 2px 4px #000, 0 0 12px rgba(0, 0, 0, .8);
}
.titul .podnazov::before, .titul .podnazov::after {
  content: '';
  width: clamp(28px, 4vw, 52px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--zlata));
}
.titul .podnazov::after { transform: scaleX(-1); }
.titul .podnazov i { font-style: normal; font-size: .78em; letter-spacing: .1em; color: var(--zlata); }

/* ── položky ponuky ──────────────────────────────────────────────────────── */

.titul .ponuka { display: flex; flex-direction: column; gap: 9px; }

.titul .pol {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 34px;
  font-family: inherit;
  font-size: clamp(13px, 2.2vw, 16px);
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pergamen);
  background-color: rgba(13, 18, 34, .86);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12));
  border: 2px solid var(--mosadz-2);
  border-radius: 3px;
  cursor: pointer;
  transition: color .16s, border-color .16s, background-color .16s, box-shadow .16s, transform .16s;
}
.titul .pol::before, .titul .pol::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border: 2px solid var(--zlata);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .14s, transform .14s;
}
.titul .pol::before { left: 13px; }
.titul .pol::after { right: 13px; }
.titul .pol:hover:not(:disabled), .titul .pol:focus-visible, .titul .pol.pad-focus {
  color: #fff6da;
  border-color: var(--zlata);
  background-color: rgba(58, 42, 18, .92);
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(255, 180, 90, .22), inset 0 0 18px rgba(255, 180, 90, .12);
  outline: none;
}
.titul .pol:hover:not(:disabled)::before, .titul .pol:hover:not(:disabled)::after,
.titul .pol:focus-visible::before, .titul .pol:focus-visible::after,
.titul .pol.pad-focus::before, .titul .pol.pad-focus::after { opacity: 1; transform: scale(1); }
.titul .pol:active { transform: translateY(1px); }
.titul .pol:disabled { opacity: .45; cursor: default; }

.titul .pol.hlavny { color: #eaffd8; border-color: #5c9440; background-color: rgba(56, 96, 38, .93); }
.titul .pol.hlavny:hover, .titul .pol.hlavny:focus-visible, .titul .pol.hlavny.pad-focus {
  border-color: #8fe07a;
  background-color: rgba(92, 148, 64, .95);
  box-shadow: 0 0 22px rgba(143, 224, 122, .25);
}
.titul .pol.hlavny::before, .titul .pol.hlavny::after { border-color: #b6f2a0; }

.titul .pol.jemny {
  padding: 9px 24px;
  font-size: clamp(11px, 1.8vw, 13px);
  color: #a9b4c6;
  background: transparent;
  border-color: transparent;
  border-top: 1px solid rgba(138, 106, 58, .38);
  border-radius: 0;
}
.titul .pol.jemny:hover, .titul .pol.jemny:focus-visible, .titul .pol.jemny.pad-focus {
  color: var(--zlata);
  background: transparent;
  border-color: transparent;
  border-top-color: var(--zlata);
  box-shadow: none;
  transform: none;
}
.titul .pol.jemny::before, .titul .pol.jemny::after { display: none; }

/* Späť: vždy zelené tlačidlo (ako hlavné), len o kúsok menšie */
.titul .pol.spat {
  margin-top: 6px;
  padding: 10px 26px;
  font-size: clamp(12px, 1.9vw, 14px);
  color: #eaffd8;
  border-color: #5c9440;
  background-color: rgba(56, 96, 38, .93);
}
.titul .pol.spat:hover, .titul .pol.spat:focus-visible, .titul .pol.spat.pad-focus {
  color: #f4ffe9;
  border-color: #8fe07a;
  background-color: rgba(92, 148, 64, .95);
  box-shadow: 0 0 22px rgba(143, 224, 122, .25);
}
.titul .pol.spat::before, .titul .pol.spat::after { border-color: #b6f2a0; }

/* ── sekcie na podstránkach ──────────────────────────────────────────────── */

.titul .sek {
  text-align: left;
  padding: 13px 15px;
  background: rgba(9, 13, 26, .78);
  border: 1px solid rgba(138, 106, 58, .42);
  border-radius: 4px;
}
/* rozohraná hra, do ktorej sa dá vrátiť (server drží miesto) – nech to hneď padne do oka */
.titul .sek.navrat {
  border-color: rgba(255, 215, 106, .75);
  background: rgba(46, 33, 10, .82);
  box-shadow: 0 0 0 1px rgba(255, 215, 106, .18), 0 6px 22px rgba(0, 0, 0, .45);
}
.titul .sek.navrat .ponuka { margin-top: 10px; gap: 8px; }

.titul .sek > label:not(.check), .titul .sek > .nadpis {
  display: block;
  margin-bottom: 7px;
  font-family: 'Cinzel', 'Courier New', serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--zlata);
}
.titul .sek .ok { color: #8fe07a; }
.titul .sek .zle { color: #ff9a9a; }
.titul input[type=text] {
  width: 100%;
  background: rgba(4, 7, 16, .8);
  border: 2px solid var(--mosadz-2);
  border-radius: 3px;
  color: #ffe9a8;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 11px;
  outline: none;
}
.titul input[type=text]:focus, .titul input[type=text].pad-focus { border-color: var(--zlata); }
.titul .pozn { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: var(--tlmene); }
.titul .pozn b { color: #cbb894; }
.titul .pozn.velka { font-size: 13px; color: var(--pergamen); }
.titul .pozn.upozornenie { color: var(--zlata-2); }
.titul .pozn.adresa { margin-top: 0; font-size: 13px; color: #ffe9a8; user-select: all; overflow-wrap: anywhere; }
.titul .stred { text-align: center; justify-content: center; }
.titul .sek .pol.jemny { margin-top: 10px; border-top-color: rgba(138, 106, 58, .3); }

/* voľba postavy na titulnej obrazovke */
.titul .hrdina { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.titul .karta {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 9px;
  font-family: inherit; color: #b9ab8c; background: rgba(13, 18, 34, .8);
  border: 2px solid #3b3222; border-radius: 4px; cursor: pointer;
  transition: color .16s, border-color .16s, background-color .16s;
}
.titul .karta b { font-size: 13px; letter-spacing: .18em; text-indent: .18em; text-transform: uppercase; font-weight: 600; }
.titul .karta small { font-size: 11px; opacity: .75; }
.titul .karta:hover, .titul .karta.pad-focus { border-color: var(--mosadz); color: #ffe9a8; outline: none; }
.titul .karta.sel { border-color: var(--zlata); color: #fff2cf; background: #2b2011; }

.ctl-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.titul button.ctl {
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  color: #d7c49b;
  background: #111726;
  border: 2px solid #3b3222;
  border-radius: 4px;
  cursor: pointer;
}
.titul button.ctl:hover, .titul button.ctl.pad-focus { border-color: var(--mosadz); color: #ffe9a8; outline: none; }
.titul button.ctl.sel { border-color: var(--zlata); color: #fff2cf; background: #2b2011; }

.slider { display: grid; grid-template-columns: 110px 1fr 54px; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; }
.slider input { width: 100%; accent-color: var(--zlata); }
.slider input.pad-focus { outline: 2px solid var(--zlata); outline-offset: 4px; }
.slider output { text-align: right; color: #ffe9a8; font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--pergamen); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--zlata); }
.check input.pad-focus { outline: 2px solid var(--zlata); outline-offset: 3px; }
.riadok { display: flex; gap: 8px; }
.riadok input { flex: 1; }

.prazdne { text-align: center; padding: 10px 0; }

.hraci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.hraci i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 1px solid #0006; }
.hraci em { color: var(--tlmene); font-style: normal; }

/* Jeden hráč: Spustiť hru sa rozsvieti, keď je vybratá postava aj dedina */
.titul #m-start.hlavny {
  padding: 15px 26px;
  font-size: clamp(15px, 2.4vw, 19px);
  color: #f4ffe9;
  border-color: #8fe07a;
  background-color: rgba(76, 138, 48, .96);
  box-shadow: 0 0 26px rgba(143, 224, 122, .35);
  animation: startSvieti 1.8s ease-in-out infinite;
}
@keyframes startSvieti { 50% { box-shadow: 0 0 38px rgba(143, 224, 122, .6); } }
@media (prefers-reduced-motion: reduce) { .titul #m-start.hlavny { animation: none; } }

/* Esc → Lobby: hráči v miestnosti s tlačidlom Vyhodiť (zakladateľ) */
.hraci.sprava li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.hraci.sprava .kto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titul button.ctl.vyhodit { color: #ffb2a6; border-color: #6e3226; background: #2a1411; flex: none; }
.titul button.ctl.vyhodit:hover, .titul button.ctl.vyhodit.pad-focus { border-color: #ef6a5f; color: #ffd6cf; }
.titul button.ctl:disabled { opacity: .35; cursor: default; pointer-events: none; }
.titul .ponuka .pozn.stred { margin: 2px 0 0; text-align: center; font-size: 12px; }

/* ── klávesy ─────────────────────────────────────────────────────────────── */

.klavesy { display: flex; flex-direction: column; gap: 4px; }
.klaves {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  color: var(--pergamen);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: rgba(138, 106, 58, .25);
  cursor: pointer;
  text-align: left;
}
.klaves b { color: #ffe9a8; }
.klaves:hover, .klaves.pad-focus { border-color: var(--mosadz); background: rgba(58, 42, 18, .5); outline: none; }
.klaves.caka { border-color: var(--zlata); background: rgba(58, 42, 18, .8); }
.klaves.caka b { color: var(--zlata-2); }

/* ── rozloženie tlačidiel ovládača ───────────────────────────────────────── */

.pad-mapa svg { width: 100%; height: auto; display: block; }
.pad-legenda {
  display: grid;
  gap: 7px;
  text-align: left;
  font-size: 12px;
  padding: 12px 14px;
  background: rgba(9, 13, 26, .78);
  border: 1px solid rgba(138, 106, 58, .42);
  border-radius: 4px;
}
.pad-legenda > div { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 12px; }
.pad-kde { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.pad-kruh {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--f);
  border-radius: 50%;
  color: var(--f);
  font-weight: bold;
  font-size: 11px;
}
.pad-pil {
  padding: 1px 8px;
  border: 2px solid #c8a97a;
  border-radius: 11px;
  color: var(--zlata);
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}

/* ── ako sa hrá ──────────────────────────────────────────────────────────── */

.titul .role { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.titul .role .r {
  padding: 12px 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #c3b79c;
  background: rgba(9, 13, 26, .78);
  border: 1px solid rgba(138, 106, 58, .42);
  border-left: 3px solid var(--mosadz);
  border-radius: 4px;
}
.titul .role .r > b:first-child { display: block; margin-bottom: 5px; color: var(--zlata); font-size: 12px; letter-spacing: .1em; }
.titul .role .r b { color: #e0cfa4; }

/* ── načítanie, pätička, chyby ───────────────────────────────────────────── */

.nacitanie { display: flex; flex-direction: column; gap: 7px; align-items: center; font-size: 11px; letter-spacing: .15em; color: #b9c6d8; }
.nacitanie .bar { width: 70%; height: 3px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.nacitanie .bar i { display: block; height: 100%; background: var(--zlata); transition: width .2s; }
.titul .pata { font-size: 10.5px; line-height: 1.6; color: #8b93a4; text-shadow: 0 1px 3px #000; }
.titul .pata b { color: #b9a986; }
.titul .pata .slabe { opacity: .7; }
.titul .err { min-height: 0; font-size: 12px; color: #ff9a9a; }
.titul .err:empty { display: none; }

/* nízka obrazovka: telefón na šírku, Steam Deck s veľkým písmom */
@media (max-height: 560px) {
  #screens { align-items: flex-start; }
  .titul { gap: 12px; }
  .titul .nazov { font-size: clamp(26px, 5.4vw, 40px); }
  .titul .znak:not(.maly) .nazov { font-size: clamp(28px, 5.6vw, 46px); }
  .titul .znak.maly .nazov { font-size: clamp(20px, 4vw, 28px); }
  .titul .podnazov { margin-top: 8px; font-size: 12px; }
  .titul .ponuka { gap: 6px; }
  .titul .pol { padding: 9px 30px; }
  .titul .sek { padding: 10px 12px; }
  .pad-legenda > div { grid-template-columns: 150px 1fr; }
}
@media (max-width: 480px) {
  .slider { grid-template-columns: 84px 1fr 46px; }
  .pad-legenda > div { grid-template-columns: 1fr; gap: 2px; }
  .pad-kde { justify-content: flex-start; }
}

/* ── návrh úspornejšieho nastavenia po hre (vykon.js) ─────────────────────── */
#vykon { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 4, 2, .72); font-family: "Courier New", monospace; }
#vykon[hidden] { display: none; }
.vykon-okno { width: min(480px, 94vw); padding: 20px 20px 16px; text-align: center; color: #e8e2d2;
  background: rgba(20, 14, 9, .97); border: 1px solid rgba(255, 215, 106, .75); border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.vykon-okno h2 { margin: 0 0 10px; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: #ffd76a; }
.vykon-okno p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #d9cfb2; }
.vykon-okno p b { color: #fff3cf; }
.vykon-tlacidla { display: grid; gap: 8px; }
.vykon-tlacidla button { font: inherit; font-size: 14px; letter-spacing: .08em; padding: 12px 10px; cursor: pointer;
  color: #ffe9a8; background: #241a0e; border: 1px solid #b8862f; border-radius: 4px; }
.vykon-tlacidla button.hlavne { background: #3c6a2a; border-color: #8fd36a; color: #f2ffe6; }
.vykon-tlacidla button.jemne { background: transparent; border-color: transparent; color: #a99c7c; font-size: 12px; }
.vykon-tlacidla button:active { transform: translateY(1px); }

/* kým sa hra sťahuje, Jeden hráč a Multiplayer sa stlačiť nedajú */
.titul .pol:disabled { opacity: .38; cursor: default; filter: grayscale(.6); pointer-events: none; }
.titul .nacitanie .cakaj { display: block; margin-top: 6px; font-size: 12px; color: #b9ad90; letter-spacing: .04em; }

/* Nastavenia → Ovládanie: na čom sa hrá (ikony obrazky/zariadenia). Zapnuté je zelené. */
.titul .zariadenia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.titul .zariadenie {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 7px;
  font-family: inherit; color: #b9ab8c; background: rgba(13, 18, 34, .8);
  border: 2px solid #3b3222; border-radius: 6px; cursor: pointer;
  transition: color .16s, border-color .16s, background-color .16s, box-shadow .16s;
}
.titul .zariadenie img { width: 100%; max-width: 96px; aspect-ratio: 1; border-radius: 4px; opacity: .5; filter: grayscale(.55); transition: opacity .16s, filter .16s; }
.titul .zariadenie b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.titul .zariadenie small { font-size: 10px; color: #8fe07a; letter-spacing: .08em; text-transform: uppercase; }
.titul .zariadenie:hover, .titul .zariadenie.pad-focus { border-color: var(--mosadz); color: #ffe9a8; outline: none; }
.titul .zariadenie:hover img, .titul .zariadenie.pad-focus img { opacity: .8; }
.titul .zariadenie.sel { border-color: #8fe07a; color: #f2fff0; background: #172412;
  box-shadow: 0 0 0 1px rgba(143, 224, 122, .35), 0 0 16px rgba(143, 224, 122, .28); }
.titul .zariadenie.sel img { opacity: 1; filter: none; }

/* Jeden hráč: výber hry (normálna / zombie) – dve veľké karty s ikonkou */
.titul .hrdina.dve { grid-template-columns: 1fr 1fr; }
.titul .karta.velka { padding: 14px 10px 12px; gap: 5px; }
.titul .karta.velka img { width: 92px; height: 54px; object-fit: contain; }
.titul .karta.velka small { max-width: 190px; text-align: center; line-height: 1.35; }

/* Discord (discord.js): položka ponuky ako ostatné, s logom pred textom */
.titul .pol.discord { gap: 10px; text-decoration: none; }
.titul .pol.discord .dc-logo { width: 1.3em; height: 1.3em; flex: none; }
.titul .pol.discord:hover .dc-logo, .titul .pol.discord:focus-visible .dc-logo, .titul .pol.discord.pad-focus .dc-logo { color: #8e98ff; }

/* ── Pravidlá a súkromie (pravidla.js) a značka veku 16+ ─────────────────── */
.titul.pravidla { width: min(560px, 94vw); gap: 14px; }
/* značka veku: vlastná (nie logo PEGI), v tónoch menu – pätička hlavného menu a stránka pravidiel */
.vek16 {
  display: inline-grid; place-items: center; flex: none;
  min-width: 30px; height: 22px; padding: 0 5px;
  font: bold 11px/1 "Courier New", monospace; letter-spacing: .02em;
  color: #1d1204; background: linear-gradient(180deg, #fff0c4, var(--zlata) 55%, var(--zlata-2));
  border: 1px solid #2a1a06; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(0, 0, 0, .5);
  text-shadow: none;
}
.vek16.velka { min-width: 54px; height: 40px; font-size: 19px; border-radius: 5px; }
.titul .pata .pata-vek { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.titul .pata .odkaz {
  padding: 2px 0; background: none; border: 0; border-bottom: 1px dotted rgba(185, 169, 134, .6);
  font: inherit; letter-spacing: .04em; color: #b9a986; cursor: pointer;
}
.titul .pata .odkaz:hover, .titul .pata .odkaz:focus-visible, .titul .pata .odkaz.pad-focus {
  color: var(--zlata); border-bottom-color: var(--zlata); outline: none;
}
.titul .sek.vek { border-color: rgba(255, 215, 106, .55); }
.titul .vek-riadok { display: flex; align-items: center; gap: 13px; font-size: 13px; color: var(--pergamen); }
.titul .vek-riadok b { color: #fff0c4; font-weight: bold; }
.titul .vek-stitky { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.titul .vek-stitky span {
  padding: 2px 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: #d9c79c; border: 1px solid rgba(138, 106, 58, .7); border-radius: 10px; background: rgba(46, 33, 10, .55);
}
.titul .sek ul.body { margin: 0; padding-left: 17px; font-size: 11.5px; line-height: 1.6; color: var(--pergamen); }
.titul .sek ul.body li + li { margin-top: 3px; }
.titul .sek ul.body li::marker { color: var(--zlata); }
.titul .ponuka.odkazy { gap: 6px; }
.titul .pozn.potvrd { margin: 0; text-align: center; font-size: 11px; color: #e3d2a8; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .9); }
/* Podmienky používania zbalené pod šípkou (pravidla.js) – rozbalia sa ťuknutím, vnútri časti ako doteraz */
.titul details.podmienky { padding: 0; }
.titul details.podmienky > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 15px; cursor: pointer; user-select: none; -webkit-user-select: none;
  font: 700 12px 'Cinzel', 'Courier New', serif; letter-spacing: .2em; text-transform: uppercase; color: var(--zlata);
}
.titul details.podmienky > summary::-webkit-details-marker { display: none; }
.titul details.podmienky > summary::after { content: '▸'; font-size: 15px; transition: transform .2s; }
.titul details.podmienky[open] > summary::after { transform: rotate(90deg); }
.titul details.podmienky > summary:hover, .titul details.podmienky > summary:focus-visible,
.titul details.podmienky > summary.pad-focus { color: #fff0c4; outline: none; background: rgba(255, 215, 106, .08); }
.titul details.podmienky > .sek { margin: 0 10px 10px; background: rgba(9, 13, 26, .55); }