/* ===== 哆啦A萌 Theme ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:'Fredoka','Noto Sans SC','PingFang SC',sans-serif;
  background:#0d47a1;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding-bottom:64px;
}
a{color:inherit;text-decoration:none}

/* ===== SKY ===== */
.sky{
  min-height:100vh;
  background:linear-gradient(172deg,#0a3d8f 0%,#1565C0 25%,#1E88E5 55%,#42A5F5 80%,#64B5F6 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:50px 20px 30px;position:relative;overflow:hidden;
}
.cloud-layer{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.cloud-layer .c{
  position:absolute;background:rgba(255,255,255,0.06);border-radius:9999px;
  animation:drift 30s linear infinite;
}
.c1{width:200px;height:55px;top:30px;left:-40px}
.c2{width:280px;height:70px;top:90px;right:-60px;animation-delay:5s}
.c3{width:160px;height:50px;top:170px;left:20%;animation-delay:10s}
.c4{width:220px;height:60px;top:60px;left:50%;animation-delay:3s}
@keyframes drift{
  0%{transform:translateX(0)}
  50%{transform:translateX(20px)}
  100%{transform:translateX(0)}
}
.star{
  position:absolute;width:5px;height:5px;
  background:rgba(255,255,255,0.25);border-radius:50%;
  animation:twinkle 3s ease-in-out infinite;
}
.s1{top:12%;left:8%}.s2{top:25%;right:12%;animation-delay:.8s}
.s3{top:8%;right:30%;animation-delay:1.6s}.s4{top:40%;left:5%;animation-delay:.4s}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(1)}
  50%{opacity:1;transform:scale(1.6)}
}

/* Bell */
.top-scene{position:relative;margin-bottom:8px;display:flex;align-items:center;justify-content:center;width:180px;height:150px}
.bell-wrap{position:relative;width:100px;height:120px;display:flex;flex-direction:column;align-items:center}
.bell-ribbon{
  width:76px;height:15px;
  background:linear-gradient(90deg,#FDD835,#F9A825,#FDD835);
  border-radius:8px;position:relative;z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.15)
}
.bell-ribbon-knot{
  width:13px;height:17px;background:#F9A825;
  clip-path:polygon(50% 0%,0% 100%,100% 100%);
  position:relative;z-index:3;margin-top:-1px
}
.bell-body{
  width:76px;height:74px;
  background:radial-gradient(circle at 38% 30%,#FFD54F,#F9A825);
  border-radius:50% 50% 45% 45%;position:relative;margin-top:-2px;
  box-shadow:0 6px 20px rgba(0,0,0,.2),inset 0 -6px 10px rgba(0,0,0,.08),inset 0 5px 10px rgba(255,255,255,.25);
  animation:swing 4s ease-in-out infinite;z-index:2
}
@keyframes swing{
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(4deg)}
  40%{transform:rotate(-3deg)}
  60%{transform:rotate(2deg)}
  80%{transform:rotate(-2deg)}
}
.bell-body::before{
  content:'';position:absolute;top:12px;left:16px;
  width:20px;height:12px;background:rgba(255,255,255,.3);
  border-radius:50%;transform:rotate(-30deg)
}
.bell-clapper{
  width:13px;height:13px;
  background:radial-gradient(circle at 35% 30%,#FFE082,#F9A825);
  border-radius:50%;position:relative;margin-top:-3px;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.1);z-index:1;animation:clap 4s ease-in-out infinite
}
@keyframes clap{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}
.bell-dots{position:absolute;bottom:10px;display:flex;gap:5px}
.bell-dots span{width:4px;height:4px;background:rgba(0,0,0,.08);border-radius:50%}

/* Title */
.title-block{text-align:center;margin-bottom:20px}
.title-block h1{
  font-family:'ZCOOL KuaiLe','Fredoka',cursive;
  font-size:3.8rem;line-height:1.1;color:white;
  text-shadow:0 4px 12px rgba(0,0,0,.12);letter-spacing:2px
}
.title-block h1 .letter-a{display:inline-block;color:#FDD835;transform:rotate(-6deg) scale(1.05)}
.title-block .tagline{font-size:.82rem;color:rgba(255,255,255,.6);font-weight:400;letter-spacing:4px}

/* Mood grid */
.mood-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;max-width:300px;margin:0 auto}
.mood-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform .15s}
.mood-item:active{transform:scale(.9)}
.mood-item:nth-child(1){transform:rotate(-2deg)}
.mood-item:nth-child(2){transform:rotate(2deg)}
.mood-item:nth-child(3){transform:rotate(1deg)}
.mood-item:nth-child(4){transform:rotate(-1deg)}
.mood-circle{
  width:76px;height:76px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,.12),inset 0 -6px 10px rgba(0,0,0,.08),inset 0 5px 10px rgba(255,255,255,.2)
}
.mood-circle::after{
  content:'';position:absolute;top:10px;left:16px;
  width:18px;height:10px;background:rgba(255,255,255,.2);
  border-radius:50%;transform:rotate(-25deg)
}
.mood-go .mood-circle{background:linear-gradient(135deg,#FF8A65,#F4511E)}
.mood-study .mood-circle{background:linear-gradient(135deg,#FFD54F,#FFB300)}
.mood-chill .mood-circle{background:linear-gradient(135deg,#81D4FA,#29B6F6)}
.mood-lucky .mood-circle{background:linear-gradient(135deg,#CE93D8,#AB47BC)}
.mood-item label{font-family:'ZCOOL KuaiLe','Fredoka',sans-serif;font-size:.85rem;color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.1)}
.mood-item .sub{font-size:.55rem;color:rgba(255,255,255,.4)}

/* ===== GROUND ===== */
.ground{
  background:#f5f0e8;
  border-radius:36px 36px 0 0;
  margin-top:-24px;padding:28px 20px 30px;
  position:relative;z-index:5;
}
.ground::before{
  content:'';position:absolute;top:0;left:20px;right:20px;height:8px;
  background:repeating-linear-gradient(90deg,#e0d5c4 0,#e0d5c4 3px,transparent 3px,transparent 8px,#d4c8b4 8px,#d4c8b4 11px,transparent 11px,transparent 16px);
  opacity:.3;border-radius:36px 36px 0 0;
}

/* Sticker label */
.sticker{
  display:inline-flex;align-items:center;gap:6px;
  background:#1565C0;color:white;
  font-family:'ZCOOL KuaiLe','Fredoka',sans-serif;
  font-size:.78rem;padding:5px 18px 5px 14px;
  border-radius:0 16px 16px 0;margin-bottom:16px;
  position:relative;box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.sticker::after{
  content:'';position:absolute;right:-8px;top:50%;
  transform:translateY(-50%);
  border-style:solid;border-width:6px 0 6px 8px;
  border-color:transparent transparent transparent #1565C0;
}

/* Featured card */
.featured-card{
  background:white;border-radius:22px;padding:18px;margin-bottom:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.04);position:relative;
  border:2px solid transparent;transition:all .2s;cursor:pointer;
}
.featured-card:active{border-color:#1565C0;transform:scale(.98)}
.featured-card .today-badge{
  position:absolute;top:-6px;left:16px;
  background:linear-gradient(135deg,#1565C0,#1E88E5);color:white;
  font-size:.6rem;font-weight:700;padding:3px 12px;
  border-radius:20px;letter-spacing:1px;box-shadow:0 2px 6px rgba(21,101,192,.2);
}
.featured-card .fc-row{display:flex;align-items:center;gap:14px;margin-top:6px}
.featured-card .fc-icon{
  width:68px;height:68px;background:#FFF3E0;border-radius:18px;
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;flex-shrink:0;
}
.featured-card .fc-info{flex:1}
.featured-card .fc-info h3{font-family:'ZCOOL KuaiLe','Fredoka',sans-serif;font-size:1.2rem;margin-bottom:3px}
.featured-card .fc-info .desc{font-size:.76rem;color:#6b7280;line-height:1.5}
.featured-card .fc-pair{margin-top:10px;padding-top:8px;border-top:1.5px dashed #e5e7eb;font-size:.7rem;color:#999;display:flex;gap:6px;flex-wrap:wrap}
.featured-card .fc-pair .tag{background:#f0f0f0;padding:2px 10px;border-radius:10px;display:flex;align-items:center;gap:4px}

/* Shelf */
.shelf{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.shelf-item{
  background:white;border-radius:16px;padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.03);
  cursor:pointer;transition:all .15s;border:1.5px solid transparent;
}
.shelf-item:active{border-color:#1565C0;transform:scale(.98)}
.shelf-item .si-icon{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;
}
.shelf-item .si-info{flex:1;min-width:0}
.shelf-item .si-info h4{font-family:'ZCOOL KuaiLe','Fredoka',sans-serif;font-size:.88rem;margin-bottom:1px}
.shelf-item .si-info .s-desc{font-size:.68rem;color:#6b7280}
.shelf-item .si-arrow{color:#bbb;font-size:.8rem}

/* Pair box */
.pair-box{background:white;border-radius:18px;padding:16px;margin-bottom:20px;box-shadow:0 2px 6px rgba(0,0,0,.03)}
.pair-box .pb-title{font-size:.75rem;font-weight:600;color:#6b7280;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.pair-scroll{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.pair-unit{flex-shrink:0;background:#f5f0e8;border-radius:14px;padding:10px 14px;text-align:center;min-width:70px}
.pair-unit .pu-emoji{font-size:1.3rem;display:block;margin-bottom:1px}
.pair-unit .pu-name{font-size:.65rem;font-weight:600;color:#1a1a2e}
.pair-unit .pu-combo{font-size:.55rem;color:#999;margin-top:2px}

/* Fact card */
.fact-card{
  background:linear-gradient(135deg,#FFF8E1,#FFECB3);border-radius:18px;
  padding:16px;margin-bottom:18px;display:flex;align-items:flex-start;gap:12px;
}
.fact-card .fc-badge{font-size:1.5rem;line-height:1}
.fact-card .fc-body{flex:1}
.fact-card .fc-body .fc-title{font-family:'ZCOOL KuaiLe','Fredoka',sans-serif;font-size:.78rem;color:#E65100;margin-bottom:3px}
.fact-card .fc-body .fc-text{font-size:.7rem;color:#6b7280;line-height:1.5}

/* Footer */
.site-footer{text-align:center;padding:10px 0}
.site-footer p{font-size:.7rem;color:#999;line-height:1.6}
.site-footer .ymm-wmark{margin-top:6px;font-size:.55rem;color:#d5d0c8;letter-spacing:4px;font-family:Georgia,serif;font-style:italic}

/* Full item grid (items list page) */
.item-grid-full{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;margin-bottom:24px;
}
.item-grid-full .ig-item{
  background:white;border-radius:18px;padding:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.03);
  cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:12px;
  border:1.5px solid transparent;
}
.item-grid-full .ig-item:active{transform:scale(.97);border-color:#1565C0}
.item-grid-full .ig-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;flex-shrink:0;
}
.item-grid-full .ig-info{flex:1;min-width:0}
.item-grid-full .ig-info h3{font-family:'ZCOOL KuaiLe','Fredoka',sans-serif;font-size:.9rem;margin-bottom:2px}
.item-grid-full .ig-info .ig-desc{font-size:.7rem;color:#6b7280}
.item-grid-full .ig-cat{font-size:.6rem;color:#999;margin-left:auto}

/* Single item page */
.item-detail{padding:20px;max-width:700px;margin:0 auto}
.item-detail .back{display:inline-block;margin-bottom:16px;color:rgba(255,255,255,.7);font-size:.82rem}
.item-detail .id-hero{
  text-align:center;margin-bottom:24px;
}
.item-detail .id-hero .id-emoji{font-size:4rem;display:block;margin-bottom:8px}
.item-detail .id-hero h1{font-family:'ZCOOL KuaiLe','Fredoka',sans-serif;font-size:2rem;color:white}
.item-detail .id-hero .id-jp{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:4px}
.item-detail .id-body{
  background:white;border-radius:24px;padding:24px;
}
.item-detail .id-body .id-cat{
  display:inline-block;padding:3px 12px;border-radius:12px;
  background:#e3f2fd;color:#1565C0;font-size:.7rem;font-weight:600;
  margin-bottom:12px;
}
.item-detail .id-body .id-desc{font-size:.9rem;line-height:1.7;color:#333;margin-bottom:16px}
.item-detail .id-body .id-scene{
  background:#f5f0e8;border-radius:14px;padding:14px 16px;margin-bottom:16px;
}
.item-detail .id-body .id-scene .scene-label{font-size:.7rem;color:#999;margin-bottom:4px}
.item-detail .id-body .id-scene .scene-text{font-size:.82rem;color:#555;font-style:italic;line-height:1.6}
.item-detail .id-body .id-pairs{
  padding-top:14px;border-top:1.5px dashed #e5e7eb;
}
.item-detail .id-body .id-pairs .pairs-label{font-size:.7rem;color:#999;margin-bottom:8px}
.item-detail .id-body .id-pairs .pairs-list{display:flex;gap:8px;flex-wrap:wrap}

/* About page */
.about-page{padding:40px 20px;max-width:600px;margin:0 auto;color:white;text-align:center}
.about-page h1{font-family:'ZCOOL KuaiLe','Fredoka',sans-serif;font-size:2.2rem;margin-bottom:20px}
.about-page p{font-size:.9rem;line-height:1.8;color:rgba(255,255,255,.8);margin-bottom:12px}
.about-page .ymm-sig{margin-top:30px;font-size:.6rem;color:rgba(255,255,255,.4);letter-spacing:4px;font-family:Georgia,serif;font-style:italic}

/* ===== MM MASCOT ===== */
.mm-guide{
  position:fixed;bottom:72px;right:12px;z-index:99;cursor:pointer;transition:transform .3s;
}
.mm-guide:hover{transform:scale(1.08) rotate(-3deg)}
.mm-g-body{
  width:38px;height:42px;
  background:radial-gradient(circle at 38% 28%,#7986CB,#3949AB);
  border-radius:50% 50% 45% 45%;position:relative;
  box-shadow:0 3px 8px rgba(0,0,0,.2),inset 0 -3px 5px rgba(0,0,0,.1),inset 0 3px 6px rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
}
.mm-g-body::before{
  content:'';position:absolute;top:7px;left:9px;
  width:10px;height:6px;background:rgba(255,255,255,.2);
  border-radius:50%;transform:rotate(-20deg);
}
.mm-g-body .g-logo{
  font-size:.5rem;font-weight:800;color:white;
  font-family:Georgia,serif;font-style:italic;letter-spacing:-.3px;margin-top:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.mm-g-body .g-eyes{position:absolute;top:11px;display:flex;gap:5px}
.mm-g-body .g-eyes span{width:3px;height:3px;background:#1A237E;border-radius:50%}
.mm-g-hands{position:absolute;top:17px;left:0;right:0;pointer-events:none}
.mm-g-hands span{position:absolute;width:8px;height:7px;background:white;border-radius:40%}
.mm-g-hands .gl{left:-4px;transform:rotate(12deg)}
.mm-g-hands .gr{right:-4px;transform:rotate(-12deg)}
.mm-g-feet{position:absolute;bottom:-2px;display:flex;gap:6px}
.mm-g-feet div{width:7px;height:4px;background:#283593;border-radius:50%}
.mm-bubble{
  position:absolute;bottom:46px;right:0;
  background:white;border-radius:14px 14px 4px 14px;
  padding:6px 12px;font-size:.6rem;font-weight:500;color:#3949AB;
  white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.1);
  opacity:0;transform:translateY(6px);transition:all .3s;pointer-events:none;
}
.mm-bubble.show{opacity:1;transform:translateY(0)}

/* Nav bar */
.nav-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(0,0,0,.04);
  display:flex;justify-content:space-around;
  padding:4px 0 20px;z-index:50;
}
.nav-btn{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:.5rem;font-weight:500;color:#aaa;text-decoration:none;padding:3px 16px;
}
.nav-btn .nicon{font-size:1.3rem}
.nav-btn.active{color:#1565C0}

@media(min-width:500px){
  .item-grid-full{grid-template-columns:repeat(2,1fr)}
}