/* ===================== 🎨 Θέματα (js/themes.js) =====================
   Μεταβλητές από το Theme.apply(): --th-bg (εικόνα img/themes/<id>.webp + ντεγκραντέ-εφεδρεία),
   --th-title (χρώματα τίτλου), --accent, --font. Κινήσεις ΜΟΝΟ με transform/opacity. */
html[data-theme]:not([data-theme="classic"]) body { background: var(--th-bg); }
html[data-theme]:not([data-theme="classic"]) #title { background-image: var(--th-title); background-size: 300% 100%; }
.th-sky { background: var(--th-bg); }
html.th-dark .menu-tip, html.th-dark #foot #version, html.th-dark #stats { color: #eceff1; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
html.th-dark #topbar { background: rgba(255,255,255,.78); }
html[data-theme]:not([data-theme="classic"]) .group-card { border-color: color-mix(in srgb, var(--accent) 35%, #fff); }

/* Κουμπί στο υποσέλιδο + παράθυρο επιλογής */
#theme-btn { font-family: inherit; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), #7c4dff); border: 0; border-radius: 12px; padding: 4px 11px; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.25); transition: transform .1s; }
#theme-btn:hover { transform: scale(1.06); }
#theme-pick { position: fixed; left: 16px; bottom: 34px; z-index: 900; background: rgba(255,255,255,.96); border-radius: 20px; padding: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.3); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow-y: auto; }
.tp-head { font-weight: 900; font-size: 16px; color: #455a64; margin: 0 4px 8px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* Κουμπί = μικρογραφία 16:9 του φόντου (background-image από το js) πάνω στο ντεγκραντέ-εφεδρεία, με το όνομα σε σκούρα λωρίδα κάτω */
.tp-chip { position: relative; aspect-ratio: 16 / 9; font-family: inherit; color: #fff; border: 3px solid #fff; border-radius: 14px; padding: 0; overflow: hidden; cursor: pointer; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .1s; }
.tp-chip b { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 13px; font-weight: 800; line-height: 1.15; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.7); background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.tp-chip:hover { transform: translateY(-3px) scale(1.03); }
.tp-chip.on { border-color: #ffd54f; box-shadow: 0 0 0 3px #ff8f00, 0 4px 12px rgba(0,0,0,.3); }
.tp-chip.on::after { content: '✔'; position: absolute; top: 5px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: #ff8f00; color: #fff; font-size: 14px; font-weight: 900; line-height: 24px; text-align: center; }

/* Με εικόνα θέματος (html.th-img): κρύβονται τα «σκηνικά» emoji και το πλέγμα των 80s — τα δείχνει ήδη η φωτογραφία */
html.th-img .th-scene, html.th-img .th-grid { display: none !important; }

/* Εφέ φόντου */
.th-fx { position: absolute; inset: 0; overflow: hidden; }
.th-star { position: absolute; width: var(--z); height: var(--z); border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }
.th-twinkle { animation: th-twinkle 3s ease-in-out infinite; }
.th-d1 { animation-delay: -.8s; } .th-d2 { animation-delay: -1.6s; } .th-d3 { animation-delay: -2.3s; }
.th-bubble { position: absolute; bottom: -40px; width: var(--z); height: var(--z); border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.12); animation: th-rise linear infinite; }
.th-flake { position: absolute; top: -20px; width: var(--z); height: var(--z); border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.15); animation: th-fall linear infinite; }
.th-code { position: absolute; top: 0; font: 700 18px/1.15 'Cousine', monospace; color: #00e676; text-shadow: 0 0 6px #00c853; font-style: normal; animation: th-rain linear infinite; }
.th-grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 37%; perspective: 300px; overflow: hidden; }
.th-grid-in { position: absolute; inset: -100% 0 0; transform-origin: 50% 100%; transform: rotateX(62deg);
  background: linear-gradient(#ff2e88 2px, transparent 2px) 0 0 / 60px 60px, linear-gradient(90deg, #00e5ff 2px, transparent 2px) 0 0 / 60px 60px; animation: th-grid 2.4s linear infinite; }
.th-bg .mb-sprite { animation-iteration-count: infinite; }
/* Εικονίδια με κίνηση (Theme.move): το <i> γυρίζει προς την κατεύθυνση — ομαλά, πριν ξεκινήσει το σκέλος */
.th-bg [data-mv] { will-change: transform; }
.th-bg [data-mv] i { transition: transform .4s ease-in-out; }

.th-spin-slow { animation: mb-spin 60s linear infinite; }
.th-bob { animation: mb-bob 8s ease-in-out infinite; }
.th-float { animation: th-float 12s ease-in-out infinite; }
.th-glow { animation: th-glow 6s ease-in-out infinite; }
.th-swing { transform-origin: 50% 0; animation: th-swing 4s ease-in-out infinite; }
.th-comet { animation: th-comet 9s ease-in infinite; }

@keyframes th-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes th-rise { from { transform: translateY(0); } to { transform: translateY(-115vh); } }
@keyframes th-fall { from { transform: translate(0, 0); } 50% { transform: translate(30px, 55vh); } to { transform: translate(-10px, 110vh); } }
@keyframes th-rain { from { transform: translateY(-100%); } to { transform: translateY(110vh); } }
@keyframes th-grid { to { transform: rotateX(62deg) translateY(60px); } }
@keyframes th-float { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(40px, -30px) rotate(8deg); } }
@keyframes th-glow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes th-swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes th-comet { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 40%, 100% { transform: translate(-40vw, 40vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .th-fx { display: none; } }
@media (max-width: 900px) { .th-bg .mb-sprite { --s: 70px !important; } }