/* ============================================================
   mluvicihodiny.cz — „půlnoc a mosaz"
   Paleta: půlnoční modř, mosaz, slonovina, měděná červeň
   ============================================================ */
:root{
  --night:   #0a0e1c;
  --panel:   #11182c;
  --panel-2: #161f38;
  --line:    #26314f;
  --ivory:   #f2ede3;
  --muted:   #9aa3bd;
  --brass:   #d9a441;
  --brass-2: #f0c46c;
  --copper:  #d96b4a;
  --teal:    #4cc2b5;
  --radius:  18px;
  --disp: "Fraunces", Georgia, serif;
  --body: "Outfit", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 70% -10%, #1a2342 0%, transparent 60%),
    radial-gradient(800px 500px at 0% 100%, #131a30 0%, transparent 55%),
    var(--night);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:330;
  min-height:100vh;
}
.mono{font-family:var(--mono)}
a{color:inherit;text-decoration:none}
h2{font-family:var(--disp);font-weight:450;font-size:1.15rem;margin:0 0 .8rem;letter-spacing:.02em}
h3.sub{font-family:var(--disp);font-weight:450;font-size:1rem;margin:1.1rem 0 .5rem;color:var(--brass-2)}
.muted{color:var(--muted);font-size:.85rem}

/* ---------- Hlavička ---------- */
.top{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-dial{width:38px;height:38px;border-radius:50%;border:3px solid var(--brass);position:relative;flex:none;
  background:radial-gradient(circle at 35% 30%, #1c2746, #0d1326)}
.brand-dial::before,.brand-dial::after{content:"";position:absolute;left:50%;top:50%;background:var(--ivory);
  transform-origin:0 0;border-radius:2px}
.brand-dial::before{width:2.5px;height:12px;transform:rotate(180deg)}
.brand-dial::after{width:2.5px;height:9px;transform:rotate(290deg)}
.brand-name{font-family:var(--disp);font-size:1.25rem;font-weight:500;line-height:1.05;display:flex;flex-direction:column}
.brand-name small{font-family:var(--body);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}

.langs,.designs{display:flex;flex-wrap:wrap;gap:.4rem}
.designs{justify-content:center;padding:1.1rem 1rem .2rem}
.pill{padding:.34rem .85rem;border:1px solid var(--line);border-radius:999px;font-size:.82rem;color:var(--muted);
  transition:.18s}
.pill:hover{border-color:var(--brass);color:var(--ivory)}
.pill.on{background:var(--brass);border-color:var(--brass);color:#1c1505;font-weight:600}
.pill.big{font-size:.95rem;padding:.45rem 1.1rem}

/* ---------- Jeviště ---------- */
.stage{display:flex;flex-direction:column;align-items:center;padding:1.6rem 1rem 1rem}
.clock-root{width:min(92vw,560px);min-height:300px;display:flex;align-items:center;justify-content:center}
.stage-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.2rem}
.hint{color:var(--copper);font-size:.85rem}

/* ---------- Tlačítka & formuláře ---------- */
.btn{font-family:var(--body);font-size:.95rem;font-weight:500;cursor:pointer;border-radius:12px;
  padding:.65rem 1.25rem;border:1px solid var(--line);background:var(--panel-2);color:var(--ivory);transition:.18s}
.btn:hover{transform:translateY(-1px);border-color:var(--brass)}
.btn.gold{background:linear-gradient(160deg,var(--brass-2),var(--brass));color:#211803;border:none;font-weight:650}
.btn.gold:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}
.btn.small{padding:.45rem .9rem;font-size:.85rem}
.btn.tiny{padding:.3rem .65rem;font-size:.78rem;border-radius:9px}
select,input[type=number],input[type=text],input[type=datetime-local]{
  font-family:var(--body);font-size:.9rem;color:var(--ivory);background:var(--night);
  border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem;width:100%;margin-top:.25rem}
input.num{width:5.2rem}
select:focus,input:focus,.btn:focus-visible,.pill:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.lbl{display:block;font-size:.8rem;color:var(--muted);margin:.7rem 0}
.chk{display:flex;gap:.6rem;align-items:flex-start;margin:.6rem 0;font-size:.9rem;cursor:pointer}
.chk input{accent-color:var(--brass);width:1.1rem;height:1.1rem;margin-top:.1rem}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}
.presets{margin-top:.2rem}

/* ---------- Mřížka karet ---------- */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  padding:1.2rem 1.4rem 2rem;max-width:1280px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
.bigtime{font-size:2.3rem;font-weight:400;letter-spacing:.04em;margin:.3rem 0 .4rem;font-variant-numeric:tabular-nums}
.laps{margin:.6rem 0 0;padding-left:1.4rem;font-size:.85rem;color:var(--muted);max-height:9rem;overflow:auto}
.laps li{padding:.12rem 0}
.laps li b{color:var(--ivory);font-weight:500}

/* ---------- Kalendář ---------- */
.cal{display:flex;gap:1.1rem;align-items:center}
.cal-day{font-family:var(--disp);font-size:4.4rem;font-weight:550;line-height:1;color:var(--brass-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:.55rem .9rem;min-width:4.6rem;text-align:center}
.cal-month{font-family:var(--disp);font-size:1.4rem;margin-bottom:.35rem;text-transform:capitalize}
.cal-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.35rem}
.tag{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .55rem;border-radius:999px;
  border:1px solid var(--line);color:var(--muted)}
.tag.odd{border-color:var(--copper);color:var(--copper)}
.tag.even{border-color:var(--teal);color:var(--teal)}
.cal-meta2{font-size:.82rem;color:var(--muted)}

/* ---------- Patička, toast, konfety ---------- */
.foot{display:flex;gap:.8rem;justify-content:center;padding:1rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.78rem}
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);background:var(--brass);color:#211803;
  font-weight:600;padding:.7rem 1.3rem;border-radius:999px;box-shadow:0 12px 35px rgba(0,0,0,.5);z-index:60}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}

/* ============================================================
   DESIGNY HODIN
   ============================================================ */

/* — Analogové — */
.an-wrap{width:min(82vw,420px);aspect-ratio:1;position:relative}
.an-face{width:100%;height:100%}
.an-ring{fill:none;stroke:var(--brass);stroke-width:3.5}
.an-bg{fill:url(#anGrad)}
.an-tick{stroke:#6b7494;stroke-width:1.4}
.an-tick.h5{stroke:var(--brass-2);stroke-width:3}
.an-num{fill:var(--ivory);font-family:var(--disp);font-size:22px;font-weight:500;text-anchor:middle;dominant-baseline:central}
.an-hand{stroke-linecap:round}
.an-hour{stroke:var(--ivory);stroke-width:7}
.an-min{stroke:var(--ivory);stroke-width:4.5}
.an-sec{stroke:var(--copper);stroke-width:1.8}
.an-cap{fill:var(--brass)}
.an-date{fill:var(--muted);font-family:var(--mono);font-size:11px;text-anchor:middle;letter-spacing:.12em}

/* — Digitální — */
.dg-wrap{text-align:center}
.dg-time{font-family:var(--mono);font-weight:300;font-size:clamp(3rem,13vw,6.4rem);letter-spacing:.03em;
  font-variant-numeric:tabular-nums;color:var(--ivory);text-shadow:0 0 28px rgba(217,164,65,.25)}
.dg-time .sec{font-size:.45em;color:var(--brass-2);vertical-align:.55em}
.dg-time .blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.dg-date{font-size:1rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:.4rem}

/* — Binární — */
.bn-wrap{display:flex;gap:1.6rem;align-items:flex-end}
.bn-group{display:flex;gap:.55rem}
.bn-col{display:flex;flex-direction:column-reverse;gap:.55rem;align-items:center}
.bn-dot{width:clamp(20px,5.5vw,32px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line);
  background:var(--panel-2);transition:background .15s,box-shadow .15s}
.bn-dot.on{background:var(--brass);border-color:var(--brass-2);box-shadow:0 0 14px rgba(217,164,65,.55)}
.bn-lab{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.45rem}
.bn-read{font-family:var(--mono);color:var(--muted);text-align:center;margin-top:1rem;font-size:1rem}

/* — Slovní — */
.wd-wrap{max-width:560px;text-align:center;padding:1rem}
.wd-text{font-family:var(--disp);font-style:italic;font-weight:420;font-size:clamp(1.7rem,6vw,2.9rem);
  line-height:1.35;color:var(--ivory)}
.wd-text em{font-style:italic;color:var(--brass-2)}
.wd-sub{margin-top:.9rem;font-family:var(--mono);color:var(--muted);font-size:.95rem;letter-spacing:.1em}

/* — Nixie — */
.nx-wrap{display:flex;gap:.5rem;align-items:center}
.nx-tube{width:clamp(40px,9vw,72px);height:clamp(72px,16vw,128px);border-radius:14px 14px 18px 18px;
  background:linear-gradient(180deg,rgba(255,140,60,.06),rgba(255,90,30,.13) 60%,rgba(20,10,5,.5));
  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-family:var(--mono);font-weight:300;font-size:clamp(2.4rem,7vw,4.6rem);color:#ffb46b;
  text-shadow:0 0 8px #ff7a2e,0 0 26px #ff5e1a,0 0 60px rgba(255,90,20,.5);z-index:1}
.nx-colon{color:#ff9a4d;font-size:clamp(1.8rem,5vw,3.4rem);text-shadow:0 0 14px #ff6a20;animation:blink 1s steps(1) infinite}

@media (max-width:640px){
  .top{justify-content:center;text-align:center}
  .bigtime{font-size:1.9rem}
  .cal-day{font-size:3.4rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}