/**
 * Dot Matrix Theme Styles
 * Realistic LED display with depth and texture
 */

.theme-dot-matrix {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #050505; /* Deep black board */
    background-image:
        radial-gradient(circle at 2px 2px, rgba(255,255,255,0.02) 1px, transparent 0);
    background-size: 4px 4px;
}

/* Board wrapper for wrap mode height containment */
.dot-matrix-board {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* The main canvas where LEDs are drawn */
.dot-matrix-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Glass/Plastic cover effect */
.dot-matrix-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    /* Subtle scanlines or screen texture */
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.1) 50%
    ), linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.02),
        rgba(0, 255, 0, 0.01),
        rgba(0, 0, 255, 0.02)
    );
    background-size: 100% 2px, 3px 100%;
}

/* Vignette for depth */
.dot-matrix-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
    background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.4) 100%);
}

/* Bezel frame - More industrial and detailed */
.dot-matrix-bezel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: clamp(10px, 3vmin, 30px) solid #1a1a1a;
    border-image: linear-gradient(135deg, #333 0%, #000 50%, #222 100%) 1;
    box-shadow: 
        inset 0 0 40px rgba(0,0,0,1),
        0 20px 50px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 4;
}

/* Reflection/Glare - More subtle and dynamic */
.dot-matrix-glare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(
        115deg, 
        rgba(255,255,255,0.08) 0%, 
        transparent 30%, 
        rgba(255,255,255,0.03) 50%, 
        transparent 70%,
        rgba(255,255,255,0.05) 100%
    );
}