/* --- Общие --- */
body{font-family: Tahoma, Verdana, Arial, sans-serif; font-size:12px; margin:0; padding:0; background:#e6eef9; color:#222}
#wrap{width:980px; margin:18px auto; border:1px solid #7a8fbf; background:#f7f9ff; box-shadow:4px 4px 0 #c8d2f2}
.header{background:#0b3d91; color:#fff; padding:12px; overflow:hidden; position:relative; display:flex; align-items:center}
.logo{float:none}
.logo h1{margin:0; font-size:26px}
.logo .tag{display:block; font-size:11px; color:#e1ecff}
.nav{float:none; margin-left:auto}
.nav a{display:inline-block; padding:8px 14px; margin:0 6px; text-decoration:none; color:#0b355d; font-weight:700; background:#ffeb9a; border:1px solid #d4b34a; border-bottom:3px solid #b07b00; border-radius:6px; box-shadow:0 2px 0 rgba(0,0,0,0.12); transition:all .12s ease}
/* Навигация под хэдером */
.main-nav{background:transparent; border-bottom:none; padding:6px 12px; text-align:center; margin-top:6px} /* компактная навигация без большого блока под кнопками */
.main-nav .nav{display:inline-block}
.main-nav .nav a{margin:0 6px}
.clear{clear:both}


.content-wrap{padding:8px 12px 12px 12px; position:relative; overflow:visible}
/* Box sizing to keep percent-widths including padding/borders so sidebar won't drop under main */
*, *:before, *:after { box-sizing: border-box; }
.columns{zoom:1; /* для старых IE */}
.columns:after{content:""; display:table; clear:both}
.main{float:left; width:75%; padding:12px; background:linear-gradient(#ffffff,#eef4ff); border:1px solid #ccd8f0}
.sidebar{float:right; width:25%; padding:10px; background:#fffbe6; border:1px solid #e6dba8}

/* Блок фото по центру */
.photo{width:420px; height:260px; margin:8px auto; background:#cfe0ff; border:3px solid #b3c7ff}

/* Соцсетки */
.social-row{margin:10px 0; text-align:center}
.social-row a{margin:0 6px;}
/* .social-row a{display:inline-block; width:32px; height:32px; margin:0 6px;}
.social-row a img{width: 100%;} */

/* Спойлер */
.spoiler-head{cursor:pointer; background:#eef6ff; padding:8px; border:1px solid #c8d2f2; margin-top:12px; font-weight:bold}
.spoiler-body{display:none; padding:10px; border:1px solid #dfe9ff; background:#ffffff}
.track-first{display:flex; align-items:flex-start}
.track-cover{width:64px; height:64px; background:#d8e8ff; background-image: url("https://graphic.neocities.org/cdisk.gif"); background-size:100%; border:2px solid #c0d4ff; margin-right:10px}
.track-meta{line-height:1.2}
.track-meta .title{font-weight:bold}
.track-meta .artist{font-size:11px; color:#666}
.track-list{margin-top:8px; padding-left:18px; counter-reset:track 1}
.track-list li{list-style:none; counter-increment:track; margin:4px 0}
.track-list li:before{content:counter(track) ". "; margin-right:6px; color:#333}
.track-list a{display:inline-block; text-decoration:none; padding:3px 0}

/* Описание */
.desc{margin:12px 0; padding:10px; background:#fbfbff; border:1px dashed #c8d2f2}
.static img{width: 50%; background:#d8e8ff; border:3px solid #b3c7ff;}
.article img{width:70%; background:#d8e8ff; border:3px solid #b3c7ff;}

/* Обновления */
.updates h2{margin:6px 0; font-size:16px}
.news-list{margin-top:8px}
.news-item{background:#fff; border:1px solid #d0d8f2; padding:8px; margin-bottom:8px; position:relative; box-shadow:2px 2px 0 #e6eef9}
.news-item .title-space{font-weight:bold; height:22px}
.news-item .text{margin-top:6px}
.news-item .date{position:absolute; right:8px; bottom:6px; font-size:11px; color:#666}
.more-news{display:block; text-align:center; padding:8px; border:2px solid #7a8fbf; background:#f0f4ff; text-decoration:none; margin-top:6px}

/* Игры */
.games-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:12px}
.game-item{width:210px;background:#fff;border:1px solid #c8d2f2;text-align:center;box-shadow:2px 2px 0 #e6eef9;transition:transform .1s}
.game-item:hover{transform:scale(1.02);border-color:#a5b8e0}
.game-item a{text-decoration:none;color:#222;display:block;padding:6px}
.game-cover{width:190px;height:107px;margin:10px auto;background:#d8e8ff; border:2px solid #b3c7ff}
.game-cover-title{font-weight:bold;margin-top:6px}
.game-date{font-size:11px;color:#666;margin-bottom:6px}

/* Game page specific */
.game-header{display:flex;align-items:center;justify-content:space-between}
.game-title{font-size:22px;font-weight:bold}
.game-meta{font-size:12px;color:#666}
.screenshots{margin-top:12px}
.screenshot-large{width:100%;background:#d8e8ff;border:3px solid #b3c7ff;display:flex;align-items:center;justify-content:center}
.screenshot-large img{max-width:100%;max-height:100%;display:block}
.thumbs{margin-top:8px;display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.thumb{flex:0 0 auto;width:120px;background:#eee;border:2px solid #cfe0ff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumb img{max-width:100%;max-height:100%;display:block}
.thumb.active{border-color:#7a8fbf}
.description{margin-top:14px;padding:10px;background:#fbfbff;border:1px dashed #c8d2f2}
.downloads{margin-top:12px}
.dl-btn{display:inline-block;padding:8px 12px;margin-right:8px;text-decoration:none;border:2px solid #5b72b0;background:#f0f4ff;font-weight:bold}
.dl-btn:hover{background:#e8efff}
.no-downloads{padding:10px;border:1px solid #ffd3a6;background:#fff6ea;color:#7a4b00}

/* Список статей */
.article-item{display:block; clear:both; overflow:hidden; padding:10px; background:#fff; border:1px solid #d6e0fb; margin-bottom:12px; box-shadow:2px 2px 0 #e6eef9} /* display:block + clear:both — фиксирует "лесенку" при разной высоте обложек */
/* Убираем подчёркивание у всего кликабильного блока, но сохраняем визуальную ссылку через цвет/hover при желании */
.article-item, .article-item * { text-decoration: none !important; color: inherit }
.article-item img{border: none}
.article-item:hover{background:#f7faff}.article-cover{float:left; width:180px; height:110px; margin-right:12px; background:#d8e8ff; border:2px solid #b3c7ff; display:block}
.article-meta{overflow:hidden}
.article-title{font-size:16px; font-weight:bold; margin:0 0 6px 0}
.article-excerpt{margin:0 0 8px 0; color:#333}
.article-date{font-size:11px; color:#666; float:right}

/* Под одну статью */
.article-header{display:flex;align-items:center;justify-content:space-between}
.article-header .article-title{font-size:22px;font-weight:bold}
.article-header .article-meta{font-size:12px;color:#666}


/* Пагинация */
.pagination{text-align:center; margin-top:8px}
.page-link{display:inline-block; padding:6px 10px; margin:0 4px; text-decoration:none; border:2px solid #7a8fbf; background:#f0f4ff; font-weight:bold}
.page-link.current{background:#7a8fbf; color:#fff}

/* Форма гостевой */
.gform{background:#fff; border:1px solid #d6e0fb; padding:12px; margin-bottom:16px; box-shadow:2px 2px 0 #e6eef9}
.gform label{display:block; margin-bottom:6px; font-weight:bold}
.gform input[type="text"], .gform input[type="email"], .gform textarea, .gform input[type="text"].captcha-input{width:100%; padding:6px; border:1px solid #c8d2f2; background:#fcfdff}
.gform textarea{height:120px; resize:vertical}
.gform .captcha-row{display:flex; gap:8px; align-items:center}
.gform .captcha-img{width:120px; height:40px; background:#eee; border:1px solid #cfdffb; display:flex; align-items:center; justify-content:center}
.gform .gbtn{display:inline-block; padding:8px 12px; border:2px solid #5b72b0; background:#f0f4ff; font-weight:bold; text-decoration:none}


.error{padding:10px;border:1px solid #f2b3b3;background:#fceded;color:#681212}
.reload-btn{display:inline-block; padding:8px 12px; border:2px solid #5b72b0; background:#f0f4ff; font-weight:bold; text-decoration:none}


/* Сообщения */
.messages{margin-top:6px}
.msg{background:#fff; border:1px solid #d6e0fb; padding:10px; margin-bottom:10px; box-shadow:2px 2px 0 #e6eef9}
.msg .meta{font-size:11px; color:#666; margin-bottom:8px}
.msg .author{font-weight:bold}
.msg .date{float:right; font-size:11px; color:#666}
.msg .text{white-space:pre-wrap}


/* Ответ администратора */
.admin-reply{margin-top:8px; padding:8px; background:#fff7e6; border:1px dashed #ffd3a6}
.admin-reply .adm-label{font-weight:bold; color:#7a4b00; margin-bottom:6px}

/* Сайдбар */
.side-block{margin-bottom:12px; padding:8px; background:#fff; border:1px solid #e0d8c0}
.side-block h3{margin:0 0 6px 0}

/* Футер */
.footer{padding:10px; background:#0b3d91; color:#e1ecff; text-align:center}
.footer a{color: #d4b34a}

/* Простая адаптация
@media screen and (max-width:1000px){#wrap{width:95%} .main{width:100%; float:none} .sidebar{width:100%; float:none}}
 */

/* --- Blockquote (цитаты) --- */
blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  background: #fbfbff;                /* мягкий фон, как у описаний */
  border-left: 6px solid #7a8fbf;     /* заметный ретро-левый бордюр */
  color: #222;
  font-style: italic;
  line-height: 1.45;
}
blockquote p { margin: 0; }
blockquote footer,
blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: #666;
  font-style: normal;
}

/* --- Inline code --- */
code,
.kbd {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  background: #f2f6ff;                /* тонкий светлый фон */
  color: #0b3d91;                     /* акцентный синий */
  padding: 2px 6px;
  border: 1px solid #c8d2f2;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1;
}

/* --- Preformatted blocks (блоки кода) --- */
pre {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.45;
  background: #0b274f;                /* тёмный контрастный фон для блоков */
  color: #e6f0ff;                     /* светлый текст */
  padding: 12px;
  border: 1px solid #486089;
  overflow: auto;                     /* горизонтальная прокрутка при необходимости */
  white-space: pre;                   /* сохранять переносы */
  word-wrap: normal;
  margin: 12px 0;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(122,143,191,0.12);
}

/* pre > code — чтобы вложенный <code> не портил цвета */
pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
  font-size: inherit;
  font-family: inherit;
}

/* Доп. полезные классы */
.code-wrap { position: relative; }    /* если позже захочешь кнопку copy */
.code-caption {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #666;
}

/* Небольшой hover/фокус эффект для читаемости */
blockquote:hover { background:#f7fbff; }
pre:focus, pre:hover { outline: none; border-color: #6a86c2; }

/* --- Стили для таблиц --- */
.static table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 12px;
  background: #fff;
  border: 1px solid #c8d2f2;
  box-shadow: 2px 2px 0 #e6eef9;
}

.static table thead {
  background: linear-gradient(#0b3d91, #1a4da8);
  color: #fff;
}

.static table th {
  padding: 10px 8px;
  text-align: left;
  font-weight: bold;
  border-bottom: 2px solid #7a8fbf;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.static table td {
  padding: 8px;
  border-bottom: 1px solid #e6eef9;
  vertical-align: top;
}

.static table tbody tr:nth-child(even) {
  background-color: #f7f9ff;
}

.static table tbody tr:last-child td {
  border-bottom: none;
}

.ads {
  padding:8px;
  background:#ffe6f7;
  border:1px solid #ffa6da;
  margin-bottom: 12px;
}

.ads-title {
  margin-top:16px;
  padding:8px;
  background:#ffa6da;
  color:#ffeefa;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
}