/* ================= Hero ================= */
.hero { padding: 80px 0 90px; position: relative; overflow: hidden; }

.doodle { position: absolute; font-size: 30px; opacity: .9; animation: bob 3.5s ease-in-out infinite; pointer-events: none; user-select: none; }
.d-1 { top: 14%; left: 6%; animation-delay: 0s; }
.d-2 { top: 10%; right: 10%; animation-delay: .6s; font-size: 40px; }
.d-3 { bottom: 18%; left: 3%; animation-delay: 1.2s; font-size: 36px; }
.d-4 { bottom: 10%; right: 4%; animation-delay: .3s; }
.d-5 { top: 45%; left: 12%; animation-delay: 1.8s; font-size: 24px; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 46px; align-items: center; position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal-bg); border: 3px solid var(--line);
  border-radius: 999px; padding: 5px 16px;
  font-size: 14px; font-weight: 800;
  box-shadow: 4px 4px 0 var(--shadow);
  margin-bottom: 22px; transform: rotate(-2deg);
}
.hero-badge::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); border: 2px solid var(--line);
  animation: blink 1.6s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.hero h1 {
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.25; letter-spacing: 1px;
  margin-bottom: 10px; font-weight: 400;
}
.hl {
  background: linear-gradient(102deg, transparent 0.5%, var(--hl) 4%, var(--hl) 96%, transparent 99%);
  padding: 0 .25em; border-radius: 6px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero .role {
  font-size: 20px; font-weight: 700; color: var(--text-2);
  margin-bottom: 18px;
}
.hero .role .tag-inline {
  background: var(--purple-bg); border: 2px solid var(--line); border-radius: 8px;
  padding: 1px 10px; font-size: 15px; display: inline-block; transform: rotate(-1deg);
}
.hero .desc { color: var(--text-2); font-size: 16px; max-width: 520px; margin-bottom: 30px; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-row .btn:nth-child(2) { transform: rotate(-1.5deg); }

/* 拍立得卡片堆 */
.polaroids { position: relative; height: 400px; }
.pol {
  position: absolute; width: 218px;
  background: var(--paper);
  border: 3px solid var(--line); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 12px 12px 10px;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
}
.pol:hover { z-index: 10 !important; transform: rotate(0deg) scale(1.08) !important; }
.pol .pol-img {
  height: 150px; border: 2px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
}
.pol .pol-cap { font-size: 14px; text-align: center; font-weight: 700; padding-top: 8px; font-family: "ZCOOL KuaiLe", sans-serif; }
.pol-1 { top: 8px; right: 160px; transform: rotate(-8deg); background: var(--paper); z-index: 1; }
.pol-2 { top: 90px; right: 30px; transform: rotate(5deg); z-index: 3; }
.pol-2 .pol-img { background: var(--yellow-bg); }
.pol-3 { top: 170px; right: 190px; transform: rotate(-3deg); z-index: 2; }
.pol-3 .pol-img { background: var(--pink-bg); }

/* 旋转徽章 */
.spin-badge {
  position: absolute; top: -34px; right: 0; z-index: 5;
  width: 112px; height: 112px; pointer-events: none;
}
.spin-badge svg { width: 100%; height: 100%; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin-badge .center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}

/* ================= 跑马灯 ================= */
.marquee {
  background: var(--invert-bg); color: var(--invert-fg);
  border-top: 3px solid var(--line); border-bottom: 3px solid var(--line);
  overflow: hidden; padding: 10px 0;
  transform: rotate(-1deg) scale(1.02);
}
.marquee-track {
  display: flex; width: max-content;
  animation: scrollX 22s linear infinite;
  font-family: "ZCOOL KuaiLe", sans-serif;
  font-size: 17px; letter-spacing: 2px; white-space: nowrap;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ================= 数据统计(不正经版) ================= */
.stats-wrap { padding: 70px 0 10px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  text-align: center; padding: 24px 16px 18px;
  background: var(--paper);
  border: 3px solid var(--line); border-radius: 20px;
  box-shadow: 6px 6px 0 var(--shadow);
  transition: transform .2s ease;
}
.stat:hover { transform: translate(-2px,-2px) rotate(-2deg); }
.stat .emoji { font-size: 34px; display: block; margin-bottom: 4px; }
.stat .num-row { font-size: 34px; font-weight: 800; font-family: "Baloo 2", sans-serif; line-height: 1.2; }
.stat .num-row .unit { font-size: 16px; }
.stat:nth-child(1) .num-row { color: var(--pink); }
.stat:nth-child(2) .num-row { color: var(--purple); }
.stat:nth-child(3) .num-row { color: var(--teal); }
.stat:nth-child(4) .num-row { color: var(--orange); }
.stat .label { font-size: 14px; color: var(--text-2); font-weight: 700; }

/* ================= 区块通用 ================= */
section { padding: 84px 0; position: relative; }
.sec-cream { background: var(--cream); }
.sec-yellow { background: var(--yellow-bg); }
.sec-teal { background: var(--teal-bg); }
.sec-pink { background: var(--pink-bg); }

.section-head { text-align: center; margin-bottom: 46px; }
.section-head .tag {
  display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: 3px;
  background: var(--paper); border: 3px solid var(--line); border-radius: 999px;
  padding: 3px 18px; box-shadow: 4px 4px 0 var(--shadow);
  transform: rotate(-2deg); margin-bottom: 16px;
  font-family: "Baloo 2", sans-serif;
}
.section-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 400; letter-spacing: 2px; }
.wave-line {
  height: 10px; width: 150px; margin: 10px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 5 Q 7 0 14 5 T 28 5' fill='none' stroke='%23ff6b9d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
}

/* ================= 关于 ================= */
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: start; }
.about-card { padding: 30px 32px; transform: rotate(-.6deg); }
.about-card p { color: var(--text-2); margin-bottom: 14px; font-size: 16px; }
.about-card p:last-child { margin-bottom: 0; }
.about-card strong { color: var(--ink); }
.sticker-word {
  display: inline-block; padding: 0 8px; border-radius: 8px;
  border: 2px solid var(--line); font-size: 14px; font-weight: 800;
  transform: rotate(-2deg); margin: 0 2px;
  font-family: "Baloo 2", sans-serif;
}
.sw-pink { background: var(--pink); color: var(--on-accent); }
.sw-yellow { background: var(--yellow); }
.sw-teal { background: var(--teal); color: var(--on-accent); }

.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-card {
  text-align: center; padding: 20px 12px 16px;
  background: var(--paper); border: 3px solid var(--line); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--shadow); transition: transform .2s ease;
}
.info-card:hover { transform: rotate(2deg) scale(1.04); }
.info-card:nth-child(2n):hover { transform: rotate(-2deg) scale(1.04); }
.info-card .ic { font-size: 32px; display: block; margin-bottom: 6px; }
.info-card .k { font-size: 12px; color: var(--text-3); font-weight: 800; letter-spacing: 1px; }
.info-card .v { font-size: 16px; font-weight: 800; font-family: "ZCOOL KuaiLe", sans-serif; }

/* ================= 技能 ================= */
.skills-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.skill-col { padding: 28px 30px; }
.skill-col.col-a { transform: rotate(-.8deg); }
.skill-col.col-b { transform: rotate(.8deg); background: var(--paper-warm); }
.skill-col h3 {
  font-size: 22px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px;
  font-weight: 400;
}
.skill-col .sub { font-size: 13px; color: var(--text-3); font-weight: 700; margin-bottom: 22px; }

.skillbar { margin-bottom: 22px; }
.skillbar:last-child { margin-bottom: 0; }
.skillbar-top { display: flex; justify-content: space-between; font-weight: 800; font-size: 15px; margin-bottom: 6px; font-family: "Baloo 2", sans-serif; }
.skillbar-top .pct { color: var(--text-3); }
.bar {
  height: 20px; border: 3px solid var(--line); border-radius: 999px;
  background: var(--bar-bg); overflow: hidden;
  box-shadow: inset 3px 3px 0 var(--bar-inset);
}
.fill {
  height: 100%; width: 0; border-radius: 999px;
  transition: width 1.3s cubic-bezier(.22,1,.36,1);
  background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%);
  background-size: 16px 16px;
  animation: stripes 1s linear infinite;
}
@keyframes stripes { to { background-position: 16px 0; } }
.skillbar.visible .fill { width: var(--w); }
.f-pink { background-color: var(--pink); }
.f-yellow { background-color: var(--yellow); }
.f-teal { background-color: var(--teal); }
.f-purple { background-color: var(--purple); }
.f-orange { background-color: var(--orange); }
.f-blue { background-color: var(--blue); }
/* v3.1.2:吐槽小字从 --text-4 提到 --text-3——暗色下 text-4 只有 3.4:1,
   12px 小字读着费眼;text-3(说明文字)语义也更贴 */
.skillbar .note { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ================= 作品 ================= */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.work-card { display: flex; flex-direction: column; overflow: hidden; }
.work-card:nth-child(3n+1) { transform: rotate(-1.2deg); }
.work-card:nth-child(3n+2) { transform: rotate(.9deg); }
.work-card:nth-child(3n) { transform: rotate(-.5deg); }
.work-cover {
  height: 130px; border-bottom: 3px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
}
/* v2.1:封面底色键与 API/后台下拉一致(pink/yellow/teal/purple/orange/blue) */
.wc-pink   { background: var(--pink-bg); }
.wc-yellow { background: var(--yellow-bg); }
.wc-teal   { background: var(--teal-bg); }
.wc-purple { background: var(--purple-bg); }
.wc-orange { background: var(--orange-bg); }
.wc-blue   { background: var(--blue-bg); }
.work-body { padding: 18px 20px 16px; flex: 1; display: flex; flex-direction: column; }
.work-body h3 { font-size: 19px; margin-bottom: 6px; font-weight: 400; }
.work-body p { font-size: 14px; color: var(--text-2); flex: 1; }
.work-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--line);
}
.work-pill {
  font-size: 12px; font-weight: 800; border: 2px solid var(--line);
  border-radius: 999px; padding: 2px 12px; background: var(--yellow);
  font-family: "Baloo 2", sans-serif;
}
.work-meta .link { font-size: 14px; font-weight: 700; color: var(--pink); text-decoration: none; font-family: "Baloo 2", sans-serif; }
.work-meta .link:hover { text-decoration: underline wavy; }

/* ================= 校园时间线 ================= */
.timeline { position: relative; max-width: 680px; margin: 0 auto; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px;
  border-left: 4px dashed var(--line); opacity: .35;
}
.tl-item { position: relative; padding: 0 0 34px 22px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: attr(data-emoji);
  position: absolute; left: -34px; top: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; z-index: 2;
}
.tl-card { padding: 16px 22px; display: inline-block; }
.tl-item:nth-child(odd) .tl-card { transform: rotate(-.7deg); }
.tl-item:nth-child(even) .tl-card { transform: rotate(.7deg); }
.tl-card .time {
  display: inline-block; font-size: 13px; font-weight: 800;
  background: var(--invert-bg); color: var(--invert-fg);
  padding: 2px 12px; border-radius: 999px; margin-bottom: 6px;
  font-family: "Baloo 2", sans-serif;
}
.tl-card h3 { font-size: 19px; margin-bottom: 2px; font-weight: 400; }
.tl-card p { font-size: 14px; color: var(--text-2); }

/* ================= 联系 ================= */
.contact-card {
  text-align: center; padding: 60px 36px;
  background: var(--paper);
  border: 4px solid var(--line); border-radius: 28px;
  box-shadow: 10px 10px 0 var(--pink-shadow);
  position: relative;
}
.contact-card .sticker {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  background: var(--yellow); border: 3px solid var(--line); border-radius: 999px;
  padding: 6px 24px; font-size: 16px; font-weight: 800;
  box-shadow: 4px 4px 0 var(--shadow); white-space: nowrap;
  font-family: "ZCOOL KuaiLe", sans-serif;
}
.contact-card h2 { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 10px; font-weight: 400; }
.contact-card h2 .wave-hand { display: inline-block; animation: wave 1.8s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(18deg); }
  20%, 40% { transform: rotate(-10deg); }
}
.contact-card p { color: var(--text-2); margin-bottom: 30px; font-size: 16px; }
.contact-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.contact-actions .btn:nth-child(odd) { transform: rotate(-2deg); }
.contact-actions .btn:nth-child(even) { transform: rotate(2deg); }
.contact-actions .btn:hover { transform: translate(-2px,-2px) rotate(0deg); }

/* ================= 多页结构 ================= */
/* 子页面的首屏区块:导航下面留出呼吸空间 */
.page-head { padding-top: 110px; }

/* 首页「窝里有什么」引导卡片 */
.home-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-link { display: block; text-decoration: none; text-align: center; padding: 30px 22px; transition: all .18s ease; }
.home-link:hover { transform: translate(-3px,-3px) rotate(-1deg); box-shadow: 8px 8px 0 var(--shadow); }
.home-link .hl-emoji { font-size: 44px; display: block; margin-bottom: 12px; }
.home-link h3 { font-size: 20px; font-weight: 400; margin-bottom: 6px; color: var(--ink); }
.home-link p { font-size: 13px; color: var(--text-2); }

/* 作品页说明文字 */
.works-note { text-align: center; color: var(--text-2); margin: -28px 0 34px; font-size: 14px; }

/* ================= 来访地图页 ================= */
.map-head { text-align: center; margin-bottom: 34px; position: relative; }
.map-head .sticker {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  background: var(--yellow); border: 3px solid var(--line); border-radius: 999px;
  padding: 5px 22px; font-size: 15px; font-weight: 800;
  box-shadow: 4px 4px 0 var(--shadow); white-space: nowrap;
  font-family: "ZCOOL KuaiLe", sans-serif;
}
.map-head h2 { font-size: clamp(24px, 3.2vw, 36px); font-weight: 400; margin-bottom: 8px; }
.map-head p { color: var(--text-2); font-size: 15px; }
.map-head p b { color: var(--pink); }

.map-card {
  display: grid; grid-template-columns: 1fr 280px; gap: 26px; align-items: stretch;
  background: var(--paper); border: 4px solid var(--line); border-radius: 28px;
  box-shadow: 10px 10px 0 var(--yellow-shadow);
  padding: 24px;
}
.world-map { width: 100%; height: auto; display: block; }
.map-sea { color: var(--text-2); }
.map-star { cursor: pointer; transform-box: fill-box; transform-origin: center; animation: twinkle 2.2s ease-in-out infinite; }
.map-star:hover { transform: scale(1.35) rotate(15deg); }
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.map-side {
  border-left: 3px dashed var(--line); padding-left: 22px;
  display: flex; flex-direction: column; min-height: 300px;
}
.map-side h3 { font-size: 18px; font-weight: 400; margin-bottom: 14px; }
.city-list { list-style: none; overflow-y: auto; max-height: 420px; padding-right: 6px; }
.city-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 4px; border-bottom: 2px dotted var(--line);
  font-size: 14px;
}
.city-item .city-star { font-size: 15px; }
.city-item .city-name { flex: 1; font-weight: 700; color: var(--ink); }
.city-item .city-count { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.city-empty { color: var(--text-2); font-size: 14px; padding: 24px 8px; text-align: center; }
.city-unknown .city-name { font-size: 13px; }

/* 地图页导航高亮(active 样式在 base.css 通用) */

/* ================= v2.2 荣誉墙(about 页) ================= */
.honor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
}
.honor-card {
  background: var(--paper); border: 3px solid var(--line); border-radius: 16px;
  padding: 16px 18px; box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.honor-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.honor-top { display: flex; justify-content: space-between; align-items: center; }
.honor-emoji { font-size: 30px; }
.honor-level {
  font-size: 11px; font-weight: 800; padding: 2px 10px;
  border-radius: 999px; border: 2px solid var(--line);
}
/* 等级色:国家级金 / 省级粉 / 校级蓝灰 / 其他灰 */
.hl-national  .honor-level { background: var(--yellow); }
.hl-provincial .honor-level { background: var(--pink); color: var(--on-accent); }
.hl-school    .honor-level { background: var(--blue-bg); }
.hl-other     .honor-level { background: var(--cream); }
.honor-year { font-size: 12px; color: var(--text-3); font-weight: 700; margin-top: 8px; }
.honor-title { font-size: 16px; font-weight: 400; margin-top: 2px; }
.honor-desc { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* ================= v2.2 随手记(campus 页) ================= */
.note-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
}
.note-card {
  --rot: 0deg;
  background: #fff; border: 2px solid var(--shadow); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--shadow); padding: 14px 16px;
  transform: rotate(var(--rot)); position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.note-card:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 6px 7px 0 var(--shadow); }
/* 六色便签底(与留言墙同族) */
.note-teal   { background: #e2f4f0; }
.note-pink   { background: #ffe9f0; }
.note-yellow { background: #fff7d6; }
.note-purple { background: #eceaff; }
.note-blue   { background: #e3eeff; }
.note-orange { background: #ffefd9; }
.note-emoji { font-size: 22px; }
.note-text { font-size: 14px; line-height: 1.65; margin-top: 6px; word-break: break-word; }
.note-date { font-size: 11px; opacity: .55; display: block; margin-top: 8px; text-align: right; }

/* ================= v2.2 友情链接(contact 页) ================= */
.friend-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; max-width: 780px; margin: 0 auto;
}
.friend-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 3px solid var(--line); border-radius: 16px;
  padding: 14px 16px; text-decoration: none; color: var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.friend-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.friend-emoji { font-size: 26px; flex: 0 0 auto; }
.friend-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.friend-name { font-size: 15px; }
.friend-desc {
  font-size: 12px; color: var(--text-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.friend-go { font-weight: 800; color: var(--pink); flex: 0 0 auto; }

/* ================= v2.4 最近在听(about 页) ================= */
.music-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
}
.music-card {
  background: var(--paper); border: 3px solid var(--line); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--shadow); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.music-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.music-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; }
.music-emoji { font-size: 26px; flex: 0 0 auto; }
.music-meta { flex: 1; min-width: 0; }
.music-title {
  font-size: 15px; font-weight: 800; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-artist {
  font-size: 12px; color: var(--text-2); display: block; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-note {
  font-size: 12px; color: var(--text-2); padding: 0 16px 10px;
  border-top: 2px dashed var(--line); margin: 0 16px; padding-top: 8px;
}
.music-frame {
  width: 100%; height: 96px; border: 0; display: block;
  border-top: 2px solid var(--line); background: #fff;
}
.music-tip {
  font-size: 12px; color: var(--text-3); text-align: center;
  margin-top: 14px; line-height: 1.7;
}