* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: #d2b48c;
  background-image: url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><text x="10" y="35" font-size="24" opacity="0.18">🍀</text><text x="60" y="75" font-size="20" opacity="0.14">🍀</text></svg>');
  background-size: 90px 90px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 10px;
  color: #3d2a1a;
}

.game-container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.card {
  background: #fff9ef;
  border-radius: 36px;
  padding: 20px 14px 24px;
  box-shadow: 0 12px 0 #a0724f, 0 0 0 4px #f3d6b5,
    0 16px 20px -6px rgba(60, 30, 10, 0.3);
  border: 2px dashed #d4a373;
  position: relative;
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  top: 10px;
  left: -16px;
  width: 80px;
  height: 20px;
  background: #ffd966;
  opacity: 0.4;
  transform: rotate(-18deg);
}

h1 {
  font-size: 26px;
  font-weight: 800;
  color: #4a2e1c;
  text-shadow: 3px 3px 0 #fcd5a5;
  margin: 4px 0;
}

h2 {
  font-size: 20px;
  font-weight: 700;
}

.game-badge {
  background: #ffb882;
  padding: 5px 18px;
  border-radius: 36px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  box-shadow: 0 3px 0 #b26b38;
  display: inline-block;
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
}

.dot {
  width: 10px;
  height: 10px;
  background: #d9a066;
  border-radius: 50%;
  animation: bounce 1.4s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.primary-btn,
.nav-btn,
.option-btn {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28"><text x="0" y="23" font-size="22">🐟</text></svg>') 12 22,
    pointer !important;
}

.primary-btn {
  background: #fec165;
  border: none;
  border-bottom: 6px solid #a87033;
  font-weight: 900;
  font-size: 20px;
  padding: 12px 14px;
  border-radius: 46px;
  color: #2d1c0c;
  width: 100%;
  box-shadow: 0 5px 0 #9f6a39;
  margin: 14px 0 5px;
  border: 2px solid #ffe3b2;
  transition: transform 0.08s, box-shadow 0.08s;
}

.primary-btn.pressed {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #9f6a39;
}

.breathe {
  animation: breathe 2s infinite;
}

@keyframes breathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

.progress-area {
  background: #f3dec6;
  border-radius: 24px;
  padding: 10px 8px 6px;
  box-shadow: inset 0 2px 4px #bb8b62, 0 2px 0 #ac7d55;
  margin-bottom: 12px;
  height: 84px;
  display: flex;
  flex-flow: column nowrap;
}

.cat-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  position: relative;
  flex: 1 1;
}

.paw-left {
  position: absolute;
  left: 0;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='0' y='16' font-size='16'%3E🐾%3C/text%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 20px 20px;
  background-position: 0 center;
  pointer-events: none;
  transition: width 0.2s;
}

.cat-mover {
  position: absolute;
  left: 0;
  font-size: 32px;
  transform: translateX(-50%);
  transition: left 0.2s;
}

.dots-row {
  display: flex;
  justify-content: space-evenly;
}

.progress-dot {
  width: 24px;
  height: 24px;
  background: #ead5be;
  border-radius: 50%;
  border: 2px solid #b78a5e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
}

.progress-dot.done {
  background: #8fc27e;
  border-color: #5a8248;
  color: white;
}

.option-btn {
  background: #feefc9;
  border: 2px solid #bb8b60;
  border-radius: 32px;
  padding: 11px 12px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 0 #9e7350;
  margin-bottom: 8px;
  transition: transform 0.08s, box-shadow 0.08s;
}

.option-btn.pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #9e7350;
  background: #fde0b0;
}

.option-letter {
  background: #a57248;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

.nav-buttons {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  align-items: center;
}

.nav-btn {
  background: #d4a373;
  border: none;
  border-bottom: 4px solid #7b583a;
  padding: 8px 14px;
  border-radius: 28px;
  font-weight: 800;
  color: white;
  text-align: center;
  font-size: 14px;
  transition: transform 0.08s, box-shadow 0.08s;
}

.nav-btn.pressed {
  transform: translateY(3px);
  border-bottom-width: 1px;
}

.share-card {
  background: #fffaf0;
  border-radius: 14px;
  padding: 20px 14px 26px;
  border: 7px solid white;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 2px #f0e0c0;
}

.system-easter {
  background: linear-gradient(135deg, #2d6c66 0%, #92c8c3 50%, #2d6c66 100%);
  background-size: 200% 200%;
  animation: metalShine 3s ease-in-out infinite;
  border: 3px solid #DBAF7C;
  border-radius: 22px;
  padding: 18px 14px;
  box-shadow: inset 0 0 0 3px #4F3622, 0 5px 0 #3A281A;
  color: #F7E1BE;
}

@keyframes metalShine {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

.title-bar {
  background: #a77b4c;
  display: inline-block;
  padding: 4px 16px;
  border-radius: 26px;
  font-weight: 800;
  font-size: 12px;
}

.stat-bar {
  display: flex;
  height: 14px;
  margin: 6px 0;
  border-radius: 18px;
  overflow: hidden;
}

.stat-left {
  background: linear-gradient(90deg, #f9b953, #ffd58c);
  border-radius: 18px 0 0 18px;
}

.stat-right {
  background: #c9a87c;
  border-radius: 0 18px 18px 0;
}

.hidden {
  display: none !important;
}

.guide-text {
  font-size: 14px;
  margin: 4px 0;
  font-weight: 600;
  color: #6f452a;
}

.copyright {
  margin-top: 14px;
  font-size: 11px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mbti-tag {
  background: #543e2a;
  color: #fcddb2;
  padding: 4px 16px;
  border-radius: 24px;
  font-size: 13px;
  display: inline-block;
}

.subtitle-cat {
  font-size: 13px;
  color: #8b6a4a;
  text-align: center;
  letter-spacing: 1px;
}

#musicBtn {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 3px 0 #c9a87c;
  z-index: 9999;
  border: 2px solid #fee0b5;
  cursor: pointer;
  user-select: none;
}

.polaroid-photo {
  background: white;
  padding: 12px 12px 40px;
  border-radius: 8px;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.25);
  transform: translateY(-120%) rotate(-3deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 90%;
  position: relative;
  z-index: 10;
  margin: 0 auto;
}

.polaroid-photo.show {
  transform: translateY(0) rotate(0.5deg);
}

.polaroid-photo img {
  width: 100%;
  border-radius: 3px;
  display: block;
}

.polaroid-photo .caption {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 8px;
  color: #4a2e1c;
}

.save-hint {
  font-size: 12px;
  text-align: center;
  margin-top: 6px;
  opacity: 0.7;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.music-hint {
  position: fixed;
  top: 58px;
  right: 10px;
  font-size: 10px;
  color: #8b6a4a;
  opacity: 0.7;
  z-index: 9999;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 8px;
  border-radius: 10px;
}

.cat-photo-big {
  display: block;
  width: 140px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto;
}

.cat-photo-small {
  display: block;
  width: 96px;
  height: 67.5px;
  object-fit: contain;
  margin: 0 auto;
}

.gen-card-btn {
  background: #FEC165;
  border: none;
  border-bottom: 6px solid #A87033;
  font-weight: 900;
  font-size: 18px;
  padding: 12px 14px;
  border-radius: 46px;
  color: #2D1C0C;
  width: 100%;
  box-shadow: 0 5px 0 #9F6A39;
  margin: 14px 0 5px;
  border: 2px solid #FFE3B2;
  transition: transform 0.08s, box-shadow 0.08s;
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28"><text x="0" y="23" font-size="22">🐟</text></svg>') 12 22, pointer !important;
}

.gen-card-btn.pressed {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #9F6A39;
}