/* ══════════════════════════════════════════════════════════════════════
   NOČNÍ HLÍDKA – Design systém
   Jediný zdroj pravdy pro barvy, typografii a sdílené komponenty.
   Všechny stránky načítají tento soubor; stránkově specifické styly
   patří do <style> v dané stránce, NIKDY sem.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Podklady ─────────────────────────────────────────────────────── */
  --bg:#0a0808;          /* hlavní pozadí stránky                        */
  --bg-card:#110e0e;     /* karty, panely                                */
  --bg-el:#161111;       /* vstupní pole, vnořené prvky                  */
  --bg-modal:#0f0c0c;    /* modály, bottom sheet                         */
  --bg-nav:rgba(10,8,8,.95);

  /* ── Zlatá (primární akcent) ──────────────────────────────────────── */
  --gold:#c9a84c;
  --gold-l:#e8c97a;      /* zvýraznění, nadpisy karet                    */
  --gold-d:#7a6230;      /* tlumená – okraje, sekundární text            */

  /* ── Text ─────────────────────────────────────────────────────────── */
  --text:#d4c9b0;
  --text-d:#8a7f6e;      /* popisky, metadata                            */

  /* ── Okraje ───────────────────────────────────────────────────────── */
  --border:rgba(201,168,76,.18);
  --border-b:rgba(201,168,76,.45);   /* výraznější (modály, fokus)       */

  /* ── Frakce ───────────────────────────────────────────────────────── */
  --dh:#e0a33c;                       /* Denní hlídka – teplá jantarová  */
  --dh-soft:rgba(224,163,60,.14);
  --dh-line:rgba(224,163,60,.55);
  --nh:#6f8fd8;                       /* Noční hlídka – chladná modrá    */
  --nh-soft:rgba(111,143,216,.14);
  --nh-line:rgba(111,143,216,.55);
  --ost:#7fc4a0;                      /* Ostatní skupiny – zelená        */
  --ost-soft:rgba(127,196,160,.14);
  --ost-line:rgba(127,196,160,.55);

  /* ── Stavové ──────────────────────────────────────────────────────── */
  --free:#c98a3c;        /* volná oblast                                 */
  --lock:#5f5a55;        /* zamčená oblast                               */
  --ok:#7ac47a;
  --warn:#e0a860;
  --err:#e08080;

  /* ── Atmosférické (dekorativní pozadí) ────────────────────────────── */
  --glow-red:rgba(139,26,26,.07);
  --glow-purple:rgba(74,26,107,.06);

  /* ── Rozměry ──────────────────────────────────────────────────────── */
  --nav-h:2.9rem;
  --radius:6px;
  --radius-lg:14px;
  --tap:42px;            /* min. dotyková plocha                         */
  --safe-b:env(safe-area-inset-bottom,0px);

  /* ── Typografie ───────────────────────────────────────────────────── */
  --f-display:'Cinzel Decorative',serif;   /* velké nadpisy              */
  --f-head:'Cinzel',serif;                 /* nadpisy, UI, popisky       */
  --f-body:'Crimson Text',Georgia,serif;   /* běžný text                 */
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  min-height:100vh;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 12% 0%,var(--glow-red) 0%,transparent 55%),
    radial-gradient(ellipse at 88% 92%,var(--glow-purple) 0%,transparent 55%);
}

/* ══════════════════════════════════════════════════════════════════════
   NAVIGACE  – sdílená všemi stránkami, ovládá assets/js/nh-nav.js
   ══════════════════════════════════════════════════════════════════════ */
.nh-nav{
  position:sticky;top:0;z-index:600;
  background:var(--bg-nav);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nh-nav__inner{
  max-width:1500px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .9rem;height:var(--nav-h);
}
.nh-nav__brand{
  font-family:var(--f-display);
  font-size:clamp(.56rem,1.6vw,.74rem);
  color:var(--gold-d);letter-spacing:.14em;
  text-decoration:none;white-space:nowrap;
  transition:color .2s;
}
.nh-nav__brand:hover{color:var(--gold);}

/* Hamburger – animovaný na křížek */
.nh-nav__toggle{
  display:none;position:relative;
  width:var(--tap);height:var(--tap);
  background:none;border:none;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.nh-nav__bars{position:relative;width:20px;height:14px;display:block;}
.nh-nav__bars span{
  position:absolute;left:0;width:100%;height:1.5px;
  background:var(--text-d);border-radius:2px;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s,background .2s;
}
.nh-nav__bars span:nth-child(1){top:0;}
.nh-nav__bars span:nth-child(2){top:6px;}
.nh-nav__bars span:nth-child(3){top:12px;}
.nh-nav__toggle:hover .nh-nav__bars span{background:var(--gold);}
.nh-nav__toggle[aria-expanded="true"] .nh-nav__bars span{background:var(--gold);}
.nh-nav__toggle[aria-expanded="true"] .nh-nav__bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nh-nav__toggle[aria-expanded="true"] .nh-nav__bars span:nth-child(2){opacity:0;transform:scaleX(0);}
.nh-nav__toggle[aria-expanded="true"] .nh-nav__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.nh-nav__links{display:flex;align-items:center;list-style:none;}
.nh-nav__links a{
  display:block;
  font-family:var(--f-head);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-d);text-decoration:none;
  padding:0 .9rem;height:var(--nav-h);line-height:var(--nav-h);
  border-left:1px solid var(--border);
  transition:color .2s,background .2s;white-space:nowrap;
}
.nh-nav__links a:hover,
.nh-nav__links a.is-active{color:var(--gold);background:rgba(201,168,76,.05);}

@media(max-width:640px){
  .nh-nav__toggle{display:flex;}
  .nh-nav__links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;
    background:rgba(10,8,8,.98);
    border-bottom:1px solid var(--border);
    /* plynulé rozbalení místo skokového display:none */
    max-height:0;overflow:hidden;
    transition:max-height .3s cubic-bezier(.4,0,.2,1);
    backdrop-filter:blur(10px);
  }
  .nh-nav__links.is-open{max-height:22rem;}
  .nh-nav__links li{width:100%;}
  .nh-nav__links a{
    border-left:none;border-top:1px solid var(--border);
    text-align:center;height:auto;line-height:1;
    padding:.95rem 1rem;font-size:.64rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SDÍLENÉ KOMPONENTY
   ══════════════════════════════════════════════════════════════════════ */

/* Hlavička stránky */
.nh-header{
  text-align:center;padding:2.4rem 1.5rem 1.8rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(139,26,26,.06) 0%,transparent 100%);
}
.nh-header__sup{
  font-family:var(--f-head);font-size:clamp(.54rem,1.1vw,.66rem);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--text-d);margin-bottom:.6rem;
}
.nh-header__title{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,4.5vw,2.6rem);
  color:var(--gold);letter-spacing:.07em;line-height:1.15;
  text-shadow:0 0 45px rgba(201,168,76,.2);
}
.nh-header__desc{
  font-family:var(--f-body);font-style:italic;
  font-size:clamp(.9rem,1.9vw,1.05rem);
  color:var(--text-d);max-width:540px;margin:.9rem auto 0;line-height:1.7;
}

/* Tlačítka */
.nh-btn{
  font-family:var(--f-head);font-size:.63rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.6rem .9rem;border-radius:5px;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--text-d);
  min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  transition:.18s;text-decoration:none;
}
.nh-btn:hover:not(:disabled){border-color:var(--gold-d);color:var(--text);}
.nh-btn:disabled{opacity:.45;cursor:not-allowed;}
.nh-btn--gold{color:var(--gold);border-color:var(--border-b);}
.nh-btn--gold:hover:not(:disabled){background:rgba(201,168,76,.1);}
.nh-btn--dh{color:var(--dh);border-color:var(--dh-line);background:var(--dh-soft);}
.nh-btn--dh:hover:not(:disabled){background:rgba(224,163,60,.24);}
.nh-btn--nh{color:var(--nh);border-color:var(--nh-line);background:var(--nh-soft);}
.nh-btn--nh:hover:not(:disabled){background:rgba(111,143,216,.24);}
.nh-btn--ost{color:var(--ost);border-color:var(--ost-line);background:var(--ost-soft);}
.nh-btn--ost:hover:not(:disabled){background:rgba(127,196,160,.24);}
.nh-btn--danger{color:var(--err);border-color:rgba(224,128,128,.4);background:rgba(224,128,128,.06);}
.nh-btn--danger:hover:not(:disabled){background:rgba(224,128,128,.15);}
.nh-btn--sm{font-size:.56rem;padding:.42rem .7rem;min-height:36px;}

/* Vstupní pole */
.nh-input{
  width:100%;font-family:var(--f-head);font-size:.8rem;
  background:var(--bg-el);border:1px solid var(--border);
  border-radius:5px;color:var(--text);
  padding:.6rem .7rem;outline:none;min-height:var(--tap);
  transition:border-color .2s;
}
.nh-input:focus{border-color:var(--gold-d);}
.nh-input::placeholder{color:var(--text-d);opacity:.65;}
select.nh-input option{background:#1a1414;}

/* Štítek / pilulka */
.nh-pill{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--f-head);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:20px;border:1px solid;
}
.nh-pill--dh{color:var(--dh);border-color:var(--dh-line);background:var(--dh-soft);}
.nh-pill--nh{color:var(--nh);border-color:var(--nh-line);background:var(--nh-soft);}
.nh-pill--ost{color:var(--ost);border-color:var(--ost-line);background:var(--ost-soft);}
.nh-pill--free{color:var(--free);border-color:rgba(201,138,60,.5);background:rgba(201,138,60,.1);}
.nh-pill--lock{color:var(--lock);border-color:rgba(95,90,85,.5);background:rgba(95,90,85,.12);}

/* Panel / karta */
.nh-panel{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-card);overflow:hidden;
}

/* Popisek sekce */
.nh-label{
  font-family:var(--f-head);font-size:.55rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-d);
}

/* Poznámkový blok */
.nh-note{
  padding:.55rem .7rem;border-left:3px solid var(--gold-d);
  border-radius:0 4px 4px 0;background:rgba(201,168,76,.06);
  font-size:.88rem;line-height:1.5;color:var(--text-d);
}
.nh-note--warn{border-color:var(--warn);background:rgba(224,168,96,.08);color:#e0b880;}
.nh-note--live{border-color:var(--gold);background:rgba(201,168,76,.1);color:var(--gold-l);}

/* Patička */
.nh-footer{
  border-top:1px solid var(--border);text-align:center;
  padding:1.4rem 1rem;
  font-family:var(--f-head);font-size:.55rem;
  letter-spacing:.25em;text-transform:uppercase;color:var(--text-d);
}
.nh-footer a{color:var(--gold-d);text-decoration:none;}
.nh-footer a:hover{color:var(--gold);}

/* Toast (plovoucí hlášky) */
.nh-toast{
  position:fixed;left:50%;bottom:calc(1.2rem + var(--safe-b));
  transform:translateX(-50%) translateY(-20px);
  z-index:2000;padding:.65rem 1.1rem;border-radius:var(--radius);
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.05em;
  max-width:92vw;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.nh-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}
.nh-toast--ok{background:#14301a;border:1px solid rgba(122,196,122,.5);color:#a8e0a8;}
.nh-toast--err{background:#301414;border:1px solid rgba(224,128,128,.5);color:#e8a8a8;}

/* Přístupnost: skrytý text pro čtečky */
.nh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}