* { box-sizing: border-box; }
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0;
    background: #101522; 
    color: #e7edf5; 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#game {
    display: block;
    margin: 0 auto;
    max-width: 100vw;
    max-height: 100vh;
    background: linear-gradient(#7ec8ff, #bfe7ff 60%, #c7f0ff);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    outline: 2px solid #0c1420;
    border-radius: 8px;
}
.overlay {
    position: fixed; inset: 0; display: grid; place-items: center;
    background: rgba(10,14,22,0.6);
}
.overlay.hidden { display: none; }
.overlay h1, .overlay h2 { margin: 8px 0; }
.overlay p { margin: 0 0 16px 0; opacity: 0.9; }
.overlay button {
    background: #4ade80; color: #0b141f; border: 0; padding: 10px 16px;
    border-radius: 10px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.overlay button:hover { transform: translateY(-1px); }
.rip { width: 72px; height: 72px; image-rendering: pixelated; }

/* Виртуальные кнопки управления для мобильных устройств */
.mobile-controls {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    display: none; /* Скрыто по умолчанию, показывается на мобильных */
    pointer-events: none;
    z-index: 1000;
    padding: 0 20px;
    justify-content: space-between;
    align-items: flex-end;
}

.mobile-controls.active {
    display: flex;
}

.control-left, .control-right, .control-jump {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b141f;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s, background 0.1s, box-shadow 0.1s;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.control-left:active, .control-right:active, .control-jump:active {
    transform: scale(0.85);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.control-jump {
    background: rgba(74, 222, 128, 0.9);
    color: #0b141f;
}

.control-jump:active {
    background: rgba(74, 222, 128, 1);
}

.control-left {
    margin-right: auto;
}

.control-right {
    margin-left: auto;
    margin-right: 20px;
}

.control-jump {
    margin-left: auto;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    #game {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        outline: none;
    }
    
    .mobile-controls {
        display: flex;
    }
    
    .overlay {
        padding: 20px;
    }
    
    .overlay h1 {
        font-size: 24px;
    }
    
    .overlay h2 {
        font-size: 20px;
    }
    
    .overlay p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .control-left, .control-right, .control-jump {
        width: 50px;
        height: 50px;
    }
    
    .control-left svg, .control-right svg, .control-jump svg {
        width: 20px;
        height: 20px;
    }
}

/* Кнопки выбора уровня для мобильных устройств */
.mobile-levels {
    position: fixed;
    top: 70px;                  /* Чуть ниже HUD с монетами и "Уровень" */
    left: 50%;
    transform: translateX(-50%);
    display: none;              /* Показывается только когда JS навесит .active */
    z-index: 1000;
    gap: 6px;
    pointer-events: none;       /* Включим только когда .active */
}

.mobile-levels.active {
    display: flex;
    pointer-events: auto;
}

.mobile-levels button {
    padding: 6px 10px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-levels button:active {
    transform: scale(0.9);
}

/* Чуть компактнее на очень маленьких экранах */
@media (max-width: 480px) {
    .mobile-levels {
        top: 76px; /* ещё чуть ниже, чтобы точно не задевать HUD */
    }
    .mobile-levels button {
        padding: 4px 8px;
        font-size: 12px;
    }
}