/* ===== Neon Runner (Chrome dino-style) ===== */

.run-wrap{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.run-world{
  position:relative;
  width:min(520px, 96vw);
  aspect-ratio: 3 / 2;
  background:#020617;
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}

.run-sky{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 0%,#38bdf81a,#020617);
  pointer-events:none;
}

.run-ground{
  position:absolute;
  left:0;
  right:0;
  bottom:16%;
  height:4px;
  background:linear-gradient(90deg,#1f2937,#22c55e,#1f2937);
  box-shadow:0 0 18px rgba(34,197,94,.6);
}

/* Player */

.run-player{
  position:absolute;
  bottom:16%;
  left:16%;
  width:40px;
  height:40px;
  border-radius:999px;
  background:linear-gradient(180deg,#e5e7eb,#38bdf8);
  box-shadow:0 0 18px rgba(56,189,248,.9);
  transform:translate(-50%,0);
  will-change:transform;
}
.run-player::before{
  content:'';
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  width:36px;
  height:6px;
  border-radius:999px;
  background:#0f172a;
}

/* Obstacles */

.run-obstacles{
  position:absolute;
  inset:0;
}

/* Base obstacle – ground pylon */
.run-obstacle {
  position: absolute;
  width: 30px;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(248,113,113,.15),
    rgba(168,85,247,.9)
  );
  box-shadow: 0 0 16px rgba(168,85,247,.8);
  bottom: 18%;               /* sits on the “ground” band */
}

/* glowing base ring at the bottom */
.run-obstacle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 30px;
  height: 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(56,189,248,1), transparent 70%);
  opacity: .7;
}

/* Air obstacle – floating drone (higher, shorter) */
.run-obstacle.air {
  height: 40px;
  bottom: 40%; /* floats higher above ground */
  background: radial-gradient(circle at 50% 0%, rgba(248,250,252,.15), transparent 55%),
              linear-gradient(180deg, rgba(56,189,248,.2), rgba(56,189,248,.9));
  box-shadow: 0 0 18px rgba(56,189,248,.9);
}

/* little underside glow for air obstacles */
.run-obstacle.air::after {
  bottom: -10px;
  width: 40px;
  height: 10px;
  background: radial-gradient(circle, rgba(56,189,248,1), transparent 70%);
}

/* Hint */

.run-hint{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:14px;
  color:var(--muted);
  text-shadow:0 4px 16px rgba(0,0,0,.8);
  pointer-events:none;
}

/* Thumbnail on home */

.shot-runner{
  position:relative;
  width:80%;
  aspect-ratio:3/2;
  border-radius:8px;
  background:#020617;
  border:1px solid rgba(148,163,184,.5);
  overflow:hidden;
}
.shot-runner-ground{
  position:absolute;
  left:0;
  right:0;
  bottom:24%;
  height:4px;
  background:linear-gradient(90deg,#1f2937,#22c55e,#1f2937);
}
.shot-runner-char{
  position:absolute;
  bottom:24%;
  left:20%;
  width:16%;
  height:28%;
  border-radius:6px;
  background:linear-gradient(180deg,#e5e7eb,#38bdf8);
}
.shot-runner-obstacle{
  position:absolute;
  bottom:24%;
  right:18%;
  width:10%;
  height:28%;
  border-radius:4px;
  background:linear-gradient(180deg,#22c55e,#0ea5e9);
}

/* Mobile tweaks */

@media (max-width:540px){
  .run-world{
    aspect-ratio: 9 / 8;
  }
}

/* Layering for parallax */
.run-world { position: relative; }
.run-sky { z-index: 0; }
.run-star { z-index: 1; }
.run-ground-item { z-index: 1; }
.run-ground { z-index: 2; }
.run-obstacles { z-index: 3; }
.run-player { z-index: 4; }
.run-hint { z-index: 5; }

/* Stars */
.run-star{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:999px;
  background:#e5e7eb;
  opacity:0.7;
  box-shadow:0 0 8px rgba(248,250,252,.8);
}

/* Ground decor (non-collidable) */
.run-ground-item {
  position: absolute;
  width: 12px;
  height: 14px;
  background: transparent;
}

/* two glowing blades */
.run-ground-item::before,
.run-ground-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 12px;
  border-radius: 999px;
  background: var(--neon-green);
  box-shadow: 0 0 6px rgba(34,197,94,.85);
}

.run-ground-item::before {
  left: 3px;
  transform: rotate(-10deg);
}

.run-ground-item::after {
  left: 7px;
  transform: rotate(8deg);
}

.run-world {
  background: transparent;
}

/* ground line already present; just ensure neon green core */
.run-ground {
  background: linear-gradient(90deg, #1f2937, var(--neon-green), #1f2937);
}

/* runner */
.run-player {
  background: linear-gradient(180deg, #e5e7eb, var(--neon-cyan));
  box-shadow: 0 0 16px rgba(56,189,248,.9);
}

/* obstacles */
.run-obstacle {
  background: var(--neon-purple);
  box-shadow: 0 0 16px rgba(168,85,247,.8);
}

/* stars + ground decor, based on what we added earlier */
.run-star {
  background: #e5e7eb;
  box-shadow: 0 0 10px rgba(248,250,252,.9);
}
.run-ground-item {
  background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
}