* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  font-family: "Source Han Serif SC", "思源宋体", "Noto Serif CJK SC", "Noto Serif SC", SimSun, serif;
  font-weight: 700;
}

button {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  cursor: default;
}

.screen.dev-cursor {
  cursor: default;
}

.stage-shell {
  position: relative;
  overflow: hidden;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  transform-origin: left top;
  background: #000;
}

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.boot-error {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 80px;
  color: #fff;
  background: #000;
  font-size: 34px;
  line-height: 1.5;
  text-align: center;
}

.boot-error strong {
  font-size: 48px;
}

.hit-all {
  touch-action: manipulation;
}

.layer-image,
.archive-large {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.clickable {
  pointer-events: auto;
  cursor: inherit;
  touch-action: manipulation;
}

.fade-image {
  opacity: 0;
  transition: opacity 1100ms ease-in-out;
}

.fade-image.visible {
  opacity: 1;
}

.top-layer,
.hint-layer,
.back-button {
  z-index: 20;
}

.layer1-scene {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

.layer1-scene.active {
  opacity: 1;
  visibility: visible;
}

.idle-hint-icon {
  animation: idleHintPulse 1.8s ease-in-out infinite;
}

@keyframes idleHintPulse {
  0%,
  100% {
    filter:
      brightness(1)
      drop-shadow(0 0 5px rgba(255, 227, 168, 0.45));
    transform: scale(1);
  }

  50% {
    filter:
      brightness(1.32)
      drop-shadow(0 0 16px rgba(255, 230, 168, 0.95))
      drop-shadow(0 0 28px rgba(255, 152, 66, 0.6));
    transform: scale(1.12);
  }
}

.listen-button {
  position: absolute;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 28px;
  overflow: hidden;
  border: 2px solid rgba(255, 222, 156, 0.95);
  border-radius: 8px;
  color: #ffe2a6;
  background:
    linear-gradient(180deg, rgba(94, 50, 22, 0.94), rgba(38, 18, 8, 0.94)),
    rgba(54, 24, 9, 0.92);
  box-shadow:
    0 0 10px rgba(255, 188, 82, 0.36),
    0 0 18px rgba(255, 111, 48, 0.14),
    inset 0 0 14px rgba(255, 227, 166, 0.15),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28);
  font-family: "Source Han Serif SC", "思源宋体", "Noto Serif CJK SC", "Noto Serif SC", SimSun, serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.88),
    0 0 8px rgba(255, 190, 92, 0.28);
  cursor: inherit;
  animation: listenButtonPulse 1.35s ease-in-out infinite;
  touch-action: manipulation;
}

.listen-button::before {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 231, 173, 0.46);
  border-radius: 5px;
  content: "";
  pointer-events: none;
}

.listen-button:active {
  transform: scale(0.96);
  background:
    linear-gradient(180deg, rgba(122, 66, 29, 0.96), rgba(54, 24, 10, 0.96)),
    rgba(76, 34, 12, 0.96);
  filter:
    brightness(1.16)
    drop-shadow(0 0 12px rgba(255, 226, 168, 0.62));
}

.listen-button span {
  display: block;
  white-space: nowrap;
}

@keyframes listenButtonPulse {
  0%,
  100% {
    opacity: 0.86;
    filter:
      brightness(1)
      drop-shadow(0 0 4px rgba(255, 214, 137, 0.2));
  }

  50% {
    opacity: 1;
    filter:
      brightness(1.12)
      drop-shadow(0 0 9px rgba(255, 226, 168, 0.46))
      drop-shadow(0 0 16px rgba(255, 112, 54, 0.22));
  }
}

.avatar {
  z-index: 10;
  transition:
    transform 260ms ease,
    filter 260ms ease;
}

.avatar.active {
  animation: avatarPulse 1.6s ease-in-out infinite;
  filter:
    brightness(1.22)
    saturate(1.16)
    drop-shadow(0 0 12px rgba(255, 214, 137, 0.95))
    drop-shadow(0 0 28px rgba(255, 74, 50, 0.7));
  transform: scale(1.06);
}

@keyframes avatarPulse {
  0%,
  100% {
    filter:
      brightness(1.18)
      saturate(1.1)
      drop-shadow(0 0 10px rgba(255, 214, 137, 0.8))
      drop-shadow(0 0 22px rgba(255, 74, 50, 0.55));
  }

  50% {
    filter:
      brightness(1.34)
      saturate(1.22)
      drop-shadow(0 0 18px rgba(255, 229, 170, 1))
      drop-shadow(0 0 40px rgba(255, 74, 50, 0.88));
  }
}

.content-layer {
  z-index: 2;
}

.archive-large {
  z-index: 3;
  object-fit: contain;
}

.archive-title {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 10px 26px;
  color: #f8d79d;
  font-size: 30px;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.archive-strip {
  position: absolute;
  z-index: 10;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: none;
  scrollbar-width: none;
}

.archive-strip::-webkit-scrollbar {
  display: none;
}

.archive-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  gap: 0;
  will-change: transform;
}

.archive-thumb {
  position: relative;
  flex: 0 0 246px;
  width: 246px;
  height: 214px;
  overflow: hidden;
  opacity: 0.9;
  cursor: inherit;
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    filter 220ms ease;
  transform-origin: center center;
}

.archive-thumb.active {
  z-index: 3;
  opacity: 1;
  transform: scale(1.18);
  filter:
    brightness(1.22)
    contrast(1.06)
    saturate(1.12)
    drop-shadow(0 0 12px rgba(255, 220, 150, 0.95))
    drop-shadow(0 0 24px rgba(255, 128, 54, 0.55));
}

.archive-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.back-button {
  animation: backButtonGlow 1.8s ease-in-out infinite;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.back-button:active {
  transform: scale(0.92);
  filter:
    brightness(1.35)
    drop-shadow(0 0 16px rgba(255, 220, 150, 1))
    drop-shadow(0 0 30px rgba(255, 154, 54, 0.8));
}

@keyframes backButtonGlow {
  0%,
  100% {
    filter:
      brightness(1)
      drop-shadow(0 0 5px rgba(255, 213, 139, 0.45));
  }

  50% {
    filter:
      brightness(1.18)
      drop-shadow(0 0 14px rgba(255, 226, 168, 0.9));
  }
}