/* 首页（幼儿园版）：只有标题、序号、图片和城市名 */
html, body { overflow: auto; height: auto; touch-action: auto; }
body { min-height: 100vh; background: url(../assets/gen/bg-a2.jpg) center / cover fixed; }
.wrap { position: relative; max-width: 1240px; margin: 0 auto; padding: 40px 32px 56px; }
.hero { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 30px; }
.hero img { width: 200px; filter: drop-shadow(0 18px 24px rgba(60, 40, 20, .25)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
.hero h1 { margin: 0; font-size: 72px; letter-spacing: .14em; text-shadow: 0 4px 0 #fff, 0 10px 24px rgba(90, 60, 30, .18); }

.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.act { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 420px; text-decoration: none; color: var(--ink);
  border-radius: 40px; padding: 40px 28px 34px;
  background: linear-gradient(180deg, rgba(255, 252, 244, .96), rgba(248, 237, 214, .96)); border: 3px solid rgba(255, 255, 255, .8);
  box-shadow: 0 24px 50px rgba(70, 45, 20, .18), 0 0 0 1px rgba(90, 60, 30, .1); }
a.act { transition: transform .25s, box-shadow .25s; }
a.act:hover, a.act:active { transform: translateY(-6px); box-shadow: 0 32px 60px rgba(70, 45, 20, .24), 0 0 0 1px rgba(90, 60, 30, .1); }
/* 大序号 */
.act .no { position: absolute; left: 22px; top: -22px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font-size: 46px; font-weight: 900; color: #fff; background: radial-gradient(circle at 35% 30%, #f0603f, var(--cinnabar) 60%, var(--cinnabar-deep));
  border: 5px solid #fff; box-shadow: 0 8px 18px rgba(169, 44, 24, .35); }
.act .kg { width: 170px; filter: drop-shadow(0 8px 10px rgba(60, 40, 20, .18)); }
.act .pics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; width: 100%; }
.act .pics img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(60, 40, 20, .16)); }
.act .go.play { width: 120px; height: 84px; border-radius: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z' fill='%23fff'/%3E%3C/svg%3E") center / 46px no-repeat, linear-gradient(180deg, #4fd394, var(--jade) 60%, #26965f);
  box-shadow: 0 7px 0 var(--jade-deep); }
/* 活动二：四个卡通形象，点哪个就进哪个组 */
.mascots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.mascots a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 14px; border-radius: 26px; text-decoration: none; color: var(--c);
  background: #fffdf8; border: 3px solid rgba(63, 44, 29, .06); box-shadow: 0 6px 0 #e3d3b2, 0 10px 18px rgba(90, 60, 30, .12); transition: transform .15s; }
.mascots a:hover, .mascots a:active { transform: translateY(-4px); border-color: var(--c); }
.mascots img { width: 140px; height: 140px; object-fit: contain; }
.mascots b { font-size: 26px; letter-spacing: .12em; }
/* 老师入口：右上角一枚小印章，孩子一般不会点 */
.teacher-entry { position: absolute; right: 32px; top: 40px; width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; text-align: center;
  font-size: 18px; font-weight: 900; line-height: 1.05; color: #fff4ec; text-decoration: none; opacity: .8;
  background: radial-gradient(circle at 30% 25%, #f0603f, var(--cinnabar) 55%, var(--cinnabar-deep)); border: 3px solid #fff3ea; box-shadow: 0 0 0 2px var(--cinnabar); transform: rotate(-6deg); }
.teacher-entry:hover { opacity: 1; }
@media (max-width: 960px) { .acts { grid-template-columns: 1fr; } .hero h1 { font-size: 48px; } .hero img { width: 130px; } .teacher-entry { top: 16px; right: 16px; } }

/* 活动 1、2 上下排列，每个占一整行，避免小朋友左右乱点 */
.wrap { max-width: 1100px; }
.hero { margin-bottom: 26px; }
.hero img { width: 150px; }
.hero h1 { font-size: 60px; }
.acts { grid-template-columns: 1fr; gap: 34px; }
.act { flex-direction: row; min-height: 0; padding: 26px 40px 26px 110px; gap: 28px; justify-content: space-between; }
.act .no { left: -18px; top: 50%; margin-top: -38px; }
.act .kg { width: 150px; flex: none; }
.act .pics { flex: 1; width: auto; }
.act .go.play { flex: none; }
.mascots { grid-template-columns: repeat(4, 1fr); }
.mascots img { width: 120px; height: 120px; }
@media (max-width: 960px) { .act { flex-direction: column; padding: 40px 24px 28px; } .act .no { left: 22px; top: -22px; margin-top: 0; } .mascots { grid-template-columns: 1fr 1fr; } }