/* Zone du jeu Skate Runner. Les ecrans communs (accueil, rebours, HUD score,
   fin, classement) viennent de jeu.css ; ici, la route et son HUD propre
   (distance a gauche, vies et logo a droite ; le score du socle est au centre). */
.rn-jeu { position: fixed; inset: 0; z-index: 1; background: #1a1a20 center / cover no-repeat; touch-action: none; }
.rn-jeu[hidden] { display: none; }
.rn-canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: default; font-family: var(--police, Arial, Helvetica, sans-serif); }
.rn-hud { position: absolute; top: 18px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 16; pointer-events: none; color: var(--jeu-hud-texte, #ffffff); text-shadow: 0 3px 7px rgba(0, 0, 0, .65); }
.rn-distance { font-size: clamp(18px, 5vw, 24px); font-weight: 900; letter-spacing: 1px; line-height: 1; padding-top: 14px; }
.rn-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rn-vies { font-size: clamp(22px, 6vw, 30px); font-weight: 900; letter-spacing: 3px; line-height: 1; text-align: right; }
.rn-vies-libelle { display: block; font-size: 11px; letter-spacing: 2px; margin-bottom: 2px; opacity: .8; }
.rn-vie { opacity: .95; }
.rn-vie-perdue { color: #ff2d55; }
.rn-logo { max-width: 96px; max-height: 44px; object-fit: contain; }
.rn-logo[hidden] { display: none; }
/* Route pixel art : police pixel sur les titres et boutons, police systeme
   sur ce qu il faut pouvoir lire (saisie, consentements, mentions). Ses
   ligatures et son faux gras (les 8 deviennent des carres) sont coupes. */
.rn-pixel { font-variant-ligatures: none; font-synthesis: none; }
.rn-pixel .jeu-champs input, .rn-pixel .jeu-champs select, .rn-pixel .jeu-consentement, .rn-pixel .jeu-info { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }

/* Ecran d ouverture : la mission du heros, avant la premiere partie. */
.rn-intro { position: absolute; inset: 0; z-index: 30; overflow: hidden; background: linear-gradient(#0c1233, #16204f 62%, #0c1233); color: #10142f; font-family: var(--police, Arial, Helvetica, sans-serif); }
.rn-intro[hidden] { display: none; }
.rn-intro-ouverte .jeu-hud, .rn-intro-ouverte .rn-hud, .rn-fin-ouverte .jeu-hud, .rn-fin-ouverte .rn-hud { visibility: hidden; }
.rn-intro-go[hidden] { display: none; }
/* Partie perdue : le score est dans la bulle. La carte de fin du socle reste (elle
   porte rejouer, lots et avis) mais sans voile ni fond, calee en bas a droite. */
body.rn-fin-ouverte:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.rn-fin-ouverte:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin-carte { width: 52%; margin: auto 0 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.rn-fin-ouverte:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin > .jeu-fin-titre, body.rn-fin-ouverte:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin > .jeu-fin-score { display: none; }
body.rn-fin-ouverte:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin { text-shadow: 0 2px 4px #000; }
body.rn-fin-ouverte:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-rejouer, body.rn-fin-ouverte:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) #jeu-fin-cta { min-height: 54px; border: 4px solid #10142f; border-radius: 0; outline: 3px solid #ffffff; font-size: clamp(20px, 5.4vw, 28px); }
.rn-intro-fond { position: absolute; right: 0; bottom: 0; width: 100%; height: 34%; object-fit: cover; object-position: right bottom; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.rn-intro-fond[hidden], .rn-intro-logo[hidden] { display: none; }
.rn-intro-logo { position: absolute; top: max(34px, 5vh); right: 16px; width: clamp(120px, 36vw, 220px); height: auto; }
.rn-intro-bulle { position: absolute; top: clamp(112px, 19vh, 170px); left: 16px; right: 16px; padding: 26px 16px 16px; background: #f5eee6; border: 4px solid #10142f; outline: 4px solid #ffffff; }
.rn-intro-bulle::after { content: ''; position: absolute; left: 34px; bottom: -28px; width: 28px; height: 24px; background: #f5eee6; clip-path: polygon(0 0, 100% 0, 0 100%); }
.rn-intro-nom { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); padding: 3px 40px; color: #ffffff; font-size: 26px; line-height: 1.1; background: conic-gradient(#ffffff 25%, #10142f 0 50%, #ffffff 0 75%, #10142f 0) left 6px center / 12px 12px no-repeat, conic-gradient(#ffffff 25%, #10142f 0 50%, #ffffff 0 75%, #10142f 0) right 6px center / 12px 12px no-repeat, #10142f; outline: 3px solid #ffffff; white-space: nowrap; }
.rn-intro-mission, .rn-intro-attention { margin: 0; font-size: clamp(23px, 6.2vw, 34px); line-height: 1.12; }
.rn-intro-attention { margin-top: 8px; color: #c8102e; }
.rn-intro-gmk { position: absolute; left: -9%; bottom: 0; width: auto; height: min(54%, 124vw); max-width: 100%; object-fit: contain; object-position: left bottom; }
.rn-intro-action { position: absolute; right: 14px; bottom: 18px; width: 50%; text-align: center; }
.rn-intro-go { width: 100%; min-height: 54px; padding: 8px 10px; border: 4px solid #10142f; outline: 3px solid #ffffff; background: var(--jeu-bouton-fond, #ffd13b); color: var(--jeu-bouton-texte, #10142f); font: inherit; font-size: clamp(22px, 6vw, 30px); cursor: pointer; }
.rn-intro-go:hover, .rn-intro-go:focus-visible { filter: brightness(1.1); }
.rn-intro-commandes { margin: 8px 0 0; color: #3b3f5c; font-size: 13px; line-height: 1.25; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
@media (min-aspect-ratio: 1/1) {
  .rn-intro-gmk { left: 0; height: 90%; max-width: 50%; }
  .rn-intro-fond { width: auto; height: 56%; max-width: 100%; object-fit: contain; }
  .rn-intro-bulle { top: 26%; left: 44%; right: 3%; }
  .rn-intro-bulle::after { left: -28px; top: 44px; bottom: auto; width: 24px; height: 28px; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
  .rn-intro-logo { width: clamp(120px, 16vw, 240px); top: 36px; }
  .rn-intro-action { width: 34%; right: 11%; bottom: 8%; }
  body.rn-fin-ouverte:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin-carte { width: 34%; margin: auto 11% 4% auto; }
  .rn-intro-mission, .rn-intro-attention { font-size: clamp(22px, 2.8vw, 40px); }
}