/* ========================================
   PETS ARENA - 8-BIT PIXEL ART STYLES
   ======================================== */

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

:root {
    /* AI Brand Colors */
    --claude-primary: #D97706;
    --claude-secondary: #FEF3C7;
    --claude-dark: #92400E;
    
    --gpt-primary: #10A37F;
    --gpt-secondary: #D1FAE5;
    --gpt-dark: #065F46;
    
    --gemini-primary: #4285F4;
    --gemini-secondary: #DBEAFE;
    --gemini-dark: #1E40AF;
    
    --grok-primary: #1DA1F2;
    --grok-secondary: #E5E7EB;
    --grok-dark: #111827;
    
    /* Stat Colors */
    --hunger-color: #EF4444;
    --happiness-color: #F59E0B;
    --health-color: #EC4899;
    --energy-color: #8B5CF6;
    --cleanliness-color: #06B6D4;
    
    /* General */
    --bg-dark: #1a1a2e;
    --bg-darker: #0f0f1a;
    --text-light: #E5E5E5;
    --pixel-size: 4px;
}

/* Pixelated rendering */
.pixel-pet, .pet-sprite {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

body {
    font-family: 'Press Start 2P', cursive;
    background: var(--bg-dark);
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* CRT Scanlines Effect */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    z-index: 9999;
}

/* ========================================
   HEADER
   ======================================== */

header {
    text-align: center;
    padding: 20px;
    background: var(--bg-darker);
    border-bottom: 4px solid #333;
    box-shadow: 0 4px 0 #000;
}

h1 {
    font-size: 24px;
    color: #FFD700;
    text-shadow: 
        4px 4px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000;
    animation: glow 2s ease-in-out infinite alternate;
    margin-bottom: 10px;
}

@keyframes glow {
    from { text-shadow: 4px 4px 0 #000, 0 0 10px #FFD700; }
    to { text-shadow: 4px 4px 0 #000, 0 0 20px #FFD700, 0 0 30px #FFA500; }
}

.subtitle {
    font-size: 10px;
    color: #888;
    margin-bottom: 8px;
}

.start-time {
    font-size: 9px;
    color: #4ADE80;
    margin-bottom: 15px;
}

.start-time strong {
    color: #FFD700;
}

.timer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.timer-label {
    font-size: 10px;
    color: #888;
}

.timer {
    font-size: 20px;
    color: #00FF00;
    text-shadow: 0 0 10px #00FF00;
    padding: 8px 16px;
    background: #000;
    border: 3px solid #00FF00;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pixel-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 10px 20px;
    background: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 
        4px 4px 0 #000,
        inset -2px -2px 0 rgba(0,0,0,0.3),
        inset 2px 2px 0 rgba(255,255,255,0.1);
    transition: all 0.1s;
}

.pixel-btn:hover {
    background: #444;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000;
}

.pixel-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.pixel-btn.danger {
    background: #7F1D1D;
}

.pixel-btn.danger:hover {
    background: #991B1B;
}

/* ========================================
   ARENA GRID
   ======================================== */

.arena-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

/* ========================================
   PET CONTAINERS
   ======================================== */

.pet-container {
    background: var(--bg-darker);
    border: 4px solid #333;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.pet-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.pet-container.claude::before { background: var(--claude-primary); }
.pet-container.gpt::before { background: var(--gpt-primary); }
.pet-container.gemini::before { background: var(--gemini-primary); }
.pet-container.grok::before { background: var(--grok-primary); }

.pet-container.claude { border-color: var(--claude-dark); }
.pet-container.gpt { border-color: var(--gpt-dark); }
.pet-container.gemini { border-color: var(--gemini-dark); }
.pet-container.grok { border-color: var(--grok-dark); }

/* Dead state */
.pet-container.dead {
    filter: grayscale(80%);
    opacity: 0.7;
}

.pet-container.dead::after {
    content: '💀 DECEASED 💀';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #FF0000;
    background: rgba(0,0,0,0.9);
    padding: 20px;
    border: 4px solid #FF0000;
    z-index: 100;
    text-align: center;
    animation: flash 1s infinite;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   AI HEADER
   ======================================== */

.ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border-bottom: 3px solid #333;
}

.ai-avatar {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    border: 2px solid #444;
}

.ai-info {
    flex: 1;
}

.ai-info h2 {
    font-size: 11px;
    margin-bottom: 4px;
}

.claude .ai-info h2 { color: var(--claude-primary); }
.gpt .ai-info h2 { color: var(--gpt-primary); }
.gemini .ai-info h2 { color: var(--gemini-primary); }
.grok .ai-info h2 { color: var(--grok-primary); }

.pet-name {
    font-size: 8px;
    color: #888;
}

.status-indicator {
    font-size: 8px;
    padding: 4px 8px;
    background: #166534;
    color: #4ADE80;
    border: 2px solid #4ADE80;
    animation: pulse 2s infinite;
}

.status-indicator.dead {
    background: #7F1D1D;
    color: #F87171;
    border-color: #F87171;
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ========================================
   PET DISPLAY AREA
   ======================================== */

.pet-display {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        linear-gradient(to bottom, #1a1a2e 0%, #2d2d4a 100%);
    border-bottom: 3px solid #333;
    overflow: hidden;
}

/* Ground */
.pet-display::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: 
        repeating-linear-gradient(
            90deg,
            #2d5a27 0px,
            #2d5a27 8px,
            #3d7a37 8px,
            #3d7a37 16px
        );
    border-top: 4px solid #1a3d17;
}

.pet-sprite {
    position: relative;
    z-index: 10;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.pet-sprite.dead {
    animation: none;
    transform: rotate(180deg);
    filter: grayscale(100%);
}

.pet-mood {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ========================================
   PIXEL PET SPRITES (CSS Art)
   ======================================== */

.pixel-pet {
    width: 64px;
    height: 64px;
    position: relative;
}

/* DOG SPRITE - Orange/Brown colors for Claude */
.dog-sprite {
    background: 
        /* Ears */
        linear-gradient(var(--claude-primary), var(--claude-primary)) 8px 4px / 8px 12px no-repeat,
        linear-gradient(var(--claude-primary), var(--claude-primary)) 48px 4px / 8px 12px no-repeat,
        /* Head */
        linear-gradient(var(--claude-primary), var(--claude-primary)) 12px 8px / 40px 28px no-repeat,
        /* Eyes */
        linear-gradient(#000, #000) 20px 16px / 6px 6px no-repeat,
        linear-gradient(#000, #000) 38px 16px / 6px 6px no-repeat,
        linear-gradient(#fff, #fff) 22px 18px / 2px 2px no-repeat,
        linear-gradient(#fff, #fff) 40px 18px / 2px 2px no-repeat,
        /* Nose */
        linear-gradient(#000, #000) 28px 26px / 8px 6px no-repeat,
        /* Mouth */
        linear-gradient(#000, #000) 30px 32px / 4px 2px no-repeat,
        /* Body */
        linear-gradient(var(--claude-dark), var(--claude-dark)) 16px 36px / 32px 20px no-repeat,
        /* Legs */
        linear-gradient(var(--claude-primary), var(--claude-primary)) 18px 52px / 8px 12px no-repeat,
        linear-gradient(var(--claude-primary), var(--claude-primary)) 38px 52px / 8px 12px no-repeat,
        /* Tail */
        linear-gradient(var(--claude-primary), var(--claude-primary)) 48px 40px / 12px 8px no-repeat;
}

/* CAT SPRITE - Green colors for GPT */
.cat-sprite {
    background: 
        /* Ears (triangular effect) */
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 12px 0px / 8px 8px no-repeat,
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 44px 0px / 8px 8px no-repeat,
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 14px 4px / 6px 6px no-repeat,
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 44px 4px / 6px 6px no-repeat,
        /* Inner ears */
        linear-gradient(#FFB6C1, #FFB6C1) 14px 4px / 4px 4px no-repeat,
        linear-gradient(#FFB6C1, #FFB6C1) 46px 4px / 4px 4px no-repeat,
        /* Head */
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 12px 8px / 40px 24px no-repeat,
        /* Eyes */
        linear-gradient(#000, #000) 20px 14px / 8px 10px no-repeat,
        linear-gradient(#000, #000) 36px 14px / 8px 10px no-repeat,
        linear-gradient(#90EE90, #90EE90) 22px 16px / 4px 6px no-repeat,
        linear-gradient(#90EE90, #90EE90) 38px 16px / 4px 6px no-repeat,
        linear-gradient(#000, #000) 24px 18px / 2px 4px no-repeat,
        linear-gradient(#000, #000) 40px 18px / 2px 4px no-repeat,
        /* Nose */
        linear-gradient(#FFB6C1, #FFB6C1) 29px 24px / 6px 4px no-repeat,
        /* Whiskers */
        linear-gradient(#fff, #fff) 4px 22px / 12px 2px no-repeat,
        linear-gradient(#fff, #fff) 48px 22px / 12px 2px no-repeat,
        linear-gradient(#fff, #fff) 6px 26px / 10px 2px no-repeat,
        linear-gradient(#fff, #fff) 48px 26px / 10px 2px no-repeat,
        /* Body */
        linear-gradient(var(--gpt-dark), var(--gpt-dark)) 18px 32px / 28px 20px no-repeat,
        /* Legs */
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 20px 48px / 8px 16px no-repeat,
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 36px 48px / 8px 16px no-repeat,
        /* Tail */
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 46px 28px / 8px 6px no-repeat,
        linear-gradient(var(--gpt-primary), var(--gpt-primary)) 52px 22px / 6px 10px no-repeat;
}

/* HIPPO SPRITE - Blue colors for Gemini */
.hippo-sprite {
    background:
        /* Head - big and round */
        linear-gradient(var(--gemini-primary), var(--gemini-primary)) 8px 4px / 48px 32px no-repeat,
        /* Ears */
        linear-gradient(var(--gemini-dark), var(--gemini-dark)) 8px 0px / 10px 8px no-repeat,
        linear-gradient(var(--gemini-dark), var(--gemini-dark)) 46px 0px / 10px 8px no-repeat,
        /* Eyes */
        linear-gradient(#000, #000) 18px 10px / 8px 8px no-repeat,
        linear-gradient(#000, #000) 38px 10px / 8px 8px no-repeat,
        linear-gradient(#fff, #fff) 20px 12px / 4px 4px no-repeat,
        linear-gradient(#fff, #fff) 40px 12px / 4px 4px no-repeat,
        /* Snout */
        linear-gradient(#6CA6F7, #6CA6F7) 16px 20px / 32px 16px no-repeat,
        /* Nostrils */
        linear-gradient(#000, #000) 22px 24px / 6px 6px no-repeat,
        linear-gradient(#000, #000) 36px 24px / 6px 6px no-repeat,
        /* Body */
        linear-gradient(var(--gemini-dark), var(--gemini-dark)) 4px 36px / 56px 20px no-repeat,
        /* Legs - short and stubby */
        linear-gradient(var(--gemini-primary), var(--gemini-primary)) 8px 52px / 12px 12px no-repeat,
        linear-gradient(var(--gemini-primary), var(--gemini-primary)) 44px 52px / 12px 12px no-repeat,
        /* Toes */
        linear-gradient(#333, #333) 8px 60px / 4px 4px no-repeat,
        linear-gradient(#333, #333) 16px 60px / 4px 4px no-repeat,
        linear-gradient(#333, #333) 44px 60px / 4px 4px no-repeat,
        linear-gradient(#333, #333) 52px 60px / 4px 4px no-repeat;
}

/* TURTLE SPRITE - Cyan/Dark colors for Grok */
.turtle-sprite {
    background:
        /* Shell - main dome */
        linear-gradient(#2D5016, #2D5016) 12px 8px / 40px 28px no-repeat,
        /* Shell pattern */
        linear-gradient(#4A7023, #4A7023) 20px 12px / 8px 8px no-repeat,
        linear-gradient(#4A7023, #4A7023) 36px 12px / 8px 8px no-repeat,
        linear-gradient(#4A7023, #4A7023) 28px 10px / 8px 8px no-repeat,
        linear-gradient(#4A7023, #4A7023) 16px 22px / 8px 8px no-repeat,
        linear-gradient(#4A7023, #4A7023) 28px 22px / 8px 8px no-repeat,
        linear-gradient(#4A7023, #4A7023) 40px 22px / 8px 8px no-repeat,
        /* Shell rim */
        linear-gradient(#1a3d0c, #1a3d0c) 10px 32px / 44px 8px no-repeat,
        /* Head */
        linear-gradient(var(--grok-primary), var(--grok-primary)) 52px 20px / 12px 16px no-repeat,
        /* Eyes */
        linear-gradient(#000, #000) 58px 24px / 4px 4px no-repeat,
        linear-gradient(#fff, #fff) 60px 25px / 2px 2px no-repeat,
        /* Legs */
        linear-gradient(var(--grok-primary), var(--grok-primary)) 14px 36px / 10px 14px no-repeat,
        linear-gradient(var(--grok-primary), var(--grok-primary)) 40px 36px / 10px 14px no-repeat,
        /* Back legs peeking */
        linear-gradient(var(--grok-primary), var(--grok-primary)) 8px 28px / 8px 10px no-repeat,
        /* Tail */
        linear-gradient(var(--grok-primary), var(--grok-primary)) 4px 32px / 8px 6px no-repeat;
}

/* ========================================
   STATS
   ======================================== */

.stats-container {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0,0,0,0.2);
}

.stat {
    display: grid;
    grid-template-columns: 24px 60px 1fr 35px;
    align-items: center;
    gap: 8px;
}

.stat-icon {
    font-size: 12px;
}

.stat-label {
    font-size: 7px;
    color: #888;
}

.stat-bar {
    height: 12px;
    background: #222;
    border: 2px solid #444;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    transition: width 0.5s ease, background-color 0.5s ease;
}

.stat-fill.hunger { background: var(--hunger-color); }
.stat-fill.happiness { background: var(--happiness-color); }
.stat-fill.health { background: var(--health-color); }
.stat-fill.energy { background: var(--energy-color); }
.stat-fill.cleanliness { background: var(--cleanliness-color); }

/* Low stat warning */
.stat-fill.low {
    animation: warning 0.5s infinite;
}

@keyframes warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stat-value {
    font-size: 8px;
    text-align: right;
    color: #fff;
}

/* ========================================
   DECISION LOG
   ======================================== */

.decision-log {
    padding: 12px;
    border-top: 3px solid #333;
}

.decision-log h3 {
    font-size: 9px;
    margin-bottom: 8px;
    color: #888;
}

.log-entries {
    height: 100px;
    overflow-y: auto;
    background: #000;
    border: 2px solid #333;
    padding: 8px;
    font-size: 7px;
    line-height: 1.6;
}

.log-entries::-webkit-scrollbar {
    width: 8px;
}

.log-entries::-webkit-scrollbar-track {
    background: #111;
}

.log-entries::-webkit-scrollbar-thumb {
    background: #444;
    border: 1px solid #222;
}

.log-entry {
    padding: 4px 0;
    border-bottom: 1px solid #222;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-time {
    color: #666;
}

.log-action {
    color: #4ADE80;
}

.log-action.feed { color: #EF4444; }
.log-action.play { color: #F59E0B; }
.log-action.heal { color: #EC4899; }
.log-action.rest { color: #8B5CF6; }
.log-action.clean { color: #06B6D4; }

/* ========================================
   FOOTER
   ======================================== */

footer {
    text-align: center;
    padding: 20px;
    background: var(--bg-darker);
    border-top: 4px solid #333;
}

footer p {
    font-size: 10px;
    color: #888;
    margin-bottom: 8px;
}

footer .small {
    font-size: 7px;
    color: #555;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    h1 {
        font-size: 16px;
    }
    
    .timer {
        font-size: 14px;
    }
    
    .controls {
        flex-direction: column;
        align-items: center;
    }
    
    .pixel-btn {
        width: 80%;
    }
    
    .arena-grid {
        grid-template-columns: 1fr;
    }
    
    .stat {
        grid-template-columns: 20px 50px 1fr 30px;
    }
}

/* ========================================
   ANIMATIONS FOR PET ACTIONS
   ======================================== */

.pet-sprite.eating {
    animation: eat 0.3s ease-in-out 3;
}

@keyframes eat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.pet-sprite.playing {
    animation: play 0.2s ease-in-out 5;
}

@keyframes play {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.pet-sprite.sleeping {
    animation: sleep 2s ease-in-out infinite;
}

@keyframes sleep {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(2px); opacity: 0.8; }
}

.pet-sprite.cleaning {
    animation: clean 0.4s ease-in-out 3;
}

@keyframes clean {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Z's for sleeping */
.zzz {
    position: absolute;
    font-size: 16px;
    animation: zzz 2s ease-in-out infinite;
    color: #fff;
}

@keyframes zzz {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(20px, -30px); opacity: 0; }
}

/* Hearts for playing */
.hearts {
    position: absolute;
    font-size: 14px;
    animation: hearts 1s ease-out forwards;
}

@keyframes hearts {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.2); }
    100% { transform: translateY(-20px); opacity: 0; }
}

/* Winner celebration */
.pet-container.winner {
    animation: winner 0.5s ease-in-out infinite alternate;
}

@keyframes winner {
    from { box-shadow: 8px 8px 0 rgba(0,0,0,0.5), 0 0 20px #FFD700; }
    to { box-shadow: 8px 8px 0 rgba(0,0,0,0.5), 0 0 40px #FFD700; }
}