/* ==================== GIFT ROAD GAME ==================== */

#screenGiftRoad {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 12px 80px 12px;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: radial-gradient(ellipse at bottom, #1a1a2e 0%, #08090d 100%);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

#screenGiftRoad.active { display: flex !important; }

.giftroad-container {
    width: 100%;
    max-width: 426px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
}

/* Частицы — слой 1 */
#screenGiftRoad::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 
        57px 45px #FEB021, 134px 289px #F4701F, 256px 512px #FFD700, 378px 89px #FEB021, 412px 345px #F4701F,
        89px 678px #FFD700, 156px 432px #FEB021, 234px 765px #F4701F, 345px 123px #FFD700, 467px 567px #FEB021,
        23px 890px #F4701F, 178px 234px #FFD700, 290px 654px #FEB021, 321px 78px #F4701F, 445px 345px #FFD700,
        67px 123px #FEB021, 198px 456px #F4701F, 276px 789px #FFD700, 389px 234px #FEB021, 456px 678px #F4701F,
        12px 345px #FFD700, 145px 567px #FEB021, 234px 890px #F4701F, 367px 123px #FFD700, 478px 456px #FEB021,
        90px 234px #F4701F, 167px 678px #FFD700, 289px 345px #FEB021, 345px 890px #F4701F, 423px 123px #FFD700,
        45px 789px #FEB021, 178px 90px #F4701F, 256px 456px #FFD700, 312px 678px #FEB021, 445px 234px #F4701F,
        78px 567px #FFD700, 189px 890px #FEB021, 278px 123px #F4701F, 356px 456px #FFD700, 467px 789px #FEB021,
        34px 345px #F4701F, 156px 678px #FFD700, 234px 90px #FEB021, 389px 567px #F4701F, 412px 890px #FFD700,
        67px 456px #FEB021, 198px 789px #F4701F, 290px 234px #FFD700, 345px 567px #FEB021, 478px 90px #F4701F,
        89px 678px #FFD700, 145px 123px #FEB021, 267px 456px #F4701F, 323px 789px #FFD700, 456px 345px #FEB021,
        23px 567px #F4701F, 178px 890px #FFD700, 256px 234px #FEB021, 334px 678px #F4701F, 445px 123px #FFD700,
        56px 456px #FEB021, 189px 789px #F4701F, 278px 345px #FFD700, 367px 678px #FEB021, 423px 90px #F4701F,
        90px 567px #FFD700, 145px 234px #FEB021, 234px 890px #F4701F, 312px 456px #FFD700, 456px 789px #FEB021,
        12px 123px #F4701F, 178px 678px #FFD700, 289px 345px #FEB021, 345px 567px #F4701F, 478px 234px #FFD700;
    animation: particles-up 60s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* Частицы — слой 2 */
#screenGiftRoad::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 
        57px 45px #FEB021, 134px 289px #F4701F, 256px 512px #FFD700, 378px 89px #FEB021, 412px 345px #F4701F,
        89px 678px #FFD700, 156px 432px #FEB021, 234px 765px #F4701F, 345px 123px #FFD700, 467px 567px #FEB021,
        23px 890px #F4701F, 178px 234px #FFD700, 290px 654px #FEB021, 321px 78px #F4701F, 445px 345px #FFD700,
        67px 123px #FEB021, 198px 456px #F4701F, 276px 789px #FFD700, 389px 234px #FEB021, 456px 678px #F4701F,
        12px 345px #FFD700, 145px 567px #FEB021, 234px 890px #F4701F, 367px 123px #FFD700, 478px 456px #FEB021,
        90px 234px #F4701F, 167px 678px #FFD700, 289px 345px #FEB021, 345px 890px #F4701F, 423px 123px #FFD700,
        45px 789px #FEB021, 178px 90px #F4701F, 256px 456px #FFD700, 312px 678px #FEB021, 445px 234px #F4701F,
        78px 567px #FFD700, 189px 890px #FEB021, 278px 123px #F4701F, 356px 456px #FFD700, 467px 789px #FEB021,
        34px 345px #F4701F, 156px 678px #FFD700, 234px 90px #FEB021, 389px 567px #F4701F, 412px 890px #FFD700,
        67px 456px #FEB021, 198px 789px #F4701F, 290px 234px #FFD700, 345px 567px #FEB021, 478px 90px #F4701F;
    animation: particles-up 60s linear infinite;
    animation-delay: -30s;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

@keyframes particles-up {
    from { transform: translateY(100vh); }
    to { transform: translateY(-100px); }
}

.giftroad-scene {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* ==================== ДОРОГА (ВЕРТИКАЛЬНАЯ) ==================== */

.giftroad-road-wrapper {
    width: 100%;
    max-width: 340px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.giftroad-road {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: rgba(18, 18, 31, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 300px;
    height: 55vh;
    max-height: 450px;
    min-height: 320px;
    justify-content: center;
}

/* ==================== СТАРТ ==================== */

.road-start {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    order: 6;
    min-height: 40px;
}

/* ==================== ЯЧЕЙКА ==================== */

.road-cell {
    width: 100%;
    flex: 1;
    background: transparent;
    border-top: 2px dashed rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    box-sizing: border-box;
    min-height: 40px;
}

/* Пройденная ячейка — зеленоватый фон */
.road-cell.passed-cell {
    background: rgba(95, 245, 122, 0.12) !important;
    border-top: 2px dashed rgba(95, 245, 122, 0.4) !important;
    box-shadow: inset 0 0 20px rgba(95, 245, 122, 0.08);
}

/* Проигрышная ячейка — красноватый фон */
.road-cell.fail-cell {
    background: rgba(255, 50, 50, 0.15) !important;
    border-top: 2px dashed rgba(255, 50, 50, 0.5) !important;
    box-shadow: inset 0 0 20px rgba(255, 50, 50, 0.1);
    animation: fail-pulse 0.6s ease-in-out;
}

/* Pepe на проигрышной ячейке — красная тень */
.road-cell.fail-cell.pepe-here {
    background: rgba(255, 50, 50, 0.2) !important;
    box-shadow: 0 0 30px rgba(255, 50, 50, 0.4);
}

.road-cell.fail-cell.pepe-here .pepe-icon {
    filter: drop-shadow(0 0 14px rgba(255, 50, 50, 0.8));
}

/* Анимация пульсации для проигрыша */
@keyframes fail-pulse {
    0% { background: rgba(255, 50, 50, 0.05); }
    50% { background: rgba(255, 50, 50, 0.25); }
    100% { background: rgba(255, 50, 50, 0.15); }
}

/* Анимация падения Pepe */
.road-cell.pepe-fall .pepe-icon {
    animation: pepe-drop 0.5s ease-in forwards;
}

@keyframes pepe-drop {
    0% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; }
    100% { transform: translateX(-50%) scale(0.3); opacity: 0; }
}

/* Ячейка с Pepe — активная */
.road-cell.pepe-here {
    background: rgba(255, 215, 0, 0.08);
    border-top-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.2);
}

.pepe-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.6));
    animation: pepe-bounce 0.3s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes pepe-bounce {
    0% { transform: translateX(-50%) scale(0.5); }
    50% { transform: translateX(-50%) scale(1.15); }
    100% { transform: translateX(-50%) scale(1); }
}

.cell-multiplier {
    color: rgba(255, 255, 255, 0.35);
    font-size: 18px;
    font-weight: 700;
    transition: opacity 0.3s;
}

.road-cell.pepe-here .cell-multiplier {
    opacity: 0;
}

/* Пройденная ячейка — множитель тусклее */
.road-cell.passed-cell .cell-multiplier {
    color: rgba(95, 245, 122, 0.4);
}

/* Проигрышная ячейка — множитель красный */
.road-cell.fail-cell .cell-multiplier {
    color: rgba(255, 50, 50, 0.5);
}

.fail-x {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.2);
    font-size: 40px;
    font-weight: 700;
    pointer-events: none;
    z-index: 1;
}

/* ==================== БЛОК СТАВОК ==================== */

.giftroad-bet-section {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    margin-top: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.giftroad-actions {
    display: flex;
    gap: 8px;
}

.giftroad-step-btn {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #f0883e, #f5c842, #ffd700);
    color: #0a0f1a;
    border: 1px solid #f5c84260;
    box-shadow: 0 0 25px rgba(240, 136, 62, 0.4);
    transition: all 0.25s;
    -webkit-tap-highlight-color: transparent;
}

.giftroad-step-btn:active { transform: scale(0.98); }
.giftroad-step-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.giftroad-cashout-btn {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #5ff57a;
    color: #0a0f1a;
    border: 1px solid #5ff57a60;
    box-shadow: 0 0 25px rgba(95, 245, 122, 0.4);
    transition: all 0.25s;
    -webkit-tap-highlight-color: transparent;
}

.giftroad-cashout-btn:active { transform: scale(0.98); }
.giftroad-cashout-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Оверлей результата */
.giftroad-result-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 24px 32px;
    z-index: 10;
    border: 2px solid rgba(255,215,0,0.3);
    animation: result-fade-in 0.3s ease;
    white-space: nowrap;
}

.giftroad-result-text {
    color: #FFD700;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255,215,0,0.6), 0 0 40px rgba(255,215,0,0.3);
    animation: result-pop 0.4s ease-out;
}

@keyframes result-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes result-pop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ==================== ЧАСТИЦЫ РАСПЫЛЕНИЯ ==================== */

.gr-particle {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    border-radius: 50%;
    will-change: transform, opacity;
}

@keyframes gr-particle-fly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    30% {
        transform: translate(calc(var(--vx) * 30px), calc(var(--vy) * 30px - 15px)) scale(1.3);
        opacity: 0.9;
    }
    60% {
        transform: translate(calc(var(--vx) * 60px), calc(var(--vy) * 60px + 10px)) scale(0.7);
        opacity: 0.5;
    }
    100% {
        transform: translate(calc(var(--vx) * 100px), calc(var(--vy) * 100px + 40px)) scale(0);
        opacity: 0;
    }
}