/* ─── 首页样式 ─── */

/* Canvas 层 */
.canvas-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.canvas-stars { z-index: 0; }
.canvas-particles { z-index: 1; }
.canvas-confetti { z-index: 300; }

/* 左上角Logo */
.corner-logo {
  position: fixed;
  top: 20rem;
  left: 20rem;
  width: 140rem;
  z-index: 999;
}

/* Header Section */
#page-home .header-section {
  width: 100%;
  padding: 20rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  margin-top: 60rem;
}

.brand-tag {
  font-size: 24rem;
  letter-spacing: 6rem;
  color: #FFFFFF;
  margin-bottom: 16rem;
  text-transform: uppercase;
  text-shadow: 0 2rem 8rem rgba(0,0,0,0.3);
}

.hero-title-img {
  width: 420rem;
  margin-top: 16rem;
  display: block;
}

.event-info {
  margin-top: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
}

.info-item {
  font-size: 24rem;
  color: #FFFFFF;
  letter-spacing: 2rem;
}

/* ─── Orb Section ─── */
.orb-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 10;
  padding: 0;
}

/* 用户头像芯片 */
.profile-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 44rem;
  z-index: 11;
}

.profile-avatar-wrap {
  width: 110rem;
  height: 110rem;
  border-radius: 50%;
  padding: 4rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(200, 230, 201, 0.85));
  box-shadow: 0 8rem 24rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile-name {
  margin-top: 14rem;
  max-width: 420rem;
  padding: 8rem 24rem;
  border-radius: 999rem;
  color: #FFFFFF;
  font-size: 26rem;
  letter-spacing: 1rem;
  background: rgba(25, 56, 35, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 浮动装饰 */
.float-deco {
  position: absolute;
  font-size: 44rem;
  opacity: 0.55;
  pointer-events: none;
  animation: floatUp 4s ease-in-out infinite;
}

.float-deco.d1 { top: 18%; left: 10%; animation-delay: 0s; }
.float-deco.d2 { top: 30%; right: 8%; animation-delay: 1s; }
.float-deco.d3 { top: 60%; left: 6%; animation-delay: 2s; }
.float-deco.d4 { top: 65%; right: 10%; animation-delay: 1.5s; }

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24rem); }
}

/* Orb Hint */
.orb-hint {
  position: relative;
  top: -120rem;
  z-index: 100;
  text-align: center;
  font-size: 34rem;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 2rem 8rem rgba(0,0,0,0.3);
  letter-spacing: 2rem;
}

/* Orb Wrapper */
.orb-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  margin-top: 30rem;
}

/* 脉冲光圈 */
.pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 5rem solid rgba(129, 199, 132, 0.8);
  opacity: 0;
  animation: pulseRing 2.4s ease-out infinite;
  pointer-events: none;
}

.pulse-ring.r1 { width: 352rem; height: 352rem; animation-delay: 0s; }
.pulse-ring.r2 { width: 400rem; height: 400rem; animation-delay: 0.8s; }
.pulse-ring.r3 { width: 448rem; height: 448rem; animation-delay: 1.6s; }

@keyframes pulseRing {
  0% { opacity: 0.7; transform: scale(0.88); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Loading 涟漪 */
.loading-ripple-wrapper {
  position: absolute;
  width: 300rem;
  height: 300rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-ripple {
  position: absolute;
  width: 200rem;
  height: 200rem;
  border-radius: 50%;
  border: 4rem solid rgba(129, 199, 132, 0.6);
  animation: rippleOut 1.5s ease-out infinite;
}

.loading-ripple:nth-child(2) { animation-delay: 0.5s; }
.loading-ripple:nth-child(3) { animation-delay: 1s; }

@keyframes rippleOut {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* 启动按钮 - 圆形 */
.launch-btn {
  width: 320rem;
  height: 320rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #C8E6C9 0%, #81C784 50%, #66BB6A 100%);
  box-shadow:
    0 0 0 16rem rgba(129, 199, 132, 0.3),
    0 0 0 36rem rgba(129, 199, 132, 0.15),
    0 24rem 80rem rgba(76, 175, 80, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  cursor: pointer;
}

.launch-btn:active {
  transform: scale(0.93);
  box-shadow:
    0 0 0 12rem rgba(129, 199, 132, 0.25),
    0 0 0 28rem rgba(129, 199, 132, 0.1),
    0 12rem 40rem rgba(76, 175, 80, 0.25);
}

/* 书本图标 */
.btn-book {
  width: 136rem;
  height: 136rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-left {
  position: absolute;
  left: 0;
  width: 56rem;
  height: 88rem;
  background: #FFE0B2;
  border-radius: 8rem 0 0 8rem;
}

.book-right {
  position: absolute;
  right: 0;
  width: 56rem;
  height: 88rem;
  background: #C7CEEA;
  border-radius: 0 8rem 8rem 0;
}

.book-spine {
  position: absolute;
  width: 16rem;
  height: 96rem;
  background: #FFFFFF;
  border-radius: 4rem;
  z-index: 1;
}

.book-highlight-l {
  position: absolute;
  left: 8rem;
  top: 16rem;
  width: 36rem;
  height: 6rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 3rem;
}

.book-highlight-r {
  position: absolute;
  right: 8rem;
  top: 16rem;
  width: 36rem;
  height: 6rem;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 3rem;
}

.book-star {
  position: absolute;
  right: 16rem;
  bottom: 28rem;
  font-size: 24rem;
  color: #FFD97D;
  z-index: 2;
}

.btn-label {
  font-size: 28rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 6rem;
  margin-top: 8rem;
}

/* Hint */
.tap-hint {
  margin-top: 40rem;
  font-size: 26rem;
  color: #FFFFFF;
  letter-spacing: 2rem;
  animation: hintPulse 2.5s ease-in-out infinite;
  text-shadow: 0 2rem 8rem rgba(59, 142, 194, 0.1);
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.6; transform: scale(1) translateY(0); }
  50% { opacity: 1; transform: scale(1.03) translateY(-6rem); }
}

/* ─── Joined Stage ─── */
.joined-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  margin-top: 40rem;
}

.joined-avatar-box {
  width: 120rem;
  height: 120rem;
  border-radius: 50%;
  border: 4rem solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8rem 24rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin-bottom: 24rem;
  background: #fff;
  flex-shrink: 0;
}

.joined-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.joined-rank-title {
  font-size: 26rem;
  color: #FFFFFF;
  letter-spacing: 2rem;
}

.joined-rank-number {
  font-size: 72rem;
  font-weight: bold;
  color: #FFFFFF;
  letter-spacing: 4rem;
  text-shadow: 0 4rem 16rem rgba(76, 175, 80, 0.3);
  margin-top: 8rem;
  animation: numberGlow 3s ease-in-out infinite;
}

@keyframes numberGlow {
  0%, 100% { text-shadow: 0 4rem 16rem rgba(76, 175, 80, 0.3); }
  50% { text-shadow: 0 4rem 24rem rgba(76, 175, 80, 0.5); }
}

/* 勋章 */
.joined-medal {
  position: relative;
  width: 380rem;
  height: 380rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #C8E6C9 0%, #FFE0B2 30%, #FFCC80 60%, #FFFFFF 100%);
  box-shadow:
    0 0 60rem rgba(76, 175, 80, 0.5),
    0 0 100rem rgba(56, 142, 60, 0.35),
    0 0 140rem rgba(46, 125, 50, 0.2),
    inset 0 -10rem 30rem rgba(30, 90, 40, 0.2),
    inset 0 10rem 30rem rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: medalFloat 3s ease-in-out infinite;
  margin-top: 30rem;
}

@keyframes medalFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12rem); }
}

.badge-rays {
  position: absolute;
  inset: -20rem;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,255,255,0.25) 15deg, transparent 30deg,
    transparent 60deg, rgba(255,255,255,0.25) 75deg, transparent 90deg,
    transparent 120deg, rgba(255,255,255,0.25) 135deg, transparent 150deg,
    transparent 180deg, rgba(255,255,255,0.25) 195deg, transparent 210deg,
    transparent 240deg, rgba(255,255,255,0.25) 255deg, transparent 270deg,
    transparent 300deg, rgba(255,255,255,0.25) 315deg, transparent 330deg,
    transparent 360deg
  );
  animation: raysSpin 10s linear infinite;
}

@keyframes raysSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.medal-image {
  width: 420rem;
  height: 420rem;
  position: relative;
  z-index: 1;
}

.joined-save-btn {
  margin-top: 30rem;
}

/* ─── Buttons ─── */
.save-btn {
  padding: 18rem 56rem;
  background: linear-gradient(145deg, #C8E6C9 0%, #81C784 50%, #66BB6A 100%);
  border: none;
  border-radius: 40rem;
  color: #fff;
  font-size: 28rem;
  box-shadow: 0 6rem 24rem rgba(76, 175, 80, 0.4);
  transition: all 0.3s ease;
}

.save-btn:active {
  background: linear-gradient(145deg, #A5D6A7 0%, #66BB6A 50%, #4CAF50 100%);
  box-shadow: 0 8rem 32rem rgba(76, 175, 80, 0.5);
  transform: translateY(-4rem);
}

/* ─── Loading Overlay ─── */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(232, 245, 233, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.loading-text {
  margin-top: 24rem;
  font-size: 28rem;
  color: #2D8A50;
  letter-spacing: 2rem;
}

/* ─── Medal Canvas ─── */
.medal-canvas {
  position: fixed;
  left: -3000px;
  top: -3000px;
  width: 1080px;
  height: 1920px;
  opacity: 0;
  pointer-events: none;
}

/* ─── 纪念勋章弹窗 ─── */
.badge-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 40rem;
}

.badge-card {
  background: #FFFFFF;
  border-radius: 64rem;
  padding: 64rem 56rem 56rem;
  max-width: 680rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 40rem 120rem rgba(30, 90, 40, 0.25);
  position: relative;
  animation: badgeBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-card::before {
  content: '🎉';
  position: absolute;
  top: -28rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 56rem;
}

.badge-title {
  font-size: 34rem;
  font-weight: 800;
  color: #2A6A30;
  letter-spacing: 4rem;
  margin-bottom: 12rem;
}

.badge-no {
  font-size: 26rem;
  color: #5A7A5E;
  margin-bottom: 40rem;
}

.badge-no strong {
  font-size: 56rem;
  font-weight: 900;
  color: #FFD97D;
  text-shadow: 0 4rem 16rem rgba(255, 180, 0, 0.3);
}

.badge-icon-wrap {
  margin: 0 auto 36rem;
  width: 380rem;
  height: 380rem;
  position: relative;
}

.badge-glow {
  position: absolute;
  inset: -24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 125, 0.45) 0%, transparent 70%);
  animation: badgeGlowPulse 2s ease-in-out infinite;
}

@keyframes badgeGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

.badge-medal {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
  animation: badgeSpin 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

@keyframes badgeSpin {
  0% { transform: rotate(-180deg) scale(0.4); opacity: 0; }
  60% { transform: rotate(12deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

.badge-text {
  font-size: 28rem;
  color: #5A7A5E;
  line-height: 1.7;
  margin-bottom: 44rem;
}

.badge-text .highlight {
  color: #2A6A30;
  font-weight: 600;
}

.badge-btns {
  display: flex;
  gap: 24rem;
  justify-content: center;
}

.badge-btn {
  flex: 1;
  max-width: 260rem;
  padding: 24rem 0;
  border-radius: 100rem;
  border: none;
  font-size: 28rem;
  font-weight: 700;
  letter-spacing: 2rem;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-btn:active {
  transform: scale(0.94);
}

.badge-btn.primary {
  background: linear-gradient(135deg, #C8E6C9, #66BB6A);
  color: #fff;
  box-shadow: 0 8rem 32rem rgba(76, 175, 80, 0.35);
}

.badge-btn.secondary {
  background: #F1F8F2;
  color: #5A7A5E;
  border: 3rem solid #C8E6C9;
}

@keyframes badgeBounceIn {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── Profile Modal ─── */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8rem);
  -webkit-backdrop-filter: blur(8rem);
  animation: fadeIn 0.3s ease;
}

.profile-card {
  width: 620rem;
  background: #FFFFFF;
  border-radius: 48rem;
  padding: 60rem 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: 0 30rem 80rem rgba(0, 0, 0, 0.3);
  border: 1rem solid rgba(0, 0, 0, 0.05);
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.profile-title {
  font-size: 38rem;
  font-weight: 800;
  color: #2A6A30;
  margin-bottom: 16rem;
  letter-spacing: 2rem;
}

.profile-desc {
  font-size: 28rem;
  color: #5A8A5E;
  margin-bottom: 60rem;
}

.avatar-select-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.avatar-select-wrap {
  width: 200rem;
  height: 200rem;
  border-radius: 100rem;
  background: #F1F8F2;
  border: 6rem dashed #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 24rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.avatar-select-btn:active .avatar-select-wrap {
  transform: scale(0.95);
  border-color: #66BB6A;
  background: #E8F5E9;
}

.avatar-select-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-select-placeholder {
  color: #A5D6A7;
  font-size: 80rem;
  font-weight: 200;
}

.avatar-select-hint {
  font-size: 26rem;
  color: #3A7A42;
  font-weight: 500;
}

.profile-tips {
  margin-top: 80rem;
  font-size: 24rem;
  color: #8AC48E;
  letter-spacing: 1rem;
}

.profile-close-btn {
  position: absolute;
  top: 40rem;
  right: 40rem;
  width: 60rem;
  height: 60rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rem;
  color: #8AC48E;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-close-btn:active {
  transform: scale(0.8);
  color: #6A9AB8;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}