/* Guláš hlasovanie — mobile first, veľké dotykové ciele */

:root {
  --bg:        #fdf6ec;
  --bg-card:   #ffffff;
  --fg:        #2b1a12;
  --fg-soft:   #7a6455;
  --brand:     #8c1c13;
  --brand-2:   #c1440e;
  --accent:    #e0a458;
  --on-brand:  #ffffff;      /* text na farebnom tlačidle */
  --line:      #e8d9c5;
  --ok:        #2f7d32;
  --err:       #b3261e;
  --shadow:    0 2px 10px rgba(80, 40, 20, .10);
  --radius:    16px;
}

@media (prefers-color-scheme: dark) {
  :root, :root[data-theme="gulas"] {
    --bg:      #1a120e;
    --bg-card: #251a15;
    --fg:      #f6ece1;
    --fg-soft: #b39c8a;
    --brand:   #e4572e;
    --brand-2: #f2803c;
    --line:    #3b2b23;
    --shadow:  0 2px 12px rgba(0, 0, 0, .45);
    --on-brand: #24120a;
  }
}

/* ---------------------------------------------------------------- palety
   Menia sa v admine (nastavenie `theme`), zoznam musí sedieť s THEMES v main.py.
   Každá paleta má svetlú aj tmavú verziu, okrem "noc", ktorá je tmavá vždy. */

:root[data-theme="obloha"] {          /* modrá podľa plagátu Dni obce */
  --bg:      #eef2fb;
  --bg-card: #ffffff;
  --fg:      #16213f;
  --fg-soft: #64708f;
  --brand:   #1d3a8a;
  --brand-2: #3f5fd0;
  --accent:  #f0b429;
  --line:    #d7dff1;
  --shadow:  0 2px 10px rgba(30, 50, 110, .12);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="obloha"] {
    --bg:      #0e1425;
    --bg-card: #182036;
    --fg:      #e8eefc;
    --fg-soft: #9aa8c8;
    --brand:   #6f8bee;
    --brand-2: #8aa4ff;
    --accent:  #f0b429;
    --line:    #2a3654;
    --shadow:  0 2px 12px rgba(0, 0, 0, .5);
    --on-brand: #24120a;
  }
}

:root[data-theme="les"] {             /* zelená, pokojná */
  --bg:      #f1f7ef;
  --bg-card: #ffffff;
  --fg:      #16261a;
  --fg-soft: #5f7862;
  --brand:   #2f6b34;
  --brand-2: #3d7f32;
  --accent:  #d8a13a;
  --line:    #d7e6d3;
  --shadow:  0 2px 10px rgba(30, 70, 40, .10);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="les"] {
    --bg:      #0f1a12;
    --bg-card: #18271b;
    --fg:      #e9f3e8;
    --fg-soft: #9db8a0;
    --brand:   #5fbf5a;
    --brand-2: #7fd66f;
    --accent:  #e0b455;
    --line:    #273b2a;
    --shadow:  0 2px 12px rgba(0, 0, 0, .5);
    --on-brand: #24120a;
  }
}

:root[data-theme="vino"] {            /* bordó a zlatá, slávnostná */
  --bg:      #faf3f4;
  --bg-card: #ffffff;
  --fg:      #2a1216;
  --fg-soft: #7d5c62;
  --brand:   #7b1e2b;
  --brand-2: #a83248;
  --accent:  #c8a35a;
  --line:    #ecd8dc;
  --shadow:  0 2px 10px rgba(90, 30, 45, .12);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="vino"] {
    --bg:      #1b1013;
    --bg-card: #271a1e;
    --fg:      #f7e9ec;
    --fg-soft: #bd9aa2;
    --brand:   #e0687f;
    --brand-2: #f08aa0;
    --accent:  #d4b06a;
    --line:    #3d272d;
    --shadow:  0 2px 12px rgba(0, 0, 0, .5);
    --on-brand: #24120a;
  }
}

:root[data-theme="jarmok"] {          /* veselá oranžová a tyrkys */
  --bg:      #fff8f0;
  --bg-card: #ffffff;
  --fg:      #23201c;
  --fg-soft: #7d7166;
  --brand:   #c2410c;
  --brand-2: #cf4610;
  --accent:  #17807f;
  --line:    #f5ddc7;
  --shadow:  0 2px 10px rgba(120, 70, 20, .12);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="jarmok"] {
    --bg:      #191512;
    --bg-card: #241e1a;
    --fg:      #f9efe4;
    --fg-soft: #bba895;
    --brand:   #ff7a3d;
    --brand-2: #ffa15c;
    --accent:  #3ec5c5;
    --line:    #382c23;
    --shadow:  0 2px 12px rgba(0, 0, 0, .5);
    --on-brand: #24120a;
  }
}

:root[data-theme="noc"] {             /* tmavá vždy — na večerné vyhlásenie */
  --bg:      #14100e;
  --bg-card: #211a16;
  --fg:      #f6ece1;
  --fg-soft: #b39c8a;
  --brand:   #e4572e;
  --brand-2: #f2803c;
  --accent:  #e0a458;
  --line:    #372922;
  --shadow:  0 2px 14px rgba(0, 0, 0, .55);
  --on-brand: #24120a;
}

* { box-sizing: border-box; }

/* display: flex/grid v triedach nižšie by inak prebilo atribút hidden */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* overscroll-behavior tu zámerne nie je — blokovalo by natívne
     potiahnutie dole na obnovenie stránky na mobile */
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 16px calc(32px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- hlavička */

.head { text-align: center; margin-bottom: 22px; }

.pot {
  font-size: 54px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .18));
}

h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--brand);
}

.sub { margin: 6px 0 0; color: var(--fg-soft); font-size: .98rem; }

.hint {
  margin: 0 0 14px;
  text-align: center;
  color: var(--fg-soft);
  font-size: .92rem;
}

/* ---------------------------------------------------------------- karty */

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
}

.center { text-align: center; }

/* ---------------------------------------------------------------- tímy */

.teams { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.team {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--fg);
  font: inherit;
  font-size: 1.06rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.team:active { transform: scale(.975); border-color: var(--brand); }

.team .num {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--brand), var(--brand-2));
  color: var(--on-brand);
  border-radius: 50%;
  font-size: .95rem;
  font-weight: 700;
}

.team .name { flex: 1; }
.team .note { display: block; font-weight: 400; font-size: .84rem; color: var(--fg-soft); }

/* ---------------------------------------------------------------- potvrdenie */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 8, 4, .55);
  backdrop-filter: blur(2px);
  animation: fade .15s ease;
}

.sheet-inner {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card);
  border-radius: 22px 22px 0 0;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  animation: up .2s ease;
}

@keyframes fade { from { opacity: 0; } }
@keyframes up   { from { transform: translateY(30px); } }

.sheet-q    { margin: 0; color: var(--fg-soft); font-size: .95rem; }
.sheet-name { margin: 6px 0 4px; font-size: 1.5rem; font-weight: 700; color: var(--brand); }
.sheet-warn { margin: 0 0 18px; color: var(--fg-soft); font-size: .85rem; }

.sheet-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }

.btn {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(.97); }

.btn-primary { background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: var(--on-brand); }
.btn-ghost   { background: transparent; color: var(--fg-soft); border: 2px solid var(--line); }
.btn[disabled] { opacity: .6; cursor: default; }

/* ---------------------------------------------------------------- hotovo */

.big-icon { font-size: 52px; line-height: 1; margin-bottom: 8px; }

#done h2 { margin: 0 0 6px; font-size: 1.3rem; }

.voted-team {
  margin: 16px 0 0;
  padding: 12px;
  background: var(--bg);
  border: 2px dashed var(--line);
  border-radius: 12px;
  font-weight: 700;
  color: var(--brand);
}

/* ---------------------------------------------------------------- výsledky */

#results { margin-top: 16px; }

.res-h { margin: 0 0 14px; font-size: 1.1rem; }

.res { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.res li { display: grid; gap: 5px; }

.res-row { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; }
.res-row .n { font-weight: 600; }
.res-row .v { color: var(--fg-soft); white-space: nowrap; }

.bar { height: 9px; background: var(--line); border-radius: 99px; overflow: hidden; }

.bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 99px;
  transition: width .5s ease;
}

.res-total { margin: 16px 0 0; text-align: center; color: var(--fg-soft); font-size: .88rem; }

/* prepnutie sekcie (napr. keď sa hlasovanie otvorí) nech nie je švihnutie —
   beží len pri skutočnej zmene, tiché obnovovanie sa sekcií nedotýka */
#vote:not([hidden]), #done:not([hidden]), #results:not([hidden]) {
  animation: soft-in .28s ease;
}

@keyframes soft-in {
  from { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  #vote:not([hidden]), #done:not([hidden]), #results:not([hidden]),
  .sheet, .sheet-inner { animation: none; }
  .bar span { transition: none; }
}

/* ---------------------------------------------------------------- ostatné */

.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error {
  margin: 16px 0 0;
  padding: 14px;
  background: rgba(179, 38, 30, .10);
  border: 1px solid rgba(179, 38, 30, .35);
  border-radius: 12px;
  color: var(--err);
  text-align: center;
  font-size: .95rem;
}

.foot { margin-top: 28px; text-align: center; color: var(--fg-soft); font-size: .78rem; }