@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@700&family=Inter:wght@400;700&display=swap');

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

body{ 
    background-color: #e63946; 
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    display: flex; 
    align-items: center; 
    justify-content: center;
    min-height: 100vh;
}

#playground{
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 1; 
    pointer-events: none;
}

/* Background Running Potatoes */
.potato-actor{ 
    position: absolute; 
    display: flex; 
    justify-content: center; 
}
.spud-body{
    width: 60px; 
    height: 80px; 
    background: #b68d5d; 
    border: 3px solid #63472b;
    border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; 
    position: relative;
}
.spud-body::before, .spud-body::after{
    content: ''; 
    position: absolute; 
    width: 5px; 
    height: 5px; 
    background: #1a1a1a; 
    border-radius: 50%; 
    top: 35%; 
    z-index: 5;
}
.spud-body::before{
    left: 30%; 
} 
.spud-body::after{ 
    right: 30%; 
}
.limb{ 
    position: absolute; 
    background: #63472b; 
    border-radius: 10px; 
}
.leg{ 
    width: 8px; 
    height: 20px; 
    bottom: -12px; 
    transform-origin: top center; 
}
.arm{ 
    width: 20px; 
    height: 6px; 
    top: 45%; 
    transform-origin: left center; 
}

/* MAIN CONTAINER LOGIC */
.potato-box{
    position: relative; 
    z-index: 100;
    width: 90vw; 
    max-width: 440px;
    min-height: 620px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.potato-bg{
    position: absolute; 
    inset: 0; 
    z-index: -1;
    background-color: #f3e5ab; 
    border: 10px solid #7d5c3e;
    box-shadow: 20px 20px 0px rgba(0,0,0,0.1);
    animation: breathe 5s ease-in-out infinite;
}

.inner-content{ 
    width: 72%; /* Adjusted for safe gutter */
    z-index: 10; 
    display: flex; 
    justify-content: center;
}

.safe-zone{
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.header{ 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-bottom: 20px; 
}

.logo-circle{
    width: 55px; 
    height: 55px; 
    background: #7d5c3e;
    border-radius: 50%; 
    overflow: hidden; 
    margin-bottom: 10px;
}

.heading-font{ 
    font-family: 'Syncopate', sans-serif;
    color: #7d5c3e; 
    font-size: 1.1rem; 
    text-transform: uppercase;
}

.sub-text{ 
    font-size: 8px; 
    font-weight: 800; 
    color: #7d5c3e; 
    opacity: 0.6; 
    text-transform: uppercase; 
}

/* INPUTS */
form{ 
    width: 100%; 
}
/* --- UPDATED INPUTS --- */
.input-group{ 
    width: 100%; 
    margin-bottom: 14px; /* Slightly more space between groups */
}

input{
    width: 100% !important; 
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #7d5c3e !important; 
    border-radius: 12px !important;
    
    /* EXTRA LARGE PADDING */
    padding: 9px 12px !important; 
    
    margin-bottom: 15px !important;
    font-size: 12px !important; /* Made font slightly larger to match padding */
    color: #4a3221 !important;
    outline: none !important;
    display: block !important;
}

input:focus{ 
    border-color: #e63946; 
    background: #fff;
    /* Optional: subtle shadow to make it pop when typing */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Give the labels a tiny bit more room now that the inputs are taller */
label{ 
    display: block; 
    font-size: 10px; 
    font-weight: 800; 
    color: #7d5c3e; 
    margin-bottom: 8px; 
    padding-left: 6px;
    text-transform: uppercase; 
}
/* --- SLIGHTLY SMALLER BUTTONS --- */
.btn-stack{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    gap: 8px; 
    margin-top: 8px; 
}

.btn{
    display:flex; 
    align-items: center; 
    justify-content: center;
    width: 90%;
    padding: 12px; /* Reduced from 16px */
    border-radius: 10px;
    font-size: 10px; /* Reduced from 11px */
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.btn-primary{ 
    background: #e63946; 
    color: white; 
    border-radius: 0; 
}
.btn-secondary{ 
    background: #1a1a1a; 
    color: white; }
.btn:hover{ 
    transform: translateY(-2px); 
    filter: brightness(1.2); }

/* ANIMATIONS */
@keyframes breathe{
    0%, 100% { border-radius: 65% 35% 58% 42% / 37% 61% 39% 63%; }
    50% { border-radius: 55% 45% 50% 50% / 50% 50% 45% 55%; }
}
@keyframes moveAcross { 0% { left: -150px; } 100% { left: 110vw; } }
@keyframes legRun { 0% { transform: rotate(-40deg); } 100% { transform: rotate(40deg); } }
@keyframes bodyBob { from { transform: translateY(0); } to { transform: translateY(-10px); } }




/* TOAST NOTIFICATION */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #f3e5ab; /* Potato cream */
    border-left: 6px solid #e63946; /* Red accent */
    border-top: 2px solid #7d5c3e;
    border-right: 2px solid #7d5c3e;
    border-bottom: 2px solid #7d5c3e;
    padding: 15px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 10000;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast.hidden {
    transform: translateX(120%); /* Slides out to the right */
    opacity: 0;
}

#toast-icon { font-size: 24px; }

.toast-content h4 {
    font-family: 'Syncopate', sans-serif;
    color: #7d5c3e;
    font-size: 10px;
    margin: 0;
}

.toast-content p {
    font-size: 12px;
    color: #4a3221;
    margin: 0;
    font-weight: 700;
}

/* --- RESPONSIVE TOAST NOTIFICATION --- */
.toast {
    position: fixed;
    top: 20px;
    right: 20px; /* Default for Desktop */
    background: #f3e5ab;
    border: 2px solid #7d5c3e;
    border-left: 6px solid #e63946;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 999999; /* Higher than everything else */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1;
    transform: translateX(0);
    max-width: 90vw;
}

/* MOBILE SPECIFIC FIX */
@media (max-width: 600px) {
    .toast {
        right: 5vw;
        left: 5vw; /* Centers it on mobile */
        top: 10px;
        width: 90vw;
        justify-content: center;
    }
}

/* HIDDEN STATE */
.toast.hidden {
    /* Slides up on mobile, slides right on desktop */
    transform: translateY(-100px) translateX(0);
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (min-width: 601px) {
    .toast.hidden {
        transform: translateX(calc(100% + 40px)) !important;
    }
}