:root {
  color-scheme: dark;
  --bg: #0f1311;
  --panel: #17201c;
  --panel-2: #202b26;
  --panel-3: #29362f;
  --line: rgba(236, 232, 218, 0.12);
  --text: #f4f0e8;
  --muted: #aab8ae;
  --green: #7bcf86;
  --green-bright: #b7edae;
  --red: #e46b5d;
  --amber: #f3c95d;
  --blue: #70b7ff;
  --fur: #d6a15f;
  --fur-light: #f1cf95;
  --seed: #c7843e;
  --button: #f2ead5;
  --button-text: #111915;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(135deg, rgba(112, 183, 255, 0.08), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(214, 161, 95, 0.17), transparent 21rem),
    linear-gradient(160deg, #0f1311 0%, #17201c 58%, #0b0f0d 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: grid;
  place-items: center;
  padding: 22px;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  user-select: none;
}

.game-shell {
  width: min(100%, 720px);
  display: grid;
  gap: 14px;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--amber);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.ghost-button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(244, 240, 232, 0.08);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 800;
}

.hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.hud > div,
.settings {
  background: rgba(23, 32, 28, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.hud > div {
  padding: 13px 14px;
  min-width: 0;
}

.label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hud strong {
  display: block;
  font-size: clamp(1.25rem, 4.5vw, 2.2rem);
  line-height: 1;
}

.settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
}

.setting-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  flex: 1;
  flex-basis: 100%;
  min-width: 0;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  gap: 4px;
}

.setting-group > .segmented:first-child {
  grid-template-columns: repeat(3, minmax(88px, 1fr));
}

.difficulty-segment {
  grid-template-columns: repeat(5, minmax(64px, 1fr));
}

.segmented-button,
.toggle {
  min-height: 40px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 800;
}

.segmented-button {
  background: transparent;
}

.segmented-button.active {
  background: var(--button);
  color: var(--button-text);
}

.boss-button.active {
  background: var(--red);
  color: #fff8ed;
}

.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  background: rgba(244, 240, 232, 0.08);
  border: 1px solid rgba(244, 240, 232, 0.08);
  white-space: nowrap;
}

.toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.stage {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(244, 240, 232, 0.16);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
  aspect-ratio: 1;
}

.stage.hit {
  animation: hit-shake 190ms linear;
}

.stage.slam {
  animation: slam-shake 2s linear;
}

.stage.hidden,
.settings.hidden,
.controls.hidden,
.skin-shop.hidden {
  display: none;
}

.hidden {
  display: none !important;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: rgba(15, 19, 17, 0.72);
  backdrop-filter: blur(8px);
}

.overlay.hidden {
  display: none;
}

.overlay-kicker {
  margin: 0;
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.overlay h2 {
  margin: 0;
  font-size: clamp(3rem, 13vw, 6.2rem);
  line-height: 0.9;
  letter-spacing: 0;
}

.overlay p:not(.overlay-kicker) {
  width: min(100%, 330px);
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.primary-button,
.pause-button,
.icon-button {
  border-radius: 8px;
  font-weight: 900;
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.18);
}

.primary-button {
  min-width: 132px;
  min-height: 46px;
  padding: 0 18px;
  background: var(--amber);
  color: #151306;
}

.secret-button {
  background: #ff6418;
  color: #fff7e8;
  box-shadow:
    0 0 0 1px rgba(255, 222, 130, 0.34),
    0 0 28px rgba(255, 84, 18, 0.42),
    inset 0 -3px rgba(0, 0, 0, 0.24);
}

.secret-button.space-button {
  background: #7d44ff;
  color: #fffaff;
  box-shadow:
    0 0 0 1px rgba(224, 209, 255, 0.44),
    0 0 30px rgba(125, 68, 255, 0.56),
    inset 0 -3px rgba(0, 0, 0, 0.28);
}

.secret-button.underworld-button {
  background: #c90813;
  color: #fff1ec;
  box-shadow:
    0 0 0 1px rgba(255, 170, 96, 0.44),
    0 0 30px rgba(255, 42, 33, 0.56),
    inset 0 -3px rgba(0, 0, 0, 0.3);
}

.secret-button.farm-button {
  background: #f47eae;
  color: #36101f;
  box-shadow:
    0 0 0 1px rgba(255, 225, 136, 0.5),
    0 0 30px rgba(244, 126, 174, 0.56),
    inset 0 -3px rgba(78, 34, 18, 0.24);
}

.skin-shop {
  display: grid;
  gap: 14px;
  min-height: 520px;
  border-radius: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 22% 18%, rgba(112, 183, 255, 0.18), transparent 16rem),
    radial-gradient(circle at 82% 12%, rgba(243, 201, 93, 0.2), transparent 15rem),
    linear-gradient(150deg, #151027, #13221c 58%, #090d0b);
  border: 1px solid rgba(244, 240, 232, 0.16);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

.shop-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.shop-header h2 {
  margin: 0;
  font-size: clamp(2.1rem, 7vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.shop-balance {
  width: min(100%, 260px);
  padding: 14px;
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.08);
  border: 1px solid var(--line);
}

.shop-balance strong {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.skin-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.08);
  border: 1px solid var(--line);
}

.skin-preview {
  height: 122px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    rgba(0, 0, 0, 0.18);
  background-size: 28px 28px;
  overflow: hidden;
}

.skin-hamster {
  position: relative;
  width: 52px;
  height: 42px;
  border-radius: 50%;
  background: var(--skin-fur);
  box-shadow: 0 0 0 8px var(--skin-glow);
  transform: scale(var(--skin-scale));
}

.skin-snake-preview {
  position: relative;
  display: flex;
  align-items: center;
  transform: scale(var(--skin-scale));
}

.skin-snake-preview,
.skin-snake-preview span {
  width: 34px;
  height: 30px;
  border-radius: 50%;
  background: var(--skin-fur);
  box-shadow: inset 5px -5px rgba(0, 0, 0, 0.14);
}

.skin-snake-preview span {
  display: block;
  margin-left: -12px;
}

.skin-snake-preview::before,
.skin-snake-preview::after {
  content: "";
  position: absolute;
  right: 7px;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--skin-eye);
}

.skin-snake-preview::before {
  top: 8px;
}

.skin-snake-preview::after {
  bottom: 8px;
}

.skin-hamster.humanoid-preview {
  width: 34px;
  height: 62px;
  border-radius: 15px 15px 18px 18px;
  transform: scale(var(--skin-scale));
}

.skin-hamster.humanoid-preview::before,
.skin-hamster.humanoid-preview::after {
  width: 24px;
  height: 24px;
  top: -16px;
  border-radius: 50%;
  background: inherit;
}

.skin-hamster.humanoid-preview::before {
  left: -3px;
}

.skin-hamster.humanoid-preview::after {
  right: -3px;
}

.skin-hamster.humanoid-preview .skin-face {
  top: -9px;
  right: 1px;
  width: 32px;
  height: 31px;
  border-radius: 50%;
}

.skin-hamster.humanoid-preview .skin-face::before {
  left: 22%;
}

.skin-hamster.humanoid-preview .skin-face::after {
  right: 22%;
}

.skin-hamster.aura-cheese {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    0 18px 0 -11px rgba(255, 216, 61, 0.7),
    -16px 10px 0 -13px rgba(255, 216, 61, 0.58),
    14px -10px 0 -12px rgba(255, 236, 119, 0.54);
}

.skin-hamster.aura-lava {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    -22px 6px 0 -14px rgba(255, 82, 18, 0.7),
    -34px 10px 0 -18px rgba(255, 210, 74, 0.5);
}

.skin-hamster.aura-nut {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    -21px -6px 0 -16px #8b5527,
    -23px 13px 0 -16px #8b5527,
    19px -10px 0 -16px #8b5527,
    21px 12px 0 -16px #8b5527;
}

.skin-hamster.aura-purple {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    0 0 26px rgba(190, 137, 255, 0.38);
}

.skin-hamster.aura-imp {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    0 0 20px rgba(255, 255, 255, 0.18);
}

.skin-hamster.aura-imp::before,
.skin-hamster.aura-imp::after {
  background: #000000;
  box-shadow: inset 0 0 0 4px #000000;
}

.skin-hamster.aura-imp .skin-face,
.skin-hamster.aura-imp .skin-face::before,
.skin-hamster.aura-imp .skin-face::after {
  background: #ffffff;
}

.skin-hamster.aura-gold {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    -24px -8px 0 -15px #d69b18,
    -25px 12px 0 -15px #d69b18,
    22px -11px 0 -15px #d69b18,
    24px 13px 0 -15px #d69b18,
    0 0 28px rgba(255, 224, 91, 0.45);
}

.skin-hamster.aura-gold::before,
.skin-hamster.aura-gold::after {
  box-shadow: inset 0 0 0 4px #ffeaa2;
}

.skin-hamster.aura-gold .skin-face {
  background: #ffe28a;
}

.skin-hamster.aura-diamond {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    -24px -8px 0 -15px #7ddcff,
    -25px 12px 0 -15px #7ddcff,
    22px -11px 0 -15px #7ddcff,
    24px 13px 0 -15px #7ddcff,
    0 0 28px rgba(160, 235, 255, 0.5);
}

.skin-hamster.aura-diamond::before,
.skin-hamster.aura-diamond::after {
  box-shadow: inset 0 0 0 4px #d7f7ff;
}

.skin-hamster.aura-diamond .skin-face {
  background: #d7f7ff;
}

.skin-hamster.aura-god {
  box-shadow:
    0 0 0 9px var(--skin-glow),
    -24px -9px 0 -15px #ff9d2e,
    -25px 11px 0 -16px #ff9d2e,
    0 -24px 0 -18px #ffd83d,
    0 0 28px rgba(255, 216, 61, 0.5);
}

.skin-hamster.aura-god::before,
.skin-hamster.aura-god::after {
  background: #f2c634;
  box-shadow: inset 0 0 0 4px #fff5b8;
}

.skin-hamster.aura-god .skin-face {
  background: #fff4b0;
}

.skin-hamster.aura-secret {
  background: #000000;
  width: 58px;
  height: 46px;
  border-radius: 50% 45% 45% 50%;
  box-shadow:
    0 0 0 9px #000000,
    0 0 26px rgba(0, 0, 0, 0.9);
}

.skin-hamster.aura-secret::before,
.skin-hamster.aura-secret::after,
.skin-hamster.aura-secret .skin-face,
.skin-hamster.aura-secret .skin-face::before,
.skin-hamster.aura-secret .skin-face::after {
  background: #000000;
  box-shadow: none;
}

.skin-hamster.aura-secret::before {
  top: -13px;
  left: 5px;
  width: 18px;
  height: 18px;
}

.skin-hamster.aura-secret::after {
  bottom: -13px;
  left: 5px;
  width: 18px;
  height: 18px;
}

.skin-hamster.aura-secret .skin-face {
  right: 5px;
  top: 10px;
  width: 24px;
  height: 24px;
}

.skin-hamster.aura-ultra {
  background: linear-gradient(135deg, #1b95d1 0 36%, #58d46f 36% 68%, #ffe83d 68%);
  box-shadow:
    0 0 0 9px var(--skin-glow),
    0 0 28px rgba(86, 222, 255, 0.44);
}

.skin-hamster.aura-ultra::before,
.skin-hamster.aura-ultra::after {
  background: #2f8fd8;
  box-shadow: inset 0 0 0 4px #ffe83d;
}

.skin-hamster.aura-ultra .skin-face {
  background: #ffe83d;
}

.skin-hamster.aura-entity {
  background: #000000;
  box-shadow:
    0 0 0 9px var(--skin-glow),
    0 0 26px rgba(255, 255, 255, 0.2);
}

.skin-hamster.aura-entity::before,
.skin-hamster.aura-entity::after {
  background: #000000;
  box-shadow: inset 0 0 0 4px #ffffff;
}

.skin-hamster.aura-entity .skin-face,
.skin-hamster.aura-entity .skin-face::before,
.skin-hamster.aura-entity .skin-face::after {
  background: #ffffff;
}

.skin-hamster.aura-robotic {
  background: #8c8c8c;
  box-shadow:
    0 0 0 8px var(--skin-glow),
    inset 0 0 0 3px #111111,
    0 0 24px rgba(140, 140, 140, 0.38);
}

.skin-hamster.aura-robotic::before,
.skin-hamster.aura-robotic::after {
  background: #777777;
  box-shadow: inset 0 0 0 4px #444444;
}

.skin-hamster.aura-robotic .skin-face {
  background: #8c8c8c;
  box-shadow:
    inset -14px 0 0 -8px #e1121d,
    inset 0 4px 0 -2px #111111,
    inset 0 -4px 0 -2px #111111;
}

.skin-hamster.aura-kraken {
  background: #c90813;
  box-shadow:
    0 0 0 9px var(--skin-glow),
    -22px -13px 0 -16px #c90813,
    -28px -3px 0 -17px #c90813,
    -27px 9px 0 -17px #c90813,
    -18px 18px 0 -17px #c90813,
    22px -13px 0 -16px #c90813,
    28px -3px 0 -17px #c90813,
    27px 9px 0 -17px #c90813,
    18px 18px 0 -17px #c90813;
}

.skin-hamster.aura-kraken::before,
.skin-hamster.aura-kraken::after {
  background: #a20a16;
  box-shadow: inset 0 0 0 4px #ffcf42;
}

.skin-hamster.aura-kraken .skin-face {
  background: #b80a18;
}

.skin-hamster.aura-kraken .skin-face::before,
.skin-hamster.aura-kraken .skin-face::after {
  background: #ffd83d;
}

.skin-hamster.aura-ocean {
  background: #007fff;
  box-shadow:
    0 0 0 8px var(--skin-glow),
    -20px -12px 0 -15px #ff7f7f,
    -24px -3px 0 -17px #ffd1d1,
    18px -14px 0 -15px #f9a8d4,
    24px 4px 0 -17px #ff7f7f,
    0 0 24px rgba(81, 218, 255, 0.42);
}

.skin-hamster.aura-ocean::before,
.skin-hamster.aura-ocean::after {
  background: #087ba8;
  box-shadow: inset 0 0 0 4px #93e6ff;
}

.skin-hamster.aura-ocean .skin-face {
  background: #007fff;
}

.skin-hamster.aura-angel {
  background: #ffffff;
  box-shadow:
    0 0 0 8px var(--skin-glow),
    -24px 4px 0 -15px #ffffff,
    24px 4px 0 -15px #ffffff,
    0 -28px 0 -18px #ffd83d,
    0 0 28px rgba(255, 226, 91, 0.48);
}

.skin-hamster.aura-angel::before,
.skin-hamster.aura-angel::after {
  background: #f6f6f0;
  box-shadow: inset 0 0 0 4px #ffffff;
}

.skin-hamster.aura-angel .skin-face {
  background: #fff7bc;
}

.skin-hamster.aura-ruby {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    -24px -8px 0 -15px #d71920,
    -25px 12px 0 -15px #d71920,
    22px -11px 0 -15px #d71920,
    24px 13px 0 -15px #d71920,
    0 0 30px rgba(255, 24, 35, 0.56);
}

.skin-hamster.aura-ruby::before,
.skin-hamster.aura-ruby::after {
  box-shadow: inset 0 0 0 4px #ff7b73;
}

.skin-hamster.aura-ruby .skin-face {
  background: #ff766d;
}

.skin-hamster.aura-scientist {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    0 13px 0 -5px rgba(248, 251, 255, 0.92),
    0 0 22px rgba(223, 240, 255, 0.34);
}

.skin-hamster.aura-scientist .skin-face {
  background: #f2d0a1;
}

.skin-hamster.aura-interstellar {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    22px -8px 0 -18px #05050b,
    25px -14px 0 -20px #8a54ff,
    0 0 28px rgba(133, 83, 255, 0.54);
}

.skin-hamster.aura-interstellar::before,
.skin-hamster.aura-interstellar::after {
  box-shadow: inset 0 0 0 4px #6c42d9;
}

.skin-hamster.aura-interstellar .skin-face {
  background: #2c2056;
}

.skin-hamster.aura-blackhole {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    0 0 0 15px rgba(255, 132, 28, 0.34),
    0 0 28px rgba(255, 105, 18, 0.5);
}

.skin-hamster.aura-blackhole::before,
.skin-hamster.aura-blackhole::after {
  background: #000000;
  box-shadow: inset 0 0 0 4px #000000;
}

.skin-hamster.aura-blackhole .skin-face,
.skin-hamster.aura-blackhole .skin-face::before,
.skin-hamster.aura-blackhole .skin-face::after {
  background: #000000;
}

.skin-hamster.aura-devil {
  box-shadow:
    0 0 0 8px var(--skin-glow),
    22px -8px 0 -18px #c90813,
    23px -15px 0 -20px #c90813,
    0 0 25px rgba(255, 42, 33, 0.44);
}

.skin-hamster.aura-devil::before,
.skin-hamster.aura-devil::after {
  background: #8f1111;
  box-shadow: inset 0 0 0 4px #4e0707;
}

.skin-hamster.aura-devil .skin-face {
  background: #f06154;
}

.skin-hamster.aura-devil .skin-face::before,
.skin-hamster.aura-devil .skin-face::after {
  background: #1b0202;
}

.skin-hamster.aura-demon {
  box-shadow:
    0 0 0 9px var(--skin-glow),
    -26px -10px 0 -15px #4a0008,
    -28px 12px 0 -16px #4a0008,
    24px -8px 0 -18px #5b0008,
    25px -15px 0 -20px #5b0008,
    0 0 28px rgba(255, 24, 34, 0.5);
}

.skin-hamster.aura-demon::before,
.skin-hamster.aura-demon::after {
  background: #5f070b;
  box-shadow: inset 0 0 0 4px #250003;
}

.skin-hamster.aura-demon .skin-face {
  background: #b51620;
}

.skin-hamster.aura-demon .skin-face::before,
.skin-hamster.aura-demon .skin-face::after {
  background: #ff242f;
  box-shadow: 0 0 8px rgba(255, 36, 47, 0.88);
}

.skin-hamster.aura-earth {
  box-shadow:
    0 0 0 9px var(--skin-glow),
    -22px -9px 0 -16px #5dae59,
    -24px 10px 0 -15px #2d78b8,
    23px 10px 0 -16px #a8e29a,
    0 0 30px rgba(89, 204, 194, 0.42);
}

.skin-hamster.aura-earth::before,
.skin-hamster.aura-earth::after {
  box-shadow: inset 0 0 0 4px #b7df91;
}

.skin-hamster.aura-earth .skin-face {
  background: #a8e29a;
}

.skin-hamster.aura-volcanic {
  box-shadow:
    0 0 0 9px var(--skin-glow),
    -24px 8px 0 -14px rgba(255, 82, 18, 0.72),
    -42px 12px 0 -20px rgba(255, 210, 74, 0.5);
}

.skin-hamster.aura-volcanic::before,
.skin-hamster.aura-volcanic::after {
  box-shadow: inset 0 0 0 4px #ff8a1c;
}

.skin-hamster.aura-volcanic .skin-face {
  background: #ff7a1a;
}

.skin-hamster.aura-rainbow {
  background: linear-gradient(90deg, #ff4f8b, #ffd84f, #64ef72, #45c8ff, #a46cff);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.22),
    0 0 24px rgba(98, 221, 255, 0.34);
}

.skin-hamster::before,
.skin-hamster::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--skin-ear);
}

.skin-hamster::before {
  top: -9px;
}

.skin-hamster::after {
  bottom: -9px;
}

.skin-face {
  position: absolute;
  right: 6px;
  top: 11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--skin-cheek);
}

.skin-face::before,
.skin-face::after {
  content: "";
  position: absolute;
  left: -8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--skin-eye);
}

.skin-face::before {
  top: 2px;
}

.skin-face::after {
  bottom: 2px;
}

.skin-hamster.aura-rainbow .skin-face {
  background: linear-gradient(135deg, #ffd84f, #64ef72, #45c8ff);
}

.skin-hamster.aura-rainbow .skin-face::before,
.skin-hamster.aura-rainbow .skin-face::after {
  background: linear-gradient(135deg, #ff4f8b, #45c8ff, #a46cff);
}

.skin-hamster.flag-cross {
  background: #ffffff;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.2),
    0 0 18px rgba(255, 255, 255, 0.3);
}

.skin-hamster.flag-cross::before,
.skin-hamster.flag-cross::after {
  background: #f5f5f1;
  box-shadow: inset 0 0 0 4px #ffffff;
}

.skin-hamster.flag-cross::after {
  z-index: 0;
}

.skin-hamster.flag-cross .skin-face {
  background:
    linear-gradient(90deg, transparent 0 38%, #d71920 38% 62%, transparent 62%),
    linear-gradient(0deg, transparent 0 38%, #d71920 38% 62%, transparent 62%),
    #ffffff;
}

.skin-hamster.flag-cross .skin-face::before,
.skin-hamster.flag-cross .skin-face::after {
  background: #171313;
}

.skin-hamster.chubby-preview .skin-face {
  width: 24px;
  height: 24px;
  top: 9px;
  background: var(--skin-cheek);
  box-shadow: -13px 4px 0 -4px #f7dfb2;
}

.skin-hamster.black-preview .skin-face {
  background: var(--skin-cheek);
  box-shadow: -10px 4px 0 -4px #ffffff;
}

.skin-hamster.timmy-preview .skin-face {
  background: #ffd0a3;
  box-shadow: -10px 4px 0 -4px #ffffff;
}

.skin-hamster.pig-preview .skin-face {
  width: 24px;
  height: 18px;
  top: 12px;
  right: 1px;
  border-radius: 50%;
  background: var(--skin-nose);
  box-shadow:
    inset -5px 0 rgba(117, 35, 67, 0.18),
    -17px 0 0 -5px var(--skin-cheek);
}

.skin-hamster.pig-preview .skin-face::before,
.skin-hamster.pig-preview .skin-face::after {
  left: 13px;
  width: 4px;
  height: 4px;
  background: rgba(91, 27, 51, 0.78);
}

.skin-hamster.pig-preview .skin-tail {
  position: absolute;
  left: -15px;
  top: 12px;
  width: 15px;
  height: 15px;
  border: 4px solid #ce5c8b;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(20deg);
}

.skin-hamster.horse-preview .skin-face {
  width: 28px;
  height: 22px;
  right: -4px;
  top: 10px;
  border-radius: 52% 48% 48% 52%;
  background: #090705;
  box-shadow: -18px 0 0 -5px var(--skin-cheek);
}

.skin-hamster.horse-preview .skin-face::before,
.skin-hamster.horse-preview .skin-face::after {
  left: 16px;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
}

.skin-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.skin-card h3 {
  margin: 0;
  font-size: 1.4rem;
}

.rarity {
  padding: 5px 8px;
  border-radius: 999px;
  color: #111915;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rarity.common {
  background: #f4e171;
}

.rarity.free {
  background: #f2ead5;
}

.rarity.uncommon {
  background: #70b7ff;
}

.rarity.rare {
  background: #e46b5d;
  color: #fff8ed;
}

.rarity.legendary {
  background: #d8bbff;
}

.rarity.mythic {
  background: linear-gradient(90deg, #ff6418, #ffd83d, #70b7ff, #d8bbff);
  color: #12100b;
}

.rarity.survival {
  background: linear-gradient(90deg, #071426, #0f3a27, #f4f7ff);
  color: #f5fff8;
  box-shadow: 0 0 18px rgba(177, 211, 191, 0.38);
}

.rarity.godly {
  background: linear-gradient(90deg, #caff86, #79ffb2, #fff4a8, #ffffff);
  color: #092011;
  box-shadow: 0 0 18px rgba(202, 255, 134, 0.34);
}

.rarity.godly.rarity-interstellar {
  background: linear-gradient(90deg, #05050b, #32125f, #7d44ff, #05050b);
  color: #f4edff;
  box-shadow: 0 0 18px rgba(125, 68, 255, 0.48);
}

.rarity.godly.rarity-earth {
  background: linear-gradient(90deg, #2d78b8, #4f9952, #4fa8d8, #a8e29a);
  color: #071b16;
  box-shadow: 0 0 18px rgba(80, 184, 196, 0.5);
}

.rarity.godly.rarity-blackhole {
  background: linear-gradient(90deg, #000000, #291104, #ff7a1a, #000000);
  color: #fff4e8;
  box-shadow: 0 0 18px rgba(255, 122, 26, 0.5);
}

.rarity.godly.rarity-ruby {
  background: linear-gradient(90deg, #4d0007, #96000f, #e1121d, #4d0007);
  color: #fff0ef;
  box-shadow: 0 0 18px rgba(225, 18, 29, 0.5);
}

.rarity.godly.rarity-godly {
  background: linear-gradient(90deg, #000000, #d71920, #ff7a1a, #000000);
  color: #fff2e8;
  box-shadow: 0 0 18px rgba(255, 100, 24, 0.54);
}

.rarity.godly.rarity-ultra {
  background: linear-gradient(90deg, #ffe83d, #58d46f, #1b95d1);
  color: #071b16;
  box-shadow: 0 0 18px rgba(86, 222, 255, 0.5);
}

.rarity.godly.rarity-demon {
  background: linear-gradient(90deg, #000000, #390005, #b00014, #000000);
  color: #fff1f1;
  box-shadow: 0 0 18px rgba(255, 24, 34, 0.54);
}

.rarity.godly.rarity-god {
  background: linear-gradient(90deg, #ff9d2e, #ffffff, #ffd83d, #ff9d2e);
  color: #3b2400;
  box-shadow: 0 0 18px rgba(255, 216, 61, 0.58);
}

.rarity.godly.rarity-horse {
  background: linear-gradient(90deg, #5b321a, #a9693d, #ffd83d, #8b522e);
  color: #fff6ce;
  box-shadow: 0 0 18px rgba(255, 216, 61, 0.5);
}

.skin-card-horse {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 216, 61, 0.3), transparent 8rem),
    linear-gradient(145deg, rgba(91, 50, 26, 0.88), rgba(169, 105, 61, 0.55));
  border-color: rgba(255, 216, 61, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 61, 0.15);
}

.skin-card-horse .skin-preview {
  background:
    linear-gradient(rgba(255, 216, 61, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 216, 61, 0.1) 1px, transparent 1px),
    linear-gradient(145deg, #6a3b20, #c18a37);
  background-size: 28px 28px, 28px 28px, auto;
}

.skin-card-interstellar {
  background: linear-gradient(145deg, rgba(5, 5, 11, 0.92), rgba(50, 18, 95, 0.62));
  border-color: rgba(125, 68, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(125, 68, 255, 0.16);
}

.skin-card-interstellar .skin-preview {
  background:
    radial-gradient(circle at 24% 20%, rgba(125, 68, 255, 0.42), transparent 7rem),
    linear-gradient(145deg, #05050b, #32125f);
}

.skin-card-earth {
  background: linear-gradient(145deg, rgba(45, 120, 184, 0.7), rgba(79, 153, 82, 0.58));
  border-color: rgba(168, 226, 154, 0.62);
  box-shadow: inset 0 0 0 1px rgba(79, 168, 216, 0.18);
}

.skin-card-earth .skin-preview {
  background:
    radial-gradient(circle at 70% 24%, rgba(168, 226, 154, 0.44), transparent 7rem),
    linear-gradient(145deg, #2d78b8, #4f9952);
}

.skin-card-blackhole {
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.94), rgba(255, 122, 26, 0.42));
  border-color: rgba(255, 122, 26, 0.64);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 72, 0.18);
}

.skin-card-blackhole .skin-preview {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 122, 26, 0.5), transparent 5rem),
    linear-gradient(145deg, #000000, #291104);
}

.skin-card-robotic {
  background: linear-gradient(145deg, rgba(95, 95, 95, 0.82), rgba(225, 18, 29, 0.42));
  border-color: rgba(225, 18, 29, 0.58);
  box-shadow: inset 0 0 0 1px rgba(140, 140, 140, 0.22);
}

.skin-card-robotic .skin-preview {
  background:
    linear-gradient(rgba(17, 17, 17, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.18) 1px, transparent 1px),
    linear-gradient(145deg, #8c8c8c, #e1121d);
  background-size: 24px 24px, 24px 24px, auto;
}

.skin-card-demon {
  background: linear-gradient(145deg, rgba(57, 0, 5, 0.9), rgba(176, 0, 20, 0.58));
  border-color: rgba(255, 24, 34, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 80, 90, 0.16);
}

.skin-card-demon .skin-preview {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 24, 34, 0.36), transparent 7rem),
    linear-gradient(145deg, #390005, #b00014);
}

.skin-card-god {
  background: linear-gradient(145deg, rgba(255, 216, 61, 0.62), rgba(255, 255, 255, 0.7));
  border-color: rgba(255, 216, 61, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.skin-card-god .skin-preview {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.72), transparent 6rem),
    linear-gradient(145deg, #ffd83d, #ffffff);
}

.skin-card-ruby {
  background: linear-gradient(145deg, rgba(77, 0, 7, 0.88), rgba(225, 18, 29, 0.66));
  border-color: rgba(225, 18, 29, 0.64);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 168, 0.18);
}

.skin-card-ruby .skin-preview {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 60, 69, 0.46), transparent 7rem),
    linear-gradient(145deg, #4d0007, #e1121d);
}

.skin-card-godly {
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.94), rgba(215, 25, 32, 0.58), rgba(255, 122, 26, 0.42));
  border-color: rgba(255, 100, 24, 0.66);
  box-shadow: inset 0 0 0 1px rgba(255, 177, 92, 0.2);
}

.skin-card-godly .skin-preview {
  background:
    radial-gradient(circle at 68% 24%, rgba(255, 122, 26, 0.48), transparent 7rem),
    radial-gradient(circle at 24% 76%, rgba(215, 25, 32, 0.42), transparent 7rem),
    linear-gradient(145deg, #000000, #d71920, #ff7a1a);
}

.skin-card-ultra {
  background: linear-gradient(145deg, rgba(255, 232, 61, 0.62), rgba(88, 212, 111, 0.56), rgba(27, 149, 209, 0.5));
  border-color: rgba(86, 222, 255, 0.66);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 61, 0.22);
}

.skin-card-ultra .skin-preview {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 232, 61, 0.48), transparent 7rem),
    radial-gradient(circle at 70% 70%, rgba(27, 149, 209, 0.44), transparent 7rem),
    linear-gradient(145deg, #ffe83d, #58d46f, #1b95d1);
}

.skin-card-skinwalker {
  background:
    radial-gradient(circle at 72% 18%, rgba(244, 247, 255, 0.22), transparent 7rem),
    linear-gradient(145deg, rgba(5, 8, 20, 0.94), rgba(15, 58, 39, 0.66));
  border-color: rgba(177, 211, 191, 0.44);
  box-shadow: inset 0 0 0 1px rgba(244, 247, 255, 0.12);
}

.skin-card-skinwalker .skin-preview {
  background:
    radial-gradient(circle at 75% 18%, rgba(244, 247, 255, 0.28), transparent 6rem),
    linear-gradient(145deg, #050814, #0f3a27);
}

.rarity.secret {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.72);
}

.rarity.mega {
  background: linear-gradient(90deg, #ffc3a0, #ffffff, #ffd3bd);
  color: #4d2112;
  box-shadow: 0 0 18px rgba(255, 195, 160, 0.48);
}

.rarity.godly.rarity-robotic {
  background: linear-gradient(90deg, #5f5f5f, #e1121d, #8c8c8c);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(225, 18, 29, 0.45);
}

.secret-hamster-section {
  background: #000000;
  border: 1px solid #000000;
  padding: 16px;
  border-radius: 8px;
}

.secret-hamster-section .quest-header h2,
.secret-hamster-section .eyebrow {
  color: #ffffff;
}

.secret-hamster-list .skin-card {
  background: #000000;
  border-color: #000000;
}

.secret-hamster-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.secret-hamster-list .skin-preview:has(.secret-shape-preview) {
  background: #ffffff;
  border-radius: 8px;
}

.secret-hamster-list .skin-card h3,
.secret-hamster-list .skin-card p,
.secret-hamster-list .skin-stats {
  color: #ffffff;
}

.skin-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.skin-stats {
  font-weight: 900;
  color: var(--cream) !important;
}

.skin-action {
  min-height: 44px;
  border-radius: 8px;
  background: var(--amber);
  color: #151306;
  font-weight: 900;
}

.skin-action:disabled {
  cursor: default;
  opacity: 0.54;
}

.quest-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 240, 232, 0.18);
}

.quest-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.quest-header h2 {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 0.95;
}

.quest-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quest-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
  background: rgba(8, 12, 10, 0.4);
  border: 1px solid rgba(244, 240, 232, 0.16);
}

.quest-card.complete {
  border-color: rgba(255, 216, 61, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 61, 0.18);
}

.secret-fight-card {
  align-content: space-between;
}

.secret-fight-action {
  width: max-content;
  min-width: 96px;
}

.quest-label,
.quest-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.quest-label {
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quest-card h3 {
  margin: 2px 0 6px;
  font-size: 1.35rem;
}

.quest-progress {
  display: grid;
  gap: 7px;
}

.quest-progress span,
.quest-reward {
  font-weight: 900;
  color: var(--cream);
}

.quest-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(244, 240, 232, 0.12);
}

.quest-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd83d, #ff6418);
}

.controls {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.control-row {
  display: grid;
  grid-template-columns: 58px minmax(96px, 132px) 58px;
  gap: 8px;
  align-items: center;
}

.icon-button,
.pause-button {
  height: 52px;
  background: var(--button);
  color: var(--button-text);
}

.icon-button {
  width: 58px;
  font-size: 1.45rem;
}

.pause-button {
  width: 100%;
}

.icon-button:active,
.pause-button:active,
.primary-button:active,
.ghost-button:active,
.segmented-button:active {
  transform: translateY(1px);
}

@keyframes hit-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }
}

@keyframes slam-shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  5% {
    transform: translate(-8px, 6px) rotate(-0.7deg);
  }

  10% {
    transform: translate(9px, -5px) rotate(0.8deg);
  }

  15% {
    transform: translate(-7px, -6px) rotate(-0.6deg);
  }

  20% {
    transform: translate(8px, 5px) rotate(0.7deg);
  }

  30% {
    transform: translate(-6px, 4px) rotate(-0.5deg);
  }

  40% {
    transform: translate(6px, -4px) rotate(0.5deg);
  }

  55% {
    transform: translate(-4px, 3px) rotate(-0.35deg);
  }

  70% {
    transform: translate(3px, -2px) rotate(0.25deg);
  }

  85% {
    transform: translate(-2px, 1px) rotate(-0.12deg);
  }
}

@media (min-width: 760px) {
  .controls {
    display: none;
  }
}

@media (max-width: 560px) {
  body {
    padding: 14px;
  }

  .topbar {
    align-items: center;
  }

  .topbar-actions {
    width: 100%;
  }

  .topbar-actions .ghost-button {
    flex: 1;
  }

  .hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings {
    align-items: stretch;
    flex-direction: column;
  }

  .setting-group {
    grid-template-columns: 1fr;
  }

  .segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setting-group > .segmented:first-child {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .difficulty-segment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toggle {
    justify-content: center;
  }

  .shop-header {
    flex-direction: column;
  }

  .skin-grid {
    grid-template-columns: 1fr;
  }

  .quest-list {
    grid-template-columns: 1fr;
  }

  .secret-hamster-list {
    grid-template-columns: 1fr;
  }
}