@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto_medium.eot');
    src: url('../fonts/roboto_medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto_medium.woff2') format('woff2'),
         url('../fonts/roboto_medium.woff') format('woff'),
         url('../fonts/roboto_medium.ttf') format('truetype'),
         url('../fonts/roboto_medium.svg#RobotoMedium') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto_medium_italic.eot');
    src: url('../fonts/roboto_medium_italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto_medium_italic.woff2') format('woff2'),
         url('../fonts/roboto_medium_italic.woff') format('woff'),
         url('../fonts/roboto_medium_italic.ttf') format('truetype'),
         url('../fonts/roboto_medium_italic.svg#RobotoMediumItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sangha';
    src: url('../fonts/sangha.eot');
    src: url('../fonts/sangha.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sangha.woff2') format('woff2'),
         url('../fonts/sangha.woff') format('woff'),
         url('../fonts/sangha.ttf') format('truetype'),
         url('../fonts/sangha.svg#Sangha') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Takashimura RUS';
    src: url('../fonts/takashimura_rus.eot');
    src: url('../fonts/takashimura_rus.eot?#iefix') format('embedded-opentype'),
         url('../fonts/takashimura_rus.woff2') format('woff2'),
         url('../fonts/takashimura_rus.woff') format('woff'),
         url('../fonts/takashimura_rus.ttf') format('truetype'),
         url('../fonts/takashimura_rus.svg#TakashimuraRUS') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DS Moster';
    src: url('../fonts/ds_moster.eot');
    src: url('../fonts/ds_moster.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ds_moster.woff2') format('woff2'),
         url('../fonts/ds_moster.woff') format('woff'),
         url('../fonts/ds_moster.svg#DSMoster') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

q, blockquote {
    font-family: 'DS Moster', sans-serif;
}

code {
    font-family: 'Takashimura RUS', sans-serif;
    background-color: rgba(212, 175, 55, 0.1);
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    color: rgb(212, 175, 55);
}

body { 
    background-color: rgb(12, 10, 15); 
    background-image: 
        repeating-linear-gradient(45deg, rgb(16, 13, 20) 25%, transparent 25%, transparent 75%, rgb(16, 13, 20) 75%, rgb(16, 13, 20)), 
        repeating-linear-gradient(45deg, rgb(16, 13, 20) 25%, rgb(12, 10, 15) 25%, rgb(12, 10, 15) 75%, rgb(16, 13, 20) 75%, rgb(16, 13, 20));
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    color: rgb(230, 225, 216); 
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgb(12, 10, 15); border-left: 1px solid rgb(75, 0, 130); }
::-webkit-scrollbar-thumb { background: rgb(212, 175, 55); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(200, 35, 51); }

.chart-container {
    position: relative;
    width: 100%;
    min-height: 250px;
}
.panel {
    background: linear-gradient(rgba(21, 18, 28, 0.92), rgba(21, 18, 28, 0.92));
    background-repeat: repeat;
    border: 1px solid rgb(212, 175, 55);
    box-shadow: 0 0 20px rgba(75, 0, 130, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.05);
}
.card {
    background: linear-gradient(rgba(21, 18, 28, 0.92), rgba(21, 18, 28, 0.92));
    background-repeat: repeat;
    border: 1px solid rgb(212, 175, 55);
    box-shadow: 0 0 20px rgba(75, 0, 130, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.05);
}
.panel-gray {
    background: linear-gradient(rgba(35, 35, 40, 0.92), rgba(35, 35, 40, 0.92));
    background-repeat: repeat;
    border: 1px solid rgb(90, 90, 102);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.02);
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.text-color-1 { color: rgb(200, 35, 51); }
.highlight-2 { background-color: rgba(42, 157, 143, 0.3); color: rgb(42, 157, 143); border-radius: 2px; padding: 0 2px;}
.border-changed-1 { border-color: rgb(200, 35, 51) !important; }
.border-changed-2 { border-color: rgb(42, 157, 143) !important; }
.portrait { transition: border-color 0.3s ease, background-color 0.3s ease; }

.tategaki {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.1em;
}

.firefly {
    position: absolute;
    width: 5px; height: 5px;
    background-color: rgb(212, 175, 55);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.8);
    animation: float 6s infinite ease-in-out, pulse 3s infinite ease-in-out alternate;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(15px, -25px); }
    66% { transform: translate(-15px, -15px); }
}

@keyframes float-image {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animate-float-image {
    animation: float-image 4s ease-in-out infinite;
}

@keyframes pulse {
    0% { opacity: 0.3; box-shadow: 0 0 4px 1px rgba(212, 175, 55, 0.4); }
    100% { opacity: 1; box-shadow: 0 0 12px 4px rgba(212, 175, 55, 1); }
}

.ff-1 { left: 15%; top: 10px; animation-delay: 0s, 0.5s; animation-duration: 7s, 4s; }
.ff-2 { left: 35%; top: 30px; animation-delay: 1s, 0s; animation-duration: 5s, 3s; }
.ff-3 { left: 50%; top: 5px; animation-delay: 2s, 1s; animation-duration: 8s, 5s; }
.ff-4 { left: 65%; top: 40px; animation-delay: 0.5s, 2s; animation-duration: 6s, 3.5s; }
.ff-5 { left: 85%; top: 15px; animation-delay: 1.5s, 0.5s; animation-duration: 9s, 4.5s; }
.ff-6 { left: 25%; top: 45px; animation-delay: 3s, 1.5s; animation-duration: 7.5s, 3.8s; }
.ff-7 { left: 75%; top: -10px; animation-delay: 0.2s, 0.8s; animation-duration: 6.5s, 4.2s; }
.ff-8 { left: 5%; top: 25px; animation-delay: 1.2s, 2.1s; animation-duration: 8.5s, 3.2s; }

.yokai-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.yokai-table th, .yokai-table td {
    padding: 1rem;
    border: 1px solid rgba(212, 175, 55, 0.2);
}
.yokai-table th {
    background-color: rgba(31, 27, 41, 0.9);
    color: rgb(212, 175, 55);
    font-family: 'Sangha', sans-serif;
    font-size: 1.25rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.yokai-table tbody tr {
    background-color: rgba(21, 18, 28, 0.6);
    transition: background-color 0.3s ease;
}
.yokai-table tbody tr:hover {
    background-color: rgba(200, 35, 51, 0.15);
}
.yokai-table td {
    color: rgb(230, 225, 216);
    font-size: 1.1rem;
}

/* ==================================================
   ИСПРАВЛЕНИЕ ВЫСОТЫ ДЛЯ ГРАФИКОВ (Chart.js fix)
   ================================================== */
.h-\[250px\] { height: 250px !important; }
.h-\[350px\] { height: 350px !important; }

/* ==================================================
   ВОССТАНОВЛЕНИЕ ПОЛЬЗОВАТЕЛЬСКИХ ЦВЕТОВ (Yokai)
   ================================================== */
.bg-yokai-dark { background-color: rgb(12, 10, 15); }
.bg-yokai-dark\/60 { background-color: rgba(12, 10, 15, 0.6); }
.bg-yokai-dark\/95 { background-color: rgba(12, 10, 15, 0.95); }
.bg-yokai-red { background-color: rgb(200, 35, 51); }
.bg-yokai-panel\/30 { background-color: rgba(31, 27, 41, 0.3); }
.bg-yokai-panel\/50 { background-color: rgba(31, 27, 41, 0.5); }
.bg-yokai-panel\/60 { background-color: rgba(31, 27, 41, 0.6); }
.bg-yokai-panel\/80 { background-color: rgba(31, 27, 41, 0.8); }
.bg-yokai-panel-dark { background-color: rgb(21, 18, 28); }

.text-yokai-gold { color: rgb(212, 175, 55); }
.text-yokai-red { color: rgb(200, 35, 51); }
.text-yokai-teal { color: rgb(42, 157, 143); }
.text-yokai-gray { color: rgb(138, 131, 150); }
.text-yokai-purple { color: rgb(75, 0, 130); }
.text-yokai-dark { color: rgb(12, 10, 15); }

.text-yokai-text\/80 { color: rgba(230, 225, 216, 0.8); }
.text-yokai-text\/90 { color: rgba(230, 225, 216, 0.9); }

.border-yokai-gold\/20 { border-color: rgba(212, 175, 55, 0.2); }
.border-yokai-gold\/30 { border-color: rgba(212, 175, 55, 0.3); }
.border-yokai-gold\/50 { border-color: rgba(212, 175, 55, 0.5); }
.border-yokai-teal\/30 { border-color: rgba(42, 157, 143, 0.3); }
.border-yokai-red { border-color: rgb(200, 35, 51); }
.border-yokai-purple\/40 { border-color: rgba(75, 0, 130, 0.4); }

/* Эффекты при наведении (Hovers) */
.hover\:bg-yokai-gold:hover { background-color: rgb(212, 175, 55); }
.hover\:bg-yokai-panel-dark:hover { background-color: rgb(21, 18, 28); }
.hover\:text-yokai-teal:hover { color: rgb(42, 157, 143); }
.hover\:text-yokai-red:hover { color: rgb(200, 35, 51); }
.hover\:text-yokai-gold:hover { color: rgb(212, 175, 55); }
.hover\:text-yokai-gray:hover { color: rgb(138, 131, 150); }

/* Тени текста (Drop-shadows) */
.drop-shadow-\[2px_2px_0px_theme\(colors\.yokai-red\)\] { filter: drop-shadow(2px 2px 0px rgb(200, 35, 51)); }
.drop-shadow-\[1px_1px_0px_theme\(colors\.yokai-gold\)\] { filter: drop-shadow(1px 1px 0px rgb(212, 175, 55)); }
.drop-shadow-\[0_0_3px_theme\(colors\.yokai-red\)\] { filter: drop-shadow(0 0 3px rgb(200, 35, 51)); }

/* Цвета выделения текста */
::selection { background-color: rgb(42, 157, 143); color: rgb(12, 10, 15); }
.selection\:bg-yokai-teal *::selection { background-color: rgb(42, 157, 143); }
.selection\:text-yokai-dark *::selection { color: rgb(12, 10, 15); }

@media (max-width: 768px) {
    .yokai-table thead {
        display: none;
    }
    .yokai-table, .yokai-table tbody, .yokai-table tr, .yokai-table td {
        display: block;
        width: 100%;
    }
    .yokai-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid rgb(212, 175, 55);
        background: linear-gradient(rgba(21, 18, 28, 0.92), rgba(21, 18, 28, 0.92));
    }
    .yokai-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        border: none;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        padding: 0.75rem 1rem;
    }
    .yokai-table td:last-child {
        border-bottom: none;
    }
    .yokai-table td::before {
        content: attr(data-label);
        font-family: 'Sangha', sans-serif;
        color: rgb(42, 157, 143);
        font-size: 1.1rem;
        text-transform: uppercase;
        text-align: left;
        margin-right: 1rem;
        flex-shrink: 0;
    }
}