* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(ellipse at 50% 34%, #14102c 0%, #08060f 62%, #04030a 100%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: #cfcfee;
  overflow: hidden;
}

#wrap {
  position: relative;
  width: 1280px;
  height: 720px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  
  --sprite-w: 57px;
  --sprite-h: 88px;
  
  --sprite-frames: 4;
  --frame-time: 0.150s;   
  
  
  --stage-w: 640px;
  --stage-h: 360px;
  --hud-h: 38px;
  --scene-b: 322px;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: 0 0;
  background: #05040c;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 0 0 2px #191333,
    0 0 0 4px #0b0918,
    0 0 0 6px #241b45,
    0 14px 60px rgba(0, 0, 0, 0.72),
    0 0 90px rgba(120, 70, 220, 0.18);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

canvas.px, .layer, .obj, .sprite, .rankicon {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}


.scene {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--scene-b);
  overflow: hidden;
}

.layer {
  position: absolute;
  left: -32px;
  width: 624px;
  background-repeat: repeat-x;
  will-change: background-position;
}

.wash {
  position: absolute;
  left: 0;
  top: 148px;
  width: var(--stage-w);
  height: 118px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(8, 6, 20, 0) 0%,
    rgba(8, 6, 20, 0.06) 30%,
    rgba(8, 6, 20, 0.17) 100%);
}

.world {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--scene-b);
  will-change: transform;
}

.obj { position: absolute; background-repeat: no-repeat; }


.runner {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  cursor: pointer;
  will-change: transform;
}

.sprite {
  position: absolute;
  left: calc(-0.5 * var(--sprite-w));      
  width: var(--sprite-w);
  height: var(--sprite-h);
  background-repeat: repeat-x;
  background-size: calc(var(--sprite-frames) * var(--sprite-w)) var(--sprite-h);
  animation: run calc(var(--sprite-frames) * var(--frame-time))
             steps(var(--sprite-frames)) infinite;
  transition: filter 0.12s linear;
  box-shadow: none;
}

@keyframes run {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-1 * var(--sprite-frames) * var(--sprite-w)); }
}

.sprite.pop {
  
  filter: brightness(1.35) saturate(1.15) drop-shadow(0 0 4px #7dffb8);
}

.plate {
  position: absolute;
  transition: filter 0.12s linear;
}

.runner:hover .plate { filter: brightness(1.3); }
.runner:hover .plate-cv { outline: 1px solid rgba(255, 255, 255, 0.35); }

.plate-cv { display: block; }

.connector {
  position: absolute;
  top: 205px;
  width: 1px;
  background: rgba(178, 178, 220, 0.34);
}

.delta {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 400;
}

.delta.rise { animation: rise 1.35s cubic-bezier(0.2, 0.7, 0.3, 1); }


.branches {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(8, 6, 20, 0.86);
  border-top: 1px solid #3b2f68;
  z-index: 9999;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.branchbtn {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #3b2f68;
  background: rgba(24, 18, 51, 0.9);
  color: #9d9dc6;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s linear, color 0.12s linear, border-color 0.12s linear;
}
.branchbtn:hover { color: #e9e9f6; border-color: #6a5aa8; }
.branchbtn:focus-visible { outline: 2px solid #6ee7a8; outline-offset: 2px; }
.branchbtn.on {
  background: #6ee7a8;
  border-color: #6ee7a8;
  color: #0b1020;
  font-weight: 600;
}


.plane {
  position: absolute;
  left: 0;
  width: var(--sprite-w);
  height: var(--sprite-h);
  background-repeat: repeat-x;
  background-size: calc(var(--sprite-frames) * var(--sprite-w)) var(--sprite-h);
  animation: run calc(var(--sprite-frames) * var(--frame-time))
             steps(var(--sprite-frames)) infinite;
  will-change: transform;
  pointer-events: none;
  z-index: 40;
}

@keyframes rise {
  0%   { opacity: 0; transform: translateY(7px); }
  14%  { opacity: 1; transform: translateY(0); }
  68%  { opacity: 1; transform: translateY(-7px); }
  100% { opacity: 0; transform: translateY(-15px); }
}

.rankicon {
  position: absolute;
  width: 11px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: 11px 12px;
  pointer-events: none;
}


.hud {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--hud-h);
  background: linear-gradient(#181233 0%, #0d0a1f 100%);
  border-bottom: 1px solid #3b2f68;
  z-index: 500;
}

.hudline { position: absolute; height: 7px; }
.hudline canvas { display: block; }
.hud .title { left: 10px; top: 4px; }
.hud .when  { right: 10px; top: 4px; }
.hud .live  { top: 15px; }
.hud .total { right: 10px; top: 15px; }
.hud .badge { position: absolute; left: 145px; top: 1px; }  
.hud .badge canvas { display: block; }

.hudbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--stage-w);
  height: 3px;
  background: #1a1435;
}

.prog-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #6e5bd8 0%, #f8d048 70%, #ffd85e 100%);
  box-shadow: 0 0 6px rgba(248, 208, 72, 0.5);
}



.tag { position: absolute; }
.tag-cv { display: block; }
.runner:hover .tag { filter: brightness(1.35); }

.tail {
  position: absolute;
  width: 1px;
  height: 5px;
  background: rgba(178, 178, 220, 0.38);
}

.crown {
  position: absolute;
  
  width: 29px;
  height: 21px;
  background-repeat: no-repeat;
  background-size: 29px 21px;
  image-rendering: pixelated;
  pointer-events: none;
}


.standings {
  position: absolute;
  z-index: 600;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}
.standings canvas { display: block; }


.ticker {
  position: absolute;
  left: 0;
  top: var(--scene-b);
  width: var(--stage-w);
  height: calc(var(--stage-h) - var(--scene-b));
  background: linear-gradient(#100c26 0%, #171236 100%);
  border-top: 1px solid #3b2f68;
  z-index: 500;
  overflow: hidden;
}

.ticklabel {
  position: absolute;
  left: 8px;
  top: 13px;
  height: 7px;
}
.ticklabel canvas { display: block; }

.tbtn {
  position: absolute;
  top: 9px;
  width: 16px;
  height: 15px;
  padding: 0;
  line-height: 0;
  background: #1d1740;
  border: 1px solid #4a3d80;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tbtn:hover { background: #2b2360; border-color: #7a66d0; }
.tbtn:active { transform: translateY(1px); }
.tbtn:nth-of-type(1) { left: 84px; }


.tickclip {
  position: absolute;
  left: 128px;
  right: 0;
  top: 13px;
  height: 8px;
  overflow: hidden;
}

.tickstrip {
  position: absolute;
  left: 0;
  top: 0;
  height: 8px;
  will-change: transform;
}


.scanlines {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  pointer-events: none;
  z-index: 800;
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0.20) 0px, rgba(0, 0, 0, 0.20) 1px,
    rgba(255, 255, 255, 0.012) 1px, rgba(255, 255, 255, 0.012) 3px);
  opacity: 0.55;
}

.vignette {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  pointer-events: none;
  z-index: 810;
  background: radial-gradient(ellipse at 50% 46%,
    rgba(0, 0, 0, 0) 42%, rgba(4, 2, 12, 0.30) 78%, rgba(4, 2, 12, 0.62) 100%);
}


.card {
  position: absolute;
  z-index: 850;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}
.card canvas { display: block; }


@media (prefers-reduced-motion: reduce) {
  .sprite { animation: none; }
  .delta.rise { animation: none; opacity: 1; }
  .runner, .plate, .sprite { transition: none; }
}


.branches { display: none; }
.bossrunner { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }