/* ============================================================
   Reši rožico — game specific styles.
   Shared panels / chips / game bar live in assets/kids.css
   ============================================================ */

/* ---------- setup accents ---------- */
#lengths .chip.on { background: var(--pink); color: #fff; box-shadow: 0 5px 0 #E2559F; }
/* sedem čipov naj se lomi v enakomerne vrstice, ne 6 + 1 raztegnjen */
.panels #lengths .chip { flex: 1 1 20%; min-width: 52px; }
#cases .chip { letter-spacing: .5px; }
#cases .chip.on { background: var(--grape); box-shadow: 0 5px 0 var(--grape-d); }
.case-low { text-transform: lowercase; }

/* ---------- game layout ---------- */
.score-chip.current .val { color: #E2559F; }
.score-chip.best .val { color: var(--sun-d); }

.play {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr;
  gap: clamp(10px, 2.5vw, 28px);
  align-items: center;
  min-height: 0;
}

.flower-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.flower {
  /* box fills the cell, the artwork letterboxes inside it (object-fit: contain),
     so it can never spill over the keyboard */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.flower img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
  filter: drop-shadow(0 6px 7px rgba(35,48,74,.13));
  pointer-events: none;          /* dekoracija ne sme prestrezati klikov na tipke */
  transform-origin: 50% 90%;
  transition: opacity .45s ease, transform .35s ease, filter .35s ease;
}
.flower img.on { opacity: 1; }
.flower.wilt { animation: wilt .5s ease; }
@keyframes wilt {
  0%, 100% { transform: none; }
  30% { transform: rotate(-3deg) translateY(4px); }
  65% { transform: rotate(3deg) translateY(2px); }
}
.flower.saved { animation: cheer .6s cubic-bezier(.2,.9,.3,1.5); }
@keyframes cheer {
  0% { transform: scale(1); }
  40% { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1); }
}

.lives { display: flex; gap: 6px; }
.lives span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 2px 0 rgba(35,48,74,.15);
  transition: background .3s ease, transform .3s ease;
}
.lives span.gone { background: #D8DEE9; transform: scale(.75); }

/* ---------- word ---------- */
.word-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 3vh, 26px);
  min-width: 0;
}

.word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(4px, 1vw, 10px);
  font-weight: 700;
  line-height: .92;
}
.word .ltr {
  min-width: .86em;
  text-align: center;
  font-size: clamp(1.7rem, min(6.4vw, 9vh), 3.6rem);
  border-bottom: .11em solid rgba(35,48,74,.3);
  padding-bottom: .02em;
  color: var(--ink);
}
.word .ltr.blank { color: transparent; }
.word .ltr.just-found { animation: dropIn .4s cubic-bezier(.2,.9,.3,1.5); }
.word .ltr.missed { color: var(--coral-d); border-bottom-color: var(--coral); }
@keyframes dropIn {
  from { transform: translateY(-22px) scale(.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

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

/* ---------- keyboard ---------- */
.keyboard {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: clamp(4px, .9vh, 9px);
}
@media (orientation: portrait) {
  .keyboard { grid-template-columns: repeat(7, 1fr); }
}

.key {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(.9rem, min(3.4vw, 3.2vh), 1.5rem);
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: clamp(6px, 1.5vh, 14px) 0;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(35,48,74,.16);
  transition: transform .08s ease, box-shadow .08s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(35,48,74,.16); }
.key.hit {
  background: var(--mint);
  color: #fff;
  box-shadow: 0 4px 0 var(--mint-d);
}
.key.miss {
  background: #E4E9F1;
  color: #93A0B4;
  box-shadow: 0 4px 0 #CDD5E1;
}
.key.hit, .key.miss { pointer-events: none; }
.keyboard.locked .key { pointer-events: none; }

/* ---------- portrait: flower on top ---------- */
@media (orientation: portrait) {
  .play {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
  }
  .flower { height: 100%; width: 100%; }
}

/* ---------- overlay ---------- */

.overlay-card .the-word { font-weight: 700; color: var(--ink); letter-spacing: 1px; }

/* ---------- phones sideways ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .lives span { width: 10px; height: 10px; }
  .lives { gap: 4px; }
  .play { gap: 10px; }
}

@media (orientation: landscape) and (max-height: 380px) {
  .board, .key { border-radius: 10px; }
  .key { font-size: .8rem; padding: 3px 0; }
  .word .ltr { font-size: clamp(1.1rem, 7vh, 1.6rem); }
  .word-side { gap: 6px; }
  .lives span { width: 8px; height: 8px; }
}