/* ============================================================
   王同学的小乐园 · 满屏卡通主页（橙 × 绿）
   ============================================================ */
:root {
  --orange: #ff7a29;
  --orange-deep: #f05a1a;
  --orange-soft: #ffe8d6;
  --green: #35a85b;
  --green-deep: #2a8c49;
  --green-soft: #e3f4e8;
  --yellow: #ffc531;
  --cream: #fff7ea;
  --ink: #26332b;
  --muted: #6f7d73;
  --border: 3px solid var(--ink);
  --font-display: "Baloo 2", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 满屏：横竖都不滚动 */
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* iOS 壁纸式彩色光晕：玻璃材质的底色 */
  background:
    radial-gradient(46% 56% at 10% 6%, rgba(255, 122, 41, .38), transparent 72%),
    radial-gradient(42% 52% at 90% 10%, rgba(255, 197, 49, .42), transparent 72%),
    radial-gradient(52% 60% at 92% 90%, rgba(53, 168, 91, .38), transparent 74%),
    radial-gradient(44% 52% at 8% 94%, rgba(126, 217, 87, .30), transparent 72%),
    radial-gradient(36% 40% at 50% 45%, rgba(255, 154, 61, .14), transparent 75%),
    var(--cream);
  background-attachment: fixed;
}

/* 奶油底 + 方格本网格（像小学生的作业本） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(38, 51, 43, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 51, 43, .055) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* 颗粒噪点 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 60;
}

::selection { background: var(--orange); color: #fff; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px dashed var(--green); outline-offset: 3px; border-radius: 10px; }

/* ============ 背景装饰 ============ */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

#trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.sun { position: absolute; top: 3vh; left: 2.5vw; animation: floaty 7s ease-in-out infinite; filter: drop-shadow(0 10px 22px rgba(255, 176, 58, .45)); }
.sun-rays { transform-origin: 70px 70px; animation: spin 34s linear infinite; }
.sun-eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }

.cloud { position: absolute; animation: drift 30s linear infinite; filter: drop-shadow(0 12px 20px rgba(38, 51, 43, .12)); }
.cloud-1 { top: 9vh; right: 24vw; }
.cloud-2 { top: 34vh; left: -130px; animation-duration: 42s; animation-delay: -20s; }
.cloud-3 { top: 62vh; left: -90px; animation-duration: 36s; animation-delay: -9s; }

.star { position: absolute; animation: twinkle 3.2s ease-in-out infinite; }
.star-1 { top: 22vh; right: 6vw; }
.star-2 { top: 52vh; left: 6vw; animation-delay: -1.2s; }
.star-3 { top: 38vh; right: 30vw; animation-delay: -2.1s; }

.bee { position: absolute; top: 30vh; left: 0; animation: flyX 22s linear infinite; }
.butterfly { position: absolute; top: 58vh; left: 0; animation: flyX 30s linear infinite; animation-delay: -14s; }
.bee-bob { display: inline-block; font-size: 26px; animation: bob 1.6s ease-in-out infinite; }
.butterfly .bee-bob { font-size: 22px; animation-duration: 2.1s; }

/* ============ 满屏骨架 ============ */
.page {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.4vmin, 16px);
  padding: clamp(10px, 2.4vmin, 26px) clamp(14px, 3vw, 34px);
  max-width: 1180px;
  margin: 0 auto;
}

/* ---- 顶部：小猫 + 气泡 ---- */
.hero {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.6vmin, 18px);
}

.mascot {
  flex: none;
  width: clamp(96px, 17vmin, 168px);
  animation: popIn .6s cubic-bezier(.22, 1.2, .36, 1.25) both;
}
.mascot svg { display: block; width: 100%; height: auto; }
.paw-wave { transform-origin: 100px 66px; animation: wave 1.8s ease-in-out infinite; }
.head { animation: headTilt 5s ease-in-out infinite; transform-origin: 70px 60px; }
.eye { transform-box: fill-box; transform-origin: center; animation: blink 4.2s infinite; }
.mascot.jump .head { animation: jump .55s cubic-bezier(.3, 1.6, .5, 1); }
.mascot.jump .paw-wave { animation: wave .3s ease-in-out 3; }

.bubble-wrap {
  flex: 1;
  min-width: 0;
  animation: popIn .6s cubic-bezier(.22, 1.2, .36, 1.25) .12s both;
}

.bubble {
  position: relative;
  display: inline-block;
  max-width: 100%;
  background: linear-gradient(165deg, rgba(255, 255, 255, .64) 0%, rgba(255, 255, 255, .30) 60%, rgba(255, 232, 214, .28) 150%);
  backdrop-filter: blur(22px) saturate(1.75);
  -webkit-backdrop-filter: blur(22px) saturate(1.75);
  border-radius: 26px;
  padding: clamp(8px, 1.6vmin, 16px) clamp(14px, 2.2vmin, 22px) clamp(8px, 1.5vmin, 14px);
  box-shadow:
    inset 0 0 0 1.4px rgba(255, 255, 255, .72),
    inset 0 2px 1px rgba(255, 255, 255, .95),
    0 16px 34px -14px rgba(255, 197, 49, .5),
    0 24px 44px -20px rgba(38, 51, 43, .28);
  animation: floaty 5s ease-in-out infinite;
}
.bubble-tail {
  position: absolute;
  left: -18px;
  bottom: 8px;
  transform: rotate(-8deg);
}
.bubble-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 4vmin, 36px);
  line-height: 1.15;
  text-shadow: 3px 3px 0 rgba(255, 122, 41, .25);
}
.hl-orange { color: var(--orange-deep); }
.bubble-sub {
  margin-top: 2px;
  font-weight: 700;
  font-size: clamp(12px, 2vmin, 17px);
  color: var(--muted);
}

.badge-fun {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  color: var(--ink);
  background: var(--yellow);
  clip-path: polygon(50% 0, 61% 12%, 76% 6%, 78% 22%, 94% 26%, 86% 40%, 98% 50%, 86% 60%, 94% 74%, 78% 78%, 76% 94%, 61% 88%, 50% 100%, 39% 88%, 24% 94%, 22% 78%, 6% 74%, 14% 60%, 2% 50%, 14% 40%, 6% 26%, 22% 22%, 24% 6%, 39% 12%);
  animation: spinSlow 9s linear infinite;
}

/* ---- 中间：糖果按钮 ---- */
.links {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(8px, 1.8vmin, 18px);
}

.card {
  --accent: var(--orange);
  --tint: var(--orange-soft);
  --tint-a: rgba(255, 232, 214, .30);
  --glow: rgba(255, 122, 41, .38);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1vmin, 10px);
  background: linear-gradient(165deg, rgba(255, 255, 255, .60) 0%, rgba(255, 255, 255, .22) 52%, var(--tint-a) 140%);
  backdrop-filter: blur(22px) saturate(1.75);
  -webkit-backdrop-filter: blur(22px) saturate(1.75);
  border-radius: clamp(24px, 4.5vmin, 38px);
  padding: clamp(10px, 2vmin, 22px) clamp(14px, 2.4vmin, 26px);
  box-shadow:
    inset 0 0 0 1.4px rgba(255, 255, 255, .72),
    inset 0 2px 1px rgba(255, 255, 255, .95),
    inset 0 -10px 18px -12px rgba(38, 51, 43, .10),
    0 18px 38px -14px var(--glow),
    0 26px 48px -20px rgba(38, 51, 43, .30),
    0 3px 8px rgba(38, 51, 43, .10);
  animation: popIn .6s cubic-bezier(.22, 1.2, .36, 1.25) backwards;
  animation-delay: calc(.2s + var(--i, 0) * .07s);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s, filter .35s;
}
.card:nth-child(even) {
  --accent: var(--green);
  --tint: var(--green-soft);
  --tint-a: rgba(227, 244, 232, .30);
  --glow: rgba(53, 168, 91, .38);
}

/* 悬停时淡淡的彩色晕染 */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .35), var(--accent) 140%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.card:hover::before { opacity: .10; }

.card:hover {
  transform: translateY(-5px) scale(1.025);
  filter: brightness(1.05) saturate(1.1);
  box-shadow:
    inset 0 0 0 1.4px rgba(255, 255, 255, .85),
    inset 0 2px 1px rgba(255, 255, 255, 1),
    inset 0 -10px 18px -12px rgba(38, 51, 43, .10),
    0 24px 48px -14px var(--glow),
    0 34px 60px -20px rgba(38, 51, 43, .34),
    0 3px 8px rgba(38, 51, 43, .10);
}

.card:active, .card.squish { animation: squish .4s cubic-bezier(.3, 1.6, .5, 1); }

/* 图标：玻璃果冻 + 旋转虚线光环 */
.card-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(46px, 9vmin, 84px);
  height: clamp(46px, 9vmin, 84px);
  margin-bottom: clamp(2px, .6vmin, 8px);
  font-size: clamp(26px, 5.4vmin, 48px);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, .82) 6%, var(--tint-a) 120%);
  box-shadow:
    inset 0 0 0 1.2px rgba(255, 255, 255, .85),
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    0 6px 14px -6px rgba(38, 51, 43, .28);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
}
.card-icon::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2.5px dashed var(--accent);
  border-radius: 50%;
  opacity: .38;
  animation: spinSlow 26s linear infinite;
  pointer-events: none;
}
.card:hover .card-icon {
  transform: rotate(-12deg) scale(1.12);
  box-shadow:
    inset 0 0 0 1.2px rgba(255, 255, 255, 1),
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    0 10px 20px -6px var(--glow);
}

.card-body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1px, .4vmin, 4px);
}

.card b {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 3vmin, 27px);
  letter-spacing: .02em;
}
/* 标题下的彩色小横条 */
.card b::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  translate: -50% 0;
  width: 0;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--yellow));
  transition: width .35s cubic-bezier(.34, 1.56, .64, 1);
}
.card:hover b::after { width: 62%; }

.card small {
  font-weight: 700;
  font-size: clamp(10px, 1.8vmin, 15px);
  letter-spacing: .04em;
  color: var(--muted);
}

/* 右下角小箭头：悬停变身 */
.card-go {
  position: absolute;
  right: clamp(10px, 1.8vmin, 18px);
  bottom: clamp(10px, 1.8vmin, 18px);
  display: grid;
  place-items: center;
  width: clamp(30px, 5vmin, 42px);
  height: clamp(30px, 5vmin, 42px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 2.6vmin, 22px);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  opacity: .3;
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
}
.card:hover .card-go {
  opacity: 1;
  background: var(--accent);
  color: #fff;
  transform: rotate(-45deg) scale(1.12);
}

.sticker {
  position: absolute;
  top: -12px;
  right: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(10px, 1.6vmin, 13px);
  letter-spacing: 1px;
  color: #fff;
  background: var(--green);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 11px;
  transform: rotate(6deg);
  animation: wiggle 3s ease-in-out infinite;
}

/* ---- 底部：草地 ---- */
.ground { flex: none; position: relative; margin: 0 calc(clamp(14px, 3vw, 34px) * -1); }

.hill {
  position: relative;
  height: clamp(40px, 7.5vmin, 72px);
  filter: drop-shadow(0 -10px 26px rgba(42, 140, 73, .32));
}
.hill svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flower {
  position: absolute;
  bottom: 4px;
  font-size: clamp(15px, 3vmin, 26px);
  animation: sway 3.4s ease-in-out infinite;
  transform-origin: bottom center;
  filter: drop-shadow(0 3px 5px rgba(38, 51, 43, .22));
}
.f1 { left: 6%;  font-size: clamp(18px, 3.6vmin, 32px); }
.f2 { left: 18%; animation-delay: -.8s; scale: .85; }
.f3 { right: 26%; animation-delay: -1.6s; }
.f4 { right: 10%; animation-delay: -2.4s; font-size: clamp(18px, 3.6vmin, 32px); }
.f5 { left: 40%; animation-delay: -1.2s; scale: .8; }
.f6 { right: 38%; animation-delay: -2.9s; scale: .75; }

.hill-spark {
  position: absolute;
  left: 56%;
  bottom: 64px;
  font-size: clamp(14px, 2.6vmin, 22px);
  animation: twinkle 2.6s ease-in-out infinite;
}

/* ============ 动画 ============ */
@keyframes popIn {
  from { opacity: 0; transform: translateY(22px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes drift {
  from { transform: translateX(-14vw); }
  to   { transform: translateX(114vw); }
}
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(.6) rotate(20deg); opacity: .5; }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(6deg); }
  50% { transform: rotate(-6deg) scale(1.07); }
}
@keyframes wave {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(-26deg); }
}
@keyframes headTilt {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-4deg); }
  70% { transform: rotate(3deg); }
}
@keyframes jump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-12px) rotate(-5deg); }
  100% { transform: translateY(0); }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.08); }
}
@keyframes flyX {
  from { transform: translateX(-8vw); }
  to   { transform: translateX(108vw); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes squish {
  0% { transform: scale(1, 1); }
  35% { transform: scale(1.08, .88); }
  65% { transform: scale(.96, 1.05); }
  100% { transform: scale(1, 1); }
}

/* ============ 响应式 ============ */
/* 竖屏 / 窄屏：卡片 2 列 3 行 */
@media (max-aspect-ratio: 4/5) {
  .links { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .cloud-1 { right: 34vw; }
}

/* 很扁的屏幕：压缩装饰 */
@media (max-height: 480px) {
  .bee, .butterfly { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}