.topbar-game {
  flex: 1 1 360px;
  min-width: 260px;
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding-top: 2px;
  position: relative;
  z-index: 50;
}
.pixel-cat-game {
  --game-progress: 3%;
  --terrain-sky: linear-gradient(180deg, rgba(219, 234, 254, 0.76), rgba(240, 253, 244, 0.36));
  --terrain-ground: #2f9e44;
  --terrain-ground-dark: #1f7a35;
  --terrain-ground-light: #77d36b;
  position: relative;
  width: min(420px, 100%);
  height: 94px;
  overflow: visible;
  border-radius: 22px;
  border: 1px solid rgba(var(--theme-rgb), 0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.54), rgba(255,255,255,0.22)),
    radial-gradient(circle at 18% 12%, rgba(var(--theme-rgb), 0.16), transparent 36%),
    rgba(255,255,255,0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.42),
    0 16px 34px rgba(var(--theme-rgb), 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 50;
}
.pixel-cat-game[data-terrain="grass"] {
  --terrain-sky: linear-gradient(180deg, rgba(219, 234, 254, 0.78), rgba(236, 253, 245, 0.46));
  --terrain-ground: #2f9e44;
  --terrain-ground-dark: #166534;
  --terrain-ground-light: #86efac;
}
.pixel-cat-game[data-terrain="sand"] {
  --terrain-sky: linear-gradient(180deg, rgba(254, 243, 199, 0.76), rgba(255, 247, 237, 0.48));
  --terrain-ground: #d6a84f;
  --terrain-ground-dark: #a16207;
  --terrain-ground-light: #fde68a;
}
.pixel-cat-game[data-terrain="concrete"] {
  --terrain-sky: linear-gradient(180deg, rgba(226, 232, 240, 0.72), rgba(248, 250, 252, 0.42));
  --terrain-ground: #8b95a1;
  --terrain-ground-dark: #475569;
  --terrain-ground-light: #cbd5e1;
}
.pixel-cat-game[data-terrain="water"] {
  --terrain-sky: linear-gradient(180deg, rgba(186, 230, 253, 0.76), rgba(224, 242, 254, 0.44));
  --terrain-ground: #0ea5e9;
  --terrain-ground-dark: #0369a1;
  --terrain-ground-light: #7dd3fc;
}
.pixel-cat-game::before {
  content: "";
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.pixel-cat-game-hud {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 2;
  pointer-events: auto;
}
.pixel-cat-character {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  font-family: "Courier New", ui-monospace, monospace;
}
.pixel-cat-character-btn {
  width: auto;
  min-width: 0;
  width: 32px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 1px 3px;
  border: 2px solid #111;
  border-radius: 0;
  background: #fff;
  color: #111;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
.pixel-cat-character-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.pixel-cat-character-btn:hover,
.pixel-cat-character-btn:active {
  transform: none;
  box-shadow: none;
  filter: none;
}
.pixel-cat-character-btn::after {
  content: "▼";
  font-size: 8px;
  line-height: 1;
}
.pixel-cat-character-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  width: 150px;
  padding: 0;
  border: 2px solid #111;
  border-bottom: 0;
  background: #fff;
  box-shadow: 0 10px 18px rgba(17, 17, 17, 0.14);
  z-index: 200;
}
.pixel-cat-character-option {
  width: 100%;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px 3px 12px;
  border: 0;
  border-bottom: 2px solid #111;
  border-radius: 0;
  background: #fff;
  color: #111;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
.pixel-cat-character-option:hover,
.pixel-cat-character-option.active {
  transform: none;
  box-shadow: none;
  filter: none;
  background: #f3f4f6;
}
.pixel-cat-character-option img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.pixel-cat-game-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.pixel-cat-game-level {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}
.pixel-cat-game-track {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 58px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--terrain-sky);
}
.pixel-cat-game-terrain,
.pixel-cat-game-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.pixel-cat-game-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 8px;
  background: var(--terrain-ground);
  box-shadow:
    inset 0 2px 0 var(--terrain-ground-light),
    inset 0 -2px 0 var(--terrain-ground-dark),
    0 2px 0 rgba(15, 23, 42, 0.14);
  z-index: 1;
}
.pixel-cat-game-wall {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 10px;
  height: 38px;
  background:
    repeating-linear-gradient(
      0deg,
      #475569 0 8px,
      #64748b 8px 10px,
      #334155 10px 18px
    );
  box-shadow:
    inset 2px 0 0 #cbd5e1,
    inset -2px 0 0 #1e293b,
    2px 2px 0 rgba(15, 23, 42, 0.18);
  z-index: 2;
}
.pixel-cat-game-ball {
  position: absolute;
  left: var(--ball-position);
  bottom: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, #dcfce7 0 2px, transparent 3px),
    radial-gradient(circle, #22c55e 0 52%, #15803d 53% 100%);
  box-shadow:
    inset -2px -2px 0 rgba(20, 83, 45, 0.28),
    0 2px 0 rgba(15, 23, 42, 0.16);
  z-index: 2;
}
.terrain-pixel {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background: var(--terrain-ground-light);
  image-rendering: pixelated;
}
.terrain-pixel.block {
  box-shadow: inset -1px -1px 0 rgba(15, 23, 42, 0.22);
}
.terrain-pixel.wave {
  border-radius: 999px 999px 0 0;
}
.pixel-cat-game-cat {
  position: absolute;
  left: var(--game-progress);
  bottom: 10px;
  width: 58px;
  height: 42px;
  --cat-scale-x: 1;
  transform: translateX(-50%) scaleX(var(--cat-scale-x));
  transition: left 640ms steps(6, end);
  image-rendering: pixelated;
  object-fit: contain;
  object-position: center bottom;
  z-index: 3;
}
.pixel-cat-game-cat[data-action="walk"],
.pixel-cat-game-cat[data-action="walk_fast"] {
  width: 58px;
  height: 42px;
}
.pixel-cat-game-cat[data-action="run"] {
  width: 52px;
  height: 38px;
}
.pixel-cat-game-cat[data-action="wallgrab"] {
  width: 58px;
  height: 42px;
  object-position: left bottom;
  margin-left: -5px;
}
.pixel-cat-game-cat[data-action="fall_from_grab"] {
  width: 52px;
  height: 38px;
  object-position: center bottom;
  margin-left: 0;
}
.pixel-cat-game-cat[data-action="land"] {
  width: 52px;
  height: 38px;
  object-position: center bottom;
  margin-left: -3px;
}
.pixel-cat-game-cat.mirrored {
  --cat-scale-x: -1;
}
.pixel-cat-game.resetting .pixel-cat-game-cat,
.pixel-cat-game.resetting .pixel-cat-game-meter-fill {
  transition: none;
}
.pixel-cat-game-goal {
  position: absolute;
  right: 0;
  bottom: 12px;
  width: 24px;
  height: 20px;
  background: #c98935;
  box-shadow:
    inset 0 4px 0 #f7d08a,
    inset 10px 0 0 rgba(255,255,255,.18),
    0 3px 0 rgba(111,70,25,.18);
}
.pixel-cat-game-goal::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  width: 5px;
  height: 9px;
  background: rgba(var(--theme-rgb), .56);
}
.pixel-cat-game-meter {
  display: none;
}
.pixel-cat-game-meter-fill {
  display: block;
  width: var(--game-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 640ms steps(6, end);
}
.pixel-cat-game.run .pixel-cat-game-cat {
  animation: pixel-game-hop 640ms steps(4, end);
}
.pixel-cat-game.hit .pixel-cat-game-cat {
  animation: pixel-game-bump 420ms steps(3, end);
}
.pixel-cat-game.complete {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.42),
    0 0 0 3px rgba(var(--theme-rgb), .12),
    0 16px 34px rgba(var(--theme-rgb), 0.08);
}
@keyframes pixel-game-hop {
  0%, 100% { transform: translateX(-50%) scaleX(var(--cat-scale-x)) translateY(0); }
  45% { transform: translateX(-50%) scaleX(var(--cat-scale-x)) translateY(-8px); }
}
@keyframes pixel-game-bump {
  0%, 100% { transform: translateX(-50%) scaleX(var(--cat-scale-x)) translateY(0); }
  33% { transform: translateX(calc(-50% - 7px)) scaleX(var(--cat-scale-x)); }
  66% { transform: translateX(calc(-50% + 5px)) scaleX(var(--cat-scale-x)); }
}