/* Banzai 88 Runner — v1.4.0 */

#b88r-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: #000;
  font-family: monospace;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* ── screens ──────────────────────────────────────────────────────────────── */
.b88r-screen {
  display: none;
  width: 100%;
}

.b88r-screen.b88r-active {
  display: block;
}

/* ── start screen ─────────────────────────────────────────────────────────── */
#b88r-start {
  min-height: 560px;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 0;
}

.b88r-start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  padding: 40px 24px;
  box-sizing: border-box;
}

#b88r-logo {
  max-width: 200px;
  max-height: 100px;
  margin-bottom: 16px;
  object-fit: contain;
}

.b88r-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff008c;
  margin: 0 0 8px;
  text-transform: uppercase;
  text-shadow: 0 0 12px #ff008c88;
}

.b88r-subtitle {
  font-size: 13px;
  color: #ccc;
  margin: 0 0 32px;
  line-height: 1.6;
}

.b88r-alias-label {
  font-size: 11px;
  color: #888;
  margin: 0 0 4px;
  letter-spacing: 2px;
}

.b88r-alias {
  font-size: 20px;
  font-weight: 900;
  color: #ff008c;
  margin: 0 0 32px;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #ff008c66;
}

/* ── button ───────────────────────────────────────────────────────────────── */
.b88r-btn {
  display: inline-block;
  padding: 14px 40px;
  background: transparent;
  border: 2px solid #ff008c;
  color: #ff008c;
  font-family: monospace;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 8px #ff008c44;
}

.b88r-btn:hover,
.b88r-btn:focus {
  background: #ff008c;
  color: #000;
  box-shadow: 0 0 20px #ff008c88;
  outline: none;
}

.b88r-btn:active {
  transform: scale(0.97);
}

/* ── game screen ──────────────────────────────────────────────────────────── */
#b88r-game {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#b88r-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── keypad — sits BELOW the canvas as a block region ─────────────────────── */
#b88r-keypad {
  width: 100%;
  background: #0a0a0a;
  border-top: 1px solid #222;
  padding: 12px 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  touch-action: none;
}

#b88r-kp-up {
  width: 72px;
  height: 44px;
}

#b88r-kp-row2 {
  display: flex;
  gap: 6px;
  align-items: center;
}

#b88r-kp-left,
#b88r-kp-right {
  width: 58px;
  height: 44px;
}

#b88r-kp-down {
  width: 58px;
  height: 44px;
}

.b88r-kp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: 1.5px solid #ff008c;
  color: #ff008c;
  font-size: 20px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  transition: background 0.08s, box-shadow 0.08s;
  box-shadow: 0 0 4px #ff008c44;
}

.b88r-kp-btn.b88r-kp-active,
.b88r-kp-btn:active {
  background: #ff008c33;
  box-shadow: 0 0 14px #ff008caa;
}



/* ── poster interstitial ──────────────────────────────────────────────────── */
#b88r-poster {
  min-height: 560px;
  background:
    radial-gradient(circle at 50% 28%, rgba(200, 165, 70, 0.20), transparent 42%),
    linear-gradient(180deg, #11150f 0%, #070504 100%);
  color: #f0e5ca;
  text-align: center;
}

.b88r-poster-inner {
  min-height: 560px;
  box-sizing: border-box;
  padding: 22px 18px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.b88r-poster-title {
  margin: 0 0 6px;
  color: #c8a546;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(200, 165, 70, 0.45);
}

.b88r-poster-date {
  min-height: 16px;
  margin: 0 0 12px;
  color: #d8d0bc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.b88r-poster-reveal-img {
  display: block;
  width: min(82%, 360px);
  max-height: 360px;
  object-fit: contain;
  margin: 0 auto 14px;
  border: 3px solid #c8a546;
  box-shadow: 0 0 0 4px #0a0705, 0 0 34px rgba(200, 165, 70, 0.38);
  background: #000;
}

.b88r-poster-bonus {
  margin: 0 0 3px;
  color: #ff008c;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.b88r-poster-score {
  margin: 0 0 18px;
  color: #f0e5ca;
  font-size: 14px;
  font-weight: 700;
}

/* ── end screen ───────────────────────────────────────────────────────────── */
#b88r-end {
  min-height: 560px;
  background: #000;
  color: #fff;
  text-align: center;
}

.b88r-end-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 40px;
  box-sizing: border-box;
}

.b88r-end-title {
  font-size: 32px;
  font-weight: 900;
  color: #ff008c;
  margin: 0 0 8px;
  letter-spacing: 3px;
  text-shadow: 0 0 16px #ff008c88;
}

.b88r-end-score {
  font-size: 18px;
  color: #fff;
  margin: 0 0 24px;
}

/* ── poster reward ────────────────────────────────────────────────────────── */
.b88r-poster-reward {
  margin-bottom: 24px;
  text-align: center;
}

.b88r-poster-reward img {
  max-width: min(82%, 360px);
  max-height: 380px;
  border: 2px solid #ff008c;
  box-shadow: 0 0 20px #ff008c66;
  display: block;
  margin: 0 auto 8px;
}

.b88r-poster-reward p {
  color: #ff008c;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 0;
}

/* ── leaderboard ──────────────────────────────────────────────────────────── */
.b88r-lb-title {
  font-size: 15px;
  font-weight: 900;
  color: #ff008c;
  letter-spacing: 2px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.b88r-lb-table {
  width: 100%;
  max-width: 280px;
  border-collapse: collapse;
  margin: 0 auto 24px;
  font-size: 13px;
}

.b88r-lb-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #333;
  text-align: left;
  color: #ddd;
}

.b88r-lb-table tr:first-child td {
  color: #ff008c;
  font-weight: bold;
}

.b88r-lb-table td:last-child {
  text-align: right;
  color: #ff008c;
}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (min-width: 420px) {
  #b88r-wrap {
    box-shadow: 0 0 40px #ff008c22;
  }
}

@media (max-width: 360px) {
  #b88r-wrap {
    max-width: 100vw;
  }
}
/* ── v1.0.2 visual pass: Late Return / grimy punk venue tone ───────────── */
#b88r-wrap {
  background: #090604;
  max-width: 480px;
  border: 4px solid #090604;
  box-shadow: 0 0 0 1px #3f2a17, 0 18px 50px #00000066;
}

#b88r-start,
#b88r-end {
  background:
    linear-gradient(#13291b 0 12%, #0f1f16 12% 100%);
  color: #e7e0cf;
}

.b88r-start-inner,
.b88r-end-inner {
  background:
    repeating-linear-gradient(90deg, rgba(71,45,28,.22) 0 16px, rgba(35,17,14,.22) 16px 32px),
    linear-gradient(180deg, transparent 0 78%, rgba(54,30,21,.55) 78% 100%);
  min-height: 560px;
}

.b88r-title,
.b88r-end-title,
.b88r-alias,
.b88r-lb-title {
  color: #c8a546;
  text-shadow: 3px 3px 0 #2a120d, 0 0 12px #000;
}

.b88r-subtitle,
.b88r-end-score,
.b88r-lb-table td {
  color: #d8d0bc;
}

.b88r-alias-label {
  color: #8f8268;
}

.b88r-btn {
  border: 2px solid #c8a546;
  color: #c8a546;
  background: #130b08;
  box-shadow: 4px 4px 0 #392112;
}

.b88r-btn:hover,
.b88r-btn:focus {
  background: #c8a546;
  color: #130b08;
  box-shadow: 4px 4px 0 #392112, 0 0 18px #c8a54655;
}

#b88r-game {
  background: #090604;
}

#b88r-canvas {
  background: #100907;
}

#b88r-keypad {
  background: #100907;
  border-top: 4px solid #4b2d16;
  padding: 10px 0 12px;
}

.b88r-kp-btn {
  background: #1b100b;
  border: 2px solid #8a6730;
  color: #c8a546;
  border-radius: 0;
  box-shadow: 4px 4px 0 #050302;
  text-shadow: 2px 2px 0 #000;
}

.b88r-kp-btn.b88r-kp-active,
.b88r-kp-btn:active {
  background: #392112;
  border-color: #d8b55b;
  box-shadow: 2px 2px 0 #050302;
  transform: translate(2px,2px);
}

.b88r-poster-reward img {
  border-color: #c8a546;
  box-shadow: 0 0 0 4px #2d1a0f, 0 0 24px #000;
}

.b88r-lb-table td:last-child,
.b88r-lb-table tr:first-child td {
  color: #c8a546;
}


/* ── v1.0.3: shorter/wider cabinet, compact controls ───────────── */
#b88r-wrap {
  max-width: 480px;
}

#b88r-canvas {
  max-height: calc(100vh - 150px);
}

#b88r-keypad {
  gap: 3px;
}

.b88r-kp-btn {
  min-height: 44px;
}


/* ── v1.0.4: screen isolation, shorter start, wider cabinet ───────────── */
#b88r-wrap {
  max-width: 520px;
}

#b88r-start,
#b88r-end {
  min-height: 380px;
}

.b88r-start-inner {
  min-height: 380px;
  padding: 28px 24px;
}

.b88r-end-inner {
  min-height: 380px;
  padding: 28px 16px;
}

#b88r-start:not(.b88r-active),
#b88r-game:not(.b88r-active),
#b88r-end:not(.b88r-active) {
  display: none !important;
}

#b88r-game.b88r-active {
  display: flex !important;
}

#b88r-start.b88r-active,
#b88r-end.b88r-active {
  display: block !important;
}

#b88r-canvas {
  max-height: calc(100vh - 120px);
}

#b88r-keypad {
  padding: 8px 0 10px;
}

.b88r-title, .b88r-end-title {
  font-size: 24px;
}

.b88r-lb-table tr.b88r-current-run td {
  color: #d2ae44;
  font-weight: 900;
  background: rgba(210, 174, 68, 0.08);
}


/* v1.0.9 juice pass */
.b88r-poster-reveal-img {
  animation: b88rPosterPop 240ms ease-out both;
}

@keyframes b88rPosterPop {
  from { transform: scale(0.94); opacity: 0.65; }
  to { transform: scale(1); opacity: 1; }
}

/* v1.1.4 mobile scroll pass */
#b88r-wrap,
#b88r-game,
#b88r-canvas {
  touch-action: pan-y;
}

#b88r-canvas {
  -webkit-user-select: auto;
  user-select: auto;
}

#b88r-keypad,
.b88r-kp-btn {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 700px) {
  #b88r-wrap {
    max-width: 100vw;
    border-left-width: 0;
    border-right-width: 0;
  }

  #b88r-canvas {
    max-height: calc(100dvh - 118px);
  }
}



/* v1.1.4 mobile keypad comfort pass */
@media (max-width: 700px) {
  #b88r-canvas {
    max-height: calc(100dvh - 150px);
  }

  #b88r-keypad {
    padding: 14px 0 calc(22px + env(safe-area-inset-bottom));
    gap: 8px;
  }

  #b88r-kp-row2 {
    gap: 10px;
  }

  #b88r-kp-up,
  #b88r-kp-down,
  #b88r-kp-left,
  #b88r-kp-right {
    width: 74px;
    height: 50px;
  }

  .b88r-kp-btn {
    min-height: 50px;
    font-size: 22px;
    border-width: 2px;
  }
}

@media (max-width: 380px) {
  #b88r-kp-up,
  #b88r-kp-down,
  #b88r-kp-left,
  #b88r-kp-right {
    width: 68px;
    height: 48px;
  }

  #b88r-kp-row2 {
    gap: 8px;
  }
}


/* v1.1.4 unified arcade D-pad pass */
#b88r-keypad {
  background: #100806;
  border-top: 4px solid #3b1f0d;
  padding-top: 18px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  gap: 10px;
}

#b88r-kp-row2 {
  gap: 12px;
}

#b88r-kp-up,
#b88r-kp-down,
#b88r-kp-left,
#b88r-kp-right {
  width: 78px;
  height: 58px;
}

.b88r-kp-btn {
  position: relative;
  overflow: hidden;
  background: #1b0d09;
  border: 3px solid #b8892f;
  border-radius: 0;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
  box-shadow: 0 8px 0 #050302, inset 0 0 0 2px rgba(0,0,0,0.35);
  -webkit-tap-highlight-color: transparent;
}

.b88r-kp-btn::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  filter: drop-shadow(0 2px 0 #2a1708);
}

.b88r-kp-btn[data-dir="up"]::before {
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 24px solid #d2ae4a;
}

.b88r-kp-btn[data-dir="down"]::before {
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 24px solid #d2ae4a;
}

.b88r-kp-btn[data-dir="left"]::before {
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 24px solid #d2ae4a;
}

.b88r-kp-btn[data-dir="right"]::before {
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 24px solid #d2ae4a;
}

.b88r-kp-btn.b88r-kp-active,
.b88r-kp-btn:active {
  background: #2a130d;
  border-color: #e0bc52;
  transform: translateY(4px);
  box-shadow: 0 4px 0 #050302, 0 0 16px rgba(210,174,74,0.35), inset 0 0 0 2px rgba(0,0,0,0.35);
}

.b88r-kp-btn.b88r-kp-active::before,
.b88r-kp-btn:active::before {
  filter: drop-shadow(0 0 5px rgba(210,174,74,0.7));
}

@media (max-width: 700px) {
  #b88r-keypad {
    padding: 16px 0 calc(28px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  #b88r-kp-row2 {
    gap: 12px;
  }

  #b88r-kp-up,
  #b88r-kp-down,
  #b88r-kp-left,
  #b88r-kp-right {
    width: 82px;
    height: 60px;
  }
}

@media (max-width: 380px) {
  #b88r-kp-up,
  #b88r-kp-down,
  #b88r-kp-left,
  #b88r-kp-right {
    width: 76px;
    height: 56px;
  }

  #b88r-kp-row2 {
    gap: 10px;
  }
}

/* v1.2.0 Venue & Personality Pass */
#b88r-start {
  min-height: 440px;
  position: relative;
  overflow: hidden;
  background: #070504;
}

#b88r-start::before {
  content: "";
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  background:
    /* marquee bulbs */
    radial-gradient(circle at 36% 38%, #d8b55b 0 3px, transparent 4px),
    radial-gradient(circle at 41% 38%, #d8b55b 0 3px, transparent 4px),
    radial-gradient(circle at 46% 38%, #d8b55b 0 3px, transparent 4px),
    radial-gradient(circle at 51% 38%, #d8b55b 0 3px, transparent 4px),
    radial-gradient(circle at 56% 38%, #d8b55b 0 3px, transparent 4px),
    radial-gradient(circle at 61% 38%, #d8b55b 0 3px, transparent 4px),
    /* street light */
    radial-gradient(circle at 16% 25%, rgba(200,165,70,.55) 0 18px, transparent 48px),
    linear-gradient(90deg, transparent 15%, #4b2d16 15% 16%, transparent 16%),
    /* venue sign */
    linear-gradient(#d8d0bc 0 0) 31% 34% / 38% 10% no-repeat,
    linear-gradient(#2d1a0f 0 0) 33% 36% / 34% 6% no-repeat,
    /* venue door */
    linear-gradient(#0a0705 0 0) 47% 53% / 13% 18% no-repeat,
    linear-gradient(#223f2a 0 0) 49% 56% / 9% 11% no-repeat,
    /* posters */
    linear-gradient(#7d2424 0 0) 11% 54% / 8% 12% no-repeat,
    linear-gradient(#c8a546 0 0) 13% 58% / 4% 2% no-repeat,
    linear-gradient(#274833 0 0) 82% 56% / 10% 14% no-repeat,
    linear-gradient(#d8d0bc 0 0) 84% 60% / 6% 2% no-repeat,
    /* fans */
    linear-gradient(#c89362 0 0) 66% 69% / 3% 3% no-repeat,
    linear-gradient(#101010 0 0) 66% 72% / 4% 9% no-repeat,
    linear-gradient(#c89362 0 0) 72% 68% / 3% 3% no-repeat,
    linear-gradient(#783341 0 0) 72% 71% / 4% 10% no-repeat,
    linear-gradient(#c89362 0 0) 77% 70% / 3% 3% no-repeat,
    linear-gradient(#2d4f85 0 0) 77% 73% / 4% 8% no-repeat,
    /* guitar case */
    linear-gradient(115deg, transparent 0 36%, #111 36% 64%, transparent 64%) 8% 78% / 9% 18% no-repeat,
    linear-gradient(#c8a546 0 0) 10% 91% / 5% 2% no-repeat,
    /* sidewalk / street */
    linear-gradient(180deg, transparent 0 74%, #332013 74% 84%, #171717 84% 100%),
    /* venue wall */
    linear-gradient(180deg, #111d14 0 28%, #1b100b 28% 76%, transparent 76%),
    /* 8-bit night blocks */
    repeating-linear-gradient(90deg, rgba(71,45,28,.22) 0 16px, rgba(35,17,14,.22) 16px 32px),
    linear-gradient(180deg, #0a0e11 0%, #10180f 100%);
  opacity: .95;
}

#b88r-start::after {
  content: "BANZAI 88  ·  SOLD OUT";
  position: absolute;
  left: 50%;
  top: 37.2%;
  transform: translateX(-50%);
  width: 44%;
  color: #d8d0bc;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 2px 2px 0 #070504;
  z-index: 1;
  animation: b88rMarqueeBlink 1.2s steps(2, end) infinite;
}

@keyframes b88rMarqueeBlink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: .65; }
}

.b88r-start-inner {
  position: relative;
  z-index: 2;
  min-height: 440px;
  padding: 34px 24px 42px;
  background:
    radial-gradient(circle at 50% 44%, rgba(0,0,0,.68) 0 34%, rgba(0,0,0,.48) 35% 52%, rgba(0,0,0,.12) 70%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.24));
}

#b88r-logo {
  max-width: 190px;
  max-height: 92px;
  margin-bottom: 20px;
  filter: drop-shadow(4px 4px 0 #070504);
  image-rendering: auto;
}

.b88r-title {
  font-size: clamp(24px, 7vw, 34px);
  margin-bottom: 18px;
}

.b88r-subtitle {
  max-width: 420px;
  margin-bottom: 34px;
  color: #f0e5ca;
  font-size: clamp(14px, 3.4vw, 18px);
  text-shadow: 3px 3px 0 #070504;
}

.b88r-alias-label {
  font-size: 13px;
  color: #a99d82;
  text-shadow: 2px 2px 0 #070504;
}

.b88r-alias {
  font-size: clamp(22px, 6.2vw, 34px);
  margin-bottom: 34px;
}

#b88r-poster {
  background:
    radial-gradient(circle at 50% 28%, rgba(200, 165, 70, 0.24), transparent 45%),
    linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.70)),
    repeating-linear-gradient(90deg, rgba(71,45,28,.18) 0 16px, rgba(35,17,14,.18) 16px 32px),
    linear-gradient(180deg, #11150f 0%, #070504 100%);
}

.b88r-poster-reveal-img {
  width: min(86%, 390px);
  max-height: 410px;
}

#b88r-end {
  background:
    repeating-linear-gradient(90deg, rgba(71,45,28,.18) 0 16px, rgba(35,17,14,.18) 16px 32px),
    linear-gradient(#13291b 0 12%, #0f1f16 12% 100%);
}

@media (max-width: 700px) {
  #b88r-start,
  .b88r-start-inner {
    min-height: 420px;
  }

  #b88r-start::after {
    font-size: 9px;
    width: 52%;
  }

  .b88r-start-inner {
    padding: 28px 16px 36px;
  }
}

/* v1.2.1 Venue Fix Pass: clearer start screen, readable venue row, bigger poster */
#b88r-start {
  min-height: 500px;
  background: #050604;
}

#b88r-start::before,
#b88r-start::after {
  content: none !important;
}

.b88r-start-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #07100d 0 28%, #10160f 28% 45%, #1a100a 45% 78%, #151515 78% 100%);
  image-rendering: pixelated;
  z-index: 0;
}

.b88r-scene-skyline {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 118px;
  background:
    linear-gradient(#162018 0 0) 6% 72% / 44px 56px no-repeat,
    linear-gradient(#101812 0 0) 17% 58% / 38px 76px no-repeat,
    linear-gradient(#17251a 0 0) 80% 64% / 50px 66px no-repeat,
    linear-gradient(#111912 0 0) 91% 52% / 38px 82px no-repeat;
  opacity: .85;
}

.b88r-scene-skyline::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 45%, #c8a546 0 2px, transparent 3px),
    radial-gradient(circle at 18% 37%, #c8a546 0 2px, transparent 3px),
    radial-gradient(circle at 84% 46%, #c8a546 0 2px, transparent 3px),
    radial-gradient(circle at 91% 36%, #c8a546 0 2px, transparent 3px);
  opacity: .7;
}

.b88r-scene-venue {
  position: absolute;
  left: 50%;
  top: 122px;
  width: min(74%, 360px);
  height: 220px;
  transform: translateX(-50%);
  background: #19100b;
  border: 4px solid #2d1a0f;
  box-shadow: 8px 8px 0 #050302;
}

.b88r-scene-roof {
  position: absolute;
  left: -10px;
  right: -10px;
  top: -18px;
  height: 18px;
  background: #0b0705;
  border-bottom: 4px solid #4a2c16;
}

.b88r-scene-marquee {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 26px;
  height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: #d8d0bc;
  border: 6px solid #0a0705;
  box-shadow: 0 0 0 3px #c8a546;
  color: #2d1a0f;
  font-family: monospace;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

.b88r-scene-marquee span:nth-child(2) {
  color: #7d2424;
  animation: b88rMarqueeBlink 1s steps(2, end) infinite;
}

.b88r-scene-door {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 78px;
  height: 92px;
  transform: translateX(-50%);
  background: #070504;
  border: 5px solid #223f2a;
  border-bottom: 0;
}

.b88r-scene-door::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 44px;
  width: 6px;
  height: 8px;
  background: #d8d0bc;
}

.b88r-scene-window {
  position: absolute;
  bottom: 34px;
  width: 46px;
  height: 52px;
  background: #10150f;
  border: 4px solid #274833;
}
.b88r-scene-window::after {
  content: "";
  position: absolute;
  inset: 10px 8px;
  background: #7d2424;
  box-shadow: 0 14px 0 #c8a546;
}
.b88r-scene-window-a { left: 20px; }
.b88r-scene-window-b { right: 20px; }

.b88r-scene-lamp {
  position: absolute;
  left: 9%;
  top: 132px;
  width: 10px;
  height: 245px;
  background: #3b2618;
  box-shadow: 0 0 0 2px #0a0705;
}
.b88r-scene-lamp::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -28px;
  width: 50px;
  height: 24px;
  background: #0a0705;
  border-bottom: 8px solid #c8a546;
}
.b88r-scene-lamp::after {
  content: "";
  position: absolute;
  left: -48px;
  top: -14px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(200,165,70,.15);
}

.b88r-scene-pole {
  position: absolute;
  right: 8%;
  top: 178px;
  width: 8px;
  height: 185px;
  background: #3b2618;
}
.b88r-scene-pole::after {
  content: "FLYERS";
  position: absolute;
  left: -20px;
  top: 36px;
  width: 48px;
  height: 58px;
  padding-top: 7px;
  background: #d8d0bc;
  color: #7d2424;
  border: 4px solid #070504;
  font: 900 10px/1 monospace;
  text-align: center;
}

.b88r-scene-guitar {
  position: absolute;
  left: 13%;
  bottom: 42px;
  width: 36px;
  height: 74px;
  transform: rotate(-9deg);
  background: #111;
  border: 4px solid #070504;
  border-radius: 14px 14px 8px 8px;
}
.b88r-scene-guitar::before {
  content: "";
  position: absolute;
  left: 13px;
  top: -52px;
  width: 8px;
  height: 58px;
  background: #111;
}
.b88r-scene-guitar::after {
  content: "88";
  position: absolute;
  left: 5px;
  top: 22px;
  color: #ff8abf;
  font: 900 12px monospace;
}

.b88r-scene-fans {
  position: absolute;
  right: 20%;
  bottom: 84px;
  width: 110px;
  height: 70px;
}
.b88r-scene-fans i {
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 42px;
  background: #223f2a;
  box-shadow: 0 -15px 0 -2px #c89362, 0 42px 0 -5px #050302;
}
.b88r-scene-fans i:nth-child(1) { left: 0; background: #7d2424; }
.b88r-scene-fans i:nth-child(2) { left: 38px; height: 48px; background: #2d4f85; }
.b88r-scene-fans i:nth-child(3) { left: 76px; background: #274833; }

.b88r-scene-sidewalk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
  height: 28px;
  background: repeating-linear-gradient(90deg, #332013 0 42px, #2a190f 42px 45px);
  border-top: 5px solid #4a2c16;
  border-bottom: 5px solid #0a0705;
}

.b88r-start-inner {
  min-height: 500px;
  padding: 54px 18px 42px;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.14) 100%);
}

.b88r-start-inner::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 160px;
  bottom: 54px;
  background: rgba(0,0,0,var(--b88r-start-text-dim, .52));
  box-shadow: 0 0 0 4px rgba(0,0,0,.22), 8px 8px 0 rgba(0,0,0,.35);
  z-index: -1;
}

#b88r-logo {
  max-width: 170px;
  max-height: 82px;
  margin-bottom: 18px;
}

.b88r-title {
  font-size: clamp(24px, 6.5vw, 32px);
  margin-bottom: 14px;
}

.b88r-subtitle {
  margin-bottom: 28px;
}

.b88r-alias {
  font-size: clamp(23px, 5.5vw, 30px);
  margin-bottom: 30px;
}

#b88r-poster,
.b88r-poster-inner {
  min-height: 640px;
}

#b88r-poster {
  background:
    radial-gradient(circle at 50% 22%, rgba(200,165,70,.20), transparent 35%),
    linear-gradient(rgba(0,0,0,var(--b88r-poster-dim, .76)), rgba(0,0,0,calc(var(--b88r-poster-dim, .76) + .10))),
    linear-gradient(180deg, #10140e 0%, #050302 100%);
}

.b88r-poster-inner {
  padding: 20px 12px 26px;
  justify-content: flex-start;
}

.b88r-poster-title {
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: clamp(24px, 5.8vw, 36px);
}

.b88r-poster-date {
  margin-bottom: 12px;
}

.b88r-poster-reveal-img {
  width: min(94%, 460px);
  max-height: min(58vh, 520px);
  margin-bottom: 16px;
  border-width: 4px;
  box-shadow: 0 0 0 6px #0a0705, 0 0 46px rgba(200,165,70,.48), 9px 9px 0 rgba(0,0,0,.45);
}

.b88r-poster-bonus {
  font-size: 18px;
  margin-bottom: 8px;
}

.b88r-poster-score {
  font-size: 16px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  #b88r-start,
  .b88r-start-inner {
    min-height: 500px;
  }
  .b88r-start-inner::before {
    left: 5%;
    right: 5%;
    top: 152px;
    bottom: 48px;
  }
  .b88r-scene-venue {
    width: 78%;
    height: 214px;
  }
  .b88r-scene-marquee {
    font-size: 11px;
  }
  .b88r-scene-fans {
    right: 14%;
  }
  #b88r-poster,
  .b88r-poster-inner {
    min-height: 620px;
  }
  .b88r-poster-reveal-img {
    max-height: min(56vh, 500px);
  }
}


/* v1.2.3 Start Screen Clarity Pass
   Remove the neo-noir overlay, make the venue scene deliberately chunky, and
   keep tiny background text from competing with the actual menu text. */
#b88r-start,
.b88r-start-inner {
  min-height: 500px;
}

#b88r-start {
  background: #050604;
}

.b88r-start-scene {
  background:
    linear-gradient(180deg, #06100d 0 30%, #0d1710 30% 43%, #1a100a 43% 78%, #151515 78% 100%) !important;
}

.b88r-scene-skyline {
  opacity: .55 !important;
  top: 12px !important;
  height: 110px !important;
  background:
    linear-gradient(#111b14 0 0) 8% 72% / 42px 52px no-repeat,
    linear-gradient(#0e1711 0 0) 18% 60% / 38px 70px no-repeat,
    linear-gradient(#142118 0 0) 80% 66% / 50px 62px no-repeat,
    linear-gradient(#0f1711 0 0) 91% 55% / 38px 76px no-repeat !important;
}

.b88r-scene-venue {
  left: 58% !important;
  top: 132px !important;
  width: min(58%, 300px) !important;
  height: 206px !important;
  border-width: 4px !important;
  opacity: .85;
}

.b88r-scene-marquee {
  left: 12% !important;
  right: 12% !important;
  top: 28px !important;
  height: 62px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  opacity: .82;
}

.b88r-scene-pole {
  right: auto !important;
  left: 8% !important;
  top: 170px !important;
  opacity: .75;
}

.b88r-scene-pole::after {
  content: "" !important;
  left: -16px !important;
  top: 38px !important;
  width: 40px !important;
  height: 54px !important;
  padding: 0 !important;
  background:
    linear-gradient(#7d2424 0 0) 0 0 / 40px 24px no-repeat,
    linear-gradient(#d8d0bc 0 0) 5px 29px / 30px 20px no-repeat,
    linear-gradient(#c8a546 0 0) 7px 7px / 26px 3px no-repeat,
    linear-gradient(#070504 0 0) 9px 35px / 22px 3px no-repeat !important;
  border: 3px solid #0a0705 !important;
}

.b88r-scene-lamp {
  left: 12% !important;
  top: 132px !important;
  opacity: .78;
}

.b88r-scene-lamp::after {
  width: 82px !important;
  height: 82px !important;
  left: -37px !important;
  top: -8px !important;
  background: rgba(200,165,70,.10) !important;
}

.b88r-scene-guitar {
  left: 15% !important;
  bottom: 44px !important;
  opacity: .7;
}

.b88r-scene-fans {
  right: 12% !important;
  bottom: 82px !important;
  opacity: .65;
}

.b88r-start-inner {
  padding: 54px 18px 42px !important;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.18)) !important;
}

.b88r-start-inner::before {
  left: 15% !important;
  right: 15% !important;
  top: 168px !important;
  bottom: 76px !important;
  background: rgba(0,0,0,.72) !important;
  border: 3px solid rgba(200,165,70,.58);
  box-shadow: 7px 7px 0 rgba(0,0,0,.42) !important;
}

.b88r-title,
.b88r-subtitle,
.b88r-alias-label,
.b88r-alias {
  position: relative;
  z-index: 2;
}

.b88r-title {
  font-size: clamp(23px, 5.8vw, 31px) !important;
  margin-bottom: 16px !important;
}

.b88r-subtitle {
  max-width: 390px !important;
  margin-bottom: 26px !important;
  font-size: clamp(13px, 3vw, 17px) !important;
}

.b88r-alias {
  font-size: clamp(22px, 5vw, 29px) !important;
  margin-bottom: 28px !important;
}

@media (max-width: 700px) {
  .b88r-scene-venue {
    left: 58% !important;
    width: 62% !important;
  }
  .b88r-start-inner::before {
    left: 7% !important;
    right: 7% !important;
    top: 160px !important;
    bottom: 68px !important;
  }
  .b88r-scene-pole {
    left: 7% !important;
  }
}

/* v1.2.4 Consistency Pass
   One world across Start and Game Over. Remove the legacy wallpaper feel,
   brighten the venue scene, and keep the gold cabinet frame. */

#b88r-start,
#b88r-end {
  background: #050604 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Start: make the venue visible again without going back to the noir fog. */
.b88r-start-inner {
  background: rgba(0,0,0,.06) !important;
}

.b88r-start-inner::before {
  background: rgba(0,0,0,.54) !important;
  border-color: rgba(200,165,70,.78) !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.45), 0 0 0 1px rgba(200,165,70,.18) inset !important;
}

.b88r-start-scene {
  opacity: 1 !important;
  filter: none !important;
}

.b88r-scene-venue {
  opacity: 1 !important;
  filter: brightness(1.2) contrast(1.06) !important;
}

.b88r-scene-marquee {
  opacity: .96 !important;
  color: #1d0b07 !important;
  box-shadow: 0 0 0 4px #c8a546, 6px 6px 0 rgba(0,0,0,.55), 0 0 18px rgba(200,165,70,.22) !important;
}

.b88r-scene-window,
.b88r-scene-window::after,
.b88r-scene-lamp::before {
  filter: brightness(1.25) !important;
}

.b88r-scene-lamp::after {
  background: rgba(200,165,70,.16) !important;
}

/* Game Over now uses the same code-drawn venue world instead of wallpaper. */
#b88r-end::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* windows */
    linear-gradient(#243729 0 0) 14% 14% / 44px 70px no-repeat,
    linear-gradient(#2c4130 0 0) 23% 9% / 38px 82px no-repeat,
    linear-gradient(#243729 0 0) 78% 12% / 50px 76px no-repeat,
    linear-gradient(#1f3125 0 0) 90% 8% / 38px 90px no-repeat,
    radial-gradient(circle at 16% 20%, rgba(200,165,70,.55) 0 4px, transparent 5px),
    radial-gradient(circle at 25% 16%, rgba(200,165,70,.45) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 18%, rgba(200,165,70,.45) 0 4px, transparent 5px),
    /* sky, building, sidewalk */
    linear-gradient(180deg, #06100d 0 30%, #0d1710 30% 44%, #1a100a 44% 78%, #151515 78% 100%);
  opacity: .88;
  z-index: 0;
}

#b88r-end::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* left streetlight */
    radial-gradient(circle at 13% 28%, rgba(200,165,70,.18) 0 58px, transparent 59px),
    linear-gradient(#c8a546 0 0) 8% 26% / 52px 9px no-repeat,
    linear-gradient(#4a2c16 0 0) 11% 27% / 8px 270px no-repeat,
    /* venue body */
    linear-gradient(#0a0705 0 0) 50% 22% / 62% 44% no-repeat,
    linear-gradient(#24150d 0 0) 50% 25% / 58% 40% no-repeat,
    linear-gradient(#050604 0 0) 50% 65% / 64% 4px no-repeat,
    /* marquee */
    linear-gradient(#c8a546 0 0) 50% 30% / 42% 76px no-repeat,
    linear-gradient(#d8d0bc 0 0) 50% 30% / calc(42% - 10px) 64px no-repeat,
    linear-gradient(#2d1a0f 0 0) 50% 31.5% / calc(42% - 34px) 36px no-repeat,
    /* door and poster blocks */
    linear-gradient(#06100d 0 0) 50% 52% / 56px 120px no-repeat,
    linear-gradient(#0f2418 0 0) 50% 52% / 40px 102px no-repeat,
    linear-gradient(#7d2424 0 0) 30% 53% / 42px 72px no-repeat,
    linear-gradient(#c8a546 0 0) 30% 59% / 42px 20px no-repeat,
    linear-gradient(#7d2424 0 0) 70% 53% / 42px 72px no-repeat,
    linear-gradient(#c8a546 0 0) 70% 59% / 42px 20px no-repeat,
    /* dim the venue enough for the leaderboard */
    linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.58));
  z-index: 1;
}

.b88r-end-inner {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  min-height: 560px !important;
  padding-top: 36px !important;
}

.b88r-end-title {
  margin-bottom: 14px !important;
}

.b88r-end-score {
  margin: 12px 0 22px !important;
}

#b88r-poster-reward.b88r-poster-reward {
  margin: 0 auto 14px !important;
}

#b88r-poster-reward img {
  max-width: min(76vw, 360px) !important;
  max-height: 420px !important;
  border: 4px solid #c8a546 !important;
  box-shadow: 8px 8px 0 rgba(0,0,0,.48), 0 0 26px rgba(200,165,70,.24) !important;
}

#b88r-poster-show-day {
  color: #ff008c !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
  margin-top: 12px !important;
}

.b88r-lb-table {
  background: rgba(0,0,0,.32) !important;
  box-shadow: 0 0 0 2px rgba(200,165,70,.12) !important;
}

@media (max-width: 700px) {
  .b88r-start-inner::before {
    background: rgba(0,0,0,.58) !important;
  }

  #b88r-end::after {
    background:
      radial-gradient(circle at 13% 28%, rgba(200,165,70,.16) 0 48px, transparent 49px),
      linear-gradient(#c8a546 0 0) 8% 26% / 44px 8px no-repeat,
      linear-gradient(#4a2c16 0 0) 11% 27% / 7px 250px no-repeat,
      linear-gradient(#0a0705 0 0) 50% 22% / 68% 43% no-repeat,
      linear-gradient(#24150d 0 0) 50% 25% / 64% 39% no-repeat,
      linear-gradient(#c8a546 0 0) 50% 30% / 52% 66px no-repeat,
      linear-gradient(#d8d0bc 0 0) 50% 30% / calc(52% - 10px) 54px no-repeat,
      linear-gradient(#2d1a0f 0 0) 50% 31.5% / calc(52% - 30px) 30px no-repeat,
      linear-gradient(#06100d 0 0) 50% 52% / 50px 110px no-repeat,
      linear-gradient(rgba(0,0,0,.50), rgba(0,0,0,.60));
  }
}


/* v1.2.6 Start dim + text containment fix
   The admin Start Text Dim setting now drives the actual text panel opacity.
   Also keeps the title/subtitle/alias inside the gold frame. */
.b88r-start-inner::before {
  left: 6% !important;
  right: 6% !important;
  top: 154px !important;
  bottom: 76px !important;
  background: rgba(0,0,0,var(--b88r-start-text-dim, .62)) !important;
  border-color: rgba(200,165,70,.82) !important;
}

.b88r-title,
.b88r-subtitle,
.b88r-alias-label,
.b88r-alias,
#b88r-play-btn {
  max-width: calc(100% - 64px) !important;
  overflow-wrap: normal !important;
}

.b88r-title {
  font-size: clamp(22px, 5vw, 29px) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.b88r-subtitle {
  max-width: min(78%, 340px) !important;
  font-size: clamp(13px, 2.7vw, 16px) !important;
  line-height: 1.45 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.b88r-alias {
  max-width: min(84%, 390px) !important;
  font-size: clamp(21px, 4.8vw, 28px) !important;
  line-height: 1.08 !important;
}

@media (max-width: 700px) {
  .b88r-start-inner::before {
    left: 6% !important;
    right: 6% !important;
    top: 150px !important;
    bottom: 68px !important;
    background: rgba(0,0,0,var(--b88r-start-text-dim, .62)) !important;
  }
  .b88r-title {
    font-size: clamp(21px, 5.2vw, 28px) !important;
  }
  .b88r-subtitle {
    max-width: 76% !important;
    font-size: clamp(12px, 2.8vw, 15px) !important;
  }
  .b88r-alias {
    max-width: 78% !important;
    font-size: clamp(20px, 5vw, 27px) !important;
  }
}

@media (max-width: 420px) {
  .b88r-start-inner::before {
    left: 5% !important;
    right: 5% !important;
  }
  .b88r-title {
    white-space: normal !important;
  }
  .b88r-subtitle {
    max-width: 82% !important;
  }
}

/* v1.2.7 Start background admin controls
   Lets the start screen use an uploaded Media Library image while preserving the
   gold frame, text panel, and fallback code-drawn 8-bit venue. */
#b88r-wrap.b88r-has-start-bg #b88r-start {
  background-image: var(--b88r-start-bg) !important;
  background-size: var(--b88r-start-bg-fit, cover) !important;
  background-position: var(--b88r-start-bg-position, center) !important;
  background-repeat: no-repeat !important;
}

#b88r-wrap.b88r-has-start-bg .b88r-start-scene {
  display: none !important;
}

#b88r-wrap.b88r-has-start-bg .b88r-start-inner {
  background: rgba(0,0,0,.10) !important;
}

#b88r-wrap.b88r-has-start-bg .b88r-start-inner::before {
  background: rgba(0,0,0,var(--b88r-start-text-dim, .68)) !important;
}

/* Fallback scene: lift the marquee above the top of the gold text box so the
   title and instructions do not sit directly on top of the marquee lettering. */
#b88r-wrap:not(.b88r-has-start-bg) .b88r-scene-marquee {
  top: 14px !important;
  transform: translateY(-8px) !important;
}

#b88r-wrap:not(.b88r-has-start-bg) .b88r-start-inner::before {
  background: rgba(0,0,0,var(--b88r-start-text-dim, .68)) !important;
}


/* v1.2.8 Start screen title containment
   Treat the gold bounding box as the full title/menu panel. The logo/background art
   stays above/behind it while BANZAI 88 RUNNER, instructions, alias, and Play live inside. */
.b88r-start-inner {
  justify-content: flex-start !important;
  padding: 62px 18px 42px !important;
}

#b88r-logo {
  max-width: 150px !important;
  max-height: 72px !important;
  margin-bottom: 24px !important;
}

.b88r-start-inner::before {
  left: 6% !important;
  right: 6% !important;
  top: 142px !important;
  bottom: 72px !important;
  background: rgba(0,0,0,var(--b88r-start-text-dim, .68)) !important;
  border: 3px solid rgba(200,165,70,.84) !important;
  box-shadow: 8px 8px 0 rgba(0,0,0,.50), 0 0 0 1px rgba(200,165,70,.18) inset !important;
}

.b88r-title {
  margin-top: 4px !important;
  margin-bottom: 22px !important;
  max-width: calc(100% - 82px) !important;
  font-size: clamp(22px, 4.8vw, 29px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.b88r-subtitle {
  max-width: min(78%, 340px) !important;
  margin-bottom: 30px !important;
  font-size: clamp(13px, 2.75vw, 16px) !important;
  line-height: 1.34 !important;
}

.b88r-alias-label {
  margin-bottom: 10px !important;
}

.b88r-alias {
  max-width: min(82%, 390px) !important;
  margin-bottom: 34px !important;
  font-size: clamp(22px, 4.7vw, 29px) !important;
  line-height: 1.08 !important;
}

#b88r-play-btn {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 700px) {
  .b88r-start-inner {
    padding-top: 58px !important;
  }
  #b88r-logo {
    max-width: 138px !important;
    max-height: 66px !important;
    margin-bottom: 22px !important;
  }
  .b88r-start-inner::before {
    left: 5.5% !important;
    right: 5.5% !important;
    top: 132px !important;
    bottom: 66px !important;
  }
  .b88r-title {
    max-width: calc(100% - 66px) !important;
    font-size: clamp(20px, 5.0vw, 27px) !important;
  }
  .b88r-subtitle {
    max-width: 74% !important;
    font-size: clamp(12px, 2.7vw, 15px) !important;
  }
  .b88r-alias {
    max-width: 76% !important;
    font-size: clamp(20px, 4.7vw, 27px) !important;
  }
}

@media (max-width: 420px) {
  .b88r-start-inner {
    padding-top: 50px !important;
  }
  #b88r-logo {
    max-width: 124px !important;
    max-height: 58px !important;
    margin-bottom: 20px !important;
  }
  .b88r-start-inner::before {
    left: 4.5% !important;
    right: 4.5% !important;
    top: 116px !important;
    bottom: 60px !important;
  }
  .b88r-title {
    white-space: normal !important;
    max-width: 82% !important;
    margin-bottom: 18px !important;
  }
  .b88r-subtitle {
    max-width: 82% !important;
  }
  .b88r-alias {
    max-width: 82% !important;
  }
}


/* v1.2.9 Start copy sentence restore
   Keeps the title and intro copy inside the gold panel while restoring the
   original sentence-style intro language. */
.b88r-subtitle {
  max-width: 82%;
  line-height: 1.35 !important;
}
@media (max-width: 520px) {
  .b88r-subtitle {
    max-width: 88%;
    font-size: clamp(15px, 3.5vw, 20px) !important;
  }
}


/* v1.2.10 Start panel containment fix
   The gold frame now fully contains the title, intro copy, alias, and play button.
   This intentionally keeps the uploaded venue image as background art only. */
#b88r-start .b88r-start-inner {
  position: relative !important;
  justify-content: flex-start !important;
  padding: 124px 18px 42px !important;
  box-sizing: border-box !important;
}

#b88r-start .b88r-start-inner::before {
  left: 6% !important;
  right: 6% !important;
  top: 104px !important;
  bottom: 58px !important;
  border: 3px solid rgba(200,165,70,.86) !important;
  background: rgba(0,0,0,var(--b88r-start-text-dim, .68)) !important;
  box-shadow: 8px 8px 0 rgba(0,0,0,.52), 0 0 0 1px rgba(200,165,70,.16) inset !important;
}

#b88r-start .b88r-title,
#b88r-start .b88r-subtitle,
#b88r-start .b88r-alias-label,
#b88r-start .b88r-alias,
#b88r-start #b88r-play-btn {
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

#b88r-start .b88r-title {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  max-width: calc(100% - 88px) !important;
  font-size: clamp(22px, 4.9vw, 30px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#b88r-start .b88r-subtitle {
  max-width: min(76%, 430px) !important;
  margin: 0 auto 30px !important;
  font-size: clamp(14px, 2.55vw, 18px) !important;
  line-height: 1.28 !important;
}

#b88r-start .b88r-alias-label {
  margin: 0 0 10px !important;
}

#b88r-start .b88r-alias {
  max-width: min(76%, 440px) !important;
  margin: 0 auto 34px !important;
  font-size: clamp(22px, 4.7vw, 30px) !important;
  line-height: 1.05 !important;
}

#b88r-start #b88r-play-btn {
  margin-top: 0 !important;
}

@media (max-width: 700px) {
  #b88r-start .b88r-start-inner {
    padding-top: 112px !important;
  }
  #b88r-start .b88r-start-inner::before {
    left: 5.5% !important;
    right: 5.5% !important;
    top: 92px !important;
    bottom: 54px !important;
  }
  #b88r-start .b88r-title {
    max-width: calc(100% - 66px) !important;
    font-size: clamp(20px, 5.0vw, 28px) !important;
  }
  #b88r-start .b88r-subtitle {
    max-width: 78% !important;
    font-size: clamp(13px, 3.0vw, 17px) !important;
  }
  #b88r-start .b88r-alias {
    max-width: 78% !important;
    font-size: clamp(20px, 4.9vw, 28px) !important;
  }
}

@media (max-width: 420px) {
  #b88r-start .b88r-start-inner {
    padding-top: 98px !important;
  }
  #b88r-start .b88r-start-inner::before {
    left: 4.5% !important;
    right: 4.5% !important;
    top: 78px !important;
    bottom: 48px !important;
  }
  #b88r-start .b88r-title {
    white-space: normal !important;
    max-width: 82% !important;
    margin-bottom: 18px !important;
  }
  #b88r-start .b88r-subtitle {
    max-width: 84% !important;
    margin-bottom: 26px !important;
  }
  #b88r-start .b88r-alias {
    max-width: 84% !important;
    margin-bottom: 28px !important;
  }
}


/* ── v1.2.11 leaderboard no-wrap fix ───────────────────────────────────── */
.b88r-lb-table {
  width: min(92%, 430px) !important;
  max-width: 430px !important;
  table-layout: fixed !important;
  font-size: clamp(11px, 2.55vw, 13px) !important;
  line-height: 1.18 !important;
}

.b88r-lb-table td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  padding: 8px 8px !important;
}

.b88r-lb-table td:first-child {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.b88r-lb-table td:nth-child(2) {
  width: auto !important;
}

.b88r-lb-table td:last-child {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  text-align: right !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 420px) {
  .b88r-lb-table {
    width: 94% !important;
    font-size: 11px !important;
  }

  .b88r-lb-table td {
    padding: 7px 6px !important;
  }

  .b88r-lb-table td:first-child {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
  }

  .b88r-lb-table td:last-child {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
  }
}


/* ── v1.4.0 secret venue support ─────────────────────────────────────────── */
.b88r-lb-table td:nth-child(2) {
  white-space: nowrap !important;
}


/* ── v1.5.0 Tour of the Damned polish ─────────────────────────────────── */
.b88r-lb-table td:nth-child(2) {
  min-width: 0 !important;
}

.b88r-lb-table td:last-child {
  font-variant-numeric: tabular-nums;
}

#b88r-poster-reward img,
.b88r-poster-reveal-img {
  image-rendering: auto;
}


/* v1.5.1 Secret Venue Readability + Sprite Polish */


/* ── v1.5.2 secret venue sprite readability ────────────────────────────── */
/* Version marker for cache busting. Sprite pass is rendered in canvas JS. */


/* v2.4.0 Polish + Rewards */
.b88r-title-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px auto 14px;max-width:360px}
.b88r-title-badge,.b88r-badge-empty{display:inline-block;border:1px solid rgba(240,229,202,.35);background:rgba(5,3,2,.72);color:#f0e5ca;font:700 11px/1 monospace;letter-spacing:.06em;padding:6px 8px;text-transform:uppercase}
.b88r-title-badge{border-color:#ff7a1a;color:#ffcf91;box-shadow:0 0 10px rgba(255,122,26,.25)}
.b88r-run-summary{margin:10px auto 16px;max-width:440px;color:#f0e5ca;font-family:monospace;text-align:center}
.b88r-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.b88r-summary-grid span,.b88r-summary-badge{display:block;border:1px solid rgba(240,229,202,.25);background:rgba(5,3,2,.65);padding:8px}
.b88r-summary-grid b{display:block;color:#ffcf91;font-size:16px}
.b88r-summary-grid small,.b88r-summary-badge small{display:block;color:#d8d0bc;font-size:10px;text-transform:uppercase;opacity:.9}
.b88r-summary-badges{display:grid;grid-template-columns:1fr;gap:6px}
.b88r-summary-badge b{display:block;color:#ff7a1a;font-size:12px;letter-spacing:.06em}


/* v2.10.1 Pixel-art homepage mascot layer */
#b88r-start {
  position: relative !important;
  overflow: hidden !important;
}

#b88r-mascot-canvas {
  position: absolute;
  left: 50%;
  top: 108px;
  width: min(86%, 390px);
  height: 430px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: .72;
  mix-blend-mode: normal;
  filter: drop-shadow(0 12px 0 rgba(0,0,0,.34));
}

.b88r-start-inner {
  position: relative !important;
  z-index: 2 !important;
}

.b88r-start-inner > * {
  position: relative;
  z-index: 3;
}

.b88r-start-inner::before {
  z-index: 1 !important;
}

#b88r-wrap.b88r-has-start-bg #b88r-mascot-canvas {
  opacity: .62;
}

@media (max-width: 700px) {
  #b88r-mascot-canvas {
    top: 86px;
    width: min(96%, 360px);
    height: 396px;
    opacity: .66;
  }
}


/* v2.10.3 Mascot visibility fix
   Canvas sits above the dimmed start panel but below all words/buttons. */
#b88r-start #b88r-mascot-canvas {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: 50% !important;
  top: 165px !important;
  width: min(84%, 460px) !important;
  height: 460px !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  opacity: .82 !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,70,30,.18)) !important;
}

#b88r-start .b88r-start-inner {
  position: relative !important;
  z-index: 30 !important;
}

#b88r-start .b88r-start-inner::before {
  z-index: 1 !important;
}

#b88r-start .b88r-title,
#b88r-start .b88r-subtitle,
#b88r-start .b88r-alias-label,
#b88r-start .b88r-alias,
#b88r-start #b88r-title-badges,
#b88r-start #b88r-play-btn {
  position: relative !important;
  z-index: 40 !important;
}

@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    top: 142px !important;
    width: min(92%, 390px) !important;
    height: 390px !important;
    opacity: .78 !important;
  }
}


/* v2.11.0 Start Screen Mascot Build
   The fallback start screen is now a clean black arcade stage for the animated
   punk ninja. Uploaded start-screen images still work and take over the base
   background when present. */
#b88r-start {
  background: #000 !important;
  background-color: #000 !important;
}

#b88r-wrap:not(.b88r-has-start-bg) #b88r-start {
  background: #000 !important;
}

#b88r-wrap:not(.b88r-has-start-bg) .b88r-start-scene {
  display: none !important;
}

#b88r-wrap.b88r-has-start-bg #b88r-start {
  background-color: #000 !important;
}

#b88r-start #b88r-mascot-canvas {
  top: 118px !important;
  width: min(92%, 500px) !important;
  height: 500px !important;
  opacity: .92 !important;
  z-index: 18 !important;
  filter: drop-shadow(0 12px 0 rgba(0,0,0,.72)) drop-shadow(0 0 18px rgba(224,43,43,.22)) !important;
}

#b88r-wrap.b88r-has-start-bg #b88r-mascot-canvas {
  opacity: .58 !important;
}

#b88r-start .b88r-start-inner {
  background: transparent !important;
  z-index: 30 !important;
}

#b88r-start .b88r-start-inner::before {
  top: 94px !important;
  bottom: 56px !important;
  background: rgba(0,0,0,var(--b88r-start-text-dim, .62)) !important;
  border-color: rgba(200,165,70,.88) !important;
  box-shadow: 8px 8px 0 rgba(0,0,0,.72), 0 0 0 1px rgba(200,165,70,.18) inset !important;
}

#b88r-start .b88r-title {
  color: #c8a546 !important;
  text-shadow: 3px 3px 0 #070302, 0 0 12px rgba(200,165,70,.28) !important;
}

#b88r-start .b88r-subtitle,
#b88r-start .b88r-alias-label {
  color: #f0e5ca !important;
  text-shadow: 3px 3px 0 #000 !important;
}

#b88r-start .b88r-alias {
  color: #c8a546 !important;
  text-shadow: 4px 4px 0 #120603, 0 0 14px rgba(200,165,70,.34) !important;
}

#b88r-start #b88r-play-btn {
  background: rgba(16,8,6,.92) !important;
  border-color: #c8a546 !important;
  color: #c8a546 !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.70), 0 0 18px rgba(200,165,70,.16) !important;
}

#b88r-start #b88r-play-btn:hover,
#b88r-start #b88r-play-btn:focus {
  background: #c8a546 !important;
  color: #080403 !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.70), 0 0 24px rgba(200,165,70,.38) !important;
}

@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    top: 104px !important;
    width: min(98%, 430px) !important;
    height: 430px !important;
    opacity: .88 !important;
  }
  #b88r-start .b88r-start-inner::before {
    top: 84px !important;
    bottom: 50px !important;
  }
}

@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    top: 92px !important;
    width: 104% !important;
    height: 390px !important;
    opacity: .84 !important;
  }
  #b88r-start .b88r-start-inner::before {
    top: 70px !important;
    bottom: 44px !important;
  }
}


/* v2.11.2 production mascot placement
   Upper-left perch, below the menu text, small enough to avoid covering the title. */
#b88r-start #b88r-mascot-canvas {
  left: 98px !important;
  top: 70px !important;
  width: 255px !important;
  height: 288px !important;
  transform: none !important;
  z-index: 24 !important;
  opacity: .98 !important;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,.65)) drop-shadow(0 0 16px rgba(224,43,43,.18)) !important;
}
#b88r-start .b88r-start-inner { z-index: 30 !important; }
#b88r-start .b88r-title,
#b88r-start .b88r-subtitle,
#b88r-start .b88r-alias-label,
#b88r-start .b88r-alias,
#b88r-start #b88r-title-badges,
#b88r-start #b88r-play-btn { z-index: 40 !important; }
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    left: 14px !important;
    top: 58px !important;
    width: 205px !important;
    height: 232px !important;
    opacity: .96 !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    left: -6px !important;
    top: 48px !important;
    width: 184px !important;
    height: 208px !important;
  }
}


/* v2.11.3 clean 8-bit mascot placement */
#b88r-start #b88r-mascot-canvas {
  left: calc(9% + 14px) !important;
  top: 170px !important;
  width: 150px !important;
  height: 105px !important;
  transform: none !important;
  z-index: 24 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}
#b88r-start .b88r-start-inner { z-index: 30 !important; }
#b88r-start .b88r-title,
#b88r-start .b88r-subtitle,
#b88r-start .b88r-alias-label,
#b88r-start .b88r-alias,
#b88r-start #b88r-title-badges,
#b88r-start #b88r-play-btn,
#b88r-start .b88r-btn { position: relative !important; z-index: 40 !important; }
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    left: calc(5% + 8px) !important;
    top: 154px !important;
    width: 124px !important;
    height: 87px !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    left: 16px !important;
    top: 136px !important;
    width: 112px !important;
    height: 78px !important;
  }
}

/* v2.11.4 mascot rail choreography placement */
#b88r-start #b88r-mascot-canvas {
  left: calc(6% + 10px) !important;
  top: 82px !important;
  width: 260px !important;
  height: 128px !important;
  transform: none !important;
  z-index: 24 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}
#b88r-start .b88r-start-inner { z-index: 30 !important; }
#b88r-start .b88r-title,
#b88r-start .b88r-subtitle,
#b88r-start .b88r-alias-label,
#b88r-start .b88r-alias,
#b88r-start #b88r-title-badges,
#b88r-start #b88r-play-btn,
#b88r-start .b88r-btn { position: relative !important; z-index: 40 !important; }
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    left: calc(6% + 2px) !important;
    top: 84px !important;
    width: 220px !important;
    height: 108px !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    left: 14px !important;
    top: 80px !important;
    width: 190px !important;
    height: 94px !important;
  }
}


/* v2.11.5 mascot rail lift: live above the copy, anchored to upper-left frame rail */
#b88r-start #b88r-mascot-canvas {
  left: calc(6% + 18px) !important;
  top: 18px !important;
  width: 190px !important;
  height: 112px !important;
  transform: none !important;
  z-index: 24 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    left: calc(6% + 8px) !important;
    top: 20px !important;
    width: 168px !important;
    height: 100px !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    left: 12px !important;
    top: 18px !important;
    width: 150px !important;
    height: 88px !important;
  }
}


/* v2.11.10 no-trail solid mascot path */
#b88r-start #b88r-mascot-canvas {
  left: calc(6% - 16px) !important;
  top: 12px !important;
  width: 260px !important;
  height: 132px !important;
  transform: none !important;
  z-index: 24 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    left: calc(6% - 12px) !important;
    top: 14px !important;
    width: 232px !important;
    height: 118px !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    left: -2px !important;
    top: 12px !important;
    width: 208px !important;
    height: 106px !important;
  }
}


/* v2.11.10 solid mascot opacity override */
#b88r-wrap #b88r-start #b88r-mascot-canvas,
#b88r-wrap.b88r-has-start-bg #b88r-start #b88r-mascot-canvas {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}


/* v2.11.10 final mascot placement: smaller, farther left, no visual effects */
#b88r-start #b88r-mascot-canvas {
  left: calc(6% - 22px) !important;
  top: 12px !important;
  width: 230px !important;
  height: 122px !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    left: calc(6% - 16px) !important;
    top: 12px !important;
    width: 206px !important;
    height: 110px !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    left: -4px !important;
    top: 12px !important;
    width: 184px !important;
    height: 100px !important;
  }
}


/* v2.11.11 mascot higher placement: allow slight float above rail, keep full sprite visible */
#b88r-start #b88r-mascot-canvas {
  top: 8px !important;
}
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    top: 6px !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    top: 6px !important;
  }
}


/* v2.11.12 mobile mascot correction: keep full sprite visible and off the phone edge */
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    left: calc(6% - 8px) !important;
    top: 10px !important;
    width: 196px !important;
    height: 104px !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    left: 6px !important;
    top: 10px !important;
    width: 172px !important;
    height: 94px !important;
  }
}


/* v2.11.13 mobile-only mascot height fix: smaller and higher inside its canvas so the rail no longer cuts through the character. */
@media (max-width: 700px) {
  #b88r-start #b88r-mascot-canvas {
    left: calc(6% - 4px) !important;
    top: 8px !important;
    width: 190px !important;
    height: 104px !important;
  }
}
@media (max-width: 420px) {
  #b88r-start #b88r-mascot-canvas {
    left: 8px !important;
    top: 8px !important;
    width: 166px !important;
    height: 94px !important;
  }
}


/* v2.11.22 title-screen bottom parade
   Real sprite-sheet cast, kept away from the top rail and title copy. */
#b88r-start #b88r-title-parade-canvas {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 76px !important;
  z-index: 24 !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  opacity: 1 !important;
}
#b88r-start .b88r-start-inner {
  position: relative !important;
  z-index: 30 !important;
}
#b88r-start .b88r-title,
#b88r-start .b88r-subtitle,
#b88r-start .b88r-alias-label,
#b88r-start .b88r-alias,
#b88r-start #b88r-title-badges,
#b88r-start #b88r-play-btn {
  position: relative !important;
  z-index: 40 !important;
}
@media (max-width: 700px) {
  #b88r-start #b88r-title-parade-canvas { height: 68px !important; }
}
@media (max-width: 420px) {
  #b88r-start #b88r-title-parade-canvas { height: 62px !important; }
}


/* standalone build: moved from inline <style> + config CSS vars */
html, body { margin:0; padding:0; min-height:100%; background:#000; }
body { display:flex; justify-content:center; align-items:flex-start; color:#fff; overflow-x:hidden; }
#b88r-wrap { min-height:100svh; --b88r-start-text-dim:.62; --b88r-poster-dim:.76; }
#b88r-logo[src=""] { display:none; }

/* standalone build: fill the full column height with the start backdrop */
#b88r-wrap.b88r-has-start-bg #b88r-start { min-height: 100svh !important; }