@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/space-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --grafit: #15130F; --grafit2: #1E1B15; --krieda: #F1EBDC; --popol: #A89F8C;
  --uhlik: #24211B; --zltok: #E8A93D; --zltok-hi: #F5C063; --med: #B0703A; --med-text: #BC7A40;
  --cervena: #B3301C;
  --linka: rgba(241, 235, 220, .14);
  --disp: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --text: system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--grafit); color: var(--krieda);
  font-family: var(--text); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--krieda); outline-offset: 2px; }

.hlavicka {
  flex: none; display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  background: var(--grafit); border-bottom: 1px solid var(--linka);
}
.znacka { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.znacka img { width: 2.6rem; height: auto; display: block; }
.znacka b { font-family: var(--disp); font-weight: 700; font-size: 1.15rem; letter-spacing: .05em; }
.hlavicka .titul { font-family: var(--disp); color: var(--popol); font-size: .95rem; }
.hlavicka .spat { margin-left: auto; font-family: var(--disp); font-size: .9rem; color: var(--popol); text-decoration: none; white-space: nowrap; }
.hlavicka .spat:hover { color: var(--zltok); }

main { flex: 1; display: flex; overflow: hidden; min-height: 0; }
#pole {
  flex: 1; position: relative; overflow: hidden; min-width: 0;
  /* prst po scéne nesmie spúšťať označovanie textu, modrý tap-flash ani copy menu */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#scena { position: absolute; inset: 0; }
#scena canvas { display: block; }
#chipy { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.chip {
  /* čistý štítok: gestá (koliesko, ťahanie, pinch) idú VŽDY do 3D plátna;
     klik na stôl rieši raycast s veľkorysou dotykovou plochou */
  position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  font-family: var(--disp); font-weight: 700; font-size: 13px; line-height: 1;
  padding: 6px 10px 5px; background: var(--krieda); color: var(--grafit);
  border: 2px solid var(--grafit); user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.chip.hover { border-color: var(--zltok); background: var(--zltok); }
.chip.obsadeny { background: var(--cervena); border-color: var(--cervena); color: var(--krieda); }
.chip.maly { background: var(--grafit2); border-color: var(--popol); color: var(--popol); }
.chip.vybrany { background: var(--zltok); border-color: var(--zltok); color: var(--grafit); }

#napoveda, #oznam, #apiBanner, #velkaSkupina, #kontextHlaska {
  position: absolute; left: 1rem; top: .85rem; max-width: min(340px, calc(100% - 2rem));
  font-size: .85rem; color: var(--krieda);
  background: color-mix(in srgb, var(--grafit) 88%, transparent);
  border: 1px solid var(--linka); padding: .55rem .8rem; z-index: 4;
}
#napoveda { display: none; }
#oznam { top: auto; bottom: .85rem; border-color: var(--zltok); }
#apiBanner { border-color: var(--med); display: flex; gap: .6rem; align-items: flex-start; }
#apiBanner a { color: var(--zltok); }
#apiZavri {
  flex: none; width: 28px; height: 28px; margin: -2px -4px 0 0;
  background: transparent; color: var(--krieda); border: 1px solid var(--linka);
  font-size: 1rem; cursor: pointer;
}
#apiZavri:hover { border-color: var(--zltok); color: var(--zltok); }
#velkaSkupina { top: 3.4rem; border-color: var(--zltok); }
#kontextHlaska { border-color: var(--med); }

.tlacidlo {
  display: inline-block; background: var(--zltok); color: var(--grafit);
  font-family: var(--disp); font-weight: 700; font-size: .98rem;
  text-decoration: none; text-align: center; padding: .8rem 1.2rem; border: 1px solid var(--zltok);
  min-height: 44px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
.tlacidlo:hover { background: var(--zltok-hi); border-color: var(--zltok-hi); }
.tlacidlo:active { transform: translateY(1px); }
.tlacidlo[disabled] { opacity: .55; cursor: default; }
.tlacidlo.duch { background: transparent; color: var(--krieda); border-color: var(--krieda); }
.tlacidlo.duch:hover { background: rgba(241, 235, 220, .1); }

#bocny {
  flex: none; width: 372px; display: flex; flex-direction: column;
  background: var(--grafit2); border-left: 1px solid var(--linka);
  overflow-y: auto;
}
.ovladanie {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .8rem;
  padding: 1rem 1.2rem .4rem;
}
.ovladanie label {
  font-family: var(--disp); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--popol); display: grid; gap: .3rem;
}
.ovladanie .o-datum { grid-column: 1 / -1; position: relative; }
.vstup {
  background: var(--uhlik); color: var(--krieda); border: 1px solid var(--linka);
  font-family: var(--disp); font-size: .95rem; padding: .45rem .6rem; min-height: 42px; width: 100%;
}
.vstup:focus-visible { border-color: var(--zltok); }
#datum { cursor: pointer; caret-color: transparent; }

/* vlastný kalendár: deň sa použije hneď klepnutím, žiadne potvrdzovanie */
.kal {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 292px;
  background: var(--grafit2); border: 1px solid var(--linka); padding: .7rem .75rem .8rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.kal-hlava { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.kal-hlava b { font-family: var(--disp); font-size: .85rem; letter-spacing: .04em; text-transform: capitalize; color: var(--krieda); }
.kal-sip {
  width: 34px; height: 34px; background: transparent; color: var(--krieda);
  border: 1px solid var(--linka); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.kal-sip:hover:not([disabled]) { border-color: var(--zltok); color: var(--zltok); }
.kal-sip[disabled] { opacity: .3; cursor: default; }
.kal-dni, .kal-mriezka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kal-dni span {
  text-align: center; font-family: var(--disp); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--popol); padding: .15rem 0 .3rem;
}
.kal-den {
  aspect-ratio: 1; min-height: 34px; background: transparent; color: var(--krieda);
  border: 1px solid transparent; font-family: var(--disp); font-size: .85rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.kal-den:hover:not([disabled]) { border-color: var(--zltok); }
.kal-den.dnesok { border-color: var(--linka); }
.kal-den.vybrany { background: var(--zltok); color: var(--grafit); font-weight: 700; }
.kal-den[disabled] { color: var(--popol); opacity: .35; cursor: default; }
.legenda {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: .5rem 1.2rem .8rem; font-size: .8rem; color: var(--popol);
  border-bottom: 1px solid var(--linka);
}
.legenda span { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.kocka { width: 12px; height: 12px; border: 2px solid var(--krieda); background: transparent; }
.kocka.obsadena { background: var(--cervena); border-color: var(--cervena); }
.kocka.mala { background: transparent; border-color: var(--popol); opacity: .6; }

#panel { padding: 1.1rem 1.2rem 1.4rem; }
.p-kicker { font-family: var(--disp); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--med-text); font-weight: 700; }
.p-hlava { display: flex; align-items: flex-start; gap: .6rem; margin-top: .2rem; }
.p-hlava h2 { font-family: var(--disp); font-size: 1.45rem; line-height: 1.15; flex: 1; }
.ikona {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; color: var(--krieda); border: 1px solid var(--linka);
  font-size: 1.2rem; cursor: pointer;
}
.ikona:hover { border-color: var(--zltok); color: var(--zltok); }
.p-meta { font-size: .85rem; color: var(--popol); margin-top: .3rem; }
.ciara { border-top: 1px solid var(--linka); margin: .9rem 0; }
.p-text { font-size: .92rem; margin-bottom: .9rem; }
.p-text a { color: var(--zltok); }
.p-kroky { display: grid; gap: .65rem; margin-top: .4rem; font-size: .92rem; }
.p-kroky div { display: flex; gap: .6rem; align-items: baseline; }
.p-kroky b {
  flex: none; font-family: var(--disp); color: var(--zltok);
  border: 1px solid var(--linka); width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center; font-size: .85rem;
}
.p-form { display: grid; gap: .75rem; }
.pole { display: grid; gap: .3rem; }
.pole label { font-family: var(--disp); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--popol); }
.pole label em { font-style: normal; text-transform: none; letter-spacing: 0; }
.pole input, .pole textarea {
  background: var(--uhlik); color: var(--krieda); border: 1px solid var(--linka);
  font-family: var(--text); font-size: 1rem; padding: .55rem .65rem; min-height: 42px;
}
.pole textarea { min-height: 60px; resize: vertical; }
.pole input:focus-visible, .pole textarea:focus-visible { border-color: var(--zltok); outline: none; }
.pole.skryte { position: absolute; left: -9999px; top: -9999px; }
.p-chyba { font-size: .88rem; color: var(--zltok); border: 1px solid var(--med); padding: .5rem .7rem; }
.p-gdpr { font-size: .74rem; color: var(--popol); }
.p-gdpr a { color: var(--med-text); }
.pozn-rozbal summary {
  cursor: pointer; font-family: var(--disp); font-size: .82rem; color: var(--popol);
  list-style: none; padding: .1rem 0;
}
.pozn-rozbal summary::-webkit-details-marker { display: none; }
.pozn-rozbal summary:hover { color: var(--zltok); }
.pozn-rozbal[open] summary { margin-bottom: .4rem; }

#fallback { position: absolute; inset: 0; overflow-y: auto; padding: 1rem clamp(1rem, 3vw, 2rem) 2rem; }
#fallback h2 { font-family: var(--disp); font-size: 1.2rem; margin: .5rem 0 1rem; }
#fallbackStoly { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; max-width: 900px; }
.f-stol {
  display: grid; gap: .15rem; text-align: left; padding: .8rem .9rem; cursor: pointer;
  background: var(--grafit2); color: var(--krieda); border: 1px solid var(--linka);
  font-family: var(--disp);
}
.f-stol strong { font-size: 1.05rem; }
.f-stol span { color: var(--popol); font-size: .82rem; }
.f-stol em { font-style: normal; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--zltok); }
.f-stol:hover { border-color: var(--zltok); }
.f-stol.obsadeny { opacity: .75; } .f-stol.obsadeny em { color: #E05540; }
.f-stol.maly em { color: var(--popol); }
.f-stol.vybrany { border-color: var(--zltok); background: var(--uhlik); }

.podpis {
  position: absolute; right: .9rem; bottom: .6rem; z-index: 3;
  font-size: .68rem; color: var(--popol); opacity: .85;
}
.podpis a { color: var(--popol); }

.tlacidlo.maly { padding: .5rem .85rem; min-height: 40px; font-size: .85rem; }
#celkovy {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 4;
  background: color-mix(in srgb, var(--grafit) 82%, transparent);
}

.bez-js {
  position: fixed; inset: auto 1rem 1rem; z-index: 99;
  background: var(--grafit2); border: 1px solid var(--med); padding: 1rem;
}

@media (max-width: 700px) {
  .hlavicka { gap: .7rem; padding: .55rem 1rem; }
  .hlavicka .titul { display: none; }
  main { flex-direction: column; }
  #bocny {
    order: -1; width: 100%; flex-direction: row; align-items: end; gap: .5rem;
    overflow: visible; border-left: none; border-bottom: 1px solid var(--linka);
  }
  .ovladanie {
    flex: 1; display: flex; gap: .5rem; padding: .5rem .75rem .6rem;
  }
  .ovladanie label { flex: 1 1 30%; }
  .ovladanie .o-datum { flex: 1 1 36%; }
  .vstup { min-height: 40px; padding: .4rem .45rem; font-size: .9rem; }
  .legenda { display: none; }
  #napoveda { display: block; transition: opacity .45s; }
  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    /* horná hrana prilieha presne na spodok lišty dátum/čas/osoby (meria app.js) —
       panel má vždy plnú výšku, žiadna škára pri kratšom obsahu */
    top: var(--panelStrop, 12dvh); overflow-y: auto;
    background: var(--grafit2); border-top: 1px solid var(--linka);
    padding: 1.3rem .9rem 1rem;
    transform: translateY(103%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  /* kompaktný formulár: celý sa má zmestiť na displej bez rolovania vo vnútri */
  #panel .p-hlava h2 { font-size: 1.2rem; }
  #panel .ikona { width: 34px; height: 34px; }
  #panel .p-meta { font-size: .78rem; margin-top: .15rem; }
  #panel .ciara { margin: .55rem 0; }
  #panel .p-form { gap: .5rem; }
  #panel .pole { gap: .2rem; }
  #panel .pole label { font-size: .64rem; }
  #panel .pole input, #panel .pole textarea { min-height: 38px; padding: .4rem .55rem; font-size: .95rem; }
  #panel .pole textarea { min-height: 48px; }
  #panel .tlacidlo { padding: .65rem 1rem; min-height: 42px; }
  #panel .p-gdpr { font-size: .66rem; line-height: 1.4; }
  #panel .p-text { font-size: .88rem; margin-bottom: .6rem; }
  #panel .p-kroky { gap: .5rem; font-size: .88rem; }
  #panel::before {
    content: ""; position: absolute; top: .5rem; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px; background: var(--linka); border-radius: 2px;
  }
  #panel.otvoreny { transform: none; }
  .podpis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #panel { transition: none; }
}