/*
Theme Name: MortalKombatTheme
Theme URI: https://github.com/S0ftware-Developer
Author: Orlov Andrei
Author URI: https://orlovandrei.space
Description: Ретро-тема в стиле файтингов 90-х: тёмная палитра, молнии, драконы, пиксельный шрифт. Посты выводятся как карточки бойцов.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mortalkombattheme
Tags: blog, dark, custom-menu, featured-images, grid-layout
*/

/* ==========================================================
   1. ПЕРЕМЕННЫЕ — палитра и шрифт темы
   ========================================================== */
:root {
    --mk-black:  #0a0a0f;   /* основной фон */
    --mk-dark:   #14101c;   /* фон карточек и панелей */
    --mk-red:    #c1121f;   /* акцентный красный */
    --mk-blood:  #8b0000;   /* тёмно-красный, «кровь» */
    --mk-purple: #5a189a;   /* фиолетовый для рамок */
    --mk-violet: #9d4edd;   /* светлый фиолетовый, «молнии» */
    --mk-gold:   #f4c430;   /* золото для заголовков и HUD */
    --mk-text:   #e8e0f0;   /* цвет текста */
    --mk-font:   'Press Start 2P', 'Courier New', monospace;
}

/* ==========================================================
   2. БАЗОВЫЕ СТИЛИ
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--mk-font);
    font-size: 12px;
    line-height: 2;
    color: var(--mk-text);
    background: var(--mk-black);
}

/* Эффект «строк развёртки» старого монитора поверх всей страницы */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px
    );
}

/* Пиксельный фон арены (как на 8-битных консолях Dendy/NES).
   Картинка маленькая (384×216) и растягивается без сглаживания,
   поэтому пиксели остаются чёткими. Слой зафиксирован на весь экран. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(6, 3, 12, .20), rgba(6, 3, 12, .55)),
        url("assets/images/bg-arena.png") center bottom / cover no-repeat;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

a { color: var(--mk-violet); text-decoration: none; transition: color .2s; }
a:hover, a:focus-visible { color: var(--mk-gold); }

img { display: block; max-width: 100%; height: auto; }

/* Обязательные классы WordPress для скрытого текста (доступность) */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}
.skip-link:focus {
    clip: auto; width: auto; height: auto;
    top: 8px; left: 8px; z-index: 100000;
    padding: 12px 16px;
    background: var(--mk-gold); color: #000;
}

/* ==========================================================
   3. ШАПКА С ЛОГОТИПОМ
   ========================================================== */
.site-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(26, 5, 16, .55), rgba(10, 10, 15, .80));
    border-bottom: 6px solid var(--mk-red);
    box-shadow: 0 6px 0 var(--mk-blood), 0 0 40px rgba(193, 18, 31, .5);
}

.header-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 0;
    text-align: center;
}

/* Логотип: медальон с драконом + большие буквы MK */
.mk-logo {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    color: var(--mk-red);
}
.site-logo-badge {
    width: 96px; height: 96px;
    animation: mk-pulse 3s ease-in-out infinite;
}
.mk-logo-text {
    font-size: clamp(48px, 10vw, 96px);
    line-height: 1;
    letter-spacing: -4px;
    color: var(--mk-red);
    /* Многослойная тень создаёт «выбитый» объём, как на старых аркадах */
    text-shadow:
        3px 3px 0 #000,
        6px 6px 0 var(--mk-blood),
        0 0 30px rgba(193, 18, 31, .8);
}
.site-title {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--mk-gold);
    text-transform: uppercase;
}
.site-title a { color: inherit; }
.site-description {
    margin: 6px 0 0;
    font-size: 9px;
    color: var(--mk-violet);
    letter-spacing: 2px;
}

/* ---------- Молнии (чистый CSS, без картинок) ---------- */
.bolt {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 70px;
    height: 180px;
    opacity: 0;
    background: linear-gradient(180deg, #fff, var(--mk-violet));
    /* Форма зигзага молнии */
    clip-path: polygon(55% 0, 15% 55%, 45% 55%, 25% 100%, 85% 40%, 55% 40%, 80% 0);
    animation: mk-bolt 5s infinite;
}
.bolt--1 { left: 8%; }
.bolt--2 { right: 8%; transform: scaleX(-1); animation-delay: 2.3s; }

@keyframes mk-bolt {
    0%, 88%, 100% { opacity: 0; }
    90%  { opacity: 1; }
    92%  { opacity: 0; }
    94%  { opacity: .9; }
    96%  { opacity: 0; }
}
@keyframes mk-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px var(--mk-red)); }
    50%      { filter: drop-shadow(0 0 20px var(--mk-red)); }
}
@keyframes mk-flicker {
    0%, 100% { opacity: 1; }
    92%      { opacity: 1; }
    93%      { opacity: .3; }
    95%      { opacity: 1; }
    97%      { opacity: .5; }
}

/* ==========================================================
   4. МЕНЮ В СТИЛЕ АРЕНЫ (каменный пол + плитки-кнопки)
   ========================================================== */
.arena-nav {
    margin-top: 26px;
    border-top: 4px solid var(--mk-purple);
    /* Узор «каменных плит» */
    background: repeating-linear-gradient(
        90deg, #1b1326 0 48px, #150f1f 48px 96px
    );
}

.arena-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.arena-menu li { margin: 0; }
.arena-menu a {
    display: block;
    padding: 18px 24px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--mk-text);
    border-right: 2px solid rgba(0, 0, 0, .5);
    transition: background .15s, color .15s;
}
/* Стрелка-указатель как в меню выбора бойца */
.arena-menu a::before {
    content: "▶ ";
    opacity: 0;
    color: var(--mk-gold);
}
.arena-menu a:hover,
.arena-menu .current-menu-item > a,
.arena-menu .current_page_item > a {
    color: #fff;
    background: var(--mk-red);
    text-shadow: 2px 2px 0 #000;
    box-shadow: inset 0 -4px 0 var(--mk-gold);
}
.arena-menu a:hover::before,
.arena-menu .current-menu-item > a::before { opacity: 1; }

/* Кнопка мобильного меню (на десктопе скрыта) */
.menu-toggle {
    display: none;
    width: 100%;
    padding: 16px;
    font: inherit;
    font-size: 11px;
    color: #fff;
    background: var(--mk-purple);
    border: 0;
    border-bottom: 4px solid #000;
    cursor: pointer;
}

/* ==========================================================
   5. ГЛАВНАЯ — КАРТОЧКИ-БОЙЦЫ
   ========================================================== */
.arena-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.arena-heading { margin-bottom: 40px; text-align: center; }
.arena-title {
    margin: 0;
    font-size: clamp(16px, 3vw, 26px);
    line-height: 1.6;
    color: var(--mk-gold);
    text-shadow: 3px 3px 0 var(--mk-blood);
}
.arena-subtitle { margin: 12px 0 0; font-size: 10px; color: var(--mk-violet); }

/* Сетка бойцов */
.fighters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px;
    counter-reset: fighter; /* счётчик для номеров «ИГРОК 01, 02…» */
}

.fighter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    counter-increment: fighter;
    background: linear-gradient(180deg, #1c1230, #0e0a16);
    border: 4px solid var(--mk-purple);
    box-shadow: 8px 8px 0 #000;
    transition: transform .2s steps(4), border-color .2s, box-shadow .2s;
}
/* Номер игрока в углу карточки */
.fighter-card::before {
    content: "ИГРОК " counter(fighter, decimal-leading-zero);
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    padding: 6px 10px;
    font-size: 9px;
    color: #fff;
    background: var(--mk-red);
}
.fighter-card:hover {
    transform: translate(-4px, -4px);
    border-color: var(--mk-red);
    box-shadow: 12px 12px 0 var(--mk-blood), 0 0 30px rgba(193, 18, 31, .6);
}

/* Портрет */
.fighter-portrait {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #000;
    border-bottom: 4px solid var(--mk-purple);
}
.fighter-portrait img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(.7) contrast(1.2) saturate(1.4);
    transition: filter .3s, transform .3s;
}
.fighter-card:hover .fighter-portrait img {
    filter: none;
    transform: scale(1.06);
}
/* Заглушка, если у поста нет миниатюры: «неизвестный боец» */
.fighter-silhouette {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    font-size: 72px;
    color: var(--mk-purple);
    text-shadow: 0 0 20px var(--mk-violet);
    background: radial-gradient(circle, #2a1450, #000);
    animation: mk-flicker 4s infinite;
}

.fighter-info { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.fighter-style { margin: 0; font-size: 9px; color: var(--mk-violet); text-transform: uppercase; }
.fighter-name { margin: 8px 0; font-size: 14px; line-height: 1.6; }
.fighter-name a { color: var(--mk-gold); text-shadow: 2px 2px 0 #000; }
.fighter-name a:hover { color: var(--mk-red); }
.fighter-excerpt { margin: 0 0 8px; font-size: 10px; line-height: 1.9; color: var(--mk-text); }

/* Полоска здоровья (декоративная «сила бойца») */
.health-label { margin: auto 0 4px; font-size: 8px; color: var(--mk-gold); }
.health-bar {
    height: 14px;
    margin-bottom: 14px;
    background: var(--mk-blood);
    border: 3px solid #000;
}
.health-bar span {
    display: block;
    height: 100%;
    width: var(--power, 70%);
    background: linear-gradient(180deg, #ffe66d, var(--mk-gold) 50%, #c98a00);
    transition: width .6s steps(10);
}
.fighter-card:hover .health-bar span { width: 100%; }

.fighter-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 8px;
    color: #a99bc0;
}

/* ==========================================================
   6. ПАГИНАЦИЯ, СООБЩЕНИЯ, КОНТЕНТ ЗАПИСИ
   ========================================================== */
.pagination { margin-top: 50px; }
.pagination .nav-links {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.pagination .page-numbers {
    padding: 12px 16px;
    font-size: 11px;
    color: var(--mk-text);
    background: var(--mk-dark);
    border: 3px solid var(--mk-purple);
}
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
    color: #fff;
    background: var(--mk-red);
    border-color: var(--mk-gold);
}

.arena-message { padding: 60px 20px; text-align: center; background: rgba(10, 6, 18, .75); }
.arena-message h2 { font-size: 22px; color: var(--mk-red); text-shadow: 3px 3px 0 #000; }

.entry-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 28px;
    line-height: 2.2;
    background: rgba(10, 6, 18, .88);
    border: 4px solid var(--mk-purple);
    box-shadow: 8px 8px 0 #000;
}
.entry-content h2, .entry-content h3 { color: var(--mk-gold); line-height: 1.6; }
.entry-content blockquote {
    margin: 24px 0; padding: 16px 20px;
    border-left: 6px solid var(--mk-red);
    background: var(--mk-dark);
}
.entry-content .alignleft  { float: left;  margin: 0 20px 10px 0; }
.entry-content .alignright { float: right; margin: 0 0 10px 20px; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }

/* ==========================================================
   7. ФУТЕР С ДРАКОНОМ И МОЛНИЯМИ
   ========================================================== */
.site-footer {
    position: relative;
    overflow: hidden;
    padding: 50px 20px 30px;
    text-align: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(18, 10, 28, .60));
    border-top: 6px solid var(--mk-purple);
    box-shadow: 0 -6px 0 #2a1450;
}
.footer-dragon {
    width: 150px;
    margin: 0 auto 20px;
    position: relative;
    z-index: 2;
    animation: mk-pulse 3s ease-in-out infinite;
}
.footer-flourish { position: relative; z-index: 2; margin: 0 0 20px; font-size: 11px; color: var(--mk-gold); }
.footer-menu {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
    margin: 0 0 20px; padding: 0; list-style: none;
}
.footer-menu a { font-size: 10px; color: var(--mk-text); text-transform: uppercase; }
.footer-menu a:hover { color: var(--mk-red); }
.footer-copy { position: relative; z-index: 2; margin: 0; font-size: 9px; color: #7d6f94; }
.site-footer .bolt { top: 10px; }
.site-footer .bolt--1 { left: 12%; }
.site-footer .bolt--2 { right: 12%; }

/* Строка с указанием автора сайта */
.footer-credit {
    position: relative;
    z-index: 2;
    margin: 12px 0 0;
    font-size: 9px;
    color: #7d6f94;
}
.footer-credit a {
    color: var(--mk-gold);
    text-shadow: 1px 1px 0 #000;
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: var(--mk-red);
}

/* ==========================================================
   8. АДАПТИВНОСТЬ
   ========================================================== */
@media (max-width: 700px) {
    .menu-toggle { display: block; }
    .arena-menu { display: none; flex-direction: column; }
    .arena-nav.is-open .arena-menu { display: flex; }
    .arena-menu a { border-right: 0; border-bottom: 2px solid rgba(0, 0, 0, .5); }
    .bolt { display: none; }
}

/* Уважаем настройку «уменьшить анимацию» у пользователей */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}