* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
}

:root {
    --transition-speed: 0.3s;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-hover: rgba(0, 0, 0, 0.15);
}

body {
    background: var(--bg-darker);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text);
    overflow-x: hidden;
}

.container {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--bg);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Desktop styles */
@media (min-width: 768px) {
    .container {
        max-width: 420px;
        min-height: auto;
        border-radius: 24px;
        overflow: hidden;
        margin: 16px;
        height: auto;
    }
    
    body {
        background: var(--bg-darker);
    }
}

.header {
    padding: 20px;
    text-align: center;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

[dir="rtl"] .header {
    text-align: center;
}

.logo {
    height: 40px;
    transition: transform var(--transition-speed);
}

.logo:hover {
    transform: scale(1.05);
}

.game-image {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    display: block;
    border-radius: 0;
    position: relative;
}

/* Overlay for game image */
.game-image-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
}

.game-image-overlay .icon {
    width: 14px;
    height: 14px;
}

@media (min-width: 768px) {
    .game-image {
        height: auto;
    }
}

.content {
    padding: 32px 24px;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

@media (min-width: 768px) {
    h1 {
        font-size: 42px;
    }
}

h1 span {
    color: var(--primary);
    display: inline-block;
    position: relative;
}

h1 span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--primary);
    opacity: 0.3;
    border-radius: 2px;
}

.game-description {
    color: #b0b8c1;
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.6;
    max-width: 540px;
}

/* Trust badges */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #b0b8c1;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
}

.trust-badge .icon {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

/* Countdown timer */
.countdown-timer {
    background: rgba(255, 75, 75, 0.1);
    border: 1px solid rgba(255, 75, 75, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.countdown-timer .icon {
    width: 16px;
    height: 16px;
}

.timer-value {
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Social proof */
.social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    gap: 15px;
}

.rating {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stars {
    color: #FFD700;
    letter-spacing: -2px;
}

.rating-count {
    font-size: 14px;
    color: #b0b8c1;
}

.users-count {
    font-size: 14px;
    color: #b0b8c1;
    display: flex;
    align-items: center;
    gap: 5px;
}

.users-count .icon {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.phone-input {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    direction: ltr !important;
    position: relative;
    z-index: 1;
}

.country-code {
    width: 80px;
    padding: 16px;
    background: var(--input-bg);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    color: var(--text);
    direction: ltr !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.country-code:focus {
    outline: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.country-code.static {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.phone-number {
    flex: 1;
    padding: 16px;
    background: var(--input-bg);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    color: var(--text);
    direction: ltr !important;
    text-align: left !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.phone-number:focus {
    outline: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.submit-btn {
    width: 100%;
    padding: 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), filter var(--transition-speed);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(255, 75, 75, 0.3);
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    animation: pulse-button 2s infinite, glow-button 3s infinite alternate;
}

@keyframes pulse-button {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(255, 75, 75, 0.3);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 6px 24px rgba(255, 75, 75, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(255, 75, 75, 0.3);
    }
}

@keyframes glow-button {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.1);
    }
    100% {
        filter: brightness(1);
    }
}

.submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.2));
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: -1;
}

.submit-btn:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.15);
    box-shadow: 0 8px 20px rgba(255, 75, 75, 0.6);
    animation-play-state: paused;
}

.submit-btn:hover::after {
    transform: translateX(100%);
}

.submit-btn:active {
    transform: translateY(-1px);
}

.submit-btn:disabled {
    opacity: 0.7;
    transform: none;
    cursor: not-allowed;
    box-shadow: none;
}

.pricing-info {
    font-size: 12px;
    color: #b0b8c1;
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
}

.pin-input {
    display: none;
    margin-top: 20px;
    width: 100%;
}

.pin-input.visible {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: slideDown 0.4s ease-out;
}

.pin-input h3 {
    margin-bottom: 0;
}

.pin-input .pin-field {
    margin-bottom: 0;
}

/* Ensure common elements (social proof, countdown, trust badges) are displayed.
   Their visibility is primarily controlled by the visibility of their parent (.content)
   and the hiding of the #phoneForm via JavaScript.
   The HTML structure now places them after both forms.
*/

/* If the testimonial should be hidden when the PIN form is up, keep this rule */
.pin-input.visible ~ .testimonial {
    display: none;
}

/* The .social-proof, .countdown-timer, .trust-badges should naturally be visible
   if their parent .content is visible and they are not explicitly hidden.
   We can add margin to space them from the form above them.
*/

/* Ensure these common elements are displayed correctly after the active form */
#phoneForm ~ .social-proof,
#phoneForm ~ .countdown-timer,
#phoneForm ~ .trust-badges,
.pin-input.visible ~ .social-proof,
.pin-input.visible ~ .countdown-timer,
.pin-input.visible ~ .trust-badges {
    display: flex; /* Assuming they are flex containers */
    flex-direction: row; /* Or column, depending on their internal layout */
    justify-content: center; /* Or as needed */
    align-items: center; /* Or as needed */
    margin-top: 24px; /* Default for countdown and trust badges */
    /* Add any other necessary styling to ensure they behave as blocks below the form */
}

/* Adjust margin-top for .social-proof */
#phoneForm ~ .social-proof {
    margin-top: 4px; /* Minimal margin to bring it very close to pricing-info */
}
.pin-input.visible ~ .social-proof {
    margin-top: 32px; /* Keep or adjust spacing for PIN page */
    /* display: flex; and other flex properties are inherited or set by .social-proof general rule */
}


/* General styling for these elements, ensuring they are flex containers */
.social-proof {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* from original styling */
    /* margin-bottom is handled by the margin-top of the next element or general flow */
}
.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* from original styling */
    /* Specific background and border are already defined elsewhere */
}
.trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* from original styling */
    flex-wrap: wrap; /* from original styling */
}

/* The .pin-input h3 rule at line 448 already handles the h3 inside pin-input.
   The duplicate rule below can be removed or merged if different.
   Assuming the one at 448 is the one to keep or adjust.
   If this one (originally at 473) is specific, it needs to be reviewed.
   For now, let's assume the earlier one is sufficient.
*/
/*
.pin-input h3 {
    margin-bottom: 16px;
    font-size: 18px;
    color: var(--primary);
    text-align: center;
    font-weight: 600;
}
*/

.pin-field {
    width: 100%;
    padding: 16px;
    background: var(--input-bg);
    border: none;
    border-radius: 12px;
    font-size: 18px;
    color: var(--text);
    margin-bottom: 20px;
    direction: ltr !important;
    text-align: left !important;
    letter-spacing: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.pin-field:focus {
    outline: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Styles for SMS auto-reading */
.pin-field.sms-reading {
    background-color: rgba(var(--primary-rgb, 255, 75, 75), 0.05);
    border: 1px solid rgba(var(--primary-rgb, 255, 75, 75), 0.2);
    animation: pulse-field 1.5s infinite;
}

.pin-field.sms-filled {
    background-color: rgba(39, 174, 96, 0.05);
    border: 1px solid rgba(39, 174, 96, 0.2);
    animation: highlight-field 1s ease-out;
}

@keyframes pulse-field {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 255, 75, 75), 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--primary-rgb, 255, 75, 75), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 255, 75, 75), 0);
    }
}

@keyframes highlight-field {
    0% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(39, 174, 96, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
    }
}

/* Status message styles */
.status-message {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    text-align: center;
    display: none;
    animation: fadeIn 0.4s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    position: relative;
    z-index: 10;
}

.status-message.success {
    background-color: rgba(39, 174, 96, 0.15);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.status-message.error {
    background-color: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.2);
}

/* Make sure error messages are displayed at the top of the PIN input */
.pin-input .status-message {
    order: -1; /* Move to the top of the flex container */
    margin-top: 0;
    margin-bottom: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

select option {
    background: var(--bg);
    color: var(--text);
}

input::placeholder {
    color: #666;
}

[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] input.phone-number,
[dir="rtl"] input.pin-field,
[dir="rtl"] select.country-code {
    text-align: left !important;
}

input[type="tel"] {
    -moz-appearance: textfield;
}

input[type="tel"]::-webkit-outer-spin-button,
input[type="tel"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Testimonial */
.testimonial {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin: 24px 0;
    position: relative;
    font-size: 14px;
    color: #bbb;
    line-height: 1.5;
}

.testimonial::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.1);
    font-family: serif;
}

.testimonial-content {
    margin-left: 20px;
    font-style: italic;
}

.testimonial-author {
    margin-top: 10px;
    text-align: right;
    font-weight: 500;
    color: #999;
}

/* Legal Text Styles */
.legal-text {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    line-height: 1.6;
    color: #888;
    white-space: pre-line;
    margin-top: auto;
    padding-bottom: 16px;
    text-align: center;
}

.legal-text a {
    color: var(--primary);
    text-decoration: none;
    transition: all var(--transition-speed);
    font-weight: 500;
}

.legal-text a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-height: 700px) {
    .game-image {
        height: 30vh;
    }
    
    h1 {
        font-size: 32px;
    }
    
    .game-description {
        font-size: 16px;
        margin-bottom: 24px;
    }
    
    .content {
        padding: 24px 20px;
    }
}

/* Add safe area insets for modern mobile browsers */
@supports (padding: max(0px)) {
    .container {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .header {
        padding-top: max(20px, env(safe-area-inset-top));
    }
}

/* Add smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Add loading animation for image */
@keyframes imageFadeIn {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

.game-image {
    animation: imageFadeIn 0.5s ease-out;
}

/* Improve focus states for accessibility */
input:focus, button:focus, select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}