/* ===================== 🐢 Χελώνα Logo (js/logo.js) ===================== */
/* Χρησιμοποιεί το πλαίσιο των παιχνιδιών προγραμματισμού (.code-wrap, .code-board, .code-helpbar… από το code.css) */
.theme-logo .code-board { background: linear-gradient(#b3e5fc, #dcedc8 65%, #c5e1a5); }
.lg-board { padding: 10px; }
.lg-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
/* Η χελώνα: θέση/στροφή με CSS transform (μονάδες του viewBox), με ομαλή κίνηση */
.lg-turtle { transition: transform .3s ease-in-out; }
.lg-tshape { transform-box: fill-box; transform-origin: center; }
.lg-turtle.happy .lg-tshape { animation: lg-happy .5s ease-in-out 3; }
.lg-turtle.oops .lg-tshape { animation: lg-oops .6s ease-in-out; }
@keyframes lg-happy { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.35) rotate(-15deg); } }
@keyframes lg-oops { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-.15px); } 40%, 80% { transform: translateX(.15px); } }

/* Κουμπιά εναλλαγής επίπεδα ⇄ ελεύθερη */
.code-controls .big-btn.lg-mode { font-size: 16px; padding: 9px 12px; }
.lg-tools button.lg-mode { background: linear-gradient(#ffe082, #ffca28); border-color: #ffb300; color: #5d4037; box-shadow: 0 3px 0 #e0a000; }

/* Εργαλεία της ελεύθερης σχεδίασης */
.lg-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-tools button {
  font-family: inherit; font-size: 15px; font-weight: 700; padding: 8px 12px; border-radius: 14px; border: 3px solid #e3e8f0; background: #fff; color: #546e7a;
  cursor: pointer; box-shadow: 0 3px 0 #e3e8f0; transition: transform .1s;
}
.lg-tools button:hover { filter: brightness(1.04); border-color: #b0bec5; }
.lg-tools button:active { transform: translateY(2px); box-shadow: 0 1px 0 #e3e8f0; }
.lg-tools button.on { background: #e8f5e9; border-color: #43a047; color: #1b5e20; box-shadow: 0 3px 0 #a5d6a7; }

/* Παράθυρο παραδειγμάτων */
.lg-ex-help { color: #607d8b; font-weight: 600; font-size: 15px; margin: 0 0 8px; }
.lg-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: 52vh; overflow-y: auto; margin: 4px 0 14px; padding: 4px; }
.lg-ex { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 16px; border: 3px solid #e3e8f0; background: #fffdf7; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15px; color: #37474f; transition: transform .12s, border-color .12s; }
.lg-ex:hover { transform: scale(1.05); border-color: #43a047; }
.lg-ex svg { width: 100%; height: 100px; background: #fff; border-radius: 10px; border: 1px solid #eceff1; }

@media (max-width: 900px) {
  .lg-tools button { font-size: 13px; padding: 6px 9px; }
}