@import "https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Space+Grotesk:wght@500;700&display=swap";
/* app/globals.css */
:root {
  --ink:#26160e;
  --gold:#ffd33d;
  --cream:#fff5d6;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: #100d0a;
  color: var(--cream);
}
body {
  font-family: "Space Grotesk", sans-serif;
  background:
    radial-gradient(
      circle at 50% 0,
      #3e2c17,
      #100d0a 70%);
}
button {
  font: inherit;
}
.runnerShell {
  width: min(1240px, 96vw);
  margin: auto;
  padding: 15px 0 25px;
}
.runnerShell > header {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.runnerLogo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.runnerLogo > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(#ffe65e, #ee9916);
  border: 3px solid #fff1a2;
  box-shadow: 0 0 20px #ff9d2466;
  color: #342012;
  font: 900 25px "Arial Black";
}
.runnerLogo h1 {
  margin: 0;
  font: 900 23px "Arial Black";
  letter-spacing: 1px;
}
.runnerLogo p {
  margin: -3px 0 0;
  color: #ffc52f;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 5px;
}
.high {
  text-align: right;
  color: #a98b67;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}
.high b {
  display: block;
  color: #fff0b0;
  font-size: 20px;
  letter-spacing: 0;
}
.runnerFrame {
  position: relative;
  overflow: hidden;
  border: 4px solid #f4c554;
  border-radius: 13px;
  background: #63bfe3;
  box-shadow: 0 0 0 5px #3c2413, 0 16px 50px #000b;
}
.runnerFrame:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 70px #0007;
}
.runnerFrame canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1100/650;
  touch-action: none;
}
.runnerHud {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  top: 11px;
  height: 62px;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 62px);
  align-items: center;
  background:
    linear-gradient(
      90deg,
      transparent,
      #1d150dd9 12%,
      #1d150dd9 88%,
      transparent);
  border-block: 1px solid #ffda6255;
  pointer-events: none;
}
.runnerHud div {
  display: grid;
  gap: 3px;
  text-align: center;
}
.runnerHud span {
  font-size: 8px;
  font-weight: 900;
  color: #bca57f;
  letter-spacing: 1px;
}
.runnerHud b {
  font: 900 17px "Arial Black";
  color: #fff3bf;
  text-shadow: 2px 2px #301810;
}
.runnerHud div:nth-child(3) b,
.runnerHud div:nth-child(4) b {
  color: #ffd43b;
}
.boostMeter {
  position: absolute;
  z-index: 6;
  left: 20px;
  bottom: 20px;
  width: 220px;
  padding: 9px 12px;
  background: #21170edb;
  border: 2px solid #f4c554;
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  box-shadow: 0 5px 15px #0008;
}
.boostMeter span,
.boostMeter small {
  font-size: 8px;
  font-weight: 900;
  color: #ffdb5b;
}
.boostMeter i {
  height: 10px;
  background: #0d0a08;
  border-radius: 5px;
  overflow: hidden;
}
.boostMeter i b {
  display: block;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #ff9b1a,
      #fff35d);
  box-shadow: 0 0 12px #ffc52f;
  transition: width .1s;
}
.sound,
.runnerPause {
  position: absolute;
  z-index: 7;
  right: 18px;
  background: #21170edb;
  border: 2px solid #f4c554;
  color: #ffe38a;
  border-radius: 7px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 900;
}
.sound {
  bottom: 20px;
  padding: 10px 12px;
}
.runnerPause {
  top: 86px;
  width: 39px;
  height: 39px;
  font-size: 15px;
}
.runnerStart {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: min(560px, 88%);
  padding: 31px 38px;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      #29180feF,
      #130e0beF);
  border: 3px solid #ffd454;
  border-radius: 13px;
  box-shadow: 0 0 0 6px #2e1b10, 0 22px 70px #000c;
}
.eyebrow {
  font-size: 9px;
  font-weight: 900;
  color: #ffbc2e;
  letter-spacing: 3px;
}
.runnerStart h2 {
  font: 900 clamp(34px, 5vw, 57px)/.94 "Arial Black";
  margin: 13px 0;
  color: #fff4d0;
  letter-spacing: -2px;
}
.runnerStart h2 em {
  font-style: normal;
  color: #ffd32e;
  text-shadow: 0 0 25px #ff9d33;
}
.runnerStart p {
  font-size: 14px;
  line-height: 1.5;
  color: #d8c5a7;
  margin-bottom: 20px;
}
.runnerStart button,
.runAgain {
  border: 0;
  border-radius: 7px;
  padding: 15px 22px;
  background: linear-gradient(#ffe25a, #f2a61c);
  color: #28170d;
  font: 900 14px "Arial Black";
  box-shadow: 0 5px 0 #9b4c10, 0 0 22px #ffa51f55;
  cursor: pointer;
  transition: .12s;
}
.runnerStart button:hover,
.runAgain:hover {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #9b4c10;
}
.runnerStart button b {
  margin-left: 18px;
}
.runnerStart small {
  display: block;
  margin-top: 18px;
  font-size: 8px;
  color: #9d8463;
  font-weight: 900;
  letter-spacing: 1px;
}
.runnerWave {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font: 900 55px "Arial Black";
  color: #ffe24d;
  text-shadow: 4px 5px #5b2a10, 0 0 30px #ffad27;
  animation: wave 1.6s both;
  pointer-events: none;
}
.runnerWave small {
  display: block;
  text-align: center;
  font: 900 10px "Space Grotesk";
  letter-spacing: 5px;
  color: #fff;
}
.runAgain {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 63%;
  transform: translate(-50%, -50%);
}
.runAgain:hover {
  transform: translate(-50%, calc(-50% + 3px));
}
.runnerShell > footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 6px 0;
  font-size: 12px;
  color: #ad9b82;
}
.runnerShell > footer b {
  color: #ffc62d;
  font-size: 9px;
  letter-spacing: 2px;
}
.runnerShell > footer strong {
  color: #f0cf86;
  font-size: 9px;
}
@keyframes wave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
  }
  16%, 72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -57%) scale(1.3);
  }
}
@media (max-width: 720px) {
  .runnerShell {
    width: 100%;
    padding: 5px;
  }
  .runnerShell > header {
    height: 52px;
  }
  .runnerLogo h1 {
    font-size: 17px;
  }
  .runnerLogo > span {
    width: 37px;
    height: 37px;
  }
  .runnerHud {
    height: 49px;
    gap: 11px;
    top: 6px;
  }
  .runnerHud div:nth-child(3),
  .runnerHud div:nth-child(6) {
    display: none;
  }
  .runnerHud b {
    font-size: 12px;
  }
  .runnerStart {
    padding: 21px 15px;
  }
  .runnerStart p {
    display: none;
  }
  .runnerStart h2 {
    font-size: 34px;
  }
  .boostMeter {
    left: 9px;
    bottom: 9px;
    width: 170px;
  }
  .sound {
    right: 9px;
    bottom: 9px;
  }
  .runnerPause {
    right: 9px;
    top: 63px;
  }
  .runnerShell > footer {
    grid-template-columns: 1fr;
  }
  .runnerShell > footer strong {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* app/arcade.css */
.headerStatus {
  display: flex;
  align-items: center;
  gap: 14px;
}
.headerSound {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #8f6728;
  border-radius: 50%;
  background: #24170d;
  color: #ffe38a;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 2px 8px #0008;
}
.headerSound:after {
  content: "\1f50a";
  font: 14px system-ui, sans-serif;
}
.headerSound:hover {
  border-color: #ffd85b;
  background: #33200f;
}
.headerSound.isMuted {
  border-color: #bc4b35;
  background: #351410;
  box-shadow: 0 0 0 2px #651b12, 0 2px 8px #0008;
}
.headerSound.isMuted:after {
  content: "\1f507";
}
.audioToggles {
  display: flex;
  align-items: center;
  gap: 7px;
}
.audioControl {
  position: relative;
}
.audioToggles .headerSound {
  position: relative;
  display: block;
  width: 48px;
  height: 40px;
  border-radius: 6px;
}
.audioToggles .headerSound span {
  display: none;
}
.audioToggles .musicToggle:after {
  content: "\266a";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  transform: none;
  font: 900 25px/1 Georgia, serif;
}
.audioToggles .musicToggle.isMuted:after {
  content: "\266a";
  color: #ff7564;
  font-size: 25px;
}
.audioToggles .sfxToggle:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 23px;
  height: 21px;
  transform: translate(-50%, -50%);
  background: #ffe38a;
  clip-path: polygon(0 34%, 28% 34%, 58% 6%, 58% 94%, 28% 66%, 0 66%, 0 34%, 68% 34%, 68% 66%, 74% 66%, 74% 26%, 81% 26%, 81% 74%, 88% 74%, 88% 16%, 96% 16%, 96% 84%, 88% 84%, 88% 74%, 81% 74%, 81% 66%, 68% 66%, 68% 34%);
}
.audioToggles .sfxToggle.isMuted:after {
  background: #ff7564;
}
.audioToggles .sfxToggle.isMuted:before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 27px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 2px;
  background: #ff7564;
  box-shadow: 0 0 0 1px #24100b;
}
.audioControl label {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 40;
  top: 45px;
  right: 0;
  width: 142px;
  padding: 8px 10px;
  border: 1px solid #a97828;
  border-radius: 5px;
  background: #170d08f5;
  box-shadow: 0 8px 24px #000b;
  color: #ffe39a;
  transition: opacity .14s;
}
.audioControl:hover label,
.audioControl:focus-within label {
  visibility: visible;
  opacity: 1;
}
.audioControl label span {
  display: block;
  margin-bottom: 6px;
  font: 900 7px var(--font-geist-mono);
  letter-spacing: 1px;
}
.audioControl input {
  display: block;
  width: 100%;
  accent-color: #ffc52a;
  cursor: pointer;
}
.runnerFrame canvas {
  filter: none;
  image-rendering: auto;
  backface-visibility: hidden;
}
.runnerFrame.isBoosting {
  border-color: #fff06a;
  box-shadow:
    0 0 0 5px #251608,
    0 0 14px #ffb51f66,
    0 16px 50px #000b;
}
.threatVignette {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 46px 8px #ff2b101f;
  border: 2px solid transparent;
  transition: opacity .18s;
}
.runnerFrame.isThreatened .threatVignette {
  opacity: 1;
  border-color: #ff5b2438;
  animation: threatBeat .52s ease-in-out infinite alternate;
}
.runnerFrame.isPursued .threatVignette {
  opacity: .62;
  border-color: #ff8a2130;
  box-shadow:
    inset 0 -22px 42px #b51d092d,
    inset 25px 0 38px #ff3b151b,
    inset -25px 0 38px #ff3b151b;
}
.runnerHud {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background: none;
  border: 0;
  height: auto;
  display: block;
}
.runnerHud > div {
  position: absolute;
  top: 10px;
  padding: 0;
  text-align: left;
  filter: drop-shadow(0 2px 2px #000);
}
.runnerHud .hudLevel {
  left: 12px;
  display: grid;
}
.runnerHud .hudScoreHoney {
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  text-align: center;
}
.runnerHud .hudScoreHoney section {
  display: grid;
  min-width: 68px;
}
.runnerHud .hudHealth {
  right: 12px;
  display: grid;
  justify-items: center;
  width: 124px;
  text-align: center;
}
.runnerHud span {
  color: #d4b878;
  font: 900 7px var(--font-geist-mono);
  letter-spacing: 1.5px;
}
.runnerHud b {
  color: #fff4c4;
  font: 950 16px var(--font-geist-mono);
  line-height: 1.05;
  text-shadow: 0 2px 0 #402000, 0 0 5px #000;
}
.runnerHud .hudScoreHoney section:last-child b {
  color: #fff36d;
  text-shadow: 0 0 8px #ff9d00, 1px 2px #140700;
}
.runnerHud .hudScoreHoney b small {
  margin-left: 2px;
  color: #ffe9a0;
  font: 900 9px var(--font-geist-mono);
  text-shadow: 0 1px 2px #000;
}
.runnerHud .hudHealth > span small {
  color: #fff4c4;
  font-size: 7px;
  letter-spacing: 0;
}
.runnerHud .honeyPot {
  font-style: normal;
  font-size: 13px;
  margin-right: 4px;
  filter: drop-shadow(0 1px 1px #512400);
}
.runnerHud .healthPips {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 3px;
  text-shadow: none;
}
.runnerHud .healthPips i {
  position: relative;
  display: block;
  overflow: hidden;
  width: 25px;
  height: 25px;
  border: 1px solid #ffd758;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #5b3217,
      #1a0d06 72%);
  filter: drop-shadow(0 2px 2px #000);
  transition: opacity .18s, transform .18s;
}
.runnerHud .healthPips i img {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 48px;
  height: 48px;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.runnerHud .healthPips i.active {
  box-shadow: inset 0 0 8px #ffbd2644, 0 0 5px #ffbb2b66;
}
.runnerHud .healthPips i.lost {
  opacity: .2;
  filter: grayscale(1);
  transform: scale(.82);
}
.runnerShell > header {
  position: relative;
}
.headerWalletHoldings {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 300px;
  padding: 8px 18px;
  border: 1px solid #f6ca45;
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      #111820,
      #05070a);
  box-shadow: 0 6px 18px #0009, 0 0 0 1px #ffe68a22;
  color: #f7f9ff;
  font-family: var(--font-geist-mono);
  pointer-events: none;
}
.headerWalletHoldings > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 9px;
  flex: 1;
}
.headerWalletHoldings > div:last-of-type {
  justify-content: end;
}
.headerWalletHoldings span {
  color: #f6ca45;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.5px;
}
.headerWalletHoldings b {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 9px #f6ca4544;
}
.headerWalletHoldings > i {
  width: 1px;
  height: 25px;
  background: #f6ca4555;
}
.headerWalletHoldings small {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  color: #ffd967;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 1px;
}
.headerWalletHoldings[data-status=stale] {
  border-color: #ffad32;
}
@media (max-width: 820px), (pointer: coarse) {
  .runnerShell > header {
    height: 86px;
    align-items: flex-start;
    padding-top: 3px;
  }
  .runnerLogo h1 {
    display: none;
  }
  .headerWalletHoldings {
    left: 50px;
    right: 92px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 0;
    gap: 7px;
    padding: 5px 8px;
  }
  .headerWalletHoldings > div {
    gap: 4px;
    min-width: 0;
  }
  .headerWalletHoldings > div:last-of-type {
    transform: none;
  }
  .headerWalletHoldings span {
    font-size: 8px;
  }
  .headerWalletHoldings b {
    font-size: 13px;
  }
  .headerWalletHoldings > i {
    height: 20px;
  }
  .runnerFrame.mobileDevice {
    width: min(100%, calc((100dvh - 96px)*.5625));
  }
}
.waveGoal {
  position: absolute;
  z-index: 7;
  top: 43px;
  left: 50%;
  width: 116px;
  transform: translateX(-50%);
  padding: 0;
  color: #fff;
  font: 900 6px var(--font-geist-mono);
  letter-spacing: .8px;
  filter: drop-shadow(0 2px 2px #000);
}
.waveGoal span {
  color: #fff0b8;
}
.waveGoal > b {
  float: right;
  color: #ffe067;
  font-size: 6px;
}
.waveGoal i {
  display: block;
  clear: both;
  height: 2px;
  margin-top: 3px;
  background: #140a05aa;
  overflow: hidden;
}
.waveGoal em {
  display: block;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #ff8a19,
      #fff26b);
  box-shadow: 0 0 5px #ffb21d;
}
.chaseMeter {
  position: absolute;
  z-index: 8;
  top: 49px;
  right: 12px;
  width: 154px;
  color: #ffd2ba;
  font: 900 6px var(--font-geist-mono);
  letter-spacing: 1px;
  text-align: left;
  filter: drop-shadow(0 2px 2px #000);
}
.chaseMeter span {
  display: flex;
  justify-content: space-between;
  color: #ffcf69;
}
.chaseMeter span strong {
  color: #9ff18c;
  font-size: 6px;
}
.chaseMeter i {
  position: relative;
  display: block;
  height: 6px;
  margin-top: 4px;
  border: 1px solid #4a1b0b;
  border-radius: 5px;
  background: #160705;
  overflow: visible;
}
.chaseMeter b {
  display: block;
  height: 100%;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      #e8bd35 0 45%,
      #ff7a20 68%,
      #ff2f1f 100%);
  box-shadow: 0 0 6px #ff5d20;
  transition: width .15s;
}
.chaseMeter i em {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -54%);
  font: 11px system-ui, sans-serif;
  filter: drop-shadow(0 1px 1px #000);
  transition: left .15s;
}
.chaseMeter > small {
  position: absolute;
  right: 0;
  top: 20px;
  color: #fff4cf;
  font: 950 8px var(--font-geist-mono);
}
.chaseMeter.danger span strong,
.chaseMeter.danger > small {
  color: #ff6550;
}
.chaseMeter.danger {
  animation: swarmGaugePulse .35s infinite alternate;
}
.boostMeter,
.honeyMeter {
  position: absolute;
  z-index: 7;
  bottom: 10px;
  width: 132px;
  height: 18px;
  padding: 0;
  color: #fff;
  font: 900 7px var(--font-geist-mono);
  letter-spacing: 1px;
  filter: drop-shadow(0 2px 2px #000);
}
.boostMeter {
  left: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: center;
}
.honeyMeter {
  right: 12px;
}
.boostMeter span {
  color: #8af0ff;
}
.honeyMeter > span {
  display: block;
  color: #ffe56f;
  margin-bottom: 3px;
}
.boostMeter small,
.honeyMeter > strong {
  display: none;
}
.boostMeter i,
.honeyMeter i {
  display: block;
  height: 4px;
  background: #140a05aa;
  box-shadow: 0 1px 0 #000;
  overflow: hidden;
}
.boostMeter i b,
.honeyMeter i b {
  display: block;
  height: 100%;
  transition: width .12s;
}
.boostMeter i b {
  background:
    linear-gradient(
      90deg,
      #1fcbe8,
      #fff56b);
  box-shadow: 0 0 7px #2de8ff;
}
.honeyMeter i b {
  background:
    linear-gradient(
      90deg,
      #f07c12,
      #fff5ac);
  box-shadow: 0 0 7px #ffb31b;
}
.isBoosting .boostMeter {
  filter: drop-shadow(0 0 6px #22dfff);
}
.sound {
  position: absolute;
  z-index: 9;
  top: 39px;
  right: 12px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff4a0;
  cursor: pointer;
  font: 900 0 var(--font-geist-mono);
  filter: drop-shadow(0 2px 2px #000);
}
.sound:after {
  content: "\266a";
  font-size: 12px;
}
.laneWarning {
  display: none;
  position: absolute;
  z-index: 8;
  bottom: 23%;
  width: 18px;
  height: 10px;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 0 5px #ff3018);
  animation: dangerPulse .4s infinite alternate;
}
.laneWarning:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ff4b2d;
  border-bottom: 2px solid #ff4b2d;
  transform: rotate(45deg);
}
.laneWarning:after {
  display: none;
}
.laneWarning.lane0 {
  left: 25%;
}
.laneWarning.lane1 {
  left: 50%;
}
.laneWarning.lane2 {
  left: 75%;
}
.laneWarning span {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font: 950 6px var(--font-geist-mono);
  letter-spacing: .8px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}
.laneWarning.jump {
  filter: drop-shadow(0 0 6px #ffc22e);
}
.laneWarning.jump:before {
  border-color: #ffd447;
}
.laneWarning.dive {
  filter: drop-shadow(0 0 6px #38d9ff);
}
.laneWarning.dive:before {
  border-color: #58e5ff;
}
.laneWarning.dodge {
  filter: drop-shadow(0 0 6px #ff3018);
}
.powerBadge {
  position: absolute;
  z-index: 8;
  left: auto;
  right: 16px;
  top: auto;
  bottom: 38px;
  transform: none;
  padding: 2px 5px;
  border-right: 2px solid currentColor;
  background: #120a06a8;
  color: #baffc5;
  font: 900 6px var(--font-geist-mono);
  letter-spacing: 1px;
  text-align: right;
  text-shadow: 0 0 6px #72ff88, 0 2px #000;
}
.powerBadge.magnet {
  color: #c9faff;
  text-shadow: 0 0 6px #39e6ff, 0 2px #000;
}
.powerBadge.golden {
  color: #fff5a5;
  text-shadow: 0 0 7px #ff9d00, 0 2px #000;
}
.actionButtons {
  display: none;
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  gap: 6px;
}
.actionButtons button {
  width: 54px;
  height: 29px;
  padding: 0;
  border: 1px solid #d89c2f;
  border-bottom: 3px solid #713708;
  border-radius: 3px;
  background: #1a0e08d9;
  color: #fff2b3;
  font: 900 7px var(--font-geist-mono);
  letter-spacing: .5px;
  touch-action: none;
}
.runnerFrame.mobileDevice {
  touch-action: none;
}
.runnerFrame.mobileDevice .actionButtons {
  display: flex;
}
.actionButtons .mobileBoost {
  width: 62px;
  border-color: #55dff4;
  border-bottom-color: #12677c;
  background: #073442e6;
  color: #d8fbff;
}
.isBoosting .actionButtons .mobileBoost {
  background: #e5bd21;
  color: #1d1004;
  box-shadow: 0 0 10px #57efff;
}
.runnerFrame.mobileDevice {
  width: min(100%, calc((100dvh - 108px)*.5625));
  min-width: 280px;
  margin-inline: auto;
}
.runnerFrame.mobileDevice canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 9/16;
}
.runnerFrame.mobileDevice .actionButtons {
  bottom: 12px;
  gap: 9px;
}
.runnerFrame.mobileDevice .actionButtons button {
  width: 68px;
  height: 42px;
  font-size: 9px;
}
.runnerFrame.mobileDevice .actionButtons .mobileBoost {
  width: 76px;
}
.runnerFrame.mobileDevice + .controlGuide {
  display: none !important;
}
.hitFlash {
  position: absolute;
  z-index: 20;
  inset: 0;
  border: 10px solid #ff2412e6;
  background:
    radial-gradient(
      circle,
      transparent 42%,
      #ff14056b);
  box-shadow: inset 0 0 70px #f20;
  pointer-events: none;
  animation: impactFlash .14s infinite alternate;
}
.resultsCard {
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(390px, 88%);
  padding: 28px;
  text-align: center;
  border: 2px solid #ffc52a;
  border-bottom: 6px solid #713708;
  border-radius: 5px;
  background:
    linear-gradient(
      145deg,
      #140c07f7,
      #3e180cf7);
  box-shadow: 0 20px 70px #000, 0 0 35px #ff91194d;
  color: #fff;
}
.resultsCard span,
.resultsCard strong {
  display: block;
  color: #ffbe27;
  font: 900 10px var(--font-geist-mono);
  letter-spacing: 3px;
}
.resultsCard h2 {
  margin: 6px 0 0;
  font: 950 clamp(44px, 8vw, 72px)/1 var(--font-geist-sans);
  font-style: italic;
}
.resultsCard p {
  margin: 10px 0 16px;
  color: #e4c79f;
  font: 800 11px var(--font-geist-mono);
  letter-spacing: 1px;
}
.resultsCard button {
  margin-top: 22px;
  padding: 14px 24px;
  border: 0;
  border-radius: 3px;
  background: #ffc527;
  box-shadow: 0 6px 0 #8a4a09;
  color: #201005;
  font: 950 12px var(--font-geist-mono);
  letter-spacing: 1px;
  cursor: pointer;
}
.deliveryMascot {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: -3%;
  width: clamp(155px, 24vw, 245px);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 15px #000a) drop-shadow(0 0 13px #ffb62b55);
  pointer-events: none;
  animation: deliveryMascotIn .48s cubic-bezier(.18, .8, .25, 1.2) both;
}
@keyframes deliveryMascotIn {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(.86);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
.runnerWave {
  top: 13%;
  max-width: 56%;
  padding: 2px 7px;
  border-left: 1px solid #ffe25b;
  background:
    linear-gradient(
      90deg,
      transparent,
      #160d057d 18%,
      #160d057d 82%,
      transparent);
  font: 900 9px var(--font-geist-mono);
  line-height: 1.15;
  letter-spacing: .7px;
  text-align: center;
  text-shadow: 0 1px #5b2a10, 0 0 6px #ffad27;
  white-space: nowrap;
  animation: powerToast .7s both;
}
.runnerWave small {
  display: none;
}
.runnerWave.powerToast {
  top: 13%;
  font-size: 9px;
  animation: powerToast .65s both;
}
@keyframes threatBeat {
  to {
    box-shadow: inset 0 0 68px 12px #ff1e1038;
    border-color: #ffb52b66;
  }
}
@keyframes swarmClose {
  to {
    filter: brightness(1.5);
    translate: 0 -4px;
    scale: 1.12;
  }
}
@keyframes swarmGaugePulse {
  to {
    filter: drop-shadow(0 0 5px #ff321c);
    opacity: .72;
  }
}
@keyframes dangerPulse {
  to {
    opacity: .38;
    transform: translateX(-50%) translateY(4px) scale(.9);
  }
}
@keyframes impactFlash {
  to {
    opacity: .35;
  }
}
@keyframes powerToast {
  0% {
    opacity: 0;
    transform: translate(-50%, -25%) scale(.85);
  }
  18%, 72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1);
  }
}
@media (max-width: 720px) {
  .runnerHud > div {
    top: 6px;
  }
  .runnerHud .hudLevel {
    left: 7px;
  }
  .runnerHud .hudScoreHoney {
    gap: 6px;
  }
  .runnerHud .hudScoreHoney section {
    min-width: 48px;
  }
  .runnerHud .hudHealth {
    right: 7px;
  }
  .runnerHud span {
    font-size: 6px;
    letter-spacing: .7px;
  }
  .runnerHud b {
    font-size: 12px;
  }
  .runnerHud .healthPips {
    gap: 2px;
  }
  .runnerHud .healthPips i {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  .waveGoal {
    top: 36px;
    left: 50%;
    width: 100px;
    font-size: 6px;
  }
  .waveGoal > b {
    font-size: 6px;
  }
  .runnerPause {
    top: 6px;
    right: 62px;
    width: 20px;
    height: 20px;
  }
  .sound {
    top: 33px;
    right: 6px;
  }
  .boostMeter,
  .honeyMeter {
    bottom: 6px;
    width: 96px;
    height: 17px;
  }
  .boostMeter {
    left: 6px;
  }
  .honeyMeter {
    right: 6px;
  }
  .boostMeter span,
  .honeyMeter > span {
    font-size: 6px;
  }
  .runnerFrame.mobileDevice .actionButtons {
    display: flex;
    bottom: 5px;
  }
  .actionButtons button {
    width: 48px;
    height: 28px;
    font-size: 7px;
  }
  .powerBadge {
    right: 7px;
    bottom: 31px;
    font-size: 6px;
  }
  .laneWarning {
    top: auto;
    bottom: 21%;
    transform: translateX(-50%) scale(.9);
  }
  .laneWarning span {
    font-size: 7px;
  }
  .resultsCard {
    padding: 22px;
  }
  .resultsCard h2 {
    font-size: 46px;
  }
}
@media (max-width: 720px) {
  .runnerHud .healthPips i img {
    width: 35px;
    height: 35px;
  }
  .deliveryMascot {
    bottom: -2%;
    width: clamp(125px, 34vw, 180px);
  }
}
.boostMeter,
.honeyMeter {
  bottom: 9px;
  width: 118px;
  min-height: 20px;
  height: auto;
  letter-spacing: .7px;
}
.boostMeter {
  left: 14px;
}
.honeyMeter {
  right: 16px;
  text-align: right;
}
.honeyMeter > span {
  white-space: nowrap;
}
.resultsCard {
  width: min(350px, 84%);
  padding: 20px 28px 24px;
  border: 0;
  border-top: 3px solid #ffe45c;
  border-bottom: 3px solid #e17713;
  border-radius: 0;
  clip-path: polygon(8% 0, 92% 0, 100% 18%, 100% 82%, 92% 100%, 8% 100%, 0 82%, 0 18%);
  background:
    linear-gradient(
      90deg,
      #130a05ed,
      #3b170be8 50%,
      #130a05ed);
  box-shadow: 0 18px 60px #000d, 0 0 28px #ff9b2040;
}
.resultsCard span,
.resultsCard strong {
  font-size: 9px;
  letter-spacing: 2.5px;
}
.resultsCard h2 {
  margin: 7px 0 2px;
  color: #fff7c6;
  font-size: clamp(36px, 6vw, 52px);
  text-shadow: 0 3px #7d2f08;
}
.resultsCard p {
  margin: 8px 0 12px;
  font-size: 9px;
  letter-spacing: .8px;
}
.resultsCard button {
  margin-top: 16px;
  padding: 11px 21px;
  font-size: 10px;
  box-shadow: 0 4px 0 #8a4a09;
}
.resultsCard.levelCard {
  left: 50%;
  right: auto;
  top: 21%;
  bottom: auto;
  transform: translateX(-50%);
  width: min(470px, 64%);
  padding: 9px 22px 12px;
}
.resultsCard.levelCard h2 {
  display: inline-block;
  margin: 4px 12px 2px;
  font-size: 31px;
}
.resultsCard.levelCard p {
  display: inline-block;
  margin: 4px 0 7px;
  line-height: 1.3;
}
.resultsCard.levelCard button {
  display: block;
  margin: 6px auto 0;
  padding: 7px 16px;
}
.gameOverActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
  width: 100%;
  margin-top: 16px;
}
.gameOverActions.singleAction {
  grid-template-columns: minmax(0, 1fr);
  width: min(290px, 100%);
  margin: 16px auto 0;
}
.resultsCard .gameOverActions button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.resultsCard .gameOverActions .secondary {
  border: 1px solid #ffcf5f;
  background: #25130d;
  box-shadow: 0 4px 0 #090504;
  color: #ffd96c;
}
.resultsCard .gameOverActions .continuePurchaseButton {
  width: 100%;
  min-height: 48px;
  padding: 11px 8px;
  font-size: 10px;
  letter-spacing: .5px;
  white-space: normal;
}
.resultsCard .gameOverActions .restartWaveOneButton {
  min-height: 48px;
  padding: 9px 7px;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .5px;
}
.resultsCard .gameOverActions .continuePurchaseButton:disabled {
  cursor: wait;
  filter: saturate(.55);
  opacity: .78;
  box-shadow: 0 4px 0 #4d2c09;
}
.resultsCard .walletStatus {
  display: block;
  margin: 9px auto 0;
  color: #fff0ad;
  font-size: 8px;
  letter-spacing: 1px;
}
@media (max-width: 720px) {
  .honeyMeter {
    right: 9px;
    width: 88px;
  }
  .boostMeter {
    left: 8px;
    width: 88px;
  }
  .resultsCard {
    width: 82%;
    padding: 17px 20px 20px;
  }
  .resultsCard h2 {
    font-size: 36px;
  }
  .resultsCard.levelCard {
    left: 50%;
    right: auto;
    top: 18%;
    bottom: auto;
    transform: translateX(-50%);
    width: 84%;
    padding: 7px 12px 9px;
  }
  .resultsCard.levelCard h2 {
    display: inline-block;
    margin: 3px 7px;
    font-size: 24px;
  }
  .resultsCard.levelCard p {
    display: inline-block;
    margin: 3px 0;
    font-size: 7px;
  }
  .resultsCard.levelCard strong {
    font-size: 7px;
  }
  .resultsCard.levelCard button {
    margin-top: 4px;
    padding: 6px 12px;
    font-size: 8px;
  }
}
.runnerShell,
.runnerFrame {
  box-sizing: border-box;
}
.runnerStart {
  left: 50%;
  right: auto;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(390px, 72%);
  padding: 25px 24px 23px;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      #29180fe8,
      #130e0be8);
  border-width: 2px;
  box-shadow: 0 0 0 4px #2e1b10, 0 18px 50px #000b;
}
.runnerStart h2 {
  margin: 0;
  color: #fff4bd;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1;
  text-shadow: 0 3px #7b3309, 0 0 12px #ffaf2838;
}
.runnerStart p {
  margin: 9px 0 5px;
  color: #ffd85d;
  font: 950 12px var(--font-geist-mono);
  letter-spacing: 2px;
}
.runnerStart .mintLine {
  display: block;
  margin: 0 0 17px;
  color: #d6bd89;
  font: 900 8px var(--font-geist-mono);
  letter-spacing: 1.8px;
}
.runnerStart button {
  padding: 11px 16px;
  font-size: 11px;
}
@media (max-width: 720px) {
  .runnerStart {
    left: 50%;
    right: auto;
    top: 58%;
    transform: translate(-50%, -50%);
    width: 86%;
    padding: 13px 14px;
  }
  .runnerStart h2 {
    font-size: 25px;
    margin: 5px 0;
  }
  .runnerStart small {
    margin-top: 7px;
  }
}
@media (max-width: 720px) {
  .chaseMeter {
    top: 35px;
    right: 7px;
    width: 112px;
  }
  .chaseMeter span,
  .chaseMeter strong {
    font-size: 5px;
    letter-spacing: .4px;
  }
  .chaseMeter > small {
    top: 18px;
    font-size: 7px;
  }
}
.controlGuide {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  padding: 14px 8px 0 !important;
  color: #8f806b;
  font: 900 10px/1.2 var(--font-geist-mono);
  letter-spacing: .8px;
}
.controlGuide span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #b98a3f66;
  border-radius: 8px;
  background: #080807e8;
  color: #fff1d0;
  box-shadow: inset 0 1px #fff0a51a;
  white-space: nowrap;
}
.controlGuide .pauseSettingsHint {
  border-color: #60737b55;
  background: #070a0be8;
  color: #b8c8cc;
  font-size: 8px;
  letter-spacing: .55px;
}
.controlGuide .pauseSettingsHint b {
  border-color: #75a2ad66;
  background: #10181b;
  color: #bceaf2 !important;
  font-size: 8px !important;
}
.controlGuide b {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  margin-right: 0;
  padding: 3px 7px;
  border: 1px solid #f0c65a88;
  border-radius: 5px;
  background: #21180b;
  color: #ffe478 !important;
  font-size: 10px !important;
  letter-spacing: .5px !important;
}
@media (max-width: 720px) {
  .controlGuide {
    display: grid !important;
    grid-template-columns: repeat(2, auto) !important;
    gap: 7px 18px;
    justify-content: center;
    text-align: center;
  }
}
.bonusGoal {
  position: absolute;
  z-index: 8;
  left: 12px;
  top: 47px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 7px;
  max-width: 185px;
  padding: 4px 7px;
  border-left: 2px solid #ffd34c;
  background: #160c07b8;
  filter: drop-shadow(0 2px 2px #000);
  pointer-events: none;
}
.bonusGoal span {
  grid-column: 1;
  color: #eab84c;
  font: 900 6px var(--font-geist-mono);
  letter-spacing: 1px;
}
.bonusGoal b {
  grid-column: 1;
  color: #fff1b1;
  font: 900 7px var(--font-geist-mono);
  letter-spacing: .4px;
  white-space: nowrap;
}
.bonusGoal em {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  color: #ffe45a;
  font: 950 10px var(--font-geist-mono);
  font-style: normal;
}
.bonusGoal.complete {
  border-color: #76f58d;
}
.bonusGoal.complete em {
  color: #76f58d;
}
.resultsCard .bonusResult {
  display: block;
  margin-top: 4px;
  color: #b99b72;
  font: 900 7px var(--font-geist-mono);
  letter-spacing: .7px;
}
.resultsCard .bonusResult.won {
  color: #79f590;
  text-shadow: 0 0 5px #36d95777;
}
@media (max-width: 720px) {
  .bonusGoal {
    left: 7px;
    top: 35px;
    max-width: 135px;
    padding: 3px 5px;
  }
  .bonusGoal b {
    font-size: 5px;
  }
  .bonusGoal em {
    font-size: 8px;
  }
}
.runnerPause {
  position: absolute;
  z-index: 12;
  top: 9px;
  right: 178px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #b98b3a;
  border-radius: 3px;
  background: #170d08cc;
  color: #ffe585;
  font: 950 10px var(--font-geist-mono);
  cursor: pointer;
  box-shadow: 0 2px 8px #0009;
}
.runnerStart .recordsButton {
  display: block;
  margin: 13px auto 0;
  padding: 7px 12px;
  border: 1px solid #977036;
  background: #140d09;
  color: #d9bd78;
  box-shadow: none;
  font-size: 8px;
}
.campaignPanel,
.settingsPanel {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(
      145deg,
      #160d09fa,
      #35180dfa);
  border: 2px solid #e3a83b;
  box-shadow: 0 24px 80px #000;
  color: #fff4c2;
}
.campaignPanel {
  width: min(880px, 94%);
  height: min(540px, 88%);
  padding: 14px;
  overflow: hidden;
}
.campaignPanel > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
  color: #ffd65d;
  font: 950 11px var(--font-geist-mono);
  letter-spacing: 2px;
}
.campaignPanel > header button {
  width: 26px;
  height: 26px;
  border: 1px solid #9b6828;
  background: #241108;
  color: #ffe29a;
  font-size: 18px;
  cursor: pointer;
}
.masteryStrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
.masteryStrip div {
  min-width: 0;
  padding: 6px;
  border-left: 2px solid #5e482c;
  background: #0c0907;
  color: #756a59;
}
.masteryStrip div.mastered {
  border-color: #ffe150;
  background: #31200d;
  color: #ffe886;
  box-shadow: inset 0 0 12px #ffb51c25;
}
.masteryStrip b {
  margin-right: 5px;
  font: 950 9px var(--font-geist-mono);
}
.masteryStrip span {
  font: 800 6px var(--font-geist-mono);
  letter-spacing: .5px;
}
.levelRecords {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  height: calc(100% - 91px);
  overflow: auto;
}
.levelRecords div {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 40px;
  border: 1px solid #38291c;
  background: #0b0806;
  color: #6d6253;
}
.levelRecords div.cleared {
  border-color: #9f7026;
  background: #211409;
  color: #ffe36b;
}
.levelRecords b {
  font: 950 11px var(--font-geist-mono);
}
.levelRecords span {
  font: 900 6px var(--font-geist-mono);
}
.levelRecords small {
  font: 700 5px var(--font-geist-mono);
}
.campaignPanel.recordsPanel {
  width: min(760px, 92%);
  height: min(520px, 86%);
  padding: 16px;
}
.recordsPanel > header > div {
  display: grid;
  gap: 3px;
}
.recordsPanel > header span {
  font-size: 14px;
}
.recordsPanel > header small {
  color: #b8945b;
  font: 800 8px var(--font-geist-mono);
  letter-spacing: 1px;
}
.recordsPanel .levelRecords {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  height: calc(100% - 45px);
  padding: 2px 5px 8px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.recordsPanel .levelRecords div {
  place-items: start;
  align-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 11px;
  border-left: 3px solid #493520;
  text-align: left;
}
.recordsPanel .levelRecords div.cleared {
  border-left-color: #ffc83d;
  box-shadow: inset 0 0 18px #ffb31814;
}
.recordsPanel .levelRecords b {
  color: #fff0b0;
  font-size: 10px;
}
.recordsPanel .levelRecords span {
  color: #c8ac79;
  font-size: 8px;
  line-height: 1.35;
}
.recordsPanel .levelRecords small {
  color: #8f806a;
  font-size: 7px;
  line-height: 1.4;
}
.recordsPanel .levelRecords div.cleared span {
  color: #ffe266;
}
.recordsPanel .levelRecords div.cleared small {
  color: #d8bd8a;
}
.settingsPanel {
  width: min(390px, 86%);
  padding: 22px;
}
.settingsPanel > span {
  color: #e9b847;
  font: 950 8px var(--font-geist-mono);
  letter-spacing: 2px;
}
.settingsPanel h2 {
  margin: 4px 0 16px;
  font: 950 27px var(--font-geist-sans);
}
.settingsPanel label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin: 11px 0;
  color: #d8bd82;
  font: 900 8px var(--font-geist-mono);
  letter-spacing: 1px;
}
.settingsPanel input[type=range] {
  grid-column: 1/3;
  width: 100%;
  accent-color: #ffc82e;
}
.settingsPanel select {
  padding: 4px;
  border: 1px solid #8c642c;
  background: #120b07;
  color: #ffe394;
  font: 900 8px var(--font-geist-mono);
}
.settingsPanel .motionSetting {
  display: flex;
  align-items: center;
}
.settingsPanel button {
  display: block;
  margin: 18px auto 0;
  padding: 10px 18px;
  border: 0;
  background: #ffc52a;
  color: #1d1005;
  font: 950 10px var(--font-geist-mono);
  cursor: pointer;
}
.resultStats {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 5px auto;
}
.resultStats i {
  display: grid;
  color: #ae9470;
  font: 900 6px var(--font-geist-mono);
  font-style: normal;
}
.resultStats b {
  color: #fff3bd;
  font-size: 9px;
}
.runnerFrame.isBoosting .runnerWave {
  filter: drop-shadow(0 0 7px #ffdc45);
}
@media (max-width: 720px) {
  .runnerPause {
    top: 5px;
    right: 128px;
    width: 21px;
    height: 21px;
  }
  .campaignPanel {
    height: 90%;
    padding: 9px;
  }
  .masteryStrip {
    grid-template-columns: repeat(2, 1fr);
  }
  .levelRecords {
    grid-template-columns: repeat(5, 1fr);
    height: calc(100% - 160px);
  }
  .settingsPanel {
    padding: 16px;
  }
  .resultStats {
    gap: 8px;
  }
}
@media (max-width: 720px) {
  .campaignPanel.recordsPanel {
    width: 91%;
    height: 82%;
    padding: 11px;
  }
  .recordsPanel .levelRecords {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: calc(100% - 42px);
    gap: 7px;
  }
  .recordsPanel .levelRecords div {
    min-height: 62px;
    padding: 8px;
  }
  .recordsPanel .levelRecords b {
    font-size: 8px;
  }
  .recordsPanel .levelRecords span {
    font-size: 6px;
  }
  .recordsPanel .levelRecords small {
    font-size: 5.5px;
  }
}
.runnerFrame.highContrast .laneWarning {
  display: block;
  filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 8px #fff);
  transform: translateX(-50%) scale(1.16);
}
.masteryStrip div.mastered {
  cursor: pointer;
}
.masteryStrip div.equipped {
  outline: 2px solid #75f5ff;
  color: #dfffff;
}
.masteryStrip div.equipped:after {
  content: "EQUIPPED";
  display: block;
  margin-top: 3px;
  color: #76efff;
  font: 950 5px var(--font-geist-mono);
  letter-spacing: 1px;
}
.runnerFrame.highContrast .threatVignette {
  border-width: 4px;
}
.runnerFrame.colorBlind .laneWarning.jump:before {
  border-color: #55e7ff;
}
.runnerFrame.colorBlind .laneWarning.dive:before {
  border-color: #d991ff;
}
.runnerFrame.colorBlind .laneWarning.dodge:before {
  border-color: #fff;
}
.runnerFrame.colorBlind .chaseMeter b {
  background:
    linear-gradient(
      90deg,
      #3bd5ff,
      #835cff 62%,
      #fff 100%);
}
@media (max-width: 720px) {
  .runnerFrame.leftHanded .actionButtons {
    flex-direction: row-reverse;
  }
  .runnerFrame.leftHanded .actionButtons .mobileBoost {
    order: -1;
  }
  .settingsPanel {
    max-height: 88%;
    overflow: auto;
  }
}
.chaseMeter {
  top: 10px;
  right: 12px;
  width: 150px;
}
.runnerHud .hudHealth {
  top: 10px;
  left: 20%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}
.runnerHud .hudHealth .healthPips {
  justify-content: center;
}
.powerBadge {
  display: flex;
  align-items: center;
  gap: 4px;
}
.powerBadge .magnetIcon {
  font: 12px/1 system-ui, sans-serif;
  filter: drop-shadow(0 0 4px #36ddff);
}
@media (max-width: 720px) {
  .chaseMeter {
    top: 6px;
    right: 7px;
    width: 112px;
  }
  .runnerHud .hudHealth {
    top: 6px;
    left: 22%;
    right: auto;
  }
  .runnerHud .hudHealth .healthPips i {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .powerBadge .magnetIcon {
    font-size: 10px;
  }
}
.worldEvent {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  animation: eventIn .35s both;
}
.worldEvent i {
  position: absolute;
  display: block;
}
.worldEvent0 i {
  bottom: -4%;
  width: 34px;
  height: 42px;
  border-radius: 50% 50% 20% 20%;
  background:
    radial-gradient(
      circle at 50% 30%,
      #efffff,
      #6cffe1 18%,
      #6932b5 55%,
      transparent 58%);
  filter: drop-shadow(0 0 12px #68ffe8);
  opacity: .65;
}
.worldEvent0 i:nth-child(odd) {
  left: calc(var(--n,1)*12%);
}
.worldEvent0 i:nth-child(1) {
  left: 4%;
}
.worldEvent0 i:nth-child(2) {
  left: 17%;
}
.worldEvent0 i:nth-child(3) {
  left: 31%;
}
.worldEvent0 i:nth-child(4) {
  right: 31%;
}
.worldEvent0 i:nth-child(5) {
  right: 17%;
}
.worldEvent0 i:nth-child(6) {
  right: 4%;
}
.worldEvent0 i {
  display: none;
}
.worldEvent1 {
  background: none;
  box-shadow: inset 34px 0 46px #8cfff218, inset -34px 0 46px #8cfff218;
}
.worldEvent1:before,
.worldEvent1:after {
  display: none;
}
.worldEvent2:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9%;
  width: 130px;
  height: 130px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 38% 34%,
      #fffbd2,
      #d9e7ff 55%,
      #6475bd);
  box-shadow: 0 0 45px #c4d8ff;
  opacity: .72;
}
.worldEvent3 {
  box-shadow: inset 60px 0 70px #6efff52b, inset -60px 0 70px #b46eff2b;
}
.worldEvent4 {
  background:
    radial-gradient(
      ellipse at 50% 100%,
      #ff281f2c,
      transparent 52%);
}
.worldEvent5 {
  background:
    repeating-linear-gradient(
      92deg,
      transparent 0 34px,
      #ff7a1820 38px,
      transparent 44px);
  filter: blur(2px);
  animation: heatWave .55s infinite alternate;
}
.worldEvent6 i,
.worldEvent8 i {
  top: -20%;
  width: 3px;
  height: 42%;
  background:
    linear-gradient(
      transparent,
      #d9f8ff99,
      transparent);
  transform: rotate(18deg);
  animation: stormFall .65s linear infinite;
}
.worldEvent6 i:nth-child(1),
.worldEvent8 i:nth-child(1) {
  left: 8%;
}
.worldEvent6 i:nth-child(2),
.worldEvent8 i:nth-child(2) {
  left: 24%;
  animation-delay: -.3s;
}
.worldEvent6 i:nth-child(3),
.worldEvent8 i:nth-child(3) {
  left: 43%;
  animation-delay: -.5s;
}
.worldEvent6 i:nth-child(4),
.worldEvent8 i:nth-child(4) {
  left: 68%;
  animation-delay: -.15s;
}
.worldEvent6 i:nth-child(5),
.worldEvent8 i:nth-child(5) {
  left: 89%;
  animation-delay: -.4s;
}
.worldEvent7 {
  box-shadow: inset 0 0 70px #d8fbff66;
}
.worldEvent7:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      #dfffff55 0 1px,
      transparent 1px);
  background-size: 28px 28px;
  mask-image:
    linear-gradient(
      to bottom,
      transparent 45%,
      #000);
}
.worldEvent8 {
  background: #4d52ff0b;
  animation: lightning .9s steps(2) infinite;
}
.worldEvent9 {
  box-shadow: inset 0 0 80px #ffd52c55;
}
.worldEvent9 i {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #fff3a1;
  box-shadow: 0 0 10px #ffb400;
  animation: royalSpark 1s infinite alternate;
}
.worldEvent9 i:nth-child(1) {
  left: 14%;
  top: 24%;
}
.worldEvent9 i:nth-child(2) {
  right: 18%;
  top: 19%;
}
.worldEvent9 i:nth-child(3) {
  left: 28%;
  bottom: 22%;
}
.worldEvent9 i:nth-child(4) {
  right: 30%;
  bottom: 29%;
}
@keyframes eventIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes heatWave {
  to {
    transform: translateX(5px) skewX(-2deg);
  }
}
@keyframes stormFall {
  to {
    transform: translate(80px, 420px) rotate(18deg);
  }
}
@keyframes lightning {
  50% {
    background: #cdd3ff26;
  }
}
@keyframes royalSpark {
  to {
    transform: rotate(135deg) scale(1.8);
    opacity: .25;
  }
}
.controlBindings {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid #63471f;
}
.controlBindings > span {
  color: #e7bd58;
  font: 950 7px var(--font-geist-mono);
  letter-spacing: 1px;
}
.controlBindings label {
  display: grid;
  grid-template-columns: 1fr 92px;
  align-items: center;
  margin: 5px 0;
}
.settingsPanel .controlBindings button {
  display: block;
  width: 92px;
  margin: 0;
  padding: 5px;
  border: 1px solid #856129;
  background: #130b07;
  color: #ffe69a;
  box-shadow: none;
  font-size: 7px;
}
@media (max-width: 820px), (pointer: coarse) {
  .runnerShell {
    width: 100%;
    padding: 4px 6px 8px;
  }
  .runnerShell > header {
    height: 48px;
  }
  .runnerLogo > span {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  .runnerLogo h1 {
    font-size: 15px;
  }
  .high {
    display: none;
  }
  .audioToggles .headerSound {
    width: 39px;
    height: 34px;
  }
  .audioToggles .musicToggle:after {
    font-size: 21px;
  }
  .runnerFrame.mobileDevice {
    width: min(100%, calc((100dvh - 58px)*.5625));
    max-width: 520px;
    min-width: 0;
    border-width: 3px;
  }
  .runnerFrame.mobileDevice canvas {
    aspect-ratio: 9/16;
  }
  .runnerFrame.mobileDevice .runnerHud .hudLevel {
    top: 8px;
    left: 9px;
  }
  .runnerFrame.mobileDevice .runnerHud .hudScoreHoney {
    top: 8px;
    left: 50%;
    gap: 5px;
  }
  .runnerFrame.mobileDevice .runnerHud .hudScoreHoney section {
    min-width: 46px;
  }
  .runnerFrame.mobileDevice .chaseMeter {
    top: 8px;
    right: 9px;
    width: 104px;
  }
  .runnerFrame.mobileDevice .runnerHud .hudHealth {
    top: 43px;
    left: 9px;
    transform: none;
    width: 90px;
    justify-items: start;
  }
  .runnerFrame.mobileDevice .waveGoal {
    top: 45px;
    width: 104px;
  }
  .runnerFrame.mobileDevice .runnerPause {
    top: 42px;
    right: 9px;
    width: 25px;
    height: 25px;
  }
  .runnerFrame.mobileDevice .bonusGoal {
    top: 75px;
    left: 9px;
    max-width: 132px;
  }
  .runnerFrame.mobileDevice .boostMeter,
  .runnerFrame.mobileDevice .honeyMeter {
    bottom: 68px;
    width: 105px;
  }
  .runnerFrame.mobileDevice .boostMeter {
    left: 9px;
  }
  .runnerFrame.mobileDevice .honeyMeter {
    right: 9px;
  }
  .runnerFrame.mobileDevice .powerBadge {
    right: 9px;
    bottom: 96px;
  }
  .runnerFrame.mobileDevice .actionButtons {
    display: flex;
    bottom: 13px;
    gap: 8px;
  }
  .runnerFrame.mobileDevice .actionButtons button {
    width: 68px;
    height: 43px;
    font-size: 9px;
  }
  .runnerFrame.mobileDevice .actionButtons .mobileBoost {
    width: 78px;
  }
  .runnerFrame.mobileDevice .runnerStart {
    top: 51%;
    width: 88%;
    padding: 18px 14px;
  }
  .runnerFrame.mobileDevice .runnerStart p {
    display: block;
    font-size: 9px;
  }
  .runnerFrame.mobileDevice .resultsCard.levelCard {
    top: 16%;
    width: 90%;
  }
  .runnerFrame.mobileDevice + .controlGuide {
    display: none !important;
  }
}
.runnerFrame.mobileDevice .runnerHud .hudLevel {
  top: 8px;
  left: 9px;
}
.runnerFrame.mobileDevice .runnerHud .hudScoreHoney {
  top: 8px;
  left: 50%;
  gap: 5px;
}
.runnerFrame.mobileDevice .runnerHud .hudScoreHoney section {
  min-width: 46px;
}
.runnerFrame.mobileDevice .chaseMeter {
  top: 8px;
  right: 9px;
  width: 104px;
}
.runnerFrame.mobileDevice .runnerHud .hudHealth {
  top: 43px;
  left: 9px;
  right: auto;
  transform: none;
  width: 90px;
  justify-items: start;
}
.runnerFrame.mobileDevice .waveGoal {
  top: 45px;
  width: 104px;
}
.runnerFrame.mobileDevice .runnerPause {
  top: 42px;
  right: 9px;
  width: 25px;
  height: 25px;
}
.runnerFrame.mobileDevice .bonusGoal {
  top: 75px;
  left: 9px;
  max-width: 132px;
}
.runnerFrame.mobileDevice .boostMeter,
.runnerFrame.mobileDevice .honeyMeter {
  bottom: 68px;
  width: 105px;
}
.runnerFrame.mobileDevice .boostMeter {
  left: 9px;
}
.runnerFrame.mobileDevice .honeyMeter {
  right: 9px;
}
.runnerFrame.mobileDevice .powerBadge {
  right: 9px;
  bottom: 96px;
}
.runnerFrame.mobileDevice .actionButtons {
  display: flex;
  bottom: 13px;
  gap: 8px;
}
.runnerFrame.mobileDevice .actionButtons button {
  width: 68px;
  height: 43px;
  font-size: 9px;
}
.runnerFrame.mobileDevice .actionButtons .mobileBoost {
  width: 78px;
}
.runnerFrame.mobileDevice .runnerStart {
  top: 51%;
  width: 88%;
  padding: 18px 14px;
}
.runnerFrame.mobileDevice .runnerStart p {
  display: block;
  font-size: 9px;
}
.runnerFrame.mobileDevice .resultsCard.levelCard {
  top: 16%;
  width: 90%;
}
.runnerFrame.mobileDevice .runnerHud .hudLevel {
  top: 9px;
  left: 10px;
}
.runnerFrame.mobileDevice .runnerHud .hudScoreHoney {
  top: 47px;
  left: 50%;
  width: 176px;
  gap: 0;
  justify-content: space-between;
}
.runnerFrame.mobileDevice .runnerHud .hudScoreHoney section {
  width: 78px;
  min-width: 78px;
}
.runnerFrame.mobileDevice .runnerHud span {
  font-size: 6px;
  letter-spacing: .7px;
}
.runnerFrame.mobileDevice .runnerHud b {
  font-size: 13px;
}
.runnerFrame.mobileDevice .runnerHud .hudScoreHoney b small {
  font-size: 7px;
}
.runnerFrame.mobileDevice .runnerHud .honeyPot {
  font-size: 11px;
  margin-right: 2px;
}
.runnerFrame.mobileDevice .runnerHud .hudHealth {
  display: grid !important;
  top: 9px;
  left: auto;
  right: 10px;
  width: auto;
  justify-items: end;
  text-align: right;
}
.runnerFrame.mobileDevice .runnerHud .healthPips {
  gap: 3px;
}
.runnerFrame.mobileDevice .runnerHud .healthPips i {
  width: 19px;
  height: 19px;
}
.runnerFrame.mobileDevice .runnerHud .healthPips i img {
  width: 37px;
  height: 37px;
}
.runnerFrame.mobileDevice .chaseMeter {
  top: 82px;
  right: 10px;
  width: 112px;
}
.runnerFrame.mobileDevice .waveGoal {
  top: 82px;
  width: 128px;
}
.runnerFrame.mobileDevice .runnerPause {
  top: 110px;
  right: 10px;
  width: 23px;
  height: 23px;
}
.runnerFrame.mobileDevice .bonusGoal {
  top: 112px;
  left: 10px;
  max-width: 128px;
}
.runnerFrame.mobileDevice .boostMeter,
.runnerFrame.mobileDevice .honeyMeter {
  bottom: 58px;
}
.runnerFrame.mobileDevice .resultsCard.levelCard {
  top: 20%;
  width: 84%;
  padding: 12px 16px 14px;
}
.runnerFrame.mobileDevice .resultsCard.levelCard h2 {
  display: block;
  margin: 5px auto 2px;
  font-size: 28px;
}
.runnerFrame.mobileDevice .resultsCard.levelCard p {
  display: block;
  margin: 3px auto 7px;
  font-size: 7px;
  line-height: 1.35;
}
.runnerFrame.mobileDevice .resultsCard.levelCard .resultStats {
  justify-content: space-evenly;
  width: 88%;
  margin: 6px auto;
}
.runnerFrame.mobileDevice .resultsCard.levelCard .bonusResult {
  font-size: 6px;
  line-height: 1.35;
}
.runnerFrame.mobileDevice .deliveryMascot {
  z-index: 16;
  bottom: 13%;
  width: clamp(150px, 42vw, 190px);
}
.runnerFrame.mobileDevice,
.runnerFrame.mobileDevice * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent;
}
.runnerFrame.mobileDevice img {
  pointer-events: none;
  -webkit-user-drag: none;
}
.runnerFrame.mobileDevice {
  contain: layout paint style;
}
.runnerFrame.mobileDevice canvas {
  touch-action: none;
  backface-visibility: hidden;
}
.runnerFrame.mobileDevice .runnerHud .hudLevel {
  top: 9px;
  left: 10px;
}
.runnerFrame.mobileDevice .runnerHud .hudScoreHoney {
  top: 9px;
  left: 51%;
  width: 148px;
  gap: 4px;
  justify-content: center;
}
.runnerFrame.mobileDevice .runnerHud .hudScoreHoney section {
  width: 70px;
  min-width: 70px;
}
.runnerFrame.mobileDevice .runnerHud .hudHealth {
  top: 9px;
  right: 10px;
  left: auto;
  width: 70px;
  justify-items: end;
}
.runnerFrame.mobileDevice .runnerHud .healthPips {
  gap: 2px;
  margin-top: 3px;
}
.runnerFrame.mobileDevice .runnerHud .healthPips i {
  width: 15px;
  height: 15px;
}
.runnerFrame.mobileDevice .runnerHud .healthPips i img {
  width: 30px;
  height: 30px;
}
.runnerFrame.mobileDevice .chaseMeter {
  top: 48px;
  left: 50%;
  right: auto;
  width: 174px;
  transform: translateX(-50%);
}
.runnerFrame.mobileDevice .runnerPause {
  top: 45px;
  right: 10px;
  width: 25px;
  height: 25px;
}
.runnerFrame.mobileDevice .waveGoal {
  top: 75px;
  width: 126px;
}
.runnerFrame.mobileDevice .bonusGoal {
  top: 76px;
  left: 10px;
  max-width: 116px;
}
.runnerFrame.mobileDevice .runnerWave,
.runnerFrame.mobileDevice .runnerWave.powerToast {
  top: 105px;
  max-width: 68%;
  padding: 3px 8px;
  font-size: 7px;
  line-height: 1.15;
  white-space: normal;
}
.runnerFrame.mobileDevice .boostMeter,
.runnerFrame.mobileDevice .honeyMeter {
  bottom: 58px;
  width: 106px;
}
.runnerFrame.mobileDevice .boostMeter {
  left: 10px;
}
.runnerFrame.mobileDevice .honeyMeter {
  right: 10px;
}
.runnerFrame.mobileDevice .powerBadge {
  right: 10px;
  bottom: 86px;
  max-width: 132px;
}
.runnerFrame.mobileDevice .actionButtons {
  bottom: 12px;
  gap: 16px;
}
.runnerFrame.mobileDevice .actionButtons button {
  width: 92px;
  height: 42px;
}
.runnerFrame.mobileDevice .actionButtons .mobileBoost {
  display: none;
}
.runnerShell.mobileLayout .audioControl.isOpen label {
  visibility: visible;
  opacity: 1;
  top: 42px;
  width: 154px;
  padding: 10px 12px;
}
.runnerShell.mobileLayout .audioControl.isOpen label span {
  font-size: 8px;
}
.runnerShell.mobileLayout .audioControl.isOpen input {
  height: 24px;
}
html.honeyboundNoSelect,
html.honeyboundNoSelect body,
html.honeyboundNoSelect body * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
html.honeyboundNoSelect input[type=range] {
  -webkit-user-select: auto !important;
  user-select: auto !important;
  touch-action: pan-x;
}
.runnerStart button.startRunButton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 178px;
  min-height: 46px;
  margin: 0 auto;
  padding: 12px 24px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1.2px;
}
.returningRunActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  width: min(430px, 90%);
  margin: 0 auto;
}
.runnerStart .returningRunActions button.startRunButton {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding-inline: 14px;
}
.runnerStart .restartRunButton {
  border-color: rgba(242, 207, 114, .52);
  background: rgba(12, 20, 16, .9);
  color: #f2cf72;
}
.walletStatus,
.walletError {
  display: block;
  margin: 10px auto 0;
  max-width: 340px;
  font: 800 8px/1.4 var(--font-geist-mono);
  letter-spacing: .7px;
  overflow-wrap: anywhere;
}
.walletStatus {
  color: #f2cf72;
}
.walletError {
  color: #ff9b7b;
}
.resultsCard.levelCard > button {
  max-width: 100%;
  white-space: normal;
}
.pendingTxButton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: wait !important;
}
.txHourglass {
  display: inline-block;
  transform-origin: center;
  animation: honeyboundHourglass 1.1s linear infinite;
}
@keyframes honeyboundHourglass {
  to {
    transform: rotate(360deg);
  }
}
.verifiedClaimLink {
  display: block;
  position: static;
  transform: none;
  width: max-content;
  max-width: min(94%, 360px);
  margin: 12px auto 0;
  padding: 8px 13px;
  border: 1px solid #3ed98f99;
  border-radius: 7px;
  background: #071c14e8;
  color: #7fffc0;
  text-align: center;
  text-decoration: none;
  font: 900 9px/1.2 var(--font-geist-mono);
  letter-spacing: .65px;
  box-shadow: 0 7px 22px #0009;
  white-space: normal;
}
.verifiedClaimLink:hover {
  background: #0b2b1ee8;
  color: #b9ffdc;
}
.verifiedContinueLink {
  display: block;
  width: max-content;
  max-width: 94%;
  margin: 0 auto 8px;
  padding: 7px 12px;
  border: 1px solid #3ed98f99;
  border-radius: 7px;
  background: #071c14e8;
  color: #7fffc0;
  text-align: center;
  text-decoration: none;
  font: 900 9px/1.2 var(--font-geist-mono);
  letter-spacing: .6px;
  box-shadow: 0 7px 22px #0009;
  white-space: normal;
}
.verifiedContinueLink:hover {
  background: #0b2b1ee8;
  color: #b9ffdc;
}
@media (max-width: 720px) {
  .verifiedContinueLink {
    max-width: 96%;
    font-size: 8px;
    padding: 7px 10px;
  }
}
.resultsCard.levelCard .nextWaveButton {
  display: block;
  width: min(390px, 94%);
  margin: 10px auto 0;
  padding: 12px 20px;
  border-radius: 7px;
}
@media (max-width: 720px) {
  .verifiedClaimLink {
    max-width: 96%;
    font-size: 8px;
    padding: 7px 10px;
  }
  .resultsCard.levelCard .nextWaveButton {
    width: 96%;
    padding: 10px;
  }
}
body {
  background:
    radial-gradient(
      circle at 50% -12%,
      #2a2519 0,
      #111111 34%,
      #050505 72%,
      #000 100%),
    #000;
}
.runnerShell > header {
  margin-bottom: 10px;
  padding: 0 18px;
  border: 1px solid #ba8a3b66;
  border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='74' viewBox='0 0 84 74'%3E%3Cpath d='M21 2h42l20 35-20 35H21L1 37z' fill='none' stroke='%23ffd45c' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(
      135deg,
      #1b1b1aee,
      #080808f5);
  background-size: 42px 37px, auto;
  background-position: 0 0, 0 0;
  box-shadow: inset 0 1px #ffe89833, 0 8px 28px #000c;
}
.runnerLogo h1 {
  color: #fff7dc;
  text-shadow: 0 2px 10px #000;
}
.high {
  color: #aaa18e;
}
.high b {
  color: #ffe58a;
}
.runnerFrame {
  border-color: #ffd45b;
  box-shadow:
    0 0 0 5px #090909,
    0 0 0 7px #d3a43d66,
    0 18px 55px #000e;
}
.controlGuide {
  margin-top: 10px !important;
  padding: 12px 16px !important;
  border: 1px solid #a77b3755;
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      #181817e8,
      #050505ef);
  box-shadow: inset 0 1px #ffe8991f, 0 8px 24px #000b;
}
.runnerStart,
.resultsCard,
.settingsPanel {
  border-color: #ffd866;
  background:
    radial-gradient(
      circle at 50% 0,
      #ffd95c24,
      transparent 44%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='74' viewBox='0 0 84 74'%3E%3Cpath d='M21 2h42l20 35-20 35H21L1 37z' fill='none' stroke='%23ffd45c' stroke-opacity='.11' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(
      145deg,
      #20201ef8,
      #10100ff9 48%,
      #050505fb 100%);
  background-size:
    auto,
    42px 37px,
    auto;
  background-position:
    0 0,
    0 0,
    0 0;
  box-shadow:
    inset 0 1px #fff0aa55,
    inset 0 0 46px #000b,
    0 20px 65px #000e,
    0 0 30px #f7b72c35;
}
.runnerStart h2,
.resultsCard h2,
.settingsPanel h2 {
  color: #fff8d8;
  text-shadow: 0 3px #000, 0 0 15px #f9c44840;
}
.runnerStart p,
.resultsCard p,
.settingsPanel label {
  color: #eee6d4;
}
.runnerStart .mintLine,
.resultsCard span,
.resultsCard strong,
.settingsPanel > span {
  color: #ffd768;
}
.resultsCard .gameOverActions .secondary,
.settingsPanel select,
.settingsPanel .controlBindings button {
  background: #090909;
  color: #ffe28b;
  border-color: #c99942;
}
@media (max-width: 720px) {
  .runnerShell > header {
    margin-bottom: 5px;
    padding: 0 8px;
    border-radius: 9px;
  }
  .controlGuide {
    margin-top: 5px !important;
  }
}
.runnerStart {
  box-sizing: border-box;
}
.runnerStart {
  width: min(540px, 82%);
  padding: 22px 30px 25px;
}
.rewardHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: min(430px, 100%);
  margin: 24px auto 13px;
}
.rewardHeroToken {
  display: grid;
  grid-template-rows: 126px 20px;
  align-items: center;
  min-width: 0;
  margin: 0;
}
.rewardHeroArt {
  position: relative;
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
  max-width: 100%;
  margin: 0 auto;
  border: 0;
  border-radius: 18px;
  background: transparent;
  filter: drop-shadow(0 13px 18px #000b) drop-shadow(0 0 11px #ffc43d29);
  overflow: visible;
}
.rewardHeroArt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rewardHeroLabel {
  align-self: end;
  color: #fff0ba;
  font: 900 13px/1.2 var(--font-geist-mono);
  letter-spacing: 1.15px;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 11px #ffbd2f42;
}
.rewardHeroLabel b {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
}
.rewardHeroFlameArrow {
  display: grid;
  place-items: center;
  align-self: start;
  height: 126px;
}
.rewardHeroFlameArrow svg {
  display: block;
  width: 58px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 6px #ffae2b66);
}
.rewardArrowBody {
  stroke: #fff0a0;
  stroke-width: 1;
}
.rewardArrowFlame {
  fill: #e76f0b;
  opacity: .78;
}
.rewardArrowEmber {
  fill: #ffbd32;
  opacity: .62;
}
.titleX1CornerBadge {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 6px;
  border: 1px solid #8b73d34f;
  border-radius: 999px;
  background: #05050ad9;
  box-shadow: inset 0 1px #c7ffff17, 0 4px 12px #0008;
}
.titleX1CornerBadge span {
  color: #bbb7c8;
  font: 900 6px/1 var(--font-geist-mono);
  letter-spacing: .9px;
  white-space: nowrap;
}
.titleX1CornerBadge img {
  display: block;
  width: 58px;
  height: auto;
  filter: drop-shadow(0 0 4px #7d55ff42);
}
.runnerStart h2 {
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: .5px;
}
.runnerStart .titleGameName {
  margin: 14px 0;
}
.actionRequired:not(:disabled) {
  border: 1px solid #fff0a8 !important;
  animation: honeyboundActionGlow 1.15s ease-in-out infinite alternate;
}
@keyframes honeyboundActionGlow {
  from {
    box-shadow: 0 5px 0 #74400a, 0 0 8px #ffd23b88;
  }
  to {
    box-shadow:
      0 5px 0 #74400a,
      0 0 19px 5px #ffd23bbd,
      0 0 36px #ff9e2680;
  }
}
.resultsCard.levelCard {
  top: 16%;
  width: min(560px, 72%);
  padding: 18px 34px 24px;
}
.resultsCard.levelCard .resultEyebrow {
  font-size: 12px;
  letter-spacing: 3px;
}
.deliveryResult {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 5px auto 4px;
}
.resultsCard.levelCard .deliveryResult h2 {
  display: block;
  margin: 0;
  font-size: clamp(48px, 6vw, 66px);
  line-height: .95;
}
.resultsCard.levelCard .deliveryResult p {
  display: grid;
  gap: 5px;
  margin: 0;
  text-align: left;
}
.deliveryResult p b {
  color: #fff5c7;
  font: 950 14px/1 var(--font-geist-mono);
  letter-spacing: 1.1px;
}
.deliveryResult p small {
  display: block;
  color: #cfbd99;
  font: 800 10px/1.3 var(--font-geist-mono);
  letter-spacing: .7px;
}
.resultsCard.levelCard .resultStats {
  gap: 28px;
  margin: 8px auto;
}
.resultsCard.levelCard .resultStats i {
  font-size: 8px;
  letter-spacing: 1px;
}
.resultsCard.levelCard .resultStats b {
  margin-top: 2px;
  font-size: 13px;
}
.resultsCard.levelCard .medalResult {
  font-size: 11px;
  letter-spacing: 1.6px;
}
.resultsCard.levelCard .bonusResult {
  margin: 7px 0 4px;
  font-size: 9px;
  letter-spacing: 1px;
}
.resultsCard.levelCard .walletError {
  margin-top: 11px;
  color: #ffad8f;
  font-size: 10px;
  line-height: 1.45;
}
.claimSyncNotice {
  display: grid;
  gap: 5px;
  width: min(370px, 92%);
  box-sizing: border-box;
  margin: 12px auto 0;
  padding: 11px 14px;
  border: 1px solid #65cfe0;
  border-radius: 8px;
  background:
    linear-gradient(
      135deg,
      #10252b,
      #07171c);
  box-shadow: 0 8px 22px #0006;
  color: #e4fbff;
  font: 800 9px/1.35 var(--font-geist-mono);
  letter-spacing: .5px;
}
.claimSyncNotice strong {
  color: #8ce9f5;
  font-size: 11px;
  letter-spacing: .8px;
}
.claimSyncNotice span {
  font: 800 8px/1.4 var(--font-geist-mono);
  letter-spacing: .4px;
}
.beeRequiredNotice {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(370px, 92%);
  box-sizing: border-box;
  margin: 12px auto 0;
  padding: 9px 13px;
  border: 1px solid #f3ca4e;
  border-radius: 9px;
  background:
    linear-gradient(
      135deg,
      #201a09,
      #0f1209);
  box-shadow: 0 8px 22px #0006;
  color: #fff4bc;
  text-align: left;
}
.beeRequiredNotice img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.beeRequiredNotice > span {
  display: grid;
  gap: 4px;
}
.beeRequiredNotice strong {
  color: #ffd84d;
  font: 950 11px/1.2 var(--font-geist-mono);
  letter-spacing: .7px;
}
.beeRequiredNotice small {
  color: #fff2bf;
  font: 800 8px/1.35 var(--font-geist-mono);
  letter-spacing: .45px;
}
.resultsCard.levelCard .walletStatus {
  font-size: 9px;
}
.resultsCard.levelCard button.claimActionButton {
  display: block;
  min-width: min(390px, 94%);
  margin: 13px auto 0;
  padding: 11px 20px 12px;
  border-radius: 7px;
}
.claimActionButton > span {
  display: block;
  color: #211004 !important;
  font: 950 14px/1.1 var(--font-geist-mono) !important;
  letter-spacing: 1.5px !important;
}
.claimActionButton > strong {
  display: block;
  margin-top: 6px;
  color: #321804 !important;
  font: 900 11px/1.1 var(--font-geist-mono) !important;
  letter-spacing: .7px !important;
}
.claimActionButton > strong b {
  font-size: 16px;
}
.claimActionButton > strong i {
  padding: 0 6px;
  color: #6d3705;
  font-size: 15px;
  font-style: normal;
}
.claimActionButton.pendingTxButton {
  background: #d6ad45;
  color: #2b1a08;
  opacity: .94;
}
.claimActionButton.pendingTxButton > strong {
  font-size: 9px !important;
}
@media (max-width: 720px) {
  .runnerStart {
    top: 52%;
    width: 88%;
    padding: 15px 16px 18px;
  }
  .rewardHero {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    gap: 6px;
    margin: 20px auto 9px;
  }
  .rewardHeroToken {
    grid-template-rows: 84px 16px;
  }
  .rewardHeroArt {
    width: 84px;
    height: 84px;
  }
  .rewardHeroLabel {
    font-size: 9px;
    letter-spacing: .7px;
  }
  .rewardHeroLabel b {
    font: inherit;
  }
  .rewardHeroFlameArrow {
    height: 84px;
  }
  .rewardHeroFlameArrow svg {
    width: 41px;
  }
  .titleX1CornerBadge {
    top: 8px;
    right: 9px;
    gap: 3px;
    padding: 1px 5px;
  }
  .titleX1CornerBadge span {
    font-size: 5px;
    letter-spacing: .6px;
  }
  .titleX1CornerBadge img {
    width: 46px;
  }
  .runnerStart h2 {
    font-size: 27px !important;
  }
  .runnerStart button.startRunButton {
    min-height: 43px;
    font-size: 12px;
  }
  .returningRunActions {
    grid-template-columns: 1fr;
    width: min(260px, 88%);
    gap: 7px;
  }
  .walletStatus,
  .walletError {
    font-size: 8px;
  }
  .resultsCard.levelCard {
    top: 14%;
    width: 90%;
    padding: 13px 17px 17px;
  }
  .resultsCard.levelCard .resultEyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }
  .deliveryResult {
    gap: 10px;
    margin-top: 4px;
  }
  .resultsCard.levelCard .deliveryResult h2 {
    font-size: 42px;
  }
  .deliveryResult p b {
    font-size: 12px;
  }
  .deliveryResult p small {
    font-size: 8px;
  }
  .resultsCard.levelCard .resultStats {
    gap: 24px;
    margin: 7px auto;
  }
  .resultsCard.levelCard .resultStats i {
    font-size: 8px;
  }
  .resultsCard.levelCard .resultStats b {
    font-size: 12px;
  }
  .resultsCard.levelCard .medalResult {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .resultsCard.levelCard .bonusResult {
    font-size: 9px;
  }
  .resultsCard.levelCard button.claimActionButton {
    width: 96%;
    min-width: 0;
    margin-top: 9px;
    padding: 9px 10px 10px;
  }
  .claimActionButton > span {
    font-size: 12px !important;
  }
  .claimActionButton > strong {
    font-size: 10px !important;
  }
  .claimActionButton > strong b {
    font-size: 14px;
  }
}
.mobileWaveOneGuide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: -3px auto 11px;
  padding: 8px 10px;
  border: 1px solid #e8bb505e;
  border-radius: 8px;
  background: #050505e8;
  color: #e9dec2;
  font: 900 8px/1.2 var(--font-geist-mono);
  letter-spacing: .45px;
}
.mobileWaveOneGuide span {
  white-space: nowrap;
}
.mobileWaveOneGuide b {
  color: #ffe26a;
  font-size: 10px;
}
.walletRecommendationDock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(760px, 96vw);
  min-height: 40px;
  margin: 8px auto 0;
}
.walletRecommendation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 9px 16px;
  border: 1px solid #a38ae0a6;
  border-radius: 999px;
  background:
    linear-gradient(
      110deg,
      #090d16f5,
      #17102cf5 58%,
      #220d2af5);
  color: #ebe7f7;
  text-decoration: none;
  box-shadow:
    inset 0 1px #d6f8ff2c,
    0 6px 16px #0009,
    0 0 16px #7654db32;
  transition:
    border-color .16s,
    color .16s,
    transform .16s;
}
.walletRecommendation span {
  font: 900 8px/1.15 var(--font-geist-mono);
  letter-spacing: .7px;
  white-space: nowrap;
}
.walletRecommendation b {
  color: #fff;
  font-size: 10px;
}
.walletRecommendation i {
  color: #c4b3ff;
  font: 900 14px/1 var(--font-geist-sans);
  font-style: normal;
}
.walletRecommendation:hover {
  border-color: #c6b7ff;
  color: #fff;
  transform: translateY(-1px);
}
.mobileWalletBrowserNotice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(430px, 100%);
  margin: 10px auto 0;
  padding: 9px 11px;
  border: 1px solid #e8bb50a8;
  border-radius: 10px;
  background:
    linear-gradient(
      110deg,
      #100d05f5,
      #241806f5 58%,
      #171005f5);
  box-shadow:
    inset 0 1px #fff0a52c,
    0 6px 16px #0009,
    0 0 16px #dcae3632;
  color: #ebe7f7;
  cursor: default;
}
.mobileWalletBrowserNotice span {
  white-space: normal;
  text-align: center;
  line-height: 1.45;
}
.mobileWalletBrowserNotice b {
  color: #ffe26a;
}
.mobileWalletBrowserNotice:hover {
  border-color: #e8bb50a8;
  color: #ebe7f7;
  transform: none;
}
.resultsCard.levelCard .deliveryResult h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.resultHoneyIcon {
  font-size: .58em;
  font-style: normal;
  filter: drop-shadow(0 2px 2px #4c2500);
}
.uiReadabilityPass .runnerStart,
.uiReadabilityPass .resultsCard,
.uiReadabilityPass .settingsPanel,
.uiReadabilityPass .campaignPanel {
  color: #fff8e5;
  background-color: #080807;
}
.uiReadabilityPass .campaignPanel,
.uiReadabilityPass .settingsPanel {
  box-shadow:
    inset 0 1px #fff0a53b,
    inset 0 0 50px #000c,
    0 22px 70px #000e,
    0 0 28px #dcae3630;
}
.uiReadabilityPass .settingsPanel > span,
.uiReadabilityPass .campaignPanel > header {
  color: #ffdc72;
  font-size: 10px;
  line-height: 1.35;
}
.uiReadabilityPass .settingsPanel label {
  color: #f4ead4;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .65px;
}
.uiReadabilityPass .settingsPanel select,
.uiReadabilityPass .settingsPanel input,
.uiReadabilityPass .settingsPanel button {
  min-height: 32px;
}
.uiReadabilityPass .levelRecords div {
  border-color: #bd8e4266;
  background: #070707e8;
  box-shadow: inset 0 1px #fff0a517;
}
.uiReadabilityPass .levelRecords b {
  color: #fff1b5;
  font-size: 10px;
  line-height: 1.25;
}
.uiReadabilityPass .levelRecords span {
  color: #dccba6;
  font-size: 8px;
  line-height: 1.35;
}
.uiReadabilityPass .levelRecords small {
  color: #bdb298;
  font-size: 7px;
  line-height: 1.35;
}
.uiReadabilityPass .walletError {
  padding: 8px 10px;
  border: 1px solid #ff9b7566;
  border-radius: 7px;
  background: #260d09e8;
  color: #ffc2aa;
  line-height: 1.5;
  letter-spacing: .55px;
}
@media (max-width: 720px) {
  .mobileWaveOneGuide {
    gap: 5px;
    margin: -3px auto 8px;
    padding: 7px 8px;
    font-size: 7px;
  }
  .mobileWaveOneGuide b {
    font-size: 9px;
  }
  .walletRecommendationDock {
    min-height: 40px;
    margin-top: 7px;
  }
  .walletRecommendation {
    padding: 9px 12px;
    gap: 7px;
  }
  .walletRecommendation span {
    font-size: 8px;
    letter-spacing: .4px;
  }
  .walletRecommendation b {
    font-size: 10px;
  }
  .walletRecommendation i {
    font-size: 13px;
  }
  .mobileLayout .controlGuide {
    display: none !important;
  }
  .resultHoneyIcon {
    font-size: .64em;
  }
  .uiReadabilityPass .settingsPanel label {
    font-size: 9px;
  }
  .uiReadabilityPass .levelRecords b {
    font-size: 9px;
  }
  .uiReadabilityPass .levelRecords span {
    font-size: 7px;
  }
  .uiReadabilityPass .levelRecords small {
    font-size: 6.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .actionRequired:not(:disabled) {
    animation: none;
    box-shadow: 0 5px 0 #74400a, 0 0 16px #ffd23b99;
  }
}