:root {
    --primary: #ec4899;
    --primary-hover: #db2777;
    --secondary: #8b5cf6;
    --accent: #f59e0b;
    --bg-dark: #1e1b4b;
    --text-light: #f8fafc;
    --text-dark: #0f172a;
    --card-bg: rgba(255, 255, 255, 0.95);
    --border-radius: 16px;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--bg-dark);
    overflow-x: hidden;
}

.app-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #4c1d95 0%, #db2777 50%, #f59e0b 100%);
    z-index: -2;
}

/* Decorative background shapes */
.app-bg::before, .app-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
}
.app-bg::before {
    top: -10%; left: -10%;
    width: 50vw; height: 50vw;
    background: rgba(236, 72, 153, 0.4);
}
.app-bg::after {
    bottom: -10%; right: -10%;
    width: 60vw; height: 60vw;
    background: rgba(245, 158, 11, 0.4);
}

.site-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

/* Typography */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.2;
}

.hero {
    text-align: center;
    margin-bottom: 40px;
    color: var(--text-light);
}

.campaign-title {
    font-size: 3rem;
    margin-bottom: 15px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
}

.campaign-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.main-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.4);
    animation: slideUp 0.5s ease;
}

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

/* Form Styles */
.entry-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    transition: opacity 0.3s ease;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-weight: 600;
    font-size: 0.95rem;
    color: #334155;
}

.input-group input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    transition: all 0.3s ease;
    color: var(--text-dark);
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-heading);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(236, 72, 153, 0.4);
}

.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: #f1f5f9;
    color: #475569;
}

.btn-secondary:hover {
    background: #e2e8f0;
}

.error-msg {
    color: #ef4444;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding: 10px;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fca5a5;
}

/* Scratch Card Enhanced */
.scratch-wrapper {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 200px;
    margin: 0 auto 30px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2), inset 0 0 0 8px #fff;
    background: repeating-linear-gradient(
        45deg,
        #f8fafc,
        #f8fafc 10px,
        #f1f5f9 10px,
        #f1f5f9 20px
    );
    border: 4px solid #f59e0b;
    user-select: none;
    padding: 12px;
    transition: all 0.3s ease;
}

.scratch-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background: #fff;
}

.scratch-underlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #fff 0%, #fef3c7 100%);
    z-index: 1;
    padding: 10px;
    text-align: center;
    overflow: hidden;
}

/* Sunburst Animation */
.scratch-underlay::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, 
        transparent 0deg, rgba(245, 158, 11, 0.1) 15deg, 
        transparent 30deg, rgba(245, 158, 11, 0.1) 45deg, 
        transparent 60deg, rgba(245, 158, 11, 0.1) 75deg, 
        transparent 90deg, rgba(245, 158, 11, 0.1) 105deg, 
        transparent 120deg, rgba(245, 158, 11, 0.1) 135deg, 
        transparent 150deg, rgba(245, 158, 11, 0.1) 165deg, 
        transparent 180deg, rgba(245, 158, 11, 0.1) 195deg, 
        transparent 210deg, rgba(245, 158, 11, 0.1) 225deg, 
        transparent 240deg, rgba(245, 158, 11, 0.1) 255deg, 
        transparent 270deg, rgba(245, 158, 11, 0.1) 285deg, 
        transparent 300deg, rgba(245, 158, 11, 0.1) 315deg, 
        transparent 330deg, rgba(245, 158, 11, 0.1) 345deg, 
        transparent 360deg);
    animation: rotateSunburst 20s linear infinite;
    z-index: 0;
}

@keyframes rotateSunburst {
    to { transform: rotate(360deg); }
}

.underlay-icon {
    position: relative;
    z-index: 1;
    font-size: 3.5rem;
    margin-bottom: 5px;
    animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.underlay-text {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    color: #b45309;
    text-shadow: 0 2px 4px rgba(255,255,255,0.8);
    line-height: 1.1;
    padding: 0 10px;
}

.scratch-inner canvas {
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    cursor: crosshair;
    touch-action: none;
    width: 100% !important;
    height: 100% !important;
}

.canvas-overlay-msg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(30, 27, 75, 0.75);
    color: white;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    backdrop-filter: blur(4px);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.canvas-overlay-msg .lock-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.scratch-wrapper.is-playable .canvas-overlay-msg {
    opacity: 0;
}
.scratch-wrapper.is-playable canvas {
    cursor: grab;
}
.scratch-wrapper.is-playable canvas:active {
    cursor: grabbing;
}
.scratch-wrapper.is-scratched canvas {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 15px 35px rgba(0,0,0,0.2), inset 0 0 0 8px #fff; border-color: #f59e0b; }
    50% { box-shadow: 0 15px 35px rgba(245, 158, 11, 0.5), inset 0 0 0 8px #fff, 0 0 20px rgba(245, 158, 11, 0.4); border-color: #fcd34d; }
    100% { box-shadow: 0 15px 35px rgba(0,0,0,0.2), inset 0 0 0 8px #fff; border-color: #f59e0b; }
}

.scratch-wrapper.is-playable {
    animation: pulseGlow 2s infinite;
}

/* Shake Animation for visual cue */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.shake {
    animation: shake 0.3s ease-in-out;
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Result Section */
.result-header {
    text-align: center;
    margin-bottom: 30px;
}

.result-icon {
    font-size: 4rem;
    margin-bottom: 10px;
}

.result-title {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.result-message {
    font-size: 1.1rem;
    color: #475569;
}

.details-box {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.box-title {
    font-size: 1.1rem;
    color: #334155;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.box-text {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 10px;
}

.box-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.prize-image {
    max-width: 150px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.qr-code {
    max-width: 150px;
    border-radius: 8px;
    padding: 10px;
    background: white;
}

.code-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.code-text {
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 2px;
}

.copy-btn {
    background: #e2e8f0;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
}
.copy-btn:hover {
    background: #cbd5e1;
}

.expiration-text {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
}

/* Share Panel */
.share-controls {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.share-controls input {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    color: #475569;
}

.share-controls button {
    width: auto;
    padding: 10px 20px;
}

.action-buttons {
    margin-top: 30px;
}

/* Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#wbx-powered-by-slot {
    margin-top: 20px;
    width: 100%;
}

@media (max-width: 480px) {
    .site-container {
        padding: 20px 15px;
    }
    .campaign-title {
        font-size: 2.2rem;
    }
    .scratch-wrapper {
        height: 180px;
        padding: 8px;
    }
}