/* Opony Pro Racer — WordPress Plugin CSS */

.opr-wrapper {
    font-family: 'Press Start 2P', monospace;
    color: #eeeeff;
    background: #0d0d1a;
    padding: 12px;
    border-radius: 4px;
}

.opr-header {
    text-align: center;
    margin-bottom: 8px;
}

.opr-logo {
    font-size: 9px;
    color: #ff8800;
    letter-spacing: 2px;
    text-shadow: 0 0 8px #ff8800;
}

.opr-title {
    font-size: 16px;
    color: #00ff88;
    text-shadow: 0 0 12px #00ff88, 2px 2px 0 #005533;
    margin-top: 4px;
}

/* Canvas wrap — position relative for overlay */
.opr-canvas-wrap {
    position: relative;
    line-height: 0;
}

#opr-game {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    border: 3px solid #00ff88;
    box-shadow: 0 0 20px #00ff88, 0 0 60px rgba(0,255,136,0.15);
    image-rendering: pixelated;
    background: #1a1a2e;
}

#opr-scanlines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0,0,0,0.08) 3px,
        rgba(0,0,0,0.08) 4px
    );
}

/* Overlay */
#opr-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(13,13,26,0.88);
    gap: 12px;
    z-index: 10;
}

#opr-overlay.opr-hidden {
    display: none;
}

#opr-overlay-title {
    font-size: 20px;
    color: #00ff88;
    text-shadow: 0 0 16px #00ff88, 3px 3px 0 #003322;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

.opr-sub {
    font-size: 7px;
    color: #00ccff;
    text-align: center;
    line-height: 2.2;
}

.opr-best {
    font-size: 8px;
    color: #f0c040;
}

#opr-start-btn {
    background: #00ff88;
    color: #0d0d1a;
    border: none;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    padding: 12px 24px;
    cursor: pointer;
    box-shadow: 4px 4px 0 #003322;
    transition: transform 0.1s, box-shadow 0.1s;
    animation: opr-pulse 1s infinite;
    line-height: 1;
}

#opr-start-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #003322;
}

@keyframes opr-pulse {
    0%, 100% { box-shadow: 4px 4px 0 #003322, 0 0 0 rgba(0,255,136,0); }
    50%       { box-shadow: 4px 4px 0 #003322, 0 0 16px rgba(0,255,136,0.5); }
}

/* HUD */
.opr-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 7px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.5);
    border: 2px solid #2d2d44;
    flex-wrap: wrap;
    gap: 4px;
}

.opr-score-label { color: #00ccff; }
.opr-score-label span { color: #eeeeff; }
.opr-lives { color: #ff3355; }
.opr-speed { color: #ff8800; }

/* Footer */
.opr-footer {
    text-align: center;
    margin-top: 6px;
    font-size: 6px;
    color: #555577;
}

.opr-footer a {
    color: #ff8800;
    text-decoration: none;
}

.opr-footer a:hover {
    text-decoration: underline;
}