html{
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100vw;
    height: 100%;
    min-height: 100dvh;
}

body{
    margin: 0;
    min-height: 100dvh;
    height: 100%;
    font-family: "Press Start 2P", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

#container{
    max-width: 500px;
    margin: 0 auto;
    min-height: 100%;
}

section.content {
    position: relative;
    z-index: 1;
}

.bg-gradient {
    background:
        url('../img/second-step/background.jpg') center center / cover no-repeat fixed;
}
.logo-header {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%) scale(0);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    max-width: 85vw;
    width: auto;
    height: auto;
    object-fit: contain;
}
.logo-header.logo-animate {
    opacity: 1;
    visibility: visible;
    animation: logo-grow 0.6s ease-out forwards;
}
@keyframes logo-grow {
    0%   { transform: translate(-50%, -50%) scale(0); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.logo-header.logo-go-up {
    animation: logo-move-up 0.8s ease-in forwards;
}
@keyframes logo-move-up {
    0%   { top: 50%; transform: translate(-50%, -50%) scale(1); }
    100% { top: 60px; transform: translate(-50%, 0) scale(1); }
}
.logo-header.logo-fixed-top {
    top: 60px;
    transform: translate(-50%, 0) scale(1);
    animation: none;
    opacity: 1;
    visibility: visible;
}
/* first step */
.first-step {
    position: relative;
    min-height: 100dvh;
    height: 100%;
    overflow: hidden;
}
.first-step .absolute-image {
    z-index: 0;
}
.absolute-image {
    position: absolute;
}
.column {
    opacity: 0;
    visibility: hidden;
}
@keyframes pulse-tap-icon {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.tap-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    width: 360px;
    animation: pulse-tap-icon 1.6s ease-in-out infinite;
}
.tap-icon-text{
    font-size: 2.98vh;
    line-height: 5.29vh;
    margin-top: 1vh;
    color:#fff;
}
.column{
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-18%);
    top: 50%;
}
.second-step {
    display: none;
    position: relative;
}
.second-step.visible {
    display: block;
}
.second-step {
    padding-top: 180px;
}
.find-bonus{
    margin-bottom: 25px;
}
.slot-grid-wrapper {
    position: relative;
    z-index: 0;
    width: 320px;
    height: 325px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    padding-top: 0px;
    background-color: transparent;
    overflow: hidden;
}
.slot-grid-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(65deg, #CD765D 36.5%, #561B12 82.2%);
    z-index: -2;
}
.slot-grid-wrapper::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 7.5px;
    background-color: #040612;
    z-index: -1;
}
.static-bonus-amount-wrapper{
    position: absolute;
    left: 0;
    right: 0;
    margin: 20px auto 0;
    z-index: 2;
    width: 320px;
    min-height: 44px;
    border-radius: 8px;
    background-color: transparent;
    overflow: hidden;
    padding: 15px;
    font-size: 16px;
}
.static-bonus-amount-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(65deg, #CD765D 36.5%, #561B12 82.2%);
    z-index: -2;
}
.static-bonus-amount-wrapper::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 7.5px;
    background-color: #040612;
    z-index: -1;
}
.static-bonus-amount-wrapper.hidden {
    display: none;
}
.static-bonus-amount {
    display: none;
    margin: 0;
    height: 100%;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    padding-top: 10px;
}
.static-bonus-amount:before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 7.5px;
    pointer-events: none;
    z-index: -1;
}
.static-bonus-amount .bonus-amount-number {
    padding-right: 6px;
    position: relative;
    z-index: 1;
}
.static-bonus-amount.visible {
    display: flex;
}
.slot-grid {
    position: relative;
    width: 296px;
    height: 296px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
}
.explosion-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 296px;
    height: 296px;
    pointer-events: none;
    z-index: 10;
}
.slot-cell {
    position: absolute;
    width: 56px;
    height: 56px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translate(var(--tx, 0px), var(--ty, 0px));
    transition: transform 0.6s ease, opacity 0.4s ease;
    transition-delay: var(--slot-delay, 0ms);
    will-change: transform, opacity;
}
.explosion-overlay .explosion-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.explosion-overlay .explosion-container svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.explosion-overlay .fire-frame-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.explosion-overlay .fire-frame-container svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bonus-amount {
    display: none;
}
.tap-to-spin, .button-bonus {
    margin-left:auto;
    margin-right:auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85px;
    background: #D10B1D;
    border-radius: 6px;
    color:#fff;
    font-size: 23px;
    animation: pulse-button 1.6s ease-in-out infinite;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.5s ease;
    text-decoration: none;
    max-width: 345px;
}
/* removed button overlay animation (.lirning-button-animation) */
.tap-to-spin .tap-to-spin-text {
    transition: opacity 0.3s ease, color 0.3s ease;
}
.tap-to-spin.hidden {
    opacity: 0;
    pointer-events: none;
}
.tap-to-spin.spinning {
    background: #9B111D;
    color: #C99FA3;
}
.button-description{
    font-size: 5px;
    margin-top: 25px;
    z-index: 2;
    position: relative;
    line-height: 1.5;
}
@keyframes pulse-button{
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.footer{
    position: relative;
    margin-top: 130px;
}


.spins-left-line {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
    text-transform: none;
}
.spins-left-line .count-spins-left-number {
    font-weight: bold;
}
.third-step {
    display: none;
    position: relative;
    z-index: 100;
    min-height: calc(100dvh - 250px);
    padding-top: 250px;
}
.third-step .button-bonus{
    font-size: 18px;;
}
.third-step.third-step-static {
    display: block;
}

.third-step.third-step-static .third-step-summary {
    animation: none;
}

.third-step.third-step-static .column-3-wrapper {
    animation: none;
}

.third-step.third-step-static .footer {
    opacity: 1;
    transition: none;
}
/* Column: from off-screen bottom to final position, then stays */
@keyframes third-step-column-enter {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Summary: enter to translateY(125%), hold 0.5s, then move to translateY(0%) */
@keyframes third-step-summary-enter {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    37.5% {
        opacity: 1;
        transform: translateY(125%);
    }
    68.75% {
        opacity: 1;
        transform: translateY(125%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
.third-step-summary {
    text-align: center;
    margin: 24px 0 16px;
    color: #D10B1D;
    text-shadow: -1px -1px 1px rgba(128, 128, 128, 0.5), 1px 1px 1.5px rgba(128, 128, 128, 0.9);
    z-index: 2;
    position: relative;
    animation: third-step-summary-enter 1.6s ease-out forwards;
}
.third-step-reward-line {
    font-size: 44px;
    font-weight: bold;
    margin-bottom: 10px;
}
.third-step-free-spins-line {
    font-size: 41px;
    opacity: 1;
}
.third-step .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    margin-bottom: 104px;
    min-height: 85px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.third-step .footer.footer-visible {
    opacity: 1;
}
.third-step .column-3-wrapper {
    position: absolute;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: 40vh;
    bottom: 0;
    animation: third-step-column-enter 0.6s ease-out forwards;
}
.third-step .column{
    visibility: visible;
    opacity: 1;
    left: -25%;
    width: 150%;
    top: 25%;
}
.third-step .button-description {
    font-size: 7px;
    z-index: 2;
    position: absolute;
    bottom: 35px;
    width: 88%;
    left: 0;
    right: 0;
    margin: auto;
}
/* Fullscreen money-rain Lottie on third step – below button (z-index 200) so button stays clickable */
.money-rain-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}
.money-rain-frame {
    position: absolute;
    left: 0;
    width: 100%;
    height: 24%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.money-rain-frame--top {
    top: 0;
}
.money-rain-frame--bottom {
    bottom: 0;
}
.money-rain-frame svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================== ADAPTIVE: narrow width (< 400px) ==================== */
@media (max-width: 400px) {
    #container {
        padding: 0 8px;
        max-width: 100%;
    }
    .logo-header {
        max-width: 60vw;
    }
    .logo-header.logo-fixed-top {
        top: 10px;
    }
    .second-step,
    .third-step {
        padding-top: 110px;
    }
    .tap-icon {
        width: min(100%, 320px);
        max-width: 320px;
    }
    .slot-grid-wrapper {
        width: 100%;
        max-width: 320px;
    }
    /* Статик бонус — в потоке, чтобы кнопка не наезжала */
    .static-bonus-amount-wrapper {
        position: relative;
        width: 100%;
        max-width: 320px;
        margin: 16px auto 0;
    }
    .footer {
        margin-top: 24px;
    }
    .tap-to-spin, .button-bonus {
        max-width: 100%;
        width: 100%;
    }
    .third-step-reward-line {
        font-size: 28px;
    }
    .third-step-free-spins-line {
        font-size: 22px;
    }
}

/* ==================== ADAPTIVE: short height ==================== */
@media (max-height: 700px) {
    .second-step,
    .third-step {
        padding-top: 14px;
    }
    .slot-grid-wrapper {
        margin-left: auto;
        margin-right: auto;
    }
    .static-bonus-amount-wrapper {
        margin-top: 10px;
    }
    .footer {
        margin-top: 40px;
    }
    .tap-to-spin, .button-bonus {
        min-height: 65px;
        font-size: 20px;
    }
    .static-bonus-amount {
        font-size: 22px;
    }
    .button-description {
        font-size: 6px;
        margin-top: 24px;
    }
    .third-step .footer {
        margin-top: 40px;
    }
    .third-step-reward-line {
        font-size: 36px;
    }
    .third-step-free-spins-line {
        font-size: 24px;
    }
    .third-step .button-description {
        bottom: 24px;
    }
    .third-step .column-3-wrapper {
        height: 32vh;
    }
}

/* Узкий И низкий экран — приоритет узкой ширины */
@media (max-width: 400px) and (max-height: 700px) {
    .second-step,
    .third-step {
        padding-top: 110px;
    }
}

/* Very short viewport: scale only game steps (2 & 3), keep first step full screen */
@media (max-height: 600px) {
    body {
        overflow-y: hidden;
    }
    #container {
        height: 100dvh;
        overflow: hidden;
    }
    .second-step.visible,
    .third-step {
        transform: scale(0.88);
        transform-origin: top center;
        min-height: calc(100dvh / 0.88);
        height: calc(100dvh / 0.88);
    }
}

/* Landscape: logo fits in short viewport height */
@media (orientation: landscape) {
    .logo-header {
        max-height: 35vh;
    }
    section.content:has(.second-step.visible) .logo-header.logo-fixed-top {
        visibility: hidden;
    }
}

/* Landscape + small height: first step fills screen; scale only game steps */
@media (orientation: landscape) and (max-height: 500px) {
    body {
        overflow-y: hidden;
    }
    #container {
        height: 100dvh;
        overflow: hidden;
    }
    .logo-header {
        max-height: 28vh;
    }
    .tap-to-spin {
        max-width: 290px;
    }
    .second-step.visible,
    .third-step {
        transform: scale(0.65);
        transform-origin: top center;
        min-height: calc(100dvh / 0.65);
        height: calc(100dvh / 0.65);
    }
}