/* ========== 全局重置 & 变量 ========== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  --mint:#78D7C8;
  --mint-deep:#5EC4B4;
  --cream:#FFF8E7;
  --yellow:#FFC83D;
  --pink:#FF8A8A;
  --blue:#7EB8F0;
  --green:#7FC97F;
  --purple:#C080D0;
  --ink:#1a1a1a;
  --nav-h:64px;
}

html{ scroll-behavior:smooth; scroll-snap-type:y mandatory; }
body{
  font-family:"Noto Sans SC","ZCOOL KuaiLe","PingFang SC",sans-serif;
  background:var(--mint);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

/* ========== 全屏 section ========== */
.screen{
  min-height:100vh;
  position:relative;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(var(--nav-h) + 20px) 24px 40px;
  overflow:hidden;
}

/* ========== 顶部导航 ========== */
.site-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
  z-index:200;
  background:rgba(120,215,200,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.logo svg{ height:56px; width:auto; display:block; }
.top-nav{ display:flex; gap:6px; flex-wrap:wrap; }
.top-nav a{
  font-family:"Yusei Magic","ZCOOL KuaiLe",sans-serif;
  font-size:14px; font-weight:900;
  padding:6px 12px;
  border:3px solid var(--ink);
  border-radius:20px;
  background:#fff;
  transition:transform .15s, background .15s;
  white-space:nowrap;
}
.top-nav a:hover{
  background:var(--yellow);
  transform:translateY(-2px);
}

/* ========== 流星（从右上向左下划落） ========== */
.clouds{
  position:fixed;
  top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.meteor{
  position:absolute;
  top:-150px;
  opacity:0;
  animation:meteorFall linear infinite;
}
.meteor svg{ width:100%; height:100%; display:block; }
@keyframes meteorFall{
  0%{
    transform:translate(0, 0) rotate(45deg);
    opacity:0;
  }
  5%{ opacity:1; }
  85%{ opacity:1; }
  100%{
    transform:translate(140vw, 140vh) rotate(45deg);
    opacity:0;
  }
}

/* ========== 黑胶唱片机 ========== */
.vinyl-player{
  position:fixed;
  right:20px; bottom:20px;
  width:110px;
  z-index:200;
  display:flex; flex-direction:column; align-items:center;
  transition:transform .2s;
}
.vinyl-player:hover{ transform:scale(1.08); }
.vinyl-svg{
  width:110px; height:110px;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,0.2));
  animation:vinylBob 3s ease-in-out infinite;
}
.vinyl-svg .record-disc{
  transform-origin:55px 55px;
  animation:spin 3s linear infinite;
  animation-play-state:paused;
}
.vinyl-player.playing .vinyl-svg .record-disc{
  animation-play-state:running;
}
.vinyl-player.playing .vinyl-svg{
  animation:vinylBob 1.5s ease-in-out infinite;
}
.vinyl-label{
  font-family:"Yusei Magic","ZCOOL KuaiLe",sans-serif;
  font-size:12px; font-weight:900;
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:12px;
  padding:2px 10px;
  margin-top:-8px;
  white-space:nowrap;
}
@keyframes spin{ 100%{ transform:rotate(360deg); } }
@keyframes vinylBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ========== 大标题 ========== */
.big-title{
  font-family:"Yusei Magic","ZCOOL KuaiLe",sans-serif;
  font-size:clamp(48px, 9vw, 110px);
  font-weight:900;
  -webkit-text-stroke:3px var(--ink);
  color:#fff;
  text-shadow:6px 6px 0 var(--ink);
  letter-spacing:2px;
  margin-bottom:20px;
  text-align:center;
  line-height:1;
}

/* ========== 向下箭头 ========== */
.down-arrow{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  animation:bobble 1.5s ease-in-out infinite;
}
.down-arrow svg{ width:32px; height:48px; }
.down-arrow:hover{ animation-play-state:paused; }
@keyframes bobble{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(10px); }
}

/* ========== HERO 首页 ========== */
.screen-hero{
  background:var(--mint);
}
.scatter{
  position:relative;
  width:100%; max-width:900px;
  height:min(70vh, 560px);
}
/* 星宝跳舞动画封面（APNG 透明背景，透出薄荷绿主色） */
.hero-cover{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -52%);
  width:min(56vh, 440px);
  z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,0.18));
}
.sc{
  position:absolute;
  animation:float 3s ease-in-out infinite;
}
.sc .bao{ width:100%; height:100%; object-fit:contain; }
.sc-1{ width:18%; top:20%; left:2%; animation-delay:0s; }
.sc-2{ width:22%; top:5%; left:38%; animation-delay:.4s; }
.sc-3{ width:17%; top:12%; right:3%; animation-delay:.8s; }
.sc-4{ width:16%; bottom:8%; left:8%; animation-delay:.2s; }
.sc-5{ width:20%; bottom:5%; left:38%; animation-delay:.6s; }
.sc-6{ width:17%; bottom:10%; right:8%; animation-delay:1s; }
.sc-7{ width:14%; top:42%; left:42%; animation-delay:.3s; }
.sc-8{ width:16%; top:35%; right:18%; animation-delay:.7s; }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-12px) rotate(2deg); }
}

/* ========== ABOUT ========== */
.screen-about{
  background:var(--cream);
}
.about-text{
  text-align:center;
  max-width:600px;
  margin-bottom:20px;
}
.about-text p{
  font-family:"ZCOOL KuaiLe",sans-serif;
  font-size:clamp(18px, 2.5vw, 26px);
  font-weight:700;
  margin:8px 0;
}
.about-sub{
  margin-top:16px !important;
  color:var(--pink);
  font-size:clamp(16px, 2vw, 20px) !important;
}
.group-illu{
  width:min(90vw, 560px);
  margin-top:20px;
}
.group-stars{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
}
.gs{
  position:absolute;
  object-fit:contain;
  display:block;
}
.gs-main{
  width:42%;
  top:8%;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
}
.gs-left-book{
  width:28%;
  top:35%;
  left:2%;
  z-index:2;
}
.gs-left-frown{
  width:32%;
  top:20%;
  left:20%;
  z-index:2;
}
.gs-right-wave{
  width:30%;
  top:22%;
  right:2%;
  z-index:2;
}
.gs-right-sing{
  width:28%;
  top:10%;
  right:22%;
  z-index:2;
}
.gs-bottom-smile{
  width:22%;
  bottom:2%;
  left:22%;
  z-index:1;
}

/* ========== CHARACTER 表情图鉴 ========== */
.screen-character{
  background:var(--mint);
}
.char-sub{
  font-family:"ZCOOL KuaiLe",sans-serif;
  font-size:clamp(16px, 2vw, 22px);
  font-weight:700;
  color:#fff;
  -webkit-text-stroke:1px var(--ink);
  margin-bottom:24px;
  text-align:center;
}
.char-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  width:min(95vw, 900px);
}
.char-item{
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer;
  transition:transform .2s;
}
.char-item:hover{ transform:scale(1.08) translateY(-4px); }
.char-item:active{ transform:scale(0.95); }
.char-scallop{
  width:100%;
  aspect-ratio:1;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
/* 扇贝形圆形底 —— 用径向渐变 + border-radius 模拟波浪边 */
.char-scallop::before{
  content:"";
  position:absolute; inset:0;
  background:var(--cream);
  border:4px solid var(--ink);
  border-radius:48% 52% 50% 50% / 42% 42% 58% 58%;
  box-shadow:4px 4px 0 var(--ink);
  transition:background .2s;
}
.char-item:nth-child(even) .char-scallop::before{
  border-radius:52% 48% 50% 50% / 58% 58% 42% 42%;
}
.char-item:hover .char-scallop::before{
  background:var(--yellow);
}
.char-img{
  position:relative; z-index:1;
  width:92%;
  height:92%;
  object-fit:contain;
  transform:translateY(4px);
}
.char-item h3{
  font-family:"Yusei Magic","ZCOOL KuaiLe",sans-serif;
  font-size:clamp(14px, 1.6vw, 20px);
  font-weight:900;
  margin-top:8px;
  -webkit-text-stroke:0.5px var(--ink);
  color:#fff;
  text-align:center;
}
.char-item p{
  font-family:"ZCOOL KuaiLe",sans-serif;
  font-size:clamp(11px, 1.2vw, 14px);
  color:#fff;
  text-align:center;
  opacity:0.9;
}

/* ========== DIARY 旅行日记 ========== */
.screen-diary{
  background:var(--cream);
  min-height:auto;
  padding-bottom:60px;
}
.diary-scroll{
  display:flex; flex-direction:column; gap:24px;
  width:min(95vw, 800px);
}
.diary-row{
  display:grid;
  grid-template-columns:80px 1fr 140px;
  gap:16px;
  align-items:center;
  background:#fff;
  border:4px solid var(--ink);
  border-radius:20px;
  padding:16px 20px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .15s;
}
.diary-row:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.diary-row.reverse{ grid-template-columns:140px 1fr 80px; direction:rtl; }
.diary-row.reverse > *{ direction:ltr; }
.diary-num{
  font-family:"Yusei Magic",sans-serif;
  font-size:42px; font-weight:900;
  color:var(--yellow);
  -webkit-text-stroke:2.5px var(--ink);
  text-align:center;
  line-height:1;
}
.diary-info h3{
  font-family:"Noto Sans SC",sans-serif;
  font-size:clamp(20px, 2.8vw, 28px);
  font-weight:900;
  color:var(--ink);
}
.diary-date-text{
  font-family:"Noto Sans SC",sans-serif;
  font-size:clamp(14px, 1.8vw, 18px);
  color:var(--ink);
  margin:4px 0 10px;
  font-weight:700;
}
.diary-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.diary-tags li{
  font-family:"Noto Sans SC",sans-serif;
  font-size:clamp(13px, 1.5vw, 17px);
  font-weight:700;
  background:var(--mint);
  color:#fff;
  padding:5px 16px;
  border-radius:20px;
  transition:transform .15s, background .15s;
}
.diary-tags li:hover{
  transform:translateY(-2px);
  background:var(--mint-deep);
}
.diary-tags .tag-return{
  background:var(--yellow);
  color:var(--ink);
}
.diary-bao{ width:140px; display:flex; align-items:center; justify-content:center; }
.bao-img{ width:100%; height:auto; object-fit:contain; }

/* ========== GALLERY 相册 ========== */
.screen-gallery{
  background:var(--mint);
}
.gallery-wrap{
  width:min(95vw, 900px);
}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.photo{ aspect-ratio:1; }
.ph-box{
  width:100%; height:100%;
  background:#fff;
  border:4px solid var(--ink);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:48px;
  transition:transform .2s;
}
.ph-box:hover{ transform:translate(-2px,-2px) rotate(-2deg); box-shadow:6px 6px 0 var(--ink); }

/* ========== MOVIE 视频 ========== */
.screen-movie{
  background:var(--cream);
}
.movie-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  width:min(95vw, 840px);
}
.mv-card{ text-align:center; }
.mv-thumb{
  aspect-ratio:16/10;
  background:var(--ink);
  border:4px solid var(--ink);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--ink);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s;
}
.mv-thumb:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.mv-thumb::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--purple), var(--blue));
  opacity:0.7;
}
.play-btn{
  position:relative; z-index:1;
  width:56px; height:56px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:50%;
  font-size:22px;
  display:flex; align-items:center; justify-content:center;
  padding-left:4px;
}
.mv-card p{
  font-family:"ZCOOL KuaiLe",sans-serif;
  font-size:16px; font-weight:700;
}

/* ========== ISLAND 岛屿沙滩场景 ========== */
.screen-island{
  background:linear-gradient(to bottom, var(--mint) 0%, var(--mint) 42%, #F5E6A0 42%, #F5E6A0 100%);
  padding:0;
  justify-content:flex-end;
  min-height:100vh;
  scroll-snap-align:start;
}
.island-sky{
  position:absolute;
  inset:0;
  overflow:hidden;
}
/* 远山 */
.island-mountain{
  position:absolute;
  bottom:38%;
  left:0;
  width:100%;
  height:45%;
}
/* 沙滩层 */
.island-sky::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:58%;
  background:#F5E6A0;
  border-top:5px solid var(--ink);
}
/* 树 */
.island-trees{
  position:absolute;
  bottom:38%;
  left:0; right:0;
  height:20%;
  z-index:3;
}
.tree{ position:absolute; height:90%; width:auto; }
.tree.t1{ left:18%; bottom:2%; }
.tree.t2{ left:55%; bottom:2%; height:70%; }
.tree.t3{ right:12%; bottom:2%; height:80%; }
/* 小屋 */
.island-house{
  position:absolute;
  bottom:5%;
  right:18%;
  width:min(220px, 22vw);
  z-index:5;
}
/* 牌子 */
.island-sign{
  position:absolute;
  bottom:18%;
  right:8%;
  width:min(140px, 14vw);
  z-index:6;
  animation:signSway 3s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes signSway{
  0%,100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
}
/* 螃蟹 */
.island-crab{
  position:absolute;
  bottom:8%;
  right:30%;
  width:60px;
  z-index:6;
  animation:crabWalk 8s ease-in-out infinite;
}
@keyframes crabWalk{
  0%{ transform:translateX(0) scaleX(1); }
  25%{ transform:translateX(-60px) scaleX(1); }
  50%{ transform:translateX(-60px) scaleX(-1); }
  75%{ transform:translateX(20px) scaleX(-1); }
  100%{ transform:translateX(0) scaleX(1); }
}
/* 冲浪板星宝（左侧） */
.island-surfer{
  position:absolute;
  bottom:4%;
  left:4%;
  width:min(220px, 22vw);
  z-index:5;
  animation:swimBob 3s ease-in-out infinite;
}
/* 咖啡星宝（右侧） */
.island-coffee{
  position:absolute;
  bottom:6%;
  right:2%;
  width:min(200px, 20vw);
  z-index:5;
  animation:loungerRock 3s ease-in-out infinite;
}
@keyframes loungerRock{
  0%,100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg) translateY(-5px); }
}
/* 星宝PNG图片基础 */
.island-star{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.starbao-img{
  width:100%;
  height:auto;
  display:block;
  position:relative;
  z-index:2;
  object-fit:contain;
}
/* 冲浪板（在星宝背后下方） */
.prop-surf{
  position:absolute;
  bottom:5%;
  left:-8%;
  width:95%;
  z-index:1;
  transform:rotate(-8deg);
}
/* 咖啡杯（在星宝身前左下角） */
.prop-coffee{
  position:absolute;
  bottom:8%;
  left:8%;
  width:28%;
  z-index:3;
}
@keyframes swimBob{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-8px) rotate(3deg); }
}
/* 沙粒 */
.sand-dots{
  position:absolute;
  bottom:0; left:0; right:0;
  height:58%;
  z-index:2;
  pointer-events:none;
}
.sand-dot{
  position:absolute;
  width:5px; height:5px;
  background:rgba(0,0,0,0.25);
  border-radius:50%;
}
.island-copy{
  position:relative;
  z-index:10;
  font-family:"Yusei Magic",sans-serif;
  font-size:14px;
  font-weight:700;
  text-align:center;
  padding:20px 0 24px;
  color:var(--ink);
}

/* ========== 对话气泡 ========== */
.speech-bubble{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%) scale(0);
  background:#fff;
  border:4px solid var(--ink);
  border-radius:20px;
  padding:16px 24px;
  font-family:"ZCOOL KuaiLe",sans-serif;
  font-size:22px;
  font-weight:700;
  z-index:300;
  box-shadow:6px 6px 0 var(--ink);
  pointer-events:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap;
}
.speech-bubble.show{ transform:translate(-50%, -50%) scale(1); }
.speech-bubble::after{
  content:"";
  position:absolute;
  bottom:-16px; left:50%;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-top-color:var(--ink);
}
.speech-bubble::before{
  content:"";
  position:absolute;
  bottom:-10px; left:50%;
  transform:translateX(-50%);
  width:16px; height:10px;
  background:#fff;
  z-index:1;
}

/* ========== 响应式 ========== */
@media (max-width: 768px){
  .top-nav a{ font-size:11px; padding:4px 8px; border-width:2px; }
  .site-header{ padding:0 12px; }
  .logo svg{ height:36px; }
  .vinyl-player{ width:80px; right:10px; bottom:10px; }
  .vinyl-svg{ width:80px; height:80px; }
  .vinyl-label{ font-size:10px; padding:1px 8px; }
  .char-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .diary-row{
    grid-template-columns:50px 1fr 90px;
    gap:10px;
    padding:12px;
  }
  .diary-row.reverse{ grid-template-columns:90px 1fr 50px; }
  .diary-num{ font-size:28px; }
  .diary-bao{ width:90px; }
  .photo-grid{ grid-template-columns:repeat(2, 1fr); }
  .movie-grid{ grid-template-columns:repeat(3, 1fr); gap:12px; }
  .island-crab{ width:40px; }
}
@media (max-width:480px){
  .big-title{ font-size:48px; text-shadow:4px 4px 0 var(--ink); -webkit-text-stroke:2px var(--ink); }
  .scatter{ height:50vh; }
}