:root{
  --ink: #0b0f1a;
  --ui: rgba(255,255,255,.8);
  --ui2: rgba(12,12,18,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#0b1220;
  font-family: "Cascadia Mono", "Segoe UI Mono", Menlo, Monaco, monospace;
}

.screen{
  position:relative;
  height:100%;
  width:100%;
  overflow:hidden;
}

.world{
  position:absolute;
  inset:0;
  z-index:0;
}
#bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.sprites{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Pixel sprites */
.sprite{
  position:absolute;
  width:min(22vw, 96px);
  aspect-ratio:1 / 1;
  background-repeat:no-repeat;
  background-size: 96px 32px;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  opacity:.98;
}

.bus{
  width:min(38vw, 180px);
  aspect-ratio:3 / 1;
  background-size: 144px 48px;
  background-image:url("../assets/struggle-bus.svg");
  animation: bus 6s ease-in-out infinite, walk 1.1s steps(3) infinite, drift 9s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.bus::after{
  content:"";
  position:absolute;
  right:80%;
  top:25%;
  width:190%;
  height:55%;
  background: linear-gradient(90deg,
    rgba(255,0,96,.0),
    rgba(255,0,96,.8),
    rgba(255,140,0,.8),
    rgba(255,230,0,.8),
    rgba(0,220,120,.8),
    rgba(0,140,255,.8),
    rgba(150,90,255,.8)
  );
  filter: blur(2px) saturate(2);
  animation: rainbow 1s linear infinite;
  opacity:.95;
}
.bus.flip{
  transform: translate(-50%, -50%) scaleX(-1);
}

@keyframes walk{
  from{background-position: 0 0;}
  to{background-position: -96px 0;}
}
@keyframes bus{
  0%,100%{transform: translate(-50%, -50%) translateY(0) rotate(-1deg);}
  50%{transform: translate(-50%, -50%) translateY(8px) rotate(1deg);}
}
@keyframes drift{
  0%,100%{translate: 0 0;}
  50%{translate: 18px -8px;}
}
@keyframes rainbow{
  0%{transform: translateX(0);}
  100%{transform: translateX(-30px);}
}

.hotlineBanner{
  z-index:5;
  position:absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 92vw);
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.25);
  background: linear-gradient(90deg, #ff163d, #ff5e8a, #ffb347);
  color:#fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(255,20,61,.35), inset 0 0 0 2px rgba(0,0,0,.15);
  -webkit-tap-highlight-color: transparent;
}
.hotlineBanner:active{
  filter: brightness(0.92);
}

.ui{
  z-index:4;
  position:absolute;
  left:0; right:0;
  bottom: max(18px, env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding: 0 18px;
}

.pingBtn{
  width:min(220px, 68vw);
  aspect-ratio:1 / 1;
  border-radius:999px;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(10,10,12,.45);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
}
.pingBtn:active{
  background: rgba(10,10,12,.75);
}

.vibeRow{
  width:min(420px, 90vw);
  display:grid;
  grid-template-columns: 50px 1fr 50px;
  align-items:center;
  gap:10px;
}
.vibeLabel{
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-align:center;
}

.vibe{
  width:100%;
  height:28px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.vibe:focus{outline:none}
.vibe::-webkit-slider-runnable-track{
  height:4px;
  background: rgba(255,255,255,.35);
  border-radius:999px;
}
.vibe::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:22px;
  margin-top:-6px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
}
.vibe::-moz-range-track{
  height:4px;
  background: rgba(255,255,255,.35);
  border-radius:999px;
}
.vibe::-moz-range-thumb{
  width:22px;
  height:22px;
  border:none;
  border-radius:999px;
  background: rgba(255,255,255,.85);
}



.vibeReadout{
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  text-align:center;
  background: rgba(8,8,12,.45);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 10px;
  border-radius: 999px;
}