Add files via upload

Author: CapitaineCookie

index.html

@@ -192,7 +192,7 @@
     }
     .overlay-card h2 { font-size: 1.8rem; color: #e94560; margin-bottom: 4px; }
     .overlay-card .subtitle { font-size: 0.95rem; color: #eee; font-weight: 600; margin-bottom: 2px; }
-    .overlay-card .date { font-size: 0.82rem; color: #888; margin-bottom: 18px; }
+    .overlay-card .date { font-size: 0.82rem; color: #888; margin-bottom: 0; }
     .overlay-card p { font-size: 0.97rem; color: #ccc; line-height: 1.5; margin-bottom: 24px; }
     .overlay-card button {
       padding: 12px 36px;
@@ -248,6 +248,23 @@
       text-transform: uppercase;
       letter-spacing: 0.06em;
       margin-bottom: 8px;
+      cursor: pointer;
+      user-select: none;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    #score-panel .panel-title::after {
+      content: '▲';
+      font-size: 0.6rem;
+      color: #555;
+      transition: transform 0.2s;
+    }
+    #score-panel.collapsed .panel-title::after {
+      transform: rotate(180deg);
+    }
+    #score-panel.collapsed #score-rows {
+      display: none;
     }
     .score-row {
       display: flex;
@@ -322,14 +339,15 @@ <h1>GeoSpot</h1>
     <h2>GeoSpot</h2>
     <div class="subtitle" id="overlay-title"></div>
     <div class="date" id="overlay-date"></div>
-    <svg viewBox="0 0 200 80" width="200" height="80" style="margin:16px auto 8px;display:block">
-      <!-- dashed line -->
-      <line x1="60" y1="50" x2="140" y2="30" stroke="white" stroke-width="1" stroke-dasharray="4 5" stroke-opacity="0.4"/>
-      <!-- target dot (gold) -->
-      <circle cx="140" cy="30" r="7" fill="#70a1ff" stroke="white" stroke-width="2"/>
-      <!-- guess dot (red) with label -->
-      <circle cx="60" cy="50" r="6" fill="#e94560" stroke="white" stroke-width="2"/>
-      <text x="60" y="36" text-anchor="middle" fill="white" font-size="11" font-family="-apple-system,BlinkMacSystemFont,sans-serif" opacity="0.9">Bordeaux</text>
+    <svg viewBox="0 0 200 80" width="200" height="80" style="margin:4px auto 8px;display:block">
+      <!-- dashed line guess → target -->
+      <line x1="68" y1="50" x2="132" y2="50" stroke="white" stroke-width="2" stroke-dasharray="4 7" stroke-linecap="round" stroke-opacity="0.75"/>
+      <!-- guess dot (gold) -->
+      <circle cx="68" cy="50" r="6" fill="#f5a623" stroke="#f9c87a" stroke-width="2"/>
+      <!-- Bordeaux label above guess dot -->
+      <text x="68" y="37" text-anchor="middle" fill="#f5a623" font-size="11" font-weight="700" font-family="-apple-system,BlinkMacSystemFont,sans-serif">Bordeaux</text>
+      <!-- target dot (blue) -->
+      <circle cx="132" cy="50" r="6" fill="#70a1ff" stroke="#a8c8ff" stroke-width="2"/>
     </svg>
     <p>Trouve la ville la plus proche possible de la cible.</p>
     <button id="play-btn">Jouer</button>
@@ -822,6 +840,10 @@ <h2>GeoSpot</h2>
   }
 
   // ── Share ─────────────────────────────────────────────────────────────────
+  document.querySelector('#score-panel .panel-title').addEventListener('click', () => {
+    document.getElementById('score-panel').classList.toggle('collapsed');
+  });
+
   document.getElementById('share-btn').addEventListener('click', () => {
     const total = guesses.reduce((s, g) => s + g.dist, 0);
     function distEmoji(dist) {