/* ============================================================
   NO WOE — оформление в духе веба 2003-2005
   Verdana/Tahoma, bevel-рамки, градиентные плашки, таблицы.
   ============================================================ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 8px 0 0;
  font: 11px Verdana, Tahoma, "MS Sans Serif", Geneva, sans-serif;
  color: #d8d8d8;
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.022) 0 2px,
      rgba(0,0,0,0) 2px 6px),
    linear-gradient(#180d14, #0a0a0a 340px);
  background-repeat: repeat, no-repeat;
}

a { color: #ff54a8; text-decoration: underline; }
a:hover { color: #fff; background: #ff2d95; text-decoration: none; }
img { border: 0; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-size: 11px; }
p { margin: 0 0 8px; line-height: 1.5; }
ul { margin: 0 0 8px; padding-left: 16px; }
li { line-height: 1.5; margin-bottom: 2px; }

/* ---------- Каркас страницы ---------- */

.page {
  width: 1000px;
  margin: 0 auto;
  background: #131313;
  border: 2px solid #2a2a2a;
  border-top-color: #444;
  border-left-color: #444;
  padding: 0 0 2px;
}

.cols {
  display: grid;
  grid-template-columns: 168px 1fr 186px;
  gap: 6px;
  padding: 6px;
}

.col-main { min-width: 0; }

/* ---------- Верхнее меню ---------- */

.topnav {
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(#b3005e, #6b0038 55%, #4a0026);
  border-bottom: 2px solid #000;
}

.topnav a {
  flex: 1 1 auto;
  padding: 5px 10px;
  color: #ffe3f1;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid rgba(0,0,0,.5);
  border-left: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}

/* Каждая вкладка своего цвета — как на детских порталах середины нулевых.
   Приглушённый градиент в покое, насыщенный при наведении и на активной. */
.topnav a:nth-child(1) { background: linear-gradient(#7a0040, #470026); }
.topnav a:nth-child(2) { background: linear-gradient(#00566b, #002c38); }
.topnav a:nth-child(3) { background: linear-gradient(#3d5c0a, #1e2f05); }
.topnav a:nth-child(4) { background: linear-gradient(#7a4300, #3f2200); }
.topnav a:nth-child(5) { background: linear-gradient(#432074, #23103e); }
.topnav a:nth-child(6) { background: linear-gradient(#7d0d0d, #420606); }

.topnav a:nth-child(1):hover, .topnav a:nth-child(1).on { background: linear-gradient(#ff59ac, #d1006e); }
.topnav a:nth-child(2):hover, .topnav a:nth-child(2).on { background: linear-gradient(#3ad7f5, #0093b5); }
.topnav a:nth-child(3):hover, .topnav a:nth-child(3).on { background: linear-gradient(#a5e34a, #5f9c0d); }
.topnav a:nth-child(4):hover, .topnav a:nth-child(4).on { background: linear-gradient(#ffb43a, #d47600); }
.topnav a:nth-child(5):hover, .topnav a:nth-child(5).on { background: linear-gradient(#b083f0, #6a35bd); }
.topnav a:nth-child(6):hover, .topnav a:nth-child(6).on { background: linear-gradient(#ff6a6a, #cc1111); }

.topnav a:hover, .topnav a.on {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

/* Радужная линейка под меню — чистая примета эпохи */
.rainbow {
  height: 6px;
  background: linear-gradient(90deg,
    #ff2d95 0 16.66%, #00c2e8 16.66% 33.33%, #8bd450 33.33% 50%,
    #ffb43a 50% 66.66%, #a06bef 66.66% 83.33%, #ff4d4d 83.33% 100%);
  border-bottom: 2px solid #000;
}

/* ---------- Шапка ---------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background:
    radial-gradient(560px 90px at 22% 50%, rgba(255,45,149,.30), transparent 70%),
    linear-gradient(#1d1d1d, #060606);
  border-bottom: 2px solid #000;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.logo:hover { background: none; }

.logo-mark {
  width: 60px;
  height: 44px;
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px outset #ff2d95;
  background: radial-gradient(circle at 42% 34%, #2a0d1a, #0a0a0a 70%);
  padding: 4px 5px;
}

.logo-text {
  font: bold 34px/1 Impact, Haettenschweiler, "Arial Black", Tahoma, sans-serif;
  letter-spacing: 2px;
  background: linear-gradient(#ffffff 8%, #cfcfcf 34%, #6d6d6d 52%, #eaeaea 68%, #9a9a9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
  white-space: nowrap;
}

.logo-sub {
  font-size: 9px;
  letter-spacing: 3px;
  color: #ff2d95;
  text-transform: uppercase;
  margin-top: 2px;
}

.masthead-spacer { flex: 1 1 auto; }

.searchbox {
  border: 2px inset #555;
  background: #1a1a1a;
  padding: 6px 8px;
  text-align: right;
}

.searchbox label {
  display: block;
  font-size: 9px;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

input[type="text"], input[type="email"], textarea, select {
  font: 11px Verdana, Tahoma, sans-serif;
  color: #f0f0f0;
  background: #0d0d0d;
  border: 2px inset #4a4a4a;
  padding: 3px 5px;
}

input[type="text"]:focus, textarea:focus, select:focus {
  outline: 2px solid #ff2d95;
  outline-offset: -2px;
}

textarea { width: 100%; resize: vertical; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-block;
  font: bold 11px Verdana, Tahoma, sans-serif;
  color: #fff;
  text-decoration: none;
  padding: 4px 12px;
  border: 2px outset #ff77ba;
  background: linear-gradient(#ff62ae, #c30069);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}

.btn:hover { background: linear-gradient(#ff8dc6, #e0007c); color: #fff; }
.btn:active { border-style: inset; }

.btn-grey {
  border-color: #8a8a8a;
  background: linear-gradient(#5b5b5b, #2b2b2b);
}

.btn-grey:hover { background: linear-gradient(#6e6e6e, #3a3a3a); }

.btn-big { font-size: 13px; padding: 7px 18px; }

/* ---------- Бегущая строка ---------- */

.ticker {
  overflow: hidden;
  background: #000;
  border-top: 1px solid #333;
  border-bottom: 2px solid #000;
  padding: 4px 0;
}

.ticker-inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  font-weight: bold;
  color: #ffd23f;
  letter-spacing: 1px;
  animation: ticker-run 26s linear infinite;
}

.ticker-inner b { color: #ff54a8; }

@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.ticker:hover .ticker-inner { animation-play-state: paused; }

/* ---------- Панель («окно») ---------- */

.win {
  border: 2px outset #3d3d3d;
  background: #171717;
  margin-bottom: 6px;
}

.win-title {
  padding: 4px 8px;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 3px, rgba(0,0,0,0) 3px 6px),
    linear-gradient(#d1006e, #7a0040);
  border-bottom: 2px solid #000;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.win-title.grey {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 3px, rgba(0,0,0,0) 3px 6px),
    linear-gradient(#4c4c4c, #232323);
  color: #e8e8e8;
}

/* Цветные шапки панелей: разделы должны отличаться на глаз */
.win-title.c-cyan {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 3px, rgba(0,0,0,0) 3px 6px),
    linear-gradient(#00b4d8, #00647e);
}

.win-title.c-lime {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 3px, rgba(0,0,0,0) 3px 6px),
    linear-gradient(#8bd450, #497a12);
  color: #08210a;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.win-title.c-orange {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 3px, rgba(0,0,0,0) 3px 6px),
    linear-gradient(#ffa62b, #b35c00);
  color: #2a1400;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.win-title.c-violet {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 3px, rgba(0,0,0,0) 3px 6px),
    linear-gradient(#a06bef, #56269c);
}

/* Панель окрашивается целиком — рамка подхватывает цвет шапки */
.win.t-cyan   { border-color: #10566a; }
.win.t-lime   { border-color: #3f6a11; }
.win.t-orange { border-color: #7a4200; }
.win.t-violet { border-color: #4d2a80; }
.win.t-pink   { border-color: #7a0040; }

.win-body { padding: 8px; }
.win-body.tight { padding: 0; }

/* ---------- Навигация в колонке ---------- */

.navlist { list-style: none; margin: 0; padding: 0; }

.navlist li { margin: 0; }

.navlist a {
  display: block;
  padding: 4px 8px 4px 16px;
  color: #ffbcdd;
  text-decoration: none;
  border-bottom: 1px solid #232323;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M2 1h2v2h2v1H4v2H2z' fill='%23ff2d95'/%3E%3C/svg%3E")
    no-repeat 5px 6px;
}

.navlist a:hover { background-color: #2a1220; color: #fff; }

/* ---------- Главный баннер ---------- */

.hero {
  position: relative;
  border: 2px solid #000;
  background: #000;
  overflow: hidden;
}

.hero img {
  display: block;
  width: 100%;
  height: 344px;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(1.12) contrast(1.05);
}

.hero-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px 10px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.82) 42%, #000);
}

.hero-kicker {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #000;
  background: #ffd23f;
  padding: 2px 6px;
  margin-bottom: 6px;
}

.hero-title {
  font: bold 30px/1 Impact, Haettenschweiler, "Arial Black", Tahoma, sans-serif;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 2px 2px 0 #c30069, 4px 4px 0 rgba(0,0,0,.7);
  margin-bottom: 6px;
}

.hero-sub { color: #d8d8d8; margin: 0 0 8px; max-width: 560px; }

/* ---------- Ряд превью ---------- */

.thumbrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.thumb {
  border: 2px outset #3d3d3d;
  background: #101010;
  text-decoration: none;
  display: block;
}

.thumb:hover { border-color: #ff2d95; background: #1c1015; }

.thumb-tag {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(#4c4c4c, #202020);
  padding: 3px 6px;
  border-bottom: 1px solid #000;
}

.thumb img {
  display: block;
  width: 100%;
  height: 108px;
  object-fit: cover;
}

.thumb-tag.c-cyan   { background: linear-gradient(#00b4d8, #00647e); color: #fff; }
.thumb-tag.c-lime   { background: linear-gradient(#8bd450, #497a12); color: #08210a; }
.thumb-tag.c-orange { background: linear-gradient(#ffa62b, #b35c00); color: #2a1400; }
.thumb-tag.c-violet { background: linear-gradient(#a06bef, #56269c); color: #fff; }

.thumb-name {
  padding: 5px 6px;
  color: #ffbcdd;
  font-weight: bold;
  font-size: 10px;
}

.thumb:hover .thumb-name { color: #fff; }

/* ---------- Товарные карточки ---------- */

.goods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.goods.trio { grid-template-columns: repeat(3, 1fr); }

.good {
  border: 2px inset #3a3a3a;
  background: #0f0f0f;
  padding: 8px;
}

.good img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border: 2px solid #000;
  margin-bottom: 7px;
}

.good h3 {
  font-size: 13px;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: .5px;
}

.spec { list-style: none; margin: 0 0 8px; padding: 0; font-size: 10px; color: #a9a9a9; }
.spec li { border-bottom: 1px dotted #2e2e2e; padding: 2px 0; }
.spec b { color: #e2e2e2; font-weight: normal; float: right; }

.price {
  font: bold 20px Tahoma, Verdana, sans-serif;
  color: #ffd23f;
  text-shadow: 1px 1px 0 #000;
}

.price small { font-size: 10px; color: #8f8f8f; font-weight: normal; }

.price-old {
  text-decoration: line-through;
  color: #7a7a7a;
  font-size: 12px;
  margin-left: 6px;
}

.pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---------- Таблица-рейтинг ---------- */

.rank { width: 100%; border-collapse: collapse; }

.rank th {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  color: #bdbdbd;
  background: linear-gradient(#3a3a3a, #1e1e1e);
  padding: 4px 6px;
  border-bottom: 2px solid #000;
}

.rank td {
  padding: 6px;
  border-bottom: 1px solid #212121;
  vertical-align: middle;
}

.rank tr:nth-child(even) td { background: #131313; }
.rank tr:hover td { background: #241019; }

.rank .num {
  width: 26px;
  text-align: center;
  font: bold 15px Tahoma, sans-serif;
  color: #ff2d95;
}

.rank .nm { color: #fff; font-weight: bold; }
.rank .meta { color: #909090; font-size: 10px; }
.rank .pr { text-align: right; color: #ffd23f; font-weight: bold; white-space: nowrap; }

.score {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  font-weight: bold;
  color: #0a0a0a;
  background: linear-gradient(#8bd450, #4e9c1e);
  border: 1px outset #a5e075;
  padding: 1px 4px;
}

/* ---------- Мелочи из нулевых ---------- */

.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.new-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  color: #000;
  background: #ffd23f;
  border: 1px outset #ffe587;
  padding: 0 4px;
  margin-left: 4px;
  letter-spacing: 1px;
}

.hot-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  color: #fff;
  background: #d10000;
  border: 1px outset #ff5b5b;
  padding: 0 4px;
  margin-left: 4px;
  letter-spacing: 1px;
}

.counter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #000;
  border: 2px inset #444;
}

.counter span {
  display: inline-block;
  width: 13px;
  padding: 1px 0;
  font: bold 13px "Courier New", monospace;
  color: #33ff66;
  text-align: center;
  background: #0d1a0d;
  text-shadow: 0 0 5px #33ff66;
}

.badges { display: flex; flex-wrap: wrap; gap: 5px; }

.badge88 {
  width: 88px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: bold 8px Tahoma, sans-serif;
  line-height: 1.15;
  letter-spacing: .5px;
  border: 1px outset #6a6a6a;
  color: #fff;
  text-decoration: none;
  padding: 2px;
}

.badge88:hover { color: #fff; }
.b-pink  { background: linear-gradient(#ff2d95, #7a0040); }
.b-dark  { background: linear-gradient(#3a3a3a, #0d0d0d); }
.b-green { background: linear-gradient(#2f8f3f, #10380f); }
.b-blue  { background: linear-gradient(#2f5f9f, #0d1f38); }

.poll label {
  display: block;
  padding: 3px 0;
  cursor: pointer;
  color: #d0d0d0;
}

.poll label:hover { color: #fff; }
.poll input { margin-right: 5px; vertical-align: -1px; }

.pollbar {
  height: 11px;
  background: #0b0b0b;
  border: 1px inset #3a3a3a;
  margin: 2px 0 6px;
}

.pollbar i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, #ff2d95 0 4px, #c30069 4px 8px);
}

.pollrow { font-size: 10px; color: #b6b6b6; }
.pollrow b { color: #fff; }

/* ---------- Заметки, врезки ---------- */

.note {
  border: 2px inset #3a3a3a;
  background: #0f0f0f;
  padding: 8px;
  margin-bottom: 8px;
}

.note-hl {
  border: 2px outset #7a0040;
  background: linear-gradient(#2a0f1c, #140a10);
}

/* Врезки с цветным маркером слева */
.note.a-pink,
.note.a-cyan,
.note.a-lime,
.note.a-orange { border-left-width: 5px; border-left-style: solid; }

.note.a-pink   { border-left-color: #ff2d95; background: linear-gradient(90deg, #24101a, #0f0f0f 40%); }
.note.a-cyan   { border-left-color: #00b4d8; background: linear-gradient(90deg, #0d1e24, #0f0f0f 40%); }
.note.a-lime   { border-left-color: #8bd450; background: linear-gradient(90deg, #141f10, #0f0f0f 40%); }
.note.a-orange { border-left-color: #ffa62b; background: linear-gradient(90deg, #241a0c, #0f0f0f 40%); }

.note.a-pink   h3 { color: #ff8cc4; }
.note.a-cyan   h3 { color: #6fe0f7; }
.note.a-lime   h3 { color: #b7e888; }
.note.a-orange h3 { color: #ffc978; }

.hr {
  height: 2px;
  margin: 10px 0;
  background: linear-gradient(90deg, #ff2d95, #3a3a3a 45%, transparent);
}

.small { font-size: 10px; color: #8f8f8f; }
.center { text-align: center; }
.mb0 { margin-bottom: 0; }

/* ---------- Гостевая книга ---------- */

.gb-entry {
  border: 2px outset #333;
  background: #101010;
  margin-bottom: 8px;
}

.gb-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 8px;
  background: linear-gradient(#3a3a3a, #1c1c1c);
  border-bottom: 1px solid #000;
  font-size: 10px;
}

.gb-head b { color: #ff8cc4; }
.gb-body { padding: 8px; }

.gb-body img.gb-photo {
  float: right;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid #000;
  margin: 0 0 6px 8px;
}

.field { margin-bottom: 8px; }
.field label { display: block; margin-bottom: 3px; color: #bdbdbd; }

/* ---------- Галерея ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.gallery figure { margin: 0; border: 2px outset #333; background: #101010; }
.gallery img { display: block; width: 100%; height: 190px; object-fit: cover; }
.gallery figcaption { padding: 5px 7px; font-size: 10px; color: #a9a9a9; }

/* ---------- Подвал ---------- */

.footlinks {
  padding: 8px 10px;
  background: linear-gradient(#1d1d1d, #0b0b0b);
  border-top: 2px solid #000;
  text-align: center;
  line-height: 1.9;
}

.footlinks a { margin: 0 4px; }

.copyright {
  padding: 10px;
  text-align: center;
  font-size: 10px;
  color: #7d7d7d;
  background: #060606;
  border-top: 1px solid #222;
}

.sitefoot { width: 1000px; margin: 6px auto 26px; text-align: center; }

/* ---------- Адаптив ---------- */

@media (max-width: 1020px) {
  body { padding-top: 0; }
  .page, .sitefoot { width: auto; margin: 0 6px 20px; }
  .cols { grid-template-columns: 1fr; }
  .col-left  { order: 2; }
  .col-main  { order: 1; }
  .col-right { order: 3; }
  .masthead { flex-wrap: wrap; }
  .searchbox { width: 100%; text-align: left; }
}

@media (max-width: 700px) {
  .topnav a { flex: 1 0 33.33%; font-size: 10px; padding: 6px 4px; }
  .thumbrow { grid-template-columns: repeat(2, 1fr); }
  .goods, .goods.trio, .gallery { grid-template-columns: 1fr; }
  .hero img { height: 220px; }
  .hero-title { font-size: 21px; }
  .logo-text { font-size: 26px; }
  .rank .meta { display: none; }
  .gb-body img.gb-photo { width: 88px; height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; padding-left: 0; }
  .blink { animation: none; }
}