/* =========================================================
   和光 Heguang — 暗→亮主题(找光仔点亮世界)
   默认暗色;集齐光仔后 body.lit → 亮色糖果主题
   ========================================================= */
:root {
  /* 强调色(两个主题通用) */
  --sunny:#FFD45E; --coral:#FF7A8A; --sky:#5BC8FF; --mint:#7BE0B0; --grape:#7C6CF0;
  --font-display:"ZCOOL KuaiLe","Noto Sans SC",system-ui,sans-serif;
  --font-body:"Noto Sans SC",system-ui,-apple-system,sans-serif;
  --font-latin:"Fredoka",system-ui,sans-serif;

  /* 暗色主题(默认) */
  --bg:#141029; --bg-alt:#1b1640;
  --text:#F3F0FF; --text-soft:#ADA6D0;
  --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.08); --border:rgba(255,255,255,.12);
  --nav-bg:rgba(18,15,38,.72);
  --hero-bg:radial-gradient(120% 90% at 50% 0%, #241a4d 0%, #1a1438 45%, #120f28 100%);
  --shadow-soft:0 18px 40px -18px rgba(0,0,0,.5);
  --shadow-pop:0 24px 60px -20px rgba(124,108,240,.55);
}
body.lit {
  --bg:#FFFDF8; --bg-alt:#F7F4FF;
  --text:#2B2350; --text-soft:#6A638C;
  --surface:#ffffff; --surface-2:#fff; --border:#ECE9F8;
  --nav-bg:rgba(255,253,248,.72);
  --hero-bg:linear-gradient(170deg,#FFE9C7 0%,#FFE0E6 30%,#DCEBFF 66%,#E4FAEE 100%);
  --shadow-soft:0 18px 40px -18px rgba(43,35,80,.28);
  --shadow-pop:0 24px 60px -20px rgba(124,108,240,.4);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* 修复:class 的 display 不再覆盖 hidden 属性 */
html { scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body {
  margin:0; font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.7;
  -webkit-font-smoothing:antialiased; transition:background-color .9s ease, color .9s ease;
  overscroll-behavior-y:contain;   /* 手机:玩游戏时下滑不误触"下拉刷新"重载页面 */
}
h1,h2,h3 { margin:0; } a { color:inherit; }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.wrap { max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,32px); }
.wrap--center { text-align:center; }

.btn {
  display:inline-block; font-family:var(--font-display); font-size:17px; padding:13px 26px; border-radius:999px;
  border:none; cursor:pointer; text-decoration:none; transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background-color .9s, color .9s;
}
.btn--primary { color:#fff; background:linear-gradient(100deg,var(--grape),var(--coral)); box-shadow:var(--shadow-pop); }
.btn--ghost { color:var(--text); background:var(--surface); border:2px solid var(--border); box-shadow:var(--shadow-soft); }
.btn--lg { font-size:20px; padding:16px 34px; }
.btn:hover { transform:translateY(-3px) scale(1.03); }
.btn:active { transform:translateY(1px) scale(.96); }
.btn:focus-visible { outline:3px solid var(--grape); outline-offset:3px; }

/* 氛围:光标微光 + 光仔伙伴 + 招牌点亮 */
.glow {
  position:fixed; inset:0; z-index:60; pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,220,130,.65), transparent 70%);
  transition:opacity .4s ease;
}
#sprite { position:fixed; inset:0; z-index:61; pointer-events:none; }
#flash { position:fixed; inset:0; z-index:80; pointer-events:none; display:none; }
@media (hover:none){ .glow{ display:none; } }   /* #sprite 保留:用来在触屏上画"找到光仔"的粒子 */
/* 某个游戏正在玩(body.playing)时,营销文案淡成水印让位给游戏,且不再吃掉点击(桌面也生效);
   游戏结束(如弹球通关)去掉 playing → 文案淡回,首页恢复。桌面滚轮始终可向下滚动离开。 */
.hero__inner{ transition:opacity .6s ease; }
body.playing .hero__inner{ opacity:.3; pointer-events:none; }    /* 桌面:略清晰、仍可读 */
@media (hover:none){
  body.playing .hero__inner{ opacity:.16; }                      /* 手机:更淡 */
  body.playing .hero__sub, body.playing .hero__cta{ display:none; }
}
/* 光仔就是鼠标:隐藏系统指针 */
body.has-sprite, body.has-sprite a, body.has-sprite button, body.has-sprite .hidie, body.has-sprite #toy { cursor:none; }
/* 点亮后(亮色)不再需要光标微光 */
body.lit .glow { opacity:0 !important; }

/* 顶部导航 */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(16px,5vw,40px); background:var(--nav-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
  transition:background-color .9s, border-color .9s;
}
.nav__brand { display:flex; align-items:baseline; gap:9px; text-decoration:none; cursor:pointer; }
.nav__mark { width:24px; height:24px; border-radius:50%; align-self:center;
  background:radial-gradient(circle at 32% 30%,#fff 0 14%,var(--sunny) 38%,var(--coral) 100%);
  box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 16px -2px var(--sunny); animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.nav__name { font-family:var(--font-display); font-size:26px; line-height:1; color:var(--text); }
.nav__en { font-family:var(--font-latin); font-weight:600; letter-spacing:.16em; font-size:11px; color:var(--text-soft); }
.nav__links { display:flex; align-items:center; gap:clamp(10px,2.5vw,26px); }
.nav__links a { text-decoration:none; font-weight:700; font-size:15px; color:var(--text); transition:color .18s; }
.nav__links a:hover { color:var(--grape); }
.nav__sound { border:none; background:var(--surface-2); color:var(--text); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:15px; transition:transform .18s,background .18s; }
.nav__sound:hover { transform:scale(1.1); }
@media (max-width:560px){ .nav__en{display:none;} .nav__links{gap:13px;} .nav__links a{font-size:14px;} }

/* HERO */
.hero {
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:96px clamp(20px,5vw,40px) 72px; text-align:center; background:var(--hero-bg); transition:background .9s ease;
}
.hero__inner { max-width:860px; position:relative; z-index:2; }
/* 点亮后:Hero 物理沙池 */
#toy { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0; transition:opacity .8s ease .3s; }
body.lit #toy { pointer-events:auto; touch-action:none; opacity:1; }   /* 沙池:任意方向甩,不被翻页吞掉 */
.hero__eyebrow {
  display:inline-block; font-family:var(--font-latin); font-weight:600; letter-spacing:.05em; font-size:14px;
  color:var(--grape); background:var(--surface); padding:6px 16px; border-radius:999px; margin:0 0 18px;
}
.hero__title { font-family:var(--font-display); font-size:clamp(52px,10vw,108px); line-height:1.02; color:var(--text); }
body:not(.lit) .hero__title { text-shadow:0 0 26px rgba(124,108,240,.3); }
body.lit .hero__title { text-shadow:0 5px 0 rgba(255,255,255,.6); }
.hero__hl { background:linear-gradient(100deg,var(--coral),var(--grape) 55%,var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__title .ch { display:inline-block; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
/* "创造快乐"每个字各自带渐变裁剪:hover 变形也不会丢色消失 */
.hero__hl .ch { background:linear-gradient(120deg,var(--coral),var(--grape) 52%,var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__title .ch:hover { transform:translateY(-14px) rotate(-6deg) scale(1.12); }
.hero__sub { font-size:clamp(15px,2vw,19px); color:var(--text-soft); margin:24px auto 0; max-width:30em; }
.hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; justify-content:center; }
.hero__down {
  position:absolute; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:7; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none; font-size:19px; color:var(--grape);
  background:var(--surface); box-shadow:var(--shadow-soft); animation:floaty 2.6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}

/* 藏起来的光仔(暗色里发光,好看好找) */
.hidie {
  position:absolute; z-index:6; width:46px; height:46px; padding:0; border:none; background:none; cursor:pointer;
  opacity:.9; filter:drop-shadow(0 0 14px rgba(255,200,110,.85));
  animation:peek 3.2s ease-in-out infinite; transition:opacity .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
body.lit .hidie { filter:drop-shadow(0 6px 10px rgba(255,150,80,.4)); }
.hidie .lumi { width:100%; height:100%; display:block; }
.hidie:hover { opacity:1; transform:scale(1.2) rotate(-4deg); animation-play-state:paused; }
.hidie.found { animation:foundpop .6s cubic-bezier(.34,1.56,.64,1) forwards !important; pointer-events:none; }
/* 一圈圈波纹,暗示"点我" */
.hidie::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(255,205,110,.8); animation:ripple 1.9s ease-out infinite; pointer-events:none; }
.hidie.found::after { display:none; }
/* 第一个常驻轻跳;其余探头躲藏 */
@keyframes peek{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.hidie--peek { animation:peekaboo 4.6s ease-in-out infinite; }
@keyframes peekaboo{
  0%,5%{transform:scale(0) rotate(-24deg);opacity:0}
  15%{transform:scale(1.18) rotate(8deg);opacity:1}
  24%,78%{transform:scale(1) rotate(0);opacity:.96}
  92%,100%{transform:scale(0) rotate(22deg);opacity:0}
}
@keyframes ripple{0%{transform:scale(.7);opacity:0}25%{opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes foundpop{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(12deg)}100%{transform:scale(0) rotate(40deg);opacity:0}}

/* 彩蛋进度 */
.hunt {
  position:fixed; z-index:62; left:calc(24px + env(safe-area-inset-left)); bottom:calc(24px + env(safe-area-inset-bottom)); font-family:var(--font-display); font-size:15px; color:var(--text);
  background:var(--surface-2); border:2px solid var(--border); border-radius:999px; padding:9px 18px; box-shadow:var(--shadow-pop);
  backdrop-filter:blur(8px); animation:huntin .4s cubic-bezier(.34,1.56,.64,1);
}
.hunt b { color:var(--sunny); font-size:18px; }
.hunt--menu { cursor:pointer; user-select:none; transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
.hunt--menu:hover { transform:translateY(-2px) scale(1.04); }
@keyframes huntin{from{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:none}}
/* 玩法切换上拉菜单 */
.gamemenu { position:fixed; z-index:63; left:calc(24px + env(safe-area-inset-left)); bottom:calc(72px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:4px;
  padding:8px; border-radius:18px; background:var(--surface-2); border:2px solid var(--border);
  box-shadow:var(--shadow-pop); backdrop-filter:blur(10px); animation:huntin .25s cubic-bezier(.34,1.56,.64,1); }
.gamemenu button { font-family:var(--font-display); font-size:15px; color:var(--text); background:transparent; border:none;
  border-radius:12px; padding:10px 18px 10px 14px; text-align:left; cursor:pointer; white-space:nowrap; transition:background .15s; }
.gamemenu button:hover { background:rgba(124,108,240,.16); }

/* toast */
.toast {
  position:fixed; z-index:81; left:50%; top:22%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font-display); font-size:clamp(20px,4vw,30px); color:var(--text);
  background:var(--surface-2); border:2px solid var(--border); border-radius:999px; padding:14px 32px; box-shadow:var(--shadow-pop);
  backdrop-filter:blur(10px); pointer-events:none; animation:toastPop 2.6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes toastPop{0%{opacity:0;transform:translate(-50%,14px) scale(.7)}14%{opacity:1;transform:translate(-50%,0) scale(1)}84%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-18px) scale(.96)}}

/* 版块 */
.section { padding:clamp(72px,11vw,128px) 0; position:relative; overflow:hidden; transition:background-color .9s ease; }
.section--about,.section--contact { background:var(--bg); }
.section--games,.section--join { background:var(--bg-alt); }
.section--join, .section--contact { text-align:center; }
.eyebrow { display:inline-block; font-family:var(--font-display); font-size:15px; color:#fff; background:var(--c,var(--grape)); padding:5px 16px; border-radius:999px; margin:0 0 16px; }
.section__title { font-family:var(--font-display); font-size:clamp(30px,5.5vw,52px); line-height:1.1; margin-bottom:18px; color:var(--text); }
.section__lead { font-size:clamp(15px,2vw,18px); color:var(--text-soft); max-width:34em; margin:0 auto 0 0; }
.section--join .section__lead { margin:0 auto; }

.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:48px; }
.fact { background:var(--surface); border:2px solid var(--border); border-radius:24px; padding:28px; box-shadow:var(--shadow-soft); transition:transform .25s cubic-bezier(.34,1.56,.64,1), background-color .9s, border-color .9s; }
.fact:hover { transform:translateY(-8px) rotate(-1deg); border-color:color-mix(in srgb,var(--c) 55%,var(--border)); }
.fact__emoji { font-size:38px; }
.fact h3 { font-family:var(--font-display); font-size:21px; margin:12px 0 6px; color:var(--text); }
.fact p { font-size:15px; color:var(--text-soft); margin:0; }

.games { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; margin-top:48px; }
.game { position:relative; border-radius:26px; padding:30px; overflow:hidden;
  background:color-mix(in srgb,var(--c) 16%,var(--surface)); border:2px solid color-mix(in srgb,var(--c) 38%,var(--border));
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background-color .9s, border-color .9s; }
.game:hover { transform:translateY(-10px) rotate(-1.5deg); }
.game__art { font-size:52px; display:block; }
.game h3 { font-family:var(--font-display); font-size:22px; margin:16px 0 6px; color:var(--text); }
.game p { font-size:14px; color:var(--text-soft); margin:0 0 16px; }
.game__tag { font-family:var(--font-latin); font-weight:600; font-size:12px; color:#fff; background:var(--c); padding:4px 12px; border-radius:999px; }

.contact { list-style:none; padding:0; margin:44px auto 0; display:grid; gap:0; max-width:640px; text-align:left; }
.contact li { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:20px 4px; border-bottom:1.5px dashed var(--border); }
.contact span { color:var(--text-soft); font-size:16px; }
.contact a { color:var(--grape); font-weight:700; text-decoration:none; font-family:var(--font-latin); font-size:17px; }
.contact a:hover { text-decoration:underline; }
.contact i { color:var(--text-soft); font-style:normal; font-size:15px; }

.site-footer { position:relative; background:#0e0b20; color:rgba(255,255,255,.72); padding:32px 0; }
.site-footer__inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; }
.site-footer__brand { font-family:var(--font-latin); font-weight:500; font-size:14px; }
.site-footer__links { display:flex; flex-wrap:wrap; gap:20px; }
.site-footer__links a { color:rgba(255,255,255,.72); text-decoration:none; font-size:14px; transition:color .18s; }
.site-footer__links a:hover { color:#fff; text-decoration:underline; }
@media (max-width:560px){ .site-footer__inner{ justify-content:center; text-align:center; } }

/* 贪吃蛇 / 弹球:直接在 Hero 里玩(满屏画布,标题保持原样,像物理沙池) */
/* 游戏激活时画布吃掉触摸手势,专注玩、不误触翻页;离开用顶部导航或 ↓ 按钮 */
#playCv { position:absolute; inset:0; width:100%; height:100%; z-index:1; touch-action:none; cursor:none; }
.play-hud { position:absolute; top:78px; left:16px; right:16px; z-index:7; display:flex; gap:8px; pointer-events:none; }
.play-stat { font-family:var(--font-latin); font-weight:600; font-size:14px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:6px 14px; box-shadow:var(--shadow-soft); }
.play-stat b { color:var(--grape); font-size:17px; }
.play-stat--gold { margin-left:auto; }
.play-stat--gold b { color:#E8A21A; }
.play-hint { position:absolute; bottom:64px; left:50%; transform:translateX(-50%); z-index:7; pointer-events:none; white-space:nowrap; max-width:92vw; text-align:center;
  font-family:var(--font-display); font-size:14px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--border); padding:6px 16px; border-radius:999px; transition:opacity .4s; }
@media (max-width:560px){
  .play-hint{ white-space:normal; width:min(86vw,420px); line-height:1.45; bottom:calc(76px + env(safe-area-inset-bottom)); }
  .play-hud{ top:64px; gap:6px; }
  .play-stat{ font-size:12px; padding:5px 11px; }
  .play-stat b{ font-size:14px; }
}
.play-flash { position:absolute; inset:0; z-index:8; pointer-events:none; background:transparent; }
.play-flash.hit { animation:hitflash .5s ease; }
@keyframes hitflash { 0%{background:rgba(255,90,90,.4)} 100%{background:transparent} }

/* 滚动入场 */
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal]:nth-child(2){transition-delay:.06s}
[data-reveal]:nth-child(3){transition-delay:.12s}
[data-reveal]:nth-child(4){transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .glow,#sprite,#flash{display:none;}
  .nav__mark,.hero__down,.hidie{animation:none;}
  .hero__title .ch:hover{transform:none;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
}