/* ============================================================
   Denar — game specific styles
   ============================================================ */
#maxes .chip.on  { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-d); }
#counts .chip.on { background: var(--sky); box-shadow: 0 5px 0 var(--sky-d); }

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

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

.ask {
  margin: 0 0 clamp(10px, 2vh, 18px);
  font-size: clamp(1.05rem, 2.8vh, 1.4rem);
  font-weight: 600;
  color: var(--ink-soft);
}

.purse {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 16px);
}

/* velikosti so v pravem razmerju: premer kovanca v mm × --u */
.purse {
  --u: clamp(1.9px, min(.7vw, .68vh), 4.5px);
}

.coin {
  flex: none;                    /* nikoli stisnjen — velikost mora ostati točna */
  width: calc(var(--mm) * var(--u));
  height: calc(var(--mm) * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(35,48,74,.28));
  animation: coinIn .35s cubic-bezier(.2,.9,.3,1.4) backwards;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes coinIn { from { transform: scale(.5) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

.coin.c1  { --mm: 16.25; }
.coin.c2  { --mm: 18.75; }
.coin.c5  { --mm: 21.25; }
.coin.c10 { --mm: 19.75; }   /* res je manjši od 5 centov */
.coin.c20 { --mm: 22.25; }
.coin.c50 { --mm: 24.25; }
.coin.e1  { --mm: 23.25; }   /* in 1 € je manjši od 50 centov */
.coin.e2  { --mm: 25.75; }

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

.answer {
  font-family: var(--font);
  font-size: clamp(1.3rem, min(5vw, 6vh), 2.2rem);
  font-weight: 700;
  color: #fff;
  background: var(--sky);
  border: none;
  border-radius: 26px;
  padding: clamp(12px, 3vh, 24px) 6px;
  cursor: pointer;
  box-shadow: 0 8px 0 var(--sky-d);
  transition: transform .1s ease, box-shadow .1s ease, background .2s ease;
  white-space: nowrap;
}
.answer:nth-child(2) { background: var(--grape); box-shadow: 0 8px 0 var(--grape-d); }
.answer:nth-child(3) { background: var(--coral); box-shadow: 0 8px 0 var(--coral-d); }
.answer:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.answer.correct { background: var(--mint) !important; box-shadow: 0 8px 0 var(--mint-d) !important; animation: pop .45s ease; }
.answer.wrong   { background: #C6CEDD !important; box-shadow: 0 8px 0 #A6B0C2 !important; }

.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 (max-height: 700px) {
  .purse { gap: clamp(5px, 1.2vw, 12px); }
  .purse-card { margin: 8px 0 16px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .purse-card { margin: 6px 0 12px; border-radius: 24px; }
  .ask { margin-bottom: 8px; }
  .feedback { margin-top: 8px; min-height: 1.8em; }
}