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

body {
    font-family: 'Mali', cursive;
    background: linear-gradient(-45deg, #ff9a9e, #fecfef, #a1c4fd, #c2e9fb);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    text-align: center; 
    margin: 0; 
    padding: 20px;
    color: #444;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.container {
    max-width: 800px; 
    margin: 0 auto; 
    background: rgba(255, 255, 255, 0.95);
    padding: 30px; 
    border-radius: 25px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
}

h1, h2 { 
    color: #2c3e50; 
    font-weight: 700;
    text-shadow: 2px 2px 0px #eee; 
}

.mode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 600px;
    margin: 30px auto;
}

.mode-buttons button {
    width: 100%; height: 100%; min-height: 90px;
    display: flex; align-items: center; justify-content: center;
    padding: 15px; font-size: 20px;
}

@media (max-width: 400px) {
    .mode-buttons { grid-template-columns: 1fr; }
}

button {
    font-family: 'Mali', cursive;
    padding: 15px 25px; font-size: 18px; font-weight: bold;
    border: none; border-radius: 15px; cursor: pointer;
    box-shadow: 0 6px 0px rgba(0,0,0,0.1);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

button:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0,0,0,0.15); }
button:active { transform: translateY(4px); box-shadow: 0 2px 0px rgba(0,0,0,0.1); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-red { background-color: #ff6b6b; color: white; box-shadow: 0 6px 0px #c0392b; }
.btn-yellow { background-color: #feca57; color: #333; box-shadow: 0 6px 0px #f39c12; }
.btn-green { background-color: #1dd1a1; color: white; box-shadow: 0 6px 0px #10ac84; }
.btn-blue { background-color: #54a0ff; color: white; box-shadow: 0 6px 0px #2e86de; }
.btn-black { background-color: #2f3640; color: white; box-shadow: 0 6px 0px #1e272e; width: 100%; max-width: 300px; font-size: 22px; padding: 20px; border-radius: 50px; }
.btn-purple { background-color: #9b59b6; color: white; box-shadow: 0 6px 0px #8e44ad; width: 100%; max-width: 300px; margin-bottom: 10px;}
.btn-gray { background-color: #ecf0f1; color: #333; box-shadow: 0 6px 0px #bdc3c7; }

#webcam-container {
    width: 100%; max-width: 400px; height: 300px; background-color: #000;
    margin: 20px auto; border-radius: 20px; overflow: hidden; 
    border: 6px solid #fff; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    position: relative;
}
video { width: 100%; height: 100%; object-fit: cover; }

.guide-frame {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60%; height: 75%; border: 4px dashed #1dd1a1; border-radius: 15px;
    background: rgba(255, 255, 255, 0.1); pointer-events: none; z-index: 10;
}
.guide-frame::after {
    content: "Place your card here"; 
    position: absolute; bottom: -35px; left: 50%;
    transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); color: white;
    padding: 5px 15px; border-radius: 20px; font-size: 16px; white-space: nowrap;
}

.snapshot-container {
    margin: 15px auto; width: 250px; height: auto; border-radius: 15px;
    overflow: hidden; border: 4px solid #9b59b6; display: none; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.snapshot-container img { width: 100%; height: 100%; object-fit: cover; display: block; }

.labels-box { background: #fff3cd; padding: 15px; border-radius: 12px; color: #d35400; font-weight: bold; margin: 15px 0; border: 2px dashed #f39c12; }
.score-board { font-size: 28px; font-weight: bold; color: #e74c3c; margin: 15px 0; background: #fdebd0; display: inline-block; padding: 10px 30px; border-radius: 30px; }