/* ============================================================
   Kaj pride naprej? — game specific styles
   ============================================================ */

#kinds .chip.on  { background: var(--mint);  box-shadow: 0 5px 0 var(--mint-d); }

#game .seq-card { margin-top: auto; }
#game .feedback { margin-bottom: auto; }

.seq-card {
  background: var(--card);
  border-radius: 34px;
  box-shadow: var(--shadow);
  padding: clamp(16px, 4vh, 34px) clamp(12px, 3vw, 26px);
  margin: 10px 0 22px;
  border: 5px solid rgba(35,48,74,.06);
}
.seq-card.shake { animation: shake .45s ease; }

.seq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 14px);
}

.tok {
  width: clamp(34px, min(8.5vw, 9vh), 74px);
  height: clamp(34px, min(8.5vw, 9vh), 74px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, min(6.4vw, 6.6vh), 54px);
  line-height: 1;
}
.tok svg { width: 100%; height: 100%; }

.tok.blank {
  border-radius: 22%;
  border: 4px dashed var(--sky);
  background: rgba(77,150,255,.09);
  color: var(--sky);
  font-weight: 700;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.tok.blank.filled {
  animation: dropIn .4s cubic-bezier(.2,.9,.3,1.5);
  border-style: solid;
  border-color: var(--mint-d);
  background: rgba(33,199,168,.16);
}
.tok.blank.filled.bad { border-color: var(--coral-d); background: rgba(255,107,107,.16); }
@keyframes dropIn { from { transform: translateY(-24px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- answers ---------- */

.answer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, min(7vw, 7vh), 54px);
  background: #fff;
  border: 5px solid rgba(35,48,74,.08);
  border-radius: 26px;
  padding: clamp(10px, 2.4vh, 20px) 6px;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(35,48,74,.12);
  transition: transform .1s ease, box-shadow .1s ease, border-color .2s ease, background .2s ease;
}
.answer svg { width: clamp(32px, min(7vw, 7.5vh), 60px); height: clamp(32px, min(7vw, 7.5vh), 60px); }
.answer:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(35,48,74,.12); }
.answer.correct { border-color: var(--mint); background: #EAFBF5; box-shadow: 0 8px 0 var(--mint-d); animation: pop .45s ease; }
.answer.wrong   { border-color: #C6CEDD; background: #EEF1F6; opacity: .6; }

.feedback {
  text-align: center;
  margin-top: 16px;
  min-height: 2.2em;
  font-size: clamp(1.1rem, 3.2vh, 1.6rem);
  font-weight: 600;
  color: var(--ink-soft);
}

@media (orientation: landscape) and (max-height: 560px) {
  .seq-card { margin: 6px 0 12px; border-radius: 24px; }
  .feedback { margin-top: 8px; min-height: 1.8em; }
}