:root {
  --navy: #1d4d76;
  --navy-dark: #153a5c;
  --night-top: #081627;
  --night-bottom: #173a5c;
  --sky: #6fa8d8;
  --white: #ffffff;
  --cyan: #3ec6e0;
  --red: #c0392b;
  --ink: #1d4d76;
  --skin: #f2c29e;
  --court: #7a4e26;
  --court-lit: #c9863f;
  --court-dark: #5c3a1c;
  --lamp-glow: #ffdd88;
  --duration: 4.6s;
  /* trajectoire du joueur (desktop) */
  --x0: -10%;
  --x40: 53%;
  --x55: 71%;
  --x62: 75%;
  --x68: 78%;
  --x72: 80%;
  --x78: 82%;
  --x86: 85%;
  --x100: 122%;
  --hoop-right: 9%;
  --runner-scale: 1.35;
}

@media (max-width:600px) {
  :root {
    --x40: 50%;
    --x55: 62%;
    --x62: 65%;
    --x68: 67%;
    --x72: 69%;
    --x78: 71%;
    --x86: 74%;
    --x100: 120%;
    --hoop-right: 15%;
    --runner-scale: 1.05;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--white);
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: clamp(10px,2vh,18px);
  padding: 16px;
}

.title-wrap {
  position: relative;
  display: inline-block;
  padding-bottom: clamp(8px,2vw,14px);
}

.title {
  color: var(--navy);
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  font-size: clamp(30px,7vw,54px);
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 2px 2px 0 var(--cyan);
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
}

  .divider .line {
    width: 50px;
    height: 2px;
    background: var(--navy);
  }

  .divider .star {
    color: var(--navy);
    font-size: 14px;
  }

.stamp {
  position: absolute;
  right: 1%;
  bottom: -4%;
  display: inline-block;
  color: var(--white);
  background: var(--red);
  padding: 5px 14px;
  border-radius: 6px;
  border: 2px solid var(--navy-dark);
  font-weight: 700;
  font-size: clamp(9px,1.8vw,12px);
  letter-spacing: 2px;
  transform: rotate(-4deg);
  box-shadow: 0 4px 12px rgba(192,57,43,.35);
  z-index: 2;
}

.scene {
  position: relative;
  width: min(940px,92vw);
  height: min(300px,42vh);
  border-radius: 16px;
  background: linear-gradient(var(--night-top), var(--night-bottom));
  border: 4px solid var(--navy);
  box-shadow: 0 20px 40px rgba(8,22,39,.4);
  overflow: hidden;
}

.stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1.5px 1.5px at 10% 15%, #fff 0, transparent 100%), radial-gradient(1.5px 1.5px at 25% 35%, #fff 0, transparent 100%), radial-gradient(1.5px 1.5px at 45% 12%, #fff 0, transparent 100%), radial-gradient(1.5px 1.5px at 60% 28%, #fff 0, transparent 100%), radial-gradient(1.5px 1.5px at 78% 10%, #fff 0, transparent 100%), radial-gradient(1.5px 1.5px at 88% 32%, #fff 0, transparent 100%), radial-gradient(1.5px 1.5px at 15% 45%, #fff 0, transparent 100%), radial-gradient(1.5px 1.5px at 35% 55%, #fff 0, transparent 100%);
  opacity: .7;
}

.moon {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f4ecd8;
  box-shadow: 0 0 18px 6px rgba(244,236,216,.35);
}

.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  background: var(--court);
  border-top: 4px solid var(--court-dark);
}

  .ground::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(90deg, transparent 0 78px, rgba(255,255,255,.15) 78px 80px);
  }

/* ---------- Lampadaire ---------- */
.lamp {
  position: absolute;
  left: 58%;
  bottom: 20%;
  width: 12px;
  height: 74%;
  z-index: 1;
}

  .lamp .pole {
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 4px;
    height: 100%;
    background: var(--navy-dark);
    border-radius: 2px;
  }

  .lamp .arm {
    position: absolute;
    top: 0;
    left: 4px;
    width: 30px;
    height: 4px;
    background: var(--navy-dark);
    border-radius: 2px;
  }

  .lamp .head {
    position: absolute;
    top: -6px;
    left: 28px;
    width: 14px;
    height: 9px;
    background: var(--navy-dark);
    border-radius: 2px 2px 7px 7px;
  }

  .lamp .bulb {
    position: absolute;
    top: -1px;
    left: 31px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lamp-glow);
    box-shadow: 0 0 14px 6px rgba(255,221,136,.75);
  }
  /* l'ampoule (.bulb) est centrée en (35px, 3px) dans le repère de .lamp :
     le cône et le halo au sol sont calculés à partir de ce même point,
     pour rester alignés avec elle quelle que soit la position du lampadaire. */
  .lamp .cone {
    position: absolute;
    top: 3px;
    left: -40px;
    width: 150px;
    height: 230px;
    background: linear-gradient(to bottom, rgba(255,221,136,.28), rgba(255,221,136,0) 80%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .lamp .light-pool {
    position: absolute;
    bottom: 0;
    left: -55px;
    width: 180px;
    height: 34px;
    transform: translateY(50%);
    background: radial-gradient(ellipse at center, rgba(255,221,136,.4) 0%, rgba(255,221,136,0) 70%);
    mix-blend-mode: screen;
    pointer-events: none;
  }

/* ---------- Panier ---------- */
.hoop {
  position: absolute;
  right: var(--hoop-right);
  bottom: 20%;
  width: 70px;
  height: 150px;
}

.pole {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 8px;
  height: 150px;
  background: var(--navy-dark);
  border-radius: 3px;
}

.backboard {
  position: absolute;
  right: 0;
  bottom: 96px;
  width: 44px;
  height: 32px;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 6px;
}

  .backboard::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 2px solid var(--red);
    border-radius: 3px;
  }

.rim {
  position: absolute;
  right: 38px;
  bottom: 92px;
  width: 36px;
  height: 7px;
  background: var(--red);
  border-radius: 3px;
}

.net {
  position: absolute;
  right: 41px;
  bottom: 76px;
  width: 30px;
  height: 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.2));
  clip-path: polygon(0 0,100% 0,78% 100%,22% 100%);
}

.flash {
  position: absolute;
  right: 30px;
  bottom: 66px;
  width: 52px;
  height: 52px;
  background: radial-gradient(circle, rgba(62,198,224,.85) 0%, rgba(62,198,224,0) 70%);
  opacity: 0;
  animation: flash var(--duration) ease-in-out infinite;
}

@keyframes flash {
  0%,66% {
    opacity: 0;
    transform: scale(.6);
  }

  71% {
    opacity: 1;
    transform: scale(1.15);
  }

  80% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    opacity: 0;
  }
}

/* ---------- Joueur ---------- */
.runner-track {
  position: absolute;
  bottom: 20%;
  width: 44px;
  height: 60px;
  transform-origin: bottom left;
  animation: runline var(--duration) cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes runline {
  0% {
    left: var(--x0);
    transform: translateY(0);
  }

  40% {
    left: var(--x40);
    transform: translateY(0);
  }

  55% {
    left: var(--x55);
    transform: translateY(0);
  }

  62% {
    left: var(--x62);
    transform: translateY(-38px);
  }

  68% {
    left: var(--x68);
    transform: translateY(-90px);
  }

  72% {
    left: var(--x72);
    transform: translateY(-106px);
  }

  78% {
    left: var(--x78);
    transform: translateY(-48px);
  }

  86% {
    left: var(--x86);
    transform: translateY(0);
  }

  100% {
    left: var(--x100);
    transform: translateY(0);
  }
}

.runner {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scale(var(--runner-scale));
  transform-origin: bottom left;
}

.part {
  position: absolute;
  border-radius: 4px;
}

.head {
  width: 15px;
  height: 14px;
  top: 0;
  left: 14px;
  background: var(--skin);
  border-radius: 50%;
}

.torso {
  width: 20px;
  height: 18px;
  top: 13px;
  left: 11px;
  background: var(--navy);
  border-radius: 5px;
}

.number {
  position: absolute;
  top: 16px;
  left: 15px;
  width: 14px;
  height: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 9px;
  line-height: 1;
  color: var(--cyan);
  text-align: center;
}

.shorts {
  width: 22px;
  height: 9px;
  top: 30px;
  left: 10px;
  background: var(--sky);
  border-radius: 3px;
}

.leg-l, .leg-r {
  width: 7px;
  height: 14px;
  top: 39px;
  background: var(--skin);
  border-radius: 3px;
}

.leg-l {
  left: 12px;
}

.leg-r {
  left: 22px;
}

.shoe-l, .shoe-r {
  width: 10px;
  height: 5px;
  top: 52px;
  background: var(--white);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.shoe-l {
  left: 10px;
}

.shoe-r {
  left: 20px;
}

.arm-l {
  position: absolute;
  top: 14px;
  left: 6px;
  width: 5px;
  height: 14px;
  border-radius: 3px;
  background: var(--skin);
  transform-origin: top center;
  animation: swing var(--duration) ease-in-out infinite;
}

.arm-r {
  position: absolute;
  top: 14px;
  left: 32px;
  width: 5px;
  height: 16px;
  border-radius: 3px;
  background: var(--skin);
  transform-origin: top center;
  animation: dunkarm var(--duration) ease-in-out infinite;
}

.ball {
  position: absolute;
  bottom: -6px;
  left: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb057, #d9711a);
  box-shadow: inset 0 0 0 1px #a85a1c;
  animation: ballfade var(--duration) ease-in-out infinite;
}

@keyframes swing {
  0% {
    transform: rotate(18deg);
  }

  15% {
    transform: rotate(-18deg);
  }

  30% {
    transform: rotate(18deg);
  }

  45% {
    transform: rotate(-18deg);
  }

  58% {
    transform: rotate(-35deg);
  }

  70%,78% {
    transform: rotate(55deg);
  }

  100% {
    transform: rotate(18deg);
  }
}

@keyframes dunkarm {
  0%,55% {
    transform: rotate(-22deg);
  }

  62% {
    transform: rotate(-65deg);
  }

  68% {
    transform: rotate(-145deg);
  }

  72% {
    transform: rotate(-172deg);
  }

  78% {
    transform: rotate(-115deg);
  }

  88%,100% {
    transform: rotate(-22deg);
  }
}

@keyframes ballfade {
  0%,69% {
    opacity: 1;
  }

  73% {
    opacity: 0;
  }

  96% {
    opacity: 0;
  }

  99%,100% {
    opacity: 1;
  }
}

.leg-l {
  animation: legcycleL .5s ease-in-out infinite;
}

.leg-r {
  animation: legcycleR .5s ease-in-out infinite;
}

.shoe-l {
  animation: legcycleL .5s ease-in-out infinite;
}

.shoe-r {
  animation: legcycleR .5s ease-in-out infinite;
}

.runner {
  animation: bob .5s ease-in-out infinite;
}

@keyframes bob {
  0%,100% {
    transform: translateY(0) scale(var(--runner-scale));
  }

  50% {
    transform: translateY(-3px) scale(var(--runner-scale));
  }
}

@keyframes legcycleL {
  0%,100% {
    transform: translate(0,0) rotate(-14deg);
  }

  50% {
    transform: translate(2px,-2px) rotate(14deg);
  }
}

@keyframes legcycleR {
  0%,100% {
    transform: translate(2px,-2px) rotate(14deg);
  }

  50% {
    transform: translate(0,0) rotate(-14deg);
  }
}

.message {
  color: var(--navy);
  font-size: clamp(12px,2vw,15px);
  font-weight: 500;
  text-align: center;
  line-height: 1.7;
  max-width: 520px;
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .runner-track, .runner, .leg-l, .leg-r, .shoe-l, .shoe-r, .arm-l, .arm-r, .ball, .flash {
    animation: none !important;
  }
}