/* =========================================
   HIGHLIGHT.CSS - MODO HIGHLIGHT
   ========================================= */

.video-frame {
    width: 100%; max-width: 700px; margin-bottom: 30px; border: 2px solid #c8aa6e; border-radius: 8px;
    overflow: hidden; position: relative; box-shadow: 0 0 25px rgba(200, 170, 110, 0.2); background: #000;
}
.video-frame iframe { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; transform: scale(1.35); pointer-events: none; }
.click-blocker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: transparent; }

.options-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; max-width: 800px; }
.option-card {
    background-color: #1e2328; border: 1px solid #333; border-radius: 6px; padding: 10px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; transition: all 0.2s; position: relative;
}
.option-card:hover { background-color: #2a3138; border-color: #c8aa6e; transform: translateY(-3px); }

.attempt-badge {
    position: absolute; top: 5px; left: 5px; background-color: rgba(0, 0, 0, 0.9); color: #fff; font-size: 10px;
    font-weight: bold; padding: 2px 6px; border-radius: 4px; display: none; border: 1px solid #444; z-index: 10;
}
.option-photo { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; border: 2px solid #333; margin-bottom: 8px; }
.option-name { font-size: 11px; font-weight: bold; color: #ccc; text-align: center; text-transform: uppercase; }

.option-card.correct { background-color: rgba(44, 186, 82, 0.25) !important; border-color: #2cba52 !important; opacity: 1; pointer-events: none; }
.option-card.correct .attempt-badge { display: block; border-color: #2cba52; color: #55ff55; }
.option-card.wrong { background-color: rgba(205, 46, 58, 0.25) !important; border-color: #cd2e3a !important; opacity: 0.9; pointer-events: none; }
.option-card.wrong .attempt-badge { display: block; border-color: #cd2e3a; color: #ff5555; }

@media (max-width: 600px) { .options-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } .option-photo { width: 45px; height: 45px; } .option-name { font-size: 10px; } }

#highlight-page .community-footer { margin-top: 20px !important; max-width: 700px; }