/* ============================================================
   РОЗОВЫЙ МАТИЗ — стиль сайта, лето 1999 (примерно)
   Лучше всего смотрится в Netscape Navigator 4.0
   при разрешении 800x600 True Color
   ============================================================ */

body {
  background-color: #ff33cc;
  background-image: url("/assets/tile.svg");
  color: #ffff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive, fantasy;
  font-size: 16px;
  margin: 0;
  padding: 0;
  text-align: center;
}

a {
  color: #00ffff;
  font-weight: bold;
  text-decoration: underline;
}
a:visited { color: #ffccff; }
a:hover { color: #ffffff; background-color: #ff0099; }

/* Главная рамка сайта, как положено — по центру, таблицей */
.stranica {
  width: 780px;
  margin: 8px auto;
  border: 6px ridge #ffff00;
  background-color: #cc0099;
  padding: 0;
}

/* Шапка */
.shapka {
  background-color: #000000;
  border-bottom: 4px dashed #00ff00;
  padding: 10px;
}
.logo {
  font-size: 40px;
  font-weight: bold;
  color: #ff66cc;
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 #00ffff, 6px 6px 0 #000000;
}
.slogan {
  color: #00ff00;
  font-size: 15px;
  font-style: italic;
}

/* Бегущая строка */
.begushka {
  background-color: #ffff00;
  color: #ff0000;
  font-weight: bold;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  padding: 4px 0;
}

/* Навигация — кнопки как в 90-х, выпуклые */
.menu {
  background-color: #333399;
  padding: 8px;
  border-bottom: 4px dashed #00ff00;
}
.menu a {
  display: inline-block;
  background-color: #ff9900;
  color: #000000;
  border: 3px outset #ffcc00;
  padding: 4px 10px;
  margin: 3px;
  text-decoration: none;
  font-weight: bold;
}
.menu a:hover {
  border: 3px inset #ffcc00;
  background-color: #ffcc00;
  color: #cc0000;
}

/* Контент */
.telo {
  padding: 16px;
  color: #ffffff;
  text-align: left;
}
.telo h2 {
  color: #ffff00;
  background-color: #000000;
  border: 2px dotted #00ffff;
  padding: 6px;
  text-align: center;
  text-transform: uppercase;
}
.telo p { line-height: 1.5; }

/* Мигающий текст — куда без него */
.migalka {
  color: #ff0000;
  font-weight: bold;
  animation: blink 0.8s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Радужный текст */
.raduga {
  font-size: 26px;
  font-weight: bold;
  background-image: linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#00ff00,#00ffff,#cc00ff,#ff0000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Табличка "новинка", "хит" */
.plashka {
  display: inline-block;
  background-color: #ff0000;
  color: #ffffff;
  border: 2px solid #ffff00;
  padding: 2px 8px;
  font-weight: bold;
  transform: rotate(-6deg);
}

/* Карточка товара */
.tovar {
  background-color: #ffffff;
  color: #000000;
  border: 4px double #ff0099;
  padding: 12px;
  margin: 14px 0;
}
.tovar .cena {
  color: #009900;
  font-size: 28px;
  font-weight: bold;
}
.tovar .staraya-cena {
  color: #999999;
  text-decoration: line-through;
}

/* Кнопка "КУПИТЬ" */
.kupit {
  display: inline-block;
  background-color: #00cc00;
  color: #ffffff;
  border: 4px outset #00ff00;
  padding: 10px 26px;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}
.kupit:hover { border: 4px inset #00ff00; background-color: #00aa00; color:#ffff00; }

/* Картинка машины */
.matiz-foto {
  display: block;
  margin: 0 auto;
  width: 380px;
  max-width: 100%;
  border: 5px ridge #ffcc00;
  background-color: #ffddf4;
}

/* Список фишек */
.fishki { list-style: none; padding-left: 0; }
.fishki li {
  background-color: #4d004d;
  border-left: 8px solid #00ff00;
  margin: 6px 0;
  padding: 6px 10px;
  color: #ffffff;
}
.fishki li::before { content: "★ "; color: #ffff00; }

/* Счётчик посетителей */
.schetchik {
  background-color: #000000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 22px;
  letter-spacing: 3px;
  border: 3px inset #00ff00;
  padding: 4px 10px;
  display: inline-block;
}

/* Гостевуха / контакты */
.kontakt {
  background-color: #000066;
  border: 3px double #00ffff;
  padding: 12px;
  color: #ffffff;
  text-align: center;
}
.kontakt .tel { font-size: 26px; color: #00ff00; font-weight: bold; }

/* Подвал */
.podval {
  background-color: #000000;
  border-top: 4px dashed #00ff00;
  padding: 12px;
  color: #cccccc;
  font-size: 12px;
}
.podval a { color: #ff99ff; }

/* "Сайт в разработке" */
.stroyka {
  background-color: #ffcc00;
  color: #000000;
  border: 3px dashed #000000;
  padding: 6px;
  font-weight: bold;
  display: inline-block;
  margin: 8px 0;
}

/* Вебринг */
.vebring {
  background-color: #222;
  color: #fff;
  border: 2px groove #888;
  padding: 8px;
  font-size: 13px;
}

/* Значки "лучше смотреть в..." */
.znachki img, .znachok {
  display: inline-block;
  background-color: #000;
  color: #0f0;
  border: 2px solid #0f0;
  padding: 2px 6px;
  font-size: 11px;
  font-family: "Courier New", monospace;
  margin: 2px;
}

hr.polosa {
  border: none;
  height: 6px;
  background-image: linear-gradient(90deg,#ff0000,#ffff00,#00ff00,#00ffff,#ff00ff);
}

/* Таблица каталога (гараж) */
table.katalog {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  color: #000;
}
table.katalog th {
  background-color: #ff0099;
  color: #ffffff;
  border: 2px solid #000;
  padding: 6px;
}
table.katalog td {
  border: 2px solid #ff99cc;
  padding: 6px;
}
table.katalog tr:hover td { background-color: #ffe6f5; }

.big404 {
  font-size: 90px;
  color: #ff0000;
  text-shadow: 4px 4px 0 #ffff00;
}

/* ============================================================
   TRASH MODE 3000 — добавка для максимального треша
   ============================================================ */

/* Реальное фото — "прожарка" как у настоящего мема */
.matiz-real {
  display: block;
  margin: 0 auto;
  width: 460px;
  max-width: 100%;
  border: 8px ridge #ffff00;
  filter: saturate(1.7) contrast(1.25);
  box-shadow: 0 0 0 4px #ff0099, 0 0 30px #00ffff;
}

/* ШОК-баннер */
.shok {
  background-color: #ff0000;
  color: #ffff00;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  border: 5px dashed #ffff00;
  padding: 10px;
  margin: 10px 0;
  animation: shakescale 0.5s infinite;
  text-shadow: 2px 2px 0 #000;
}
@keyframes shakescale {
  0% { transform: scale(1) rotate(-1deg); }
  50% { transform: scale(1.04) rotate(1deg); background-color:#ff00aa; }
  100% { transform: scale(1) rotate(-1deg); }
}

/* WordArt-заголовок */
.wordart {
  font-size: 46px;
  font-weight: bold;
  color: #ffde00;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow:
    2px 2px 0 #ff6a00, 4px 4px 0 #ff0000,
    6px 6px 0 #cc00ff, 8px 8px 0 #0000ff,
    10px 10px 6px rgba(0,0,0,.6);
  transform: skewX(-8deg);
}

/* Вращающаяся печать SALE */
.pechat {
  display: inline-block;
  width: 120px; height: 120px;
  line-height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,#ffff00 0 60%,#ff0000 61% 100%);
  color: #ff0000;
  font-weight: bold;
  font-size: 26px;
  border: 4px solid #000;
  animation: spin 3s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Цена-взрыв */
.vzryv {
  display: inline-block;
  background: radial-gradient(circle,#fff700,#ff8a00);
  color: #ff0000;
  font-size: 40px;
  font-weight: bold;
  padding: 18px 26px;
  border: 4px solid #000;
  clip-path: polygon(0% 15%,15% 15%,15% 0%,35% 15%,50% 0,65% 15%,85% 0,85% 15%,100% 15%,85% 35%,100% 50%,85% 65%,100% 85%,85% 85%,85% 100%,65% 85%,50% 100%,35% 85%,15% 100%,15% 85%,0 85%,15% 65%,0 50%,15% 35%);
  animation: pulse 0.7s infinite alternate;
}
@keyframes pulse { to { transform: scale(1.12); } }

/* Гигантская кнопка ЖМИ */
.zhmi {
  display: block;
  width: 90%;
  margin: 14px auto;
  background: linear-gradient(#00ff66,#009900);
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 6px outset #00ff00;
  padding: 16px;
  text-shadow: 2px 2px 0 #000;
  animation: pulse 0.8s infinite alternate;
}
.zhmi:hover { border-style: inset; background: linear-gradient(#009900,#00ff66); color:#ffff00; }

/* Фейковый плеер */
.pleer {
  background-color: #000;
  color: #00ff00;
  border: 3px inset #00ff00;
  font-family: "Courier New", monospace;
  padding: 8px;
  display: inline-block;
}
.pleer .eq { color:#ffff00; animation: blink 0.4s steps(1) infinite; }

/* Печать "проверено Валерычем" */
.valerych {
  display: inline-block;
  color: #ff0000;
  border: 4px double #ff0000;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: bold;
  transform: rotate(-12deg);
  opacity: 0.85;
}

/* Падающие сердечки и искры (создаёт main.js) */
.spark {
  position: fixed;
  pointer-events: none;
  font-size: 20px;
  z-index: 9999;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}
.trail {
  position: fixed;
  pointer-events: none;
  font-size: 16px;
  z-index: 9999;
  animation: fade 0.9s forwards;
}
@keyframes fade { to { opacity: 0; transform: scale(0.2) translateY(-14px); } }

/* Бегущая строка вертикальная */
.vert {
  background-color:#000;
  color:#00ff00;
  border:2px solid #0f0;
  height:120px;
}

/* Тряска всего заголовка */
.logo { animation: wob 2s ease-in-out infinite; }
@keyframes wob { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }