/* ===================== 🧩 Παζλ με πλακίδια (js/blockpic.js) ===================== */
.bp-wrap { position: absolute; inset: 0; display: flex; gap: 16px; padding: 16px; }
.bp-model { position: relative; z-index: 1; flex: none; width: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px;
  background: rgba(255, 255, 255, .9); border-radius: 26px; box-shadow: 0 8px 24px rgba(40, 60, 100, .15), inset 0 0 0 3px #fff; }
.bp-label { font-size: 18px; font-weight: 700; color: #546e7a; }
.bp-model img { max-width: 200px; max-height: 42%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.bp-name { font-size: 26px; font-weight: 800; color: #00796b; }
.bp-parts { display: flex; gap: 6px; }
.bp-parts i { width: 22px; height: 22px; border-radius: 50%; background: #e0e0e0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); transition: background .3s, transform .3s; }
.bp-parts i.on { background: #66bb6a; transform: scale(1.15); }
.bp-hint { font-size: 16px; font-weight: 700; color: #8d6e63; }
.bp-board { position: relative; z-index: 1; flex: 1; min-width: 0; border-radius: 26px; overflow: hidden; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 3px #fff, 0 8px 24px rgba(40, 60, 100, .15); }
.bp-host { position: absolute; inset: 0; }
.bp-board .blocklySvg { background: transparent; }
.bp-board .blocklyMainBackground { fill: transparent !important; stroke: none !important; }
.bp-board.pop { animation: bp-pop .35s ease-out; }
@keyframes bp-pop { 50% { box-shadow: inset 0 0 0 6px #81c784, 0 8px 24px rgba(40, 60, 100, .15); } }
.bp-wrap.won .bp-board { box-shadow: inset 0 0 0 6px #66bb6a, 0 0 30px rgba(102, 187, 106, .6); }
.bp-wrap.won .bp-model img { animation: bob 1.2s ease-in-out infinite; }
/* Μικρές οθόνες: το δείγμα πάνω, ο πίνακας κάτω */
@media (max-width: 760px) {
  .bp-wrap { flex-direction: column; padding: 10px; gap: 10px; }
  .bp-model { width: auto; flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .bp-model img { max-height: 70px; }
  .bp-label, .bp-hint { display: none; }
}
/* Στη νίκη: χωρίς περιγράμματα ανάμεσα στα κομμάτια — μία καθαρή εικόνα */
.bp-wrap.won .bp-host .blocklyPath { stroke: transparent !important; }
.bp-cover { pointer-events: none; }   /* το «πιάσιμο» το παίρνει το ίδιο το μπλοκ (path) από κάτω */

/* Επίπεδα-προγράμματα (16–20): το πρόβλημα αριστερά, η σειρά ▶ 1 2 3 */
.bp-prob { font-size: 92px; line-height: 1.1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.bp-wrap.won .bp-prob { animation: bob 1.2s ease-in-out infinite; }
.bp-flow { font-size: 22px; font-weight: 800; color: #43a047; display: flex; align-items: center; gap: 6px; }
.bp-flow b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid #26a69a; color: #37474f; font-size: 18px; }