/* SnoopyWap – „Kucaj kao 2003.“ (prefiks kuc-) */

.kuc-okvir {
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--sans);
  color: var(--tekst);
}
.kuc-okvir [hidden] { display: none !important; }

/* ---- izbor režima ---- */
.kuc-rezimi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 340px;
  margin: 0 auto 10px;
}
.kuc-rezim {
  min-height: 44px;
  padding: 4px 2px;
  border: 1px solid var(--ivica);
  border-radius: 999px;
  background: var(--kartica2);
  color: var(--tekst);
  font: 600 15px/1.15 var(--sans);
  cursor: pointer;
}
.kuc-rezim[aria-pressed="true"] {
  background: var(--akcent);
  border-color: transparent;
  color: var(--na-akcentu);
}

/* ---- svoj tekst ---- */
.kuc-svoj { max-width: 340px; margin: 0 auto 10px; }
.kuc-svoj-natpis { display: block; margin-bottom: 4px; font-size: 15px; color: var(--slabo); }
.kuc-svoj-red { display: flex; gap: 8px; }
.kuc-unos {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--ivica);
  border-radius: 12px;
  background: var(--polje);
  color: var(--tekst);
  font: 16px var(--mono);
  box-sizing: border-box;
}
.kuc-kreni { flex: 0 0 auto; }
.kuc-svoj-napomena { margin: 6px 0 0; font-size: 15px; line-height: 1.35; color: var(--slabo); }

/* ---- telefon: predmet, isti u obe teme (zato svoje boje) ---- */
.kuc-telefon {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 10px 14px 16px;
  border-radius: 34px 34px 46px 46px;
  background: linear-gradient(160deg, #46557f 0%, #2b3557 55%, #1f2743 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -6px 12px rgba(0, 0, 0, .35), 0 12px 26px rgba(15, 18, 38, .35);
  -webkit-user-select: none;
  user-select: none;
}
.kuc-telefon.kuc-zavrsen { border-radius: 34px; padding-bottom: 14px; }

.kuc-zvucnik { display: flex; justify-content: center; gap: 5px; height: 6px; margin: 2px 0 8px; }
.kuc-zvucnik i { width: 14px; height: 5px; border-radius: 3px; background: #131a30; box-shadow: 0 1px 0 rgba(255, 255, 255, .15); }

.kuc-ekran-okvir {
  padding: 8px;
  border-radius: 14px 14px 22px 22px;
  background: #151b2e;
  box-shadow: inset 0 0 0 2px #0c101d;
}
.kuc-ekran {
  padding: 6px 8px 8px;
  border-radius: 6px;
  background: #a9bf8f;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
  color: #1b2715;
  font: 700 15px/21px var(--mono);
}
.kuc-traka { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.kuc-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.kuc-signal i { width: 4px; background: #1b2715; }
.kuc-signal i:nth-child(1) { height: 4px; }
.kuc-signal i:nth-child(2) { height: 7px; }
.kuc-signal i:nth-child(3) { height: 10px; }
.kuc-signal i:nth-child(4) { height: 13px; }

.kuc-zadato, .kuc-kucano {
  min-height: 42px;               /* dva reda */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kuc-zadato { margin-top: 2px; }
.kuc-gotovo { opacity: .55; }
.kuc-crta { height: 0; margin: 4px 0; border-top: 2px dashed rgba(27, 39, 21, .5); }
.kuc-uputstvo { font: 600 15px/21px var(--sans); white-space: normal; }
.kuc-tacno { color: #1b2715; }
.kuc-lose { color: #8a1010; background: rgba(150, 20, 20, .22); text-decoration: line-through; }
.kuc-cek { background: #1b2715; color: #a9bf8f; text-decoration: underline; }
.kuc-cek-lose { background: #8a1010; color: #e6efd9; }
.kuc-kursor { display: inline-block; width: 9px; background: #1b2715; animation: kuc-trep 1s steps(1) infinite; }
.kuc-poslato { display: inline-block; font-family: var(--sans); white-space: nowrap; }
@keyframes kuc-trep { 50% { opacity: 0; } }

/* ---- tastatura 3×4 ---- */
.kuc-tastatura {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.kuc-taster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 14px / 18px;
  background: linear-gradient(#f4f5f9, #cfd3df);
  box-shadow: 0 3px 0 #8a90a6, 0 5px 6px rgba(0, 0, 0, .35);
  color: #1a1f38;
  font-family: var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kuc-cifra { font-size: 19px; font-weight: 800; line-height: 1; }
.kuc-slova { font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .5px; color: #3a4162; }
.kuc-taster:active, .kuc-taster.kuc-dole {
  transform: translateY(3px);
  background: linear-gradient(#dfe2ea, #bfc4d2);
  box-shadow: 0 0 0 #8a90a6, 0 1px 2px rgba(0, 0, 0, .4);
}
.kuc-taster:focus-visible, .kuc-rezim:focus-visible, .kuc-zvuk:focus-visible, .kuc-unos:focus-visible {
  outline: 3px solid var(--akcent3);
  outline-offset: 2px;
}

/* ---- rezultat ---- */
.kuc-kraj { max-width: 340px; margin: 12px auto 0; text-align: center; }
.kuc-ocena { margin: 0 0 8px; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--tekst); }
.kuc-brojke { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kuc-stat { padding: 7px 6px; border-radius: 12px; background: var(--kartica2); }
.kuc-stat b { display: block; font-size: 18px; line-height: 1.25; color: var(--tekst); }
.kuc-stat span { display: block; font-size: 15px; line-height: 1.25; color: var(--slabo); }
.kuc-kraj-rekord { margin: 8px 0 0; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--akcent-t); }
.kuc-kraj-dugmad { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.kuc-kraj-dugmad .dugme { flex: 1 1 140px; cursor: pointer; }
.kuc-obavestenje { min-height: 20px; margin: 8px 0 0; font-size: 15px; line-height: 1.35; color: var(--slabo); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- ispod telefona ---- */
.kuc-pomoc { max-width: 340px; margin: 12px auto 0; font-size: 15px; line-height: 1.4; color: var(--slabo); text-align: center; }
.kuc-dno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 340px;
  margin: 10px auto 0;
}
.kuc-rekord { font-size: 15px; line-height: 1.3; color: var(--slabo); }
.kuc-zvuk {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ivica);
  border-radius: 999px;
  background: var(--kartica2);
  color: var(--tekst);
  font: 600 15px var(--sans);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .kuc-kursor { animation: none; }
  .kuc-taster:active, .kuc-taster.kuc-dole { transform: none; }
}