/* === Základné premenné a reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --farba-m: #c94b9e;
  --farba-a: #2baee8;
  --farba-i: #e0213f;
  --farba-u: #7b3b28;
  --farba-s-hac: #f5a623;
  --farba-s: #3daa4f;

  --tien-karticka: 0 4px 16px rgba(0,0,0,0.13);
  --tien-hover: 0 8px 28px rgba(0,0,0,0.22);
  --polomer: 18px;
  --prechod: 0.18s ease;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f0f4f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* === Hlavička === */
.hlavicka {
  background: linear-gradient(135deg, #1a237e 0%, #283593 60%, #3949ab 100%);
  color: #fff;
  text-align: center;
  padding: 24px 16px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.hlavicka h1 {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 1px;
}

.podnadpis {
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
  opacity: 0.82;
  margin-top: 6px;
}

/* === Mriežka kartičiek === */
.mriezka {
  flex: 1;
  display: grid;
  /* Mobile: 2 stĺpce, tablet: 3, desktop: 3 väčšie */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 24px 16px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 560px) {
  .mriezka {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .mriezka {
    gap: 24px;
    padding: 32px 24px;
  }
}

/* === Kartička === */
.karticka {
  background: #fff;
  border-radius: var(--polomer);
  box-shadow: var(--tien-karticka);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10px 14px;
  gap: 10px;
  transition:
    transform var(--prechod),
    box-shadow var(--prechod),
    background var(--prechod);
  user-select: none;
  border-top: 6px solid var(--farba-karticka, #ccc);
  position: relative;
  overflow: hidden;
}

/* Hover a focus efekty */
.karticka:hover,
.karticka:focus-visible {
  transform: translateY(-5px) scale(1.03);
  box-shadow: var(--tien-hover);
  outline: none;
}

/* Efekt kliknutia */
.karticka:active,
.karticka.aktivna {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Zvýraznenie práve hrajúcej kartičky */
.karticka.hrajuca {
  background: #f7f0ff;
  box-shadow: 0 0 0 3px var(--farba-karticka, #aaa), var(--tien-hover);
}

/* Obrázok na kartičke */
.karticka-obrazok {
  width: 90%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  max-width: 240px;
  pointer-events: none;
  transition: transform 0.15s ease;
}

.karticka:hover .karticka-obrazok {
  transform: scale(1.07);
}

/* Veľké písmeno fonémy */
.karticka-pismeno {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  color: var(--farba-karticka, #333);
  line-height: 1;
  letter-spacing: -1px;
}

/* Pridelenie farieb podľa fonémy */
.karticka[data-fonem="m"]   { --farba-karticka: var(--farba-m); }
.karticka[data-fonem="a"]   { --farba-karticka: var(--farba-a); }
.karticka[data-fonem="i"]   { --farba-karticka: var(--farba-i); }
.karticka[data-fonem="u"]   { --farba-karticka: var(--farba-u); }
.karticka[data-fonem="š"]   { --farba-karticka: var(--farba-s-hac); }
.karticka[data-fonem="s"]   { --farba-karticka: var(--farba-s); }

/* === Ovládací panel (footer) === */
.ovladaci-panel {
  background: #fff;
  border-top: 1px solid #e0e6ef;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 36px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}

.ovladac-skupina {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* === Toggle prepínač (checkbox ako toggle) === */
.prepinac-zvuku {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

.prepinac-zvuku input[type="checkbox"] {
  display: none;
}

.prepinac-slider {
  width: 44px;
  height: 24px;
  background: #ccc;
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.prepinac-slider::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Stav: zapnutý */
.prepinac-zvuku input:checked + .prepinac-slider {
  background: #3949ab;
}

.prepinac-zvuku input:checked + .prepinac-slider::after {
  transform: translateX(20px);
}

/* Vizuál vypnutého zvuku – kartičky budú šedé */
body.zvuk-vypnuty .karticka {
  filter: grayscale(0.35);
  opacity: 0.85;
}

/* === Select dropdown === */
.oznacenie-select {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.select-vlastnost {
  padding: 7px 32px 7px 12px;
  border: 2px solid #c5cfe8;
  border-radius: 10px;
  font-size: 0.92rem;
  background: #f5f7fb;
  color: #222;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233949ab' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}

.select-vlastnost:focus {
  outline: none;
  border-color: #3949ab;
}

/* === Ripple animácia pri kliknutí === */
@keyframes ripple {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0.4; }
  to   { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

.ripple-efekt {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--farba-karticka, #aaa);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 0.5s ease-out forwards;
}

/* === Responzivita pre malé obrazovky === */
@media (max-width: 360px) {
  .mriezka {
    gap: 10px;
    padding: 14px 10px;
  }
  .karticka {
    padding: 10px 6px 10px;
  }
  .ovladaci-panel {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
}