* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');
body {
  font-family: 'ZCOOL QingKe HuangYou', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
  background: #F5E6D3; color: #46372E; overflow: hidden; height: 100vh; width: 100vw;
}
.app-container { width: 100%; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.page {
  width: 100%; height: 100vh; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 20px; position: relative; overflow: hidden;
}
.page-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.card {
  background: rgba(255,250,245,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 28px; padding: 24px 20px; width: 100%;
  box-shadow: 0 8px 32px rgba(139,126,116,0.1); border: 1px solid rgba(255,250,245,0.6);
}
.btn-primary {
  background: #64B89A; border: none; padding: 14px 0; border-radius: 60px; color: #fff;
  font-size: 18px; font-weight: 600; width: 100%; letter-spacing: 2px;
  box-shadow: 0 8px 24px rgba(100,184,154,0.3); cursor: pointer; transition: all 0.2s; margin-top: 14px;
}
.btn-primary:active { transform: scale(0.96); }
.btn-secondary {
  background: #FFB7B2; border: none; padding: 14px 0; border-radius: 60px; color: #46372E;
  font-size: 18px; font-weight: 600; width: 100%; letter-spacing: 1px;
  box-shadow: 0 8px 24px rgba(255,183,178,0.35); cursor: pointer; transition: all 0.2s; margin-top: 14px;
}
.btn-secondary:active { transform: scale(0.96); }
.btn-outline {
  background: transparent; border: 1.5px solid #FFB7B2; padding: 10px 24px; border-radius: 30px;
  color: #46372E; font-size: 15px; cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.btn-outline:active { background: #FFB7B2; }
.page-indicator {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px; z-index: 999;
}
.dot {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(200,190,180,0.5); transition: all 0.4s; cursor: pointer;
}
.dot.active { background: #FFB7B2; height: 20px; border-radius: 10px; }
.illu-wrap { width: 100%; display: flex; justify-content: center; margin-bottom: 8px; }
.illu-wrap svg, .illu-wrap img { width: 100%; max-width: 300px; height: auto; }

/* Particles */
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.particle {
  position: absolute; border-radius: 50%; opacity: 0.4;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* Animations */
.fade-in { animation: fadeIn 0.6s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.bounce-in { animation: bounceIn 0.5s ease forwards; }
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.float { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.glow { animation: glow 2s ease-in-out infinite; }
@keyframes glow { 0%,100% { box-shadow: 0 0 8px rgba(255,183,178,0.3); } 50% { box-shadow: 0 0 20px rgba(255,183,178,0.6); } }

/* Splash */
.splash-bg { background: linear-gradient(180deg, #141032 0%, #322846 100%); }
.splash-stars { position: absolute; inset: 0; pointer-events: none; }
.splash-star {
  position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%;
  animation: twinkle 2s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }
.splash-cloud {
  background: linear-gradient(135deg, #FFDCB5, #FFEDD5);
  border-radius: 100px; padding: 30px 50px; text-align: center;
  box-shadow: 0 0 60px rgba(255,220,180,0.3);
  animation: float 4s ease-in-out infinite;
}
.splash-cloud .title { font-size: 42px; color: #46372E; letter-spacing: 4px; }
.splash-cloud .subtitle { font-size: 20px; color: #8B7E74; margin-top: 8px; letter-spacing: 2px; }
.splash-start {
  position: absolute; bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: fadeIn 1.5s ease 2s forwards; opacity: 0;
}
.splash-start .circle-btn {
  width: 60px; height: 60px; border-radius: 50%; background: #FFB7B2; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 20px rgba(255,183,178,0.4); transition: all 0.2s;
}
.splash-start .circle-btn:active { transform: scale(0.9); }
.splash-start .circle-btn i { color: #fff; font-size: 24px; }
.splash-start span { color: rgba(255,255,255,0.5); font-size: 13px; letter-spacing: 2px; }

/* Home */
.home-bg { background: linear-gradient(180deg, #F5E6D3 0%, #E6D7C3 100%); }
.home-title { font-size: 32px; color: #46372E; align-self: flex-start; margin: 10px 0 6px 10px; letter-spacing: 2px; }
.home-cloud {
  position: absolute; background: rgba(255,255,255,0.15); border-radius: 50%; pointer-events: none;
  animation: drift 20s linear infinite;
}
@keyframes drift { 0% { transform: translateX(-100px); } 100% { transform: translateX(calc(100vw + 100px)); } }
.home-card {
  background: #FFF8F2; border-radius: 20px; padding: 18px 20px; width: 100%; margin-bottom: 12px;
  border: 1px solid rgba(210,200,190,0.3); cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 16px;
}
.home-card:active { transform: scale(0.97); background: #FFF0E8; }
.home-card .icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.home-card .info h3 { font-size: 20px; color: #46372E; font-weight: 600; }
.home-card .info p { font-size: 14px; color: #B3A298; margin-top: 2px; }

/* Write Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(50,40,30,0.5); backdrop-filter: blur(4px);
  z-index: 1000; display: none; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.3s ease;
}
.modal-overlay.active { display: flex; }
.modal-content {
  background: #FFF8F2; border-radius: 28px 28px 0 0; padding: 28px 24px; width: 100%; max-width: 420px;
  max-height: 80vh; overflow-y: auto; animation: slideUp 0.4s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-content h2 { font-size: 24px; text-align: center; margin-bottom: 20px; }
.modal-content input, .modal-content textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #E8DDD5;
  font-size: 16px; outline: none; transition: border 0.3s; background: #FFFCFA; font-family: inherit;
}
.modal-content input:focus, .modal-content textarea:focus { border-color: #FFB7B2; }
.modal-content textarea { min-height: 120px; resize: none; }
.tag-group { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.tag {
  padding: 8px 20px; border-radius: 30px; background: #F0E8E0; color: #8B7E74;
  font-size: 14px; cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.tag.active { background: #FFB7B2; color: #46372E; }

/* Paper Plane */
.paperplane-bg { background: linear-gradient(180deg, #FFF0E0 0%, #F5E1C8 100%); }
.paper-plane {
  position: absolute; font-size: 48px; animation: flyAcross 3s ease-in-out forwards;
  opacity: 0; z-index: 10;
}
@keyframes flyAcross {
  0% { transform: translate(-50px, 200px) rotate(-15deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(calc(100vw + 50px), -100px) rotate(-15deg); opacity: 0; }
}

/* Quiz */
.quiz-bg { background: linear-gradient(180deg, #F5ECE4 0%, #EBE0D6 100%); }
.quiz-progress { width: 100%; height: 8px; background: #E0D5CC; border-radius: 4px; margin-bottom: 20px; }
.quiz-progress-bar { height: 100%; background: #64B89A; border-radius: 4px; transition: width 0.5s; }
.quiz-option {
  padding: 16px 18px; border-radius: 14px; background: #FFFCFA; border: 1.5px solid #E0D5CC;
  margin-bottom: 10px; cursor: pointer; transition: all 0.2s; font-size: 17px; font-family: inherit;
}
.quiz-option:active, .quiz-option.selected { border-color: #FFB7B2; background: #FFF5F0; }

/* Radar */
.radar-bg { background: linear-gradient(180deg, #FAF0E8 0%, #F0E4DA 100%); }
.radar-chart { position: relative; width: 260px; height: 260px; margin: 16px auto; }
.radar-chart canvas { width: 100%; height: 100%; }
.radar-labels { display: flex; justify-content: space-around; margin-top: 8px; }
.radar-labels span { font-size: 16px; }

/* Scenes */
.scenes-bg { background: linear-gradient(180deg, #282336 0%, #1A1728 100%); }
.scene-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 10px 0; width: 100%; scrollbar-width: none; }
.scene-cards::-webkit-scrollbar { display: none; }
.scene-card {
  min-width: 80%; scroll-snap-align: center; border-radius: 24px; padding: 60px 20px;
  text-align: center; position: relative; transition: all 0.3s;
}
.scene-card.active { transform: scale(1); }
.scene-card h2 { font-size: 32px; color: #fff; margin-bottom: 30px; }
.play-btn {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center; margin: 0 auto; cursor: pointer;
  border: none; font-size: 28px; color: #46372E; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: all 0.2s;
}
.play-btn:active { transform: scale(0.9); }

/* Rain */
.rain-bg { background: linear-gradient(180deg, #191E34 0%, #0F1425 100%); }
.rain-drop {
  position: absolute; width: 1.5px; background: rgba(180,200,230,0.4); pointer-events: none;
  animation: rainFall linear infinite;
}
@keyframes rainFall { 0% { transform: translateY(-10px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.5; } 100% { transform: translateY(100vh); opacity: 0; } }
.timer-btn {
  padding: 8px 18px; border-radius: 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: #B0B8C8; font-size: 14px; cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.timer-btn.active { background: rgba(255,183,178,0.2); border-color: #FFB7B2; color: #FFB7B2; }

/* Bottle Sea */
.bottlesea-bg { background: linear-gradient(180deg, #08193C 0%, #1E3250 100%); }
.wave {
  position: absolute; bottom: 0; left: 0; width: 200%; height: 30%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath d='M0 100 Q150 50 300 100 T600 100 T900 100 T1200 100 V200 H0Z' fill='rgba(30,50,80,0.6)'/%3E%3C/svg%3E") repeat-x;
  animation: waveMove 6s linear infinite;
  pointer-events: none; z-index: 1;
}
@keyframes waveMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.bottle-btn {
  width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.15); display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s;
  color: #E0E8F0; font-family: inherit;
}
.bottle-btn:active { transform: scale(0.92); background: rgba(255,255,255,0.15); }
.bottle-btn i { font-size: 48px; margin-bottom: 10px; }
.bottle-btn span { font-size: 20px; }

/* Throw / Pick */
.throw-bg { background: linear-gradient(180deg, #E8D5C0 0%, #D4BE9E 100%); }
.throw-card {
  background: rgba(255,250,245,0.92); border-radius: 24px; padding: 24px; width: 100%;
  backdrop-filter: blur(12px); border: 1px solid rgba(210,200,190,0.3);
}

/* Stars */
.stars-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.star {
  position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}

/* Sunset */
.sunset-bg { background: linear-gradient(180deg, #FFD8A8 0%, #E8906E 50%, #8B5E4A 100%); }
.sunset-card {
  background: rgba(255,250,245,0.15); backdrop-filter: blur(8px); border-radius: 18px;
  padding: 16px 12px; text-align: center; border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer; transition: all 0.2s; min-width: 110px;
}
.sunset-card:active { transform: scale(0.95); background: rgba(255,255,255,0.25); }
.sunset-card i { font-size: 28px; color: rgba(255,255,255,0.9); }
.sunset-card span { display: block; margin-top: 6px; font-size: 14px; color: rgba(255,255,255,0.85); }

/* Media Bar */
.media-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
  display: flex; justify-content: center; gap: 10px; padding: 8px 16px;
  background: rgba(245,230,211,0.85); backdrop-filter: blur(8px);
}
.media-btn {
  background: #FFE4D6; border: none; border-radius: 30px; padding: 6px 14px;
  font-size: 12px; color: #46372E; cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: inherit;
}
.hidden-media { display: none; }

/* Responsive */
@media (max-width: 380px) {
  .page { padding: 12px 16px; }
  .card { padding: 20px 16px; border-radius: 24px; }
  .splash-cloud .title { font-size: 32px; }
  .bottle-btn { width: 150px; height: 150px; }
}