Обновить 'project0_67.html'

project0_67.html

@@ -184,22 +184,21 @@
     border:1px solid var(--neon-purple);
     background:linear-gradient(145deg,rgba(162,89,255,.15),rgba(0,229,255,.08));
     box-shadow:0 0 20px rgba(162,89,255,.4);font-weight:700;}
-      /* 🎨 Карточки с PNG-картинками */
+   /* 🎨 Карточки с эмодзи-картинками */
   .card-face{
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
     padding: 16px;
   }
-  .card-face .card-img{
-    width: 72px;
-    height: 72px;
-    object-fit: contain;
+  .card-face .card-emoji{
+    font-size: 3.4rem;
+    line-height: 1;
+    filter: drop-shadow(0 0 12px currentColor);
     animation: cardFloat 3s ease-in-out infinite;
-    transition: transform .3s;
   }
   @keyframes cardFloat{
-    0%,100%{transform: translateY(0) scale(1);}
-    50%{transform: translateY(-4px) scale(1.04);}
+    0%,100%{transform: translateY(0);}
+    50%{transform: translateY(-4px);}
   }
   .card-face .card-title{
     font-size: .95rem;
@@ -208,70 +207,54 @@
     font-weight: 800;
   }
 
-  /* 🦇 Эхолокация — зелёный неон */
+  /* Индивидуальные цвета карточек */
   .card.eco .card-face{
-    background: linear-gradient(145deg, rgba(57,255,20,.15), rgba(0,229,255,.06));
+    background: linear-gradient(145deg, rgba(57,255,20,.18), rgba(0,229,255,.08));
     border-color: var(--neon-green);
-    box-shadow: 0 0 25px rgba(57,255,20,.35);
+    box-shadow: 0 0 25px rgba(57,255,20,.4);
     color: var(--neon-green);
   }
-  .card.eco .card-img{
-    filter: drop-shadow(0 0 14px #39ff14) drop-shadow(0 0 6px #39ff14);
-  }
   .card.eco .card-face.back{
     color: #d8ffd0;
     border-color: var(--neon-cyan);
   }
 
-  /* 🩻 УЗИ — циан */
   .card.uzi .card-face{
-    background: linear-gradient(145deg, rgba(0,229,255,.15), rgba(162,89,255,.06));
+    background: linear-gradient(145deg, rgba(0,229,255,.18), rgba(162,89,255,.08));
     border-color: var(--neon-cyan);
-    box-shadow: 0 0 25px rgba(0,229,255,.35);
+    box-shadow: 0 0 25px rgba(0,229,255,.4);
     color: var(--neon-cyan);
   }
-  .card.uzi .card-img{
-    filter: drop-shadow(0 0 14px #00e5ff) drop-shadow(0 0 6px #00e5ff);
-  }
   .card.uzi .card-face.back{
     color: #cfeaff;
     border-color: var(--neon-purple);
   }
 
-  /* 🌍 Сейсмология — фиолетовый */
   .card.seismo .card-face{
-    background: linear-gradient(145deg, rgba(162,89,255,.15), rgba(255,46,196,.06));
+    background: linear-gradient(145deg, rgba(162,89,255,.18), rgba(255,46,196,.08));
     border-color: var(--neon-purple);
-    box-shadow: 0 0 25px rgba(162,89,255,.35);
+    box-shadow: 0 0 25px rgba(162,89,255,.4);
     color: var(--neon-purple);
   }
-  .card.seismo .card-img{
-    filter: drop-shadow(0 0 14px #a259ff) drop-shadow(0 0 6px #a259ff);
-  }
   .card.seismo .card-face.back{
     color: #e8d5ff;
     border-color: var(--neon-pink);
   }
 
-  /* 🎸 Музыка — розовый */
   .card.music .card-face{
-    background: linear-gradient(145deg, rgba(255,46,196,.15), rgba(0,229,255,.06));
+    background: linear-gradient(145deg, rgba(255,46,196,.18), rgba(0,229,255,.08));
     border-color: var(--neon-pink);
-    box-shadow: 0 0 25px rgba(255,46,196,.35);
+    box-shadow: 0 0 25px rgba(255,46,196,.4);
     color: var(--neon-pink);
   }
-  .card.music .card-img{
-    filter: drop-shadow(0 0 14px #ff2ec4) drop-shadow(0 0 6px #ff2ec4);
-  }
   .card.music .card-face.back{
     color: #ffd5f4;
     border-color: var(--neon-cyan);
   }
 
-  /* Задняя сторона — без покачивания */
-  .card-face.back .card-img{
-    width: 40px;
-    height: 40px;
+  /* Задняя сторона не должна «плавать» */
+  .card-face.back .card-emoji{
+    font-size: 1.4rem;
     animation: none;
   }
   .card-face.back{transform:rotateY(180deg);font-weight:400;font-size:.85rem;
@@ -527,72 +510,48 @@
 
       <div class="card eco"><div class="card-inner">
         <div class="card-face">
-          <img class="card-img"
-               src=![616554.png](http://)
-               alt="Эхолокация"
-               onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🦇',style:'font-size:3.4rem;line-height:1;'}));" />
+          <div class="card-emoji">🦇</div>
           <div class="card-title">Эхолокация</div>
         </div>
         <div class="card-face back">
-          <img class="card-img"
-               src=[616554.png](http://)
-               alt="Эхолокация"
-               onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🦇',style:'font-size:1.4rem;line-height:1;'}));" />
+          <div class="card-emoji">🦇</div>
           <div>Летучие мыши и дельфины определяют препятствия по отражённому ультразвуку.</div>
         </div>
       </div></div>
 
       <div class="card uzi"><div class="card-inner">
         <div class="card-face">
-          <img class="card-img"
-               src=[2966327.png](http://)
-               alt="УЗИ"
-               onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🩻',style:'font-size:3.4rem;line-height:1;'}));" />
+          <div class="card-emoji">🩻</div>
           <div class="card-title">УЗИ</div>
         </div>
         <div class="card-face back">
-          <img class="card-img"
-               src=[2966327.png](http://)
-               alt="УЗИ"
-               onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🩻',style:'font-size:1.4rem;line-height:1;'}));" />
+          <div class="card-emoji">🩻</div>
           <div>Медицинская визуализация: ультразвук отражается от границ тканей.</div>
         </div>
       </div></div>
 
       <div class="card seismo"><div class="card-inner">
         <div class="card-face">
-          <img class="card-img"
-               src=[2909760.png](http://)
-               alt="Сейсмология"
-               onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🌍',style:'font-size:3.4rem;line-height:1;'}));" />
+          <div class="card-emoji">🌍</div>
           <div class="card-title">Сейсмология</div>
         </div>
         <div class="card-face back">
-          <img class="card-img"
-               src=[2909760.png](http://)
-               alt="Сейсмология"
-               onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🌍',style:'font-size:1.4rem;line-height:1;'}));" />
+          <div class="card-emoji">🌍</div>
           <div>По сейсмическим волнам изучают строение Земли и землетрясения.</div>
         </div>
       </div></div>
 
       <div class="card music"><div class="card-inner">
         <div class="card-face">
-          <img class="card-img"
-               src=[384281.png](http://)
-               alt="Музыка"
-               onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🎸',style:'font-size:3.4rem;line-height:1;'}));" />
+          <div class="card-emoji">🎸</div>
           <div class="card-title">Музыка</div>
         </div>
         <div class="card-face back">
-          <img class="card-img"
-               src=[384281.png](http://)
-               alt="Музыка"
-               onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🎸',style:'font-size:1.4rem;line-height:1;'}));" />
+          <div class="card-emoji">🎸</div>
           <div>Струны и столбы воздуха создают стоячие волны — ноты.</div>
         </div>
       </div></div>
-
+    
     </div>
     <p>Собери пару: пример ↔ физическое явление.</p>
     <div class="pairs">