/* ============================================================
   presnycas.eu — styles6.css
   Světlý/tmavý režim přes CSS proměnné (přepíná .dark-mode na body)
   ============================================================ */
:root{
  --bg:        #f3f5f8;
  --panel:     #ffffff;
  --text:      #1b2430;
  --muted:     #5b6675;
  --line:      #dde3ea;
  --accent:    #1565c0;
  --time:      #102a43;
  --shadow:    0 4px 18px rgba(20,40,80,.08);
}
body.dark-mode{
  --bg:        #10141c;
  --panel:     #1a212e;
  --text:      #e8ecf3;
  --muted:     #97a3b6;
  --line:      #2b3547;
  --accent:    #64a9ef;
  --time:      #f3f7ff;
  --shadow:    0 4px 18px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .25s, color .25s;
}
a{color:var(--accent)}

/* ---------- horní lišta ---------- */
.status-bar{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;align-items:center;
  padding:.5rem 1rem;background:var(--panel);border-bottom:1px solid var(--line);
}
.status-bar .left{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.88rem}
.status-bar .sep{color:var(--line)}
.text-link{text-decoration:none;color:var(--muted)}
.text-link:hover{color:var(--accent);text-decoration:underline}
.status-bar .right{display:flex;gap:.5rem}
.btn-bar{
  font-size:.85rem;cursor:pointer;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--text);padding:.4rem .8rem;transition:.15s;
}
.btn-bar:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- hlavička ---------- */
.hlavicka{text-align:center;padding:1.4rem 1rem .4rem}
.hlavicka h1{margin:0;font-size:1.9rem}
.hlavicka h2{margin:.35rem 0 0;font-size:.95rem;font-weight:400;color:var(--muted)}

/* ---------- hlavní hodiny ---------- */
.container{max-width:1100px;margin:0 auto;padding:1rem}
.main-block{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  text-align:center;padding:1.6rem 1rem;margin-bottom:1rem;
}
.time{
  margin:0;font-size:clamp(3.4rem, 14vw, 7.5rem);font-weight:700;line-height:1.05;
  color:var(--time);font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.datum{margin:.4rem 0 0;font-size:1.5rem;font-weight:600}
.date{margin:.25rem 0 0;color:var(--muted)}

/* ---------- malé bloky + tabulky ---------- */
.small-blocks{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.small-block{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:1rem 1.2rem;
}
.small-block h3{margin:.1rem 0 .7rem;font-size:1.05rem}
.cal-table{width:100%;border-collapse:collapse;font-size:.95rem}
.cal-table th{
  text-align:left;font-weight:600;color:var(--muted);padding:.45rem .6rem .45rem 0;
  white-space:nowrap;width:38%;
}
.cal-table td{padding:.45rem 0;font-variant-numeric:tabular-nums}
.cal-table tr + tr th,.cal-table tr + tr td{border-top:1px solid var(--line)}

/* ---------- reklama ---------- */
.ad-block{display:flex;align-items:center;justify-content:center;min-height:120px}
.ad-wrap{width:100%;text-align:center}
.ad-label{
  display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.3rem;
}

/* ---------- text o čase ---------- */
.info-block{
  max-width:1100px;margin:1rem auto 2rem;padding:1.2rem 1.4rem;line-height:1.65;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
}
.info-block h3{margin-top:.2rem}

/* ---------- fullscreen hodiny ---------- */
.fs-overlay{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;cursor:pointer;
  background:#06080d;color:#f3f7ff;
}
.fs-overlay[hidden]{display:none !important}
.fs-time{margin:0;font-size:clamp(4rem, 19vw, 18rem);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.fs-date{margin:0;font-size:clamp(1rem, 3vw, 2rem);color:#9fb2cc}
.fs-hint{position:absolute;bottom:1.2rem;font-size:.8rem;color:#566177}

@media (max-width:640px){
  .status-bar{justify-content:center;text-align:center}
  .hlavicka h1{font-size:1.4rem}
  .datum{font-size:1.2rem}
}
@media print{.status-bar,.ad-block,.fs-overlay{display:none}}

/* ============================================================
   NOVÉ: designy hodin, mluvení, sdílení, silvestr, vodoznak
   ============================================================ */

/* ---------- pilulky designů ---------- */
.design-pills{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;padding:.8rem 1rem 0}
.design-pill{
  padding:.38rem 1rem;border:1px solid var(--line);border-radius:999px;font-size:.88rem;
  color:var(--muted);text-decoration:none;background:var(--panel);transition:.15s;
}
.design-pill:hover{border-color:var(--accent);color:var(--accent)}
.design-pill.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* ---------- jeviště hodin ---------- */
.clock-root{min-height:170px;display:flex;align-items:center;justify-content:center}

/* digitální */
.dg-time{
  font-size:clamp(3.2rem,13vw,7rem);font-weight:700;line-height:1.05;color:var(--time);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.dg-sec{font-size:.42em;color:var(--accent);vertical-align:.55em;margin-left:.15em}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}

/* analogové */
.an-face{width:min(70vw,330px);height:auto}
.an-bg{fill:var(--panel)}
.an-ring{fill:none;stroke:var(--accent);stroke-width:3.5}
.an-tick{stroke:var(--muted);stroke-width:1.3}
.an-tick.h5{stroke:var(--accent);stroke-width:3}
.an-num{fill:var(--text);font-size:20px;font-weight:600;text-anchor:middle;dominant-baseline:central}
.an-hand{stroke-linecap:round}
.an-hour{stroke:var(--time);stroke-width:7}
.an-min{stroke:var(--time);stroke-width:4.5}
.an-sec{stroke:#e2543e;stroke-width:1.8}
.an-cap{fill:var(--accent)}

/* binární */
.bn-wrap{display:flex;gap:1.4rem;align-items:flex-end;justify-content:center}
.bn-group{display:flex;gap:.5rem}
.bn-col{display:flex;flex-direction:column-reverse;gap:.5rem;align-items:center}
.bn-dot{
  width:clamp(18px,5vw,30px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid var(--line);background:var(--bg);transition:background .15s,box-shadow .15s;
}
.bn-dot.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent)}
.bn-read{font-size:1rem;color:var(--muted);margin-top:.9rem;font-variant-numeric:tabular-nums}

/* slovní */
.wd-text{font-size:clamp(1.6rem,5.5vw,2.7rem);font-style:italic;line-height:1.35;color:var(--time);padding:0 1rem}
.wd-sub{margin-top:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.1em}

/* nixie */
.nx-wrap{display:flex;gap:.45rem;align-items:center}
.nx-tube{
  width:clamp(38px,8vw,64px);height:clamp(66px,14vw,112px);border-radius:13px 13px 17px 17px;
  background:linear-gradient(180deg,rgba(255,140,60,.07),rgba(255,90,30,.15) 60%,rgba(20,10,5,.55));
  border:1.5px solid #3a2c22;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.nx-tube::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(0,0,0,.22) 7px 8px)}
.nx-digit{
  font-weight:300;font-size:clamp(2.2rem,6vw,4rem);color:#ffb46b;z-index:1;
  text-shadow:0 0 8px #ff7a2e,0 0 26px #ff5e1a,0 0 60px rgba(255,90,20,.5);font-variant-numeric:tabular-nums;
}
.nx-colon{color:#ff9a4d;font-size:clamp(1.7rem,4.5vw,3rem);text-shadow:0 0 14px #ff6a20;animation:blink 1s steps(1) infinite}

/* ---------- panel mluvení v horní liště ---------- */
.speech-box{position:relative}
.speech-panel{
  position:absolute;right:0;top:calc(100% + .5rem);z-index:80;width:290px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:.9rem 1rem;
}
.speech-panel .lbl{display:block;font-size:.8rem;color:var(--muted);margin:.55rem 0}
.speech-panel select,.speech-panel input[type=number]{
  font-size:.88rem;color:var(--text);background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:.42rem .55rem;width:100%;margin-top:.2rem;
}
.speech-panel .inline{display:flex;gap:.45rem;align-items:center}
.speech-panel .inline input{width:4.6rem}
.speech-panel .chk{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;margin:.55rem 0;cursor:pointer}
.speech-panel .chk input{accent-color:var(--accent);width:1.05rem;height:1.05rem;margin-top:.1rem}
.btn-bar.wide{width:100%;margin-top:.4rem}
.panel-note{font-size:.72rem;color:var(--muted);margin:.6rem 0 0}

/* ---------- sdílení ---------- */
.share-row{display:flex;gap:.45rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.share-label{font-size:.82rem;color:var(--muted);margin-right:.2rem}
.btn-share{
  width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:var(--bg);color:var(--text);font-size:1rem;font-weight:700;transition:.15s;
}
.btn-share:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}

/* ---------- fullscreen: vodoznak + přepínač ---------- */
.fs-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%;height:100%;cursor:pointer}
.fs-clock{display:flex;align-items:center;justify-content:center}
.fs-overlay .dg-time{font-size:clamp(4rem,18vw,17rem);color:#f3f7ff}
.fs-overlay .an-face{width:min(80vh,80vw)}
.fs-overlay .an-bg{fill:#0b0e15}
.fs-overlay .wd-text{font-size:clamp(2.2rem,7vw,5rem);color:#f3f7ff}
.fs-overlay .bn-dot{background:#141a26}
.fs-watermark{
  position:absolute;right:1.4rem;bottom:1.2rem;font-size:.85rem;letter-spacing:.14em;
  color:#566177;opacity:.55;user-select:none;pointer-events:none;text-transform:lowercase;
}
.fs-invert{
  position:absolute;top:1rem;right:1rem;z-index:5;width:2.4rem;height:2.4rem;border-radius:50%;
  border:1px solid #2b3547;background:transparent;color:#566177;font-size:1.1rem;cursor:pointer;opacity:.5;transition:.15s;
}
.fs-invert:hover{opacity:1;color:#f3f7ff}
.fs-overlay.fs-light{background:#f6f8fb}
.fs-overlay.fs-light .dg-time,.fs-overlay.fs-light .wd-text{color:#10141c}
.fs-overlay.fs-light .fs-date{color:#5b6675}
.fs-overlay.fs-light .an-bg{fill:#ffffff}
.fs-overlay.fs-light .fs-watermark,.fs-overlay.fs-light .fs-hint{color:#9aa6b5}
.fs-overlay.fs-light .fs-invert{border-color:#dde3ea;color:#9aa6b5}

/* ---------- silvestrovský odpočet ---------- */
.nye-overlay{
  position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;gap:.8rem;
  align-items:center;justify-content:center;background:#07060f;color:#fff;text-align:center;
}
.nye-overlay[hidden]{display:none !important}
.nye-title{margin:0;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:#9b8cff}
.nye-left{margin:0;font-size:clamp(2.6rem,11vw,7.5rem);font-weight:700;font-variant-numeric:tabular-nums}
.nye-overlay.finale .nye-left{font-size:clamp(6rem,28vw,20rem);color:#ffd166}
.nye-msg{margin:0;font-size:clamp(1.4rem,5vw,3rem);font-weight:700;color:#06d6a0;min-height:1.2em}
.nye-close{
  position:absolute;top:1rem;right:1rem;width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid #2b3547;background:transparent;color:#9aa3bd;font-size:1.1rem;cursor:pointer;
}
.nye-close:hover{color:#fff;border-color:#fff}

/* ---------- toast + konfety ---------- */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);z-index:130;
  background:var(--accent);color:#fff;font-weight:600;padding:.7rem 1.3rem;border-radius:999px;
  box-shadow:0 12px 35px rgba(0,0,0,.4);max-width:90vw;text-align:center;
}
.toast[hidden]{display:none !important}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:120}
#confetti[hidden]{display:none !important}
.speech-panel[hidden]{display:none !important}

/* hlavní čas v main-block už nepoužívá .time — hodiny kreslí JS */

/* ---------- doplňky: vypínač mluvení + čas v silvestru ---------- */
.btn-bar.off{opacity:.6;border-style:dashed}
.nye-now-row{margin:0 0 .3rem;font-size:1rem;color:#9aa3bd}
.nye-now{font-size:1.6rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;margin-left:.4rem}

/* ---------- patička ---------- */
.site-footer{
  margin-top:2rem;border-top:1px solid var(--line);background:var(--panel);
  padding:1.6rem 1.4rem 1rem;
}
.foot-grid{
  max-width:1100px;margin:0 auto;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.foot-col p{margin:.25rem 0;font-size:.88rem;color:var(--muted);line-height:1.55}
.foot-brand{font-size:1.05rem !important;font-weight:700;color:var(--text) !important}
.foot-tag{max-width:30ch}
.foot-head{font-weight:600;color:var(--text) !important;text-transform:uppercase;font-size:.72rem !important;letter-spacing:.12em;margin-bottom:.45rem !important}
.foot-col a{color:var(--accent);text-decoration:none}
.foot-col a:hover{text-decoration:underline}
.foot-mail{font-size:1rem;font-weight:600}
.foot-small{font-size:.78rem !important}
.foot-bottom{
  max-width:1100px;margin:1.2rem auto 0;padding-top:.9rem;border-top:1px solid var(--line);
  text-align:center;font-size:.75rem;color:var(--muted);
}


/* ============================================================
   MOBILNÍ RESPONZIVITA — oprava panelu nastavení + kompaktní lišta
   ============================================================ */
@media (max-width: 720px){
  /* horní lišta: tlačítka se vejdou a zalamují na střed */
  .status-bar{padding:.45rem .5rem}
  .status-bar .left{width:100%;justify-content:center;font-size:.8rem}
  .status-bar .right{width:100%;justify-content:center;flex-wrap:wrap;gap:.35rem}
  .btn-bar{font-size:.78rem;padding:.38rem .6rem}

  /* panel nastavení hlasu: dřív byl ukotvený k tlačítku a utíkal mimo
     obrazovku — na mobilu je nově fixovaný a vycentrovaný na viewport */
  .speech-panel{
    position:fixed;
    left:50%;top:5.2rem;right:auto;
    transform:translateX(-50%);
    width:min(94vw,340px);
    max-height:min(72vh,560px);
    overflow-y:auto;
    z-index:95;
  }

  .design-pills{gap:.35rem;padding:.6rem .5rem 0}
  .design-pill{font-size:.8rem;padding:.32rem .75rem}
  .main-block{padding:1.1rem .6rem}
  .container{padding:.7rem}
  .small-block{padding:.85rem .9rem}
  .share-row{gap:.4rem}
  .nye-left{word-break:keep-all}
}
@media (max-width: 380px){
  .btn-bar{font-size:.72rem;padding:.34rem .5rem}
}

/* ---------- Bez reklam: dialog + poděkování ---------- */
.af-overlay{position:fixed;inset:0;z-index:115;background:rgba(5,8,14,.72);
  display:flex;align-items:center;justify-content:center;padding:1rem}
.af-overlay[hidden]{display:none !important}
.af-modal{position:relative;background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);max-width:420px;width:100%;padding:1.3rem 1.4rem;
  max-height:85vh;overflow-y:auto}
.af-modal h3{margin:.1rem 0 .7rem}
.af-modal p{font-size:.92rem;line-height:1.55}
.af-pay{border:1px dashed var(--line);border-radius:12px;padding:.7rem .9rem;margin:.7rem 0}
.af-modal .err{color:#d33}
.thanks{text-align:center;font-size:1.05rem;line-height:1.6;color:var(--text)}
.thanks small{color:var(--muted)}

/* ---------- Bez reklam: objednávka, tabulka, QR ---------- */
.af-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.5rem 0}
.af-table th{text-align:left;color:var(--muted);font-weight:600;padding:.3rem .5rem .3rem 0;width:38%}
.af-table td{padding:.3rem 0;font-variant-numeric:tabular-nums}
.af-table tr + tr th,.af-table tr + tr td{border-top:1px solid var(--line)}
.af-qr-box{text-align:center;margin:.6rem 0}
.af-qr-box img{background:#fff;padding:8px;border-radius:10px;border:1px solid var(--line)}
.af-sub{margin:1rem 0 .3rem;font-size:.95rem}
#af-pay-info[hidden]{display:none !important}

/* ============================================================
   PRÉMIOVÉ FUNKCE: designy, demo odznak, vodoznak, zvuky
   ============================================================ */
.design-pill.prem{border-style:dashed}
.design-pill.prem.on{border-style:solid}
.demo-badge{
  margin:.7rem auto 0;max-width:560px;font-size:.85rem;color:var(--muted);cursor:pointer;
  background:var(--bg);border:1px dashed var(--accent);border-radius:10px;padding:.5rem .8rem;
}
.demo-badge:hover{color:var(--accent)}
.demo-badge[hidden]{display:none !important}

/* — Flip — */
.fl-wrap{display:flex;gap:.45rem;align-items:center}
.fl-group{display:flex;gap:.3rem}
.fl-sep{font-size:clamp(1.6rem,5vw,3rem);color:var(--muted);font-weight:700}
.fl-card{
  position:relative;width:clamp(42px,9vw,76px);height:clamp(62px,13vw,110px);
  background:linear-gradient(180deg,#3a4254 0%,#2b3242 49%,#222837 51%,#1a1f2c 100%);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 4px 10px rgba(0,0,0,.35);
}
body:not(.dark-mode) .fl-card{
  background:linear-gradient(180deg,#fff 0%,#f0f2f6 49%,#e2e6ee 51%,#d4dae6 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 4px 10px rgba(20,40,80,.15);
}
.fl-card::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:rgba(0,0,0,.35)}
.fl-card span{
  font-size:clamp(2rem,6vw,4.2rem);font-weight:700;color:#f3f7ff;font-variant-numeric:tabular-nums;
}
body:not(.dark-mode) .fl-card span{color:#1b2430}
.fl-card.tick span{animation:flTick .28s ease-out}
@keyframes flTick{0%{transform:rotateX(80deg);opacity:.2}100%{transform:rotateX(0);opacity:1}}

/* — LED panel — */
.led-wrap{display:flex;gap:clamp(4px,1vw,9px);padding:1rem;background:#0c0d10;border-radius:14px;
  border:1px solid #23252c;box-shadow:inset 0 0 30px rgba(0,0,0,.7)}
.led-digit{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1px,.4vw,3px)}
.led-digit.colon{opacity:.95}
.led-digit i{
  width:clamp(4px,1.4vw,11px);aspect-ratio:1;border-radius:50%;background:#1d1414;display:block;
}
.led-digit i.on{background:#ff2d2d;box-shadow:0 0 6px #ff2d2d,0 0 14px rgba(255,45,45,.6)}

/* — Terminál — */
.tr-wrap{
  font-family:ui-monospace,Consolas,monospace;background:#03110a;color:#2bff7e;border-radius:12px;
  border:1px solid #0c3d22;padding:1.1rem 1.4rem;min-width:min(86vw,460px);position:relative;overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,40,15,.6);text-align:left;
}
.tr-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 4px)}
.tr-head{font-size:.85rem;opacity:.7;margin-bottom:.4rem}
.tr-time{font-size:clamp(2.4rem,9vw,4.6rem);font-weight:600;text-shadow:0 0 10px rgba(43,255,126,.7)}
.tr-cursor{animation:blink 1s steps(1) infinite;margin-left:.15em}
.tr-foot{font-size:.78rem;opacity:.6;margin-top:.4rem}

/* — vlastní text ve fullscreenu — */
.fs-wm-edit{
  position:absolute;bottom:1.1rem;left:1.4rem;z-index:5;font-size:.78rem;cursor:pointer;
  background:transparent;border:1px solid #2b3547;border-radius:999px;color:#566177;
  padding:.3rem .7rem;opacity:.55;transition:.15s;
}
.fs-wm-edit:hover{opacity:1;color:#f3f7ff}
.fs-wm-edit[hidden]{display:none !important}
.fs-overlay.fs-light .fs-wm-edit{border-color:#dde3ea;color:#9aa6b5}