:root{
  --pink:#FF6FAE;
  --pink-hot:#FF2E88;
  --pink-deep:#D82D74;
  --pink-soft:#FFD9E8;
  --pink-pale:#FFF0F7;
  --cream:#FFF9FC;
  --paper:#FFF3F8;
  --ink:#24101C;
  --ink-soft:#5B2740;
  --lime:#D9FF57;
  --yellow:#FFE466;
  --mint:#B9FFE3;
  --radius:18px;
  --shadow:6px 7px 0 var(--ink);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  background:var(--pink);
  color:var(--ink);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
.hidden{display:none!important}
.mono{font-family:Consolas,"SFMono-Regular",Menlo,monospace}

/* ================= 封面 ================= */
.cover{
  position:fixed;inset:0;z-index:3;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:
    radial-gradient(circle at 78% 10%, #FFC0E0 0 18%, transparent 52%),
    radial-gradient(circle at 8% 92%, #FF3D8B 0 16%, transparent 46%),
    linear-gradient(158deg,#FFA2CC 0%,#FF6FAE 44%,#FF4A92 100%);
  overflow:hidden;
  transition:transform .72s cubic-bezier(.7,0,.3,1),opacity .72s ease;
}
.cover.leaving{transform:translateY(-104%) rotate(-1.5deg);opacity:.35}

/* ---- 背景层 ---- */
.cover-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cover-sky::before{
  content:"";position:absolute;right:-10vw;top:-16vh;width:54vw;aspect-ratio:1;
  border-radius:50%;border:2px solid rgba(255,255,255,.5);
  box-shadow:inset 0 0 70px rgba(255,255,255,.4);
}
.cover-sky::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(36,16,28,.16) 1px, transparent 1.4px);
  background-size:20px 20px;
  mix-blend-mode:multiply;opacity:.45;
}
.orb{position:absolute;border-radius:50%;filter:blur(52px)}
.orb-a{width:44vw;aspect-ratio:1;left:-14vw;top:-16vh;background:#FFD9E8;opacity:.8}
.orb-b{width:38vw;aspect-ratio:1;right:-10vw;top:6vh;background:#FF2E88;opacity:.42}
.orb-c{width:32vw;aspect-ratio:1;left:14vw;bottom:-18vh;background:#FFC46B;opacity:.34}
.halo{
  position:absolute;left:70%;top:4%;width:min(52vw,720px);aspect-ratio:1;
  border-radius:50%;transform:translateX(-50%);
  background:conic-gradient(from 0deg,#fff0,#FFD9E8,#fff0,#B9FFE3,#fff0,#FFE466,#fff0,#9BE8FF,#fff0);
  opacity:.3;filter:blur(22px);
  animation:spin 20s linear infinite;
}
.floor-grid{
  position:absolute;left:-30%;right:-30%;bottom:-8%;height:42%;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(255,255,255,.4) 1.5px,transparent 1.5px);
  background-size:58px 58px;
  transform:perspective(440px) rotateX(62deg);
  transform-origin:50% 100%;
  opacity:.38;
  -webkit-mask-image:linear-gradient(to top,#000 18%,transparent 92%);
  mask-image:linear-gradient(to top,#000 18%,transparent 92%);
}
.cover-sky .spark{position:absolute;color:var(--cream);text-shadow:2px 2px 0 var(--ink);line-height:1}
.cover-sky .s1{left:6%;top:16%;font-size:clamp(16px,1.8vw,26px)}
.cover-sky .s2{left:46%;top:6%;font-size:clamp(12px,1.2vw,18px);color:var(--lime)}
.cover-sky .s3{right:4%;bottom:26%;font-size:clamp(18px,2vw,30px);color:var(--yellow)}
.cover-sky .s4{left:3%;bottom:12%;font-size:clamp(12px,1.1vw,16px)}
.cover-sky .s5{right:30%;top:20%;font-size:clamp(10px,.9vw,14px);color:var(--lime)}

/* ---- 跑马灯 ---- */
.marquee{
  position:relative;z-index:4;height:clamp(30px,4.2vh,40px);
  display:flex;align-items:center;overflow:hidden;
  background:var(--ink);
  border-bottom:3px solid var(--ink);
  box-shadow:0 4px 0 rgba(36,16,28,.18);
}
.marquee-track{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);
  white-space:nowrap;
  font-size:clamp(9px,.82vw,12px);font-weight:900;letter-spacing:.28em;
  color:var(--cream);
  animation:marq 26s linear infinite;
  padding-left:16px;
}
.marquee-track i{font-style:normal;color:var(--lime);letter-spacing:0}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- 主区 ---- */
.cover-main{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;gap:clamp(8px,1.8vw,30px);
  width:100%;max-width:1340px;margin:0 auto;min-height:0;
  padding:clamp(8px,1.8vh,22px) clamp(18px,3.6vw,56px) clamp(10px,2.2vh,24px);
}
.cover-copy{min-width:0;padding-top:clamp(0px,1vh,10px)}
.cover-pill{
  display:inline-flex;align-items:center;
  padding:5px 13px;margin:0 0 clamp(8px,1.4vh,14px);
  border-radius:999px;
  background:linear-gradient(180deg,#fff,#FFD9E8 55%,#FF9BC6);
  border:2.5px solid var(--ink);
  box-shadow:3px 4px 0 var(--ink);
  font-size:clamp(9px,.76vw,11px);font-weight:900;letter-spacing:.18em;
  transform:rotate(-2deg);
}
.cover-kicker{
  margin:0 0 3px;font-size:clamp(11px,.95vw,14px);font-weight:900;
  letter-spacing:.16em;color:var(--ink);
}
.cover-title{
  margin:0;
  font-family:"Arial Black","Microsoft YaHei","PingFang SC",sans-serif;
  font-size:clamp(62px,9.4vw,132px);
  line-height:.82;letter-spacing:.015em;font-weight:900;
}
.title-line{
  display:block;position:relative;
  background:linear-gradient(177deg,#FFFFFF 0%,#FFF2F8 12%,#FFC9E2 26%,#FF6FAE 40%,#FFFFFF 49%,#FF2E88 57%,#FFB8D8 72%,#FFFFFF 84%,#FF8FC4 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-stroke:clamp(2px,.2vw,3.5px) var(--ink);
  paint-order:stroke fill;
  filter:
    drop-shadow(clamp(3px,.35vw,5px) clamp(4px,.45vw,6px) 0 var(--ink))
    drop-shadow(clamp(6px,.7vw,10px) clamp(8px,.85vw,12px) 0 var(--pink-deep));
  padding-right:.06em;
}
.title-line-2{margin-left:clamp(8px,3.2vw,54px)}
.cover-meta{display:flex;flex-wrap:wrap;gap:7px;margin:clamp(26px,3.6vh,38px) 0 0}
.meta-chip{
  padding:4px 10px;border-radius:5px;
  background:var(--ink);color:var(--cream);
  font-size:clamp(8px,.7vw,10px);font-weight:900;letter-spacing:.18em;
  transform:rotate(-1deg);
}
.meta-chip:nth-child(2){background:var(--lime);color:var(--ink);transform:rotate(1.2deg)}
.meta-chip:nth-child(3){background:var(--cream);color:var(--ink);border:2px solid var(--ink);transform:rotate(-.6deg)}
.cover-en{
  margin:clamp(10px,1.6vh,16px) 0 0;
  font-size:clamp(11px,1vw,16px);font-weight:900;letter-spacing:.34em;color:var(--ink);
}
.cover-actions{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;
  margin-top:clamp(16px,2.8vh,30px);
}
.btn-start{
  position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;
  padding:clamp(12px,1.4vw,18px) clamp(22px,2.4vw,34px);
  border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,#FFF3F8 44%,#FFC9E2 100%);
  border:4px solid var(--ink);
  box-shadow:7px 8px 0 var(--ink),inset 0 2px 0 rgba(255,255,255,.95);
  font-weight:900;font-size:clamp(15px,1.45vw,22px);letter-spacing:.12em;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;
  will-change:transform;
}
.btn-start::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.8) 48%,transparent 62%);
  transform:translateX(-130%);
  animation:shine 4.2s ease-in-out infinite;
}
@keyframes shine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.btn-start .btn-arrow{font-size:1.1em;line-height:1;position:relative;z-index:1}
.btn-label{position:relative;z-index:1}
.btn-start:hover{transform:scale(1.06) translate(-2px,-2px);box-shadow:9px 11px 0 var(--ink)}
.btn-start:active{transform:scale(.97) translate(4px,5px);box-shadow:2px 3px 0 var(--ink)}
.btn-ghost{
  padding:clamp(10px,1.1vw,14px) clamp(16px,1.8vw,24px);
  border-radius:999px;border:3px solid var(--ink);
  background:rgba(255,249,252,.32);
  font-weight:800;font-size:clamp(12px,1.05vw,16px);letter-spacing:.06em;
  transition:background .16s ease,transform .18s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost:hover{background:var(--cream);transform:scale(1.06) translateY(-2px)}
.btn-ghost:active{transform:scale(.96)}
.cover-note{
  margin:clamp(10px,1.8vh,18px) 0 0;
  font-size:clamp(10px,.82vw,12px);font-weight:600;color:var(--ink-soft);
}
.cover-note b{color:var(--ink)}
.warm-note{
  display:inline-block;margin-left:8px;padding:1px 7px;
  border-radius:999px;background:rgba(36,16,28,.72);color:var(--cream);
  font-size:clamp(9px,.72vw,11px);font-weight:800;letter-spacing:.04em;
  vertical-align:1px;
}

/* ---- 右侧拼贴 ---- */
.cover-collage{position:relative;height:100%;min-height:clamp(330px,52vh,600px)}
.cd{
  position:absolute;top:2%;right:0;width:clamp(142px,16vw,232px);aspect-ratio:1;z-index:3;
  filter:drop-shadow(8px 9px 0 rgba(36,16,28,.9));
}
.cd-disc{
  position:absolute;inset:0;border-radius:50%;border:3px solid var(--ink);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(255,255,255,.55) 27% 30%, transparent 31%),
    conic-gradient(from 200deg,#FFE7F1,#B9FFE3,#C9B6FF,#FFB4D9,#FFE466,#FFE7F1,#9BE8FF,#FF8FC4,#FFE7F1);
  animation:spin 18s linear infinite;
}
.cd-label{
  position:absolute;left:50%;top:50%;z-index:2;
  width:46%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-8deg);
  border-radius:50%;border:3px solid var(--cream);
  background:radial-gradient(circle at 38% 30%,#4A2438,#24101C 70%);
  color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:clamp(8px,.7vw,11px);font-weight:900;letter-spacing:.12em;line-height:1.15;
}
.cd-label b{color:var(--pink);font-size:1.35em;letter-spacing:.18em}

.polaroid{
  position:absolute;margin:0;
  width:clamp(104px,11.2vw,166px);
  background:#fff;border:3px solid var(--ink);border-radius:6px;
  padding:6px 6px 0;
  box-shadow:9px 10px 0 var(--ink);
  transform-origin:50% 50%;
}
.polaroid img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:3px;background:var(--pink-pale);
}
.polaroid figcaption{
  padding:6px 2px 8px;text-align:center;color:var(--ink);
  font-size:clamp(9px,.76vw,12px);font-weight:900;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tape{
  position:absolute;top:-10px;left:50%;width:58%;height:16px;
  transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(180deg,rgba(255,228,102,.85),rgba(255,228,102,.62));
  border-left:2px dashed rgba(36,16,28,.18);
  border-right:2px dashed rgba(36,16,28,.18);
  box-shadow:0 1px 0 rgba(36,16,28,.15);
}
.pol-1{top:5%;left:2%;transform:rotate(-8deg);z-index:3}
.pol-2{top:36%;right:2%;transform:rotate(7deg);z-index:4}
.pol-3{bottom:4%;left:6%;transform:rotate(5deg);z-index:3}
.pol-4{bottom:1%;right:9%;transform:rotate(-6deg);z-index:2}
.tape-b{transform:translateX(-50%) rotate(4deg)}
.tape-c{transform:translateX(-50%) rotate(-5deg)}
.tape-d{transform:translateX(-50%) rotate(3deg)}

.chrome-heart{
  position:absolute;left:40%;bottom:30%;z-index:5;
  font-size:clamp(58px,7vw,104px);line-height:1;
  background:linear-gradient(180deg,#fff 0%,#FFC9E2 32%,#FF2E88 54%,#fff 64%,#FF8FC4 88%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  filter:drop-shadow(4px 5px 0 var(--ink)) drop-shadow(8px 10px 0 rgba(216,45,116,.45));
  transform:rotate(-12deg);
}
.bubble-hot{
  position:absolute;left:2%;top:46%;z-index:5;
  padding:8px 15px;border-radius:999px;
  background:var(--pink-hot);color:#fff;
  border:3px solid var(--ink);box-shadow:5px 6px 0 var(--ink);
  font-size:clamp(11px,.95vw,15px);font-weight:900;letter-spacing:.08em;
  transform:rotate(-11deg);
}
.bubble-hot::after{
  content:"";position:absolute;left:20px;bottom:-11px;
  width:0;height:0;
  border:9px solid transparent;border-top-color:var(--ink);
  filter:drop-shadow(0 2px 0 transparent);
}
.bubble-hot::before{
  content:"";position:absolute;left:23px;bottom:-6px;
  width:0;height:0;
  border:6px solid transparent;border-top-color:var(--pink-hot);
  z-index:1;
}
.butterfly{position:absolute;left:31%;top:0;width:clamp(64px,7.4vw,104px);z-index:5;transform:rotate(-8deg)}
.butterfly svg{display:block;width:100%;height:auto}
.badge-60{
  position:absolute;left:31%;top:36%;z-index:6;
  width:clamp(62px,6vw,86px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--lime);border:3px solid var(--ink);box-shadow:5px 6px 0 var(--ink);
  transform:rotate(-9deg);
}
.badge-60 b{font-size:clamp(19px,2.2vw,30px);line-height:.9}
.badge-60 span{font-size:8px;font-weight:900;letter-spacing:.12em}
.sticker-hand{
  position:absolute;left:45%;bottom:0;z-index:6;
  width:clamp(76px,7.6vw,108px);aspect-ratio:1;
  display:grid;place-items:center;
  background:var(--pink-soft);border:3px solid var(--ink);border-radius:50%;
  box-shadow:5px 6px 0 var(--ink);transform:rotate(9deg);
}
.sticker-hand svg{width:78%;height:78%}

/* ---- 底部 ---- */
.cover-bottom{position:relative;z-index:2;padding:0 0 clamp(6px,1.2vh,12px)}
.cover-bottom .checker{
  height:clamp(10px,1.4vh,16px);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  background-image:
    linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%),
    linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%);
  background-size:16px 16px;
  background-position:0 0,8px 8px;
  background-color:var(--cream);
}
.cover-bottom p{
  margin:7px 0 0;text-align:center;
  font-size:clamp(9px,.74vw,11px);font-weight:600;color:var(--ink-soft);letter-spacing:.04em;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= 游戏框架 ================= */
.game{
  position:fixed;inset:0;z-index:2;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(7px,1.2vh,13px);
  padding:clamp(8px,1.4vh,16px) clamp(10px,2.2vw,30px);
  background:
    radial-gradient(circle at 12% 18%, #FF92C4 0 10%, transparent 35%),
    radial-gradient(circle at 88% 92%, #FF4F96 0 12%, transparent 36%),
    var(--paper);
  overflow:hidden;
  animation:gameIn .5s ease both;
}
@keyframes gameIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.topbar{
  display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);
  width:100%;max-width:1280px;margin:0 auto;min-width:0;
}
.brand{display:flex;flex-direction:column;min-width:0;line-height:1.05}
.brand-cn{font-size:clamp(15px,1.5vw,20px);font-weight:900;letter-spacing:.04em;white-space:nowrap}
.brand-en{font-size:clamp(8px,.65vw,10px);font-weight:900;letter-spacing:.18em;color:var(--ink-soft);white-space:nowrap}
.timer{
  min-width:clamp(84px,7vw,112px);text-align:center;
  background:var(--ink);color:var(--cream);
  border-radius:15px;padding:5px 12px;box-shadow:4px 5px 0 var(--pink-deep);
  line-height:1;
}
.timer span{font-size:clamp(24px,2.8vw,44px);font-weight:900;letter-spacing:-.02em}
.timer small{display:block;font-size:8px;font-weight:900;letter-spacing:.18em;margin-top:3px;opacity:.75}
.timer.urgent{animation:urgent .8s ease-in-out infinite}
@keyframes urgent{50%{transform:scale(1.04);background:var(--pink-hot)}}
.hud{display:flex;gap:clamp(5px,.7vw,10px);margin-left:auto;min-width:0}
.hud-item{
  min-width:clamp(62px,6vw,92px);padding:3px 9px;text-align:center;
  background:var(--cream);border:2.5px solid var(--ink);border-radius:11px;
  box-shadow:3px 4px 0 var(--ink);line-height:1.05;
}
.hud-item span{display:block;font-size:8px;font-weight:900;letter-spacing:.15em;color:var(--ink-soft)}
.hud-item b{font-size:clamp(14px,1.5vw,21px);font-weight:900}
.hud-item:last-child{background:var(--lime)}
.top-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.mini-btn{
  padding:7px 12px;border-radius:999px;border:2.5px solid var(--ink);
  background:var(--cream);font-size:clamp(10px,.8vw,12px);font-weight:900;letter-spacing:.04em;
  box-shadow:3px 4px 0 var(--ink);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;
}
.mini-btn:hover{transform:scale(1.07) translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink)}
.icon-btn{
  width:clamp(32px,2.6vw,38px);aspect-ratio:1;border-radius:50%;
  border:2.5px solid var(--ink);background:var(--cream);
  display:grid;place-items:center;font-weight:900;font-size:16px;
  box-shadow:3px 4px 0 var(--ink);
}
.icon-btn{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
.icon-btn:hover{transform:scale(1.12) rotate(-6deg);box-shadow:4px 6px 0 var(--ink)}
.icon-btn:active{transform:scale(.94)}
.icon-btn.muted{background:var(--pink-soft);opacity:.7}

.stage{
  display:grid;grid-template-rows:minmax(140px,34%) minmax(0,1fr);
  gap:clamp(7px,1.2vh,12px);
  width:100%;max-width:1280px;margin:0 auto;min-height:0;
}
.panel{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:var(--cream);border:3px solid var(--ink);border-radius:16px;
  box-shadow:5px 6px 0 var(--ink);
}
.panel-head{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:5px clamp(8px,1vw,13px);
  background:var(--pink);border-bottom:2.5px solid var(--ink);
  font-size:9px;font-weight:900;letter-spacing:.18em;
}
.panel-meme .panel-head{background:var(--lime)}
.panel-state{margin-left:auto;font-size:8px;letter-spacing:.12em;opacity:.72}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.meme-dot{font-size:10px;line-height:1}

.cam-view{position:relative;flex:1;min-height:0;background:#1B0F16;overflow:hidden}
#cam{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scaleX(-1);background:#1B0F16;
}
#skel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cam-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:var(--cream);text-align:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,111,174,.18), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 12px);
}
.cam-placeholder-icon{
  width:44px;height:44px;border:2.5px dashed var(--pink-soft);border-radius:50%;
  display:grid;place-items:center;font-size:24px;font-weight:300;color:var(--pink-soft);
}
.cam-placeholder p{margin:0;font-size:clamp(13px,1.2vw,17px);font-weight:900;letter-spacing:.08em}
.cam-placeholder small{font-size:10px;line-height:1.5;opacity:.72;max-width:92%}
.cam-retry{
  margin-top:4px;padding:6px 13px;border-radius:999px;
  border:2px solid var(--cream);background:rgba(255,249,252,.16);
  color:var(--cream);font-size:11px;font-weight:800;letter-spacing:.06em;
  transition:background .15s ease,transform .15s ease;
}
.cam-retry:hover{background:rgba(255,249,252,.32);transform:translateY(-1px)}
.cam-retry:active{transform:translateY(1px)}
.cam-placeholder.hidden{display:none}
.gesture-tag{
  position:absolute;left:10px;bottom:10px;
  padding:5px 12px;border-radius:999px;
  background:rgba(36,16,28,.9);border:2px solid var(--lime);color:var(--lime);
  font-size:clamp(10px,.85vw,13px);font-weight:900;letter-spacing:.06em;
  max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:2px 3px 0 rgba(0,0,0,.35);
}
.cam-debug{
  position:absolute;right:9px;top:8px;
  font-family:Consolas,monospace;font-size:8px;color:#fff;opacity:.52;
  letter-spacing:.02em;pointer-events:none;
}

.meme-stage{
  position:relative;flex:1;min-height:0;display:grid;place-items:center;
  padding:clamp(8px,1.6vh,18px);
  overflow:hidden;
  background-color:
    var(--pink-pale);
  background-image:
    linear-gradient(45deg, rgba(255,111,174,.10) 25%, transparent 25%, transparent 75%, rgba(255,111,174,.10) 75%),
    linear-gradient(45deg, rgba(255,111,174,.10) 25%, transparent 25%, transparent 75%, rgba(255,111,174,.10) 75%);
  background-size:26px 26px;
  background-position:0 0,13px 13px;
}
.meme-idle{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:clamp(14px,2.2vh,24px) clamp(18px,3vw,34px);
  border:2.5px dashed rgba(36,16,28,.35);border-radius:18px;
  color:var(--ink-soft);text-align:center;background:rgba(255,249,252,.5);
}
.idle-badge{
  padding:4px 12px;border-radius:999px;background:var(--pink);color:var(--ink);
  font-size:10px;font-weight:900;letter-spacing:.12em;
}
.meme-idle p{margin:0;font-size:clamp(12px,1vw,15px);font-weight:700}
.meme-card{
  display:none;flex-direction:column;align-items:center;
  max-width:min(94%,760px);max-height:100%;
  padding:9px 9px 0;background:#fff;
  border:3px solid var(--ink);border-radius:15px;
  box-shadow:8px 9px 0 var(--ink);
  transform-origin:50% 70%;
}
.meme-card.show{display:flex;animation:memePop .32s cubic-bezier(.18,1.5,.42,1) both}
@keyframes memePop{
  0%{transform:scale(.72) rotate(-6deg);opacity:.4}
  60%{transform:scale(1.06) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.meme-photo{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:0;background:#fff;border-radius:8px;overflow:hidden;
}
.meme-photo img{
  display:block;width:clamp(180px,29vw,400px);height:auto;
  max-height:min(40vh,370px);
  min-height:clamp(150px,24vw,240px);
  object-fit:contain;
}
.meme-caption{
  width:100%;padding:7px 8px 9px;text-align:center;
  font-size:clamp(13px,1.4vw,19px);font-weight:900;letter-spacing:.10em;
  color:var(--ink);
}
.meme-flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0}
.meme-flash.fire{animation:flash .32s ease-out}
@keyframes flash{0%{opacity:.55}100%{opacity:0}}

.mission-bar{
  display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,2fr) auto;
  align-items:center;gap:clamp(7px,1vw,14px);
  width:100%;max-width:1280px;margin:0 auto;min-width:0;
}
.mission-card{
  position:relative;display:flex;align-items:center;gap:10px;min-width:0;
  padding:7px 12px 9px;background:var(--cream);
  border:3px solid var(--ink);border-radius:15px;
  box-shadow:4px 5px 0 var(--ink);overflow:hidden;
}
.mission-icon{font-size:clamp(23px,2.8vw,34px);line-height:1;flex:0 0 auto}
.mission-copy{min-width:0;line-height:1.08}
.mission-kicker{display:block;font-size:8px;font-weight:900;letter-spacing:.14em;color:var(--ink-soft)}
.mission-name{display:block;font-size:clamp(16px,2vw,25px);font-weight:900;white-space:nowrap}
.mission-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--pink-soft)}
.mission-progress i{display:block;height:100%;width:0;background:var(--pink-hot);transition:width .08s linear}
.mission-card.hit{animation:hit .4s ease}
@keyframes hit{30%{transform:scale(1.03);background:var(--lime)}}
.mission-card.miss{animation:miss .4s ease}
@keyframes miss{20%{transform:translateX(-5px)}50%{transform:translateX(5px)}80%{transform:translateX(-3px)}}

.gesture-strip{
  display:flex;flex-wrap:wrap;gap:5px 6px;min-width:0;
  padding:2px 1px;
}
.gesture-strip::-webkit-scrollbar{display:none}
.gesture-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
  padding:3px 7px;border:2px solid var(--ink);border-radius:999px;
  background:var(--cream);box-shadow:2px 3px 0 var(--ink);
  font-size:clamp(8px,.68vw,10px);font-weight:900;white-space:nowrap;
}
.gesture-chip .num{
  display:grid;place-items:center;width:14px;height:14px;border-radius:50%;
  background:var(--ink);color:var(--cream);font-size:8px;
}
.gesture-chip{transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .16s ease}
.gesture-chip:hover{transform:scale(1.07) translateY(-2px)}
.gesture-chip.active{background:var(--lime);transform:scale(1.05) translateY(-1px)}
.mission-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-size:9px;font-weight:700;color:var(--ink-soft);white-space:nowrap;
}

/* ================= 浮层 ================= */
.overlay{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,34px);
  background:rgba(255,111,174,.58);
  backdrop-filter:blur(9px);
  animation:overlayIn .22s ease both;
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.boot-card,.tutorial-card,.result-card{
  width:100%;max-width:540px;max-height:92dvh;overflow:auto;
  padding:clamp(20px,3.4vw,36px);
  background:var(--cream);border:4px solid var(--ink);border-radius:22px;
  box-shadow:10px 12px 0 var(--ink);text-align:center;
}
.kicker{
  margin:0 0 8px;font-size:9px;font-weight:900;letter-spacing:.2em;color:var(--ink-soft);
}
.boot-card p{margin:14px 0 4px;font-size:clamp(15px,1.8vw,20px);font-weight:900}
.boot-card small{font-size:10px;color:var(--ink-soft)}
.loader{
  width:52px;height:52px;margin:0 auto;border-radius:50%;
  border:4px solid var(--pink-soft);border-top-color:var(--pink-hot);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.tutorial-card h2{margin:0 0 6px;font-size:clamp(24px,3.4vw,38px);font-weight:900}
.tut-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.tut-step{
  border:2.5px solid var(--ink);border-radius:14px;padding:10px 6px;
  background:#fff;box-shadow:3px 4px 0 var(--ink);opacity:.55;
  transition:transform .2s ease,opacity .2s ease,background .2s ease;
}
.tut-step .ico{display:block;font-size:24px;line-height:1.2}
.tut-step b{display:block;font-size:12px;margin-top:2px}
.tut-step .state{display:block;font-size:8px;font-weight:900;letter-spacing:.1em;color:var(--ink-soft);margin-top:3px}
.tut-step.active{opacity:1;background:var(--pink-soft);transform:translateY(-2px)}
.tut-step.done{opacity:1;background:var(--lime)}
.tut-now{font-size:clamp(14px,1.7vw,19px);font-weight:800}
.tut-now b{color:var(--pink-deep)}
.tut-bar{height:8px;background:var(--pink-soft);border-radius:999px;overflow:hidden;margin:10px 0 14px}
.tut-bar i{display:block;height:100%;width:0;background:var(--pink-hot);transition:width .1s linear}
.tut-actions{display:flex;justify-content:center}
.tut-note{display:block;margin-top:12px;font-size:10px;color:var(--ink-soft)}

.result-card{max-width:600px}
.rank{
  width:clamp(76px,11vw,112px);aspect-ratio:1;margin:6px auto 10px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--pink);border:4px solid var(--ink);box-shadow:7px 8px 0 var(--ink);
  font-family:"Arial Black",sans-serif;font-size:clamp(42px,6vw,64px);font-weight:900;
  transform:rotate(-6deg);
}
.result-card h2{margin:0;font-size:clamp(22px,3.2vw,34px);font-weight:900}
.result-card #resultSub{margin:6px 0 0;color:var(--ink-soft);font-size:clamp(12px,1.2vw,15px);font-weight:700}
.result-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:18px 0 20px;
}
.result-stats div{
  padding:8px 4px;background:#fff;border:2.5px solid var(--ink);border-radius:12px;
  box-shadow:3px 4px 0 var(--ink);
}
.result-stats span{display:block;font-size:8px;font-weight:900;letter-spacing:.1em;color:var(--ink-soft)}
.result-stats b{display:block;font-size:clamp(15px,1.8vw,22px);font-weight:900;margin-top:2px}
.result-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.result-actions .btn-start{padding:12px 22px;font-size:clamp(13px,1.3vw,17px);box-shadow:6px 7px 0 var(--ink)}
.result-actions .btn-ghost{padding:10px 14px;font-size:12px}
.result-note{margin:16px 0 0;font-size:9px;color:var(--ink-soft)}

/* 吐司与彩带 */
.toast{
  position:fixed;left:50%;top:clamp(72px,10vh,100px);z-index:70;
  transform:translate(-50%,-10px);opacity:0;pointer-events:none;
  padding:9px 18px;border-radius:999px;
  background:var(--ink);color:var(--cream);
  font-size:11px;font-weight:900;letter-spacing:.06em;
  box-shadow:3px 4px 0 var(--pink-deep);
  transition:opacity .2s ease,transform .2s ease;
  max-width:min(90vw,560px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;top:-16px;width:9px;height:12px;
  background:var(--c,var(--pink-hot));border:2px solid var(--ink);border-radius:2px;
  animation:confettiDrop var(--d,1.4s) linear forwards;
}
@keyframes confettiDrop{
  0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:1}
  100%{transform:translate3d(var(--x,0),105vh,0) rotate(var(--r,720deg));opacity:.9}
}

/* 封面动效 */
@media (prefers-reduced-motion: no-preference){
  .pol-1{animation:floatA 7s ease-in-out infinite}
  .pol-2{animation:floatB 8s ease-in-out infinite}
  .pol-3{animation:floatC 7.5s ease-in-out infinite}
  .pol-4{animation:floatD 8.5s ease-in-out infinite}
  .cd{animation:cdBob 9s ease-in-out infinite}
  .butterfly{animation:flit 5.5s ease-in-out infinite}
  .chrome-heart{animation:beat 2.8s ease-in-out infinite}
  .cover-sky .spark{animation:twinkle 2.8s ease-in-out infinite}
  .btn-start{animation:breathe 3.6s ease-in-out infinite}
}
@keyframes floatA{50%{transform:translateY(-8px) rotate(-6deg)}}
@keyframes floatB{50%{transform:translateY(-7px) rotate(9deg)}}
@keyframes floatC{50%{transform:translateY(-6px) rotate(7deg)}}
@keyframes floatD{50%{transform:translateY(-8px) rotate(-8deg)}}
@keyframes cdBob{50%{transform:translateY(-7px)}}
@keyframes flit{50%{transform:translateY(-6px) rotate(-4deg)}}
@keyframes beat{50%{transform:rotate(-12deg) scale(1.06)}}
@keyframes twinkle{50%{opacity:.4;transform:scale(.82)}}
@keyframes breathe{50%{box-shadow:10px 12px 0 var(--ink),inset 0 2px 0 rgba(255,255,255,.95)}}

/* ================= 响应式 ================= */
@media (min-width:900px){
  .stage{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-rows:minmax(0,1fr)}
}
@media (max-width:980px){
  .cover-main{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:10px}
  .cover-title{font-size:clamp(56px,11.5vw,108px)}
  .cover-collage{min-height:clamp(300px,46vh,460px)}
  .pol-4{display:none}
  .brand-en{display:none}
  .hud-item:nth-child(3){display:none}
}
@media (max-width:760px){
  .cover-main{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-content:start;gap:0;align-items:start;padding:6px 18px 8px}
  .cover-copy{padding-top:6px}
  .cover-pill{margin-bottom:6px;transform:none}
  .cover-kicker{display:none}
  .cover-title{font-size:clamp(52px,15.5vw,92px)}
  .title-line-2{margin-left:clamp(6px,10vw,42px)}
  .cover-meta{margin-top:8px;gap:5px}
  .cover-en{display:none}
  .cover-actions{margin-top:12px}
  .cover-collage{height:100%;min-height:0;margin-top:8px}
  .cd{width:clamp(92px,23vw,122px);top:0;right:0}
  .cd-label{font-size:8px}
  .polaroid{width:clamp(78px,20vw,104px);padding:4px 4px 0;border-width:2.5px;box-shadow:5px 6px 0 var(--ink)}
  .polaroid figcaption{font-size:9px;padding:4px 2px 5px}
  .pol-1{left:2%;top:4%}
  .pol-2{right:2%;top:42%}
  .pol-3{left:14%;bottom:2%}
  .pol-4{display:none}
  .chrome-heart{font-size:clamp(36px,10vw,54px);left:43%;bottom:30%}
  .badge-60{width:clamp(46px,11vw,58px);left:35%;top:34%}
  .bubble-hot{padding:6px 10px;font-size:10px;left:0;top:45%}
  .butterfly{width:clamp(42px,11vw,60px);left:31%}
  .sticker-hand{width:clamp(48px,12vw,62px);left:44%}
  .cover-bottom p{font-size:9px}
  .game{padding:7px 9px}
  .topbar{gap:7px;flex-wrap:wrap}
  .brand{flex:1 1 auto}
  .timer{margin-left:auto}
  .hud{display:none}
  .top-actions{order:3}
  .brand-cn{font-size:14px}
  .stage{grid-template-rows:minmax(112px,26%) minmax(0,1fr)}
  .mission-bar{grid-template-columns:1fr auto;gap:5px;padding-bottom:2px}
  .gesture-strip{
    grid-column:1 / -1;order:2;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:4px;padding:1px 30px 3px 1px;
    -webkit-mask-image:linear-gradient(90deg,#000 0 86%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0 86%,transparent 100%);
    scroll-snap-type:x proximity;
  }
  .gesture-chip{padding:3px 6px;font-size:9px;box-shadow:2px 2px 0 var(--ink);scroll-snap-align:start}
  .gesture-chip .num{width:13px;height:13px;font-size:8px}
  .mission-meta{display:none}
  .mission-card{padding:6px 10px 8px}
  .meme-stage{padding:6px}
  .meme-card{max-width:97%;padding:6px 6px 0;box-shadow:5px 6px 0 var(--ink)}
  .meme-photo img{width:min(62vw,300px);max-height:36vh;min-height:0}
  .result-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .cover-title{font-size:clamp(48px,15vw,72px)}
  .cover-pill{font-size:8px;padding:4px 10px}
  .cover-meta{gap:4px}
  .meta-chip{font-size:7px;padding:3px 7px}
  .btn-start{padding:10px 16px;font-size:14px}
  .btn-ghost{padding:9px 12px;font-size:11px}
  .cover-note{font-size:9px;margin-top:8px}
  .cover-collage{min-height:clamp(188px,26vh,240px)}
  .pol-2{top:40%}
  .bubble-hot{display:none}
  .chrome-heart{display:none}
  .cam-debug{display:block;font-size:9px;opacity:.75}
  .meme-card{padding:7px 7px 0;border-width:2.5px}
  .meme-caption{font-size:13px;padding:5px 6px 7px}
  .meme-photo img{width:min(78vw,320px);max-height:38vh}
  .mission-icon{font-size:22px}
  .mission-name{font-size:15px}
  .top-actions .mini-btn{display:none}
  .result-actions{flex-direction:column}
  .result-actions button{width:100%}
}
@media (max-height:620px){
  .cover-title{font-size:clamp(42px,10vh,66px)}
  .cover-pill,.cover-kicker,.cover-en{display:none}
  .cover-collage{min-height:168px}
  .cover-actions{margin-top:8px}
  .cover-note{margin-top:6px}
  .stage{grid-template-rows:minmax(110px,32%) minmax(0,1fr)}
}

/* ================= 萌化增强 ================= */
body{
  font-family:"Yuanti SC","YouYuan","幼圆","Microsoft YaHei UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
.cover-pill{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) rotate(-1.5deg)}}
.meta-chip{border-radius:999px}
.mission-card,.meme-card{border-radius:calc(var(--radius) + 8px)}
.toast{border-radius:999px}

/* ================= 开局倒计时（糖果立体字 + 白胶囊） ================= */
.countdown{
  position:fixed;inset:0;z-index:66;
  display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,46,136,.16),transparent 62%);
}
.cd-bubble{
  --cds:clamp(58px,13.5vw,150px);
  position:relative;
  display:grid;place-items:center;
  padding:calc(var(--cds) * 0.22) calc(var(--cds) * 0.40);
  border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF6FB 58%,#FFE1F0 100%);
  box-shadow:
    0 0 0 7px rgba(255,255,255,.78),
    0 0 0 12px rgba(255,46,136,.26),
    0 20px 52px rgba(216,45,116,.44),
    inset 0 -10px 0 rgba(255,170,212,.55);
}
.cd-bubble::after{
  content:"";position:absolute;left:50%;top:10%;
  width:52%;height:24%;transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));
  pointer-events:none;
}
.cd-outline,.cd-fill{
  grid-area:1/1;
  font-family:"Arial Rounded MT Bold","Yuanti SC","YouYuan","幼圆","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:var(--cds);
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
  -webkit-user-select:none;user-select:none;
}
.cd-outline{
  z-index:1;
  color:#fff;
  -webkit-text-stroke:0.22em #fff;
}
.cd-fill{
  z-index:2;
  background:linear-gradient(180deg,#FFF0B8 0%,#FFCE4E 32%,#FF8FC4 68%,#FF2E88 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cd-bubble.ready{--cds:clamp(46px,10.5vw,120px)}
.cd-bubble.num{--cds:clamp(72px,17vw,190px)}
.cd-bubble.go{--cds:clamp(44px,10vw,112px)}
.cd-bubble.pop{animation:cdPop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes cdPop{
  0%{transform:scale(.5) rotate(-7deg);opacity:0}
  62%{transform:scale(1.07) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}