/* Generated from labs/pixel-producers/index.html by tools/port_to_site.py. Edit the lab, then re-run. */
.stage {
      --ground-h: 150px;
      position: relative;
      z-index: 1;
      height: 520px;
      overflow: hidden;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
    }

    .stage .ground {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: var(--ground-h);
      background: var(--ground);
    }

    /* scrolling road markings on the ground, just under the horizon */
    .stage .road {
      position: absolute;
      left: 0; right: 0;
      bottom: calc(var(--ground-h) - 34px);
      height: 3px;
      background-image: linear-gradient(90deg, rgba(255,255,255,0.10) 0 22px, transparent 22px 64px);
      background-size: 64px 3px;
    }

    .skyline {
      position: absolute;
      left: 0;
      bottom: var(--ground-h);
      height: 150px;
      width: 100%;
      pointer-events: none;
    }
    .skyline .track {
      position: absolute;
      left: 0; bottom: 0;
      display: flex;
      align-items: flex-end;
      will-change: transform;
    }
    .skyline .strip { display: flex; align-items: flex-end; gap: 1px; padding-right: 1px; }

    .building { flex: 0 0 auto; position: relative; background: var(--ground); }
    .skyline.far .building { background: #161c30; }
    .skyline.far { opacity: 0.9; }

    .citylight {
      position: absolute;
      width: 2px;
      height: 2px;
      background: currentColor;
      color: #4a7cf7;
      animation: dream-shimmer 5s linear infinite;
    }
    .skyline.far .citylight { opacity: 0.45; }
    .stage.party .citylight { animation-duration: 1.03s !important; }

    canvas.layer {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }
    canvas.under { z-index: 1; }
    canvas.gl { z-index: 2; pointer-events: none; }
    canvas.over { z-index: 3; }

    .name-tag {
      position: absolute;
      z-index: 4;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      font-family: 'PPMondwest', monospace;
      font-size: 20px;
      letter-spacing: 1px;
      color: #fff;
      pointer-events: none;
      white-space: nowrap;
      will-change: transform;
    }
    /* 8-bit play buttons under each name: notched 2px outline, hard pixel
       bevel (light top-left, shade bottom-right), a step down when pressed */
    .play-btn {
      --face: #4a7cf7; --hi: #9bb8ff; --lo: #2a4fb8; --text: #fff; --edge: #e8ecff;
      pointer-events: auto;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 2px;
      padding: 7px 12px 6px 10px;
      font-family: 'Press Start 2P', monospace;
      font-size: 10px;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--text);
      background: var(--face);
      box-shadow:
        0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge),
        inset 2px 2px 0 0 var(--hi), inset -2px -2px 0 0 var(--lo),
        0 6px 0 0 rgba(0, 0, 0, 0.45);
      text-shadow: 1px 1px 0 var(--lo);
    }
    /* a pixel play arrow */
    .play-btn::before {
      content: "";
      width: 0; height: 0;
      border-style: solid;
      border-width: 4px 0 4px 5px;
      border-color: transparent transparent transparent currentColor;
    }
    .play-btn.dance { --face: #f7d96c; --hi: #fff3b8; --lo: #c9a400; --text: #0a0a08; text-shadow: none; }
    .play-btn:hover { --face: #6b95ff; }
    .play-btn.dance:hover { --face: #ffe68a; }
    .play-btn:active {
      transform: translateY(2px);
      box-shadow:
        0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge),
        inset 2px 2px 0 0 var(--lo), inset -2px -2px 0 0 var(--hi),
        0 2px 0 0 rgba(0, 0, 0, 0.45);
    }

@media (max-width: 600px) {
      .stage { height: 440px; --ground-h: 130px; }
}