/* Custom Styles & Full-Screen Blur HUD for BlindLock */

:root {
    /* 20px blur dissolves fine 15-25px code digits completely while keeping hands & box outline visible for aiming */
    --fullscreen-blur: 20px;
}

body {
    background-color: #050811;
    color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
}

/* Full-Screen Camera Blur: The wearer CANNOT read code numbers anywhere on screen */
.camera-fullscreen-blur {
    filter: blur(var(--fullscreen-blur)) brightness(0.9) contrast(1.1);
    -webkit-filter: blur(var(--fullscreen-blur)) brightness(0.9) contrast(1.1);
    transform: scale(1.08); /* Prevents blur bleed on screen edges */
    will-change: filter, transform;
}

/* Dynamic Tracking Bounding Box */
.dynamic-tracking-box {
    position: absolute;
    border: 2px dashed rgba(148, 163, 184, 0.45);
    border-radius: 14px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: left 0.14s ease-out, top 0.14s ease-out, width 0.14s ease-out, height 0.14s ease-out, border-color 0.2s, box-shadow 0.2s;
    z-index: 20;
    overflow: hidden;
}

/* Box state: Object actively tracked */
.dynamic-tracking-box.tracking {
    border: 2px solid #38bdf8 !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.4), inset 0 0 20px rgba(56, 189, 248, 0.15) !important;
}

/* Box state: In-focus and locked */
.dynamic-tracking-box.locked {
    border: 2.5px solid #10b981 !important;
    box-shadow: 0 0 35px rgba(16, 185, 129, 0.7), inset 0 0 25px rgba(16, 185, 129, 0.25) !important;
    animation: pulse-border 1.2s infinite ease-in-out;
}

@keyframes pulse-border {
    0%, 100% { border-color: #10b981; }
    50% { border-color: #34d399; }
}

/* Privacy scanline overlay inside the tracking box */
.box-privacy-mesh {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(15, 23, 42, 0.8),
        rgba(15, 23, 42, 0.8) 8px,
        rgba(30, 41, 59, 0.8) 8px,
        rgba(30, 41, 59, 0.8) 16px
    );
    pointer-events: none;
}

/* Reticle Corner Brackets on the tracking box */
.box-bracket {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: inherit;
    pointer-events: none;
}

.box-tl { top: -2px; left: -2px; border-top: 3px solid; border-left: 3px solid; border-top-left-radius: 8px; }
.box-tr { top: -2px; right: -2px; border-top: 3px solid; border-right: 3px solid; border-top-right-radius: 8px; }
.box-bl { bottom: -2px; left: -2px; border-bottom: 3px solid; border-left: 3px solid; border-bottom-left-radius: 8px; }
.box-br { bottom: -2px; right: -2px; border-bottom: 3px solid; border-right: 3px solid; border-bottom-right-radius: 8px; }

/* Large directional radar arrow animation */
.radar-arrow {
    animation: bounce-arrow 1s infinite alternate ease-in-out;
}

@keyframes bounce-arrow {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}