From 8cbb76d2f32ab20fb089305fee396f5b59b46169 Mon Sep 17 00:00:00 2001
From: Kyllian Auguste <tezcat.auguste@gmail.com>
Date: Wed, 6 May 2026 10:39:07 +0200
Subject: [PATCH] & Content in Quizz Section & Add Layer Credit

---
 SRC/api.php    |    7 +-
 SRC/index.html |   68 +++-
 SRC/main.js    |   90 ++++-
 SRC/style.css  | 1052 ++++++++++++++++++++----------------------------
 4 files changed, 571 insertions(+), 646 deletions(-)

diff --git a/SRC/api.php b/SRC/api.php
index 15b47d1..1766b6f 100755
--- a/SRC/api.php
+++ b/SRC/api.php
@@ -27,7 +27,7 @@ try {
         $queries = [];
         $seed = date('Ymd');
         foreach ($tablesAutorisees as $key => $table) {
-            $queries[] = "(SELECT explanation, planete_nom FROM $table WHERE explanation IS NOT NULL AND explanation != '' ORDER BY RAND($seed) LIMIT 3)";
+            $queries[] = "(SELECT explanation, planete_nom, url FROM $table WHERE explanation IS NOT NULL AND explanation != '' ORDER BY RAND($seed) LIMIT 3)";
         }
         $unionQuery = implode(' UNION ALL ', $queries);
         
@@ -61,9 +61,10 @@ try {
             $text = substr($row['explanation'], 0, 200) . '...';
             
             $questions[] = [
-                'q' => "De quel astre parle cette description ? « " . $text . " »",
+                'q'       => "De quel astre parle cette description ? « " . $text . " »",
                 'options' => $optionsFr,
-                'a' => $correctFr
+                'a'       => $correctFr,
+                'img'     => isset($row['url']) ? $row['url'] : ''
             ];
         }
         
diff --git a/SRC/index.html b/SRC/index.html
index d60d741..be323bf 100755
--- a/SRC/index.html
+++ b/SRC/index.html
@@ -259,7 +259,10 @@
         <section id="layer-soleil" class="layer">
             <div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
             <div class="main-img">
-                <iframe title="Soleil" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/19ebc57385f543ad8856cb04c000bece/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
+                <div class="sketchfab-embed-wrapper">
+                    <iframe title="Photorealistic Sun" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/7556485516804d0db3960b834e4b3f98/embed"> </iframe>
+                    <p> <a href="https://sketchfab.com/3d-models/photorealistic-sun-7556485516804d0db3960b834e4b3f98?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow"> Photorealistic Sun </a> by <a href="https://sketchfab.com/cesar_salcedo?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow"> Cesar Salcedo CG </a> on <a href="https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow">Sketchfab</a></p>
+                </div>
             </div>
             <div class="desc-box">Le Soleil est l'étoile au centre de notre système solaire. Il représente à lui seul environ 99,8 % de la masse du système solaire et fournit l'énergie nécessaire au maintien de la vie sur Terre.</div>
             <div class="ticker-wrap">
@@ -284,7 +287,10 @@
         <section id="layer-lune" class="layer">
             <div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
             <div class="main-img">
-                <iframe title="Lune" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/78da6bf9c10444ce9cc8aa7d969ecfb4/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
+                <div class="sketchfab-embed-wrapper">
+                    <iframe title="Moon" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/870de693475d436c8e925ab0bcda4ca4/embed"> </iframe>
+                    <p> <a href="https://sketchfab.com/3d-models/moon-870de693475d436c8e925ab0bcda4ca4?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow"> Moon </a> by <a href="https://sketchfab.com/miekeroth?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow"> Mieke Roth </a> on <a href="https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow">Sketchfab</a></p>
+                </div>
             </div>
             <div class="desc-box">La Lune est l'unique satellite naturel de la Terre. Elle est le cinquième plus grand satellite du système solaire et le seul astre non terrestre à avoir été visité par des êtres humains.</div>
             <div class="ticker-wrap">
@@ -316,7 +322,11 @@
 
             <div id="quiz-container" class="box">
                 <h2 id="quiz-question">Chargement du Quizz...</h2>
-                <div id="quiz-options">
+                <div id="quiz-options"></div>
+                <div id="quiz-img-preview">
+                    <div class="quiz-img-label">◈ SOURCE — IMAGE DE LA MISSION</div>
+                    <img src="" alt="" />
+                    <div class="quiz-img-caption"></div>
                 </div>
                 <p id="quiz-score"></p>
                 <button id="quiz-restart-btn" onclick="initQuiz()">Recommencer le Quizz</button>
@@ -324,10 +334,58 @@
         </section>
     </main>
 
-    <footer class="site-footer">
-        &copy; 2026 OpenPlanetsMaps. Libre de droits.
+    <footer class="site-footer" onclick="openCredits()" title="Crédits & à propos">
+        &copy; 2026 OpenPlanetsMaps. Libre de droits. <span class="footer-credits-hint">— Crédits ↗</span>
     </footer>
 
+    <!-- Overlay crédits -->
+    <div id="credits-overlay"></div>
+    <div id="credits-panel">
+        <button class="credits-close" onclick="closeCredits()">✕</button>
+        <div class="credits-header">
+            <span class="credits-tag">◈ SYSTÈME / À PROPOS</span>
+            <h2 class="credits-title">OpenPlanetsMaps</h2>
+            <p class="credits-version">v1.0 — 2026</p>
+        </div>
+        <div class="credits-body">
+            <div class="credits-section">
+                <h3>Projet</h3>
+                <p>OpenPlanetsMaps est un outil open source de cartographie interactive du système solaire. Les données topographiques proviennent des principales agences spatiales mondiales.</p>
+            </div>
+            <div class="credits-section">
+                <h3>Données & Sources</h3>
+                <ul>
+                    <li><span>NASA</span> — National Aeronautics and Space Administration</li>
+                    <li><span>ESA</span> — European Space Agency</li>
+                    <li><span>JAXA</span> — Japan Aerospace Exploration Agency</li>
+                    <li><span>USGS</span> — Planetary Science Data</li>
+                </ul>
+            </div>
+            <div class="credits-section">
+                <h3>Modèles 3D</h3>
+                <ul>
+                    <li><span>Sketchfab</span> — Hébergement & rendu des modèles interactifs</li>
+                    <li>Modèles sous licences Creative Commons</li>
+                </ul>
+            </div>
+            <div class="credits-section">
+                <h3>Technologies</h3>
+                <ul>
+                    <li><span>HTML / CSS / JS</span> — Frontend</li>
+                    <li><span>PHP + MySQL</span> — Backend & base de données</li>
+                    <li><span>Orbitron, Space Grotesk, Space Mono</span> — Google Fonts</li>
+                </ul>
+            </div>
+            <div class="credits-section">
+                <h3>Licence</h3>
+                <p>Ce projet est distribué librement. Les données scientifiques restent la propriété de leurs organismes respectifs.</p>
+            </div>
+        </div>
+        <div class="credits-footer">
+            <span>◈ OpenPlanetsMaps — Libre de droits — 2026</span>
+        </div>
+    </div>
+
     <script src="main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/SRC/main.js b/SRC/main.js
index d75e3b9..0452698 100755
--- a/SRC/main.js
+++ b/SRC/main.js
@@ -243,20 +243,23 @@ async function initQuiz() {
 }
 
 function showQuizQuestion() {
+    const preview = document.getElementById('quiz-img-preview');
+
     if (currentQuizIndex >= quizQuestions.length) {
         document.getElementById('quiz-question').textContent = "Quizz du jour terminé !";
         document.getElementById('quiz-options').innerHTML = "";
         document.getElementById('quiz-score').textContent = `Votre score : ${quizScore} / ${quizQuestions.length}`;
         document.getElementById('quiz-restart-btn').style.display = 'inline-block';
+        if (preview) preview.classList.remove('visible');
         return;
     }
 
     const qObj = quizQuestions[currentQuizIndex];
     document.getElementById('quiz-question').innerText = `Question ${currentQuizIndex + 1}/${quizQuestions.length} :\n\n${qObj.q}`;
-    
+
     const optionsContainer = document.getElementById('quiz-options');
     optionsContainer.innerHTML = '';
-    
+
     qObj.options.forEach(opt => {
         const btn = document.createElement('button');
         btn.className = 'quiz-btn';
@@ -264,38 +267,89 @@ function showQuizQuestion() {
         btn.onclick = () => checkAnswer(opt, qObj.a, btn);
         optionsContainer.appendChild(btn);
     });
+
+    if (preview) {
+        preview.classList.remove('visible');
+        const oldImg = preview.querySelector('img');
+        const oldVid = preview.querySelector('video');
+        if (oldImg) { oldImg.src = ''; oldImg.style.display = 'none'; }
+        if (oldVid) { oldVid.pause(); oldVid.src = ''; oldVid.style.display = 'none'; }
+
+        if (qObj.img && qObj.img.trim() !== '') {
+            const url = qObj.img.trim();
+            const isVideo = /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(url);
+            const caption = preview.querySelector('.quiz-img-caption');
+
+            requestAnimationFrame(() => {
+                if (isVideo) {
+                    let vid = preview.querySelector('video');
+                    if (!vid) {
+                        vid = document.createElement('video');
+                        vid.controls = true;
+                        vid.preload = 'metadata';
+                        vid.style.display = 'none';
+                        preview.querySelector('.quiz-img-label').insertAdjacentElement('afterend', vid);
+                    }
+                    vid.src = url;
+                    vid.style.display = 'block';
+                    if (oldImg) oldImg.style.display = 'none';
+                } else {
+                    if (oldImg) {
+                        oldImg.src = url;
+                        oldImg.alt = 'Image associée à la question';
+                        oldImg.style.display = 'block';
+                    }
+                    if (oldVid) oldVid.style.display = 'none';
+                }
+                caption.textContent = url;
+                preview.classList.add('visible');
+            });
+        }
+    }
 }
 
 function checkAnswer(selected, correct, btn) {
     const optionsContainer = document.getElementById('quiz-options');
     const buttons = optionsContainer.querySelectorAll('.quiz-btn');
-    
+
     buttons.forEach(b => {
         b.disabled = true;
         b.style.cursor = 'default';
     });
 
     if (selected === correct) {
-        btn.style.backgroundColor = 'rgba(74, 222, 128, 0.4)';
-        btn.style.borderColor = '#4ade80';
-        btn.style.color = '#fff';
+        btn.classList.add('correct');
         quizScore++;
     } else {
-        btn.style.backgroundColor = 'rgba(248, 113, 113, 0.4)';
-        btn.style.borderColor = '#f87171';
-        btn.style.color = '#fff';
-        
+        btn.classList.add('wrong');
         buttons.forEach(b => {
-            if (b.textContent === correct) {
-                b.style.backgroundColor = 'rgba(74, 222, 128, 0.4)';
-                b.style.borderColor = '#4ade80';
-                b.style.color = '#fff';
-            }
+            if (b.textContent === correct) b.classList.add('correct');
         });
     }
-    
+
     setTimeout(() => {
         currentQuizIndex++;
         showQuizQuestion();
-    }, 1500);
-}
\ No newline at end of file
+    }, 1800);
+}
+
+function openCredits() {
+    document.getElementById('credits-panel').classList.add('open');
+    document.getElementById('credits-overlay').classList.add('open');
+    document.body.style.overflow = 'hidden';
+}
+
+function closeCredits() {
+    document.getElementById('credits-panel').classList.remove('open');
+    document.getElementById('credits-overlay').classList.remove('open');
+    document.body.style.overflow = '';
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const overlay = document.getElementById('credits-overlay');
+    if (overlay) overlay.addEventListener('click', closeCredits);
+
+    document.addEventListener('keydown', e => {
+        if (e.key === 'Escape') closeCredits();
+    });
+});
\ No newline at end of file
diff --git a/SRC/style.css b/SRC/style.css
index 6146d87..679325a 100755
--- a/SRC/style.css
+++ b/SRC/style.css
@@ -1,734 +1,546 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Orbitron:wght@400;600;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Orbitron:wght@400;600;700;900&family=Space+Mono:wght@400;700&display=swap');
 
 :root {
     --theme-color: #4f8eff;
-    --theme-glow: rgba(79, 142, 255, 0.35);
-    --theme-subtle: rgba(79, 142, 255, 0.08);
-    --bg-deep: #020408;
-    --bg-mid: #060d18;
-    --bg-surface: #0a1628;
-    --text-primary: #e8f0ff;
-    --text-secondary: #7a9bc4;
-    --text-muted: #3d5478;
-    --border: rgba(79, 142, 255, 0.15);
-    --star-color: #ffffff;
+    --theme-glow:  rgba(79,142,255,.35);
+    --theme-subtle:rgba(79,142,255,.08);
+    --bg-deep: #020408; --bg-mid: #060d18;
+    --text-primary: #e8f0ff; --text-secondary: #7a9bc4; --text-muted: #3d5478;
+    --border: rgba(79,142,255,.15);
 }
+body.theme-home    { --theme-color:#4f8eff; --theme-glow:rgba(79,142,255,.4);   --bg-deep:#020408; --bg-mid:#060d18; }
+body.theme-mercure { --theme-color:#c0a080; --theme-glow:rgba(192,160,128,.4);  --bg-deep:#0c0906; --bg-mid:#1a1008; }
+body.theme-venus   { --theme-color:#ff9230; --theme-glow:rgba(255,146,48,.4);   --bg-deep:#0d0600; --bg-mid:#1e0e00; }
+body.theme-terre   { --theme-color:#00cfff; --theme-glow:rgba(0,207,255,.4);    --bg-deep:#010b10; --bg-mid:#031520; }
+body.theme-mars    { --theme-color:#ff5040; --theme-glow:rgba(255,80,64,.4);    --bg-deep:#0d0200; --bg-mid:#1e0600; }
+body.theme-jupiter { --theme-color:#ffb347; --theme-glow:rgba(255,179,71,.4);   --bg-deep:#0d0800; --bg-mid:#1e1200; }
+body.theme-saturne { --theme-color:#f5d060; --theme-glow:rgba(245,208,96,.4);   --bg-deep:#0c0900; --bg-mid:#1c1500; }
+body.theme-uranus  { --theme-color:#40e8d0; --theme-glow:rgba(64,232,208,.4);   --bg-deep:#000c0b; --bg-mid:#001a18; }
+body.theme-neptune { --theme-color:#2060ff; --theme-glow:rgba(32,96,255,.4);    --bg-deep:#000208; --bg-mid:#000510; }
+body.theme-soleil  { --theme-color:#ffcc44; --theme-glow:rgba(255,180,40,.55);  --theme-subtle:rgba(255,180,40,.09);  --bg-deep:#0d0500; --bg-mid:#200c00; --border:rgba(255,180,40,.2);  --text-primary:#fff5dc; --text-secondary:#c4923a; --text-muted:#6b4010; }
+body.theme-lune    { --theme-color:#c8cfe8; --theme-glow:rgba(200,207,232,.35); --theme-subtle:rgba(200,207,232,.06); --bg-deep:#060608; --bg-mid:#0e0f14; --border:rgba(200,207,232,.12); --text-primary:#dde2f0; --text-secondary:#7e8ba8; --text-muted:#3c4258; }
+body.theme-Quizz   { --theme-color:#7eb8f7; --theme-glow:rgba(126,184,247,.35); --theme-subtle:rgba(126,184,247,.07); --bg-deep:#020510; --bg-mid:#060e24; --border:rgba(126,184,247,.13); --text-primary:#ddeeff; --text-secondary:#6a90b8; --text-muted:#2e4a6a; }
 
-.daily-challenge-box {
-    margin: 0 auto 20px;
-    max-width: 600px;
-    padding: 15px;
-    background: rgba(156, 39, 176, 0.15);
-    border-left: 4px solid #9c27b0;
-    text-align: left;
-    border-radius: 4px;
-}
-
-.daily-challenge-title {
-    color: #e8c4f2;
-    font-family: 'Orbitron', monospace;
-    font-size: 0.85rem;
-    letter-spacing: 0.1em;
-}
-
-.daily-challenge-desc {
-    margin-top: 8px;
-    font-size: 0.85rem;
-    line-height: 1.5;
-    color: var(--text-secondary);
-}
-
-#quiz-container {
-    margin: 20px auto;
-    max-width: 600px;
-    text-align: center;
-}
-
-#quiz-question {
-    margin-bottom: 20px;
-}
-
-#quiz-options {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-#quiz-score {
-    margin-top: 20px;
-    font-size: 1.2rem;
-    font-weight: bold;
-}
-
-body.theme-home    { --theme-color: #4f8eff; --theme-glow: rgba(79,142,255,0.4);  --bg-deep: #020408; --bg-mid: #060d18; }
-body.theme-mercure { --theme-color: #c0a080; --theme-glow: rgba(192,160,128,0.4); --bg-deep: #0c0906; --bg-mid: #1a1008; }
-body.theme-venus   { --theme-color: #ff9230; --theme-glow: rgba(255,146,48,0.4);  --bg-deep: #0d0600; --bg-mid: #1e0e00; }
-body.theme-terre   { --theme-color: #00cfff; --theme-glow: rgba(0,207,255,0.4);   --bg-deep: #010b10; --bg-mid: #031520; }
-body.theme-mars    { --theme-color: #ff5040; --theme-glow: rgba(255,80,64,0.4);   --bg-deep: #0d0200; --bg-mid: #1e0600; }
-body.theme-jupiter { --theme-color: #ffb347; --theme-glow: rgba(255,179,71,0.4);  --bg-deep: #0d0800; --bg-mid: #1e1200; }
-body.theme-saturne { --theme-color: #f5d060; --theme-glow: rgba(245,208,96,0.4);  --bg-deep: #0c0900; --bg-mid: #1c1500; }
-body.theme-uranus  { --theme-color: #40e8d0; --theme-glow: rgba(64,232,208,0.4);  --bg-deep: #000c0b; --bg-mid: #001a18; }
-body.theme-neptune { --theme-color: #2060ff; --theme-glow: rgba(32,96,255,0.4);   --bg-deep: #000208; --bg-mid: #000510; }
-
-*, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
+*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
 
 body {
-    background-color: var(--bg-deep);
-    color: var(--text-primary);
-    font-family: 'Space Grotesk', sans-serif;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    overflow-x: hidden;
-    transition: background-color 0.8s ease, color 0.3s ease;
+    background:var(--bg-deep); color:var(--text-primary);
+    font-family:'Space Grotesk',sans-serif;
+    display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden;
+    transition:background-color .8s ease, color .3s ease;
 }
 
 .bg-animated {
-    position: fixed;
-    inset: 0;
-    z-index: -2;
-    background: radial-gradient(ellipse at 20% 10%, var(--bg-mid) 0%, var(--bg-deep) 60%);
-    transition: background 1s ease;
+    position:fixed; inset:0; z-index:-2;
+    background:radial-gradient(ellipse at 20% 10%, var(--bg-mid) 0%, var(--bg-deep) 60%);
+    transition:background 1s ease;
+}
+.bg-animated::before, .bg-animated::after {
+    content:''; position:absolute; inset:0;
 }
-
 .bg-animated::before {
-    content: '';
-    position: absolute;
-    inset: 0;
     background-image:
-        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
-        radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
-        radial-gradient(1.5px 1.5px at 40% 8%, rgba(255,255,255,0.9) 0%, transparent 100%),
-        radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
-        radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.7) 0%, transparent 100%),
-        radial-gradient(1.5px 1.5px at 80% 70%, rgba(255,255,255,0.6) 0%, transparent 100%),
-        radial-gradient(1px 1px at 90% 45%, rgba(255,255,255,0.5) 0%, transparent 100%),
-        radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.6) 0%, transparent 100%),
-        radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,0.4) 0%, transparent 100%),
-        radial-gradient(1.5px 1.5px at 60% 85%, rgba(255,255,255,0.7) 0%, transparent 100%),
-        radial-gradient(1px 1px at 45% 50%, rgba(255,255,255,0.3) 0%, transparent 100%),
-        radial-gradient(1px 1px at 82% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
-        radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
-        radial-gradient(1.5px 1.5px at 92% 88%, rgba(255,255,255,0.6) 0%, transparent 100%),
-        radial-gradient(1px 1px at 67% 5%, rgba(255,255,255,0.9) 0%, transparent 100%);
-    animation: starTwinkle 8s ease-in-out infinite alternate;
+        radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.8) 0%,transparent 100%),
+        radial-gradient(1px 1px at 25% 40%,rgba(255,255,255,.5) 0%,transparent 100%),
+        radial-gradient(1.5px 1.5px at 40% 8%,rgba(255,255,255,.9) 0%,transparent 100%),
+        radial-gradient(1px 1px at 55% 60%,rgba(255,255,255,.4) 0%,transparent 100%),
+        radial-gradient(1px 1px at 70% 25%,rgba(255,255,255,.7) 0%,transparent 100%),
+        radial-gradient(1.5px 1.5px at 80% 70%,rgba(255,255,255,.6) 0%,transparent 100%),
+        radial-gradient(1px 1px at 90% 45%,rgba(255,255,255,.5) 0%,transparent 100%),
+        radial-gradient(1px 1px at 15% 80%,rgba(255,255,255,.6) 0%,transparent 100%),
+        radial-gradient(1px 1px at 35% 90%,rgba(255,255,255,.4) 0%,transparent 100%),
+        radial-gradient(1.5px 1.5px at 60% 85%,rgba(255,255,255,.7) 0%,transparent 100%),
+        radial-gradient(1px 1px at 82% 15%,rgba(255,255,255,.8) 0%,transparent 100%),
+        radial-gradient(1px 1px at 5% 55%,rgba(255,255,255,.5) 0%,transparent 100%),
+        radial-gradient(1.5px 1.5px at 92% 88%,rgba(255,255,255,.6) 0%,transparent 100%),
+        radial-gradient(1px 1px at 67% 5%,rgba(255,255,255,.9) 0%,transparent 100%);
+    animation:starTwinkle 8s ease-in-out infinite alternate;
 }
-
 .bg-animated::after {
-    content: '';
-    position: absolute;
-    inset: 0;
     background-image:
-        radial-gradient(1px 1px at 18% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
-        radial-gradient(1px 1px at 33% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
-        radial-gradient(1.5px 1.5px at 48% 22%, rgba(255,255,255,0.7) 0%, transparent 100%),
-        radial-gradient(1px 1px at 63% 75%, rgba(255,255,255,0.5) 0%, transparent 100%),
-        radial-gradient(1px 1px at 75% 48%, rgba(255,255,255,0.8) 0%, transparent 100%),
-        radial-gradient(1px 1px at 88% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
-        radial-gradient(1.5px 1.5px at 12% 68%, rgba(255,255,255,0.6) 0%, transparent 100%),
-        radial-gradient(1px 1px at 96% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
-        radial-gradient(1px 1px at 52% 38%, rgba(255,255,255,0.3) 0%, transparent 100%);
-    animation: starTwinkle 12s ease-in-out infinite alternate-reverse;
+        radial-gradient(1px 1px at 18% 30%,rgba(255,255,255,.6) 0%,transparent 100%),
+        radial-gradient(1px 1px at 33% 65%,rgba(255,255,255,.4) 0%,transparent 100%),
+        radial-gradient(1.5px 1.5px at 48% 22%,rgba(255,255,255,.7) 0%,transparent 100%),
+        radial-gradient(1px 1px at 63% 75%,rgba(255,255,255,.5) 0%,transparent 100%),
+        radial-gradient(1px 1px at 75% 48%,rgba(255,255,255,.8) 0%,transparent 100%),
+        radial-gradient(1px 1px at 88% 30%,rgba(255,255,255,.4) 0%,transparent 100%),
+        radial-gradient(1.5px 1.5px at 12% 68%,rgba(255,255,255,.6) 0%,transparent 100%),
+        radial-gradient(1px 1px at 96% 60%,rgba(255,255,255,.5) 0%,transparent 100%),
+        radial-gradient(1px 1px at 52% 38%,rgba(255,255,255,.3) 0%,transparent 100%);
+    animation:starTwinkle 12s ease-in-out infinite alternate-reverse;
 }
-
 body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    z-index: -1;
+    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
     background:
         radial-gradient(ellipse 40% 30% at 15% 20%, var(--theme-glow), transparent),
-        radial-gradient(ellipse 30% 40% at 85% 75%, rgba(0,0,0,0) 0%, transparent 100%);
-    transition: background 1s ease;
-    pointer-events: none;
+        radial-gradient(ellipse 25% 35% at 85% 75%, var(--theme-glow), transparent);
+    transition:background 1s ease;
+}
+body.theme-soleil::before {
+    background:
+        radial-gradient(ellipse 50% 35% at 80% 15%,rgba(255,150,20,.3),transparent),
+        radial-gradient(ellipse 35% 50% at 10% 80%,rgba(255,100,0,.2),transparent);
+}
+body.theme-lune::before {
+    background:
+        radial-gradient(ellipse 45% 30% at 85% 10%,rgba(200,207,232,.18),transparent),
+        radial-gradient(ellipse 30% 45% at 5% 90%,rgba(150,160,200,.12),transparent);
 }
-
 @keyframes starTwinkle {
-    0%   { opacity: 0.6; }
-    50%  { opacity: 1; }
-    100% { opacity: 0.7; }
+    0%   { opacity:.5; }
+    50%  { opacity:1; }
+    100% { opacity:.65; }
 }
 
 header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 2rem;
-    height: 64px;
-    background: rgba(2, 4, 8, 0.7);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    transition: border-color 0.6s ease;
+    display:flex; justify-content:space-between; align-items:center;
+    padding:0 2rem; height:64px;
+    background:rgba(2,4,8,.75); backdrop-filter:blur(20px);
+    border-bottom:1px solid var(--border);
+    position:sticky; top:0; z-index:100;
+    transition:border-color .6s ease;
 }
-
 header::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
-    opacity: 0.6;
-    transition: background 0.6s ease;
+    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
+    background:linear-gradient(90deg,transparent,var(--theme-color),transparent);
+    opacity:.6; transition:background .6s ease;
 }
-
 header h1 {
-    font-family: 'Orbitron', monospace;
-    font-size: 1.1rem;
-    font-weight: 700;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--theme-color);
-    text-shadow: 0 0 20px var(--theme-glow);
-    transition: color 0.6s ease, text-shadow 0.6s ease;
+    font-family:'Orbitron',monospace; font-size:1.1rem; font-weight:700;
+    letter-spacing:.15em; text-transform:uppercase;
+    color:var(--theme-color); text-shadow:0 0 20px var(--theme-glow);
+    transition:color .6s ease, text-shadow .6s ease;
 }
+header h1:hover { animation:glitch .4s steps(1) forwards; }
 
 .menu-icon, .help-btn {
-    cursor: pointer;
-    background: transparent;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 0.45rem 1rem;
-    color: var(--text-secondary);
-    font-family: 'Space Mono', monospace;
-    font-size: 0.8rem;
-    letter-spacing: 0.08em;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
+    cursor:pointer; background:transparent;
+    border:1px solid var(--border); border-radius:6px; padding:.45rem 1rem;
+    color:var(--text-secondary); font-family:'Space Mono',monospace;
+    font-size:.8rem; letter-spacing:.08em;
+    transition:all .2s ease; position:relative; overflow:hidden;
 }
-
 .menu-icon::before, .help-btn::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--theme-subtle);
-    opacity: 0;
-    transition: opacity 0.2s ease;
+    content:''; position:absolute; inset:0;
+    background:var(--theme-subtle); opacity:0; transition:opacity .2s ease;
 }
-
-.menu-icon:hover::before, .help-btn:hover::before { opacity: 1; }
-
+.menu-icon:hover::before, .help-btn:hover::before { opacity:1; }
 .menu-icon:hover, .help-btn:hover {
-    border-color: var(--theme-color);
-    color: var(--theme-color);
-    box-shadow: 0 0 12px var(--theme-glow);
+    border-color:var(--theme-color); color:var(--theme-color);
+    box-shadow:0 0 12px var(--theme-glow);
 }
 
 .sidebar {
-    position: fixed;
-    top: 0;
-    left: -300px;
-    width: 280px;
-    height: 100vh;
-    background: rgba(2, 6, 14, 0.96);
-    backdrop-filter: blur(24px);
-    border-right: 1px solid var(--border);
-    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s ease;
-    z-index: 1000;
-    padding-top: 5rem;
-    overflow: hidden;
+    position:fixed; top:0; left:-300px; width:280px; height:100vh;
+    background:rgba(2,6,14,.96); backdrop-filter:blur(24px);
+    border-right:1px solid var(--border);
+    transition:left .35s cubic-bezier(.4,0,.2,1), border-color .6s ease;
+    z-index:1000; padding-top:5rem; overflow-y:auto;
 }
-
 .sidebar::before {
-    content: 'NAVIGATION';
-    position: absolute;
-    top: 1.5rem;
-    left: 1.5rem;
-    font-family: 'Space Mono', monospace;
-    font-size: 0.65rem;
-    letter-spacing: 0.25em;
-    color: var(--text-muted);
+    content:'NAVIGATION'; position:absolute; top:1.5rem; left:1.5rem;
+    font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.25em;
+    color:var(--text-muted);
 }
-
-.sidebar.open { left: 0; }
-
-.sidebar ul { list-style: none; }
-
+.sidebar.open { left:0; }
+.sidebar ul { list-style:none; }
 .sidebar li {
-    padding: 0.9rem 1.75rem;
-    cursor: pointer;
-    font-family: 'Orbitron', monospace;
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--text-secondary);
-    transition: all 0.2s ease;
-    border-left: 2px solid transparent;
-    position: relative;
+    padding:.9rem 1.75rem; cursor:pointer;
+    font-family:'Orbitron',monospace; font-size:.7rem; font-weight:600;
+    letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary);
+    transition:all .2s ease; border-left:2px solid transparent; position:relative;
 }
-
 .sidebar li::after {
-    content: '→';
-    position: absolute;
-    right: 1.5rem;
-    top: 50%;
-    transform: translateY(-50%) translateX(-4px);
-    opacity: 0;
-    transition: all 0.2s ease;
-    font-family: monospace;
-    font-size: 0.85rem;
+    content:'→'; position:absolute; right:1.5rem; top:50%;
+    transform:translateY(-50%) translateX(-4px);
+    opacity:0; transition:all .2s ease; font-family:monospace;
 }
-
 .sidebar li:hover {
-    color: var(--theme-color);
-    border-left-color: var(--theme-color);
-    background: var(--theme-subtle);
-    padding-left: 2.25rem;
-    text-shadow: 0 0 10px var(--theme-glow);
+    color:var(--theme-color); border-left-color:var(--theme-color);
+    background:var(--theme-subtle); padding-left:2.25rem;
+    text-shadow:0 0 10px var(--theme-glow);
 }
-
-.sidebar li:hover::after {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-}
-
+.sidebar li:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
 .sidebar li.menu-category {
-    color: gray;
-    font-size: 0.85em;
-    text-transform: uppercase;
-    margin-top: 15px;
-    pointer-events: none;
-    cursor: default;
+    font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.3em;
+    color:var(--text-muted); cursor:default; border-left:none;
+    padding:1.2rem 1.75rem .4rem; pointer-events:none;
 }
+.sidebar li.menu-category::after { display:none; }
+.sidebar li.menu-category:hover { background:none; padding-left:1.75rem; text-shadow:none; color:var(--text-muted); }
 
 #content-area {
-    flex: 1;
-    padding: 2.5rem 2.5rem;
-    display: flex;
-    max-width: 1400px;
-    margin: 0 auto;
-    width: 100%;
+    flex:1; padding:2.5rem; display:flex;
+    max-width:1400px; margin:0 auto; width:100%;
 }
-
 .layer {
-    display: none;
-    width: 100%;
-    flex-direction: column;
-    flex: 1;
-    text-align: center;
-    animation: layerReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
-}
-
-.layer.active { display: flex; }
-
-@keyframes layerReveal {
-    from {
-        opacity: 0;
-        transform: translateY(16px);
-        filter: blur(4px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-        filter: blur(0);
-    }
+    display:none; width:100%; flex-direction:column; flex:1; text-align:center;
+    animation:layerReveal .5s cubic-bezier(.4,0,.2,1) both;
 }
+.layer.active { display:flex; }
 
 .main-img {
-    margin-bottom: 2.5rem;
-    position: relative;
-    border-radius: 12px;
-    overflow: hidden;
-    border: 1px solid var(--border);
-    box-shadow:
-        0 0 0 1px rgba(255,255,255,0.03),
-        0 20px 60px rgba(0,0,0,0.5),
-        0 0 40px var(--theme-glow);
-    transition: box-shadow 0.6s ease, border-color 0.6s ease;
+    margin-bottom:2.5rem; position:relative;
+    border-radius:12px; overflow:hidden; border:1px solid var(--border);
+    box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 60px var(--theme-glow);
+    transition:box-shadow .6s ease, border-color .6s ease, transform .4s ease;
 }
-
+.main-img:hover { transform:perspective(1200px) rotateX(1deg) scale(1.005); }
 .main-img::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: 12px;
-    box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
-    z-index: 1;
-    pointer-events: none;
+    content:''; position:absolute; inset:0; border-radius:12px;
+    box-shadow:inset 0 0 30px rgba(0,0,0,.3); z-index:1; pointer-events:none;
 }
-
-.main-img iframe,
-.main-img img {
-    width: 100%;
-    max-width: 100%;
-    height: 70vh;
-    border: none;
-    display: block;
-}
-
-.main-img img { object-fit: cover; }
+.main-img iframe, .main-img img { width:100%; height:70vh; border:none; display:block; }
+.main-img img { object-fit:cover; }
+.sketchfab-embed-wrapper p { font-family:'Space Mono',monospace; font-size:.65rem; color:var(--text-muted); padding:.4rem .75rem; text-align:right; }
+.sketchfab-embed-wrapper a { color:var(--theme-color); text-decoration:none; }
 
 .flex-row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 1.5rem;
-    margin-bottom: 2.5rem;
-    max-width: 900px;
-    margin-left: auto;
-    margin-right: auto;
+    display:flex; flex-wrap:wrap; justify-content:center;
+    gap:1.5rem; margin:0 auto 2.5rem; max-width:900px;
 }
-
-.flex-row .box { flex: 1; min-width: 280px; margin-bottom: 0; }
-
+.flex-row .box { flex:1; min-width:280px; }
 .box {
-    padding: 1.75rem;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    text-align: left;
-    position: relative;
-    overflow: hidden;
-    transition: border-color 0.3s, box-shadow 0.3s;
+    padding:1.75rem; background:rgba(255,255,255,.02);
+    border:1px solid var(--border); border-radius:10px;
+    text-align:left; position:relative; overflow:hidden;
+    transition:border-color .3s, box-shadow .3s, transform .3s;
 }
-
 .box::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
-    opacity: 0.5;
+    content:''; position:absolute; top:0; left:-100%; right:100%; height:2px;
+    background:linear-gradient(90deg,transparent,var(--theme-color),transparent);
+    transition:left .4s ease, right .4s ease;
 }
-
-.box:hover {
-    border-color: var(--theme-color);
-    box-shadow: 0 8px 30px var(--theme-glow);
-}
-
+.box:hover::before { left:0; right:0; }
+.box:hover { border-color:var(--theme-color); box-shadow:0 8px 30px var(--theme-glow); transform:translateY(-2px); }
 .box h2 {
-    font-family: 'Orbitron', monospace;
-    font-size: 0.75rem;
-    font-weight: 700;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: var(--theme-color);
-    margin-bottom: 0.85rem;
-    text-shadow: 0 0 15px var(--theme-glow);
-}
-
-.box p {
-    line-height: 1.7;
-    color: var(--text-secondary);
-    font-size: 0.9rem;
+    font-family:'Orbitron',monospace; font-size:.75rem; font-weight:700;
+    letter-spacing:.2em; text-transform:uppercase;
+    color:var(--theme-color); margin-bottom:.85rem; text-shadow:0 0 15px var(--theme-glow);
 }
+.box p { line-height:1.7; color:var(--text-secondary); font-size:.9rem; }
 
 .desc-box {
-    max-width: 780px;
-    margin: 0 auto 2.5rem;
-    line-height: 1.75;
-    color: var(--text-secondary);
-    font-size: 0.95rem;
-    padding: 1.25rem 1.75rem;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    border-left: 3px solid var(--theme-color);
-    text-align: left;
-    transition: border-color 0.6s ease;
+    max-width:780px; margin:0 auto 2.5rem; line-height:1.75;
+    color:var(--text-secondary); font-size:.95rem; padding:1.25rem 1.75rem;
+    background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:8px;
+    border-left:3px solid var(--theme-color); text-align:left;
+    transition:border-color .6s ease;
 }
-
 #layer-home .desc-box {
-    font-family: 'Space Mono', monospace;
-    font-size: 0.85rem;
-    color: var(--theme-color);
-    text-align: center;
-    background: var(--theme-subtle);
-    border: 1px solid var(--theme-color);
-    border-left: 1px solid var(--theme-color);
-    letter-spacing: 0.05em;
-    opacity: 0.8;
+    font-family:'Space Mono',monospace; font-size:.85rem;
+    color:var(--theme-color); text-align:center;
+    background:var(--theme-subtle); border:1px solid var(--theme-color);
+    letter-spacing:.05em; opacity:.8;
 }
 
 .ticker-wrap {
-    width: 100%;
-    overflow: hidden;
-    padding: 0.65rem 0;
-    margin-bottom: 2.5rem;
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    position: relative;
-    transition: border-color 0.6s ease;
+    width:100%; overflow:hidden; padding:.65rem 0; margin-bottom:2.5rem;
+    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
+    position:relative; transition:border-color .6s ease;
 }
-
 .ticker-wrap::before {
-    content: '◈ TELEMETRY';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    font-family: 'Space Mono', monospace;
-    font-size: 0.6rem;
-    letter-spacing: 0.2em;
-    color: var(--theme-color);
-    background: var(--bg-deep);
-    padding: 0 0.75rem;
-    z-index: 1;
-    transition: color 0.6s ease;
+    content:'◈ TELEMETRY'; position:absolute; left:0; top:50%; transform:translateY(-50%);
+    font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.2em;
+    color:var(--theme-color); background:var(--bg-deep); padding:0 .75rem; z-index:1;
+    transition:color .6s, background .6s;
+}
+.ticker-wrap::after {
+    content:''; position:absolute; right:0; top:0; bottom:0; width:80px;
+    background:linear-gradient(90deg,transparent,var(--bg-deep)); z-index:1;
+    transition:background .6s;
 }
-
 .ticker {
-    display: inline-block;
-    white-space: nowrap;
-    animation: marquee 18s linear infinite;
-    font-family: 'Space Mono', monospace;
-    font-size: 0.75rem;
-    letter-spacing: 0.08em;
-    color: var(--text-secondary);
-    padding-left: 7rem;
+    display:inline-block; white-space:nowrap;
+    animation:marquee 20s linear infinite;
+    font-family:'Space Mono',monospace; font-size:.75rem;
+    letter-spacing:.08em; color:var(--text-secondary); padding-left:7rem;
 }
+.ticker:hover { animation-play-state:paused; }
 
-@keyframes marquee {
-    from { transform: translateX(100vw); }
-    to   { transform: translateX(-100%); }
+.search-bar { margin-bottom:2rem; position:relative; display:flex; justify-content:center; }
+.search-bar::before {
+    content:'⌕'; position:absolute; left:calc(50% - 210px); top:50%;
+    transform:translateY(-50%); font-size:1.1rem; color:var(--text-muted);
+    pointer-events:none; z-index:1; transition:color .2s;
 }
-
-.search-bar {
-    margin-bottom: 2rem;
-}
-
+.search-bar:focus-within::before { color:var(--theme-color); }
 .search-bar input {
-    width: 100%;
-    max-width: 460px;
-    padding: 0.7rem 1.25rem;
-    background: rgba(255,255,255,0.03);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    color: var(--text-primary);
-    font-family: 'Space Mono', monospace;
-    font-size: 0.8rem;
-    letter-spacing: 0.05em;
-    outline: none;
-    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+    width:100%; max-width:460px; padding:.7rem 1.25rem .7rem 2.5rem;
+    background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:6px;
+    color:var(--text-primary); font-family:'Space Mono',monospace;
+    font-size:.8rem; letter-spacing:.05em; outline:none;
+    transition:border-color .2s, box-shadow .2s, background .2s;
 }
-
-.search-bar input::placeholder { color: var(--text-muted); }
-
+.search-bar input::placeholder { color:var(--text-muted); }
 .search-bar input:focus {
-    border-color: var(--theme-color);
-    background: var(--theme-subtle);
-    box-shadow: 0 0 16px var(--theme-glow);
-}
-
-.table-container {
-    margin-bottom: 3rem;
-}
-
-.data-table {
-    width: 100%;
-    max-width: 1300px;
-    margin: 0 auto;
-    border-collapse: collapse;
-    font-size: 0.88rem;
-}
-
-.data-table thead tr {
-    background: rgba(255,255,255,0.03);
+    border-color:var(--theme-color); background:var(--theme-subtle);
+    box-shadow:0 0 20px var(--theme-glow);
 }
 
+.table-container { margin-bottom:3rem; }
+.data-table { width:100%; max-width:1300px; margin:0 auto; border-collapse:collapse; font-size:.88rem; }
+.data-table thead tr { background:rgba(255,255,255,.03); }
 .data-table th {
-    padding: 0.85rem 1.1rem;
-    text-align: center;
-    font-family: 'Space Mono', monospace;
-    font-size: 0.65rem;
-    font-weight: 700;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: var(--theme-color);
-    border-bottom: 1px solid var(--theme-color);
-    border-right: 1px solid var(--border);
-    transition: color 0.6s ease, border-color 0.6s ease;
+    padding:.85rem 1.1rem; text-align:center;
+    font-family:'Space Mono',monospace; font-size:.65rem; font-weight:700;
+    letter-spacing:.2em; text-transform:uppercase; color:var(--theme-color);
+    border-bottom:1px solid var(--theme-color); border-right:1px solid var(--border);
+    position:relative; transition:color .6s, border-color .6s;
 }
-
-.data-table th:last-child { border-right: none; }
-
+.data-table th::after {
+    content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px;
+    background:var(--theme-color); transform:scaleX(0); transition:transform .3s;
+    box-shadow:0 0 8px var(--theme-glow);
+}
+.data-table th:hover::after { transform:scaleX(1); }
+.data-table th:last-child, .data-table td:last-child { border-right:none; }
 .data-table td {
-    padding: 0.85rem 1.1rem;
-    border-bottom: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-    color: var(--text-secondary);
-    transition: all 0.2s ease;
-    vertical-align: middle;
+    padding:.85rem 1.1rem; border-bottom:1px solid var(--border);
+    border-right:1px solid var(--border); color:var(--text-secondary);
+    transition:all .2s ease; vertical-align:middle;
 }
-
-.data-table td:last-child { border-right: none; }
-
-.data-table tbody tr {
-    transition: background 0.2s ease;
-}
-
-.data-table tbody tr:hover td {
-    background: var(--theme-subtle);
-    color: var(--text-primary);
-}
-
-.col-desc {
-    width: 40%;
-    min-width: 280px;
-    text-align: left !important;
-    font-size: 0.85rem;
-    line-height: 1.55;
-    padding: 0.85rem 1.1rem !important;
-}
-
-.col-url {
-    width: 15%;
-    max-width: 320px;
-    word-wrap: break-word;
-    word-break: break-all;
-    font-family: 'Space Mono', monospace;
-    font-size: 0.72rem;
-    line-height: 1.4;
-}
-
-.col-url a {
-    color: var(--theme-color) !important;
-    text-decoration: none !important;
-    font-weight: 400 !important;
-    opacity: 0.85;
-    transition: opacity 0.2s ease, text-shadow 0.2s ease;
-}
-
-.col-url a:hover {
-    opacity: 1;
-    text-shadow: 0 0 10px var(--theme-glow);
-    text-decoration: underline !important;
-}
-
-.hidden-row { display: none !important; }
+.data-table tbody tr { transition:background .2s; animation:rowFadeIn .4s both; }
+.data-table tbody tr:nth-child(1)  { animation-delay:.05s; }
+.data-table tbody tr:nth-child(2)  { animation-delay:.10s; }
+.data-table tbody tr:nth-child(3)  { animation-delay:.15s; }
+.data-table tbody tr:nth-child(4)  { animation-delay:.20s; }
+.data-table tbody tr:nth-child(5)  { animation-delay:.25s; }
+.data-table tbody tr:nth-child(6)  { animation-delay:.30s; }
+.data-table tbody tr:nth-child(7)  { animation-delay:.35s; }
+.data-table tbody tr:nth-child(8)  { animation-delay:.40s; }
+.data-table tbody tr:nth-child(9)  { animation-delay:.45s; }
+.data-table tbody tr:nth-child(10) { animation-delay:.50s; }
+.data-table tbody tr:hover td { background:var(--theme-subtle); color:var(--text-primary); }
+.data-table tbody tr:hover td:first-child { border-left:2px solid var(--theme-color); padding-left:calc(1.1rem - 2px); }
+.col-desc { width:40%; min-width:280px; text-align:left !important; font-size:.85rem; line-height:1.55; }
+.col-url { width:15%; max-width:320px; word-break:break-all; font-family:'Space Mono',monospace; font-size:.72rem; }
+.col-url a { color:var(--theme-color) !important; text-decoration:none !important; opacity:.85; transition:opacity .2s, text-shadow .2s; }
+.col-url a:hover { opacity:1; text-shadow:0 0 10px var(--theme-glow); text-decoration:underline !important; }
+.hidden-row { display:none !important; }
 
 .show-more-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 1.5rem auto 0;
-    padding: 0.6rem 1.75rem;
-    background: transparent;
-    color: var(--theme-color);
-    border: 1px solid var(--theme-color);
-    border-radius: 4px;
-    cursor: pointer;
-    font-family: 'Space Mono', monospace;
-    font-size: 0.75rem;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    transition: all 0.25s ease;
+    display:inline-flex; align-items:center; gap:.5rem;
+    margin:1.5rem auto 0; padding:.6rem 1.75rem;
+    background:transparent; color:var(--theme-color);
+    border:1px solid var(--theme-color); border-radius:4px; cursor:pointer;
+    font-family:'Space Mono',monospace; font-size:.75rem;
+    letter-spacing:.15em; text-transform:uppercase;
+    position:relative; overflow:hidden; transition:all .25s ease;
 }
-
-.show-more-btn:hover {
-    background: var(--theme-subtle);
-    box-shadow: 0 0 20px var(--theme-glow);
-    transform: translateY(1px);
+.show-more-btn::before {
+    content:''; position:absolute; inset:0;
+    background:var(--theme-subtle); transform:scaleX(0); transform-origin:left; transition:transform .3s;
 }
+.show-more-btn:hover::before { transform:scaleX(1); }
+.show-more-btn:hover { box-shadow:0 0 24px var(--theme-glow); transform:translateY(1px); }
 
 .site-footer {
-    text-align: center;
-    padding: 1.25rem 2rem;
-    background: rgba(2, 4, 8, 0.7);
-    backdrop-filter: blur(10px);
-    color: var(--text-muted);
-    font-family: 'Space Mono', monospace;
-    font-size: 0.7rem;
-    letter-spacing: 0.15em;
-    border-top: 1px solid var(--border);
-    transition: border-color 0.6s ease;
+    text-align:center; padding:1.25rem 2rem;
+    background:rgba(2,4,8,.7); backdrop-filter:blur(10px);
+    color:var(--text-muted); font-family:'Space Mono',monospace;
+    font-size:.7rem; letter-spacing:.15em;
+    border-top:1px solid var(--border);
+    cursor:pointer; user-select:none;
+    transition:border-color .6s, background .2s;
 }
+.site-footer::before { content:'◈ '; color:var(--theme-color); transition:color .6s; }
+.site-footer:hover { background:rgba(255,255,255,.03); }
+.footer-credits-hint { opacity:.5; font-style:italic; transition:opacity .2s; }
+.site-footer:hover .footer-credits-hint { opacity:1; color:var(--theme-color); }
 
-.site-footer::before {
-    content: '◈ ';
-    color: var(--theme-color);
-    transition: color 0.6s ease;
+.daily-challenge-box {
+    margin:0 auto 2rem; max-width:680px; padding:1rem 1.5rem;
+    background:var(--theme-subtle); border:1px solid var(--border);
+    border-left:3px solid var(--theme-color); border-radius:8px; text-align:left;
 }
+.daily-challenge-title {
+    display:block; font-family:'Orbitron',monospace; font-size:.7rem; font-weight:700;
+    letter-spacing:.25em; text-transform:uppercase;
+    color:var(--theme-color); text-shadow:0 0 12px var(--theme-glow); margin-bottom:.5rem;
+}
+.daily-challenge-desc { font-size:.85rem; line-height:1.6; color:var(--text-secondary); }
 
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: var(--bg-deep); }
-::-webkit-scrollbar-thumb {
-    background: var(--theme-color);
-    border-radius: 3px;
-    opacity: 0.5;
+#quiz-container {
+    margin:0 auto 3rem; max-width:680px; padding:2.25rem 2.5rem;
+    background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px;
+    text-align:center; position:relative; overflow:hidden;
+    box-shadow:0 0 40px var(--theme-glow), inset 0 0 60px rgba(0,0,0,.3);
 }
-::-webkit-scrollbar-thumb:hover { opacity: 1; }
-
-::selection {
-    background: var(--theme-glow);
-    color: #ffffff;
+#quiz-container::before {
+    content:''; position:absolute; top:0; left:0; right:0; height:2px;
+    background:linear-gradient(90deg,transparent,var(--theme-color),transparent);
 }
-
-body.theme-soleil {
-    background-color: #2a1100;
-}
-body.theme-soleil .ticker-wrap .ticker {
-    color: #ff9800;
-}
-body.theme-soleil .desc-box {
-    border-color: #ff9800;
-}
-
-body.theme-lune {
-    background-color: #1a1a1d;
-}
-body.theme-lune .ticker-wrap .ticker {
-    color: #e0e0e0;
-}
-body.theme-lune .desc-box {
-    border-color: #aaaaaa;
-}
-
-body.theme-Quizz {
-    background-color: #1e0033;
-}
-body.theme-Quizz .desc-box {
-    border-color: #9c27b0;
-}
-body.theme-Quizz .box {
-    background: rgba(156, 39, 176, 0.1);
-    border: 1px solid #9c27b0;
-    box-shadow: 0 0 15px rgba(156, 39, 176, 0.2);
+#quiz-question {
+    font-size:.95rem; font-weight:500; line-height:1.8;
+    color:var(--text-primary); margin-bottom:2rem;
+    white-space:pre-line; text-align:left;
 }
+#quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1rem; }
 
 .quiz-btn {
-    background-color: rgba(255, 255, 255, 0.05);
-    color: #fff;
-    border: 1px solid #9c27b0;
-    padding: 12px;
-    font-size: 1rem;
-    cursor: pointer;
-    border-radius: 5px;
-    transition: background-color 0.3s, color 0.3s, transform 0.1s;
+    background:rgba(255,255,255,.03); color:var(--text-primary);
+    border:1px solid var(--border); border-radius:8px; padding:.9rem 1.1rem;
+    font-family:'Space Grotesk',sans-serif; font-size:.9rem; font-weight:500;
+    cursor:pointer; text-align:left; position:relative; overflow:hidden;
+    transition:all .2s ease;
 }
-
-.quiz-btn:hover {
-    background-color: #9c27b0;
-    color: #fff;
-    transform: scale(1.02);
+.quiz-btn::before {
+    content:''; position:absolute; inset:0;
+    background:var(--theme-subtle); opacity:0; transition:opacity .2s;
 }
+.quiz-btn:hover:not(:disabled) {
+    border-color:var(--theme-color); box-shadow:0 0 16px var(--theme-glow); transform:translateY(-1px);
+}
+.quiz-btn:hover:not(:disabled)::before { opacity:1; }
+.quiz-btn.correct {
+    background:rgba(74,222,128,.15) !important; border-color:#4ade80 !important;
+    color:#86efac !important; box-shadow:0 0 20px rgba(74,222,128,.3) !important;
+    animation:correctPulse .35s ease forwards;
+}
+.quiz-btn.correct::after { content:'✓'; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:#4ade80; pointer-events:none; }
+.quiz-btn.wrong {
+    background:rgba(248,113,113,.15) !important; border-color:#f87171 !important;
+    color:#fca5a5 !important; box-shadow:0 0 20px rgba(248,113,113,.25) !important;
+    animation:shake .3s ease forwards;
+}
+.quiz-btn.wrong::after { content:'✗'; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:#f87171; pointer-events:none; }
 
+#quiz-score {
+    margin-top:1.5rem; font-family:'Orbitron',monospace; font-size:1.1rem; font-weight:700;
+    letter-spacing:.1em; color:var(--theme-color); text-shadow:0 0 20px var(--theme-glow);
+}
 #quiz-restart-btn {
-    display: none;
-    margin-top: 15px;
-    padding: 10px 20px;
-    cursor: pointer;
-    background-color: #7b1fa2;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    font-size: 1rem;
-    transition: background-color 0.3s, transform 0.1s;
+    display:none; margin-top:1.25rem; padding:.65rem 2rem;
+    background:transparent; color:var(--theme-color);
+    border:1px solid var(--theme-color); border-radius:6px; cursor:pointer;
+    font-family:'Space Mono',monospace; font-size:.75rem;
+    letter-spacing:.15em; text-transform:uppercase; transition:all .25s;
+}
+#quiz-restart-btn:hover { background:var(--theme-subtle); box-shadow:0 0 20px var(--theme-glow); transform:translateY(-1px); }
+
+#quiz-img-preview {
+    max-width:640px; margin:1.5rem auto 0;
+    border:1px solid var(--border); border-radius:10px; overflow:hidden;
+    background:rgba(0,0,0,.3); opacity:0; max-height:0; text-align:left;
+    transition:opacity .5s, max-height .5s, border-color .6s;
+}
+#quiz-img-preview.visible { opacity:1; max-height:480px; }
+.quiz-img-label {
+    padding:.5rem 1rem; font-family:'Space Mono',monospace; font-size:.6rem;
+    letter-spacing:.2em; color:var(--theme-color);
+    border-bottom:1px solid var(--border); background:rgba(255,255,255,.02);
+}
+#quiz-img-preview img, #quiz-img-preview video {
+    display:block; width:100%; max-height:320px; background:#000;
+}
+#quiz-img-preview img { object-fit:contain; }
+#quiz-img-preview video { outline:none; }
+#quiz-img-preview img[src=""], #quiz-img-preview video[src=""] { display:none; }
+.quiz-img-caption {
+    padding:.5rem 1rem; font-family:'Space Mono',monospace; font-size:.65rem;
+    color:var(--text-muted); word-break:break-all; border-top:1px solid var(--border);
+    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 }
 
-#quiz-restart-btn:hover {
-    background-color: #9c27b0;
-    transform: scale(1.05);
+#credits-overlay {
+    position:fixed; inset:0; z-index:2000;
+    background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
+    opacity:0; pointer-events:none; transition:opacity .35s;
+}
+#credits-overlay.open { opacity:1; pointer-events:all; }
+
+#credits-panel {
+    position:fixed; top:0; right:-480px; z-index:2001;
+    width:min(460px,95vw); height:100vh;
+    background:rgba(4,8,18,.97); backdrop-filter:blur(24px);
+    border-left:1px solid var(--border);
+    display:flex; flex-direction:column;
+    transition:right .4s cubic-bezier(.4,0,.2,1), border-color .6s;
+    overflow:hidden;
+}
+#credits-panel::before {
+    content:''; position:absolute; top:0; left:0; bottom:0; width:2px;
+    background:linear-gradient(180deg,transparent,var(--theme-color),transparent);
+    opacity:.6;
+}
+#credits-panel.open { right:0; }
+
+.credits-close {
+    position:absolute; top:1rem; right:1rem;
+    background:transparent; border:1px solid var(--border); border-radius:6px;
+    color:var(--text-muted); width:32px; height:32px; font-size:.8rem; cursor:pointer;
+    display:flex; align-items:center; justify-content:center;
+    transition:all .2s; z-index:1;
+}
+.credits-close:hover { border-color:var(--theme-color); color:var(--theme-color); box-shadow:0 0 10px var(--theme-glow); }
+
+.credits-header { padding:2.5rem 2rem 1.5rem; border-bottom:1px solid var(--border); flex-shrink:0; }
+.credits-tag {
+    display:block; font-family:'Space Mono',monospace; font-size:.6rem;
+    letter-spacing:.25em; color:var(--theme-color); margin-bottom:.75rem;
+    text-shadow:0 0 10px var(--theme-glow);
+}
+.credits-title {
+    font-family:'Orbitron',monospace; font-size:1.4rem; font-weight:900;
+    letter-spacing:.1em; color:var(--text-primary);
+    text-shadow:0 0 30px var(--theme-glow); margin-bottom:.25rem;
+}
+.credits-version { font-family:'Space Mono',monospace; font-size:.7rem; color:var(--text-muted); letter-spacing:.1em; }
+
+.credits-body { flex:1; overflow-y:auto; padding:1.5rem 2rem; scrollbar-width:thin; scrollbar-color:var(--theme-color) transparent; }
+.credits-section { margin-bottom:2rem; }
+.credits-section h3 {
+    font-family:'Space Mono',monospace; font-size:.65rem; font-weight:700;
+    letter-spacing:.2em; text-transform:uppercase; color:var(--theme-color);
+    margin-bottom:.75rem; padding-bottom:.4rem; border-bottom:1px solid var(--border);
+}
+.credits-section p { font-size:.88rem; line-height:1.7; color:var(--text-secondary); }
+.credits-section ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
+.credits-section ul li {
+    font-size:.85rem; color:var(--text-secondary); padding:.35rem .6rem;
+    border-left:1px solid var(--border); transition:border-color .2s, background .2s;
+}
+.credits-section ul li:hover { border-left-color:var(--theme-color); background:var(--theme-subtle); }
+.credits-section ul li span { font-family:'Space Mono',monospace; font-size:.75rem; color:var(--theme-color); margin-right:.5rem; text-shadow:0 0 8px var(--theme-glow); }
+
+.credits-footer { padding:1rem 2rem; border-top:1px solid var(--border); font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.15em; color:var(--text-muted); flex-shrink:0; }
+
+::-webkit-scrollbar { width:6px; }
+::-webkit-scrollbar-track { background:var(--bg-deep); }
+::-webkit-scrollbar-thumb { background:var(--theme-color); border-radius:3px; }
+::selection { background:var(--theme-glow); color:#fff; }
+
+@keyframes layerReveal {
+    from { opacity:0; transform:translateY(16px); filter:blur(4px); }
+    to   { opacity:1; transform:translateY(0);    filter:blur(0); }
+}
+@keyframes rowFadeIn {
+    from { opacity:0; transform:translateX(-8px); }
+    to   { opacity:1; transform:translateX(0); }
+}
+@keyframes marquee {
+    from { transform:translateX(100vw); }
+    to   { transform:translateX(-100%); }
+}
+@keyframes glitch {
+    0%,30%,50%,100% { text-shadow:0 0 20px var(--theme-glow); transform:translate(0); }
+    10%  { text-shadow:-2px 0 var(--theme-color),2px 0 rgba(255,0,100,.6);  transform:translate(-1px,0); }
+    20%  { text-shadow:2px 0 var(--theme-color),-2px 0 rgba(0,200,255,.6);  transform:translate(1px,0); }
+    40%  { text-shadow:-3px 0 rgba(255,0,100,.5),3px 0 var(--theme-color);  transform:translate(2px,-1px); }
+    60%  { text-shadow:2px 0 rgba(0,200,255,.6),-1px 0 var(--theme-color);  transform:translate(-1px,1px); }
+}
+@keyframes correctPulse {
+    0%,100% { transform:scale(1); }
+    40%     { transform:scale(1.025); }
+}
+@keyframes shake {
+    0%,100% { transform:translateX(0); }
+    25%     { transform:translateX(-5px); }
+    50%     { transform:translateX(5px); }
+    75%     { transform:translateX(-3px); }
+}
+@media (max-width:520px) {
+    #quiz-options { grid-template-columns:1fr; }
+    #quiz-container { padding:1.5rem 1.25rem; }
 }
\ No newline at end of file