/* css/roadmap.css - Стили для Roadmap (только ScalingSystem) */

/* ============================================
   ШРИФТ BOURBONROUGH
   ============================================ */

@font-face {
    font-family: 'BourbonRough';
    src: url('../assets/founts/BourbonRough.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Применяем шрифт ко всем элементам roadmap */
.roadmap-container,
.roadmap-container * {
    font-family: 'BourbonRough', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================
   ROADMAP CONTAINER
   ============================================ */

.roadmap-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--roadmap-container-padding);
    position: relative;
}

/* Dark overlay for better text visibility */
.roadmap-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   ROADMAP TITLE
   ============================================ */
.roadmap-title {
    font-size: calc(var(--roadmap-title-size) * 1.5);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: calc(var(--roadmap-title-letter-spacing));
    margin-bottom: var(--roadmap-title-margin);
    color: #ffffff;
    text-align: center;
    position: relative;
    z-index: 2;
    text-shadow: 0 calc(var(--roadmap-block-border) * 2) calc(var(--roadmap-block-border) * 4) rgba(0, 0, 0, 0.3);
}

/* Кровавый текст для MAP */
.blood-text {
    color: #ff0000;
    font-weight: 900;
}

/* ============================================
   ROADMAP CONTENT
   ============================================ */
.roadmap-content {
    position: relative;
    width: 100%;
    max-width: var(--roadmap-max-width);
    margin: 0 auto;
}

/* ============================================
   ROADMAP BLOCKS
   ============================================ */
.roadmap-blocks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--roadmap-block-gap) * 1.5);
    position: relative;
    z-index: 1;
}

.roadmap-block {
    background: rgba(10, 15, 25, 0.8);
    backdrop-filter: blur(calc(var(--roadmap-block-shadow-blur) * 1px));
    border: var(--roadmap-block-border) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--roadmap-block-radius);
    padding: var(--roadmap-block-padding);
    text-align: center;
    position: relative;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1 / 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 calc(var(--roadmap-block-border) * 2) var(--roadmap-block-shadow-blur) rgba(0, 0, 0, 0.3);
}

/* HOVER ЭФФЕКТЫ УДАЛЕНЫ */

/* ============================================
   BLOCK ELEMENTS
   ============================================ */

/* Контейнер для иконки */
.block-icon {
    width: var(--roadmap-icon-size);
    height: var(--roadmap-icon-size);
    margin-bottom: var(--roadmap-icon-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* PNG иконки */
.roadmap-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0.9);
    transition: filter 0.3s ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Легкий эффект при наведении только для иконки */
.roadmap-block:hover .roadmap-icon-img {
    filter: brightness(1.1);
}

.block-number {
    position: absolute;
    top: var(--roadmap-number-top);
    right: var(--roadmap-number-right);
    font-size: var(--roadmap-number-size);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    line-height: 1;
}

.block-title {
    font-size: var(--roadmap-block-title-size);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: calc(var(--roadmap-block-title-margin) * 1.5);
    text-transform: uppercase;
    letter-spacing: calc(var(--roadmap-block-title-letter-spacing));
    line-height: 1.3;
}

.block-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--roadmap-status-min-width);
    padding: var(--roadmap-status-padding-y) 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--roadmap-status-radius);
    font-size: var(--roadmap-status-size);
    font-weight: 700;
    letter-spacing: calc(var(--roadmap-status-letter-spacing));
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    border: var(--roadmap-status-border-width) solid rgba(255, 255, 255, 0.2);
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 calc(var(--roadmap-status-border-width) * 2) var(--roadmap-status-shadow-blur) rgba(0, 0, 0, 0.2);
}

/* Выделение для ACTIVE статуса */
.roadmap-block:first-child .block-status {
    background: rgba(255, 0, 0, 0.2);
    color: #ff6b6b;
    border-color: rgba(255, 0, 0, 0.4);
    box-shadow: 0 0 calc(var(--roadmap-block-shadow-blur) * 1px) rgba(255, 0, 0, 0.4), 
                0 calc(var(--roadmap-status-border-width) * 2) var(--roadmap-status-shadow-blur) rgba(0, 0, 0, 0.3);
}

/* ============================================
   ГЛОБАЛЬНЫЕ НАСТРОЙКИ ШРИФТА
   ============================================ */
.roadmap-container * {
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
}