/*
 * StarshipOS — Circuit Repair Puzzle Styles (CC_063)
 * Industrial / electrical theme: dark panel, neon-green connections.
 * Extends puzzle-base.css variables.
 */

/* ── Container ──────────────────────────────────────────────────────────── */
.circuit-puzzle-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    color: var(--puzzle-text, #c8e8c8);
    background: var(--puzzle-bg, #0a120a);
    font-family: 'Courier New', Courier, monospace;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.circuit-puzzle-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 200, 80, 0.06);
    border: 1px solid rgba(0, 200, 80, 0.3);
    border-radius: var(--puzzle-radius, 6px);
}

.circuit-puzzle-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.circuit-puzzle-subtitle {
    font-size: 0.75rem;
    color: var(--puzzle-text-muted, #5a7a5a);
    letter-spacing: 0.04em;
}

/* ── Instructions ───────────────────────────────────────────────────────── */
.circuit-instructions {
    font-size: 0.78rem;
    color: #7aaa7a;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 120, 40, 0.08);
    border-left: 3px solid #00aa44;
    border-radius: 0 4px 4px 0;
}

.circuit-instructions p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.circuit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.72rem;
}

.circuit-badge--source {
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid #ffcc00;
    color: #ffcc00;
}

.circuit-badge--target {
    background: rgba(255, 68, 68, 0.15);
    border: 1px solid #ff4444;
    color: #ff4444;
}

/* ── Grid wrapper ───────────────────────────────────────────────────────── */
.circuit-grid-wrapper {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}

/* Tile hover glow (applied inline via JS; this provides a CSS fallback) */
.circuit-tile--rotatable:hover {
    filter: brightness(1.4);
}

/* ── Submit row ─────────────────────────────────────────────────────────── */
.circuit-submit-row {
    display: flex;
    justify-content: center;
}

.circuit-submit-btn {
    padding: 0.55rem 1.5rem;
    background: linear-gradient(135deg, #004422, #006633);
    border: 1px solid #00aa44;
    border-radius: 4px;
    color: #00ff88;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.15s, box-shadow 0.15s;
}

.circuit-submit-btn:hover {
    background: linear-gradient(135deg, #006633, #008844);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* ── Result / completion areas ──────────────────────────────────────────── */
.circuit-result-area {
    min-height: 1.5rem;
}

.circuit-complete {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 255, 136, 0.08);
    border: 2px solid #00ff88;
    border-radius: 6px;
}

.circuit-complete-msg {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.7);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.circuit-error {
    padding: 0.5rem 0.75rem;
    color: #ff6666;
    border: 1px solid #aa2222;
    border-radius: 4px;
    font-size: 0.8rem;
}