/* ===== RESET & FONTS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
a { text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Black.woff2") format("woff2"), url("../fonts/Montserrat-Black.woff") format("woff");
    font-weight: 900; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Bold.woff2") format("woff2"), url("../fonts/Montserrat-Bold.woff") format("woff");
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.woff2") format("woff2"), url("../fonts/Montserrat-Regular.woff") format("woff");
    font-weight: 400; font-display: swap;
}

/* ===== LANG ===== */
html .en, html .pt, html .es { display: none; }
html.en .en { display: block; }
html.pt .pt { display: block; }
html.es .es { display: block; }
/* spans in buttons */
.spin-btn span, .popup-cta-btn span { display: none; }
html.en .spin-btn span.en, html.en .popup-cta-btn span.en { display: inline; }
html.pt .spin-btn span.pt, html.pt .popup-cta-btn span.pt { display: inline; }
html.es .spin-btn span.es, html.es .popup-cta-btn span.es { display: inline; }

/* ===== BASE ===== */
html, body { height: 100%; font-family: "Montserrat", sans-serif; background: #012b8a; -webkit-font-smoothing: antialiased; }

.wrapper { width: 100%; min-height: 100vh; position: relative; }

/* ===== SCREENS ===== */
.screen { display: none; width: 100%; min-height: 100vh; position: relative; }
.screen.active { display: block; }

/* ===== WHEEL SCREENS BG ===== */
.screen-1, .screen-3 {
    background-image: url('../images/main-bg-mobile.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
@media (min-width: 600px) {
    .screen-1, .screen-3 {
        background-image: url('../images/main-bg.webp');
    }
}

.container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px;
}

/* ===== TITLE BOX ===== */
.title-box {
    width: 88%;
    max-width: 360px;
    margin: 30px auto 0;
    background: rgba(18, 40, 90, 0.80);
    border-radius: 14px;
    padding: 15px 18px;
    text-align: center;
}
.title-box .title {
    font-size: clamp(20px, 6vw, 27px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.28;
    text-shadow: 0 2px 10px rgba(0, 10, 60, 0.7);
    letter-spacing: 0.3px;
}

/* ===== WHEEL AREA ===== */
.wheel-wrap {
    position: relative;
    width: clamp(280px, 82vw, 340px);
    height: clamp(280px, 82vw, 340px);
    margin: 28px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer light-ring (mix-blend-mode:screen) */
.wheel__layer-1 {
    position: absolute;
    width: 118%;
    height: 118%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/wheel-layer-1.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}
/* Blue ring behind spinner */
.wheel__layer-2 {
    position: absolute;
    width: 106%;
    height: 106%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(180deg, #1475ff 0%, #005fcc 100%);
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 0 30px rgba(0, 100, 255, 0.5) inset;
}
/* Sheen overlay */
.wheel__layer-3 {
    position: absolute;
    width: 110%;
    height: 110%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/wheel-layer-3.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 5;
}
/* Arrow at top */
.wheel__layer-4 {
    position: absolute;
    width: 44px;
    height: 40px;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/wheel-arr.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 10;
    pointer-events: none;
}

/* ===== SPINNER ===== */
.wheel__spinner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url('../images/spinner.png');
    background-size: 100% 100%;
    z-index: 3;
}

/* ===== SECTOR LABELS ===== */
/* Each sector is absolutely positioned over the full spinner circle,
   rotated to point toward its slice, text counter-rotated to read upright */
.sector {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 14px;
}
.sector span {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(10px, 3.2vw, 14px);
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.sector.orange span { color: #FFB800; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }

/* Rotate sectors around center */
.s1 { transform: rotate(0deg); }   .s1 span { transform: rotate(0deg); }
.s2 { transform: rotate(60deg); }  .s2 span { transform: rotate(-60deg); }
.s3 { transform: rotate(120deg); } .s3 span { transform: rotate(-120deg); }
.s4 { transform: rotate(180deg); } .s4 span { transform: rotate(-180deg); }
.s5 { transform: rotate(240deg); } .s5 span { transform: rotate(-240deg); }
.s6 { transform: rotate(300deg); } .s6 span { transform: rotate(-300deg); }

/* ===== SPIN BUTTON ===== */
.spin-btn {
    position: absolute;
    bottom: -72px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(210px, 60vw, 250px);
    height: 58px;
    background: linear-gradient(180deg, #1BCCFF 0%, #009DD6 100%);
    border: none;
    border-radius: 13px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 5vw, 22px);
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 20px rgba(0, 170, 230, 0.55), 0 2px 0 rgba(0,60,100,0.3);
    animation: pulse-spin 1.5s infinite ease-in-out;
    transition: opacity 0.3s;
}
.spin-btn:active { opacity: 0.85; }
.spin-btn.disabled { pointer-events: none; animation: none; opacity: 0.6; }

@keyframes pulse-spin {
    0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 5px 20px rgba(0,170,230,0.55); }
    50%       { transform: translateX(-50%) scale(1.05); box-shadow: 0 7px 30px rgba(0,210,255,0.75); }
}

/* ===== WHEEL SPIN ANIMATIONS ===== */
/* Wheel 1 (FS) idle: slight rock */
@keyframes idle1 {
    0%, 100% { transform: rotate(-4deg); }
    50%       { transform: rotate(4deg); }
}
/* Wheel 2 (USD) starts at 180 deg, same rock */
@keyframes idle2 {
    0%, 100% { transform: rotate(176deg); }
    50%       { transform: rotate(184deg); }
}
/* Spin 1 → lands on sector 1 (600 FS) — 3 full rotations + land at 0 */
@keyframes spin1 {
    0%   { transform: rotate(-4deg); }
    65%  { transform: rotate(1130deg); }
    82%  { transform: rotate(1118deg); }
    100% { transform: rotate(1125deg); }
}
/* Spin 2 → lands on sector 1 (800 USD) */
@keyframes spin2 {
    0%   { transform: rotate(180deg); }
    65%  { transform: rotate(1310deg); }
    82%  { transform: rotate(1298deg); }
    100% { transform: rotate(1305deg); }
}
/* After-spin idles */
@keyframes after1 {
    0%, 100% { transform: rotate(1121deg); }
    50%       { transform: rotate(1129deg); }
}
@keyframes after2 {
    0%, 100% { transform: rotate(1301deg); }
    50%       { transform: rotate(1309deg); }
}

.anim-idle1   { animation: idle1  2s ease-in-out infinite; }
.anim-idle2   { animation: idle2  2s ease-in-out infinite; }
.anim-spin1   { animation: spin1  3.5s cubic-bezier(0.15, 0.8, 0.25, 1) forwards; }
.anim-spin2   { animation: spin2  3.5s cubic-bezier(0.15, 0.8, 0.25, 1) forwards; }
.anim-after1  { animation: after1 2s ease-in-out infinite; }
.anim-after2  { animation: after2 2s ease-in-out infinite; }

/* ===== POPUP SCREENS ===== */
.screen-2, .screen-4 {
    background-image: url('../images/main-bg-mobile.webp');
    background-size: cover;
    background-position: center top;
}

.popup-overlay {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px 50px;
}

.popup-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Popup image - full Figma screen design rendered as image */
.popup-bg-img {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 40px rgba(0, 100, 230, 0.45), 0 0 0 2px rgba(0, 160, 255, 0.25);
}
.popup-bg-img img {
    width: 100%;
    height: auto;
    display: none;
}
html.en .popup-bg-img img.en,
html.pt .popup-bg-img img.pt,
html.es .popup-bg-img img.es { display: block; }

/* CTA button floated below popup card */
.popup-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82%;
    height: 58px;
    margin-top: -29px;
    position: relative;
    z-index: 5;
    background: linear-gradient(180deg, #1BCCFF 0%, #009DD6 100%);
    border: none;
    border-radius: 13px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 5vw, 22px);
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,170,230,0.55);
    animation: pulse-popup 1.5s infinite ease-in-out;
    text-decoration: none;
}
.popup-cta-btn:active { opacity: 0.85; }

@keyframes pulse-popup {
    0%, 100% { transform: scale(1); box-shadow: 0 5px 20px rgba(0,170,230,0.55); }
    50%       { transform: scale(1.04); box-shadow: 0 7px 30px rgba(0,210,255,0.75); }
}

/* ===== TABLET CENTERING ===== */
@media (min-width: 500px) {
    .screen-1 .container,
    .screen-3 .container {
        max-width: 480px;
        margin: 0 auto;
    }
    .popup-overlay {
        max-width: 480px;
        margin: 0 auto;
    }
    .screen-2, .screen-4 {
        display: flex;
        justify-content: center;
    }
}