@font-face {
    font-family: "Montserrat";
    src:url("montserrat_reg.ttf") format("woff");
}	

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
}

:root {
    --primary: #da2078; 
    --accent: #da2078;   
    --glass: rgba(0, 0, 0, 0.85);
}

body, html {
    width: 100%; 
    min-height: 100%; 
    font-family: 'Montserrat', sans-serif;
    background: #000 url('../images/bg.jpg') no-repeat center center fixed;
    background-size: cover; 
    color: #fff;
}

.modal-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.97); 
    z-index: 9999;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(15px);
}

.modal-content {
    width: 85%; 
    max-width: 380px; 
    background: #0a0a0a; 
    padding: 35px 20px;
    border-radius: 25px; 
    text-align: center; 
    border: 1px solid var(--primary);
    box-shadow: 0 0 30px #da20773d;
}

.modal-title { 
    font-size: 26px; 
    color: var(--accent); 
    margin-bottom: 12px; 
    font-weight: 900; 
    text-transform: uppercase;
}

.modal-text { 
    font-size: 18px; 
    color: #bbb; 
    margin-bottom: 25px; 
}

.modal-buttons { 
    display: flex; 
    gap: 15px; 
}

.modal-btn { 
    flex: 1; 
    padding: 18px; 
    border: none; 
    border-radius: 12px; 
    font-weight: 800; 
    cursor: pointer; 
    font-size: 15px;
}

.btn-no { background: #222; color: #888; order: 1; }
.btn-yes { 
    background: var(--primary); 
    color: #000; 
    box-shadow: 0 5px 15px #da20773d; 
    order: 2; 
}

.step { 
    display: none; 
    min-height: 100vh; 
    justify-content: center; 
    align-items: center; 
    padding: 15px; 
}

.step.active { 
    display: flex; 
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.box-card {
    background: var(--glass); 
    padding: 25px 18px; 
    border-radius: 35px;
    border: 1px solid rgba(255,255,255,0.1); 
    backdrop-filter: blur(20px);
    width: 100%; 
    max-width: 440px; 
    text-align: center;
    box-shadow: 0 15px 45px rgba(0,0,0,0.7);
}

.creative-wrapper {
    width: 100%; 
    max-width: 340px; 
    max-height: 500px;
    aspect-ratio: 9 / 16;
    margin: 0 auto 15px auto; 
    border-radius: 20px; 
    overflow: hidden;
    border: 3px solid var(--accent); 
    box-shadow: 0 0 35px var(--accent);
    position: relative; 
    background: #000;
}

.creative-wrapper video { 
    width: 100%; 
    max-height: 500px;
    object-fit: cover; 
    display: block; 
}

.title { 
    font-weight: 900; 
    font-size: 32px; 
    text-shadow: 0 0 15px var(--accent); 
    margin-bottom: 8px; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.main-text { 
    font-size: 18px; 
    margin-bottom: 20px; 
    color: #eee; 
}

.subtitle { 
    font-size: 1.5rem; 
    margin: 20px auto 20px; 
    font-weight: 800; 
    text-transform: uppercase; 
}

.rules { 
    text-align: left; 
    margin-bottom: 25px; 
    background: rgba(255, 255, 255, 0.04); 
    padding: 15px; 
    border-radius: 15px; 
}

.rules p { 
    font-size: 18px; 
    margin: 10px 0; 
    border-left: 3px solid var(--accent); 
    padding-left: 12px; 
    color: #ddd; 
}

.btn {
    background: #000; 
    color: var(--primary); 
    border: 2px solid var(--primary);
    padding: 18px; 
    font-size: 1.2rem; 
    font-weight: 900; 
    border-radius: 15px;
    cursor: pointer; 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.btn:last-child {
    margin-bottom: 0px;
}

.btn:active {
    transform: scale(0.96);
}

.btn span:first-child {
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 100%; 
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary)); 
    animation: neonMove 2s linear infinite;
}

@keyframes neonMove {
    0% { left: -100%; }
    100% { left: 100%; }
}

.final { 
    text-decoration: none; 
    display: block; 
    width: 100%; 
}

@media (max-height: 780px) {
    .creative-wrapper { max-width: 270px; } 
    .title { font-size: 26px; }
    .box-card { padding: 15px; }
}

@media (max-width: 360px) {
    .title { font-size: 24px; }
    .btn { font-size: 1.2rem; }
}