/**
 * Critical Mobile Tap Zone Fix
 * 
 * PROBLEM: Score button overlaps with next image tap zone
 * SOLUTION: Redefine tap zones to avoid action button area
 */

/* ===========================
   IMMEDIATE FIX FOR OVERLAP
   =========================== */

@media (max-width: 768px) {
    /* Fix z-index hierarchy */
    .hunt-feed .tap-zone {
        z-index: 10 !important; /* Below buttons */
    }
    
    .hunt-feed .image-actions {
        z-index: 50 !important; /* Above tap zones */
        /* Ensure buttons are clickable */
        pointer-events: auto !important;
        
        /* Add touch-safe background */
        background: transparent;
        padding: 8px;
        margin: -8px;
    }
    
    /* Critical: Prevent right tap zone from extending under buttons */
    .hunt-feed .tap-zone-right {
        /* Use calc to leave space for buttons */
        width: calc(100% - 150px) !important;
        max-width: 25% !important;
        right: 120px !important; /* Move away from button area */
    }
    
    /* Left zone stays narrow */
    .hunt-feed .tap-zone-left {
        width: 25% !important;
        max-width: 100px !important;
    }
    
    /* Ensure action buttons are always accessible */
    .hunt-feed .action-btn {
        position: relative !important;
        z-index: 60 !important;
        /* Minimum touch target size */
        min-width: 44px !important;
        min-height: 44px !important;
        width: 48px !important;
        height: 48px !important;
        /* Ensure clickable */
        pointer-events: auto !important;
        cursor: pointer !important;
        /* Add visual feedback */
        transition: all 0.2s ease !important;
    }
    
    .hunt-feed .action-btn:active {
        transform: scale(0.9) !important;
        background: rgba(255, 255, 255, 0.2) !important;
    }
}

/* ===========================
   SMALL SCREEN ADJUSTMENTS
   =========================== */

@media (max-width: 414px) {
    /* iPhone Plus and smaller */
    .hunt-feed .tap-zone-right {
        width: 20% !important;
        right: 140px !important; /* More space for buttons */
    }
    
    .hunt-feed .image-actions {
        gap: 12px !important;
    }
}

@media (max-width: 375px) {
    /* iPhone SE, iPhone 8 */
    .hunt-feed .tap-zone {
        display: none !important; /* Disable tap zones on very small screens */
    }
    
    /* Use swipe gestures only */
    .hunt-feed .image-container {
        touch-action: pan-y; /* Allow vertical swipes */
    }
    
    /* Move buttons to bottom bar */
    .hunt-feed .image-actions {
        position: fixed !important;
        bottom: 100px !important;
        right: 50% !important;
        top: auto !important;
        transform: translateX(50%) !important;
        flex-direction: row !important;
        background: rgba(0, 0, 0, 0.8) !important;
        padding: 12px 20px !important;
        border-radius: 30px !important;
        backdrop-filter: blur(10px) !important;
        gap: 20px !important;
    }
}

/* ===========================
   DEBUG MODE
   =========================== */

/* Add ?debug=touch to URL to see boundaries */
.hunt-feed[data-debug-touch="true"] .tap-zone {
    background: rgba(0, 255, 0, 0.2) !important;
    border: 2px dashed rgba(0, 255, 0, 0.8) !important;
}

.hunt-feed[data-debug-touch="true"] .tap-zone-right {
    background: rgba(255, 255, 0, 0.2) !important;
    border: 2px dashed rgba(255, 255, 0, 0.8) !important;
}

.hunt-feed[data-debug-touch="true"] .image-actions {
    background: rgba(255, 0, 0, 0.2) !important;
    border: 2px dashed rgba(255, 0, 0, 0.8) !important;
}

.hunt-feed[data-debug-touch="true"]::after {
    content: 'Touch Debug Mode';
    position: fixed;
    top: 100px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: yellow;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 10000;
    border-radius: 4px;
}