* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Палитра редизайна (тёмная тема, стиль игры-референса). */
:root{
    --bg: #1a1a1a;
    --bg-card: #2c2c2c;
    --bg-card-hover: #353535;
    --accent: #4caf50;
    --accent-bright: #00e676;
    --accent-border: #ffd54f;
    /* Кнопки-действия: градиент сверху вниз (верх -> низ), почти два цвета
       с лёгкой плавностью перехода. Крупная / маленькая / маленькая активная. */
    --btn-green: linear-gradient(180deg, #3d654a 0%, #3d654a 45%, #2f5a3d 55%, #2f5a3d 100%);
    --btn-green-sm: linear-gradient(180deg, #385642 0%, #385642 45%, #2a4a35 55%, #2a4a35 100%);
    --btn-green-sm-active: linear-gradient(180deg, #476a51 0%, #476a51 45%, #3a5f45 55%, #3a5f45 100%);
    --text: #ffffff;
    --text-muted: #b0bec5;
    --text-faint: #8a94a0;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 24px;
    --border-subtle: rgba(255,255,255,0.12);
    --border-faint: rgba(255,255,255,0.07);
}
html {
    overflow-x: hidden;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg);
    /* НЕ ставить overflow-x: hidden вместе с html: при обоих браузер делает
       body scroll-контейнером нулевой высоты, и абсолютно спозиционированные
       .page клипаются — экран становится чёрным. */
}
/* Лёгкая тень текста на всех кнопках. */
button{
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.container{
    width: 100%;
    position: relative;
    /* overflow: hidden; */
}
.page{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    padding-top: 20px;
    background-color: var(--bg);
    background-image: url('../assets/menu-bg.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.page.active {
    transform: translateX(0);
}
.page.exit-left {
    transform: translateX(-100%);
}
.page.enter-right {
    transform: translateX(100%);
}
.page.exit-right {
    transform: translateX(100%);
}
.page.enter-left {
    transform: translateX(-100%);
}
#test-buttons{
    position: absolute;
}