/*
 * Le jeu, repris de l'intranet (templates/jeu_rdr/_style.html.twig, partie
 * « LE JEU »). Les variables --ds-* sont celles du design system de
 * l'intranet : on les rebranche ici sur nos tokens (app.css).
 */
#rdr-game {
    --ds-space-2: var(--espace-2);
    --ds-space-3: var(--espace-3);
    --ds-space-4: var(--espace-4);
    --ds-space-5: 1.25rem;
    --ds-space-8: var(--espace-8);
    --ds-radius: var(--rayon);
    --ds-radius-sm: var(--rayon-petit);
    --ds-font-body: var(--police);
    --ds-text: var(--encre);
    --ds-text-muted: var(--encre-douce);
    --ds-text-sm: .875rem;
    --ds-text-xs: .75rem;
    --ds-border: var(--bord);
    --ds-field-bg: rgba(255, 255, 255, .08);
}

/* ==================================================================
   LE JEU
   Tout ce qui suit vient de `css/style.css`, prefixe `rdr-`.
   Les regles `html, body` d'origine ont ete supprimees : elles
   repeignaient et bloquaient le defilement de la page entiere.
   ================================================================== */

#rdr-game,
#rdr-game * { box-sizing: border-box; }

#rdr-game {
    position: relative;
    display: grid;
    place-items: center;
    padding: var(--ds-space-4);
    border-radius: var(--ds-radius);
    background: #0d1b2a;
    color: #f1faee;
    font-family: var(--ds-font-body), system-ui, sans-serif;
    overscroll-behavior: none;
}

/* #rdr-scene garde le ratio 16:9 et occupe le plus de place possible
   sans pousser le bas du jeu hors de l'ecran. `container-type: size`
   en fait la reference des unites `cq*` utilisees plus bas. */
#rdr-scene {
    position: relative;
    width: min(100%, max(20rem, calc((100vh - 15rem) * 16 / 9)));
    aspect-ratio: 16 / 9;
    container-type: size;
}

#rdr-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #1d3557;
    touch-action: none;
}

/* Le plein ecran rend au jeu la fenetre entiere, qui redevient sa
   reference de taille naturelle. */
#rdr-game:fullscreen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}
#rdr-game:fullscreen #rdr-scene {
    width: min(100vw, calc(100vh * 16 / 9));
}

/* Les ecrans DOM se superposent exactement au canvas. */
#rdr-screens {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}
#rdr-screens > * { pointer-events: auto; }

/* --- HUD ---
   En HTML et non dessine dans le canvas : le canvas est agrandi en mode
   « pixelated » pour garder les sprites nets, ce qui rendrait le texte
   illisible. */
#rdr-hud {
    position: absolute;
    inset: 0 0 auto 0;
    pointer-events: none;
}
#rdr-hud[hidden] { display: none; }

.rdr-hud-bar {
    display: flex;
    align-items: baseline;
    gap: clamp(.75rem, 3cqw, 2.5rem);
    padding: clamp(.3rem, 1.2cqh, .7rem) clamp(.6rem, 2cqw, 1.2rem);
    background: linear-gradient(#0d1b2acc, #0d1b2a00);
    font-variant-numeric: tabular-nums;
    font-size: clamp(.7rem, 2.2cqh, 1.05rem);
    letter-spacing: .06em;
    text-shadow: 0 1px 2px #0d1b2a;
}

.rdr-hud-bloc { opacity: .75; }
.rdr-hud-bloc b { font-weight: 700; opacity: 1; }
#rdr-hud-multi { color: #ffd60a; opacity: 1; font-weight: 700; }
#rdr-hud-vies { color: #e63946; letter-spacing: .1em; }

/* Le temps est repousse a droite, et vire au rouge dans les dernieres secondes. */
.rdr-hud-temps { margin-left: auto; }
.rdr-hud-temps.rdr-urgence b { color: #e63946; }

/* Les boutons tactiles vivent DANS la scene : dehors, ils tomberaient
   dans le cadre de la page, ou ils n'ont rien a faire. */
#rdr-touch {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    pointer-events: none;
}
#rdr-touch .rdr-pad { display: flex; gap: .75rem; pointer-events: auto; }

/* Sans ceci, le "display: flex" ci-dessus l'emporte sur le [hidden] pose
   par le navigateur, et les boutons tactiles restent visibles sur desktop. */
#rdr-touch[hidden] { display: none; }

#rdr-touch button {
    width: 4rem;
    height: 4rem;
    border: 2px solid #f1faee80;
    border-radius: 50%;
    background: #f1faee26;
    color: #f1faee;
    font-size: 1.5rem;
    touch-action: none;
    user-select: none;
}
#rdr-touch button:active { background: #f1faee59; }

/* --- Ecrans --- */
.rdr-panel {
    min-width: min(90cqw, 26rem);
    max-height: 90%;
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: .75rem;
    background: #0d1b2aee;
    border: 2px solid #f1faee33;
    text-align: center;
}

.rdr-panel h1 { margin: 0 0 .25rem; font-size: 1.75rem; color: inherit; font-family: inherit; }
.rdr-panel .rdr-subtitle { margin: 0 0 1rem; opacity: .8; }
.rdr-panel .rdr-hint { margin: 0 0 1.25rem; font-size: .85rem; opacity: .6; }

.rdr-breakdown {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem 1rem;
    margin: 0 0 .75rem;
    font-size: .9rem;
}
.rdr-breakdown dt { text-align: left; opacity: .8; }
.rdr-breakdown dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.rdr-total {
    margin-bottom: 1.25rem;
    padding-top: .5rem;
    border-top: 1px solid #f1faee33;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffd60a;
}

.rdr-btn {
    display: inline-block;
    margin: .25rem;
    padding: .6rem 1.5rem;
    border: 2px solid #f1faee;
    border-radius: .4rem;
    background: transparent;
    color: #f1faee;
    font: inherit;
    cursor: pointer;
}
.rdr-btn:hover { background: #f1faee1a; }
.rdr-btn-primary { background: #e63946; border-color: #e63946; }
.rdr-btn-primary:hover { background: #c1121f; }

/* --- Menu des niveaux ---
   Une carte par etape, avec le record du moment. Le meme registre que
   les boutons du jeu : bord net, angle de .4rem, rouge pour l'accent. */
.rdr-levels {
    display: grid;
    gap: .5rem;
    margin: 0 0 1.25rem;
}

.rdr-level {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: .7rem .9rem;
    border: 2px solid #f1faee40;
    border-radius: .4rem;
    background: #f1faee0f;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.rdr-level:hover,
.rdr-level:focus-visible {
    border-color: #e63946;
    background: #e6394626;
}

.rdr-level__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .3rem;
    background: #e63946;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* `min-width: 0` : sans lui, un sous-titre long pousse la carte hors du
   panneau au lieu de revenir a la ligne. */
.rdr-level__body { display: grid; gap: .1rem; min-width: 0; }
.rdr-level__name { font-weight: 700; }
.rdr-level__sub { font-size: .8rem; opacity: .7; }
.rdr-level__record {
    font-size: .75rem;
    color: #ffd60a;
    font-variant-numeric: tabular-nums;
}

/* --- Classement affiché en fin de partie --- */
.rdr-slot { margin-bottom: 1rem; }

.rdr-form-title { margin: 0 0 .25rem; font-weight: 700; }
.rdr-form-note { margin: 0 0 .5rem; font-size: .85rem; opacity: .75; }
.rdr-form-error { margin: 0; color: #ffb3b3; font-size: .85rem; }

.rdr-ranking { margin: 0; padding: 0; list-style: none; counter-reset: rdr-rank; }
.rdr-ranking li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem .5rem;
    border-radius: .25rem;
    counter-increment: rdr-rank;
}
.rdr-ranking li:nth-child(odd) { background: #f1faee0f; }
.rdr-ranking li::before { content: counter(rdr-rank) '.'; opacity: .6; min-width: 1.5rem; text-align: right; }
.rdr-ranking .rdr-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdr-ranking .rdr-pts { font-variant-numeric: tabular-nums; color: #ffd60a; }

/* --- Empilement ---
   Les ecrans passent au-dessus des boutons tactiles : sans ca, sur
   mobile, un appui destine a « Rejouer » atterrit sur le bouton de saut. */
#rdr-touch   { z-index: 1; }
#rdr-screens { z-index: 2; }

/* Le jeu est la page : il prend la fenêtre entière, sans défilement. */
body.page-jeu {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background: #0d1b2a;
}

body.page-jeu #rdr-game {
    width: 100vw;
    height: 100dvh;
    padding: 0;
    border-radius: 0;
}

/* On ne contraint QUE la largeur : aspect-ratio 16/9 déduit la hauteur. */
body.page-jeu #rdr-scene {
    width: min(100vw, calc(100dvh * 16 / 9));
}

/* --- Fin de partie : formulaire et classement (tâche 12) --- */
.rdr-form { display: grid; gap: .6cqh; text-align: left; }
.rdr-field { display: grid; gap: .3cqh; }
.rdr-field input {
    font: inherit;
    font-size: max(16px, 2.6cqh); /* 16 px minimum : sinon Safari iOS zoome sur le champ */
    padding: .8cqh 1.2cqh;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-petit);
    background: rgba(255, 255, 255, .08);
    color: var(--encre);
}
.rdr-check { display: flex; align-items: center; gap: .8cqh; flex-wrap: wrap; }
.rdr-check input { width: 3cqh; height: 3cqh; }
.rdr-field-error, .rdr-form-error { color: var(--erreur); font-size: .9em; }
.rdr-btn-ghost { background: transparent; border: 1px solid var(--bord); }
.rdr-ranking li.rdr-moi { outline: 2px solid var(--accent); }

/* Le focus donné par la manette doit se voir de loin. */
#rdr-screens button:focus,
#rdr-screens a:focus {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* --- Menu : niveaux et encart manette --- */
.rdr-menu {
    display: grid;
    gap: 2cqh 3cqw;
    /* Les niveaux et l'encart manette se centrent l'un par rapport à l'autre. */
    align-items: center;
}
@container (min-width: 700px) {
    .rdr-menu:has(.rdr-manette:not([hidden])) { grid-template-columns: 1fr 1fr; }
}

.rdr-manette {
    text-align: left;
    padding: 1.5cqh 2cqh;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-petit);
    background: rgba(255, 255, 255, .04);
}
.rdr-manette h2 { margin: 0 0 .5cqh; font-size: 1.1em; }
.rdr-manette__etat { margin: 0; font-weight: 600; color: var(--erreur); }
.rdr-manette--ok .rdr-manette__etat { color: var(--rdr-lagon); }
.rdr-manette__aide { margin: .5cqh 0 0; font-size: .9em; }
.rdr-manette__schema { position: relative; margin: 1cqh auto 0; max-width: 46cqh; }
.rdr-manette__schema img { display: block; width: 100%; height: auto; }
.rdr-manette__pastille {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 3.4cqh;
    height: 3.4cqh;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-encre);
    font-weight: 700;
    font-size: 2cqh;
    box-shadow: 0 0 0 2px var(--rdr-nuit);
}
.rdr-manette__legende { margin: 1cqh 0 0; padding-left: 1.4em; font-size: .9em; }
.rdr-manette__diag { margin: 1cqh 0 0; font: .8em ui-monospace, monospace; color: var(--accent); }