@media (max-width: 620px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        margin: 0;
        background: #000000;
        overflow-x: hidden;
    }

    body {
        min-height: 100vh;
    }

  

    .vote-page {
        position: relative;
        width: min(402px, 100vw);
        min-width: 0;
        min-height: 0;
        margin: 0 auto;
        padding: 0;
        overflow: visible;
        background: #000000;
    }

    .vote-content {
        position: relative;
        width: 402px;
        max-width: none;
        height: auto;
        min-height: 1270.9353px;
        margin: 0;
        padding: 234.277008px 0 0;
        background: #000000;
    }

   

    .vote-header {
        position: absolute;
        top: 53px;
        left: 0;
        z-index: 1000;
        width: 402px;
        height: 99.277008px;
        background: #000000;
        pointer-events: none;
    }

    .proplan-logo {
        position: absolute;
        top: 20px;
        left: 137px;
        width: 128px;
        height: 59.277008px;
        transform: none;
        object-fit: contain;
    }

  

    .vote-title {
        position: absolute;
        top: 181.277008px;
        left: 94.5px;
        width: 213px;
        height: 24px;
        margin: 0;
        transform: none;
        overflow: visible;
        white-space: nowrap;
        text-align: center;
        font-family: "Antenna Purina", Arial, sans-serif;
        font-size: 0;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0;
        color: #ffffff;
    }

    .vote-title > span,
    .vote-title > strong {
        display: none;
    }

    .vote-title::after {
        content: "Votează câștigătorul!";
        font-size: 20.116182px;
        font-weight: 400;
        line-height: 24px;
    }



    .cats-grid {
        position: relative;
        top: auto;
        left: auto;
        width: 356px;
        height: auto;
        margin: 0 23px 53px;
        padding: 0;
        transform: none;
        display: grid;
        grid-template-columns: repeat(2, 168.755814px);
        grid-template-rows: none;
        grid-auto-rows: 232.414581px;
        column-gap: 18px;
        row-gap: 18px;
        align-items: start;
        justify-items: start;
        background: #000000;
    }

    

    .cat-card,
    .cat-card:hover,
    .cat-card:focus-within {
        position: relative;
        z-index: 1;
        width: 168.755814px;
        height: 232.414581px;
        overflow: visible;
        outline: none;
    }

    .cat-visual,
    .cat-card:hover .cat-visual,
    .cat-card:focus-within .cat-visual {
        left: 0;
        top: 0;
        width: 168.755814px;
        height: 232.414581px;
        border: 0;
        border-radius: 9.222968px;
        background: #0c0c0c;
        overflow: hidden;
        transition: none;
        will-change: auto;
    }

    .cat-photo {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

  
    .cat-bottom,
    .cat-card:hover .cat-bottom,
    .cat-card:focus-within .cat-bottom {
        left: 0;
        top: 151.339722px;
        width: 168.755798px;
        height: 81.074852px;
        background:
            linear-gradient(
                to bottom,
                rgba(12, 12, 12, 0) 0%,
                rgba(12, 12, 12, 1) 79.652%,
                #0c0c0c 100%
            );
        transition: none;
    }

  
    .cat-info,
    .cat-card:hover .cat-info,
    .cat-card:focus-within .cat-info {
        left: 12.011089px;
        top: 24.622733px;
        width: 53.449347px;
        height: 44.441030px;
        transition: none;
    }

    .cat-label,
    .cat-card:hover .cat-label,
    .cat-card:focus-within .cat-label {
        left: 0;
        top: 0;
        font-size: 9.157px;
        line-height: 10.811px;
        font-weight: 400;
        transition: none;
    }

    .cat-number,
    .cat-card:hover .cat-number,
    .cat-card:focus-within .cat-number {
        left: 0;
        top: 10.811px;
        font-size: 28.826614px;
        line-height: 33.63px;
        font-weight: 100;
        letter-spacing: -0.07em;
        transition: none;
    }

    
    .vote-button,
    .cat-card:hover .vote-button,
    .cat-card:focus-within .vote-button {
        left: 120.711448px;
        top: 33.030496px;
        width: 36.033268px;
        height: 36.033268px;
        padding: 0;
        border: 0.600554px solid rgba(255, 255, 255, 0.22);
        border-radius: 4.804436px;
        box-shadow: 0 2.402218px 4.383px rgba(0, 0, 0, 0.41);
        transition: none;
    }

    .vote-button-text,
    .cat-card:hover .vote-button-text,
    .cat-card:focus-within .vote-button-text {
        display: none;
        opacity: 0;
    }

    .vote-star,
    .cat-card:hover .vote-star,
    .cat-card:focus-within .vote-star {
        left: 6.606099px;
        top: 6.606099px;
        width: 22.821070px;
        height: 21.923px;
        transition: none;
    }

    
    .cat-card:hover,
    .cat-card:focus-within {
        z-index: 1;
    }

    

    body.confirm-open {
        overflow: hidden;
    }

    .confirm-overlay {
        position: fixed;
        inset: 0;
        z-index: 5000;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: rgba(36, 36, 36, 0.70);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

 

    .confirm-window,
    .confirm-overlay.is-open .confirm-window {
        position: relative;
        flex: 0 0 402px;
        display: block;
        width: 402px;
        height: 673px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 25px;
        background: #000000;
        transform: none;
        transition: none;
    }

   
    .confirm-medal {
        left: 53.678650px;
        top: 45.5px;
        z-index: 20;
        width: 100.042648px;
        height: 152.622604px;
        transform: rotate(5.9deg);
        filter: drop-shadow(0 4px 13.7px rgba(0, 0, 0, 0.51));
    }

   
    .confirm-image {
        position: absolute;
        left: 103.5px;
        top: 92px;
        width: 195px;
        height: 273px;
        border-radius: 13.220339px;
        box-shadow: 0 7.932203px 19.830509px rgba(0, 0, 0, 0.25);
        overflow: hidden;
    }

    .confirm-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

  
    .confirm-panel {
        position: absolute;
        inset: 0;
        z-index: 10;
        display: block;
        width: 402px;
        height: 673px;
        padding: 0;
        background: transparent;
        border-radius: 25px;
        pointer-events: none;
    }

    .confirm-title {
        position: absolute;
        left: 122px;
        top: 31px;
        width: 158px;
        height: 12px;
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 12px;
        color: rgba(255, 255, 255, 0.41);
    }

    .confirm-number {
        position: absolute;
        left: 153px;
        top: 385px;
        width: 96px;
        height: 38px;
        margin: 0;
        font-size: 51.775284px;
        font-weight: 100;
        line-height: 38px;
        letter-spacing: -0.07em;
        color: #ffffff;
    }


    .confirm-bottom {
        position: absolute;
        left: 31px;
        top: 472px;
        width: 340px;
        height: 170px;
        display: flex;
        flex-direction: column;
        gap: 27px;
        pointer-events: auto;
    }

    .confirm-warning {
        width: 340px;
        height: 26px;
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 13px;
        overflow: hidden;
    }

    .confirm-actions {
        width: 340px;
        height: 117px;
        display: flex;
        flex-direction: column;
        gap: 13px;
    }

    .confirm-back {
        width: 340px;
        height: 53px;
        padding: 0 22px;
        gap: 10px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 9px;
        background: #1f1f1f;
        box-shadow: 0 4px 7.3px rgba(0, 0, 0, 0.41);
        font-size: 16px;
        font-weight: 500;
    }

    .confirm-back img {
        width: 20px;
        height: 19px;
    }

    .confirm-vote {
        width: 340px;
        height: 51px;
        padding: 0 22px;
        gap: 10px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 9px;
        background:
            linear-gradient(
                110deg,
                #a38752 0%,
                #deb972 47.596%,
                #a38752 100%
            );
        box-shadow: 0 4px 7.3px rgba(0, 0, 0, 0.41);
        font-size: 16px;
        font-weight: 500;
    }

    .confirm-vote img {
        width: 20px;
        height: 19px;
    }

    

    .success-viewport {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #000000;
    }

    .success-canvas {
        position: relative;
        width: 402px;
        height: 874px;
        flex: 0 0 auto;
        background: #000000;
        transform-origin: center center;
    }

   
    .success-logo-frame {
        position: absolute;
        left: 0;
        top: 0;
        width: 402px;
        height: 134.277008px;
        display: block;
    }

    .success-logo {
        position: absolute;
        left: 137px;
        top: 55px;
        width: 128px;
        height: 59.277008px;
        object-fit: contain;
    }

    
    .success-content {
        position: absolute;
        left: 0;
        top: 198.277008px;
        width: 402px;
        height: 443px;
        display: block;
        margin: 0;
        padding: 0;
    }

    .success-medal {
        position: absolute;
        left: 128.5px;
        top: 77px;
        width: 145px;
        height: 221px;
        margin: 0;
        filter: drop-shadow(0 4px 13.7px rgba(0, 0, 0, 0.51));
    }

    .success-info {
        position: static;
        width: 402px;
        height: 443px;
        display: block;
        margin: 0;
        padding: 0;
    }

    .success-title {
        position: absolute;
        left: 97px;
        top: 0;
        width: 208px;
        height: 48px;
        margin: 0;
        padding: 0;
        font-size: 20.116182px;
        font-weight: 400;
        line-height: 1;
        text-align: center;
        overflow: visible;
    }

   
    .success-vote {
        position: absolute;
        left: 0;
        top: 327px;
        width: 402px;
        height: 116px;
        display: block;
        margin: 0;
        padding: 0;
    }

    .success-photo-frame {
        position: absolute;
        left: 89px;
        top: 0;
        width: 114px;
        height: 116px;
        border-radius: 7.748184px;
        box-shadow: 0 4.64891px 11.62228px rgba(0, 0, 0, 0.25);
    }

    .success-vote-info {
        position: absolute;
        left: 217px;
        top: 26.5px;
        width: 96px;
        height: 63px;
        display: flex;
        flex-direction: column;
        gap: 13px;
        margin: 0;
        padding: 0;
    }

    .success-vote-label {
        width: 81px;
        height: 12px;
        margin: 0;
        font-size: 16px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.41);
    }

    .success-cat-number {
        width: 96px;
        height: 38px;
        margin: 0;
        font-size: 51.775284px;
        font-weight: 100;
        line-height: 38px;
        letter-spacing: -0.07em;
    }
}


@media (max-width: 401px) {
    .vote-page {
        width: 402px;
        margin-left: 50%;
        transform: translateX(-50%) scale(var(--mobile-canvas-scale, 1));
        transform-origin: top center;
    }

    .confirm-window,
    .confirm-overlay.is-open .confirm-window {
        transform: scale(var(--mobile-canvas-scale, 1));
        transform-origin: bottom center;
    }
}