/* SnoopyWap – Asocijacije */
.aso-okvir { max-width: 640px; margin: 0 auto; padding: 12px; box-sizing: border-box; background: var(--kartica); color: var(--tekst); border: 1px solid var(--ivica); border-radius: var(--radius); box-shadow: var(--senka); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
.aso-okvir * { box-sizing: border-box; }
.aso-okvir [hidden] { display: none !important; }
.aso-okvir button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.aso-okvir button:focus-visible, .aso-ulaz:focus-visible { outline: 3px solid var(--akcent3-t); outline-offset: 2px; }

.aso-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; }
.aso-naslov { margin: 0; font-size: 22px; line-height: 1.2; }
.aso-broj { background: var(--akcent3); color: var(--na-akcentu); border-radius: 999px; padding: 2px 10px; font-size: 15px; font-weight: 700; }
.aso-opis { margin: 0 0 10px; color: var(--slabo); font-size: 15px; }
.aso-ucitavanje, .aso-greska { margin: 10px 0 14px; font-size: 16px; }
.aso-ucitavanje { color: var(--slabo); }

/* tekući poeni i greške */
.aso-stanje { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.aso-cip { background: var(--kartica2); border-radius: 999px; padding: 3px 12px; font-size: 15px; }
.aso-cip strong { font-size: 16px; }

/* tabla: A i B gore, konačno rešenje u sredini, C i D dole */
.aso-tabla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.aso-kol { display: grid; gap: 5px; align-content: start; padding: 6px; border: 2px solid var(--ivica); border-radius: 14px; }
.aso-kol.aso-resena { border-color: var(--akcent-t); }
.aso-kol.aso-otkrivena { border-color: var(--zuta-t); }

.aso-polje, .aso-res, .aso-kon { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 4px 6px; border-radius: 10px; font-size: 15px; line-height: 1.2; font-weight: 600; text-align: center; color: var(--tekst); cursor: pointer; overflow-wrap: anywhere; word-break: break-word; -webkit-appearance: none; appearance: none; }
.aso-polje[aria-disabled="true"], .aso-res[aria-disabled="true"], .aso-kon[aria-disabled="true"] { cursor: default; }

/* zatvoreno polje nosi oznaku (A1), otvoreno prikazuje pojam */
.aso-polje { background: var(--kartica2); border: 2px solid var(--ivica); color: var(--slabo); font-weight: 700; }
.aso-polje:not(.aso-otv):active { transform: scale(.96); }
.aso-polje.aso-otv { background: var(--kartica); border-color: var(--akcent3-t); color: var(--tekst); font-weight: 600; animation: aso-otvori .25s ease-out; }
.aso-kol.aso-resena .aso-polje.aso-otv, .aso-kol.aso-otkrivena .aso-polje.aso-otv { border-color: var(--ivica); }

/* rešenje kolone */
.aso-res { background: transparent; border: 2px dashed var(--akcent3-t); color: var(--akcent3-t); font-weight: 700; }
.aso-res.aso-zakljucano { border-color: var(--ivica); color: var(--slabo); }
.aso-res.aso-aktivno, .aso-kon.aso-aktivno { box-shadow: 0 0 0 3px var(--akcent2-t); }
.aso-res.aso-tacno, .aso-kon.aso-tacno { background: var(--akcent); border: 2px solid var(--akcent); color: var(--na-akcentu); }
.aso-res.aso-otkriveno, .aso-kon.aso-otkriveno { background: var(--zuta); border: 2px solid var(--zuta); color: var(--na-akcentu); }

/* konačno rešenje – preko cele širine */
.aso-kon { grid-column: 1 / -1; min-height: 52px; background: var(--akcent3); border: 2px solid var(--akcent3); color: var(--na-akcentu); font-size: 17px; font-weight: 700; }
.aso-kon.aso-zakljucano { background: var(--kartica2); border-color: var(--ivica); color: var(--slabo); }

/* zajedničko polje za unos */
.aso-unos { margin: 10px 0 0; padding: 4px 10px 10px; border: 2px solid var(--akcent3-t); border-radius: 14px; background: var(--kartica2); }
.aso-unos-glava { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aso-natpis { font-weight: 700; font-size: 16px; }
.aso-zatvori { flex: none; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tekst); font-size: 20px; line-height: 1; cursor: pointer; }
.aso-nagovestaj { margin: 0 0 8px; font-size: 15px; color: var(--slabo); overflow-wrap: anywhere; }
.aso-unos-red { display: flex; gap: 8px; }
.aso-ulaz { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 12px; border: 2px solid var(--ivica); border-radius: 12px; background: var(--polje); color: var(--tekst); font: 16px var(--sans); }
.aso-ulaz::placeholder { color: var(--slabo); opacity: 1; }
.aso-okvir .dugme.aso-proveri { flex: none; min-height: 48px; padding-left: 16px; padding-right: 16px; }
.aso-unos.aso-tresi { animation: aso-tresi .4s; }

.aso-savet { margin: 10px 0 0; font-size: 15px; color: var(--slabo); text-align: center; }
.aso-poruka { margin: 8px 0 0; min-height: 24px; text-align: center; font-size: 16px; color: var(--slabo); overflow-wrap: anywhere; white-space: pre-line; }
.aso-poruka.aso-dobro { color: var(--akcent-t); font-weight: 700; }
.aso-poruka.aso-lose { color: var(--akcent2-t); font-weight: 700; }
.aso-skriveno { position: absolute; left: -9999px; top: 0; opacity: 0; }

.aso-okvir .dugme.aso-predaja { display: flex; width: 100%; max-width: 320px; margin: 8px auto 0; min-height: 48px; }
.aso-okvir .dugme.aso-predaja.aso-potvrda { border-color: var(--akcent2-t); color: var(--akcent2-t); }
.aso-okvir .dugme[disabled] { opacity: .45; cursor: not-allowed; }

/* kraj partije */
.aso-kraj { margin-top: 4px; }
.aso-ishod { margin: 0 0 6px; text-align: center; font-size: 18px; font-weight: 700; }
.aso-ishod.aso-dobro { color: var(--akcent-t); }
.aso-sitno { margin: 0 0 10px; text-align: center; font-size: 15px; color: var(--slabo); }
.aso-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 12px; }
.aso-stavka { background: var(--kartica2); border-radius: 12px; padding: 8px 4px; text-align: center; }
.aso-stavka strong { display: block; font-size: 22px; line-height: 1.2; }
.aso-stavka span { display: block; font-size: 15px; color: var(--slabo); }
.aso-dugmad { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 10px; }
.aso-okvir .aso-dugmad .dugme, .aso-okvir .dugme.aso-ponovo { width: 100%; min-height: 48px; padding-left: 10px; padding-right: 10px; }
.aso-okvir .dugme.aso-ponovo { max-width: 320px; }

@keyframes aso-otvori { from { transform: scale(.9); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes aso-tresi { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .aso-polje.aso-otv, .aso-unos.aso-tresi { animation: none; }
}

@media (min-width: 480px) {
  .aso-okvir { padding: 20px; }
  .aso-tabla { gap: 10px; }
  .aso-kol { padding: 8px; gap: 6px; }
  .aso-polje, .aso-res { font-size: 16px; }
  .aso-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aso-dugmad { grid-template-columns: 1fr 1fr; }
  .aso-dugmad .aso-nazad { grid-column: 1 / -1; }
}