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

@layer utilities {
    .pixel-borders {
        box-shadow: 0 0 0 2px #000;
    }
    .vision-cone {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        background-color: rgba(239, 68, 68, 0.3);
    }
    .teacher-vision {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        background-color: rgba(14, 165, 233, 0.3);
    }
    .principal-vision {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        background-color: rgba(220, 38, 38, 0.7);
    }
    .player {
        z-index: 10;
    }
    .npc {
        z-index: 5;
    }
    .teacher {
        z-index: 7;
    }
    .principal {
        z-index: 8;
    }
    .npc-alert {
        animation: alert 0.5s infinite alternate;
    }
    .npc-fleeing {
        animation: fleeing 0.3s infinite alternate;
    }
    .teacher-angry {
        animation: angry 0.4s infinite alternate;
    }
    .principal-angry {
        animation: angry 0.3s infinite alternate;
    }
    @keyframes alert {
        from { transform: scale(1) translate(-50%, -50%); }
        to { transform: scale(1.2) translate(-42%, -42%); }
    }
    @keyframes fleeing {
        from { transform: scale(1) translate(-50%, -50%); }
        to { transform: scale(0.9) translate(-55%, -55%); }
    }
    @keyframes angry {
        from { transform: scale(1) translate(-50%, -50%); }
        to { transform: scale(1.1) translate(-45%, -45%); }
    }
    .proximity-area {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(255, 255, 0, 0.2);
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 4;
    }
    .teacher-proximity {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(14, 165, 233, 0.2);
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 4;
    }
    .principal-proximity {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(220, 38, 38, 0.3);
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 4;
    }
    .speech-bubble {
        position: relative;
        background: white;
        border-radius: 0.4em;
        padding: 0.5rem;
        font-size: 0.8rem;
        color: #000;
        font-weight: bold;
    }
    .speech-bubble:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-top-color: white;
        border-bottom: 0;
        margin-bottom: -8px;
        margin-left: -8px;
    }
    .bathroom-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.5rem;
        color: #0369A1;
    }
    .hit-effect {
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 20;
        animation: hit 0.5s forwards;
    }
    @keyframes hit {
        0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
    }
    .finish-point {
        position: absolute;
        width: 60px;
        height: 60px;
        border: 3px solid #FF0000;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .finish-center {
        width: 20px;
        height: 20px;
        background-color: #FF0000;
        border-radius: 50%;
    }
    .compass {
        position: absolute;
        z-index: 11;
        pointer-events: none;
        transition: transform 0.1s ease;
        top: 50%;
        left: 50%;
        transform-origin: center center;
    }
    .compass::after {
        content: '';
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid #FF0000;
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }
}

@layer base {
    :root {
        --color-primary: #4F46E5;
        --color-secondary: #EC4899;
        --color-danger: #EF4444;
        --color-safe: #10B981;
        --color-classroom: #F3F4F6;
        --color-wall: #6B7280;
        --color-bathroom: #93C5FD;
        --color-teacher: #0EA5E9;
        --color-principal: #DC2626;
        --color-finish: #FF0000;
    }
    .text-primary { color: var(--color-primary); }
    .text-secondary { color: var(--color-secondary); }
    .text-danger { color: var(--color-danger); }
    .text-safe { color: var(--color-safe); }
    .text-teacher { color: var(--color-teacher); }
    .text-principal { color: var(--color-principal); }
    .text-finish { color: var(--color-finish); }
    .bg-primary { background-color: var(--color-primary); }
    .bg-bathroom { background-color: var(--color-bathroom); }
}