/* ==========================================================================
   JEU DU JOUR — Retrogaming
   À placer dans : wp-content/themes/understrap-child/css/jeu-du-jour.css
   ========================================================================== */

/* ─── Variables ─────────────────────────────────────────────────────────── */
.jeu-du-jour {
    --green:        #00ff41;
    --green-dim:    #00aa2a;
    --bg:           #0a0a0a;
    --bg-card:      #111111;
    --border:       #00ff41;
}

/* ─── Conteneur principal ────────────────────────────────────────────────── */
.jeu-du-jour {
    background:     var(--bg);
    color:          var(--green);
    border:         2px solid var(--border);
    padding:        24px;
    font-family:    'Courier New', Courier, monospace;
    max-width:      600px;
    position:       relative;
    box-shadow:     0 0 20px rgba(0, 255, 65, 0.15),
                    inset 0 0 40px rgba(0, 255, 65, 0.03);

    /* Annule les styles Bootstrap potentiels */
    box-sizing:     border-box;
    line-height:    1.5;
}

/* Badge "[ JEU DU JOUR ]" en haut du cadre */
.jeu-du-jour::before {
    content:        '[ JEU DU JOUR ]';
    position:       absolute;
    top:            -12px;
    left:           20px;
    background:     var(--bg);
    padding:        0 8px;
    font-size:      11px;
    letter-spacing: 3px;
    color:          var(--green-dim);
    text-transform: uppercase;
}

/* ─── Label contextuel (niveau exact / fallback) ─────────────────────────── */
.jeu-du-jour .jdj-label {
    font-size:      11px;
    letter-spacing: 2px;
    color:          var(--green-dim);
    margin-bottom:  16px;
    text-transform: uppercase;
}

/* ─── Layout principal (cover + infos) ──────────────────────────────────── */
.jeu-du-jour .jdj-main {
    display:        flex;
    gap:            20px;
    align-items:    flex-start;
}

/* ─── Pochette du jeu ────────────────────────────────────────────────────── */
.jeu-du-jour .jdj-cover {
    flex-shrink:        0;
    width:              120px;
    border:             1px solid var(--green-dim);
    image-rendering:    pixelated;
    display:            block;
}

.jeu-du-jour .jdj-cover-placeholder {
    width:          120px;
    height:         160px;
    border:         1px solid var(--green-dim);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      32px;
    flex-shrink:    0;
    color:          var(--green-dim);
}

/* ─── Bloc d'informations ────────────────────────────────────────────────── */
.jeu-du-jour .jdj-info {
    flex: 1;
    min-width: 0; /* évite le dépassement flex */
}

.jeu-du-jour h2 {
    font-size:      18px;
    font-family:    'Courier New', Courier, monospace;
    margin:         0 0 4px;
    color:          var(--green);
    text-shadow:    0 0 8px rgba(0, 255, 65, 0.5);
    line-height:    1.3;

    /* Reset Bootstrap h2 */
    border-bottom:  none;
    padding-bottom: 0;
}

.jeu-du-jour .jdj-year {
    font-size:      12px;
    color:          var(--green-dim);
    margin-bottom:  12px;
    letter-spacing: 1px;
}

.jeu-du-jour .jdj-summary {
    font-size:      13px;
    line-height:    1.6;
    color:          #aaffaa;
    margin:         0;
    max-height:     120px;
    overflow:       hidden;
    mask-image:     linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* ─── Section "autres jeux" ──────────────────────────────────────────────── */
.jdj-others-toggle {
    margin-top:     20px;
    border-top:     1px solid var(--green-dim);
    padding-top:    16px;
}

/* Bouton déroulant */
.jdj-others-btn {
    background:     transparent;
    border:         1px solid var(--green);
    color:          var(--green);
    font-family:    'Courier New', Courier, monospace;
    font-size:      12px;
    letter-spacing: 2px;
    padding:        6px 14px;
    cursor:         pointer;
    text-transform: uppercase;
    transition:     background 0.2s, color 0.2s;
    width:          100%;
    text-align:     left;

    /* Reset Bootstrap button */
    border-radius:  0;
    outline:        none;
    box-shadow:     none;
}

.jdj-others-btn::before {
    content: '▶  ';
}

.jdj-others-btn.open::before {
    content: '▼  ';
}

.jdj-others-btn:hover,
.jdj-others-btn:focus {
    background:     var(--green);
    color:          var(--bg);
    box-shadow:     none;
    outline:        none;
}

/* Liste déroulante */
.jdj-others-list {
    display:    none;
    margin-top: 12px;
    border:     1px solid var(--green-dim);
    background: var(--bg-card);
}

.jdj-others-list.open {
    display: block;
}

/* Item individuel */
.jdj-other-item {
    padding:        10px 14px;
    border-bottom:  1px solid #1a1a1a;
    display:        flex;
    align-items:    center;
    gap:            12px;
    cursor:         default;
    transition:     background 0.15s;
}

.jdj-other-item:last-child {
    border-bottom: none;
}

.jdj-other-item:hover {
    background: #1a1a1a;
}

.jdj-other-item img {
    width:          36px;
    height:         48px;
    object-fit:     cover;
    border:         1px solid var(--green-dim);
    flex-shrink:    0;
    display:        block;
}

.jdj-other-thumb-placeholder {
    width:          36px;
    height:         48px;
    border:         1px solid var(--green-dim);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      16px;
    flex-shrink:    0;
    color:          var(--green-dim);
}

.jdj-other-item .jdj-other-name {
    font-size:  13px;
    color:      var(--green);
}

.jdj-other-item .jdj-other-year {
    font-size:  11px;
    color:      var(--green-dim);
    margin-top: 2px;
}

/* ─── Message d'erreur ───────────────────────────────────────────────────── */
.jeu-du-jour-error {
    background:     #0a0a0a;
    color:          #ff4141;
    border:         2px solid #ff4141;
    padding:        16px 20px;
    font-family:    'Courier New', Courier, monospace;
    font-size:      13px;
    max-width:      600px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .jeu-du-jour {
        padding: 16px;
    }

    .jeu-du-jour .jdj-main {
        flex-direction: column;
    }

    .jeu-du-jour .jdj-cover,
    .jeu-du-jour .jdj-cover-placeholder {
        width:  100%;
        height: auto;
    }

    .jeu-du-jour h2 {
        font-size: 15px;
    }
}