/* Brawl Stars roulette — maxpro */
/* Brawl Stars themed styling */

:root {
    /* Responsive sizing variables based on viewport dimensions to prevent crop */
    --wheel-size: min(480px, 52vh, 82vw);
    --prize-radius: calc(var(--wheel-size) * 0.335); /* Shifted further outwards to clear center star */
    --prize-size: calc(var(--wheel-size) * 0.15);    /* Scaled down to prevent rim overflow */
    --prize-font-size: calc(var(--wheel-size) * 0.046);
    --wheel-margin: 10px;
    --stroke-width: calc(var(--wheel-size) * 0.01);
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    /* Force Brawl Stars Cyrillic-compatible font Fredoka on absolutely all text elements */
    font-family: 'Fredoka', 'Lilita One', sans-serif !important;
    font-weight: 900;
}

input,
textarea,
select,
.plate-input,
.code-native-input {
    user-select: text;
    -webkit-user-select: text;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #0b0728; /* Solid background color behind the layer */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Independent background layer for scroll/rotate animations */
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-image {
    position: absolute;
    width: 320vmax; /* Increased from 250vmax to fully cover corners during rotation */
    height: 320vmax;
    background-image: url('/static/roulette_bg.webp');
    background-repeat: repeat;
    background-size: 836px 470px; /* Scaled to integer dimensions to prevent seams */
    background-position: center center;
    animation: scrollBg 25s linear infinite;
    transition: background-image 0.6s ease-in-out;
}

/* Background scrolling animation upwards (by moving image positions) */
@keyframes scrollBg {
    0% {
        background-position: center 0px;
    }
    100% {
        background-position: center -470px; /* Shift by integer height */
    }
}

/* Won state - Switch background to bg2.png, zoom in, and rotate slowly */
.background-layer.won-state .bg-image {
    background-image: url('/static/roulette_bg2.webp');
    background-repeat: repeat;
    background-size: 1000px 563px; /* Zoomed in pattern */
    animation: rotateBg 40s linear infinite;
}

@keyframes rotateBg {
    0% {
        transform: rotate(0deg) scale(2.2); /* Increased from 1.6 to 2.2 for mobile */
    }
    100% {
        transform: rotate(360deg) scale(2.2);
    }
}

@media (min-width: 768px) {
    .background-layer.won-state .bg-image {
        background-size: 1600px 900px; /* Zoomed in pattern on desktop/tablets */
    }
    @keyframes rotateBg {
        0% {
            transform: rotate(0deg) scale(3.2); /* Extra zoom on desktop/tablets to prevent visible corners */
        }
        100% {
            transform: rotate(360deg) scale(3.2);
        }
    }
}

/* Vignette overlay for cinematic effect */
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 2;
    pointer-events: none;
}

/* App container - Vertically centered, strictly bounded to prevent any viewport crop */
.app-container {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    gap: 20px;
}

@media (max-width: 600px) {
    .app-container {
        padding: 10px;
        gap: 12px;
    }
}

/* Header */
.header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.logo {
    height: auto;
    width: min(500px, 26vh, 90vw); /* Increased by 30% from min(380px, 20vh, 70vw) */
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
    animation: floatLogo 4s ease-in-out infinite alternate;
}

@keyframes floatLogo {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-5px) scale(1.02);
    }
}

/* Roulette Section */
.roulette-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--wheel-margin) 0;
    transition: opacity 0.3s ease;
}

/* Pulsing glow behind the wheel */
.wheel-glow {
    position: absolute;
    width: calc(var(--wheel-size) + 80px);
    height: calc(var(--wheel-size) + 80px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.4) 0%, rgba(255, 128, 0, 0.12) 50%, rgba(0, 0, 0, 0) 70%);
    filter: blur(15px);
    z-index: -1;
    animation: pulseGlow 3s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Wheel Wrapper */
.wheel-wrapper {
    position: relative;
    width: var(--wheel-size);
    height: var(--wheel-size);
}

/* Stationary Wheel Container Frame */
.wheel-container {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

/* Inner Rotating Drum - sized slightly smaller to prevent bleeding out from the border */
.wheel-drum {
    position: absolute;
    top: 7%;
    left: 7%;
    width: 86%;
    height: 86%;
    border-radius: 50%;
    z-index: 3;
    overflow: hidden;
    transform: rotate(0deg);
}

/* Dynamic sector colors - 7 equal sectors */
.wheel-sectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        #ff9c00 0deg 51.43deg,      /* Sector 0: Orange-Gold */
        #00c2ff 51.43deg 102.86deg,  /* Sector 1: Light Blue */
        #0060ff 102.86deg 154.29deg, /* Sector 2: Dark Blue */
        #a100ff 154.29deg 205.71deg, /* Sector 3: Purple */
        #ff003c 205.71deg 257.14deg, /* Sector 4: Red */
        #00c22b 257.14deg 308.57deg, /* Sector 5: Green */
        #ffeb00 308.57deg 360deg     /* Sector 6: Yellow */
    );
}

/* Wheel frame layout (remains fixed on top!) */
.wheel-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

/* Prize items container inside the rotating drum */
.wheel-prizes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

/* Single Prize layout rotated radially */
.prize-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--prize-size);
    height: var(--prize-size);
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.prize-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.prize-qty {
    position: absolute;
    bottom: -15px;
    font-size: var(--prize-font-size);
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    -webkit-text-stroke: var(--stroke-width) #000000;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #000000; /* Solid black shadow */
}

/* Footer */
.footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}


/* --- SLANTED BRAWL STARS BUTTON STYLE (1-in-1 replication) --- */

.brawl-skew-button {
    position: relative;
    transform: skewX(-6deg); /* Slants container to the right */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
    cursor: pointer;
    outline: none;
}

/* Counter-skew content so text remains upright and vertical */
.brawl-btn-content {
    transform: skewX(6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(12px, 2vw);
    width: 100%;
    height: 100%;
    color: #ffffff;
    -webkit-text-stroke: 3.5px #000000; /* Crisp integer-based stroke outline */
    paint-order: stroke fill;
    filter: drop-shadow(0 5.5px 0 #000000); /* GPU-rasterized solid black silhouette shadow (fixes WebKit skew gaps) */
}

/* Shimmer Glint/Shine Animation (sweeps diagonal white strip) */
.brawl-btn-shimmer {
    overflow: hidden;
}

.brawl-btn-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    animation: glintEffect 1s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes glintEffect {
    0% {
        left: -150%;
    }
    40% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

/* Yellow "ИГРАТЬ" (Play) Button Style for Spin Button */
.spin-button {
    font-size: min(28px, 3.8vh, 6vw); /* Increased from min(24px, 3.2vh, 5.5vw) for bolder appearance */
    background: linear-gradient(to bottom, #ffe800 0%, #ff9f00 100%);
    border: min(4px, 0.55vh) solid #000000;
    border-radius: min(12px, 1.8vh);
    padding: min(11px, 1.5vh) min(38px, 8vw);
    /* Inset shadows: white top highlight, dark orange bottom bevel. Outer solid black 3D shadow */
    box-shadow: 
        inset 0 min(4px, 0.5vh) 0 rgba(255, 255, 255, 0.45),
        inset 0 min(-8px, -1.1vh) 0 #924300,
        0 min(8px, 1.1vh) 0 #000000;
}

/* Light yellow top-right highlight corner cut */
.spin-button::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: min(20px, 2.8vh);
    height: min(20px, 2.8vh);
    background: #fffa9e;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    pointer-events: none;
    z-index: 1;
}

.spin-button:hover:not(:disabled) {
    background: linear-gradient(to bottom, #ffe444 0%, #ffb311 100%);
}

.spin-button:active:not(:disabled) {
    transform: skewX(-6deg) translateY(min(4px, 0.5vh)) scale(0.95);
    box-shadow: 
        inset 0 min(4px, 0.5vh) 0 rgba(255, 255, 255, 0.45),
        inset 0 min(-4px, -0.55vh) 0 #924300,
        0 min(4px, 0.55vh) 0 #000000;
}

.spin-button:disabled {
    filter: grayscale(0.7) brightness(0.8);
    cursor: not-allowed;
    box-shadow: 
        inset 0 min(4px, 0.5vh) 0 rgba(255, 255, 255, 0.2),
        inset 0 min(-8px, -1.1vh) 0 #444444,
        0 min(8px, 1.1vh) 0 #000000;
    transform: skewX(-6deg);
}

/* Green "ЗАБРАТЬ" (Claim) Button Style */
.brawl-green-button {
    font-size: min(28px, 3.8vh, 6vw); /* Increased from min(24px, 3.2vh, 5.5vw) for bolder appearance */
    background: linear-gradient(to bottom, #00df00 0%, #00bc00 100%);
    border: min(4px, 0.55vh) solid #000000; /* Solid black border */
    border-radius: min(12px, 1.8vh);
    padding: min(11px, 1.5vh) min(44px, 8vw);
    /* Inset shadows: white top highlight, dark green bottom bevel. Outer solid black 3D shadow */
    box-shadow: 
        inset 0 min(4px, 0.5vh) 0 rgba(255, 255, 255, 0.45),
        inset 0 min(-8px, -1.1vh) 0 #006000,
        0 min(8px, 1.1vh) 0 #000000;
}

/* Light green top-right highlight corner cut */
.brawl-green-button::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: min(20px, 2.8vh);
    height: min(20px, 2.8vh);
    background: #a3ff7a;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    pointer-events: none;
    z-index: 1;
}

.brawl-green-button:hover {
    background: linear-gradient(to bottom, #10f010 0%, #00cd00 100%);
}

.brawl-green-button:active {
    transform: skewX(-6deg) translateY(min(4px, 0.5vh)) scale(0.95);
    box-shadow: 
        inset 0 min(4px, 0.5vh) 0 rgba(255, 255, 255, 0.45),
        inset 0 min(-4px, -0.55vh) 0 #006000,
        0 min(4px, 0.55vh) 0 #000000;
}

/* Mobile responsive styles for buttons to make them look sharp and solid */
@media (max-width: 600px) {
    .spin-button,
    .brawl-green-button {
        font-size: 19px;
        padding: 9px 24px;
        border-radius: 10px;
        border-width: 3px;
        box-shadow: 
            inset 0 3px 0 rgba(255, 255, 255, 0.45),
            inset 0 -5px 0 #924300,
            0 6px 0 #000000;
    }
    .brawl-green-button {
        box-shadow: 
            inset 0 3px 0 rgba(255, 255, 255, 0.45),
            inset 0 -5px 0 #006000,
            0 6px 0 #000000;
    }
    .spin-button::before,
    .brawl-green-button::before {
        width: 14px;
        height: 14px;
    }
    .spin-button:active:not(:disabled),
    .brawl-green-button:active {
        transform: skewX(-6deg) translateY(3px) scale(0.95);
        box-shadow: 
            inset 0 3px 0 rgba(255, 255, 255, 0.45),
            inset 0 -2px 0 #924300,
            0 3px 0 #000000;
    }
    .brawl-green-button:active {
        box-shadow: 
            inset 0 3px 0 rgba(255, 255, 255, 0.45),
            inset 0 -2px 0 #006000,
            0 3px 0 #000000;
    }
    .spin-button:disabled {
        box-shadow: 
            inset 0 3px 0 rgba(255, 255, 255, 0.2),
            inset 0 -5px 0 #444444,
            0 6px 0 #000000;
    }
    /* Fixed integer pixel outline and shadow for mobile to prevent subpixel rendering glitches */
    .brawl-btn-content {
        -webkit-text-stroke: 2.2px #000000;
        filter: drop-shadow(0 3.5px 0 #000000); /* GPU-rasterized solid black silhouette shadow */
    }
}


/* --- STATE SWITCHING LOGIC (Morphing layout when prize is won) --- */

.app-container.state-win .header,
.app-container.state-win .roulette-section,
.app-container.state-win .footer {
    display: none; /* Hide default roulette content */
}

/* Win Screen (Direct main content, no modal card overlay) */
.win-screen {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.app-container.state-win .win-screen {
    display: flex;
}

.win-step {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.win-step.active {
    display: flex;
}

/* Large Prize Display in Step 1 */
.large-prize-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: min(35px, 4vh);
}

.large-prize-icon {
    width: min(230px, 32vh, 55vw);
    height: min(230px, 32vh, 55vw);
    object-fit: contain;
    filter: drop-shadow(0 min(12px, 1.5vh) min(20px, 2.5vh) rgba(0, 0, 0, 0.65));
    animation: floatPrize 2.5s ease-in-out infinite alternate;
}

@keyframes floatPrize {
    0% {
        transform: translateY(0) rotate(-3deg);
    }
    100% {
        transform: translateY(-12px) rotate(3deg);
    }
}

.large-prize-name {
    font-size: min(32px, 4.5vh, 7.5vw);
    color: #ffffff;
    -webkit-text-stroke: min(5.5px, 0.7vh) #000000;
    paint-order: stroke fill;
    text-shadow: 0 5px 0 #000000; /* Crisp solid black shadow */
    margin-top: min(20px, 2.5vh);
    max-width: 450px;
    text-align: center;
    text-transform: uppercase;
}

/* Gilded Semi-Transparent Plate for Phone and Code entry */
.brawl-plate {
    background: rgba(0, 0, 0, 0.85); /* Semi-transparent black background */
    border: min(5px, 0.7vh) solid #ffcc00; /* Yellow border */
    /* Glowing yellow outline as requested */
    box-shadow: 
        0 0 min(25px, 3.5vh) rgba(255, 204, 0, 0.6), 
        inset 0 0 min(15px, 2vh) rgba(255, 204, 0, 0.25);
    border-radius: 24px;
    width: min(390px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: min(35px, 4.5vh) min(20px, 4vw);
    text-align: center;
    position: relative;
    animation: scaleUpPlate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleUpPlate {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.plate-title {
    font-size: min(28px, 3.8vh, 6.5vw);
    color: #ffcc00;
    -webkit-text-stroke: min(4px, 0.5vh) #000000;
    paint-order: stroke fill;
    text-shadow: 0 4px 0 #000000; /* Solid black shadow */
    margin-bottom: min(15px, 2vh);
    text-transform: uppercase;
}

.plate-title.success-color {
    color: #00e676;
}

.plate-instruction {
    font-size: min(17px, 2.2vh, 4.2vw);
    color: #ffffff;
    -webkit-text-stroke: min(2.5px, 0.35vh) #000000;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #000000; /* Solid black shadow */
    margin-bottom: min(20px, 3vh);
    line-height: 1.45;
    max-width: 320px;
    text-align: center;
}

/* Plate input elements */
.plate-input {
    width: min(300px, 100%);
    font-size: min(22px, 3vh, 5vw);
    color: #ffffff;
    background: rgba(0, 0, 0, 0.65);
    border: min(3.5px, 0.5vh) solid #ffcc00;
    border-radius: 12px;
    padding: min(12px, 1.6vh) min(20px, 4vw);
    text-align: center;
    outline: none;
    margin-bottom: min(20px, 3vh);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-text-stroke: min(2.5px, 0.35vh) #000000;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #000000; /* Solid black shadow */
}

.plate-input:focus {
    border-color: #00e676;
    box-shadow: 0 0 min(12px, 1.5vh) rgba(0, 230, 118, 0.5);
}

.plate-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    -webkit-text-stroke: 0px transparent;
}

/* Shake animation for input errors */
.input-error {
    animation: shake 0.4s ease;
    border-color: #ff003c !important;
    box-shadow: 0 0 min(12px, 1.5vh) rgba(255, 0, 60, 0.5) !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* Success Trophy Icon */
.success-icon-wrapper {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
    margin-bottom: 15px;
}

.success-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
    animation: floatPrize 2.5s ease-in-out infinite alternate;
}

/* --- Iteration 10: Custom Brawl Stars Keyboard, Cells, and Popup --- */

.highlight-yellow {
    color: #ffe600;
}

.highlight-blue {
    color: #00c2ff;
}

.code-plate {
    padding-bottom: min(25px, 3.5vh) !important;
}

.code-title {
    font-size: min(24px, 3.2vh, 5.5vw) !important;
    max-width: 340px;
    margin-bottom: 8px !important;
}

.code-sent-to {
    font-size: min(15px, 2vh, 3.8vw);
    color: #ffffff;
    margin-bottom: min(15px, 2vh);
    text-shadow: 0 1.5px 0 #000000;
    -webkit-text-stroke: 1.2px #000000;
    paint-order: stroke fill;
}

/* 6-Digit Cells container */
.code-cells-container {
    display: flex;
    justify-content: center;
    gap: min(8px, 2vw);
    margin: min(12px, 1.8vh) 0 min(18px, 2.5vh);
    width: 100%;
    max-width: 320px;
    position: relative;
    cursor: text;
}

.code-native-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    opacity: 1;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    font-size: 16px;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}

.code-cell {
    flex: 1;
    max-width: 44px;
    height: min(48px, 6.5vh);
    background: rgba(0, 0, 0, 0.65);
    border: 3px solid #ffe600; /* Yellow default */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(22px, 3vh);
    color: #ffffff;
    pointer-events: none;
    -webkit-text-stroke: 1.5px #000000;
    paint-order: stroke fill;
    text-shadow: 0 2px 0 #000000;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.code-cell.active {
    border-color: #00c2ff; /* Glowing blue outline for active cell */
    box-shadow: 0 0 min(12px, 1.5vh) rgba(0, 194, 255, 0.85);
}

.code-digits-instruction {
    font-size: min(13px, 1.8vh);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: min(12px, 1.8vh);
    text-shadow: 0 1.5px 0 #000000;
    -webkit-text-stroke: 1px #000000;
    paint-order: stroke fill;
}

/* Info helper button */
.code-info-btn {
    background: none;
    border: none;
    outline: none;
    color: #00c2ff;
    font-size: min(14px, 1.9vh);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: min(18px, 2.2vh);
    padding: 6px 12px;
    border-radius: 20px;
    transition: background-color 0.15s ease;
}

.code-info-btn:hover {
    background-color: rgba(0, 194, 255, 0.12);
}

.info-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00c2ff;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 1px 0 #000000;
}

/* Resend Countdown container */
.resend-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 320px;
    padding: 0 4px;
    font-size: min(13px, 1.8vh);
}

.resend-timer {
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1.5px 0 #000000;
    -webkit-text-stroke: 1px #000000;
    paint-order: stroke fill;
}

.resend-timer span {
    color: #ffe600;
}

.resend-btn {
    background: none;
    border: none;
    outline: none;
    color: #ffe600;
    cursor: pointer;
    font-size: min(13px, 1.8vh);
    text-decoration: underline;
    transition: opacity 0.15s ease, transform 0.15s ease;
    padding: 4px 8px;
    font-weight: 900;
    -webkit-text-stroke: 1px #000000;
    paint-order: stroke fill;
    text-shadow: 0 1.5px 0 #000000;
}

.resend-btn:disabled {
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
    text-decoration: none;
    text-shadow: none;
    -webkit-text-stroke: 0px transparent;
}

/* "Где найти код?" help popup modal overlay */
.info-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.82);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 10px;
}

.info-popup-overlay.active {
    display: flex;
}

.info-popup-plate {
    width: min(390px, 92vw);
    animation: scaleUpPlate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.popup-instruction-list {
    display: flex;
    flex-direction: column;
    gap: min(16px, 2.2vh);
    margin-bottom: min(25px, 3.5vh);
    text-align: left;
    width: 100%;
}

.instruction-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.instruction-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffe600;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 900;
    border: 2.5px solid #000000;
    box-shadow: 0 2.5px 0 #000000;
    flex-shrink: 0;
}

.instruction-text {
    font-size: min(14.5px, 2vh);
    color: #ffffff;
    line-height: 1.45;
    text-shadow: 0 1.5px 0 #000000;
    -webkit-text-stroke: 1.2px #000000;
    paint-order: stroke fill;
}

.instruction-text strong {
    color: #ffe600;
}

/* Phone prefix country selector styles */
.phone-input-wrapper {
    display: flex;
    gap: min(8px, 1.2vw);
    width: 100%;
    max-width: 100%;
    margin-bottom: min(20px, 3vh);
    position: relative;
    align-items: stretch;
}

.brawl-flag-dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(6px, 1vw);
    background: rgba(0, 0, 0, 0.65);
    border: min(3.5px, 0.5vh) solid #ffcc00;
    border-radius: 12px;
    padding: 0 min(12px, 2.5vw);
    font-size: min(18px, 2.5vh);
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    position: relative;
    -webkit-text-stroke: min(2px, 0.3vh) #000000;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #000000;
    font-family: 'Lilita One', 'Fredoka', sans-serif;
    font-weight: 900;
}

.brawl-flag-dropdown svg {
    width: min(16px, 2.2vh);
    height: min(16px, 2.2vh);
    fill: currentColor;
}

.dropdown-arrow {
    display: inline-block;
    transition: transform 0.2s;
}

.brawl-countries-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: rgba(0, 0, 0, 0.95);
    border: min(3px, 0.4vh) solid #ffcc00;
    border-radius: 12px;
    box-shadow: 0 min(8px, 1vh) 0 rgba(0,0,0,0.5);
    z-index: 100;
    min-width: 180px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 0;
}

.brawl-countries-list.hide {
    display: none;
}

.brawl-country-item {
    padding: min(10px, 1.4vh) min(16px, 2.5vw);
    display: flex;
    gap: 8px;
    cursor: pointer;
    align-items: center;
    font-size: min(16px, 2.2vh);
    color: #ffffff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    text-align: left;
    transition: background 0.15s;
    -webkit-text-stroke: min(2px, 0.3vh) #000000;
    paint-order: stroke fill;
}

.brawl-country-item:hover {
    background: rgba(255, 204, 0, 0.3);
}

.phone-input-wrapper .plate-input {
    flex: 1;
    width: 0;
    min-width: 0;
    margin-bottom: 0;
    font-size: min(17px, 4.4vw);
    padding: min(10px, 1.4vh) min(8px, 2vw);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
    font-weight: 700;
    font-family: 'Fredoka', system-ui, sans-serif !important;
}

@media (max-width: 600px) {
    .brawl-plate {
        width: min(390px, 96vw);
        padding: min(28px, 4vh) min(14px, 3.5vw);
    }

    .phone-input-wrapper {
        width: 100%;
        gap: 6px;
    }

    .brawl-flag-dropdown {
        padding: 0 8px;
        font-size: 14px;
        gap: 4px;
        flex-shrink: 0;
    }

    .brawl-flag-dropdown svg {
        width: 12px;
        height: 12px;
        margin-left: 2px !important;
    }

    .phone-input-wrapper .plate-input {
        font-size: 15px;
        padding: 10px 6px;
    }
}

@media (max-width: 360px) {
    .phone-input-wrapper .plate-input {
        font-size: 14px;
        padding: 9px 4px;
        letter-spacing: 0;
    }

    .brawl-flag-dropdown {
        padding: 0 6px;
        font-size: 13px;
    }
}

.brawl-green-button:disabled {
    filter: grayscale(0.7) brightness(0.8);
    cursor: not-allowed;
    pointer-events: none;
}