@tailwind base;
@tailwind components;
@tailwind utilities;

/* Fonts */
.font-typewriter {
    font-family: 'Special Elite', cursive, monospace;
}

.bg-custom-dark {
    background-color: #0f172a;
    background-image:
        radial-gradient(circle at 50% 50%, #1e293b 0%, #020617 100%);
}

.bg-radial-gradient {
    background: radial-gradient(circle at 50% 50%, transparent 0%, #000000 80%);
}

.paper-texture {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Suspect Cards */
.suspect-card {
    @apply w-24 h-32 md:w-32 md:h-40 bg-slate-800 border-2 border-slate-600 rounded-sm shadow-xl flex items-center justify-center text-4xl md:text-5xl font-typewriter text-white transition-all transform duration-200 cursor-pointer select-none relative overflow-hidden;
}

.suspect-card::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-1 bg-slate-700;
}

.suspect-card:hover {
    @apply -translate-y-2 border-yellow-500 shadow-2xl z-10 scale-105;
}

.suspect-card:active {
    @apply translate-y-0 scale-95;
}

.suspect-card.correct-answer {
    @apply bg-green-900 border-green-500 text-green-100;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}

.suspect-card.wrong-answer {
    @apply bg-red-900 border-red-500 text-red-100 shake;
}

/* Animations */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes stampIn {
    0% {
        opacity: 0;
        transform: scale(3) rotate(-15deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(-15deg);
    }
}

.stamp-anim {
    animation: stampIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.stamp {
    @apply text-red-600 border-4 border-red-600 font-black uppercase px-4 py-1 text-2xl md:text-4xl tracking-widest opacity-80 mix-blend-multiply mask-image;
    transform: rotate(-15deg);
    mask-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noise)' opacity='0.5'/></svg>");
}

.mode-btn {
    /* Base styles applied in HTML, these are overrides/extras */
}

/* Mystery text effect */
.missing-highlight {
    @apply relative inline-block border-b-4 border-red-600 text-red-700 px-2 min-w-[3rem] text-center bg-red-100/10 rounded;
}/* High-quality claymation background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('clay_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}