/* =========================================================================
   rush-hour.css — /jeux/rush-hour. Complète morpion.css (en-tête,
   panneau, score, cartes d'explication).
   ========================================================================= */

.rh {
    --rh-cadre: #CFC8E6;
    --rh-sol: #E9E5F5;
    --rh-case: rgba(90, 70, 160, 0.08);
    --rh-marge: 12px;
}
html.dark-mode .rh {
    --rh-cadre: #2A2140;
    --rh-sol: #151024;
    --rh-case: rgba(168, 133, 255, 0.08);
}

.rh-cadre { width: min(100%, 440px); }
.rh-plateau {
    padding: var(--rh-marge);
    border-radius: 20px;
    background: var(--rh-cadre);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12), var(--shadow-card);
}
.rh-grille {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 3px;
    aspect-ratio: 1;
    border-radius: 10px;
    background: var(--rh-sol);
    padding: 3px;
    /* Pas d'une case à la suivante, case + espacement. Les pourcentages se
       résolvent chez les véhicules, sur la boîte de rembourrage de la grille :
       3 px de bord + 6 cases + 5 espaces de 3 px = 100 %. */
    --rh-pas: calc((100% - 3px) / 6);
}
.rh-case { border-radius: 6px; background: var(--rh-case); }

/* Ouverture du bord droit, au niveau de la troisième ligne : la voie
   traverse le cadre et une flèche indique la sortie. */
.rh-sortie {
    position: absolute;
    left: 100%;
    top: calc(3px + 2 * var(--rh-pas));
    height: calc(var(--rh-pas) - 3px);
    width: calc(var(--rh-marge) + 26px);
    display: grid;
    place-items: center end;
    padding-right: 2px;
    background: linear-gradient(90deg, var(--rh-sol) calc(var(--rh-marge) + 3px), transparent);
    color: #E11D48;
    font-weight: 800;
    font-size: 1.2rem;
}

/* --- Véhicules --------------------------------------------------------------
   --fixe : ligne (ou colonne) du véhicule ; --pos : sa case de départ sur son
   axe, fractionnaire pendant un glissement ; --long : 2 ou 3 cases. */
.rh-vehicule {
    position: absolute;
    padding: 0;
    border: 4px solid transparent;
    background-clip: padding-box;
    border-radius: 14px;
    cursor: grab;
    touch-action: none;
    transition: left 0.16s ease, top 0.16s ease, box-shadow 0.15s ease;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.35);
    background-color: var(--rh-teinte, #64748B);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
}
.rh-vehicule.est-horizontal {
    left: calc(3px + var(--pos) * var(--rh-pas));
    top: calc(3px + var(--fixe) * var(--rh-pas));
    width: calc(var(--long) * var(--rh-pas) - 3px);
    height: calc(var(--rh-pas) - 3px);
}
.rh-vehicule.est-vertical {
    left: calc(3px + var(--fixe) * var(--rh-pas));
    top: calc(3px + var(--pos) * var(--rh-pas));
    width: calc(var(--rh-pas) - 3px);
    height: calc(var(--long) * var(--rh-pas) - 3px);
}
/* Pare-brise : une bande sombre vers l'avant du véhicule. */
.rh-vehicule::before {
    content: "";
    position: absolute;
    border-radius: 5px;
    background: rgba(15, 10, 35, 0.35);
}
.rh-vehicule.est-horizontal::before { top: 18%; bottom: 18%; right: 16%; width: 16%; }
.rh-vehicule.est-vertical::before { left: 18%; right: 18%; top: 16%; height: 16%; }
.rh-vehicule.est-camion.est-horizontal::before { width: 10%; }
.rh-vehicule.est-camion.est-vertical::before { height: 10%; }

.rh-vehicule.est-tenu { cursor: grabbing; transition: box-shadow 0.15s ease; z-index: 2; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 10px 24px rgba(0, 0, 0, 0.3); }
.rh-vehicule:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 1px; z-index: 2; }
.rh-vehicule:disabled { cursor: default; }
.rh-vehicule.est-indice { animation: rh-indice 0.5s ease 3; z-index: 2; }
@keyframes rh-indice {
    50% { box-shadow: 0 0 0 4px var(--accent-color), 0 0 22px 6px var(--accent-color); }
}

.rh-rouge { --rh-teinte: #E11D48; }
.rh-teinte-0 { --rh-teinte: #2563EB; }
.rh-teinte-1 { --rh-teinte: #16A34A; }
.rh-teinte-2 { --rh-teinte: #F97316; }
.rh-teinte-3 { --rh-teinte: #7C3AED; }
.rh-teinte-4 { --rh-teinte: #0D9488; }
.rh-teinte-5 { --rh-teinte: #EC4899; }
.rh-teinte-6 { --rh-teinte: #EAB308; }
.rh-teinte-7 { --rh-teinte: #92400E; }
.rh-teinte-8 { --rh-teinte: #38BDF8; }
.rh-teinte-9 { --rh-teinte: #84CC16; }
.rh-teinte-10 { --rh-teinte: #64748B; }
.rh-teinte-11 { --rh-teinte: #4338CA; }

/* Victoire : la voiture rouge file par la sortie. */
.rh.est-gagne .rh-rouge {
    left: calc(3px + 7.5 * var(--rh-pas));
    opacity: 0;
    transition: left 0.7s cubic-bezier(0.5, 0, 0.9, 0.5), opacity 0.3s ease 0.45s;
}

/* --- Panneau --------------------------------------------------------------- */
.rh-niveaux { display: flex; flex-wrap: wrap; gap: 6px; }
.rh-niveau {
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.rh-niveau:hover,
.rh-niveau:focus-visible { border-color: var(--accent-color); }
.rh-niveau.est-resolu { background: var(--accent-soft); color: var(--accent-color); }
.rh-niveau.est-actif { border: 2px solid var(--accent-color); }

.rh-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-boutons .btn { padding: 10px 16px; }
.rh-boutons .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

@media (max-width: 560px) {
    .rh { --rh-marge: 8px; }
    .rh-vehicule { border-width: 3px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .rh-vehicule,
    .rh.est-gagne .rh-rouge { transition: none; }
    .rh-vehicule.est-indice { animation: none; outline: 3px solid var(--accent-color); }
}